@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Playfair+Display:wght@500;600&display=swap');
:root{--ivory:#f6f2ea;--sand:#e8ddcc;--teal:#0a3837;--deep:#062c2b;--gold:#b08d57;--ink:#263332;--muted:#687371;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:"Be Vietnam Pro",sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}.logo{display:block;width:clamp(156px,13vw,190px);height:clamp(20px,1.6vw,24px);background:url("top-homes-logo-crop.png") left center/contain no-repeat}.header{height:74px;padding:0 clamp(24px,4.5vw,60px);background:#000000;color:#fff;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(255,255,255,0.16);box-shadow:0 4px 20px rgba(0,0,0,0.65)}.nav{display:flex;gap:clamp(26px,3vw,42px);font-size:12px;font-weight:600;letter-spacing:.1em}.nav a{padding:10px 0;position:relative;color:#ffffff}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:#ffffff;transition:.3s}.nav a:hover:after,.nav a.active:after{right:0}.nav a.active{color:#ffffff}.header-cta,.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:1px solid rgba(255,255,255,0.42);background:transparent;color:#ffffff;border-radius:2px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:.25s var(--ease)}.header-cta:hover,.btn:hover{transform:translateY(-1px);background:#ffffff;color:#000000;border-color:#ffffff;box-shadow:0 4px 16px rgba(255,255,255,0.25)}.menu{display:none;background:none;border:0;color:#fff;font-size:23px}.page-hero{min-height:470px;display:flex;align-items:flex-end;color:#fff;position:relative;background-size:cover;background-position:center}.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#062c2be8,#0a383776 65%,#0a383733)}.hero-inner{position:relative;padding:110px 8vw 75px;width:100%}.eyebrow{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:13px}.eyebrow:before{content:"";width:35px;height:1px;background:var(--gold)}h1{font:500 clamp(50px,6.5vw,88px)/1.2 "Cormorant Garamond";letter-spacing:-.02em;margin:22px 0 0}h1 em,h2 em{color:#d0ad73;font-weight:500}.section{padding:100px 8vw}.section.sand{background:var(--sand)}.section.teal{background:var(--teal);color:#fff}.heading{display:grid;grid-template-columns:120px 1fr;gap:42px;margin-bottom:55px}.index{font:italic 16px "Cormorant Garamond";color:var(--gold);padding-top:9px}h2{font:600 clamp(36px,4.4vw,60px)/1.24 "Playfair Display";letter-spacing:-.025em;color:var(--teal);margin:0}.teal h2{color:#fff}.intro{max-width:700px;font-size:14px;line-height:1.85;color:var(--muted)}.teal .intro{color:#bdd0cc}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:42px}.filter{border:1px solid #cbbfac;background:transparent;padding:10px 18px;font:600 9.5px "Be Vietnam Pro";letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.3s}.filter:hover,.filter.active{background:var(--teal);border-color:var(--teal);color:#fff}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:55px 28px}.project-card{transition:.7s var(--ease);border-radius:2px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,0.04)}.project-card.hidden{display:none}.project-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(6,44,43,0.14)}.project-image{height:430px;overflow:hidden}.project-card:nth-child(3n+1) .project-image{height:560px}.project-image img{transition:1.1s var(--ease)}.project-card:hover img{transform:scale(1.035)}.meta{display:block;margin-top:18px;font-size:9px;letter-spacing:.14em;color:var(--gold)}.project-card h3,.service-card h3,.article-card h3{font:600 24px/1.35 "Playfair Display";color:var(--teal);margin:8px 0}.card-link{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:5px}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #ffffff34}.service-card{padding:42px;border-right:1px solid #ffffff34;border-bottom:1px solid #ffffff34;min-height:310px;display:flex;flex-direction:column}.service-card:nth-child(even){border-right:0}.service-card>span{font:italic 16px "Cormorant Garamond";color:var(--gold)}.service-card h3{color:#fff;margin-top:auto}.service-card p{font-size:13px;line-height:1.8;color:#b8c8c5}.service-card a{color:var(--gold);font-size:9.5px;font-weight:600}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#cbbfac}.value{background:var(--ivory);padding:38px;min-height:260px}.value b{font:italic 16px "Cormorant Garamond";color:var(--gold)}.value h3{font:600 20px/1.35 "Playfair Display";color:var(--teal)}.value p{font-size:13px;line-height:1.8;color:var(--muted)}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.article-image{height:280px;overflow:hidden}.article-card img{transition:1s var(--ease)}.article-card:hover img{transform:scale(1.04)}.article-card h3{font-size:20px;line-height:1.38}.article-card p{font-size:13px;line-height:1.75;color:var(--muted)}.detail-hero{height:72vh;min-height:520px}.detail-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:30px 8vw;background:var(--sand)}.fact b{display:block;font-size:8.5px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}.fact span{font:500 13.5px/1.4 "Be Vietnam Pro"}.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.story p{font-size:14px;line-height:1.85;color:var(--muted)}.gallery{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:480px 360px;gap:12px}.gallery img:first-child{grid-row:1/3}.process{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px}.step{padding:28px 30px 0 0;border-top:1px solid var(--gold)}.step b{font:italic 15px "Cormorant Garamond";color:var(--gold)}.step h3{font:600 19px/1.35 "Playfair Display"}.step p{font-size:13px;line-height:1.8;color:var(--muted)}.contact-band{padding:85px 8vw;background:var(--deep);color:#fff;display:grid;grid-template-columns:1.4fr .6fr;align-items:center}.contact-band h2{color:#fff;line-height:1.24}.contact-band .btn{justify-self:end}.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:850px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.field input,.field select,.field textarea{border:0;border-bottom:1px solid #bdb19e;background:transparent;padding:13px 2px;font:13px "Be Vietnam Pro";outline:0}.field textarea{min-height:100px}.submit{background:var(--teal);color:#fff;border:0;cursor:pointer;width:max-content}.footer{background:var(--deep);color:#afbfbc;padding:60px 8vw 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr;gap:42px}.footer h4{font-size:9.5px;letter-spacing:.18em;color:var(--gold)}.footer a,.footer p{display:block;font-size:12px;line-height:1.8;margin:10px 0}.copyright{margin-top:45px;padding-top:18px;border-top:1px solid #ffffff20;font-size:9px;letter-spacing:.12em}.reveal{opacity:0;transform:translateY(28px);filter:blur(5px);transition:1s var(--ease)}.reveal.show{opacity:1;transform:none;filter:none}
@media(max-width:850px){.header{height:68px;padding:0 22px}.logo{width:145px;height:18px}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#000000;border-bottom:1px solid rgba(255,255,255,0.2);padding:26px;flex-direction:column}.nav.open{display:flex}.header-cta{display:none}.menu{display:block}.hero-inner,.section{padding-left:25px;padding-right:25px}.heading{grid-template-columns:1fr;gap:10px}.project-grid,.story{grid-template-columns:1fr}.project-image,.project-card:nth-child(3n+1) .project-image{height:420px}.service-grid{grid-template-columns:1fr}.service-card{border-right:0}.values,.article-grid{grid-template-columns:1fr 1fr}.gallery{grid-template-rows:400px 300px}.process{grid-template-columns:1fr 1fr;gap:55px 0}.detail-facts{grid-template-columns:1fr 1fr}.contact-band{grid-template-columns:1fr;gap:30px}.contact-band .btn{justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){h1{font-size:58px}.page-hero{min-height:400px}.section{padding-top:75px;padding-bottom:75px}.project-image,.project-card:nth-child(3n+1) .project-image{height:340px}.values,.article-grid,.process,.footer-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr;grid-template-rows:repeat(3,300px)}.gallery img:first-child{grid-row:auto}.detail-facts{grid-template-columns:1fr 1fr}.form{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;filter:none;transition:none!important}}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw;align-items:start}.contact-copy>p{font-size:12px;line-height:1.9;color:var(--muted)}.contact-list{margin-top:45px;border-top:1px solid #cabfae}.contact-list>div{display:grid;grid-template-columns:130px 1fr;padding:20px 0;border-bottom:1px solid #cabfae}.contact-list span,.form-heading{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.contact-list a,.contact-list p{font-size:12px;margin:0 0 7px}.consult-form{background:#fff;padding:45px;box-shadow:0 25px 80px #063c3820}.form-heading{display:flex;justify-content:space-between;border-bottom:1px solid #d8cebd;margin-bottom:22px}.consult-form label{display:flex;flex-direction:column;gap:8px;margin:17px 0;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.consult-form input,.consult-form select,.consult-form textarea{border:0;border-bottom:1px solid #c7bbaa;background:transparent;padding:12px 0;font:12px "Be Vietnam Pro";outline:none}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.button.dark{background:var(--teal);color:#fff;border:0;padding:16px 20px;font:600 9px "Be Vietnam Pro";letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.form-note,.form-status{font-size:9px;color:var(--muted)}.location-band{display:grid;grid-template-columns:1fr 1fr;background:var(--deep);color:#fff;min-height:460px}.location-copy{padding:85px 8vw}.location-copy h2{color:#fff}.location-copy p{font-size:11px;line-height:1.8;color:#b7c8c5}.location-map{position:relative;overflow:hidden;background:#d8d0c1}.map-grid{position:absolute;inset:0;background:linear-gradient(35deg,transparent 46%,#b3a78f 47% 49%,transparent 50%),linear-gradient(125deg,transparent 45%,#b3a78f 46% 48%,transparent 49%),repeating-linear-gradient(90deg,#0000 0 75px,#a99f8d55 76px),repeating-linear-gradient(#0000 0 75px,#a99f8d55 76px)}.map-pin{position:absolute;left:53%;top:46%;width:55px;height:55px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:var(--teal);color:var(--gold);font:600 11px "Playfair Display"}.text-link.light{font-size:9px;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:5px}
@media(max-width:850px){.contact-layout,.location-band{grid-template-columns:1fr}.location-map{min-height:360px}.location-copy{padding:65px 25px}}
@media(max-width:560px){.consult-form{padding:28px 22px}.form-row{grid-template-columns:1fr}.contact-list>div{grid-template-columns:1fr;gap:9px}}
.contact-dock{position:fixed;right:22px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:9px;align-items:flex-end}.contact-action{height:48px;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;color:#fff;filter:drop-shadow(0 8px 18px #062c2b36)}.contact-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);border:1px solid #ffffff70;font:600 15px "Be Vietnam Pro";transition:transform .45s var(--ease),background .35s}.contact-label{padding:9px 12px;background:#062c2be8;border:1px solid #ffffff2b;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateX(10px);pointer-events:none;transition:.35s var(--ease)}.contact-action:hover .contact-icon,.contact-action:focus-visible .contact-icon{transform:scale(1.08);background:var(--gold)}.contact-action:hover .contact-label,.contact-action:focus-visible .contact-label{opacity:1;transform:none}.contact-action.call .contact-icon{background:#9a7949}.contact-action.messenger .contact-icon{background:#2477e8}.contact-action.zalo .contact-icon{background:#0877d1}.contact-action.maps .contact-icon{background:#0a3837}@media(max-width:650px){body{padding-bottom:64px}.contact-dock{right:0;bottom:0;left:0;height:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#062c2bf5;border-top:1px solid #ffffff25;backdrop-filter:blur(14px)}.contact-action{height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px;filter:none}.contact-icon{width:auto;height:auto;border:0;border-radius:0;background:transparent!important;font-size:15px}.contact-label{padding:0;background:transparent;border:0;opacity:1;transform:none;font-size:7px}.contact-action:hover .contact-icon{transform:translateY(-2px);color:#d7b77f}}

/* Type scale and reading rhythm — shared across all inner pages */
.nav{font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.index{font-size:20px;line-height:1.15;letter-spacing:.015em;padding-top:7px;white-space:nowrap}
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
.intro,.story>div:last-child,.contact-copy,.article-body{max-width:72ch}
.section,.hero-inner,.location-copy,.contact-band,.footer{padding-left:clamp(24px,8vw,136px);padding-right:clamp(24px,8vw,136px)}
.story p,.intro,.contact-copy>p,.location-copy p{line-height:1.9}
@media(max-width:850px){.index{font-size:18px}.section,.hero-inner,.location-copy,.contact-band,.footer{padding-left:24px;padding-right:24px}}
@media(max-width:560px){.index{font-size:17px;white-space:normal}.section,.hero-inner,.location-copy,.contact-band,.footer{padding-left:20px;padding-right:20px}p{line-height:1.8}}

/* Prevent awkward title fragments and improve Vietnamese text composition */
.page-hero h1{max-width:20ch;font-size:clamp(48px,6vw,84px);line-height:1.2;letter-spacing:-.02em}
.heading h2,.story h2,.contact-band h2{max-width:20ch;line-height:1.24}
.project-card h3,.service-card h3,.article-card h3,.value h3,.step h3{max-width:28ch;line-height:1.35;text-wrap:balance}
.story>div:last-child p,.intro,.contact-copy>p,.location-copy>p{max-width:65ch;line-height:1.85}
@media(max-width:850px){.page-hero h1{max-width:16ch;font-size:clamp(42px,8.5vw,68px);line-height:1.2}.heading h2,.story h2,.contact-band h2{max-width:18ch}}
@media(max-width:560px){.page-hero h1{max-width:12ch;font-size:clamp(38px,11vw,52px);line-height:1.18}.heading h2,.story h2,.contact-band h2{max-width:14ch}.article-card h3,.service-card h3,.value h3{max-width:24ch}}