/* ============================================================
   NIMZ County — Sri Vasavi Projects
   Builder-site layout: full-bleed hero, stats band, centred
   section headings, generous white space.

   >>> PHOTO SLOTS <<<
   Every photo here is a BACKGROUND layered over a copper gradient.
   Drop the file in /img/ and it appears; leave it out and the
   gradient shows — never a broken image box.
       img/hero.jpg      main banner, left of the hero
       img/story.jpg     the venture section
       img/villa-1..8.jpg  the villa carousel, in order
   >>> PHONE NUMBER <<<
   Search PHONE_PLACEHOLDER — four places, put your real number in
   each (the tel: links and the one visible number).
   ============================================================ */

@font-face{font-family:"Playfair Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:111%;ascent-override:95%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial"),local("Roboto");size-adjust:100%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

:root{
  --brand:#BC764E;
  --bg:#FFFFFF; --alt:#FAF7F3; --fg:#1C1613; --muted:#6E6258;
  --accent:#9C5A32; --accent-soft:rgba(156,90,50,.08); --line:rgba(28,22,19,.12);
  --film:#171210; --film-fg:#F5F1EB; --film-muted:rgba(245,241,235,.74); --gold:#D4A077;
  --bad:#A8392B;
  --f-display:"Playfair Display","Playfair Fallback",Georgia,serif;
  --f-body:"Inter","Inter Fallback","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(18px,5vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
  --img-hero:url('../img/hero.jpg');
  --img-story:url('../img/story.jpg');
  --fallback:linear-gradient(145deg,#2A1F18 0%,#1B1512 55%,#120E0C 100%);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D0A09; --alt:#15110E; --fg:#EDE6DE; --muted:#A79B90;
  --accent:#D9926A; --accent-soft:rgba(217,146,106,.12); --line:rgba(237,230,222,.14);
  color-scheme:dark }}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16.5px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.018em}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{padding-inline:var(--gutter);max-width:1280px;margin-inline:auto}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.rule{display:block;width:52px;height:1px;background:var(--accent);margin:4px auto 0}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:80;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 6px 6px;font-size:13px;font-weight:600;text-decoration:none}
.skip:focus{top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:2px;background:var(--accent);color:#fff;padding:15px 30px;font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn:disabled{opacity:.6;cursor:default}
.btn svg{width:15px;height:15px;flex:none}

/* ---------- header: dark top bar + sticky section nav ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:75;background:transparent;color:#fff;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.topbar.solid{background:var(--film);color:var(--film-fg);box-shadow:0 1px 0 rgba(188,118,78,.3)}
/* on phones the hero photo is a banner, so the bar is solid from the start */
@media (max-width:980px){.topbar{background:var(--film);color:var(--film-fg)}.topbar .burger{background:transparent;border-color:rgba(245,241,235,.28)}}
.topbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:76px;padding-block:8px}
.brand{display:block;line-height:0;justify-self:center}
.brand img{height:50px;width:auto}
@media (max-width:620px){.brand img{height:40px}.topbar-in{min-height:64px}}
.burger{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:10px;background:rgba(14,10,8,.34);border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;padding:10px 16px;font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:border-color .25s,background .25s}
.topbar.solid .burger{background:transparent;border-color:rgba(245,241,235,.28)}
.burger:hover{border-color:var(--gold);background:rgba(188,118,78,.14)}
.burger i{display:grid;gap:3.5px;width:16px}
.burger i::before,.burger i::after,.burger i span{content:"";display:block;height:1.5px;background:currentColor;border-radius:2px}
.burger .lbl{display:inline}
@media (max-width:520px){.burger .lbl{display:none}.burger{padding:10px 12px}}
.topbar-cta{grid-column:3;justify-self:end;display:flex;gap:10px;align-items:center}
.topbar .btn{padding:12px 22px;font-size:10.5px;border-radius:999px;background:transparent;border-color:rgba(28,22,19,.28);color:var(--fg)}
.topbar .btn:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
.topbar.solid .btn{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.topbar.solid .btn:hover{background:#fff;color:var(--fg);border-color:#fff}
@media (max-width:980px){.topbar-cta{display:none}}

/* sticky section nav, sits under the top bar once the hero scrolls away */
.subnav{position:sticky;top:76px;z-index:65;background:var(--alt);border-bottom:1px solid var(--line)}
@media (max-width:620px){.subnav{top:64px}}
.subnav-in{display:flex;gap:clamp(16px,2.4vw,36px);align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;padding:19px 0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .25s}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.subnav a:hover{color:var(--fg)}
.subnav a.on{color:var(--accent)}
.subnav a.on::after{transform:scaleX(1)}

/* slide-out menu */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.drawer[data-open="1"]{visibility:visible;pointer-events:auto}
.drawer-veil{position:absolute;inset:0;background:rgba(10,7,6,.62);opacity:0;transition:opacity .35s var(--ease)}
.drawer[data-open="1"] .drawer-veil{opacity:1}
.drawer-panel{position:absolute;inset:0 auto 0 0;width:min(380px,86vw);background:var(--film);color:var(--film-fg);padding:28px var(--gutter);display:grid;align-content:start;gap:8px;transform:translateX(-100%);transition:transform .4s var(--ease);overflow-y:auto}
.drawer[data-open="1"] .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.drawer-top img{height:44px;width:auto}
.x{background:transparent;border:0;color:var(--film-fg);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.drawer-panel a.dlink{font-family:var(--f-display);font-size:25px;font-weight:500;text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(245,241,235,.12);transition:color .25s}
.drawer-panel a.dlink:hover{color:var(--gold)}
.drawer-foot{margin-top:24px;display:grid;gap:12px;font-size:14px;color:var(--film-muted)}
.drawer-foot a{color:var(--film-fg)}
.drawer-foot .btn{width:100%;border-radius:999px}

/* ---------- hero: photo on the left, details panel on the right ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(360px,1fr);min-height:100svh;background:var(--bg)}
@media (max-width:980px){.hero{grid-template-columns:1fr;min-height:0;padding-top:76px}}
@media (max-width:620px){.hero{padding-top:64px}}

.hero-img{position:relative;min-height:100svh;background-image:var(--img-hero),
    linear-gradient(rgba(188,118,78,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(188,118,78,.1) 1px,transparent 1px),
    linear-gradient(rgba(188,118,78,.17) 1px,transparent 1px),
    linear-gradient(90deg,rgba(188,118,78,.17) 1px,transparent 1px),
    var(--fallback);
  background-size:cover,38px 38px,38px 38px,190px 190px,190px 190px,cover;
  background-position:center,0 0,0 0,0 0,0 0,center;
  background-repeat:no-repeat,repeat,repeat,repeat,repeat,no-repeat}
@media (max-width:980px){.hero-img{min-height:0;aspect-ratio:1294/759;background-size:contain,38px 38px,38px 38px,190px 190px,190px 190px,cover;background-color:#14100D}}
@media (max-width:980px) and (min-aspect-ratio:1/1){.hero-img{aspect-ratio:auto;min-height:62svh;background-size:cover,38px 38px,38px 38px,190px 190px,190px 190px,cover}}
/* a soft wash only at the very top, so the bar stays readable over the photo */
.hero-img::after{content:"";position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(rgba(12,9,7,.62),transparent)}
@media (max-width:980px){.hero-img::after{display:none}}

.hero-panel{background:var(--bg);display:grid;align-content:center;justify-items:center;text-align:center;gap:18px;padding:clamp(96px,11vh,140px) clamp(22px,2.6vw,46px) clamp(36px,5vh,60px);border-left:3px solid var(--brand)}
@media (max-width:980px){.hero-panel{border-left:0;border-top:3px solid var(--brand);padding-block:clamp(38px,6vh,56px)}}
h1.mark,
.hero-panel .mark{font-family:var(--f-display);font-weight:500;font-size:clamp(31px,2.9vw,45px);line-height:1.06;letter-spacing:-.012em}
.hero-panel .mark span{display:block;font-family:var(--f-body);font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:600}
.hero-rule{width:64px;height:1px;background:var(--brand)}
.hero-size{font-size:clamp(28px,2.9vw,44px);font-weight:700;color:var(--accent);line-height:1.05;letter-spacing:.01em;white-space:nowrap}
.hero-kind{font-size:clamp(14px,1.2vw,18px);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--fg)}
.hero-where{font-size:clamp(16px,1.3vw,20px);color:var(--muted);font-weight:400}
.hero-call{font-size:clamp(21px,2vw,30px);font-weight:700;letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.hero-call:hover{color:var(--accent)}
.hero-reg{font-size:12.5px;line-height:1.7;color:var(--muted);font-weight:500;letter-spacing:.01em}
.hero-more{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;font:inherit;font-size:14px;letter-spacing:.1em;cursor:pointer;color:var(--fg);padding:6px 0}
.hero-more svg{width:34px;height:10px;color:var(--accent);transition:transform .35s var(--ease)}
.hero-more:hover svg{transform:translateX(7px)}

/* right-edge action rail */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:58;display:grid;gap:2px}
.rail a,.rail button{width:56px;height:56px;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;background:var(--accent);transition:background .25s}
.rail .r-call{background:var(--bg);color:var(--accent);box-shadow:0 6px 24px rgba(0,0,0,.14)}
.rail .r-call:hover{background:var(--accent);color:#fff}
.rail button:hover{background:var(--fg)}
.rail svg{width:21px;height:21px}
@media (max-width:980px){.rail{display:none}}

/* ---------- stats ---------- */
.stats{background:var(--film);color:var(--film-fg)}
.stats-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(245,241,235,.14)}
@media (max-width:760px){.stats-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--film);padding:clamp(26px,4vw,44px) 16px;text-align:center;display:grid;gap:7px}
.stat b{font-family:var(--f-display);font-weight:500;font-size:clamp(29px,3.4vw,45px);line-height:1.05;color:var(--gold)}
.stat span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--film-muted)}

/* ---------- sections ---------- */
section.band{padding-block:clamp(66px,9vw,124px)}
.band.alt{background:var(--alt)}
.head{display:grid;gap:14px;justify-items:center;text-align:center;max-width:62ch;margin:0 auto clamp(38px,5vw,60px)}
.head h2{font-size:clamp(29px,3.9vw,52px);font-weight:500}
.head h2 em{font-style:italic;color:var(--accent)}
.head p{color:var(--muted);font-size:16.5px;font-weight:400}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4.5vw,72px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split .copy{display:grid;gap:18px}
.split h2{font-size:clamp(26px,3.2vw,42px);font-weight:500}
.split h2 em{font-style:italic;color:var(--accent)}
.split .copy > p{color:var(--muted);font-weight:400}
.shot{position:relative;aspect-ratio:4/3;background-image:var(--slot),var(--fallback);background-size:cover;background-position:center;overflow:hidden;margin:0}
.shot.venture{--slot:var(--img-story)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;color:rgba(255,255,255,.92);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(transparent,rgba(12,9,7,.8))}
.ticks{display:grid;gap:11px}
.ticks div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.ticks svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--accent)}

/* amenities */
.amen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.amen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.amen{grid-template-columns:1fr}}
.am{background:var(--alt);padding:clamp(24px,3vw,34px) 24px;display:grid;gap:11px;justify-items:center;text-align:center}
.am svg{width:30px;height:30px;color:var(--accent)}
.am b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.2}
.am span{font-size:14px;color:var(--muted);line-height:1.5;font-weight:400}

/* master plan */
.planwrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(22px,3vw,46px);align-items:start}
@media (max-width:900px){.planwrap{grid-template-columns:1fr}}
.planbox{background:var(--bg);border:1px solid var(--line);padding:clamp(14px,2vw,24px)}
.planbox svg{width:100%;height:auto}
.mp-wall{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:9 5;opacity:.85}
.mp-road{fill:var(--accent);opacity:.16}
.mp-road-main{fill:var(--accent);opacity:.26}
.mp-plot{fill:var(--accent);opacity:.3}
.mp-park{fill:#3F6B4A;opacity:.26}
.mp-mark{fill:none;stroke:var(--accent);stroke-width:2}
.mp-label{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.mp-label-key{fill:var(--fg)}
.keyrow{display:flex;gap:13px;align-items:flex-start;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.keyrow:last-child{border-bottom:0;margin-bottom:0}
.keysw{width:20px;height:20px;flex:none;margin-top:3px;background:var(--accent);opacity:.3}
.keysw.park{background:#3F6B4A;opacity:.26}
.keysw.wall{background:transparent;border:2px dashed var(--accent);opacity:.85}
.keyrow b{display:block;font-size:15.5px;font-weight:600}
.keyrow span{font-size:14px;color:var(--muted);line-height:1.5;font-weight:400}

/* location */
.locgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){.locgrid{grid-template-columns:1fr}}
.locgroup{background:var(--alt);padding:28px clamp(18px,2vw,28px) 20px}
.locgroup h3{font-size:25px;font-weight:400}
.locgroup-note{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5;font-weight:400}
.locgroup dl{margin:16px 0 0;border-top:1px solid var(--line)}
.st{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.locgroup dl .st:last-child{border-bottom:0}
.st dt{font-family:var(--f-display);font-weight:500;font-size:19px;color:var(--accent);min-width:72px;flex:none}
.st dd{margin:0;font-size:15.5px}
.note{font-size:13px;color:var(--muted);margin-top:18px;text-align:center;font-weight:400}

/* ---------- featured projects ---------- */
.pwrap{position:relative;overflow:hidden;padding-block:clamp(16px,2.4vw,34px)}
.ptrack{display:flex;align-items:center;gap:clamp(18px,3vw,56px);will-change:transform}
.ptrack.glide{transition:transform .85s var(--ease)}

/* every card is the same size; the two either side simply sit back */
.pcard{position:relative;flex:0 0 clamp(210px,26vw,430px);border:0;padding:0;background:transparent;cursor:pointer;
  display:grid;gap:18px;text-align:center;transform:scale(.86);transition:transform .85s var(--ease)}
@media (max-width:820px){.pcard{flex-basis:76vw;transform:none}}
.pcard .pshot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--alt);
  box-shadow:0 10px 26px rgba(28,22,19,.08);transition:box-shadow .85s var(--ease)}
.pcard img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.9) brightness(1.06);opacity:.62;
  transition:filter .85s var(--ease),opacity .85s var(--ease),transform 1.4s var(--ease)}
/* a soft paper wash over the resting cards, the way My Home fades theirs out */
.pcard .pshot::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(250,247,243,.2),rgba(250,247,243,.56));
  transition:opacity .85s var(--ease)}
.pcard b{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.8vw,27px);line-height:1.15;
  color:var(--muted);opacity:.5;transition:color .6s,opacity .6s}
.pcard span{font-size:13px;color:var(--muted);opacity:.42;transition:opacity .6s}

.pcard[aria-current="true"]{transform:scale(1.1);z-index:2}
.pcard[aria-current="true"] img{filter:none;opacity:1}
.pcard[aria-current="true"] .pshot{box-shadow:0 30px 68px rgba(28,22,19,.28)}
.pcard[aria-current="true"] .pshot::after{opacity:0}
.pcard[aria-current="true"] b{color:var(--fg);opacity:1;font-size:clamp(26px,2.7vw,38px)}
.pcard[aria-current="true"] span{opacity:1;font-size:14.5px}
.pcard:not([aria-current="true"]):hover img{opacity:.72}
.pcard:not([aria-current="true"]):hover .pshot::after{opacity:.5}
.pcard[aria-current="true"]:hover img{transform:scale(1.04)}

.pfoot{display:grid;justify-items:center;gap:16px;margin-top:clamp(22px,3vw,38px);text-align:center}
.pfoot p{color:var(--muted);font-weight:400;max-width:56ch;min-height:3em;transition:opacity .4s}
.pfoot.swap p,.pfoot.swap #plink{opacity:0}
#plink{transition:opacity .4s}
.pnav{display:flex;gap:12px;justify-content:center;margin-top:4px}
.pnav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.pnav button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.pnav svg{width:20px;height:11px}

/* ---------- scroll reveal: line drawing turns into the photograph ---------- */
.story{position:relative;height:230vh;background:var(--bg);--p:0}
@media (max-width:860px){.story{height:200vh}}
.story-stick{position:sticky;top:0;height:100svh;overflow:hidden;--chrome:134px;padding-top:var(--chrome)}
@media (max-width:620px){.story-stick{--chrome:120px}}
.story-media{position:absolute;inset:var(--chrome) 0 0 0}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* the colour frame is wiped in from the bottom as you scroll */
.story-photo{clip-path:inset(calc(100% - var(--p) * 100%) 0 0 0)}
/* a scrim that only appears once the photo is behind the text */
.story-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 24%,rgba(12,10,9,.34) 48%,rgba(12,10,9,.72) 76%)}
@media (max-width:860px){.story-scrim{background:linear-gradient(transparent 16%,rgba(12,10,9,.5) 46%,rgba(12,10,9,.8) 78%)}}
.story-in{position:relative;height:100%;display:grid;align-content:center;justify-items:end}
.story-copy{max-width:46ch;display:grid;gap:18px;justify-items:start;text-align:left;
  color:#fff}
@media (max-width:860px){.story-in{justify-items:start;align-content:end;padding-bottom:12vh}.story-copy{max-width:none}}
.story-copy .eyebrow{color:var(--gold)}
.story-copy h2{font-size:clamp(30px,4vw,54px);font-weight:500;line-height:1.1}
.story-copy h2 em{font-style:italic}
.story-copy p{font-weight:400;font-size:16.5px;color:rgba(255,255,255,.88)}
.story-copy .btn{margin-top:6px}
/* the sweeping line itself */
.story-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent);
  top:calc(100% - var(--p) * 100%);opacity:calc(1 - var(--p));box-shadow:0 0 18px rgba(188,118,78,.7)}
.story-tag{position:absolute;left:var(--gutter);bottom:26px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){.story{height:auto}.story-stick{position:static;height:auto;aspect-ratio:16/9}.story-photo{clip-path:none}.story-line{display:none}}

/* ---------- villa carousel ---------- */
.carousel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:center;padding-right:var(--gutter)}
@media (max-width:900px){.carousel{grid-template-columns:1fr;gap:26px;padding-inline:0}
  .cinfo{padding-inline:var(--gutter);max-width:none}}

.stage{position:relative;isolation:isolate;padding:30px 0 38px;perspective:1800px;perspective-origin:left center;
  clip-path:inset(-120px -34px -120px -100vw)}
.deck{position:relative}
.slides{position:relative;aspect-ratio:16/11;max-height:min(56vh,500px);overflow:hidden;background:var(--film);
  transform:rotateY(-7deg) rotate(-.6deg);transform-origin:left center;
  box-shadow:0 46px 90px rgba(28,22,19,.3),0 6px 18px rgba(28,22,19,.14)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform 1.5s var(--ease)}
.slides img.on{opacity:1;transform:none}
.slides img.plan{object-fit:contain;background:#16281F}
/* the next photos fanned out behind, upper right */
.ghost{position:absolute;z-index:-1;background:var(--alt) center/cover no-repeat;
  transform-origin:left center;transition:background-image .5s var(--ease);
  box-shadow:0 22px 50px rgba(28,22,19,.18)}
.g1{inset:-16px -26px 16px 56px;transform:rotateY(-7deg) rotate(2deg)}
.g2{inset:-28px -52px 34px 98px;transform:rotateY(-7deg) rotate(4deg);opacity:.8}
@media (min-width:901px) and (max-width:1200px){
  .g1{inset:-14px -18px 14px 44px}
  .g2{inset:-24px -36px 30px 78px}
}
@media (max-width:900px){
  .stage{padding:26px 0 34px;clip-path:inset(-120px -22px -120px -100vw)}
  .g1{inset:-10px -12px 10px 26px}
  .g2{inset:-18px -24px 22px 48px}
}
.counter{position:absolute;right:0;bottom:0;z-index:2;background:rgba(14,10,8,.74);color:#fff;font-size:11.5px;letter-spacing:.2em;padding:10px 16px;font-variant-numeric:tabular-nums}

.cinfo{display:grid;gap:15px;align-content:center;max-width:46ch}
.cnum{font-family:var(--f-display);font-size:clamp(52px,5.6vw,80px);font-weight:500;line-height:.86;color:var(--accent);opacity:.3}
.cinfo h3{font-size:clamp(29px,3.5vw,46px);font-weight:400;line-height:1.06}
.cinfo p{color:var(--muted);font-weight:400;min-height:4.6em}
.cnav{display:flex;gap:12px;margin-top:8px}
.cnav button{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cnav button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.cnav svg{width:22px;height:12px}
.dots{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.dots button{width:30px;height:2px;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .3s,transform .3s}
.dots button[aria-current="true"]{background:var(--accent)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--alt);padding:clamp(26px,3vw,38px) 26px;display:grid;gap:9px;counter-increment:s;text-align:center;justify-items:center}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-size:31px;font-weight:500;color:var(--accent);line-height:1.05}
.step b{font-family:var(--f-display);font-weight:400;font-size:23px}
.step span{font-size:14.5px;color:var(--muted);line-height:1.55;font-weight:400}

/* enquiry */
.enq{background:var(--film);color:var(--film-fg)}
.enq-in{padding-block:clamp(58px,8vw,104px);display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,480px);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:920px){.enq-in{grid-template-columns:1fr}}
.enq h2{font-size:clamp(29px,3.7vw,48px);font-weight:500;max-width:16ch}
.enq h2 em{font-style:italic;color:var(--gold)}
.enq .lede{color:var(--film-muted);margin-top:16px;max-width:44ch;font-weight:400}
.enq .eyebrow{color:var(--gold)}
.enqline{display:flex;align-items:center;gap:11px;margin-top:18px;font-size:15px;color:var(--film-muted)}
.enqline svg{width:16px;height:16px;flex:none}
.enqline a{color:var(--film-fg);text-decoration:none;border-bottom:1px solid rgba(245,241,235,.3)}
.btn-line{margin-top:24px;background:transparent;border-color:rgba(245,241,235,.4);color:var(--film-fg);border-radius:999px}
.btn-line:hover{background:#fff;color:var(--fg);border-color:#fff}
.card{background:var(--bg);color:var(--fg);padding:clamp(22px,2.6vw,34px);display:grid;gap:18px;scroll-margin-top:100px}
.card h3{font-size:27px;font-weight:400}
.card .fine{font-size:12.5px;color:var(--muted);font-weight:400}
.fields{display:grid;gap:17px;border:0;padding:0;margin:0;min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}
.f{display:grid;gap:6px;min-width:0}
.f label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.f input,.f select{font:inherit;font-size:16.5px;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 0;border-radius:0;width:100%;transition:border-color .3s}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.f select option{background:var(--bg);color:var(--fg)}
.f input:focus,.f select:focus{outline:none;border-bottom-color:var(--accent)}
.phn{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.phn:focus-within{border-bottom-color:var(--accent)}
.phn span{font-size:16.5px;color:var(--muted)}
.phn input{border-bottom:0!important}
.err{font-size:12px;color:var(--bad);min-height:1px}
.f.bad input{border-bottom-color:var(--bad)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5;font-weight:400}
.consent input{appearance:none;width:17px;height:17px;flex:none;margin-top:2px;border:1px solid var(--muted);border-radius:2px;background:transparent;cursor:pointer;display:grid;place-content:center}
.consent input::after{content:"";width:9px;height:9px;transform:scale(0);transition:transform .15s var(--ease);box-shadow:inset 1em 1em var(--bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::after{transform:scale(1)}
.consent.bad input{border-color:var(--bad)}
.card .btn{width:100%}
.done{display:grid;gap:13px}
.done .tick{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:20px}
.done h3{font-size:30px}
.done p{color:var(--muted);font-weight:400}

/* faq */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:21px 42px 21px 0;position:relative;font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 42px 24px 0;color:var(--muted);font-size:15.5px;font-weight:400}

/* footer */
.foot{background:var(--film);color:rgba(245,241,235,.56);font-size:13px;line-height:1.75;border-top:1px solid rgba(245,241,235,.12)}
.foot-in{padding-block:40px 36px;display:grid;gap:14px;justify-items:center;text-align:center}
.foot img{height:54px;width:auto}
.foot b{color:rgba(245,241,235,.84);font-weight:600}
.foot a{color:rgba(245,241,235,.76)}

/* mobile dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.dock a,.dock button{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;font:inherit;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:0;cursor:pointer;text-decoration:none}
.dock .call{background:var(--bg);color:var(--fg)}
.dock .visit{background:var(--accent);color:#fff}
.dock svg{width:15px;height:15px}
@media (max-width:620px){.dock{display:grid}.foot-in{padding-bottom:84px}}

/* reveal */
.reveal-on [data-reveal]{opacity:0;transform:translateY(18px)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.reveal-on [data-reveal]{opacity:1!important;transform:none!important}}
@media print{.bar,.dock,.card,.enq{display:none!important}body{background:#fff;color:#000}}


/* ====================== company site additions ====================== */
:root{--chrome:134px}
@media (max-width:620px){:root{--chrome:120px}}
[id]{scroll-margin-top:calc(var(--chrome) + 16px)}
/* NOTE: overflow-x on <html> would break position:sticky for everything
   inside it in Chromium, which kills the sketch-to-photo pin on phones.
   The menu drawer parks off-screen to the left, so it clips itself. */
.drawer{overflow:clip}
/* the sweeping line animated `top`, so the browser re-laid-out the page on
   every scroll frame. It is now a full-height strip with the line drawn at
   its bottom edge, moved with a transform — no layout work while scrolling. */
.story-line{top:0;height:100%;box-shadow:none;
  background:linear-gradient(90deg,transparent,var(--brand),transparent) left bottom/100% 2px no-repeat;
  filter:drop-shadow(0 0 16px rgba(188,118,78,.75));
  transform:translateY(calc(var(--p) * -100%));will-change:transform}
.story-bg{display:none}
@media (max-width:760px){.story-bg{display:block}}
/* the fanned-out photo stack overhangs to the right on tablets and phones */
@media (max-width:900px){#villa .carousel{overflow-x:clip}}

/* the header is solid on every page — never floating over the photograph */
.topbar{background:var(--film);color:var(--film-fg);box-shadow:0 1px 0 rgba(188,118,78,.3)}
.topbar .burger{background:transparent;border-color:rgba(245,241,235,.28)}
.topbar .btn{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;border-radius:999px}
.topbar .btn:hover{background:#fff;color:var(--fg);border-color:#fff}

/* the hero now starts below the header instead of behind it */
:root{--bar:76px}
@media (max-width:620px){:root{--bar:64px}}
@media (min-width:981px){
  .hero{padding-top:var(--bar)}
  .hero-img{min-height:calc(100svh - var(--bar))}
}
.subnav{top:var(--bar)}
@media (max-width:620px){.subnav{top:var(--bar)}}
.phero{padding-top:calc(var(--bar) + clamp(28px,4vw,54px))}
@media (max-width:620px){.phero{padding-top:calc(var(--bar) + clamp(22px,4vw,40px))}}

/* ---------- page masthead ---------- */
.phero{position:relative;background:var(--film);color:var(--film-fg);overflow:hidden;
  padding:calc(86px + clamp(28px,4vw,54px)) 0 clamp(32px,4.5vw,58px)}
@media (max-width:620px){.phero{padding-top:calc(72px + clamp(22px,4vw,40px))}}
.phero::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    radial-gradient(760px 420px at 84% 4%,rgba(188,118,78,.32),transparent 62%),
    linear-gradient(rgba(188,118,78,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(188,118,78,.1) 1px,transparent 1px);
  background-size:cover,38px 38px,38px 38px;
  -webkit-mask-image:linear-gradient(105deg,#000,rgba(0,0,0,.4) 62%,transparent 92%);
  mask-image:linear-gradient(105deg,#000,rgba(0,0,0,.4) 62%,transparent 92%)}
.phero-bg{position:absolute;inset:0;background-size:cover;background-position:center 58%}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,10,8,.94) 0%,rgba(14,10,8,.82) 46%,rgba(14,10,8,.58) 100%)}
.phero.has-photo::before{opacity:.22}
.phero.has-photo{padding-bottom:clamp(40px,5.5vw,70px)}
.phero-in{position:relative;display:grid;gap:15px}
.phero-in > *{max-width:48ch}
.phero .eyebrow{color:var(--gold)}
.phero h1{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,4.4vw,56px);line-height:1.12;letter-spacing:-.018em}
.phero h1 em{font-style:italic;color:var(--gold)}
.phero p{color:var(--film-muted)}
.phero .stamp{margin-top:6px}
.crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,235,.55)}
.crumb a{color:rgba(245,241,235,.82);text-decoration:none}
.crumb a:hover{color:var(--gold)}
body.inner .subnav + .band,
body.inner .subnav + .enq{padding-top:clamp(36px,4.5vw,64px)}

/* ---------- company hero panel ---------- */
.hero-tag{font-size:clamp(15px,1.3vw,19px);color:var(--muted);max-width:34ch}
.hero-vent{display:grid;gap:9px;width:100%;max-width:330px;margin-top:4px}
.hero-vent a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);transition:border-color .3s}
.hero-vent a:hover{border-bottom-color:var(--accent)}
.hero-vent b{font-family:var(--f-display);font-weight:500;font-size:19px}
.hero-vent span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- ventures coverflow ---------- */
.vcar{background:var(--film);color:var(--film-fg);overflow:hidden}
.vcar .head h2{color:var(--film-fg)}
.vcar .head h2 em{color:var(--gold)}
.vcar .head p{color:var(--film-muted)}
.vcar .eyebrow{color:var(--gold)}
.vcar .rule{background:var(--brand)}

.vstage{position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vw,22px);perspective:1900px;padding-block:clamp(10px,2vw,26px)}
.vslots{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,34px);
  transform-style:preserve-3d;flex:1;min-width:0}
.vslot{position:relative;flex:0 0 clamp(150px,21vw,330px);aspect-ratio:4/5;border:0;padding:0;
  background:#141010;cursor:pointer;overflow:hidden;border-radius:2px;
  transition:transform .85s var(--rise),opacity .5s var(--rise),box-shadow .85s var(--rise),filter .85s var(--rise),flex-basis .85s var(--rise)}
.vslot[data-slot="-1"]{transform:rotateY(26deg) scale(.86);transform-origin:right center;filter:grayscale(1) brightness(.82)}
.vslot[data-slot="1"]{transform:rotateY(-26deg) scale(.86);transform-origin:left center;filter:grayscale(1) brightness(.82)}
.vslot.vslot-on{flex-basis:clamp(210px,30vw,470px);transform:none;filter:none;z-index:2;
  box-shadow:0 34px 80px rgba(0,0,0,.6)}
.vslot img{width:100%;height:100%;object-fit:cover;display:block}
.vslot .noimg-mark{position:absolute;inset:0;display:grid;place-content:center;gap:10px;justify-items:center;padding:20px;
  background:linear-gradient(155deg,#241A14 0%,#171210 60%,#120E0C 100%)}
.vslot:not(.vslot-on):hover{filter:grayscale(.35) brightness(1)}
.vslots.swap .vslot{opacity:.2}
/* phones keep all three cards — the arrows move onto the edges to make room */
@media (max-width:760px){
  .vstage{gap:0;position:relative;padding-block:6px}
  .vnav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;z-index:4;
    background:rgba(14,10,8,.72);backdrop-filter:blur(4px)}
  .vnav:hover,.vnav:active{transform:translateY(-50%) scale(1.06)}
  .vprev{left:0}
  .vnext{right:0}
  .vnav svg{width:16px;height:16px}
  .vslots{gap:6px;padding-inline:46px;width:100%}
  .vslot{flex:0 0 17vw;min-width:0}
  .vslot[data-slot="-1"]{transform:rotateY(24deg) scale(.9)}
  .vslot[data-slot="1"]{transform:rotateY(-24deg) scale(.9)}
  .vslot.vslot-on{flex-basis:37vw}
  .vprog{max-width:84%}
  /* the placeholder panels have little room on a narrow side card */
  .vslot:not(.vslot-on) .noimg-mark{gap:6px;padding:8px}
  .vslot:not(.vslot-on) .noimg-mark b{font-size:12.5px;line-height:1.25}
  .vslot:not(.vslot-on) .noimg-mark i{width:18px}
  .vslot:not(.vslot-on) .noimg-mark span{display:none}
}
@media (max-width:380px){
  .vslots{padding-inline:42px;gap:5px}
  .vslot{flex:0 0 16vw}
  .vslot.vslot-on{flex-basis:38vw}
}

.noimg-mark{display:grid;gap:10px;justify-items:center;text-align:center}
.noimg-mark b{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.2vw,32px);
  color:var(--gold);line-height:1.15}
.noimg-mark span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,241,235,.6)}
.noimg-mark i{display:block;width:40px;height:1px;background:rgba(188,118,78,.7)}

.vnav{flex:none;width:clamp(42px,4vw,56px);height:clamp(42px,4vw,56px);border-radius:50%;
  border:1px solid rgba(245,241,235,.3);background:rgba(245,241,235,.04);color:var(--film-fg);
  display:grid;place-items:center;cursor:pointer;z-index:3;
  transition:background .3s,border-color .3s,transform .3s var(--rise)}
.vnav:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.07)}
.vnav svg{width:20px;height:20px}

/* the curved progress line with its travelling dot */
.vprog{position:relative;max-width:min(640px,78%);margin:clamp(20px,2.6vw,34px) auto 0;color:var(--brand)}
.vprog svg{width:100%;height:44px;overflow:visible;display:block}
#vdot{transition:transform .85s var(--rise)}
.vcount{position:absolute;right:0;top:100%;font-size:12.5px;letter-spacing:.18em;
  color:var(--film-muted);font-variant-numeric:tabular-nums}

.vmeta{text-align:center;margin-top:clamp(34px,4.4vw,58px);display:grid;gap:10px;justify-items:center}
.vmeta h3{font-family:var(--f-display);font-weight:500;line-height:1.1;
  font-size:clamp(30px,5vw,68px);color:var(--film-fg);transition:opacity .35s}
.vmeta .vtag{color:var(--film-muted);font-size:clamp(15px,1.4vw,18px);transition:opacity .35s}
.vmeta .vloc{color:var(--film-muted);font-size:15px;transition:opacity .35s}
.vmeta .vloc b{color:var(--film-fg);font-weight:600}
.vmeta .btn{margin-top:14px;background:transparent;border-color:rgba(245,241,235,.45);color:#fff;border-radius:999px}
.vmeta .btn:hover{background:#fff;color:var(--fg);border-color:#fff}
.vmeta.swap h3,.vmeta.swap .vtag,.vmeta.swap .vloc{opacity:0}

/* ---------- two-column prose ---------- */
.prose{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,4.5vw,76px);align-items:start}
@media (max-width:860px){.prose{grid-template-columns:1fr;gap:22px}}
.prose h2{font-size:clamp(28px,3.6vw,46px);font-weight:500}
.prose h2 em{font-style:italic;color:var(--accent)}
.body{display:grid;gap:17px;color:var(--muted)}
.body strong{color:var(--fg);font-weight:600}
.prose .body{max-width:62ch}

/* ---------- numbered promise list ---------- */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);counter-reset:pr}
@media (max-width:760px){.promise{grid-template-columns:1fr}}
.promise div{background:var(--bg);padding:clamp(24px,3vw,36px) 26px;display:grid;gap:9px;counter-increment:pr}
.alt .promise div{background:var(--alt)}
.promise div::before{content:counter(pr,decimal-leading-zero);font-family:var(--f-display);font-weight:500;
  font-size:13px;letter-spacing:.14em;color:var(--accent)}
.promise b{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.2}
.promise span{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- contact details ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:760px){.cgrid{grid-template-columns:1fr}}
.cgrid div{background:var(--bg);padding:clamp(24px,3vw,34px) 26px;display:grid;gap:8px;align-content:start}
.alt .cgrid div{background:var(--alt)}
.cgrid small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cgrid b{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,1.9vw,23px);line-height:1.3;word-break:break-word}
.cgrid a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
.cgrid a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cgrid p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- venture index ---------- */
.vlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.vrow{background:var(--bg);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,48px);align-items:center;padding:0}
.alt .vrow{background:var(--alt)}
@media (max-width:820px){.vrow{grid-template-columns:1fr}}
.vrow .shotbox{width:100%;align-self:stretch;min-height:clamp(230px,25vw,370px);background-size:cover;background-position:center}
.vrow .shotbox.noimg{background:linear-gradient(155deg,#241A14,#171210 60%,#120E0C);display:grid;place-items:center;padding:24px}
.vrow:nth-child(even) .shotbox{order:2}
@media (max-width:820px){.vrow:nth-child(even) .shotbox{order:0}}
.vrow .vbody{display:grid;gap:14px;padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,44px)}
.vrow h3{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.12}
.vrow .where{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vrow p{color:var(--muted);max-width:56ch}
.vrow .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.vrow .meta i{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);color:var(--muted);padding:6px 11px}
.vrow .btn{justify-self:start;margin-top:6px}

/* ---------- whatsapp on the rail + dock ---------- */
.rail .r-wa{background:#1F7A4D;color:#fff}
.rail .r-wa:hover{background:#17603C}
.dock{grid-template-columns:1fr}
.dock .visit{background:var(--brand);color:#fff}

/* ============================ motion ============================
   One easing, one language: things rise a little and settle. Images
   wipe open from the bottom while the picture inside relaxes out of a
   slight zoom. Headings stagger their own lines. Everything is a
   transform or an opacity, so none of it costs a layout pass.      */
:root{--rise:cubic-bezier(.16,.84,.36,1)}

/* the base reveal, now travelling a little further and settling slower */
.reveal-on [data-reveal]{opacity:0;transform:translateY(26px)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .9s var(--rise),transform .9s var(--rise)}

/* directional variants, used where a block enters from the side */
.reveal-on [data-reveal="left"]{transform:translate3d(-34px,0,0)}
.reveal-on [data-reveal="right"]{transform:translate3d(34px,0,0)}

/* a heading block staggers its eyebrow, title, lede and rule */
.reveal-on .head[data-reveal] > *,
.reveal-on [data-reveal] > .body > *{opacity:0;transform:translateY(16px)}
.reveal-on .head[data-reveal].is-in > *,
.reveal-on [data-reveal].is-in > .body > *{opacity:1;transform:none;
  transition:opacity .75s var(--rise),transform .75s var(--rise)}
.reveal-on .head[data-reveal].is-in > *:nth-child(2),
.reveal-on [data-reveal].is-in > .body > *:nth-child(2){transition-delay:.08s}
.reveal-on .head[data-reveal].is-in > *:nth-child(3),
.reveal-on [data-reveal].is-in > .body > *:nth-child(3){transition-delay:.16s}
.reveal-on .head[data-reveal].is-in > *:nth-child(4),
.reveal-on [data-reveal].is-in > .body > *:nth-child(4){transition-delay:.24s}
.reveal-on .head[data-reveal].is-in > *:nth-child(n+5),
.reveal-on [data-reveal].is-in > .body > *:nth-child(n+5){transition-delay:.3s}

/* Photographs ease in out of a slight zoom. A clip-path wipe was the first
   idea, but an element clipped to zero height reads as off-screen to the
   intersection observer, so it would never be told to open again. */
.reveal-on [data-rv="img"]{opacity:0;transform:scale(1.05);transform-origin:center}
.reveal-on [data-rv="img"].is-in{opacity:1;transform:none;
  transition:opacity .95s var(--rise),transform 1.4s var(--rise)}
.reveal-on [data-rv="img"] > img{transform:scale(1.06);transform-origin:center}
.reveal-on [data-rv="img"].is-in > img{transform:none;transition:transform 1.6s var(--rise)}

/* the hero panel introduces itself one line at a time on load */
@keyframes sv-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.motion .hero-panel > *{opacity:0;animation:sv-rise .85s var(--rise) forwards}
.motion .hero-panel > *:nth-child(1){animation-delay:.10s}
.motion .hero-panel > *:nth-child(2){animation-delay:.17s}
.motion .hero-panel > *:nth-child(3){animation-delay:.24s}
.motion .hero-panel > *:nth-child(4){animation-delay:.31s}
.motion .hero-panel > *:nth-child(5){animation-delay:.38s}
.motion .hero-panel > *:nth-child(6){animation-delay:.45s}
.motion .hero-panel > *:nth-child(7){animation-delay:.52s}
.motion .hero-panel > *:nth-child(8){animation-delay:.59s}

/* the stats tick in one after another */
.motion .stats-in .stat{opacity:0;animation:sv-rise .7s var(--rise) forwards}
.motion .stats-in .stat:nth-child(1){animation-delay:.45s}
.motion .stats-in .stat:nth-child(2){animation-delay:.55s}
.motion .stats-in .stat:nth-child(3){animation-delay:.65s}
.motion .stats-in .stat:nth-child(4){animation-delay:.75s}

/* the masthead on inner pages rises as soon as it is painted */
.motion .phero-in > *{opacity:0;animation:sv-rise .8s var(--rise) forwards}
.motion .phero-in > *:nth-child(1){animation-delay:.08s}
.motion .phero-in > *:nth-child(2){animation-delay:.16s}
.motion .phero-in > *:nth-child(3){animation-delay:.24s}
.motion .phero-in > *:nth-child(4){animation-delay:.32s}
.motion .phero-in > *:nth-child(5){animation-delay:.40s}

/* small touches that make the page feel responsive to the pointer */
.btn,.pcard,.vstrip figure img,.nav a,.subnav a{will-change:auto}
.vrow{transition:background .4s var(--rise)}
.vrow:hover{background:var(--alt)}
.alt .vrow:hover{background:var(--bg)}
.am{transition:background .4s var(--rise),transform .4s var(--rise)}
.am:hover{background:var(--bg)}
.alt .am:hover{background:var(--alt)}
.am svg{transition:transform .5s var(--rise)}
.am:hover svg{transform:translateY(-3px) scale(1.06)}
.step{transition:background .4s var(--rise)}
.step:hover{background:var(--bg)}
.alt .step:hover{background:var(--alt)}
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary{color:var(--accent)}
.hero-vent a b{transition:transform .35s var(--rise);display:inline-block}
.hero-vent a:hover b{transform:translateX(5px)}
.cgrid div{transition:background .4s var(--rise)}
.cgrid div:hover{background:var(--bg)}
.alt .cgrid div:hover{background:var(--alt)}

@media (prefers-reduced-motion:reduce){
  .motion .hero-panel > *,.motion .stats-in .stat,.motion .phero-in > *{opacity:1;animation:none}
  .reveal-on [data-rv="img"]{opacity:1;transform:none}
  .reveal-on [data-rv="img"] > img{transform:none}
}

@media (max-width:380px){.dock a,.dock button{font-size:10px;letter-spacing:.1em;padding:15px 4px}}

/* ---------- villa gallery: big stage + thumbnail strip ---------- */
.vgal-wrap{margin-top:clamp(30px,4.2vw,56px);max-width:1640px}
.vgal{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,3.4vw,58px);align-items:start}
.vg-stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--alt)}
.vg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.vg-img.on{opacity:1;transform:none}
.vg-side{display:grid;gap:clamp(18px,2.4vw,30px);padding-top:clamp(0px,1vw,14px)}
.vg-thumbs{overflow:hidden;--vg-gap:clamp(8px,1vw,14px)}
.vg-track{display:flex;gap:var(--vg-gap);
  transition:transform .75s var(--ease);will-change:transform}
.vg-th{position:relative;padding:0;border:0;background:var(--alt);cursor:pointer;
  flex:0 0 calc((100% - 3 * var(--vg-gap)) / 4);
  aspect-ratio:4/3;overflow:hidden;border-radius:2px;opacity:.5;
  transition:opacity .45s var(--ease)}
.vg-th img{width:100%;height:100%;object-fit:cover;display:block}
.vg-th::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.vg-th:hover{opacity:.85}
.vg-th.on{opacity:1}
.vg-th.on::after{transform:scaleX(1)}
.vg-cap .vg-n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.vg-cap h3{font-family:var(--display);font-weight:400;font-size:clamp(25px,2.8vw,40px);
  line-height:1.18;margin:0 0 12px}
.vg-cap p:last-child{margin:0;max-width:46ch;font-size:clamp(15px,1.15vw,17.5px)}
.vg-nav{display:flex;gap:clamp(16px,2vw,30px)}
.vg-nav button{width:clamp(54px,4.2vw,72px);height:clamp(54px,4.2vw,72px);
  border-radius:999px;border:1px solid var(--line);
  background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease)}
.vg-nav button:hover{transform:scale(1.06)}
.vg-nav button svg{width:clamp(22px,1.9vw,30px);height:clamp(22px,1.9vw,30px);stroke-width:1.3}
.vg-nav button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:900px){
  .vgal{grid-template-columns:1fr;gap:20px}
  .vg-stage{aspect-ratio:4/3}
  .vg-thumbs{order:2}
  .vg-side{gap:18px}
  .vg-nav{order:3}
}
@media (max-width:620px){
  .vg-thumbs{display:none}
  .vg-nav{justify-content:center}
}

/* "what is already built" grid on the venture pages */
.osgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media (max-width:860px){.osgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.osgrid{grid-template-columns:1fr}}
.os-i{background:var(--bg);padding:clamp(20px,2.4vw,30px)}
.band.alt .os-i{background:var(--alt)}
.os-i b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.7vw,22px);line-height:1.25;margin-bottom:7px}
.os-i span{display:block;font-size:14.5px;line-height:1.62;color:var(--muted)}

/* "our other ventures" cards */
.ovgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:700px){.ovgrid{grid-template-columns:1fr}}
.ovc{display:block;text-decoration:none;color:inherit;background:var(--bg);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .5s var(--ease)}
.ovc:hover{border-color:var(--brand);transform:translateY(-3px)}
.ovc-img{display:block;aspect-ratio:16/9;background:var(--fg) center/cover no-repeat}
.ovc-txt{display:block;padding:clamp(18px,2vw,26px)}
.ovc-txt b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2vw,26px);line-height:1.2;margin-bottom:8px}
.ovc-txt small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);margin-bottom:8px}
.ovc-txt em{display:block;font-style:normal;font-size:14px;color:var(--muted)}

/* ============================================================
   Design pass — section heads read left, like the premium
   builder sites: eyebrow, then a large display heading, then a
   hairline that runs out to the right edge of the column. More
   air between bands, and headings that rise into place.
   ============================================================ */

/* --- deeper vertical rhythm --- */
section.band{padding-block:clamp(74px,10vw,148px)}

/* --- left-aligned section heads --- */
.head{justify-items:start;text-align:left;max-width:none;
  margin:0 0 clamp(40px,5.2vw,68px);gap:12px;
  grid-template-columns:minmax(0,1fr);position:relative}
.head > p:not(.eyebrow){max-width:60ch;color:var(--muted)}
.head h2{font-size:clamp(31px,4.4vw,60px);letter-spacing:-.022em;max-width:20ch}
.head .rule{width:100%;max-width:none;margin:clamp(14px,1.6vw,22px) 0 0;
  background:var(--line);position:relative}
.head .rule::before{content:"";position:absolute;left:0;top:0;width:86px;height:1px;
  background:var(--accent)}

/* on wide screens the lede sits beside the heading instead of
   leaving a hole to its right */
@media (min-width:981px){
  .head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(32px,5vw,90px);align-items:end}
  .head .eyebrow{grid-column:1;grid-row:1}
  .head h2{grid-column:1;grid-row:2}
  .head > p:not(.eyebrow){grid-column:2;grid-row:2;align-self:end;margin-bottom:8px}
  .head .rule{grid-column:1 / -1;grid-row:3}
}

/* the carousel band keeps its centred, theatrical head */
.vcar .head{justify-items:center;text-align:center;max-width:none;margin-inline:auto;
  grid-template-columns:minmax(0,1fr)}
.vcar .head > *{grid-column:1 !important}
.vcar .head .eyebrow{grid-row:auto}
.vcar .head h2{max-width:none;grid-row:auto}
.vcar .head > p:not(.eyebrow){grid-row:auto;margin-bottom:0;max-width:52ch}
.vcar .head .rule{grid-row:auto}
.vcar .head .rule{width:52px;margin-inline:auto}
.vcar .head .rule::before{display:none}

/* --- display scale --- */
.prose h2{font-size:clamp(30px,4.1vw,54px);letter-spacing:-.022em}
.split h2{font-size:clamp(28px,3.6vw,48px);letter-spacing:-.02em}
.enq h2{font-size:clamp(31px,4.1vw,54px);letter-spacing:-.022em}
.story-copy h2{font-size:clamp(32px,4.4vw,60px);letter-spacing:-.022em}
.eyebrow{font-size:10.5px;letter-spacing:.38em}

/* the carousel's project name is a <p> now, so the three projects can
   be listed as real headings and links below it */
.vmeta .vname-big{font-family:var(--f-display);font-weight:500;line-height:1.1;
  font-size:clamp(30px,3.6vw,50px);letter-spacing:-.02em;transition:opacity .35s}
.vmeta.swap .vname-big{opacity:0}
.vplist{list-style:none;margin:clamp(44px,5vw,70px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(245,241,235,.16);border-block:1px solid rgba(245,241,235,.16)}
@media (max-width:760px){.vplist{grid-template-columns:1fr}}
.vplist li{background:var(--film);padding:clamp(20px,2.4vw,30px)}
.vplist h3{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.8vw,24px);
  line-height:1.2;margin:0 0 8px}
.vplist h3 a{text-decoration:none;color:var(--film-fg);
  background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--ease)}
.vplist h3 a:hover{background-size:100% 1px;color:var(--gold)}
.vplist p{margin:0;font-size:14px;line-height:1.6;color:var(--film-muted)}

/* on a phone the sketch-to-photo section is just the picture: the copy
   and the scrim come off so nothing sits over the image */
@media (max-width:760px){
  /* no copy over the picture — the screen holds and the sketch turns
     into the photograph, same as on desktop */
  .story-copy > p,.story-copy .btn,.story-tag{display:none}
  .story-copy h2{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .story-in{pointer-events:none}
  .story-scrim{opacity:0}
  /* the whole villa, square and centred on a dark field — a wide photo
     cannot fill a tall screen without either cropping the house off or
     leaving blank bands, so the band is framed on purpose */
  /* the screen holds while the drawing turns into the photograph, same as
     on desktop. The phone crop is portrait, so it fills the screen with no
     empty band either side of it. */
  .story-stick{--chrome:0px}
  .story-media{inset:0}
  .story-media img{object-position:center}
  .story-bg{display:none !important}
}


/* The villa carousel ran edge to edge from x=0, so on a wide screen the
   photographs were sliced off at the left while a third of the row sat
   empty on the right. It now sits in the page's own column. */
@media (min-width:901px){
  .carousel{max-width:1640px;margin-inline:auto;
    padding-left:var(--gutter);padding-right:var(--gutter);
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    gap:clamp(32px,4vw,64px)}
  .stage{clip-path:inset(-120px -34px -120px -34px)}
  .cinfo{max-width:none}
}

/* on a very wide screen the villa gallery stopped short of the right edge
   and left a strip of empty page beside it */
@media (min-width:1600px){
  .vgal-wrap{max-width:min(1860px,96vw)}
  .vg-cap p:last-child{max-width:62ch}
}

/* a larger section nav */
.subnav a{font-size:13px;letter-spacing:.18em;padding:24px 0}
.subnav-in{gap:clamp(20px,2.8vw,44px)}
/* on a phone it could not fit and ran off the right edge; the menu button
   already carries every link, so the row comes off there */
@media (max-width:760px){.subnav{display:none}}

/* the site is light; it does not follow the phone's dark mode */
:root{color-scheme:light}

/* on a wide screen the story copy was stranded in the middle of the frame
   while the right third sat empty — it now uses the full width */
@media (min-width:1400px){
  .story-in{max-width:1640px}
  .story-copy{max-width:52ch}
}

/* the hero h1 carries the search phrase, so it has to be free to wrap */
/* keep the hero copy clear of the fixed contact rail */
@media (min-width:981px){.hero-panel{padding-right:max(var(--gutter),62px)}}
.hero-size{white-space:normal;text-wrap:balance;max-width:14ch;
  font-size:clamp(27px,2.7vw,41px);line-height:1.08}

/* --- headings rise into place --- */
.motion .head h2,
.motion .prose h2,
.motion [data-reveal] > .eyebrow{will-change:transform}
.motion [data-reveal] h2{transform:translateY(14px);opacity:0;
  transition:transform .9s var(--ease) .06s,opacity .8s var(--ease) .06s}
.motion [data-reveal].is-in h2{transform:none;opacity:1}

/* --- cards and cells lift on hover --- */
.os-i{transition:background .35s var(--ease)}
.os-i:hover{background:var(--accent-soft)}
.step{transition:border-color .35s var(--ease),transform .5s var(--ease)}
.step:hover{transform:translateY(-3px)}
.faq details{transition:background .3s var(--ease)}
.faq summary{cursor:pointer}

/* --- photos settle rather than pop --- */
.motion [data-reveal] .shotbox,
.motion [data-reveal] > img{transform:scale(1.03);transition:transform 1.5s var(--ease)}
.motion [data-reveal].is-in .shotbox,
.motion [data-reveal].is-in > img{transform:none}

@media (max-width:620px){
  .head h2{max-width:none}
  .head .rule::before{width:60px}
}

/* phone / tablet header: logo on the left, menu button on the right */
@media (max-width:980px){
  .topbar-in{grid-template-columns:auto 1fr auto}
  .brand{grid-column:1;grid-row:1;justify-self:start}
  .burger{grid-column:3;grid-row:1;justify-self:end}
}