/* ==========================================================================
   Enclave Maldives - public site stylesheet
   Brand system: Outfit throughout, hierarchy by weight and case.
   Deep Ocean Blue dominates; Soft Lagoon Blue is an accent for titles, rules
   and labels - never a large fill. See the brand guidelines deck.
   ========================================================================== */

:root {
  /* Colour */
  --ocean: #0b192c;        /* Deep Ocean Blue - dominant background */
  --ocean-2: #070f1c;      /* deepest, for gradient ends */
  --night: #0f172a;        /* Night Slate - footer / panels */
  --lagoon: #38bdf8;       /* Soft Lagoon Blue - accent */
  --channel: #0284c7;      /* Channel Blue - deep accent (focus, hover) */
  --channel-2: #0369a1;    /* Channel on light grounds (eyebrows, links) */
  --shell: #f8fafc;        /* Shell White - headings on dark, page ground */
  --wash: #edf3f7;         /* alternating light section */
  --mist: #94a3b8;         /* Mist Slate - muted text on dark */
  --fog: #d7e0e8;          /* hero body copy on dark */
  --cloud: #cbd5e1;        /* rules on light, light copy on dark */
  --line: #e2e8f0;         /* card rules */
  --slate: #56667b;        /* body copy on light: soft grey-blue */
  --slate-2: #64748b;      /* secondary copy on light */
  --danger: #b23434;
  --heading: #1e2b3f;      /* dark navy-slate for H1/H2 on light */

  /* Type */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-h: 74px;
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-card: 0 1px 2px rgba(11, 25, 44, .08);
  --shadow-lift: 0 24px 50px rgba(11, 25, 44, .15);
  --shadow-float: 0 2px 4px rgba(11, 25, 44, .08), 0 20px 44px rgba(11, 25, 44, .08);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* `clip`, not `hidden`: overflow-x:hidden on html/body turns the body into a
   scroll container, which silently disables every position:sticky element on
   the page (the homepage stage, the category filter bar, the inquiry card). */
html, body { overflow-x: clip; }
/* Scripts toggle visibility with el.hidden. Without this, any element that
   also has a display rule (.field, .detail-block, .mobile-bar...) out-ranks the
   UA's [hidden] and stays visible. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ocean);
  line-height: 1.12;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--channel-2); text-decoration: none; }
a:hover { color: var(--ocean); }
img, video { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
::selection { background: var(--lagoon); color: var(--ocean); }

/* Focus: Channel Blue on light grounds (4:1 on white); Soft Lagoon where the
   ground is dark (8:1 on Deep Ocean). */
:focus-visible { outline: 2px solid var(--channel); outline-offset: 3px; }
.site-nav :focus-visible, .menu-overlay :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .ways :focus-visible,
.cta-band :focus-visible, .site-footer :focus-visible, .mobile-bar :focus-visible, .lightbox :focus-visible { outline-color: var(--lagoon); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--shell); color: var(--ocean);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Honeypot - visually and semantically removed but still in the DOM so a naive
   bot fills it in. A submission with it populated is dropped server-side. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(70px, 10vw, 140px) 0; }
.section--tight { padding: clamp(50px, 7vw, 96px) 0 clamp(60px, 9vw, 130px); }
.section--wash { background: var(--wash); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font: 600 11px/1 var(--font-body); letter-spacing: .32em; text-transform: uppercase;
  color: var(--channel-2);
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.eyebrow--lagoon { color: var(--lagoon); }
.eyebrow--plain::before { display: none; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: clamp(38px, 5vw, 64px);
}
.section-head > div { display: flex; flex-direction: column; gap: 20px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 58px); }

.browse-links h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 14px 0 28px; }
.browse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.browse-list a { color: var(--ocean); border-bottom: 1px solid var(--channel-2); padding-bottom: 4px; }
.browse-list a:hover { color: var(--channel-2); }

.link-more {
  font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ocean); border-bottom: 1px solid var(--channel-2); padding-bottom: 6px;
}
.link-more:hover { color: var(--channel-2); }
.link-more--light { color: var(--shell); border-bottom-color: var(--lagoon); }
.link-more--light:hover { color: var(--lagoon); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 20px 38px; border: 1px solid transparent;
  cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease;
  min-height: 48px; white-space: nowrap;
}
.btn-lagoon { background: var(--lagoon); color: var(--ocean); }
.btn-lagoon:hover { background: var(--shell); color: var(--ocean); }
.btn-ghost { color: var(--shell); border-color: rgba(255, 255, 255, .35); background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--shell); color: var(--shell); }
.btn-ocean { background: var(--ocean); color: var(--shell); }
.btn-ocean:hover { background: var(--channel); color: var(--shell); }
.btn-outline { background: #fff; color: var(--ocean); border-color: var(--cloud); }
.btn-outline:hover { border-color: var(--ocean); color: var(--ocean); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes riseSm { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomOut { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes drift { from { transform: translateY(4%) scale(1.06); } to { transform: translateY(-4%) scale(1.06); } }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* Scroll-reveal: main.js flips .is-in via IntersectionObserver. Works in every
   browser (unlike animation-timeline) and degrades to "just visible". */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Site nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 80;
  background: var(--ocean); border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 0;
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
body.nav-overlay .site-nav { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; padding: 22px 0; }
body.nav-overlay .site-nav.is-scrolled { background: rgba(11, 25, 44, .95); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); padding: 12px 0; }
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; flex-direction: column; gap: 3px; color: var(--shell); flex: 0 0 auto; }
.brand:hover { color: var(--shell); }
.brand-name { font: 400 clamp(19px, 2vw, 23px)/1 var(--font-display); letter-spacing: .14em; }
.brand-sub { font: 600 11px/1 var(--font-body); letter-spacing: .36em; color: var(--lagoon); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav-links a { font: 500 14px/1 var(--font-body); letter-spacing: .06em; color: var(--line); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--lagoon); }
.nav-links a.nav-cta {
  font: 600 13px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ocean); background: var(--lagoon); border-radius: 999px; padding: 13px 24px;
}
.nav-links a.nav-cta:hover { background: var(--shell); color: var(--ocean); }

.nav-burger {
  display: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm); width: 46px; height: 46px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  backdrop-filter: blur(6px);
}
.nav-burger span { width: 19px; height: 1.5px; background: var(--shell); display: block; transition: transform .3s, opacity .3s, width .3s; }
.nav-burger span:nth-child(3) { width: 12px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { width: 19px; transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

.menu-overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--ocean);
  display: flex; flex-direction: column; padding: 26px var(--gutter) 40px;
  animation: fade .28s ease both;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay-head { display: flex; align-items: center; justify-content: space-between; }
.menu-close {
  background: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-sm);
  width: 48px; height: 48px; font: 300 26px/1 var(--font-body); color: var(--shell); cursor: pointer;
}
.menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; overflow-y: auto; }
.menu-links a {
  font: 400 clamp(30px, 9vw, 44px)/1.3 var(--font-display); color: var(--shell);
  border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 14px 0;
}
.menu-links a:last-child { border-bottom: none; }
.menu-links a:hover, .menu-links a.active { color: var(--lagoon); }
.menu-foot { display: flex; flex-direction: column; gap: 14px; }
.menu-foot .btn { padding: 20px; }
.menu-foot .menu-wa { text-align: center; font: 500 14px/1 var(--font-body); color: var(--mist); }
body.menu-open { overflow: hidden; }

/* ---------- Full hero (home) ---------- */
.hero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ocean);
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: zoomOut 2.4s cubic-bezier(.2, .7, .2, 1) both; }
.hero-poster { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(175deg, rgba(11, 25, 44, .72) 0%, rgba(11, 25, 44, .45) 38%, rgba(11, 25, 44, .9) 100%); }
.hero-body { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.hero-body .container { padding-bottom: clamp(56px, 9vh, 110px); }
.hero-copy { max-width: 920px; display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); }
.hero-copy .eyebrow { animation: riseSm .8s var(--ease) .15s both; }
.hero-copy h1 { font-size: clamp(42px, 8.6vw, 116px); line-height: 1.02; color: var(--shell); animation: rise 1.1s var(--ease) .28s both; }
.hero-copy p { max-width: 600px; font: 300 clamp(17px, 2vw, 23px)/1.55 var(--font-body); color: var(--fog); animation: rise 1.1s var(--ease) .44s both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; animation: rise 1.1s var(--ease) .58s both; }
.hero-cue { position: absolute; right: var(--gutter); bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-cue span:first-child { font: 600 11px/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.hero-cue span:last-child { width: 1px; height: 34px; background: linear-gradient(var(--lagoon), transparent); animation: cue 2s ease-in-out infinite; }

/* The hero video's pause control, clear of the nav and the scroll cue. */
.hero-pause {
  position: absolute; top: calc(var(--nav-h) + 28px); right: var(--gutter); z-index: 2;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 25, 44, .45); color: var(--shell);
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.hero-pause:hover { background: rgba(11, 25, 44, .72); border-color: var(--shell); }

/* ---------- Page hero (category / property / contact) ---------- */
.page-hero { position: relative; height: clamp(400px, 62vh, 620px); overflow: hidden; background: var(--ocean); }
.page-hero--short { height: clamp(340px, 52vh, 520px); }
.page-hero--tall { height: clamp(420px, 66vh, 660px); }
.page-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; animation: zoomOut 2s cubic-bezier(.2, .7, .2, 1) both; }
.page-hero-shade { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(11, 25, 44, .7), rgba(11, 25, 44, .45) 40%, rgba(11, 25, 44, .94)); }
.page-hero-body { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.page-hero-body .container { padding-bottom: clamp(40px, 6vh, 72px); }
.page-hero-copy { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); max-width: 820px; }
.page-hero-copy h1 { font-size: clamp(38px, 7vw, 84px); line-height: 1.04; color: var(--shell); animation: rise 1s var(--ease) .22s both; }
.page-hero-copy p { max-width: 600px; font: 300 clamp(16px, 1.8vw, 21px)/1.6 var(--font-body); color: var(--fog); animation: rise 1s var(--ease) .34s both; }
.page-hero-copy .eyebrow { animation: riseSm .8s ease .1s both; }
.page-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font: 400 clamp(15px, 1.6vw, 18px)/1 var(--font-body); color: var(--fog); animation: rise 1s var(--ease) .32s both; }
.page-hero-meta .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--lagoon); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); animation: riseSm .8s ease .1s both; }
.breadcrumb a { color: var(--mist); }
.breadcrumb a:hover { color: var(--shell); }
.breadcrumb [aria-current] { color: var(--lagoon); }

/* ---------- Home: intro ---------- */
.intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(40px, 6vw, 90px); align-items: start; }
.intro > div { display: flex; flex-direction: column; gap: 26px; }
.intro h2 { font-size: clamp(30px, 4.4vw, 58px); }
.intro .lead { font: 300 clamp(18px, 1.7vw, 22px)/1.65 var(--font-body); color: var(--slate); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 24px; border-top: 1px solid var(--cloud); padding-top: clamp(24px, 3vw, 36px); }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-value { font: 400 clamp(32px, 3.6vw, 46px)/1 var(--font-display); color: var(--ocean); }
.stat-label { font: 600 11px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); }

/* ---------- Home: compact hero, ways tiles, icon row ---------- */
.hero--compact { height: 100svh; min-height: 560px; }
.hero--compact .hero-body .container { padding-bottom: clamp(40px, 7vh, 80px); }

.ways-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.way-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: linear-gradient(160deg, var(--channel), var(--ocean)); color: var(--shell); }
.way-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.way-tile:hover img { transform: scale(1.06); }
.way-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 25, 44, 0) 45%, rgba(11, 25, 44, .88) 100%); }
.way-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.way-tile-title { font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display); }
@media (max-width: 700px) {
  .ways-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
  .ways-tiles::-webkit-scrollbar { display: none; }
  .way-tile { flex: 0 0 66%; scroll-snap-align: start; }
}

.why-row { padding-top: 0; }
.why-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; border-top: 1px solid var(--cloud); padding-top: clamp(28px, 3vw, 40px); }
.why-item { display: flex; align-items: center; gap: 14px; }
.why-item .icon { flex: none; width: 26px; height: 26px; color: var(--channel-2); }
.why-item h3 { font: 600 13px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ocean); }

/* ---------- Floating WhatsApp / Instagram ---------- */
.chat-fab { position: fixed; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.chat-fab-btn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px rgba(11, 25, 44, .35); transition: transform .3s var(--ease), box-shadow .3s ease; }
.chat-fab-btn svg { width: 28px; height: 28px; }
.chat-fab-btn:hover { transform: translateY(-3px) scale(1.05); color: #fff; box-shadow: 0 10px 24px rgba(11, 25, 44, .45); }
.chat-fab-btn--wa { background: #25d366; }
.chat-fab-btn--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
@media (max-width: 1023px) { body:has(.mobile-bar) .chat-fab { bottom: 96px; } }
@media print { .chat-fab { display: none; } }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
/* Listing pages (category grid): a fixed 4-up grid - smaller, denser cards
   than the homepage featured grid - paginated at 12 (4x3) per page by
   category.js rather than left to grow unbounded. */
.card-grid--listing { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); color: inherit; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }
.card-grid--listing .card-body { padding: 16px 18px; gap: 6px; }
.card-grid--listing .card-badge { font-size: 11px; padding: 7px 12px; top: 12px; left: 12px; }
.card-grid--listing .card-kicker { font-size: 11px; }
.card-grid--listing .card h3 { font-size: 16px; line-height: 1.3; }
.card-grid--listing .card-desc {
  font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-grid--listing .card-foot { padding-top: 12px; margin-top: 2px; }
.card-grid--listing .card-foot .price-amount { font-size: 17px; }
.card-grid--listing .card-foot .price-unit { font-size: 11px; }
.card-grid--listing .card-cta { font-size: 11px; }
@media (max-width: 980px) { .card-grid--listing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid--listing { grid-template-columns: 1fr; } }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-badge {
  position: absolute; top: 16px; left: 16px;
  font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ocean); background: rgba(248, 250, 252, .94); border-radius: 999px; padding: 9px 15px;
}
.card-body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-kicker { font: 600 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--channel-2); }
.card h3 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.2; }
.card-desc { font: 400 15px/1.6 var(--font-body); color: var(--slate-2); flex: 1; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; }
.card-foot .price { display: flex; flex-direction: column; gap: 3px; }
.card-foot .price-amount { font: 400 22px/1 var(--font-display); color: var(--ocean); }
.card-foot .price-unit { font: 400 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }
.card-cta { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--channel-2); }

.pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.pager-btn {
  font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 13px 26px; border: 1px solid var(--cloud); background: #fff; color: var(--ocean);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--ocean); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-status { font: 500 13px/1 var(--font-body); letter-spacing: .08em; color: var(--slate-2); }

.empty-state { grid-column: 1 / -1; text-align: center; color: var(--slate-2); padding: 60px 0; font-size: 15px; }
.loader { grid-column: 1 / -1; text-align: center; color: var(--slate-2); padding: 60px 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Home: features ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(28px, 3vw, 44px); }
.feature { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--cloud); padding-top: 26px; }
.feature .icon { width: 26px; height: 26px; color: var(--channel-2); }
.feature h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.25; }
.feature p { font: 400 15px/1.6 var(--font-body); color: var(--slate-2); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ocean); }
.cta-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.cta-band-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 25, 44, .85), rgba(11, 25, 44, .95)); }
.cta-band .container { position: relative; padding-top: clamp(80px, 12vw, 170px); padding-bottom: clamp(80px, 12vw, 170px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(22px, 3vw, 34px); }
.cta-band h2 { max-width: 940px; font-size: clamp(32px, 6vw, 80px); line-height: 1.06; color: var(--shell); }
.cta-band p { max-width: 620px; font: 300 clamp(17px, 1.8vw, 22px)/1.6 var(--font-body); color: var(--cloud); }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.cta-soft { background: var(--wash); }
.cta-soft .container { max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.cta-soft h2 { font-size: clamp(28px, 4.4vw, 54px); }
.cta-soft p { max-width: 520px; font: 300 clamp(16px, 1.7vw, 20px)/1.6 var(--font-body); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--mist); }
.site-footer .container { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 34px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(34px, 4vw, 60px); padding-bottom: clamp(40px, 5vw, 64px); }
.footer-brand { display: flex; flex-direction: column; gap: 22px; }
.logo-plate { background: var(--shell); border-radius: 14px; padding: 12px 14px; align-self: flex-start; }
.logo-plate img { height: 66px; width: auto; }
.footer-brand p { max-width: 300px; font: 400 15px/1.65 var(--font-body); }
.footer-col { display: flex; flex-direction: column; gap: 18px; }
.footer-col h2 { font: 600 11px/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--shell); }
.footer-col ul { display: flex; flex-direction: column; gap: 18px; }
.footer-col a, .footer-col span { font: 400 15px/1.5 var(--font-body); color: var(--mist); }
.footer-col a:hover { color: var(--lagoon); }
.footer-col a.footer-cta { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--lagoon); margin-top: 4px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font: 400 13px/1.5 var(--font-body); }

/* ---------- Category: sticky filter bar ---------- */
.filter-bar { position: sticky; top: var(--nav-h); z-index: 60; background: var(--shell); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease; }
.filter-bar.is-scrolled { box-shadow: 0 10px 24px rgba(11, 25, 44, .07); }
.filter-bar .container { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 12px 20px; border: 1px solid var(--cloud); background: #fff; color: var(--ocean);
  transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--channel-2); color: var(--channel-2); }
.chip.is-on { background: var(--ocean); border-color: var(--ocean); color: var(--shell); }
.filter-count { font: 500 13px/1 var(--font-body); letter-spacing: .08em; color: var(--slate-2); }

/* ---------- Property detail ---------- */
.detail-layout { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.detail-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: clamp(34px, 4vw, 54px); }
.detail-block { display: flex; flex-direction: column; gap: 20px; }
.detail-block h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
.detail-block .prose { display: flex; flex-direction: column; gap: 16px; }
.detail-block .prose p { font: 300 clamp(16px, 1.6vw, 19px)/1.7 var(--font-body); color: var(--slate); }
.detail-block .eyebrow { letter-spacing: .28em; }
.detail-block .eyebrow::before { width: 28px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gallery button { border: none; padding: 0; background: var(--wash); cursor: pointer; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery button:hover img { transform: scale(1.07); }

.includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 34px; }
.includes li { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 16px; font: 400 15px/1.6 var(--font-body); color: var(--slate); }
.includes li::before { content: '\2726'; color: var(--channel-2); flex: 0 0 auto; }

.inquiry-card {
  flex: 0 1 380px; position: sticky; top: calc(var(--nav-h) + 24px);
  background: #fff; border-radius: 22px; box-shadow: var(--shadow-float);
  padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 20px;
  /* Taller than the screen: scroll the card itself while the pointer is over it. */
  max-height: calc(100vh - var(--nav-h) - 48px); max-height: calc(100dvh - var(--nav-h) - 48px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.inquiry-card > * { flex-shrink: 0; }
.inquiry-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.inquiry-card-head .price { display: flex; flex-direction: column; gap: 4px; }
.inquiry-card-head .price-amount { font: 400 clamp(28px, 2.8vw, 36px)/1 var(--font-display); color: var(--ocean); }
.inquiry-card-head .price-unit { font: 400 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.inquiry-card h3 { font-size: 20px; line-height: 1.3; }
.inquiry-regarding { font: 400 13px/1.5 var(--font-body); color: var(--slate-2); }
.inquiry-regarding strong { color: var(--ocean); font-weight: 600; }

/* Mobile: the card becomes a fixed bar + bottom sheet. */
.mobile-bar { display: none; }
.sheet { display: none; }
@media (max-width: 1023px) {
  .inquiry-card { display: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--ocean); border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 14px clamp(16px, 4vw, 24px); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .mobile-bar .price { display: flex; flex-direction: column; gap: 3px; }
  .mobile-bar .price-amount { font: 400 22px/1 var(--font-display); color: var(--shell); }
  .mobile-bar .price-unit { font: 400 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
  .mobile-bar .btn { padding: 18px 26px; font-size: 12px; }
  body.has-mobile-bar { padding-bottom: 84px; }

  .sheet { position: fixed; inset: 0; z-index: 96; background: rgba(11, 25, 44, .72); animation: fade .25s ease both; display: flex; align-items: flex-end; }
  .sheet[hidden] { display: none; }
  .sheet-panel { width: 100%; max-height: 92svh; overflow-y: auto; background: var(--shell); border-radius: 24px 24px 0 0; padding: 22px clamp(18px, 5vw, 28px) 32px; animation: sheetUp .38s cubic-bezier(.2, .85, .25, 1) both; }
  .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
  .sheet-head .name { font: 400 24px/1.2 var(--font-display); color: var(--ocean); display: block; }
  .sheet-head .sub { font: 400 13px/1.4 var(--font-body); color: var(--slate-2); display: block; margin-top: 5px; }
}
.icon-btn { flex: 0 0 auto; background: #fff; border: 1px solid var(--cloud); border-radius: var(--radius-sm); width: 46px; height: 46px; font: 300 24px/1 var(--font-body); color: var(--ocean); cursor: pointer; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 98; background: rgba(6, 15, 28, .96); animation: fade .22s ease both; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 5vw, 56px); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 82svh; object-fit: contain; border-radius: 10px; }
.lightbox-btn { position: absolute; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: var(--shell); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox-close { top: 20px; right: 22px; border-radius: var(--radius-sm); width: 48px; height: 48px; font: 300 26px/1 var(--font-body); }
.lightbox-nav { top: 50%; transform: translateY(-50%); border-radius: 999px; width: 52px; height: 52px; font: 400 22px/1 var(--font-body); }
.lightbox-prev { left: clamp(8px, 2vw, 24px); }
.lightbox-next { right: clamp(8px, 2vw, 24px); }
.lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font: 500 13px/1 var(--font-body); letter-spacing: .16em; color: var(--mist); }

/* ---------- Contact ---------- */
.contact-layout { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 70px); align-items: flex-start; }
.contact-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.contact-side h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
.contact-side .lead { font: 300 clamp(16px, 1.6vw, 19px)/1.7 var(--font-body); }
.contact-rows { display: flex; flex-direction: column; }
.contact-row { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid var(--cloud); padding: 24px 0; color: inherit; transition: padding-left .35s ease; }
.contact-row:last-child { border-bottom: 1px solid var(--cloud); }
a.contact-row:hover { padding-left: 8px; color: inherit; }
.contact-row .icon { width: 22px; height: 22px; color: var(--channel-2); flex: 0 0 auto; margin-top: 3px; }
.contact-row > span { display: flex; flex-direction: column; gap: 6px; }
.contact-row .k { font: 600 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--slate-2); }
.contact-row .v { font: 400 clamp(19px, 2vw, 24px)/1.3 var(--font-display); color: var(--ocean); }
.contact-row .n { font: 400 14px/1.5 var(--font-body); color: var(--slate-2); }
.photo-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 25, 44, .08), rgba(11, 25, 44, .85)); }
.photo-card p { position: absolute; left: clamp(20px, 3vw, 30px); right: clamp(20px, 3vw, 30px); bottom: clamp(20px, 3vw, 28px); z-index: 1; font: 400 clamp(15px, 1.6vw, 18px)/1.5 var(--font-body); color: var(--line); }
.form-card { flex: 1 1 400px; min-width: 0; background: #fff; border-radius: 22px; box-shadow: var(--shadow-float); padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 22px; }
.form-card-head { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.form-card-head h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.form-card-head p { font: 400 14px/1.55 var(--font-body); color: var(--slate-2); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ocean); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 15px/1.2 var(--font-body); color: var(--ocean);
  background: var(--shell); border: 1px solid var(--cloud); border-radius: 11px; padding: 14px 15px; outline: none;
  transition: border-color .2s, background .2s;
}
.field textarea { line-height: 1.5; resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--channel); background: #fff; box-shadow: 0 0 0 2px var(--channel); }
.field input:disabled { background: var(--wash); color: var(--slate-2); cursor: not-allowed; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-error { display: block; color: var(--danger); font-size: 12px; min-height: 15px; }
.form-note { text-align: center; font: 400 12px/1.5 var(--font-body); color: var(--slate-2); }
.form-note--left { text-align: left; }
.form-msg { display: none; border-radius: 11px; padding: 14px 16px; font: 500 14px/1.5 var(--font-body); }
.form-msg.is-shown { display: block; }
.form-success { background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .36); color: var(--ocean); }
.form-error { background: rgba(178, 52, 52, .08); border: 1px solid rgba(178, 52, 52, .25); color: var(--danger); }

/* ---------- Trip planner (/plan) ---------- */
.plan-layout { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.plan-aside { flex: 0 1 270px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: calc(var(--nav-h) + 28px); }
.plan-card { flex: 1 1 520px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.plan-steps { display: flex; flex-direction: column; }
.plan-steps li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font: 500 15px/1.3 var(--font-body); color: var(--slate-2); }
.plan-steps li:first-child { border-top: none; }
.plan-steps li span { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--cloud); display: inline-flex; align-items: center; justify-content: center; font: 400 15px/1 var(--font-display); color: var(--slate-2); transition: background .3s, border-color .3s, color .3s; }
.plan-steps li.is-on { color: var(--ocean); font-weight: 600; }
.plan-steps li.is-on span { background: var(--ocean); border-color: var(--ocean); color: var(--shell); }
.plan-steps li.is-done span { background: var(--lagoon); border-color: var(--lagoon); color: var(--ocean); }
.plan-note { font: 400 14px/1.6 var(--font-body); color: var(--slate-2); border-top: 1px solid var(--cloud); padding-top: 20px; }
@media (max-width: 900px) {
  .plan-aside { position: static; flex-basis: 100%; }
  .plan-steps { flex-direction: row; gap: 18px; overflow-x: auto; padding-bottom: 4px; }
  .plan-steps li { border-top: none; padding: 0; white-space: nowrap; font-size: 13px; }
  .plan-note { display: none; }
}
.plan-step { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.plan-step legend { font: 400 clamp(24px, 2.8vw, 32px)/1.2 var(--font-display); color: var(--ocean); padding: 0; margin-bottom: 6px; }
.plan-step legend:focus { outline: none; }
.plan-hint { font: 400 14px/1.55 var(--font-body); color: var(--slate-2); margin-top: -6px; }
.plan-subhead { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ocean); margin-top: 8px; }
.plan-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-choice { position: relative; }
.plan-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-choice span { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--font-body); color: var(--ocean); background: #fff; border: 1px solid var(--cloud); border-radius: 999px; padding: 11px 16px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.plan-choice span:hover { border-color: var(--channel-2); }
.plan-choice input:checked + span { background: var(--ocean); border-color: var(--ocean); color: var(--shell); }
.plan-choice input:checked + span::before { content: '\2713'; color: var(--lagoon); }
.plan-choice input:focus-visible + span { outline: 2px solid var(--channel); outline-offset: 2px; }
.plan-more summary { cursor: pointer; font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--channel-2); padding: 4px 0; }
.plan-more[open] summary { margin-bottom: 12px; }
.plan-toggle { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--wash); border-radius: 999px; }
.plan-toggle label { position: relative; }
.plan-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-toggle span { display: inline-block; font: 600 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 12px 16px; border-radius: 999px; color: var(--slate); cursor: pointer; }
.plan-toggle input:checked + span { background: #fff; color: var(--ocean); box-shadow: var(--shadow-card); }
.plan-toggle input:focus-visible + span { outline: 2px solid var(--channel); outline-offset: 2px; }
.plan-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.plan-nav .btn { padding: 17px 30px; }
.plan-progress { margin: 0 auto; font: 500 13px/1 var(--font-body); letter-spacing: .06em; color: var(--slate-2); }
.plan-review { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; background: var(--wash); border-radius: 14px; padding: 16px 18px; margin: 0; font-size: 14px; }
.plan-review:empty { display: none; }
.plan-review dt { font: 600 11px/1.9 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2); }
.plan-review dt.plan-review-title { grid-column: 1 / -1; color: var(--ocean); }
.plan-review dd { margin: 0; color: var(--ocean); overflow-wrap: anywhere; }
.plan-done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.plan-done:focus { outline: none; }
.plan-done h2 { font-size: clamp(26px, 3vw, 38px); }
.plan-done p { font: 400 16px/1.65 var(--font-body); max-width: 560px; }
.plan-done strong { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 600; color: var(--channel-2); }
.plan-done-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Quote and trip pages (/quote/<token>, /trip/<token>) ---------- */
.doc-page { background: var(--wash); padding: calc(var(--nav-h) + clamp(28px, 5vw, 56px)) 0 clamp(48px, 8vw, 96px); }
.doc { max-width: 880px; margin: 0 auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-float); padding: clamp(24px, 5vw, 56px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; border-bottom: 1px solid var(--line); padding-bottom: clamp(20px, 3vw, 32px); }
.doc-head h1 { font-size: clamp(30px, 4.4vw, 46px); margin-top: 12px; }
.doc-head p { margin: 10px 0 0; color: var(--slate); }
.doc-ref { font: 600 13px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--channel-2); letter-spacing: .02em; margin-left: 8px; }
.doc-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 13px; color: var(--slate-2); }
.doc-brand strong { font: 400 20px/1 var(--font-display); letter-spacing: .14em; color: var(--ocean); }
.doc-brand span:nth-child(2) { font: 600 11px/1 var(--font-body); letter-spacing: .4em; color: var(--channel-2); margin-bottom: 6px; }
.doc-banner { margin: 0; border-radius: var(--radius-sm); padding: 16px 20px; font-size: 15px; line-height: 1.55; background: var(--wash); color: var(--ocean); }
.doc-banner.is-ok { background: #e7f7ee; color: #14532d; }
.doc-banner.is-warn { background: #fff4e0; color: #7a4f00; }
.doc-banner a { font-weight: 700; color: inherit; }
.doc-intro { font-size: 16px; color: var(--ocean); max-width: 640px; }
.doc-section { display: flex; flex-direction: column; gap: 14px; }
.doc-section h2 { font-size: clamp(22px, 2.6vw, 28px); }
.doc-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.doc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.doc-line h3 { font-size: 20px; }
.doc-line p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--slate); }
.doc-line .doc-meta { color: var(--slate-2); }
.doc-line a { color: var(--channel-2); font-weight: 600; }
.doc-line-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-line-price strong { display: block; font: 600 17px/1.35 var(--font-body); color: var(--ocean); }
.doc-line-price small { display: block; font-size: 12px; line-height: 1.5; color: var(--slate-2); }
.doc-line.is-cancelled h3 { text-decoration: line-through; color: var(--slate-2); }
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.doc-tag { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; background: #e7f7ee; color: #14532d; }
.doc-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; margin: 0; font-variant-numeric: tabular-nums; }
.doc-total dt { color: var(--slate); }
.doc-total dd { margin: 0; text-align: right; color: var(--ocean); }
.doc-total .is-grand { font: 400 clamp(26px, 3vw, 34px)/1.1 var(--font-display); color: var(--ocean); padding-top: 14px; border-top: 2px solid var(--ocean); }
.doc-total .is-small { font-size: 13px; color: var(--slate-2); }
.doc-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 44px; }
.doc-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.75; color: var(--slate); }
.doc-prose { margin: 0; font-size: 14px; line-height: 1.7; color: var(--slate); white-space: pre-line; }
.doc-accept { background: var(--wash); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.doc-accept:focus { outline: none; }
.doc-accept h2 { font-size: clamp(24px, 2.8vw, 30px); }
.doc-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ocean); cursor: pointer; }
.doc-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--channel-2); flex: 0 0 auto; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.doc-link { background: none; border: none; padding: 0; font: 600 14px/1.4 var(--font-body); color: var(--channel-2); text-decoration: underline; cursor: pointer; }
.doc-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-size: 14px; }
.doc-files li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-files a { font-weight: 600; color: var(--channel-2); }
.doc-files span { color: var(--slate-2); font-variant-numeric: tabular-nums; }

/* Invoices, receipts and credit notes: an A4 sheet on screen and on paper. */
.paper { max-width: 794px; gap: 26px; }
.paper-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; border-bottom: 2px solid var(--ocean); padding-bottom: 20px; }
.paper-head .doc-brand { align-items: flex-start; text-align: left; }
.paper-title { text-align: right; }
.paper-title h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: .02em; }
.paper-number { margin: 6px 0 0; font: 600 15px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--channel-2); letter-spacing: .03em; }
.paper-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 32px; align-items: start; }
.paper-label { display: block; font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 8px; }
.paper-seller { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.paper-seller strong { font-size: 15px; color: var(--ocean); }
.paper-address { white-space: pre-line; }
.paper-facts { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.paper-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.paper-facts dt { color: var(--slate-2); }
.paper-facts dd { margin: 0; color: var(--ocean); font-weight: 600; font-variant-numeric: tabular-nums; }
.paper-state { font: 700 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 4px 8px; background: var(--wash); color: var(--ocean); }
.paper-state.is-paid, .paper-state.is-credited { background: #e7f7ee; color: #14532d; }
.paper-state.is-overdue { background: #fdecec; color: #8a1c1c; }
.paper-lines, .paper-totals { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.paper-lines th { font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--ocean); }
.paper-lines td { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ocean); vertical-align: top; line-height: 1.5; }
.paper-lines th:last-child, .paper-lines td:last-child { text-align: right; padding-left: 24px; white-space: nowrap; width: 1%; }
.paper-totals { max-width: 380px; margin-left: auto; }
.paper-totals th { font-weight: 400; text-align: left; color: var(--slate); padding: 5px 0; }
.paper-totals td { text-align: right; color: var(--ocean); padding: 5px 0 5px 24px; white-space: nowrap; }
.paper-totals .is-total th, .paper-totals .is-total td { font-weight: 700; color: var(--ocean); border-top: 2px solid var(--ocean); padding-top: 10px; }
.paper-totals .is-due th, .paper-totals .is-due td { font: 400 20px/1.3 var(--font-display); color: var(--ocean); border-top: 1px solid var(--line); padding-top: 10px; }
.paper-amount { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; background: var(--wash); border-radius: var(--radius-sm); }
.paper-amount strong { font: 400 clamp(28px, 4vw, 36px)/1.1 var(--font-display); color: var(--ocean); font-variant-numeric: tabular-nums; }
.paper-amount span:last-child:not(.paper-label) { font-size: 13px; color: var(--slate); }
.paper-small { margin: -12px 0 0; font-size: 12px; color: var(--slate-2); }
.paper-block h2 { font-size: 20px; }
.paper-bank { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; margin: 0; font-size: 14px; }
.paper-bank dt { color: var(--slate-2); }
.paper-bank dd { margin: 0; color: var(--ocean); font-weight: 600; font-variant-numeric: tabular-nums; }
.paper .doc-section h2 { font-size: 20px; }

@media (max-width: 560px) {
  .doc-line { grid-template-columns: minmax(0, 1fr); }
  .doc-line-price { text-align: left; }
  .doc-brand { align-items: flex-start; text-align: left; }
  .paper-title { text-align: left; }
}
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  .site-nav, .site-footer, .menu-overlay, .skip-link, .no-print { display: none !important; }
  .doc-page { background: #fff; padding: 0; }
  .doc { box-shadow: none; padding: 0; max-width: none; gap: 22px; }
  .doc-banner { border: 1px solid var(--line); }
  .paper { gap: 18px; font-size: 12px; }
  .paper-lines tr, .paper-totals tr, .paper-block { break-inside: avoid; }
  .paper-amount { border: 1px solid var(--line); }
}

/* ---------- Inquiry forms (roadmap S7) ---------- */
.form-msg a { font-weight: 700; color: inherit; text-decoration: underline; }
.form-msg:focus { outline: none; }
.inquiry-wa { gap: 8px; }
.mobile-wa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); color: var(--shell); font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.mobile-wa:hover { color: var(--lagoon); border-color: var(--lagoon); }
@media (max-width: 560px) {
  .form .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form .row:has(input[type="email"]), .form .row:has(input[type="tel"]), .form .row:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); }
  .field input, .field select, .field textarea { font-size: 16px; padding: 15px 16px; }
  .sheet-panel { padding-bottom: 44px; }
  .mobile-bar { gap: 10px; }
  .mobile-bar .btn { padding: 16px 20px; }
}

/* ---------- Category filters (roadmap S4) ---------- */
.filter-bar-side { display: flex; align-items: center; gap: 14px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: clamp(26px, 3.4vw, 40px); padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field label { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.filter-field select, .filter-field input { width: 100%; min-height: 44px; font: 400 14px/1.2 var(--font-body); color: var(--ocean); background: var(--shell); border: 1px solid var(--cloud); border-radius: 11px; padding: 10px 12px; }
.filter-field select:focus, .filter-field input:focus { border-color: var(--channel); background: #fff; }
.filter-reset { justify-self: start; min-height: 44px; background: none; border: 0; padding: 0; font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--channel-2); text-decoration: underline; cursor: pointer; }
.empty-state .filter-reset { min-height: 0; margin-left: 8px; }
.filter-toggle { display: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cloud); background: #fff; color: var(--ocean); font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filter-toggle[aria-expanded="true"] { background: var(--ocean); border-color: var(--ocean); color: var(--shell); }
@media (max-width: 700px) {
  .filter-toggle:not([hidden]) { display: inline-flex; align-items: center; }
  .filters:not(.is-open) { display: none; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
  .filter-bar .container { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  .filter-bar-side { justify-content: space-between; }
}

/* ---------- The fuller listing page (roadmap S5) ---------- */
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin: 8px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.detail-facts div { display: flex; flex-direction: column; gap: 6px; }
.detail-facts dt { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.detail-facts dd { margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--ocean); }
.option-list { display: flex; flex-direction: column; gap: 12px; }
.option-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.option-list li > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.option-list h3 { font-size: 20px; line-height: 1.3; }
.option-list p { font: 400 14px/1.6 var(--font-body); color: var(--slate); }
.option-list .option-meta { font-weight: 600; color: var(--slate-2); }
.package-picker { display: block; margin-bottom: 12px; }
.package-picker select { width: 100%; max-width: 420px; padding: 12px 14px; font: 400 15px/1.4 var(--font-body); color: var(--ink, inherit); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.option-list .pkg-points { display: block; list-style: disc; padding-left: 18px; margin: 0; font: 400 14px/1.7 var(--font-body); color: var(--slate); }
.option-list .pkg-points li { display: list-item; background: none; border: 0; border-radius: 0; padding: 0; }
.option-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; font-variant-numeric: tabular-nums; }
.option-price span { font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2); }
.option-price strong { font: 400 22px/1.1 var(--font-display); color: var(--ocean); }
.option-price small { max-width: 140px; font: 400 12px/1.35 var(--font-body); color: var(--slate-2); }
.itinerary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.itinerary li { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; padding: 0 0 22px 22px; }
.itinerary li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 999px; background: var(--lagoon); border: 2px solid var(--shell); }
.itinerary-day { font: 600 11px/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--channel-2); }
.itinerary h3 { font-size: 19px; line-height: 1.3; margin-bottom: 4px; }
.itinerary p { font: 400 15px/1.65 var(--font-body); color: var(--slate); }
.includes--not li::before { content: '\2715'; color: var(--slate-2); }
.policy { display: flex; flex-direction: column; gap: 12px; font: 400 15px/1.65 var(--font-body); color: var(--slate); }
.policy-list { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.policy-more { font-size: 14px; color: var(--slate-2); }
.policy-more a { font-weight: 600; }
.review-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font: 400 15px/1.4 var(--font-body); color: var(--slate); }
.review-summary strong { font: 400 30px/1 var(--font-display); color: var(--ocean); }
.stars { color: #b7791f; letter-spacing: .08em; font-size: 18px; }
.review-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.review-list li { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.review-list h3 { font-size: 19px; line-height: 1.3; }
.review-list p { font: 400 15px/1.65 var(--font-body); color: var(--slate); }
.review-list .review-by { font: 600 13px/1.4 var(--font-body); color: var(--slate-2); }
.review-reply { padding-left: 14px; border-left: 2px solid var(--lagoon); font-size: 14px; }
@media (max-width: 560px) {
  .option-list li { flex-direction: column; }
  .option-price { align-items: flex-start; text-align: left; }
  .itinerary li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Prices, deals and the currency choice ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.price-was { font: 400 13px/1.2 var(--font-body); color: var(--slate-2); text-decoration: line-through; }
.mobile-bar .price-was, .ways-foot .price-was { color: var(--mist); }
.card-deal { position: absolute; top: 16px; right: 16px; font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ocean); background: var(--lagoon); border-radius: 999px; padding: 9px 13px; }
.card-grid--listing .card-deal { top: 12px; right: 12px; padding: 7px 10px; }
.price-note { margin-top: -8px; font: 400 12px/1.55 var(--font-body); color: var(--slate-2); }
.deal-list { display: flex; flex-direction: column; gap: 12px; }
.deal-list li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.deal-list li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 400 14px/1.55 var(--font-body); color: var(--slate); }
.deal-list strong { font: 600 16px/1.4 var(--font-body); color: var(--ocean); }
.deal-badge { flex: 0 0 auto; font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ocean); background: var(--lagoon); border-radius: 999px; padding: 8px 12px; }
/* ---------- Dropdowns and calendars (pickers.css draws the panels) ---------- */
.field .pk-trigger { display: flex; width: 100%; min-height: 48px; font: 400 15px/1.2 var(--font-body); color: var(--ocean); background: var(--shell); border: 1px solid var(--cloud); border-radius: 11px; padding: 14px 15px; transition: border-color .2s, background .2s, box-shadow .2s; }
.field .pk-trigger:hover:not(:disabled) { border-color: var(--mist); }
.field .pk-trigger:focus-visible, .field .pk-trigger[aria-expanded="true"] { outline: none; border-color: var(--channel); background: #fff; box-shadow: 0 0 0 2px var(--channel); }
.field .pk-trigger:disabled { opacity: 1; background: var(--wash); color: var(--slate-2); }
.field.has-error .pk-trigger { border-color: var(--danger); }
.filter-field .pk-trigger { display: flex; width: 100%; min-height: 44px; font: 400 14px/1.2 var(--font-body); color: var(--ocean); background: var(--shell); border: 1px solid var(--cloud); border-radius: 11px; padding: 10px 12px; }
.filter-field .pk-trigger:focus-visible, .filter-field .pk-trigger[aria-expanded="true"] { outline: none; border-color: var(--channel); background: #fff; }
.filter-field .pk-wd { display: none; }
@media (max-width: 560px) {
  .field .pk-trigger { min-height: 50px; font-size: 16px; padding: 15px 16px; }
}
.currency-pick { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font: 500 13px/1 var(--font-body); color: var(--mist); }
.currency-pick[hidden] { display: none; }
.currency-pick .pk-trigger { gap: 9px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; color: var(--shell); font: 600 12px/1 var(--font-body); letter-spacing: .08em; padding: 9px 13px 9px 14px; transition: border-color .2s, background .2s; }
.currency-pick .pk-trigger:hover, .currency-pick .pk-trigger[aria-expanded="true"] { border-color: var(--lagoon); }
.currency-pick .pk-trigger[aria-expanded="true"] { background: rgba(56, 189, 248, .12); }
.currency-pick .pk-caret { width: 6px; height: 6px; color: var(--lagoon); opacity: 1; }

/* ---------- About, questions, booking terms and privacy ---------- */
.legal-page { background: var(--shell); }
.legal-head { padding: calc(var(--nav-h) + clamp(44px, 7vw, 90px)) 0 clamp(28px, 4vw, 48px); background: var(--wash); border-bottom: 1px solid var(--line); }
.legal-head .container { display: flex; flex-direction: column; gap: 16px; }
.legal-head .eyebrow { color: var(--channel-2); }
.legal-head h1 { max-width: 900px; font-size: clamp(38px, 6vw, 68px); line-height: 1.05; color: var(--ocean); text-wrap: balance; }
.legal-head p { max-width: 640px; margin: 0; font: 300 clamp(16px, 1.7vw, 19px)/1.6 var(--font-body); color: var(--slate); }
.legal-head .legal-updated { font: 500 13px/1.4 var(--font-body); color: var(--slate-2); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 720px); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(60px, 9vw, 120px); }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; font-size: 14px; }
.legal-toc span { font: 600 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 10px; }
.legal-toc a { color: var(--slate); text-decoration: none; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); }
.legal-toc a:hover { color: var(--channel-2); border-color: var(--channel-2); }
.prose { display: flex; flex-direction: column; gap: 16px; min-width: 0; font-size: 16px; line-height: 1.75; color: var(--slate); }
.prose h2 { margin-top: 26px; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: var(--ocean); scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 6px; font: 600 17px/1.4 var(--font-body); color: var(--ocean); }
.prose p, .prose ul, .prose ol, .prose dl { margin: 0; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose a { color: var(--channel-2); font-weight: 600; }
.prose strong { color: var(--ocean); }
.prose-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; color: var(--ocean); }
.prose-text { white-space: pre-line; }
.prose-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; font-size: 15px; }
.prose-details dt { color: var(--slate-2); }
.prose-details dd { margin: 0; color: var(--ocean); font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.prose ol.legal-steps { list-style: none; counter-reset: step; padding: 0; gap: 16px; }
.legal-steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.legal-steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--ocean); color: var(--shell); font: 400 18px/1 var(--font-display); }
.legal-steps strong { display: block; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 600 17px/1.45 var(--font-body); color: var(--ocean); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 auto; font: 400 26px/1 var(--font-display); color: var(--channel-2); transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--channel); outline-offset: 4px; border-radius: 4px; }
.faq-answer { padding: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.legal-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .legal-toc span { flex-basis: 100%; margin-bottom: 0; }
  .legal-toc a { border-left: 0; padding: 4px 0; }
}

/* A guest's review, on their trip page */
.review-rating { border: 0; padding: 0; margin: 0; min-width: 0; }
.review-rating legend { padding: 0; margin-bottom: 10px; font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ocean); }
.review-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.review-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.review-stars label { font-size: 34px; line-height: 1; color: var(--cloud); cursor: pointer; transition: color .15s; }
.review-stars input:checked ~ label, .review-stars label:hover, .review-stars label:hover ~ label { color: #b7791f; }
.review-stars input:focus-visible + label { outline: 2px solid var(--channel); outline-offset: 2px; border-radius: 4px; }

/* ---------- 404 ---------- */
.not-found { position: relative; overflow: hidden; min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; background: var(--ocean); }
.not-found-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; animation: drift 20s ease-in-out infinite alternate; }
.not-found-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 25, 44, .85), rgba(11, 25, 44, .96)); }
.not-found .container { position: relative; max-width: 900px; padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(60px, 10vw, 120px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 2.6vw, 30px); }
.not-found h1 { font-size: clamp(56px, 14vw, 150px); line-height: 1; letter-spacing: .02em; color: var(--shell); animation: rise 1s var(--ease) .2s both; }
.not-found p { max-width: 520px; font: 300 clamp(17px, 2vw, 22px)/1.6 var(--font-body); color: var(--cloud); animation: rise 1s var(--ease) .32s both; }
.not-found .eyebrow { animation: rise .8s ease .1s both; }
.not-found .cta-band-actions { animation: rise 1s var(--ease) .44s both; }
.board-plans { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.board-plan { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: #fff; }
.board-plan input { position: absolute; opacity: 0; pointer-events: none; }
.board-plan span { font: 600 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }
.board-plan strong { font: 400 20px/1.1 var(--font-display); color: var(--ocean); font-variant-numeric: tabular-nums; }
.board-plan:has(input:checked) { border-color: var(--ocean); box-shadow: 0 0 0 1px var(--ocean); }
.board-plan:has(input:focus-visible) { outline: 2px solid var(--ocean); outline-offset: 2px; }

/* ---------- About page ---------- */
.about-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-split img { width: 100%; border-radius: var(--radius); display: block; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-float); }
.step-num { display: block; margin-bottom: 10px; font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--channel-2); }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   LUXURY REFINEMENT (preview) - everything below overrides the rules above.
   To go back to the previous look, delete from this comment to the end of
   the file. Adds one warm accent (champagne), squarer corners, hairline
   borders, slimmer buttons and slower motion.
   ========================================================================== */
:root {
  --champagne: #c8b27d;     /* warm accent: rules, labels, prices, button outlines */
  --champagne-deep: #8a7340; /* champagne on light grounds (4.6:1 on white) */
  --radius: 4px;
  --radius-sm: 2px;
  --shadow-card: none;
  --shadow-lift: 0 30px 60px rgba(11, 25, 44, .14);
  --shadow-float: 0 1px 0 rgba(11, 25, 44, .06), 0 24px 48px rgba(11, 25, 44, .07);
}
body { line-height: 1.7; }
h1, h2, h3, h4 { letter-spacing: .02em; }
.section { padding: clamp(84px, 12vw, 168px) 0; }

/* Labels and rules in champagne */
.eyebrow { color: var(--champagne-deep); letter-spacing: .38em; font-weight: 500; }
.eyebrow--lagoon, .hero .eyebrow, .page-hero .eyebrow, .ways .eyebrow, .cta-band .eyebrow { color: var(--champagne); }
.card-kicker { color: var(--champagne-deep); letter-spacing: .24em; font-weight: 500; }
.card-cta, .link-more, .browse-list a { color: var(--ocean); }
.link-more, .browse-list a { border-bottom-color: var(--champagne); letter-spacing: .22em; }
.link-more:hover, .browse-list a:hover, .card-cta:hover { color: var(--champagne-deep); }
.link-more--light { color: var(--shell); border-bottom-color: var(--champagne); }
.link-more--light:hover { color: var(--champagne); }
.page-hero-meta .dot { background: var(--champagne); }

/* Buttons: slim, squared, wide-spaced; solid champagne for the main action */
.btn { border-radius: 2px; padding: 19px 40px; letter-spacing: .22em; font-weight: 500; font-size: 12px; transition: background .5s ease, color .5s ease, border-color .5s ease; }
.btn-lagoon { background: var(--champagne); color: var(--ocean); border-color: var(--champagne); }
.btn-lagoon:hover { background: transparent; color: var(--champagne); border-color: var(--champagne); }
.btn-ghost { border-color: rgba(255, 255, 255, .4); }
.btn-ghost:hover { background: transparent; border-color: var(--champagne); color: var(--champagne); }
.btn-ocean:hover { background: var(--champagne-deep); }
.btn-outline { border-color: var(--cloud); }
.btn-outline:hover { border-color: var(--champagne-deep); color: var(--champagne-deep); }
.nav-cta { border-radius: 2px; letter-spacing: .22em; }

/* Cards: hairline border and a calm lift instead of rounded, shadowed tiles */
.card { border: 1px solid var(--line); border-radius: 2px; box-shadow: none; transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--champagne); }
.card-media, .card-media img { border-radius: 0; }
.card-media img { transition: transform 1.4s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-badge { border-radius: 1px; letter-spacing: .2em; }
.card h3 { letter-spacing: .02em; font-weight: 400; }
.card-foot { border-top-color: var(--line); }
.card-foot .price-amount { color: var(--ocean); letter-spacing: .02em; }
.card-foot .price-unit { letter-spacing: .16em; }

/* Heroes: a slower settle and a deeper gradient behind the words */
.hero-media, .page-hero-media { animation-duration: 3.6s; }
.page-hero-shade { background: linear-gradient(170deg, rgba(11, 25, 44, .72), rgba(11, 25, 44, .4) 40%, rgba(7, 15, 28, .96)); }
.page-hero-copy h1, .hero h1 { letter-spacing: .03em; }

/* Forms, chips and panels: squarer to match */
input, select, textarea { border-radius: 2px; }
.chip { border-radius: 2px; }
.cta-band .btn-lagoon { border-radius: 2px; }
.site-footer a:hover { color: var(--champagne); }
.site-footer h2 { color: var(--champagne); letter-spacing: .3em; font-weight: 500; }

/* Slower, gentler reveal */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.page-hero-copy h1 { animation-duration: 1.5s; }
.page-hero-copy p { animation-duration: 1.5s; }

/* Homepage: tighter rhythm so featured stays sit near the top (after the global .section override above). */
.hero--compact .hero-copy h1 { font-size: clamp(36px, 5.4vw, 76px); }
.hero--compact .hero-copy { gap: clamp(14px, 1.8vw, 22px); }
#featured.section, #ways.section { padding: clamp(40px, 5vw, 72px) 0; }
.why-row.section { padding: 0 0 clamp(48px, 6vw, 80px); }
#featured .section-head, #ways .section-head { margin-bottom: clamp(20px, 3vw, 36px); }

/* Homepage hero: brighter, with an accent line and quick-browse chips. */
.hero--compact .hero-shade { background: linear-gradient(180deg, rgba(11, 25, 44, .35) 0%, rgba(11, 25, 44, .08) 40%, rgba(11, 25, 44, .72) 100%); }
.hero--compact .hero-media { filter: saturate(1.35) brightness(1.18) contrast(1.05); }
.hero--compact .hero-copy h1 em { font-style: normal; color: var(--lagoon); text-shadow: 0 0 40px rgba(56, 189, 248, .45); }
.hero--compact .hero-copy h1 { text-shadow: 0 2px 30px rgba(7, 15, 28, .35); }

/* Top menu category links: frosted pills. */
.nav-links a:not(.nav-cta) { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--shell); font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; transition: background .3s ease, color .3s ease, transform .3s var(--ease); }
.nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta).active { background: var(--shell); border-color: var(--shell); color: var(--ocean); transform: translateY(-1px); }
.nav-links { gap: clamp(8px, 1vw, 12px); }

/* Bottom banner: compact, so it doesn't dominate the end of the page. */
.cta-band .container { padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(44px, 6vw, 80px); gap: clamp(16px, 2vw, 24px); }
.cta-band h2 { font-size: clamp(26px, 3.6vw, 46px); }
.cta-band-shade { background: linear-gradient(180deg, rgba(11, 25, 44, .6), rgba(11, 25, 44, .8)); }
.cta-band .btn { padding: 16px 30px; }

/* Footer: compact and quiet. */
.site-footer .container { padding-top: clamp(36px, 4vw, 56px); padding-bottom: 22px; }
.footer-grid { gap: clamp(24px, 3vw, 44px); padding-bottom: clamp(26px, 3vw, 38px); }
.footer-brand { gap: 14px; }
.logo-plate { padding: 8px 10px; border-radius: 10px; }
.logo-plate img { height: 46px; }
.footer-brand p { font-size: 14px; line-height: 1.5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); color: var(--fog); transition: border-color .3s ease, color .3s ease, transform .3s var(--ease); }
.footer-social a:hover { border-color: var(--champagne); color: var(--champagne); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col { gap: 14px; }
.footer-col ul { gap: 10px; }
.footer-col a, .footer-col span { font-size: 14px; line-height: 1.4; }
.footer-bottom { padding-top: 18px; font-size: 12px; }

/* ==========================================================================
   Typography: one family (Outfit). Headings are light, uppercase, widely
   spaced; labels, buttons and navigation are small, uppercase, medium weight;
   body copy is sentence case at regular weight. Kept last so it wins over the
   per-component font shorthands above.
   ========================================================================== */
body { font-size: 17px; font-weight: 400; line-height: 1.6; }
input, select, textarea { font-family: inherit; }
p, li { font-weight: 400; }

h1, h2 { font-weight: 300; text-transform: uppercase; letter-spacing: .06em; line-height: 1.18; color: var(--heading); }
h3, h4 { font-weight: 400; letter-spacing: .01em; }
.hero-copy h1, .page-hero-copy h1, .cta-band h2, .not-found h1 { color: var(--shell); }
.hero .hero-copy h1, .page-hero-copy h1 { letter-spacing: .06em; }

/* Headline sizes pulled in to suit wide uppercase type. */
.hero--compact .hero-copy h1 { font-size: clamp(30px, 4.8vw, 66px); line-height: 1.12; }
.page-hero-copy h1 { font-size: clamp(28px, 4.4vw, 58px); line-height: 1.12; }
.section-head h2, .intro h2 { font-size: clamp(22px, 2.9vw, 38px); }
.cta-band h2 { font-size: clamp(22px, 3vw, 38px); line-height: 1.2; }
.cta-soft h2, .browse-links h2 { font-size: clamp(22px, 2.8vw, 34px); }
.detail-block h2, .contact-side h2, .plan-done h2, .prose h2, .doc-accept h2 { font-size: clamp(20px, 2.2vw, 28px); }
.form-card-head h2, .doc-section h2 { font-size: clamp(18px, 1.9vw, 22px); }
.legal-head h1 { font-size: clamp(26px, 4.2vw, 50px); color: var(--heading); }
.doc-head h1 { font-size: clamp(24px, 3.4vw, 36px); }
.not-found h1 { font-size: clamp(40px, 9vw, 104px); }
.paper-title h1 { font-size: clamp(22px, 3vw, 30px); letter-spacing: .06em; }
.hero--compact .hero-copy h1 em { text-transform: uppercase; }

/* Labels, buttons and navigation. */
.eyebrow, .btn, .nav-links a, .menu-wa, .card-kicker, .card-badge, .card-deal, .card-cta, .link-more,
.breadcrumb, .stat-label, .why-item h3, .footer-col h2, .hero-pause, .pager-btn, .chip, .field label,
.filter-field label, .contact-row .k, .paper-label, .price-unit, .brand-sub, .pager-status, .filter-count,
.hero-cue span:first-child, .lightbox-counter {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
}
.eyebrow { font-size: 12px; letter-spacing: .24em; }
.btn, .nav-cta { font-size: 13px; letter-spacing: .12em; font-weight: 500; }
.nav-links a:not(.nav-cta) { font-size: 12px; font-weight: 500; letter-spacing: .1em; }
.card-kicker, .card-badge, .card-deal, .stat-label, .price-unit, .paper-label, .field label, .filter-field label, .contact-row .k { font-size: 12px; }
.card-cta, .link-more, .pager-btn, .chip, .hero-pause, .breadcrumb, .why-item h3 { font-size: 12px; letter-spacing: .1em; }
.footer-col h2 { font-size: 12px; letter-spacing: .2em; font-weight: 500; color: var(--champagne); }
.brand-name { font-family: var(--font-display); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.menu-links a { font-weight: 300; font-size: clamp(22px, 6vw, 30px); text-transform: uppercase; letter-spacing: .08em; }

/* Body copy: sentence case, regular weight, soft grey-blue. */
.hero-copy p, .page-hero-copy p, .cta-band p, .cta-soft p, .intro .lead, .contact-side .lead, .detail-block .prose p,
.card-desc, .feature p, .includes li, .footer-brand p, .footer-col a, .footer-col span, .footer-bottom {
  font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.6;
}
.card-desc, .feature p, .includes li { font-size: 16px; }
.way-tile-title, .card h3 { text-transform: none; }
.way-tile-title { font-weight: 400; letter-spacing: .04em; }
.price-amount, .stat-value, .contact-row .v { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }

/* Page banners: compact, so content starts higher on the screen. */
.page-hero { height: clamp(240px, 34vh, 340px); }
.page-hero--short { height: clamp(220px, 30vh, 300px); }
.page-hero-body .container { padding-bottom: clamp(26px, 4vh, 44px); }
.page-hero-copy { gap: clamp(10px, 1.4vw, 16px); }
.page-hero-copy h1 { font-size: clamp(26px, 3.6vw, 46px); }
.page-hero--tall { height: clamp(420px, 66vh, 660px); }

/* Phones: smaller floating buttons, a stepper that fits, and a shorter footer. */
@media (max-width: 700px) {
  .chat-fab { gap: 10px; right: 12px; bottom: 12px; }
  .chat-fab-btn { width: 46px; height: 46px; }
  .chat-fab-btn svg { width: 24px; height: 24px; }
  .plan-steps { overflow: visible; gap: 10px; }
  .plan-steps li { gap: 8px; }
  .plan-steps li:not(.is-on) { font-size: 0; }
  .plan-steps li:not(.is-on) span { font-size: 15px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
}

/* Header wordmark: larger. */
.brand-name { font-size: clamp(26px, 2.8vw, 34px); }
.brand-sub { font-size: 13px; letter-spacing: .34em; }

/* Homepage hero: headline and buttons centred on the screen. */
.hero--compact .hero-body { align-items: center; justify-content: center; }
.hero--compact .hero-body .container { padding-bottom: 0; }
.hero--compact .hero-copy { max-width: none; align-items: center; text-align: center; gap: clamp(20px, 3vw, 36px); }
.hero--compact .hero-actions { justify-content: center; }
.hero--compact .btn-ghost { background: rgba(11, 25, 44, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .55); }
.hero--compact .btn-ghost:hover { background: var(--shell); border-color: var(--shell); color: var(--ocean); }

/* Phone menu: lighter and more compact. Links sit at the top, small and widely
   spaced; the footer actions are smaller and pinned to the bottom. */
.menu-overlay { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.menu-links { justify-content: flex-start; gap: 0; padding-top: clamp(24px, 6vh, 52px); }
.menu-links a { font: 400 15px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; padding: 19px 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: space-between; }
.menu-links a::after { content: ''; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .35; transition: opacity .3s ease, transform .3s var(--ease); }
.menu-links a:hover::after, .menu-links a.active::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.menu-foot { gap: 12px; padding-top: 18px; }
.menu-foot .btn { padding: 15px; font-size: 12px; }
.menu-foot .menu-wa { font-size: 12px; letter-spacing: .14em; }
.menu-foot .currency-pick { justify-content: center; }
.menu-links { overflow-x: hidden; }
.menu-links a { padding-right: 8px; }
.menu-links a:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* Phone menu as a compact panel over a dimmed page, not a full-screen takeover. */
.menu-overlay {
  inset: 10px 10px auto 10px; height: auto; max-height: calc(100svh - 20px); overflow-y: auto;
  padding: 18px 20px 20px; border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(5, 12, 24, .55), 0 24px 60px rgba(0, 0, 0, .4);
}
.menu-close { width: 42px; height: 42px; font-size: 22px; }
.menu-links { flex: none; padding-top: 10px; }
.menu-links a { padding: 16px 2px 16px 0; }
.menu-foot { padding-top: 22px; }

/* Homepage hero buttons: identical size. */
.hero--compact .hero-actions .btn { flex: 0 0 auto; width: 230px; max-width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }

/* Phones: featured cards swipe sideways instead of stacking down the page. */
@media (max-width: 700px) {
  #featuredGrid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px 0; scrollbar-width: none; }
  #featuredGrid::-webkit-scrollbar { display: none; }
  #featuredGrid .card { flex: 0 0 80%; scroll-snap-align: start; }
  #featuredGrid .loader, #featuredGrid .empty-state { flex: 1 0 100%; }
}

/* Phone menu panel: finer, smaller type. */
.menu-overlay { padding: 14px 18px 16px; }
.menu-overlay .brand-name { font-size: 20px; }
.menu-overlay .brand-sub { font-size: 10px; }
.menu-close { width: 34px; height: 34px; font-size: 18px; }
.menu-links { padding-top: 6px; }
.menu-links a { font-size: 12px; letter-spacing: .16em; padding: 13px 2px 13px 0; }
.menu-links a::after { width: 5px; height: 5px; }
.menu-foot { gap: 10px; padding-top: 16px; }
.menu-foot .btn { padding: 12px; font-size: 11px; letter-spacing: .14em; }
.menu-foot .menu-wa { font-size: 10px; letter-spacing: .12em; }
.menu-foot .currency-pick { font-size: 11px; }
.menu-foot .currency-pick select { font-size: 11px; }