:root {
  --ink: #07130e;
  --ink-soft: #10241b;
  --pine: #0d2b20;
  --green: #159866;
  --green-bright: #20b97d;
  --gold: #d7aa58;
  --gold-pale: #f3dba8;
  --cream: #f6f3ec;
  --paper: #fffcf7;
  --muted: #a8b8af;
  --line-dark: rgba(235, 250, 241, .17);
  --line-light: rgba(14, 41, 30, .12);
  --font-sans: Arial, Helvetica, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: #f5faf6; font-family: var(--font-sans); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
.layout-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; border-radius: 8px; padding: 10px 14px; background: var(--gold); color: var(--ink); font-weight: 800; transition: top .18s ease; }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgba(7, 19, 14, .74); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 40px)); height: 78px; margin: 0 auto; gap: 24px; }
.logo-button { padding: 0; border: 0; background: transparent; }
.logo-button img { width: 108px; height: 46px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav button, .text-button { display: inline-flex; gap: 8px; align-items: center; padding: 0; border: 0; background: transparent; color: rgba(248, 252, 249, .75); font-size: 13px; font-weight: 700; letter-spacing: .025em; transition: color .16s ease; }
.desktop-nav button:hover, .text-button:hover { color: var(--gold-pale); }
.header-cta, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 12px; padding: 13px 17px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 12px 28px rgba(18, 150, 102, .22); transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.header-cta { padding: 11px 14px; }
.primary-button:hover, .header-cta:hover { background: var(--green-bright); box-shadow: 0 16px 32px rgba(18, 150, 102, .32); transform: translateY(-2px); }
.primary-button:active, .header-cta:active { transform: scale(.97); }
.menu-trigger { display: none; padding: 8px; border: 0; background: transparent; color: white; }
.mobile-nav { display: none; }
.hero-section { position: relative; overflow: hidden; padding: 76px 0 0; background: linear-gradient(110deg, #07130e 12%, #0e2b1e 60%, #123523); }
.hero-glow { position: absolute; pointer-events: none; border-radius: 999px; filter: blur(8px); opacity: .42; }
.hero-glow-one { width: 450px; height: 450px; top: -220px; right: -60px; background: radial-gradient(circle, rgba(215, 170, 88, .38), transparent 68%); }
.hero-glow-two { width: 380px; height: 380px; bottom: 0; left: 24%; background: radial-gradient(circle, rgba(21, 152, 102, .32), transparent 68%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; min-height: 620px; padding-bottom: 72px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--gold-pale); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.eyebrow span { display: inline-block; width: 22px; height: 1px; background: currentColor; }
.dark-eyebrow { color: #297656; }
.hero-copy h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(2.75rem, 5vw, 4.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--gold-pale); font-family: var(--font-display); font-weight: 600; letter-spacing: -.05em; }
.hero-lead { max-width: 660px; margin-bottom: 34px; color: #cedbd2; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.hero-actions .primary-button { min-height: 52px; padding-inline: 23px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 42px; color: #c1d0c6; font-size: 12px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { color: var(--gold); }
.hero-visual { position: relative; justify-self: end; width: min(100%, 370px); }
.hero-image-wrap { position: relative; aspect-ratio: .69; overflow: hidden; border-radius: 190px 190px 16px 16px; border: 1px solid rgba(243, 219, 168, .4); }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, rgba(7,19,14,.75)); }
.hero-caption { position: absolute; bottom: 32px; left: -50px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; line-height: 1.45; }
.hero-caption p { margin: 0; }.caption-rule { width: 52px; height: 1px; background: var(--gold); }
.hero-stat { position: absolute; min-width: 155px; padding: 15px 16px; border: 1px solid rgba(245, 250, 246, .24); border-radius: 11px; background: rgba(9, 26, 18, .9); box-shadow: 0 20px 30px rgba(0,0,0,.2); backdrop-filter: blur(10px); }
.hero-stat span { display: block; margin-bottom: 4px; color: var(--gold-pale); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.hero-stat strong { color: white; font-size: 27px; line-height: 1; }.hero-stat small { font-size: 12px; }.hero-stat p { margin: 6px 0 0; color: #aec1b5; font-size: 10px; }.hero-stat-top { top: 110px; left: -85px; }.hero-stat-bottom { right: -72px; bottom: 80px; }
.hero-ticker { display: flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; border-top: 1px solid var(--line-dark); color: #cfddd4; font-size: 10px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }.hero-ticker i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.section-dark { background: var(--ink); }.section-cream { background: var(--cream); color: var(--ink); }.video-section { padding: 132px 0; }.video-layout { display: grid; grid-template-columns: .76fr 1.24fr; align-items: center; gap: 66px; }.section-intro h2, .center-heading h2, .work-header h2, .income-heading h2, .training-copy h2, .culture-title h2, .testimonial-heading h2, .faq-intro h2, .application-intro h2, .statement-grid h2 { margin-bottom: 20px; font-size: clamp(2.15rem, 3.7vw, 3.55rem); font-weight: 800; line-height: 1.13; letter-spacing: -.045em; }.section-intro p:not(.eyebrow), .work-header > p, .income-heading > p, .training-copy > p, .culture-title > p, .testimonial-heading > p, .faq-intro > p, .application-intro > p { color: var(--muted); line-height: 1.75; }.intro-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 25px; color: #d5e3d9 !important; font-size: 13px; }.intro-note svg { flex: 0 0 auto; color: var(--gold); }.video-frame { overflow: hidden; border: 1px solid rgba(243,219,168,.35); border-radius: 16px; aspect-ratio: 16/9; box-shadow: 24px 24px 0 rgba(21, 152, 102, .12); }.video-frame iframe { width: 100%; height: 100%; border: 0; }
.statement-section { padding: 124px 0; }.statement-grid { display: grid; grid-template-columns: 120px 1fr; gap: 32px; max-width: 1030px; }.statement-mark { color: var(--gold); font-family: var(--font-display); font-size: 160px; line-height: .8; }.statement-grid h2 { max-width: 780px; }.statement-grid > div > p { max-width: 800px; color: #4f6259; line-height: 1.8; }.statement-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }.statement-points span { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.5; }.statement-points svg { flex: 0 0 auto; color: var(--green); width: 17px; }
.fit-section { padding: 124px 0; background: #113225; }.center-heading { max-width: 680px; margin: 0 auto 48px; text-align: center; }.center-heading .eyebrow { justify-content: center; }.center-heading p:last-child { color: #bcd0c3; line-height: 1.75; }.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.fit-card { padding: 35px; border: 1px solid var(--line-dark); border-radius: 16px; }.fit-yes { background: rgba(35, 100, 73, .22); }.fit-no { background: rgba(255,255,255,.03); }.fit-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 25px; border-radius: 50%; }.fit-yes .fit-icon { background: var(--green); }.fit-no .fit-icon { background: rgba(215,170,88,.2); color: var(--gold-pale); }.fit-icon svg { width: 18px; }.fit-card h3 { margin-bottom: 20px; font-size: 20px; }.fit-card ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; color: #c4d5ca; font-size: 14px; line-height: 1.6; }.fit-card li { position: relative; padding-left: 19px; }.fit-card li::before { position: absolute; left: 0; content: "•"; color: var(--gold); }
.work-section { padding: 124px 0; }.work-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 48px; }.work-header h2 { max-width: 650px; margin-bottom: 0; }.work-header > p { max-width: 370px; margin: 0; color: #617168; }.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }.process-card { min-height: 206px; padding: 28px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); transition: background .16s ease; }.process-card:hover { background: #fffdf7; }.process-card > span { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .08em; }.process-card h3 { margin: 37px 0 10px; font-size: 18px; }.process-card p { margin: 0; color: #5c6b63; font-size: 13px; line-height: 1.7; }
.income-section { position: relative; overflow: hidden; padding: 124px 0; background: #091a12; }.income-backdrop { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent); }.income-content { position: relative; }.income-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 46px; }.income-heading h2 { max-width: 670px; margin-bottom: 0; }.income-heading > p { max-width: 380px; margin: 0; }.formula-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }.formula-card { min-height: 180px; padding: 28px; border: 1px solid var(--line-dark); border-radius: 13px; background: rgba(255,255,255,.035); }.formula-card span { display: block; margin-bottom: 20px; color: var(--gold-pale); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.formula-card strong { display: block; color: white; font-size: 20px; line-height: 1.35; }.formula-main { background: linear-gradient(135deg, #17794f, #0c4d34); border-color: rgba(255,255,255,.13); }.formula-main strong { max-width: 440px; font-size: 26px; }.formula-main i { color: var(--gold-pale); font-style: normal; }.formula-card p { margin: 15px 0 0; color: #b6cbbd; font-size: 12px; line-height: 1.65; }.commission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 16px 0 28px; background: var(--line-dark); border: 1px solid var(--line-dark); }.commission-grid article { padding: 18px 20px; background: #0d2519; }.commission-grid b { display: block; margin-bottom: 5px; color: #fff; font-size: 13px; }.commission-grid span { color: #b5c8bb; font-size: 11px; line-height: 1.5; }.income-table-wrap { overflow-x: auto; border: 1px solid rgba(243,219,168,.38); border-radius: 12px; background: rgba(255,255,255,.96); color: var(--ink); }.income-table-wrap:focus-visible { outline-color: var(--gold); }table { width: 100%; min-width: 950px; border-collapse: collapse; font-size: 12px; }caption { padding: 20px 22px; background: #e9f0eb; color: #174c35; text-align: left; font-size: 14px; font-weight: 800; }th { padding: 15px 14px; background: #f3f5f1; color: #355446; text-align: right; font-size: 10px; font-weight: 800; letter-spacing: .03em; }th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; box-shadow: 2px 0 5px rgba(6,16,11,.05); }th:first-child { background: #f3f5f1; }td { padding: 14px; border-top: 1px solid #dfe5df; color: #34443c; text-align: right; white-space: nowrap; }td:first-child { background: #fff; color: #173d2a; font-weight: 700; }.threshold-row td { background: #e4f4e9; color: #075f3c; font-weight: 800; }.threshold-row td:first-child { background: #e4f4e9; }.table-swipe { display: none; align-items: center; justify-content: center; gap: 5px; margin: 10px 0 0; color: #abc6b6; font-size: 11px; }.income-note { display: flex; gap: 11px; align-items: flex-start; max-width: 950px; margin: 25px auto 0; color: #bcd0c2; font-size: 12px; line-height: 1.7; }.income-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--gold); }.income-note p { margin: 0; }.income-note strong { color: #fff; }
.training-section { padding: 124px 0; }.training-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 80px; }.training-media { position: relative; }.training-media > img { width: 100%; aspect-ratio: 1.12; object-fit: cover; border-radius: 14px; }.media-label { position: absolute; right: -30px; bottom: -25px; display: flex; align-items: center; gap: 12px; padding: 16px 19px; background: var(--ink); color: #fff; font-size: 11px; line-height: 1.55; }.media-label svg { color: var(--gold); }.timeline { display: grid; gap: 19px; margin-top: 34px; }.timeline > div { display: grid; grid-template-columns: 36px 1fr; gap: 15px; }.timeline > div > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #d9eee0; color: var(--green); font-size: 10px; font-weight: 800; }.timeline article { padding-bottom: 19px; border-bottom: 1px solid var(--line-light); }.timeline h3 { margin-bottom: 7px; font-size: 16px; }.timeline p { margin: 0; color: #5d6c64; font-size: 13px; line-height: 1.65; }
.culture-section { padding: 124px 0; background: #123425; }.culture-title { max-width: 720px; }.culture-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 50px; }.culture-values article { min-height: 240px; padding: 25px; border: 1px solid var(--line-dark); border-radius: 13px; background: rgba(255,255,255,.035); }.culture-values svg { color: var(--gold); }.culture-values h3 { margin: 42px 0 10px; color: white; font-size: 18px; }.culture-values p { margin: 0; color: #b9ccbf; font-size: 12px; line-height: 1.7; }
.testimonial-section { padding: 124px 0; }.testimonial-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }.testimonial-heading h2 { max-width: 620px; margin-bottom: 0; }.testimonial-heading > p { max-width: 410px; margin: 0; color: #5f6f65; }.testimonial-list { display: grid; gap: 16px; }.testimonial-card { display: grid; grid-template-columns: 250px 1fr; min-height: 235px; overflow: hidden; border: 1px solid var(--line-light); border-radius: 14px; background: var(--paper); }.testimonial-photo { overflow: hidden; background: #dce9e0; }.testimonial-photo img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }.testimonial-copy { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 34px; }.quote-symbol { position: absolute; right: 30px; top: 10px; color: #dfb972; font-family: var(--font-display); font-size: 80px; line-height: 1; }.testimonial-copy blockquote { position: relative; z-index: 1; max-width: 670px; margin: 0; color: #30443a; font-family: var(--font-display); font-size: 21px; line-height: 1.45; }.testimonial-copy strong { display: block; color: #153d2b; font-size: 14px; }.testimonial-copy p { margin: 4px 0 0; color: var(--green); font-size: 12px; }
.faq-section { padding: 124px 0; background: #0b2016; }.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }.faq-intro { position: sticky; top: 110px; align-self: start; }.faq-intro .gold-text { margin-top: 28px; color: var(--gold-pale); }.accordion { border-top: 1px solid var(--line-dark); }.accordion article { border-bottom: 1px solid var(--line-dark); }.accordion button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border: 0; background: transparent; color: #fff; text-align: left; font-size: 15px; font-weight: 700; }.accordion button svg { flex: 0 0 auto; transition: transform .2s ease; }.accordion button[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--gold); }.answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }.answer > p { overflow: hidden; margin: 0; color: #b9ccbf; font-size: 13px; line-height: 1.72; }.answer-open { grid-template-rows: 1fr; }.answer-open > p { padding: 0 0 22px; }
.application-section { position: relative; overflow: hidden; padding: 124px 0; background: linear-gradient(135deg,#176747 0%,#0f3c29 58%,#092218 100%); }.application-noise { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(243,219,168,.28) 1px,transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(90deg,black,transparent 75%); }.application-grid { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; align-items: start; }.application-info { display: grid; gap: 13px; margin-top: 34px; color: #d1e2d5; font-size: 13px; }.application-info span { display: flex; align-items: center; gap: 9px; }.application-info svg { color: var(--gold); }.application-form { padding: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(6, 23, 15, .55); backdrop-filter: blur(10px); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.application-form label { display: grid; gap: 7px; color: #e7f1e9; font-size: 11px; font-weight: 700; }.application-form label > span { color: var(--gold-pale); }.application-form input, .application-form textarea, .application-form select { width: 100%; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; padding: 11px 12px; background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-weight: 500; outline: none; transition: border .16s ease, background .16s ease; }.application-form input::placeholder, .application-form textarea::placeholder { color: #96aca0; }.application-form select option { background: #173a2a; color: white; }.application-form input:focus, .application-form textarea:focus, .application-form select:focus { border-color: var(--gold); background: rgba(255,255,255,.09); }.form-full { margin-top: 16px; }.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }.consent { display: grid !important; grid-template-columns: 17px 18px 1fr; align-items: start; gap: 9px !important; margin-top: 20px; cursor: pointer; }.consent input { position: absolute; opacity: 0; }.consent > span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; color: transparent; }.consent input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--ink); }.consent p { margin: 0; color: #b8cbbd; font-size: 11px; font-weight: 500; line-height: 1.55; }.form-button { width: 100%; min-height: 51px; margin-top: 21px; }.form-footnote { margin: 13px 0 0; color: #95a99c; text-align: center; font-size: 10px; line-height: 1.5; }.site-footer { padding: 25px 0; border-top: 1px solid var(--line-dark); background: #06120c; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.footer-inner img { width: 90px; height: 38px; object-fit: contain; }.footer-inner p { margin: 0; color: #9caf9f; font-size: 11px; }.footer-inner button { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--gold-pale); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.footer-inner button svg { transform: rotate(180deg); }
.thanks-page { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 30px 20px; background: radial-gradient(circle at top right,#1d6e4b 0,transparent 37%), var(--ink); }.thanks-orbit { position: absolute; border: 1px solid rgba(243,219,168,.24); border-radius: 50%; }.thanks-orbit-one { width: 700px; height: 700px; top: -450px; left: -260px; }.thanks-orbit-two { width: 570px; height: 570px; bottom: -360px; right: -160px; }.thanks-card { position: relative; width: min(100%, 650px); padding: 58px 52px; border: 1px solid rgba(243,219,168,.32); border-radius: 18px; background: rgba(8,27,18,.87); box-shadow: 0 30px 80px rgba(0,0,0,.35); text-align: center; }.thanks-logo { width: 114px; height: 48px; margin: 0 auto 38px; object-fit: contain; }.thanks-icon { width: 44px; height: 44px; margin: 0 auto 18px; color: var(--green-bright); }.thanks-card h1 { margin: 0 auto 18px; max-width: 560px; font-size: clamp(2rem,4vw,3.2rem); line-height: 1.15; letter-spacing: -.04em; }.thanks-card > p:not(.eyebrow) { max-width: 540px; margin: 0 auto; color: #c3d2c8; line-height: 1.75; }.thanks-note { margin-top: 20px !important; color: var(--gold-pale) !important; font-size: 12px; }.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 33px; padding: 13px 18px; border: 1px solid rgba(243,219,168,.5); border-radius: 10px; color: var(--gold-pale); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-decoration: none; transition: background .16s ease, color .16s ease; }.secondary-button:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 900px) { .desktop-nav, .header-cta { display: none; }.menu-trigger { display: block; }.mobile-nav { display: grid; width: min(100%, calc(100% - 40px)); margin: 0 auto 15px; padding: 10px; border: 1px solid var(--line-dark); border-radius: 10px; background: #0f291c; }.mobile-nav button { padding: 12px; border: 0; background: transparent; color: #f3f7f4; text-align: left; font-size: 13px; font-weight: 700; }.mobile-nav button:last-child { margin-top: 5px; border-radius: 7px; background: var(--green); text-align: center; }.hero-section { padding-top: 38px; }.hero-grid, .video-layout, .training-grid, .faq-grid, .application-grid { grid-template-columns: 1fr; }.hero-grid { gap: 55px; min-height: auto; padding-bottom: 58px; }.hero-visual { justify-self: center; width: min(82%, 390px); }.hero-caption { left: -28px; }.hero-stat-top { left: -35px; }.hero-stat-bottom { right: -35px; }.video-layout, .training-grid, .faq-grid, .application-grid { gap: 45px; }.income-heading, .work-header, .testimonial-heading { align-items: flex-start; flex-direction: column; }.income-heading > p, .work-header > p, .testimonial-heading > p { max-width: 620px; }.formula-grid { grid-template-columns: 1fr; }.formula-card { min-height: 0; }.formula-main strong { font-size: 23px; }.culture-values { grid-template-columns: repeat(2,1fr); }.faq-intro { position: static; }.application-intro { max-width: 600px; } }
@media (max-width: 620px) { .layout-container, .header-inner { width: min(100% - 32px, 1180px); }.header-inner { height: 67px; }.logo-button img { width: 88px; }.hero-copy h1 { font-size: clamp(2.35rem, 11vw, 3.25rem); }.hero-lead { font-size: 14px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 16px; }.hero-actions .primary-button { width: 100%; }.hero-actions .text-button { justify-content: center; }.hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; font-size: 10px; }.hero-trust span:last-child { grid-column: 1/-1; }.hero-visual { width: min(83%, 315px); }.hero-stat { min-width: 130px; padding: 11px; }.hero-stat strong { font-size: 23px; }.hero-stat-top { top: 64px; left: -43px; }.hero-stat-bottom { right: -42px; bottom: 57px; }.hero-caption { bottom: 20px; left: -17px; font-size: 10px; }.caption-rule { width: 26px; }.hero-ticker { justify-content: flex-start; gap: 15px; overflow: hidden; padding: 0 16px; font-size: 8px; }.video-section, .statement-section, .fit-section, .work-section, .income-section, .training-section, .culture-section, .testimonial-section, .faq-section, .application-section { padding: 82px 0; }.section-intro h2, .center-heading h2, .work-header h2, .income-heading h2, .training-copy h2, .culture-title h2, .testimonial-heading h2, .faq-intro h2, .application-intro h2, .statement-grid h2 { font-size: 2rem; }.statement-grid { grid-template-columns: 48px 1fr; gap: 16px; }.statement-mark { font-size: 78px; }.statement-points, .fit-grid, .culture-values { grid-template-columns: 1fr; }.fit-card { padding: 26px; }.process-grid { grid-template-columns: 1fr; }.process-card { min-height: 0; }.process-card h3 { margin-top: 20px; }.commission-grid { grid-template-columns: 1fr; }.income-table-wrap { margin-inline: -16px; border-radius: 0; }.table-swipe { display: flex; }.income-note { font-size: 11px; }.training-media > img { aspect-ratio: 1.3; }.media-label { right: 0; bottom: -18px; font-size: 10px; }.testimonial-card { grid-template-columns: 1fr; }.testimonial-photo { height: 155px; }.testimonial-photo img { object-position: left 35%; }.testimonial-copy { min-height: 210px; padding: 26px; }.testimonial-copy blockquote { font-size: 18px; }.quote-symbol { right: 18px; top: 7px; font-size: 60px; }.application-form { padding: 20px 16px; }.form-grid { grid-template-columns: 1fr; gap: 14px; }.footer-inner { align-items: flex-start; flex-direction: column; }.footer-inner p { line-height: 1.55; }.thanks-card { padding: 40px 24px; }.thanks-logo { margin-bottom: 28px; } }
@media (prefers-reduced-motion: no-preference) { .hero-copy, .hero-visual { animation: rise .7s cubic-bezier(.23,1,.32,1) both; }.hero-visual { animation-delay: .1s; }.process-card, .culture-values article, .testimonial-card { transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; }.process-card:hover, .culture-values article:hover, .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(5,21,13,.1); } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Noli signature: a restrained gold growth path links identity across the final touchpoints. */
.logo-button img { width: 128px; height: 52px; }
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { position: absolute; width: 460px; height: 130px; top: -95px; left: 6%; border: 1px solid rgba(243,219,168,.2); border-radius: 50%; content: ""; transform: rotate(-9deg); }
.footer-inner { position: relative; }
.footer-inner img { width: 108px; height: 43px; }
@media (max-width: 620px) { .logo-button img { width: 96px; height: 44px; } }

/* Keep the application consent checkbox and its copy on a stable two-column row. */
.application-form .consent { display: flex !important; align-items: flex-start; gap: 10px !important; width: 100%; margin-top: 20px; cursor: pointer; }
.application-form .consent input { position: absolute; opacity: 0; }
.application-form .consent > span { display: grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; color: transparent; }
.application-form .consent input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.application-form .consent p { flex: 1 1 auto; min-width: 0; margin: 0; color: #b8cbbd; font-size: 11px; font-weight: 500; line-height: 1.55; }

/* Hero group photograph: preserve a genuine sense of team rather than cropping to one person. */
.hero-visual { width: min(100%, 500px); }
.hero-image-wrap { aspect-ratio: 1.12; border-radius: 22px 22px 18px 18px; }
.hero-image-wrap img { object-position: center; }
@media (max-width: 900px) { .hero-visual { width: min(100%, 500px); } }
@media (max-width: 620px) { .hero-visual { width: min(100%, 350px); }.hero-image-wrap { aspect-ratio: 1.08; } }

/* Keep the mark anchored to the upper-left across primary and confirmation screens. */
.thanks-card { padding-top: 82px; }
.thanks-logo { position: absolute; top: 25px; left: 28px; width: 104px; height: 44px; margin: 0; }
@media (max-width: 620px) { .thanks-card { padding-top: 76px; }.thanks-logo { top: 20px; left: 20px; width: 88px; height: 38px; } }

/* Typography and visual rhythm follow the verified Be Vietnam Pro reference. */
:root { --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.hero-copy h1 em { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.052em; }
.hero-copy-short { max-width: 920px; margin-inline: auto; text-align: center; }
.hero-copy-short .eyebrow, .hero-copy-short .hero-benefits, .hero-copy-short .hero-actions { justify-content: center; }
.hero-copy-short h1 { max-width: 820px; margin-inline: auto; font-size: clamp(3rem, 6.2vw, 5.55rem); letter-spacing: -.056em; line-height: .98; }
.hero-copy-short h1 em { color: var(--gold-pale); }
.hero-stack { gap: 34px; padding-bottom: 46px; }.hero-benefits { margin-bottom: 24px; }.hero-team-image { max-width: 1040px; }
.section-intro h2, .center-heading h2, .work-header h2, .income-heading h2, .training-copy h2, .culture-title h2, .testimonial-heading h2, .faq-intro h2, .application-intro h2, .statement-grid h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.035em; }

/* Product carousel with native touch scrolling and compact desktop controls. */
.product-carousel-head { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto 14px; color: #b9d0c1; font-size: 12px; }.product-carousel-head p { margin: 0; }.product-carousel-head div { display: flex; gap: 8px; }.product-carousel-head button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(243,219,168,.38); border-radius: 50%; background: transparent; color: var(--gold-pale); font-size: 18px; transition: color .16s ease, background .16s ease, transform .16s ease; }.product-carousel-head button:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.product-carousel { display: flex; gap: 16px; max-width: 1080px; margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255,255,255,.12); padding: 2px 2px 16px; }.product-carousel::-webkit-scrollbar { height: 7px; }.product-carousel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }.product-carousel figure { flex: 0 0 clamp(240px, 30vw, 325px); margin: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(243,219,168,.3); border-radius: 14px; background: #f5efe2; box-shadow: 0 16px 32px rgba(0,0,0,.16); }.product-carousel img { width: 100%; aspect-ratio: 1.5; object-fit: cover; transition: transform .42s cubic-bezier(.23,1,.32,1); }.product-carousel figure:hover img { transform: scale(1.055); }.products-link { display: inline-flex; align-items: center; gap: 8px; margin: 27px auto 0; color: var(--gold-pale); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-decoration: none; }.products-link:hover { color: white; }.products-section .layout-container { text-align: center; }

/* Personal authority section: restrained copy, strong portrait and candid support images. */
.bao-section { padding: 112px 0; background: #092116; }.bao-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 84px; align-items: center; }.bao-portrait { position: relative; max-width: 385px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(243,219,168,.38); border-radius: 180px 180px 18px 18px; background: #12261c; box-shadow: 22px 22px 0 rgba(21,152,102,.14); }.bao-portrait > img { width: 100%; aspect-ratio: .68; object-fit: cover; object-position: center top; }.bao-portrait > span { position: absolute; right: -15px; bottom: 28px; min-width: 115px; padding: 13px 14px; border: 1px solid rgba(243,219,168,.42); border-radius: 11px; background: rgba(7,19,14,.92); color: var(--gold-pale); font-size: 32px; font-weight: 800; line-height: .85; text-align: center; }.bao-portrait small { display: block; margin-top: 8px; color: #d2e0d5; font-size: 8px; letter-spacing: .08em; }.bao-copy { max-width: 620px; }.bao-copy h2 { margin-bottom: 8px; color: white; font-size: clamp(2.5rem,4.7vw,4.25rem); letter-spacing: -.05em; }.bao-role { margin-bottom: 20px !important; color: var(--gold-pale) !important; font-size: 16px; font-weight: 800; }.bao-copy > p:not(.eyebrow):not(.bao-role) { max-width: 570px; color: #c6d6cb; line-height: 1.8; }.bao-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }.bao-points span { padding: 12px; border-left: 2px solid var(--gold); background: rgba(255,255,255,.04); color: #e7f0e9; font-size: 11px; font-weight: 700; line-height: 1.55; }.bao-mini-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 440px; }.bao-mini-gallery img { width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: 10px; filter: saturate(.9); transition: transform .25s cubic-bezier(.23,1,.32,1), filter .25s ease; }.bao-mini-gallery img:hover { filter: saturate(1.15); transform: translateY(-4px); }
.sales-process-video { padding: 100px 0; }.process-video-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }.process-video-grid > div:first-child { max-width: 590px; }.process-video-grid h2 { max-width: 560px; margin-bottom: 16px; font-size: clamp(2rem,4vw,3.3rem); letter-spacing: -.045em; }.process-video-grid p:not(.eyebrow) { color: #54665d; line-height: 1.75; }.process-video-trigger { margin-top: 22px; }.process-video-frame { width: min(100%, 570px); grid-column: 1/-1; overflow: hidden; border: 1px solid var(--line-light); border-radius: 16px; background: #07130e; box-shadow: 18px 18px 0 rgba(21,152,102,.11); aspect-ratio: 16 / 9; animation: reveal-up .42s cubic-bezier(.23,1,.32,1) both; }.process-video-frame iframe { width: 100%; height: 100%; border: 0; }

/* Real work and team imagery: a varied, non-repetitive gallery. */
.environment-section { padding: 110px 0; background: #102f21; }.environment-heading { max-width: 640px; margin-bottom: 38px; }.environment-heading h2 { margin-bottom: 0; font-size: clamp(2rem,4vw,3.4rem); letter-spacing: -.045em; }.environment-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; }.environment-item { margin: 0; overflow: hidden; border-radius: 13px; background: #0b2016; }.environment-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.23,1,.32,1), filter .5s ease; }.environment-item:hover img { transform: scale(1.06); filter: saturate(1.12); }.environment-item.item-1 { grid-row: span 2; }.environment-item.item-4 { grid-column: span 2; }.environment-item.item-7 { grid-column: span 2; }

.process-video-poster { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border: 0; background: #0a2116; cursor: pointer; }.process-video-poster::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,17,10,.72), rgba(4,17,10,.06) 65%); content: ""; }.process-video-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.23,1,.32,1); }.process-video-poster:hover img { transform: scale(1.045); }.process-video-poster span { position: absolute; z-index: 1; right: 18px; bottom: 18px; left: 18px; display: inline-flex; width: fit-content; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(7,28,18,.8); color: white; font-size: 10px; font-weight: 800; letter-spacing: .06em; }.process-video-poster i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 9px; font-style: normal; }

/* Verified testimonial cards: real portrait, name, role and a concise source-faithful excerpt. */
.testimonial-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.testimonial-card { position: relative; display: flex; min-height: 270px; flex-direction: column; justify-content: space-between; margin: 0; overflow: hidden; border: 1px solid rgba(24,72,48,.18); border-radius: 18px; padding: 25px; background: linear-gradient(145deg, #083624, #09251b 62%, #062218); box-shadow: 0 16px 28px rgba(9,36,23,.1); }.testimonial-quote { color: var(--gold); font-family: Georgia, serif; font-size: 58px; font-weight: 800; line-height: .6; }.testimonial-card blockquote { margin: 17px 0 25px; color: #ebf2ec; font-size: 14px; font-style: italic; font-weight: 500; line-height: 1.74; }.testimonial-card footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(243,219,168,.22); padding-top: 15px; }.testimonial-card footer img { width: 52px; height: 52px; flex: 0 0 auto; border: 2px solid rgba(243,219,168,.62); border-radius: 50%; object-fit: cover; }.testimonial-card footer strong, .testimonial-card footer span { display: block; }.testimonial-card footer strong { color: #fff; font-size: 14px; }.testimonial-card footer span { margin-top: 3px; color: #b7d6c1; font-size: 12px; font-weight: 600; }.bao-grid-reframed { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }.bao-grid-reframed .bao-copy { grid-column: auto; }.bao-four-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 178px); gap: 12px; }.bao-four-gallery figure { margin: 0; overflow: hidden; border: 1px solid rgba(243,219,168,.25); border-radius: 14px; background: #071b11; }.bao-four-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.23,1,.32,1); }.bao-four-gallery figure:hover img { transform: scale(1.045); }.bao-four-gallery figure:nth-child(1) img { object-position: center 55%; }.bao-four-gallery figure:nth-child(2) img { object-position: center 48%; }.bao-four-gallery figure:nth-child(3) img { object-position: center; }.bao-four-gallery figure:nth-child(4) img { object-position: center 25%; }
@media (max-width: 900px) { .testimonial-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.bao-grid-reframed { grid-template-columns: 1fr; }.bao-four-gallery { max-width: 680px; } }
@media (max-width: 620px) { .testimonial-card-grid { grid-template-columns: 1fr; gap: 12px; }.testimonial-card { min-height: 0; padding: 21px; }.testimonial-card blockquote { font-size: 13px; }.bao-four-gallery { grid-template-rows: repeat(2, 148px); gap: 8px; } }

.bao-mini-gallery { grid-template-columns: 1.3fr .7fr; grid-template-rows: repeat(2, 104px); }.bao-mini-gallery figure { margin: 0; overflow: hidden; border-radius: 10px; }.bao-mini-gallery figure:first-child { grid-row: 1 / 3; }.bao-mini-gallery figure:nth-child(2) { grid-column: 2; grid-row: 1; }.bao-mini-gallery figure:nth-child(3) { grid-column: 2; grid-row: 2; }.bao-mini-gallery img { display: block; height: 100%; aspect-ratio: auto; }.bao-mini-gallery figure:first-child img { object-position: center; }.bao-mini-gallery figure:nth-child(2) img { object-position: center 38%; }.bao-mini-gallery figure:nth-child(3) img { object-position: center 26%; }
@media (max-width: 620px) { .bao-mini-gallery { grid-template-rows: repeat(2, 96px); } }

/* Compact upload control for the shortened recruitment form. */
.application-form-compact .form-grid { align-items: end; }.cv-input { grid-column: 1/-1; }.cv-input small { color: #9eb9aa; font-size: 10px; font-weight: 500; }.file-field { position: relative; display: flex; min-height: 48px; align-items: center; gap: 10px; overflow: hidden; border: 1px dashed rgba(243,219,168,.58); border-radius: 9px; padding: 0 14px; background: rgba(255,255,255,.045); color: var(--gold-pale); }.file-field input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; }.file-field b { overflow: hidden; color: #e4efe7; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* Motion: lightweight, tactile and disabled when the user prefers reduced movement. */
.primary-button { position: relative; overflow: hidden; }.primary-button::after { position: absolute; top: -80%; left: -35%; width: 22%; height: 260%; background: rgba(255,255,255,.23); content: ""; transform: rotate(20deg) translateX(-420%); transition: transform .48s cubic-bezier(.23,1,.32,1); }.primary-button:hover::after { transform: rotate(20deg) translateX(700%); }.hero-glow-one { animation: glow-drift 8s ease-in-out infinite alternate; }.hero-glow-two { animation: glow-drift 10s ease-in-out -2s infinite alternate-reverse; }.hero-copy-short { animation: reveal-up .62s cubic-bezier(.23,1,.32,1) both; }.hero-team-image { animation: image-enter .76s .1s cubic-bezier(.23,1,.32,1) both; }.environment-item, .proof-gallery img { animation: reveal-up .5s cubic-bezier(.23,1,.32,1) both; }.environment-item:nth-child(2), .proof-gallery img:nth-child(2) { animation-delay: .06s; }.environment-item:nth-child(3), .proof-gallery img:nth-child(3) { animation-delay: .12s; }.environment-item:nth-child(4), .proof-gallery img:nth-child(4) { animation-delay: .18s; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes image-enter { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes glow-drift { from { transform: translate3d(-14px,-8px,0) scale(.94); } to { transform: translate3d(18px,16px,0) scale(1.08); } }
@media (max-width: 900px) { .bao-grid, .process-video-grid { grid-template-columns: 1fr; gap: 42px; }.bao-portrait { margin-left: 0; }.environment-gallery { grid-auto-rows: 145px; }.process-video-frame { grid-column: auto; }.process-video-grid > div:first-child { max-width: 650px; } }
@media (max-width: 620px) { .hero-copy-short h1 { font-size: clamp(2.75rem,12vw,3.8rem); letter-spacing: -.06em; }.hero-team-image { width: 100%; }.product-carousel-head { padding: 0 2px; }.product-carousel { margin-right: -16px; padding-right: 16px; }.product-carousel figure { flex-basis: 245px; }.bao-section, .environment-section, .sales-process-video { padding: 78px 0; }.bao-portrait { max-width: 300px; margin: 0 auto; }.bao-copy { text-align: center; }.bao-copy .eyebrow { justify-content: center; }.bao-copy > p:not(.eyebrow):not(.bao-role) { margin-inline: auto; }.bao-points { grid-template-columns: 1fr; text-align: left; }.bao-mini-gallery { margin: 0 auto; }.process-video-grid { gap: 28px; }.environment-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 135px; gap: 8px; }.environment-item.item-1 { grid-row: span 2; }.environment-item.item-4, .environment-item.item-7 { grid-column: span 1; }.environment-item.item-7 { grid-column: span 2; }.cv-input { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Final visual balance: a compact two-column video block and uncropped testimonial images. */
.video-section { padding: 96px 0; }
.video-stack { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .62fr); align-items: center; gap: clamp(38px, 7vw, 86px); max-width: 980px; }
.video-intro { max-width: 555px; text-align: left; }
.video-intro .eyebrow { justify-content: flex-start; }
.video-intro h2 { font-size: clamp(2.15rem, 4vw, 3.4rem); }
.video-portrait { justify-self: end; width: min(100%, 330px); }
.video-portrait .video-frame { aspect-ratio: 9 / 16; border-radius: 23px; box-shadow: 16px 16px 0 rgba(21,152,102,.13); }
.proof-gallery { align-items: start; }
.proof-gallery img { height: auto; aspect-ratio: auto; object-fit: contain; object-position: top; background: #f8faf7; }
@media (max-width: 900px) { .video-stack { grid-template-columns: 1fr; gap: 42px; }.video-intro { margin: 0 auto; text-align: center; }.video-intro .eyebrow { justify-content: center; }.video-portrait { justify-self: center; } }
@media (max-width: 620px) { .video-section { padding: 76px 0; }.video-portrait { width: min(100%, 300px); }.proof-gallery { grid-template-columns: 1fr; gap: 14px; }.proof-gallery img { max-width: 440px; margin-inline: auto; } }

/* Conversion-first revision: a short, vertical Hero and visual proof without invented copy. */
.hero-vertical { padding-top: 58px; }
.hero-stack { position: relative; display: grid; gap: 38px; padding-bottom: 58px; }
.hero-copy-short { max-width: 720px; }
.hero-copy-short h1 { margin-bottom: 30px; font-family: var(--font-sans); font-size: clamp(2.8rem, 6.1vw, 5.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.hero-line { display: block; }.hero-line + .hero-line { margin-top: 8px; }.hero-line-brand { font-weight: 700; animation: hero-line-in .65s .05s cubic-bezier(.23,1,.32,1) both; }.hero-line-highlight { margin-top: 13px !important; color: var(--gold-pale); font-weight: 600; animation: hero-line-in .65s .17s cubic-bezier(.23,1,.32,1) both; }.hero-line-role { margin-top: 13px !important; font-size: .72em; font-weight: 600; letter-spacing: -.025em; animation: hero-line-in .65s .29s cubic-bezier(.23,1,.32,1) both; }.hero-copy-short h1 em { font-family: inherit; font-style: normal; }.hero-animate-benefits { animation: hero-line-in .6s .42s cubic-bezier(.23,1,.32,1) both; }.hero-animate-cta { animation: hero-line-in .6s .52s cubic-bezier(.23,1,.32,1) both; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 28px; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(243,219,168,.28); border-radius: 999px; background: rgba(255,255,255,.04); color: #e7efe9; font-size: 12px; font-weight: 700; }
.hero-benefits svg { color: var(--gold); }
.hero-team-image { width: 100%; max-width: 1080px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(243,219,168,.36); border-radius: 20px; box-shadow: 0 22px 56px rgba(0,0,0,.23); }
.hero-team-image img { width: 100%; aspect-ratio: 2.15; object-fit: cover; object-position: center; }
.video-section { padding: 100px 0; }
.video-stack { display: grid; justify-items: center; gap: 30px; }
.video-intro { max-width: 610px; text-align: center; }
.video-intro .eyebrow { justify-content: center; }
.video-intro h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.video-portrait { width: min(100%, 390px); }
.video-portrait .video-frame { aspect-ratio: 9 / 16; box-shadow: 16px 16px 0 rgba(21,152,102,.12); }
.proof-gallery-section { padding: 96px 0; }
.proof-heading { margin-bottom: 30px; text-align: center; }
.proof-heading .eyebrow { justify-content: center; }
.proof-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; }
.proof-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proof-gallery img { width: 100%; aspect-ratio: .9; object-fit: cover; object-position: top; border: 1px solid var(--line-light); border-radius: 12px; background: #e8eee8; box-shadow: 0 14px 30px rgba(7,19,14,.08); }
.products-section { padding: 108px 0; background: #0c2419; }
.products-heading { max-width: 650px; margin: 0 auto 38px; text-align: center; }.products-heading .eyebrow { justify-content: center; }.products-heading h2 { margin-bottom: 15px; font-size: clamp(2rem,4vw,3.35rem); letter-spacing: -.045em; }.products-heading p:last-child { margin-bottom: 0; color: #b6cdbd; line-height: 1.7; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.product-grid figure { margin: 0; overflow: hidden; border: 1px solid rgba(243,219,168,.3); border-radius: 16px; background: #fbf3e2; }.product-grid img { width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; }
@media (max-width: 620px) { .hero-vertical { padding-top: 38px; }.hero-stack { gap: 30px; padding-bottom: 40px; }.hero-copy-short h1 { font-size: clamp(2.9rem, 13vw, 4.1rem); }.hero-benefits { display: grid; grid-template-columns: 1fr; gap: 9px; }.hero-benefits span { justify-content: center; }.hero-team-image { border-radius: 12px; }.video-section, .proof-gallery-section, .products-section { padding: 74px 0; }.video-portrait { width: min(100%, 340px); }.proof-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }.proof-gallery img { border-radius: 8px; }.product-grid { grid-template-columns: 1fr; gap: 12px; }.product-grid figure { border-radius: 12px; } }
/* Header safe area: protects the brand mark and CTA in preview and production widths. */
html, body { overflow-x: hidden; }
.site-shell { overflow-x: clip; }
.site-header { width: 100% !important; overflow: hidden; }
.header-inner { width: 100% !important; max-width: 1280px !important; min-width: 0; padding-inline: clamp(22px, 3vw, 42px) !important; gap: clamp(14px, 2vw, 28px) !important; }
.logo-button { flex: 0 0 auto; margin-left: 3px; }
.logo-button img { width: 116px !important; height: 48px !important; }
.desktop-nav { min-width: 0; gap: clamp(18px, 2.2vw, 30px) !important; }
.header-cta { flex: 0 0 auto; margin-right: 3px; white-space: nowrap; }
.hero-team-image { margin-top: 14px !important; }
@media (max-width: 900px) { .header-inner { padding-inline: 20px !important; }.logo-button img { width: 102px !important; height: 44px !important; } }
@media (max-width: 620px) { .header-inner { padding-inline: 16px !important; }.logo-button { margin-left: 0; }.logo-button img { width: 92px !important; height: 40px !important; }.hero-team-image { margin-top: 8px !important; } }
/* Environment gallery: an editorial photo wall gives the team room to be seen. */
.environment-section { padding: 122px 0; background: #102f21; }
.environment-heading { max-width: 720px; margin-bottom: 42px; }.environment-heading h2 { font-size: clamp(2.2rem,4.4vw,4rem); letter-spacing: -.055em; }
.environment-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 126px); gap: 11px; }
.environment-item { margin: 0; overflow: hidden; border: 1px solid rgba(243,219,168,.13); border-radius: 13px; background: #0a2116; }.environment-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.23,1,.32,1), filter .6s ease; }.environment-item:hover img { transform: scale(1.055); filter: saturate(1.12) contrast(1.03); }
.environment-item.item-1 { grid-column: 1 / 4; grid-row: 1 / 4; }.environment-item.item-2 { grid-column: 4 / 5; grid-row: 1 / 2; }.environment-item.item-3 { grid-column: 5 / 7; grid-row: 1 / 2; }.environment-item.item-4 { grid-column: 4 / 7; grid-row: 2 / 3; }.environment-item.item-5 { grid-column: 4 / 5; grid-row: 3 / 4; }.environment-item.item-6 { grid-column: 5 / 7; grid-row: 3 / 4; }.environment-item.item-7 { grid-column: 1 / 3; grid-row: 4 / 6; }.environment-item.item-8 { grid-column: 3 / 4; grid-row: 4 / 5; }.environment-item.item-9 { grid-column: 4 / 7; grid-row: 4 / 6; }.environment-item.item-10 { grid-column: 3 / 4; grid-row: 5 / 6; }.environment-item.item-11 { grid-column: 1 / 4; grid-row: 6 / 7; }.environment-item.item-12 { grid-column: 4 / 7; grid-row: 6 / 7; }
@media (max-width: 900px) { .environment-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 150px); }.environment-item.item-1 { grid-column: 1 / 3; grid-row: 1 / 3; }.environment-item.item-2 { grid-column: 3; grid-row: 1; }.environment-item.item-3 { grid-column: 3; grid-row: 2; }.environment-item.item-4 { grid-column: 1 / 4; grid-row: 3; }.environment-item.item-5 { grid-column: 1; grid-row: 4; }.environment-item.item-6 { grid-column: 2 / 4; grid-row: 4; }.environment-item.item-7 { grid-column: 1 / 3; grid-row: 5 / 7; }.environment-item.item-8 { grid-column: 3; grid-row: 5; }.environment-item.item-9 { grid-column: 3; grid-row: 6; }.environment-item.item-10, .environment-item.item-11, .environment-item.item-12 { display: none; } }
@media (max-width: 620px) { .environment-section { padding: 82px 0; }.environment-heading { margin-bottom: 25px; }.environment-gallery { display: flex; grid-template-columns: none; grid-template-rows: none; gap: 12px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }.environment-item, .environment-item.item-1, .environment-item.item-2, .environment-item.item-3, .environment-item.item-4, .environment-item.item-5, .environment-item.item-6, .environment-item.item-7, .environment-item.item-8, .environment-item.item-9, .environment-item.item-10, .environment-item.item-11, .environment-item.item-12 { display: block; flex: 0 0 78vw; height: 320px; grid-column: auto; grid-row: auto; scroll-snap-align: start; }.environment-item img { object-fit: cover; } }

/* Supporting imagery extends the culture story and creates a visual runway to the form. */
.culture-photo-row { display: grid; grid-template-columns: 1.12fr .88fr 1fr; gap: 12px; margin-top: 18px; }.culture-photo-row figure { height: 205px; margin: 0; overflow: hidden; border: 1px solid rgba(243,219,168,.18); border-radius: 12px; }.culture-photo-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.23,1,.32,1); }.culture-photo-row figure:hover img { transform: scale(1.045); }
.closing-gallery { overflow: hidden; padding: 0; background: #0c2419; }.closing-gallery-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; max-width: 1600px; margin: 0 auto; }.closing-gallery figure { height: 260px; margin: 0; overflow: hidden; background: #07130e; }.closing-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.23,1,.32,1), filter .65s ease; }.closing-gallery figure:hover img { transform: scale(1.06); filter: saturate(1.12); }
@media (max-width: 620px) { .culture-photo-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.culture-photo-row figure { height: 135px; }.culture-photo-row figure:first-child { grid-column: 1 / -1; height: 205px; }.closing-gallery-track { display: flex; gap: 8px; padding: 8px 0 8px 16px; overflow-x: auto; scroll-snap-type: x mandatory; }.closing-gallery figure { flex: 0 0 70vw; height: 230px; scroll-snap-align: start; }.closing-gallery-track::after { flex: 0 0 8px; content: ""; } }

/* Work story: one real team image anchors three concise stages of the job. */
.work-section { padding: 118px 0; }
.work-story-header { max-width: 760px; margin-bottom: 42px; }
.work-story-header h2 { margin-bottom: 16px; color: #15271e; font-size: clamp(2.25rem, 4.4vw, 4rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
.work-story-header > p:last-child { max-width: 610px; margin-bottom: 0; color: #637168; font-size: 16px; line-height: 1.75; }
.work-story { display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 18px; background: #0b2a1c; box-shadow: 0 22px 45px rgba(18,49,32,.11); }
.work-story-photo { position: relative; min-height: 590px; margin: 0; overflow: hidden; background: #082116; }
.work-story-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.23,1,.32,1); }
.work-story:hover .work-story-photo > img { transform: scale(1.045); }
.work-story-photo::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,15,9,.78), transparent 58%); content: ""; }
.work-story-photo figcaption { position: absolute; z-index: 1; right: 34px; bottom: 31px; left: 34px; }
.work-story-photo figcaption span { display: inline-block; margin-bottom: 10px; color: #ebc979; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.work-story-photo figcaption strong { display: block; max-width: 430px; color: #fff; font-size: clamp(1.35rem,2.25vw,1.95rem); letter-spacing: -.03em; line-height: 1.25; }
.work-story-steps { display: grid; align-content: center; padding: 22px 44px; background: #edf2ec; }
.work-story-steps article { display: grid; grid-template-columns: 52px 1fr; gap: 17px; padding: 29px 0; border-bottom: 1px solid rgba(22,59,40,.14); }
.work-story-steps article:last-child { border-bottom: 0; }.work-story-steps > article > span { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.work-story-steps h3 { margin: 0 0 7px; color: #173d2b; font-size: 18px; letter-spacing: -.02em; }.work-story-steps p { margin: 0; color: #617168; font-size: 13px; line-height: 1.65; }
@media (max-width: 820px) { .work-story { grid-template-columns: 1fr; }.work-story-photo { min-height: 400px; }.work-story-steps { padding: 15px 30px; } }
@media (max-width: 620px) { .work-section { padding: 78px 0; }.work-story-header { margin-bottom: 28px; }.work-story-header h2 { font-size: 2.32rem; }.work-story-header > p:last-child { font-size: 14px; }.work-story { border-radius: 13px; }.work-story-photo { min-height: 320px; }.work-story-photo figcaption { right: 21px; bottom: 21px; left: 21px; }.work-story-photo figcaption strong { font-size: 1.36rem; }.work-story-steps { padding: 7px 20px; }.work-story-steps article { grid-template-columns: 40px 1fr; gap: 12px; padding: 23px 0; } }

@keyframes hero-line-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* Final Hero and CTA system: strong recruitment signal without dense letterforms. */
.header-cta, .primary-button { background: linear-gradient(116deg, #ff9b32 0%, #dd5a16 42%, #25120d 100%) !important; box-shadow: 0 13px 28px rgba(154,58,14,.3); }.header-cta:hover, .primary-button:hover { background: linear-gradient(116deg, #ffb04d 0%, #e96a21 42%, #32130b 100%) !important; box-shadow: 0 18px 35px rgba(154,58,14,.42); }.hero-line-highlight em { display: inline-block; background: linear-gradient(100deg, #ffb04d 0%, #e2691c 46%, #30150c 105%); background-clip: text; -webkit-background-clip: text; color: transparent !important; text-shadow: 0 1px 0 rgba(255,220,140,.12); }

/* Image-first authority gallery: preserve every supplied image without cropping a person or context. */
.bao-four-gallery { grid-template-rows: repeat(2, minmax(170px, auto)); }.bao-four-gallery figure { display: grid; min-height: 170px; place-items: center; background: #071b11; }.bao-four-gallery img { display: block; width: 100%; height: 100%; object-fit: contain !important; object-position: center !important; background: #071b11; }
@media (max-width: 620px) { .bao-four-gallery { grid-template-rows: repeat(2, minmax(138px, auto)); }.bao-four-gallery figure { min-height: 138px; } }

/* Floating callout for the downloadable job description. */
.floating-job-description { position: fixed; z-index: 45; top: 43%; left: 0; display: flex; width: 226px; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.18); border-left: 0; border-radius: 0 13px 13px 0; padding: 12px 16px 12px 13px; background: linear-gradient(118deg, #f08a1b 0%, #9b4414 47%, #25130e 100%); color: #fff; box-shadow: 0 18px 34px rgba(0,0,0,.27); font-size: 11px; font-weight: 600; line-height: 1.34; text-decoration: none; transform: translateX(-8px); transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; animation: jd-float 2.8s ease-in-out infinite; }.floating-job-description svg { flex: 0 0 auto; }.floating-job-description strong { display: block; font-size: 11px; letter-spacing: .02em; }.floating-job-description:hover { color: #fff; box-shadow: 0 22px 42px rgba(0,0,0,.38); transform: translateX(0); animation-play-state: paused; }
@keyframes jd-float { 0%,100% { transform: translateX(-8px) translateY(0); } 50% { transform: translateX(-2px) translateY(-7px); } }
@media (max-width: 620px) { .floating-job-description { top: auto; right: 12px; bottom: 14px; left: auto; width: auto; max-width: calc(100% - 24px); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 10px 13px; transform: none; font-size: 10px; }.floating-job-description strong { font-size: 10px; } }

/* Late-stage responsive corrections: square VSL, usable consent row and uncropped supplied photography. */
.video-portrait { width: min(100%, 430px); }.video-portrait .video-frame { aspect-ratio: 1 / 1; }
.application-form .consent { display: grid; grid-template-columns: 18px 24px minmax(0, 1fr); align-items: start; column-gap: 9px; }.application-form .consent > input { width: 17px; height: 17px; margin: 2px 0 0; }.application-form .consent > span { width: 22px; height: 22px; margin: 0; }.application-form .consent > p { min-width: 0; margin: 0; }
.hero-team-image { display: grid; place-items: center; background: #061a10; }.hero-team-image img { height: auto; aspect-ratio: auto; object-fit: contain; }
.product-carousel figure, .environment-item, .culture-photo-row figure, .closing-gallery figure, .training-media, .work-story-photo { display: grid; place-items: center; background: #082116; }.product-carousel img, .environment-item img, .culture-photo-row img, .closing-gallery img, .training-media img, .work-story-photo > img { object-fit: contain !important; object-position: center !important; }
.product-carousel figure:hover img, .environment-item:hover img, .culture-photo-row figure:hover img, .closing-gallery figure:hover img, .work-story:hover .work-story-photo > img { transform: translateY(-3px) !important; }
@media (max-width: 620px) { .video-portrait { width: min(100%, 345px); }.application-form .consent { grid-template-columns: 18px 22px minmax(0, 1fr); column-gap: 7px; }.floating-job-description { right: auto; bottom: 76px; left: 0; max-width: 225px; border-left: 0; border-radius: 0 12px 12px 0; } }

.product-carousel figcaption { width: 100%; padding: 10px 13px 11px; border-top: 1px solid rgba(243,219,168,.2); background: #0b2a1c; color: #f6e1a7; font-size: 12px; font-weight: 700; letter-spacing: .035em; text-align: left; }

/* Hero repair: the role stays as one intentional line; reduced vertical spacing reveals the team image sooner. */
.hero-vertical { padding-top: 42px; }.hero-stack { gap: 23px; padding-bottom: 36px; }.hero-copy-short { width: 100%; max-width: 1080px; }.hero-copy-short h1 { max-width: 1080px; margin: 0 auto 21px; font-size: clamp(2.7rem, 5.2vw, 4.8rem); line-height: 1.02; }.hero-line + .hero-line { margin-top: 5px; }.hero-line-highlight, .hero-line-role { margin-top: 8px !important; }.hero-line-role { font-size: .68em; white-space: nowrap; letter-spacing: -.04em; }.hero-benefits { margin-bottom: 21px; }.hero-team-image { max-width: 1000px; margin-top: 4px !important; }
@media (max-width: 620px) { .hero-vertical { padding-top: 31px; }.hero-stack { gap: 22px; padding-bottom: 29px; }.hero-copy-short h1 { max-width: 100%; margin-bottom: 20px; font-size: clamp(2.58rem, 11.2vw, 3.2rem); line-height: 1.05; }.hero-line + .hero-line { margin-top: 7px; }.hero-line-highlight, .hero-line-role { margin-top: 8px !important; }.hero-line-role { font-size: .54em; letter-spacing: -.045em; white-space: nowrap; }.hero-benefits { margin-bottom: 20px; }.hero-team-image { max-width: 100%; margin-top: 2px !important; } }

/* Luminous blue-green direction: clear foreground contrast, no dark text stop inside the Hero keyword. */
.site-header { background: rgba(5, 75, 78, .82); }.hero-section { background: radial-gradient(circle at 84% 5%, rgba(115, 228, 189, .45), transparent 31%), linear-gradient(120deg, #075c68 0%, #107b79 48%, #218fa2 100%); }.section-dark, .products-section { background: linear-gradient(130deg, #086d70 0%, #118b7f 52%, #237f9a 100%); }.bao-section, .environment-section { background: linear-gradient(135deg, #0b6e73 0%, #108f85 52%, #166b88 100%); }.fit-section, .culture-section, .faq-section { background: linear-gradient(135deg, #0d7272 0%, #138e82 58%, #20788c 100%); }.income-section { background: linear-gradient(135deg, #0a6770 0%, #0d827a 55%, #186d87 100%); }.site-footer { background: #07545c; }
.hero-line-highlight em { background: linear-gradient(100deg, #ffe195 0%, #ffbd4e 42%, #ff8e32 78%, #ef6f25 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffaf43 !important; text-shadow: none; }

/* Preserve supplied photos: connected editorial masonry with no forced crop, a soft radius and a subtle frame. */
.environment-gallery { display: block; columns: 3; column-gap: 14px; }.environment-item, .environment-item.item-1, .environment-item.item-2, .environment-item.item-3, .environment-item.item-4, .environment-item.item-5, .environment-item.item-6, .environment-item.item-7, .environment-item.item-8, .environment-item.item-9, .environment-item.item-10, .environment-item.item-11, .environment-item.item-12 { display: block; height: auto; min-height: 0; margin: 0 0 14px; overflow: hidden; break-inside: avoid; border: 1px solid rgba(239, 255, 250, .46); border-radius: 15px; background: rgba(255,255,255,.08); box-shadow: 0 12px 25px rgba(2,50,59,.16); }.environment-item img { width: 100%; height: auto; object-fit: fill !important; object-position: center !important; }.environment-item:hover img { transform: none !important; filter: none; }
.bao-four-gallery { grid-template-rows: none; align-items: start; }.bao-four-gallery figure { min-height: 0; border-color: rgba(239,255,250,.45); border-radius: 15px; box-shadow: 0 10px 22px rgba(2,50,59,.16); }.bao-four-gallery img { width: 100%; height: auto; object-fit: fill !important; }
.culture-photo-row { align-items: start; }.culture-photo-row figure, .closing-gallery figure { height: auto; border: 1px solid rgba(239,255,250,.42); border-radius: 15px; background: rgba(255,255,255,.08); box-shadow: 0 10px 22px rgba(2,50,59,.14); }.culture-photo-row img, .closing-gallery img { width: 100%; height: auto; object-fit: fill !important; }.closing-gallery { padding: 18px 0; background: linear-gradient(130deg, #0a6a6d, #137f82, #1e7790); }.closing-gallery-track { align-items: start; gap: 12px; padding-inline: 12px; }
.training-media { display: block; overflow: visible; background: transparent; }.training-media > img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill !important; border: 1px solid rgba(13,93,90,.28); border-radius: 15px; box-shadow: 0 14px 30px rgba(8,79,74,.13); }
.testimonial-card footer img { width: 72px; height: 72px; border-radius: 12px; object-fit: fill; object-position: center; }
@media (max-width: 900px) { .environment-gallery { columns: 2; } }
@media (max-width: 620px) { .environment-gallery { columns: 1; column-gap: 0; }.environment-item, .environment-item.item-1, .environment-item.item-2, .environment-item.item-3, .environment-item.item-4, .environment-item.item-5, .environment-item.item-6, .environment-item.item-7, .environment-item.item-8, .environment-item.item-9, .environment-item.item-10, .environment-item.item-11, .environment-item.item-12 { width: 100%; margin-bottom: 11px; }.bao-four-gallery { gap: 10px; }.culture-photo-row { grid-template-columns: 1fr; gap: 11px; }.culture-photo-row figure:first-child { grid-column: auto; height: auto; }.closing-gallery-track { display: grid; grid-template-columns: 1fr; padding-inline: 16px; overflow: visible; }.closing-gallery figure { height: auto; }.testimonial-card footer img { width: 64px; height: 64px; } }

/* Final green palette and image treatment confirmed by Bảo. */
:root { --font-sans: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif; }
.site-header { background: rgba(8, 77, 43, .84); }.hero-section { background: radial-gradient(circle at 84% 3%, rgba(186, 244, 158, .30), transparent 28%), linear-gradient(122deg, #0b5c32 0%, #15794a 46%, #48a56a 100%); }.hero-glow-one { background: radial-gradient(circle, rgba(235, 255, 151, .30), transparent 68%); }.hero-glow-two { background: radial-gradient(circle, rgba(73, 209, 125, .30), transparent 68%); }
.section-dark, .products-section { background: linear-gradient(133deg, #0b6938 0%, #198451 52%, #49a76d 100%); }.bao-section, .environment-section { background: linear-gradient(133deg, #0b643a 0%, #167d4a 54%, #43a86d 100%); }.fit-section, .culture-section, .faq-section { background: linear-gradient(132deg, #0d6c3f 0%, #188451 58%, #50ac73 100%); }.income-section { background: linear-gradient(130deg, #0b6238 0%, #117944 55%, #42a466 100%); }.site-footer { background: #0b5b34; }.testimonial-card { background: linear-gradient(135deg, #0d7043 0%, #126e44 58%, #0c5a39 100%); box-shadow: 0 16px 28px rgba(5,73,36,.16); }
.hero-line-highlight em { background: linear-gradient(100deg, #ffe9a6 0%, #ffc158 38%, #ff9a34 70%, #ef7621 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffaf43 !important; }
.environment-item img, .bao-four-gallery img, .culture-photo-row img, .closing-gallery img, .training-media > img { object-fit: contain !important; object-position: center !important; }

/* Dark green baseline restored: only low-contrast gradients add depth, never a blue or bright-green redesign. */
.site-header { background: rgba(7, 19, 14, .82); }.hero-section { background: radial-gradient(circle at 88% 4%, rgba(50, 169, 92, .22), transparent 29%), linear-gradient(118deg, #07130e 7%, #0b2518 58%, #123523 100%); }.hero-glow-one { background: radial-gradient(circle, rgba(215,170,88,.28), transparent 68%); }.hero-glow-two { background: radial-gradient(circle, rgba(21,152,102,.23), transparent 68%); }.section-dark, .products-section { background: linear-gradient(132deg, #07130e 0%, #0a2317 58%, #103622 100%); }.bao-section, .environment-section { background: linear-gradient(132deg, #092116 0%, #0d2c1c 55%, #123a25 100%); }.fit-section, .culture-section, .faq-section { background: linear-gradient(132deg, #113225 0%, #123d2a 60%, #16442e 100%); }.income-section { background: linear-gradient(132deg, #091a12 0%, #0b2618 56%, #103521 100%); }.site-footer { background: #06120c; }.testimonial-card { background: linear-gradient(140deg, #083624 0%, #09271c 60%, #062218 100%); }

/* Bảo gallery: each photograph owns its height, so a landscape image is never padded inside a portrait row. */
.bao-four-gallery { display: block; columns: 2; column-gap: 14px; }.bao-four-gallery figure { display: block; width: 100%; min-height: 0; margin: 0 0 14px; break-inside: avoid; }.bao-four-gallery img { width: 100%; height: auto; object-fit: contain !important; }
@media (max-width: 620px) { .bao-four-gallery { columns: 1; column-gap: 0; }.bao-four-gallery figure { margin-bottom: 11px; } }

/* Hero watermark lives in the background and can never sit over readable content. */
body { overflow-x: hidden; }.hero-stack, .hero-ticker { position: relative; z-index: 2; }.hero-watermark { position: absolute; z-index: 0; width: min(540px, 46vw); height: auto; right: clamp(20px, 7vw, 130px); bottom: -174px; opacity: .055; pointer-events: none; user-select: none; filter: grayscale(1) contrast(.9); }.hero-line-highlight em { display: inline-block; background: none; -webkit-text-fill-color: #ff9a31; color: #ff9a31 !important; text-shadow: 0 1px 0 rgba(255,239,185,.2); }

/* Orange highlight has a fully opaque gradient; the watermark is isolated underneath, so Vietnamese accents remain clean. */
.hero-line-highlight em { background: linear-gradient(100deg, #ffe4a0 0%, #ffc451 37%, #ff9828 69%, #ef6f1d 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffad38 !important; text-shadow: none; }

/* Portrait cards show a complete head-and-neck framing instead of a tiny square crop. */
.testimonial-card footer { align-items: center; }.testimonial-card footer img { width: 76px; height: 91px; flex: 0 0 76px; border: 1px solid rgba(245,219,157,.78); border-radius: 12px; background: #eff5ef; object-fit: fill !important; object-position: center; }.bao-copy h2 { font-family: "Arial Black", Arial, Helvetica, sans-serif; font-size: clamp(2.45rem, 4.3vw, 4.45rem); font-weight: 900; letter-spacing: -.06em; line-height: .98; }

/* Avoid horizontal clipping on medium-size desktop and tablet widths. */
@media (max-width: 1080px) { .desktop-nav { gap: 15px; }.desktop-nav button { font-size: 12px; }.header-inner { gap: 16px; }.hero-copy-short h1 { max-width: calc(100vw - 48px); }.hero-line-role { font-size: clamp(1.6rem, 5.1vw, 3.7rem); letter-spacing: -.05em; white-space: normal; }.hero-benefits { max-width: calc(100vw - 48px); margin-inline: auto; } }
@media (max-width: 960px) { .desktop-nav, .header-cta { display: none; }.menu-trigger { display: block; }.hero-watermark { width: 420px; right: -50px; bottom: -120px; opacity: .045; } }
@media (max-width: 620px) { .hero-watermark { width: 310px; right: -90px; bottom: -72px; opacity: .04; }.testimonial-card footer img { width: 68px; height: 81px; flex-basis: 68px; }.bao-copy h2 { font-size: clamp(2.35rem, 11vw, 3.4rem); } }

/* The Bảo profile copy carries the same visual weight as its four-photo gallery. */
.bao-grid-reframed { grid-template-columns: minmax(360px, .96fr) minmax(0, 1.04fr); gap: clamp(42px, 5.3vw, 84px); }.bao-copy { max-width: 700px; }.bao-copy .eyebrow { margin-bottom: 25px; font-size: 13px; letter-spacing: .16em; }.bao-copy h2 { margin-bottom: 15px; font-size: clamp(3.35rem, 4.7vw, 5.25rem); letter-spacing: -.066em; line-height: .96; }.bao-role { margin-bottom: 28px !important; font-size: clamp(1.05rem, 1.55vw, 1.35rem); letter-spacing: -.018em; }.bao-copy > p:not(.eyebrow):not(.bao-role) { max-width: 650px; margin-bottom: 0; color: #d8e6dc; font-size: clamp(1rem, 1.28vw, 1.2rem); line-height: 1.78; }.bao-points { gap: 13px; margin-top: 37px; }.bao-points span { padding: 15px 14px; font-size: 12px; line-height: 1.55; }
@media (max-width: 900px) { .bao-grid-reframed { grid-template-columns: 1fr; }.bao-copy { max-width: 720px; } }
@media (max-width: 620px) { .bao-copy .eyebrow { margin-bottom: 18px; }.bao-copy h2 { margin-bottom: 11px; font-size: clamp(2.55rem, 11.4vw, 3.5rem); }.bao-role { margin-bottom: 18px !important; font-size: 1.04rem; }.bao-copy > p:not(.eyebrow):not(.bao-role) { font-size: 1rem; }.bao-points { margin-top: 28px; } }

/* Sales-process video: balanced text and media columns instead of a narrow left stack. */
.sales-process-video .process-video-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 7vw, 108px); }.sales-process-video .process-video-grid > div:first-child { max-width: 500px; }.sales-process-video .process-video-grid h2 { max-width: 500px; font-size: clamp(2.35rem, 3.7vw, 4rem); line-height: 1.1; }.sales-process-video .process-video-frame { width: 100%; max-width: 680px; grid-column: auto; justify-self: end; aspect-ratio: 16 / 9; border-radius: 18px; }.sales-process-video .process-video-poster, .sales-process-video .process-video-poster img { width: 100%; height: 100%; }
@media (max-width: 900px) { .sales-process-video .process-video-grid { grid-template-columns: 1fr; gap: 32px; }.sales-process-video .process-video-grid > div:first-child, .sales-process-video .process-video-grid h2 { max-width: 650px; }.sales-process-video .process-video-frame { justify-self: start; max-width: 680px; } }

/* The fixed JD CTA stays at the lower-left edge and no longer obscures mid-page copy. */
@media (min-width: 621px) { .floating-job-description { top: auto; bottom: 24px; } }

/* Vietnamese diacritics need a safe band above the highlighted line: no glyph can enter the brand-line layer. */
.hero-copy-short h1 { line-height: 1.11; }.hero-line { position: relative; isolation: isolate; overflow: visible; }.hero-line-brand { z-index: 1; padding-bottom: .055em; }.hero-line-highlight { z-index: 2; margin-top: 16px !important; padding-top: .15em; line-height: 1.08; }.hero-line-highlight em { position: relative; z-index: 2; }.hero-line-role { margin-top: 15px !important; line-height: 1.08; }
@media (max-width: 620px) { .hero-copy-short h1 { line-height: 1.12; }.hero-line-highlight { margin-top: 14px !important; padding-top: .14em; }.hero-line-role { margin-top: 13px !important; } }

/* Keep the compact Hero rhythm: only the highlight paint layer is raised above the preceding line. */
.hero-copy-short h1 { line-height: 1.02; }.hero-line { isolation: auto; overflow: visible; }.hero-line-brand { z-index: 1; padding-bottom: 0; }.hero-line-highlight { z-index: 5; margin-top: 8px !important; padding-top: 0; line-height: 1.02; transform: translateZ(0); }.hero-line-highlight em { z-index: 5; }.hero-line-role { margin-top: 8px !important; line-height: 1.02; }
@media (max-width: 620px) { .hero-copy-short h1 { line-height: 1.05; }.hero-line-highlight { margin-top: 8px !important; padding-top: 0; line-height: 1.05; }.hero-line-role { margin-top: 8px !important; line-height: 1.05; } }

/* Preserve every visual measurement; expand only the highlighted glyph paint box to keep the “ể” hook visible. */
.hero-line-highlight em { display: inline-block; overflow: visible; padding-top: .10em; margin-top: -.10em; line-height: 1.12; }

/* Approved watermark placement: centered in the Hero background and isolated beneath all readable content. */
.hero-watermark { top: -34px; right: auto; bottom: auto; left: 50%; z-index: 0; width: min(930px, 68vw); transform: translateX(-50%); opacity: .06; filter: grayscale(1) contrast(.9); }
@media (max-width: 620px) { .hero-watermark { top: 24px; width: min(390px, 96vw); opacity: .05; } }

/* Compact Zalo contact icon above the existing downloadable JD CTA. */
.floating-contact-actions { position: fixed; z-index: 45; bottom: 24px; left: 0; display: grid; justify-items: start; gap: 9px; pointer-events: none; }.floating-contact-actions > a { pointer-events: auto; }.floating-contact-actions .floating-job-description { position: relative; top: auto; right: auto; bottom: auto; left: auto; }.floating-zalo { display: grid; width: 52px; height: 52px; margin-left: 13px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: #0878ed; box-shadow: 0 12px 24px rgba(0,66,142,.32); transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s ease; animation: zalo-icon-float 2.4s cubic-bezier(.23,1,.32,1) infinite; }.floating-zalo img { display: block; width: 100%; height: 100%; object-fit: cover; }.floating-zalo:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 28px rgba(0,66,142,.43); animation-play-state: paused; }.floating-zalo:active { transform: scale(.95); }
@keyframes zalo-icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bao-section { content-visibility: visible; contain: none; }.bao-four-gallery figure { content-visibility: visible; contain: none; }
@media (max-width: 620px) { .floating-contact-actions { bottom: 76px; gap: 7px; }.floating-contact-actions .floating-job-description { right: auto; bottom: auto; left: auto; max-width: 225px; }.floating-zalo { width: 46px; height: 46px; margin-left: 10px; border-radius: 13px; } }
@media (prefers-reduced-motion: reduce) { .floating-zalo { animation: none; } }

/* Footer contact and legal information supplied by Noli Sales. */
.site-footer { padding: 44px 0 16px; border-top: 1px solid rgba(241, 209, 118, .22); background: #0a4329; }.site-footer::before { display: none; }.footer-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); gap: clamp(42px, 7vw, 92px); max-width: 1020px; }.footer-contact h2, .footer-legal h2 { margin: 0 0 18px; color: #fff; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }.footer-contact > a { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 11px; margin: 0 0 12px; color: #dbeee0; font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: color .16s ease; }.footer-contact > a:hover { color: #ffd06b; }.footer-contact > a svg, .footer-address > svg, .footer-legal-item > svg { flex: 0 0 auto; color: #7be5a5; }.footer-address { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: start; gap: 11px; margin-top: 18px; color: #dbeee0; }.footer-address > svg { width: 19px; margin-top: 3px; }.footer-address p, .footer-legal-item p { margin: 0 0 4px; color: #9fc7aa; font-size: 12px; line-height: 1.35; }.footer-address strong { display: block; margin-bottom: 11px; color: #f1faf3; font-size: 15px; font-weight: 500; line-height: 1.42; }.footer-hours { margin: 17px 0 0; color: #a9c9b1; font-size: 13px; }.footer-legal-item { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: start; gap: 11px; margin-bottom: 17px; }.footer-legal-item > svg { width: 19px; margin-top: 2px; }.footer-legal-item strong { display: block; color: #fff; font-size: 15px; line-height: 1.35; }.footer-legal-item small { display: block; margin-top: 2px; color: #a9c9b1; font-size: 12px; }.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }.footer-bottom p { margin: 0; color: #a9c9b1; font-size: 11px; }.footer-bottom button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #ffe59d; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.footer-bottom button svg { transform: rotate(180deg); }
@media (max-width: 720px) { .site-footer { padding: 46px 0 18px; }.footer-contact-grid { grid-template-columns: 1fr; gap: 40px; }.footer-contact h2, .footer-legal h2 { margin-bottom: 21px; font-size: 21px; }.footer-contact > a { gap: 11px; font-size: 16px; }.footer-address strong { font-size: 16px; }.footer-bottom { align-items: flex-start; flex-direction: column; margin-top: 34px; }.footer-bottom button { padding: 7px 0; } }

/* Gold brand mark in the pinned Header and a restrained attention cue after the user starts scrolling. */
.logo-button img { filter: sepia(1) saturate(1.8) hue-rotate(352deg) brightness(1.38) contrast(.94); }.site-header-scrolled .header-cta { animation: header-cta-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite; }.site-header-scrolled .header-cta:hover { animation-play-state: paused; }
@keyframes header-cta-pulse { 0%,100% { transform: translateY(0); box-shadow: 0 12px 28px rgba(18,150,102,.22); } 50% { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(255,139,32,.34); } }
@media (prefers-reduced-motion: reduce) { .site-header-scrolled .header-cta { animation: none; } }

/* A photo cluster is preloaded before it approaches the viewport, then enters as one light, GPU-friendly motion. */
@media (prefers-reduced-motion: no-preference) { .photo-cluster-ready .bao-four-gallery, .photo-cluster-ready .environment-gallery, .photo-cluster-ready .culture-photo-row, .photo-cluster-ready .closing-gallery-track { animation: photo-cluster-in .36s cubic-bezier(.23,1,.32,1) both; } }
@keyframes photo-cluster-in { from { opacity: .32; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Map is intentionally placed directly before the final Noli identity footer. */
.location-map-section { padding: 58px 0 42px; background: linear-gradient(132deg, #0a2b1b, #0d3a24); }.location-map-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(28px, 5vw, 62px); max-width: 1080px; }.location-map-copy h2 { margin: 0 0 13px; color: #fff; font-size: clamp(1.75rem, 2.8vw, 2.8rem); line-height: 1.12; }.location-map-copy > p:last-child { margin: 0; color: #c5dbcb; font-size: 14px; line-height: 1.6; }.location-map-frame { overflow: hidden; border: 1px solid rgba(255,255,255,.36); border-radius: 16px; background: #e9eee9; box-shadow: 0 16px 34px rgba(0,0,0,.22); }.location-map-frame iframe { display: block; width: 100%; min-height: 270px; border: 0; }
.footer-brand-tail { margin-top: 30px; padding: 34px 0 30px; border-top: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, #0c5a35, #10492f); text-align: center; }.footer-brand-tail img { width: min(132px, 40vw); height: auto; margin: 0 auto 17px; filter: brightness(0) invert(1); }.footer-brand-tail p { max-width: 680px; margin: 0 auto 18px; color: #e6f5e9; font-size: clamp(.98rem, 1.3vw, 1.1rem); line-height: 1.6; }.footer-brand-tail strong { display: block; color: #88f0ad; font-size: 12px; letter-spacing: .15em; }.footer-socials { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }.footer-socials span, .footer-socials a { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }.footer-socials a { text-decoration: none; transition: transform .16s ease, background .16s ease; }.footer-socials a:hover { transform: translateY(-2px); background: rgba(255,255,255,.22); }
@media (max-width: 820px) { .location-map-section { padding: 50px 0 34px; }.location-map-grid { grid-template-columns: 1fr; gap: 25px; }.location-map-frame iframe { min-height: 245px; }.footer-brand-tail { margin-top: 26px; padding: 34px 0 27px; }.footer-brand-tail p { font-size: .98rem; }.footer-socials { gap: 11px; }.footer-socials span, .footer-socials a { width: 40px; height: 40px; } }