/*
 * Emlura — colour journey and motion.
 *
 * Loaded after approved.css and wp-bridge.css.
 *
 * The approved build alternates pale and navy, but four of the homepage's eight
 * bands are effectively white, so the page reads as a long empty stretch broken
 * by two dark blocks. This layer replaces that with a journey: the visitor moves
 * from light, through a warm accent, into depth, and back out through warmth
 * before the footer closes it.
 *
 *   hero        ice        light blue, not white
 *   strip       orange     the accent beat
 *   problem     mist       a deeper blue tint
 *   services    deep navy  the first anchor
 *   framework   sky        a real blue field — the biggest step
 *   local       deep navy  the second anchor
 *   cta         sand       warm, a change of temperature before the end
 *   footer      deepest    the close
 *
 * Two constraints govern everything here:
 *
 *   1. Three hues only. The brand is navy, blue and orange, sampled from the
 *      logo itself. `tools/design-parity/audit-palette.js` fails the build on a
 *      fourth.
 *   2. Colour may not cost readability. Tinting a background lowers contrast, so
 *      body copy is darkened to match. Every pair is checked by
 *      `tools/design-parity/audit-contrast.js` against WCAG AA.
 *
 * No width, height, padding or margin is set in this file. Depth is drawn with
 * gradients, inset shadows and pseudo-elements, never with borders or spacing,
 * so nothing here can move the layout the approved design specifies.
 */

:root {
	/*
	 * The journey, light to deep.
	 *
	 * These are as saturated as the type allows. The binding constraint is the
	 * 11px kicker, not the body copy: each step was pushed down until the
	 * kicker sat just above AA, then stopped. Going further would mean either
	 * unreadable labels or a fifth hue.
	 */
	--paper: #f7fbff;
	--ice: #e4eefb;
	--mist: #d8e6f7;
	--sky: #c6dbf4;
	--sand: #f8ddab;
	--deep: #04173d;
	--deepest: #001536;

	/*
	 * Body copy on light sections. The approved --slate (#667085) clears AA on
	 * pure white by a hair (4.97:1) and fails on every tint, so it could not
	 * survive a coloured background. This is the same neutral pulled toward navy
	 * — darker, on-brand, and comfortable on all four tints.
	 */
	--slate: #3d5273;

	/*
	 * Small blue labels. Brand blue at 11px reads 3.84:1 on the sky band. This
	 * is the same hue (211°) taken deeper until it clears AA on every band —
	 * which is also what let the bands themselves go this deep. Headlines,
	 * buttons and the hero accent keep the vivid --blue.
	 */
	--blue-ink: #0857ad;

	--glow-blue: #0878e824;
	--glow-orange: #f6a30026;

	/* One curve, two speeds, so the whole site moves as one thing. */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--fast: .22s;
	--slow: .45s;
}

/* ---------------------------------------------------------------------------
 * 1. Small blue text, deepened
 *
 * Every selector approved.css colours with var(--blue) at label size, plus the
 * bridge aliases that stand in for them.
 * ------------------------------------------------------------------------- */

.eyebrow,
.section-kicker,
.step > span,
.step > .step-no,
.readiness-lens > span,
.readiness-lens > .lens-no,
.inner-heading > span,
.inner-heading > .heading-index,
.principle-grid article > span,
.sector-cards article > span,
.principle-grid article > .card-index,
.sector-cards article > .card-index,
.sector-cards a,
.sector-cards .card-link,
.stage-track span,
.stage-track article > .stage-no,
.belief-row span,
.belief-row .belief-label,
.text-link.blue {
	color: var(--blue-ink);
}

/* On dark bands the light blue already has plenty of contrast — leave it. */
.section-kicker.light,
.services .section-kicker,
.local .section-kicker,
.dark-band span,
.dimensions .section-kicker,
.context-section .section-kicker,
.contact-page .section-kicker {
	color: #6bb5ff;
}

/* ---------------------------------------------------------------------------
 * 2. The journey — light bands
 * ------------------------------------------------------------------------- */

body {
	background: var(--ice);
}

.hero {
	background:
		radial-gradient(circle at 74% 16%, #0878e82e, #0000 30%),
		linear-gradient(135deg, var(--ice) 0 58%, var(--sky) 58%);
}

/* The hero is blue-heavy on the right and bare on the lower left; a warm bloom
 * balances it and hands the eye to the orange strip below. */
.hero::before {
	content: "";
	position: absolute;
	inset: auto auto -200px -160px;
	width: 680px;
	height: 460px;
	background: radial-gradient(ellipse at center, var(--glow-orange), #0000 66%);
	pointer-events: none;
	z-index: 1;
}

.problem {
	background:
		radial-gradient(circle at 100% 0, #0878e824, #0000 32%),
		radial-gradient(circle at 6% 92%, var(--glow-orange), #0000 24%),
		linear-gradient(112deg, var(--ice) 0 38%, var(--mist) 100%);
}

.problem::before {
	background: linear-gradient(var(--orange), #f6a30000);
}

/* A measured grid under the right-hand column — the section is about
 * institutional structure, and that is where the space was emptiest. */
.problem-grid {
	position: relative;
}

.problem-grid::after {
	content: "";
	position: absolute;
	inset: -40px -8vw -40px 52%;
	background-image:
		linear-gradient(#0878e81a 1px, #0000 1px),
		linear-gradient(90deg, #0878e81a 1px, #0000 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, #0000 72%);
	mask-image: radial-gradient(ellipse at 70% 40%, #000, #0000 72%);
	pointer-events: none;
	z-index: 0;
}

.problem-grid > * {
	position: relative;
	z-index: 1;
}

/* The framework band is the biggest change: a true blue field rather than a
 * near-white one. It is the midpoint of the journey and now looks like it. */
.framework {
	background:
		radial-gradient(circle at 4% 92%, #0878e82b, #0000 32%),
		radial-gradient(circle at 96% 6%, var(--glow-orange), #0000 26%),
		linear-gradient(135deg, var(--mist) 0 28%, var(--sky) 100%);
}

/* Warm before the close, so the last thing before the footer is not more blue. */
.cta {
	background:
		radial-gradient(circle at 50% 120%, #0878e83d, #0000 54%),
		linear-gradient(150deg, var(--sand) 0 38%, var(--ice) 100%);
}

.inner-hero {
	background:
		radial-gradient(circle at 18% 0, #0878e82b, #0000 32%),
		radial-gradient(circle at 92% 96%, var(--glow-orange), #0000 26%),
		linear-gradient(125deg, var(--ice) 0 40%, var(--sky) 100%);
}

.inner-section,
.framework-page {
	background: linear-gradient(var(--ice) 0 18%, var(--mist) 100%);
}

.about-story {
	background: linear-gradient(125deg, var(--ice), var(--sky));
}

.inner-cta {
	background:
		radial-gradient(circle at 50% 122%, #0878e83d, #0000 54%),
		linear-gradient(150deg, var(--sand) 0 36%, var(--ice) 100%);
}

/* ---------------------------------------------------------------------------
 * 3. The journey — dark bands
 * ------------------------------------------------------------------------- */

.services {
	background:
		radial-gradient(circle at 88% 6%, #0878e870, #0000 34%),
		radial-gradient(circle at 6% 96%, #f6a3001c, #0000 26%),
		linear-gradient(145deg, var(--deep) 0 62%, #0743a0 100%);
}

.local {
	background: linear-gradient(120deg, var(--deep), #061f50 60%);
	position: relative;
	overflow: hidden;
}

.dark-band,
.dimensions,
.context-section,
.service-pages,
.image-break {
	background:
		radial-gradient(circle at 90% 10%, #0878e840, #0000 34%),
		linear-gradient(135deg, var(--deep), #0743a0);
}

footer {
	background: linear-gradient(160deg, var(--deepest), #04173d);
}

/* A hairline of light where a dark band meets a light one, so the seam reads as
 * deliberate rather than as a cut. */
.services::after,
.local::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, #0000, #f6a300a6 30%, #6cb7ffa6 70%, #0000);
	z-index: 3;
}

/* ---------------------------------------------------------------------------
 * 4. Surfaces that were flat white
 * ------------------------------------------------------------------------- */

.principle-grid article,
.sector-cards article,
.belief-row > div,
.stage-track article {
	background: linear-gradient(160deg, #fff 0 40%, var(--ice) 100%);
	box-shadow: inset 0 3px 0 0 #0878e800;
	transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--slow) var(--ease);
}

.principle-grid article:hover,
.sector-cards article:hover,
.belief-row > div:hover,
.stage-track article:hover {
	background: linear-gradient(160deg, #fff 0 28%, #d8e8fb 100%);
	box-shadow: inset 0 3px 0 0 var(--blue), 0 18px 40px #06245c26;
	transform: translateY(-4px);
	position: relative;
	z-index: 2;
}

/* The grid gaps that separate the cards read as lines, not as gutters. */
.principle-grid,
.sector-cards {
	background: #bcd0e8;
}

.belief-row {
	background: #bcd0e8;
}

.contrast {
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.contrast.muted {
	background: linear-gradient(140deg, #ffffffeb, #e7eef7eb);
}

.contrast.active {
	background: linear-gradient(120deg, #fff, #d6e9ff);
	box-shadow: 0 18px 50px #0878e82b;
}

.contrast:hover {
	transform: translateY(-3px);
}

.contrast.active:hover {
	box-shadow: 0 24px 60px #0878e83b;
}

.readiness-card {
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.readiness-card:hover {
	transform: translate(-15px, -5px);
	box-shadow: 0 32px 80px #06245c2b;
}

@media (width<=800px) {
	.readiness-card:hover {
		transform: translateY(-5px);
	}
}

.readiness-lens {
	background: linear-gradient(120deg, #ffffff00, #d9e8fa80);
	transition: background var(--slow) var(--ease);
}

.readiness-lens:hover {
	background: linear-gradient(120deg, #ffffff00, #cbe0f8b3);
}

.contact-page .contact-form-card {
	background: linear-gradient(170deg, #fff 0 60%, var(--ice) 100%);
}

/* ---------------------------------------------------------------------------
 * 5. Motion
 * ------------------------------------------------------------------------- */

.desktop-nav a,
.footer-nav a {
	transition: color var(--fast) var(--ease);
}

.nav-cta {
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

.nav-cta:hover {
	background: var(--blue);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px #06245c38;
}

/* The approved .text-link is a static underline; give it a travelling accent. */
.text-link {
	position: relative;
	transition: color var(--fast) var(--ease);
}

.text-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -1px;
	height: 1px;
	background: var(--orange);
	transition: right var(--slow) var(--ease);
}

.text-link:hover::after {
	right: 0;
}

.text-link span,
.button span,
.nav-cta span {
	display: inline-block;
	transition: transform var(--fast) var(--ease);
}

.text-link:hover span,
.button:hover span,
.nav-cta:hover span {
	transform: translate(3px, -3px);
}

/* Service rows already tint on hover; an orange indicator makes each row read as
 * a target rather than a stripe. */
.service-list article::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--orange);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--fast) var(--ease);
}

.service-list article:hover::before {
	transform: scaleY(1);
}

.service-list .service-arrow {
	transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.service-list article:hover .service-arrow {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--navy);
	transform: translate(4px, -4px);
}

.step > .step-no {
	transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.step:hover > .step-no {
	color: var(--orange);
	transform: translateX(4px);
}

.sector-tags .tag {
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.sector-tags .tag:hover {
	background: #0878e833;
	border-color: #6cb7ff;
	color: #fff;
	transform: translateY(-2px);
}

/* Imagery: a slow push-in, with the approved desaturation lifting on hover. */
.problem-image,
.services-visual,
.framework-image,
.inner-figure,
.image-break {
	overflow: hidden;
}

.problem-image img,
.services-visual img,
.framework-image img,
.inner-figure img,
.image-break img {
	transition: transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}

.problem-image:hover img,
.services-visual:hover img,
.framework-image:hover img,
.inner-figure:hover img,
.image-break:hover img {
	transform: scale(1.045);
	filter: saturate(1) contrast(1.06);
}

/*
 * No ambient animation.
 *
 * An always-running drift on the hero artwork was tried and removed: it keeps
 * the compositor awake for the whole visit, costs battery on mobile, and is not
 * what was asked for. Motion here answers the cursor, nothing else.
 */

.button {
	position: relative;
	overflow: hidden;
}

.button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, #0000 30%, #ffffff40 50%, #0000 70%);
	transform: translateX(-120%);
	transition: transform var(--slow) var(--ease);
}

.button:hover::after {
	transform: translateX(120%);
}

.button > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * 6. Focus states
 *
 * The approved build ships none. Anything that reacts to a cursor has to be
 * reachable from a keyboard.
 * ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * 7. Reduced motion
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.principle-grid article:hover,
	.sector-cards article:hover,
	.belief-row > div:hover,
	.stage-track article:hover,
	.contrast:hover,
	.readiness-card:hover,
	.nav-cta:hover,
	.sector-tags .tag:hover,
	.problem-image:hover img,
	.services-visual:hover img,
	.framework-image:hover img,
	.inner-figure:hover img,
	.image-break:hover img {
		transform: none;
	}
}