/* Masteri Park Place · "Bình minh năng lượng" (Park Energy): warm dawn paper, slate ink from the brochure, one sunrise accent.
   Signature motion: sunrise hero (sky warms, sun rises, gold light runs up the facade's gold fins), the brochure's
   "energy lines" (vertical strokes rising from a horizon), a sun that travels dawn → night through the 4 energies,
   tower elevations that fill floor by floor, horizon-line image reveals, a canvas musical fountain at night.
   Light only. Everything degrades to static with prefers-reduced-motion. */
:root{
  --dawn:#FBF5EC; --sheet:#FFFDF9; --sand:#F3E9DA; --park:#E7EEE2; --leaf:#2F6B4E;
  --ink:#262A36; --ink-2:#4E5468; --ink-3:#858A99; --line:rgba(38,42,54,.12);
  --slate:#6B7184; --dusk:#3A3F52; --night:#1C1F2C; --night-2:#252939;
  --sun:#E8892F; --sun-2:#C2601F; --glow:#FFC27A; --gold:#F6E3A0;
  --r:20px; --r-sm:12px; --pill:999px;
  --ff-d:'Taviraj', Georgia, serif; --ff:'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1); --gut:16px;
  color-scheme:light;
}
@media(min-width:700px){ :root{ --gut:28px; } }
@media(min-width:1100px){ :root{ --gut:48px; } }
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:92px; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--dawn); color:var(--ink); font:400 16.5px/1.62 var(--ff); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--ff-d); font-weight:300; line-height:1.08; letter-spacing:-.01em; margin:0 0 .5em; text-wrap:balance; }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--sun-2); font-weight:200; }
p{ margin:0 0 1em; text-wrap:pretty; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:8px 14px; border-radius:8px; }
.skip:focus{ left:8px; }
:focus-visible{ outline:2px solid var(--sun-2); outline-offset:3px; border-radius:6px; }
.wrap{ width:100%; max-width:1320px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.sec{ padding-top:clamp(76px, 10vw, 150px); padding-bottom:clamp(76px, 10vw, 150px); }
.sec.tight{ padding-top:clamp(50px, 6vw, 86px); padding-bottom:clamp(50px, 6vw, 86px); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font:600 12px/1 var(--ff); font-stretch:115%; letter-spacing:.2em; text-transform:uppercase; color:var(--sun-2); margin:0 0 20px; }
.eyebrow::before{ content:""; width:22px; height:14px; flex:none; background:
  linear-gradient(var(--sun),var(--sun)) 2px 100%/2px 70% no-repeat, linear-gradient(var(--sun),var(--sun)) 7px 100%/2px 100% no-repeat,
  linear-gradient(var(--sun),var(--sun)) 12px 100%/2px 55% no-repeat, linear-gradient(var(--sun),var(--sun)) 17px 100%/2px 85% no-repeat; opacity:.9; }
.on-dark .eyebrow{ color:var(--glow); }
.h2{ font-size:clamp(36px, 5.4vw, 74px); }
.h3{ font-size:clamp(25px, 2.7vw, 36px); }
.lede{ font-size:clamp(17px, 1.45vw, 20px); color:var(--ink-2); max-width:62ch; }
.muted{ color:var(--ink-3); }
.small{ font-size:14px; }
.src{ font-size:12.5px; color:var(--ink-3); margin-top:12px; }
.src a{ color:var(--sun-2); }
.grid2{ display:grid; gap:clamp(28px, 4vw, 68px); grid-template-columns:minmax(0,1fr); }
@media(min-width:900px){ .grid2{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:center; } }

/* ---------- buttons, chips ---------- */
.btn{ --b:var(--sun-2); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 26px; border-radius:var(--pill); border:1px solid var(--b); background:var(--b); color:#fff; font-weight:600; font-size:15.5px; text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate; transition:box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s; }
/* sunrise fill: a warm disc rises from the bottom edge on hover */
.btn::before{ content:""; position:absolute; left:50%; top:100%; width:140%; aspect-ratio:1; border-radius:50%; translate:-50% 0; background:radial-gradient(circle, var(--glow) 0 22%, var(--sun) 58%, transparent 72%); z-index:-1; transition:translate .7s var(--ease); }
.btn:hover::before{ translate:-50% -62%; }
.btn:hover{ box-shadow:0 14px 34px -14px rgba(194,96,31,.7); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:rgba(38,42,54,.3); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--sun); }
.btn.ghost::before{ background:radial-gradient(circle, rgba(255,194,122,.6) 0 30%, rgba(232,137,47,.22) 60%, transparent 72%); }
.btn.light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn.on-photo{ background:rgba(255,253,249,.16); border-color:rgba(255,253,249,.6); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn.sm{ min-height:42px; padding:0 18px; font-size:14.5px; }
.btn .ar{ transition:transform .3s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.cta-row,.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 15px; border-radius:var(--pill); border:1px solid var(--line); background:var(--sheet); color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:background .25s, border-color .25s, color .25s; white-space:nowrap; }
.chip:hover{ border-color:var(--sun); color:var(--sun-2); }
.chip[aria-pressed="true"],.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
@keyframes spin{ to{ rotate:360deg; } }
@keyframes fadeUp{ from{ opacity:0; translate:0 24px; } }
@keyframes pulse{ from{ scale:.6; opacity:.8; } to{ scale:2.6; opacity:0; } }
@keyframes drift{ to{ translate:-50% 0; } }
@keyframes blink{ 50%{ opacity:.2; } }

/* ---------- top "horizon" progress: a line with a small sun travelling along it ---------- */
.thread{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:60; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, rgba(232,137,47,.2), var(--sun)); }
.thread-sun{ position:fixed; z-index:61; top:-5px; left:0; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle, #fff 0 25%, var(--glow) 45%, var(--sun) 70%); box-shadow:0 0 14px 4px rgba(255,194,122,.7); pointer-events:none; opacity:0; }
@supports (animation-timeline: scroll()){
  .thread{ animation:grow linear both; animation-timeline:scroll(root); }
  .thread-sun{ opacity:1; animation:travel linear both; animation-timeline:scroll(root); }
  @keyframes grow{ to{ transform:scaleX(1); } }
  @keyframes travel{ from{ left:-6px; } to{ left:calc(100% - 6px); } }
}

/* ---------- header ---------- */
.bar{ position:fixed; z-index:50; left:0; right:0; top:0; padding-top:12px; transition:transform .45s var(--ease); }
.bar.hide{ transform:translateY(-120%); }
.bar-in{ display:flex; align-items:center; gap:18px; min-height:64px; }
.bar .shell{ display:flex; align-items:center; gap:18px; width:100%; min-height:64px; padding:0 10px 0 18px; border-radius:var(--pill); background:rgba(255,253,249,.82); border:1px solid rgba(255,255,255,.8); box-shadow:0 12px 40px -20px rgba(58,63,82,.45); backdrop-filter:saturate(1.3) blur(16px); -webkit-backdrop-filter:saturate(1.3) blur(16px); transition:background .4s, border-color .4s, box-shadow .4s, color .4s; }
html:has(.phead.photo) .bar:not(.solid) .shell{ background:rgba(28,31,44,.18); border-color:rgba(255,255,255,.22); box-shadow:none; color:#fff; }
html:has(.hero) .bar:not(.solid) .shell{ background:rgba(255,253,249,.42); border-color:rgba(255,255,255,.55); box-shadow:none; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; color:inherit; }
.brand .lk{ display:block; width:118px; aspect-ratio:900/516; background:currentColor; -webkit-mask:url(/img/logo-mask.png) center/contain no-repeat; mask:url(/img/logo-mask.png) center/contain no-repeat; }
.brand .bw{ display:flex; flex-direction:column; line-height:1; padding-left:10px; border-left:1px solid rgba(128,128,128,.35); }
.brand .bw small{ font-size:9.5px; font-stretch:115%; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
.brand .bw small + small{ margin-top:4px; }
.bar .brand .lk{ color:var(--sun-2); width:104px; }
html:has(.phead.photo) .bar:not(.solid) .brand .lk{ color:#fff; }
.nav{ display:none; margin-left:auto; align-items:center; gap:2px; }
.nav a{ position:relative; padding:9px 12px; border-radius:var(--pill); font-size:14.5px; font-weight:500; text-decoration:none; white-space:nowrap; opacity:.86; transition:opacity .2s, background .2s; }
.nav a:hover{ opacity:1; background:rgba(232,137,47,.1); }
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:50%; bottom:2px; width:6px; height:6px; border-radius:50%; translate:-50% 0; background:var(--sun); box-shadow:0 0 8px 2px rgba(255,194,122,.8); }
.nav a.ask{ margin-left:8px; background:var(--ink); color:#fff; opacity:1; padding:10px 18px; }
.nav a.ask:hover{ background:var(--sun-2); }
[data-nav="bang-tin"]{ display:none !important; }
.news-on [data-nav="bang-tin"]{ display:inline-flex !important; }
.news-on .mm-list [data-nav="bang-tin"]{ display:flex !important; }
#menuBtn{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border-radius:var(--pill); border:0; background:var(--ink); color:#fff; font-weight:600; font-size:14.5px; cursor:pointer; }
#menuBtn i{ width:16px; height:10px; position:relative; border-top:2px solid; border-bottom:2px solid; }
@media(min-width:1200px){ .nav{ display:flex; } #menuBtn{ display:none; } }
@media(max-width:420px){ .bar .brand .bw{ display:none; } }
/* mobile menu: opens like the sun coming up from the bottom */
#mmenu{ width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--night); color:#fff; overflow:hidden; }
#mmenu::backdrop{ background:transparent; }
#mmenu[open]{ animation:mmIn .6s var(--ease); }
@keyframes mmIn{ from{ clip-path:circle(0 at 50% 110%); } to{ clip-path:circle(150% at 50% 110%); } }
.mm-in{ height:100%; overflow:auto; padding:22px var(--gut) 40px; background:radial-gradient(90% 55% at 50% 110%, rgba(232,137,47,.42), rgba(194,96,31,.12) 45%, transparent 70%); }
.mm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mm-head .brand{ color:var(--gold); }
#menuClose{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:26px; cursor:pointer; }
.mm-list{ display:grid; gap:4px; }
.mm-list a{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none; opacity:0; translate:0 18px; }
#mmenu[open] .mm-list a{ animation:mmItem .6s var(--ease) forwards; animation-delay:calc(var(--i) * 45ms + 140ms); }
@keyframes mmItem{ to{ opacity:1; translate:0 0; } }
.mm-list b{ font-family:var(--ff-d); font-weight:300; font-size:30px; }
.mm-list small{ color:rgba(255,255,255,.6); font-size:13.5px; text-align:right; }

/* ---------- hero: sunrise ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:#E9D2BD; isolation:isolate; }
.hero .media{ position:absolute; inset:0; z-index:-2; }
.hero .media > img,.hero .fins{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 40%; }
.hero .media > img{ animation:heroIn 3s var(--ease) both; }
@keyframes heroIn{ from{ scale:1.1; filter:brightness(.62) saturate(.55) hue-rotate(-12deg); } }
/* dawn veil: deep blue-violet sky that lifts away as the sun comes up */
.hero .dawn{ position:absolute; inset:0; background:linear-gradient(180deg, #2C2F52 0%, #6A5A7C 45%, #C98E78 100%); mix-blend-mode:multiply; animation:dawnLift 3.2s .2s var(--ease) both; pointer-events:none; opacity:0; }
@keyframes dawnLift{ from{ opacity:.92; } to{ opacity:0; } }
/* the sun: soft disc + rays, rises from behind the horizon at the right, where the photo's own sun is */
.hero .sun{ position:absolute; left:var(--sx, 88%); top:var(--sy, 34%); width:clamp(220px, 34vw, 560px); aspect-ratio:1; translate:-50% -50%; pointer-events:none; mix-blend-mode:screen; }
.hero .sun i{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(255,247,226,.95) 0 6%, rgba(255,214,150,.75) 14%, rgba(255,170,90,.32) 34%, rgba(255,150,70,0) 62%); animation:sunUp 3.4s .3s var(--ease) both, breathe 7s 3.7s ease-in-out infinite; }
.hero .sun b{ position:absolute; inset:-30%; border-radius:50%; background:repeating-conic-gradient(from 0deg, rgba(255,214,150,.16) 0 4deg, transparent 4deg 13deg); -webkit-mask:radial-gradient(circle, #000 0 18%, transparent 58%); mask:radial-gradient(circle, #000 0 18%, transparent 58%); animation:sunUp 3.4s .3s var(--ease) both, spin 140s linear infinite; }
@keyframes sunUp{ from{ translate:0 60%; opacity:0; scale:.6; } }
@keyframes breathe{ 50%{ scale:1.08; } }
/* gold fins of the facade: a band of light runs up them (mask = fins traced from the render, img/hero-fins.png) */
.hero .fins{ pointer-events:none; -webkit-mask:url(/img/hero-fins.png) 62% 40%/cover no-repeat; mask:url(/img/hero-fins.png) 62% 40%/cover no-repeat;
  background:linear-gradient(0deg, transparent 0 40%, rgba(255,236,170,0) 40%, rgba(255,240,190,1) 50%, rgba(255,200,110,0) 60%, transparent 60%) 0 0/100% 300% no-repeat;
  animation:finRun 4.6s 2.4s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes finRun{ from{ background-position:0 0%; } 72%,to{ background-position:0 100%; } }
/* cream veil so ink text reads on the sky */
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(251,245,236,.95) 0%, rgba(251,245,236,.88) 28%, rgba(251,245,236,.55) 44%, rgba(251,245,236,0) 62%), linear-gradient(0deg, rgba(251,245,236,.96) 0%, rgba(251,245,236,.6) 14%, rgba(251,245,236,0) 30%); }
.hero .wrap{ position:relative; padding-top:clamp(100px, 14vh, 170px); }
.hero-kick{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font:600 12px/1 var(--ff); font-stretch:115%; letter-spacing:.2em; text-transform:uppercase; color:var(--sun-2); animation:fadeUp 1s .8s var(--ease) both; }
.hero-kick i{ width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 0 rgba(232,137,47,.6); animation:ping 2.2s infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 10px rgba(232,137,47,0); } 100%{ box-shadow:0 0 0 0 rgba(232,137,47,0); } }
.hero h1{ font-size:clamp(46px, min(7.6vw, 10.5vh), 122px); font-weight:200; line-height:.98; letter-spacing:-.02em; margin:0 0 24px; max-width:11ch; color:var(--ink); }
.hero h1 em{ font-weight:200; }
.rise{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .12em; margin:0 -.04em -.12em; }
.rise > span{ display:inline-block; translate:0 110%; animation:riseUp 1.4s var(--ease) forwards; animation-delay:calc(var(--d, 0) * 110ms + 900ms); }
@keyframes riseUp{ to{ translate:0 0; } }
.hero-sub{ font-size:clamp(16px, 1.3vw, 18.5px); max-width:46ch; color:var(--ink-2); margin-bottom:22px; animation:fadeUp 1s 1.6s var(--ease) both; }
.hero-cta{ animation:fadeUp 1s 1.8s var(--ease) both; }
.hero .btn.ghost{ background:rgba(255,253,249,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-foot{ position:relative; padding-bottom:clamp(20px, 3.6vw, 52px); }
.hero-stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; border-top:1px solid rgba(38,42,54,.16); }
.hero-stats > div{ padding:14px 14px 4px 0; animation:fadeUp 1s var(--ease) both; animation-delay:calc(2s + var(--i) * 90ms); }
.hero-stats b{ display:block; font-family:var(--ff-d); font-weight:200; font-size:clamp(28px, min(3.2vw, 5.6vh), 46px); line-height:1; letter-spacing:-.01em; }
.hero-stats span{ font-size:13px; color:var(--ink-2); }
@media(min-width:800px){ .hero-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } .hero-stats > div + div{ padding-left:22px; border-left:1px solid rgba(38,42,54,.14); } }
.hero .lines{ position:absolute; left:0; bottom:0; width:min(44vw, 600px); height:64%; pointer-events:none; z-index:-1; opacity:.8; }
@media(max-width:760px){
  .hero{ justify-content:flex-start; }
  .hero .media > img,.hero .fins{ object-position:70% 50%; }
  .hero .fins{ -webkit-mask-position:70% 50%; mask-position:70% 50%; }
  .hero{ background:linear-gradient(180deg, #FBF5EC 0%, #F8E6D2 60%, #E9D2BD 100%); }
  .hero .media{ top:46%; }
  .hero::before{ background:linear-gradient(180deg, rgba(251,245,236,1) 0%, rgba(251,245,236,.96) 46%, rgba(251,245,236,.35) 58%, rgba(251,245,236,0) 68%), linear-gradient(0deg, rgba(251,245,236,.96) 0%, rgba(251,245,236,.5) 16%, rgba(251,245,236,0) 30%); }
  .hero .sun{ --sx:84%; --sy:30%; }
  .hero-foot{ margin-top:auto; }
  .hero .lines{ display:none; }
}

/* ---------- energy lines (generated SVG, see site.js) ---------- */
.lines path{ fill:none; stroke-linecap:round; }
.lines .ln{ stroke-dasharray:1; stroke-dashoffset:1; }
.lines.in .ln,.hero .lines .ln{ animation:draw 2.2s var(--ease) forwards; animation-delay:calc(var(--i) * 70ms + var(--d0, 0ms)); }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.divider{ display:block; width:100%; height:clamp(80px, 12vw, 160px); }

/* ---------- reveal ---------- */
.rv{ opacity:0; translate:0 34px; transition:opacity 1s var(--ease), translate 1s var(--ease); transition-delay:calc(var(--i, 0) * 80ms); }
.rv.in{ opacity:1; translate:0 0; }
/* horizon reveal: the photo opens upward from a glowing horizon line (clip the img, observe the figure) */
.rv-img{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--sand); }
.rv-img img{ width:100%; height:100%; object-fit:cover; transition:scale 1.6s var(--ease); scale:1.1; }
.rv-img.armed img{ clip-path:inset(100% 0 0 0); }
.rv-img.armed.in img{ animation:horizon 1.6s var(--ease) forwards; scale:1; }
.rv-img.armed::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--glow), var(--sun), var(--glow), transparent); box-shadow:0 0 18px 4px rgba(255,194,122,.7); opacity:0; pointer-events:none; }
.rv-img.armed.in::after{ animation:horizonLine 1.6s var(--ease) forwards; }
@keyframes horizon{ to{ clip-path:inset(0 0 0 0); } }
@keyframes horizonLine{ 0%{ bottom:0; opacity:1; } 85%{ opacity:1; } 100%{ bottom:100%; opacity:0; } }
.rv-img.in:not(.armed) img{ scale:1; }
.rv-img figcaption{ position:absolute; left:14px; bottom:12px; right:14px; color:#fff; font-size:13px; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.55); z-index:1; }
.rv-img[data-zoom]{ cursor:zoom-in; }
.rv-img[data-zoom]:hover img{ scale:1.04; }

/* ---------- statement (words light up on scroll) ---------- */
.statement{ font-family:var(--ff-d); font-weight:200; font-size:clamp(30px, 4.4vw, 62px); line-height:1.14; letter-spacing:-.01em; max-width:21ch; margin:0; }
.statement .w{ color:rgba(38,42,54,.16); transition:color .5s; }
.statement .w.lit{ color:var(--ink); }
.statement .w.acc{ font-style:italic; }
.statement .w.acc.lit{ color:var(--sun-2); }
@supports (animation-timeline: view()){
  .statement .w{ animation:lit linear both; animation-timeline:view(); animation-range:cover 12% cover 42%; }
  .statement .w.acc{ animation-name:litAcc; }
  @keyframes lit{ to{ color:var(--ink); } }
  @keyframes litAcc{ to{ color:var(--sun-2); } }
}
.figs{ display:grid; gap:0; margin-top:clamp(40px, 6vw, 76px); grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line); }
@media(min-width:900px){ .figs{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
.figs > div{ padding:18px 16px 0 0; }
.figs b{ display:block; font-family:var(--ff-d); font-weight:200; font-size:clamp(36px, 4vw, 56px); line-height:1; color:var(--ink); }
.figs b small{ font-size:.42em; margin-left:4px; color:var(--sun-2); }
.figs span{ display:block; font-size:14px; color:var(--ink-2); margin-top:8px; max-width:24ch; }

/* ---------- four energies: sticky sun dial + steps ---------- */
.energy{ position:relative; background:var(--e-bg, var(--dawn)); transition:background 1.2s var(--ease), color 1.2s; }
.energy[data-e="2"]{ --e-bg:#FFF6E6; }
.energy[data-e="3"]{ --e-bg:#F6E2CF; }
.energy[data-e="4"]{ --e-bg:var(--night); color:#fff; }
.energy[data-e="4"] .lede,.energy[data-e="4"] .est p{ color:rgba(255,255,255,.76); }
.en-grid{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media(min-width:960px){ .en-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:60px; } }
.dial{ position:sticky; top:96px; z-index:2; display:flex; flex-direction:column; gap:16px; padding:16px 0; }
@media(max-width:959px){ .dial{ top:76px; background:var(--e-bg, var(--dawn)); padding:10px 0 14px; transition:background 1.2s; } }
.dial-sky{ position:relative; height:clamp(150px, 26vw, 300px); border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg, var(--s1), var(--s2)); transition:--s1 1.2s, --s2 1.2s; }
@property --s1{ syntax:'<color>'; inherits:true; initial-value:#F3C9A6; }
@property --s2{ syntax:'<color>'; inherits:true; initial-value:#FBEBDD; }
.energy[data-e="2"] .dial-sky{ --s1:#BFD9EE; --s2:#FFF6E6; }
.energy[data-e="3"] .dial-sky{ --s1:#E59A6A; --s2:#F8D9B8; }
.energy[data-e="4"] .dial-sky{ --s1:#151827; --s2:#2C3150; }
.dial-sky .arc{ position:absolute; inset:0; width:100%; height:100%; }
.dial-sky .arc path{ fill:none; stroke:rgba(38,42,54,.25); stroke-dasharray:3 6; }
.energy[data-e="4"] .dial-sky .arc path{ stroke:rgba(255,255,255,.25); }
.dial-sky .orb{ position:absolute; left:12%; top:80%; width:clamp(40px, 6vw, 70px); aspect-ratio:1; border-radius:50%; translate:-50% -50%; background:radial-gradient(circle, #fff 0 20%, var(--glow) 45%, var(--sun) 70%); box-shadow:0 0 40px 14px rgba(255,194,122,.6); transition:left 1.2s var(--ease), top 1.2s var(--ease), background 1.2s, box-shadow 1.2s; }
.energy[data-e="4"] .dial-sky .orb{ background:radial-gradient(circle, #fff 0 30%, #DCE4F5 60%, #9FB0D8 80%); box-shadow:0 0 30px 8px rgba(200,214,245,.35); }
.dial-sky .skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46%; color:var(--dusk); transition:color 1.2s; }
.energy[data-e="4"] .dial-sky .skyline{ color:#0E101A; }
.dial-sky .skyline .win{ fill:var(--glow); opacity:0; transition:opacity .8s; }
.energy[data-e="3"] .dial-sky .skyline .win{ opacity:.55; }
.energy[data-e="4"] .dial-sky .skyline .win{ opacity:.95; }
.dial-sky .stars{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s; background-image:radial-gradient(1.2px 1.2px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 55% 25%, #fff, transparent), radial-gradient(1px 1px at 72% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 40% 34%, #fff, transparent); }
.energy[data-e="4"] .dial-sky .stars{ opacity:.9; }
.dial-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.dial-meta b{ font-family:var(--ff-d); font-weight:200; font-size:clamp(30px, 4vw, 54px); line-height:1; }
.dial-meta span{ font:600 12px/1.3 var(--ff); font-stretch:115%; letter-spacing:.18em; text-transform:uppercase; color:var(--sun-2); text-align:right; }
.energy[data-e="4"] .dial-meta span{ color:var(--glow); }
.dial-dots{ display:flex; gap:8px; }
.dial-dots i{ flex:1; height:3px; border-radius:3px; background:rgba(38,42,54,.15); overflow:hidden; position:relative; }
.dial-dots i::after{ content:""; position:absolute; inset:0; background:var(--sun); transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease); }
.dial-dots i.on::after{ transform:scaleX(1); }
.energy[data-e="4"] .dial-dots i{ background:rgba(255,255,255,.18); }
.est{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:30px 0; }
@media(max-width:959px){ .est{ min-height:auto; padding:26px 0 40px; } }
.est .n{ font:600 12px/1 var(--ff); font-stretch:115%; letter-spacing:.2em; color:var(--sun-2); }
.energy[data-e="4"] .est .n{ color:var(--glow); }
.est h3{ font-size:clamp(32px, 4vw, 56px); margin:12px 0 14px; }
.est p{ color:var(--ink-2); max-width:52ch; }
.est .rv-img{ aspect-ratio:16/10; margin-top:18px; }

/* ---------- four towers: elevations fill floor by floor ---------- */
.towers{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:40px; align-items:end; }
@media(min-width:900px){ .towers{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; } }
.tower{ display:flex; flex-direction:column; gap:12px; text-decoration:none; padding:16px 16px 18px; border-radius:var(--r); background:var(--sheet); border:1px solid var(--line); transition:box-shadow .5s var(--ease), border-color .4s; }
.tower:hover{ border-color:rgba(232,137,47,.6); box-shadow:0 30px 60px -38px rgba(194,96,31,.55); }
.tower .elev{ position:relative; display:flex; flex-direction:column-reverse; gap:2px; height:var(--h, 300px); padding:8px 10px; border-radius:10px; background:linear-gradient(180deg, #FBEBDD, #F6E5D2); overflow:hidden; }
.tower .elev i{ flex:1; border-radius:2px; background:rgba(38,42,54,.1); transition:background .35s; transition-delay:calc(var(--f) * 45ms); }
.tower .elev.in i{ background:var(--dusk); }
.tower .elev.in i:nth-child(3n){ background:linear-gradient(90deg, var(--dusk) 0 22%, var(--glow) 22% 30%, var(--dusk) 30% 62%, var(--glow) 62% 68%, var(--dusk) 68%); }
.tower .elev.in i.pd{ background:var(--slate); }
.tower .elev.in i.ph{ background:var(--sun-2); }
.tower .elev::after{ content:""; position:absolute; left:0; right:0; bottom:-30%; height:60%; background:radial-gradient(50% 60% at 50% 100%, rgba(255,194,122,.7), transparent 70%); opacity:0; transition:opacity 1.4s 1s; pointer-events:none; }
.tower .elev.in::after{ opacity:1; }
.tower .tag{ font:600 11.5px/1 var(--ff); font-stretch:115%; letter-spacing:.18em; text-transform:uppercase; color:var(--sun-2); }
.tower h3{ font-size:clamp(34px, 3.6vw, 48px); margin:2px 0 0; }
.tower p{ margin:0; color:var(--ink-2); font-size:14px; }
.tower .go{ font-weight:600; color:var(--sun-2); font-size:14px; }

/* ---------- photo bento ---------- */
.bento{ display:grid; grid-auto-flow:dense; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:minmax(170px, auto); margin-top:40px; }
.bento > *{ min-height:170px; }
.bento .b-wide{ grid-column:span 2; }
.bento .b-tall{ grid-row:span 2; }
@media(min-width:900px){ .bento{ grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:230px; } .bento .b-big{ grid-column:span 2; grid-row:span 2; } }
.b-txt{ display:flex; flex-direction:column; justify-content:flex-end; padding:22px; border-radius:var(--r); background:var(--dusk); color:#fff; position:relative; overflow:hidden; }
.b-txt::before{ content:""; position:absolute; right:-30%; top:-40%; width:90%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,194,122,.45), transparent 65%); }
.b-txt b{ position:relative; font-family:var(--ff-d); font-weight:200; font-size:clamp(44px, 4.6vw, 66px); line-height:1; }
.b-txt span{ position:relative; color:rgba(255,255,255,.8); font-size:14.5px; margin-top:8px; }
.b-txt.light{ background:var(--park); color:var(--ink); }
.b-txt.light::before{ background:radial-gradient(circle, rgba(47,107,78,.18), transparent 65%); }
.b-txt.light span{ color:var(--ink-2); }

/* ---------- marquee (speeds up with scroll velocity, see site.js) ---------- */
.marq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--sheet); }
.marq-in{ display:flex; width:max-content; will-change:transform; }
.marq span{ display:inline-flex; align-items:center; gap:28px; padding:20px 14px; font-family:var(--ff-d); font-weight:200; font-size:clamp(24px, 2.8vw, 38px); white-space:nowrap; }
.marq span::after{ content:""; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle, #fff 0 20%, var(--glow) 45%, var(--sun) 75%); box-shadow:0 0 10px 2px rgba(255,194,122,.6); }

/* ---------- horizontal strip ---------- */
.strip{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--gut) 18px; scrollbar-width:thin; overscroll-behavior-x:contain; }
.strip > *{ flex:0 0 min(78vw, 440px); scroll-snap-align:start; }
.strip .rv-img{ aspect-ratio:4/5; }
.strip-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.strip-nav{ display:flex; gap:8px; }
.strip-nav button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); cursor:pointer; font-size:18px; transition:background .2s, color .2s; }
.strip-nav button:hover{ background:var(--ink); color:#fff; }

/* ---------- dark dusk / night bands ---------- */
.deep{ background:var(--night); color:#fff; position:relative; overflow:hidden; }
.deep .lede{ color:rgba(255,255,255,.76); }
.deep h2 em,.deep h3 em{ color:var(--glow); }
.deep::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 85% 110%, rgba(232,137,47,.28), transparent 70%), radial-gradient(50% 40% at 0% 0%, rgba(107,113,132,.35), transparent 70%); }
.deep > *{ position:relative; }

/* ---------- musical fountain (canvas) ---------- */
.fountain{ position:relative; min-height:clamp(560px, 88vh, 860px); display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg, #11131F 0%, #1B1E30 45%, #2A2440 70%, #3A2A3A 100%); color:#fff; overflow:hidden; isolation:isolate; }
.fountain canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.fountain .wrap{ padding-bottom:clamp(36px, 6vw, 80px); }
.fountain .lede{ color:rgba(255,255,255,.8); }
.fountain h2 em{ color:var(--glow); }
.fountain .hint{ font-size:13px; color:rgba(255,255,255,.55); margin-top:14px; }
.fountain::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg, rgba(17,19,31,.94) 0%, rgba(17,19,31,.45) 26%, transparent 48%); }

/* ---------- payment schemes (bars) ---------- */
.schemes{ display:grid; gap:12px; margin-top:34px; }
.scheme{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:background .3s; }
.scheme:hover{ background:rgba(255,255,255,.1); }
@media(min-width:800px){ .scheme{ grid-template-columns:240px minmax(0,1fr) 90px; align-items:center; } }
.scheme b{ font-family:var(--ff-d); font-weight:300; font-size:21px; }
.scheme small{ display:block; color:rgba(255,255,255,.65); font-size:13px; }
.scheme .ck{ font-family:var(--ff-d); font-size:32px; font-weight:200; color:var(--glow); text-align:right; }
.pbar{ display:flex; gap:3px; height:34px; }
.pbar i{ flex:var(--w) 1 0; min-width:4px; border-radius:6px; background:rgba(255,194,122,.45); position:relative; font-style:normal; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; transform-origin:0 50%; scale:0 1; transition:scale .9s var(--ease); transition-delay:calc(var(--k) * 70ms); }
.pbar i.bk{ background:rgba(255,255,255,.16); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px); }
.pbar i.ho{ background:var(--sun); }
.pbar i.oc{ background:var(--gold); color:var(--night); }
.in .pbar i,.pbar.in i{ scale:1 1; }
.light-pbar .pbar i{ background:#F6DCC0; color:var(--ink); }
.light-pbar .pbar i.bk{ background:#ECE6DE; background-image:repeating-linear-gradient(135deg, rgba(38,42,54,.12) 0 4px, transparent 4px 9px); }
.light-pbar .pbar i.ho{ background:var(--sun-2); color:#fff; }
.light-pbar .pbar i.oc{ background:var(--gold); color:var(--ink); }
.legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; margin-top:12px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:14px; height:10px; border-radius:3px; background:#F6DCC0; }
.legend i.ho{ background:var(--sun-2); }
.legend i.oc{ background:var(--gold); }
.legend i.bk{ background:#ECE6DE; background-image:repeating-linear-gradient(135deg, rgba(38,42,54,.2) 0 3px, transparent 3px 6px); }
.deep .legend i{ background:rgba(255,194,122,.45); }
.deep .legend i.bk{ background:rgba(255,255,255,.18); }
.deep .legend i.ho{ background:var(--sun); }
.deep .legend i.oc{ background:var(--gold); }

/* ---------- location: travel-time ruler + map ---------- */
.loc{ display:grid; gap:34px; grid-template-columns:minmax(0,1fr); }
@media(min-width:980px){ .loc{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; } }
.ruler{ position:relative; margin:28px 0 0; padding:0 0 0 28px; }
.ruler::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:rgba(38,42,54,.12); }
.ruler::after{ content:""; position:absolute; left:8px; top:6px; width:2px; height:0; background:linear-gradient(180deg, var(--glow), var(--sun-2)); transition:height 2.2s var(--ease); }
.ruler.in::after{ height:calc(100% - 12px); }
.ruler li{ list-style:none; position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:baseline; padding:12px 0; border-bottom:1px dashed var(--line); }
.ruler li::before{ content:""; position:absolute; left:-26px; top:20px; width:12px; height:12px; border-radius:50%; background:var(--sheet); border:2px solid var(--sun); }
.ruler b{ font-family:var(--ff-d); font-weight:200; font-size:40px; line-height:1; white-space:nowrap; }
.ruler b small{ font-family:var(--ff); font-size:12px; color:var(--ink-3); margin-left:4px; font-weight:500; }
.ruler span{ color:var(--ink-2); }
.map-card{ position:relative; border-radius:24px; overflow:hidden; background:#FBF1E4; border:1px solid var(--line); }
.map-card svg{ display:block; width:100%; height:auto; }
.map-card .river{ fill:none; stroke:#CFE0EA; stroke-width:24; stroke-linecap:round; }
.map-card .road{ fill:none; stroke:var(--sun-2); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:var(--len, 1400); stroke-dashoffset:var(--len, 1400); transition:stroke-dashoffset 2.4s var(--ease); }
.map-card .road.thin{ stroke-width:1.6; opacity:.55; }
.map-card.in .road{ stroke-dashoffset:0; }
.map-card .pin{ opacity:0; transform-box:fill-box; transform-origin:50% 100%; scale:.4; transition:opacity .6s, scale .6s var(--ease); transition-delay:calc(1s + var(--i) * 90ms); }
.map-card.in .pin{ opacity:1; scale:1; }
.map-card text{ font:500 13px var(--ff); fill:var(--ink); }
.map-card .here circle.pulse{ animation:pulse 2.4s infinite; transform-box:fill-box; transform-origin:center; }

/* ---------- page head ---------- */
.phead{ position:relative; padding:150px 0 56px; background:var(--sand); overflow:hidden; }
.phead h1{ font-size:clamp(42px, 6.6vw, 92px); font-weight:200; margin:10px 0 16px; }
.phead .plede{ font-size:clamp(16.5px, 1.4vw, 19px); color:var(--ink-2); max-width:64ch; }
.phead:not(.photo)::after{ content:""; position:absolute; right:-8%; top:-40%; width:min(70vw, 760px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,194,122,.55), rgba(232,137,47,.12) 45%, transparent 66%); pointer-events:none; animation:sunUp 2.4s var(--ease) both; }
.phead > .wrap{ position:relative; z-index:2; }
.phead.photo{ color:#fff; background:var(--night); padding-top:clamp(170px, 26vw, 300px); }
.phead.photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:heroIn 2.4s var(--ease) both; }
.phead.photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(28,31,44,.45), rgba(28,31,44,.1) 40%, rgba(28,31,44,.85)); }
.phead.photo .plede{ color:rgba(255,255,255,.88); }
.phead.photo h1 em{ color:var(--glow); }
.crumb{ display:flex; gap:8px; font-size:13.5px; color:inherit; opacity:.78; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
.jump{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.phead.photo .jump .chip{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- explorer ---------- */
.xp-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.seg{ display:inline-flex; padding:4px; border-radius:var(--pill); background:var(--sheet); border:1px solid var(--line); max-width:100%; overflow-x:auto; }
.seg button{ min-height:44px; padding:0 18px; border:0; border-radius:var(--pill); background:transparent; cursor:pointer; font-weight:600; font-size:15px; white-space:nowrap; transition:background .3s, color .3s; }
.seg button small{ font-weight:500; opacity:.65; margin-left:6px; }
.seg button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.kinds{ display:flex; gap:8px; flex-wrap:wrap; }
.kinds .chip i{ width:10px; height:10px; border-radius:3px; background:var(--k); }
.xp{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
.xp > div{ min-width:0; }
@media(min-width:1000px){ .xp{ grid-template-columns:150px minmax(0,1fr) 300px; align-items:start; } }
.floors{ background:var(--sheet); border:1px solid var(--line); border-radius:20px; padding:14px; }
.fl-now{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.fl-now b{ font-family:var(--ff-d); font-weight:200; font-size:50px; line-height:1; }
.fl-now span{ font-size:12px; color:var(--ink-3); text-align:right; line-height:1.3; }
.fl-list{ display:flex; gap:4px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.fl-list button{ flex:0 0 auto; min-width:46px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--dawn); cursor:pointer; font-size:14px; font-weight:600; transition:background .2s, color .2s; }
.fl-list button:hover{ border-color:var(--sun); }
.fl-list button[aria-pressed="true"]{ background:var(--sun-2); color:#fff; border-color:var(--sun-2); }
@media(min-width:1000px){
  .fl-list{ flex-direction:column-reverse; overflow:visible; gap:2px; }
  .fl-list button{ width:100%; height:16px; min-width:0; border-radius:4px; font-size:0; position:relative; background:var(--sand); border:0; }
  .fl-list button:hover,.fl-list button:focus-visible{ background:var(--glow); }
  .fl-list button:hover::after,.fl-list button:focus-visible::after{ content:"Tầng " attr(data-f); position:absolute; right:calc(100% + 8px); top:50%; translate:0 -50%; font-size:12px; background:var(--ink); color:#fff; padding:3px 8px; border-radius:6px; white-space:nowrap; z-index:3; }
  .fl-list button.ph{ height:22px; background:var(--dusk); }
  .fl-list button.tk::before,.fl-list button.ph::before{ content:attr(data-f); position:absolute; left:6px; top:0; font-size:9.5px; line-height:16px; color:var(--ink-3); font-weight:600; }
  .fl-list button.ph::before{ line-height:22px; color:#fff; }
  .fl-list button[aria-pressed="true"].tk::before{ color:#fff; }
}
.stage-card{ background:var(--sheet); border:1px solid var(--line); border-radius:20px; padding:12px; position:relative; }
.stage{ position:relative; width:100%; aspect-ratio:var(--ar, 16/10); border-radius:12px; overflow:hidden; background:#fff; touch-action:pan-y; }
.stage img{ width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; transition:opacity .35s; }
.stage.swap img{ opacity:.25; }
.hs{ position:absolute; border:0; padding:0; background:transparent; cursor:pointer; border-radius:6px; }
.hs::before{ content:""; position:absolute; inset:0; border-radius:6px; background:var(--k); opacity:0; transition:opacity .25s; mix-blend-mode:multiply; }
.hs::after{ content:attr(data-n); position:absolute; left:50%; top:50%; translate:-50% -50%; min-width:28px; height:24px; padding:0 6px; display:grid; place-items:center; border-radius:var(--pill); background:var(--ink); color:#fff; font-size:11px; font-weight:600; box-shadow:0 0 0 3px rgba(255,255,255,.85); scale:0; transition:scale .35s var(--ease); white-space:nowrap; }
.stage.ready .hs::after{ scale:1; transition-delay:calc(var(--i) * 30ms); }
.hs:hover::before,.hs:focus-visible::before,.hs.hl::before{ opacity:.6; }
.hs:hover::after,.hs.hl::after{ background:var(--sun-2); }
.hs.dim{ opacity:.2; pointer-events:none; }
.hs.up{ outline:2px dashed rgba(194,96,31,.7); outline-offset:-4px; }
.hs.up::after{ background:var(--sun-2); }
@media(max-width:700px){ .hs::after{ min-width:20px; height:18px; font-size:9px; padding:0 4px; box-shadow:0 0 0 2px rgba(255,255,255,.85); } }
.stage-cap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:12px 6px 4px; font-size:13.5px; color:var(--ink-3); }
.stage-cap button{ border:0; background:none; color:var(--sun-2); font-weight:600; cursor:pointer; padding:0; }
.ulist{ display:grid; gap:8px; }
@media(min-width:1000px){ .ulist{ max-height:640px; overflow:auto; padding-right:4px; } }
.ulist button{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; text-align:left; width:100%; padding:11px 14px; border-radius:14px; border:1px solid var(--line); background:var(--sheet); cursor:pointer; transition:border-color .2s, translate .25s var(--ease); }
.ulist button:hover,.ulist button.hl{ border-color:var(--sun); translate:-3px 0; }
.ulist button i{ width:10px; height:34px; border-radius:4px; background:var(--k); }
.ulist b{ display:block; font-size:15px; }
.ulist small{ color:var(--ink-3); font-size:13px; }
.ulist em{ font-style:normal; font-family:var(--ff-d); font-size:20px; font-weight:300; white-space:nowrap; }
.ulist .none{ padding:16px; font-size:14px; color:var(--ink-3); }
/* type cards */
.types{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top:30px; }
.tcard{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:18px; border:1px solid var(--line); background:var(--sheet); text-align:left; cursor:pointer; transition:box-shadow .4s var(--ease), translate .4s var(--ease), border-color .3s; }
.tcard:hover{ box-shadow:0 22px 44px -30px rgba(194,96,31,.55); translate:0 -3px; border-color:rgba(232,137,47,.5); }
.tcard .th{ aspect-ratio:4/3; border-radius:12px; background:#fff; overflow:hidden; display:grid; place-items:center; }
.tcard .th img{ width:100%; height:100%; object-fit:contain; }
.tcard .th .nodraw{ font-size:13px; color:var(--ink-3); padding:12px; text-align:center; }
.tcard b{ font-family:var(--ff-d); font-weight:300; font-size:24px; line-height:1.1; }
.tcard span{ font-size:14px; color:var(--ink-2); }
.tcard .k{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tcard .k i{ width:9px; height:9px; border-radius:3px; background:var(--k); }
.tbl-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--line); background:var(--sheet); }
table.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:600px; }
.tbl th,.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl th{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; background:var(--dawn); position:sticky; top:0; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td.num{ white-space:nowrap; }

/* ---------- unit sheet ---------- */
dialog.sheet{ position:fixed; inset:0 0 0 auto; width:min(580px, 100%); height:100%; max-height:none; max-width:none; margin:0; padding:0; border:0; background:var(--dawn); color:var(--ink); box-shadow:-30px 0 80px -30px rgba(28,31,44,.5); }
dialog.sheet::backdrop{ background:rgba(28,31,44,.45); backdrop-filter:blur(3px); }
dialog.sheet[open]{ animation:sheetIn .5s var(--ease); }
@keyframes sheetIn{ from{ translate:100% 0; } }
.up-top{ position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:rgba(251,245,236,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.up-nav{ display:flex; gap:6px; }
.up-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); cursor:pointer; }
.up-body{ height:calc(100% - 71px); overflow:auto; padding:22px 22px 60px; overscroll-behavior:contain; }
.up-kick{ font:600 12px/1 var(--ff); font-stretch:115%; letter-spacing:.18em; text-transform:uppercase; color:var(--sun-2); margin-bottom:10px; }
.up-body h2{ font-size:clamp(34px, 5vw, 46px); font-weight:200; margin-bottom:18px; }
.dl{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; margin:0 0 22px; border-radius:14px; overflow:hidden; background:var(--line); border:1px solid var(--line); }
.dl div{ background:var(--sheet); padding:12px 14px; }
.dl dt{ font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
.dl dd{ margin:2px 0 0; font-weight:600; font-size:15.5px; }
.dl div.w2{ grid-column:span 2; }
.up-h{ font-weight:600; margin:22px 0 10px; }
.up-plan{ margin:0; border-radius:14px; background:#fff; border:1px solid var(--line); overflow:hidden; cursor:zoom-in; }
.up-plan img{ width:100%; }
.up-plan figcaption{ padding:8px 12px; font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--line); }
.same{ display:flex; flex-wrap:wrap; gap:6px; max-height:180px; overflow:auto; }
.same button{ min-height:34px; padding:0 12px; border-radius:var(--pill); border:1px solid var(--line); background:var(--sheet); cursor:pointer; font-size:13.5px; }
.same button:hover{ border-color:var(--sun); color:var(--sun-2); }
.same button.cur{ background:var(--ink); color:#fff; border-color:var(--ink); }
.kao-box{ position:relative; overflow:hidden; margin-top:26px; padding:22px; border-radius:18px; background:var(--dusk); color:#fff; }
.kao-box::before{ content:""; position:absolute; right:-20%; bottom:-60%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,194,122,.4), transparent 65%); pointer-events:none; }
.kao-box > *{ position:relative; }
.kao-box h3{ font-size:24px; margin-bottom:6px; }
.kao-box p{ color:rgba(255,255,255,.82); font-size:14.5px; }
.kao{ display:flex; flex-wrap:wrap; gap:10px; }
@media(max-width:520px){ .kao .btn{ width:100%; } }
.note-box{ margin-top:14px; padding:12px 14px; border-radius:12px; background:#FBEBD9; font-size:13.5px; color:var(--ink-2); }

/* ---------- lightbox ---------- */
#lb{ width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(20,22,32,.95); color:#fff; }
#lb .fr{ position:absolute; inset:64px 12px 64px 12px; }
@media(min-width:800px){ #lb .fr{ inset:56px 84px 70px 84px; } }
#lb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .3s; }
#lb.loading img{ opacity:.2; }
#lb .wm{ position:absolute; right:10px; bottom:8px; font-size:12px; opacity:.4; pointer-events:none; }
#lb p{ position:absolute; left:16px; right:16px; bottom:18px; margin:0; text-align:center; font-size:14px; color:rgba(255,255,255,.8); }
#lb button{ position:absolute; z-index:2; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; }
#lb .x{ top:10px; right:12px; }
#lb .pv{ left:14px; top:50%; translate:0 -50%; }
#lb .nx{ right:14px; top:50%; translate:0 -50%; }
#lb.pan .fr{ overflow:auto; }
#lb.pan img{ position:static; width:auto; height:100%; max-width:none; }

/* ---------- gallery / amenities ---------- */
.gal{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media(min-width:800px){ .gal{ grid-template-columns:repeat(4, minmax(0,1fr)); } .gal .g2{ grid-column:span 2; grid-row:span 2; } }
.gal .rv-img{ aspect-ratio:4/3; height:100%; }
.gal .g2{ aspect-ratio:auto; min-height:100%; }
.numlist{ list-style:none; padding:0; margin:0; display:grid; gap:0; grid-template-columns:minmax(0,1fr); }
.numlist li{ display:flex; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:15.5px; cursor:default; transition:color .2s; }
.numlist li span{ flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--sun-2); color:#fff; font:600 12px var(--ff); }
.numlist.park li span{ background:#fff; color:var(--sun-2); border:1.5px solid var(--sun); }
.numlist.priv li span{ background:var(--dusk); }
.numlist li.hl{ color:var(--sun-2); }
.plan-fig{ border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--line); cursor:zoom-in; margin:0; }
.plan-fig figcaption{ padding:10px 14px; font-size:13px; color:var(--ink-3); }
/* amenity map: numbered pins over the developer's top-view render */
.amap{ position:relative; border-radius:22px; overflow:hidden; background:#2B3A2E; }
.amap img{ width:100%; height:auto; }
.amap .pin{ position:absolute; translate:-50% -50%; width:26px; height:26px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; font:600 11px var(--ff); color:#fff; background:var(--sun-2); box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 6px 14px -4px rgba(0,0,0,.5); cursor:pointer; scale:0; transition:scale .45s var(--ease), background .2s, color .2s; transition-delay:calc(var(--i) * 25ms); }
.amap .pin.park{ background:#fff; color:var(--sun-2); }
.amap .pin.priv{ background:var(--dusk); }
.amap.in .pin{ scale:1; }
.amap .pin:hover,.amap .pin.hl{ background:var(--sun); color:#fff; scale:1.25; z-index:2; transition-delay:0s; }
.amap .zone{ position:absolute; translate:-50% -50%; padding:6px 12px; border-radius:var(--pill); background:rgba(251,245,236,.9); color:var(--sun-2); font:600 11px var(--ff); font-stretch:115%; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; pointer-events:none; }
@media(max-width:700px){ .amap .pin{ width:18px; height:18px; font-size:8.5px; } .amap .zone{ font-size:8px; padding:4px 8px; } }
.amap-tip{ position:absolute; z-index:3; translate:-50% calc(-100% - 18px); padding:6px 12px; border-radius:10px; background:var(--ink); color:#fff; font-size:13px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s; }
.amap-tip.on{ opacity:1; }
.am-cols{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr); margin-top:30px; }
@media(min-width:900px){ .am-cols{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.am-cols h3{ font-size:24px; }

/* ---------- sister projects (The Global City) ---------- */
.sisters{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); margin-top:30px; }
@media(min-width:800px) and (max-width:1199px){ .sisters{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media(min-width:1200px){ .sisters{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.sister{ display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:180px; padding:22px; border-radius:var(--r); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); text-decoration:none; transition:background .3s, border-color .3s; }
a.sister:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,194,122,.5); }
.sister b{ font-family:var(--ff-d); font-weight:300; font-size:28px; line-height:1.1; }
.sister span{ color:rgba(255,255,255,.72); font-size:14.5px; }
.sister em{ font-style:normal; color:var(--glow); font-weight:600; font-size:14px; }
.sister.here{ background:linear-gradient(140deg, rgba(232,137,47,.32), rgba(232,137,47,.08)); border-color:rgba(255,194,122,.5); }

/* ---------- policy page ---------- */
#policyNotice{ display:flex; gap:12px; align-items:flex-start; padding:14px 18px; border-radius:14px; background:#FBEBD9; color:var(--ink); font-size:14.5px; margin-top:22px; max-width:780px; }
.phead.photo #policyNotice{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); }
#policyNotice.expired{ background:#FCE4DC; color:#7A2E1D; }
.methods{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media(min-width:900px){ .methods{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.method{ padding:22px; border-radius:22px; background:var(--sheet); border:1px solid var(--line); }
.method header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.method h3{ font-size:26px; margin:0; }
.method h3 small{ display:block; font:500 13.5px var(--ff); color:var(--ink-3); margin-top:6px; letter-spacing:0; }
.method .ck{ font-family:var(--ff-d); font-weight:200; font-size:44px; line-height:1; color:var(--sun-2); white-space:nowrap; }
.method .ck small{ display:block; font:600 11px var(--ff); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:right; }
.method ol{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:0; font-size:14px; }
.method li{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); }
.method li b{ text-align:right; }
.method li span:first-child{ color:var(--ink-3); }
.method .warn{ margin-top:12px; font-size:13px; color:#8A4B12; background:#FBF1E3; border-radius:10px; padding:9px 12px; }
.method .ok{ margin-top:12px; font-size:13px; background:var(--park); border-radius:10px; padding:9px 12px; }
.promos{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media(min-width:800px){ .promos{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.promo{ padding:20px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.promo .n{ font:600 12px var(--ff); letter-spacing:.14em; color:var(--glow); text-transform:uppercase; }
.promo b{ display:block; font-family:var(--ff-d); font-weight:200; font-size:44px; line-height:1.05; margin:8px 0; }
.promo.exp{ opacity:.5; }
.promo .st{ display:inline-block; white-space:nowrap; font-style:normal; margin-left:6px; padding:2px 8px; border-radius:var(--pill); background:rgba(255,194,122,.2); color:#fff; letter-spacing:.04em; }
.promo.exp .st{ background:rgba(255,255,255,.12); }
.promo p{ margin:0; color:rgba(255,255,255,.78); font-size:14.5px; }
.terms{ margin:0; padding-left:20px; color:var(--ink-2); font-size:15px; display:grid; gap:8px; }
.calc{ display:grid; gap:22px; grid-template-columns:minmax(0,1fr); }
@media(min-width:1000px){ .calc{ grid-template-columns:minmax(0,380px) minmax(0,1fr); align-items:start; } }
.calc-form{ padding:22px; border-radius:22px; background:var(--sheet); border:1px solid var(--line); display:grid; gap:16px; }
@media(min-width:1000px){ .calc-form{ position:sticky; top:96px; } }
.field label,.field .lab{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input[type=text],.field input[type=number],.field select{ width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--dawn); font-size:16px; appearance:none; }
.field select{ background:var(--dawn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23262A36' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px no-repeat; padding-right:38px; }
.field small{ display:block; color:var(--ink-3); font-size:12.5px; margin-top:6px; }
.checks{ display:grid; gap:8px; }
.checks label{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:500; cursor:pointer; }
.checks input{ accent-color:var(--sun-2); width:18px; height:18px; margin-top:2px; flex:none; }
.checks label.off{ opacity:.4; cursor:not-allowed; }
.res{ padding:22px; border-radius:22px; background:var(--sheet); border:1px solid var(--line); }
.res-top{ display:grid; gap:1px; grid-template-columns:repeat(2, minmax(0,1fr)); background:var(--line); border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-bottom:20px; }
@media(min-width:700px){ .res-top{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.res-top div{ background:var(--dawn); padding:14px; }
.res-top small{ display:block; font-size:12px; color:var(--ink-3); }
.res-top b{ font-family:var(--ff-d); font-weight:300; font-size:clamp(18px, 2vw, 24px); }
.res-top div.hi{ background:var(--dusk); color:#fff; }
.res-top div.hi small{ color:rgba(255,255,255,.7); }
.res .tbl{ min-width:560px; }
.cmp .tbl td b{ color:var(--sun-2); }

/* ---------- Hỏi AI ---------- */
.chat{ max-width:860px; padding-top:34px; }
.log{ display:grid; gap:12px; min-height:120px; }
.msg{ max-width:88%; padding:14px 18px; border-radius:20px; font-size:15.5px; animation:fadeUp .45s var(--ease); }
.msg p{ margin:0; white-space:pre-wrap; }
.msg.bot{ background:var(--sheet); border:1px solid var(--line); border-bottom-left-radius:6px; }
.msg.user{ justify-self:end; background:var(--ink); color:#fff; border-bottom-right-radius:6px; }
.msg.thinking p::after{ content:"…"; animation:blink 1s infinite; }
.srcs,.follow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.srcs a,.follow a,.follow button{ font-size:12.5px; padding:5px 11px; border-radius:var(--pill); background:#FBEBD9; color:var(--ink); text-decoration:none; border:0; cursor:pointer; }
.follow a,.follow button{ background:var(--park); }
.sugg-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:26px; }
.sugg-tabs button{ min-height:38px; padding:0 15px; border-radius:var(--pill); border:1px solid var(--line); background:var(--sheet); cursor:pointer; font-size:14px; font-weight:600; }
.sugg-tabs button[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sugg{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sugg button{ text-align:left; padding:9px 14px; border-radius:14px; border:1px dashed rgba(194,96,31,.45); background:transparent; cursor:pointer; font-size:14px; color:var(--ink); transition:background .2s; }
.sugg button:hover{ background:#FBEBD9; }
.sugg button.asked{ opacity:.45; }
.ask-f{ display:flex; gap:8px; margin-top:18px; position:sticky; bottom:12px; padding:6px; border-radius:var(--pill); background:var(--sheet); border:1px solid var(--line); box-shadow:0 14px 40px -20px rgba(58,63,82,.45); }
.ask-f label{ position:absolute; left:-9999px; }
.ask-f input{ flex:1; min-width:0; border:0; background:transparent; padding:0 16px; font-size:16px; outline:none; }
.ask-f button{ min-height:48px; padding:0 24px; border-radius:var(--pill); border:0; background:var(--sun-2); color:#fff; font-weight:600; cursor:pointer; }
.ask-f button:disabled{ opacity:.5; }
.note{ font-size:13px; color:var(--ink-3); margin-top:12px; }
.faq h2{ font-size:clamp(28px, 3.4vw, 44px); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ padding:16px 0; cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--sun-2); font-size:22px; font-weight:300; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--ink-2); margin:0 0 16px; }
.teaser{ display:grid; gap:10px; }
.bubble{ display:block; max-width:520px; padding:14px 18px; border-radius:20px 20px 20px 6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); text-decoration:none; font-size:15.5px; transition:background .25s, translate .3s var(--ease); }
.bubble:nth-child(even){ margin-left:auto; border-radius:20px 20px 6px 20px; background:rgba(232,137,47,.22); }
.bubble:hover{ background:rgba(255,255,255,.18); translate:0 -2px; }

/* ---------- news ---------- */
.nfilter{ display:flex; gap:6px; flex-wrap:wrap; margin:24px 0; }
.nfilter button{ min-height:36px; padding:0 14px; border-radius:var(--pill); border:1px solid var(--line); background:var(--sheet); cursor:pointer; font-size:14px; }
.nfilter button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.nlist{ display:grid; gap:12px; }
.npost{ padding:20px; border-radius:18px; background:var(--sheet); border:1px solid var(--line); }
.nmeta{ display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); }
.ncat{ color:var(--sun-2); font-weight:600; }
.npost h2{ font-size:24px; margin:8px 0; }
.nmore{ border:0; background:none; color:var(--sun-2); font-weight:600; cursor:pointer; padding:0; }
.nbody{ white-space:pre-wrap; color:var(--ink-2); margin:10px 0; }
.nempty{ color:var(--ink-3); }

/* ---------- fab ---------- */
.fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 20px 0 8px; border-radius:var(--pill); background:var(--ink); color:#fff; font-weight:600; text-decoration:none; box-shadow:0 16px 40px -14px rgba(28,31,44,.6); transition:translate .3s var(--ease); }
.fab:hover{ translate:0 -3px; }
.fab .m{ width:40px; height:40px; border-radius:50%; background:radial-gradient(circle, #fff 0 14%, var(--glow) 36%, var(--sun) 70%); display:grid; place-items:center; position:relative; }
.fab .m i{ display:none; }
.fab .m::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--glow); animation:pulse 2.6s infinite; }

/* ---------- join + footer ---------- */
footer{ position:relative; background:var(--night); color:#fff; overflow:hidden; }
footer a{ color:#fff; }
.join{ padding-top:clamp(60px, 8vw, 100px); }
.join h3{ font-size:clamp(30px, 4vw, 50px); font-weight:200; }
.join h3 em{ color:var(--glow); }
.join .lede{ color:rgba(255,255,255,.75); }
.join-cards{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); margin-top:24px; }
@media(min-width:760px){ .join-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.join-card{ display:flex; gap:16px; align-items:center; padding:16px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); text-decoration:none; }
.join-qr{ width:96px; height:96px; border-radius:12px; background:#fff; padding:4px; flex:none; }
.join-txt{ display:flex; flex-direction:column; gap:3px; }
.join-txt small{ color:rgba(255,255,255,.7); font-size:13.5px; }
.join-btn{ align-self:flex-start; margin-top:6px; padding:8px 14px; border-radius:var(--pill); background:var(--sun-2); color:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.join-mini{ display:flex; gap:14px; align-items:center; margin-top:22px; padding:14px; border-radius:18px; background:var(--sheet); border:1px solid var(--line); }
.join-mini .join-txt small{ color:var(--ink-3); }
.touch-only{ display:none !important; }
@media(hover:none) and (pointer:coarse){ .touch-only{ display:inline-flex !important; } .desk-only{ display:none !important; } }
footer .cols{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); padding-top:60px; padding-bottom:30px; }
@media(min-width:900px){ footer .cols{ grid-template-columns:1.4fr 1fr 1fr; } }
footer h4{ font-family:var(--ff); font-size:12.5px; font-stretch:115%; letter-spacing:.18em; text-transform:uppercase; color:var(--glow); margin-bottom:14px; font-weight:600; }
footer p,footer li{ color:rgba(255,255,255,.72); font-size:14.5px; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
footer ul a{ text-decoration:none; }
footer ul a:hover{ text-decoration:underline; }
footer .brand{ color:var(--gold); margin-bottom:18px; }
footer .brand .lk{ width:150px; }
/* giant wordmark with a sun setting behind it */
.foot-giant{ position:relative; font-family:var(--ff-d); font-weight:200; font-size:clamp(66px, 15vw, 240px); line-height:.9; letter-spacing:-.02em; text-align:center; white-space:nowrap; padding:20px 0 0; color:transparent; -webkit-text-stroke:1px rgba(255,194,122,.35);
  background:radial-gradient(circle at 50% var(--sy, 150%), #FFF4DD 0, var(--glow) 9%, var(--sun) 20%, rgba(194,96,31,.5) 34%, transparent 52%);
  -webkit-background-clip:text; background-clip:text; transition:--sy 2.6s var(--ease); }
@property --sy{ syntax:'<percentage>'; inherits:true; initial-value:150%; }
.foot-giant.in{ --sy:62%; }
.copy{ font-size:13px; color:rgba(255,255,255,.5); padding-bottom:14px; }

/* ---------- small screens ---------- */
@media(max-width:520px){
  .btn{ min-height:48px; padding:0 20px; }
  .hero-cta .btn{ flex:1 1 auto; }
  .msg{ max-width:94%; }
  .towers .tower{ padding:12px; }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; translate:none; }
  .rise > span{ translate:none; }
  .rv-img.armed img{ clip-path:none; }
  .hero .fins{ display:none; }
}