:root{
  --forest:#1B3A2D; --mid:#2D5C45; --sage:#3A6B52; --deep:#12271D;
  --cream:#F5F0E8;  --warm:#F5F0E8;
  --on-dark-h:#FFFFFF; --on-dark-body:#C8D8C0;
  --on-dark-stay:#9FE1CB; --on-dark-host:#E8B8C8; --on-dark-live:#C0DD97;
  --on-light-h:#1B3A2D; --on-light-body:#3A5947;
  --on-cream-h:#1B3A2D; --on-cream-label:#5C3E15;
  --cta-stay:#A48930; --cta-host:#5D002C; --cta-live:#3B6D11;
  --cta-host-light:#E8B8C8; /* pink companion — for use on dark backgrounds where Red Merlot fails contrast */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:400;line-height:1.75;color:var(--on-light-body);background:#fff;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.skip-link{position:absolute;top:-40px;left:0;background:var(--forest);color:#fff;padding:8px;z-index:1000;}
.skip-link:focus{top:0;}

/* ── BROW LABELS ─── */
.brow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;}
.brow-green{color:var(--cta-live);}
.brow-light{color:#9FE1CB;}
.brow-gold{color:var(--cta-stay);}

/* ── NAV ─── */
nav[role="navigation"]{position:sticky;top:0;z-index:100;background:var(--forest);height:80px;padding:0 64px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:inline-flex;align-items:center;text-decoration:none;}
.nav-links{display:flex;gap:36px;align-items:center;}
.nav-links a{font-size:14px;font-weight:500;color:rgba(200,216,192,.7);transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-links a.nav-active{color:#fff;}
.nav-cta{background:var(--cream);color:var(--forest);padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;transition:opacity .2s;}
.nav-cta:hover{opacity:.85;}
.nav-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-appearance:none;flex-shrink:0;}
.nav-burger span{width:22px;height:2px;background:#fff;}
.nav-mobile{display:none;position:fixed;top:64px;left:0;right:0;background:var(--forest);flex-direction:column;padding:24px;gap:8px;z-index:99;}
.nav-mobile.open{display:flex;}
.nav-mobile a{color:#fff;padding:16px 0;border-bottom:1px solid rgba(200,216,192,.15);font-size:16px;}

/* ── IN-PAGE NAV ─── */
.ipnav{position:sticky;top:80px;z-index:90;background:var(--cream);border-bottom:1px solid rgba(27,58,45,.1);min-height:53px;display:flex;align-items:stretch;}
.ipnav-inner{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 40px;gap:0;max-width:1280px;margin:0 auto;width:100%;}
.ipnav-inner::-webkit-scrollbar{display:none;}
.ipnav-link{font-size:13px;font-weight:500;color:rgba(27,58,45,.5);padding:16px 20px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;display:block;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;cursor:pointer;-webkit-appearance:none;}
.ipnav-link:hover{color:var(--on-light-h);}
.ipnav-link.active{color:var(--cta-live);border-bottom-color:var(--cta-live);}

/* ── HERO — split layout (copy left 2fr, image right 3fr) ─── */
/* Mirrors short-stays / events / residency hubs. ACF supplies the
   right-column image with focal point. Empty image state shows
   a dark forest gradient. Stacks 1-column on mobile. */
.hero{
	background:var(--surface-forest,#1B3A2D);
	min-height:88vh;
	display:grid;grid-template-columns:2fr 3fr;
	align-items:center;
	overflow:hidden;
	position:relative;
	color:#fff;
}
.hero-copy{
	padding:100px 64px 80px;
	display:flex;flex-direction:column;justify-content:center;
	position:relative;z-index:1;
}
.hero-img{
	height:88vh;
	background:linear-gradient(160deg,#2D5C45,#1B3A2D);
	background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:0;
}
.hero-img-ph{
	font-size:11px;letter-spacing:.07em;
	color:rgba(200,216,192,.2);
	text-align:center;line-height:2;
}
.hero-brow{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-live);margin-bottom:20px;}
.hero-h{font-family:'CooperBT',serif;font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1.08;margin-bottom:24px;text-wrap:balance;letter-spacing:-.01em;color:#fff;}
.hero-sub{font-size:18px;font-weight:400;line-height:1.8;max-width:480px;color:rgba(200,216,192,.85);text-wrap:pretty;}

/* ── SHARED SECTION ─── */
.section{padding:96px 64px;}
.section-inner{max-width:1152px;margin:0 auto;}
.section.section-cream .section-inner{max-width:880px;} /* text-only sections feel self-contained */
.section-cream{background:var(--cream);}
.section-white{background:#fff;}
.section-dark{background:var(--forest);color:#fff;}
.section-mid{background:#243F30;color:#fff;}

.s-h2{font-family:'CooperBT',serif;font-size:clamp(28px,3.5vw,44px);font-weight:500;line-height:1.15;text-wrap:balance;margin-bottom:20px;color:var(--on-light-h);}
.s-h2-light{color:#fff;}
.s-h3{font-family:'CooperBT',serif;font-size:clamp(22px,2.5vw,32px);font-weight:500;line-height:1.2;text-wrap:balance;margin-bottom:16px;color:var(--on-light-h);}
.s-h3-light{color:#fff;}
.s-lead{font-size:18px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;margin-bottom:24px;max-width:880px;}
/* .philosophy-body is a wrapper sibling to .s-lead with the same
   typography. Kept separate so .s-lead can still be used standalone
   on single paragraphs (in land-intro, plan header, variety header). */
.philosophy-body p{font-size:18px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;margin-bottom:24px;max-width:880px;}
.philosophy-body p:last-child{margin-bottom:0;}
.s-lead-light{color:rgba(200,216,192,.85);}
.s-body{font-size:17px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;margin-bottom:20px;}
.s-body-light{color:rgba(200,216,192,.78);}
.s-cta{font-size:15px;font-weight:500;color:var(--cta-live);display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;transition:opacity .2s;background:none;border:none;font-family:inherit;cursor:pointer;-webkit-appearance:none;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.s-cta::after{content:'→';font-size:16px;}
.s-cta:hover{opacity:.7;}

/* Blue Zone icons row — five small representational marks for the original zones */
.phil-row{display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center;margin-bottom:32px;}
.phil-text{max-width:760px;}
@media (max-width:1100px){.phil-row{grid-template-columns:1fr;gap:0;} .phil-row .cluster-slot{display:none;}}
.bz-zones{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;margin:48px 0 16px;
  padding:32px 0;
  border-top:1px solid rgba(27,58,45,.1);
  border-bottom:1px solid rgba(27,58,45,.1);
}
.bz-zone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.bz-icon{
  width:44px;height:44px;
  color:var(--cta-live);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.bz-icon svg{width:100%;height:100%;}
.bz-name{
  font-family:'CooperBT',serif;font-size:16px;font-weight:500;
  color:var(--on-light-h);line-height:1.2;
}
.bz-place{
  font-size:12px;color:rgba(27,58,45,.5);
  letter-spacing:.04em;
}
.bz-zones-caption{
  font-size:14px;color:rgba(27,58,45,.6);
  line-height:1.65;font-style:italic;text-wrap:pretty;
  max-width:680px;margin:0;
}
.s-cta-light{color:#9FE1CB;}

/* ── TWO-COL LAYOUTS ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.two-wide{display:grid;grid-template-columns:3fr 2fr;gap:80px;align-items:center;}
.two-wide-r{display:grid;grid-template-columns:2fr 3fr;gap:80px;align-items:center;}

/* ── IMAGE PLACEHOLDERS ─── */
.ph-img{position:relative;border-radius:4px;overflow:hidden;}
.ph-img-dark{background:linear-gradient(145deg,#243F30 0%,#2D5C45 50%,#1B3A2D 100%);}
.ph-img-sage{background:linear-gradient(145deg,#3A6B52 0%,#2D5C45 100%);}
.ph-img-light{background:linear-gradient(145deg,#DAEEDF,#B0BFA1);}

/* ── STORY SECTION ─── */
.story{background:var(--cream);padding:120px 64px;}
.story-inner{max-width:880px;margin:0 auto;}
.story-brow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cta-live);margin-bottom:24px;}
.story-h{font-family:'CooperBT',serif;font-size:clamp(32px,4vw,52px);font-weight:500;line-height:1.18;color:var(--on-light-h);margin-bottom:48px;text-wrap:balance;letter-spacing:-.005em;}
/* .story-body is now a wrapper. Styles cascade to <p> children, so
   paragraphs pasted into the ACF wysiwyg field (which strips classes)
   still render with the right typography. Same pattern below for
   .arch-body, .philosophy-body, .land-body, .seremban-body. */
.story-body p{font-size:18px;line-height:1.9;color:var(--on-light-body);text-wrap:pretty;margin-bottom:28px;max-width:880px;}
.story-body p:last-child{margin-bottom:0;}
.story-body em{font-style:italic;color:#5C3E15;}
.story-quote{font-family:'CooperBT',serif;font-size:26px;line-height:1.45;color:var(--on-light-h);font-style:italic;border-left:3px solid var(--cta-live);padding:8px 0 8px 28px;margin:40px 0;text-wrap:balance;}
.story-photo-wrap{margin:56px 0 0;}
.story-photo{height:440px;width:100%;border-radius:4px;background:linear-gradient(145deg,#3A6B52 0%,#2D5C45 50%,#1B3A2D 100%);position:relative;}
.story-photo-caption{font-size:13px;line-height:1.65;color:var(--on-cream-label);margin-top:16px;font-style:italic;max-width:600px;}

/* ── ARCHITECTURE SECTION ─── */
.arch{background:var(--forest);padding:100px 64px;color:#fff;}
.arch-inner{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:2fr 3fr;gap:80px;align-items:center;}
.arch-copy .brow{color:#9FE1CB;margin-bottom:16px;display:block;}
.arch-h{font-family:'CooperBT',serif;font-size:clamp(28px,3.5vw,42px);font-weight:500;line-height:1.2;color:#fff;margin-bottom:28px;text-wrap:balance;}
.arch-body p{font-size:17px;line-height:1.85;color:rgba(200,216,192,.82);text-wrap:pretty;margin-bottom:20px;}
.arch-body p:last-child{margin-bottom:0;}
.arch-tulou{font-family:'CooperBT',serif;font-size:15px;font-style:italic;color:rgba(200,216,192,.7);margin-top:32px;padding-top:24px;border-top:1px solid rgba(200,216,192,.15);}
.arch-img{height:520px;border-radius:4px;background:linear-gradient(160deg,#2D5C45 0%,#1B3A2D 60%,#12271D 100%);position:relative;}

/* ── LAND SECTION ─── */
.land{background:#fff;padding:100px 64px;}
.land-inner{max-width:1152px;margin:0 auto;}
.land-intro{margin-bottom:48px;}
.land-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:64px;}
.land-full-img{height:420px;width:100%;border-radius:4px;background:linear-gradient(180deg,#B0BFA1 0%,#3A6B52 50%,#1B3A2D 100%);position:relative;margin-bottom:48px;}
.land-body p{font-size:17px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;margin-bottom:20px;}
.land-body p:last-child{margin-bottom:0;}
.land-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;background:rgba(27,58,45,.06);border-radius:8px;overflow:hidden;}
.land-stat{background:var(--cream);padding:28px 24px;text-align:left;}
.land-stat-n{font-family:'CooperBT',serif;font-size:36px;font-weight:500;color:var(--on-light-h);line-height:1;margin-bottom:6px;}
.land-stat-label{font-size:12px;color:var(--on-light-body);line-height:1.5;}

/* ── MASTER PLAN SECTION ─── */
.plan{background:var(--cream);padding:100px 64px;}
.plan-inner{max-width:1280px;margin:0 auto;}
.plan-header{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:start;margin-bottom:48px;}
.plan-canvas-wrap{background:#fff;border-radius:8px;padding:28px;border:1px solid rgba(27,58,45,.1);position:relative;}
.plan-canvas{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(145deg,#D9E4D1 0%,#B0BFA1 50%,#8FA280 100%);border-radius:4px;overflow:hidden;}
.plan-canvas-note{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.92);padding:6px 12px;border-radius:4px;font-size:11px;font-weight:500;color:var(--on-light-h);letter-spacing:.04em;}



/* ── SEREMBAN SECTION ─── */
.seremban{background:#fff;padding:100px 64px;}
.seremban-inner{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:3fr 2fr;gap:72px;align-items:center;}
.seremban-h{font-family:'CooperBT',serif;font-size:clamp(28px,3.5vw,40px);font-weight:500;line-height:1.2;color:var(--on-light-h);margin-bottom:28px;text-wrap:balance;}
.seremban-body p{font-size:17px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;margin-bottom:24px;max-width:880px;}
.seremban-body p:last-child{margin-bottom:0;}
.seremban-img{height:480px;border-radius:4px;background:linear-gradient(165deg,#A48930 0%,#5C3E15 70%,#12271D 100%);position:relative;}

/* ── VARIETY (SOMETHING FOR EVERYONE) ─── */
.variety{background:var(--forest);padding:100px 64px;color:#fff;}
.variety-inner{max-width:1152px;margin:0 auto;}
.variety-header{max-width:720px;margin-bottom:64px;}
.variety-grid{display:grid;grid-template-columns:repeat(var(--card-count, 3), 1fr);gap:24px;}
.variety-card{background:rgba(255,255,255,.04);border:1px solid rgba(200,216,192,.15);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column;min-height:260px;transition:background .2s,border-color .2s;}
.variety-card:hover{background:rgba(255,255,255,.06);border-color:rgba(200,216,192,.28);}
.variety-brow{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.variety-brow.stay{color:#C7A857;}
.variety-brow.host{color:var(--on-dark-host);}
.variety-brow.live{color:var(--on-dark-live);}
.variety-brow.quiet{color:#9FE1CB;}
.variety-brow.family{color:#9787C7;}
.variety-brow.creative{color:#FDCDA7;}
.variety-h{font-family:'CooperBT',serif;font-size:22px;font-weight:500;color:#fff;margin-bottom:14px;line-height:1.2;text-wrap:balance;}
.variety-body{font-size:15px;line-height:1.75;color:rgba(200,216,192,.78);text-wrap:pretty;margin-bottom:20px;flex:1;}
.variety-link{font-size:14px;font-weight:500;color:#9FE1CB;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;transition:opacity .2s;}
.variety-link::after{content:'→';font-size:15px;}
.variety-link:hover{opacity:.75;}
.variety-link.stay{color:#C7A857;}
.variety-link.host{color:var(--on-dark-host);}
.variety-link.live{color:var(--on-dark-live);}

/* ── LOOKING AHEAD ─── */
.ahead{background:var(--cream);padding:80px 64px;}
.ahead-inner{max-width:840px;margin:0 auto;text-align:left;}
.ahead-brow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cta-live);margin-bottom:20px;}
.ahead-h{font-family:'CooperBT',serif;font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1.2;color:var(--on-light-h);margin-bottom:24px;text-wrap:balance;}
.ahead-body{font-size:17px;line-height:1.85;color:var(--on-light-body);text-wrap:pretty;}

/* ── BOTTOM CTA ─── */
.bottom-cta{background:#fff;padding:120px 64px;text-align:center;}
.bottom-cta-inner{max-width:720px;margin:0 auto;}
.bottom-cta-brow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cta-live);margin-bottom:24px;}
.bottom-cta-h{font-family:'CooperBT',serif;font-size:clamp(30px,4vw,48px);font-weight:500;line-height:1.15;color:var(--on-light-h);margin-bottom:32px;text-wrap:balance;}
.bottom-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 36px;background:var(--forest);color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-decoration:none;gap:10px;}
.bottom-cta-btn:hover{opacity:.88;}
.bottom-cta-btn::after{content:'→';font-size:17px;}

/* ── NEWSLETTER ─── */
/* ── NEWSLETTER ── prominent serene-green section, mirrors homepage v19 ── */
.newsletter{
  background:#DAEEDF;  /* Serene Green — brand primary companion */
  padding:88px 64px;
  border-top:1px solid rgba(27,58,45,.08);
  position:relative;
  overflow:hidden;
}
.newsletter-inner{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.newsletter-h{
  font-family:'CooperBT',serif;
  font-size:clamp(28px,3.2vw,36px);
  font-weight:500;color:var(--forest);
  margin-bottom:12px;text-wrap:balance;line-height:1.15;
}
.newsletter-sub{
  font-size:17px;color:var(--on-light-body);
  line-height:1.7;text-wrap:pretty;
}
.newsletter-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.newsletter-input{
  flex:1;height:52px;
  border:1px solid rgba(27,58,45,.15);
  border-radius:6px;padding:0 16px;
  font-size:15px;font-family:inherit;color:var(--on-light-h);
  background:#fff;outline:none;transition:border-color .2s;
}
.newsletter-input:focus{border-color:var(--forest);}
.newsletter-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B3A2D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:40px;cursor:pointer;
}
.newsletter-input::placeholder{color:rgba(27,58,45,.35);}
.newsletter-btn{
  height:52px;padding:0 32px;
  background:var(--forest);color:#fff;
  border:none;border-radius:6px;
  font-size:15px;font-weight:500;font-family:inherit;
  cursor:pointer;white-space:nowrap;transition:opacity .2s;
  -webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  grid-column:1;align-self:center;width:fit-content;
}
.newsletter-btn:hover{opacity:.85;}
.newsletter-note{
  font-size:13px;color:rgba(27,58,45,.55);
  margin-top:2px;grid-column:1 / -1;
}
/* desktop: heading block collapses so copy fills the grid cell as before */



/* ── FOOTER ─── */
footer{background:var(--deep);padding:64px;}
.footer-inner{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;}
.footer-logo{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:18px;}
.footer-logo-img{height:30px;width:auto;display:block;}
.footer-label{font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark-body);margin-bottom:10px;}
.footer-text{font-size:15px;color:var(--on-dark-body);line-height:1.8;}
.footer-link{display:inline-flex;align-items:center;margin-top:16px;font-size:14px;font-weight:500;color:#9FE1CB;border:1.5px solid rgba(157,225,203,.4);padding:10px 20px;border-radius:4px;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .2s,border-color .2s;}
.footer-link:hover{background:rgba(157,225,203,.08);border-color:rgba(157,225,203,.7);}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.social-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(200,216,192,.2);display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.social-btn:hover{border-color:rgba(200,216,192,.6);background:rgba(200,216,192,.08);}
.social-btn svg{width:18px;height:18px;fill:rgba(200,216,192,.6);transition:fill .2s;}
.social-btn:hover svg{fill:rgba(200,216,192,1);}
.footer-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;}
.footer-list a{color:var(--on-dark-body);transition:color .2s;}
.footer-list a:hover{color:#fff;}
.footer-map{display:flex;gap:10px;align-items:center;font-size:13px;margin-top:16px;}
.footer-map a{color:var(--on-dark-body);border-bottom:1px solid rgba(200,216,192,.3);padding-bottom:1px;transition:color .2s,border-color .2s;}
.footer-map a:hover{color:#fff;border-bottom-color:rgba(200,216,192,.6);}
.footer-map .sep{color:rgba(200,216,192,.25);}
.footer-bottom{max-width:1152px;margin:24px auto 0;padding-top:20px;border-top:1px solid rgba(200,216,192,.06);font-size:13px;color:var(--on-dark-body);}
.footer-policies{max-width:1152px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(200,216,192,.1);display:flex;flex-wrap:wrap;gap:24px;font-size:13px;}
.footer-policies a{color:rgba(200,216,192,.65);transition:color .2s;}
.footer-policies a:hover{color:rgba(200,216,192,1);}

/* ── MYLO BADGE ─── */
.mylo-float{position:fixed;bottom:28px;right:28px;z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;}
.mylo-circle{width:58px;height:58px;background:var(--forest);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(27,58,45,.3);position:relative;border:2px solid rgba(200,216,192,.25);transition:transform .2s,box-shadow .2s;}
.mylo-float:hover .mylo-circle{transform:scale(1.06);box-shadow:0 6px 28px rgba(27,58,45,.4);}
.mylo-m{font-family:'CooperBT',serif;font-size:24px;font-weight:500;color:var(--on-dark-body);line-height:1;}
.mylo-dot{position:absolute;top:2px;right:2px;width:12px;height:12px;background:#4CAF50;border-radius:50%;border:2.5px solid white;animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.mylo-label{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--on-light-h);background:#fff;padding:5px 16px;border-radius:20px;box-shadow:0 2px 12px rgba(27,58,45,.14);white-space:nowrap;border:0.5px solid rgba(27,58,45,.1);}

/* ── MODAL styles intentionally removed —
   the theme handles modals globally (header.php / footer.php / modals.php).
   v30 had its own self-contained modal patterns that conflicted with the
   theme's modal markup and caused a bare .modal panel to render visibly
   in the top-left of the About page. */

/* ── RESPONSIVE ─── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

@media(max-width:860px){
  nav[role="navigation"]{padding:0 20px;height:64px;}
  .nav-links,.nav-cta{display:none;}
  .nav-burger{display:flex;}

  .ipnav{top:64px;}
  .ipnav-inner{padding:0 16px;}
  .ipnav-link{padding:14px 14px;font-size:13px;}

  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:auto;
    align-items:stretch;
  }
  .hero-img{grid-row:1;height:60vh;min-height:360px;max-height:580px;}
  .hero-copy{grid-row:2;padding:48px 24px 56px;}

  .section,.story,.arch,.land,.plan,.seremban,.variety,.ahead,.bottom-cta{padding:64px 24px;}
  .newsletter{padding:56px 24px;}
  footer{padding:48px 24px;}

  .two-col,.two-wide,.two-wide-r{grid-template-columns:1fr;gap:40px;}
  .arch-inner{grid-template-columns:1fr;gap:40px;}
  .arch-img{height:320px;}
  .land-top{grid-template-columns:1fr;gap:32px;}
  .land-full-img{height:320px;}
  .seremban-inner{grid-template-columns:1fr;gap:40px;}
  .seremban-img{height:300px;}
  .variety-grid{grid-template-columns:1fr;}
  .plan-canvas{aspect-ratio:4/3;}

  /* Newsletter mirrors homepage: hide desktop cluster, inline cluster appears next to heading */
  .newsletter-inner{grid-template-columns:1fr;gap:32px;}
  
  .newsletter-input{width:100%;}
  .newsletter-btn{width:100%;height:52px;grid-column:auto;}
  .newsletter-note{margin-top:0;text-align:center;}

  .footer-inner{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "touch policies";gap:40px 32px;}
  .footer-inner > div:nth-child(1){grid-area:brand;}
  .footer-inner > div:nth-child(2){grid-area:touch;}
  .footer-inner > div:nth-child(3){grid-area:policies;}
  .footer-bottom{flex-direction:column !important;align-items:flex-start !important;gap:6px !important;}

  .story-quote{font-size:20px;padding-left:20px;margin:32px 0;}
  .story-photo{height:280px;}

  .mylo-float{bottom:20px;right:16px;}

  /* Blue Zone icons — keep 5 across at tablet, just smaller */
  .bz-zones{gap:12px;padding:24px 0;margin:36px 0 12px;}
  .bz-icon{width:36px;height:36px;}
  .bz-name{font-size:14px;}
  .bz-place{font-size:11px;}

  .cluster-slot{display:none;}

  .plan-header{grid-template-columns:1fr;gap:0;}
}

@media(max-width:480px){
  body{font-size:16px;}
  .section,.story,.arch,.land,.plan,.seremban,.variety,.ahead,.bottom-cta{padding:48px 20px;}
  .newsletter{padding:48px 20px;}
  
  footer{padding:40px 20px;}
  .hero-copy{padding:40px 20px 48px;}
  .hero-h{font-size:36px;line-height:1.1;}
  .hero-sub{font-size:16px;max-width:100%;}
  .variety-card{padding:28px 24px;min-height:auto;}
  .bottom-cta-btn{width:100%;}
  .plan-canvas-wrap{padding:16px;}
  .story-quote{font-size:19px;padding-left:16px;margin:28px 0;}
  .story-photo{height:240px;}
  .arch-img{height:260px;}
  /* Blue Zone icons — 2-col on smallest screens, last cell spans full width */
  .bz-zones{grid-template-columns:repeat(2,1fr);gap:20px;}
  .bz-zone:last-child{grid-column:1 / -1;}
  .seremban-img{height:240px;}
  .land-full-img{height:260px;}

  .footer-inner{grid-template-columns:1fr;grid-template-areas:"brand" "touch" "policies";gap:32px;}

  .newsletter-form{grid-template-columns:1fr;gap:10px;}

  
}

.cluster-slot{width:var(--cluster-w,clamp(180px,20vw,260px));aspect-ratio:var(--cluster-aspect,1);border:1.5px dashed rgba(27,58,45,.22);border-radius:12px;display:flex;align-items:center;justify-content:center;pointer-events:none;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:contain;}
.cluster-slot::before{content:'Illustration cluster';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(27,58,45,.4);font-family:'DM Sans',sans-serif;}



/* ===========================================================
   MAP UPGRADE — category-chip filter + 25-pin overlay system
   Replaces v30's numbered 15-marker pattern.
   Pins fade in by category. Tap chip to filter, tap again to clear.
=========================================================== */

.plan-layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Pin overlay container — absolute over the canvas */
.plan-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   LAYERED MAP IMAGES — wide (default) ⇄ zoomed close-up when a
   non-Outdoor category is selected. The wide map is also used for
   Outdoor pins and as the lightbox view. Pin containers swap in
   step with the images.

   The transition feels like a CAMERA ZOOM rather than a flat fade:
     - Wide image scales up (toward the building cluster) and fades
     - Zoom image starts slightly small and settles into place
   data-view on .plan-canvas is toggled by about.js:
     - data-view="wide" (default + Outdoor)  → wide image, wide pins
     - data-view="zoom" (any other category) → zoom image, zoom pins
   ──────────────────────────────────────────────────────────────── */
.plan-canvas-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	will-change: transform, opacity;
	transition:
		opacity 720ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 720ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wide image: anchored on the building cluster so "zooming in"
   feels like the camera moves toward that part of the map.
   The 52% 42% values come from the building-cluster centroid in
   the default pin set; tune here if the wide artwork ever shifts. */
.plan-canvas-img-wide {
	transform-origin: 52% 42%;
}

/* Zoom image starts subtly under-sized so it "settles into place"
   rather than appearing instantly. */
.plan-canvas-img-zoom {
	opacity: 0;
	transform: scale(0.94);
	transform-origin: center;
	pointer-events: none;
}

/* Zoom view active: wide scales past the frame and fades; zoom
   eases up to full size and fades in. */
.plan-canvas[data-view="zoom"] .plan-canvas-img-wide {
	opacity: 0;
	transform: scale(1.55);
	pointer-events: none;
}
.plan-canvas[data-view="zoom"] .plan-canvas-img-zoom {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Pin containers crossfade in step. Slightly faster than the map
   itself so pins clear before the new map is fully present, which
   reads as cleaner. */
.plan-pins-wide,
.plan-pins-zoom {
	transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
.plan-pins-zoom {
	opacity: 0;
}
.plan-canvas[data-view="zoom"] .plan-pins-wide {
	opacity: 0;
}
.plan-canvas[data-view="zoom"] .plan-pins-zoom {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.plan-canvas-img,
	.plan-canvas-img-wide,
	.plan-canvas-img-zoom,
	.plan-pins-wide,
	.plan-pins-zoom {
		transition: none;
		transform: none;
	}
}

/* ────────────────────────────────────────────────────────────────
   PINS — hidden by default. Only appear when a category chip is
   active, and only for the matching category. White interior with
   dark forest border reads cleanly on every part of the map (cream
   paths, dark navy buildings, sage greens).
   ──────────────────────────────────────────────────────────────── */
.plan-pin-dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--surface-deep, #12271D);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 320ms ease,
	            box-shadow 320ms ease;
}

.plan-pins.is-filtered .plan-pin-dot.is-match {
	opacity: 1;
	pointer-events: auto;
}

.plan-pin-dot:hover,
.plan-pin-dot:focus-visible {
	transform: translate(-50%, -50%) scale(1.4);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4),
	            0 0 0 6px rgba(18, 39, 29, 0.18);
	outline: none;
	z-index: 4;
}

/* ────────────────────────────────────────────────────────────────
   LABELS — each pin has its own label sitting adjacent to the dot.
   Direction (right / left / above / below) is set per pin via the
   `label_side` field in PHP. Labels wrap naturally so long names
   like "Forum G, Forum 1, Agora (Multipurpose Function Rooms)" stay
   readable instead of running off the pill.

   CSS can't natively shrink a wrapped box to the width of its
   longest line — max-width caps the box but leaves whitespace
   beside shorter lines. JS in about.js measures the rendered text
   with the Range API and sets the width to the longest line + the
   horizontal padding. Result: pill hugs the wrapped text tightly.
   ──────────────────────────────────────────────────────────────── */
.plan-pin-label {
	position: absolute;
	background: var(--surface-deep, #12271D);
	color: #fff;
	padding: 7px 14px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	/* Allow wrapping; balance keeps wrapped lines visually even. */
	white-space: normal;
	max-width: 220px;
	text-wrap: balance;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	transition: opacity 320ms ease;
}

/* Side-specific positioning. `left` / `top` are set inline to the
   pin's percentage; transform offsets the pill from that anchor in
   the requested direction with a small gap (10px). */
.plan-pin-label.side-right {
	transform: translate(14px, -50%);
}
.plan-pin-label.side-left {
	transform: translate(calc(-100% - 14px), -50%);
	text-align: right;
}
.plan-pin-label.side-above {
	transform: translate(-50%, calc(-100% - 14px));
	text-align: center;
}
.plan-pin-label.side-below {
	transform: translate(-50%, 14px);
	text-align: center;
}

.plan-pins.is-filtered .plan-pin-label.is-match {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.plan-pin-dot, .plan-pin-label { transition: opacity 0ms; }
}

/* View larger button — sits inside .plan-canvas-wrap */
.plan-zoom {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .95);
	border: none;
	color: var(--on-light-h, #1B3A2D);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 100px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: background .15s ease;
	z-index: 2;
}
.plan-zoom:hover,
.plan-zoom:focus-visible {
	background: #fff;
	outline: none;
}
.plan-zoom svg { width: 16px; height: 16px; }

/* Category chips */
.plan-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}
.plan-cat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: rgba(27, 58, 45, .06);
	border: 1px solid rgba(27, 58, 45, .12);
	color: var(--on-light-body, #3A5947);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	border-radius: 100px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	min-height: 44px;
}
.plan-cat:hover {
	background: rgba(27, 58, 45, .1);
	border-color: rgba(27, 58, 45, .2);
}
.plan-cat-dot {
	display: none; /* not a legend anymore — pins are uniform colour */
}
.plan-cat-count {
	font-size: 12px;
	opacity: .55;
	margin-left: 2px;
}
.plan-cat.is-active {
	background: var(--cta-live, #3B6D11);
	color: #fff;
	border-color: var(--cta-live, #3B6D11);
}
.plan-cat.is-active .plan-cat-count { color: #fff; opacity: .8; }


/* ===========================================================
   MAP LIGHTBOX — full-screen zoom view
=========================================================== */
.plan-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(18, 39, 29, .95);
	z-index: 9000;
	display: none;
	padding: 24px;
}
.plan-lightbox[aria-hidden="false"] {
	display: flex;
	flex-direction: column;
}
.plan-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	z-index: 10;
	transition: background .15s ease;
}
.plan-lightbox-close:hover,
.plan-lightbox-close:focus-visible {
	background: rgba(255, 255, 255, .22);
	outline: none;
}
.plan-lightbox-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: auto;
	min-height: 0;
}
.plan-lightbox-map-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
}
.plan-lightbox-map {
	position: absolute;
	inset: 0;
	overflow: auto;
	background: rgba(255, 255, 255, .04);
	border-radius: 8px;
	touch-action: pan-x pan-y;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
}
.plan-lightbox-stage {
	position: relative;
	flex-shrink: 0;
	transition: width .2s ease, height .2s ease;
	/* width/height set by JS to fit container on open, then scaled by zoom */
}
.plan-lightbox-img {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-drag: none;
}
.plan-lightbox-stage .plan-pins {
	position: absolute;
	inset: 0;
}

/* Lightbox shows the pin layer matching the stage's current view: wide map
   → outdoor pins, zoom map → indoor pins. Overrides the inline-canvas opacity
   defaults; individual dots/labels still reveal per the active category. */
#plan-lightbox-stage .plan-pins-wide,
#plan-lightbox-stage .plan-pins-zoom { opacity: 1; transition: none; }
#plan-lightbox-stage .plan-pins-zoom { display: none; }
#plan-lightbox-stage[data-view="zoom"] .plan-pins-wide { display: none; }
#plan-lightbox-stage[data-view="zoom"] .plan-pins-zoom { display: block; }

/* Zoom controls — floating bottom-left over the map */
.plan-zoom-controls {
	position: absolute;
	bottom: 16px;
	left: 16px;
	display: flex;
	gap: 2px;
	background: rgba(18, 39, 29, .82);
	border-radius: 100px;
	padding: 4px;
	z-index: 10;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.plan-zoom-btn {
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background .15s ease;
	font-family: inherit;
	padding: 0;
}
.plan-zoom-btn svg { width: 18px; height: 18px; }
.plan-zoom-btn:hover:not(:disabled),
.plan-zoom-btn:focus-visible {
	background: rgba(255, 255, 255, .18);
	outline: none;
}
.plan-zoom-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.plan-cats-lightbox {
	flex-shrink: 0;
	justify-content: center;
	margin-top: 0;
}
.plan-cats-lightbox .plan-cat {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .18);
	color: var(--on-dark-body, #C8D8C0);
}
.plan-cats-lightbox .plan-cat:hover {
	background: rgba(255, 255, 255, .22);
}
.plan-cats-lightbox .plan-cat.is-active {
	background: #fff;
	color: var(--on-light-h, #1B3A2D);
	border-color: #fff;
}


/* ===========================================================
   Mobile responsive additions for map
=========================================================== */
@media (max-width: 860px) {
	.plan-zoom { font-size: 12px; padding: 8px 14px; }
	.plan-cats { gap: 8px; }
	.plan-cat { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 480px) {
	/* Categories: wrap to multiple rows so every chip is visible
	   without horizontal scroll. Center-align so partial rows look
	   balanced. */
	.plan-cats {
		gap: 6px;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 0;
	}
	.plan-cat {
		padding: 6px 12px;
		font-size: 12px;
		min-height: 36px;
		gap: 6px;
	}
	.plan-cat-count {
		font-size: 11px;
	}
	/* Pin labels: narrower max-width so they don't overflow the
	   map edge, with the existing smaller font/padding. */
	.plan-pin-label {
		font-size: 11px;
		padding: 3px 8px;
		max-width: 160px;
	}
	.plan-pin-dot { width: 11px; height: 11px; }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.plan-pin { transition: none; }
}