/* Mauritius Itinéris - shared stylesheet, every page.
   Cormorant Garamond + Inter on sand and white, from the demo the client approved.
   Colours come from the logo (15 Sept 2026: "should match the colour we have in
   the logo"): navy for dark surfaces, royal blue for every button, lagoon cyan
   for accents on dark. No gold left. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* handwritten signature under the three steps, latin subset of Allura (OFL) */
@font-face {
  font-family: "Allura";
  src: url("/fonts/allura.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0F2233;
  --ink-soft: #46586A;
  --ink-faint: #677888;
  --navy: #0A2F5A;
  --navy-2: #06223F;
  --ocean: #0A62A8;
  --ocean-dk: #084F8A;
  --ocean-tint: #EDF5FB;
  --lagoon: #1AA3D6;
  --lagoon-lt: #8FD9F3;
  --sand: #F6F1E7;
  --sand-2: #EDE5D5;
  --paper: #FFFFFF;
  --line: #E2DBCD;
  --line-control: #8A8072;  /* borders that ARE the control: needs 3:1, --line is 1.38:1 */
  --line-soft: #EEE9DF;
  --line-dark: rgba(255, 255, 255, 0.14);
  --shadow: 0 12px 34px rgba(10, 47, 90, 0.08);
  --shadow-lg: 0 30px 70px rgba(6, 34, 63, 0.2);
  --radius: 10px;
  --radius-lg: 16px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --script: "Allura", "Segoe Script", cursive;
  --nav-h: 84px;
  --gutter: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 60;
  --z-bar: 50;
  --cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2346586A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2346586A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23465868' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  /* faint contour lines on the navy panels */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M300-20c50 80 30 160 90 220s140 50 200 140'/%3E%3Cpath d='M345-20c45 70 25 140 80 195s135 45 185 125'/%3E%3Cpath d='M390-20c40 60 20 120 70 170s130 40 170 110'/%3E%3Cpath d='M435-20c30 50 15 100 60 145s120 35 150 95'/%3E%3Cpath d='M480-20c25 40 10 80 50 118s100 30 120 80'/%3E%3Cpath d='M170 640c25-70 90-105 160-115s130-60 175-125'/%3E%3Cpath d='M215 640c20-60 80-90 140-100s120-50 160-110'/%3E%3Cpath d='M260 640c18-50 70-78 125-86s105-44 140-95'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.45em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
h3, .h3 { font-size: 1.6rem; }
h1 em, h2 em { font-style: italic; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
}
.skip:focus { top: 12px; }
.ico { flex: none; }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--first { padding-top: clamp(44px, 5vw, 72px); }
.section--tint { background: var(--sand); }
/* two white sections in a row: one gap between them, not two */
.section:not(.section--tint) + .section:not(.section--tint) { padding-top: 0; }

.head { max-width: 720px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.head p { color: var(--ink-soft); margin: 0; }
.head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: none;
  text-align: left;
}
.head--row > div { max-width: 640px; }
.head--row h2 { margin-bottom: 12px; }
.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--lagoon-lt); }
.eyebrow--line { display: flex; align-items: center; gap: 16px; }
.eyebrow--line::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.8; }
.lead { font-size: 1.08rem; color: var(--ink-soft); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ocean);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--ocean); }
.link-arrow .arw, .btn .arw { transition: transform 0.25s var(--ease); }
.link-arrow:hover .arw, .btn:hover .arw { transform: translateX(4px); }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 0.86rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--ocean); color: #fff; box-shadow: 0 8px 20px rgba(10, 98, 168, 0.22); }
.btn--primary:hover { background: var(--ocean-dk); box-shadow: 0 12px 28px rgba(10, 98, 168, 0.32); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ocean); background: var(--ocean-tint); }
/* label centred on the full width, arrow pinned to the right edge */
.btn--split { position: relative; padding-inline: 52px; }
.btn--split .arw { position: absolute; right: 20px; top: 50%; margin-top: -8px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(10, 47, 90, 0.08); }
.nav__in { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__logo { position: relative; display: block; flex: none; }
.nav__logo img { display: block; height: 62px; width: auto; transition: opacity 0.3s var(--ease); }
.nav__logo-light { position: absolute; left: 0; top: 0; opacity: 0; }
.nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--ocean); }
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__cta-short { display: none; }
.lang {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  position: relative;
  padding: 8px 4px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s var(--ease);
}
/* Two letters make a thin target (24 x 37). Rather than widen the switch,
   which overflows the French nav on a 360px phone, lay a 44px-tall target
   over it reaching 8px into the gap on either side: that space belongs to no
   other control, and the overlay costs the bar no width. */
.lang::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 16px); height: 44px; }
.lang:hover { color: var(--ink); border-bottom-color: var(--ocean); }
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent !important; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.nav__drawer-foot, .nav__scrim { display: none; }

/* over a photo: transparent until the page scrolls or the menu opens */
.nav--over { position: fixed; left: 0; right: 0; }
.nav--over::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px;
  background: linear-gradient(180deg, rgba(4, 22, 44, 0.55) 0%, rgba(4, 22, 44, 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.nav--over:not(.is-scrolled):not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav--over.is-scrolled::before, .nav--over.is-open::before { opacity: 0; }
.nav--over:not(.is-scrolled):not(.is-open) .nav__logo-dark { opacity: 0; }
.nav--over:not(.is-scrolled):not(.is-open) .nav__logo-light { opacity: 1; }
.nav--over:not(.is-scrolled):not(.is-open) .lang { color: rgba(255, 255, 255, 0.9); }
.nav--over:not(.is-scrolled):not(.is-open) .lang:hover { color: #fff; border-bottom-color: var(--lagoon-lt); }
.nav--over:not(.is-scrolled):not(.is-open) .nav__toggle { border-color: rgba(255, 255, 255, 0.5); }
.nav--over:not(.is-scrolled):not(.is-open) .nav__toggle span,
.nav--over:not(.is-scrolled):not(.is-open) .nav__toggle span::before,
.nav--over:not(.is-scrolled):not(.is-open) .nav__toggle span::after { background: #fff; }
@media (min-width: 1001px) {
  .nav--over:not(.is-scrolled):not(.is-open) .nav__links a { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 12px rgba(0, 20, 40, 0.35); }
  .nav--over:not(.is-scrolled):not(.is-open) .nav__links a:hover { color: #fff; border-bottom-color: var(--lagoon-lt); }
}

/* ---------- hero ---------- */

.hero { position: relative; isolation: isolate; color: #fff; background: var(--navy-2); }
.hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; animation: settle 2.4s var(--ease) both; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 24, 48, 0.82) 0%, rgba(4, 24, 48, 0.55) 34%, rgba(4, 24, 48, 0.12) 62%, rgba(4, 24, 48, 0.08) 100%),
    linear-gradient(0deg, rgba(4, 24, 48, 0.78) 0%, rgba(4, 24, 48, 0.2) 32%, rgba(4, 24, 48, 0) 50%);
}
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__in { padding-block: calc(var(--nav-h) + clamp(44px, 6.5vw, 96px)) clamp(28px, 3.5vw, 44px); }
.hero__copy { max-width: 680px; margin-bottom: clamp(30px, 4vw, 48px); }
.hero h1 { color: #fff; font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 1; margin-bottom: 20px; text-shadow: 0 2px 34px rgba(0, 18, 40, 0.3); }
.hero h1 em { display: block; color: var(--lagoon-lt); }
.hero__lead { font-size: clamp(1.05rem, 1.45vw, 1.2rem); max-width: 48ch; color: rgba(255, 255, 255, 0.92); margin: 0; text-shadow: 0 1px 16px rgba(0, 18, 40, 0.35); }
.hero__copy > * { animation: rise 0.9s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.hero .plan { animation: rise 0.9s 0.24s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- planner (hero booking panel) ---------- */

.plan {
  position: relative;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(2, 16, 34, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 26px 28px 18px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plan { background: rgba(255, 255, 255, 0.96); }
}
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.plan__intro { flex: 1 1 480px; }
.plan__h { font-size: clamp(1.8rem, 2.5vw, 2.35rem); margin: 0 0 4px; color: var(--ink); }
.plan__sub { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.plan__tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.plan__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan__tab:hover { color: var(--ink); background: rgba(10, 47, 90, 0.05); }
.plan__tab svg { color: var(--ocean); }
.plan__tab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(10, 47, 90, 0.28); }
.plan__tab[aria-selected="true"] svg { color: var(--lagoon-lt); }
.plan__tab-short { display: none; }
.no-js .plan__tabs { display: none; }
.no-js .plan__panel + .plan__panel { margin-top: 12px; }
/* the markup hides panels 2 and 3 so the page does not jump while site.js
   loads; without the script there are no tabs, so show all three again. */
.no-js .plan__panel[hidden] { display: block !important; }  /* beats the UA sheet rule for [hidden] */

.plan__grid { display: grid; gap: 12px; }
.plan__grid > * { min-width: 0; }
.plan__grid--tours { grid-template-columns: 1.25fr 1.05fr 0.75fr 1.1fr auto; }
.plan__grid--transfer { grid-template-columns: 1fr 1fr 1.02fr 0.82fr 0.72fr auto; }
.plan__grid--car { grid-template-columns: 1fr 1fr 1.5fr auto; }
.plan__grid .btn { min-height: 62px; padding-inline: 46px; white-space: nowrap; }
.plan__grid .btn .arw { right: 18px; }
.plan__note { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 0.8rem; color: var(--ink-faint); line-height: 1.4; }
.plan__note::before, .plan__note::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.plan__note svg { color: var(--ink-soft); }

/* planner field: icon and label inside the box, the control fills the whole box */
.pf {
  position: relative;
  height: 62px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pf:hover { border-color: #CDC4B2; }
.pf:focus-within { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(10, 98, 168, 0.16); }
.pf.is-missing { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14); }
.pf__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ocean); pointer-events: none; z-index: 1; }
.pf__label {
  position: absolute;
  left: 46px;
  right: 10px;
  top: 10px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 1;
}
.pf input, .pf select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  border-radius: inherit;
  padding: 26px 12px 8px 46px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.pf select { padding-right: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 13px center; text-overflow: ellipsis; cursor: pointer; }
.pf input::placeholder { color: #6B7885; opacity: 1; }
.pf input[type="date"], .pf input[type="time"] { cursor: pointer; }
.pf input::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* trust line under the planner */
.hero__trust { display: flex; justify-content: flex-end; margin-top: 26px; }
.hero__trust li { display: flex; align-items: center; gap: 14px; padding: 4px 28px; font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.hero__trust li + li { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.hero__trust li:last-child { padding-right: 0; }
.hero__trust b { display: block; color: #fff; font-weight: 500; font-size: 0.94rem; }
.hero__trust svg { color: var(--lagoon-lt); }

/* ---------- tour cards ---------- */

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.tcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-2); }
.tcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.tcard:hover .tcard__media img { transform: scale(1.05); }
.tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
}
.tcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.tcard h3 { font-size: 1.75rem; margin-bottom: 6px; }
.tcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tcard__tag { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; margin-bottom: 18px; }
.tcard__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 18px; }
.tcard__meta span { display: inline-flex; align-items: center; gap: 7px; }
.tcard__meta svg { color: var(--ocean); }
.tcard__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.price { line-height: 1.2; }
.price small { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.price b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; font-variant-numeric: lining-nums; color: var(--ink); white-space: nowrap; }
.price span { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--ink-faint); }
.tcard__go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ocean); }
.tcard__go .arw { transition: transform 0.25s var(--ease); }
.tcard:hover .tcard__go .arw { transform: translateX(4px); }

/* wide card: a full row, photo beside the text */
.tcard--wide { grid-column: 1 / -1; flex-direction: row; }
.tcard--wide .tcard__media { aspect-ratio: auto; flex: 1.3; min-height: 360px; }
.tcard--wide .tcard__body { flex: 1; padding: 36px 40px 32px; justify-content: center; }
.tcard--wide h3 { font-size: 2.3rem; }
.tcard__intro { display: none; }
.tcard--wide .tcard__intro { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 18px; }
.tcard--wide .tcard__tag { color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.tcard--wide .tcard__foot { margin-top: 10px; }

/* ---------- how it works ---------- */

.how__grid { display: grid; grid-template-columns: 1.25fr 0.62fr 1.05fr; gap: 10px; align-items: stretch; }
.how__copy {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--topo) no-repeat right -140px top -60px, var(--navy);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 20px 8px 8px 20px;
  padding: clamp(40px, 4.5vw, 60px) clamp(28px, 3.2vw, 44px) 34px;
}
.how__copy h2 { color: #fff; font-size: clamp(2.2rem, 3.4vw, 3rem); max-width: 13ch; }
.how__copy > p { max-width: 42ch; }
.how__copy .btn { align-self: flex-start; margin-top: 10px; }
.how__stamp { position: absolute; top: 28px; right: 26px; color: rgba(255, 255, 255, 0.5); }
.how__minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: 40px; }
.how__minis li { display: flex; flex-direction: column; gap: 10px; padding: 2px 16px; font-size: 0.78rem; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
.how__minis li:first-child { padding-left: 0; }
.how__minis li + li { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.how__minis b { display: block; color: #fff; font-weight: 500; font-size: 0.8rem; margin-bottom: 1px; }
.how__minis svg { color: var(--lagoon-lt); }
.how__media { position: relative; min-height: 540px; overflow: hidden; border-radius: 8px; background: var(--sand-2); }
.how__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how__steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--sand);
  border-radius: 8px 20px 20px 8px;
  padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.6vw, 36px) 26px;
}
.how__steps li { display: grid; grid-template-columns: 56px 30px 1fr; gap: 0 16px; align-items: start; padding: 22px 0; }
.how__steps li:first-child { padding-top: 0; }
.how__steps li + li { border-top: 1px solid var(--line); }
.how__n {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sand-2);
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--navy);
}
.how__ico { color: var(--ocean); padding-top: 14px; }
.how__ico svg { display: block; width: 28px; height: 28px; }
.how__steps h3 { font-size: 1.5rem; margin: 4px 0 4px; }
.how__steps p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.how__sign { margin: 18px 0 0; text-align: right; font-family: var(--script); font-size: 2.7rem; line-height: 1.1; color: var(--ocean); transform: rotate(-4deg); transform-origin: right center; }

/* ---------- review ---------- */

.review__in { max-width: 920px; text-align: center; }
.review .eyebrow { margin-bottom: 8px; }
.review__fig { margin: 0; }
.review__mark { display: block; height: 58px; font-family: var(--serif); font-size: 8rem; line-height: 0.85; color: var(--ocean); opacity: 0.3; }
.review__quote { margin: 0; }
.review__quote p { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.2; color: var(--ink); margin: 0 0 24px; text-wrap: balance; }
.review__by { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.review__line { width: 32px; height: 1px; background: var(--ocean); }
.review__note { color: var(--ink-soft); font-weight: 400; }
.review__more { max-width: 720px; margin: 26px auto 0; text-align: left; }
.review__more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ocean);
  padding: 8px;
}
.review__more summary::-webkit-details-marker { display: none; }
.review__more summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.review__more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.review__full { margin-top: 14px; padding: 28px 32px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.review__full p { color: var(--ink-soft); }
.review__full p:last-child { margin-bottom: 0; }

/* ---------- 3-day discovery pack ---------- */

.pack { display: grid; grid-template-columns: 0.86fr 1.14fr; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.pack > * { min-width: 0; }
.pack__copy {
  background: var(--topo) no-repeat right -220px bottom -260px, var(--navy);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(40px, 4.5vw, 60px) clamp(28px, 4vw, 52px);
}
.pack__copy h2 { color: #fff; margin-top: 16px; }
.pack__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(143, 217, 243, 0.4);
  border-radius: 999px;
  background: rgba(143, 217, 243, 0.12);
  color: var(--lagoon-lt);
  font-size: 0.78rem;
  font-weight: 600;
}
.pack__price { margin: 26px 0 0; padding: 20px 0; border-block: 1px solid var(--line-dark); line-height: 1.2; }
.pack__price small { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lagoon-lt); }
.pack__price b { display: block; margin: 6px 0 4px; font-family: var(--serif); font-size: clamp(2.4rem, 3.6vw, 3rem); font-weight: 500; font-variant-numeric: lining-nums; color: #fff; white-space: nowrap; }
.pack__price span { font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); }
.pack__lists { display: grid; gap: 22px; margin-top: 24px; }
.pack__h, .pack__label {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pack__h { color: var(--lagoon-lt); }
.pack__lists li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; line-height: 1.45; color: #fff; }
.pack__lists li + li { margin-top: 8px; }
.pack__lists svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--lagoon-lt); }
.pack__out li { color: rgba(255, 255, 255, 0.72); }
.pack__out svg { color: rgba(255, 255, 255, 0.45); }
.pack__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.6vw, 44px); }
.pack__label { color: var(--ink-soft); }
.pdays { display: grid; gap: 10px; margin: 0 0 22px; }
.pday { display: flex; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pday__img { flex: none; width: 104px; height: 88px; border-radius: 8px; overflow: hidden; background: var(--sand-2); }
.pday__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pday__txt { min-width: 0; }
.pday__txt small { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ocean); }
.pday__txt h3 { margin: 3px 0 4px; font-size: 1.4rem; }
.pday__txt p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- getting around: transfers + car ---------- */

.move { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.mcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.mcard__top { position: relative; height: 200px; }
.mcard__top--route { display: grid; place-items: center; background: var(--topo) no-repeat right -260px top -200px, var(--navy); }
.xroute { display: flex; align-items: center; gap: 14px; width: min(340px, 80%); }
.xroute span { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: var(--lagoon-lt); }
.xroute i { flex: 1; border-top: 2px dashed rgba(143, 217, 243, 0.5); }
.mcard__top--car { display: flex; align-items: flex-end; justify-content: center; padding: 16px 32px 0; background: radial-gradient(120% 95% at 50% 70%, #fff 0%, var(--sand) 60%, var(--sand-2) 100%); }
.mcard__top--car img { display: block; width: auto; height: 100%; max-height: 184px; mix-blend-mode: multiply; }
.mcard__body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 26px; }
.mcard h3 { font-size: 2.1rem; margin-bottom: 8px; }
.mcard__lead { color: var(--ink-soft); margin-bottom: 14px; }
.mcard .btn--block { margin-top: auto; }
/* car rental on its own (TRANSFERS off): the photo moves beside the form */
.move--one { grid-template-columns: 1fr; }
.move--one .mcard { display: grid; grid-template-columns: 1.04fr 1fr; }
.move--one .mcard > * { min-width: 0; }
.move--one .mcard__top { height: auto; }
.move--one .mcard__top--car { align-items: center; padding: 30px 44px; }
.move--one .mcard__top--car img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.move--one .mcard__body { justify-content: center; padding: clamp(30px, 3.4vw, 46px); }
.move--one .mcard h3 { font-size: clamp(2.1rem, 3vw, 2.6rem); }
.move--one .mcard__lead { max-width: 46ch; }

.ticks { margin: 0 0 22px; }
.ticks li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--ink); }
.ticks li + li { margin-top: 6px; }
.ticks svg { flex: none; color: var(--ocean); }
.specs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; }
.specs li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; font-size: 0.92rem; }
.specs svg { color: var(--ocean); }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-width: 0; }
.field label, .choices legend {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ctl { position: relative; }
.ctl__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.field input, .field select {
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ctl--ico input, .ctl--ico select { padding-left: 44px; }
.field input::placeholder { color: #6B7885; opacity: 1; }
/* Date and time fields. Chrome opens the picker only from its little icon, which
   is a small target and does not match the other fields, so the indicator is
   stretched over the whole control and our own icon is drawn on the right. The
   icon is only added where that pseudo-element exists, otherwise Firefox would
   show two. The value stays grey until one is chosen (site.js sets is-filled). */
.field input[type="date"], .field input[type="time"] { position: relative; cursor: pointer; }
.field input::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
input[type="date"]:not(.is-filled), input[type="time"]:not(.is-filled) { color: #8B98A5; }
@supports selector(::-webkit-calendar-picker-indicator) {
  /* the planner fields already carry an icon on the left, so only the form
     fields get one here, where the native indicator used to be */
  .field input[type="date"], .field input[type="time"] {
    padding-right: 44px;
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-image: var(--cal);
  }
  .field input[type="time"] { background-image: var(--clock); }
}

.field input:hover, .field select:hover { border-color: #CDC4B2; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(10, 98, 168, 0.4); }
.field select { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; text-overflow: ellipsis; cursor: pointer; }
.bk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk__row--3 { grid-template-columns: 1fr 1fr 0.8fr; }
.bk__row > * { min-width: 0; }
.bk__fine { display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 0.84rem; line-height: 1.5; text-align: center; color: var(--ink-faint); }
.bk__fine svg { margin-top: 3px; color: var(--ink-soft); }

/* tour page request form */
.bk { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 26px 64px rgba(10, 47, 90, 0.13); overflow: hidden; }
.bk__top { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, 0.78); padding: 26px 28px 24px; border-top: 4px solid var(--lagoon); }
.bk__top .bk__h { position: relative; z-index: 1; color: #fff; font-size: 2.15rem; margin: 0 0 6px; }
.bk__top p { position: relative; z-index: 1; margin: 0; font-size: 0.92rem; max-width: 30ch; }
.bk__art { position: absolute; right: 4px; bottom: 2px; color: rgba(255, 255, 255, 0.16); }
.bk__body { padding: 24px 28px 22px; }
.bk .btn--block { margin-top: 6px; }

.route { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 18px; background: var(--sand); border-radius: 14px; transition: background 0.25s var(--ease); }
.route__ico { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--sand-2); color: var(--ocean); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.route__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route__txt small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ocean); }
.route__txt b { font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.route__txt span { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.route.is-set { background: var(--ocean-tint); }
.route.is-set .route__ico { background: var(--ocean); color: #fff; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.choices legend { width: 100%; margin-bottom: 8px; padding: 0; }
.choice { position: relative; flex: 1 1 auto; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.94rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice:hover span { border-color: var(--ocean); }
.choice input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--lagoon); outline-offset: 2px; }

/* ---------- tour page ---------- */

.thead { position: relative; color: #fff; min-height: clamp(460px, 64vh, 620px); display: flex; align-items: flex-end; background: var(--navy-2); }
.thead__bg { position: absolute; inset: 0; overflow: hidden; }
.thead__bg img { width: 100%; height: 100%; object-fit: cover; animation: settle 2.4s var(--ease) both; }
.thead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 24, 48, 0.92) 0%, rgba(4, 24, 48, 0.45) 50%, rgba(4, 24, 48, 0.25) 100%),
              linear-gradient(90deg, rgba(4, 24, 48, 0.45) 0%, rgba(4, 24, 48, 0) 60%);
}
.thead__in { position: relative; z-index: 1; padding-block: calc(var(--nav-h) + 48px) 48px; }
.thead__in > * { animation: rise 0.9s var(--ease) both; }
.thead h1 { color: #fff; max-width: 18ch; margin-bottom: 12px; }
.thead__tag { font-size: 1.12rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 22px; max-width: 52ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 26px; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(4, 24, 48, 0.35);
  border: 1px solid rgba(143, 217, 243, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badges svg { color: var(--lagoon-lt); }

.tour { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(36px, 6vw, 80px); align-items: start; }
.tour__side { position: sticky; top: calc(var(--nav-h) + 24px); }
.tour__main > .lead { font-family: var(--serif); font-size: 1.55rem; line-height: 1.45; margin-bottom: 36px; color: var(--ink); }
.hint { color: var(--ink-soft); margin-bottom: 20px; }
.tour__main h2.h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 2.1rem; margin-bottom: 8px; }
.counter {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ocean);
  border-radius: 999px;
  padding: 4px 11px;
}
.counter:empty { display: none; }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 44px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--sand-2); }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery--2 figure { grid-column: span 3; }
.gallery--3 figure { grid-column: span 2; }
.gallery--1 figure { grid-column: span 6; aspect-ratio: 16 / 9; }
/* mosaic for four to six photos: the first one big, two beside it, the rest below
   (with four, the big one runs down beside all three) */
.gallery--bento figure { grid-column: span 2; }
.gallery--bento figure:first-child { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
.gallery--bento.gallery--4 figure:first-child { grid-row: span 3; }
.gallery--bento.gallery--5 figure:nth-child(n+4) { grid-column: span 3; aspect-ratio: 16 / 9; }

.stops { display: grid; gap: 0; border-top: 1px solid var(--line); }
.stop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 14px 16px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease), padding 0.25s var(--ease);
}
.stop:hover { background: var(--sand); padding-left: 14px; }
.stop input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.stop:has(input:focus-visible) { outline: 2px solid var(--lagoon); outline-offset: -2px; }
.stop__n { flex: none; width: 36px; font-family: var(--serif); font-size: 1.5rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ocean); }
.stop__txt { flex: 1; min-width: 0; }
.stop__txt b { display: block; font-weight: 600; color: var(--ink); font-size: 1.02rem; line-height: 1.35; }
.stop__txt span { display: block; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.stop__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line-control);
  background: #fff;
  color: transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.stop.is-on { background: var(--ocean-tint); padding-left: 14px; }
.stop.is-on .stop__tick { background: var(--ocean); border-color: var(--ocean); color: #fff; transform: scale(1.06); }
.stop.is-on .stop__n { color: var(--navy); }
.stop.is-off { opacity: 0.4; cursor: not-allowed; }

/* stop badges: Attraction (paid entry), Supplement (further away), Free */
.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;
}
.stop__txt .chip { display: inline-block; font-size: 0.68rem; line-height: 1.6; }
.chip--attraction { background: var(--ocean-tint); color: var(--ocean-dk); box-shadow: inset 0 0 0 1px rgba(10, 98, 168, 0.22); }
.chip--supplement { background: #FBF0DC; color: #7A4F0E; box-shadow: inset 0 0 0 1px rgba(122, 79, 14, 0.22); }
.chip--free { background: #E5F3EA; color: #1C6340; box-shadow: inset 0 0 0 1px rgba(28, 99, 64, 0.22); }
.stop__site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ocean);
  text-decoration: underline;
  text-decoration-color: rgba(10, 98, 168, 0.35);
  text-underline-offset: 3px;
}
.stop__site:hover { color: var(--ocean-dk); text-decoration-color: currentColor; }
.stop__site .ext { flex: none; }
.stop-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -6px 0 18px; font-size: 0.88rem; color: var(--ink-soft); }
.stop-key li { display: flex; align-items: center; gap: 8px; }
.stop-key .chip { margin-left: 0; vertical-align: 0; }

.hl { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hl li { display: flex; gap: 14px; align-items: center; font-size: 1.05rem; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.hl svg { flex: none; color: #fff; background: var(--ocean); border-radius: 6px; padding: 4px; width: 24px; height: 24px; }

.note { margin-top: 40px; background: var(--sand); border-left: 3px solid var(--lagoon); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; }
.note__h { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocean); margin-bottom: 10px; }
.note li { position: relative; padding-left: 18px; color: var(--ink-soft); }
.note li + li { margin-top: 4px; }
.note li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 5px; height: 5px; background: var(--ocean); transform: rotate(45deg); }
/* island tours: what's included / not included (client, 20 Sept 2026) */
.note__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 32px; }
.note--io li { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; line-height: 1.45; }
.note--io li::before { content: none; }
.note--io li + li { margin-top: 8px; }
.note--io svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--ocean); }
.note__out svg { color: var(--ink-faint); }
.note__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- island map on a tour page (client, 20 Sept 2026) ---------- */
.imap { position: relative; width: 100%; max-width: 520px; margin: 0 0 34px; }
.imap__isle, .imap__over { display: block; width: 100%; height: auto; }
.imap__isle { border-radius: var(--radius); border: 1px solid var(--line); }
/* the island is a photograph, so every pin and the route carry a soft dark
   shadow: that is what holds them off the reef and the cane fields */
.imap__pin, .imap__line { filter: drop-shadow(0 1px 3px rgba(4, 26, 48, 0.55)); }
.imap__over { position: absolute; inset: 0; overflow: visible; }
.imap__cap { margin-top: 10px; font-size: 0.86rem; color: var(--ink-faint); }
.imap__hit { fill: transparent; }
.imap__dot { fill: #fff; stroke: var(--navy); stroke-width: 2.5; transition: fill 160ms ease, stroke 160ms ease; }
.imap__pin { cursor: pointer; }
.imap__pin text {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  fill: var(--navy);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}
.imap__pin:hover .imap__dot { stroke: var(--ocean); }
.imap__pin.is-on .imap__dot { fill: var(--ocean); stroke: var(--ocean); animation: imap-pop 160ms ease-out; }
.imap__pin.is-on text { fill: #fff; }
.imap__pin.is-off { cursor: default; opacity: 0.4; }
@keyframes imap-pop { 0% { r: 17; } 55% { r: 19.5; } 100% { r: 17; } }
/* :focus, not :focus-visible: a <g tabindex="0"> keeps the browser's own ring
   after a tap, and a black box around the pin is not what a tap should leave.
   The keyboard indicator is the thicker lagoon ring on the dot below. */
.imap__pin:focus { outline: 2px solid var(--ocean); outline-offset: 2px; }
.imap__pin:focus:not(:focus-visible) { outline: none; }
.imap__pin:focus-visible .imap__dot { stroke: var(--lagoon); stroke-width: 4.5; }
.imap__line { fill: none; stroke: var(--lagoon); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) {
  .imap { max-width: 360px; margin-inline: auto; }
  /* the map narrows on a phone, so the numerals grow to stay near desktop size */
  .imap__pin text { font-size: 26px; }
}

/* ---------- all four road tours on one island, under the tour cards ----------
   The four hues are validated for colour blindness across every pair; which tour
   wears which is deliberate. See ROUTE_COLOURS in build.py before changing one. */
.omap { margin-top: 56px; }
.omap__route--blue  { --route: #0A62A8; }   /* South, the brand's own --ocean */
.omap__route--green { --route: #009E73; }   /* Tea Route */
.omap__route--flame { --route: #D55E00; }   /* North */
.omap__route--rose  { --route: #AD3F6E; }   /* Mahebourg */
.omap__key--blue  { --route: #0A62A8; }
.omap__key--green { --route: #009E73; }
.omap__key--flame { --route: #D55E00; }
.omap__key--rose  { --route: #AD3F6E; }

.omap__head { max-width: 52ch; margin: 0 auto 26px; text-align: center; }
.omap__head h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; margin: 0 0 8px; }
.omap__head p { margin: 0; color: var(--ink-soft); }
/* the figure is capped at 560px, so the two tracks are sized to their content
   and the pair is centred in the wrap, rather than hugging the left edge */
.omap__grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(190px, 240px); gap: 40px; align-items: start; justify-content: center; }
.omap__fig { position: relative; margin: 0; width: 100%; max-width: 560px; }
.omap__isle, .omap__over { display: block; width: 100%; height: auto; }
.omap__isle { border-radius: var(--radius); border: 1px solid var(--line); }
.omap__over { position: absolute; inset: 0; overflow: visible; }
.omap__cap { margin-top: 10px; font-size: 0.86rem; color: var(--ink-faint); text-align: center; }

/* a white casing under a coloured core: that is what keeps a green route legible
   over cane fields and any route legible over the reef */
.omap__route { cursor: pointer; transition: opacity 180ms ease; }
.omap__hit { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.omap__case { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.omap__line { fill: none; stroke: var(--route); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.omap__dots circle { fill: var(--route); stroke: #fff; stroke-width: 3; }
.omap__route { filter: drop-shadow(0 1px 2px rgba(4, 26, 48, 0.35)); }

/* hovering one route dims the rest, in CSS alone, so it holds up without JS.
   site.js mirrors the same effect onto the legend, which sits outside the svg. */
.omap__over:hover .omap__route { opacity: 0.2; }
.omap__over .omap__route:hover,
.omap__over .omap__route:focus-visible { opacity: 1; }
.omap.is-lit .omap__route { opacity: 0.2; }
.omap.is-lit .omap__route.is-on { opacity: 1; }
.omap__route:focus { outline: 2px solid var(--ocean); outline-offset: 2px; }
.omap__route:focus:not(:focus-visible) { outline: none; }
.omap__route:focus-visible .omap__case { stroke: var(--lagoon); stroke-width: 14; opacity: 1; }

.omap__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.omap__key {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background 160ms ease;
}
.omap__key:hover, .omap__key:focus-visible { background: var(--ocean-tint); }
.omap__swatch { width: 16px; height: 5px; border-radius: 3px; background: var(--route); }
.omap__key b { grid-column: 2; font-size: 0.97rem; font-weight: 600; }
.omap__key small { grid-column: 2; font-size: 0.84rem; color: var(--ink-faint); }

@media (max-width: 1000px) {
  .omap { margin-top: 42px; }
  .omap__grid { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .omap__fig { max-width: 420px; }
  .omap__keys { grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; }
  /* the map is barely a third of the viewBox wide here, so a 6-unit core lands
     under 2px and the colour stops carrying. Everything grows to hold its hue. */
  .omap__case { stroke-width: 16; }
  .omap__line { stroke-width: 8.5; }
  .omap__dots circle { r: 11; stroke-width: 3.5; }
  /* two legend columns leave ~123px for the name: "Mahébourg Tour" needs
     every pixel of it to stay on one line and keep the rows even */
  .omap__key { padding: 10px; column-gap: 10px; }
  .omap__key b { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .omap__route, .omap__key { transition: none; }
}

.mbar { display: none; }

/* ---------- contact + faq ---------- */

.talk { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.talk__rows { margin: 28px 0 30px; border-top: 1px solid var(--line); }
.talk__rows li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.talk__rows svg { color: var(--ocean); }
.talk__rows small { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.talk__rows a:hover { color: var(--ocean); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 48px 22px 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink);
  position: relative;
  transition: color 0.2s var(--ease);
}
.faq summary:hover { color: var(--ocean); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ocean);
  transition: transform 0.3s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 40px 22px 0; margin: 0; color: var(--ink-soft); max-width: 62ch; }

/* ---------- final band ---------- */

.final { position: relative; color: #fff; text-align: center; background: var(--navy-2); }
.final__bg { position: absolute; inset: 0; overflow: hidden; }
.final__bg img { width: 100%; height: 100%; object-fit: cover; }
.final__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 24, 48, 0.84), rgba(4, 24, 48, 0.5)); }
.final__in { position: relative; z-index: 1; padding-block: clamp(80px, 10vw, 128px); }
.final h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.final p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 auto 30px; font-size: 1.08rem; }

/* ---------- footer ---------- */

.foot {
  position: relative;
  overflow: hidden;
  background: var(--navy-2);
  color: rgba(255, 255, 255, 0.74);
  padding-top: clamp(58px, 7vw, 88px);
  font-size: 0.92rem;
}
.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lagoon), transparent);
  opacity: 0.65;
}
.foot__grid { display: grid; grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2fr); gap: clamp(52px, 7vw, 96px); }
.foot__brand img { display: block; width: 190px; height: auto; margin-bottom: 20px; }
.foot__brand p { max-width: 31ch; margin-bottom: 22px; color: rgba(255, 255, 255, 0.68); }
.foot__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; }
.foot__h { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lagoon-lt); margin-bottom: 18px; }
.foot li { margin: 0; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 34px; line-height: 1.4; }
.foot a { transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.foot a:hover { color: #fff; }
.foot__col--plan { padding: 20px 22px; margin-top: -20px; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.035); }
.foot__wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 12px 16px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
}
.foot__wa:hover { border-color: var(--lagoon-lt); background: rgba(255, 255, 255, 0.07); }
.foot__wa svg { color: var(--lagoon-lt); }
.foot__wa span { display: block; line-height: 1.2; }
.foot__wa small { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.52); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.foot__wa strong { font-size: 0.91rem; font-weight: 600; }
.foot__wa .arw { width: 16px; margin-left: auto; }
.foot__bar {
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
.foot__bar p { margin: 0; }
.foot__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot__legal { display: flex; align-items: center; gap: 22px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 36px; }
.foot__top { gap: 7px; }
.foot__top .arw { width: 14px; transform: rotate(-90deg); }

/* ---------- prose pages ---------- */

.prose h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.prose p { color: var(--ink-soft); }
.nf { text-align: center; }
.nf .eyebrow { margin-top: 20px; }
.nf hr { border: 0; border-top: 1px solid var(--line); margin: 44px auto; width: 80px; }

/* ---------- scroll reveal (only when site.js runs) ---------- */

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .grid > .rv:nth-child(2) { transition-delay: 0.08s; }
.js .grid > .rv:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .plan__head { flex-wrap: wrap; }
  .plan__grid--tours { grid-template-columns: 1.4fr 1fr 0.8fr 1.3fr; }
  .plan__grid--transfer { grid-template-columns: 1fr 1fr 1fr 0.85fr 0.75fr; }
  .plan__grid--car { grid-template-columns: 1fr 1fr 1.5fr; }
  .plan__grid .btn { grid-column: 1 / -1; min-height: 56px; }
  .how__grid { grid-template-columns: 1fr 1fr; }
  .how__copy { grid-column: 1 / -1; border-radius: 20px 20px 8px 8px; }
  .how__media { min-height: 420px; border-radius: 8px 8px 8px 20px; }
  .how__steps { border-radius: 8px 8px 20px 8px; }
  .pack { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .foot__grid { grid-template-columns: 1fr; gap: 48px; }
  .foot__brand { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .foot__brand img, .foot__brand p { margin: 0; }
}

@media (max-width: 1040px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 > .tcard:not(.tcard--wide):last-child:nth-child(odd) { grid-column: span 2; }
  .tour { grid-template-columns: 1fr; }
  .tour__side { position: static; }
  .talk { grid-template-columns: 1fr; }
  .move { grid-template-columns: 1fr; }
  .move--one .mcard { grid-template-columns: 1fr; }
  .move--one .mcard__top--car { align-items: flex-end; padding: 16px 32px 0; height: 240px; }
  .move--one .mcard__top--car img { width: auto; max-height: 208px; }
  .hero__trust { justify-content: flex-start; }
  .hero__trust li:first-child { padding-left: 0; }
}

@media (max-width: 1000px) {
  :root { --nav-h: 72px; }
  body.menu-open { overflow: hidden; }
  /* backdrop-filter makes fixed descendants relative to the 72px header in
     Chromium, collapsing a full-height drawer to zero. The mobile bar is
     already effectively opaque, so the blur adds no useful visual value. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__in { z-index: 2; }
  .nav__logo img { height: 52px; }
  .nav__links {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 0 auto;
    width: min(88vw, 380px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: #fff;
    border-left: 1px solid var(--line-soft);
    padding: 16px 20px max(22px, env(safe-area-inset-bottom));
    box-shadow: -18px 24px 60px rgba(6, 34, 63, 0.2);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 0 100%);
    transition: opacity 0.22s var(--ease), clip-path 0.28s var(--ease), visibility 0s 0.28s;
  }
  .nav__links.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0);
    transition: opacity 0.22s var(--ease), clip-path 0.28s var(--ease);
  }
  .nav__links > a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
    color: var(--ink);
  }
  .nav__drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 28px;
  }
  .nav__links .nav__drawer-cta,
  .nav__links .nav__drawer-wa {
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
  }
  .nav__links .nav__drawer-cta {
    color: #fff;
    border-bottom-color: transparent;
  }
  .nav__links .nav__drawer-wa {
    color: var(--ocean);
    border-color: var(--line);
    background: var(--paper);
  }
  .nav__drawer-cta .nav__cta-long { display: inline; }
  .nav__drawer-cta .nav__cta-short { display: none; }
  .nav__scrim {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 1;
    width: 100%;
    height: auto;
    padding: 0;
    background: rgba(4, 24, 48, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), visibility 0s 0.22s;
  }
  .nav.is-open .nav__scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s var(--ease);
  }
  .nav__toggle { display: flex; }
  .nav__right { margin-left: auto; gap: 12px; }
  .mbar {
    display: flex;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: var(--z-bar);
    box-shadow: 0 16px 40px rgba(6, 34, 63, 0.35);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .mbar.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
  .has-mbar .foot { padding-bottom: 80px; }
}

@media (max-width: 900px) {
  .plan__head { flex-direction: column; align-items: stretch; gap: 16px; }
  .plan__intro { flex: none; }
  .plan__tabs { align-self: flex-start; }
  .plan__grid--tours, .plan__grid--car { grid-template-columns: 1fr 1fr; }
  .plan__grid--tours > :first-child, .plan__grid--tours > :nth-child(4), .plan__grid--car > :nth-child(3) { grid-column: 1 / -1; }
  .plan__grid--transfer { grid-template-columns: repeat(6, 1fr); }
  .plan__grid--transfer > :nth-child(1), .plan__grid--transfer > :nth-child(2) { grid-column: span 3; }
  .plan__grid--transfer > :nth-child(3), .plan__grid--transfer > :nth-child(4), .plan__grid--transfer > :nth-child(5) { grid-column: span 2; }
  .hero__trust { flex-wrap: wrap; gap: 14px 0; }
  .tcard--wide .tcard__media { min-height: 300px; }
}

@media (max-width: 680px) {
  :root { --nav-h: 64px; --gutter: 18px; }
  body { font-size: 15.5px; }
  h2 { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .section { padding-block: 60px; }
  .head { margin-bottom: 28px; }
  .head--row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .head--row p { font-size: 0.97rem; }

  /* nav: logo, language, short "Book" button, menu */
  .nav__logo img { height: 44px; }
  .nav__right { gap: 8px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .nav .nav__cta { min-height: 40px; padding: 8px 14px; gap: 7px; font-size: 0.84rem; box-shadow: none; }
  .nav__toggle { width: 40px; height: 40px; }
  .lang { padding: 8px 2px; }

  /* hero: photo on top, planner overlaps onto navy below */
  .hero__bg { bottom: auto; height: min(640px, 92svh); }
  .hero__bg img { object-position: 64% 50%; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(4, 24, 48, 0.62) 0%, rgba(4, 24, 48, 0.5) 30%, rgba(4, 24, 48, 0.62) 62%, var(--navy-2) 100%);
  }
  .hero__in { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 36px; }
  .hero__copy { margin-bottom: 26px; }
  .hero h1 { font-size: clamp(2.7rem, 12.5vw, 3.3rem); margin-bottom: 14px; }
  .hero__lead { font-size: 1rem; }
  .eyebrow--line::after { width: 28px; }
  .hero .eyebrow { font-size: 0.66rem; letter-spacing: 0.13em; }
  .hero .eyebrow::after { display: none; }

  .plan { padding: 18px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.94); margin-inline: -4px; }
  .plan__head { margin-bottom: 16px; gap: 14px; }
  .plan__h { font-size: 1.75rem; }
  .plan__sub { font-size: 0.88rem; line-height: 1.5; }
  .plan__tabs { align-self: stretch; }
  .plan__tab { flex: 1; padding: 10px 6px; gap: 6px; font-size: 0.86rem; }
  .plan__tab-long { display: none; }
  .plan__tab-short { display: inline; }
  .plan__grid { gap: 10px; }
  .plan__grid--tours { grid-template-columns: 1.45fr 1fr; }
  .plan__grid--transfer > :nth-child(1), .plan__grid--transfer > :nth-child(2) { grid-column: 1 / -1; }
  .plan__grid--transfer > :nth-child(3) { grid-column: span 3; }
  .plan__grid--transfer > :nth-child(4) { grid-column: span 3; }
  .plan__grid--transfer > :nth-child(5) { grid-column: 1 / -1; }
  .pf { height: 58px; }
  .pf input, .pf select { padding-top: 24px; }
  .plan__note { font-size: 0.76rem; text-align: left; align-items: flex-start; }
  .plan__note::before, .plan__note::after { display: none; }
  .plan__note svg { margin-top: 1px; }

  .hero__trust { flex-direction: column; gap: 14px; margin-top: 26px; }
  .hero__trust li, .hero__trust li:first-child, .hero__trust li + li { padding: 0; border: 0; }

  /* card rows swipe sideways instead of stacking eight tall cards */
  .grid--cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 18px;
    scrollbar-width: none;
  }
  .grid--cards::-webkit-scrollbar { display: none; }
  .grid--cards > .tcard { flex: 0 0 84%; scroll-snap-align: start; }
  .grid--cards > .tcard:hover { transform: none; }
  .js .grid--cards > .rv { opacity: 1; transform: none; transition: none; }
  .tcard--wide { flex-direction: column; }
  .tcard--wide .tcard__media { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
  .tcard--wide .tcard__body { padding: 22px 24px 24px; justify-content: flex-start; }
  .tcard--wide h3 { font-size: 1.75rem; }
  .tcard--wide .tcard__intro { display: none; }
  .tcard--wide .tcard__tag { color: var(--ink-soft); font-weight: 400; margin-bottom: 18px; }
  .tcard--wide .tcard__foot { margin-top: auto; }
  .tcard__body { padding: 18px 18px 20px; }
  .tcard h3 { font-size: 1.6rem; }

  .how__grid { grid-template-columns: 1fr; gap: 8px; }
  .how__copy { border-radius: 18px 18px 6px 6px; padding: 34px 22px 26px; }
  .how__copy h2 { max-width: none; padding-right: 64px; }
  .how__copy .btn { align-self: stretch; }
  .how__stamp { width: 74px; height: 74px; top: 18px; right: 14px; }
  .how__minis { grid-template-columns: 1fr; gap: 14px; padding-top: 28px; }
  .how__minis li, .how__minis li:first-child, .how__minis li + li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0; border: 0; }
  .how__media { min-height: 0; aspect-ratio: 4 / 3; border-radius: 6px; }
  .how__steps { border-radius: 6px 6px 18px 18px; padding: 26px 20px 22px; }
  .how__steps li { grid-template-columns: 48px 1fr; gap: 0 14px; padding: 18px 0; }
  .how__n { width: 48px; height: 48px; font-size: 1.35rem; }
  .how__ico { display: none; }
  .how__steps h3 { font-size: 1.4rem; margin-top: 2px; }
  .how__sign { font-size: 2.3rem; }

  .review__mark { height: 44px; font-size: 6rem; }
  .review__quote p { font-size: 1.75rem; }
  .review__full { padding: 20px; }

  .pack { border-radius: 18px; margin-inline: -4px; }
  .pack__copy { padding: 34px 22px 30px; }
  .pack__form { padding: 22px 16px 20px; }
  .pday { align-items: flex-start; gap: 12px; padding: 8px 10px 10px 8px; }
  .pday__img { width: 68px; height: 68px; }
  .pday__txt h3 { font-size: 1.25rem; }
  .bk__row--3 { grid-template-columns: 1.3fr 1fr; }
  .bk__row--3 > :last-child { grid-column: 1 / -1; }

  .mcard { border-radius: 18px; margin-inline: -4px; }
  .mcard__top { height: 160px; }
  .mcard__top--car img { max-height: 148px; }
  .mcard__body { padding: 22px 18px 20px; }
  .mcard h3 { font-size: 1.8rem; }

  .btn { min-height: 54px; }
  .talk .btn { width: 100%; }
  .final .btn { width: 100%; max-width: 360px; }

  .bk__top, .bk__body { padding-inline: 18px; }
  .bk__art { width: 110px; opacity: 0.8; }
  .route { padding: 14px; gap: 12px; }
  .route__ico { width: 50px; height: 50px; }
  .route__ico svg { width: 24px; height: 24px; }

  .foot { padding-top: 48px; }
  .foot__grid { gap: 38px; }
  .foot__brand { display: block; }
  .foot__brand img { width: 180px; margin-bottom: 18px; }
  .foot__brand p { margin-bottom: 20px; }
  .foot__wa { width: 100%; max-width: 360px; min-height: 52px; }
  .foot__nav { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .foot__nav a { min-height: 40px; }
  .foot__col--plan { grid-column: 1 / -1; margin: 0; }
  .foot__col--plan ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .foot__bar { align-items: flex-start; gap: 16px; }
  .foot__meta { flex-direction: column; gap: 3px; }
  .foot__legal { width: 100%; justify-content: space-between; gap: 16px; }
  .thead { min-height: 440px; }
  .stop { gap: 12px; padding-right: 8px; }
  .stop__n { width: 28px; font-size: 1.3rem; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery figure, .gallery--2 figure, .gallery--3 figure { grid-column: auto; }
  .gallery--3 figure:first-child, .gallery--1 figure { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .gallery--bento figure:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .gallery--bento.gallery--5 figure:nth-child(n+4) { grid-column: auto; aspect-ratio: 4 / 3; }
  .gallery--bento.gallery--4 figure:first-child { grid-row: auto; }
  .gallery--bento.gallery--4 figure:last-child,
  .gallery--bento.gallery--6 figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .faq summary { font-size: 1.3rem; }
  .tour__main > .lead { font-size: 1.3rem; }
  .badges li { font-size: 0.78rem; padding: 5px 10px; gap: 6px; }
}

@media (max-width: 440px) {
  /* two date pickers side by side clip their dd/mm/yyyy text */
  .mcard .bk__row:not(.bk__row--3), .pack__form .bk__row--3 { grid-template-columns: 1fr; gap: 0; }
  /* the side-by-side logo is wide: on a 360 px phone the menu button fell off the edge */
  .nav__in { gap: 14px; }
  .nav__logo img { height: 40px; }
  .nav__links { width: 92vw; }
}

@media (max-width: 330px) {
  /* keep the menu button fully on-screen on older 320 px phones */
  .nav__right > .nav__cta { display: none; }
  .foot__nav { grid-template-columns: 1fr; }
  .foot__col--plan { grid-column: auto; }
  .foot__col--plan ul { grid-template-columns: 1fr; }
}