/* ARBOR ปุณณวิถี (เว็บตัวอย่าง) shared styles for every page. Fonts: Anuphan + Manrope. */
:root{--ink:#0f1c2e;--ink-2:#5a6472;--ink-3:#8a929c;--bg:#f6f5f1;--card:#fff;--soft:#eceee8;--line:#e1e1da;--navy:#0f1c2e;--navy-2:#1b2c44;--leaf:#78b043;--leaf-d:#4f8a27}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Anuphan,Manrope,sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-weight:500}
.num{font-family:Manrope,Anuphan,sans-serif;font-feature-settings:"tnum"}
.nb{white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:Manrope,Anuphan,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf-d)}
.eyebrow:before{content:"";width:22px;height:2px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:500;font-size:16px;padding:13px 22px;border-radius:999px;background:var(--navy);color:#fff;border:0;cursor:pointer;white-space:nowrap}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.btn.light{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost-w{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn.line{background:#06c755;color:#fff}

/* nav */
header.nav{position:sticky;top:0;z-index:30;background:rgba(246,245,241,.88);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;max-width:1320px}
.logo{display:flex;align-items:center;gap:12px}
.logo b{font-family:Manrope,sans-serif;font-weight:700;letter-spacing:.34em;font-size:19px}
.logo i{font-style:normal;width:1px;height:20px;background:var(--line)}
.logo span{font-size:15px;color:var(--ink-2)}
.nav-r{display:flex;align-items:center;gap:18px}
.nav-r .tel{font-family:Manrope,sans-serif;font-weight:600;font-size:15px}
header.nav .btn{padding:10px 18px;font-size:15px}

/* hero */
.hero{padding:0 16px}
.frame{position:relative;max-width:1408px;margin:0 auto;height:min(720px,calc(100vh - 110px));min-height:600px;border-radius:28px;overflow:hidden;color:#fff}
.frame>img{position:absolute;inset:0}
.frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,28,.72) 0,rgba(8,16,28,.38) 42%,rgba(8,16,28,0) 70%),linear-gradient(0deg,rgba(8,16,28,.55) 0,rgba(8,16,28,0) 45%)}
.pill{position:absolute;z-index:2;top:26px;left:28px;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);color:var(--ink);font-size:14.5px;font-weight:500;padding:8px 14px 8px 10px;border-radius:999px}
.pill .dot{width:22px;height:22px;border-radius:50%;background:var(--leaf);display:grid;place-items:center}
.pill .dot svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2}
.copy{position:absolute;z-index:2;left:56px;bottom:56px;max-width:600px}
.copy .eyebrow{color:#cfe6b6}
.hero h1{font-size:64px;line-height:1.14;margin-top:16px;font-weight:500}
.hero p{font-size:19px;color:rgba(255,255,255,.88);margin-top:16px;max-width:520px;font-weight:300}
.hero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.pcard{position:absolute;z-index:3;right:28px;bottom:28px;width:340px;background:#fff;color:var(--ink);border-radius:20px;padding:24px 24px 22px;box-shadow:0 18px 50px rgba(8,16,28,.22)}
.pcard small{font-size:14px;color:var(--ink-2)}
.pcard .big{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.pcard .big b{font-family:Manrope,sans-serif;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pcard .big span{font-size:16px}
.pcard dl{margin-top:14px;border-top:1px solid var(--line)}
.pcard dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.pcard dt{color:var(--ink-2)}
.pcard dd{font-weight:500}
.pcard .btn{width:100%;margin-top:16px}
.pcard .left{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--leaf-d);margin-top:12px;justify-content:center}
.pcard .left:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--leaf)}

.facts{max-width:1240px;margin:0 auto;padding:34px 32px 0;display:grid;grid-template-columns:repeat(5,1fr)}
.facts div{padding:4px 22px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-family:Manrope,Anuphan,sans-serif;font-size:26px;font-weight:600}
.facts span{font-size:14.5px;color:var(--ink-2)}

section{padding:110px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sh h2{font-size:46px;line-height:1.2;margin-top:14px}
.sh p{color:var(--ink-2);max-width:420px;font-size:17.5px}

/* concept */
.concept .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.concept h2{font-size:46px;line-height:1.2;margin-top:14px}
.concept .lead{color:var(--ink-2);font-size:18.5px;margin-top:18px;font-weight:300}
.points{margin-top:34px;border-top:1px solid var(--line)}
.points div{display:grid;grid-template-columns:56px 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.points em{font-style:normal;font-family:Manrope,sans-serif;font-weight:600;color:var(--leaf-d);font-size:15px;padding-top:2px}
.points b{font-weight:500;display:block}
.points span{color:var(--ink-2);font-size:15.5px}
.concept .pics{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:end}
.concept .pics figure{border-radius:20px;overflow:hidden}
.concept .pics figure:first-child{aspect-ratio:4/5.4}
.concept .pics figure:last-child{aspect-ratio:4/5;margin-bottom:56px}

/* units */
.units{background:var(--card)}
.tabs{display:flex;gap:8px;margin-top:40px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:15.5px;font-weight:500;border:0;background:var(--soft);color:var(--ink-2);padding:11px 20px;border-radius:999px;cursor:pointer;display:flex;gap:10px;align-items:baseline}
.tabs button small{font-family:Manrope,sans-serif;font-size:13px;opacity:.75}
.tabs button.on{background:var(--navy);color:#fff}
.unit{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:28px}
.unit .ph{border-radius:22px;overflow:hidden;min-height:520px;position:relative}
.unit .ph .tag{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.94);border-radius:999px;font-size:13.5px;padding:6px 12px}
.ud{border:1px solid var(--line);border-radius:22px;padding:30px 32px;display:flex;flex-direction:column}
.ud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ud h3{font-size:30px;line-height:1.25}
.ud h3 small{display:block;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--leaf-d)}
.ud .from{text-align:right;flex:none}
.ud .from small{font-size:13.5px;color:var(--ink-2)}
.ud .from b{display:block;font-family:Manrope,Anuphan,sans-serif;font-size:30px;font-weight:700;line-height:1.1}
.ud .from>span{font-size:13.5px;color:var(--ink-2)}
.plan{margin-top:22px;background:var(--bg);border-radius:16px;padding:14px 10px 6px}
.plan svg{display:block;width:100%;height:auto}
.plan figcaption{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);padding:0 8px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs div{padding:13px 0 12px 14px;border-left:1px solid var(--line)}
.specs div:first-child{border-left:0;padding-left:0}
.specs b{display:block;font-family:Manrope,Anuphan,sans-serif;font-weight:600;font-size:18px}
.specs span{font-size:13.5px;color:var(--ink-2)}
.ud .feat{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:15px;color:var(--ink-2)}
.ud .feat li{display:flex;gap:8px;align-items:flex-start}
.ud .feat li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-top:10px}
.ud .cta{display:flex;gap:10px;margin-top:auto;padding-top:22px;flex-wrap:wrap}
.ud .cta .btn{flex:1}
.stock{font-size:13.5px;color:var(--leaf-d);margin-top:6px}
.stock.off{color:#b4541e}

/* facilities */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fgrid div{padding:30px 30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgrid svg{width:30px;height:30px;stroke:var(--ink);fill:none;stroke-width:1.5}
.fgrid h3{font-size:20px;margin-top:18px}
.fgrid p{color:var(--ink-2);font-size:15.5px;margin-top:4px}
.fgrid em{font-style:normal;font-size:13.5px;color:var(--ink-3);float:right;margin-top:2px}

/* location */
.loc{background:var(--soft)}
.loc .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.map{background:#f3f4ef;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.map svg{display:block;width:100%;height:auto}
.loc h2{font-size:42px;line-height:1.22;margin-top:14px}
.near{margin-top:26px;border-top:1px solid #d6d9d0}
.near div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid #d6d9d0}
.near span{color:var(--ink-2)}
.near b{font-family:Manrope,Anuphan,sans-serif;font-weight:600;white-space:nowrap}
.near b small{font-family:Anuphan,sans-serif;font-weight:400;color:var(--ink-2);font-size:14px;margin-left:4px}

/* progress */
.prog .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px;display:flex;flex-direction:column}
.box .dev{margin-top:auto}
.box .bar:last-of-type{margin-bottom:24px}
.box h3{font-size:24px}
.box .sub{color:var(--ink-2);font-size:15px;margin-top:2px}
.overall{display:flex;align-items:flex-end;gap:18px;margin-top:22px}
.overall b{font-family:Manrope,sans-serif;font-size:64px;font-weight:700;line-height:1;letter-spacing:-.03em}
.overall>span{color:var(--ink-2);font-size:15px;padding-bottom:8px}
.bar{margin-top:20px}
.bar .row{display:flex;justify-content:space-between;font-size:15px}
.bar .row b{font-family:Manrope,sans-serif;font-weight:600}
.bar .t{height:8px;border-radius:99px;background:var(--soft);margin-top:8px;overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:99px;background:var(--leaf)}
.bar.full .t i{background:var(--navy)}
.steps{list-style:none;margin-top:22px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps li:before{counter-increment:s;content:"0" counter(s);font-family:Manrope,sans-serif;font-weight:700;font-size:13px;color:var(--leaf-d)}
.steps li span{color:var(--ink-2);font-size:15px;display:block}
.steps li b{font-family:Manrope,Anuphan,sans-serif;font-weight:600;white-space:nowrap;font-size:17px}
.dev{display:flex;gap:16px;align-items:center;margin-top:22px;padding:16px 18px;background:var(--bg);border-radius:14px;font-size:14.5px;color:var(--ink-2)}
.dev svg{flex:none;width:28px;height:28px;stroke:var(--navy);fill:none;stroke-width:1.6}
.dev b{color:var(--ink);font-weight:500}

/* register */
.reg{background:var(--navy);color:#fff}
.reg .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.reg .eyebrow{color:var(--leaf)}
.reg h2{font-size:46px;line-height:1.2;margin-top:14px}
.reg .lead{color:#b9c3d0;margin-top:16px;font-size:18px;font-weight:300}
.perks{list-style:none;margin-top:30px}
.perks li{display:flex;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);color:#dfe5ec}
.perks li svg{flex:none;width:22px;height:22px;stroke:var(--leaf);fill:none;stroke-width:1.8;margin-top:2px}
.gallery-info{margin-top:30px;padding:20px 22px;border-radius:16px;background:var(--navy-2);font-size:15px;color:#b9c3d0}
.gallery-info b{color:#fff;font-weight:500}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
.faq h2{font-size:40px;line-height:1.22;margin-top:14px}
.faq .side p{color:var(--ink-2);margin-top:14px}
.faq .side .cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:18.5px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:Manrope,sans-serif;font-weight:500;font-size:24px;line-height:1;color:var(--ink-3)}
details[open] summary:after{content:"–"}
details p{color:var(--ink-2);padding:0 40px 22px 0}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--ink-2);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}


/* ---------- multi-page additions ---------- */
[hidden]{display:none!important}
button{font:inherit;color:inherit}
.promo{background:var(--navy-2);color:#dbe2ea;font-size:14.5px}
.promo .wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding-top:8px;padding-bottom:8px;text-align:center;max-width:1320px}
.promo i{width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(120,176,67,.2);flex:none}
.promo a{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.45);white-space:nowrap}
.menu{display:flex;gap:26px;font-size:15.5px;color:var(--ink-2);margin-left:auto}
.menu>a{display:flex;align-items:center;height:72px;border-bottom:2px solid transparent;padding-top:2px;white-space:nowrap}
.menu>a:hover{color:var(--ink)}
.menu>a[aria-current="page"]{color:var(--ink);font-weight:500;border-bottom-color:var(--leaf)}
.menu-cta{display:none}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center;margin-right:-8px}
.burger svg{width:24px;height:24px;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;fill:none}
.burger path{transition:transform .2s,opacity .2s;transform-origin:12px 12px}
.burger[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .l2{opacity:0}
.burger[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);border-bottom:1.5px solid var(--leaf);padding-bottom:2px}
.lnk svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.more{margin-top:36px}

/* page header */
.phead{padding:52px 0 60px;background:var(--soft)}
.crumb{display:flex;gap:8px;font-size:14px;color:var(--ink-2)}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5}
.phead .eyebrow{margin-top:26px}
.phead h1{font-size:50px;line-height:1.2;margin-top:12px;max-width:780px}
.phead .lead{font-size:18.5px;color:var(--ink-2);margin-top:14px;max-width:660px;font-weight:300}

/* type cards (home) */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.tc{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.tc .ph{aspect-ratio:4/3;position:relative}
.tc .ph .tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);border-radius:999px;font-size:13px;padding:5px 11px}
.tc .bd{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tc small.t{font-family:Manrope,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--leaf-d)}
.tc h3{font-size:22px;margin-top:4px}
.tc .mt{color:var(--ink-2);font-size:15px;margin-top:2px}
.tc .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:auto;padding-top:20px}
.tc .row small{display:block;font-size:13.5px;color:var(--ink-2)}
.tc .row b{font-family:Manrope,Anuphan,sans-serif;font-size:26px;font-weight:700;line-height:1.15}
.tc .row b em{font-style:normal;font-family:Anuphan,sans-serif;font-size:15px;font-weight:500}
.left-pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--leaf-d);background:#eef5e6;border-radius:999px;padding:5px 11px;white-space:nowrap}
.left-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf)}
.left-pill.off{color:#9a5a1c;background:#fbf0e3}
.left-pill.off:before{background:#d08a3c}
.tc .go{margin-top:18px}
.tc .go .btn{width:100%}
.band{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:28px;background:var(--navy);color:#fff;border-radius:22px;padding:28px 32px}
.band h3{font-size:22px}
.band p{color:#b9c3d0;font-size:15.5px;margin-top:2px}
.band .stat{display:flex;gap:28px}
.band .stat div{border-left:1px solid rgba(255,255,255,.16);padding-left:18px}
.band .stat b{display:block;font-family:Manrope,Anuphan,sans-serif;font-size:26px;font-weight:600;line-height:1.2}
.band .stat span{font-size:13.5px;color:#b9c3d0}
.home-loc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid #d6d9d0}
.home-loc div{padding:20px 20px 4px 0}
.home-loc b{display:block;font-family:Manrope,Anuphan,sans-serif;font-size:30px;font-weight:600;line-height:1.2}
.home-loc span{color:var(--ink-2);font-size:15px}
.mini-prog{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:44px}
.mini-prog .ph{border-radius:22px;overflow:hidden;min-height:340px;position:relative}
.mini-prog .ph figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:10px;font-size:13.5px;padding:7px 12px}

/* unit picker */
.picker{background:var(--bg)}
.pk-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 28px;flex-wrap:wrap;margin-top:40px}
.pk-bar .lbl2{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:8px}
.floors{display:flex;gap:6px;flex-wrap:wrap}
.floors button,.tfil button{border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:8px 12px 7px;cursor:pointer;text-align:center;line-height:1.25;min-width:64px}
.floors button b{display:block;font-weight:500;font-size:15px}
.floors button small{display:block;font-size:12px;color:var(--leaf-d)}
.floors button small.z{color:var(--ink-3)}
.floors button[aria-pressed="true"],.tfil button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none}
.floors button[aria-pressed="true"] small{color:#cfe6b6}
.tfil{display:flex;gap:6px;flex-wrap:wrap}
.tfil button{min-width:0;padding:10px 14px;font-size:15px}
.onlyav{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;margin-left:6px}
.onlyav input{width:17px;height:17px;accent-color:var(--navy)}
.pk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;margin-top:22px;align-items:start}
.plate-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 22px 18px}
.plate-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.plate-h h3{font-size:20px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.legend .av{box-shadow:inset 0 0 0 1.5px var(--leaf);background:#fff}
.legend .rs{background:#fbf0e3;box-shadow:inset 0 0 0 1px #ecd2b0}
.legend .sd{background:#e6e8e2}
.plate{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 58px repeat(6,minmax(0,1fr));grid-template-rows:auto 78px 30px 78px auto;gap:6px}
.plate .side{grid-row:var(--r);grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);padding:2px 2px}
.plate .side svg{width:16px;height:16px;stroke:var(--leaf-d);fill:none;stroke-width:1.7;flex:none}
.plate .corr{grid-row:3;grid-column:1/-1;border-radius:8px;background:repeating-linear-gradient(90deg,#eef0ea 0 10px,#e8ebe3 10px 20px);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3)}
.plate .core{grid-row:2/5;grid-column:7;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px #d8dbd2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-2);text-align:center;line-height:1.3;z-index:1}
.plate .core svg{width:20px;height:20px;stroke:var(--ink-2);fill:none;stroke-width:1.6}
.u{grid-row:var(--r);grid-column:var(--c);border:0;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--leaf);color:var(--ink);padding:4px 2px;min-width:0;transition:background .12s,opacity .15s}
.u b{font-family:Manrope,sans-serif;font-weight:700;font-size:15px;line-height:1.2}
.u span{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.u span i{font-style:normal;display:none}
.u:not(:disabled):hover{background:#f1f7ea}
.u.rs{background:#fbf0e3;box-shadow:inset 0 0 0 1px #ecd2b0;color:#9a5a1c;cursor:default}
.u.rs span{color:#b07a43}
.u.sd,.u.cl{background:#e6e8e2;box-shadow:none;color:#9da39a;cursor:default}
.u.sd span,.u.cl span{color:#a9aea6}
.u.dim{opacity:.25}
.u.on,.u.on:hover{background:var(--navy);box-shadow:none;color:#fff}
.u.on span{color:#cfd6df}
.u:focus-visible{outline:2px solid var(--leaf-d);outline-offset:2px}
.plate-note{font-size:13px;color:var(--ink-3);margin-top:12px}
.sel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;position:sticky;top:92px}
.sel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sel h3{font-size:28px;line-height:1.2}
.sel h3 small{display:block;font-family:Manrope,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--leaf-d)}
.st-pill{font-size:13px;font-weight:500;border-radius:999px;padding:4px 11px;white-space:nowrap;background:#eef5e6;color:var(--leaf-d)}
.st-pill.rs{background:#fbf0e3;color:#9a5a1c}
.st-pill.sd{background:#eceee8;color:var(--ink-2)}
.sel .where{color:var(--ink-2);font-size:15px;margin-top:6px}
.sel .plan{margin-top:14px;padding:10px 6px 2px}
.sel .price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.sel .price b{font-family:Manrope,Anuphan,sans-serif;font-size:32px;font-weight:700;line-height:1.1}
.sel dl{margin-top:10px;border-top:1px solid var(--line)}
.sel dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sel dt{color:var(--ink-2)}
.sel dd{font-family:Manrope,Anuphan,sans-serif;font-weight:600;white-space:nowrap}
.sel .cta{display:grid;gap:8px;margin-top:18px}
.sel .fine{font-size:12.5px;color:var(--ink-3);margin-top:12px}

/* mortgage calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.calc .cin,.calc .cout{border-radius:22px;padding:34px}
.calc .cin{background:var(--card);border:1px solid var(--line)}
.calc label{display:block;font-size:15px;color:var(--ink-2);margin-top:22px}
.calc label:first-child{margin-top:0}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc output{font-weight:600;color:var(--ink);font-family:Manrope,Anuphan,sans-serif}
.calc select,.calc input[type=number]{width:100%;margin-top:8px;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.calc input[type=range]{width:100%;margin-top:12px;accent-color:var(--navy)}
.calc .cout{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.calc .cout>div>p{color:#b9c3d0}
.calc .big{font-family:Manrope,sans-serif;font-size:56px;font-weight:700;line-height:1.1;margin-top:6px}
.calc .big small{font-family:Anuphan,sans-serif;font-size:18px;font-weight:400;color:#b9c3d0;margin-left:6px}
.calc .cout dl{margin-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.calc .cout dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15.5px}
.calc .cout dt{color:#c9d1db}
.calc .cout dd{font-weight:600;font-family:Manrope,Anuphan,sans-serif;white-space:nowrap}
.calc .note{font-size:13px;color:#9fabba}
.calc .cout .btn{align-self:flex-start}

/* booking */
.bk-sec{padding-top:56px}
.stepper{display:flex;gap:10px;list-style:none;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-3);padding-right:18px}
.stepper li b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:Manrope,sans-serif;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)}
.stepper li.on{color:var(--ink);font-weight:500}
.stepper li.on b{background:var(--navy);color:#fff;box-shadow:none}
.stepper li.ok{color:var(--ink-2)}
.stepper li.ok b{background:var(--leaf);color:#fff;box-shadow:none}
.bk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;margin-top:26px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px}
.card+.card{margin-top:18px}
.card h2{font-size:22px}
.card h2 small{font-size:15px;color:var(--ink-3);font-weight:400;margin-left:6px}
.card .hint{font-size:14.5px;color:var(--ink-2);margin-top:2px}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.cal-h b{font-weight:500;font-size:17px}
.cal-h div{display:flex;gap:6px}
.cal-h button{width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;display:grid;place-items:center}
.cal-h button:disabled{opacity:.35;cursor:default}
.cal-h svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:12px}
.cal .dh{text-align:center;font-size:13px;color:var(--ink-3);padding:4px 0}
.cal button{height:48px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-family:Manrope,sans-serif;font-weight:600;font-size:15px;position:relative}
.cal button:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--navy)}
.cal button:disabled{background:transparent;box-shadow:none;color:#c3c7c0;cursor:default;font-weight:500}
.cal button.full{text-decoration:line-through}
.cal button.few:after{content:"";position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#d08a3c}
.cal button.today{box-shadow:inset 0 0 0 1px var(--ink-3)}
.cal button.on{background:var(--navy);color:#fff;box-shadow:none}
.cal button.on.few:after{background:#fff}
.cal-key{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-top:12px}
.cal-key span{display:inline-flex;align-items:center;gap:6px}
.cal-key i{width:6px;height:6px;border-radius:50%;background:#d08a3c}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.slot{border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:10px 6px;cursor:pointer;line-height:1.3}
.slot b{display:block;font-family:Manrope,sans-serif;font-size:16px}
.slot span{font-size:12.5px;color:var(--leaf-d)}
.slot:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--navy)}
.slot:disabled{background:var(--bg);box-shadow:none;color:#b3b8b0;cursor:default}
.slot:disabled span{color:#b3b8b0}
.slot.on{background:var(--navy);color:#fff;box-shadow:none}
.slot.on span{color:#cfe6b6}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.opt{border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;cursor:pointer;text-align:left;line-height:1.35}
.opt b{display:block;font-weight:500}
.opt span{font-size:13px;color:var(--ink-2)}
.opt:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--navy)}
.opt.on{box-shadow:inset 0 0 0 2px var(--navy);background:#f4f6f9}
.opt:disabled{opacity:.5;cursor:default}
.unit-note{margin-top:12px;font-size:14.5px;background:#eef5e6;color:#355f17;border-radius:12px;padding:10px 14px}
.unit-note.warn{background:#fbf0e3;color:#8a4f15}
.two-q{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.qlbl{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;cursor:pointer;background:#fff}
.chips input:checked+span{background:var(--navy);color:#fff;box-shadow:none}
.chips input:focus-visible+span{outline:2px solid var(--leaf-d);outline-offset:2px}
.ppl{display:inline-flex;align-items:center;gap:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:4px}
.ppl button{width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;font-size:18px;line-height:1}
.ppl button:disabled{opacity:.4;cursor:default}
.ppl output{min-width:64px;text-align:center;font-weight:500}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.fgrid2 .full{grid-column:1/-1}
.fld label{display:block;font-size:14.5px;font-weight:500;margin-bottom:7px}
.fld label i{font-style:normal;color:#b4541e;margin-left:2px}
.fld input,.fld select,.fld textarea{width:100%;height:48px;border:1px solid #d9dad3;border-radius:12px;padding:0 14px;background:#fff;font:inherit;font-size:16px}
.fld textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,28,46,.1)}
.fld.bad input{border-color:#b4541e}
.fld .err{display:block;color:#b4541e;font-size:13.5px;margin-top:6px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);cursor:pointer;line-height:1.5}
.agree input{width:18px;height:18px;margin-top:3px;accent-color:var(--navy);flex:none}
.sum{position:sticky;top:92px}
.sum .card{padding:24px}
.sum h3{font-size:15px;font-weight:500;color:var(--ink-2)}
.sum .what{font-size:22px;font-weight:500;margin-top:8px;line-height:1.35}
.sum .when{color:var(--ink-2);margin-top:4px}
.sum dl{margin-top:16px;border-top:1px solid var(--line)}
.sum dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sum dt{color:var(--ink-2)}
.sum dd{font-weight:500;text-align:right}
.sum .warn{margin-top:14px;font-size:14px;background:#fbf0e3;color:#8a4f15;border-radius:12px;padding:10px 14px}
.sum .btn{width:100%;margin-top:16px}
.sum .btn:disabled{opacity:.4;cursor:not-allowed}
.sum .back{display:block;width:100%;margin-top:8px;border:0;background:none;color:var(--ink-2);cursor:pointer;padding:8px;font-size:15px}
.sum .fine{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.bring{list-style:none;margin-top:6px}
.bring li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.bring li:last-child{border-bottom:0}
.bring svg{width:18px;height:18px;stroke:var(--leaf-d);fill:none;stroke-width:2;flex:none;margin-top:4px}
.ok-card{max-width:720px;margin:26px auto 0;text-align:center;padding:44px 36px}
.ok-card:focus{outline:0}
.ok-ic{width:64px;height:64px;border-radius:50%;background:#eef5e6;display:grid;place-items:center;margin:0 auto}
.ok-ic svg{width:30px;height:30px;stroke:var(--leaf-d);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ok-card h2{font-size:32px;margin-top:18px}
.ok-card>p{color:var(--ink-2);margin-top:8px}
.code{display:inline-block;margin-top:18px;font-family:Manrope,sans-serif;font-weight:700;font-size:28px;letter-spacing:.08em;background:var(--soft);border-radius:14px;padding:10px 22px}
.code-l{display:block;font-size:13.5px;color:var(--ink-3);margin-top:16px}
.ok-card dl{margin:24px auto 0;max-width:520px;text-align:left;border-top:1px solid var(--line)}
.ok-card dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.ok-card dt{color:var(--ink-2)}
.ok-card dd{font-weight:500;text-align:right}
.ok-card .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ok-card .fine{font-size:13px;color:var(--ink-3);margin-top:18px}
.gal{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.gal .ph{border-radius:22px;overflow:hidden;aspect-ratio:4/3}
.gal h2{font-size:38px;line-height:1.22;margin-top:14px}
.info{margin-top:22px;border-top:1px solid var(--line)}
.info div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.info dt{color:var(--ink-2)}
.info dd a{border-bottom:1px solid var(--line)}
.gal .cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* site photos (progress) */
.site{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.site figure{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:4/3}
.site figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;background:linear-gradient(0deg,rgba(8,16,28,.78),rgba(8,16,28,0));color:#fff;font-size:14px}
.site figcaption b{display:block;font-weight:500;font-size:15.5px}

/* footer */
.foot{background:var(--navy);color:#b9c3d0;padding:64px 0 28px;font-size:15px}
.foot .wrap{display:block}
.nav-r .btn{gap:0}
.foot .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot .logo{color:#fff}
.foot .logo i{background:rgba(255,255,255,.25)}
.foot .logo span{color:#b9c3d0}
.foot .fb p{margin-top:16px;max-width:300px}
.foot h4{color:#fff;font-weight:500;font-size:15.5px;margin-bottom:12px}
.foot nav{display:grid;gap:6px}
.foot a:hover{color:#fff}
.foot .fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;font-size:13.5px;color:#8f9bab}

@media (max-width:1060px){
  .pcard{width:300px}
  .hero h1{font-size:52px}
}
@media (max-width:860px){
  .wrap{padding:0 20px}
  .logo span,.logo i,.nav-r .tel{display:none}
  header.nav .wrap{height:64px}
  .hero{padding:0 10px}
  .frame{height:auto;min-height:0;border-radius:22px;display:flex;flex-direction:column}
  .frame>img{position:absolute;height:560px}
  .frame:after{bottom:auto;height:560px;background:linear-gradient(180deg,rgba(8,16,28,.2) 0,rgba(8,16,28,.42) 42%,rgba(8,16,28,.9) 100%)}
  .copy .eyebrow{font-size:11.5px;letter-spacing:.1em}
  .copy .eyebrow:before{display:none}
  .pill{top:16px;left:16px;font-size:13.5px}
  .copy{position:relative;left:auto;bottom:auto;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:90px 20px 28px}
  .hero h1{font-size:38px;margin-top:12px}
  .hero p{font-size:16.5px}
  .hero .cta .btn{flex:1}
  .pcard{position:relative;right:auto;bottom:auto;width:auto;margin:0;border-radius:0 0 22px 22px;box-shadow:none;padding:22px 20px}
  .facts{grid-template-columns:1fr 1fr;gap:18px 0;padding:30px 20px 0}
  .facts div{padding:0 14px;border-left:0}
  .facts div:nth-child(odd){padding-left:0}
  .facts div:nth-child(even){border-left:1px solid var(--line)}
  .facts div:last-child{display:none}
  .facts b{font-size:22px}
  section{padding:76px 0}
  .sh{display:block}
  .sh p{margin-top:12px}
  .sh h2,.concept h2,.reg h2{font-size:32px}
  .loc h2,.faq h2{font-size:30px}
  .concept .wrap,.unit,.loc .wrap,.prog .grid,.reg .wrap,.faq .wrap{grid-template-columns:1fr}
  .concept .wrap{gap:44px}
  .concept .pics figure:last-child{margin-bottom:36px}
  .tabs{gap:6px}
  .tabs button{padding:9px 14px;font-size:14.5px}
  .tabs button small{display:none}
  .unit .ph{min-height:300px}
  .ud{padding:24px 20px}
  .ud h3{font-size:24px}
  .ud .from b{font-size:24px}
  .specs{grid-template-columns:1fr 1fr}
  .specs div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .specs div:nth-child(4){border-top:1px solid var(--line)}
  .ud .feat{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fgrid div{padding:20px 18px 20px 66px;position:relative}
  .fgrid svg{position:absolute;left:18px;top:22px;width:28px;height:28px}
  .fgrid em{display:none}
  .fgrid h3{font-size:18px;margin-top:0}
  .fgrid p{font-size:15px}
  .ud-top{flex-direction:column;gap:6px}
  .ud .from{text-align:left;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .ud .from small{order:0}
  .plan figcaption{flex-direction:column;gap:0}
  .loc .wrap{gap:36px}
  .box{padding:26px 20px}
  .overall b{font-size:52px}
  .reg .wrap{gap:40px}
  .faq .wrap{gap:28px}
  summary{font-size:17px}
  details p{padding-right:0}
}
@media (max-width:1180px){
  .menu{display:none}
  .burger{display:inline-flex}
  .nav-r .btn .lg{display:none}
  .menu.is-open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(8,16,28,.08);padding:6px 32px 22px;margin:0;font-size:17px;color:var(--ink)}
  .menu.is-open>a{height:auto;padding:14px 0;border-bottom:1px solid var(--line)}
  .menu.is-open>a[aria-current="page"]{color:var(--leaf-d);font-weight:600;border-bottom-color:var(--line)}
  .menu.is-open .menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .menu.is-open .menu-cta .btn{padding:12px 10px;font-size:15px}
  header.nav .wrap{position:static}
  header.nav{position:sticky}
  .pk{grid-template-columns:minmax(0,1fr) 330px}
  .plate{grid-template-columns:repeat(6,minmax(0,1fr)) 40px repeat(6,minmax(0,1fr))}
  .plate .core span{display:none}
  .u span{font-size:10.5px}
}
@media (max-width:1060px){
  .tcards{grid-template-columns:1fr 1fr}
  .tcards .tc:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .tcards .tc:last-child .ph{aspect-ratio:auto;min-height:260px}
  .pk{grid-template-columns:1fr}
  .sel{position:static}
  .plate{grid-template-columns:repeat(6,minmax(0,1fr)) 58px repeat(6,minmax(0,1fr))}
  .plate .core span{display:block}
  .u span{font-size:11.5px}
  .bk{grid-template-columns:minmax(0,1fr) 320px}
  .foot .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .promo{font-size:13.5px}
  .promo .wrap{display:block;text-align:left;padding-top:9px;padding-bottom:10px;line-height:1.55}
  .promo i{display:none}
  .promo a{margin-left:6px}
  .menu.is-open{padding:4px 20px 20px}
  .nav-r{gap:8px}
  .nav-r .btn{padding:9px 14px;font-size:14.5px}
  .phead{padding:26px 0 36px}
  .phead .eyebrow{margin-top:20px}
  .phead h1{font-size:33px}
  .phead .lead{font-size:16.5px}
  .tcards{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .tcards .tc:last-child{display:flex}
  .tcards .tc:last-child .ph{aspect-ratio:4/3;min-height:0}
  .band{grid-template-columns:1fr;padding:24px 20px;gap:18px}
  .band .stat{gap:18px}
  .band .stat div:first-child{border-left:0;padding-left:0}
  .band .stat{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .band .stat span{white-space:nowrap}
  .band .stat .btn{grid-column:1/-1}
  .band .stat:has(> .btn:only-child){display:block}
  .band .stat .btn:only-child{width:100%}
  .home-loc{grid-template-columns:1fr 1fr}
  .home-loc b{font-size:24px}
  .mini-prog{grid-template-columns:1fr}
  .mini-prog .ph{min-height:240px}
  .pk-bar{margin-top:28px;gap:16px}
  .pk-bar>div{width:100%}
  .floors{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .floors::-webkit-scrollbar{display:none}
  .floors button{flex:none;min-width:62px}
  .plate-card{padding:16px 14px 14px;border-radius:18px}
  .plate{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:auto repeat(6,52px) 50px repeat(6,52px);gap:6px}
  .plate .side{grid-row:1;grid-column:var(--mc);font-size:12.5px;align-items:flex-start;line-height:1.35}
  .plate .side svg{margin-top:2px}
  .plate .corr{grid-row:2/-1;grid-column:2;writing-mode:vertical-rl;background:repeating-linear-gradient(180deg,#eef0ea 0 10px,#e8ebe3 10px 20px)}
  .plate .corr span{display:none}
  .plate .core{grid-row:8;grid-column:1/-1;flex-direction:row}
  .plate .core span{display:block}
  .u{grid-row:var(--mr);grid-column:var(--mc);flex-direction:row;justify-content:space-between;padding:0 12px;gap:6px}
  .u span{font-size:12px}
  .u span i{display:inline}
  .flist{padding:4px 16px 8px}
  .flist .sd2{display:none}
  .flist td span.mut{display:none}
  .sel{padding:20px}
  .sel h3{font-size:24px}
  .calc{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .calc .cin,.calc .cout{padding:24px 20px}
  .calc .big{font-size:44px}
  .bk-sec{padding-top:32px}
  .stepper li{font-size:14px;padding-right:6px;gap:8px}
  .stepper li b{width:26px;height:26px;font-size:13px}
  .stepper li:not(.on) span{display:none}
  .bk{grid-template-columns:1fr;gap:16px;margin-top:20px}
  .card{padding:20px 16px;border-radius:18px}
  .cal{gap:4px}
  .cal button{height:42px;font-size:14px;border-radius:10px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:1fr}
  .two-q{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr}
  .sum{position:static}
  .sum .card{padding:20px 16px}
  .ok-card{padding:32px 18px}
  .ok-card h2{font-size:26px}
  .code{font-size:23px}
  .gal{grid-template-columns:1fr;gap:28px}
  .gal h2{font-size:30px}
  .info div{grid-template-columns:96px 1fr;gap:12px}
  .site{grid-template-columns:1fr;gap:12px}
  .foot{padding:44px 0 24px}
  .foot .fcols{grid-template-columns:1fr;gap:26px}
}

/* home: quick visit card, facility photos */
.reg .qv{background:#fff;color:var(--ink);border-radius:24px;padding:32px}
.qv h3{font-size:24px}
.qv .sub{color:var(--ink-2);font-size:15px;margin-top:2px}
.qdays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px}
.qdays a{display:block;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 10px;text-align:center;line-height:1.35;transition:box-shadow .15s}
.qdays a:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.qdays small{display:block;font-size:13px;color:var(--ink-2)}
.qdays b{display:block;font-weight:500;font-size:17px;margin-top:2px}
.qdays span{display:block;font-size:12.5px;color:var(--leaf-d);margin-top:2px}
.qv>.btn{width:100%;margin-top:16px}
.qv .fine{font-size:14px;color:var(--ink-2);margin-top:14px;text-align:center}
.qv .fine a{border-bottom:1px solid var(--line)}
.fphotos{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:44px}
.fphotos figure{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10}
.fphotos figure:last-child{aspect-ratio:auto}
.fphotos figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:10px;font-size:14px;padding:7px 12px}
.fphotos+.fgrid{margin-top:28px}
.sel-empty{color:var(--ink-2);text-align:center;padding:40px 10px}
@media (max-width:860px){
  .reg .qv{padding:24px 18px}
  .qdays{grid-template-columns:1fr 1fr}
  .fphotos{grid-template-columns:1fr;margin-top:32px}
  .fphotos figure:last-child{aspect-ratio:16/10}
}

/* available-unit list under the floor plan */
.flist{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:6px 22px 10px}
.flist h4{font-size:16px;font-weight:500;padding:14px 0 10px;display:flex;justify-content:space-between;gap:12px}
.flist h4 small{font-size:14px;font-weight:400;color:var(--ink-2)}
.flist table{width:100%;border-collapse:collapse;font-size:15px}
.flist td{padding:10px 8px 10px 0;border-top:1px solid var(--line);vertical-align:middle}
.flist td:last-child{padding-right:0;text-align:right;width:1%}
.flist td b{font-family:Manrope,sans-serif;font-weight:700}
.flist td.p{text-align:right;font-family:Manrope,Anuphan,sans-serif;font-weight:600;white-space:nowrap}
.flist .mut{color:var(--ink-2)}
.flist tr.on td{background:#f4f6f9}
.flist button{border:0;border-radius:999px;background:var(--soft);padding:6px 14px;cursor:pointer;font-size:14px;white-space:nowrap}
.flist tr.on button{background:var(--navy);color:#fff}
.flist .none{color:var(--ink-2);padding:14px 0 10px;border-top:1px solid var(--line)}
/* home: location with map */
.hl{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;margin-top:40px}
.hl .home-loc{grid-template-columns:1fr 1fr;margin-top:0;gap:0 24px}
.hl .home-loc div{padding:18px 0;border-bottom:1px solid #d6d9d0}
@media (max-width:860px){
  .hl{grid-template-columns:1fr;gap:28px;margin-top:28px}
}