/* Layout concept: the brand's open square frame is the camera. It opens over the lake on load,
   then reappears as the container for every key moment. Type is the logo's own Arial (Arimo):
   wide-tracked black capitals over a tracked green sentence, exactly as in the lockup. */
:root{
  --paper:#ffffff;            /* logo ground */
  --paper-2:#f2f5f3;          /* paper with a breath of the brand green */
  --ink:#0a0a0a;              /* BOLAGALA wordmark */
  --ink-soft:#4a524e;
  --green:#2c6854;            /* "Agro Floating Resort" + frame, sampled from the logo */
  --green-deep:#10271f;       /* dark ground, the brand green at night */
  --green-mist:#a8d0bf;       /* brand green lifted for use on dark and on photographs */
  --rule:#d9e1dc;
  --rule-dark:rgba(255,255,255,.14);
  --on-dark:#ffffff;
  --on-dark-soft:rgba(255,255,255,.66);
  --font:"Arimo","Arial","Helvetica Neue",Helvetica,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:max(clamp(16px,5vw,80px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --track-caps:.18em;
  --track-sub:.09em;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:400;color:var(--ink);background:var(--paper);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--green-mist)}
::selection{background:var(--green);color:#fff}

/* ---------- logo ---------- */
.bl{display:block;width:100%;height:auto;overflow:visible}
.bl path{fill-rule:evenodd}
.bl .w{fill:var(--lk-ink,var(--ink))}
.bl .g{fill:var(--lk-green,var(--green))}
.bl .a{transform-box:fill-box;transform-origin:50% 40%}
.float .a{animation:bob 4.8s ease-in-out infinite}
.float .a2{animation-delay:-1.6s}
.float .a3{animation-delay:-3.2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(3.5px) rotate(-1.2deg)}65%{transform:translateY(-1.5px) rotate(.8deg)}}
.on-dark{--lk-ink:#fff;--lk-green:var(--green-mist)}

/* ---------- grain + cursor ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.4s steps(6) infinite;background-size:300px 300px}
@keyframes grain{0%{background-position:0 0}25%{background-position:-40px 30px}50%{background-position:30px -50px}75%{background-position:-60px -10px}100%{background-position:0 0}}
.cursor{position:fixed;top:0;left:0;z-index:300;pointer-events:none;width:12px;height:12px;background:#fff;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease);display:none}
.cursor span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s;padding-left:.24em}
.cursor.is-link{width:44px;height:44px}
.cursor.is-label{width:84px;height:84px;mix-blend-mode:normal;background:var(--paper)}
.cursor.is-label span{opacity:1}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:400;background:var(--paper);display:grid;place-items:center;transition:opacity .9s var(--ease) .1s,visibility 0s 1s}
.loader.done{opacity:0;visibility:hidden}
.loader .bl{width:min(72vw,520px)}
.loader .ft,.loader .fb{transform-box:fill-box;transform-origin:50% 50%;animation:frameIn 1.3s var(--ease) both}
.loader .fb{animation-delay:.12s}
@keyframes frameIn{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
.loader .w{animation:fadeUp 1.1s var(--ease) .5s both}
.loader .t{animation:fadeUp 1.1s var(--ease) .9s both}
.loader .a{animation:surface 1.4s var(--ease) both, bob 4.8s ease-in-out 2s infinite}
.loader .a1{animation-delay:.75s,2s}.loader .a2{animation-delay:.9s,.4s}.loader .a3{animation-delay:1.05s,-1.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes surface{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.loader .bar{position:absolute;left:50%;bottom:44px;width:120px;height:1px;background:var(--rule);transform:translateX(-50%);overflow:hidden}
.loader .bar i{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;animation:load 2.2s var(--ease-io) forwards}
@keyframes load{to{transform:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutter) 20px;color:#fff;--lk-ink:#fff;--lk-green:var(--green-mist);transition:transform .6s var(--ease),background .5s,color .5s,padding .5s var(--ease)}
.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);--lk-ink:var(--ink);--lk-green:var(--green);padding-top:calc(13px + env(safe-area-inset-top,0px));padding-bottom:13px;box-shadow:0 1px 0 var(--rule)}
.nav.hidden{transform:translateY(-110%)}
.nav .brand{width:150px;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s var(--ease)}
.nav.solid .brand,.nav.show-brand .brand{opacity:1;transform:none}
.nav ul{display:flex;gap:30px;list-style:none;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.nav ul a{position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:14px 22px 13px;border:1px solid currentColor;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s}
.btn::before{content:"";position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:#fff;border-color:var(--green)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--green);border-color:var(--green);color:#fff}
.btn.solid::before{background:var(--ink)}
.btn.solid:hover{border-color:var(--ink)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:8px;right:8px;height:1px;background:currentColor;top:16px;transition:.4s var(--ease)}
.burger i+i{top:24px}
.burger[aria-expanded="true"] i{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i+i{transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:99;background:var(--green-deep);color:#fff;display:grid;place-content:center;gap:14px;text-align:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s;padding:0 var(--gutter)}
.menu.open{opacity:1;visibility:visible;transition:opacity .5s}
.menu a{font-size:clamp(26px,7vw,48px);letter-spacing:var(--track-caps);text-transform:uppercase;line-height:1.2}
.menu a:hover{color:var(--green-mist)}
.menu small{display:block;margin-top:28px;font-size:12px;letter-spacing:.12em;color:var(--on-dark-soft)}
.menu.open ~ .nav,.nav.menu-open{color:#fff;--lk-ink:#fff;--lk-green:var(--green-mist);background:transparent;box-shadow:none}
@media (max-width:960px){.nav ul,.nav .btn{display:none}.burger{display:block}.nav .brand{width:128px}}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.eyebrow svg{width:34px;height:10px;flex:none}
.eyebrow svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.dark .eyebrow,.village .eyebrow{color:var(--green-mist)}
.h{display:flex;flex-direction:column;gap:.55em;font-weight:400}
.h .c{font-size:clamp(28px,5vw,80px);line-height:1.04;letter-spacing:var(--track-caps);text-transform:uppercase;text-wrap:balance;color:var(--ink)}
.h .s{font-size:clamp(17px,1.9vw,28px);line-height:1.3;letter-spacing:var(--track-sub);color:var(--green);text-wrap:balance}
.dark .h .c,.village .h .c{color:#fff}
.dark .h .s,.village .h .s{color:var(--green-mist)}
.lead{font-size:clamp(18px,1.7vw,23px);line-height:1.55;letter-spacing:.01em;color:var(--ink);max-width:40ch}
.copy{font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:var(--ink-soft);max-width:52ch}
.dark .copy,.village .copy{color:var(--on-dark-soft)}
.dark .lead{color:#fff}
.dark{background:var(--green-deep);color:#fff}
section{position:relative}

/* open-frame device, from the logo */
.frame{position:relative;padding:22px 0}
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:16px;border:2px solid var(--green);pointer-events:none}
.frame::before{top:0;border-bottom:0}
.frame::after{bottom:0;border-top:0}
.dark .frame::before,.dark .frame::after,.on-photo .frame::before,.on-photo .frame::after{border-color:var(--green-mist)}

/* reveal: words rise, images uncover from a curtain in the section colour */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{position:relative;overflow:hidden;--curtain:var(--paper)}
.paper-2 .rv-img{--curtain:var(--paper-2)}
.dark .rv-img{--curtain:var(--green-deep)}
.village .rv-img{--curtain:var(--ink)}
.rv-img::after{content:"";position:absolute;inset:-1px;background:var(--curtain);transform-origin:top;transition:transform 1.4s var(--ease);z-index:2;pointer-events:none}
.rv-img.in::after{transform:scaleY(0)}
.rv-img img{scale:1.14;transition:scale 1.9s var(--ease)}
.rv-img.in img{scale:1}
.words .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.words .wd i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform 1s var(--ease)}
.words.in .wd i{transform:none}
.no-js .rv{opacity:1;transform:none}.no-js .rv-img::after{display:none}.no-js .words .wd i{transform:none}

/* ---------- hero: the frame opens ---------- */
.hero{height:230svh;background:var(--green-deep)}
.hero .stick{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff}
.hero .media{position:absolute;inset:0}
.hero .media img,.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .media img{transform:scale(1.08);transition:transform 2.6s var(--ease)}
.loaded .hero .media img{transform:scale(1)}
.hero .media video{opacity:0;transition:opacity 1.6s}
.hero .media video.ready{opacity:1}
.hero .shade{position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 50%,rgba(16,39,31,.6),rgba(16,39,31,.2) 75%),linear-gradient(180deg,rgba(16,39,31,.45),rgba(16,39,31,0) 30%,rgba(16,39,31,0) 60%,rgba(16,39,31,.6));pointer-events:none}
.hero .lockup{position:absolute;left:50%;top:50%;width:min(76vw,680px);transform:translate(-50%,-50%)}
.hero .lockup .bl{filter:drop-shadow(0 2px 24px rgba(0,0,0,.25))}
.hero .lockup .w,.hero .lockup .t,.hero .lockup .a{transition:opacity .2s linear}
.js .hero .lockup .ft,.js .hero .lockup .fb{opacity:0}
.hframe{position:absolute;pointer-events:none;--t:3px;--arm:60px}
.hframe::before,.hframe::after{content:"";position:absolute;left:0;right:0;height:var(--arm);border:var(--t) solid var(--green-mist)}
.hframe::before{top:0;border-bottom:0}
.hframe::after{bottom:0;border-top:0}
.no-js .hframe{display:none}
.hero .corner{position:absolute;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:0;color:#fff;line-height:1.9}
.hero .cap{position:absolute;opacity:0;display:flex;flex-direction:column;gap:.5em;max-width:min(680px,80vw)}
.hero .cap .c{font-size:clamp(22px,3.4vw,52px);letter-spacing:var(--track-caps);text-transform:uppercase;line-height:1.08}
.hero .cap .s{font-size:clamp(15px,1.6vw,22px);letter-spacing:var(--track-sub);color:var(--green-mist)}
.hero .cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;transition:opacity .4s}
.hero .cue i{width:1px;height:46px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.hero .cue i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}

/* ---------- idea ---------- */
.idea{padding:clamp(100px,15vh,190px) var(--gutter) clamp(90px,12vh,150px)}
.idea .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.idea .body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);margin-top:clamp(50px,8vh,90px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(70px,10vh,120px)}
.stat{padding:34px 26px 32px;text-align:center}
.stat b{display:block;font-weight:400;font-size:clamp(46px,5.4vw,88px);line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.32em;letter-spacing:.2em;margin-left:.3em;color:var(--green);vertical-align:.9em}
.stat span{display:block;margin-top:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
@media (max-width:900px){.idea .top,.idea .body{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* ---------- origin ---------- */
.origin{padding:clamp(100px,14vh,180px) 0 clamp(100px,14vh,170px)}
.origin .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(50px,8vh,90px)}
.origin .stage{position:relative;height:clamp(520px,92vh,920px)}
.origin .ph{position:absolute;overflow:hidden}
.origin .ph img{width:100%;height:100%;object-fit:cover}
.origin .ph.a{left:var(--gutter);top:0;width:52%;height:72%}
.origin .ph.b{right:var(--gutter);bottom:0;width:36%;height:58%}
.origin .ph.c{left:39%;bottom:4%;width:21%;height:33%;z-index:3}
.origin .note{position:absolute;right:var(--gutter);top:5%;width:min(320px,32%)}
.origin .note .h .c{font-size:clamp(18px,1.7vw,24px);letter-spacing:.14em}
.origin .note .h .s{font-size:15px}
.origin .note .copy{margin-top:16px;font-size:14px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);padding:clamp(70px,10vh,110px) var(--gutter) 0}
.timeline > div{border-top:1px solid var(--rule-dark);padding-top:24px}
.timeline b{display:block;font-weight:400;font-size:clamp(34px,3.8vw,58px);letter-spacing:.08em;line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.timeline p{font-size:15px;line-height:1.65;color:var(--on-dark-soft);max-width:34ch}
@media (max-width:900px){.origin .top{grid-template-columns:1fr}.origin .stage{height:auto;display:grid;gap:14px;padding:0 var(--gutter)}.origin .ph{position:relative;inset:auto;width:100%!important;height:auto!important;aspect-ratio:4/3}.origin .note{position:static;width:auto;order:-1;margin-bottom:14px}.timeline{grid-template-columns:1fr}}

/* ---------- stay ---------- */
.stay{background:var(--paper-2)}
.stay .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.stay .bar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:110px var(--gutter) 26px}
.stay .bar .h .c{font-size:clamp(28px,4.2vw,66px)}
.stay .count{font-size:11px;letter-spacing:.24em;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--gutter) 26px;flex:1;min-height:0;will-change:transform}
.card{flex:0 0 auto;width:min(74vw,940px);display:grid;grid-template-columns:1.25fr .75fr;background:var(--paper);min-height:0}
.card .img{position:relative;overflow:hidden;min-height:260px}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.card:hover .img img{transform:scale(1.04)}
.card .body{padding:clamp(22px,2.6vw,42px);display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-width:0}
.card .h{gap:.5em}
.card .h .c{font-size:clamp(20px,1.9vw,30px);letter-spacing:.14em;line-height:1.15}
.card .h .s{font-size:clamp(14px,1.1vw,16px);letter-spacing:.07em}
.card p{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:12px;letter-spacing:.06em;border-top:1px solid var(--rule);padding-top:16px}
.card dt{color:var(--green);text-transform:uppercase;letter-spacing:.2em;font-size:10px;padding-top:2px}
.card dd{color:var(--ink)}
.card .more{font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--green)}
.card .more::after{content:"";width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.card .more:hover::after{width:40px}
.card.photo{width:min(90vw,1240px);grid-template-columns:1fr;background:var(--green-deep);color:#fff}
.card.photo .img{height:100%}
.card.photo .over{position:absolute;inset:auto 0 0 0;padding:clamp(22px,3vw,50px);background:linear-gradient(0deg,rgba(16,39,31,.9),rgba(16,39,31,0));display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;z-index:1}
.card.photo .h .c{color:#fff;font-size:clamp(24px,2.8vw,44px)}
.card.photo .h .s{color:var(--green-mist)}
.card.photo p{color:var(--on-dark-soft);max-width:44ch;font-size:15px}
.progress{height:1px;background:var(--rule);margin:0 var(--gutter) 24px;position:relative}
.progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green)}
@media (max-width:960px){
  .stay .pin{position:static;height:auto}
  .stay .bar{padding:90px var(--gutter) 24px}
  .track{flex-direction:column;gap:22px;padding-bottom:80px}
  .card,.card.photo{width:100%;grid-template-columns:1fr}
  .card .img{aspect-ratio:4/3;min-height:0}
  .card.photo .img{aspect-ratio:auto;min-height:520px}
  .progress{display:none}
}

/* ---------- dine ---------- */
.dine{padding-top:clamp(100px,14vh,180px)}
.dine .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(60px,9vh,100px)}
.venue{display:grid;grid-template-columns:1fr 1fr;min-height:82vh}
.venue .img{position:relative;overflow:hidden;min-height:340px}
.venue .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.venue .txt{padding:clamp(40px,6vw,110px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:24px;min-width:0}
.venue:nth-of-type(even) .img{order:2}
.venue .h .c{font-size:clamp(30px,4vw,64px)}
.venue .meta{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);border-top:1px solid var(--rule-dark);padding-top:20px}
.plates{padding:clamp(60px,9vh,100px) 0 clamp(80px,11vh,130px);overflow:hidden}
.plates .row{display:flex;gap:16px;width:max-content;animation:mq 46s linear infinite}
.plates:hover .row{animation-play-state:paused}
.plates figure{width:clamp(190px,22vw,300px);aspect-ratio:1;overflow:hidden;flex:none}
.plates img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plates figure:hover img{transform:scale(1.07)}
.plates .line{margin-top:44px;text-align:center;padding:0 var(--gutter);font-size:clamp(14px,1.3vw,18px);letter-spacing:.24em;text-transform:uppercase;color:var(--green-mist)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:900px){.dine .top{grid-template-columns:1fr}.venue{grid-template-columns:1fr;min-height:0}.venue .img{aspect-ratio:4/3;min-height:0;order:0!important}.venue .txt{padding:36px var(--gutter) 64px}}

/* ---------- farm ---------- */
.farm-hero{height:150vh;background:var(--green-deep)}
.farm-hero .stick{position:sticky;top:0;height:100svh;overflow:hidden}
.farm-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 40%}
.farm-hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,39,31,.66),rgba(16,39,31,.08) 62%)}
.farm-hero .txt{position:absolute;left:var(--gutter);bottom:clamp(60px,11vh,130px);max-width:min(720px,84vw)}
.farm-hero .h .c{color:#fff;font-size:clamp(34px,6vw,96px)}
.farm-hero .h .s{color:var(--green-mist)}
.farm-hero .eyebrow{color:var(--green-mist);margin-bottom:24px}
.farm{padding-bottom:clamp(90px,12vh,150px)}
.farm .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;padding:clamp(70px,10vh,110px) var(--gutter) 0;align-items:start}
.farm figure{position:relative;overflow:hidden}
.farm figure img{width:100%;height:100%;object-fit:cover}
.farm figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);z-index:1}
.farm .g1{grid-column:1/6;aspect-ratio:3/4}
.farm .g2{grid-column:7/13;aspect-ratio:4/3;margin-top:12vh}
.farm .g3{grid-column:2/6;aspect-ratio:4/3;margin-top:-4vh}
.farm .g4{grid-column:7/11;aspect-ratio:3/4;margin-top:6vh}
.farm .txt{grid-column:7/12;padding-top:8vh;display:flex;flex-direction:column;gap:22px}
.produce{margin-top:clamp(70px,10vh,110px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0;overflow:hidden;white-space:nowrap}
.produce div{display:inline-flex;align-items:center;gap:44px;padding-right:44px;font-size:clamp(18px,2.4vw,34px);letter-spacing:var(--track-caps);text-transform:uppercase;animation:mq 40s linear infinite}
.produce svg{width:30px;height:9px;flex:none;color:var(--green)}
.produce svg path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media (max-width:900px){.farm .grid{grid-template-columns:1fr 1fr;gap:12px}.farm .g1,.farm .g2,.farm .g3,.farm .g4{grid-column:auto;margin-top:0}.farm .txt{grid-column:1/-1;padding-top:26px;order:5}}

/* ---------- village ---------- */
.village{background:var(--ink);color:#fff;padding:clamp(100px,14vh,180px) 0}
.village .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(50px,8vh,80px)}
.collage{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(70px,8.6vw,140px);gap:14px;padding:0 var(--gutter)}
.collage figure{position:relative;overflow:hidden;background:#1a1c1b}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.collage figure:hover img{transform:scale(1.05)}
.collage figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);opacity:0;transform:translateY(8px);transition:.6s var(--ease);z-index:1}
.collage figure:hover figcaption,.collage figure:focus-within figcaption{opacity:1;transform:none}
.c1{grid-column:1/6;grid-row:span 3}.c2{grid-column:6/10;grid-row:span 2}.c3{grid-column:10/13;grid-row:span 3}.c4{grid-column:6/8;grid-row:span 2}.c5{grid-column:8/10;grid-row:span 2}.c6{grid-column:1/4;grid-row:span 2}.c7{grid-column:4/6;grid-row:span 2}.c8{grid-column:10/13;grid-row:span 2}
.collage .c4{grid-row:3/5}.collage .c5{grid-row:3/5}.collage .c6{grid-row:4/6}.collage .c7{grid-row:4/6}.collage .c8{grid-row:4/6}
.village .pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);padding:clamp(70px,10vh,110px) var(--gutter) 0}
.village .pledge div{border-top:1px solid var(--rule-dark);padding-top:22px}
.village .pledge b{display:block;font-weight:400;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-mist);margin-bottom:12px}
.village .pledge p{font-size:15px;line-height:1.65;color:var(--on-dark-soft)}
@media (max-width:900px){.village .top{grid-template-columns:1fr}.collage{grid-template-columns:1fr 1fr;grid-auto-rows:42vw;gap:10px}.collage figure{grid-column:auto!important;grid-row:auto!important}.collage .c1,.collage .c3{grid-column:1/-1!important}.collage figcaption{opacity:1;transform:none}.village .pledge{grid-template-columns:1fr}}

/* ---------- days ---------- */
.days{padding:clamp(100px,14vh,180px) 0}
.days .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:0 var(--gutter);margin-bottom:56px}
.list{list-style:none;border-top:1px solid var(--rule)}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:clamp(20px,2.6vw,32px) var(--gutter);transition:background .4s,padding-left .5s var(--ease)}
.list a:hover,.list a:focus-visible{background:var(--paper-2);padding-left:calc(var(--gutter) + 18px)}
.list h3{font-weight:400;font-size:clamp(19px,2.7vw,42px);letter-spacing:.14em;text-transform:uppercase;line-height:1.15;transition:color .3s}
.list a:hover h3{color:var(--green)}
.list .tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);text-align:right;white-space:nowrap}
.list .thumb{display:none}
.peek{position:fixed;z-index:90;width:300px;aspect-ratio:4/5;pointer-events:none;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .35s,transform .5s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.peek img.on{opacity:1}
@media (max-width:900px){.days .top{grid-template-columns:1fr}.list a{grid-template-columns:1fr;gap:10px}.list .tag{text-align:left}.list .thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;order:-1}.peek{display:none}}

/* ---------- gallery ---------- */
.gallery{padding:clamp(100px,14vh,180px) 0}
.gallery .top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:0 var(--gutter);margin-bottom:46px}
.strip{display:flex;gap:14px;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip figure{flex:none;height:clamp(300px,62vh,640px);scroll-snap-align:start;overflow:hidden}
.strip img{height:100%;width:auto;object-fit:cover;transition:transform 1.2s var(--ease);pointer-events:none;user-select:none}
.strip .tall img{aspect-ratio:3/4}.strip .wide img{aspect-ratio:3/2}
.strip figure:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;z-index:350;background:rgba(10,10,10,.95);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lb.open{opacity:1;visibility:visible;transition:opacity .4s}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain}
.lb button{position:absolute;color:#fff;font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:14px}
.lb .x{top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px))}
.lb .prev{left:calc(8px + env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb .next{right:calc(8px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}

/* ---------- journey ---------- */
.journey{padding:clamp(100px,14vh,180px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.jlist{margin-top:40px;border-top:1px solid var(--rule)}
.jlist div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid var(--rule);font-size:14px;letter-spacing:.04em;color:var(--ink-soft)}
.jlist b{font-weight:400;font-size:18px;letter-spacing:.1em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.route svg{width:100%;height:auto;overflow:visible}
.route .ln{fill:none;stroke:var(--green);stroke-width:1.5;stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset 3s var(--ease)}
.route.in .ln{stroke-dashoffset:0}
.route .coast{fill:none;stroke:var(--rule);stroke-width:1}
.route .dot{fill:var(--ink)}
.route text{font-family:var(--font);font-size:12px;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink-soft)}
.route text.hi{font-size:16px;letter-spacing:.16em;fill:var(--green)}
.route .ring{fill:none;stroke:var(--green)}
.route .note{font-size:10px;letter-spacing:.2em;fill:var(--ink-soft)}
@media (max-width:900px){.journey{grid-template-columns:1fr}}

/* ---------- reserve + footer ---------- */
.reserve{position:relative;color:#fff;overflow:hidden;background:var(--green-deep)}
.reserve .bg{position:absolute;inset:0}
.reserve .bg img{width:100%;height:120%;object-fit:cover;will-change:transform}
.reserve .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,31,.35),rgba(16,39,31,.9) 75%)}
.reserve .inner{position:relative;padding:clamp(120px,18vh,200px) var(--gutter) clamp(60px,9vh,90px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:end}
.reserve .lockup{width:min(520px,80vw)}
.reserve .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.reserve .cta .btn{color:#fff}
.contact{display:grid;gap:22px;font-size:15px;line-height:1.7;color:var(--on-dark-soft)}
.contact b{display:block;font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--green-mist);margin-bottom:6px}
.contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s}
.contact a:hover{border-color:#fff}
.contact .sel{user-select:all;color:#fff}
.reserve footer{position:relative;padding:0 var(--gutter) calc(34px + env(safe-area-inset-bottom,0px))}
.reserve footer .mark{padding:clamp(40px,7vh,80px) 0 clamp(30px,5vh,50px);border-top:1px solid var(--rule-dark)}
.reserve footer .mark .bl{width:100%}
.reserve footer .legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft)}
@media (max-width:900px){.reserve .inner{grid-template-columns:1fr}}


/* =================== shared page components =================== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:500;background:var(--green);color:#fff;padding:12px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:top .3s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* page hero: every page is seen through the open brand frame */
.page-hero{position:relative;height:clamp(540px,84svh,880px);overflow:hidden;color:#fff;background:var(--green-deep)}
.page-hero picture,.page-hero > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero picture img{animation:heroIn 2.6s var(--ease) both}
@keyframes heroIn{from{scale:1.08}to{scale:1}}

.page-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,31,.55),rgba(16,39,31,.05) 30%,rgba(16,39,31,.15) 55%,rgba(16,39,31,.82))}
.page-hero .pframe{position:absolute;inset:calc(76px + env(safe-area-inset-top,0px)) clamp(14px,2.2vw,32px) clamp(14px,2.2vw,32px);pointer-events:none}
.page-hero .pframe::before,.page-hero .pframe::after{content:"";position:absolute;left:0;right:0;height:min(150px,17vh);border:2px solid var(--green-mist);transform:scaleX(.2);opacity:0;transition:transform 1.6s var(--ease) .2s,opacity 1s .2s}
.page-hero .pframe::before{top:0;border-bottom:0}
.page-hero .pframe::after{bottom:0;border-top:0}
.loaded .page-hero .pframe::before,.loaded .page-hero .pframe::after,.no-js .page-hero .pframe::before,.no-js .page-hero .pframe::after{transform:none;opacity:1}
.page-hero .inner{position:absolute;left:calc(clamp(14px,2.2vw,32px) + clamp(18px,3vw,48px));right:calc(clamp(14px,2.2vw,32px) + clamp(18px,3vw,48px));bottom:calc(clamp(14px,2.2vw,32px) + clamp(30px,5vh,56px));display:flex;flex-direction:column;gap:22px;max-width:1100px}
.page-hero h1.h .c{color:#fff;font-size:clamp(32px,6vw,96px)}
.page-hero h1.h .s{color:var(--green-mist)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 12px;opacity:.5}
.crumbs a{opacity:.8;transition:opacity .3s}
.crumbs a:hover{opacity:1}
.crumbs [aria-current]{color:var(--green-mist)}

/* intro + at-a-glance */
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,110px);padding:clamp(80px,12vh,150px) var(--gutter);align-items:start}
.intro .lead{max-width:44ch}
.intro .copy{margin-top:20px}
.glance{padding:34px clamp(22px,2.6vw,38px)}
.glance h2{font-weight:400;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin-bottom:20px}
.glance dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:12px 22px;font-size:15px;line-height:1.5}
.glance dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.glance dd{color:var(--ink)}
.dark .glance h2{color:var(--green-mist)}.dark .glance dt{color:var(--on-dark-soft)}.dark .glance dd{color:#fff}
@media (max-width:900px){.intro{grid-template-columns:1fr}.glance dl{grid-template-columns:1fr;gap:4px}.glance dd{margin-bottom:10px}}

/* split feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.feature .img{position:relative;min-height:clamp(380px,70vh,760px);overflow:hidden}
.feature .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .txt{padding:clamp(48px,7vw,120px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:22px;min-width:0}
.feature.flip .img{order:2}
.feature .h .c{font-size:clamp(26px,3.4vw,54px)}
ul.ticks{list-style:none;display:grid;gap:10px;font-size:15px;color:var(--ink-soft);max-width:52ch}
ul.ticks li{padding-left:44px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:30px;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 6.5 C 5 4, 9 3.6, 13 4.6 S 21 7.8, 26 6.6 S 31 4.6, 33 3.4' fill='none' stroke='%232c6854' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.dark ul.ticks li{color:var(--on-dark-soft)}
.dark ul.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 6.5 C 5 4, 9 3.6, 13 4.6 S 21 7.8, 26 6.6 S 31 4.6, 33 3.4' fill='none' stroke='%23a8d0bf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (max-width:900px){.feature{grid-template-columns:1fr}.feature .img{min-height:0;aspect-ratio:4/3;order:0!important}.feature .txt{padding:40px var(--gutter) 64px}}

/* link cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);padding:0 var(--gutter)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.lcard{display:flex;flex-direction:column;gap:18px;color:inherit}
.lcard .img{position:relative;overflow:hidden;aspect-ratio:4/3}
.lcard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.lcard:hover .img img{transform:scale(1.05)}
.lcard .h{gap:.45em}
.lcard .h .c{font-size:clamp(17px,1.5vw,23px);letter-spacing:.14em;line-height:1.2}
.lcard .h .s{font-size:15px;letter-spacing:.06em}
.lcard p{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.dark .lcard p{color:var(--on-dark-soft)}
.lcard .more{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);display:inline-flex;gap:10px;align-items:center}
.dark .lcard .more{color:var(--green-mist)}
.lcard .more::after{content:"";width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.lcard:hover .more::after{width:40px}
@media (max-width:1100px){.cards.four{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}

.block{padding:clamp(80px,12vh,150px) 0}
.block > .head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(44px,7vh,76px)}
@media (max-width:900px){.block > .head{grid-template-columns:1fr}}
.paper-2{background:var(--paper-2)}

/* amenity grid */
.amen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin:0 var(--gutter)}
.amen div{padding:26px 22px 26px 0;border-bottom:1px solid var(--rule)}
.amen b{display:block;font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.amen span{font-size:15px;color:var(--ink)}
@media (max-width:900px){.amen{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq{padding:0 var(--gutter);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,100px);align-items:start}
.faq .side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.faq .side nav a{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:8px 0;color:var(--ink-soft)}
.faq .side nav a:hover{color:var(--green)}
.faq h2.grp{font-weight:400;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--green);padding:48px 0 14px;border-bottom:1px solid var(--rule);scroll-margin-top:100px}
.faq .qa > h2.grp:first-child{padding-top:0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font-size:clamp(17px,1.5vw,21px);letter-spacing:.02em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--green);transition:transform .4s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--green)}
.faq summary h3{font:inherit;letter-spacing:inherit}
.faq .ans{padding:0 0 26px;font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:62ch}
.ans a,.copy a,.prose a{color:var(--green);border-bottom:1px solid currentColor}
.dark .copy a{color:var(--green-mist)}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq .side{position:static}}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--green-deep);color:#fff;padding:clamp(80px,13vh,150px) var(--gutter)}
.cta-band .inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding:clamp(38px,4.4vw,66px) clamp(22px,3vw,50px)}
.cta-band .inner::before,.cta-band .inner::after{content:"";position:absolute;left:0;right:0;height:min(110px,32%);border:2px solid var(--green-mist);pointer-events:none}
.cta-band .inner::before{top:0;border-bottom:0}.cta-band .inner::after{bottom:0;border-top:0}
.cta-band .h .c{color:#fff;font-size:clamp(28px,4.4vw,70px)}
.cta-band .h .s{color:var(--green-mist)}
.cta-band .acts{display:flex;gap:14px;flex-wrap:wrap}
.cta-band .btn{color:#fff}
@media (max-width:900px){.cta-band .inner{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);padding:0 var(--gutter)}
.contact-grid > div{padding:34px 26px}
.contact-grid h2{font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.contact-grid p{font-size:17px;line-height:1.7}
.sel{user-select:all}
.copybtn{margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* prose (story, policies) */
.prose{max-width:68ch;font-size:17px;line-height:1.8;color:var(--ink-soft)}
.prose h2{font-weight:400;font-size:clamp(20px,2vw,28px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:56px 0 18px;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:18px}
.prose ul{margin:18px 0 0 1.2em}
.prose li+li{margin-top:8px}

/* gallery page */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 var(--gutter);margin-bottom:34px}
.filters button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 16px 10px;border:1px solid var(--rule);color:var(--ink-soft);transition:.3s}
.filters button[aria-pressed="true"],.filters button:hover{border-color:var(--green);color:var(--green)}
.mosaic{columns:3 320px;column-gap:14px;padding:0 var(--gutter)}
.mosaic figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;cursor:zoom-in;position:relative}
.mosaic figure[hidden]{display:none}
.mosaic img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.mosaic figure:hover img{transform:scale(1.03)}
.mosaic figcaption{position:absolute;inset:auto 0 0 0;padding:14px 16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .4s}
.mosaic figure:hover figcaption,.mosaic figure:focus-visible figcaption{opacity:1}
@media (hover:none){.mosaic figcaption{opacity:1}}

/* location */
.dist{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);padding:0 var(--gutter)}
.dist > div{padding:30px 22px;text-align:center}
.dist b{display:block;font-weight:400;font-size:clamp(32px,3.6vw,54px);letter-spacing:.06em;line-height:1;font-variant-numeric:tabular-nums}
.dist span{display:block;margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
@media (max-width:900px){.dist{grid-template-columns:1fr 1fr}}

/* site footer */
.site-foot{background:var(--ink);color:#fff;padding:clamp(70px,10vh,110px) var(--gutter) calc(30px + env(safe-area-inset-bottom,0px))}
.site-foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.site-foot h2{font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--green-mist);margin-bottom:16px}
.site-foot ul{list-style:none;display:grid;gap:9px;font-size:15px}
.site-foot ul a{color:var(--on-dark-soft);transition:color .3s}
.site-foot ul a:hover{color:#fff}
.site-foot address{font-style:normal;font-size:15px;line-height:1.75;color:var(--on-dark-soft)}
.site-foot address .sel{color:#fff}
.site-foot .mark{padding:clamp(56px,9vh,100px) 0 clamp(26px,4vh,40px);--lk-ink:#fff;--lk-green:var(--green-mist)}
.site-foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);border-top:1px solid var(--rule-dark);padding-top:24px}
@media (max-width:900px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-foot .cols{grid-template-columns:1fr}}

/* 404 */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gutter);background:var(--paper)}
.notfound .lockup{width:min(420px,80vw);margin:0 auto 40px}
.notfound .h{align-items:center}
.notfound .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}


/* =================== visual-first components: icons carry the information =================== */
html,body{overflow-x:clip}
.ic{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;overflow:visible}

/* fact tiles: icon, value, label */
.facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.facts li{background:var(--paper);padding:26px 22px 24px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:background .4s}
.facts li:hover{background:var(--paper-2)}
.facts .ic{width:34px;height:34px;color:var(--green);stroke-width:1.2;transition:transform .6s var(--ease)}
.facts li:hover .ic{transform:translateY(-3px)}
.facts b{font-weight:400;font-size:clamp(17px,1.5vw,21px);letter-spacing:.04em;line-height:1.25;color:var(--ink)}
.facts span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.paper-2 .facts li{background:var(--paper-2)}.paper-2 .facts li:hover{background:#fff}
.dark .facts{background:var(--rule-dark);border-color:var(--rule-dark)}
.dark .facts li{background:var(--green-deep)}.dark .facts li:hover{background:#163428}
.dark .facts .ic{color:var(--green-mist)}.dark .facts b{color:#fff}.dark .facts span{color:var(--on-dark-soft)}
.facts.big .ic{width:44px;height:44px}
.facts.big b{font-size:clamp(26px,2.6vw,40px);letter-spacing:.06em}

/* chips: icon + a few words */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:1px solid currentColor;font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap}
.chips .ic{width:18px;height:18px}
.page-hero .chips li,.on-photo .chips li{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(16,39,31,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.page-hero .chips .ic{color:var(--green-mist)}
.dark .chips li{color:var(--on-dark-soft);border-color:var(--rule-dark)}.dark .chips .ic{color:var(--green-mist)}
.chips.soft li{border-color:var(--rule);color:var(--ink)}.chips.soft .ic{color:var(--green)}

/* icon grid: larger tiles for amenities / crafts / rules */
.igrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(10px,1.4vw,18px)}
.igrid li{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid var(--rule);position:relative;overflow:hidden;transition:border-color .4s,color .4s}
.igrid li::after{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--green);transition:height .5s var(--ease);z-index:-1}
.igrid li{isolation:isolate}
.igrid li:hover{border-color:var(--green);color:#fff}
.igrid li:hover::after{height:100%}
.igrid .ic{width:40px;height:40px;color:var(--green);stroke-width:1.1;transition:color .4s}
.igrid li:hover .ic{color:#fff}
.igrid span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.dark .igrid li{border-color:var(--rule-dark)}.dark .igrid .ic{color:var(--green-mist)}
@media (max-width:520px){.igrid{grid-template-columns:repeat(2,1fr)}}

/* spec row on cards */
.spec{list-style:none;display:flex;flex-wrap:wrap;gap:16px 22px;font-size:12px;letter-spacing:.08em;color:var(--ink)}
.spec li{display:inline-flex;align-items:center;gap:8px}
.spec .ic{width:20px;height:20px;color:var(--green)}
.dark .spec li,.card.photo .spec li{color:#fff}.dark .spec .ic{color:var(--green-mist)}

/* icon list rows (days, distances) */
.list h3{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.list h3 .ic{width:clamp(26px,2.6vw,38px);height:clamp(26px,2.6vw,38px);color:var(--green);stroke-width:1.1}
.jlist div span{display:inline-flex;align-items:center;gap:12px}
.jlist .ic{width:22px;height:22px;color:var(--green)}

/* steps (directions) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);padding:0 var(--gutter)}
.steps li{padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.steps .ic{width:40px;height:40px;color:var(--green);stroke-width:1.1}
.steps b{font-weight:400;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.steps p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* lead line with icon tiles beside */
.lead-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px);padding:clamp(70px,11vh,140px) var(--gutter);align-items:start}
.lead-row .lead{font-size:clamp(20px,2vw,28px);line-height:1.45;max-width:26ch}
@media (max-width:900px){.lead-row{grid-template-columns:1fr}}

/* eyebrow icon variant */
.eyebrow .ic{width:20px;height:20px}

/* hero chips placement */
.page-hero .inner .chips{margin-top:4px}

/* experience tiles: image with icon badge */
.xcard{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;color:#fff}
.xcard picture,.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xcard img{transition:transform 1.4s var(--ease)}
.xcard:hover img{transform:scale(1.06)}
.xcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,31,0) 40%,rgba(16,39,31,.85))}
.xcard .badge{position:absolute;top:16px;left:16px;z-index:2;width:52px;height:52px;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--green)}
.xcard .badge .ic{width:28px;height:28px;stroke-width:1.2}
.xcard .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:8px}
.xcard .cap b{font-weight:400;font-size:clamp(16px,1.4vw,20px);letter-spacing:.16em;text-transform:uppercase}
.xcard .cap span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}
.xgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);padding:0 var(--gutter)}
@media (max-width:1100px){.xgrid{grid-template-columns:1fr 1fr}}

/* chapters (story) */
.chapter{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(24px,4vw,70px);align-items:center;padding:clamp(50px,8vh,90px) var(--gutter);border-top:1px solid var(--rule)}
.chapter .yr{font-size:clamp(56px,9vw,150px);letter-spacing:.02em;line-height:.85;color:var(--green);font-variant-numeric:tabular-nums}
.chapter .img{aspect-ratio:4/3;overflow:hidden;position:relative}
.chapter .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chapter .txt{display:flex;flex-direction:column;gap:16px}
.chapter .txt p{font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:40ch}
.chapter:nth-child(even) .img{order:3}
@media (max-width:900px){.chapter{grid-template-columns:1fr}.chapter:nth-child(even) .img{order:0}}

/* contact tiles */
.ctile{display:flex;flex-direction:column;gap:18px;padding:34px 28px;border:1px solid var(--rule);transition:border-color .4s,background .4s}
.ctile:hover{border-color:var(--green);background:var(--paper-2)}
.ctile .ic{width:46px;height:46px;color:var(--green);stroke-width:1.1}
.ctile b{font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.ctile .v{font-size:clamp(18px,1.6vw,22px);letter-spacing:.03em;word-break:break-word}

/* mobile fixes */
@media (max-width:900px){.origin .ph.a,.origin .ph.b,.origin .ph.c{left:auto;right:auto;top:auto;bottom:auto}}


/* icon placements */
.stat .ic{display:block;width:32px;height:32px;margin:0 auto 18px;color:var(--green);stroke-width:1.1}
.pledge .ic{width:36px;height:36px;color:var(--green-mist);margin-bottom:16px;stroke-width:1.1}
.contact b .ic{width:16px;height:16px;margin:-3px 6px 0 0}
.faq h2.grp{display:flex;align-items:center;gap:12px}
.faq h2.grp .ic{width:22px;height:22px}
.faq .side nav a{display:flex;align-items:center;gap:6px}
.faq .side nav a .ic{width:20px;height:20px;color:var(--green)}
.filters button{display:inline-flex;align-items:center;gap:8px}
.filters .ic{width:17px;height:17px}
.card .facts{grid-template-columns:repeat(2,1fr)}
.card .facts li{padding:16px 16px 14px;gap:8px}
.card .facts .ic{width:26px;height:26px}
.card .facts b{font-size:16px}
.hero .chips li,.card.photo .chips li{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(16,39,31,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .chips .ic,.card.photo .chips .ic{color:var(--green-mist)}
.hero .cap{gap:18px}
.origin .top .chips{align-self:end}
.village .igrid li{border-color:rgba(255,255,255,.16)}
.village .igrid .ic{color:var(--green-mist)}
.lead-row .lead a,.idea .lead a{color:var(--green);border-bottom:1px solid currentColor;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.farm .txt{gap:26px}
.chapter .txt .ic{width:36px;height:36px;color:var(--green);stroke-width:1.1}
.lead-row > .ic,.lead-row div > .ic{width:40px;height:40px;color:var(--green)}
.days .top .btn,.block .head .btn{align-self:end}
@media (max-width:620px){.card .facts{grid-template-columns:1fr 1fr}.chips li{font-size:10px;padding:9px 12px 9px 10px}}


/* fact grids divide evenly: 3 columns, 4 when there are exactly 4 or 8, 2 when there are 2 */
.facts{grid-template-columns:repeat(3,1fr)}
.facts:has(> li:nth-child(4):last-child),.facts:has(> li:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
.facts:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.lead-row .facts:has(> li:nth-child(4):last-child),.feature .facts:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.card .facts{grid-template-columns:repeat(2,1fr)!important}
@media (max-width:620px){.facts,.facts:has(> li:nth-child(4):last-child),.facts:has(> li:nth-child(8):last-child){grid-template-columns:repeat(2,1fr)}}


.list a > picture{display:none}
.village .top .igrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.list a > picture{display:block;order:-1}.list a > picture img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.village .top .igrid{grid-template-columns:repeat(2,1fr)}}

/* =================== photography first: natural framing, no awkward crops =================== */
/* features and venues show the photograph at its own 3:2 proportion */
.feature{align-items:center}
.feature .img{min-height:0;aspect-ratio:3/2;align-self:center}
.venue{min-height:0;align-items:center}
.venue .img{min-height:0;aspect-ratio:3/2}
/* parallax images get a little bleed so drift never shows an edge */
[data-speed]{will-change:transform}

/* home stay rail: image at 3:2, card hugs it */
.track{align-items:center}
.card{align-self:center}
.card .img{min-height:0;aspect-ratio:3/2;align-self:stretch}
.card.photo .img{aspect-ratio:auto;height:100%}
@media (min-width:961px){.card .img{aspect-ratio:auto;min-height:min(62vh,600px)}}

/* origin stage: three photographs at 3:2, overlapping */
@media (min-width:901px){
  .origin .stage{height:62vw;max-height:1000px}
  .origin .ph.a{left:var(--gutter);top:0;width:54%;height:auto;aspect-ratio:3/2}
  .origin .ph.b{right:var(--gutter);left:auto;top:34%;bottom:auto;width:40%;height:auto;aspect-ratio:3/2}
  .origin .ph.c{left:30%;top:60%;bottom:auto;width:26%;height:auto;aspect-ratio:3/2}
  .origin .note{top:3%;width:min(300px,30%)}
}
@media (max-width:900px){.origin .ph{aspect-ratio:3/2!important}}

/* farm grid: natural ratios */
.farm .g1,.farm .g2,.farm .g3,.farm .g4{aspect-ratio:auto}
.farm figure img{height:auto}
.farm .g1{grid-column:1/7}.farm .g2{grid-column:7/13;margin-top:10vh}.farm .g3{grid-column:1/6;margin-top:0}.farm .g4{grid-column:6/11;margin-top:6vh}
.farm .txt{grid-column:7/13}
@media (max-width:900px){.farm .g1,.farm .g2,.farm .g3,.farm .g4{grid-column:1/-1;margin-top:0}}

/* village masonry on dark */
.village-mosaic{columns:3 300px}
.village-mosaic figure{background:#1a1c1b}

/* experience tiles: portrait, centred on their focal points */
.xcard{aspect-ratio:4/5}

/* mosaics keep every photograph whole */
.mosaic img{aspect-ratio:auto}

/* page hero: shorter on phones so landscapes keep their story */
@media (max-width:700px){.page-hero{height:clamp(460px,72svh,640px)}}
.page-hero picture img{will-change:transform}

/* =================== expanding brand frame (signature, one per subpage) =================== */
.expand{height:240svh;position:relative;background:var(--paper)}
.paper-2 + .expand,.expand.on-2{background:var(--paper-2)}
.expand .stick{position:sticky;top:0;height:100svh;overflow:hidden}
.expand .win{position:absolute;inset:0;clip-path:inset(var(--y,18%) var(--x,22%));will-change:clip-path}
.expand .win picture,.expand .win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.expand .win img{transform:scale(var(--s,1.18));will-change:transform}
.expand .brk{position:absolute;inset:var(--y,18%) var(--x,22%);pointer-events:none;opacity:var(--bo,1)}
.expand .brk::before,.expand .brk::after{content:"";position:absolute;left:-14px;right:-14px;height:min(120px,16vh);border:2px solid var(--green)}
.expand .brk::before{top:-14px;border-bottom:0}
.expand .brk::after{bottom:-14px;border-top:0}
.expand .xcap{position:absolute;left:calc(var(--gutter) + 10px);bottom:clamp(30px,7vh,70px);display:flex;flex-direction:column;gap:18px;color:#fff;opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 24px));z-index:2}
.expand .xcap .h .c{color:#fff;font-size:clamp(28px,4.6vw,72px)}
.expand .xcap .chips li{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(16,39,31,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.expand .xcap .chips .ic{color:var(--green-mist)}
.expand .stick::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,39,31,.7));opacity:var(--co,0);pointer-events:none}
.no-js .expand{height:auto}.no-js .expand .stick{position:relative;height:80svh}.no-js .expand .win{clip-path:none}.no-js .expand .xcap{opacity:1;transform:none}
@media (max-width:700px){.expand{height:200svh}.expand .brk::before,.expand .brk::after{left:-8px;right:-8px}}

/* hero still: slow cinematic drift on independent scale/translate so it never fights other transforms */
.hero .media img{animation:heroDrift 32s ease-in-out infinite alternate}
@keyframes heroDrift{from{scale:1.02;translate:0 0}to{scale:1.1;translate:-1.6% -1.2%}}
.hero .media video.ready ~ img,.hero .media:has(video.ready) img{animation:none}

/* =================== full-screen heroes with a curtain transition =================== */
/* subpages: the hero is a 100svh stage pinned inside a taller header */
.page-hero{height:175svh;position:relative;background:var(--green-deep);overflow:visible;--p:0}
@media (max-width:700px){.page-hero{height:165svh}}
.ph-stick{position:sticky;top:0;height:100svh;height:100svh;overflow:hidden}
@supports (height:100svh){.ph-stick{height:100svh}}
.page-hero picture{position:absolute;inset:0;clip-path:inset(calc(var(--p) * 9%) calc(var(--p) * 7%));transform:scale(calc(1 - var(--p) * .03));will-change:clip-path,transform}
.page-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .dim{position:absolute;inset:0;background:var(--green-deep);opacity:calc(var(--p) * .35);pointer-events:none}
.page-hero .pframe{inset:calc((1 - var(--p)) * (76px + env(safe-area-inset-top,0px)) + var(--p) * (9% - 18px)) calc((1 - var(--p)) * clamp(14px,2.2vw,32px) + var(--p) * (7% - 18px)) calc((1 - var(--p)) * clamp(14px,2.2vw,32px) + var(--p) * (9% - 18px))}
.page-hero .inner{opacity:calc(1 - var(--p) * 1.9);transform:translateY(calc(var(--p) * -90px))}
.page-hero .shade{opacity:calc(1 - var(--p) * .6)}
.ph-cue{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);width:1px;height:54px;background:rgba(255,255,255,.25);overflow:hidden;transform:translateX(-50%);opacity:calc(1 - var(--p) * 4)}
.ph-cue i{position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:cue 2.2s var(--ease-io) infinite}
/* the next section rises over the pinned hero like a curtain */
.page-hero + section{position:relative;z-index:3;margin-top:-75svh;box-shadow:0 -50px 90px -30px rgba(10,20,16,.45)}
.page-hero + section:not(.paper-2):not(.dark){background:var(--paper)}
@media (max-width:700px){.page-hero + section{margin-top:-65svh}}

/* home: once the frame has opened, the first section rises over the full-screen photograph */
.hero{height:270svh}
.hero .stick::after{content:"";position:absolute;inset:0;background:var(--green-deep);opacity:calc(var(--cover,0) * .45);pointer-events:none;z-index:4}
.hero + .idea{position:relative;z-index:5;margin-top:-70svh;background:var(--paper);box-shadow:0 -50px 90px -30px rgba(10,20,16,.45)}

/* =================== days: expanding photo panels (visual first) =================== */
.days{padding-bottom:clamp(90px,13vh,160px)}
.days .top{margin-bottom:clamp(36px,6vh,60px)}
.acc{display:flex;gap:clamp(6px,.7vw,12px);height:min(80svh,780px);padding:0 var(--gutter)}
.acc-p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;color:#fff;transition:flex-grow 1s var(--ease);isolation:isolate;opacity:0;transform:translateY(40px)}
.acc.in .acc-p{opacity:1;transform:none;transition:flex-grow 1s var(--ease),opacity 1s var(--ease) calc(var(--i) * 70ms),transform 1.1s var(--ease) calc(var(--i) * 70ms)}
.no-js .acc-p{opacity:1;transform:none}
.acc-p.on{flex-grow:6}
.acc-p picture,.acc-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acc-p img{transition:transform 1.4s var(--ease),filter .8s;transform:scale(1.08);filter:saturate(.75) brightness(.8)}
.acc-p.on img{transform:scale(1);filter:none}
.acc-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,31,0) 45%,rgba(16,39,31,.82));z-index:1;pointer-events:none}
/* collapsed: a vertical label on the photo slice */
.acc-v{position:absolute;left:50%;bottom:24px;z-index:2;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:11px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:opacity .4s}
.acc-v b{font-weight:400}
.acc-v .ic{width:20px;height:20px;transform:rotate(90deg);color:var(--green-mist)}
.acc-p.on .acc-v{opacity:0}
/* expanded: badge, name, time */
.acc-c{position:absolute;left:clamp(18px,2.2vw,34px);right:clamp(18px,2.2vw,34px);bottom:clamp(18px,3vh,34px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .7s var(--ease)}
.acc-p.on .acc-c{opacity:1;transform:none;transition-delay:.25s}
.acc-c .badge{width:56px;height:56px;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green)}
.acc-c .badge .ic{width:30px;height:30px;stroke-width:1.2}
.acc-c b{font-weight:400;font-size:clamp(22px,2.4vw,40px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.acc-c .t{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:9px 14px 8px 10px;border:1px solid rgba(255,255,255,.45);background:rgba(16,39,31,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.acc-c .t .ic{width:16px;height:16px;color:var(--green-mist)}
.acc-p:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* phones and small tablets: swipeable photo cards */
@media (max-width:900px){
  .acc{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;padding-bottom:4px}
  .acc::-webkit-scrollbar{display:none}
  .acc-p,.acc-p.on{flex:0 0 78vw;aspect-ratio:4/5;scroll-snap-align:center}
  .acc-p img{transform:none;filter:none}
  .acc-v{display:none}
  .acc-c{opacity:1;transform:none}
}

/* the idea: heading and intro, then the photo stat tiles */
.idea{padding:clamp(100px,15vh,190px) 0 0;background:var(--paper)}
.idea .top{padding:0 var(--gutter);margin-bottom:clamp(44px,7vh,76px)}

/* photo stat tiles with count-up numbers */
.stiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);padding:0 var(--gutter) clamp(90px,13vh,160px);background:var(--paper)}
.stile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;color:#fff}
.stile picture,.stile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stile img{transition:transform 1.4s var(--ease)}
.stile:hover img{transform:scale(1.06)}
.stile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,39,31,.05) 35%,rgba(16,39,31,.85));z-index:1}
.stile .badge{position:absolute;top:16px;left:16px;z-index:3;width:50px;height:50px;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green)}
.stile .badge .ic{width:26px;height:26px;stroke-width:1.2}
.stile b{position:absolute;left:20px;bottom:46px;z-index:3;font-weight:400;font-size:clamp(52px,6vw,110px);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.stile b small{font-size:.3em;letter-spacing:.2em;margin-left:.25em;vertical-align:1.1em;color:var(--green-mist)}
.stile .l{position:absolute;left:22px;bottom:20px;z-index:3;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82)}
@media (max-width:900px){.stiles{grid-template-columns:1fr 1fr}}

/* =================== green grounds: lake-depth contours, moonlit glow, slow drift =================== */
.dark,.cta-band,.menu{isolation:isolate}
.dark::before,.cta-band::before,.menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 88% 4%,rgba(168,208,191,.13),transparent 70%),
    radial-gradient(60% 55% at 4% 100%,rgba(44,104,84,.45),transparent 70%),
    radial-gradient(40% 35% at 45% 55%,rgba(168,208,191,.05),transparent 70%)}
.dark::after,.cta-band::after,.menu::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../brand/contours.svg") center/1800px auto repeat;opacity:.09;animation:contourDrift 90s linear infinite}
@keyframes contourDrift{to{background-position:calc(50% + 1800px) 50%}}
.dark,.cta-band{position:relative}
.cta-band .inner::before,.cta-band .inner::after{z-index:1}
@media (prefers-reduced-motion:reduce){.dark::after,.cta-band::after,.menu::after{animation:none}}

@media (prefers-reduced-motion:reduce){.acc-p,.acc.in .acc-p{opacity:1;transform:none;transition:none}}

@media (prefers-reduced-motion:reduce){.expand{height:auto}.expand .stick{position:relative;height:80svh}.expand .win{clip-path:none}.expand .brk{display:none}.expand .xcap{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .grain,.float .a,.plates .row,.produce div,.hero .cue i::after,.loader *,.hero .media img{animation:none!important}
  .rv,.words .wd i{transition:none!important;opacity:1!important;transform:none!important}
  .rv-img img{scale:1!important;transition:none!important}
  .rv-img::after{display:none}
  .hero{height:100svh}
  .page-hero{height:100svh}.page-hero + section,.hero + .idea{margin-top:0;box-shadow:none}
  .page-hero picture{clip-path:none;transform:none}
  .page-hero picture img{animation:none!important;transform:none!important}
  .page-hero .pframe::before,.page-hero .pframe::after{transform:none!important;opacity:1!important;transition:none!important}
}

/* stat tiles, calmer: square, dimmed photo, numbers on a frosted band */
.stile{aspect-ratio:1/1}
.stile img{filter:brightness(.72) saturate(.85);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.stile:hover img{filter:none}
.stile::after{background:linear-gradient(180deg,rgba(16,39,31,.25),rgba(16,39,31,0) 35%)}
.stile .band{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px);background:rgba(16,39,31,.72);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-top:1px solid rgba(168,208,191,.25)}
.stile .band b{position:static;font-size:clamp(46px,4.6vw,84px);line-height:.95;text-shadow:none}
.stile .band b small{color:rgba(255,255,255,.75);vertical-align:.9em}
.stile .band .l{position:static;font-size:12px;letter-spacing:.2em;color:#fff}
@media (max-width:900px){.stile{aspect-ratio:4/5}.stile .band b{font-size:44px}.stile .band .l{font-size:10px}}

/* =================== glass on green: aurora glow, frosted lenses, glass surfaces =================== */
/* 1. light behind the glass: colours from the photography (lake teal, mist, a whisper of sunset) */
.dark::before,.cta-band::before,.menu::before{z-index:-3;
  background:
    radial-gradient(38% 48% at 14% 18%,rgba(42,127,133,.30),transparent 70%),
    radial-gradient(34% 42% at 86% 26%,rgba(233,163,91,.11),transparent 70%),
    radial-gradient(46% 56% at 72% 86%,rgba(168,208,191,.17),transparent 70%),
    radial-gradient(30% 40% at 34% 74%,rgba(196,120,140,.07),transparent 70%);
  background-size:150% 150%;animation:aurora 38s ease-in-out infinite alternate}
@keyframes aurora{0%{background-position:0% 0%,100% 0%,100% 100%,0% 100%}100%{background-position:35% 25%,65% 35%,60% 65%,40% 60%}}
/* 2. the wavy contours stay, quieter, under the glass */
.dark::after,.cta-band::after,.menu::after{z-index:-2;opacity:.075}
/* 4. glass surfaces on green */
.dark .chips li,.cta-band .chips li{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border-color:rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:rgba(255,255,255,.88)}
.glassy,.origin .note,.timeline > div,.cta-band .inner{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.018) 60%);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 80px -40px rgba(0,0,0,.5)}
.origin .note{padding:clamp(22px,2vw,32px)}
.origin .note .h .c{line-height:1.25}
.timeline > div{padding:26px 24px 24px;border-top:1px solid rgba(255,255,255,.13)}
.timeline b{color:#fff}
.cta-band .inner::before,.cta-band .inner::after{left:-1px;right:-1px}
.dark .facts{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12)}
.dark .facts li{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dark .facts li:hover{background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
@media (prefers-reduced-motion:reduce){.dark::before,.cta-band::before,.menu::before{animation:none}}


/* =================== green grounds = frosted glass over the lake =================== */
/* a blurred resort photo, under a translucent brand-green tint with a faint glass sheen */
.dark::before,.cta-band::before,.menu::before{animation:none;z-index:-3;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(14,34,27,.34),rgba(14,34,27,.58)),
    url("../img/bg/blur-night-cabanas.webp") center/cover no-repeat}
.origin.dark::before{background:
    linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(14,34,27,.34),rgba(14,34,27,.58)),
    url("../img/bg/blur-sunset-float.webp") center/cover no-repeat}
.dine.dark::before{background:
    linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(14,34,27,.34),rgba(14,34,27,.58)),
    url("../img/bg/blur-pool-dusk.webp") center/cover no-repeat}
.gallery.dark::before{background:
    linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(14,34,27,.34),rgba(14,34,27,.58)),
    url("../img/bg/blur-pool-aframe-sunset.webp") center/cover no-repeat}
.cta-band::before,.menu::before{background:
    linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(14,34,27,.32),rgba(14,34,27,.56)),
    url("../img/bg/blur-hero-aerial.webp") center/cover no-repeat}
/* the etched wave lines stay as a whisper on the glass */
.dark::after,.cta-band::after,.menu::after{opacity:.045}

/* =================== images fill the screen, empty grounds shrink =================== */

/* 1. split sections (features + dining venues) become full-bleed photographs with a glass card */
.feature,.venue{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;min-height:min(96svh,1040px);padding:clamp(18px,3.4vw,56px);overflow:hidden;isolation:isolate;background:var(--green-deep)}
.feature.flip,.venue:nth-of-type(even){justify-content:flex-start}
.feature .img,.venue .img{position:absolute;inset:0;aspect-ratio:auto;min-height:0;z-index:-1;order:0!important}
.feature .img picture,.venue .img picture{position:absolute;inset:0}
.feature .img picture::after,.venue .img picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,24,19,.18),rgba(10,24,19,0) 30%,rgba(10,24,19,0) 55%,rgba(10,24,19,.45))}
.feature .img img,.venue .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::before,.feature::after,.venue::before,.venue::after{display:none}
.feature .txt,.venue .txt{position:relative;width:min(560px,100%);padding:clamp(24px,2.8vw,42px);gap:18px;color:#fff;
  background:linear-gradient(135deg,rgba(12,30,24,.66),rgba(12,30,24,.44));backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.6)}
.feature .txt .h .c,.venue .txt .h .c{color:#fff;font-size:clamp(24px,2.8vw,46px)}
.feature .txt .h .s,.venue .txt .h .s{color:var(--green-mist)}
.feature .txt .eyebrow{color:var(--green-mist)}
.feature .txt .copy,.venue .txt .copy{color:rgba(255,255,255,.82)}
.feature .txt .copy a,.venue .txt .copy a{color:var(--green-mist)}
.feature .txt .btn{color:#fff}
.feature .txt ul.ticks li{color:rgba(255,255,255,.82)}
.feature .txt ul.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 6.5 C 5 4, 9 3.6, 13 4.6 S 21 7.8, 26 6.6 S 31 4.6, 33 3.4' fill='none' stroke='%23a8d0bf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.feature .txt .facts{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.feature .txt .facts li{background:rgba(10,26,20,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
.feature .txt .facts li:hover{background:rgba(10,26,20,.15)}
.feature .txt .facts .ic{color:var(--green-mist)}.feature .txt .facts b{color:#fff}.feature .txt .facts span{color:rgba(255,255,255,.66)}
.feature .txt .igrid{grid-template-columns:repeat(4,1fr);gap:8px}
.feature .txt .igrid li{aspect-ratio:auto;min-height:96px;padding:14px;border-color:rgba(255,255,255,.16);color:#fff;gap:14px}
.feature .txt .igrid .ic{width:30px;height:30px;color:var(--green-mist)}
.feature .txt .igrid span{font-size:10px}
.venue .txt .meta{border-top-color:rgba(255,255,255,.16)}
.venue .txt .chips li{color:#fff;border-color:rgba(255,255,255,.28)}
@media (max-width:900px){
  .feature,.venue{display:block;min-height:0;padding:0 0 28px}
  .feature .img,.venue .img{position:relative;inset:auto;aspect-ratio:4/5;z-index:0}
  .feature .txt,.venue .txt{width:auto;margin:-120px 12px 0;z-index:1}
  .feature .txt .igrid{grid-template-columns:repeat(2,1fr)}
}

/* 2. the evenings collage: bigger photographs, smaller gutters, note floats over them */
@media (min-width:901px){
  .origin .stage{height:64vw;max-height:1080px}
  .origin .ph.a{left:clamp(12px,1.6vw,28px);top:0;width:62%}
  .origin .ph.b{right:clamp(12px,1.6vw,28px);top:30%;width:46%}
  .origin .ph.c{left:33%;top:63%;width:30%}
  .origin .note{right:clamp(28px,3.2vw,56px);top:4%;width:min(320px,28%);z-index:4}
}
.origin .top,.dine .top,.gallery .top,.days .top,.village .top,.idea .top{margin-bottom:clamp(28px,4vh,48px)}

/* 3. reserve bands sit on real photography */
.cta-band{padding:clamp(90px,16vh,180px) var(--gutter)}
.cta-band::before{background:linear-gradient(180deg,rgba(10,24,19,.35),rgba(10,24,19,.62)),url("../img/night-cabanas.webp") center/cover no-repeat}
.cta-band::after{display:none}
.cta-band .inner{max-width:1100px}

/* 4. tighter rhythm everywhere: less empty ground between the pictures */
.idea{padding-top:clamp(56px,8vh,96px)}
.stiles{padding-bottom:clamp(48px,7vh,80px)}
.origin{padding:clamp(56px,8vh,96px) 0 clamp(56px,8vh,90px)}
.timeline{padding-top:clamp(36px,5vh,56px)}
.dine{padding-top:clamp(56px,8vh,96px)}
.plates{padding:clamp(40px,6vh,64px) 0 clamp(48px,7vh,80px)}
.farm{padding-bottom:clamp(48px,7vh,80px)}
.farm .grid{gap:12px;padding:clamp(24px,4vh,48px) clamp(12px,1.6vw,28px) 0}
.farm .g2{margin-top:6vh}.farm .g4{margin-top:3vh}
.produce{margin-top:clamp(36px,5vh,56px)}
.village{padding:clamp(56px,8vh,96px) 0}
.village .pledge{padding-top:clamp(36px,5vh,56px)}
.village-mosaic{padding:0 clamp(12px,1.6vw,28px)}
.days{padding:clamp(56px,8vh,96px) 0 clamp(48px,7vh,80px)}
.acc{padding:0 clamp(12px,1.6vw,28px);height:min(86svh,860px)}
.gallery{padding:clamp(56px,8vh,96px) 0}
.strip{padding:0 clamp(12px,1.6vw,28px)}
.strip figure{height:clamp(340px,74vh,760px)}
.journey{padding:clamp(56px,8vh,96px) var(--gutter)}
.block{padding:clamp(48px,7vh,88px) 0}
.block > .head{margin-bottom:clamp(24px,4vh,44px)}
.lead-row{padding:clamp(48px,7vh,88px) var(--gutter)}
.cards,.xgrid,.mosaic{padding-left:clamp(12px,1.6vw,28px);padding-right:clamp(12px,1.6vw,28px)}
.mosaic{column-gap:10px}.mosaic figure{margin-bottom:10px}
.stiles{padding-left:clamp(12px,1.6vw,28px);padding-right:clamp(12px,1.6vw,28px)}
.stay .bar{padding-top:96px;padding-bottom:18px}
.card{width:min(80vw,1040px)}
.site-foot{padding-top:clamp(56px,8vh,90px)}
.feature .img,.venue .img{align-self:stretch;justify-self:stretch;height:auto}
/* glass card side is chosen per photo (opposite its focal point) */
.feature,.feature.flip,.venue,.venue:nth-of-type(even){justify-content:flex-end}
.feature.cl,.venue.cl{justify-content:flex-start}

/* =================== stacked photo sections: each pins, the next slides over it =================== */
.stack{position:relative}
.stack > .feature,.stack > .venue{position:sticky;top:0;height:100svh;min-height:0;transform-origin:50% 30%;will-change:transform,filter}
.stack > * + *{box-shadow:0 -50px 90px -30px rgba(0,0,0,.55)}
@media (max-width:900px){
  .stack > .feature,.stack > .venue{display:flex;align-items:flex-end;padding:12px 12px 22px}
  .stack > .feature .img,.stack > .venue .img{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
  .stack > .feature .txt,.stack > .venue .txt{margin:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.stack > .feature,.stack > .venue{position:relative;height:auto;min-height:min(96svh,1040px)}}
/* phones: compact glass cards inside stacks so the photograph stays the hero */
@media (max-width:900px){
  .stack .txt{padding:18px 18px 16px;gap:12px}
  .stack .txt .h .c{font-size:22px}
  .stack .txt .h .s{font-size:14px}
  .stack .txt .eyebrow{display:none}
  .stack .txt .facts{grid-template-columns:repeat(4,1fr)!important}
  .stack .txt .facts li{padding:10px 8px;gap:6px}
  .stack .txt .facts .ic{width:20px;height:20px}
  .stack .txt .facts b{font-size:12px;letter-spacing:.02em}
  .stack .txt .facts span{display:none}
  .stack .txt .chips li{padding:8px 10px;font-size:9px}
}

/* =================== one tracking for every title, one for every subtitle =================== */
:root{--track-caps:.06em;--track-sub:.02em}
.h .c,.hero .cap .c,.menu a,.produce div,.origin .note .h .c,.card .h .c,.lcard .h .c,.prose h2,.xcard .cap b,.acc-c b,.list h3,.timeline b,.route text.hi,.feature .txt .h .c,.venue .txt .h .c,.stack .txt .h .c,.cta-band .h .c,.expand .xcap .h .c,.page-hero h1.h .c,.farm-hero .h .c,.stay .bar .h .c,.notfound .h .c,.chapter .txt .h .c{letter-spacing:var(--track-caps)}
.h .s,.hero .cap .s,.card .h .s,.lcard .h .s,.feature .txt .h .s,.venue .txt .h .s,.page-hero h1.h .s{letter-spacing:var(--track-sub)}

/* =================== light stone grounds (replaces the green and black open sections) =================== */
:root{--sand:#f3f1ec;--paper-2:#f3f1ec}
.sand{background:var(--sand);color:var(--ink)}
.sand::before,.sand::after{display:none}
.sand .rv-img{--curtain:var(--sand)}
.sand .chips li{color:var(--ink);border-color:var(--rule);background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.sand .chips .ic{color:var(--green)}
/* evenings */
.origin.sand .note{background:rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--rule);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.origin.sand .note .h .c{color:var(--ink)}
.origin.sand .timeline > div{background:#fff;border:1px solid var(--rule);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.origin.sand .timeline b{color:var(--ink)}
.origin.sand .timeline p{color:var(--ink-soft)}
/* dining intro and plates */
.dine.sand .plates .line{color:var(--green)}
/* village house */
.village.sand{background:var(--sand);color:var(--ink)}
.village.sand .h .c{color:var(--ink)}
.village.sand .h .s,.village.sand .eyebrow{color:var(--green)}
.village.sand .copy{color:var(--ink-soft)}
.village.sand .igrid li{border-color:var(--rule);color:var(--ink)}
.village.sand .igrid li:hover{color:#fff}
.village.sand .igrid .ic{color:var(--green)}
.village.sand .igrid li:hover .ic{color:#fff}
.village.sand .village-mosaic figure{background:#e7e4dd}
.village.sand .pledge div{border-top-color:var(--rule)}
.village.sand .pledge b,.village.sand .pledge .ic{color:var(--green)}
.village.sand .pledge p{color:var(--ink-soft)}
.village.sand .rv-img{--curtain:var(--sand)}
/* menu overlay: clean deep green, no photo haze */
.menu::before{background:radial-gradient(70% 60% at 85% 0%,rgba(44,104,84,.55),transparent 70%)}
.menu::after{display:none}

/* =================== home farm: one organised photo grid =================== */
.farm{background:var(--paper);padding-bottom:clamp(48px,7vh,80px)}
.farm-bar{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:clamp(18px,3vh,30px) clamp(12px,1.6vw,28px)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,clamp(230px,35vh,400px));grid-template-areas:"tea tea fish coco" "tea tea cook cook";gap:10px;padding:0 clamp(12px,1.6vw,28px)}
.b-tea{grid-area:tea}.b-fish{grid-area:fish}.b-coco{grid-area:coco}.b-cook{grid-area:cook}
.btile{position:relative;display:block;overflow:hidden;color:#fff}
.btile picture,.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.btile img{transition:transform 1.4s var(--ease)}
.btile:hover img{transform:scale(1.05)}
.btile picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,19,0) 45%,rgba(10,24,19,.78));pointer-events:none}
.btile .cap{position:absolute;left:clamp(14px,1.4vw,22px);right:clamp(14px,1.4vw,22px);bottom:clamp(14px,1.4vw,20px);z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.btile .badge{width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green);margin-bottom:8px}
.btile .badge .ic{width:24px;height:24px;stroke-width:1.2}
.btile b{font-weight:400;font-size:clamp(18px,1.6vw,26px);line-height:1.1;letter-spacing:var(--track-caps);text-transform:uppercase}
.b-tea b{font-size:clamp(26px,2.8vw,48px)}
.btile .cap > span:last-child{font-size:13px;line-height:1.4;color:rgba(255,255,255,.82)}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:72vw 46vw 46vw;grid-template-areas:"tea tea" "fish coco" "cook cook";gap:8px}
  .btile .cap > span:last-child{display:none}
  .farm-bar .chips{display:none}
}

/* =================== village: complete photo grid + compact pledge cards =================== */
.vbento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,clamp(190px,25vh,290px));gap:10px;padding:0 clamp(12px,1.6vw,28px);
  grid-template-areas:"meal meal grind cart" "meal meal smile cart" "pot weave loom loom"}
.v-meal{grid-area:meal}.v-grind{grid-area:grind}.v-cart{grid-area:cart}.v-smile{grid-area:smile}.v-pot{grid-area:pot}.v-weave{grid-area:weave}.v-loom{grid-area:loom}
.vtile{position:relative;overflow:hidden;cursor:zoom-in;background:#e7e4dd}
.vtile picture,.vtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vtile img{transition:transform 1.4s var(--ease)}
.vtile:hover img{transform:scale(1.05)}
.vtile picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,19,0) 55%,rgba(10,24,19,.7));pointer-events:none}
.vtile figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.v-meal figcaption{font-size:clamp(16px,1.5vw,22px);letter-spacing:var(--track-caps)}
@media (max-width:900px){
  .vbento{grid-template-columns:1fr 1fr;grid-template-rows:62vw 44vw 44vw 62vw 44vw;grid-template-areas:"meal meal" "grind smile" "pot weave" "cart cart" "loom loom";gap:8px}
}
.village .pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px clamp(12px,1.6vw,28px) 0}
.village .pledge .pcard{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;border:1px solid var(--rule);border-top:1px solid var(--rule)}
.village .pledge .pbadge{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--sand);color:var(--green)}
.village .pledge .pbadge .ic{width:26px;height:26px;margin:0;stroke-width:1.2;color:var(--green)}
.village .pledge b{display:block;margin:0 0 4px;font-size:15px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink)}
.village.sand .pledge b{color:var(--ink)}
.village .pledge p{font-size:14px;line-height:1.4;color:var(--ink-soft)}
@media (max-width:900px){.village .pledge{grid-template-columns:1fr}}

/* =================== tighter line spacing for all running text =================== */
.copy{line-height:1.55}
.lead{line-height:1.4}
.lead-row .lead{line-height:1.35}
.prose{line-height:1.6}
.prose p+p{margin-top:14px}
.faq .ans{line-height:1.6}
.timeline p{line-height:1.45}
.chapter .txt p{line-height:1.55}
.steps p{line-height:1.5}
.card p,.lcard p{line-height:1.55}
.xcard .cap span{line-height:1.4}
.contact{line-height:1.55}
.site-foot address{line-height:1.6}
.cl-lead{line-height:1.5}
.village .pledge .pcard > div{border:0;padding:0;margin:0}

/* =================== photo cards: light stone panel replaces the dark glass =================== */
.feature .img picture::after,.venue .img picture::after{background:linear-gradient(180deg,rgba(10,24,19,.16),rgba(10,24,19,0) 28%,rgba(10,24,19,0) 72%,rgba(10,24,19,.2))}
.feature .txt,.venue .txt{width:min(470px,100%);padding:clamp(24px,2.4vw,36px);gap:16px;color:var(--ink);
  background:rgba(248,246,241,.94);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:0;box-shadow:0 34px 80px -36px rgba(8,20,16,.55)}
.feature .txt::before,.venue .txt::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--green)}
.feature .txt .eyebrow,.venue .txt .eyebrow{color:var(--green)}
.feature .txt .h,.venue .txt .h{gap:10px}
.feature .txt .h .c,.venue .txt .h .c{color:var(--ink);font-size:clamp(26px,2.5vw,40px);line-height:1.04}
.feature .txt .h .s,.venue .txt .h .s{color:var(--green);font-size:clamp(15px,1.15vw,18px);line-height:1.3}
.feature .txt .copy,.venue .txt .copy{color:var(--ink-soft)}
.feature .txt .copy a,.venue .txt .copy a{color:var(--green)}
.feature .txt .btn,.venue .txt .btn{color:var(--ink)}
.feature .txt .btn:hover,.venue .txt .btn:hover{color:#fff}
.feature .txt ul.ticks li{color:var(--ink-soft)}
.feature .txt ul.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 6.5 C 5 4, 9 3.6, 13 4.6 S 21 7.8, 26 6.6 S 31 4.6, 33 3.4' fill='none' stroke='%232c6854' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* facts inside the card: white cells, hairline rules */
.feature .txt .facts,.venue .txt .facts{background:var(--rule);border-color:var(--rule)}
.feature .txt .facts li,.venue .txt .facts li{background:#fff;padding:18px 16px 16px;gap:10px;backdrop-filter:none;-webkit-backdrop-filter:none}
.feature .txt .facts li:hover,.venue .txt .facts li:hover{background:var(--sand)}
.feature .txt .facts .ic,.venue .txt .facts .ic{color:var(--green);width:28px;height:28px}
.feature .txt .facts b,.venue .txt .facts b{color:var(--ink);font-size:clamp(15px,1.2vw,18px)}
.feature .txt .facts span,.venue .txt .facts span{color:var(--ink-soft)}
/* icon grid inside the card */
.feature .txt .igrid li{border-color:var(--rule);color:var(--ink);background:#fff}
.feature .txt .igrid .ic{color:var(--green)}
.feature .txt .igrid li:hover,.feature .txt .igrid li:hover .ic{color:#fff}
/* chips inside the card: one clean row, icon + label, hairline dividers, no boxes */
.feature .txt .chips,.venue .txt .chips{gap:12px 0;padding-top:16px;border-top:1px solid var(--rule)}
.feature .txt .chips li,.venue .txt .chips li{color:var(--ink);background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 18px;font-size:11px;letter-spacing:.16em}
.feature .txt .chips li:first-child,.venue .txt .chips li:first-child{padding-left:0}
.feature .txt .chips li + li,.venue .txt .chips li + li{border-left:1px solid var(--rule)}
.feature .txt .chips .ic,.venue .txt .chips .ic{color:var(--green);width:20px;height:20px}
/* the card link */
.feature .txt .more,.venue .txt .more{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.feature .txt .more::after,.venue .txt .more::after{content:"";width:26px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.feature .txt .more:hover::after,.venue .txt .more:hover::after{width:44px}
.venue .txt .meta{border-top-color:var(--rule);color:var(--ink-soft)}
@media (max-width:900px){
  .feature .txt,.venue .txt{box-shadow:0 24px 50px -28px rgba(8,20,16,.5)}
  .feature .txt .chips li,.venue .txt .chips li{padding:2px 12px;font-size:10px;letter-spacing:.12em}
  .stack .txt{padding:20px 18px 18px;gap:12px}
  .stack .txt .h .c{font-size:22px}
  .stack .txt .h .s{font-size:14px}
  .stack .txt .chips{padding-top:12px}
  .stack .txt .facts li{padding:10px 8px;gap:6px}
  .stack .txt .facts .ic{width:20px;height:20px}
  .stack .txt .facts b{font-size:12px;letter-spacing:.02em}
}

/* =================== photo cards sit top right, clear of the nav =================== */
.feature,.feature.flip,.feature.cl,.venue,.venue:nth-of-type(even),.venue.cl{align-items:flex-start;justify-content:flex-end;padding-top:clamp(92px,12vh,128px)}
/* chip row: wraps cleanly, no dividers left dangling at a line start */
.feature .txt .chips,.venue .txt .chips{gap:10px 26px}
.feature .txt .chips li,.venue .txt .chips li{padding:2px 0}
.feature .txt .chips li + li,.venue .txt .chips li + li{border-left:0}
@media (max-width:900px){
  .stack > .feature,.stack > .venue{align-items:flex-start;padding:92px 12px 12px}
  .feature .txt .chips,.venue .txt .chips{gap:10px 18px}
}

/* =================== nav: seven links stay on one line down to the burger breakpoint =================== */
.nav ul a{white-space:nowrap}
@media (max-width:1180px){.nav ul{gap:20px;letter-spacing:.16em}}
@media (max-width:1060px){.nav ul{gap:16px;letter-spacing:.12em;font-size:10.5px}.nav .brand{width:128px}}

/* =================== home FAQ: photo with glance tiles + icon-led questions =================== */
.qhome{padding:clamp(64px,10vh,120px) var(--gutter)}
.qtop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,4.5vh,52px)}
.qtop .btn{flex:none}
.qgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,56px);align-items:start}
.qphoto{position:sticky;top:96px;height:min(80vh,780px);margin:0;overflow:hidden;background:#e7e4dd}
.qphoto picture,.qphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qphoto picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,24,19,0) 48%,rgba(10,24,19,.5))}
.qglance{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qglance li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(248,246,241,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:0}
.qglance .ic{flex:none;width:26px;height:26px;color:var(--green)}
.qglance b{display:block;font-weight:400;font-size:clamp(16px,1.35vw,21px);line-height:1.1;letter-spacing:.04em;color:var(--ink)}
.qglance span{display:block;margin-top:5px;font-size:10px;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.qlist{border-top:1px solid var(--rule)}
.qlist details{border-bottom:1px solid var(--rule)}
.qlist summary{list-style:none;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:18px;padding:16px 2px;cursor:pointer}
.qlist summary::-webkit-details-marker{display:none}
.qlist .qi{width:48px;height:48px;display:grid;place-items:center;background:#fff;color:var(--green);border:1px solid var(--rule);transition:background .4s,color .4s,border-color .4s}
.qlist .qi .ic{width:24px;height:24px}
.qlist small{display:block;margin-bottom:5px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.qlist h3{font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.3;letter-spacing:.01em;color:var(--ink);transition:color .3s}
.qlist summary:hover h3{color:var(--green)}
.qlist .qx{position:relative;width:30px;height:30px;border:1px solid var(--rule);transition:background .4s,border-color .4s}
.qlist .qx::before,.qlist .qx::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--green);transform:translate(-50%,-50%);transition:transform .4s var(--ease),background .4s}
.qlist .qx::after{transform:translate(-50%,-50%) rotate(90deg)}
.qlist details[open] .qx{background:var(--green);border-color:var(--green)}
.qlist details[open] .qx::before,.qlist details[open] .qx::after{background:#fff}
.qlist details[open] .qx::after{transform:translate(-50%,-50%) rotate(0deg)}
.qlist details[open] .qi,.qlist summary:hover .qi{background:var(--green);border-color:var(--green);color:#fff}
.qlist .ans{padding:0 48px 22px 68px;max-width:72ch;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.qlist .ans a{color:var(--green);border-bottom:1px solid currentColor;white-space:nowrap}
.qlist details[open] .ans{animation:qin .5s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .qgrid{grid-template-columns:1fr}
  .qphoto{position:relative;top:auto;height:auto;aspect-ratio:4/5;max-height:72svh;width:100%}
  .qlist summary{grid-template-columns:40px minmax(0,1fr) 26px;gap:14px;padding:14px 0}
  .qlist .qi{width:40px;height:40px}
  .qlist .qi .ic{width:20px;height:20px}
  .qlist .qx{width:26px;height:26px}
  .qlist .ans{padding:0 0 18px 54px}
}
@media (max-width:420px){.qglance li{padding:12px;gap:10px}.qglance .ic{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.qlist details[open] .ans{animation:none}}

/* =================== home rooms rail: bigger cards, photo fills the card height, tap to preview =================== */
.track figure.img{margin:0}
.track .card .img{cursor:zoom-in}
@media (min-width:961px){
  .stay .bar{padding-top:92px;padding-bottom:16px}
  .stay .bar .h .c{font-size:clamp(28px,3.6vw,56px)}
  .track{align-items:stretch;padding-bottom:22px}
  .card,.card.photo{width:min(90vw,1560px);align-self:stretch}
  .card{grid-template-columns:minmax(0,1fr) clamp(300px,25vw,400px)}
  .card.photo{grid-template-columns:1fr}
  .card .img,.card.photo .img{aspect-ratio:auto;min-height:0;height:auto}
}

/* =================== gallery filters: counts, sticky bar, soft swap =================== */
.filters{position:sticky;top:12px;z-index:5;padding-top:10px;padding-bottom:10px;background:linear-gradient(var(--paper) 70%,rgba(250,250,248,0))}
.filters button{cursor:pointer;background:#fff}
.filters button .n{font-size:10px;letter-spacing:.06em;color:var(--ink-soft);opacity:.7;margin-left:2px}
.filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.filters button[aria-pressed="true"] .ic,.filters button[aria-pressed="true"] .n{color:#fff;opacity:1}
.mosaic{transition:opacity .22s}
.mosaic.swap{opacity:0}
@media (max-width:700px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-left:16px;padding-right:16px}.filters::-webkit-scrollbar{display:none}.filters button{flex:none}}
.filters{top:80px;transition:top .45s var(--ease)}
body:has(.nav.hidden) .filters{top:10px}

/* =================== location widget: real map, pick a start, the route draws itself =================== */
.lwid{padding:clamp(64px,10vh,120px) var(--gutter);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);grid-template-rows:auto 1fr;grid-template-areas:"head map" "pick map";gap:clamp(24px,4vh,40px) clamp(28px,4vw,72px)}
.lwid .lhead{grid-area:head;align-self:end}
.lwid .lpanel{grid-area:pick;display:flex;flex-direction:column;gap:22px;min-width:0}
.lwid .lmap{grid-area:map;position:relative;height:min(84vh,860px);min-height:480px;overflow:hidden;background:#f7f5f0;border:1px solid var(--rule)}
.lpick{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.lpick button{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:16px;padding:13px 14px;border-bottom:1px solid var(--rule);text-align:left;cursor:pointer;transition:background .3s}
.lpick .lbadge{width:46px;height:46px;display:grid;place-items:center;background:#fff;border:1px solid var(--rule);color:var(--green);transition:background .35s,color .35s,border-color .35s}
.lpick .lbadge .ic{width:22px;height:22px}
.lpick b{display:block;font-weight:400;font-size:clamp(15px,1.15vw,18px);line-height:1.25;color:var(--ink);transition:color .3s}
.lpick small{display:block;margin-top:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.lpick em{font-style:normal;font-size:clamp(16px,1.3vw,20px);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lpick button:hover b{color:var(--green)}
.lpick button[aria-selected="true"]{background:#fff}
.lpick button[aria-selected="true"] .lbadge{background:var(--green);border-color:var(--green);color:#fff}
.lpick button[aria-selected="true"] em{color:var(--green)}
.ltaxi{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.ltaxi .ic{flex:none;width:20px;height:20px;color:var(--green)}
.lact{display:flex;gap:12px;flex-wrap:wrap}
.laddr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.laddr .ic{flex:none;width:18px;height:18px;color:var(--green)}
.laddr .copybtn{margin-top:0}
.laddr .more{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.laddr .more::after{content:"";width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.laddr .more:hover::after{width:40px}
.lmap > svg{position:absolute;inset:0;width:100%;height:100%;display:block;--s:1}
.lmap .land,.lmap .isl{fill:#f7f5f0}
.lmap .sea,.lmap .lag{fill:#d9e6df}
.lmap .trunk,.lmap .mway,.lmap .rwy,.lmap .rt,.lmap .lr-case,.lmap .lr-act{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lmap .trunk{stroke:#dfd9cd;stroke-width:calc(var(--s) * 1.2px)}
.lmap .mway{stroke:#ccc4b4;stroke-width:calc(var(--s) * 2.6px)}
.lmap .rwy{stroke:#b4beb8;stroke-width:calc(var(--s) * 5px);stroke-linecap:butt}
.lmap .rt{stroke:var(--green);stroke-opacity:.3;stroke-width:calc(var(--s) * 1.6px);stroke-dasharray:calc(var(--s) * 3px) calc(var(--s) * 5px)}
.lmap .lr-case{stroke:#fff;stroke-width:calc(var(--s) * 8px);stroke-dasharray:1;stroke-dashoffset:0}
.lmap .lr-act{stroke:var(--green);stroke-width:calc(var(--s) * 3.4px);stroke-dasharray:1;stroke-dashoffset:0}
.lmap .mk text{font-family:var(--font);font-size:11px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-soft);paint-order:stroke;stroke:rgba(247,245,240,.92);stroke-width:4px;stroke-linejoin:round}
.lmap .mk .dot{fill:var(--ink);transition:fill .3s}
.lmap .mk .hit{fill:transparent}
.lmap .mk[data-r]{cursor:pointer}
.lmap .mk.on .dot{fill:var(--green)}
.lmap .mk.on text{fill:var(--ink)}
.lmap .me .core{fill:var(--green);stroke:#fff;stroke-width:3px}
.lmap .me .pulse{fill:var(--green);opacity:.25;transform-box:fill-box;transform-origin:center;animation:lpulse 2.6s ease-out infinite}
@keyframes lpulse{0%{transform:scale(.5);opacity:.45}100%{transform:scale(2.3);opacity:0}}
.lmap .me text.hi{font-size:15px;letter-spacing:.14em;fill:var(--green)}
.lmap .me text.sm{font-size:10px;letter-spacing:.22em}
.lmap .car{opacity:0;transition:opacity .35s}
.lmap .car circle{fill:#fff;stroke:var(--green);stroke-width:3px}
.lmap .lbl text{stroke:none;fill:#86a99a}
.lmap .lbl text.sea{font-size:12px;letter-spacing:.6em}
.lmap .lbl text.lagl{font-size:9px;letter-spacing:.32em}
.lnow{position:absolute;left:14px;top:14px;z-index:2;padding:14px 18px 15px;background:rgba(255,255,255,.95);box-shadow:0 18px 40px -24px rgba(8,20,16,.45);max-width:calc(100% - 80px)}
.lnow small{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.lnow b{display:block;margin-top:6px;font-weight:400;font-size:clamp(15px,1.2vw,18px);line-height:1.25;color:var(--ink)}
.lnow span{display:block;margin-top:4px;font-size:12px;letter-spacing:.05em;color:var(--ink-soft)}
.lnorth{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.92);font-size:10px;letter-spacing:.1em;color:var(--ink)}
.lnorth svg{width:14px;height:17px;fill:var(--green)}
.lscale{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(255,255,255,.85);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.lscale i{display:block;height:6px;width:60px;border:1.5px solid var(--ink-soft);border-top:0}
.lattr{position:absolute;right:0;bottom:0;z-index:2;padding:3px 8px;background:rgba(255,255,255,.8);font-size:10px;line-height:1.4;color:var(--ink-soft)}
.lattr a{color:inherit;text-decoration:underline}
@media (max-width:900px){
  .lwid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"head" "map" "pick"}
  .lwid .lmap{height:auto;min-height:0;aspect-ratio:4/5;max-height:74svh;width:100%}
  .lpick button{padding:12px 8px;gap:12px;grid-template-columns:40px minmax(0,1fr) auto}
  .lpick .lbadge{width:40px;height:40px}
  .lnow{padding:10px 12px}
  .laddr .more{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.lmap .me .pulse{animation:none}}
.lwid .h .c{font-size:clamp(28px,3.4vw,54px)}
.lmap .me.flip text{text-anchor:end;transform:translateX(-32px)}

/* =================== home: no header over the opening frame; the whole bar, logo included, arrives on first scroll =================== */
.nav{transition:transform .7s var(--ease),opacity .5s,background .5s,color .5s,padding .5s var(--ease)}
.nav.at-top{transform:translateY(-110%);opacity:0;pointer-events:none}
.nav.at-top .brand{opacity:0}

/* =================== room cards: photo-count badge =================== */
.track .card .img .pcount{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 12px 9px 10px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 10px 24px -14px rgba(8,20,16,.5);transition:background .35s,color .35s;pointer-events:none}
.track .card .img .pcount .ic{width:20px;height:20px;color:var(--green);transition:color .35s}
.track .card .img .pcount b{font-weight:400;font-size:13px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.track .card .img:hover .pcount,.track .card .img:focus-visible .pcount{background:var(--green);color:#fff}
.track .card .img:hover .pcount .ic,.track .card .img:focus-visible .pcount .ic{color:#fff}

/* =================== lightbox: counter, caption, thumbnail strip =================== */
.lb .lbbar{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));top:calc(22px + env(safe-area-inset-top,0px));right:120px;display:flex;align-items:baseline;gap:18px;color:#fff;pointer-events:none}
.lb .lbn{font-size:12px;letter-spacing:.2em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb .lbcap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb:not(.single) #lbImg{max-height:calc(100vh - 210px);max-height:calc(100svh - 210px);margin-top:-64px}
.lb .lbthumbs{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:8px;max-width:min(92vw,1100px);overflow-x:auto;scrollbar-width:none;padding:4px}
.lb .lbthumbs::-webkit-scrollbar{display:none}
.lb.single .lbthumbs{display:none}
.lb .lbthumbs button{position:static;flex:none;width:84px;height:58px;padding:0;opacity:.45;outline:1px solid transparent;outline-offset:2px;transition:opacity .3s,outline-color .3s;transform:none}
.lb .lbthumbs button:hover{opacity:.8}
.lb .lbthumbs button[aria-current="true"]{opacity:1;outline-color:#fff}
.lb .lbthumbs img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}
@media (max-width:700px){
  .lb .lbthumbs button{width:60px;height:44px}
  .lb:not(.single) #lbImg{max-height:calc(100svh - 190px);margin-top:-50px}
  .lb .lbbar{right:90px}
}

/* =================== plates strip: slightly bigger dishes =================== */
.plates figure{width:clamp(230px,26vw,380px)}
.plates .row{animation-duration:56s}

/* =================== room pages: "Included" card rides on the opening photo =================== */
.expand .xin{position:absolute;z-index:3;right:var(--gutter);top:clamp(96px,13vh,132px);width:min(500px,calc(100% - 2 * var(--gutter)));padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:14px;
  background:rgba(248,246,241,.95);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 34px 80px -36px rgba(8,20,16,.55);
  opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * -18px))}
.expand .xin::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--green)}
.expand .xin .eyebrow{color:var(--green)}
.expand .xin .h .c{font-size:clamp(24px,2.3vw,36px);color:var(--ink);letter-spacing:var(--track-caps)}
.expand .xin .igrid.xrows{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.expand .xin .igrid.xrows li{aspect-ratio:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px 14px;background:#fff;border-color:var(--rule);color:var(--ink);min-width:0}
.expand .xin .igrid.xrows .ic{flex:none;width:24px;height:24px}
.expand .xin .igrid.xrows span{font-size:10.5px;letter-spacing:.14em;line-height:1.3;min-width:0}
.expand .xin .igrid.xrows li:hover,.expand .xin .igrid.xrows li:hover .ic{color:#fff}
.no-js .expand .xin{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.expand .xin{opacity:1;transform:none}}
@media (max-width:700px){
  .expand .xin{top:88px;right:12px;width:calc(100% - 24px);padding:16px;gap:10px}
  .expand .xin .eyebrow{display:none}
  .expand .xin .h .c{font-size:20px}
  .expand .xin .igrid.xrows{gap:6px}
  .expand .xin .igrid.xrows li{padding:8px 10px;gap:8px}
  .expand .xin .igrid.xrows .ic{width:18px;height:18px}
  .expand .xin .igrid.xrows span{font-size:9px;letter-spacing:.1em}
  .expand.has-in .xcap .chips{display:none}
}
.track .card .img .pcount{left:auto;bottom:auto;right:14px;top:14px}

/* =================== origin timeline: one slim line, three milestones =================== */
.tl2{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);padding:clamp(36px,5vh,56px) var(--gutter) 0;--tlg:clamp(16px,2.4vw,40px)}
.tl-i{position:relative;padding-top:30px;display:flex;align-items:flex-start;gap:14px;min-width:0}
.tl-node{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--sand);border:2px solid var(--green);z-index:1;transition:background .5s .6s}
.tl-i::before{content:"";position:absolute;left:12px;top:5px;height:2px;width:calc(100% + var(--tlg) - 12px);background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.tl-i:last-child::before{background:linear-gradient(90deg,var(--green),rgba(44,104,84,0))}
.tl-i.in::before{transform:scaleX(1)}
.tl-i.in .tl-node{background:var(--green)}
.tl-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;background:#fff;border:1px solid var(--rule);color:var(--green)}
.tl-ic .ic{width:20px;height:20px}
.tl-i.now .tl-ic{background:var(--green);border-color:var(--green);color:#fff}
.tl-i b{display:block;font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.tl-i p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--ink-soft);max-width:32ch}
@media (max-width:900px){
  .tl2{grid-template-columns:1fr;gap:22px}
  .tl-i{padding-top:0;padding-left:28px}
  .tl-node{top:14px}
  .tl-i::before{left:5px;top:26px;width:2px;height:calc(100% + 22px - 12px);transform:scaleY(0);transform-origin:top}
  .tl-i:last-child::before{display:none}
  .tl-i.in::before{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){.tl-i::before{transition:none}}

/* =================== phone menu: light ground, photo tiles that ripple in =================== */
.menu{display:flex;flex-direction:column;gap:14px;place-content:normal;text-align:left;background:var(--sand);color:var(--ink);
  padding:calc(80px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
  overflow-y:auto;overscroll-behavior:contain;transform:translateY(-12px);transition:opacity .45s,transform .6s var(--ease),visibility 0s .6s}
.menu.open{transform:none;transition:opacity .45s,transform .6s var(--ease)}
.menu::before,.menu::after{display:none}
.menu a{font-size:inherit;letter-spacing:normal;text-transform:none;line-height:1.2}
.menu a:hover{color:inherit}
.menu .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.menu .mt{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:#e3dfd6;
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.menu.open .mt{opacity:1;transform:none;transition-delay:calc(.05s * var(--i) + .12s)}
.menu .mt picture,.menu .mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.menu .mt img{transform:scale(1.14);transition:transform 1.4s var(--ease)}
.menu.open .mt img{transform:scale(1);transition-delay:calc(.05s * var(--i) + .12s)}
.menu .mt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,24,19,0) 30%,rgba(10,24,19,.74))}
.menu .mt .mi{position:absolute;left:9px;top:9px;width:30px;height:30px;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green);transition:background .3s,color .3s}
.menu .mt .mi .ic{width:17px;height:17px}
.menu .mt b{position:absolute;left:11px;right:8px;bottom:10px;font-weight:400;font-size:13px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.menu .mt:active{transform:scale(.97)}
.menu .mt[aria-current]{box-shadow:inset 0 0 0 2px var(--green-mist)}
.menu .mt[aria-current] .mi{background:var(--green);color:#fff}
.menu .mfoot{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.menu .mfoot .btn{justify-content:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:16px 14px 15px}
.menu .mfoot .btn:not(.solid){color:var(--ink);border-color:var(--ink)}
.menu .mcontact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;padding-top:4px;font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.menu .mcontact a{display:inline-flex;align-items:center;gap:8px}
.menu .mcontact .ic{width:16px;height:16px;color:var(--green)}
.menu .mfoot,.menu .mcontact{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu.open .mfoot,.menu.open .mcontact{opacity:1;transform:none;transition-delay:.55s}
.menu.open ~ .nav,.nav.menu-open{color:var(--ink);--lk-ink:var(--ink);--lk-green:var(--green);background:var(--sand);box-shadow:0 1px 0 var(--rule);backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
.menu.open ~ .nav .brand,.nav.menu-open .brand{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.menu,.menu .mt,.menu .mt img,.menu .mfoot,.menu .mcontact{transition:opacity .2s!important;transform:none!important}}

/* =================== gallery filters: one centred floating bar =================== */
.filters{width:fit-content;max-width:calc(100% - 2 * var(--gutter));margin:0 auto 34px;padding:6px;gap:4px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
  background:rgba(250,250,248,.88);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--rule);box-shadow:0 18px 40px -28px rgba(8,20,16,.45)}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border-color:transparent;background:transparent}
.filters button:hover{border-color:transparent;background:#fff;color:var(--green)}
.filters button[aria-pressed="true"],.filters button[aria-pressed="true"]:hover{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:700px){.filters{max-width:calc(100% - 24px);padding:5px}}

/* =================== opening-frame photo → next photo section slides up over it =================== */
.expand.lap{height:300svh}
.expand.lap + .over{position:relative;z-index:2;margin-top:-100svh}
.expand.lap + .feature.over{min-height:100svh;box-shadow:0 -40px 90px -30px rgba(0,0,0,.55)}
.expand.lap + .stack.over > :first-child{box-shadow:0 -40px 90px -30px rgba(0,0,0,.55)}
@media (max-width:900px){
  .expand.lap + .feature.over{display:flex;align-items:flex-start;height:100svh;padding:92px 12px 12px}
  .expand.lap + .feature.over .img{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
  .expand.lap + .feature.over .txt{margin:0;width:100%;padding:20px 18px 18px;gap:12px}
}
@media (max-width:700px){.expand.lap{height:260svh}}
.no-js .expand.lap + .over{margin-top:0}
@media (prefers-reduced-motion:reduce){.expand.lap{height:auto}.expand.lap + .over{margin-top:0}}

/* =================== photo cards: the reveal curtain owns ::after; caption shading moves onto the picture =================== */
.xcard.rv-img::after,.stile.rv-img::after{background:var(--curtain);z-index:3}
.xcard picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,39,31,0) 40%,rgba(16,39,31,.85))}
.stile picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,39,31,.25),rgba(16,39,31,0) 35%,rgba(16,39,31,0) 55%,rgba(16,39,31,.55))}

/* =================== conversion: WhatsApp buttons =================== */
.btn.wa .ic{width:18px;height:18px;flex:none}
.on-dark .btn.wa,.cta-band .btn.wa{color:#fff}
.fwa{display:inline-block;margin-top:6px;color:var(--green-mist);border-bottom:1px solid currentColor;padding:6px 0}
.menu .mcontact a{min-height:40px}

/* =================== conversion: check-dates sheet =================== */
.bk{position:fixed;inset:0;z-index:360;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.bk.open{opacity:1;visibility:visible;transition:opacity .35s}
.bk-scrim{position:absolute;inset:0;background:rgba(10,20,16,.5)}
.bk-p{position:relative;width:min(480px,100%);max-height:94svh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);
  padding:28px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:14px;transform:translateY(28px);transition:transform .5s var(--ease);box-shadow:0 -20px 60px -30px rgba(0,0,0,.5)}
.bk.open .bk-p{transform:none}
.bk-p::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--green)}
.bk-p:focus{outline:none}
.bk-x{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink);font-size:26px;line-height:1}
.bk-x .ic{width:22px;height:22px}
.bk .eyebrow .ic{width:18px;height:18px}
.bk-h{font-weight:400;font-size:clamp(22px,5.4vw,28px);letter-spacing:var(--track-caps);text-transform:uppercase;line-height:1.1}
.bk-room{margin-top:-6px;font-size:15px;color:var(--green)}
.bk-n{font-size:13px;color:var(--ink-soft);margin-top:-4px}
.bk-g{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.bk-g b{display:block;font-weight:400;font-size:16px}
.bk-g small{display:block;margin-top:2px;font-size:12px;color:var(--ink-soft)}
.bk-g .st{display:flex;align-items:center;gap:12px}
.bk-g button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);background:#fff;color:var(--green);font-size:20px;line-height:1}
.bk-g button:hover{border-color:var(--green)}
.bk-g output{min-width:22px;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}
.bk-go{justify-content:center;min-height:52px;margin-top:6px}
.bk-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:1px solid var(--rule);background:#fff;color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:border-color .3s}
.bk-wa:hover{border-color:var(--green)}
.bk-wa .ic{width:20px;height:20px;color:var(--green)}
.bk-note{font-size:12px;line-height:1.4;color:var(--ink-soft);text-align:center}
@media (min-width:700px){.bk{align-items:center}.bk-p{padding:34px 34px 28px;transform:translateY(18px) scale(.98)}}

/* =================== conversion: phone booking bar =================== */
.mbar{display:none}
@media (max-width:960px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:98;display:flex;gap:8px;
    padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:rgba(250,250,248,.95);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid var(--rule);
    transform:translateY(110%);transition:transform .45s var(--ease)}
  .mbar.show{transform:none}
  .menu.open ~ .mbar,.lb.open ~ .mbar,.bk.open ~ .mbar{transform:translateY(110%)}
  .mbar .mb-book{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:var(--green);color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
  .mbar .mb-book .ic{width:18px;height:18px}
  .mbar .mb-ic{flex:none;width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid var(--rule);color:var(--green)}
  .mbar .mb-ic .ic{width:22px;height:22px}
  .site-foot{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.bk,.bk-p,.mbar{transition:none}}
.contact-grid:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.contact-grid:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.contact-grid:has(> :nth-child(4)){grid-template-columns:1fr}}


/* =================== phones: no text under 12px (generated from every sub-12px rule above) =================== */
@media (max-width:900px){
  .nav ul,
  .btn,
  .eyebrow,
  .hero .corner,
  .hero .cue,
  .stat span,
  .stay .count,
  .card dt,
  .card .more,
  .venue .meta,
  .farm figcaption,
  .collage figcaption,
  .list .tag,
  .lb button,
  .route .note,
  .contact b,
  .reserve footer .legal,
  .crumbs ol,
  .glance dt,
  .lcard .more,
  .copybtn,
  .filters button,
  .mosaic figcaption,
  .dist span,
  .site-foot h2,
  .site-foot .legal,
  .facts span,
  .chips li,
  .igrid span,
  .ctile b,
  .acc-v,
  .acc-c .t,
  .stile .l,
  .stile .band .l,
  .feature .txt .igrid span,
  .stack .txt .chips li,
  .feature .txt .chips li,
  .venue .txt .chips li,
  .feature .txt .more,
  .venue .txt .more,
  .qglance span,
  .qlist small,
  .filters button .n,
  .lpick small,
  .laddr .more,
  .lmap .mk text,
  .lmap .me text.sm,
  .lmap .lbl text.lagl,
  .lnow small,
  .lnorth,
  .lscale,
  .lattr,
  .expand .xin .igrid.xrows span,
  .menu .mfoot .btn,
  .bk-dates label,
  .bk-wa{font-size:12px}
  .nav ul,
  .btn,
  .eyebrow,
  .hero .corner,
  .hero .cue,
  .stat span,
  .stay .count,
  .card dt,
  .card .more,
  .venue .meta,
  .farm figcaption,
  .collage figcaption,
  .list .tag,
  .lb button,
  .route .note,
  .contact b,
  .reserve footer .legal,
  .crumbs ol,
  .glance dt,
  .lcard .more,
  .copybtn,
  .filters button,
  .mosaic figcaption,
  .dist span,
  .site-foot h2,
  .site-foot .legal,
  .facts span,
  .chips li,
  .igrid span,
  .ctile b,
  .acc-v,
  .acc-c .t,
  .stile .l,
  .feature .txt .more,
  .venue .txt .more,
  .qglance span,
  .qlist small,
  .lpick small,
  .laddr .more,
  .lmap .me text.sm,
  .lmap .lbl text.lagl,
  .lnow small,
  .lscale,
  .menu .mfoot .btn,
  .bk-dates label,
  .bk-wa{letter-spacing:.14em}
}

/* =================== contact cards: the whole card is the main action =================== */
.ctile{position:relative}
.ctile .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.ctile button.copybtn{position:relative;z-index:2}
.ctile:has(.stretch){cursor:pointer}

/* =================== home hero: promise + booking button =================== */
.hero .hgo{position:absolute;left:50%;bottom:118px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);text-align:center;color:#fff}
.hero .hgo p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero .hgo .btn{min-height:48px;padding:15px 30px 14px;box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
@media (max-width:700px){.hero .hgo{bottom:112px}.hero .hgo p{font-size:12px;letter-spacing:.14em}}

/* =================== phones: every link and button at least 44px tall =================== */
@media (max-width:900px){
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .site-foot ul{gap:0}
  .site-foot ul a,.fwa{display:flex;align-items:center;min-height:44px;padding:0;margin:0}
  .more,.card .more,.lcard .more,.laddr .more,.feature .txt .more,.venue .txt .more,.qtop .btn,.copybtn{min-height:44px;display:inline-flex;align-items:center}
  .burger{width:44px;height:44px}
  .burger i{left:10px;right:10px;top:18px}.burger i+i{top:26px}
  .burger[aria-expanded="true"] i{top:22px}
  .lattr{padding:0 8px}.lattr a{display:inline-block;padding:14px 2px;margin:-12px 0}
  .laddr{gap:4px 14px}
  .origin .note a,.copy a{display:inline-block;padding:10px 0;margin:-10px 0}
}

/* =================== shorter phone home: rooms swipe, tighter village grid, compact FAQ photo =================== */
@media (max-width:960px){
  .stay .count{display:block}
  .track{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 var(--gutter) 30px;scrollbar-width:none;overscroll-behavior-x:contain}
  .track::-webkit-scrollbar{display:none}
  .track > .card,.track > .card.photo{flex:0 0 86%;width:86%;scroll-snap-align:center}
  .track > .card.photo .img{min-height:0;height:100%}
  .track > .card.photo{min-height:100%}
}
@media (max-width:900px){
  .vbento{grid-template-rows:56vw 40vw 40vw 48vw;grid-template-areas:"meal meal" "grind smile" "pot weave" "cart loom"}
  .qphoto{aspect-ratio:5/4}
}
@media (max-width:900px){
  .crumbs a,.copybtn{min-width:44px;justify-content:center}
  .qlist .ans a,.lead a,.origin p a,.idea p a{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (max-width:900px){
  .nav .brand{display:inline-flex;align-items:center;min-height:44px}
  .filters button{min-height:44px}
  .faq .side nav a{display:flex;align-items:center;min-height:44px}
}
@media (max-width:900px){.faq .ans a{display:inline-block;padding:14px 0;margin:-14px 0}}
.hero .hgo .hs{display:none}
@media (max-width:700px){.hero .hgo{bottom:132px}.hero .hgo .hl{display:none}.hero .hgo .hs{display:inline}}
@media (max-width:960px){.track > .card,.track > .card.photo{flex-basis:calc(100% - 28px);width:calc(100% - 28px)}}
/* phones: the photo-only room card must take the row height (its contents are all overlays) */
@media (max-width:960px){
  .track{align-items:stretch}
  .track > .card.photo{align-self:stretch;display:grid;grid-template-rows:1fr;min-height:0}
  .track > .card.photo .img{height:auto;min-height:0;align-self:stretch;aspect-ratio:auto}
  .track > .card.photo .over{padding:20px 18px;flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:960px){.track > .card{align-self:stretch}}

/* phones in portrait: the portrait cut has its own subject position */
@media (max-width:900px) and (orientation:portrait){img[style*="--pop"]{object-position:var(--pop)!important}}

/* =================== entrance gate: ripples on the lake, sound or quiet, the frame parts =================== */
.loader{background:transparent;isolation:isolate;overflow:hidden}
.loader::before,.loader::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--paper);z-index:-1;transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.loader::before{top:0}.loader::after{bottom:0}
.loader.opening::before{transform:translateY(-101%)}
.loader.opening::after{transform:translateY(101%)}
.loader .ripples{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.loader .ripples i{position:absolute;left:-32vmin;top:-32vmin;width:64vmin;height:64vmin;border-radius:50%;border:1px solid rgba(44,104,84,.32);opacity:0;animation:ripple 6.4s cubic-bezier(.2,.6,.3,1) infinite}
.loader .ripples i:nth-child(2){animation-delay:1.6s}.loader .ripples i:nth-child(3){animation-delay:3.2s}.loader .ripples i:nth-child(4){animation-delay:4.8s}
@keyframes ripple{0%{transform:scale(.22);opacity:0}14%{opacity:.9}100%{transform:scale(2.3);opacity:0}}
.loader .gate-acts{position:absolute;left:50%;bottom:clamp(48px,10vh,104px);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.loader.ready .gate-acts{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.loader.ready .bar{opacity:0;transition:opacity .4s}
.loader .g-on{min-height:52px;padding:16px 30px 15px;gap:14px;box-shadow:0 18px 40px -22px rgba(16,39,31,.6)}
.loader .g-off{min-height:44px;padding:12px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.loader .g-off:hover{color:var(--green)}
.loader.opening .bl,.loader.opening .gate-acts,.loader.opening .ripples{opacity:0;transition:opacity .45s var(--ease)}
.loader.opening .bl{transform:scale(1.04);transition:opacity .45s var(--ease),transform .8s var(--ease)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:2px;height:30%;background:currentColor;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}.eq i:nth-child(4){animation-delay:.12s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

/* header toggle: flat line when quiet, moving bars when playing */
.nav-r{display:flex;align-items:center;gap:12px}
.snd{width:44px;height:44px;display:grid;place-items:center;color:inherit;border-radius:50%;transition:background .3s}
.snd:hover{background:rgba(127,127,127,.12)}
.snd .eq i{height:2px;animation:none;transition:height .4s var(--ease)}
.snd.on .eq i{animation:eq 1.1s ease-in-out infinite}
.snd.on .eq i:nth-child(2){animation-delay:.25s}.snd.on .eq i:nth-child(3){animation-delay:.5s}.snd.on .eq i:nth-child(4){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.loader .ripples{display:none}.eq i,.snd.on .eq i{animation:none;height:70%}.loader::before,.loader::after{transition:none}}

/* =================== brand calendar (replaces the browser's date picker) =================== */
.bk-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-f{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:58px;padding:10px 14px;background:#fff;border:1px solid var(--rule);text-align:left;transition:border-color .3s,box-shadow .3s}
.bk-f small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.bk-f b{font-weight:400;font-size:16px;color:var(--ink)}
.bk-f.on{border-color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.bk-f.on small{color:var(--green)}
.cal{border:1px solid var(--rule);background:#fff;padding:8px 10px 10px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-h b{font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cal-p,.cal-n{width:44px;height:44px;display:grid;place-items:center;color:var(--green);transition:background .3s,opacity .3s}
.cal-p:hover,.cal-n:hover{background:var(--sand)}
.cal-p:disabled,.cal-n:disabled{opacity:.25;cursor:default;background:none}
.cal-p .ic,.cal-n .ic{width:20px;height:20px}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-w span{padding:6px 0;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.cal-g{row-gap:2px}
.cal-d,.cal-x{height:44px;display:grid;place-items:center;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);position:relative;isolation:isolate}
.cal-d::before{content:"";position:absolute;inset:3px;z-index:-1;border:1px solid transparent;transition:background .2s,border-color .2s}
.cal-d:hover:not(:disabled)::before{border-color:var(--green)}
.cal-d.today::after{content:"";position:absolute;bottom:7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--green)}
.cal-d.past{color:var(--ink-soft);opacity:.35;cursor:default}
.cal-d.mid{background:#e2ede8}
.cal-d.has-range.s-in{background:linear-gradient(90deg,transparent 50%,#e2ede8 50%)}
.cal-d.has-range.s-out{background:linear-gradient(90deg,#e2ede8 50%,transparent 50%)}
.cal-d.sel{color:#fff}
.cal-d.sel::before{background:var(--green);border-color:var(--green);inset:2px}
.cal-d.sel.today::after{background:#fff}
.cal-d:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.bk-p{gap:12px}

/* =================== brand-native: no browser default colours anywhere =================== */
:root{accent-color:var(--green);caret-color:var(--green)}
html{-webkit-tap-highlight-color:transparent;scrollbar-color:#9db7ab var(--paper)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#9db7ab;border:3px solid var(--paper);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}
.bk-p,.menu{scrollbar-width:thin;scrollbar-color:#9db7ab transparent}
.bk-p::-webkit-scrollbar,.menu::-webkit-scrollbar{width:6px}
.bk-p::-webkit-scrollbar-track,.menu::-webkit-scrollbar-track{background:transparent}
.bk-p::-webkit-scrollbar-thumb,.menu::-webkit-scrollbar-thumb{border:0;background:#9db7ab}
::-moz-selection{background:var(--green);color:#fff}
.dark ::selection,.on-dark ::selection,.site-foot ::selection{background:var(--green-mist);color:var(--green-deep)}
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent}
button:active:not(:disabled),a.btn:active,.mt:active,.ctile:active{transform:translateY(1px)}
summary{list-style:none}
summary::-webkit-details-marker,summary::marker{display:none;content:""}
input,select,textarea{font:inherit;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:-1px}
img::selection,svg::selection{background:transparent}
/* check-dates sheet: guests side by side, actions pinned to the bottom */
.bk-gs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-gs .bk-g{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;border:1px solid var(--rule);background:#fff}
.bk-gs .bk-g .st{justify-content:space-between}
.bk-acts{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));z-index:2;display:flex;flex-direction:column;gap:10px;
  margin:4px calc(-1 * max(20px,env(safe-area-inset-right,0px))) calc(-20px - env(safe-area-inset-bottom,0px));
  padding:12px max(20px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px));background:var(--paper);box-shadow:0 -14px 24px -18px rgba(16,39,31,.35)}
.bk-acts .bk-go{margin-top:0}
@media (min-width:700px){.bk-acts{bottom:-28px;margin:4px -34px -28px;padding:14px 34px 24px}}

/* =================== smoothness pass: delicate motion, glide, page frames, lighter phones =================== */
html.glide{scroll-behavior:auto}

/* delicate reveals: shorter travel, longer and softer settle */
.rv{transform:translate3d(0,18px,0);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.rv.in{transform:none}
.words .wd i{transition:transform 1.2s var(--ease)}
.rv-img::after{transition:transform 1.7s cubic-bezier(.76,0,.24,1)}
.rv-img img{transition:scale 2.3s var(--ease)}
.xgrid > .rv-img:nth-child(2)::after,.vbento > .rv-img:nth-child(2)::after,.mosaic > .rv-img:nth-child(2)::after{transition-delay:.08s}
.xgrid > .rv-img:nth-child(3)::after,.vbento > .rv-img:nth-child(3)::after,.mosaic > .rv-img:nth-child(3)::after{transition-delay:.16s}
.xgrid > .rv-img:nth-child(4)::after,.vbento > .rv-img:nth-child(4)::after,.mosaic > .rv-img:nth-child(4)::after{transition-delay:.24s}
.vbento > .rv-img:nth-child(5)::after,.mosaic > .rv-img:nth-child(5)::after{transition-delay:.12s}
.vbento > .rv-img:nth-child(6)::after,.mosaic > .rv-img:nth-child(6)::after{transition-delay:.2s}
.vbento > .rv-img:nth-child(7)::after{transition-delay:.28s}

/* photographs fade in on arrival rather than popping */
picture{transition:opacity .9s var(--ease)}
.js picture:has(> img[loading="lazy"]:not(.ld)){opacity:0}

/* rooms rail progress line moves on the compositor */
.progress i{width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}

/* stacked cards dim with an overlay (cheap) instead of a brightness filter (repaints every frame) */
.stack > .feature::after,.stack > .venue::after{content:"";display:block;position:absolute;inset:0;z-index:6;background:#0a1813;opacity:var(--dim,0);pointer-events:none}
.stack > .feature,.stack > .venue{will-change:transform}

/* pinned frames hold a touch less, so they never feel stuck */
.expand{height:220svh}
.expand.lap{height:280svh}
@media (max-width:700px){.expand{height:190svh}.expand.lap{height:250svh}}

/* page transition: two sand panels close with the brand frame, then part on the next page */
.pt{position:fixed;inset:0;z-index:500;pointer-events:none;visibility:hidden}
.pt::before,.pt::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--paper);transition:transform .56s cubic-bezier(.7,0,.2,1)}
.pt::before{top:0;transform:translateY(-101%)}
.pt::after{bottom:0;transform:translateY(101%)}
.pt .pt-f{position:absolute;left:50%;top:50%;z-index:1;width:92px;height:86px;margin:-43px 0 0 -46px;opacity:0;transform:scale(.86);transition:opacity .3s var(--ease),transform .56s var(--ease)}
.pt .pt-f::before,.pt .pt-f::after{content:"";position:absolute;left:0;right:0;height:24px;border:2px solid var(--green)}
.pt .pt-f::before{top:0;border-bottom:0}
.pt .pt-f::after{bottom:0;border-top:0}
html.pt-out .pt,html.pt-in .pt{visibility:visible;pointer-events:auto}
html.pt-out .pt::before,html.pt-out .pt::after,html.pt-in .pt::before,html.pt-in .pt::after{transform:none}
html.pt-out .pt .pt-f,html.pt-in .pt .pt-f{opacity:1;transform:none;transition-delay:.18s}
html.pt-in.pt-open .pt::before{transform:translateY(-101%);transition-duration:.8s}
html.pt-in.pt-open .pt::after{transform:translateY(101%);transition-duration:.8s}
html.pt-in.pt-open .pt .pt-f{opacity:0;transform:scale(1.18);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* phones: frosted glass inside scrolling content is costly; solid tints instead (fixed bars keep theirs) */
@media (hover:none){
  main *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .page-hero .chips li,.on-photo .chips li,.hero .chips li,.card.photo .chips li,.expand .xcap .chips li,.cta-band .chips li{background:rgba(16,39,31,.55)!important}
  .feature .txt,.venue .txt,.expand .xin{background:rgba(248,246,241,.97)}
}

/* =================== home stats: one tidy strip instead of four photo squares =================== */
.qstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 clamp(12px,1.6vw,28px) clamp(48px,7vh,80px);background:#fff;border:1px solid var(--rule)}
.qs{display:flex;align-items:center;gap:16px;min-width:0;padding:20px clamp(16px,1.8vw,26px);transition:background .4s var(--ease)}
.qs + .qs{border-left:1px solid var(--rule)}
.qs:hover{background:var(--sand)}
.qs-i{flex:none;width:46px;height:46px;display:grid;place-items:center;background:var(--sand);color:var(--green);transition:background .4s var(--ease),color .4s var(--ease)}
.qs:hover .qs-i{background:var(--green);color:#fff}
.qs-i .ic{width:24px;height:24px}
.qs-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.qs b{font-weight:400;font-size:clamp(28px,2.5vw,38px);line-height:1;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.qs b small{margin-left:.35em;font-size:.36em;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.qs-t > span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .qstats{grid-template-columns:1fr 1fr}
  .qs:nth-child(3){border-left:0}
  .qs:nth-child(n+3){border-top:1px solid var(--rule)}
  .qs{gap:12px;padding:16px 14px}
  .qs-i{width:40px;height:40px}
  .qs b{font-size:28px}
  .qs-t > span{font-size:12px;letter-spacing:.1em}
}
@media (max-width:360px){.qs-i{display:none}}
/* the stats strip sits on a solid ground so the pinned hero never shows through the gap below it */
.idea{background:var(--paper)}
@media (max-width:900px){.qs-t > span{white-space:normal;line-height:1.3;overflow:visible;text-overflow:clip}}
.qstats{margin-bottom:0}
.idea{padding-bottom:clamp(48px,7vh,80px)}

/* =================== phones: the rooms rail is pinned too; scrolling down carries the rooms across =================== */
@media (max-width:960px){
  .stay .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}
  .stay .bar{padding:76px var(--gutter) 14px}
  .stay .bar .h .c{font-size:clamp(26px,8vw,34px)}
  .track{flex:1;min-height:0;flex-direction:row;align-items:stretch;gap:12px;overflow:visible;scroll-snap-type:none;padding:0 var(--gutter) 12px;will-change:transform}
  .track > .card,.track > .card.photo{flex:0 0 calc(100% - 28px);width:calc(100% - 28px);height:100%;min-height:0}
  .track > .card{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .track > .card .img{aspect-ratio:auto;min-height:0;height:auto}
  .track > .card .body{padding:14px 16px 10px;gap:10px}
  .track > .card .h{gap:4px}
  .track > .card .h .c{font-size:20px}
  .track > .card .h .s{font-size:14px}
  .track > .card .facts{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .track > .card .facts li{padding:10px 6px 9px;gap:6px}
  .track > .card .facts .ic{width:20px;height:20px}
  .track > .card .facts b{font-size:13px;letter-spacing:.02em}
  .track > .card .facts span{display:none}
  .track > .card .more{min-height:40px}
  .stay .progress{display:block;margin:0 var(--gutter) 12px}
}
/* reduced motion: no pinning anywhere; the rooms simply swipe sideways */
@media (prefers-reduced-motion:reduce){
  .stay .pin{position:static;height:auto}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}
  .track > .card{scroll-snap-align:center}
}
/* phones: leave room for the fixed booking bar under the pinned rail */
@media (max-width:960px){.stay .pin{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}.stay .progress{margin-bottom:10px}}
@media (max-width:960px) and (prefers-reduced-motion:reduce){.stay .pin{padding-bottom:0}}

/* =================== phones: rooms rail, one room per screen, the photo first, motion on the compositor =================== */
@media (max-width:960px){
  .track{gap:0;padding:0 0 12px;order:2}
  .track > .card,.track > .card.photo{flex:0 0 100%;width:100%;border-left:0;border-right:0;border-radius:0}
  /* heading on one line with the counter; the progress hairline sits under it */
  .stay .bar{padding:82px var(--gutter) 12px;align-items:baseline;gap:12px}   /* clears the 70px site header when it slides back in */
  .stay .bar .eyebrow{display:none}
  .stay .bar .h{margin-top:0!important}
  .stay .bar .h .c{font-size:clamp(20px,6.4vw,26px);white-space:nowrap}
  .stay .progress{order:1;margin:0 var(--gutter) 12px}
  /* the photo takes whatever height is left (never taller than 4:5); the details stay compact underneath */
  .track > .card{display:flex;flex-direction:column;justify-content:center}
  .track > .card .img{flex:1 1 auto;min-height:0}
  .track > .card:not(.photo) .img{max-height:125vw}
  /* on unusually tall screens the photo and details sit centred on the sand rather than inside a white slab */
  .track > .card:not(.photo){background:transparent}
  .track > .card:not(.photo) .body{background:#fff}
  .track > .card .img img[style*="--cpop"]{object-position:var(--cpop)!important}
  /* every card's details are the same height, so the photos line up as they slide: name on its own line, view link beside the subtitle */
  .track > .card .body{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c c" "s more" "facts facts";align-items:center;gap:4px 14px;padding:14px var(--gutter) 12px}
  .track > .card .body > .h{display:contents}
  .track > .card .body > .h .c{grid-area:c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .track > .card .body > .h .s{grid-area:s}
  .track > .card .body > .facts{grid-area:facts;margin-top:8px}
  .track > .card .body > .more{grid-area:more}
}
/* the pinned run: a fixed stretch of scroll per room, in svh so the toolbar showing or hiding never jolts it */
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  .stay{height:calc((var(--rooms,4) - 1) * 75svh + 115svh)}
}
/* where scroll-driven animations exist, the rail moves on the compositor in lockstep with the finger */
@supports (animation-timeline:view()){
  @media (max-width:960px) and (prefers-reduced-motion:no-preference){
    .stay{view-timeline:--rooms-run block}
    .track:has(> :nth-child(4):last-child){animation:rail-4 linear both;animation-timeline:--rooms-run;animation-range:contain 0% contain 100%}
    .stay .progress i{animation:rail-prog linear both;animation-timeline:--rooms-run;animation-range:contain 0% contain 100%}
  }
}
/* four rooms: each rests whole for 30% of its stretch, then the next eases in (site.js runs the same curve as a fallback) */
@keyframes rail-4{
  0%,5%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  28.333%,38.333%{transform:translate3d(-100%,0,0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  61.667%,71.667%{transform:translate3d(-200%,0,0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  95%,100%{transform:translate3d(-300%,0,0)}
}
@keyframes rail-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* short phones (toolbar showing on a small screen): the facts drop their icons so the photo keeps its height */
@media (max-width:960px) and (max-height:620px){
  .track > .card .facts .ic{display:none}
  .track > .card .facts li{padding:8px 6px}
  .stay .bar{padding-top:78px}
}