@font-face{font-family:Be;src:url('assets/BeVietnamPro-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#efece5;--ink:#193e3a;--red:#b6172d;--teal:#087b73;--line:#193e3a38;--accent:#b6172d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #076fcb;outline-offset:5px}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Be,Arial,sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.055em}em{font:italic 1.04em Georgia,serif;letter-spacing:-.065em}.overline{font-size:11px;font-weight:bold;letter-spacing:.14em}.quiet{background:none;border:0;border-bottom:1px solid currentColor;padding:10px 0;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}.red-text{color:var(--red)}
/* Identity artwork: three printing planes open from a stationary, untouched mark. */
.intro{min-height:100svh;position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:26px 4vw 24px;background:var(--paper)}.intro-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;z-index:2}.identity{position:absolute;width:60vw;height:78vh;left:1vw;top:10vh;perspective:1100px}.axis{position:absolute;background:var(--line);opacity:.5}.axis-x{height:1px;top:50%;left:0;right:0}.axis-y{width:1px;top:0;bottom:0;left:50%}.identity-plane{position:absolute;width:43%;height:60%;left:28%;top:20%;padding:22px;overflow:hidden;box-shadow:0 30px 50px #163e3a12;animation:plane-open 3.8s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay);transform:var(--finish)}.identity-plane>span{font-size:9px;letter-spacing:.14em}.identity-plane b{display:block;font-size:clamp(17px,2vw,30px);line-height:1.25;margin-top:24px;letter-spacing:-.03em}.plane-create{background:var(--red);color:#fff8ed;--finish:translate(-44%,-18%) rotate(-14deg);--delay:.1s;z-index:1}.plane-commerce{background:#0b756e;color:#fff8ed;--finish:translate(47%,-4%) rotate(13deg);--delay:.6s;z-index:2}.plane-solutions{background:#d3ccc0;color:var(--ink);--finish:translate(4%,35%) rotate(-3deg);--delay:1.1s;z-index:3;height:46%}.imprint{position:absolute;border:1px solid currentColor;opacity:.45}.imprint-a{width:160px;height:160px;border-radius:50%;bottom:-35px;left:40px;box-shadow:20px 0 0 transparent,40px 0 0 #efece533}.imprint-b{width:110px;height:110px;right:-10px;bottom:20px;transform:rotate(45deg);box-shadow:-45px 45px 0 #efece51c}.imprint-c{width:70%;height:35px;bottom:30px;left:15%;border-left:0;border-right:0;transform:skewY(-15deg)}.identity-core{position:absolute;left:32%;top:43%;width:38%;min-height:100px;background:#fffdf7;z-index:4;padding:24px 20px 14px;box-shadow:0 16px 60px #183c3422;animation:core-arrive 1.8s both}.identity-core img{width:100%;height:auto;display:block}.identity-core>span{display:block;text-align:right;letter-spacing:.35em;font-size:8px;margin-top:10px}.coordinate{position:absolute;font-size:9px;letter-spacing:.15em}.coordinate-a{top:3%;left:13%}.coordinate-b{bottom:0;right:3%}.intro-copy{align-self:center;grid-row:2;position:relative;margin-left:62%;padding:60px 0;z-index:5;pointer-events:none}.intro-copy h1{font-size:clamp(34px,3.9vw,64px);margin:26px 0;line-height:1.2}.intro-copy h1 em{color:var(--red)}.intro-copy>p:last-child{font-size:14px;max-width:340px}.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:6}.enter{border:0;color:#fffaf2;background:var(--ink);padding:19px 25px;display:flex;gap:65px;align-items:center;font-weight:bold;min-height:62px;transition:background .2s}.enter:hover{background:var(--red)}.enter span{font-size:30px;line-height:1}.intro-note{font-size:10px;line-height:1.5}.intro.still .identity-plane,.intro.still .identity-core{animation:none}.noscript{position:relative;z-index:8;padding:12px;background:white}
@keyframes plane-open{0%{transform:translate(0,0) rotate(0) scale(.18);opacity:0}14%{opacity:1}100%{transform:var(--finish);opacity:1}}@keyframes core-arrive{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.skip-link{position:fixed;top:10px;left:10px;padding:12px;background:white;z-index:20;transform:translateY(-200%)}.skip-link:focus{transform:none}.header{height:94px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper)}.brand img{display:block;width:124px;height:auto}.header nav{display:flex;gap:36px;font-size:12px}.header nav a{text-decoration:none;padding:12px 0}.header nav a:last-child{color:var(--red)}.hero{padding:26px 4vw 0;overflow:hidden}.hero-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}.hero-layout{display:grid;grid-template-columns:1.08fr 1fr;min-height:590px;align-items:center;gap:25px}.hero-copy{padding:40px 0}.hero h1{font-size:clamp(48px,6.1vw,96px);margin:22px 0 28px}.hero h1 em{color:var(--accent)}.hero-copy>p:not(.overline){max-width:400px;font-size:15px}.text-link{display:inline-flex;gap:36px;font-size:13px;font-weight:bold;margin-top:28px;text-decoration:none;border-bottom:1px solid;padding:10px 0}.text-link span{color:var(--red)}.sculpture{height:520px;position:relative;perspective:1100px}.sculpture-grid{position:absolute;inset:30px 0;background:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);background-size:60px 60px;opacity:.28;mask-image:radial-gradient(ellipse,#000,transparent 70%)}.sculpture-object{width:280px;height:330px;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotateX(-14deg) rotateY(-29deg) rotateZ(-8deg);transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}.slab{position:absolute;box-shadow:14px 25px 35px #173b3420;transition:transform 1.3s,background 1.3s}.slab-front{inset:45px 25px;background:var(--red);transform:translateZ(90px);display:grid;place-items:center}.slab-front span{font:italic 220px/1 Georgia,serif;color:var(--paper)}.slab-back{inset:0;background:#c5c6b8;transform:translateZ(-65px)}.slab-side{width:150px;height:330px;background:#0b756e;left:-60px;transform:rotateY(90deg)}.slab-floor{height:150px;width:340px;background:#d4d0c5;bottom:-58px;left:-30px;transform:rotateX(90deg)}.red-square{position:absolute;width:53px;height:53px;right:-70px;top:-15px;background:var(--red);transform:translateZ(100px);box-shadow:15px 20px 35px #183c3422;transition:transform 1.3s}.art-label{position:absolute;bottom:20px;left:10px;font-size:9px;letter-spacing:.12em;line-height:1.8}.art-cross{position:absolute;right:20px;bottom:20px;font-size:28px}.hero[data-scene="1"]{--accent:#087b73}.hero[data-scene="1"] .sculpture-object{transform:translate(-50%,-50%) rotateX(-8deg) rotateY(24deg) rotateZ(6deg)}.hero[data-scene="1"] .slab-front{transform:translateZ(125px) translateX(-30px);background:#087b73}.hero[data-scene="1"] .red-square{transform:translateZ(130px) translateY(130px)}.hero[data-scene="2"] .sculpture-object{transform:translate(-50%,-50%) rotateX(14deg) rotateY(-36deg) rotateZ(0)}.hero[data-scene="2"] .slab-front{transform:translateZ(130px) translateY(-30px)}.hero[data-scene="2"] .slab-back{transform:translateZ(-100px) translateY(35px)}.hero-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:18px 0 24px}.scene-buttons{display:flex;gap:28px}.scene-buttons button{border:0;background:none;text-align:left;font-size:10px;padding:8px 0;opacity:.6;border-bottom:2px solid transparent}.scene-buttons button span{display:block;font-size:13px;font-weight:bold}.scene-buttons button[aria-pressed="true"]{opacity:1;border-color:var(--red)}
.section{padding:100px 6vw}.manifesto{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 2.3fr;gap:30px}.manifesto h2{font-size:clamp(40px,6.2vw,88px)}.manifesto .red-text{color:#ff7b86}.manifesto-bottom{display:grid;grid-template-columns:1fr 1.5fr;gap:25px;align-items:center;margin-top:50px}.manifesto-bottom p{font-size:14px;max-width:440px}.asterisk{font-size:125px;color:#d5caba;line-height:1}.section-heading h2{font-size:clamp(34px,4.4vw,64px);margin:30px 0 20px}.section-heading>p:last-child{font-size:14px}.cap-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-bottom:1px solid var(--line)}.cap-tabs button{background:none;border:0;border-bottom:3px solid transparent;text-align:left;padding:18px 12px;font-size:16px;font-weight:bold}.cap-tabs button[aria-selected="true"]{border-color:var(--red);color:var(--red)}.cap-panel{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding-top:38px;align-items:center}.cap-art{min-height:475px;position:relative;overflow:hidden;padding:35px}.creative-art{background:var(--red);color:var(--paper)}.art-word{font:italic 250px/1.3 Georgia,serif;letter-spacing:-.1em;display:block;position:relative;z-index:1}.creative-art i{width:280px;height:280px;border:1px solid #efece566;border-radius:50%;position:absolute;left:32%;top:70px}.art-caption{font-size:10px;line-height:1.7;letter-spacing:.12em;position:absolute;left:35px;bottom:32px}.cap-detail h3{font-size:clamp(30px,3.2vw,48px);margin:20px 0}.cap-detail>p{font-size:14px}.cap-detail ul{padding:20px 0 20px 17px;font-size:13px;line-height:2}.evidence{border-top:1px solid var(--line);padding-top:18px;font-size:11px!important;line-height:1.7}.commerce-art{background:#0b756e;color:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:90px}.need,.choice{font-family:Be,Arial,sans-serif;font-size:clamp(25px,3vw,42px);letter-spacing:-.05em}.meet{font:110px/1.3 Georgia,serif}.solutions-art{background:#d4cec2;display:flex;flex-direction:column;justify-content:center;gap:15px;padding-bottom:100px}.step{border-bottom:1px solid var(--ink);display:flex;gap:40px;padding:16px;font-size:12px}.step span{font-family:Be,Arial,sans-serif;font-size:24px}.process{border-top:1px solid var(--line)}.process h2{font-size:clamp(34px,4.4vw,64px);margin:28px 0 50px}.process-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.process-list article{border-top:1px solid var(--line);padding-top:20px}.process-list article>span{font-size:11px;color:var(--red)}.process-list h3{font-size:29px;margin:25px 0 15px}.process-list p{font-size:14px}.process-note{font-size:11px;max-width:600px;margin-top:35px}.contact{background:var(--red);color:#fff8ef}.contact h2{font-size:clamp(44px,6.6vw,100px);margin:30px 0 45px}.contact-link{font-size:clamp(22px,4vw,55px);text-decoration:none;border-bottom:1px solid #fff8ef80;padding-bottom:10px;display:flex;justify-content:space-between;width:min(760px,100%)}.contact>p:last-child{font-size:12px;margin-top:25px}footer{padding:45px 4vw;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:30px}footer>img{width:110px;height:auto}footer p{font-size:11px}footer small{font-size:9px;letter-spacing:.1em}
@media(min-width:1600px){.hero-layout{min-height:680px}.sculpture{transform:scale(1.15)}}
@media(max-width:800px){.intro{padding:20px 6vw;min-height:100svh;display:flex;flex-direction:column}.intro-top{font-size:8px}.identity{position:relative;width:100%;height:390px;min-height:320px;left:auto;top:auto;margin:12px 0 0;flex:1}.identity-plane{padding:14px}.identity-plane b{font-size:17px;margin-top:15px}.identity-plane>span{font-size:7px}.identity-core{padding:18px 12px 10px;min-height:70px}.identity-core>span{font-size:6px}.intro-copy{margin-left:0;padding:25px 0;pointer-events:auto}.intro-copy h1{font-size:38px;margin:14px 0}.intro-copy>p:last-child{font-size:12px}.intro-copy h1 br{display:none}.intro-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px}.enter{grid-column:1/-1;grid-row:1;justify-content:space-between}.intro-note{font-size:9px;text-align:right}.intro-bottom .quiet{font-size:10px;justify-self:start}.coordinate{font-size:7px}.coordinate-a{top:2%}.header{height:80px;padding:0 6vw}.brand img{width:95px}.header nav{gap:18px;font-size:10px}.header nav a:last-child{max-width:100px;line-height:1.4}.hero{padding:22px 6vw 0}.hero-meta{font-size:8px;gap:20px}.hero-meta span:last-child{text-align:right}.hero-layout{grid-template-columns:1fr;gap:0;min-height:0}.hero-copy{padding:38px 0 0}.hero h1{font-size:clamp(43px,9vw,68px);margin:18px 0 24px}.hero-copy>p:not(.overline){font-size:14px}.sculpture{height:390px;max-width:500px;width:100%;justify-self:center}.sculpture-object{transform:translate(-50%,-50%) scale(.78) rotateX(-14deg) rotateY(-29deg) rotateZ(-8deg)}.hero[data-scene="1"] .sculpture-object{transform:translate(-50%,-50%) scale(.78) rotateX(-8deg) rotateY(24deg) rotateZ(6deg)}.hero[data-scene="2"] .sculpture-object{transform:translate(-50%,-50%) scale(.78) rotateX(14deg) rotateY(-36deg)}.hero-controls{align-items:flex-start;flex-direction:column;gap:8px}.scene-buttons{width:100%;justify-content:space-between;gap:12px}.scene-buttons button{min-height:48px}.section{padding:65px 6vw}.manifesto{grid-template-columns:1fr;gap:28px}.manifesto h2{font-size:clamp(40px,8vw,64px)}.manifesto-bottom{grid-template-columns:70px 1fr;gap:15px;margin-top:30px}.asterisk{font-size:70px}.manifesto-bottom p{font-size:13px}.cap-tabs{margin-top:30px}.cap-tabs button{font-size:11px;padding:18px 4px;min-height:48px}.cap-panel{grid-template-columns:1fr;gap:30px}.cap-art{min-height:340px}.art-word{font-size:210px}.cap-detail h3{font-size:35px}.cap-detail ul{margin:0}.process-list{grid-template-columns:1fr;gap:30px}.process-list h3{margin:10px 0}.contact h2{font-size:clamp(40px,9vw,64px)}footer{padding:35px 6vw;display:grid;grid-template-columns:1fr 1fr}footer .quiet{text-align:left;font-size:11px}footer small{font-size:8px;text-align:right}}
@media(max-width:380px){.intro-top span:last-child{max-width:135px;text-align:right}.identity{height:300px;min-height:270px}.identity-plane b{font-size:14px}.intro-copy h1{font-size:32px}.header nav{gap:10px}.header nav a:last-child{max-width:77px}.brand img{width:80px}.sculpture{height:350px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Small screens retain the complete identity and immediate entry control. */
@media(max-width:800px){.identity{height:clamp(220px,41svh,390px);min-height:220px;flex:none}.intro-copy{padding:18px 0}.intro-copy h1{font-size:clamp(29px,5.8vw,38px);line-height:1.25}.intro-bottom{margin-top:auto;padding-top:14px}.identity-plane b{font-size:clamp(12px,2.6vw,17px)}.plane-solutions b{position:absolute;bottom:15px;left:14px;margin:0}.plane-solutions{--finish:translate(4%,55%) rotate(-3deg)}.plane-solutions .imprint{left:auto;right:12px;width:20%;bottom:22px}.plane-create{--finish:translate(-48%,-20%) rotate(-14deg)}.plane-commerce{--finish:translate(49%,-12%) rotate(13deg)}.identity-core{left:30%;width:40%;top:42%}.identity-plane>span{font-size:clamp(6px,1.2vw,9px)}.coordinate-b{bottom:-8px}.intro-copy>p:last-child{line-height:1.7}}
@media(max-height:680px) and (min-width:801px){.intro-copy h1{font-size:40px}.identity{height:70vh}}
/* The logo arrives first; each capability then takes its place around it. */
.plane-create{--delay:.8s}.plane-commerce{--delay:1.3s}.plane-solutions{--delay:1.8s}
.identity-core{animation-duration:.7s}.plane-solutions b{position:absolute;bottom:24px;left:22px;margin:0}.plane-solutions .imprint{width:20%;left:auto;right:20px;bottom:30px}
@media(max-width:800px){.plane-solutions b{bottom:15px;left:14px}.plane-solutions .imprint{right:12px;bottom:22px}}
.plane-solutions>span{position:absolute;bottom:110px;left:22px}
@media(max-width:800px){.plane-solutions>span{bottom:65px;left:14px}}
/* A geometric typographic voice, separate from the previous site's serif language. */
em{font-family:Be,Arial,sans-serif;font-size:1em;font-style:normal;letter-spacing:inherit}.slab-front span{font:700 130px/1 Be,Arial,sans-serif;letter-spacing:-.1em;margin-left:-12px}.hero h1 em{display:inline-block}
.scene-buttons button{opacity:.8}
@media(max-width:800px) and (max-height:680px){.identity{height:30svh;min-height:180px}.intro-copy{padding:14px 0}.intro-copy h1{font-size:28px;margin:10px 0}.intro-copy>p:last-child{font-size:11px}.intro-bottom{padding-top:10px}.identity-core{padding:12px 10px 8px;min-height:58px}.identity-core>span{font-size:5px}.identity-plane{padding:10px}.identity-plane b{font-size:11px}.plane-solutions b{left:10px;bottom:10px}.plane-solutions>span{left:10px;bottom:47px}.coordinate{font-size:6px}.intro-top{font-size:7px}}
/* Identity palette is sampled from the unmodified official SVG. */
:root{--ink:#203631;--red:#c4142a;--teal:#02c1bb;--accent:#c4142a;--line:#20363138}
.plane-commerce,.commerce-art{background:var(--teal);color:var(--ink)}.plane-create,.creative-art{background:var(--red)}
.slab-side{background:var(--teal)}.hero[data-scene="1"]{--accent:#006c67}.hero[data-scene="1"] .slab-front{background:var(--teal)}.hero[data-scene="1"] .slab-front span{color:var(--ink)}
.imprint-a{width:70%;height:47%;left:17%;bottom:-5%;border:1px solid #fff8ed;border-radius:50% 50% 0 0;box-shadow:none;background:repeating-linear-gradient(90deg,transparent 0 9px,#fff8ed 10px 11px,transparent 12px 20px);transform:rotate(-12deg);opacity:.35}
.imprint-b{width:50%;height:42%;right:4%;bottom:7%;border:0;box-shadow:none;transform:none;opacity:.4}.imprint-b::before,.imprint-b::after{content:'';position:absolute;border:1px solid currentColor;border-radius:50%;width:90%;height:90%;left:-38%;top:0;box-shadow:inset 0 0 0 10px #02c1bb,inset 0 0 0 11px currentColor,inset 0 0 0 20px #02c1bb,inset 0 0 0 21px currentColor}.imprint-b::after{left:20%}
.plane-solutions .imprint-c{height:34%;bottom:24px;width:25%;border:0;transform:none;background:linear-gradient(var(--ink),var(--ink)) 0 100%/25% 30%,linear-gradient(var(--ink),var(--ink)) 33% 100%/25% 60%,linear-gradient(var(--ink),var(--ink)) 66% 100%/25% 80%,linear-gradient(var(--ink),var(--ink)) 100% 100%/25% 100%;background-repeat:no-repeat;opacity:.5}
@media(max-width:800px){.plane-solutions .imprint-c{height:28%;bottom:15px}}
/* Keep short Vietnamese meaning units intact, with room above tone marks. */
.phrase,h1 em,h2 em,h3 em{white-space:nowrap}h1,h2,h3{text-wrap:balance;word-break:normal;overflow-wrap:normal}p,li{text-wrap:pretty;word-break:normal;overflow-wrap:normal}
.intro-copy h1{line-height:1.28}.hero h1{line-height:1.2}.cap-detail h3{line-height:1.25}
/* Mobile identity: the mark and all three messages occupy separate readable zones. */
@media(max-width:800px){
 .identity-core{left:28%;top:5%;width:44%;min-height:0;padding:14px 12px 10px}
 .identity-plane{top:47%;width:30%;height:49%;padding:10px;--finish:rotate(0deg)}
 .plane-create{left:0;--finish:rotate(-4deg)}
 .plane-commerce{left:35%;--finish:rotate(3deg)}
 .plane-solutions{left:70%;height:49%;--finish:rotate(-3deg)}
 .identity-plane>span,.plane-solutions>span{position:static;font-size:clamp(5.5px,1vw,8px);letter-spacing:.04em;white-space:nowrap}
 .identity-plane b,.plane-solutions b{position:relative;left:auto;bottom:auto;margin:12px 0 0;font-size:clamp(10px,2vw,14px);line-height:1.4;white-space:nowrap;z-index:1}
 .imprint-a,.imprint-b,.plane-solutions .imprint-c{height:25%;bottom:5px;opacity:.22}
 .coordinate-b{bottom:-8px}.axis-x{top:39%;left:15%;right:15%}.axis-y{bottom:58%;left:50%}
}
@media(max-width:380px){.identity-plane{padding:8px}.identity-plane b,.plane-solutions b{margin-top:8px;font-size:10px}.identity-core{padding:12px 10px 8px}}
/* Preserve the intentional two-part Vietnamese title on phones too. */
.intro-copy h1 br{display:initial}.intro-copy h1 em{display:inline-block}
/* Text boxes follow their actual content, not the full rotated board width. */
.identity-plane b{width:max-content;max-width:100%}
/* The official SVG is already transparent; remove the presentation backing. */
.identity-core{background:transparent;box-shadow:none}.identity-core>span{display:none}
