/* =========================================================
   Azuren — tokens mirror the Figma variables (Light / Deep)
   ========================================================= */
:root {
  --sand-50: #FBF9F5; --sand-100: #F6F3EE; --sand-200: #ECE6DC; --sand-300: #DCD3C4; --sand-500: #A89D8B;
  --azure-100: #E3ECF6; --azure-300: #8FB2D9; --azure-500: #1F5FA8; --azure-600: #184C88;
  --deep-950: #081624; --deep-900: #0E2236; --deep-800: #1A3249; --deep-700: #2A4058; --deep-500: #5A6B7C; --deep-300: #A9B6C4;
  --champagne-300: #D9C7A3; --champagne-500: #B89A6A;

  /* Light mode (default) */
  --bg: var(--sand-100); --surface: #fff; --text: var(--deep-900); --text-2: var(--deep-500);
  --accent: var(--azure-500); --gold: var(--champagne-500); --line: var(--sand-300);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(24px, 6vw, 120px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
.deep { --bg: var(--deep-900); --surface: var(--deep-800); --text: var(--sand-50); --text-2: var(--deep-300);
  --accent: var(--azure-300); --gold: var(--champagne-300); --line: var(--deep-700); background: var(--bg); color: var(--text); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-weight: 300; color: var(--text); background: var(--deep-900); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img, svg { display: block; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.eyebrow { display: flex; align-items: center; gap: 16px; font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.eyebrow--ink { color: var(--azure-500); }
.h-display { font: 300 clamp(40px, 5vw, 72px)/1.04 var(--serif); letter-spacing: -.01em; margin-top: 22px; }
.h-display em { font-style: italic; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s; white-space: nowrap; }
.btn--lg { height: 56px; padding: 0 32px; } .btn--md { height: 44px; padding: 0 22px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn--primary { background: var(--deep-900); color: var(--sand-50); } .btn--primary:hover { background: var(--azure-500); }
.btn--accent { background: var(--azure-500); color: var(--sand-50); } .btn--accent:hover { background: var(--deep-900); }
.btn--outline { border: 1px solid currentColor; } .btn--outline:hover { background: var(--text); color: var(--bg); }
.btn--ghost { height: auto; padding: 0 0 10px; border-bottom: 1px solid currentColor; } .btn--ghost:hover { color: var(--accent); }
.arrow { width: 18px; height: 10px; position: relative; display: inline-block; }
.arrow::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.btn:hover .arrow { transform: translateX(3px); transition: transform .3s var(--ease); }
.link-quiet { font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- icons (CSS masks, 24px grid, 1.5 stroke) ---------- */
.ic { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; color: var(--accent); }
.ic-pin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C12 21 18.5 14.8 18.5 10A6.5 6.5 0 0 0 5.5 10C5.5 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.25'/%3E%3C/svg%3E"); }
.ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='1'/%3E%3Cpath d='M4 10H20M8.5 3.5V7.5M15.5 3.5V7.5'/%3E%3C/svg%3E"); }
.ic-guests { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3'/%3E%3Cpath d='M3.5 19C4.2 15.8 6.4 14 9 14C11.6 14 13.8 15.8 14.5 19M15 6.2A3 3 0 0 1 15 11.8M17 14.3C18.8 15 20 16.7 20.5 19'/%3E%3C/svg%3E"); }
.ic-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5L10 17.5L19 7'/%3E%3C/svg%3E"); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.logo__mark { width: 34px; height: 34px; fill: none; stroke-width: 4.5; stroke-linecap: round; }
.logo__legs { stroke: currentColor; } .logo__wave { stroke: var(--accent); }
.logo__word { font: 400 22px/1 var(--serif); letter-spacing: .3em; }
.logo--ink { color: var(--deep-900); --accent: var(--azure-500); }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: clamp(20px, 4.4vw, 64px); border-bottom: 1px solid var(--line); transition: color .5s, border-color .5s, background .5s, transform .5s var(--ease); }
.nav[data-theme="light"] { --text: var(--deep-900); --text-2: var(--deep-500); --accent: var(--azure-500); --line: rgba(14,34,54,.12); color: var(--deep-900); }
.nav[data-theme="dark"]  { --text: var(--sand-50); --text-2: var(--deep-300); --accent: var(--azure-300); --line: rgba(246,243,238,.12); color: var(--sand-50); }
.nav.is-solid[data-theme="dark"] { background: rgba(8,22,36,.72); backdrop-filter: blur(16px); }
.nav.is-solid[data-theme="light"] { background: rgba(246,243,238,.82); backdrop-filter: blur(16px); }
.nav__links { display: flex; gap: 40px; font: 400 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.nav__links a { position: relative; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 28px; }
.nav__phone { font: 400 13px/1 var(--sans); letter-spacing: .1em; color: var(--text-2); }
.nav__burger { display: none; width: 32px; height: 32px; position: relative; }
.nav__burger span { position: absolute; left: 4px; right: 4px; height: 1.5px; background: currentColor; } .nav__burger span:first-child { top: 12px; } .nav__burger span:last-child { top: 19px; }

/* =========================================================
   MENU
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 80; background: rgba(8,22,36,.55); backdrop-filter: blur(6px); display: flex; justify-content: flex-end; }
.menu[hidden] { display: none; }
.menu__panel { --text: var(--sand-50); --accent: var(--azure-300); color: var(--sand-50); width: min(460px, 100%); height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 36px;
  background: linear-gradient(#081624, #14284A); padding: 0 clamp(24px, 6vw, 40px) 24px; animation: slideIn .5s var(--ease); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.menu__top { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.menu__close svg, .enquiry__close svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu__links { list-style: none; counter-reset: m; }
.menu__links li { counter-increment: m; border-bottom: 1px solid rgba(246,243,238,.1); }
.menu__links a { display: flex; align-items: center; gap: 18px; padding: 12px 0; font: 300 clamp(36px, 10vw, 48px)/1.15 var(--serif); }
.menu__links a::before { content: counter(m, decimal-leading-zero); font: 500 10px/1 var(--sans); letter-spacing: .18em; color: var(--champagne-300); width: 22px; }
.menu__links a:hover { font-style: italic; }
.menu__contact { list-style: none; display: grid; gap: 12px; font-size: 14px; }
.menu__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(246,243,238,.1); display: flex; justify-content: space-between; font-size: 12px; color: var(--deep-300); }
.menu__now { display: flex; gap: 10px; align-items: center; } .menu__now svg { width: 30px; height: 16px; } .menu__now .h { stroke: rgba(246,243,238,.5); } .menu__now .s { fill: #F2C49A; }
.menu__lang { letter-spacing: .14em; } .menu__lang b { color: var(--sand-50); font-weight: 500; }

/* =========================================================
   H1 · A DAY ABOARD  (scroll-scrubbed)
   ========================================================= */
.day { position: relative; height: 420vh; background: #8A8F95; }
.day__media { position: absolute; inset: 0; }
.day__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.day__sticky.is-dark { --ink: #F6F3EE; --halo: rgba(8,22,36,.4); }
.day__copy, .day__wx, .day__scene { transition: color .7s var(--ease), text-shadow .7s, top .6s var(--ease); }
.day__scene { color: var(--ink); }
.day__sticky::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; background: linear-gradient(rgba(8,22,36,.28), transparent); pointer-events: none; }
.day__sticky { --ink: #0E2236; --halo: rgba(255,255,255,.28); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.day__scene { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.day__copy { position: absolute; left: 50%; top: var(--copyTop, 22%); transform: translateX(-50%); text-align: center; color: var(--ink, #0E2236); pointer-events: none; width: 92%; text-shadow: 0 0 40px var(--halo, transparent); transition: top .6s var(--ease); }
.day__copy.is-night { top: 16%; }
.day__clock { display: block; font: 300 clamp(96px, 12vw, 176px)/.9 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.day__moment { display: block; margin-top: 6px; font: italic 300 clamp(28px, 3.2vw, 46px)/1.1 var(--serif); transition: opacity .35s; }
.day__wx { position: absolute; right: clamp(24px, 8.3vw, 120px); top: 118px; font: 500 11px/1 var(--sans); letter-spacing: .18em; color: var(--ink, #0E2236); opacity: .85; text-shadow: 0 0 16px var(--halo, transparent); }
.day__scene text { paint-order: stroke; stroke: var(--halo, transparent); stroke-width: 3px; }
.day__book { position: absolute; left: 50%; bottom: 14%; transform: translate(-50%, 16px); width: min(1200px, calc(100% - 2*var(--gutter))); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
.day__book.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sun-handle { cursor: grab; } .sun-handle:active { cursor: grabbing; }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) 3; }
@keyframes pulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.stoplbl { font-family: var(--sans); transition: opacity .3s; }

/* ---------- booking bar ---------- */
.booking { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; background: #fff; color: var(--deep-900); padding: 12px 12px 12px 40px; box-shadow: 0 24px 64px -8px rgba(14,34,54,.25); --accent: var(--azure-500); }
.booking__cell { display: flex; align-items: center; gap: 16px; padding: 14px 24px 14px 0; border-right: 1px solid var(--sand-300); margin-right: 24px; cursor: pointer; }
.booking__cell:nth-child(3) { border-right: 0; }
.booking__cell > span { display: grid; gap: 6px; min-width: 0; }
.booking small { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--deep-500); }
.booking select, .booking input { border: 0; background: none; font: 300 17px/1.4 var(--sans); color: var(--deep-900); width: 100%; appearance: none; -webkit-appearance: none; padding: 0; outline: none; cursor: pointer; }
.booking .btn { height: 64px; }

/* =========================================================
   S2 · MANIFESTO
   ========================================================= */
.manifesto { padding: 180px 0 160px; }
.manifesto__grid { display: grid; grid-template-columns: 200px 1fr; gap: 80px; }
.manifesto .eyebrow { padding-top: 22px; letter-spacing: .24em; font-size: 12px; } .manifesto .eyebrow::before { width: 28px; }
.statement { font: 300 clamp(36px, 4.7vw, 68px)/1.14 var(--serif); letter-spacing: -.01em; max-width: 940px; }
.pill { display: inline-block; vertical-align: middle; width: 1.95em; height: .92em; border-radius: 99px; border: 1px solid var(--line); position: relative; margin: 0 .05em; transform: translateY(-.06em); }
.pill::after { content: ""; position: absolute; width: .2em; height: .2em; border-radius: 50%; left: 62%; top: 40%; background: #FFF4E2; }
.pill.ph { background: #8A8F95; } .pill.ph::before { display: none; } .pill.ph--loaded::after, .pill.ph::after { display: none; }
.pill--dawn { background: linear-gradient(#B9C3DE, #F2CDC3 55%, #C9C2D6 56%, #8C9BC0); }
.pill--noon { background: linear-gradient(#6FA6DC, #DCEAF6 55%, #2F86C9 56%, #0E4A86); }
.pill--dusk { background: linear-gradient(#4E5E92, #F2C49A 55%, #5E6F9C 56%, #141F38); }
.pill--night { width: 1.42em; background: linear-gradient(#050C18, #1C2E57 55%, #13213D 56%, #030912); } .pill--night::after { background: #EEF2FA; top: 22%; }
.signature { display: flex; align-items: center; gap: 16px; margin-top: 48px; }
.signature b { display: block; font: 300 17px/1.5 var(--sans); } .signature small { font-size: 12px; color: var(--text-2); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#4E5E92, #F2C49A 55%, #5E6F9C 56%, #141F38); flex: none; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 120px; padding-top: 56px; position: relative; }
.numbers::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.stat { border-left: 1px solid var(--accent); padding-left: 24px; }
.stat b { display: block; font: 300 64px/1 var(--serif); } .stat span { display: block; margin-top: 8px; font: 400 14px/1.55 var(--sans); color: var(--text-2); }

/* =========================================================
   S3 · FLEET
   ========================================================= */
.fleet { position: relative; height: 230vh; }
.fleet__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 104px 0 40px;
  --tileH: clamp(240px, calc((100svh - 400px) / 2), 460px); }
.fleet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(28px, 4vh, 56px); }
.fleet .h-display { font-size: clamp(40px, 4.4vw, 64px); margin-top: 14px; }
.search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; border: 1px solid var(--line); border-radius: 99px; font: 400 14px/1.4 var(--sans); }
.chip .ic { width: 16px; height: 16px; }
.fleet__rows { display: grid; gap: clamp(20px, 3vh, 40px); }
.fleet__row { display: flex; gap: 40px; width: max-content; padding-inline: var(--gutter); will-change: transform; }
.tile { position: relative; flex: none; width: calc(var(--tileH) * 1.3); height: var(--tileH); border-radius: 24px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); cursor: pointer; }
.tile__media { position: absolute; inset: 0; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(8,22,36,.45), transparent 38%, transparent 70%, rgba(8,22,36,.45)); pointer-events: none; }
.tile > *:not(.tile__media) { z-index: 2; }
.tile__word { position: absolute; top: 9.5%; left: 0; right: 0; text-align: center; color: var(--sand-50); }
.tile__name { font: 400 calc(var(--tileH) * .1) / 1 var(--serif); letter-spacing: .22em; text-transform: uppercase; margin-right: -.22em; }
.tile__line { margin-top: 12px; font: 400 12px/1 var(--sans); letter-spacing: .16em; opacity: .75; }
.tile__time { position: absolute; left: 24px; bottom: 26px; font: 500 11px/1 var(--sans); letter-spacing: .18em; color: var(--sand-50); opacity: .75; }
.tile__free { position: absolute; right: 20px; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(8,22,36,.35); color: var(--sand-50); font: 500 11px/1 var(--sans); letter-spacing: .06em; }
.tile__free::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8FD3A8; }
.tile__panel { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-radius: 16px; background: rgba(246,243,238,.94); backdrop-filter: blur(20px); color: var(--deep-900);
  transform: translateY(calc(100% + 20px)); transition: transform .5s var(--ease); }
.tile__panel small { display: block; font: 400 11px/1.4 var(--sans); color: var(--deep-500); } .tile__panel b { font: 400 26px/1 var(--serif); }
.tile__panel .btn { height: 42px; padding: 0 16px; font-size: 12px; background: var(--deep-900); color: var(--sand-50); }
.tile:hover, .tile:focus-within { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,.35); }
.tile:hover .tile__panel, .tile:focus-within .tile__panel { transform: none; }
.tile:hover .tile__free, .tile:hover .tile__time { opacity: 0; }
@media (hover: none) { .tile__panel { transform: none; } .tile__free, .tile__time { display: none; } }

/* =========================================================
   S4 · PLOT YOUR WEEK
   ========================================================= */
.plot { position: relative; height: max(1000px, 69.4vw); overflow: hidden; background: #0B2E5A; } /* keeps the map at the photo's 1.44 ratio */
.plot__map, .plot__map svg, .plot__aerial { position: absolute; inset: 0; width: 100%; height: 100%; }
.plot__panel { position: absolute; right: clamp(24px, 5.5vw, 80px); top: 50%; transform: translateY(-50%); width: 460px; max-height: calc(100% - 64px); overflow-y: auto;
  background: rgba(246,243,238,.94); backdrop-filter: blur(24px); border-radius: 20px; padding: 44px; color: var(--deep-900); box-shadow: 0 30px 60px rgba(4,20,38,.35); display: grid; gap: 26px; }
.plot__title { font: 300 46px/1.04 var(--serif); letter-spacing: -.01em; } .plot__title em { font-style: italic; }
.answers > div { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--sand-300); }
.answers .ic { width: 16px; height: 16px; color: var(--azure-500); }
.answers small { display: block; font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--deep-500); }
.answers span { flex: 1; font: 400 15px/1.4 var(--sans); } .answers button { font-size: 12px; color: var(--deep-500); text-decoration: underline; }
.progress { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--sans); letter-spacing: .14em; }
.progress i { flex: 1; height: 2px; background: var(--sand-300); } .progress i.done { background: var(--deep-900); } .progress i.now { background: var(--azure-500); }
.progress b { margin-left: 8px; font-weight: 500; }
.q { font: 400 32px/1.15 var(--serif); }
.opts { display: grid; gap: 12px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--sand-300); text-align: left; transition: background .25s, color .25s, border-color .25s; }
.opt span { flex: 1; font: 400 15px/1.35 var(--sans); } .opt small { display: block; font: 300 12px/1.4 var(--sans); color: var(--deep-500); }
.opt::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sand-500); flex: none; }
.opt:hover { border-color: var(--deep-900); }
.opt[aria-checked="true"] { background: var(--deep-900); color: var(--sand-50); border-color: var(--deep-900); }
.opt[aria-checked="true"] small { color: var(--champagne-300); } .opt[aria-checked="true"]::after { background: var(--champagne-300); border-color: var(--champagne-300); }
.plot__actions { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--deep-500); }
.plot__actions .btn { height: 48px; padding: 0 24px; } .plot__actions .btn[disabled] { opacity: .35; pointer-events: none; }
.itin > div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--sand-300); }
.itin b { font: 500 10px/1.6 var(--sans); letter-spacing: .18em; color: var(--azure-500); } .itin span { font: 400 15px/1.4 var(--sans); } .itin small { display: block; font: 300 12px/1.4 var(--sans); color: var(--deep-500); }
.facts { font-size: 12px; color: var(--deep-500); letter-spacing: .04em; }
.plot-yacht { transition: none; }
.map-label { font: 500 11px/1 var(--sans); letter-spacing: .18em; fill: #fff; paint-order: stroke; stroke: rgba(8,22,36,.25); stroke-width: 3px; }
.map-sub { font: 400 11px/1 var(--sans); fill: #E3ECF6; }

/* =========================================================
   S5 · DESTINATIONS
   ========================================================= */
.dest { padding: 140px 0 150px; }
.dest__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 72px; }
.dest__head .h-display { line-height: 1.04; }
.months { display: grid; gap: 14px; justify-items: end; }
.months__label { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.months__row { display: flex; gap: 6px; }
.month { padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .25s, color .25s; }
.month[aria-checked="true"] { background: var(--sand-50); color: var(--deep-900); border-color: var(--sand-50); }
.panels { display: flex; gap: 12px; height: 640px; }
.panel { position: relative; flex: 0 0 132px; border-radius: 14px; overflow: hidden; cursor: pointer; transition: flex-basis .7s var(--ease), border-radius .7s; text-align: left; }
.panel.is-open { flex: 1 1 600px; border-radius: 20px; cursor: default; }
.panel__media { position: absolute; inset: 0; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(8,22,36,.75)); pointer-events: none; }
.panel.is-open::after { background: linear-gradient(transparent 22%, rgba(8,22,36,.55) 48%, rgba(8,22,36,.94) 82%), linear-gradient(90deg, rgba(8,22,36,.55), transparent 70%); }
.panel__fit { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(8,22,36,.45); backdrop-filter: blur(10px); font: 500 10px/1 var(--sans); letter-spacing: .1em; white-space: nowrap; }
.panel.is-open .panel__fit { left: auto; right: 20px; transform: none; }
.panel__fit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fit, #8FD3A8); }
.panel__name { position: absolute; z-index: 2; left: 50%; bottom: 60px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font: 400 36px/1 var(--serif); transition: opacity .3s; }
.panel__num { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 11px/1 var(--sans); letter-spacing: .18em; opacity: .7; transition: opacity .3s; }
.panel.is-open .panel__name, .panel.is-open .panel__num { opacity: 0; }
.panel__body { position: absolute; z-index: 2; left: 40px; bottom: 40px; right: 40px; display: grid; gap: 18px; opacity: 0; transform: translateY(12px); transition: opacity .4s .25s, transform .5s .25s var(--ease); pointer-events: none; }
.panel.is-open .panel__body { opacity: 1; transform: none; pointer-events: auto; }
.panel__eb { font: 500 11px/1 var(--sans); letter-spacing: .22em; color: var(--champagne-300); }
.panel__title { font: 300 68px/1 var(--serif); letter-spacing: -.01em; }
.panel__line { max-width: 380px; font: 300 16px/1.55 var(--sans); color: var(--azure-100); }
.panel__facts { display: flex; gap: 28px; padding-top: 16px; border-top: 1px solid rgba(246,243,238,.2); }
.panel__facts small { display: block; font: 500 9px/1.4 var(--sans); letter-spacing: .18em; color: var(--deep-300); text-transform: uppercase; } .panel__facts span { font: 400 14px/1.6 var(--sans); }
.season { display: flex; gap: 4px; align-items: flex-end; }
.season i { display: grid; justify-items: center; gap: 6px; font: 500 9px/1 var(--sans); font-style: normal; color: var(--deep-300); }
.season i::before { content: ""; width: 22px; height: calc(4px + var(--l) * 6px); background: rgba(246,243,238, calc(.15 + var(--l) * .14)); }
.season i.now { color: var(--champagne-300); } .season i.now::before { background: var(--champagne-300); }
.panel__cta { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* =========================================================
   S6 · DAWN CTA
   ========================================================= */
.dawn { position: relative; min-height: 1180px; overflow: hidden; color: var(--sand-50); background: #8A8F95; }
.dawn__media { position: absolute; inset: 0; }
.dawn::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#0E2236 0%, rgba(14,34,54,.35) 14%, rgba(14,34,54,0) 40%), linear-gradient(transparent 82%, #F6F3EE 100%); }
.dawn__media > img { object-position: 50% 62%; }
.dawn__content { position: relative; z-index: 2; padding-top: 230px; display: grid; justify-items: center; text-align: center; gap: 26px; }
.dawn__eyebrow { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--champagne-300); }
.dawn__eyebrow::before, .dawn__eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .7; }
.dawn__title { font: 300 clamp(64px, 9.2vw, 132px)/.96 var(--serif); letter-spacing: -.02em; } .dawn__title em { font-style: italic; }
.dawn__sub { font: 300 19px/1.5 var(--sans); color: var(--azure-100); max-width: 560px; }
.booking--center { width: min(1200px, 100%); }
.dawn__contact { display: flex; gap: 18px; font: 500 13px/1 var(--sans); letter-spacing: .08em; color: var(--sand-50); }
.dawn__contact a { text-decoration: underline; text-underline-offset: 4px; } .dawn__contact a:first-child { text-decoration: none; } .dawn__contact span { opacity: .5; }

/* =========================================================
   FOOTER (Light)
   ========================================================= */
.footer { background: var(--sand-100); color: var(--deep-900); --line: var(--sand-300); --text-2: var(--deep-500); padding: 96px 0 40px; }
.footer__top { display: flex; gap: 80px; justify-content: space-between; }
.footer__brand { max-width: 420px; display: grid; gap: 28px; } .footer__brand > p { font-size: 17px; line-height: 1.6; color: var(--deep-500); }
.letter label { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--deep-500); }
.letter__row { display: flex; align-items: center; border-bottom: 1px solid var(--sand-300); margin: 10px 0; } .letter__row:focus-within { border-color: var(--azure-500); }
.letter input { flex: 1; border: 0; background: none; padding: 6px 0 14px; font-size: 17px; outline: none; } .letter small { font-size: 12px; color: var(--deep-500); }
.arrow--ink { color: var(--deep-900); }
.footer__cols { display: flex; gap: 72px; }
.footer__cols > div { display: grid; gap: 16px; align-content: start; font: 400 14px/1.4 var(--sans); }
.footer__cols h4 { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--champagne-500); margin-bottom: 4px; }
.footer__cols a:hover { color: var(--azure-500); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--sand-300); font-size: 12px; color: var(--deep-500); position: relative; }
.footer__legal { display: flex; gap: 32px; flex-wrap: wrap; }

/* =========================================================
   ENQUIRY DIALOG
   ========================================================= */
.enquiry { margin: auto; width: min(560px, calc(100% - 32px)); border: 0; border-radius: 20px; padding: 44px; background: var(--sand-100); color: var(--deep-900); }
.enquiry::backdrop { background: rgba(8,22,36,.6); backdrop-filter: blur(6px); }
.enquiry form { display: grid; gap: 20px; position: relative; }
.enquiry__close { position: absolute; right: -16px; top: -16px; color: var(--deep-900); }
.enquiry__title { font: 300 44px/1.05 var(--serif); } .enquiry__lead { color: var(--deep-500); font-size: 15px; margin-top: -8px; }
.field { display: grid; gap: 8px; } .field--row { grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--deep-500); }
.field input, .field textarea { border: 0; border-bottom: 1px solid var(--sand-300); background: none; padding: 6px 0 12px; font-size: 16px; outline: none; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--azure-500); }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   TABLET ≤ 1100
   ========================================================= */
@media (max-width: 1100px) {
  .nav { height: 72px; } .nav__links, .nav__phone { display: none; } .nav__burger { display: block; }
  .day__wx { top: 96px; right: 48px; }
  .booking { grid-template-columns: repeat(3, 1fr); padding: 12px 24px 24px; gap: 0 0; }
  .booking .btn { grid-column: 1 / -1; margin-top: 16px; height: 56px; }
  .booking__cell { margin-right: 20px; }
  .manifesto { padding: 128px 0 120px; } .manifesto__grid { grid-template-columns: 1fr; gap: 28px; } .manifesto .eyebrow { padding-top: 0; }
  .numbers { grid-template-columns: 1fr 1fr; row-gap: 40px; margin-top: 88px; }
  .fleet__sticky { padding-top: 88px; --tileH: clamp(240px, calc((100svh - 470px) / 2), 380px); } .fleet__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fleet__row { gap: 24px; }
  .plot { height: auto; max-height: none; min-height: 0; padding-top: 620px; padding-bottom: 96px; }
  .plot__map { height: 620px; bottom: auto; }
  .plot__panel { position: relative; right: auto; top: auto; transform: none; width: auto; max-height: none; margin: -120px 48px 0; }
  .dest { padding: 112px 0; } .dest__head { flex-direction: column; align-items: flex-start; margin-bottom: 48px; } .months { justify-items: start; }
  .panels { height: 560px; } .panel { flex-basis: 64px; } .panel__name { font-size: 30px; } .panel.is-open { flex-basis: 434px; }
  .panel__body { left: 32px; right: 32px; bottom: 36px; } .panel__title { font-size: 56px; }
  .dawn { min-height: 1080px; } .dawn__content { padding-top: 180px; }
  .footer__top { flex-direction: column; gap: 64px; } .footer__brand { max-width: none; } .footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* =========================================================
   MOBILE ≤ 640
   ========================================================= */
@media (max-width: 640px) {
  .nav .btn--outline { display: none; }
  .day__wx { left: 24px; right: auto; top: 92px; } .day__copy.is-night { top: 128px; }
  .day__book { bottom: 6%; }
  .booking { grid-template-columns: 1fr; padding: 8px 20px 20px; }
  .booking__cell { border-right: 0; border-bottom: 1px solid var(--sand-300); margin-right: 0; padding: 14px 0; }
  .booking__cell:nth-child(3) { border-bottom: 0; } .booking small { font-size: 11px; } .booking select, .booking input { font-size: 15px; }
  .booking .btn { margin-top: 8px; }
  .manifesto { padding: 96px 0; } .statement { font-size: 36px; } .numbers { gap: 24px; margin-top: 64px; padding-top: 40px; } .stat { padding-left: 16px; } .stat b { font-size: 48px; } .stat span { font-size: 12px; }
  .fleet { height: auto; } .fleet__sticky { position: static; height: auto; padding: 88px 0; --tileH: 322px; }
  .fleet__rows { display: block; } .fleet__row { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 24px 20px; margin: 0 !important; gap: 14px; transform: none !important; scrollbar-width: none; }
  .fleet__row::-webkit-scrollbar { display: none; } .fleet__row:last-child { display: none; }
  .hide-sm { display: none; } .tile__panel { padding: 12px 12px 12px 18px; } .tile__panel b { font-size: 22px; }
  .tile { width: 308px; scroll-snap-align: center; } .tile:hover { transform: none; }
  .plot { height: auto; padding-top: 420px; padding-bottom: 0; } .plot__map { height: 460px; }
  .plot__panel { margin: -40px 0 0; border-radius: 24px 24px 0 0; padding: 20px 24px 40px; } .plot__panel::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--sand-500); }
  .plot__title { font-size: 38px; }
  .dest { padding: 88px 0; } .months { width: 100%; } .months__row { overflow-x: auto; width: calc(100% + 24px); padding-right: 24px; scrollbar-width: none; }
  .panels { flex-direction: column; height: auto; gap: 10px; }
  .panel { flex: none; height: 84px; transition: height .7s var(--ease); }
  .panel.is-open { flex: none; height: 540px; }
  
  .panel::after { background: linear-gradient(90deg, rgba(8,22,36,.75), rgba(8,22,36,.1) 70%); }
  .panel__name { left: 48px; bottom: auto; top: 50%; transform: translateY(-50%); writing-mode: horizontal-tb; font-size: 28px; }
  .panel__num { left: 20px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .panel__fit { left: auto; right: 16px; top: 50%; transform: translateY(-50%); } .panel.is-open .panel__fit { top: 16px; transform: none; }
  .panel__body { left: 24px; right: 24px; bottom: 28px; } .panel__title { font-size: 52px; } .panel__facts { gap: 16px; } .season i::before { width: 20px; } .season { gap: 2px; }
  .dawn { min-height: 1060px; } .dawn__content { padding-top: 120px; gap: 20px; } .dawn__sub { font-size: 16px; } .dawn__contact { flex-direction: column; gap: 10px; } .dawn__contact span { display: none; }
  
  .footer { padding: 64px 0 32px; } .footer__cols { grid-template-columns: 1fr 1fr; row-gap: 36px; } .footer__bottom { flex-direction: column; margin-top: 48px; }
  .enquiry { padding: 32px 24px; } .field--row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   PHOTO PLACEHOLDERS — grey until the file in /assets exists
   ========================================================= */
.ph { background: #8A8F95; overflow: hidden; }
.ph::before { content: attr(data-label); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80%, 520px); text-align: center;
  font: 500 11px/1.6 var(--sans); letter-spacing: .08em; color: rgba(255,255,255,.85); padding: 10px 14px; border: 1px dashed rgba(255,255,255,.5); pointer-events: none; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.ph--loaded > img { opacity: 1; }
.ph--loaded { background: none; } .ph--loaded::before { display: none; }
.day__media.ph::before { top: 82%; }
.day__media { background: #8A8F95; }
.tile__media.ph::before { top: 62%; width: 80%; }
.panel:not(.is-open) .panel__media.ph::before { display: none; }
.panel.is-open .panel__media.ph::before { top: 18%; }
.dawn__media.ph::before { top: 90%; }
.plot__aerial.ph::before { left: 30%; top: 90%; }
.pill { overflow: hidden; } .pill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   LIQUID GLASS (Apple-style). Refraction comes from
   js/liquid-glass.js on Chromium; everywhere else this CSS
   alone gives the rim light, specular sheen and soft blur.
   ========================================================= */
.lg {
  --lg-tint: rgba(255,255,255,.06);
  background:
    radial-gradient(120% 70% at var(--mx, 18%) var(--my, -10%), rgba(255,255,255,.30), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 50%, rgba(255,255,255,.08)),
    var(--lg-tint);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.75),
    inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.30),
    inset 0 0 22px rgba(255,255,255,.07),
    0 14px 36px -10px rgba(4,12,24,.40);
}
.lg--dark { --lg-tint: rgba(8,22,36,.30); }
.booking.lg { --lg-tint: rgba(8,22,36,.42); }
.lg--refract { background:
    radial-gradient(120% 70% at var(--mx, 18%) var(--my, -10%), rgba(255,255,255,.22), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 50%, rgba(255,255,255,.05)),
    var(--lg-tint); }

/* nav: a floating glass capsule */
.nav.lg { inset: 12px clamp(12px, 2vw, 24px) auto; height: 68px; border: 0; border-radius: 22px; padding-inline: clamp(18px, 2.6vw, 36px); }
.nav.is-solid[data-theme="dark"], .nav.is-solid[data-theme="light"] { background: none; }
.nav.lg[data-theme="dark"] { --lg-tint: rgba(8,22,36,.22); }
.nav.lg[data-theme="light"] { --lg-tint: rgba(246,243,238,.16); }
.nav .btn--outline { border-radius: 12px; }

/* hero */
.day__wx.lg { padding: 9px 14px; border-radius: 99px; color: #F6F3EE; text-shadow: none; opacity: 1; top: 104px; }
.sun-lens { position: absolute; left: 0; top: 0; width: 68px; height: 68px; border-radius: 50%; pointer-events: none; z-index: 2;
  --lg-tint: rgba(255,255,255,.02); will-change: transform; }

/* booking bars become glass */
.booking.lg { background: none; color: #F6F3EE; border-radius: 24px; --accent: var(--azure-300); box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22), inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.75), inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.3),
    inset 0 0 22px rgba(255,255,255,.07), 0 24px 60px -12px rgba(4,12,24,.45); }
.booking.lg { background:
    radial-gradient(120% 70% at var(--mx, 18%) var(--my, -10%), rgba(255,255,255,.26), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 50%, rgba(255,255,255,.06)), var(--lg-tint); }
.booking.lg .booking__cell { border-color: rgba(255,255,255,.18); }
.booking.lg small { color: rgba(246,243,238,.72); }
.booking.lg select, .booking.lg input { color: #F6F3EE; }
.booking.lg option { color: #0E2236; }
.booking.lg .btn { border-radius: 16px; }
.booking.lg .btn--accent:hover { background: #F6F3EE; color: #0E2236; }

/* fleet */
.tile__time.lg { padding: 6px 10px; border-radius: 99px; color: #F6F3EE; opacity: 1; }
.tile__free.lg { background-color: transparent; }
.tile__panel.lg { color: #F6F3EE; border-radius: 18px; }
.tile__panel.lg small { color: rgba(246,243,238,.7); }
.tile__panel.lg .btn { background: #F6F3EE; color: #0E2236; border-radius: 12px; }
.tile__panel.lg .btn:hover { background: var(--azure-300); }
.chip.lg { border: 0; }

/* plot your week: dark glass over the sea */
.plot__panel.lg { color: #F6F3EE; border-radius: 26px; }
.plot__panel.lg .eyebrow--ink { color: var(--azure-300); }
.plot__panel.lg .answers > div, .plot__panel.lg .itin > div { border-color: rgba(255,255,255,.16); }
.plot__panel.lg .answers small, .plot__panel.lg .answers button, .plot__panel.lg .opt small,
.plot__panel.lg .itin small, .plot__panel.lg .facts, .plot__panel.lg .plot__actions { color: rgba(246,243,238,.68); }
.plot__panel.lg .answers .ic { color: var(--azure-300); }
.plot__panel.lg .itin b { color: var(--azure-300); }
.plot__panel.lg .progress i { background: rgba(255,255,255,.18); }
.plot__panel.lg .progress i.done { background: #F6F3EE; } .plot__panel.lg .progress i.now { background: var(--azure-300); }
.plot__panel.lg .opt { border-color: rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.04); }
.plot__panel.lg .opt::after { border-color: rgba(255,255,255,.45); }
.plot__panel.lg .opt:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.09); }
.plot__panel.lg .opt[aria-checked="true"] { background: #F6F3EE; color: #0E2236; border-color: #F6F3EE; }
.plot__panel.lg .opt[aria-checked="true"] small { color: var(--deep-500); }
.plot__panel.lg .opt[aria-checked="true"]::after { background: var(--azure-500); border-color: var(--azure-500); }
.plot__panel.lg .btn { border-radius: 14px; }
.plot__panel.lg .btn--accent:hover { background: #F6F3EE; color: #0E2236; }

/* destinations */
.panel__fit.lg { background-color: transparent; }
.month.lg { border: 0; }
.month.lg[aria-checked="true"] { background: #F6F3EE; color: #0E2236; box-shadow: none; }
.panel__body.lg { left: 24px; right: 24px; bottom: 24px; padding: 28px 28px 24px; border-radius: 22px; gap: 16px; }
.panel__body.lg { --lg-tint: rgba(8,22,36,.52); }
.panel.is-open::after { background: linear-gradient(transparent 40%, rgba(8,22,36,.55)); }
.panel__body.lg .panel__facts { border-color: rgba(246,243,238,.22); }

/* menu drawer */
.menu__panel.lg { --lg-tint: rgba(8,22,36,.72); border-radius: 28px 0 0 28px; }
.menu { background: rgba(8,22,36,.25); backdrop-filter: none; }

@media (max-width: 1100px) {
  .nav.lg { height: 60px; border-radius: 20px; }
  .day__wx.lg { top: 88px; }
  .panel__body.lg { left: 16px; right: 16px; bottom: 16px; padding: 22px; }
}
@media (max-width: 640px) {
  .nav.lg { inset: 10px 10px auto; }
  .day__wx.lg { top: 84px; left: 16px; }
  .booking.lg { padding: 8px 18px 18px; }
  .plot__panel.lg { border-radius: 28px 28px 0 0; }
  .panel__body.lg { left: 12px; right: 12px; bottom: 12px; padding: 18px; gap: 12px; }
  .menu__panel.lg { border-radius: 0; }
}

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */
@keyframes rvUp { from { opacity: 0; transform: translateY(28px); } }
@keyframes rvIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* words rise from under a mask */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
.split .w > * { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 55ms); }
.split.is-in .w > * { transform: none; }
.split .w--pill { overflow: visible; vertical-align: middle; }
.split .w--pill > .pill { transform: scale(.4); opacity: 0; transition: transform 1s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 55ms + 200ms), opacity .6s calc(var(--i, 0) * 55ms + 200ms); }
.split.is-in .w--pill > .pill { transform: translateY(-.06em); opacity: 1; }

/* groups appear one after another */
.rv { opacity: 0; }
.is-in > .rv { opacity: 1; animation: rvUp 1s var(--ease) calc(var(--i, 0) * 85ms) backwards; }
.tile.rv .tile__media img { transform: scale(1.14); transition: opacity .8s var(--ease), transform 1.8s var(--ease) calc(var(--i, 0) * 85ms); }
.is-in > .tile.rv .tile__media img { transform: none; }
.signature { opacity: 0; transform: translateY(16px); transition: opacity 1s .5s, transform 1s var(--ease) .5s; }
.signature.is-in { opacity: 1; transform: none; }

/* eyebrow rules draw in */
.eyebrow::before, .dawn__eyebrow::before, .dawn__eyebrow::after { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .15s; }
.dawn__eyebrow::after { transform-origin: right; }
.eyebrow.is-in::before, .dawn__eyebrow.is-in::before, .dawn__eyebrow.is-in::after { transform: scaleX(1); }
.eyebrow, .dawn__eyebrow { opacity: 0; transition: opacity .9s var(--ease); } .eyebrow.is-in, .dawn__eyebrow.is-in { opacity: 1; }

/* hero intro */
.nav { transition: color .5s, transform .9s var(--ease), opacity .9s; }
body:not(.is-ready) .nav { transform: translateY(-24px); opacity: 0; }
.day__clock, .day__moment { transition: opacity 1.2s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease); }
body:not(.is-ready) .day__clock { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(.98); }
body:not(.is-ready) .day__moment { opacity: 0 !important; filter: blur(8px); }
.day__moment { transition-delay: .25s; }
.day__scene .arc { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease) .5s; }
body.is-ready .day__scene .arc { clip-path: inset(-20px -20px -20px -20px); }
.sun-handle, .sun-lens { transition: opacity 1s .9s; } body:not(.is-ready) .sun-handle, body:not(.is-ready) .sun-lens, body:not(.is-ready) .day__wx { opacity: 0; }
.day__wx { transition: opacity 1s .7s, color .7s; }

/* hover details */
.tile__media img { transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.06); }
.panel__media img { transition: opacity .8s var(--ease), transform 1.6s var(--ease); }
.panel.is-open .panel__media img { transform: scale(1.07); transition: opacity .8s, transform 9s linear; }
.panel:not(.is-open):hover .panel__media img { transform: scale(1.05); }
.panel.is-open .panel__body > * { animation: rvIn .8s var(--ease) backwards; }
.panel.is-open .panel__body > :nth-child(2) { animation-delay: .38s; } .panel.is-open .panel__body > :nth-child(3) { animation-delay: .46s; }
.panel.is-open .panel__body > :nth-child(4) { animation-delay: .54s; } .panel.is-open .panel__body > :nth-child(5) { animation-delay: .62s; }
.panel.is-open .panel__body > :nth-child(6) { animation-delay: .7s; } .panel.is-open .panel__body > :first-child { animation-delay: .3s; }
.btn { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .25s var(--ease); }
.btn:active, .opt:active, .month:active, .chip:active { transform: scale(.97); }
.chip, .month { transition: transform .35s var(--ease), background .3s, color .3s; }
.chip:hover, .month:hover { transform: translateY(-2px); }
.footer__cols a, .nav__links a, .menu__links a { transition: color .3s, opacity .3s; }

/* plot your week: each new question settles in */
.plot__panel > * { animation: rvIn .7s var(--ease) backwards; }
.plot__panel > :nth-child(2) { animation-delay: .06s; } .plot__panel > :nth-child(3) { animation-delay: .12s; }
.plot__panel > :nth-child(4) { animation-delay: .18s; } .plot__panel > :nth-child(5) { animation-delay: .24s; }
.plot__panel > :nth-child(6) { animation-delay: .3s; } .plot__panel > :nth-child(7) { animation-delay: .36s; }
.opts .opt { animation: rvIn .6s var(--ease) backwards; } .opts .opt:nth-child(2) { animation-delay: .28s; } .opts .opt:nth-child(3) { animation-delay: .36s; } .opts .opt:first-child { animation-delay: .2s; }

/* dawn eases back */
.dawn__media > img { transform: scale(calc(1.14 - var(--dk, 0) * .14)) translateY(calc((1 - var(--dk, 0)) * -3%)); transition: opacity .8s; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rv, .eyebrow, .dawn__eyebrow, .signature { opacity: 1 !important; }
  .split .w > * { transform: none !important; } .split .w--pill > .pill { opacity: 1 !important; }
  body:not(.is-ready) .nav, body:not(.is-ready) .day__clock { opacity: 1; filter: none; transform: none; }
}

/* arc chevron: a soft nudge in the direction of travel */
.chev { transition: opacity .5s; } body:not(.is-ready) .chev { opacity: 0 !important; }
.chev__mark { opacity: .75; animation: chevNudge 2.4s var(--ease) infinite; }
@keyframes chevNudge { 0%, 100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(3px); opacity: .9; } }
.stoplbl { transition: opacity .3s, transform .5s var(--ease); }


/* =========================================================
   REVISION · Oct 5 — İlke's Glass card, square corners,
   fleet tiles, hero spacing, buttons that always fit
   ========================================================= */
/* square corners everywhere; only true circles stay round */
*, *::before, *::after { border-radius: 0 !important; }
.sun-lens, .avatar, .opt::after, .chev, .menu__now svg { border-radius: 50% !important; }

/* glass = the Figma "Cards/Glass" component: 15% white, frosted backdrop, deep refraction + dispersion, soft spread shadow */
.lg, .lg--dark, .lg--refract, .booking.lg, .nav.lg[data-theme="dark"], .nav.lg[data-theme="light"], .menu__panel.lg, .panel__body.lg {
  --lg-tint: rgba(255,255,255,.15);
  background: var(--lg-tint) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(1.08);
  backdrop-filter: blur(14px) saturate(150%) brightness(1.08);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.18), 0 24px 70px -10px rgba(25,28,33,.28) !important;
}
.menu__panel.lg { background: rgba(8,22,36,.55) !important; }   /* the drawer needs to read over any page */

/* hero copy sits inside the arc, under its apex */
.day__copy { top: var(--copyTop, 190px); }
.day__clock { font-size: clamp(96px, 9.7vw, 140px); }
.day__moment { font-size: clamp(26px, 2.8vw, 40px); }

/* buttons: inner gap on the right equals top and bottom */
.booking.lg { padding: 12px 12px 12px 40px; align-items: stretch; }
.booking.lg .booking__cell { align-self: center; }
.booking.lg .btn { height: auto; min-height: 64px; align-self: stretch; }
.nav.lg { padding-right: 12px; }
@media (max-width: 1100px) { .booking.lg { padding: 12px; } .booking.lg .btn { min-height: 56px; } .nav.lg { padding-right: 12px; } }

/* manifesto: “the cove” starts its own line on wide screens so the photo pills don't stack */
.br-wide { display: none; } @media (min-width: 1101px) { .br-wide { display: inline; } }

/* fleet tiles: no tags; name top-left, specs bottom-left */
.tile__name { position: absolute; z-index: 2; top: 26px; left: 28px; right: 28px; margin: 0; text-align: left; color: var(--sand-50);
  font: 400 calc(var(--tileH) * .085) / 1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.tile__line { position: absolute; z-index: 2; left: 28px; bottom: 24px; right: 28px; margin: 0; color: var(--sand-50); opacity: .85;
  font: 500 11px/1.3 var(--sans); letter-spacing: .16em; transition: opacity .3s; }
.tile:hover .tile__line, .tile:focus-within .tile__line { opacity: 0; }
.tile__panel { gap: 12px; flex-wrap: nowrap; }
.tile__panel > span { min-width: 0; }
.tile__panel .btn { flex: none; padding: 0 16px; }
@media (max-width: 640px) { .tile__name { font-size: 26px; } }

/* destinations: no fit badges */
.panel__fit { display: none !important; }
.panel__facts b { font-weight: 400; }

/* dawn film */
.dawn__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - var(--dk, 0) * .14)); }
.dawn__media.has-video > img { opacity: 0; }

/* map yacht */
#yacht .wake { transition: opacity .4s; }

/* big glass panels: deeper frost (the card's 80px / 50% blur layer) so text always reads */
.plot__panel.lg, .panel__body.lg, .booking.lg, .tile__panel.lg { -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(1.02); backdrop-filter: blur(40px) saturate(150%) brightness(1.02); }
.plot__panel.lg, .panel__body.lg, .booking.lg, .tile__panel.lg, .day__wx.lg { text-shadow: 0 1px 12px rgba(8,22,36,.35); }
.plot__panel.lg .opt small, .plot__panel.lg .answers small, .plot__panel.lg .plot__actions { color: rgba(246,243,238,.82); }
/* dawn: light glass over a light sky → navy text */
.dawn .booking.lg { color: #0E2236; --accent: var(--azure-500); text-shadow: none; }
.dawn .booking.lg small { color: var(--deep-500); }
.dawn .booking.lg select, .dawn .booking.lg input { color: #0E2236; }
.dawn .booking.lg .booking__cell { border-color: rgba(14,34,54,.14); }
.dawn .booking.lg .btn--accent:hover { background: #0E2236; color: #F6F3EE; }

@media (hover: none) { .tile__line { bottom: auto; top: calc(26px + var(--tileH) * .085 + 12px); } .tile:hover .tile__line { opacity: .85; } }
@media (max-width: 640px) { .tile__line { top: 64px; bottom: auto; } }

/* clear glass: no frost or blur anywhere — 15% white, refraction and dispersion only */
.lg, .lg--dark, .lg--refract, .booking.lg, .nav.lg, .menu__panel.lg, .panel__body.lg, .plot__panel.lg, .tile__panel.lg, .day__wx.lg, .sun-lens {
  -webkit-backdrop-filter: saturate(140%) brightness(1.06); backdrop-filter: saturate(140%) brightness(1.06); }
.menu { backdrop-filter: none !important; } .enquiry::backdrop { backdrop-filter: none; }

/* İlke's Figma pass (Oct 7) */
.avatar { background: url(../assets/manifesto/camille.jpg) center / cover, var(--deep-800) !important; }
.pill, .pill--night { width: 1.65em; height: .7em; }
.day__moment { color: var(--ink); }
.day__sticky.m-dark .day__moment { color: #F6F3EE; text-shadow: 0 1px 18px rgba(8,22,36,.55); }
.day__sticky:not(.m-dark) .day__moment { color: #0E2236; text-shadow: 0 0 30px rgba(255,255,255,.35); }

/* destinations: tinted glass so the copy reads over busy photos (Oct 9) */
.panel__body.lg { --lg-tint: rgba(14,34,54,.58); background: var(--lg-tint) !important; }
.panel__body.lg .panel__facts small, .panel__body.lg .season i { color: rgba(246,243,238,.72); }
.panel__body.lg .panel__line { color: rgba(246,243,238,.9); }