/**
 * Volo Aero MRO — Figma design-system component CSS.
 *
 * Shared classes reused across all 10 rebuilt pages (Homepage, Who We
 * Serve, Capabilities Directory, Platform Detail, Services, Certifications,
 * About, News Hub, News Post, Contact). Reads tokens defined in the theme's
 * own style.css (:root block) rather than redefining them here, so both
 * files must stay loaded together -- enqueued as a dependent, see
 * functions.php.
 *
 * Breakpoints used throughout this file (the parent theme's own are a messy
 * option-driven mix -- see plan): 1024px tablet, 768px mobile, 480px small
 * mobile.
 */

/*
 * wpautop inserts an empty <p> (10px bottom margin) wherever a blank line
 * sits between shortcodes/HTML in post_content -- e.g. around every
 * [vc_row][vc_column] boundary. Usually invisible because the next
 * section's own padding absorbs it, but between two full-bleed bands with
 * no padding of their own (e.g. stats bar -> section-band) it shows as a
 * stray gap. Strip it everywhere rather than chase blank lines in content.
 */
.wpb_wrapper > p:empty {
	display: none;
}

/*
 * ---------- Full-bleed section backgrounds ----------
 *
 * WPBakery rows (Home, About, Services, Certifications, About, Contact --
 * anywhere content is authored as [vc_row bg_override="full"]) render their
 * background on a separate absolutely-positioned .upb_row_bg sibling, so
 * the row's own box stays boxed to the content column while its background
 * still spans the full viewport. The custom PHP-template sections below
 * have no such mechanism -- they're a single element carrying both the
 * background color AND the padded content, confined to the boxed content
 * column (~1592px on a typical desktop width) with the page's ordinary
 * left/right margin showing on either side of the color fill. Next to a
 * WPBakery row's genuine edge-to-edge band, that reads as an inconsistency:
 * some "full width" bands actually aren't.
 *
 * The fix applies to the section itself (unlike WPBakery's separate-layer
 * approach) since these aren't WPBakery rows and don't have their own
 * background sibling to detach; the accompanying padding on each of these
 * classes already keeps their content readable regardless of the box's
 * total width -- PROVIDED box-sizing is border-box. Without it, the
 * browser's default content-box sizing adds this rule's own horizontal
 * padding on top of the 100vw width (e.g. the 80px/side section padding
 * added 160px to a 1707px viewport, rendering a 1867px-wide box), pushing
 * the box's right edge far past the viewport and clipping content on the
 * right -- confirmed via getBoundingClientRect() on both a direct
 * PHP-template call site (.volo-aero-fighter-section on /capabilities/)
 * and a WPBakery-shortcode-embedded one (.volo-aero-stats-bar on /about/):
 * identical overflow in both contexts, so this was never a DOM-nesting
 * issue, just the same box-sizing bug already fixed once on
 * .volo-aero-grid below. With border-box, the box lands within a few
 * px of the viewport edges everywhere (the small remainder is the vw-vs-
 * scrollbar discrepancy, harmless since it only extends the background
 * slightly past both edges).
 */
.volo-aero-cert-strip,
.volo-aero-stats-bar,
.volo-aero-rfq-banner,
.volo-aero-fighter-section,
.volo-aero-table-section,
.volo-aero-filter-bar,
.volo-aero-hero-dark,
.volo-aero-platform-hero,
.volo-aero-section-band {
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

/* ---------- Base type ---------- */

.volo-aero-ds h1,
.volo-aero-ds h2,
.volo-aero-ds h3,
.volo-aero-ds h4,
.volo-aero-ds .volo-aero-heading {
	font-family: var(--volo-font-heading);
	color: var(--volo-navy);
	line-height: 1.15;
}

.volo-aero-ds p,
.volo-aero-ds .volo-aero-body {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
}

.volo-aero-mono {
	font-family: var(--volo-font-mono);
}

/* ---------- Section header (kicker + H2 + optional subtitle) ---------- */

.volo-aero-section-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}
/* On pages where [volo_section_header] is the very first row in #content
   (Services, Certifications -- no hero/intro row above it), WPBakery's own
   row/column wrappers carry zero default padding, so the header sat flush
   against the title bar above it. Pages where a preceding row already exists
   (About, Home) get their gap from that row's own padding and don't need
   this -- so it's scoped to "first row in content", not applied globally. */
#content > .wpb-content-wrapper > .vc_row:first-child .volo-aero-section-header {
	margin-top: 56px;
}
/* Same "flush against the title bar" issue, general form: any custom PHP
   template (not WPBakery post_content) that puts .volo-aero-section-header
   directly in #content with nothing above it -- Capabilities' own header
   row wrapper, and any .volo-aero-section-header with no wrapper at all
   (Who We Serve; any future template following the same convention). Kept
   as two selectors, not one combined list, so a future template only has
   to match ONE of these shapes to get the fix, not guess which. */
#content > .volo-aero-directory-header-row,
#content > .volo-aero-section-header {
	margin-top: 56px;
}
.volo-aero-section-header .volo-aero-kicker {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--volo-red);
}
.volo-aero-section-header h2 {
	font-weight: 800;
	font-size: 40px;
	margin: 0;
	text-wrap: balance;
}
.volo-aero-section-header p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-width: 720px;
}
.volo-aero-section-header.is-light .volo-aero-kicker {
	color: var(--volo-red);
}
.volo-aero-section-header.is-light h2 {
	color: var(--volo-white);
}
.volo-aero-section-header.is-light p {
	color: var(--volo-slate-light);
}
@media (max-width: 768px) {
	.volo-aero-section-header h2 {
		font-size: 28px;
	}
}

/* ---------- Buttons ---------- */

.volo-aero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: var(--volo-radius-sm);
	padding: 16px 36px;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.volo-aero-btn-primary {
	background: var(--volo-red);
	color: var(--volo-white) !important;
}
.volo-aero-btn-primary:hover,
.volo-aero-btn-primary:focus-visible {
	background: var(--volo-red-hover);
}
.volo-aero-btn-secondary {
	background: transparent;
	color: var(--volo-white) !important;
	border: 1.5px solid var(--volo-white);
	padding: 14px 28px;
}
.volo-aero-btn-secondary:hover,
.volo-aero-btn-secondary:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}
.volo-aero-btn-secondary.is-dark {
	color: var(--volo-navy) !important;
	border-color: var(--volo-navy);
}
.volo-aero-btn-secondary.is-dark:hover,
.volo-aero-btn-secondary.is-dark:focus-visible {
	background: rgba(15, 23, 42, 0.08);
}
.volo-aero-btn-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--volo-red) !important;
	text-decoration: none !important;
}
.volo-aero-btn-inline:hover,
.volo-aero-btn-inline:focus-visible {
	text-decoration: underline !important;
}
.volo-aero-btn:focus-visible,
.volo-aero-btn-inline:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--volo-red);
	outline-offset: 2px;
}

/* ---------- Badges (cert / platform-type / content-type) ---------- */

.volo-aero-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.volo-aero-badge-military {
	background: rgba(210, 35, 42, 0.08);
	border: 1px solid var(--volo-red);
	color: var(--volo-red);
}
.volo-aero-badge-civil {
	background: rgba(15, 23, 42, 0.08);
	border: 1px solid var(--volo-navy);
	color: var(--volo-navy);
}

/* ---------- Certification badge strip ---------- */

.volo-aero-cert-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: var(--volo-space-bar) 80px;
	background: var(--volo-white);
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-cert-strip-label {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--volo-slate);
	white-space: nowrap;
}
.volo-aero-cert-strip-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.volo-aero-cert-strip-badges span {
	background: var(--volo-bg-light);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-sm);
	padding: 10px 16px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--volo-navy);
	white-space: nowrap;
}
@media (max-width: 768px) {
	.volo-aero-cert-strip {
		padding: 24px 20px;
		justify-content: flex-start;
	}
}

/* ---------- Card grid (platform / service / partner / news cards) ---------- */

/*
 * box-sizing: border-box is load-bearing wherever a padded variant (e.g.
 * .volo-aero-capabilities-grid) is combined with this class: width: 100%
 * with the browser's default content-box sizing adds that padding on top
 * of the full-width box instead of inside it, overflowing the grid's own
 * container by exactly 2x the horizontal padding -- the right side (the
 * side that keeps expanding away from the fixed left edge) loses its
 * intended margin as a result, since the overflow gets silently clipped
 * by the page's overflow-x: hidden rather than triggering a scrollbar.
 */
.volo-aero-grid {
	display: grid;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
}
.volo-aero-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}
.volo-aero-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.volo-aero-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1024px) {
	.volo-aero-grid-4,
	.volo-aero-grid-3,
	.volo-aero-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.volo-aero-grid-4,
	.volo-aero-grid-3,
	.volo-aero-grid-2 {
		grid-template-columns: 1fr;
	}
}

.volo-aero-capabilities-grid {
	padding: 48px 80px;
}
@media (max-width: 1024px) {
	.volo-aero-capabilities-grid {
		padding: 32px 40px;
	}
}
@media (max-width: 480px) {
	.volo-aero-capabilities-grid {
		padding: 24px 20px;
	}
}

.volo-aero-platform-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--volo-bg-light-2);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 20px;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volo-aero-platform-card:hover,
.volo-aero-platform-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.volo-aero-platform-card .volo-aero-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.volo-aero-platform-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.volo-aero-platform-card p {
	font-size: 14px;
	margin: 0;
}

/* ---------- Full directory card (Capabilities Directory grid) ---------- */

.volo-aero-directory-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volo-aero-directory-card:hover,
.volo-aero-directory-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.volo-aero-directory-card .volo-aero-card-identity h3 {
	font-size: 24px;
	margin: 0 0 4px;
}
.volo-aero-directory-card .volo-aero-card-manufacturer {
	font-size: 14px;
	color: var(--volo-slate);
}
.volo-aero-directory-card .volo-aero-card-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--volo-slate);
	margin: 0;
}
.volo-aero-directory-card .volo-aero-card-specs {
	background: var(--volo-bg-light);
	border-radius: var(--volo-radius-sm);
	padding: 12px;
	font-size: 12px;
	color: var(--volo-slate);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.volo-aero-directory-card .volo-aero-card-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--volo-red);
}
.volo-aero-directory-card[hidden] {
	display: none;
}

/* ---------- ITAR-restricted fighter platform section (Capabilities Directory) ---------- */

.volo-aero-fighter-section {
	padding: var(--volo-space-section) 80px;
	background: var(--volo-bg-light);
	border-top: 1px solid var(--volo-border);
}
@media (max-width: 1024px) {
	.volo-aero-fighter-section {
		padding: 48px 40px;
	}
}
@media (max-width: 480px) {
	.volo-aero-fighter-section {
		padding: 32px 20px;
	}
}
.volo-aero-badge-restricted {
	background: var(--volo-navy-deep);
	border: 1px solid var(--volo-navy-deep);
	color: var(--volo-white);
}
/*
 * Same card as the general directory, distinguished only by the badge and
 * a darker top border -- deliberately not styled as an "error" or
 * "warning" state (no red), since there's nothing wrong with these
 * platforms; the treatment should read as "a different, compliance-bound
 * category" rather than alarming.
 */
.volo-aero-directory-card-restricted {
	border-top: 3px solid var(--volo-navy-deep);
}

/* ---------- Filter bar (search + pills + dropdown) ---------- */

.volo-aero-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 80px;
	background: var(--volo-white);
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-filter-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
/* The7's own `.content input[type="search"]` / `.content select` rules
   (higher specificity: two classes vs. our one) win the cascade on font-size,
   padding, border and height, so the search box and dropdown rendered at a
   different box height than the pills next to them (measured 69px/45px vs.
   the pills' 38px) -- misaligning the whole filter bar. box-sizing:border-box
   + an explicit shared height, with !important on the properties The7
   overrides, pins all three controls to the same 38px row. */
.volo-aero-filter-search {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-sm);
	padding: 0 16px;
	min-width: 220px;
}
.volo-aero-filter-search input {
	box-sizing: border-box;
	border: none !important;
	outline: none;
	font-family: var(--volo-font-body);
	font-size: 14px !important;
	width: 100%;
	height: 100% !important;
	padding: 0 !important;
	background: transparent !important;
}
.volo-aero-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.volo-aero-filter-pill {
	box-sizing: border-box;
	height: 38px;
	background: var(--volo-bg-light);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-sm);
	padding: 0 18px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--volo-navy);
	cursor: pointer;
}
.volo-aero-filter-pill.is-active {
	background: var(--volo-red);
	border-color: var(--volo-red);
	color: var(--volo-white);
}
.volo-aero-filter-dropdown {
	box-sizing: border-box;
	margin: 0 !important;
	height: 38px !important;
	border: 1px solid var(--volo-border) !important;
	border-radius: var(--volo-radius-sm) !important;
	padding: 0 30px 0 16px !important;
	font-family: var(--volo-font-body) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 36px !important;
	color: var(--volo-navy);
	background-color: var(--volo-white);
}
.volo-aero-filter-count {
	font-size: 14px;
	color: var(--volo-slate);
	font-weight: 600;
}
@media (max-width: 768px) {
	.volo-aero-filter-bar,
	.volo-aero-cert-strip {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Data table (platform detail parts directory) ---------- */

/* The wrapper scrolls (both ways) so a platform with hundreds of parts doesn't
   make the page endless: roughly ten rows show at once, the header row stays
   pinned, and on short screens the box shrinks with the viewport. */
.volo-aero-data-table-wrap {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	overflow: auto;
	max-height: min(640px, 75vh);
	width: 100%;
}
.volo-aero-data-table-wrap:focus-visible {
	outline: 2px solid var(--volo-red);
	outline-offset: 2px;
}
.volo-aero-data-table {
	width: 100%;
	border-collapse: collapse;
}
.volo-aero-data-table thead th {
	text-align: left;
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-navy);
	padding: 16px 16px;
	/* Pinned while the body scrolls. The divider is a shadow rather than a
	   border: borders don't travel with a sticky cell in a collapsed table. */
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--volo-white);
	box-shadow: 0 1px 0 var(--volo-border);
}
.volo-aero-data-table thead th:first-child,
.volo-aero-data-table tbody td:first-child {
	padding-left: 24px;
}
.volo-aero-data-table thead th:last-child,
.volo-aero-data-table tbody td:last-child {
	padding-right: 24px;
}
.volo-aero-data-table tbody td {
	padding: 14px 16px;
	font-family: var(--volo-font-body);
	font-size: 14px;
	color: var(--volo-navy);
	border-bottom: 1px solid var(--volo-border);
	vertical-align: middle;
}
.volo-aero-data-table tbody tr:nth-child(even) {
	background: var(--volo-bg-light);
}
.volo-aero-data-table tbody tr[hidden] {
	display: none;
}
.volo-aero-data-table .volo-aero-part-number {
	font-family: var(--volo-font-mono);
	color: var(--volo-red);
	white-space: nowrap;
}
.volo-aero-data-table td.volo-aero-mono {
	font-size: 13px;
	white-space: nowrap;
}
.volo-aero-data-table .volo-aero-repair-badge {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: var(--volo-radius-sm);
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: var(--volo-border);
	color: var(--volo-slate);
}
.volo-aero-data-table .volo-aero-repair-badge.is-overhaul {
	background: rgba(210, 35, 42, 0.15);
	color: var(--volo-red);
}
.volo-aero-data-table-empty {
	padding: 32px 24px;
	text-align: center;
	color: var(--volo-slate);
}
@media (max-width: 1024px) {
	.volo-aero-data-table {
		min-width: 900px;
	}
}

/* ---------- Stats card (platform detail hero) ---------- */

.volo-aero-stats-card {
	background: #151D30;
	border: 1px solid rgba(51, 65, 85, 0.7);
	border-radius: var(--volo-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 320px;
}
.volo-aero-stats-card h3 {
	color: var(--volo-white);
	font-size: 18px;
	font-weight: 800;
	margin: 0;
}
.volo-aero-stats-card .volo-aero-stat-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.volo-aero-stats-card .volo-aero-stat-item .volo-aero-stat-value {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 32px;
	color: var(--volo-red);
}
.volo-aero-stats-card .volo-aero-stat-item .volo-aero-stat-label {
	font-family: var(--volo-font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--volo-slate-light);
}
.volo-aero-stats-card hr {
	border: none;
	border-top: 1px solid rgba(51, 65, 85, 0.7);
	margin: 0;
}
.volo-aero-stats-card-restricted p {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--volo-slate-light);
	margin: 0;
}

/* ---------- ITAR notice (Platform Detail, replaces filter bar + parts table) ---------- */

.volo-aero-itar-notice {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px;
	text-align: center;
	background: var(--volo-bg-light);
	border: 1px solid var(--volo-border);
	border-top: 3px solid var(--volo-navy-deep);
	border-radius: var(--volo-radius);
}
.volo-aero-itar-notice h2 {
	margin: 0 0 16px;
}
.volo-aero-itar-notice p {
	font-family: var(--volo-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0 0 16px;
}
.volo-aero-itar-notice .volo-aero-btn {
	margin-top: 8px;
}
@media (max-width: 768px) {
	.volo-aero-itar-notice {
		padding: 32px 24px;
	}
}

/* ---------- Spec summary card ---------- */

.volo-aero-spec-card {
	background: var(--volo-bg-light-2);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.volo-aero-spec-card h3 {
	font-size: 24px;
	margin: 0 0 8px;
}
.volo-aero-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.volo-aero-spec-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.volo-aero-spec-row dt {
	font-family: var(--volo-font-heading);
	font-weight: 600;
	font-size: 13px;
	color: var(--volo-slate);
}
.volo-aero-spec-row dd {
	font-family: var(--volo-font-body);
	font-size: 15px;
	color: var(--volo-navy);
	margin: 0;
}
@media (max-width: 768px) {
	.volo-aero-spec-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Stats bar (dark, full-width) ---------- */

.volo-aero-stats-bar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 24px;
	padding: var(--volo-space-bar) 80px;
	background: var(--volo-navy-deep);
}
.volo-aero-stats-bar .volo-aero-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}
.volo-aero-stats-bar .volo-aero-stat .volo-aero-stat-value {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 56px;
	color: var(--volo-red);
}
.volo-aero-stats-bar .volo-aero-stat .volo-aero-stat-label {
	font-family: var(--volo-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-slate-light);
}
@media (max-width: 768px) {
	.volo-aero-stats-bar .volo-aero-stat .volo-aero-stat-value {
		font-size: 36px;
	}
}

/* ---------- Tabs (Who We Serve / News content-type) ---------- */

.volo-aero-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 80px;
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 24px 24px;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--volo-slate);
	cursor: pointer;
}
.volo-aero-tab.is-active {
	color: var(--volo-red);
	border-bottom-color: var(--volo-red);
}
.volo-aero-tab-panel[hidden] {
	display: none;
}
@media (max-width: 768px) {
	.volo-aero-tabs,
	.volo-aero-filter-bar {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- Accordion (FAQ) ---------- */

.volo-aero-accordion {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--volo-border);
}
.volo-aero-accordion-item {
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-accordion-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--volo-navy);
}
.volo-aero-accordion-item summary::-webkit-details-marker {
	display: none;
}
.volo-aero-accordion-item summary .volo-aero-accordion-icon {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.volo-aero-accordion-item[open] summary .volo-aero-accordion-icon {
	transform: rotate(180deg);
}
.volo-aero-accordion-item p {
	padding: 0 0 24px;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- Service card (Services page) ---------- */

.volo-aero-service-card {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
}
.volo-aero-service-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 20px;
	color: var(--volo-navy);
	margin: 0 0 12px;
}
.volo-aero-service-card .card-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.volo-aero-service-card .icon-circle-number {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--volo-font-mono);
	font-weight: 700;
	font-size: 12px;
	color: var(--volo-red);
	flex-shrink: 0;
}
.volo-aero-service-card .card-heading h3 {
	margin: 0;
}
.volo-aero-service-card p {
	font-family: var(--volo-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0;
}

/* ---------- Certification & document cards (Certifications page) ---------- */

.volo-aero-cert-card {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
}
.volo-aero-cert-card-top {
	margin-bottom: 16px;
}
.volo-aero-cert-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 20px;
	color: var(--volo-navy);
	margin: 0 0 4px;
}
.volo-aero-cert-issuer {
	font-family: var(--volo-font-body);
	font-size: 13px;
	color: var(--volo-slate);
	margin: 0 0 12px;
}
.volo-aero-cert-card p:not(.volo-aero-cert-issuer) {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0;
}

.volo-aero-quality-commitment {
	background: var(--volo-bg-light);
	border-radius: var(--volo-radius);
	padding: 40px;
}
.volo-aero-quality-text p {
	font-family: var(--volo-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0 0 24px;
}

.volo-aero-doc-card {
	display: block;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 24px;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volo-aero-doc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
/* h3, not h4: was skipping straight from this section's own h2 -- an
   accessibility audit flag. Retagged in the page's own content (raw
   <h4> there, not a shortcode) to match. */
.volo-aero-doc-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--volo-navy);
	margin: 0 0 8px;
}
.volo-aero-doc-card p {
	font-size: 13px;
	color: var(--volo-slate);
	margin: 0 0 12px;
}

/* ---------- Process timeline (Services "How We Work") ---------- */

.volo-aero-timeline {
	display: flex;
	gap: 24px;
	justify-content: space-between;
}
.volo-aero-timeline-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}
.volo-aero-timeline-step .volo-aero-timeline-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--volo-red);
	color: var(--volo-white);
	font-family: var(--volo-font-heading);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* h3, not h4: was skipping straight from the "How We Work" section's own
   h2 -- an accessibility audit flag. Retagged in the page's own content
   (raw <h4> there, not a shortcode) to match. Explicit font-family/weight/
   color added here too: this step title had never actually inherited the
   brand's Outfit/navy heading style (it isn't nested under the .volo-aero-ds
   wrapper other headings pick that up from), so it was rendering in the
   theme's plain default type -- a brand-guideline miss independent of the
   heading-level one. */
.volo-aero-timeline-step h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-navy);
	font-size: 18px;
	margin: 0;
}
.volo-aero-timeline-step p {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 1024px) {
	.volo-aero-timeline {
		flex-wrap: wrap;
	}
	.volo-aero-timeline-step {
		flex: 1 1 45%;
	}
}
@media (max-width: 768px) {
	.volo-aero-timeline-step {
		flex: 1 1 100%;
	}
}

/*
 * The7 parent theme adds a fixed padding-bottom to #main (its own generic
 * breathing room before the footer, meant for ordinary boxed content
 * endings). Every one of our page templates ends with the RFQ banner
 * (volo_aero_render_rfq_banner()), which already carries its own generous
 * vertical padding -- so that extra theme padding only ever shows up as a
 * stray white bar between the banner's colored background and the footer.
 * Zeroed only when the RFQ banner is present, so pages that don't have one
 * (e.g. single posts) keep the parent theme's normal spacing.
 */
#main:has(.volo-aero-rfq-banner) {
	padding-bottom: 0;
}

/* ---------- RFQ banner (slate, every page) ----------
 *
 * Was the same var(--volo-navy-deep) as the footer directly below it --
 * indistinguishable from the footer once the full-bleed gap fix (above)
 * let them sit flush against each other with no seam. --volo-slate reads
 * as its own band, distinct from both the white page above and the navy
 * footer below, without the full-saturation red being too much color for
 * a section this large. The subtitle can't use the standard slate-light
 * text color here -- slate-light-on-slate only clears ~3:1 contrast,
 * short of the 4.5:1 WCAG AA needs for 16px body text -- so it gets a
 * near-white override instead. The default (red-on-white)
 * .volo-aero-btn-primary needs no override on this background, unlike
 * on the earlier red version, since red-on-slate has plenty of contrast.
 */
.volo-aero-rfq-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: var(--volo-space-rfq) 80px;
	background: var(--volo-slate);
	text-align: center;
}
.volo-aero-rfq-banner h2 {
	color: var(--volo-white);
	font-size: 40px;
	font-weight: 800;
	margin: 0 0 12px;
}
/* Specificity note: .volo-aero-section-header.is-light p (two classes,
   above) outranks a plain .volo-aero-rfq-banner p override -- this needs
   the extra .volo-aero-section-header class to actually win the cascade. */
.volo-aero-rfq-banner .volo-aero-section-header.is-light p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	margin: 0;
}
.volo-aero-rfq-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.volo-aero-rfq-actions .volo-aero-rfq-phone {
	color: var(--volo-white);
	font-family: var(--volo-font-body);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
@media (max-width: 768px) {
	.volo-aero-rfq-banner,
	.volo-aero-stats-bar,
	.volo-aero-section-header {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* .volo-aero-section-header's own 20px side padding above only shifts
	   its own text inward -- a sibling like the CTA button in this header
	   row doesn't get it, so it sat 20px further left than the heading it
	   sits beside. Move the padding onto the row itself and zero it on the
	   header so both children share one true left/right edge. */
	.volo-aero-directory-header-row {
		padding-left: 20px;
		padding-right: 20px;
	}
	.volo-aero-directory-header-row .volo-aero-section-header {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- Breadcrumbs (dark hero context) ---------- */

.volo-aero-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--volo-font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--volo-slate-light);
}
.volo-aero-breadcrumbs a {
	color: var(--volo-slate-light);
	text-decoration: none;
}
.volo-aero-breadcrumbs a:hover {
	text-decoration: underline;
}
.volo-aero-breadcrumbs .is-current {
	color: var(--volo-white);
}

/* ---------- No-sidebar override (Platform Detail, full-width per Figma) ---------- */

/* The presscore_config 'sidebar_position'=disabled override in the
   template already stops the sidebar's own widget-area element from
   rendering at all (confirmed directly: .wf-container-main ends up with
   only one child, #content) -- the layout wrapper's "sidebar-right" class
   is just a leftover layout descriptor, not an actual element to hide, and
   trying to hide anything by a broad [class*="sidebar"] match wiped out
   #content's own ancestor wrapper (id="main", class="sidebar-right...").
   Only the grid sizing itself needs correcting, to stop reserving a
   column for a sidebar that no longer exists. */
.volo-aero-no-sidebar .wf-container-main {
	grid-template-columns: 1fr !important;
	grid-template-areas: "content" !important;
}

/* ---------- Platform Detail hero (template-capability-directory.php) ---------- */

.volo-aero-platform-hero {
	position: relative;
	background: var(--volo-navy-deep);
	background-image: linear-gradient(rgba(11, 15, 25, 0.92), rgba(11, 15, 25, 0.92)), url('../../../../uploads/2018/10/T56-Main-drive-gear.jpg');
	background-size: cover;
	background-position: center;
	/* Full-bleed (see the shared list at the top of this file), so the
	   horizontal padding adds the distance the box was pulled out of the
	   content column (50vw - 50%) back onto the usual 80px -- keeps the
	   badges/heading/stats card on the same left/right edge as the title
	   bar above and the Quick Reference card below. */
	padding: 64px calc(80px + 50vw - 50%);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.volo-aero-platform-hero-grid {
	display: flex;
	align-items: center;
	gap: 48px;
}
.volo-aero-platform-hero-content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.volo-aero-hero-badges {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
}
.volo-aero-badge-neutral {
	background: rgba(210, 35, 42, 0.15);
	border: 1px solid var(--volo-red);
	/* var(--volo-red) text on this badge's own tinted-red background only
	   cleared ~4.1:1 (an accessibility audit flag) -- short of the 4.5:1
	   WCAG AA floor for text this size. --volo-red-hover is dark enough
	   against the same background to clear 5.3:1, and reads as the same
	   red at this scale. */
	color: var(--volo-red-hover);
}
.volo-aero-platform-manufacturer-label {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* --volo-red on --volo-navy-deep only clears ~3.66:1 -- see
	   --volo-red-on-dark's definition in style.css. */
	color: var(--volo-red-on-dark);
	margin: 0;
}
.volo-aero-platform-hero-content h1 {
	font-family: var(--volo-font-heading);
	font-weight: 900;
	font-size: 40px;
	line-height: 1.15;
	color: var(--volo-white);
	margin: 0 0 8px;
	text-wrap: balance;
}
.volo-aero-platform-hero-desc {
	font-family: var(--volo-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--volo-slate-light);
	margin: 0 0 8px;
}
.volo-aero-aircraft-line {
	font-family: var(--volo-font-body);
	font-size: 14px;
	color: var(--volo-white);
	margin: 0;
}
/* The type/segment badges at the top of this hero reuse the same
   .volo-aero-badge classes as the light-background directory cards, whose
   text colors were tuned for THAT context (tinted background over white).
   Composited over this hero's dark navy instead, all three read as
   near-invisible (1.07:1 for Civil's navy-on-navy, 2.83:1 for Neutral's
   red-hover, 3.66:1 for Military's red -- all an accessibility audit
   flag). Scoped overrides for this one container rather than changing the
   shared badge classes, which are correct as-is on their light pages. */
.volo-aero-platform-hero .volo-aero-badge-military,
.volo-aero-platform-hero .volo-aero-badge-neutral {
	color: var(--volo-red-on-dark);
	border-color: var(--volo-red-on-dark);
}
.volo-aero-platform-hero .volo-aero-badge-civil {
	color: var(--volo-slate-light);
	border-color: var(--volo-slate-light);
}
.volo-aero-aircraft-line strong {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* --volo-red on --volo-navy-deep only clears ~3.66:1 -- see
	   --volo-red-on-dark's definition in style.css. */
	color: var(--volo-red-on-dark);
	margin-right: 8px;
}
.volo-aero-platform-hero .volo-aero-stats-card {
	width: 400px;
	flex-shrink: 0;
}
@media (max-width: 1024px) {
	.volo-aero-platform-hero-grid {
		flex-direction: column;
		align-items: stretch;
	}
	.volo-aero-platform-hero .volo-aero-stats-card {
		width: auto;
	}
}
@media (max-width: 768px) {
	.volo-aero-platform-hero {
		padding: 40px calc(20px + 50vw - 50%);
	}
	.volo-aero-platform-hero-content h1 {
		font-size: 28px;
	}
}

/* ---------- Spec summary / table / related-news sections (Platform Detail) ---------- */

.volo-aero-spec-summary-section,
.volo-aero-table-section,
.volo-aero-related-news-section {
	padding: 24px 80px;
}
.volo-aero-table-section,
.volo-aero-related-news-section {
	padding-top: 48px;
	padding-bottom: 48px;
}
.volo-aero-table-section {
	background: var(--volo-bg-light);
}
.volo-aero-spec-attribution {
	font-size: 12px;
	/* --volo-slate-light was tuned for dark backgrounds (var(--volo-navy-deep),
	   ~7.5:1) but this card sits on a light grey background, where it only
	   clears ~2.34:1 (an accessibility audit flag) -- var(--volo-slate)
	   clears ~5.7:1 here instead. */
	color: var(--volo-slate);
	margin: 8px 0 0;
}
@media (max-width: 768px) {
	.volo-aero-spec-summary-section,
	.volo-aero-table-section,
	.volo-aero-related-news-section {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.volo-aero-news-card {
	display: flex;
	flex-direction: column;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	overflow: hidden;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volo-aero-news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
/*
 * 16:9 (not the original fixed 200px, which worked out to ~2.57:1 at this
 * card's width) was chosen after the same real-photo audit behind the
 * single-post hero's aspect-ratio: 41% of the site's actual featured
 * photos are portrait-oriented, and the old ~2.57:1 crop threw away
 * nearly as much of the frame proportionally as the hero's old ~2.9:1
 * did, just at a smaller, less obviously-broken size. Using aspect-ratio
 * on the wrapper (rather than a fixed height) keeps every card in a grid
 * row the same height regardless of column width.
 */
.volo-aero-news-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
/*
 * !important is load-bearing here: images carry HTML width/height
 * attributes, which browsers turn into an implicit `aspect-ratio` on the
 * <img> (the intrinsic-size spec, meant to prevent layout shift). Inside
 * this wrapper, that aspect-ratio wins over a plain `height: 100%`, so
 * the image rendered at its native ratio instead of the container's --
 * for a 360x240 default placeholder image that meant overflowing past
 * the wrapper's bounds, silently spilling into the card's text content
 * below it (no visible clipping, since the wrapper itself was missing
 * overflow: hidden too, above). Forcing both wins the cascade regardless
 * of the image's own dimensions.
 */
.volo-aero-news-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.volo-aero-news-card-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.volo-aero-news-card-date {
	font-size: 13px;
	color: var(--volo-slate);
	margin: 0;
}
.volo-aero-news-card-content h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 18px;
	color: var(--volo-navy);
	margin: 0;
}

/* ---------- Who We Serve segment sections (page-who-we-serve.php) ---------- */

.volo-aero-segment-section {
	padding: var(--volo-space-section) 80px;
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-segment-hero {
	display: flex;
	align-items: center;
	gap: 48px;
}
/* Figma alternates the hero layout per segment -- Military and Material
   Trading are text-left/image-right, but Civil Aviation reverses to
   image-left/text-right. DOM order stays content-then-image for every
   segment (keeps reading/tab order sane); this just visually swaps it for
   Civil. */
[data-tab-panel="civil"] .volo-aero-segment-hero {
	flex-direction: row-reverse;
}
.volo-aero-segment-content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.volo-aero-segment-content h2 {
	font-family: var(--volo-font-heading);
	font-weight: 900;
	font-size: 40px;
	line-height: 1.15;
	color: var(--volo-navy);
	margin: 0;
	text-wrap: balance;
}
.volo-aero-segment-copy p {
	font-family: var(--volo-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0;
}
.volo-aero-segment-image {
	flex: 1 1 0;
	border-radius: var(--volo-radius);
	overflow: hidden;
}
.volo-aero-segment-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.volo-aero-segment-platforms {
	margin-top: 48px;
}
.volo-aero-segment-platforms h2 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--volo-navy);
	margin: 0 0 24px;
}
.volo-aero-platform-dots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.volo-aero-platform-dots li {
	/* The7's own content-list typography beats a plain list-style:none on
	   the <ul> with a more specific rule targeting <li> directly (same
	   issue already fixed once for .volo-aero-capabilities-list) --
	   !important plus killing ::marker removes it regardless of source. */
	list-style: none !important;
	position: relative;
	padding-left: 24px;
}
.volo-aero-platform-dots li::marker {
	content: none;
}
.volo-aero-platform-dots li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--volo-red);
}
.volo-aero-platform-dots a {
	color: var(--volo-navy);
	font-family: var(--volo-font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
}
.volo-aero-platform-dots a:hover {
	color: var(--volo-red);
	text-decoration: underline !important;
}
@media (max-width: 1024px) {
	.volo-aero-platform-dots {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.volo-aero-segment-section {
		padding: 48px 20px;
	}
	.volo-aero-segment-hero,
	[data-tab-panel="civil"] .volo-aero-segment-hero {
		flex-direction: column;
	}
	.volo-aero-segment-content h2 {
		font-size: 28px;
	}
	.volo-aero-platform-dots {
		grid-template-columns: 1fr;
	}
}

/* ---------- Page title bar (The7 fancy header, every inner page) ----------
 * Figma's PageHeader is consistently a dark navy band on every inner page
 * (matches the same dark-navy treatment used on the Homepage hero and the
 * Platform Detail hero) -- The7's own default here is a light "solid-bg"
 * title bar with red text, driven by the site's accent-color option. */

.page-title.solid-bg {
	background: var(--volo-navy-deep) !important;
}
/* The7's own .wf-wrap padding (25px/20px) plus its 34px h1 make this bar
   taller than the rest of the site's section spacing calls for -- trim it
   here so every inner page's title bar gets the reduction, not just the
   mobile-only cut below. The7 also sets .wf-wrap's min-height to a fixed
   180px (a customizer "title bar height" option), which silently floors
   the box regardless of its padding/font-size -- shrinking those alone
   left the box pinned at 180px with extra blank space inside it. Override
   the floor too so the box actually follows its content. */
.page-title.solid-bg .wf-wrap {
	min-height: auto;
	padding-top: 20px;
	padding-bottom: 16px;
}
.page-title.solid-bg .page-title-head h1 {
	color: var(--volo-white) !important;
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 30px;
}
/* Figma's PageHeader stacks breadcrumb -> H1 -> subtitle, but The7 always
   echoes the H1 before the breadcrumb ($page_title, $breadcrumbs in
   template-hooks.php, with no template file here to edit directly) --
   reorder visually with flex `order` on .wf-wrap's three children rather
   than fight the parent theme's own echo sequence. */
.page-title.solid-bg .breadcrumbs {
	order: 1;
}
.page-title.solid-bg .page-title-head {
	order: 2;
	margin-top: 12px;
}
/* Figma's PageHeader subtitle -- appended after the H1 via the
   presscore_page_title filter (volo_aero_page_title_subtitle() in
   functions.php), since The7 has no template file for this bar. */
.page-title.solid-bg .volo-aero-page-title-subtitle {
	order: 3;
	font-family: var(--volo-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--volo-slate-light);
	width: 100%;
	margin: 12px 0 0;
}
@media (max-width: 768px) {
	.page-title.solid-bg .volo-aero-page-title-subtitle {
		font-size: 15px;
	}
}
.page-title.solid-bg .breadcrumbs,
.page-title.solid-bg .breadcrumbs .current,
.page-title.solid-bg .assistive-text {
	color: var(--volo-slate-light) !important;
}
.page-title.solid-bg .breadcrumbs a {
	color: var(--volo-slate-light) !important;
}
.page-title.solid-bg .breadcrumbs a:hover {
	color: var(--volo-white) !important;
}
/* Figma left-aligns the page title/breadcrumb (matching every other
   section header on the site) -- The7's "title-center" layout option
   centers both by default. */
.page-title.solid-bg.title-center {
	text-align: left;
	padding-left: 80px;
	padding-right: 80px;
}
.page-title.solid-bg .page-title-head,
.page-title.solid-bg .page-title-breadcrumbs {
	text-align: left;
}
/* text-align was never the issue -- .wf-wrap (the actual content
   container here) is display:flex with justify-content/align-items:center,
   which is what was really centering the title block. Scoped to inside
   .page-title only; .wf-wrap is a generic wrapper class reused elsewhere
   in the theme for unrelated layout. */
.page-title.solid-bg .wf-wrap {
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}
@media (max-width: 768px) {
	.page-title.solid-bg.title-center {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* Desktop's 25px/20px .wf-wrap padding plus a 34px h1 add up to a
	   180px-tall bar -- proportionate next to a full desktop hero, but a
	   large fraction of a phone's first screen for two short lines of
	   text. Trim both on mobile. */
	.page-title.solid-bg .wf-wrap {
		padding-top: 12px;
		padding-bottom: 12px;
		/* The7's own "title-center" layout option re-centers this bar at
		   this breakpoint (a separate, narrower mobile rule than the one
		   the desktop-scoped override further up this file already beats)
		   -- a real problem now that this bar carries a full paragraph of
		   body text, which reads badly centered across several lines. */
		justify-content: flex-start !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	.page-title.solid-bg .page-title-head h1 {
		font-size: 22px;
		line-height: 1.3;
		margin-bottom: 4px;
	}
	.page-title.solid-bg .breadcrumbs {
		font-size: 13px;
	}
}

/* ---------- Skip link ---------- */

.volo-aero-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--volo-red);
	color: var(--volo-white) !important;
	padding: 12px 20px;
	z-index: 10000;
	border-radius: 0 0 var(--volo-radius-sm) 0;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	text-decoration: none;
}
.volo-aero-skip-link:focus {
	left: 0;
}

/* =========================================================================
 * Homepage (post_content, WPBakery) — el_id anchors already exist on each
 * row from earlier work in this project; this reskins them to the token
 * palette/type/spacing without needing to touch the WPBakery shortcode
 * structure itself.
 * ========================================================================= */

#home-hero .wpb_column,
#home-hero .vc_column-inner {
	font-family: var(--volo-font-body);
}
#home-hero .dt-btn,
#home-hero a.dt_default_button,
#home-hero .the7-button {
	font-family: var(--volo-font-heading) !important;
}
/* Figma's HeroContent is a left-aligned, ~820px-wide block sitting inside
   80px of page padding -- not text centered across the row. The column
   itself (.volo-aero-hero-col, from the collapsed 1/6+4/6+1/6 split) still
   spans the full row, so the max-width + padding below is what actually
   constrains and positions the content. */
/* Must land on ONLY the column's own top-level wrapper
   (.volo-aero-hero-col > .vc_column-inner > .wpb_wrapper), via direct-child
   combinators throughout -- a plain descendant selector also matches the
   separate, nested .wpb_wrapper that each individual vc_column_text/button
   shortcode renders inside itself, double-applying the 80px left padding
   to the text (which sits inside its own nested wrapper) but not to the
   button row (which doesn't have one), so the two visibly misaligned. */
#home-hero .volo-aero-hero-col > .vc_column-inner > .wpb_wrapper {
	max-width: 820px;
	padding-left: 80px;
	padding-right: 20px;
	text-align: left;
	box-sizing: border-box;
}
/* .volo-aero-hero-cta{-primary,-secondary} land on the <a> itself (the
   dt_default_button shortcode's el_class output), but the element that
   actually stacks block-level is its wrapping .btn-align-left div (was
   .btn-align-center before the hero was left-aligned) -- only these two
   buttons sit inside #home-hero, so scoping by the parent selector is
   safe. */
#home-hero .btn-align-left {
	display: inline-block;
	margin: 0 16px 0 0;
	vertical-align: middle;
}
#home-hero .volo-aero-hero-cta-secondary {
	background: transparent !important;
	border: 1.5px solid #ffffff !important;
	box-shadow: none !important;
}
#home-hero .volo-aero-hero-cta-secondary span {
	color: #ffffff !important;
}
@media (max-width: 768px) {
	#home-hero .volo-aero-hero-col > .vc_column-inner > .wpb_wrapper {
		padding-left: 20px;
		padding-right: 20px;
		max-width: 100%;
	}
}
@media (max-width: 480px) {
	#home-hero .btn-align-left {
		display: block;
		margin: 0 0 8px;
	}
}

/* Figma's hero overlay is a flat rgba(11,15,25,0.85) scrim, not the
   gradient the original design used (style.css's #home-hero::before,
   0.65 -> 0.75). Overriding here rather than editing that rule so its own
   documented WCAG-contrast rationale stays intact for reference. */
#home-hero::before {
	background: rgba(11, 15, 25, 0.85) !important;
}

/* Footer brand column (widget_block id 7, all pages) -- matches Figma's
   FooterBrandCol: bold brand name standing in for a logo image (no
   custom_logo attachment is configured on this install to reuse) plus a
   muted description line. */
.volo-aero-footer-brand h3 {
	color: var(--volo-red);
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 22px;
}
.volo-aero-footer-brand p {
	color: var(--volo-slate-light);
}

#home-certifications {
	padding: 0 !important;
}

#home-who-we-serve {
	background: var(--volo-bg-light) !important;
	padding: var(--volo-space-section) 0 !important;
}
/* WPBakery renders this inner row as display:block with zero column
   margin/padding (its "no gutter" mode) -- gap alone has no effect on a
   block container, so the three cards were sitting flush edge-to-edge.
   Switching to flex is what actually makes the gap apply; each column
   keeps the width set by its own vc_col-sm-4 class as its flex-basis. */
#home-who-we-serve .vc_row.vc_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
#home-who-we-serve .vc_row.vc_inner > .wpb_column {
	flex: 1 1 0;
	width: auto;
}
@media (max-width: 768px) {
	#home-who-we-serve .vc_row.vc_inner > .wpb_column {
		flex: 1 1 100%;
	}
}
/* Card styling scoped to the three INNER segment columns only
   (.vc_row_inner > * .wpb_column) -- applying it to .wpb_column generally
   also matched the single full-width OUTER column that wraps the heading
   + the whole inner row, producing a card-within-a-card. */
#home-who-we-serve .vc_row.vc_inner .wpb_column {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#home-who-we-serve .vc_row.vc_inner .wpb_column:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
#home-who-we-serve .vc_row.vc_inner .wpb_column .wpb_wrapper {
	padding: 0 24px 24px;
}
#home-who-we-serve .vc_row.vc_inner .wpb_column .vc_single_image-wrapper {
	margin: 0 0 20px;
	border-radius: 0;
}
#home-who-we-serve .vc_row.vc_inner .wpb_column .wpb_wrapper > *:not(.vc_single_image) {
	padding-left: 8px;
	padding-right: 8px;
}
#home-who-we-serve h1,
#home-who-we-serve h2,
#home-who-we-serve h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-navy);
}

#home-capabilities {
	padding: var(--volo-space-section) 80px !important;
}
#home-capabilities h1,
#home-capabilities h2 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-navy);
}

#home-stats {
	background: var(--volo-navy-deep) !important;
	padding: var(--volo-space-bar) 0 !important;
}
/* [volo_stat] -- static homepage figures (see volo_aero_stat_shortcode()). */
.volo-aero-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
}
a.volo-aero-stat:hover .volo-aero-stat-value,
a.volo-aero-stat:focus-visible .volo-aero-stat-value {
	text-decoration: underline;
}
.volo-aero-stat-icon {
	display: inline-flex;
	color: var(--volo-white);
}
.volo-aero-stat-figure {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-red);
}
.volo-aero-stat-value {
	font-size: 40px;
	line-height: 1.1;
}
.volo-aero-stat-suffix {
	font-size: 24px;
}
.volo-aero-stat-label {
	font-family: var(--volo-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-slate-light);
}

#home-trusted-by {
	padding: var(--volo-space-section) 80px !important;
}
#home-trusted-by h1,
#home-trusted-by h2,
#home-trusted-by h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-navy);
}

@media (max-width: 768px) {
	#home-capabilities,
	#home-trusted-by {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* ---------- Contact page ---------- */

.volo-aero-contact-method-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px;
	background: var(--volo-bg-light);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-md);
}
.volo-aero-contact-method-icon {
	font-size: 24px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--volo-navy);
	color: var(--volo-white);
	border-radius: var(--volo-radius-sm);
	margin-bottom: 8px;
}
.volo-aero-contact-method-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--volo-navy);
	margin: 0;
}
.volo-aero-contact-method-card a {
	font-family: var(--volo-font-body);
	font-size: 16px;
	color: var(--volo-red);
	text-decoration: none;
}
.volo-aero-contact-method-card a:hover,
.volo-aero-contact-method-card a:focus-visible {
	text-decoration: underline;
}

.volo-aero-contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 1024px) {
	.volo-aero-contact-grid {
		grid-template-columns: 1fr;
	}
}

.volo-aero-contact-form-card,
.volo-aero-contact-info-card {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-md);
	padding: 40px;
}
.volo-aero-contact-form-card h3,
.volo-aero-contact-info-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--volo-navy);
	margin: 0 0 8px;
}
.volo-aero-contact-form-card > p {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
	font-size: 15px;
	margin: 0 0 24px;
}
.volo-aero-contact-info-card h4 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--volo-navy);
	margin: 24px 0 12px;
}
.volo-aero-address {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
.volo-aero-hours-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.volo-aero-hours-row {
	display: flex;
	justify-content: space-between;
	font-family: var(--volo-font-body);
	font-size: 14px;
	color: var(--volo-slate);
	padding: 4px 0;
	border-bottom: 1px solid var(--volo-border);
}
.volo-aero-hours-row:last-child {
	border-bottom: none;
}
.volo-aero-map-embed {
	margin-top: 24px;
	border-radius: var(--volo-radius-sm);
	overflow: hidden;
	border: 1px solid var(--volo-border);
}
.volo-aero-map-embed iframe {
	display: block;
	width: 100%;
}

/* CF7 RFQ form field styling */
.volo-aero-contact-form-card .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.volo-aero-contact-form-card .wpcf7-form p {
	margin: 0;
}
.volo-aero-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 480px) {
	.volo-aero-form-row {
		grid-template-columns: 1fr;
	}
}
.volo-aero-contact-form-card label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--volo-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--volo-navy);
}
.volo-aero-contact-form-card input[type="text"],
.volo-aero-contact-form-card input[type="email"],
.volo-aero-contact-form-card input[type="tel"],
.volo-aero-contact-form-card select,
.volo-aero-contact-form-card textarea {
	font-family: var(--volo-font-body);
	font-weight: 400;
	font-size: 15px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--volo-navy);
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius-sm);
	padding: 12px 16px;
	width: 100%;
}
.volo-aero-contact-form-card textarea {
	min-height: 140px;
	resize: vertical;
}
.volo-aero-contact-form-card input:focus-visible,
.volo-aero-contact-form-card select:focus-visible,
.volo-aero-contact-form-card textarea:focus-visible {
	outline: 2px solid var(--volo-red);
	outline-offset: 1px;
}
.volo-aero-contact-form-card .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-white);
	background: var(--volo-red);
	border: none;
	border-radius: var(--volo-radius-sm);
	padding: 16px 36px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}
.volo-aero-contact-form-card .wpcf7-submit:hover,
.volo-aero-contact-form-card .wpcf7-submit:focus-visible {
	background: var(--volo-red-hover);
}
.volo-aero-contact-form-card .wpcf7-not-valid-tip {
	font-family: var(--volo-font-body);
	font-size: 13px;
	color: var(--volo-red);
	margin-top: 4px;
}
.volo-aero-contact-form-card .wpcf7-response-output {
	font-family: var(--volo-font-body);
	font-size: 14px;
	border-radius: var(--volo-radius-sm);
	padding: 12px 16px;
	margin: 0;
}

/* ---------- News Hub (page-news.php) ---------- */

/* page-news.php's own H1 stands in for the page-title bar (disabled for
   this page -- see style.css's .volo-aero-content-type-tabs comment), so
   the shared section-header component needs an h1 rule alongside its h2
   one; every other page only ever puts an h2 in here. */
.volo-aero-section-header h1 {
	font-weight: 800;
	font-size: 40px;
	margin: 0;
	text-wrap: balance;
}
@media (max-width: 768px) {
	.volo-aero-section-header h1 {
		font-size: 28px;
	}
}

.volo-aero-news-hub-intro {
	max-width: 720px;
	margin-bottom: 8px;
}
.volo-aero-news-hub-intro p {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
	font-size: 16px;
	line-height: 1.6;
}

.volo-aero-news-card-content .volo-aero-badge,
.volo-aero-featured-news-content .volo-aero-badge {
	align-self: flex-start;
}
.volo-aero-news-card-meta {
	font-family: var(--volo-font-mono);
	font-size: 13px;
	color: var(--volo-slate);
	margin: 0;
}
.volo-aero-news-grid {
	margin: 32px 0;
}

.volo-aero-featured-news-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: stretch;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	overflow: hidden;
	text-decoration: none !important;
	margin-bottom: 32px;
	transition: box-shadow 0.15s ease;
}
.volo-aero-featured-news-card:hover {
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.volo-aero-featured-news-image {
	min-height: 280px;
}
.volo-aero-featured-news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.volo-aero-featured-news-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 32px 32px 32px 0;
}
.volo-aero-featured-news-content h2 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 28px;
	color: var(--volo-navy);
	margin: 0;
	text-wrap: balance;
}
.volo-aero-featured-news-content p {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 1024px) {
	.volo-aero-featured-news-card {
		grid-template-columns: 1fr;
	}
	.volo-aero-featured-news-content {
		padding: 0 24px 24px;
	}
	.volo-aero-featured-news-image {
		min-height: 220px;
	}
}

/* ---------- News Post (content-single.php) ---------- */

.entry-content {
	font-family: var(--volo-font-body);
	color: var(--volo-slate);
	font-size: 16px;
	line-height: 1.7;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--volo-font-heading);
	color: var(--volo-navy);
	font-weight: 800;
}

/*
 * category/author/date are all switched off in content-single.php (each
 * duplicated something shown elsewhere -- see the comment there), so
 * .post-meta below the content now only ever holds tags, if the post has
 * any. Kept a modest bottom margin for that case rather than removing the
 * rule outright.
 */
.single-postlike .post-meta {
	margin-bottom: 16px;
}
.volo-aero-post-extras {
	margin-top: 0;
	padding-top: 24px;
	border-top: 1px solid var(--volo-border);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.volo-aero-fast-facts {
	font-family: var(--volo-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--volo-slate);
	background: var(--volo-bg-light);
	border-left: 3px solid var(--volo-red);
	padding: 16px 20px;
	border-radius: 0 var(--volo-radius-sm) var(--volo-radius-sm) 0;
	margin: 0;
}
.volo-aero-event-summary {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	color: var(--volo-navy);
	margin: 0;
}
.volo-aero-related-posts p {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-navy);
	margin: 0 0 8px;
}
.volo-aero-related-posts ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.volo-aero-related-posts a {
	font-family: var(--volo-font-body);
	color: var(--volo-red);
	text-decoration: none;
}
.volo-aero-related-posts a:hover {
	text-decoration: underline;
}
.volo-aero-post-cta .button {
	display: inline-flex;
	align-items: center;
	/* The7's own .button class defaults to white-space: nowrap, sized for
	   short static labels -- this CTA's text is a full dynamic sentence
	   (e.g. "Need AE1107 MRO support? Get in touch with our team."), which
	   overflowed its container on narrow viewports without this override. */
	white-space: normal;
	max-width: 100%;
	text-align: center;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--volo-white) !important;
	background: var(--volo-red);
	border-radius: var(--volo-radius-sm);
	padding: 16px 32px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.volo-aero-post-cta .button:hover,
.volo-aero-post-cta .button:focus-visible {
	background: var(--volo-red-hover);
}

.volo-aero-author-bio {
	background: var(--volo-bg-light);
	border: 1px solid var(--volo-border);
	border-top: 3px solid var(--volo-red);
	border-radius: var(--volo-radius);
	padding: 28px;
}
.volo-aero-author-bio-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.volo-aero-author-kicker {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	/* var(--volo-slate-light) only cleared ~2.45:1 against this card's
	   near-white background -- an accessibility audit flag, well short of
	   the 4.5:1 WCAG AA floor. var(--volo-slate) clears ~7.5:1 here. */
	color: var(--volo-slate);
	margin: 0;
}
/*
 * Scoped to this card via the custom wrap_class passed to
 * the7_display_post_share_buttons() -- none of the parent theme's
 * .single-share-box rules (centered, block-level, 50-110px of its own
 * margin) apply here. The default share-link-description is also a
 * stacked icon-over-text column meant to stand alone in a full-width
 * strip; flattened to a single small icon here since "Written By" already
 * gives this corner of the card a reason to exist without a repeated
 * "Share this post" label.
 */
.volo-aero-author-share {
	flex: 0 0 auto;
}
.volo-aero-author-share .share-link-description {
	/*
	 * "Share this post" is a raw text node next to the icon span (not its
	 * own element), so it can't be display:none'd directly -- zeroing the
	 * font-size on the container collapses that text to nothing while the
	 * icon, sized in px rather than em, is unaffected.
	 */
	flex-flow: row nowrap;
	margin-bottom: 0;
	font-size: 0;
}
.volo-aero-author-share .share-link-icon {
	width: 30px;
	height: 30px;
	margin-bottom: 0;
	border-color: var(--volo-border);
	color: var(--volo-slate);
}
.volo-aero-author-bio-inner {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.volo-aero-author-avatar {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--volo-navy), var(--volo-navy-deep));
	color: var(--volo-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.5px;
	box-shadow: 0 0 0 3px var(--volo-white), 0 0 0 4px var(--volo-border);
}
.volo-aero-author-bio-text h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 18px;
	color: var(--volo-navy);
	margin: 0;
}
.volo-aero-author-title {
	font-family: var(--volo-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--volo-red);
	margin: 3px 0 10px !important;
}
.volo-aero-author-bio-text p {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0;
}

/* Sidebar (search / recent posts / cert box) -- The7's own widget-card
   chrome is kept as-is; only the parts that read as unbranded (link/heading
   colors, the cert badge list) are tokenized here. */
.sidebar-content .widget-title,
.sidebar-content .widget > h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	color: var(--volo-navy);
}
.sidebar-content a {
	color: var(--volo-red);
}
.volo-aero-sidebar-cert-box h3 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 15px;
	color: var(--volo-navy);
	margin: 0 0 12px;
}
.volo-aero-sidebar-cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.volo-aero-sidebar-cert-badge {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(210, 35, 42, 0.08);
	border: 1px solid var(--volo-red);
	color: var(--volo-red);
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/*
 * Ultimate Addons' interactive_banner_2 slides (Slick carousel) with no
 * fixed height: each <img> renders at its own native aspect ratio, so
 * mixing a tall portrait photo (e.g. the facility team photo) with wide
 * landscape ones (e.g. the exterior building shot) makes Slick's slides
 * wildly different heights. Slick recalculates its track height to match
 * whichever slide is current, so advancing the carousel visibly resizes
 * the whole block and threw off everything below it on the page (the RFQ
 * banner and footer briefly rendered at the wrong vertical position after
 * clicking through slides on the About page's facility carousel). Forcing
 * a uniform crop keeps every slide -- and the carousel's own height -- the
 * same regardless of the source photo's own dimensions.
 */
.ult-new-ib-img {
	width: 100% !important;
	height: 300px !important;
	object-fit: cover !important;
}
.ult-new-ib {
	overflow: hidden;
}

/*
 * The caption title rendered plain white text with text-shadow: none
 * directly over the photo, no scrim behind it -- on a light-colored photo
 * (the tan building exterior, the light grinding-cell interior) that's
 * white-on-white, an outright WCAG contrast failure, not just a stylistic
 * nitpick. The gradient stays permanent (not hover-only) since the caption
 * itself is always visible, not just on hover; the text-shadow is a second,
 * independent safety margin in case a future photo's darkest region still
 * doesn't reach the gradient's opaque end.
 */
.ult-new-ib-desc {
	background: linear-gradient(to top, rgba(11, 15, 25, 0.85) 0%, rgba(11, 15, 25, 0.45) 40%, rgba(11, 15, 25, 0) 75%) !important;
}
.ult-new-ib-title {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
	font-weight: 700 !important;
}

/*
 * Most posts fall back to the small 360x240 default placeholder image
 * (no real photo set) -- the parent theme's single-post template renders
 * the featured image at the full content-column width regardless, which
 * for that source file meant stretching it roughly 3.4x past its native
 * resolution: a visibly oversized, soft/blurry hero dominating the top of
 * every article. object-fit: cover crops cleanly instead of squashing it.
 *
 * 16:9 (not a fixed px height) was chosen after auditing the actual
 * featured images in use: median native ratio across the 46 real (non-
 * placeholder) photos is ~1.33 (4:3), and 41% are portrait-oriented
 * (~0.75). An earlier fixed 420px cap on this ~1217px-wide column worked
 * out to ~2.9:1, which on a portrait source crops away roughly three
 * quarters of the vertical frame. 16:9 keeps the hero well short of the
 * original uncapped height while preserving far more of each photo, and
 * -- being a ratio rather than a px value -- stays proportionate at any
 * column width instead of being tuned to one specific viewport.
 */
.single-postlike .post-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * ---------- About page redesign (Figma "Volo Aero refresh 2026",
 * node 148:308) ----------
 *
 * Layout/component patterns from that file, rebuilt with the theme's own
 * existing tokens (--volo-red/--volo-navy-deep/--volo-slate/etc., Outfit +
 * Manrope) rather than the mockup's own palette/typeface -- brand guidance
 * stays as-is, only the page structure changes. Facility photography reuses
 * real existing site images instead of the mockup's placeholder shots.
 */

/* Generic full-bleed colored section band (Customer Gains, PMV, Facility
   sections) -- same padding convention as .volo-aero-fighter-section. */
.volo-aero-section-band {
	padding: var(--volo-space-section) 80px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.volo-aero-section-band.is-grey {
	background: var(--volo-bg-light-2);
}
.volo-aero-section-band.is-white {
	background: var(--volo-white);
}
@media (max-width: 1024px) {
	.volo-aero-section-band {
		padding: 48px 40px;
		gap: 40px;
	}
}
@media (max-width: 480px) {
	.volo-aero-section-band {
		padding: 32px 20px;
	}
}

/* Eyebrow pill badge (red dot + uppercase mono label) used above every
   section heading in this redesign -- a small enhancement on the existing
   plain-text .volo-aero-kicker, kept local to this page rather than changed
   globally since other pages already rely on the plain-kicker look. */
.volo-aero-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--volo-radius-sm);
	background: rgba(210, 35, 42, 0.08);
	font-family: var(--volo-font-mono);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--volo-red);
}
.volo-aero-badge-pill.is-on-dark {
	background: rgba(210, 35, 42, 0.19);
}
.volo-aero-badge-pill .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--volo-red);
	flex-shrink: 0;
}

/* Dark hero with background photo + overlay (About page opener) */
.volo-aero-hero-dark {
	position: relative;
	padding: 100px 80px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--volo-white);
}
.volo-aero-hero-dark .bg-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.volo-aero-hero-dark .overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 25, 0.88);
	z-index: 0;
}
.volo-aero-hero-dark .hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.volo-aero-hero-dark h1 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 48px;
	letter-spacing: -1px;
	line-height: 1.15;
	max-width: 760px;
	margin: 0;
	color: var(--volo-white);
}
.volo-aero-hero-dark .lede {
	font-family: var(--volo-font-body);
	font-size: 18px;
	line-height: 1.6;
	max-width: 640px;
	color: var(--volo-slate-light);
	margin: 0;
}
.volo-aero-hero-dark .hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
@media (max-width: 768px) {
	.volo-aero-hero-dark {
		padding: 64px 20px;
	}
	.volo-aero-hero-dark h1 {
		font-size: 32px;
	}
}

/* Two-column intro row (badge+title / body copy) used by "Our Foundations" */
.volo-aero-split-row {
	display: flex;
	gap: 64px;
	align-items: flex-start;
	width: 100%;
}
.volo-aero-split-row > div {
	flex: 1 0 0;
	min-width: 0;
}
.volo-aero-split-row .volo-aero-badge-pill {
	margin-bottom: 24px;
}
.volo-aero-split-row h2 {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 32px;
	letter-spacing: -0.5px;
	color: var(--volo-navy);
	margin: 0;
	text-wrap: balance;
}
.volo-aero-split-row p {
	font-family: var(--volo-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0 0 20px;
}
.volo-aero-split-row p:last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.volo-aero-split-row {
		flex-direction: column;
		gap: 32px;
	}
}

/* Image + text two-column row (e.g. "Why Volo Aero" trust section) --
   like .volo-aero-split-row but vertically centered, for pairing a photo
   with copy rather than two blocks of text. */
.volo-aero-media-row {
	display: flex;
	gap: 80px;
	align-items: center;
	width: 100%;
}
.volo-aero-media-row > * {
	flex: 1 0 0;
	min-width: 0;
}
@media (max-width: 1024px) {
	.volo-aero-media-row {
		gap: 40px;
	}
}
@media (max-width: 768px) {
	.volo-aero-media-row {
		flex-direction: column;
		gap: 32px;
	}
	/* Direct-child-only selector -- .volo-aero-media-row img (a plain
	   descendant selector) also matched the 12px checkmark icons nested
	   several levels deep inside the checklist on this row, and its
	   !important stretched them to 280px tall (a visible red smear behind
	   the checklist on mobile). Scoping to a direct <img> child of one of
	   the row's two immediate columns targets only the actual photo. */
	.volo-aero-media-row > div > img {
		height: 280px !important;
	}
}

/* Shared large section heading used by several About-page sections that
   don't go through volo_aero_render_section_header() (each needed its own
   badge+heading pairing inline rather than the shared shortcode). Mirrors
   .volo-aero-section-header h2's mobile step-down so these don't stay
   full-size on small screens. */
.volo-aero-heading-lg {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 36px;
	letter-spacing: -1px;
	color: var(--volo-navy);
	text-wrap: balance;
}
@media (max-width: 768px) {
	.volo-aero-heading-lg {
		font-size: 26px;
	}
}

/* Pull quote block */
.volo-aero-pull-quote {
	background: var(--volo-bg-light-2);
	border-left: 4px solid var(--volo-red);
	border-radius: var(--volo-radius);
	padding: 32px;
	margin-top: 40px;
}
.volo-aero-pull-quote p.quote {
	font-family: var(--volo-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: var(--volo-navy);
	margin: 0 0 12px;
}
.volo-aero-pull-quote p.attribution {
	font-family: var(--volo-font-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--volo-red);
	margin: 0;
}

/* Numbered icon cards (2x2) -- "What Our Customers Gain" */
.volo-aero-numbered-card {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.volo-aero-numbered-card .card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.volo-aero-numbered-card .index {
	font-family: var(--volo-font-mono);
	font-weight: 700;
	font-size: 18px;
	color: var(--volo-red);
}
.volo-aero-numbered-card img.icon {
	width: 20px;
	height: 20px;
}
.volo-aero-numbered-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--volo-navy);
	margin: 0 0 10px;
}
.volo-aero-numbered-card p {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--volo-slate);
	margin: 0;
}

/* Checklist rows (icon-in-circle + title/description) -- "Why Customers
   Trust" */
.volo-aero-checklist {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.volo-aero-checklist .row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.volo-aero-checklist .check-wrap {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: rgba(210, 35, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.volo-aero-checklist .check-wrap img {
	width: 12px;
	height: 12px;
}
.volo-aero-checklist h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--volo-navy);
	margin: 0 0 4px;
}
.volo-aero-checklist p {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--volo-slate);
	margin: 0;
}

/* Purpose / Mission / Vision row -- one dark card + two light cards */
.volo-aero-pmv-row {
	display: flex;
	gap: 32px;
	align-items: stretch;
	width: 100%;
}
.volo-aero-pmv-card {
	flex: 1 0 0;
	min-width: 0;
	border-radius: var(--volo-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.volo-aero-pmv-card.is-dark {
	background: var(--volo-navy-deep);
}
.volo-aero-pmv-card:not(.is-dark) {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
}
.volo-aero-pmv-card .card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.volo-aero-pmv-card .eyebrow {
	font-family: var(--volo-font-mono);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--volo-red);
}
/* --volo-red on this card's own --volo-navy-deep background only clears
   ~3.66:1 (an accessibility audit flag) -- see --volo-red-on-dark's
   definition in style.css. */
.volo-aero-pmv-card.is-dark .eyebrow {
	color: var(--volo-red-on-dark);
}
.volo-aero-pmv-card img.icon {
	width: 24px;
	height: 24px;
}
.volo-aero-pmv-card h3 {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 12px;
}
.volo-aero-pmv-card.is-dark h3 {
	color: var(--volo-white);
}
.volo-aero-pmv-card:not(.is-dark) h3 {
	color: var(--volo-navy);
}
.volo-aero-pmv-card p.body {
	font-family: var(--volo-font-body);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}
.volo-aero-pmv-card.is-dark p.body {
	color: var(--volo-slate-light);
}
.volo-aero-pmv-card:not(.is-dark) p.body {
	color: var(--volo-slate);
}
@media (max-width: 1024px) {
	.volo-aero-pmv-row {
		flex-direction: column;
	}
}

/* Values bar -- label block + inline tick list */
.volo-aero-values-bar {
	box-sizing: border-box;
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	width: 100%;
}
.volo-aero-values-bar .eyebrow {
	font-family: var(--volo-font-mono);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--volo-red);
	margin: 0 0 6px;
}
.volo-aero-values-bar .heading {
	font-family: var(--volo-font-heading);
	font-weight: 800;
	font-size: 18px;
	color: var(--volo-navy);
	margin: 0;
}
.volo-aero-values-bar .values-list {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.volo-aero-values-bar .value-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.volo-aero-values-bar .value-item .tick {
	width: 2px;
	height: 16px;
	background: var(--volo-red);
	flex-shrink: 0;
}
.volo-aero-values-bar .value-item span {
	font-family: var(--volo-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--volo-navy);
	white-space: nowrap;
}

/* Static facility image cards (replaces the carousel with a fixed 3-card
   row via the existing .volo-aero-grid.volo-aero-grid-3, matching the
   redesign's simpler layout) */
.volo-aero-facility-card {
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	overflow: hidden;
}
.volo-aero-facility-card img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}
.volo-aero-facility-card .label {
	padding: 20px;
}
.volo-aero-facility-card .label .title {
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--volo-navy);
	margin: 0 0 4px;
}
.volo-aero-facility-card .label .location {
	font-family: var(--volo-font-mono);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--volo-slate);
	margin: 0;
}

/* ---------- Platform page FAQ ---------- */

.volo-aero-platform-faq {
	max-width: 880px;
	margin: 0 auto;
	padding: 64px 0;
}
.volo-aero-platform-faq .volo-aero-section-header {
	margin-bottom: 24px;
}
@media (max-width: 768px) {
	.volo-aero-platform-faq {
		padding: 40px 0;
	}
}

/* ---------- Pre-launch review fixes ---------- */

/* The stats card's 320px minimum (plus its own padding) is wider than a
   phone's content column, so it ran off the right-hand edge of the hero
   once the hero stacks. */
@media (max-width: 1024px) {
	.volo-aero-platform-hero .volo-aero-stats-card {
		min-width: 0;
		box-sizing: border-box;
	}
}

/* Section and banner headings on the template-built pages (platform
   detail, content-type archives) sit outside a .volo-aero-ds wrapper, so
   they fell back to the parent theme's body font instead of the brand
   heading font every other page uses. */
.volo-aero-section-header h2,
.volo-aero-rfq-banner h2 {
	font-family: var(--volo-font-heading);
}
.volo-aero-section-header h1,
.volo-aero-stats-card h3,
.volo-aero-spec-card h3 {
	font-family: var(--volo-font-heading);
}

/* The Capabilities header row's phone padding was added on top of its full
   column width, pushing its right edge (and the button's) 40px off-screen. */
@media (max-width: 768px) {
	.volo-aero-directory-header-row {
		box-sizing: border-box;
		max-width: 100%;
	}
}

/* Brand heading font on the parent theme's page title bar and on platform
   card names (homepage grid and Capabilities directory), which were still
   in the body font. */
.page-title h1,
.page-title .entry-title,
.volo-aero-platform-card h3,
.volo-aero-card-identity h3 {
	font-family: var(--volo-font-heading);
}

/* ---------- Post-review fixes (Nov 2026) ---------- */

/* Certifications "Quality Policy" block: the stat row reuses the full-width
   stats-bar class, so it was pulled out to the viewport edge and overran the
   card's left side. Keep it inside the card. */
.volo-aero-quality-text .volo-aero-stats-bar {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}
.volo-aero-quality-text .volo-aero-stat {
	align-items: flex-start;
	text-align: left;
}
@media (max-width: 768px) {
	.volo-aero-quality-commitment {
		padding: 28px 20px;
	}
	.volo-aero-quality-text .volo-aero-stats-bar {
		gap: 32px !important;
	}
}

/* Platform directory: title row with the CTA on the right, and the search /
   category filters sitting under the title instead of above it. */
.volo-aero-directory-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.volo-aero-directory-head .volo-aero-btn {
	flex-shrink: 0;
}
.volo-aero-table-section .volo-aero-filter-bar {
	width: auto;
	margin: 0 0 24px;
	padding: 0;
	background: transparent;
	border-bottom: 0;
}
@media (max-width: 768px) {
	.volo-aero-table-section .volo-aero-filter-bar {
		padding: 0;
	}
	.volo-aero-directory-head {
		align-items: flex-start;
	}
}

/* Pagination (News and the Events / Company News / New Capability lists). */
.volo-aero-pagination {
	margin: 56px 0 72px;
}
.volo-aero-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.volo-aero-pagination li {
	margin: 0;
	padding: 0;
}
.volo-aero-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var(--volo-navy);
	background: var(--volo-white);
	border: 1px solid var(--volo-border);
	border-radius: var(--volo-radius);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.volo-aero-pagination a.page-numbers:hover,
.volo-aero-pagination a.page-numbers:focus-visible {
	border-color: var(--volo-red);
	color: var(--volo-red);
}
.volo-aero-pagination .page-numbers.current {
	background: var(--volo-red);
	border-color: var(--volo-red);
	color: var(--volo-white);
}
.volo-aero-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	background: transparent;
	border-color: transparent;
	color: var(--volo-slate);
}
.volo-aero-pagination .page-numbers.prev,
.volo-aero-pagination .page-numbers.next {
	padding: 0 18px;
}
@media (max-width: 480px) {
	.volo-aero-pagination .page-numbers {
		min-width: 40px;
		min-height: 40px;
		padding: 0 10px;
	}
	.volo-aero-pagination .page-numbers.prev,
	.volo-aero-pagination .page-numbers.next {
		padding: 0 12px;
	}
}

/* The7 gives every list inside .content a disc bullet, which beat the plain
   list-style:none above and put a dot beside each pagination button. */
nav.volo-aero-pagination ul,
nav.volo-aero-pagination ul li {
	list-style: none !important;
	list-style-type: none !important;
	background-image: none !important;
	display: block;
}
nav.volo-aero-pagination ul {
	display: flex;
}
nav.volo-aero-pagination ul li::before,
nav.volo-aero-pagination ul li::after {
	content: none !important;
}
nav.volo-aero-pagination ul li::marker {
	content: "";
	font-size: 0;
}