/* ==========================================================================
   True Vacation · pages other than the homepage (the villa pages for now).
   Same brand book as site.css: Cormorant Garamond for titles, Montserrat for text, the eight brand colours.
   ========================================================================== */

.vp{background:var(--cream);color:var(--ink)}
.vp h2 em{font-style:italic}
.vp-head{display:grid;gap:16px;margin-bottom:clamp(32px, 4.4vw, 64px)}
.vp-head h2,.vg-l h2,.loc-tx h2{margin:0;font:500 clamp(44px, 5.6vw, 96px)/.95 var(--serif);letter-spacing:-.025em}
.vp-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- hero: the house, full bleed ---------- */
.vp-hero{position:relative;display:grid;align-items:end;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--green);color:var(--cream)}
.vp-hero-ph{position:absolute;inset:0;margin:0}
.vp-hero-ph img{position:absolute;left:0;top:0;width:100%;height:112%;object-fit:cover}
.vp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgb(20 33 25 / .5) 0%, rgb(20 33 25 / 0) 26%, rgb(20 33 25 / .12) 48%, rgb(20 33 25 / .84) 100%)}
.vp-hero-tx{position:relative;z-index:1;display:grid;gap:18px;justify-items:start;max-width:1180px;padding:0 var(--pad) clamp(40px, 8vh, 92px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;font:400 12.5px/1.3 var(--sans);color:rgb(248 240 229 / .78)}
.crumbs a{color:inherit;text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;transition:background-size .5s var(--ease)}
.crumbs a:hover{background-size:100% 1px}
/* phones: the headline block is taller than the screen's lower third, so the shade climbs higher and the small lines get a soft shadow
   (the eyebrow over NAUA's white walls, the breadcrumbs over the Pinilla aerial) */
.vp-hero .crumbs,.vp-hero .eyebrow{text-shadow:0 1px 14px rgb(20 33 25 / .6)}
@media (max-width: 700px){
  .vp-hero::after{background:linear-gradient(180deg, rgb(20 33 25 / .55) 0%, rgb(20 33 25 / .12) 20%, rgb(20 33 25 / .5) 40%, rgb(20 33 25 / .9) 100%)}
}
.vp-hero h1{margin:0;font:500 clamp(72px, 12vw, 212px)/.86 var(--serif);letter-spacing:-.04em;text-shadow:0 2px 40px rgb(20 33 25 / .35)}
.vp-hero h1 em{font-style:italic;color:var(--sand)}
.vp-sub{margin:4px 0 0;max-width:52ch;font-size:clamp(16px, 1.3vw, 19px);line-height:1.55;color:rgb(248 240 229 / .92)}
.vp-hero .vp-row{margin-top:10px}
.vp-rate{font:500 13.5px/1.3 var(--sans);color:var(--cream);text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;transition:background-size .5s var(--ease)}
.vp-rate:hover{background-size:0% 1px;background-position:100% 100%}

/* ---------- at a glance ---------- */
.vp-glance{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:start;padding:18vh var(--pad) 12vh}
.vg-l{grid-column:1 / span 6;display:grid;gap:24px;justify-items:start}
.vg-intro{margin:0;max-width:50ch;font-size:18px;line-height:1.62}
.vg-facts{grid-column:8 / -1;margin:0;border-top:1px solid rgb(55 58 54 / .3)}
.vg-facts div{position:relative;display:grid;grid-template-columns:minmax(110px, 34%) 1fr;gap:16px;align-items:baseline;padding:15px 0}
.vg-facts div::after,.vp-cats div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(55 58 54 / .16);transform-origin:0 50%;transform:scaleX(var(--draw, 1))}
.vg-facts dt{font:500 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;opacity:.8}
.vg-facts dd{margin:0;font:500 clamp(20px, 1.7vw, 27px)/1.2 var(--serif)}
/* under the facts: where they come from and when they were checked */
.vg-src{grid-column:8 / -1;margin:14px 0 0;font-size:13.5px;line-height:1.5;opacity:.8}

/* ---------- photos: an editorial grid; every photo opens in the viewer ---------- */
.vp-gallery{padding:6vh var(--pad) 18vh}
.vp-grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:clamp(22px, 3vw, 46px) var(--gap);align-items:start}
.vp-shot{margin:0}
.vp-shot.w{grid-column:span 7}
.vp-shot.n{grid-column:span 5;margin-top:14vh}
.vp-shot.t{grid-column:span 4}
.vp-shot.h{grid-column:span 6}
.vp-shot .f{overflow:hidden;border-radius:6px;aspect-ratio:3 / 2;background:var(--sand);cursor:zoom-in}
.vp-shot.n .f,.vp-shot.t .f{aspect-ratio:4 / 5}
.vp-shot .f:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
.vp-shot img{width:100%;height:100%;object-fit:cover}
html.motion .vp-shot img{scale:1.14}   /* room to drift inside the frame */
.vp-shot figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:400 12.5px/1.3 var(--sans)}
.vp-shot figcaption span:last-child{opacity:.8}

/* ---------- bedrooms ---------- */
.vp-rooms{background:var(--sand);padding:16vh var(--pad)}
.vr-list{list-style:none;counter-reset:room;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);border-top:1px solid rgb(55 58 54 / .3)}
.vr-list li{counter-increment:room;display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:22px 0;border-bottom:1px solid rgb(55 58 54 / .16)}
.vr-list li::before{content:counter(room, decimal-leading-zero);grid-row:span 2;font:italic 500 40px/1 var(--serif);opacity:.5}
.vr-list b{font:500 clamp(22px, 2vw, 30px)/1.12 var(--serif)}
.vr-list span{margin-top:6px;font-size:14.5px;opacity:.82}
.vr-note{margin:28px 0 0;max-width:62ch;font-size:15px}

/* ---------- what's included ---------- */
.vp-inc{background:var(--green);color:var(--cream);padding:16vh var(--pad)}
.vp-inc h2 em{color:var(--caramel)}
.vi-cols{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:40px clamp(24px, 3vw, 56px)}
.vi-cols h3{margin:0 0 14px;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.vi-cols ul{list-style:none;margin:0;padding:0;border-top:1px solid rgb(248 240 229 / .22)}
.vi-cols li{padding:13px 0;border-bottom:1px solid rgb(248 240 229 / .12);font-size:15.5px;line-height:1.45}
/* the line under the included lists (the Beach Club's guest rate) */
.vi-note{margin:28px 0 0;max-width:62ch;font-size:14.5px;line-height:1.5;opacity:.86}

/* ---------- ratings, as text with a link to Airbnb ---------- */
.vp-proof{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:end;padding:16vh var(--pad);background:var(--caramel);color:#1E201D}
.vp-proof .eyebrow{grid-column:1 / -1;margin-bottom:22px}
.vp-score{grid-column:1 / span 6;margin:0;font:500 clamp(140px, 20vw, 330px)/.8 var(--serif);letter-spacing:-.05em}
.vp-score small{display:block;margin-top:clamp(40px, 5vw, 84px);font:400 15px/1.4 var(--sans);letter-spacing:0}   /* room for the 9's descender */
.vpr-r{grid-column:8 / -1;display:grid;gap:26px;justify-items:start}
.vp-cats{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;width:100%;margin:0;border-top:1px solid rgb(30 32 29 / .3)}
.vp-cats div{position:relative;display:flex;justify-content:space-between;padding:12px 0}
.vp-cats div::after{background:rgb(30 32 29 / .2)}
.vp-cats dt{font:400 12.5px/1 var(--sans)}
.vp-cats dd{margin:0;font:500 24px/1 var(--serif)}
.vp-proof .pill-ink{background:var(--green);color:var(--cream)}
.vp-proof .pill-ink:hover{background:var(--ink)}

/* ---------- where it is ---------- */
.vp-where{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:center;padding:18vh var(--pad) 10vh}
.loc-ph{grid-column:1 / span 6;position:relative;margin:0;overflow:hidden;border-radius:6px;aspect-ratio:4 / 5;background:var(--sand)}
.loc-ph img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover}
.loc-tx{grid-column:8 / -1;display:grid;gap:22px;justify-items:start}
.loc-tx > p{margin:0;max-width:46ch;font-size:17px;line-height:1.6}
.loc-steps{list-style:none;width:100%;margin:0;padding:0;display:grid;gap:10px;font:400 14px/1.35 var(--sans)}
.loc-steps li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding-bottom:10px;border-bottom:1px solid rgb(55 58 54 / .12)}
.loc-steps li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--turq)}
.loc-steps b{min-width:17ch;font-weight:500}
.loc-tx > .loc-note{font-size:14.5px;opacity:.78}

/* ---------- questions (the homepage FAQ, on cream) ---------- */
.vp-faq{padding-top:12vh}
.vp-faq .faq-l{gap:18px}

/* ---------- the other villa ---------- */
.vp-next{background:var(--green);padding:14vh var(--pad) 0}
.vn-card{position:relative;display:block;height:min(74vh, 660px);overflow:hidden;border-radius:6px;color:var(--cream);text-decoration:none}
.vn-card img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transition:scale 1.4s var(--ease)}
.vn-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgb(20 33 25 / 0) 34%, rgb(20 33 25 / .8))}
.vn-card > div{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:12px;justify-items:start;padding:clamp(20px, 3vw, 46px)}
.vn-card .eyebrow{color:var(--butter)}
.vn-card h2{margin:0;font:500 clamp(48px, 6.4vw, 110px)/.92 var(--serif);letter-spacing:-.03em}
.vn-card p{margin:0;max-width:46ch;font-size:15px;line-height:1.5}
.vn-card:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
@media (hover: hover){
  .vn-card:hover img{scale:1.04}
  .vn-card:hover .duo-go{background:rgb(55 85 66 / .9)}
  .vn-card:hover .duo-go .arr{transform:translateX(4px)}
}

/* ---------- the request ---------- */
.vp-cta{position:relative;overflow:hidden;display:grid;gap:24px;justify-items:start;padding:16vh var(--pad) 18vh;background:var(--green);color:var(--cream)}
.vp-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 88% 10%, rgb(194 147 104 / .16), rgb(194 147 104 / 0) 70%)}
.vp-cta > *{position:relative}
.vp-cta h2{margin:0;max-width:14ch;font:500 clamp(48px, 6.6vw, 116px)/.94 var(--serif);letter-spacing:-.03em}
.vp-cta h2 em{font-style:italic;color:var(--caramel)}
.vp-cta > p{margin:0;max-width:52ch;font-size:17px;line-height:1.55;color:rgb(248 240 229 / .85)}
.vp-cta .text-link{color:var(--cream)}

/* ---------- tablets and phones ---------- */
@media (max-width: 900px){
  .vg-l,.vg-facts,.vg-src,.vp-score,.vpr-r,.loc-ph,.loc-tx{grid-column:1 / -1}
  .vg-facts{margin-top:34px}
  .vp-grid{grid-template-columns:1fr 1fr;grid-auto-flow:dense}
  .vp-shot.w,.vp-shot.h{grid-column:span 2}
  .vp-shot.n,.vp-shot.t{grid-column:span 1;margin-top:0}
  .vr-list{grid-template-columns:1fr}
  .vi-cols{grid-template-columns:1fr}
  .vpr-r{margin-top:36px}
  .loc-ph{aspect-ratio:4 / 3;margin-bottom:24px}
  .vp-faq .faq{margin-top:20px}
}
@media (max-width: 560px){
  .vp-hero h1{font-size:clamp(60px, 18vw, 96px)}
  .vg-facts div{grid-template-columns:1fr;gap:4px}
  .vp-cats{grid-template-columns:1fr}
  .vp-score{font-size:clamp(110px, 34vw, 150px)}
  .vr-list li{grid-template-columns:48px 1fr}
  .vr-list li::before{font-size:32px}
}

/* ==========================================================================
   The owners page (/owners/, /es/propietarios/)
   ========================================================================== */
.ow-hero h1{max-width:16ch;font-size:clamp(46px, 6.6vw, 116px);line-height:.94;letter-spacing:-.03em}
.ow-hero .vp-hero-ph img{object-position:72% 50%}   /* the house sits to the right of the headline */
.ow-hero::after,.pn-hero::after{background:linear-gradient(90deg, rgb(20 33 25 / .78) 0%, rgb(20 33 25 / .42) 42%, rgb(20 33 25 / 0) 72%), linear-gradient(180deg, rgb(20 33 25 / .45) 0%, rgb(20 33 25 / 0) 24%, rgb(20 33 25 / 0) 55%, rgb(20 33 25 / .7) 100%)}
@media (max-width: 900px){ .ow-hero::after,.pn-hero::after{background:linear-gradient(180deg, rgb(20 33 25 / .5) 0%, rgb(20 33 25 / .1) 26%, rgb(20 33 25 / .45) 52%, rgb(20 33 25 / .9) 100%)} }
.ow-lead{margin:6px 0 0;max-width:62ch;font-size:17px;line-height:1.6}

/* ---------- why us, with the two villas' ratings beside it ---------- */
.ow-intro{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:start;padding:18vh var(--pad) 14vh}
.oi-l{grid-column:1 / span 7;display:grid;gap:22px;justify-items:start}
.oi-l h2{margin:0 0 6px;font:500 clamp(44px, 5.4vw, 92px)/.96 var(--serif);letter-spacing:-.025em}
.oi-p{margin:0;max-width:56ch;font-size:17.5px;line-height:1.62}
.oi-proof{grid-column:9 / -1;position:sticky;top:120px;display:grid;gap:0;border-top:1px solid rgb(55 58 54 / .3);padding-top:18px}
.oi-proof .eyebrow{margin-bottom:10px}
.oi-villa{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgb(55 58 54 / .14);color:inherit;text-decoration:none}
.oi-score{font:500 clamp(34px, 3vw, 46px)/1 var(--serif);letter-spacing:-.02em}
.oi-name{display:grid;gap:4px;font:500 20px/1.15 var(--serif)}
.oi-name small{font:400 12.5px/1.35 var(--sans);opacity:.72}
.oi-villa .arr{transition:transform .45s var(--ease)}
.oi-villa:hover .arr{transform:translateX(5px)}
.oi-hosting{margin:16px 0 0;font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.8}

/* ---------- benefits ---------- */
.ow-benefits{background:var(--sand);padding:16vh var(--pad)}
.ob-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(28px, 3vw, 46px) var(--gap)}
.ob-grid li{position:relative;display:grid;gap:12px;align-content:start;padding-top:22px}
.ob-grid li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgb(55 58 54 / .32);transform-origin:0 50%;transform:scaleX(var(--draw, 1))}
.ob-n{font:italic 500 38px/1 var(--serif);opacity:.7}
.ob-grid h3{margin:0;font:500 clamp(24px, 2.1vw, 32px)/1.1 var(--serif)}
.ob-grid p{margin:0;font-size:15.5px;line-height:1.58;opacity:.88}

/* ---------- full-bleed photo bands between chapters ---------- */
.ow-band{position:relative;height:clamp(320px, 72vh, 760px);margin:0;overflow:hidden;background:var(--green)}
.ow-band img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}

/* ---------- how we work: four steps on a line that draws as you read ---------- */
.ow-how{background:var(--green);color:var(--cream);padding:16vh var(--pad)}
.ow-how h2 em{color:var(--caramel)}
.oh-wrap{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:start}
.oh-track{grid-column:1 / span 8;position:relative}
.oh-line{position:absolute;left:23px;top:24px;bottom:24px;width:1px;background:rgb(248 240 229 / .18)}
.oh-line i{position:absolute;inset:0;background:var(--butter);transform-origin:50% 0;transform:scaleY(var(--grow, 1))}
.oh-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px, 5vh, 64px)}
.oh-steps > li{position:relative;display:grid;gap:10px;padding-left:76px}
.oh-n{position:absolute;left:0;top:-4px;display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 1px rgb(248 240 229 / .45);font:italic 500 18px/1 var(--serif)}
.oh-steps h3{margin:0;font:500 clamp(28px, 2.6vw, 40px)/1.05 var(--serif)}
.oh-steps p{margin:0;max-width:58ch;font-size:16px;line-height:1.6;color:rgb(248 240 229 / .86)}
.oh-steps ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.oh-steps ul li{display:flex;gap:12px;align-items:baseline}
.oh-steps ul li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--turq);transform:translateY(-2px)}
.oh-expect{grid-column:10 / -1;position:sticky;top:120px;padding:26px;border-radius:14px;background:rgb(248 240 229 / .07);box-shadow:inset 0 0 0 1px rgb(248 240 229 / .14)}
.oh-expect h3{margin:0 0 14px;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.oh-expect ul{list-style:none;margin:0;padding:0}
.oh-expect li{padding:12px 0;border-top:1px solid rgb(248 240 229 / .14);font:500 19px/1.25 var(--serif)}

/* ---------- behind the scenes ---------- */
.ow-pillars{padding:16vh var(--pad)}
.op-cols{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:40px clamp(24px, 3vw, 56px)}
.op-col > h3{margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid rgb(55 58 54 / .3);font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.op-g{padding:20px 0;border-bottom:1px solid rgb(55 58 54 / .12)}
.op-g h4{margin:0 0 10px;font:500 clamp(21px, 1.8vw, 26px)/1.15 var(--serif)}
.op-g ul{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:14.5px;line-height:1.5;opacity:.86}

/* ---------- what sets us apart ---------- */
.ow-quote{background:var(--green);color:var(--cream);padding:16vh var(--pad) 14vh;display:grid;gap:40px}
.oq-text{margin:0;max-width:20ch;font:500 clamp(42px, 5.6vw, 96px)/1 var(--serif);letter-spacing:-.025em}
.oq-text em{font-style:italic;color:var(--caramel)}
.oq-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 34px;font-size:15px}
.oq-list li{display:flex;gap:12px;align-items:center}
.oq-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--turq)}

/* ---------- revenue and peace of mind ---------- */
.ow-value{background:var(--blush);padding:16vh var(--pad)}
.ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px clamp(28px, 4vw, 80px)}
.ov-cols h3{margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid rgb(55 58 54 / .32);font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ov-cols dl{margin:0}
.ov-cols dl div{padding:18px 0;border-bottom:1px solid rgb(55 58 54 / .14)}
.ov-cols dt{margin-bottom:6px;font:500 clamp(22px, 1.9vw, 28px)/1.15 var(--serif)}
.ov-cols dd{margin:0;font-size:15.5px;line-height:1.58;opacity:.88}

/* ---------- let's talk: the consultation form ---------- */
.ow-talk{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:var(--gap);align-items:start;padding:16vh var(--pad) 18vh;background:var(--green);color:var(--cream)}
.ow-talk::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%)}
.ot-l{grid-column:1 / span 5;position:relative;display:grid;gap:20px;justify-items:start}
.ot-l h2{margin:0;font:500 clamp(48px, 6vw, 104px)/.94 var(--serif);letter-spacing:-.03em}
.ot-l h2 em{font-style:italic;color:var(--caramel)}
.ot-l > p{margin:0;max-width:46ch;font-size:16.5px;line-height:1.6;color:rgb(248 240 229 / .86)}
.ot-l h3{margin:16px 0 0;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.ot-next{counter-reset:nx;list-style:none;margin:0;padding:0;width:100%;border-top:1px solid rgb(248 240 229 / .16)}
.ot-next li{counter-increment:nx;display:grid;grid-template-columns:40px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgb(248 240 229 / .16);font-size:15.5px;line-height:1.45}
.ot-next li::before{content:counter(nx, decimal-leading-zero);font:italic 500 20px/1.2 var(--serif);color:var(--butter)}
.ot-mail .text-link{color:var(--cream)}
.ot-r{grid-column:7 / -1;position:relative}
.ot-form fieldset{margin:0 0 30px;padding:0;border:0;min-width:0}
.ot-form legend{margin:0 0 16px;padding:0;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.ot-form .sub-q{margin-top:22px}
.ot-micro{margin:16px 0 0;max-width:52ch;font-size:13px;line-height:1.5;color:rgb(248 240 229 / .7)}
.ot-done[hidden]{display:none}
.ot-done{display:grid;gap:18px;justify-items:start;padding:32px 0}
.ot-done h3{margin:0;font:italic 500 clamp(46px, 5vw, 84px)/.95 var(--serif);letter-spacing:-.02em}
.ot-done p{margin:0;max-width:44ch;font-size:17px;line-height:1.55}
.ot-send.sending{opacity:.7;pointer-events:none}

@media (max-width: 900px){
  .oi-l,.oi-proof,.oh-track,.oh-expect,.ot-l,.ot-r{grid-column:1 / -1}
  .oi-proof,.oh-expect{position:static}
  .oi-proof{margin-top:36px}
  .ob-grid,.op-cols,.ov-cols{grid-template-columns:1fr}
  .oh-expect{margin-top:44px}
  .ot-r{margin-top:44px}
}
@media (max-width: 560px){
  .oh-steps > li{padding-left:60px}
  .oh-n{width:40px;height:40px;font-size:16px}
  .oh-line{left:20px}
}

/* ==========================================================================
   The Hacienda Pinilla guide (/hacienda-pinilla/) and Mau & Lau (/about/)
   They reuse the villa and owner sections above; these are the few extras.
   ========================================================================== */
.pn-beaches{background:var(--sand);padding:16vh var(--pad)}
.pn-wide{position:relative;margin:0 0 clamp(36px, 5vw, 64px);height:clamp(280px, 58vh, 620px);overflow:hidden;border-radius:6px;background:var(--green)}
.pn-wide img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.vp-where.flip .loc-ph{grid-column:7 / -1;order:2}
.vp-where.flip .loc-tx{grid-column:1 / span 5;order:1}
.vp-where + .vp-where{padding-top:6vh}
.vi-cols.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.pn-stay{background:var(--green);color:var(--cream);padding:16vh var(--pad)}
.pn-stay h2 em{color:var(--caramel)}

.ab-hello{padding-top:18vh}
.ab-mv{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px clamp(28px, 4vw, 80px);max-width:1100px;margin:0}
.ab-mv div{padding-top:16px;border-top:1px solid rgb(248 240 229 / .2)}
.ab-mv dt{margin-bottom:8px;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.ab-mv dd{margin:0;font-size:16.5px;line-height:1.6;color:rgb(248 240 229 / .88)}
.ab-own{margin:0 0 16px;font-size:15px;line-height:1.55;color:rgb(248 240 229 / .86)}
.oh-expect .text-link{color:var(--cream)}
.ab-phil{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:18px var(--gap);padding:18vh var(--pad) 14vh}
.ab-phil .eyebrow{grid-column:1 / -1}
.ab-phil h2{grid-column:1 / span 6;margin:0;font:500 clamp(44px, 5.4vw, 92px)/.96 var(--serif);letter-spacing:-.025em}
.ab-phil h2 em{font-style:italic}
.ab-phil > p:last-child{grid-column:8 / -1;align-self:end;margin:0;font-size:18px;line-height:1.62}

@media (max-width: 900px){
  .vp-where.flip .loc-ph,.vp-where.flip .loc-tx{grid-column:1 / -1}
  .vp-where.flip .loc-ph{order:0}
  .vp-where.flip .loc-tx{order:1}
  .vi-cols.two,.ab-mv{grid-template-columns:1fr}
  .ab-phil h2,.ab-phil > p:last-child{grid-column:1 / -1}
  .ab-hello .portrait{grid-column:1 / -1;max-width:420px}
}

/* ==========================================================================
   The trip (/the-trip/), the villas (/villas/) and plan my stay (/plan/)
   They reuse the homepage's story, statement, taglines, doors, ratings and planner (site.css)
   and the sections above; these are the extras.
   ========================================================================== */
/* ---------- the trip ---------- */
.tp-stay{background:var(--sand);color:var(--ink)}
.tp-stay h2 em{color:var(--green)}
.tp-compare{margin-top:clamp(26px, 3vw, 40px);color:var(--green)}
.oh-expect .tp-go{margin-top:22px}

/* ---------- the villas: a two-photo hero ---------- */
.vx-split{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--green)}
.vx-split figure{position:relative;margin:0;overflow:hidden}
.vx-split figcaption{position:absolute;left:var(--pad);top:clamp(96px, 14vh, 128px);z-index:2;max-width:calc(100% - var(--pad) * 2);font:500 11.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 18px rgb(20 33 25 / .6)}
.vx-hero::after{background:linear-gradient(90deg, rgb(20 33 25 / .74) 0%, rgb(20 33 25 / .4) 46%, rgb(20 33 25 / .06) 76%), linear-gradient(180deg, rgb(20 33 25 / .5) 0%, rgb(20 33 25 / 0) 26%, rgb(20 33 25 / .2) 50%, rgb(20 33 25 / .82) 100%)}
@media (max-width: 900px){ .vx-hero::after{background:linear-gradient(180deg, rgb(20 33 25 / .5) 0%, rgb(20 33 25 / .1) 26%, rgb(20 33 25 / .5) 50%, rgb(20 33 25 / .92) 100%)} }
.vx .villas{padding-top:14vh}

/* ---------- the villas, side by side ---------- */
.vx-compare{padding:16vh var(--pad) 14vh}
.vx-table{width:100%;border-collapse:collapse;table-layout:fixed}
.vx-table .vx-f{width:26%}
.vx-table thead th{padding:0 18px 20px 0;text-align:left;vertical-align:bottom;font:500 clamp(30px, 3.4vw, 56px)/.98 var(--serif);letter-spacing:-.02em}
.vx-table thead th a{color:inherit;text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;transition:background-size .5s var(--ease)}
.vx-table thead th a:hover{background-size:100% 1px}
.vx-table thead th em{font-style:italic}
.vx-table tbody th,.vx-table tbody td{padding:17px 18px 17px 0;vertical-align:baseline;text-align:left;border-top:1px solid rgb(55 58 54 / .16)}
.vx-table tbody tr:first-child > *{border-top-color:rgb(55 58 54 / .34)}
.vx-table tbody th{font:500 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;opacity:.8}
.vx-table td{font:500 clamp(18px, 1.5vw, 23px)/1.3 var(--serif)}
.vx-table td.ask{font-style:italic;opacity:.8}

/* ---------- what comes with both ---------- */
.vx-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(24px, 4vw, 80px);border-top:1px solid rgb(248 240 229 / .22)}
.vx-svc li{display:grid;grid-template-columns:56px 1fr;align-items:baseline;padding:20px 0;border-bottom:1px solid rgb(248 240 229 / .14);font:500 clamp(21px, 1.9vw, 28px)/1.25 var(--serif)}
.vx-svc li span{font:italic 500 18px/1 var(--serif);color:var(--butter)}
.vx-help{margin-top:clamp(36px, 5vw, 64px)}

/* ---------- plan my stay: the planner opens the page ---------- */
.pl .plan{padding-top:clamp(124px, 18vh, 210px)}
.plan-head .crumbs{grid-column:1 / -1;margin-bottom:14px}
.plan-head h1{grid-column:1 / span 9;margin:0;font:500 clamp(52px, 7vw, 124px)/.92 var(--serif);letter-spacing:-.03em}
.plan-head h1 em{font-style:italic;color:var(--caramel)}
.pl-compare{grid-column:1 / -1;justify-self:start;margin-top:14px;color:var(--cream)}
.pl-after{padding:16vh var(--pad) 12vh}
.pl-talk{background:var(--sand);padding-bottom:18vh}
.pl-talk .loc-steps b{min-width:10ch}
.pl-talk .loc-steps .text-link{font-size:15px}

@media (max-width: 900px){
  .plan-head h1{grid-column:1 / -1}
  .vx-svc{grid-template-columns:1fr}
}
@media (max-width: 700px){
  /* the table reads row by row: each feature, then both villas under it, each labelled */
  .vx-table,.vx-table tbody{display:block}
  .vx-table thead{display:none}
  .vx-table tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;border-top:1px solid rgb(55 58 54 / .16)}
  .vx-table tbody tr:first-child{border-top-color:rgb(55 58 54 / .34)}
  .vx-table tbody th{grid-column:1 / -1;padding:16px 0 8px;border:0}
  .vx-table tbody td{padding:0 0 16px;border:0;font-size:18px}
  .vx-table tbody td::before{content:attr(data-v);display:block;margin-bottom:4px;font:500 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;font-style:normal;opacity:.55}
  .vx-split figcaption{font-size:10px;letter-spacing:.1em}
}