/* ==========================================================================
   Capitano Paleokastritsa — Rent a Boat & Private Tours
   Shared stylesheet for index.html (EN) and el/index.html (EL)

   Design concept: "Limestone and water".
   Paleokastritsa is white limestone cliffs dropping into deep water, so the
   page alternates cream (limestone) and navy (water) full-bleed bands.
   The signature element is the Alipa GPS coordinate, integrated into a
   nautical chart scale-bar that recurs as the section divider.

   The site sells two things, and the layout says so twice: a two-cell choice
   in the hero, and a two-panel "Choose your experience" block below it.
   Self-drive always reads first, skipper second, in every pairing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — fixed by CAPITANO.md */
  --color-navy:      #0C2C3E;
  --color-teal:      #1A8A7A;
  --color-teal-dark: #0F5C50;
  --color-gold:      #E8C84A;
  --color-cream:     #F7F3EC;
  --color-white:     #FFFFFF;
  --color-text:      #1A1A1A;
  --color-muted:     #5A6A72;

  /* WhatsApp brand green. Label is navy, not white: white on #25D366 is
     ~2.0:1 and fails WCAG AA. Navy on #25D366 is ~7.1:1 and passes. */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1EBE5A;

  /* Derived surface tokens */
  --surface-limestone: var(--color-cream);
  --surface-water:     var(--color-navy);
  --surface-card:      var(--color-white);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 7.5vw, 3.5rem);   /* 40 -> 56 */
  --fs-h2:      clamp(1.75rem, 5vw, 2.25rem);   /* 28 -> 36 */
  --fs-h3:      1.375rem;                        /* 22 */
  --fs-body:    1rem;                            /* 16 */
  --fs-small:   0.9375rem;                       /* 15 */
  --fs-caption: 0.8125rem;                       /* 13 */
  --fs-gps:     0.6875rem;                       /* 11 */

  --lh-tight: 1.08;
  --lh-body:  1.7;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;

  /* Radius */
  --radius-card:  12px;
  --radius-btn:   8px;
  --radius-badge: 6px;

  /* Layout */
  --container:    1180px;
  --container-nr: 900px;          /* narrow measure for prose */
  --header-h:     68px;
  --gutter:       var(--space-sm);

  /* Effects */
  --shadow-card:   0 1px 2px rgba(12, 44, 62, .06), 0 8px 24px rgba(12, 44, 62, .07);
  --shadow-raised: 0 2px 4px rgba(12, 44, 62, .08), 0 16px 40px rgba(12, 44, 62, .12);
  --shadow-header: 0 1px 0 rgba(12, 44, 62, .08), 0 6px 20px rgba(12, 44, 62, .07);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Contextual — remapped inside .band--water */
  --fg:        var(--color-text);
  --fg-muted:  var(--color-muted);
  --fg-accent: var(--color-teal-dark);
  --rule:      rgba(26, 138, 122, .45);

  /* Focus indicator must clear 3:1 against the surface behind it (WCAG 1.4.11).
     Gold on cream is ~1.7:1 and fails, so light surfaces take navy (~13:1) and
     dark surfaces take gold (~9:1). Never one colour for both. */
  --focus: var(--color-navy);

  /* Vertical padding every .band carries. Held as a token because the anchor
     offset has to subtract exactly this value — if the two drift apart, every
     nav link lands wrong. --band-pad is raised at 768px alongside --header-h. */
  --band-pad: var(--space-lg);

  /* Clear space an anchored target should leave under the fixed header. */
  --header-offset: calc(var(--header-h) + var(--space-md));
}

@media (min-width: 768px) {
  :root {
    --gutter:   var(--space-md);
    --header-h: 80px;
    --band-pad: var(--space-xl);
  }
}

/* Below ~400px the 40px hero floor is wider than the gutter allows for a
   single long word — «Παλαιοκαστρίτσα» clipped at 320px. Lower the floor
   rather than break the word. The curve meets the base one exactly at 400px,
   so there is no jump. */
@media (max-width: 400px) {
  :root { --fs-hero: clamp(1.9rem, 10vw, 2.5rem); }
}

/* Playfair Display ships no Greek glyphs — Greek headings would silently fall
   back to Georgia. The EL page loads Literata (which covers Greek) and takes
   over the display role, so Greek headings keep a serif voice that matches the
   English page in weight and colour. The "Capitano" wordmark is Latin, so it
   stays in Playfair on both languages for brand consistency. */
html:lang(el) { --font-display: 'Literata', Georgia, serif; }
html:lang(el) .wordmark { font-family: 'Playfair Display', Georgia, serif; }

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The UA's [hidden] rule is display:none at almost no specificity, so any
   class that sets display beats it. .field is display:grid — which is exactly
   how the conditional boat and tour fields stayed on screen while carrying
   the hidden attribute. Settle it once, here, rather than per component. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* One header-offset strategy, part 1 of 2. --header-offset is the clear space
     we want above whatever an anchor lands on. Part 2 is the scroll-margin rule
     on .band[id], which cancels the band's own top padding — see section 4. */
  scroll-padding-top: var(--header-offset);
}

body {
  margin: 0;
  background: var(--surface-limestone);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Applied and removed only by the scrollLock helper in main.js — never set a
   second writer on this class. position:fixed is what actually holds iOS
   Safari still; overflow:hidden alone does not. main.js pins body.top to the
   current offset and restores it on release, so the page does not jump. */
body.is-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--lh-tight); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--fg-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, textarea, select { font: inherit; color: inherit; }

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

/* Dark surfaces flip the ring to gold. The desktop navbar is cream, so only
   the opened mobile overlay qualifies. */
.hero,
.band--water,
.site-footer,
.nav.is-open { --focus: var(--color-gold); }

::selection { background: var(--color-gold); color: var(--color-navy); }

/* Icon sprite host — present in the DOM, never rendered. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Skip link — first focusable element in the document
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-sm);
  z-index: 200;
  transform: translateY(-120%);
  padding: 14px 22px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-nr); }

.band {
  position: relative;
  padding-block: var(--band-pad);
  background: var(--surface-limestone);
  color: var(--color-text);
}

/* One header-offset strategy, part 2 of 2.
   scroll-padding-top alone parks the section's BORDER box under the header —
   but every band then adds its own --band-pad of breathing room on top of that,
   so the eyebrow landed ~160px (mobile) to ~190px (desktop) down the viewport
   and the heading looked stranded. Cancelling the band's own padding here means
   the two offsets sum to exactly --space-md of clear space above the first
   visible thing in the section, at every width. Negative on purpose. */
.band[id] { scroll-margin-top: calc(-1 * var(--band-pad)); }

/* Water bands invert the contextual colour tokens. */
.band--water {
  --fg:        var(--color-white);
  --fg-muted:  rgba(255, 255, 255, .74);
  --fg-accent: var(--color-gold);
  --rule:      rgba(232, 200, 74, .5);
  background: var(--surface-water);
  color: var(--color-white);
}

.band--tint { background: #F1ECE2; }

/* Photographic water bands.
   The photograph sits under a flat navy scrim rather than a gradient: white
   body copy runs the full width of these sections, so every part of the
   surface has to hold contrast, not just the top or one side. At .84 the
   measured ratio against the brightest pixel in either photo stays above 7:1,
   comfortably past the 4.5:1 floor, and the image still reads as water.
   Decorative — the sections' meaning is entirely in their text. */
.band--water.experience,
.band--water.tours {
  background-color: var(--surface-water);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.band--water.experience {
  background-image:
    linear-gradient(rgba(12, 44, 62, .84), rgba(12, 44, 62, .84)),
    url("../images/experience-bg.webp");
}

.band--water.tours {
  background-image:
    linear-gradient(rgba(12, 44, 62, .84), rgba(12, 44, 62, .84)),
    url("../images/tours-bg.webp");
}

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Greek loses its accents in all-caps, so the EL pages set eyebrows in
   sentence case instead. See greek-ui-copy. */
:lang(el) .eyebrow { text-transform: none; letter-spacing: .08em; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--fg);
  max-width: 20ch;
  overflow-wrap: break-word;
}
.band--water .section-title { color: var(--color-white); }

.section-lede {
  margin-top: var(--space-sm);
  max-width: 58ch;
  color: var(--fg-muted);
  font-size: 1.0625rem;
}

.section-head { margin-bottom: var(--space-md); }
@media (min-width: 768px) {
  .section-head { margin-bottom: var(--space-lg); }
}

/* The chart scale-bar: hairline plus tick marks, borrowed from the margin
   of a nautical chart. Recurs as the structural divider of the page. */
.chart-rule {
  position: relative;
  height: 9px;
  margin-bottom: var(--space-md);
}
.chart-rule::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
}
.chart-rule::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right, var(--rule) 0 1px, transparent 1px 14px
  );
}
.chart-rule--short { max-width: 132px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn__icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
.btn__icon--arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Primary — WhatsApp. Green means WhatsApp everywhere on this site; an
   in-page scroll never wears it. */
.btn--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-navy);
  border-color: var(--color-whatsapp);
}
.btn--whatsapp:hover {
  background: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  color: var(--color-navy);
}

/* Secondary — outline */
.btn--outline {
  background: transparent;
  color: var(--color-teal-dark);
  border-color: var(--color-teal);
}
.btn--outline:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}
.band--water .btn--outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, .5);
}
.band--water .btn--outline:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

/* Ghost — for buttons sitting directly on photography */
/* Solid light button for a PRIMARY action on a dark band that does not open
   WhatsApp. On this site green means "this opens WhatsApp", so a scroll-to
   CTA cannot wear it — but it still has to outrank the outlined secondary
   next to it. White fill on navy does that without borrowing the green. */
.btn--invert {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}
.btn--invert:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.btn--ghost {
  background: rgba(12, 44, 62, .35);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, .7);
}
.btn--ghost:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; padding: 18px 34px; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(247, 243, 236, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  background: rgba(247, 243, 236, .97);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--color-teal-dark); }

/* Everything that stays in the top bar at every width. The nav collapses into
   the hamburger below 900px; these do not. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.nav { display: flex; align-items: center; gap: var(--space-md); }

.nav__list { display: flex; align-items: center; gap: var(--space-xs); }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover { color: var(--color-teal-dark); border-bottom-color: var(--color-teal); }

.nav__link--cta {
  padding: 0 18px;
  min-height: 44px;
  border: 2px solid var(--color-teal);
  border-radius: var(--radius-btn);
  color: var(--color-teal-dark);
  font-weight: 600;
}
.nav__link--cta:hover {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

/* Greek nav labels run longer — pull the gutters in so five items still fit
   the desktop bar without wrapping. */
html:lang(el) .nav__link { padding: 0 7px; }
html:lang(el) .nav { gap: var(--space-sm); }

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(12, 44, 62, .22);
  border-radius: var(--radius-badge);
  color: var(--color-navy);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.lang-switch:hover { background: var(--color-white); border-color: var(--color-teal); }

/* Real flag images, not emoji — emoji flags render as two-letter boxes on
   Windows and as wildly different artwork per platform. Fixed 24x16 box with
   cover: the two files ship at different ratios (2:1 UK, 1.67:1 GR), so
   without cover one of them would letterbox. The 1px inset ring keeps the
   white in both flags from dissolving into a light navbar. */
.lang-switch__flag {
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(12, 44, 62, .18);
}

/* Hamburger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(12, 44, 62, .22);
  border-radius: var(--radius-badge);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 2px; background: var(--color-navy); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: var(--color-navy);
  transition: transform .22s var(--ease), top .22s var(--ease), bottom .22s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { bottom: -6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { bottom: 0; transform: rotate(-45deg); }

/* Mobile: full-screen overlay navigation */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  /* Full-screen navigation layer.
     justify-content is flex-start, NOT center. Centred flex content inside a
     scroll box overflows equally in both directions, and you cannot scroll
     past the top of a scroll container — so on a short viewport the first
     links became physically unreachable. That was the "awkward internal
     scrolling" bug. Starting from the top can never do that. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--space-md)) var(--gutter) var(--space-lg);
    background: var(--color-navy);
    /* Fallback for landscape and unusually short viewports only. The five
       links plus the CTA come to ~508px, so at any normal portrait phone
       (844, 812, 667, 640) nothing scrolls. */
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  /* The header sits above the overlay (100 vs 90) and dissolves into it while
     it is open, so the wordmark, the language switch and the close control
     read as the overlay's own top row rather than a cream bar stranded on
     navy. The language switch is never moved into the menu — it is in the top
     bar at every width, open or closed. */
  /* .nav is a CHILD of .site-header, so the header's own stacking context
     (position:fixed + z-index:100) contains it — the overlay can never rise
     above the header, only above the header's untiered children. Left alone,
     the full-screen .nav at z-index 90 paints straight over its own siblings:
     the wordmark and the language switch have z-index auto and end up buried
     under it. Lifting the top-bar controls above the overlay inside that same
     context is the whole fix. */
  .wordmark,
  .site-header__actions {
    position: relative;
    z-index: 95;
  }

  .site-header.nav-is-open {
    --focus: var(--color-gold);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .site-header.nav-is-open .wordmark { color: var(--color-white); }
  .site-header.nav-is-open .lang-switch {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, .34);
  }
  .site-header.nav-is-open .lang-switch:hover {
    background: rgba(255, 255, 255, .08);
    border-color: var(--color-gold);
  }
  .site-header.nav-is-open .nav-toggle { border-color: rgba(255, 255, 255, .34); }
  /* Only the two arms — the middle bar is already transparent in the X state,
     and repainting it here would put the hamburger's centre line back. */
  .site-header.nav-is-open .nav-toggle__bars::before,
  .site-header.nav-is-open .nav-toggle__bars::after { background: var(--color-white); }

  .nav .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav .nav__link {
    min-height: 64px;
    width: 100%;
    padding: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6.2vw, 1.75rem);
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .nav .nav__link:hover { color: var(--color-gold); border-bottom-color: rgba(232, 200, 74, .5); }

  /* Book Now stays the primary action in the overlay — a filled gold button,
     not another line in the list. Navy on gold is ~9.4:1. */
  .nav .nav__link--cta {
    justify-content: center;
    margin-top: var(--space-md);
    min-height: 56px;
    padding: 0 var(--space-md);
    background: var(--color-gold);
    color: var(--color-navy);
    border: 0;
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .nav .nav__link--cta:hover { background: var(--color-white); color: var(--color-navy); }

  html:lang(el) .nav .nav__link { padding: 0; }
  html:lang(el) .nav .nav__link--cta { padding: 0 var(--space-md); }

  .site-header__actions { gap: 6px; }

  /* Tighten the switcher so wordmark + flag + hamburger clear 360px without
     the bar feeling packed. The 44px tap target is preserved. */
  .lang-switch { padding: 0 10px; gap: 6px; letter-spacing: .04em; }
}

/* Narrowest phones: the border would be the first thing to cause a wrap, so
   drop it and let the flag itself carry the affordance. */
@media (max-width: 359px) {
  .lang-switch { padding: 0 6px; border-color: transparent; }
}

/* --------------------------------------------------------------------------
   8. Hero — one claim, two doors
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--space-md));
  padding-bottom: var(--space-md);
  background-color: var(--color-navy);
  /* The poster is a frame of hero.mp4, so it holds the hero's look before the
     video has buffered — and it IS the hero when the video is suppressed under
     prefers-reduced-motion. */
  background-image: url("../images/hero-poster.jpg");
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  isolation: isolate;
  overflow: hidden;
}

/* Decorative background footage. Below .hero::before (z-index -1), so the navy
   overlay grades it exactly as it graded the still. object-fit: cover means the
   1280x720 frame is cropped, never stretched, at any viewport ratio. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Portrait viewports keep the full frame height and crop the sides. The footage
   is a top-down aerial with no horizon, so there is no "correct" subject to
   centre — biasing left holds the richer turquoise water and pushes the pale
   sandy corner off-screen. */
@media (max-width: 767px) {
  .hero__video { object-position: 40% center; }
}

/* No CSS can stop a <video> playing, so main.js pauses and removes it. This
   only hides it in the interval before that runs. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Navy overlay at 45%, deepened toward the lower left so the bottom-anchored
   text stays legible once the real photograph is dropped in. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(12, 44, 62, .86) 0%, rgba(12, 44, 62, .34) 58%, rgba(12, 44, 62, .42) 100%),
    rgba(12, 44, 62, .45);
}

/* Chart-margin frame */
.hero__frame {
  position: absolute;
  inset: calc(var(--header-h) - 12px) var(--space-sm) var(--space-sm);
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {
  .hero__frame { inset: calc(var(--header-h) - 4px) var(--space-md) var(--space-md); }
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--color-white);
  text-wrap: balance;
  max-width: 17ch;
  overflow-wrap: break-word;
}

.hero__lede {
  margin-top: var(--space-sm);
  max-width: 46ch;
  color: rgba(255, 255, 255, .92);
  font-size: 1.0625rem;
}

/* The two doors. Equal cells, equal weight — the page's central idea stated
   once, before anything else on it. */
.hero__choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: var(--space-md);
  max-width: 640px;
}
@media (min-width: 560px) {
  .hero__choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.choice-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 15px 50px 15px 18px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-btn);
  background: rgba(12, 44, 62, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.choice-link:hover {
  background: rgba(255, 255, 255, .95);
  border-color: var(--color-white);
  color: var(--color-navy);
  transform: translateY(-2px);
}

.choice-link__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: color .22s var(--ease);
}
.choice-link:hover .choice-link__label { color: var(--color-teal-dark); }
:lang(el) .choice-link__label { text-transform: none; letter-spacing: .05em; }

.choice-link__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 3.6vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.16;
}

.choice-link__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

/* Bottom rail — the signature. GPS coordinate sits on the chart scale-bar
   rather than floating loose in the corner. */
.hero__rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.hero__gps {
  flex: none;
  font-size: var(--fs-gps);
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .25);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hero__rail-line {
  flex: 1 1 auto;
  height: 7px;
  position: relative;
  min-width: 40px;
}
.hero__rail-line::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}
.hero__rail-line::after {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right, rgba(255, 255, 255, .2) 0 1px, transparent 1px 14px
  );
}

.hero__scroll {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-gps);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  white-space: nowrap;
}
.hero__scroll:hover { color: var(--color-gold); }
:lang(el) .hero__scroll { text-transform: none; letter-spacing: .08em; }

@media (min-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-lg)); }
  .hero__title { max-width: 14ch; }
  .hero__rail { margin-top: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   9. Why Capitano — trust pillars
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
}

.pillar {
  padding: var(--space-md) var(--space-sm);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .pillar { padding: var(--space-md); } }

.pillar__icon {
  width: 30px; height: 30px;
  margin-bottom: var(--space-sm);
  color: var(--color-teal);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar__title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
}

.pillar__body {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Choose your experience — the two services, given equal room
   -------------------------------------------------------------------------- */

.experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 860px) {
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.xcard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-teal-dark);
  isolation: isolate;
}
@media (min-width: 860px) { .xcard { min-height: 540px; } }

.xcard__media { position: absolute; inset: 0; z-index: -1; }
.xcard__media img { width: 100%; height: 100%; object-fit: cover; }

.xcard__body {
  position: relative;
  width: 100%;
  padding: var(--space-xl) var(--space-sm) var(--space-md);
  /* Scrim under the card text. The stops are driven by where the text actually
     sits: the gold label — the topmost and lowest-contrast element — tops out
     at ~73% of this box's height at every width, so the scrim has to still be
     near-opaque there and only then fall away into the photograph.

     The flat teal placeholder these cards used to carry was dark enough that a
     lighter scrim passed. Against the real photographs it did not: gold on the
     bright sky in the self-drive shot measured 2.0:1, well under the 4.5:1
     floor. .88 at the label line puts it back over 4.5:1 while leaving the top
     ~24% of the box, and everything above it, as clean photograph. */
  background: linear-gradient(
    to top,
    rgba(12, 44, 62, .97) 0%,
    rgba(12, 44, 62, .93) 45%,
    rgba(12, 44, 62, .88) 76%,
    rgba(12, 44, 62, 0) 100%
  );
}
@media (min-width: 768px) { .xcard__body { padding: var(--space-xl) var(--space-md) var(--space-md); } }

.xcard__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
:lang(el) .xcard__label { text-transform: none; letter-spacing: .06em; }

.xcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-white);
}

.xcard__text {
  margin-top: var(--space-xs);
  max-width: 44ch;
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.xcard__cta { margin-top: var(--space-md); }

/* --------------------------------------------------------------------------
   11. Boats — self-drive rental
   -------------------------------------------------------------------------- */

.fleet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .fleet { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.boat {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.boat:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }

/* The media box owns the aspect ratio, so the card's height never depends on
   which photograph is showing and nothing shifts as the gallery advances. */
.boat__media {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--color-teal);
  overflow: hidden;
}
.boat__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.gallery__track {
  display: flex;
  height: 100%;
  /* Vertical stays with the browser, horizontal comes to us — so a swipe down
     the page still scrolls the page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 560ms var(--ease);
}
/* Set while dragging, and for the snap back off the clone onto the real first
   slide — that jump must not be animated or the loop shows its seam. */
.gallery__track.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .gallery__track { transition: none; }
}

.gallery__slide { flex: 0 0 100%; width: 100%; height: 100%; }

.gallery__dots {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  /* Guarantees the dots read against whatever the photograph is doing down
     there, without putting a bar across the image. */
  background: linear-gradient(to top, rgba(12, 44, 62, .5), rgba(12, 44, 62, 0));
}
.gallery__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* Small dot, full-size target. */
.gallery__dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
/* Current is bigger as well as brighter — not colour alone. */
.gallery__dot[aria-current="true"]::before {
  background: var(--color-white);
  transform: scale(1.4);
}
.gallery__dot:focus-visible { outline: 2px solid var(--color-white); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .gallery__dot::before { transition: none; }
}

.boat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}
@media (min-width: 768px) { .boat__body { padding: var(--space-md); } }

.boat__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-navy);
  min-height: 1.4em;
}

.boat__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(12, 44, 62, .1);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}
.boat__spec { display: inline-flex; align-items: center; gap: 6px; }
.boat__spec-label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}
:lang(el) .boat__spec-label { text-transform: none; letter-spacing: .04em; }
.boat__spec-value { color: var(--color-navy); font-weight: 500; }

.boat__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.boat__price-label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-muted);
}
.boat__price-value {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.boat__cta { margin-top: auto; padding-top: var(--space-md); }

/* --------------------------------------------------------------------------
   12. Tours — with a skipper. Editorial, not a price grid.
   -------------------------------------------------------------------------- */

.tours__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .tours__inner { grid-template-columns: 1.05fr .95fr; gap: var(--space-xl); }
}

.tours__title { max-width: 17ch; }

.tours__lede {
  margin-top: var(--space-sm);
  max-width: 54ch;
  color: rgba(255, 255, 255, .82);
  font-size: 1.0625rem;
}

.tours__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.tours__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-teal-dark);
}
.tours__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* The GPS signature, recurring once more where the page turns to the coast. */
.tours__stamp {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  font-size: var(--fs-gps);
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Destinations — cards open a detail sheet, never a new page
   -------------------------------------------------------------------------- */

.destinations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}
@media (min-width: 1000px) {
  .destinations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.destination { position: relative; }

.destination__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-teal-dark);
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.destination__btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }

.destination__media { display: block; aspect-ratio: 4 / 3; }
.destination__media img { width: 100%; height: 100%; object-fit: cover; }

/* Always rendered, never hover-only — touch and keyboard users get the same
   information a mouse user gets. */
.destination__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(to top, rgba(12, 44, 62, .93), rgba(12, 44, 62, 0));
}

.destination__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
}
.destination__cat {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold);
}
:lang(el) .destination__cat { text-transform: none; letter-spacing: .05em; }

/* Persistent affordance. Nothing here depends on hover. */
.destination__btn::after {
  content: "+";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(12, 44, 62, .5);
  color: var(--color-white);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.destination__btn:hover::after {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   14. Destination sheet — <dialog>, centred on desktop, sheet on mobile
   -------------------------------------------------------------------------- */

.sheet {
  width: min(720px, calc(100% - 2 * var(--space-sm)));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  overflow: visible;
}
.sheet::backdrop {
  background: rgba(8, 32, 46, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sheet__inner {
  position: relative;
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}

.sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(12, 44, 62, .58);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.sheet__close:hover { background: var(--color-navy); }
/* This one sits on a photograph whose brightness is unknown, so it carries a
   two-tone ring: whichever half fails against the image, the other passes. */
.sheet__close:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .92);
}
.sheet__close svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.sheet__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.sheet__body { padding: var(--space-md) var(--space-sm); }
@media (min-width: 768px) { .sheet__body { padding: var(--space-md); } }

.sheet__cat {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}
:lang(el) .sheet__cat { text-transform: none; letter-spacing: .06em; }

.sheet__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-navy);
}

.sheet__text {
  margin-top: var(--space-sm);
  max-width: 58ch;
  color: var(--color-text);
}

.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.sheet__actions .btn { flex: 1 1 230px; }

/* Mobile: the sheet comes up from the bottom edge. */
@media (max-width: 639px) {
  .sheet {
    width: 100%;
    margin: auto 0 0;
  }
  .sheet__inner {
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
  }
  .sheet__actions .btn { flex: 1 1 100%; }
}

.sheet[open] { animation: sheet-in .3s var(--ease); }
.sheet[open]::backdrop { animation: fade-in .3s var(--ease); }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   15. How it works — a real sequence, so numbering is earned
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  counter-reset: step;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

.step { position: relative; padding-top: var(--space-md); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 34px;
  right: 0;
  height: 1px;
  background: rgba(232, 200, 74, .32);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-white);
}
.step__body {
  margin-top: var(--space-xs);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   16. Reviews — horizontal carousel, scroll-snap, no autoplay
   -------------------------------------------------------------------------- */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-sm);
  -webkit-overflow-scrolling: touch;
}

/* Snapping and a continuous drift fight each other — mandatory snap yanks the
   track back to a card edge every frame. So snap applies only when the drift
   is off: no JS, or prefers-reduced-motion. JS adds .is-continuous exactly
   when it is going to animate. */
.carousel__track:not(.is-continuous) { scroll-snap-type: x mandatory; }
.carousel__track:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 4px; }

/* Mobile: one card, with the next one peeking so the swipe is discoverable. */
.carousel__item {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .carousel__track { gap: var(--space-md); }
  .carousel__item { flex-basis: calc((100% - var(--space-md)) / 2); }
}
@media (min-width: 1000px) {
  .carousel__item { flex-basis: calc((100% - 2 * var(--space-md)) / 3); }
}

.carousel__controls {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid rgba(12, 44, 62, .25);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.carousel__btn svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__btn:hover { border-color: var(--color-teal); color: var(--color-teal-dark); }
.carousel__btn[disabled] { opacity: .38; cursor: default; }
.carousel__btn[disabled]:hover { border-color: rgba(12, 44, 62, .25); color: var(--color-navy); }
/* .carousel__btn sets display:grid, which would otherwise beat [hidden]. */
.carousel__btn[hidden] { display: none; }

/* Pause / resume. Sits slightly apart from the two step buttons — it does a
   different job. Only one of the two glyphs is ever shown. */
.carousel__btn--toggle { margin-inline-start: var(--space-sm); }
.carousel__btn--toggle .carousel__icon-play  { display: none; }
.carousel__btn--toggle.is-paused .carousel__icon-pause { display: none; }
.carousel__btn--toggle.is-paused .carousel__icon-play  { display: block; }
.carousel__btn--toggle .carousel__icon-play { fill: currentColor; stroke-linejoin: round; }

/* Every card takes the height of the tallest in the track. `height: 100%`
   does not achieve that — against an auto-height flex container it resolves
   indefinite and the cards end up ragged, which under continuous motion reads
   as the row's bottom edge constantly shifting. Plain `align-items: stretch`
   on the track is what does the work; the min-height stops an all-short set
   from looking accidental. */
.review {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: var(--space-md) var(--space-sm);
  background: var(--surface-card);
  border: 1px solid rgba(12, 44, 62, .09);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .review { padding: var(--space-md); } }

/* --- who wrote it ---------------------------------------------------------
   Reviewer first, then the rating, then the words — the order a real review
   is read in, and the order that makes a card legible at a glance while the
   track is drifting. */
.review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

/* A typographic initial, not an avatar. It is drawn from the display name
   already on the card, adds no information of its own, and is deliberately
   flat — no photo, no ring, nothing that could read as a portrait. Hidden
   from assistive tech: the name follows immediately. */
.review__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(26, 138, 122, .1);
  border: 1px solid rgba(26, 138, 122, .28);
  color: var(--color-teal-dark);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.review__who { display: grid; gap: 4px; min-width: 0; }

.review__stars { display: flex; gap: 3px; }
.review__star { width: 16px; height: 16px; fill: var(--color-gold); }

/* Verbatim customer wording, so a real <blockquote>. Sized a little smaller
   and looser than a pull-quote would be: these run to 400+ characters and
   have to stay comfortable at that length, not just look good short. */
/* margin-bottom: auto rather than flex: 1 — both push the source line to the
   bottom of a stretched card, but flex: 1 also stretched the quote box itself,
   which left the rule below trailing down through empty space on the shorter
   reviews. This way the rule ends where the words do. */
.review__text {
  margin: 0 0 auto;
  /* A quotation, marked as one: a hairline of water down its left edge. It is
     the only decoration on the card, and it does what a quote mark would
     without putting a stray glyph in front of a screen reader. */
  padding-left: 14px;
  border-left: 2px solid rgba(26, 138, 122, .3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-navy);
  overflow-wrap: break-word;
}

.review__attrib {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.review__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
  overflow-wrap: break-word;
}

/* Source badges are typographic, not logos — the site ships no third-party
   brand assets. The coloured dot is what separates the two at a glance. */
.review__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid rgba(12, 44, 62, .16);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-navy);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.review__badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.review__badge--google::before { background: #4285F4; }

/* Section-level Google rating. No star row here — five filled stars would
   round 4.9 up and overstate it. The figure carries itself. */
.rating-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-sm);
}
.rating-line__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.rating-line__meta {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* Restrained source label — a statement of where the reviews come from, not
   a disclaimer about them. */
.reviews-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
:lang(el) .reviews-source { text-transform: none; letter-spacing: .02em; }

/* Google's own asset, unmodified. Height is set and width left to follow, so
   its 200x204 proportions are kept exactly — it is very slightly taller than
   it is wide, and forcing it square would distort a trademark. Small and
   secondary: it sits at caption size beside the label, never above it. */
.reviews-source__g {
  flex-shrink: 0;
  height: 16px;
  width: auto;
}

/* Leaves the site, so it is a text link — nothing in this section may look
   like it competes with Book Now. */
.reviews-all {
  margin-top: var(--space-md);
  text-align: center;
}
.reviews-all__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--color-teal-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.reviews-all__link:hover { text-decoration: underline; }
.reviews-all__link svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   17. Book / contact — two enquiry paths, then the details
   -------------------------------------------------------------------------- */

/* The .paths / .path rules that used to sit here are gone with the two
   standalone Book cards they styled — the enquiry flow's first step asks the
   same question now. */

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
/* The enquiry flow leads and gets the wider column; "Find us" supports it. */
@media (min-width: 900px) {
  .book-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Experience choice — step one of the enquiry flow

   Two radios wearing cards. Native radios keep arrow-key group navigation,
   the label/for pairing and the whole 44px+ card as the hit area for free;
   the input itself is clipped rather than display:none, so it stays focusable.

   Selected state is carried by three signals, not colour alone (WCAG 1.4.1):
   a tick mark that only appears when checked, a 2px border against the
   unselected 1px, and a lift in background. Someone who cannot see the gold
   still sees the tick and the heavier edge.
   -------------------------------------------------------------------------- */

.choice { margin: 0 0 var(--space-xs); padding: 0; border: 0; }

.choice__legend {
  padding: 0;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-white);
}

.choice__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 560px) {
  .choice__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.choice__option { display: block; }

/* Clipped, not hidden: display:none would take it out of the tab order and
   kill arrow-key navigation between the two options. */
.choice__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.choice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  height: 100%;
  padding: var(--space-sm) 46px var(--space-sm) var(--space-sm);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.choice__card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }

.choice__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-white);
}

.choice__note {
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* The tick sits in the padding reserved for it, so turning it on never
   reflows the card's text. */
.choice__check {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 22px; height: 22px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  color: var(--color-navy);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .16s var(--ease), background-color .16s var(--ease);
}

.choice__input:checked + .choice__card {
  background: rgba(232, 200, 74, .14);
  border-color: var(--color-gold);
  border-width: 2px;
  /* Keep the text where it was when the border thickens. */
  padding: calc(var(--space-sm) - 1px) 45px calc(var(--space-sm) - 1px) calc(var(--space-sm) - 1px);
}
.choice__input:checked + .choice__card .choice__check {
  opacity: 1;
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.choice__input:focus-visible + .choice__card {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.field__hint {
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.book__heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.book-primary__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-white);
  text-decoration: none;
}
.book-primary__phone:hover { color: var(--color-gold); }

.book-address {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .8);
  font-style: normal;
}
.book-address strong { display: block; color: var(--color-white); font-weight: 600; }

.book-directions { margin-top: var(--space-sm); }

/* --- click-to-load map ----------------------------------------------------
   No iframe until the visitor asks for one. Until then this is the panel: the
   business, the port and the coordinates the hero and the Tours photograph
   already carry — the site's signature element doing a third job. It is
   deliberately NOT a drawing of a map. Inventing streets for a real harbour
   would be fabricating exactly the kind of thing this build refuses to.

   The box keeps its ratio either way, so pressing View map swaps the plate for
   the iframe without the column jumping. */
.mapcard {
  position: relative;
  margin-top: var(--space-md);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(8, 32, 46, .45);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-card);
}
@media (min-width: 900px) { .mapcard { aspect-ratio: 3 / 2; } }

.mapcard__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-sm);
  text-align: center;
  /* A soundings wash rather than a pretend street map. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(26, 138, 122, .28), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px);
}

.mapcard__mark {
  width: 26px; height: 26px;
  margin-bottom: 6px;
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mapcard__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white);
  text-wrap: balance;
}
.mapcard__where { font-size: var(--fs-small); color: rgba(255, 255, 255, .82); }

/* The same coordinates as the hero watermark, set the same way. */
.mapcard__coords {
  margin-top: 2px;
  font-size: var(--fs-gps);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
}

.mapcard__btn { margin-top: var(--space-sm); }

.mapcard__note {
  margin-top: 8px;
  max-width: 30ch;
  font-size: var(--fs-caption);
  line-height: 1.4;
  /* Otherwise the last word sits alone on its own line — and the Greek line is
     longer again. */
  text-wrap: balance;
  color: rgba(255, 255, 255, .62);
}

.mapcard__frame {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
.mapcard.is-loaded { background: var(--color-white); }

/* Form */
.form { display: grid; gap: var(--space-sm); }

.field { display: grid; gap: 6px; }

.field__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}
:lang(el) .field__label { text-transform: none; letter-spacing: .02em; }

.field__optional { text-transform: none; letter-spacing: 0; opacity: .75; font-weight: 400; }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-btn);
  color: var(--color-white);
  font-size: var(--fs-body);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field__input::placeholder { color: rgba(255, 255, 255, .55); }
.field__input:hover { border-color: rgba(255, 255, 255, .45); }
.field__input:focus { background: rgba(255, 255, 255, .12); border-color: var(--color-gold); }
textarea.field__input { min-height: 120px; resize: vertical; }

select.field__input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
}
select.field__input option { color: var(--color-text); background: var(--color-white); }

/* Date inputs render a dark-on-dark calendar glyph in Chromium. */
.field__input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }

.field__error {
  font-size: var(--fs-caption);
  color: #FFC9C2;
  min-height: 0;
}
.field__input[aria-invalid="true"] { border-color: #FFC9C2; }

.form__status {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-btn);
  font-size: var(--fs-small);
}
.form__status[hidden] { display: none; }
.form__status--ok {
  background: rgba(37, 211, 102, .14);
  border: 1px solid rgba(37, 211, 102, .5);
  color: var(--color-white);
}

.form__submit { margin-top: var(--space-xs); }

/* Sits under the form, quiet but legible — it describes what happens to what
   the visitor just typed, so it must clear AA against the navy band. */
.form__privacy {
  margin-top: var(--space-sm);
  max-width: 56ch;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}
.form__privacy a { color: var(--color-gold); text-decoration: underline; }
.form__privacy a:hover { color: var(--color-white); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-lg) var(--space-md);
  background: #08202E;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-small);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-lg); }
}

.site-footer .wordmark { color: var(--color-white); }
.site-footer .wordmark:hover { color: var(--color-gold); }

.footer__tagline { margin-top: var(--space-xs); max-width: 34ch; }

.footer__heading {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
:lang(el) .footer__heading { text-transform: none; letter-spacing: .06em; }

.footer__list { display: grid; gap: 2px; }
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}
.footer__link:hover { color: var(--color-gold); text-decoration: underline; }

.footer__address { font-style: normal; line-height: 1.7; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, .7);
}

.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Both stay secondary: the legal link is a plain quiet link, and the Komvos
   credit stays quieter still — it is a credit, not a call to action. */
.footer__legal,
.footer__credit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}
.footer__legal { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal:hover,
.footer__credit:hover { color: var(--color-gold); text-decoration: underline; }

/* --------------------------------------------------------------------------
   18b. Legal pages — privacy.html / el/privacy.html

   Same shell as the marketing pages, but the header carries only a way back
   and a language switch, and the body is a single readable column. These
   pages deliberately do NOT use .nav: that class becomes a fixed full-screen
   overlay below 900px and there is no hamburger here to reopen it.
   -------------------------------------------------------------------------- */

.legal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.legal-back:hover { color: var(--color-teal-dark); text-decoration: underline; }
.legal-back svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1);
}

.legal-main {
  padding-top: calc(var(--header-h) + var(--space-lg));
  padding-bottom: var(--space-xl);
  background: var(--surface-limestone);
}

/* ~68 characters is the comfortable end of the readable range for continuous
   prose, which is all these pages are. */
.legal { max-width: 68ch; }

.legal__title {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-navy);
}

.legal__updated {
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.legal__section { margin-top: var(--space-lg); }

.legal__section h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-navy);
}

.legal__section p { margin-top: var(--space-sm); }

.legal__section ul {
  margin-top: var(--space-sm);
  padding-left: 1.3em;
  list-style: disc;
}
.legal__section li { margin-top: 6px; }
.legal__section li::marker { color: var(--color-teal); }

.legal__section a { color: var(--color-teal-dark); }

.legal__contact {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-style: normal;
}
@media (min-width: 768px) { .legal__contact { padding: var(--space-md); } }
.legal__contact strong { display: block; color: var(--color-navy); }
.legal__contact a { color: var(--color-teal-dark); }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Orchestrated hero entrance */
.hero__content > *,
.hero__rail { animation: rise .9s var(--ease) both; }
.hero__content > :nth-child(1) { animation-delay: .05s; }
.hero__content > :nth-child(2) { animation-delay: .15s; }
.hero__content > :nth-child(3) { animation-delay: .28s; }
.hero__rail { animation-delay: .45s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .boat:hover,
  .choice-link:hover,
  .destination__btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .hero__frame, .map, .skip-link,
  .carousel__controls, .sheet { display: none !important; }
  .carousel__track { display: block; overflow: visible; }
  .hero { min-height: auto; color: var(--color-text); }
  .band--water { background: #fff; color: #000; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Enquiry wizard — the Book section's modal

   A native <dialog>, like the destination sheets, so showModal() supplies the
   focus trap, Esc and the top layer. Three columns on desktop: a step rail on
   the left, one question at a time in the middle, a running summary of the
   enquiry on the right. Below 960px the rail and the summary fold away — the
   question column is the whole point on a phone, and the final Review step
   already shows everything the summary would.
   -------------------------------------------------------------------------- */

.wizard {
  width: min(1040px, calc(100% - 2 * var(--space-sm)));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  overflow: visible;
}
.wizard::backdrop {
  background: rgba(8, 32, 46, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.wizard__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
@media (min-width: 960px) {
  .wizard__inner {
    grid-template-columns: 232px minmax(0, 1fr) 236px;
    overflow: hidden;
  }
}

/* --- phones: a bottom sheet, not a floating card -------------------------
   Anchored to the bottom edge and full width, rising out of it. The height is
   the content's own — a short question makes a short sheet — capped so the
   page behind always shows above it and the visitor never loses their place.
   Desktop is untouched: everything here is inside the phone query.

   env(safe-area-inset-bottom) carries a 0px fallback, so a device without a
   home indicator gets no padding it does not need. The page does not opt into
   viewport-fit=cover, so on current iOS the layout viewport already stops
   above the indicator and the inset resolves to zero — this is here so the
   sheet stays correct if that ever changes.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wizard {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    overflow: hidden;
  }
  .wizard__inner {
    max-height: min(88dvh, calc(100dvh - 48px));
    border-radius: inherit;
  }
}

/* A short rise, not a bounce. */
@keyframes wizard-rise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes wizard-dim {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 767px) {
  .wizard[open] { animation: wizard-rise 240ms var(--ease); }
  .wizard[open]::backdrop { animation: wizard-dim 240ms var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .wizard[open],
  .wizard[open]::backdrop { animation: none; }
}

/* --- close ---------------------------------------------------------------
   Sits over the summary column on desktop and over the header row on mobile.
   Two-tone ring because it can land on either surface. */
.wizard__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-navy);
  cursor: pointer;
}
.wizard__close svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.wizard__close:hover { background: rgba(12, 44, 62, .08); }

/* --- left rail ----------------------------------------------------------- */
.wizard__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: #F1ECE2;
  border-bottom: 1px solid rgba(12, 44, 62, .1);
}
@media (min-width: 960px) {
  .wizard__rail {
    padding: var(--space-md);
    border-bottom: 0;
    border-right: 1px solid rgba(12, 44, 62, .1);
  }
}

.wizard__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}
.wizard__brand span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
:lang(el) .wizard__brand span { text-transform: none; letter-spacing: .04em; }

.wstep-nav { display: none; }
@media (min-width: 960px) {
  .wstep-nav { display: grid; gap: 2px; }
}

.wstep-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.wstep-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid rgba(12, 44, 62, .28);
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 600;
}

/* Done and current are distinguished by weight and a filled marker, not by
   colour alone. */
.wstep-nav__item[data-state="done"] { color: var(--color-navy); }
.wstep-nav__item[data-state="done"] .wstep-nav__num {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}
.wstep-nav__item[data-state="current"] {
  color: var(--color-navy);
  font-weight: 600;
}
.wstep-nav__item[data-state="current"] .wstep-nav__num {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.wizard__aside { display: none; }
@media (min-width: 960px) {
  .wizard__aside {
    display: block;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(12, 44, 62, .1);
    color: var(--color-muted);
    font-size: var(--fs-caption);
    line-height: 1.5;
  }
}
.wizard__wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--color-teal-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.wizard__wa:hover { text-decoration: underline; }
.wizard__wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- middle column ------------------------------------------------------- */
.wizard__main {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  min-height: 0;
}
@media (min-width: 960px) {
  .wizard__main { padding: var(--space-lg) var(--space-md) var(--space-md); overflow-y: auto; }
}

/* --- phone sheet: reclaiming the vertical budget -------------------------
   These have to sit AFTER the .wizard__rail and .wizard__main rules above,
   not up beside the sheet geometry — same specificity, so source order is
   what decides, and placing them earlier silently lost every one of them.

   The eight-row review plus both actions has to fit inside the sheet at
   390x844 without scrolling. All of it comes out of padding: the brand row
   does not need a desktop sidebar's breathing room, and the actions sit side
   by side rather than stacking.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wizard__rail { padding: 12px var(--space-sm); }
  .wizard__main {
    padding: var(--space-sm) var(--space-sm)
             calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  }
}

.wizard__count {
  margin-bottom: var(--space-xs);
  color: var(--color-teal-dark);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
:lang(el) .wizard__count { text-transform: none; letter-spacing: .05em; }

.wstep__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4.4vw, 1.75rem);
  font-weight: 700;
  color: var(--color-navy);
  text-wrap: balance;
}

.wstep__hint {
  margin-top: 6px;
  margin-bottom: var(--space-md);
  max-width: 46ch;
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* The wizard's inputs sit on a light card, not the navy band the old inline
   form lived on, so the field tokens are re-pointed for this context. */
.wizard .field__input {
  background: var(--color-white);
  border-color: rgba(12, 44, 62, .28);
  color: var(--color-text);
}
.wizard .field__input:hover { border-color: rgba(12, 44, 62, .5); }
.wizard .field__input:focus {
  background: var(--color-white);
  border-color: var(--color-teal);
}
.wizard .field__input::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }
.wizard .field__input--wide   { max-width: 26rem; }
.wizard .field__input--narrow { max-width: 8rem; }
.wizard .field__error { color: #A3231A; }
.wizard .field__optional { color: var(--color-muted); }

/* Choice cards invert for the light surface. */
.wizard .choice__legend { color: var(--color-navy); }
.wizard .choice__card {
  background: var(--color-white);
  border-color: rgba(12, 44, 62, .24);
}
.wizard .choice__card:hover { background: #FBF9F5; border-color: rgba(12, 44, 62, .45); }
.wizard .choice__title { color: var(--color-navy); }
.wizard .choice__note  { color: var(--color-muted); }
.wizard .choice__check { border-color: rgba(12, 44, 62, .3); color: var(--color-white); }
.wizard .choice__input:checked + .choice__card {
  background: rgba(26, 138, 122, .08);
  border-color: var(--color-teal);
}
.wizard .choice__input:checked + .choice__card .choice__check {
  background: var(--color-teal);
  border-color: var(--color-teal);
}

.wstep { min-height: 0; }

/* Two answers with no supporting note each — the tall card the experience
   question needs would be mostly empty here. */
.choice--compact .choice__card { min-height: 0; justify-content: center; }

/* --- review list ---------------------------------------------------------
   Deliberately tight on a phone. The whole review plus both actions has to
   fit inside the sheet at 390x844 without scrolling, and the vertical space
   that buys it comes from padding and leading rather than from type size —
   the labels stay at 13px and the values stay legible. */
/* The <dl>'s own 1em top and bottom margins are 32px of nothing between the
   hint and the first answer. The rows carry their own rhythm. */
.wreview { display: grid; gap: 0; margin: var(--space-xs) 0 0; }
.wreview .wsum__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(12, 44, 62, .12);
}
.wreview .wsum__row:last-child { border-bottom: 0; }
@media (min-width: 560px) {
  .wreview .wsum__row {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 12px 0;
    align-items: baseline;
  }
  .wreview .wsum__row:last-child { border-bottom: 1px solid rgba(12, 44, 62, .12); }
}
.wreview .wsum__key {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:lang(el) .wreview .wsum__key { text-transform: none; letter-spacing: .03em; }
.wreview .wsum__val {
  margin: 0;
  color: var(--color-navy);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* A long note must not push the actions off the sheet. Three lines is enough
   to recognise what you wrote; the full text is untouched in the field two
   steps back and goes to WhatsApp in full. */
@media (max-width: 559px) {
  .wreview [data-sum="r-notes"] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wstep[data-key="review"] .wstep__hint { margin-bottom: var(--space-sm); }
}

/* Says what pressing the button does and, just as importantly, what it does
   not do. */
.wizard__notice {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* --- actions ------------------------------------------------------------- */
/* Each step moves focus to its own heading so the change is announced. The
   heading carries tabindex="-1" and is never keyboard-reachable, so :focus
   here can only ever be that programmatic move — and a ring drawn round a
   heading reads as an error box, not as a focus indicator. No control loses
   its indicator: this is the one element that never had one to lose. */
.wstep__title:focus,
.wstep__title:focus-visible { outline: none; box-shadow: none; }

.wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-md);
}

/* btn--invert is white-on-navy — invisible on the wizard's white card. The
   primary action here fills with teal-dark instead: white on #0F5C50 is
   7.9:1, where plain teal would have been 4.2:1 and failed. */
.wizard [data-wizard-next] {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: var(--color-white);
}
.wizard [data-wizard-next]:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* Plain teal text on this near-white surface is ~4.2:1. Darken it. */
.wizard .btn--outline {
  color: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
}
.wizard .btn--outline:hover {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: var(--color-white);
}
.wizard__actions .btn { flex: 1 1 auto; justify-content: center; }

/* On a phone the two actions share one row. Left to wrap they stacked, which
   cost 55px the review step needed — and put the primary action below the
   fold on the tallest step. Back is content-width; the primary takes the
   rest and its label wraps before anything overflows. */
@media (max-width: 559px) {
  .wizard__actions { flex-wrap: nowrap; padding-top: var(--space-sm); }
  .wizard__actions .btn { padding-inline: 18px; }
  .wizard__actions [data-wizard-back] { flex: 0 0 auto; }
  .wizard__actions [data-wizard-next],
  .wizard__actions [data-wizard-submit] { min-width: 0; }
  .wizard__notice { margin-top: 12px; }
}
@media (min-width: 560px) {
  .wizard__actions .btn { flex: 0 0 auto; }
  .wizard__actions [data-wizard-next],
  .wizard__actions [data-wizard-submit] { margin-left: auto; }
}

/* --- summary column ------------------------------------------------------ */
.wizard__summary { display: none; }
@media (min-width: 960px) {
  .wizard__summary {
    display: block;
    padding: var(--space-md) var(--space-sm);
    background: #F7F3EC;
    border-left: 1px solid rgba(12, 44, 62, .1);
    overflow-y: auto;
  }
}

.wsum__title {
  margin-bottom: var(--space-sm);
  padding-right: 40px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-navy);
}
:lang(el) .wsum__title { text-transform: none; letter-spacing: .05em; }

.wsum { display: grid; gap: var(--space-sm); }
.wsum__key {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:lang(el) .wsum__key { text-transform: none; letter-spacing: .03em; }
.wsum__val {
  margin: 2px 0 0;
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 600;
  overflow-wrap: break-word;
}

/* Stack the two no-JS buttons rather than letting them collide. */
.book-noscript { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }

/* --------------------------------------------------------------------------
   Floating contact — the anchor

   Injected by main.js on all four public pages. Deliberately quieter than any
   CTA on the page: a 52px navy disc, no label until it is opened, no bubble
   and no badge. The three actions are the only three the site has.
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  z-index: 80;                 /* under the header (100) and the top layer */
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
@media (min-width: 768px) {
  .dock { right: var(--space-md); bottom: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

/* One floating layer at a time. body.is-locked is already set by the mobile
   navigation, the booking wizard and the destination sheets, so the dock steps
   aside for all three without any new state to keep in sync — and comes back
   by itself when the last of them releases. */
body.is-locked .dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

.dock__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  background: var(--color-navy);
  border: 0;
  border-radius: 50%;
  color: var(--color-cream);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(12, 44, 62, .28);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.dock__toggle:hover { background: var(--color-teal-dark); }
.dock__toggle:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.dock.is-open .dock__toggle { background: var(--color-teal-dark); }

.dock__icon {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock__icon--filled { fill: currentColor; stroke: none; }

.dock__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.dock__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--surface-card);
  border: 1px solid rgba(12, 44, 62, .12);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(12, 44, 62, .16);
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dock__action .dock__icon { width: 18px; height: 18px; color: var(--color-teal-dark); }
.dock__action:hover { background: var(--color-navy); color: var(--color-white); }
.dock__action:hover .dock__icon { color: var(--color-white); }
.dock__action:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* A short rise as the actions appear. */
@keyframes dock-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dock.is-open .dock__action { animation: dock-rise 180ms var(--ease) both; }
.dock.is-open .dock__action:nth-child(2) { animation-delay: 40ms; }
.dock.is-open .dock__action:nth-child(3) { animation-delay: 80ms; }

@media (prefers-reduced-motion: reduce) {
  .dock__toggle { transition: none; }
  .dock.is-open .dock__action { animation: none; }
}


/* ==========================================================================
   19. Fleet, tours and destination detail — the MVP content pass
       (real 7-boat fleet, three private tours, detail sheets, subpages)

       Nothing here is a new design language. The detail sheets reuse the
       destination <dialog> wholesale — same panel on desktop, same bottom
       sheet on a phone, same 44x44 close, same Esc and backdrop behaviour —
       and the subpages reuse .band, .container and the section head. What is
       added is the small vocabulary those three things needed: a fact list, a
       highlight row, a "see them all" link, and a card for a tour.
   ========================================================================== */

/* --- boat card: the confirmed line under the specs ----------------------- */
.boat__tag {
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-teal-dark);
}

/* --- "View all boats" / "View all tours" ---------------------------------
   A quiet text link under the grid, not a fourth button competing with the
   cards above it. */
.section-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
.section-more__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 4px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-teal-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.section-more__link:hover { color: var(--color-navy); border-bottom-color: var(--color-navy); }
.section-more__link svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s var(--ease);
}
.section-more__link:hover svg { transform: translateX(3px); }
.band--water .section-more__link { color: var(--color-gold); border-bottom-color: rgba(232, 200, 74, .5); }
.band--water .section-more__link:hover { color: var(--color-white); border-bottom-color: var(--color-white); }
@media (prefers-reduced-motion: reduce) {
  .section-more__link svg { transition: none; }
}

/* --- tour cards ----------------------------------------------------------
   The tours band is navy, so these are translucent cards over the band's own
   photograph rather than the cream cards the fleet uses. Same geometry, same
   radius, same hover lift. */
.tours-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 700px) {
  .tours-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

.tourcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(8, 32, 46, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-card);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tourcard:hover { border-color: rgba(255, 255, 255, .42); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .tourcard { transition: none; }
}

.tourcard__media { position: relative; aspect-ratio: 8 / 5; overflow: hidden; }
.tourcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The signature coordinates, used once more — on the first tour card only. */
.tourcard__stamp {
  position: absolute;
  left: var(--space-sm);
  bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(8, 32, 46, .7);
}

.tourcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}
@media (min-width: 768px) { .tourcard__body { padding: var(--space-md); } }

.tourcard__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-white);
}
.tourcard__text {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .84);
}
.tourcard__cta { margin-top: auto; padding-top: var(--space-md); }

/* --- meta chips: Private / Skipper included / Fuel included -------------- */
.metalist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-sm);
}
.metalist__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: var(--fs-caption);
  font-weight: 500;
  border-radius: var(--radius-badge);
  background: rgba(26, 138, 122, .1);
  border: 1px solid rgba(26, 138, 122, .28);
  color: var(--color-teal-dark);
}
.band--water .metalist__item,
.tourcard .metalist__item {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: var(--color-white);
}

/* --- detail sheets: facts, highlights, notes, credit --------------------- */
.sheet__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(12, 44, 62, .12);
}
.sheet__fact-key {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
:lang(el) .sheet__fact-key { text-transform: none; letter-spacing: .04em; }
.sheet__fact-val {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-navy);
}

.sheet__subhead {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
:lang(el) .sheet__subhead { text-transform: none; letter-spacing: .04em; }

.sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-xs);
}
.sheet__chip {
  padding: 5px 11px;
  font-size: var(--fs-caption);
  border-radius: var(--radius-badge);
  background: rgba(12, 44, 62, .05);
  border: 1px solid rgba(12, 44, 62, .12);
  color: var(--color-navy);
}

.sheet__note {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-muted);
}


/* One CTA per destination sheet, so it takes the whole row rather than
   sharing it with a second button. */
.sheet__actions--single .btn { flex: 1 1 100%; }

/* --- subpage hero --------------------------------------------------------
   Compact by design: these are catalogue pages, and the fleet should start
   near the top of the first screen rather than below a second full-height
   picture. */
.page-hero {
  padding-top: calc(var(--header-h) + var(--space-lg));
  padding-bottom: var(--space-md);
  background: var(--color-navy);
  color: var(--color-white);
}
@media (min-width: 900px) {
  .page-hero { padding-top: calc(var(--header-h) + var(--space-xl)); }
}
.page-hero__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.12;
  color: var(--color-white);
}
.page-hero__lede {
  margin-top: var(--space-sm);
  max-width: 62ch;
  color: rgba(255, 255, 255, .84);
}
.page-hero .eyebrow { color: var(--color-gold); }

/* --- practical information blocks on the subpages ------------------------ */
.infogrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 760px) {
  .infogrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.infocard {
  padding: var(--space-md) var(--space-sm);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .infocard { padding: var(--space-md); } }

.infocard__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-navy);
}

.ticklist { margin-top: var(--space-sm); display: grid; gap: 10px; }
.ticklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.ticklist svg {
  width: 18px; height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Definition rows for the rental periods and the practical facts. */
.factrows { display: grid; gap: 0; margin-top: var(--space-sm); }
.factrows__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(12, 44, 62, .1);
}
.factrows__row:last-child { border-bottom: 0; }
.factrows__key { font-size: var(--fs-small); color: var(--color-muted); }
.factrows__val { font-weight: 600; color: var(--color-navy); text-align: right; }

/* --- the rental-period question: three answers, not two ------------------ */
@media (min-width: 560px) {
  .choice--three .choice__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.choice--three .choice__card { padding-right: 40px; }

/* The detail sheets' primary action opens the enquiry wizard — it does NOT
   open WhatsApp, so it must not wear WhatsApp green. btn--invert is white and
   would vanish on the sheet's white card; teal-dark carries white text at
   7.9:1 and reads as the primary action it is. */
.btn--primary {
  background: var(--color-teal-dark);
  color: var(--color-white);
  border: 2px solid var(--color-teal-dark);
}
.btn--primary:hover { background: var(--color-navy); border-color: var(--color-navy); }
.btn--primary:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* The Boats and Tours pages are real destinations now, so the nav item for the
   page you are on says so — weight and a rule, not colour alone. */
.nav__link[aria-current="page"] {
  color: var(--color-teal-dark);
  font-weight: 600;
  border-bottom-color: var(--color-teal);
}