/* ==========================================================================
   SEES theme — main stylesheet
   All colours, fonts and type sizes come from the tokens in :root.
   Logical properties (inline/block) are used so rtl.css stays small.
   ========================================================================== */

/* ---------- Fonts (self-hosted woff2, SIL OFL) ---------- */
/* Plus Jakarta Sans — variable Latin subset, one file covers 400–800. */
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic — Arabic subset */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* IBM Plex Sans Arabic — Latin subset (digits, emails, brand names on Arabic pages) */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-latin-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	/* Brand colours (guidelines — do not alter) */
	--c-navy: #0e2032;
	--c-petrol: #005b7a;
	--c-green: #84c666;
	--c-ink: #0e1a28;

	/* Official tints (80 / 60 / 40 / 20 % on white) */
	--c-navy-80: #3e4d5b;   --c-navy-60: #6e7984;   --c-navy-40: #9fa6ad;   --c-navy-20: #cfd2d6;
	--c-petrol-80: #337c95; --c-petrol-60: #669daf; --c-petrol-40: #99bdca; --c-petrol-20: #ccdee4;
	--c-green-80: #9dd185;  --c-green-60: #b5dda3;  --c-green-40: #cee8c2;  --c-green-20: #e6f4e0;
	--c-ink-80: #3e4853;    --c-ink-60: #6e767e;    --c-ink-40: #9fa3a9;    --c-ink-20: #cfd1d4;

	/* Web-only additions */
	--c-white: #ffffff;
	--c-teal: #14a7a2;          /* decorative only — never text on white */
	--c-bg-soft: #f4f7f9;
	--c-border: #e1e6eb;
	--c-text: #4a5866;
	--c-text-on-dark: #a9b8c6;
	--c-error: #b42318;         /* form validation (not a brand colour) */
	--c-warning-bg: #fff7e6;
	--c-warning: #7a4b00;
	--grad-brand: linear-gradient(90deg, #005b7a, #14a7a2, #84c666);

	/* Fonts */
	--font-en: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--font-ar: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;

	/* Layout */
	--container: 1360px;
	--gutter: 40px;
	--section: 110px;
	--header-h: 120px;
	--logo-h: 72px;

	/* Radius, shadow, motion */
	--r-btn: 10px;
	--r-card: 14px;
	--r-card-lg: 16px;
	--r-media: 18px;
	--r-pill: 999px;
	--shadow-hover: 0 30px 60px -28px color-mix(in srgb, var(--c-navy) 45%, transparent);
	--shadow-menu: 0 24px 60px -20px color-mix(in srgb, var(--c-navy) 35%, transparent);
	--shadow-float: drop-shadow(0 30px 40px color-mix(in srgb, var(--c-navy) 35%, transparent));
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* Type scale — English (also restores Latin metrics for English snippets on Arabic pages) */
:root,
:lang(en) {
	--fs-h1: clamp(44px, 5.6vw, 76px);   --fw-h1: 800; --lh-h1: 1.04; --ls-h1: -0.03em;
	--fs-h2: clamp(32px, 3.2vw, 44px);   --fw-h2: 800; --lh-h2: 1.12; --ls-h2: -0.02em;
	--fs-h2-sm: clamp(26px, 2.6vw, 34px); /* headings inside cards and panels */
	--fs-h3: 21px;   --fw-h3: 700; --lh-h3: 1.3;
	--fs-lead: 20px; --lh-lead: 1.55;
	--fs-body: 17px; --lh-body: 1.7;
	--fs-body-sm: 16px;
	--fs-small: 15px; --fs-meta: 14px; --lh-small: 1.5;
	--fs-eyebrow: 13px; --ls-eyebrow: 0.4em; --tt-eyebrow: uppercase;
	--ls-label: 0.2em; --tt-label: uppercase;   /* small uppercase labels */
	--fs-btn: 15px; --fs-btn-lg: 16px; --fw-btn: 600;
	--fs-stat: 24px; --fw-stat: 800;
	--fs-num: 64px; /* decorative solution numbers */
}

/* Type scale — Arabic: no uppercase, no negative tracking, taller lines */
:lang(ar) {
	--fs-h1: clamp(40px, 5vw, 68px);     --fw-h1: 700; --lh-h1: 1.3;  --ls-h1: 0;
	--fs-h2: clamp(30px, 3vw, 42px);     --fw-h2: 700; --lh-h2: 1.4;  --ls-h2: 0;
	--fs-h2-sm: clamp(26px, 2.6vw, 32px);
	--fs-h3: 21px;   --fw-h3: 600; --lh-h3: 1.5;
	--fs-lead: 21px; --lh-lead: 1.8;
	--fs-body: 18px; --lh-body: 1.9;
	--fs-body-sm: 17px;
	--fs-small: 16px; --fs-meta: 15px; --lh-small: 1.7;
	--fs-eyebrow: 14px; --ls-eyebrow: 0; --tt-eyebrow: none;
	--ls-label: 0; --tt-label: none;
	--fs-btn: 16px; --fs-btn-lg: 16px; --fw-btn: 600;
	--fs-stat: 26px; --fw-stat: 700;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
	margin: 0;
	font-family: var(--font-en);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--c-navy);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
:lang(en) { font-family: var(--font-en); }
:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--c-petrol); text-decoration: none; }
a:hover { color: var(--c-navy); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
button { font: inherit; }

/* Petrol focus ring: 7:1 on white (teal would be 2.97:1). */
:focus-visible {
	outline: 3px solid var(--c-petrol);
	outline-offset: 3px;
	border-radius: 4px;
}
.section-dark :focus-visible,
.site-footer :focus-visible,
.features :focus-visible,
.cta--photo :focus-visible,
.cta--brand :focus-visible,
.featured :focus-visible { outline-color: var(--c-green); }

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute !important;
	inset-block-start: 0;
	inset-inline-start: 0; /* anchored, so the static position can't overflow in RTL */
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--c-navy);
	color: var(--c-white);
	border-radius: var(--r-btn);
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 1000px; }
.section { padding-block: var(--section); }
.section--tight-top { padding-block-start: 80px; }
.section-band { background: var(--c-bg-soft); }
.section-dark { background: var(--c-navy); color: var(--c-white); }

/* ---------- Type roles ---------- */
.h1 {
	font-size: var(--fs-h1);
	font-weight: var(--fw-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}
.h2 {
	font-size: var(--fs-h2);
	font-weight: var(--fw-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
.section-dark .lead { color: var(--c-navy-20); }

.eyebrow {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: var(--tt-eyebrow);
	color: var(--c-text);
}
.eyebrow__line {
	flex: none;
	width: 44px;
	height: 2px;
	background: var(--c-teal);
	transform-origin: left center;
}
.eyebrow--dark { color: var(--c-text-on-dark); }
.eyebrow--dark .eyebrow__line { background: var(--c-green); }

.label {
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-label);
	text-transform: var(--tt-label);
}

.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
.prose > * + * { margin-block-start: 1em; }
.prose h2, .prose h3 { color: var(--c-navy); line-height: var(--lh-h3); margin-block-start: 1.6em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 50px;
	padding-inline: 22px;
	border: 1.5px solid transparent;
	border-radius: var(--r-btn);
	font-size: var(--fs-btn);
	font-weight: var(--fw-btn);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform .3s, background-color .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: var(--fs-btn-lg); }
/* Primary: navy + white (15.9:1). Hover petrol + white (7.0:1). */
.btn--primary { background: var(--c-navy); color: var(--c-white); }
.btn--primary:hover { background: var(--c-petrol); color: var(--c-white); }
/* Secondary: white + navy border + navy text. */
.btn--outline { background: var(--c-white); color: var(--c-navy); border-color: var(--c-navy); }
.btn--outline:hover { background: var(--c-navy); color: var(--c-white); }
/* On dark: green + ink text (8.6:1). Never white on green. */
.btn--green { background: var(--c-green); color: var(--c-ink); font-weight: 700; min-height: 54px; padding-inline: 26px; }
.btn--green:hover { background: var(--c-green-80); color: var(--c-ink); }
.btn--ghost-light { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 50%, transparent); min-height: 54px; padding-inline: 26px; }
.btn--ghost-light:hover { color: var(--c-white); border-color: var(--c-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 16px; }

.arrow .icon-arrow { transition: transform .3s; flex: none; }
.arrow:hover .icon-arrow { transform: translateX(5px); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-navy);
}

.icon-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--r-btn);
	background: transparent;
	color: var(--c-navy);
	cursor: pointer;
}
.icon-btn:hover { background: color-mix(in srgb, var(--c-navy) 6%, transparent); }

.field,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--c-navy);
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--c-navy-20);
	border-radius: var(--r-btn);
	background: var(--c-white);
	transition: border-color .25s, box-shadow .25s;
}
.wpcf7 textarea { padding-block: 14px; resize: vertical; min-height: 140px; }
.field:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--c-petrol);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-petrol) 15%, transparent);
}
/* Placeholder: navy-60 on white = 4.6:1 */
::placeholder { color: var(--c-navy-60); opacity: 1; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
}
.admin-bar .site-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { inset-block-start: 46px; } }

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding-block: 24px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: var(--logo-h); width: auto; }
.brand__logo--footer { height: 68px; }

.primary-nav { display: flex; align-items: center; }
.primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 34px;
	font-size: var(--fs-small);
	font-weight: 500;
}
.primary-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: 10px;
	color: var(--c-navy);
}
.primary-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 2px;
	height: 2px;
	background: var(--c-teal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s;
}
.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after { transform: scaleX(1); }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a { font-weight: 700; }
.primary-nav__cta,
.primary-nav__search { display: none; }

/* Soft backing keeps the tools readable over any header photo. */
.header-tools {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 4px;
	padding-inline-start: 8px;
	border-radius: var(--r-card);
	background: color-mix(in srgb, var(--c-white) 72%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lang-switch {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-meta);
	padding-inline-start: 18px;
	border-inline-start: 1px solid var(--c-navy-20);
}
.lang-switch a { color: var(--c-navy); min-height: 44px; display: inline-flex; align-items: center; }
.lang-switch a:hover { color: var(--c-petrol); }
.lang-current { font-weight: 700; }
.lang-sep { color: var(--c-navy-40); }
.header-tools__cta { box-shadow: 0 0 0 1.5px var(--c-petrol-60); }
.nav-toggle { display: none; }
.nav-toggle__close { display: none; }

.site-search { position: relative; z-index: 2; padding-block: 0 20px; }
.search-form { display: flex; gap: 10px; max-width: 640px; }
.site-search .search-form { margin-inline-start: auto; }
.search-form__input { flex: 1; }

@media (max-width: 1180px) {
	.nav-toggle { display: inline-flex; }
	.header-tools__cta { display: none; }
	.primary-nav {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px 24px 24px;
		background: var(--c-white);
		border-radius: var(--r-card);
		box-shadow: var(--shadow-menu);
	}
	.primary-nav.is-open { display: flex; }
	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--fs-body); }
	.primary-nav__list li + li { border-block-start: 1px solid var(--c-border); }
	.primary-nav__list a { display: block; padding-block: 14px; }
	.primary-nav__list a::after { display: none; }
	.primary-nav__cta { display: inline-flex; }
	.primary-nav__search .search-form { flex-direction: row; }
	.site-header.nav-open .nav-toggle__open { display: none; }
	.site-header.nav-open .nav-toggle__close { display: block; }
	.site-header__bar { position: relative; }
}

/* ==========================================================================
   Home hero — full-bleed photo, copy over a white fade, feature strip on the photo
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: clamp(640px, 52vw, 820px);
	padding-block-start: var(--header-h);
	background: var(--c-bg-soft);
}
.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}
/* White fade on the copy side + light top fade for the navigation. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--c-white) 55%, transparent) 0%, transparent 22%),
		linear-gradient(90deg,
			var(--c-white) 0%,
			color-mix(in srgb, var(--c-white) 94%, transparent) 24%,
			color-mix(in srgb, var(--c-white) 70%, transparent) 40%,
			color-mix(in srgb, var(--c-white) 15%, transparent) 58%,
			transparent 70%);
}
.hero__mark {
	position: absolute;
	z-index: 1;
	inset-inline-end: 9%;
	inset-block-start: 210px;
	width: 230px;
	filter: var(--shadow-float);
}
.hero__mark img { width: 230px; }

.hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 64px 96px;
}
.hero__eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: var(--tt-eyebrow);
	color: var(--c-text);
}
.hero__title {
	max-width: 15ch;
	font-size: var(--fs-h1);
	font-weight: var(--fw-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}
.hero__lead {
	max-width: 520px;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-text);
}
.hero .btn-row { margin-block-start: 8px; }

/* Feature strip sits on the photo. */
.features {
	position: relative;
	z-index: 2;
	margin-block-start: auto;
	background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 55%, transparent), color-mix(in srgb, var(--c-ink) 82%, transparent));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--c-white);
}
.features__list {
	max-width: 1240px;
	margin-inline: auto;
	padding: 28px var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.features__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding-inline: 16px;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-small);
}
.features__item span { max-width: 8em; }
.features__item + .features__item { border-inline-start: 1px solid color-mix(in srgb, var(--c-white) 22%, transparent); }
.features__item .icon { flex: none; }

/* ==========================================================================
   Inner page header
   ========================================================================== */
.page-header {
	position: relative;
	overflow: hidden;
	background: var(--c-bg-soft);
	padding-block-start: var(--header-h);
}
.page-header__media {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 62%;
	overflow: hidden;
}
.page-header__media img { width: 100%; height: 100%; object-fit: cover; }
.page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, var(--c-white) 0%, var(--c-white) 36%, color-mix(in srgb, var(--c-white) 85%, transparent) 47%, transparent 72%);
}
.page-header__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-block: 72px 110px;
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-meta); color: var(--c-text); }
.breadcrumb a { color: var(--c-text); }
.breadcrumb a:hover { color: var(--c-navy); }
.breadcrumb [aria-current] { color: var(--c-navy); font-weight: 600; }
.page-header__title {
	max-width: 760px;
	font-size: var(--fs-h1);
	font-weight: var(--fw-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}
.page-header__lead { max-width: 540px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text); }
.page-header__secondary { font-size: var(--fs-lead); color: var(--c-petrol); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 16px;
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--c-navy);
	background: var(--c-white);
	border: 1px solid var(--c-navy-20);
	border-radius: var(--r-pill);
	transition: background-color .3s, color .3s, border-color .3s;
}
.chip:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* ---------- Section heads ---------- */
.section-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
	margin-block-end: 52px;
}
.section-head--split {
	max-width: none;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
}
.section-head__text { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }

/* ==========================================================================
   Grids & cards
   ========================================================================== */
.grid { display: grid; gap: 22px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--values { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--projects { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 28px; }

.lift { transition: transform .4s var(--ease), box-shadow .4s; }
.lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

.zoomimg { overflow: hidden; }
.zoomimg img { transition: transform 1s var(--ease); }
.zoomimg:hover img { transform: scale(1.07); }

.solution-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 300px;
	padding: 34px 30px;
	background: var(--c-white);
	color: var(--c-navy);
	border-radius: var(--r-card);
}
.solution-card:hover { color: var(--c-navy); }
.solution-card__bar {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 4px;
	background: var(--grad-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--ease);
}
.solution-card:hover .solution-card__bar,
.solution-card:focus-visible .solution-card__bar { transform: scaleX(1); }
.solution-card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--c-petrol-20);
	color: var(--c-petrol);
}
.solution-card__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.solution-card__text { flex-grow: 1; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text); }
.solution-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--c-petrol); }
.solution-card:hover .icon-arrow { transform: translateX(5px); }

/* ---------- Home: about preview ---------- */
.about-preview { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.about-preview__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.story-card {
	position: relative;
	flex: 1.3 1 420px;
	min-width: 0;
	min-height: 400px;
	border-radius: var(--r-media);
	background: var(--c-navy);
}
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.story-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--c-navy) 82%, transparent) 0%, color-mix(in srgb, var(--c-navy) 35%, transparent) 55%, transparent 100%);
}
.story-card__play {
	position: absolute;
	inset-inline-start: calc(50% - 32px);
	inset-block-start: calc(40% - 32px);
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--c-white);
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-white) 12%, transparent);
	color: var(--c-white);
}
.story-card__play:hover { color: var(--c-white); background: color-mix(in srgb, var(--c-white) 25%, transparent); }
.story-card__text {
	position: absolute;
	inset-inline: 40px;
	inset-block-end: 40px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--c-white);
}
.story-card__text strong { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.story-card__text span { max-width: 260px; font-size: var(--fs-body-sm); line-height: var(--lh-small); color: var(--c-navy-20); }

.stats {
	flex: .8 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding-inline-start: 36px;
	border-inline-start: 1px solid var(--c-border);
}
.stats__item {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 22px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--c-text);
}
.stats__item + .stats__item { border-block-start: 1px solid var(--c-border); }
.stats__item .icon { flex: none; color: var(--c-navy); }
.stats__item span { display: flex; flex-direction: column; gap: 4px; max-width: 12em; }
.stats__item strong { font-size: var(--fs-stat); font-weight: var(--fw-stat); color: var(--c-navy); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding-block: 26px; background: var(--c-navy); color: var(--c-white); }
.marquee__track {
	display: flex;
	width: max-content;
	font-size: var(--fs-h3);
	font-weight: 700;
	white-space: nowrap;
	animation: marq 32s linear infinite;
}
.marquee__word, .marquee__dot { padding-inline-end: 56px; }
.marquee__dot--green { color: var(--c-green); }
.marquee__dot--teal { color: var(--c-teal); }

/* ---------- Featured project ---------- */
.featured {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: var(--r-media);
	background: var(--c-navy);
	color: var(--c-white);
}
.featured__media { position: relative; flex: 1.3 1 480px; min-width: 0; min-height: 440px; }
.featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured__body {
	flex: 1 1 380px;
	min-width: 0;
	padding: 56px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}
.featured__title { font-size: var(--fs-h2-sm); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.featured__text { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--c-navy-20); }
.featured__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	padding-block: 22px;
	border-block: 1px solid color-mix(in srgb, var(--c-white) 15%, transparent);
}
.featured__meta div { display: flex; flex-direction: column; gap: 4px; }
.featured__meta dt { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-text-on-dark); }
.featured__meta dd { font-size: var(--fs-body-sm); font-weight: 600; }

/* ---------- CTA ---------- */
.cta { padding-block-end: var(--section); }
.cta__box { position: relative; overflow: hidden; border-radius: var(--r-media); }
.cta--photo .cta__box { min-height: 380px; display: flex; align-items: center; background: var(--c-ink); }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.cta--photo .cta__box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 95%, transparent) 0%, color-mix(in srgb, var(--c-ink) 75%, transparent) 45%, color-mix(in srgb, var(--c-ink) 10%, transparent) 100%);
}
.cta__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 640px;
}
.cta--photo .cta__body { padding: 64px clamp(28px, 5vw, 72px); color: var(--c-white); }
.cta__kicker { font-size: var(--fs-lead); color: var(--c-green); }
.cta__title { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.cta__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-navy-20); }

.cta--brand .cta__box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding: 64px clamp(28px, 5vw, 72px);
	background: var(--c-petrol);
	color: var(--c-white);
}
.cta--brand .cta__body { gap: 12px; max-width: 620px; }
/* petrol-20 on petrol = 5.7:1 */
.cta--brand .cta__text { color: var(--c-petrol-20); }

.cta--plain { padding-block: var(--section); }
.cta--plain .cta__box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	overflow: visible;
}
.cta--plain .cta__body { gap: 12px; }
.cta--plain .cta__text { color: var(--c-text); }

/* ---------- About ---------- */
.split { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.split__media { flex: 1 1 480px; min-width: 0; }
.split__body { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.media-frame { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--c-navy); }
.media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-frame--5x4 { aspect-ratio: 5 / 4; }
.media-frame--16x11 { aspect-ratio: 16 / 11; }

.mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; padding-block: 100px; }
.mv__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 48px 44px;
	border-radius: var(--r-card-lg);
	background: var(--c-white);
}
.mv__card--dark { background: var(--c-navy); color: var(--c-white); }
.mv__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-petrol); }
.mv__card--dark .mv__label { color: var(--c-green); }
.mv__text { font-size: var(--fs-h2-sm); font-weight: 700; line-height: var(--lh-h3); }

.value-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 34px 30px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
}
.value-card__icon .icon { transition: transform .5s var(--ease); }
.value-card:hover .value-card__icon .icon { transform: rotate(-8deg) scale(1.1); }
.value-card__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.value-card__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text); }

.ic {
	flex: none;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--c-white);
}
.ic--navy { background: var(--c-navy); }
.ic--petrol { background: var(--c-petrol); }
/* Ink icons on teal/green (never white). */
.ic--teal { background: var(--c-teal); color: var(--c-ink); }
.ic--green { background: var(--c-green); color: var(--c-ink); }

.tagline {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--c-white);
	background: var(--c-navy);
}
.tagline__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tagline__shade { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 72%, transparent); }
.tagline__ring { position: absolute; inset-inline-start: calc(50% - 260px); inset-block-start: calc(50% - 260px); opacity: .25; }
.tagline__ring-outer { stroke: var(--c-green); }
.tagline__ring-inner { stroke: var(--c-teal); }
.tagline__body { position: relative; padding: 80px var(--gutter); display: flex; flex-direction: column; gap: 18px; align-items: center; }
.tagline__line { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }

/* ---------- Solutions ---------- */
.solutions { display: flex; flex-direction: column; gap: 100px; padding-block: 100px 60px; }
.solution-row { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; scroll-margin-top: 24px; }
.solution-row--flip { flex-direction: row-reverse; }
.solution-row__media { flex: 1.1 1 460px; min-width: 0; }
.solution-row__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Decorative number lives in CSS content (aria-hidden, not text for contrast). */
.solution-row__num::before { content: attr(data-num); font-size: var(--fs-num); font-weight: 800; line-height: 1; color: var(--c-border); }
.solution-row__title { font-size: var(--fs-h2-sm); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.solution-row__line { display: block; width: 64px; height: 3px; background: var(--accent, var(--c-teal)); transform-origin: left center; }
.accent--teal { --accent: var(--c-teal); }
.accent--green { --accent: var(--c-green); }
.accent--petrol { --accent: var(--c-petrol); }
.checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	font-size: var(--fs-small);
}
.checklist li { display: flex; gap: 10px; align-items: center; }
/* Small icons on white: petrol (teal/green fail contrast). */
.checklist .icon { flex: none; color: var(--c-petrol); }

.process__flow { height: 3px; border-radius: 3px; margin-block-end: -9px; }
.flow {
	background: linear-gradient(90deg, var(--c-petrol), var(--c-teal), var(--c-green), var(--c-teal), var(--c-petrol));
	background-size: 200% 100%;
	animation: flow 4s linear infinite;
}
.process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 16px; }
.step__dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--c-white);
	border: 3px solid var(--c-teal);
	transition: transform .4s var(--ease);
}
.step:hover .step__dot { transform: scale(1.25); }
.step__dot--petrol { border-color: var(--c-petrol-60); }
.step__dot--green { border-color: var(--c-green); }
.step__num { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-text-on-dark); }
.step__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.step__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-navy-20); }

.faq { border-block-start: 1px solid var(--c-border); }
.faq__item { border-block-end: 1px solid var(--c-border); }
.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 64px;
	padding: 24px 12px;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-h3);
	cursor: pointer;
	list-style: none;
	transition: background-color .3s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--c-bg-soft); }
.faq__sign {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-bg-soft);
	transition: background-color .3s, color .3s;
}
.faq__q:hover .faq__sign { background: var(--c-border); }
.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(50% - 7px);
	inset-block-start: calc(50% - 1px);
	width: 14px;
	height: 2px;
	background: currentColor;
	transition: transform .3s;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign { background: var(--c-navy); color: var(--c-white); }
.faq__item[open] .faq__sign::after { transform: rotate(0); }
.faq__a { max-width: 760px; padding: 0 12px 26px; font-size: var(--fs-body-sm); }
.faq__item[open] .faq__a { animation: fadeDown .4s ease both; }

/* ---------- Projects ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 44px; }
.pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 20px;
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--c-navy);
	background: var(--c-white);
	border: 1px solid var(--c-navy-20);
	border-radius: var(--r-pill);
	transition: background-color .3s, color .3s, border-color .3s;
}
.pill:hover { border-color: var(--c-navy); color: var(--c-navy); }
.pill[aria-current="true"] { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.filters__empty { color: var(--c-text); }

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--r-card-lg);
	background: var(--c-white);
	transition: transform .45s var(--ease), box-shadow .45s;
}
.project-card:hover, .project-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.project-card[hidden] { display: none; }
.project-card.is-entering { animation: fadeUp .6s var(--ease) both; }
.project-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-navy); }
.project-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.08); }
.project-card__tag {
	position: absolute;
	inset-inline-start: 18px;
	inset-block-start: 18px;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--c-white);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: calc(var(--ls-label) / 2);
	text-transform: var(--tt-label);
}
.project-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; }
.project-card__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.project-card__title a { color: var(--c-navy); }
.project-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project-card__meta { font-size: var(--fs-small); color: var(--c-text); }
.project-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-block-start: 8px;
	font-size: var(--fs-meta);
	font-weight: 700;
	color: var(--c-petrol);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s, transform .4s;
}
.project-card:hover .project-card__more,
.project-card:focus-within .project-card__more { opacity: 1; transform: none; }
@media (hover: none) { .project-card__more { opacity: 1; transform: none; } }

.project-detail { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 56px; align-items: start; }
.project-facts { position: sticky; inset-block-start: 24px; padding: 28px; border-radius: var(--r-card); background: var(--c-bg-soft); }
.project-facts dl { display: flex; flex-direction: column; gap: 18px; }
.project-facts dt { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-text); }
.project-facts dd { font-weight: 600; }
.project-detail__content { max-width: 760px; }
.project-detail__content figure { margin-block-end: 32px; }
@media (max-width: 900px) {
	.project-detail { grid-template-columns: 1fr; gap: 32px; }
	.project-facts { position: static; }
}

.navigation.pagination { margin-block-start: 48px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--c-navy-20);
	border-radius: var(--r-btn);
	color: var(--c-navy);
}
.page-numbers.current { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* ---------- Contact ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact__info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.info-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px;
	color: var(--c-navy);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.info-card:hover { color: var(--c-navy); transform: translateY(-4px); border-color: var(--c-teal); box-shadow: var(--shadow-hover); }
.info-card__icon { width: 54px; height: 54px; border-radius: 12px; }
.info-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.info-card__label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label); text-transform: var(--tt-label); color: var(--c-text); }
.info-card__text strong { font-size: var(--fs-body); overflow-wrap: anywhere; }

.map {
	position: relative;
	margin-block-start: 8px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r-card);
	background: var(--c-petrol-20);
	display: flex;
	align-items: center;
	justify-content: center;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__roads path { stroke: var(--c-white); }
.map__pin { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--c-petrol); }
.map__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--c-teal); }
.map__label { position: absolute; inset-block-end: 14px; inset-inline-start: 16px; font-size: var(--fs-eyebrow); color: var(--c-navy-80); }

.contact__form {
	flex: 1.3 1 480px;
	min-width: 0;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--r-media);
	background: var(--c-bg-soft);
}
.contact__title { font-size: var(--fs-h2-sm); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.contact__note { margin-block: 8px 20px; font-size: var(--fs-small); color: var(--c-text); }
.contact__success {
	min-height: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
}
.contact__success[hidden] { display: none; }
.contact__success .contact__note { max-width: 360px; margin: 0; }
.contact__success-icon {
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-green);
	color: var(--c-ink);
}

/* Contact Form 7 */
.sees-form { display: flex; flex-direction: column; gap: 20px; }
.sees-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.sees-form label { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-meta); font-weight: 600; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 fieldset.hidden-fields-container { display: none; }
.wpcf7 .wpcf7-submit {
	width: 100%;
	font: inherit;
	min-height: 56px;
	font-size: var(--fs-btn-lg);
	font-weight: 700;
	background: var(--c-navy);
	color: var(--c-white);
	border: 0;
	border-radius: var(--r-btn);
	cursor: pointer;
	transition: background-color .3s, transform .3s;
}
.wpcf7 .wpcf7-submit:hover { background: var(--c-petrol); transform: translateY(-2px); }
.wpcf7 .wpcf7-submit:disabled { opacity: .6; cursor: progress; }
.wpcf7-not-valid-tip { display: block; margin-block-start: 6px; font-size: var(--fs-eyebrow); font-weight: 500; color: var(--c-error); }
.wpcf7 .wpcf7-not-valid { border-color: var(--c-error); }
.wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-btn); font-size: var(--fs-meta); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border: 1px solid var(--c-error); color: var(--c-error); background: var(--c-white); }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7-spinner { display: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.notice { padding: 14px 16px; border-radius: var(--r-btn); background: var(--c-warning-bg); color: var(--c-warning); }

/* ---------- Generic listing ---------- */
.post-list { display: flex; flex-direction: column; }
.post-list__item { padding-block: 24px; border-block-end: 1px solid var(--c-border); }
.post-list__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); margin-block-end: 6px; }
.container--narrow .search-form { margin-block-end: 32px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink); color: var(--c-text-on-dark); }
.site-footer__inner { display: flex; flex-direction: column; gap: 56px; padding-block: 80px 36px; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; max-width: 340px; font-size: var(--fs-small); line-height: var(--lh-small); }
.site-footer__cols {
	flex: 0 1 700px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 32px 56px;
}
.footer-col__title {
	margin-block-end: 14px;
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: var(--tt-label);
	color: var(--c-white);
}
.footer-col__list { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); }
.footer-col__list a { display: inline-block; padding-block: 4px; color: var(--c-text-on-dark); transition: color .25s; }
.footer-col__list a:hover { color: var(--c-green); }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-block-start: 26px;
	border-block-start: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
	font-size: var(--fs-eyebrow);
}

/* ---------- WordPress content classes ---------- */
.alignleft { float: inline-start; margin-inline-end: 1.5em; margin-block-end: 1em; }
.alignright { float: inline-end; margin-inline-start: 1.5em; margin-block-end: 1em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { margin-inline: min(-6vw, -80px); max-width: none; }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.wp-caption, .wp-block-image figcaption { max-width: 100%; }
.wp-caption-text, .gallery-caption, .wp-element-caption { margin-block-start: 8px; font-size: var(--fs-meta); color: var(--c-text); }
.prose img { border-radius: var(--r-card); }
.sticky, .bypostauthor { /* No special styling needed. */ }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes zoomOut { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-2deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-white) 55%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flow { to { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

.a-up { animation: fadeUp .9s var(--ease) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .28s; } .d4 { animation-delay: .38s; }
.d5 { animation-delay: .5s; } .d6 { animation-delay: .62s; } .d7 { animation-delay: .74s; } .d8 { animation-delay: .86s; }
.a-zoom { animation: zoomOut 2.6s var(--ease) both; }
.a-float { animation: drift 7s ease-in-out infinite; }
.eyebrow--grow .eyebrow__line { animation: grow 1s .4s var(--ease) both; }

.pulse { animation: pulse 1.8s ease-out infinite; }
.ring { animation: spin 30s linear infinite; }
.ping { animation: ping 2s ease-out infinite; }
.pop { animation: pop .6s var(--ease) both; }
.draw { stroke-dasharray: 30; animation: draw .6s .35s ease both; }

.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .growv { transform: scaleX(0); transition: transform 1s .3s var(--ease); }
.js .is-visible .growv, .js .growv.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.js .reveal, .js .growv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive — tablet 24px / phone 16px gutters, 72px sections on phones
   ========================================================================== */
@media (max-width: 1024px) {
	:root { --gutter: 24px; --logo-h: 64px; --header-h: 112px; }
	.stats { padding-inline-start: 0; border-inline-start: 0; }
	.features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.features__item { justify-content: flex-start; }
	.features__item:nth-child(odd) { border-inline-start: 0; }
	.page-header__media { width: 70%; }
}
@media (max-width: 900px) {
	.alignwide { margin-inline: 0; }
}
@media (max-width: 760px) {
	:root { --gutter: 16px; --section: 72px; --header-h: 92px; --logo-h: 52px; }
	.header-tools { gap: 6px; }
	.lang-switch { padding-inline-start: 10px; }
	.hero { min-height: 0; }
	.hero::before,
	.page-header::before {
		background: linear-gradient(180deg, color-mix(in srgb, var(--c-white) 92%, transparent) 0%, color-mix(in srgb, var(--c-white) 82%, transparent) 70%, color-mix(in srgb, var(--c-white) 40%, transparent) 100%);
	}
	.page-header__media { width: 100%; opacity: .35; }
	.hero__mark { display: none; }
	.hero__body { padding-block: 40px 56px; }
	.page-header__body { padding-block: 40px 56px; }
	.features__list { padding-block: 22px; gap: 18px 12px; }
	.features__item { gap: 12px; padding-inline: 0; }
	.features__item + .features__item { border-inline-start: 0; }
	.features__item .icon { width: 30px; height: 30px; }
	.solutions { gap: 64px; padding-block: 64px 32px; }
	.solution-row, .solution-row--flip { flex-direction: column; gap: 28px; align-items: stretch; }
	.solution-row__media, .solution-row__body, .split__media, .split__body { flex-basis: auto; }
	.split { gap: 32px; }
	.checklist { grid-template-columns: 1fr; }
	.featured__media { flex-basis: 100%; min-height: 260px; }
	.featured__body { padding: 36px 24px; }
	.story-card { flex-basis: 100%; min-height: 340px; }
	.story-card__text { inset-inline: 24px; inset-block-end: 24px; }
	.mv { padding-block: var(--section); }
	.mv__card { padding: 32px 26px; }
	.cta--photo .cta__box { min-height: 0; }
	.cta--photo .cta__body { padding: 44px 24px; }
	.cta--brand .cta__box { padding: 40px 24px; }
	.contact__info, .contact__form { flex-basis: 100%; }
	.contact__success { min-height: 380px; }
	.search-form { flex-direction: column; }
	.faq__q { padding-inline: 4px; }
	.section-head { margin-block-end: 36px; }
	.section--tight-top { padding-block-start: 48px; }
}
@media (max-width: 480px) {
	:root { --logo-h: 44px; }
	:lang(en) { --ls-eyebrow: 0.25em; }
	.site-header__bar { gap: 12px; }
	.header-tools { gap: 4px; padding-inline-start: 4px; }
	.header-tools .search-toggle { display: none; }
	.primary-nav__search { display: block; }
	.lang-switch { padding-inline-start: 8px; border-inline-start: 0; }
}
@media (max-width: 400px) {
	.btn--lg { width: 100%; }
}