/*
Theme Name: Aldea del Sol Residences
Theme URI: https://aldeadelsol.com
Author: Design build
Description: Custom theme for Aldea del Sol Residences — a land development in Guanacaste, Costa Rica. Bilingual-ready (WPML/Polylang), with Lots and Build Packages custom post types.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: aldea
*/

/* ---------- Tokens ---------- */
/* ---------- Self-hosted brand fonts (Brand Kit, 27.08) ---------- */
@font-face{font-family:'EB Garamond';src:url('assets/fonts/EBGaramond-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/EBGaramond-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/EBGaramond-Italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/EBGaramond-SemiBoldItalic.woff') format('woff');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'TitusDot';src:url('assets/fonts/TitusDot.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'RetroSignature';src:url('assets/fonts/RetroSignature.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}

:root{
  --cream:#FBEED6;
  --sand:#FBEED6; /* = Florcita Blanca (official) — no more off-brand cream */
  --ink:#44402E;
  --ink-70:rgba(68,64,46,.72);
  --ink-55:rgba(68,64,46,.55);
  --line:rgba(68,64,46,.14);
  --olive:#697353;
  --sage:#A9B29B;
  --clay:#A68763;
  --clay-text:#7A5A34;
  --ink-muted:#6B6653;
  --moss:#948A59;
  --dark:#2f2d24;
  /* The one cool tone in a warm palette. Deep ocean rather than Facebook's own
     blue, which measures only 3.69:1 on this cream and shouts besides; this is
     6.98:1 and belongs to the water the whole identity is built on. */
  --ocean:#25566B;
  --serif:'EB Garamond',Georgia,serif;
  --display:'TitusDot','EB Garamond',Georgia,serif;
  --sans:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;
  --script:'RetroSignature',cursive;
  --wrap:1240px;
  --ease:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;transition:color .28s ease}
a:hover{color:var(--olive)}
button{font-family:inherit}
::selection{background:var(--sage);color:var(--cream)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.eyebrow{margin:0;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.kicker{margin:0;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
/* Italic headings are EB Garamond in the design, not the display face. */
h1[style*=italic],h2[style*=italic],h3[style*=italic],.h-italic{font-family:var(--serif)}
h1{font-size:clamp(38px,4.4vw,68px);line-height:1.12;margin:0}
h2{font-size:clamp(30px,3.4vw,52px);line-height:1.16;margin:0}
h3{font-size:30px;line-height:1.2;margin:0}
p{text-wrap:pretty}
.lede{font-size:17px;line-height:1.85;color:var(--ink)}
.script{font-family:var(--script);font-size:26px;color:var(--moss)}
.chapter-no{margin:0;font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:20px;top:20px;z-index:200;background:var(--sand);padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* ---------- Loader ---------- */
#ads-loader{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream);transition:transform 1.15s cubic-bezier(.76,0,.24,1),opacity .1s linear 1.05s}
#ads-loader img{width:124px;transition:opacity .5s ease,transform .7s var(--ease)}
#ads-loader .bar{width:180px;height:1px;margin-top:30px;background:rgba(68,64,46,.2)}
#ads-loader .bar span{display:block;height:1px;width:8%;background:var(--olive);transition:width .75s cubic-bezier(.4,0,.2,1)}
#ads-loader.lift{transform:translateY(-100%)}
#ads-loader.lift img{opacity:0;transform:translateY(-14px)}
#ads-loader.lift .bar span{width:100%}
#ads-loader.gone{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
#ads-veil{position:fixed;inset:0;z-index:95;background:var(--cream);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
#ads-veil.on{opacity:1}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);clip-path:inset(0 0 14% 0);transition:opacity 1.1s var(--ease),transform 1.25s var(--ease),clip-path 1.25s var(--ease)}
[data-reveal].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none;clip-path:none}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,238,214,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(68,64,46,.13)}
.site-header .inner{max-width:var(--wrap);margin:0 auto;padding:0 40px;height:78px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.site-header img{height:34px;width:auto}
.nav-main,.nav-meta{display:flex;align-items:center;gap:32px;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nav-meta{gap:26px}
.nav-main ul{display:contents;margin:0;padding:0}
.nav-main li{list-style:none;display:inline-flex}
.nav-main a,.nav-meta a{color:var(--ink)}
.nav-main a:hover,.nav-meta a:hover,
.nav-main .current-menu-item>a,
.nav-main a.active,
.nav-main a[aria-current="page"]{color:var(--ink)}
/* 06.09.2026: the current page was styled only through .current-menu-item, the
   class WordPress puts on a real menu. The theme's own fallback menu marks the
   page with .active and aria-current instead, so on every page served by the
   fallback the header gave no clue where you were. Both are matched now, and
   the marker is a touch stronger than a hairline — it is the only thing on the
   bar telling you which of eight pages you are reading. */
/* The first attempt added padding and a border, which pushed the current item
   a few pixels off the baseline — it looked like a rendering fault rather than
   a marker, and you had to look twice to tell what it meant. The rule is drawn
   in a pseudo-element now, so it takes no space and nothing moves: the item
   simply goes to full ink and grows a clay underline beneath it. */
.nav-main .current-menu-item>a,
.nav-main a.active,
.nav-main a[aria-current="page"]{
	position:relative;color:var(--ink)}
.nav-main .current-menu-item>a::after,
.nav-main a.active::after,
.nav-main a[aria-current="page"]::after{
	content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
	background:var(--clay);border-radius:1px}
.nav-meta .enquire{color:var(--ink);padding-bottom:3px;border-bottom:1px solid rgba(68,64,46,.4)}
/* On the Lots screen the link doubles as the shortlist counter, which the
   design renders muted until something is saved. */
body.ads-lots .nav-meta .enquire{color:var(--ink-muted)}
body.ads-lots .nav-meta .enquire.has-saved{color:#4E5640;border-bottom-color:var(--olive)}
.lang-switch .active{color:var(--ink)}
.lang-switch a{display:inline-block;padding:14px 8px;margin:-14px -8px}
.nav-meta .enquire{display:inline-block;padding:14px 6px 11px;margin:-14px -6px -11px}
.lang-switch span{color:var(--ink-muted)}


/* ---------- Hero (home) ---------- */
.hero{position:relative;height:100vh;height:100dvh;min-height:700px;overflow:hidden;background:var(--dark)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}
.hero-media img.on{opacity:1}
.hero-media img.first{animation:ads-pan 30s ease-in-out infinite alternate}
@keyframes ads-pan{from{transform:scale(1.04)}to{transform:scale(1.15)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,45,36,.5) 0%,rgba(47,45,36,.1) 38%,rgba(47,45,36,.72) 100%)}
.hero-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:34px 44px 0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
.hero-top a,.hero-top span{color:rgba(251,238,214,.8)}
.hero-top a:hover{color:var(--cream)}
.hero-top nav{display:flex;gap:30px}
.hero-top .right{display:flex;align-items:center;gap:26px}
.hero-top .enquire{padding-bottom:3px;border-bottom:1px solid rgba(251,238,214,.5)}
.hero-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 44px;pointer-events:none}
.hero-center img{width:158px;opacity:.95;animation:ads-in 1.2s var(--ease) both}
/* The proposition, above the headline and therefore the first line read.

   Not a shimmer. The whole argument of this site is "documented, not
   described", so the line behaves like a stamp on a document rather than like
   a highlight sliding over text: a hairline clay plate, four corner marks of
   the kind printers put on a certificate, and on load it presses in — entering
   slightly large with its letters spaced wide, then settling as the spacing
   closes, the way ink takes. It plays once and stops; a loop would pull the eye
   away from the headline for the rest of the visit.

   The plate earns its keep twice over: it is also a dark wash over a moving
   forest video, which is what makes small cream type legible up there at all.
   06.09.2026. */
.hero-center .hero-claim{position:relative;margin:26px 0 0;
  display:inline-flex;align-items:center;align-self:center;
  padding:11px 26px;
  font-family:var(--serif);font-weight:600;font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--cream);
  background:rgba(28,26,20,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid rgba(166,135,99,.5);
  animation:ads-stamp 1.05s var(--ease) .15s both}

/* Four corner brackets, drawn as eight hairline gradients on one pseudo so no
   extra markup is needed. They sit outside the plate, like crop marks. */
.hero-center .hero-claim::after{content:'';position:absolute;inset:-6px;
  pointer-events:none;
  background:
    linear-gradient(var(--clay),var(--clay)) left top/13px 2px no-repeat,
    linear-gradient(var(--clay),var(--clay)) left top/2px 13px no-repeat,
    linear-gradient(var(--clay),var(--clay)) right top/13px 2px no-repeat,
    linear-gradient(var(--clay),var(--clay)) right top/2px 13px no-repeat,
    linear-gradient(var(--clay),var(--clay)) left bottom/13px 2px no-repeat,
    linear-gradient(var(--clay),var(--clay)) left bottom/2px 13px no-repeat,
    linear-gradient(var(--clay),var(--clay)) right bottom/13px 2px no-repeat,
    linear-gradient(var(--clay),var(--clay)) right bottom/2px 13px no-repeat;
  animation:ads-in .7s var(--ease) .8s both}

.hero-claim__t{display:block}

@keyframes ads-stamp{
  0%{opacity:0;transform:scale(1.06);letter-spacing:.46em}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1);letter-spacing:.26em}
}
/* Motion off: it simply is stamped, with no press. */
@media (prefers-reduced-motion:reduce){
  .hero-center .hero-claim,.hero-center .hero-claim::after{animation:none;opacity:1;
    transform:none;letter-spacing:.26em}
}

.hero-center h1{margin:20px 0 0;max-width:17ch;color:var(--cream);font-size:clamp(42px,5.4vw,82px);line-height:1.08;animation:ads-in 1.4s .2s var(--ease) both}
.hero-center .script{margin:26px 0 0;font-size:28px;color:rgba(251,238,214,.88);animation:ads-in 1.5s .22s var(--ease) both}
@keyframes ads-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;border-top:1px solid rgba(251,238,214,.22);background:linear-gradient(180deg,rgba(47,45,36,0),rgba(47,45,36,.35))}
.hero-bar .inner{max-width:1280px;margin:0 auto;padding:22px 44px 24px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,238,214,.8)}
.hero-facts{display:flex;gap:38px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,238,214,.92)}
/* The titling fact carries the hero's emphasis (06.09.2026). It is not made
   bigger — that would break the strip's rhythm and push the row to wrap on a
   phone. It is made brighter and anchored by a clay mark, so the eye lands on
   it first and the four items still read as one line of facts. */
.hero-facts__lead{color:var(--cream);font-weight:600;letter-spacing:.22em;
  display:inline-flex;align-items:center;gap:9px}
.hero-facts__lead::before{content:'';flex:0 0 auto;width:16px;height:2px;
  background:var(--clay);box-shadow:0 0 0 1px rgba(47,45,36,.25)}
.hero-nav{display:flex;align-items:center;gap:22px}
.hero-caption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,238,214,.92)}
.hero-dots{display:flex;gap:9px}
.hero-dots button{width:13px;height:2px;padding:0;border:none;cursor:pointer;background:rgba(251,238,214,.42);transition:width .5s var(--ease),background .5s ease}
.hero-dots button[aria-current="true"]{width:32px;background:var(--sand)}
.scroll-cue{position:absolute;left:44px;bottom:96px;z-index:4;font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,238,214,.92);animation:ads-cue 2.8s ease-in-out infinite}
@keyframes ads-cue{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(8px)}}

/* ---------- Chapter rail ---------- */
.rail{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.rail.on{opacity:1;pointer-events:auto}
.rail button{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;text-align:left;color:rgba(68,64,46,.42);transition:color .4s ease}
.rail button i{display:block;height:1px;width:12px;background:rgba(68,64,46,.35);transition:width .5s var(--ease),background .4s ease}
.rail button[aria-current="true"]{color:var(--ink)}
.rail button[aria-current="true"] i{width:26px;background:var(--clay)}

/* ---------- Chapters ---------- */
.chapter{padding:150px 44px 130px}
.chapter .inner{max-width:1280px;margin:0 auto}
.chapter-grid{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start}
.statement{margin:0;font-family:var(--serif);font-size:clamp(28px,3.2vw,46px);line-height:1.38}
.parallax{position:relative;display:flex;align-items:center;justify-content:center;min-height:78vh;background-size:cover;background-position:center;background-attachment:fixed}
.parallax .scrim{position:absolute;inset:0;background:rgba(47,45,36,.42)}
.parallax .inner{position:relative;max-width:900px;margin:0 auto;padding:0 44px;text-align:center}
.parallax p.q{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.6vw,54px);line-height:1.3;letter-spacing:.025em;color:var(--cream)}

/* ---------- Day timeline ---------- */
.day-cols{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}
.day-row{display:grid;grid-template-columns:92px 1fr;gap:26px;padding:26px 0 26px 18px;cursor:pointer;border-top:1px solid rgba(68,64,46,.14);border-left:2px solid transparent;transition:all .45s var(--ease)}
.day-row time{font-family:var(--serif);font-size:21px;color:var(--ink);transition:color .4s ease}
.day-row h3{font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.28;color:var(--ink);transition:color .4s ease}
.day-row p{margin:10px 0 0;font-size:16px;line-height:1.8;max-width:46ch;color:var(--ink-muted);transition:color .45s ease}
.day-row.on{border-left-color:var(--clay);background:rgba(169,178,155,.14)}
.day-row.on time{color:var(--olive)}
.day-row.on h3{color:var(--ink)}
.day-row.on p{color:var(--ink)}
.day-stage{position:sticky;top:90px}
.day-frame{position:relative;width:100%;height:min(74vh,640px);overflow:hidden;background:#E7E0CE}
.day-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.6s var(--ease)}
.day-frame img.on{opacity:1;transform:scale(1)}

/* ---------- Gallery ---------- */
.gallery{display:flex;gap:24px;padding:0 44px;overflow-x:auto;cursor:grab;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{height:min(62vh,540px);width:auto;flex:0 0 auto;user-select:none;pointer-events:none}
#ads-cursor{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-50%);width:74px;height:74px;border:1px solid rgba(251,238,214,.7);border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:9.5px;letter-spacing:.24em;background:rgba(47,45,36,.42);backdrop-filter:blur(3px);transition:opacity .3s ease}

/* ---------- Bands ---------- */
.band-sage{background:var(--sage);border-top:1px solid rgba(47,45,36,.16);border-bottom:1px solid rgba(47,45,36,.16)}
.band-sage .split{max-width:var(--wrap);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.band-sage h2,.band-sage .chapter-no{color:var(--ink)}
.band-sage p{color:var(--ink)}
.band-sage .kicker,.band-sage .eyebrow{color:var(--ink)}
.spec-list{margin-top:46px;border-top:1px solid rgba(47,45,36,.3);max-width:480px}
.spec-list div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid rgba(47,45,36,.22)}
.spec-list dt,.spec-list span:first-child{font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.spec-list span:last-child{font-size:15.5px;color:var(--ink)}
.band-sand{background:var(--sand);border-top:1px solid rgba(68,64,46,.13)}
.band-dark{position:relative;background:var(--dark)}
.band-dark .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.band-dark .inner{position:relative}
.band-dark h2,.band-dark h3{color:var(--cream)}
.band-dark p{color:rgba(251,238,214,.8)}
.band-dark .chapter-no{color:var(--sage)}
.band-dark .kicker{color:rgba(251,238,214,.92)}
.band-dark a.link{color:var(--cream);font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid rgba(251,238,214,.5)}

/* ---------- Stats & cards ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid rgba(68,64,46,.16);border-bottom:1px solid rgba(68,64,46,.16)}
.stat-row div{padding:42px 26px;border-left:1px solid rgba(68,64,46,.13)}
.stat-row b{display:block;font-family:var(--display);font-weight:300;font-size:44px;line-height:1;color:var(--olive)}
.stat-row span{display:block;margin-top:16px;font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.cards-3 img{width:100%;height:420px;object-fit:cover}
.cards-3 h3{margin:26px 0 0}
.cards-3 p{margin:10px 0 0;font-size:16px;line-height:1.8;color:var(--ink-70)}
.btn-line{display:inline-block;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid rgba(68,64,46,.45)}
.btn-line:hover{border-color:var(--ink)}
.btn-solid{display:block;padding:16px;text-align:center;border:1px solid rgba(68,64,46,.45);font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;transition:all .28s ease}
/* The enquiry form's submit is the one boxed control the design sets in the sans face. */
.lead-form button[type=submit]{width:100%;padding:16px;background:transparent;color:var(--ink);border:1px solid rgba(68,64,46,.45);border-radius:0;cursor:pointer;font-family:var(--sans);font-weight:300;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;transition:all .28s ease}
.lead-form button[type=submit]:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-solid:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------- Availability ---------- */
.avail{max-width:var(--wrap);margin:0 auto;border:1px solid rgba(68,64,46,.16);background:var(--sand);padding:30px 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.avail-counts{display:flex;align-items:baseline;gap:40px}
.avail-counts b{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1}
.avail-counts span{display:block;margin-top:7px;font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.avail-counts .a b{color:var(--olive)}
.avail-counts .c b{color:var(--clay-text)}
.avail-counts .s b{color:rgba(68,64,46,.45)}
.avail-bar{flex:1 1 300px;min-width:260px}
.avail-bar .track{display:flex;height:4px;overflow:hidden;background:rgba(68,64,46,.12)}
.avail-bar .track i{display:block;transition:width .6s ease}
.avail-bar .track .s{background:rgba(68,64,46,.4)}
.avail-bar .track .c{background:var(--clay)}
.avail-bar .track .a{background:var(--sage)}
.avail-bar p{margin:12px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(68,64,46,.58)}

/* ---------- Lot map ---------- */
.lot-cols{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:60px;align-items:start}
.plan{position:relative;background:var(--sand);border:1px solid var(--line);padding:26px}
.plan-img{display:block;width:100%;mix-blend-mode:multiply}
.marker{position:absolute;transform:translate(-50%,-50%);border-radius:999px;border:1px solid rgba(253,249,239,.9);cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease)}
.marker:hover{transform:translate(-50%,-50%) scale(1.18)}
.marker[aria-pressed="true"]{box-shadow:0 0 0 4px rgba(166,135,99,.4);transform:translate(-50%,-50%) scale(1.2)}
.marker.available{background:var(--sage);color:var(--dark)}
.marker.contract{background:var(--clay-text);color:var(--cream)}
.marker.sold{background:#CAC4B2;color:var(--ink)}
.lot-panel{background:var(--sand);border:1px solid var(--line);padding:34px 34px 38px;position:sticky;top:110px}
.lot-view{position:relative;width:100%;height:210px;overflow:hidden;background:#E7E0CE;margin-bottom:28px}
.lot-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.lot-view img.on{opacity:1}
.lot-view figcaption{position:absolute;left:16px;bottom:14px;margin:0;font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 8px rgba(68,64,46,.8)}
.lot-table{width:100%;border-collapse:collapse;font-size:15px}
.lot-table th{text-align:left;padding:14px 12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink);border-bottom:1px solid rgba(68,64,46,.2)}
.lot-table td{padding:15px 12px;border-bottom:1px solid rgba(68,64,46,.11)}
.lot-table tr{cursor:pointer;transition:background .25s ease}
.lot-table tr:hover{background:rgba(169,178,155,.14)}
.lot-table tr.sold td{color:rgba(68,64,46,.42)}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.pill.available{background:var(--sage);color:var(--dark)}
.pill.contract{background:var(--clay-text);color:var(--cream)}
.pill.sold{background:rgba(68,64,46,.12);color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.filters button{background:none;border:1px solid rgba(68,64,46,.24);border-radius:999px;padding:9px 15px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(68,64,46,.7);cursor:pointer;transition:all .24s ease}
.filters button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--cream)}

/* ---------- Calculator ---------- */
.calc{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:70px;align-items:start}
.calc-step{margin:0 0 30px}
.pkg-list{display:grid;gap:14px}
.pkg{text-align:left;width:100%;padding:24px 26px 26px;cursor:pointer;background:none;border:1px solid rgba(68,64,46,.18);color:var(--ink);font-weight:300;transition:all .3s var(--ease)}
.pkg[aria-pressed="true"]{background:rgba(169,178,155,.18);border-color:var(--olive)}
.pkg b{display:block;font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.2}
.pkg small{display:block;margin-top:6px;font-size:15px;line-height:1.65;color:var(--ink)}
.pkg em{display:block;margin-top:12px;font-family:var(--serif);font-style:normal;font-size:20px;color:rgba(68,64,46,.82)}
.pkg[aria-pressed="true"] em{color:var(--ink)}
.pkg em{color:rgba(68,64,46,.82)!important}
.pkg[aria-pressed="true"] em{color:var(--ink)!important}
.pkg[aria-pressed="true"] em{color:var(--olive)}
.check{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px 0 0;background:none;border:none;cursor:pointer;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-align:left}
.check i{flex:0 0 auto;width:20px;height:20px;margin-top:2px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(68,64,46,.35);color:var(--cream);font-size:12px;font-style:normal;transition:all .24s ease}
.check[aria-pressed="true"] i{background:var(--olive);border-color:var(--olive)}
.check small{display:block;margin-top:4px;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:300}
.collapse{max-height:0;opacity:0;overflow:hidden;transition:all .5s var(--ease)}
.collapse.on{max-height:600px;opacity:1}
.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px}
.sliders label{display:block;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.sliders output{display:block;margin:6px 0 0;font-family:var(--serif);font-size:30px;line-height:1;white-space:nowrap;color:var(--olive)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:rgba(68,64,46,.28);outline:none;margin:22px 0 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:999px;background:var(--olive);cursor:grab;border:3px solid var(--cream);box-shadow:0 0 0 1px rgba(68,64,46,.35)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:999px;background:var(--olive);cursor:grab;border:3px solid var(--cream)}
.calc-panel{background:var(--sand);border:1px solid var(--line);padding:42px 40px 44px}
.calc-total{margin:22px 0 0;font-family:var(--serif);font-size:58px;line-height:1}
.calc-lines{margin-top:34px;border-top:1px solid rgba(68,64,46,.22)}
.calc-lines div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(68,64,46,.13)}
.calc-lines span:first-child{font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.calc-lines span:last-child{font-family:var(--serif);font-weight:300;font-size:20px}
.calc-yield{margin-top:32px;padding-top:28px;border-top:1px solid rgba(68,64,46,.22)}
.calc-yield .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-yield b{display:block;font-family:var(--serif);font-weight:300;font-size:34px;line-height:1;color:var(--olive)}
.calc-yield span{display:block;margin-top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.fineprint{margin:20px 0 0;font-size:13px;line-height:1.7;color:rgba(68,64,46,.55)}

/* ---------- Lead path / steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:70px}
.step{padding:34px 32px 36px;border:1px solid rgba(68,64,46,.16);transition:all .42s var(--ease)}
.step:hover{background:var(--cream);border-color:rgba(68,64,46,.3);transform:translateY(-5px)}
.step h3{margin:18px 0 0;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15}
.step .meta{margin:8px 0 0;font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.step p.body{margin:20px 0 0;font-size:16px;line-height:1.8;color:var(--ink)}
.step .act{margin:26px 0 0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(68,64,46,.82);transition:color .3s ease}
.step:hover .act{color:var(--olive)}
.step .chapter-no{color:var(--clay);letter-spacing:.2em}
.step:hover .act{color:var(--olive)}

/* ---------- Forms ---------- */
.lead-form{display:grid;gap:22px;max-width:560px}
.field label{display:block;margin-bottom:9px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(68,64,46,.62)}
.field select,.field input,.field textarea{font-size:16.5px}
.field select option{font-size:16.5px}
.lead-form button[type=submit]{font-weight:400}
/* The lead-path step numeral is a serif numeral in the design, not an eyebrow. */
.step .chapter-no{font-family:var(--serif);font-weight:300;font-size:15px;letter-spacing:.2em;text-transform:none;color:var(--clay)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:var(--cream);border:1px solid rgba(68,64,46,.22);font-family:var(--sans);font-weight:300;font-size:16px;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);outline:none}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13.5px;line-height:1.7;color:var(--ink-muted)}

/* ---------- Atmosphere ---------- */
.atmos{position:relative;height:min(82vh,720px);overflow:hidden}
.atmos img{width:100%;height:100%;object-fit:cover}
.atmos .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,45,36,.28),rgba(47,45,36,.62))}
.atmos .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 44px}
.atmos p.q{margin:0;max-width:22ch;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.8vw,56px);line-height:1.22;color:var(--cream)}

/* ---------- 360 ---------- */
.tour-frame{position:relative;max-width:820px;margin:46px auto 0;aspect-ratio:16/9;border:1px solid rgba(251,238,214,.28);background:rgba(47,45,36,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.tour-frame .badge{width:66px;height:66px;border-radius:999px;border:1px solid rgba(251,238,214,.55);display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:15px;letter-spacing:.1em}
.tour-frame video,.tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover}

/* ---------- Footer ---------- */
.site-footer{background:var(--sand);border-top:1px solid var(--line);padding:80px 40px 46px}
.site-footer .top{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:56px;border-bottom:1px solid var(--line)}
.site-footer img{width:124px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:32px;font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.site-footer nav a{color:var(--ink)}
.site-footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .rail{display:none}
  .chapter-grid,.day-cols,.band-sage .split{grid-template-columns:1fr;gap:40px}
  .day-stage{position:static}
  .lot-panel{position:static}
}
@media (max-width:820px){
  body{font-size:16px}
  .nav-main{display:none}

  .hero-top nav{display:none}
  .chapter{padding:100px 24px 90px}
  .wrap,.site-header .inner,.hero-top,.hero-bar .inner{padding-left:24px;padding-right:24px}
  .gallery{padding:0 24px}
  .hero-facts{gap:20px;font-size:9.5px}
  .scroll-cue{display:none}
  .parallax{background-attachment:scroll}
  .calc,.lot-cols{grid-template-columns:1fr}
  .cards-3 img{height:300px}
}

/* ---------- The Area ---------- */
.area-hero{position:relative;height:min(74vh,640px);min-height:460px;overflow:hidden;background:var(--dark)}
.area-hero>img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.05) brightness(.95) sepia(.05)}
.scrim-radial{position:absolute;inset:0;background:radial-gradient(112% 82% at 50% 48%,rgba(68,64,46,.62) 0%,rgba(68,64,46,.4) 40%,rgba(68,64,46,.16) 100%)}
.grain{position:absolute;inset:0;background-image:url('assets/img/paper-grain.jpg');background-size:520px;mix-blend-mode:overlay;opacity:.14;pointer-events:none}
.area-hero__text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px;
  background:radial-gradient(58% 52% at 50% 50%,rgba(47,45,36,.78) 0%,rgba(47,45,36,.6) 55%,rgba(47,45,36,0) 100%)}
.area-hero__text h1{max-width:18ch;color:var(--cream);font-size:clamp(34px,4.4vw,66px)}
.eyebrow--light{color:var(--cream);margin-bottom:22px}
.lede--light{color:rgba(251,238,214,.92);max-width:54ch;margin:24px auto 0}
.area-cards{padding:0 40px 120px}
.area-filters{margin-bottom:40px}
.area-filters button{border-radius:999px;padding:10px 17px;font-family:var(--sans);font-weight:300;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.area-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.area-card{padding:30px 30px 32px;background:var(--cream);border:1px solid rgba(68,64,46,.16)}
.area-card[hidden]{display:none}
.area-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.area-card p.area-card__dist{margin:0;font-family:var(--serif);font-size:17px;color:var(--ink);white-space:nowrap}
.area-card__top p:first-child{font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.area-card h3{font-weight:400;line-height:1.15}
.area-card .area-card__note{font-size:13px}
.area-card h3{margin:14px 0 0;font-family:'TitusDot',var(--serif);font-size:27px}
.area-card p{margin:12px 0 0;font-size:16px;line-height:1.8}
.area-card__note{margin-top:16px!important;padding-top:12px;border-top:1px solid rgba(68,64,46,.16);font-size:13px;font-style:italic}
.band-inner{padding:130px 0}
.band-photo{align-self:stretch;position:relative;min-height:420px}
.band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03) sepia(.03)}
.stat-row--plain{border:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.stat-row--plain div{padding:24px 0 0;border-left:none;border-top:1px solid rgba(68,64,46,.3)}
.stat-row--plain b{font-size:34px}
.stat-row--plain p{margin:12px 0 0;font-size:15.5px;line-height:1.78}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px 40px;margin-top:40px}
.detail-grid>div{padding-top:24px;border-top:1px solid rgba(68,64,46,.3)}
.band-dark .detail-grid>div{border-top-color:rgba(251,238,214,.3)}
.detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.detail-head h3{margin:0;font-family:var(--serif);font-size:23px;line-height:1.2}
.band-dark .detail-head h3{font-size:22px;color:var(--cream)}
.detail-head span{font-family:var(--serif);font-size:16px;white-space:nowrap;color:var(--ink)}
.band-dark .detail-head span{color:var(--sage)}
.band-dark .detail-head span{color:var(--sage)}
.season-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:48px}
.season{padding:34px 32px 36px}
.season--dry{background:var(--cream);border:1px solid rgba(68,64,46,.16)}
.season--green{background:var(--sage);border:1px solid rgba(47,45,36,.2)}
.season--green *{color:var(--dark)}
.season h3{margin:12px 0 0;font-family:'TitusDot',var(--serif);font-size:28px}
.season p{margin:14px 0 0;font-size:16px;line-height:1.8}
.center{text-align:center}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:40px}
.chapter-body{grid-column:span 2}
@media (max-width:820px){.band-inner{padding:84px 0}}

/* =========================================================
   Mobile — a designed phone experience, not a squeezed desktop
   ========================================================= */

/* --- Hamburger --- */
.nav-toggle{display:none;position:relative;width:44px;height:44px;background:none;border:none;cursor:pointer;
  font-size:0;color:var(--ink);flex:0 0 auto}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:'';position:absolute;left:11px;width:22px;height:1.5px;
  background:var(--ink);transition:transform .4s var(--ease),opacity .3s ease}
.nav-toggle::before{top:16px}
.nav-toggle span{top:21.5px}
.nav-toggle::after{top:27px}
body.drawer-open .nav-toggle::before{transform:translateY(5.5px) rotate(45deg)}
body.drawer-open .nav-toggle span{opacity:0}
body.drawer-open .nav-toggle::after{transform:translateY(-5.5px) rotate(-45deg)}

/* --- Drawer --- */
.drawer{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;
  padding:96px 30px 40px;background:var(--ink);
  clip-path:circle(0% at calc(100% - 46px) 42px);
  /* 04.09.2026: 720ms was a beat too long for a menu — you had already decided
     to tap it. 520ms keeps the sweep readable and stops it feeling like a
     loading state. The circle still opens from the button itself rather than
     from the top of the screen, because it should look like the control the
     thumb just pressed is what opened, not like a generic curtain. */
  transition:clip-path .52s cubic-bezier(.76,0,.24,1)}
.drawer[hidden]{display:none}
body.drawer-open .drawer{clip-path:circle(150% at calc(100% - 46px) 42px)}
.drawer::after{content:'';position:absolute;inset:0;background-image:url('assets/img/paper-grain.jpg');
  background-size:420px;mix-blend-mode:overlay;opacity:.14;pointer-events:none}
.drawer__close{position:static;margin-left:auto;width:44px;height:44px;background:none;border:none;
  color:var(--cream);font-size:30px;line-height:1;cursor:pointer}
.drawer__nav{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
.drawer__nav a{display:flex;align-items:baseline;gap:14px;padding:14px 0;
  font-family:var(--display);font-size:clamp(30px,9vw,44px);line-height:1.05;color:var(--cream);
  border-bottom:1px solid rgba(251,238,214,.16);
  /* Items rise 10px, not 18 — at 18 the row visibly travels, which reads as a
     page building itself. The stagger lives on the open state only, so closing
     is immediate: an exit that waits its turn feels like the menu is reluctant
     to let you go. */
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .38s var(--ease);transition-delay:0s}
body.drawer-open .drawer__nav a{opacity:1;transform:none;
  transition:opacity .44s ease,transform .52s var(--ease);
  transition-delay:calc(var(--i) * .045s + .15s)}
.drawer__nav a em{font-family:var(--serif);font-style:normal;font-size:12px;letter-spacing:.2em;
  color:var(--sage);flex:0 0 auto}
.drawer__foot{position:relative;z-index:1;margin-top:38px;display:flex;flex-direction:column;gap:16px;
  opacity:0;transition:opacity .26s ease 0s}
body.drawer-open .drawer__foot{opacity:1;transition:opacity .44s ease .48s}
.drawer__cta{display:block;padding:16px;text-align:center;border:1px solid rgba(251,238,214,.5);
  color:var(--cream);font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.drawer__foot p{margin:0;font-size:14px;letter-spacing:.08em;color:rgba(251,238,214,.92);text-align:center}
.drawer__foot .lang-switch{text-align:center;font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(251,238,214,.92)}
.drawer__foot .lang-switch a{color:rgba(251,238,214,.55)}
.drawer__foot .lang-switch a.active,.drawer__foot .lang-switch a:hover{color:var(--cream)}
/* Note for whoever edits this next: the mobile drawer is the CREAM rebuild
   further down this file, not this dark block. Type size, row height and the
   language marker for phones all live there. */

@media (max-width:1040px){
  body.drawer-open{overflow:hidden}
  .nav-toggle{display:block;order:3}
  .site-header .inner{height:66px;gap:16px}
  .site-header img{height:26px}
  .nav-main{display:none}
  .nav-meta{display:none}

  /* Rhythm: desktop uses 120–170px sections; a phone needs about half */
  .chapter{padding:74px 22px 68px!important}
  .band-inner{padding:74px 0!important}
  .band-sage .split,.band-dark .inner{padding-left:22px;padding-right:22px}
  .wrap,.area-cards,.lot-cols{padding-left:22px;padding-right:22px}
  .area-cards{padding-bottom:74px}

  /* Type scales down but stays generous */
  body{font-size:16px}
  h1{font-size:clamp(32px,8.4vw,44px);line-height:1.08}
  h2{font-size:clamp(27px,7.2vw,36px)}
  .statement{font-size:clamp(21px,5.6vw,27px);line-height:1.44}
  .lede,.area-card p,.detail-grid p{font-size:16px;line-height:1.78}

  /* Single column everywhere */
  .chapter-grid,.day-cols,.band-sage .split,.calc,.lot-cols,
  .card-grid,.detail-grid,.season-grid,.cards-3,.steps{grid-template-columns:1fr!important;gap:30px!important}
  .chapter-body{grid-column:auto}
  .chapter-grid>div:first-child{max-width:none}

  /* Hero: fill the viewport, keep the wordmark clear of the fold */
  .hero{height:calc(100svh - 66px);min-height:520px}
  .hero-center{padding:0 24px}
  .hero-center img{width:118px}
  .hero-center h1{margin-top:16px}
  .hero-center .script{font-size:23px;margin-top:18px}
  /* Tighter plate and spacing so the Spanish line — five words longer than the
     English — still holds one line on a 375 phone. The corner marks stay: they
     are what makes it read as a stamp rather than as a button. */
  /* nowrap was tried here and was wrong: the Spanish line is 449px against a
     305px plate, so it ran straight out of the stamp and off the screen. The
     line wraps instead — two lines inside a stamp is what a real stamp looks
     like anyway — and the plate grows to hold it. */
  .hero-center .hero-claim{margin-top:18px;letter-spacing:.09em;font-size:11px;
    padding:10px 16px;max-width:calc(100% - 10px)}
  .hero-center .hero-claim__t{text-align:center;line-height:1.6}
  .hero-center .hero-claim::after{inset:-5px;
    background-size:10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,2px 10px}
  .area-hero{height:min(66svh,520px);min-height:380px}
  .area-hero__text{padding:40px 24px}

  /* Hero facts become a scrollable ticker rather than a cramped wrap */
  .hero-bar .inner{padding:14px 22px 16px;gap:12px}
  .hero-facts{gap:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;font-size:9.5px;letter-spacing:.16em}
  .hero-facts::-webkit-scrollbar{display:none}
  .hero-facts span{flex:0 0 auto;padding:0 14px;border-left:1px solid rgba(251,238,214,.28)}
  .hero-facts span:first-child{padding-left:0;border-left:none}
  .hero-nav{width:100%;justify-content:space-between}
  .scroll-cue{display:none}
  .rail{display:none}

  /* Day timeline: the photo leads, the row follows */
  .day-stage{position:static;order:-1}
  .day-frame{height:56svh}
  .day-row{grid-template-columns:64px 1fr;gap:16px;padding:20px 0 20px 14px}
  .day-row h3{font-size:21px}
  .day-row p{font-size:15px}

  /* Full-bleed photography reads better edge to edge on a phone */
  .band-photo{min-height:300px}
  .cards-3 img,.area-card img{height:260px}
  .parallax{background-attachment:scroll;min-height:58svh}
  .atmos{height:min(62svh,460px)}
  .atmos .q,.parallax .q{font-size:clamp(23px,6.4vw,32px)}

  /* Gallery: snap each frame so a swipe lands cleanly */
  .gallery{padding:0 22px;gap:14px;scroll-snap-type:x mandatory}
  .gallery img{height:44svh;scroll-snap-align:center}
  #ads-cursor{display:none}

  /* Lot plan: the map first, then the panel, then the table */
  .plan{padding:14px}
  .marker{font-size:9px!important}
  .lot-panel{position:static;padding:26px 22px 30px}
  .lot-table{font-size:14px}
  .lot-table th,.lot-table td{padding:12px 6px}
  .filters{gap:8px}
  .filters button,.area-filters button{padding:8px 13px;font-size:10.5px}

  /* Availability + stats stack rather than squeeze */
  .avail{padding:22px 22px;gap:20px}
  .avail-counts{gap:24px}
  .avail-counts b{font-size:32px}
  .stat-row{grid-template-columns:1fr 1fr}
  .stat-row div{padding:26px 18px}
  .stat-row b{font-size:32px}

  /* Calculator: 44px touch targets, panel last */
  .calc-panel{padding:30px 24px 32px}
  .calc-total{font-size:44px}
  /* The thumb was 26px but the input's own box was 2px tall, and a form
     control is only hit-tested inside its box — so on a phone the slider
     answered a two-pixel band and the thumb the finger was aiming at did
     nothing. The element is now 44px tall and transparent; the visible
     hairline is drawn by the track, so it looks identical and can be
     grabbed anywhere down the row. 07.09.2026. */
  input[type=range]{height:44px;background:transparent;margin:10px 0 0}
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(68,64,46,.28);border-radius:2px}
  input[type=range]::-moz-range-track{height:2px;background:rgba(68,64,46,.28);border-radius:2px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;border-width:5px;margin-top:-12px}
  input[type=range]::-moz-range-thumb{width:26px;height:26px;border-width:5px}
  .pkg{padding:20px 20px 22px}
  .sliders{gap:28px}

  /* Forms: 16px minimum stops iOS zooming on focus */
  .field input,.field select,.field textarea{font-size:16px;padding:15px 16px}
  .btn-solid{padding:17px}
  .season{padding:26px 22px 28px}
  .site-footer{padding:60px 22px 36px}
  .site-footer nav{gap:18px 22px}
  .legal{flex-direction:column;gap:8px;text-align:center}
}

/* Very small phones */
@media (max-width:400px){
  .chapter{padding:60px 18px 56px!important}
  .stat-row{grid-template-columns:1fr}
  .drawer__nav a{font-size:30px;padding:11px 0}
}

/* Landscape phone: the hero must not eat the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .hero,.area-hero{height:auto;min-height:0;padding:80px 0 60px}
  .hero-center{position:static;padding:20px 24px}
  .drawer{justify-content:flex-start;padding-top:70px;overflow-y:auto}
  .drawer__nav a{font-size:24px;padding:9px 0}
}

/* Touch devices: hover styling never sticks after a tap */
@media (hover:none){
  .area-card:hover,.step:hover{transform:none;box-shadow:none}
  .cards-3 a:hover{color:inherit}
}

/* ---------- Legal ---------- */
.legal-doc .inner{max-width:760px}
.legal-doc h1{margin-bottom:10px}
.legal-doc__updated{margin:0 0 34px;font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.legal-doc__intro{font-family:var(--serif);font-size:clamp(20px,2.3vw,27px);line-height:1.5;
  margin:0 0 44px;padding-bottom:32px;border-bottom:1px solid rgba(68,64,46,.2)}
.legal-doc__section{margin-bottom:40px}
.legal-doc__section h2{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3;
  letter-spacing:0;margin-bottom:14px}
.legal-doc__section p{margin:0 0 14px;font-size:16.5px;line-height:1.85}
.legal-doc__section p:last-child{margin-bottom:0}
.legal-doc__contact{margin-top:56px;padding:26px 28px;background:var(--sand);border-left:2px solid var(--clay)}
.legal-doc__contact p:first-child{margin:0 0 10px;font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.legal-doc__contact p:last-child{margin:0;font-size:15.5px;line-height:1.8}
.legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:26px 0 0;
  font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.legal-nav a{color:var(--ink)}

/* ---------- Cookie notice ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:70;max-width:400px;display:flex;flex-direction:column;
  gap:14px;padding:22px 24px;background:var(--sand);border:1px solid rgba(68,64,46,.2);
  box-shadow:0 20px 44px -26px rgba(68,64,46,.5);
  transform:translateY(14px);opacity:0;transition:opacity .5s ease,transform .5s var(--ease)}
.cookie[hidden]{display:none}
.cookie.on{transform:none;opacity:1}
.cookie p{margin:0;font-size:14.5px;line-height:1.7}
.cookie a{text-decoration:underline;text-underline-offset:3px}
.cookie__ok{align-self:flex-start;padding:11px 22px;background:var(--ink);border:1px solid var(--ink);
  color:var(--cream);cursor:pointer;font-family:var(--serif);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}
@media (max-width:1040px){
  .cookie{left:14px;right:14px;bottom:14px;max-width:none;padding:18px 20px}
  .legal-nav{gap:14px 18px;font-size:10.5px}
  .legal-doc__section h2{font-size:18px}
  .legal-doc__section p{font-size:16px}
}

/* ---------- Footer contact block ---------- */
.foot-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;
  padding:40px 0 30px;border-bottom:1px solid rgba(68,64,46,.14);text-align:left}
.foot-contact__k{margin:0 0 12px!important;font-family:var(--serif);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay-text)}
.foot-contact p{margin:0 0 6px;font-size:15.5px;line-height:1.7}
.foot-contact a{border-bottom:1px solid rgba(68,64,46,.28)}
.foot-contact a:hover{border-color:var(--ink)}
@media (max-width:1040px){
  .foot-contact{gap:26px;padding:30px 0 24px;text-align:center}
  .foot-contact a{border-bottom:none;text-decoration:underline;text-underline-offset:3px}
}

@media (max-width:1040px){
  /* .day-stage removed 30.08: it is now deliberately pinned on phones so the
     photograph is on screen when the timeline changes it. See "Control and
     consequence must share the screen" at the end of this file. */
  .lot-panel,.calc-panel{position:static!important}
  .plan{padding:12px}
  iframe{height:460px!important}
}

/* The chapter rail is gone for good. It was hidden below 1580px only, so on a
   wide monitor the old list of chapter names was still painted down the left
   of the home page — reported twice as "text we deleted that is still there".
   The markup stays in front-page.php as an anchor for the scroll logic; it is
   simply never shown. */
.rail{display:none!important}

/* ---------- Build · payment schedule (design parity) ---------- */
.pay-sched{max-width:860px;margin:80px auto 0;background:var(--sand);
  border:1px solid rgba(68,64,46,.2);padding:44px 46px 46px}
.pay-tabs{display:flex;flex-wrap:wrap;gap:26px;padding-bottom:26px;
  border-bottom:1px solid rgba(68,64,46,.16)}
.pay-tabs button{background:transparent;border:none;padding:0 0 6px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:400;color:rgba(68,64,46,.82);border-bottom:1px solid transparent;
  transition:all .26s ease}
.pay-tabs button.on{color:var(--ink);border-bottom-color:var(--clay)}
.pay-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:26px 0 22px}
.pay-head span:first-child{font-family:var(--serif);font-size:30px}
.pay-head span:last-child{font-family:var(--serif);font-size:26px;color:var(--olive)}
.pay-row{display:grid;grid-template-columns:54px 1fr 190px;gap:20px;align-items:center;
  padding:15px 0;border-top:1px solid rgba(68,64,46,.12)}
.pay-row .pct{font-family:var(--serif);font-size:20px;color:var(--clay)}
.pay-row p{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.pay-row .track{margin-top:10px;height:3px;background:rgba(68,64,46,.13);width:100%}
.pay-row .track i{display:block;height:3px;background:var(--sage);
  transition:width .6s cubic-bezier(.16,.84,.28,1)}
.pay-row .amt{text-align:right;font-family:var(--serif);font-size:20px}
@media (max-width:720px){
  .pay-sched{padding:30px 24px 32px}
  .pay-row{grid-template-columns:46px 1fr;row-gap:8px}
  .pay-row .amt{grid-column:2;text-align:left;font-size:18px}
}

/* ---------- Per-screen page ground (design parity) ----------
   Home and The Area sit on Florcita Blanca (#FBEED6); the five interior
   screens sit on the lighter sand (#FBEED6), exactly as in the design. */
body.ads-lots,body.ads-location,body.ads-build,body.ads-numbers,body.ads-contact{
  background:var(--sand)}
body.ads-lots .band-sand,body.ads-location .band-sand,body.ads-build .band-sand,
body.ads-numbers .band-sand,body.ads-contact .band-sand{background:var(--cream)}
body.ads-lots .avail,body.ads-lots .plan,body.ads-lots .lot-panel,
body.ads-numbers .calc-panel,body.ads-build .pay-sched,body.ads-contact .calc-panel{
  background:var(--cream)}

/* ---------- Location · distances + map opener (design parity) ---------- */
.dist-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid rgba(68,64,46,.12)}
.dist-list>div:first-child{border-top:1px solid rgba(68,64,46,.12)}
.dist-list span:first-child{font-size:17px}
.dist-list .rule{border-bottom:1px dotted rgba(68,64,46,.32);transform:translateY(-4px)}
.dist-list span:last-child{font-family:var(--serif);font-size:21px;color:var(--olive);white-space:nowrap}
.map-open{position:relative;display:block;height:320px;overflow:hidden;text-decoration:none}
.map-open img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.map-open:hover img{transform:scale(1.02)}
.map-open__cta{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;background:rgba(68,64,46,.5)}
.map-open__cta .eyebrow{font-size:12px;color:var(--cream);opacity:1}
.map-open__cta span:last-child{font-family:var(--display);font-size:30px;color:var(--cream)}
@media (max-width:720px){.dist-list>div{grid-template-columns:1fr auto}.dist-list .rule{display:none}}

/* ---------- Lots · design parity (filters, tooltip, legend, list) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:34px;padding-bottom:0;border:none}
.filters button{background:transparent;border:none;border-radius:0;padding:0 0 6px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:400;color:rgba(68,64,46,.82);border-bottom:1px solid transparent;
  transition:all .26s ease}
.filters button.on,.filters button[aria-pressed="true"]{background:transparent;color:var(--ink);
  border-color:var(--clay)}

.marker{border:1px solid rgba(68,64,46,.3);font-weight:400;letter-spacing:.04em;padding:0}
.marker.is-hover{background:var(--cream);transform:translate(-50%,-50%) scale(1.18);z-index:2}
.marker.is-selected,.marker[aria-pressed="true"]{background:var(--ink);color:var(--cream);
  border-color:var(--ink);box-shadow:none;transform:translate(-50%,-50%) scale(1.4);z-index:3}

.plan-tip{position:absolute;z-index:6;background:var(--ink);color:var(--cream);
  padding:10px 16px 11px;pointer-events:none;white-space:nowrap;text-align:center;opacity:0;
  transform:translate(-50%,-135%);
  transition:opacity .22s ease,left .22s ease,top .22s ease}
.plan-tip p{margin:0}
.plan-tip [data-tip="title"]{font-family:var(--serif);font-size:17px}
.plan-tip [data-tip="meta"]{margin-top:3px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.82}

.plan-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:20px;
  font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink)}
.plan-legend span{display:inline-flex;align-items:center;gap:9px}
.plan-legend i{width:9px;height:9px;border-radius:999px;display:block}
.plan-legend i.a{background:var(--sage)}
.plan-legend i.c{background:var(--clay-text)}
.plan-legend i.s{background:#CDD0C2}

.lot-status{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.lot-panel .spec-list span:last-child{font-family:var(--serif);font-size:22px;color:var(--ink)}
.lot-panel .spec-list div:last-child span:last-child{font-size:18px}
.lot-panel .spec-list span.lot-status{font-family:var(--sans);font-weight:300;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase}
.lot-panel .spec-list span.lot-status.available{color:#4E5640}
.lot-panel .spec-list span.lot-status.contract{color:var(--clay-text)}
.lot-panel .spec-list span.lot-status.sold{color:var(--ink-muted)}
.lot-panel .spec-list div{padding:15px 0;border-bottom:1px solid rgba(68,64,46,.13)}
.lot-status.available{color:#4E5640}
.lot-status.contract{color:var(--clay-text)}
.lot-status.sold{color:var(--ink-muted)}

.shortlist-btn{background:transparent;border:none;padding:0 0 7px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-muted);border-bottom:1px solid rgba(68,64,46,.82);transition:all .24s ease}
.shortlist-btn.on{color:#4E5640;border-bottom-color:var(--olive)}
.enquire.has-saved{color:#4E5640;border-bottom-color:var(--olive)}

.lot-list{border-top:1px solid rgba(68,64,46,.2)}
.lot-row{display:grid;grid-template-columns:80px 1fr 130px 150px 46px;gap:16px;
  padding:13px 4px;align-items:center;cursor:pointer;
  border-bottom:1px solid rgba(68,64,46,.12);transition:background .2s ease}
.lot-row:hover,.lot-row.is-selected{background:rgba(148,138,89,.09)}
.lot-row--head{cursor:default;background:none!important;font-family:var(--serif);
  font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.lot-row .c-id{font-family:var(--serif);font-size:22px}
.lot-row .c-type{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);align-self:center}
.lot-row .c-size{text-align:right;font-size:16px;align-self:center;color:var(--ink)}
.lot-row .c-price{text-align:right;font-family:var(--serif);font-size:21px;align-self:center}
.lot-row .c-price.sold,.lot-row .c-price.contract{color:var(--ink-muted)}
.lot-row .c-save{justify-self:end;width:28px;height:28px;padding:0;cursor:pointer;
  border-radius:999px;border:1px solid rgba(68,64,46,.3);background:transparent;
  color:rgba(68,64,46,.82);font-family:var(--sans);font-size:14px;line-height:1;
  transition:all .24s ease}
.lot-row .c-save.on{border-color:#4E5640;background:#4E5640;color:var(--cream)}
@media (max-width:760px){
  .lot-row{grid-template-columns:56px 1fr 92px 34px;row-gap:4px}
  .lot-row .c-size{grid-column:2;font-size:13px}
  .lot-row .c-price{font-size:18px}
}


/* ---------- Contact · FAQ + named professionals (design parity) ---------- */
.faq__item{padding:20px 0;border-top:1px solid rgba(68,64,46,.14)}
.faq__item:last-child{border-bottom:1px solid rgba(68,64,46,.14)}
.faq__q{margin:0;font-family:var(--serif);font-size:19px;line-height:1.35}
.faq__a{margin:9px 0 0;font-size:15px;line-height:1.8;color:var(--ink-70)}
.pro{padding:34px 32px 36px;border:1px solid rgba(68,64,46,.26);background:var(--cream)}
body.ads-contact .pro{background:var(--sand)}
.lead-chips{margin-bottom:22px}
.lead-chips [data-chips]{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lead-chips button{border:1px solid var(--olive);background:var(--olive);color:var(--cream);
  border-radius:999px;padding:7px 14px;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

/* ---------- Chapter name label (design parity: italic serif, not caps) ---------- */
.chapter-name{margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:19px;
  letter-spacing:.025em;color:var(--ink)}
.nav-main a.active,.nav-main .active>a{border-bottom:1px solid rgba(68,64,46,.5)}

/* ---------- Location · air-access note (tinted card, clay rule) ---------- */
.air-note{margin-top:44px;padding:30px 32px;background:var(--cream);border-left:1px solid var(--clay)}
body.ads-location .air-note{background:var(--cream)}

/* ---------- Closing CTA blocks (design: Garamond italic 3.2vw/46px + 16.5px lede) ---------- */
.cta-h2{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(30px,3.2vw,46px);line-height:1.16}
.cta-lede{margin:24px auto 0;max-width:460px;font-size:16.5px;line-height:1.85;color:var(--ink)}

/* ---------- Build · design-declared blocks ---------- */
.zoning-note{max-width:var(--wrap);margin:0 auto 60px;padding:26px 30px;
  background:var(--cream);border-left:2px solid var(--clay)}
.zoning-note .eyebrow{font-size:12px;margin:0 0 10px}
.zoning-note p{margin:0;max-width:74ch;font-size:16px;line-height:1.8;color:var(--ink)}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps-row>div{padding:0 32px;border-left:1px solid rgba(68,64,46,.24)}
.steps-row .num{margin:0;font-family:var(--serif);font-size:15px;letter-spacing:.18em;color:var(--ink)}
.steps-row h3{margin:18px 0 0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;color:var(--ink)}
.steps-row p{margin:14px 0 0;font-size:15.5px;line-height:1.8;color:var(--ink)}
@media (max-width:900px){
  .steps-row{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .steps-row>div:nth-child(odd){border-left:none}
}
@media (max-width:560px){
  .steps-row{grid-template-columns:1fr;row-gap:34px}
  .steps-row>div{border-left:none;padding:0}
}
.villa-title{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3vw,42px);line-height:1.18}
.artist-note{margin:12px 0 0;font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ---------- Numbers · value ladder (design: dark band #44402E) ---------- */
.ladder-band{background:var(--ink);padding:120px 40px}
.ladder-band .inner{max-width:var(--wrap);margin:0 auto;padding:0}
.ladder-eyebrow{margin:0 0 26px;color:var(--sage)}
.ladder-h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,3.5vw,54px);line-height:1.1;color:var(--cream)}
.ladder-lede{margin:26px 0 0;font-size:17px;line-height:1.9;color:rgba(251,238,214,.86)}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  margin-top:64px;background:rgba(251,238,214,.18)}
.ladder .rung{background:rgba(169,178,155,.05);padding:34px 30px 36px}
.ladder .rung--1{background:rgba(169,178,155,.13)}
.ladder .rung--2{background:rgba(169,178,155,.2)}
.ladder .rung--3{background:rgba(166,135,99,.18)}
.ladder .rung__step{margin:0;font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.ladder .rung__name{margin:14px 0 0;font-family:var(--display);font-size:27px;
  line-height:1.15;color:var(--cream)}
.ladder .rung__value{margin:16px 0 0;font-family:var(--serif);font-size:21px;color:var(--cream)}
.ladder .rung__body{margin:12px 0 0;font-size:14.5px;line-height:1.7;color:var(--cream)}
.ladder-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;
  margin-top:56px;padding-top:40px;border-top:1px solid rgba(251,238,214,.22)}
.ladder-stats .stat__value{margin:0;font-family:var(--display);font-size:40px;line-height:1;color:var(--sage)}
.ladder-stats .stat__label{margin:14px 0 0;font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(251,238,214,.92)}
.ladder-stats .stat__body{margin:12px 0 0;font-size:15px;line-height:1.75;color:rgba(251,238,214,.92)}
.ladder-note{margin:40px 0 0;max-width:66ch;font-size:13.5px;line-height:1.75;color:rgba(251,238,214,.92)}

/* ---------- Numbers · lot chips + panel labels (design-declared) ---------- */
.lot-chips button{border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;transition:all .24s ease;
  border:1px solid rgba(68,64,46,.3);background:transparent;color:rgba(68,64,46,.82)}
.lot-chips button[aria-pressed="true"]{border-color:var(--olive);background:var(--olive);color:var(--cream)}
.calc-panel .kicker{font-family:var(--sans);font-weight:300;font-size:14.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.calc-yield .pair span{font-family:var(--serif);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ---------- Contact · design-declared blocks ---------- */
.form-head{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:30px;
  line-height:1.2;letter-spacing:normal;text-transform:none;color:var(--ink)}
.form-sub{margin:0 0 26px;font-size:15.5px;line-height:1.75;color:var(--ink)}
.faq__item{padding:20px 0;border-bottom:1px solid rgba(68,64,46,.12);border-top:none}
.faq__item:last-child{border-bottom:1px solid rgba(68,64,46,.12)}
.faq__q{margin:0;font-family:var(--serif);font-size:21px;line-height:1.3}
.faq__a{margin:10px 0 0;font-size:16px;line-height:1.8;color:var(--ink)}
.pro{padding:26px 0 0;border:none;border-top:1px solid rgba(68,64,46,.32);background:none!important}
.pro .kicker{font-size:12px;color:var(--ink)}
.pro h3{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.2}
.pro .firm{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:18px;
  letter-spacing:.025em;color:var(--ink)}
.pro .spec-list span:first-child{font-size:11.5px;letter-spacing:.18em}
.pro .spec-list span:last-child{font-size:15px;text-align:right}
.pro .spec-list div{padding:12px 0;border-bottom:1px solid rgba(68,64,46,.16)}
.form-head{font-weight:300}
.lead-form button[type=submit]{color:var(--ink)}

/* ---------- Per-screen heading scale, as declared in the design ---------- */
body.ads-lots h1,body.ads-numbers h1{font-size:clamp(38px,4.4vw,68px);line-height:1.12}
body.ads-location h1,body.ads-build h1{font-size:clamp(38px,4.4vw,66px);line-height:1.13}
body.ads-contact h1{font-size:clamp(38px,4.2vw,62px);line-height:1.13}
body.ads-contact [data-screen-label="Professionals"] h2{font-size:clamp(30px,3.3vw,50px);line-height:1.1}

/* ---------- Home · photo band (Financing) ---------- */
.band-photo{position:relative;background:var(--ink);overflow:hidden}
.band-photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) sepia(.1);opacity:.2}
.band-photo .grain{position:absolute;inset:0;background-image:url('assets/img/paper-grain.jpg');
  background-size:520px;mix-blend-mode:overlay;opacity:.14;pointer-events:none}
.band-photo .inner{position:relative;max-width:1280px;margin:0 auto;padding:150px 44px}
.band-photo .chapter-no{color:var(--sage)}
.band-photo .chapter-name{color:rgba(251,238,214,.92)}
.band-photo h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.9vw,60px);
  line-height:1.08;color:var(--cream)}
.band-photo .lede{color:rgba(251,238,214,.92)}
.band-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;
  border-top:1px solid rgba(251,238,214,.22);padding-top:40px}
.band-stats .stat__value{margin:0;font-family:var(--display);font-weight:300;font-size:44px;
  line-height:1;color:var(--sage)}
.band-stats .stat__label{margin:16px 0 0;font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(251,238,214,.92)}
.band-stats .stat__body{margin:12px 0 0;font-size:15.5px;line-height:1.75;color:rgba(251,238,214,.92)}
.btn-line--light{color:var(--cream);border-bottom-color:rgba(251,238,214,.5)}
.btn-line--light:hover{border-bottom-color:var(--cream)}

/* ---------- Home · link + heading scale declared on this screen only ---------- */
body.ads-home .btn-line{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em}
body.ads-home #day h2{font-size:clamp(34px,3.8vw,58px);line-height:1.1}
body.ads-home #water h2{font-family:var(--display);font-style:normal;
  font-size:clamp(34px,3.6vw,56px);line-height:1.1}
body.ads-home #land h2{font-size:clamp(34px,3.8vw,58px);line-height:1.1}
body.ads-home #made h2{font-size:clamp(34px,3.8vw,58px);line-height:1.1}
body.ads-home .spec-list span:first-child{font-size:13px}
.day-caption{margin:16px 0 0;font-family:var(--sans);font-weight:300;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.day-row.on time,.day-row:hover time,.day-row:focus-within time{color:var(--olive)}

/* ---------- Home · remaining design-declared values ---------- */
body.ads-home #water h2,body.ads-home #guide h2{font-style:normal!important}
body.ads-home #guide h2{font-family:var(--display);font-size:clamp(34px,3.7vw,56px);line-height:1.1}
body.ads-home .band-sage .btn-line{color:var(--ink)}
body.ads-home .band-photo .btn-line--light{color:var(--cream)}
body.ads-home .band-photo .btn-line--light:last-child{color:rgba(251,238,214,.92)}
body.ads-home .band-dark .chapter-name{color:rgba(251,238,214,.92)}
body.ads-home .band-dark a.link{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em}
.gallery-drag{font-weight:300}
#ads-cursor{font-weight:400}
/* Home's sage band keeps full ink, matching the design. */
body.ads-home .band-sage,body.ads-home .band-sage *,
body.ads-home .band-sage .btn-line{color:var(--ink)}
body.ads-home .band-sage .spec-list span:last-child{color:var(--ink)}
body.ads-home .map-note{letter-spacing:.05em}

/* ---------- The Area · band typography, as declared in the design ---------- */
body.ads-area .band-sage .spec-list span:first-child{font-family:var(--serif);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark)}
body.ads-area .band-sage .spec-list span:last-child{font-family:var(--sans);font-weight:300;
  font-size:15px;color:var(--dark);text-align:right}
body.ads-area .band-sage .spec-list div{padding:15px 0;border-bottom:1px solid rgba(47,45,36,.22)}
body.ads-area .band-sage h2,body.ads-area .band-sage p{color:var(--dark)}
body.ads-area .atmos p.q{font-size:clamp(30px,3.2vw,46px);letter-spacing:.025em}
body.ads-area .atmos .script{font-size:28px;color:rgba(251,238,214,.92)}

/* ---------- The Area · wellness + season labels ---------- */
body.ads-area .stat-row span{font-size:12px;letter-spacing:.18em}
body.ads-area .season .eyebrow{font-size:11.5px;letter-spacing:.2em}
body.ads-area .area-cards .filters button{font-size:11.5px;letter-spacing:.14em}
body.ads-area .area-filters button[aria-pressed="true"]{color:var(--cream)}

/* ---------- The Area · per-section heading scale ---------- */
body.ads-area [data-screen-label="Surf"] h2{font-size:clamp(30px,3.3vw,50px);line-height:1.1}
body.ads-area [data-screen-label="Area CTA"] h2{font-size:clamp(30px,3.2vw,46px);line-height:1.16}
/* The design leaves these h3 at the user-agent's bold default. */
.detail-head h3{font-weight:700}
body.ads-area [data-screen-label="Nature"] .chapter-name{color:rgba(251,238,214,.92)}

/* ---------- Lot markers · brand pins with staggered drop-in + pulse ---------- */
@keyframes ads-pin-in{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(-14px) scale(.4)}
  70%{opacity:1;transform:translate(-50%,-50%) translateY(2px) scale(1.06)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes ads-pin-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(251,238,214,.95),0 0 0 9px rgba(105,115,83,.28),0 6px 14px -6px rgba(47,45,36,.55)}
  50%{box-shadow:0 0 0 3px rgba(251,238,214,.95),0 0 0 18px rgba(105,115,83,0),0 6px 14px -6px rgba(47,45,36,.55)}
}
.marker{border:none;box-shadow:0 0 0 2px rgba(251,238,214,.9),0 4px 10px -4px rgba(47,45,36,.5);
  font-family:var(--serif);font-weight:600;
  animation:ads-pin-in .55s var(--ease) both}
.marker.is-hover{background:var(--cream);color:var(--ink);
  transform:translate(-50%,-50%) scale(1.22)}
.marker.is-selected,.marker[aria-pressed="true"]{background:var(--ink);color:var(--cream);
  transform:translate(-50%,-50%) scale(1.35);
  animation:ads-pin-pulse 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .marker{animation:none}
  .marker.is-selected,.marker[aria-pressed="true"]{animation:none;
    box-shadow:0 0 0 3px rgba(251,238,214,.95),0 0 0 9px rgba(105,115,83,.28)}
}

/* Marker coordinate space must equal the image box, not the padded frame. */
.plan-map{position:relative}

/* ---------- Build · what-am-I-pricing tabs ---------- */
.price-tabs{display:inline-flex;gap:34px;padding-bottom:0;border-bottom:1px solid rgba(68,64,46,.16)}
.price-tabs button{background:transparent;border:none;padding:0 2px 12px;cursor:pointer;
  font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(68,64,46,.6);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all .26s ease}
.price-tabs button.on{color:var(--ink);border-bottom-color:var(--clay)}
.price-tabs button:hover{color:var(--ink)}
/* 06.09.2026 — the control now sits above each house rather than once at the
   top of the page, so it needs to read as a small label belonging to the house
   below it, not as a page-level heading repeated three times. */
/* === The pricing control sits on the price (06.09.2026) ================
   Two earlier attempts got this wrong. Once at the top of the section meant
   scrolling away from the number to change how the number was framed. Docked
   into the right margin, it stole width from the copy and did nothing at all
   on a phone, where there is no margin to dock into.

   It belongs to the price, so it sits on the price: small, quiet, directly
   above the figure it rewrites, identical on every screen. */
.price-tabs--inline{margin:26px 0 0;gap:20px;border-bottom:none}
.price-tabs--inline button{
	padding:0 0 5px;font-size:10.5px;letter-spacing:.16em;
	color:rgba(68,64,46,.45);border-bottom-width:1px}
.price-tabs--inline button.on{color:var(--clay-text);border-bottom-color:var(--clay)}
.price-tabs--inline button:hover{color:var(--ink)}
@media (max-width:760px){
	.price-tabs--inline{gap:16px;margin:22px 0 0;flex-wrap:wrap}
	.price-tabs--inline button{font-size:10px;letter-spacing:.12em;min-height:34px;padding:8px 0 5px}
}
/* The price above is a starting figure. Small, quiet, and impossible to miss
   because it sits directly under the number it qualifies. */
.price-note{margin:16px 0 0;max-width:52ch;
  font-size:13.5px;line-height:1.7;color:rgba(68,64,46,.62)}
@media (max-width:760px){
  .price-note{font-size:13px}
}

/* --- WhatsApp / Facebook --------------------------------------------- */
.foot-social{display:flex;gap:22px;margin-top:14px}
.foot-social a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;opacity:.85;transition:opacity .25s ease}
.foot-social a:hover{opacity:1}
.foot-social svg{flex:none}

.wa-fab{position:fixed;right:26px;bottom:26px;z-index:900;display:flex;align-items:center;gap:0;
	width:46px;height:46px;justify-content:center;border-radius:999px;
	background:#25D366;color:#fff;box-shadow:0 8px 26px rgba(37,45,34,.35);
	text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,45,34,.4)}
.wa-fab__hint{position:absolute;right:calc(100% + 14px);white-space:nowrap;
	font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.02em;
	background:var(--ink,#44402E);color:#FBEED6;padding:9px 16px;border-radius:6px;
	opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.wa-fab:hover .wa-fab__hint,.wa-fab:focus-visible .wa-fab__hint{opacity:1;transform:none}
@media (max-width:700px){.wa-fab{right:18px;bottom:18px;width:44px;height:44px}}
/* Every link inside a spec row is a real target on a phone — the WhatsApp
   line on Contact was a bare inline link 21px tall, which is half the minimum
   and it is the fastest route a buyer has to a human. 07.09.2026. */
@media (max-width:760px){
	.spec-list a{display:inline-block;padding:12px 0;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab__hint{transition:none}}


/* --- Mobile polish layer (27.08) — desktop untouched ------------------ */
@media (max-width:760px){
  /* Build: flipped villa rows use fixed 2-col grid inline — force stack */
  [data-screen-label="Villa designs"] .wrap>div[data-reveal]{grid-template-columns:1fr!important;gap:34px!important}
  [data-screen-label="Villa designs"] .wrap{gap:80px!important}
}
@media (max-width:560px){
  /* Comfortable side padding: inline 40px paddings squeeze 375px screens */
  section[style*="padding"]{padding-left:24px!important;padding-right:24px!important}
  .ladder-band{padding-left:24px!important;padding-right:24px!important}
  .hero{min-height:600px}
  /* Touch targets ≥44-48px */
  .price-tabs{gap:20px;flex-wrap:wrap;justify-content:center}
  .price-tabs button{min-height:44px;padding:12px 4px}
  .filters button,.lot-chips button,.pkg-list button{min-height:44px}
  .check{min-height:48px}
  /* Type: keep long headings from clipping */
  h1{overflow-wrap:break-word}
  .villa-title{font-size:clamp(26px,7.5vw,32px)}
  .cta-h2{font-size:clamp(26px,7.5vw,34px)}
}
@media (max-width:380px){
  /* auto-fit minmax(300px,1fr) grids can't shrink below 300px */
  [style*="minmax(300px"],[style*="minmax(340px"],[style*="minmax(320px"]{grid-template-columns:1fr!important}
  .ladder{grid-template-columns:1fr}
  .avail-counts{flex-wrap:wrap;gap:18px 22px}
  .avail-counts span{letter-spacing:.14em}
  .ladder .rung{padding:30px 24px}
  .lot-row{grid-template-columns:44px 1fr 78px 30px;gap:10px}
  .lot-row .c-price{font-size:15px}
}
@media (max-width:560px){
  /* Atmosphere quote band: flexible height so the quote is never cut */
  .atmos{height:auto;min-height:420px}
  .atmos img{position:absolute;inset:0;height:100%}
  .atmos .inner{position:relative;inset:auto;padding:90px 24px}
}

/* --- Back to top + Accessibility widget (28.08) ----------------------- */
.ads-top{position:fixed;right:26px;bottom:84px;z-index:899;width:46px;height:46px;
	display:flex;align-items:center;justify-content:center;border-radius:999px;
	background:var(--ink);color:#FBEED6;border:none;cursor:pointer;
	box-shadow:0 8px 22px rgba(37,45,34,.3);opacity:0;transform:translateY(8px);
	pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.ads-top.is-on{opacity:1;transform:none;pointer-events:auto}
.ads-top:hover{transform:translateY(-2px)}

:where(#pa-fab,.ads-top,.wa-fab):focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}

@media (max-width:700px){
	.ads-top{right:18px;bottom:70px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.ads-top,.ads-a11y__btn{transition:none}}

/* --- Accessibility widget (Posidon port, Aldea brand) ------------------ */
html.pa-mono{filter:grayscale(100%)}
html.pa-dark{filter:invert(1) hue-rotate(180deg)}
html.pa-dark img,html.pa-dark video,html.pa-dark iframe,html.pa-dark [style*="background-image"]{filter:invert(1) hue-rotate(180deg)}
html.pa-light{filter:contrast(1.35) brightness(1.05)}
html.pa-readable body,html.pa-readable body *:not(i):not(.pa-ic){font-family:Arial,"Helvetica Neue",Helvetica,Verdana,sans-serif !important;letter-spacing:.01em}
html.pa-spacing body *{letter-spacing:.12em !important;word-spacing:.16em !important;line-height:1.9 !important}
html.pa-links a{text-decoration:underline !important;text-underline-offset:3px;text-decoration-thickness:2px}
html.pa-stopanim *,html.pa-stopanim *::before,html.pa-stopanim *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.pa-stopanim [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
html.pa-hideimg img,html.pa-hideimg picture,html.pa-hideimg svg:not(.pa-keep){opacity:0 !important}
html.pa-hideimg *{background-image:none !important}
html.pa-focus a:focus,html.pa-focus button:focus,html.pa-focus input:focus,html.pa-focus select:focus,html.pa-focus textarea:focus,html.pa-focus [tabindex]:focus,html.pa-focus *:focus-visible{outline:3px solid #B85C38 !important;outline-offset:2px !important;box-shadow:0 0 0 2px #44402E !important}
html.pa-t1 body p,html.pa-t1 body li,html.pa-t1 body span,html.pa-t1 body a,html.pa-t1 body h1,html.pa-t1 body h2,html.pa-t1 body h3,html.pa-t1 body h4,html.pa-t1 body button,html.pa-t1 body input,html.pa-t1 body label,html.pa-t1 body td,html.pa-t1 body th,html.pa-t1 body blockquote,html.pa-t1 body figcaption{font-size:1.14em !important}
html.pa-t2 body p,html.pa-t2 body li,html.pa-t2 body span,html.pa-t2 body a,html.pa-t2 body h1,html.pa-t2 body h2,html.pa-t2 body h3,html.pa-t2 body h4,html.pa-t2 body button,html.pa-t2 body input,html.pa-t2 body label,html.pa-t2 body td,html.pa-t2 body th,html.pa-t2 body blockquote,html.pa-t2 body figcaption{font-size:1.3em !important}
html.pa-t3 body p,html.pa-t3 body li,html.pa-t3 body span,html.pa-t3 body a,html.pa-t3 body h1,html.pa-t3 body h2,html.pa-t3 body h3,html.pa-t3 body h4,html.pa-t3 body button,html.pa-t3 body input,html.pa-t3 body label,html.pa-t3 body td,html.pa-t3 body th,html.pa-t3 body blockquote,html.pa-t3 body figcaption{font-size:1.5em !important}
html.pa-z1 body{zoom:1.1}html.pa-z2 body{zoom:1.2}html.pa-z3 body{zoom:1.35}
html.pa-num a,html.pa-num button,html.pa-num [role="button"]{outline:2px dashed rgba(184,92,56,.9) !important;outline-offset:2px}
html.pa-num a::after,html.pa-num button::after{content:attr(data-pa-n);position:absolute;background:#44402E;color:#FBEED6;font:700 11px/1 monospace;padding:2px 4px;border-radius:4px;transform:translateY(-100%)}

#pa-fab{position:fixed;bottom:26px;left:26px;z-index:100002;width:46px;height:46px;border-radius:50%;
	background:var(--ink,#44402E);color:#FBEED6;border:1.5px solid rgba(251,238,214,.5);cursor:pointer;
	display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,45,34,.45);transition:transform .3s,background .3s,color .3s}
#pa-fab:hover{transform:scale(1.08);background:var(--clay,#B85C38);color:#FBEED6}
#pa-fab svg{width:24px;height:24px;fill:currentColor}
#pa-overlay{position:fixed;inset:0;z-index:100003;background:rgba(47,45,36,.55);opacity:0;visibility:hidden;transition:.25s}
#pa-overlay.open{opacity:1;visibility:visible}
#pa-panel{position:fixed;top:0;left:0;z-index:100004;width:360px;max-width:92vw;height:100vh;height:100dvh;overflow-y:auto;
	background:linear-gradient(180deg,#3A372A,#2E2B20);border-right:1px solid rgba(251,238,214,.25);
	transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
	direction:ltr;font-family:var(--sans,Arial,sans-serif);color:#FBEED6;padding:0 0 24px}
/* The shadow only exists when the panel does. Parked off-screen with a
   permanent `16px 0 46px rgba(0,0,0,.5)`, it painted a black smear down the
   left edge of every page — most visible on a phone, where the panel is
   almost as wide as the screen. */
#pa-panel.open{transform:translateX(0);box-shadow:16px 0 46px rgba(0,0,0,.5)}
#pa-head{position:sticky;top:0;z-index:1;background:linear-gradient(180deg,#403C2D,#332F23);padding:16px 18px;border-bottom:1px solid rgba(251,238,214,.25);display:flex;align-items:center;justify-content:space-between;gap:10px}
#pa-head h2{font-size:18px;font-weight:700;margin:0;color:#FBEED6;display:flex;align-items:center;gap:8px;font-family:var(--serif)}
#pa-close{width:34px;height:34px;min-width:34px;border-radius:8px;background:rgba(251,238,214,.12);border:1px solid rgba(251,238,214,.4);color:#FBEED6;font-size:18px;cursor:pointer;line-height:1}
#pa-panel .pa-sec{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
#pa-panel .pa-sec h3{font-size:12.5px;color:#D9C9A3;margin:0 0 10px;letter-spacing:.08em;font-weight:700;font-family:var(--serif);text-transform:uppercase}
#pa-panel .pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#pa-panel .pa-grid.c1{grid-template-columns:1fr}
.pa-btn{display:flex;align-items:center;gap:8px;justify-content:flex-start;min-height:44px;padding:9px 12px;border-radius:10px;
	background:rgba(255,255,255,.05);border:1px solid rgba(251,238,214,.22);color:#FBEED6;font:600 13.5px/1.2 var(--sans,inherit);cursor:pointer;text-align:start;transition:.15s;width:100%}
.pa-btn:hover,.pa-btn:focus-visible{background:rgba(251,238,214,.14);border-color:#FBEED6}
.pa-btn.on{background:linear-gradient(135deg,#C9A16B,#A9814B);color:#2E2B20;border-color:#FBEED6;font-weight:800}
.pa-btn .pa-ic{font-size:17px;flex:0 0 auto}
.pa-step{display:flex;align-items:center;gap:8px;justify-content:space-between}
.pa-step .pa-lvl{flex:1;text-align:center;font-weight:800;color:#FBEED6}
.pa-step button{width:44px;height:44px;min-width:44px;border-radius:10px;background:rgba(251,238,214,.1);border:1px solid rgba(251,238,214,.4);color:#FBEED6;font-size:20px;cursor:pointer}
#pa-reset{width:100%;min-height:46px;border-radius:10px;background:rgba(200,60,60,.18);border:1px solid rgba(220,120,100,.55);color:#FFD9CE;font:700 14px var(--sans,inherit);cursor:pointer}
.pa-foot{padding:14px 18px;font-size:13px;line-height:1.7;color:rgba(251,238,214,.85)}
.pa-foot a{color:#E4C892}
.pa-foot .pa-coord{margin-top:6px;font-size:12.5px;color:rgba(251,238,214,.7)}
/* 761-880px: match the WhatsApp button's inset. The phone offsets are set
   lower down, in the max-width:760px block, together for both buttons. */
@media(max-width:880px){#pa-fab{width:42px;height:42px;bottom:26px;left:26px}}
@media(prefers-reduced-motion:reduce){#pa-panel,#pa-overlay,#pa-fab{transition:none}}

/* --- Mobile composition layer (28.08) — web-composition skill ---------- */
@media (max-width:560px){
	/* Lots map: pins become visual dots; the list below is the interactive layer */
	.marker{width:16px!important;height:16px!important;min-width:16px;min-height:16px;font-size:0!important;
		border-width:1.5px;box-shadow:0 1px 4px rgba(37,45,34,.35)}
	/* invisible 36px hit area so a fingertip can still tap the dot */
	.marker::before{content:'';position:absolute;inset:-11px;border-radius:999px}
	.marker::after{display:none}
	.plan-tip{display:none!important}
	.plan-hint-desktop{display:none}
	.plan-hint-mobile{display:block}

	/* Hero-facts strip: fade hint that it scrolls */
	.hero-facts{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}

	/* Atmosphere script quote: legible on photo */
	.atmos p.q{font-size:34px;text-shadow:0 2px 18px rgba(30,30,20,.55)}
	.script{text-shadow:0 1px 12px rgba(30,30,20,.35)}

	/* Day rows: tighter grid, calmer type */
	.day-row{grid-template-columns:56px 1fr;gap:14px;padding:22px 0 22px 12px}
	.day-row time{font-size:16px}
	.day-row h3{font-size:20px}
	.day-row p{font-size:15px;line-height:1.7}

	/* Section rhythm: calmer vertical gaps */
	.chapter{padding-top:76px;padding-bottom:70px}

	/* Mobile hero CTA in the thumb zone */
}
.plan-hint-mobile{display:none}
@media (max-width:560px){
	.plan-hint-mobile{display:block}
	.plan-hint-desktop{display:none}
}

/* --- Premium mobile header + wow layer (28.08 v2) ---------------------- */
@media (max-width:760px){
	/* Language switch visible in the mobile header */
	.site-header .nav-meta{display:flex;align-items:center;gap:14px}
	.site-header .nav-meta .enquire{display:none}
	/* Header hides on scroll down, returns on scroll up */
	.site-header{transition:transform .35s var(--ease),box-shadow .3s ease}
	.site-header.hdr-hidden{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* --- Scroll-driven image transitions (modern browsers, mobile) --------- */
@supports (animation-timeline: view()) {
	@media (max-width:760px) and (prefers-reduced-motion:no-preference){
		/* The clip-path wipe on every content image is gone: it put a scroll-driven
		   animation on ~24 elements per page, which is both the repaint artefacts
		   and the stutter. The hero fade below is one element and stays. */
		/* Hero content drifts up + fades as you scroll away */
		.hero-center{
			animation:ads-hero-out linear both;
			animation-timeline:scroll(root);
			animation-range:0 90vh;
		}
	}
}
@keyframes ads-img-in{
	from{clip-path:inset(12% 6% 12% 6% round 2px);transform:scale(1.06);filter:saturate(.85)}
	to{clip-path:inset(0 0 0 0 round 0);transform:scale(1);filter:saturate(1)}
}
@keyframes ads-drift{
	from{transform:translateY(-4%) scale(1.08)}
	to{transform:translateY(4%) scale(1.08)}
}
@keyframes ads-hero-out{
	from{opacity:1;transform:none}
	to{opacity:0;transform:translateY(-46px)}
}

@media (max-width:400px){
	.hero-center h1{font-size:clamp(30px,10.4vw,40px);line-height:1.14;max-width:11ch;overflow-wrap:break-word}
	.hero-center .script{font-size:26px}
}

/* --- Mobile hero legibility (D12: text over busy photo needs a real scrim) --- */
@media (max-width:760px){
	.hero-scrim{background:
		radial-gradient(ellipse 130% 62% at 50% 54%,rgba(41,39,30,.54) 0%,rgba(41,39,30,.26) 60%,rgba(41,39,30,0) 100%),
		linear-gradient(180deg,rgba(47,45,36,.55) 0%,rgba(47,45,36,.22) 38%,rgba(47,45,36,.8) 100%)}
	.hero-center h1{text-shadow:0 2px 26px rgba(28,27,20,.55),0 1px 3px rgba(28,27,20,.4)}
	.hero-center .script{text-shadow:0 1px 16px rgba(28,27,20,.6)}
	.hero-center>img{filter:drop-shadow(0 2px 14px rgba(28,27,20,.5))}
}

/* --- Bar's phone feedback (28.08 v3) ----------------------------------- */
@media (max-width:760px){
	/* 2) no back-to-top on phones */
	.ads-top{display:none!important}

	/* 3) map edge-to-edge with readable, tappable numbered pins */
	.plan{padding:10px}
	.plan-map{margin:0}
	.marker{width:24px!important;height:24px!important;min-width:24px;min-height:24px;
		font-size:9.5px!important;font-weight:600}
	.marker::before{inset:-8px}

	/* 4) accessibility panel must always fit the screen */
	#pa-panel{width:min(340px,94vw);padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
/* 4b) the widget panel is exempt from its own zoom/text-size modes */
html.pa-z1 #pa-panel{zoom:0.9091}
html.pa-z2 #pa-panel{zoom:0.8333}
html.pa-z3 #pa-panel{zoom:0.7407}
html.pa-t1 #pa-panel p,html.pa-t1 #pa-panel span,html.pa-t1 #pa-panel a,html.pa-t1 #pa-panel button,html.pa-t1 #pa-panel h2,html.pa-t1 #pa-panel h3,
html.pa-t2 #pa-panel p,html.pa-t2 #pa-panel span,html.pa-t2 #pa-panel a,html.pa-t2 #pa-panel button,html.pa-t2 #pa-panel h2,html.pa-t2 #pa-panel h3,
html.pa-t3 #pa-panel p,html.pa-t3 #pa-panel span,html.pa-t3 #pa-panel a,html.pa-t3 #pa-panel button,html.pa-t3 #pa-panel h2,html.pa-t3 #pa-panel h3{font-size:13.5px!important}
html.pa-t1 #pa-panel #pa-title,html.pa-t2 #pa-panel #pa-title,html.pa-t3 #pa-panel #pa-title{font-size:18px!important}
html.pa-spacing #pa-panel *{letter-spacing:normal!important;word-spacing:normal!important;line-height:1.4!important}

/* --- Package 1: hero video + sun-rays signature + pin prices (28.08) --- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Sun-rays brand signature above every chapter number (SVG data-URI, brand clay) */
.chapter-no{position:relative;padding-top:26px}
.chapter-no::before{content:'';position:absolute;top:0;left:0;width:34px;height:18px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cg stroke='%23B85C38' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M17 16V4'/%3E%3Cpath d='M9 16L5.5 7'/%3E%3Cpath d='M25 16l3.5-9'/%3E%3Cpath d='M12.6 16L10 5'/%3E%3Cpath d='M21.4 16L24 5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
	opacity:.9}
[style*="text-align:center"] .chapter-no::before,.inner[style*="text-align:center"] .chapter-no::before{left:50%;transform:translateX(-50%)}
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion:no-preference){
		.chapter-no::before{animation:ads-rays linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
	}
}
@keyframes ads-rays{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:.9;transform:translateY(0) scale(1)}}

/* Desktop: hovering a map pin shows the price */
@media (min-width:761px){
	.marker[data-price]:hover::after{content:attr(data-price);position:absolute;bottom:calc(100% + 8px);left:50%;
		transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#FBEED6;
		font:600 11.5px/1 var(--sans);letter-spacing:.06em;padding:7px 10px;border-radius:5px;
		box-shadow:0 6px 18px rgba(37,45,34,.35);pointer-events:none;z-index:3}
}

/* --- Package 2: compare + sticky lot bar (28.08) ----------------------- */
#ads-cmp-btn{margin-top:18px;padding:11px 22px;border:1px solid var(--olive);background:transparent;
	color:var(--olive);font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.16em;
	text-transform:uppercase;cursor:pointer;transition:all .25s ease}
#ads-cmp-btn:hover{background:var(--olive);color:var(--cream)}
#ads-cmp{position:fixed;inset:0;z-index:100010;background:rgba(47,45,36,.6);display:flex;
	align-items:center;justify-content:center;padding:20px}
#ads-cmp[hidden]{display:none}
.cmp-card{background:var(--cream);max-width:640px;width:100%;max-height:86vh;overflow:auto;
	border:1px solid rgba(68,64,46,.25);box-shadow:0 24px 70px rgba(30,28,20,.45);padding:22px 24px 26px}
.cmp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cmp-head p{margin:0;font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.cmp-x{width:34px;height:34px;border:1px solid rgba(68,64,46,.3);background:transparent;color:var(--ink);cursor:pointer;font-size:16px}
.cmp-card table{width:100%;border-collapse:collapse}
.cmp-card th{width:34%;text-align:start;font:600 12px/1.4 var(--serif);letter-spacing:.1em;
	text-transform:uppercase;color:rgba(68,64,46,.6);padding:10px 8px;border-top:1px solid rgba(68,64,46,.14)}
.cmp-card td{padding:10px 8px;border-top:1px solid rgba(68,64,46,.14);font-size:14.5px}
.cmp-card .cmp-lot{font-family:var(--serif);font-size:17px;color:var(--olive);border-top:none}
.cmp-card tr:first-child th{border-top:none}

#ads-lotbar{position:fixed;left:0;right:0;bottom:0;z-index:901;display:flex;align-items:center;
	justify-content:space-between;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
	background:rgba(47,45,36,.97);backdrop-filter:blur(8px);box-shadow:0 -6px 24px rgba(30,28,20,.35)}
#ads-lotbar[hidden]{display:none}
#ads-lotbar .lb-t{color:#FBEED6;font-family:var(--serif);font-size:15px}
#ads-lotbar .lb-cta{flex:none;padding:11px 22px;background:var(--clay);color:#FBEED6;text-decoration:none;
	font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
/* --- The two floating buttons sit on the same line, out of the way ------
   They were at different heights on the Lots page: WhatsApp was pinned 78px up
   for a lot bar that is only there once a lot has been chosen, so on arrival it
   hovered in the middle of a paragraph. Both are now on the bottom line, both
   clear the iOS home indicator, and both step up together — only while the bar
   is actually on screen (body.lotbar-up, set in lots-map.js). */
@media (max-width:760px){
	.wa-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
	#pa-fab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
	body.lotbar-up .wa-fab,body.lotbar-up #pa-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* --- Brand header v2: one stacked logo everywhere + bulletproof language segment --- */

.lang-switch{display:inline-flex;align-items:stretch;border:1px solid rgba(68,64,46,.3);
	font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.18em;line-height:1}
.lang-switch>span{display:none}
.lang-switch a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
	min-width:44px;min-height:38px;padding:0 6px;color:rgba(68,64,46,.55);text-decoration:none;
	-webkit-tap-highlight-color:rgba(68,64,46,.15);transition:color .25s ease,background .25s ease}
.lang-switch a.active{color:var(--cream);background:var(--ink)}
.lang-switch a:not(.active):hover{color:var(--ink)}
@media (max-width:760px){
	.lang-switch a{min-height:42px;min-width:46px}
}

/* --- Signature footer (28.08 command sprint) --------------------------- */
.site-footer{background:var(--cream);border-top:1px solid rgba(68,64,46,.16);padding:0 40px 34px;overflow:hidden}
.site-footer .ft-word{padding:54px 0 8px;user-select:none;max-width:var(--wrap);margin:0 auto}
.site-footer .ft-word svg{display:block;width:100%;height:auto;max-height:150px}
.site-footer .ft-word text{font-family:var(--display);font-size:100px;letter-spacing:.04em;
	fill:rgba(68,64,46,.07)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;max-width:var(--wrap);
	margin:0 auto;padding:26px 0 44px;border-top:1px solid rgba(68,64,46,.14)}
.ft-brand img{height:74px;width:auto}
.ft-brand .script{margin:16px 0 0;font-size:21px;color:var(--olive)}
.site-footer .ft-avail{margin:20px 0 0;font-family:var(--serif);font-weight:600;font-size:12px;
	letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ft-avail span{color:rgba(68,64,46,.5)}
.site-footer .ft-k{margin:0 0 16px;font-family:var(--serif);font-weight:600;font-size:11.5px;
	letter-spacing:.2em;text-transform:uppercase;color:rgba(68,64,46,.55)}
.site-footer .ft-col a{display:block;margin:9px 0;font-size:15px;color:var(--ink);text-decoration:none;width:max-content}
.site-footer .ft-col a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease)}
.site-footer .ft-col a:hover{background-size:100% 1px}
.site-footer .ft-addr{margin:9px 0;font-size:15px;line-height:1.7;color:rgba(68,64,46,.75);max-width:24ch}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
	max-width:var(--wrap);margin:0 auto;padding-top:22px;border-top:1px solid rgba(68,64,46,.14);
	font-size:12.5px;color:rgba(68,64,46,.6)}
/* The one social mark. Ink at the same weight as the legal links beside it, so
   it belongs to the row rather than announcing itself; clay on hover, like every
   other link on the site. The glyph is 18px but the target is 44, because a
   thumb needs that much and the bottom bar is the last thing on a phone. */
/* It was ink at 60% — 3.14:1 against the cream and, measured, a warm tone
   rather than a cool one, so it read as a smudge and people missed it. A solid
   ocean roundel with a cream glyph instead: unmissable, 6.98:1 either way, and
   still the site's own colour rather than Facebook's. The 34px disc sits inside
   a 44px target so the thumb gets what it needs. 06.09.2026. */
.ft-social{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-12px 0;color:var(--cream);
  transition:transform .3s var(--ease),background .3s var(--ease)}
.ft-social::before{content:'';position:absolute;width:34px;height:34px;
  border-radius:50%;background:var(--ocean);transition:background .3s var(--ease)}
.ft-social svg{display:block;position:relative;z-index:1}
.ft-social:hover,.ft-social:focus-visible{transform:translateY(-2px)}
.ft-social:hover::before,.ft-social:focus-visible::before{background:var(--clay-text)}

.ft-legal{display:flex;gap:18px;flex-wrap:wrap}
.ft-legal a{color:rgba(68,64,46,.6);text-decoration:none}
.ft-legal a:hover{color:var(--ink)}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){
	.site-footer{padding:0 24px 90px}
	.site-footer .ft-word{padding:34px 0 2px}
	.site-footer .ft-word text{letter-spacing:.02em;fill:rgba(68,64,46,.10)}
	.ft-grid{grid-template-columns:1fr;gap:30px;padding:22px 0 30px}
	.ft-brand img{height:64px}
}
.site-footer nav.ft-col{display:block;margin-top:0;gap:0;font-family:inherit;font-weight:400;
	font-size:inherit;letter-spacing:normal;text-transform:none;justify-content:flex-start}
.site-footer nav.ft-legal{margin-top:0;font-size:11px;letter-spacing:.14em;justify-content:flex-start;gap:14px 18px}

/* --- Rail v2: blend-difference — always legible over any photo or band --- */
.rail{mix-blend-mode:difference}
.rail button{color:rgba(216,209,190,.62)}
.rail button i{background:rgba(216,209,190,.5)}
.rail button[aria-current="true"]{color:#EDE6D2}
.rail button[aria-current="true"] i{background:#EDE6D2}

/* --- Signature interactions (command sprint) --------------------------- */

/* 1 · Ink-fill: the big serif narrative paragraphs fill with ink as you read.
      Uses background-clip:text driven by scroll (view-timeline). */
/* INK-FILL REMOVED 30.08 — this is what Bar kept reporting as "cut text".
   `background-clip:text` + `text-fill-color:transparent` means the words are
   invisible except where the gradient paints them, and the gradient had a hard
   stop at 50%. Any statement not yet scrolled through its range rendered half
   solid and half at 22% opacity — a clean edge straight through the sentence.
   Copy a buyer must read is not a place for an effect that can fail to paint. */

/* 2 · Links & nav: underline draws itself */
.nav-main a{background:linear-gradient(var(--clay),var(--clay)) no-repeat 0 100%/0 1px;
	transition:background-size .4s var(--ease);border-bottom:none!important}
.nav-main a:hover,.nav-main a.active{background-size:100% 1px}

/* 3 · Media life: gallery / cards breathe on hover (desktop) */
@media (hover:hover) and (min-width:761px){
	.gallery img,.made-grid img,.why-grid img,.chapter img:not(.plan-img){transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
	.gallery img:hover,.made-grid img:hover{transform:scale(1.035);filter:saturate(1.08)}
	.btn-line,.btn-solid{transition:transform .35s var(--ease),background .3s ease,color .3s ease,letter-spacing .35s var(--ease)}
	.btn-line:hover,.btn-solid:hover{letter-spacing:.26em}
}

/* 4 · Custom cursor states (desktop, existing #ads-cursor dot) */
@media (hover:hover) and (min-width:761px){
	#ads-cursor{display:flex;align-items:center;justify-content:center;font-family:var(--serif);
		font-weight:600;font-size:0;letter-spacing:.12em;color:var(--cream);
		transition:width .3s var(--ease),height .3s var(--ease),font-size .2s ease,background .3s ease}
	#ads-cursor.is-media{width:64px;height:64px;font-size:10px;background:rgba(47,45,36,.85)}
	#ads-cursor.is-link{width:34px;height:34px;background:rgba(184,92,56,.85)}
}

/* --- Brand header v4: official Full Main Long lockup ------------------- */
/* The brand was a flex item with max-width:100% and object-fit:fill, so the nav
   squeezed it: the mark rendered 125px wide where its own ratio wants 160, a
   22% horizontal crush of the logo. flex:none stops the squeeze and the ratio
   is honoured. Raised 62 -> 70px at the same time. 06.09.2026. */
.site-header .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.site-header .logo-line{height:70px;width:auto;max-width:none;object-fit:contain;display:block}
.site-header .inner{height:92px}

/* The Spanish header did not fit and had not fitted for some time: eight longer
   labels — Financiamiento, Empiece aquí — needed 1,341px inside a 1,240px wrap
   even before the logo grew, so the last items pushed past the right edge and
   the page scrolled sideways. The row is tightened from 1440px down rather than
   at every size, so wide screens keep the airy spacing they were designed with.
   06.09.2026. */
@media (min-width:761px) and (max-width:1440px){
	.site-header .inner{gap:24px}
	.nav-main{gap:20px;font-size:12px;letter-spacing:.12em}
	.nav-meta{gap:18px}
	.site-header .logo-line{height:62px}
	.site-header .inner{height:84px}
}
@media (min-width:761px) and (max-width:1180px){
	.nav-main{gap:14px;font-size:11.5px;letter-spacing:.08em}
	.site-header .logo-line{height:54px}
	.site-header .inner{height:76px}
}
@media (max-width:760px){
	.site-header .logo-line{height:58px}
	.site-header .inner{height:78px}
}

/* --- Language switch v3: editorial, no box ----------------------------- */
.lang-switch{border:none!important;gap:14px;align-items:baseline}
.lang-switch a{min-width:0;min-height:0;padding:10px 4px;background:none!important;
	font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;
	color:rgba(68,64,46,.42);position:relative;transition:color .3s ease}
.lang-switch a::after{content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%) scaleX(0);
	width:16px;height:1.5px;background:var(--clay-text);transition:transform .35s var(--ease)}
.lang-switch a.active{color:var(--ink)!important}
.lang-switch a.active::after{transform:translateX(-50%) scaleX(1)}
.lang-switch a:not(.active):hover{color:var(--ink)}
.lang-switch>span{display:none}

/* --- Loader v4: the logo's own arc fills with palette L→R + light rays - */
.loader-wrap{position:relative;width:min(340px,74vw);aspect-ratio:379/146.5}
.loader-logo{position:absolute;inset:0;background:var(--ink);
	-webkit-mask:url('assets/img/logo-long-ink.svg') center/contain no-repeat;
	mask:url('assets/img/logo-long-ink.svg') center/contain no-repeat}
/* palette fill confined to the sun arc (x 37.8%→62.2%, top 39%) */
.loader-logo::after{content:'';position:absolute;inset:0 36.5% 58% 36.5%;
	background:linear-gradient(90deg,#A9B29B 0%,#697353 25%,#948A59 50%,#A68763 75%,#7A5A34 100%);
	clip-path:inset(0 100% 0 0)}
@keyframes ads-sunfill{to{clip-path:inset(0 0 0 0)}}
/* spotlight beams: stripes of light rise from the arc one by one, fading upward */
.loader-beams{position:absolute;left:50%;top:36%;width:0;height:0;pointer-events:none}
.loader-beams i{position:absolute;bottom:30px;left:-5px;width:10px;height:var(--h,140px);
	transform-origin:50% calc(100% + 30px);
	transform:rotate(var(--a)) scaleY(0);
	background:linear-gradient(to top,var(--c) 0%,var(--c) 16%,transparent 90%);
	clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);
	filter:blur(2px);opacity:0}
.loader-logo{z-index:1}
@keyframes ads-beam{to{transform:rotate(var(--a)) scaleY(1);opacity:.62}}
/* first-load timings */
#ads-loader .loader-logo::after{animation:ads-sunfill 1.1s .2s cubic-bezier(.4,0,.2,1) forwards}
#ads-loader .loader-beams i{animation:ads-beam .45s ease-out forwards;
	animation-delay:calc(.25s + var(--i) * .16s)}
#ads-loader.lift .loader-wrap{opacity:0;transition:opacity .3s ease}
/* page-transition (veil) timings — faster */
#ads-veil .loader-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:min(320px,68vw);opacity:0}
#ads-veil.on .loader-wrap{opacity:1;transition:opacity .15s ease}
#ads-veil.on .loader-logo::after{animation:ads-sunfill .45s .05s cubic-bezier(.4,0,.2,1) forwards}
#ads-veil.on .loader-beams i{animation:ads-beam .25s ease-out forwards;
	animation-delay:calc(.06s + var(--i) * .07s)}

/* --- Drawer v2: current page, hover life, styled language (28.08) ------ */
.drawer__nav a span{transition:transform .4s var(--ease)}
.drawer__nav a:hover span{transform:translateX(10px)}
/* A phone has no hover. Pressing a row dims it and nudges its number, which is
   the acknowledgement a finger needs while the next page loads. */
@media (hover:none){
  .drawer__nav a:active{opacity:.62}
  .drawer__nav a:active em{transform:translateX(3px)}
  .drawer__nav a em{transition:transform .25s var(--ease),color .3s var(--ease)}
  .drawer__nav a:hover span{transform:none}
}
.drawer__nav a:hover em{color:var(--cream)}
.drawer__nav a.is-here{color:#E4C892}
.drawer__nav a.is-here em{color:#E4C892}
.drawer__nav .here-sun{width:26px;height:14px;margin-left:auto;align-self:center;color:#E4C892;
	animation:ads-here 1s var(--ease) both .4s}
@keyframes ads-here{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* language inside the dark drawer: cream editorial version */
.drawer__foot .lang-switch{display:flex;justify-content:center;gap:18px;border:none!important}
.drawer__foot .lang-switch a{color:rgba(251,238,214,.5)!important;background:none!important;
	font-size:12.5px;padding:10px 6px}
.drawer__foot .lang-switch a::after{background:#E4C892}
.drawer__foot .lang-switch a.active{color:var(--cream)!important}

/* === Full-screen band rhythm (29.08): sections read as complete "slides" ===
   Fixes: on short laptop screens sections were always seen half-cut. */
@media (min-width:761px){
	/* SNAP REMOVED 30.08. It was added to stop sections being seen half-cut, and
	   it caused exactly that: with `proximity`, stopping anywhere near a band
	   pulled the viewport onto that band and sliced the bottom off whatever the
	   reader was still reading — the last row of the day timeline, most visibly.
	   A snap target can only align itself; it cannot know that the section above
	   is mid-sentence. The min-height rhythm below already makes the bands read
	   as full slides, without taking the scroll away from the reader. */
	/* bands become viewport-high slides with vertically centred content */
	.band-sage .split{min-height:100svh;align-items:center}
	.band-inner{padding:56px 0}
	.band-sage .band-photo,.split>.band-photo{height:100svh;min-height:0}
	.parallax{min-height:100svh}
	.atmos{height:100svh;max-height:none}
}
/* short laptops (≤ ~820px viewport height): compress the vertical rhythm */
@media (min-width:761px) and (max-height:820px){
	.chapter{padding:72px 44px 64px}
	.chapter-grid{margin-bottom:40px}
	h2{font-size:clamp(26px,2.9vw,42px)}
	.statement{font-size:clamp(20px,2.1vw,30px);line-height:1.5}
	.lede{font-size:15.5px;line-height:1.7}
	.spec-list div{padding:11px 0}
	.stat-row--plain b{font-size:28px}
	.stat-row--plain p{font-size:14px;line-height:1.6}
	.detail-grid{gap:28px 32px}
	.day-row{padding:14px 0}
	.band-inner{padding:44px 0}
	.band-inner h2{margin-bottom:14px}
	.band-inner p{font-size:15px}
	.fineprint{margin-top:14px}
	.parallax p.q{font-size:clamp(24px,2.8vw,40px)}
	.atmos .q{font-size:clamp(24px,2.8vw,40px)}
}
/* extra-short screens (≤660px viewport, e.g. 1366×768 laptop with taskbar+chrome) */
@media (min-width:761px) and (max-height:660px){
	.band-inner{padding:24px 0}
	.band-inner .chapter-no{margin-bottom:6px}
	.band-inner h2{font-size:clamp(22px,2.4vw,32px);margin:6px 0 10px}
	.band-inner p{font-size:14px;line-height:1.55;margin:8px 0 0}
	.spec-list{margin-top:16px}
	.spec-list div{padding:7px 0;font-size:13px}
	.fineprint{margin-top:10px;font-size:11.5px}
	.stat-row--plain{margin-top:22px;gap:18px}
	.stat-row--plain div{padding-top:14px}
	.stat-row--plain b{font-size:24px}
	.chapter{padding:54px 44px 48px}
	.chapter-grid{margin-bottom:26px}
	.statement{font-size:clamp(18px,1.9vw,26px)}
}
@media (min-width:761px){
	.band-dark{display:flex;align-items:center;min-height:100svh}
	.band-dark .inner{width:100%}
}

/* === Lots page fits one screen (29.08, בקשת בר): pick a lot → see ALL details, no scroll === */
@media (min-width:761px){
	/* the map never grows taller than the screen; markers stay aligned because
	   .plan-map shrink-wraps the image box */
	.plan-map{width:fit-content;margin:0 auto}
	.plan-img{max-height:calc(100svh - 190px);width:auto;max-width:100%}
	.lot-panel{top:90px;max-height:calc(100svh - 106px);overflow:auto;scrollbar-width:thin}
}
@media (min-width:761px) and (max-height:820px){
	.lot-panel{padding:22px 26px 24px}
	.lot-view{height:132px;margin-bottom:16px}
	.lot-panel h2[data-field="id"]{font-size:34px!important}
	.lot-panel p[data-field="blurb"]{margin-top:10px!important;font-size:14px!important;line-height:1.55!important}
	.lot-panel .spec-list{margin-top:14px!important}
	.lot-panel .spec-list div{padding:8px 0}
	.lot-panel .spec-list span:last-child{font-size:17px}
	.lot-panel .spec-list div:last-child span:last-child{font-size:14px}
	.lot-panel .btn-line{padding:12px 22px}
	.lot-panel>div[style*="flex-wrap"]{margin-top:16px!important;gap:16px!important}
	.lot-panel>p:last-child{margin-top:14px!important;font-size:11.5px!important;line-height:1.5!important}
	.plan{padding:16px}
	.plan-img{max-height:calc(100svh - 150px)}
}
@media (min-width:761px) and (max-height:660px){
	.lot-panel{top:74px;max-height:calc(100svh - 88px);padding:18px 24px 20px}
	.lot-view{height:112px;margin-bottom:12px}
	.lot-panel h2[data-field="id"]{font-size:30px!important}
	.lot-panel>p:last-child{display:none}
}
@media (min-width:761px) and (max-height:660px){
	.lot-panel .eyebrow{margin:0!important}
	.lot-panel h2[data-field="id"]{margin-top:8px!important}
	.lot-panel .spec-list div{padding:6.5px 0}
}
@media (min-width:761px) and (max-height:660px){
	.lot-view{height:96px}
	.lot-panel p[data-field="blurb"]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:761px) and (max-height:660px){
	.lot-panel{padding-bottom:14px}
	.lot-panel .spec-list div{padding:6px 0}
	.lot-panel>div[style*="flex-wrap"]{margin-top:12px!important}
}
/* smaller, finer markers so they sit nicely inside the compact map (29.08) */
@media (min-width:761px){
	.marker{width:24px!important;height:24px!important;font-size:10px!important}
	.marker[data-lot^="L"]{width:20px!important;height:20px!important;font-size:8.5px!important}
	.marker[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(166,135,99,.4)}
}

/* === One-screen sweep #2 (29.08): calculator + ladder === */
@media (min-width:761px){
	/* results panel follows you while adjusting sliders */
	.calc-panel{position:sticky;top:90px;max-height:calc(100svh - 106px);overflow:auto;scrollbar-width:thin}
}
@media (min-width:761px) and (max-height:820px){
	.calc-panel{padding:26px 28px 28px;top:78px;max-height:calc(100svh - 92px)}
	.calc-total{font-size:44px}
	.ladder-band{padding:70px 40px}
	.calc-step{margin-top:44px!important}
}
@media (min-width:761px){
	.calc>div:last-child{align-self:stretch}   /* gives the sticky panel room to travel */
}
@media (min-width:761px){
	.calc>div:first-child{padding-bottom:250px}  /* extends sticky travel past the sliders */
}
@media (min-width:761px) and (max-height:660px){
	.calc-panel{padding:20px 24px 22px}
	.calc-total{font-size:36px}
	.calc-lines div{padding:7px 0}
	.calc-yield .collapse-body b,.calc-yield b{font-size:20px}
	.calc-payback{margin:10px 0 0!important;font-size:12.5px!important}
}
@media (min-width:761px) and (max-height:820px){
	.field input,.field select{padding:12px 14px}
	.field{margin-bottom:14px}
	.field textarea{min-height:88px}
	form .btn-line,form button[type="submit"]{padding:13px 26px}
}

/* === Readability pass (29.08, משוב בר: "קשה לקרוא") === */
/* 1. body: light 300 was too faint on Windows — regular 400, slightly darker */
body{font-weight:400}
strong,b{font-weight:600}
/* 2. dim greys raised toward ink */
.fineprint{color:rgba(68,64,46,.74);font-size:13.5px}
.lot-note{color:rgba(68,64,46,.78)!important}
.calc-payback{color:rgba(68,64,46,.74)!important}
.kicker{color:rgba(68,64,46,.82)}
/* 3. text over photos: stronger scrims + shadows */
.parallax .scrim{background:rgba(47,45,36,.52)}
.parallax p.q,.atmos .q{text-shadow:0 1px 18px rgba(20,20,12,.55)}
.band-dark p{color:rgba(251,238,214,.92)}
.band-dark .bg{opacity:.3}
.hero-caption,.day-caption{font-size:13px}
.lot-view figcaption{font-size:12.5px;text-shadow:0 1px 10px rgba(20,20,12,.9)}
/* 4. links/labels inside body copy never below .7 */
.site-footer .ft-col a,.ft-legal,.ft-bottom{color:rgba(68,64,46,.8)}
@media (min-width:761px) and (max-height:820px){
	.band-photo .inner{padding:70px 44px}
}

/* === SOLD convention (29.08): struck-through price in brick red + struck marker === */
.lot-panel .spec-list span.is-sold,.c-price.sold{color:#8F3B2C!important;letter-spacing:.06em}
.lot-panel .spec-list span.is-struck,.c-price.sold.has-price{
	text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(143,59,44,.85)}
.lot-panel .spec-list span.lot-status.sold{color:#8F3B2C}
.c-price.contract{color:var(--clay-text)}
/* sold markers: greyed + diagonal strike */
.marker.sold{position:absolute;overflow:hidden;opacity:.85}
.marker.sold::after{content:'';position:absolute;left:8%;right:8%;top:50%;height:1.5px;
	background:rgba(143,59,44,.75);transform:rotate(-32deg)}

/* === The stamp (06.09.2026) ==========================================
   Asked for as a rubber stamp across the lot's own screen, and built as
   one — struck at an angle, double-ruled, letter-spaced caps.

   It is drawn in the site's own brick red, #8F3B2C, which is already the
   colour of every sold price and every struck marker on the plan. A
   brighter clipart red would have shouted across a page whose whole
   palette is sand and olive, and would have said "sold" in a second
   voice while the rest of the page says it in the first. One red.

   mix-blend-mode:multiply is what makes it read as ink rather than as a
   sticker: the photograph shows through the letterforms, which is what
   a real stamp on a real document does. Browsers without it simply get
   a slightly flatter mark. ==================================== */
/* Sized against the photograph, not the window. The frame is 210px tall on a
   desktop and drops to 96px on a short laptop screen through four height
   queries — a stamp measured in vw ignored all of that and was struck at
   25px into a 96px frame, where its rotated corners ran outside the crop.
   Every measurement below is in em off one container-relative font size, so
   the whole mark shrinks as one object. 20cqh of 210 is 42, of 96 is 19. */
.lot-view{container-type:size}
.lot-stamp{
	position:absolute;z-index:4;right:1.05em;bottom:.95em;
	display:block;padding:.3em .62em .34em;
	font-family:var(--serif);font-weight:600;
	font-size:17px;font-size:clamp(13px,20cqh,26px);line-height:1;
	letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
	color:#8F3B2C;border:.11em solid #8F3B2C;border-radius:.13em;
	background:transparent;mix-blend-mode:multiply;opacity:0;
	transform:rotate(-12deg) scale(1.5);
	pointer-events:none;visibility:hidden}
/* the inner rule — a stamp has two, and one border cannot draw both */
.lot-stamp::before{content:'';position:absolute;inset:.15em;
	border:.045em solid #8F3B2C;border-radius:.1em;opacity:.75}
.lot-panel.is-sold .lot-stamp{visibility:visible;
	animation:ads-strike .42s cubic-bezier(.16,.9,.3,1.05) forwards}
@keyframes ads-strike{
	0%{opacity:0;transform:rotate(-12deg) scale(1.5)}
	62%{opacity:1;transform:rotate(-12deg) scale(.965)}
	100%{opacity:.9;transform:rotate(-12deg) scale(1)}}
/* When the lot is sold the caption and the stamp both want the strip along
   the bottom of the photograph. The stamp is the news; the caption steps
   aside rather than being read through it. */
.lot-panel.is-sold .lot-view figcaption{opacity:0}
@media (prefers-reduced-motion:reduce){
	.lot-panel.is-sold .lot-stamp{animation:none;opacity:.9;transform:rotate(-12deg)}}
/* the same mark on a lot's own page, where the photograph is the whole column */
.lot-single__art{position:relative}
.lot-single__art.is-sold .lot-stamp{visibility:visible;opacity:.9;
	font-size:clamp(19px,2.2vw + 8px,34px);transform:rotate(-12deg)}

/* === Drawer v3 (29.08): peek thumbnails, big lang switch on top, marquee foot === */
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 6px}
.drawer__top .lang-switch a{font-size:14px;padding:12px 8px;color:rgba(251,238,214,.5)}
.drawer__top .lang-switch a.active{color:var(--cream)!important}
.drawer__top .lang-switch a::after{background:#E4C892}
.drawer__nav a{position:relative;display:flex;align-items:center;gap:16px}
.d-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;
	border:1px solid rgba(251,238,214,.25);opacity:0;transform:scale(.6);
	transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
	transition-delay:calc(var(--i) * .06s + .15s)}
body.drawer-open .d-thumb{opacity:1;transform:none}
.drawer__nav a.is-here .d-thumb{border-color:#E4C892;box-shadow:0 0 0 2px rgba(228,200,146,.35)}
.drawer__nav a:active .d-thumb{transform:scale(1.12)}
.drawer__marq{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(251,238,214,.16);
	padding:14px 0;font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(251,238,214,.55)}
.drawer__marq div{display:inline-block;animation:ads-dmarq 22s linear infinite}
@keyframes ads-dmarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .drawer__marq div{animation:none}.d-thumb{opacity:1;transform:none}
  /* No sweep, no rise, no stagger — the menu is simply there. */
  .drawer{transition:none}
  .drawer__nav a,body.drawer-open .drawer__nav a{transition:none;transform:none;transition-delay:0s}
  .drawer__foot,body.drawer-open .drawer__foot{transition:none}
}

/* === Surf band: two portrait shots, one crossfading into the other (30.08) === */
/* One photo, full column. The source is portrait 2:3 (848x1264); splitting the
   column in two made each frame wide and short, so cover() cropped a middle band
   and sliced the couple off at the edge. Full height keeps the whole subject.
   object-position sits below centre because the couple stands low in the frame. */
.surf-solo{position:relative;overflow:hidden}
.surf-solo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	object-position:50% 62%;display:block}
@media (max-width:760px){
	.surf-solo{height:auto;aspect-ratio:3/4}
	.surf-solo img{object-position:50% 58%}
}

/* === Proof video (water main) + trust badges (30.08) === */
.proof-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2f2d24}
.proof-tag{position:absolute;left:20px;bottom:18px;z-index:2;font-family:var(--serif);font-weight:600;
	font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
	text-shadow:0 1px 12px rgba(20,20,12,.85)}
.proof-tag::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
	background:#8FB37A;margin-right:9px;vertical-align:middle;
	box-shadow:0 0 0 0 rgba(143,179,122,.7);animation:proof-pulse 2.4s ease-out infinite}
@keyframes proof-pulse{70%{box-shadow:0 0 0 9px rgba(143,179,122,0)}100%{box-shadow:0 0 0 0 rgba(143,179,122,0)}}
@media (prefers-reduced-motion: reduce){.proof-tag::before{animation:none}}

.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
	border-top:1px solid rgba(68,64,46,.2);border-bottom:1px solid rgba(68,64,46,.2);margin:0}
.trust-row>div{padding:26px 30px;border-left:1px solid rgba(68,64,46,.14)}
.trust-row>div:first-child{border-left:none}
.trust-row b{display:block;font-family:var(--serif);font-weight:600;font-size:12px;
	letter-spacing:.2em;text-transform:uppercase;color:var(--clay-text)}
.trust-row span{display:block;margin-top:10px;font-family:var(--display);font-size:21px;line-height:1.25;color:var(--ink)}
.trust-row p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:rgba(68,64,46,.74)}
.trust-note{margin:22px 0 0;font-size:13.5px;line-height:1.7;color:rgba(68,64,46,.74)}
@media (max-width:760px){.trust-row>div{border-left:none;border-top:1px solid rgba(68,64,46,.14);padding:20px 4px}
	.trust-row>div:first-child{border-top:none}}

/* ===== Brand texture layer — from the designer's Art Direction (30.08) =====
   "Water = trust & peace of mind · ripples, reflections, translucent layers"
   "Earth = rich textures, tropical greenery" · "Golden light = warmth, freedom" */

/* 1 · the brand's own grain replaces the generic paper grain */
.grain,.band-photo .grain{
	background-image:url('assets/img/tex-grain-muted.jpg');
	background-size:760px;mix-blend-mode:overlay;opacity:.16}

/* 2 · water divider — a thin band of the designer's water texture between chapters */
.water-rule{position:relative;height:96px;overflow:hidden;background:var(--cream)}
.water-rule::before{content:'';position:absolute;inset:-40% 0;
	background:url('assets/img/tex-water-grain.jpg') center/cover no-repeat;
	opacity:.22;filter:saturate(.6) brightness(1.06)}
.water-rule::after{content:'';position:absolute;inset:0;
	background:linear-gradient(to bottom,var(--cream) 0%,rgba(251,238,214,.42) 46%,rgba(251,238,214,.42) 54%,var(--cream) 100%)}
@media (prefers-reduced-motion: no-preference){
	@supports (animation-timeline: view()){
		.water-rule::before{animation:wr-drift linear both;animation-timeline:view()}
		@keyframes wr-drift{from{transform:translateY(-6%) scale(1.04)}to{transform:translateY(6%) scale(1.04)}}
	}
}
@media (max-width:760px){.water-rule{height:80px}}

/* 3 · sage bands get a whisper of water texture instead of flat colour */
.band-sage{position:relative}
.band-sage::before{content:'';position:absolute;inset:0;pointer-events:none;
	background:url('assets/img/tex-water-sand.jpg') center/cover no-repeat;
	opacity:.13;mix-blend-mode:multiply}
.band-sage>*{position:relative;z-index:1}

/* 4 · golden-light wash on the cream page background (very subtle) */
/* The wash sits BEHIND everything (z-index:-1) instead of at 0 with every body
   child promoted above it.

   The old pair — wash at z-index:0 plus `body.ads-home>*{position:relative;z-index:1}`
   — was the single worst bug in this build. `> *` does not mean "the content";
   it means every direct child of <body>, which is where the drawer, the
   WhatsApp button, the floating hamburger, the back-to-top and the loader all
   live. Forcing them to position:relative took them out of their fixed corners:
   the drawer stopped being an overlay and rendered inline in the page (reading
   as a second header), and the floating buttons simply vanished into the flow.
   Home and Lots only, which is exactly where those symptoms appeared. */
body.ads-home::before,body.ads-lots::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
	background:radial-gradient(120% 80% at 78% -10%,rgba(228,200,146,.16),transparent 60%)}

/* ═══════════ Dream layer (30.08) — approved: 01 aura + 04 focus ═══════════
   01 · "the light escapes the frame" — a blurred copy of the photo bleeds onto the cream
   04 · "the memory comes into focus"  — images arrive soft and sharpen as they enter    */
.ads-aura{position:relative;isolation:isolate}
.ads-aura>.aura-bleed{position:absolute;inset:-7%;z-index:-1;pointer-events:none;
	background-size:cover;background-position:center;width:114%;height:114%;
	filter:blur(46px) saturate(1.85) brightness(1.12);
	opacity:0;transform:scale(1.02);
	transition:opacity 1.5s ease,transform 1.7s cubic-bezier(.2,.8,.2,1)}
.ads-aura.aura-on>.aura-bleed{opacity:.8;transform:scale(1.12)}
@media (max-width:760px){
	.ads-aura>.aura-bleed{inset:-5%;width:110%;height:110%;filter:blur(30px) saturate(1.7) brightness(1.1)}
	.ads-aura.aura-on>.aura-bleed{opacity:.62}
}

.ads-dreamy img,img.ads-dreamy{filter:blur(16px) saturate(1.45) brightness(1.1);transform:scale(1.06);
	transition:filter 1.5s cubic-bezier(.2,.8,.2,1),transform 1.7s cubic-bezier(.2,.8,.2,1)}
.ads-dreamy.dream-in img,img.ads-dreamy.dream-in{filter:none;transform:none}

@media (prefers-reduced-motion: reduce){
	.ads-aura>.aura-bleed{display:none}
	.ads-dreamy img,img.ads-dreamy{filter:none!important;transform:none!important}
}

/* material surfaces (30.08): canvas replaces the photo, same box */
.ads-surface{position:relative;overflow:hidden}
.ads-surface>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.ads-surface>img.src{visibility:hidden}
.ads-surface>*:not(canvas):not(img.src):not(.aura-bleed){position:relative;z-index:2}
/* belt and braces: an aura bleed must never be lifted above a surface canvas */
.ads-surface>.aura-bleed{display:none!important}

/* === The Area · cards carry photographs (30.08) ==========================
   Filtering used to change only text, so the section looked identical in
   every category. Each card now leads with its own picture, and the grid
   re-enters in a short stagger whenever the filter changes.            */
/* auto-fill, not auto-fit: filtering down to two results must not blow the two
   surviving cards up to half the page. The track count stays put. */
.card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.area-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
/* graded on the wrapper so it survives the dream-in reveal and reduced-motion:
   the same muting the band photography uses, so no card jumps out in raw blue */
.area-card__ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sage);
	filter:saturate(.9) contrast(1.03) sepia(.03)}
.area-card__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.area-card__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
	background:linear-gradient(to bottom,rgba(68,64,46,0),rgba(68,64,46,.18))}
.area-card:hover .area-card__ph img{transform:scale(1.055)}
.area-card__body{padding:26px 28px 30px}
.area-card__body>h3:first-of-type{margin-top:14px}
@media (max-width:760px){
	.area-card__ph{aspect-ratio:16/10}
	.area-card__body{padding:22px 22px 26px}
	.area-card__ph img{height:100%}
}

/* the grid answers the click: cards fade up one after another */
.card-grid.is-swapping .area-card:not([hidden]){animation:ads-cardin .5s cubic-bezier(.2,.7,.2,1) both;
	animation-delay:calc(var(--i,0) * 45ms)}
@keyframes ads-cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
	.card-grid.is-swapping .area-card:not([hidden]){animation:none}
	.area-card:hover .area-card__ph img{transform:none}
}

/* the pressed filter was cream text on a cream background — invisible */
body.ads-area .area-filters button[aria-pressed="true"]{color:var(--ink)}

/* === The Area · the stage (30.08) ======================================
   One panel the filter rewrites: eyebrow, headline, paragraph, numbers and
   photograph all change together. Replaces four static chapters.        */
.stage{position:relative;margin:6px 0 64px;background:var(--sage);overflow:hidden}
.stage__panel{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(76svh,660px)}
.stage__panel[hidden]{display:none}
.stage__text{padding:76px 6vw 76px 40px;display:flex;flex-direction:column;justify-content:center;
	max-width:760px;margin-left:auto;width:100%}
.stage__text .chapter-no{margin:0 0 14px}
.stage__text h2{margin:0;font-size:clamp(30px,3.3vw,50px);line-height:1.1}
.stage__lede{margin:22px 0 0;font-size:17px;line-height:1.8;max-width:52ch;color:rgba(68,64,46,.88)}
.stage__rows{margin-top:30px}
.stage__text .fineprint{margin-top:20px}
.stage__photo{position:relative;overflow:hidden;background:#2f2d24}
.stage__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	filter:saturate(.9) contrast(1.03) sepia(.03);visibility:hidden;z-index:1}
/* the outgoing photo stays fully opaque underneath while the new one wipes across,
   so the two are never blended — no ghosting, ever */
.stage__photo img.prev{visibility:visible;z-index:1}
.stage__photo img.on{visibility:visible;z-index:2}
.stage__photo img.on.wipe{animation:ads-wipe .95s cubic-bezier(.66,0,.34,1) both}
@keyframes ads-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
/* the surf photos are portrait 2:3 sources — hold the crop where the couple stands */
.stage__panel[data-stage="surf"] .stage__photo img{object-position:50% 62%}
/* a quiet marker of how many photos this category holds */
.stage__dots{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:7px}
/* the dots sit on whatever the photo happens to be — a bright sky swallowed them,
   so they carry their own shadow rather than relying on the image behind */
.stage__dots i{width:6px;height:6px;border-radius:50%;background:rgba(251,238,214,.5);
	box-shadow:0 0 0 1px rgba(20,22,14,.28),0 1px 4px rgba(20,22,14,.55);
	transition:background .4s ease,transform .4s ease}
.stage__dots i.on{background:var(--cream);transform:scale(1.25)}
@media (prefers-reduced-motion: reduce){
	.stage__photo img.on.wipe{animation:none}
}

/* the swap: the outgoing panel is gone before the incoming one fades up, so the
   two never overlap and the section never jumps height mid-transition */
.stage.is-swapping .stage__panel:not([hidden]){animation:ads-stagein .52s cubic-bezier(.2,.7,.2,1) both}
.stage.is-swapping .stage__head>*,
.stage.is-swapping .stage__body>*{animation:ads-stageup .5s cubic-bezier(.2,.7,.2,1) both}
.stage.is-swapping .stage__head>*:nth-child(2){animation-delay:.05s}
.stage.is-swapping .stage__body>*:nth-child(1){animation-delay:.1s}
.stage.is-swapping .stage__body>*:nth-child(2){animation-delay:.15s}
.stage.is-swapping .stage__body>*:nth-child(3){animation-delay:.2s}
@keyframes ads-stagein{from{opacity:0}to{opacity:1}}
@keyframes ads-stageup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- phone: the headline rides the photograph -------------------------
   Stacked, the panel ran 1076px tall: a 198px letterbox strip above 878px
   of text. Lifting the eyebrow and headline onto the image gives the photo
   real height, removes a screenful of stacking, and reads as one card.  */
/* --- phone: the filter is a swipeable strip, not a stack ---------------
   Seven categories wrapped onto four rows and took 184px — a third of the
   screen before any content. One scrolling row keeps it to 44px.        */
/* A strip you must drag sideways hides its own options — "Food & town" sat off
   the right edge with nothing to say so. On phones the pills are replaced by a
   native picker: one tap, the OS lists every category, no swiping. */
@media (max-width:760px){
	.area-cards .area-filters{display:none}
}

@media (max-width:900px){
	.stage{margin-bottom:44px}
	.stage__panel{grid-template-columns:1fr;grid-template-areas:"media" "body";min-height:0}
	.stage__text{display:contents}
	/* clamp, not min(): the headline sits on this photo, so a short viewport
	   must never be able to collapse it to nothing underneath the text */
	.stage__photo{grid-area:media;height:clamp(260px,48svh,390px);aspect-ratio:auto}
	.stage__photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
		background:linear-gradient(to top,rgba(28,30,20,.80) 0%,rgba(28,30,20,.34) 44%,rgba(28,30,20,0) 74%)}
	.stage__dots{bottom:auto;top:14px}
	.stage__head{grid-area:media;align-self:end;position:relative;z-index:3;padding:0 22px 22px}
	.stage__head .chapter-no{color:var(--cream);opacity:.9;margin:0 0 8px}
	.stage__head h2{color:var(--cream);font-size:clamp(26px,7.2vw,34px);line-height:1.1;
		text-shadow:0 2px 20px rgba(20,22,14,.55)}
	.stage__body{grid-area:body;padding:26px 22px 32px}
	.stage__lede{font-size:16px;line-height:1.72;margin:0}
	.stage__rows{margin-top:22px}
	.stage__rows div{padding:11px 0}
	.stage__body .fineprint{margin-top:16px;font-size:12.5px;line-height:1.65}
}
@media (prefers-reduced-motion: reduce){
	.stage.is-swapping .stage__panel:not([hidden]),
	.stage.is-swapping .stage__head>*,
	.stage.is-swapping .stage__body>*{animation:none}
}
.made-shot{height:420px;overflow:hidden;position:relative}
.made-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1100px){.made-shot{height:300px}}
@media (max-width:760px){.made-shot{height:260px}}
.ads-shot{position:relative;overflow:hidden}

/* Build · "living in your home" — two portrait photographs, shown whole */
.live-pair{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:940px;margin:0 auto;
	padding:0;align-items:start}
.live-shot{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--sage)}
.live-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the shower head sits high in its frame — bias the crop upward so it survives */
.live-shot img[src*="rain-shower"]{object-position:50% 40%}
.live-pair .kicker{margin:14px 0 0}
@media (max-width:760px){
	.live-pair{grid-template-columns:1fr;gap:30px;max-width:none}
	.live-shot{aspect-ratio:4/5}
}

/* material surfaces — placement helpers (30.08) */
.parallax-surface{position:relative;overflow:hidden;background:#2f2d24}
.par-shot{position:absolute;inset:0;z-index:0}
.par-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the scrim must stay absolutely positioned — as position:relative it collapsed to
   zero height and the quote sat on an undarkened photo. Only .inner flows. */
.parallax-surface .scrim{position:absolute;inset:0}
.parallax-surface .inner{position:relative;z-index:2}
.band-shot{position:absolute;inset:0;z-index:0}
.band-shot img{width:100%;height:100%;object-fit:cover;display:block}
.band-dark .band-shot~.grain,.band-dark .band-shot~.inner{position:relative;z-index:2}
.lot-view[data-surface]{overflow:hidden}
/* the canvas replaces the old fixed background — the scrim must sit above it */
.parallax-surface .par-shot{z-index:0}
.parallax-surface .scrim{z-index:1;background:linear-gradient(to bottom,rgba(30,32,22,.30),rgba(30,32,22,.62))}
.parallax-surface .inner{z-index:2}
.parallax-surface p.q{text-shadow:0 2px 22px rgba(20,22,14,.7)}

/* === Mobile drawer v4 (30.08) — cream, no photographs, one screen ========
   The dark drawer with 44px photo circles could not fit seven items plus the
   logo and the language switch on a phone, and the circles were too small to
   read as pictures anyway. Florcita Blanca ground, ink type, brand rule lines
   — the same surface as the rest of the site, so opening the menu now feels
   like turning a page rather than entering a different product.            */
.drawer{background:var(--cream)!important;justify-content:flex-start;padding:0 0 env(safe-area-inset-bottom)}
/* the grain is a photograph; on cream at any real opacity it reads as a
   smudge rather than paper. Multiply blend at a whisper. */
.drawer::after{opacity:.10;mix-blend-mode:multiply}
.drawer__top{display:grid;grid-template-columns:1fr auto auto;align-items:center;
	gap:14px;padding:16px 22px 10px;border-bottom:1px solid rgba(68,64,46,.14)}
.drawer__logo{display:block;line-height:0}
.drawer__logo img{height:34px;width:auto;display:block}
.drawer__close{color:var(--ink)!important;font-size:30px;line-height:1;opacity:.75}
.drawer__top .lang-switch{display:flex;gap:12px;border:none}
.drawer__top .lang-switch a{color:rgba(68,64,46,.45)!important;font-size:13px;padding:10px 4px}
.drawer__top .lang-switch a.active,.drawer__top .lang-switch a.on{color:var(--ink)!important}
/* Which language am I reading? Full ink plus a hairline under it — an answer at
   a glance, without turning the switch into a button. */
.drawer__top .lang-switch a.active{position:relative}
.drawer__top .lang-switch a.active::after{
	content:'';position:absolute;left:3px;right:3px;bottom:6px;height:1px;
	background:rgba(68,64,46,.55)}

/* 04.09.2026 — polish, not redesign. The names were carrying the whole screen
   and the hairlines were almost touching them. Twelve per cent off the type and
   six more pixels of row height: the same menu, read as considered rather than
   shouted. Row rhythm is set by height here, not padding — worth knowing,
   because the padding rule in the older dark-drawer block above does nothing
   on a phone. */
.drawer__nav{padding:4px 22px 0;gap:0}
/* align-items was baseline, which in a fixed-height flex row pins the content
   to the top of the row: the name sat flush against the divider above it with
   all 21px of slack dumped underneath — measured, not guessed. Centring lets
   each row breathe evenly at any row height, including the clamped heights on
   short screens. 06.09.2026. */
.drawer__nav a{color:var(--ink)!important;gap:14px;align-items:center;
	padding:0;height:clamp(52px,8.1svh,70px);border-bottom:1px solid rgba(68,64,46,.12)}
.drawer__nav a em{color:rgba(68,64,46,.4)!important;font-size:11px;
	transition:transform .25s var(--ease),color .3s var(--ease)}
.drawer__nav a span{font-family:var(--display);font-size:clamp(20px,4.9svh,26px);line-height:1}
/* A phone has no hover: pressing a row dims it and nudges its number, which is
   the acknowledgement a finger needs while the next page loads. */
@media (hover:none){
	.drawer__nav a:active{opacity:.6}
	.drawer__nav a:active em{transform:translateX(3px)}
	.drawer__nav a:hover span{transform:none}
}
.drawer__nav a.is-here,.drawer__nav a.is-here em{color:var(--clay-text)!important}
.drawer__nav a.is-here .here-sun{color:var(--clay-text)}
.drawer__nav a:last-child{border-bottom:none}

/* The menu must always show its head and its foot (06.09.2026).

   The whole drawer was one scrolling column, so on any screen where eight rows
   plus the logo plus the call to action did not fit — a 768px tablet, a short
   landscape phone — the reader scrolled the logo off the top and the "Arrange a
   site visit" button stayed below the fold, invisible. The menu lost both its
   identity and its only action at once.

   The bar and the button are pinned now and only the list of pages scrolls
   between them, which is what a menu should do at any height. Applied outside
   the phone breakpoint on purpose: the hamburger appears from 1040px down, so
   everything from there to a small phone gets this. */
/* No height here on purpose: .drawer is position:fixed with inset:0, which
   already stretches it to the viewport. A height:100% on top of that resolved
   inconsistently when measured, and it was redundant either way. */
.drawer{overflow:hidden!important}
.drawer__top{flex:0 0 auto}
.drawer__nav{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.drawer__marq{flex:0 0 auto}

.drawer__foot{flex:0 0 auto;margin-top:0;padding:14px 22px 16px;gap:10px}
.drawer__cta{border:1px solid rgba(68,64,46,.4)!important;color:var(--ink)!important;
	padding:14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.drawer__marq{border-top:1px solid rgba(68,64,46,.12);color:rgba(68,64,46,.42)!important;
	padding:10px 0 12px;font-size:12.5px}
/* very short phones: shed the marquee before anything structural is squeezed */
@media (max-height:640px){ .drawer__marq{display:none} }

/* === Control and consequence must share the screen (30.08) ==============
   Four separate complaints turned out to be one problem: on a phone a control
   and the thing it changes end up screens apart, so the user changes something
   and never sees the result. Three mechanisms, applied by situation.

   1 · RETURN  — the control is far above; give a way back to it.
   2 · PEEK    — the result is far below; mirror it in a fixed bar.
   3 · PIN     — the result changes while the user reads elsewhere; hold it
                 on screen so the change is witnessed.
   All three are phone-only. On a desktop the pair already share the viewport. */

/* 1 · RETURN --------------------------------------------------------- */
.back-to{display:none}
@media (max-width:760px){
	.back-to{display:inline-flex;align-items:center;justify-content:center;gap:9px;
		margin:26px auto 0;padding:0 22px;min-height:46px;width:auto;
		background:none;border:1px solid rgba(68,64,46,.35);border-radius:999px;
		font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
		color:var(--ink);cursor:pointer}
	.back-to svg{width:11px;height:13px;flex:0 0 auto}
	.area-cards .back-to{display:flex}
}

/* 2 · PEEK ----------------------------------------------------------- */
.calc-peek{display:none}
@media (max-width:760px){
	.calc-peek{position:fixed;left:0;right:0;bottom:0;z-index:70;
		display:flex;align-items:center;justify-content:space-between;gap:14px;
		padding:12px 18px calc(12px + env(safe-area-inset-bottom));
		background:var(--ink);color:var(--cream);border:none;width:100%;
		font-family:var(--sans);text-align:left;cursor:pointer;
		transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
	.calc-peek.is-on{transform:none}
	.calc-peek b{font-family:var(--display);font-size:21px;font-weight:400;line-height:1}
	.calc-peek span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
		opacity:.7;margin-bottom:3px}
	.calc-peek em{font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
		opacity:.85;white-space:nowrap;display:flex;align-items:center;gap:7px}
	.calc-peek em svg{width:11px;height:13px}
	/* the WhatsApp and accessibility buttons must not sit under the bar */
	body.peek-open .wa-fab,body.peek-open #pa-fab{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* 3 · PIN ------------------------------------------------------------ */
@media (max-width:760px){
	/* The photograph changes as the timeline scrolls, but stacked on a phone it
	   sat above the reader and scrolled away — so the change happened off-screen
	   and was never witnessed. .day-stage is the picture (the timeline is the
	   first child); pin it to the top and let the hours scroll underneath.
	   A sticky element taller than the viewport cannot stick, so the frame is
	   capped well under 100svh. */
	.day-cols{position:relative;align-items:start}
	.day-cols>.day-stage{order:-1;position:sticky;top:6px;z-index:2;
		background:var(--cream);padding-bottom:10px}
	.day-frame{height:36svh;min-height:210px;max-height:330px}
	.day-caption{margin:8px 0 0}
}
@media (prefers-reduced-motion:reduce){
	.calc-peek{transition:none}
}

/* === The water clip is a vertical, so frame it as one (30.08) ===========
   Source is 480x860. Stretched to the text column it became 535x1033 — taller
   than any phone or laptop viewport, so the visitor only ever saw a slice and
   the loop looked like it was jumping. Now it sits at its own ratio, whole,
   centred on the dark ground. */
/* The box now *is* the clip — no dark bars around it, and the caption sits on
   the footage instead of floating over empty background. */
/* The clip is a phone-shot portrait (474x850). Driving it from `height` left it
   262px wide inside a 535px column and, being a grid item, `margin:0 auto` did
   not centre it. It is driven from `width` now — as wide as the column allows
   but never taller than 84svh — and `justify-self` does the centring. */
.proof-shot{justify-self:center;align-self:start;margin:0 auto;position:relative;overflow:hidden;background:#2f2d24;
	aspect-ratio:474/850;width:min(100%,calc(84svh * 474 / 850));height:auto}
.proof-shot .proof-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.proof-shot>img{position:absolute!important;inset:0!important;width:100%!important;height:100%;object-fit:cover}
@media (max-width:900px){
	/* On a phone the column is the screen, so the clip takes all of it. */
	.proof-shot{width:100%;height:auto;max-height:none}
}

/* --- The Area · native category picker (phones) ----------------------- */
.area-pick{display:none}
@media (max-width:760px){
	.area-pick{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 24px;
		padding:0 14px 0 16px;min-height:52px;border:1px solid rgba(68,64,46,.3);border-radius:2px;
		background:var(--cream)}
	.area-pick label{flex:0 0 auto;font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;
		text-transform:uppercase;color:rgba(68,64,46,.55)}
	.area-pick select{flex:1;appearance:none;-webkit-appearance:none;background:none;border:none;
		font-family:var(--display);font-size:19px;color:var(--ink);padding:12px 0;min-height:44px;
		cursor:pointer}
	.area-pick select:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
	.area-pick svg{flex:0 0 auto;width:12px;height:8px;color:var(--clay-text);pointer-events:none}
}

/* === Phone: the header is a first impression, not a permanent band (30.08) ==
   It used to hide going down and return going up, so a band kept appearing and
   disappearing over the content. Now it belongs to the top of the page: scroll
   past it and it is gone, leaving one floating control. */
.nav-float{display:none}
@media (max-width:760px){
	body.nav-floating .site-header{transform:translateY(-100%);pointer-events:none}
	.nav-float{position:fixed;top:14px;right:14px;z-index:60;
		display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
		width:46px;height:46px;border-radius:999px;border:1px solid rgba(68,64,46,.16);
		background:rgba(251,238,214,.94);backdrop-filter:blur(10px);
		box-shadow:0 6px 20px rgba(37,45,34,.16);cursor:pointer;
		opacity:0;transform:scale(.85);pointer-events:none;
		transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
	body.nav-floating .nav-float{opacity:1;transform:none;pointer-events:auto}
	.nav-float span{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px}
	body.drawer-open .nav-float{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.nav-float{transition:none}}



/* === Readability pass before owner review (30.08) ======================
   Two rules Bar asked for, applied site-wide rather than case by case. */

/* 1 · Any text sitting on a photograph carries its own shadow, so it survives
       whatever happens to be behind it in that frame. */
.area-hero__text,.atmos .inner,.parallax .inner,.hero-center,
.band-photo .inner,.stage__head,.map-open__cta,.day-caption,.proof-tag{
	text-shadow:0 1px 3px rgba(20,22,14,.45),0 2px 18px rgba(20,22,14,.35)}
.area-hero__text h1,.atmos .q,.parallax .q,.hero-center h1{
	text-shadow:0 2px 6px rgba(20,22,14,.5),0 3px 26px rgba(20,22,14,.42)}

/* 2 · Every tap target reaches 44px on a phone. The line-buttons were rendering
       at 27–30px, which is under the minimum and reads as a clipped box. */
@media (max-width:760px){
	.btn-line,.btn-solid,a.btn-line,button.btn-line{
		min-height:44px;display:inline-flex;align-items:center;justify-content:center;
		padding:12px 18px}
}

/* === The site, unedited — a contact sheet that opens (31.08) ============
   Third attempt, and the first two failed for opposite reasons. The drag strip
   hid eight of ten photographs off-screen; the mosaic showed them all but cost
   ten screens of scrolling and gave a buyer no way in. This is one stage plus
   ten small frames: the whole set is visible at a glance, any frame takes the
   stage under a finger or a cursor, and it occupies one screen. */
/* The sheet is sized by the viewport's HEIGHT, not its width: the promise of
   this section is that the whole set is visible at once, so the stage, the ten
   frames and the counter have to land inside one screen. Deriving the width
   from 58svh through the 16/9 ratio is what guarantees that on a laptop as
   well as on a large monitor. */
.sheet{--sw:min(1092px,calc(58svh * 16 / 9));width:var(--sw);max-width:calc(100% - 88px);margin:0 auto}
.sheet__head{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin:0 0 22px}
.sheet__stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sage)}
.sheet__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	filter:saturate(.92) contrast(1.03) sepia(.03);
	clip-path:inset(0 0 0 100%);transition:clip-path .85s cubic-bezier(.66,0,.34,1)}
/* the outgoing frame stays whole underneath while the new one wipes across, so
   two photographs are never blended into a ghost */
.sheet__stage img.was{clip-path:inset(0 0 0 0);z-index:1}
.sheet__stage img.on{clip-path:inset(0 0 0 0);z-index:2}
.sheet__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:44px 24px 18px;
	font-family:var(--serif);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--cream);text-shadow:0 1px 12px rgba(20,22,14,.8);
	background:linear-gradient(to top,rgba(28,30,20,.72),transparent)}
.sheet__thumbs{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:10px}
.sheet__thumbs button{position:relative;padding:0;border:none;background:none;cursor:pointer;
	aspect-ratio:1;overflow:hidden;opacity:.5;transition:opacity .35s ease}
.sheet__thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.sheet__thumbs button.on,.sheet__thumbs button:hover{opacity:1}
.sheet__thumbs button.on::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--clay)}
.sheet__thumbs button:focus-visible{outline:3px solid #1a5fb4;outline-offset:2px}
@media (max-width:900px){
	/* The section already carries the phone gutter; a second one here shrank the
	   stage to 267px inside a 375px screen. */
	.sheet{--sw:auto;width:auto;max-width:none;padding:0}
	.sheet__head{flex-direction:column;gap:6px;margin-bottom:16px}
	.sheet__stage{aspect-ratio:4/5}
	/* five across, two rows — every frame stays a real tap target */
	.sheet__thumbs{grid-template-columns:repeat(5,1fr);gap:6px}
	.sheet__cap{font-size:11.5px;padding:36px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
	.sheet__stage img{transition:none}
}
/* Direction follows the choice: pick a later frame and it wipes in from the
   right, pick an earlier one and it comes back from the left. */
.sheet__stage.rev img{clip-path:inset(0 100% 0 0)}
.sheet__stage.rev img.on,.sheet__stage.rev img.was{clip-path:inset(0 0 0 0)}
.sheet__count{display:flex;align-items:center;gap:10px;margin:14px 0 0;
	font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
.sheet__count i{flex:1;height:1px;background:rgba(68,64,46,.2);position:relative;overflow:hidden}
.sheet__count i::after{content:"";position:absolute;inset:0;transform-origin:left;background:var(--clay);
	transform:scaleX(var(--p,0));transition:transform .6s cubic-bezier(.66,0,.34,1)}

/* === Lots · the price table folds away (31.08) =========================
   The interactive plan directly above answers "which lot, how much" one lot at
   a time. Twenty-seven rows repeated underneath were length, not information —
   so the table is behind a disclosure and the page ends where the map's answer
   ends. */
.price-fold{border-top:1px solid rgba(68,64,46,.16);border-bottom:1px solid rgba(68,64,46,.16)}
.price-fold>summary{list-style:none;cursor:pointer;display:grid;gap:6px;padding:30px 0;
	position:relative;transition:opacity .25s ease}
.price-fold>summary::-webkit-details-marker{display:none}
.price-fold>summary:hover{opacity:.72}
.price-fold>summary:focus-visible{outline:3px solid #1a5fb4;outline-offset:4px}
.price-fold__eyebrow{font-family:var(--serif);font-size:11px;letter-spacing:.28em;
	text-transform:uppercase;color:var(--moss)}
.price-fold__title{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);line-height:1.12;color:var(--ink)}
.price-fold__hint{display:flex;align-items:center;gap:10px;margin-top:6px;
	font-family:var(--serif);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-text)}
.price-fold__hint i{position:relative;width:13px;height:13px;flex:0 0 auto}
.price-fold__hint i::before,.price-fold__hint i::after{content:'';position:absolute;background:currentColor}
.price-fold__hint i::before{left:0;top:6px;width:13px;height:1px}
.price-fold__hint i::after{left:6px;top:0;width:1px;height:13px;transition:transform .3s var(--ease)}
.price-fold[open] .price-fold__hint i::after{transform:scaleY(0)}
.price-fold [data-fold-shut],.price-fold[open] [data-fold-open]{display:none}
.price-fold[open] [data-fold-shut]{display:inline}
.price-fold[open]>summary{padding-bottom:22px}
.price-fold .lot-list{animation:ads-fold-in .45s var(--ease) both}
@keyframes ads-fold-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.price-fold>p:last-of-type{padding-bottom:34px}
@media (prefers-reduced-motion:reduce){.price-fold .lot-list{animation:none}}

/* === Lots · the filter row is one line on a phone (31.08) ==============
   Four labels at .26em tracking wrapped onto three lines and pushed the map
   below the fold. They scroll sideways in one row instead — the row keeps its
   height whatever the language, and Spanish ("Solo disponibles") no longer
   rearranges the page. */
@media (max-width:760px){
	/* Scoped to the Lots plan. `.filters` is also worn by `.lot-chips` on
	   Numbers — 27 chips in a grid — and forcing a single scrolling row there
	   blew the document out to 1044px wide. */
	/* 06.09.2026 — this was a sideways-scrolling strip with a fade at the right
	   edge to hint there was more. Measured at 375px, "Available only" started
	   at x=283 and ran to 412: the single most useful filter for a buyer sat
	   off-screen behind a drag most people never make. The Area page had
	   already reached the same conclusion about its own pill strip and replaced
	   it. There are only four options here, so they simply wrap onto two lines
	   — everything visible, nothing to discover. */
	body.ads-lots .filters:not(.lot-chips){flex-wrap:wrap;overflow-x:visible;gap:8px 18px;margin-bottom:20px;
		-webkit-mask-image:none;mask-image:none}
	body.ads-lots .filters:not(.lot-chips)::-webkit-scrollbar{display:none}
	/* The row scrolls, so `overflow-x:auto` clips on both axes — an oversized
	   pseudo-element cannot buy the tap target here. The button's own box is
	   44px tall and the active underline is drawn by a pseudo that stays tight
	   under the word. */
	body.ads-lots .filters:not(.lot-chips) button{position:relative;flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
		font-size:10px;letter-spacing:.14em;padding:14px 0 13px;min-height:44px;border-bottom:none}
	body.ads-lots .filters:not(.lot-chips) button::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
		background:transparent;transition:background .26s ease}
	body.ads-lots .filters:not(.lot-chips) button.on::after,
	body.ads-lots .filters:not(.lot-chips) button[aria-pressed="true"]::after{background:var(--clay)}
	body.ads-lots .filters:not(.lot-chips) button:last-child{padding-right:26px}
}

/* === The proof clip sits where the eye is (31.08) ======================
   Desktop: `align-self:start` pinned it to the top of the band, above the
   chapter mark — it read as a floating rectangle rather than the evidence for
   the sentence beside it. It is centred on its column now.
   Phone: the clip was 150px of padding plus 1218px of text below the fold. The
   footage IS the argument here, so on a phone it comes first and the sentence
   explains what you have just watched. */
.proof-shot{align-self:center}
@media (max-width:900px){
	.proof-shot{order:-1;margin-bottom:6px}
	.proof-copy{padding:30px 0 96px!important}
}



/* === The floating control is a mound of beach sand (31.08) =============
   Dry sand, not a river stone: pale, low contrast, lit softly on the crown and
   only just shaded where it meets the page. The grain is paper-grain at 30px
   so it reads as sand and not as marble. The three bars are GROOVES — a soft
   brown stroke with a pale lip on its lower edge, the way a stick dragged
   through sand throws a ridge on the near side. They sit at three different
   widths and a fraction of a degree off level, because a hand drew them.
   Press it and the mound squashes, the grooves half fill in, and the sand
   pushes out sideways. */
.nav-float{display:none}
@media (max-width:760px){
	body.nav-floating .site-header{transform:translateY(-100%);pointer-events:none}
	.nav-float{position:fixed;top:12px;right:12px;z-index:60;
		display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
		width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;padding:0;
		background-color:#EEDDB9;
		background-image:
			radial-gradient(86% 74% at 42% 28%,rgba(255,253,246,.8),rgba(255,253,246,0) 72%),
			radial-gradient(105% 86% at 50% 112%,rgba(158,124,80,.34),rgba(158,124,80,0) 62%);
		box-shadow:0 5px 9px -5px rgba(92,72,46,.5),
			inset 0 2px 3px rgba(255,253,246,.55),
			inset 0 -3px 6px rgba(158,124,80,.22);
		opacity:0;transform:scale(.85);pointer-events:none;
		transition:opacity .28s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease}
	body.nav-floating .nav-float{opacity:1;transform:none;pointer-events:auto}
	body.drawer-open .nav-float{opacity:0;pointer-events:none}

	/* The grain of the sand itself. `overlay` rather than `multiply`: sand is
	   light grains AND dark ones, and a multiply layer only ever darkens, which
	   is what made the first pass look like butter. 26px keeps a real grain
	   readable at 3x device pixels. */
	.nav-float::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
		background-image:url('assets/img/sand-grain.png');background-size:26px;
		mix-blend-mode:overlay;opacity:.6;
		transition:opacity .22s ease}

	/* three strokes pulled through the sand */
	.nav-float span{position:relative;z-index:1;display:block;height:2px;border-radius:2px;
		background:linear-gradient(to bottom,rgba(110,82,48,.66),rgba(154,122,80,.34));
		box-shadow:0 1px 0 rgba(255,253,242,.85),0 -1px 1px rgba(110,82,48,.22);
		transition:filter .2s ease,opacity .2s ease,transform .2s ease}
	.nav-float span:nth-of-type(1){width:16px;transform:rotate(-1.1deg)}
	.nav-float span:nth-of-type(2){width:13px;transform:rotate(.7deg) translateX(-1px)}
	.nav-float span:nth-of-type(3){width:15px;transform:rotate(-.5deg) translateX(1px)}

	/* sand pushed outward on impact */
	.nav-float::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
		box-shadow:0 0 0 0 rgba(158,124,80,0)}
	.nav-float.is-pressed::after{animation:ads-sand-push .5s ease-out}

	/* the mound squashes and the grooves half fill in */
	.nav-float.is-pressed{transform:scale(1.07,.85);
		box-shadow:0 2px 4px -3px rgba(92,72,46,.42),
			inset 0 1px 2px rgba(255,253,246,.36),
			inset 0 -2px 5px rgba(158,124,80,.3)}
	.nav-float.is-pressed::before{opacity:.78}
	.nav-float.is-pressed span{filter:blur(.6px);opacity:.55;transform:scaleX(1.16) translateY(.5px)}

	.nav-float__grains{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
	.nav-float__grains b{position:absolute;left:50%;top:50%;border-radius:50%;
		background:radial-gradient(circle at 34% 30%,#E7D3A6,#B08F5F);
		animation:ads-sand-spill var(--d,640ms) cubic-bezier(.2,.6,.35,1) forwards}
}
@keyframes ads-sand-push{
	0%{box-shadow:0 0 0 0 rgba(158,124,80,.42)}
	100%{box-shadow:0 0 0 11px rgba(158,124,80,0)}
}
/* lifted, carried sideways, then dropped — sand thrown, not sand beamed */
@keyframes ads-sand-spill{
	0%{transform:translate(-50%,-50%) scale(1);opacity:.95}
	45%{transform:translate(calc(-50% + var(--xm)),calc(-50% + var(--ym))) scale(.85);opacity:.8}
	100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.45);opacity:0}
}
@media (prefers-reduced-motion:reduce){
	.nav-float__grains{display:none}
	.nav-float,.nav-float span{transition:none}
}

/* === Straight bars that ripple every three seconds (04.09.2026) ========
   Three flat bars is the one element here that could have come from any
   template — but a permanently wavy hamburger stops reading as a menu. So the
   bars are straight, and once every three seconds a wave passes through them.
   Water is what this land actually sells: the tap that runs in the dry season.

   The wave is a second layer over the flat bar rather than a different shape
   for the same element, because you cannot tween one background image into
   another. Both are ink strokes of the same weight, so the crossfade reads as
   the line rippling, not as two pictures swapping.

   The bars are set here, at the end of the file, so this wins over both the
   older dark-header block and the sand-disc block above without !important. */
@media (max-width:760px){
	/* No disc. It was doing the work of a background when the bars are the idea;
	   without it the mark sits directly on the page and reads as a small drawing
	   rather than a button badge. The tap target stays 42px — only the paint is
	   gone — and the bars can sit closer, which is what lets the ripple read as
	   one piece of water instead of three separate lines. */
	.nav-float{
		background:none;background-color:transparent;background-image:none;
		border:none;border-radius:0;box-shadow:none;backdrop-filter:none;
		gap:3px}
	.nav-float::before{display:none}
	.nav-float.is-pressed{box-shadow:none}
	/* With the disc gone, the browser's default focus ring drew a blue square
	   around the bare button on every tap. A pointer does not need a focus
	   ring — a keyboard does — so the ring is scoped to :focus-visible and
	   given the site's own treatment, and the Android tap flash is removed. */
	.nav-float{outline:none;-webkit-tap-highlight-color:transparent}
	.nav-float:focus{outline:none}
	.nav-float:focus-visible{outline:3px solid #1a5fb4;outline-offset:6px;border-radius:4px}

	.nav-float span{
		position:relative;display:block;height:2px;border-radius:2px;
		background:var(--ink);background-image:none;
		box-shadow:none;filter:none;transform:none}
	.nav-float span:nth-of-type(1){width:17px}
	.nav-float span:nth-of-type(2){width:14px}
	.nav-float span:nth-of-type(3){width:16px}

	/* the ripple, sitting exactly on top of the bar it replaces */
	.nav-float span::after{
		content:'';position:absolute;left:0;right:0;top:50%;height:6px;
		transform:translateY(-50%);opacity:0;pointer-events:none;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3q2-2.2 4 0t4 0 4 0 4 0' fill='none' stroke='%2344402E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat:repeat-x;background-size:16px 6px;background-position:0 50%}

	/* One cycle is seven seconds and the wave occupies about a tenth of it.
	   Rarer than the first attempt on purpose: at three seconds it read as a
	   looping animation, at seven it reads as something that happens. Each bar
	   is a beat behind the one above, so the ripple travels down rather than
	   blinking all at once. */
	.nav-float span{animation:ads-bar-flat 7s linear infinite}
	.nav-float span::after{animation:ads-bar-wave 7s linear infinite}
	.nav-float span:nth-of-type(2),
	.nav-float span:nth-of-type(2)::after{animation-delay:.13s}
	.nav-float span:nth-of-type(3),
	.nav-float span:nth-of-type(3)::after{animation-delay:.26s}

	/* Nothing should ripple while the menu is open or while a thumb is on it. */
	body.drawer-open .nav-float span,
	body.drawer-open .nav-float span::after,
	.nav-float.is-pressed span,
	.nav-float.is-pressed span::after{animation-play-state:paused}
}
@keyframes ads-bar-flat{
	0%,2%   {opacity:1}
	5%,9%   {opacity:0}
	13%,100%{opacity:1}
}
@keyframes ads-bar-wave{
	0%,2%   {opacity:0;background-position-x:0}
	5%,9%   {opacity:1}
	13%,100%{opacity:0;background-position-x:-32px}
}
@media (prefers-reduced-motion:reduce){
	.nav-float span,.nav-float span::after{animation:none}
	.nav-float span::after{opacity:0}
}

/* === Nothing floats over an open menu (04.09.2026) =====================
   The WhatsApp and accessibility buttons sat on top of the drawer, which is
   the one screen that is meant to be nothing but type and space. They step
   back while it is open and return the moment it closes — no scroll-linked
   hiding, which is what made them flicker last time. */
body.drawer-open .wa-fab,
body.drawer-open #pa-fab{
	opacity:0;pointer-events:none;transform:translateY(8px);
	transition:opacity .28s var(--ease),transform .28s var(--ease)
}
.wa-fab,#pa-fab{transition:opacity .34s var(--ease) .12s,transform .34s var(--ease) .12s,box-shadow .4s var(--ease)}

/* === The floating buttons stay put (31.08) =============================
   They were made to duck out of the way on a downward scroll. On a real phone
   that reads as flicker — a finger touch brings them back, the scroll takes
   them away again — and the text they were said to be covering turned out to
   be the reveal clip bug below, not them. So they simply stay, with a soft
   cream ring that separates them from whatever is behind. */
@media (max-width:760px){
	/* The cream ring was meant to separate the buttons from whatever was behind
	   them. On the dark dial band it reads as a halo drawn around the button,
	   which is worse than the problem it solved. A deeper shadow does the same
	   job without announcing itself. */
	.wa-fab{box-shadow:0 8px 24px rgba(37,45,34,.45)}
	#pa-fab{box-shadow:0 8px 24px rgba(37,45,34,.4)}
}

/* === The footer stops being a corridor (31.08) =========================
   One column at 375 made it 1,099px tall — more than a whole screen of
   footer under every page. The brand block keeps the full width because the
   logo needs it; the three link columns pair up. */
@media (max-width:560px){
	.ft-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding:18px 0 24px}
	.ft-brand{grid-column:1 / -1}
	.ft-brand img{height:56px}
	.ft-brand .script{margin:12px 0 0;font-size:19px}
	.site-footer .ft-avail{margin:12px 0 0}
	.site-footer .ft-k{margin:0 0 10px}
	.site-footer .ft-col a{margin:7px 0;font-size:14.5px}
	.site-footer .ft-addr{margin:7px 0;font-size:14px;line-height:1.6}
	.ft-bottom>span{order:3;line-height:1.7}
	.ft-bottom>span.ft-usd{order:4;margin-top:5px;color:rgba(68,64,46,.5)}

	/* The floating buttons were sitting on the last two lines. They stand 42px
	   tall at 16px from the bottom, and the footer only cleared 70 — twelve
	   pixels, before their shadows. */
	/* nothing sits under the floating buttons — 70 was the old value and it was
	   twelve pixels short of the buttons themselves, never mind their shadows */
	.site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* === The enquiry form fits a thumb, not a scroll (31.08) ===============
   996px of form on an 812px screen. Name/email/country are short answers and
   read better as a tighter rhythm; the message box starts at three lines and
   grows only if there is something to say. */
@media (max-width:560px){
	.lead-form{gap:14px}
	.lead-form .field{margin-bottom:0}
	.field label{margin-bottom:6px;font-size:10px;letter-spacing:.2em}
	.field input,.field select{padding:12px 14px}
	.field textarea{min-height:76px}
	.lead-form button[type=submit]{padding:15px;margin-top:2px}
	.lead-chips{margin-bottom:14px}
	/* Country and the stage select were going to share a row, but the stage
	   label is a whole question — squeezing it into 146px meant either an
	   ellipsis or three wrapped lines. Cutting a label to save a scroll is the
	   same sin as cutting a sentence, so the rhythm is tightened instead and
	   every field keeps the full width. */
}

/* === The two strongest facts stop hiding off the right edge (31.08) =====
   The hero strip scrolled sideways on phones, so on a Galaxy S22, an iPhone
   SE, a 15 Pro and a Pixel 8 alike the visitor saw "27 LOTS · GUANACASTE,
   COSTA RICA" and had to guess that a swipe would reveal "FROM $80,000" and
   "OWNER FINANCING TO 80%". Those are the two lines that sell the project.
   Two rows, no swipe, nothing behind a gesture. */
@media (max-width:760px){
	.hero-facts{flex-wrap:wrap;overflow-x:visible;justify-content:center;
		row-gap:9px;column-gap:0;
		-webkit-mask-image:none;mask-image:none}
	.hero-facts span{padding:0 12px}
	/* the first item of each row loses its divider */
	.hero-facts span:first-child{padding-left:12px;border-left:1px solid rgba(251,238,214,.28)}
	.hero-facts span:nth-child(1),.hero-facts span:nth-child(3){border-left:none;padding-left:0}
}

/* === The reveal never runs on a phone, so it must not leave a mark (31.08)
   `[data-reveal]` starts life at `opacity:0` and `clip-path:inset(0 0 14% 0)`,
   and site.js short-circuits the whole animation below 760px — but it only
   reset opacity and transform. The clip stayed. Every revealed block on every
   phone was therefore missing the bottom 14% of itself, permanently: 13 of 13
   blocks on the Build page, taking "from approx. $375,000" and "from approx.
   $535,000" with them.
   This is CSS rather than another line of JavaScript on purpose — content on a
   phone must not depend on a script having run in order to be visible. */
@media (max-width:760px){
	[data-reveal],[data-reveal].in{opacity:1;transform:none;clip-path:none;transition:none}
}

/* === The floating buttons stop bouncing on a phone (31.08) =============
   On Android the browser's address bar collapses and expands as you scroll,
   which changes the height of the visual viewport. A `position:fixed` element
   anchored by `bottom` is then re-laid-out and repainted on every one of those
   frames, and what you see is the button hopping up and down a few pixels
   behind the content.
   Promoting both to their own compositor layer is the cure: the browser stops
   re-laying them out and simply composites them where they already are. */
@media (max-width:760px){
	.wa-fab,#pa-fab{
		will-change:transform;
		transform:translate3d(0,0,0);
		backface-visibility:hidden;
		contain:layout paint}
	/* the hover lift is a desktop gesture; on a phone it would fight the layer */
	.wa-fab:hover,#pa-fab:hover{transform:translate3d(0,0,0)}
}

/* === Start Here — nine questions, nine answers (31.08) =================
   The rest of the site is a sequence that rewards scrolling. This is the other
   door, for the visitor with ninety seconds. Tiles are plain links: no modal,
   no popup, no JavaScript. A popup would fight the calm the rest of the site
   works hard for, and a link survives a failed script. */
.start-hero{padding:150px 40px 20px}
.start-hero .inner{max-width:var(--wrap);margin:0 auto}
.start-hero h1{font-family:var(--display);font-weight:400;
	font-size:clamp(38px,5.6vw,74px);line-height:1.04;margin:16px 0 0;color:var(--ink)}
.start-lede{margin:26px 0 0;max-width:56ch;font-size:17px;line-height:1.85;color:var(--ink-muted)}
.start-wrap{padding:56px 40px 130px}
.start-grid{max-width:var(--wrap);margin:0 auto;
	display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}

/* The cards were --sand on a --cream page, and those are the same hex, so a
   'card' was a hairline round nothing. A sage wash gives it a body, and the
   brand's greens carry the question and the answer instead of flat ink. */
.qtile{display:flex;flex-direction:column;color:inherit;
	background:linear-gradient(180deg,rgba(169,178,155,.20),rgba(169,178,155,.09));
	border:1px solid rgba(105,115,83,.22);
	transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.qtile:hover{border-color:rgba(105,115,83,.5);transform:translateY(-3px);
	box-shadow:0 18px 40px -26px rgba(37,45,34,.5)}
/* The question is the button. Pressing it is what produces the answer —
   a fact you asked for lands harder than a fact you were handed. */
.qtile__ask{display:flex;flex-direction:column;width:100%;text-align:left;
	background:transparent;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.qtile__ask:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
.qtile__hint{display:inline-flex;align-items:center;gap:8px;margin:0 24px 20px;
	font-family:var(--serif);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
	color:var(--clay-text)}
.qtile__hint::after{content:"+";font-size:16px;line-height:1}
.qtile.is-open .qtile__hint{display:none}
.qtile__answer{display:flex;flex-direction:column;padding:0 24px 20px}
.ads-start-js .qtile__answer{max-height:0;opacity:0;overflow:hidden;padding-bottom:0;
	transition:max-height .5s var(--ease),opacity .4s var(--ease),padding-bottom .4s var(--ease)}
.ads-start-js .qtile.is-open .qtile__answer{max-height:460px;opacity:1;padding-bottom:20px}
.qtile__shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sage)}
.qtile__shot img{width:100%;height:100%;object-fit:cover;display:block;
	filter:saturate(.92) contrast(1.03);transition:transform 1.4s var(--ease)}
.qtile:hover .qtile__shot img{transform:scale(1.045)}
.qtile__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}
.qtile__q{font-family:var(--serif);font-size:13px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--olive);margin:20px 24px 12px}
.qtile__a{font-family:var(--display);font-size:clamp(24px,2.4vw,31px);line-height:1.14;
	color:var(--olive);margin:9px 0 0}
.qtile__line{margin:12px 0 0;font-size:16px;line-height:1.75;color:var(--ink-muted);flex:1}
.qtile__cta{display:inline-flex;align-items:center;gap:9px;margin:18px 0 0;align-self:flex-start;
	font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--clay-text);text-decoration:none;
	border-bottom:1px solid rgba(122,90,52,.4);padding-bottom:4px}
.qtile__cta:hover{color:var(--ink);border-color:var(--clay)}
.qtile__cta i{font-style:normal;transition:transform .4s var(--ease)}
.qtile:hover .qtile__cta i{transform:translateX(5px)}

.start-note{max-width:var(--wrap);margin:40px auto 0;font-size:13px;line-height:1.8;
	color:rgba(68,64,46,.62);max-width:74ch}
.start-cta{max-width:var(--wrap);margin:44px auto 0;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.start-cta__alt{font-family:var(--serif);font-size:12px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--moss);text-decoration:none;
	border-bottom:1px solid rgba(68,64,46,.3);padding-bottom:3px}
.start-cta__alt:hover{color:var(--ink);border-color:var(--clay)}

@media (max-width:1040px){
	.start-grid{grid-template-columns:repeat(2,1fr);gap:26px 22px}
	.start-hero{padding:120px 30px 16px}
	.start-wrap{padding:44px 30px 100px}
}
@media (max-width:760px){
	/* One column, and the picture gets shorter so a thumb reaches the next
	   question without three swipes. */
	.start-grid{grid-template-columns:1fr;gap:20px}
	.start-hero{padding:40px 22px 10px}
	.start-wrap{padding:30px 22px 80px}
	.qtile__shot{aspect-ratio:2/1}
	.qtile__body{padding:18px 20px 18px}
	.qtile__line{font-size:14px}
	.start-note{margin-top:28px}
	.start-cta{margin-top:30px;gap:18px}
}

/* === Start Here, second movement (01.09) ===============================
   Three instruments under the nine answers: a dial of measured drive times,
   a chronology of capital with sources, and the value ladder.

   The page goes light → dark → light so the dial reads as an instrument
   rather than another card. Every interaction degrades: with JavaScript off
   the dial is still a drawn chart plus a full list, the rail is still a row
   of readable cards, and the ladder still shows four labelled figures. */

/* ---- 1. THE DIAL ---------------------------------------------------- */
.dialband{background:var(--dark);color:var(--cream);padding:96px 40px 88px;position:relative;overflow:hidden}
.dialband__inner{max-width:var(--wrap);margin:0 auto}
.dialband__head{max-width:60ch}
.dialband .eyebrow{color:rgba(251,238,214,.8)}
.dialband h2{font-family:var(--display);font-weight:400;
	font-size:clamp(30px,3.7vw,50px);line-height:1.08;margin:14px 0 0;color:var(--cream)}
.dialband__lede{margin:20px 0 0;max-width:56ch;font-size:17.5px;line-height:1.8;color:rgba(251,238,214,.86)}

.dial{margin:46px 0 0}
.dial__chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.chip{display:inline-flex;align-items:center;gap:8px;
	font-family:var(--serif);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
	color:rgba(251,238,214,.86);background:transparent;
	border:1px solid rgba(251,238,214,.3);border-radius:999px;
	padding:10px 17px;min-height:42px;cursor:pointer;
	transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.chip i{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 auto}
.chip__short{display:none}
.chip:hover{color:var(--cream);border-color:rgba(251,238,214,.5)}
.chip.is-on{color:var(--dark);background:var(--cream);border-color:var(--cream)}
.chip:focus-visible{outline:3px solid #9ecbff;outline-offset:3px}
.chip--sound{margin-left:auto;letter-spacing:.14em;opacity:.62}
.chip--sound.is-on{opacity:1}

.dial__stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:center}
/* A circle that does not fit on one screen stops being an instrument and
   becomes a scroll. Capped so the whole dial, its rings and its readout are
   comprehensible in a single glance on a laptop. */
/* Capped by the window as well as by the column. On a short laptop window the
   chips and the dial were two separate screens, which makes a filter useless:
   you cannot see what you are filtering. */
.dial__svg{width:100%;max-width:min(600px,56vh);height:auto;display:block;margin-inline:auto;
	touch-action:pan-y;cursor:crosshair}
.dial.is-turning .dial__svg{cursor:grabbing}

.dial__rings circle{fill:none;stroke:rgba(251,238,214,.16);stroke-width:1;
	transition:transform .18s linear}
.dial__rings text{fill:rgba(251,238,214,.6);font-family:var(--serif);font-size:16px;letter-spacing:.12em}
.dial__hub{fill:none;stroke:rgba(251,238,214,.42);stroke-width:1.5}

.dial__spoke{stroke:rgba(251,238,214,.55);stroke-width:1;opacity:0;
	transition:opacity .3s var(--ease)}
.dial__spoke.is-on{opacity:1}

/* The visible dot stays small so the chart still reads as a chart, but a
   transparent stroke gives it a ~38px target. A 12px circle is not something
   a thumb can hit, and asking a buyer to aim is a design failure. */
.dot{cursor:pointer;transform-box:fill-box;transform-origin:center;
	stroke:transparent;stroke-width:26;paint-order:stroke fill;
	transition:opacity .45s var(--ease),r .3s var(--ease)}
.dot:focus-visible{outline:3px solid #9ecbff;outline-offset:2px}
/* A filter that leaves ghosts is not a filter. Choose Surf and only surf
   remains; the rings stay so the scale still reads. */
.dot.is-dim{opacity:0;pointer-events:none}
.dot.is-active{r:10}
.dial.is-in .dot{animation:ads-dot-in .62s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes ads-dot-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.dial__read{border-left:1px solid rgba(251,238,214,.2);padding:6px 0 6px 26px;min-height:132px}
.dial__read-rest,.dial__read-live{margin:0;display:flex;flex-direction:column;gap:8px}
/* An author `display` beats the `hidden` attribute, which only sets display:none
   from the user-agent sheet. So both panels were being laid out at once — the
   resting logo kept its 74px underneath the answer, the box grew by that much
   the moment a place was chosen, and the dial was pushed off the bottom of the
   phone. The reading and the dots could not be on screen together, which is
   exactly what was reported. `hidden` now means hidden. 08.09.2026. */
.dial__read-rest[hidden],.dial__read-live[hidden]{display:none}
.dial__read-mark{display:block;width:auto;height:64px;max-width:190px;object-fit:contain;
	object-position:left center;opacity:.95}
.dial__read-hint{font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;
	text-transform:uppercase;color:rgba(251,238,214,.66)}
.dial__read-name{font-family:var(--display);font-size:24px;line-height:1.2;color:var(--cream)}
.dial__read-num{font-family:var(--serif);font-size:30px;letter-spacing:.02em;color:var(--cream)}
.dial__read-cat{font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* The chooser that appears when a press could mean two places at once.
   Fixed rather than absolute so it is positioned against the viewport the
   finger is in, not against a dial that may itself be mid-rotation. */
.dial__pick{position:fixed;z-index:80;min-width:210px;max-width:300px;
	padding:6px;border-radius:8px;background:#211f19;
	border:1px solid rgba(251,238,214,.22);
	box-shadow:0 18px 44px rgba(10,10,6,.55);
	animation:ads-pick-in .16s ease-out}
@keyframes ads-pick-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dial__pick button{display:flex;align-items:center;gap:10px;width:100%;
	padding:11px 10px;min-height:44px;cursor:pointer;text-align:left;
	background:transparent;border:0;border-radius:5px;
	font-family:var(--serif);font-size:14px;line-height:1.25;color:var(--cream)}
.dial__pick button:hover,.dial__pick button:focus-visible{background:rgba(251,238,214,.1);outline:none}
.dial__pick button:focus-visible{box-shadow:inset 0 0 0 2px #9ecbff}
.dial__pick button i{flex:0 0 8px;width:8px;height:8px;border-radius:50%}
.dial__pick button span{flex:1 1 auto}
.dial__pick button em{flex:0 0 auto;font-style:normal;font-size:12.5px;
	color:rgba(251,238,214,.6);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.dial__pick{animation:none}}

.dial__honest{margin:34px 0 0;max-width:78ch;font-size:14px;line-height:1.85;
	color:rgba(251,238,214,.72)}

.dial__list{margin:26px 0 0;border-top:1px solid rgba(251,238,214,.16);padding-top:16px}
.dial__list summary{font-family:var(--serif);font-size:11px;letter-spacing:.2em;
	text-transform:uppercase;color:rgba(251,238,214,.86);cursor:pointer;padding:10px 0;min-height:44px;font-size:12.5px;
	display:flex;align-items:center}
.dial__list summary:hover{color:var(--cream)}
.dial__list h3{display:flex;align-items:center;gap:9px;margin:26px 0 10px;
	font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
	color:rgba(251,238,214,.7);font-weight:400}
.dial__list h3 i{width:8px;height:8px;border-radius:50%;display:block}
.dial__list ul{list-style:none;margin:0;padding:0;
	columns:2;column-gap:44px}
.dial__list li{display:flex;justify-content:space-between;gap:18px;
	padding:7px 0;border-bottom:1px solid rgba(251,238,214,.09);
	break-inside:avoid;font-size:15.5px;color:rgba(251,238,214,.9)}
.dial__list li b{font-weight:400;white-space:nowrap;color:rgba(251,238,214,.72)}
.dial__out{margin:30px 0 0}
.dialband .start-cta__alt{color:rgba(251,238,214,.8);border-color:rgba(251,238,214,.35)}
.dialband .start-cta__alt:hover{color:var(--cream);border-color:var(--cream)}

/* ---- 2. GOLF -------------------------------------------------------- */
/* ---- Start Here: where to go next ----------------------------------------
   Replaced the Golf, Capital and Value-ladder bands on 04.09.2026. Each of
   those retold something already published on The Area, in the Journal and on
   Numbers, which turned a quick-answer page into a long one. Three routes in
   one band instead. Palette runs sage / clay / olive so the row reads as three
   destinations rather than three of the same thing. */
.nextband{padding:104px 40px 96px;background:var(--cream)}
.nextband .inner{max-width:var(--wrap);margin:0 auto}
.nextband__h2{font-family:var(--display);font-weight:400;
	font-size:clamp(28px,3.4vw,46px);line-height:1.1;margin:14px 0 40px;max-width:24ch;color:var(--ink)}
.next-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nextcard{position:relative;display:flex;flex-direction:column;gap:11px;
	text-decoration:none;color:inherit;padding:30px 28px 66px;
	border:1px solid rgba(68,64,46,.16);
	background:linear-gradient(180deg,var(--nc-a),var(--nc-b));
	transition:border-color .4s var(--ease),transform .5s var(--ease)}
.nextcard:nth-child(1){--nc-a:rgba(169,178,155,.26);--nc-b:rgba(169,178,155,.08);--nc-r:rgba(105,115,83,.5)}
.nextcard:nth-child(2){--nc-a:rgba(166,135,99,.22);--nc-b:rgba(166,135,99,.06);--nc-r:rgba(166,135,99,.55)}
.nextcard:nth-child(3){--nc-a:rgba(148,138,89,.22);--nc-b:rgba(148,138,89,.06);--nc-r:rgba(148,138,89,.55)}
.nextcard:hover{transform:translateY(-3px);border-color:var(--nc-r)}
.nextcard:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
.nextcard__k{font-family:var(--display);font-size:27px;line-height:1.15;color:var(--ink)}
.nextcard__b{font-size:16px;line-height:1.75;color:var(--ink-muted)}
.nextcard__go{position:absolute;left:28px;bottom:26px;font-size:22px;line-height:1;
	color:var(--clay-text);transition:transform .45s var(--ease)}
.nextcard:hover .nextcard__go{transform:translateX(7px)}
@media (max-width:900px){
	.next-row{grid-template-columns:1fr}
	.nextband{padding:76px 22px 72px}
	.nextcard{padding:24px 22px 58px;gap:9px}
	.nextcard__k{font-size:23px}
	.nextcard__b{font-size:15.5px}
	.nextcard__go{left:22px;bottom:20px}
}
@media (prefers-reduced-motion:reduce){
	.nextcard,.nextcard__go{transition:none}
	.nextcard:hover{transform:none}
}

.golfband{padding:104px 40px 96px;background:var(--cream)}
.golfband .inner{max-width:var(--wrap);margin:0 auto}
.golfband__h2{font-family:var(--display);font-weight:400;
	font-size:clamp(28px,3.4vw,46px);line-height:1.1;margin:14px 0 40px;max-width:22ch;color:var(--ink)}
.golf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.golfcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
	padding:26px 26px 28px;border:1px solid rgba(68,64,46,.16);
	background:linear-gradient(180deg,rgba(148,138,89,.10),rgba(148,138,89,.04));
	transition:border-color .4s var(--ease),transform .5s var(--ease),background .4s var(--ease)}
.golfcard:hover{transform:translateY(-3px);border-color:rgba(166,135,99,.55)}
.golfcard:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
.golfcard__access{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
	font-family:var(--serif);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
	padding:6px 12px;border-radius:999px;
	color:rgba(68,64,46,.55);background:rgba(68,64,46,.06)}
.golfcard.is-open .golfcard__access{color:#4A5D31;background:rgba(143,168,107,.24)}
.golfcard.is-open{background:linear-gradient(180deg,rgba(105,115,83,.20),rgba(105,115,83,.08));
	border-color:rgba(105,115,83,.5)}
.golfcard__name{font-family:var(--display);font-size:27px;line-height:1.15;color:var(--ink)}
.golfcard.is-open .golfcard__name{color:var(--olive)}
.golfcard__time{font-family:var(--serif);font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--clay-text)}
.golfcard__body{margin-top:4px;font-size:16px;line-height:1.75;color:var(--ink-muted)}

/* ---- 3. THE CAPITAL RAIL -------------------------------------------- */
.capband{padding:100px 0 104px;background:var(--sand);
	border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capband .inner{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.capband__h2{font-family:var(--display);font-weight:400;
	font-size:clamp(28px,3.4vw,46px);line-height:1.1;margin:14px 0 0;max-width:24ch;color:var(--ink)}
.capband__lede{margin:20px 0 0;max-width:60ch;font-size:17.5px;line-height:1.8;color:var(--ink-muted)}

.cap-nav{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:26px 0 -6px}
.cap-arrow{width:46px;height:46px;border-radius:50%;cursor:pointer;
	background:var(--olive);border:1px solid var(--olive);color:var(--cream);
	font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 14px -8px rgba(37,45,34,.7);
	transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.cap-arrow:hover{background:var(--ink);border-color:var(--ink)}
.cap-arrow:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
.cap-arrow[disabled]{opacity:.3;cursor:default}
.cap-rail{margin:16px 0 0;overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;scroll-snap-type:x proximity;cursor:grab}
.cap-rail::-webkit-scrollbar{display:none}
.cap-rail.is-grabbing{cursor:grabbing}
.cap-track{display:flex;gap:22px;padding:4px 40px 10px 0}
.capcard{flex:0 0 330px;scroll-snap-align:start;
	display:flex;flex-direction:column;gap:11px;
	padding:26px 26px 24px;background:var(--cream);border:1px solid var(--line);
	position:relative}
/* Default is the finished state. start.js sets the from-state and then
   releases it, so a blocked script leaves everything drawn rather than blank. */
.capcard::before{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;
	background:var(--rule,var(--clay));transform-origin:left;
	transition:transform .7s var(--ease);transition-delay:calc(var(--n,0) * 90ms)}
.ads-start-js .capcard::before{transform:scaleX(0)}
.ads-start-js .cap-rail.is-in .capcard::before{transform:scaleX(1)}
.capcard__when{margin:0;display:flex;flex-direction:column;gap:7px;
	font-family:var(--serif);font-size:12px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--clay-text)}
.capcard__tag{align-self:flex-start;font-size:9.5px;letter-spacing:.2em;
	padding:4px 9px;border-radius:999px;background:rgba(105,115,83,.2);color:#4A5D31}
.capcard__tag--warn{background:rgba(68,64,46,.1);color:var(--ink-muted)}
.capcard__title{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.22;
	margin:0;color:var(--ink)}
.capcard__body{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-muted);flex:1}
.capcard__src{font-family:var(--serif);font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--clay-text);text-decoration:none;
	border-bottom:1px solid rgba(68,64,46,.25);align-self:flex-start;padding-bottom:3px}
.capcard__src:hover{color:var(--ink);border-color:var(--clay)}
/* Olive, not near-black. The counter-point should sound like the brand
   speaking plainly, not like a system message. */
/* One surface per card, straight from the palette. Cream on cream made five
   identical rectangles; now the chronology reads as a sequence. */
.capcard:nth-child(1){background:linear-gradient(180deg,rgba(169,178,155,.26),rgba(169,178,155,.10));
	border-color:rgba(105,115,83,.3);--rule:var(--sage)}
.capcard:nth-child(2){background:linear-gradient(180deg,rgba(148,138,89,.24),rgba(148,138,89,.09));
	border-color:rgba(148,138,89,.42);--rule:var(--moss)}
.capcard:nth-child(3){background:linear-gradient(180deg,rgba(166,135,99,.24),rgba(166,135,99,.09));
	border-color:rgba(166,135,99,.42);--rule:var(--clay)}
.capcard:nth-child(4){background:linear-gradient(180deg,rgba(105,115,83,.22),rgba(105,115,83,.08));
	border-color:rgba(105,115,83,.4);--rule:var(--olive)}
.capcard--honest{background:var(--olive);border-color:var(--olive);flex-basis:390px}
.capcard--honest .capcard__title{color:var(--cream)}
.capcard--honest .capcard__body{color:rgba(251,238,214,.76)}
.capcard--honest .capcard__when{color:rgba(251,238,214,.6)}
.capcard--honest .capcard__tag--warn{background:rgba(251,238,214,.14);color:rgba(251,238,214,.8)}
.capcard--honest .capcard__src{color:rgba(251,238,214,.8);border-color:rgba(251,238,214,.35)}
.capcard--honest .capcard__src:hover{color:var(--cream);border-color:var(--cream)}
.capcard--honest::before{background:rgba(251,238,214,.65)}

/* ---- 4. THE VALUE LADDER -------------------------------------------- */
.stepband{padding:104px 40px 118px;background:var(--cream)}
.stepband .inner{max-width:var(--wrap);margin:0 auto}
.stepband__h2{font-family:var(--display);font-weight:400;
	font-size:clamp(28px,3.4vw,46px);line-height:1.1;margin:14px 0 0;max-width:22ch;color:var(--ink)}
.stepband__lede{margin:20px 0 0;max-width:58ch;font-size:17.5px;line-height:1.8;color:var(--ink-muted)}

.stepband .steps{margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.stepband .step{display:grid;grid-template-rows:240px auto auto 1fr;gap:10px;text-align:left;
	background:transparent;border:0;
	padding:0 0 4px;cursor:pointer;font:inherit;color:inherit}
.stepband .step__bar{display:block;height:240px;position:relative;
	border-bottom:1px solid var(--line)}
.stepband .step__bar i{position:absolute;left:0;right:0;bottom:0;display:block;
	height:var(--h,20%);background:linear-gradient(to top,var(--bar-a,rgba(166,135,99,.85)),var(--bar-b,rgba(166,135,99,.34)));
	border-top:2px solid var(--bar-c,var(--clay));transform-origin:bottom;
	transition:transform .9s var(--ease),background .4s var(--ease);
	transition-delay:calc(var(--n,0) * 110ms)}
.ads-start-js .stepband .step__bar i{transform:scaleY(0)}
.ads-start-js .stepband .steps.is-in .step__bar i{transform:scaleY(1)}
.stepband .step:hover .step__bar i{background:linear-gradient(to top,rgba(166,135,99,.72),rgba(166,135,99,.24))}
.stepband .step.is-open .step__bar i{background:linear-gradient(to top,rgba(122,90,52,.75),rgba(166,135,99,.3))}
.stepband .step__k{padding-top:14px;font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--clay-text)}
.stepband .step__v{font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.15;color:var(--ink)}
.stepband .step__body{font-size:15.5px;line-height:1.72;color:var(--ink-muted);
	max-height:0;opacity:0;overflow:hidden;
	transition:max-height .55s var(--ease),opacity .4s var(--ease),margin .4s var(--ease)}
.stepband .step.is-open .step__body{max-height:260px;opacity:1;margin-top:4px}
.stepband .step:focus-visible{outline:3px solid #1a5fb4;outline-offset:4px}

.stepband__note{margin:38px 0 0;max-width:76ch;font-size:14px;line-height:1.85;
	color:rgba(68,64,46,.75)}
/* four steps, four rungs of the brand: sage → moss → olive, and clay for the
   route that is a different decision rather than a higher one */
.stepband .step:nth-child(1){--bar-a:rgba(169,178,155,.9);--bar-b:rgba(169,178,155,.34);--bar-c:var(--sage)}
.stepband .step:nth-child(2){--bar-a:rgba(148,138,89,.9);--bar-b:rgba(148,138,89,.32);--bar-c:var(--moss)}
.stepband .step:nth-child(3){--bar-a:rgba(105,115,83,.92);--bar-b:rgba(105,115,83,.34);--bar-c:var(--olive)}
.stepband .step:nth-child(4){--bar-a:rgba(166,135,99,.85);--bar-b:rgba(166,135,99,.32);--bar-c:var(--clay)}
.stepband .start-cta{margin-top:38px}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1040px){
	/* One column, the reading above the dial, and the pair treated as one thing.

	   Measured on a 390x660 phone: the reading is 112px and the dial 343px, so
	   together they are 469px and fit a phone screen with room to spare. What
	   pushes them apart is what sits above — 174px of heading and 162px of
	   filter chips across four lines. The reader lands on the chips and the
	   answer is off the bottom, or scrolls to the dial and leaves the answer
	   behind the top edge.

	   So the reading goes first, and start.js scrolls the pair — not the panel
	   alone — into place on every tap, which puts the answer at the top of the
	   screen with the dial still under the thumb. 08.09.2026. */
	.dial__stage{grid-template-columns:1fr;gap:18px;scroll-margin-top:12px}
	.dial__read{order:-1;border-left:0;border-bottom:1px solid rgba(251,238,214,.2);
		border-top:0;padding:0 0 16px;
		/* The panel must not change size when it fills. Measured at 390x660: the
		   resting state is 110px and the answer 202px, so choosing a place grew
		   the panel by 92px and shoved the dial that far down — straight off the
		   bottom of the screen. That is why the dots and the reading were never
		   on screen together. The box now reserves one height and both states
		   live inside it, so nothing below it ever moves. 08.09.2026. */
		min-height:118px;display:flex;flex-direction:column;justify-content:center}
	.dial__read-rest,.dial__read-live{gap:4px}
	.dial__read-name{font-size:20px;line-height:1.15}
	.dial__read-cat{font-size:10.5px}
	.dial__read-mark{height:40px;max-width:130px}
	.golf-row{grid-template-columns:1fr;gap:16px}
	.stepband .steps{grid-template-columns:repeat(2,1fr);gap:26px 18px}
	.stepband .step__bar{height:180px}
}
@media (max-width:760px){
	.dialband{padding:56px 14px 66px}
	.golfband,.stepband{padding:60px 22px 70px}
	.capband{padding:44px 0 48px}
	.capband .inner{padding:0 22px}
	.cap-track{padding-right:22px}
	.capcard{flex-basis:78vw}
	.capcard--honest{flex-basis:82vw}
	.dialband__head{padding:0 8px}
	.dialband__lede,.capband__lede,.stepband__lede{font-size:15px}
	.capband__h2{font-size:26px;line-height:1.14}
	.capband__lede{margin-top:14px}
	/* The filter has to sit on the same screen as the thing it filters.
	   Long labels swap for short ones and the row loses its padding, which
	   takes the chips from six lines to three and puts the dial back in view. */
	.dial__chips{gap:6px;margin-bottom:14px;padding:0 4px}
	.chip{font-size:11px;padding:8px 11px;letter-spacing:.08em;min-height:36px;gap:6px}
	.chip i{width:7px;height:7px}
	.chip__long{display:none}
	.chip__short{display:inline}
	.chip--sound{margin-left:auto;font-size:10px;padding:7px 10px;min-height:32px;opacity:.5}
	.dial{margin-top:26px}
	.dial__stage{gap:14px}
	.dial__svg{max-width:min(100%,52vh)}
	.dial__read-mark{height:48px;max-width:150px}
	/* A ring you cannot read is decoration. Below 760 the dial keeps its
	   proportions but the list underneath does the real work, so it opens. */
	.dial__list ul{columns:1}
	.dial__read-num{font-size:26px}
	.dot{r:10;stroke-width:44}
	.dot.is-active{r:15}
	.dial__pick{max-width:calc(100vw - 16px)}
	/* the ladder becomes four rows, because four columns at 360px is four
	   columns of nothing */
	.stepband .steps{grid-template-columns:1fr;gap:2px;align-items:stretch}
	.stepband .step{border-bottom:1px solid var(--line);padding:16px 0 18px;
		display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto auto;gap:4px 16px;align-items:center}
	.stepband .step__bar{height:44px;grid-row:1 / span 2;align-self:center;border-bottom:0}
	.stepband .step__bar i{top:auto;bottom:0;height:100%;width:var(--h,20%);right:auto;
		transform-origin:left;border-top:0;border-right:2px solid var(--clay);
		background:linear-gradient(to right,rgba(166,135,99,.5),rgba(166,135,99,.16))}
	.ads-start-js .stepband .step__bar i{transform:scaleX(0)}
	.ads-start-js .stepband .steps.is-in .step__bar i{transform:scaleX(1)}
	.stepband .step__k{padding-top:0;grid-column:2}
	.stepband .step__v{grid-column:2}
	.stepband .step__body{grid-column:1 / -1}
	.stepband .step.is-open .step__body{margin-top:10px}
}

/* A closed panel and a cut sentence look identical on a phone. On desktop the
   accordion earns its keep — four columns, one story at a time — and a +/–
   says plainly that there is more. Below 760 the columns are gone anyway, so
   every body is simply open and nothing is behind a tap. */
.stepband .step__v{position:relative;padding-right:24px}
.stepband .step__v::after{content:"+";position:absolute;right:0;top:0;
	font-family:var(--serif);font-size:17px;line-height:1.1;color:var(--clay-text);opacity:.75}
.stepband .step.is-open .step__v::after{content:"\2013"}
@media (max-width:760px){
	.stepband .step__v{padding-right:0}
	.stepband .step__v::after{content:none}
	.stepband .step{cursor:default}
	.stepband .step__body, .stepband .step.is-open .step__body{max-height:none;opacity:1;overflow:visible;margin-top:10px}
}

/* The five capital cards were 437px each on a phone and the band ran to 911.
   A chronology does not need five full screens; it needs five lines you can
   open. Below 760 the rail becomes a stack and each card keeps its date and
   its headline, with the detail one tap away. */
@media (max-width:760px){
	.cap-nav{display:none}
	.cap-rail{overflow:visible;cursor:default;scroll-snap-type:none}
	.cap-track{flex-direction:column;gap:0;padding:0 22px 0 0}
	.capcard{flex-basis:auto;width:100%;padding:12px 16px 13px;gap:5px;cursor:pointer;
		border-left:0;border-right:0;border-top:0}
	.capcard::before{left:0;right:0}
	.capcard__title{font-size:17px;line-height:1.28}
	.capcard__when{font-size:11px;letter-spacing:.12em}
	.capcard__tag{font-size:9px;padding:3px 8px}
	.capcard__body,.capcard__src{max-height:0;opacity:0;overflow:hidden;margin-top:0;
		transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .35s var(--ease)}
	.capcard.is-open .capcard__body{max-height:320px;opacity:1;margin-top:8px}
	.capcard.is-open .capcard__src{max-height:60px;opacity:1;margin-top:12px}
	.capcard__when::after{content:"+";margin-left:auto;font-size:17px;line-height:1;
		color:var(--clay-text);opacity:.8}
	.capcard.is-open .capcard__when::after{content:"\2013"}
	.capcard__when{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
	.capcard--honest .capcard__when::after{color:rgba(251,238,214,.85)}
}

/* ---- motion off ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
	.dial.is-in .dot{animation:none}
	.dot,.dial__spoke,.dial__rings circle,.step__bar i,.capcard::before,
	.qtile__shot img{transition:none}
	.ads-start-js .step__bar i{transform:none}
	.ads-start-js .capcard::before{transform:scaleX(1)}
}

/* === The Journal reads like writing, not a link list (06.09.2026) ======
   Eight cards at identical weight told the reader nothing about where to
   start. One lead at full size, the rest in an editorial grid — the ordinary
   grammar of a magazine, which is what this section actually is. The lead is
   whatever is newest, so the page reorders itself as pieces are published. */
.jr{padding:150px 40px 120px;background:var(--cream)}
.jr .inner{max-width:var(--wrap);margin:0 auto}
.jr__h1{font-family:var(--display);font-weight:400;
	font-size:clamp(30px,4.6vw,58px);line-height:1.06;margin:16px 0 64px;max-width:19ch;color:var(--ink)}

.jr-lead{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;
	text-decoration:none;color:inherit;margin:0 0 96px}
.jr-lead__ph{display:block;overflow:hidden;background:rgba(68,64,46,.06)}
.jr-lead__ph img{display:block;width:100%;height:min(58vh,470px);object-fit:cover;
	transition:transform 1.1s var(--ease)}
.jr-lead:hover .jr-lead__ph img{transform:scale(1.03)}
.jr-lead__body{display:flex;flex-direction:column;gap:18px}
.jr-lead__kicker{font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--clay-text)}
.jr-lead__title{font-family:var(--display);font-weight:400;
	font-size:clamp(27px,3.2vw,42px);line-height:1.12;color:var(--ink);max-width:18ch}
.jr-lead__x{font-size:16.5px;line-height:1.85;color:var(--ink-muted);max-width:46ch}
.jr-lead__go{display:inline-flex;align-items:center;gap:10px;margin-top:4px;
	font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--ink)}
.jr-lead__go i{font-style:normal;transition:transform .4s var(--ease)}
.jr-lead:hover .jr-lead__go i{transform:translateX(7px)}
.jr-lead:focus-visible{outline:3px solid #1a5fb4;outline-offset:5px}

/* No photograph yet: the lead becomes a typographic opening rather than a
   grid with a hole in it. Bigger title, a rule above, generous measure — it
   reads as a decision. Drops back to the two-column form the moment an article
   gets a featured image. */
.jr-lead--text{grid-template-columns:1fr;gap:0;padding:44px 0 0;border-top:2px solid var(--clay)}
.jr-lead--text .jr-lead__title{font-size:clamp(32px,5vw,60px);max-width:16ch}
.jr-lead--text .jr-lead__x{font-size:18px;line-height:1.9;max-width:56ch;margin-top:4px}
.jr-lead--text .jr-lead__body{gap:22px}

.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:52px 34px;
	padding-top:56px;border-top:1px solid rgba(68,64,46,.16)}
.jr-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.jr-card__ph{display:block;overflow:hidden;background:rgba(68,64,46,.06)}
.jr-card__ph img{display:block;width:100%;height:210px;object-fit:cover;
	transition:transform 1s var(--ease)}
.jr-card:hover .jr-card__ph img{transform:scale(1.04)}
.jr-card__kicker{font-family:var(--serif);font-size:11px;letter-spacing:.18em;
	text-transform:uppercase;color:rgba(68,64,46,.5)}
.jr-card__title{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--ink)}
.jr-card:hover .jr-card__title{color:var(--clay-text)}
.jr-card__x{font-size:15px;line-height:1.75;color:var(--ink-muted)}
.jr-card:focus-visible{outline:3px solid #1a5fb4;outline-offset:5px}

.jr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:96px;
	padding-top:52px;border-top:1px solid rgba(68,64,46,.16)}
.jr-cta__alt{font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.18em;
	text-transform:uppercase;color:var(--ink-muted);text-decoration:none;border-bottom:1px solid rgba(68,64,46,.3);padding-bottom:3px}
.jr-cta__alt:hover{color:var(--ink)}

@media (max-width:900px){
	.jr{padding:104px 22px 84px}
	.jr__h1{margin:14px 0 44px}
	.jr-lead{grid-template-columns:1fr;gap:24px;margin:0 0 64px}
	.jr-lead__ph img{height:min(42vh,300px)}
	.jr-lead__body{gap:14px}
	.jr-lead__x{font-size:15.5px}
	.jr-grid{gap:40px 22px;padding-top:40px}
	.jr-card__ph img{height:190px}
	.jr-cta{margin-top:64px;padding-top:38px;gap:18px}
}
@media (prefers-reduced-motion:reduce){
	.jr-lead__ph img,.jr-card__ph img,.jr-lead__go i{transition:none}
	.jr-lead:hover .jr-lead__ph img,.jr-card:hover .jr-card__ph img{transform:none}
}

/* --- Read next: articles stop being dead ends (06.09.2026) ------------- */
.read-next{margin:76px 0 0;padding:44px 0 0;border-top:1px solid rgba(68,64,46,.18)}
.read-next__k{margin:0 0 26px;font-family:var(--serif);font-weight:600;font-size:11.5px;
	letter-spacing:.22em;text-transform:uppercase;color:var(--clay-text)}
.read-next__row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.read-next__item{position:relative;display:flex;flex-direction:column;gap:9px;
	text-decoration:none;color:inherit;padding:22px 22px 50px;
	border:1px solid rgba(68,64,46,.16);
	background:linear-gradient(180deg,rgba(148,138,89,.09),rgba(148,138,89,.03));
	transition:border-color .4s var(--ease),transform .5s var(--ease)}
.read-next__item:hover{transform:translateY(-3px);border-color:rgba(166,135,99,.5)}
.read-next__item:focus-visible{outline:3px solid #1a5fb4;outline-offset:3px}
.read-next__t{font-family:var(--display);font-size:20px;line-height:1.22;color:var(--ink)}
.read-next__x{font-size:14.5px;line-height:1.7;color:var(--ink-muted)}
.read-next__go{position:absolute;left:22px;bottom:20px;font-size:19px;line-height:1;
	color:var(--clay-text);transition:transform .45s var(--ease)}
.read-next__item:hover .read-next__go{transform:translateX(6px)}
.read-next__all{display:inline-block;margin-top:28px;font-family:var(--serif);font-weight:600;
	font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);
	text-decoration:none;border-bottom:1px solid rgba(68,64,46,.3);padding-bottom:3px}
.read-next__all:hover{color:var(--ink)}
@media (max-width:760px){
	.read-next{margin:56px 0 0;padding:34px 0 0}
	.read-next__row{grid-template-columns:1fr;gap:16px}
	.read-next__item{padding:18px 18px 44px}
	.read-next__t{font-size:18.5px}
	.read-next__go{left:18px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
	.read-next__item,.read-next__go{transition:none}
	.read-next__item:hover{transform:none}
}

/* --- Two tap targets a thumb could not reach (06.09.2026) --------------
   Measured at 375px: the lot markers on the plan render 10px tall and the
   hero slide dots 2px. Both are correct as drawings and impossible as
   buttons. Neither changes size — each simply gains an invisible box around
   it, the same trick the Start Here dial uses. */
@media (max-width:760px){
	.marker::after{content:'';position:absolute;top:50%;left:50%;
		width:44px;height:44px;transform:translate(-50%,-50%);
		border-radius:50%;pointer-events:auto}
	/* The visible bar stays 2px; the button around it becomes 30px. The site is
	   border-box, so the height has to be the whole box (2 + 14 + 14) and the
	   padding is what leaves 2px of content for background-clip to paint. Set
	   as height:2px it computed to a 28px button with a 0px bar — an invisible
	   dot, which is worse than a small one. */
	.hero-dots button{height:30px;padding:14px 0;background-clip:content-box}
	.hero-dots{gap:14px}
}

/* --- Two more targets a thumb kept missing (06.09.2026) ----------------
   Measured at 375px. Neither changes how anything looks: the link keeps its
   type and position, the box around it grows. */
@media (max-width:760px){
	/* "See every lot and price →" at the foot of each Start Here tile was 26px
	   of clickable height. */
	.qtile__cta{min-height:44px;align-items:center}
	/* EN / ES in the header — a primary control at 32px. The desktop rule
	   already pads and pulls back with a negative margin; the header override
	   had dropped it. */
	.site-header .lang-switch a{
		display:inline-flex;align-items:center;min-height:44px;
		padding:12px 8px;margin:-12px -8px}
	.site-header .lang-switch{align-items:center}
}

/* --- The last three thumb targets (06.09.2026) -------------------------
   Measured at 375px: the payment-schedule tabs on Build at 22px, "Save to
   shortlist" at 23px and the per-row save button at 28px. All three are
   things a buyer is meant to press, and all three were smaller than a
   fingertip. Type and position are untouched; only the box grows. */
@media (max-width:760px){
	.pay-tabs button{min-height:44px;display:inline-flex;align-items:center}
	.shortlist-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
	/* The "+" on a lot row is a 28px square in a tight table; padding would
	   push the row apart, so it keeps its size and gains an invisible box. */
	.c-save{position:relative}
	.c-save::after{content:'';position:absolute;top:50%;left:50%;
		width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* === The closing bar, organised (06.09.2026) ==========================
   It was four unrelated things stacked hard left with one uniform gap: the
   copyright, then the social mark hanging in mid-air, then ragged lines of
   legal links, then the price note. Nothing said which belonged with which.

   Centred and grouped instead — the mark, then the legal links, then the fine
   print — with the spacing carrying the grouping rather than a repeated gap.
   Centring is the conventional gesture for the end of a page and reads as a
   deliberate close under a left-aligned footer.

   The cut is at 900, not at the 560 the rest of the footer uses: between those
   two the row simply wrapped, which left the disc alone at the far right with
   every other line flush left beneath it — the same disorder, one size up.
   Order is set in CSS, so the markup keeps its sensible reading order. */
@media (max-width:900px){
	.ft-bottom{flex-direction:column;align-items:center;text-align:center;
		gap:0;padding-top:26px}
	.ft-bottom .ft-social{order:1;margin:0 0 20px}
	.site-footer nav.ft-legal{order:2;justify-content:center;gap:10px 18px;
		margin:0 0 22px}
	/* nowrap was written against the English labels, which are short. The
	   Spanish "Aviso al comprador y descargo de responsabilidad" is 391px on
	   one line inside a 390px phone — the link ran off the right edge and its
	   last words could not be read or tapped, on every Spanish page. The short
	   labels still sit on one line naturally; only the long one now wraps.
	   07.09.2026. */
	.site-footer nav.ft-legal{max-width:100%}
	.site-footer nav.ft-legal a{white-space:normal;max-width:100%;text-align:center}
	.ft-bottom>span{order:3;line-height:1.7}
	.ft-bottom>span.ft-usd{order:4;margin-top:5px;color:rgba(68,64,46,.5)}
}