/* ───────────────────────────────────────────────────────────
   Tokens direct port of sanfelice.com design system
─────────────────────────────────────────────────────────── */
:root{
  --c-parchment: #F5F1E9;
  --c-parchment-dark: #DED9CD;
  --c-primary-light: #DBD6CD;
  --c-gray: #DBD8D3;
  --c-gray-dark: rgba(0,0,0,.4);
  --c-forest: #183029;
  --c-forest-light: #285C4D;
  --c-honey: #EFDBB2;
  --c-rose: #E4D5D3;
  --c-sky: #B6CFD0;
  --c-wine: #912F46;
  --c-black: #000;

  --space-sm: 4.166vw;
  --space-md: 8.333vw;
  --space-lg: 12.5vw;
  --row-gap: 26pt;

  --header-h: 100px;
  --header-sticky-h: 70px;

  --t-short: .8s;
  --t-medium: 1.25s;
  --t-long: 1.7s;
  --ease-default: cubic-bezier(0.68, 0.09, 0, 0.97);
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  --font-hero:    'Cormorant Garamond', 'Bodoni Moda', serif;
  --font-display: 'Cormorant Garamond', 'Bodoni Moda', serif;
  --font-sans:    'Roboto', -apple-system, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* Lenis owns scroll; native smooth disabled to avoid double-easing */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-scrolling iframe{ pointer-events: none; }
html, body{
  background: var(--c-parchment);
  color: var(--c-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection{ background: var(--c-honey); color: var(--c-forest); }

/* ───────────────────────────────────────────────────────────
   PAGE LOADER full parchment overlay, wipes up on ready
─────────────────────────────────────────────────────────── */
.loader{
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--c-parchment);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 1em;
  pointer-events: none;
  transition: transform 1.4s cubic-bezier(0.83, 0, 0.17, 1) .25s,
              opacity .4s ease 1.4s;
}
.loader.gone{
  transform: translateY(-100%);
  opacity: 0;
}
.loader-mark{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-forest);
  opacity: 0;
  animation: loaderIn 1.1s cubic-bezier(0.5,0,0.2,1) forwards;
}
.loader-sub{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-forest);
  opacity: 0;
  animation: loaderIn 1.1s .25s cubic-bezier(0.5,0,0.2,1) forwards;
}
.loader-bar{
  margin-top: 2em;
  width: 200px;
  height: 1px;
  background: rgba(24,48,41,.18);
  position: relative;
  overflow: hidden;
}
.loader-bar::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--c-forest);
  transform-origin: left;
  animation: loaderBar 1.4s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}
@keyframes loaderIn{
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes loaderBar{
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Display caps sanfelice's Nina equivalent.
   Cormorant Garamond Medium matches Nina's wide, high-contrast feel. */
.display{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;
}

/* Eyebrow sanfelice 'tiny' variant */
.eyebrow{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  line-height: 2;
  text-transform: uppercase;
}

/* Body copy sanfelice Söhne Buch equivalent */
.body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────────
   NAV fixed, parchment, hairline divider on scroll
─────────────────────────────────────────────────────────── */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--space-sm);
  color: var(--c-black);
  background: var(--c-parchment);
  border-bottom: 0.5px solid #707070;
  transition: height .35s var(--ease-standard);
}
.nav.scrolled{
  height: var(--header-sticky-h);
}
.nav-left, .nav-right{ display:flex; align-items:center; gap: 1.75em; }
.nav-right{ justify-content:flex-end; }
.nav-link{
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: capitalize;
  position: relative;
  display: inline-block;
  padding: 4px 0;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-standard);
}
.nav-link:hover::after{ transform: scaleX(1); }

/* RESERVE button outlined forest box at far right of nav (matches scrolled-state aesthetic) */
.nav-reserve{
  display: inline-flex; align-items: center;
  padding: .85em 1.6em;
  border: 1px solid var(--c-forest);
  color: var(--c-forest);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-left: 1.4em;
  background: transparent;
  transition: background .9s var(--ease-default), color .9s var(--ease-default), border-color .9s var(--ease-default);
}
.nav-reserve:hover{
  background: var(--c-forest);
  color: var(--c-parchment);
}
.nav-reserve::after{ display: none; }

.nav-brand{
  display:flex; flex-direction:column; align-items:center; gap: 4px;
  text-align:center;
  text-transform: uppercase;
}
.nav-brand .word{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .12em;
  line-height: 1;
}
.nav-brand .sub{
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .25em;
  font-weight: 400;
  opacity: .7;
}
.nav-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px;
}
.nav-burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: currentColor;
}
.nav-burger span{
  display:block; height: 1.2px; background: currentColor;
  width: 100%;
  transition: transform .35s var(--ease-standard), opacity .25s;
}
.nav-burger span:nth-child(2){ width: 70%; align-self: flex-start; }

@media (max-width: 991px){
  :root{
    --header-h: 68px;
    --header-sticky-h: 52px;
  }
  .nav{ grid-template-columns: auto 1fr auto; }
  .nav-left{ justify-content: flex-start; gap: 0; }
  .nav-right{ justify-content: flex-end; gap: 0; }
  .nav-burger{ display: flex; }
  .nav-left .nav-link,
  .nav-left .nav-back,
  .nav-right .nav-link,
  .nav-right .nav-reserve{ display: none; }
  .nav-brand .word{ font-size: 18px; }
}

/* ───────────────────────────────────────────────────────────
   FULL-SCREEN MENU PANEL (mobile / small screens)
─────────────────────────────────────────────────────────── */
.menu-panel{
  position: fixed; inset: 0;
  background: var(--c-parchment);
  z-index: 200;
  display: flex; flex-direction: column;
  padding: 28px var(--space-sm) var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-default);
}
.menu-panel.open{
  opacity: 1;
  pointer-events: auto;
}
.menu-panel-top{
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;
  height: var(--header-sticky-h);
  border-bottom: .5px solid #707070;
}
.menu-brand{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-forest);
}
.menu-close{
  background: transparent; border: 0;
  width: 32px; height: 32px;
  cursor: pointer;
  color: var(--c-forest);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.menu-close svg{ width: 18px; height: 18px; }
.menu-links{
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  padding-top: 6vh;
  overflow-y: auto;
}
.menu-links a{
  font-family: var(--font-display);
  font-size: clamp(28px, 7.5vw, 44px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-forest);
  padding: 18px 0;
  border-bottom: .5px solid rgba(24,48,41,.18);
  align-self: stretch;
  text-align: right;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-default), transform .7s var(--ease-default);
}
.menu-panel.open .menu-links a{
  opacity: 1;
  transform: translateY(0);
}
.menu-panel.open .menu-links a:nth-child(1){ transition-delay: .12s }
.menu-panel.open .menu-links a:nth-child(2){ transition-delay: .18s }
.menu-panel.open .menu-links a:nth-child(3){ transition-delay: .24s }
.menu-panel.open .menu-links a:nth-child(4){ transition-delay: .30s }
.menu-panel.open .menu-links a:nth-child(5){ transition-delay: .36s }
.menu-panel.open .menu-links a:nth-child(6){ transition-delay: .42s }
.menu-panel.open .menu-links a:nth-child(7){ transition-delay: .48s }
.menu-langs{
  display: flex; justify-content: flex-end; gap: 26px;
  padding-top: 22px;
  margin-top: auto;
  border-top: .5px solid rgba(24,48,41,.18);
}
.menu-langs button{
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 0;
}
.menu-langs .active{ font-weight: 600; }
.menu-langs .inactive{ opacity: .4; cursor: default; }
body.menu-open{ overflow: hidden; }

@media (min-width: 992px){
  .menu-panel{ display: none; }
}

/* ───────────────────────────────────────────────────────────
   PILL BUTTON sanfelice's signature CTA
─────────────────────────────────────────────────────────── */
.pill{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 35px;
  height: 46px;
  border-radius: 2.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border: 1px solid var(--c-forest);
  background: var(--c-forest);
  color: var(--c-parchment);
  transition: background .9s var(--ease-default),
              color .9s var(--ease-default),
              border-color .9s var(--ease-default);
}
/* Hover invert fill goes transparent, becomes outlined ring (slow + smooth) */
.pill:hover{
  background: transparent;
  color: var(--c-forest);
  border-color: var(--c-forest);
}
.pill svg{ width: 12px; height: 12px; transition: transform .9s var(--ease-default); }
.pill:hover svg{ transform: translateX(4px); }

.pill.light{
  background: var(--c-parchment);
  color: var(--c-forest);
  border-color: var(--c-parchment);
}
.pill.light:hover{
  background: transparent;
  color: var(--c-parchment);
  border-color: var(--c-parchment);
}

.pill.outline{
  background: transparent;
  color: var(--c-forest);
}
.pill.outline:hover{ background: var(--c-forest); color: var(--c-parchment); }

/* ───────────────────────────────────────────────────────────
   HERO full-bleed, stacked display H1, ~140vh
─────────────────────────────────────────────────────────── */
.hero{
  position: relative;
  min-height: 600px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--c-forest);
}
.hero-img-wrap{
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.hero-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
  transform-origin: center center;
  will-change: transform;
}
/* clip-path reveal sanfelice's 'transition: filter 1.6s, clip-path 1.6s' move */
.hero-img-wrap{
  clip-path: inset(8%);
  filter: brightness(.6);
  transition: clip-path var(--t-medium) var(--ease-default), filter var(--t-medium) var(--ease-default);
}
.hero-img-wrap.reveal{
  clip-path: inset(0%);
  filter: brightness(.85);
}

/* Forest-tinted overlay for legibility keeps the parchment text popping */
.hero-img-wrap::after{
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,48,41,.62) 0%, rgba(24,48,41,.30) 35%, rgba(24,48,41,.30) 65%, rgba(24,48,41,.68) 100%),
    radial-gradient(ellipse at center, rgba(24,48,41,0) 35%, rgba(24,48,41,.30) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-stage{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: calc(var(--header-h) + 4vh) var(--space-md) 4vh;
  color: var(--c-parchment);
  text-align: center;
}
.hero-line{
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: clamp(60px, 10.5vw, 200px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-parchment);
  display: block;
}
.hero-line-top{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: .35em;
  opacity: .9;
  margin-bottom: 1em;
  text-transform: uppercase;
}
.hero-line-mid{ font-size: clamp(44px, 6.5vw, 110px); }
.hero-line-bot{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: .35em;
  opacity: .9;
  margin-top: 1em;
  text-transform: uppercase;
}
/* gold hairline rule that sits between BY THE SEA and the intro */
.hero-rule{
  width: 56px;
  height: 1px;
  background: var(--c-honey);
  margin: 2em auto 1.6em;
  opacity: .9;
}
.hero-intro{ margin: 0 auto !important; max-width: 44ch !important; }
/* outlined CTA thin honey border, transparent fill, sits at hero bottom */
.hero-cta{
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 2.5em;
  padding: 1.1em 2.6em;
  border: 1px solid var(--c-honey);
  color: var(--c-parchment);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  transition: background .9s var(--ease-default), color .9s var(--ease-default), border-color .9s var(--ease-default);
}
.hero-cta:hover{
  background: var(--c-honey);
  color: var(--c-forest);
}
.hero-cta svg{ width: 14px; height: 14px; transition: transform .9s var(--ease-default); }
.hero-cta:hover svg{ transform: translateX(4px); }
.hero-intro{
  align-self: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 auto;
  color: var(--c-parchment);
  opacity: .92;
}

/* per-line entry split into characters via JS, each char rises with stagger */
.hero-line .char{
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.25s var(--ease-default), opacity .85s var(--ease-default);
  will-change: transform, opacity;
}
.hero-line .char-mask{ display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1; }
.hero-line .word{ display: inline-block; white-space: nowrap; }
.hero.reveal .hero-line .char{
  transform: translateY(0);
  opacity: 1;
}
/* Hero intro fades in as a whole (no char-split, prevents mid-word breaks) */
.hero-intro{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease-default) 1s, transform 1s var(--ease-default) 1s;
}
.hero.reveal .hero-intro{ opacity: .92; transform: translateY(0); }

/* Subtle base placement so JS char-fill doesn't briefly flash full text */
.hero-line, .hero-intro{ opacity: 1; }

@media (max-width: 991px){
  .hero{ height: 90vh; min-height: 540px; }
  .hero-stage{ padding: calc(var(--header-h) + 3vh) var(--space-sm) 4vh; }
}

/* ───────────────────────────────────────────────────────────
   GREEN BAND "Discover ΗΣΥΧΊΑ" + ABOUT pill
─────────────────────────────────────────────────────────── */
.band{
  background: var(--c-forest);
  color: var(--c-parchment);
  padding: 7vh var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Facts strip refined into a 4-column feature grid with icon + label + subtitle */
.band-facts{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em 3vw;
  padding: 1.4em 0 0;
  margin: 0 auto;
  max-width: 1200px;
  border-top: 1px solid rgba(245,241,233,.2);
}
.band-facts li{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9em;
  color: var(--c-parchment);
  padding: 0 1em;
  border-right: 1px solid rgba(245,241,233,.12);
}
.band-facts li:last-child{ border-right: 0; }
.band-facts svg{
  width: 40px; height: 40px;
  color: var(--c-honey);
  flex-shrink: 0;
  margin-bottom: .25em;
}
.band-facts strong{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-parchment);
}
.band-facts span{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  line-height: 1.4;
  max-width: 22ch;
}
@media (max-width: 991px){
  .band-facts{ grid-template-columns: 1fr 1fr; gap: 3em 0; padding-top: 3em; }
  .band-facts li{ border-right: 0; padding: 0; }
  .band-facts li:nth-child(odd){ border-right: 1px solid rgba(245,241,233,.12); }
}
@media (max-width: 600px){
  .band-facts{ grid-template-columns: 1fr; gap: 2.5em 0; }
  .band-facts li:nth-child(odd){ border-right: 0; }
}
.band .eyebrow{
  display: block;
  margin-bottom: 1.25em;
  color: var(--c-parchment);
  opacity: .85;
}
.band .quote{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-parchment);
  margin-bottom: .35em;
}
/* Soft italic meaning line under «Stillness» */
.band-meaning{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--c-parchment);
  opacity: .85;
  letter-spacing: .01em;
  max-width: 36ch;
  margin: 0 auto 2em;
}
.band > .pill{
  display: flex;
  width: max-content;
  margin: 0 auto 1.75em;
}
.band-body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 auto 3em;
  color: var(--c-parchment);
  opacity: .85;
}

.band-stats{
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5em;
  margin: 0 auto 3em;
  padding: 2em 0;
  border-top: 1px solid rgba(245,241,233,.18);
  border-bottom: 1px solid rgba(245,241,233,.18);
  flex-wrap: wrap;
}
.band-stats li{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  color: var(--c-parchment);
}
.band-stats strong{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: .02em;
  line-height: 1;
  margin-bottom: .35em;
  color: var(--c-parchment);
}
.band-stats .star{
  color: var(--c-honey);
  font-size: 18px;
  margin-right: .15em;
  letter-spacing: 0;
}
.band-stats span{
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .65;
}
@media (max-width: 700px){
  .band-stats{ gap: 1.5em 2em; padding: 1.5em 0; }
  .band-stats strong{ font-size: 28px; }
}

.band-translate{
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .25em;
  margin-top: 1.25em;
  opacity: .6;
}

/* ───────────────────────────────────────────────────────────
   FEATURE Casa Pyrgadikia (text + image carousel)
─────────────────────────────────────────────────────────── */
.feature{
  background: var(--c-parchment);
  padding: 0 0 0;
}
.feature-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 76vh;
}
@media (max-width: 991px){
  .feature-grid{ grid-template-columns: 1fr; }
}
.feature-text{
  padding: 12vh var(--space-md);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.5em;
}
.feature-text .display{
  font-size: clamp(48px, 7vw, 120px);
  margin-left: -5px; /* optical alignment with body pulls big-serif left edge in 5px */
}
/* Gradient Wipe (Pattern AB) — ink fills L→R as the section enters the viewport */
[data-fx-gradient]{
  background: linear-gradient(90deg, var(--c-forest) var(--p, 0%), rgba(24,48,41,.18) var(--p, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
}
.feature-text .display .line{ display:block; }
.feature-rule{
  width: 130px;
  height: 1px;
  background: var(--c-black);
  opacity: .9;
}
.feature-text .body{
  font-size: 15px;
  line-height: 1.65;
  max-width: 38ch;
}

/* Image carousel replaces sanfelice's keen-slider, vanilla CSS+JS */
.carousel{
  position: relative;
  overflow: hidden;
  background: var(--c-gray);
  min-height: 76vh;
}
.carousel-track{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 76vh;
}
.carousel-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-default);
  overflow: hidden;
}
.carousel-slide.active{ opacity: 1; }
.carousel-slide img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 8s linear;
  will-change: transform;
}
.carousel-slide.active img{
  transform: scale(1);
}
.carousel-ui{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.25em 1.75em;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--c-parchment);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  pointer-events: none;
}
.carousel-counter{ pointer-events: auto; }
.carousel-counter strong{ font-weight: 700; }
.carousel-arrows{ display: flex; gap: .75em; pointer-events: auto; }
.carousel-arrows button{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(245,241,233,.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245,241,233,.4);
  color: var(--c-parchment);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .35s var(--ease-standard), border-color .35s var(--ease-standard);
}
.carousel-arrows button:hover{
  background: rgba(245,241,233,.3);
  border-color: var(--c-parchment);
}
.carousel-arrows svg{ width: 14px; height: 14px; }

/* Massive section title "THE COAST" overflowing edges, like "WINE ESTATES" */
.section-title{
  background: var(--c-forest);
  color: var(--c-parchment);
  padding: 0 var(--space-sm);
  margin: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
  scroll-margin-top: var(--header-h);
}
.section-title h2{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 16vw, 360px);
  line-height: .95;
  letter-spacing: -.005em;
  white-space: nowrap;
  padding-top: .25em;
  padding-bottom: .15em;
  color: var(--c-parchment);
  /* HAZY → SHARP: blur-to-clear entry */
  transition: filter 1.4s var(--ease-default), opacity 1.2s var(--ease-default);
  will-change: filter, opacity;
}
.js .section-title h2:not(.in){
  filter: blur(28px);
  opacity: 0;
}
.section-title h2.in{
  filter: blur(0);
  opacity: 1;
}

/* HAZY → SHARP utility class for any heading */
.fx-haze{
  transition: filter 1.2s var(--ease-default), opacity 1s var(--ease-default);
  will-change: filter, opacity;
}
.js .fx-haze:not(.in){ filter: blur(24px); opacity: 0; }
.fx-haze.in{ filter: blur(0); opacity: 1; }

/* SPLASH — randomised Y per char */
[data-fx-splash] .ch { display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1 }
[data-fx-splash] .ch > span { display:inline-block; transform: translateY(var(--y, 110%)); opacity: 0;
  transition: transform .95s var(--ease-default), opacity .7s var(--ease-default); }
[data-fx-splash].in .ch > span { transform: translateY(0); opacity: 1; }

/* BLOOM — scale 0.55 → 1 per char */
[data-fx-bloom] .word,
[data-fx-splash] .word { display:inline-block; white-space:nowrap; }
[data-fx-bloom] .ch { display:inline-block; vertical-align:bottom; line-height:1 }
[data-fx-bloom] .ch > span { display:inline-block; transform: scale(.55); opacity: 0;
  transform-origin: center bottom;
  transition: transform 1.1s var(--ease-default), opacity .8s var(--ease-default); }
[data-fx-bloom].in .ch > span { transform: scale(1); opacity: 1; }

/* CLIP SWEEP — clip-path inset(0 100% 0 0) → inset(0) */
.fx-sweep { transition: clip-path 1.7s var(--ease-default); }
.js .fx-sweep:not(.in){ clip-path: inset(0 100% 0 0); }
.fx-sweep.in { clip-path: inset(0 0 0 0); }


/* ───────────────────────────────────────────────────────────
   THREE COAST CARDS like Wine Estates, on forest green
─────────────────────────────────────────────────────────── */
.cards{
  background: var(--c-forest);
  padding: 0 var(--space-sm) 12vh;
}
.cards-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  height: clamp(560px, 80vh, 880px);
}
@media (max-width: 991px){
  .cards-grid{ grid-template-columns: 1fr; height: auto; }
}
.card{
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--c-forest-light);
  height: 100%;
}
@media (max-width: 991px){
  .card{ aspect-ratio: 4 / 5; }
}
.card-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-default), filter 1.4s var(--ease-default);
  filter: brightness(.78);
}
.card:hover .card-img{
  transform: scale(1.06);
  filter: brightness(.92);
}
.card-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,48,41,.55) 0%, rgba(24,48,41,.28) 35%, rgba(24,48,41,.28) 65%, rgba(24,48,41,.65) 100%),
    radial-gradient(ellipse at center, rgba(24,48,41,0) 35%, rgba(24,48,41,.30) 100%);
  pointer-events: none;
  z-index: 1;
}
.card-label{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-parchment);
  padding: 1em;
  gap: .75em;
  z-index: 2;
}
.card-label .word{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 64px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
.card-label .sub{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: .85;
}
.card-label .body{
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  max-width: 26ch;
  margin-top: 1em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard);
}
.card:hover .card-label .body{ opacity: .9; transform: translateY(0); }

/* ───────────────────────────────────────────────────────────
   UNIVERSAL REVEALS IO-driven entry transforms
   Mirrors sanfelice: scale(.95) translateY(15) opacity 0 → settled
─────────────────────────────────────────────────────────── */
.reveal-up{
  transition: opacity var(--t-medium) var(--ease-default), transform var(--t-medium) var(--ease-default);
  transition-delay: var(--rd, 0s);
}
.js .reveal-up:not(.in){
  opacity: 0;
  transform: translateY(48px);
}
.reveal-up.in{
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale{
  transition: opacity var(--t-long) var(--ease-default), transform var(--t-long) var(--ease-default);
  transition-delay: var(--rd, 0s);
}
.js .reveal-scale:not(.in){
  opacity: 0;
  transform: scale(.92) translateY(40px);
}
.reveal-scale.in{
  opacity: 1;
  transform: scale(1) translateY(0);
}
.reveal-clip{
  transition: clip-path var(--t-medium) var(--ease-default);
  transition-delay: var(--rd, 0s);
}
.js .reveal-clip:not(.in){
  clip-path: inset(100% 0% 0%);
}
.reveal-clip.in{
  clip-path: inset(0%);
}

/* ───────────────────────────────────────────────────────────
   REVIEWS verbatim guest quotes from the live Airbnb listing
─────────────────────────────────────────────────────────── */
.reviews{
  background: var(--c-parchment);
  padding: 6vh var(--space-sm) 12vh;
}
.reviews-head{
  text-align: center;
  margin-bottom: 7vh;
  padding: 0 var(--space-sm);
}
.reviews-head .eyebrow{
  display: block;
  color: var(--c-forest);
  opacity: .8;
  margin-bottom: 1.25em;
}
.reviews-head .display{
  font-size: clamp(48px, 7vw, 120px);
  margin-bottom: 1.2em;
  color: var(--c-forest);
}
.reviews-stats{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .85;
}
.reviews-stats > div{ text-align: center; }
.reviews-stats strong{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: .02em;
  color: var(--c-forest);
  display: block;
  margin-bottom: .35em;
  line-height: 1;
}
.reviews-stats .star{ color: var(--c-honey); font-size: 18px; letter-spacing: 0; margin-right: .15em; }

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6vh 4vw;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}
@media (max-width: 991px){ .reviews-grid{ grid-template-columns: 1fr; gap: 6vh; } }

.review{
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}
.review-quote{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--c-forest);
  margin-bottom: 2.5em;
  position: relative;
  padding-top: 2em;
  font-style: italic;
}
.review-quote::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 1px;
  background: var(--c-forest);
  opacity: .4;
}
.review-author{
  margin-top: auto;
  color: var(--c-forest);
}
.review-author strong{
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: .5em;
}
.review-author .meta{
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .55;
}

.gallery{
  background: var(--c-parchment);
  padding: 14vh 0 4vh;
}
.gallery-head{
  padding: 0 var(--space-md) 4vh;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2em;
  flex-wrap: wrap;
}
.gallery-head .eyebrow{ color: var(--c-forest); opacity: .8; margin-bottom: .8em; display: block; }
.gallery-head .display{ font-size: clamp(40px, 5.5vw, 88px); }
.gallery-grid{
  padding: 0 var(--space-sm);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 991px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  /* Hide the 7th tile (gallery-exterior — gate/pergola) so the 2-col grid stays even */
  .gallery-grid .gallery-tile:nth-child(7){ display: none; }
}
.gallery-tile{
  aspect-ratio: 1 / 1.2;
  overflow: hidden;
  background: var(--c-gray);
  position: relative;
}
.gallery-tile img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform 1.4s var(--ease-default);
}
/* Forest-tinted overlay — softer by default, snaps clear on hover */
.gallery-tile::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,48,41,.32) 0%, rgba(24,48,41,.42) 100%),
    radial-gradient(ellipse at center, rgba(24,48,41,.12) 30%, rgba(24,48,41,.28) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s var(--ease-standard);
  z-index: 1;
}
.gallery-tile:hover img{ transform: scale(1.04); }
.gallery-tile:hover::after{ opacity: 0; }

.reserve{
  background: var(--c-forest);
  color: var(--c-parchment);
  padding: 18vh var(--space-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reserve::before{
  content: "";
  position: absolute; inset: 0;
  background: url('seasea.webp') center/cover no-repeat;
  opacity: .42; filter: saturate(.85);
}
.reserve > *{ position: relative; z-index: 1; }
.reserve .eyebrow{ color: var(--c-honey); display: block; margin-bottom: 1.25em; }
.reserve .display{
  font-size: clamp(48px, 8vw, 140px);
  line-height: .95;
  margin-bottom: 24px;
}
.reserve .body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .85;
  max-width: 44ch;
  margin: 0 auto 2.5em;
}
.reserve .reassure{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  max-width: 56ch;
  margin: 2.5em auto 0;
  color: var(--c-parchment);
}

footer{
  background: var(--c-parchment-dark);
  color: var(--c-forest);
  padding: 6em var(--space-md) 2.5em;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.foot-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3em;
  margin-bottom: 4em;
}
@media (max-width: 991px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
.foot-brand .display{
  font-size: 32px;
  letter-spacing: .15em;
  margin-bottom: .5em;
}
.foot-brand .sub{
  font-size: 11px; letter-spacing: .25em; opacity: .7; text-transform: uppercase;
}
.foot-col h5{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 1.25em; opacity: .7;
}
.foot-col ul{ list-style: none; }
.foot-col li{ padding: .35em 0; }
.foot-col a{ font-size: 14px; }
.foot-col a:hover{ text-decoration: underline; }
.foot-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2em;
  border-top: 1px solid rgba(0,0,0,.15);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
  flex-wrap: wrap;
  gap: 1em;
}
.foot-credit a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: opacity .35s var(--ease-default);
}
.foot-credit a:hover{ opacity: .7; }


/* ───────────────────────────────────────────────────────────
   SUBPAGE EXTRAS for /pyrgadikia, /vourvourou, /sithonia
─────────────────────────────────────────────────────────── */
.hero.hero-sub{ height: 88vh; }

.subpage-feature{
  background: var(--c-parchment);
  padding: 12vh 0;
}
.subpage-feature .container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: 0 var(--space-md);
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 991px){
  .subpage-feature .container{ grid-template-columns: 1fr; gap: 4vh; }
}
.subpage-feature .text{
  display: flex; flex-direction: column;
  gap: 1.75em;
}
.subpage-feature .display{
  font-size: clamp(40px, 5.5vw, 88px);
  color: var(--c-forest);
}
.subpage-feature .body{
  font-size: 15px;
  line-height: 1.7;
  max-width: 44ch;
  color: var(--c-forest);
}
.subpage-feature .body p + p{ margin-top: 1em; }
.subpage-feature .image{
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--c-gray);
}
.subpage-feature .image img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.12);
  transform-origin: center center;
  transition: transform 1.4s var(--ease-default);
}
.subpage-feature .image:hover img{ transform: scale(1.18); }

.highlights{
  background: var(--c-parchment-dark);
  padding: 14vh var(--space-sm);
}
.highlights-head{
  text-align: center;
  margin-bottom: 7vh;
}
.highlights-head .eyebrow{ color: var(--c-forest); opacity: .8; margin-bottom: 1.25em; display: block; }
.highlights-head .display{
  font-size: clamp(40px, 5.5vw, 88px);
  color: var(--c-forest);
}
.highlights-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4vh 3vw;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 991px){ .highlights-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .highlights-grid{ grid-template-columns: 1fr; } }
.highlight{
  text-align: left;
  padding: 1em 0;
  border-top: 1px solid rgba(24,48,41,.18);
}
.highlight .num{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--c-forest);
  opacity: .55;
  margin-bottom: 1em;
}
.highlight h4{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--c-forest);
  margin-bottom: .5em;
  text-transform: uppercase;
}
.highlight p{
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-forest);
  opacity: .8;
}

/* Mini reserve band on subpages narrower, deeper */
.reserve-mini{
  background: var(--c-forest);
  color: var(--c-parchment);
  padding: 14vh var(--space-md);
  text-align: center;
}
.reserve-mini .eyebrow{ color: var(--c-honey); display: block; margin-bottom: 1.25em; }
.reserve-mini .display{
  font-size: clamp(36px, 4.5vw, 72px);
  margin-bottom: 1em;
  color: var(--c-parchment);
}
.reserve-mini .body{
  font-size: 14px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 auto 2.5em;
  opacity: .85;
  color: var(--c-parchment);
}

/* Back-to-Casa nav link */
.nav-back{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  position: relative;
  padding: 4px 0;
}
.nav-back svg{ width: 14px; height: 14px; }
.nav-back::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-standard);
}
.nav-back:hover::after{ transform: scaleX(1); transform-origin: left; }