/* Jati pages - project landing (Township).
   Source: landed-template.html from the reusable template kit in the Others folder.
   Palette: 07 deep brown + oat, from the colour handbook (owner-selected
   2026-08-18). Two deliberate edits beyond the :root swap:
     1. --white is kept in the token block (the kit relies on var(--white)
        for hero text and .btn-primary labels; dropping it makes both
        render dark-on-dark).
     2. The kit hardcodes forest-green hero scrims, grid lines and
        shadows that never read from :root, so they survived a palette
        swap as green on a brown page. Re-tinted to the same roles here.
   Kept as its own file (not merged into style.css) so the rest of the
   site - homepage, Jati, Taman Lapangan Indah, Anderson - is
   untouched by this restyle. */


/* ============================================================
   TOKENS —— 结构和公寓版完全一样，只换了色相
   （森林绿 + 青铜，对应「土地 / 自然」；公寓版是海蓝 + 金）
   ============================================================ */
:root{
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Manrope", "Helvetica Neue", Arial, sans-serif;

  --ink-900:#1a1a18; --ink-800:#262623; --ink-600:#3a3a36;
  --cream:#faf9f6; --white:#ffffff; --gold:#bfa14a; --gold-ink:#8a6f1f;
  --text:#2b2b28; --muted:#6b6b64;
  --rule:rgba(26,26,24,.14);
  --shadow-card:0 20px 56px rgba(20,20,18,.13);

  --shell:min(100% - 48px, 1320px);
  --pad-y:clamp(64px, 7vw, 100px);
  --arc:72px;
  --header-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--cream);color:var(--text);font:400 16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.06;margin:0}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--pad-y)}
.section--dark{background:var(--ink-900);color:rgba(255,255,255,.86)}
.section--deep{background:var(--ink-800);color:rgba(255,255,255,.86)}
.section--tint{background:var(--white)}

.kicker{font-size:15px;font-weight:500;color:var(--gold-ink);margin:0 0 14px}
.sec-head{max-width:820px;margin:0 0 46px}
.sec-head.is-center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(32px,3.1vw,54px);color:var(--ink-900)}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.7;color:var(--muted)}
.on-dark .kicker{color:var(--gold)}
.on-dark h2,.on-dark h3{color:var(--white)}
.on-dark p{color:rgba(255,255,255,.78)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;
  border-radius:4px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:2px solid transparent;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink-900);border-color:var(--gold);color:var(--white)}
.btn-primary:hover{background:var(--ink-600)}
.btn-solid-light{background:var(--white);border-color:var(--white);color:var(--ink-900)}
.btn-solid-light:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-900)}
.btn-ghost{background:transparent;border-color:currentColor;color:var(--ink-900)}
.btn-ghost:hover{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}

.ph{position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#ecebe4 0%,#c2c2b8 45%,#6b6b64 100%)}
.ph::after{content:attr(data-label);font:500 10px/1 var(--font-body);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.45);
  padding:7px 11px;border-radius:2px;text-align:center}
.ph.warm{background:linear-gradient(150deg,#eae9e2 0%,#bfa14a 45%,#8a6f1f 100%)}
.ph.deep{background:linear-gradient(150deg,#3a3a36 0%,#262623 50%,#1a1a18 100%)}
.ph.plan{background:
  repeating-linear-gradient(0deg,rgba(26,26,24,.07) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(26,26,24,.07) 0 1px,transparent 1px 28px),#f0efe9}
.ph.plan::after{color:var(--muted);border-color:var(--rule)}

/* Gated on .reveal-ready, which wireReveal() sets only when it can
   actually bring the content back. Without the gate a broken observer
   or disabled JS leaves the entire page at opacity 0. */
.reveal-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal-ready .reveal.is-in{opacity:1;transform:none}

/* ===== HEADER（机制同公寓版：固定高度，只动 opacity / transform） ===== */
.site-header{position:fixed;inset:0 0 auto;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  height:var(--header-h);padding-inline:clamp(20px,3vw,40px);color:var(--white);transition:color .3s ease}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(20,20,18,.09);opacity:0;transition:opacity .3s ease}
.site-header.is-stuck{color:var(--ink-900)}
.site-header.is-stuck::before{opacity:1}
.site-header .brand,.site-header .primary-nav,.site-header .header-cta,.site-header .nav-toggle{transition:transform .3s ease}
.site-header.is-stuck .brand,.site-header.is-stuck .header-cta,.site-header.is-stuck .nav-toggle{transform:scale(.92)}
@media (min-width:1025px){.site-header.is-stuck .primary-nav{transform:scale(.96)}}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}
.brand span{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.brand-mark{width:30px;height:30px;border:1.5px solid currentColor;border-radius:4px 50% 50% 50%;flex:none}
.primary-nav{display:flex;justify-content:center;gap:clamp(16px,2vw,30px);font-size:14px;font-weight:500}
.primary-nav a{position:relative;padding:6px 0;text-shadow:0 2px 10px rgba(12,12,11,.42)}
.site-header.is-stuck .primary-nav a{text-shadow:none}
.primary-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
.primary-nav a:hover::after,.primary-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header-cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;border:1.5px solid currentColor;
  border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.04em}
.header-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-900)}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;color:inherit;padding:10px}
.nav-toggle i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-toggle i+i{margin-top:6px}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;height:min(88vh,860px);min-height:600px}
.hero-media,.hero-overlay{position:absolute;inset:0;border-radius:0 0 var(--arc) var(--arc);overflow:hidden}
.hero-media .ph{width:100%;height:100%}
/* The kit only ever put a .ph placeholder in the hero, so a real <img>
   had no fill rule and rendered at its natural size — leaving bare space
   on the right on wide screens. */
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{background:
  linear-gradient(90deg, rgba(16,16,14,.88) 0%, rgba(38,38,35,.62) 34%, rgba(38,38,35,.24) 62%, rgba(16,16,14,.18) 100%),
  linear-gradient(180deg, rgba(16,16,14,.48) 0%, rgba(16,16,14,.06) 50%, rgba(16,16,14,.36) 100%)}
.hero-body{position:relative;z-index:2;height:100%;width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h);color:var(--white)}
.hero-body h1{max-width:15ch;font-size:clamp(42px,4.4vw,68px);text-shadow:0 8px 24px rgba(12,12,11,.34)}
.hero-body h1 em{font-style:normal;color:var(--gold);display:block}
.hero-lede{max-width:54ch;margin-top:22px;font-size:16.5px;font-style:italic;line-height:1.7;color:rgba(255,255,255,.94)}
.hero-body .btn-row{margin-top:32px}

/* ===== 四个卖点 ===== */
.pillars{padding-block:clamp(40px,5vw,64px) 0}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)}
.pillar{padding-top:22px;border-top:1px solid var(--rule)}
.pillar b{display:block;font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--ink-900);margin-bottom:7px}
.pillar p{font-size:14.5px;color:var(--muted);line-height:1.6}

.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(32px,4.4vw,72px);align-items:center}
.split .ph{aspect-ratio:4/3.2;border-radius:8px;box-shadow:var(--shadow-card)}
.tick-list{display:grid;gap:13px;margin:26px 0 32px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.tick-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border:1.5px solid var(--gold);border-radius:50%}

/* ============================================================
   总平面图 —— landed 专有，公寓版没有
   ============================================================ */
.site-plan{display:grid;grid-template-columns:1.5fr .5fr;gap:clamp(28px,3.4vw,56px);align-items:start}
.site-plan .ph{aspect-ratio:16/11;border-radius:8px;box-shadow:var(--shadow-card)}
.legend{display:grid;gap:0;border-top:1px solid var(--rule)}
.legend div{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.legend i{width:14px;height:14px;border-radius:3px;display:block}
.legend b{font-weight:600;color:var(--ink-900);font-family:var(--font-body)}
.legend small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.legend span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:3px;white-space:nowrap}
.st-sold{background:rgba(26,26,24,.08);color:var(--muted)}
.st-open{background:var(--gold);color:var(--ink-900)}
.st-soon{background:rgba(191,161,74,.18);color:var(--gold-ink)}

/* ===== 地段与交通 ===== */
.location-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4vw,64px);align-items:start}
.dist-list{display:grid;border-top:1px solid var(--rule);margin-top:8px}
.dist-list li{display:flex;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:1px solid var(--rule);font-size:15.5px}
.dist-list b{font-weight:600;color:var(--ink-900)}
.dist-list span{font-variant-numeric:tabular-nums;color:var(--gold-ink);font-weight:600}
.location-grid .ph{aspect-ratio:16/11;border-radius:8px}

/* ===== 深色情绪段 ===== */
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);margin-top:52px}
.mood-card .ph{aspect-ratio:4/3.4;border-radius:8px;margin-bottom:20px}
.mood-card .kicker{font-size:13px}
.mood-card h3{font-size:25px;margin-bottom:9px}
.mood-card p{font-size:14.5px;line-height:1.65}

/* ===== 设施 ===== */
.facility-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.facility{background:var(--white);padding:28px 24px}
.facility svg{width:26px;height:26px;stroke:var(--gold-ink);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.facility b{display:block;font-family:var(--font-display);font-size:20px;color:var(--ink-900);margin-bottom:5px}
.facility p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ============================================================
   分期 + 户型：平铺 + 筛选（不做两层 tab）
   ============================================================ */
.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-bottom:clamp(40px,4.4vw,64px)}
.phase{background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:22px;display:grid;gap:9px;align-content:start}
.phase .no{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.phase h3{font-size:21px;color:var(--ink-900)}
.phase p{font-size:13.5px;color:var(--muted);line-height:1.6}
.phase .status{margin-top:4px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:3px;width:fit-content}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.chip{height:42px;padding:0 20px;border-radius:999px;background:var(--white);border:1px solid var(--rule);
  color:var(--muted);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.chip:hover{transform:translateY(-1px);color:var(--ink-900);border-color:var(--gold)}
.chip i{font-style:normal;font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;
  padding:2px 7px;border-radius:999px;background:rgba(26,26,24,.07);color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--white);font-weight:600}
.chip[aria-pressed="true"] i{background:rgba(255,255,255,.18);color:var(--white)}
.filter-status{font-size:13.5px;color:var(--muted);margin-bottom:30px;min-height:1.4em}
.filter-status b{color:var(--ink-900);font-weight:600;font-variant-numeric:tabular-nums}

.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,28px)}
.unit{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;transition:opacity .32s ease,transform .32s ease}
.unit[hidden]{display:none}
.unit.is-entering{opacity:0;transform:translateY(10px)}
.unit-media{position:relative}
.unit-media .ph{aspect-ratio:16/10}
/* A real photo must take the same shape as the placeholder. Without this an
   image renders at its own ratio, so one portrait source makes its card far
   taller than its neighbour and the grid leaves a gap under the shorter card's
   details. Pearl Garden's two street elevations - one portrait, one landscape -
   are exactly that case. */
.unit-media img{aspect-ratio:16/10;width:100%;height:100%;object-fit:cover;display:block}
.unit-cat{position:absolute;left:14px;top:14px;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:3px;background:rgba(26,26,24,.86);color:#fff;backdrop-filter:blur(4px)}
.unit-flag{position:absolute;right:14px;top:14px;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:6px 11px;border-radius:3px;background:var(--gold);color:var(--ink-900)}
.unit-body{padding:24px 24px 0;flex:1;display:flex;flex-direction:column;gap:4px}
.unit-code{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.unit-body h3{font-size:24px;color:var(--ink-900);margin-bottom:14px}
.unit-spec{display:grid;border-top:1px solid var(--rule);margin-bottom:18px}
.unit-spec div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px}
.unit-spec dt{color:var(--muted)}
.unit-spec dd{margin:0;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums;text-align:right}
.unit-price{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--ink-900);
  font-variant-numeric:tabular-nums;margin-bottom:2px}
.unit-price small{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:3px}
.unit-foot{padding:20px 24px 24px;margin-top:18px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px}
.unit-foot .btn{height:42px;padding:0 16px;font-size:12px}
.empty{grid-column:1/-1;padding:56px 24px;text-align:center;color:var(--muted);
  border:1px dashed var(--rule);border-radius:8px}
.empty[hidden]{display:none}

/* ===== 规格对照表 ===== */
.compare{margin-top:clamp(48px,5vw,72px)}
.compare h3{font-size:clamp(24px,2.2vw,34px);color:var(--ink-900);margin-bottom:8px}
.compare>p{font-size:15px;color:var(--muted);margin-bottom:24px}
.tablebox{overflow-x:auto;background:var(--white);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-card)}
table{border-collapse:collapse;width:100%;min-width:840px;font-size:14.5px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  font-weight:600;background:rgba(26,26,24,.04)}
tbody th{font-weight:600;color:var(--ink-900);white-space:normal;min-width:180px}
tbody th small{display:block;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
td{color:var(--text);font-variant-numeric:tabular-nums}
td.cat{color:var(--muted);font-variant-numeric:normal}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(26,26,24,.028)}
.table-hint{font-size:13px;color:var(--muted);margin-top:12px}

/* ===== 建材规格（深色） ===== */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.spec-card{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:24px}
.spec-card h3{font-size:21px;margin-bottom:14px}
.spec-card ul{display:grid;gap:9px}
.spec-card li{font-size:14px;line-height:1.55;color:rgba(255,255,255,.76);padding-left:16px;position:relative}
.spec-card li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--gold)}

/* ===== 投资理由 / 表单 / 页脚 ===== */
.reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px)}
.reason{padding:30px 26px;background:var(--white);border:1px solid var(--rule);border-radius:8px}
.reason b{display:block;font-family:var(--font-display);font-size:21px;color:var(--ink-900);margin-bottom:9px}
.reason p{font-size:14px;color:var(--muted);line-height:1.6}

.register-card{width:min(100% - 56px,1180px);margin-inline:auto;border-radius:12px;overflow:hidden;
  display:grid;grid-template-columns:.9fr 1.1fr;box-shadow:var(--shadow-card)}
.register-card .ph{min-height:100%}
.register-form{background:var(--ink-900);padding:clamp(34px,3.6vw,56px)}
.register-form h2{font-size:clamp(28px,2.6vw,40px);color:var(--white)}
.register-form .kicker{color:var(--gold)}
.register-form>p{margin-top:14px;font-size:15px;color:rgba(255,255,255,.74);line-height:1.65}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.field{display:grid;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.field input,.field select{width:100%;padding:13px 14px;border-radius:4px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);color:var(--white);font:400 15px/1.4 var(--font-body)}
.field input::placeholder{color:rgba(255,255,255,.36)}
.field select option{color:var(--text)}
.register-form .btn{margin-top:24px;width:100%}

.site-footer{background:var(--ink-900);color:rgba(255,255,255,.78);font-size:15px}
.footer-shell{width:var(--shell);margin-inline:auto;display:grid;grid-template-columns:1.2fr .8fr 1.1fr;
  gap:clamp(32px,5vw,80px);padding-block:64px 56px}
.footer-shell h3{font-size:26px;color:var(--white);margin-bottom:18px}
.footer-brand .brand{color:var(--white);margin-bottom:16px}
.footer-brand p{font-size:14.5px;line-height:1.7;max-width:38ch}
.footer-links{display:grid;gap:10px;align-content:start}
.footer-links a{width:fit-content}
.footer-links a:hover{color:var(--gold)}
.footer-contact{display:grid;gap:20px;align-content:start;font-style:normal}
.contact-row{display:grid;grid-template-columns:34px 1fr;gap:12px}
.contact-row svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.contact-row b{display:block;font-family:var(--font-display);font-size:19px;color:var(--white);margin-bottom:4px}
.contact-row a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom div{width:var(--shell);margin-inline:auto;padding-block:22px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-size:13px;color:rgba(255,255,255,.55)}

.wa{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  height:52px;padding:0 22px;border-radius:999px;background:#25d366;color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 12px 30px rgba(26,26,24,.28);transition:transform .18s ease}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:20px;height:20px;fill:currentColor}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .site-header{grid-template-columns:auto auto;justify-content:space-between}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .primary-nav{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(26,26,24,.98);padding:8px 24px 26px;transform:translateY(-140%);transition:transform .3s ease;color:var(--white)}
  .primary-nav.is-open{transform:none}
  .primary-nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);text-shadow:none;font-size:16px}
  .primary-nav a::after{display:none}
  .pillar-grid,.facility-grid,.reason-grid,.phase-grid{grid-template-columns:repeat(2,1fr)}
  .split,.location-grid,.site-plan,.register-card{grid-template-columns:1fr}
  .register-card .ph{min-height:240px}
  .mood-grid,.spec-grid{grid-template-columns:1fr;gap:24px}
  .unit-grid{grid-template-columns:repeat(2,1fr)}
  .footer-shell{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:680px){
  :root{--arc:40px;--shell:min(100% - 32px,1320px)}
  .hero{height:auto;min-height:0}
  .hero-body{padding-block:calc(var(--header-h) + 68px) 78px}
  .pillar-grid,.reason-grid,.facility-grid,.phase-grid,.unit-grid,.footer-shell,.field-grid{grid-template-columns:1fr}
  .register-card{width:min(100% - 32px,1180px)}
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    margin-inline:calc(-1 * clamp(16px,4vw,24px));padding-inline:clamp(16px,4vw,24px)}
  .chip{flex:none}
  .wa{right:14px;bottom:14px;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .unit.is-entering{opacity:1;transform:none}
}


/* ---------------------------------------------------------------------------
   Jati adjustments on top of the template kit.

   1. .ph has no intrinsic height in the kit — it inherits one from whatever
      wraps it (.subhero-media sets height:100%, .gallery-grid sets an
      aspect-ratio). The Location / Site Plan / Floor Plan slots on these pages
      put a bare .ph inside .plan-figure, where nothing sets a height, so the
      placeholder collapsed to a thin strip. These give it a real box, and are
      inert once a real <img> replaces the placeholder.
   2. Gallery tiles here are <button class="plan-zoom"> wrapping a real photo
      rather than a .ph placeholder, so they need the sizing the kit applied to
      .gallery-grid .ph.
   --------------------------------------------------------------------------- */
.plan-figure > .ph{width:100%;aspect-ratio:16/9;min-height:240px;max-height:460px}
.plan-figure > img{display:block;width:100%;height:auto}

.gallery-grid .plan-zoom{
  padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;
  overflow:hidden;aspect-ratio:4/3;display:block;width:100%}
.gallery-grid .plan-zoom img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gallery-grid .plan-zoom:hover img{transform:scale(1.04)}
.gallery-grid .plan-zoom:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}

/* Lightbox shows the real photo when one was clicked. */
#lightboxImage img{max-width:100%;max-height:80vh;object-fit:contain;display:block;margin:auto}

/* The kit's inline language switcher, sitting inside the primary nav. */
.lang-switch{display:inline-flex;gap:10px;margin-left:14px}
.lang-switch a{font-size:12px;letter-spacing:.08em;opacity:.75}
.lang-switch a[aria-current="true"]{opacity:1;color:var(--gold);font-weight:600}


/* Developer specification list inside the accordion panels (Jati house
   type pages). Two columns on desktop so a 14-row electrical schedule stays
   scannable; the quantity column is tabular so the numbers line up. */
.spec-list{display:grid;grid-template-columns:1fr;gap:0;margin:0}
@media (min-width:760px){ .spec-list{grid-template-columns:1fr 1fr;column-gap:38px} }
.spec-list > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.spec-list dt{color:var(--muted);font-size:14.5px;flex:1 1 auto}
.spec-list dd{margin:0;font-weight:500;text-align:right;flex:0 1 auto;max-width:62%}
.spec-list dd.qty{font-variant-numeric:tabular-nums;min-width:2.5em;font-weight:600}


/* ---------------------------------------------------------------------------
   Ported from jati-unit.css: the FAQ accordion and the zoom lightbox.
   landed-template.html has neither component, but the Township page uses
   both (FAQ section, and click-to-enlarge on the three phase site plans),
   so without these they render completely unstyled.
   --------------------------------------------------------------------------- */
/* ===== 放大层 ===== */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  background:rgba(12,12,11,.95);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-inner{width:min(100%,1100px);max-height:100%;overflow:auto;background:var(--white);border-radius:8px;position:relative}
.lightbox-inner .ph{aspect-ratio:4/3;min-height:280px}
.lightbox-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(26,26,24,.9);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;
  transition:transform .18s ease,background .18s ease}
.lightbox-close:hover{transform:scale(1.06);background:var(--ink-900)}
.lightbox-cap{padding:14px 20px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--rule)}
.lot .note{font-size:13.5px;color:var(--muted);line-height:1.6}
/* ===== 建材规格 accordion ===== */
.accordion{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;
  background:none;border:0;text-align:left;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink-900)}
.acc-btn i{flex:none;font-style:normal;font-family:var(--font-body);font-size:22px;font-weight:300;
  color:var(--gold-ink);transition:transform .25s ease}
.acc-btn[aria-expanded="true"] i{transform:rotate(45deg)}
/* grid-template-rows 0fr→1fr，不动 max-height */
.acc-panel{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .32s ease}
.acc-btn[aria-expanded="true"]+.acc-panel{grid-template-rows:1fr}
.acc-inner{min-height:0}
.acc-panel ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;padding:4px 2px 26px}
.acc-panel li{font-size:14.5px;color:var(--muted);line-height:1.55}
.other-body .go{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-900);display:inline-flex;align-items:center;gap:7px}
.other:hover .go{color:var(--gold-ink)}

/* Small meta line on the unit cards (added for this page). */
.unit-meta{font-size:14px;color:var(--muted);margin-top:2px}


/* ---------------------------------------------------------------------------
   Pillar cards with photography (2026-08-18, by request).

   The kit's .pillar was a text-only column with a hairline on top. The four
   pillars map one-to-one onto real USP photography we already hold, so the
   card now leads with the photo.

   Deliberately NOT a hover-reveal or a horizontal slider: on a phone there is
   no hover, and a slider hides three of the four most important claims behind
   a swipe. Everything stays visible at every width — 4 across on desktop,
   2 x 2 on a phone (the kit's own narrow breakpoint drops other grids to a
   single column, which is why .pillar-grid is pinned back to two below).
   --------------------------------------------------------------------------- */
.pillar{padding-top:0;border-top:0}
.pillar-media{
  border-radius:8px;overflow:hidden;aspect-ratio:4/3;margin-bottom:16px;
  background:var(--paper-3, #e8e7e0)}
.pillar-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pillar:hover .pillar-media img{transform:scale(1.04)}
.pillar h3{
  font-family:var(--font-display);font-size:clamp(19px,1.4vw,23px);font-weight:700;
  color:var(--ink-900);margin:0 0 7px;line-height:1.25}

@media (max-width:720px){
  /* keep the four pillars as a 2 x 2 grid rather than one long column */
  .pillar-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .pillar h3{font-size:16px}
  .pillar p{font-size:13px}
  .pillar-media{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .pillar-media img{transition:none}
  .pillar:hover .pillar-media img{transform:none}
}


/* Ported from jati-unit.css: the floor-plan tab component, reused on
   the Township page so the three phase site plans sit behind one tab each
   instead of three thumbnails side by side. */
/* ===== 户型图：楼层 tab ===== */
.plan-layout{display:grid;grid-template-columns:1.42fr .58fr;gap:clamp(28px,3.2vw,52px);align-items:start}
.plan-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.plan-tab{height:40px;padding:0 20px;border-radius:999px;background:var(--white);border:1px solid var(--rule);
  color:var(--muted);font-size:13px;font-weight:500;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease}
.plan-tab:hover{transform:translateY(-1px);border-color:var(--gold);color:var(--ink-900)}
.plan-tab[aria-selected="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--white);font-weight:600}
.plan-figure{margin:0;position:relative;background:var(--white);border:1px solid var(--rule);
  border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card)}
.plan-figure[hidden]{display:none}
.plan-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.plan-zoom .ph{aspect-ratio:4/3}
.plan-hint{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;background:rgba(26,26,24,.86);color:#fff;
  font-size:11.5px;font-weight:500;letter-spacing:.05em;pointer-events:none}
.plan-hint svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.plan-side{display:grid;gap:26px;align-content:start}
.plan-layout,.register-card{grid-template-columns:1fr}
/* ---------------------------------------------------------------------------
   Jati adjustments on top of the template kit.

   1. .ph has no intrinsic height in the kit — it inherits one from whatever
      wraps it (.subhero-media sets height:100%, .gallery-grid sets an
      aspect-ratio). The Location / Site Plan / Floor Plan slots on these pages
      put a bare .ph inside .plan-figure, where nothing sets a height, so the
      placeholder collapsed to a thin strip. These give it a real box, and are
      inert once a real <img> replaces the placeholder.
   2. Gallery tiles here are <button class="plan-zoom"> wrapping a real photo
      rather than a .ph placeholder, so they need the sizing the kit applied to
      .gallery-grid .ph.
   --------------------------------------------------------------------------- */
.plan-figure > .ph{width:100%;aspect-ratio:16/9;min-height:240px;max-height:460px}
.plan-figure > img{display:block;width:100%;height:auto}
.gallery-grid .plan-zoom{padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;
  overflow:hidden;aspect-ratio:4/3;display:block;width:100%}
.gallery-grid .plan-zoom img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gallery-grid .plan-zoom:hover img{transform:scale(1.04)}
.gallery-grid .plan-zoom:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}


/* Facility grid on the dark Facilities band: name + one-line description
   instead of a bare list of twelve names. Three across on desktop, two on
   tablet, one on a phone. */
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 38px}
.fac h3{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  color:var(--gold);margin:0 0 5px;line-height:1.3}
.fac p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
@media (max-width:1000px){ .fac-grid{grid-template-columns:repeat(2,1fr);gap:24px 30px} }
@media (max-width:600px){ .fac-grid{grid-template-columns:1fr;gap:20px} }

/* The park masterplan sits on the dark band, so it needs a light mount
   rather than the white card .plan-figure gives it elsewhere. */
.section--dark .plan-figure{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--dark .plan-figure img{background:#fff}


/* Real JT Homes monogram in place of the kit's decorative brand shape.
   The supplied logo is a square lockup on a solid navy ground, so it is
   cropped to the monogram and kept as a badge — dropping the full lockup
   into a light brown header would show a navy block with unreadable
   tagline text. */
.brand-mark{
  width:34px;height:34px;border-radius:8px;object-fit:cover;display:block;
  flex:0 0 auto;background:none;border:0}


/* Facilities: the park plan is a tall portrait graphic (968x1625), so it reads
   far better beside the twelve facility cards than stacked above them. */
.fac-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:44px;align-items:start}
.fac-plan{margin:0}
.fac-plan > .plan-zoom{aspect-ratio:auto}
.fac-plan img{width:100%;height:auto;display:block}
.fac-split .fac-grid{grid-template-columns:repeat(2,1fr);gap:26px 32px;
  align-self:center}  /* the plan is taller than the twelve cards; centring
                         them reads deliberate rather than top-heavy */
@media (max-width:900px){
  .fac-split{grid-template-columns:1fr;gap:32px}
  .fac-split .fac-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .fac-split .fac-grid{grid-template-columns:1fr} }

/* Solar figures, as a number band rather than a paragraph — the point of the
   section is the four numbers. */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;overflow:hidden}
.stat{background:var(--ink-900);padding:30px 24px;text-align:center}
.stat strong{display:block;font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,3.4vw,38px);line-height:1.1;color:var(--gold);
  letter-spacing:-.01em}
.stat span{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.74)}
.stat-note{max-width:74ch;margin:26px auto 0;text-align:center;
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.62)}
@media (max-width:820px){ .stat-band{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .stat-band{grid-template-columns:1fr} }

/* The kit only ever put .ph placeholders in these slots, so real <img>s need
   their own fill rules — same fix as .hero-media img above. */
.split img,.location-grid img,.mood-card img,.unit-media img{
  width:100%;height:100%;object-fit:cover;display:block}
.split figure,.location-grid figure,.mood-card figure,.unit-media figure{margin:0;overflow:hidden}
.split figure{aspect-ratio:4/3.2;border-radius:8px;box-shadow:var(--shadow-card)}
/* No fixed ratio here. The box was 16:11 while the map is 16:9, so
   object-fit:contain letterboxed it inside a visibly empty frame. A map
   must not be cropped either, so the image sets the height instead. */
.location-grid figure{border-radius:8px;border:1px solid var(--rule);background:var(--white)}
.location-grid figure img{width:100%;height:auto;object-fit:contain}
.mood-card figure{aspect-ratio:4/3.4;border-radius:8px;margin-bottom:20px}
.unit-media figure{aspect-ratio:16/10}

/* Facilities: the numbers are the developer's own and match the site plan,
   so they are shown rather than stripped. */
.fac-no{display:inline-block;min-width:2.1em;font-variant-numeric:tabular-nums;
  color:var(--gold-ink);font-weight:600}
.fac-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 28px;margin:0}
.fac-list li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--text)}
@media (max-width:640px){ .fac-list{grid-template-columns:1fr} }
.siteplan-figure{margin:34px 0 0;border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;background:var(--white)}
.siteplan-figure img{width:100%;height:auto;display:block}

/* Floor-plan meta column, beside the plan tabs. */
.plan-meta{display:grid;gap:0}
.plan-side[hidden]{display:none}
.plan-side div{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;
  border-bottom:1px solid var(--rule);font-size:14.5px}
.plan-side dt{color:var(--muted)}
.plan-side dd{margin:0;font-weight:600;color:var(--text);text-align:right}
/* The plan meta was written white, for the pages that put it in a dark band.
   Light is the default now and white is scoped to those bands, because on a
   section--tint page white on white is simply an invisible spec list. */
.on-dark .plan-side div{border-bottom-color:rgba(255,255,255,.16)}
.on-dark .plan-side dt{color:rgba(255,255,255,.62)}
.on-dark .plan-side dd{color:var(--white)}

/* Photo beside the enquiry form. */
.register-media{overflow:hidden;background:var(--ink-800);min-height:100%}
.register-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){ .register-media{min-height:230px} }
/* The hero sits on a photo, so its kicker needs the light gold, not the
   dark-on-light one the rest of the page uses. */
.hero-body .kicker{color:var(--gold)}

/* A "from" figure on a layout card. Dated on purpose: a stale price then reads
   as out of date rather than as a claim about today. */
.price-from{margin:6px 0 0;font-size:15px;color:var(--muted)}
.price-from b{font-family:var(--font-display);font-size:26px;font-weight:700;
  color:var(--gold-ink);margin-right:8px}
.price-from span{display:block;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}

/* Rumah Perakku block. Given its own card rather than a footnote: for a buyer
   who qualifies it is the most important thing on the page, and for one who
   does not it explains why search results show a much lower figure. */
.afford{margin-top:clamp(32px,4vw,52px);padding:clamp(26px,3vw,40px);
  background:var(--ink-900);color:rgba(255,255,255,.82);border-radius:10px;
  border-left:4px solid var(--gold)}
.afford .kicker{color:var(--gold);margin-bottom:10px}
.afford h3{font-size:clamp(23px,2.2vw,30px);color:var(--white);margin-bottom:14px}
.afford p{font-size:15px;line-height:1.7;max-width:70ch}
.afford-list{margin:20px 0 0;padding-left:1.3em;display:grid;gap:10px;max-width:70ch}
.afford-list li{font-size:14.5px;line-height:1.65;padding-left:4px}
.afford-list li::marker{color:var(--gold);font-weight:600}
.afford-foot{margin-top:20px;font-size:14px;color:rgba(255,255,255,.66)}
.afford .btn{margin-top:22px}
.lot-note{max-width:78ch;margin:26px 0 0;padding-left:16px;border-left:2px solid var(--gold);
  font-size:14px;line-height:1.7;color:var(--muted)}

/* Promotions. Given a two-column list and its own early-bird card because the
   package is this project's loudest argument — one line of it is worth more in
   cash than most facility lists are worth in feeling. */
.promo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;max-width:none}
.promo-list li{color:rgba(255,255,255,.86);font-size:15px;line-height:1.6}
.promo-list li::before{border-color:var(--gold)}
@media (max-width:760px){ .promo-list{grid-template-columns:1fr} }
.promo-eb{margin-top:36px;padding:26px 28px;border:1px solid rgba(255,255,255,.2);
  border-left:4px solid var(--gold);border-radius:10px;background:rgba(255,255,255,.04)}
.promo-eb .kicker{color:var(--gold);margin-bottom:12px}
.promo-eb .tick-list{margin:0;gap:10px}
.promo-eb li{color:var(--white);font-size:15.5px}

/* Per-layout fitting counts. A table, because it is a table — four columns of
   numbers read worse as prose. Scrolls inside its own box on a phone. */
.spec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;min-width:420px;border-collapse:collapse;font-size:14.5px}
.spec-table th,.spec-table td{padding:11px 12px;text-align:center;
  border-bottom:1px solid var(--rule)}
.spec-table thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;border-bottom:2px solid var(--rule)}
.spec-table tbody th{text-align:left;font-weight:500;color:var(--text)}
.spec-table td{font-variant-numeric:tabular-nums;color:var(--ink-900);font-weight:600}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}

/* Which block is which. The page was reading as though the project were Block
   A alone; this says plainly that there are four and which one these prices
   belong to. */
.block-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.block-card{padding:28px 26px;background:var(--white);border:1px solid var(--rule);
  border-radius:10px}
.block-card.is-current{border-color:var(--gold);box-shadow:var(--shadow-card)}
.block-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:3px;margin-bottom:14px;
  background:var(--gold);color:var(--ink-900)}
.block-tag.is-past{background:var(--ink-900);color:var(--white)}
.block-tag.is-future{background:transparent;color:var(--muted);border:1px solid var(--rule)}
.block-card h3{font-size:24px;color:var(--ink-900);margin-bottom:4px}
.block-meta{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;margin-bottom:12px}
.block-card p:last-child{font-size:14.5px;line-height:1.65;color:var(--muted)}
@media (max-width:860px){ .block-grid{grid-template-columns:1fr} }

/* Site plan, on its own now that the floor plans have moved out. */
.siteplan-figure{margin:34px 0 0;border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;background:var(--white)}
.siteplan-figure .plan-zoom{display:block;width:100%}
.siteplan-figure img{width:100%;height:auto;display:block}

/* The enquiry card was stacking at 900px, which caught desktop users at higher
   browser zoom. It holds photo-left/form-right down to a real tablet width. */
@media (min-width:761px){ .register-card{grid-template-columns:.9fr 1.1fr} }
@media (max-width:760px){ .register-card{grid-template-columns:1fr} }

/* Four layouts in a three-column grid leaves one orphan on its own row. The
   condo module spec calls for 2x2 here anyway, and the bigger cards show the
   photo properly. Two-up holds down to a real tablet; phones get one. */
.unit-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){ .unit-grid{grid-template-columns:repeat(2,1fr);gap:18px} }
@media (max-width:560px){ .unit-grid{grid-template-columns:1fr} }


/* The class-based lightbox markup (Santorini / Jati / Desa Park) had no rule
   for its <img> — only the older #lightboxImage container was styled, so the
   photo rendered at whatever size it liked. */
.lightbox-inner > img{display:block;margin:auto;max-width:100%;max-height:80vh;
  width:auto;height:auto;object-fit:contain;background:var(--cream)}
.lightbox-inner > img[hidden]{display:none}


/* ============================================================
   WHO IT SUITS
   Buyer-persona block. Three or four cards depending on the
   project; the grid is auto-fit so both counts fill the row.
   ============================================================ */
.suits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.suits-card {
  position: relative;
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.2vw, 30px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: border-color .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.suits-card:hover { border-color: var(--gold); box-shadow: var(--shadow-card); }
.suits-card b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-900);
  margin-bottom: 12px;
  padding-right: 40px;
}
.suits-card p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.suits-card i {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px);
  right: clamp(18px, 1.8vw, 24px);
  font-style: normal;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: .5;
}
.on-dark .suits-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.on-dark .suits-card b { color: var(--white); }
.on-dark .suits-card p { color: rgba(255, 255, 255, .74); }


/* Four-card persona grids were leaving an orphan on a second row at tablet
   widths. Pick the counts rather than letting auto-fit pick them. */
.suits-grid { grid-template-columns: repeat(3, 1fr); }
.suits-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .suits-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .suits-grid,
  .suits-grid:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

/* Rolling price counters. .price-from span and td.lot-price span already style
   the small sub-line that sits beside a price, and a bare counter <span> was
   inheriting that - a 26px "RM" with an 11.5px figure dropped underneath it.
   The counter carries its own class and resets those properties so no
   container rule can capture it. */
.cnum{display:inline!important;font:inherit!important;font-size:inherit!important;
  font-weight:inherit!important;font-family:inherit!important;color:inherit!important;
  letter-spacing:inherit!important;text-transform:none!important;
  margin:0!important;padding:0!important;opacity:1!important}

/* Floor plans inside .plan-figure. .gallery-grid .plan-zoom img sizes gallery
   tiles, but a plan sits in .plan-figure where nothing matched - so the <img>
   fell back to its width/height attributes and rendered a portrait plan sheet
   at a literal 1600px tall, leaving a screen of dead space under it. Fit it to
   the box in both directions, keep the ratio, centre it. Tap still zooms. */
.plan-figure .plan-zoom img{display:block;width:100%;height:auto;
  max-height:80vh;object-fit:contain}

/* ---------------------------------------------------------------------------
   WhatsApp button shine — a light sweeping left to right.
   ::after is used for the sweep; pointer-events:none keeps it from swallowing
   the tap. Disabled under prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.btn-primary,.wa{position:relative;overflow:hidden}
.btn-primary::after,.wa::after{content:"";position:absolute;top:0;bottom:0;left:-140%;width:55%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);pointer-events:none;
  animation:waShine 3.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes waShine{0%{left:-140%}55%,100%{left:140%}}
@media (prefers-reduced-motion:reduce){.btn-primary::after,.wa::after{animation:none;opacity:0}}

/* ---------------------------------------------------------------------------
   The card's read-more line. It was unstyled plain text on the unit cards -
   only .other-body .go ever had a rule - which is why it read as flat.
   Now a pill that fills with the accent on hover, focus or tap. The accent is
   each palette's own highlight rather than a literal red: eleven palettes share
   this stylesheet family and a fixed red would fight most of them.
   --------------------------------------------------------------------------- */
.unit .go,.other .go{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;width:-moz-fit-content;width:fit-content;
  padding:8px 16px;border:1px solid var(--rule);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);background:transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.unit .go::after,.other .go::after{content:"→";font-size:14px;line-height:1;
  transition:transform .18s ease}
.unit:hover .go,.unit:focus-visible .go,.unit .go:hover,
.other:hover .go,.other:focus-visible .go,.other .go:hover{
  background:var(--gold);border-color:var(--gold);color:var(--ink-900);transform:translateY(-1px)}
.unit:hover .go::after,.other:hover .go::after{transform:translateX(3px)}
@media (hover:none){
  .unit .go:active,.other .go:active{background:var(--gold);border-color:var(--gold);color:var(--ink-900)}
}
@media (prefers-reduced-motion:reduce){
  .unit .go,.other .go,.unit .go::after,.other .go::after{transition:none;transform:none}
}

/* ---------------------------------------------------------------------------
   Subpage CTA band. Replaces the register form on the house-type pages: one
   headline, one sentence, one button. The photograph is deliberately absent -
   the show-house gallery is already on the page and the point of this layout
   is that nothing competes with the button.
   --------------------------------------------------------------------------- */
.cta-band{display:grid;gap:clamp(28px,4vw,64px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:860px){.cta-band{grid-template-columns:1.25fr .75fr}}
.cta-band-copy h2{font-family:var(--font-display);font-size:clamp(28px,3.2vw,44px);
  line-height:1.14;color:#fff;margin:0 0 14px}
.cta-band-copy p{margin:0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);
  max-width:56ch}
.cta-band-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media (min-width:860px){.cta-band-act{align-items:center}}
.btn-wa-big{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 34px;border-radius:999px;border:0;
  background:#25d366;color:#0b2a17;font-size:17px;font-weight:700;letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn-wa-big svg{width:24px;height:24px;fill:currentColor;flex:none}
.btn-wa-big:hover,.btn-wa-big:focus-visible{background:#1eb85a;transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.28)}
.cta-band-note{margin:0;font-size:13px;color:rgba(255,255,255,.62)}
@media (prefers-reduced-motion:reduce){.btn-wa-big{transition:none;transform:none}}