/* Baseline styling for the Away Digital VN careers homepage.
   Not pixel-perfect to Figma (exact colors/spacing/fonts still pending
   Figma re-export — see docs/superpowers/plans/FOLLOWUP-figma-assets.md).
   This pass exists to make the built structure legible and presentable. */

:root {
	--adv-black: #0f0f0f;
	--adv-white: #ffffff;
	--adv-gray-light: #f4f2ef;
	--adv-gray: #6b6b6b;
	--adv-gray-line: #2a2a2a;
	--adv-border: #e2ded7;
	--adv-max-width: 1320px;
	--adv-gap: 0;
	/* Body/UI font. Default is the VI font (Google Sans Flex); EN overrides
	   both tokens to Basis Grotesque Pro under html[lang="en"] (see below). */
	--adv-font: "Google Sans Flex", "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--adv-font-heading: "Google Sans Flex", "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--adv-font);
	color: var(--adv-black);
	background: var(--adv-white);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }

.container {
	max-width: var(--adv-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* On desktop, drop the container's horizontal padding so content uses the full 1320
   width instead of 1272. The 24px padding stays below this width to keep a gutter on
   tablet/mobile. (The hero <h1> is absolutely positioned and gets its own matching
   override right after the .hero h1 rule below — it can't live here because the base
   .hero h1 rule comes later in the file and would otherwise win on source order.) */
@media (min-width: 1320px) {
	.container {
		padding: 0;
	}
}

/* ------------------------- Header ------------------------- */

.site-header {
	background: #eee;
	border-bottom: 1px solid var(--adv-border);
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.site-logo { margin: 5px 0; }
.site-logo img { height: 50px; width: auto; }

.primary-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.primary-nav a {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #222;
	transition: opacity 0.15s ease;
}

.primary-nav a:hover { opacity: 0.6; }

.primary-nav a.is-active {
	position: relative;
}

.primary-nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: currentColor;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 21;
}

.menu-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #222;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
	.menu-toggle {
		display: flex;
	}

	.primary-nav {
		position: fixed;
		inset: 0;
		top: 91px;
		background: #eee;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
		z-index: 20;
		overflow-y: auto;
	}

	.primary-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-nav ul {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 32px;
		min-height: 100%;
		padding: 48px 24px;
	}

	.primary-nav a {
		font-size: 24px;
	}

	body.menu-is-open {
		overflow: hidden;
	}
}

/* ------------------------- CTA links ------------------------- */

/* Canonical CTA type — matches the Figma "Heading/H6/CAP" token (14px / 1.4 / 400 /
   uppercase, no underline). Shared by every text-link CTA; color + spacing set per-section. */
.cta {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	font-family: var(--adv-font);
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	margin-top: 24px;
}

.cta-arrow {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.cta:hover .cta-arrow { transform: translateX(4px); }

.cta-button {
	width: 226px;
	height: 38px;
	justify-content: center;
	padding: 9px 25px;
	border: none;
	border-radius: 20px;
	background: #222;
	color: #fff;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	margin-top: 0;
}

/* ------------------------- Hero ------------------------- */

@font-face {
	font-family: "Google Sans Flex";
	src: url("../fonts/GoogleSansFlex-VariableFont.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("../fonts/BasisGrotesquePro-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("../fonts/BasisGrotesquePro-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("../fonts/BasisGrotesquePro-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.hero {
	position: relative;
	width: 100%;
	/* 747px / 1440px = 51.875vw — matches the Figma frame's proportions
	   at the design width, without letting aspect-ratio shrink the box's
	   width on viewports wider than 1440px (it would otherwise cap width
	   to stay under max-height, leaving a white gap next to .site-main). */
	height: clamp(400px, 51.875vw, 747px);
	background-size: cover;
	background-position: center;
	background-color: var(--adv-black);
}

/* Make the hero title respect the .container (max-width + 24px padding) instead
   of anchoring to the full-bleed section, so it lines up with the page content
   at every width (notably on viewports wider than --adv-max-width). */
.hero .container {
	position: relative;
	height: 100%;
}

.hero h1 {
	position: absolute;
	left: 24px; /* matches .container horizontal padding */
	right: 24px;
	bottom: 0;
	margin: 0;
	color: var(--adv-white);
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: clamp(28px, 5.9vw, 85px); /* 85px / 1440px, capped at the design size */
	line-height: 1.1;
	text-transform: uppercase;
	text-align: left;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

/* Desktop counterpart to the .container padding: 0 rule near the top — lets the hero
   title span the full 1320 width. Placed after the base .hero h1 so it wins on source
   order (media queries don't add specificity). */
@media (min-width: 1320px) {
	.hero h1 {
		left: 0;
		right: 0;
	}
}

/* Reusable hero fade-in-up animation — shared by every page's hero body copy.
   (Heading <h1> elements use the masked rise-up reveal below instead.) */
.projects-hero-body,
.clients-hero-body,
.career-growth-hero-body,
.tech-training-hero-body {
	animation: hero-title-in 2s ease-out both;
	/* Render the editor's Enter-key line breaks from the Hero Body textarea,
	   while long lines still wrap normally. */
	white-space: pre-line;
}

/* Masked rise-up reveal for all <h1> headings — ported from awaydigital.com's
   .hero-title (GSAP), recreated dependency-free. The heading clips its content;
   the inner element (added by initHeadingReveal in main.js) slides up from below
   while fading in. */
h1 {
	overflow: hidden;
	/* Headroom above the text so tall Vietnamese diacritics (e.g. the hook on
	   "triển") aren't clipped by the reveal mask. The negative margin cancels
	   the padding so nothing shifts; the bottom edge stays tight, so the
	   rise-up mask still works. */
	padding-top: 0.3em;
	margin-top: -0.3em;
}

.hero-reveal-inner {
	display: block;
	transform: translateY(100%);
	opacity: 0;
	animation: hero-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
	will-change: transform, opacity;
}

@keyframes hero-reveal {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-reveal-inner {
		animation: none;
		transform: none;
		opacity: 1;
	}
}

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

/* ------------------------- Section spacing ------------------------- */

section { padding: 60px 0; }

/* Shared section padding (all content sections except hero/banner-image) */
.section-padding {
	padding: 120px 0;
}

/* Generic h4 — matches the Figma "Heading/H4/Medium CAP" token (33px / 1.31 / 500 /
   uppercase). Shared by every item/stat title; color + spacing set per-section. */
h4 {
	font-family: var(--adv-font-heading);
	font-weight: 500;
	font-size: 33px;
	line-height: 1.31;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

/* Generic h5 — matches the Figma "Heading/H5/Bold CAP" token (20px / 1.3 / 700 /
   uppercase). Shared by every hero body, label, quote and block title promoted to
   <h5>; color + spacing set per-section. VI override (600 / 1.5) lives in the
   Vietnamese line-heights section. */
h5 {
	font-family: var(--adv-font-heading);
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

/* Shared section h2 style (what-to-expect, projects, benefits, apply) — color set per-section */
.section-heading {
	font-family: var(--adv-font-heading);
	font-weight: 500;
	font-size: clamp(32px, 4.1vw, 59px);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

/* Larger inner-page hero variant — inherits type from .section-heading, overrides size only */
.section-heading--hero {
	font-size: clamp(40px, 7.64vw, 110px);
	line-height: 1.05;
	color: #222;
	margin-bottom: 24px;
}

/* ------------------------- Intro + stats ------------------------- */

/* Section sits on the Secondary/background (#eee) per Figma. */
.intro-stats { background: #eee; }

.intro-stats .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.intro-heading {
	font-family: var(--adv-font);
	font-size: 22px;
	font-weight: 700; /* Figma: EN Bold 700 (VI override below is SemiBold 600) */
	line-height: 1.3;
	color: #222;
	text-transform: uppercase;
	max-width: 76.9%;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

.intro-body {
	font-family: var(--adv-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #222;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.stats {
	display: grid;
	/* Columns size to each stat's content instead of stretching to half the
	   container (1fr 1fr); justify-content keeps the pair packed to the left. */
	grid-template-columns: repeat(2, max-content);
	justify-content: start;
	gap: 80px;
	margin-top: 0;
	margin-bottom: 100px;
}

.stat strong {
	display: block;
	font-family: var(--adv-font);
	font-size: 33px;
	font-weight: 500;
	line-height: 1.31;
	color: #222;
	text-transform: uppercase;
}

.stat span {
	display: block;
	font-family: var(--adv-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #222;
	text-transform: uppercase;
	margin-top: 4px;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

.intro-stats .cta { color: #222; }

@media (max-width: 600px) {
	.intro-stats { padding: 60px 0; }
}

/* ------------------------- Banner image ------------------------- */

.banner-image { padding: 0; position: relative; }
.banner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.banner-image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 570px;
	background: linear-gradient(to bottom, rgba(23, 23, 23, 0) 0%, #171717 100%);
	pointer-events: none;
}

/* ------------------------- What you can expect (dark) ------------------------- */

.what-to-expect {
	background: #171717; /* Figma Primary/highlight (local override; --adv-black is #0f0f0f) */
	color: var(--adv-white);
}

.what-to-expect .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.expect-items {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.expect-item {
	padding-bottom: 30px;
	border-bottom: 0.5px solid #EEEEEE;
}

.expect-item h4 {
	font-size: 26px;
	margin-bottom: 10px;
}
.expect-item p {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	color: #fff;
	margin-bottom: 30px;
}
/* These sections drop the default CTA top margin (type comes from the canonical .cta rule) */
.intro-stats .cta,
.expect-item .cta,
.projects .cta,
.benefits .cta {
	margin: 0;
	padding: 0;
}

.expect-item .cta {
	color: var(--adv-white);
}

/* ------------------------- Projects ------------------------- */

.projects-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
	margin-bottom: 80px;
}

.projects h2 {
	color: #222;
	max-width: 70%;
}

.projects-stat {
	color: #222;
	margin-bottom: 10px;
}

.projects-body {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	color: #222;
	margin-top: 0;
	margin-bottom: 76px;
}

.projects .cta { color: #222; }

.projects-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
}

.projects-gallery-item {
	overflow: hidden;
}

.projects-gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.projects-gallery-item:hover img {
	transform: scale(1.2);
}

/* ------------------------- Benefits (dark) ------------------------- */

.benefits {
	background: #171717; /* Figma Primary/highlight (local override; --adv-black is #0f0f0f) */
	color: var(--adv-white);
}

.benefits-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.benefits h2 { max-width: 480px; }
/* Type comes from the generic h5 rule; only color + spacing are section-specific. */
.benefits-body { color: #fff; margin-top: 0; margin-bottom: 30px; }

.benefits-list {
	margin-top: 0;
	margin-bottom: 50px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px; /* Figma: items stacked tight, spacing from line-height only */
}

.benefits-list li {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (EN) */
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	position: relative;
	padding-left: 24px;
	color: #fff;
}

.benefits-list li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.benefits .cta { color: var(--adv-white); }

.benefits-slider {
	margin-top: 60px;
}

.benefits-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}

.benefits-slider-title {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

.benefits-slider-nav {
	display: flex;
	gap: 8px;
}

.benefits-slider-prev,
.benefits-slider-next {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* Two stacked layers (normal + active) cross-fade on hover instead of the
   background-image snapping instantly between the two SVGs. */
.benefits-slider-prev::before,
.benefits-slider-next::before,
.benefits-slider-prev::after,
.benefits-slider-next::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.25s ease;
}

.benefits-slider-prev::before,
.benefits-slider-next::before {
	background-image: url("../images/arrow-right.svg");
	opacity: 1;
}

.benefits-slider-prev::after,
.benefits-slider-next::after {
	background-image: url("../images/arrow-right-active.svg");
	opacity: 0;
}

.benefits-slider-prev:hover:not(:disabled)::after,
.benefits-slider-next:hover:not(:disabled)::after {
	opacity: 1;
}

.benefits-slider-prev {
	transform: rotate(180deg);
}

.benefits-slider-prev:disabled,
.benefits-slider-next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.benefits-slider-track-wrap {
	overflow: hidden;
	border-radius: 4px;
}

.benefits-slider-track {
	display: flex;
	transition: transform 0.3s ease;
}

.benefits-slider-slide {
	flex: 0 0 calc(50% - 10px);
	margin-right: 20px;
}

.benefits-slider-slide:last-child { margin-right: 0; }

.benefits-slider-slide img {
	width: 100%;
	/* 650 / 365.625 = 16:9 */
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.benefits-slider-slide { flex: 0 0 100%; margin-right: 0; }
}

/* ------------------------- Apply ------------------------- */

.apply {
	background: #eee; /* Figma Secondary/background (--adv-gray-light is #f4f2ef) */
}

.apply .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}


.apply h2 { margin-bottom: 30px; color: #222; }

.apply-body {
	color: #222;
	margin-top: 0;
}

.apply-jobs ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 90px;
}

.apply-jobs li {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 33px;
	line-height: 1.31;
	letter-spacing: 0;
	text-transform: uppercase;
	border-bottom: none;
	padding-bottom: 0;
}

/* Job title: Figma EN Bold 700 (VI override is SemiBold 600). */
.apply-jobs-title { font-weight: 700; }

.apply-jobs ul a {
	display: block;
	color: rgba(153, 153, 153, 0.2);
	transition: color 0.15s ease;
}

.apply-jobs-subtitle {
	display: block;
	font-size: 20px; /* Figma: 20px (was 16px) */
	font-weight: 700; /* matches the job title; VI override is 600 */
	line-height: 1.2;
}

.apply-jobs ul a:hover,
.apply-jobs ul a:focus {
	color: #999;
}

/* ------------------------- Footer ------------------------- */

.site-footer {
	background: #171717; /* Figma: Primary/Highlight #171717 */
	color: var(--adv-white);
	padding: 80px 0; /* Figma: 80px top/bottom */
}

.footer-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	padding-bottom: 80px;
	border-bottom: 0.5px solid #999; /* Figma: divider #999999 */
}

.footer-top img { height: 59px; width: auto; }

.footer-socials {
	display: flex;
	height: 45.8px;
	gap: 42px;
}

.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 45.8px;
	padding: 0;
	color: var(--adv-white);
	opacity: 1; /* Figma: icons full white #FFFFFF at rest */
	transition: opacity 0.15s ease;
}
.footer-socials a:hover { opacity: 0.8; }

.footer-socials a svg {
	width: 100%;
	height: 100%;
	display: block;
}

.footer-nav ul, .footer-nav {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 100%;
	justify-content: space-between;
	gap: 24px;
}

.footer-nav a {
	font-family: var(--adv-font);
	font-weight: 700; /* Figma: Bold 700 (VI SemiBold 600) */
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}
.footer-nav a:hover { color: var(--adv-white); }

.footer-offices {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 80px;
}

.office {
	width: 240px;
}

.footer-offices h3 {
	color: #999;
	font-family: var(--adv-font);
	font-size: 20px; /* Figma: 20px */
	font-weight: 700; /* Figma: Bold 700 (VI SemiBold 600) */
	line-height: 1.3; /* Figma: 1.3 */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px; /* Figma: 16px heading→body gap */
}

.footer-offices p {
	color: #999;
	font-family: var(--adv-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	max-width: 260px;
}

/* Desktop: widen the 2nd office + its address */
@media (min-width: 861px) {
	.office:nth-child(2) { width: 321px; }
	.office:nth-child(2) p { max-width: 300px; }
}

/* ------------------------- Projects page ------------------------- */

.projects-hero {
	background: #eee;
}


.projects-hero-body {
	color: #222;
	font-weight: 500; /* Figma: Medium 500 (generic h5 is 700 / VI 600; VI override below) */
}

/* Projects hero: EN heading→body gap is 12px (VI restores 24px + 1.2 line-height below). */
.projects-hero .section-heading--hero { margin-bottom: 12px; }

.projects-feature-image,
.clients-banner-image,
.career-growth-banner-image,
.tech-training-banner-image {
	background: #eee;
	overflow: hidden;
	height: 578px;
	padding: 0;
}

.projects-feature-image img,
.clients-banner-image img,
.career-growth-banner-image img,
.tech-training-banner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.projects-feature-image,
	.clients-banner-image,
	.career-growth-banner-image,
	.tech-training-banner-image {
		height: 280px;
	}
}

.projects-sectors { background: #eee; } /* Figma Secondary/background */

.sectors-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.sectors-heading {
	color: #222;
	font-size: 26px;
}

html[lang="en"] .sectors-heading {
	font-size: 20px;
}

.sectors-slider-nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.sectors-slider-prev,
.sectors-slider-next {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
}

.sectors-slider-prev::before,
.sectors-slider-next::before,
.sectors-slider-prev::after,
.sectors-slider-next::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.25s ease;
}

.sectors-slider-prev::before,
.sectors-slider-next::before {
	background-image: url("../images/arrow-right.svg");
	opacity: 1;
}

.sectors-slider-prev::after,
.sectors-slider-next::after {
	background-image: url("../images/arrow-right-active.svg");
	opacity: 0;
}

.sectors-slider-prev:hover:not(:disabled)::after,
.sectors-slider-next:hover:not(:disabled)::after {
	opacity: 1;
}

.sectors-slider-prev { transform: rotate(180deg); }

.sectors-slider-prev:disabled,
.sectors-slider-next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.sectors-slider-track-wrap {
	overflow: hidden;
}

.sectors-slider-track {
	display: flex;
	gap: 32px;
	transition: transform 0.3s ease;
}

.sectors-slider-slide {
	flex: 0 0 306px;
}

.sector-card-image {
	overflow: hidden;
	cursor: pointer;
}

.sector-card-image img {
	width: 100%;
	height: 306px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sector-card:hover .sector-card-image img {
	transform: scale(1.2);
}

.sector-label {
	margin-top: 24px;
	font-weight: 500; /* Figma "Heading/H5/Medium CAP" 500 (the heading h5 stays Bold 700) */
	color: #222;
}

@media (max-width: 600px) {
	.sectors-slider-slide { flex: 0 0 220px; }
	.sector-card-image img { height: 220px; }
}

.documentation-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
	margin-bottom: 80px;
}

.projects-documentation .section-heading {
	color: #222;
}

.documentation-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 652px;
}

.documentation-lead {
	color: #222;
}

.documentation-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.projects-exposure {
	position: relative;
	background-color: var(--adv-black);
	background-size: cover;
	background-position: center;
	color: var(--adv-white);
	overflow: hidden;
}

.exposure-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(23, 23, 23, 0) 0%, #171717 70%);
	pointer-events: none;
}

.projects-exposure .container {
	position: relative;
}

.projects-video-strip {
	position: relative;
	height: 578px;
	overflow: hidden;
}

.projects-video-strip video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.projects-video-strip-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 40%, var(--adv-black) 100%);
}

@media (max-width: 600px) {
	.projects-video-strip { height: 280px; }
}

.apply-page-video-strip {
	position: relative;
	height: 578px;
	overflow: hidden;
}

.apply-page-video-strip video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apply-page-video-strip-overlay {
	position: absolute;
	inset: 0;
}

@media (max-width: 600px) {
	.apply-page-video-strip { height: 280px; }
}

.exposure-content {
	display: flex;
	justify-content: flex-end;
	gap: var(--adv-gap);
}

.exposure-heading {
	color: var(--adv-white);
	flex: 1 1 0;
}

.exposure-right {
	flex: 1 1 0;
}

.exposure-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
	margin-bottom: 50px;
}

.accordion-item {
	border-bottom: 0.5px solid #EEEEEE;
	padding: 50px 0 30px; /* EN: top 50 / bottom 30 (VI top 54 below) */
}

.accordion-item:first-child { padding-top: 0; }

.accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	color: var(--adv-white);
}

/* .accordion-title type comes from the generic h5 rule; color inherited from .accordion-header.
   Figma makes this title Medium 500 (not the h5 Bold 700); VI is 26px (see VI overrides). */
.accordion-title { font-weight: 500; }

.accordion-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background-color: transparent;
	background-image: url("../images/arrow-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	padding: 0;
	transform: rotate(-90deg);
	transition: transform 0.25s ease;
}

button.accordion-icon {
	cursor: pointer;
}

.accordion-item.is-open .accordion-icon {
	transform: rotate(90deg);
}

.accordion-body {
	margin-top: 20px;
}

.accordion-purpose {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
}

.accordion-purpose strong {
	font-weight: 700; /* Figma label: EN Bold 700 (VI SemiBold 600 override below) */
}

html[lang="vi"] .accordion-purpose strong { font-weight: 600; }

.accordion-deliverables {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
}

.accordion-deliverables-inner {
	overflow: hidden;
}

.accordion-item.is-open .accordion-deliverables {
	grid-template-rows: 1fr;
	margin-top: 20px;
}

.accordion-deliverables-list {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.accordion-deliverables-list li {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma body convention: Regular 400 */
	font-size: 16px;
	line-height: 1.2;
	position: relative;
	padding-left: 20px;
	color: var(--adv-white);
}

/* ------------------------- Clients page ------------------------- */

.clients-hero {
	background: #eee;
}


.clients-hero-body {
	color: #222;
	font-weight: 500; /* Figma: Medium 500 (generic h5 is 700 / VI 600; VI override below) */
	max-width: 70%;
}

/* Clients hero: EN heading→body gap is 12px (VI restores 24px + 1.2 line-height below). */
.clients-hero .section-heading--hero { margin-bottom: 12px; }

.clients-who { background: #fff; }

.clients-who .section-heading { color: #222; }

.clients-who-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
	margin-bottom: 80px;
}

.clients-who-details {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 652px;
}

.clients-who-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.clients-who-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.clients-who-item {
	border-bottom: 0.5px solid #999999;
	padding-bottom: 30px;
}

.clients-who-item-title {
	color: #222;
	margin-bottom: 10px;
}

.clients-who-item-body {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

.clients-collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width: 100%;
}

.clients-collage-item {
	overflow: hidden;
}

.clients-collage-item img {
	width: 100%;
	height: 437px;
	object-fit: cover;
	display: block;
}

.clients-testimonials {
	background: #171717; /* Figma Primary/highlight (local override; --adv-black is #0f0f0f) */
	color: var(--adv-white);
	padding: 120px 0;
}

.clients-testimonials-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
}

.clients-testimonials-intro {
	flex: 1 1 0;
}

.clients-testimonials-intro .section-heading {
	color: var(--adv-white);
	margin-bottom: 30px;
}

.clients-testimonials-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	color: var(--adv-white);
}

.quote-carousel {
	flex: 1 1 0;
}

.quote-item {
	display: none;
	flex-direction: column;
	gap: 40px;
}

.quote-item.is-active {
	display: flex;
}

.quote-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.quote-mark {
	width: 40px;
	height: 30px;
}

.quote-nav {
	display: flex;
	gap: 10px;
}

.quote-prev,
.quote-next {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
}

.quote-prev::before,
.quote-next::before,
.quote-prev::after,
.quote-next::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.25s ease;
}

.quote-prev::before,
.quote-next::before {
	background-image: url("../images/arrow-right.svg");
	opacity: 1;
}

.quote-prev::after,
.quote-next::after {
	background-image: url("../images/arrow-right-active.svg");
	opacity: 0;
}

.quote-prev:hover::after,
.quote-next:hover::after {
	opacity: 1;
}

.quote-prev {
	transform: rotate(180deg);
}

.quote-text {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--adv-white);
	white-space: pre-line;
}

.quote-text::before { content: "\201C"; }

.quote-text::after { content: "\201D"; }

/* VI-only muted translation shown beneath the English original quote (Figma: 16px /
   1.5 / 500 / #999, sentence case). */
.quote-text-translation {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: #999;
	white-space: pre-line;
}

.quote-client {
	text-align: left;
}

/* This section uses the Figma "H5 Medium CAP" token (500), not the generic h5 Bold. */
.quote-name {
	font-weight: 500;
	color: var(--adv-white);
}

.quote-role {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #999;
	margin-top: 4px;
}

.clients-closely { background: #eee; }

.clients-closely .section-heading { color: #222; }

.clients-closely-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
	margin-bottom: 80px;
}

.clients-closely-right {
	display: flex;
	flex-direction: column;
	gap: 144.5px;
	max-width: 652px;
}

.clients-closely-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both langs) */
	font-size: 22px; /* Figma EN 22px (VI 16px override below) */
	line-height: 1.3; /* Figma EN 1.3 (VI 1.5 override below) */
	color: #222;
}

/* Generic row of inline CTA links (dark, uppercase, borderless) */
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
}

.cta-row .cta {
	color: #222;
}


/* ------------------------- Career Growth page ------------------------- */

.career-growth-hero {
	background: #eee;
}

.career-growth-hero .section-heading--hero {
	margin-bottom: 12px; /* EN Figma heading → body gap (VI override: 24px) */
}

.career-growth-hero-body {
	color: #222;
	font-weight: 500; /* EN Figma: Medium 500 (h5 default is 700) */
	max-width: 70%;
	margin-bottom: 158px; /* body → career-map gap (Figma 120 + 38 label clearance) */
}

.career-map {
	width: 100%;
	padding-bottom: 24px;
}

.career-map-track {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.career-map-stage {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 13px;
}

.career-map-label {
	position: absolute;
	left: 50%;
	bottom: 100%;
	margin-bottom: 12px;
	transform: translateX(-50%);
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	text-transform: uppercase;
	color: #d0d0d0;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.career-map-stage:first-child .career-map-label {
	left: 0;
	transform: none;
}

.career-map-stage:last-child .career-map-label {
	left: auto;
	right: 0;
	transform: none;
	margin-bottom: 10px;
}

.career-map-dot {
	display: block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #d0d0d0;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.career-map-stage.is-active .career-map-label {
	color: var(--adv-black);
}

.career-map-stage.is-active .career-map-dot {
	background: var(--adv-black);
}

.career-map-stage:hover .career-map-label {
	color: var(--adv-black);
}

.career-map-stage:hover .career-map-dot {
	background: var(--adv-black);
	transform: scale(1.3);
}

.career-map-segment {
	flex: 1 1 auto;
	min-width: 20px;
	height: 2px;
	margin: 0 -6.5px 5.5px;
	background: #d0d0d0;
	transition: background-color 0.3s ease;
}

.career-map-segment.is-active {
	background: var(--adv-black);
}

.career-map-arrow {
	display: block;
	width: 17px;
	height: 13px;
	transform: rotate(90deg);
}

.career-map-arrow::before {
	content: "";
	display: block;
	margin: 2px auto 0;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 13px solid #d0d0d0;
	transition: border-bottom-color 0.3s ease;
}

.career-map-arrow.is-active::before {
	border-bottom-color: var(--adv-black);
}

.career-map-stage:hover .career-map-arrow::before {
	border-bottom-color: var(--adv-black);
}

.career-path { background: #fff; }

.career-path .section-heading { color: #222; }

.career-path-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
	margin-bottom: 60px; /* content → image gap (Figma 60) */
}

.career-path-details {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 652px;
}

.career-path-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both languages) */
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.career-path-list {
	display: flex;
	flex-direction: column;
	gap: 32px; /* EN Figma inter-item gap (VI override: 36px) */
}

.career-path-item {
	border-bottom: 0.5px solid #999999;
	padding-bottom: 30px;
}

/* Figma shows a divider under every item including the last — no :last-child reset. */

.career-path-item-title {
	color: #222;
	margin-bottom: 10px;
}

.career-path-item-level {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #999;
	margin-bottom: 10px; /* level → body gap (Figma 10) */
}

.career-path-item-body {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

.career-progression { background: #eee; }

.career-progression .section-heading { color: #222; }

.career-progression-intro {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
	margin-bottom: 80px;
}

.career-progression-intro .section-heading {
	flex: 1 1 0;
}

.career-progression-quote {
	color: #222;
	flex: 1 1 0;
	white-space: pre-line;
}

.video-placeholder {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	height: 730px;
}

.video-placeholder[data-video-embed] { cursor: pointer; }

.video-placeholder-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-placeholder-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	display: flex;
}

.video-placeholder-duration {
	position: absolute;
	bottom: 24px;
	left: 24px;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 10px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.video-placeholder { height: 380px; }
}

.career-benefits { background: #fff; }

.career-benefits .section-heading { color: #222; }

.career-benefits-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
}

.career-benefits-content .section-heading {
	flex: 1 1 0;
}

.career-benefits-details {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1 1 0;
}

.career-benefits-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.career-benefits-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.career-benefits-list li {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both languages) */
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
	color: #222;
}

.career-benefits-list li::before,
.career-recognition-list li::before,
.apply-page-process-step-list li::before,
.apply-page-talk-list li::before,
.accordion-deliverables-list li::before,
.tech-rendering-skills li::before,
.projects-recruitment-roles li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.career-recognition {
	background: #171717; /* Figma Primary/highlight (both languages) */
	color: var(--adv-white);
}

.career-recognition .section-heading { color: var(--adv-white); }

.career-recognition-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
	margin-bottom: 80px;
}

.career-recognition-content .section-heading {
	flex: 1 1 0;
}

.career-recognition-details {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1 1 0;
}

.career-recognition-body,
.career-recognition-list-label {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both languages) */
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
}

.career-recognition-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.career-recognition-list li {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both languages) */
	font-size: 16px;
	line-height: 1;
	position: relative;
	padding-left: 20px;
	color: var(--adv-white);
}

.career-longterm { background: #eee; }

.career-longterm .section-heading { color: #222; }

.career-longterm-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.career-longterm-right {
	display: flex;
	flex-direction: column;
	gap: 100px;
	max-width: 652px;
}

.career-longterm-top {
	display: flex;
	flex-direction: column;
	gap: 40px; /* body → stats gap (VI override: 36px) */
}

.career-longterm-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 (both languages) */
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.career-longterm-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}

.career-longterm-stat {
	max-width: 232px;
}

.career-longterm-stat h4 {
	color: #222;
}

.career-longterm-stat span {
	display: block;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
	text-transform: uppercase;
	margin-top: 4px;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

.career-longterm .cta { color: #222; margin-top: 0; }

/* ------------------------- Technical Skills & Training page ------------------------- */

.tech-training-hero {
	background: #eee;
}


.tech-training-hero-body {
	color: #222;
	max-width: 70%;
	font-weight: 500;
}

.tech-software { background: #fff; }

.tech-software .section-heading { color: #222; }

.tech-software-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.tech-software-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 652px;
}

.tech-software-item {
	border-bottom: 0.5px solid #999999;
	padding-bottom: 30px;
}

.tech-software-item-title {
	color: #222;
	margin-bottom: 10px;
}

.tech-software-item-intro {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

.tech-software-item-bullets {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px;
}

.tech-software-item-bullets li {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	padding-left: 20px;
	color: #222;
}

.tech-software-item-bullets li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.tech-software-item-closing {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
	margin-top: 20px;
}

.tech-video-strip {
	position: relative;
	height: 578px;
	overflow: hidden;
}

.tech-video-strip img,
.tech-video-strip video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tech-video-strip-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 40%, var(--adv-black) 100%);
}

@media (max-width: 600px) {
	.tech-video-strip { height: 280px; }
}

.tech-rendering {
	background: var(--adv-black);
	color: var(--adv-white);
}

.tech-rendering .section-heading { color: var(--adv-white); }

.tech-rendering-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
}

.tech-rendering-content .section-heading {
	flex: 1 1 0;
}

.tech-rendering-right {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1 1 0;
}

.tech-rendering-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
}

.tech-rendering-skills-label {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
}

.tech-rendering-skills {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tech-rendering-skills li {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
	color: var(--adv-white);
}

.tech-rendering-skills li strong {
	font-weight: 700;
}

.tech-delivery { background: #eee; }

.tech-delivery .section-heading { color: #222; }

.tech-delivery-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
	margin-bottom: 80px;
}

.tech-delivery-content .section-heading {
	flex: 1 1 0;
}

.tech-delivery-details {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1 1 0;
}

.tech-delivery-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.tech-delivery-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tech-delivery-list li {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
	color: #222;
}

.tech-delivery-list li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.tech-delivery-image {
	background: #ffa1a1;
	overflow: hidden;
	height: 578px;
}

.tech-delivery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.tech-delivery-image { height: 280px; }
}

.tech-ai {
	background: var(--adv-black);
	color: var(--adv-white);
}

.tech-ai .section-heading { color: var(--adv-white); }

.tech-ai-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
}

.tech-ai-content .section-heading {
	flex: 1 1 0;
}

.tech-ai-right {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1 1 0;
}

.tech-ai-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
}

.tech-ai-blocks {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.tech-ai-block-title {
	color: var(--adv-white);
	margin-bottom: 10px;
}

.tech-ai-block-intro {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--adv-white);
}

.tech-ai-block-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 20px;
}

.tech-ai-block-list li {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--adv-white);
	position: relative;
	padding-left: 20px;
}

.tech-ai-block-list li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.tech-ai-divider {
	height: 0.5px;
	background: #eee;
}

.tech-support { background: #eee; }

.tech-support .section-heading { color: #222; }

.tech-support-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
	margin-bottom: 80px;
}

.tech-support-content .section-heading {
	flex: 1 1 0;
}

.tech-support-right {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex: 1 1 0;
}

.tech-support-body {
	font-family: var(--adv-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.tech-support-block-title {
	color: #222;
	margin-bottom: 10px;
}

.tech-support-block-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tech-support-block-list li {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	padding-left: 20px;
	color: #222;
}

.tech-support-block-list li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.tech-support .cta { color: #222; }
html[lang="en"] .tech-support .cta { margin-top: 0; } /* EN only; VI keeps base .cta 24px */

.tech-support-collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width: 100%;
}

.tech-support-collage-item {
	overflow: hidden;
}

.tech-support-collage-item img {
	width: 100%;
	height: 437px;
	object-fit: cover;
	display: block;
}

/* ------------------------- Apply page ------------------------- */

.apply-page-process { background: #eee; }

.apply-page-process.section-padding { padding-top: 30px; } /* Figma: 30px top / 120px bottom */

.apply-page-process .section-heading { color: #222; }

.apply-page-process-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.apply-page-process-right {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 652px;
}

.apply-page-process-body {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: #222;
}

.apply-page-process-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.apply-page-process-step {
	border-bottom: 0.5px solid #999999; /* Figma: divider #999999 */
	padding-bottom: 30px;
}

.apply-page-process-step-title {
	color: #222;
	margin-bottom: 10px;
}

.apply-page-process-step-body {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

.apply-page-process-step-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
}

.apply-page-process-step-list li {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	padding-left: 20px;
	color: #222;
}

.apply-page-talk {
	background: #171717; /* Figma: Primary/Highlight #171717 */
	color: var(--adv-white);
}

.apply-page-talk .section-heading { color: var(--adv-white); }

.apply-page-talk-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
	margin-bottom: 80px;
}

.apply-page-talk-content .section-heading {
	flex: 1 1 0;
}

.apply-page-talk-details {
	flex: 1 1 0;
}

.apply-page-talk-subheading {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: var(--adv-white);
	margin-top: 0;
	margin-bottom: 24px;
	white-space: pre-line; /* preserves the admin's intentional line breaks from the textarea field */
}

.apply-page-talk-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.apply-page-talk-list li {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1;
	position: relative;
	padding-left: 20px;
	color: var(--adv-white);
}

.apply-page-talk-image {
	overflow: hidden;
	height: 578px;
}

.apply-page-talk-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.apply-page-talk-image { height: 280px; }
}

.apply-page-opportunities { background: #eee; }

.apply-page-opportunities .section-heading { color: #222; }

.apply-page-opportunities-content {
	display: flex;
	justify-content: space-between;
	gap: var(--adv-gap);
}

.apply-page-opportunities-content .section-heading {
	flex: 1 1 0;
}

.apply-page-opportunities-list {
	display: flex;
	flex-direction: column;
	gap: 32px; /* Figma: inter-item gap 32px (VI 36px) */
	flex: 1 1 0;
}

.apply-page-opportunities-item {
	border-bottom: 0.5px solid #999999;
	padding-bottom: 20px;
}

.apply-page-opportunities-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.apply-page-opportunities-item-title {
	color: #222;
}

.apply-page-opportunities-item-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 14px;
	line-height: 1.4; /* Figma: 1.4 */
	text-transform: uppercase;
	color: #222;
	white-space: nowrap;
	flex-shrink: 0;
}

.apply-page-opportunities-item-link .download-icon {
	flex-shrink: 0;
}

.apply-page-opportunities-item-subtitle {
	color: #222;
	margin-top: 4px;
	font-weight: 500; /* Figma: Medium 500 (not h5 700) */
	line-height: 1.3; /* Figma: 1.3 */
	text-transform: uppercase;
}

.apply-page-form-section { background: #fff; }

.apply-page-form-section .section-heading { color: #222; }

.apply-page-form-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.apply-page-form-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.apply-page-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.apply-page-form-row {
	display: flex;
	gap: 32px;
}

.apply-page-form-field {
	position: relative; /* anchors the label span used as an in-input placeholder */
	display: flex;
	flex-direction: column;
	gap: 17px;
	flex: 1 0 0;
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5; /* Figma: 1.5 */
	color: #000; /* Figma: #000000 */
}

/* The field's <span> doubles as the input placeholder: it overlays the input
   text line and fades out once the field is filled (toggled via JS .is-filled).
   The wrapping <label> still labels the input, so accessibility is preserved.
   File dropzones keep their own centered placeholder (excluded below). */
.apply-page-form-field > span:not(.apply-page-form-file-placeholder) {
	position: absolute;
	left: 0;
	top: 0;
	color: #000; /* Figma: field label #000000 */
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.apply-page-form-field.is-filled > span:not(.apply-page-form-file-placeholder) {
	opacity: 0;
}

.apply-page-form-field--full {
	flex: 1 0 0;
}

.apply-page-form-field--file {
	position: relative;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 86px;
	background: #eee; /* Figma: Secondary/Background #eeeeee, radius 10, no border */
	border: none;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
}

.apply-page-form-file-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.apply-page-form-file-placeholder {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5;
	color: #999;
	text-align: center;
	padding: 0 16px;
	pointer-events: none;
}

.apply-page-form-field--file.has-file .apply-page-form-file-placeholder {
	color: #222;
}

.apply-page-form-field input {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5; /* aligns typed text with the overlaid placeholder span */
	color: #000; /* Figma: #000000 */
	border: none;
	border-bottom: 1px solid #999999; /* Figma: 1px underline #999999 */
	padding: 0 0 12px;
	background: none;
	border-radius: 0;
	width: 100%;
}

.apply-page-form-field input:focus {
	outline: none;
	border-bottom-color: #444;
}

/* Role of interest: a custom dropdown replaces the native <select> so the open
   option list can be styled to Figma (12px uppercase medium). A hidden input
   carries the posted value; the toggle mirrors a text field's underline + arrow. */
.apply-page-form-select-toggle {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 16px;
	line-height: 1.5; /* aligns the value with the overlaid placeholder span */
	color: #000; /* Figma: #000000 */
	text-align: left;
	border: none;
	border-bottom: 1px solid #999999; /* Figma: 1px underline #999999 */
	padding: 0 48px 12px 0; /* leaves room for the arrow on the right */
	background: none;
	border-radius: 0;
	width: 100%;
	cursor: pointer;
}

.apply-page-form-select-toggle:focus-visible {
	outline: none;
	border-bottom-color: #444;
}

.apply-page-form-select-value {
	display: block;
	min-height: 24px; /* 16px * 1.5 — holds the toggle height while empty */
}

/* Arrow: reuses the accordion/select caret (-90deg closed, 90deg when open). */
.apply-page-form-field--select::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 12px; /* centers the icon on the toggle text line */
	width: 24px;
	height: 24px;
	background-image: url("../images/arrow-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(-90deg);
	transition: transform 0.25s ease;
	pointer-events: none;
}

.apply-page-form-field--select.is-open::after {
	transform: rotate(90deg);
}

/* Floating option panel — overlays the fields below instead of pushing them. */
.apply-page-form-select-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	max-height: 320px; /* overlay safety: scroll if the role list grows long */
	overflow-y: auto;
	background: #fff;
	border: 1px solid #999999;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.apply-page-form-select-option {
	font-family: var(--adv-font);
	font-weight: 500; /* Figma: Medium 500 */
	font-size: 12px; /* Figma: 12px */
	line-height: 1.4; /* Figma: 1.4 */
	color: #000; /* Figma: #000000 */
	text-transform: uppercase; /* Figma: uppercase */
	padding: 10px 20px; /* Figma: 10px / 20px */
	cursor: pointer;
}

.apply-page-form-select-option:hover,
.apply-page-form-select-option.is-active {
	background: #eee;
}

.apply-page-form-privacy {
	font-family: var(--adv-font);
	font-weight: 400; /* Figma: Regular 400 */
	font-size: 10px;
	line-height: 1.4; /* Figma: 1.4 */
	color: #999;
}

.apply-page-form-privacy a { text-decoration: underline; }

.apply-page-form-submit {
	align-self: flex-start;
	background: #444;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 9px 25px;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
}

.apply-page-form-message {
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	padding: 16px 20px;
	border-radius: 8px;
}

.apply-page-form-message--success {
	background: #dff0d8;
	color: #3c763d;
}

.apply-page-form-message--error {
	background: #f2dede;
	color: #a94442;
}

/* ------------------------- Responsive ------------------------- */

@media (max-width: 860px) {
	.intro-stats .container,
	.what-to-expect .container,
	.projects-intro,
	.benefits-intro,
	.documentation-intro,
	.clients-who-intro,
	.clients-closely-content,
	.career-path-intro,
	.career-longterm-content,
	.tech-software-intro,
	.apply-page-form-content,
	.apply .container,
	.stats {
		grid-template-columns: 1fr;
	}

	.projects-gallery { grid-template-columns: repeat(2, 1fr); }
	.benefits-list, .apply-jobs ul { grid-template-columns: 1fr; }
	.apply-page-process-intro { grid-template-columns: 1fr; } /* grid: stack on mobile (flex-direction below is a no-op for it) */
	.footer-offices { gap: 24px; }

	.exposure-content, .clients-testimonials-content, .career-progression-intro, .career-benefits-content, .career-recognition-content, .tech-rendering-content, .tech-delivery-content, .tech-ai-content, .tech-support-content, .apply-page-process-intro, .apply-page-talk-content, .apply-page-opportunities-content { flex-direction: column; }
	.exposure-heading, .exposure-right, .clients-testimonials-intro, .quote-carousel, .tech-rendering-right, .tech-delivery-details, .tech-ai-right, .tech-support-right, .career-benefits-details, .career-recognition-details { width: 100%; }
}

@media (max-width: 600px) {
	.primary-nav ul { gap: 16px; }
	.projects-gallery { grid-template-columns: 1fr; }
	.clients-collage { grid-template-columns: 1fr; }
	.clients-collage-item img { height: 300px; }
	.tech-support-collage { grid-template-columns: 1fr; }
	.apply-page-form-row { flex-direction: column; gap: 24px; }
	.footer-top { flex-direction: column; align-items: flex-start; }
	.what-to-expect { padding: 60px 0; }

	.career-map {
		overflow-x: auto;
	}

	.career-map-track {
		width: max-content;
		min-width: 100%;
	}

	.career-map-segment {
		min-width: 32px;
	}

	.career-map-label {
		font-size: 14px;
	}
}

/* ------------------------- Language switcher ------------------------- */

.site-header .primary-nav { margin-left: auto; }

.lang-switcher {
	position: relative;
	flex-shrink: 0;
}

.lang-switcher-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--adv-border);
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	color: #222;
	transition: opacity 0.15s ease;
}

.lang-switcher-toggle:hover { opacity: 0.6; }

.lang-switcher-globe { display: block; flex-shrink: 0; }

.lang-switcher-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 100%;
	list-style: none;
	margin: 0;
	padding: 4px;
	background: var(--adv-white);
	border: 1px solid var(--adv-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 30;
}

.lang-switcher.is-open .lang-switcher-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-switcher-option {
	display: block;
	padding: 8px 16px;
	border-radius: 6px;
	font-family: var(--adv-font);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	color: #222;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.lang-switcher-option:hover { background: var(--adv-gray-light); }

.lang-switcher-option.is-active {
	background: var(--adv-black);
	color: var(--adv-white);
}

@media (max-width: 860px) {
	.site-header .menu-toggle { margin-left: auto; }
	.site-header .primary-nav { margin-left: 0; }
	.lang-switcher-toggle { padding: 6px 10px; }
}

/* ------------------------- About company ------------------------- */

.about-company-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.about-company-gallery-item {
	aspect-ratio: 480 / 570;
	overflow: hidden;
}

.about-company-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	display: block;
}

.about-company {
	padding: 0;
}

/* The intro text block sits on the Secondary/background (#eee) with 120px vertical
   padding (per Figma); the gallery above it stays flush / full-bleed. */
.about-company-intro {
	background: #eee;
	padding: 120px 0;
}

.about-company-heading { color: #222; }

.about-company-intro .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: space-between;
	gap: var(--adv-gap);
	align-items: start;
}

.about-company-details {
	display: flex;
	flex-direction: column;
	gap: 32px; /* Figma paragraph gap: EN 32px (VI override below bumps to 36px) */
}

.about-company-body {
	font-family: var(--adv-font);
	font-size: 16px;
	line-height: 1.5;
	color: #222;
	margin: 0;
}

@media (max-width: 860px) {
	.about-company-intro .container {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.about-company-gallery-item { aspect-ratio: 3 / 4; }
	.about-company-intro { padding: 60px 0; }
}

/* ------------------------- English font (brand) ------------------------- */
/* English is the official-brand language and must use Basis Grotesque Pro
   (per AD brand guidelines). Scoped to <html lang="en"> set in inc/i18n.php;
   Vietnamese keeps Google Sans Flex (full diacritic coverage) via the :root
   defaults. Overrides both font tokens so headings and body switch together. */
html[lang="en"] {
	--adv-font: "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--adv-font-heading: "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------- Vietnamese line-heights ------------------------- */
/* Vietnamese diacritics need more vertical room; scoped to the VI language via
   the <html lang="vi"> attribute set in inc/i18n.php. English is unaffected. */
html[lang="vi"] h1 { line-height: 1.2; }
html[lang="vi"] h2 { line-height: 1.3; }
html[lang="vi"] p  { line-height: 1.5; }
/* H5 in VI uses the "Heading/H5/Bold CAP" VI token: SemiBold 600, 150% line-height */
html[lang="vi"] h5 { font-weight: 600; line-height: 1.5; }

/* Vietnamese heading line-heights + sizes (per designer) */
/* Homepage hero: 130% line-height, 92px; nudged up to offset the taller VI text */
html[lang="vi"] .hero h1 {
	font-size: clamp(28px, 6.39vw, 92px);
	line-height: 1.3;
}
/* Inner-page heros: 120% line-height, 106px */
html[lang="vi"] .section-heading--hero {
	font-size: clamp(40px, 7.36vw, 106px);
	line-height: 1.2;
}
html[lang="vi"] .section-heading { line-height: 1.3; }
/* About-company body paragraph gap: VI 36px (EN base is 32px) per Figma */
html[lang="vi"] .about-company-details { gap: 36px; }
/* Intro + stats: VI SemiBold heading/looser line-height, Regular body/labels, wider gaps */
html[lang="vi"] .intro-heading { font-weight: 600; line-height: 1.5; }
html[lang="vi"] .intro-body { font-weight: 400; margin-bottom: 36px; }
html[lang="vi"] .stat span { font-weight: 400; }
html[lang="vi"] .stats { margin-bottom: 90px; }
/* What to expect: VI item title 28px / 1.5 and larger inter-item gap */
html[lang="vi"] .expect-item h4 { font-size: 26px; line-height: 1.5; }
html[lang="vi"] .expect-items { gap: 36px; }
/* Projects: VI stat line-height + larger body→CTA gap */
html[lang="vi"] .projects-stat { line-height: 1.5; }
html[lang="vi"] .projects-body { margin-bottom: 90px; }
/* Benefits: VI body is Regular (400) with a larger gap to the CTA (no list in VI) */
html[lang="vi"] .benefits-body { font-weight: 400; margin-bottom: 90px; }
/* Apply: VI job titles SemiBold / 1.5, larger row + list gaps, tighter heading→body */
html[lang="vi"] .apply h2 { margin-bottom: 24px; }
html[lang="vi"] .apply-jobs-title { font-weight: 600; line-height: 1.5; }
html[lang="vi"] .apply-jobs-subtitle { font-weight: 600; }
html[lang="vi"] .apply-jobs ul { row-gap: 24px; margin-bottom: 90px; }
/* Apply body (H5): VI Medium 500 (beats the generic html[lang="vi"] h5 600 rule) */
html[lang="vi"] .apply-body { font-weight: 500; }
/* Projects hero: VI heading line-height 1.2 (scoped so it beats the generic .section-heading
   1.3 rule above, without affecting other inner-page heroes) + 24px heading→body gap + Medium body */
html[lang="vi"] .projects-hero .section-heading--hero { line-height: 1.2; margin-bottom: 24px; }
html[lang="vi"] .projects-hero-body { font-weight: 500; }
/* Projects exposure: VI heading Regular, larger intro gap, accordion title 26px/Medium */
html[lang="vi"] .exposure-heading { font-weight: 400; }
html[lang="vi"] .exposure-body { margin-bottom: 54px; }
html[lang="vi"] .accordion-title { font-size: 26px; font-weight: 500; }
/* Sector label (H5): VI Medium 500 (beats the generic html[lang="vi"] h5 600 rule) */
html[lang="vi"] .sector-label { font-weight: 500; }
/* Testimonials: VI intro body 150% line-height; quote stack gap tightened to 36px
   (per the VI design, which carries the extra translation block). */
html[lang="vi"] .clients-testimonials-body { line-height: 1.5; }
html[lang="vi"] .quote-item { gap: 36px; }
/* Clients hero: VI heading line-height 1.2 (scoped, like projects-hero) + 24px gap + Medium body */
html[lang="vi"] .clients-hero .section-heading--hero { line-height: 1.2; margin-bottom: 24px; }
html[lang="vi"] .clients-hero-body { font-weight: 500; }
/* Clients "who you work with": VI intro gap 36px + item title/body line-height 1.5 */
html[lang="vi"] .clients-who-details { gap: 36px; }
html[lang="vi"] .clients-who-item-title { line-height: 1.5; }
html[lang="vi"] .clients-who-item-body { line-height: 1.5; }
/* Clients testimonials: VI heading→body 24px, author name Medium 500, role line-height 1.5 */
html[lang="vi"] .clients-testimonials-intro .section-heading { margin-bottom: 24px; }
html[lang="vi"] .quote-name { font-weight: 500; }
html[lang="vi"] .quote-role { line-height: 1.5; }
/* Clients work-closely: VI body 16px / 1.5 (EN base is 22px / 1.3) */
html[lang="vi"] .clients-closely-body { font-size: 16px; line-height: 1.5; }
/* Clients ready CTA: VI body 20px / 1.5 (EN base 18px / 1.4); body→CTA gap 90px (66 + 24 cta margin) */
html[lang="vi"] .clients-ready-body { font-size: 20px; line-height: 1.5; }
html[lang="vi"] .clients-ready-details { gap: 66px; }
/* Career Growth page: per-language overrides (each value from the VI Figma node) */
html[lang="vi"] .career-growth-hero .section-heading--hero { margin-bottom: 24px; } /* VI heading → body gap (EN 12) */
html[lang="vi"] .career-growth-hero-body { font-weight: 500; } /* VI body Medium 500 (beats global VI h5 600) */
html[lang="vi"] .career-path-details { gap: 36px; } /* VI column gap (EN 32) */
html[lang="vi"] .career-path-item-title { font-size: 26px; line-height: 1.5; } /* VI item title 26/1.5 (EN h4 33/1.31) */
html[lang="vi"] .career-path-list { gap: 36px; } /* VI inter-item gap (EN 32) */
html[lang="vi"] .career-progression.section-padding { padding-bottom: 80px; } /* VI pb 80 (EN 120) */
html[lang="vi"] .career-progression-quote { font-weight: 400; } /* VI quote Regular 400 (EN Bold 700; global VI h5 is 600) */
html[lang="vi"] .career-benefits { background: #eee; } /* VI section bg (EN #fff) */
html[lang="vi"] .career-benefits.section-padding { padding-top: 80px; } /* VI pt 80 (EN 120) */
html[lang="vi"] .career-recognition-details { gap: 24px; } /* VI details gap (EN 30) */
html[lang="vi"] .career-longterm-top { gap: 36px; } /* VI body → stats gap (EN 40) */
html[lang="vi"] .career-longterm-stat span { font-weight: 400; } /* VI stat label Regular 400 (EN Medium 500) */
/* Apply page: per-language overrides (each value from the VI Figma node) */
html[lang="vi"] .apply-page-process-right { gap: 36px; } /* VI deliveries gap (EN 32) */
html[lang="vi"] .apply-page-process-step-title { line-height: 1.5; } /* VI step title 33/1.5 (EN h4 33/1.31) */
html[lang="vi"] .apply-page-process-step-body,
html[lang="vi"] .apply-page-process-step-list li { line-height: 1.5; } /* VI step desc 14/1.5 (EN 1.4) */
html[lang="vi"] .apply-page-opportunities-list { gap: 36px; } /* VI inter-item gap (EN 32) */
html[lang="vi"] .apply-page-opportunities-item-title { font-size: 28px; line-height: 1.5; } /* VI item title 28/1.5 (EN h4 33/1.31) */
html[lang="vi"] .apply-page-opportunities-item-subtitle { font-weight: 500; line-height: 1.3; } /* VI subtitle 500/1.3 (beats global VI h5 600/1.5) */
html[lang="vi"] .apply-page-form-submit { background: #222; } /* VI submit Secondary/Text #222 (EN #444) */
/* Footer: VI SemiBold 600 for nav links + office headings (EN Bold 700) */
html[lang="vi"] .footer-nav a,
html[lang="vi"] .footer-offices h3 { font-weight: 600; }
/* Projects page → Documentation: VI lead 19px (per VI Figma) */
html[lang="vi"] .documentation-lead { font-size: 19px; }
html[lang="vi"] .accordion-item { border-bottom-color: #EEEEEE; padding-top: 54px; } /* VI divider #EEEEEE (matches EN) + top 54 (EN 50) */
html[lang="vi"] .accordion-item:first-child { padding-top: 0; } /* keep first VI item flush (beats VI padding-top above) */
/* Technical Skills & Training page: VI hero body Medium 500 (beats global VI h5 600) */
html[lang="vi"] .tech-training-hero-body { font-weight: 500; }
html[lang="vi"] .tech-rendering-skills li strong { font-weight: 600; } /* VI SemiBold 600 (EN Bold 700) */
html[lang="vi"] .tech-rendering-right { gap: 24px; } /* VI column gap (EN 30) */

/* ------------------------- Textarea line breaks ------------------------- */
/* Render the editor's Enter-key line breaks for every body/text block that
   outputs a Hero/section textarea field, while long lines still wrap normally.
   (Headings already use pre-line; single-line labels/titles and <li> lists are
   intentionally excluded.) */
.intro-body,
.about-company-body,
.benefits-body,
.projects-body,
.expect-item-body,
.apply-body,
.documentation-lead,
.documentation-body,
.exposure-body,
.accordion-purpose,
.clients-who-body,
.clients-who-item-body,
.clients-closely-body,
.clients-testimonials-body,
.career-path-body,
.career-path-item-body,
.career-progression-quote,
.career-benefits-body,
.career-recognition-body,
.career-recognition-list-label,
.career-longterm-body,
.tech-rendering-body,
.tech-rendering-skills-label,
.tech-delivery-body,
.tech-ai-body,
.tech-ai-block-intro,
.tech-support-body,
.tech-software-item-intro,
.tech-software-item-closing,
.apply-page-process-body,
.apply-page-process-step-body {
	white-space: pre-line;
}

/* ------------------------- Projects recruitment ------------------------- */

.projects-recruitment { background: #eee; }
.projects-recruitment .section-heading { color: #222; } /* Figma Secondary/Text */

.projects-recruitment-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.projects-recruitment-details {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 652px;
}

.projects-recruitment-lead,
.projects-recruitment-closing,
.projects-recruitment-roles {
	font-family: var(--adv-font);
	font-size: 16px;
	line-height: 1.5;
	color: #222;
	margin: 0;
}

.projects-recruitment-lead,
.projects-recruitment-closing { white-space: pre-line; }

.projects-recruitment-roles {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Custom dot marker, matching .career-benefits-list li::before (shared rule above). */
.projects-recruitment-roles li {
	position: relative;
	padding-left: 20px;
}

/* Nudge this list's dot only (shared rule stays at 6px/8px). */
.projects-recruitment-roles li::before {
	left: 10px;
	top: 10px;
}

.projects-recruitment-roles strong { font-weight: 700; } /* Figma EN Bold (VI SemiBold below) */
html[lang="vi"] .projects-recruitment-roles strong { font-weight: 600; }

/* English: each role on one line with a disc bullet (Vietnamese stays stacked). */
html[lang="en"] .projects-recruitment-roles {
	display: block;
	gap: 0;
}

html[lang="en"] .projects-recruitment-roles li {
	display: list-item;
}

html[lang="en"] .projects-recruitment-roles li + li {
	margin-top: 0; /* Figma EN: roles stacked tight, spacing from line-height only */
}

/* Figma EN inter-block gap is 30px (VI keeps the 24px base above). */
html[lang="en"] .projects-recruitment-details { gap: 30px; }

.projects-recruitment-cta {
	color: #222;
	margin-top: 36px;
}
/* Content→CTA gap = details gap + this margin: Figma VI 90px (24+66), EN 50px (30+20). */
html[lang="vi"] .projects-recruitment-cta { margin-top: 66px; }
html[lang="en"] .projects-recruitment-cta { margin-top: 20px; }

@media (max-width: 860px) {
	.projects-recruitment-intro { grid-template-columns: 1fr; gap: 24px; }
}

/* ------------------------- Clients ready CTA ------------------------- */

.clients-ready { background: #eee; padding-top: 80px; } /* Figma: 80 top / 120 bottom (asymmetric) */
.clients-ready .section-heading { color: #222; } /* Figma Secondary/Text */

.clients-ready-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--adv-gap);
	align-items: start;
}

.clients-ready-details {
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 652px;
}

.clients-ready-body {
	font-family: var(--adv-font);
	font-size: 18px; /* Figma EN 18px (VI 20px override below) */
	line-height: 1.4; /* Figma EN 1.4 (VI 1.5 override below) */
	text-transform: uppercase;
	color: #222;
	margin: 0;
	white-space: pre-line;
}

@media (max-width: 860px) {
	.clients-ready-intro { grid-template-columns: 1fr; gap: 24px; }
	.clients-ready-details { gap: 40px; }
	.cta-row { gap: 24px; }
}