/* ============================================================
   VILLA LONGEVITY — the family's 4th page, and its first in English.
   Arrangement: cream/sand lead (airier than retreat), deep-teal slabs
   (the villa's own stone-and-water palette earns --dark over --palm),
   gold reserved for luxury moments. Motif: the arrival line — a dotted
   route, coordinates and an entry stamp. Travel as an editorial device,
   never a theme park.
   ============================================================ */

:root{
  --bg: var(--paper);
  --fg: var(--ink);
  --slab-bg: var(--dark);
  --slab-fg: var(--mist);
  --accent: var(--violet);
  --accent-2: var(--sage);
}

/* LTR page on an RTL-born framework: the only hardcoded direction in
   family.css is the marquee's rtl set; everything else is logical. */
.mq-set{ direction:ltr; }

/* LevitMono's "1" glyph reads as a flipped tick and "01" as damage — the same
   legibility call that moved journey's captions to Assistant. The mono ROLE
   (spaced small caps) stays; the face becomes Assistant on this page. */
.mono, .sec-idx{ font-family:var(--sans); font-weight:700; letter-spacing:.1em; }
/* Maya (31.8): older, partly visually impaired audience — the small functional
   lines carry the information, so they read at body scale, not caption scale. */
.sec-idx{ font-size:clamp(1rem,1.35vw,1.2rem); letter-spacing:.08em; }
.intro__kick{ font-size:clamp(.98rem,1.3vw,1.15rem) !important; letter-spacing:.1em !important; }
.sec-note{ font-size:clamp(1.1rem,1.6vw,1.3rem); }
.exp__card--img figcaption{ font-size:clamp(1.02rem,1.3vw,1.15rem); }
.stay__cap{ font-size:clamp(.95rem,1.2vw,1.08rem); }
.vlead__field span{ font-size:clamp(.95rem,1.2vw,1.08rem); }
.vfact__s, .stay__s{ font-size:clamp(.98rem,1.25vw,1.1rem); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:var(--dark); }
.hero__bg{ position:absolute; inset:0; z-index:1; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
/* the living hero: video fades in over the still once it can actually play,
   so slow connections and reduced-motion users simply keep the photograph */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%;
  opacity:0; transition:opacity 1.2s ease; }
.hero__video.on{ opacity:1; }
/* copy sits left (LTR): wash anchors left + base, keeps the sky and pool open */
.hero__wash{ position:absolute; inset:0; z-index:2; pointer-events:none; background:
  linear-gradient(90deg, rgba(18,28,32,.88) 0%, rgba(18,28,32,.62) 34%, rgba(18,28,32,.18) 62%, rgba(18,28,32,0) 100%),
  linear-gradient(0deg, rgba(18,28,32,.82) 0%, rgba(18,28,32,.24) 30%, transparent 55%),
  linear-gradient(180deg, rgba(18,28,32,.5) 0%, transparent 24%); }
.hero__route{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; opacity:.85; }
.hero__stage{ position:relative; z-index:4; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding-block:clamp(120px,18vh,200px) clamp(150px,21vh,230px); }
.hero__kick{ font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); letter-spacing:.14em; color:var(--gold2); margin-bottom:clamp(1rem,2vw,1.6rem); opacity:0; transform:translateY(18px); }
.hero__kick .sep{ color:var(--mint); margin-inline:.5em; }
.hero__kick .mono{ letter-spacing:.06em; }
.hero__title{ font-family:var(--display); font-weight:900; font-size:clamp(3rem,8.6vw,7.4rem); line-height:.95; letter-spacing:.01em; color:#FAF7EE; }
.hero__tag{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2.1vw,1.8rem); letter-spacing:0; color:var(--gold2); margin-top:clamp(.9rem,1.6vw,1.3rem); opacity:0; transform:translateY(18px); }
.hero__sub{ margin-top:clamp(1.2rem,2.2vw,1.8rem); max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.25rem); line-height:1.65; color:var(--mist2); opacity:0; transform:translateY(18px); }
.hero__cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:clamp(1.6rem,3vw,2.4rem); opacity:0; transform:translateY(18px); }
.hero__ctanote{ font-size:.95rem; color:var(--mist2); }
.hero__foot{ position:absolute; z-index:4; inset-block-end:clamp(26px,4vh,44px); inset-inline:0; display:flex; align-items:center; justify-content:center;
  gap:clamp(.9rem,2.2vw,1.8rem); flex-wrap:wrap; padding-inline:var(--pad); color:rgba(241,236,224,.88);
  font-weight:600; font-size:clamp(.92rem,1.2vw,1.08rem); }
.hero__foot b{ font-weight:700; color:var(--gold2); }
.hf-sub{ color:rgba(241,236,224,.55); font-weight:500; font-size:.9em; }
.hdot{ width:5px; height:5px; border-radius:50%; background:var(--mint); flex:none; }
@media (max-width:720px){
  .hero__bg img{ object-position:52% center; }
  .hero__wash{ background:
    linear-gradient(0deg, rgba(18,28,32,.96) 0%, rgba(18,28,32,.8) 44%, rgba(18,28,32,.62) 100%); }
  .hero__route{ opacity:.35; }
  .hero__foot{ gap:.7rem 1.1rem; font-size:.85rem; }
}
/* no WhatsApp fab on this page, so the a11y button takes the base slot instead
   of hovering a row above it into card titles */
.a11y{ bottom:clamp(16px,3vh,28px); }

/* ---------- opener ---------- */
.opener{ padding-block-end:0; }
.opener .intro{ padding-block-end:clamp(1.6rem,3vw,2.6rem); }
.opener__img{ margin-top:clamp(1rem,2vw,2rem); }
.opener__img img{ width:100%; height:clamp(300px,44vw,560px); object-fit:cover; }

/* ---------- 01 · experience grid ---------- */
.exp{ padding-block-start:0; }
.exp__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.4vw,1.2rem); }
.exp__card{ position:relative; border-radius:var(--r); overflow:hidden; min-height:clamp(200px,24vw,320px); }
.exp__card--wide{ grid-column:span 2; }
.exp__card--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.exp__card--img figcaption{ position:absolute; inset-inline:0; inset-block-end:0; z-index:2; padding:1rem 1.2rem;
  color:var(--mist); font-weight:600; font-size:.98rem; display:flex; gap:.7em; align-items:baseline;
  background:linear-gradient(0deg, rgba(18,28,32,.78), transparent); }
.exp__card--img figcaption .mono{ color:var(--gold2); font-size:.82rem; }
.exp__card--txt{ background:var(--sand); padding:clamp(1.2rem,2vw,1.8rem); display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem; }
.exp__card--txt .exp__n{ position:absolute; inset-block-start:1.1rem; inset-inline-start:1.2rem; color:var(--accent); font-size:.85rem; }
.exp__card--txt h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.8vw,1.5rem); letter-spacing:-.01em; }
/* the qualifier rides the heading so the caveat cannot be skimmed past */
.exp__note{ display:block; font-family:var(--sans); font-weight:700; font-size:clamp(.9rem,1.1vw,1rem);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mint); margin-top:.45rem; }
.exp__card--txt p{ font-size:.95rem; line-height:1.5; color:var(--ink2); max-width:26ch; }
/* the wide card carries a real paragraph, not a one-liner: let it use its width */
.exp__card--wide.exp__card--txt p{ max-width:58ch; }
.exp__card--txt{ min-height:0; padding-block-start:2rem; }
.exp__card--palm{ background:var(--palm); }
.exp__card--palm h3{ color:var(--mist); }
.exp__card--palm p{ color:var(--mist2); }
.exp__card--palm .exp__n{ color:var(--mint); }
.exp__card--gold{ background:var(--dark); }
.exp__card--gold h3{ color:var(--mist); }
.exp__card--gold p{ color:var(--mist2); }
.exp__card--gold .exp__n{ color:var(--gold2); }
@media (max-width:900px){
  .exp__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px){
  .exp__grid{ grid-template-columns:1fr; }
  .exp__card--wide{ grid-column:auto; }
  .exp__card--img{ min-height:230px; }
  /* single column: a text card at image height is mostly empty sand */
  .exp__card--txt{ min-height:0; padding-block-start:2.6rem; }
  .exp__card--txt .exp__n{ inset-block-start:1rem; }
}

/* ---------- 02 · aveya ---------- */
.aveya .sec-title{ font-size:clamp(2rem,4.6vw,3.9rem); }
.aveya__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.aveya__img{ border-radius:var(--r); overflow:hidden; }
.aveya__img img{ width:100%; height:clamp(300px,30vw,460px); object-fit:cover; }
@media (max-width:860px){ .aveya__grid{ grid-template-columns:1fr; } }
.aveya__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1rem,2vw,2rem); }
.aveya__item{ border-top:1px solid rgba(241,236,224,.18); padding-top:1.1rem; display:flex; flex-direction:column; gap:.55rem; }
.aveya__item .mono{ color:var(--mint); font-size:.82rem; }
.aveya__item h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.05rem,1.6vw,1.35rem); letter-spacing:-.01em; }
.aveya__note{ margin-top:clamp(2rem,4vw,3rem); max-width:56ch; font-size:.95rem; line-height:1.6; color:var(--mist2); }


/* ---------- 03 · the villa ---------- */
.villa .gal-row{ height:clamp(240px,30vw,420px); margin-block:clamp(1rem,2vw,2rem); }
.villa__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem); justify-content:space-between;
  border:1px solid rgba(27,26,22,.14); border-radius:var(--r); padding:clamp(1.2rem,2.4vw,2rem) clamp(1.2rem,2.6vw,2.4rem);
  margin-block:clamp(1.6rem,3vw,2.6rem); }
.vfact{ display:flex; flex-direction:column; gap:.3rem; min-width:150px; }
.vfact__v{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.01em; }
.vfact__v.mono{ font-family:var(--display); letter-spacing:0; }
.vfact__s{ font-size:.92rem; color:var(--ink2); }
.villa__set{ margin-top:clamp(1.6rem,3vw,2.6rem); }
.villa__set img{ width:100%; height:clamp(340px,52vw,640px); object-fit:cover; }
@media (max-width:640px){ .villa__facts{ flex-direction:column; gap:1.1rem; } }

/* ---------- 04 · hospitality ---------- */
.host__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,1.6vw,1.4rem); margin-bottom:clamp(1.8rem,3.4vw,3rem); }
.hcard{ background:var(--sand); border-radius:var(--r); padding:clamp(1.3rem,2.2vw,1.9rem); display:flex; flex-direction:column; gap:.55rem; }
.hcard .mono{ color:var(--accent); font-size:.82rem; }
.hcard h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.8vw,1.5rem); letter-spacing:-.01em; }
.hcard p{ font-size:.98rem; line-height:1.55; color:var(--ink2); }
.gal-row--low{ height:clamp(200px,24vw,330px); }
@media (max-width:760px){ .host__cards{ grid-template-columns:1fr; } }

/* ---------- 05 · island ---------- */
.island__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.island__img{ border-radius:var(--r); overflow:hidden; }
.island__img img{ width:100%; height:clamp(300px,34vw,520px); object-fit:cover; }
/* the entry stamp — one deliberate travel moment, not a theme */
.island__row{ display:flex; align-items:center; gap:clamp(1.6rem,3vw,3rem); margin-top:clamp(1.6rem,3vw,2.4rem); flex-wrap:wrap; }
.island__map{ width:clamp(172px,17.5vw,245px); height:auto; flex:none; overflow:visible; }
.island__stamp{ display:inline-flex; flex-direction:column; gap:.45rem;
  padding:1.2rem 1.7rem; border:2px solid rgba(203,170,93,.7); border-radius:14px; color:var(--gold2);
  font-size:clamp(.95rem,1.2vw,1.1rem); letter-spacing:.12em; transform:rotate(-7deg);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.82 0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.82 0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width:860px){ .island__grid{ grid-template-columns:1fr; } }

/* ---------- 06 · who ---------- */
.who__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,1.6vw,1.4rem); }
.wcard{ border:1px solid rgba(27,26,22,.14); border-radius:var(--r); padding:clamp(1.3rem,2.2vw,1.9rem); display:flex; flex-direction:column; gap:.55rem; }
.wcard .mono{ color:var(--accent); font-size:.82rem; }
.wcard h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.9vw,1.6rem); letter-spacing:-.01em; }
.wcard p{ font-size:1rem; line-height:1.6; color:var(--ink2); max-width:40ch; }
@media (max-width:680px){ .who__grid{ grid-template-columns:1fr; } }

/* ---------- 07 · the stay ---------- */
.stay__bar{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.4rem); justify-content:space-between;
  background:var(--dark); color:var(--mist); border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.4rem,2.8vw,2.6rem); }
.stay__cell{ display:flex; flex-direction:column; gap:.35rem; min-width:160px; }
.stay__cap{ font-family:var(--mono); font-weight:700; font-size:.78rem; letter-spacing:.12em; color:var(--mint); }
.stay__v{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.01em; }
.stay__v b{ color:var(--gold2); font-weight:800; }
.stay__v.mono{ font-family:var(--display); letter-spacing:0; }
.stay__s{ font-size:.92rem; color:var(--mist2); }
@media (max-width:640px){ .stay__bar{ flex-direction:column; gap:1.2rem; } }

/* ---------- enquire ---------- */
.enquire .stay__bar{ margin-bottom:clamp(2.4rem,5vw,4rem); background:rgba(241,236,224,.06); border:1px solid rgba(241,236,224,.16); }
.enquire__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.enquire .sec-title{ font-size:clamp(2rem,4.6vw,3.8rem); }
.island .sec-title{ font-size:clamp(2rem,4.6vw,3.9rem); }
.vlead__form{ display:flex; flex-direction:column; gap:1rem; }
.vlead__field{ display:flex; flex-direction:column; gap:.45rem; }
.vlead__field span{ font-family:var(--mono); font-weight:700; font-size:.78rem; letter-spacing:.12em; color:var(--mint); }
.vlead__field input{ background:rgba(241,236,224,.07); border:1px solid rgba(241,236,224,.22); border-radius:14px;
  padding:.95em 1.2em; font-family:var(--sans); font-size:1.05rem; color:var(--mist); transition:border-color .25s; }
.vlead__field input:focus{ outline:none; border-color:var(--gold2); }
.vlead__field input.err{ border-color:#D26B5B; }
.vlead__form .btn{ align-self:flex-start; margin-top:.4rem; border:0; cursor:pointer; font-family:var(--sans); }
/* family.css sizes .btn span as a 7px dot; the label span must stay text */
.vlead__form .btn .t{ width:auto; height:auto; border-radius:0; background:none; }
.vlead__err{ color:#E8907F; font-size:.92rem; min-height:1.2em; }
.vhp{ position:absolute; inset-inline-start:-9999px; opacity:0; pointer-events:none; }
.vlead__done{ display:none; font-size:1.15rem; line-height:1.6; color:var(--mist); border:1px solid rgba(160,206,111,.5);
  border-radius:var(--r); padding:1.4rem 1.6rem; }
.vlead.sent .vlead__form{ display:none; }
.vlead.sent .vlead__done{ display:block; }
@media (max-width:860px){ .enquire__grid{ grid-template-columns:1fr; } }

/* the dock label: full sentence on desktop, one word on a phone */
.cta-dock .dock-s{ display:none; }
.cta-dock .dock-l, .cta-dock .dock-s{ width:auto; height:auto; border-radius:0; background:none; }
@media (max-width:540px){
  .cta-dock .dock-l{ display:none; }
  .cta-dock .dock-s{ display:inline; }
}

/* ---------- section grammar (journey's, defined here this time) ----------
   The curve is a transition arc that hangs UP over the previous section, so:
   every section stacks its content above z1, and any section a curve hangs
   into carries enough bottom padding to hand the space over. Without both,
   the arc paints over real content — it ate the pricing bar whole. */
.lite{ position:relative; overflow-x:clip; background:var(--bg); color:var(--fg);
  padding-block:clamp(64px,8vw,120px) clamp(60px,7vw,110px); }
.lite__curve{ position:absolute; inset-block-start:0; left:50%; transform:translate(-50%,-60%);
  width:170%; height:clamp(160px,20vw,320px); background:var(--dark); border-radius:50%; z-index:1; }
.lite > *:not(.lite__curve){ position:relative; z-index:2; }
.slab{ padding-block-start:clamp(64px,8vw,120px); }
.lite:has(> .lite__curve){ padding-block-start:clamp(140px,16vw,240px); }
.slab:has(> .slab__curve){ padding-block-start:clamp(140px,16vw,240px); }
/* sections that a following curve hangs into give it the room */
.exp, .host, .stay{ padding-block-end:clamp(170px,20vw,330px); }
/* the dock steps aside at the form and the footer — it was covering the
   submit button and the legal row */
.cta-dock.yield{ opacity:0; pointer-events:none; transform:translate(-50%,26px); }