/* ============================================================================
   SEADREAM RENTAL BOATS - GOUVIA, CORFU
   Visual world: "The Quay Board" - Gouvia Marina signage.
   Painted teal ground, gold stencil lettering, hairline quay rules,
   berth-numbered fleet, rental periods set as a real departure board.
   Sharp corners everywhere; the only circles are physical badges (the emblem).
   ========================================================================= */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root {
  /* Ground: drenched deep teal, derived from the SeaDream emblem */
  --deep:       #0B2D38;
  --deep-2:     #0E3542;
  --hull:       #123F4C;
  --hull-2:     #17505E;
  --teal:       #14727D;
  --aqua:       #45BEC4;

  /* The single accent */
  --gold:       #D8992C;
  --gold-br:    #F0BC55;
  --gold-deep:  #A97015;

  /* Painted lettering */
  --chalk:      #EDF1F0;
  --chalk-2:    rgba(237, 241, 240, 0.79);
  --chalk-3:    rgba(237, 241, 240, 0.66);

  /* Quay rules */
  --rule:       rgba(237, 241, 240, 0.16);
  --rule-2:     rgba(237, 241, 240, 0.26);
  --rule-gold:  rgba(216, 153, 44, 0.38);

  --ok:         #4FBF8B;
  --warn:       #E8A13F;

  /* Type */
  --display: "Ysabeau SC", "Ysabeau", ui-serif, Georgia, serif;
  --title:   "Ysabeau", "Ysabeau SC", ui-serif, Georgia, serif;
  --body:    "Commissioner", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --shell: 1280px;
  --gut: clamp(1.125rem, 4.5vw, 3.5rem);
  --sec: clamp(3.25rem, 7vw, 5.75rem);

  /* Depth: offset + soft blur, tinted to the ground hue */
  --lift-1: 0 2px 8px rgba(3, 14, 18, .40);
  --lift-2: 0 14px 40px rgba(3, 14, 18, .55);
  --lift-3: 0 24px 70px rgba(3, 14, 18, .68);

  --ease: cubic-bezier(.16, 1, .3, 1);

  --z-head: 60;
  --z-dock: 70;
  --z-modal: 90;
}

/* ---- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* A class selector outranks the UA [hidden] rule; make hidden mean hidden. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--deep);
  color: var(--chalk);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  font-weight: 380;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.u-skip {
  position: absolute; top: -100vh; left: var(--gut); z-index: 200;
  background: var(--gold); color: var(--deep);
  padding: .75rem 1.25rem; font-weight: 640;
}
.u-skip:focus { top: .75rem; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
#sprite { display: none; }

/* ---- 3. TYPE ------------------------------------------------------------ */
.d1, .d2, .d3, .sec__h, .berth__name, .board__h {
  font-family: var(--title);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.d1 {
  font-size: clamp(2.6rem, 1.55rem + 5.1vw, 5.75rem);
  letter-spacing: -.032em;
  line-height: .98;
}
.sec__h {
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.5rem);
  letter-spacing: -.026em;
  line-height: 1.07;          /* room for descenders on a two-line heading */
  padding-bottom: .06em;
}
.sec__h--sm { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem); }

/* Stencilled quay labels: small caps, cut into the surface */
.stencil {
  font-family: var(--display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-feature-settings: "smcp" 1;
}
.lede {
  font-size: clamp(1.0625rem, 1rem + .34vw, 1.25rem);
  line-height: 1.58;
  color: var(--chalk-2);
  max-width: 46ch;
}
.body-w { max-width: 68ch; color: var(--chalk-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- 4. LAYOUT ---------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(2.75rem, 6vw, 5rem); }
.sec__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.sec__head .lede { margin-top: var(--s4); }
/* More space above a heading than below it, wherever the heading sits */
.sec__h + .lede,
.sec__h + p,
.sec__h + dl,
.sec__h + .loc__facts { margin-top: var(--s5); }
.sec__h--sm + p { margin-top: var(--s4); }

/* A quay hairline: the rule that organises the whole page */
.rule { height: 1px; background: var(--rule); border: 0; }
.rule--gold { background: var(--rule-gold); }

/* ---- 5. BUTTONS --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .625rem;
  min-height: 3.125rem;
  padding: .875rem 1.5rem;
  font-family: var(--display);
  font-weight: 640;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary: gold paint, deep teal lettering. 5.9:1 */
.btn--gold {
  background: var(--gold);
  color: var(--deep);
  box-shadow: var(--lift-1);
}
@media (hover:hover){ .btn--gold:hover { background: var(--gold-br); box-shadow: var(--lift-2); } }

/* Secondary: cut outline in the painted surface */
.btn--line {
  background: transparent;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
@media (hover:hover){ .btn--line:hover { color: var(--gold-br); box-shadow: inset 0 0 0 1px var(--rule-gold); } }

.btn--ghost { background: transparent; color: var(--chalk-2); padding-inline: .75rem; }
@media (hover:hover){ .btn--ghost:hover { color: var(--gold-br); } }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ---- 6. HEADER ---------------------------------------------------------- */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-head);
  height: 4.5rem;
  display: flex; align-items: center;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 45, 56,.86), rgba(11, 45, 56,.34) 62%, rgba(11, 45, 56,0));
  transition: opacity .35s var(--ease);
}
.head.is-stuck {
  background: rgba(11, 45, 56, .93);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}
.head.is-stuck::before { opacity: 0; }
.head__in {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center; gap: var(--s5);
}

.brand { display: flex; align-items: center; gap: .6875rem; margin-right: auto; }
.brand__mark {
  width: 2.375rem; height: 2.375rem; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule-gold);
  object-fit: cover;
}
.brand__name {
  font-family: var(--title);
  font-size: 1.3125rem; font-weight: 640; letter-spacing: -.012em;
  color: var(--chalk);
  line-height: 1;
}
.brand__name b { color: var(--gold); font-weight: inherit; }

.nav { display: flex; align-items: center; gap: clamp(.875rem, 1.5vw, 1.5rem); }
.nav a {
  font-size: .9375rem; font-weight: 500; color: var(--chalk-2);
  position: relative; padding-block: .35rem;
  white-space: nowrap;            /* a two-line nav item is a broken nav */
  transition: color .22s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease);
}
/* The same rule doubles as the position marker: the quay line is drawn under
   whichever section is being read. "location", not "page" - these are in-page
   section links, not a set of pages. */
.nav a[aria-current="location"] { color: var(--chalk); }
.nav a[aria-current="location"]::after { transform: scaleX(1); }
@media (hover:hover){ .nav a:hover { color: var(--chalk); } .nav a:hover::after { transform: scaleX(1); } }

/* Language switch: two cut plates, always visible */
.lang {
  display: flex; align-items: stretch;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  height: 2.25rem;
}
.lang a {
  display: flex; align-items: center; padding: 0 .6875rem;
  font-family: var(--display); font-weight: 640;
  font-size: .8125rem; letter-spacing: .1em;
  color: var(--chalk-3);
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.lang a + a { box-shadow: inset 1px 0 0 var(--rule-2); }
@media (hover:hover){ .lang a:hover { color: var(--chalk); } }
.lang a[aria-current="true"] { background: var(--gold); color: var(--deep); }

.head__cta { display: inline-flex; }
.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.burger .icon { width: 1.375rem; height: 1.375rem; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--deep);
  padding: 5.5rem var(--gut) var(--s7);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .45s var(--ease), visibility .45s;
  visibility: hidden;
  overflow-y: auto;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer a[data-nav] {
  font-family: var(--title);
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em;
  padding-block: .875rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--chalk);
}
.drawer a[data-nav] .icon { color: var(--gold); width: 1rem; height: 1rem; }
.drawer__foot { margin-top: auto; padding-top: var(--s6); display: grid; gap: var(--s3); }
.drawer__close {
  position: absolute; top: 1rem; right: var(--gut);
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--chalk); box-shadow: inset 0 0 0 1px var(--rule-2);
}

/* Greek labels are longer than the English ones, so the header hands over to
   the drawer earlier than a purely English nav would need. */
@media (max-width: 1080px) {
  .nav, .head__cta { display: none; }
  .burger { display: flex; }
}

/* ---- 7. HERO ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: 4.5rem;
  overflow: hidden;
  /* Designed ground: shows instantly, and stays if the video never loads */
  background:
    radial-gradient(120% 88% at 74% 8%, rgba(69,190,196,.24), transparent 62%),
    radial-gradient(90% 70% at 12% 96%, rgba(20, 114, 125,.42), transparent 66%),
    linear-gradient(178deg, #103E4B 0%, #0B2D38 58%, #09272F 100%);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  /* The boat runs along the lower right for the whole clip (x .80 -> .89,
     y .73 -> .79), so the frame is biased right rather than centred. At this
     width only a tenth of the source is cropped, so this is a nudge. */
  object-position: 62% 50%;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__media video.is-live { opacity: 1; }

/* A phone crops a 16:9 frame down to 26% of its width, which would drop the
   boat behind the headline and under the heaviest part of the scrim. So on
   small screens the video keeps a band of its own across the top and
   dissolves into the painted ground exactly where the copy starts: the boat
   stays a clear subject, at full resolution, and the text sits on paint
   rather than on water. */
@media (max-width: 720px) {
  .hero__media { inset: 0 0 38% 0; }
  .hero__media video {
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  }
}

/* Only as much scrim as the contrast needs */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 30, 38,.88) 0%, rgba(6, 30, 38,.56) 30%,
                    rgba(6, 30, 38,.09) 64%, rgba(6, 30, 38,.20) 100%);
}
/* On the wide layout the copy is left aligned and the boat runs along the
   right, so the protection is directional: a soft wash under the text only,
   which leaves the water and the boat at full brightness. */
@media (min-width: 721px) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(6, 30, 38,.58) 0%, rgba(6, 30, 38,.30) 36%,
                      transparent 62%),
      linear-gradient(to top, rgba(6, 30, 38,.86) 0%, rgba(6, 30, 38,.52) 30%,
                      rgba(6, 30, 38,.08) 64%, rgba(6, 30, 38,.18) 100%);
  }
}

/* On a phone the copy sits on the painted ground, not on the video, so the
   scrim only has to keep the header legible over the top of the frame. The
   water is left at its own colour. */
@media (max-width: 720px) {
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(6, 30, 38,.36) 0%,
                                rgba(6, 30, 38,.07) 22%, transparent 46%);
  }
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero__grid { display: grid; gap: var(--s5); max-width: 62rem; }
/* The wake sweeps across the frame during the clip, so the headline carries
   its own soft edge rather than the whole hero carrying a heavier scrim. Same
   device the subline already uses. */
.hero .d1 {
  color: var(--chalk);
  text-shadow: 0 1px 18px rgba(6, 30, 38, .55), 0 0 2px rgba(6, 30, 38, .38);
}
.hero .d1 em {
  font-style: normal; color: var(--gold-br);
  display: block;
}
.hero__sub {
  font-size: clamp(1.0625rem, .98rem + .5vw, 1.3125rem);
  line-height: 1.5; color: var(--chalk);
  max-width: 34ch;
  text-shadow: 0 1px 14px rgba(6, 30, 38,.7);
}
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.hero__acts .btn { min-height: 3.375rem; padding-inline: 1.75rem; }

/* ---- 8. FAST FACTS: the painted quay strip ------------------------------ */
.facts {
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to bottom, rgba(20, 114, 125,.20), transparent);
}
.facts__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts__i {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(.875rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .5rem;
  position: relative;
}
.facts__i + .facts__i { box-shadow: inset 1px 0 0 var(--rule); }
.facts__i .icon { color: var(--gold); width: 1.5rem; height: 1.5rem; }
.facts__t {
  font-family: var(--title); font-weight: 620;
  font-size: clamp(1rem, .93rem + .34vw, 1.25rem);
  letter-spacing: -.014em; line-height: 1.2;
}
.facts__d { font-size: .875rem; color: var(--chalk-3); line-height: 1.45; }
@media (max-width: 760px) {
  .facts__row { grid-template-columns: repeat(2, 1fr); }
  .facts__i:nth-child(odd) { box-shadow: none; }
  .facts__i:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--rule); }
  .facts__i:nth-child(4) { box-shadow: inset 1px 0 0 var(--rule), inset 0 1px 0 var(--rule); }
}

/* ---- 9. WHY: one oversized answer, three beneath ------------------------ */
.why__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.why__lead {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(20, 114, 125,.44), transparent 68%),
    var(--hull);
  box-shadow: inset 0 0 0 1px var(--rule), var(--lift-1);
  position: relative;
}
.why__lead::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--gold);
}
.why__lead .icon { width: 2.25rem; height: 2.25rem; color: var(--gold); }
.why__lead h3 {
  font-family: var(--title); font-weight: 640;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  letter-spacing: -.022em; line-height: 1.1;
  margin: var(--s4) 0 var(--s3);
}
.why__lead p { color: var(--chalk-2); }
.why__list { display: grid; }
.why__i {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}
.why__i:first-child { padding-top: 0; }
.why__i .icon { width: 1.625rem; height: 1.625rem; color: var(--gold); margin-top: .2rem; }
.why__i h3 {
  font-family: var(--title); font-weight: 620; font-size: 1.1875rem;
  letter-spacing: -.014em; margin-bottom: .3125rem;
}
.why__i p { font-size: .9375rem; color: var(--chalk-2); line-height: 1.55; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } }

/* ---- 10. FLEET: berth plates -------------------------------------------- */
.fleet__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.fleet__grid {
  display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.berth {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){ .berth:hover { box-shadow: inset 0 0 0 1px var(--rule-gold), var(--lift-2); transform: translateY(-3px); } }

/* The media slot. Phase 1: a painted berth plate. Later: an image element. */
.berth__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    repeating-linear-gradient(102deg, rgba(237,241,240,.028) 0 2px, transparent 2px 7px),
    radial-gradient(130% 100% at 82% 4%, rgba(69,190,196,.20), transparent 60%),
    linear-gradient(168deg, #16545F 0%, #123F4C 62%, #0D3743 100%);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--rule-gold);
}
.berth__media > img { width: 100%; height: 100%; object-fit: cover; }
/* When a real photo arrives, the plate furniture steps aside automatically */
.berth__media:has(> img) .berth__plate { display: none; }

/* Phase 1 plate: the boat's own transom. Name painted large, port of registry
   beneath it, exactly as it sits on the hull. A photo replaces it wholesale. */
.berth__plate {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: .875rem;
  text-align: center; padding: 1.25rem;
}
.berth__emblem {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  opacity: .85;
  box-shadow: 0 0 0 1px var(--rule-gold);
}
.berth__transom {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.02; letter-spacing: .1em;
  max-width: 100%;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(237, 241, 240, .58);
  user-select: none;
  overflow-wrap: anywhere;
}
.berth__port {
  font-family: var(--display); font-weight: 640;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  padding-top: .6875rem;
  border-top: 1px solid var(--rule-gold);
}

.berth__body { padding: clamp(1.125rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.berth__name {
  font-size: 1.5rem; font-weight: 640; letter-spacing: -.018em;
  color: var(--gold-br);
}
.berth__model { font-size: .875rem; color: var(--chalk-3); margin-top: .1875rem; }
.berth__specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: var(--s4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.berth__spec { padding: .75rem .25rem; text-align: left; }
.berth__spec + .berth__spec { box-shadow: inset 1px 0 0 var(--rule); padding-left: .75rem; }
.berth__spec dt {
  font-family: var(--display); font-size: .6875rem; font-weight: 640;
  letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-3);
}
.berth__spec dd {
  font-family: var(--title); font-size: 1.0625rem; font-weight: 620;
  letter-spacing: -.01em; margin-top: .125rem;
}
.berth__flag {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .8125rem; font-weight: 560; color: var(--gold);
  margin-bottom: var(--s4);
}
.berth__flag .icon { width: 1.0625rem; height: 1.0625rem; }
.berth__acts { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: auto; }
.berth__acts .btn { width: 100%; min-height: 3rem; font-size: .84375rem; padding-inline: 1rem; }

/* Mobile: one boat per row, read top to bottom. No horizontal fleet scrolling. */
@media (max-width: 720px) {
  .fleet__grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .berth__media { aspect-ratio: 16 / 10; }
  .berth__acts .btn { min-height: 3.125rem; font-size: .875rem; }
  .fleet__head { display: block; }
  .fleet__head .btn { margin-top: var(--s5); width: 100%; }
}

/* ---- 11. HOW IT WORKS: the numbered quay rail --------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-block: clamp(1.5rem, 2.8vw, 2.125rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(216, 153, 44, .72);
}
@media (hover:hover){ .step:hover .step__n { color: var(--gold); -webkit-text-stroke-color: transparent; } }
.step h3 {
  font-family: var(--title); font-weight: 620;
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);
  letter-spacing: -.018em;
}
.step p { color: var(--chalk-2); margin-top: .375rem; max-width: 56ch; font-size: .96875rem; }
/* Alternating indent gives the rail a walked rhythm */
.step:nth-child(even) { padding-left: clamp(0rem, 4vw, 3.5rem); }
@media (max-width: 640px) {
  .step { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .step:nth-child(even) { padding-left: 0; }
}

/* ---- 12. THE DEPARTURE BOARD -------------------------------------------- */
.board__wrap {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
}
@media (max-width: 900px) { .board__wrap { grid-template-columns: 1fr; } }

.board {
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(20, 114, 125,.34), transparent 62%),
    #0A2934;
  box-shadow: inset 0 0 0 1px var(--rule-gold), var(--lift-3);
}
.board__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: 1rem clamp(1rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid var(--rule-gold);
}
.board__top .icon { color: var(--gold); width: 1.25rem; height: 1.25rem; }
.board__rows { padding: .5rem clamp(.5rem, 1.6vw, 1rem) clamp(.75rem, 1.6vw, 1rem); }
.board__r {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  padding: clamp(.9375rem, 2vw, 1.25rem) clamp(.5rem, 1.4vw, .875rem);
  border-bottom: 1px solid var(--rule);
}
.board__r:last-child { border-bottom: 0; }
.board__label {
  font-family: var(--title); font-weight: 620;
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  letter-spacing: -.016em;
}
.board__note { font-size: .8125rem; color: var(--chalk-3); margin-top: .1875rem; letter-spacing: 0; }
.board__time {
  font-family: var(--display);
  font-weight: 660;
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  letter-spacing: .04em;
  color: var(--gold-br);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The authored moment: the board resolves like split-flap slats settling */
@media (prefers-reduced-motion: no-preference) {
  .board.is-in .board__r { animation: slat .62s var(--ease) backwards; }
  .board.is-in .board__r:nth-child(1) { animation-delay: .05s; }
  .board.is-in .board__r:nth-child(2) { animation-delay: .16s; }
  .board.is-in .board__r:nth-child(3) { animation-delay: .27s; }
}
@keyframes slat {
  from { opacity: 0; clip-path: inset(0 0 100% 0); filter: blur(5px); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
}

/* Included / extra */
.inc { display: grid; gap: var(--s5); }
.inc__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .625rem var(--s5); }
.inc__list li {
  display: grid; grid-template-columns: auto 1fr; gap: .5625rem;
  align-items: start;
  font-size: .9375rem; color: var(--chalk-2);
  padding-block: .1875rem;
}
.inc__list .icon { width: 1.0625rem; height: 1.0625rem; color: var(--ok); margin-top: .28rem; }
@media (max-width: 560px) { .inc__list { grid-template-columns: 1fr; } }
.fuel {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: clamp(1rem, 2.2vw, 1.375rem);
  background: rgba(232, 161, 63, .09);
  box-shadow: inset 0 0 0 1px rgba(232, 161, 63, .3);
}
.fuel .icon { color: var(--warn); width: 1.375rem; height: 1.375rem; flex: none; margin-top: .15rem; }
.fuel h3 { font-family: var(--title); font-size: 1.125rem; font-weight: 620; letter-spacing: -.014em; }
.fuel p { font-size: .90625rem; color: var(--chalk-2); margin-top: .25rem; }

/* ---- 13. EXPLORE -------------------------------------------------------- */
.explore {
  position: relative;
  background:
    radial-gradient(100% 120% at 88% 12%, rgba(69,190,196,.16), transparent 58%),
    linear-gradient(180deg, var(--deep) 0%, #0F3D49 50%, var(--deep) 100%);
  border-block: 1px solid var(--rule);
}
.explore__grid { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .explore__grid { grid-template-columns: 1fr; } }
.explore__aside {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 0 0 1px var(--rule-gold);
  background: rgba(6, 26, 32, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.explore__aside h3 { font-family: var(--title); font-size: 1.3125rem; font-weight: 620; letter-spacing: -.016em; }
.explore__aside p { color: var(--chalk-2); font-size: .9375rem; margin-top: .625rem; }
.explore__coords {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: grid; gap: .5rem;
  font-size: .875rem; color: var(--chalk-3);
}
.explore__coords b { color: var(--chalk); font-weight: 560; }

/* ---- 14. REVIEWS -------------------------------------------------------- */
.revs { text-align: center; }
.revs__in { max-width: 44rem; margin-inline: auto; }
.revs__stars { display: inline-flex; gap: .3125rem; color: var(--gold); margin-bottom: var(--s5); }
.revs__stars .icon { width: 1.375rem; height: 1.375rem; }
.revs p { color: var(--chalk-2); margin-top: var(--s4); }
.revs__acts { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s6); }

/* ---- 15. LOCATION ------------------------------------------------------- */
.loc__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .loc__grid { grid-template-columns: 1fr; } }
.loc__facts { display: grid; gap: var(--s4); margin: var(--s5) 0; }
.loc__f { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.loc__f .icon { color: var(--gold); width: 1.375rem; height: 1.375rem; margin-top: .15rem; }
.loc__f dt { font-family: var(--display); font-size: .6875rem; font-weight: 640; letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-3); }
.loc__f dd { font-size: 1.0625rem; margin-top: .125rem; }
@media (hover:hover){ .loc__f dd a:hover { color: var(--gold-br); } }
.loc__acts { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* Click-to-load map: nothing reaches Google until the visitor asks for it */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(0deg, rgba(237,241,240,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(237,241,240,.045) 0 1px, transparent 1px 46px),
    radial-gradient(90% 90% at 50% 46%, rgba(20, 114, 125,.5), transparent 70%),
    #0B2D38;
  box-shadow: inset 0 0 0 1px var(--rule-gold);
  display: grid; place-items: center;
  overflow: hidden;
}
@media (max-width: 640px) { .map { aspect-ratio: 1 / 1; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__ask { display: grid; justify-items: center; gap: var(--s4); text-align: center; padding: var(--s5); }
.map__ask .icon { width: 2.5rem; height: 2.5rem; color: var(--gold); }
.map__ask p { font-size: .875rem; color: var(--chalk-3); max-width: 30ch; }

/* ---- 16. FAQ ------------------------------------------------------------ */
.faq { max-width: 54rem; }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__i:first-child { border-top: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); text-align: left;
  padding: clamp(1.125rem, 2.2vw, 1.4375rem) 0;
  font-family: var(--title); font-weight: 620;
  font-size: clamp(1.0625rem, .98rem + .42vw, 1.25rem);
  letter-spacing: -.014em;
  color: var(--chalk);
  transition: color .22s var(--ease);
  min-height: 3.25rem;
}
@media (hover:hover){ .faq__q:hover { color: var(--gold-br); } }
.faq__q .icon {
  color: var(--gold); width: 1.25rem; height: 1.25rem;
  transition: rotate .32s var(--ease);
}
.faq__q[aria-expanded="true"] .icon { rotate: 180deg; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--chalk-2); padding-bottom: var(--s5); max-width: 62ch; font-size: .96875rem; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* ---- 17. CLOSE + FOOTER ------------------------------------------------- */
.close-cta {
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(20, 114, 125,.5), transparent 66%),
    linear-gradient(180deg, #0F3D49, var(--deep));
  border-top: 1px solid var(--rule-gold);
}
.close-cta__in { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--s5); justify-items: center; }
.close-cta .lede { max-width: 40ch; }
.close-cta__acts { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.close-cta__acts .btn { min-height: 3.375rem; padding-inline: 1.75rem; }

.foot { border-top: 1px solid var(--rule); padding-block: var(--s7) var(--s6); font-size: .90625rem; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__brand p { color: var(--chalk-3); margin-top: var(--s4); max-width: 34ch; }
.foot h2 {
  font-family: var(--display); font-size: .6875rem; font-weight: 640;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--s4);
}
.foot li + li { margin-top: .625rem; }
.foot a { color: var(--chalk-2); }
@media (hover:hover){ .foot a:hover { color: var(--gold-br); } }
.foot__base {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  color: var(--chalk-3); font-size: .84375rem;
}

/* ---- 18. FLOATING CONTACT CONTROL: the SeaDream badge ------------------- */
/* The brand emblem itself is the trigger. Circles here are physical badges,
   not a corner-radius choice; every other surface on the page stays cut. */
.dock {
  position: fixed;
  right: clamp(.875rem, 2.4vw, 1.5rem);
  bottom: clamp(.875rem, 2.4vw, 1.5rem);
  z-index: var(--z-dock);
  display: grid; justify-items: end; gap: .625rem;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.is-locked .dock { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); }

.dock__acts { display: grid; justify-items: end; gap: .5625rem; }
.dock__a {
  display: flex; align-items: center; gap: .625rem;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.85);
  transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
}
.dock.is-open .dock__a { opacity: 1; visibility: visible; transform: none; }
.dock.is-open .dock__a:nth-child(1) { transition-delay: .16s; }
.dock.is-open .dock__a:nth-child(2) { transition-delay: .11s; }
.dock.is-open .dock__a:nth-child(3) { transition-delay: .06s; }
.dock.is-open .dock__a:nth-child(4) { transition-delay: .01s; }
@media (prefers-reduced-motion: reduce) {
  .dock__a { transition: opacity .01s, visibility .01s; transform: none; }
}

.dock__label {
  background: var(--deep);
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--rule-2), var(--lift-1);
  padding: .4375rem .75rem;
  font-family: var(--display); font-weight: 640;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.dock__btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chalk); color: var(--deep);
  box-shadow: var(--lift-2);
  transition: background-color .22s var(--ease), color .22s var(--ease), transform .16s var(--ease);
}
@media (hover:hover){ .dock__btn:hover { background: var(--gold); transform: scale(1.06); } }
.dock__btn:active { transform: scale(.96); }
.dock__btn .icon { width: 1.375rem; height: 1.375rem; }

/* The trigger: the emblem under a light ring so it holds over video,
   over aqua sections and over the deep ground alike */
.dock__trigger {
  position: relative;
  width: 3.875rem; height: 3.875rem;
  border-radius: 50%;
  padding: 3px;
  background: var(--chalk);
  box-shadow: var(--lift-3), 0 0 0 1px rgba(11, 45, 56,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dock__trigger img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (hover:hover){ .dock__trigger:hover { transform: scale(1.05); } }
.dock__trigger::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity .3s var(--ease), inset .3s var(--ease);
}
.dock.is-open .dock__trigger::after { opacity: 1; inset: -9px; }
.dock__x {
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--deep); color: var(--gold);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}
.dock.is-open .dock__x { opacity: 1; visibility: visible; }
.dock__x .icon { width: 1.5rem; height: 1.5rem; }

/* ---- 19. DIALOGS -------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: end center;
  visibility: hidden;
}
.sheet.is-open { visibility: visible; }
.sheet__veil {
  position: absolute; inset: 0;
  background: rgba(3, 13, 17, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .34s var(--ease);
}
.sheet.is-open .sheet__veil { opacity: 1; }
.sheet__panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: min(92svh, 56rem);
  display: flex; flex-direction: column;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px var(--rule-gold), var(--lift-3);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .42s var(--ease), opacity .34s var(--ease);
}
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }
@media (min-width: 720px) { .sheet { place-items: center; } }
@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__veil { transition: none; }
  .sheet__panel { transform: none; }
}

.sheet__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: clamp(1rem, 2.2vw, 1.375rem) clamp(1.125rem, 2.6vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  flex: none;
}
.sheet__title { font-family: var(--title); font-size: 1.375rem; font-weight: 640; letter-spacing: -.018em; }
.sheet__x {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  color: var(--chalk-2);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover:hover){ .sheet__x:hover { color: var(--gold-br); box-shadow: inset 0 0 0 1px var(--rule-gold); } }
.sheet__body { padding: clamp(1.125rem, 2.6vw, 1.75rem); overflow-y: auto; flex: 1; }
.sheet__foot {
  padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1.125rem, 2.6vw, 1.75rem);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s3);
  flex: none;
  background: rgba(6, 26, 32, .5);
}
.sheet__foot .btn--gold { margin-left: auto; }

/* Boat detail */
.bd__media {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(102deg, rgba(237,241,240,.028) 0 2px, transparent 2px 7px),
    radial-gradient(130% 100% at 82% 4%, rgba(69,190,196,.20), transparent 60%),
    linear-gradient(168deg, #16545F 0%, #123F4C 62%, #0D3743 100%);
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 1px var(--rule);
  margin-bottom: var(--s5);
}
.bd__media > img { width: 100%; height: 100%; object-fit: cover; }
.bd__specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.bd__specs > div {
  padding: .875rem .25rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline;
}
.bd__specs > div:nth-child(odd) { padding-right: var(--s5); }
.bd__specs > div:nth-child(even) { padding-left: var(--s5); box-shadow: inset 1px 0 0 var(--rule); }
@media (max-width: 560px) {
  .bd__specs { grid-template-columns: 1fr; }
  .bd__specs > div:nth-child(even) { padding-left: .25rem; box-shadow: none; }
  .bd__specs > div:nth-child(odd) { padding-right: .25rem; }
}
.bd__specs dt { font-family: var(--display); font-size: .6875rem; font-weight: 640; letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-3); }
.bd__specs dd { font-family: var(--title); font-size: 1.0625rem; font-weight: 620; }

/* ---- 20. BOOKING WIZARD ------------------------------------------------- */
.wiz__track { height: 2px; background: var(--rule); flex: none; }
.wiz__bar {
  height: 100%; background: var(--gold);
  width: 100%; transform: scaleX(0); transform-origin: left center;
  transition: transform .42s var(--ease);
}
.wiz__step { display: none; }
.wiz__step.is-on { display: block; animation: stepIn .34s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz__step.is-on { animation: none; } }

.wiz__q {
  font-family: var(--title); font-weight: 640;
  font-size: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  letter-spacing: -.02em; line-height: 1.14;
  margin-bottom: .5rem;
}
.wiz__hint { color: var(--chalk-3); font-size: .90625rem; margin-bottom: var(--s5); }

.opt { display: grid; gap: .625rem; }
.opt__i {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left;
  padding: clamp(.875rem, 2vw, 1.125rem);
  min-height: 3.5rem;
  background: rgba(11, 45, 56,.5);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .22s var(--ease), background-color .22s var(--ease);
}
@media (hover:hover){ .opt__i:hover { box-shadow: inset 0 0 0 1px var(--rule-2); background: rgba(20, 114, 125,.22); } }
.opt__i[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--gold);
  background: rgba(216,153,44,.11);
}
/* The tick is the only confirmation that an option was chosen, so it arrives
   rather than cross-fading. A transition, not keyframes, so tapping quickly
   through the options retargets instead of restarting. */
.opt__tick {
  margin-left: auto; color: var(--gold);
  opacity: 0; transform: scale(.72);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.opt__i[aria-pressed="true"] .opt__tick { opacity: 1; transform: none; }
.opt__i > span:first-child { display: block; min-width: 0; }
.opt__main {
  display: block;
  font-family: var(--title); font-weight: 620; font-size: 1.0625rem;
  letter-spacing: -.012em; line-height: 1.2;
}
.opt__sub {
  display: block;
  font-size: .84375rem; color: var(--chalk-3); margin-top: .125rem; line-height: 1.35;
}
.opt__time {
  font-family: var(--display); font-weight: 660; font-size: 1.0625rem;
  letter-spacing: .04em; color: var(--gold-br);
  font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap;
}
.opt__i[aria-pressed="true"] .opt__time + .opt__tick { margin-left: .75rem; }

.field { display: grid; gap: .4375rem; }
.field + .field { margin-top: var(--s5); }
.field label {
  font-family: var(--display); font-size: .75rem; font-weight: 640;
  letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-2);
}
.field input, .field textarea {
  width: 100%;
  padding: .875rem 1rem;
  min-height: 3.25rem;
  background: rgba(11, 45, 56,.6);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  color: var(--chalk);
  border-radius: 0;
  transition: box-shadow .22s var(--ease);
  font-size: 1rem; /* 16px: stops iOS zooming the page on focus */
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.55; padding-top: .75rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(237,241,240,.46); }
.field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.field__help { font-size: .8125rem; color: var(--chalk-3); }
.field__err { font-size: .84375rem; color: #FF9A8A; display: none; }
.field.is-bad input, .field.is-bad textarea { box-shadow: inset 0 0 0 2px #FF9A8A; }
.field.is-bad .field__err { display: block; }
/* One date control only: the native picker, no second custom icon */
.field input[type="date"] { position: relative; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(46%) saturate(720%) hue-rotate(348deg) brightness(94%);
  cursor: pointer; opacity: 1;
}

/* Stepper */
.count { display: flex; align-items: center; gap: var(--s4); }
.count__b {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  font-family: var(--title); font-size: 1.5rem; font-weight: 620; line-height: 1;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: box-shadow .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.count__b:active:not([disabled]) { transform: scale(.94); }
@media (hover:hover){ .count__b:hover:not([disabled]) { color: var(--gold); box-shadow: inset 0 0 0 1px var(--rule-gold); } }
.count__b[disabled] { opacity: .3; cursor: not-allowed; }
.count__v {
  font-family: var(--title); font-size: 2rem; font-weight: 640;
  min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums;
}
.count__cap { font-size: .84375rem; color: var(--chalk-3); }

/* Review step */
.recap { border-top: 1px solid var(--rule); margin-bottom: var(--s5); }
.recap__r {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: var(--s4);
  padding: .625rem .25rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (max-width: 520px) { .recap__r { grid-template-columns: 6.5rem 1fr; gap: .875rem; } }
.recap__k { font-family: var(--display); font-size: .6875rem; font-weight: 640; letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-3); }
.recap__v { font-family: var(--title); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.notice {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: clamp(.875rem, 2vw, 1.125rem);
  background: rgba(69,190,196,.09);
  box-shadow: inset 0 0 0 1px rgba(69,190,196,.28);
  font-size: .90625rem; color: var(--chalk-2);
}
.notice .icon { color: var(--aqua); width: 1.25rem; height: 1.25rem; flex: none; margin-top: .18rem; }

/* ---- 21. SCROLL REVEAL (one shared, quiet entrance) --------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-rise] { opacity: 0; transform: translateY(18px); }
  [data-rise].is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
}

/* ---- 22. SMALL SCREENS -------------------------------------------------- */
@media (max-width: 520px) {
  .hero__acts { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__acts .btn { width: 100%; }
  .close-cta__acts { display: grid; grid-template-columns: 1fr; width: 100%; }
  .close-cta__acts .btn { width: 100%; }
  .loc__acts .btn, .revs__acts .btn { flex: 1 1 100%; }
  .sheet__foot { flex-wrap: wrap; }
  .sheet__foot .btn--gold { margin-left: 0; width: 100%; order: -1; }
}


/* ---- 23. OVERFLOW GUARDS ------------------------------------------------ */
/* Flex and grid children default to min-width:auto, which lets a long word or
   a max-width paragraph push a row wider than the phone. */
.fleet__head > *,
.why__i > *,
.step > *,
.loc__f > *,
.inc__list li > *,
.board__r > *,
.opt__i > *,
.recap__r > * { min-width: 0; }
.berth__spec dd, .berth__name, .board__label, .recap__v { overflow-wrap: break-word; }

/* Language switch repeated at the foot of the mobile drawer */
.lang--drawer { height: 3rem; }
.lang--drawer a { flex: 1; justify-content: center; font-size: .875rem; letter-spacing: .06em; }

/* ============================================================================
   PASS 2 - inline calendar, motion system, mobile refinement, reviews rail
   ========================================================================= */

/* ---- 24. BRANDED INLINE CALENDAR ---------------------------------------- */
/* The native input stays in the DOM as the source of truth, but never shows
   its own OS picker. */
.cal__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0; pointer-events: none;
  clip-path: inset(50%);
  -webkit-appearance: none; appearance: none;
}
.cal__native::-webkit-calendar-picker-indicator { display: none; }

.cal {
  background: rgba(11, 45, 56, .55);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .24s var(--ease);
}
.cal.is-bad { box-shadow: inset 0 0 0 2px #FF9A8A; }

.cal__top {
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .5rem;
  border-bottom: 1px solid var(--rule-gold);
}
.cal__month {
  flex: 1; text-align: center;
  font-family: var(--title); font-weight: 640;
  font-size: 1rem; letter-spacing: -.012em;
  text-transform: capitalize;
}
.cal__nav {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  color: var(--chalk-2);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
}
@media (hover:hover){ .cal__nav:hover:not([disabled]) { color: var(--gold-br); box-shadow: inset 0 0 0 1px var(--rule-gold); } }
.cal__nav:active:not([disabled]) { transform: scale(.94); }
.cal__nav[disabled] { opacity: .26; cursor: not-allowed; }
.cal__nav--prev .icon { rotate: 180deg; }

.cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); padding: .5rem .5rem .1875rem; }
.cal__dows span {
  text-align: center;
  font-family: var(--display); font-weight: 640;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chalk-3);
}

.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding: 0 .5rem .5rem;
}
.cal__d {
  height: 2.5rem;
  display: grid; place-items: center;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
  border-radius: 0;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              box-shadow .18s var(--ease), transform .12s var(--ease);
}
@media (hover:hover){ .cal__d:hover:not([disabled]) { background: rgba(20, 114, 125, .5); } }
.cal__d:active:not([disabled]) { transform: scale(.92); }
.cal__d[disabled] { color: rgba(237, 241, 240, .2); cursor: not-allowed; }
/* Today reads as a cut outline; selected is filled gold. Distinct states. */
.cal__d[data-today][aria-pressed="false"] { box-shadow: inset 0 0 0 1px var(--rule-gold); color: var(--gold-br); }
.cal__d[aria-pressed="true"] {
  background: var(--gold); color: var(--deep);
  font-weight: 640;
  box-shadow: none;
}
.cal__foot {
  padding: .5625rem .875rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--chalk-3);
  text-align: center;
}
.cal__foot.is-set { color: var(--gold-br); font-weight: 560; }

@media (prefers-reduced-motion: no-preference) {
  .cal__grid.is-turn { animation: calTurn .3s var(--ease); }
}
@keyframes calTurn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 25. MOTION SYSTEM --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* One restrained hero entrance. The video is the movement here. */
  .hero__grid > * {
    opacity: 0;
    transform: translateY(14px);
    animation: heroIn .85s var(--ease) forwards;
  }
  .hero__grid > *:nth-child(1) { animation-delay: .12s; }
  .hero__grid > *:nth-child(2) { animation-delay: .24s; }
  .hero__grid > *:nth-child(3) { animation-delay: .36s; }

  /* Stagger only where sequence aids comprehension */
  .fleet__grid > [data-rise]:nth-child(2) { transition-delay: .08s; }
  .fleet__grid > [data-rise]:nth-child(3) { transition-delay: .16s; }
  .steps > [data-rise]:nth-child(2) { transition-delay: .06s; }
  .steps > [data-rise]:nth-child(3) { transition-delay: .12s; }
  .steps > [data-rise]:nth-child(4) { transition-delay: .18s; }
  .steps > [data-rise]:nth-child(5) { transition-delay: .24s; }
  .why__list > [data-rise]:nth-child(2) { transition-delay: .07s; }
  .why__list > [data-rise]:nth-child(3) { transition-delay: .14s; }

  /* Directional step change in the wizard */
  .wiz__step.is-on.from-next { animation: stepNext .34s var(--ease); }
  .wiz__step.is-on.from-prev { animation: stepPrev .34s var(--ease); }
}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes stepNext { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes stepPrev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Touch and pointer feedback on the boats */
.berth { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.berth:active { transform: scale(.995); }

/* The emblem trigger acknowledges the press */
.dock__trigger:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .hero__grid > * { opacity: 1; transform: none; animation: none; }
  .wiz__step.is-on { animation: none; }
  .cal__grid.is-turn { animation: none; }
  .berth:active, .dock__trigger:active, .cal__d:active,
  .cal__nav:active, .count__b:active { transform: none; }
  /* The marker still moves between nav items, it just does not wipe. */
  .nav a::after { transition: none; }
  /* Fading is not vestibular, and the tick is the only confirmation there is,
     so opacity is kept and only the scale is dropped. */
  .opt__tick { transition: opacity .2s var(--ease); transform: none; }
}

/* ---- 26. REVIEWS RAIL ---------------------------------------------------- */
/* Contained carousel. Auto-drifts on capable devices, yields to the reader on
   any interaction, and never widens the page. */
.revs { text-align: left; }
.revs__head { text-align: center; max-width: 44rem; margin-inline: auto; }
.revs__head p { color: var(--chalk-2); margin-top: var(--s4); }

.revs__rail {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.revs__rail::-webkit-scrollbar { display: none; }
.revs__track {
  display: flex;
  gap: clamp(.875rem, 2vw, 1.25rem);
  width: max-content;
  padding-bottom: .25rem;
}
.rev {
  flex: 0 0 auto;
  width: min(23rem, 82vw);
  display: flex; flex-direction: column;
  padding: clamp(1.125rem, 2.4vw, 1.5rem);
  background: var(--hull);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .3s var(--ease);
}
@media (hover:hover){ .rev:hover { box-shadow: inset 0 0 0 1px var(--rule-gold); } }
.rev__quote {
  font-size: .9375rem; line-height: 1.62; color: var(--chalk-2);
  overflow-wrap: break-word;
}
.rev__who {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: .75rem;
}
.rev__initial {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-items: center;
  font-family: var(--title); font-weight: 640; font-size: 1rem;
  color: var(--gold-br);
  box-shadow: inset 0 0 0 1px var(--rule-gold);
}
.rev__name { font-family: var(--title); font-weight: 620; font-size: 1rem; letter-spacing: -.01em; }
.revs__src { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; justify-content: center; }

@media (max-width: 720px) {
  .rev { width: min(20rem, 84vw); }
}

/* ---- 27. MOBILE REFINEMENT ---------------------------------------------- */
@media (max-width: 560px) {
  /* Sections breathe without leaving craters on a phone */
  :root { --sec: clamp(2.75rem, 11vw, 3.5rem); }

  .hero__sub { max-width: none; }

  /* Desktop-sized panel padding reads as wasted space at 390px */
  .why__lead { padding: 1.25rem; }
  .explore__aside { padding: 1.25rem; }
  .board__rows { padding: .25rem .25rem .5rem; }
  .board__r { padding: .875rem .625rem; }

  /* The board time was competing with its own label for the row */
  .board__r { grid-template-columns: 1fr; gap: .375rem; }
  .board__time { justify-self: start; }

  .loc__acts { display: grid; grid-template-columns: 1fr; }
  .loc__acts .btn { width: 100%; }
  .revs__acts .btn, .revs__src .btn { width: 100%; }

  .sheet__body { padding: 1.125rem; }
  .sheet__top { padding: .875rem 1.125rem; }
  .sheet__foot { padding: .875rem 1.125rem; }

  /* Long Greek labels must not force a button wider than the phone */
  .btn { font-size: .84375rem; letter-spacing: .07em; }
  .hero__acts .btn, .close-cta__acts .btn { font-size: .875rem; }
}

/* The floating trigger must never sit on top of a card action */
@media (max-width: 720px) {
  .dock { right: .875rem; bottom: .875rem; }
  .dock__trigger { width: 3.5rem; height: 3.5rem; }
  .fleet__grid { padding-bottom: 4.5rem; }
}

/* Modal must never grow taller than the phone can show */
@media (max-height: 720px) {
  .sheet__panel { max-height: 94svh; }
  .cal__d { min-height: 2.375rem; }
}


/* ---- 28. HEADER SCROLL PROGRESS ----------------------------------------- */
/* A gold quay line that fills as the page is read. Driven by the CSS
   scroll timeline where it exists, and by one passive rAF-batched listener
   everywhere else. Compositor-only: it never animates layout. */
.head__prog {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-br));
  transform: scaleX(var(--prog, 0));
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .head__prog {
      animation: headProg linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes headProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ---- 29. COMPACT CALENDAR ON SHORT SCREENS ------------------------------ */
/* The whole visible month has to clear the fold alongside Back and Continue,
   so the date step trims its lead-in and the cells lose a little height. */
.wiz__step .cal { margin-top: .25rem; }

@media (max-width: 480px) {
  .cal__d { height: 2.375rem; font-size: .90625rem; }
  .cal__grid { gap: 2px; padding: 0 .4375rem .4375rem; }
  .cal__dows { padding: .4375rem .4375rem .125rem; }
}
@media (max-height: 760px) {
  .cal__d { height: 2.25rem; }
  .cal__foot { padding: .5rem .875rem; }
  .wiz__q { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: .25rem; }
  .wiz__hint { margin-bottom: .75rem; font-size: .875rem; }
  .sheet__body { padding-block: .875rem; }
  .wiz__step .cal { margin-top: 0; }
}