@import url("fonts.css");

/* ==========================================================================
   Wardcon — tokens
   Palette derived from the logo: #004225 forest, #69B9BA parachute teal.
   ========================================================================== */

:root {
	--wc-forest: #004225;
	--wc-forest-deep: #00301b;
	--wc-forest-mid: #0a5231;
	--wc-forest-soft: #e8efe9;

	--wc-teal: #69b9ba;
	--wc-teal-deep: #3f9799;
	--wc-teal-tint: #dceeee;

	--wc-paper: #ffffff;
	--wc-tint: #f5f7f4;
	--wc-line: #e3e8e2;
	--wc-line-dark: rgba(255, 255, 255, 0.16);

	--wc-ink: #16211b;
	--wc-ink-soft: #4d5b53;
	--wc-ink-faint: #5f6f66;

	--wc-danger: #b3261e;

	--wc-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--wc-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

	--wc-container: 1260px;
	--wc-gutter: clamp(20px, 4vw, 48px);
	--wc-header-h: 88px;

	/* The bar carries nine items between two wordmarks, which needs more room
	   than the reading measure the rest of the page is set to. It is given a
	   little more width and a slightly tighter gutter of its own so the
	   navigation holds on one line without the logos sliding far out of line
	   with the content below. */
	--wc-header-max: 1400px;
	--wc-header-gutter: clamp(18px, 2.2vw, 40px);
	--wc-radius: 4px;

	--wc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wc-shadow: 0 18px 48px -28px rgba(0, 48, 26, 0.42);
	--wc-shadow-lg: 0 40px 90px -50px rgba(0, 48, 26, 0.55);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wc-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--wc-paper);
	color: var(--wc-ink);
	font-family: var(--wc-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.wc-noscroll {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wc-sans);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.021em;
	margin: 0;
	color: var(--wc-forest);
	text-wrap: balance;
}

p {
	margin: 0 0 1.35em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

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

::selection {
	background: var(--wc-teal);
	color: var(--wc-forest-deep);
}

.wc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--wc-forest);
	color: #fff;
	padding: 12px 20px;
	font-family: var(--wc-sans);
	font-weight: 500;
	text-decoration: none;
}

.wc-skip:focus {
	left: 16px;
	top: 16px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.wc-container {
	width: 100%;
	max-width: var(--wc-container);
	margin-inline: auto;
	padding-inline: var(--wc-gutter);
}

.wc-main {
	display: block;
}

/* ==========================================================================
   Type utilities
   ========================================================================== */

.wc-h2 {
	font-size: clamp(1.95rem, 1.3rem + 2.1vw, 3.15rem);
	max-width: 19ch;
	margin-bottom: 0.85em;
}

.wc-h2--statement {
	max-width: 16ch;
	font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.05rem);
}

/* A short rule under the heading, in place of a label above it. */
.wc-h2--rule {
	margin-bottom: 0.6em;
}

.wc-h2--rule::after {
	content: "";
	display: block;
	width: 92px;
	height: 2px;
	margin-top: 0.58em;
	background: linear-gradient(to right, var(--wc-teal) 0 36%, rgba(105, 185, 186, 0.22) 100%);
}

/* Heading and opening paragraph as a spread, rather than a heading with an
   empty half-page beside it. */
.wc-splithead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 68px);
	align-items: end;
	margin-bottom: clamp(30px, 3.6vw, 52px);
}

.wc-splithead .wc-h2 {
	max-width: 15ch;
	margin-bottom: 0;
}

.wc-splithead .wc-lead {
	max-width: none;
	margin-bottom: 0;
	padding-bottom: 0.4em;
}

/* The opening paragraph, set larger than the body that follows it. */
.wc-lead {
	max-width: 58ch;
	margin-bottom: clamp(1.7rem, 2.4vw, 2.4rem);
}

.wc-lead p {
	margin: 0;
	font-family: var(--wc-sans);
	font-size: clamp(1.12rem, 1rem + 0.5vw, 1.34rem);
	font-weight: 400;
	line-height: 1.56;
	letter-spacing: -0.008em;
	color: var(--wc-ink);
	text-wrap: pretty;
}

.wc-section--dark .wc-lead p {
	color: #fff;
}

.wc-prose {
	max-width: 68ch;
	color: var(--wc-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.wc-prose p+p {
	margin-top: 0;
}

.wc-prose strong {
	color: var(--wc-ink);
	font-weight: 500;
}

.wc-prose--muted {
	color: var(--wc-ink-faint);
	font-size: 1rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wc-line);
}

.wc-prose--onDark {
	color: rgba(255, 255, 255, 0.76);
}

.wc-prose--onDark strong {
	color: #fff;
}

.wc-prose--page {
	max-width: none;
}

.wc-prose--page h2,
.wc-prose--page h3 {
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.wc-prose--page h2 {
	font-size: 1.4rem;
}

.wc-prose--page h3 {
	font-size: 1.15rem;
}

.wc-prose--page>*:first-child {
	margin-top: 0;
}

.wc-prose--page ul,
.wc-prose--page ol {
	margin: 0 0 1.35em;
	padding-left: 1.3em;
}

.wc-prose--page ul {
	list-style: disc;
}

.wc-prose--page ol {
	list-style: decimal;
}

.wc-prose--page li {
	margin-bottom: 0.5em;
}

.wc-prose--page li:last-child {
	margin-bottom: 0;
}

.wc-prose--page li::marker {
	color: var(--wc-teal-deep);
}

.wc-prose--page a {
	color: var(--wc-forest);
	text-decoration: underline;
	text-decoration-color: var(--wc-line);
	text-underline-offset: 3px;
}

.wc-prose--page a:hover {
	text-decoration-color: currentColor;
}

/* Long passages set in two columns, the way a printed page would carry them. */
@media (min-width: 1100px) {
	.wc-prose--columns {
		max-width: none;
		columns: 2;
		column-gap: clamp(40px, 4vw, 68px);
		column-rule: 1px solid var(--wc-line);
		orphans: 2;
		widows: 2;
	}

	.wc-section--dark .wc-prose--columns {
		column-rule-color: var(--wc-line-dark);
	}

	.wc-prose--columns>p:first-child {
		margin-top: 0;
	}

	/*
	 * Without this, the browser's column-balancing is free to break a single
	 * paragraph wherever it likes to even out the two columns' height — which
	 * reads as one paragraph's back half wrongly appearing under the next
	 * one's start. Keeping each paragraph whole means a short second column
	 * is possible, but a paragraph is never cut mid-sentence.
	 */
	.wc-prose--columns>p {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
}

/*
 * Used bare (no .wc-process--compact card wrapper), .wc-process__subhead
 * follows a two-column passage whose last paragraph is also a :last-child —
 * the global `p:last-child { margin-bottom: 0 }` rule (see above) zeroes its
 * usual 1.35em spacing, so the heading sat jammed against it. Restore just
 * that same paragraph rhythm rather than a full card's worth of gap.
 */
.wc-prose--columns + .wc-process__subhead {
	margin-top: 1.35em;
}

/*
 * Two short, single-paragraph passages ("Their remit" / "Discretion by
 * design") — stacked full-width, each left the second text column that
 * .wc-prose--columns would otherwise balance into sitting empty. Run them
 * side by side instead, on the same measure as the two-column passage they
 * follow: `1fr 1fr` plus that block's own column-gap reproduces multicol's
 * column boxes exactly, and hanging the rule half a gap to the left of the
 * second column puts it where multicol centres its column-rule, so the two
 * blocks read as one grid rather than two that nearly line up.
 */
.wc-process__duo {
	--wc-duo-gap: clamp(40px, 4vw, 68px);
	display: grid;
	gap: clamp(24px, 3vw, 32px);
}

.wc-prose--columns + .wc-process__duo {
	margin-top: clamp(26px, 3vw, 38px);
}

@media (min-width: 1100px) {
	.wc-process__duo {
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--wc-duo-gap);
		align-items: start;
	}

	.wc-process__duo-item + .wc-process__duo-item {
		margin-left: calc(var(--wc-duo-gap) / -2);
		padding-left: calc(var(--wc-duo-gap) / 2);
		border-left: 1px solid var(--wc-line);
	}
}

/* A quotation lifted into its own panel beside the body copy. */
.wc-pullpanel {
	position: relative;
	padding: clamp(28px, 3vw, 40px);
	background: var(--wc-paper);
	border: 1px solid var(--wc-line);
	border-top: 2px solid var(--wc-teal);
	border-radius: var(--wc-radius);
	box-shadow: var(--wc-shadow);
}

.wc-pullpanel__mark {
	display: block;
	margin-bottom: 18px;
	font-size: 1.4rem;
	color: var(--wc-teal);
	opacity: 0.6;
}

.wc-pullpanel__quote {
	margin: 0;
}

.wc-pullpanel__quote p {
	margin: 0;
	font-family: var(--wc-sans);
	font-size: clamp(1.16rem, 1rem + 0.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.36;
	letter-spacing: -0.015em;
	color: var(--wc-forest);
	text-wrap: pretty;
}

/* A closing note, set apart from the argument above it. */
.wc-footnote {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: clamp(16px, 2vw, 24px);
	align-items: start;
	margin-top: clamp(32px, 4vw, 54px);
	padding-top: clamp(26px, 3vw, 36px);
	border-top: 1px solid var(--wc-line);
}

.wc-footnote__mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wc-teal-tint);
	color: var(--wc-forest);
	font-size: 0.92rem;
}

.wc-footnote__body {
	max-width: 74ch;
	color: var(--wc-ink-faint);
	font-size: 0.99rem;
	line-height: 1.76;
}

/* The statement slab: this section is anchored by its quotation, not a heading. */
.wc-slab {
	position: relative;
	/* It follows body copy as often as it opens a section, and with no space
	   above it the quote sat hard against the last line of the column. The
	   section's own padding covers the space beneath it when it comes last. */
	margin: clamp(34px, 4vw, 56px) 0 clamp(38px, 4.5vw, 62px);
	padding: clamp(34px, 4vw, 56px) clamp(30px, 4vw, 60px);
	background: linear-gradient(148deg, var(--wc-forest-soft), rgba(232, 239, 233, 0.34));
	border-left: 3px solid var(--wc-teal);
	border-radius: 0 var(--wc-radius) var(--wc-radius) 0;
}

.wc-slab:first-child {
	margin-top: 0;
}

.wc-slab:last-child {
	margin-bottom: 0;
}

.wc-slab__mark {
	position: absolute;
	top: clamp(20px, 2.4vw, 32px);
	right: clamp(24px, 3vw, 44px);
	font-size: clamp(2.4rem, 5vw, 4rem);
	color: var(--wc-teal);
	opacity: 0.2;
}

.wc-slab__text {
	position: relative;
	margin: 0;
	max-width: 25ch;
	font-family: var(--wc-sans);
	font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.45rem);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--wc-forest);
	text-wrap: pretty;
}

/* Pull-quotes get their own component, per the copy brief. */
.wc-quote {
	margin: clamp(2.4rem, 4vw, 3.6rem) 0;
	padding: 0 0 0 clamp(22px, 3vw, 38px);
	border-left: 2px solid var(--wc-teal);
}

.wc-quote p {
	font-family: var(--wc-sans);
	font-size: clamp(1.3rem, 1rem + 1.15vw, 1.95rem);
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.018em;
	color: var(--wc-forest);
	margin: 0;
	text-wrap: pretty;
}

.wc-quote--lead {
	margin-top: 0;
}

.wc-quote--lead p {
	font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.45rem);
}

.wc-section--dark .wc-quote p {
	color: #fff;
}

.wc-quote__cite {
	display: block;
	margin-top: 12px;
	font-family: var(--wc-sans);
	font-size: 0.9rem;
	font-style: normal;
	color: var(--wc-ink-faint);
}

.wc-section--dark .wc-quote__cite {
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wc-btn {
	--btn-bg: var(--wc-forest);
	--btn-fg: #ffffff;
	--btn-bd: var(--wc-forest);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bd);
	border-radius: var(--wc-radius);
	font-family: var(--wc-sans);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.002em;
	text-decoration: none;
	transition: background-color 0.35s var(--wc-ease), color 0.35s var(--wc-ease),
		border-color 0.35s var(--wc-ease), transform 0.35s var(--wc-ease);
}

.wc-btn__icon {
	font-size: 0.8em;
	transition: transform 0.4s var(--wc-ease);
}

.wc-btn:hover {
	--btn-bg: var(--wc-forest-mid);
	--btn-bd: var(--wc-forest-mid);
	transform: translateY(-1px);
}

.wc-btn:hover .wc-btn__icon {
	transform: translateX(4px);
}

.wc-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: #ffffff;
	--btn-bd: rgba(255, 255, 255, 0.42);
}

.wc-btn--ghost:hover {
	--btn-bg: rgba(255, 255, 255, 0.1);
	--btn-bd: #ffffff;
}

.wc-btn--onDark {
	--btn-bg: #ffffff;
	--btn-fg: var(--wc-forest);
	--btn-bd: #ffffff;
}

.wc-btn--onDark:hover {
	--btn-bg: var(--wc-teal-tint);
	--btn-bd: var(--wc-teal-tint);
}

.wc-btn--block {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Header
   ========================================================================== */

.wc-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 90;
	color: var(--wc-forest);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.5s var(--wc-ease), color 0.4s var(--wc-ease),
		border-color 0.5s var(--wc-ease), backdrop-filter 0.5s var(--wc-ease),
		box-shadow 0.5s var(--wc-ease);
}

.wc-header--sticky {
	position: fixed;
}

.wc-header__inner {
	width: 100%;
	max-width: var(--wc-header-max);
	margin-inline: auto;
	padding-inline: var(--wc-header-gutter);
	min-height: var(--wc-header-h);
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 44px);
}

.wc-header__brand {
	position: relative;
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

/* The second mark. Both files are built to one canvas, so a single width
   keeps their two wordmarks at an identical cap height either side of the
   navigation. Hidden by default and switched on only where the bar is wide
   enough to carry it — see the Responsive section. */
.wc-header__brand--alt {
	display: none;
}

.wc-header__logo {
	display: block;
	height: auto;
	transition: opacity 0.45s var(--wc-ease);
}

.wc-header__logo--light {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.wc-header[data-theme="dark"] .wc-header__logo--dark {
	opacity: 0;
}

.wc-header[data-theme="dark"] .wc-header__logo--light {
	opacity: 1;
}

/* Soft, translucent version of the banner's own wash — a green bar under the
   menu that reads clearly against the photo without needing the page to be
   scrolled/stuck first. .is-stuck below still layers a stronger version of
   the same tone on top once scrolled. */
.wc-header[data-theme="dark"] {
	color: #ffffff;
	background: rgba(0, 40, 23, 0.4);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Glass, once the page has scrolled. */
.wc-header.is-stuck {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: saturate(1.5) blur(16px);
	-webkit-backdrop-filter: saturate(1.5) blur(16px);
	border-bottom-color: rgba(0, 66, 37, 0.09);
	box-shadow: 0 10px 30px -26px rgba(0, 48, 26, 0.5);
}

.wc-header.is-stuck[data-theme="dark"] {
	background: rgba(0, 42, 24, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Navigation */

.wc-nav {
	margin-inline-start: auto;
}

/* Carrying two wordmarks either side of the full navigation needs a wide bar:
   below this the second mark drops away and the header falls back to a single
   logo with the navigation to its right. The nine items stay on one line on
   both sides of this line — the type and the gaps above ease down with the
   viewport to keep them there. The threshold is set by the narrowest bar that
   still holds the menu and both marks, so adding items to the menu may need it
   raised. */
@media (min-width: 1280px) {
	.wc-header--paired .wc-header__inner {
		gap: clamp(16px, 2vw, 28px);
	}

	.wc-header--paired .wc-header__brand--alt {
		display: block;
	}

	/* Two marks of equal width mean the navigation can simply take the space
	   between them and centre itself, landing on the true middle of the bar. */
	.wc-header--paired .wc-nav {
		flex: 1 1 auto;
		min-width: 0;
		margin-inline-start: 0;
		display: flex;
		justify-content: center;
	}
}

.wc-nav__list {
	display: flex;
	align-items: center;
	/* Sized so all nine items stay on one line between the two wordmarks. */
	gap: clamp(9px, 1.05vw, 20px);
	list-style: none;
	flex-wrap: nowrap;
}

.wc-nav__item {
	position: relative;
}

.wc-nav__link {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	font-family: var(--wc-sans);
	/* Eases down as the bar narrows, so the full menu keeps its single line
	   instead of wrapping or collapsing into a menu button. */
	font-size: clamp(0.78rem, 0.66rem + 0.21vw, 0.9rem);
	font-weight: 500;
	letter-spacing: 0.003em;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	opacity: 0.86;
	transition: opacity 0.3s var(--wc-ease);
}

.wc-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--wc-ease);
}

.wc-nav__item:hover>.wc-nav__link,
.wc-nav__item.is-current>.wc-nav__link {
	opacity: 1;
}

.wc-nav__item:hover>.wc-nav__link::after,
.wc-nav__item.is-current>.wc-nav__link::after {
	transform: scaleX(1);
}

.wc-nav__expand {
	display: none;
	background: none;
	border: 0;
	padding: 6px;
}

.wc-nav__submenu {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 250px;
	padding: 10px;
	margin: 0;
	list-style: none;
	background: var(--wc-paper);
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	box-shadow: var(--wc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	/* Visibility flips instantly on open and only lags on close, so a keyboard
	   user reaches the sub-items on the very next Tab. */
	transition: opacity 0.3s var(--wc-ease), transform 0.3s var(--wc-ease), visibility 0s 0.3s;
}

.wc-nav__item--parent:hover>.wc-nav__submenu,
.wc-nav__item--parent:focus-within>.wc-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.3s var(--wc-ease), transform 0.3s var(--wc-ease), visibility 0s 0s;
}

.wc-nav__sublink {
	display: block;
	padding: 9px 14px;
	border-radius: 3px;
	font-family: var(--wc-sans);
	font-size: 0.92rem;
	color: var(--wc-ink);
	text-decoration: none;
	transition: background-color 0.25s var(--wc-ease), color 0.25s var(--wc-ease);
}

.wc-nav__sublink:hover {
	background: var(--wc-tint);
	color: var(--wc-forest);
}

.wc-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

/* Only the phone ever shows here on a desktop, and the burger is mobile-only,
   so with the phone switched off this group is empty. It has to be dropped
   rather than left to claim a flex gap the navigation needs. This sits after
   the rule above deliberately: declared earlier it lost to it, and the empty
   group went on taking its gap. */
@media (min-width: 1025px) {
	.wc-header__actions--mobile {
		display: none;
	}
}

.wc-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wc-sans);
	font-size: 0.9rem;
	text-decoration: none;
	opacity: 0.82;
}

.wc-header__phone:hover {
	opacity: 1;
}

.wc-header__phone i {
	font-size: 0.78em;
	color: var(--wc-teal-deep);
}

.wc-header[data-theme="dark"] .wc-header__phone i {
	color: var(--wc-teal);
}

/* Burger */

.wc-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--wc-radius);
	position: relative;
	opacity: 0.85;
}

.wc-burger__bar {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--wc-ease), opacity 0.3s var(--wc-ease);
}

.wc-burger__bar:nth-child(1) {
	top: 18px;
}

.wc-burger__bar:nth-child(2) {
	top: 24px;
}

.wc-burger[aria-expanded="true"] .wc-burger__bar:nth-child(1) {
	transform: translateY(3px) rotate(45deg);
}

.wc-burger[aria-expanded="true"] .wc-burger__bar:nth-child(2) {
	transform: translateY(-3px) rotate(-45deg);
}

/* Mobile panel */

.wc-mobile {
	position: fixed;
	inset: 0;
	z-index: 85;
	background: var(--wc-forest-deep);
	color: #fff;
	padding: calc(var(--wc-header-h) + 24px) var(--wc-gutter) 40px;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.4s var(--wc-ease);
}

.wc-mobile.is-open {
	opacity: 1;
}

.wc-mobile__inner {
	max-width: 560px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wc-nav__list--mobile {
	display: block;
	list-style: none;
	border-top: 1px solid var(--wc-line-dark);
}

.wc-nav__list--mobile .wc-nav__item {
	border-bottom: 1px solid var(--wc-line-dark);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.wc-nav__list--mobile .wc-nav__link {
	flex: 1;
	padding: 18px 0;
	font-size: 1.22rem;
	font-weight: 500;
	opacity: 1;
}

.wc-nav__list--mobile .wc-nav__link::after {
	display: none;
}

.wc-nav__list--mobile .wc-nav__expand {
	display: block;
	color: var(--wc-teal);
	transition: transform 0.35s var(--wc-ease);
}

.wc-nav__list--mobile .wc-nav__expand[aria-expanded="true"] {
	transform: rotate(180deg);
}

.wc-nav__list--mobile .wc-nav__submenu {
	position: static;
	width: 100%;
	flex-basis: 100%;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	padding: 0 0 14px 16px;
	display: none;
}

.wc-nav__list--mobile .wc-nav__item.is-expanded>.wc-nav__submenu {
	display: block;
}

.wc-nav__list--mobile .wc-nav__sublink {
	color: rgba(255, 255, 255, 0.76);
	padding: 8px 0;
	font-size: 1rem;
}

.wc-nav__list--mobile .wc-nav__sublink:hover {
	background: none;
	color: #fff;
}

.wc-mobile__foot {
	margin-top: auto;
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* White on the dark panel, so the action does not disappear into it. */
.wc-mobile__foot .wc-btn--primary {
	--btn-bg: #ffffff;
	--btn-fg: var(--wc-forest);
	--btn-bd: #ffffff;
}

.wc-mobile__foot .wc-btn--primary:hover {
	--btn-bg: var(--wc-teal-tint);
	--btn-bd: var(--wc-teal-tint);
}

.wc-mobile__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--wc-sans);
	font-size: 0.95rem;
	text-decoration: none;
}

.wc-mobile__contact i {
	color: var(--wc-teal);
	font-size: 0.85em;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.wc-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(600px, 90vh, 940px);
	padding-top: calc(var(--wc-header-h) + clamp(48px, 8vh, 96px));
	background: var(--wc-forest-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

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

.wc-hero__image,
.wc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
}

/* The still is shown first and the video fades in over it once it can play,
   so there is never a blank frame and never a jump. */
.wc-hero__video {
	opacity: 0;
	transition: opacity 1.1s var(--wc-ease);
}

.wc-hero.is-video-ready .wc-hero__video {
	opacity: 1;
}

.wc-hero__wash {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(104deg,
			rgba(0, 40, 23, var(--wash-a)) 0%,
			rgba(0, 44, 26, var(--wash-b)) 44%,
			rgba(0, 50, 30, var(--wash-c)) 100%),
		linear-gradient(to top, rgba(0, 33, 19, 0.92) 0%, rgba(0, 33, 19, 0) 46%);
}

/* Overlay strength, set per page from the dashboard. */
.wc-hero--soft {
	--wash-a: 0.84;
	--wash-b: 0.62;
	--wash-c: 0.3;
}

.wc-hero--medium {
	--wash-a: 0.92;
	--wash-b: 0.78;
	--wash-c: 0.48;
}

.wc-hero--strong {
	--wash-a: 0.96;
	--wash-b: 0.9;
	--wash-c: 0.68;
}

.wc-hero__rules {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(to right,
			rgba(255, 255, 255, 0.055) 0 1px,
			transparent 1px calc(100% / 8));
	mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
}

.wc-hero__inner {
	flex: 1;
	display: flex;
	align-items: center;
	padding-bottom: clamp(48px, 7vh, 96px);
}

.wc-hero__copy {
	max-width: 900px;
}

.wc-hero__title {
	color: #fff;
	font-size: clamp(2.9rem, 1.6rem + 5vw, 6.1rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.032em;
	margin-bottom: 0.42em;
}

.wc-hero__lead {
	max-width: 47ch;
	font-size: clamp(1.1rem, 0.98rem + 0.52vw, 1.4rem);
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 2.4rem;
}

.wc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wc-hero__band {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 30, 17, 0.32);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.wc-hero__band-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: clamp(22px, 3vh, 32px);
}

.wc-hero__statement {
	position: relative;
	margin: 0;
	padding-left: 22px;
	max-width: 62ch;
	font-family: var(--wc-sans);
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem);
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.wc-hero__statement::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.24em;
	bottom: 0.24em;
	width: 2px;
	background: var(--wc-teal);
}

.wc-hero__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* A background video that loops needs a way to stop it. */
.wc-hero__toggle {
	width: 46px;
	height: 46px;
	display: inline-grid;
	place-items: center;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.78rem;
	transition: background-color 0.35s var(--wc-ease), border-color 0.35s var(--wc-ease),
		color 0.35s var(--wc-ease);
}

/* The class sets a display value, which would otherwise beat [hidden]. */
.wc-hero__toggle[hidden] {
	display: none;
}

.wc-hero__toggle:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

.wc-hero__cue {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.35s var(--wc-ease), border-color 0.35s var(--wc-ease);
}

.wc-hero__cue:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

.wc-hero__cue i {
	animation: wc-nudge 2.6s var(--wc-ease) infinite;
}

@keyframes wc-nudge {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(3px);
	}
}

/* ==========================================================================
   Sections and the editorial grid
   ========================================================================== */

.wc-section {
	position: relative;
	padding-block: clamp(72px, 9vw, 148px);
	overflow: clip;
}

/* Content sits above the decorative numeral behind it. */
.wc-section>.wc-container {
	position: relative;
	z-index: 1;
}

/* An outlined numeral, set large and very quiet, echoing the margin index. */
.wc-ghost {
	position: absolute;
	right: clamp(-20px, 1vw, 20px);
	bottom: -0.3em;
	z-index: 0;
	font-family: var(--wc-sans);
	font-size: clamp(200px, 26vw, 420px);
	font-weight: 600;
	line-height: 0.78;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(0, 66, 37, 0.06);
	pointer-events: none;
	user-select: none;
}

.wc-section--dark .wc-ghost {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.07);
}

.wc-section--paper {
	background: var(--wc-paper);
}

.wc-section--tint {
	background: var(--wc-tint);
}

.wc-section--dark {
	background: var(--wc-forest);
	color: #fff;
}

.wc-section--dark .wc-h2 {
	color: #fff;
}

.wc-editorial {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 0 clamp(32px, 5vw, 88px);
	align-items: start;
}

.wc-editorial__body {
	max-width: 780px;
}

.wc-editorial__body--wide {
	max-width: none;
}

/* Home V2 runs the index inline above the heading in every section, so the
   editorial grid gives up its left margin and the body takes the full width. */
.wc-editorial--stacked {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* Index and label. The default sits in the left margin; the --inline variant
   runs it as a numbered rule above the heading. */
.wc-gutter {
	position: sticky;
	top: calc(var(--wc-header-h) + 44px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 0.55em;
}

.wc-gutter__index {
	font-family: var(--wc-sans);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wc-teal-deep);
	font-variant-numeric: tabular-nums;
}

.wc-gutter__rule {
	width: 46px;
	height: 1px;
	background: var(--wc-line);
}

.wc-gutter__label {
	font-family: var(--wc-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wc-ink-faint);
	max-width: 150px;
}

.wc-section--dark .wc-gutter__index {
	color: var(--wc-teal);
}

.wc-section--dark .wc-gutter__rule {
	background: var(--wc-line-dark);
}

.wc-section--dark .wc-gutter__label {
	color: rgba(255, 255, 255, 0.56);
}

.wc-gutter--inline {
	position: static;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding-top: 0;
	margin-bottom: clamp(24px, 3vw, 38px);
}

.wc-gutter--inline .wc-gutter__rule {
	width: 34px;
}

/* ==========================================================================
   The idea
   ========================================================================== */

/* The spread and the two-column body both want the full measure. */
.wc-idea .wc-editorial__body,
.wc-difference .wc-editorial__body {
	max-width: none;
}

/* ==========================================================================
   Who this is for
   ========================================================================== */

.wc-audience .wc-editorial__body {
	max-width: none;
}

.wc-audience__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.wc-audience__copy .wc-prose {
	max-width: 62ch;
}

/* ==========================================================================
   Statement band
   ========================================================================== */

.wc-statement__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.wc-methodline {
	margin: 1.6rem 0 0;
	padding-top: 1.6rem;
	max-width: 60ch;
	border-top: 1px solid var(--wc-line);
	color: var(--wc-ink-soft);
	font-family: var(--wc-sans);
	font-size: 0.95rem;
	line-height: 1.6;
}

.wc-methodline--onDark {
	border-top-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.72);
}

.wc-figure {
	position: relative;
	margin: 0;
	border-radius: var(--wc-radius);
	overflow: hidden;
}

.wc-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wc-radius);
	pointer-events: none;
}

/* A light hand on photography: enough desaturation that a stock image sits
   quietly beside the brand greens, without draining the picture. */
.wc-figure::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(200deg, rgba(0, 48, 26, 0) 55%, rgba(0, 48, 26, 0.34));
	pointer-events: none;
}

.wc-figure__img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	filter: saturate(0.68) contrast(1.04);
}

.wc-figure--tall .wc-figure__img {
	aspect-ratio: 3 / 4;
}

.wc-triggers .wc-figure::after {
	border-color: var(--wc-line);
}

/* ==========================================================================
   Two disciplines
   ========================================================================== */

/* The cards read better across the full column than inside the prose measure. */
.wc-methods .wc-editorial__body {
	max-width: none;
}

.wc-methods__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
	margin-top: clamp(12px, 2vw, 24px);
}

/* Laid out to the number of cards rather than to however many happen to fit:
   four then sit as a tidy two-by-two instead of a row of three with the last
   one stranded on a line of its own. The count is set by the template. */
.wc-methods__grid--cols {
	grid-template-columns: repeat(var(--wc-cols, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.wc-methods__grid--cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.wc-methods__grid--cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wc-method {
	position: relative;
	padding: clamp(30px, 3.2vw, 46px);
	background: var(--wc-paper);
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	overflow: clip;
	transition: border-color 0.4s var(--wc-ease), transform 0.4s var(--wc-ease),
		box-shadow 0.4s var(--wc-ease);
}

.wc-method:hover {
	border-color: #cfdcd3;
	transform: translateY(-3px);
	box-shadow: var(--wc-shadow);
}

/* A teal rule across the top, drawn in on reveal and completed on hover. */
.wc-method__rule {
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--wc-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--wc-ease);
}

.wc-method.is-visible .wc-method__rule {
	transform: scaleX(0.22);
}

.wc-method:hover .wc-method__rule {
	transform: scaleX(1);
}

.wc-method__index {
	position: absolute;
	top: clamp(18px, 2vw, 28px);
	right: clamp(20px, 2.4vw, 34px);
	font-family: var(--wc-sans);
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.045em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(0, 66, 37, 0.14);
}

.wc-method__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 26px;
	border-radius: var(--wc-radius);
	background: var(--wc-forest);
	color: var(--wc-teal);
	font-size: 1.22rem;
	transition: background-color 0.4s var(--wc-ease), color 0.4s var(--wc-ease);
}

.wc-method:hover .wc-method__icon {
	background: var(--wc-teal);
	color: var(--wc-forest-deep);
}

.wc-method__title {
	position: relative;
	max-width: 18ch;
	font-size: clamp(1.18rem, 1.02rem + 0.48vw, 1.48rem);
	line-height: 1.22;
	margin-bottom: 0.62em;
}

.wc-method__text {
	color: var(--wc-ink-soft);
	font-size: 1.0125rem;
	line-height: 1.74;
	margin: 0;
}

/* ==========================================================================
   When to call
   ========================================================================== */

.wc-triggers__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
	gap: clamp(40px, 6vw, 92px);
	align-items: start;
}

.wc-triggers__list {
	list-style: none;
	margin-top: clamp(12px, 2vw, 22px);
	border-top: 1px solid var(--wc-line);
}

/* Each situation is numbered in its own chip, so the list reads as a set of
   discrete cases rather than a checklist. */
.wc-trigger {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: clamp(16px, 2vw, 26px);
	align-items: start;
	padding: clamp(19px, 2.3vw, 27px) 0;
	border-bottom: 1px solid var(--wc-line);
}

.wc-trigger__marker {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--wc-paper);
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	font-family: var(--wc-sans);
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wc-teal-deep);
	font-variant-numeric: tabular-nums;
}

.wc-trigger__text {
	padding-top: 0.52em;
	color: var(--wc-ink);
	font-size: clamp(1.02rem, 0.96rem + 0.26vw, 1.16rem);
	line-height: 1.62;
	text-wrap: pretty;
}

/* A hairline frame set down and to the left, so the photograph reads as a
   plate on a page rather than a floating rectangle. */
.wc-triggers__media {
	position: relative;
}

.wc-triggers__media::before {
	content: "";
	position: absolute;
	inset: 24px 24px -24px -24px;
	border: 1px solid var(--wc-teal);
	border-radius: var(--wc-radius);
	opacity: 0.55;
	pointer-events: none;
}

/* ==========================================================================
   Closing
   ========================================================================== */

.wc-closing__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: stretch;
}

/* Centred against the form card rather than pinned to the foot of the column:
   the contact routes then sit level with the middle of the form instead of
   drifting to the bottom of a full-height grid cell. */
.wc-closing__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wc-closing__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

.wc-closing__glow {
	position: absolute;
	top: -24%;
	right: -10%;
	z-index: 0;
	width: min(760px, 74vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(105, 185, 186, 0.17), rgba(105, 185, 186, 0) 62%);
	pointer-events: none;
}

.wc-closing__copy .wc-prose {
	max-width: 46ch;
	margin-bottom: clamp(26px, 3vw, 38px);
}

.wc-closing__action,
.wc-idea__action {
	margin-top: 2.4rem;
}

/* Contact routes as one panel of rows rather than a run of inline links:
   a full-width row per route, so an email address never has to break. */
.wc-contactcards {
	list-style: none;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--wc-line-dark);
	border-radius: var(--wc-radius);
	overflow: clip;
}

.wc-contactcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 20px;
}

.wc-contactcard+.wc-contactcard {
	border-top: 1px solid var(--wc-line-dark);
}

.wc-contactcard__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wc-radius);
	background: rgba(105, 185, 186, 0.15);
	color: var(--wc-teal);
	font-size: 0.8rem;
}

.wc-contactcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wc-contactcard__label {
	font-family: var(--wc-sans);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.wc-contactcard__value {
	font-family: var(--wc-sans);
	font-size: 0.97rem;
	line-height: 1.45;
	color: #fff;
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.wc-contactcard__value:hover {
	color: var(--wc-teal);
}

/* --------------------------------------------------------------- Form card */

.wc-formcard {
	position: relative;
	background: var(--wc-paper);
	border-radius: var(--wc-radius);
	box-shadow: var(--wc-shadow-lg);
	overflow: clip;
	--card-pad: clamp(24px, 3vw, 44px);
}

/* A form card standing on its own, centred, rather than paired with a
   column of contact details. */
.wc-formcard--solo {
	max-width: 720px;
	margin-inline: auto;
}

.wc-formcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(to right, var(--wc-teal), var(--wc-forest));
}

.wc-formcard__head {
	padding: clamp(28px, 3vw, 40px) var(--card-pad) clamp(20px, 2.2vw, 26px);
	border-bottom: 1px solid var(--wc-line);
}

.wc-formcard__title {
	font-size: clamp(1.2rem, 1.05rem + 0.52vw, 1.52rem);
	margin-bottom: 0.5em;
}

.wc-formcard__text {
	max-width: 46ch;
	color: var(--wc-ink-soft);
	font-size: 0.98rem;
	line-height: 1.68;
	margin: 0;
}

.wc-formcard__body {
	padding: clamp(26px, 3vw, 36px) var(--card-pad);
}

.wc-formcard__note {
	margin: 16px 0 0;
	color: var(--wc-ink-soft);
	font-size: 0.86rem;
	line-height: 1.6;
}

/* The action bar runs the full width of the card, under a rule. */
.wc-formcard .wc-form__foot {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: clamp(24px, 2.6vw, 32px) calc(-1 * var(--card-pad)) 0;
	padding: clamp(20px, 2.2vw, 26px) var(--card-pad);
	background: var(--wc-tint);
	border-top: 1px solid var(--wc-line);
}

.wc-formcard .wc-form__consent {
	margin-left: auto;
	max-width: 32ch;
	text-align: right;
	font-size: 0.81rem;
}

.wc-formcard .wc-form__message {
	margin: 0 calc(-1 * var(--card-pad));
	padding: 18px var(--card-pad);
	border-radius: 0;
}

.wc-formcard .wc-form.is-sent .wc-form__message {
	padding-block: clamp(26px, 3vw, 34px);
}

/* ==========================================================================
   Form
   ========================================================================== */

.wc-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 22px;
}

.wc-form__field--full {
	grid-column: 1 / -1;
}

.wc-form__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wc-sans);
	font-size: 0.855rem;
	font-weight: 500;
	letter-spacing: 0.004em;
	line-height: 1.4;
	color: var(--wc-ink);
}

.wc-form__req {
	color: var(--wc-teal-deep);
	margin-left: 2px;
}

.wc-form__input {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--wc-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wc-ink);
	background: #fafbfa;
	border: 1px solid #dce3dc;
	border-radius: var(--wc-radius);
	transition: border-color 0.25s var(--wc-ease), box-shadow 0.25s var(--wc-ease),
		background-color 0.25s var(--wc-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea.wc-form__input {
	resize: vertical;
	min-height: 118px;
}

.wc-form__input::placeholder {
	color: var(--wc-ink-faint);
	opacity: 1;
}

.wc-form__input:hover {
	border-color: #cdd6cc;
}

.wc-form__input:focus {
	outline: none;
	background: var(--wc-paper);
	border-color: var(--wc-forest);
	box-shadow: 0 0 0 3px rgba(105, 185, 186, 0.22);
}

.wc-form__selectwrap {
	position: relative;
}

.wc-form__selecticon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 0.72rem;
	color: var(--wc-ink-faint);
}

.wc-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: 0.97rem;
	color: var(--wc-ink-soft);
	line-height: 1.55;
}

.wc-form__checkbox input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wc-form__checkbox-box {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	border: 1px solid var(--wc-line);
	border-radius: 3px;
	background: var(--wc-paper);
	color: transparent;
	font-size: 0.66rem;
	transition: border-color 0.25s var(--wc-ease), background-color 0.25s var(--wc-ease),
		color 0.25s var(--wc-ease);
}

.wc-form__checkbox input:checked+.wc-form__checkbox-box {
	background: var(--wc-forest);
	border-color: var(--wc-forest);
	color: #fff;
}

.wc-form__checkbox input:focus-visible+.wc-form__checkbox-box {
	box-shadow: 0 0 0 3px rgba(105, 185, 186, 0.28);
}

/* Validation — the required border turns red. */
.wc-form__field.is-invalid .wc-form__input,
.wc-form__field.is-invalid .wc-form__checkbox-box {
	border-color: var(--wc-danger);
	background-color: rgba(179, 38, 30, 0.03);
}

.wc-form__field.is-invalid .wc-form__input:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.wc-form__error {
	display: none;
	margin-top: 6px;
	font-size: 0.845rem;
	line-height: 1.45;
	color: var(--wc-danger);
}

.wc-form__field.is-invalid .wc-form__error {
	display: block;
}

.wc-form__foot {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.wc-form__consent {
	margin: 0;
	font-size: 0.855rem;
	line-height: 1.6;
	color: var(--wc-ink-faint);
	max-width: 52ch;
}

.wc-form__submit[disabled] {
	opacity: 0.62;
	pointer-events: none;
}

.wc-form__message {
	display: none;
	margin-top: 20px;
	padding: 15px 18px;
	border-radius: 3px;
	font-size: 0.96rem;
	line-height: 1.6;
}

.wc-form__message.is-success {
	display: block;
	background: var(--wc-forest-soft);
	border-left: 3px solid var(--wc-forest);
	color: var(--wc-forest);
}

.wc-form__message.is-error {
	display: block;
	background: rgba(179, 38, 30, 0.07);
	border-left: 3px solid var(--wc-danger);
	color: var(--wc-danger);
}

.wc-form.is-sent .wc-form__grid,
.wc-form.is-sent .wc-form__foot {
	display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wc-footer {
	position: relative;
	background: var(--wc-forest-deep);
	color: rgba(255, 255, 255, 0.74);
}

/* The page's last three bands — the closing section, this one and the footer
   body — were all forest, so the whole tail of the page read as one block and
   nothing marked where the content ended and the footer began. This band is
   the break: white at the top, where it meets the dark closing section, easing
   through the brand greens into the footer it introduces. */
.wc-footer__cta {
	position: relative;
	color: var(--wc-ink);
	background:
		radial-gradient(88% 120% at 92% 6%, rgba(105, 185, 186, 0.26), rgba(105, 185, 186, 0) 62%),
		radial-gradient(70% 100% at 6% 100%, rgba(0, 66, 37, 0.09), rgba(0, 66, 37, 0) 64%),
		linear-gradient(180deg, #ffffff 0%, #fbfdfb 40%, var(--wc-forest-soft) 100%);
}

/* Hairlines top and bottom: one against the dark section above, one against
   the footer below, so the band is read as a panel of its own. */
.wc-footer__cta::before,
.wc-footer__cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
}

.wc-footer__cta::before {
	top: 0;
	background: linear-gradient(90deg, rgba(105, 185, 186, 0.55), rgba(105, 185, 186, 0.12));
}

.wc-footer__cta::after {
	bottom: 0;
	background: rgba(0, 66, 37, 0.14);
}

.wc-footer__cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: clamp(44px, 6vw, 78px);
}

.wc-footer__cta-title {
	color: var(--wc-forest);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	max-width: 18ch;
	margin-bottom: 0.5em;
}

.wc-footer__cta-text {
	margin: 0;
	max-width: 54ch;
	color: var(--wc-ink-soft);
	font-size: 1.02rem;
}

/* Both marks, the same way round as the header, but carried by the columns
   rather than by a band of their own: the home link opens the first column,
   the second mark closes the last. A band cost a whole row of height for two
   images, which is what made the footer overlong. */
.wc-footer__brand {
	display: block;
	line-height: 0;
}

.wc-footer__brand img {
	width: clamp(118px, 13vw, 168px);
}

.wc-footer__brandmark {
	margin-bottom: clamp(22px, 2.6vw, 32px);
}

/* Pushed to the foot of the row, so it sits on the baseline of the columns
   rather than crowding the contact details above it. */
.wc-footer__col--contact {
	display: flex;
	flex-direction: column;
}

.wc-footer__col--contact .wc-footer__brand--alt {
	margin-top: 0;
	padding-top: clamp(30px, 4vw, 52px);
}

.wc-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
	gap: clamp(30px, 3.4vw, 56px);
	padding-block: clamp(52px, 6.5vw, 90px);
}

.wc-footer__brandline {
	max-width: 40ch;
	color: #fff;
	font-family: var(--wc-sans);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
	margin: 18px 0 10px;
}

.wc-footer__statement {
	max-width: 40ch;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

.wc-footer__coltitle--social {
	margin-top: 34px;
	margin-bottom: 14px;
}

.wc-footer__social {
	list-style: none;
	display: flex;
	gap: 10px;
	margin-top: 26px;
}

/* The heading already provides the separation. */
.wc-footer__coltitle--social+.wc-footer__social {
	margin-top: 0;
}

.wc-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--wc-line-dark);
	border-radius: var(--wc-radius);
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: background-color 0.3s var(--wc-ease), border-color 0.3s var(--wc-ease),
		color 0.3s var(--wc-ease);
}

.wc-footer__social a:hover {
	background: var(--wc-teal);
	border-color: var(--wc-teal);
	color: var(--wc-forest-deep);
}

.wc-footer__coltitle {
	color: #fff;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.wc-footer__menu,
.wc-footer__contact,
.wc-footer__legalmenu {
	list-style: none;
}

.wc-footer__menu li+li {
	margin-top: 11px;
}

.wc-footer__menu a {
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.98rem;
	text-decoration: none;
	transition: color 0.25s var(--wc-ease);
}

.wc-footer__menu a:hover {
	color: #fff;
}

.wc-footer__menu--policies li+li {
	margin-top: 9px;
}

.wc-footer__menu--policies a {
	font-size: 0.925rem;
	line-height: 1.5;
	display: inline-block;
}

.wc-footer__contact li {
	display: flex;
	gap: 12px;
	font-size: 0.98rem;
	line-height: 1.6;
}

.wc-footer__contact li+li {
	margin-top: 14px;
}

.wc-footer__contact i {
	color: var(--wc-teal);
	font-size: 0.85em;
	margin-top: 0.42em;
}

.wc-footer__contact a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.wc-footer__contact a:hover {
	color: #fff;
	text-decoration: underline;
}

.wc-footer__widgets {
	padding-bottom: 40px;
}

.wc-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 26px;
	border-top: 1px solid var(--wc-line-dark);
	font-size: 0.885rem;
	color: rgba(255, 255, 255, 0.56);
}

.wc-footer__copy {
	margin: 0;
}

.wc-footer__legalmenu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.wc-footer__legalmenu a {
	color: rgba(255, 255, 255, 0.56);
	text-decoration: none;
}

.wc-footer__legalmenu a:hover {
	color: #fff;
}

.wc-totop {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 80;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--wc-forest);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.35s var(--wc-ease), transform 0.35s var(--wc-ease),
		visibility 0.35s, background-color 0.3s var(--wc-ease);
}

.wc-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wc-totop:hover {
	background: var(--wc-teal-deep);
}

/* ==========================================================================
   Interior pages, archive, 404
   ========================================================================== */

.wc-pagehead {
	padding-top: calc(var(--wc-header-h) + clamp(56px, 8vw, 108px));
	padding-bottom: clamp(28px, 4vw, 52px);
	background: var(--wc-tint);
}

.wc-pagehead__title {
	font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);
	max-width: 20ch;
}

.wc-pagehead__lead {
	margin-top: 18px;
	max-width: 60ch;
}

/* Banner variant — an image behind the title, set per page from the
   dashboard. Falls back to the plain tinted band above when no image is
   chosen, so pages without one are unaffected. */
.wc-pagehead--banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(380px, 44vw, 560px);
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--wc-forest-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.wc-pagehead__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.wc-pagehead__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--wc-pagehead-focus-x, 50%) var(--wc-pagehead-focus-y, 38%);
}

.wc-pagehead__wash {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(190deg, rgba(0, 40, 23, 0.35) 0%, rgba(0, 33, 19, 0.78) 100%),
		linear-gradient(to top, rgba(0, 33, 19, 0.55) 0%, rgba(0, 33, 19, 0) 55%);
}

.wc-pagehead--banner .wc-pagehead__title {
	position: relative;
	color: #fff;
}

.wc-pagehead--banner .wc-pagehead__lead {
	position: relative;
	color: rgba(255, 255, 255, 0.86);
}

.wc-archive__item {
	padding-block: clamp(24px, 3vw, 40px);
	border-bottom: 1px solid var(--wc-line);
}

.wc-archive__title {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	margin-bottom: 0.5em;
}

.wc-archive__title a {
	text-decoration: none;
}

.wc-archive__excerpt {
	color: var(--wc-ink-soft);
	max-width: 68ch;
}

.wc-404 {
	padding-top: calc(var(--wc-header-h) + clamp(64px, 9vw, 128px));
	text-align: left;
}

.wc-404__code {
	font-family: var(--wc-sans);
	font-size: clamp(3.4rem, 2rem + 6vw, 7rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wc-teal-tint);
	margin-bottom: 0.2em;
}

.wc-404__text {
	max-width: 52ch;
	color: var(--wc-ink-soft);
	margin-bottom: 2rem;
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.wc-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.75s var(--wc-ease), transform 0.75s var(--wc-ease);
	transition-delay: var(--wc-delay, 0ms);
}

.wc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.no-js .wc-reveal {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.wc-editorial {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	.wc-header__inner {
		gap: 20px;
	}
}

@media (max-width: 1024px) {
	:root {
		--wc-header-h: 76px;
	}

	.wc-nav {
		display: none;
	}

	.wc-burger {
		display: block;
	}

	.wc-header__phone {
		display: none;
	}

	.wc-header__actions {
		margin-inline-start: auto;
	}

	.wc-statement__grid,
	.wc-triggers__grid,
	.wc-closing__grid,
	.wc-audience__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-triggers__media::before {
		inset: 18px 18px -18px -18px;
	}

	.wc-statement__media,
	.wc-triggers__media {
		max-width: 520px;
	}

	.wc-figure__img,
	.wc-figure--tall .wc-figure__img {
		aspect-ratio: 16 / 10;
	}

	.wc-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wc-footer__brandcol {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.wc-editorial {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* In the margin on desktop; a divider line on small screens — never an
	   eyebrow sitting directly above the heading. */
	.wc-gutter {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding-top: 0;
		padding-bottom: 22px;
		margin-bottom: 26px;
		border-bottom: 1px solid var(--wc-line);
	}

	.wc-gutter__rule {
		flex: 1;
		width: auto;
	}

	.wc-gutter__label {
		max-width: none;
	}

	.wc-section--dark .wc-gutter {
		border-bottom-color: var(--wc-line-dark);
	}

	.wc-gutter--inline {
		border-bottom: 1px solid var(--wc-line);
		padding-bottom: 22px;
	}

	.wc-section--dark .wc-gutter--inline {
		border-bottom-color: var(--wc-line-dark);
	}

	.wc-hero__band-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.wc-hero__cue {
		display: none;
	}
}

@media (max-width: 860px) {
	.wc-ghost {
		display: none;
	}

	.wc-splithead {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(20px, 3vw, 28px);
	}

	.wc-splithead .wc-h2 {
		max-width: 19ch;
	}

	.wc-splithead .wc-lead {
		padding-bottom: 0;
	}

	.wc-slab {
		border-radius: 0 var(--wc-radius) var(--wc-radius) 0;
	}

	.wc-slab__mark {
		display: none;
	}

	.wc-slab__text {
		max-width: none;
	}

	.wc-triggers__media::before {
		display: none;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 1.02rem;
	}

	.wc-formcard .wc-form__consent {
		margin-left: 0;
		max-width: none;
		text-align: left;
	}

	.wc-trigger {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.wc-trigger__marker {
		width: 42px;
		height: 42px;
	}

	.wc-hero {
		min-height: 0;
		padding-bottom: 0;
	}

	.wc-hero__inner {
		padding-block: clamp(56px, 12vh, 92px);
	}

	.wc-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-form__field--half {
		grid-column: 1 / -1;
	}

	.wc-footer__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-footer__cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.wc-totop {
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   Motion and print
   ========================================================================== */

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

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

	.wc-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {

	.wc-header,
	.wc-mobile,
	.wc-totop,
	.wc-hero__cue,
	.wc-footer__cta {
		display: none !important;
	}

	body {
		color: #000;
	}
}

/* ==========================================================================
   Process list

   An ordered sequence of stages or phases — How It Works' engagement arc, and
   its compact variant for the day-by-day breakdown beneath it. Built from the
   same numbered-index language as .wc-method rather than a new visual idea,
   just laid out as a single running column instead of a grid of cards, since a
   sequence reads as a sequence and a grid reads as a set of choices.
   ========================================================================== */

.wc-process__list {
	list-style: none;
	border-top: 1px solid var(--wc-line);
}

.wc-process__item {
	display: grid;
	grid-template-columns: clamp(52px, 6vw, 84px) minmax(0, 1fr);
	gap: clamp(16px, 3vw, 32px);
	padding-block: clamp(22px, 3vw, 36px);
	border-bottom: 1px solid var(--wc-line);
}

.wc-process__index {
	font-family: var(--wc-sans);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	font-weight: 500;
	line-height: 1;
	color: var(--wc-teal-deep);
}

.wc-process__title {
	font-family: var(--wc-sans);
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
	font-weight: 500;
	margin: 0 0 8px;
}

.wc-process__text {
	color: var(--wc-ink-soft);
	max-width: 62ch;
}

/* The compact modifier for a denser sub-sequence — How It Works' day-by-day
   breakdown sits inside the engagement arc's first phase, so it reads at a
   smaller scale with its own light card rather than competing with the outer
   list's rhythm. */
.wc-process--compact {
	margin-top: clamp(28px, 4vw, 44px);
	padding: clamp(20px, 3vw, 32px);
	background: var(--wc-tint);
	border-radius: var(--wc-radius);
}

.wc-process__subhead {
	font-family: var(--wc-sans);
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	font-weight: 500;
	color: var(--wc-forest);
	margin: 0 0 12px;
}

.wc-process--compact .wc-process__list {
	border-top: none;
}

.wc-process--compact .wc-process__item {
	grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1fr);
	padding-block: clamp(16px, 2.4vw, 24px);
	border-bottom-color: var(--wc-line-dark);
	border-bottom-color: rgba(0, 66, 37, 0.1);
}

.wc-process--compact .wc-process__item:last-child {
	border-bottom: none;
}

.wc-process--compact .wc-process__index {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
	color: var(--wc-forest);
	opacity: 0.55;
}

.wc-process--compact .wc-process__title {
	font-size: 1rem;
}

.wc-process__output {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	font-family: var(--wc-sans);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--wc-forest);
}

.wc-process__output i {
	font-size: 0.72rem;
	color: var(--wc-teal-deep);
}

/* ==========================================================================
   Case studies

   Track Record's list: trigger, method, outcome, in the spirit of a
   professional assurance record rather than a marketing case-study grid. The
   field labels borrow the contact card's small-caps treatment, since that is
   already the site's pattern for a label sitting beside a value — not a new
   kind of heading.
   ========================================================================== */

.wc-cases__list {
	list-style: none;
	border-top: 1px solid var(--wc-line);
}

.wc-case {
	padding-block: clamp(28px, 3.6vw, 44px);
	border-bottom: 1px solid var(--wc-line);
}

.wc-case__sector {
	display: block;
	font-family: var(--wc-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wc-teal-deep);
	margin-bottom: 8px;
}

.wc-case__title {
	font-family: var(--wc-sans);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	font-weight: 500;
	margin: 0 0 14px;
}

.wc-case__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
	margin-bottom: 16px;
}

.wc-case__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wc-case__label {
	font-family: var(--wc-sans);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wc-ink-faint);
}

.wc-case__value {
	font-size: 0.96rem;
	color: var(--wc-ink);
	line-height: 1.5;
}

.wc-case__text {
	color: var(--wc-ink-soft);
	max-width: 74ch;
}

@media (max-width: 700px) {
	.wc-case__meta {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.wc-process__item,
	.wc-process--compact .wc-process__item {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.wc-process__index {
		font-size: 1.3rem;
	}
}