/* Pangsapuri Putra Bercham - completed freehold apartment, Bercham, Ipoh.
   Forked from css/anderson.css. Palette 15 deep bronze-khaki + steel blue,
   type Domine + Epilogue. */
/* ============================================================
   TOKENS — same structure as every page in this family; only the
   hues change. Palette 15: a warm dark (deep bronze-khaki) against
   a COOL accent (steel blue), which no other palette in the book
   does. The warm dark holds these near-colourless interiors; the
   cool accent picks up the sky and the hills past the balcony.
   ============================================================ */
:root{
  --font-display:"Domine", Georgia, "Times New Roman", serif;
  --font-body:"Epilogue", "Helvetica Neue", Arial, sans-serif;

  --ink-900:#33301b; --ink-800:#454026; --ink-600:#6b6540;
  --cream:#f6f4ee; --white:#ffffff; --gold:#7fa8cc; --gold-ink:#2f5f8a;
  --text:#2b2a1e; --muted:#6a6a5c;
  --rule:rgba(69,64,38,.13);
  --shadow-card:0 20px 56px rgba(42,39,22,.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,#e8e6df 0%,#c3c1b7 45%,#6a6a5c 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,#e6e4dd 0%,#7fa8cc 45%,#2f5f8a 100%)}
.ph.deep{background:linear-gradient(150deg,#6b6540 0%,#454026 50%,#33301b 100%)}
.ph.plan{background:
  repeating-linear-gradient(0deg,rgba(51,48,27,.07) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(51,48,27,.07) 0 1px,transparent 1px 28px),#eceae3}
.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(42,39,22,.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(28,27,16,.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(37,35,20,.88) 0%, rgba(69,64,38,.62) 34%, rgba(69,64,38,.24) 62%, rgba(37,35,20,.18) 100%),
  linear-gradient(180deg, rgba(37,35,20,.48) 0%, rgba(37,35,20,.06) 50%, rgba(37,35,20,.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(28,27,16,.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(51,48,27,.08);color:var(--muted)}
.st-open{background:var(--gold);color:var(--ink-900)}
.st-soon{background:rgba(127,168,204,.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(51,48,27,.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(51,48,27,.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(51,48,27,.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(51,48,27,.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(51,48,27,.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(51,48,27,.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}
}


/* ---------------------------------------------------------------------------
   Santorini 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 (Santorini 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 santorini-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(28,27,16,.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(51,48,27,.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, #e6e4dc)}
.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 santorini-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(51,48,27,.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}
/* ---------------------------------------------------------------------------
   Santorini 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)}


/* 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; }
}

/* Answer-first lede. The highest-leverage AEO pattern in the design library:
   one paragraph that fully answers "what is this", including the numbers a
   buyer would ask for, sitting above everything else so an answer engine can
   lift it whole. Santorini predates the pattern, so it arrives here rather
   than via the fork. */
.answer-first{border-left:2px solid var(--gold-ink);padding-left:22px;max-width:68ch;
  margin:0 0 20px}
.answer-first .lede{margin:0;font-size:17.5px;line-height:1.72;color:var(--ink-900)}
@media (max-width:600px){ .answer-first{padding-left:16px} .answer-first .lede{font-size:16.5px} }

/* --- Anderson layout corrections -----------------------------------------
   Three things the Santorini fork does not cover, because Santorini's own
   content happens not to hit them.

   1. .gallery-grid styles its tiles but never gave the container a display,
      so it stacked one photo per row. The tile rules above were written
      expecting the grid that desa.css defines; this is that rule.
   2. .unit-grid is a fixed 3 columns. Santorini has five layouts, so the
      second row holds two. Anderson has four, which leaves a single orphan
      card on its own row - the same complaint already raised about the Jati
      layout grid and the persona grid. Four cards go 2x2.
   3. Layouts and Who-it-suits are both --tint, so they merged into one long
      pale block. Who-it-suits drops the tint and sits on the page ground. */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,18px)}
@media (max-width:1000px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }

.unit-grid:has(> .unit:nth-child(4)):not(:has(> .unit:nth-child(5))){
  grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .unit-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .unit-grid,
  .unit-grid:has(> .unit:nth-child(4)):not(:has(> .unit:nth-child(5))){
    grid-template-columns:1fr} }

#suits.section--tint{background:transparent}

/* Show-unit photographs, now sitting inside the layout card they belong to
   rather than in a section of their own. A tighter grid than the facilities
   gallery: these are supporting evidence for one card, not a gallery. */
.unit-shots-label{margin:18px 0 8px;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted)}
.unit-shots{grid-template-columns:repeat(3,1fr);gap:6px}
@media (max-width:620px){ .unit-shots{grid-template-columns:repeat(3,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}

/* Furnishing note. This used to sit inside .sec-head, which styles its
   paragraphs at 17px in --muted for an intro - so the furniture list read as
   greyed-out small print. It is a content block, not a section intro, so it
   gets the page's normal body treatment on a tinted card. */
.furnish-note{background:var(--white);border:1px solid var(--rule);border-radius:8px;
  padding:clamp(22px,2.4vw,34px);margin:0 0 clamp(28px,3vw,42px);box-shadow:var(--shadow-card)}
.furnish-note h3{font-family:var(--font-display);font-size:22px;color:var(--ink-900);margin:0 0 12px}
.furnish-note > p{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--text);max-width:74ch}
.furnish-caveat{margin:18px 0 0!important;font-size:14px;line-height:1.65;color:var(--muted)}

/* Show-unit photographs, collapsed. Shown inline, five photos made each layout
   card several screens tall on a phone. Native <details>, same pattern as the
   Klemeru unit cards - no JS, nothing to fail. */
.unit-shots-toggle{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}
.unit-shots-toggle summary{cursor:pointer;list-style:none;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:8px}
.unit-shots-toggle summary::-webkit-details-marker{display:none}
.unit-shots-toggle summary::after{content:"+";margin-left:auto;font-size:16px;line-height:1;
  color:var(--muted);letter-spacing:0}
.unit-shots-toggle[open] summary::after{content:"\2212"}
.unit-shots-toggle summary:hover{color:var(--ink-900)}
.unit-shots-toggle .unit-shots{margin-top:12px}

/* 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:#2a2611;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}}

/* --- Pangsapuri Putra Bercham -----------------------------------------------
   This building shows TWO layouts. The sheet already carries a :has() rule
   sizing a four-card grid to 2x2; this is the same idea one step down, so a
   pair of cards fills the row instead of leaving a dead third column. Written
   as :has() rather than a flat override so that adding a third layout later
   silently restores the three-column default instead of squashing it.
   Two across also gives each floor plan a wider box, which is exactly what a
   drawing with room labels on it needs. */
.unit-grid:has(> .unit:nth-child(2)):not(:has(> .unit:nth-child(3))){
  grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .unit-grid:has(> .unit:nth-child(2)):not(:has(> .unit:nth-child(3))){
    grid-template-columns:1fr} }

.unit-rooms{margin-top:10px!important;font-size:14px;line-height:1.6;color:var(--muted)}