/* =========================================================================
   OSTROV MALDIVES — Design Concept Mockup
   "Quiet Luxury, Ukulhas"  —  editorial boutique-resort design system
   Display: Fraunces  ·  Body/UI: Jost
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* palette — ocean green + warm gold accent + ivory (owner-preferred) */
  --ivory:#F6F1E7;
  --sand:#ECE1CE;
  --sand-deep:#E2D3B8;
  --shell:#FBF8F2;
  --ink:#17282A;            /* deep teal-charcoal (text) */
  --ink-soft:#4C5D5B;
  --ink-faint:#727A74;
  --black:#0A383C;          /* dark sections = deep ocean green */
  --black-2:#0C4347;
  --teal:#0E4F54;           /* primary ocean green */
  --teal-deep:#0A383C;
  --teal-700:#0C4347;
  --lagoon:#5AA6A2;
  --lagoon-soft:#A9D2CC;
  --brass:#B08A4F;          /* warm gold accent */
  --brass-bright:#C8A668;
  --brass-soft:#E4D2AC;
  --gold:#B08A4F;
  --white:#ffffff;
  --line:rgba(23,40,42,.14);
  --line-soft:rgba(23,40,42,.08);
  --shadow-sm:0 2px 10px rgba(20,40,40,.06);
  --shadow:0 18px 50px -22px rgba(13,45,48,.45);
  --shadow-lg:0 40px 90px -40px rgba(10,40,42,.6);

  /* type */
  --display:"Fraunces",Georgia,serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,sans-serif;

  /* layout */
  --container:1280px;
  --gutter:clamp(20px,5vw,72px);
  --radius:4px;
  --radius-lg:10px;
  --radius-xl:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.7;
  font-weight:300;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--brass);color:#fff}

/* subtle paper grain over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em;font-optical-sizing:auto}
.display{font-size:clamp(2.9rem,7.2vw,6.4rem)}
h2,.h2{font-size:clamp(2.05rem,4.6vw,3.7rem)}
h3,.h3{font-size:clamp(1.4rem,2.4vw,2rem)}
p{max-width:62ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.65;color:var(--ink-soft)}
em{font-style:italic;color:var(--brass)}

.eyebrow{
  font-family:var(--body);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.32em;color:var(--brass);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.8}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--brass);opacity:.8}
.eyebrow.center{justify-content:center}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,11vw,150px);position:relative;z-index:2}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.center{text-align:center}
.measure{max-width:640px}
.measure.center{margin-inline:auto}
.stack>*+*{margin-top:1.1rem}
.grid{display:grid;gap:clamp(18px,2.4vw,34px)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;padding:1.05em 1.9em;border-radius:var(--radius);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  position:relative;overflow:hidden;transition:color .5s var(--ease),background .5s var(--ease),transform .4s var(--ease),box-shadow .5s var(--ease);
  isolation:isolate;
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(20,40,40,.5);border-color:var(--brass)}
.btn:hover::after{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(23,40,42,.4)}
.btn--ghost:hover{--fg:#fff}
.btn--light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--light:hover{--fg:var(--ink)}
.btn--light::after{background:#fff}
.btn--solid-light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--brass{--bg:var(--brass);--fg:#fff;--bd:var(--brass)}
.btn--brass::after{background:var(--teal)}
.btn--sm{padding:.8em 1.4em;font-size:.72rem}

.txtlink{display:inline-flex;align-items:center;gap:.6em;font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.txtlink span{display:inline-block;height:1px;width:34px;background:currentColor;transition:width .4s var(--ease);opacity:.6}
.txtlink:hover span{width:54px;opacity:1}
.txtlink--brass{color:var(--brass)}

/* ============================ HEADER ============================ */
.header{position:fixed;top:0;left:0;right:0;z-index:60;transition:transform .5s var(--ease)}
.header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(14px,2vw,26px) var(--gutter);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.scrolled .header__bar{background:rgba(246,241,231,.92);backdrop-filter:blur(14px);padding-block:12px;box-shadow:0 1px 0 var(--line-soft);border-color:var(--line-soft)}
.header.hide{transform:translateY(-100%)}

.brand{display:flex;align-items:center;gap:.7rem;z-index:2;color:#fff;transition:color .5s var(--ease)}
.header.scrolled .brand,.header.light-theme .brand{color:var(--ink)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--display);font-size:1.45rem;line-height:1;letter-spacing:.02em}
.brand__sub{font-family:var(--body);font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;opacity:.8;margin-top:3px}

.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400;color:#fff;padding:.5em 0;transition:color .4s var(--ease);
}
.header.scrolled .nav__link,.header.light-theme .nav__link{color:var(--ink)}
.nav__link.is-active{color:var(--brass-bright)}
.header.scrolled .nav__link.is-active,.header.light-theme .nav__link.is-active{color:var(--brass)}
.nav__link:hover{color:var(--brass-bright)}
.header.scrolled .nav__link:hover,.header.light-theme .nav__link:hover{color:var(--brass)}
.nav__link .chev{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease);opacity:.7}
.nav__item:hover .chev{transform:rotate(45deg) translateY(1px)}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  background:var(--shell);min-width:230px;padding:14px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);border:1px solid var(--line-soft);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.nav__item:hover .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dropdown a{display:block;padding:.7em .9em;font-size:.85rem;letter-spacing:.04em;color:var(--ink-soft);border-radius:var(--radius);transition:background .3s,color .3s}
.dropdown a:hover{background:var(--ivory);color:var(--ink);padding-left:1.2em}

.header__actions{display:flex;align-items:center;gap:14px;z-index:2}

/* language switcher */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:color .4s}
.header.scrolled .lang__btn,.header.light-theme .lang__btn{color:var(--ink)}
.lang__btn svg{width:15px;height:15px;opacity:.85}
.lang__menu{position:absolute;top:calc(100% + 14px);right:0;background:var(--shell);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--line-soft);padding:8px;min-width:150px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s var(--ease)}
.lang.open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu button{display:flex;width:100%;justify-content:space-between;gap:1em;padding:.6em .8em;font-size:.82rem;letter-spacing:.05em;color:var(--ink-soft);border-radius:var(--radius);transition:background .3s,color .3s}
.lang__menu button:hover{background:var(--ivory);color:var(--ink)}
.lang__menu button.active{color:var(--brass)}
.lang__menu button.active::after{content:"✓"}
.lang__menu .soon{font-size:.6rem;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase}

.burger{display:none;width:30px;height:18px;position:relative;z-index:80}
.burger span{position:absolute;left:0;height:1.6px;width:100%;background:#fff;transition:.4s var(--ease)}
.header.scrolled .burger span,.header.light-theme .burger span{background:var(--ink)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:8px}.burger span:nth-child(3){top:16px}
body.menu-open .burger span{background:var(--ink)}
body.menu-open .burger span:nth-child(1){top:8px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:8px;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:var(--ivory);padding:110px var(--gutter) 40px;transform:translateX(100%);transition:transform .55s var(--ease);overflow-y:auto;display:flex;flex-direction:column}
body.menu-open .drawer{transform:translateX(0)}
.drawer__nav a{display:block;font-family:var(--display);font-size:clamp(1.8rem,7vw,2.6rem);padding:.28em 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.drawer__nav a small{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:block}
.drawer__foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:14px}
.drawer__foot a{font-size:.95rem;letter-spacing:.04em}

/* ============================ HERO (clean / centered) ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;text-align:center}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* persistent cinematic gradients: legibility for nav (top) + booking bar (bottom) */
.hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,30,32,.42) 0%,rgba(8,30,32,0) 26%,rgba(8,30,32,0) 60%,rgba(8,30,32,.78) 100%)}
/* animatable spotlight radius (smooth open/close on enter/leave) */
@property --r{syntax:"<length>";inherits:true;initial-value:0px}
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --y{syntax:"<percentage>";inherits:true;initial-value:54%}
.hero{--r:0px;--x:50%;--y:54%;transition:--r .8s var(--ease-out)}
/* the image is already a night scene — keep a LIGHT mood dim so it stays vivid.
   The cursor cuts a soft hole in this layer → the room brightens where you move. */
.hero__dim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,26,30,.3),rgba(5,20,24,.36));
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 26%,#000 74%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 26%,#000 74%);
  transition:opacity .8s var(--ease)}
/* warm lamp glow that brightens near the cursor (screen blend) */
.hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--r) * .8) at var(--x) var(--y),rgba(255,206,140,.2) 0%,rgba(255,202,140,.05) 46%,transparent 70%);
  transition:opacity .8s var(--ease)}
/* touch / no-hover: show the room as-is */
@media (hover:none){.hero__dim,.hero__glow{display:none}.hero__media::after{background:linear-gradient(180deg,rgba(8,30,32,.4) 0%,rgba(8,30,32,.06) 30%,rgba(8,30,32,.24) 60%,rgba(8,30,32,.85) 100%)}}
.hero__inner{position:relative;z-index:2;width:100%;max-width:880px;margin-inline:auto;padding:80px var(--gutter) 0;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{color:var(--brass-soft);justify-content:center}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:30px;height:1px;background:var(--brass-soft);opacity:.85}
.hero h1{margin:.55em 0 .4em;font-size:clamp(3rem,7.6vw,6.6rem);font-weight:400;line-height:1.02;text-shadow:0 4px 50px rgba(0,0,0,.35)}
.hero h1 .it{font-style:italic;color:var(--brass-soft)}
.hero__rule{width:54px;height:1px;background:var(--brass-soft);opacity:.7;margin:.2rem auto 1.4rem}
.hero__sub{max-width:50ch;font-size:clamp(1.02rem,1.35vw,1.22rem);color:rgba(255,255,255,.9);font-weight:300;margin-inline:auto}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;margin-top:2.4rem}
.hero__cta .txtlink{color:#fff;opacity:.92}
.hero__cta .txtlink:hover{color:var(--brass-soft)}
.hero__scroll{position:absolute;bottom:128px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero__scroll .line{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.6),transparent);position:relative;overflow:hidden}
.hero__scroll .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:scrolldot 2.4s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}60%,100%{top:100%}}

/* slim booking bar — flush to hero bottom, full width, airy */
.hbook{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(17,16,14,.42);backdrop-filter:blur(12px);border-top:1px solid rgba(232,212,164,.28)}
.hbook__row{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:0;padding:6px var(--gutter)}
.hbook .field{display:flex;flex-direction:column;gap:3px;padding:16px 24px;border-right:1px solid rgba(255,255,255,.14);border-bottom:none}
.hbook .field:first-child{padding-left:0}
.hbook .field label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft);font-weight:500}
.hbook .field input,.hbook .field select{border:none;background:transparent;font-family:var(--body);font-size:.98rem;color:#fff;font-weight:300;width:100%;padding:1px 0}
.hbook .field select option{color:var(--ink)}
.hbook .field input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6}
.hbook .field input:focus,.hbook .field select:focus{outline:none}
.hbook .btn{margin-left:24px;white-space:nowrap}

/* header logo images */
.brand__img{height:42px;width:auto;flex:none;transition:opacity .4s var(--ease)}
.brand__img--dark{display:none}
.header.scrolled .brand__img--light,.header.light-theme .brand__img--light{display:none}
.header.scrolled .brand__img--dark,.header.light-theme .brand__img--dark{display:block}

/* ============================ SECTION INTRO ============================ */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:center}
.intro__figure{position:relative}
.intro__figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.intro__figure .badge{position:absolute;background:var(--shell);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:14px}
.intro__figure .badge img{width:54px;height:auto;box-shadow:none;border-radius:0}
.intro__figure .badge b{font-family:var(--display);font-size:1.5rem;display:block;line-height:1}
.intro__figure .badge span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.badge--tr{bottom:-26px;right:-22px}

.kpis{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap;margin-top:.5rem}
.kpi b{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);display:block;line-height:1;color:var(--teal)}
.kpi span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* section head */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,5vw,64px)}
.shead.center{flex-direction:column;align-items:center;text-align:center}
.shead__title{max-width:18ch}
.shead p{color:var(--ink-soft);margin-top:1rem;max-width:48ch}
.snum{font-family:var(--display);font-size:.95rem;color:var(--brass);letter-spacing:.1em}

/* ============================ PROPERTY CARDS ============================ */
.props{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.pcard{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(420px,52vw,580px);display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,32,.05) 30%,rgba(8,30,32,.85) 100%)}
.pcard:hover img{transform:scale(1.07)}
.pcard__body{position:relative;z-index:2;padding:clamp(26px,3vw,42px);width:100%}
.pcard__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tag{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:.5em .9em;border:1px solid rgba(255,255,255,.4);border-radius:100px;backdrop-filter:blur(4px)}
.pcard h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.pcard p{color:rgba(255,255,255,.85);font-size:.95rem;margin:.5rem 0 1.4rem;max-width:40ch}

/* ============================ ROOM CARDS ============================ */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.rcard{background:var(--shell);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.rcard__img{position:relative;overflow:hidden;aspect-ratio:4/3}
.rcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.rcard:hover .rcard__img img{transform:scale(1.08)}
.rcard__price{position:absolute;top:14px;right:14px;background:rgba(251,248,242,.92);backdrop-filter:blur(4px);padding:.5em .9em;border-radius:100px;font-size:.72rem;letter-spacing:.06em}
.rcard__price b{font-family:var(--display);font-size:1rem}
.rcard__body{padding:clamp(20px,2vw,28px)}
.rcard__meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--ink-soft);font-size:.76rem;letter-spacing:.06em;margin:.5rem 0 1rem}
.rcard__meta span{display:inline-flex;align-items:center;gap:.45em}
.rcard__meta svg{width:15px;height:15px;color:var(--brass)}
.rcard h3{font-size:1.4rem}
.rcard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}

/* ============================ EXPERIENCES (TOURS) ============================ */
.exp{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:clamp(14px,1.6vw,22px)}
.ecard{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.ecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ecard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,32,0) 35%,rgba(8,30,32,.82) 100%);transition:background .5s}
.ecard:hover img{transform:scale(1.08)}
.ecard:hover::after{background:linear-gradient(180deg,rgba(10,79,84,.2) 0%,rgba(8,30,32,.86) 100%)}
.ecard__body{position:relative;z-index:2;padding:24px}
.ecard h3{font-size:1.35rem}
.ecard p{font-size:.84rem;color:rgba(255,255,255,.82);margin-top:.3rem;max-width:30ch;opacity:0;max-height:0;transition:opacity .5s,max-height .5s}
.ecard:hover p{opacity:1;max-height:80px}
.ecard .meta{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:.5rem}
.ecard--lg{grid-column:span 2;grid-row:span 2}
.ecard--tall{grid-row:span 2}
.ecard--wide{grid-column:span 2}

/* ============================ SPLIT / EDITORIAL ============================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,86px);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media .stamp{position:absolute;top:-22px;left:-22px;width:118px;height:118px;background:var(--teal);color:#fff;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;box-shadow:var(--shadow);padding:10px}
.featlist{display:grid;gap:14px;margin-top:1.4rem}
.featlist li{display:flex;gap:14px;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
.featlist svg{width:20px;height:20px;color:var(--brass);flex:none;margin-top:3px}

/* ribbon / brand strip (cafe + boutique teasers) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.brandcard{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:40px}
.brandcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.brandcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,30,32,.7),rgba(8,30,32,.4))}
.brandcard:hover img{transform:scale(1.06)}
.brandcard__body{position:relative;z-index:2;max-width:34ch}
.brandcard h3{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.brandcard p{color:rgba(255,255,255,.85);font-size:.92rem;margin:.6rem auto 1.4rem}

/* ============================ OFFERS ============================ */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.ocard{background:var(--shell);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ocard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.ocard__img{aspect-ratio:16/10;overflow:hidden}
.ocard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ocard:hover .ocard__img img{transform:scale(1.07)}
.ocard__body{padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;flex:1}
.ocard h3{font-size:1.45rem;margin-bottom:.4rem}
.ocard ul{margin:1rem 0;display:grid;gap:.5rem}
.ocard li{font-size:.86rem;color:var(--ink-soft);display:flex;gap:.6em;align-items:center}
.ocard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.ocard .txtlink{margin-top:auto}

/* ============================ TRUST ============================ */
.trust{background:var(--teal-deep);color:#fff;border-radius:var(--radius-xl);padding:clamp(40px,6vw,80px);position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(90,166,162,.28),transparent 70%);top:-160px;right:-120px}
.trust__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(34px,5vw,70px);align-items:center}
.trust .eyebrow{color:var(--brass-soft)}.trust .eyebrow::before{background:var(--brass-soft)}
.trust blockquote{font-family:var(--display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.4;margin:1rem 0}
.trust cite{font-style:normal;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon-soft)}
.stars{color:var(--brass-bright);letter-spacing:.2em;font-size:1.1rem}
.trust__stats{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(24px,4vw,50px)}
.trust__stats .kpi b{color:#fff}.trust__stats .kpi span{color:var(--lagoon-soft)}
.awardbadge{display:flex;align-items:center;gap:16px;margin-top:10px}
.awardbadge img{width:74px;filter:brightness(0) invert(1);opacity:.92}
.awardbadge div b{font-family:var(--display);font-size:1.1rem;display:block}
.awardbadge div span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon-soft)}

/* ============================ CTA BANNER ============================ */
.cta{position:relative;border-radius:var(--radius-xl);overflow:hidden;color:#fff;text-align:center;padding:clamp(60px,9vw,130px) var(--gutter)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,56,60,.7),rgba(8,30,32,.78))}
.cta__body{position:relative;z-index:2;max-width:680px;margin-inline:auto}
.cta h2{margin-bottom:1rem}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ============================ FOOTER ============================ */
.footer{background:var(--teal-deep);color:rgba(255,255,255,.82);position:relative;z-index:2;padding-top:clamp(60px,8vw,100px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,60px);padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer .brand{color:#fff;margin-bottom:1.2rem}
.footer h4{font-family:var(--body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:1.4rem;font-weight:500}
.footer a{color:rgba(255,255,255,.78);font-size:.92rem;transition:color .3s,padding-left .3s}
.footer li+li{margin-top:.7rem}
.footer__links a:hover{color:#fff;padding-left:4px}
.footer__contact p{font-size:.92rem;margin-bottom:.7rem;color:rgba(255,255,255,.82)}
.footer__contact b{color:#fff;font-weight:400}
.footer__contact .num{font-family:var(--display);font-size:1.15rem;color:#fff}
.socials{display:flex;gap:12px;margin-top:1.2rem}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-content:center;transition:.4s var(--ease)}
.socials a:hover{background:var(--brass);border-color:var(--brass);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.newsletter{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:100px;overflow:hidden;margin-top:1rem;max-width:320px}
.newsletter input{flex:1;background:transparent;border:none;padding:.9em 1.2em;color:#fff;font-family:var(--body);font-size:.86rem}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter input:focus{outline:none}
.newsletter button{padding:0 1.3em;background:var(--brass);color:#fff;font-size:1.1rem}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:26px 0;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.footer__bottom a:hover{color:#fff}

/* ============================ STICKY WHATSAPP + MOBILE BAR ============================ */
.wa{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;align-items:center;gap:0;background:#1FA855;color:#fff;border-radius:100px;padding:14px;box-shadow:0 16px 34px -10px rgba(31,168,85,.6);transition:.45s var(--ease);overflow:hidden}
.wa svg{width:26px;height:26px;flex:none}
.wa__label{max-width:0;overflow:hidden;white-space:nowrap;font-size:.82rem;letter-spacing:.04em;transition:max-width .45s var(--ease),margin .45s var(--ease)}
.wa:hover{transform:translateY(-2px)}
.wa:hover .wa__label{max-width:200px;margin-left:10px;margin-right:6px}
.wa::after{content:"";position:absolute;inset:0;border-radius:100px;border:2px solid #1FA855;animation:waPulse 2.6s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:54;display:none;grid-template-columns:1fr 1fr 1fr;background:var(--shell);border-top:1px solid var(--line);box-shadow:0 -8px 30px -16px rgba(0,0,0,.3)}
.mobilebar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mobilebar a+a{border-left:1px solid var(--line-soft)}
.mobilebar svg{width:20px;height:20px;color:var(--teal)}
.mobilebar a.prime{background:var(--teal);color:#fff}
.mobilebar a.prime svg{color:#fff}

/* ============================ PAGE HERO (inner pages) ============================ */
.phero{position:relative;min-height:64vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,40,42,.45),rgba(8,30,32,.78))}
.phero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin-inline:auto;padding:0 var(--gutter) clamp(50px,8vh,90px)}
.phero h1{font-size:clamp(2.6rem,6vw,5rem);margin:.3em 0 .3em;max-width:18ch}
.phero p{max-width:50ch;color:rgba(255,255,255,.9)}
.crumbs{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;gap:.7em;align-items:center}
.crumbs a:hover{color:#fff}.crumbs span{color:var(--brass-soft)}

/* compare table */
.compare{width:100%;border-collapse:collapse;background:var(--shell);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line-soft)}
.compare th,.compare td{padding:clamp(14px,1.6vw,22px);text-align:left;border-bottom:1px solid var(--line-soft);font-size:.92rem;vertical-align:top}
.compare thead th{background:var(--teal-deep);color:#fff;font-family:var(--display);font-weight:400;font-size:1.2rem}
.compare thead th:first-child{font-family:var(--body);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft);font-weight:500}
.compare td:first-child{font-weight:500;color:var(--ink);letter-spacing:.04em;width:22%}
.compare tbody tr:hover{background:var(--ivory)}
.compare .feat{color:var(--ink-soft)}

/* amenity grid */
.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.amen li{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--ink-soft);padding:16px 18px;background:var(--shell);border:1px solid var(--line-soft);border-radius:var(--radius-lg)}
.amen svg{width:20px;height:20px;color:var(--brass);flex:none}

/* accordion (FAQ) */
.acc{max-width:820px;margin-inline:auto}
.acc__item{border-bottom:1px solid var(--line);}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:1.3em 0;text-align:left;font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--ink)}
.acc__q .ic{width:22px;height:22px;flex:none;position:relative}
.acc__q .ic::before,.acc__q .ic::after{content:"";position:absolute;background:var(--brass);transition:transform .4s var(--ease)}
.acc__q .ic::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.acc__q .ic::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.acc__item.open .ic::after{transform:translateX(-50%) scaleY(0)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc__a p{padding:0 0 1.4em;color:var(--ink-soft);max-width:70ch}

/* contact specifics */
.contactgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,70px);align-items:start}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2rem}
.ccard{background:var(--shell);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:24px;transition:transform .4s var(--ease),box-shadow .4s}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.ccard .ic{width:44px;height:44px;border-radius:50%;background:var(--ivory);display:grid;place-content:center;margin-bottom:14px;color:var(--teal)}
.ccard .ic svg{width:20px;height:20px}
.ccard h4{font-family:var(--body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem;font-weight:500}
.ccard a,.ccard p{font-family:var(--display);font-size:1.15rem;color:var(--ink);line-height:1.35}
.ccard small{display:block;font-family:var(--body);font-size:.78rem;color:var(--ink-faint);margin-top:.3rem;letter-spacing:.02em}
.formcard{background:var(--shell);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:clamp(26px,3vw,44px);box-shadow:var(--shadow-sm)}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ffield{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.ffield label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:500}
.ffield input,.ffield select,.ffield textarea{font-family:var(--body);font-size:.96rem;padding:.85em 1em;border:1px solid var(--line);border-radius:var(--radius);background:var(--ivory);color:var(--ink);transition:border .3s,box-shadow .3s}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,138,79,.12)}
.ffield textarea{resize:vertical;min-height:120px}
.mapwrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);aspect-ratio:21/9}
.mapwrap iframe{width:100%;height:100%;border:0;filter:grayscale(.25) saturate(.9)}

/* tours quick facts */
.qfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden}
.qfacts div{background:var(--shell);padding:22px}
.qfacts b{font-family:var(--display);font-size:1.3rem;display:block;color:var(--teal)}
.qfacts span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

.cat-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(30px,4vw,50px)}
.pill{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:.7em 1.3em;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);transition:.4s var(--ease);cursor:pointer}
.pill:hover,.pill.active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ============================ REVEAL ANIMATIONS ============================ */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}.reveal[data-d="4"]{transition-delay:.4s}
.reveal[data-d="5"]{transition-delay:.5s}.reveal[data-d="6"]{transition-delay:.6s}
.js .hero .reveal{transform:translateY(40px)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .exp{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .ecard--lg{grid-column:span 2;grid-row:span 1}
  .rooms,.offers{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:1fr;gap:40px}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav,.header__actions .lang,.header__actions .btn{display:none}
  .burger{display:block}
  .header__actions{gap:0}
  /* booking bar: become a relative stacked panel on small screens */
  .hbook{position:relative;backdrop-filter:none;background:var(--black)}
  .hbook__row{grid-template-columns:1fr 1fr;padding:14px var(--gutter) 18px}
  .hbook .field{padding:12px 14px;border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .hbook .field:first-child{padding-left:14px}
  .hbook .btn{grid-column:span 2;margin-left:0;margin-top:12px}
  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  .hero__inner{padding-block:140px 70px}
  .hero__scroll{display:none}
  .intro,.split,.split--rev,.contactgrid{grid-template-columns:1fr;gap:34px}
  .split--rev .split__media{order:0}
  .props,.duo{grid-template-columns:1fr}
  .mobilebar{display:grid}
  .wa{bottom:74px}
  body{padding-bottom:0}
  .footer{padding-bottom:60px}
}
@media (max-width:560px){
  .rooms,.offers,.formrow,.ccards{grid-template-columns:1fr}
  .exp{grid-template-columns:1fr;grid-auto-rows:240px}
  .ecard--lg,.ecard--wide{grid-column:span 1}
  .shead{flex-direction:column;align-items:flex-start}
  .intro__figure .badge--tr{right:0;bottom:-20px}
  .hbook__row{grid-template-columns:1fr}
  .hbook .field{border-right:none}
  .hbook .btn{grid-column:span 1}
}

/* ============================ GALLERY ============================ */
.gallery{columns:3 300px;column-gap:16px}
.gitem{display:block;width:100%;margin:0 0 16px;break-inside:avoid;border-radius:var(--radius-lg);overflow:hidden;position:relative;cursor:zoom-in;background:var(--sand)}
.gitem img{width:100%;display:block;transition:transform .8s var(--ease)}
.gitem:hover img{transform:scale(1.05)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,30,32,0) 60%,rgba(8,30,32,.4));opacity:0;transition:opacity .4s var(--ease)}
.gitem:hover::after{opacity:1}
@media (max-width:880px){.gallery{columns:2 180px;column-gap:12px}.gitem{margin-bottom:12px}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(6,20,22,.95);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:94vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox img{max-width:94vw;max-height:82vh;border-radius:6px;box-shadow:var(--shadow-lg);object-fit:contain}
.lightbox figcaption{color:rgba(255,255,255,.7);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;width:50px;height:50px;border-radius:50%;display:grid;place-content:center;transition:.3s var(--ease)}
.lb-btn:hover{background:var(--brass);border-color:var(--brass)}
.lb-btn svg{width:20px;height:20px}
.lb-close{top:22px;right:24px}
.lb-prev{left:clamp(8px,3vw,40px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,3vw,40px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}.lb-btn{width:42px;height:42px}}

/* ============================ A11Y / PERF ============================ */
picture{display:contents}
.skip{position:fixed;top:-120px;left:14px;z-index:100;background:var(--ink);color:#fff;padding:.85em 1.3em;border-radius:var(--radius);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;transition:top .3s var(--ease)}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
a:focus-visible,button:focus-visible,.gitem:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.header .nav__link:focus-visible,.hero a:focus-visible,.phero a:focus-visible{outline-color:var(--brass-soft)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px}