/* =========================================================================
   T-EMERALDS — design system
   Step-cut: chamfered frames, facet hairlines, brass on deep pine.
   ========================================================================= */

:root {
	/* Ground */
	--ink: #08130f;
	--pine: #0c1d17;
	--moss: #12291f;
	--slate: #17342a;

	/* Light ground */
	--chalk: #eff0ea;
	--paper: #f7f7f3;

	/* Ink */
	--fog: #9aaaa1;
	--stone: #6f7f77;

	/* Accents */
	--emerald: #12996a;
	--mint: #8fd6b6;
	--brass: #c6a05e;
	--brass-soft: rgba(198, 160, 94, 0.26);

	/* Hairlines */
	--hair: rgba(198, 160, 94, 0.22);
	--hair-strong: rgba(198, 160, 94, 0.5);
	--hair-dark: rgba(8, 19, 15, 0.14);

	/* Type */
	--display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Rhythm */
	--gutter: clamp(20px, 5vw, 64px);
	--max: 1360px;
	--sec: clamp(72px, 11vw, 152px);
	--chamfer: 18px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- Reset */

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--chalk);
	font-family: var(--body);
	font-size: clamp(15px, 1.02vw, 17px);
	line-height: 1.62;
	font-weight: 350;
	letter-spacing: 0.002em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
}

::selection { background: var(--emerald); color: #fff; }

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--brass);
	color: var(--ink);
	padding: 12px 20px;
	font: 500 13px/1 var(--mono);
}
.skip:focus { left: 12px; top: 12px; }

.sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- Layout */

.wrap {
	width: min(100% - (var(--gutter) * 2), var(--max));
	margin-inline: auto;
}

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: calc(var(--sec) * 0.62); }
.section--light { background: var(--chalk); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--pine { background: var(--pine); }

.section--light .eyebrow,
.section--paper .eyebrow { color: var(--stone); }

.rule {
	height: 1px;
	background: var(--hair);
	border: 0;
	margin: 0;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}

/* --------------------------------------------------------- Typography */

.display {
	font-family: var(--display);
	font-weight: 300;
	font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
	line-height: 1.02;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.d1 { font-size: clamp(2.6rem, 6.6vw, 5.6rem); }
.d2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.d3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.14; }

.lead {
	font-size: clamp(1.02rem, 1.35vw, 1.24rem);
	line-height: 1.55;
	color: var(--fog);
	max-width: 62ch;
}
.section--light .lead,
.section--paper .lead { color: var(--stone); }

.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fog);
}
.eyebrow__i { color: var(--brass); }
.eyebrow .dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.mono {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------- Step-cut signature */

.frame {
	position: relative;
	overflow: hidden;
	clip-path: polygon(
		var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
		calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
	);
	background: var(--moss);
}

.frame__step {
	position: absolute;
	inset: 10px;
	pointer-events: none;
	border: 1px solid rgba(239, 240, 234, 0.16);
	clip-path: polygon(
		12px 0, 100% 0, 100% calc(100% - 12px),
		calc(100% - 12px) 100%, 0 100%, 0 12px
	);
	transition: inset 0.5s var(--ease), border-color 0.5s var(--ease);
}

a:hover .frame__step { inset: 16px; border-color: var(--brass-soft); }

.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Facet sweep — the one piece of ambient motion on the page. */
.sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(198, 160, 94, 0.14) 48%, rgba(143, 214, 182, 0.1) 52%, transparent 62%);
	transform: translateX(-120%);
	pointer-events: none;
}
.sweep.is-in::after { animation: sweep 2.4s var(--ease) 0.3s both; }

@keyframes sweep {
	to { transform: translateX(120%); }
}

/* ------------------------------------------------------------ Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.btn--primary { background: var(--brass); color: var(--ink); }
.btn--primary:hover { background: var(--mint); }

.btn--ghost {
	border: 1px solid var(--hair-strong);
	color: var(--chalk);
}
.btn--ghost:hover { background: rgba(198, 160, 94, 0.1); border-color: var(--brass); }

.section--light .btn--ghost,
.section--paper .btn--ghost { color: var(--ink); border-color: rgba(8, 19, 15, 0.28); }

.btn--line {
	padding: 0 0 6px;
	border-bottom: 1px solid var(--hair-strong);
	clip-path: none;
}
.btn--line:hover { border-color: var(--brass); color: var(--brass); }

.btn__a { transition: transform 0.35s var(--ease); }
.btn:hover .btn__a { transform: translateX(4px); }

.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ------------------------------------------------------------- Header */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: transparent;
	transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(8, 19, 15, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--hair);
}

.hbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 78px;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--display);
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--chalk);
}
.brand b { font-weight: 400; }
.brand em {
	font: 500 10px/1 var(--mono);
	font-style: normal;
	letter-spacing: 0.2em;
	color: var(--brass);
}

.nav { display: none; }

@media (min-width: 1060px) {
	.nav { display: block; }
	.nav__list { display: flex; align-items: center; gap: 4px; }
	.nav__item { position: relative; }

	.nav__link {
		display: block;
		padding: 12px 16px;
		font-family: var(--mono);
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fog);
		transition: color 0.3s var(--ease);
	}
	.nav__link:hover, .is-current > .nav__link { color: var(--chalk); }
	.nav__toggle { display: none; }

	.mega {
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		transform: translate(-50%, 8px);
		min-width: 460px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
	}
	.nav__item:hover > .mega,
	.nav__item:focus-within > .mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.mega__inner {
		background: var(--pine);
		border: 1px solid var(--hair);
		padding: 12px;
		clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	}
	.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
	.mega__link {
		display: block;
		padding: 12px 14px;
		transition: background 0.25s var(--ease);
	}
	.mega__link > span:first-child { font-size: 14px; color: var(--chalk); }
	.mega__link:hover { background: var(--moss); }
	.mega__desc {
		display: block;
		margin-top: 2px;
		font-family: var(--mono);
		font-size: 10.5px;
		letter-spacing: 0.08em;
		color: var(--stone);
	}
}

.hactions { display: flex; align-items: center; gap: 14px; }
.hactions .btn { padding: 12px 20px; }
.hcall { display: none; }
@media (min-width: 780px) {
	.hcall {
		display: block;
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: 0.08em;
		color: var(--fog);
	}
	.hcall:hover { color: var(--brass); }
}

.burger {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	background: none;
	border: 1px solid var(--hair);
	cursor: pointer;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger span {
	display: block;
	width: 18px; height: 1px;
	background: var(--chalk);
	transition: transform 0.3s var(--ease), opacity 0.3s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
	position: fixed;
	inset: 78px 0 0;
	z-index: 99;
	background: var(--ink);
	padding: 32px var(--gutter) 60px;
	overflow-y: auto;
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1060px) { .drawer { display: none; } }

.drawer .nav__list { display: block; }
.drawer .nav__item { border-bottom: 1px solid var(--hair); position: relative; }
.drawer .nav__link {
	display: block;
	padding: 20px 0;
	font-family: var(--display);
	font-size: 26px;
	color: var(--chalk);
}
.drawer .nav__toggle {
	position: absolute;
	right: 0; top: 16px;
	width: 40px; height: 40px;
	background: none;
	border: 1px solid var(--hair);
	cursor: pointer;
	color: var(--fog);
}
.drawer .mega {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s var(--ease);
}
.drawer .nav__item.is-open .mega { grid-template-rows: 1fr; }
.drawer .mega__inner { overflow: hidden; }
.drawer .mega__link {
	display: block;
	padding: 10px 0 10px 18px;
	border-left: 1px solid var(--hair);
	color: var(--fog);
}
.drawer .mega__desc { display: none; }

/* ---------------------------------------------------------- 01. Hero */

.hero {
	position: relative;
	padding-block: clamp(140px, 18vh, 210px) clamp(60px, 8vw, 100px);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 78% 8%, rgba(18, 153, 106, 0.16), transparent 60%),
		radial-gradient(80% 60% at 8% 100%, rgba(198, 160, 94, 0.09), transparent 65%),
		var(--ink);
	z-index: -2;
}

/* The facet grid: a step-cut table seen from above. */
.hero__facets {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.5;
	mask-image: radial-gradient(72% 70% at 70% 30%, #000 20%, transparent 78%);
}
.hero__facets line { stroke: var(--brass); stroke-width: 0.4; opacity: 0.45; }
.hero__facets polygon { fill: none; stroke: var(--mint); stroke-width: 0.5; opacity: 0.25; }

.hero__inner { position: relative; }

.hero__title { max-width: 17ch; margin-bottom: 28px; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
	display: block;
	transform: translateY(105%);
	animation: rise 1s var(--ease) forwards;
}
.hero__title .ln:nth-child(2) > span { animation-delay: 0.09s; }
.hero__title .ln:nth-child(3) > span { animation-delay: 0.18s; }

@keyframes rise { to { transform: none; } }

.hero__lead { margin-bottom: 40px; max-width: 54ch; }
.hero__cta { margin-bottom: clamp(56px, 8vw, 96px); }

.hero__ledger {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--hair);
	border: 1px solid var(--hair);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
@media (min-width: 760px) { .hero__ledger { grid-template-columns: repeat(4, 1fr); } }

.hero__ledger .metric {
	background: var(--ink);
	padding: 26px clamp(18px, 2vw, 30px);
	margin: 0;
}

.metrics { display: grid; gap: 1px; }
.metric__v {
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--chalk);
}
.section--light .metric__v, .section--paper .metric__v { color: var(--ink); }
.metric__l {
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}

/* -------------------------------------------------------- 02. Trust */

.trust {
	border-block: 1px solid var(--hair);
	padding-block: 26px;
	background: var(--pine);
	overflow: hidden;
}
.trust__row {
	display: flex;
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	flex-wrap: wrap;
	justify-content: center;
}
.trust__label {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stone);
}
.trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--fog);
	transition: color 0.3s var(--ease);
}
.trust__item:hover { color: var(--chalk); }
.trust__item svg { color: var(--brass); flex: none; }
.trust__item b { font-weight: 500; color: var(--chalk); }

/* ---------------------------------------------------- 03. Statement */

.statement { background: var(--chalk); color: var(--ink); }
.statement__q {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.75rem, 4.1vw, 3.35rem);
	line-height: 1.14;
	letter-spacing: -0.02em;
	max-width: 22ch;
	text-wrap: balance;
}
.statement__q .hl {
	background-image: linear-gradient(var(--brass), var(--brass));
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 0 92%;
	transition: background-size 1.1s var(--ease) 0.2s;
}
.statement.is-in .statement__q .hl { background-size: 100% 1px; }

.statement__side {
	border-left: 1px solid var(--hair-dark);
	padding-left: clamp(20px, 3vw, 40px);
}
.statement__side p { color: var(--stone); }

/* ------------------------------------------------- 04. Selected work */

.shead {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: clamp(36px, 5vw, 64px);
}
.shead__t { max-width: 18ch; }

.works {
	display: grid;
	gap: clamp(24px, 3vw, 44px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.wcard__media { aspect-ratio: 4 / 3; }
.wcard--lead { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.wcard--lead { display: grid; grid-template-columns: 1.25fr 1fr; }
	.wcard--lead .wcard__link { display: contents; }
	.wcard--lead .wcard__media { aspect-ratio: 16 / 10; }
	.wcard--lead .wcard__body { align-self: center; padding-left: clamp(24px, 3vw, 48px); }
}

.wcard__body { padding-top: 22px; }
.wcard__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.3rem, 1.9vw, 1.72rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
}
.wcard__h { margin-top: 10px; color: var(--fog); font-size: 15px; }
.section--light .wcard__h { color: var(--stone); }

.wcard__m {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--hair);
}
.wcard__m li b {
	display: block;
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 300;
}
.wcard__m li span {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}
.wcard__img--empty {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--moss), var(--slate));
}

/* ----------------------------------------------- 05. Capabilities */

.caps { border-top: 1px solid var(--hair); }

.cap {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px 28px;
	align-items: baseline;
	padding: clamp(24px, 3vw, 34px) 0;
	border-bottom: 1px solid var(--hair);
	transition: padding-left 0.4s var(--ease);
}
@media (min-width: 900px) {
	.cap { grid-template-columns: 90px minmax(0, 4fr) minmax(0, 5fr) auto; align-items: center; }
	.cap:hover { padding-left: 18px; }
}

.cap__k {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--brass);
}
.cap__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.5vw, 2.15rem);
	letter-spacing: -0.018em;
	line-height: 1.06;
}
.cap__d { color: var(--fog); font-size: 15px; margin: 0; }
.cap__a {
	justify-self: end;
	color: var(--brass);
	transition: transform 0.4s var(--ease);
}
.cap:hover .cap__a { transform: translateX(6px); }

.cap::before {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 0; height: 1px;
	background: var(--brass);
	transition: width 0.55s var(--ease);
}
.cap:hover::before { width: 100%; }

/* ------------------------------------------------------ 06. Process */

.steps {
	display: grid;
	gap: 1px;
	background: var(--hair);
	border: 1px solid var(--hair);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
	background: var(--ink);
	padding: clamp(26px, 3vw, 40px);
	position: relative;
}
.section--pine .step { background: var(--pine); }
.step__n {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--brass);
	margin-bottom: 22px;
	display: block;
}
.step__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.42rem;
	margin-bottom: 12px;
}
.step__d { color: var(--fog); font-size: 14.5px; margin: 0; }
.step__w {
	margin-top: 20px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}

/* ------------------------------------------- 07. Featured case study */

.fcase { background: var(--moss); position: relative; overflow: hidden; }
.fcase__grid { display: grid; gap: clamp(30px, 4vw, 60px); align-items: center; }
@media (min-width: 960px) { .fcase__grid { grid-template-columns: 1.05fr 1fr; } }

.fcase__media { aspect-ratio: 5 / 4; }
.fcase__t { max-width: 16ch; margin-bottom: 20px; }
.fcase__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 28px;
	margin: 34px 0;
	padding-top: 28px;
	border-top: 1px solid var(--hair);
}
.fcase__quote {
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.4;
	color: var(--mint);
	border-left: 1px solid var(--brass);
	padding-left: 20px;
	margin: 30px 0;
}

/* --------------------------------------------------- 08. Industries */

.inds {
	display: grid;
	gap: 1px;
	background: var(--hair-dark);
	border: 1px solid var(--hair-dark);
}
@media (min-width: 700px) { .inds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .inds { grid-template-columns: repeat(4, 1fr); } }

.ind {
	background: var(--chalk);
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 300px;
	transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.ind:hover { background: var(--ink); color: var(--chalk); }
.ind__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.72rem;
	letter-spacing: -0.015em;
}
.ind__d { color: var(--stone); font-size: 14.5px; margin: 0; flex: 1; }
.ind:hover .ind__d { color: var(--fog); }
.ind__m {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--emerald);
}
.ind:hover .ind__m { color: var(--mint); }

/* ------------------------------------------ 09. Data & performance */

.data__grid { display: grid; gap: clamp(30px, 4vw, 60px); }
@media (min-width: 960px) { .data__grid { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.ledger {
	border: 1px solid var(--hair);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.ledger__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px clamp(20px, 2.4vw, 30px);
	border-bottom: 1px solid var(--hair);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__k {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fog);
}
.ledger__v {
	font-family: var(--display);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--mint);
}
.ledger__foot {
	padding: 16px clamp(20px, 2.4vw, 30px);
	background: rgba(198, 160, 94, 0.06);
	border-top: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: var(--stone);
	text-transform: uppercase;
}

/* -------------------------------------------------- 10. Why us */

.reasons { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 800px) { .reasons { grid-template-columns: repeat(3, 1fr); } }

.reason { border-top: 1px solid var(--hair); padding-top: 22px; }
.reason__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.3rem;
	margin-bottom: 10px;
}
.reason__d { color: var(--fog); font-size: 14.5px; margin: 0; }
.section--light .reason { border-color: var(--hair-dark); }
.section--light .reason__d { color: var(--stone); }

/* ------------------------------------------------- 11. Thinking */

.icards {
	display: grid;
	gap: 1px;
	background: var(--hair);
	border-block: 1px solid var(--hair);
}
@media (min-width: 780px) { .icards { grid-template-columns: repeat(3, 1fr); } }

.icard { background: var(--ink); }
.section--pine .icard { background: var(--pine); }
.icard__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: clamp(26px, 3vw, 38px);
	transition: background 0.35s var(--ease);
}
.icard__link:hover { background: var(--moss); }
.icard__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.34rem;
	line-height: 1.16;
	letter-spacing: -0.012em;
}
.icard__x { color: var(--fog); font-size: 14.5px; margin: 0; flex: 1; }
.icard__r {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}

/* ----------------------------------------------------- 12. Final CTA */

.fcta {
	position: relative;
	background: var(--chalk);
	color: var(--ink);
	overflow: hidden;
}
.fcta__inner {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: end;
}
@media (min-width: 900px) { .fcta__inner { grid-template-columns: 1.2fr 1fr; } }
.fcta__t { max-width: 15ch; }
.fcta__x { color: var(--stone); }
.fcta__routes {
	display: grid;
	gap: 14px;
	border-top: 1px solid var(--hair-dark);
	padding-top: 22px;
}
.fcta__route {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hair-dark);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}
.fcta__route span:last-child { color: var(--stone); }
.fcta__route:hover { color: var(--emerald); }

/* --------------------------------------------------------- 13. Footer */

.site-footer { background: var(--ink); border-top: 1px solid var(--hair); }
.footer__top { display: grid; gap: clamp(34px, 4vw, 60px); padding-block: clamp(56px, 7vw, 90px); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); } }

.footer__note { color: var(--fog); max-width: 42ch; font-size: 14.5px; }
.footer__col h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 18px;
}
.footer__col li a {
	display: block;
	padding: 6px 0;
	font-size: 14.5px;
	color: var(--fog);
	transition: color 0.25s var(--ease);
}
.footer__col li a:hover { color: var(--chalk); }

.footer__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 30px;
	align-items: center;
	justify-content: space-between;
	padding-block: 26px;
	border-top: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--stone);
}
.footer__bar a:hover { color: var(--brass); }
.footer__social { display: flex; gap: 18px; }

/* ------------------------------------------------- Page scaffolding */

.phead { padding-block: clamp(140px, 16vh, 190px) clamp(40px, 5vw, 70px); }
.phead__t { max-width: 20ch; margin-bottom: 22px; }
.phead__s p:last-child { margin-bottom: 0; }

.crumbs { margin-bottom: 26px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hair-strong); }
.crumbs a:hover { color: var(--brass); }

/* Prose */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -0.015em;
	margin-top: 2em;
}
.prose h3 { font-family: var(--display); font-weight: 400; font-size: 1.28rem; margin-top: 1.7em; }
.prose p { color: var(--fog); }
.prose a { color: var(--mint); border-bottom: 1px solid var(--hair-strong); }
.prose a:hover { color: var(--brass); }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 22px; }
.prose ul li { list-style: none; position: relative; color: var(--fog); }
.prose ul li::before {
	content: "";
	position: absolute;
	left: -20px; top: 0.68em;
	width: 7px; height: 7px;
	background: var(--brass);
	clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}
.prose ol { counter-reset: n; }
.prose ol li { list-style: none; counter-increment: n; color: var(--fog); position: relative; }
.prose ol li::before {
	content: counter(n, decimal-leading-zero);
	position: absolute;
	left: -26px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--brass);
	top: 0.35em;
}
.prose blockquote {
	border-left: 1px solid var(--brass);
	padding-left: 22px;
	font-family: var(--display);
	font-size: 1.24rem;
	font-weight: 300;
	color: var(--chalk);
}
.prose img { margin-block: 1.6em; }
.section--light .prose p, .section--light .prose ul li, .section--light .prose ol li { color: var(--stone); }

/* Detail layout */
.detail { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) { .detail { grid-template-columns: minmax(0, 1fr) 300px; } }

.aside { align-self: start; position: sticky; top: 110px; display: grid; gap: 28px; }
.aside__b { border-top: 1px solid var(--hair); padding-top: 18px; }
.aside__k {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 10px;
}
.aside__l li { padding: 5px 0; color: var(--fog); font-size: 14px; }

/* Archive filters */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-block: 22px;
	border-block: 1px solid var(--hair);
	margin-bottom: clamp(34px, 4vw, 56px);
}
.filter {
	padding: 9px 18px;
	border: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fog);
	transition: all 0.3s var(--ease);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.filter:hover, .filter.is-on { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 70px);
}
.pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 12px;
	color: var(--fog);
}
.pager .current, .pager .page-numbers:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }

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

.form { display: grid; gap: 20px; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fog);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 14px 16px;
	background: rgba(239, 240, 234, 0.03);
	border: 1px solid var(--hair);
	color: var(--chalk);
	font: inherit;
	font-size: 15px;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--brass);
	background: rgba(239, 240, 234, 0.06);
	outline: none;
}
.field select option { background: var(--pine); color: var(--chalk); }
.field--hp { position: absolute; left: -9999px; }

.form__foot {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	justify-content: space-between;
}
.form__note { font-size: 12.5px; color: var(--stone); max-width: 40ch; margin: 0; }
.form__msg {
	grid-column: 1 / -1;
	padding: 16px 18px;
	border: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	display: none;
}
.form__msg.is-on { display: block; }
.form__msg.is-ok { border-color: var(--emerald); color: var(--mint); }
.form__msg.is-err { border-color: #c0653f; color: #e6a184; }

.contact__grid { display: grid; gap: clamp(34px, 4vw, 64px); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: 1.25fr 1fr; } }

.routes { display: grid; gap: 2px; }
.route {
	display: grid;
	gap: 4px;
	padding: 20px 0;
	border-bottom: 1px solid var(--hair);
}
.route__k {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
}
.route__v { font-size: 17px; }
.route a:hover { color: var(--mint); }

/* --------------------------------------------------------- Motion */

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-d="1"] { transition-delay: 0.08s; }
[data-reveal-d="2"] { transition-delay: 0.16s; }
[data-reveal-d="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.hero__title .ln > span { transform: none; }
}

/* --------------------------------------------------------- Utilities */

.col-6 { grid-column: span 12; }
.col-7 { grid-column: span 12; }
.col-5 { grid-column: span 12; }
@media (min-width: 900px) {
	.col-6 { grid-column: span 6; }
	.col-7 { grid-column: span 7; }
	.col-5 { grid-column: span 5; }
}
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.max-56 { max-width: 56ch; }

/* ===================================================== 01. Hero slider ===
   Full-bleed stage, crossfade with a slow drift, a brass facet wipe on the
   incoming slide, and a step-cut control row. Motion stops entirely when the
   visitor asks it to.
   ======================================================================== */

.hsl {
	position: relative;
	background: var(--ink);
	padding-bottom: clamp(40px, 6vw, 70px);
	overflow: hidden;
}

.hsl__stage {
	position: relative;
	min-height: clamp(560px, 88vh, 940px);
	display: grid;
}

.hsl__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.hsl__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* Media */

.hsl__media { position: absolute; inset: 0; overflow: hidden; }

.hsl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.09);
	transition: transform 9s linear;
}
.hsl__slide.is-active .hsl__img { transform: scale(1); }

.hsl__img--ph { background: linear-gradient(135deg, var(--moss), var(--ink)); }
.hsl__img--ph[data-ph="0"] { background: radial-gradient(70% 80% at 72% 22%, rgba(18,153,106,.34), transparent 62%), linear-gradient(135deg, #12291F, #08130F); }
.hsl__img--ph[data-ph="1"] { background: radial-gradient(70% 80% at 30% 78%, rgba(198,160,94,.30), transparent 62%), linear-gradient(150deg, #17342A, #08130F); }
.hsl__img--ph[data-ph="2"] { background: radial-gradient(60% 70% at 80% 70%, rgba(143,214,182,.26), transparent 62%), linear-gradient(200deg, #12291F, #08130F); }
.hsl__img--ph[data-ph="3"] { background: radial-gradient(75% 70% at 20% 30%, rgba(18,153,106,.26), transparent 62%), linear-gradient(120deg, #17342A, #0C1D17); }
.hsl__img--ph[data-ph="4"] { background: radial-gradient(65% 75% at 60% 40%, rgba(198,160,94,.22), transparent 62%), linear-gradient(170deg, #12291F, #08130F); }

.hsl__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8,19,15,.94) 8%, rgba(8,19,15,.72) 46%, rgba(8,19,15,.28) 78%),
		linear-gradient(0deg, rgba(8,19,15,.92) 2%, transparent 42%);
}
.hsl__slide.is-dark .hsl__scrim { background: linear-gradient(90deg, rgba(8,19,15,.97) 10%, rgba(8,19,15,.86) 55%, rgba(8,19,15,.55) 100%); }

.hsl__facets {
	position: absolute;
	inset: 0;
	opacity: .4;
	mask-image: radial-gradient(70% 70% at 74% 34%, #000 18%, transparent 76%);
}
.hsl__facets polygon { fill: none; stroke: var(--mint); stroke-width: .5; opacity: .3; }
.hsl__facets line { stroke: var(--brass); stroke-width: .4; opacity: .5; }

/* The facet wipe: one brass edge crossing the incoming slide. */
.hsl__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(112deg, transparent 40%, rgba(198,160,94,.20) 48%, rgba(143,214,182,.14) 52%, transparent 60%);
	transform: translateX(-115%);
}
.hsl__slide.is-active .hsl__media::after { animation: sweep 2s var(--ease) .15s both; }

/* Copy */

.hsl__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(120px, 16vh, 190px) clamp(70px, 11vh, 130px);
	width: min(100% - (var(--gutter) * 2), var(--max));
}
.hsl__t { max-width: 16ch; margin-bottom: 26px; }
.hsl__t .ln { display: block; overflow: hidden; }
.hsl__t .ln > span { display: block; transform: translateY(105%); }
.hsl__slide.is-active .hsl__t .ln > span { animation: rise .95s var(--ease) forwards; }
.hsl__slide.is-active .hsl__t .ln:nth-child(2) > span { animation-delay: .08s; }
.hsl__slide.is-active .hsl__t .ln:nth-child(3) > span { animation-delay: .16s; }
.hsl__slide.is-active .hsl__t .ln:nth-child(4) > span { animation-delay: .24s; }

.hsl__eyebrow, .hsl__x, .hsl__cta { opacity: 0; transform: translateY(14px); }
.hsl__slide.is-active .hsl__eyebrow,
.hsl__slide.is-active .hsl__x,
.hsl__slide.is-active .hsl__cta { animation: hslIn .8s var(--ease) forwards; }
.hsl__slide.is-active .hsl__x { animation-delay: .22s; }
.hsl__slide.is-active .hsl__cta { animation-delay: .34s; }

@keyframes hslIn { to { opacity: 1; transform: none; } }

.hsl__x { max-width: 52ch; margin-bottom: 36px; color: rgba(239,240,234,.78); }

/* Controls */

.hsl__ui {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	flex-wrap: wrap;
	margin-top: clamp(-70px, -6vw, -40px);
	padding-bottom: clamp(28px, 4vw, 44px);
}

.hsl__count {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--stone);
}
.hsl__count b { color: var(--brass); font-weight: 500; }
.hsl__bar { display: block; width: clamp(60px, 9vw, 120px); height: 1px; background: var(--hair); }
.hsl__bar i { display: block; height: 100%; width: 0; background: var(--brass); }
.hsl__bar i.is-running { animation: hslBar var(--hsl-time, 7s) linear forwards; }
@keyframes hslBar { from { width: 0; } to { width: 100%; } }

.hsl__dots { display: flex; gap: 6px; margin-inline-end: auto; }
.hsl__dot {
	width: 34px;
	height: 26px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.hsl__dot span {
	display: block;
	width: 100%;
	height: 2px;
	background: rgba(239,240,234,.22);
	transition: background .4s var(--ease);
}
.hsl__dot:hover span { background: var(--mint); }
.hsl__dot.is-on span { background: var(--brass); }

.hsl__nav { display: flex; gap: 8px; }
.hsl__arrow {
	width: 52px;
	height: 46px;
	display: grid;
	place-items: center;
	background: rgba(239,240,234,.04);
	border: 1px solid var(--hair);
	color: var(--chalk);
	cursor: pointer;
	transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
	clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.hsl__arrow:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.hsl__ledger { position: relative; z-index: 3; }

.hsl--single .hsl__stage { min-height: clamp(520px, 78vh, 820px); }

@media (max-width: 720px) {
	.hsl__stage { min-height: 82vh; }
	.hsl__scrim { background: linear-gradient(0deg, rgba(8,19,15,.95) 22%, rgba(8,19,15,.62) 70%, rgba(8,19,15,.5) 100%); }
	.hsl__ui { margin-top: -30px; }
	.hsl__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hsl__img, .hsl__slide.is-active .hsl__img { transform: none; transition: none; }
	.hsl__t .ln > span { transform: none; }
	.hsl__eyebrow, .hsl__x, .hsl__cta { opacity: 1; transform: none; }
	.hsl__bar i.is-running { animation: none; width: 100%; }
}


/* Markup used only by the poster style; inert everywhere else. */
.pz { display: none; }

/* ============================================= 05. Capabilities panel ===
   Full-bleed photograph, statement set to the right, and the seven
   disciplines as tabs along the bottom edge.
   ======================================================================= */

.cimm {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: clamp(620px, 92vh, 980px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}

.cimm__stage { position: absolute; inset: 0; z-index: -2; }

.cimm__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s var(--ease), transform 7s var(--ease);
	transform: scale(1.06);
}
.cimm__slide.is-on { opacity: 1; transform: scale(1); }
.cimm__slide img { width: 100%; height: 100%; object-fit: cover; }

.cimm__ph { position: absolute; inset: 0; }
.cimm__ph[data-ph="0"] { background: linear-gradient(140deg, #1d4c3a, #08130f 72%); }
.cimm__ph[data-ph="1"] { background: linear-gradient(140deg, #2b4d42, #0b1a15 72%); }
.cimm__ph[data-ph="2"] { background: linear-gradient(140deg, #14352a, #08130f 72%); }
.cimm__ph[data-ph="3"] { background: linear-gradient(140deg, #3a3524, #0f1610 72%); }
.cimm__ph[data-ph="4"] { background: linear-gradient(140deg, #1a3f4a, #08130f 72%); }
.cimm__ph[data-ph="5"] { background: linear-gradient(140deg, #24402f, #08130f 72%); }
.cimm__ph[data-ph="6"] { background: linear-gradient(140deg, #33301f, #08130f 72%); }

.cimm__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(260deg, rgba(8, 19, 15, 0.86) 0%, rgba(8, 19, 15, 0.5) 42%, rgba(8, 19, 15, 0.18) 74%),
		linear-gradient(0deg, rgba(8, 19, 15, 0.92) 0%, rgba(8, 19, 15, 0.15) 46%);
}

/* The play tab on the right edge */
.cimm__reel {
	position: absolute;
	right: 0;
	top: 26%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	padding-right: 8px;
	color: var(--ink);
	background: var(--brass);
	border-radius: 999px 0 0 999px;
	transition: background 0.4s var(--ease), width 0.4s var(--ease);
}
.cimm__reel:hover { background: var(--mint); width: 88px; }

/* Copy */

.cimm__inner {
	position: relative;
	z-index: 2;
	padding-top: clamp(120px, 18vh, 200px);
	padding-bottom: clamp(30px, 5vh, 56px);
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.cimm__eyebrow { justify-content: flex-end; color: rgba(239, 240, 234, 0.7); }

.cimm__t {
	font-size: clamp(2.1rem, 4.6vw, 4rem);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.024em;
	color: #fff;
	max-width: 18ch;
	margin-bottom: 26px;
}

.cimm__now { max-width: 46ch; margin-bottom: 26px; }
.cimm__now__t {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 10px;
}
.cimm__now__p {
	margin: 0;
	color: rgba(239, 240, 234, 0.8);
	font-size: clamp(0.98rem, 1.2vw, 1.1rem);
	line-height: 1.55;
}

.cimm__acts { display: flex; align-items: center; gap: 20px; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 9px 9px 24px;
	border-radius: 999px;
	background: rgba(239, 240, 234, 0.1);
	border: 1px solid rgba(239, 240, 234, 0.34);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pill i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	transition: transform 0.35s var(--ease);
}
.pill:hover { background: rgba(239, 240, 234, 0.2); border-color: #fff; }
.pill:hover i { transform: translateX(3px); }

.cimm__all {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(239, 240, 234, 0.72);
	border-bottom: 1px solid rgba(239, 240, 234, 0.34);
	padding-bottom: 4px;
}
.cimm__all:hover { color: var(--brass); border-color: var(--brass); }

/* Tabs */

.cimm__tabs {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(239, 240, 234, 0.18);
	backdrop-filter: blur(6px);
	background: rgba(8, 19, 15, 0.32);
}
.cimm__tabs__in {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.cimm__tabs__in::-webkit-scrollbar { display: none; }

.cimm__tab {
	flex: 1 0 auto;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 22px 20px 24px 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: rgba(239, 240, 234, 0.62);
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	transition: color 0.3s var(--ease), border-color 0.4s var(--ease);
}
.cimm__tab i {
	font-family: var(--mono);
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.14em;
	color: rgba(198, 160, 94, 0.7);
}
.cimm__tab span { font-family: var(--body); font-size: 15px; }
.cimm__tab:hover { color: #fff; }
.cimm__tab.is-on { color: #fff; border-bottom-color: var(--brass); }
.cimm__tab.is-on i { color: var(--brass); }

.cimm__scroll {
	position: absolute;
	left: 50%;
	bottom: 96px;
	z-index: 2;
	transform: translateX(-50%);
	color: rgba(239, 240, 234, 0.7);
	animation: cimmNudge 2.6s var(--ease) infinite;
}
@keyframes cimmNudge {
	0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
	50% { transform: translate(-50%, 7px); opacity: 1; }
}

@media (max-width: 899px) {
	.cimm { min-height: 86vh; }
	.cimm__inner { text-align: left; align-items: flex-start; }
	.cimm__eyebrow { justify-content: flex-start; }
	.cimm__scrim { background: linear-gradient(0deg, rgba(8, 19, 15, 0.95) 6%, rgba(8, 19, 15, 0.42) 60%, rgba(8, 19, 15, 0.3) 100%); }
	.cimm__reel { top: auto; bottom: 190px; width: 58px; height: 58px; }
	.cimm__scroll { display: none; }
	.cimm__tab { padding: 18px 22px 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cimm__slide, .cimm__slide.is-on { transform: none; transition: opacity 0.2s linear; }
	.cimm__scroll { animation: none; }
}

/* Industries variant: thumbnails instead of numbers, plus the proof line. */

.cimm__proof {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mint);
}

.cimm--ind .cimm__tab {
	align-items: center;
	gap: 14px;
	padding: 14px 22px 14px 0;
}
.cimm__thumb {
	position: relative;
	display: block;
	width: 58px;
	height: 44px;
	flex: none;
	overflow: hidden;
	filter: grayscale(1) contrast(0.9);
	opacity: 0.55;
	transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cimm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cimm__thumb .cimm__ph { display: block; position: absolute; inset: 0; }
.cimm__tab.is-on .cimm__thumb,
.cimm__tab:hover .cimm__thumb { filter: none; opacity: 1; }

.cimm__tabtext { display: grid; gap: 3px; text-align: left; }
.cimm__tabtext i {
	font-family: var(--mono);
	font-size: 9.5px;
	font-style: normal;
	letter-spacing: 0.16em;
	color: rgba(198, 160, 94, 0.75);
}
.cimm__tabtext b { font-weight: 400; font-size: 14.5px; }
.cimm__tab.is-on .cimm__tabtext i { color: var(--brass); }

@media (max-width: 899px) {
	.cimm__thumb { width: 46px; height: 36px; }
}

/* ================================================ 04. Selected work ====
   Photograph to the screen edge on one side, a solid field on the other.
   ======================================================================= */

.split {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	display: grid;
	grid-template-columns: 1fr;
	background: var(--pine);
	overflow: hidden;
}
@media (min-width: 900px) {
	.split { grid-template-columns: 1fr 1fr; min-height: clamp(560px, 82vh, 820px); }
}

.split__media {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: clamp(320px, 46vh, 520px);
	background: var(--moss);
}
.split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
.split__media:hover img { transform: scale(1.04); }
.split__ph {
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, #2c5a48, #0d2119 68%);
}

.split__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: 4px;
	padding: 18px clamp(20px, 3vw, 34px);
	background: linear-gradient(0deg, rgba(8, 19, 15, 0.82), transparent);
	width: 100%;
}
.split__caption b {
	font-family: var(--body);
	font-weight: 400;
	font-size: 14px;
	color: #fff;
}
.split__caption i {
	font-family: var(--mono);
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}

.split__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--pine);
	padding: clamp(50px, 8vw, 96px) var(--gutter) clamp(70px, 9vw, 110px);
}
@media (min-width: 900px) {
	.split__panel { padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}
.split__panel__in { max-width: 56ch; }

.split__t {
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.024em;
	color: #fff;
	margin-bottom: 24px;
}

.split__x {
	color: var(--fog);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.65;
	margin-bottom: 30px;
}

.split__m {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 44px);
	margin: 0 0 34px;
	padding-top: 24px;
	border-top: 1px solid var(--hair);
}
.split__m li b {
	display: block;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	color: var(--mint);
	line-height: 1;
}
.split__m li span {
	display: block;
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}

.btn--box {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	padding: 17px 26px;
	background: #fff;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn--box svg { transition: transform 0.35s var(--ease); }
.btn--box:hover { background: var(--brass); }
.btn--box:hover svg { transform: translateX(4px); }

.split__label {
	position: absolute;
	left: var(--gutter);
	bottom: 26px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brass);
}

/* The remaining cases, as rows */

.worklist .wrow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px 26px;
	padding: clamp(22px, 2.6vw, 30px) 0;
	border-bottom: 1px solid var(--hair);
	transition: padding-left 0.4s var(--ease);
}
.worklist .wrow:first-child { border-top: 1px solid var(--hair); }
@media (min-width: 900px) {
	.worklist .wrow {
		grid-template-columns: 190px minmax(0, 1.1fr) minmax(0, 1fr) 90px 30px;
		align-items: center;
	}
	.worklist .wrow:hover { padding-left: 16px; }
}
.wrow__k {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
}
.wrow__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	letter-spacing: -0.015em;
	line-height: 1.12;
}
.wrow__r { color: var(--fog); font-size: 14px; }
.wrow__m {
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 300;
	color: var(--mint);
}
.wrow__a { color: var(--brass); justify-self: end; transition: transform 0.4s var(--ease); }
.worklist .wrow:hover .wrow__a { transform: translateX(6px); }

/* =========================================== 06. How we create growth ===
   Statement over the photograph, summary and the two numbers on a light
   panel opposite.
   ======================================================================= */

.proj {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	display: grid;
	grid-template-columns: 1fr;
	background: var(--chalk);
}
@media (min-width: 980px) {
	.proj { grid-template-columns: 1.45fr 1fr; min-height: clamp(600px, 86vh, 900px); }
}

.proj__media { position: relative; min-height: clamp(400px, 60vh, 700px); overflow: hidden; }
.proj__ph {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 62% 24%, rgba(143, 214, 182, 0.22), transparent 62%),
		linear-gradient(168deg, #23516b 0%, #14382c 46%, #08130f 100%);
}
.proj__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 19, 15, 0.9) 4%, rgba(8, 19, 15, 0.25) 46%, rgba(8, 19, 15, 0.35) 100%);
}

.proj__over {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 clamp(24px, 4vw, 60px) clamp(30px, 4vw, 52px);
	padding-left: max(clamp(24px, 4vw, 60px), calc((100vw - var(--max)) / 2));
	max-width: 100%;
}
.proj__crumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(239, 240, 234, 0.72);
}
.proj__crumbs em { font-style: normal; color: var(--brass); }

.proj__t {
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.028em;
	color: #fff;
	max-width: 15ch;
	margin-bottom: 24px;
}

.btn--flat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	background: var(--emerald);
	color: #fff;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.35s var(--ease);
}
.btn--flat:hover { background: var(--brass); color: var(--ink); }

.proj__live {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	font-size: 12.5px;
	color: rgba(239, 240, 234, 0.82);
}
.proj__live i {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #56d99b;
	box-shadow: 0 0 0 0 rgba(86, 217, 155, 0.6);
	animation: projPulse 2.4s infinite;
}
@keyframes projPulse {
	70% { box-shadow: 0 0 0 8px rgba(86, 217, 155, 0); }
	100% { box-shadow: 0 0 0 0 rgba(86, 217, 155, 0); }
}

.proj__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--chalk);
	color: var(--ink);
	padding: clamp(50px, 7vw, 90px) clamp(24px, 4vw, 56px);
}
@media (min-width: 980px) {
	.proj__panel { padding-right: max(clamp(24px, 4vw, 56px), calc((100vw - var(--max)) / 2)); }
}
.proj__panel__in { max-width: 46ch; text-align: center; }
.proj__panel__in p {
	color: #3d5348;
	font-size: 14.8px;
	line-height: 1.75;
	margin-bottom: 16px;
}

.proj__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: clamp(30px, 4vw, 48px);
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--hair-dark);
}
.proj__stat { padding: 0 14px; }
.proj__stat + .proj__stat { border-left: 1px solid var(--hair-dark); }
.proj__stat b {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(2.6rem, 4.6vw, 4rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.proj__unit {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
	margin-left: 8px;
}
.proj__stat em {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 13px;
	color: var(--stone);
}

/* Mirrored split (section 07) */

@media (min-width: 900px) {
	.split--flip .split__panel { order: 1; }
	.split--flip .split__media { order: 2; }
	.split--flip .split__panel { padding-right: clamp(40px, 5vw, 80px); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}
.split--flip { background: var(--moss); }
.split--flip .split__panel { background: var(--moss); }
.split__ph--2 { background: linear-gradient(150deg, #3a5f52, #101f18 70%); }
.split__k {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 14px;
}
.split__q {
	margin: 0 0 30px;
	padding-left: 20px;
	border-left: 1px solid var(--brass);
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.12rem;
	line-height: 1.45;
	color: var(--mint);
}
.split__q footer {
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}
.split--flip .split__label { left: auto; right: var(--gutter); }

/* ================================================= 12. Final call =======
   Photograph, the ask over it, direct routes on the bar beneath.
   ======================================================================= */

.ctax {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: var(--ink);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(560px, 82vh, 860px);
}
.ctax__ph {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(66% 60% at 74% 26%, rgba(18, 153, 106, 0.28), transparent 62%),
		radial-gradient(60% 60% at 12% 90%, rgba(198, 160, 94, 0.16), transparent 62%),
		linear-gradient(160deg, #14382c 0%, #0a1b14 52%, #08130f 100%);
}
.ctax__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 19, 15, 0.94) 8%, rgba(8, 19, 15, 0.4) 56%, rgba(8, 19, 15, 0.55) 100%);
}

.ctax__in {
	position: relative;
	z-index: 2;
	padding-top: clamp(110px, 16vh, 190px);
	padding-bottom: clamp(40px, 6vh, 70px);
}
.ctax__t {
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.028em;
	color: #fff;
	max-width: 15ch;
	margin-bottom: 22px;
}
.ctax__x {
	color: rgba(239, 240, 234, 0.78);
	font-size: clamp(0.98rem, 1.2vw, 1.12rem);
	line-height: 1.6;
	max-width: 54ch;
	margin-bottom: 30px;
}
.ctax__acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ctax__live {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	font-size: 12.5px;
	color: rgba(239, 240, 234, 0.8);
}
.ctax__live i {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #56d99b;
	animation: projPulse 2.4s infinite;
}

.ctax__bar {
	position: relative;
	z-index: 2;
	background: rgba(8, 19, 15, 0.72);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--hair);
}
.ctax__bar__in {
	display: grid;
	gap: 1px;
	background: var(--hair);
}
@media (min-width: 760px) { .ctax__bar__in { grid-template-columns: repeat(4, 1fr); } }
.ctax__bar__in > * {
	display: grid;
	gap: 6px;
	padding: 22px clamp(14px, 2vw, 26px);
	background: var(--ink);
}
.ctax__bar__in span span,
.ctax__bar__in a span {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
}
.ctax__bar__in b { font-weight: 400; font-size: 14.5px; color: var(--chalk); }
.ctax__bar__in a:hover b { color: var(--brass); }

/* Brand mark */
.brand .mark { flex: none; transition: transform 0.5s var(--ease); }
.brand:hover .mark { transform: rotate(-90deg); }
.site-footer .brand .mark { opacity: 0.9; }

/* ===================================== Inner page header ===============
   A photographic band carries the title; the subtitle sits beneath it on a
   light field, centred, where it is easiest to read.
   ======================================================================= */

.phead { padding: 0; }

.phead__band {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: clamp(420px, 62vh, 660px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ink);
}

.phead__img,
.phead__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.phead__ph {
	background:
		radial-gradient(64% 60% at 70% 26%, rgba(18, 153, 106, 0.26), transparent 62%),
		radial-gradient(52% 60% at 14% 88%, rgba(198, 160, 94, 0.14), transparent 62%),
		linear-gradient(160deg, #17402f 0%, #0a1b14 54%, #08130f 100%);
}
.phead__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 19, 15, 0.88) 0%, rgba(8, 19, 15, 0.6) 46%, rgba(8, 19, 15, 0.28) 80%),
		linear-gradient(0deg, rgba(8, 19, 15, 0.72) 0%, transparent 46%);
}
.phead__facets {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	mask-image: radial-gradient(64% 66% at 74% 40%, #000 16%, transparent 76%);
}
.phead__facets polygon { fill: none; stroke: var(--mint); stroke-width: 0.5; opacity: 0.26; }
.phead__facets line { stroke: var(--brass); stroke-width: 0.5; opacity: 0.5; }

.phead__in {
	position: relative;
	z-index: 2;
	padding-block: clamp(110px, 14vh, 160px) clamp(40px, 6vh, 70px);
}

.phead__k {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--brass);
}
.phead__k span {
	width: clamp(28px, 5vw, 64px);
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}
.phead__k span:last-child { flex: 0 0 auto; }

.phead__t {
	font-size: clamp(2.6rem, 7.4vw, 6rem);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: #fff;
	max-width: 16ch;
	margin: 0;
}

.phead__scroll {
	position: absolute;
	right: clamp(14px, 2vw, 30px);
	bottom: 34px;
	z-index: 2;
	writing-mode: vertical-rl;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(239, 240, 234, 0.7);
}

/* The light field beneath */

.phead__under {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--chalk);
	color: var(--ink);
	padding-block: clamp(34px, 5vw, 60px) clamp(40px, 6vw, 76px);
	text-align: center;
}
.phead__under .crumbs { margin-bottom: 26px; }
.phead__under .crumbs ol { justify-content: center; }
.phead__under .crumbs li { color: var(--stone); }
.phead__under .crumbs li + li::before { color: rgba(8, 19, 15, 0.3); }
.phead__under .crumbs a:hover { color: var(--emerald); }

.phead__sub {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.15rem, 2.3vw, 1.85rem);
	line-height: 1.42;
	letter-spacing: -0.014em;
	color: var(--ink);
	max-width: 30ch;
	margin: 0 auto;
	text-wrap: balance;
}

@media (max-width: 720px) {
	.phead__band { min-height: 56vh; }
	.phead__scrim { background: linear-gradient(0deg, rgba(8, 19, 15, 0.9) 6%, rgba(8, 19, 15, 0.42) 60%, rgba(8, 19, 15, 0.5) 100%); }
	.phead__scroll { display: none; }
	.phead__sub { max-width: 34ch; }
}

/* ==================================================== 11. Thinking =====
   A mosaic: one tall tile, two wide tiles, and a solid panel carrying the
   standing offer. Photographs do the talking; the copy sits on top.
   ======================================================================= */

.mos {
	display: grid;
	gap: clamp(12px, 1.4vw, 20px);
	grid-template-columns: 1fr;
}
@media (min-width: 860px) {
	.mos {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(200px, 1fr));
	}
	.mos__tile--tall { grid-row: span 2; }
	.mos__panel { grid-column: span 2; }
}

.mos__tile {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 230px;
	background: var(--moss);
	isolation: isolate;
}

.mos__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}
.mos__tile:hover .mos__img { transform: scale(1.05); }

.mos__img--ph[data-ph="0"] { background: linear-gradient(150deg, #2a5d4a, #0b1c15 72%); }
.mos__img--ph[data-ph="1"] { background: linear-gradient(150deg, #1f4c5c, #0b1c15 72%); }
.mos__img--ph[data-ph="2"] { background: linear-gradient(150deg, #3a5230, #0b1c15 72%); }
.mos__img--ph[data-ph="3"] { background: linear-gradient(150deg, #4a4230, #0b1c15 72%); }

.mos__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 19, 15, 0.92) 4%, rgba(8, 19, 15, 0.35) 52%, transparent 82%);
	transition: background 0.5s var(--ease);
}
.mos__tile:hover .mos__scrim { background: linear-gradient(0deg, rgba(8, 19, 15, 0.95) 8%, rgba(8, 19, 15, 0.5) 62%, rgba(8, 19, 15, 0.12) 100%); }

.mos__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: grid;
	gap: 8px;
	padding: clamp(20px, 2.4vw, 30px);
}
.mos__k {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}
.mos__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.2rem, 1.9vw, 1.62rem);
	line-height: 1.14;
	letter-spacing: -0.016em;
	color: #fff;
	max-width: 22ch;
}
.mos__m {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(239, 240, 234, 0.62);
}
.mos__go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
	transition: gap 0.35s var(--ease);
}
.mos__tile:hover .mos__go { gap: 15px; }

/* The offer panel — the one solid block in the mosaic */

.mos__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 230px;
	padding: clamp(26px, 3vw, 44px);
	background: var(--brass);
	color: var(--ink);
	transition: background 0.4s var(--ease);
}
.mos__panel:hover { background: var(--mint); }

.mos__badge {
	align-self: flex-start;
	padding: 6px 14px;
	background: var(--ink);
	color: var(--brass);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.mos__panel__t {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.mos__panel__x { font-size: 14.5px; color: rgba(8, 19, 15, 0.72); max-width: 34ch; }
.mos__panel__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: gap 0.35s var(--ease);
}
.mos__panel:hover .mos__panel__go { gap: 16px; }

/* =========================== Hero slide grounds ========================
   Each slide carries a gradient drawn from its own sector, so moving through
   the slider is a temperature change rather than five copies of one green.
   All five resolve to the same near-black at the foot, which keeps the
   headline legible and the transitions seamless.
   ======================================================================= */

.hsl__slide .hsl__img--ph {
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, #17402f 0%, #0a1b14 56%, #08130f 100%);
}

/* 01 — The agency. Emerald into black: the house colour. */
.hsl__slide[data-tone="0"] .hsl__img--ph {
	background:
		radial-gradient(58% 66% at 72% 24%, rgba(18, 153, 106, 0.42), transparent 64%),
		radial-gradient(46% 52% at 16% 88%, rgba(143, 214, 182, 0.16), transparent 62%),
		linear-gradient(158deg, #124b36 0%, #0b2419 52%, #05100c 100%);
}

/* 02 — Real estate. Dusk over a skyline: blue-green into warm horizon. */
.hsl__slide[data-tone="1"] .hsl__img--ph {
	background:
		radial-gradient(52% 58% at 78% 30%, rgba(198, 160, 94, 0.3), transparent 62%),
		radial-gradient(64% 70% at 30% 16%, rgba(37, 96, 122, 0.5), transparent 66%),
		linear-gradient(162deg, #1b4a5c 0%, #123043 48%, #06110e 100%);
}

/* 03 — Automotive. Showroom light: cool steel with a low warm floor. */
.hsl__slide[data-tone="2"] .hsl__img--ph {
	background:
		radial-gradient(46% 44% at 66% 20%, rgba(214, 226, 224, 0.24), transparent 60%),
		radial-gradient(60% 60% at 24% 92%, rgba(198, 160, 94, 0.22), transparent 64%),
		linear-gradient(168deg, #33484a 0%, #16262a 50%, #070f0f 100%);
}

/* 04 — Furniture and interiors. Lamplight on wood: the warmest of the five. */
.hsl__slide[data-tone="3"] .hsl__img--ph {
	background:
		radial-gradient(56% 60% at 70% 26%, rgba(226, 176, 106, 0.34), transparent 62%),
		radial-gradient(50% 56% at 20% 86%, rgba(120, 74, 42, 0.34), transparent 64%),
		linear-gradient(160deg, #4a3524 0%, #241a12 52%, #0b0a08 100%);
}

/* 05 — Watches and jewellery. Velvet tray: deepest ground, single brass fall. */
.hsl__slide[data-tone="4"] .hsl__img--ph {
	background:
		radial-gradient(42% 48% at 74% 22%, rgba(217, 199, 154, 0.34), transparent 58%),
		radial-gradient(58% 62% at 34% 90%, rgba(18, 133, 92, 0.22), transparent 64%),
		linear-gradient(166deg, #123a2c 0%, #0a1c16 46%, #04100c 100%);
}

/* A brass line falls across every ground, catching the light as it arrives. */
.hsl__slide .hsl__img--ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(104deg, transparent 44%, rgba(217, 199, 154, 0.16) 50%, transparent 57%);
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}
.hsl__slide.is-active .hsl__img--ph::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.hsl__slide .hsl__img--ph::after { transition: none; }
}

/* ================================================== Contact dock =======
   Three routes pinned to the right edge, in the house palette. Circles until
   hovered, then each opens to show its label. The same shape holds on mobile,
   just smaller and moved clear of the thumb's reach.
   ======================================================================= */

.dock {
	position: fixed;
	right: clamp(12px, 1.6vw, 24px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: grid;
	gap: 12px;
	justify-items: end;
}

.dock__b {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	height: 52px;
	border-radius: 999px;
	overflow: hidden;
	max-width: 52px;
	border: 1px solid var(--hair-strong);
	box-shadow: 0 10px 26px -12px rgba(4, 16, 12, 0.65);
	transition: max-width 0.45s var(--ease), padding-left 0.45s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.dock__i {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	flex: none;
}

.dock__t {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.35s var(--ease) 0.06s;
}

.dock__b:hover,
.dock__b:focus-visible { max-width: 320px; padding-left: 22px; }
.dock__b:hover .dock__t,
.dock__b:focus-visible .dock__t { opacity: 1; }

/* House palette: deep ground, mint icon, brass on the one that asks. */
.dock__b--wa,
.dock__b--tel {
	background: rgba(12, 29, 23, 0.92);
	backdrop-filter: blur(10px);
	color: var(--mint);
}
.dock__b--wa:hover,
.dock__b--tel:hover {
	background: var(--emerald);
	border-color: var(--emerald);
	color: #fff;
}

.dock__b--req {
	background: var(--brass);
	border-color: var(--brass);
	color: var(--ink);
}
.dock__b--req:hover { background: var(--mint); border-color: var(--mint); }

.dock__b--wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 0 rgba(143, 214, 182, 0.45);
	animation: dockPulse 3.4s ease-out 2s 3;
	pointer-events: none;
}

@keyframes dockPulse {
	70% { box-shadow: 0 0 0 13px rgba(143, 214, 182, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 214, 182, 0); }
}

@media (max-width: 720px) {
	.dock {
		right: 12px;
		top: auto;
		bottom: 16px;
		transform: none;
		gap: 10px;
	}
	.dock__b { height: 46px; max-width: 46px; }
	.dock__i { width: 44px; height: 44px; }
	.dock__i svg { width: 18px; height: 18px; }
	.dock__b:hover, .dock__b:focus-visible { max-width: 46px; padding-left: 0; }
	.dock__t { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dock__b--wa::after { animation: none; }
}