/* CitraLand Utara Surabaya microsite — tokens first, re-skin here */
:root{
  --cream:#f7f1e8; --paper:#fffcf7; --sand:#efe4d4; --line:#e4d8c6;
  --ink:#17251f; --ink-2:#506058; --night:#0f2a22; --night-2:#18382d;
  --gold:#d2b27a; --gold-deep:#7d5f24; --gold-soft:#f0e2c4;
  --wa:#1f9d55; --wa-dark:#17803f;
  --r:14px; --r-lg:20px; --shadow:0 18px 50px -24px rgba(23,37,31,.35);
  --serif:'Playfair Display',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,5vw,56px); --gap:calc((100vw - min(1240px,100vw - var(--pad)*2))/2); --sec:clamp(60px,8vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{overflow-x:clip;font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.container{width:min(1240px,100% - var(--pad)*2);margin-inline:auto}
.ic{width:1.25em;height:1.25em;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:8px}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em;font-variant-numeric:lining-nums}
h2{font-size:clamp(2.3rem,5vw,4rem)}
h2 em,h1 span{font-style:italic;color:var(--gold-deep);font-weight:500}
.kicker{display:inline-flex;gap:14px;align-items:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.kicker i{font-style:normal;color:var(--gold-deep);font-weight:600}
.kicker i::after{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-left:14px}
.lead{font-size:1.06rem;color:var(--ink-2);max-width:56ch;margin-top:22px}
.eyebrow{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.fine{font-size:.74rem;color:var(--ink-2);margin-top:18px;max-width:78ch}
.section{padding-block:var(--sec)}
.sec-head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head p{color:var(--ink-2);margin-top:18px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.92rem;transition:transform .25s,background .25s,box-shadow .25s,color .25s;border:1px solid transparent;min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#1b1305}
.btn-gold:hover{background:#c99a4c}
.btn-wa{background:#0f2a22;color:#fff}
.btn-wa:hover{background:#18382d}
.btn-ghost{border-color:currentColor}
.btn-ghost-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.14)}
.link-arrow{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font-size:.9rem;font-weight:500}
.link-arrow span{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--ink);border-radius:999px;transition:.3s}
.link-arrow:hover span{background:var(--ink);color:#fff;transform:translateX(4px)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background .3s,color .3s,box-shadow .3s,padding .3s;padding-block:14px}
.nav.scrolled,.nav.solid{background:rgba(250,246,238,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand b{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1;font-weight:600}
.brand small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:clamp(2px,.6vw,8px);font-size:.86rem;font-weight:500}
.nav-links a:not(.btn){opacity:.82;padding:8px 15px;border-radius:999px;transition:background .25s,opacity .25s}
.nav-links a.active{opacity:1;background:rgba(255,255,255,.18)}
.nav.scrolled .nav-links a.active,.nav.solid .nav-links a.active{background:rgba(23,37,31,.08)}
.nav-links a:not(.btn):hover{opacity:1}
.nav-cta{margin-left:10px;padding:10px 22px;min-height:42px;font-size:.84rem}
.nav .nav-cta{background:var(--gold);border-color:var(--gold);color:#1b1305}
.nav .nav-cta:hover{background:transparent;border-color:currentColor;color:inherit}
.burger{display:none;width:44px;height:44px;place-items:center;font-size:1.3rem}

/* hero */
.hero{position:relative;display:flex;align-items:flex-end;height:min(calc(100vw*866/1816),100svh);min-height:520px;color:#fff;overflow:hidden;background:var(--night)}
.hero>picture,.hero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,56,.6) 0%,rgba(6,20,56,.08) 40%,rgba(6,20,56,.8) 100%)}
.hero-in{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:clamp(32px,5vw,56px);padding-top:120px}
.hero-tag{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.hero-tag span{color:#fff;margin-right:14px}
.hero h1{font-family:var(--sans);font-weight:700;font-size:clamp(2.6rem,7.2vw,6.4rem);letter-spacing:-.035em;line-height:.95}
.hero h1 span{display:block;font-family:var(--serif);font-weight:500;color:var(--gold-soft);font-size:.58em;letter-spacing:-.01em;margin-top:.08em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-right{display:flex;align-items:flex-end;gap:36px;font-size:.78rem;color:rgba(255,255,255,.75)}
.hero-right p b{display:block;font-size:1rem;color:#fff;margin-top:2px}
.hero-scroll{width:54px;height:54px;border:1px solid rgba(255,255,255,.5);border-radius:999px;display:grid;place-items:center;transform:rotate(90deg);color:#fff}
.hero-scroll:hover{background:rgba(255,255,255,.14)}

.produk.fit{padding-block:78px 16px}
.produk.fit>.container{width:min(1360px,100% - 40px)}
.produk .sec-head{margin-bottom:10px}
.produk .sec-head p{display:none}
.produk .sec-head h2{font-size:clamp(1.5rem,2.2vw,2rem)}
/* about */
.fit{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(84px,11vh,112px) clamp(28px,4vh,48px)}
.fit>.container{width:min(1240px,100% - var(--pad)*2)}
.fit .sec-head{max-width:1040px;margin-bottom:clamp(16px,3vh,32px)}
.fit .sec-head h2{font-size:clamp(1.6rem,2.5vw,2.3rem)}
.fit .sec-head .kicker{margin-bottom:12px}
.fit .sec-head p{margin-top:10px;font-size:.95rem}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:center}
.about h2{font-size:clamp(2.3rem,4.2vw,3.7rem)}
.about h2 em{white-space:nowrap}
.about-img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.about-img img{width:100%;height:100%;object-fit:cover}

/* fasilitas */
.fas-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.fas-img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.fas-img img{width:100%;height:100%;object-fit:cover}
.fas-cards{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:12px}
.fas-cards li{display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,253,248,.7);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:transform .3s,box-shadow .3s,border-color .3s}
.fas-cards li:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.fas-cards .ic{width:28px;height:28px;color:var(--gold-deep);margin-bottom:12px}
.fas-cards b{display:block;font-size:.88rem;line-height:1.3}
.fas-cards span{font-size:.74rem;color:var(--ink-2);line-height:1.4;display:block;margin-top:3px}
.fas-cards li.cta{background:var(--gold);border-color:var(--gold)}
.fas-cards li.cta a{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.fas-cards li.cta .ic,.fas-cards li.cta span{color:#1b1305}

/* produk */
.produk.fit{padding-block:78px 24px}
.produk.fit>.container{width:min(1360px,100% - 40px)}
.produk .sec-head{margin-bottom:12px}
.produk .sec-head h2{font-size:clamp(1.5rem,2.2vw,2rem)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,40px);border-bottom:1px solid var(--line);margin-bottom:clamp(16px,3vh,32px)}
.tab{padding:10px 2px 12px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s}
.tab i{font-style:normal;color:var(--gold-deep);margin-right:10px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--gold)}
.pgroup{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) minmax(280px,380px);gap:clamp(20px,3vw,48px);align-items:start;animation:fin .6s cubic-bezier(.2,.7,.2,1)}
.pgroup[hidden],.ptype[hidden]{display:none}
.ptype{display:contents}
@keyframes fin{from{opacity:0;transform:translateY(14px)}}
.pl-count{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.pl-item{display:flex;gap:12px;width:100%;padding:13px 0;border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:left;transition:color .25s,border-color .25s}
.pl-item i{font-style:normal;color:var(--gold-deep);letter-spacing:.06em;font-size:.76rem;padding-top:1px}
.pl-item:hover{color:var(--ink)}
.pl-item.on{color:var(--ink);font-weight:700;border-bottom-color:var(--gold)}
.pt-img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--night-2);align-self:center}
.pt-img img{width:100%;height:100%;object-fit:cover}
.pt-info{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
.pt-info h3{font-size:clamp(2rem,3vw,2.8rem);text-transform:uppercase;letter-spacing:.02em;margin-top:-4px}
.pt-promo{font-size:.9rem;font-weight:500;padding-bottom:clamp(10px,1.6vh,16px);border-bottom:1px solid var(--line)}
.pt-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding-bottom:clamp(10px,1.6vh,16px);border-bottom:1px solid var(--line)}
.pt-specs li{display:flex;gap:10px;align-items:center}
.pt-specs .ic{color:var(--night);width:1.7em;height:1.7em;flex:none}
.pt-specs span{display:block;font-size:.72rem;color:var(--ink-2)}
.pt-specs b{font-size:1.25rem;font-weight:500}
.pt-price span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.pt-price strong{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;font-size:clamp(1.8rem,2.6vw,2.4rem);color:var(--ink);line-height:1.15}
.pt-price small{font-family:var(--sans);font-size:.5em;font-weight:500;margin-left:2px}
.pt-actions{display:flex;gap:10px;align-items:center}
.pt-actions .btn{flex:1;min-height:52px;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.arrow{width:48px;height:48px;border:1px solid var(--ink-2);border-radius:50%!important;display:grid;place-items:center;transition:background .25s,color .25s;flex:none}
.arrow:hover{background:var(--ink);color:#fff}
.arrow[data-step="-1"] .ic{transform:rotate(180deg)}

/* promo */
.promo-grid{--pw:max(300px,calc((100svh - 250px)*.8));display:grid;grid-template-columns:1fr min(var(--pw),100%);grid-template-areas:"head photo" "body photo";gap:18px clamp(32px,5vw,72px);align-items:center}
.promo-head{grid-area:head;align-self:end}.promo-photo{grid-area:photo}.promo-body{grid-area:body;align-self:start}
.promo h2{font-size:clamp(1.8rem,2.8vw,2.5rem)}
.promo-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.promo-photo img{width:100%;height:auto}
.promo-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-bottom:22px}
.promo-list li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;padding:6px 0}
.promo-list .ic{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--gold);color:#1b1305;stroke-width:2.4}

/* area */
.area-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.acard{grid-column:span 2;background:var(--night);color:#f4efe4;border-radius:var(--r-lg);padding:22px 24px;transition:transform .3s}
.acard:nth-child(n+4){grid-column:span 3}
.acard:hover{transform:translateY(-4px)}
.acard header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.acard header .ic{width:30px;height:30px;color:var(--gold-soft)}
.acard h3{font-size:1.25rem}
.acard li{font-size:.86rem;color:#cfc8b8;padding:4px 0 4px 16px;position:relative}
.acard li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* lokasi */
.lok-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.lok-cards{display:grid;grid-template-rows:repeat(6,1fr);gap:8px}
.lok-cards li{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:5px 14px;transition:border-color .25s,transform .25s}
.lok-cards li:hover{border-color:var(--gold);transform:translateX(4px)}
.lok-cards .ic{width:32px;height:32px;padding:7px;border-radius:10px;background:var(--sand);color:var(--gold-deep);flex:none}
.lok-cards b{display:block;font-size:.88rem;line-height:1.3}
.lok-cards span{font-size:.72rem;color:var(--ink-2)}
.lok-map{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.lok-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lok-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding:12px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);font-size:.88rem;color:var(--ink-2)}
.lok-bar>.ic{color:var(--gold-deep)}
.lok-bar span{flex:1;min-width:220px}
.lok-bar .btn{padding:10px 20px;min-height:42px;font-size:.84rem}

/* footer */
.f-cta{position:relative;color:#fff;overflow:hidden;background:var(--night)}
.f-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,26,20,.88),rgba(8,26,20,.45))}
.f-cta .container{position:relative;z-index:1;padding-block:clamp(72px,9vw,120px)}
.f-cta .kicker{color:var(--gold-soft)}
.f-cta h2{color:#fff;font-size:clamp(2rem,4.2vw,3.4rem)}
.f-cta h2 em{color:var(--gold-soft)}
.f-cta p{max-width:52ch;margin-top:22px;opacity:.85}
.footer{background:var(--night);color:#cfc8b8;padding-top:clamp(48px,7vw,80px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:40px}
.f-brand p{margin-top:20px;font-size:.88rem;max-width:40ch}
.footer .brand{color:#fff}
.f-col h4{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px;font-weight:600}
.f-col a,.f-line{display:flex;gap:10px;font-size:.88rem;padding:5px 0}
.f-col a:hover{color:#fff}
.f-line .ic{color:var(--gold);margin-top:3px}
.f-news{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:48px;padding:22px 26px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);background:rgba(255,255,255,.04)}
.f-news>.ic{width:30px;height:30px;color:var(--gold)}
.f-news p{flex:1;min-width:220px}
.f-news b{display:block;color:#fff;font-family:var(--serif);font-size:1.35rem;font-weight:500}
.f-news span{font-size:.84rem}
.f-disclaimer{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:#9d9686}
.f-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:20px 0 0;padding-bottom:34px;font-size:.78rem}
.f-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.f-links a:hover{color:#fff}
.totop{display:inline-flex;align-items:center;gap:8px;color:#fff}

/* floating wa */
.wa-float{border-radius:999px!important;position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;background:var(--wa);color:#fff;padding:14px;border-radius:4px;font-weight:600;font-size:.88rem;box-shadow:0 10px 30px -8px rgba(31,157,85,.7);transition:background .25s,transform .25s}
.wa-float:hover{background:var(--wa-dark);transform:translateY(-3px)}
.wa-float .ic{width:28px;height:28px}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s,padding .35s}
.wa-float:hover span,.wa-float:focus-visible span{max-width:170px;padding:0 6px 0 10px}

/* legal */
.legal{max-width:820px;padding:130px 0 80px}
.legal h1{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--gold-deep)}
.legal .updated{font-size:.84rem;color:var(--ink-2);margin:10px 0 30px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal h2{font-size:1.7rem;margin:30px 0 10px}
.legal p,.legal li{color:var(--ink-2);font-size:.97rem;margin-bottom:10px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.legal a:not(.btn){color:var(--gold-deep);font-weight:600;text-decoration:underline}
.legal .note{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:18px 20px;margin:28px 0;font-size:.9rem;color:var(--ink-2)}

/* reveal (JS only) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}*{animation:none!important}.btn:hover,.pcard:hover,.acard:hover{transform:none}}

/* responsive */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .fas-cards{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .fas-cards li.cta{grid-column:1/-1;padding:14px 18px}
  .fas-cards li.cta a{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "i s";column-gap:14px;align-items:center;height:auto}
  .fas-cards li.cta .ic{grid-area:i;margin:0}
  .fas-cards li.cta b{grid-area:t}
  .fas-cards li.cta span{grid-area:s;margin-top:0}
}
@media (max-width:860px){
  .burger{display:grid}
  .nav-links{position:fixed;inset:0 0 auto;top:0;flex-direction:column;align-items:flex-start;gap:6px;padding:92px var(--pad) 28px;background:var(--cream);color:var(--ink);transform:translateY(-102%);transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow);z-index:-1;font-size:1.05rem}
  .nav-links.open{transform:none}
  .nav-links a:not(.btn){padding:10px 0;width:100%;border-radius:0;border-bottom:1px solid var(--line);opacity:1}
  .nav-links a.active{background:none!important;color:var(--gold-deep)}
  .nav-cta{margin:14px 0 0}
  .nav.menu-open{background:var(--cream);color:var(--ink)}
  .fit{min-height:0;padding-block:64px}

  /* mobile: semua tipe dari semua cluster tampil, urut cicilan termurah (--o per tipe) */
  .produk.fit>.container{display:flex;flex-direction:column;gap:34px}
  .produk .sec-head{order:0;margin-bottom:0}
  .produk .tabs,.produk .pl,.produk .pt-actions .arrow,.produk .pgroup>.pl{display:none}
  .produk .pgroup,.produk .pgroup[hidden]{display:contents}
  .produk .ptype,.produk .ptype[hidden]{display:flex;flex-direction:column;gap:16px;order:var(--o);min-width:0;padding-top:34px;border-top:1px solid var(--line)}
  .produk .ptype:nth-of-type(n){animation:none}
  .pt-info{min-width:0}
  .pt-img{align-self:stretch}
  .split,.fas-grid,.lok-grid{grid-template-columns:1fr}
  .lok-cards{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .lok-map{aspect-ratio:900/640}
  .promo-grid{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body"}
  .promo-photo{width:min(100%,420px);margin-inline:auto}
  .area-grid{grid-template-columns:1fr}
  .acard,.acard:nth-child(n+4){grid-column:auto}
  .hero-right p{display:none}
}
@media (max-width:699px){
  /* foto mobile: rumah di bagian bawah, teks ditaruh di area langit supaya rumah tidak tertutup */
  .hero{--h:100svh;height:var(--h);min-height:480px;align-items:flex-start}
  .hero>picture img{object-position:50% 100%}
  .hero::after{background:linear-gradient(180deg,rgba(6,20,56,.66) 0%,rgba(6,20,56,.34) 36%,rgba(6,20,56,0) 56%)}
  .hero-in{flex-direction:column;align-items:flex-start;padding-top:max(96px,calc((var(--h) - 102vw - 206px)/2));padding-bottom:0}
  .hero-tag{color:#fff}
  .hero-right{display:none}
}
@media (max-width:620px){
  .hero-scroll{display:none}
  .promo-list,.lok-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* hover & motion: foto, poin, tombol */
.about-img,.fas-img,.promo-photo,.pt-img,.lok-map{overflow:hidden}
.about-img img,.fas-img img,.promo-photo img,.pt-img img,.lok-map img,.f-cta>img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.promo-list li,.acard li,.lok-cards li,.fas-cards li,.pl-item,.pt-specs li,.f-col a,.f-links a,.tab,.nav-links a{transition:transform .3s cubic-bezier(.2,.7,.2,1),color .25s,background .25s,border-color .25s,box-shadow .3s}
.btn,.arrow,.link-arrow span,.wa-float,.totop .ic,.hero-scroll{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,box-shadow .3s,border-color .25s}
.btn .ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
@media (hover:hover){
  .js .fas-cards li.rv.in:hover{transform:translateY(-6px)}
  .js .lok-cards li.rv.in:hover{transform:translateX(6px)}
  .js .acard.rv.in:hover{transform:translateY(-4px)}
  .about-img:hover img,.fas-img:hover img,.promo-photo:hover img,.pt-img:hover img,.lok-map:hover img{transform:scale(1.06)}
  .about-img,.fas-img,.promo-photo,.pt-img,.lok-map{transition:box-shadow .4s}
  .about-img:hover,.fas-img:hover,.promo-photo:hover,.pt-img:hover,.lok-map:hover{box-shadow:0 26px 60px -24px rgba(23,37,31,.45)}
  .promo-list li:hover{transform:translateX(6px);color:var(--gold-deep)}
  .promo-list li:hover .ic{transform:scale(1.15)}
  .promo-list .ic,.fas-cards .ic,.acard header .ic,.pt-specs .ic{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .acard li:hover{transform:translateX(5px);color:#fff}
  .acard:hover header .ic,.fas-cards li:hover .ic,.pt-specs li:hover .ic{transform:scale(1.15) rotate(-6deg)}
  .pl-item:hover{transform:translateX(6px)}
  .pt-specs li:hover{transform:translateY(-3px)}
  .f-col a:hover,.f-links a:hover{transform:translateX(4px)}
  .tab:hover{transform:translateY(-2px)}
  .btn:hover::after{transform:translateX(120%)}
  .btn:hover{box-shadow:0 12px 28px -12px rgba(15,42,34,.55)}
  .btn:hover .ic{transform:translateX(3px)}
  .btn-wa:hover .ic{transform:rotate(-12deg) scale(1.1)}
  .arrow:hover{transform:scale(1.08)}
  .link-arrow:hover span .ic{transform:translateX(2px)}
  .hero-scroll:hover{transform:rotate(90deg) translateX(4px)}
  .totop:hover .ic{transform:translateY(-3px)}
  .wa-float:hover .ic{transform:rotate(-12deg) scale(1.08)}
}
.btn:active,.arrow:active,.tab:active,.pl-item:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .about-img img,.fas-img img,.promo-photo img,.pt-img img,.lok-map img{transition:none}
  .btn::after{display:none}
  *{transition-duration:.01ms!important}
}