/* Thompson Prestige - project landing page.
   Forked from css/klebangria-landing.css. Palette 11 deep aubergine + antique
   gold, type EB Garamond + Jost. Pairs with css/thompson.css. */
/* ============================================================
   TOKENS —— 结构和公寓版完全一样，只换了色相
   （森林绿 + 青铜，对应「土地 / 自然」；公寓版是海蓝 + 金）
   ============================================================ */
:root{
  --font-display:"EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Jost", "Helvetica Neue", Arial, sans-serif;

  --ink-900:#2b1b2e; --ink-800:#3c2740; --ink-600:#503455;
  --cream:#f6f2f4; --white:#ffffff; --gold:#c9a961; --gold-ink:#7a5c1e;
  --text:#2e2530; --muted:#6b5f6d;
  --rule:rgba(43,27,46,.14);
  --shadow-card:0 20px 56px rgba(37,23,40,.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);line-height:1.14;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,#dad5d9 0%,#a49ba4 45%,#635765 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,#d2ccd1 0%,#c9a961 45%,#7a5c1e 100%)}
.ph.deep{background:linear-gradient(150deg,#4d3f4f 0%,#3c2740 50%,#2b1b2e 100%)}
.ph.plan{background:
  repeating-linear-gradient(0deg,rgba(43,27,46,.07) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(43,27,46,.07) 0 1px,transparent 1px 28px),#e2dde1}
.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(37,23,40,.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(25,15,27,.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(33,20,35,.88) 0%, rgba(60,39,64,.62) 34%, rgba(60,39,64,.24) 62%, rgba(33,20,35,.18) 100%),
  linear-gradient(180deg, rgba(33,20,35,.48) 0%, rgba(33,20,35,.06) 50%, rgba(33,20,35,.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(25,15,27,.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(43,27,46,.08);color:var(--muted)}
.st-open{background:var(--gold);color:var(--ink-900)}
.st-soon{background:rgba(201,169,97,.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(43,27,46,.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(43,27,46,.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(43,27,46,.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(43,27,46,.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(43,27,46,.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(43,27,46,.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,.register-card .register-media{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}
}


/* ---------------------------------------------------------------------------
   Klemeru 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 (Klemeru 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 klemeru-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(25,15,27,.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(43,27,46,.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, #dad5d9)}
.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 klemeru-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(43,27,46,.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{grid-template-columns:1fr}
/* ---------------------------------------------------------------------------
   Klemeru 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} }

/* Price on a layout card. A sold-out layout is labelled, not hidden: hiding it
   loses the social proof, leaving it looking available is bait. */
.unit-price{margin:10px 0 0;font-size:14px;color:var(--muted)}
.unit-price b{font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--ink-900);margin:0 6px}
.unit-price small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.unit-price.is-sold{font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--gold-ink);letter-spacing:.02em}
.unit-bumi{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.unit.is-sold-out .unit-media img{filter:grayscale(.55) opacity(.75)}
.unit .unit-flag{position:absolute;right:12px;top:12px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:3px;
  background:var(--ink-900);color:var(--white)}

/* Price banner under the hero spec rail on a house-type page. */
.price-banner{width:var(--shell);margin:22px auto 0;padding:16px 20px;
  background:var(--cream);border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:6px;font-size:14px;line-height:1.65;color:var(--muted)}
.price-banner b{font-family:var(--font-display);font-size:22px;color:var(--ink-900);
  margin-right:8px}
.price-banner span{font-weight:600;color:var(--gold-ink);margin-right:8px}
.price-banner.is-sold b{color:var(--gold-ink)}
.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)}
.price-banner a{color:var(--gold-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.price-banner a:hover{color:var(--ink-900)}
/* Partially-sold layout: some lot variants gone, others still selling. */
.unit-price.is-partial{font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--ink-900);line-height:1.35}
.unit-flag.is-partial{background:var(--gold);color:var(--ink-900)}
.price-banner.is-partial b{color:var(--gold-ink)}
.lot.is-gone{opacity:.66}
.lot.is-gone .badge{background:var(--ink-900);color:var(--white)}
.lot.is-gone .btn{display:none}


/* ============================================================
   WHO IT SUITS  — buyer-persona block, same component as the
   project stylesheets carry.
   ============================================================ */
.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}

/* Register card media panel - klemeru-landing.css lays its register
   section out differently and has no rule for it. */
.register-media{position:relative;overflow:hidden;background:var(--ink-800);min-height:100%}
.register-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Two house-type cards in a three-column grid left an empty third slot. The
   data-count variants live in klemeru-unit.css, not the landing sheet, so they
   did not come across with the fork. Named explicitly here, including in the
   mobile override, so a later declaration cannot win a 2-column layout back at
   375px the way it did on the Desa Chemor Impian subpages. */
.unit-grid[data-count="1"]{grid-template-columns:minmax(0,520px)}
.unit-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){
  .unit-grid,.unit-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .unit-grid,
  .unit-grid[data-count="1"],
  .unit-grid[data-count="2"]{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Auto-panning hero -------------------------------------------------
   Two street elevations panning rightward, hand-rolled rather than pulling in
   Swiper for two images. The track holds [A][B][A]: the copy of A at the end
   means the loop point lands on the same frame it started from, so there is no
   visible jump. Motion is right-ward because each step moves the track toward
   translateX(0), which slides the content right. */
.hero-pan{position:absolute;inset:0;overflow:hidden}
.hero-pan-track{display:flex;width:300%;height:100%;
  animation:heroPan 21s cubic-bezier(.65,0,.35,1) infinite}
.hero-pan-track > figure{margin:0;width:33.3333%;height:100%;flex:none}
.hero-pan-track img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes heroPan{
  0%,   28%  {transform:translateX(-66.6667%)}
  50%,  78%  {transform:translateX(-33.3333%)}
  100%       {transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-pan-track{animation:none;transform:translateX(-33.3333%)}
}

/* ---- Stat band, with an icon and a line of context ----------------------
   Four identical rectangles carrying a number and one word read as filler.
   Each stat now says what the number means to the buyer. */
.stat{display:flex;flex-direction:column;gap:6px;text-align:left;padding:26px 24px}
.stat svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.stat strong{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,2.6vw,34px);line-height:1.05;color:var(--gold)}
.stat span{display:block;margin-top:0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.stat em{display:block;margin-top:8px;font-style:normal;font-size:13.5px;
  line-height:1.55;color:rgba(255,255,255,.78)}
@media (max-width:820px){ .stat{padding:22px 20px} }

/* ---------------------------------------------------------------------------
   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 site-plan block on the landing page uses the same shell as the subpage
   extras. Only the two rules it needs are copied; the why-grid and the lot
   table stay on the subpages, where they are used. */
.why-block,.fac-block,.lot-block{margin-top:clamp(44px,5vw,72px)}
.why-block h3,.fac-block h3,.lot-block h3{
  font-family:var(--font-display);font-size:clamp(24px,2.4vw,34px);
  line-height:1.14;color:var(--ink-900);margin:6px 0 10px}
.why-block>p.lede,.fac-block>p.lede,.lot-block>p.lede{
  color:var(--muted);max-width:70ch;margin:0 0 26px}

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