/* ═══════════════════════════════════════════════════════════════
   VERTICALE — night-city glass & steel. Vertiginous, quiet, precise.
   Palette: #0B0D12 night · #151A24 glass slate · #E4E6EB skylight
            #D4AF6A lamplight · #5E7A99 steel blue
   ═══════════════════════════════════════════════════════════════ */

:root{
  --night:#0B0D12;
  --slate:#151A24;
  --sky:#E4E6EB;
  --lamp:#D4AF6A;
  --steel:#5E7A99;
  --body:#C4C9D4;
  --dim:#8B94A6;
  --line:rgba(94,122,153,.28);
  --line-soft:rgba(94,122,153,.16);
  --panel-bg:rgba(15,19,27,.82);
  --disp:"Archivo",system-ui,sans-serif;
  --text:"Albert Sans",system-ui,sans-serif;
  --mono:"Chivo Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--night);
  color:var(--body);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:rgba(212,175,106,.28);color:var(--sky)}

a{color:var(--sky);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
a:hover{color:var(--lamp);border-color:rgba(212,175,106,.5)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:2px}

em{font-style:italic;color:var(--sky)}

/* ── ambient layers ─────────────────────────────── */
#bokeh,#tower{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;
}
#bokeh{z-index:0}
#tower{z-index:1}

/* ── fixed instruments ──────────────────────────── */
.hud{
  position:fixed;left:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vh,2rem);
  z-index:6;display:flex;flex-direction:column;gap:.15rem;
  font-family:var(--mono);pointer-events:none;
  background:rgba(11,13,18,.68);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line-soft);
  padding:.55rem .95rem .6rem;
  transition:opacity .5s ease;
}
.hud-floor{transition:color .6s ease}
.hud.hud-res .hud-floor{color:var(--lamp)}
.hud.hud-hide,.rail.hud-hide{opacity:0}
.rail{transition:opacity .5s ease}
.hud-floor{
  font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;color:var(--sky);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;
}
.hud-alt{
  font-size:.68rem;letter-spacing:.22em;color:var(--steel);
  font-variant-numeric:tabular-nums;
}

.rail{
  position:fixed;right:clamp(.9rem,2.4vw,2rem);top:50%;
  translate:0 -50%;height:min(44vh,340px);width:1px;z-index:6;
  pointer-events:none;font-family:var(--mono);
}
.rail-track{position:absolute;inset:0;background:var(--line)}
.rail-dot{
  position:absolute;left:50%;top:calc(var(--p,1)*100%);
  width:7px;height:7px;border-radius:50%;
  translate:-50% -50%;background:var(--lamp);
  box-shadow:0 0 10px rgba(212,175,106,.7);
}
.rail-tick{
  position:absolute;right:9px;top:calc(var(--f)*100%);
  translate:0 -50%;font-size:.62rem;letter-spacing:.14em;color:var(--dim);
  display:flex;align-items:center;gap:6px;
}
.rail-tick i{display:block;width:9px;height:1px;background:var(--steel);position:absolute;right:-13px}

/* ── grain (masks gradient banding on the night sky) ─ */
.grain{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* panel enter (JS adds .veil then removes it in view) */
.panel.veil{opacity:0;translate:0 26px}
.panel{transition:opacity .9s cubic-bezier(.2,.65,.25,1),translate .9s cubic-bezier(.2,.65,.25,1)}
@media (prefers-reduced-motion:reduce){
  .panel{transition:none}
  .panel.veil{opacity:1;translate:0 0}
}

/* ── top bar ─────────────────────────────────────── */
.top{
  position:fixed;inset:0 0 auto 0;z-index:7;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:clamp(1rem,2.6vh,1.6rem) clamp(1.2rem,3.5vw,2.8rem);
  background:linear-gradient(to bottom,rgba(11,13,18,.92) 30%,rgba(11,13,18,0));
}
.wordmark{
  font-family:var(--disp);font-stretch:125%;font-weight:640;
  font-size:.95rem;letter-spacing:.32em;color:var(--sky);border:none;
}
.top-link{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);border:none;
}
.top-link:hover{color:var(--lamp)}

/* ── shared text roles ──────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
  margin-bottom:1.4rem;
}
h1,h2{font-family:var(--disp);font-stretch:125%;color:var(--sky);text-wrap:balance}
h2{
  font-size:clamp(1.55rem,3vw,2.3rem);font-weight:560;
  letter-spacing:.015em;line-height:1.15;margin-bottom:1.5rem;
}

/* ── hero ────────────────────────────────────────── */
.hero{
  position:relative;z-index:3;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5rem,12vh,8rem) clamp(1.2rem,6vw,6rem) clamp(4rem,10vh,6rem);
}
.hero-eyebrow{display:flex;gap:2.2em;margin-bottom:2.2rem}
.hero-title{
  font-size:clamp(3rem,11.5vw,9.5rem);font-weight:680;
  letter-spacing:.045em;line-height:.94;margin-bottom:2.4rem;
  margin-left:-.04em;
}
.ht-line{display:inline-block}
.hero-deck{
  max-width:34em;font-size:clamp(1.02rem,1.4vw,1.2rem);
  color:var(--body);margin-bottom:2.6rem;text-wrap:pretty;
}
.hero-data{
  display:flex;flex-wrap:wrap;gap:.9em;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--dim);
}
.hd-sep{color:var(--steel)}
.ascend{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(1.4rem,5vh,3rem);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;color:var(--steel);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;width:max-content;
}
.ascend-line{
  display:block;width:1px;height:52px;
  background:linear-gradient(to bottom,transparent,var(--steel));
  animation:ascend-pulse 2.6s cubic-bezier(.45,0,.2,1) infinite;
  transform-origin:top;
}
@keyframes ascend-pulse{
  0%{transform:scaleY(.25);opacity:0}
  45%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}

/* hero load choreography */
.hero-eyebrow,.hero-title,.hero-deck,.hero-data,.ascend{
  opacity:0;translate:0 22px;
  animation:rise .9s cubic-bezier(.2,.65,.25,1) forwards;
}
.hero-title{animation-delay:.12s}
.hero-deck{animation-delay:.30s}
.hero-data{animation-delay:.46s}
.ascend{animation-delay:.9s;animation-duration:1.2s}
@keyframes rise{to{opacity:1;translate:0 0}}

/* ── content panels ─────────────────────────────── */
.panel-sec{
  position:relative;z-index:3;
  display:flex;align-items:center;
  padding:clamp(4rem,16vh,10rem) clamp(1.2rem,6vw,6rem);
  min-height:100vh;
}
.res{min-height:170vh;align-items:flex-start;padding-top:18vh}
.panel{
  width:min(560px,100%);
  background:var(--panel-bg);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  padding:clamp(1.8rem,3.4vw,3rem);
}
.panel-wide{width:min(820px,100%)}
.panel>p{max-width:36em;text-wrap:pretty}

/* facts grid */
.facts{
  margin-top:2.2rem;display:grid;
  grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
}
.facts>div{background:var(--slate);padding:1rem 1.1rem}
.facts dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.4rem;
}
.facts dd{font-size:.86rem;line-height:1.5;color:var(--body)}
.facts-narrow{margin-top:2rem}

/* plans */
.plan{margin:2.4rem 0 0;border:1px solid var(--line-soft);background:rgba(11,13,18,.5);padding:clamp(.8rem,2vw,1.4rem)}
.plan svg{display:block;width:100%;height:auto;color:var(--steel)}
.p-walls{stroke:var(--sky);stroke-width:1.3}
.p-fine{stroke:var(--steel);stroke-width:.9}
g.p-fine path[fill]{fill:var(--steel)}
.p-label text{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  fill:#9AA7BB;
}
.p-label .p-core{fill:#66748C;font-size:8.5px}
.p-label .p-sun,.p-label .p-void{fill:var(--lamp);font-size:8.5px}
.p-north text{font-family:var(--mono);font-size:9px;fill:var(--steel)}
.p-north path{fill:var(--steel)}
.plan figcaption{
  margin-top:.9rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}

/* plan draw-on-scroll (JS sets the dash vars; no-JS = fully drawn) */
.plan.will-draw .p-walls *,.plan.will-draw .p-fine *{
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.4s cubic-bezier(.3,.1,.2,1);
  transition-delay:var(--d,0s);
}
.plan.will-draw .p-label,.plan.will-draw .p-north{
  opacity:0;transition:opacity .8s ease 1.2s;
}
.plan.drawn .p-walls *,.plan.drawn .p-fine *{stroke-dashoffset:0}
.plan.drawn .p-label,.plan.drawn .p-north{opacity:1}

/* specs strip */
.specs{
  margin-top:2rem;list-style:none;
  display:flex;flex-wrap:wrap;gap:.5rem .6rem;
}
.specs li{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);
  border:1px solid var(--line);padding:.42em .85em;
  transition:border-color .3s ease,color .3s ease;
}
.specs li:hover{border-color:rgba(212,175,106,.55);color:var(--sky)}
.specs li:last-child{color:var(--lamp);border-color:rgba(212,175,106,.4)}

/* light calendar */
.light-table{
  width:100%;margin-top:2.2rem;border-collapse:collapse;
  font-size:.9rem;
}
.light-table th{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);font-weight:400;
  text-align:left;padding:0 1rem .7rem 0;border-bottom:1px solid var(--line);
}
.light-table td{
  padding:.62rem 1rem .62rem 0;border-bottom:1px solid var(--line-soft);
  vertical-align:baseline;
}
.light-table td:first-child{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.light-table td:nth-child(2){
  font-family:var(--mono);font-size:.8rem;color:var(--lamp);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.light-table tr:hover td{background:rgba(94,122,153,.06)}
.footnote{
  margin-top:1.4rem;font-size:.8rem;color:var(--dim);max-width:44em;
}

/* fine print */
.fine p{font-size:.92rem;color:var(--body);max-width:38em}
.fine p+p{margin-top:1rem}

/* enquiries */
.enquire-mail{margin:1.8rem 0}
.enquire-mail a{
  font-family:var(--mono);font-size:clamp(.95rem,1.8vw,1.2rem);
  letter-spacing:.06em;color:var(--lamp);
  border-bottom-color:rgba(212,175,106,.4);
}
.etiquette{list-style:none;margin-top:1.6rem}
.etiquette li{
  font-size:.9rem;padding:.7rem 0 .7rem 1.4rem;position:relative;
  border-top:1px solid var(--line-soft);max-width:38em;
}
.etiquette li::before{
  content:"";position:absolute;left:0;top:1.28rem;
  width:8px;height:1px;background:var(--lamp);
}

/* ── footer ─────────────────────────────────────── */
.site-foot{
  position:relative;z-index:3;
  padding:clamp(3rem,8vh,5rem) clamp(1.2rem,6vw,6rem) clamp(2rem,5vh,3rem);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(to bottom,rgba(11,13,18,0),rgba(11,13,18,.9) 30%);
}
.foot-brand{
  font-family:var(--disp);font-stretch:125%;font-weight:640;
  letter-spacing:.32em;color:var(--sky);font-size:.9rem;margin-bottom:1rem;
}
.foot-line{font-size:.82rem;color:var(--dim);max-width:46em;margin-bottom:2rem}
.credit{font-size:.72rem;color:#6B7383}
.credit a{color:#8B94A6;border-bottom-color:var(--line-soft)}
.credit a:hover{color:var(--lamp)}

/* ── responsive ─────────────────────────────────── */
@media (max-width:1024px){
  .panel{width:min(520px,100%)}
}
@media (max-width:720px){
  body{font-size:1rem}
  #tower{opacity:.72}
  .top{
    background:rgba(11,13,18,.88);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    border-bottom:1px solid var(--line-soft);
    padding:.9rem 1.2rem;
  }
  .plan-duplex{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .plan-duplex svg{min-width:620px}
  .hero{padding-inline:1.2rem}
  .hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(11,13,18,.78) 8%,rgba(11,13,18,.42) 45%,rgba(11,13,18,0) 80%);
  }
  .hero>*{position:relative}
  .hero-eyebrow{gap:1.2em;flex-wrap:wrap}
  .hero-title{font-size:clamp(2.6rem,14.5vw,4.4rem);letter-spacing:.03em}
  .hero-data{gap:.45em 1.3em}
  .hero-data span{white-space:nowrap}
  .hd-sep{display:none}
  .panel-sec{padding-inline:1rem}
  .res{min-height:150vh;padding-top:34vh}
  .panel{position:static;padding:1.4rem 1.2rem;background:rgba(13,16,23,.9)}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div{padding:.8rem .8rem}
  .rail{display:none}
  .hud{left:1rem;bottom:1rem}
  .hud-floor{font-size:1.3rem}
  .light-table td:last-child{font-size:.82rem}
  .light-table th:nth-child(2),.light-table td:nth-child(2){padding-right:.7rem}
}
@media (max-width:420px){
  .facts{grid-template-columns:1fr}
  .hero-data{font-size:.62rem}
}

/* ── reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero-eyebrow,.hero-title,.hero-deck,.hero-data,.ascend{
    animation:none;opacity:1;translate:0 0;
  }
  .ascend-line{animation:none;transform:none;opacity:.7}
  .plan.will-draw .p-walls *,.plan.will-draw .p-fine *{
    stroke-dasharray:none;stroke-dashoffset:0;transition:none;
  }
  .plan.will-draw .p-label,.plan.will-draw .p-north{opacity:1;transition:none}
  a,.rail-dot{transition:none}
}