/* ==========================================================================
   ORTL GRP v2 — css/style.css
   Design system: Trust & Authority / Enterprise Gateway
   Mobile-first, vanilla CSS, no frameworks
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts preconnect
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand colours */
	--color-primary:      #0F172A;
	--color-primary-dk:   #020617;
	--color-secondary:    #334155;
	--color-accent:       #E8890C;
	--color-accent-dk:    #C97008;
	--color-cta:          #0369A1;
	--color-cta-dk:       #025585;

	/* Surfaces */
	--color-bg:           #FFFFFF;
	--color-bg-alt:       #F1F5F9;
	--color-bg-subtle:    #E8EDF3;
	--color-border:       #E2E8F0;
	--color-border-focus: #0369A1;

	/* Text */
	--color-text:         #020617;
	--color-text-muted:   #475569;
	--color-text-light:   #94A3B8;

	/* Typography */
	--font-heading: 'Lexend', system-ui, -apple-system, sans-serif;
	--font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;

	/* Layout */
	--size-container: 1200px;
	--size-gutter:    1.25rem;

	/* Radii */
	--radius-sm:  4px;
	--radius:     8px;
	--radius-lg:  12px;
	--radius-xl:  16px;

	/* Transitions */
	--transition:     200ms ease;
	--transition-lg:  300ms ease;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.06);

	/* Z-index scale */
	--z-base:    10;
	--z-nav:     100;
	--z-sticky:  200;
	--z-modal:   300;
	--z-toast:   400;
}

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

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a {
	color: var(--color-cta);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:focus-visible {
	color: var(--color-cta-dk);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Typography scale (fluid 375 → 1200 px)
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(1.875rem, 4.5vw, 3rem);   font-weight: 700; }
h2 { font-size: clamp(1.5rem,   3.5vw, 2.25rem); font-weight: 600; }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.625rem); }
h4 { font-size: clamp(1rem,     2vw,   1.25rem); }

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--size-container);
	margin-inline: auto;
	padding-inline: var(--size-gutter);
}

/* --------------------------------------------------------------------------
   Accessibility utilities
   -------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -4rem; left: 1rem;
	z-index: var(--z-toast);
	padding: 0.5rem 1rem;
	background: var(--color-cta);
	color: #fff;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.875rem;
	transition: top var(--transition);
	text-decoration: none;
}

.skip-link:focus-visible { top: 1rem; }

/* Focus ring — applied globally */
:focus-visible {
	outline: 2px solid var(--color-cta);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Header Wrapper + Top Contact Bar
   ========================================================================== */
.header-wrapper {
	position: relative;
	z-index: var(--z-sticky);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* Homepage: entire header wrapper overlays hero */
body.home .header-wrapper,
body.page .header-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
}
/* When scrolled: freeze header to top */
body.home .header-wrapper.scrolled,
body.page .header-wrapper.scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	box-shadow: var(--shadow-md);
}
body.home .top-contact-bar,
body.page .top-contact-bar {
	background: transparent;
	border-bottom-color: rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.8);
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
body.home .header-wrapper.scrolled .top-contact-bar,
body.page .header-wrapper.scrolled .top-contact-bar {
	background: var(--color-bg-alt, #F1F5F9);
	color: var(--color-secondary);
	border-bottom-color: var(--color-border);
}
body.home .header-wrapper.scrolled .top-contact-bar__item svg,
body.page .header-wrapper.scrolled .top-contact-bar__item svg {
	color: var(--color-accent);
}
body.home .header-wrapper.scrolled .top-contact-bar__item,
body.page .header-wrapper.scrolled .top-contact-bar__item {
	color: var(--color-secondary);
}
body.home .header-wrapper.scrolled .top-contact-bar__link,
body.page .header-wrapper.scrolled .top-contact-bar__link {
	color: var(--color-secondary);
}
body.home .header-wrapper.scrolled .top-contact-bar__link:hover,
body.page .header-wrapper.scrolled .top-contact-bar__link:hover {
	color: var(--color-accent);
}

.top-contact-bar {
	background: var(--color-primary-dk);
	color: rgba(255,255,255,0.75);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.top-contact-bar {
	display: none;
}
.top-contact-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.35rem;
	min-height: 2rem;
}
.top-contact-bar__left {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.top-contact-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: color 0.4s ease;
}
.top-contact-bar__item svg {
	color: var(--color-accent);
	flex-shrink: 0;
	transition: color 0.4s ease;
}
.top-contact-bar__right {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.top-contact-bar__link {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.4s ease;
}
.top-contact-bar__link:hover {
	color: var(--color-accent);
}
@media (max-width: 47.99em) {
	.top-contact-bar__right { display: none; }
	.top-contact-bar__left { gap: 0.75rem; }
	.top-contact-bar { font-size: 0.6875rem; }
}

#site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
/* Homepage: navbar is part of the floating header wrapper */
body.home #site-header,
body.page #site-header {
	position: relative;
	background-color: transparent;
	border-bottom: none;
	box-shadow: none;
}
body.home .header-wrapper.scrolled #site-header,
body.page .header-wrapper.scrolled #site-header {
	background-color: #fff;
	border-bottom-color: var(--color-border);
}
body.home .site-branding a,
body.page .site-branding a {
	color: #fff;
	transition: color 0.4s ease;
}
body.home .site-branding img,
body.page .site-branding img {
	filter: brightness(0) invert(1);
	transition: filter 0.4s ease;
}
body.home .header-wrapper.scrolled .site-branding a,
body.page .header-wrapper.scrolled .site-branding a {
	color: var(--color-primary);
}
body.home .header-wrapper.scrolled .site-branding img,
body.page .header-wrapper.scrolled .site-branding img {
	filter: none;
}
body.home #site-navigation a,
body.page #site-navigation a {
	color: rgba(255,255,255,0.85);
	transition: color 0.4s ease;
}
body.home #site-navigation a:hover,
body.home #site-navigation .current-menu-item > a,
body.page #site-navigation a:hover,
body.page #site-navigation .current-menu-item > a {
	color: #fff;
}
body.home .header-wrapper.scrolled #site-navigation a,
body.page .header-wrapper.scrolled #site-navigation a {
	color: var(--color-secondary);
}
body.home .header-wrapper.scrolled #site-navigation a:hover,
body.home .header-wrapper.scrolled #site-navigation .current-menu-item > a,
body.page .header-wrapper.scrolled #site-navigation a:hover,
body.page .header-wrapper.scrolled #site-navigation .current-menu-item > a {
	color: var(--color-accent);
}
body.home .btn--header-cta,
body.page .btn--header-cta {
	background: var(--color-accent);
	color: #fff;
	transition: background-color 0.4s ease, color 0.4s ease;
}
body.home .header-wrapper.scrolled .btn--header-cta,
body.page .header-wrapper.scrolled .btn--header-cta {
	background: var(--color-accent);
	color: #fff;
}
body.home .lang-switch,
body.page .lang-switch {
	color: rgba(255,255,255,0.7);
	transition: color 0.4s ease;
}
body.home .header-wrapper.scrolled .lang-switch,
body.page .header-wrapper.scrolled .lang-switch {
	color: var(--color-secondary);
}
body.home .nav-toggle .bar,
body.page .nav-toggle .bar {
	background: #fff;
	transition: background-color 0.4s ease;
}
body.home .nav-toggle:hover,
body.page .nav-toggle:hover {
	background: transparent;
}
body.home .header-wrapper.scrolled .nav-toggle .bar,
body.page .header-wrapper.scrolled .nav-toggle .bar {
	background: var(--color-primary);
}
body.home .header-wrapper.scrolled .nav-toggle:hover,
body.page .header-wrapper.scrolled .nav-toggle:hover {
	background: transparent;
}

#site-header.scrolled {
	box-shadow: var(--shadow-md);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.75rem;
}

/* Branding */
.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	letter-spacing: -0.02em;
	transition: opacity var(--transition);
	white-space: nowrap;
}

.site-branding a:hover { opacity: 0.8; text-decoration: none; }

.site-branding img {
	height: 3.6rem;
	width: auto;
	display: block;
	object-fit: contain;
}

/* Primary nav — mobile hidden */
#site-navigation ul {
	display: none;
	flex-direction: column;
	gap: 0;
	background: var(--color-bg);
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	padding: 0.5rem 0;
}

#site-navigation ul.is-open { display: flex; z-index: 100; }

/* Homepage mobile nav: dark background to match transparent header */
body.home #site-navigation ul,
body.page #site-navigation ul {
	background: var(--color-primary-dk);
	border-top-color: rgba(255,255,255,0.1);
}
body.home #site-navigation ul li a,
body.page #site-navigation ul li a {
	color: rgba(255,255,255,0.85);
}
body.home #site-navigation ul li.current-menu-item > a,
body.home #site-navigation ul li.current-menu-ancestor > a,
body.page #site-navigation ul li.current-menu-item > a,
body.page #site-navigation ul li.current-menu-ancestor > a {
	color: #fff;
}
body.home .header-wrapper.scrolled #site-navigation ul,
body.page .header-wrapper.scrolled #site-navigation ul {
	background: #fff;
	border-top-color: var(--color-border);
}
body.home .header-wrapper.scrolled #site-navigation ul li a,
body.page .header-wrapper.scrolled #site-navigation ul li a {
	color: var(--color-secondary);
}
body.home .header-wrapper.scrolled #site-navigation ul li.current-menu-item > a,
body.page .header-wrapper.scrolled #site-navigation ul li.current-menu-item > a {
	color: var(--color-primary);
}

#site-navigation ul li a {
	display: block;
	padding: 0.75rem var(--size-gutter);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-secondary);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	cursor: pointer;
}

#site-navigation ul li a:hover,
#site-navigation ul li a:focus-visible {
	color: var(--color-accent);
	text-decoration: none;
}

/* Active page — bold only, no background */
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current-menu-ancestor > a {
	font-weight: 700;
	background: none !important;
}

/* Hamburger toggle */
.nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem; height: 2.5rem;
	padding: 0.25rem;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 0;
	transition: background var(--transition);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	background: transparent;
	outline: none;
}

.nav-toggle .bar {
	display: block;
	width: 1.25rem; height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

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

/* --------------------------------------------------------------------------
   Header right group — nav + CTA + lang
   -------------------------------------------------------------------------- */
.site-header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.btn--header-cta {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.125rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	background: var(--color-cta);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn--header-cta:hover,
.btn--header-cta:focus-visible {
	background: var(--color-cta-dk);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Language switcher */
.lang-switch {
	display: none;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	transition: background var(--transition), color var(--transition);
}
.lang-switch:hover {
	background: transparent;
	color: var(--color-text-muted);
	text-decoration: none;
}
.lang-switch img {
	width: 1.125rem;
	height: 0.75rem;
	object-fit: cover;
	border-radius: 2px;
}

@media (min-width: 48em) {
	.btn--header-cta { display: inline-flex; align-items: center; }
	.lang-switch { display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), box-shadow var(--transition),
	            transform var(--transition);
	white-space: nowrap;
}

.btn--primary {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

.btn--accent {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}
.btn--accent:hover,
.btn--accent:focus-visible {
	background: var(--color-accent-dk);
	border-color: var(--color-accent-dk);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

.btn--cta {
	background: var(--color-cta);
	color: #fff;
	border-color: var(--color-cta);
}
.btn--cta:hover,
.btn--cta:focus-visible {
	background: var(--color-cta-dk);
	border-color: var(--color-cta-dk);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

.btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
#main {
	min-height: 50vh;
	padding-block: 3rem;
}

.home #main,
.page #main { padding-block: 0; }

/* --------------------------------------------------------------------------
   Shared section utilities
   -------------------------------------------------------------------------- */
.section-header {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: 3rem;
}

.section-title  { margin-bottom: 0.75rem; }

.section-subtitle {
	font-size: 1.0625rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.7;
}

/* Card link */
.card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-cta);
	text-decoration: none;
	transition: gap var(--transition), color var(--transition);
	cursor: pointer;
}
.card-link:hover,
.card-link:focus-visible {
	color: var(--color-cta-dk);
	gap: 0.625rem;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Fade-in animation
   -------------------------------------------------------------------------- */
.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hp-hero {
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding-block: 8rem 5rem;
	position: relative;
	overflow: hidden;
}

.hp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(2, 6, 23, 0.82) 0%,
		rgba(2, 6, 23, 0.65) 50%,
		rgba(3, 105, 161, 0.30) 100%
	);
	z-index: 0;
}

.hp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 48rem;
}

.hp-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.3125rem 0.875rem;
	background: rgba(232, 137, 12, 0.15);
	border: 1px solid rgba(232, 137, 12, 0.4);
	border-radius: 100px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.hp-hero__title {
	margin-bottom: 1.25rem;
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hp-hero__subtitle {
	margin-bottom: 2.5rem;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.75;
	max-width: 44rem;
}

.hp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.hp-trust-bar {
	background: var(--color-bg-subtle);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: 1.5rem;
}

.trust-bar__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.trust-bar__item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.trust-bar__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(3, 105, 161, 0.08);
	border-radius: var(--radius);
	color: var(--color-cta);
}

.trust-bar__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.trust-bar__stat {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.3;
}

.trust-bar__label {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	line-height: 1.4;
}

@media (min-width: 48em) {
	.trust-bar__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	.hp-trust-bar { padding-block: 1.75rem; }
}

@media (min-width: 75em) {
	.trust-bar__list { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Core Value Proposition (Platform)
   -------------------------------------------------------------------------- */
.hp-cvp {
	padding-block: 5rem;
	background-color: var(--color-bg);
}

.hp-cvp__grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cvp-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
	cursor: default;
}
.cvp-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.cvp-card__image {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
}
.cvp-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cvp-card__image .image-placeholder {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	min-height: unset;
	border: none;
	border-radius: 0;
}
.cvp-card__info {
	padding: 1.25rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
	flex: 1;
}
.cvp-card__title {
	font-size: 1.125rem;
	color: var(--color-primary);
	font-weight: 700;
	margin: 0;
}
.cvp-card__problem {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	font-style: italic;
	margin: 0.25rem 0 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-border);
}
.cvp-card__body {
	font-size: 0.875rem;
	color: var(--color-text);
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Pain Points (Problems)
   -------------------------------------------------------------------------- */
.hp-pain-points {
	padding-block: 5rem;
	background-color: var(--color-bg-alt);
}

.hp-pain-points__grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
	grid-template-columns: repeat(1, 1fr);
}

.pain-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.pain-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.pain-card__image {
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
}
.pain-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pain-card__image .image-placeholder {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	min-height: unset;
	border: none;
	border-radius: 0;
}
.pain-card__info {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.2rem;
	flex: 1;
}
.pain-card__number {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-accent);
	opacity: 0.20;
	line-height: 1;
	margin: 0;
}
.pain-card__title {
	font-size: 0.9375rem;
	color: var(--color-primary);
	font-weight: 700;
	margin: 0;
}
.pain-card__problem {
	display: none;
}
.pain-card__solution {
	font-size: 0.8125rem;
	color: var(--color-text);
	line-height: 1.5;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Compliance & Delivery section (homepage)
   -------------------------------------------------------------------------- */
.hp-compliance {
	padding-block: 5rem;
	background-color: var(--color-bg);
}

.compliance-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}

.compliance-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition), transform var(--transition);
}

.compliance-item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.compliance-item__icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
}

.compliance-item__content {
	flex: 1;
}

.compliance-item__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Solutions overview (homepage)
   -------------------------------------------------------------------------- */

.hp-solutions {
	padding-block: 5rem;
	background: var(--color-primary);
}
.hp-solutions .section-title { color: #fff; }
.hp-solutions .section-subtitle { color: rgba(255,255,255,0.65); }

.solutions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.solution-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
	cursor: default;
}
.solution-card:hover {
	background: rgba(255,255,255,0.09);
	border-color: rgba(232,137,12,0.45);
	transform: translateY(-2px);
}

.solution-card__content {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.solution-card__visual {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.solution-card__visual svg {
	width: 100%;
	max-width: 160px;
	height: auto;
}

.solution-card__num {
	display: block;
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 800;
	color: rgba(232,137,12,0.20);
	line-height: 1;
	margin-bottom: 0.625rem;
	letter-spacing: -0.04em;
}
.solution-card__title {
	font-size: 1.0625rem;
	margin-bottom: 0.625rem;
	color: #fff;
}
.solution-card__body {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.65);
	margin-bottom: 1.125rem;
	line-height: 1.65;
	flex: 1;
}
.solution-card .card-link {
	color: var(--color-accent);
}
.solution-card .card-link:hover,
.solution-card .card-link:focus-visible {
	color: #f5a430;
}

/* Solution card top strip colors */
.solution-card--orange { border-top: 3px solid var(--color-accent); }
.solution-card--blue { border-top: 3px solid var(--color-cta); }
.solution-card--teal { border-top: 3px solid #0D9488; }
.solution-card--purple { border-top: 3px solid #7C3AED; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team-intro {
	padding-block: 5rem;
	background-color: var(--color-bg);
}
.team-intro__statement {
	text-align: left;
	margin-bottom: 2rem;
}
.team-intro__desc {
	font-size: 1.0625rem;
	color: var(--color-text);
	max-width: none;
	margin-inline: 0;
	line-height: 1.65;
	opacity: 0.75;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}

.team-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.team-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.team-card__photo {
	position: relative;
	aspect-ratio: 3/4;
	background: var(--color-bg-alt);
	overflow: hidden;
}
.team-card__avatar-placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-bg-alt);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-card__info {
	padding: 1.25rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
	flex: 1;
}

.team-card__name {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	line-height: 1.3;
}
.team-card__cn-name {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-secondary);
	margin: 0;
	line-height: 1.2;
}

.team-card__title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-accent);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.team-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	margin-top: 0.5rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius);
	transition: background var(--transition), color var(--transition);
}
.team-card__link:hover {
	background: var(--color-bg-alt);
	color: var(--color-accent);
	text-decoration: none;
}

/* Mobile: team grid — 2 columns */
@media (max-width: 47.99em) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

/* --------------------------------------------------------------------------
   How We Deliver / Capabilities overview
   -------------------------------------------------------------------------- */
.hp-capabilities {
	padding-block: 5rem;
	background-color: var(--color-bg-alt);
}

.capabilities-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.capability-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
	cursor: default;
}
.capability-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
	border-color: rgba(3, 105, 161, 0.3);
}
.capability-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem; height: 3rem;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-cta) 100%);
	border-radius: var(--radius);
	margin-bottom: 1.25rem;
	color: #fff;
	flex-shrink: 0;
}
.capability-card__title {
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	color: var(--color-primary);
}
.capability-card__body {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	margin: 0 0 1rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Industries overview
   -------------------------------------------------------------------------- */
.hp-industries {
	padding-block: 5rem;
	background-color: var(--color-bg-alt);
}

.industries-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.industry-item__link {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow var(--transition), transform var(--transition);
}
.industry-item__link:hover,
.industry-item__link:focus-visible {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
	text-decoration: none;
}

.industry-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(3, 105, 161, 0.08);
	border-radius: var(--radius);
	color: var(--color-cta);
	margin-bottom: 0.75rem;
	transition: background var(--transition), color var(--transition);
}

.industry-item__link:hover .industry-item__icon,
.industry-item__link:focus-visible .industry-item__icon {
	background: var(--color-cta);
	color: #fff;
}

.industry-item__content {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.industry-item__label {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.3;
}
.industry-item__desc {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Trust Signals (homepage)
   -------------------------------------------------------------------------- */
.hp-trust-signals {
	padding-block: 5rem;
	background-color: var(--color-bg-alt);
}
.trust-signals__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.trust-signals__visual {
	display: flex;
	justify-content: center;
}
.trust-signals__image {
	width: 100%;
	max-width: 520px;
	aspect-ratio: 4/3;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.trust-signals__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.trust-signals__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.trust-signals__content .section-title {
	text-align: left;
}
.trust-signals__content .section-subtitle {
	text-align: left;
}

/* Mobile: stack image above text */
@media (max-width: 47.99em) {
	.trust-signals__inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.trust-signals__visual { order: -1; }
	.trust-signals__image { max-width: 100%; aspect-ratio: 16/10; }
	.trust-signals__content { text-align: center; }
	.trust-signals__content .section-title,
	.trust-signals__content .section-subtitle { text-align: center; }
}

.trust-signals__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.trust-signal-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text);
}
.trust-signal-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background: rgba(232,137,12,0.10);
	color: var(--color-accent);
}
.trust-signal-item__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.footer-faq {
	background: var(--color-bg-alt);
	padding-block: 4.5rem;
	border-top: 1px solid var(--color-border);
}
.footer-faq__title {
	text-align: center;
	margin-bottom: 2.5rem;
}
.faq-list {
	max-width: 48rem;
	margin-inline: auto;
}
.faq-item {
	border-bottom: 1px solid var(--color-border);
}
.faq-item__question { margin: 0; }
.faq-item__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.125rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--color-text);
	text-align: left;
	gap: 1rem;
	transition: color var(--transition);
}
.faq-item__toggle:hover { color: var(--color-cta); }
.faq-item__question-text {
	flex: 1;
	min-width: 0;
}

.faq-item__icon {
	display: block;
	width: 1.125rem; height: 1.125rem;
	flex-shrink: 0;
	position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}
.faq-item__icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-item__icon::after  { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}
.faq-item__answer {
	margin: 0;
	padding: 0 0 1.25rem;
}
.faq-item__answer p {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Inline CTA sections (homepage)
   -------------------------------------------------------------------------- */
.hp-cta-inline {
	padding-block: 4rem;
	background: var(--color-bg-subtle);
}
.hp-cta-inline__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.hp-cta-inline__text {
	flex: 1;
}
.hp-cta-inline__title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.5rem;
}
.hp-cta-inline__body {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-text);
	margin: 0;
}
.hp-cta-inline__action {
	flex-shrink: 0;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Mobile: CTA inline — stack vertically */
@media (max-width: 47.99em) {
	.hp-cta-inline__inner {
		flex-direction: column;
		text-align: center;
	}
	.hp-cta-inline__action {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Final CTA (homepage)
   -------------------------------------------------------------------------- */
.hp-cta {
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	color: #fff;
	padding-block: 5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hp-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(2, 6, 23, 0.78) 0%,
		rgba(2, 6, 23, 0.72) 100%
	);
	z-index: 0;
}

.hp-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 54rem;
	margin-inline: auto;
}

.hp-cta__title {
	color: #fff;
	margin-bottom: 1rem;
}
.hp-cta__subtitle {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 2rem;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   How It Works (solutions page)
   -------------------------------------------------------------------------- */
.how-it-works {
	padding-block: 5rem;
	background: var(--color-bg-alt);
}
.hiw-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin-top: 2.5rem;
	position: relative;
}
.hiw-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem 0.75rem;
	position: relative;
	z-index: 1;
}
.hiw-step__icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: var(--color-accent);
	margin-bottom: 1rem;
}
.hiw-step__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}
.hiw-step__number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.6875rem;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.375rem;
}
.hiw-step__label {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
}
.hiw-step__desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-text);
	margin-top: 0.375rem;
}
/* Connector line behind steps */
.hiw-steps::before {
	content: '';
	position: absolute;
	top: 3.25rem;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-border) 100%);
	z-index: 0;
}

/* Mobile: How It Works — stack vertically, centered */
@media (max-width: 47.99em) {
	.how-it-works {
		padding-block: 3rem;
	}
	.hiw-steps {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 1.5rem;
	}
	.hiw-steps::before {
		display: none;
	}
	.hiw-step {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.5rem 1rem;
	}
	.hiw-step__icon {
		margin-bottom: 0.75rem;
		margin-right: 0;
	}
	.hiw-step__number {
		font-size: 0.6875rem;
		margin-bottom: 0.25rem;
	}
	.hiw-step__label {
		font-size: 1.0625rem;
		margin-bottom: 0.375rem;
	}
	.hiw-step__desc {
		font-size: 0.9375rem;
		line-height: 1.7;
	}
}

/* --------------------------------------------------------------------------
   Page-level CTA (inner pages)
   -------------------------------------------------------------------------- */
.page-cta {
	padding-block: 4rem;
	background: var(--color-bg-subtle);
}
.page-cta__inner {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
}
.page-cta__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   Inner page hero (shared)
   -------------------------------------------------------------------------- */
.page-hero--inner {
	background: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-block: 8rem 3.5rem;
	position: relative;
	overflow: hidden;
}

.page-hero--inner .hp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(2, 6, 23, 0.82) 0%,
		rgba(2, 6, 23, 0.65) 50%,
		rgba(3, 105, 161, 0.30) 100%
	);
	z-index: 0;
}

.page-hero--inner .container {
	position: relative;
	z-index: 1;
}

.page-hero__title {
	color: #fff;
	margin-bottom: 0.75rem;
}
.page-hero__subtitle {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.0625rem;
	max-width: 44rem;
	margin: 0;
	line-height: 1.7;
}
.page-hero__supporting {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.9375rem;
	max-width: 40rem;
	margin: 1rem 0 0;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Inner page sections (shared)
   -------------------------------------------------------------------------- */
.solutions-section,
.capability-section,
.industry-section,
.compliance-section,
.about-section { padding-block: 5rem; }

/* Differentiator cards */
.different-section {
	padding-block: 5rem;
	background: var(--color-bg-alt);
}
.different-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Mobile: different cards — single column */
@media (max-width: 47.99em) {
	.different-cards {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}
.different-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2rem 1.75rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.different-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.different-card__number {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}
.different-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.75rem;
	line-height: 1.4;
}
.different-card__desc {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* About quote */
.about-quote {
	background-color: var(--color-primary);
	padding-block: 4rem;
	text-align: center;
	border-top: 3px solid var(--color-accent);
}
.about-quote__text {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.65;
	max-width: 48rem;
	margin: 0 auto;
	padding: 0;
	border: none;
	position: relative;
}
.about-quote__text::before {
	content: "\201C";
	font-size: 3rem;
	color: var(--color-accent);
	position: absolute;
	top: -0.5rem;
	left: -1.5rem;
	line-height: 1;
	opacity: 0.6;
}

/* Mobile: about quote — smaller text, hide decorative quote */
@media (max-width: 47.99em) {
	.about-quote__text {
		font-size: 1.25rem;
	}
	.about-quote__text::before {
		display: none;
	}
}

.solutions-section--alt,
.capability-section--alt,
.industry-section--alt,
.compliance-section--alt,
.about-section--alt { background: var(--color-bg-alt); }

.section-label,
.solutions-section__label,
.capability-section__label,
.industry-section__label,
.compliance-section__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	background: rgba(232, 137, 12, 0.08);
	border-radius: 100px;
	border: 1px solid rgba(232, 137, 12, 0.2);
}

.solutions-section__title,
.capability-section__title,
.industry-section__title,
.compliance-section__title,
.about-section__title { margin-bottom: 1.25rem; }

.solutions-list,
.capability-list,
.industry-list,
.compliance-list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 2rem;
}
.solutions-list li,
.capability-list li,
.industry-list li,
.compliance-list li {
	padding: 0.5rem 0 0.5rem 1.625rem;
	position: relative;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}
.solutions-list li::before,
.capability-list li::before,
.industry-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}

/* "Who This Is For" card */
.section-audience {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	margin: 1.5rem 0 2rem;
}
.section-audience__label {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}
.section-audience__text {
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.7;
	margin: 0;
}

/* Solutions page: content + image grid */
.solutions-section__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.solutions-section__content {
	flex: 1;
	min-width: 0;
}
.solutions-section__image {
	display: none;
}
.solutions-section__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
}
.image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px;
	background: var(--color-bg-alt);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
}
.image-placeholder::before {
	content: "📷 ";
	margin-right: 0.375rem;
}

/* Capability and Compliance page grids (reuse solutions pattern) */
.capability-section__grid,
.compliance-section__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.capability-section__content,
.compliance-section__content {
	flex: 1;
	min-width: 0;
}
.capability-section__image,
.compliance-section__image {
	display: none;
}
.capability-section__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
}

/* --------------------------------------------------------------------------
   Compliance Intro — full-width statement + pull quote + flow diagram
   -------------------------------------------------------------------------- */
.comp-intro-section {
	padding-block: 5rem 3rem;
	background: var(--color-primary);
}
.comp-intro__inner {
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}
.comp-intro__statement {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255,255,255,0.82);
	margin: 0 0 3rem;
}
.comp-intro__pullquote {
	position: relative;
	margin: 0;
	padding: 2rem 2.5rem;
	border: none;
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.5;
	text-align: center;
}
.comp-intro__pullquote::before {
	content: "\201C";
	position: absolute;
	top: -0.2em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.6;
}

/* Quote-only variant: standalone pull quote between sections */
.comp-intro-section--quote {
	padding-block: 4rem;
	background: var(--color-primary);
	text-align: center;
}
.comp-intro-section--quote .comp-intro__pullquote {
	max-width: 42rem;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Compliance Coverage Grid
   -------------------------------------------------------------------------- */
.comp-grid-section {
	padding-top: 4.5rem;
	padding-bottom: 3rem;
	background: var(--color-bg);
}
.comp-grid__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--color-primary);
	margin-bottom: 2rem;
}
.comp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
}
.comp-grid__card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	transition: box-shadow var(--transition), transform var(--transition);
}
.comp-grid__card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.comp-grid__number {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}
.comp-grid__card-title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.75rem;
}
.comp-grid__card-why {
	font-size: 0.9375rem;
	color: var(--color-secondary);
	margin: 0 0 0.75rem;
	line-height: 1.6;
}
.comp-grid__card-how {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.comp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 960px) {
	.comp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Risk Control Process — 5-step timeline
   -------------------------------------------------------------------------- */
.comp-process-section {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background: var(--color-bg-alt);
}
.comp-process__label {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: rgba(232, 137, 12, 0.08);
	border-radius: 100px;
	border: 1px solid rgba(232, 137, 12, 0.2);
}
.comp-process__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 3rem;
}
.comp-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

/* Vertical line (mobile-first) */
.comp-timeline::before {
	content: '';
	position: absolute;
	left: 1.125rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-border);
}

.comp-timeline__step {
	position: relative;
	padding-left: 3.5rem;
	padding-bottom: 2.5rem;
}
.comp-timeline__step:last-child {
	padding-bottom: 0;
}

/* Step dot */
.comp-timeline__dot {
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 2px solid var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--color-accent);
	z-index: 1;
}

.comp-timeline__title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.25rem;
}
.comp-timeline__desc {
	font-size: 0.9375rem;
	color: var(--color-secondary);
	line-height: 1.6;
	margin: 0 0 0.375rem;
}
.comp-timeline__risk {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* Desktop: horizontal timeline */
@media (min-width: 960px) {
	.comp-timeline {
		flex-direction: row;
		gap: 0;
	}
	.comp-timeline::before {
		left: 0;
		top: 1.125rem;
		bottom: auto;
		right: 0;
		width: auto;
		height: 2px;
		background: #CBD5E1;
	}
	.comp-timeline__step {
		flex: 1;
		padding-left: 0;
		padding-bottom: 0;
		padding-top: 3.5rem;
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.comp-timeline__title {
		min-height: 2.8em;
	}
	.comp-timeline__dot {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   Delivery Execution Model
   -------------------------------------------------------------------------- */
.delivery-section {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background: var(--color-bg);
}
.delivery-section__grid {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.delivery-modules {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.delivery-module {
	border-left: 3px solid var(--color-accent);
	padding: 0.875rem 0 0.875rem 1.25rem;
}
.delivery-module__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.375rem;
}
.delivery-module__desc {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.6;
}
.delivery-section__callout {
	max-width: 42rem;
	margin: 2.5rem auto 0;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.delivery-section__callout-icon {
	flex-shrink: 0;
	color: var(--color-accent);
	margin-top: 0.125rem;
}
.delivery-section__statement {
	font-family: var(--font-heading);
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.65;
	margin: 0;
}

/* Desktop: wide modules grid */
@media (min-width: 960px) {
	.delivery-section__grid {
		gap: 1.5rem;
	}
	.delivery-modules {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Readiness Callout
   -------------------------------------------------------------------------- */
.readiness-callout {
	padding-block: 5rem;
	background: var(--color-primary);
}
.readiness-callout__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: #fff;
	text-align: center;
	max-width: 38rem;
	margin-inline: auto;
	margin-bottom: 3rem;
	line-height: 1.4;
}
.readiness-callout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 56rem;
	margin-inline: auto;
}
.readiness-callout__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}
.readiness-callout__icon {
	color: var(--color-accent);
	margin-bottom: 0.25rem;
}
.readiness-callout__item-title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.readiness-callout__item-desc {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.65);
	line-height: 1.55;
	margin: 0;
	max-width: 20rem;
}

@media (min-width: 640px) {
	.readiness-callout__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Advantage Section — Global / Regional
   -------------------------------------------------------------------------- */
.advantage-section {
	padding-block: 5rem;
	background: var(--color-bg-alt);
}
.advantage-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2.5rem;
}
.advantage-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: box-shadow var(--transition), transform var(--transition);
}
.advantage-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.advantage-card__image {
	width: 100%;
}
.advantage-card__image .image-placeholder {
	min-height: 200px;
	border-radius: 0;
}
.advantage-card__img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.advantage-card__title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.5rem;
	padding: 1.25rem 1.5rem 0;
}
.advantage-card__desc {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
	padding: 0 1.5rem 1.25rem;
}

@media (min-width: 640px) {
	.advantage-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.advantage-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Philosophy Section — manifesto on dark background
   -------------------------------------------------------------------------- */
.philosophy-section {
	padding-block: 6rem;
	background: var(--color-primary);
}
.philosophy-section__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: #fff;
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: 3.5rem;
	line-height: 1.4;
}
.philosophy-section__values {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 60rem;
	margin-inline: auto;
}
.philosophy-section__value {
	border-left: 3px solid var(--color-accent);
	padding-left: 1.25rem;
}
.philosophy-section__value-number {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: 0.375rem;
}
.philosophy-section__value-title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.25rem;
}
.philosophy-section__value-desc {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.6);
	margin: 0;
	line-height: 1.55;
}

@media (min-width: 640px) {
	.philosophy-section__values {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   About Gallery
   -------------------------------------------------------------------------- */
.about-gallery {
	padding-block: 5rem;
	background: var(--color-bg);
}
.about-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.about-gallery__item {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.about-gallery__item .image-placeholder {
	min-height: 200px;
	border-radius: var(--radius-lg);
}
.about-gallery__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

@media (min-width: 640px) {
	.about-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
	.about-gallery__item--wide {
		grid-column: span 2;
	}
	.about-gallery__item .image-placeholder {
		min-height: 260px;
	}
}

@media (min-width: 960px) {
	.about-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
	.about-gallery__item .image-placeholder {
		min-height: 300px;
	}
}

/* --------------------------------------------------------------------------
   Contact Form
   -------------------------------------------------------------------------- */
.contact-form-section {
	padding-block: 5rem;
	background: var(--color-bg-alt);
}
.contact-form {
	max-width: 48rem;
	margin: 0 auto;
}
.contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.contact-form__field {}
.contact-form__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-secondary);
	margin-bottom: 0.5rem;
	letter-spacing: 0.02em;
}
.contact-form__input,
.contact-form__textarea {
	width: 100%;
	padding: 0.875rem 1.125rem;
	font-size: 0.9375rem;
	font-family: var(--font-body);
	color: var(--color-text);
	background: #fff;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(232,137,12,0.15);
	background: #fff;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 0.5;
}
select.contact-form__input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 14px;
	padding-right: 2.5rem;
}
.contact-form__textarea {
	resize: vertical;
	min-height: 7rem;
}
.contact-form__actions {
	margin-top: 2rem;
	text-align: left;
}
.contact-form__actions .btn {
	padding: 1rem 2.5rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 14px rgba(232,137,12,0.35);
	transition: transform var(--transition), box-shadow var(--transition);
}
.contact-form__actions .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(232,137,12,0.45);
}

/* Contact form success message */
.contact-form__success {
	padding: 2rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--radius-lg);
	text-align: center;
}
.contact-form__success-icon {
	color: #16a34a;
	margin-bottom: 0.75rem;
}
.contact-form__success-text {
	font-size: 1.0625rem;
	color: #166534;
	line-height: 1.6;
	margin: 0;
}

/* Contact form split layout (form + info panel) */
.contact-form__split {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.contact-form__info {
	display: none;
	background: linear-gradient(160deg, var(--color-primary-dk) 0%, var(--color-primary) 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 2.5rem 2rem;
	border-top: 3px solid var(--color-accent);
	box-shadow: 0 8px 32px rgba(15,23,42,0.25);
}
.contact-form__info-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--color-accent);
}
.contact-form__info-intro {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}
.contact-form__info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.contact-form__info-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.15);
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.9);
}
.contact-form__info-list li:last-child {
	border-bottom: none;
}
.contact-form__info-list svg {
	flex-shrink: 0;
	color: var(--color-accent);
}
.contact-form__info-cta {
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.2);
}
.contact-form__info-cta p {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.7);
	margin: 0 0 0.75rem;
}
.btn--outline-light {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-accent);
	background: transparent;
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dk);
}
.about-cooperate-section {
	padding-block: 5rem;
	background: var(--color-bg);
}
.about-cooperate-section .section-header,
.contact-form-section .section-header {
	text-align: left;
	max-width: none;
	margin-inline: 0;
}

.cooperate-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 3rem;
}

.cooperate-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.cooperate-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: rgba(3, 105, 161, 0.25);
}

.cooperate-card__body-wrap {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cooperate-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.cooperate-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-cta) 100%);
	border-radius: var(--radius);
	color: #fff;
	flex-shrink: 0;
}

.cooperate-card__num {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-accent);
	opacity: 0.20;
	line-height: 1;
	letter-spacing: -0.04em;
}

.cooperate-card__title {
	font-size: 1.0625rem;
	color: var(--color-primary);
	margin-bottom: 0.625rem;
}

.cooperate-card__body {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
}

@media (min-width: 48em) {
	.about-cooperate-section { padding-block: 6rem; }
	.cooperate-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.contact-form__grid { grid-template-columns: repeat(2, 1fr); }
	.contact-form__split {
		flex-direction: row;
		align-items: stretch;
	}
	.contact-form {
		flex: 1;
	}
	.contact-form__info {
		display: block;
		flex: 0 0 280px;
	}
}

@media (min-width: 75em) {
	.cooperate-cards { grid-template-columns: repeat(3, 1fr); }
	.contact-form__info {
		flex: 0 0 320px;
	}
}

.about-section__inner { max-width: none; }
.about-section__image {
	display: block;
	margin-top: 1.5rem;
}
.about-section__image .image-placeholder {
	min-height: 180px;
	max-height: 260px;
}
.about-section__text p {
	font-size: 1.0625rem;
	color: var(--color-text-muted);
	line-height: 1.75;
}
.about-section__core {
	font-size: 1.25rem !important;
	font-weight: 600;
	color: var(--color-primary) !important;
	line-height: 1.6 !important;
	margin-bottom: 1.5rem !important;
}
.about-section__proof-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}

/* Mobile: proof cards — single column */
@media (max-width: 47.99em) {
	.about-section__proof-cards {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}
.proof-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	box-shadow: var(--shadow-sm);
}
.proof-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 0.5rem;
}
.proof-card__desc {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
#site-footer {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.75);
	padding-block: 3rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#site-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color var(--transition);
}
#site-footer a:hover,
#site-footer a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.site-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

.footer-brand__name {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
}
.footer-brand img {
	height: 2.8rem;
	width: auto;
	filter: brightness(0) invert(1);
}
.footer-brand__tagline {
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.5);
	max-width: 22rem;
	line-height: 1.5;
}

.footer-nav__heading {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1rem;
}

.footer-nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.footer-nav ul li a {
	font-size: 0.875rem;
}

.footer-contact__heading {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.5rem;
}

.footer-contact__body {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
	margin: 0 0 1.25rem;
	max-width: 22rem;
}

.btn--footer-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.40);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color var(--transition), background var(--transition),
	            box-shadow var(--transition);
	white-space: nowrap;
}
.btn--footer-cta:hover,
.btn--footer-cta:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--shadow-md);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding-block: 1.25rem;
}
.footer-bottom__inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	text-align: center;
}
.copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.40);
}

/* --------------------------------------------------------------------------
   Responsive: tablet ≥ 768px
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
	:root { --size-gutter: 2rem; }

	#main { padding-block: 4rem; }

	.nav-toggle { display: none; }

	#site-navigation ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		position: static;
		border-top: none;
		box-shadow: none;
		padding: 0;
		background: none;
	}
	body.home #site-navigation ul {
		background: none;
	}
	body.page #site-navigation ul {
		background: none;
	}

	#site-navigation ul li a {
		padding: 0.5rem 0.75rem;
		font-size: 0.9375rem;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	#site-navigation ul li.current-menu-item > a {
		background: none !important;
	}

	.hp-hero { padding-block: 10rem 6rem; }

	.hp-cvp, .hp-pain-points, .hp-solutions, .hp-capabilities,
	.hp-industries, .hp-trust-signals, .team-intro, .hp-cta {
		padding-block: 6rem;
	}

	.hp-cvp__grid         { grid-template-columns: repeat(2, 1fr); }
	.hp-pain-points__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.compliance-list     { grid-template-columns: repeat(2, 1fr); }
	.solutions-grid       { grid-template-columns: repeat(2, 1fr); }
	.solution-card       { flex-direction: row; }
	.solution-card__content { flex: 1; }
	.solution-card__visual { display: flex; flex: 0 0 120px; }
	.capabilities-grid    { grid-template-columns: repeat(3, 1fr); }
	.industries-list      { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

	.solutions-section__grid {
		flex-direction: row;
		align-items: flex-start;
	}
	.solutions-section__image {
		display: flex;
		flex: 0 0 340px;
	}
	.image-placeholder {
		min-height: 320px;
	}

	.capability-section__grid,
	.compliance-section__grid {
		flex-direction: row;
		align-items: flex-start;
	}
	.capability-section__image,
	.compliance-section__image {
		display: flex;
		flex: 0 0 340px;
	}

	.capability-section__inner,
	.compliance-section__inner {
		max-width: none;
	}
	.industry-section__inner {
		max-width: 48rem;
	}

	.footer-faq { padding-block: 5.5rem; }

	.site-footer-inner {
		grid-template-columns: 1fr 1fr 1fr;
		align-items: start;
		gap: 3rem;
	}
	.footer-nav ul {
		flex-direction: column;
		gap: 0.625rem;
	}
}

/* --------------------------------------------------------------------------
   Responsive: desktop ≥ 1200px
   -------------------------------------------------------------------------- */
@media (min-width: 75em) {
	:root { --size-gutter: 2.5rem; }

	.hp-hero { padding-block: 12rem 8rem; }

	.hp-cvp, .hp-pain-points, .hp-solutions, .hp-capabilities,
	.hp-industries, .hp-trust-signals, .team-intro, .hp-cta {
		padding-block: 7rem;
	}

	.hp-cvp__grid         { grid-template-columns: repeat(3, 1fr); }
	.hp-pain-points__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
	.compliance-list     { grid-template-columns: repeat(3, 1fr); }
	.team-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

	.solutions-section__grid {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.solutions-section__image {
		display: flex;
		flex: 0 0 400px;
	}
	.image-placeholder {
		min-height: 360px;
	}

	.capability-section__grid,
	.compliance-section__grid {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.capability-section__image,
	.compliance-section__image {
		display: flex;
		flex: 0 0 400px;
	}

	.solutions-grid    { grid-template-columns: repeat(2, 1fr); }
	.solution-card    { flex-direction: row; }
	.solution-card__content { flex: 1; }
	.solution-card__visual { display: flex; flex: 0 0 140px; }
	.industries-list   { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   Category Feature Grid (Industries page — one big + four small)
   ========================================================================== */

.cat-grid-section {
	padding-block: 4.5rem;
	background: var(--color-bg);
}

.cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform var(--transition-lg), box-shadow var(--transition-lg);
}

.cat-card:hover,
.cat-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow-xl);
}

.cat-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--color-primary);
	transition: transform 0.5s ease;
}

.cat-card:hover .cat-card__bg {
	transform: scale(1.04);
}

.cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(2, 6, 23, 0.72) 0%,
		rgba(2, 6, 23, 0.28) 60%,
		rgba(2, 6, 23, 0.08) 100%
	);
	}

.cat-card__content {
	position: relative;
	z-index: 1;
	padding: 2rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cat-card--large {
	min-height: 420px;
}

.cat-card--large .cat-card__content {
	padding: 2.5rem 2.25rem 2rem;
}

.cat-card__title {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	color: #fff;
}

.cat-card--large .cat-card__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.cat-card__concern {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-style: italic;
}

.cat-card--large .cat-card__concern {
	font-size: 1rem;
}

.cat-card__promise {
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.cat-card__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.02em;
	transition: color var(--transition);
}

.cat-card:hover .cat-card__link,
.cat-card:focus-visible .cat-card__link {
	color: #fff;
}

/* Tablet: 2 columns, large card spans full width */
@media (min-width: 48em) {
	.cat-grid {
		grid-template-columns: 1fr 1fr;
	}
	.cat-card--large {
		grid-column: 1 / -1;
	}
	.cat-card--small {
		min-height: 300px;
	}
}

/* Desktop: uniform 2×2 grid */
@media (min-width: 75em) {
	.cat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
	.cat-card--small {
		min-height: 360px;
	}
}

/* ==========================================================================
   (previous styles continue)
   ========================================================================== */

/* ==========================================================================
   Support Pillars (Industries page — 4-column value strip)
   ========================================================================== */

.support-pillars-section {
	padding-block: 4.5rem;
	background: var(--color-bg-alt);
}

.support-pillars__heading {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: 0.5rem;
}

.support-pillars__intro {
	font-size: 1.0625rem;
	color: var(--color-text-muted);
	max-width: 40rem;
	margin-bottom: 2.5rem;
}

.support-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.support-pillar {
	padding: 1.75rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition-lg), transform var(--transition-lg);
}

.support-pillar:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.support-pillar__number {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: 0.75rem;
	opacity: 0.35;
}

.support-pillar__title {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--color-text);
}

.support-pillar__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 0;
}

@media (min-width: 48em) {
	.support-pillars {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 75em) {
	.support-pillars {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Category Detail Blocks (Industries page — alternating 60/40 two-column)
   ========================================================================== */

.cat-detail {
	padding-block: 4.5rem;
	background: var(--color-bg);
}

.cat-detail--alt {
	background: var(--color-bg-alt);
}

.cat-detail__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.cat-detail__text {
	max-width: 36rem;
}

.cat-detail__title {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

.cat-detail__points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.cat-detail__point {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
}

.cat-detail__point:last-child {
	border-bottom: none;
}

.cat-detail__point h4 {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.25rem;
}

.cat-detail__point p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.cat-detail__image {
	display: none;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius-lg);
	min-height: 320px;
}

.btn--cat-catalogue {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0.7rem 1.5rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--color-accent);
	border-radius: var(--radius);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), box-shadow var(--transition),
	            transform var(--transition);
}

.btn--cat-catalogue:hover,
.btn--cat-catalogue:focus-visible {
	background: var(--color-accent-dk);
	border-color: var(--color-accent-dk);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

.cat-detail--alt .btn--cat-catalogue {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.cat-detail--alt .btn--cat-catalogue:hover,
.cat-detail--alt .btn--cat-catalogue:focus-visible {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-1px);
}

@media (min-width: 48em) {
	.cat-detail__grid {
		flex-direction: row;
		align-items: flex-start;
	}

	.cat-detail__text {
		flex: 0 0 58%;
		max-width: 58%;
	}

	.cat-detail__image {
		display: flex;
		flex: 0 0 38%;
		max-width: 38%;
		min-height: 400px;
	}

	.cat-detail--reverse .cat-detail__text {
		order: 2;
	}
	.cat-detail--reverse .cat-detail__image {
		order: 1;
	}

	.cat-detail__points {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 75em) {
	.cat-detail__image {
		min-height: 440px;
	}

	.cat-detail__text {
		flex: 0 0 55%;
		max-width: 55%;
	}
	.cat-detail__image {
		flex: 0 0 40%;
		max-width: 40%;
	}
}

/* ==========================================================================
   Cross-Category Advantages (Industries page — dark contrast block)
   ========================================================================== */

.cross-cat-section {
	padding-block: 5rem;
	background: var(--color-primary-dk);
	color: #fff;
}

.cross-cat__heading {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: 0.5rem;
	color: #fff;
}

.cross-cat__intro {
	font-size: 1.0625rem;
	color: rgba(255,255,255,0.72);
	max-width: 40rem;
	margin-bottom: 2.5rem;
}

.cross-cat__cards {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cross-cat__card {
	padding: 2rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-lg);
	transition: background var(--transition-lg), border-color var(--transition-lg);
}

.cross-cat__card:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.22);
}

.cross-cat__card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.5rem;
}

.cross-cat__card-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.72);
	margin-bottom: 0;
}

@media (min-width: 48em) {
	.cross-cat__cards {
		flex-direction: row;
	}
	.cross-cat__card {
		flex: 1;
	}
}

/* ==========================================================================
   FAQ / Buyer Questions (Industries page — accordion)
   ========================================================================== */

.faq-section {
	padding-block: 4.5rem;
	background: var(--color-bg);
}

.faq-section__heading {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: 2rem;
}

.faq-list {
	max-width: 48rem;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.125rem 0;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color var(--transition);
}

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

.faq-item__question::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--color-accent);
	flex-shrink: 0;
	margin-left: 1rem;
	transition: transform var(--transition), content var(--transition);
}

.faq-item[open] .faq-item__question::after {
	content: '−';
}

.faq-item__question:hover {
	color: var(--color-accent);
}

.faq-item__answer {
	padding: 0 0 1.25rem;
}

.faq-item__answer p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-text-muted);
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.btn:hover,
	.btn:focus-visible,
	.cvp-card:hover,
	.pain-card:hover,
	.solution-card:hover,
	.capability-card:hover,
	.industry-item__link:hover,
	.cooperate-card:hover,
	.cat-card:hover,
	.support-pillar:hover,
	.cross-cat__card:hover {
		transform: none;
	}

	.fade-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Product Catalogue Pages — Grid & Cards
   ========================================================================== */

.prod-grid-section {
	padding-block: 4.5rem;
	background: var(--color-bg);
}

.prod-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.prod-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-lg), transform var(--transition-lg);
}

.prod-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.prod-card__image {
	display: block;
	width: 100%;
	height: 200px;
	background: var(--color-bg-alt);
	background-size: cover;
	background-position: center;
}

.prod-card__info {
	padding: 1.25rem;
}

.prod-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--color-text);
}

.prod-card__desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}

.prod-card__spec {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--color-accent);
	background: rgba(232,137,12,0.1);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius);
	margin-bottom: 0.75rem;
}

.prod-card__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

.prod-card__actions .card-link {
	font-size: 0.8125rem;
}

@media (min-width: 36em) {
	.prod-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62em) {
	.prod-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}