/* =========================================================
   StartRight HR — main.css
   Light theme (white background) with orange + navy accents.
   Brand colors come from Customizer via inline CSS variables.
   Targets: modern Chrome/Edge/Firefox/Safari (desktop + iOS/Android),
   tablet + phone responsive, print-friendly.
   ========================================================= */

/* ==================== Design tokens ==================== */
:root {
	--c-primary:         #F37321;  /* Orange — logo arrow */
	--c-primary-dark:    #D85A11;
	--c-primary-soft:    rgba(243, 115, 33, 0.12);
	--c-primary-softer:  rgba(243, 115, 33, 0.06);

	--c-secondary:       #1E4E8C;  /* Navy — logo figure */
	--c-secondary-dark:  #143862;
	--c-secondary-soft:  rgba(30, 78, 140, 0.08);

	--c-dark:            #0A0F1A;

	--c-bg:              #FFFFFF;
	--c-bg-soft:         #F8FAFC;  /* very light gray for alternating bands */
	--c-bg-band:         #F1F5FA;  /* slightly cooler tint */

	--c-text:            #111827;
	--c-text-soft:       #4B5563;
	--c-text-muted:      #6B7280;
	--c-border:          #E5EAF0;
	--c-border-soft:     #EEF2F7;
	--c-white:           #FFFFFF;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;

	--shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
	--shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.06);
	--shadow-md: 0 10px 28px rgba(17, 24, 39, 0.08);
	--shadow-lg: 0 20px 50px rgba(17, 24, 39, 0.12);

	--ff-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--ff-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--container: 1200px;

	--section-pad-y: clamp(64px, 8vw, 104px);
}

/* ==================== Base reset ==================== */
*, *::before, *::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	margin: 0;
	font-family: var(--ff-sans);
	color: var(--c-text);
	background: var(--c-bg);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;     /* guard against accidental horizontal scroll on mobile */
}
img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}
img { border-style: none; }
a {
	color: var(--c-primary);
	text-decoration: none;
	-webkit-transition: color .2s ease;
	transition: color .2s ease;
}
a:hover, a:focus { color: var(--c-primary-dark); }
a:focus-visible, button:focus-visible, .btn:focus-visible {
	outline: 3px solid var(--c-primary);
	outline-offset: 3px;
	border-radius: 4px;
}
h1, h2, h3, h4, h5 {
	font-family: var(--ff-display);
	color: var(--c-secondary);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--c-text-soft); }
ul { padding-left: 1.2em; margin: 0 0 1em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.section { padding: var(--section-pad-y) 0; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-secondary);
	color: #fff;
	padding: 10px 14px;
	z-index: 9999;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ==================== Header ==================== */
.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-white);
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	border-bottom: 1px solid var(--c-border-soft);
	-webkit-transition: box-shadow .25s ease;
	transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.topbar {
	background: var(--c-dark);
	color: #d5deec;
	font-size: 13px;
	border-bottom: 2px solid var(--c-primary);
}
.topbar-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 16px;
	padding: 10px 24px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.topbar a {
	color: #d5deec;
	margin-right: 18px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 6px;
}
.topbar a:hover { color: var(--c-primary); }
.topbar .icon { color: var(--c-primary); }
.topbar-social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; }
.topbar-social a {
	width: 26px; height: 26px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center;   -ms-flex-pack: center;   justify-content: center;
	font-size: 12px;
	font-weight: 700;
	margin-right: 0;
	text-decoration: none;
}
.topbar-social a:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

.nav-inner {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	padding: 14px 24px;
	gap: 24px;
}

.site-branding { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.site-branding .custom-logo,
.site-branding .default-logo {
	max-height: 52px;
	width: auto;
	height: auto;
	display: block;
}
.site-branding .custom-logo-link { display: block; line-height: 0; }

/* Dark pill behind the bundled transparent-PNG logo so the
   silver "Startright HR" text reads against a white nav bar.
   Only applied when the fallback logo is used — a user who
   uploads a custom logo via Customizer gets a clean white nav. */
.site-branding .logo-badge {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	background: var(--c-dark);
	padding: 6px 16px;
	border-radius: 10px;
	line-height: 0;
	-webkit-transition: -webkit-transform .2s ease;
	transition: transform .2s ease;
}
.site-branding .logo-badge:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); }
.site-branding .logo-badge .default-logo { max-height: 46px; }

.main-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.nav-menu {
	list-style: none;
	padding: 0; margin: 0;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	gap: 28px;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
}
.nav-menu li { position: relative; }
.nav-menu a {
	color: var(--c-secondary);
	font-weight: 600;
	font-size: 15px;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	-webkit-transition: color .2s ease, border-color .2s ease;
	transition: color .2s ease, border-color .2s ease;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a {
	color: var(--c-primary);
	border-bottom-color: var(--c-primary);
}
.nav-menu .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 260px;
	background: #fff;
	-webkit-box-shadow: var(--shadow-md);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-sm);
	padding: 10px 0;
	list-style: none;
	margin: 0;
	display: none;
	border: 1px solid var(--c-border);
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu { display: block; }
.nav-menu .sub-menu a { display: block; padding: 10px 18px; border: 0; }
.nav-menu .sub-menu a:hover { background: var(--c-bg-soft); color: var(--c-primary); }

.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	width: 44px; height: 44px;
	position: relative;
	padding: 0;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
	content: '';
	position: absolute;
	left: 10px; right: 10px;
	height: 2px;
	background: var(--c-secondary);
	border-radius: 2px;
	-webkit-transition: -webkit-transform .25s ease, top .25s ease;
	transition: transform .25s ease, top .25s ease;
}
.menu-toggle .hamburger { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.menu-toggle .hamburger::before { top: -8px; }
.menu-toggle .hamburger::after  { top: 8px; }
.menu-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.menu-toggle[aria-expanded="true"] .hamburger::before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger::after  { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ==================== Buttons ==================== */
.btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	font-family: var(--ff-sans);
	-webkit-transition: background .2s ease, color .2s ease, -webkit-transform .2s ease, -webkit-box-shadow .2s ease, border-color .2s ease;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	cursor: pointer;
	border: 2px solid transparent;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}
.btn-primary {
	background: var(--c-primary);
	color: #fff;
	-webkit-box-shadow: 0 10px 20px rgba(243, 115, 33, .30);
	box-shadow: 0 10px 20px rgba(243, 115, 33, .30);
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--c-primary-dark);
	color: #fff;
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}
.btn-ghost {
	background: transparent;
	color: var(--c-secondary);
	border-color: var(--c-secondary);
}
.btn-ghost:hover, .btn-ghost:focus {
	background: var(--c-secondary);
	color: #fff;
}
.btn-light {
	background: #fff;
	color: var(--c-secondary);
}
.btn-light:hover, .btn-light:focus {
	background: var(--c-primary);
	color: #fff;
}
.btn-text {
	background: transparent;
	padding: 8px 0;
	color: var(--c-primary);
	font-weight: 700;
}
.btn-text:hover, .btn-text:focus {
	color: var(--c-primary-dark);
	gap: 12px;
}
.btn-lg {
	padding: 18px 36px;
	font-size: 16px;
	-webkit-box-shadow: 0 14px 30px rgba(243, 115, 33, .38);
	box-shadow: 0 14px 30px rgba(243, 115, 33, .38);
}

/* ==================== Hero (LIGHT) ==================== */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 90% 10%, var(--c-primary-softer), transparent 60%),
		-webkit-gradient(linear, left top, right bottom, from(#FFFFFF), to(var(--c-bg-soft)));
	background:
		radial-gradient(ellipse at 90% 10%, var(--c-primary-softer), transparent 60%),
		linear-gradient(135deg, #FFFFFF 0%, var(--c-bg-soft) 100%);
	color: var(--c-text);
	padding: clamp(72px, 10vw, 120px) 0 clamp(64px, 9vw, 110px);
	border-bottom: 1px solid var(--c-border-soft);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .shape { position: absolute; border-radius: 50%; -webkit-filter: blur(80px); filter: blur(80px); }
.hero-bg .shape-a { width: 420px; height: 420px; background: var(--c-primary); top: -120px; right: -120px; opacity: .12; }
.hero-bg .shape-b { width: 380px; height: 380px; background: var(--c-secondary); bottom: -160px; left: -140px; opacity: .08; }
@supports not (filter: blur(1px)) {
	.hero-bg .shape { opacity: 0.06; }
}

.hero-inner {
	position: relative;
	display: grid;
	-ms-grid-columns: 1.2fr 60px 1fr;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.hero-copy { max-width: 640px; }

.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-primary);
	padding: 6px 14px;
	background: var(--c-primary-soft);
	border-radius: 999px;
	margin-bottom: 22px;
	border: 1px solid rgba(243, 115, 33, .22);
}
.eyebrow-line {
	background: transparent;
	padding: 0;
	color: var(--c-primary);
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
	border: 0;
}
.eyebrow-line::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 26px;
	height: 2px;
	background: var(--c-primary);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Eyebrow split into distinct pills — clearer than a single long pill. */
.eyebrow-chips {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}
.eyebrow-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-primary);
	background: var(--c-primary-soft);
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(243, 115, 33, .22);
	line-height: 1.2;
	white-space: nowrap;
}
/* Alternate chip tint toward navy to reinforce the dual-brand palette. */
.eyebrow-chip:nth-child(2) {
	color: var(--c-secondary);
	background: var(--c-secondary-soft);
	border-color: rgba(30, 78, 140, .22);
}

.hero-title {
	font-size: clamp(32px, 5.2vw, 58px);
	color: var(--c-secondary);
	margin-bottom: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.hero-sub {
	color: var(--c-text-soft);
	font-size: clamp(16px, 1.4vw, 18px);
	margin-bottom: 32px;
	max-width: 580px;
}
.hero-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	gap: 14px;
}

.hero-visual {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.hero-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border: 1px solid var(--c-border);
	padding: 32px;
	border-radius: var(--radius-lg);
	-webkit-box-shadow: var(--shadow-lg);
	box-shadow: var(--shadow-lg);
	position: relative;
}
.hero-card::before {
	content: '';
	position: absolute;
	top: 0; left: 24px; right: 24px;
	height: 4px;
	background: var(--c-primary);
	border-radius: 0 0 4px 4px;
}
.hero-card-row {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); display: inline-block; }
.hero-chip {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-secondary);
	background: var(--c-secondary-soft);
	padding: 3px 10px;
	border-radius: 999px;
}
.hero-card-headline {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--c-secondary);
	margin-bottom: 14px;
}
.hero-card-line {
	height: 10px;
	background: var(--c-border-soft);
	border-radius: 6px;
	margin-bottom: 10px;
}
.hero-card-line.w-90 { width: 90%; }
.hero-card-line.w-80 { width: 80%; }
.hero-card-line.w-70 { width: 70%; }

/* Hero card "what we build" list — replaces the old decorative placeholder bars. */
.hero-card-list {
	list-style: none;
	padding: 0;
	margin: 0 0 4px;
	display: grid;
	gap: 10px;
}
.hero-card-list li {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--c-text);
	font-weight: 500;
	line-height: 1.35;
}
.hero-card-check {
	-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
/* Dense variant — used when the card needs to fit all 12 service titles
   without making the hero panel tower over the copy. Single column with
   tighter spacing and smaller indicators so every service is legible at a
   glance without sacrificing the card's compact silhouette. */
.hero-card-list--dense {
	gap: 8px;
}
.hero-card-list--dense li {
	font-size: 12.5px;
	line-height: 1.35;
	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
	gap: 8px;
}
.hero-card-list--dense .hero-card-check {
	width: 16px; height: 16px;
	font-size: 9px;
	margin-top: 1px;
}
.hero-card-grid {
	display: grid;
	-ms-grid-columns: 1fr 12px 1fr 12px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 22px;
}
.hero-card-grid > div {
	background: var(--c-bg-soft);
	padding: 14px 10px;
	border-radius: var(--radius-md);
	text-align: center;
	border: 1px solid var(--c-border-soft);
}
.hero-card-grid strong {
	font-family: var(--ff-display);
	display: block;
	font-size: 22px;
	color: var(--c-primary);
	font-weight: 800;
}
.hero-card-grid span {
	font-size: 11px;
	color: var(--c-text-muted);
}

/* ==================== Section head ==================== */
.section-head {
	max-width: 820px;
	margin-bottom: clamp(40px, 6vw, 56px);
}
.section-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.section-title {
	font-size: clamp(26px, 3.6vw, 40px);
	margin-bottom: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.section-lede {
	font-size: clamp(15px, 1.4vw, 17px);
	color: var(--c-text-soft);
}

/* ==================== Challenges ==================== */
.section-challenges { background: var(--c-bg); }
.challenges-grid {
	display: grid;
	-ms-grid-columns: 1fr 24px 1fr 24px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.challenge-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	padding: 36px 28px 32px;
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	-webkit-transition: -webkit-transform .25s ease, border-color .25s ease, -webkit-box-shadow .25s ease;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.challenge-card:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	border-color: var(--c-primary);
	-webkit-box-shadow: var(--shadow-md);
	box-shadow: var(--shadow-md);
}
.challenge-num {
	position: absolute;
	top: 16px;
	right: 20px;
	font-family: var(--ff-display);
	font-size: 46px;
	font-weight: 800;
	color: var(--c-primary-soft);
	line-height: 1;
	pointer-events: none;
}
.challenge-icon {
	font-size: 28px;
	width: 54px; height: 54px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	border-radius: 14px;
	margin-bottom: 18px;
}
.challenge-title { font-size: 20px; margin-bottom: 10px; }
.challenge-desc { font-size: 15px; }

/* ==================== Services (flat 12-card grid, 3 per row) ==================== */
.section-services { background: var(--c-bg-soft); }
.services-grid {
	display: grid;
	-ms-grid-columns: 1fr 24px 1fr 24px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* Legacy 5-card class — kept for back-compat with older Customizer states. */
.services-grid-5 { grid-template-columns: repeat(5, 1fr); -ms-grid-columns: (1fr 20px)[4] 1fr; gap: 20px; }
.service-card {
	background: #fff;
	padding: 30px 24px;
	border-radius: var(--radius-md);
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--c-border);
	-webkit-transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-orient: vertical; -webkit-box-direction: normal;
	-ms-flex-direction: column; flex-direction: column;
	position: relative;
	overflow: hidden;
}
.service-focus {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-primary);
	background: rgba(243, 115, 33, .12);
	padding: 5px 10px;
	border-radius: 999px;
	margin-bottom: 14px;
}
/* "Recommended for" block — promoted to a highlighted panel so it stands
   out as the trust cue on every service card. Navy accent stripe on the
   left, soft brand-secondary background, two-line label/value layout. */
.service-meta {
	margin: 0 0 18px 0;
	padding: 10px 14px;
	background: var(--c-secondary-soft, rgba(30, 78, 140, .08));
	border-left: 3px solid var(--c-secondary);
	border-radius: 0 8px 8px 0;
}
.service-meta-label {
	display: block;
	font-weight: 800;
	color: var(--c-secondary);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 10.5px;
	margin-bottom: 4px;
}
.service-meta-value {
	display: block;
	font-size: 13px;
	color: var(--c-text);
	line-height: 1.5;
	font-weight: 500;
}
.service-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 3px;
	background: var(--c-primary);
	-webkit-transform: scaleX(0); transform: scaleX(0);
	-webkit-transform-origin: left; transform-origin: left;
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
}
.service-card:hover {
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	-webkit-box-shadow: var(--shadow-md);
	box-shadow: var(--shadow-md);
	border-color: var(--c-primary);
}
.service-card:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); }
.service-icon {
	width: 54px; height: 54px;
	border-radius: 14px;
	background: -webkit-gradient(linear, left top, right bottom, from(rgba(243,115,33,.18)), to(rgba(243,115,33,.04)));
	background: linear-gradient(135deg, rgba(243,115,33,.18), rgba(243,115,33,.04));
	color: var(--c-primary);
	font-size: 26px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	margin-bottom: 18px;
}
.service-title { font-size: 18px; margin-bottom: 10px; line-height: 1.25; }
.service-desc { font-size: 14.5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 18px; line-height: 1.6; }

/* ==================== About ==================== */
.section-about { background: var(--c-bg); }
.about-grid {
	display: grid;
	-ms-grid-columns: 1fr 64px 1.3fr;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
/* Copy-only mode (no left-panel image): two-column layout — prose on the
   left, a highlighted "How We Help" card on the right. Fills the section
   width so neither side looks empty, without bringing the image back. */
.about-grid--copy-only {
	-ms-grid-columns: 1.05fr 48px 0.95fr;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 48px;
	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Shared "We help organisations:" block — used in two flavours:
   .about-help--inline → simple list under the prose (image-on mode)
   .about-help--card   → navy gradient panel as the right-hand column   */
.about-help { margin: 8px 0 28px; }
.about-help-lead {
	font-weight: 700;
	color: var(--c-secondary);
	margin-bottom: 12px;
	font-size: 16px;
}
.about-help-list { margin-top: 6px; }

.about-help--card {
	margin: 0;
	position: relative;
	padding: 40px 36px;
	border-radius: var(--radius-md);
	background: -webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background: linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	color: #fff;
	overflow: hidden;
	-webkit-box-shadow: var(--shadow-lg);
	box-shadow: var(--shadow-lg);
	-ms-flex-item-align: stretch;
	-ms-grid-row-align: stretch;
	align-self: stretch;
}
.about-help--card::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: var(--c-primary);
	-webkit-filter: blur(46px); filter: blur(46px);
	opacity: .42;
	z-index: 0;
	pointer-events: none;
}
.about-help--card::after {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--c-primary);
	z-index: 1;
}
.about-help--card > * { position: relative; z-index: 1; }
.about-help--card .about-help-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin-bottom: 16px;
}
.about-help--card .about-help-lead {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.3;
}
.about-help--card .about-help-list { margin: 0; }
.about-help--card .about-help-list li {
	color: rgba(255, 255, 255, .94);
	font-size: 14.5px;
	margin-bottom: 14px;
	line-height: 1.5;
	padding-left: 36px;
}
.about-help--card .about-help-list li:last-child { margin-bottom: 0; }
.about-help--card .check-list li::before {
	background: var(--c-primary);
	color: #fff;
}
.about-visual {
	position: relative;
	-webkit-box-sizing: border-box; box-sizing: border-box;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 30% 30%, rgba(243,115,33,.30), transparent 55%),
		-webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background:
		radial-gradient(circle at 30% 30%, rgba(243,115,33,.30), transparent 55%),
		linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	-webkit-box-shadow: var(--shadow-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
/* Fallback for browsers without aspect-ratio (Safari <15, older Edge) */
@supports not (aspect-ratio: 1 / 1) {
	.about-visual { height: 0; padding-bottom: 125%; }
}
.about-shape {
	position: absolute;
	inset: 20px;
	border: 2px dashed rgba(255,255,255,.22);
	border-radius: var(--radius-lg);
}
.about-visual::after {
	content: '';
	position: absolute;
	right: -40px; top: 40px;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: var(--c-primary);
	-webkit-filter: blur(30px); filter: blur(30px);
	opacity: .5;
	z-index: 0;
	pointer-events: none;
}

/* When a real portrait image is present, swap the decorative gradient panel
   for the photo and apply a warm/cool duotone tint that bridges the B&W
   photo to the brand palette without muddying the face. */
.about-visual-photo {
	background:
		-webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background:
		linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	border: 1px solid var(--c-border);
}
.about-visual-photo::after {
	/* Warm orange bloom stays, but softer so the face reads cleanly. */
	opacity: .32;
	-webkit-filter: blur(48px);
	filter: blur(48px);
}
.about-image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center 22%;
	object-position: center 22%;
	-webkit-filter: contrast(1.04) brightness(1.03);
	filter: contrast(1.04) brightness(1.03);
}
/* Dual-tone overlay — navy top-left, orange bottom-right — ties the portrait
   to the brand palette without hiding detail. Non-blocking: the badge and
   decorative glow sit above this via z-index. */
.about-visual-tint {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		-webkit-gradient(linear, left top, right bottom,
			color-stop(0%, rgba(30, 78, 140, .22)),
			color-stop(45%, rgba(30, 78, 140, 0)),
			color-stop(55%, rgba(243, 115, 33, 0)),
			color-stop(100%, rgba(243, 115, 33, .26)));
	background:
		linear-gradient(135deg,
			rgba(30, 78, 140, .22) 0%,
			rgba(30, 78, 140, 0) 45%,
			rgba(243, 115, 33, 0) 55%,
			rgba(243, 115, 33, .26) 100%);
	mix-blend-mode: multiply;
}
.about-visual-photo .about-badge { z-index: 3; }

/* ------------------------------------------------------------------
   About-image treatments (Customizer → About → Image treatment)
   Each class combines:
     - a CSS filter on the <img> (tone / contrast / saturation)
     - an overlay on .about-visual-tint (brand colour wash)
   All are non-destructive — the uploaded image file is untouched.
   ------------------------------------------------------------------ */

/* 1. Brand duotone — DEFAULT. Navy top-left → orange bottom-right.
   The base .about-visual-tint rule already implements this diagonal
   split, so this class just ensures the base image is neutral. */
.about-treatment-brand-duotone .about-image {
	-webkit-filter: contrast(1.04) brightness(1.03);
	        filter: contrast(1.04) brightness(1.03);
}

/* 2. Warm wash — full orange multiply, gently warmed base.
   Reads as approachable, energetic, brand-forward. */
.about-treatment-warm .about-image {
	-webkit-filter: contrast(1.05) brightness(1.04) saturate(1.05);
	        filter: contrast(1.05) brightness(1.04) saturate(1.05);
}
.about-treatment-warm .about-visual-tint {
	background:
		-webkit-gradient(linear, left top, right bottom,
			color-stop(0%, rgba(243, 115, 33, .16)),
			color-stop(100%, rgba(243, 115, 33, .30)));
	background:
		linear-gradient(135deg, rgba(243, 115, 33, .16) 0%, rgba(243, 115, 33, .30) 100%);
	mix-blend-mode: multiply;
}

/* 3. Navy editorial — cool, corporate, sophisticated. */
.about-treatment-navy .about-image {
	-webkit-filter: contrast(1.08) brightness(1.02);
	        filter: contrast(1.08) brightness(1.02);
}
.about-treatment-navy .about-visual-tint {
	background:
		-webkit-gradient(linear, left top, right bottom,
			color-stop(0%, rgba(30, 78, 140, .18)),
			color-stop(100%, rgba(30, 78, 140, .32)));
	background:
		linear-gradient(135deg, rgba(30, 78, 140, .18) 0%, rgba(30, 78, 140, .32) 100%);
	mix-blend-mode: multiply;
}

/* 4. Clean B&W — pure desaturation, a touch of contrast.
   No colour overlay; the orange corner bloom provides the only accent. */
.about-treatment-bw .about-image {
	-webkit-filter: grayscale(1) contrast(1.08) brightness(1.03);
	        filter: grayscale(1) contrast(1.08) brightness(1.03);
}
.about-treatment-bw .about-visual-tint { display: none; }

/* 5. Vivid colour — for photos that already have strong colour.
   Preserves the image as-shot, just a gentle pop. No overlay. */
.about-treatment-vivid .about-image {
	-webkit-filter: contrast(1.08) saturate(1.15) brightness(1.03);
	        filter: contrast(1.08) saturate(1.15) brightness(1.03);
}
.about-treatment-vivid .about-visual-tint { display: none; }

/* 6. Cream mono — warm sepia-style, elegant / editorial. */
.about-treatment-cream .about-image {
	-webkit-filter: sepia(.42) saturate(.85) contrast(1.06) brightness(1.03);
	        filter: sepia(.42) saturate(.85) contrast(1.06) brightness(1.03);
}
.about-treatment-cream .about-visual-tint {
	background:
		-webkit-gradient(linear, left top, right bottom,
			color-stop(0%, rgba(243, 115, 33, .08)),
			color-stop(100%, rgba(243, 115, 33, .14)));
	background:
		linear-gradient(135deg, rgba(243, 115, 33, .08) 0%, rgba(243, 115, 33, .14) 100%);
	mix-blend-mode: multiply;
}
.about-badge {
	position: absolute;
	right: -18px;
	bottom: 40px;
	background: var(--c-primary);
	color: #fff;
	padding: 18px 22px;
	border-radius: var(--radius-md);
	-webkit-box-shadow: var(--shadow-md);
	box-shadow: var(--shadow-md);
	text-align: center;
	font-family: var(--ff-display);
}
.about-badge strong {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
}
.about-badge span {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

/* ==================== Stats ==================== */
.stats {
	background: var(--c-secondary);
	color: #fff;
	padding: 64px 0;
	position: relative;
	overflow: hidden;
}
.stats::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top right, rgba(243,115,33,.28), transparent 60%);
}
.stats-grid {
	display: grid;
	-ms-grid-columns: (1fr 24px)[3] 1fr;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
	position: relative;
}
.stat-value {
	font-family: var(--ff-display);
	font-size: clamp(34px, 4vw, 52px);
	color: var(--c-primary);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 6px;
}
.stat-label {
	color: rgba(255,255,255,.82);
	font-size: 15px;
	letter-spacing: .02em;
}

/* ==================== Our Approach ==================== */
.section-why { background: var(--c-bg-band); }
.why-grid {
	display: grid;
	-ms-grid-columns: 1fr 28px 1fr 28px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.why-card {
	background: #fff;
	padding: 36px 30px;
	border-radius: var(--radius-md);
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--c-border);
	position: relative;
	overflow: hidden;
}
.why-card.accent {
	background: -webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background: linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	color: #fff;
	border-color: transparent;
}
.why-card.accent::after {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: var(--c-primary);
	-webkit-filter: blur(40px); filter: blur(40px);
	opacity: .4;
}
.why-card.accent h3,
.why-card.accent li,
.why-card.accent .why-num {
	color: #fff;
	position: relative;
}
.why-card.accent .check-list li::before {
	background: var(--c-primary);
	color: #fff;
}
.why-num {
	font-family: var(--ff-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--c-primary);
	letter-spacing: .14em;
	margin-bottom: 10px;
	display: block;
}
.why-card h3 { font-size: 22px; margin-bottom: 18px; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
	color: var(--c-text);
	font-size: 15px;
	line-height: 1.55;
}
.check-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	font-size: 13px;
	font-weight: 800;
}

/* ==================== Who We Work With ==================== */
.section-who { background: var(--c-bg); }
.who-grid {
	display: grid;
	-ms-grid-columns: 1fr 28px 1fr 28px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.who-card {
	background: #fff;
	border: 1px solid var(--c-border);
	padding: 40px 30px;
	border-radius: var(--radius-md);
	text-align: center;
	-webkit-transition: -webkit-transform .2s ease, border-color .2s ease, -webkit-box-shadow .2s ease;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.who-card:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	border-color: var(--c-primary);
	-webkit-box-shadow: var(--shadow-md);
	box-shadow: var(--shadow-md);
}
.who-icon {
	width: 70px; height: 70px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	font-size: 32px;
	margin-bottom: 18px;
}
.who-title { font-size: 22px; margin-bottom: 10px; }
.who-desc { font-size: 15px; }

/* ==================== CTA (single banner + legacy dual-card) ==================== */
.section-cta { background: var(--c-bg-soft); }

/* Single-CTA banner — full-width navy gradient block with centered copy
   + primary button + optional secondary text link. Replaces the awkward
   "one tile" layout when only Card 1 is populated. */
.cta-banner {
	position: relative;
	border-radius: var(--radius-lg);
	background: -webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background: linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	color: #fff;
	overflow: hidden;
	-webkit-box-shadow: var(--shadow-lg);
	box-shadow: var(--shadow-lg);
}
.cta-banner::before {
	content: '';
	position: absolute;
	top: -80px; right: -80px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: var(--c-primary);
	-webkit-filter: blur(80px); filter: blur(80px);
	opacity: .45;
	pointer-events: none;
}
.cta-banner::after {
	content: '';
	position: absolute;
	bottom: -100px; left: -60px;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	-webkit-filter: blur(60px); filter: blur(60px);
	pointer-events: none;
}
.cta-banner-inner {
	position: relative;
	z-index: 1;
	padding: clamp(48px, 7vw, 72px) clamp(28px, 6vw, 64px);
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}
.cta-banner-title {
	font-family: var(--ff-display);
	color: #fff;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.2;
	margin: 0 0 16px;
}
.cta-banner-desc {
	color: rgba(255, 255, 255, .88);
	font-size: 17px;
	line-height: 1.6;
	max-width: 620px;
	margin: 0 auto 32px;
}
.cta-banner-actions {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	gap: 18px 28px;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.cta-banner-secondary {
	display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	-webkit-transition: color .2s ease;
	transition: color .2s ease;
}
.cta-banner-secondary-label {
	font-size: 13px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
}
.cta-banner-secondary-value {
	font-size: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: 2px;
	-webkit-transition: border-color .2s ease;
	transition: border-color .2s ease;
}
.cta-banner-secondary:hover .cta-banner-secondary-value,
.cta-banner-secondary:focus .cta-banner-secondary-value {
	border-bottom-color: var(--c-primary);
	color: var(--c-primary);
}

.cta-grid {
	display: grid;
	-ms-grid-columns: 1fr 28px 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.cta-card {
	background: #fff;
	padding: 48px 40px;
	border-radius: var(--radius-lg);
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--c-border);
	position: relative;
	overflow: hidden;
}
.cta-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 6px; height: 100%;
	background: var(--c-primary);
}
.cta-card.dark {
	background: -webkit-gradient(linear, left top, right bottom, from(var(--c-secondary)), to(var(--c-secondary-dark)));
	background: linear-gradient(135deg, var(--c-secondary), var(--c-secondary-dark));
	color: #fff;
	border-color: transparent;
}
.cta-card.dark h3,
.cta-card.dark p { color: #fff; }
.cta-card h3 { font-size: 24px; margin-bottom: 10px; }
.cta-card p { margin-bottom: 22px; }

/* ==================== Page hero (inner pages) ==================== */
.page-hero {
	background: var(--c-bg-soft);
	color: var(--c-secondary);
	padding: 80px 0 60px;
	text-align: center;
	border-bottom: 1px solid var(--c-border);
}
.page-hero-title { color: var(--c-secondary); font-size: clamp(28px, 4vw, 44px); margin: 0; font-weight: 800; }
.page-hero-meta { color: var(--c-text-muted); margin-top: 10px; }

/* ==================== Blog ==================== */
.blog-layout {
	display: grid;
	-ms-grid-columns: 2fr 48px 1fr;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
}
.post-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	-webkit-box-shadow: var(--shadow-xs);
	box-shadow: var(--shadow-xs);
	margin-bottom: 28px;
}
.post-thumb img { width: 100%; }
.post-body { padding: 28px; }
.post-title { font-size: 24px; margin-bottom: 8px; }
.post-title a { color: var(--c-secondary); }
.post-title a:hover { color: var(--c-primary); }
.post-meta { font-size: 13px; color: var(--c-text-muted); margin-bottom: 14px; }
.single-post .entry-content { font-size: 17px; }
.single-post .entry-content img { border-radius: var(--radius-sm); margin: 24px 0; }
.blog-sidebar .widget {
	background: var(--c-bg-soft);
	padding: 24px;
	border-radius: var(--radius-md);
	margin-bottom: 24px;
	border: 1px solid var(--c-border-soft);
}
.widget-title { font-size: 18px; margin-bottom: 14px; }
.pagination-wrap { margin-top: 30px; }

/* ==================== Footer ==================== */
.site-footer {
	background: var(--c-dark);
	color: #c5ccd8;
	padding: 72px 0 0;
	margin-top: 0;
	border-top: 3px solid var(--c-primary);
}
.footer-grid {
	display: grid;
	-ms-grid-columns: 1.3fr 40px 1fr 40px 1.2fr 40px 1.4fr;
	grid-template-columns: 1.3fr 1fr 1.2fr 1.4fr;
	gap: 40px;
	padding-bottom: 56px;
}
/* Footer logo sits in a bright white card so the brand reads clearly
   against the dark navy footer. Works with both uploaded Custom Logos
   and the bundled default logo.png. */
.footer-logo-box {
	display: inline-block;
	background: #fff;
	padding: 14px 20px;
	border-radius: 14px;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .05);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .05);
	max-width: 100%;
}
.footer-logo-box .footer-logo,
.footer-logo-box .custom-logo-link {
	display: block;
	line-height: 0;
}
.footer-brand-col .custom-logo,
.footer-brand-col .footer-logo img {
	max-width: 220px;
	height: auto;
	width: auto;
	margin: 0;
	display: block;
}
.footer-brand .site-title { color: #fff; font-size: 22px; }
.footer-tagline {
	font-size: 14px;
	color: var(--c-primary);
	margin-bottom: 22px;
	font-weight: 600;
	letter-spacing: .02em;
}
.footer-title,
.site-footer h4 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 18px;
	font-family: var(--ff-display);
	font-weight: 700;
}
.site-footer a { color: #c5ccd8; }
.site-footer a:hover { color: var(--c-primary); }
.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu li { margin-bottom: 10px; font-size: 15px; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li {
	margin-bottom: 14px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	gap: 10px;
	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
	font-size: 15px;
}
.footer-contact .icon { color: var(--c-primary); margin-top: 2px; }
.footer-socials {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	gap: 12px;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
}
.footer-socials a {
	border: 1px solid rgba(255,255,255,.18);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
}
.footer-socials a:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 20px 0;
}
.footer-bottom-inner {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}
.footer-bottom-inner p { margin: 0; color: inherit; }

/* ==================== Reveal animation ==================== */
.reveal {
	opacity: 0;
	-webkit-transform: translateY(18px);
	transform: translateY(18px);
	-webkit-transition: opacity .6s ease, -webkit-transform .6s ease;
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in { opacity: 1; -webkit-transform: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.is-in {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		-webkit-transition: none;
		transition: none;
	}
	.service-card, .challenge-card, .who-card {
		-webkit-transition: none;
		transition: none;
	}
}

/* ==================== Responsive breakpoints ==================== */
/* Large tablet / small desktop */
@media (max-width: 1100px) {
	.services-grid-5 {
		-ms-grid-columns: (1fr 20px)[2] 1fr;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.services-grid,
	.services-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.challenges-grid,
	.who-grid,
	.why-grid { grid-template-columns: 1fr; }
	.about-grid { grid-template-columns: 1fr; gap: 48px; }
	.about-grid--copy-only {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.about-help--card { padding: 32px 28px; }
	.about-visual {
		max-width: 420px;
		margin: 0 auto;
		width: 100%;
	}
	.hero-inner { grid-template-columns: 1fr; gap: 48px; }
	.hero-visual { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
	.hero-card { max-width: 100%; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.blog-layout { grid-template-columns: 1fr; }
}

/* Mobile landscape / large phone */
@media (max-width: 768px) {
	.section { padding: 64px 0; }
	.topbar-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 6px; padding: 10px 20px; }
	.topbar-contact { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
	.topbar a { margin-right: 14px; font-size: 12px; }
	.menu-toggle { display: inline-block; }
	.main-navigation {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #fff;
		-webkit-box-shadow: var(--shadow-md);
		box-shadow: var(--shadow-md);
		padding: 16px 24px;
		display: none;
		border-top: 1px solid var(--c-border);
	}
	.main-navigation.is-open { display: block; }
	.nav-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; }
	.nav-menu a { padding: 12px 0; display: block; border-bottom: 1px solid var(--c-border); }
	.nav-menu li:last-child a { border-bottom: 0; }
	.nav-menu .sub-menu {
		position: static;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding: 0 0 0 16px;
		display: block;
		border: 0;
	}
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid,
	.services-grid-5 { grid-template-columns: 1fr; }
	.cta-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.hero { padding: 64px 0; }
	.cta-card { padding: 36px 24px; }
	.about-badge { right: 20px; }
	.site-branding .custom-logo,
	.site-branding .default-logo { max-height: 40px; }
	.site-branding .logo-badge { padding: 5px 12px; border-radius: 8px; }
	.site-branding .logo-badge .default-logo { max-height: 36px; }
}

/* Small phones */
@media (max-width: 480px) {
	:root { --section-pad-y: 48px; }
	.container { padding: 0 18px; }
	.btn { padding: 12px 22px; font-size: 14px; }
	.hero-actions { width: 100%; }
	.hero-actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 1 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	.hero-card { padding: 24px; }
	.stats-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
	.hero-card-grid { grid-template-columns: 1fr 1fr; }
	.hero-card-grid > div:nth-child(3) { grid-column: 1 / -1; }
	.challenge-card, .who-card { padding: 30px 22px; }
	.cta-card { padding: 30px 22px; }
	.about-badge { right: 16px; padding: 14px 18px; }
	.about-badge span { font-size: 26px; }
	.section-title { font-size: 26px; }
	.topbar { font-size: 12px; }
	.topbar-social a { width: 24px; height: 24px; font-size: 11px; }
	.nav-inner { padding: 12px 18px; gap: 12px; }
}

/* Extra small screens (older phones, ~360px) */
@media (max-width: 360px) {
	.hero-title { font-size: 28px; }
	.site-branding .custom-logo,
	.site-branding .default-logo { max-height: 32px; }
	.site-branding .logo-badge .default-logo { max-height: 30px; }
	.stats-grid { grid-template-columns: 1fr; }
}

/* High-DPI / Retina tweaks */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.site-branding .custom-logo,
	.site-branding .default-logo,
	.footer-logo img {
		image-rendering: -webkit-optimize-contrast;
	}
}

/* iOS safe-area insets (notch devices) */
@supports (padding: env(safe-area-inset-left)) {
	.container {
		padding-left: max(24px, env(safe-area-inset-left));
		padding-right: max(24px, env(safe-area-inset-right));
	}
}

/* Print styles */
@media print {
	.site-header, .site-footer, .hero-bg, .hero-visual,
	.menu-toggle, .topbar, .topbar-social { display: none !important; }
	.hero { padding: 24px 0; background: #fff !important; color: #000 !important; }
	.section { padding: 24px 0; page-break-inside: avoid; }
	body { color: #000; background: #fff; font-size: 12pt; }
	a { color: #000; text-decoration: underline; }
	.btn { border: 1px solid #000; color: #000 !important; background: #fff !important; box-shadow: none !important; }
	.service-card, .challenge-card, .why-card, .who-card, .cta-card {
		box-shadow: none !important;
		border: 1px solid #ccc !important;
		page-break-inside: avoid;
	}
}