@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root{
  --home-green:#073f35;
  --home-green-2:#0d6150;
  --home-gold:#d4ad63;
  --home-cream:#f3f0e8;
  --home-paper:#fffdf8;
  --home-ink:#112720;
  --home-muted:#66756e;
  --home-line:#dfe5df;
  --home-shadow:0 28px 80px rgba(7,63,53,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.hub-home{margin:0;background:var(--home-cream);color:var(--home-ink);font-family:'Be Vietnam Pro',sans-serif}
.hub-home img{display:block;max-width:100%}
.hub-home a{color:inherit}
.hub-home main{overflow:hidden}
.home-eyebrow{margin:0;color:var(--home-gold);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.home-eyebrow.dark{color:#916e2f}

.home-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(720px,88vh,920px);padding:110px max(32px,calc((100vw - 1400px)/2)) 170px;color:#fff;background:#042f28;overflow:hidden}
.home-hero-media,.home-hero-grid{position:absolute;inset:0;z-index:-2}
.home-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,31,26,.97) 0%,rgba(2,31,26,.88) 38%,rgba(2,31,26,.32) 70%,rgba(2,31,26,.48) 100%),linear-gradient(0deg,rgba(2,31,26,.78),transparent 55%)}
.home-hero-image{position:absolute;inset:0;margin:0;overflow:hidden}
.home-hero-image img{width:100%;height:100%;object-fit:cover}
.home-hero-saigon{clip-path:polygon(0 0,66% 0,49% 100%,0 100%)}
.home-hero-saigon img{object-position:center}
.home-hero-cangio{clip-path:polygon(66% 0,100% 0,100% 100%,49% 100%)}
.home-hero-cangio img{object-position:center}
.home-hero-grid{z-index:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.home-hero-content{position:relative;z-index:1;width:min(840px,63vw)}
.home-hero h1{margin:19px 0 26px;font:600 clamp(58px,7vw,106px)/.91 'Playfair Display',serif;letter-spacing:-.05em}
.home-hero h1 em{display:block;color:var(--home-gold);font-size:.73em}
.home-lead{max-width:730px;margin:0;color:rgba(255,255,255,.74);font-size:16px;line-height:1.8}
.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:31px}
.home-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:10px;font-size:12px;font-weight:800;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.home-button:hover{transform:translateY(-2px)}
.home-button-primary{background:var(--home-gold);color:#173127}
.home-button-ghost{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(8px)}
.home-button-gold{background:var(--home-gold);color:#173127}
.home-text-link{padding:12px 4px;color:#fff;font-size:12px;font-weight:800;text-decoration:none}
.home-hero-stats{position:absolute;left:max(32px,calc((100vw - 1400px)/2));right:max(32px,calc((100vw - 1400px)/2));bottom:35px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.23)}
.home-hero-stats div{padding:20px 22px 0;border-right:1px solid rgba(255,255,255,.18)}
.home-hero-stats div:first-child{padding-left:0}
.home-hero-stats div:last-child{border-right:0}
.home-hero-stats strong,.home-hero-stats span{display:block}
.home-hero-stats strong{color:var(--home-gold);font:600 25px 'Playfair Display',serif}
.home-hero-stats span{margin-top:4px;color:rgba(255,255,255,.6);font-size:10px}

.home-section{padding:110px max(28px,calc((100vw - 1400px)/2));scroll-margin-top:120px}
.home-section-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:70px;align-items:end;margin-bottom:43px}
.home-section-heading h2,.home-capabilities-intro h2,.home-about-copy h2{margin:12px 0 0;font:600 clamp(39px,5vw,67px)/1.04 'Playfair Display',serif;letter-spacing:-.04em}
.home-section-heading>p,.home-capabilities-intro>p,.home-about-copy>p{margin:0;color:var(--home-muted);font-size:14px;line-height:1.8}
.purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.purpose-grid article{position:relative;min-height:300px;padding:34px;border:1px solid var(--home-line);border-radius:18px;background:var(--home-paper);overflow:hidden}
.purpose-grid article:after{content:attr(data-index);position:absolute;right:-3px;bottom:-37px;color:rgba(7,63,53,.045);font:600 150px 'Playfair Display',serif}
.purpose-grid span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--home-green);color:var(--home-gold);font:600 15px 'Playfair Display',serif}
.purpose-grid h3{position:relative;margin:72px 0 12px;color:var(--home-green);font:600 27px/1.15 'Playfair Display',serif}
.purpose-grid p{position:relative;margin:0;color:var(--home-muted);font-size:12px;line-height:1.75}

.home-capabilities{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);gap:90px;color:#fff;background:var(--home-green)}
.home-capabilities-intro{position:sticky;top:105px;align-self:start}
.home-capabilities-intro>p{max-width:500px;margin-top:23px;color:rgba(255,255,255,.62)}
.capability-list{border-top:1px solid rgba(255,255,255,.15)}
.capability-list article{display:grid;grid-template-columns:62px 1fr;gap:20px;padding:25px 6px;border-bottom:1px solid rgba(255,255,255,.15)}
.capability-list b{color:var(--home-gold);font:600 29px 'Playfair Display',serif}
.capability-list h3{margin:0;font:600 24px 'Playfair Display',serif}
.capability-list p{margin:8px 0 0;color:rgba(255,255,255,.59);font-size:11px;line-height:1.65}

.home-projects{background:#ebece5}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-card{position:relative;isolation:isolate;display:flex;min-height:600px;padding:30px;border-radius:23px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 20px 65px rgba(7,63,53,.12)}
.project-card>img,.project-overlay{position:absolute;inset:0;width:100%;height:100%}
.project-card>img{z-index:-3;object-fit:cover;transition:transform .7s}
.project-card:hover>img{transform:scale(1.035)}
.project-overlay{z-index:-2;background:linear-gradient(0deg,rgba(2,31,26,.96) 0%,rgba(2,31,26,.47) 55%,rgba(2,31,26,.14) 100%)}
.project-card-cangio .project-overlay{background:linear-gradient(0deg,rgba(1,39,43,.96) 0%,rgba(1,39,43,.43) 58%,rgba(1,39,43,.11) 100%)}
.project-card-green-city .project-overlay{background:linear-gradient(0deg,rgba(13,42,28,.97) 0%,rgba(13,42,28,.47) 58%,rgba(13,42,28,.12) 100%)}
.project-card-top{display:flex;align-items:center;justify-content:space-between;width:100%;height:max-content}
.project-status{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(4,42,35,.42);font-size:9px;font-weight:800;backdrop-filter:blur(9px)}
.project-status i{width:7px;height:7px;border-radius:50%;background:#41d681;box-shadow:0 0 0 5px rgba(65,214,129,.15)}
.project-code{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.38);border-radius:50%;color:var(--home-gold);font:600 13px 'Playfair Display',serif;backdrop-filter:blur(9px)}
.project-card-copy{position:absolute;left:31px;right:31px;bottom:31px}
.project-card-copy small{color:var(--home-gold);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.project-card-copy h3{margin:12px 0 17px;font:600 clamp(43px,4.4vw,67px)/.92 'Playfair Display',serif;letter-spacing:-.045em}
.project-card-copy p{max-width:510px;margin:0;color:rgba(255,255,255,.66);font-size:11px;line-height:1.7}
.project-card-copy strong{display:flex;align-items:center;gap:11px;margin-top:24px;font-size:11px}
.project-card-copy strong span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--home-gold);color:var(--home-green);font-size:16px;transition:transform .2s}
.project-card:hover .project-card-copy strong span{transform:translateX(4px)}

@media(max-width:1200px){.project-grid{grid-template-columns:1fr 1fr}.project-card-green-city{grid-column:1/-1;min-height:520px}.project-card-copy h3{font-size:56px}}

.home-about{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);gap:95px;align-items:center;padding:110px max(28px,calc((100vw - 1400px)/2));color:#fff;background:#0b2f28;scroll-margin-top:100px}
.home-about-mark{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:480px;border:1px solid rgba(212,173,99,.38);border-radius:50% 50% 44% 44%;background:radial-gradient(circle at 50% 45%,rgba(212,173,99,.14),transparent 58%)}
.home-about-mark:before,.home-about-mark:after{content:"";position:absolute;border:1px solid rgba(212,173,99,.19);border-radius:50%}
.home-about-mark:before{inset:9%}.home-about-mark:after{inset:19%}
.home-about-mark span{color:var(--home-gold);font:600 clamp(56px,8vw,110px) 'Playfair Display',serif;letter-spacing:-.05em}
.home-about-mark small{position:absolute;bottom:23%;color:rgba(255,255,255,.45);font-size:8px;font-weight:800;letter-spacing:.18em}
.home-about-copy h2{color:#fff}
.home-about-copy>p{margin-top:21px;color:rgba(255,255,255,.62)}

.home-footer{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:34px max(28px,calc((100vw - 1400px)/2));border-top:1px solid rgba(255,255,255,.11);color:#fff;background:#061f1b}
.home-footer strong,.home-footer span{display:block}
.home-footer strong{color:var(--home-gold);font:600 16px 'Playfair Display',serif}
.home-footer span{margin-top:5px;color:rgba(255,255,255,.45);font-size:9px}
.home-footer nav{display:flex;align-items:center;flex-wrap:wrap;gap:24px}
.home-footer a{color:rgba(255,255,255,.66);font-size:10px;font-weight:700;text-decoration:none}
.home-footer a:hover{color:#fff}

@media(max-width:1100px){
  .home-hero-content{width:min(850px,82vw)}
  .home-section-heading{grid-template-columns:1fr;gap:20px}
  .home-section-heading>p{max-width:670px}
  .home-capabilities{grid-template-columns:1fr;gap:45px}
  .home-capabilities-intro{position:static}
  .project-card{min-height:570px}
  .home-about{gap:50px}
}

@media(max-width:760px){
  .home-hero{align-items:flex-end;min-height:760px;padding:88px 17px 160px}
  .home-hero-media:after{background:linear-gradient(0deg,rgba(2,31,26,.98) 0%,rgba(2,31,26,.78) 57%,rgba(2,31,26,.2) 100%)}
  .home-hero-saigon{clip-path:polygon(0 0,56% 0,42% 48%,0 58%)}
  .home-hero-cangio{clip-path:polygon(56% 0,100% 0,100% 58%,42% 48%)}
  .home-hero-image img{height:58%;object-position:center top}
  .home-hero-content{width:100%}
  .home-hero h1{font-size:54px}
  .home-lead{font-size:13px;line-height:1.7}
  .home-actions{align-items:stretch;flex-direction:column}
  .home-button{width:100%;text-align:center}
  .home-hero-stats{left:17px;right:17px;bottom:24px}
  .home-hero-stats div{padding:14px 8px 0}
  .home-hero-stats strong{font-size:19px}
  .home-hero-stats span{font-size:8px;line-height:1.35}
  .home-section{padding:70px 15px;scroll-margin-top:90px}
  .home-section-heading{margin-bottom:28px}
  .home-section-heading h2,.home-capabilities-intro h2,.home-about-copy h2{font-size:39px}
  .home-section-heading>p,.home-capabilities-intro>p,.home-about-copy>p{font-size:12px}
  .purpose-grid{grid-template-columns:1fr}
  .purpose-grid article{min-height:245px;padding:25px}
  .purpose-grid h3{margin-top:48px}
  .home-capabilities{gap:35px}
  .capability-list article{grid-template-columns:46px 1fr;padding:21px 3px}
  .capability-list b{font-size:23px}
  .capability-list h3{font-size:20px}
  .project-grid{grid-template-columns:1fr}
  .project-card{min-height:540px;padding:20px;border-radius:18px}
  .project-card-copy{left:21px;right:21px;bottom:23px}
  .project-card-copy h3{font-size:47px}
  .home-about{grid-template-columns:1fr;padding:75px 17px;gap:42px}
  .home-about-mark{width:min(310px,88vw);margin:auto}
  .home-about-copy .home-actions{align-items:flex-start}
  .home-text-link{align-self:center}
  .home-footer{align-items:flex-start;flex-direction:column;padding:28px 17px}
  .home-footer nav{gap:15px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .project-card>img,.home-button,.project-card-copy strong span{transition:none}
}

/* Readability and contrast pass — 19/07/2026 */
.hub-home .project-card{color:#fff!important}
.hub-home .project-card-copy h3{color:#fff!important;text-shadow:0 3px 22px rgba(0,0,0,.58)}
.hub-home .project-card-copy small{color:#f1cd84}
.hub-home .project-card-copy p{color:rgba(255,255,255,.86);font-size:14px;line-height:1.72;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hub-home .project-card-copy strong{color:#fff;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hub-home .home-lead{font-size:17px}
.hub-home .home-section-heading>p,
.hub-home .home-capabilities-intro>p,
.hub-home .home-about-copy>p{font-size:16px;line-height:1.8}
.hub-home .purpose-grid p{font-size:14px;line-height:1.75}
.hub-home .capability-list p{font-size:14px;line-height:1.7}
.hub-home .home-footer span{font-size:11px}
.hub-home .home-footer a{font-size:12px}

@media(max-width:760px){
  .hub-home .home-lead{font-size:15px;line-height:1.75}
  .hub-home .home-section-heading>p,
  .hub-home .home-capabilities-intro>p,
  .hub-home .home-about-copy>p{font-size:15px;line-height:1.75}
  .hub-home .purpose-grid p,
  .hub-home .capability-list p,
  .hub-home .project-card-copy p{font-size:14px;line-height:1.72}
  .hub-home .project-card-copy strong{font-size:13px}
}