:root{
  --green:#1E3B2C;
  --green-mid:#24463A;
  --green-dp:#173023;
  --green-dk:#0F2018;
  --brown:#3B2A20;
  --brown-dk:#26190F;
  --brass:#A98551;
  --brass-lt:#D8C29A;
  --brass-dk:#8A6633;
  --paper:#F3ECDD;
  --cream:#EBE1CB;
  --sand:#E4D6BA;
  --text:#2A2219;
  --muted:#65584A;
  --line:rgba(30,59,44,.2);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.3'/></svg>");
  --maxw:1240px;
  --head:84px;
  /* height a section's main image may take so the whole section fits one screen */
  --fit:min(600px, calc(100vh - var(--head) - 120px));
}
@supports (height:100svh){ :root{ --fit:min(600px, calc(100svh - var(--head) - 120px)); } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:var(--head)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
section{padding:64px 0}
[hidden]{display:none!important}

/* one section = one screen on desktop */
@media (min-width:901px){
  .screen{min-height:calc(100vh - var(--head));display:flex;flex-direction:column;justify-content:center;padding:48px 0}
  @supports (height:100svh){ .screen{min-height:calc(100svh - var(--head))} }
}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:400;line-height:1.2}
h1,h2{font-family:'Playfair Display',Georgia,serif;letter-spacing:.005em}
h1{font-size:clamp(2rem,min(4.2vw,6.4vh),3.4rem);line-height:1.12}
h2{font-size:clamp(1.6rem,min(2.9vw,4.6vh),2.4rem);color:var(--green)}
h1,h2{text-wrap:balance}
/* headings that must stay on one line: size scales with the column width instead of wrapping */
h2.one-line{white-space:nowrap;font-size:min(2.3rem,2.1vw)}
@media (max-width:900px){ h2.one-line{font-size:min(2.1rem,4.9vw)} }
/* location heading stays on one line inside its half-width column */
h2.loc-title{white-space:nowrap;font-size:min(1.5rem,1.85vw)}
@media (max-width:900px){ h2.loc-title{font-size:min(1.5rem,4vw)} }
h3{font-family:'Jost',sans-serif;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--brass)}
.lede{font-size:clamp(1rem,1.4vw,1.08rem);color:var(--muted);max-width:60ch;margin:0}
.rule{width:80px;height:1px;background:var(--brass);opacity:.7;margin:18px 0 22px;border:0}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:.84rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dk);margin:0 0 14px;font-weight:500}
.eyebrow::before{content:"";height:1.5px;background:currentColor;opacity:.8;flex:0 0 34px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";height:1.5px;background:currentColor;opacity:.8;flex:0 0 34px}
.center .rule{margin-left:auto;margin-right:auto}
.on-dark{color:#E9E0CE}
.on-dark h2,.on-dark h1{color:#F5EEDF}
.on-dark h3,.on-dark .eyebrow{color:var(--brass-lt)}
.on-dark .lede{color:#D3C8B2}
.on-dark .rule{background:var(--brass-lt)}

/* ---------- surfaces ---------- */
.cream{background:var(--cream)}
.sand{background:var(--sand)}
.grain{background-image:var(--grain);background-blend-mode:multiply}
.green{background:linear-gradient(155deg,var(--green-mid) 0%,var(--green) 45%,var(--green-dk) 100%)}
.brown{background:linear-gradient(155deg,#46332A 0%,var(--brown) 45%,var(--brown-dk) 100%)}

/* ---------- Mayfair Polo Estate logo ---------- */
.mpe{display:block;width:auto;height:72px}
.mpe-lg{height:clamp(84px,min(9vw,13vh),110px)}
.mpe-sm{height:60px}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head);
  background:rgba(243,236,221,.95);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);transition:box-shadow .35s ease;
}
header.is-scrolled{box-shadow:0 10px 30px rgba(15,32,24,.14)}
.bar{display:flex;align-items:center;gap:22px;height:100%}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;flex-shrink:0}
.brand-mpe{height:62px;width:auto}
nav{margin-left:auto;display:flex;gap:24px}
nav a{
  text-decoration:none;color:var(--muted);font-size:.74rem;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
nav a:hover,nav a:focus-visible{color:var(--green);border-bottom-color:var(--brass)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--green);background:transparent;color:var(--green);
  font-family:inherit;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:400;
  padding:13px 26px;cursor:pointer;text-decoration:none;
  transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.btn:hover,.btn:focus-visible{background:var(--green);color:#F3ECDD;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,32,24,.24)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--green);color:#F3ECDD}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--green-dk);border-color:var(--green-dk)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#1A130C}
.btn-brass:hover,.btn-brass:focus-visible{background:var(--brass-lt);border-color:var(--brass-lt);color:#1A130C}
.btn-ghost{border-color:rgba(243,236,221,.6);color:#F3ECDD}
.btn-ghost:hover,.btn-ghost:focus-visible{background:#F3ECDD;color:var(--green-dk);border-color:#F3ECDD}
.on-dark .btn{border-color:var(--brass-lt);color:var(--brass-lt)}
.on-dark .btn:hover,.on-dark .btn:focus-visible{background:var(--brass-lt);color:var(--green-dk)}
.on-dark .btn-brass{background:var(--brass);border-color:var(--brass);color:#1A130C}
.on-dark .btn-brass:hover,.on-dark .btn-brass:focus-visible{background:var(--brass-lt);border-color:var(--brass-lt)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.burger{
  display:none;width:44px;height:44px;padding:0;flex:0 0 auto;
  background:transparent;border:1px solid var(--line);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--green);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
body.menu-open .burger{background:var(--green);border-color:var(--green)}
body.menu-open .burger span{background:#F3ECDD}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:var(--head) 0 0 0;z-index:55;background:rgba(15,32,24,.45)}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- home banner ---------- */
/* fills the screen below the header; the art is cropped, never stretched, and the tagline strip at the bottom stays in frame */
.banner{margin-top:var(--head);padding:0;background:#0b0b0b;line-height:0;
  height:calc(100vh - var(--head) - var(--bar,0px));min-height:320px}
@supports (height:100svh){ .banner{height:calc(100svh - var(--head) - var(--bar,0px))} }
.banner a,.banner picture{display:block;height:100%}
/* 25% keeps both the "Representative Image" note (left) and the logo (right) in frame on wide screens */
.banner img{width:100%;height:100%;object-fit:cover;object-position:25% 100%}
/* portrait screens: only a slice of the art fits, so frame the Mayfair Polo Estate logo */
@media (orientation:portrait){ .banner img{object-position:96% 100%} }
/* phones: the portrait (1080x1920) mobile banner at its natural size, no crop */
@media (max-width:640px){
  .banner{height:auto;min-height:0}
  .banner a,.banner picture{height:auto}
  .banner img{height:auto;object-fit:initial}
}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;color:#F4ECDD;background:var(--green-dk);padding:0}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,26,19,.88) 0%,rgba(12,26,19,.66) 38%,rgba(12,26,19,.18) 70%,rgba(12,26,19,.05) 100%),
             linear-gradient(0deg,rgba(12,26,19,.55) 0%,rgba(12,26,19,0) 35%)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr minmax(330px,.7fr);gap:60px;align-items:center;padding-top:40px;padding-bottom:40px}
.hero-copy .mpe{margin-bottom:22px}
.hero-loc{font-size:.88rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--brass-lt);margin:0 0 12px;display:flex;align-items:center;gap:12px}
.hero-loc::before{content:"";width:34px;height:1.5px;background:currentColor}
.hero h1{color:#F7F0E2;max-width:15ch}
.hero-desc{max-width:48ch;color:#DDD3C1;margin:18px 0 0;font-size:clamp(1rem,1.3vw,1.08rem)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.chips li{border:1px solid rgba(216,194,154,.45);padding:6px 14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#EBDDC2;background:rgba(15,32,24,.35)}
.hero .tag{position:absolute;right:14px;bottom:12px;z-index:1}

/* ---------- lead card ---------- */
.lead-card{background:rgba(243,236,221,.97);color:var(--text);padding:28px 28px 22px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.32)}
.lead-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(169,133,81,.45);pointer-events:none}
.lead-card h2{font-size:1.5rem;margin:0 0 22px}
.lead-card .sub{margin:4px 0 16px;color:var(--muted);font-size:.9rem;line-height:1.5}

/* ---------- forms ---------- */
form{display:grid;gap:13px;position:relative}
label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=tel],input[type=email]{
  width:100%;padding:12px 14px;font-family:inherit;font-size:1rem;font-weight:400;
  background:#FFFDF8;border:1px solid rgba(30,59,44,.28);color:var(--text);border-radius:0;
}
input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,59,44,.12)}
input[aria-invalid=true]{border-color:#A3402A}
.tel{display:flex}
.tel select{flex:0 0 96px;width:96px;padding:0 22px 0 10px;border:1px solid rgba(30,59,44,.28);border-right:0;border-radius:0;font-family:inherit;font-size:.95rem;color:var(--muted);cursor:pointer;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a7a6a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 9px center}
.tel select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,59,44,.12)}
.tel input{min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
form .btn{width:100%;padding:14px 20px}
.consent{font-size:.72rem;line-height:1.45;color:var(--muted);margin:0}
.formerr{font-size:.85rem;color:#A3402A;margin:0}
.formerr:empty{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.on-dark label{color:var(--brass-lt)}
.on-dark input[type=text],.on-dark input[type=tel],.on-dark input[type=email]{background:rgba(255,250,240,.07);border-color:rgba(216,194,154,.4);color:#F6EEDF}
.on-dark input::placeholder{color:rgba(216,194,154,.55)}
.on-dark input:focus{border-color:var(--brass-lt);background:rgba(255,250,240,.12);box-shadow:none}
.on-dark .tel select{background-color:rgba(255,250,240,.1);border-color:rgba(216,194,154,.4);color:var(--brass-lt)}
.on-dark .tel select option{background:#1E3B2C;color:#F6EEDF}
.on-dark .consent{color:#C9BDA6}
.on-dark .formerr{color:#F2B8A2}

/* ---------- shots ---------- */
/* <picture> only picks the AVIF/WebP/JPG file; keep it out of the layout so img rules apply as before */
picture{display:contents}
.shot{position:relative;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.map{background:#E8E2D4}
.shot iframe{display:block;width:100%;height:100%;border:0}
.framed::after{content:"";position:absolute;inset:10px;border:1px solid rgba(243,236,221,.6);pointer-events:none}
.tag{position:absolute;right:12px;bottom:12px;color:#F4ECDD;text-shadow:0 1px 6px rgba(0,0,0,.7);
  font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;z-index:1}

/* ---------- two-column screens ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev>:first-child{order:2}
.fit-img{height:var(--fit);min-height:340px}
/* riverside trail: horse and rider sit at the left edge, so anchor the crop there */
#estate .shot img{object-position:12% 50%}
.fit-tall{height:var(--fit);min-height:380px;aspect-ratio:.82;max-width:100%;justify-self:center}

/* ---------- the design mind (architect) ---------- */
.dm-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:center}
.dm-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
  padding:clamp(40px,8vh,72px) 32px;border:1px solid rgba(169,133,81,.45);background:rgba(255,252,246,.55)}
.dm-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(169,133,81,.25);pointer-events:none}
/* HPAD logo, unframed */
.dm-mono{position:relative;flex:none;width:clamp(170px,30vh,230px);aspect-ratio:1}
.dm-mono img{width:100%;height:100%;object-fit:contain;padding:14px}
/* title line under the architect's name */
.dm-role{margin:10px 0 0;font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--brass-dk)}
.design-mind .lede+.lede{margin-top:14px}
.dm-quote{margin:26px 0 0;padding:4px 0 4px 20px;border-left:2px solid var(--brass);
  font-family:'Playfair Display',serif;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;color:var(--green)}

/* ---------- gallery rail ---------- */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.railnav{display:flex;gap:8px}
.railnav button{width:44px;height:44px;border:1px solid rgba(30,59,44,.4);background:transparent;color:var(--green);font-size:1.2rem;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.railnav button:hover{background:var(--green);color:#F3ECDD}
.rail{position:relative;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:30px;
  padding:0 max(28px,calc((100vw - var(--maxw))/2 + 28px));scroll-padding:0 max(28px,calc((100vw - var(--maxw))/2 + 28px))}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 min(560px,42vw,calc((var(--fit) - 90px) * 1.52));margin:0;scroll-snap-align:start;cursor:zoom-in}
.rail .shot{aspect-ratio:16/10.5}
.rail .shot img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rail figure:hover .shot img,.rail figure:focus-visible .shot img{transform:scale(1.045)}
.rail figcaption{margin-top:12px;font-family:'Playfair Display',serif;font-size:1.12rem;color:var(--green)}
.rail-dots{display:none}

/* ---------- amenities ---------- */
/* no tiles: icons and labels sit straight on the section, lifted by a soft shadow */
.amen{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:36px}
.amen div{padding:30px 16px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .3s ease}
.amen div:hover{transform:translateY(-3px)}
.amen svg{width:62px;height:62px;color:var(--green);filter:drop-shadow(0 2px 3px rgba(42,34,25,.22))}
.amen b{text-shadow:0 1px 3px rgba(42,34,25,.18)}
#amenities .eyebrow{text-shadow:0 1px 2px rgba(42,34,25,.15)}
/* solid icons from the Aaglod amenities artwork, all drawn at one scale */
.amen svg *{fill:currentColor;stroke:none}
.amen b{font-family:'Playfair Display',serif;font-weight:400;font-size:1.05rem;color:var(--green);line-height:1.3}
.amen-cta{display:flex;justify-content:center;margin-top:32px}

/* ---------- master plan (veiled until we have the lead) ---------- */
.plan-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:center}
.plan-wrap{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--sand);
  width:100%;max-width:calc(var(--fit) * 1.333);justify-self:center}
.plan-wrap img{width:100%;height:auto;transition:filter .6s ease,transform .6s ease}
/* heavier blur hides plot detail; the slight zoom keeps the blurred edges inside the frame */
#masterplan.is-locked .plan-wrap img{filter:blur(5px) saturate(.85);transform:scale(1.04)}
.plan-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(228,214,186,.25)}
#masterplan:not(.is-locked) .plan-veil{display:none}
.plan-lock{display:flex;flex-direction:column;align-items:center;gap:12px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}
.plan-lock-icon{width:58px;height:58px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(15,32,24,.35);transition:transform .25s ease}
.plan-lock-icon svg{width:20px;height:20px;fill:#F3ECDD}
.plan-lock:hover .plan-lock-icon,.plan-lock:focus-visible .plan-lock-icon{transform:translateY(-3px)}
/* no box behind the label: dark green text lifted off the map by a soft cream halo */
.plan-lock-label{color:var(--green-dk);font-size:.9rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:4px 0;
  text-shadow:0 0 6px rgba(243,236,221,.95),0 0 14px rgba(243,236,221,.9),0 0 24px rgba(243,236,221,.7)}
.plan-label{position:absolute;left:16px;bottom:14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
#masterplan.is-locked .when-open,#masterplan:not(.is-locked) .when-locked{display:none}

/* ---------- polo ---------- */
.polo-logo{display:block;width:84px;height:auto;margin:0 0 22px}
/* heading on the left, logo pushed to the right edge, so the section fits one screen */
.polo-head{display:flex;align-items:center;justify-content:space-between;gap:22px}
.polo-head .polo-logo{flex:none;order:2;width:72px;margin:0}
.polo-sub{margin:10px 0 0;font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--brass-lt)}
#polo .lede{font-size:clamp(.96rem,1.3vw,1.04rem);line-height:1.6}
#polo .rule{margin:14px 0 16px}
#polo .pstats{margin-top:22px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(216,194,154,.25);margin-top:30px;border:1px solid rgba(216,194,154,.25)}
.pstats div{background:var(--green-dp);padding:20px 18px;display:flex;flex-direction:column;gap:4px}
.pstats b{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);color:#F8F0E0;line-height:1.1}
.pstats div>span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt)}

/* ---------- location ---------- */
.map-cta{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px;
  background:rgba(15,32,24,.86);color:#F3ECDD;text-decoration:none;padding:11px 16px;transition:background .25s,transform .25s}
.map-cta:hover,.map-cta:focus-visible{background:var(--green);transform:translateY(-2px)}
.map-cta b{font-family:'Playfair Display',serif;font-weight:400;font-size:1rem}
.map-cta span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt)}
.vision{margin:0 0 12px;color:var(--muted);font-size:clamp(.96rem,1.3vw,1.04rem);line-height:1.6;max-width:64ch}
/* location carries more copy than other screens: tighter rhythm so it still fits one screen */
#location .rule{margin:12px 0 16px}
#location .places h3{margin:16px 0 6px}
#location .cta-row{margin-top:20px}
/* nearby places: bold green headings over simple bullet lists */
.places h3{margin:22px 0 10px;font-family:'Jost',sans-serif;font-size:1.12rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--green)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.tags li{position:relative;padding-left:14px;font-size:.92rem;line-height:1.45;color:var(--text)}
.tags li::before{content:"";position:absolute;left:0;top:.68em;width:4px;height:4px;border-radius:50%;background:var(--brass)}
/* tourist spots sit in two rows */
.tags-cols{display:grid;grid-template-columns:repeat(4,auto);grid-auto-flow:row;justify-content:start;column-gap:36px}

/* ---------- legacy (Mayfair Housing + S.A.R.A) ---------- */
.dev-top{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.dev-badge{display:flex;justify-content:center}
.dev-badge img{display:block;width:100%;max-width:320px;height:auto}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(216,194,154,.22);margin-top:clamp(32px,6vh,62px)}
.stats div{background:var(--brown);padding:clamp(20px,3.6vh,30px) 22px;display:flex;flex-direction:column;gap:6px}
.stats b{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.5rem,2.7vw,2.15rem);color:#F8F0E0;line-height:1.1;white-space:nowrap}
.stats div>span{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt);line-height:1.4}


/* ---------- 84 investments ---------- */
.ef-logo{height:clamp(70px,10vh,96px);width:auto;margin:4px 0 0}
.more-btn{display:none}

/* ---------- enquire ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-lines{margin-top:22px;display:grid;gap:8px;font-size:.95rem}
.contact-lines a{color:var(--brass-lt)}

/* ---------- footer ---------- */
footer{background:var(--green-dk);color:#C9BDA6;padding:34px 0;font-size:.9rem}
.disclaimer{margin:0;font-size:.72rem;line-height:1.65;color:#8E8572}

/* ---------- mobile bar ---------- */
.mobar{display:none}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(9,18,13,.95);display:flex;align-items:center;justify-content:center;padding:64px 80px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.lightbox.is-open{opacity:1;visibility:visible}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.lb-fig img{max-width:min(1400px,100%);max-height:78vh;width:auto;object-fit:contain;transition:opacity .2s ease}
.lb-fig img.is-swapping{opacity:0}
.lb-cap{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#EFE4CD;text-align:center}
.lb-btn{position:absolute;background:transparent;border:1px solid rgba(216,194,154,.45);color:#EFE4CD;cursor:pointer;font-family:inherit;line-height:1;transition:background .25s,color .25s}
.lb-btn:hover,.lb-btn:focus-visible{background:var(--brass-lt);color:var(--green-dk)}
.lb-close{top:22px;right:24px;width:44px;height:44px;font-size:1.5rem}
.lb-nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:1.4rem}
.lb-prev{left:20px}
.lb-next{right:20px}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:90;background:rgba(9,18,13,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.modal-overlay.is-open{opacity:1;visibility:visible}
.modal-card{width:min(460px,100%);max-height:92vh;overflow:auto;position:relative;
  background:var(--paper);transform:translateY(14px);transition:transform .3s ease;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.modal-overlay.is-open .modal-card{transform:translateY(0)}
.modal-body{padding:36px 32px 28px}
.modal-body h2{font-size:1.55rem;margin:0 40px 20px 0}
.modal-close{position:absolute;top:10px;right:12px;z-index:2;background:rgba(243,236,221,.9);border:0;color:var(--green);width:38px;height:38px;font-size:1.5rem;line-height:1;cursor:pointer}
body.modal-open{overflow:hidden}
body.modal-open .mobar{display:none}

/* ---------- motion ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  nav{gap:18px}
  nav a{font-size:.7rem;letter-spacing:.12em}
}
@media (max-width:1080px){
  .amen{grid-template-columns:repeat(3,1fr)}
  .hero-inner{grid-template-columns:1fr minmax(320px,.8fr);gap:40px}
}
@media (min-width:901px){
  .hero{min-height:calc(100vh - var(--head))}
  @supports (height:100svh){ .hero{min-height:calc(100svh - var(--head))} }
}
/* short laptop screens (e.g. 1366x768): tighten spacing so each section still fits one screen */
@media (min-width:901px) and (max-height:760px){
  :root{--fit:min(600px, calc(100vh - var(--head) - 80px))}
  @supports (height:100svh){ :root{--fit:min(600px, calc(100svh - var(--head) - 80px))} }
  .screen{padding:28px 0}
  .rule{margin:12px 0 14px}
  .eyebrow{margin-bottom:10px}
  .cta-row{margin-top:18px}
  .hero-inner{padding-top:22px;padding-bottom:22px}
  .hero-copy .mpe{margin-bottom:14px}
  .chips{margin-top:16px}
  .lead-card{padding:22px 24px 16px}
  .lead-card .sub{margin-bottom:10px}
  form{gap:10px}
  input[type=text],input[type=tel],input[type=email]{padding:10px 12px}
  .rail{margin-top:20px}
  .places h3{margin:12px 0 8px}
  .vision{margin-bottom:14px}
  .tags li{font-size:.88rem}
}
@media (max-width:900px){
  :root{--head:72px}
  section{padding:56px 0}
  .burger{display:flex}
  .bar>.btn{margin-left:auto}
  nav{
    position:fixed;top:var(--head);left:0;right:0;z-index:58;margin:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(15,32,24,.16);
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1),visibility .38s;
  }
  body.menu-open nav{max-height:80vh;overflow-y:auto;visibility:visible}
  nav a{padding:17px 28px;border-bottom:1px solid var(--line);font-size:.8rem}
  .brand-mpe{height:54px}
  .hero{display:block;padding:0}
  .hero::after{background:linear-gradient(0deg,rgba(12,26,19,.96) 0%,rgba(12,26,19,.82) 45%,rgba(12,26,19,.35) 75%,rgba(12,26,19,.15) 100%)}
  .hero-bg{height:480px;bottom:auto}
  .hero-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(0deg,var(--green-dk),transparent)}
  .hero .hero-inner{grid-template-columns:1fr;gap:30px;padding-top:150px;padding-bottom:40px}
  .hero .tag{top:12px;bottom:auto}
  .hero-desc[aria-hidden=true]{display:none}
  .split,.plan-grid,.form-grid,.dev-top,.dm-grid{grid-template-columns:1fr;gap:32px}
  .dm-grid{align-items:stretch}
  .dm-card{padding:24px 26px}
  .dm-mono{width:120px}
  .dm-mono img{padding:10px}
  .split.rev>:first-child{order:0}
  .fit-img,.fit-tall{height:auto;min-height:0;aspect-ratio:4/3;width:100%}
  .plan-wrap{max-width:none}
  .rail figure{flex-basis:min(560px,70vw)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:48px 0}
  .bar>.btn{display:none}
  .burger{margin-left:auto}
  .brand{gap:12px}
  .brand-mpe{height:50px}
  .row2{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr 1fr;margin-top:26px}
  .amen div{padding:22px 12px 18px}
  .amen div:last-child{grid-column:1/-1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div{padding:16px 14px}
  .stats b{font-size:1.35rem}
  .lead-card{padding:24px 18px 18px}
  .cta-row .btn{flex:1 1 auto}
  .rail{padding:0 18px;scroll-padding:0 18px;gap:14px;margin-top:22px}
  .rail figure{flex-basis:84vw}
  .railnav{display:none}
  .lightbox{padding:60px 12px}
  .lb-nav{top:auto;bottom:20px;transform:none}
  .lb-prev{left:28%}
  .lb-next{right:28%}
  .modal-body{padding:26px 20px 20px}
  body{padding-bottom:58px}
  .mobar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0 0;z-index:70;background:var(--green-dk);border-top:1px solid rgba(216,194,154,.3)}
  .mobar a,.mobar button{font-family:inherit;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:18px 6px;text-align:center;text-decoration:none;
    color:#EFE4CD;background:none;border:0;border-left:1px solid rgba(216,194,154,.22);cursor:pointer}
  .mobar>:first-child{border-left:0}
  .mobar .mobar-main{background:var(--brass);color:#1A130C;font-weight:500}

  /* --- mobile polish --- */
  h2{font-size:1.72rem}
  .rule{margin:14px 0 18px}
  .eyebrow{font-size:.74rem;letter-spacing:.2em;gap:10px}
  .eyebrow::before,.center .eyebrow::after{flex-basis:24px}
  .hero-loc{font-size:.78rem;letter-spacing:.2em}
  .cta-row{margin-top:22px}

  /* hero: tighter stack, the form follows straight after the headline */
  .hero-bg{height:420px}
  .hero .hero-inner{padding-top:120px;padding-bottom:28px;gap:24px}
  .hero-copy .mpe{margin-bottom:16px}
  .mpe-lg{height:84px}
  .hero h1{font-size:2.05rem}
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .chips li{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 8px;font-size:.64rem;letter-spacing:.09em;line-height:1.35}
  .hero .cta-row{display:none}
  .lead-card h2{font-size:1.4rem;margin-bottom:18px}

  /* gallery */
  .rail figcaption{font-size:1.02rem;margin-top:10px}
  .rail-dots{display:flex;justify-content:center;gap:2px;margin-top:14px}
  .rail-dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .rail-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(30,59,44,.25);transition:background .25s,width .25s}
  .rail-dots button.is-active::before{width:20px;border-radius:4px;background:var(--brass)}

  /* amenities */
  .amen b{font-size:.98rem}
  .amen svg{width:46px;height:46px}

  /* master plan: the veil itself is the unlock button */
  #masterplan.is-locked .cta-row{display:none}
  .plan-lock{position:absolute;inset:0;justify-content:center}
  .plan-lock-label{font-size:.78rem;letter-spacing:.16em}

  /* polo: keep the rider's head in frame, give the stats room */
  #polo .shot img{object-position:50% 18%}
  .polo-head .polo-logo{width:56px}
  .pstats{margin-top:24px}
  .pstats div{padding:16px 8px;align-items:center;text-align:center}
  .pstats b{font-size:1.75rem}
  .pstats div>span{font-size:.6rem;letter-spacing:.1em;line-height:1.4}

  /* location */
  .vision{font-size:.98rem}
  .tags{gap:4px 22px}
  .tags li{font-size:.88rem}
  .places h3{font-size:1.02rem}
  /* phones: tourist spots in two columns, filled row by row */
  .tags-cols{grid-template-columns:repeat(2,auto);grid-template-rows:none;grid-auto-flow:row;column-gap:28px}
  .tags-cols li:nth-child(n){grid-column:auto;grid-row:auto}

  /* legacy */
  .dev-top{gap:26px}
  .dev-badge{justify-content:flex-start}
  .dev-badge img{max-width:210px}
  .stats{margin-top:28px}

  /* 84 investments: decorative image, keep it short */
  .split.rev .fit-tall{aspect-ratio:16/10}
  .ef-logo{height:72px}

  /* enquire */
  #enquire .mpe-lg{height:72px;margin-bottom:18px!important}

  footer{padding:28px 0 22px}

  /* sticky bar: safe-area aware, steps aside while a lead form is on screen */
  .mobar{padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px rgba(15,32,24,.22);transition:transform .3s ease}
  body.form-in-view .mobar{transform:translateY(110%)}

  /* enquiry popup becomes a bottom sheet */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-height:88vh;border-radius:16px 16px 0 0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .modal-card::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:rgba(30,59,44,.22);margin:10px auto 0}
  .modal-overlay.is-open .modal-card{transform:none}
  .modal-body{padding:18px 20px 22px}
  .modal-close{top:14px}
}
@media (max-width:360px){
  .wrap{padding:0 16px}
  .hero h1{font-size:1.8rem}
  h2{font-size:1.55rem}
  .chips li{font-size:.6rem;letter-spacing:.06em}
  .mobar a,.mobar button{letter-spacing:.08em;font-size:.7rem}
}

/* ============================================================
   One section = one screen on phones & portrait tablets.
   --screen is the visible height between the fixed header and the
   sticky bar. Each section is at least that tall; its main image
   soaks up whatever height the copy leaves, so the copy is never
   cut and the image is never taller than the room left over.
   Landscape phones (short screens) keep the normal stacked flow.
   ============================================================ */
@media (max-width:900px) and (min-height:560px){
  :root{--bar:0px;--screen:calc(100vh - var(--head) - var(--bar))}
  @supports (height:100svh){ :root{--screen:calc(100svh - var(--head) - var(--bar))} }

  .screen{min-height:var(--screen);display:flex;flex-direction:column;justify-content:center;padding:28px 0}
  .screen>.wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}

  /* image + copy screens: the image fills the leftover height */
  .screen .split{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .screen .split>.shot{flex:1 1 0;height:auto;min-height:170px;aspect-ratio:auto;width:100%}
  .screen .split>.shot img{position:absolute;inset:0}
  .screen .split>.shot iframe{position:absolute;inset:0}
  .split.rev .fit-tall{aspect-ratio:auto}

  /* gallery: one tall card per screen */
  #gallery>.wrap{flex:none;flex-direction:row;justify-content:space-between}
  #gallery .rail .shot{aspect-ratio:auto;height:clamp(220px,calc(var(--screen) - 270px),110vw)}

  /* amenities: no tiles, so keep the group compact and centred */
  .amen{row-gap:18px}
  .amen div{justify-content:center}

  /* hero: background art on top, headline + form below, all on one screen */
  .hero{display:flex;flex-direction:column;min-height:calc(var(--screen) + var(--bar))}
  .hero-bg{height:62%}
  .hero .hero-inner{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;padding-top:40px;padding-bottom:28px}
}

@media (max-width:640px) and (min-height:560px){
  :root{--head:64px;--bar:51px}
  .brand-mpe{height:48px}
  .mobar a,.mobar button{padding:16px 6px}

  .screen{padding:24px 0}
  h2{font-size:1.5rem}
  .eyebrow{margin-bottom:8px}
  .rule{margin:12px 0 14px}
  .lede{font-size:.95rem;line-height:1.55}
  .cta-row{margin-top:16px}
  .cta-row .btn{padding:12px 20px}
  .m-hide{display:none}

  /* lead forms on the page: placeholders carry the field names */
  .hero form label,#enquire form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero form,#enquire form{gap:10px}
  .hero input[type=text],.hero input[type=tel],.hero input[type=email],
  #enquire input[type=text],#enquire input[type=tel],#enquire input[type=email]{padding:11px 13px}
  .hero form .btn,#enquire form .btn{padding:13px 20px}
  .hero .consent,#enquire .consent{font-size:.66rem;line-height:1.4}

  /* hero */
  .hero .hero-inner{padding-top:24px;padding-bottom:20px;gap:18px}
  .hero-copy .mpe{display:none}
  .hero-loc{margin-bottom:8px}
  .hero h1{font-size:1.8rem}
  .chips{margin-top:14px;gap:6px}
  .chips li{padding:7px 6px}
  .lead-card{padding:18px 18px 14px}
  .lead-card::before{inset:5px}
  .lead-card h2{font-size:1.25rem;margin-bottom:12px}

  /* the design mind */
  .dm-card{padding:16px 18px}
  .dm-mono{width:96px}
  .dm-mono img{padding:8px}
  .dm-role{font-size:.68rem;letter-spacing:.14em;margin-top:6px}
  .dm-quote{margin-top:16px;font-size:1.08rem;padding-left:16px}

  /* gallery */
  .rail{margin-top:18px}
  #gallery .rail .shot{height:clamp(220px,calc(var(--screen) - 200px),110vw)}

  /* amenities: compact tiles, the last one runs full width */
  .amen{margin-top:20px}
  .amen div{padding:14px 10px;gap:8px}
  .amen svg{width:38px;height:38px}
  .amen b{font-size:.92rem}
  .amen div:last-child{flex-direction:row;gap:14px}
  .amen-cta{margin-top:18px}

  /* polo: logo sits beside the heading */
  .polo-head{display:flex;align-items:center;gap:14px}
  .polo-logo{width:44px;margin:0}
  .pstats{margin-top:18px}
  .pstats div{padding:12px 8px}
  .pstats b{font-size:1.5rem}

  /* location: compact bullet lists */
  .vision{font-size:.92rem;line-height:1.55;margin-bottom:12px}
  .places h3{margin:12px 0 6px}
  .tags li{font-size:.86rem}

  /* legacy: logo first, tighter stat tiles */
  .dev-top{gap:14px}
  .dev-badge{order:-1}
  .dev-badge img{max-width:170px}
  .stats{margin-top:20px}
  .stats div{padding:12px 14px;gap:2px}
  .stats b{font-size:1.25rem}
  .stats div>span{font-size:.64rem;letter-spacing:.12em}

  /* 84 investments: second paragraph behind "Read more" */
  .ef-logo{height:60px}
  .more-text{display:none}
  .more-text.is-open{display:block}
  .more-btn{display:inline-block;margin-top:10px;padding:4px 0;border:0;border-bottom:1px solid var(--brass);background:none;cursor:pointer;
    font-family:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}

  /* enquire */
  #enquire .mpe-lg{height:56px;margin-bottom:14px!important}
  .form-grid{gap:20px}
}

/* shorter phones (e.g. iPhone SE, small Androids): tighten a notch more */
@media (max-width:640px) and (min-height:560px) and (max-height:700px){
  .screen{padding:18px 0}
  h2{font-size:1.38rem}
  .rule{margin:10px 0 12px}
  .screen .split{gap:16px}
  .screen .split>.shot{min-height:140px}
  .lede,.vision{font-size:.9rem;line-height:1.5}
  .hero h1{font-size:1.6rem}
  .hero-loc{display:none}
  .lead-card h2{font-size:1.15rem;margin-bottom:10px}
  .pstats b{font-size:1.3rem}
  .stats div{padding:9px 12px}
  .amen{margin-top:16px}
  .amen div{padding:10px 8px;gap:6px}
  .amen svg{width:30px;height:30px}
  .amen b{font-size:.86rem}
  .amen-cta{margin-top:14px}
  #location .split>.shot{min-height:110px}
  .vision{margin-bottom:8px}
  .places h3{margin:8px 0 5px}
  .tags li{font-size:.82rem}
}