/* ============================================================
   BAYWATCH HOTEL — Chrani, Messinia
   Dark Mediterranean-editorial design system
   Palette locked from the property: olive-marine ink,
   limestone bone, one burnished-gold accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0b1413;
  --ink-1:      #0e1a18;
  --ink-2:      #122220;
  --ink-3:      #18302b;
  --bone:       #f1e9da;
  --bone-2:     #cdbfa9;
  --bone-3:     rgba(241,233,218,.62);
  --sand:       #d9c6a3;
  --gold:       #c6a25a;
  --gold-2:     #e0c389;
  --line:       rgba(241,233,218,.14);
  --line-soft:  rgba(241,233,218,.08);

  /* Display = Playfair Display — a high-contrast fashion/boutique serif with
     native Greek AND Cyrillic, used for showpiece headings. Serif = warm
     Garamond for quotes/accents. Sans = Commissioner for body/labels. */
  --display: "Playfair Display", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --serif: "EB Garamond", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Commissioner", "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1400px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-grain: 90;
  --z-nav: 70;
  --z-menu: 80;
  --z-loader: 100;
}
/* Greek reads best in the original Cormorant Garamond; other languages keep EB Garamond */
html[lang="el"]{
  --serif: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
}
/* Playfair Display ships Cyrillic, so Russian keeps the same display face. */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,canvas{ display:block; max-width:100%; }
picture{ display:contents; } /* WebP <picture> wrappers are layout-transparent */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }

/* lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:200; background:var(--gold); color:var(--ink);
  padding:.7rem 1.2rem; border-radius:var(--radius); font-size:.85rem; transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Reveal initial states (only when JS active) ---------- */
.js .reveal-fade,
.js .reveal-img img,
.js .reveal-line span,
.js .hero__title .line span,
.js .r-word{ will-change:transform,opacity; }
.js .reveal-fade{ opacity:0; }
.js .reveal-img{ overflow:hidden; position:relative; }
.js .reveal-img img{ transform:scale(1.12); }
/* gold scan-line that travels down an image as it reveals */
.ir__sweep{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:3; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(224,195,137,.95) 45%, rgba(255,247,230,1) 50%, rgba(224,195,137,.95) 55%, transparent);
  box-shadow:0 0 22px 3px rgba(224,195,137,.45);
}
/* vertical variant for left/right wipes */
.ir__sweep--v{
  left:0; right:auto; top:0; bottom:0; width:2px; height:100%;
  background:linear-gradient(180deg, transparent, rgba(224,195,137,.95) 45%, rgba(255,247,230,1) 50%, rgba(224,195,137,.95) 55%, transparent);
}

/* ---------- Display type ---------- */
/* GFS Didot (Didone) on the showpiece headings; the gold italic accent words
   stay on Cormorant Garamond so they render as REAL italics, not faux-slanted. */
.h-display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem, 5.4vw, 5rem);
  line-height:1.04;
  letter-spacing:-.005em;
  color:var(--bone);
}
.h-display em{ font-family:var(--serif); font-style:italic; color:var(--gold); font-weight:400; }
.story__kicker,.section-head .story__kicker{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.34em;
  color:var(--gold); font-weight:500; margin-bottom:1.4rem;
}

/* ============================================================
   GRAIN + LOADER
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.loader{
  position:fixed; inset:0; z-index:var(--z-loader); background:var(--ink);
  display:grid; place-items:center;
  /* Pure-CSS failsafe: if JS never dismisses the curtain (error / throttled rAF),
     fade it out anyway so the hero is never permanently hidden. JS normally
     removes it ~2s in, well before this fires. */
  animation:loaderFailsafe .8s ease 5s forwards;
}
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader__inner{ width:min(86vw,var(--maxw)); display:flex; justify-content:space-between; align-items:flex-end; padding-inline:var(--gutter); }
.loader__mark{ font-family:var(--serif); font-size:clamp(2rem,7vw,5rem); letter-spacing:.04em; color:var(--bone); }
.loader__count{ font-family:var(--serif); font-size:clamp(1.4rem,4vw,2.6rem); color:var(--gold); }
.loader.is-done{ pointer-events:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:var(--z-nav);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:1.6rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  transition:padding .5s var(--ease);
}
.nav.is-scrolled{
  background:rgba(8,16,15,.72); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line-soft);
}
.nav.is-scrolled .nav__inner{ padding-block:1rem; }
.nav__brand{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-mark{ font-family:var(--display); font-size:1.5rem; letter-spacing:.18em; color:var(--bone); }
.nav__brand-mark em{ font-style:normal; color:var(--gold); }
.nav__brand-sub{ font-size:.6rem; letter-spacing:.36em; text-transform:uppercase; color:var(--bone-3); margin-top:.45rem; }
.nav__links{ display:flex; align-items:center; gap:clamp(.6rem, 1vw, 1.5rem); }
.nav__links a{
  font-size:.7rem; letter-spacing:.03em; white-space:nowrap; color:var(--bone-2); position:relative; padding-block:.3rem;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Nav dropdown groups (Το Ξενοδοχείο › Τα Δωμάτια · Η Περιοχή › Ο Τόπος Μας/Γεύσεις) */
.nav__group{ position:relative; display:flex; align-items:center; padding-bottom:1.4rem; margin-bottom:-1.4rem; }
.nav__group > a{ padding-right:1rem; }
.nav__group > a::before{
  content:""; position:absolute; right:.2rem; top:50%; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); opacity:.55;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.nav__group:hover > a::before,
.nav__group:focus-within > a::before{ transform:translateY(-30%) rotate(225deg); opacity:1; }
.nav__drop{
  position:absolute; top:100%; left:50%; min-width:200px;
  display:flex; flex-direction:column; padding:.5rem;
  background:rgba(11,20,19,.95); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-soft); border-radius:3px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.nav__drop a{ white-space:nowrap; padding:.55rem .75rem; font-size:.72rem; color:var(--bone-2); border-radius:2px; }
.nav__drop a::after{ display:none; }
.nav__drop a:hover{ background:var(--ink-3); color:var(--bone); }
.nav__group:hover .nav__drop,
.nav__group:focus-within .nav__drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }

.nav__actions{ display:flex; align-items:center; gap:.9rem; }
.nav__actions .btn{ padding:.78rem 1.35rem; font-size:.68rem; letter-spacing:.12em; }
.nav__lang{ display:flex; gap:.1rem; border:1px solid var(--line); border-radius:999px; padding:.18rem; }
.nav__lang button{ font-size:.62rem; letter-spacing:.08em; padding:.3rem .5rem; border-radius:999px; color:var(--bone-3); transition:.3s var(--ease); }
.nav__lang button.is-active{ background:var(--bone); color:var(--ink); }

/* Buttons — squared, couture fill-slide */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; white-space:nowrap;
  font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05rem 2.1rem; border-radius:1px; overflow:hidden; isolation:isolate;
  transition:color .55s var(--ease), border-color .55s var(--ease), transform .4s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transition:transform .6s var(--ease); }
.btn__arrow{ transition:transform .45s var(--ease); font-size:1.1em; }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }
.btn:active{ transform:scale(.98); }
.btn--gold{ background:var(--gold); color:var(--ink); font-weight:600; }
.btn--gold::before{ background:var(--gold-2); transform:translateY(101%); }
.btn--gold:hover{ color:var(--ink); }
.btn--gold:hover::before{ transform:translateY(0); }
.btn--ghost{ border:1px solid rgba(224,195,137,.5); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--gold); }
.btn--ghost::before{ background:var(--gold); transform:translateY(101%); }
.btn--ghost:hover{ color:var(--ink); }
.btn--ghost:hover::before{ transform:translateY(0); }
.btn--lg{ padding:1.2rem 2.7rem; font-size:.8rem; letter-spacing:.2em; }
/* long-label CTAs keep natural case so Greek sentences stay legible */
.btn--text{ text-transform:none; letter-spacing:.08em; font-weight:500; }

.nav__burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:999px; position:relative; }
.nav__burger span{ position:absolute; left:11px; width:20px; height:1.5px; background:var(--bone); transition:.4s var(--ease); }
.nav__burger span:first-child{ top:18px; }
.nav__burger span:last-child{ top:23px; }
.nav__burger.is-open span:first-child{ top:20px; transform:rotate(45deg); }
.nav__burger.is-open span:last-child{ top:20px; transform:rotate(-45deg); }

/* Mobile menu */
.menu{
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--ink-1);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gutter);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.menu__nav a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.4rem); color:var(--bone); padding:.4rem 0;
  display:flex; align-items:baseline; gap:1.2rem; opacity:.4; transition:opacity .4s var(--ease), color .4s var(--ease);
}
.menu__nav a span{ font-family:var(--sans); font-size:.8rem; color:var(--gold); letter-spacing:.1em; }
.menu__nav a:hover{ opacity:1; color:var(--gold-2); }
/* Nested sub-items under a parent (Τα Δωμάτια · Ο Τόπος Μας / Γεύσεις) */
.menu__sub{ display:flex; flex-direction:column; margin:.1rem 0 .6rem 1.1rem; padding-left:1rem; border-left:1px solid var(--line-soft); }
.menu__sub a{ font-size:clamp(1.05rem,4.6vw,1.5rem); padding:.28rem 0; opacity:.5; }
.menu__sub a:hover{ opacity:1; }
/* parent row + tap-to-expand chevron (mobile accordion) */
.menu__row{ display:flex; align-items:center; gap:1rem; }
.menu__row > a{ flex:1 1 auto; }
.menu__toggle{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--gold-2); margin-left:auto; }
.menu__chev{ width:11px; height:11px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .4s var(--ease); }
.menu__row.is-open .menu__chev{ transform:translateY(1px) rotate(225deg); }
.menu__sub--acc{ max-height:0; opacity:0; overflow:hidden; margin-top:0; margin-bottom:0; transition:max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease); }
.menu__sub--acc.is-open{ max-height:50vh; opacity:1; margin-top:.1rem; margin-bottom:.6rem; }
.menu__foot{ display:flex; flex-direction:column; gap:1.25rem; margin-top:3rem; color:var(--bone-3); font-size:.9rem; }
.menu__foot > a{ align-self:flex-start; }
.menu__lang{ display:flex; gap:.25rem; }
.menu__lang button{ font-size:.62rem; letter-spacing:.1em; padding:.35rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:var(--bone-3); transition:.25s var(--ease); }
.menu__lang button.is-active{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1.04); transition:opacity 2s ease-in-out, transform 7s ease-out; will-change:opacity, transform;
}
/* Gentle push-in on the active clip via a TRANSITIONED transform (no keyframe).
   On swap the scale eases back instead of snapping, so there is no zoom "glitch". */
.hero__video.is-active{ opacity:1; transform:scale(1.1); }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,16,15,.55) 0%, rgba(8,16,15,.05) 26%, rgba(8,16,15,.12) 55%, rgba(8,16,15,.82) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(8,16,15,.66), transparent 60%);
}
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) clamp(3rem,8vh,6rem); }
.hero__eyebrow{ overflow:hidden; }
.hero__eyebrow span{ display:inline-block; font-size:.74rem; text-transform:uppercase; letter-spacing:.36em; color:var(--gold-2); margin-bottom:1.6rem; }
.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.9rem, 8.6vw, 8rem); line-height:.98; letter-spacing:-.01em; color:var(--bone);
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line span{ display:block; }
.hero__title em{ font-family:var(--serif); font-style:italic; color:var(--gold-2); }
.hero__lede{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--bone); max-width:36ch; margin:2rem 0 2.4rem; font-weight:300; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__meta{
  position:absolute; right:var(--gutter); bottom:clamp(3rem,8vh,6rem); z-index:2;
  display:flex; align-items:center; gap:1.4rem;
}
.hero__coords{ font-size:.7rem; letter-spacing:.22em; color:var(--bone-3); writing-mode:vertical-rl; }

@media (max-width:680px){ .hero__meta{ display:none; } }

/* ============================================================
   STORY / MANIFESTO
   ============================================================ */
.story{ padding:clamp(7rem,16vh,13rem) 0; border-bottom:1px solid var(--line-soft); }
.story__statement{
  font-family:var(--display); font-weight:400; font-size:clamp(2.1rem,5.2vw,4.6rem); line-height:1.1;
  letter-spacing:-.005em; max-width:18ch; margin:0 0 clamp(3rem,7vw,5rem);
}
.story__statement em{ font-family:var(--serif); font-style:italic; color:var(--gold); }
.r-word{ display:inline-block; }
.story__cols{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:end; }
.story__cols p{ font-size:1.1rem; color:var(--bone-3); max-width:46ch; }
.story__figures{ display:flex; flex-direction:column; gap:1.6rem; }
.story__figures li{ display:flex; align-items:baseline; gap:1.2rem; border-top:1px solid var(--line); padding-top:1.2rem; }
.story__figures b{ font-family:var(--display); font-size:clamp(2.6rem,4.2vw,3.7rem); color:var(--gold); line-height:1; font-weight:400; min-width:3ch; }
.story__figures b i{ font-style:normal; font-size:.42em; letter-spacing:.04em; margin-left:.1em; }
.story__figures span{ font-size:.82rem; letter-spacing:.05em; color:var(--bone-2); text-transform:uppercase; }

/* Statement manifesto — one large paragraph that lights up word-by-word on scroll */
.story--statement{ padding:clamp(8rem,20vh,16rem) 0; }
.story__reveal{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.7rem, 3.8vw, 3.35rem);
  line-height:1.4;
  letter-spacing:.002em;
  color:var(--bone);
  max-width:min(54ch, 100%);
  margin:0 auto;
  text-wrap:pretty;
}
.story__reveal .rw{ display:inline-block; will-change:opacity; }
.story__reveal .lp{ color:var(--gold-2); text-decoration:none; box-shadow:inset 0 -1px 0 0 rgba(198,162,90,.5); transition:box-shadow .35s var(--ease); }
.story__reveal .lp:hover{ box-shadow:inset 0 -2px 0 0 var(--gold); }
@media (max-width:760px){ .story__reveal{ max-width:30ch; } }

/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; min-height:90vh; align-items:stretch; border-bottom:1px solid var(--line-soft); }
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; overflow:hidden; }
.split__media img{ width:100%; height:100%; object-fit:cover; min-height:60vh; }
.split__caption{
  position:absolute; left:1.6rem; bottom:1.4rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); background:rgba(8,16,15,.5); backdrop-filter:blur(8px); padding:.5rem .9rem; border-radius:999px;
}
.split__body{ display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem); }
.split__body p{ color:var(--bone-3); font-size:1.08rem; max-width:46ch; }
.setting__facts{ display:flex; flex-direction:column; gap:0; margin-top:1rem; }
.setting__facts div{ display:flex; justify-content:space-between; gap:2rem; padding:1rem 0; border-top:1px solid var(--line); }
.setting__facts dt{ color:var(--bone-2); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.setting__facts dd{ color:var(--bone); font-family:var(--serif); font-size:1.2rem; text-align:right; }

/* table menu */
.table__menu{ display:flex; flex-direction:column; margin-top:.5rem; }
.table__menu li{ display:flex; align-items:baseline; gap:1.4rem; padding:1rem 0; border-top:1px solid var(--line); }
.table__menu span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); min-width:7ch; }
.table__menu b{ font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--bone); }

/* ============================================================
   STAY / BENTO
   ============================================================ */
.stay{ padding:clamp(7rem,15vh,12rem) 0; border-bottom:1px solid var(--line-soft); }
.section-head{ max-width:40ch; margin-bottom:clamp(3rem,7vw,5rem); }
.section-head__sub{ color:var(--bone-3); font-size:1.08rem; margin-top:1.4rem; }
.bento{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(180px,auto); gap:1rem; }
.bento__cell{ position:relative; overflow:hidden; border-radius:var(--radius); }
.bento__cell img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.bento__cell:hover img{ transform:scale(1.05); }
.bento__cell--tall{ grid-column:span 5; grid-row:span 2; }
.bento__cell--wide{ grid-column:span 7; grid-row:span 1; }
.bento__amenity{ grid-column:span 4; grid-row:span 1; background:var(--ink-2); border:1px solid var(--line); padding:1.8rem; }
.bento__cell--grounds{ grid-column:span 3; grid-row:span 1; }
.bento__label{
  position:absolute; inset:auto 0 0 0; padding:1.6rem; z-index:2;
  background:linear-gradient(0deg, rgba(8,16,15,.82), transparent);
}
.bento__label h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--bone); }
.bento__label p{ font-size:.85rem; color:var(--bone-2); margin-top:.3rem; max-width:32ch; }
.bento__amenity h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--gold-2); margin-bottom:1.2rem; }
.amenity-list{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
.amenity-list li{ font-size:.92rem; color:var(--bone-2); padding-left:1.1rem; position:relative; }
.amenity-list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border:1px solid var(--gold); border-radius:50%; }

/* ============================================================
   EXPERIENCES (horizontal pin)
   ============================================================ */
.exp{ background:var(--ink-1); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.exp__intro{ padding:clamp(6rem,13vh,10rem) var(--gutter) clamp(3rem,6vh,5rem); max-width:var(--maxw); }
.exp__track-wrap{ position:relative; }
/* desktop: pinned track is centred in the viewport so panels never slip under the nav */
@media (min-width:861px){
  .exp__track-wrap{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
}
.exp__track{ display:flex; gap:clamp(1.5rem,3vw,3rem); padding:0 var(--gutter); }
.exp__panel{
  position:relative; flex:0 0 clamp(280px, 40vw, 520px); height:min(62vh, 600px); min-height:400px; border-radius:var(--radius);
  overflow:hidden; display:block; color:var(--bone);
}
.exp__panel-bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.4s var(--ease);
}
.exp__panel::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,16,15,.12) 0%, rgba(8,16,15,.18) 42%, rgba(8,16,15,.92) 100%);
}
.exp__panel:hover .exp__panel-bg{ transform:scale(1.12); }
.exp__panel-inner{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(1.6rem,3vw,2.6rem); }
.exp__num{ font-family:var(--serif); font-size:1rem; color:var(--gold); letter-spacing:.1em; }
.exp__panel h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--bone); margin:.6rem 0 .8rem; line-height:1.05; }
.exp__panel p{ color:var(--bone-2); font-size:1rem; max-width:38ch; }
.exp__tag{ display:inline-block; margin-top:1.2rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-2); border-top:1px solid var(--line); padding-top:.9rem; }
.exp__progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(2rem,5vh,3.5rem); height:1px; background:var(--line); }
.exp__progress span{ display:block; height:100%; width:0; background:var(--gold); transform-origin:left; }

/* ============================================================
   GALLERY MARQUEE
   ============================================================ */
.gallery{ padding:clamp(4rem,9vh,7rem) 0; border-bottom:1px solid var(--line-soft); }
.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__row{ display:flex; gap:1.2rem; width:max-content; will-change:transform; }
.marquee__row figure{ width:clamp(220px,26vw,360px); aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); flex:none; }
.marquee__row img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:filter .5s var(--ease); }
.marquee__row figure:hover img{ filter:saturate(1.08); }

/* ============================================================
   VOICES
   ============================================================ */
.voices{ padding:clamp(7rem,15vh,12rem) 0; border-bottom:1px solid var(--line-soft); }
.voices__head{ margin-bottom:clamp(3rem,7vw,5rem); }
/* staggered testimonial wall */
.voices__wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); align-items:start; }
.vcol{ display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.6rem); }
.vcol--down{ margin-top:clamp(2.5rem,6vw,5rem); }
.vcard{
  position:relative; display:flex; flex-direction:column; gap:1.1rem; overflow:hidden;
  padding:clamp(1.6rem,2.4vw,2.2rem); border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(180deg, rgba(241,233,218,.045), rgba(241,233,218,.012));
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.vcard:hover{ transform:translateY(-4px); border-color:rgba(198,162,90,.4); }
.vcard::before{ content:"\201C"; position:absolute; top:.1rem; right:1.1rem; font-family:var(--serif); font-size:4rem; line-height:1; color:var(--gold); opacity:.16; }
.vcard__stars{ color:var(--gold); letter-spacing:.2em; font-size:.82rem; }
.vcard p{ font-family:var(--serif); font-size:clamp(1.12rem,1.5vw,1.42rem); line-height:1.45; color:var(--bone); font-style:italic; }
.vcard cite{ font-style:normal; font-size:.86rem; letter-spacing:.04em; color:var(--gold-2); display:flex; flex-direction:column; gap:.2rem; }
.vcard cite span{ color:var(--bone-3); letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; }
@media (max-width:1024px){ .voices__wall{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .voices__wall{ grid-template-columns:1fr; } .vcol--down{ margin-top:0; } }

/* ============================================================
   PLAN
   ============================================================ */
.plan{ padding:clamp(7rem,15vh,12rem) 0; border-bottom:1px solid var(--line-soft); }
.plan__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.plan__distances{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.plan__distances li{ padding:1.8rem 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.4rem; }
.plan__distances li:nth-child(odd){ padding-right:1.5rem; }
.plan__distances b{ font-family:var(--display); font-size:clamp(2.8rem,4.7vw,4.1rem); color:var(--bone); line-height:1; font-weight:400; }
.plan__distances b i{ font-style:normal; font-size:.34em; color:var(--gold); margin-left:.15em; letter-spacing:.04em; }
.plan__distances span{ font-size:.82rem; letter-spacing:.06em; color:var(--bone-2); text-transform:uppercase; }
.plan__seasons h3{ font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--gold-2); margin-bottom:1.4rem; }
.season{ padding:1.2rem 0; border-top:1px solid var(--line); }
.season span{ display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); margin-bottom:.4rem; }
.season p{ color:var(--bone-3); font-size:1rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:clamp(7rem,15vh,12rem) 0; border-bottom:1px solid var(--line-soft); }
.faq .h-display{ margin-bottom:clamp(2.5rem,6vw,4rem); }
.faq__list{ max-width:880px; }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.7rem 0; display:flex; align-items:center; justify-content:space-between; gap:2rem;
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--bone); transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-2); }
.faq__plus{ position:relative; width:18px; height:18px; flex:none; }
.faq__plus::before,.faq__plus::after{ content:""; position:absolute; background:var(--gold); transition:transform .4s var(--ease); }
.faq__plus::before{ top:8px; left:0; width:18px; height:1.5px; }
.faq__plus::after{ left:8px; top:0; width:1.5px; height:18px; }
.faq__item[open] .faq__plus::after{ transform:scaleY(0); }
.faq__answer{ overflow:hidden; }
.faq__answer p{ color:var(--bone-3); font-size:1.05rem; max-width:62ch; padding:0 0 1.8rem; }

/* ============================================================
   RESERVE
   ============================================================ */
.reserve{ position:relative; padding:clamp(8rem,18vh,14rem) 0; overflow:hidden; background:var(--ink-1); }
.reserve__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; }
.reserve__scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 100% at 50% 0%, transparent, rgba(8,16,15,.55)); }
.reserve__inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.reserve__title{ font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,7vw,6rem); line-height:1.04; letter-spacing:-.005em; margin:1rem 0 1.8rem; }
.reserve__title em{ font-family:var(--serif); font-style:italic; color:var(--gold); }
.reserve__lede{ color:var(--bone-3); font-size:1.15rem; max-width:48ch; margin-bottom:2.6rem; }
.reserve__cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.reserve__contact{ display:flex; gap:clamp(1.5rem,5vw,4rem); flex-wrap:wrap; justify-content:center; margin-top:3.5rem; }
.reserve__contact li{ display:flex; flex-direction:column; gap:.4rem; }
.reserve__contact span{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.reserve__contact a{ color:var(--bone); font-family:var(--serif); font-size:1.15rem; transition:color .3s var(--ease); }
.reserve__contact a:hover{ color:var(--gold-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(4rem,9vh,7rem) 0 2.5rem; background:var(--ink); }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(2rem,5vw,4rem); padding-bottom:clamp(3rem,7vh,5rem); border-bottom:1px solid var(--line-soft); }
.footer__mark{ font-family:var(--serif); font-size:2rem; letter-spacing:.14em; color:var(--bone); }
.footer__mark em{ font-style:normal; color:var(--gold); }
.footer__brand p{ color:var(--bone-3); font-size:.95rem; max-width:34ch; margin-top:1.2rem; }
.footer__col h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; font-weight:500; }
.footer__col a{ display:block; color:var(--bone-2); font-size:.95rem; padding:.4rem 0; transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--bone); }
.footer__contact address{ font-style:normal; color:var(--bone-3); font-size:.95rem; margin-top:.8rem; line-height:1.7; }
.footer__bottom{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:2rem; color:var(--bone-3); font-size:.78rem; letter-spacing:.04em; }
.footer__credit{ font-style:italic; font-family:var(--serif); font-size:1rem; }

/* Refined masthead band — large wordmark, 3★ rating, coordinates */
.footer__masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-bottom:clamp(2rem,4vh,3rem); margin-bottom:clamp(2.5rem,5vh,4rem);
  border-bottom:1px solid var(--line-soft);
}
.footer__wordmark{
  font-family:var(--display); font-weight:400; line-height:.9;
  font-size:clamp(1.9rem,5vw,3.8rem); letter-spacing:.05em; color:var(--bone);
}
.footer__wordmark em{ font-style:normal; color:var(--gold); }
.footer__masthead-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; text-align:right; }
.footer__stars{ color:var(--gold); font-size:1.05rem; letter-spacing:.45em; }
.footer__coord{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bone-3); }
.footer__social{ display:flex; gap:1.4rem; margin-top:1.4rem; }
.footer__social a{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-2);
  position:relative; padding-bottom:.25rem; transition:color .35s var(--ease);
}
.footer__social a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.footer__social a:hover{ color:var(--bone); }
.footer__social a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* 3★ rating beneath the nav logo */
.nav__brand-stars{ color:var(--gold); letter-spacing:.12em; font-size:.92em; margin-right:.7em; }

/* wide amenity chips (rooms page) */
.chips--wide{ gap:.7rem; }
@media (max-width:560px){ .footer__masthead{ align-items:flex-start; } .footer__masthead-meta{ align-items:flex-start; text-align:left; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* desktop nav needs room for 7 Greek items — collapse to the menu a touch earlier */
@media (max-width:1060px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__lang{ display:none; }
}
/* phones: the wide contact button shoved the burger off-screen — drop it here
   (contact lives in the burger menu and as the hero CTA) */
@media (max-width:620px){
  .nav__actions .btn--gold{ display:none; }
  .nav__inner{ padding-block:1.1rem; }
}
@media (max-width:1024px){
  .story__cols{ grid-template-columns:1fr; gap:3rem; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .split{ grid-template-columns:1fr; min-height:auto; }
  .split--reverse .split__media{ order:0; }
  .split__media img{ min-height:54vh; }
  .plan__grid{ grid-template-columns:1fr; gap:3rem; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__cell--tall,.bento__cell--wide,.bento__amenity,.bento__cell--grounds{ grid-column:span 2; grid-row:auto; }
  .bento__cell--tall img,.bento__cell img{ min-height:340px; }
  .exp__track-wrap{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .exp__track-wrap::-webkit-scrollbar{ display:none; }
  .exp__panel{ scroll-snap-align:start; }
  .exp__progress{ display:none; }
}
@media (max-width:560px){
  :root{ --gutter:1.25rem; }
  .story__figures li{ flex-direction:column; gap:.4rem; }
  .plan__distances{ grid-template-columns:1fr; }
  .plan__distances li:nth-child(odd){ padding-right:0; }
  .amenity-list{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .reserve__contact{ flex-direction:column; align-items:center; gap:1.6rem; }
  .exp__panel{ flex-basis:80vw; height:58vh; min-height:380px; }
}
/* phones: looser line-height so Greek accents/descenders never crop on wrapped titles;
   drop the tall accordion gallery; keep the manifesto paragraph tighter */
@media (max-width:760px){
  .h-display{ line-height:1.12; }
  .reserve__title{ line-height:1.12; }
  .story__statement{ line-height:1.16; }
  #gallery{ display:none; }
}
@media (max-width:600px){
  .hero__title{ line-height:1.04; }
  .story__reveal{ font-size:clamp(1.5rem,5.6vw,2rem); line-height:1.34; }
  /* long-label section CTAs ("see the area / how to get here" etc.) became a
     near-full-width box that overflowed the viewport on phones. Turn them into a
     clean full-width row: the label wraps instead of bleeding off-screen and the
     arrow stays pinned right. */
  .btn--block{
    display:flex; width:100%;
    justify-content:space-between; align-items:center; text-align:left;
    white-space:normal; gap:1rem; line-height:1.3;
    letter-spacing:.08em; font-size:.7rem;
    padding:1rem 1.25rem;
  }
  .btn--block .btn__arrow{ flex:none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__video{ animation:none; transform:none; }
  .js .reveal-fade{ opacity:1; }
  .js .reveal-img img{ transform:none; clip-path:none !important; filter:none !important; }
  .story__reveal .rw{ opacity:1 !important; }
  .ir__sweep{ display:none !important; }
  .marquee__row{ transform:none !important; }
  .reserve__canvas{ display:none; }
  .wa-fab--pulse::after{ animation:none !important; }
}

/* blur-up: lazy content images resolve from soft to sharp on load */
.blur-up{ filter:blur(12px); transform:scale(1.04); transition:filter .7s var(--ease), transform .7s var(--ease); }
.blur-up.is-loaded{ filter:blur(0); transform:none; }

/* ============================================================
   FLOATING WHATSAPP CONTACT
   ============================================================ */
.wa-fab{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:95;
  display:inline-flex; align-items:center; gap:0; height:56px; padding:0;
  border-radius:999px; background:#1faf54; color:#fff; overflow:hidden;
  box-shadow:0 10px 30px rgba(8,16,15,.35), 0 2px 8px rgba(0,0,0,.25);
  transition:width .45s var(--ease), padding .45s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  width:56px;
}
.wa-fab:hover{ background:#25c45f; transform:translateY(-2px); }
.wa-fab__ico{ flex:none; width:56px; height:56px; display:grid; place-items:center; }
.wa-fab__label{
  white-space:nowrap; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  max-width:0; opacity:0; overflow:hidden; transition:max-width .45s var(--ease), opacity .35s var(--ease), padding .45s var(--ease);
  padding:0;
}
/* desktop (fine pointer): expand a label on hover */
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover{ width:auto; }
  .wa-fab:hover .wa-fab__label{ max-width:14ch; opacity:1; padding-left:1.1rem; }
}
/* one-time attention ring */
.wa-fab::after{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(31,175,84,.55); opacity:0;
}
.wa-fab--pulse::after{ animation:wa-pulse 1.3s ease-out 2; }
@keyframes wa-pulse{
  0%{ opacity:.9; box-shadow:0 0 0 0 rgba(31,175,84,.5); }
  100%{ opacity:0; box-shadow:0 0 0 18px rgba(31,175,84,0); }
}

/* powered by stathisparas: discreet signature, bottom right of the footer */
a.sp-sig.sp-sig{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:.5em;margin:0 0 0 auto!important;padding:0!important;color:inherit;opacity:.55;text-decoration:none!important;font-size:11px!important;letter-spacing:.04em;line-height:1!important;font-weight:400;white-space:nowrap;background:none!important;border:0!important;transition:opacity .25s ease}
a.sp-sig.sp-sig:hover,a.sp-sig.sp-sig:focus-visible{opacity:1}
.sp-sig .sp-sig__by,.sp-sig .sp-sig__url{text-transform:none;white-space:nowrap}
.sp-sig svg{height:20px!important;width:auto!important;max-width:none!important;display:block;flex:none;transform-origin:left center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.sp-sig:hover svg{transform:rotate(-3deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){.sp-sig svg{transition:none}a.sp-sig:hover svg{transform:none}}
.footer__bottom .sp-sig.sp-sig{flex-basis:100%;justify-content:flex-end}
@media (max-width:600px){a.sp-sig.sp-sig{justify-content:flex-start!important;margin-left:0!important;flex-basis:100%}}