:root{--white:#fff;--ink:#0f1012;--grey:#6e7175;--hair:#e3e4e6;--gold:#b08d57;--gutter:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--top:96px;--ease:cubic-bezier(.16,1,.3,1);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 'Be Vietnam Pro',system-ui,sans-serif;caret-color:var(--ink);text-rendering:optimizeLegibility}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
p,h1{margin:0}

.stage{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:0 var(--gutter);overflow:hidden;--col:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .62)}

/* setting-out lines: the page draws itself */
.guide{position:absolute;background:var(--hair);pointer-events:none}
.guide.h{left:0;right:0;top:var(--top);height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:gx 1400ms var(--ease) forwards}
.guide.v{top:0;bottom:0;width:1px;transform:scaleY(0);transform-origin:top;animation:gy 1400ms var(--ease) forwards}
.guide.l{left:calc(var(--gutter) * .5);animation-delay:120ms}
.guide.r{right:calc(var(--gutter) * .5);animation-delay:240ms}
.guide.c{left:var(--col);top:var(--top);animation-delay:360ms}
@keyframes gx{to{transform:scaleX(1)}}
@keyframes gy{to{transform:scaleY(1)}}

.top{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--top);animation:fade 900ms var(--ease) 500ms both}
.mark{display:block;text-decoration:none}
.mark img{display:block;height:22px;width:auto}
.lang{position:relative;font-size:.9375rem;text-decoration:none;border-bottom:1px solid var(--ink)}
.lang::before{content:'';position:absolute;inset:-12px -12px -10px}

.message{position:relative;align-self:center;display:grid;grid-template-columns:62fr 38fr;align-items:center;padding-block:clamp(28px,6vh,64px)}
.copy{min-width:0;padding-right:clamp(24px,3vw,56px)}
h1{font-weight:200;font-size:clamp(1.9rem,9.4vw - .25rem,4.75rem);line-height:1.1;letter-spacing:-.025em}
.line{display:block;white-space:nowrap}
.nw{white-space:nowrap}
@media (max-width:600px){h1{font-size:clamp(2.1rem,10.6vw,3rem)}.line.split>.w{display:block;width:max-content}}
@media (min-width:900px){h1{font-size:min(4.75rem,5.1vw)}}
/* each word rises from behind its own baseline; padding keeps Vietnamese diacritics unclipped, and the
   start sits low enough that stacked marks (ể, ẩ, ở) stay hidden before the rise */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .04em .06em;margin:-.18em -.04em -.06em}
.w>span{display:inline-block;transform:translateY(135%);animation:rise 1000ms var(--ease) forwards}
@keyframes rise{to{transform:none}}
h1 em{font-style:normal;font-weight:400;position:relative;display:inline-block}
h1 em::after{content:'';position:absolute;left:.04em;right:.04em;bottom:-.1em;height:max(2px,.045em);background:var(--gold);transform:scaleX(0);transform-origin:left;animation:rule 1100ms var(--ease) 1650ms forwards}
@keyframes rule{to{transform:scaleX(1)}}
.sub{margin-top:clamp(24px,4vh,40px);max-width:46ch;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--grey);animation:fade 1000ms var(--ease) 1900ms both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the building being set out, floor by floor */
.drawing{margin:0;justify-self:center;width:min(100%,320px,35svh);padding-left:32px;box-sizing:content-box}
.drawing svg{display:block;width:100%;height:auto;overflow:visible}
.drawing.live{position:relative;width:100%;padding-left:0;justify-self:stretch;align-self:stretch}
.drawing canvas{position:absolute;left:0;top:-48px;display:block;width:100%;height:calc(100% + 96px)}
.drawing .s{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1100ms var(--ease) forwards}
.drawing .s.hair{stroke:#9a9da2}
.drawing .s.gold{stroke:var(--gold);stroke-width:1.5}
.drawing .s.dash{stroke-dasharray:.02 .015;stroke-dashoffset:0;opacity:0;animation:fadein 900ms var(--ease) forwards}
.drawing text{font:300 11px 'Be Vietnam Pro',sans-serif;fill:var(--grey);letter-spacing:.06em;opacity:0;animation:fadein 900ms var(--ease) 2600ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* progress: one gold pass once the building is done */
.progress{position:relative;height:1px;background:var(--hair);overflow:hidden;animation:fade 800ms var(--ease) 2200ms both}
.progress::after{content:'';position:absolute;top:0;left:0;width:28%;height:1px;background:var(--gold);animation:travel 3200ms cubic-bezier(.65,0,.35,1) 4600ms 1 both}
@keyframes travel{from{transform:translateX(-110%)}to{transform:translateX(400%)}}

.facts{position:relative;display:grid;grid-template-columns:62fr 38fr;gap:12px 0;padding-block:24px 32px;font-size:.875rem;color:var(--grey);animation:fade 900ms var(--ease) 2300ms both}
.facts>div{padding-right:32px;display:flex;flex-direction:column;gap:2px}
.facts>div:last-child{padding-left:32px;padding-right:0}
.facts strong{display:block;font-weight:400;color:var(--ink);margin-bottom:4px}
.facts .foreign{font-size:.75rem;margin:-2px 0 4px}
.facts a{text-decoration:none}
.facts a:hover{color:var(--ink);text-decoration:underline}
.tabular{font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .message{grid-template-columns:minmax(0,1fr)}
  .copy{padding-right:0}
  .drawing,.guide.c{display:none}
  :root{--top:64px}
  .mark img{height:20px}
  .message{padding-block:clamp(20px,4svh,48px)}
  .drawing.live{display:block;height:36svh;margin-top:clamp(16px,3svh,32px)}
  .drawing.live canvas{top:0;left:calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter));height:100%}
  .facts{grid-template-columns:minmax(0,1fr);gap:20px;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
  .facts>div,.facts>div:last-child{padding:0}
  /* same rhythm as the company block; each link row is a full-width tap target of at least 24 px */
  .facts>div{gap:0}
  .facts span,.facts a{padding-block:1px}
  .facts a{display:block}
}
@media (max-width:760px){h1{font-weight:300}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .guide.h{transform:none}.guide.v{transform:none}
  .drawing .s{stroke-dashoffset:0}.drawing .s.dash,.drawing text{opacity:1}
  .w>span{transform:none}
  h1 em::after{transform:scaleX(1)}
  .progress::after{display:none}
}