/* stand-ins while the brand fonts load: Georgia and Arial scaled to Cormorant Garamond's and Montserrat's proportions
   (measured in Chrome against the site's own text), so lines wrap the same before and after the swap and nothing jumps */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia");font-style:normal;size-adjust:88.3%;ascent-override:104.2%;descent-override:32.9%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:78.7%;ascent-override:117%;descent-override:36.9%;line-gap-override:0%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("ArialMT");font-weight:100 450;size-adjust:112.7%;ascent-override:86.1%;descent-override:22.2%;line-gap-override:0%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("ArialMT");font-weight:451 900;size-adjust:114.5%;ascent-override:84.7%;descent-override:21.8%;line-gap-override:0%}
:root{
  /* True Vacation brand book, pág. 11 */
  --green:#375542;   /* Pantone 7736 C, principal */
  --caramel:#C29368; /* Pantone 2313 C, principal */
  --cream:#F8F0E5;   /* Pantone 4029 C al 30%, principal */
  --blush:#E4B8B7;   /* Pantone 7605 C, secundario */
  --turq:#63B1BC;    /* Pantone 7709 C, secundario */
  --butter:#F1E6B2;  /* Pantone 7499 C, secundario */
  --ink:#373A36;     /* Pantone 447 C, neutro */
  --sand:#E7CCA7;    /* Pantone 4029 C */

  /* brand book pág. 12: Cormorant Garamond for titles, Montserrat for text and the website */
  --serif:"Cormorant Garamond", "Cormorant Fallback", "Cormorant", Garamond, "Iowan Old Style", Georgia, serif;
  --sans:"Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px, 2.2vw, 36px);
  --gap:clamp(12px, 1.4vw, 24px);

  --bg:var(--sand);
  --fg:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--green);color:var(--cream);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
picture{display:contents}   /* a WebP <picture> (components/Photo.astro) lays its img out as if the picture weren't there */
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
/* the focus ring takes a colour that shows on the section it's in: turquoise on dark sections, green or charcoal on light ones */
:root{--ring:var(--turq)}
.vp,.vp-rooms,.ow-benefits,.ow-value,.pn-beaches,.tp-stay,.pl-talk,.house,.foam-sec,.owners,.tagline,.ticket{--ring:var(--green)}
.proof{--ring:var(--ink)}
.story{--ring:var(--fg)}
.vp-hero,.vp-inc,.vp-next,.vp-cta,.ow-band,.ow-how,.ow-quote,.ow-talk,.pn-wide,.pn-stay,.vx-split,.foot,.menu,.plan,.villas,.zoom,.statement,.hero,.intro{--ring:var(--turq)}
/* the trip page's doors sit on sand; the hero's quick bar and the "Good to know" aside are a lighter glass, where turquoise falls under 3:1 */
.pn-stay.tp-stay{--ring:var(--green)}
.qbar,.oh-expect{--ring:var(--cream)}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--turq);color:var(--ink);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
#main:focus{outline:none}   /* "Skip to content" moves focus here (home.js, page.js): no ring round the whole page */
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0}

/* pills */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.01em;transition:background-color .35s var(--ease), color .35s var(--ease)}
.pill .arr{display:inline-block;transition:transform .45s var(--ease)}
.pill:hover .arr{transform:translateX(4px)}
.pill-cta{background:var(--turq);color:var(--ink)}
.pill-cta:hover{background:#8CC6CE}
.pill-glass{background:rgb(55 85 66 / .68);color:var(--cream);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.pill-glass:hover{background:rgb(55 85 66 / .82)}
.pill-line{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px currentColor}
.pill-line:hover{background:var(--cream);color:var(--green)}
.pill-ink{background:var(--ink);color:var(--cream)}
.pill-ink:hover{background:#4A4E49}
.pill-lg{min-height:54px;padding:0 26px;font-size:15px}

/* template slots */
.slot{outline:1.5px dashed currentColor;outline-offset:-1.5px}
.slot-tag{display:inline-block;font:500 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:6px 9px}


/* ========== nav ========== */
.nav{position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--pad);pointer-events:none;transition:transform .6s var(--ease)}
.nav > *{pointer-events:auto}
.nav.hide{transform:translateY(-120%)}
.nav-l{justify-self:start;display:flex;gap:8px}
.nav-r{justify-self:end;display:flex;gap:8px;align-items:center}
.nav .pill-cta{box-shadow:0 0 0 1px rgb(55 58 54 / .22), 0 6px 20px rgb(55 58 54 / .18)}
.brand{justify-self:center;display:inline-flex;align-items:center;padding:8px 14px;border-radius:18px;text-decoration:none;color:var(--cream);background:rgb(55 85 66 / .68);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* the official logo in two layers, so the sloth can swing from its branch; at rest it is exactly the logo */
.logo-anim{position:relative;display:block;aspect-ratio:1233 / 614}
.logo-anim img{position:absolute;inset:0;width:100%;height:100%}
.logo-anim .ls{transform-origin:68.8% 7.7%}  /* the sloth's hand on the branch */
.brand .logo-anim{width:120px}  /* 120 px: the brand book's digital minimum */
@media (prefers-reduced-motion: no-preference){
  html.js:not(.no-motion) .logo-anim .lw{clip-path:inset(0% 100% 0% 0%)}
  html.js:not(.no-motion) .logo-anim .ls{opacity:0}
}
.lang{position:relative;display:flex;padding:4px;border-radius:999px;background:rgb(55 85 66 / .68);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* the language switch: a pair of links, to this page in English and in Spanish */
.lang a{display:inline-grid;place-items:center;color:var(--cream);text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.06em;min-width:40px;min-height:36px;border-radius:999px;opacity:.7}
.lang a[aria-current="page"]{background:var(--cream);color:var(--ink);opacity:1}
html.js .lang a{position:relative;z-index:1;transition:color .35s, opacity .35s}
html.js .lang a[aria-current="page"]{background:none}
/* the EN/ES pill glides between the two */
.lang-pill{position:absolute;left:4px;top:4px;bottom:4px;width:40px;border-radius:999px;background:var(--cream);pointer-events:none;opacity:0}
html.js .lang-pill{opacity:1}
.menu-btn i{display:inline-block;width:16px;height:8px;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.menu-btn i::before{top:0}
.menu-btn i::after{bottom:0}
/* headings that rise line by line (SplitText masks clip at their edge): a little room on the right, so an italic letter
   or "?" at the end of a line isn't shaved off; the negative margin keeps every line exactly where it was */
:is(h1, h2, h3) > div[style*="overflow: clip"]{padding-right:.16em;margin-right:-.16em}
/* a split line never re-wraps: when the brand font lands, the old lines would otherwise wrap for a moment before
   SplitText re-splits them, and the page jumps (layout shift) */
:is(h1, h2, h3) > div[style*="overflow: clip"] > div{white-space:nowrap}
/* small phones (up to 389 px, e.g. the 375 px iPhones): a tighter language toggle and gaps, so the menu button keeps the side margin */
@media (max-width: 389px){
  .nav{gap:6px}
  .nav .lang a{min-width:34px}
}
/* very small phones (320–360 px): the logo keeps its 120 px minimum, so the menu button drops its word
   (screen readers still hear it) and the nav's gaps tighten */
@media (max-width: 360px){
  .nav{padding-inline:12px;gap:6px}
  .menu-btn{width:44px;padding:0;justify-content:center}
  .menu-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ========== menu ========== */
.menu{position:fixed;inset:0;z-index:200;background:var(--green);color:var(--cream);display:grid;grid-template-rows:auto 1fr auto;padding:18px var(--pad) 28px;overflow:auto}
.menu[hidden]{display:none}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-links{align-self:center;display:grid;gap:4px;padding:40px 0}
.menu-links a{display:block;overflow:hidden;text-decoration:none;font:500 clamp(44px, 7vw, 112px)/1 var(--serif);letter-spacing:-.02em}
.menu-links a span{display:inline-block;transition:transform .5s var(--ease), color .3s}
.menu-links a:hover span{transform:translateX(18px);color:var(--butter)}
.menu-links a em{font-style:italic}
/* the two villas sit right under "The villas" */
.menu-sub{display:flex;flex-wrap:wrap;gap:2px 30px;margin:0 0 14px 4px}
.menu-links .menu-sub a{display:inline-flex;align-items:center;font:italic 500 clamp(22px, 2.6vw, 38px)/1.2 var(--serif);letter-spacing:0;color:rgb(248 240 229 / .82)}
.menu-sub a::before{content:"";flex:none;width:20px;height:1px;margin-right:12px;background:currentColor;opacity:.55}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:400 13px/1.4 var(--sans);opacity:.8}

/* ========== 1 · hero: the mosaic (one photo, then the whole week) ========== */
.hero{position:relative;height:280vh;background:var(--green);color:var(--cream)}
.m-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.m-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr);gap:1.4vw;padding:1.4vw;transform-origin:50% 50%}
.m-grid figure{position:relative;margin:0;overflow:hidden;border-radius:8px;background:#2E4838}
.m-grid img{width:100%;height:100%;object-fit:cover}
.m-grid figcaption{position:absolute;left:12px;right:12px;bottom:10px;margin:0;font:400 12px/1.2 var(--sans);color:var(--cream);text-shadow:0 1px 8px rgb(0 0 0 / .65);opacity:0}
.m-grid figcaption span{display:inline-block}
.m-grid figcaption i{display:block;margin-top:5px;font:500 10px/1.2 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.78}   /* which house */
@media (scripting: none){ .m-grid noscript{display:contents} }   /* the fixed nine, only without JavaScript */
.m-grid video{display:block;width:100%;height:100%;object-fit:cover}
.m-grid figure > .m-in{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* a new photo wiping in over the old one */
.m-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, rgb(20 33 25 / .72) 0%, rgb(20 33 25 / .2) 56%, rgb(20 33 25 / 0) 80%), linear-gradient(180deg, rgb(20 33 25 / .55) 0%, rgb(20 33 25 / 0) 24%, rgb(20 33 25 / 0) 52%, rgb(20 33 25 / .72) 100%)}
.m-copy{position:absolute;left:var(--pad);bottom:10vh;z-index:2;display:grid;justify-items:start;max-width:880px}
.m-copy .eyebrow{color:rgb(248 240 229 / .8);margin-bottom:22px}
.hero h1{margin:0;font:500 clamp(66px, 9.8vw, 172px)/.88 var(--serif);letter-spacing:-.035em;text-shadow:0 2px 40px rgb(20 33 25 / .35)}
.hero h1 em{font-style:italic;color:var(--sand)}
.hero-sub{margin:26px 0 0;max-width:40ch;font-size:clamp(16px, 1.25vw, 19px);line-height:1.55;color:rgb(248 240 229 / .92)}
.m-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;margin-top:30px}
.m-hint{margin:0;font:400 12.5px/1 var(--sans);color:rgb(248 240 229 / .75)}
.m-end{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0 var(--pad);pointer-events:none;opacity:0;visibility:hidden}
.m-card{pointer-events:auto;display:grid;gap:22px;justify-items:center;text-align:center;max-width:100%;padding:32px 30px 24px;border-radius:28px;background:rgb(55 85 66 / .72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 0 0 1px rgb(248 240 229 / .14), 0 30px 80px rgb(0 0 0 / .4)}
.m-card h2{margin:0;font:500 clamp(44px, 5vw, 84px)/.95 var(--serif);letter-spacing:-.025em}
.m-card h2 em{font-style:italic;color:var(--sand)}
.m-proof{margin:0;font:400 12.5px/1.3 var(--sans);color:rgb(248 240 229 / .8)}
/* the quick plan bar (inside the end card) */
.qbar{display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px;background:rgb(248 240 229 / .06);box-shadow:inset 0 0 0 1px rgb(248 240 229 / .16);text-align:left}
.qf{position:relative;display:grid;gap:4px;padding:8px 22px;min-width:150px}
.qf + .qf::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgb(248 240 229 / .16)}
.qf label,.qf .ql{font:400 11px/1 var(--sans);letter-spacing:.04em;color:rgb(248 240 229 / .82)}
.qf select{appearance:none;-webkit-appearance:none;max-width:210px;padding:2px 22px 2px 0;border:0;cursor:pointer;color:var(--cream);font:500 16px/1.3 var(--sans);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F4EBDD' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0 center}
.qf select option{background:var(--green);color:var(--cream)}
.qstep{display:flex;align-items:center;gap:12px}
.qstep button{width:30px;height:30px;border-radius:50%;border:0;background:rgb(248 240 229 / .12);color:var(--cream);cursor:pointer;font:500 16px/1 var(--sans);display:grid;place-items:center;transition:background-color .2s}
.qstep button:hover{background:rgb(248 240 229 / .26)}
.qstep output{display:inline-block;min-width:2ch;text-align:center;font:500 16px/1 var(--sans)}
.qbar .pill{margin-left:6px}
/* without motion: a still mosaic with the words and the planner bar underneath */
html.no-motion .hero{height:auto}
html.no-motion .m-stage{position:relative;height:auto;min-height:0;display:grid;gap:34px;padding:110px var(--pad) 70px}
html.no-motion .m-grid{position:relative;inset:auto;height:72vh;padding:0}
html.no-motion .m-grid figcaption{opacity:1}
html.no-motion .m-shade{display:none}
html.no-motion .m-copy,html.no-motion .m-end{position:relative;inset:auto;left:auto;top:auto;bottom:auto;opacity:1;visibility:visible}
html.no-motion .m-hint{display:none}
/* ========== 2 · statement (pinned) ========== */
.statement{position:relative;height:100vh;height:100svh;background:var(--green);color:var(--cream);overflow:hidden}
.st-lines{position:absolute;inset:0;display:grid;place-items:center;z-index:2;padding:0 var(--pad);text-align:center;pointer-events:none}
.st-line{grid-area:1 / 1;margin:0;max-width:20ch;font:500 clamp(36px, 4.8vw, 82px)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.st-line em{font-style:italic;color:var(--caramel)}
.st-line.final{max-width:none;font-size:clamp(40px, 6vw, 104px)}
.st-pics{position:absolute;inset:0;z-index:1}
.st-pic{position:absolute;margin:0;overflow:hidden;border-radius:4px}
.st-pic img{width:100%;height:100%;object-fit:cover}
.st-pic.a{left:6%;top:30%;width:19vw;aspect-ratio:4 / 5}
.st-pic.b{left:72%;top:8%;width:17vw;aspect-ratio:3 / 4}
.st-pic.c{left:30%;top:4%;width:13vw;aspect-ratio:1}
.st-pic.d{left:78%;top:46%;width:15vw;aspect-ratio:4 / 5}
.st-pic.e{left:20%;top:74%;width:11vw;aspect-ratio:1}
html.no-motion .statement{height:auto;padding:22vh 0}
html.no-motion .st-lines{position:static;display:grid;gap:36px}
html.no-motion .st-line{grid-area:auto}
html.no-motion .st-pics{display:none}

/* ========== 3 · the story + thread ========== */
.story{position:relative;background:var(--bg);color:var(--fg)}
.thread{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.55}
html.no-motion .thread{display:none}
.story-intro{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);padding:22vh var(--pad) 10vh}
.story-intro .eyebrow{grid-column:1 / span 3}
.story-intro h2{grid-column:4 / span 8;margin:0;font:500 clamp(34px, 4.2vw, 72px)/1.04 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.story-intro h2 em{font-style:italic}
.key{grid-column:4 / span 8;display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:20px;font-size:14px;opacity:.85}
.key .k1{font:italic 500 22px/1 var(--serif)}
.key .k2{font:400 12.5px/1 var(--sans);align-self:center}

.chapter{position:relative;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:center;min-height:100vh;padding:12vh var(--pad);background:var(--cbg);color:var(--cfg)}
html.motion .chapter{background:transparent;color:inherit}
.ch-ph{grid-column:1 / span 7;margin:0;overflow:hidden;border-radius:6px;aspect-ratio:3 / 2;position:relative}
.ch-ph img{width:100%;height:100%;object-fit:cover}
html.motion .ch-ph img{transform:scale(1.14)}
.ch-ph.tall{grid-column:2 / span 5;aspect-ratio:4 / 5}
.ch-tx{grid-column:9 / span 4;position:relative;z-index:4}
.chapter.flip .ch-ph{grid-column:6 / -1;order:2}
.chapter.flip .ch-ph.tall{grid-column:7 / span 5}
.chapter.flip .ch-tx{grid-column:1 / span 4;order:1}
.ch-label{display:flex;gap:12px;align-items:baseline;margin:0 0 22px}
.ch-label b{font:500 12px/1 var(--sans);letter-spacing:.04em}
.ch-label span{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ch-q{margin:0;font:italic 500 clamp(34px, 3.5vw, 62px)/1.04 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.ch-q::before{content:"“";display:block;height:.45em;font-size:1.6em;line-height:1;opacity:.5;font-style:normal}
.note{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin:34px 0 0;padding-top:18px;border-top:1px solid color-mix(in srgb, currentColor 28%, transparent);font:400 13px/1.55 var(--sans);max-width:40ch}
.knot{width:11px;height:11px;margin-top:3px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb, currentColor 16%, transparent)}
.note p{margin:0}
.note b{font-weight:500}

/* ========== 4 · the house (pinned horizontal) ========== */
.house{position:relative;background:var(--cream);color:var(--ink);overflow:hidden}
.house-pin{height:100vh;height:100svh;display:flex;align-items:center}
.house-track{display:flex;align-items:center;gap:clamp(16px, 2vw, 32px);padding:0 var(--pad)}
.house-intro{flex:0 0 auto;width:min(520px, 80vw);display:grid;gap:22px;align-content:center;padding-right:clamp(10px, 3vw, 60px)}
.house-intro h2{margin:0;font:500 clamp(60px, 7vw, 124px)/.9 var(--serif);letter-spacing:-.03em}
.house-intro h2 em{font-style:italic}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;border-top:1px solid rgb(55 58 54 / .2)}
.facts li{padding:11px 0;border-bottom:1px solid rgb(55 58 54 / .12);font-size:14px}
.facts li b{font:500 24px/1 var(--serif);margin-right:6px}
.hint{margin:0;font:400 12.5px/1 var(--sans);opacity:.8}
.room{flex:0 0 auto;margin:0;height:min(64vh, 640px)}
.room .f{height:calc(100% - 34px);overflow:hidden;border-radius:6px}
.room img{height:100%;width:auto;max-width:none;object-fit:cover;aspect-ratio:var(--ar, 3 / 2)}
.room figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:400 12.5px/1.2 var(--sans)}
/* the second house starts after a rule; a small label shows which house you're in */
.house-intro.second{margin-left:clamp(28px, 6vw, 110px);padding-left:clamp(28px, 4vw, 70px);border-left:1px solid rgb(55 58 54 / .18);align-self:stretch}
.house-pin{position:relative}
.walk-nav{position:absolute;left:50%;bottom:calc(clamp(14px, 3.4vh, 34px) + env(safe-area-inset-bottom, 0px));z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:5px;border-radius:999px;background:rgb(248 240 229 / .86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgb(55 58 54 / .14);white-space:nowrap}
.walk-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;text-decoration:none;font:500 12.5px/1 var(--sans);color:rgb(55 58 54 / .8);transition:background-color .45s var(--ease), color .45s var(--ease)}
.walk-nav a:hover{color:var(--ink)}
.walk-nav a.on{background:var(--ink);color:var(--cream)}
.wk-line{position:relative;width:clamp(36px, 7vw, 110px);height:1px;background:rgb(55 58 54 / .2)}
.wk-line i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
html.no-motion .walk-nav{position:static;transform:none;margin:28px auto 0;width:max-content}
html.no-motion .house-pin{height:auto;display:block;padding:14vh 0}
html.no-motion .house-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px}
html.no-motion .room,html.no-motion .house-intro{scroll-snap-align:start}

/* ========== 4 · the villas: two doors, one per group size ========== */
.villas{background:var(--green);color:var(--cream);padding:16vh var(--pad) 14vh}
.vl-head{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(30px, 4.4vw, 64px)}
.vl-head .eyebrow{grid-column:1 / -1;margin-bottom:6px}
.villas h2{grid-column:1 / span 8;margin:0;font:500 clamp(52px, 7.4vw, 128px)/.9 var(--serif);letter-spacing:-.03em}
.villas h2 em{font-style:italic;color:var(--caramel)}
.vl-sub{grid-column:9 / -1;margin:0;font-size:15px;line-height:1.55;color:rgb(248 240 229 / .82)}
.duo{display:flex;gap:clamp(10px, 1.2vw, 18px);height:min(80vh, 780px)}
.duo-card{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:6px;color:var(--cream);text-decoration:none;transition:flex-grow .9s var(--ease)}
.duo-card img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;transition:scale 1.4s var(--ease)}
.duo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgb(20 33 25 / 0) 38%, rgb(20 33 25 / .82))}
.duo-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;justify-items:start;gap:10px;padding:clamp(18px, 2.6vw, 40px)}
.duo-tx p{margin:0}
.duo-cap{font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.duo-tx h3{margin:0;font:500 clamp(40px, 4.6vw, 78px)/.95 var(--serif);letter-spacing:-.02em}
.duo-tx p:not([class]){max-width:42ch;font-size:14.5px;line-height:1.5;color:rgb(248 240 229 / .9)}
.duo-star{font:500 13px/1.3 var(--sans)}
.duo-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;padding:0 20px;border-radius:999px;background:rgb(55 85 66 / .68);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);font:500 14px/1 var(--sans);transition:background-color .35s var(--ease)}
.duo-go .arr{display:inline-block;transition:transform .45s var(--ease)}
.duo-card:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
@media (hover: hover){
  .duo:hover .duo-card{flex-grow:.74}
  .duo .duo-card:hover{flex-grow:1.36}
  .duo-card:hover img{scale:1.04}
  .duo-card:hover .duo-go{background:rgb(55 85 66 / .9)}
  .duo-card:hover .duo-go .arr{transform:translateX(4px)}
}

/* ========== 5 · proof ========== */
.proof{background:var(--caramel);color:#1E201D;padding:18vh var(--pad);display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:end}
.proof .eyebrow{grid-column:1 / -1;margin-bottom:28px}
.scores{grid-column:1 / span 6;align-self:start;display:grid;gap:clamp(22px, 3.4vw, 52px)}
.score{display:flex;align-items:flex-end;gap:clamp(14px, 2vw, 30px);margin:0;font:500 clamp(104px, 14vw, 250px)/.8 var(--serif);letter-spacing:-.05em}
.score .count{flex:none;min-width:1.4em}   /* both labels line up, and don't jiggle while the numbers count */
.score small{display:block;margin:0 0 .1em;font:400 15px/1.4 var(--sans);letter-spacing:0}
.score small b{display:block;margin-bottom:2px;font-weight:600}
.proof-r{grid-column:8 / -1;display:grid;gap:26px}
.cats-h{display:grid;grid-template-columns:1fr 64px 96px;margin:0 0 8px;font:500 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.cats-h span{text-align:right}
.cats{display:grid;margin:0;border-top:1px solid rgb(30 32 29 / .3)}
.cats div{position:relative;display:grid;grid-template-columns:1fr 64px 96px;align-items:baseline;padding:12px 0}
.cats dd{display:contents}
.cats dd b{font:500 24px/1 var(--serif);text-align:right}
.cats div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(30 32 29 / .2);transform-origin:0 50%;transform:scaleX(var(--draw, 1))}
.cats dt{font:400 12.5px/1 var(--sans)}
.quote{margin:0;padding:24px;border-radius:6px}
.quote p{margin:14px 0 12px;font:italic 500 clamp(24px, 2.2vw, 34px)/1.12 var(--serif)}
.quote cite{font:400 12.5px/1.3 var(--sans);font-style:normal}
.proof-links{display:flex;flex-wrap:wrap;gap:10px}
.proof .pill-ink{background:var(--green);color:var(--cream)}
.proof .pill-ink:hover{background:var(--ink)}

/* ========== 6 · Pinilla zoom (held with position: sticky in home.js) ========== */
.zoom{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--green);color:var(--cream)}
.z-layer{position:absolute;inset:0;margin:0}
.z-layer img{width:100%;height:100%;object-fit:cover}
.z-wide{transform-origin:55% 55%}
.zoom::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg, rgb(55 85 66 / .86) 0%, rgb(55 85 66 / .4) 46%, rgb(55 85 66 / 0) 70%)}
.z-copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:3;width:min(520px, 86vw);display:grid;gap:20px}
.z-copy h2{margin:0;font:500 clamp(48px, 5.6vw, 96px)/.95 var(--serif);letter-spacing:-.025em}
.z-copy h2 em{font-style:italic;color:var(--caramel)}
.z-copy p{margin:0;font-size:16px;line-height:1.6;max-width:44ch;opacity:.92}
.z-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:400 13px/1.3 var(--sans)}
.z-steps li{display:flex;gap:12px;align-items:center}
.z-steps li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--caramel);flex:none}
.z-steps b{font-weight:500;min-width:15ch}
html.no-motion .z-near{display:none}

/* ========== 7 · hosts, faq, owners ========== */
.foam-sec{background:var(--cream);color:var(--ink)}
.hosts{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);padding:20vh var(--pad) 14vh;align-items:center}
.portrait{grid-column:1 / span 4;aspect-ratio:4 / 5;border-radius:6px;display:grid;place-items:center;text-align:center;padding:20px;background:var(--sand)}
.portrait p{margin:12px 0 0;font-size:13.5px;opacity:.8}
/* until Mau & Lau send their portrait, the frame holds a villa photo */
.portrait-ph{margin:0;padding:0;display:block;overflow:hidden}
.portrait-ph img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.hosts-tx{grid-column:6 / -1;display:grid;gap:26px;justify-items:start}
.hosts-tx h2{margin:0;font:500 clamp(44px, 5.4vw, 92px)/.98 var(--serif);letter-spacing:-.025em}
.hosts-tx h2 em{font-style:italic}
.hosts-tx p{margin:0;font-size:18px;line-height:1.55;max-width:46ch}
.faq-sec{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);padding:8vh var(--pad) 20vh;align-items:start}
.faq-l{grid-column:1 / span 4;position:sticky;top:110px;display:grid;gap:24px;justify-items:start}
.faq-l h2{margin:0;font:500 clamp(44px, 4.6vw, 80px)/.95 var(--serif);letter-spacing:-.025em}
.faq-l h2 em{font-style:italic}
.faq-vis{position:relative;width:min(300px, 82%);aspect-ratio:4 / 5;border-radius:10px;overflow:hidden;background:var(--sand)}
.faq-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.14);transition:opacity .8s var(--ease), transform 1.4s var(--ease)}
.faq-vis img.on{opacity:1;transform:scale(1)}
.faq-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgb(20 33 25 / .55), rgb(20 33 25 / 0) 45%)}
.faq-num{position:absolute;left:16px;bottom:12px;z-index:1;margin:0;height:1em;overflow:hidden;color:var(--cream);font:italic 500 72px/1 var(--serif)}
.faq-num span{display:block}
.faq{grid-column:6 / -1;border-top:1px solid rgb(55 58 54 / .3)}
.faq details{position:relative;border-bottom:1px solid rgb(55 58 54 / .14)}
.faq details::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.faq details:hover::after,.faq details[open]::after{transform:scaleX(1)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 clamp(22px, 2vw, 30px)/1.2 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary > span{display:flex;gap:18px;align-items:baseline;transition:transform .55s var(--ease)}
.faq summary > span::before{content:attr(data-n);flex:none;font:400 12px/1 var(--sans);opacity:.5}
.faq details:hover summary > span,.faq details[open] summary > span{transform:translateX(10px)}
.faq summary i{flex:0 0 42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;position:relative;transition:background-color .4s var(--ease), color .4s, box-shadow .4s, transform .7s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:14px;right:14px;top:20px;height:1.5px;background:currentColor;transition:transform .55s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details:hover summary i{background:var(--turq);box-shadow:none}
.faq details[open] summary i{background:var(--ink);color:var(--cream);box-shadow:none;transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{overflow:hidden}
.faq .a p{margin:0;padding:0 0 26px 40px;max-width:60ch;font-size:16.5px;line-height:1.6;opacity:.85}
.owners{background:var(--blush);color:var(--ink);padding:14vh var(--pad);display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:end}
.owners .eyebrow{grid-column:1 / span 4;align-self:start}
.owners-tx{grid-column:6 / -1;display:grid;gap:26px;justify-items:start}
.owners-tx h2{margin:0;font:500 clamp(36px, 4vw, 66px)/1.02 var(--serif);letter-spacing:-.02em}
.owners-tx h2 em{font-style:italic}
.owners-tx p{margin:0;max-width:48ch;font-size:17px}

/* ========== 8 · plan my stay: one question at a time + live proposal ticket ========== */
.plan{position:relative;overflow:hidden;background:var(--green);color:var(--cream);padding:20vh var(--pad) 18vh}
.plan::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 88% 6%, rgb(194 147 104 / .16), rgb(194 147 104 / 0) 70%), radial-gradient(45% 40% at 0% 100%, rgb(55 85 66 / .38), rgb(55 85 66 / 0) 70%)}
.plan-head,.plan-grid{position:relative;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap)}
.plan-head .eyebrow{grid-column:1 / -1;margin-bottom:18px}
.plan-head h2{grid-column:1 / span 9;margin:0;font:500 clamp(48px, 6.4vw, 112px)/.94 var(--serif);letter-spacing:-.03em}
.plan-head h2 em{font-style:italic;color:var(--caramel)}
.plan-meta{grid-column:1 / -1;margin:22px 0 0;font:400 13px/1.4 var(--sans);color:rgb(248 240 229 / .72)}
.plan-grid{margin-top:9vh;align-items:start}
.wz-col{grid-column:1 / span 7;min-width:0}
.wz-top{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.wz-progress{position:relative;flex:1;height:2px;border-radius:2px;background:rgb(248 240 229 / .14)}
.wz-progress span{display:block;height:100%;width:20%;background:var(--turq);transition:width .7s var(--ease)}
.wz-count{margin:0;min-width:4ch;text-align:right;font:400 12.5px/1 var(--sans);color:rgb(248 240 229 / .75)}
.step{border:0;margin:0;padding:0;min-width:0;display:none}
.step.is-on{display:block;animation:stepIn .7s var(--ease)}
.step.is-on.back{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(28px)}}
@keyframes stepBack{from{opacity:0;transform:translateX(-28px)}}
.q{margin:0 0 30px;font:500 clamp(36px, 3.6vw, 60px)/1.03 var(--serif);letter-spacing:-.02em}
.q em{font-style:italic;color:var(--caramel)}
.occ input,.mchip input,.seg input,.xchip input,.owner-link input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.occ-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.occ{position:relative;display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;padding:10px;border-radius:18px;box-shadow:inset 0 0 0 1px rgb(248 240 229 / .18);cursor:pointer;transition:background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s, transform .35s var(--ease)}
.occ:hover{box-shadow:inset 0 0 0 1px rgb(248 240 229 / .55);transform:translateY(-2px)}
.occ img{width:104px;height:80px;object-fit:cover;border-radius:12px;transition:transform .6s var(--ease)}
.occ:hover img{transform:scale(1.05)}
.occ b{display:block;font:500 25px/1.1 var(--serif)}
.occ small{display:block;margin-top:4px;font-size:13px;opacity:.72}
.occ.on{background:var(--cream);color:var(--ink);box-shadow:none}
.occ:has(input:focus-visible),.mchip:has(input:focus-visible),.seg label:has(input:focus-visible),.xchip:has(input:focus-visible),.owner-link:has(input:focus-visible){outline:2px solid var(--butter);outline-offset:3px;border-radius:18px}
.owner-link{position:relative;display:inline-flex;margin-top:22px;font-size:14.5px;opacity:.8;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.owner-link:hover,.owner-link.on{opacity:1;color:var(--butter)}
.months{display:flex;flex-wrap:wrap;gap:8px}
.mchip{position:relative;cursor:pointer}
.mchip span,.seg span,.xchip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font:500 14px/1 var(--sans);transition:background-color .25s, color .25s, box-shadow .25s}
.mchip span,.xchip span{box-shadow:inset 0 0 0 1px rgb(248 240 229 / .26)}
.mchip:hover span,.xchip:hover span{box-shadow:inset 0 0 0 1px var(--cream)}
.mchip input:checked + span{background:var(--cream);color:var(--ink);box-shadow:none}
.count-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid rgb(248 240 229 / .14)}
.months + .count-row{margin-top:26px;border-top:1px solid rgb(248 240 229 / .14)}
.count-row b{display:block;font:500 26px/1.1 var(--serif)}
.count-row small{display:block;margin-top:3px;font-size:13px;opacity:.7}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:44px;height:44px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgb(248 240 229 / .35);background:transparent;color:var(--cream);font:400 20px/1 var(--sans);cursor:pointer;transition:background-color .2s, color .2s}
.stepper button:hover{background:var(--cream);color:var(--ink)}
.stepper button:disabled{opacity:.28;cursor:default;background:transparent;color:var(--cream)}
.stepper output{display:inline-block;min-width:2.2ch;text-align:center;font:500 32px/1 var(--serif)}
.check{display:inline-flex;align-items:center;gap:12px;margin-top:22px;cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--turq)}
.g-note{min-height:22px;margin:14px 0 0;font:400 13px/1.5 var(--sans);color:var(--butter)}
.sub-q{margin:28px 0 12px;font:400 12.5px/1 var(--sans);color:rgb(248 240 229 / .72)}
.seg{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(248 240 229 / .26)}
.seg label{position:relative;cursor:pointer}
.seg input:checked + span{background:var(--cream);color:var(--ink)}
.seg-v{border-radius:26px}
.seg span small{font:400 12px/1 var(--sans);opacity:.7}
.xchips{display:flex;flex-wrap:wrap;gap:8px}
.xchip{position:relative;cursor:pointer}
.xchip span::before{content:"+";font-size:16px;opacity:.7}
.xchip input:checked + span{background:var(--turq);color:var(--ink);box-shadow:none}
.xchip input:checked + span::before{content:"✓";opacity:1}
.field{display:grid;gap:10px;margin-top:26px;font:400 12.5px/1 var(--sans);color:rgb(248 240 229 / .75)}
.field textarea{resize:vertical;min-height:96px;padding:16px 20px;border-radius:18px;border:0;box-shadow:inset 0 0 0 1px rgb(248 240 229 / .3);background:rgb(248 240 229 / .06);color:var(--cream);font:400 16px/1.5 var(--sans)}
.field textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--butter)}
.field textarea::placeholder,.contact input::placeholder{color:rgb(248 240 229 / .4)}
.contact{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px var(--gap)}
.contact .full{grid-column:1 / -1}
.contact > div{position:relative}
/* floating labels: the label sits in the field, then lifts out of the way */
.contact label{position:absolute;left:21px;top:19px;margin:0;font:400 15px/1 var(--sans);opacity:.62;pointer-events:none;transform-origin:0 0;transition:transform .45s var(--ease), opacity .3s}
.contact input:focus + label,.contact input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.74);opacity:.9}
.contact input{width:100%;min-height:54px;padding:22px 20px 6px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1px rgb(248 240 229 / .35);background:rgb(248 240 229 / .06);color:var(--cream);font-size:16px}
.contact input:focus{box-shadow:inset 0 0 0 1.5px var(--butter);outline:none}
.contact input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px #E4B8B7}
.err{display:block;min-height:18px;margin:6px 0 0 18px;font-size:13px;color:#E4B8B7}
/* the forms: the spam trap sits off screen (people never see it), and the message if sending fails */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.send-err{margin:14px 0 0;font-size:14px;line-height:1.5;color:#E4B8B7}
.send-err a{color:inherit}
.wz-nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:40px}
.wz-nav .pill-line:disabled{opacity:.3;cursor:default;pointer-events:none}
.wz-hint{margin:0 0 0 auto;font:400 12px/1 var(--sans);color:rgb(248 240 229 / .8)}
/* the live proposal ticket */
.ticket{grid-column:9 / -1;position:sticky;top:96px;background:var(--cream);color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px rgb(0 0 0 / .42);transform:rotate(-1.4deg);transition:transform .6s var(--ease)}
.ticket:hover{transform:rotate(0)}
.tk-photo{position:relative;aspect-ratio:16 / 9;overflow:hidden}
.tk-photo img{width:100%;height:100%;object-fit:cover}
.tk-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgb(20 33 25 / .5), rgb(20 33 25 / 0) 50%)}
.tk-brand{position:absolute;left:18px;top:14px;z-index:1}
.tk-brand img{display:block;width:120px;height:auto}
.tk-villa{position:absolute;right:14px;top:11px;z-index:1;padding:7px 12px;border-radius:999px;background:var(--cream);font:500 12px/1 var(--sans)}
.tk-body{position:relative;padding:22px 24px 24px}
.tk-eyebrow{margin:0;font:400 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.tk-title{margin:10px 0 16px;font:500 clamp(30px, 2.4vw, 40px)/1.02 var(--serif);letter-spacing:-.02em;border-radius:6px}
.tk-title em{font-style:italic}
.tk-rows{margin:0;display:grid}
.tk-rows div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:11px 0;border-top:1px dashed rgb(55 58 54 / .22)}
.tk-rows dt{font:400 11.5px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.tk-rows dd{margin:0;font-size:15px;line-height:1.45;border-radius:4px}
.tk-note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgb(194 147 104 / .22);font-size:13px;line-height:1.45}
.tk-perf{position:relative;height:0;margin:20px -24px;border-top:2px dashed rgb(55 58 54 / .22)}
.tk-perf::before,.tk-perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--green)}
.tk-perf::before{left:-12px}
.tk-perf::after{right:-12px}
.tk-inc{margin:0;font-size:13.5px;line-height:1.5}
.tk-inc b{display:block;margin-bottom:4px;font:400 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.05em;opacity:.8;font-weight:400}
.tk-foot{margin:14px 0 0;font:400 12px/1.4 var(--sans);opacity:.8}
.flash{animation:flash .9s ease}
@keyframes flash{from{background:rgb(194 147 104 / .45)}to{background:rgb(194 147 104 / 0)}}
.tk-stamp{position:absolute;right:18px;top:54px;padding:10px 14px;border:2.5px solid #375542;border-radius:10px;color:#375542;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-14deg) scale(1.8);opacity:0;pointer-events:none}
.ticket.sent .tk-stamp{animation:stamp .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{to{opacity:.92;transform:rotate(-14deg) scale(1)}}
/* after sending */
.done[hidden]{display:none}
.done{display:grid;gap:26px;justify-items:start;animation:stepIn .8s var(--ease)}
.done h3{margin:0;font:italic 500 clamp(46px, 5vw, 84px)/.95 var(--serif);letter-spacing:-.02em}
.next{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid rgb(248 240 229 / .16)}
.next li{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid rgb(248 240 229 / .16)}
.next b{font:500 12.5px/1.6 var(--sans);color:var(--butter)}
.next span{font-size:16px;line-height:1.55}
.done-links{display:flex;flex-wrap:wrap;gap:10px}
/* ========== footer ========== */
.foot{background:var(--green);color:var(--cream);padding:12vh var(--pad) calc(26px + env(safe-area-inset-bottom));border-top:1px solid rgb(248 240 229 / .1)}
.foot-cols{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:28px var(--gap)}
.foot-cols > div{grid-column:span 3}
.foot h3{margin:0 0 14px;font:400 12px/1 var(--sans);opacity:.7}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot a,.menu-foot a{text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;transition:background-size .5s var(--ease), color .3s}
.foot a:hover,.foot a:focus-visible,.menu-foot a:hover,.menu-foot a:focus-visible{background-size:100% 1px}
.foot a:hover{color:var(--butter)}
.foot p{margin:0 0 8px;font-size:15px}
.foot-villas{margin-bottom:14px !important}
.foot .foot-air{margin-left:6px;font-size:12.5px;opacity:.72}
/* phones and tablets: a taller tap area round each footer link, without moving the text or its underline */
@media (pointer: coarse){ .foot a{position:relative} .foot a::after{content:'';position:absolute;inset:-4px} }
.foot .foot-word{margin:12vh 0 0;pointer-events:none}   /* the swinging sloth never takes a tap meant for the phone number */
.foot-word .logo-anim{width:clamp(240px, 40vw, 600px)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;font:400 12px/1.3 var(--sans);opacity:.7}

/* mobile CTA */
.mbar{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;display:none;transform:translateY(160%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar .pill{width:100%;justify-content:center;box-shadow:0 10px 30px rgb(0 0 0 / .3)}

/* ========== responsive ========== */
/* ========== opening curtain: the logo writes itself in on brand green, then takes its place in the nav ========== */
.intro{position:fixed;inset:0;z-index:500;display:none;background:var(--green);touch-action:none}
.intro-logo{position:fixed;left:50%;top:50%;z-index:501;display:none;width:min(300px, 62vw);transform:translate(-50%, -50%);pointer-events:none}
html.intro-on .intro,html.intro-on .intro-logo{display:block}
/* failsafe: if a script ever stops mid-intro, the curtain still clears */
.intro,.intro-logo{animation:intro-out 0s 7s forwards}
@keyframes intro-out{to{visibility:hidden}}
/* ========== brand taglines: a slow band that answers the scroll ========== */
.tagline{position:relative;overflow:hidden;background:var(--cream);color:var(--green);padding:5vh 0;border-block:1px solid rgb(55 85 66 / .14)}
.tl-track{display:flex;width:max-content}
.tl-set{display:flex;align-items:center;flex:none}
.tl-set span{padding:0 .45em;white-space:nowrap;font:500 clamp(34px, 5vw, 80px)/1.15 var(--serif);letter-spacing:-.01em}
.tl-set em{font-style:italic}
.tl-set img{flex:none;width:auto;height:clamp(30px, 4.2vw, 66px)}
/* the house: each photo drifts inside its frame as you walk past */
html.motion .room .f img{scale:1.16}
html.motion .room .f img.keep-top{transform-origin:50% 0}   /* the sunset aerial: keep the sun and the sea in frame */
/* ========== planner details ========== */
.wz-progress i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 1.5px rgb(248 240 229 / .35);transition:background-color .3s, box-shadow .3s}
.wz-progress i:nth-of-type(2){left:25%}
.wz-progress i:nth-of-type(3){left:50%}
.wz-progress i:nth-of-type(4){left:75%}
.wz-progress i:nth-of-type(5){left:100%}
.wz-progress i.done{background:var(--turq);box-shadow:none}
.wz-progress i.cur{background:var(--turq);box-shadow:0 0 0 5px rgb(99 177 188 / .28)}
html.motion .wz-progress span{transition:none}
@keyframes pop{0%{transform:scale(.93)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.popping{animation:pop .55s cubic-bezier(.3,1.4,.5,1)}
#wz-next .btn-dots,#wz-next .btn-tick{display:none}
#wz-next.sending #wz-next-t,#wz-next.sending .arr,#wz-next.ok #wz-next-t,#wz-next.ok .arr{display:none}
#wz-next.sending,#wz-next.ok{justify-content:center}
#wz-next.sending .btn-dots{display:inline-flex;gap:5px}
.btn-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:dot .9s ease-in-out infinite}
.btn-dots i:nth-child(2){animation-delay:.12s}
.btn-dots i:nth-child(3){animation-delay:.24s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-5px);opacity:1}}
#wz-next.ok .btn-tick{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tick .5s .05s var(--ease) forwards}
@keyframes tick{to{stroke-dashoffset:0}}
/* ========== button labels roll over on hover ========== */
.roll{display:inline-grid;overflow:hidden;line-height:1.3}
.roll > span{grid-area:1 / 1;transition:transform .55s var(--ease)}
.roll > span + span{transform:translateY(110%)}
@media (hover: hover){
  .pill:hover .roll > span:first-child{transform:translateY(-110%)}
  .pill:hover .roll > span + span{transform:none}
}
/* ========== house photo viewer ========== */
.room .f{cursor:zoom-in}
.room .f:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
.viewer{position:fixed;inset:0;z-index:320;touch-action:none}
.viewer[hidden]{display:none}
.vw-bg{position:absolute;inset:0;background:rgb(20 33 25 / .94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vw-stage{position:fixed;left:0;top:0;width:0;height:0;margin:0;overflow:hidden;border-radius:6px;background:var(--green)}
.vw-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vw-close{position:absolute;right:var(--pad);top:calc(18px + env(safe-area-inset-top, 0px));z-index:2}
.vw-arrow{position:absolute;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgb(248 240 229 / .14);color:var(--cream);font:400 20px/1 var(--sans);cursor:pointer;transition:background-color .25s}
.vw-arrow:hover{background:rgb(248 240 229 / .3)}
.vw-prev{left:var(--pad)}
.vw-next{right:var(--pad)}
.vw-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(22px + env(safe-area-inset-bottom, 0px));z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;color:var(--cream);font:400 13px/1.3 var(--sans)}
.vw-meta b{font:italic 500 clamp(22px, 2vw, 30px)/1.1 var(--serif)}
@media (max-width: 700px){ .vw-arrow{top:auto;bottom:calc(64px + env(safe-area-inset-bottom, 0px));width:44px;height:44px;margin:0} }
@media (max-width: 900px){
  .nav{grid-template-columns:auto 1fr auto;gap:8px}
  .brand{justify-self:start;grid-column:1;grid-row:1;padding:6px 10px;border-radius:16px}
  .nav-r{grid-column:2;grid-row:1;justify-self:end}
  .nav-l{grid-column:3;grid-row:1;justify-self:end}
  .nav-r .pill-cta{display:none}
  .m-grid{gap:2vw;padding:2vw}
  .m-copy{bottom:7vh;right:var(--pad)}
  .m-shade{background:linear-gradient(180deg, rgb(20 33 25 / .6) 0%, rgb(20 33 25 / .1) 30%, rgb(20 33 25 / .35) 55%, rgb(20 33 25 / .85) 100%)}
  .m-card{width:100%;padding:24px 14px 18px}
  .qbar{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;gap:4px;padding:8px}
  .qf{min-width:0;padding:10px 12px}
  .qf + .qf::before{display:none}
  .qf select{max-width:100%}
  .qbar .pill{grid-column:1 / -1;margin:4px 0 0;justify-content:center}
  .wz-col,.ticket{grid-column:1 / -1}
  .ticket{position:relative;top:auto;margin-top:48px;transform:none;justify-self:center;width:100%;max-width:560px}
  .occ-grid{grid-template-columns:repeat(auto-fit, minmax(270px, 1fr))}
  .wz-hint{display:none}
  .next li{grid-template-columns:1fr;gap:4px}
  .faq-l{position:static;grid-column:1 / -1}
  .faq-vis{width:100%;aspect-ratio:16 / 10}
  .faq-num{font-size:56px}
  .faq{grid-column:1 / -1;margin-top:28px}
  .faq .a p{padding-left:0}
  .st-pic.a{left:-6%;top:30%;width:32vw}
  .st-pic.b{left:70%;top:8%;width:30vw}
  .st-pic.c{left:26%;top:4%;width:22vw}
  .st-pic.d{left:76%;top:50%;width:26vw}
  .st-pic.e{left:6%;top:74%;width:22vw}
  .st-line{text-shadow:0 2px 24px rgb(20 33 25 / .85)}
  .story-intro .eyebrow,.story-intro h2,.key{grid-column:1 / -1}
  .chapter,.chapter.flip{grid-template-columns:1fr;min-height:auto;padding:12vh var(--pad) 12vh calc(var(--pad) + 22px)}
  .ch-ph,.ch-ph.tall,.chapter.flip .ch-ph,.chapter.flip .ch-ph.tall{grid-column:1 / -1;order:1;aspect-ratio:4 / 3}
  .ch-tx,.chapter.flip .ch-tx{grid-column:1 / -1;order:2;margin-top:26px}
  /* the thread still swings side to side: every other knot sits on the right */
  .ch-tx{width:100%;max-width:560px}
  .chapter.flip{padding:12vh calc(var(--pad) + 22px) 12vh var(--pad)}
  .chapter.flip .ch-tx{justify-self:end}
  .chapter.flip .note{grid-template-columns:1fr auto;max-width:none}
  .chapter.flip .knot{order:2}
  .facts{grid-template-columns:1fr}
  .house-intro{width:min(520px, 84vw)}
  .room{height:auto;width:min(84vw, 520px)}
  .room .f{height:auto}
  .room img{width:100%;height:auto}
  .scores{grid-column:1 / -1}
  .proof-r{grid-column:1 / -1;margin-top:40px}
  .villas{padding:12vh var(--pad) 10vh}
  .villas h2,.vl-sub{grid-column:1 / -1}
  .duo{flex-direction:column;height:auto}
  .duo-card{flex:none;height:min(70svh, 560px)}
  .house-intro.second{width:min(560px, 92vw)}
  .walk-nav{bottom:calc(12px + env(safe-area-inset-bottom, 0px));padding:4px}
  .walk-nav a{min-height:32px;padding:0 12px;font-size:12px}
  .z-copy{top:auto;bottom:8vh;transform:none}
  .zoom::after{background:linear-gradient(0deg, rgb(55 85 66 / .92) 0%, rgb(55 85 66 / .45) 60%, rgb(55 85 66 / 0) 85%)}
  .portrait{grid-column:1 / span 9}
  .hosts-tx,.faq,.owners-tx{grid-column:1 / -1}
  .hosts-tx{margin-top:30px}
  .owners .eyebrow{grid-column:1 / -1;margin-bottom:18px}
  .contact{grid-template-columns:1fr}
  .contact .full{grid-column:auto}
  .foot-cols > div{grid-column:span 6}
  .mbar{display:block}
}
@media (max-width: 560px){
  .score{font-size:clamp(84px, 25vw, 130px)}
  .cats div,.cats-h{grid-template-columns:1fr 50px 100px}
  .foot-cols > div{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* the walk-through intros: "Request availability" plus a link to the villa's own page */
.intro-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.text-link{display:inline-flex;gap:8px;align-items:center;font:500 14px/1.3 var(--sans);text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;transition:background-size .5s var(--ease)}
.text-link:hover{background-size:0% 1px;background-position:100% 100%}
.z-more{margin-top:22px;color:var(--cream)}   /* the Pinilla zoom's link to the guide */

/* the homepage's doors to the tabs' own pages: the full trip, and the villas side by side */
.story-more{grid-column:4 / span 8;justify-self:start;margin-top:28px}
.vl-sub .text-link{display:flex;width:max-content;max-width:100%;margin-top:16px;color:var(--cream)}
@media (max-width: 900px){ .story-more{grid-column:1 / -1} }

/* ========== between the tabs: page transitions ==========
   Browsers with cross-page view transitions (Chrome, Edge, Brave, Safari 18.2+) move between pages like this; elsewhere,
   and with reduced motion, pages simply load. The head script in Base.astro picks the kind:
   - curtain: the page you leave sinks, brand green rises over it with the logo writing in and the sloth swinging,
     then lifts off the new page;
   - photo: the villa card you clicked grows into that villa's hero while the rest of the page crossfades. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} }
html.vt-in::view-transition-old(root){animation:vt-sink .75s cubic-bezier(.76,0,.24,1) both;mix-blend-mode:normal}
html.vt-in::view-transition-new(root){animation:vt-rise .75s cubic-bezier(.76,0,.24,1) both;mix-blend-mode:normal}
@keyframes vt-sink{to{transform:translateY(-12vh);filter:brightness(.45)}}
@keyframes vt-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.vt-curtain{display:none}
html.vt-in .vt-curtain{position:fixed;inset:0;z-index:450;display:grid;place-items:center;background:var(--green);pointer-events:none;animation:vt-lift .85s cubic-bezier(.76,0,.24,1) .72s both}
.vt-curtain .logo-anim{width:min(260px, 56vw)}
html.vt-in .vt-curtain .lw{animation:vt-write .8s cubic-bezier(.65,0,.35,1) .08s both}
html.vt-in .vt-curtain .ls{animation:vt-swing 1.7s ease-out .3s both}
@keyframes vt-lift{to{clip-path:inset(0 0 100% 0)}}
@keyframes vt-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-swing{0%{opacity:0;rotate:40deg}10%{opacity:1}30%{rotate:-15deg}50%{rotate:8deg}68%{rotate:-4deg}84%{rotate:1.5deg}100%{opacity:1;rotate:0deg}}
html.vt-photo .vp-hero{view-transition-name:villa-door}
html.vt-photo::view-transition-group(villa-door){animation-duration:1s;animation-timing-function:cubic-bezier(.76,0,.24,1);overflow:clip}
html.vt-photo::view-transition-old(villa-door),html.vt-photo::view-transition-new(villa-door){height:100%;object-fit:cover;animation-duration:.9s}
html.vt-photo::view-transition-old(root){animation:none;mix-blend-mode:normal}   /* the old page stays put underneath, */
html.vt-photo::view-transition-new(root){animation:vt-fade-in .55s ease .1s both;mix-blend-mode:normal}   /* the new one fades in over it: no dip */
@keyframes vt-fade-in{from{opacity:0}}
/* a number counting up (flourish.js) keeps its final width, so the words after it stay put */
.num{display:inline-block;text-align:right}