@font-face { font-family: 'BigShoulders'; src: url('../fonts/BigShoulders-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'GeistMono'; src: url('../fonts/GeistMono-Regular.ttf') format('truetype'); font-weight: 400; }
:root { --bg:#0E141A; --bg2:#141D26; --bg3:#1A2530; --ink:#F2EDE4; --muted:#93A1AC; --rule:#26333E; --accent:#E8622C; --accent2:#FF7A42; --header-h:64px; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; }
.mono { font-family:'GeistMono',monospace; }
img { display:block; max-width:100%; }
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 1.5rem; }

/* header */
header { position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h); background:rgba(14,20,26,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.header-in { max-width:1180px; margin:0 auto; padding:0 1.5rem; height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:baseline; gap:0.6rem; text-decoration:none; }
.brand .en { font-family:'BigShoulders'; font-weight:700; font-size:1.35rem; letter-spacing:0.08em; }
.brand .zh { font-size:0.8rem; color:var(--muted); letter-spacing:0.18em; }
nav { display:flex; align-items:center; gap:1.15rem; }
nav a.nl { font-size:0.85rem; color:var(--muted); text-decoration:none; letter-spacing:0.05em; white-space:nowrap; }
nav a.nl:hover, nav a.nl.on { color:var(--ink); }
nav a.nl.lang { color:var(--accent); border:1px solid var(--rule); padding:0.15rem 0.55rem; border-radius:3px; }
nav a.nl.lang:hover { border-color:var(--accent); }
.btn { display:inline-block; background:var(--accent); color:#14100D; font-weight:700; font-size:0.9rem; letter-spacing:0.06em; padding:0.55rem 1.2rem; border-radius:3px; text-decoration:none; border:none; cursor:pointer; transition:transform .18s ease, background .18s ease; white-space:nowrap; }
.btn:hover { background:var(--accent2); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn.big { padding:0.8rem 1.8rem; font-size:1rem; }
@media (max-width:900px){ nav a.nl:not(.lang):not(.keep){display:none;} }

/* hero */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero.short { min-height:62svh; }
.hero-img { position:absolute; inset:0; }
.hero-img img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:heroZoom 9s ease-out forwards; }
@keyframes heroZoom { to { transform:scale(1); } }
.hero-shade { position:absolute; inset:0; background:linear-gradient(200deg, rgba(14,20,26,0.18) 0%, rgba(14,20,26,0.55) 55%, rgba(14,20,26,0.95) 100%); }
.hero-in { position:relative; z-index:2; width:100%; padding:calc(var(--header-h) + 3rem) 1.5rem 4rem; max-width:1120px; margin:0 auto; }
.kicker { font-family:'GeistMono',monospace; color:var(--accent); font-size:0.8rem; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:1.1rem; }
.hero h1 { font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.12; font-weight:800; max-width:16em; }
.hero h1 .hl { color:var(--accent); }
.hero .sub { margin-top:1.2rem; max-width:36em; color:#D8DEE3; font-size:1.02rem; }
.hero .sub b { color:var(--ink); }
.hero-cta { margin-top:2rem; display:flex; gap:0.9rem; flex-wrap:wrap; }
.hero-meta { margin-top:2.6rem; display:flex; gap:2.2rem; flex-wrap:wrap; }
.hero-meta .m { border-left:2px solid var(--accent); padding-left:0.8rem; }
.hero-meta .m .v { font-family:'BigShoulders'; font-size:1.5rem; font-weight:700; letter-spacing:0.04em; }
.hero-meta .m .l { font-size:0.78rem; color:var(--muted); letter-spacing:0.1em; }
.fade-up { opacity:0; transform:translateY(22px); animation:fadeUp .8s ease forwards; }
.d1{animation-delay:.15s;} .d2{animation-delay:.3s;} .d3{animation-delay:.45s;} .d4{animation-delay:.6s;}
@keyframes fadeUp { to { opacity:1; transform:none; } }

/* stats bar */
.stats { border-bottom:1px solid var(--rule); background:var(--bg2); }
.stats-in { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:1.9rem 1rem; text-align:center; border-left:1px solid var(--rule); }
.stat:first-child { border-left:none; }
.stat .v { font-family:'BigShoulders'; font-weight:700; font-size:2.3rem; color:var(--ink); line-height:1.1; }
.stat .v em { font-style:normal; color:var(--accent); }
.stat .l { font-size:0.78rem; color:var(--muted); letter-spacing:0.14em; margin-top:0.3rem; }
@media (max-width:768px){ .stats-in{grid-template-columns:repeat(2,1fr);} .stat:nth-child(3){border-left:none;} .stat{border-top:1px solid var(--rule);} .stat:nth-child(-n+2){border-top:none;} }

/* sections */
section { padding:4.6rem 0; }
.sec-head { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.1rem; }
.sec-no { font-family:'BigShoulders'; font-weight:700; font-size:1.1rem; color:var(--accent); letter-spacing:0.1em; }
.sec-head h2 { font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:800; }
.sec-head .en { font-family:'GeistMono',monospace; color:var(--muted); font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; margin-left:auto; text-align:right; }
.lede { color:var(--muted); max-width:48em; margin-bottom:2.2rem; }
.lede b { color:var(--ink); }

/* wizard */
.wizard { background:var(--bg2); border:1px solid var(--rule); padding:2rem; }
.wz-steps { display:flex; gap:0.5rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.wz-step { flex:1; min-width:120px; font-size:0.78rem; letter-spacing:0.1em; color:var(--muted); padding:0.5rem 0.7rem; border:1px solid var(--rule); border-radius:3px; cursor:pointer; transition:all .2s; }
.wz-step b { font-family:'BigShoulders'; color:var(--accent); margin-right:0.4rem; font-size:0.95rem; }
.wz-step.act { border-color:var(--accent); color:var(--ink); background:var(--bg3); }
.wz-step.done { border-color:var(--rule); color:var(--ink); }
.wz-panel { display:none; }
.wz-panel.act { display:block; animation:fadeUp .4s ease forwards; opacity:0; }
@keyframes wzIn { to{opacity:1;} }
.opt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; }
.opt { border:1px solid var(--rule); background:var(--bg); padding:0.9rem 1rem; border-radius:3px; cursor:pointer; transition:all .18s; }
.opt:hover { border-color:var(--accent); }
.opt.sel { border-color:var(--accent); background:var(--bg3); box-shadow:inset 0 0 0 1px var(--accent); }
.opt .t { font-weight:700; font-size:0.95rem; }
.opt .d { font-size:0.78rem; color:var(--muted); margin-top:0.15rem; }
@media (max-width:768px){ .opt-grid{grid-template-columns:1fr 1fr;} }
.wz-nav { display:flex; justify-content:space-between; margin-top:1.6rem; gap:1rem; }
.wz-summary { border:1px dashed var(--rule); padding:1rem 1.2rem; margin-bottom:1.2rem; font-size:0.9rem; color:var(--muted); }
.wz-summary b { color:var(--ink); }

/* cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card { background:var(--bg2); border:1px solid var(--rule); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; }
.card:hover { transform:translateY(-4px); border-color:var(--accent); }
.card .ph { aspect-ratio:16/10; overflow:hidden; }
.card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .ph img { transform:scale(1.05); }
.card .bd { padding:1.2rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.card .loc { font-family:'GeistMono',monospace; font-size:0.7rem; color:var(--accent); letter-spacing:0.22em; text-transform:uppercase; }
.card h3 { font-size:1.25rem; font-weight:800; margin:0.3rem 0 0.35rem; }
.card .tag { font-size:0.85rem; color:var(--muted); }
.card .meta { margin-top:auto; padding-top:1rem; display:flex; gap:1.2rem; font-size:0.78rem; color:var(--muted); }
.card .meta b { color:var(--ink); font-family:'BigShoulders'; font-size:1rem; letter-spacing:0.03em; }
@media (max-width:900px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .cards{grid-template-columns:1fr;} }

/* tiles (space types / industries) */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.tile { position:relative; border:1px solid var(--rule); background:var(--bg2); padding:1.7rem 1.5rem; text-decoration:none; overflow:hidden; transition:border-color .25s ease, transform .25s ease; display:block; }
.tile:hover { border-color:var(--accent); transform:translateY(-3px); }
.tile .no { font-family:'BigShoulders'; font-weight:700; color:var(--accent); font-size:1rem; letter-spacing:0.12em; }
.tile h3 { font-size:1.2rem; font-weight:800; margin:0.5rem 0 0.45rem; }
.tile p { font-size:0.87rem; color:var(--muted); }
.tile .go { margin-top:1.1rem; font-family:'GeistMono',monospace; font-size:0.75rem; color:var(--accent); letter-spacing:0.18em; }
@media (max-width:900px){ .tiles{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .tiles{grid-template-columns:1fr;} }

/* spec grid */
.spec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.spec { background:var(--bg2); padding:1.3rem 1.2rem; }
.spec .v { font-family:'BigShoulders'; font-weight:700; font-size:1.7rem; line-height:1.15; letter-spacing:0.02em; }
.spec .v small { font-size:0.85rem; color:var(--accent); letter-spacing:0.05em; }
.spec .l { margin-top:0.3rem; font-size:0.76rem; color:var(--muted); letter-spacing:0.08em; }
@media (max-width:900px){ .spec-grid{grid-template-columns:repeat(2,1fr);} }

/* lists */
.districts { list-style:none; border-top:1px solid var(--rule); }
.districts li { padding:1rem 0.4rem 1rem 1.6rem; border-bottom:1px solid var(--rule); position:relative; }
.districts li::before { content:""; position:absolute; left:0; top:1.5rem; width:0.7rem; height:2px; background:var(--accent); }
.districts li b { color:var(--ink); }
.districts li span { color:var(--muted); font-size:0.92rem; }
.bullets { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.bullets li { border-top:1px solid var(--rule); padding-top:1.1rem; }
.bullets li b { display:block; font-size:1.05rem; margin-bottom:0.4rem; }
.bullets li p { color:var(--muted); font-size:0.9rem; }
@media (max-width:900px){ .bullets{grid-template-columns:1fr;} }

/* chips / amenities */
.chips { display:flex; flex-wrap:wrap; gap:0.6rem; list-style:none; }
.chips li { border:1px solid var(--rule); background:var(--bg2); padding:0.45rem 0.95rem; font-size:0.83rem; border-radius:3px; color:#C9D3DA; }
.chips li::before { content:"✓ "; color:var(--accent); font-weight:700; }

/* highways */
.hwy { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.hwy .h { border:1px solid var(--rule); background:var(--bg2); padding:1.1rem 1.2rem; }
.hwy .h .r { font-family:'BigShoulders'; font-weight:700; font-size:1.3rem; color:var(--accent); letter-spacing:0.05em; }
.hwy .h .d { font-size:0.83rem; color:var(--muted); margin-top:0.2rem; }
@media (max-width:768px){ .hwy{grid-template-columns:1fr;} }

/* filter bar */
.filterbar { display:flex; gap:0.9rem; flex-wrap:wrap; margin-bottom:2.2rem; padding:1.2rem; background:var(--bg2); border:1px solid var(--rule); }
.filterbar select, .filterbar input { background:var(--bg); border:1px solid var(--rule); color:var(--ink); padding:0.6rem 0.9rem; font-size:0.9rem; border-radius:3px; font-family:inherit; min-width:170px; }
.filterbar select:focus, .filterbar input:focus { outline:none; border-color:var(--accent); }
.filterbar .count { margin-left:auto; align-self:center; font-size:0.8rem; color:var(--muted); font-family:'GeistMono',monospace; letter-spacing:0.1em; }

/* reviews */
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.review { background:var(--bg2); border:1px solid var(--rule); padding:1.6rem 1.5rem; display:flex; flex-direction:column; }
.review .stars { color:var(--accent); letter-spacing:0.2em; font-size:0.85rem; }
.review q { quotes:none; margin:0.9rem 0 1.2rem; font-size:0.95rem; color:#D8DEE3; flex:1; }
.review .who { border-top:1px solid var(--rule); padding-top:0.9rem; }
.review .who b { font-size:0.92rem; display:block; }
.review .who span { font-size:0.78rem; color:var(--muted); }
@media (max-width:900px){ .reviews{grid-template-columns:1fr;} }

/* faq */
.faq { border-top:1px solid var(--rule); }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-q { width:100%; background:none; border:none; color:var(--ink); font-size:1.02rem; font-weight:700; text-align:left; padding:1.25rem 2.2rem 1.25rem 0.4rem; cursor:pointer; position:relative; font-family:inherit; line-height:1.5; }
.faq-q::after { content:"+"; position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); color:var(--accent); font-size:1.4rem; transition:transform .25s; }
.faq-item.open .faq-q::after { transform:translateY(-50%) rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p { padding:0 0.4rem 1.4rem; color:var(--muted); font-size:0.93rem; max-width:52em; }
.faq-a b { color:var(--ink); }

/* forms */
form { display:grid; gap:1rem; }
form label { font-size:0.78rem; color:var(--muted); letter-spacing:0.12em; display:block; margin-bottom:0.35rem; }
form input, form select, form textarea { width:100%; background:var(--bg); border:1px solid var(--rule); color:var(--ink); padding:0.7rem 0.9rem; font-size:0.95rem; border-radius:3px; font-family:inherit; }
form input:focus, form textarea:focus, form select:focus { outline:none; border-color:var(--accent); }
form .f2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ form .f2{grid-template-columns:1fr;} }

/* contact split */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; }
.contact-left h3 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; line-height:1.3; margin-bottom:1rem; }
.contact-left h3 em { font-style:normal; color:var(--accent); }
.contact-left p { color:var(--muted); }
.letterhead { margin-top:2rem; border:1px solid var(--rule); padding:1.1rem 1.3rem; background:var(--bg); }
.letterhead .co { font-family:'BigShoulders'; font-weight:700; letter-spacing:0.1em; font-size:1.15rem; }
.letterhead .addr { font-family:'GeistMono',monospace; font-size:0.75rem; color:var(--muted); margin-top:0.3rem; letter-spacing:0.06em; }
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:2.5rem;} }

/* breadcrumb */
.crumb { padding:calc(var(--header-h) + 1.2rem) 0 0; }
.crumb a { font-family:'GeistMono',monospace; font-size:0.75rem; color:var(--muted); letter-spacing:0.16em; text-decoration:none; text-transform:uppercase; }
.crumb a:hover { color:var(--accent); }

/* two-col content */
.split { display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:start; }
@media (max-width:900px){ .split{grid-template-columns:1fr;} }

/* cta band */
.cta-band { background:var(--bg2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); text-align:center; padding:4.5rem 1.5rem; }
.cta-band h2 { font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:800; max-width:22em; margin:0 auto 0.8rem; }
.cta-band h2 em { font-style:normal; color:var(--accent); }
.cta-band p { color:var(--muted); max-width:38em; margin:0 auto 1.8rem; }

/* footer */
footer { border-top:1px solid var(--rule); padding:2.6rem 0; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.foot-grid h4 { font-size:0.78rem; letter-spacing:0.18em; color:var(--muted); text-transform:uppercase; margin-bottom:0.8rem; font-family:'GeistMono',monospace; }
.foot-grid a { display:block; font-size:0.88rem; color:#C9D3DA; text-decoration:none; padding:0.18rem 0; }
.foot-grid a:hover { color:var(--accent); }
.foot-brand .en { font-family:'BigShoulders'; font-weight:700; letter-spacing:0.1em; font-size:1.3rem; }
.foot-brand p { font-size:0.8rem; color:var(--muted); max-width:26em; margin-top:0.6rem; }
.foot-note { border-top:1px solid var(--rule); padding-top:1.4rem; font-size:0.72rem; color:var(--muted); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
@media (max-width:768px){ .foot-grid{grid-template-columns:1fr 1fr;} }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.on { opacity:1; transform:none; }
.hidden { display:none !important; }