/* Content layout only. The canvas and original intro choreography are untouched. */
.hieu-gallery{max-width:1150px;margin:0 auto 140px;color:#e4e2d8;font-family:LazareGrotesk,Arial,sans-serif}
.hieu-gallery button{font:inherit;color:inherit;cursor:pointer}
.hieu-gallery-controls,.hieu-gallery-caption{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:24px 0}
.hieu-gallery-controls p{font-size:16px}.hieu-gallery-controls button{background:transparent;border:1px solid #666;border-radius:50%;width:48px;height:48px;margin-left:12px;font-size:24px}
.hieu-gallery-screen{background:#202020;border:1px solid #555;padding:12px;border-radius:12px}
.hieu-gallery video{display:block;width:100%;aspect-ratio:16/9;background:#151515;border-radius:4px;object-fit:contain}
.hieu-gallery-caption h3{font-size:clamp(30px,4vw,52px);line-height:1.1;margin:12px 0}
.hieu-gallery-caption p{font-size:19px;color:#b4b6b8;line-height:1.5;margin:8px 0}
.hieu-gallery-caption .hieu-eyebrow,.hieu-spotlight .hieu-eyebrow{font-size:12px;letter-spacing:1px;text-transform:uppercase}
.hieu-gallery-actions{display:flex;flex-direction:column;gap:16px;flex-shrink:0}
.hieu-gallery-actions button{padding:16px 24px;border:1px solid #e4e2d8;background:#e4e2d8;color:#151515;border-radius:4px}
.hieu-gallery a{color:inherit;text-underline-offset:5px}.hieu-gallery-actions a{text-align:center}
.hieu-gallery-tabs{display:flex;gap:12px;border-top:1px solid #555;padding-top:24px;flex-wrap:wrap}
.hieu-gallery-tabs button{background:transparent;border:1px solid #555;border-radius:4px;padding:14px 18px}
.hieu-gallery-tabs button[aria-pressed=true]{background:#e4e2d8;color:#151515}
.hieu-spotlight{box-sizing:border-box;width:min(1200px,94vw);max-height:90dvh;overflow:auto;padding:32px;background:#171717;color:#e4e2d8;border:1px solid #666;border-radius:12px;overscroll-behavior:contain}
.hieu-spotlight::backdrop{background:#000c;backdrop-filter:blur(8px)}
.hieu-spotlight h2{font-size:clamp(32px,5vw,64px);line-height:1.1;margin:16px 0}.hieu-spotlight>p{font-size:18px;line-height:1.5;color:#b4b6b8}
.hieu-spotlight-close{display:block;margin:0 0 24px auto;padding:12px 18px;background:transparent;border:1px solid #777;border-radius:4px}
.hieu-spotlight-views{display:grid;grid-template-columns:3fr 1fr;gap:24px;align-items:start;margin-top:30px}
.hieu-spotlight figure{margin:0}.hieu-spotlight img{display:block;width:100%;border-radius:6px}.hieu-spotlight figcaption{font-size:13px;color:#aaa;margin-top:12px}
@media(max-width:650px){.hieu-gallery-caption{flex-direction:column;align-items:stretch}.hieu-gallery-actions{flex-direction:row;align-items:center;flex-wrap:wrap}.hieu-gallery-screen{padding:5px}.hieu-gallery-controls p{max-width:60%}.hieu-gallery-controls{gap:8px}.hieu-gallery-controls button{margin-left:6px}.hieu-spotlight{padding:20px}.hieu-spotlight-views{grid-template-columns:1fr}.hieu-spotlight-views figure:last-child{max-width:230px;margin:0 auto}.hieu-gallery-tabs button{font-size:14px;padding:12px}}
.hieu-services-heading{max-width:1100px;margin:0 auto 60px;color:#e4e2d8}
#team .team__member__image{height:auto!important;aspect-ratio:16/10;object-fit:contain!important;background:#151515}
@media(min-width:768px) and (max-width:1100px){#team .team__member{width:calc(50% - 32px)}}
.hieu-services-heading>p{font-family:LazareGrotesk,Arial,sans-serif;font-size:24px;margin:18px 0}
.hieu-text-link,.hieu-project-link{display:inline-block;color:#e4e2d8;font-family:LazareGrotesk,Arial,sans-serif;padding:14px 0;text-decoration:underline;text-underline-offset:5px}
.hieu-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1100px;margin:auto;color:#e4e2d8}
.hieu-services-grid article{border-top:1px solid #555;padding-top:24px}
.hieu-service-number{font-size:12px;color:#969a98}
.hieu-services-grid h3{font-family:LazareGrotesk,Arial,sans-serif;font-size:30px;line-height:1.1;margin:20px 0}
.hieu-services-grid p,.hieu-pricing p{font-family:LazareGrotesk,Arial,sans-serif;font-size:19px;line-height:1.5;color:#b4b6b8}
.hieu-pricing{max-width:1100px;margin:70px auto 0;padding:40px;border:1px solid #555;border-radius:4px;color:#e4e2d8}
.hieu-pricing h3{font-family:LazareGrotesk,Arial,sans-serif;font-size:40px;margin:0 0 20px}
.team__supported-by__name strong{display:block;font-family:LazareGrotesk,Arial,sans-serif;font-weight:400}
.team__supported-by__name p{font-family:LazareGrotesk,Arial,sans-serif;font-size:17px;line-height:1.5;color:#b4b6b8;margin-top:18px}
@media(max-width:1000px){.hieu-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hieu-services-grid{grid-template-columns:1fr;gap:30px}.hieu-pricing{padding:24px}.hieu-pricing h3{font-size:32px}}
.header__logo-wrap{min-width:110px}
.header__logo{width:130px!important;height:auto!important}
#team .team__member{width:calc(33.333% - 32px);margin:0 16px 40px;text-align:left}
#team .team__member>a{display:block;overflow:hidden;margin-bottom:22px;background:#24272b;border-radius:3px}
#team .team__member__image{display:block;width:100%;height:300px;object-fit:cover;object-position:top;margin:0;transition:transform .4s}
#team .team__member>a:hover img{transform:scale(1.025)}
#team .team__member__name{font-size:28px;line-height:1.1;margin-bottom:12px}
#team .team__member__role{display:block;font-size:12px;margin-bottom:14px}
#team .team__member__bio{display:block;font-family:LazareGrotesk,Arial,sans-serif;font-size:18px;line-height:1.4;color:#b4b6b8}
#team .team__member__social{display:none}
#public-goods>h2{font-size:clamp(64px,9vw,150px)}
.hieu-footer-title{font-size:clamp(38px,4vw,65px);line-height:1.1;margin:0 0 18px;letter-spacing:-1.5px}
.hieu-footer-email{font-family:LazareGrotesk,Arial,sans-serif;font-size:clamp(16px,1.5vw,24px);overflow-wrap:anywhere;display:inline-block;min-height:44px}
.hieu-footer-links{display:flex;flex-direction:column;gap:4px;font-family:LazareGrotesk,Arial,sans-serif;font-size:16px}
.hieu-footer-links a{padding:10px 0;min-height:44px}
.footer__logo{width:150px;height:auto}
a:focus-visible,button:focus-visible{outline:2px solid #e4e2d8;outline-offset:5px}
@media(max-width:767px){#team .team__member{width:100%;margin:0 0 48px}#team .team__member__image{height:300px}#team .team__member__name{font-size:28px}.hieu-footer-links{margin-bottom:24px}.header__logo{width:115px!important}}
@media(prefers-reduced-motion:reduce){#team .team__member__image{transition:none}}

/* Website enquiries: use the established monochrome type and generous spacing. */
#about-us>div:first-child{margin-bottom:120px}
#about-us .about-blocks:empty{display:none}
#public-goods>h2{font-size:clamp(48px,6vw,96px);line-height:1.05}
.hieu-contact{display:grid;grid-template-columns:1fr 1fr;gap:8%;max-width:1200px;margin:0 auto;padding:0 24px;color:#e4e2d8;font-family:LazareGrotesk,Arial,sans-serif}
.hieu-contact h3{font-size:clamp(32px,3vw,48px);line-height:1.1;margin:20px 0 24px}
.hieu-contact-copy p{font-size:20px;line-height:1.5;margin-bottom:24px;color:#b4b6b8}
.hieu-contact-copy .hieu-eyebrow{font-size:12px;letter-spacing:2px;color:#e4e2d8}
.hieu-contact a{color:inherit;text-decoration:underline;overflow-wrap:anywhere}
.hieu-contact-form{display:flex;flex-direction:column;gap:12px}
.hieu-contact-form label{font-size:16px;margin-top:8px}
.hieu-contact-form input,.hieu-contact-form textarea{box-sizing:border-box;width:100%;padding:16px;background:#202020;border:1px solid #666;border-radius:4px;color:#f0eee6;font:inherit;font-size:18px}
.hieu-contact-form textarea{resize:vertical;min-height:150px}
.hieu-contact-form button{padding:18px 24px;margin-top:10px;background:#e4e2d8;color:#151515;border:0;border-radius:4px;font:inherit;font-size:20px;cursor:pointer;min-height:56px}
.hieu-contact-form button:disabled{opacity:.6;cursor:wait}
.hieu-contact-form :focus-visible{outline:2px solid #e4e2d8;outline-offset:4px}
.hieu-form-status{font-size:16px;line-height:1.5;min-height:48px}
@media(max-width:767px){.hieu-contact{grid-template-columns:1fr;gap:24px;padding:0 8px}.hieu-contact-copy p{font-size:18px}#about-us>div:first-child{margin-bottom:96px}}

.hieu-about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10%;max-width:1150px;margin:0 auto 150px;padding:0 24px}
.hieu-portrait{margin:0;transform:rotate(-3deg)}
.hieu-portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;border-radius:5px;filter:saturate(.65)}
.hieu-portrait figcaption{padding-top:16px;font-size:12px;color:#b4b6b8}
.hieu-about-copy{color:#b4b6b8;font-family:LazareGrotesk,Arial,sans-serif}
.hieu-about-copy h2{font-size:clamp(42px,4vw,64px);color:#e4e2d8;line-height:1.05;margin:20px 0 32px}
.hieu-about-copy p{font-size:20px;line-height:1.5;margin-bottom:24px}
.hieu-about-copy .hieu-eyebrow{font-size:12px;letter-spacing:2px}
#our-principles{margin-bottom:180px}
#team .team__member>a{border:1px solid #454545;padding:12px 12px 0;border-radius:10px 10px 3px 3px;background:linear-gradient(140deg,#343434,#191919)}
#team .team__member__image{height:350px}
.team__supported-by__list{display:grid!important;grid-template-columns:repeat(3,1fr);gap:36px!important;width:100%}
.team__supported-by__name{font-size:clamp(18px,2vw,28px)!important;line-height:1.3!important;padding:26px 12px!important;border-top:1px solid #646464;white-space:normal!important}
@media(max-width:767px){.hieu-about-layout{grid-template-columns:1fr;gap:40px;padding:0 12px;margin-bottom:100px}.hieu-portrait{width:85%;max-width:400px;margin:0 auto}.hieu-about-copy p{font-size:18px}.team__supported-by__list{grid-template-columns:1fr;gap:12px!important}#team .team__member__image{height:300px}#our-principles{margin-bottom:100px}}

.hieu-service-preview{max-width:520px;margin:0 20px 64px 0;border:1px solid #454545;border-radius:8px;background:#222;overflow:hidden;transform:rotate(-2deg)}
.hieu-browser-bar{padding:12px 18px;color:#aaa;font-size:10px;letter-spacing:3px}
.hieu-service-preview img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hieu-service-preview figcaption{padding:16px;font-size:13px;color:#d0cec6;line-height:1.5}
@media(max-width:767px){.hieu-service-preview{margin:0 8px 64px}}

/* All projects are visible before a visitor chooses a live preview. */
.hieu-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hieu-project-card{padding:0 0 24px;text-align:left;border:1px solid #555;border-radius:8px;background:#202020;overflow:hidden;transition:transform .2s,border-color .2s}
.hieu-project-card:hover{transform:translateY(-5px);border-color:#e4e2d8}
.hieu-project-card[aria-pressed=true]{border-color:#e4e2d8;background:#30302d}
.hieu-project-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#151515;margin-bottom:24px}
.hieu-project-card span,.hieu-project-card strong{display:block;margin:0 22px}
.hieu-project-card .hieu-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#aaa}
.hieu-project-card strong{font-size:28px;line-height:1.1;font-weight:400;margin-top:14px;margin-bottom:24px}
.hieu-project-prompt{font-size:14px}
.hieu-live-detail{margin-top:40px}.hieu-gallery-caption>a{flex-shrink:0}
.hieu-live-browser{border:1px solid #666;border-radius:10px;overflow:hidden;background:#202020}
.hieu-live-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;min-height:62px;box-sizing:border-box;font-size:14px}
.hieu-live-toolbar button{background:#e4e2d8;color:#171717;padding:10px 16px;border:0;border-radius:4px}
.hieu-live-stage{position:relative;height:650px;max-height:75vh}
.hieu-live-stage iframe{display:block;width:100%;height:100%;border:0;background:white}
.hieu-live-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}
.hieu-live-cover button{padding:18px 28px;background:#e4e2d8;color:#171717;border:1px solid #171717;border-radius:5px;box-shadow:0 8px 30px #0005;font-size:18px}
.hieu-live-fallback{padding:40px;border:1px solid #555;border-radius:8px;font-size:20px;line-height:1.6}.hieu-live-fallback a{display:inline-block;margin-top:18px}
@media(max-width:767px){.hieu-project-grid{grid-template-columns:1fr}.hieu-project-card img{aspect-ratio:16/9}.hieu-live-fallback{padding:24px}.hieu-gallery-caption{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.hieu-project-card{transition:none}}

#public-goods>.hieu-pricing{margin:0 auto 100px}
.hieu-project-card{display:flex;flex-direction:column;align-items:stretch}
.hieu-project-card .hieu-project-prompt{margin-top:auto;padding-top:12px}

/* Captures include an unused right strip: show only the actual page viewport. */
.hieu-project-card .hieu-project-image{display:block;position:relative;margin:0 0 24px;width:100%;aspect-ratio:16/10;overflow:hidden;background:#151515}
.hieu-project-card .hieu-project-image img{display:block;width:114.5%;max-width:none;height:auto;aspect-ratio:auto;margin:0;object-fit:initial}
/* Trim the lower page strips while keeping each card's preview aligned. */
.hieu-project-card:nth-child(1) .hieu-project-image img{width:129.9%;transform:translateX(-5.9%)}
.hieu-project-card:nth-child(2) .hieu-project-image img{width:120%;transform:translateX(-2.3%)}

/* One closing invitation combines the outcome, call and project pricing. */
#team .team__supported-by{display:none}
.hieu-gallery{margin-bottom:0}
#team{margin-bottom:120px!important}
#public-goods{margin-bottom:140px!important}
.hieu-contact{border-top:1px solid #555;padding-top:64px;align-items:start}
.hieu-contact-copy h2{font-size:clamp(38px,4.5vw,64px);line-height:1.05;letter-spacing:-1.5px;margin:20px 0 28px;color:#e4e2d8}
.hieu-contact-copy .hieu-contact-pricing{font-size:17px;color:#a8aaa7;border-left:2px solid #686a63;padding-left:18px;margin-top:28px}
@media(max-width:767px){#team{margin-bottom:80px!important}.hieu-contact{padding-top:40px}.hieu-contact-copy h2{font-size:42px}.hieu-contact{gap:28px}}

.hieu-hero-line{display:inline-block;white-space:nowrap}
.hieu-hero-letter{display:inline-block;opacity:0;transform:translate(-.55em,-.15em) scale(.92)}
.hieu-hero-line .hieu-hero-letter{animation:hieu-letter-enter .7s cubic-bezier(.2,.7,.2,1) var(--letter-delay) both}
@keyframes hieu-letter-enter{to{opacity:1;transform:translate(0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hieu-hero-letter{opacity:1;transform:none}.hieu-hero-line .hieu-hero-letter{animation:none}}
.hieu-hero-space{min-width:.22em}

/* The vendor intro keeps its hooks but no longer splits the visible copy. */
.hieu-intro-hooks{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.js-hero{visibility:visible!important}
.hieu-hero-tagline{animation:hieu-subtitle-enter .75s ease 1.65s both}
@keyframes hieu-subtitle-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#public-goods{--contact-ink:#e4e2d8;--contact-muted:#b4b6b8;--contact-field:#202020;--contact-input:#f0eee6;--contact-border:#777;--contact-button:#e4e2d8;--contact-button-ink:#151515}
#public-goods.hieu-contact-on-light{--contact-ink:#141414;--contact-muted:#252525;--contact-field:rgba(255,255,255,.72);--contact-input:#141414;--contact-border:#505050;--contact-button:#171717;--contact-button-ink:#f4f2eb}
#public-goods .hieu-contact,#public-goods .hieu-contact-copy h2,#public-goods .hieu-eyebrow{color:var(--contact-ink)}
#public-goods .hieu-contact-copy p{color:var(--contact-muted)}
#public-goods .hieu-contact,#public-goods .hieu-contact-pricing{border-color:var(--contact-border)}
#public-goods input,#public-goods textarea{background:var(--contact-field);color:var(--contact-input);border-color:var(--contact-border)}
#public-goods textarea::placeholder{color:var(--contact-input);opacity:.65}
#public-goods button{background:var(--contact-button);color:var(--contact-button-ink)}
#public-goods :focus-visible{outline-color:var(--contact-ink)}
#public-goods .hieu-contact,#public-goods h2,#public-goods p,#public-goods label,#public-goods input,#public-goods textarea,#public-goods button{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
@media(prefers-reduced-motion:reduce){.hieu-hero-tagline{animation:none}#public-goods *{transition:none!important}}

/* Start the existing reveal while the contact form is still fully in view. */
.js-footer-webgl-start{--reveal-offset:140px;margin-top:calc(-120px - var(--reveal-offset))!important}
@media(max-width:767px){.js-footer-webgl-start{--reveal-offset:60px}}

/* Keep the early background trigger, with room before the footer content. */
.js-footer-webgl-start{height:calc(100dvh + 240px + var(--reveal-offset))!important;padding-top:calc(240px + var(--reveal-offset));box-sizing:border-box}
.hieu-contact-form button{padding:12px 24px;min-height:48px;font-size:18px}

.hieu-footer-contact{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;background:#e4e2d8;color:#151515;border-radius:4px;font-family:LazareGrotesk,Arial,sans-serif;font-size:18px;text-decoration:none}
.hieu-footer-detail-email{font-size:14px;padding:12px 0;overflow-wrap:anywhere}

/* Keep the scroll interlude inside the phone viewport without changing the hero. */
@media(max-width:767px){
  .js-webgl-title{padding:0 24px;box-sizing:border-box}
  .js-webgl-title-text{font-size:clamp(32px,9vw,56px)!important;line-height:1.15!important;text-align:center;white-space:nowrap;max-width:100%;margin:0}
}

.hieu-project-summary{display:block;font-size:16px;line-height:1.5;margin:16px 24px 0;color:#c6c5bf}

/* Fit the longer headline while keeping its two-line entrance. */
.hieu-hero-title{font-size:clamp(24px,5.5vw,90px)!important;line-height:1.12!important}

@media(max-width:767px){.hieu-hero-title{font-size:clamp(27px,9vw,60px)!important}}