/* ============================================================
   MareWaves Private Cruises — Design System (LIGHT)
   Thesis: "A day at sea measured in light, not in hours."
   The canvas is a clock: it opens near-white, deepens through
   γαλάζιο, and only in the last stretch does the golden hour
   wash in and the sun appear over the Mizithres.
   ============================================================ */

/* ---------- 1. REGISTERED PROPS — the daylight engine ---------- */
@property --sky-s { syntax: "<percentage>"; inherits: true; initial-value: 64%; }
@property --sky-l { syntax: "<percentage>"; inherits: true; initial-value: 97%; }
@property --warm  { syntax: "<number>";     inherits: true; initial-value: 0;   }

:root{
  /* brand constants — locked from the logo */
  --navy:#0B3B5E; --cyan:#1BA5D8; --aqua:#4FD0E0;
  --ink:#0B3B5E; --ink-deep:#062940;
  --paper:#FFFFFF;
  --ember:#E8722F; --sun:#FFC46B; --sun-hot:#FFF1DC;

  /* the sky. Hue is held in the blue band on purpose — the warmth at the end
     arrives as a separate overlay rather than a hue rotation, which would
     otherwise sweep the whole page through green on its way to gold. */
  --canvas: hsl(199 var(--sky-s) var(--sky-l));
  --canvas-deep: hsl(199 var(--sky-s) calc(var(--sky-l) - 7%));
  --canvas-lift: hsl(199 calc(var(--sky-s) * .7) calc(var(--sky-l) + 2%));

  --hairline: color-mix(in srgb, var(--ink) 16%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  --whisper: color-mix(in srgb, var(--ink) 78%, transparent);

  /* type */
  --display:'Literata', 'Noto Serif', Georgia, serif;
  --text:'Commissioner', 'Helvetica Neue', Arial, sans-serif;

  /* motion — base is client-mandated; swell/drift are bespoke to this brand */
  --e-base: cubic-bezier(.16,1,.3,1);
  --e-swell: cubic-bezier(.33,.02,.16,1);
  --e-drift: cubic-bezier(.45,.05,.55,.95);

  /* rhythm */
  --gut: clamp(20px, 5vw, 68px);
  --sec: clamp(72px, 11vw, 168px);
  --maxw: 1280px;

  /* z-index map — declared once */
  --z-sun:0; --z-body:1; --z-header:900; --z-backdrop:999; --z-drawer:1000; --z-float:1050;

  /* tokenised grain — feTurbulence, ~1.1KB, no request */
  --grain-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* the clock. Warmth stays at zero for the first two thirds — the golden hour
   is meant to arrive, not to be present all along. */
@keyframes daylight{
  0%   { --sky-s:64%; --sky-l:97%; --warm:0;   }
  30%  { --sky-s:70%; --sky-l:93%; --warm:0;   }
  56%  { --sky-s:72%; --sky-l:89%; --warm:0;   }
  72%  { --sky-s:71%; --sky-l:87%; --warm:.06; }
  88%  { --sky-s:72%; --sky-l:86%; --warm:.62; }
  100% { --sky-s:74%; --sky-l:85%; --warm:1;   }
}
@supports (animation-timeline: scroll()){
  :root{
    animation: daylight linear both;
    animation-timeline: scroll(root block);
  }
  /* the JS fallback claims the element instead — must be :root itself */
  :root.js-daylight{ animation:none; }
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--text); font-weight:360;
  font-size:clamp(1.02rem,.55vw + .9rem,1.18rem); line-height:1.72;
  overflow-x:hidden; position:relative; z-index:var(--z-body);
}
/* height:auto is load-bearing. The width/height attributes on every <img> are
   UA presentational hints; without this, that height is definite, every
   aspect-ratio in this file is silently ignored, and images render at their
   full 960px source height. */
img,video,svg{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.04; margin:0;
  letter-spacing:-.03em; text-wrap:balance; font-variation-settings:'opsz' 60; color:var(--ink); }
p{ margin:0 0 1.1em; text-wrap:pretty; }
::selection{ background:var(--navy); color:#fff; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:2px; }

/* ---------- 3. ATMOSPHERE ---------- */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:var(--grain-src); background-size:180px 180px;
}
/* the golden hour, as a wash that arrives late rather than a hue rotation */
.dusk{
  position:fixed; inset:0; z-index:var(--z-sun); pointer-events:none;
  opacity:var(--warm);
  background:linear-gradient(180deg,
    hsl(42 96% 92% / .10) 0%,
    hsl(34 94% 84% / .55) 46%,
    hsl(22 90% 72% / .88) 100%);
}

/* ---------- 4. THE SUN — arrives only for the finale ---------- */
.sun{
  position:fixed; z-index:var(--z-sun); pointer-events:none;
  right:clamp(18px,9vw,140px); top:14vh;
  width:clamp(64px,7vw,120px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    hsl(44 100% 74%) 0 40%, hsl(30 100% 62% / .85) 56%, transparent 72%);
  box-shadow:0 0 calc(40px + var(--warm)*150px) calc(6px + var(--warm)*44px)
    hsl(30 100% 64% / calc(var(--warm) * .42));
  /* invisible until the day turns */
  opacity:calc(max(0, var(--warm) - .12) * 1.4);
  transform:translate3d(calc(var(--warm) * -6vw), calc(var(--warm) * 62vh), 0)
            scale(calc(.7 + var(--warm)*.5));
  will-change:transform;
}
.sunpath{
  position:fixed; z-index:var(--z-sun); pointer-events:none;
  right:clamp(18px,9vw,140px); top:14vh;
  width:clamp(64px,7vw,120px); aspect-ratio:1;
  transform:translate3d(calc(var(--warm) * -6vw), calc(var(--warm) * 62vh), 0);
  opacity:calc(max(0, var(--warm) - .55) * 2.2);
}
.sunpath::after{
  content:''; position:absolute; left:50%; top:60%; width:min(46vw,420px); height:52vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 58% 46% at 50% 0%,
    hsl(28 100% 62% / .34), hsl(20 96% 56% / .12) 46%, transparent 72%);
  filter:blur(20px);
}
/* the two Mizithres, so the sun has somewhere to set */
.horizon{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sun);
  pointer-events:none; width:100%; height:clamp(150px,21vw,290px);
  opacity:calc(max(0, var(--warm) - .38) * 1.8);
}
.horizon svg{ width:100%; height:100%; display:block; }
.horizon path{ fill:hsl(206 46% 34%); }

/* ---------- 5. LAYOUT ---------- */
.wrap{ width:min(100% - var(--gut)*2, var(--maxw)); margin-inline:auto; }
.wrap-wide{ width:min(100% - var(--gut)*1.2, 1560px); margin-inline:auto; }
section{ position:relative; z-index:var(--z-body); padding-block:var(--sec); }
.rule{ height:1px; background:var(--hairline); border:0; margin:0; }

/* section opening devices — deliberately rotated, never one ritual */
/* navy, not cyan: cyan eyebrows on the light γαλάζιο canvas fell to ~2.5:1 (WCAG fail).
   navy clears AA across the whole scroll range where the canvas darkens to L85%. */
.label{ font-family:var(--text); font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--navy); margin:0 0 1.4rem; }
.numeral{ font-family:var(--display); font-size:clamp(3rem,7vw,6rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--ink) 26%, transparent);
  margin:0 0 .2em; font-variation-settings:'opsz' 72; }
.h-lead{ font-size:clamp(2rem,5vw,4.2rem); font-variation-settings:'opsz' 72; }
.h-lead .lite{ font-weight:300; } /* lighter second line, echoing the hero device */
.h-mid{ font-size:clamp(1.6rem,3.2vw,2.7rem); font-variation-settings:'opsz' 44; }
.lede{ font-size:clamp(1.06rem,1.3vw,1.3rem); color:var(--whisper); max-width:56ch; line-height:1.68; }
.muted{ color:var(--whisper); }

/* ---------- 6. HEADER + LEFT DRAWER (locked patterns) ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:var(--z-header);
  display:flex; align-items:center; gap:1rem;
  padding:.8rem clamp(14px,4vw,44px);
  padding-top:calc(.8rem + env(safe-area-inset-top));
  /* Light glass from the first pixel, not only once scrolled. The hero behind it
     runs from near-white on the left to bright photography on the right, so a
     transparent bar would leave the logo and the nav illegible at one end or
     the other whichever colour they were given. */
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  transition:background-color .45s var(--e-base), box-shadow .45s var(--e-base);
  view-transition-name:site-header;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow:0 1px 0 var(--hairline-soft), 0 10px 30px -22px rgba(6,41,64,.5);
}
/* the real logo, navy on the light bar */
.brand{ display:flex; align-items:center; margin-inline:auto; text-decoration:none; }
.brand img{ width:auto; height:clamp(34px,3.6vw,42px); display:block; }
.brand .logo-white{ display:none; }
.brand .logo-navy{ display:block; }

.nav-desktop{ display:none; gap:clamp(1rem,2.2vw,2.1rem); align-items:center; }
.nav-desktop a{ text-decoration:none; font-size:.86rem; font-weight:500; letter-spacing:.01em;
  color:var(--whisper); transition:color .3s var(--e-base); position:relative; padding-block:.4rem; }
.nav-desktop a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-base); }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color:var(--navy); }
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform:scaleX(1); }

/* No box. Three rules of unequal length — a drawn mark rather than a default
   hamburger — on a 44px invisible tap target. */
.menu-toggle{
  display:grid; place-content:center; gap:5px; width:44px; height:44px; flex:none;
  background:none; border:0; padding:0; cursor:pointer; order:-1;
}
.menu-toggle span{ display:block; height:2px; border-radius:2px; background:var(--navy);
  transition:transform .38s var(--e-base), opacity .2s var(--e-base),
             width .38s var(--e-base); }
.menu-toggle span:nth-child(1){ width:22px; }
.menu-toggle span:nth-child(2){ width:22px; }
.menu-toggle span:nth-child(3){ width:13px; margin-left:0; }
.menu-toggle:hover span:nth-child(3){ width:22px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ width:22px; transform:translateY(-7px) rotate(-45deg); }

#mobile-nav{
  position:fixed; top:0; left:0; bottom:0; z-index:var(--z-drawer);
  width:clamp(260px,62vw,340px);
  transform:translateX(-105%); visibility:hidden;
  display:flex; flex-direction:column; gap:2px;
  padding:calc(26px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, #fff, hsl(199 70% 96%));
  border-right:1px solid var(--hairline-soft);
  box-shadow:0 0 70px rgba(6,41,64,.25); overflow-y:auto;
  transition:transform .34s var(--e-base), visibility 0s linear .34s;
}
#mobile-nav.open{ transform:none; visibility:visible; transition:transform .34s var(--e-base); }
/* align-self is load-bearing: #mobile-nav is a column flexbox, so the default
   align-items:stretch was pulling this 580x350 logo out to the full drawer
   width at a fixed 34px height — badly squashed. */
#mobile-nav .drawer-mark{ height:38px; width:auto; align-self:flex-start;
  flex:none; margin-bottom:1.7rem; }
#mobile-nav a{ text-decoration:none; font-family:var(--display); font-size:1.4rem;
  line-height:1; padding:.6em 0; border-bottom:1px solid var(--hairline-soft);
  min-height:48px; display:flex; align-items:center; letter-spacing:-.02em; color:var(--ink); }
#mobile-nav a:last-of-type{ border-bottom:0; }
.drawer-foot{ margin-top:auto; padding-top:1.6rem; font-size:.82rem; color:var(--whisper); }
/* overflow-wrap because the email address is a single unbreakable token wider
   than the 310px drawer */
.drawer-foot a{ font-family:var(--text); font-size:.85rem; border:0; padding:.35em 0;
  min-height:0; overflow-wrap:anywhere; }
.drawer-foot .btn{ margin-top:.9rem; width:100%; justify-content:center; }
.nav-backdrop{ position:fixed; inset:0; z-index:var(--z-backdrop);
  background:rgba(6,41,64,.42); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--e-base); }
.nav-backdrop.show{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

/* ---------- 7. BUTTONS — deep blue signal on a light canvas ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 1.7rem; border-radius:2px; border:0;
  background:var(--navy); color:#fff;
  font-family:var(--text); font-size:.92rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .34s var(--e-base), box-shadow .34s var(--e-base),
             background-color .34s var(--e-base);
  box-shadow:0 12px 28px -14px rgba(11,59,94,.75);
}
.btn:hover{ transform:translateY(-2px); background:var(--ink-deep);
  box-shadow:0 18px 38px -16px rgba(11,59,94,.9); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1em; height:1em; flex:none; transition:transform .4s var(--e-base); }
.btn:hover svg{ transform:translateX(3px); }
/* present at every width — the mobile header was a hamburger, a logo and a
   void where the primary action should be */
.btn.head-cta{ display:inline-flex; }
/* two classes on purpose: a bare .lang-mobile loses to .lang{display:inline-flex}
   declared further down the file, and the toggle printed twice on desktop */
.lang.lang-mobile{ display:none; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-size:.9rem; font-weight:600; letter-spacing:.02em; color:var(--navy);
  padding-bottom:.34rem; border-bottom:1.5px solid color-mix(in srgb,var(--navy) 35%, transparent);
  transition:border-color .35s var(--e-base), color .35s var(--e-base);
}
.btn-ghost:hover{ border-color:var(--navy); color:var(--ink-deep); }

/* ---------- 8. MOTION VERBS — one per content type ----------
   Every hidden start-state is scoped to html.js, set inline before first
   paint, so a scripting failure can never blank the page. */
.reveal-line{ display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em; }
.js .reveal-line > span{ display:block; transform:translateY(105%);
  transition:transform 1.05s var(--e-base); }
.js .in .reveal-line > span{ transform:none; }
.js .reveal-line:nth-of-type(2) > span{ transition-delay:.09s; }
.js .reveal-line:nth-of-type(3) > span{ transition-delay:.18s; }

.js .reveal-img{ clip-path:inset(0 0 100% 0); transform:scale(1.06);
  transition:clip-path 1.25s var(--e-swell), transform 1.5s var(--e-swell); }
.js .in .reveal-img, .js .reveal-img.in{ clip-path:inset(0 0 0 0); transform:none; }

.js .reveal-soft{ opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--e-base), transform .9s var(--e-base); }
.js .in .reveal-soft, .js .reveal-soft.in{ opacity:1; transform:none; }
.js .in .reveal-soft:nth-child(2){ transition-delay:.06s; }
.js .in .reveal-soft:nth-child(3){ transition-delay:.12s; }

/* ---------- 9. HERO — one film, dissolving into daylight ---------- */
.hero{ position:relative; padding:0; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; }
/* The field behind the film: a high sky that warms toward the water, with the
   light blooming from the side the film sits on — the film reads as the source. */
.hero-media{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 92% at 76% 30%, rgba(255,255,255,.92) 0%,
                    rgba(255,255,255,.42) 38%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 52%,
                    color-mix(in srgb, var(--cyan) 9%, transparent) 100%); }
.hero-vid{ position:absolute; inset:0; }
.hero-vid video{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; }
/* mobile: the video carries the hero, with a scrim deep enough for white type */
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,41,64,.42) 0 16%, rgba(6,41,64,.08) 38%,
             rgba(6,41,64,.55) 72%, rgba(6,41,64,.86) 100%); }
.hero-inner{ position:relative; z-index:2; width:100%;
  padding:0 var(--gut) calc(clamp(34px,6vh,64px) + 74px + env(safe-area-inset-bottom)); }
.hero-logo{ width:clamp(168px,42vw,230px); height:auto; margin:0 0 1.5rem; }
.hero-copy{ color:#fff; }
.hero-copy h1{ color:#fff; }
.hero-title{ font-size:clamp(2.1rem,9vw,3.1rem); line-height:1.02; letter-spacing:-.035em;
  font-variation-settings:'opsz' 60; margin:0 0 .8rem; font-style:italic; font-weight:500;
  text-shadow:0 2px 26px rgba(6,41,64,.4); }
.hero-title .lite{ font-style:normal; font-weight:300; display:block; }
.hero-tag{ font-size:clamp(.98rem,3.6vw,1.1rem); max-width:26ch;
  margin:0 0 1.7rem; line-height:1.55; color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(6,41,64,.5); }
.hero-actions{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
/* deep blue on mobile too, with a hairline of light around it so it separates
   from the darkened photograph behind */
.hero .btn{ background:var(--navy); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.34), 0 16px 36px -14px rgba(0,0,0,.75); }
.hero .btn:hover{ background:var(--ink-deep); color:#fff; }
.hero .btn-ghost{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }
.hero .btn-ghost:hover{ color:#fff; border-bottom-color:#fff; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1.8rem;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.85); }
.hero-meta span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-meta i{ width:3px; height:3px; border-radius:50%; background:var(--aqua); font-style:normal; }

/* ---------- 10. TRUST — a ruled sentence, not a stat band ---------- */
.trust{ padding-block:clamp(26px,4vw,40px); border-bottom:1px solid var(--hairline-soft);
  background:color-mix(in srgb, var(--paper) 55%, transparent); }
.trust-in{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem clamp(1.1rem,3vw,2.6rem);
  font-size:.83rem; letter-spacing:.02em; color:var(--whisper); }
.trust-in b{ font-family:var(--display); font-weight:500; font-size:1.14rem; color:var(--ink);
  font-variation-settings:'opsz' 20; letter-spacing:-.01em; }

/* ---------- 11. CHAPTER ---------- */
.chapter{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:end; }
.chapter-figure{ position:relative; }
.chapter-figure img{ width:100%; height:auto; border-radius:2px; }
.figcap{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--whisper); margin-top:.9rem; }

.arc{ margin-top:clamp(2.4rem,5vw,4rem); }
.arc-track{ position:relative; height:78px; }
.arc-track svg{ width:100%; height:100%; overflow:visible; }
.arc-path{ fill:none; stroke:var(--hairline); stroke-width:1; }
.arc-live{ fill:none; stroke:var(--cyan); stroke-width:1.6;
  stroke-dasharray:1000; stroke-dashoffset:calc(1000 - var(--warm) * 1000); }
.arc-marks{ display:flex; justify-content:space-between; margin-top:.7rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--whisper); }

/* ---------- 12. THE BOAT ---------- */
.boat{ position:relative; }
.boat-hero{ display:grid; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.boat-shot{ position:relative; overflow:hidden; background:var(--canvas-deep);
  border-radius:2px; box-shadow:0 30px 60px -40px rgba(6,41,64,.55); }
.boat-shot img{ width:100%; height:100%; object-fit:cover; }
.boat-reg{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--text); font-size:.63rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--navy);
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  padding:.42rem .72rem; border-radius:2px;
}
.spec-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--hairline); margin-top:clamp(1.6rem,3vw,2.4rem); }
.spec{ padding:1.15rem 0; border-bottom:1px solid var(--hairline-soft);
  display:flex; align-items:baseline; gap:.8rem; }
.spec:nth-child(odd){ padding-right:1.2rem; }
.spec:nth-child(even){ padding-left:1.2rem; border-left:1px solid var(--hairline-soft); }
.spec b, .spec dd{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1; color:var(--ink);
  font-variation-settings:'opsz' 32; letter-spacing:-.02em; margin:0; }
.spec span, .spec dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--whisper); }
.spec.tbd b, .spec.tbd dd{ color:color-mix(in srgb,var(--ink) 34%, transparent); }

.boat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,18px);
  margin-top:clamp(1.6rem,3vw,2.6rem); }
.boat-strip figure{ margin:0; overflow:hidden; background:var(--canvas-deep); border-radius:2px; }
.boat-strip img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--e-swell); }
.boat-strip figure:hover img{ transform:scale(1.05); }
.boat-strip figcaption{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--whisper); padding-top:.6rem; }

/* ---------- 13. TOURS — three different weights ---------- */
.tours{ position:relative; }
.tour-grid{ display:grid; gap:clamp(14px,2vw,26px); }
.tour{
  position:relative; display:grid; text-decoration:none; overflow:hidden; border-radius:2px;
  background:var(--paper);
  box-shadow:0 2px 4px -2px rgba(6,41,64,.12), 0 22px 44px -34px rgba(6,41,64,.5);
  transition:transform .5s var(--e-base), box-shadow .5s var(--e-base);
}
.tour:hover{ transform:translateY(-4px);
  box-shadow:0 3px 6px -2px rgba(6,41,64,.14), 0 34px 60px -34px rgba(6,41,64,.62); }
.tour-media{ position:relative; overflow:hidden; aspect-ratio:16/11; }
.tour-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--e-swell); }
.tour:hover .tour-media img{ transform:scale(1.055); }
.tour-body{ padding:clamp(1.5rem,3vw,2.4rem); display:flex; flex-direction:column; }
.tour-dur{ font-family:var(--display); font-size:clamp(3rem,6.4vw,5rem); line-height:.82;
  letter-spacing:-.05em; font-variation-settings:'opsz' 72; margin:0; color:var(--ink); }
.tour-dur sup{ font-size:.26em; font-family:var(--text); font-weight:600; letter-spacing:.14em;
  vertical-align:super; margin-left:.3em; color:var(--whisper); }
.tour-name{ font-family:var(--text); font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin:.9rem 0 .8rem; }
.tour-desc{ color:var(--whisper); font-size:.96rem; line-height:1.62; margin:0 0 1.3rem; max-width:44ch; }
.tour-stops{ list-style:none; padding:0; margin:0 0 1.5rem; font-size:.86rem; color:var(--whisper); }
.tour-stops li{ padding:.42rem 0; border-top:1px solid var(--hairline-soft);
  display:flex; align-items:center; gap:.7rem; }
.tour-stops li::before{ content:''; width:4px; height:4px; border-radius:50%;
  background:var(--cyan); flex:none; }
.tour-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:1.2rem; border-top:1px solid var(--hairline); }
.tour-price{ font-size:.8rem; color:var(--whisper); }
.tour-price b{ font-family:var(--display); font-size:1.28rem; color:var(--ink); font-weight:500; }
.tour-go{ display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:700;
  color:var(--navy); }
.tour-go svg{ width:1em; height:1em; transition:transform .45s var(--e-base); }
.tour:hover .tour-go svg{ transform:translateX(4px); }

/* ---------- 14. STAMP GALLERY ---------- */
.albums{ overflow:hidden; }
.album-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.8rem,3.4vw,2.8rem); }
.album-tab{ background:color-mix(in srgb,var(--paper) 70%, transparent);
  border:1px solid var(--hairline-soft); border-radius:2px;
  padding:.55rem 1rem; font-size:.76rem; font-weight:600; letter-spacing:.04em;
  color:var(--whisper); cursor:pointer;
  transition:color .35s var(--e-base), border-color .35s var(--e-base), background-color .35s var(--e-base); }
.album-tab:hover{ color:var(--navy); border-color:var(--hairline); }
.album-tab[aria-pressed="true"]{ color:#fff; background:var(--navy); border-color:var(--navy); }

.stamp-rail{
  display:flex; gap:clamp(14px,2.2vw,30px); padding:6px calc(var(--gut)) 34px;
  margin-inline:calc(var(--gut) * -1);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain;
}
.stamp-rail::-webkit-scrollbar{ display:none; }
.stamp-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.stamp-rail.dragging *{ pointer-events:none; }

.stamp{
  flex:0 0 clamp(232px,26vw,330px); scroll-snap-align:center;
  background:var(--paper); padding:11px 11px 44px;
  transform-style:preserve-3d; transition:transform .6s var(--e-base);
  position:relative; filter:drop-shadow(0 18px 30px rgba(6,41,64,.22));
}
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .stamp{
    --r:6px; --s:21px;
    -webkit-mask:
      radial-gradient(var(--r) at 50% 0,    #0000 97%, #000) 50% 0   / var(--s) 100% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 97%, #000) 50% 100%/ var(--s) 100% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 97%, #000) 0 50%   / 100% var(--s) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 97%, #000) 100% 50%/ 100% var(--s) repeat-y;
    -webkit-mask-composite:source-in;
    mask:
      radial-gradient(var(--r) at 50% 0,    #0000 97%, #000) 50% 0   / var(--s) 100% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 97%, #000) 50% 100%/ var(--s) 100% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 97%, #000) 0 50%   / 100% var(--s) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 97%, #000) 100% 50%/ 100% var(--s) repeat-y;
    mask-composite:intersect;
  }
}
/* biased below centre: 3:4 phone frames cropped to 4:5 otherwise fill with sky */
.stamp img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 58%;
  background:var(--canvas-deep); }
.stamp figcaption{
  position:absolute; left:14px; right:14px; bottom:11px; height:30px;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--text); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#5f7385;
}
.stamp figcaption em{ font-style:normal; font-family:var(--display); font-size:.92rem;
  letter-spacing:-.01em; color:var(--ink); text-transform:none; font-weight:500; }
.rail-hint{ display:flex; align-items:center; gap:.6rem; margin-top:.4rem;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--whisper); }

/* ---------- 15. CARETTA ---------- */
.caretta{ position:relative; overflow:hidden; }
.caretta-grid{ display:grid; gap:clamp(2rem,4.5vw,4rem); align-items:center; }
.caretta-figure{ position:relative; overflow:hidden; border-radius:2px; }
.caretta-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.turtle-drift{ animation:drift 21s var(--e-drift) infinite; }
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-1.6%, 1.1%, 0); }
}
.pledge{ list-style:none; padding:0; margin:1.8rem 0 0; }
.pledge li{ padding:.85rem 0; border-top:1px solid var(--hairline-soft);
  font-size:.94rem; color:var(--whisper); display:flex; gap:.9rem; align-items:flex-start; }
.pledge li svg{ width:15px; height:15px; flex:none; margin-top:.34em; stroke:var(--cyan); }

/* ---------- 16. FINALE + BOOKING ---------- */
.finale{ position:relative; padding-block:clamp(90px,14vw,190px) clamp(120px,18vw,240px);
  overflow:hidden; }
.finale-in{ position:relative; z-index:2; }
.finale h2{ font-size:clamp(2.2rem,7vw,5.4rem); line-height:.98; font-variation-settings:'opsz' 72;
  font-style:italic; font-weight:400; }

.book{ display:grid; gap:clamp(2rem,4vw,3.6rem); }
.field{ display:block; margin-bottom:1.05rem; }
.field span{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--whisper); margin-bottom:.5rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--text); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline); border-radius:2px;
  padding:.86rem .95rem;
  transition:border-color .3s var(--e-base), box-shadow .3s var(--e-base);
}
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%, transparent); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:.9rem; font-size:.88rem; min-height:1.4em; }
.form-status.ok{ color:#12724a; }
.form-status.err{ color:#b23a12; }
.contact-lines{ list-style:none; padding:0; margin:0; }
.contact-lines li{ padding:1rem 0; border-top:1px solid var(--hairline-soft); }
.contact-lines a{ text-decoration:none; font-family:var(--display); font-size:1.22rem;
  letter-spacing:-.02em; transition:color .3s var(--e-base); }
.contact-lines a:hover{ color:var(--cyan); }
.contact-lines small{ display:block; font-family:var(--text); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--whisper); margin-bottom:.35rem; }

/* ---------- 17. FOOTER ---------- */
.site-footer{ position:relative; z-index:2; padding:clamp(48px,7vw,80px) 0 0;
  border-top:1px solid var(--hairline-soft);
  background:color-mix(in srgb, var(--paper) 62%, transparent); }
.foot-grid{ display:grid; gap:2.4rem; }
.foot-nav{ display:flex; flex-direction:column; gap:.5rem; }
.foot-nav a{ text-decoration:none; font-size:.9rem; color:var(--whisper);
  transition:color .3s var(--e-base); width:fit-content; }
.foot-nav a:hover{ color:var(--navy); }
.foot-h{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin:0 0 1.05rem; }
.foot-logo{ height:38px; width:auto; margin-bottom:1.1rem; }
.credit{ margin-top:clamp(2.4rem,5vw,3.6rem); padding:1.5rem 0;
  border-top:1px solid var(--hairline-soft);
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; justify-content:space-between;
  font-size:.78rem; color:var(--whisper); }
.credit a{ color:var(--whisper); text-decoration:none; letter-spacing:.05em; transition:color .3s; }
.credit a:hover{ color:var(--navy); }

/* ---------- 18. FLOATS ---------- */
.wa-float{
  position:fixed; right:16px; z-index:var(--z-float);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#062d14; text-decoration:none;
  box-shadow:0 14px 30px -8px rgba(6,41,64,.45);
  transition:transform .4s var(--e-base);
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:27px; height:27px; }
.mobile-bar{ display:none; }

/* ---------- 19. LIGHTBOX ---------- */
.lb{ position:fixed; inset:0; z-index:1200; border:0; padding:0; width:100%; height:100%;
  max-width:none; max-height:none; background:rgba(6,41,64,.92); backdrop-filter:blur(8px); }
.lb::backdrop{ background:rgba(6,41,64,.9); }
.lb-in{ position:absolute; inset:0; display:grid; place-items:center; padding:clamp(18px,5vw,60px); }
.lb img{ max-width:100%; max-height:88vh; width:auto; object-fit:contain; border-radius:2px; }
.lb-close{ position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer; display:grid; place-items:center; }
.lb-cap{ position:absolute; left:0; right:0; bottom:clamp(14px,4vw,34px); text-align:center;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* ---------- 20. LANGUAGE SWAP (crawler-first: both languages in the DOM) ----------
   The hide side is !important so a component rule like .hero-meta span
   (0,1,1) can never out-specify it and print both languages at once. */
html:not([lang="el"]) .t-el{ display:none !important; }
html[lang="el"]       .t-en{ display:none !important; }
.blk{ display:block; }
.lang{ display:inline-flex; align-items:center; gap:.3rem; background:none; border:0;
  cursor:pointer; font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--whisper);
  padding:.5rem .2rem; transition:color .3s; }
.lang:hover{ color:var(--navy); }
.lang b{ font-weight:700; }
#mobile-nav .lang{ color:var(--whisper); text-shadow:none; }

/* ---------- 21. RESPONSIVE — mobile is its own choreography ---------- */
@media (max-width:900px){
  /* compact header actions: language + a real booking button */
  .lang.lang-mobile{ display:inline-flex; flex:none; }
  .btn.head-cta{ padding:.6rem .9rem; font-size:.78rem; gap:.35rem; flex:none;
    box-shadow:0 8px 20px -12px rgba(11,59,94,.8); }
  .btn.head-cta svg{ display:none; }
  .site-header{ gap:.5rem; padding-inline:12px; }
  .brand img{ height:34px; }
}
@media (max-width:359px){
  /* the narrowest phones: keep the button, drop the language chip */
  .lang.lang-mobile{ display:none; }
}
@media (max-width:900px){
  .mobile-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-float);
    display:grid; grid-template-columns:1fr 1fr;
    background:color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter:blur(16px); border-top:1px solid var(--hairline);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{ display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.95rem .6rem; min-height:52px; text-decoration:none;
    font-size:.82rem; font-weight:700; letter-spacing:.03em; color:var(--navy); }
  .mobile-bar a + a{ border-left:1px solid var(--hairline); }
  .mobile-bar .m-book{ background:var(--navy); color:#fff; }
  .mobile-bar svg{ width:16px; height:16px; }
  .wa-float{ bottom:calc(68px + env(safe-area-inset-bottom)); width:48px; height:48px; }
  .wa-float svg{ width:24px; height:24px; }
  .site-footer{ padding-bottom:60px; }

  /* ANTI-ENDLESS-SCROLL (MOBILE-STANDARD §3) */
  :root{ --sec:clamp(48px,8vw,92px); }
  .chapter-figure img, .caretta-figure img{ aspect-ratio:3/2; object-fit:cover; }
  .boat-shot{ aspect-ratio:4/3; }
  .boat-shot img{ position:absolute; inset:0; }
  .stop img{ aspect-ratio:16/10; }

  .boat-strip{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 16px;
    scrollbar-width:none; overscroll-behavior-x:contain; }
  .boat-strip::-webkit-scrollbar{ display:none; }
  .boat-strip figure{ flex:0 0 62vw; scroll-snap-align:center; }
  .boat-strip img{ aspect-ratio:4/5; }

  .album-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
    overscroll-behavior-x:contain; }
  .album-tabs::-webkit-scrollbar{ display:none; }
  .album-tab{ flex:none; }

  .pledge li{ padding:.62rem 0; font-size:.9rem; }

  .tour-grid{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1); padding:4px var(--gut) 22px;
    scrollbar-width:none; overscroll-behavior-x:contain; }
  .tour-grid::-webkit-scrollbar{ display:none; }
  .tour{ flex:0 0 min(82vw, 340px); scroll-snap-align:center; }
  .tour-media{ aspect-ratio:16/10; }

  .foot-grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; }
  .foot-grid > :first-child{ grid-column:span 2; }
  .site-footer{ padding-top:clamp(34px,6vw,56px); }
}

@media (min-width:901px){
  .menu-toggle{ display:none; }
  .nav-desktop{ display:flex; }
  .brand{ margin-inline:0; margin-right:auto; }
  .btn.head-cta{ display:inline-flex; }

  .hero{ align-items:center; }
  /* The film holds the right of the frame and dissolves into the daylight wash.
     Nothing sits underneath it — with no second image there is no edge to betray,
     so the fade can run long and the right side stays completely clear. */
  .hero-vid{ left:auto; right:0; width:64%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 14%,
                       rgba(0,0,0,.45) 30%, rgba(0,0,0,.86) 48%, #000 62%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 14%,
               rgba(0,0,0,.45) 30%, rgba(0,0,0,.86) 48%, #000 62%); }
  /* a whisper of the page colour over the type column only — it has cleared the
     film entirely by 58vw, so nothing veils the picture itself */
  .hero-scrim{ background:linear-gradient(90deg,
      color-mix(in srgb, var(--canvas) 66%, transparent) 0 28%,
      color-mix(in srgb, var(--canvas) 20%, transparent) 44%, transparent 58%); }
  .hero-inner{ width:min(100% - var(--gut)*2, var(--maxw)); margin-inline:auto;
    padding:0 var(--gut); }
  .hero-copy{ max-width:min(46vw, 620px); color:var(--ink); }
  .hero-copy h1{ color:var(--ink); }
  .hero-title{ font-size:clamp(2.6rem,4.2vw,4rem); text-shadow:none; }
  .hero-tag{ font-size:clamp(1.02rem,1.25vw,1.16rem); max-width:32ch;
    color:var(--whisper); text-shadow:none; }
  .hero-meta{ color:var(--whisper); }
  .hero-actions{ flex-direction:row; align-items:center; gap:1.8rem; }
  .hero .btn{ background:var(--navy); color:#fff; box-shadow:0 14px 32px -14px rgba(11,59,94,.8); }
  .hero .btn:hover{ background:var(--ink-deep); color:#fff; }
  .hero .btn-ghost{ color:var(--navy); border-bottom-color:color-mix(in srgb,var(--navy) 35%, transparent); }
  .hero .btn-ghost:hover{ color:var(--ink-deep); border-bottom-color:var(--navy); }
  .hero-inner{ padding-bottom:0; }

  .chapter{ grid-template-columns:1.05fr .95fr; }
  .chapter.flip .chapter-figure{ order:-1; }
  .boat-hero{ grid-template-columns:1.08fr .92fr; }
  .caretta-grid{ grid-template-columns:.92fr 1.08fr; }
  .book{ grid-template-columns:1.15fr .85fr; }
  .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; }

  .tour-grid{ grid-template-columns:repeat(6,1fr); }
  .tour-3{ grid-column:span 3; }
  .tour-6{ grid-column:span 3; }
  .tour-3 .tour-media, .tour-6 .tour-media{ aspect-ratio:16/10; }
  /* side-by-side cards clear aspect-ratio, or the box back-computes a width
     from its height and overflows its column onto the body copy */
  .tour-8{ grid-column:span 6; grid-template-columns:1fr 1fr; }
  .tour-8 .tour-media{ aspect-ratio:auto; min-height:420px; height:100%; }

  .stamp:hover{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(14px); }
}

@media (min-width:1200px){
  .tour-3{ grid-column:span 2; }
  .tour-6{ grid-column:span 4; grid-template-columns:1fr 1fr; }
  .tour-6 .tour-media{ aspect-ratio:auto; min-height:380px; height:100%; }
}

/* ---------- 22. REDUCED MOTION — full experience, zero movement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  /* the daylight clock is scroll-position mapping, not motion — it stays */
  :root{ animation-duration:1ms !important; }
  .js .reveal-line > span{ transform:none !important; }
  .js .reveal-img{ clip-path:none !important; transform:none !important; }
  .js .reveal-soft{ opacity:1 !important; transform:none !important; }
  .turtle-drift{ animation:none !important; }
  .stamp-rail{ scroll-snap-type:none; }
  .grain{ display:none; }
}

/* ---------- 23. VIEW TRANSITIONS ---------- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .28s var(--e-base) both; }
  ::view-transition-new(root){ animation:vt-in .42s var(--e-base) both; }
  @keyframes vt-out{ to{ opacity:0; } }
  @keyframes vt-in{ from{ opacity:0; } }
}

/* ---------- 24. PRELOADER — the real logo, drawn in ---------- */
.preload{ display:none; }
html.js .preload{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:linear-gradient(160deg, #0B3B5E 0%, #062940 55%, #04202f 100%);
  transition:opacity .8s var(--e-base), visibility 0s linear .8s;
}
html.js .preload.done{ opacity:0; visibility:hidden; }
.pl-stage{ position:relative; display:grid; place-items:center; gap:1.4rem; }
.pl-logo{ width:min(64vw,300px); height:auto;
  opacity:0; transform:translateY(14px) scale(.97);
  animation:pl-in 1.1s var(--e-base) .15s forwards; }
/* a wave of light travelling across the mark */
.pl-sheen{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pl-sheen::after{
  content:''; position:absolute; top:-20%; bottom:-20%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  filter:blur(6px); transform:translateX(-160%);
  animation:pl-sheen 1.5s var(--e-swell) .75s forwards;
}
.pl-line{ width:min(52vw,220px); height:1.5px; border-radius:2px;
  background:rgba(255,255,255,.18); overflow:hidden; }
.pl-line::after{ content:''; display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--cyan), var(--aqua));
  transform:scaleX(0); transform-origin:left;
  animation:pl-load 1.9s var(--e-base) .2s forwards; }
@keyframes pl-in{ to{ opacity:1; transform:none; } }
@keyframes pl-sheen{ to{ transform:translateX(420%); } }
@keyframes pl-load{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){
  .pl-logo,.pl-line::after,.pl-sheen::after{ animation:none; opacity:1; transform:none; }
}

/* ---------- 25. PAGE HEADER (interior pages) ---------- */
.page-head{ padding-block:clamp(148px,17vw,220px) clamp(40px,6vw,72px); }
.page-head h1{ font-size:clamp(2.4rem,6.5vw,5rem); font-variation-settings:'opsz' 72;
  font-style:italic; font-weight:450; }
.crumbs{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--whisper); margin-bottom:1.6rem; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--navy); }

/* ---- Interior page-head hero (added 2026-07-20) ----
   Fills the empty text-only head on the tour pages the client flagged as "πολύ κενό",
   and lifts the meta line: base .hero-meta is white (for the home video hero), so on a
   light page-head it was invisible on mobile and only faint on desktop. */
.page-head.has-hero{ padding-block:clamp(118px,14vw,172px) clamp(30px,5vw,56px); }
.page-head-grid{ display:grid; gap:clamp(1.8rem,4vw,3rem); align-items:center; }
.page-head-copy{ min-width:0; }
.page-head-figure{ margin:0; }
.page-head-figure picture{ display:block; overflow:hidden; border-radius:3px;
  box-shadow:0 34px 70px -34px rgba(11,59,94,.5); }
.page-head-figure img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
@media (min-width:901px){
  .page-head-grid{ grid-template-columns:1.02fr .98fr; }
  .page-head-figure img{ aspect-ratio:4/5; }
}
.page-head .hero-meta{ color:color-mix(in srgb, var(--ink) 82%, transparent); font-weight:500; }
.page-head .hero-meta i{ background:var(--cyan); }
.page-head .crumbs{ color:color-mix(in srgb, var(--ink) 70%, transparent); }

/* ---------- 26. ITINERARY (tour pages) ---------- */
.itin{ position:relative; overflow:hidden; }
.itin-track{ display:flex; gap:clamp(16px,2.4vw,34px); }
.stop{ flex:0 0 clamp(258px,30vw,392px); position:relative;
  border-top:1px solid var(--hairline); padding-top:1.4rem; }
/* 01/02… were cyan on a light ground — the client could not read them. Navy,
   larger and bolder, with a short aqua rule beneath so they still carry the brand. */
.stop-n{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--navy);
  letter-spacing:.08em; margin-bottom:.8rem; }
.stop-n::after{ content:''; display:block; width:26px; height:2px; margin-top:.45rem;
  background:var(--aqua); }
.stop img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:1.1rem;
  background:var(--canvas-deep); border-radius:2px; }
.stop h3{ font-size:1.4rem; margin-bottom:.6rem; font-variation-settings:'opsz' 28; }
.stop p{ font-size:.92rem; color:var(--whisper); line-height:1.62; margin:0; }
.stop-time{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--whisper); margin-top:.9rem; }
.itin-progress{ height:1px; background:var(--hairline); margin-top:clamp(2rem,4vw,3rem);
  position:relative; container-type:inline-size; }
.itin-progress i{ position:absolute; left:0; top:-3px; height:7px; width:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px 2px color-mix(in srgb,var(--cyan) 55%, transparent);
  transform:translateX(calc(var(--p,0) * (100cqw - 7px))); }
.itin-stage{ position:relative; }
.itin.pinned .itin-sticky{ position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.itin.pinned .itin-track{ will-change:transform; padding-inline:var(--gut); }
.itin:not(.pinned) .itin-track{
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 var(--gut) 26px; margin-inline:calc(var(--gut) * -1);
  overscroll-behavior-x:contain; }
.itin:not(.pinned) .itin-track::-webkit-scrollbar{ display:none; }
.itin:not(.pinned) .stop{ scroll-snap-align:start; }
.itin-head{ margin-bottom:clamp(1.6rem,3vw,2.6rem); }

/* included checklist */
.incl{ display:grid; gap:0; list-style:none; padding:0; margin:0; }
.incl li{ display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0;
  border-bottom:1px solid var(--hairline-soft); font-size:.94rem; }
.incl svg{ width:15px; height:15px; flex:none; margin-top:.36em; stroke:var(--cyan); }
.incl li.no{ color:var(--whisper); }
.incl li.no svg{ stroke:color-mix(in srgb,var(--ink) 38%, transparent); }

/* map */
.map-wrap{ position:relative; border:1px solid var(--hairline-soft); background:var(--paper);
  overflow:hidden; border-radius:2px; box-shadow:0 24px 50px -40px rgba(6,41,64,.5); }
.zmap{ width:100%; height:auto; display:block; }
.zmap .island{ fill:hsl(199 46% 88%); stroke:hsl(199 40% 72%); stroke-width:.6; }
.zmap .route{ fill:none; stroke:var(--ember); stroke-width:1.6; stroke-dasharray:5 4;
  stroke-linecap:round; opacity:.95; }
@media (prefers-reduced-motion:no-preference){
  .zmap .route{ animation:flow 22s linear infinite; }
  @keyframes flow{ to{ stroke-dashoffset:-180; } }
}
.zmap .pin{ fill:var(--ember); }
.zmap .pin-base{ fill:var(--navy); }
.zmap text{ font-family:var(--text); font-size:5.4px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; fill:var(--navy); }
.zmap .lbl-sm{ font-size:4.4px; fill:color-mix(in srgb,var(--ink) 62%, transparent); }

/* FAQ */
.faq details{ border-bottom:1px solid var(--hairline-soft); }
.faq summary{ cursor:pointer; list-style:none; padding:1.35rem 2.4rem 1.35rem 0;
  position:relative; font-family:var(--display); font-size:clamp(1.06rem,1.8vw,1.38rem);
  letter-spacing:-.02em; font-variation-settings:'opsz' 24; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; position:absolute; right:4px; top:50%; width:13px; height:1.5px;
  background:var(--navy); transition:transform .4s var(--e-base); }
.faq summary::before{ content:''; position:absolute; right:9.7px; top:50%; width:1.5px; height:13px;
  background:var(--navy); transform:translateY(-50%); transition:transform .4s var(--e-base), opacity .3s; }
.faq details[open] summary::before{ opacity:0; transform:translateY(-50%) rotate(90deg); }
.faq .ans{ padding:0 0 1.5rem; color:var(--whisper); max-width:66ch; }

/* prose (legal pages) */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin:2.4rem 0 .9rem;
  font-variation-settings:'opsz' 32; }
.prose h3{ font-size:1.14rem; margin:1.8rem 0 .6rem; font-variation-settings:'opsz' 20; }
.prose p, .prose li{ color:var(--whisper); font-size:1rem; }
.prose ul{ padding-left:1.15rem; }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--navy); }
.tbd{ color:#b23a12; font-style:italic; }

/* ---------- 27. UTILITIES ---------- */
.stack-sm > * + *{ margin-top:.9rem; }
.stack > * + *{ margin-top:clamp(1.4rem,2.6vw,2.2rem); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
a.sr-only:focus{ position:fixed; top:10px; left:10px; z-index:2100;
  width:auto; height:auto; margin:0; clip:auto; overflow:visible;
  padding:.8rem 1.2rem; background:var(--navy); color:#fff;
  font-size:.9rem; font-weight:600; border-radius:2px; }
.split-2{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); }
@media (min-width:901px){ .split-2{ grid-template-columns:1fr 1fr; } }
.card{ border:1px solid var(--hairline-soft); padding:clamp(1.5rem,3vw,2.3rem);
  background:color-mix(in srgb, var(--paper) 82%, transparent); border-radius:2px;
  box-shadow:0 18px 40px -36px rgba(6,41,64,.5); }
.policy{ border-color:color-mix(in srgb, var(--ember) 34%, transparent);
  background:color-mix(in srgb, #FFF6EF 78%, transparent); }

/* ---------- 28. HERO LOGO — white over the video, navy over the light field ---------- */
.hero-logo.logo-navy{ display:none; }
@media (min-width:901px){
  .hero-logo.logo-white{ display:none; }
  .hero-logo.logo-navy{ display:block; }
  .hero-logo{ width:clamp(200px,17vw,250px); margin-bottom:1.8rem; }
}

/* ==========================================================================
   HOME REDESIGN 2026-07-20 — cruise-in-motion reel + editorial tour rows
   ========================================================================== */

/* ---- Cruise in motion — a small, framed portrait reel that reads as a component
        (offset aqua plate behind it so it "pops"), never a full-bleed slab ---- */
.reel-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
.reel-copy{ min-width:0; }
.reel-media{ margin:0; }
.reel-frame{ position:relative; width:min(290px,86vw); margin:0 auto; }
/* the decorative plate that sits behind, offset down-right */
.reel-frame::before{ content:''; position:absolute; z-index:0; inset:16px -16px -16px 16px;
  border:1.5px solid var(--aqua); border-radius:14px; pointer-events:none; }
.reel-video{ position:relative; z-index:1; display:block; width:100%; height:auto;
  aspect-ratio:9/16; object-fit:cover; border-radius:12px; background:var(--ink-deep);
  border:1px solid color-mix(in srgb, var(--navy) 26%, transparent);
  box-shadow:0 26px 54px -26px rgba(11,59,94,.55); }
.reel .figcap{ text-align:center; margin-top:1.5rem; }
@media (min-width:781px){
  .reel-grid{ grid-template-columns:1.12fr .88fr; }
  .reel-media{ order:2; }
}

/* ---- Tours as editorial feature rows (replaces the weak three-card grid) ---- */
.tour-rows{ display:grid; gap:clamp(2.6rem,5.5vw,4.8rem); }
.tour-row{ display:grid; gap:clamp(1.3rem,3vw,2.4rem); align-items:center;
  text-decoration:none; color:inherit; }
.tour-row:focus-visible{ outline:2px solid var(--cyan); outline-offset:6px; border-radius:4px; }
.tour-row-media{ margin:0; border-radius:5px; overflow:hidden; position:relative;
  background:var(--canvas-deep); box-shadow:0 32px 66px -38px rgba(11,59,94,.6); }
.tour-row-media img{ display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:16/11; transition:transform 1.05s var(--e-base); }
.tour-row:hover .tour-row-media img,
.tour-row:focus-visible .tour-row-media img{ transform:scale(1.045); }
.tour-row-num{ font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(3rem,6vw,4.8rem); line-height:.78; color:var(--navy);
  letter-spacing:-.02em; margin:0; font-variation-settings:'opsz' 60; }
.tour-row-num sup{ font-size:.32em; font-style:normal; font-weight:600; margin-left:.12em;
  letter-spacing:.12em; color:var(--cyan); }
.tour-row-name{ font-family:var(--display); font-style:italic; font-weight:450;
  font-size:clamp(1.65rem,3vw,2.5rem); font-variation-settings:'opsz' 40;
  margin:.35rem 0 .9rem; line-height:1.05; color:var(--ink); }
.tour-row-desc{ color:var(--whisper); font-size:1.02rem; line-height:1.66; max-width:48ch; margin:0; }
.tour-row-stops{ list-style:none; padding:0; margin:1.3rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.tour-row-stops li{ font-size:.71rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--navy); border:1px solid var(--hairline); border-radius:100px; padding:.42rem .85rem;
  background:color-mix(in srgb, var(--paper) 65%, transparent); }
.tour-row-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem; margin-top:1.7rem; }
.tour-row-price{ font-size:.82rem; letter-spacing:.02em; color:var(--whisper); }
.tour-row-cta{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--text);
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:var(--navy); padding:.72rem 1.25rem; border-radius:100px;
  transition:background .3s var(--e-base); }
.tour-row-cta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  transition:transform .3s var(--e-base); }
.tour-row:hover .tour-row-cta{ background:var(--ink-deep); }
.tour-row:hover .tour-row-cta svg{ transform:translateX(3px); }
@media (min-width:781px){
  .tour-row{ grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr); gap:clamp(2.2rem,4vw,4rem); }
  .tour-row-media{ max-width:400px; }
  .tour-row-media img{ aspect-ratio:4/5; }
  .tour-row:nth-child(odd) .tour-row-media{ justify-self:start; }
  .tour-row:nth-child(even) .tour-row-media{ order:2; justify-self:end; }
}

/* ==========================================================================
   BELOW-HERO PHOTO UPGRADE 2026-07-27 — contained, portrait, elegantly framed
   (matches the reel/tour-row treatment; boat-strip becomes sharper 3-up cards)
   ========================================================================== */
.chapter-figure img{ border-radius:12px; box-shadow:0 26px 54px -34px rgba(11,59,94,.5); }
.caretta-figure{ border-radius:12px; overflow:hidden; box-shadow:0 26px 54px -34px rgba(11,59,94,.5); }
.caretta-figure img{ border-radius:0; }
.boat-shot{ border-radius:12px; box-shadow:0 26px 54px -34px rgba(11,59,94,.5); }

/* boat-strip → a tighter, sharper 3-up of portrait cards with captions on the image */
.boat-strip{ max-width:940px; margin-inline:auto; gap:clamp(10px,1.6vw,18px); }
.boat-strip figure{ position:relative; border-radius:12px; overflow:hidden;
  box-shadow:0 22px 46px -30px rgba(11,59,94,.5); }
.boat-strip img{ aspect-ratio:4/5; object-fit:cover; object-position:center 45%; }
.boat-strip figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0;
  padding:1.9rem .85rem .78rem; color:#fff; font-weight:600;
  background:linear-gradient(transparent, rgba(6,41,64,.82)); }

@media (min-width:781px){
  /* keep the big feature stills clearly portrait but not towering — narrow the
     figure column and align it to the outer edge, text keeps the room (like the tours) */
  .chapter{ grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr); }
  .chapter.flip{ grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); }
  .chapter-figure{ justify-self:end; max-width:400px; }
  .chapter.flip .chapter-figure{ justify-self:start; }
  .chapter-figure img{ aspect-ratio:4/5; object-fit:cover; }
  .caretta-grid{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); }
  .caretta-figure{ max-width:400px; justify-self:start; }
  .caretta-figure img{ aspect-ratio:4/5; object-fit:cover; }
  .boat-hero{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
  .boat-shot{ max-width:430px; justify-self:start; }
  .boat-shot img{ aspect-ratio:4/5; height:auto; object-fit:cover; }
}