/* ============ Design tokens ============ */
:root {
	--vo-navy: #0d2a44;
	--vo-navy-2: #123a5c;
	--vo-navy-3: #081b2d;
	--vo-charcoal: #1b1f24;
	--vo-white: #ffffff;
	--vo-neutral-50: #f6f7f9;
	--vo-neutral-100: #eef0f3;
	--vo-neutral-200: #e2e5ea;
	--vo-neutral-400: #9aa1ab;
	--vo-neutral-500: #6b7280;
	--vo-accent: #c9a24b;
	--vo-accent-dark: #a9822f;
	--vo-steel: #3e7cb1;

	--vo-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--vo-container: 1240px;
	--vo-radius: 6px;
	--vo-radius-lg: 10px;
	--vo-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vo-topbar-h: 0px; /* topbar removed; kept at 0 (rather than deleting the variable) so .vo-header's `top` offset and its min-height calc() below still resolve correctly */
	--vo-header-h: 88px; /* header height alone, now that the topbar is gone — every existing offset (page-hero padding, sticky sidebar, 404) that reads --vo-header-h adjusts automatically */
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
	margin: 0;
	font-family: var(--vo-font);
	color: var(--vo-charcoal);
	background: var(--vo-white);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	overflow-x: hidden;
	width: 100%;
	position: relative;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

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

/* Site-wide fix: Elementor's own core CSS ships
   ".elementor-section.elementor-section-boxed > .elementor-container
   { max-width: 1140px }" — three chained classes, specificity (0,3,0).
   Every section-level rule in this file that sets
   "max-width: var(--vo-container)" on .elementor-container (Who We Are,
   Services, Global Logistics, Why Vihar, How It Works, Blog, Contact,
   Footer, and more) only reaches two classes, (0,2,0), so Elementor's
   1140px silently won on every single one of them — the actual content
   column has been ~100px narrower than intended site-wide, with extra
   empty margin on wide screens, regardless of what each section's own
   CSS declared. One !important override here, matching Elementor's own
   selector exactly, fixes every section at once rather than patching
   each individually. */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--vo-container) !important;
}

.elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

.vo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vo-navy);
	color: #fff;
	padding: 12px 20px;
	z-index: 9999;
}
.vo-skip-link:focus { left: 12px; top: 12px; }

/* ============ Type scale ============ */
.vo-eyebrow {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 16px;
	display: inline-block;
}
.vo-eyebrow--dark { color: var(--vo-accent-dark); }

.vo-h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--vo-navy);
}
.vo-h1--light { color: #fff; }

.vo-h2 {
	font-size: clamp(2.1rem, 3.6vw, 3.1rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--vo-navy);
	max-width: 40ch;
}
.vo-h2--light { color: #fff; }

/* Elementor wraps heading widgets in a container div — when .vo-h1/.vo-h2
   are applied as an Elementor "CSS Classes" setting they land on that
   wrapper, not the <h1>/<h2> itself, so restate the same rules as
   descendants of .elementor-heading-title too. */
.vo-h1 .elementor-heading-title { text-align: left !important; font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; color: var(--vo-navy) !important; }
.vo-h2 .elementor-heading-title { text-align: left !important; font-size: clamp(2.1rem, 3.6vw, 3.1rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; color: var(--vo-navy) !important; max-width: 40ch !important; }
.vo-h1--light .elementor-heading-title, .vo-h2--light .elementor-heading-title { color: #fff !important; }

.vo-section { padding: 96px 0; }
.vo-section__head { max-width: 640px; margin-bottom: 56px; }

@media (max-width: 782px) {
	.vo-section { padding: 64px 0; }
}

/* ============ Buttons ============ */
.vo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: var(--vo-radius);
	font-weight: 700;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: transform 0.25s var(--vo-ease), background-color 0.25s var(--vo-ease), color 0.25s var(--vo-ease), border-color 0.25s var(--vo-ease);
	white-space: nowrap;
}
.vo-btn:hover { transform: translateY(-2px); }
.vo-btn--sm { padding: 10px 18px; font-size: 0.85rem; }
.vo-btn--lg { padding: 16px 32px; font-size: 1rem; }

.vo-btn--accent { background: var(--vo-accent); color: var(--vo-navy-3); }
.vo-btn--accent:hover { background: var(--vo-accent-dark); }

.vo-btn--outline { border-color: var(--vo-navy); color: var(--vo-navy); background: transparent; }
.vo-btn--outline:hover { background: var(--vo-navy); color: #fff; }

.vo-btn--outline-light { border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; }
.vo-btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.vo-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--vo-navy);
	border-bottom: 1px solid var(--vo-navy);
	padding-bottom: 2px;
	transition: gap 0.25s var(--vo-ease), color 0.25s var(--vo-ease);
}
.vo-text-link:hover { gap: 12px; color: var(--vo-accent-dark); }

/* ============ Reveal-on-scroll ============ */
.vo-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--vo-ease), transform 0.7s var(--vo-ease);
	transition-delay: calc(var(--vo-delay, 0) * 90ms);
}
.vo-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ Topbar ============ */
.vo-topbar {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	z-index: 1001 !important;
	height: var(--vo-topbar-h);
	background: var(--vo-navy-3);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vo-topbar__inner {
	max-width: var(--vo-container);
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.vo-topbar__left { display: flex; align-items: center; gap: 24px; }
.vo-topbar__hours { color: rgba(255,255,255,0.55); font-size: 0.82rem; font-weight: 600; }
.vo-topbar__inner a {
	color: rgba(255,255,255,0.75);
	font-size: 0.82rem;
	font-weight: 600;
	transition: color 0.2s var(--vo-ease);
}
.vo-topbar__inner a:hover { color: var(--vo-accent); }
.vo-topbar__track { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 900px) { .vo-topbar__hours { display: none; } }
@media (max-width: 640px) {
	.vo-topbar__left a:last-child { display: none; }
	.vo-topbar__track span { display: none; }
}

/* ============ Header ============ */
.vo-header {
	position: fixed !important;
	top: var(--vo-topbar-h) !important; left: 0 !important; right: 0 !important;
	z-index: 1000 !important;
	min-height: calc(var(--vo-header-h) - var(--vo-topbar-h));
	display: flex !important;
	align-items: center;
	background: var(--vo-navy-3) !important;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: min-height 0.3s var(--vo-ease), box-shadow 0.3s var(--vo-ease);
}
.vo-header.is-scrolled {
	min-height: 72px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.vo-header > .elementor-container {
	width: 100% !important; max-width: var(--vo-container); margin: 0 auto; padding: 14px 24px;
	flex-wrap: nowrap !important; align-items: center !important; gap: 20px;
}
/* Trimmed logo asset is a wider aspect ratio (5.6:1, tight-cropped)
   than the original untrimmed file (4.3:1, wide empty margins) — the
   display height comes down slightly so the rendered width still fits
   the header's logo column instead of overflowing it. */
.vo-header-logo img { height: 42px !important; width: auto !important; max-width: none !important; image-rendering: -webkit-optimize-contrast; }
@media (max-width: 1080px) { .vo-header-logo img { height: 34px !important; } }
@media (max-width: 480px) { .vo-header-logo img { height: 30px !important; } }
.vo-header .elementor-column {
	width: auto !important; max-width: none !important; flex: 0 0 auto !important;
}
.vo-header .elementor-widget-image { display: flex; align-items: center; }
/* Logo stays pinned left; this auto right-margin on the FIRST column
   (the logo) consumes all the row's free space itself, pushing every
   column after it — nav, phone, CTA — into one tight block flush
   against the container's true right edge. margin-left:auto only works
   as a flex-space-eating trick when it sits on an actual flex item of
   the row; .vo-header-nav-wrap is a wrapper nested inside the nav
   column, not the column itself, so putting the auto margin there was a
   no-op and left the whole nav+phone+CTA group packed at flex-start
   with a large empty gap before the right edge. Anchoring it to
   :first-child instead is robust regardless of which wrapper classes
   Elementor assigns inside each column. */
.vo-header > .elementor-container > .elementor-column:first-child {
	margin-right: auto !important;
}

.vo-menu-link, .vo-header-cta, .vo-hamburger-btn {
	white-space: nowrap;
}
.vo-menu-link a, .vo-header-cta a {
	font-family: var(--vo-font);
}
.vo-menu-link .elementor-button,
.vo-header-cta .elementor-button,
.vo-hamburger-btn .elementor-button {
	background: transparent !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.94rem;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: none !important;
	transition: background-color 0.25s var(--vo-ease);
}
.vo-menu-link .elementor-button:hover { background: rgba(255,255,255,0.14) !important; }
.vo-header-cta .elementor-button {
	background: var(--vo-accent) !important;
	color: var(--vo-navy-3) !important;
	font-weight: 700;
	padding: 12px 22px;
}
.vo-header-cta .elementor-button:hover { background: var(--vo-accent-dark) !important; }
.vo-header-nav-wrap { display: flex; }
.vo-header-nav-wrap .vo-menu-item.vo-has-dropdown { position: relative; }
.vo-header-nav-wrap .vo-submenu { left: 50%; transform: translateX(-50%) translateY(8px); }
.vo-header-nav-wrap .vo-has-dropdown:hover .vo-submenu,
.vo-header-nav-wrap .vo-has-dropdown:focus-within .vo-submenu { transform: translateX(-50%) translateY(0); }
.vo-header-phone-wrap { color: #fff; }
.vo-header-phone-wrap .vo-phone-link { color: #fff; font-weight: 700; font-size: 0.9rem; }
.vo-hamburger-btn { display: none; }
.vo-hamburger-btn .elementor-button {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	padding: 10px 14px;
}
@media (max-width: 1080px) {
	/* The mobile drawer (vo_render_mobile_menu) already carries its own
	   phone link and "Get a Quote" button, so the header-bar CTA is pure
	   redundant width here — left visible, it pushed the hamburger button
	   itself clean off the right edge of narrow viewports since the row
	   is flex-shrink:0 and can't compress to make room.
	   The nav-link hide rule is scoped to .vo-header-nav-wrap specifically
	   (rather than bare .vo-menu-link) because the mobile drawer's own
	   list reuses the same .vo-menu-link/.vo-menu-item classes for its
	   dropdown styling — an unscoped rule here would hide the drawer's
	   menu items too, leaving it open but empty. */
	.vo-header-nav-wrap .vo-menu-link, .vo-header-phone-wrap, .vo-header-cta { display: none !important; }
	.vo-hamburger-btn { display: block; }
}
@media (min-width: 1081px) {
	.vo-hamburger-btn { display: none !important; }
}

.vo-header__inner {
	max-width: var(--vo-container);
	margin: 0 auto;
	width: 100%;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.vo-logo { display: inline-flex; align-items: center; }
.vo-logo__img { height: 42px; width: auto; }

.vo-nav { flex: 1; display: flex; justify-content: center; }
.vo-menu { display: flex; align-items: center; gap: 6px; position: relative; }
.vo-menu-item { position: relative; }
.vo-menu-link {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 0.94rem;
	border-radius: 999px;
	color: #fff;
	transition: background-color 0.25s var(--vo-ease), color 0.25s var(--vo-ease);
}
.vo-menu-link:hover, .vo-menu-item.is-current .vo-menu-link { background: rgba(255,255,255,0.14); color: #fff; }
.vo-chevron { transition: transform 0.25s var(--vo-ease); }
.vo-menu-item.vo-has-dropdown:hover .vo-chevron { transform: rotate(180deg); }

.vo-submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 260px;
	background: #fff;
	border-radius: var(--vo-radius-lg);
	box-shadow: 0 20px 50px rgba(13,42,68,0.16);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s var(--vo-ease), transform 0.25s var(--vo-ease), visibility 0.25s;
}
.vo-menu-item.vo-has-dropdown:hover > .vo-submenu,
.vo-menu-item.vo-has-dropdown:focus-within > .vo-submenu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.vo-submenu .vo-menu-link { color: var(--vo-charcoal); border-radius: var(--vo-radius); padding: 12px 14px; }
.vo-submenu .vo-menu-link:hover { background: var(--vo-neutral-50); color: var(--vo-navy); }

/* Nested (second-level) flyout — e.g. Services > Warehousing > Private
   Warehousing / Custom Bonded Warehousing — opens to the side instead of
   below, so it doesn't stack under its own parent submenu. The direct-child
   combinator above already scopes :hover reveal to one level at a time. */
.vo-submenu .vo-submenu {
	top: -10px;
	left: calc(100% + 8px);
	min-width: 240px;
	transform: translateX(8px);
}
.vo-submenu .vo-has-dropdown:hover > .vo-submenu,
.vo-submenu .vo-has-dropdown:focus-within > .vo-submenu {
	transform: translateX(0);
}
.vo-submenu .vo-has-dropdown > .vo-menu-link .vo-chevron { transform: rotate(-90deg); }
.vo-submenu .vo-has-dropdown:hover > .vo-menu-link .vo-chevron { transform: rotate(-90deg); }

.vo-header__actions { display: flex; align-items: center; gap: 14px; }
.vo-phone-link {
	display: flex; align-items: center; gap: 8px;
	font-weight: 700; font-size: 0.9rem;
	color: #fff;
}

.vo-hamburger {
	display: none;
	background: none; border: none; padding: 8px;
	flex-direction: column; gap: 5px;
}
.vo-hamburger span { width: 22px; height: 2px; background: #fff; transition: transform 0.25s var(--vo-ease), opacity 0.25s; }

@media (max-width: 960px) {
	.vo-nav, .vo-phone-link { display: none; }
	.vo-hamburger { display: flex; }
	.vo-header__inner { padding: 0 20px; gap: 12px; }
	.vo-header__actions { gap: 10px; }
}

@media (max-width: 420px) {
	.vo-logo__img { height: 32px; }
	.vo-header__actions .vo-btn--sm { padding: 9px 14px; font-size: 0.82rem; }
}

/* ============ Mobile menu ============ */
.vo-mobile-menu {
	position: fixed; inset: 0;
	background: var(--vo-navy-3);
	z-index: 1100;
	padding: 110px 28px 40px;
	transform: translateX(100%);
	transition: transform 0.4s var(--vo-ease);
	overflow-y: auto;
}
.vo-mobile-menu.is-open { transform: translateX(0); }
.vo-mobile-menu__list { display: flex; flex-direction: column; }
.vo-menu-link-row { display: flex; align-items: center; }
.vo-mobile-menu .vo-menu-link-row { border-bottom: 1px solid rgba(255,255,255,0.1); }
.vo-mobile-menu .vo-menu-link { flex: 1; color: #fff; padding: 16px 4px; font-size: 1.15rem; border-radius: 0; }
/* The link's own chevron is a desktop-only dropdown indicator; in the
   mobile menu the separate .vo-submenu-toggle button is what shows/opens
   the submenu, so without this both chevrons rendered side by side. */
.vo-mobile-menu .vo-menu-link .vo-chevron { display: none; }
/* Submenus start collapsed and open only via their own toggle button, not
   automatically — previously every submenu was forced permanently open
   (position:static + visibility:visible with no way to collapse it), which
   made a two-level menu (Services > Warehousing > its two sub-services)
   dump everything open at once. */
.vo-mobile-menu .vo-submenu { display: none; position: static; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; padding-left: 16px; }
.vo-mobile-menu .vo-menu-item.is-submenu-open > .vo-submenu { display: block; }
.vo-mobile-menu .vo-submenu .vo-menu-link-row { border-bottom-color: rgba(255,255,255,0.06); }
.vo-mobile-menu .vo-submenu .vo-menu-link { color: rgba(255,255,255,0.75); font-size: 1rem; padding: 12px 4px; }
.vo-submenu-toggle { display: none; }
.vo-mobile-menu .vo-submenu-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex-shrink: 0;
	background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer;
}
.vo-mobile-menu .vo-submenu-toggle svg { transition: transform 0.25s var(--vo-ease); }
.vo-mobile-menu .vo-menu-item.is-submenu-open > .vo-menu-link-row .vo-submenu-toggle svg { transform: rotate(180deg); }
.vo-mobile-menu .vo-menu-item.is-submenu-open > .vo-menu-link-row .vo-submenu-toggle { color: #fff; }
.vo-mobile-menu__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.vo-mobile-menu__actions .vo-btn { justify-content: center; }

.vo-mobile-menu-close-btn { display: none; }

/* ============ Hero ============ */
.vo-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--vo-navy-3);
}
.vo-hero__media { position: absolute; inset: 0; }
.vo-hero__video, .vo-hero__fallback-bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.vo-hero__fallback-bg {
	background:
		radial-gradient(circle at 20% 20%, rgba(62,124,177,0.35), transparent 55%),
		radial-gradient(circle at 80% 70%, rgba(201,162,75,0.18), transparent 50%),
		linear-gradient(160deg, var(--vo-navy) 0%, var(--vo-navy-3) 65%);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.vo-hero.vo-video-unavailable .vo-hero__fallback-bg { opacity: 1; }
.vo-hero.vo-video-unavailable .vo-hero__video { display: none; }

.vo-hero__gradient {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,27,45,0.55) 0%, rgba(8,27,45,0.2) 35%, rgba(8,27,45,0.55) 100%);
}

.vo-hero__content {
	position: relative;
	z-index: 2;
	max-width: var(--vo-container);
	margin: 116px auto;
	padding: 0 24px;
	width: 100%;
}
.vo-hero__title { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; max-width: 16ch; }
.vo-hero__subtitle { color: rgba(255,255,255,0.85); font-size: 1.15rem; max-width: 46ch; margin-top: 24px; line-height: 1.65; }
.vo-hero__actions { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

.vo-hero__scroll {
	position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
	width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.6); border-radius: 20px;
	z-index: 2;
}
.vo-hero__scroll span {
	position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
	width: 4px; height: 8px; border-radius: 2px; background: #fff;
	animation: vo-scroll-dot 1.8s infinite;
}
@keyframes vo-scroll-dot { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 20px; } }

@media (max-width: 782px) {
	.vo-hero { min-height: 100vh; }
	.vo-hero__scroll { display: none; }
}

/* ============ Intro ============ */
.vo-intro__grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.vo-intro__lead { font-size: 1.4rem; font-weight: 700; color: var(--vo-navy); line-height: 1.45; max-width: 34ch; }
.vo-intro__body { color: var(--vo-neutral-500); font-size: 1.05rem; max-width: 58ch; margin-top: 20px; }
.vo-intro__content .vo-text-link { margin-top: 24px; }
@media (max-width: 782px) { .vo-intro__grid { grid-template-columns: 1fr; gap: 20px; } }

/* ============ Services grid (homepage) ============ */
.vo-services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.vo-service-card {
	position: relative;
	display: flex; flex-direction: column;
	padding: 32px 28px;
	background: var(--vo-neutral-50);
	border: 1px solid var(--vo-neutral-200);
	border-radius: var(--vo-radius-lg);
	transition: transform 0.3s var(--vo-ease), box-shadow 0.3s var(--vo-ease), background-color 0.3s var(--vo-ease), border-color 0.3s var(--vo-ease);
}
@media (max-width: 560px) { .vo-service-card { padding: 24px 20px; } }
.vo-service-card:hover {
	transform: translateY(-6px);
	background: var(--vo-navy);
	border-color: var(--vo-navy);
	box-shadow: 0 24px 50px rgba(13,42,68,0.2);
}
.vo-service-card__number { font-size: 0.8rem; font-weight: 800; color: var(--vo-accent-dark); letter-spacing: 0.08em; }
.vo-service-card:hover .vo-service-card__number { color: var(--vo-accent); }
.vo-service-card__icon { color: var(--vo-navy); margin: 18px 0 6px; transition: color 0.3s var(--vo-ease); }
.vo-service-card:hover .vo-service-card__icon { color: var(--vo-accent); }
.vo-service-card__title { font-size: 1.15rem; font-weight: 800; color: var(--vo-navy); margin-top: 10px; transition: color 0.3s var(--vo-ease); }
.vo-service-card:hover .vo-service-card__title { color: #fff; }
.vo-service-card__intro { font-size: 0.92rem; color: var(--vo-neutral-500); margin-top: 10px; line-height: 1.55; flex: 1; transition: color 0.3s var(--vo-ease); }
.vo-service-card:hover .vo-service-card__intro { color: rgba(255,255,255,0.75); }
.vo-service-card__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; color: var(--vo-navy); margin-top: 20px; transition: color 0.3s var(--vo-ease), gap 0.3s var(--vo-ease); }
.vo-service-card:hover .vo-service-card__link { color: var(--vo-accent); gap: 12px; }

@media (max-width: 1080px) { .vo-services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .vo-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vo-services-grid { grid-template-columns: 1fr; } }

.vo-warehousing-subservices {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--vo-neutral-200);
}
.vo-warehousing-subservices__label { font-weight: 700; color: var(--vo-navy); font-size: 0.92rem; }
.vo-warehousing-subservices__pill {
	display: inline-flex; align-items: center; padding: 8px 18px;
	border: 1px solid var(--vo-neutral-200); border-radius: 999px;
	color: var(--vo-navy); font-weight: 600; font-size: 0.88rem;
	transition: background-color 0.25s var(--vo-ease), border-color 0.25s var(--vo-ease), color 0.25s var(--vo-ease);
}
.vo-warehousing-subservices__pill:hover { background: var(--vo-navy); border-color: var(--vo-navy); color: #fff; }
@media (max-width: 560px) { .vo-warehousing-subservices { flex-direction: column; align-items: flex-start; } }

/* ============ Services carousel (image cards, horizontal scroll-snap) ============ */
.vo-services-carousel { position: relative; }
.vo-services-carousel__track {
	display: flex; gap: 24px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 4px 4px 12px;
	margin: 0 -4px;
	scrollbar-width: none;
}
.vo-services-carousel__track::-webkit-scrollbar { display: none; }
.vo-service-card--carousel {
	flex: 0 0 300px; scroll-snap-align: start;
	padding: 0; overflow: hidden;
}
.vo-service-card__media { display: block; aspect-ratio: 4 / 3; background: var(--vo-neutral-200); overflow: hidden; }
.vo-service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--vo-ease); display: block; }
.vo-service-card--carousel:hover .vo-service-card__media img { transform: scale(1.06); }
.vo-service-card__body { display: flex; flex-direction: column; padding: 24px 24px 28px; flex: 1; }
.vo-service-card--carousel .vo-service-card__icon,
.vo-service-card--carousel .vo-service-card__number { display: none; }
.vo-service-card--carousel .vo-service-card__title { display: block; margin-top: 0; }
.vo-service-card--carousel .vo-service-card__intro { display: block; }
/* Prev/next sit on the carousel's own left/right edges, vertically
   centered on the image (which is a fixed aspect-ratio, so every card's
   image is the same height regardless of how tall its text ends up). */
.vo-services-carousel__nav { position: static; }
.vo-services-carousel__btn {
	/* --vo-carousel-card-h is measured and set by JS from the card's
	   actual rendered height (image + text together), then halved here —
	   a hardcoded px guess drifts off-center the moment the real card
	   width/height differs from whatever the guess assumed. ~500px is
	   only the no-JS fallback. */
	position: absolute; top: calc(4px + var(--vo-carousel-card-h, 500px) / 2); transform: translateY(-50%); z-index: 2;
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--vo-neutral-200); background: #fff; color: var(--vo-navy);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 8px 24px rgba(13,42,68,0.15);
	transition: background-color 0.25s var(--vo-ease), border-color 0.25s var(--vo-ease), color 0.25s var(--vo-ease);
}
.vo-services-carousel__btn--prev { left: 0; }
.vo-services-carousel__btn--next { right: 0; }
.vo-services-carousel__btn:hover { background: var(--vo-navy); border-color: var(--vo-navy); color: #fff; }
.vo-services-carousel__btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
@media (max-width: 560px) { .vo-service-card--carousel { flex-basis: 260px; } }

/* Related-services grid on a service detail page: the other three
   services, so three columns instead of the homepage's four. */
.vo-services-grid--related { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .vo-services-grid--related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vo-services-grid--related { grid-template-columns: 1fr; } }

/* ============ Global logistics (cinematic) ============ */
.vo-global {
	position: relative; overflow: hidden;
	padding: 130px 0 100px;
	background:
		linear-gradient(175deg, rgba(8,27,45,0.74) 0%, rgba(8,27,45,0.5) 45%, rgba(8,27,45,0.8) 100%),
		url('../images/global-logistics-port-aerial.webp');
	background-size: cover;
	background-position: center;
}
.vo-global-content { position: relative; z-index: 1; max-width: 720px; }
.vo-global__text { color: rgba(255,255,255,0.82); margin-top: 20px; max-width: 56ch; line-height: 1.75; font-size: 1.12rem; }
.vo-global__cta { margin-top: 32px; display: inline-block; }
.vo-global__cta .elementor-button {
	background: var(--vo-accent) !important; color: var(--vo-navy-3) !important; font-weight: 700;
	padding: 15px 30px !important; border-radius: var(--vo-radius);
	display: inline-flex; align-items: center; box-shadow: none !important;
}
.vo-global__cta .elementor-button::after { content: '\2192'; margin-left: 10px; transition: transform 0.3s var(--vo-ease); display: inline-block; }
.vo-global__cta .elementor-button:hover { background: var(--vo-accent-dark) !important; transform: none !important; }
.vo-global__cta .elementor-button:hover::after { transform: translateX(6px); }

/* Journey: Origin -> Customs -> Freight -> Destination, four small
   icon-box panels in a real Elementor inner-section (not one giant
   raw-HTML block) so each icon/title/description stays independently
   editable, connected by a thin dashed line across the row. */
.vo-journey-row { margin-top: 64px; position: relative; z-index: 1; }
.vo-journey-row.elementor-inner-section { max-width: 100% !important; }
.vo-journey-row > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}
.vo-journey-row .elementor-column { width: auto !important; max-width: none !important; }
.vo-journey-row::before {
	content: '';
	position: absolute;
	top: 45px; left: 12.5%; right: 12.5%;
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 8px, transparent 8px 16px);
	background-size: 200% 100%;
	animation: vo-journey-dash 5s linear infinite;
	z-index: 0;
}
@keyframes vo-journey-dash { to { background-position: -32px 0; } }
.vo-journey-panel {
	position: relative; z-index: 1;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 14px;
	padding: 26px 22px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.3s var(--vo-ease), border-color 0.3s var(--vo-ease);
}
.vo-journey-panel:hover { background: rgba(255,255,255,0.1); border-color: rgba(201,162,75,0.4); }
.vo-journey-panel .elementor-icon-box-icon { margin-bottom: 14px; }
.vo-journey-panel .elementor-icon-box-icon .elementor-icon {
	width: 52px !important; height: 52px !important; border-radius: 50% !important;
	background: rgba(201,162,75,0.16) !important; border: 1px solid rgba(201,162,75,0.45) !important;
	color: var(--vo-accent) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.25rem !important;
}
.vo-journey-panel .elementor-icon-box-icon .elementor-icon svg { fill: var(--vo-accent) !important; width: 1.1em !important; height: 1.1em !important; }
.vo-journey-panel .elementor-icon-box-title { margin: 0; }
.vo-journey-panel .elementor-icon-box-title span { color: #fff !important; font-size: 1.05rem !important; font-weight: 800 !important; }
.vo-journey-panel .elementor-icon-box-description { color: rgba(255,255,255,0.72) !important; font-size: 0.92rem !important; margin-top: 6px !important; line-height: 1.5 !important; }

@media (max-width: 900px) {
	.vo-global { padding: 90px 0 70px; }
	.vo-journey-row::before { display: none; }
	.vo-journey-row > .elementor-container { grid-template-columns: 1fr; gap: 14px; }
	.vo-journey-panel .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center; gap: 16px; text-align: left !important; }
	.vo-journey-panel .elementor-icon-box-icon { margin-bottom: 0 !important; flex-shrink: 0; }
	.vo-journey-panel .elementor-icon-box-content { text-align: left !important; }
	.vo-journey-panel:not(:first-child) { position: relative; }
	.vo-journey-panel:not(:first-child)::before {
		content: ''; position: absolute; top: -15px; left: 48px;
		width: 2px; height: 14px;
		background: repeating-linear-gradient(180deg, rgba(255,255,255,0.4) 0 4px, transparent 4px 8px);
	}
}

/* ============ Why us ============ */
.vo-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vo-why__item { position: relative; border-top: 2px solid var(--vo-neutral-200); padding-top: 22px; overflow: hidden; transition: border-color 0.3s var(--vo-ease); }
.vo-why__item:hover { border-top-color: var(--vo-accent); }
.vo-why__index {
	font-size: 0.85rem; font-weight: 800; color: var(--vo-accent-dark); position: relative; z-index: 1;
}
.vo-why__item h3 { margin-top: 14px; font-size: 1.15rem; font-weight: 800; color: var(--vo-navy); position: relative; z-index: 1; }
.vo-why__item p { margin-top: 10px; color: var(--vo-neutral-500); font-size: 0.95rem; line-height: 1.6; position: relative; z-index: 1; }
@media (max-width: 1080px) { .vo-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vo-why__grid { grid-template-columns: 1fr; } }

/* ============ Process ============ */
/* Service detail pages reuse the numbered-circle/connector language
   above via a 4-column track (one step per service-page process stage)
   instead of the 5-column homepage track. */
.vo-service-process { background: var(--vo-neutral-50); }
.vo-service-process__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.vo-service-process__track::before {
	content: '';
	position: absolute; top: 22px; left: 8%; right: 8%; height: 1px;
	background: var(--vo-neutral-200);
}
@media (max-width: 900px) {
	.vo-service-process__track { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.vo-service-process__track::before { display: none; }
}
@media (max-width: 560px) { .vo-service-process__track { grid-template-columns: 1fr; } }

.vo-process__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.vo-process__track::before {
	content: '';
	position: absolute; top: 22px; left: 6%; right: 6%; height: 1px;
	background: var(--vo-neutral-200);
}
.vo-process__step { position: relative; padding-top: 8px; }
.vo-process__number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--vo-navy); color: #fff; font-weight: 800; font-size: 0.9rem;
	position: relative; z-index: 1;
}
.vo-process__step h3 { margin-top: 18px; font-size: 1.05rem; font-weight: 800; color: var(--vo-navy); }
.vo-process__step p { margin-top: 8px; color: var(--vo-neutral-500); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 900px) {
	.vo-process__track { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.vo-process__track::before { display: none; }
}
@media (max-width: 560px) { .vo-process__track { grid-template-columns: 1fr; } }

/* Evolution track (About page) — same step/number look as .vo-process__step
   but a 3-column line, not 5, so it doesn't leave trailing empty columns. */
.vo-evolution-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; margin-top: 56px; }
.vo-evolution-track::before { content: ''; position: absolute; top: 22px; left: 6%; right: 6%; height: 1px; background: var(--vo-neutral-200); }
@media (max-width: 700px) { .vo-evolution-track { grid-template-columns: 1fr; gap: 32px; } .vo-evolution-track::before { display: none; } }

/* Stats strip (About page — "Who We Are" summary numbers) */
.vo-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vo-stats-strip__item { text-align: center; padding: 28px 12px; background: var(--vo-neutral-50); border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius-lg); }
.vo-stats-strip__number { display: block; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--vo-navy); line-height: 1; }
.vo-stats-strip__label { display: block; margin-top: 10px; font-size: 0.88rem; color: var(--vo-neutral-500); font-weight: 600; }
@media (max-width: 700px) { .vo-stats-strip { grid-template-columns: repeat(2, 1fr); } }

.vo-section-lead { color: var(--vo-neutral-500); font-size: 1.1rem; line-height: 1.75; max-width: 72ch; margin-top: 18px; }
.vo-mission-head .elementor-container { max-width: var(--vo-container); margin: 0 auto; }

/* ============ CTA ============ */
.vo-cta { position: relative; background: var(--vo-navy); overflow: hidden; padding: 100px 0; }
.vo-cta__pattern {
	position: absolute; inset: 0;
	background: radial-gradient(circle at 15% 20%, rgba(201,162,75,0.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(62,124,177,0.25), transparent 45%);
}
.vo-cta__inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.vo-cta__heading { color: #fff; margin: 0 auto; }
.vo-cta__subtext { color: rgba(255,255,255,0.75); margin-top: 18px; font-size: 1.15rem; }
.vo-cta__actions { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* ============ Footer CTA strip ============ */
.vo-footer-cta { background: var(--vo-neutral-50); border-top: 1px solid var(--vo-neutral-200); border-bottom: 1px solid var(--vo-neutral-200); padding: 40px 0; }
.vo-footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vo-footer-cta__eyebrow { font-weight: 800; color: var(--vo-navy); font-size: 0.95rem; }
.vo-footer-cta__text { color: var(--vo-neutral-500); margin-top: 6px; max-width: 46ch; }
.vo-footer-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ Contact teaser (home) ============ */
.vo-contact-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vo-contact-teaser__text { color: var(--vo-neutral-500); margin: 18px 0 28px; max-width: 44ch; }
.vo-contact-teaser__cards { display: flex; flex-direction: column; gap: 16px; }
.vo-contact-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 20px 24px; border-radius: var(--vo-radius-lg);
	background: var(--vo-neutral-50); border: 1px solid var(--vo-neutral-200);
}
.vo-contact-card__label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vo-accent-dark); }
.vo-contact-card a { font-weight: 700; color: var(--vo-navy); }
@media (max-width: 900px) { .vo-contact-teaser__grid { grid-template-columns: 1fr; } }

/* ============ Footer ============ */
.vo-footer { background: var(--vo-navy-3); color: rgba(255,255,255,0.7); padding: 80px 0 0; }
.vo-footer__top {
	max-width: var(--vo-container); margin: 0 auto; padding: 0 24px 56px;
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.vo-footer__desc { margin: 18px 0 20px; font-size: 0.92rem; line-height: 1.65; max-width: 40ch; }
.vo-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: background 0.25s; }
.vo-footer__social:hover { background: var(--vo-accent); color: var(--vo-navy-3); }
.vo-footer__col h3 { color: #fff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.vo-footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.vo-footer__col a { font-size: 0.92rem; transition: color 0.2s; }
.vo-footer__col a:hover { color: #fff; }
.vo-footer__contact li { font-size: 0.92rem; line-height: 1.5; }
.vo-footer__bottom {
	max-width: var(--vo-container); margin: 0 auto; padding: 24px 24px 32px;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
	font-size: 0.85rem;
}
.vo-footer__bottom nav ul { display: flex; gap: 20px; }
.vo-footer__bottom a:hover { color: #fff; }

@media (max-width: 900px) { .vo-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vo-footer__top { grid-template-columns: 1fr; } }

/* ============ Page hero (inner pages) ============ */
.vo-page-hero { padding: calc(var(--vo-header-h) + 64px) 0 64px; background: var(--vo-neutral-50); border-bottom: 1px solid var(--vo-neutral-200); }
.vo-page-hero__subtitle { color: var(--vo-neutral-500); font-size: 1.1rem; max-width: 60ch; margin-top: 18px; }

/* Compact page banner (About, Services) — a short image strip with just a
   breadcrumb and title, not the taller service-detail hero. */
.vo-page-banner {
	position: relative; overflow: hidden;
	min-height: 320px; display: flex; align-items: center;
	padding-top: var(--vo-header-h);
	background: var(--vo-navy-3);
}
.vo-page-banner__media { position: absolute; inset: 0; }
.vo-page-banner__img { width: 100%; height: 100%; object-fit: cover; }
.vo-page-banner__gradient { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,27,45,0.82) 0%, rgba(8,27,45,0.6) 55%, rgba(8,27,45,0.4) 100%); }
.vo-page-banner__content { position: relative; z-index: 1; padding: 40px 24px; }
.vo-page-banner .vo-breadcrumbs { margin-bottom: 14px; }
.vo-page-banner .vo-breadcrumbs ol { font-size: 0.9rem; }
.vo-page-banner .vo-breadcrumbs, .vo-page-banner .vo-breadcrumbs a, .vo-page-banner .vo-breadcrumbs li { color: rgba(255,255,255,0.7); }
.vo-page-banner .vo-breadcrumbs li:not(:last-child)::after { content: '\2013'; color: rgba(255,255,255,0.5); }
.vo-page-banner .vo-breadcrumbs a:hover { color: #fff; }
.vo-page-banner .vo-breadcrumbs [aria-current="page"] { color: #fff; font-weight: 600; }
.vo-page-banner__title.vo-h1 { margin: 0; }
@media (max-width: 782px) { .vo-page-banner { min-height: 260px; } }

/* ============ Breadcrumbs ============ */
.vo-breadcrumbs { margin-bottom: 20px; }
.vo-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--vo-neutral-500); }
.vo-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--vo-neutral-400); }
.vo-breadcrumbs a { color: var(--vo-neutral-500); }
.vo-breadcrumbs a:hover { color: var(--vo-navy); }
.vo-breadcrumbs [aria-current="page"] { color: var(--vo-navy); font-weight: 600; }

/* ============ About ============ */
.vo-about-who__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; }
.vo-about-who__body { color: var(--vo-neutral-500); font-size: 1.05rem; line-height: 1.75; max-width: 62ch; }
@media (max-width: 782px) { .vo-about-who__grid { grid-template-columns: 1fr; gap: 20px; } }

.vo-mission-vision { background: var(--vo-neutral-50); }
.vo-mission-vision__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vo-mission-vision__card { background: #fff; border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius-lg); padding: 36px; }
.vo-mission-vision__card h3 { color: var(--vo-navy); font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.vo-mission-vision__card p { color: var(--vo-neutral-500); line-height: 1.7; }
@media (max-width: 782px) { .vo-mission-vision__grid { grid-template-columns: 1fr; } }

.vo-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vo-values__item { border-top: 2px solid var(--vo-neutral-200); padding-top: 22px; }
.vo-values__index { font-size: 0.85rem; font-weight: 800; color: var(--vo-accent-dark); }
.vo-values__item h3 { margin-top: 14px; font-size: 1.1rem; font-weight: 800; color: var(--vo-navy); }
.vo-values__item p { margin-top: 8px; color: var(--vo-neutral-500); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 1080px) { .vo-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vo-values__grid { grid-template-columns: 1fr; } }

/* ============ Service detail page ============ */
.vo-service-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--vo-navy-3); }
.vo-service-hero__media { position: absolute; inset: 0; }
.vo-service-hero__img { width: 100%; height: 100%; object-fit: cover; }
.vo-service-hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,27,45,0.35) 0%, rgba(8,27,45,0.55) 55%, rgba(8,27,45,0.92) 100%); }
.vo-service-hero__content { position: relative; z-index: 1; padding: calc(var(--vo-header-h) + 30px) 24px 56px; }
.vo-service-hero .vo-breadcrumbs, .vo-service-hero .vo-breadcrumbs a, .vo-service-hero .vo-breadcrumbs li { color: rgba(255,255,255,0.65); }
.vo-service-hero .vo-breadcrumbs [aria-current="page"] { color: #fff; }
.vo-service-hero__number { display: inline-block; color: var(--vo-accent); font-weight: 800; font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 8px; }
.vo-service-hero__intro { color: rgba(255,255,255,0.8); font-size: 1.15rem; max-width: 56ch; margin-top: 16px; }

.vo-service-detail__intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.vo-service-detail__content { color: var(--vo-neutral-500); font-size: 1.05rem; line-height: 1.8; max-width: 64ch; }
.vo-service-detail__content p { margin-bottom: 18px; }
.vo-service-detail__content .vo-text-link { margin-top: 8px; }
@media (max-width: 900px) { .vo-service-detail__intro-grid { grid-template-columns: 1fr; } }

.vo-service-detail__capabilities { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--vo-neutral-200); }
.vo-service-detail__capabilities h2 { font-size: 1.5rem; font-weight: 800; color: var(--vo-navy); margin-bottom: 24px; }
.vo-capabilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
.vo-capabilities-grid li {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 18px 20px; background: var(--vo-neutral-50);
	border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius-lg);
	font-size: 0.95rem; color: var(--vo-charcoal); line-height: 1.5;
	transition: border-color 0.25s var(--vo-ease), background-color 0.25s var(--vo-ease);
}
.vo-capabilities-grid li:hover { border-color: var(--vo-accent-dark); background: #fff; }
.vo-capabilities-grid svg { color: var(--vo-accent-dark); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 700px) { .vo-capabilities-grid { grid-template-columns: 1fr; } }

.vo-related-services { border-top: 1px solid var(--vo-neutral-200); }
.vo-related-services__grid { display: grid; grid-template-columns: 1fr 1fr; }
.vo-related-services__link { padding: 32px 24px; display: flex; flex-direction: column; gap: 6px; transition: background 0.25s; }
.vo-related-services__link:hover { background: var(--vo-neutral-50); }
.vo-related-services__link--prev { border-right: 1px solid var(--vo-neutral-200); }
.vo-related-services__link--next { text-align: right; align-items: flex-end; }
.vo-related-services__label { font-size: 0.78rem; font-weight: 800; color: var(--vo-accent-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.vo-related-services__title { font-weight: 800; color: var(--vo-navy); font-size: 1.1rem; }
@media (max-width: 640px) { .vo-related-services__grid { grid-template-columns: 1fr; } .vo-related-services__link--prev { border-right: none; border-bottom: 1px solid var(--vo-neutral-200); } .vo-related-services__link--next { text-align: left; align-items: flex-start; } }

/* ============ Career ============ */
/* Applied as an Elementor section's css_classes (see inc/elementor-helpers.php
   migration) — forcing grid on .elementor-container rather than trusting
   Elementor's own column widths, matching the .vo-who-we-are fix above. */
.vo-career-form-section__grid .elementor-container { max-width: var(--vo-container); margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1.3fr; gap: 56px; }
.vo-career-form-section__grid .elementor-column { width: auto !important; max-width: none !important; }
.vo-career-form-section__text { color: var(--vo-neutral-500); margin-top: 16px; max-width: 40ch; }
@media (max-width: 900px) { .vo-career-form-section__grid .elementor-container { grid-template-columns: 1fr; } }

/* ============ Forms ============ */
.vo-form-card { background: var(--vo-neutral-50); border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius-lg); padding: 36px; }
@media (max-width: 560px) { .vo-form-card { padding: 22px; } }
.vo-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vo-form__field { margin-bottom: 18px; }
.vo-form__field label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--vo-navy); margin-bottom: 8px; }
.vo-form__field input, .vo-form__field textarea, .vo-form__field select {
	width: 100%; padding: 13px 16px; border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius);
	background: #fff; color: var(--vo-charcoal); transition: border-color 0.2s, box-shadow 0.2s;
}
.vo-form__field input:focus, .vo-form__field textarea:focus, .vo-form__field select:focus {
	outline: none; border-color: var(--vo-navy); box-shadow: 0 0 0 3px rgba(13,42,68,0.1);
}
.vo-form__submit { width: 100%; justify-content: center; margin-top: 6px; }
.vo-form-notice { padding: 14px 18px; border-radius: var(--vo-radius); margin-bottom: 22px; font-weight: 600; font-size: 0.92rem; }
.vo-form-notice--success { background: #e7f6ec; color: #1e6b3a; border: 1px solid #bfe6cc; }
.vo-form-notice--error { background: #fbe9e9; color: #a3271f; border: 1px solid #f3c6c3; }
@media (max-width: 560px) { .vo-form__row { grid-template-columns: 1fr; } }

/* ============ Contact page ============ */
/* Applied as an Elementor section's css_classes (see inc/elementor-helpers.php
   migration) — forcing grid on .elementor-container rather than trusting
   Elementor's own column widths, matching the .vo-who-we-are fix above. */
.vo-contact-page__grid .elementor-container { max-width: var(--vo-container); margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1.3fr; gap: 56px; }
.vo-contact-page__grid .elementor-column { width: auto !important; max-width: none !important; }
.vo-contact-info h2 { font-size: 1.3rem; font-weight: 800; color: var(--vo-navy); margin-bottom: 24px; }
.vo-contact-info__list { display: flex; flex-direction: column; gap: 20px; }
.vo-contact-info__label { display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vo-accent-dark); margin-bottom: 4px; }
.vo-contact-info__list a, .vo-contact-info__list span:not(.vo-contact-info__label) { font-weight: 700; color: var(--vo-navy); }
.vo-contact-info__services { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--vo-neutral-200); }
.vo-contact-info__services h3 { font-size: 1rem; font-weight: 800; color: var(--vo-navy); margin-bottom: 14px; }
.vo-contact-info__services ul { display: flex; flex-direction: column; gap: 10px; }
.vo-contact-info__services a { color: var(--vo-neutral-500); font-weight: 600; }
.vo-contact-info__services a:hover { color: var(--vo-navy); }
@media (max-width: 900px) { .vo-contact-page__grid .elementor-container { grid-template-columns: 1fr; } }

/* ============ Legal / generic content ============ */
.vo-legal-content__inner { max-width: 760px; color: var(--vo-neutral-500); line-height: 1.8; }
.vo-legal-content__inner h2 { color: var(--vo-navy); font-size: 1.3rem; font-weight: 800; margin: 32px 0 12px; }
.vo-legal-content__inner p { margin-bottom: 16px; }

/* ============ 404 ============ */
.vo-404 { min-height: 80vh; display: flex; align-items: center; padding: calc(var(--vo-header-h) + 40px) 0 60px; }
.vo-404__inner { text-align: center; max-width: 560px; margin: 0 auto; }
.vo-404__text { color: var(--vo-neutral-500); margin-top: 16px; }
.vo-404__actions { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.vo-404__links { display: flex; justify-content: center; gap: 24px; margin-top: 40px; }
.vo-404__links a { font-weight: 700; color: var(--vo-navy); border-bottom: 1px solid var(--vo-neutral-200); padding-bottom: 2px; }

/* ============ Homepage v2: Who We Are ============ */
/* Elementor's column width settings (_column_size) don't reliably
   translate to real proportions here (see the services-showcase note
   above on that install-wide limitation) — measured at 30%/70% instead
   of the intended ~42%/58%, making the image look small relative to
   the text. Forcing it via grid, matching the same fix used elsewhere
   on this page. */
.vo-who-we-are .elementor-container { max-width: var(--vo-container); margin: 0 auto; display: grid !important; grid-template-columns: 0.75fr 1fr; align-items: center; gap: 48px; }
.vo-who-we-are .elementor-column { width: auto !important; max-width: none !important; }
.vo-who-img { border-radius: var(--vo-radius-lg); overflow: hidden; }
.vo-who-img img { width: 100%; height: 600px; object-fit: cover; transition: transform 0.6s var(--vo-ease); }
.vo-who-img:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
	.vo-who-we-are .elementor-container { grid-template-columns: 1fr; }
	.vo-who-img img { height: 300px; }
}
.vo-who-content .vo-h2 .elementor-heading-title { max-width: 14ch; }
.vo-who-text { color: var(--vo-neutral-500); font-size: 1.15rem; line-height: 1.75; margin: 0px 0 10px; max-width: 60ch; }

/* Three-point trust row (Global Reach / End-to-End Solutions / Customer
   Focused). Styled through .elementor-column directly rather than a
   custom class — see the services-showcase note above on why
   _css_classes never reaches <column> elements in this install. */
.vo-who-trust-row.elementor-inner-section { margin: 4px 0 26px; max-width: 100% !important; }
.vo-who-trust-row > .elementor-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vo-who-trust-row .elementor-column { width: auto !important; max-width: none !important; }
.vo-who-trust-item .elementor-icon-box-wrapper { text-align: left !important; align-items: flex-start !important; }
.vo-who-trust-item .elementor-icon-box-content { text-align: left !important; }
.vo-who-trust-item .elementor-icon-box-icon { margin-bottom: 8px; }
.vo-who-trust-item .elementor-icon-box-icon .elementor-icon {
	width: 34px !important; height: 34px !important; border-radius: 50% !important;
	background: rgba(201,162,75,0.14) !important; color: var(--vo-accent-dark) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 0.9rem !important; border: none !important; box-shadow: none !important;
}
.vo-who-trust-item .elementor-icon-box-icon .elementor-icon svg { fill: var(--vo-accent-dark) !important; width: 1em !important; height: 1em !important; }
.vo-who-trust-item .elementor-icon-box-title span { font-size: 0.92rem !important; font-weight: 800 !important; color: var(--vo-navy) !important; }
.vo-who-trust-item .elementor-icon-box-description { font-size: 0.82rem !important; color: var(--vo-neutral-500) !important; margin-top: 4px !important; line-height: 1.45 !important; }
@media (max-width: 900px) {
	.vo-who-trust-row > .elementor-container { grid-template-columns: 1fr; gap: 14px; }
}
.elementor-9 .elementor-element.elementor-element-9f9ffa5 .elementor-icon-box-wrapper { gap: 0px; }
.elementor-9 .elementor-element.elementor-element-2da38ad .elementor-icon-box-wrapper { gap: 0px; }
.elementor-9 .elementor-element.elementor-element-f9c0e2c .elementor-icon-box-wrapper { gap: 0px; }

/* ============ Homepage v2: Services showcase (premium redesign) ============ */
.vo-services-head { padding: 80px 24px 0 !important; text-align: center; background-color: #faf7f1; }
.vo-services-head .elementor-container { max-width: 1100px; margin: 0 auto; }
.vo-services-head .vo-eyebrow { position: relative; padding-top: 18px; display: inline-block; }
.vo-services-head .vo-eyebrow::before {
	content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 40px; height: 2px; background: var(--vo-accent);
}
.vo-services-head .vo-h2 .elementor-heading-title { text-align: center !important; margin: 0 auto !important; max-width: 60ch !important; }
@media (min-width: 1025px) { .vo-services-head .vo-h2 .elementor-heading-title { white-space: nowrap; } }
.vo-services-head__lead { margin: 28px auto 0; max-width: 80ch; font-size: 1.12rem; color: var(--vo-neutral-500); line-height: 1.7; text-align: center; }

.vo-services-showcase {
	position: relative;
	overflow: hidden;
	background-color: #faf7f1;
	background-image: radial-gradient(rgba(13,42,68,0.08) 1px, transparent 1px);
	background-size: 22px 22px;
	padding: 64px 0 88px !important;
}
.vo-services-showcase::before {
	content: '';
	position: absolute;
	top: -140px; right: -140px;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201,162,75,0.12), transparent 70%);
	pointer-events: none;
}
.vo-services-showcase::after {
	content: '';
	position: absolute;
	bottom: -180px; left: -180px;
	width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(13,42,68,0.05), transparent 70%);
	pointer-events: none;
}
/* max-width needs !important plus matched specificity: the site-wide
   ".elementor-section.elementor-section-boxed > .elementor-container"
   rule above is also !important and, at 3 classes, outranks a plain
   ".vo-services-showcase > .elementor-container" (2 classes) — so a
   non-important override here is silently defeated even though every
   other property in this block applies fine. */
.elementor-section.elementor-section-boxed.vo-services-showcase > .elementor-container {
	max-width: 1600px !important;
}
.vo-services-showcase > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 auto;
	padding: 0 16px;
	position: relative;
	z-index: 1;
}
/* Elementor's own _css_classes setting never renders onto <column>
   elements in this install (confirmed: the saved settings are correct,
   but the class is simply absent from the live DOM) — it only reaches
   the page on sections and widgets. Rather than depend on a custom
   class that silently never attaches, the card container itself is
   styled through Elementor's own always-present .elementor-column
   class, scoped to this section so nothing else on the page is
   affected. The individual fields inside each card (image/icon/title/
   description/link) ARE real separate widgets, each with its own
   working custom class, so per-field Elementor editability is intact
   regardless of this workaround. */
.vo-services-showcase .elementor-column {
	width: auto !important; max-width: none !important;
	display: flex; flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 18px;
	overflow: visible;
	box-shadow: 0 10px 30px rgba(13,42,68,0.08);
	transition: transform 0.35s var(--vo-ease), box-shadow 0.35s var(--vo-ease);
}
.vo-services-showcase .elementor-column:hover { transform: translateY(-8px); box-shadow: 0 28px 55px rgba(13,42,68,0.18); }
.vo-services-showcase .elementor-column .elementor-widget-wrap { display: flex; flex-direction: column; flex: 1; }

.vo-svc-card__media { position: relative; height: 200px; width: 100%; overflow: hidden; border-radius: 18px 18px 0 0; }
.vo-svc-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform 0.6s var(--vo-ease); filter: saturate(1.12) contrast(1.04); }
/* A soft warm gradient, blended with soft-light, unifies four source
   photos shot in different real lighting conditions into one cohesive
   golden-hour mood rather than needing four separately colour-graded
   images. */
.vo-svc-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(165deg, rgba(255,140,30,0.5) 0%, rgba(255,110,20,0.32) 32%, rgba(30,20,50,0.18) 60%, rgba(10,10,30,0.55) 100%);
	pointer-events: none;
}
.vo-services-showcase .elementor-column:hover .vo-svc-card__media img { transform: scale(1.08); }
.vo-svc-card__icon { margin-top: -26px; position: relative; z-index: 2; display: flex; justify-content: center; }
/* !important needed throughout: Elementor's own icon-widget "view"
   system (elementor-view-default) sets its own background/color on
   .elementor-icon with equal-or-higher specificity, so a plain
   declaration here is silently ignored — the same class of collision
   already hit on card images and the header/column widths. */
.vo-svc-card__icon .elementor-icon {
	width: 50px !important; height: 50px !important; border-radius: 50% !important;
	background: var(--vo-navy) !important; color: var(--vo-accent) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 1.15rem !important; border: 2px solid var(--vo-accent) !important;
	box-shadow: 0 10px 22px rgba(13,42,68,0.3) !important;
}
.vo-svc-card__icon .elementor-icon svg { fill: var(--vo-accent) !important; width: 1.1em !important; height: 1.1em !important; }
.vo-svc-card__title { padding: 0 32px; margin-top: 20px; }
.vo-svc-card__title .elementor-heading-title { font-size: 1.3rem !important; font-weight: 800 !important; color: var(--vo-navy) !important; text-align: center !important; line-height: 1.3 !important; }
.vo-svc-card__desc { margin-top: 16px; padding: 0 32px; color: var(--vo-neutral-500); font-size: 1rem; line-height: 1.6; text-align: center; flex: 1; }
.vo-svc-card__link { margin: 15px 0 20px; text-align: center; }
.vo-svc-card__link .elementor-button {
	background: transparent !important; padding: 0 !important; color: var(--vo-navy) !important;
	font-weight: 700; font-size: 0.95rem; box-shadow: none !important;
	display: inline-flex; align-items: center;
}
.vo-svc-card__link .elementor-button:hover { color: var(--vo-accent-dark) !important; transform: none !important; }
.vo-svc-card__link .elementor-button::after { content: '\2192'; margin-left: 8px; transition: transform 0.3s var(--vo-ease); display: inline-block; }
.vo-services-showcase .elementor-column:hover .vo-svc-card__link .elementor-button::after { transform: translateX(6px); }

@media (max-width: 1080px) { .vo-services-showcase > .elementor-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
	.vo-services-showcase > .elementor-container { grid-template-columns: 1fr; }
	.vo-svc-card__media { height: 240px; }
}
.vo-services-interactive-section { padding: 40px 0 96px !important; }
.vo-services-interactive-section .elementor-container { max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; }
.vo-services-interactive { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.vo-si-list { display: flex; flex-direction: column; }
.vo-si-item {
	display: flex; align-items: center; gap: 20px;
	padding: 28px 8px; border-top: 1px solid var(--vo-neutral-200);
	transition: padding-left 0.3s var(--vo-ease), background 0.3s var(--vo-ease);
}
.vo-si-list a.vo-si-item:last-child { border-bottom: 1px solid var(--vo-neutral-200); }
.vo-si-item:hover { padding-left: 20px; background: var(--vo-neutral-50); }
.vo-si-item__number { font-size: 0.85rem; font-weight: 800; color: var(--vo-accent-dark); min-width: 28px; }
.vo-si-item__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vo-si-item__title { font-size: 1.2rem; font-weight: 800; color: var(--vo-navy); }
.vo-si-item__desc { font-size: 0.9rem; color: var(--vo-neutral-500); max-width: 40ch; }
.vo-si-item__arrow { color: var(--vo-navy); transition: transform 0.3s var(--vo-ease); flex-shrink: 0; }
.vo-si-item:hover .vo-si-item__arrow { transform: translateX(6px); color: var(--vo-accent-dark); }
.vo-si-visual { position: relative; border-radius: var(--vo-radius-lg); overflow: hidden; background: var(--vo-neutral-100); min-height: 420px; }
.vo-si-visual__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 0.5s var(--vo-ease), transform 6s linear;
	transform: scale(1.06);
}
.vo-si-visual__img-1 { opacity: 1; }
.vo-si-visual__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,27,45,0.55) 100%); }
.vo-services-interactive:has(.vo-si-item:hover) .vo-si-visual__img { opacity: 0; }
.vo-services-interactive:has(.vo-si-item-1:hover) .vo-si-visual__img-1,
.vo-services-interactive:has(.vo-si-item-2:hover) .vo-si-visual__img-2,
.vo-services-interactive:has(.vo-si-item-3:hover) .vo-si-visual__img-3,
.vo-services-interactive:has(.vo-si-item-4:hover) .vo-si-visual__img-4 { opacity: 1; }
@media (max-width: 900px) {
	.vo-services-interactive { grid-template-columns: 1fr; }
	.vo-si-visual { min-height: 280px; order: -1; }
	.vo-si-item__desc { display: none; }
}

/* ============ Homepage v2: Why Vihar editorial ============ */
/* Same fix as Who We Are above: the desktop rule never actually
   constrained column widths (no display:grid), so the image column
   was rendering far narrower than intended relative to the text.
   align-items stays "center" (not "stretch") deliberately — stretching
   the image to match the text column's height was tried twice and
   caused real breakage (overflowing stacked widgets, then oversized
   gaps to the next section), so a plain fixed image height is the
   stable choice here. */
.vo-why-editorial .elementor-container { max-width: var(--vo-container); margin: 0 auto; display: grid !important; grid-template-columns: 0.75fr 1fr; align-items: stretch; gap: 48px; }
/* Stretch only the image side to match the text column's height — scoped
   with :has() to the column/widget that actually contains the image, so
   the text column's own several stacked widgets are never touched (that
   was the earlier bug: applying height:100% to every widget). The
   oversized gap reported afterwards turned out to be the sections'
   stacked 96px+96px padding, not this rule — fixed separately below by
   trimming that padding instead of reverting this. */
.vo-why-editorial .elementor-column:has(.vo-why-img),
.vo-why-editorial .elementor-column:has(.vo-why-img) .elementor-widget-wrap,
.vo-why-editorial .elementor-column:has(.vo-why-img) .elementor-widget-text-editor,
.vo-why-editorial .elementor-column:has(.vo-why-img) .elementor-widget-container { height: 100%; }
.vo-why-editorial .elementor-column { width: auto !important; max-width: none !important; }
.vo-why-img { border-radius: var(--vo-radius-lg); overflow: hidden; height: 100%; min-height: 320px; }
.vo-why-img img { width: 100%; height: 100%; object-fit: cover; }
.vo-why-editorial__list { margin-top: 32px; display: flex; flex-direction: column; }
.vo-why-editorial__item { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--vo-neutral-200); }
.vo-why-editorial__list .vo-why-editorial__item:last-child { border-bottom: 1px solid var(--vo-neutral-200); }
.vo-why-editorial__num { font-size: 0.85rem; font-weight: 800; color: var(--vo-accent-dark); min-width: 28px; }
.vo-why-editorial__item h3 { font-size: 1.2rem; font-weight: 800; color: var(--vo-navy); margin-bottom: 6px; }
.vo-why-editorial__item p { font-size: 1rem; color: var(--vo-neutral-500); line-height: 1.6; max-width: 42ch; }
@media (max-width: 900px) { .vo-why-editorial .elementor-container { grid-template-columns: 1fr; } .vo-why-img img { height: 300px; } }

/* About page only: every section heading centered, per client request —
   scoped to the page template so it doesn't affect Home/Services, which
   keep the site's default left-aligned headings. */
.page-template-page-about-php .vo-eyebrow { text-align: center; width: 100%; }
.page-template-page-about-php .vo-h2 .elementor-heading-title,
.page-template-page-about-php .vo-h1 .elementor-heading-title { text-align: center !important; max-width: 100% !important; margin-left: auto; margin-right: auto; }
.page-template-page-about-php .vo-section-lead { margin-left: auto; margin-right: auto; text-align: center; }

/* Mission/Vision heading + lead text — smaller than the page's other H2s,
   since the lead paragraph beneath restates the heading and the pair
   otherwise reads oversized for how little new information the heading
   itself adds. */
.page-template-page-about-php .vo-mission-head .vo-h2 .elementor-heading-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
	max-width: 52ch !important;
}
.page-template-page-about-php .vo-mission-head .vo-section-lead {
	font-size: 1rem; max-width: 60ch;
}

/* Values → Growth: the default 96px+96px stacked padding between two
   full .vo-section bands read as too much dead space back to back. */
.page-template-page-about-php .vo-values-editorial { padding-bottom: 48px; }
.page-template-page-about-php .vo-evolution { padding-top: 48px; padding-bottom: 48px; }
.page-template-page-about-php .vo-about-services { padding-top: 48px; }
.page-template-page-about-php .vo-about-services .vo-h2 .elementor-heading-title { margin-bottom: 40px !important; }

/* Who We Are only stays left-aligned, beside its image — every other
   About page heading is centered per the general rule above. */
.page-template-page-about-php .vo-about-who-editorial .vo-eyebrow,
.page-template-page-about-php .vo-about-who-editorial .vo-h2 .elementor-heading-title,
.page-template-page-about-php .vo-values-editorial .vo-eyebrow,
.page-template-page-about-php .vo-values-editorial .vo-h2 .elementor-heading-title { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 900px) {
	.page-template-page-about-php .vo-about-who-editorial .vo-eyebrow,
	.page-template-page-about-php .vo-about-who-editorial .vo-h2 .elementor-heading-title,
	.page-template-page-about-php .vo-values-editorial .vo-eyebrow,
	.page-template-page-about-php .vo-values-editorial .vo-h2 .elementor-heading-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ============ Homepage v2: Visual break ============ */
.vo-visual-break {
	position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center;
	background: linear-gradient(180deg, rgba(8,27,45,0.45) 0%, rgba(8,27,45,0.7) 100%), url('../images/visual-break-crane-twilight.webp');
	background-size: cover; background-position: center 75%;
}
/* !important + matching (0,2,0) specificity needed to beat the sitewide
   ".vo-h2 .elementor-heading-title" rule above, which also sets
   text-align/margin/max-width with !important — without it, this
   heading silently stayed left-aligned and 40ch-wide instead of the
   centered 16ch treatment this section actually wants. */
.vo-break__heading .elementor-heading-title {
	max-width: 16ch !important;
	margin: 0 auto 28px !important;
	text-align: center !important;
}
@media (max-width: 900px) { .vo-visual-break { min-height: 360px; } }

/* ============ Homepage v2: Process timeline ============ */
/* Dark-navy + gold-accent treatment, matching the same visual language
   established in the Global Logistics journey row, so the two "step
   sequence" sections on the page read as one consistent design system
   rather than two different ones. */
.vo-process-head { background: var(--vo-navy-3); padding-top: 96px !important; text-align: center; }
.vo-process-head .elementor-container { max-width: 640px !important; margin: 0 auto; }
.vo-process-head .vo-eyebrow { color: var(--vo-accent); }
.vo-process-head .vo-h2 .elementor-heading-title { text-align: center !important; color: #fff !important; margin: 0 auto !important; }

.vo-process-timeline-section { background: var(--vo-navy-3); padding: 40px 0 96px !important; }
.vo-process-timeline-section .elementor-container { max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; }
.vo-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.vo-timeline::before {
	content: ''; position: absolute; top: 22px; left: 6%; right: 6%; height: 1px;
	background: repeating-linear-gradient(90deg, rgba(201,162,75,0.5) 0 8px, transparent 8px 16px);
}
.vo-timeline__step { position: relative; padding-top: 0px; text-align: center; }
.vo-timeline__number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(201,162,75,0.14); border: 1px solid rgba(201,162,75,0.45);
	color: var(--vo-accent); font-weight: 800; font-size: 0.9rem; position: relative; z-index: 1;
}
.vo-timeline__step h3 { margin-top: 18px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.vo-timeline__step p { margin-top: 8px; color: rgba(255,255,255,0.68); font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) {
	.vo-process-head { padding-top: 64px !important; }
	.vo-timeline { grid-template-columns: 1fr; gap: 0; }
	.vo-timeline::before { top: 0; bottom: 0; left: 22px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, rgba(201,162,75,0.5) 0 8px, transparent 8px 16px); }
	.vo-timeline__step { padding-left: 64px; padding-bottom: 32px; text-align: left; }
	.vo-timeline__number { position: absolute; left: 0; top: 8px; }
}

/* ============ Homepage v2: CTA with image ============ */
/* Matches the lighter overlay treatment used on Global Logistics — the
   previous 92-94% opacity made the background photo essentially
   invisible, which is exactly what the "image must remain clearly
   visible" direction calls out. */
.vo-cta--image {
	background:
		linear-gradient(175deg, rgba(8,27,45,0.7) 0%, rgba(8,27,45,0.45) 45%, rgba(8,27,45,0.78) 100%),
		url('../images/ocean-freight-container-ship.webp');
	background-size: cover; background-position: center;
}

/* ============ Homepage v2: Blog ============ */
.vo-blog-head { padding-bottom: 0 !important; text-align: center; }
.vo-blog-head .elementor-container { max-width: 640px; margin: 0 auto; }
.vo-blog-head .vo-h2 .elementor-heading-title { text-align: center !important; margin: 0 auto !important; }
.vo-blog-section { padding: 40px 0 96px !important; }
.vo-blog-section .elementor-container { max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; }
.vo-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vo-blog-card {
	display: flex; flex-direction: column; border-radius: var(--vo-radius-lg); overflow: hidden;
	background: #fff; border: 1px solid var(--vo-neutral-200);
	transition: transform 0.35s var(--vo-ease), box-shadow 0.35s var(--vo-ease);
}
.vo-blog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(13,42,68,0.14); }
.vo-blog-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--vo-neutral-100); }
.vo-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--vo-ease); }
.vo-blog-card:hover .vo-blog-card__media img { transform: scale(1.08); }
.vo-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.vo-blog-card__date { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vo-accent-dark); }
.vo-blog-card__title { font-size: 1.2rem; font-weight: 800; color: var(--vo-navy); margin-top: 10px; line-height: 1.35; }
.vo-blog-card__excerpt { font-size: 0.98rem; color: var(--vo-neutral-500); line-height: 1.6; margin-top: 10px; flex: 1; }
.vo-blog-card__arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: 0.85rem; color: var(--vo-navy); transition: gap 0.3s var(--vo-ease), color 0.3s var(--vo-ease); }
.vo-blog-card:hover .vo-blog-card__arrow { gap: 12px; color: var(--vo-accent-dark); }
@media (max-width: 1080px) { .vo-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vo-blog-grid { grid-template-columns: 1fr; } }

/* ============ Homepage v2: Partners ============ */
.vo-partners { text-align: center; padding: 64px 0 !important; background: #faf7f1; overflow: hidden; }
.vo-partners__eyebrow { text-align: center; }
.vo-partners__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 48px; margin-top: 24px; }
.vo-partners__logo { height: 32px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.55; transition: opacity 0.3s var(--vo-ease), filter 0.3s var(--vo-ease); }
.vo-partners__logo:hover { filter: grayscale(0%); opacity: 1; }

/* Marquee (auto-scrolling partner strip) */
.vo-marquee { margin-top: 32px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vo-marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: vo-marquee-scroll 28s linear infinite; }
.vo-marquee:hover .vo-marquee__track { animation-play-state: paused; }
.vo-marquee__logo { height: 32px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: opacity 0.3s var(--vo-ease), filter 0.3s var(--vo-ease); flex-shrink: 0; }
.vo-marquee__logo:hover { filter: grayscale(0%); opacity: 1; }
@keyframes vo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vo-marquee__track { animation: none; } .vo-marquee { overflow-x: auto; } }

.vo-footer-el-social { margin-top: 20px; }
.vo-footer-el-social__link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,0.08); color: #fff; transition: background 0.25s var(--vo-ease);
}
.vo-footer-el-social__link:hover { background: var(--vo-accent); color: var(--vo-navy-3); }

/* ============ Homepage v2: Contact cards ============ */
.vo-contact-teaser__text { color: var(--vo-neutral-500); margin: 18px 0 28px; max-width: 44ch; }
.vo-contact-cards { display: flex; flex-direction: column; gap: 16px; }
.vo-contact-card2 { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-radius: var(--vo-radius-lg); background: var(--vo-neutral-50); border: 1px solid var(--vo-neutral-200); }
.vo-contact-card2__label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vo-accent-dark); }
.vo-contact-card2 a, .vo-contact-card2 span:not(.vo-contact-card2__label) { font-weight: 700; color: var(--vo-navy); }

/* ============ Elementor-built homepage sections ============ */
.vo-intro { padding-bottom: 40px; }
.vo-intro .elementor-container { align-items: flex-start; }
.vo-intro__lead .elementor-heading-title {
	font-size: 1.4rem !important; font-weight: 700 !important; color: var(--vo-navy) !important; line-height: 1.45 !important; max-width: 34ch !important;
	text-align: left !important;
}
.vo-intro__body { color: var(--vo-neutral-500); font-size: 1.05rem; max-width: 58ch; margin-top: 20px; }
.vo-text-link-btn { margin-top: 0px; }
.vo-text-link-btn .elementor-button {
	background: transparent !important; color: var(--vo-navy) !important; border-bottom: 1px solid var(--vo-navy) !important;
	border-radius: 0 !important; padding: 0 0 2px !important; font-weight: 700 !important; box-shadow: none !important;
	display: inline-flex !important; align-items: center !important;
}
.vo-text-link-btn .elementor-button:hover { color: var(--vo-accent-dark) !important; border-color: var(--vo-accent-dark) !important; }
.vo-text-link-btn .elementor-button::after { content: '\2192'; margin-left: 8px; transition: transform 0.3s var(--vo-ease); display: inline-block; }
.vo-text-link-btn .elementor-button:hover::after { transform: translateX(4px); }

.vo-services-teaser-head, .vo-why-head, .vo-process-head { padding-bottom: 0 !important; }
.vo-services-teaser-head .elementor-container,
.vo-why-head .elementor-container,
.vo-process-head .elementor-container { max-width: 640px; }

.vo-services-grid-section, .vo-why-grid-section, .vo-process-grid-section {
	max-width: var(--vo-container); margin: 0 auto; padding: 40px 24px 96px !important;
}
.vo-services-grid-section .elementor-container,
.vo-why-grid-section .elementor-container,
.vo-process-grid-section .elementor-container {
	display: grid; gap: 24px;
}
.vo-services-grid-section .elementor-container { grid-template-columns: repeat(4, 1fr); }
.vo-why-grid-section .elementor-container { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vo-process-grid-section .elementor-container { grid-template-columns: repeat(5, 1fr); position: relative; }
.vo-services-grid-section .elementor-column,
.vo-why-grid-section .elementor-column,
.vo-process-grid-section .elementor-column { width: 100% !important; }

@media (max-width: 1080px) {
	.vo-services-grid-section .elementor-container,
	.vo-why-grid-section .elementor-container { grid-template-columns: repeat(2, 1fr); }
	.vo-process-grid-section .elementor-container { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
	.vo-services-grid-section .elementor-container,
	.vo-why-grid-section .elementor-container,
	.vo-process-grid-section .elementor-container { grid-template-columns: 1fr; }
}

.vo-global .elementor-container { max-width: var(--vo-container); margin: 0 auto; }
.vo-cta .elementor-container { max-width: 720px; margin: 0 auto; text-align: center; }
.vo-cta .elementor-heading-title { color: #fff !important; text-align: center !important; }
/* Each button is its own Elementor widget wrapper, which defaults to
   stretching near-full-width inside the section's flex-wrap row —
   because widget wrappers aren't sized by content, "Get a Quote" and
   "Contact Us" each claimed a full line and stacked instead of sitting
   side by side. Constraining them to their content width fixes that. */
.vo-cta-btn-primary, .vo-cta-btn-secondary { display: inline-block; width: auto !important; flex: 0 0 auto !important; margin: 8px; }
.vo-cta .elementor-widget-wrap { justify-content: center; }
.vo-cta-btn-primary .elementor-button { background: var(--vo-accent) !important; color: var(--vo-navy-3) !important; font-weight: 700 !important; padding: 16px 32px !important; border-radius: 6px !important; box-shadow: none !important; }
.vo-cta-btn-primary .elementor-button:hover { background: var(--vo-accent-dark) !important; }
.vo-cta-btn-secondary .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.55) !important; font-weight: 700 !important; padding: 16px 32px !important; border-radius: 6px !important; box-shadow: none !important; }
.vo-cta-btn-secondary .elementor-button:hover { background: rgba(255,255,255,0.12) !important; }

.vo-contact-teaser .elementor-container { max-width: var(--vo-container); margin: 0 auto; align-items: center; }
.vo-contact-teaser__cards { display: flex; flex-direction: column; gap: 16px; }

/* ============ Elementor-built About page ============ */
.vo-about-who .elementor-container { max-width: var(--vo-container); margin: 0 auto; align-items: flex-start; }
.vo-about-who__body { color: var(--vo-neutral-500); font-size: 1.05rem; line-height: 1.75; max-width: 62ch; }
.vo-about-who__body p { margin-bottom: 16px; }

/* When used as a standalone card-grid section (About page's Mission/Vision/
   Why Choose Us rows) rather than paired with its own heading, it needs its
   own vertical padding — the heading section above it zeroes its own
   bottom padding (.vo-mission-head) so the two together read as one
   evenly-spaced block instead of double-gapping or touching flush. */
.vo-mission-vision { background: var(--vo-neutral-50); padding: 40px 24px 96px; }
.vo-mission-head { padding-bottom: 0 !important; }
.vo-mission-vision .elementor-container { max-width: var(--vo-container); margin: 0 auto; gap: 28px; align-items: stretch; }
.vo-mission-vision__card {
	background: #fff; border: 1px solid var(--vo-neutral-200); border-radius: var(--vo-radius-lg); padding: 36px !important;
	transition: transform 0.35s var(--vo-ease), box-shadow 0.35s var(--vo-ease);
}
@media (max-width: 560px) { .vo-mission-vision__card { padding: 24px !important; } }
.vo-mission-vision__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(13,42,68,0.12); }
.vo-mv-heading .elementor-heading-title { color: var(--vo-navy) !important; font-size: 1.2rem !important; font-weight: 800 !important; margin-bottom: 14px !important; text-align: left !important; }
.vo-mv-text { color: var(--vo-neutral-500); line-height: 1.7; }
.vo-mv-icon.elementor-widget-icon-box { margin-bottom: 16px; }
.vo-mv-icon .elementor-icon-box-wrapper { text-align: left !important; align-items: flex-start !important; }
.vo-mv-icon .elementor-icon-box-icon .elementor-icon {
	width: 46px !important; height: 46px !important; border-radius: 50% !important;
	background: rgba(201,162,75,0.14) !important; color: var(--vo-accent-dark) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 1.1rem !important; border: none !important; box-shadow: none !important;
}
.vo-mv-icon .elementor-icon-box-icon .elementor-icon svg { fill: var(--vo-accent-dark) !important; width: 1em !important; height: 1em !important; }
.vo-mv-icon .elementor-icon-box-title { display: none; }
.vo-mv-icon .elementor-icon-box-description { display: none; }

/* Vision card gets the dark contrast treatment so Mission/Vision read as
   two distinct, deliberate statements rather than two identical cards. */
.vo-mission-vision__card--accent { background: var(--vo-navy-3) !important; border-color: var(--vo-navy-3) !important; }
.vo-mission-vision__card--accent .vo-mv-heading .elementor-heading-title { color: #fff !important; }
.vo-mission-vision__card--accent .vo-mv-text { color: rgba(255,255,255,0.72); }
.vo-mission-vision__card--accent .vo-mv-icon .elementor-icon-box-icon .elementor-icon {
	background: rgba(201,162,75,0.18) !important; color: var(--vo-accent) !important;
}
.vo-mission-vision__card--accent .vo-mv-icon .elementor-icon-box-icon .elementor-icon svg { fill: var(--vo-accent) !important; }

/* ============ Elementor-built services listing ============ */
.vo-services-editorial-wrap .elementor-container { max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; }
.vo-service-row { padding: 0 !important; }
.vo-service-row .elementor-container {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
	padding: 56px 0 !important; border-bottom: 1px solid var(--vo-neutral-200);
}
.vo-service-row--reverse .elementor-container { direction: rtl; }
.vo-service-row--reverse .elementor-container > * { direction: ltr; }
.vo-service-row .elementor-column { width: 100% !important; }
/* aspect-ratio: 4/3 gives the box a computed, not explicit, height —
   percentage heights on a child (width/height:100%) don't reliably
   resolve against that in every layout pass, so the cover image quietly
   rendered at its own intrinsic ratio with empty space below it.
   Absolute-positioning the image against the aspect-ratio box sidesteps
   that percentage-resolution gap entirely. */
.vo-service-row__visual { position: relative; border-radius: var(--vo-radius-lg); overflow: hidden; background: var(--vo-neutral-50); aspect-ratio: 4/3; }
.vo-service-row__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vo-service-row__icon-panel { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--vo-navy), var(--vo-navy-3)); color: var(--vo-accent); }
/* _css_classes on an Elementor column never reaches the rendered markup
   in this install (see the services-showcase note elsewhere in this
   file), so ".vo-service-row__content" is not actually present in the
   DOM — scope directly under ".vo-service-row" instead, which is. */
.vo-service-row .vo-service-row__number { font-size: 0.85rem; font-weight: 800; color: var(--vo-accent-dark); letter-spacing: 0.1em; }
.vo-service-row h2 { margin-top: 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--vo-navy); }
.vo-service-row p { margin-top: 16px; color: var(--vo-neutral-500); line-height: 1.7; max-width: 48ch; }
.vo-service-row .vo-btn { margin-top: 24px; }
@media (max-width: 900px) {
	.vo-service-row .elementor-container, .vo-service-row--reverse .elementor-container { grid-template-columns: 1fr; direction: ltr; gap: 28px; padding: 40px 0 !important; }
}

/* ============ Elementor-built footer ============ */
.vo-footer-el-top {
	position: relative; overflow: hidden;
	background: linear-gradient(175deg, var(--vo-navy-3) 0%, #0a2338 100%) !important;
	padding: 88px 0 52px !important;
}
.vo-footer-el-top::before {
	content: ''; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(201,162,75,0.12), transparent 70%); pointer-events: none;
}
.vo-footer-el-top::after {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--vo-accent), transparent); opacity: 0.6; pointer-events: none;
}
.vo-footer-el-top .elementor-container { position: relative; max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; align-items: flex-start; }
.vo-footer-el-bottom {
	background: #0a2338 !important;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 22px 0 !important;
}
.vo-footer-el-bottom .elementor-container { max-width: var(--vo-container); margin: 0 auto; padding: 0 24px; }
.vo-footer-el-bottom p { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; }

/* Copyright, legal links and social icons as one aligned row: copyright
   pinned left, everything else grouped tightly on the right — instead of
   three separate fixed-width Elementor columns each aligning on their
   own, which left uneven gaps. */
.vo-footer-el-bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; }
.vo-footer-el-bottom-right { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.vo-footer-el-legal { display: flex; align-items: center; gap: 20px; padding-right: 24px; border-right: 1px solid rgba(255,255,255,0.14); }
.vo-footer-el-legal a { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
.vo-footer-el-legal a:hover { color: #fff; }
.vo-footer-el-socials { display: flex; align-items: center; gap: 10px; }
.vo-footer-el-socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,0.08); color: #fff; transition: background 0.25s var(--vo-ease), transform 0.25s var(--vo-ease);
}
.vo-footer-el-socials a:hover { background: var(--vo-accent); color: var(--vo-navy-3); transform: translateY(-2px); }
.vo-scroll-top {
	position: fixed; right: 24px; bottom: 24px; z-index: 500;
	width: 44px; height: 44px; border-radius: 50%; border: none;
	background: var(--vo-navy); color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 10px 25px rgba(13,42,68,0.3);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.3s var(--vo-ease), transform 0.3s var(--vo-ease), visibility 0.3s, background 0.25s var(--vo-ease);
}
.vo-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.vo-scroll-top:hover { background: var(--vo-accent-dark); }

.vo-footer-el-logo { text-align: left !important; }
.vo-footer-el-logo img { height: 40px !important; width: auto !important; max-width: none !important; margin-bottom: 18px; }
.vo-footer-el-contact { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.vo-footer-el-contact a, .vo-footer-el-contact span { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.6; }
.vo-footer-el-contact a:hover { color: #fff; }

.vo-newsletter-text { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.6; margin-bottom: 18px; }
.vo-newsletter-form { display: flex; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px; max-width: 320px; transition: border-color 0.25s var(--vo-ease), box-shadow 0.25s var(--vo-ease); }
.vo-newsletter-form input[type="email"] {
	flex: 1; background: transparent; border: none; color: #fff; font-size: 0.88rem; padding: 8px 0; min-width: 0;
}
.vo-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.vo-newsletter-form input[type="email"]:focus { outline: none; }
.vo-newsletter-form:focus-within { border-color: rgba(201,162,75,0.55); box-shadow: 0 0 0 3px rgba(201,162,75,0.14); }
.vo-newsletter-form button {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
	background: var(--vo-accent); color: var(--vo-navy-3); display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.25s var(--vo-ease), transform 0.25s var(--vo-ease);
}
.vo-newsletter-form button:hover { background: var(--vo-accent-dark); transform: scale(1.06); }
.vo-newsletter-notice { font-size: 0.82rem; margin-top: 10px; color: var(--vo-accent); }
.vo-newsletter-notice--error { color: #f3a3a3; }
.vo-footer-el-desc { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.65; max-width: 38ch; }
.vo-footer-el-heading .elementor-heading-title {
	color: #fff !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 18px !important;
	text-align: left !important;
}
.vo-footer-el-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.vo-footer-el-list li { margin: 0; }
.vo-footer-el-list a { color: rgba(255,255,255,0.65) !important; font-size: 0.92rem; text-decoration: none; display: inline-block; transition: color 0.2s var(--vo-ease), transform 0.2s var(--vo-ease); }
.vo-footer-el-list a:hover { color: #fff !important; transform: translateX(4px); }

@media (max-width: 900px) {
	.vo-footer-el-top .elementor-column { width: 50% !important; margin-bottom: 32px; }
	.vo-footer-el-bottom .elementor-column { width: 100% !important; }
	.vo-footer-el-legal { justify-content: flex-start; margin-top: 10px; }
	.vo-footer-el-bottom-row { justify-content: flex-start; margin-top: 10px; }
}
@media (max-width: 560px) {
	.vo-footer-el-top .elementor-column { width: 100% !important; }
}

/* ============ Global Presence map (Contact page) ============ */
.vo-global-presence { text-align: center; padding: 56px 0; }
.vo-global-presence .vo-section-lead { max-width: none; }
.vo-global-presence__map { max-width: 860px; margin: 36px auto 0; }
.vo-global-presence__map svg { width: 100%; height: auto; display: block; }
.vo-map-landmass { fill: var(--vo-neutral-200); }
.vo-map-route { fill: none; stroke: var(--vo-steel); stroke-width: 4; stroke-dasharray: 14 12; opacity: 0.55; }
.vo-map-dot { fill: var(--vo-accent); }
.vo-map-dot__ring { fill: none; stroke: var(--vo-accent); stroke-width: 4; opacity: 0.45; transform-box: fill-box; transform-origin: center; animation: vo-map-pulse 2.6s ease-out infinite; }
.vo-map-label { font-family: var(--vo-font); font-size: 30px; font-weight: 800; fill: var(--vo-navy); }
@keyframes vo-map-pulse { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(2.4); opacity: 0; } }

/* ============ Career why section reuses vo-why classes above ============ */