/* =============================================================
   Humboldt — main.css
   Design tokens → Reset → Typography → Layout → Header/Nav →
   Footer → Buttons → Forms → Components → WP core → Utilities
   ============================================================= */

/* 1. Design Tokens ------------------------------------------ */
:root {
	/* Colors */
	--c-navy:          #1f3659;
	--c-slate:         #4b5e7a;
	--c-blue-mid:      #62728b;
	--c-charcoal:      #575756;
	--c-gray:          #9d9d9c;
	--c-teal:          #00b8c4;
	--c-teal-light:    #33c6d0;
	--c-teal-pale:     #66d4dc;
	--c-teal-lightest: #9ee1f5;
	--c-orange:        #da6f32;
	--c-orange-light:  #e08c5c;
	--c-peach:         #e7a37c;
	--c-cream:         #f7de9f;
	--c-gold:          #ffdc72;
	--c-white:         #ffffff;
	--c-off-white:     #f8f8f6;
	--c-cream-bg:      #fdf6ea;

	/* Typography */
	--f-heading:   'Jost', sans-serif;
	--f-body:      'Nunito Sans', sans-serif;
	--f-condensed: 'Barlow Condensed', sans-serif;

	/* Type scale */
	--t-hero:  clamp(2.25rem, 5vw, 4rem);
	--t-h1:    clamp(1.875rem, 3.5vw, 3rem);
	--t-h2:    clamp(1.5rem, 2.5vw, 2.5rem);
	--t-h3:    clamp(1.25rem, 2vw, 1.875rem);
	--t-lead:  clamp(1.1rem, 1.5vw, 1.5rem);
	--t-body:  1rem;
	--t-nav:   0.9375rem;
	--t-tag:   0.875rem;
	--t-small: 0.8125rem;

	/* Spacing */
	--sp-xs:  0.5rem;
	--sp-sm:  1rem;
	--sp-md:  2rem;
	--sp-lg:  4rem;
	--sp-xl:  6rem;
	--sp-xxl: 10rem;

	/* Layout */
	--container:      1200px;
	--container-pad:  clamp(1rem, 4vw, 2rem);

	/* Misc */
	--radius:     4px;
	--radius-lg:  8px;
	--radius-xl:  16px;
	--transition: 0.25s ease;
	--shadow:     0 4px 20px rgba(31, 54, 89, 0.1);
	--shadow-lg:  0 8px 40px rgba(31, 54, 89, 0.15);

	/* Header */
	--header-h: 140px;
	--header-h-scrolled: 72px;
}

/* Responsive spacing — scale down the spacing scale on small screens so
   section padding and gaps aren't wastefully large on mobile. */
@media (max-width: 768px) {
	:root {
		--sp-lg:  2.5rem;
		--sp-xl:  3.5rem;
		--sp-xxl: 6rem;
	}
}

@media (max-width: 480px) {
	:root {
		--sp-md:  1.5rem;
		--sp-lg:  2rem;
		--sp-xl:  2.5rem;
		--sp-xxl: 4rem;
	}
}

/* 2. Reset -------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	overflow-x: hidden; /* prevent horizontal scroll from bg-shape pseudo-elements or any slight layout overhang */
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.75;
	color: var(--c-charcoal);
	background-color: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: var(--header-h);
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	font: inherit;
}

input,
textarea,
select {
	font: inherit;
}

/* 3. Typography -------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--f-heading);
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-navy);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
	margin-block-end: var(--sp-sm);
}
p:last-child {
	margin-block-end: 0;
}

/* 4. Layout ------------------------------------------------ */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section {
	padding-block: var(--sp-xl);
}

.section--sm {
	padding-block: var(--sp-lg);
}

.section--navy {
	background-color: var(--c-navy);
	color: var(--c-white);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
	color: var(--c-white);
}

.section--teal {
	background-color: var(--c-teal);
	color: var(--c-white);
}

.section--teal h1,
.section--teal h2,
.section--teal h3 {
	color: var(--c-white);
}

.section--off-white {
	background-color: var(--c-off-white);
}

.section--cream {
	background-color: var(--c-cream-bg);
}

/* Grid */
.grid {
	display: grid;
	gap: var(--sp-md);
}

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

@media (max-width: 900px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.grid--4,
	.grid--3,
	.grid--2 {
		grid-template-columns: 1fr;
	}
}

/* Split (50/50) */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-lg);
	align-items: center;
}

.split--60-40 { grid-template-columns: 3fr 2fr; }
.split--40-60 { grid-template-columns: 2fr 3fr; }

@media (max-width: 768px) {
	.split,
	.split--60-40,
	.split--40-60 {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}
}

/* 5. Accessibility ----------------------------------------- */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 10000;
	padding: var(--sp-sm) var(--sp-md);
	background: var(--c-teal);
	color: var(--c-white);
	font-family: var(--f-heading);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius) 0;
	transition: top var(--transition);
}

.skip-link:focus {
	top: 0;
}

:focus-visible {
	outline: 3px solid var(--c-teal);
	outline-offset: 3px;
	border-radius: var(--radius);
}

.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;
}

/* Admin bar offset (logged-in view only) */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar body {
	padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px));
}

/* On mobile WP switches the admin bar to position:absolute (non-fixed).
   Without this, a gap equal to the admin bar height appears above the fixed
   site header when the user scrolls, letting page content bleed through. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
	.admin-bar body {
		padding-top: var(--header-h);
	}
}

/* 6. Header & Navigation ----------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--header-h);
	background: var(--c-white);
	box-shadow: 0 2px 12px rgba(31, 54, 89, 0.07);
	display: flex;
	align-items: center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            height    0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow var(--transition);
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

.site-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(31, 54, 89, 0.14);
}

/* Compact: reappears mid-page without logo */
.site-header.is-compact {
	height: var(--header-h-scrolled);
}

.site-header.is-compact .site-header__inner {
	align-items: center;
	justify-content: center;
	padding-block-end: 0;
}

.site-header.is-compact .site-logo {
	opacity: 0;
	max-width: 0;
	pointer-events: none;
	transition: none;
}

.site-header__inner {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-md);
	padding-block-end: 10px;
}

/* Logo */
.site-logo {
	flex-shrink: 0;
	line-height: 0;
	max-width: 300px;
	overflow: hidden;
	/* Restore: max-width snaps instantly, then opacity fades in */
	transition: opacity 0.3s ease 0.05s, max-width 0s ease 0s;
}

.site-logo a,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-logo img,
.custom-logo {
	height: 110px;
	width: auto;
}

.site-logo__text {
	font-family: var(--f-heading);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--c-navy);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* Primary nav (desktop) */
.site-nav {
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	font-family: var(--f-body);
	font-size: var(--t-nav);
	font-weight: 600;
	color: var(--c-navy);
	padding-block: var(--sp-xs);
	display: block;
	position: relative;
	transition: color var(--transition);
	white-space: nowrap;
}

.site-nav__list > li > a::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--c-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.site-nav__list > li > a:hover,
.site-nav__list > .current-menu-item > a {
	color: var(--c-teal);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Dropdown */
.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 200px;
	background: var(--c-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border-top: 3px solid var(--c-teal);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	padding-block: var(--sp-xs);
	z-index: 200;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.site-nav__list .sub-menu li a {
	display: block;
	padding: 0.625rem var(--sp-md);
	font-size: var(--t-tag);
	font-weight: 600;
	color: var(--c-navy);
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}

.site-nav__list .sub-menu li a:hover {
	background: var(--c-teal-lightest);
	color: var(--c-navy);
}

/* Hamburger button */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: var(--sp-xs);
	border-radius: var(--radius);
	flex-shrink: 0;
}

.nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--c-navy);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
	transform-origin: center;
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

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

/* Mobile nav */
@media (max-width: 900px) {
	/* Shrink header + logo so the nav has maximum room */
	:root {
		--header-h: 80px;
	}

	.site-header__inner {
		align-items: center;
		padding-block-end: 0;
	}

	.site-logo img,
	.custom-logo {
		height: 54px;
	}

	.nav-toggle {
		display: flex;
	}

	/* Use physical properties (top/left/right/bottom) instead of logical
	   equivalents — Safari 14 on iOS 14 does not support inset-block-end,
	   causing the nav panel to collapse to near-zero height. */
	.site-header.is-compact .site-nav {
		top: var(--header-h-scrolled);
	}

	.site-nav {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--c-navy);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: var(--sp-md);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
		z-index: 999;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.site-nav__list > li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.site-nav__list > li > a {
		color: var(--c-white);
		font-size: 1.125rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		width: 100%;
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.site-nav__list > li > a::after {
		display: none;
	}

	.site-nav__list > li > a:hover {
		color: var(--c-teal-pale);
	}

	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.05);
		border-top: none;
		border-left: 3px solid var(--c-teal);
		border-radius: 0;
		padding-top: var(--sp-xs);
		padding-bottom: var(--sp-xs);
		padding-left: var(--sp-sm);
		margin-bottom: var(--sp-xs);
		display: none;
	}

	.site-nav__list .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.site-nav__list .sub-menu li a {
		color: rgba(255, 255, 255, 0.75);
		padding: 0.625rem var(--sp-sm);
		font-size: var(--t-body);
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.site-nav__list .sub-menu li a:hover {
		color: var(--c-teal-pale);
		background: transparent;
	}

	body.nav-is-open {
		overflow: hidden;
	}
}

/* 7. Footer ------------------------------------------------ */
.site-footer {
	background: var(--c-navy);
	color: rgba(255, 255, 255, 0.75);
	padding-block: var(--sp-xl) var(--sp-md);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--sp-xl);
	padding-block-end: var(--sp-lg);
	border-block-end: 1px solid rgba(255, 255, 255, 0.1);
	margin-block-end: var(--sp-md);
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-lg);
	}
}

@media (max-width: 600px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}
}

.site-footer__logo {
	margin-block-end: var(--sp-sm);
	line-height: 0;
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
	height: 48px;
	width: auto;
}

.site-footer__logo .site-logo__text {
	color: var(--c-white);
}

.site-footer__tagline {
	font-size: var(--t-small);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.55);
	max-width: 32ch;
}

.footer-col__heading {
	font-family: var(--f-heading);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--c-white);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-block-end: var(--sp-sm);
}

.footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.footer-nav__list a {
	font-size: var(--t-small);
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition);
}

.footer-nav__list a:hover {
	color: var(--c-teal-pale);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.footer-contact li {
	display: flex;
	gap: var(--sp-xs);
	align-items: baseline;
	flex-wrap: wrap;
}

.footer-contact__label {
	font-family: var(--f-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-teal-pale);
	flex-shrink: 0;
}

.footer-contact a,
.footer-contact span:not(.footer-contact__label) {
	font-size: var(--t-small);
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition);
}

.footer-contact a:hover {
	color: var(--c-teal-pale);
}

/* Footer values circle */
/* Heading and circle share one width so the heading sits centred over it */
.footer-values {
	width: 100%;
	max-width: 280px;
}

.footer-values .footer-col__heading {
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}

.values-cycle {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	color: var(--c-teal-pale);
	overflow: visible;
}

.values-cycle__ring {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1;
	stroke-dasharray: 2 5;
}

.values-cycle__arrows path {
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
}

.values-cycle__word {
	fill: currentColor;
	text-anchor: middle;
	dominant-baseline: central;
}

/* One theme colour per value, warm to cool around the circle:
   gold → peach → teal → sky, then sky back to gold. The class sets
   `color`, which the words, arrowheads and gradient stops pick up. */
.values-cycle--c-gold  { color: var(--c-gold); }
.values-cycle--c-peach { color: var(--c-peach); }
.values-cycle--c-teal  { color: var(--c-teal-light); }
.values-cycle--c-sky   { color: var(--c-teal-lightest); }

.values-cycle stop {
	stop-color: currentColor;
}

/* Single-colour option (Customizer): light words, teal arrows */
.values-cycle--mono .values-cycle__word {
	color: var(--c-white);
}

.values-cycle--mono.values-cycle--script .values-cycle__word {
	color: var(--c-cream);
}

.values-cycle--mono .values-cycle__arrows path {
	stroke: var(--c-teal-pale);
}

.values-cycle--mono marker {
	color: var(--c-teal-pale);
}

.values-cycle--script .values-cycle__word {
	font-family: 'Dancing Script', cursive;
	font-size: 21px;
	font-weight: 600;
}

.values-cycle--serif .values-cycle__word {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
}

.values-cycle--classic .values-cycle__word {
	font-family: var(--f-heading);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

@media (max-width: 900px) {
	/* Two-column footer: let the values sit on their own full row */
	.footer-values {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.footer-values {
		margin-inline: auto;
	}
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm);
	flex-wrap: wrap;
}

.site-footer__copy {
	font-size: var(--t-small);
	color: rgba(255, 255, 255, 0.35);
}

/* 8. Buttons ----------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-xs);
	padding: 0.8125rem 1.875rem;
	font-family: var(--f-heading);
	font-size: var(--t-nav);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--radius);
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition),
				border-color var(--transition), transform var(--transition);
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}

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

.btn--primary {
	background: var(--c-teal);
	color: var(--c-white);
	border-color: var(--c-teal);
}

.btn--primary:hover {
	background: var(--c-navy);
	border-color: var(--c-navy);
}

.btn--secondary {
	background: transparent;
	color: var(--c-teal);
	border-color: var(--c-teal);
}

.btn--secondary:hover {
	background: var(--c-teal);
	color: var(--c-white);
}

.btn--navy {
	background: var(--c-navy);
	color: var(--c-white);
	border-color: var(--c-navy);
}

.btn--navy:hover {
	background: var(--c-teal);
	border-color: var(--c-teal);
}

.btn--ghost {
	background: transparent;
	color: var(--c-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost:hover {
	background: var(--c-white);
	color: var(--c-navy);
	border-color: var(--c-white);
}

.btn--text {
	background: transparent;
	color: var(--c-white);
	border-color: transparent;
	padding-inline: 0;
	gap: 0.375rem;
	text-underline-offset: 3px;
}

.btn--text::after {
	content: '→';
	display: inline-block;
	transition: transform var(--transition);
}

.btn--text:hover {
	background: transparent;
	color: var(--c-white);
	border-color: transparent;
	text-decoration: underline;
}

.btn--text:hover::after {
	transform: translateX(5px);
}

.btn--sm {
	padding: 0.5rem 1.25rem;
	font-size: var(--t-small);
}

/* 9. Forms ------------------------------------------------- */
.form-field {
	margin-block-end: var(--sp-sm);
}

.form-field label {
	display: block;
	font-family: var(--f-heading);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--c-navy);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-block-end: 0.375rem;
}

.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: 0.75rem var(--sp-sm);
	border: 2px solid rgba(31, 54, 89, 0.15);
	border-radius: var(--radius);
	background: var(--c-white);
	color: var(--c-charcoal);
	font-size: var(--t-body);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: var(--c-gray);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--c-teal);
	box-shadow: 0 0 0 3px rgba(0, 184, 196, 0.15);
}

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

/* 10. Section header component ----------------------------- */
.section-header {
	margin-block-end: var(--sp-lg);
}

.section-header--centered {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.section-header__eyebrow {
	display: block;
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	font-weight: 500;
	color: var(--c-orange);
	letter-spacing: 0.02em;
	margin-block-end: var(--sp-xs);
	line-height: 1.3;
}

.section--navy .section-header__eyebrow {
	color: var(--c-cream);
}

.home-features .section-header__eyebrow {
	font-size: var(--t-h2);
	font-weight: 600;
	letter-spacing: 0;
	margin-block-end: var(--sp-md);
}

.section-header__title {
	font-family: var(--f-heading);
	font-size: var(--t-h2);
	color: var(--c-navy);
	margin-block-end: var(--sp-sm);
}

.section--navy .section-header__title,
.section--teal .section-header__title {
	color: var(--c-white);
}

.section-header__body {
	font-size: var(--t-body);
	color: var(--c-charcoal);
	max-width: 58ch;
	line-height: 1.8;
}

.section--navy .section-header__body {
	color: rgba(255, 255, 255, 0.75);
}

/* 11. Hero ------------------------------------------------- */
.page-hero {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--c-navy);
}

/* News & Contact heroes — more compact (~⅔ of the standard height). */
.humboldt-page--news .page-hero,
.humboldt-page--contact .page-hero {
	min-height: 37vh;
}

.humboldt-page--news .page-hero__inner,
.humboldt-page--contact .page-hero__inner {
	padding-block: var(--sp-lg);
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.15) 100%
	);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--sp-xl);
}

.page-hero__eyebrow {
	display: block;
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	font-weight: 500;
	color: var(--c-orange-light);
	letter-spacing: 0.02em;
	margin-block-end: var(--sp-sm);
}

.page-hero--wwd .page-hero__eyebrow {
	color: var(--c-white);
}

.page-hero__title {
	font-family: var(--f-heading);
	font-size: var(--t-hero);
	font-weight: 600;
	color: var(--c-white);
	margin-block-end: var(--sp-sm);
	max-width: 20ch;
	line-height: 1.1;
}

.page-hero__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: rgba(255, 255, 255, 0.8);
	max-width: 42ch;
	line-height: 1.45;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
}

/* 12. Tags / product pills --------------------------------- */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}

.tag {
	font-family: var(--f-condensed);
	font-size: var(--t-tag);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius);
}

.tag--teal    { color: var(--c-teal-pale); }
.tag--orange  { color: var(--c-orange); }
.tag--cream   { color: var(--c-cream); }
.tag--slate   { color: var(--c-teal-lightest); }
.tag--peach   { color: var(--c-peach); }

/* 13. Testimonial ------------------------------------------ */
.testimonial-block {
	padding: var(--sp-lg);
}

.testimonial-block__quote {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	font-style: italic;
	color: var(--c-orange-light);
	line-height: 1.5;
	margin-block-end: var(--sp-sm);
}

.testimonial-block__quote::before {
	content: '\201C';
	font-size: 2.5em;
	line-height: 0;
	vertical-align: -0.35em;
	color: var(--c-orange);
	margin-inline-end: 0.05em;
}

.testimonial-block__author {
	font-family: var(--f-condensed);
	font-size: var(--t-tag);
	color: var(--c-orange);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* 14. Post card (index / archive) -------------------------- */
.post-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--c-white);
	transition: box-shadow var(--transition), transform var(--transition);
}

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

.post-card__image-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.post-card:hover .post-card__image {
	transform: scale(1.04);
}

.post-card__body {
	padding: var(--sp-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-card__date {
	font-family: var(--f-condensed);
	font-size: var(--t-tag);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-teal-pale);
	margin-block-end: var(--sp-xs);
}

.post-card__title {
	font-size: 1.25rem;
	margin-block-end: var(--sp-xs);
}

.post-card__title a {
	color: var(--c-navy);
	transition: color var(--transition);
}

.post-card__title a:hover {
	color: var(--c-teal);
}

.post-card__excerpt {
	font-size: var(--t-small);
	color: var(--c-charcoal);
	flex: 1;
	margin-block-end: var(--sp-sm);
}

/* 15. Pagination ------------------------------------------- */
.pagination {
	margin-block-start: var(--sp-lg);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
	justify-content: center;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--sp-xs);
	border-radius: var(--radius);
	font-family: var(--f-heading);
	font-size: var(--t-tag);
	font-weight: 600;
	color: var(--c-navy);
	border: 2px solid rgba(31, 54, 89, 0.15);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: var(--c-white);
}

/* 16. WP core alignment fixes ------------------------------ */
.wp-block-image img {
	border-radius: var(--radius-lg);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignwide {
	max-width: min(calc(var(--container) + 200px), 100%);
	margin-inline: auto;
}

/* 17. Utilities --------------------------------------------- */
.text-teal   { color: var(--c-teal); }
.text-orange { color: var(--c-orange); }
.text-navy   { color: var(--c-navy); }
.text-white  { color: var(--c-white); }
.text-center { text-align: center; }
.text-condensed { font-family: var(--f-condensed); }

.mt-sm  { margin-block-start: var(--sp-sm); }
.mt-md  { margin-block-start: var(--sp-md); }
.mt-lg  { margin-block-start: var(--sp-lg); }
.mb-sm  { margin-block-end: var(--sp-sm); }
.mb-md  { margin-block-end: var(--sp-md); }
.mb-lg  { margin-block-end: var(--sp-lg); }

.no-results {
	font-size: var(--t-lead);
	color: var(--c-gray);
	padding-block: var(--sp-xl);
	text-align: center;
}

/* 18. Homepage ---------------------------------------------- */

/* Hero */
.home-hero {
	position: relative;
	height: 58vh;
	min-height: 58vh;
	display: flex;
	flex-direction: column;
	background-color: var(--c-navy);
}

.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(31, 54, 89, 0.93) 0%,
		rgba(31, 54, 89, 0.68) 50%,
		rgba(31, 54, 89, 0.42) 100%
	);
}

.home-hero__body {
	position: relative;
	z-index: 1;
	flex: 1;
	padding-block-start: var(--sp-xl);
	padding-block-end: var(--sp-lg);
	display: flex;
	flex-direction: column;
}

.home-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 820px;
}

.home-hero__title {
	font-size: var(--t-hero);
	font-weight: 600;
	color: var(--c-white);
	line-height: 1.1;
	margin-block-end: var(--sp-sm);
	max-width: 20ch;
}

.home-hero__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: var(--c-orange-light);
	line-height: 1.5;
	margin-block-end: 0;
}

.home-hero__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sp-sm);
	align-items: center;
	padding-block-start: var(--sp-md);
}

@media (max-width: 600px) {
	.home-hero {
		height: 100svh;
		min-height: 100svh;
	}

	.home-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.home-hero__actions .btn {
		text-align: center;
		justify-content: center;
	}
}

/* Stats strip */
.home-stats {
	background: var(--c-navy);
	padding-block: var(--sp-sm);
}

.home-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sp-sm);
}

.home-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
	padding: var(--sp-sm);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
}

.home-stat:last-child {
	border-inline-end: none;
}

.home-stat__number {
	font-family: var(--f-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--c-teal);
	line-height: 1;
}

.home-stat__number sup {
	font-size: 0.55em;
	font-weight: 600;
	vertical-align: top;
	line-height: 1.8;
}

.home-stat__label {
	font-family: var(--f-condensed);
	font-size: var(--t-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
	.home-stats__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.home-stat:nth-child(3) {
		border-inline-end: none;
	}
}

@media (max-width: 480px) {
	.home-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-stat {
		border-inline-end: none;
		border-block-end: 1px solid rgba(255, 255, 255, 0.08);
	}

	.home-stat:nth-child(even) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
	}

	.home-stat:last-child {
		border-block-end: none;
	}
}

/* Feature cards */
.home-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-md);
	margin-block-end: var(--sp-lg);
}

.home-feature-card {
	padding: var(--sp-md);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(31, 54, 89, 0.08);
	background: var(--c-white);
	transition: box-shadow var(--transition), transform var(--transition);
}

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

.home-feature-card__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-lg);
	background: var(--c-teal-lightest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-teal);
	margin-block-end: var(--sp-sm);
}

.icon--feature {
	width: 28px;
	height: 28px;
}

.home-feature-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--c-navy);
	margin-block-end: var(--sp-xs);
	line-height: 1.35;
}

.home-feature-card__desc {
	font-size: var(--t-small);
	color: var(--c-charcoal);
	line-height: 1.75;
	margin: 0;
}

.home-features__cta {
	text-align: center;
}

/* Swap bg-shapes colours: cream section bg, white band */
.has-bg-shapes .home-features {
	--bg-fill: var(--c-white);
	--bg-op: 0.8;
}

@media (max-width: 900px) {
	.home-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.home-features__grid {
		grid-template-columns: 1fr;
	}
}

/* Brand statement */
.home-statement {
	text-align: left;
}

.home-statement__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-xl);
	align-items: center;
}

.home-statement__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.home-statement__quote {
	font-family: var(--f-heading);
	font-size: var(--t-h1);
	font-weight: 600;
	color: var(--c-white);
	line-height: 1.15;
	margin-block-end: var(--sp-md);
}

.home-statement__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: var(--c-cream);
	line-height: 1.65;
	margin: 0;
}

/* Mini product cards in home statement */
.home-statement__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-prod-card {
	--accent: var(--c-teal);
	min-width: 0;
	background: var(--c-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	padding: var(--sp-sm);
	transition: box-shadow 200ms ease, transform 200ms ease;
}

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

.home-prod-card--teal   { --accent: var(--c-teal); }
.home-prod-card--orange { --accent: var(--c-orange); }
.home-prod-card--peach  { --accent: var(--c-peach); }
.home-prod-card--slate  { --accent: var(--c-slate); }

.home-prod-card__title {
	font-family: var(--f-heading);
	font-size: var(--t-body);
	font-weight: 700;
	color: var(--c-navy) !important;
	margin: 0 0 var(--sp-xs);
	line-height: 1.3;
}

.home-prod-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-prod-card__tag {
	font-family: var(--f-body);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--c-navy);
	background: var(--c-off-white);
	border: 1px solid rgba(31, 54, 89, 0.1);
	border-radius: var(--radius);
	padding: 2px 6px;
}

/* 5–6 categories: the original 2×2 block stays as-is (cards 1–4) and
   cards 5–6 form a third column on the right. The text side narrows
   so the cards keep a usable width. */
.home-statement__inner--wide {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--sp-lg);
}

.home-statement__cards--3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-statement__cards--3col > :nth-child(5) { grid-column: 3; grid-row: 1; }
.home-statement__cards--3col > :nth-child(6) { grid-column: 3; grid-row: 2; }

@media (max-width: 960px) {
	.home-statement__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.home-statement__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.home-statement__text .btn {
		white-space: normal;
		text-align: center;
		max-width: 100%;
	}
}

/* Too narrow for 3 columns — fall back to a simple 2-up flow in order. */
@media (max-width: 700px) {
	.home-statement__cards--3col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.home-statement__cards--3col > :nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 480px) {
	.home-statement__cards,
	.home-statement__cards--3col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* About teaser */
.home-about__split {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--sp-xl);
	align-items: center;
}

.home-about__media {
	overflow: hidden;
	border-radius: var(--radius-xl);
}

.home-about__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-xl);
	transition: transform 0.4s ease;
}

.home-about__media:hover .home-about__img {
	transform: scale(1.04);
}

.home-about__content {
	display: flex;
	flex-direction: column;
}

.home-about__content h2 {
	margin-block: var(--sp-xs) var(--sp-sm);
}

.home-about__excerpt {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--c-charcoal);
	margin: 0;
}

@media (max-width: 768px) {
	.home-about__split {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}

	.home-about__img {
		aspect-ratio: 16 / 7;
	}
}

/* Products CTA banner */
.home-products-banner {
	position: relative;
	background-color: var(--c-navy);
}

.home-products-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 184, 196, 0.9);
}

.home-products-banner__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--sp-xl);
	text-align: center;
}

.home-products-banner__title {
	font-size: var(--t-h2);
	color: var(--c-white);
	margin-block-end: var(--sp-sm);
}

.home-products-banner__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: rgba(255, 255, 255, 0.88);
	max-width: 52ch;
	margin-inline: auto;
	margin-block-end: var(--sp-md);
	line-height: 1.5;
}

/* Testimonials */
.home-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-md);
}

.testimonial-card {
	background: var(--c-white);
	border-radius: var(--radius-lg);
	padding: var(--sp-md);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	transition: box-shadow 200ms ease, transform 200ms ease;
}

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

.home-testimonials .testimonial-card {
	border-left: 4px solid var(--c-teal);
}

.why-testimonials .testimonial-card {
	border-top: 3px solid var(--c-orange);
}

.testimonial-card__quote {
	font-family: var(--f-condensed);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--c-charcoal);
	line-height: 1.65;
	flex: 1;
	margin: 0;
}

.testimonial-card__quote::before {
	content: '\201C';
	font-size: 2.5rem;
	line-height: 0;
	vertical-align: -0.3em;
	color: var(--c-orange-light);
	margin-inline-end: 0.05em;
}

.testimonial-card__footer {
	border-top: 1px solid rgba(31, 54, 89, 0.08);
	padding-block-start: var(--sp-sm);
}

.testimonial-card__author {
	font-family: var(--f-condensed);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-orange);
	font-style: normal;
}

@media (max-width: 900px) {
	.home-testimonials__grid {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin-inline: auto;
	}
}

/* Service pillars */
.home-pillars {
	padding-block: var(--sp-lg);
}

.home-pillars__list {
	display: flex;
	justify-content: center;
	gap: var(--sp-xl);
	flex-wrap: wrap;
}

.home-pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-xs);
	text-align: center;
}

.home-pillar span {
	font-family: var(--f-heading);
	font-size: var(--t-tag);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-white);
}

.icon--pillar {
	width: 34px;
	height: 34px;
	color: var(--c-teal);
}

@media (max-width: 600px) {
	.home-pillars__list {
		gap: var(--sp-lg);
		justify-content: flex-start;
	}
}

/* 19. Inner page templates ---------------------------------- */

/* Entry content (the_content() output) */
.entry-content > * + * {
	margin-block-start: var(--sp-sm);
}

.entry-content h2 {
	font-size: var(--t-h2);
	color: var(--c-navy);
	margin-block-start: var(--sp-lg);
}

.entry-content h3 {
	font-size: var(--t-h3);
	color: var(--c-navy);
	margin-block-start: var(--sp-md);
}

.entry-content p {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--c-charcoal);
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: var(--sp-md);
	list-style: disc;
}

.entry-content li {
	margin-block-end: var(--sp-xs);
}

/* Shared inner CTA banner */
.inner-cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-lg);
	flex-wrap: wrap;
}

.inner-cta-banner__title {
	font-size: var(--t-h2);
	color: var(--c-white);
	margin-block-end: var(--sp-xs);
}

.inner-cta-banner__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

@media (max-width: 768px) {
	.inner-cta-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Who We Are ────────────────────────────────────────────── */
.about-story__split {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--sp-xl);
	align-items: start;
}

.about-story__content h2 {
	margin-block: var(--sp-xs) var(--sp-sm);
}

.about-story__media {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-md));
}

.about-story__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.about-story__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
	transition: transform 0.4s ease;
}

.about-story__media:hover .about-story__img {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.about-story__split {
		grid-template-columns: 1fr;
	}

	.about-story__media {
		position: static;
	}
}

/* What We Believe */
.about-belief {
	text-align: center;
}

/* Always use teal for the bg-shapes band regardless of page accent setting */
.has-bg-shapes .about-belief {
	--bg-fill: var(--c-teal);
}

.about-belief__inner {
	max-width: 780px;
	margin-inline: auto;
}

.about-belief__inner .section-header__eyebrow {
	color: var(--c-cream);
}

.about-belief__inner h2 {
	color: var(--c-cream);
	margin-block: 0 var(--sp-md);
}

.about-belief__body {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.65;
	margin: 0;
}

/* Team & Network */
.about-network__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

.about-network__split h2 {
	margin-block: 0 var(--sp-sm);
}

.about-network__split p {
	font-size: 1.0625rem;
	line-height: 1.85;
	margin-block-end: var(--sp-sm);
}

.about-network__countries {
	padding-block-start: var(--sp-md);
}

.about-network__label {
	font-family: var(--f-heading);
	font-size: var(--t-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-blue-mid);
	margin-block-end: var(--sp-sm);
}

.country-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}

.country-pill {
	font-family: var(--f-heading);
	font-size: var(--t-nav);
	font-weight: 600;
	padding: 0.5rem var(--sp-sm);
	border-radius: var(--radius);
	background: var(--c-teal-lightest);
	color: var(--c-navy);
	letter-spacing: 0.04em;
}

@media (max-width: 768px) {
	.about-network__split {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}
}

/* Why Choose Us teaser CTA at bottom of Who We Are */
.about-why-cta {
	position: relative;
	background: var(--c-navy);
}

.about-why-cta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 54, 89, 0.88);
}

.about-why-cta__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--sp-xl);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-lg);
	flex-wrap: wrap;
}

.about-why-cta__content h2 {
	color: var(--c-white);
	font-size: var(--t-h2);
	margin-block-end: var(--sp-xs);
	max-width: 22ch;
}

.about-why-cta__content p {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: rgba(255, 255, 255, 0.75);
	max-width: 44ch;
	margin: 0;
}

@media (max-width: 768px) {
	.about-why-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── What We Do ─────────────────────────────────────────────── */
.service-section {
	padding-block: var(--sp-xl);
	background: var(--c-white);
}

.service-section--dark {
	background: var(--c-navy);
}

.service-section__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

.service-section__eyebrow {
	font-family: var(--f-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--c-teal);
	display: block;
	margin-block-end: var(--sp-sm);
}

.service-section--dark .service-section__eyebrow {
	color: var(--c-teal-light);
}

.service-section__icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-teal);
	margin-block-end: var(--sp-sm);
}

.service-section:not(.service-section--dark) .service-section__icon {
	background: var(--c-teal-lightest);
}

.icon--service {
	width: 32px;
	height: 32px;
}

.service-section__title {
	font-size: var(--t-h2);
	margin-block-end: var(--sp-sm);
}

.service-section--dark .service-section__title {
	color: var(--c-white);
}

.service-section__sub {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	line-height: 1.55;
	margin-block-end: var(--sp-md);
}

.service-section--dark .service-section__sub {
	color: rgba(255, 255, 255, 0.8);
}

/* Process steps (Source → Test → Approve) */
.service-process {
	display: flex;
	gap: var(--sp-sm);
	align-items: center;
	flex-wrap: wrap;
	margin-block-end: var(--sp-md);
	counter-reset: process;
}

.service-process__step {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
	font-family: var(--f-heading);
	font-size: var(--t-nav);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-navy);
}

.service-process__step::before {
	content: counter(process, decimal-leading-zero);
	counter-increment: process;
	font-size: var(--t-small);
	color: var(--c-teal);
}

.service-process__step + .service-process__step::before {
	margin-inline-start: var(--sp-sm);
}

.service-section__tags {
	align-self: center;
}

.service-section--dark .service-section__tags .tag {
	background: rgba(255, 255, 255, 0.07);
}

.service-section:not(.service-section--dark) .service-section__tags .tag {
	background: var(--c-off-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
}

@media (max-width: 768px) {
	.service-section__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}
}

/* ── Service card grid (What We Do) ─────────────────────────── */
.service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-card {
	--accent: var(--c-teal);
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: var(--sp-md);
	transition: box-shadow 200ms ease, transform 200ms ease;
}

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

.service-card--teal   { --accent: var(--c-teal); }
.service-card--orange { --accent: var(--c-orange); }
.service-card--peach  { --accent: var(--c-peach); }
.service-card--slate  { --accent: var(--c-slate); }

/* Override section--navy heading colour so title stays navy on white card */
.service-card__title {
	font-size: var(--t-h3);
	color: var(--c-navy) !important;
	margin-block-end: var(--sp-sm);
	line-height: 1.25;
}

.service-card__body {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--c-charcoal);
	margin: 0 0 var(--sp-md);
}

.service-card__process {
	margin-block-end: var(--sp-md);
}

.service-card__process .service-process__step {
	color: var(--c-navy);
}

.service-card__tags {
	margin-block-start: auto;
	padding-block-start: var(--sp-md);
	border-top: 1px solid rgba(31, 54, 89, 0.08);
}

.service-card .tag {
	background: var(--c-off-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
	color: var(--c-navy);
}

@media (prefers-reduced-motion: reduce) {
	.service-card { transition: none; }
	.service-card:hover { transform: none; }
}

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

/* ── Why Choose Us ──────────────────────────────────────────── */
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-md);
}

.why-card {
	padding: var(--sp-md);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(31, 54, 89, 0.08);
	background: var(--c-white);
	transition: box-shadow var(--transition), transform var(--transition);
}

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

.why-card__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-lg);
	background: var(--c-teal-lightest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-teal);
	margin-block-end: var(--sp-sm);
}

.icon--why {
	width: 28px;
	height: 28px;
}

.why-card__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-navy);
	margin-block-end: var(--sp-xs);
	line-height: 1.3;
}

.why-card__body {
	font-size: var(--t-small);
	color: var(--c-charcoal);
	line-height: 1.8;
	margin: 0;
}

@media (max-width: 768px) {
	.why-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

/* ── Our Products ───────────────────────────────────────────── */
.products {
	background: var(--c-off-white);
}

.product-rows {
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-row {
	--accent: var(--c-teal);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--c-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.product-row:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

/* Alternate media/content sides on every second row */
.product-row:nth-child(even) .product-row__media   { order: 2; }
.product-row:nth-child(even) .product-row__content { order: 1; }

.product-row--no-image {
	grid-template-columns: 1fr;
}

.product-row--teal   { --accent: var(--c-teal); }
.product-row--orange { --accent: var(--c-orange); }
.product-row--peach  { --accent: var(--c-peach); }
.product-row--slate  { --accent: var(--c-slate); }

.product-row__media {
	position: relative;
	overflow: hidden;
	min-height: 280px;
}

.product-row__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.product-row:hover .product-row__img {
	transform: scale(1.04);
}

.product-row__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-lg);
}

.product-row__title {
	font-size: var(--t-h3);
	color: var(--c-navy);
	margin-block-end: var(--sp-sm);
}

.product-row__body {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--c-charcoal);
	margin: 0;
}

.product-row__tags-wrap {
	margin-block-start: var(--sp-md);
	padding-block-start: var(--sp-md);
	border-top: 1px solid rgba(31, 54, 89, 0.08);
}

.product-row__tags-label {
	font-family: var(--f-heading);
	font-size: var(--t-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-blue-mid);
	margin-block-end: var(--sp-sm);
}

.product-row .product-tags .tag {
	background: var(--c-off-white);
	border: 1px solid rgba(31, 54, 89, 0.08);
	color: var(--c-navy);
}

@media (prefers-reduced-motion: reduce) {
	.product-row { transition: none; }
	.product-row:hover { transform: none; }
	.product-row__img { transition: none; }
}

@media (max-width: 768px) {
	.product-row,
	.product-row:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.product-row:nth-child(even) .product-row__media,
	.product-row:nth-child(even) .product-row__content {
		order: initial;
	}

	.product-row__media {
		min-height: 220px;
	}
}

/* Private label note strip */
.products-note__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	padding-block: var(--sp-sm);
	flex-wrap: wrap;
}

.products-note__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--c-teal-lightest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-teal);
}

.icon--note {
	width: 24px;
	height: 24px;
}

.products-note__text {
	flex: 1;
	margin: 0;
	min-width: 200px;
}

.products-note__heading {
	font-size: var(--t-h3);
	color: var(--c-navy);
	margin: 0 0 var(--sp-xs);
	line-height: 1.25;
}

.products-note__body {
	font-size: var(--t-small);
	color: var(--c-charcoal);
	line-height: 1.7;
	margin: 0;
}

/* 20. News — Archive ---------------------------------------- */
.news-archive {
	background: var(--c-off-white);
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-md);
	margin-block-end: var(--sp-lg);
}

@media (max-width: 900px) {
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.news-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-inline: auto;
	}
}

.news-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-white);
	box-shadow: var(--shadow);
	transition: box-shadow var(--transition), transform var(--transition);
}

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

.news-card__thumb-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.news-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.news-card:hover .news-card__thumb {
	transform: scale(1.04);
}

.news-card__body {
	padding: var(--sp-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.news-card__date {
	font-family: var(--f-condensed);
	font-size: var(--t-tag);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-teal-pale);
	display: block;
	margin-block-end: var(--sp-xs);
}

.news-card__title {
	font-size: clamp(1.1rem, 2vw, 1.375rem);
	font-weight: 600;
	line-height: 1.3;
	margin-block-end: var(--sp-xs);
	flex: 1;
	color: var(--c-blue-mid);
}

.news-card__title a {
	color: var(--c-blue-mid);
	transition: color var(--transition);
}

.news-card__title a:hover {
	color: var(--c-teal);
}

.news-card__excerpt {
	font-size: var(--t-small);
	color: var(--c-charcoal);
	line-height: 1.75;
	margin-block-end: var(--sp-sm);
}

.news-card__read-more {
	font-family: var(--f-heading);
	font-size: var(--t-tag);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-teal);
	transition: color var(--transition);
	margin-block-start: auto;
}

.news-card__read-more:hover {
	color: var(--c-navy);
}

/* Featured (most recent) card */
.news-feature {
	background: var(--c-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-block-end: var(--sp-md);
	transition: box-shadow var(--transition);
}

.news-feature__top {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
}

.news-feature:hover {
	box-shadow: var(--shadow-lg);
}

.news-feature__thumb-link {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 260px;
}

.news-feature__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.news-feature:hover .news-feature__thumb {
	transform: scale(1.03);
}

.news-feature__body {
	padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
}

.news-feature .news-card__title {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	flex: 0 0 auto;
}

.news-feature .news-card__read-more {
	margin-block-start: var(--sp-sm);
}

/* Featured: expanded article spans the full card width (not the body column) */
.news-feature .news-card__full-inner {
	padding-inline: var(--sp-lg);
	padding-block-end: var(--sp-lg);
}

@media (max-width: 768px) {
	.news-feature__top {
		grid-template-columns: 1fr;
	}
	.news-feature__thumb-link {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.news-feature__body {
		padding: var(--sp-md);
	}
	.news-feature .news-card__full-inner {
		padding-inline: var(--sp-md);
		padding-block-end: var(--sp-md);
	}
}

/* "Latest" badge */
.news-card__badge {
	align-self: flex-start;
	font-family: var(--f-heading);
	font-size: var(--t-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-teal);
	background: var(--c-teal-lightest);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius);
	margin-block-end: var(--sp-sm);
}

/* Read-more becomes a toggle button */
.news-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	margin-block-start: auto;
}

.news-card__chev {
	transition: transform var(--transition);
}

.is-expanded .news-card__chev {
	transform: rotate(180deg);
}

/* Inline-expanding article body (animated via grid rows) */
.news-card__full {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition);
}

.news-card__full-inner {
	overflow: hidden;
	min-height: 0;
}

.news-card__full-inner.entry-content {
	padding-block-start: var(--sp-md);
	border-top: 1px solid rgba(31, 54, 89, 0.08);
}

.is-expanded .news-card__full {
	grid-template-rows: 1fr;
}

/* An expanded small card spans the full row so text has room;
   its thumbnail becomes a capped banner instead of a tall block. */
.news-grid .news-card.is-expanded {
	grid-column: 1 / -1;
	order: -1;
	scroll-margin-top: calc(var(--header-h-scrolled) + var(--sp-sm));
}

.news-grid .news-card.is-expanded .news-card__thumb-link {
	aspect-ratio: auto;
	height: 260px;
}

/* No-JS: show everything, hide the (non-functional) toggle */
html:not(.js) .news-card__full {
	grid-template-rows: 1fr;
}

html:not(.js) .news-card__read-more {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.news-card__full,
	.news-card__chev,
	.news-feature__thumb,
	.news-card__thumb {
		transition: none;
	}
}

.news-empty {
	padding-block: var(--sp-xl);
	text-align: center;
	font-size: var(--t-lead);
	color: var(--c-gray);
}

/* Honeypot — visually & semantically hidden, but not display:none
   (some bots skip display:none fields). Real users never see/fill it. */
.contact-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 21. News — Single post ------------------------------------ */
.single-hero .page-hero__title {
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	max-width: 24ch;
}

.single-hero__meta {
	margin-block-start: var(--sp-sm);
}

.single-hero__date {
	font-family: var(--f-condensed);
	font-size: var(--t-nav);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-teal-pale);
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border: 1px solid rgba(102, 212, 220, 0.35);
	border-radius: 100px;
}

.single-article {
	background: var(--c-off-white);
}

.single-article__inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--sp-xl);
	align-items: start;
}

@media (max-width: 900px) {
	.single-article__inner {
		grid-template-columns: 1fr;
	}
}

/* "Our Take" pull-quote block */
.our-take {
	background: var(--c-navy);
	border-radius: var(--radius-lg);
	padding: var(--sp-md) var(--sp-lg);
	margin-block-end: var(--sp-lg);
	position: relative;
}

.our-take__label {
	display: block;
	font-family: var(--f-condensed);
	font-size: var(--t-tag);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-teal);
	margin-block-end: var(--sp-xs);
}

.our-take__quote {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	font-style: italic;
	color: var(--c-white);
	line-height: 1.6;
	margin: 0;
}

.our-take__quote::before {
	content: '\201C';
	font-size: 2em;
	line-height: 0;
	vertical-align: -0.3em;
	color: var(--c-teal);
	margin-inline-end: 0.05em;
}

/* Sidebar */
.single-article__sidebar {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-md));
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
}

.back-to-news {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	font-family: var(--f-heading);
	font-size: var(--t-tag);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-navy);
	transition: color var(--transition);
}

.back-to-news:hover {
	color: var(--c-teal);
}

.icon--back {
	width: 18px;
	height: 18px;
	transform: rotate(180deg);
}

.sidebar-related__title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-blue-mid);
	margin-block-end: var(--sp-sm);
}

.sidebar-related__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
}

.sidebar-related__item {
	border-block-start: 1px solid rgba(31, 54, 89, 0.1);
	padding-block-start: var(--sp-sm);
}

.sidebar-related__date {
	display: block;
	font-family: var(--f-condensed);
	font-size: var(--t-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-teal-pale);
	margin-block-end: 0.25rem;
}

.sidebar-related__link {
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--c-navy);
	line-height: 1.4;
	transition: color var(--transition);
}

.sidebar-related__link:hover {
	color: var(--c-teal);
}

/* 22. Contact page ------------------------------------------ */
.contact-split {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--sp-xl);
	align-items: start;
}

@media (max-width: 900px) {
	.contact-split {
		grid-template-columns: 1fr;
		gap: var(--sp-lg);
	}
}

.contact-info__title {
	font-size: var(--t-h2);
	color: var(--c-navy);
	margin-block: var(--sp-sm);
}

.contact-info__intro {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: var(--c-charcoal);
	line-height: 1.6;
	margin-block-end: var(--sp-lg);
}

.contact-detail-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.contact-detail {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-sm);
}

.contact-detail__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--c-teal-lightest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-teal);
}

.icon--contact {
	width: 22px;
	height: 22px;
}

.contact-detail__label {
	display: block;
	font-family: var(--f-condensed);
	font-size: var(--t-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-blue-mid);
	margin-block-end: 0.15rem;
}

.contact-detail__value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--c-navy);
	transition: color var(--transition);
}

a.contact-detail__value:hover {
	color: var(--c-teal);
}

/* Form container */
.contact-form-wrap {
	background: var(--c-white);
	border-radius: var(--radius-xl);
	padding: var(--sp-lg);
	box-shadow: var(--shadow);
}

/* Two-column form row */
.form-row {
	display: grid;
	gap: var(--sp-sm);
	margin-block-end: var(--sp-sm);
}

.form-row--2 {
	grid-template-columns: 1fr 1fr;
}

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

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: var(--sp-sm);
}

.form-row .form-field {
	margin-block-end: 0;
}

.form-field__req {
	color: var(--c-teal);
	margin-inline-start: 0.15em;
}

.form-field__textarea {
	resize: vertical;
	min-height: 9rem;
}

.contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
}

.contact-form__req-note {
	font-size: var(--t-small);
	color: var(--c-gray);
	margin: 0;
}

/* Success state */
.contact-success {
	text-align: center;
	padding: var(--sp-xl) var(--sp-lg);
}

.icon--success {
	width: 48px;
	height: 48px;
	color: var(--c-teal);
	margin-block-end: var(--sp-sm);
}

.contact-success h3 {
	color: var(--c-navy);
	margin-block-end: var(--sp-xs);
}

/* Error alert */
.contact-alert {
	background: #fff4f4;
	border: 1px solid #f5c6c6;
	border-radius: var(--radius);
	color: #c0392b;
	padding: var(--sp-sm) var(--sp-md);
	font-size: var(--t-small);
	margin-block-end: var(--sp-md);
}

/* 23. 404 page ---------------------------------------------- */
.error-404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.error-404__inner {
	text-align: center;
	padding-block: var(--sp-xl);
}

.error-404__code {
	display: block;
	font-family: var(--f-heading);
	font-size: clamp(6rem, 18vw, 14rem);
	font-weight: 700;
	color: var(--c-teal-lightest);
	line-height: 1;
	margin-block-end: var(--sp-sm);
}

.error-404__title {
	font-size: var(--t-h2);
	color: var(--c-navy);
	margin-block-end: var(--sp-sm);
}

.error-404__body {
	font-family: var(--f-condensed);
	font-size: var(--t-lead);
	color: var(--c-charcoal);
	max-width: 40ch;
	margin-inline: auto;
	margin-block-end: var(--sp-lg);
}

/* 24. Search form ------------------------------------------- */
.search-form__inner {
	display: flex;
	gap: var(--sp-xs);
	align-items: stretch;
}

.search-form__input {
	flex: 1;
}

.search-form__btn {
	flex-shrink: 0;
}

/* ============================================================
   24. Background geometry — faceted shapes echoing the logo
   ------------------------------------------------------------
   Driven by body classes added in inc/background-fields.php:
     .has-bg-shapes  → global enable (Customizer)
     .bg-style--facets|trapezoids|prism|corner|diagonal|waves|none
                     → per-page style (default varies per page)
     .bg-accent--light|teal|orange|cream|navy → per-page accent
   Intensity comes from --bg-decor-opacity (Customizer, inline).
   Per host, --bg-fill / --bg-op / --bg-z select colour, strength
   and stacking. Blue/dark bands get the accent; ALL light sections
   get a warm gold; heroes layer the shape OVER their photo (with
   the hero text bumped above it). Static (no motion).
   ============================================================ */

body {
	--bg-accent: #ffffff;             /* "light" plane on dark/blue bands */
	--bg-accent-light: var(--c-gold); /* warm gold on white/cream bands */
	--bg-decor-opacity: 0.07;
}

body.bg-accent--teal   { --bg-accent: var(--c-teal); }
body.bg-accent--orange { --bg-accent: var(--c-orange); }
body.bg-accent--cream  { --bg-accent: var(--c-cream); }
body.bg-accent--navy   { --bg-accent: var(--c-navy); }

/* Light hosts — EVERY light section, warm gold, behind content.
   (Heavier multiplier so gold actually reads on white.) */
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed)
	:is(.section, .section--off-white, .section--cream, .service-section) {
	position: relative;
	isolation: isolate;
	--bg-fill: var(--bg-accent-light);
	--bg-op: calc(var(--bg-decor-opacity) * 3.6);
	--bg-z: -1;
}

/* Blue/dark hosts override the light defaults with the accent. */
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed)
	:is(.section--navy, .section--teal, .service-section--dark) {
	position: relative;
	isolation: isolate;
	--bg-fill: var(--bg-accent);
	--bg-op: var(--bg-decor-opacity);
	--bg-z: -1;
}

/* Heroes — accent fill, shape layered ABOVE the background image. */
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed) :is(.page-hero, .home-hero) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--bg-fill: var(--bg-accent);
	/* Heroes sit on navy / a dark photo overlay, so the shape needs more punch. */
	--bg-op: calc(var(--bg-decor-opacity) * 2.6);
	--bg-z: 1;
}

/* On a navy-accent page the shape would be navy-on-navy on the hero — use a
   light fill there so it stays visible (the bands keep the navy accent). */
.has-bg-shapes.bg-accent--navy :is(.page-hero, .home-hero) {
	--bg-fill: var(--c-teal-light);
}

/* Keep the hero text above the shapes (which now sit over the photo). */
.has-bg-shapes :is(.page-hero__inner, .home-hero__body) {
	position: relative;
	z-index: 2;
}

/* Photos need more punch for the shape to read over them. */
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed) :is(.page-hero:has(.page-hero__bg), .home-hero:has(.home-hero__bg)) {
	--bg-op: calc(var(--bg-decor-opacity) * 3);
}

/* Shared pseudo base (0-size until a style gives it geometry). */
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed)
	:is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before,
.has-bg-shapes:is(.bg-style--facets, .bg-style--trapezoids, .bg-style--prism, .bg-style--corner, .bg-style--diagonal, .bg-style--waves, .bg-style--mixed)
	:is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	content: "";
	position: absolute;
	z-index: var(--bg-z, -1);
	pointer-events: none;
	background: var(--bg-fill, #fff);
	opacity: var(--bg-op, 0.07);
}

/* ── FACETS (main): two triangular planes on a TR→BL "/" axis ── */
.has-bg-shapes.bg-style--facets :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	top: 0;
	left: 0;
	width: 62%;
	height: 80%;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.has-bg-shapes.bg-style--facets :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	right: 0;
	bottom: 0;
	width: 55%;
	height: 72%;
	clip-path: polygon(100% 100%, 0 100%, 100% 0);
	opacity: calc(var(--bg-op) * 0.7);
}

/* ── TRAPEZOIDS: top & bottom trapezium planes (logo facets) ──── */
.has-bg-shapes.bg-style--trapezoids :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	inset: 0;
	clip-path: polygon(0 0, 100% 0, 100% 26%, 0 64%);
}
.has-bg-shapes.bg-style--trapezoids :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	inset: 0;
	clip-path: polygon(0 92%, 100% 74%, 100% 100%, 0 100%);
	opacity: calc(var(--bg-op) * 0.7);
}

/* ── PRISM: two opposing triangles meeting (mixed "/" + "\") ──── */
.has-bg-shapes.bg-style--prism :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	inset: 0;
	clip-path: polygon(0 0, 55% 0, 0 100%);
}
.has-bg-shapes.bg-style--prism :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	inset: 0;
	clip-path: polygon(100% 0, 45% 0, 100% 100%);
	opacity: calc(var(--bg-op) * 0.85);
}

/* ── CORNER: a single bold wedge in the top-right ("\" edge) ──── */
.has-bg-shapes.bg-style--corner :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	top: 0;
	right: 0;
	width: 58%;
	height: 68%;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.has-bg-shapes.bg-style--corner :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	display: none;
}

/* ── DIAGONAL: fine "/" lines across the band ───────────────── */
.has-bg-shapes.bg-style--diagonal :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent 0 46px,
		var(--bg-fill) 46px 48px
	);
}
.has-bg-shapes.bg-style--diagonal :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	display: none;
}

/* ── WAVES: the logo's wave motif along the bottom ──────────── */
.has-bg-shapes.bg-style--waves :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: 28px;
	background: var(--bg-fill);
	opacity: calc(var(--bg-op) * 1.6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='24'%20viewBox='0%200%20120%2024'%3E%3Cpath%20d='M0%2012%20Q%2015%202%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012'%20fill='none'%20stroke='black'%20stroke-width='3'/%3E%3C/svg%3E") repeat-x center / 120px 24px;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='24'%20viewBox='0%200%20120%2024'%3E%3Cpath%20d='M0%2012%20Q%2015%202%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012'%20fill='none'%20stroke='black'%20stroke-width='3'/%3E%3C/svg%3E") repeat-x center / 120px 24px;
}
.has-bg-shapes.bg-style--waves :is(.page-hero, .home-hero, .section, .section--navy, .section--teal, .section--off-white, .section--cream, .service-section)::before {
	display: none;
}


/* ── MIXED: a curated rotation of shapes across a page's sections ─
   Each consecutive <section> gets a different facet, so a page reads as a
   varied set rather than one repeated motif. Colour still follows the
   section (gold on light, accent on blue); only the shape rotates. */
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+1):not(.page-hero):not(.home-hero)::before {
	top: 0; left: 0; width: 62%; height: 80%;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+1):not(.page-hero):not(.home-hero)::after {
	right: 0; bottom: 0; width: 55%; height: 72%;
	clip-path: polygon(100% 100%, 0 100%, 100% 0);
	opacity: calc(var(--bg-op) * 0.7);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+2)::before {
	inset: 0; clip-path: polygon(0 0, 100% 0, 100% 26%, 0 64%);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+2)::after {
	inset: 0; clip-path: polygon(0 92%, 100% 74%, 100% 100%, 0 100%);
	opacity: calc(var(--bg-op) * 0.7);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+3)::before {
	inset: 0; clip-path: polygon(0 0, 55% 0, 0 100%);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+3)::after {
	inset: 0; clip-path: polygon(100% 0, 45% 0, 100% 100%);
	opacity: calc(var(--bg-op) * 0.85);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+4)::before {
	top: 0; right: 0; width: 58%; height: 68%;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.has-bg-shapes.bg-style--mixed main > section:nth-of-type(4n+4)::after {
	display: none;
}

/* ── Per-page HERO shape (mixed mode) so the hero differs per page ─
   The hero is excluded from the section rotation above; its shape comes
   from the .bg-hero--* body class (set per slug in background-fields.php). */
.has-bg-shapes.bg-style--mixed.bg-hero--facets :is(.page-hero, .home-hero)::before {
	top: 0; left: 0; width: 62%; height: 80%;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.has-bg-shapes.bg-style--mixed.bg-hero--facets :is(.page-hero, .home-hero)::after {
	right: 0; bottom: 0; width: 55%; height: 72%;
	clip-path: polygon(100% 100%, 0 100%, 100% 0);
	opacity: calc(var(--bg-op) * 0.7);
}
.has-bg-shapes.bg-style--mixed.bg-hero--trapezoids :is(.page-hero, .home-hero)::before {
	inset: 0; clip-path: polygon(0 0, 100% 0, 100% 26%, 0 64%);
}
.has-bg-shapes.bg-style--mixed.bg-hero--trapezoids :is(.page-hero, .home-hero)::after {
	inset: 0; clip-path: polygon(0 92%, 100% 74%, 100% 100%, 0 100%);
	opacity: calc(var(--bg-op) * 0.7);
}
.has-bg-shapes.bg-style--mixed.bg-hero--prism :is(.page-hero, .home-hero)::before {
	inset: 0; clip-path: polygon(0 0, 55% 0, 0 100%);
}
.has-bg-shapes.bg-style--mixed.bg-hero--prism :is(.page-hero, .home-hero)::after {
	inset: 0; clip-path: polygon(100% 0, 45% 0, 100% 100%);
	opacity: calc(var(--bg-op) * 0.85);
}
.has-bg-shapes.bg-style--mixed.bg-hero--corner :is(.page-hero, .home-hero)::before {
	top: 0; right: 0; width: 58%; height: 68%;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.has-bg-shapes.bg-style--mixed.bg-hero--corner :is(.page-hero, .home-hero)::after {
	display: none;
}

/* Opt a single section out of the shapes entirely (keeps its colour). */
.bg-no-shapes::before,
.bg-no-shapes::after {
	display: none !important;
}