/* =============================================================================
   Nabtesco Aerospace  -  Global Stylesheet (NewDesign_56  -  Browse all button right-aligned with heading)
   =============================================================================
   TABLE OF CONTENTS
   0) Reset & Base
   1) Layout Container
   2) Header / Navigation (scoped top-level + dropdown + mobile)
   3) Hero / Banner (shared + home variant)
   4) Typography & Spacing
   5) Lists (scoped to content)
   6) Footer
   7) Department List
   8) About / History  -  At-a-Glance & Accordion
   9) Cards (News / Events / Programs)
   10) News & Events  -  Toolbar, Filters, Year Chips
   11) Careers  -  Job Layouts (Compact only)
   12) Timeline Mini-Graphic
   13) Contact Page Layout
   14) Home Page Enhancements (features, certs, band, logos)
   15) Media Gallery
   16) Leadership
   17) Responsive
============================================================================= */

/* =============================================================================
   0) Reset & Base
============================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
	line-height: 1.6;
	background: #fff;
}

/* Links */
a {
	color: #0058a3;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, 0.2);
	border-radius: 4px;
}

/* Utilities */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Skip to main content (keyboard / screen reader accessibility) */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 99999;
	background: #003366;
	color: #fff;
	padding: .6rem 1.2rem;
	border-radius: 0 0 8px 8px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: top .15s ease;
}

.skip-link:focus {
	top: 0;
	outline: 3px solid #00A2EE;
	outline-offset: 2px;
}

/* Breadcrumb navigation */
.breadcrumb {
	background: #f4f7fb;
	border-bottom: 1px solid #e0e8f0;
}

.bc-list {
	max-width: 1100px;
	margin: 0 auto;
	padding: .5rem 1rem;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.bc-item {
	display: flex;
	align-items: center;
	font-size: .8rem;
	color: #6a8099;
}

.bc-item + .bc-item::before {
	content: "›";
	margin: 0 .45rem;
	color: #aabccc;
	font-size: .9rem;
	line-height: 1;
}

.bc-item a {
	color: #0058a3;
	text-decoration: none;
}

.bc-item a:hover {
	text-decoration: underline;
}

.bc-item.bc-current {
	color: #003366;
	font-weight: 500;
}

.section-gap {
	margin-top: 1rem;
}

.section-gap-lg {
	margin-top: 1.5rem;
}

/* =============================================================================
   1) Layout Container
============================================================================= */
.container {
	max-width: 1100px;
	margin: 2rem auto;
	padding: 0 1rem;
}

/* =============================================================================
   2) Header / Navigation (scoped top-level + dropdown + mobile)
============================================================================= */
.header {
	background-color: #0d2238;
	color: #fff;
}

.navbar {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar .logo img {
	height: auto;
	max-height: 52px;
	max-width: 360px;
	width: auto;
	display: block;
}

/* --- Top-level menu (FIRST LEVEL ONLY) --- */
.nav-menu>ul {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}

.nav-menu>ul>li {
	margin: 0;
	white-space: nowrap;
}

.nav-menu>ul>li>a {
	color: #fff;
	font-weight: 600;
	position: relative;
	padding: 0.22rem 0.55rem;
	border-radius: 8px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.nav-menu>ul>li>a::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -6px;
	height: 3px;
	background: #00A2EE;
	border-radius: 3px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .22s ease;
}

.nav-menu>ul>li>a:hover::after {
	transform: scaleX(1);
}

.nav-menu>ul>li>a[aria-current="page"] {
	background: linear-gradient(90deg, #003366 0%, #0058A3 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset;
}

.nav-menu>ul>li>a[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav-menu>ul>li>a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .28);
}

/* --- Dropdowns --- */
.dropdown {
	position: relative;
}

.dropdown>.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 240px;
	z-index: 1000;
	list-style: none;
	margin: .35rem 0 0;
	padding: .4rem 0;
	background: #0a2a4a;
	border: 1px solid #002b55;
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

/* Ensure submenus never inherit flex styling */
.nav-menu ul ul {
	display: block;
	gap: 0;
}

.dropdown-menu li {
	margin: 0;
}

.dropdown-menu a {
	display: block;
	padding: .55rem 1rem;
	color: #fff;
	font-weight: 500;
	border-radius: 0;
	text-decoration: none;
	background: transparent;
}

.dropdown-menu a:hover {
	background: #004b8b;
}

.dropdown-menu a::after {
	content: none !important;
}

/* remove underline rail */
.dropdown:hover>.dropdown-menu {
	display: block;
}

/* --- Mobile toggle --- */
.menu-toggle {
	display: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	padding: .35rem .55rem;
	font-size: 1.1rem;
	line-height: 1;
}

/* --- Light header variant (white background / dark-blue text) --- */
.header--light {
	background: #ffffff;
	color: #003366;
	border-bottom: 2px solid #d0dcea;
	transition: background-color .4s ease, color .4s ease;
	box-shadow: 0 2px 8px rgba(0, 51, 102, .08);
}

/* Top-level links */
.header--light .nav-menu>ul>li>a {
	color: #003366;
	font-weight: 700;
}

.header--light .nav-menu>ul>li>a:hover {
	color: #0058A3;
	background: #eef6ff;
}

/* Underline accent */
.header--light .nav-menu>ul>li>a::after {
	background: #0058A3;
}

/* Active / current page pill */
.header--light .nav-menu>ul>li>a[aria-current="page"] {
	background: #e0eef8;
	color: #003366;
	box-shadow: 0 0 0 1px rgba(0, 88, 163, .25) inset;
	font-weight: 700;
}

/* Underline indicator on active page link */
.header--light .nav-menu>ul>li>a[aria-current="page"]::after {
	transform: scaleX(1);
	background: #003366;
	height: 2px;
}

/* Parent dropdown highlighted when a child page is active */
.header--light .nav-menu>ul>li>a[aria-current="section"] {
	color: #003366;
	font-weight: 700;
}

.header--light .nav-menu>ul>li>a[aria-current="section"]::after {
	transform: scaleX(1);
	background: #0058a3;
	height: 2px;
}

/* Dropdown panel */
.header--light .dropdown>.dropdown-menu {
	background: #ffffff;
	border-color: #d0dcea;
	box-shadow: 0 8px 22px rgba(0, 51, 102, .12);
}

/* Dropdown links */
.header--light .dropdown-menu a {
	color: #003366;
	font-weight: 500;
}

.header--light .dropdown-menu a:hover {
	background: #eef6ff;
	color: #0058A3;
}

/* Mobile hamburger button */
.header--light .menu-toggle {
	color: #003366;
	border-color: rgba(0, 51, 102, .35);
}

.header--light .menu-toggle:hover {
	background: #eef6ff;
}

/* Mobile open nav panel */
.header--light .nav-menu.is-open {
	background: #ffffff;
	border-top: 1px solid #d0dcea;
}

.header--light .nav-menu.is-open > ul > li > a {
	color: #003366;
	border-bottom: 1px solid #e8eef5;
}

.header--light .nav-menu.is-open .dropdown-menu {
	background: #f4f8fd;
}

.header--light .nav-menu.is-open .dropdown-menu a {
	color: #003366;
}

/* --- Dark scheme polish (only for dark-bg headers, not light variant) --- */
@media (prefers-color-scheme: dark) {
	.header:not(.header--light) {
		background: #0b1a2e;
		color: #eaf2ff;
		border-bottom: 1px solid #002d5c;
	}

	.header:not(.header--light) .nav-menu>ul>li>a {
		color: #eaf2ff;
	}

	.header:not(.header--light) .nav-menu>ul>li>a:hover {
		color: #33bbff;
	}

	.header:not(.header--light) .nav-menu>ul>li>a::after {
		background: #33bbff;
	}

	.header:not(.header--light) .nav-menu>ul>li>a[aria-current="page"] {
		background: linear-gradient(90deg, #001f3f 0%, #004c99 100%);
		box-shadow: 0 0 0 1px rgba(0, 162, 238, .3) inset;
		color: #fff;
	}
}

/* =============================================================================
   3) Hero / Banner (shared + home variant)
============================================================================= */
/* Home variant only  -  inner pages use plain h2 headings */
.hero--home {
	position: relative;
	min-height: 38vh;
	display: grid;
	place-items: center;
	text-align: center;
	background: url("../images/hero-banner.jpg") no-repeat center center / cover;
}

.hero--home::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 20, 50, .52), rgba(0, 15, 40, .68));
}

.hero--home .hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	padding: 1.25rem 1rem;
}

.hero--home h1 {
	color: #fff;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.15;
	margin-bottom: .5rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.hero--home p.sub {
	color: #eaf2ff;
	max-width: 720px;
	margin: 0 auto 1.25rem;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.hero-cta {
	display: inline-flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* =============================================================================
   4) Typography & Spacing
============================================================================= */
h2 {
	margin-bottom: 1rem;
	color: #003366;
}

main p,
.container p {
	margin-bottom: 1rem;
}

main p:last-child,
.container p:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   5) Lists (scoped to content)
============================================================================= */
main ul,
.container ul {
	list-style: disc outside;
	margin: 1em 0 1em 1.5em;
	padding-left: 1.25em;
}

main ol,
.container ol {
	list-style: decimal outside;
	margin: 1em 0 1em 1.5em;
	padding-left: 1.25em;
}

main li,
.container li {
	margin-bottom: 0.4em;
}

/* =============================================================================
   6) Footer
============================================================================= */
.footer {
	background: #f5f5f5;
	color: #666;
	padding: 2rem 1rem;
}

.footer .footer-links {
	display: flex;
	flex-wrap: wrap;
}

.footer .footer-links>div {
	flex: 1 1 200px;
	margin-bottom: 1rem;
}

.footer .footer-links h4 {
	margin-bottom: 0.5rem;
	color: #003366;
}

.footer a {
	color: #333;
}

.footer li {
	margin: 0.3em 0;
}

/* Social icons row */
.footer-social {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e0e0e0;
	flex-wrap: wrap;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #555;
	text-decoration: none;
	transition: color .15s ease;
}

.social-link svg {
	width: 20px;
	height: 20px;
}

.social-link:hover {
	color: #0058a3;
	text-decoration: none;
}

.social-link--text {
	font-size: .82rem;
	color: #888;
	margin-left: auto;
}

.social-link--text:hover {
	color: #0058a3;
}

.social-link--logo {
	margin-left: auto;
}

.social-link--logo img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 480px) {
	.social-link--logo img {
		height: 22px;
	}
}

.footer-bottom {
	margin-top: .75rem;
	text-align: center;
	font-size: 0.9rem;
}

/* =============================================================================
   7) Department List
============================================================================= */
.department-list {
	margin-top: 1rem;
}

.department-item {
	margin-bottom: 1rem;
}

/* =============================================================================
   8) About / History  -  At-a-Glance & Accordion
============================================================================= */
.about-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 2rem;
	align-items: start;
}

.at-a-glance {
	background: #f9fbff;
	border: 1px solid #e3ecf7;
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.at-a-glance h3 {
	margin-bottom: .5rem;
	color: #003366;
}

.atag-kv {
	margin: .4rem 0;
}

.atag-kv strong {
	display: inline-block;
	min-width: 92px;
	color: #003366;
}

.key-badges {
	margin-top: .75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.key-badges .badge {
	border: 1px solid #cfe1f4;
	background: #fff;
	border-radius: 999px;
	padding: .25rem .6rem;
	font-size: .9rem;
}

.cta-block {
	margin-top: 1rem;
}

.cta-block a {
	display: inline-block;
	margin-right: .5rem;
}

/* Accordion */
.accordion details {
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: .85rem 1rem;
	background: #fff;
}

.accordion details+details {
	margin-top: .8rem;
}

.accordion summary {
	cursor: pointer;
	font-weight: 600;
	color: #003366;
}

.accordion summary::-webkit-details-marker {
	display: none;
}

.accordion summary::after {
	content: "▸";
	float: right;
	transform: translateY(1px);
	transition: transform .2s ease;
}

.accordion details[open] summary::after {
	transform: rotate(90deg) translateY(-1px);
}

.accordion .panel {
	margin-top: .7rem;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
	will-change: max-height, opacity, transform;
}

.accordion details[open] .panel {
	max-height: 800px;
	opacity: 1;
	transform: translateY(0);
}

.accordion ul {
	margin: .6rem 0 .6rem 1.25rem;
	padding-left: 1rem;
	list-style: disc;
}

.accordion li {
	margin-bottom: .35rem;
}

/* =============================================================================
   9) Cards (News / Events / Programs)
============================================================================= */
.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 2rem;
}

.card {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	padding: 1rem 1.1rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.card h4 {
	color: #003366;
	margin: .25rem 0 .35rem;
}

.card p {
	margin-bottom: .6rem;
}

.card .note {
	font-size: .95rem;
	color: #555;
}

.card-meta {
	display: flex;
	gap: .6rem;
	align-items: center;
	font-size: .92rem;
	color: #666;
}

.badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 999px;
	font-size: .8rem;
	border: 1px solid #cfe1f4;
	background: #f5f9ff;
	color: #003366;
}

.badge-event {
	background: #eef8f1;
	border-color: #cfe9d6;
	color: #1f6a35;
}

.badge-news {
	background: #f9f2ff;
	border-color: #e4d6ff;
	color: #5d34a3;
}

.card-actions a {
	display: inline-block;
	margin-right: .6rem;
	color: #0058a3;
	text-decoration: none;
}

.card-actions a:hover {
	text-decoration: underline;
	color: #003366;
}

.empty {
	border: 1px dashed #cfd8e3;
	border-radius: 12px;
	padding: 1.25rem;
	color: #57636f;
	background: #fafcff;
}

/* =============================================================================
   10) News & Events  -  Toolbar, Filters, Year Chips
============================================================================= */
.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: .5rem 0 1rem;
	flex-wrap: wrap;
}

.filters {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.filter-select,
.search-input {
	height: 38px;
	padding: .4rem .6rem;
	border: 1px solid #cfd8e3;
	border-radius: 8px;
	outline: none;
	font-size: .95rem;
}

.filter-select:focus,
.search-input:focus {
	border-color: #0058a3;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .15);
}

.button-primary {
	display: inline-block;
	padding: .55rem .9rem;
	border-radius: 10px;
	background: #0058a3;
	color: #fff;
	border: 1px solid #004b8b;
	font-weight: 600;
	text-decoration: none;
	transition: transform .04s ease, box-shadow .15s ease, background .2s ease;
}

.button-primary:hover {
	background: #003f79;
	text-decoration: none;
}

.button-primary:active {
	transform: translateY(1px);
}

.help {
	font-size: .95rem;
	color: #555;
}

.year-chips {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.chip {
	appearance: none;
	border: 1px solid #cfd8e3;
	background: #fff;
	color: #17324d;
	border-radius: 999px;
	padding: .35rem .75rem;
	font-size: .9rem;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .02s ease;
}

.chip:hover {
	background: #f5f9ff;
	border-color: #b8c8de;
}

.chip:active {
	transform: translateY(1px);
}

.chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .15);
	border-color: #0058a3;
}

.chip.active,
.chip[aria-pressed="true"] {
	background: #0058a3;
	color: #fff;
	border-color: #004b8b;
}

/* =============================================================================
   11) Careers  -  Job Layouts (Compact cards + new RLMS fields)
   Covers: compact-cards grid, job card anatomy, card-meta row,
           badge variants (type, req number), salary note, hover/focus states,
           apply action row, empty state, and responsive breakpoints.
============================================================================= */

/* ── Grid container ──────────────────────────────────────────────────────── */
.compact-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 2rem;
}

@media (max-width: 720px) {
	.compact-cards {
		grid-template-columns: 1fr;
	}
}

/* ── Card shell ──────────────────────────────────────────────────────────── */
.compact-cards .card {
	border: 1px solid #dce6f0;
	border-radius: 10px;
	background: #fff;
	padding: 1.1rem 1.3rem 1rem;
	box-shadow: 0 1px 3px rgba(0, 51, 102, .05);
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.compact-cards .card:hover {
	border-color: #0058a3;
	box-shadow: 0 4px 18px rgba(0, 88, 163, .10);
	transform: translateY(-1px);
}

/* ── Meta row (top of card: type badge · posted date · req number) ───────── */
.compact-cards .card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-bottom: .45rem;
	font-size: .82rem;
	color: #6a8099;
	line-height: 1.2;
}

.compact-cards .card-meta time {
	font-size: .8rem;
	color: #7a8fa6;
	white-space: nowrap;
}

/* ── Employment-type badge (Full-time / Part-time / Contract / Internship) ── */
.compact-cards .badge {
	display: inline-flex;
	align-items: center;
	padding: .18rem .52rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	/* default: Full-time blue tint */
	background: #eef4ff;
	border: 1px solid #c5d9f5;
	color: #1a4a8a;
}

/* Internship — green tint */
.compact-cards .badge[data-type="Internship"],
.compact-cards .badge--internship {
	background: #eef8f1;
	border-color: #b8dfc4;
	color: #1a5c31;
}

/* Contract — amber tint */
.compact-cards .badge[data-type="Contract"],
.compact-cards .badge--contract {
	background: #fff8ec;
	border-color: #f0d9a0;
	color: #7a4e00;
}

/* Part-time — slate tint */
.compact-cards .badge[data-type="Part-time"],
.compact-cards .badge--parttime {
	background: #f4f6fa;
	border-color: #cdd5e0;
	color: #3a4d63;
}

/* ── Requisition-number badge (REQ-YYYY-NNNN) ────────────────────────────── */
/*    Separate visual style from the type badge: outlined, monospace-ish      */
.compact-cards .badge--req {
	display: inline-flex;
	align-items: center;
	padding: .15rem .45rem;
	border-radius: 5px;
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .04em;
	white-space: nowrap;
	background: transparent;
	border: 1px solid #b0c4d8;
	color: #52697f;
	font-variant-numeric: tabular-nums;
	/* override the pill shape from .badge */
	border-radius: 4px;
}

/* ── Card title ──────────────────────────────────────────────────────────── */
.compact-cards .card h4 {
	font-size: 1.02rem;
	font-weight: 700;
	color: #003366;
	margin: 0 0 .5rem;
	line-height: 1.35;
}

/* ── Detail lines (Location, Department, Salary) ─────────────────────────── */
.compact-cards .card p {
	font-size: .88rem;
	margin-bottom: .35rem;
	color: #333;
	line-height: 1.5;
}

.compact-cards .card .note {
	font-size: .88rem;
	color: #4a5c6e;
}

.compact-cards .card .note strong {
	color: #1d3252;
	font-weight: 600;
}

/* Salary range line — accent colour, slightly bolder */
.compact-cards .card .note--salary {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .88rem;
	font-weight: 600;
	color: #0b4d8a;
	margin-bottom: .35rem;
}

/* Dollar-sign icon prefix for salary (inserted via ::before) */
.compact-cards .card .note--salary::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: #0058a3;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	flex-shrink: 0;
}

/* ── Description paragraph ───────────────────────────────────────────────── */
.compact-cards .card > p:not(.note):not(.card-actions) {
	font-size: .88rem;
	color: #405060;
	line-height: 1.6;
	margin-bottom: .55rem;
}

/* ── Responsibility / qualification lists ────────────────────────────────── */
.compact-cards .card ul {
	margin: .1rem 0 .55rem 1.1rem;
	padding: 0;
}

.compact-cards .card ul li {
	font-size: .87rem;
	color: #405060;
	line-height: 1.55;
	margin-bottom: .2rem;
}

/* ── Apply action row ────────────────────────────────────────────────────── */
.compact-cards .card-actions {
	margin-top: auto;          /* push to bottom of flex column */
	padding-top: .65rem;
	border-top: 1px solid #edf2f8;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.compact-cards .card-actions a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .84rem;
	font-weight: 600;
	color: #0058a3;
	text-decoration: none;
	padding: .3rem .7rem;
	border-radius: 6px;
	border: 1px solid #c5d9f5;
	background: #f5f9ff;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.compact-cards .card-actions a:hover {
	background: #e0eeff;
	border-color: #0058a3;
	color: #003366;
	text-decoration: none;
}

.compact-cards .card-actions a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .2);
}

/* ── Empty / no-results state ────────────────────────────────────────────── */
.compact-cards ~ .empty,
#job-cards .empty {
	border: 1px dashed #c5d5e8;
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	text-align: center;
	color: #57636f;
	background: #fafcff;
	font-size: .92rem;
	grid-column: 1 / -1;      /* span full grid width */
}

/* ── Responsive: single column below 720px ───────────────────────────────── */
@media (max-width: 720px) {
	.compact-cards .card {
		padding: .9rem 1rem;
	}

	.compact-cards .card h4 {
		font-size: .97rem;
	}

	.compact-cards .card-actions {
		flex-direction: column;
	}

	.compact-cards .card-actions a {
		justify-content: center;
	}
}

/* =============================================================================
   12) Timeline Mini-Graphic
============================================================================= */
.timeline {
	position: relative;
	margin: 2rem 0;
	padding-left: 2rem;
	border-left: 3px solid #0058a3;
}

.timeline::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(to bottom, #0058a3, #00a2ee);
	border-radius: 2px;
}

.timeline-item {
	position: relative;
	margin-bottom: 1.5rem;
	padding-left: 1rem;
}

.timeline-item::before {
	content: "";
	position: absolute;
	left: -.85rem;
	top: .4rem;
	width: 12px;
	height: 12px;
	background: #fff;
	border: 3px solid #0058a3;
	border-radius: 50%;
}

.timeline-item h4 {
	margin: 0;
	color: #003366;
}

.timeline-item time {
	font-weight: 600;
	color: #0058a3;
}

.timeline-item p {
	margin: .25rem 0 .5rem;
	color: #444;
	font-size: .95rem;
}

/* =============================================================================
   13) Contact Page Layout
============================================================================= */

/* ── Contact Form ─────────────────────────────────────────────────────────── */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.form-field label {
	font-size: .85rem;
	font-weight: 600;
	color: #003366;
}

.form-field label .required {
	color: #c0392b;
	margin-left: 2px;
}

.form-field input,
.form-field select,
.form-field textarea {
	font-family: inherit;
	font-size: .95rem;
	color: #333;
	background: #fff;
	border: 1px solid #cfd8e3;
	border-radius: 8px;
	padding: .55rem .75rem;
	transition: border-color .15s ease, box-shadow .15s ease;
	width: 100%;
	box-sizing: border-box;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: #0058a3;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .12);
}

.form-field textarea {
	resize: vertical;
	min-height: 130px;
}

.form-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230058a3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	padding-right: 2.2rem;
}

/* Honeypot  -  hidden from real users */
.form-field--honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.form-submit {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: .25rem;
}

.form-note {
	font-size: .8rem;
	color: #666;
}

@media (max-width: 600px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 2rem;
	align-items: start;
}

.info-card {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	padding: 1rem 1.1rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
	margin-bottom: 1rem;
}

.info-card h3 {
	color: #003366;
	margin-bottom: .5rem;
}

.map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	background: #f5f5f5;
	margin-top: .5rem;
}

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

.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .75rem 0 .25rem;
}

.button-outline {
	display: inline-block;
	padding: .5rem .8rem;
	border-radius: 10px;
	border: 1px solid #cfd8e3;
	background: #fff;
	color: #0058a3;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .04s ease;
}

.button-outline:hover {
	background: #f5f9ff;
	text-decoration: none;
	border-color: #b8c8de;
}

.button-outline:active {
	transform: translateY(1px);
}

.muted {
	color: #57636f;
	font-size: .95rem;
}

/* Stacked CTA group: Supplier Portal on top, Request a Quote below */
li.nav-cta-group {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-left: .4rem;
}

/* Shared base for both CTA buttons */
.nav-supplier-btn,
.nav-quote-btn {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	padding: .3rem .75rem;
	border-radius: 7px;
	font-weight: 700;
	font-size: .82rem;
	text-decoration: none !important;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: background .18s ease, box-shadow .18s ease, transform .04s ease;
	line-height: 1.3;
}

.nav-supplier-btn svg,
.nav-quote-btn svg {
	flex-shrink: 0;
}

/* Supplier Portal — blue outline style */
.nav-supplier-btn {
	background: #e8f4fd;
	color: #003f79 !important;
	border: 1.5px solid #0058a3;
}

.nav-supplier-btn:hover {
	background: #0058a3;
	color: #fff !important;
	box-shadow: 0 2px 7px rgba(0, 88, 163, .28);
	text-decoration: none !important;
}

/* Request a Quote — green/teal accent style */
.nav-quote-btn {
	background: #e6f7f0;
	color: #1a6640 !important;
	border: 1.5px solid #2a9055;
}

.nav-quote-btn:hover {
	background: #2a9055;
	color: #fff !important;
	box-shadow: 0 2px 7px rgba(42, 144, 85, .28);
	text-decoration: none !important;
}

.nav-supplier-btn:active,
.nav-quote-btn:active {
	transform: translateY(1px);
}

/* Dark header variants */
.header:not(.header--light) .nav-supplier-btn {
	background: rgba(255,255,255,.1);
	color: #fff !important;
	border-color: rgba(255,255,255,.4);
}

.header:not(.header--light) .nav-supplier-btn:hover {
	background: rgba(255,255,255,.22);
	color: #fff !important;
}

.header:not(.header--light) .nav-quote-btn {
	background: rgba(255,255,255,.1);
	color: #fff !important;
	border-color: rgba(255,255,255,.4);
}

.header:not(.header--light) .nav-quote-btn:hover {
	background: rgba(255,255,255,.22);
	color: #fff !important;
}

/* Suppress underline animation on both CTA buttons */
li.nav-cta-group > a::after,
li.nav-cta-group .nav-supplier-btn::after,
li.nav-cta-group .nav-quote-btn::after {
	display: none !important;
}

/* Override header--light nav hover rules that would clobber the button colors */
.header--light .nav-menu > ul > li.nav-cta-group > a.nav-supplier-btn {
	color: #003f79 !important;
	background: #e8f4fd !important;
}

.header--light .nav-menu > ul > li.nav-cta-group > a.nav-supplier-btn:hover {
	background: #0058a3 !important;
	color: #fff !important;
	box-shadow: 0 2px 7px rgba(0, 88, 163, .28);
}

.header--light .nav-menu > ul > li.nav-cta-group > a.nav-quote-btn {
	color: #1a6640 !important;
	background: #e6f7f0 !important;
}

.header--light .nav-menu > ul > li.nav-cta-group > a.nav-quote-btn:hover {
	background: #2a9055 !important;
	color: #fff !important;
	box-shadow: 0 2px 7px rgba(42, 144, 85, .28);
}

/* =============================================================================
   14) Home Page Enhancements (features, certs, band, logos)
============================================================================= */
.stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 2rem;
}

.stat {
	background: #f9fbff;
	border: 1px solid #e3ecf7;
	border-radius: 12px;
	padding: .9rem 1rem;
	text-align: center;
}

/* Clickable stat tile (cert download variant) */
a.stat-link {
	display: block;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

a.stat-link:hover {
	border-color: #0058a3;
	background: #eef5ff;
	transform: translateY(-2px);
	text-decoration: none;
}

a.stat-link:hover .kpi {
	color: #0058a3;
}

.stat .kpi {
	color: #003366;
	font-weight: 800;
	font-size: 1.3rem;
}

.stat .label {
	color: #405770;
	font-size: .95rem;
}

.features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1rem auto 2rem;
	text-align: center;
	max-width: 800px;
}

.feature {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	padding: 1.1rem 1.2rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.feature h3 {
	color: #003366;
	margin-bottom: .4rem;
}

.feature p {
	margin-bottom: .6rem;
}

.feature .actions {
	margin-top: .3rem;
}

.feature .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .5rem;
	height: 64px;
}

.feature .icon svg {
	width: 56px;
	height: 56px;
	color: #0058A3;
	transition: transform .2s ease, filter .2s ease, color .2s ease;
}

.feature:hover .icon svg {
	transform: translateY(-2px) scale(1.04);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
}

.feature:nth-child(1) .icon svg {
	color: #0058A3;
}

.feature:nth-child(2) .icon svg {
	color: #00A2EE;
}

.feature:nth-child(3) .icon svg {
	color: #003366;
}

.certs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .75rem 0 1.5rem;
}

.cert-badge {
	border: 1px solid #cfe1f4;
	background: #fff;
	color: #003366;
	border-radius: 999px;
	padding: .35rem .7rem;
	font-size: .9rem;
	text-decoration: none;
	display: inline-block;
}

a.cert-badge {
	transition: background .15s ease, border-color .15s ease;
}

a.cert-badge:hover {
	background: #e8f2fb;
	border-color: #0058a3;
	text-decoration: none;
}

.band {
	background: linear-gradient(90deg, #003366 0%, #0058a3 100%);
	border-radius: 12px;
	color: #fff;
	padding: 1rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin: 1.5rem 0 2rem;
	text-align: center;
}

.band p {
	margin: 0;
	max-width: 700px;
}

.band .band-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* =============================================================================
   15) Media Gallery
============================================================================= */
.media-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: .5rem 0 1rem;
	flex-wrap: wrap;
}

.media-filters {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

.media-select,
.media-search {
	height: 38px;
	padding: .4rem .6rem;
	border: 1px solid #cfd8e3;
	border-radius: 8px;
	outline: none;
	font-size: .95rem;
}

.media-select:focus,
.media-search:focus {
	border-color: #0058a3;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .15);
}

.media-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0 2rem;
}

.media-item {
	position: relative;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.media-thumb {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	background: #f5f5f5;
}

.media-caption {
	padding: .65rem .8rem;
}

.media-caption h4 {
	margin: 0 0 .25rem;
	font-size: 1rem;
	color: #003366;
}

.media-caption p {
	margin: 0;
	font-size: .95rem;
	color: #444;
}

.media-chip {
	position: absolute;
	top: 8px;
	left: 8px;
	background: #0058a3;
	color: #fff;
	font-size: .75rem;
	padding: .2rem .5rem;
	border-radius: 999px;
	border: 1px solid #004b8b;
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 1000;
}

.lightbox.open {
	display: flex;
}

.lightbox-content {
	position: relative;
	max-width: min(1100px, 96vw);
	max-height: 90vh;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
}

.lightbox-media {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	background: #000;
}

.lightbox-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 60%, rgba(0, 0, 0, .85) 100%);
	color: #fff;
	padding: .7rem 1rem .9rem;
	font-size: .95rem;
}

.lightbox-title {
	font-weight: 700;
	margin-bottom: .2rem;
}

.lightbox-desc {
	opacity: .95;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .15);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.lightbox-close {
	top: 12px;
	right: 12px;
	transform: none;
}

.lightbox-prev {
	left: 12px;
}

.lightbox-next {
	right: 12px;
}

.lightbox button:hover {
	background: rgba(255, 255, 255, .25);
}

.lightbox button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 88, 163, .35);
}

.media-empty {
	border: 1px dashed #cfd8e3;
	border-radius: 12px;
	padding: 1.25rem;
	color: #57636f;
	background: #fafcff;
	text-align: center;
}

.wm-thumb {
	position: absolute;
	right: 8px;
	bottom: 8px;
	font-size: .72rem;
	padding: .15rem .45rem;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	pointer-events: none;
}

.wm-overlay {
	position: absolute;
	right: 12px;
	bottom: 12px;
	color: rgba(255, 255, 255, .8);
	font-weight: 700;
	letter-spacing: .03em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
	font-size: clamp(.8rem, 2vw, 1rem);
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	padding: .2rem .5rem;
	pointer-events: none;
}

/* =============================================================================
   16) Leadership
============================================================================= */
.leadership-message {
	max-width: 820px;
	margin: 2rem auto;
	font-size: 1.05rem;
	color: #333;
	line-height: 1.75;
}

.leadership-message p {
	margin-bottom: 1rem;
}

.vision-quote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid #0058a3;
	background: #f5f9ff;
	font-style: italic;
	color: #003366;
}

.signature {
	margin-top: 2rem;
	font-size: 1.05rem;
}

.values-section .cards {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.timeline .badge {
	margin-top: .25rem;
	display: inline-block;
}

.timeline+.muted {
	margin-top: .5rem;
}

/* =============================================================================
   Sticky AOG Bar  -  mobile only
============================================================================= */
#aog-bar {
	display: none; /* shown via media query below */
}

@media (max-width: 768px) {
	#aog-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		background: #c0392b;
		color: #fff;
		padding: .7rem 1rem;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
		gap: .5rem;
	}

	#aog-bar.hidden {
		display: none;
	}

	.aog-bar-link {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: #fff;
		flex: 1;
		gap: .1rem;
	}

	.aog-bar-link:hover {
		text-decoration: none;
		color: #ffe0de;
	}

	.aog-bar-label {
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		opacity: .85;
	}

	.aog-bar-number {
		font-size: 1.1rem;
		font-weight: 800;
		line-height: 1.1;
	}

	#aog-bar-close {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, .4);
		color: #fff;
		border-radius: 6px;
		width: 30px;
		height: 30px;
		font-size: 1.1rem;
		line-height: 1;
		cursor: pointer;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	#aog-bar-close:hover {
		background: rgba(255, 255, 255, .15);
	}

	/* Nudge cookie banner up when both are visible */
	#cookie-banner {
		bottom: 56px;
	}
}

/* =============================================================================
   Cookie Consent Banner
============================================================================= */
#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #0d2238;
	color: #eaf2ff;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
	font-size: .92rem;
}

#cookie-banner p {
	margin: 0;
	flex: 1;
	min-width: 200px;
}

#cookie-banner a {
	color: #7ec8f7;
}

#cookie-banner a:hover {
	color: #fff;
}

.cookie-actions {
	display: flex;
	gap: .6rem;
	flex-shrink: 0;
	align-items: center;
}

/* Tweak outline button for dark banner background */
#cookie-banner .button-outline {
	border-color: rgba(255, 255, 255, .4);
	color: #eaf2ff;
	background: transparent;
}

#cookie-banner .button-outline:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

@media (max-width: 600px) {
	#cookie-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================================
   17) Responsive
============================================================================= */
@media (max-width:1000px) {
	.media-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width:900px) {
	.menu-toggle {
		display: inline-block;
	}

	/* Scale logo down on tablet/mobile so it doesn't push the hamburger off screen */
	.navbar .logo img {
		max-height: 36px;
		max-width: 240px;
	}

	/* Collapse top menu until opened */
	.nav-menu>ul {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		margin-top: .75rem;
	}

	.nav-menu[data-open="true"]>ul {
		display: flex;
	}

	/* Mobile dropdowns become inline sections */
	.dropdown>.dropdown-menu {
		position: static;
		display: none;
		background: transparent;
		border: none;
		box-shadow: none;
		margin: .25rem 0 0;
		padding: 0;
	}

	.dropdown.open>.dropdown-menu {
		display: block;
	}

	.dropdown-menu a {
		padding-left: 1.25rem;
		border-radius: 6px;
	}

	/* Light header: keep dropdown links readable on white bg in mobile */
	.header--light .dropdown>.dropdown-menu {
		background: #f0f6fb;
		border-radius: 6px;
		padding: .25rem 0;
	}

	.header--light .dropdown-menu a {
		color: #003366;
	}

	.header--light .dropdown-menu a:hover {
		background: #ddeeff;
	}

	.cards {
		grid-template-columns: 1fr;
	}

	.stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.features {
		grid-template-columns: 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width:800px) {
	.band {
		flex-direction: column;
		text-align: center;
	}

	.band .band-actions {
		justify-content: center;
	}
}

@media (max-width:768px) {
	.hero {
		height: 200px;
	}
}

@media (max-width:700px) {
	.timeline {
		padding-left: 1.25rem;
		border-left: 2px solid #0058a3;
	}

	.timeline-item::before {
		left: -.7rem;
	}
}

@media (max-width:520px) {
	.stats {
		grid-template-columns: 1fr;
	}

	/* Smallest phones: tighten logo further */
	.navbar .logo img {
		max-height: 30px;
		max-width: 200px;
	}
}

/* Desktop tweaks for hero min-height */
@media (min-width:900px) {
	.hero--home {
		min-height: 40vh;
	}
}

@media (min-width:1200px) {
	.hero--home {
		min-height: 36vh;
	}
}

/* =============================================================================
   Print Stylesheet
============================================================================= */
@media print {
	/* Hide interactive / nav elements */
	.header,
	.menu-toggle,
	.nav-menu,
	#cookie-banner,
	#aog-bar,
	.skip-link,
	.hero,
	.hero--home,
	.band,
	.band-actions,
	.contact-actions .button-primary,
	.contact-actions .button-outline,
	.button-primary,
	.button-outline,
	.map-embed,
	.footer-links,
	.stats,
	.certs,
	.features .actions {
		display: none !important;
	}

	/* Page setup */
	body {
		font-family: Georgia, serif;
		font-size: 11pt;
		color: #000;
		background: #fff;
		margin: 0;
	}

	.container {
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	/* Show full URLs after links */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
	}

	/* But not for internal hash links or tel/mailto */
	a[href^="#"]::after,
	a[href^="tel:"]::after,
	a[href^="mailto:"]::after {
		content: "";
	}

	/* Keep phone numbers visible and clean */
	a[href^="tel:"] {
		color: #000;
		text-decoration: none;
	}

	/* Info cards print cleanly */
	.info-card {
		border: 1px solid #ccc;
		box-shadow: none;
		page-break-inside: avoid;
		margin-bottom: 1rem;
	}

	/* Contact grid stacks vertically for print */
	.contact-grid {
		grid-template-columns: 1fr;
	}

	/* Footer: only show the copyright line */
	.footer {
		border-top: 1px solid #ccc;
		padding-top: .5rem;
		margin-top: 1rem;
	}

	.footer-bottom p::after {
		content: "  -  nabtescoaero.com";
	}

	/* Avoid page breaks inside key sections */
	h2, h3 { page-break-after: avoid; }
	section, article { page-break-inside: avoid; }
}


/* =============================================================================
   Scroll-to-top button
============================================================================= */
.scroll-top-btn {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9998;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #003366;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	transition: background .15s ease, transform .15s ease, opacity .2s ease;
	opacity: 0;
}

.scroll-top-btn:not([hidden]) {
	opacity: 1;
}

.scroll-top-btn:hover {
	background: #0058a3;
	transform: translateY(-2px);
}

.scroll-top-btn svg {
	width: 18px;
	height: 18px;
}

/* Nudge up on mobile so it clears the AOG bar */
@media (max-width: 768px) {
	.scroll-top-btn {
		bottom: 5rem;
	}
}


/* =============================================================================
   Social value band (parent-company brand alignment)
============================================================================= */
.social-value-band {
	border-left: 4px solid #0058a3;
	background: #f0f6ff;
	border-radius: 0 8px 8px 0;
	padding: .85rem 1.1rem;
	margin: .75rem 0 1.25rem;
}

.social-value-band p {
	margin: 0;
	font-size: .97rem;
	color: #2c3e50;
	line-height: 1.65;
	font-style: italic;
}


/* =============================================================================
   Nabtesco Group band (about page)
============================================================================= */
.nabtesco-group-band {
	background: #0d2238;
	border-radius: 12px;
	padding: 2rem;
	color: #eaf2ff;
}

.ng-content {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: start;
}

.ng-text h3 {
	color: #fff;
	font-size: 1.15rem;
	margin-bottom: .75rem;
}

.ng-text p {
	color: #b8cfe8;
	font-size: .95rem;
	line-height: 1.65;
	margin-bottom: .75rem;
}

.ng-text a {
	color: #7ec8f7;
}

.ng-text a:hover {
	color: #fff;
}

.ng-links {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-top: .5rem;
	font-size: .9rem;
}

.ng-stats {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 180px;
}

.ng-stat {
	background: rgba(255,255,255,.07);
	border-radius: 8px;
	padding: .75rem 1rem;
	text-align: center;
}

.ng-kpi {
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: .2rem;
}

.ng-label {
	color: #8ab4d4;
	font-size: .78rem;
	line-height: 1.3;
}

@media (max-width: 700px) {
	.ng-content {
		grid-template-columns: 1fr;
	}
	.ng-stats {
		flex-direction: row;
		flex-wrap: wrap;
		min-width: unset;
	}
	.ng-stat {
		flex: 1 1 140px;
	}
}


/* =============================================================================
   Documentation category sections
============================================================================= */
.doc-category {
	border: 1px solid #e0eaf4;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	background: #fafcff;
}

.doc-cat-heading {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #003366;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #d0dcea;
}

.doc-cat-icon {
	color: #0058a3;
	font-size: .5rem;
	line-height: 1;
}


/* Center "What we do" heading to match card width */
[aria-label="Core capabilities"] > h2 {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}


/* =============================================================================
   Privacy / Cookie consent modal  (replaces slim banner)
============================================================================= */
#privacy-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

#privacy-overlay[hidden] {
	display: none;
}

#privacy-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 560px;
	width: 100%;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
	overflow: hidden;
}

#privacy-modal-header {
	background: #003366;
	color: #fff;
	padding: 1rem 1.4rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
}

#privacy-modal-body {
	padding: 1.25rem 1.4rem;
	font-size: .9rem;
	color: #2c3e50;
	line-height: 1.65;
}

#privacy-modal-body p {
	margin-bottom: .75rem;
}

#privacy-modal-body p:last-child {
	margin-bottom: 0;
}

#privacy-modal-body a {
	color: #0058a3;
}

#privacy-modal-actions {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: 1rem 1.4rem 1.4rem;
	border-top: 1px solid #e8eef5;
}

.priv-btn {
	width: 100%;
	padding: .75rem 1rem;
	border-radius: 8px;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .15s ease, color .15s ease;
	line-height: 1.3;
	text-align: center;
}

.priv-btn--primary {
	background: #003366;
	color: #fff;
}

.priv-btn--primary:hover {
	background: #0058a3;
}

.priv-btn--secondary {
	background: #f0f4f9;
	color: #003366;
	border: 1px solid #c8d8ea;
}

.priv-btn--secondary:hover {
	background: #e0ecf8;
	border-color: #0058a3;
}

@media (max-width: 480px) {
	#privacy-modal-header {
		font-size: .95rem;
	}

	#privacy-modal-body {
		font-size: .85rem;
	}

	.priv-btn {
		font-size: .82rem;
	}
}


/* =============================================================================
   Part Number Lookup — mro.html
============================================================================= */
.pn-lookup-section {
	background: #f4f8ff;
	border: 1px solid #d0dcea;
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
}

.pn-lookup-section h3 {
	margin-bottom: .35rem;
}

.pn-lookup-intro {
	font-size: .92rem;
	color: #405770;
	margin-bottom: 1.1rem;
}

/* Search bar */
.pn-search-bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: #fff;
	border: 1.5px solid #b8cfe8;
	border-radius: 8px;
	padding: .5rem .75rem;
	margin-bottom: .85rem;
	transition: border-color .15s ease;
}

.pn-search-bar:focus-within {
	border-color: #0058a3;
	box-shadow: 0 0 0 3px rgba(0,88,163,.12);
}

.pn-search-icon {
	width: 18px;
	height: 18px;
	color: #8a9bb0;
	flex-shrink: 0;
}

.pn-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: .95rem;
	color: #1a2a3a;
	background: transparent;
	min-width: 0;
}

.pn-input::placeholder {
	color: #aabccc;
}

.pn-clear {
	border: none;
	background: none;
	color: #8a9bb0;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .2rem;
	transition: color .15s;
}

.pn-clear:hover {
	color: #003366;
}

/* Filters */
.pn-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-bottom: .9rem;
}

.pn-filter {
	font-size: .8rem;
	font-weight: 500;
	padding: .3rem .85rem;
	border-radius: 20px;
	border: 1px solid #c8d8ea;
	background: #fff;
	color: #405770;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pn-filter:hover {
	border-color: #0058a3;
	color: #0058a3;
}

.pn-filter.active {
	background: #003366;
	border-color: #003366;
	color: #fff;
}

/* Status line */
.pn-status {
	font-size: .82rem;
	color: #6a8099;
	margin-bottom: .6rem;
	min-height: 1.2em;
}

/* Result cards */
.pn-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: .85rem;
}

.pn-card {
	background: #fff;
	border: 1px solid #d0dcea;
	border-radius: 10px;
	padding: 1rem 1.1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
	outline: none;
}

.pn-card:hover,
.pn-card:focus {
	border-color: #0058a3;
	box-shadow: 0 2px 10px rgba(0,88,163,.1);
}

.pn-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .4rem;
	flex-wrap: wrap;
}

.pn-number {
	font-family: monospace;
	font-size: .92rem;
	font-weight: 700;
	color: #003366;
	letter-spacing: .02em;
}

.pn-component-tag {
	font-size: .72rem;
	font-weight: 500;
	background: #e8f0fa;
	color: #1a4a8a;
	padding: .15rem .55rem;
	border-radius: 20px;
	white-space: nowrap;
}

.pn-desc {
	font-size: .9rem;
	color: #2c3e50;
	font-weight: 500;
	margin-bottom: .65rem;
}

.pn-meta {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin-bottom: .75rem;
}

.pn-meta-row {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .8rem;
}

.pn-label {
	color: #8a9bb0;
	font-weight: 500;
	min-width: 58px;
	padding-top: .1rem;
	flex-shrink: 0;
}

.pn-badge {
	display: inline-block;
	font-size: .72rem;
	background: #eef3fb;
	color: #2a4a72;
	border-radius: 4px;
	padding: .1rem .45rem;
	margin: .1rem .1rem 0 0;
	line-height: 1.5;
}

.pn-badge--service {
	background: #eaf3de;
	color: #3b6d11;
}

.pn-badge--approval {
	background: #faeeda;
	color: #854f0b;
}

.pn-quote-link {
	font-size: .8rem;
	color: #0058a3;
	text-decoration: none;
	font-weight: 500;
	display: inline-block;
	margin-top: .25rem;
}

.pn-quote-link:hover {
	text-decoration: underline;
}

/* No results state */
.pn-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 2rem 1rem;
	color: #6a8099;
	font-size: .9rem;
	line-height: 1.7;
}

/* Footer note */
.pn-footer-note {
	font-size: .78rem;
	color: #8a9bb0;
	margin-top: 1rem;
	padding-top: .75rem;
	border-top: 1px solid #d0dcea;
}

.pn-footer-note a {
	color: #0058a3;
}

@media (max-width: 600px) {
	.pn-lookup-section {
		padding: 1.1rem 1rem;
	}
	.pn-results {
		grid-template-columns: 1fr;
	}
}


/* =============================================================================
   FAQ accordion — mro.html and contact.html
============================================================================= */
.faq-section h3 {
	margin-bottom: .9rem;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.faq-item {
	border: 1px solid #d0dcea;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.faq-item[open] {
	border-color: #0058a3;
}

.faq-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.1rem;
	font-size: .95rem;
	font-weight: 600;
	color: #003366;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background .15s ease;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
	content: "+";
	font-size: 1.3rem;
	font-weight: 400;
	color: #0058a3;
	line-height: 1;
	flex-shrink: 0;
	transition: transform .2s ease;
}

.faq-item[open] .faq-q {
	background: #f0f6ff;
}

.faq-item[open] .faq-q::after {
	transform: rotate(45deg);
}

.faq-q:hover {
	background: #f4f8ff;
}

.faq-a {
	padding: .1rem 1.1rem .95rem;
	font-size: .9rem;
	color: #2c3e50;
	line-height: 1.7;
	border-top: 1px solid #e0eaf4;
}

.faq-a p {
	margin-bottom: .5rem;
}

.faq-a p:last-child {
	margin-bottom: 0;
}

.faq-a a {
	color: #0058a3;
}


/* =============================================================================
   Sticky quote CTA bar — mro.html
============================================================================= */
.mro-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	background: #003366;
	border-top: 2px solid #0058a3;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
	transform: translateY(100%);
	transition: transform .3s ease;
}

.mro-sticky-cta:not([hidden]) {
	transform: translateY(0);
}

.mro-sticky-cta[hidden] {
	display: block !important; /* override hidden so CSS transition works */
	transform: translateY(100%);
	pointer-events: none;
}

.mro-sticky-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: .75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.mro-sticky-msg {
	color: #fff;
	font-size: .9rem;
	line-height: 1.4;
	margin: 0;
}

.mro-sticky-msg strong {
	display: block;
	font-size: .95rem;
}

.mro-sticky-msg span {
	color: #a8c8e8;
	font-size: .82rem;
}

.mro-sticky-actions {
	display: flex;
	gap: .6rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.mro-sticky-btn {
	font-size: .85rem;
	font-weight: 600;
	padding: .55rem 1.1rem;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.mro-sticky-btn--primary {
	background: #fff;
	color: #003366;
}

.mro-sticky-btn--primary:hover {
	background: #e0eef8;
	text-decoration: none;
}

.mro-sticky-btn--secondary {
	background: transparent;
	color: #7ec8f7;
	border: 1px solid rgba(255,255,255,.3);
}

.mro-sticky-btn--secondary:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
	text-decoration: none;
}

/* Nudge up on mobile to clear the AOG bar */
@media (max-width: 768px) {
	.mro-sticky-inner {
		padding: .6rem 1rem;
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
	}

	.mro-sticky-msg span {
		display: none;
	}

	.mro-sticky-actions {
		width: 100%;
	}

	.mro-sticky-btn {
		flex: 1;
		text-align: center;
	}
}


/* Jobs load error warning — careers.html */
.jobs-load-error {
	border: 1px solid #f0c4c4;
	background: #fff8f8;
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	font-size: .92rem;
	color: #7a2020;
	line-height: 1.6;
}

.jobs-load-error p { margin-bottom: .35rem; }
.jobs-load-error p:last-child { margin-bottom: 0; }
.jobs-load-error a { color: #a32d2d; }