/* ============================================================
   Tierra en Armonía — brand system (from the official kit)
   Body: Montserrat  ·  Display/wordmark: Cormorant (substitute
   for the custom display until we get the real font/logo files)
   ============================================================ */
:root{
  /* official palette */
  --luz:#F7F4EC;       /* Luz del Amanecer — cream, primary background   */
  --arena:#DDD1BC;     /* Arena Viva — sand                              */
  --madera:#B28A62;    /* Madera Tropical — wood tan                     */
  --bronce:#8B7054;    /* Bronce Natural — SIGNATURE                     */
  --verde:#5C705E;     /* Verde Selva — jungle green                     */
  --palma:#8B977D;     /* Hoja de Palma — sage                           */
  --pacifico:#5F9098;  /* Pacífico — teal                                */
  --sol:#D7A552;       /* Sol del Pacífico — gold                        */
  --carbon:#403A35;    /* Carbón Volcánico — text                        */
  --line:rgba(64,58,53,0.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--luz);color:var(--carbon);
  font-family:'Montserrat',sans-serif;font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Cormorant',serif;font-weight:400;line-height:1.04;letter-spacing:.005em}
em{font-style:italic}
a{color:inherit}

/* keyboard focus: currentColor ring always contrasts with its own section (carbon on cream, cream on green/carbon) */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* skip to content (first focusable element on every page) */
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;
  background:var(--bronce);color:var(--luz);font-family:'Montserrat',sans-serif;
  font-size:13px;letter-spacing:.06em;padding:11px 18px;border-radius:0 0 6px 6px;
  text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:0}

/* bilingual toggle — house standard */
.lang-en,.lang-es{display:contents}
:root[data-lang="en"] .lang-es{display:none}
:root[data-lang="es"] .lang-en{display:none}
.lang-toggle{
  position:fixed;top:18px;right:18px;z-index:100;
  display:flex;gap:2px;padding:4px;
  background:rgba(247,244,236,0.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:999px;
}
.lang-toggle button{
  border:none;background:none;cursor:pointer;font-family:'Montserrat',sans-serif;
  font-size:12px;letter-spacing:.08em;padding:6px 13px;border-radius:999px;
  color:var(--carbon);opacity:.6;transition:all .25s ease;
}
.lang-toggle button.active{background:var(--bronce);color:var(--luz);opacity:1}
/* over the homepage hero: ghost the toggle so it matches the nav links' weight, not a heavy pill.
   reverts to the solid cream pill once the nav solidifies past the hero */
.lang-toggle{transition:background .38s ease,border-color .38s ease}
body.hero-nav-top .lang-toggle{background:transparent;border-color:rgba(247,244,236,.4);
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.hero-nav-top .lang-toggle button{color:var(--luz);opacity:.82;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body.hero-nav-top .lang-toggle button.active{background:rgba(247,244,236,.18);color:var(--luz);opacity:1}


/* ---------- minimal sticky nav (slides in on scroll) ---------- */
.sitenav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:clamp(14px,3vw,30px);
  padding:13px 136px 13px clamp(16px,4vw,34px);
  background:rgba(247,244,236,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transform:translateY(-105%);transition:transform .38s ease;
}
.sitenav.show{transform:none}
.sitenav .mark{
  font-family:'Cormorant',serif;font-size:clamp(1.02rem,2.3vw,1.24rem);
  color:var(--bronce);text-decoration:none;white-space:nowrap;margin-right:auto;
}
.sitenav a.lnk{
  font-family:'Montserrat',sans-serif;font-size:clamp(10px,1.5vw,11.5px);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--carbon);
  text-decoration:none;opacity:.72;transition:opacity .2s ease;white-space:nowrap;
}
.sitenav a.lnk:hover{opacity:1;color:var(--bronce)}
@media (max-width:640px){
  .sitenav .mark{display:none}
  .sitenav{gap:16px;justify-content:flex-start}
  .sitenav a.lnk{letter-spacing:.12em}
}

/* homepage: nav rides transparent over the hero, then solidifies to cream past it */
.sitenav.hero-overlay{
  transform:none;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .38s ease,border-color .38s ease;
}
.sitenav.hero-overlay::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(28,24,20,.28),rgba(28,24,20,0));
  transition:opacity .38s ease;}
.sitenav.hero-overlay .mark{color:var(--luz);text-shadow:0 1px 12px rgba(0,0,0,.4);transition:color .38s ease;}
.sitenav.hero-overlay a.lnk{color:var(--luz);opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.4);transition:color .38s ease,opacity .2s ease;}
.sitenav.hero-overlay a.lnk:hover{color:var(--luz);opacity:1;}
.sitenav.hero-overlay.solid{
  background:rgba(247,244,236,.88);border-bottom-color:var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.sitenav.hero-overlay.solid::before{opacity:0;}
.sitenav.hero-overlay.solid .mark{color:var(--bronce);text-shadow:none;}
.sitenav.hero-overlay.solid a.lnk{color:var(--carbon);opacity:.72;text-shadow:none;}
.sitenav.hero-overlay.solid a.lnk:hover{color:var(--bronce);opacity:1;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronce);
}

/* ---------- wordmark lockup ---------- */
.wordmark{text-align:center;line-height:1}
.wordmark .pre{
  display:block;font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:clamp(.7rem,1.6vw,.9rem);letter-spacing:.5em;text-transform:uppercase;
  color:var(--bronce);padding-left:.5em;margin-bottom:.35em;
}
.wordmark .name{
  display:block;font-family:'Cormorant',serif;font-weight:500;
  font-size:clamp(3.4rem,12vw,7.4rem);color:var(--bronce);letter-spacing:.01em;
}
.wordmark .sub{
  display:block;font-family:'Montserrat',sans-serif;font-weight:300;
  font-size:clamp(.62rem,1.4vw,.74rem);letter-spacing:.32em;text-transform:uppercase;
  color:var(--carbon);opacity:.62;margin-top:1.1em;
}

/* ---------- hero (looping video, lockup anchored to the ocean horizon) ---------- */
/* full viewport height: no sliver of the next section shows under the hero */
.hero{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  background-color:var(--arena);background-size:cover;background-position:center top;
}
/* anchor the media to the top so vertical overflow is cropped off the bottom (open water),
   never off the top (the palapa fringe, which must survive every viewport) */
.hero__media{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0%;}
/* top scrim: reads as more palapa depth and keeps the white nav legible against the sky */
.hero__scrim-top{position:absolute;inset:0 0 auto 0;height:180px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,24,20,.55) 0%,rgba(28,24,20,.28) 45%,rgba(28,24,20,0) 100%);}
/* bottom scrim: barely-there bottom-up gradient so the subtitle holds on the water */
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.25) 100%);}

/* the lockup is a zero-height line pinned to the horizon: --horizon-y is set in px by the
   inline script (media-box aware); the % is a first-paint fallback before the script runs */
.hero__lockup{--name-size:clamp(3.4rem,12vw,7.4rem);
  position:absolute;top:var(--horizon-y,56.3%);left:50%;transform:translateX(-50%);
  width:min(92vw,1000px);z-index:3;text-align:center;pointer-events:none;
  text-shadow:0 1px 4px rgba(20,14,8,.55),0 2px 24px rgba(20,14,8,.5);}
/* pre + name sit above the horizon; the offset drops the wordmark so Armonía's baseline
   rests just on top of the line (the +2px lifts it a hair above, ~0.5mm) */
.hero__lockup .wordmark{position:absolute;left:0;right:0;bottom:calc(var(--name-size) * -0.2 + 2px);}
/* "TIERRA EN": a step larger, tracked out to roughly half of Armonía's width */
.hero .wordmark .pre{color:var(--luz);font-size:clamp(1rem,2.35vw,1.32rem);
  font-weight:500;letter-spacing:.55em;padding-left:.55em;margin-bottom:.02em;}
.hero .wordmark .name{color:var(--luz);font-size:var(--name-size);}
/* subtitle sits below the horizon over the water; text-shadow only, no backing bar */
.hero__sub{position:absolute;left:0;right:0;top:clamp(14px,4vh,40px);margin:0;
  font-family:'Montserrat',sans-serif;font-weight:500;color:var(--luz);
  font-size:clamp(.8rem,1.6vw,.94rem);letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(20,14,8,.95),0 2px 12px rgba(20,14,8,.85),0 0 26px rgba(20,14,8,.6);}

/* phones only: serve the still, not the video (iOS blocks autoplay in low power, saves data);
   desktops always get the moving hero, including reduce-motion machines. Framed identically
   to the video (top-anchored). */
@media (max-width:768px){
  .hero__media{display:none;}
  .hero{background-position:center top;
    background-image:url('/assets/images/hero-1400w.jpg');
    background-image:-webkit-image-set(url('/assets/images/hero-1400w.jpg') 1x,url('/assets/images/hero-2000w.jpg') 2x);
    background-image:image-set(url('/assets/images/hero-1400w.jpg') 1x,url('/assets/images/hero-2000w.jpg') 2x);}
}

/* ---------- section rhythm ---------- */
section{padding:clamp(72px,11vw,132px) 0}
.section-head .eyebrow{display:block;margin-bottom:1em}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--carbon);max-width:18ch;margin-bottom:.5em}
/* small instruction line under a heading (e.g. "Click any photo to see more") */
.section-head .pick-hint{font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:clamp(.92rem,1.5vw,1.04rem);letter-spacing:.01em;color:var(--bronce);margin:-.1em 0 0}
.lede{font-size:clamp(1.2rem,2.3vw,1.6rem);font-family:'Cormorant',serif;font-weight:400;line-height:1.42;color:var(--carbon)}
.body-copy{font-size:1.02rem;color:rgba(64,58,53,.82);margin-top:1.2em;max-width:60ch;font-weight:300}
.body-copy.note{margin-top:1.8em;padding-left:1.1em;border-left:2px solid var(--bronce);font-style:italic;color:rgba(64,58,53,.72)}

/* ---------- collection gallery ---------- */
.collection{background:var(--luz)}
.homes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.home{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/5;
  display:flex;align-items:flex-end;padding:26px;color:var(--luz);text-decoration:none;
  background-size:cover;background-position:center;transition:transform .3s ease}
a.home:hover{transform:translateY(-3px)}
.home.feature{grid-column:1 / -1;aspect-ratio:16/9}
/* stronger scrim so names/specs stay legible over pale or busy hero images (§3b) */
.home::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,0) 58%,rgba(20,17,14,.30) 78%,rgba(20,17,14,.86) 100%)}
.home .tag{position:relative;z-index:2}
.home .nm{font-family:'Cormorant',serif;font-weight:500;font-size:1.7rem;display:block;line-height:1.05;text-shadow:0 1px 12px rgba(20,14,8,.5)}
.home .by{font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 10px rgba(20,14,8,.5)}
.home .spec{display:block;margin-top:6px;font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(247,244,236,.82);text-shadow:0 1px 10px rgba(20,14,8,.55),0 1px 3px rgba(0,0,0,.45)}

/* ---------- about / story ---------- */
.about{background:var(--verde);color:var(--luz)}
.about .eyebrow{color:var(--sol)}
.about h2{color:var(--luz)}
.about .lede{color:rgba(247,244,236,.94)}
.about .body-copy{color:rgba(247,244,236,.74)}
.about .aerial{max-width:600px;margin:46px auto 6px;text-align:center}
.about .aerial figcaption{margin-top:1.1em;font-family:'Cormorant',serif;font-style:italic;font-size:1.18rem;line-height:1.4;color:rgba(247,244,236,.84)}
.landmap{position:relative;border-radius:4px;box-shadow:0 20px 54px rgba(0,0,0,.30)}
.landmap>img{width:100%;display:block;border-radius:4px;aspect-ratio:964/1100}
.landmap .pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;display:grid;place-items:center;z-index:2}
.pin-dot{--c:215,165,82;position:relative;width:13px;height:13px;padding:0;border:0;appearance:none;-webkit-appearance:none;border-radius:50%;background:rgb(var(--c));box-shadow:0 1px 5px rgba(0,0,0,.55);transition:transform .2s ease;cursor:pointer;animation:pinpulse 2.8s ease-out infinite}
/* invisible padded hit area so the small dot is easy to tap/click */
.pin-dot::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.pin-space .pin-dot{--c:95,144,152}
.pin-private .pin-dot{--c:221,209,188}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(var(--c),.55),0 1px 5px rgba(0,0,0,.55)}70%{box-shadow:0 0 0 10px rgba(var(--c),0),0 1px 5px rgba(0,0,0,.55)}100%{box-shadow:0 0 0 0 rgba(var(--c),0),0 1px 5px rgba(0,0,0,.55)}}
.pin:hover .pin-dot,.pin.open .pin-dot{transform:scale(1.3);animation:none}
.pin-dot:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(0,0,0,.5)}
.pin-card{position:absolute;bottom:140%;left:50%;transform:translateX(-50%) translateY(6px);width:132px;display:block;text-decoration:none;color:inherit;background:var(--luz);border-radius:5px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:5}
/* the card only appears once its dot is toggled open (no hover reveal, so it stays put to be clicked) */
.pin.open .pin-card{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.pin-card[href]{cursor:pointer}
.pin:hover,.pin.open{z-index:6}
.pin-card img{width:100%;height:82px;object-fit:cover;display:block}
.pin-card b{display:block;font-family:'Cormorant',serif;font-weight:500;font-size:1.05rem;color:var(--carbon);padding:6px 8px 6px;text-align:center}
/* only a home card (a real link) shows the "view" bar so the click-through is obvious */
.pin-card[href]{padding-bottom:24px}
.pin-card[href]::after{position:absolute;left:0;right:0;bottom:0;height:24px;line-height:24px;
  text-align:center;background:var(--bronce);color:var(--luz);
  font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
:root[data-lang="en"] .pin-card[href]::after{content:"View \2192"}
:root[data-lang="es"] .pin-card[href]::after{content:"Ver \2192"}
.pin-card b:first-child{padding-top:9px}
.map-legend{position:absolute;right:10px;bottom:10px;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;gap:4px;padding:9px 11px;border-radius:4px;
  background:rgba(30,25,20,.62);backdrop-filter:blur(3px);
  font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,236,.94)}
.map-legend span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.map-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.map-legend .lg-home{background:var(--sol)}
.map-legend .lg-space{background:rgb(95,144,152)}
.map-legend .lg-private{background:var(--arena)}
.pin-card .sub{display:block;margin-top:-4px;padding:0 8px 9px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronce);text-align:center}

/* ---------- contact ---------- */
.contact{background:var(--arena);text-align:center}
.contact h2{margin:0 auto .5em;max-width:20ch}
.contact .body-copy{margin:0 auto 2.4em;text-align:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bronce);color:var(--luz);
  font-family:'Montserrat',sans-serif;font-weight:500;font-size:1rem;letter-spacing:.01em;
  padding:16px 36px;border-radius:999px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(64,58,53,.22)}

footer{background:var(--carbon);color:rgba(247,244,236,.55);text-align:center;padding:52px 20px}
footer .tag{font-family:'Cormorant',serif;font-style:italic;font-size:1.15rem;color:rgba(247,244,236,.85);display:block;margin-bottom:.6em}
footer .fine{font-family:'Montserrat',sans-serif;font-size:.78rem;letter-spacing:.1em;display:block}
/* subtle builder credit, very bottom of every page */
footer .credit{display:block;margin-top:1.3em;font-family:'Montserrat',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,236,.3)}
footer .credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(247,244,236,.22);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
footer .credit a:hover{color:rgba(247,244,236,.72);border-color:rgba(247,244,236,.5)}
footer .foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:9px 26px;margin:0 0 1.7em}
footer .foot-nav a{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,244,236,.86);text-decoration:none;transition:color .2s ease}
footer .foot-nav a:hover{color:var(--sol)}

/* work-in-progress banner (remove before launch) */
.wip{background:var(--carbon);color:var(--sol);text-align:center;font-family:'Montserrat',sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px}

/* ============ property page (template) ============ */
.pdp-hero{position:relative;height:92svh;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;color:var(--luz);padding:0 0 8vh;overflow:hidden}
.pdp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,58,53,.32) 0%,rgba(64,58,53,0) 32%,rgba(64,58,53,.68) 100%)}
.pdp-hero .wrap{position:relative;z-index:2}
.pdp-back{position:absolute;top:20px;left:22px;z-index:3;color:var(--luz);text-decoration:none;
  font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.92;
  display:inline-flex;gap:8px;align-items:center;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.pdp-hero .by{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.pdp-hero h1{font-size:clamp(3rem,10vw,6rem);color:var(--luz);margin:.08em 0 .1em;text-shadow:0 1px 26px rgba(0,0,0,.4)}
.pdp-tagline{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.05rem,2.6vw,1.5rem);color:rgba(247,244,236,.94);margin:0 0 .6em;text-shadow:0 1px 16px rgba(0,0,0,.42)}
.facts{display:flex;flex-wrap:wrap;gap:6px 15px;font-family:'Montserrat',sans-serif;font-size:.86rem;letter-spacing:.03em;color:rgba(247,244,236,.94)}
.facts .dot{opacity:.5}
.hero-note{display:inline-block;margin-top:16px;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--luz);background:rgba(64,58,53,.35);border:1px solid rgba(247,244,236,.3);border-radius:999px;padding:7px 15px}
.pdp-intro .lede{max-width:26ch}
/* story lede: only the first sentence is italic (em), the rest roman, so long stories stay readable (§6a) */
.pdp-intro .story{font-family:'Cormorant',serif;font-style:normal;font-size:clamp(1.12rem,2.1vw,1.4rem);line-height:1.5;color:var(--bronce);max-width:54ch;margin-top:1.05em}
.pdp-intro .story em{font-style:italic}
.quote{background:var(--arena);text-align:center}
.quote .qmark{font-family:'Cormorant',serif;font-size:3.4rem;line-height:.55;color:var(--bronce);display:block;margin-bottom:.18em}
.quote blockquote{font-family:'Cormorant',serif;font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.34;color:var(--carbon);max-width:22ch;margin:0 auto}
/* row-wise order: 01 left, 02 right, 03 below left, 04 right... */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-top:0}
.gallery picture{display:block}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block;background:var(--arena)}
.amenities{background:var(--luz)}
/* ---------- about: founders + team ---------- */
.founders .intro-row{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,4vw,48px);align-items:center;margin-top:30px}
.founders .intro-row .body-copy{margin-top:0;max-width:46ch}
.founder-portrait{margin:0}
.founder-portrait img{width:100%;border-radius:6px;display:block;box-shadow:0 18px 44px rgba(64,58,53,.22);aspect-ratio:3/4;object-fit:cover}
.founders .bios{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);margin-top:clamp(40px,6vw,60px)}
.founders .founder{max-width:52ch}
.founders .founder h3{font-family:'Cormorant',serif;font-weight:500;font-size:1.75rem;color:var(--carbon);margin-bottom:.05em}
.founders .founder .body-copy{margin-top:.7em}
.founders figure{margin:0}
.founders figcaption{margin-top:.85em;font-family:'Cormorant',serif;font-style:italic;font-size:1.08rem;color:rgba(64,58,53,.64);text-align:center}
.founders .team-photo{margin:clamp(64px,9vw,104px) auto clamp(24px,4vw,40px);max-width:1000px}
.team-photo img{width:100%;border-radius:6px;display:block;box-shadow:0 20px 50px rgba(64,58,53,.24);aspect-ratio:16/9;object-fit:cover}
/* staff departments */
.staff{margin-top:clamp(52px,8vw,84px);max-width:780px}
.staff h3{font-family:'Cormorant',serif;font-weight:500;font-size:1.7rem;color:var(--carbon);margin-bottom:.15em}
.staff .lead{color:rgba(64,58,53,.82);font-size:1.02rem;font-weight:300;margin-bottom:.6em;max-width:56ch}
.dept{display:grid;grid-template-columns:220px 1fr;gap:5px 26px;padding:15px 0;border-top:1px solid var(--line)}
.dept b{font-family:'Montserrat',sans-serif;font-weight:500;font-size:.95rem;color:var(--carbon);letter-spacing:.01em}
.dept span{font-size:.95rem;color:rgba(64,58,53,.78);line-height:1.6}
/* about contact secondary link */
.book-alt{display:inline-block;margin-top:1.4em;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,244,236,.86);text-decoration:none;border-bottom:1px solid rgba(247,244,236,.4);padding-bottom:3px;transition:color .2s ease}
.book-alt:hover{color:#fff}
@media(max-width:760px){
  .founders .intro-row{grid-template-columns:1fr;gap:22px}
  .founder-portrait{max-width:280px;margin:0 auto}
  .founders .intro-row .body-copy{max-width:none;text-align:center}
  .founders .bios{grid-template-columns:1fr;gap:32px}
  .dept{grid-template-columns:1fr;gap:2px}
}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px;margin-top:38px}
.amen-grid div{font-family:'Montserrat',sans-serif;font-weight:300;font-size:.96rem;color:var(--carbon);
  padding:13px 0;border-top:1px solid var(--line);display:flex;gap:11px;align-items:baseline}
.amen-grid div::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--bronce);transform:translateY(-1px)}
.gallery-more{margin-top:22px;text-align:center}
.gallery-more a{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronce);text-decoration:none;
  border-bottom:1px solid rgba(139,112,84,.4);padding-bottom:3px;transition:color .2s ease}
.gallery-more a:hover{color:var(--carbon)}

/* ---------- guest reviews (quiet quote mosaic) ---------- */
.reviews{background:var(--luz)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px) clamp(36px,6vw,84px);margin-top:54px;align-items:stretch}
.review{margin:0;max-width:36ch;display:flex;flex-direction:column}
.review p{font-family:'Cormorant',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.72rem);line-height:1.42;color:var(--carbon);margin:0}
/* attributions bottom-align to a shared baseline across the row (§1b) */
.review cite{display:block;margin-top:auto;padding-top:1.1em;font-family:'Montserrat',sans-serif;font-style:normal;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--bronce)}
.review-home{color:var(--bronce);white-space:nowrap}
.review-src{margin-top:clamp(40px,6vw,60px);font-family:'Montserrat',sans-serif;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(64,58,53,.48)}
@media(max-width:720px){.review-grid{grid-template-columns:1fr;gap:36px}}

.extras{background:var(--palma)}
.extras .eyebrow{color:var(--carbon)}
.extras h2{color:var(--carbon)}
.extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.extra{background:rgba(247,244,236,.5);border:1px solid rgba(64,58,53,.12);border-radius:4px;padding:26px 24px}
.extra h3{font-size:1.4rem;margin-bottom:.25em}
.extra p{font-size:.94rem;color:rgba(64,58,53,.82)}
.book{background:var(--bronce);color:var(--luz);text-align:center}
.book .eyebrow{color:var(--sol);display:block;margin-bottom:1em}
.book h2{color:var(--luz);margin:0 auto .4em;max-width:18ch}
.book p{max-width:46ch;margin:0 auto 2em;color:rgba(247,244,236,.88);font-weight:300}
.book .btn{background:var(--luz);color:var(--bronce)}
.book .engine-note{margin-top:1.5em;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,236,.85)}

/* ---------- amenity "also" line ---------- */
.amen-more{margin-top:24px;font-family:'Montserrat',sans-serif;font-size:.9rem;line-height:1.75;color:rgba(64,58,53,.58);letter-spacing:.01em;max-width:62ch}

/* ---------- the dream story (homepage, takes a breath) ---------- */
.dream{background:var(--carbon);color:var(--luz);text-align:center;padding-top:clamp(90px,14vw,168px);padding-bottom:clamp(90px,14vw,168px)}
.dream .eyebrow{display:block;margin-bottom:1.4em;color:var(--sol)}
.dream h2{font-size:clamp(2.1rem,5.2vw,3.4rem);color:var(--luz);max-width:16ch;margin:0 auto .9em}
/* center the headings, left-align the body within the centered column so lines don't ragged-left (§6b) */
.dream p{font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.8;color:rgba(247,244,236,.80);max-width:52ch;margin:0 auto 1.15em;text-align:left}
.dream .lead{color:rgba(247,244,236,.96);font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.7;max-width:46ch}
.dream .coda{text-align:center}
.dream .star{display:block;margin:1.7em auto 1.5em;color:var(--sol);font-size:1rem;opacity:.9}
.dream .coda{font-family:'Cormorant',serif;font-style:italic;font-weight:500;font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.4;color:var(--sol);max-width:42ch;margin:1.6em auto 0}
.dream .coda + .coda{margin-top:.9em}
/* Arianna's signature under the first-person names account */
.dream .sign{text-align:center;font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.2rem,2.3vw,1.55rem);color:var(--sol);margin:.9em auto 0}

/* ---------- ecosystem (homepage) ---------- */
.ecosystem{background:var(--arena)}
.ecosystem .body-copy{max-width:60ch}
.eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:52px}
.eco{background:var(--luz);border:1px solid var(--line);border-radius:4px;padding:26px 24px}
.eco{overflow:hidden}
.eco-img{display:block;width:calc(100% + 48px);margin:-26px -24px 20px;aspect-ratio:16/10;object-fit:cover}
.eco h3{font-family:'Cormorant',serif;font-weight:500;font-size:1.55rem;color:var(--carbon);margin-bottom:.25em}
.eco p{font-size:.93rem;color:rgba(64,58,53,.82)}

/* ---------- reviews: aggregate rating, home tag, Airbnb link (§4a, §5) ---------- */
/* aggregate rating: same quiet treatment as before, just a touch larger (§1a, revised) */
.review-agg{margin-top:.6em;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronce)}
.review-airbnb{margin-top:clamp(28px,5vw,46px)}
.review-airbnb a{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronce);text-decoration:none;border-bottom:1px solid rgba(139,112,84,.4);padding-bottom:3px;transition:color .2s ease}
.review-airbnb a:hover{color:var(--carbon)}
.home-reviews .review-grid{grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,54px)}
@media(max-width:860px){.home-reviews .review-grid{grid-template-columns:1fr}}

/* ---------- "the other homes" cross-link strip (§6) ---------- */
.more-homes{background:var(--luz)}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.more-home{position:relative;aspect-ratio:1/1;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;
  padding:14px;color:var(--luz);text-decoration:none;background-size:cover;background-position:center;
  background-color:var(--arena);transition:transform .3s ease}
.more-home::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(64,58,53,.66) 100%)}
.more-home span{position:relative;z-index:2;font-family:'Cormorant',serif;font-weight:500;font-size:1.18rem;line-height:1}
a.more-home:hover{transform:translateY(-3px)}
.more-home-back{background:var(--bronce);color:var(--luz);align-items:center;justify-content:center;text-align:center}
.more-home-back::after{display:none}
.more-home-back span{font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.more-grid{grid-template-columns:1fr 1fr}}

/* ---------- secondary email link under a CTA (§3d) ---------- */
.book-email{margin-top:1.2em}
.book-email a{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,244,236,.7);text-decoration:none;border-bottom:1px solid rgba(247,244,236,.3);padding-bottom:2px;transition:color .2s ease}
.book-email a:hover{color:#fff}
.contact .book-email a{color:rgba(64,58,53,.7);border-color:rgba(64,58,53,.3)}
.contact .book-email a:hover{color:var(--carbon)}

/* ---------- language manifesto (about, §13d) ---------- */
.manifesto{margin:clamp(40px,6vw,64px) auto 0;max-width:44rem;text-align:center;
  border-top:1px solid var(--line);padding-top:clamp(28px,4vw,40px)}
/* each statement sits on one line on desktop; wraps naturally on narrow screens */
.manifesto p{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.1rem,1.9vw,1.32rem);
  line-height:1.55;color:var(--carbon);margin:.35em 0}

/* ---------- retreats inquiry form (§7) ---------- */
.form-or{margin-top:2.2em;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,236,.62)}
.retreat-form{max-width:560px;margin:1.4em auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.retreat-form .field{display:flex;flex-direction:column;gap:6px}
.retreat-form .field-full{grid-column:1 / -1}
.retreat-form label{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,236,.82)}
.retreat-form input,.retreat-form textarea{font-family:'Montserrat',sans-serif;font-size:.95rem;color:var(--carbon);
  background:var(--luz);border:1px solid rgba(247,244,236,.4);border-radius:4px;padding:11px 13px;width:100%}
.retreat-form textarea{resize:vertical}
.retreat-form input:focus,.retreat-form textarea:focus{outline:2px solid var(--luz);outline-offset:1px}
.retreat-form button{grid-column:1 / -1;justify-self:center;margin-top:4px}
@media(max-width:560px){.retreat-form{grid-template-columns:1fr}}
.btn-outline{background:transparent;border:1px solid var(--luz);color:var(--luz)}
.book .btn-outline{background:transparent;color:var(--luz)}

/* ---------- WhatsApp icon inside buttons (§2a) ---------- */
.wa-icon{width:1.15em;height:1.15em;flex:none;fill:currentColor;display:inline-block}

/* ---------- sticky mobile WhatsApp button on home pages (§2c) ---------- */
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:95;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
.wa-fab.show{opacity:1;visibility:visible;transform:none}
.wa-fab svg{width:30px;height:30px;fill:#fff}
@media(min-width:761px){.wa-fab{display:none}}

/* ---------- gallery loading placeholder shimmer (§5a) ---------- */
@keyframes gshimmer{0%{background-position:180% 0}100%{background-position:-40% 0}}
.gallery img{background-image:linear-gradient(100deg,var(--arena) 30%,rgba(247,244,236,.7) 50%,var(--arena) 70%);
  background-size:220% 100%;animation:gshimmer 1.5s ease-in-out infinite}
.gallery img.is-loaded{animation:none;background-image:none}

/* ---------- gallery collapse: show first ~10, reveal the rest (§5b) ---------- */
.gallery.collapsed img:nth-child(n+11){display:none}
.gallery-controls{text-align:center;margin-top:26px}
.gallery-toggle{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronce);background:none;border:1px solid rgba(139,112,84,.5);border-radius:999px;
  padding:11px 26px;cursor:pointer;transition:background .2s ease,color .2s ease}
.gallery-toggle:hover{background:var(--bronce);color:var(--luz)}

/* About hero over the team photo (§2c): clean bottom-up scrim, lighter type shadow; title stays bottom-left */
.pdp-hero.hero-team::after{background:linear-gradient(180deg,rgba(30,25,20,0) 38%,rgba(30,25,20,.32) 68%,rgba(30,25,20,.8) 100%)}
.pdp-hero.hero-team h1{text-shadow:0 1px 16px rgba(0,0,0,.42)}
.pdp-hero.hero-team .pdp-tagline{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-cap{max-width:1180px;margin:0 auto;padding:16px 28px 0;font-family:'Cormorant',serif;font-style:italic;
  font-size:clamp(1.02rem,1.9vw,1.24rem);color:rgba(64,58,53,.64);text-align:center}
.hero-team-mobile{display:none}
/* Mobile-only (§): the team photo is ~3:1 and cannot survive a full-bleed portrait crop, so below 768px
   show it whole on the brand ground and drop the title block underneath it, left-aligned. Desktop unchanged. */
@media(max-width:768px){
  /* the whole title unit sits on a sand band so it reads as its own block and steps into the cream section below */
  .pdp-hero.hero-team{background-image:none!important;background:var(--arena);color:var(--carbon);
    height:auto;min-height:0;display:block;padding:0 0 clamp(16px,4vw,24px)}
  .pdp-hero.hero-team::after{display:none}
  /* back button above the photo, in the header strip */
  .pdp-hero.hero-team .pdp-back{position:static;display:inline-flex;margin:16px 0 14px 24px;color:var(--carbon);text-shadow:none;opacity:.8}
  .hero-team-mobile{display:block;width:100%;height:auto;margin-bottom:clamp(20px,5vw,28px)}
  .pdp-hero.hero-team .by{color:var(--bronce)}
  .pdp-hero.hero-team h1{color:var(--carbon);text-shadow:none}
  .pdp-hero.hero-team .pdp-tagline{color:var(--bronce);text-shadow:none}
  .pdp-hero.hero-team .facts{color:rgba(64,58,53,.74)}
  .hero-team + .hero-cap{background:var(--arena);text-align:left;margin-top:0;padding:6px 28px clamp(24px,6vw,34px)}
}

/* §3e: the retreats CTA heading should match the other section headings, not sit smaller */
.book h2{font-size:clamp(2.2rem,5vw,3.6rem)}
/* §3f: give pull quotes bottom room so descenders never clip on the section edge */
.quote{padding-bottom:clamp(84px,12vw,140px)}
.quote blockquote{padding-bottom:.12em}
/* §3g: warm the one cool ecosystem photo (Movement) so it reads as one set; framing unchanged */
.eco-img.warm{filter:sepia(.18) saturate(1.08) brightness(1.03) hue-rotate(-6deg)}

@media(prefers-reduced-motion:reduce){.gallery img{animation:none}}

@media(max-width:760px){
  .homes{grid-template-columns:1fr}
  .home.feature{aspect-ratio:4/5}
  section{padding:66px 0}
  .amen-grid{grid-template-columns:1fr 1fr}
  .extra-grid{grid-template-columns:1fr}
  .pdp-hero{height:86svh}
  .gallery{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}