/* Bay Estate — off-plan template V2. Layered on style.css tokens. LOCAL PREVIEW. */
:root{--green:#354b41;--sand:#e5ddcf;--sand-2:#e7dfd1;--brown-dark:#5d421f}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footnote{font-size:11px;line-height:1.6;color:var(--muted);max-width:760px;margin-top:18px}
.section-intro{max-width:640px;font-size:16px;margin:-16px 0 8px}

/* preview flag + EOI strip */
.local-preview-flag{background:#1f2621;color:#f1ece3;font-size:10px;letter-spacing:1.6px;text-align:center;padding:7px 16px}
.eoi-strip{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:10px var(--gutter);background:var(--sand-2);font-size:12px;color:var(--ink);border-bottom:1px solid var(--line)}
.eoi-strip a{color:var(--brown);border-bottom:1px solid var(--brown);padding-bottom:1px}

/* header */
#site-header nav{gap:26px}
.header-cta{margin-left:8px;white-space:nowrap}
@media(max-width:1180px){.header-cta{display:none}}

/* hero intro */
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.hero-actions .text-cta{margin-top:6px;min-width:190px}
.hero-intro h1 span{max-width:620px}

/* key facts */
.keyfacts{max-width:1600px;margin:auto;padding:30px var(--gutter) 26px;border-bottom:1px solid var(--line)}
.keyfacts dl{display:grid;grid-template-columns:repeat(5,1fr);margin:0}
.keyfacts dl>div{padding:4px 22px;border-left:1px solid var(--line)}
.keyfacts dl>div:first-child{border-left:0;padding-left:0}
.keyfacts dt{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.keyfacts dd{margin:0}
.keyfacts strong{display:block;font:400 30px/1.15 var(--serif);color:var(--brown);letter-spacing:-.3px}
.keyfacts dd span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.keyfacts .footnote{margin-top:22px;font-size:10px}

/* overview */
.collections-trio{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:640px}
.collections-trio li{border-top:1px solid var(--brown);padding-top:14px}
.collections-trio h3{font-size:24px;margin-bottom:6px}
.collections-trio p{font-size:13px;line-height:1.55}

/* residences */
.residence-panel.v2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.residence-panel.v2>a.residence-media img{height:100%;min-height:560px;max-height:720px}
.residence-specs{display:grid;gap:16px}
.residence-lede{font-size:15px;color:var(--ink);max-width:520px;margin-bottom:6px}
.spec-card{background:var(--paper);border:1px solid var(--line);padding:24px 26px}
.spec-card .eyebrow{margin-bottom:8px;font-size:9px}
.spec-card h3{font-size:26px;margin-bottom:14px}
.spec-price{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-block:1px solid var(--line);padding:12px 0;margin-bottom:14px;font:400 28px/1.1 var(--serif);color:var(--brown)}
.spec-price span{font:11px/1.4 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.spec-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0}
.spec-card dt{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.spec-card dd{margin:2px 0 0;font-size:15px;color:var(--ink)}
.residence-specs>.button{justify-self:start;margin-top:4px}

/* price table */
.prices{border-top:1px solid var(--line)}
.prices-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.prices-head h2{margin:0}
.prices-head>p{max-width:380px;font-size:14px}
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
.price-table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.price-table th,.price-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.price-table thead th{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:400;color:var(--muted);background:#f6f2ea}
.price-table tbody th{font:400 19px/1.3 var(--serif);color:var(--brown)}
.price-table td.num{font:400 22px/1.2 var(--serif);color:var(--brown)}
.price-table td.num.muted{font:13px/1.4 var(--sans);color:var(--muted)}
.price-table td a{font-size:12px;color:var(--brown);border-bottom:1px solid currentColor;padding-bottom:2px}
.price-table tbody tr:hover{background:#faf7f1}
.price-table tr.plot-row th{font-size:17px}
.price-table tbody tr:last-child>*{border-bottom:0}
.prices>.button{margin-top:26px}

/* plots */
.plots{max-width:none;background:var(--green);color:var(--cream);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,6vw,96px);padding-inline:max(var(--gutter),calc((100vw - 1424px)/2))}
.plots .eyebrow{color:#d0c3aa}
.plots h2{color:var(--cream)}
.plots p{color:#e3e5dc}
.plots-intro p:not(.eyebrow){margin-top:22px;max-width:440px;font-size:15px}
.plot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plot-card{border:1px solid rgba(241,236,227,.28);padding:26px}
.plot-card .eyebrow{font-size:9px;margin-bottom:8px}
.plot-card h3{color:var(--cream);font-size:28px;margin-bottom:16px}
.plot-card dl{margin:0;display:grid;gap:12px}
.plot-card dl>div{display:flex;justify-content:space-between;gap:14px;border-top:1px solid rgba(241,236,227,.18);padding-top:10px}
.plot-card dt{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#cfd3c7}
.plot-card dd{margin:0;font-size:14px;text-align:right}
.plot-build{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px clamp(40px,6vw,96px);border-top:1px solid rgba(241,236,227,.22);padding-top:34px}
.plot-build h3{color:var(--cream);font-size:28px}
.plot-build ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;grid-row:1/3;grid-column:2}
.plot-build li{font-size:14px;color:#e3e5dc;padding-left:18px;position:relative}
.plot-build li:before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:#d0c3aa}
.plot-build .footnote{color:#bfc4b8;margin-top:0;grid-column:1}
.plot-build .button{grid-column:1;justify-self:start}

/* payment */
.payment-v2{border-top:1px solid var(--line)}
.payment-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:12px}
.payment-head h2{margin:0}
.payment-head>p{max-width:420px;font-size:14px}
.plan-tabs{display:flex;gap:35px;border-bottom:1px solid #bdb39f;margin:28px 0 30px}
.plan-tabs button{padding:16px 2px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);font-size:14px}
.plan-tabs button[aria-selected=true]{color:var(--brown);border-bottom-color:var(--brown)}
.plan-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:24px}
.plan-summary>div{padding:0 22px;border-left:1px solid var(--line)}
.plan-summary>div:first-child{padding-left:0;border-left:0}
.plan-summary strong{display:block;font:400 clamp(34px,3.4vw,48px)/1.05 var(--serif);color:var(--brown)}
.plan-summary span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.plan-bar{display:flex;height:44px;gap:3px;margin-bottom:30px}
.plan-bar span{display:flex;align-items:center;justify-content:center;background:#c9b48f;color:#3b2b14;font-size:11px;min-width:0}
.plan-bar span:first-child{background:var(--brown);color:#fff}
.plan-bar span:last-child{background:var(--green);color:#fff}
#plan-1 .plan-bar span:last-child{background:#c9b48f;color:#3b2b14}
.plan-bar b{font-weight:400}
.plan-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.plan-steps li{display:grid;gap:4px;padding:18px 20px 18px 0;border-bottom:1px solid var(--line)}
.plan-steps .pct{font:400 26px/1.1 var(--serif);color:var(--brown)}
.plan-steps .step{font-size:13px;color:var(--ink)}
.plan-steps .date{font-size:12px;color:var(--muted)}
.payment-v2>.button{margin-top:26px}

/* EOI */
.eoi{max-width:none;background:var(--sand);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px clamp(40px,6vw,96px);padding-inline:max(var(--gutter),calc((100vw - 1424px)/2))}
.eoi-head{align-self:start;position:sticky;top:120px}
.eoi-head h2{margin-bottom:18px}
.eoi-head p:not(.eyebrow){font-size:15px;max-width:420px;margin-bottom:24px}
.eoi-head .button.light{background:var(--brown);border-color:var(--brown);color:#fff}
.eoi-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.eoi-steps li{border-top:1px solid #c8bca6;padding:22px 0 26px}
.eoi-steps .n{font-size:10px;letter-spacing:1.6px;color:var(--brown)}
.eoi-steps h3{font-size:24px;margin:8px 0 8px}
.eoi-steps p{font-size:14px}

/* floor plans */
.plan-grid.three{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.plan-grid.three .plan-request>div{display:grid;gap:6px;justify-items:start}
.plan-grid.three .plan-request .eyebrow{margin:0;font-size:9px}
.plan-grid.three .plan-request h3{font-size:24px;margin-bottom:12px}

/* gallery */
.sitelink-gallery-grid.four{grid-template-columns:1.4fr 1fr;grid-auto-rows:auto;gap:18px}
.sitelink-gallery-grid.four img:first-child{grid-row:span 2;height:100%;aspect-ratio:auto}

/* masterplan */
.masterplan{border-top:1px solid var(--line)}
.masterplan-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px clamp(40px,6vw,96px);align-items:end;margin-bottom:34px}
.masterplan-head .eyebrow{grid-column:1/-1;margin:0}
.masterplan-head h2{margin:0}
.masterplan-head p:not(.eyebrow){font-size:15px;max-width:620px}
.masterplan-head strong{font-weight:400;color:var(--brown)}
.masterplan-map{margin:0;background:#ede7dc;border:1px solid var(--line)}
.masterplan-map img{width:100%;height:auto}
.masterplan-foot{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:24px}
.experience-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.experience-list li{font-size:12px;border:1px solid var(--line);padding:7px 12px;background:var(--paper)}
.masterplan-foot .text-cta{margin:0;flex-shrink:0}

/* amenities */
.amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 36px;max-width:1600px;margin:auto;padding:40px var(--gutter) 0}
.amenity-grid>div{border-top:1px solid #c8bca6;padding-top:16px}
.amenity-grid h3{font-size:22px;margin-bottom:6px}
.amenity-grid p{font-size:13px}
.lifestyle>.footnote.amen{margin:24px var(--gutter) 0}

/* location */
.location.v2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:stretch}
.location.v2 .section-photo{grid-column:auto;grid-row:auto;height:100%;min-height:520px;aspect-ratio:auto;object-position:48% center}
.location-body h2{margin-bottom:16px}
.location-body>p:not(.eyebrow):not(.footnote){font-size:15px;max-width:480px}
.drive-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.drive-list li{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding:13px 0}
.drive-list strong{font:400 30px/1 var(--serif);color:var(--brown);min-width:64px}
.drive-list small{font:11px var(--sans);color:var(--muted);margin-left:3px}
.drive-list span{font-size:13px;color:var(--ink)}

/* developer */
.developer.v2{display:flex;align-items:center;justify-content:center;gap:clamp(30px,5vw,80px);text-align:left}
.developer.v2 img{margin:0;max-width:300px}
.developer.v2 .eyebrow{margin-bottom:8px}
.dev-copy{max-width:520px;font-size:15px;color:var(--ink)}

/* materials + closing */
.materials>p:not(.eyebrow){max-width:520px;margin:0 auto 34px!important}
.material-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:left;max-width:1300px;margin:0 auto 36px}
.material{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);padding:22px;transition:border-color .2s,transform .2s}
.material:hover{border-color:var(--brown);transform:translateY(-2px)}
.material h3{font-size:22px}
.material p{font-size:12px;flex:1}
.material span{font-size:12px;color:var(--brown);margin-top:10px}
.material i{font-style:normal}
.closing-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.closing-actions .button.form-whatsapp{width:auto;min-width:240px}

/* responsive */
@media(max-width:1100px){
 .keyfacts dl{grid-template-columns:repeat(3,1fr);row-gap:22px}
 .keyfacts dl>div:nth-child(4){border-left:0;padding-left:0}
 .plan-steps{grid-template-columns:repeat(2,1fr)}
 .amenity-grid{grid-template-columns:repeat(3,1fr)}
 .material-grid{grid-template-columns:repeat(3,1fr)}
 .plots,.eoi{grid-template-columns:1fr}
 .plot-build{grid-template-columns:1fr}
 .plot-build ul{grid-row:auto;grid-column:auto}
 .plot-build .footnote,.plot-build .button{grid-column:auto}
 .eoi-head{position:static}
}
@media(max-width:760px){
 .hero-intro{flex-direction:column;align-items:flex-start}
 .hero-actions{display:none}
 .keyfacts{padding-block:22px}
 .keyfacts dl{grid-template-columns:1fr 1fr;gap:18px 0}
 .keyfacts dl>div{padding:0 14px;border-left:1px solid var(--line)}
 .keyfacts dl>div:nth-child(odd){border-left:0;padding-left:0}
 .keyfacts dl>div:last-child{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
 .keyfacts strong{font-size:24px}
 .collections-trio{grid-template-columns:1fr;gap:14px}
 .residence-panel.v2{grid-template-columns:1fr}
 .residence-panel.v2>a.residence-media img{min-height:0;height:260px}
 .spec-card{padding:20px}
 .spec-card h3{font-size:23px}
 .residence-tabs{gap:22px;overflow-x:auto}
 .residence-tabs button{white-space:nowrap}
 .prices-head,.payment-head{flex-direction:column;align-items:flex-start;gap:14px}
 .price-table{min-width:640px}
 .price-table th,.price-table td{padding:14px 14px}
 .price-table tbody th{position:sticky;left:0;background:var(--paper);white-space:normal;min-width:150px;font-size:16px}
 .plot-grid{grid-template-columns:1fr}
 .plot-build ul{grid-template-columns:1fr}
 .plan-tabs{gap:22px;overflow-x:auto}
 .plan-tabs button{white-space:nowrap}
 .plan-summary strong{font-size:30px}
 .plan-summary>div{padding:0 12px}
 .plan-bar{height:36px}
 .plan-bar b{display:none}
 .plan-steps{grid-template-columns:1fr}
 .plan-steps li{grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:14px;padding:14px 0}
 .plan-steps .pct{grid-row:1/3;font-size:24px}
 .eoi-steps{grid-template-columns:1fr}
 .plan-grid.three{grid-template-columns:1fr}
 .sitelink-gallery-grid.four{grid-template-columns:1fr}
 .sitelink-gallery-grid.four img:first-child{grid-row:auto;aspect-ratio:1.6}
 .masterplan-head{grid-template-columns:1fr}
 .masterplan-foot{flex-direction:column;align-items:flex-start}
 .amenity-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
 .amenity-grid h3{font-size:19px}
 .location.v2{grid-template-columns:1fr}
 .location.v2 .section-photo{min-height:0;aspect-ratio:1.6}
 .drive-list{grid-template-columns:1fr}
 .developer.v2{flex-direction:column;text-align:center}
 .material-grid{grid-template-columns:1fr 1fr}
 .material-grid .material:last-child{grid-column:1/-1}
 .closing-actions{flex-direction:column}
 .closing-actions .button{width:100%;justify-content:center}
}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:14px;font-size:12px;letter-spacing:.4px;color:var(--brown)}
.hero-facts span:not(:last-child):after{content:'·';margin:0 10px;color:var(--line)}
@media(max-width:760px){.hero-facts{font-size:11px}}
@media(max-width:760px){
 .collection>.section-intro,.residence-specs{margin-left:22px;margin-right:22px}
 .collection .residence-tabs{grid-template-columns:repeat(3,1fr);overflow:visible}
 .collection .residence-tabs button{white-space:normal}
 .residence-panel.v2{gap:22px}
}
@media(max-width:760px){
 .price-table{min-width:0}
 .price-table th:nth-child(2),.price-table th:nth-child(3),.price-table th:nth-child(4),.price-table td:nth-child(2),.price-table td:nth-child(3),.price-table td:nth-child(4){display:none}
 .price-table tbody th{position:static;min-width:0}
 .price-table td.num{white-space:nowrap;font-size:20px}
 .price-table td:last-child{text-align:right}
}
/* location v2 layout fix: picture is display:contents in base css */
.location.v2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.location.v2 .location-banner{grid-column:1/-1;grid-row:1;width:100%;height:auto;min-height:0;aspect-ratio:4/1;object-fit:cover}
.location.v2 .location-body{grid-column:1;grid-row:2}
.location.v2 .location-drives{grid-column:2;grid-row:2}
.location.v2 .drive-list{margin-top:0}
@media(max-width:760px){.location.v2{grid-template-columns:1fr;gap:26px}.location.v2 .location-banner{aspect-ratio:2.4/1}.location.v2 .location-body,.location.v2 .location-drives{grid-column:1;grid-row:auto}}
/* round 2 (design review): 12px minimum, AA contrast on sand bands */
.footnote,.keyfacts .footnote{font-size:12px}
.eoi p,.lifestyle p,.amenity-grid p,.plan-request p{color:#55564d}
.local-preview-flag{font-size:11px}