/* StartInVietnam brand refresh — derived from brand board supplied 2026-10-12. */
:root {
    --ink: #182B2A; --forest: #153D38; --teal: #128879; --teal-dark: #0E675D;
    --sand: #F5F1E8; --sunrise: #E9B45A; --soft: #F8F7F2;
    --line: #E1E7DF; --muted: #65746F;
}
body { font-family: Inter, system-ui, -apple-system, sans-serif; color:var(--ink); background:#fff; }
h1,h2,h3,h4,h5,h6,.brand-wordmark,.navbar-brand { font-family:Manrope,Inter,system-ui,sans-serif; }
h1,h2,h3 { letter-spacing:-.035em; }
a { color:var(--teal-dark); } a:hover { color:var(--forest); }
.py-lg-6 { padding-top:6rem!important; padding-bottom:6rem!important; }
.site-header { z-index:1030; background:#fff; }
.site-header .navbar { background:#fff; border-bottom:1px solid var(--line); }
.navbar-brand { letter-spacing:-.04em; color:var(--forest); }
.brand-wordmark { font-size:1.1rem; font-weight:800; letter-spacing:-.055em; }
.nav-link { font-size:.92rem; font-weight:600; color:#405550; }
.nav-link.active,.nav-link:hover { color:var(--teal-dark); }
.btn { font-weight:700; border-radius:.6rem; }
.btn-primary { --bs-btn-bg:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal-dark); --bs-btn-hover-border-color:var(--teal-dark); --bs-btn-active-bg:var(--forest); --bs-btn-active-border-color:var(--forest); }
.btn-outline-primary { --bs-btn-color:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal); --bs-btn-hover-border-color:var(--teal); }
.btn-primary:focus-visible, a:focus-visible { outline:3px solid var(--sunrise); outline-offset:3px; }
.hero { position:relative; overflow:hidden; background:linear-gradient(117deg, var(--sand) 0%, #faf9f5 47%, #fff 100%); }
.hero .container { position:relative; z-index:1; }
.hero-title { max-width:770px; font-size:clamp(2.95rem,4.8vw,5rem); line-height:1.115; color:var(--forest); letter-spacing:-.065em; }
.hero-title span { color:var(--teal); }
.hero-subtitle { color:#61746E; font-size:1.13rem; line-height:1.8; margin-top:1.3rem; }
.hero-note { font-size:.83rem; color:#577268; font-weight:600; }
.eyebrow { display:inline-flex; gap:.55rem; align-items:center; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-dark); }
.eyebrow-marker { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--sunrise); }
.hero-art { min-height:410px; border-radius:2rem; background:linear-gradient(145deg,#19574C 0%,#0B302D 82%); position:relative; overflow:hidden; box-shadow:0 28px 65px rgba(21,61,56,.18); }
.hero-art-mark { position:absolute; width:150px; height:auto; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-8deg); filter:drop-shadow(0 20px 15px rgba(0,0,0,.12)); }
.hero-art-orb { position:absolute; top:-92px; right:-55px; width:290px; height:290px; border-radius:50%; background:rgba(233,180,90,.18); filter:blur(2px); }
.hero-art-ring { position:absolute; bottom:-165px; left:-115px; width:390px; height:390px; border:42px solid rgba(215,243,230,.10); border-radius:50%; }
.hero-art-bottom { position:absolute; display:flex; justify-content:space-between; gap:2rem; left:26px; right:26px; bottom:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); color:#E8EDE6; font-size:.72rem; font-weight:800; letter-spacing:.13em; }
.brand-pathways { background:#fff; }
.brand-pathways h2 { color:var(--forest); }
.pathway-card { position:relative; border:1px solid var(--line); border-radius:1.3rem; background:#fff; padding:2rem; box-shadow:0 5px 22px rgba(21,61,56,.035); transition:transform .2s ease,box-shadow .2s ease; }
.pathway-card:hover { transform:translateY(-3px); box-shadow:0 15px 36px rgba(21,61,56,.07); }
.pathway-index { font-weight:800; font-size:.73rem; letter-spacing:.13em; color:var(--teal-dark); }
.pathway-icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:1.5rem 0; font-size:2rem; font-weight:700; color:var(--forest); background:#E6F1EB; border-radius:1rem; }
.pathway-card:nth-of-type(1) .pathway-icon { color:var(--forest); }
.pathway-card h3 { font-size:1.35rem; font-weight:800; color:var(--forest); }
.pathway-card p { color:#64766D; line-height:1.7; margin-bottom:0; }
.hero-card,.request-card,.area-card,.listing-card,.empty-state { border:1px solid var(--line); border-radius:1.1rem; background:#fff; }
.hero-card { box-shadow:0 18px 50px rgba(21,61,56,.08); }
.area-card,.listing-card { transition:.2s ease; box-shadow:0 5px 20px rgba(21,61,56,.035); }
.area-card:hover,.listing-card:hover { transform:translateY(-3px); border-color:#A7D6CE; box-shadow:0 15px 35px rgba(21,61,56,.09); }
.bg-soft { background:var(--soft); }
.article-container { max-width:900px; }
.article-content { font-size:1.08rem; line-height:1.78; }
.article-content h2 { margin-top:2.2rem; }
.article-content img { max-width:100%; height:auto; border-radius:.75rem; }
.site-footer { background:var(--forest); }
.footer-links li { margin:.5rem 0; }
.footer-links a { color:rgba(255,255,255,.7); text-decoration:none; }
.footer-links a:hover { color:#fff; }
.article-card { border:1px solid var(--line)!important; }
.card-title a { color:var(--ink); }
@media(max-width:991.98px) {
    .py-lg-6 { padding-top:4rem!important; padding-bottom:4rem!important; }
    .hero-art { min-height:340px; }
    .hero-art-mark { width:125px; }
}
@media(max-width:575.98px) {
    .hero-title { font-size:2.9rem; }
    .hero-subtitle { font-size:1.03rem; }
    .hero-art { min-height:300px; border-radius:1.3rem; }
    .brand-wordmark { font-size:1rem; }
    .pathway-card { padding:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { .pathway-card,.area-card,.listing-card { transition:none; } }

/* Responsive 16:9 cards, shared by home, guides, categories and sections. */
.article-card-image img { object-position:center 35%; }
.article-card-placeholder { background:linear-gradient(135deg,#E5F2EC,#F5F1E8); color:var(--forest); }
.article-card-placeholder span { font-size:clamp(2.5rem,4vw,4.5rem); font-weight:800; }
.article-card-title { line-height:1.4; }