:root{--cream:#f5f2eb;--green:#203e34;--ink:#253a32;--line:#d6d6c9;--gold:#c4ac7c}::selection{background:#b7c7ae;color:#152e25}body{background:var(--cream)}header{position:sticky;top:0;height:88px;background:#f5f2ebf5;backdrop-filter:blur(18px);border-bottom:1px solid #d6d6c980;transition:box-shadow .3s;z-index:40}body.has-scrolled header{box-shadow:0 8px 35px #153e320a}header .brand{font-size:12px;letter-spacing:1.5px}header nav{font-size:11px;gap:24px}.nav-contact{background:var(--green);color:#fff;border-color:var(--green);padding:13px 19px}.nav-contact:hover{color:#e4d4b1}h1,h2{letter-spacing:-1.8px;font-weight:400}h2{font-size:clamp(34px,4vw,61px);line-height:1.25}h2 em{color:#728273}.eyebrow{font-size:9px;letter-spacing:2.5px}.section{padding:110px 7%}.text-link{font-size:11px;letter-spacing:.3px}.button{padding:18px 26px;transition:background .3s,transform .3s}.button:hover{transform:translateY(-3px)}.premium-home .hero{height:calc(100svh - 88px);min-height:640px;max-height:1100px}.premium-home .hero-image{height:116%;top:-8%;object-position:center 58%;will-change:transform}.premium-home .hero-shade{background:linear-gradient(0deg,#0a211bc9,transparent 85%),linear-gradient(90deg,#102a2340,transparent)}.premium-home .hero-copy{position:absolute;left:7%;right:7%;bottom:95px;padding:0}.premium-home .hero h1{font-size:clamp(45px,5.7vw,88px);font-weight:400;line-height:1.22;letter-spacing:-3px;text-shadow:0 2px 30px #0b211c24}.premium-home .hero h1 em{color:#ede2cb}.hero-description{display:flex;align-items:end;justify-content:space-between;margin-top:24px}.hero-description p{font-size:12px;line-height:1.9;color:#edf0e8}.hero-explore{display:flex;align-items:center;gap:24px;font-size:12px}.hero-explore b{display:grid;place-items:center;width:65px;height:65px;border:1px solid #ffffff85;border-radius:50%;font-size:25px;font-weight:400;transition:background .3s,transform .3s}.hero-explore:hover b{background:#f5f2eb;color:var(--green);transform:rotate(45deg)}.hero-bottom{border-top:1px solid #ffffff40;padding-top:20px;bottom:25px;align-items:center}.design-ribbon{display:flex;align-items:center;justify-content:space-around;padding:24px 4%;gap:30px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:2px;overflow:hidden;white-space:nowrap}.design-ribbon i{font-style:normal;font-size:22px;color:#899478}.intro{gap:10%}.intro h2{position:sticky;top:140px}.intro-text{font-size:12px;line-height:1.95}.intro-text .intro-lead{font-size:24px;color:var(--green);line-height:1.6;margin-bottom:30px;letter-spacing:-.5px}.intro-text p+p{margin-top:20px}.project-featured{background:#e9e9df;border:0;padding-bottom:100px}.section-heading{margin-bottom:60px}.premium-home .project-card{position:sticky;top:108px;background:#e9e9df;box-shadow:0 -18px 40px #223f340d;border-top:1px solid #c6cabe;overflow:hidden}.premium-home .project-featured>.project-card+.project-card{margin-top:90px;padding-top:0}.premium-home .project-card:nth-of-type(2){top:123px}.premium-home .project-card:nth-of-type(3){top:138px}.premium-home .project-card img{height:clamp(300px,57vh,650px);will-change:transform}.project-card .photo{position:relative}.project-card .photo:after{content:'KHÁM PHÁ DỰ ÁN ↗';position:absolute;right:25px;bottom:25px;background:#f5f2ebee;color:var(--green);padding:12px 18px;font-size:9px;letter-spacing:1px;opacity:0;transform:translateY(10px);transition:.4s}.project-card:hover .photo:after{opacity:1;transform:none}.project-card-body{padding:25px 0 30px}.project-card h3{font-size:clamp(22px,2.5vw,34px);font-weight:400;letter-spacing:-.8px}.project-card-body .eyebrow{font-size:8px}.project-card-body p:not(.eyebrow){font-size:11px}.approach{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;align-items:start}.approach-steps article{padding:25px 0;border-top:1px solid var(--line)}.approach-steps article:first-child{padding-top:0;border-top:0}.approach-steps span{font-size:9px;letter-spacing:1.5px;color:#748170}.approach-steps h3{font-size:22px;font-weight:400;margin:12px 0}.approach-steps p{font-size:12px;color:#657067;margin-bottom:0}.collections{border-top:1px solid var(--line)}.collection-card:first-child{grid-column:auto}.collection-grid{gap:50px 35px}.collection-card:nth-child(even){padding-top:100px}.collection-card img,.collection-card:first-child img{height:370px}.card-caption h3{font-size:21px}.card-caption small{font-size:8px}.service-section{position:relative;background:#203e34}.service-section h2 em{color:#b5c4aa}.services{display:block;border-top:0}.services a,.services a+a{display:grid;grid-template-columns:60px 1fr 1fr 30px;gap:30px;align-items:center;padding:28px 0;border:0;border-top:1px solid #ffffff35;transition:padding .4s,background .4s}.services a:hover{padding-left:16px;background:#ffffff05}.services h3{font-size:27px;margin:0;letter-spacing:-.8px}.services p{margin:0;max-width:100%;font-size:12px}.service-arrow{margin:0}.feature{overflow:hidden;grid-template-columns:1.1fr 1fr}.feature>img{height:760px;object-fit:cover}.feature>div{padding:120px 14%}.contact{background:var(--cream)}.contact>img{height:570px}.contact h2{font-size:clamp(35px,4.2vw,64px)}.contact .phone{font-size:clamp(30px,3.5vw,50px)}footer{background:#1d362d;color:#edf0e6;padding-top:65px}footer p,footer>a,.footer-bottom{color:#c2cbbd}.footer-bottom{border-color:#ffffff26}footer>img{mix-blend-mode:normal;border-radius:2px}.project-cover{height:75vh;max-height:900px}.project-photos figure{overflow:hidden}.project-photos img{transition:transform .8s}.project-photos figure:hover img{transform:scale(1.015)}.project-heading,.projects-index,.customer-heading{padding-top:60px}.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:#bfa579;z-index:100;pointer-events:none}.motion-ready .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.65,.3,1)}.motion-ready .reveal.is-visible{opacity:1;transform:none}.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid #b8a57f;border-radius:50%;pointer-events:none;z-index:90;left:0;top:0;opacity:0;transition:width .2s,height .2s,opacity .2s;mix-blend-mode:difference}.cursor-ring.on-link{width:64px;height:64px;background:#d5c39b25}.chapter-link{position:fixed;right:22px;bottom:24px;background:var(--green);color:#f5f2eb;padding:13px 20px;border:1px solid #ffffff40;z-index:35;font-size:10px;letter-spacing:.4px;box-shadow:0 5px 25px #102a2320}.chapter-link span{margin-left:18px}.hero-copy{animation:hero-enter 1.1s ease both}@keyframes hero-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@media(max-width:1100px){header nav{gap:14px}.brand{gap:8px}header .brand{font-size:10px}.services a,.services a+a{gap:18px;grid-template-columns:35px 1fr 1fr 20px}}@media(max-width:800px){header{height:76px}header nav{top:76px;background:var(--cream);font-size:13px;gap:20px}.section{padding:65px 6%}h2{letter-spacing:-1px;font-size:34px}.premium-home .hero{height:calc(100svh - 76px);min-height:610px;max-height:900px}.premium-home .hero-copy{left:6%;right:6%;bottom:100px}.premium-home .hero h1{font-size:clamp(33px,7.8vw,55px);letter-spacing:-1.5px}.premium-home .hero .eyebrow{font-size:8px;max-width:none}.hero-description{display:block;margin-top:20px}.hero-description p{font-size:11px}.hero-explore{margin-top:22px;gap:20px;font-size:11px}.hero-explore b{height:45px;width:45px;font-size:20px}.hero-bottom{left:6%;right:6%;font-size:8px}.hero-bottom a{display:block;font-size:7px}.design-ribbon{justify-content:flex-start;font-size:8px;padding:18px 6%;gap:25px}.intro h2{position:static}.intro-text .intro-lead{font-size:21px}.section-heading{margin-bottom:35px}.premium-home .project-card,.premium-home .project-card:nth-of-type(2),.premium-home .project-card:nth-of-type(3){position:relative;top:auto;box-shadow:none}.premium-home .project-featured>.project-card+.project-card{margin-top:40px}.premium-home .project-card img{height:300px}.project-card-body .text-link{margin-top:15px}.approach{grid-template-columns:1fr;gap:35px}.collection-grid{gap:30px}.collection-card:nth-child(even){padding-top:0}.collection-card img,.collection-card:first-child img{height:300px}.services a,.services a+a{grid-template-columns:30px 1fr 25px;gap:12px;padding:25px 0}.services h3{font-size:23px}.services p{grid-column:2/3;grid-row:2;font-size:12px}.service-arrow{position:static;grid-column:3;grid-row:1}.feature{grid-template-columns:1fr}.feature>img{height:430px}.feature>div{padding:65px 6%}.contact>img{height:400px}.contact-email{font-size:12px}.chapter-link{right:14px;bottom:14px;padding:12px 16px}.cursor-ring{display:none}.project-cover{height:auto}.project-heading h1{font-size:37px}footer{padding-bottom:80px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-ready .reveal{opacity:1;transform:none;transition:none}.hero-copy{animation:none}.premium-home .hero-image{will-change:auto}.cursor-ring{display:none}*{animation:none!important;transition:none!important}}
.collection-card:only-child{grid-column:1/-1}.collection-card:only-child img{height:500px}@media(max-width:800px){.collection-card:only-child img{height:300px}}

/* Consistent vector icons, stable touch layouts, and native mobile scrolling. */
.icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.16em;flex-shrink:0;pointer-events:none}
.icon--spark{width:18px;height:18px;stroke-width:1.2}
.design-ribbon i{display:flex;align-items:center;color:#87937b;line-height:1}
.hero-explore b .icon{width:24px;height:24px;vertical-align:middle}
.service-arrow .icon{width:26px;height:26px}
.card-caption b .icon{width:25px;height:25px}
.button,.text-link{touch-action:manipulation}
button{color:inherit;-webkit-appearance:none;appearance:none}
header{background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}
.brand img{flex-shrink:0}
.menu{width:44px;height:44px;padding:10px;align-items:center;justify-content:center;color:var(--green);-webkit-tap-highlight-color:transparent}
.menu-icon{display:block;overflow:visible}
.menu-line{transform-origin:12px 12px;transition:transform .2s ease}
.menu[aria-expanded=true] .menu-line--top{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded=true] .menu-line--bottom{transform:translateY(-4px) rotate(-45deg)}
nav .icon{margin-left:4px}
.cursor-ring,.chapter-link{display:none}
.contact-dock{position:fixed;right:24px;bottom:24px;display:flex;z-index:35;gap:4px;background:var(--cream);padding:5px;border:1px solid var(--line);box-shadow:0 6px 22px #203e3412;border-radius:4px}
.contact-dock[hidden]{display:none}
.contact-dock a{display:flex;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 17px;font-size:11px;touch-action:manipulation}
.dock-zalo{background:var(--green);color:var(--cream);border-radius:2px}
.contact-dock .icon{width:17px;height:17px}
.motion-ready .reveal{transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.65,.3,1)}
.motion-ready .reveal.is-visible{transform:none}
.hero-description p{margin:0;line-height:1.85}
.project-photos img{background:#e8e9e1}
.project-back .icon{margin-right:6px}
.collection-card .photo,.project-card .photo{background:#e8e9e1}
@media(hover:hover) and (pointer:fine){
  .menu:hover{background:#e9ece4}
  .contact-dock a:hover{opacity:.8}
  .services a:hover .icon{transform:translate(2px,-2px);transition:transform .25s}
}
@media(max-width:1023px),(hover:none),(pointer:coarse){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  .premium-home .hero-image{transform:none!important;will-change:auto;height:100%;top:0}
  .premium-home .project-card,.premium-home .project-card:nth-of-type(2),.premium-home .project-card:nth-of-type(3){position:relative;top:auto;box-shadow:none}
  .intro h2{position:static}
  .project-card img{will-change:auto}
  .collection-card:hover img,.project-card:hover img,.project-photos figure:hover img{transform:none}
  .project-card .photo:after{display:none}
  .button:hover{transform:none}
  .hero-copy{animation:none}
}
@media(max-width:800px){
  html{scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:14px;line-height:1.75;padding-bottom:0}
  header{height:72px;padding:0 5%;border-bottom:1px solid #d6d6c980;box-shadow:none!important}
  header .brand{font-size:10px;letter-spacing:1.1px;gap:10px;min-width:0}
  .brand small{font-size:7px;letter-spacing:2px;margin-top:4px}
  .brand img{width:34px;height:34px}
  .menu{display:flex;flex-shrink:0}
  header nav{top:72px;padding:14px 6% 22px;gap:0;border-bottom:1px solid var(--line);box-shadow:0 15px 25px #203e3410;max-height:calc(100svh - 72px);overflow-y:auto}
  nav.open{display:flex}
  nav>a{display:flex;align-items:center;min-height:48px;padding:10px 0;border-bottom:1px solid #d6d6c980;font-size:13px}
  nav .nav-contact{padding:13px 18px;margin-top:15px;border:0;justify-content:space-between}
  .section{padding:62px 6%}
  .premium-home .hero{height:calc(100svh - 72px);min-height:520px;max-height:850px}
  .premium-home .hero-image{object-position:65% center}
  .premium-home .hero-shade{background:linear-gradient(0deg,#102a23e6,#102a2314 100%)}
  .premium-home .hero-copy{left:6%;right:6%;bottom:92px}
  .premium-home .hero h1{font-size:clamp(30px,7.7vw,53px);letter-spacing:-1.3px;line-height:1.3}
  .premium-home .hero .eyebrow{font-size:7px;letter-spacing:1.6px;margin-bottom:18px}
  .hero-description{margin-top:20px}
  .hero-description p{font-size:11px;line-height:1.9}
  .hero-explore{margin-top:23px;gap:18px;font-size:11px}
  .hero-explore b{width:44px;height:44px}
  .hero-bottom{bottom:23px;left:6%;right:6%;padding-top:18px;font-size:7px;letter-spacing:1.2px}
  .hero-bottom a{font-size:7px;letter-spacing:1px}
  .design-ribbon{padding:23px 6%;justify-content:space-between;gap:12px;font-size:8px;letter-spacing:1.1px}
  .design-ribbon>span:last-child,.design-ribbon>i:last-of-type{display:none}
  .design-ribbon .icon--spark{width:14px;height:14px}
  h2{font-size:clamp(29px,7.5vw,42px);line-height:1.32;letter-spacing:-1px}
  .intro{gap:28px}
  .intro-text{font-size:13px;line-height:1.85}
  .intro-text .intro-lead{font-size:20px;line-height:1.65;letter-spacing:-.4px;margin:0 0 22px}
  .intro-text p+p{margin-top:16px}
  .text-link{font-size:12px;min-height:40px;padding-top:8px;line-height:1.65}
  .section-heading{margin-bottom:28px}
  .section-heading>.text-link{margin-top:20px}
  .premium-home .project-card img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .premium-home .project-featured>.project-card+.project-card{margin-top:36px;padding-top:28px}
  .project-card-body{gap:5px;padding:20px 0 12px}
  .project-card h3{font-size:23px;line-height:1.4;letter-spacing:-.6px}
  .project-card-body .eyebrow{font-size:7px;letter-spacing:1.3px;line-height:1.8;margin-bottom:8px}
  .project-card-body p:not(.eyebrow){font-size:12px;line-height:1.75}
  .project-card-body .text-link{margin-top:10px}
  .approach{gap:28px}
  .approach-steps article{padding:22px 0}
  .approach-steps h3{font-size:21px;margin-top:8px}
  .approach-steps p{font-size:13px;line-height:1.8}
  .services h3{font-size:21px;letter-spacing:-.6px}
  .services a:hover{padding-left:0}
  .service-top p,.services p{font-size:13px;line-height:1.8}
  .feature>img{height:auto;aspect-ratio:4/3}
  .feature>div{padding:58px 6%}
  .feature p:not(.eyebrow){font-size:13px;line-height:1.85}
  .contact{gap:32px}
  .contact h2{font-size:clamp(30px,7.6vw,43px);line-height:1.35}
  .contact>img{height:auto;aspect-ratio:4/5;object-fit:cover}
  .contact .phone{font-size:32px;margin:23px 0}
  .contact-email{font-size:12px;line-height:1.9}
  .contact-actions{flex-wrap:wrap;gap:16px}
  .contact-actions .text-link{margin-top:0;padding-top:6px}
  .contact-dock{left:0;right:0;bottom:0;border:0;border-top:1px solid var(--line);border-radius:0;gap:8px;box-shadow:none;padding:8px 5% calc(8px + env(safe-area-inset-bottom,0px));background:var(--cream)}
  .contact-dock a{min-width:0;flex:1;min-height:43px;padding:0 12px;font-size:12px}
  .dock-call{border:1px solid var(--line);border-radius:2px}
  .motion-ready .reveal{transform:none;transition:opacity .3s ease}
  .motion-ready .reveal.is-visible{transform:none}
  .project-heading,.projects-index,.customer-heading{padding-top:34px}
  .project-heading h1,.projects-index h1,.customer-heading h1{font-size:clamp(32px,8.8vw,46px);line-height:1.3;letter-spacing:-1px}
  .project-summary,.projects-intro,.project-story p:not(.eyebrow){font-size:13px;line-height:1.85}
  .project-facts{gap:20px}
  .project-facts dd{font-size:13px;line-height:1.75}
  .project-album h2{font-size:22px;letter-spacing:-.4px;line-height:1.5}
  .project-photos{gap:14px}
  .project-cta h2{font-size:31px}
  footer{padding:40px 6% 32px;gap:23px}
  footer>img{width:150px;height:auto}
  .footer-bottom{flex-wrap:wrap;gap:8px}
  dialog{padding:20px;max-height:88svh}
}
@media(max-width:360px){
  header .brand{font-size:9px;letter-spacing:.6px;gap:8px}
  .brand small{font-size:6px;letter-spacing:1.5px}
  .hero-description p{font-size:10px}
  .hero-bottom{font-size:6px}
  .hero-bottom a{font-size:6px}
  .design-ribbon{font-size:7px;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .reveal{opacity:1;transform:none;transition:none}
  .premium-home .hero-image{transform:none!important;will-change:auto;height:100%;top:0}
  .premium-home .project-card,.premium-home .project-card:nth-of-type(2),.premium-home .project-card:nth-of-type(3){position:relative;top:auto;box-shadow:none}
  .scroll-progress{display:none}
}
img{max-width:100%;height:auto}
.menu-line--top{transform-origin:12px 8px}
.menu-line--bottom{transform-origin:12px 16px}
@media(max-width:800px){
  .premium-home .hero-image{height:120%;top:-20%;object-position:65% center}
  .contact h2 em{display:block}
}
@media(prefers-reduced-motion:reduce) and (max-width:800px){
  .premium-home .hero-image{height:120%;top:-20%}
}