/* ============================================================
   MISTY HILLS 2026 v2 - reference-accurate design system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{
  --green:#0E362B; --green-2:#164D3D; --teal:#32BDB7; --orange:#FFAA47;
  --gold:#C9A25A; --cream:#EFE4CC; --cream-2:#F6EFDF; --mist:#E0FFFE;
  --offwhite:#F5FBFF; --grey:#FAFAFA; --line:#E7E0D2; --text:#1c1c1c; --muted:#6b6b6b;
  --font-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-body:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --container:1240px; --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.75;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,picture,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
p{margin:0 0 1em}
main{overflow-x:hidden}

/* ---------- typography ---------- */
.h2-serif{font-family:var(--font-serif);font-weight:500;font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-.5px;margin:0}
.h3-serif{font-family:var(--font-serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.3px;margin:0}
.eyebrow{font-weight:600;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin:0 0 16px;display:flex;align-items:center;gap:8px}
.text-center .eyebrow{justify-content:center}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--gold)}
.eyebrow-gold{color:var(--gold)}
.lead{font-weight:300;font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--text)}
.text-green{color:var(--green)!important}.text-white{color:#fff!important}
.text-cream{color:var(--cream)!important}.text-gold{color:var(--gold)!important}.text-teal{color:var(--teal)!important}
.text-center{text-align:center}.text-left{text-align:left}
.mh-accent-word{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--gold)}
.rule-gold{display:block;width:56px;height:1px;background:var(--gold);margin:20px 0}
.rule-center{margin-left:auto;margin-right:auto}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 28px}
.section{padding:clamp(64px,8vw,120px) 0;display:flow-root}
.bg-white{background:#fff}.bg-cream{background:var(--cream)}.bg-offwhite{background:var(--offwhite)}
.bg-green{background:var(--green);color:var(--cream)}
.sec-head{margin-bottom:56px}
.sec-head.text-left{margin-bottom:44px}

/* ---------- icons ---------- */
.mh-icon{display:inline-block;vertical-align:middle}
.mh-icon-inline{display:inline-block;vertical-align:-3px;margin:0 2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;padding:16px 34px;border:1px solid transparent;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--orange);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-ghost-dark{background:transparent;color:var(--green);border-color:var(--green)}
.btn-ghost-dark:hover{background:var(--green);color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--green);padding-bottom:5px;border-bottom:1px solid var(--green);transition:opacity .3s}
.link-arrow::after{content:"→"}
.link-arrow:hover{opacity:.6}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(14,54,43,.08);transform:translateZ(0)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--container);margin:0 auto;padding:10px 28px}
.logo-img{height:88px;width:auto;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:26px}
.site-header nav a{font-weight:500;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--green);transition:color .3s}
.site-header nav a:hover,.site-header nav a.active{color:var(--teal)}
.lang-switch{display:flex;gap:7px;align-items:center;font-weight:600;font-size:11px;letter-spacing:.5px}
.lang-switch a{color:var(--muted)}.lang-switch a.active{color:var(--green)}.lang-switch span{color:var(--line)}
.header-cta{background:var(--green);color:#fff;padding:12px 22px;font-weight:600;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:0;transition:background .3s}
.header-cta:hover{background:var(--orange)}
.mobile-toggle{display:none;background:none;border:0;font-size:24px;color:var(--green)}
@media(max-width:1080px){.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:20px 28px;gap:18px;border-bottom:1px solid rgba(14,54,43,.08)}.site-header nav.open{display:flex}.header-cta{display:none}.mobile-toggle{display:block}}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;background-size:cover;background-position:center;color:#fff;padding:clamp(80px,10vw,140px) 0}
.hero-inner{max-width:var(--container);margin:0 auto;padding:0 28px;width:100%}
.hero-left .hero-inner{text-align:left}
.hero-center .hero-inner{text-align:center;max-width:900px}
.hero-kicker{font-weight:500;font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 22px}
.hero-h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(40px,7vw,104px);line-height:.98;letter-spacing:-1.5px;margin:0;max-width:15ch}
.hero-center .hero-h1{margin:0 auto}
.hero-sub{font-weight:300;font-size:clamp(15px,1.7vw,19px);line-height:1.6;color:rgba(255,255,255,.92);max-width:560px;margin:24px 0 0}
.hero-center .hero-sub{margin:24px auto 0}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-center .hero-ctas{justify-content:center}

/* ---------- usp strip ---------- */
.usp-strip{padding:8px 0}
.usp-inner{max-width:var(--container);margin:0 auto;padding:26px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.usp-cell{flex:1;min-width:150px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--cream);position:relative}
.usp-cell .mh-icon{color:var(--gold)}
.usp-cell span{font-family:var(--font-serif);font-size:16px;font-weight:500;line-height:1.25;color:#fff}
.usp-cell:not(:last-child)::after{content:"";position:absolute;right:-10px;top:10%;height:80%;width:1px;background:rgba(255,255,255,.14)}
@media(max-width:760px){.usp-cell{flex:1 1 40%}.usp-cell::after{display:none}}

/* ---------- stats band ---------- */
.stats-inner{max-width:var(--container);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px}
.stat-cell{flex:1;min-width:150px;text-align:center}
.stat-ico{color:var(--gold);margin-bottom:14px;display:flex;justify-content:center}
.stat-ico .mh-icon{width:42px;height:42px}
.stat-num{font-family:var(--font-serif);font-weight:500;font-size:clamp(34px,4vw,52px);line-height:1;color:#fff;letter-spacing:-1px}
.stat-label{font-weight:400;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(239,228,204,.7);margin-top:12px}
@media(max-width:760px){.stat-cell{flex:1 1 40%}}

/* ---------- property type cards ---------- */
.prop-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.prop-card{background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(14,54,43,.06);transition:transform .4s var(--ease)}
.prop-card:hover{transform:translateY(-6px)}
.pc-img{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}
.pc-tag{position:absolute;top:16px;left:16px;background:var(--gold);color:#fff;font-weight:600;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:7px 12px}
.pc-body{padding:30px 28px 34px}
.pc-ico{width:52px;height:52px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--green);margin:-56px 0 18px;position:relative;border:4px solid #fff}
.pc-kicker{font-weight:600;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.pc-text{font-size:15px;line-height:1.65;color:var(--muted);margin:14px 0 22px}
@media(max-width:900px){.prop-cards{grid-template-columns:1fr}}

/* ---------- facility spec (icon list + image grid) ---------- */
.fs-split{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.fs-text .eyebrow{margin-bottom:14px}
.fs-intro{font-weight:300;font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 28px;max-width:46ch}
.fs-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-bottom:30px}
@media(max-width:640px){.fs-list{grid-template-columns:1fr}}
.fs-item{display:flex;gap:16px;align-items:flex-start}
.fs-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--green);transition:background .3s,color .3s}
.fs-ico .mh-icon{width:21px;height:21px}
.fs-item:hover .fs-ico{background:var(--green);color:var(--gold)}
.fs-item{align-items:center}
.fs-title{font-family:var(--font-serif);font-weight:600;font-size:16.5px;margin:2px 0 4px;color:var(--green);line-height:1.25}
.fs-desc{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.fs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fs-tile{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;padding:16px}
.fs-tile span{background:rgba(14,54,43,.82);color:#fff;font-weight:500;font-size:12px;letter-spacing:.5px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px}
.fs-bottom{margin-top:40px;display:flex;align-items:center;gap:18px;background:var(--grey);padding:22px 28px;flex-wrap:wrap}
.fs-bottom-leaf{color:var(--gold)}
.fs-bottom-text{flex:1;font-weight:500;color:var(--green);min-width:200px}
@media(max-width:900px){.fs-split{grid-template-columns:1fr;gap:40px}}

/* ---------- lifestyle grid ---------- */
.life-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.life-card{background:#fff;box-shadow:0 8px 24px rgba(14,54,43,.06);overflow:hidden;position:relative;padding-bottom:26px}
.lc-img{aspect-ratio:5/4;background-size:cover;background-position:center}
.lc-badge{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:-24px auto 12px;position:relative;border:3px solid #fff}
.lc-badge .mh-icon{color:var(--gold)}
.lc-label{text-align:center;font-family:var(--font-serif);font-weight:500;font-size:18px;color:var(--green);line-height:1.2;padding:0 12px}
@media(max-width:900px){.life-grid{grid-template-columns:1fr 1fr}}

/* ---------- location advantage ---------- */
.la-split{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:stretch}
.la-intro{font-weight:300;color:var(--muted);margin:0 0 26px;max-width:42ch}
.la-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
@media(max-width:640px){.la-list{grid-template-columns:1fr}}
.la-row{display:flex;align-items:center;gap:16px;background:var(--grey);padding:14px 18px}
.la-ico{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--green);flex:none}
.la-big{font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--green);line-height:1.1}
.la-small{font-size:13px;color:var(--muted)}
.la-ctas{display:flex;gap:12px;flex-wrap:wrap}
.la-right iframe{width:100%;height:100%;min-height:460px;display:block}
@media(max-width:900px){.la-split{grid-template-columns:1fr;gap:34px}}

/* ---------- key distances ---------- */
.kd-inner{max-width:var(--container);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px}
.kd-cell{flex:1;min-width:150px;text-align:center;color:#fff}
.kd-ico{color:var(--gold);display:flex;justify-content:center;margin-bottom:12px}
.kd-km{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,3vw,34px);color:#fff}
.kd-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(239,228,204,.72);margin-top:6px}
@media(max-width:760px){.kd-cell{flex:1 1 40%}}

/* ---------- floor plans / master plan ---------- */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.fp-panel{background:#fff;padding:22px;box-shadow:0 8px 24px rgba(14,54,43,.05)}
.fp-panel img{width:100%;aspect-ratio:16/11;object-fit:contain;background:var(--grey)}
.fp-label{text-align:center;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin:16px 0 0}
@media(max-width:800px){.fp-grid{grid-template-columns:1fr}}
/* feature master plan - large, zoomable */
.mp-feature{background:#fff;padding:26px;box-shadow:0 14px 40px rgba(14,54,43,.08);position:relative}
.mp-feature .mp-frame{overflow:hidden;position:relative;cursor:zoom-in}
.mp-feature img{width:100%;display:block;transition:transform .8s var(--ease)}
.mp-feature:hover img{transform:scale(1.045)}
.mp-hint{position:absolute;right:38px;bottom:56px;background:rgba(14,54,43,.85);color:var(--cream);font-weight:600;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:9px 14px;display:inline-flex;gap:7px;align-items:center;pointer-events:none}
.mp-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.mp-thumbs .fp-panel{cursor:zoom-in;transition:transform .35s var(--ease),box-shadow .35s}
.mp-thumbs .fp-panel:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(14,54,43,.12)}
@media(max-width:800px){.mp-thumbs{grid-template-columns:1fr}}
/* lightbox */
.mh-lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(14,54,43,.92);padding:30px;cursor:zoom-out}
.mh-lightbox.open{display:flex}
.mh-lightbox img{max-width:96%;max-height:92vh;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.mh-lightbox .lb-close{position:absolute;top:18px;right:26px;background:none;border:0;color:var(--cream);font-size:34px;line-height:1;cursor:pointer}

/* ---------- amenities ---------- */
.amn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.amn-card{background:#fff;padding:34px 20px;text-align:center;box-shadow:0 8px 24px rgba(14,54,43,.05);transition:transform .3s var(--ease)}
.amn-card:hover{transform:translateY(-4px)}
.amn-ico{width:78px;height:78px;border-radius:50%;background:var(--cream);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;transition:background .3s,color .3s}
.amn-ico .mh-icon{width:38px;height:38px}
.amn-card:hover .amn-ico{background:var(--green);color:var(--gold)}
.amn-card{border-bottom:2px solid transparent}
.amn-card:hover{border-bottom-color:var(--gold)}
.amn-label{font-family:var(--font-serif);font-weight:500;font-size:18px;color:var(--green);line-height:1.25}
@media(max-width:900px){.amn-grid{grid-template-columns:1fr 1fr}}

/* ---------- offers (editorial split: content + creative) ---------- */
.offer-card{background:linear-gradient(135deg,var(--green),var(--green-2));color:var(--cream);padding:0;text-align:left;max-width:none;margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;overflow:hidden;position:relative}
.offer-card::before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,162,90,.35);pointer-events:none}
.offer-content{padding:clamp(40px,5.5vw,72px)}
.offer-media{background-size:cover;background-position:center;min-height:320px}
.offer-badge{display:inline-block;background:var(--gold);color:#fff;font-weight:600;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;padding:8px 16px;margin-bottom:26px}
.offer-card .h2-serif{margin-bottom:34px;max-width:16ch}
.offer-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:38px;border-top:1px solid rgba(239,228,204,.18);border-bottom:1px solid rgba(239,228,204,.18)}
.op-cell{padding:24px 20px;text-align:center}
.op-cell:not(:last-child){border-right:1px solid rgba(239,228,204,.18)}
.op-ico{color:var(--gold);display:flex;justify-content:center;margin-bottom:10px}
.op-ico .mh-icon{width:32px;height:32px}
.op-big{font-family:var(--font-serif);font-weight:600;font-size:clamp(22px,2.2vw,30px);color:#fff;line-height:1.15}
.op-small{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(239,228,204,.7);margin-top:6px}
.offer-note{font-size:12px;color:rgba(239,228,204,.6);margin:22px 0 0}
@media(max-width:900px){.offer-card{grid-template-columns:1fr}.offer-media{min-height:260px;order:-1}.offer-points{grid-template-columns:1fr}.op-cell:not(:last-child){border-right:0;border-bottom:1px solid rgba(239,228,204,.18)}}

/* ---------- documentation ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.doc-cell{text-align:center;color:var(--cream)}
.doc-ico{width:70px;height:70px;border-radius:50%;border:1px solid rgba(201,162,90,.5);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:background .3s,border-color .3s}
.doc-ico .mh-icon{width:32px;height:32px}
.doc-cell:hover .doc-ico{background:rgba(201,162,90,.12);border-color:var(--gold)}
.doc-cell span{font-size:14px;line-height:1.5}
@media(max-width:900px){.doc-grid{grid-template-columns:1fr 1fr}}

/* ---------- partners ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1080px;margin:0 auto}
.partner-tile{background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:18px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.partner-tile img{max-height:110px;width:auto;max-width:100%;object-fit:contain}
.partner-tile:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(14,54,43,.12);border-color:var(--gold)}
@media(max-width:800px){.partner-grid{grid-template-columns:1fr 1fr}}

/* ---------- contact split ---------- */
.contact-split{display:grid;grid-template-columns:1.1fr .9fr;gap:0;box-shadow:0 20px 50px rgba(14,54,43,.08)}
.contact-left{padding:clamp(30px,4vw,54px);background:#fff}
.contact-right{min-height:100%}
.contact-right iframe{width:100%;height:100%;min-height:520px;display:block}
.contact-chips{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:28px}
.cc{display:flex;gap:12px;align-items:flex-start;min-width:160px}
.cc-ico{width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.cc span{display:block;font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
.cc a{display:block;font-size:14px;color:var(--green)}
.cc-addr{font-size:13px;color:var(--muted)!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important}
@media(max-width:900px){.contact-split{grid-template-columns:1fr}.contact-right iframe{min-height:360px}}

/* ---------- forms ---------- */
.mh-form{display:flex;flex-direction:column;gap:12px}
.mh-form label{font-weight:600;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--green);margin-bottom:-6px}
.mh-form input,.mh-form select,.mh-form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--grey);font:400 15px/1.4 var(--font-body);color:var(--text);-webkit-appearance:none;appearance:none;border-radius:0;transition:border-color .2s}
.mh-form input:focus,.mh-form select:focus,.mh-form textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.mh-form textarea{resize:vertical;min-height:84px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.form-row-2{grid-template-columns:1fr}}
.mh-form button[type=submit]{margin-top:6px;background:var(--green);color:#fff;border:0;padding:15px 34px;font-weight:600;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:background .3s}
.mh-form button[type=submit]:hover{background:var(--orange)}
.form-note{font-size:11px;color:var(--muted);margin:2px 0 0}
.mh-honeypot{position:absolute!important;left:-9999px;top:-9999px}

/* ---------- gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-tile{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gal-tile::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:0;transform:scale(.94);transition:opacity .4s,transform .5s var(--ease)}
.gal-tile:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(14,54,43,.22)}
.gal-tile:hover::after{opacity:1;transform:scale(1);inset:10px}
@media(max-width:800px){.gal-grid{grid-template-columns:1fr 1fr}}
/* facility tiles - same lift + gold frame */
.fs-tile{overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fs-tile::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:0;transition:opacity .4s;pointer-events:none}
.fs-tile:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,54,43,.2)}
.fs-tile:hover::after{opacity:1;inset:9px}

/* ---------- scroll reveal ---------- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rv.in-view{opacity:1;transform:none}
  .rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}.rv-d5{transition-delay:.3s}
}

/* ---------- pull quote ---------- */
.pull-quote-band{padding:clamp(80px,11vw,150px) 28px;text-align:center}
.pq-rule{width:1px;height:64px;background:var(--gold);margin:0 auto 34px}
.pull-quote{font-family:var(--font-serif);font-weight:400;font-size:clamp(24px,3.4vw,42px);line-height:1.3;color:var(--cream);margin:0}
.pq-attr{margin-top:26px;font-weight:400;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}

/* ---------- fullbleed ---------- */
.fullbleed{background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:60px 28px}
.fb-cap{max-width:820px}

/* ---------- about split ---------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.as-img{aspect-ratio:4/3;background-size:cover;background-position:center;min-height:340px}
.as-body{font-weight:300;font-size:16px;line-height:1.8;color:var(--text)}
.check-list{list-style:none;padding:0;margin:22px 0}
.check-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:15px}
.check-list li .mh-icon{color:var(--gold);flex:none;margin-top:3px}
@media(max-width:900px){.about-split{grid-template-columns:1fr;gap:34px}}

/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tst-card{background:#fff;padding:36px 30px}
.tst-mark{font-family:var(--font-serif);font-weight:600;font-size:54px;line-height:.6;color:var(--gold)}
.tst-body{font-family:var(--font-serif);font-size:18px;line-height:1.5;color:var(--green);margin:14px 0 22px}
.tst-attr{font-weight:600;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin:0}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr}}

/* ---------- accordion ---------- */
.mh-accordion{max-width:880px;margin:0 auto}
.mh-accordion details{border-bottom:1px solid rgba(14,54,43,.14);padding:22px 0}
.mh-accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;font-family:var(--font-serif);font-weight:600;font-size:19px;color:var(--green)}
.mh-accordion summary::-webkit-details-marker{display:none}
.mh-accordion summary::after{content:"+";font-family:var(--font-serif);font-size:26px;color:var(--gold);transition:transform .2s}
.mh-accordion details[open] summary::after{content:"−"}
.acc-body{padding-top:18px;font-size:15px;line-height:1.75;color:var(--text)}
.acc-body h3{font-family:var(--font-serif);font-weight:600;font-size:21px;color:var(--green);margin:22px 0 8px}
.acc-body ul{padding-left:20px;margin:8px 0}
.acc-body li{margin-bottom:5px}

/* ---------- footer ---------- */
.site-footer{background:var(--green);color:var(--cream)}
.footer-logos{max-width:var(--container);margin:0 auto;padding:54px 28px 44px;display:flex;justify-content:center;border-bottom:1px solid rgba(255,255,255,.12)}
.fl-col{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.fl-logo{height:104px;width:auto;object-fit:contain}
.fl-logo-lg{height:124px}
.fl-label{font-weight:600;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.footer-main{max-width:var(--container);margin:0 auto;padding:46px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.footer-main h4{font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.footer-main ul{list-style:none;padding:0;margin:0}
.footer-main li{margin-bottom:10px;font-size:14px}
.footer-main a{color:var(--cream);transition:color .3s}
.footer-main a:hover{color:var(--gold)}
.footer-bottom{max-width:var(--container);margin:0 auto;padding:22px 28px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(239,228,204,.6)}
.footer-disclaimer{max-width:var(--container);margin:0 auto;padding:0 28px 34px;font-size:10px;line-height:1.5;color:rgba(239,228,204,.4);text-align:justify}
@media(max-width:900px){.footer-logos{grid-template-columns:1fr;text-align:center;gap:26px}.fl-right,.fl-center{align-items:center;text-align:center}.footer-main{grid-template-columns:1fr 1fr}}

/* ---------- popup modal ---------- */
.mh-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(14,54,43,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.mh-modal.open{display:flex;opacity:1}
/* Fits inside the viewport - no inner scrollbar. Sizes scale off vh. */
.modal-card{background:#fff;padding:clamp(20px,2.6vh,34px) clamp(22px,2.6vw,38px);max-width:620px;width:100%;max-height:96vh;overflow:visible;position:relative;transform:translateY(18px);transition:transform .3s var(--ease)}
.mh-modal.open .modal-card{transform:translateY(0)}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:26px;color:var(--green);line-height:1;z-index:2}
.modal-card h3{font-family:var(--font-serif);font-weight:500;font-size:clamp(21px,3vh,29px);color:var(--green);margin:2px 0 6px;line-height:1.1}
.modal-sub{font-weight:300;font-size:13px;color:var(--muted);margin:0 0 clamp(10px,1.6vh,18px)}
.modal-card .eyebrow{margin-bottom:8px;font-size:10px}
/* Compact form inside the modal: 2-up rows, tighter rhythm */
.modal-card .mh-form{gap:clamp(6px,1vh,11px)}
.modal-card .mh-form label{font-size:9.5px;margin-bottom:-5px}
.modal-card .mh-form input,.modal-card .mh-form select,.modal-card .mh-form textarea{padding:clamp(8px,1.2vh,12px) 13px;font-size:14px}
.modal-card .mh-form textarea{min-height:0;rows:2}
.modal-card .mh-form button[type=submit]{padding:clamp(11px,1.6vh,15px) 30px;margin-top:2px}
.modal-card .form-note{font-size:10px}
/* Label + field are wrapped together in .f-cell, so 2-up never splits a pair */
.modal-card .mh-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(7px,1.1vh,13px) 14px}
.modal-card .f-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.modal-card .f-cell label{margin-bottom:0}
.modal-card .f-full,.modal-card .mh-form > button[type=submit],
.modal-card .mh-form > .form-note,.modal-card .mh-form > input[type=hidden],
.modal-card .mh-form > .mh-honeypot{grid-column:1 / -1}
@media(max-width:520px){.modal-card .mh-form{grid-template-columns:1fr}}
@media(max-height:640px){
  .modal-card .modal-sub{display:none}
  .modal-card h3{font-size:22px}
}

/* ---------- misc ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}


/* ============================================================
   FEEDBACK ROUND - 20 Aug 2026
   Overrides only; base design system above is unchanged.
   ============================================================ */

/* -- FIX: blog/admin used .h1-hero & .h2-section which never existed
      (real class is .hero-h1). Aliases restore the serif font. -- */
.h1-hero{font-family:var(--font-serif);font-weight:500;line-height:1.04;letter-spacing:-1px;margin:0}
.h2-section{font-family:var(--font-serif);font-weight:500;line-height:1.1;letter-spacing:-.5px;margin:0}

/* -- Homepage #2: stats band ("USP section") shortened -- */
.stats-band.section{padding:clamp(38px,4.4vw,58px) 0}
.stats-band .stat-ico{margin-bottom:9px}
.stats-band .stat-ico .mh-icon{width:30px;height:30px}
.stats-band .stat-num{font-size:clamp(28px,3vw,40px)}
.stats-band .stat-label{margin-top:7px;font-size:10px;letter-spacing:1.6px}

/* -- Homepage #3: tighten gap between headings and the cards below -- */
.sec-head{margin-bottom:32px}
.sec-head.text-left{margin-bottom:26px}
.sec-head .lead{margin-top:12px}

/* -- Homepage #6: amenities section smaller + GREEN icons -- */
.amn-grid{gap:16px}
.amn-card{padding:24px 16px}
.amn-ico{width:58px;height:58px;margin:0 auto 13px;background:var(--green);color:var(--gold)}
.amn-ico .mh-icon{width:26px;height:26px}
.amn-card:hover .amn-ico{background:var(--gold);color:#fff}
.amn-label{font-size:16px}

/* -- Homepage #8 / Villa / Apartment: partner logos with no background tile -- */
.partner-tile{background:transparent;border:0;padding:10px}
.partner-tile:hover{box-shadow:none;transform:translateY(-3px)}

/* white plate only where a logo needs it for legibility on tinted sections */
.partner-tile.needs-plate{background:#fff;border-radius:4px;padding:16px}
.partner-tile.needs-plate img{mix-blend-mode:normal}

/* -- Homepage #1: logo placed alongside the About text -- */
/* -- #7 & #9: slider (offers + testimonials). Scroll-snap, no library. -- */
.mh-slider{position:relative}
.mh-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px;
  scrollbar-width:none}
.mh-track::-webkit-scrollbar{display:none}
.mh-track>*{scroll-snap-align:center;flex:0 0 100%}
.mh-track.tri>*{flex:0 0 calc((100% - 52px)/3)}
@media(max-width:980px){.mh-track.tri>*{flex:0 0 calc((100% - 24px)/2)}}
@media(max-width:680px){.mh-track.tri>*{flex:0 0 100%}}
.mh-nav{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:26px}
.mh-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(14,54,43,.22);transition:background .3s,width .3s}
.mh-dot.on{background:var(--green);width:26px;border-radius:4px}
.mh-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.mh-arrow:hover{background:var(--green);color:#fff;border-color:var(--green)}
.mh-arrow[disabled]{opacity:.32;cursor:default}
.mh-arrow:hover[disabled]{background:#fff;color:var(--green);border-color:var(--line)}
.bg-green .mh-dot{background:rgba(239,228,204,.3)}
.bg-green .mh-dot.on{background:var(--gold)}

/* offers inside a slider keep full width per slide */
.mh-track .offer-card{width:100%}

/* -- Homepage #9: testimonials sized down -- */
.tst-card{padding:28px 24px}
.tst-body{font-size:16.5px;margin:12px 0 18px}
.tst-mark{font-size:44px}


/* -- Blog #1: logo in the blog/admin nav -- */
.site-header .logo img.logo-img{height:88px;width:auto}


/* ==========================================================
   DEVANAGARI (Hindi / Marathi)
   Latin letter-spacing and uppercase transforms break
   Devanagari conjuncts and matras. Reset them across the
   localized pages, then restore where the text is Latin.
   Applies via <html lang="hi"> / <html lang="mr">.
   ========================================================== */
[lang="hi"] *,
[lang="mr"] *{
    letter-spacing:normal;
    word-spacing:normal;
    text-transform:none;
}
/* the EN · HI · MR switch stays Latin, keep its original treatment */
[lang="hi"] .lang-switch,[lang="mr"] .lang-switch,
[lang="hi"] .lang-switch a,[lang="mr"] .lang-switch a{
    letter-spacing:.08em;
    text-transform:uppercase;
}
/* Devanagari needs more leading to clear matras */
[lang="hi"] body,[lang="mr"] body,
[lang="hi"] p,[lang="mr"] p,
[lang="hi"] li,[lang="mr"] li,
[lang="hi"] .lead,[lang="mr"] .lead{ line-height:1.75; }
[lang="hi"] h1,[lang="mr"] h1,
[lang="hi"] .hero-h1,[lang="mr"] .hero-h1{ line-height:1.3; }
[lang="hi"] h2,[lang="mr"] h2,
[lang="hi"] h3,[lang="mr"] h3,
[lang="hi"] .h2-serif,[lang="mr"] .h2-serif,
[lang="hi"] .h3-serif,[lang="mr"] .h3-serif{ line-height:1.4; }

/* Header logo - sized up per brand feedback (21 Aug 2026).
   Scales down on smaller screens so it never crowds the nav. */
@media(max-width:1080px){ .logo-img,.site-header .logo img.logo-img{height:70px} }
@media(max-width:600px){  .logo-img,.site-header .logo img.logo-img{height:56px} }

/* ==========================================================
   Stacked sections on the same background
   A heading section followed by its content section used to
   stack two full paddings, leaving a dead band between the
   title and the cards. Collapse the join when the background
   is unchanged.
   ========================================================== */
.section.bg-cream    + .section.bg-cream,
.section.bg-offwhite + .section.bg-offwhite,
.section.bg-white    + .section.bg-white,
.section.bg-green    + .section.bg-green{ padding-top:0; }

/* a section whose only job is the heading shouldn't add bottom space */
.section > .container > .sec-head:only-child{ margin-bottom:0; }

/* Partner logos ship as transparent PNGs (backgrounds stripped 21 Aug 2026),
   so no plate, no blend mode. Just the mark on whatever section it sits on. */
.partner-tile{background:transparent;border:0;padding:10px;box-shadow:none}
.partner-tile img{mix-blend-mode:normal;filter:none;max-width:100%;height:auto;max-height:74px;object-fit:contain}

/* Footer logo - sized up per brand feedback (21 Aug 2026) */
@media(max-width:1080px){ .fl-logo{height:88px} .fl-logo-lg{height:100px} }
@media(max-width:600px){  .fl-logo{height:72px} .fl-logo-lg{height:82px} }

/* ==========================================================
   FLOATING ACTIONS  (added 21 Aug 2026)
   Left-middle : vertical "Contact Us" tab -> opens enquiry popup
   Left-bottom : WhatsApp
   Right-middle: scroll to top / bottom
   Markup lives at the bottom of every page, just before </body>,
   so it can be edited or removed per page without touching JS.
   ========================================================== */
.mh-float{position:fixed;z-index:60}

/* --- Contact tab, left middle --- */
.mh-float-contact{left:0;top:50%;transform:translateY(-50%)}
.mh-float-contact button{
    display:flex;align-items:center;gap:9px;
    writing-mode:vertical-rl;transform:rotate(180deg);
    background:var(--green,#0E362B);color:var(--gold,#C9A227);
    border:0;cursor:pointer;padding:20px 11px;
    border-radius:0 6px 6px 0;
    font:500 12px/1 var(--font-sans,inherit);letter-spacing:1.6px;text-transform:uppercase;
    box-shadow:0 6px 22px rgba(14,54,43,.28);
    transition:padding .3s var(--ease,ease),background .3s;
}
.mh-float-contact button:hover{padding:26px 13px;background:#14483a}
.mh-float-contact svg{width:15px;height:15px;transform:rotate(90deg)}

/* --- WhatsApp, left bottom --- */
.mh-float-wa{left:22px;bottom:24px}
.mh-float-wa a{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;border-radius:50%;
    background:#25D366;color:#fff;text-decoration:none;
    box-shadow:0 6px 20px rgba(0,0,0,.24);
    transition:transform .3s var(--ease,ease);
}
.mh-float-wa a:hover{transform:scale(1.09)}
.mh-float-wa svg{width:28px;height:28px}

/* --- Scroll arrows, right middle --- */
.mh-float-scroll{right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.mh-float-scroll button{
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    background:#fff;color:var(--green,#0E362B);
    border:1px solid rgba(14,54,43,.16);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(14,54,43,.14);
    transition:background .25s,color .25s,transform .25s;
}
.mh-float-scroll button:hover{background:var(--green,#0E362B);color:#fff;transform:translateY(-2px)}
.mh-float-scroll svg{width:18px;height:18px}

@media(max-width:820px){
    .mh-float-contact button{padding:15px 9px;font-size:10.5px;letter-spacing:1.2px}
    .mh-float-contact button:hover{padding:18px 10px}
    .mh-float-wa{left:16px;bottom:16px}
    .mh-float-wa a{width:46px;height:46px}
    .mh-float-wa svg{width:25px;height:25px}
    .mh-float-scroll{right:16px;gap:8px}
    .mh-float-scroll button{width:38px;height:38px}
}
@media(max-width:480px){ .mh-float-contact{display:none} }   /* WhatsApp + header CTA carry it on phones */
@media print{ .mh-float{display:none} }

/* ==========================================================
   NEW SECTIONS - 21 Aug 2026
   ROI calculator · Video · Construction progress · NRI · RERA QR
   ========================================================== */

/* ---------- ROI calculator ---------- */
.roi-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
    background:#fff;border:1px solid var(--line,rgba(14,54,43,.12));padding:38px}
.roi-field{margin-bottom:26px}
.roi-field label{display:flex;justify-content:space-between;align-items:baseline;
    font:500 12px/1 var(--font-sans,inherit);letter-spacing:1.2px;text-transform:uppercase;
    color:var(--green,#0E362B);margin-bottom:12px}
.roi-field .roi-val{font:600 17px/1 var(--font-sans,inherit);letter-spacing:0;color:var(--gold-dk,#9c7c1e)}
.roi-field input[type=range]{width:100%;accent-color:var(--green,#0E362B);height:26px;cursor:pointer}
.roi-note{font-size:12px;color:#777;margin:-14px 0 0}
.roi-out{background:var(--green,#0E362B);color:#fff;padding:32px}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.roi-row:last-of-type{border-bottom:0}
.roi-row span{font-size:13.5px;opacity:.85}
.roi-row b{font:500 19px/1 var(--font-serif,serif);color:var(--gold,#C9A227)}
.roi-total{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.28)}
.roi-total b{font-size:27px}
.roi-disc{font-size:11.5px;line-height:1.6;opacity:.66;margin:18px 0 0}
@media(max-width:860px){ .roi-wrap{grid-template-columns:1fr;gap:26px;padding:24px} }

/* ---------- Video ---------- */
.mh-video{position:relative;aspect-ratio:16/9;background:var(--green,#0E362B);
    cursor:pointer;overflow:hidden;max-width:1000px;margin:0 auto}
.mh-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease,ease)}
.mh-video:hover img{transform:scale(1.035)}
.mh-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mh-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(0deg,rgba(14,54,43,.42),rgba(14,54,43,.12))}
.mh-video-play span{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94);
    display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease,ease)}
.mh-video:hover .mh-video-play span{transform:scale(1.09)}
.mh-video-play svg{width:26px;height:26px;margin-left:4px;color:var(--green,#0E362B)}
.mh-video-cap{text-align:center;font-size:13px;color:#666;margin:14px 0 0}

/* ---------- Construction progress ---------- */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.cp-card{background:#fff;border:1px solid var(--line,rgba(14,54,43,.12));padding:26px}
.cp-card h3{font:500 19px/1.3 var(--font-serif,serif);color:var(--green,#0E362B);margin:0 0 6px}
.cp-card p{font-size:13.5px;color:#666;margin:0 0 16px;line-height:1.6}
.cp-bar{height:7px;background:rgba(14,54,43,.1);border-radius:4px;overflow:hidden}
.cp-bar i{display:block;height:100%;background:var(--gold,#C9A227);border-radius:4px;
    width:0;transition:width 1.1s var(--ease,cubic-bezier(.22,1,.36,1))}
.cp-card.in-view .cp-bar i,.cp-grid .cp-card .cp-bar i.grown{width:var(--pct)}
.cp-pct{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;
    text-transform:uppercase;color:var(--green,#0E362B);margin-top:10px;font-weight:500}
.cp-asof{text-align:center;font-size:12.5px;color:#777;margin:26px 0 0}

/* ---------- NRI ---------- */
.nri-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.nri-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:15px}
.nri-list li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.65}
.nri-list svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--gold,#C9A227)}
.nri-media{aspect-ratio:4/3;background-size:cover;background-position:center}
@media(max-width:860px){ .nri-wrap{grid-template-columns:1fr;gap:26px} }

/* ---------- RERA QR in footer ---------- */
.footer-rera{display:flex;align-items:center;gap:16px;margin-top:16px}
.footer-rera img{width:92px;height:92px;background:#fff;padding:6px;border-radius:4px;flex:none}
.footer-rera .fr-txt{font-size:12px;line-height:1.65;opacity:.85}
.footer-rera .fr-txt b{display:block;font-size:13px;color:var(--gold,#C9A227);letter-spacing:.5px}

/* ==========================================================
   HERO LEGIBILITY - 21 Aug 2026
   The 3D renders are bright and busy, so headline text was
   competing with the image. A consistent scrim sits between
   the photo and the copy on every hero, plus a soft shadow
   for separation. The image stays fully visible on the right.
   ========================================================== */
.hero{position:relative;isolation:isolate}
.hero::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(100deg,
        rgba(6,28,22,.88) 0%,
        rgba(6,28,22,.74) 26%,
        rgba(6,28,22,.46) 50%,
        rgba(6,28,22,.16) 74%,
        rgba(6,28,22,.04) 100%),
      linear-gradient(180deg, rgba(6,28,22,.34) 0%, rgba(6,28,22,0) 26%);
}
.hero > *{position:relative;z-index:1}
.hero-inner{position:relative;z-index:1}
.hero-h1,.hero-sub,.hero-kicker{text-shadow:0 2px 22px rgba(4,20,16,.42)}
.hero-kicker{opacity:.95}
.hero-sub{max-width:34ch}

/* centre-aligned heroes need the scrim balanced, not pushed left */
.hero:not(.hero-left)::after{
    background:linear-gradient(180deg,
        rgba(6,28,22,.62) 0%, rgba(6,28,22,.42) 40%,
        rgba(6,28,22,.52) 78%, rgba(6,28,22,.72) 100%);
}
@media(max-width:860px){
    .hero::after{background:linear-gradient(180deg,
        rgba(6,28,22,.62) 0%, rgba(6,28,22,.78) 55%, rgba(6,28,22,.88) 100%)}
    .hero-sub{max-width:none}
}

/* ROI - fixed figures above the slider */
.roi-fixed{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
.roi-fx{background:var(--cream,#EFE4CC);padding:20px 22px}
.roi-fx span{display:block;font:500 11.5px/1 var(--font-sans,inherit);letter-spacing:1.3px;
    text-transform:uppercase;color:var(--green,#0E362B);opacity:.72;margin-bottom:9px}
.roi-fx b{font:500 26px/1 var(--font-serif,serif);color:var(--green,#0E362B)}
.roi-fx sup{font-size:12px;top:-.7em;position:relative}
@media(max-width:520px){ .roi-fixed{grid-template-columns:1fr;gap:12px} .roi-fx b{font-size:23px} }

/* ==========================================================
   SECTION RHYTHM - 21 Aug 2026
   Sections were running past a full screen, and the sticky
   header was covering the top of any section scrolled to.
   Tighter vertical padding + a scroll offset fixes both.
   ========================================================== */
:root{ --mh-header-h:112px; }

.section{ padding-block:clamp(44px, 4.6vw, 74px); }
.section.bg-green,.section.bg-cream{ padding-block:clamp(44px, 4.6vw, 74px); }

/* nothing lands underneath the sticky header when scrolled to */
html{ scroll-padding-top:calc(var(--mh-header-h) + 14px); }
section[id],.section[id],#enquire,#roi,#video,#progress,#nri{
    scroll-margin-top:calc(var(--mh-header-h) + 14px);
}

/* headings sit closer to their content */
.sec-head{ margin-bottom:26px; }
.sec-head .lead{ margin-top:12px; }
.stats-band.section{ padding-block:clamp(34px,3.6vw,50px); }
.usp-strip{ padding-block:clamp(26px,2.8vw,40px); }

@media(max-width:860px){
    :root{ --mh-header-h:96px; }
    .section{ padding-block:clamp(36px,7vw,52px); }
}

/* ---------- NRI - centre the CTA and the disclaimer ---------- */
#nri .hero-ctas{ justify-content:center; }
#nri .roi-disc{ text-align:center; max-width:62ch; margin-left:auto; margin-right:auto; }

/* Enquiry section - the tallest block on the page. Tighter field
   rhythm brings it close to a single screen without cramping. */
#enquire .mh-form{ display:grid; gap:14px; }
#enquire .mh-form label{ margin-bottom:5px; }
#enquire .mh-form input,
#enquire .mh-form select,
#enquire .mh-form textarea{ padding:11px 13px; }
#enquire .mh-form textarea{ min-height:96px; }
#enquire .sec-head{ margin-bottom:20px; }

@media(max-width:860px){
    }

/* ==========================================================
   ENQUIRY FORM - two-up on desktop  (21 Aug 2026)
   The single-column form made the contact section run to
   1.5 screens on every page. Pairing the short fields halves
   its height without shrinking any control.
   ========================================================== */
#enquire .mh-form,
.mh-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; }
.mh-form .ff{ display:flex; flex-direction:column; min-width:0; }
.mh-form .ff-full,
.mh-form .form-row-2,
.mh-form button,
.mh-form .form-note,
.mh-form > textarea{ grid-column:1 / -1; }
.mh-form .ff label{ margin-bottom:5px; }
.mh-form textarea{ min-height:84px; }
.mh-form .form-note{ margin:2px 0 0; }


@media(max-width:700px){
    #enquire .mh-form,.mh-form{ grid-template-columns:1fr; }
}

/* ==========================================================
   FOOTER LOGO - bigger, and aligned to the footer grid
   (was floating centred, out of step with the columns below)
   ========================================================== */
.footer-logos{
    justify-content:flex-start;
    padding-inline:28px;
    max-width:var(--container);
    margin-inline:auto;
}
.fl-logo,.site-footer .fl-logo{ height:132px; }
.fl-logo-lg,.site-footer .fl-logo-lg{ height:150px; }
@media(max-width:1080px){ .fl-logo{height:104px} .fl-logo-lg{height:118px} }
@media(max-width:600px){
    .footer-logos{ justify-content:center; }
    .fl-logo{height:84px} .fl-logo-lg{height:94px}
}

/* "Get directions" - opens the exact pin in the Maps app on mobile */
.mh-directions{
    display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    font:500 12px/1 var(--font-sans,inherit);letter-spacing:1.1px;text-transform:uppercase;
    color:var(--green,#0E362B);text-decoration:none;
    border:1px solid rgba(14,54,43,.22);padding:11px 18px;
    transition:background .25s,color .25s,border-color .25s;
}
.mh-directions:hover{background:var(--green,#0E362B);color:#fff;border-color:var(--green,#0E362B)}
.mh-directions svg{flex:none}

/* ==========================================================
   CONTACT SECTION - 21 Aug 2026 (v2)
   The map was capped short and left ~670px of dead space
   beside a 1087px form column. Absolute-positioning it inside
   a stretched grid cell lets it run the full height of the
   form without the height:100% feedback loop that inflated
   the section earlier.
   ========================================================== */
.contact-split{ align-items:stretch; }
.contact-right{ position:relative; min-height:420px; }
.contact-right iframe,
.contact-right .contact-map{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0; display:block;
}
/* the directions button sits over the bottom-left of the map,
   on every map on the site (Location Advantage + Contact) */
.contact-right,.la-right{ position:relative; }
.contact-right .mh-directions,
.la-right .mh-directions{
    position:absolute; left:16px; bottom:16px; z-index:2; margin:0;
    background:#fff; box-shadow:0 4px 16px rgba(14,54,43,.18);
}
.la-right iframe{ display:block; width:100%; border:0; }

/* --- tighter left column so the section lands near one screen --- */
#enquire .sec-head h2,
#enquire h2.h2-serif{ font-size:clamp(30px,3.2vw,42px); }
#enquire .contact-left > .lead{ margin-bottom:18px; font-size:15.5px; }
#enquire .contact-chips{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:14px; margin:0 0 20px;
}
#enquire .contact-chips > *{ margin:0; }
#enquire .contact-left .rule-gold{ margin-bottom:14px; }

@media(max-width:900px){
    #enquire .contact-chips{ grid-template-columns:1fr 1fr; }
    .contact-right{ min-height:340px; }
}
@media(max-width:600px){
    #enquire .contact-chips{ grid-template-columns:1fr; }
}

/* ==========================================================
   RETURNS BOX - balance the two columns
   Left column was 272px against a 427px panel, pinned to the
   top, which left a hole under the slider.
   ========================================================== */
.roi-wrap{ align-items:stretch; gap:34px; }
.roi-wrap > div:first-child{
    display:flex; flex-direction:column; justify-content:center;
}
.roi-out{ display:flex; flex-direction:column; justify-content:center; }
.roi-out .btn{ margin-top:auto; }
@media(max-width:860px){
    .roi-wrap{ align-items:start; }
    .roi-wrap > div:first-child{ justify-content:flex-start; }
}

/* Contact intro - keep it to a couple of lines so the section
   doesn't run long on pages with a fuller introduction. */
#enquire .contact-left > .lead{
    font-size:15px; line-height:1.62; max-width:52ch; margin-bottom:16px;
}
#enquire .contact-left > .eyebrow{ margin-bottom:6px; }

/* Keep the button clear of Google's own controls on narrow maps */
@media(max-width:640px){
    .contact-right .mh-directions,
    .la-right .mh-directions{ left:12px; bottom:12px; padding:9px 14px; font-size:11px; }
}

/* ==========================================================
   CTA CONTRAST ON DARK GREEN - 21 Aug 2026
   .btn-primary is dark green on white, which made it
   invisible inside the dark-green panels (returns box,
   offer cards) - same colour as the surface, only appearing
   on hover. On those surfaces the CTA becomes brand gold
   with dark-green text.
   ========================================================== */
.roi-out .btn-primary,
.offer-card .btn-primary,
.bg-green .btn-primary,
.section.bg-green .btn-primary{
    background:var(--gold,#C9A25A);
    color:var(--green,#0E362B);
    border:1px solid var(--gold,#C9A25A);
    font-weight:600;
}
.roi-out .btn-primary:hover,
.offer-card .btn-primary:hover,
.bg-green .btn-primary:hover,
.section.bg-green .btn-primary:hover{
    background:#fff;
    color:var(--green,#0E362B);
    border-color:#fff;
}

/* ghost buttons on dark green need a visible outline too */
.roi-out .btn-ghost,
.offer-card .btn-ghost,
.bg-green .btn-ghost{
    border-color:rgba(255,255,255,.6);
    color:#fff;
}
.roi-out .btn-ghost:hover,
.offer-card .btn-ghost:hover,
.bg-green .btn-ghost:hover{
    background:#fff;
    color:var(--green,#0E362B);
    border-color:#fff;
}

/* ==========================================================
   NRI CTA - centred across the full section width
   Sits below both columns so the callback button is the
   clear next step, not buried in the left column.
   ========================================================== */
.nri-cta-full{
    grid-column:1 / -1;
    margin-top:34px;
    text-align:center;
}
.nri-cta-full .hero-ctas{
    display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
}
.nri-cta-full .roi-disc{
    text-align:center;
    max-width:66ch;
    margin:18px auto 0;
    color:#777; opacity:1;
}

/* ==========================================================
   BUTTON ALIGNMENT - 21 Aug 2026
   Buttons were flex with justify-content:normal, so a button
   carrying an icon centred its text on the label alone rather
   than on the icon+label group. Full-width buttons inherited
   whatever text-align was around them.
   Every button now centres its content as one group, and
   button rows follow the alignment of the copy they sit under.
   ========================================================== */
.btn,
button.header-cta,
.mh-form button,
.mh-video-play span,
.mh-directions{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:center;
    line-height:1.2;
}
/* full-width buttons (returns panel, forms) stay centred too */
.roi-out .btn,
.mh-form button[type="submit"]{ display:flex; width:100%; justify-content:center; }

/* a button row follows the alignment of the section it sits in */
.text-center .hero-ctas,
.sec-head.text-center + * .hero-ctas,
.nri-cta-full .hero-ctas{ justify-content:center; }
.text-center .btn,
.text-center .hero-ctas{ margin-left:auto; margin-right:auto; }

/* icon-bearing labels shouldn't wrap away from their icon */
.btn svg,
.mh-directions svg,
.mh-form button svg{ flex:none; }

/* ==========================================================
   FOOTER LOCKUP - 21 Aug 2026
   The logo is split into its two parts: the MISTY HILLS
   wordmark on the LEFT, the leaf/waves symbol on the RIGHT.
   Both white, both large, aligned to the footer column grid.
   Swap either file in assets/img/logo/ to change the artwork.
   ========================================================== */
.footer-logos{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    max-width:var(--container);
    margin-inline:auto;
    padding:clamp(30px,3.4vw,52px) 28px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.fl-lockup{
    display:flex;
    align-items:center;
    gap:clamp(26px,3.2vw,54px);
}
.fl-word{ height:clamp(34px,3.9vw,62px); width:auto; display:block; }
.fl-symbol{ height:clamp(60px,6.9vw,112px); width:auto; display:block; }

@media(max-width:600px){
    .footer-logos{ justify-content:center; }
    .fl-lockup{ gap:22px; }
    .fl-word{ height:30px; }
    .fl-symbol{ height:54px; }
}

/* ==========================================================
   FOOTER - centred  (21 Aug 2026)
   Logo lockup, all four link columns, the RERA block, the
   copyright line and the disclaimer all centre on the page.
   ========================================================== */
.site-footer{ text-align:center; }

.footer-logos{ justify-content:center; }
.fl-lockup{ justify-content:center; }

.footer-main{ text-align:center; }
.footer-main h4{ text-align:center; }
.footer-main ul{ list-style:none; padding:0; margin:0; }
.footer-main li{ text-align:center; }

/* the RERA QR sits under its column, centred with its caption */
.footer-rera{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
}
.footer-rera .fr-txt{ text-align:center; }

.footer-bottom{ text-align:center; }
.footer-disclaimer{
    text-align:center;
    max-width:96ch;
    margin-inline:auto;
}

@media(max-width:600px){
    .fl-lockup{ gap:18px; }
}

/* ==========================================================
   GHOST BUTTONS - adapt to the surface  (21 Aug 2026)
   .btn-ghost was white text + white border, built for heroes.
   On light sections it rendered white-on-white: invisible, but
   still occupying space, which pushed neighbouring buttons
   off-centre. Default is now dark-on-light; it inverts only
   on genuinely dark surfaces.
   ========================================================== */
.btn-ghost{
    background:transparent;
    color:var(--green,#0E362B);
    border:1px solid rgba(14,54,43,.42);
}
.btn-ghost:hover{
    background:var(--green,#0E362B);
    color:#fff;
    border-color:var(--green,#0E362B);
}

/* dark surfaces - invert back to white */
.hero .btn-ghost,
.bg-green .btn-ghost,
.section.bg-green .btn-ghost,
.offer-card .btn-ghost,
.roi-out .btn-ghost,
.site-footer .btn-ghost,
.mh-modal .btn-ghost{
    color:#fff;
    border-color:rgba(255,255,255,.6);
}
.hero .btn-ghost:hover,
.bg-green .btn-ghost:hover,
.section.bg-green .btn-ghost:hover,
.offer-card .btn-ghost:hover,
.roi-out .btn-ghost:hover,
.site-footer .btn-ghost:hover,
.mh-modal .btn-ghost:hover{
    background:#fff;
    color:var(--green,#0E362B);
    border-color:#fff;
}

/* ==========================================================
   FOOTER - tightened  (21 Aug 2026)
   Less vertical weight overall, and the legal disclaimer set
   wide enough to fall on two lines instead of four.
   ========================================================== */
.footer-logos{ padding-block:clamp(20px,2.2vw,32px); }
.fl-word{ height:clamp(28px,3.1vw,48px); }
.fl-symbol{ height:clamp(46px,5.2vw,84px); }

.footer-main{
    padding-block:clamp(24px,2.6vw,38px);
    gap:clamp(20px,2.4vw,34px);
}
.footer-main h4{ margin-bottom:12px; font-size:11.5px; }
.footer-main li{ padding:3px 0; font-size:14px; }

.footer-rera{ gap:10px; margin-top:12px; }
.footer-rera img{ width:78px; height:78px; }
.footer-rera .fr-txt{ font-size:11.5px; line-height:1.55; }

.footer-bottom{ padding-block:14px; font-size:13px; }

.footer-disclaimer{
    max-width:none;
    width:min(1560px, 96vw);
    margin:0 auto;
    padding:10px 20px 22px;
    font-size:11.5px;
    line-height:1.62;
}

@media(max-width:900px){
    .footer-disclaimer{ font-size:11px; }
}
@media(max-width:600px){
    .fl-word{ height:26px; }
    .fl-symbol{ height:44px; }
    .footer-rera img{ width:70px; height:70px; }
}

/* ---------- inline form errors ---------- */
.field-error{
    margin:5px 0 0;
    font-size:12.5px;
    line-height:1.45;
    color:#c0392b;
}
.mh-form input.is-invalid,
.mh-form select.is-invalid,
.mh-form textarea.is-invalid{
    border-color:#c0392b;
    background:#fff6f5;
}
.mh-form input.is-invalid:focus{ outline-color:#c0392b; }
.mh-modal .field-error{ color:#ffb4a8; }
.mh-modal input.is-invalid{ background:rgba(255,255,255,.06); border-color:#ffb4a8; }

/* ==========================================================
   GATED PLANS - 21 Aug 2026
   Plans stay visible and hoverable. A lock cue appears on
   hover until the visitor has enquired; after that the cue
   disappears and the plan opens straight into the lightbox.
   ========================================================== */
.mp-frame, .fp-panel, [data-plan]{ position:relative; cursor:pointer; }

.mp-frame::after, .fp-panel::after, [data-plan]::after{
    content:"Enquire to view full screen";
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%) translateY(6px);
    background:rgba(14,54,43,.94); color:var(--gold,#C9A25A);
    font:500 11.5px/1 var(--font-sans,inherit); letter-spacing:1.1px; text-transform:uppercase;
    padding:10px 16px; border-radius:2px; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s ease;
    z-index:3;
}
.mp-frame:hover::after, .fp-panel:hover::after, [data-plan]:hover::after{
    opacity:1; transform:translateX(-50%) translateY(0);
}
/* once unlocked, no cue and a plain zoom cursor */
.mh-unlocked .mp-frame::after,
.mh-unlocked .fp-panel::after,
.mh-unlocked [data-plan]::after{ content:none; }
.mh-unlocked .mp-frame, .mh-unlocked .fp-panel, .mh-unlocked [data-plan]{ cursor:zoom-in; }

@media(max-width:700px){
    .mp-frame::after, .fp-panel::after, [data-plan]::after{
        opacity:1; transform:translateX(-50%); font-size:10.5px; padding:8px 12px;
    }
}

/* modal reply line */
.form-reply{
    margin:12px 0 0; font-size:13.5px; line-height:1.5;
    padding:10px 12px; border-radius:2px;
}
.form-reply.error{ background:rgba(192,57,43,.12); color:#ffb4a8; }
.mh-form .form-reply.error{ background:#fdf0ef; color:#c0392b; }

/* Preferred Visit Date sat half-width with dead space beside it */
.mh-form .ff:has(input[name="visit_date"]),
.mh-form .ff:has(#roi-visit){ grid-column:1 / -1; }

/* ==========================================================
   IMAGE + TEXT BANDS  (about-karjat)  - 21 Aug 2026
   Breaks up long stretches of copy with real imagery.
   ========================================================== */
.img-band{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,3.6vw,56px);
    align-items:center;
}
.img-band-flip .img-band-media{ order:2; }
.img-band-media{
    aspect-ratio:4/3;
    background-size:cover;
    background-position:center;
    min-height:280px;
}
.img-band-text .rule-gold{ margin:14px 0 18px; }
.img-band-text p{ font-size:15.5px; line-height:1.75; }

.tick-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:11px; }
.tick-list li{
    position:relative; padding-left:26px; font-size:14.5px; line-height:1.6;
}
.tick-list li::before{
    content:""; position:absolute; left:0; top:.55em;
    width:9px; height:9px; border-radius:50%;
    background:var(--gold,#C9A25A);
}
@media(max-width:860px){
    .img-band{ grid-template-columns:1fr; }
    .img-band-flip .img-band-media{ order:0; }
    .img-band-media{ min-height:220px; }
}

/* ==========================================================
   FAQ ACCORDION
   ========================================================== */
.faq-list{ max-width:900px; margin:0 auto; }
.faq-item{
    border-bottom:1px solid rgba(14,54,43,.14);
    background:transparent;
}
.faq-item summary{
    cursor:pointer; list-style:none;
    padding:20px 44px 20px 0;
    position:relative;
    font:500 17px/1.45 var(--font-serif,serif);
    color:var(--green,#0E362B);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    font:300 24px/1 var(--font-sans,inherit); color:var(--gold,#C9A25A);
    transition:transform .25s ease;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item summary:hover{ color:var(--teal,#2f7d6d); }
.faq-body{ padding:0 44px 22px 0; }
.faq-body p{ margin:0; font-size:15px; line-height:1.75; color:#4a5a54; }
@media(max-width:600px){
    .faq-item summary{ font-size:15.5px; padding-right:36px; }
    .faq-body{ padding-right:0; }
}

/* ==========================================================
   BLOG v2 — Aug 2026
   Adds .section-lg (was referenced but never defined, which is
   why the blog listing had zero vertical padding), plus a full
   article layout, breadcrumbs, tags and post navigation.
   ========================================================== */

/* the class blog/index.php was calling but that did not exist */
.section-lg{padding:clamp(72px,9vw,132px) 0;display:flow-root}

/* ---------- breadcrumbs ---------- */
.mh-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px}
.mh-breadcrumb a{color:var(--green);transition:color .3s}
.mh-breadcrumb a:hover{color:var(--teal)}
.mh-breadcrumb span[aria-hidden]{opacity:.4}
.mh-breadcrumb [aria-current]{color:var(--muted);max-width:min(52ch,100%);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- listing hero ---------- */
.blog-list-hero{padding:clamp(56px,7vw,88px) 28px clamp(34px,4vw,52px);background:var(--cream);text-align:center}
.blog-list-hero h1{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(34px,5vw,58px);line-height:1.08;color:var(--green);margin:0}
.blog-list-sub{max-width:620px;margin:18px auto 0;font-weight:300;
  font-size:clamp(15px,1.5vw,18px);line-height:1.7;color:var(--muted)}

/* ---------- listing grid ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px)}
.blog-grid[data-count="1"]{grid-template-columns:minmax(0,620px);justify-content:center}
.blog-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,460px));justify-content:center}
@media(max-width:1000px){
  .blog-grid,.blog-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .blog-grid[data-count="1"]{grid-template-columns:minmax(0,560px)}
}
@media(max-width:680px){
  .blog-grid,.blog-grid[data-count="1"],.blog-grid[data-count="2"]{grid-template-columns:minmax(0,1fr)}
}

.blog-card{display:block}
.bc-link{display:block;color:var(--text);transition:transform .45s var(--ease)}
.bc-link:hover{transform:translateY(-5px)}
.bc-image{display:block;aspect-ratio:16/10;background-color:var(--cream-2);
  background-size:cover;background-position:center;margin-bottom:20px;
  transition:filter .45s var(--ease)}
.bc-link:hover .bc-image{filter:brightness(1.05)}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.bc-date,.bc-read{font-weight:600;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal)}
.bc-read{color:var(--muted)}
.bc-dot{color:var(--muted);opacity:.6}
.bc-title{font-family:var(--font-serif);font-weight:500;font-size:clamp(22px,2.3vw,27px);
  line-height:1.18;color:var(--green);margin:0 0 12px}
.bc-excerpt{display:block;font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.bc-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--green);
  padding-bottom:5px;border-bottom:1px solid var(--green);transition:opacity .3s}
.bc-more::after{content:"→"}
.bc-link:hover .bc-more{opacity:.6}

.blog-empty{padding:clamp(60px,8vw,96px) 20px;text-align:center;color:var(--muted)}
.blog-empty .link-arrow{margin:0 4px}

/* ---------- article ---------- */
.blog-post-hero{padding:clamp(56px,6vw,84px) 28px clamp(26px,2.8vw,36px);
  background:var(--cream);text-align:center}
.blog-post-hero .bp-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;font-weight:600;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px}
.blog-post-hero .bp-meta span:not([aria-hidden]){color:var(--muted)}
.blog-post-hero .bp-date{color:var(--teal)}
.blog-post-hero h1{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(32px,4.6vw,58px);line-height:1.08;color:var(--green);
  max-width:900px;margin:0 auto}

/* Hero image sits FLUSH under the cream title band - no white gap above it.
   <figure> carries a default browser margin of 1em 40px, so it is zeroed
   explicitly here rather than relying on a shorthand. */
.blog-post-figure{max-width:1100px;margin:0 auto;padding:0;display:block}
.blog-post-figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0}
@media(min-width:900px){.blog-post-figure{padding:0 28px}}

.blog-post-body{max-width:740px;margin:clamp(44px,5.5vw,68px) auto;padding:0 28px;
  font-size:clamp(16px,1.6vw,18px);line-height:1.85;color:var(--text)}
.blog-post-body > *:first-child{margin-top:0}
.blog-post-body h2{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(27px,3.2vw,36px);line-height:1.15;color:var(--green);margin:48px 0 18px}
.blog-post-body h3{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(21px,2.3vw,26px);line-height:1.2;color:var(--green);margin:36px 0 14px}
.blog-post-body p{margin:0 0 1.15em}
.blog-post-body ul,.blog-post-body ol{margin:0 0 1.4em;padding-left:22px}
.blog-post-body li{margin-bottom:.55em}
.blog-post-body li::marker{color:var(--gold)}
.blog-post-body a{color:var(--green);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px;transition:color .3s}
.blog-post-body a:hover{color:var(--teal)}
.blog-post-body strong{font-weight:600;color:var(--green)}
.blog-post-body img{margin:32px 0;width:100%}
.blog-post-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.blog-post-body blockquote{margin:32px 0;padding:4px 0 4px 26px;
  border-left:2px solid var(--gold);background:none}
.blog-post-body blockquote p{font-family:var(--font-serif);font-style:italic;
  font-weight:500;font-size:clamp(19px,2.1vw,23px);line-height:1.5;
  color:var(--green);margin:0}
.blog-post-body code{background:var(--cream-2);padding:2px 6px;font-size:.9em}
.blog-post-body pre{background:var(--green);color:var(--cream);padding:22px;
  overflow-x:auto;margin:28px 0}
.blog-post-body pre code{background:none;color:inherit;padding:0}
.blog-post-body table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.blog-post-body th,.blog-post-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.blog-post-body th{font-weight:600;color:var(--green);background:var(--cream-2)}

/* ---------- tags ---------- */
.blog-tags{display:flex;flex-wrap:wrap;gap:10px;max-width:740px;
  margin:0 auto clamp(40px,5vw,56px);padding:0 28px}
.blog-tags .tag{font-weight:600;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--green);background:var(--cream);padding:7px 14px}

/* ---------- in-article CTA ---------- */
.blog-post-cta{max-width:740px;margin:0 auto clamp(40px,5vw,56px);
  padding:clamp(32px,4vw,44px) clamp(26px,3vw,40px);background:var(--cream);text-align:center}
.blog-post-cta .eyebrow{justify-content:center}
.blog-post-cta h3{margin:0 0 14px}
.blog-post-cta p{font-size:16px;line-height:1.7;color:var(--muted);
  max-width:520px;margin:0 auto 26px}

/* ---------- prev / next ---------- */
.blog-postnav{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:740px;
  margin:0 auto clamp(40px,5vw,56px);padding:28px;border-top:1px solid var(--line)}
.blog-postnav .pn{display:flex;flex-direction:column;gap:8px;color:var(--text);transition:opacity .3s}
.blog-postnav .pn:hover{opacity:.62}
.blog-postnav .pn-next{text-align:right;align-items:flex-end}
.blog-postnav .pn-label{font-weight:600;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal)}
.blog-postnav .pn-title{font-family:var(--font-serif);font-size:19px;
  line-height:1.25;color:var(--green)}
@media(max-width:620px){
  .blog-postnav{grid-template-columns:1fr;gap:26px}
  .blog-postnav .pn-next{text-align:left;align-items:flex-start}
}

/* ---------- comments ---------- */
.blog-comments{max-width:740px;margin:0 auto clamp(56px,7vw,88px);
  padding:clamp(40px,5vw,56px) 28px 20px;border-top:1px solid var(--line)}
.blog-comments h3{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(24px,2.8vw,30px);color:var(--green);margin:0 0 26px}
.blog-comments .cm-form-head{margin-top:56px}
.comment{padding:22px 0;border-bottom:1px solid rgba(14,54,43,.08)}
.cm-name{font-weight:600;font-size:15px;color:var(--green);margin:0 0 3px}
.cm-date{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.cm-body{font-size:15px;line-height:1.65;margin:0}
.cm-empty{color:var(--muted);margin:0 0 12px}
.ff-hint{font-weight:400;font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0}

/* ---------- inline notices ---------- */
.mh-note{padding:16px 20px;background:var(--cream);color:var(--green);
  font-size:14px;line-height:1.6;margin-bottom:28px}
.mh-note-warn{background:#FDECEC;color:#8A2020}

/* ---------- blog listing CTA band ---------- */
.blog-cta .rule-gold{margin-bottom:24px}

/* ==========================================================
   v24 — Documentation Help as its own light section.
   It previously carried bg-green directly beneath the green
   stats band, so the two merged into one heavy dark slab and
   read as a single overloaded block.
   ========================================================== */
.doc-section{border-top:1px solid rgba(14,54,43,.08)}
.doc-section .doc-cell{color:var(--muted)}
.doc-section .doc-cell span{color:var(--muted)}
.doc-section .doc-ico{border-color:rgba(201,162,90,.65);color:var(--gold);background:#fff}
.doc-section .doc-cell:hover .doc-ico{background:rgba(201,162,90,.16);border-color:var(--gold)}

/* the stats band keeps its dark treatment and now reads as a
   deliberate divider rather than the top half of a bigger block */
.stats-band.bg-green + .doc-section{margin-top:0}
.footer-ig{display:inline-flex;align-items:center;gap:8px}
.footer-ig svg{flex:0 0 auto;opacity:.85}

/* v25 — Read more / Read less label swap on the SEO accordion */
.mh-accordion summary .rm-less{display:none}
.mh-accordion details[open] summary .rm-more{display:none}
.mh-accordion details[open] summary .rm-less{display:inline}
.mh-accordion .acc-body h3{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(19px,2vw,23px);line-height:1.25;color:var(--green);margin:30px 0 10px}
.mh-accordion .acc-body h3:first-child{margin-top:6px}
.mh-accordion .acc-body p{margin:0 0 14px;line-height:1.75}
.mh-accordion .acc-body ul{margin:0 0 16px;padding-left:20px}
.mh-accordion .acc-body li{margin-bottom:6px}
.mh-accordion .acc-body li::marker{color:var(--gold)}

/* ==========================================================
   v26 - HERO SLIDER
   Six stacked slides in one grid cell, cross-faded. The grid
   keeps the container as tall as the tallest slide, so nothing
   is absolutely positioned and the hero stays responsive.
   Slide 1 carries its image inline; slides 2-6 hold theirs in
   data-bg and only load when first shown, so five extra hero
   images never touch the initial page load.
   ========================================================== */
.hero-slider{position:relative;isolation:isolate;overflow:hidden}
.hs-viewport{display:grid}
.hs-slide{
    grid-area:1/1;
    min-height:92vh;
    --hs-grad:linear-gradient(100deg, rgba(14,54,43,.82) 0%, rgba(14,54,43,.55) 38%,
              rgba(14,54,43,.15) 70%, rgba(14,54,43,.05) 100%);
    background-image:var(--hs-grad), var(--hs-img, none);
    background-size:cover;
    background-position:center;
    opacity:0;visibility:hidden;
    transition:opacity .85s var(--ease,ease), visibility 0s linear .85s;
}
.hs-slide.is-active{
    opacity:1;visibility:visible;
    transition:opacity .85s var(--ease,ease), visibility 0s linear 0s;
}
/* headline-only slides: same look as an h1, without being one */
.hs-title{max-width:15ch}

/* --- controls, bottom right of the hero --- */
.hs-controls{
    position:absolute;left:0;right:0;bottom:clamp(24px,4.2vh,52px);z-index:3;
    width:min(var(--container),100%);margin-inline:auto;padding-inline:28px;
    display:flex;justify-content:flex-end;align-items:center;gap:16px;
    pointer-events:none;
}
.hs-controls > *{pointer-events:auto}
.hs-arrow{
    width:44px;height:44px;flex:none;border-radius:50%;padding:0;
    border:1px solid rgba(255,255,255,.45);background:rgba(6,28,22,.30);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    transition:background .25s var(--ease,ease),border-color .25s,transform .25s;
}
.hs-arrow:hover{background:var(--green,#0E362B);border-color:var(--gold,#C9A25A);transform:translateY(-2px)}
.hs-arrow:focus-visible{outline:2px solid var(--gold,#C9A25A);outline-offset:3px}
.hs-arrow svg{width:19px;height:19px}
.hs-dots{display:flex;align-items:center;gap:9px}
.hs-dot{
    width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid rgba(255,255,255,.75);background:transparent;
    transition:background .25s,border-color .25s,transform .25s;
}
.hs-dot:hover{background:rgba(255,255,255,.6)}
.hs-dot.is-active{background:var(--gold,#C9A25A);border-color:var(--gold,#C9A25A);transform:scale(1.3)}
.hs-dot:focus-visible{outline:2px solid var(--gold,#C9A25A);outline-offset:3px}

@media(max-width:860px){
    .hs-controls{gap:12px;bottom:clamp(18px,3.4vh,34px)}
    .hs-arrow{width:38px;height:38px}
    .hs-arrow svg{width:17px;height:17px}
}
@media(max-width:520px){
    .hs-slide{min-height:88vh}
    .hs-controls{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
    .hs-slide,.hs-slide.is-active{transition:none}
}

/* ==========================================================
   v26 - FLOATING "CONTACT US" TAB, rebuilt
   The label used to sit directly on the <button>, and browsers
   do not reliably honour writing-mode on button elements - it
   fell back to horizontal text with rotate(180deg), i.e. upside
   down. The vertical text now lives on an inner <span>, which
   every engine handles, with the -webkit- prefix for old Safari.
   ========================================================== */
.mh-float-contact button{
    display:block;padding:0;border:0;
    background:var(--green,#0E362B);color:var(--gold,#C9A25A);
    border-radius:0 6px 6px 0;
    box-shadow:0 6px 22px rgba(14,54,43,.28);
    -webkit-writing-mode:horizontal-tb;writing-mode:horizontal-tb;
    transform:none;
    -webkit-appearance:none;appearance:none;
    transition:background .3s var(--ease,ease),box-shadow .3s,transform .3s;
}
.mh-float-contact button:hover{
    padding:0;background:#14483a;
    box-shadow:0 8px 26px rgba(14,54,43,.38);
    transform:translateX(2px);
}
.mh-float-contact button:focus-visible{outline:2px solid var(--gold,#C9A25A);outline-offset:3px}
.mh-ft-inner{
    display:flex;align-items:center;gap:9px;
    -webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    padding:20px 11px;
    font:500 12px/1 var(--font-body,inherit);
    letter-spacing:1.6px;text-transform:uppercase;
}
.mh-ft-label{display:block;white-space:nowrap}
.mh-float-contact svg{width:15px;height:15px;flex:none;transform:rotate(90deg)}

/* The rail is 40px wide and the page container only reserves 28px
   of side padding, so below ~1340px the tab would sit on top of
   the first characters of every hero headline. Above it there is
   real margin either side and it clears the content cleanly.
   Header "Enquire Now" and the WhatsApp bubble carry the CTA
   below this width. Change the one number to move the threshold. */
@media(max-width:1339px){ .mh-float-contact{display:none} }
/* never let the rail sit over an open enquiry modal */
body.mh-modal-open .mh-float{opacity:0;pointer-events:none}
.mh-float{transition:opacity .25s}

/* ==========================================================
   v26 - FORM NOTE now carries the WhatsApp link
   ========================================================== */
.form-note a{color:var(--green,#0E362B);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:var(--gold,#C9A25A)}

/* ==========================================================
   v26 - FOOTER SOCIAL ROW under the Misty Hills logo
   ========================================================== */
.footer-logos{flex-direction:column;gap:clamp(16px,2.2vw,26px)}
.footer-social{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.4vw,16px);flex-wrap:wrap}
.footer-social a{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.26);color:#fff;
    transition:background .25s var(--ease,ease),border-color .25s,color .25s,transform .25s;
}
.footer-social a:hover{background:var(--gold,#C9A25A);border-color:var(--gold,#C9A25A);color:var(--green,#0E362B);transform:translateY(-2px)}
.footer-social a:focus-visible{outline:2px solid var(--gold,#C9A25A);outline-offset:3px}
.footer-social svg{width:17px;height:17px}
@media(max-width:600px){ .footer-social a{width:36px;height:36px} .footer-social svg{width:15px;height:15px} }

/* ==========================================================
   v26 - ABOUT MAGNA section
   ========================================================== */
.magna-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,4vw,58px);align-items:center}
.magna-media img{width:100%;height:auto;display:block}
.magna-text p{font-weight:300;font-size:16px;line-height:1.8;color:var(--text)}
.magna-text p:last-of-type{margin-bottom:0}
.magna-text strong{font-weight:600;color:var(--green,#0E362B)}
.magna-rera{
    margin-top:24px;padding-top:18px;
    border-top:1px solid var(--line,#E7E0D2);
    font-size:14.5px;line-height:1.7;
}
.magna-rera b{display:block;color:var(--green,#0E362B);letter-spacing:.4px;font-weight:600}
.magna-rera a{color:var(--gold,#C9A25A);text-decoration:underline;text-underline-offset:3px}
.magna-rera a:hover{color:var(--green,#0E362B)}
@media(max-width:860px){
    .magna-wrap{grid-template-columns:1fr;gap:28px}
    .magna-media{max-width:420px;margin-inline:auto}
}

/* ==========================================================
   v27 - HERO: image-only slide, and clickable banner slides
   ========================================================== */
/* slide 5 carries no text, so it needs no scrim over it */
.hs-slide.hs-plain{background-image:var(--hs-img,none)}
.hs-slide.hs-plain::after{content:none;background:none}
/* whole-slide link for the villa / apartment / resort / karjat banners.
   Sits above the artwork but under .hs-controls (z-index 3) so the
   arrows and dots still take their own clicks. */
.hs-link{position:absolute;inset:0;z-index:2;display:block}
.hs-slide .hero-inner{position:relative;z-index:1}
.hs-slide:has(.hs-link) .hero-inner{pointer-events:none}

/* ==========================================================
   v27 - MASTER PLAN HINT
   Was absolutely positioned bottom-right and landed on top of
   the caption underneath. Now a centred pill above the plan.
   ========================================================== */
.mp-hint-row{display:flex;justify-content:center;margin:0 0 20px}
.mp-hint{position:static;right:auto;bottom:auto;border-radius:2px}

/* ==========================================================
   v27 - ROI CALCULATOR, mobile overflow
   Grid and flex children default to min-width:auto, so the
   price figures and the "Holding period / 5 years" label were
   setting a min-content width wider than the white card and
   spilling out of its right edge.
   ========================================================== */
body{overflow-x:clip}
.roi-wrap{max-width:100%}
.roi-wrap > *,.roi-fixed,.roi-fx,.roi-field{min-width:0}
.roi-fx{overflow-wrap:anywhere}
.roi-fx b{font:500 clamp(20px,6vw,26px)/1.15 var(--font-serif,serif)}
.roi-field label{flex-wrap:wrap;gap:4px 14px}
.roi-field .roi-val{white-space:nowrap}
.roi-field input[type=range]{max-width:100%;box-sizing:border-box}
.roi-row{flex-wrap:wrap}
.roi-row span{min-width:0;overflow-wrap:anywhere}
.roi-row b{white-space:nowrap}
@media(max-width:560px){
    .roi-wrap{padding:20px 16px}
    .roi-fixed{grid-template-columns:1fr;gap:12px}
    .roi-fx{padding:16px 18px}
    .roi-out{padding:24px 18px}
    .roi-total b{font-size:24px}
}

/* ==========================================================
   v27 - THANK YOU page now uses the real header and footer
   ========================================================== */
body[data-page="thank-you"] .site-footer{text-align:center}
body[data-page="thank-you"] main > section .eyebrow{justify-content:center}

/* ==========================================================
   v28 - "ENQUIRE TO VIEW FULL SCREEN" BADGE
   The badge was absolutely positioned at the bottom of
   .fp-panel, but that panel holds the plan image AND its
   caption, so the badge landed straight on the caption text.
   It now sits in normal flow, after the caption, where it
   cannot collide with anything and reads as a real call to
   action under each plan.
   .mp-frame keeps its overlay - that element wraps the image
   on its own, with no text inside it to hit.
   ========================================================== */
.fp-panel::after{
    position:static;
    display:block;
    width:-moz-fit-content;
    width:fit-content;
    margin:14px auto 0;
    transform:none;
    opacity:1;
}
.fp-panel:hover::after{transform:none;opacity:1}