:root {
  --navy: #1E3557; --navy-dark: #152641; --royal: #4A7BB5;
  --gold: #D4AF37; --gold-lt: #F0D98C; --white: #FDFBF6;
  --off-white: #FAF7F0; --gray-50: #F4EFE4; --gray-100: #E9E1D0;
  --gray-300: #A89F8D; --gray-600: #5A5648; --gray-800: #2B2A24;
  --green: #2D7D46; --radius: 8px;
  --shadow: 0 4px 24px rgba(30,53,87,0.10);
  --shadow-lg: 0 12px 48px rgba(30,53,87,0.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--gray-800);background:#FDFBF6;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.2}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-size:1.25rem;font-family:'Inter',sans-serif;font-weight:600}
p{color:var(--gray-600);line-height:1.75}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}.section-sm{padding:64px 0}
.eyebrow{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-header h2{color:var(--navy)}
.section-header{text-align:center;max-width:640px;margin:0 auto 56px}
.section-header p{margin-top:16px;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-weight:600;font-size:0.95rem;transition:all 0.2s ease;cursor:pointer;border:none;font-family:'Inter',sans-serif}
.btn-primary{background:linear-gradient(180deg,#F5D76E 0%,#D4AF37 50%,#C09B2D 100%);color:var(--navy-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 2px 8px rgba(212,175,55,0.35)}
.btn-primary:hover{background:linear-gradient(180deg,#FFE894 0%,#E5C14E 50%,#D4AF37 100%);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 4px 16px rgba(212,175,55,0.5)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.6)}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:var(--white)}
.btn-navy{background:linear-gradient(180deg,#24405F 0%,#1E3557 55%,#152641 100%);color:var(--white)}
.btn-navy:hover{background:linear-gradient(180deg,#2A4A75 0%,#24405F 55%,#1E3557 100%);transform:translateY(-1px);box-shadow:var(--shadow)}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(100deg,#152641 0%,#1E3557 55%,#2E4467 80%,#6E5827 100%);border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-mark{width:36px;height:36px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.9rem;color:var(--navy-dark);font-family:'Inter',sans-serif}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1}
.nav-logo-text strong{font-size:0.95rem;font-weight:700;color:var(--white);font-family:'Inter',sans-serif}
.nav-logo-text span{font-size:0.65rem;color:var(--gold);letter-spacing:0.02em;font-weight:500;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 14px;color:rgba(255,255,255,0.8);font-size:0.9rem;font-weight:500;border-radius:6px;transition:all 0.2s}
.nav-links a:hover{color:var(--white);background:rgba(255,255,255,0.08)}
.nav-cta{display:flex;align-items:center;gap:8px}

.nav-phone{color:var(--gold);font-weight:600;font-size:0.9rem}
.nav-phone:hover{color:var(--gold-lt)}
.cta-banner{background:linear-gradient(150deg,#0F1D33 0%,#1E3557 35%,#2A4A75 62%,#9A7A33 100%);padding:80px 0;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:600px;height:300px;border-radius:50%;background:rgba(206,157,88,0.08)}
.cta-banner h2{color:var(--white);margin-bottom:16px;position:relative}
.cta-banner p{color:rgba(255,255,255,0.7);margin-bottom:36px;font-size:1.05rem;position:relative}
.cta-banner .btn-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}
.footer{background:linear-gradient(160deg,#1E3557 0%,#152641 45%,#2E2817 85%,#4A3D1D 100%);padding:64px 0 32px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;flex-wrap:wrap;gap:16px}
.footer-bottom p{color:rgba(255,255,255,0.4);font-size:0.82rem}
.footer-legal{display:flex;gap:24px}
.footer-legal a{color:rgba(255,255,255,0.4);font-size:0.82rem;transition:color 0.2s}
.footer-legal a:hover{color:rgba(255,255,255,0.7)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 2fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-brand p{color:rgba(255,255,255,0.55);font-size:0.88rem;margin-top:16px;max-width:260px}
.footer-col h4{color:var(--gold);font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:16px;font-family:'Inter',sans-serif}
.footer-col a{display:block;color:rgba(255,255,255,0.6);font-size:0.88rem;margin-bottom:10px;transition:color 0.2s}
.footer-col a:hover{color:var(--white)}
@media(max-width:1024px){.nav-links{display:none}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}

.nav-lang{display:inline-flex;align-items:center;padding:3px;gap:2px;background:rgba(21,38,65,0.55);border:1.5px solid #D4AF37;border-radius:100px;cursor:pointer;box-shadow:0 0 12px rgba(206,157,88,0.25),inset 0 1px 2px rgba(0,0,0,0.3);transition:box-shadow 0.25s}
.nav-lang:hover{box-shadow:0 0 20px rgba(206,157,88,0.45),inset 0 1px 2px rgba(0,0,0,0.3)}
.lang-seg{padding:5px 13px;border-radius:100px;font-size:0.78rem;font-weight:700;letter-spacing:0.06em;color:rgba(253,251,246,0.65);transition:all 0.3s ease;font-family:'Inter',sans-serif}
.lang-seg.active{background:linear-gradient(180deg,#F5D76E 0%,#D4AF37 50%,#C09B2D 100%);color:var(--navy-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 2px 6px rgba(206,157,88,0.45)}

.page-hero h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.page-hero h1 span{background:linear-gradient(180deg,#FFF3C8 0%,#FCDE7A 22%,#F5C842 45%,#D9A72E 65%,#B8860B 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:100% 100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 6px 14px rgba(200,155,42,0.35));}
.page-hero h1 em{font-style:normal;font-family:'Playfair Display',serif;background:linear-gradient(180deg,#FFF3C8 0%,#FCDE7A 22%,#F5C842 45%,#D9A72E 65%,#B8860B 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 6px 14px rgba(200,155,42,0.35));
}
@media(prefers-reduced-motion:reduce){.page-hero h1 span{animation:none}}

.footer-credit{text-align:right;margin-top:16px}
.footer-credit p{color:rgba(255,255,255,0.35);font-size:0.78rem}
.footer-credit a{color:var(--gold-lt);text-decoration:none;transition:color 0.2s}
.footer-credit a:hover{color:var(--gold);text-decoration:underline}




h2 em{font-style:normal;font-family:'Playfair Display',serif;background:linear-gradient(180deg,#FFF3C8 0%,#FCDE7A 22%,#F5C842 45%,#D9A72E 65%,#B8860B 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px rgba(160,120,20,0.3));}

h2 em.em-bright{background:linear-gradient(180deg,#FFF3C8 0%,#FCDE7A 22%,#F5C842 45%,#D9A72E 65%,#B8860B 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25));}



.ticker{position:fixed;top:0;left:0;right:0;z-index:101;background:linear-gradient(180deg,#F0D070 0%,#D4AF37 55%,#C49E2E 100%);color:var(--navy-dark);overflow:hidden;height:34px;line-height:34px}
.ticker-track{display:flex;flex-wrap:nowrap;width:max-content;white-space:nowrap;will-change:transform;animation:ticker-scroll 35s linear infinite}
.ticker-track span{flex:0 0 auto;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;padding-right:48px}
@keyframes ticker-scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
.nav{top:34px}


/* ═══ MOBILE NAV — hamburger + slide-in panel ═══ */
.nav-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer;color:var(--white);z-index:200;margin-left:auto}
.nav-toggle svg{width:28px;height:28px;display:block}
.mobile-nav{display:none !important;visibility:hidden;position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100vh;background:linear-gradient(180deg,#152641 0%,#1E3557 100%);z-index:150;transition:right 0.3s ease;padding:80px 24px 24px;overflow-y:auto;box-shadow:-8px 0 32px rgba(0,0,0,0.3)}
.mobile-nav.open{right:0}
.mobile-nav a{display:block;padding:14px 12px;color:var(--white);font-size:1.05rem;font-weight:500;border-radius:8px;margin-bottom:4px;text-decoration:none}
.mobile-nav a.active{color:var(--gold)}
.mobile-nav a:hover{background:rgba(255,255,255,0.08)}
.mobile-nav .m-cta{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1)}
.mobile-nav .m-cta .btn{width:100%;justify-content:center;margin-bottom:10px}
.mobile-nav-backdrop{display:none !important;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:140}
.mobile-nav-backdrop.open{display:block !important}
.mobile-nav .m-lang{margin-top:16px;display:flex;justify-content:center}

/* ═══ RESPONSIVE — mobile / tablet ═══ */
@media(max-width:1024px){
  .nav-toggle{display:flex !important;align-items:center}
  .mobile-nav{display:block !important;visibility:visible}
  .nav-cta > .nav-phone,.nav-cta > .btn,.nav-cta > .nav-lang,.nav-cta a.btn,.nav-cta a.nav-phone,.nav-cta button.nav-lang{display:none !important}
  .nav-inner{gap:12px}
  /* Compact logo on mobile so it fits */
  .nav-logo-text strong{font-size:1rem}
  .nav-logo-text span{font-size:0.7rem}
}
@media(max-width:768px){
  /* Ticker: smaller font */
  .ticker{height:30px;line-height:30px}
  .ticker-track span{font-size:0.7rem;padding-right:32px}
  .nav{top:30px}
  /* Photo hero on mobile: full-width text, narrower photo focal on faces */
  .page-hero{padding:110px 0 60px !important;min-height:auto !important}
  .page-hero-text{max-width:100% !important}
  .page-hero h1{font-size:2.4rem !important}
  .page-hero p{font-size:1rem !important}
  /* Nav logo — show tagline on mobile at reduced size */
  .nav-logo-text span{display:block;font-size:0.55rem;letter-spacing:0.01em;line-height:1.1}
  .nav-logo-text strong{font-size:1rem}
  /* Cards / grids that need to stack (backup in case per-page rules miss) */
  .services-grid,.pillars-grid,.why-grid,.about-grid,.about-story-grid,.values-grid,.office-grid,.contact-grid{grid-template-columns:1fr !important;gap:32px !important}
  .team-grid{grid-template-columns:1fr !important;max-width:360px !important;margin:0 auto !important}
  .process-grid{grid-template-columns:1fr !important;gap:36px !important}
  .process-grid::before{display:none !important}
  /* Sections: reduce padding */
  section{padding:60px 0 !important}
  .container{padding-left:20px;padding-right:20px}
  /* Buttons should be full-width on mobile CTA rows */
  .btn-actions{flex-direction:column;gap:12px}
  .btn-actions .btn{width:100%;justify-content:center}
  /* Testimonials: single card visible */
  .testimonial-card{min-width:calc(100vw - 60px) !important}
  /* Why stats: full-width, no borders between */
  .why-stat{padding:16px 0 !important}
  .why-stat strong{font-size:1.4rem !important}
  /* Footer: single column */
  .footer-grid{grid-template-columns:1fr !important;gap:32px !important}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .footer-legal{justify-content:center;flex-wrap:wrap}
}
@media(max-width:480px){
  .page-hero h1{font-size:2rem !important}
  h2{font-size:1.6rem !important}
  .nav-logo-img{width:40px;height:40px;border-radius:14px;object-fit:cover}
}

/* Prevent horizontal scroll site-wide on mobile */
html,body{overflow-x:hidden;max-width:100vw}

/* Client Portal — highlighted style */
.nav-links a.nav-portal{color:var(--gold);border:1px solid rgba(212,175,55,0.4);padding:8px 16px;border-radius:6px;transition:all 0.2s}
.nav-links a.nav-portal:hover{background:rgba(212,175,55,0.12);border-color:var(--gold)}
.mobile-nav a.nav-portal{color:var(--gold);border:1px solid rgba(212,175,55,0.4);text-align:center;margin-top:8px}

.footer-logo-big{width:160px;max-width:100%;height:auto;display:block;border-radius:24px}

/* ── Nav Vietnamese-friendly: prevent wrap on labels/phone/button ── */
.nav-links a{white-space:nowrap;padding:8px 10px}
.nav-links{gap:2px}
.nav-phone{white-space:nowrap}
.nav-cta .btn{white-space:nowrap}
@media(max-width:1300px) and (min-width:769px){.nav-logo-text span{display:none}}

/* ═══ Buttons — blue with smooth radiant gold ═══ */
.btn-navy{background:linear-gradient(135deg,rgba(240,217,140,0.35) 0%,rgba(212,175,55,0.15) 30%,transparent 55%),linear-gradient(180deg,#2A4467 0%,#1E3557 55%,#152641 100%);color:var(--white);border:1.5px solid rgba(212,175,55,0.75);box-shadow:inset 0 1px 0 rgba(255,232,148,0.4),inset 0 -1px 0 rgba(184,134,11,0.3),0 3px 12px rgba(212,175,55,0.25),0 2px 6px rgba(21,38,65,0.3);text-shadow:0 1px 2px rgba(0,0,0,0.4)}
.btn-navy:hover{background:linear-gradient(135deg,rgba(255,232,148,0.55) 0%,rgba(240,217,140,0.28) 35%,rgba(212,175,55,0.08) 60%),linear-gradient(180deg,#34557E 0%,#2A4467 55%,#1E3557 100%);border-color:rgba(255,232,148,1);box-shadow:inset 0 1px 0 rgba(255,232,148,0.55),inset 0 -1px 0 rgba(184,134,11,0.4),0 10px 32px rgba(212,175,55,0.45),0 4px 14px rgba(21,38,65,0.4);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(212,175,55,0.55);transition:all 0.25s ease}
.btn-outline:hover{background:rgba(212,175,55,0.10);border-color:rgba(240,217,140,0.9);color:var(--gold-lt);box-shadow:0 0 20px rgba(212,175,55,0.25)}