:root{
  --blue:#4171B5;          /* logo blue */
  --navy:#0E2447;
  --navy-2:#173766;
  --sky:#DCE8F6;
  --sand:#F7F1E7;
  --ink:#16233A;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Nunito",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.7;font-size:17px;overflow-x:hidden}
/* nothing wider than the screen can be scrolled to sideways; clip (unlike hidden) doesn't turn the body into a scroll box */
@supports(overflow:clip){html,body{overflow-x:clip}}
/* 1% of the screen's height: live svh here, a px value measured once on touch screens (main.js), so nothing sized with it
   moves while iPhone Safari's toolbar slides in and out */
:root{--svh:1vh}
@supports(height:1svh){:root{--svh:1svh}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem}
h2 em,h1 em{font-style:italic;color:var(--blue)}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:1rem}
.eyebrow--light{color:#9FC0EE}

/* buttons */
.btn{display:inline-block;padding:.95rem 1.8rem;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em;transition:transform .4s var(--ease),background .3s,box-shadow .3s;box-shadow:0 10px 30px -10px rgba(65,113,181,.7)}
.btn:hover{transform:translateY(-3px);background:#5584c9}
.btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.7);box-shadow:none}
.btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--small{padding:.6rem 1.2rem;font-size:.85rem}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:1rem clamp(1rem,4vw,3rem);transition:background .4s,padding .4s,box-shadow .4s}
.nav__logo{margin-right:auto;position:relative;display:block;height:44px}
.nav__logo img{height:44px;width:auto;transition:opacity .3s}
.nav__logo .logo-dark{position:absolute;inset:0;opacity:0}
.nav__links{display:flex;align-items:center;gap:2rem;color:#fff;font-weight:600;font-size:.95rem}
.nav__links a:not(.btn){position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}
.lang{color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.12em;border:1px solid rgba(255,255,255,.5);padding:.3rem .65rem;border-radius:99px}
.nav.is-solid{background:rgba(247,241,231,.9);backdrop-filter:blur(14px);padding-block:.6rem;box-shadow:0 1px 0 rgba(14,36,71,.08)}
.nav.is-solid .nav__links,.nav.is-solid .lang{color:var(--navy)}
.nav.is-solid .lang{border-color:rgba(14,36,71,.3)}
.nav.is-solid .logo-light{opacity:0}
.nav.is-solid .logo-dark{opacity:1}
.burger{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .4s var(--ease),top .4s,background .3s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.nav.is-solid .burger span{background:var(--blue)}

/* hero */
.hero{position:relative;min-height:calc(100 * var(--svh));display:grid;align-items:center;color:#fff;overflow:hidden;background:var(--navy)}
.hero__bg{position:absolute;inset:-8% 0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translateX(-1.5%)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,36,71,.88) 0%,rgba(14,36,71,.55) 45%,rgba(14,36,71,.15) 100%),linear-gradient(0deg,rgba(14,36,71,.5),transparent 40%)}
.hero__sun{position:absolute;right:12%;top:18%;width:min(34vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.45),rgba(255,214,150,0) 65%);animation:pulse 7s ease-in-out infinite;pointer-events:none}
@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}
.hero__content{position:relative;z-index:2;width:min(1180px,100% - 48px);margin-inline:auto;padding:8rem 0 9rem}
.hero .eyebrow{color:#BFD5F3}
.hero__title{font-size:clamp(3rem,9vw,7.2rem);font-weight:300;margin-bottom:1.5rem}
.hero__title em{color:#9FC0EE}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block}
.hero__lead{max-width:34rem;font-size:1.2rem;color:#E6EEF9;margin-bottom:2.2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem}
.waves{position:absolute;z-index:2;left:0;bottom:-1px;width:100%;height:110px}
.waves .w{fill:var(--sand)}
.w1{opacity:.35;animation:sway 9s ease-in-out infinite alternate}
.w2{opacity:.6;animation:sway 7s ease-in-out infinite alternate-reverse}
.w3{opacity:1}
@keyframes sway{to{transform:translateX(-5%) scaleX(1.08)}}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* welcome */
.welcome{padding:6rem 0 5rem}
.welcome__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.welcome__text p{font-size:1.15rem;color:#33415a}
.facts{display:flex;gap:2.5rem;margin-top:2.2rem;flex-wrap:wrap}
.facts li{display:flex;flex-direction:column}
.facts b,.specs b{font-family:var(--serif);font-weight:300;font-size:3.4rem;line-height:1;color:var(--blue)}
.facts span{font-size:.85rem;color:#5b6b85;max-width:9rem}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:4.5rem;max-width:820px}
.strip figure{border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:3/4;position:relative}
.strip figure:nth-child(2){margin-top:3rem;border-radius:18px}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.strip figure:hover img{transform:scale(1.07)}
figcaption{position:absolute;left:1.2rem;bottom:1rem;color:#fff;font-family:var(--serif);font-style:italic;font-size:1.3rem;text-shadow:0 2px 12px rgba(0,0,0,.4)}

/* apartments */
.apts{padding:3rem 0 7rem}
.apts>.wrap:first-child{margin-bottom:3rem}
.apt{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center;margin-bottom:6rem}
.apt--flip .apt__img{order:2}
.apt__img{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 70px -35px rgba(14,36,71,.6)}
.apt__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.apt:hover .apt__img img{transform:scale(1.06)}
/* destination photos get their src from main.js once the banner has loaded; without JavaScript the <noscript> copy shows */
.drow img[data-src]{display:none}
.apt__no{position:absolute;left:1.2rem;top:.6rem;font-family:var(--serif);font-style:italic;font-size:4.5rem;color:#fff;line-height:1;text-shadow:0 4px 24px rgba(14,36,71,.5)}
.apt__body h3{font-size:clamp(2rem,4vw,3rem);color:var(--navy);margin-bottom:1rem}
.apt__body p{color:#41506a}
.specs{display:flex;gap:2rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(14,36,71,.15);font-size:.9rem;color:#5b6b85;flex-wrap:wrap}
.specs li{display:flex;align-items:baseline;gap:.4rem}
.specs b{font-size:2.4rem}

/* amenities */
.amen{position:relative;background:linear-gradient(170deg,var(--navy),var(--navy-2));color:#fff;padding:7rem 0 7rem}
.amen__top{position:absolute;left:0;top:-69px;width:100%;height:70px;display:block}
.amen__top path{fill:var(--navy)}
.amen h2 em{color:#9FC0EE}
.amen__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem;margin-top:3rem}
.amen__grid li{display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.4rem;border:1px solid rgba(159,192,238,.25);border-radius:18px;background:rgba(255,255,255,.03);font-weight:600;transition:transform .5s var(--ease),background .4s,border-color .4s}
.amen__grid li:hover{transform:translateY(-6px);background:rgba(65,113,181,.25);border-color:rgba(159,192,238,.6)}
.amen__grid svg{width:44px;height:44px;fill:none;stroke:#9FC0EE;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.amen__grid li:hover svg{transform:scale(1.15) rotate(-6deg)}

/* destinations */
.dest{padding:7rem 0 6rem;overflow:hidden}
.rail{display:flex;gap:1.2rem;margin-top:3rem;padding:0 max(24px,calc((100vw - 1180px)/2));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 min(340px,78vw);aspect-ratio:3/4;border-radius:20px;overflow:hidden;scroll-snap-align:start;color:#fff}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,36,71,.85),transparent 55%)}
.card:hover img{transform:scale(1.1)}
.card span{position:absolute;z-index:1;left:1.4rem;bottom:1.2rem;right:1.4rem;font-family:var(--serif);font-size:1.7rem;line-height:1.1;transition:transform .5s var(--ease)}
.card:hover span{transform:translateY(-6px)}

/* contact */
.contact{background:var(--blue);color:#fff;padding:7rem 0;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:700px;height:700px;right:-200px;top:-300px;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 0 80px rgba(255,255,255,.04),0 0 0 160px rgba(255,255,255,.03)}
.contact__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;position:relative}
.contact h2 em{color:#fff;opacity:.85}
.contact p{max-width:30rem;color:#E4EDFA}
.contact__list{display:grid;gap:1.6rem}
.contact__list li{display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1.2rem}
.contact__list small{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;color:#CFE0F7}
.contact__list a,.contact__list span{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);transition:transform .4s var(--ease)}
.contact__list a:hover{transform:translateX(8px)}

/* footer */
.foot{background:var(--navy);color:#B7C6DE;padding:3.5rem 0 2rem;font-size:.9rem}
.foot__in{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}
.foot img{height:48px;width:auto}
.foot nav{display:flex;gap:1.8rem;flex-wrap:wrap}
.foot nav a:hover{color:#fff}
.foot p{flex-basis:100%;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem}

/* responsive */
@media(max-width:900px){
  .welcome__grid,.contact__grid,.apt{grid-template-columns:1fr}
  .apt--flip .apt__img{order:0}
  .apt{margin-bottom:4.5rem}
  .burger{display:block}
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.6rem;background:var(--navy);font-size:1.6rem;font-family:var(--serif);opacity:0;pointer-events:none;transition:opacity .4s}
  .nav__links .btn{font-family:var(--sans);font-size:1rem}
  .nav.open .nav__links{opacity:1;pointer-events:auto;color:#fff}
  .nav.open .burger{z-index:2}
  .nav.open .burger span{background:#fff}
  .nav.open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
  .nav.open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
  .nav.open .logo-light{opacity:1}.nav.open .logo-dark{opacity:0}
  .nav.open .nav__logo,.nav.open .lang{position:relative;z-index:2;color:#fff}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .line>span{transform:none}
}

/* ===== multi-page additions ===== */
.nav__links a.is-active:not(.btn)::after{transform:scaleX(1)}
.hero--page{min-height:calc(62 * var(--svh))}
.hero--page .hero__content{padding:9rem 0 7rem}
.hero--page .hero__title{font-size:clamp(2.8rem,7.5vw,5.8rem)}
.hero--page .hero__shade{background:linear-gradient(0deg,rgba(14,36,71,.7),rgba(14,36,71,.35))}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.link-arrow{font-weight:700;color:var(--blue);margin-bottom:1.4rem;position:relative;padding-bottom:.2rem;border-bottom:2px solid currentColor;transition:letter-spacing .4s var(--ease)}
.link-arrow:hover{letter-spacing:.04em}
.link-arrow--light{color:#9FC0EE}

/* home teasers */
.teasers{padding:3rem 0 6rem}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.5rem}
.tcard{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;color:#fff}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,36,71,.9),transparent 60%)}
.tcard:hover img{transform:scale(1.1)}
.tcard div{position:absolute;z-index:1;left:1.3rem;right:1.3rem;bottom:1.2rem;transition:transform .5s var(--ease)}
.tcard:hover div{transform:translateY(-6px)}
.tcard h3{font-size:1.7rem}
.tcard p{font-size:.85rem;opacity:.85}
.amen .sec-head{align-items:flex-end}
.dest{padding:6rem 0}
.dest .sec-head{margin-bottom:0}

/* cta band */
.cta{background:var(--blue);color:#fff;padding:5.5rem 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:600px;height:600px;right:-180px;top:-260px;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.03)}
.cta__in{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;position:relative}
.cta h2{margin:0}
.cta h2 em{color:#fff;opacity:.8}
.cta .btn{background:#fff;color:var(--navy);box-shadow:none}
.cta .btn:hover{background:var(--sand)}

/* accommodation */
.jump{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;padding:3rem 0 1rem}
.jump a{padding:.6rem 1.3rem;border:1.5px solid rgba(14,36,71,.2);border-radius:99px;font-weight:700;color:var(--navy);transition:background .3s,color .3s,border-color .3s}
.jump a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.unit{padding-top:4rem;padding-bottom:3rem;scroll-margin-top:70px}
.unit__head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.unit__head--flip .apt__img{order:2}
.apt__body h2{font-size:clamp(2rem,4vw,3rem);color:var(--navy)}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 1.8rem}
.tags li{padding:.3rem .85rem;border-radius:99px;background:var(--sky);color:var(--navy-2);font-size:.82rem;font-weight:700}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-top:2rem}
.gal button{border:0;padding:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--sky)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal button:hover img{transform:scale(1.1)}
/* accommodation: the main photo is the first of the apartment's photos and opens them */
button.apt__img{display:block;width:100%;border:0;padding:0;background:var(--sky);cursor:zoom-in;font:inherit;color:inherit;text-align:left}
button.apt__img:hover img{transform:scale(1.06)}
/* phones: the third small tile, a darkened photo with "+N photos" that opens them all (in place of the "All photos" button) */
.gal .gal__more{display:none;position:relative}
.gal__more span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:rgba(14,36,71,.58);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.gal__more b{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,20,42,.94);display:flex;align-items:center;justify-content:center;animation:fade .3s}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,1300px);max-height:86vh;border-radius:10px;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:3rem;cursor:pointer;padding:1rem;line-height:1;opacity:.8}
.lightbox button:hover{opacity:1}
.lb__x{top:.5rem;right:1rem}.lb__p{left:.5rem}.lb__n{right:.5rem}
@keyframes fade{from{opacity:0}}

/* amenities page */
.agroups{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:5rem 0 6rem}
.agroup{background:#fff;border-radius:22px;padding:2rem 2.2rem;box-shadow:0 30px 60px -45px rgba(14,36,71,.5);transition:transform .5s var(--ease)}
.agroup:hover{transform:translateY(-5px)}
.agroup__h{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.agroup__h svg{width:40px;height:40px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agroup h2{font-size:1.9rem;margin:0}
.agroup ul{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}
.agroup li{position:relative;padding-left:1.3rem;font-size:.95rem;color:#41506a}
.agroup li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* destinations page */
.dlist{padding:5rem 0 3rem}
.drow{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center;margin-bottom:6rem;scroll-margin-top:80px}
.drow--flip .apt__img{order:2}
.dist{position:absolute;left:1.2rem;bottom:1.2rem;padding:.55rem 1.1rem;border-radius:99px;background:rgba(14,36,71,.8);backdrop-filter:blur(8px);color:#fff;font-weight:700}
.dist small{font-weight:400;opacity:.8}

/* contact page */
.cgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;padding:5rem 0 3rem}
.lead{font-family:var(--serif);font-size:1.7rem;line-height:1.3;color:var(--navy);margin-bottom:2rem}
.contact__list--dark li{border-color:rgba(14,36,71,.15)}
.contact__list--dark small{color:var(--blue)}
.contact__list--dark a,.contact__list--dark span{color:var(--navy)}
.form{display:grid;gap:1.1rem;background:#fff;padding:2.2rem;border-radius:24px;box-shadow:0 40px 70px -50px rgba(14,36,71,.6)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{display:grid;gap:.35rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b85}
.form input:not([type=checkbox]),.form textarea{font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);padding:.8rem 1rem;border:1.5px solid rgba(14,36,71,.15);border-radius:12px;background:var(--sand);transition:border-color .3s,box-shadow .3s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(65,113,181,.18)}
.form .check{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:.85rem;color:#41506a}
.form .check a{text-decoration:underline}
.form .btn{border:0;cursor:pointer;justify-self:start;font-family:inherit}
.map{padding-bottom:6rem}
.map iframe{width:100%;height:420px;border:0;border-radius:24px;filter:saturate(.85)}

/* footer additions */
.foot address{font-style:normal;line-height:1.8}
.foot a:hover{color:#fff}
.foot p a{text-decoration:underline;text-underline-offset:3px}
.foot__in{align-items:flex-start}

@media(max-width:900px){
  .tgrid{grid-template-columns:1fr 1fr}
  .unit__head,.drow,.cgrid{grid-template-columns:1fr}
  .unit__head--flip .apt__img,.drow--flip .apt__img{order:0}
  .agroups{grid-template-columns:1fr}
  .agroup ul{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .hero--page .hero__content{padding:8rem 0 6rem}
  .drow{margin-bottom:4rem}
}

/* ===== impressive layer ===== */
/* loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--navy);display:grid;place-items:center;transition:transform 1.1s cubic-bezier(.76,0,.24,1) .15s;will-change:transform}
.loader__edge{position:absolute;left:0;top:100%;width:100%;height:80px;fill:var(--navy);margin-top:-1px}
.loader__in{display:grid;gap:1.6rem;justify-items:center;transition:opacity .5s,transform .8s var(--ease)}
.loader img{width:min(260px,60vw);animation:logoIn 1.4s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:translateY(24px) scale(.9);filter:blur(8px)}}
.loader__bar{width:min(220px,50vw);height:2px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.loader__bar i{display:block;height:100%;background:#9FC0EE;transform:scaleX(0);transform-origin:left;animation:bar 1.6s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes bar{to{transform:scaleX(1)}}
.is-loaded .loader__in{opacity:0;transform:translateY(-20px)}
.is-loaded .loader{transform:translateY(-calc(100% + 80px));transform:translateY(calc(-100% - 80px))}
.is-done .loader{display:none}
html:not(.is-ready) body{overflow:hidden}

/* split chars */
.ch{display:inline-block;opacity:0;transform:translateY(105%) rotate(7deg);transform-origin:0 100%;transition:transform 1.1s var(--ease) calc(var(--i)*38ms + .15s),opacity .6s calc(var(--i)*38ms + .15s)}
.word{display:inline-block;white-space:nowrap}
.is-ready .hero__title .ch,.intro__title.in .ch{opacity:1;transform:none}
.hero .reveal{transition-delay:calc(var(--d,0s) + .5s)}

/* hero extras */
.hero__sun{transition:transform .4s ease-out}
.hero__sun::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,220,160,.0),rgba(255,220,160,.18),rgba(255,220,160,0) 12%,rgba(255,220,160,.12) 25%,rgba(255,220,160,0) 37%,rgba(255,220,160,.16) 50%,rgba(255,220,160,0) 62%,rgba(255,220,160,.12) 75%,rgba(255,220,160,0) 87%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__content{transition:transform .5s ease-out}
.motes{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}

/* marquee */
.marquee{overflow:hidden;background:var(--sand);padding:2.2rem 0 1rem;white-space:nowrap}
.marquee__t{display:inline-flex;gap:2.5rem;align-items:center;animation:marq 38s linear infinite;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.6rem,7vw,5.5rem);color:transparent;-webkit-text-stroke:1.2px var(--blue)}
.marquee__t i{font-style:normal;font-size:.5em;color:var(--navy);-webkit-text-stroke:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* statement */
.statement{padding:5rem 0 3rem;background:var(--sand)}
.scrub{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.15;max-width:22ch;max-width:24em;color:var(--navy)}
.scrub .w{opacity:.14;transition:opacity .35s}
.scrub .w.on{opacity:1}

/* clip image reveal */
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.65,0,.2,1) var(--d,0s);overflow:hidden}
.clip.in{clip-path:inset(0)}
.clip img{transform:scale(1.35);transition:transform 2s var(--ease)}
.clip.in img{transform:scale(1.08)}
.strip figure img{will-change:transform}

/* horizontal pinned apartments */
.hs{position:relative;background:var(--sand)}
.hs__sticky{position:sticky;top:0;height:calc(100 * var(--svh));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding-top:4.5rem}
.hs__head{display:flex;justify-content:space-between;align-items:flex-end;width:min(1180px,100% - 48px);flex-wrap:wrap;gap:1rem}
.hs__head h2{margin:0}
.hs__head .link-arrow{margin-bottom:.5rem}
.hs__view{overflow:visible}
.hs__track{display:flex;gap:1.6rem;padding-inline:max(24px,calc((100vw - 1180px)/2));width:max-content;will-change:transform}
.hcard{position:relative;flex:0 0 clamp(300px,38vw,560px);height:min(calc(62 * var(--svh)),560px);border-radius:26px;overflow:hidden;color:#fff;display:block;box-shadow:0 40px 70px -40px rgba(14,36,71,.7)}
.hcard__img{position:absolute;inset:0}
.hcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,36,71,.88),transparent 58%)}
.hcard:hover .hcard__img img{transform:scale(1.1)}
.hcard__no{position:absolute;z-index:1;right:1.4rem;top:.8rem;font-family:var(--serif);font-style:italic;font-size:6rem;line-height:1;color:rgba(255,255,255,.85);text-shadow:0 4px 30px rgba(14,36,71,.5)}
.hcard__txt{position:absolute;z-index:1;left:1.8rem;right:1.8rem;bottom:1.6rem}
.hcard h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.hcard p{opacity:.85;margin-bottom:.8rem}
.hcard__go{display:inline-block;font-weight:700;border-bottom:2px solid #9FC0EE;transition:letter-spacing .4s var(--ease)}
.hcard:hover .hcard__go{letter-spacing:.05em}
.hs__bar{width:min(1180px,100% - 48px);height:3px;margin:0 auto;background:rgba(14,36,71,.12);border-radius:3px;overflow:hidden}
.hs__bar i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}

/* amenity tilt */
.amen__grid{perspective:900px}
.amen__grid li{transform-style:preserve-3d;will-change:transform}
.amen__grid li.in{transition:transform .25s ease-out,background .4s,border-color .4s}

/* progress, cursor, buttons */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;background:linear-gradient(90deg,var(--blue),#9FC0EE);transform:scaleX(0);transform-origin:left}
.nav{transition:background .4s,padding .4s,box-shadow .4s,transform .6s var(--ease)}
.nav.is-hidden:not(.open){transform:translateY(-110%)}
.btn{will-change:transform}

@media(max-width:900px){
  .hs{height:auto!important}
  .hs__sticky{position:static;height:auto;padding:4rem 0}
  .hs__view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .hs__view::-webkit-scrollbar{display:none}
  .hs__track{transform:none!important}
  .hcard{scroll-snap-align:center;flex-basis:78vw;height:calc(68 * var(--svh))}
  .hs__bar{display:none}
  .hcard__no{font-size:4.5rem}
}
/* touch tablets whose browser can't tie animations to the scroll: the apartments row is swiped instead of pinned (main.js) */
.hs--swipe{height:auto!important}
.hs--swipe .hs__sticky{position:static;height:auto;padding:4rem 0}
.hs--swipe .hs__view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hs--swipe .hs__view::-webkit-scrollbar{display:none}
.hs--swipe .hs__track{transform:none!important}
.hs--swipe .hcard{scroll-snap-align:center}
.hs--swipe .hs__bar{display:none}
/* touch screens: a solid bar instead of the frosted one (a blur behind a fixed bar is redrawn on every frame of the scroll
   and of Safari's toolbar sliding), and no standing layers for things that only move on a mouse */
.touch .nav.is-solid:not(.open){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(247,241,231,.96)}
.touch .nav.is-solid.nav--dark:not(.open){background:rgba(14,36,71,.96)}
.touch .btn,.touch .amen__grid li,.touch .hero__bg,.touch .strip figure img{will-change:auto}
@media(prefers-reduced-motion:reduce){
  .ch,.clip,.clip img{opacity:1!important;transform:none!important;clip-path:none!important}
  .loader{display:none}
  .marquee__t{animation:none}
  .scrub .w{opacity:1}
}

/* ===== logo hero ===== */
.hero--logo{background:radial-gradient(120% 90% at 50% 38%,#1d4580 0%,var(--navy-2) 38%,var(--navy) 100%)}
.hero--logo .hero__sun{left:50%;right:auto;top:6%;transform:translateX(-50%);width:min(70vw,900px);animation:none;background:radial-gradient(circle,rgba(159,192,238,.28),rgba(159,192,238,0) 62%)}
.hero--logo .hero__sun::before{display:none}
.hero--logo .hero__content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6rem 0 8rem}
.hero--logo .hero__lead{margin-inline:auto}
.hero--logo .hero__cta{justify-content:center}
.hero--logo .hero__title{font-size:clamp(2.2rem,5.2vw,4.4rem);margin-bottom:1.2rem}
.mark{width:min(78vw,940px);height:auto;overflow:visible;margin-bottom:2rem}
.mark .draw{stroke:#fff;stroke-width:.45;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .mark .draw{animation:draw 2.4s cubic-bezier(.6,0,.2,1) .05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mark .slides{opacity:0;transition:transform .6s ease-out}
.is-ready .mark .slides{opacity:1;transition:opacity 1.4s ease 1.2s,transform .6s ease-out}
.mark .slide{opacity:0;transform-box:fill-box;transform-origin:50% var(--oy,50%)}
.is-ready .mark .slide{animation:slide 18s linear infinite;animation-delay:calc(var(--k)*3s)}
/* one animation per photo (fade in, slow zoom while it shows, fade out) instead of two that ran all the time: Safari repaints a clipped SVG photo on every frame it moves */
@keyframes slide{0%{opacity:0;scale:1.02}3.4%{opacity:1}16.7%{opacity:1}20%{opacity:0;scale:1.12}100%{opacity:0;scale:1.12}}
/* each photo shows for 3 s (6 photos, 18 s round): the timings above are fractions of that round */
.mark .bar{fill:#fff;transform-box:fill-box;transform-origin:center;transform:scaleX(0)}
.is-ready .mark .bar{animation:bar-in 1.2s var(--ease) calc(1.2s + var(--k)*.09s) forwards,shimmer 5s ease-in-out calc(3.6s + var(--k)*.35s) infinite alternate}
@keyframes bar-in{to{transform:scaleX(1)}}
@keyframes shimmer{from{opacity:1}to{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .mark .draw{stroke-dashoffset:0}
  .mark .slides{opacity:1}
  .mark .slide{animation:none!important;opacity:0}
  .mark .slide:first-child{opacity:1}
  .mark .bar{transform:none;animation:none!important}
}

/* destinations marquee rows */
.mrows{display:grid;gap:1.2rem;margin-top:3rem;overflow:hidden}
/* no long strip sliding as one piece (on iPhones that strip blinked at the point where it jumps back): the --n cards of a
   row sit on top of each other and each one glides across on its own, one card apart (--k, set per card), and wraps round
   while it is off screen. A row is --n cards long, which has to be more than the screen plus one card, hence the max() */
.mrow{overflow:hidden;--w:max(clamp(260px,26vw,400px),calc(100vw / (var(--n) - 1) - 1.2rem));--step:calc(var(--w) + 1.2rem);--T:85s}
.mrow__t{display:grid}
.mrow .card{grid-area:1/1;width:var(--w);aspect-ratio:16/10;animation-name:mcard;animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(var(--k) * var(--T));will-change:transform}
.mrow--rev .card{animation-name:mcard-rev}
@keyframes mcard{from{transform:translateX(calc(var(--step) * (var(--n) - 1)))}to{transform:translateX(calc(var(--step) * -1))}}
@keyframes mcard-rev{from{transform:translateX(calc(var(--step) * -1))}to{transform:translateX(calc(var(--step) * (var(--n) - 1)))}}
.mrow .card span{font-size:1.5rem}
@media(prefers-reduced-motion:reduce){.mrow__t{display:flex;width:max-content}.mrow .card{animation:none;margin-right:1.2rem}.mrow{overflow-x:auto}}

/* footer bar + signature */
.foot__bar{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.foot__bar p{flex:none;border:0;padding:0;margin:0}
.foot__bar plexica-signature{--pxc-label-opacity:.8;font-size:.85rem}

/* ===== home banner: logo + wordmark, then intro text ===== */
.hero--logo .hero__content{padding:6.5rem 0 9rem}
.mark{width:min(80vw,960px);margin-bottom:1.5rem;transform-origin:0 0;transition:opacity .25s}
.wordmark{width:min(57vw,486px);height:auto;overflow:visible;transform-origin:0 0;fill:#fff}

.intro{background:var(--sand);padding:4rem 0 1rem;text-align:center}
.intro__in{display:flex;flex-direction:column;align-items:center}
.intro__title{font-size:clamp(2.6rem,6.6vw,5.8rem);font-weight:300;margin-bottom:1.4rem;color:var(--navy)}
.intro__lead{max-width:34rem;font-size:1.2rem;color:#33415a;margin-bottom:2rem}
.intro__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn--outline{background:transparent;color:var(--navy);border:1.5px solid rgba(14,36,71,.35);box-shadow:none}
.btn--outline:hover{background:var(--navy);color:#fff}

/* ===== minimal nav (logo + burger) and full-screen menu ===== */
.nav{z-index:60;justify-content:space-between}
.nav__logo{margin-right:0}
.nav--home .nav__logo{opacity:0;pointer-events:none;transition:opacity .4s}
.nav--home.logo-on .nav__logo,.nav--home.open .nav__logo{opacity:1;pointer-events:auto}
.burger{display:block;width:48px;height:48px;z-index:2}
.burger span{left:11px;right:11px;height:2px;border-radius:2px;background:#fff;transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s,background .3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:30px}
.nav.is-solid .burger span{background:var(--blue)}
.nav.open .burger span{background:#fff}
.nav.open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){top:23px;transform:rotate(-45deg)}
.nav.open{background:transparent;backdrop-filter:none;box-shadow:none}
.nav.open .logo-light{opacity:1}.nav.open .logo-dark{opacity:0}
.menu{position:fixed;inset:0;z-index:55;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:6rem clamp(1.5rem,6vw,6rem) 3rem;clip-path:circle(0 at calc(100% - 3rem) 2.5rem);visibility:hidden;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s .9s}
.menu.open{clip-path:circle(150% at calc(100% - 3rem) 2.5rem);visibility:visible;transition:clip-path 1s cubic-bezier(.76,0,.24,1),visibility 0s}
.menu__in{display:grid;gap:.2rem}
.menu__in a{display:flex;align-items:baseline;gap:1.2rem;font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,7vw,5.2rem);line-height:1.15;opacity:0;transform:translateY(40px);transition:opacity .4s,transform .5s var(--ease),color .3s}
.menu.open .menu__in a{opacity:1;transform:none;transition:opacity .6s calc(.35s + var(--i)*.08s),transform .9s var(--ease) calc(.35s + var(--i)*.08s),color .3s}
.menu__in a small{font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;color:#9FC0EE}
.menu__in a:hover{color:#9FC0EE}
.menu__in a.is-active{color:#9FC0EE;font-style:italic}
.menu__foot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;margin-top:3rem;font-size:.95rem;color:#C9D8EE;opacity:0;transition:opacity .3s}
.menu.open .menu__foot{opacity:1;transition:opacity .6s .9s}
.menu__foot a:not(.btn):hover{color:#fff}
@media(max-width:900px){.nav.open .nav__logo{position:relative}}

/* ===== round 4 ===== */
/* nav: Book now (left) · logo (centre) · burger (right) */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__book{justify-self:start}
.nav__logo{justify-self:center;height:56px}
.nav__logo img{height:56px}
.burger{justify-self:end}
@media(max-width:600px){.nav__logo,.nav__logo img{height:44px}.nav__book{padding:.55rem 1rem;font-size:.8rem}}

/* banner -> light-blue intro panel with the marquee inside */
.hero--logo .waves .w{fill:var(--sky)}
.intro{position:relative;background:var(--sky);padding:4.5rem 0 0}
.intro .marquee{background:none;padding:3rem 0 6.5rem}
.intro__edge{position:absolute;left:0;bottom:-1px;width:100%;height:70px;fill:var(--sand);display:block}
.intro .btn--outline{border-color:rgba(14,36,71,.4)}
.statement{padding-top:3rem}

/* accommodation carousel spacing */
.welcome{padding-bottom:2rem}
.hs__sticky{justify-content:flex-start;gap:1.6rem;padding-top:5.5rem;padding-bottom:6rem}
.hcard{height:min(calc(54 * var(--svh)),500px)}

/* CTA: logo waves instead of the circle */
.cta::before{display:none}
.cta__side{position:relative;display:grid;place-items:center;width:min(42vw,500px);aspect-ratio:90/38}
.cta__mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta__side .btn{position:relative}
.cm-bar{fill:rgba(255,255,255,.32);transform-box:fill-box;transform-origin:center;animation:shimmer 5s ease-in-out calc(var(--k)*.35s) infinite alternate}
@media(prefers-reduced-motion:reduce){.cm-bar{animation:none}}
@media(max-width:800px){.cta__side{width:100%;max-width:460px}}

/* footer hover transitions */
.foot a{transition:color .35s var(--ease),background-size .5s var(--ease),opacity .3s}
.foot nav a,.foot address a,.foot__bar p a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px}
.foot nav a:hover,.foot address a:hover,.foot__bar p a:hover{color:#fff;background-size:100% 1px}
.foot nav a[href="#top"]{display:inline-block}
.foot nav a[href="#top"]:hover{transform:translateY(-3px)}
.foot nav a[href="#top"]{transition:color .35s,background-size .5s var(--ease),transform .4s var(--ease)}


/* ===== footer layout: big logo left, back to top right ===== */
.foot__in{display:grid;grid-template-columns:auto 1fr auto;gap:2rem 3.5rem;align-items:center}
.foot__logo{display:block}
.foot img{height:110px;width:auto}
.foot__mid{display:grid;gap:1.4rem}
.foot nav{display:flex;gap:.6rem 1.8rem;flex-wrap:wrap}
.foot__bar{grid-column:1/-1}
.totop{display:inline-flex;align-items:center;gap:.8rem;padding:.8rem 1.3rem;border:1.5px solid rgba(255,255,255,.28);border-radius:99px;color:#fff;font-weight:700;background:none;transition:background .4s var(--ease),color .4s,border-color .4s,transform .4s var(--ease)}
.totop i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);transition:transform .4s var(--ease),background .4s}
.totop:hover{background:#fff;color:var(--navy);border-color:#fff}
.totop:hover i{transform:translateY(-4px);background:var(--navy);color:#fff}
@media(max-width:800px){.foot__in{grid-template-columns:1fr;justify-items:start}.foot img{height:90px}}

/* back to top: keep the label readable on hover */
.foot a.totop{color:#fff}
.foot a.totop:hover{background:#fff;color:var(--navy);border-color:#fff}
.foot a.totop:hover span{color:var(--navy)}

/* CTA: full circle of lines, cut by the section edges, button in the middle */
.cta__side{height:200px;aspect-ratio:auto}
.cta__mark{left:50%;top:50%;right:auto;bottom:auto;width:min(62vw,660px);height:auto;transform:translate(-50%,-50%)}
@media(max-width:800px){.cta__side{height:180px}.cta__mark{width:120vw}}

/* back to top: smooth hover */
.foot a.totop{transition:background .5s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.totop span{transition:color .4s var(--ease)}
.totop i{transition:transform .5s var(--ease),background .4s var(--ease),color .4s}

/* CTA: the logo sun as the button */
.sunbtn{position:relative;display:block;flex:none;width:min(46vw,250px);color:var(--navy);transition:transform .7s var(--ease),opacity 1s var(--ease)}
.sunbtn svg{display:block;width:100%;height:auto;overflow:visible}
.sb-top{fill:#fff;transition:fill .5s var(--ease)}
.sb-bar{fill:#fff;transform-box:fill-box;transform-origin:center;animation:shimmer 5s ease-in-out calc(var(--k)*.35s) infinite alternate;transition:transform .7s var(--ease)}
.sunbtn span{position:absolute;left:50%;top:30%;width:62%;transform:translate(-50%,-50%);text-align:center;font-weight:800;font-size:1.05rem;line-height:1.2;transition:color .5s var(--ease)}
.sunbtn:hover{transform:scale(1.06) rotate(-3deg)}
.sunbtn:hover .sb-top{fill:var(--navy)}
.sunbtn:hover span{color:#fff}
.sunbtn:hover .sb-bar{transform:scaleX(1.14)}
@media(max-width:800px){.sunbtn{width:200px}}
@media(prefers-reduced-motion:reduce){.sb-bar{animation:none}}

/* handwriting pen */
.wm-pen{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.is-ready .wm-pen{animation:pen var(--t) linear var(--d) forwards}
@keyframes pen{to{stroke-dashoffset:0}}
.wm-all{opacity:0}
.is-ready .wm-all{animation:wm-all .6s ease var(--d) forwards}
@keyframes wm-all{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.wm-pen{stroke-dashoffset:0;animation:none!important}.wm-all{opacity:1;animation:none!important}}

/* sun button: bigger, serif label */
.sunbtn{width:min(54vw,320px)}
.sunbtn span{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;width:70%;top:29%;letter-spacing:-.01em}
.sunbtn span::after{content:" →";font-family:var(--sans);font-size:.7em}
@media(max-width:800px){.sunbtn{width:240px}}
/* the title wraps onto more lines beside the sun, so the sun never drops under it (phones stack them, see max-width:700px) */
.cta__in{flex-wrap:nowrap}
.cta h2{flex:1 1 auto;min-width:0;text-wrap:balance}

/* bigger "Navy Blue": sizes share the banner height so the whole logo + name fit on screen */
.hero--logo{--avail:calc(calc(100 * var(--svh)) - 13rem)}
.hero--logo .hero__content{padding:5.5rem 0 7.5rem}
.hero--logo .mark{width:min(72vw,940px,calc(var(--avail)*1.1));margin-bottom:1.2rem}
.hero--logo .wordmark{width:min(72vw,580px,calc(var(--avail)*1))}
@media(max-width:700px){.hero--logo .mark{width:min(78vw,calc(var(--avail)*1.1))}.hero--logo .wordmark{width:min(78vw,calc(var(--avail)*1))}}

/* "Navy Blue": soft left-to-right writing sweep (as before) */
.wordmark{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 33%,transparent 40%);mask-image:linear-gradient(90deg,#000 0,#000 33%,transparent 40%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.is-ready .wordmark{animation:write 2.6s cubic-bezier(.55,0,.25,1) 1.55s forwards}
@keyframes write{to{-webkit-mask-position:0 0;mask-position:0 0}}
@media(prefers-reduced-motion:reduce){.wordmark{-webkit-mask-image:none;mask-image:none}}
.nav__book{white-space:nowrap}

/* the name sits in a slot so it can be pinned in place (position:fixed) while it fades out */
.hero--logo .wm-slot{width:min(72vw,580px,calc(var(--avail)*1));aspect-ratio:168/56}
@media(max-width:700px){.hero--logo .wm-slot{width:min(78vw,calc(var(--avail)*1))}}
.hero--logo .wm-slot .wordmark{width:100%;display:block;pointer-events:none}

/* moving section waves (intro panel edge + amenities top) */
.intro__edge,.amen__top{overflow:hidden}
.wv{animation:wv 16s linear infinite}
.wv--back{opacity:.45;animation-name:wv-back;animation-duration:24s}
.amen__top .wv{animation-duration:20s}
.amen__top .wv--back{animation-duration:30s}
@keyframes wv{to{transform:translateX(-1440px)}}
@keyframes wv-back{from{transform:translateX(-1440px)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.wv{animation:none}}

/* banner waves: continuous sideways drift */
.waves{overflow:hidden}
.waves .w{animation:hw var(--t,16s) linear infinite;transform-box:view-box}
.waves .w--r{animation-name:hw-r}
@keyframes hw{to{transform:translateX(calc(var(--p) * -1px))}}
@keyframes hw-r{from{transform:translateX(calc(var(--p) * -1px))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.waves .w{animation:none}}

/* second section: marquee on top, then title, text and a single outlined button */
.intro{padding-top:2.5rem}
.intro .marquee{padding:1.5rem 0 3.5rem}
.intro__in{padding-bottom:7rem}

/* marquee: a solid brand-blue band with small spaced capitals */
.intro .marquee{background:var(--blue);color:#fff;padding:1.05rem 0;margin:1.2rem 0 4.5rem;overflow:hidden}
.intro .marquee__t{gap:2.2rem;animation-duration:34s;font-family:var(--sans);font-style:normal;font-weight:800;font-size:clamp(.85rem,1.2vw,1.05rem);letter-spacing:.28em;text-transform:uppercase;color:#fff;-webkit-text-stroke:0}
.intro .marquee__t i{font-size:.9em;color:#BFD5F3;-webkit-text-stroke:0}

/* marquee, third take: hairline-ruled strip with solid navy italic serif */
.intro .marquee{background:none;color:var(--navy);padding:1.15rem 0;margin:1.2rem 0 4.5rem;border-block:1px solid rgba(14,36,71,.25)}
.intro .marquee__t{gap:2.2rem;animation-duration:42s;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:0;text-transform:none;color:var(--navy)}
.intro .marquee__t i{font-style:normal;font-size:.5em;color:var(--blue)}

/* marquee, fourth take: deep navy band, white italic serif, the logo's sun-lines as separators */
.intro .marquee{background:var(--navy);border:0;color:#fff;padding:1.25rem 0;margin:1.2rem 0 4.5rem}
.intro .marquee__t{gap:2.4rem;animation-duration:44s;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.4vw,2.1rem);color:#fff}
.intro .marquee__t i{display:inline-block;flex:none;width:34px;height:19px;font-size:0;color:transparent;background:repeating-linear-gradient(180deg,#9FC0EE 0 2px,transparent 2px 5px);border-radius:0 0 34px 34px/0 0 19px 19px}

/* marquee, fifth take: white pill chips that drift past, softly faded at both edges */
.intro .marquee{background:none;border:0;color:var(--navy);padding:.4rem 0;margin:1.2rem 0 4.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.intro .marquee__t{gap:.9rem;animation-duration:46s;font-family:var(--sans);font-style:normal;font-weight:700;font-size:1rem;letter-spacing:.01em;text-transform:none;color:var(--navy)}
.intro .marquee__t span{background:#fff;border-radius:99px;padding:.7rem 1.5rem;box-shadow:0 12px 26px -16px rgba(14,36,71,.55)}
.intro .marquee__t i{display:none}

/* marquee, back to the first look: very large italic outlined serif, solid navy stars */
.intro .marquee{background:none;border:0;color:inherit;padding:1.5rem 0 3.5rem;margin:0;-webkit-mask-image:none;mask-image:none}
.intro .marquee__t{gap:2.5rem;animation-duration:38s;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.6rem,7vw,5.5rem);letter-spacing:0;text-transform:none;color:transparent;-webkit-text-stroke:1.2px var(--blue)}
.intro .marquee__t span{background:none;border-radius:0;padding:0;box-shadow:none}
.intro .marquee__t i{display:inline;width:auto;height:auto;background:none;border-radius:0;font-style:normal;font-size:.5em;color:var(--navy);-webkit-text-stroke:0}
.intro .marquee__t i{color:var(--blue)}

/* second section: with the marquee gone */
.intro{padding-top:5rem}
.intro__in{padding-bottom:7rem}

/* carousel: pinned content sits in the middle of the screen, so it starts moving when the carousel is mid-page */
.hs__sticky{justify-content:center;padding-top:4.5rem;padding-bottom:5rem}
.hs{margin-top:-4rem}

/* amenities: the wave and the section share exactly the same navy at the join (vertical gradient) */
.amen{background:linear-gradient(180deg,var(--navy) 0,var(--navy) 140px,var(--navy-2) 100%)}

/* sun button: the movement is on the inside, the clickable area stays still */
.sunbtn{transition:opacity 1s var(--ease)}
.sunbtn:hover{transform:none}
.sunbtn .sb-in{display:block;position:relative;transition:transform .7s var(--ease)}
.sunbtn:hover .sb-in{transform:scale(1.06) rotate(-3deg)}

/* glass menu: no colour, just a frosted blur of whatever is behind it */
.nav.is-solid{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.14)}
.nav.is-solid.nav--dark .logo-light{opacity:1}
.nav.is-solid.nav--dark .logo-dark{opacity:0}
.nav.is-solid.nav--dark .burger span{background:#fff}
.nav.open{border-bottom-color:transparent}

/* bigger logo in the menu so "Navy Blue" can be read */
.nav__logo,.nav__logo img{height:70px}
@media(max-width:600px){.nav__logo,.nav__logo img{height:50px}}

/* Contact-us sun button, calmer: nothing tilts or grows. Only the colours change, the lines open a little and the arrow steps forward */
.sunbtn .sb-in{transition:none}
.sunbtn:hover .sb-in{transform:none}
.sunbtn span::after{content:none}
.sunbtn .sb-arrow{display:inline-block;margin-left:.4em;font-family:var(--sans);font-style:normal;font-weight:700;font-size:.7em;transition:transform .45s var(--ease)}
.sunbtn:hover .sb-arrow,.sunbtn:focus-visible .sb-arrow{transform:translateX(6px)}
.sunbtn .sb-bar{transition:transform .6s var(--ease) calc(var(--k)*.02s)}
.sunbtn:hover .sb-bar{transform:scaleX(1.08)}
.sunbtn:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:50%}

/* menu logo: the icon is back at the 56px size, the name is drawn larger and on its own */
.nav__logo{display:flex;align-items:center;gap:.7rem;height:auto;color:#fff}
.nav__logo svg{display:block;fill:currentColor;width:auto;overflow:visible}
.nav__logo .nl-icon{height:56px}
.nav__logo .nl-word{height:50px}
.nav.is-solid .nav__logo{color:var(--blue)}
.nav.is-solid.nav--dark .nav__logo,.nav.open .nav__logo{color:#fff}
@media(max-width:600px){.nav__logo{gap:.5rem}.nav__logo .nl-icon{height:42px}.nav__logo .nl-word{height:36px}}

/* menu logo: "Navy" on the left, the icon in the middle, "Blue" on the right – both words in equal boxes so the icon sits exactly centred */
.nav__logo .nl-navy,.nav__logo .nl-blue{height:50px;width:108px}
@media(max-width:600px){.nav__logo .nl-navy,.nav__logo .nl-blue{height:36px;width:78px}}
.nav__logo .nl-navy{transform:translateX(4px)}

/* smooth colour change of the menu logo and burger when it passes from light to dark areas */
.nav__logo{transition:color .35s ease,opacity .4s}
.burger span{transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s,background-color .35s ease}
.nav .nav__logo{transition:color .35s ease,opacity .4s}

/* phones: the menu bar must never be wider than the screen */
@media(max-width:600px){
  .nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-inline:1rem;gap:.4rem}
  .nav__logo{gap:.35rem}
  .nav__logo .nl-icon{height:36px}
  .nav__logo .nl-navy,.nav__logo .nl-blue{height:30px;width:64px}
  .nav__book{padding:.5rem .85rem;font-size:.75rem}
  .burger{width:44px;height:44px}
  .burger span{left:10px;right:10px}
}
@media(max-width:400px){.nav__book{display:none}}
@media(max-width:340px){
  .nav__logo .nl-icon{height:30px}
  .nav__logo .nl-navy,.nav__logo .nl-blue{height:25px;width:54px}
}
/* footer line: let the copyright text wrap instead of pushing the page wider than the screen */
.foot__bar p{flex:0 1 auto;min-width:0}
/* the apartments' registry numbers (ΑΜΑ) on a line of their own; a number never breaks away from its apartment */
.foot__ama{display:block;margin-top:.4rem;opacity:.8}
.foot__ama span{white-space:nowrap}
.foot__ama span+span::before{content:" · "}
/* phones: one apartment per line instead of an uneven wrap */
@media(max-width:700px){
  .foot__ama span{display:block}
  .foot__ama span+span::before{content:none}
}
.foot,.foot__in{overflow-x:clip}
/* fixed grid slots, so the logo stays in the middle column even when "Book now" is hidden on small phones */
.nav .nav__book{grid-column:1;grid-row:1}
.nav .nav__logo{grid-column:2;grid-row:1}
.nav .burger{grid-column:3;grid-row:1}

/* ===================== phones (<= 700px) ===================== */
@media(max-width:700px){
  :root{--m:4rem}                                   /* one vertical rhythm for every section: 64px */

  /* 1) smaller wave dividers */
  .waves{height:46px}
  .intro__edge{height:30px}
  .amen__top{height:30px;top:-29px}

  /* 2) equal spacing */
  h2{margin-bottom:1rem}
  .eyebrow{margin-bottom:.9rem}
  .sec-head,.amen .sec-head{flex-direction:column;align-items:flex-start;gap:.2rem}   /* .amen .sec-head is more specific than .sec-head and set flex-end for the row layout */
  .link-arrow{margin:0 0 .2rem}
  .intro{padding-top:var(--m)}
  .intro__in{padding-bottom:calc(var(--m) + 18px)}
  .intro__title{margin-bottom:1.2rem}
  .intro__lead{margin-bottom:1.6rem}
  .statement{padding:var(--m) 0 0}
  .welcome{padding:var(--m) 0 0}
  .welcome__grid{gap:1.4rem}
  .strip{margin-top:2.2rem;gap:1rem}
  .hs{margin-top:0}
  .hs__sticky{padding:var(--m) 0 calc(var(--m) + 18px);gap:1.6rem}
  .amen{padding:var(--m) 0}
  .amen__grid{margin-top:2rem}
  .dest{padding:var(--m) 0}
  .mrows{margin-top:2rem}
  .cta{padding:var(--m) 0}
  .foot{padding:3rem 0 1.75rem}

  /* 3) the three numbers on one line */
  .facts{flex-wrap:nowrap;gap:.6rem;margin-top:1.6rem}
  .facts li{flex:1 1 0;min-width:0}
  .facts b{font-size:2.5rem}
  /* the labels kept narrower than their column, so there is clear space between the three */
  .facts span{font-size:.74rem;line-height:1.35;max-width:105px;margin-top:.35rem}

  /* 4) second photo no longer cut at the bottom */
  .strip figure,.strip figure:nth-child(2){border-radius:200px 200px 18px 18px;margin-top:0}
  .clip img{translate:none!important}

  /* 5) two amenity tiles per row */
  .amen__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .amen__grid li{padding:1.1rem 1rem;gap:.7rem;font-size:.9rem}
  .amen__grid svg{width:36px;height:36px}

  /* 6) "Let's plan your summer" centred */
  .cta__in{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.8rem}

  /* 7) footer centred, smaller "back to top" */
  .foot__in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.4rem}
  .foot img{height:80px}
  .foot__mid{justify-items:center;gap:1rem}
  .foot nav{justify-content:center}
  .foot__bar{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.9rem;padding-top:1.25rem}
  .totop{padding:.45rem .85rem;font-size:.78rem;gap:.5rem}
  .totop i{width:22px;height:22px;font-size:.8rem}
}

/* the glow lives inside the logo's own box, so it is always centred behind the logo whatever the screen shape */
.mark-wrap{position:relative;display:block}
.hero--logo .mark{position:relative;z-index:1;display:block}
.hero--logo .mark-wrap .hero__sun{left:50%;right:auto;top:50%;width:150%;transform:translate(-50%,-50%);z-index:0;animation:sun-breathe 8s ease-in-out infinite}
@keyframes sun-breathe{50%{scale:1.07;opacity:.72}}
@media(prefers-reduced-motion:reduce){.hero--logo .mark-wrap .hero__sun{animation:none}}
/* exact centring: the glow is centred with the separate `translate` property (the old transform shorthand was scaled by the breathing effect and drifted off-centre) and the gap below the logo belongs to the wrapper, so the wrapper box is exactly the logo box */
.hero--logo .mark{margin-bottom:0}
.hero--logo .mark-wrap{margin-bottom:1.2rem}
.hero--logo .mark-wrap .hero__sun{transform:none;translate:-50% -50%}

/* phones: no list of useful links in the footer (the menu already has them) */
@media(max-width:700px){.foot nav{display:none}}

/* open menu: no glass at all (the bar and the panel are one flat navy) */
.nav.open.is-solid,.nav.open.is-solid.nav--dark{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom-color:transparent}

/* photo that follows the hovered item */
.menu__preview{position:absolute;right:clamp(2rem,7vw,7rem);top:50%;width:min(30vw,440px);height:min(72vh,586px);transform:translateY(-50%);border-radius:200px 200px 22px 22px;overflow:hidden;opacity:0;transition:opacity .8s .5s;pointer-events:none}
.menu.open .menu__preview{opacity:1}
.menu__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.menu[data-hover="0"] .menu__preview img[data-i="0"],.menu[data-hover="1"] .menu__preview img[data-i="1"],.menu[data-hover="2"] .menu__preview img[data-i="2"],.menu[data-hover="3"] .menu__preview img[data-i="3"],.menu[data-hover="4"] .menu__preview img[data-i="4"]{opacity:1;transform:none}
@media(max-width:1100px){.menu__preview{width:26vw}}
@media(max-width:900px){.menu__preview{display:none}}

/* ===== sub-pages on phones: same 64px rhythm, 2-up galleries, single-column cards ===== */
@media(max-width:700px){
  .hero--page{min-height:0}
  .hero--page .hero__content{padding:7.5rem 0 4.5rem}
  .jump{padding:var(--m) 0 0;gap:.6rem}
  .unit{padding:var(--m) 0 0}
  #navy-blue-4{padding-bottom:var(--m)}
  /* accommodation: the photos stay together at the top (the main one, two small ones and the "+N" tile), then the text */
  .unit{display:flex;flex-direction:column}
  .unit__head{display:contents}
  .unit .apt__img{order:1}
  .unit .gal{order:2}
  .unit .apt__body{order:3;margin-top:1.6rem}
  .apt__body .specs{margin-top:1.4rem;padding-top:1.2rem}
  /* a little tighter, so the three tags stay on one line on phones from 360px wide */
  .tags{margin:1.1rem 0 1.4rem;gap:.35rem}
  .tags li{padding:.3rem .65rem;font-size:.76rem}
  .gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
  .gal button:nth-child(n+3):not(.gal__more){display:none}
  .gal .gal__more{display:block}
  .agroups{grid-template-columns:1fr;gap:1rem;padding:var(--m) 0}
  .agroup{padding:1.4rem 1.3rem}
  .agroup ul{grid-template-columns:1fr}
  .agroup h2{font-size:1.6rem}
  .dlist{padding:var(--m) 0 0}
  .drow{gap:1.6rem;margin-bottom:var(--m)}
  .cgrid{grid-template-columns:1fr;gap:2.4rem;padding:var(--m) 0 0}
  .lead{font-size:1.4rem;margin-bottom:1.6rem}
  .form{padding:1.4rem}
  .form__row{grid-template-columns:1fr}
  .map{padding:var(--m) 0}
  .map iframe{height:320px}
}
.map iframe{display:block}

/* menu photo: centred in the right half of the screen */
.menu__preview{right:auto;left:75%;transform:translate(-50%,-50%)}

/* language switch next to the burger */
.nav .nav__right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:.5rem;color:#fff;transition:color .35s ease}
.nav.is-solid .nav__right{color:var(--blue-text)}   /* the language pill: the logo blue (a hair darker so its small text keeps 4.5:1) */
.nav.is-solid.nav--dark .nav__right,.nav.open .nav__right{color:#fff}
.nav .lang{color:inherit;font-size:.78rem;font-weight:800;letter-spacing:.14em;padding:.42rem .75rem;border:1px solid currentColor;border-radius:99px;line-height:1;opacity:.9;transition:background .35s ease,color .35s ease,opacity .3s}
.nav .lang:hover{opacity:1;background:rgba(255,255,255,.16)}

/* phones: only the logo mark in the bar (no "Navy"/"Blue" words) */
@media(max-width:700px){
  .nav__logo .nl-navy,.nav__logo .nl-blue{display:none}
  .nav__logo .nl-icon{height:44px}
  .nav .nav__right{gap:.25rem}
  .nav .lang{padding:.38rem .62rem;font-size:.72rem}
}
@media(max-width:340px){.nav__logo .nl-icon{height:38px}}
.nav .nav__right .lang{color:inherit;border-color:currentColor}

/* accessibility: keyboard users can jump straight to the content; visible focus rings everywhere */
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:#fff;color:var(--navy);padding:.7rem 1.2rem;border-radius:99px;font-weight:700;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transition:top .3s var(--ease)}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.nav :focus-visible,.menu :focus-visible,.foot :focus-visible,.cta :focus-visible,.hero :focus-visible{outline-color:#fff}

/* desktop menu: the list sits in the middle of the left half, the photo in the middle of the right half */
@media(min-width:901px){
  .menu__in{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);width:max-content}
  .menu__in a{font-size:min(5.2rem,5.4vw)}
}

/* menu opening: the page behind stands still (no photo zoom / wave drift repainting under the reveal), and the pointer is ignored until the list has settled so nothing flips under a resting cursor */
.menu{contain:paint}
.menu-open .hero__bg img,.menu-open .waves *,.menu-open .hero *,.menu-open .amen__top *,.menu-open .intro__edge *,.menu-open .mrows *{animation-play-state:paused!important}
.menu__in{pointer-events:none}
.menu.open.settled .menu__in{pointer-events:auto}

/* menu: everything that moves while it opens is promoted to its own layer */
.menu__in a,.menu__preview,.menu__preview img{will-change:transform,opacity}

/* the header sits above the panel: its colours and glass change only once the circle has reached them, so on a light part of the page the logo, EL and burger never blink white-on-white (or blue-on-navy when closing) */
.nav.open,.nav.closing{transition:background .3s .5s,backdrop-filter .3s .5s,-webkit-backdrop-filter .3s .5s,border-color .3s .5s,box-shadow .3s .5s,padding .4s}
.nav.open .nav__logo,.nav.closing .nav__logo,.nav.open .nav__right,.nav.closing .nav__right,.nav.open .lang,.nav.closing .lang{transition:color .3s .5s,opacity .4s,background .35s ease}
.nav.open .burger span,.nav.closing .burger span{transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s,background-color .3s .5s}

/* menu reveal without clip-path: Chrome hands an animated clip-path over between threads when it starts and ends, which can blink.
   The navy circle is now its own layer that only grows (transform), exactly from the burger, to the same size and with the same easing as before.
   The panel itself is transparent, and the list and photo come in just after the circle has covered them (and leave before it uncovers them) */
.menu,.menu.open{clip-path:none;background:transparent}
.menu{transition:visibility 0s .9s}
.menu.open{transition:visibility 0s}
.menu::before{content:"";position:absolute;z-index:-1;left:var(--cx,calc(100% - 3rem));top:var(--cy,2.5rem);width:300vmax;height:300vmax;width:calc(2.1214*hypot(100vw,100vh));height:calc(2.1214*hypot(100vw,100vh));translate:-50% -50%;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .9s cubic-bezier(.76,0,.24,1);will-change:transform;pointer-events:none}
.menu.open::before{transform:scale(1);transition:transform 1s cubic-bezier(.76,0,.24,1)}
.menu__in a{transition:opacity .25s,transform .5s var(--ease),color .3s}
.menu.open .menu__in a{transition:opacity .6s calc(.55s + var(--i)*.07s),transform .9s var(--ease) calc(.55s + var(--i)*.07s),color .3s}
.menu__preview{transition:opacity .3s}
.menu.open .menu__preview{transition:opacity .8s .5s}
.nav.closing{transition:background .3s .38s,backdrop-filter .3s .38s,-webkit-backdrop-filter .3s .38s,border-color .3s .38s,box-shadow .3s .38s,padding .4s}
.nav.closing .nav__logo,.nav.closing .nav__right,.nav.closing .lang{transition:color .3s .38s,opacity .4s,background .35s ease}
.nav.closing .burger span{transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s,background-color .3s .38s}
@media(prefers-reduced-motion:reduce){.menu::before{transition-duration:.01ms!important}}

/* page change from the menu: the list and photo fade out on the navy, the next page opens under the same navy
   (set before its first paint, without transitions) and the circle closes onto it */
.menu.menu--leaving .menu__in a{opacity:0;transition:opacity .25s,transform .5s var(--ease),color .3s}
.menu.menu--leaving .menu__preview{opacity:0;transition:opacity .3s}
.menu--pass .menu__in,.menu--pass .menu__preview{visibility:hidden}
.menu-cover .nav,.menu-cover .nav *,.menu-cover .menu,.menu-cover .menu::before,.menu-cover .menu *{transition:none!important}

/* EL takes its colour from the bar (inherit), so it must not run a colour transition of its own on top of the bar's –
   that doubled the delay and made it change later than the logo and the burger */
.nav .nav__right .lang,.nav.open .nav__right .lang,.nav.closing .nav__right .lang{transition:background .35s ease,opacity .3s}

/* phones: the burger box is 44px, so its lines sit around 22px (they were 2px low) */
@media(max-width:600px){
  .burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
  .nav.open .burger span:nth-child(1),.nav.open .burger span:nth-child(3){top:21px}
}

/* "Book now" in the open menu: white with navy text, changing together with the rest of the bar */
.nav .nav__book{transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s,opacity .3s}
.nav.open .nav__book{background:#fff;color:var(--navy);box-shadow:0 10px 30px -12px rgba(0,0,0,.45);transition:transform .4s var(--ease),background .3s .5s,color .3s .5s,box-shadow .3s .5s,opacity .3s .5s,visibility 0s .5s}
.nav.open .nav__book:hover{background:#E6EEF9}
.nav.closing .nav__book{transition:transform .4s var(--ease),background .3s .38s,color .3s .38s,box-shadow .3s .38s,opacity .2s,visibility 0s .2s}
/* small phones too: "Book now" always sits on the left of the bar */
@media(max-width:400px){.nav .nav__book{display:inline-block}}

/* arriving from a menu link: the circle is sized to reach just the farthest corner and starts moving at once */
.menu.menu--pass::before{width:var(--d,calc(2.1214*hypot(100vw,100vh)));height:var(--d,calc(2.1214*hypot(100vw,100vh)));transition:transform .85s cubic-bezier(.45,0,.25,1)}

/* accommodation: every second apartment sits on a full-width white band so the four read as separate blocks.
   The band is drawn with border-image (it reaches the screen edges without widening the page or clipping anything) */
.unit{padding-top:4.5rem;padding-bottom:4.5rem;scroll-margin-top:76px}
.unit--tint{border-image:linear-gradient(#fff,#fff) fill 0 / 0 / 0 100vmax}
@media(max-width:700px){.unit{padding:var(--m) 0}}
@media(max-width:600px){.unit{scroll-margin-top:64px}}

/* phones: smaller title on the page banners */
@media(max-width:700px){.hero--page .hero__title{font-size:clamp(2rem,8.6vw,2.6rem)}}

/* accommodation: the apartment buttons are a touch smaller on phones */
@media(max-width:700px){.jump a{font-size:14px}}

/* accommodation: the photo is the wide column on both sides, so every apartment has the same photo size */
@media(min-width:901px){.unit__head--flip{grid-template-columns:1fr 1.25fr}}

/* "Book now" + "All photos" */
.unit__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch}
.unit__cta button.btn{font-family:inherit;line-height:inherit;cursor:pointer}
.unit__cta .btn--outline{padding:calc(.95rem - 1.5px) calc(1.8rem - 1.5px)}
.unit__cta .btn .n{font-weight:600;opacity:.6}

/* lightbox: "3 / 31" */
.lb__count{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.16em;opacity:.75}
.lightbox img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}

/* "Book now" follows the rest of the bar: white with navy text whenever the logo, ΕΛ and burger are white
   (over the banner, on dark sections, in the open menu), blue where they turn dark – with the same timing as them */
.nav .nav__book{background:#fff;color:var(--navy);box-shadow:0 10px 30px -12px rgba(0,0,0,.45);transition:transform .4s var(--ease),background .35s ease,color .35s ease,box-shadow .35s ease}
.nav .nav__book:hover{background:#E6EEF9}
.nav.is-solid:not(.nav--dark):not(.open) .nav__book{background:var(--blue);color:#fff;box-shadow:0 10px 30px -10px rgba(65,113,181,.7)}
.nav.is-solid:not(.nav--dark):not(.open) .nav__book:hover{background:#5584c9}

/* contact map: OpenFreeMap coloured in the site palette, a navy pin with the logo and the name, a "Directions" button */
.map__box{position:relative}
.map__canvas{position:relative;z-index:0;isolation:isolate;height:420px;border-radius:24px;overflow:hidden;background:#F7F1E7;font-family:var(--sans)}
.map__canvas iframe{width:100%;height:100%;border:0;display:block}
.map__marker{position:relative;width:54px;height:63px;cursor:default}
.map__dot{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--navy);box-shadow:0 12px 24px -8px rgba(14,36,71,.6)}
.map__dot::after{content:"";position:absolute;left:50%;bottom:-9px;translate:-50% 0;border:6px solid transparent;border-top:9px solid var(--navy);border-bottom:0}
.map__dot svg{width:34px;height:auto;fill:#fff;display:block}
.map__label{position:absolute;left:66px;top:13px;white-space:nowrap;background:#fff;color:var(--navy);border-radius:99px;padding:.35rem .85rem;font-weight:800;font-size:.8rem;letter-spacing:.02em;line-height:1.4;box-shadow:0 10px 24px -10px rgba(14,36,71,.5)}
.map__marker.is-narrow .map__label{left:50%;top:auto;bottom:72px;translate:-50% 0}
.map__canvas .maplibregl-ctrl-group{border:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px -12px rgba(14,36,71,.5)}
.map__canvas .maplibregl-ctrl-group button{width:38px;height:38px}
.map__canvas .maplibregl-ctrl-top-left .maplibregl-ctrl{margin:14px 0 0 14px}
.map__canvas .maplibregl-ctrl-attrib{font-size:10px;color:#5b6b85}
.map__canvas .maplibregl-ctrl-attrib a{color:var(--navy)}
.map__canvas .maplibregl-cooperative-gesture-screen{background:rgba(14,36,71,.55);font-family:var(--sans);font-weight:700}
.map__go{position:absolute;top:14px;right:14px;z-index:1}
.map__go span{display:inline-block;margin-left:.2em}
@media(max-width:700px){.map__canvas{height:320px}.map__go{top:10px;right:10px}}

/* footer: back-to-top arrow in a white circle */
.totop i{background:#fff;color:var(--navy)}

/* footer: Instagram line with a small outline icon */
.foot__ig{display:inline-flex;align-items:center;gap:.45rem}
.foot__ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.foot__ig svg .dot{fill:currentColor;stroke:none}
.map__canvas.maplibregl-map,.map__label{font-family:var(--sans)}

/* legal pages (privacy, cancellation): shorter banner, a sticky table of contents beside a readable text column */
.hero--legal{min-height:calc(52 * var(--svh))}
.legal{display:grid;grid-template-columns:230px minmax(0,720px);justify-content:space-between;gap:4rem;padding:5rem 0 6rem;align-items:start}
.legal__toc{position:sticky;top:110px}
.legal__toc .eyebrow{margin-bottom:.8rem}
.legal__toc ol{list-style:none;border-left:1.5px solid rgba(14,36,71,.12)}
.legal__toc a{display:block;margin-left:-1.5px;padding:.32rem 0 .32rem 1rem;border-left:1.5px solid transparent;font-size:.92rem;font-weight:600;line-height:1.4;color:#5b6b85;transition:color .3s,border-color .3s}
.legal__toc a:hover,.legal__toc a.is-on{color:var(--navy);border-color:var(--blue)}
.legal__date{margin-top:1.6rem;font-size:.8rem;color:#6b7a93}
.legal__body .lead{margin-bottom:2.4rem}
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.glance li{background:#fff;border-radius:20px;padding:1.3rem 1.3rem 1.4rem;box-shadow:0 18px 40px -28px rgba(14,36,71,.35)}
.glance b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.15;color:var(--navy);margin-bottom:.35rem}
.glance span{display:block;font-size:.9rem;line-height:1.55;color:#4a5872}
.legal__sec{margin-top:2.6rem;padding-top:2.6rem;border-top:1px solid rgba(14,36,71,.1);scroll-margin-top:96px}
.legal__sec.reveal{transform:none}  /* fade only, so a jump from the table of contents lands where the section really is */
.legal__sec h2{display:flex;align-items:baseline;gap:.9rem;font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--navy);margin-bottom:1.1rem}
.legal__sec h2 small{flex:none;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--blue)}
.legal__sec p,.legal__sec li{color:#34425c}
.legal__sec p+p,.legal__sec p+ul,.legal__sec ul+p,.legal__sec p+table{margin-top:1rem}
.legal__sec ul li{position:relative;padding-left:1.4rem}
.legal__sec ul li+li{margin-top:.55rem}
.legal__sec ul li::before{content:"";position:absolute;left:0;top:.85em;width:.6rem;height:1.5px;background:var(--blue)}
.legal__sec strong{color:var(--navy);font-weight:700}
.legal__body a,.refund__more a{color:var(--blue);font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:color .3s}
.legal__body a:hover,.refund__more a:hover{color:var(--navy)}
.legal__body a[href^="tel:"],.refund__more a[href^="tel:"]{white-space:nowrap}

/* small blue and grey text on the light backgrounds: a shade darker so it reaches 4.5:1 contrast (WCAG AA);
   the logo blue stays for buttons, bands and large type */
:root{--blue-text:#3D6DB0;--grey-text:#5b6b85}
.eyebrow,.link-arrow,.contact__list--dark small,.legal__sec h2 small,.legal__body a,.refund__more a{color:var(--blue-text)}
.hero .eyebrow{color:#BFD5F3}
.eyebrow--light,.link-arrow--light{color:#9FC0EE}
.legal__date{color:var(--grey-text)}
.svc{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.svc th{text-align:left;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue-text);padding:0 1.2rem .7rem 0}
.svc td{padding:1rem 1.2rem 1rem 0;border-top:1px solid rgba(14,36,71,.1);vertical-align:top;color:#34425c}
.svc td:first-child{width:28%}
.svc td b{display:block;color:var(--navy)}
.svc td small{display:block;font-size:.8rem;color:var(--grey-text)}

/* contact form: hidden spam trap, sending state, result line under the button */
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form.is-sending button[type=submit]{opacity:.6;cursor:progress}
.form__status{font-size:.95rem;line-height:1.5;font-weight:600;color:var(--navy)}
.form__status:empty{display:none}
.form__status.is-ok{color:#1F6B45}
.form__status.is-error{color:#B3261E}

/* 404 */
.notfound{padding:5rem 0 6rem}
.notfound .lead{max-width:30ch}
.notfound__links{display:flex;flex-wrap:wrap;gap:.8rem}
@media(max-width:900px){.notfound{padding:var(--m,4rem) 0}}

/* cancellation: three steps on a line from booking to check-in, each with the share you get back */
.refund{padding:5rem 0 6rem}
.refund .lead{max-width:34ch;margin-bottom:3.5rem}
.refund__steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-top:2.4rem}
.refund__steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:linear-gradient(90deg,var(--blue),rgba(65,113,181,.15))}
.refund__steps li{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:24px;padding:2rem 1.8rem 1.9rem;box-shadow:0 24px 50px -34px rgba(14,36,71,.4)}
.refund__steps li::before{content:"";position:absolute;left:1.8rem;top:calc(-2.4rem - 6.5px);width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:var(--sand);border:2px solid var(--blue)}
.refund__steps li:first-child::before{background:var(--blue)}
.refund__when{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue-text);margin-bottom:1.3rem}
.refund__pct{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,6vw,4.6rem);line-height:1;color:var(--navy)}
.refund__steps h2{font-size:1.5rem;color:var(--navy);margin:.7rem 0 .35rem}
.refund__steps li>p:not(.refund__when){font-size:.98rem;color:#4a5872;margin-bottom:1.6rem}
.refund__bar{display:block;flex:none;height:6px;margin-top:auto;border-radius:99px;background:rgba(65,113,181,.14);overflow:hidden}
.refund__bar::after{content:"";display:block;height:100%;width:calc(var(--p) * 1%);border-radius:inherit;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) calc(var(--d,0s) + .35s)}
.refund__steps li.in .refund__bar::after{transform:none}
.refund__more{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:4.5rem;padding-top:3rem;border-top:1px solid rgba(14,36,71,.1)}
.refund__more h2{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--navy);margin-bottom:.7rem}
.refund__more p{color:#34425c}
.refund>.legal__date{margin-top:3rem}
@media(prefers-reduced-motion:reduce){.refund__bar::after{transform:none}}

@media(max-width:900px){
  .legal{grid-template-columns:1fr;gap:2.4rem;padding:var(--m,4rem) 0}
  .legal__toc{position:static;background:#fff;border-radius:20px;padding:1.3rem 1.4rem 1.2rem;box-shadow:0 18px 40px -28px rgba(14,36,71,.35)}
  .legal__toc .legal__date{margin-top:1rem}
  .glance{grid-template-columns:1fr;gap:.8rem}
  .legal__sec{margin-top:2rem;padding-top:2rem;scroll-margin-top:84px}
  .refund{padding:var(--m,4rem) 0}
  .refund .lead{margin-bottom:2.4rem}
  .refund__steps{grid-template-columns:1fr;gap:1rem;padding:0 0 0 1.8rem}
  .refund__steps::before{left:0;right:auto;top:0;bottom:0;width:1.5px;height:auto;background:linear-gradient(180deg,var(--blue),rgba(65,113,181,.15))}
  .refund__steps li{padding:1.6rem 1.5rem 1.5rem}
  .refund__steps li::before{left:calc(-1.8rem - 6.25px);top:1.9rem}
  .refund__more{grid-template-columns:1fr;gap:2rem;margin-top:3rem;padding-top:2.4rem}
}
@media(max-width:600px){
  .svc thead{display:none}
  .svc tr{display:block;padding:.9rem 0;border-top:1px solid rgba(14,36,71,.1)}
  .svc td{display:block;width:auto!important;padding:.1rem 0;border:0}
  .svc td:first-child{margin-bottom:.35rem}
  .svc td[data-l]::before{content:attr(data-l) ": ";font-weight:700;color:var(--navy)}
}

/* ---------- Greek pages (el/) ----------
   Fraunces and Nunito have no Greek letters, so Literata (titles) and Commissioner (text) take their place.
   Both are loaded in the head of the Greek pages only */
:root:lang(el){--serif:"Literata",Georgia,serif;--sans:"Commissioner",system-ui,sans-serif}
/* Commissioner sits .075em lower in its line than Nunito, which shows in the pill buttons and labels: an empty block
   above the text pulls it up by that much and an equal one below keeps the pill's height (measured centred on capitals) */
:root:lang(el) :is(.btn, .jump a, .tags li, .dist, .skip, .map__label)::before{content:"";display:block;margin-top:-.075em}
:root:lang(el) :is(.btn, .jump a, .tags li, .dist, .skip, .map__label)::after{content:"";display:block;height:.075em}
:root:lang(el) .totop span{position:relative;top:-.075em}

/* the soft shadow under the home logo: a still gradient behind it (a drop-shadow filter on the moving SVG made Safari repaint it every frame) */
.hero--logo .mark-wrap::before{content:"";position:absolute;z-index:0;left:6%;right:6%;top:46%;height:62%;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,.12) 55%,transparent);pointer-events:none}

/* reveals on elements with hover transitions of their own (those replaced the reveal's fade, so they popped in):
   they rise with an animation instead, which leaves their hover transitions alone */
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.link-arrow.reveal.in,.amen__grid li.reveal.in,.agroup.reveal.in,.sunbtn.reveal.in{animation:rise 1.1s var(--ease) var(--d,0s) backwards}

/* the "ΕΛ" switch on the English pages: Nunito has no Greek, so it is drawn in Commissioner (the Greek pages' font,
   loaded for just these two letters) and lifted like the Greek pills, which centres it */
.nav .lang:lang(el){font-family:"Commissioner",var(--sans)}

@media(max-width:700px){
  /* smaller buttons on phones */
  .btn{padding:.72rem 1.35rem;font-size:.88rem;line-height:1.35}
  .btn--outline,.unit__cta .btn--outline{padding:calc(.72rem - 1.5px) calc(1.35rem - 1.5px)}
  /* the destination cards on phones: both rows at the same speed, a new card about every 5 s */
  .mrow{--T:34s}
  /* accommodation: the four apartment buttons two by two */
  .jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px;margin-inline:auto}
  .jump a{text-align:center;padding-inline:.6rem}
  /* accommodation: "Book now" on its own, the full width ("All photos" is the "+N" tile above) */
  .unit__cta [data-all]{display:none}
  .unit__cta .btn{flex:1 1 auto;text-align:center;line-height:1.35;font-size:.85rem}
}