/* Penang Waterfront City v2 (2026-10-12). Lane: "the light, the keeper and the cape": a night harbour with a working beacon.
   The towers' own names set the system: Lighthauz = the beacon (amber), Keeperz = the keeper (brass), Phase 2 = sea glass (the cape,
   never named). Reference: lighthouse-heritage sites + Barangaroo's precinct pages. Castoro (display) + Geist (body), both unspent.
   Contrast: paper on night 15.9, haze on night 8.3, beam on night 9.6, brass on night 6.6, glass on night 8.2, ink on fog 15.1, mute on fog 6.9,
   ink on beam 9.6, beam-dk on fog 5.0. */
:root{--night:#0C1724;--tide:#132437;--tide-2:#1B3149;--fog:#EEF1F4;--paper:#F7F8FA;--ink:#0C1724;--mute:#475466;--haze:#A9B6C6;
--beam:#F2B544;--beam-2:#F7C96A;--beam-dk:#8C5D06;--brass:#C49A5C;--glass:#79BDB5;--signal:#C9472F;--rule:#0C172421;--rule-d:#ffffff24;
--accent:var(--beam);--accent-dk:var(--beam-dk);
--disp:"Castoro",Georgia,"Times New Roman",serif;--body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);--wrap:1200px;color-scheme:light}
body[data-tower=kz]{--accent:var(--brass);--accent-dk:#7A5A2B}
body[data-tower=p2]{--accent:var(--glass);--accent-dk:#2F6E68}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:90;padding:10px 14px;background:var(--beam);color:var(--ink);border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px}
.eyebrow{display:block;font:600 12.5px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk)}
.night .eyebrow,.hero .eyebrow{color:var(--accent)}
.night{background:var(--night);color:var(--paper)}
.tide{background:var(--tide);color:var(--paper)}
.fog{background:var(--fog)}
.sec{padding:76px 0}
.sec h2{margin-top:10px;font-size:clamp(34px,9vw,58px);line-height:1.04;max-width:20ch}
.sec h2 em{font-style:italic;color:var(--accent-dk)}
.night h2 em,.tide h2 em{color:var(--accent)}
.lead{margin-top:16px;max-width:62ch;font-size:18px;color:var(--mute)}
.night .lead,.tide .lead{color:var(--haze)}
.cap{margin-top:10px;font-size:13px;color:var(--mute)}
.night .cap,.tide .cap{color:var(--haze)}
.head{margin-bottom:34px}
.ph{background:var(--tide-2) center/cover no-repeat;overflow:hidden;border-radius:4px}
.ph img{width:100%;height:100%;object-fit:cover}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:999px;background:var(--beam);color:var(--ink);font:600 16px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .2s var(--ease)}
.cta:hover{background:var(--beam-2)}
.cta svg{width:20px;height:20px;flex:none}
.cta.ink{background:var(--ink);color:var(--paper)}.cta.ink:hover{background:var(--tide-2)}
.ghost{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;border:1px solid currentColor;font:600 15px/1.2 var(--body);text-decoration:none}
.ghost:hover{background:#ffffff14}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--accent-dk);text-decoration:none;border-bottom:1px solid currentColor}
.night .more,.tide .more{color:var(--accent)}
.micro{margin-top:12px;font-size:14px;color:var(--haze)}
/* header + menu */
#nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s var(--ease),box-shadow .3s}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.mark svg{width:28px;height:28px;flex:none}
.mark span{font:400 19px/1 var(--disp);letter-spacing:.01em;white-space:nowrap}
.menu-links{display:none}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-wa{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;background:var(--beam);color:var(--ink);font:600 14px/1 var(--body);text-decoration:none}
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff4d;border-radius:999px;background:transparent;color:var(--paper);cursor:pointer}
.burger svg{width:20px;height:20px}
#nav.solid{background:#0C1724f2;box-shadow:0 1px 0 var(--rule-d);backdrop-filter:saturate(1.2)}
.drawer{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--paper);padding:84px 24px 40px;display:flex;flex-direction:column;gap:6px;transform:translateY(-102%);transition:transform .45s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a{display:flex;align-items:baseline;justify-content:space-between;min-height:52px;padding:10px 0;border-bottom:1px solid var(--rule-d);font:400 28px/1.2 var(--disp);text-decoration:none}
.drawer a small{font:500 13px var(--body);color:var(--haze)}
.drawer .x{position:absolute;right:16px;top:12px}
.drawer .cta{margin-top:22px;font-size:17px}
/* hero with the beacon */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--night);color:var(--paper);overflow:hidden}
.hero .frame{position:absolute;inset:0;overflow:hidden}
.stage{position:absolute;left:0;top:0;width:100%;height:100%}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.stage .base{filter:brightness(.78) saturate(.92)}
.hero .frame:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#0C1724b3 0,#0C172426 20%,#0C172433 38%,#0C1724d9 58%,#0C1724 100%);pointer-events:none}
.beam{position:absolute;z-index:1;width:0;height:0;pointer-events:none}
.beam .cone,.beam .glow{position:absolute;left:0;top:-40vmax;width:150vmax;height:80vmax;transform-origin:0 50%;mix-blend-mode:screen;animation:sweep 11s ease-in-out infinite alternate}
/* the wedge is a conic gradient from the crown, so its edges are soft by construction (a clip-path would cut any blur back to a hard edge) */
.beam .cone{background:conic-gradient(from 83deg at 0 50%,#FFE6AE00 0deg,#FFE6AE8c 4.5deg,#FFEBC0bf 7deg,#FFE6AE8c 9.5deg,#FFE6AE00 14deg,#FFE6AE00 360deg);-webkit-mask-image:linear-gradient(90deg,#0C1724 0,#0C1724 25%,#0C172400 88%);mask-image:linear-gradient(90deg,#0C1724 0,#0C1724 25%,#0C172400 88%)}
.beam .glow{background:conic-gradient(from 70deg at 0 50%,#FFD98600 0deg,#FFD98633 14deg,#FFD98640 20deg,#FFD98633 26deg,#FFD98600 40deg,#FFD98600 360deg);-webkit-mask-image:linear-gradient(90deg,#0C1724 0,#0C172400 70%);mask-image:linear-gradient(90deg,#0C1724 0,#0C172400 70%);filter:blur(10px)}
.beam .lamp{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#FFF3D1 0,#FFD27Acc 26%,#F2B54400 70%);mix-blend-mode:screen;animation:pulse 2.4s ease-in-out infinite}
@keyframes sweep{0%{transform:rotate(152deg)}100%{transform:rotate(208deg)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.hero .copy{position:relative;z-index:3;width:100%;padding:110px 16px 104px}
.hero h1{margin-top:12px;font-size:clamp(46px,12.5vw,112px);line-height:.98;text-shadow:0 2px 30px #0C1724b3}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .sub{margin-top:16px;max-width:48ch;font-size:18px;color:#DCE3EC;text-shadow:0 1px 14px #0C1724cc}
.price{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.price b{font:400 34px/1.1 var(--disp)}
.price span{font-size:14px;color:var(--haze)}
.acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.acts .cta{width:100%}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:46px;background:linear-gradient(#F2B54400,#F2B544)}
/* inner-page hero: the picture IS the subject (the tower, the station, the site), so it stays clear and undimmed.
   Phones and tablets: a picture band with the copy on the night ground below it. Desktop: copy left, picture filling the right half.
   Each page frames its own picture with object-position on the img. */
.hero.short{display:block;min-height:0}
.hero.short .frame{position:relative;inset:auto;height:min(50svh,460px)}
.hero.short .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.short .frame:before{background:linear-gradient(180deg,#0C172499 0,#0C172400 24%,#0C172400 56%,#0C1724e6 88%,#0C1724 100%)}
.hero.short .copy{margin-top:-56px;padding:0 16px 48px}
.hero.short h1{font-size:clamp(40px,10.5vw,64px);line-height:1.02}
@media(min-width:768px) and (max-width:1023px){.hero.short .frame{height:52svh}.hero.short .copy{padding:0 28px 56px}}
@media(min-width:1024px){
 .hero.short{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:min(80svh,780px)}
 .hero.short .frame{order:2;height:auto}
 .hero.short .frame:before{background:linear-gradient(90deg,#0C1724 0,#0C172400 14%),linear-gradient(180deg,#0C172473 0,#0C172400 16%)}
 .hero.short .copy{order:1;align-self:center;margin:0;max-width:none;padding:124px 48px 72px max(28px,calc((100vw - var(--wrap)) / 2 + 28px))}
 .hero.short h1{font-size:clamp(44px,4.4vw,68px)}
}
/* statement */
.statement{padding:84px 0 40px}
.statement .big{font:400 clamp(30px,7.4vw,52px)/1.18 var(--disp);max-width:22ch}
.statement .big em{font-style:italic;color:var(--accent-dk)}
/* tower chapters (home) */
.chapter{position:relative;color:var(--paper);background:var(--night)}
.chapter .ph{border-radius:0;aspect-ratio:4/5}
.chapter .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0C172400 30%,#0C1724e6 82%,#0C1724 100%)}
.chapter .ph{position:relative}
.chapter .txt{position:relative;margin-top:-190px;padding:0 16px 56px;z-index:2}
.chapter .tag{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.chapter .tag i{width:28px;height:2px;background:var(--c)}
.chapter h2{margin-top:12px;font-size:clamp(40px,11vw,76px);line-height:1}
.chapter h2 em{font-style:italic;color:var(--c)}
.chapter p.d{margin-top:12px;max-width:44ch;font-size:17px;color:#DCE3EC}
.chapter .meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--haze)}
.chapter .meta b{display:block;font:400 26px/1.1 var(--disp);color:var(--paper)}
.chapter .go{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}
.chapter[data-c=lh]{--c:var(--beam)}.chapter[data-c=kz]{--c:var(--brass)}.chapter[data-c=p2]{--c:var(--glass)}
/* fact strip */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:6px}
.facts div{padding:14px 0;border-top:1px solid var(--rule)}
.night .facts div,.tide .facts div{border-color:var(--rule-d)}
.facts dt{font-size:13px;color:var(--mute)}
.night .facts dt,.tide .facts dt{color:var(--haze)}
.facts dd{margin:2px 0 0;font:400 22px/1.2 var(--disp)}
/* tables */
.tbl{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:12px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp thead th{font:400 18px/1.15 var(--disp);border-bottom:2px solid var(--ink)}
.cmp tbody th{font-weight:500;color:var(--mute);width:24%}
.cmp td b{font-weight:600}
/* image rows / galleries */
.grid{display:grid;gap:14px}
.grid figure{margin:0}
.grid .ph{aspect-ratio:4/3}
.grid figcaption{margin-top:10px;font-size:15px}
.grid figcaption b{display:block;font:400 21px/1.2 var(--disp)}
.grid figcaption span{color:var(--mute)}
.night .grid figcaption span,.tide .grid figcaption span{color:var(--haze)}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scrollbar-width:thin}
.strip figure{flex:0 0 78%;margin:0;scroll-snap-align:start}
.strip .ph{aspect-ratio:4/3}
/* plans */
.tabs{display:flex;gap:8px;margin:0 -16px 14px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;min-height:58px;padding:10px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);font:600 15px/1.2 var(--body);text-align:left;cursor:pointer}
.tabs button small{display:block;margin-top:3px;font:400 13px var(--body);color:var(--mute)}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tabs button[aria-selected=true] small{color:var(--haze)}
.plan{display:grid;gap:18px;padding:12px 12px 20px;border-radius:10px;background:var(--paper);border:1px solid var(--rule)}
.plan[hidden]{display:none}
.plan .img{margin:0;background:#fff;border-radius:6px;overflow:hidden}
.plan .img img{width:100%;height:auto;object-fit:contain}
.plan h3{font-size:30px;line-height:1.1}
.plan .cta{margin-top:18px;width:100%}
/* two-column text */
.duo{display:grid;gap:30px}
.duo h3{font-size:24px}
.ticks{margin:12px 0 0;padding:0;list-style:none}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--rule);font-size:16px}
.ticks svg{width:18px;height:18px;margin-top:3px;color:var(--accent-dk)}
/* cards linking other pages */
.cards{display:grid;gap:14px}
.card{display:block;text-decoration:none;color:var(--paper);background:var(--tide);border-radius:10px;overflow:hidden}
.card .ph{aspect-ratio:16/10;border-radius:0}
.card .in{padding:16px 18px 20px}
.card .in b{display:block;font:400 26px/1.15 var(--disp)}
.card .in span{display:block;margin-top:4px;color:var(--haze);font-size:15px}
.card:hover .in b{color:var(--beam)}
/* LRT stops */
.hops{margin:0;padding:0;list-style:none}
.hops li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule);font-size:16px}
.hops li:last-child{border-bottom:1px solid var(--rule)}
.hops .code{font-weight:700;color:var(--accent-dk);font-variant-numeric:tabular-nums}
.hops .n{font:400 21px/1 var(--disp);white-space:nowrap}
.hops .you{background:var(--fog);margin:0 -10px;padding:14px 10px;border-radius:8px;border-top-color:transparent}
.hops .you+li{border-top-color:transparent}
.zoom{position:relative;display:block;color:inherit}
/* the line map: readable on phones by panning sideways (opens centred on S15, see site.js) */
.ph-only{display:none}
@media(max-width:767px){.ph-only{display:inline}.pan{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:4px}.pan .zoom{width:1150px}.pan .zoom-hint{display:none}}
.zoom-hint{position:absolute;right:10px;bottom:10px;padding:7px 11px;border-radius:999px;background:#0C1724d9;color:var(--paper);font:600 12px/1 var(--body)}
.chip{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:999px;background:#0C1724e0;color:var(--paper);font:600 14px/1.2 var(--body)}
.map{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--fog)}
.map iframe{width:100%;height:100%;border:0}
.where{margin:20px 0 0;padding:0;list-style:none}
.where li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--rule);font-size:16px}
.where li span:last-child{font-weight:600;text-align:right}
/* faq */
.faq{max-width:840px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;min-height:58px;padding:17px 36px 17px 0;position:relative;font:600 17px/1.4 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:23px;width:10px;height:10px;border-right:2px solid var(--accent-dk);border-bottom:2px solid var(--accent-dk);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary:after{transform:rotate(225deg)}
.faq details p{padding:0 0 18px;color:var(--mute);max-width:68ch}
/* last call + footer */
.last{position:relative;overflow:hidden;color:var(--paper);background:var(--night)}
.last .bg{position:absolute;inset:0}
.last .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.last .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0C1724b3,#0C1724f5)}
.last .wrap{position:relative;padding-top:100px;padding-bottom:100px}
.last h2{font-size:clamp(36px,9vw,60px);line-height:1.04;max-width:16ch}
.last .lead{color:var(--haze)}
.last .cta{margin-top:26px;width:100%}
footer{background:#08111B;color:var(--haze);padding:48px 0 128px;font-size:14px}
footer nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:26px}
footer nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--paper);text-decoration:none}
footer p+p{margin-top:10px}
footer p a{color:var(--paper)}
.wa-sticky{position:fixed;right:16px;bottom:16px;z-index:45;display:flex;align-items:center;gap:8px;text-decoration:none}
.wa-sticky .lbl{padding:9px 14px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px/1 var(--body);box-shadow:0 4px 18px #0C172440}
.wa-sticky .dot{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#1FAF55;color:#fff;box-shadow:0 6px 20px #0C172459}
.wa-sticky .dot svg{width:28px;height:28px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(max-width:479px){.nav-wa{display:none}.mark span{font-size:18px}}
@media(min-width:480px){.facts{grid-template-columns:repeat(3,1fr)}.strip figure{flex-basis:46%}}
@media(min-width:768px){
 .wrap{padding-inline:28px}
 .sec{padding:108px 0}
 .hero .copy{padding:140px 28px 96px;max-width:var(--wrap);margin:0 auto}
 .hero .copy>*{max-width:660px}
 .hero .frame:before{background:linear-gradient(90deg,#0C1724f2 0,#0C1724c4 32%,#0C172466 52%,#0C172400 74%),linear-gradient(180deg,#0C172480 0,#0C172400 22%,#0C172400 72%,#0C1724 100%)}
 .acts .cta,.last .cta,.plan .cta{width:auto}
 .chapter{display:grid;grid-template-columns:1fr}
 .chapter .ph{aspect-ratio:21/9}
 .chapter .txt{margin-top:-260px;padding:0 28px 72px;max-width:var(--wrap);margin-inline:auto;width:100%}
 .grid{grid-template-columns:1fr 1fr;gap:22px}
 .grid.three{grid-template-columns:repeat(3,1fr)}
 .duo{grid-template-columns:1fr 1fr;gap:56px}
 .cards{grid-template-columns:repeat(3,1fr)}
 .cards.two{grid-template-columns:1fr 1fr}
 .tabs{margin:0 0 18px;padding:0;overflow:visible}.tabs button{flex:1 1 0}
 .plan{grid-template-columns:3fr 2fr;align-items:center;padding:18px 28px 18px 18px;gap:32px}
 .plan .img img{max-height:460px}
 .strip{margin:0;padding:0 0 8px}.strip figure{flex-basis:31%}
 .zoom-hint{display:none}
 .map{aspect-ratio:16/9}
 footer nav{grid-template-columns:repeat(4,1fr)}
 .cmp th,.cmp td{padding:14px 12px;font-size:15px}
}
@media(min-width:1024px){
 body{font-size:17px}
 .sec h2{font-size:46px}
 .menu-links{display:flex;gap:4px}
 .menu-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;border-radius:999px;color:#DCE3EC;text-decoration:none;font:500 14.5px/1 var(--body)}
 .menu-links a:hover,.menu-links a[aria-current=page]{color:var(--beam)}
 .burger{display:none}
 .lrt-split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
 .loc-split{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:start}
 .faq-split{display:grid;grid-template-columns:1fr 1.8fr;gap:56px}
 .faq-split h2{position:sticky;top:100px;align-self:start}
}
@media(max-height:820px) and (min-width:768px){.hero h1{font-size:clamp(46px,8.4vw,92px)}.hero .copy{padding-top:118px;padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.beam .cone,.beam .glow{animation:none;transform:rotate(180deg)}.beam .lamp{animation:none}
 .reveal{opacity:1;transform:none;transition:none}*,*:before,*:after{transition-duration:0s!important}}