/* ──────────────────────────────────────────────────────────────────────────
   TEN Developments · New marketing site
   Shared stylesheet for: index.html (Home) · hydrology.html · about.html
   Built on the canonical brand tokens. Every page pulls from this one file.
   ────────────────────────────────────────────────────────────────────────── */



* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
body {
	background: var(--paper);
	color: var(--ink);
}
img {
	display: block;
	max-width: 100%;
}
::selection {
	background: var(--rain);
	color: var(--ink);
}

/* ─── SHARED CONTAINER ─────────────────────────────────────────────────────
   1280px content column, 48px gutters (per brand layout spec).            */
.tdw-wrap {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--s-7);
}
.tdw-wrap--wide {
	max-width: 1440px;
}

/* ─── REUSABLE TYPE PRIMITIVES ─────────────────────────────────────────────
   Eyebrow · section title · lede. Used in every section header.           */
.tdw-eyebrow {
	font-family: var(--font-mono-medium);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--hydro);
	margin: 0;
}
.tdw-eyebrow--ink {
	color: var(--ink-3);
}
/* Solid Hydro chip eyebrow (Hydrology "How it works") */
.tdw-eyebrow--chip {
	display: inline-block;
	background: var(--hydro);
	color: var(--paper);
	padding: 6px 10px;
}

.tdw-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.8vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
	text-wrap: pretty;
}
.tdw-title .accent {
	color: var(--hydro);
}

.tdw-lede {
	font-family: var(--font-sans);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body);
	color: var(--ink-2);
	margin: 0;
	max-width: 56ch;
}

/* Body paragraph helper inside prose blocks */
.tdw-prose p {
	font-family: var(--font-sans);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--ink-2);
	margin: 0 0 var(--s-5);
	max-width: 52ch;
}
.tdw-prose p:last-child {
	margin-bottom: 0;
}

/* ─── SECTION SCAFFOLD ─────────────────────────────────────────────────────
   Three flat surfaces carry containment: paper, paper-2, ink. No shadows. */
.tdw-section {
	padding: var(--s-10) 0;
	background: var(--paper);
}
.tdw-section--paper2 {
	background: var(--paper-2);
}
[data-screen-label="03 Who we serve"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--ink-rule);
	border-bottom: 1px solid var(--ink-rule);
}
[data-screen-label="03 Who we serve"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/g-isohyet-b-light.svg") center / cover no-repeat;
	opacity: 0.2;
	z-index: 0;
	pointer-events: none;
}
[data-screen-label="03 Who we serve"] > * {
	position: relative;
	z-index: 1;
}
.tdw-section--ink {
	background: var(--ink);
	color: var(--paper);
}

/* Stacked section header: eyebrow → title → optional lede */
.tdw-shead {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	margin-bottom: var(--s-8);
}
.tdw-shead .tdw-title {
	max-width: 18ch;
}
.tdw-shead .tdw-lede {
	margin-top: var(--s-1);
}

/* Two-column intro: big title left, supporting paragraph right */
.tdw-intro {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--s-8);
	align-items: start;
}
.tdw-intro__title {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.tdw-intro__title .tdw-title {
	font-size: clamp(34px, 4.4vw, 60px);
	max-width: 14ch;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER · sticky, Ink, simplified nav. Mirrors the new wireframe chrome.
   ════════════════════════════════════════════════════════════════════════ */
.tdw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid #1f262c;
}
.tdw-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px var(--s-7);
	display: flex;
	align-items: center;
	gap: var(--s-6);
}
.tdw-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.tdw-header__logo img {
	height: 24px;
	width: auto;
}
.tdw-header__nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--s-6);
}
.tdw-header__nav a {
	color: var(--paper);
	text-decoration: none;
	font-family: var(--font-mono-medium);
	font-size: 12px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	transition: color var(--motion-fast);
}
.tdw-header__nav a:hover,
.tdw-header__nav a.is-active {
	color: var(--hydro);
}
.tdw-header__nav a.tdw-btn--cta,
.tdw-header__nav a.tdw-btn--cta:visited,
.tdw-header__nav a.tdw-btn--cta:hover {
	color: var(--ink);
}

/* LOGIN: hairline box (white border) */
.tdw-nav-login {
	border: 1px solid var(--paper);
	padding: 14px 16px;
	line-height: 1;
	transition:
		background var(--motion-fast),
		color var(--motion-fast) !important;
}
.tdw-nav-login:hover {
	border-color: var(--hydro);
	background: var(--hydro);
	color: var(--paper) !important;
}

/* ─── MOBILE NAV TOGGLE ───────────────────────────────────────────────────
   CSS-only hamburger: hidden checkbox drives open/close state.            */
.tdw-header__toggle {
	display: none;
}
.tdw-header__burger {
	display: none;
	cursor: pointer;
	width: 24px;
	height: 18px;
	position: relative;
	margin-left: auto;
	flex-shrink: 0;
}
.tdw-header__burger span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--paper);
	transition: transform var(--motion-fast), opacity var(--motion-fast);
}
.tdw-header__burger span:nth-child(1) { top: 0; }
.tdw-header__burger span:nth-child(2) { top: 8px; }
.tdw-header__burger span:nth-child(3) { top: 16px; }

/* X state */
.tdw-header__toggle:checked ~ .tdw-header__burger span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.tdw-header__toggle:checked ~ .tdw-header__burger span:nth-child(2) {
	opacity: 0;
}
.tdw-header__toggle:checked ~ .tdw-header__burger span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ─── BUTTONS ──────────────────────────────────────────────────────────────
   Wireframe sets every primary action in tracked uppercase mono.          */
.tdw-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono-medium);
	font-size: 12px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	line-height: 1;
	padding: 14px 22px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background var(--motion-fast),
		color var(--motion-fast),
		border-color var(--motion-fast);
}
.tdw-btn--cta {
	background: var(--cta);
	color: var(--ink);
}
.tdw-btn--cta:visited {
	color: var(--ink);
}
.tdw-btn--cta:hover {
	background: var(--cta-deep);
	color: var(--ink);
}
/* Outline button on Ink surfaces (e.g. "Read the technical white paper") */
.tdw-btn--ghost {
	background: transparent;
	color: var(--paper);
	border-color: #3f464c;
}
.tdw-btn--ghost:hover {
	border-color: var(--paper);
}
.tdw-btn .arrow {
	font-family: var(--font-mono);
	transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO · three variants
     --dark    : Home  (Ink, hillshade plate)
     --product : Hydrology (Ink, product lockup masthead)
     --light   : About (Paper, pull-quote + stat row)
   ════════════════════════════════════════════════════════════════════════ */
.tdw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Dark hero family (Home + Hydrology) */
.tdw-hero--dark,
.tdw-hero--product {
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-9) 0 var(--s-10);
}
/* Hillshade motif plate — dark hero only */
.tdw-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/g-hillshade-b-dark.svg") center / cover no-repeat;
	opacity: 0.2;
	z-index: 0;
	pointer-events: none;
}
/* Background video — product hero */
.tdw-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
.tdw-hero--dark > *,
.tdw-hero--product > *:not(.tdw-hero__video) {
	position: relative;
	z-index: 1;
}

.tdw-hero__lockup {
	margin-bottom: var(--s-7);
}
.tdw-hero__lockup img {
	height: 40px;
	width: auto;
}

.tdw-hero__body {
	max-width: 64%;
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.tdw-hero__title {
	font-family: var(--font-display-hero);
	font-size: clamp(40px, 5.4vw, 76px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--paper);
	margin: 0;
	text-wrap: balance;
}
.tdw-hero__sub {
	font-family: var(--font-sans);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body);
	color: #c8c2b0;
	margin: 0;
	max-width: 46ch;
}
.tdw-hero__actions {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--s-2);
}

/* Light hero (About) */
.tdw-hero--light {
	background: var(--paper);
	color: var(--ink);
	padding: var(--s-9) 0 var(--s-8);
}
.tdw-hero--light .tdw-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: stretch;
}
.tdw-hero--light .tdw-hero__title {
	font-family: var(--font-display-hero);
	font-size: clamp(38px, 4.6vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 var(--s-5);
}
.tdw-hero--light .tdw-hero__title .accent {
	color: var(--hydro);
}
.tdw-hero__quote-block {
	border-left: 3px solid var(--hydro);
	padding-left: var(--s-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tdw-hero__quote {
	font-family: var(--font-display-italic);
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.4;
	color: var(--ink);
	margin: 0 0 var(--s-5);
}
.tdw-hero__quote-src {
	font-family: var(--font-mono-medium);
	font-size: 11px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Stat row (About hero) */
.tdw-stats {
	display: flex;
	gap: var(--s-6);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var(--s-8);
}
.tdw-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	width: calc((100% - 2 * var(--s-6)) / 3);
	text-align: center;
}
.tdw-stat__num {
	font-family: var(--font-display);
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1;
	color: var(--ink);
	font-feature-settings: "tnum";
}
.tdw-stat__label {
	font-family: var(--font-mono-medium);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-3);
	/* max-width: 16ch; */
}

/* ════════════════════════════════════════════════════════════════════════
   HOME · "What we do" — prose left, problem/solution callouts right
   ════════════════════════════════════════════════════════════════════════ */
.tdw-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: stretch;
}
.tdw-twocol__left {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.tdw-twocol__left .tdw-callout:last-child {
	flex: 1;
}
.tdw-twocol__right {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

/* Callout box (title + description). Border colour set by modifier. */
.tdw-callout {
	border: 2px solid var(--ink-rule);
	padding: var(--s-4) var(--s-8);
	color: var(--ink);
}
.tdw-callout--flag {
	border-color: var(--flag);
}
.tdw-callout--solid {
	background: var(--storm);
	color: var(--paper);
	border: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tdw-callout h4 {
	font-family: var(--font-sans-strong);
	font-weight: normal;
	font-size: var(--t-body);
	line-height: 1.3;
	color: inherit;
	margin: 0 0 var(--s-2);
}
.tdw-callout p {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.5;
	color: inherit;
	margin: 0;
}
.tdw-callout--solid h4 {
	color: var(--rain);
}

/* ════════════════════════════════════════════════════════════════════════
   HOME · "Who we serve" audience cards  (also reused for About positions)
   ════════════════════════════════════════════════════════════════════════ */
.tdw-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}
.tdw-card {
	background: var(--paper);
	border: 1px solid var(--ink-rule);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.tdw-card__title {
	font-family: var(--font-sans-strong);
	font-weight: normal;
	font-size: var(--t-h4);
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}
.tdw-card__body {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}
.tdw-center {
	display: flex;
	justify-content: center;
	margin-top: var(--s-8);
}


/* ════════════════════════════════════════════════════════════════════════
   BAND · dark "Limited deployment" / closing CTA frames
   ════════════════════════════════════════════════════════════════════════ */
.tdw-band {
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-9) 0;
}
.tdw-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	max-width: 50%;
}
.tdw-band__title {
	font-family: var(--font-display-hero);
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--paper);
	margin: 0;
}
.tdw-band__lede {
	font-family: var(--font-sans);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body);
	color: #c8c2b0;
	margin: 0;
	max-width: 36ch;
}
.tdw-band__actions {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
}

/* Closing CTA: title left, body + actions right */
.tdw-close {
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-10) 0;
}
.tdw-close__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--s-8);
	align-items: start;
}
.tdw-close__title {
	font-family: var(--font-display-hero);
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--paper);
	margin: 0;
}
.tdw-close__right {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	margin-top: var(--s-8);
}
.tdw-close__lede {
	font-family: var(--font-sans);
	font-size: var(--t-body-lg);
	line-height: var(--lh-body);
	color: #c8c2b0;
	margin: 0;
}
.tdw-close__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	align-items: flex-start;
}

/* ════════════════════════════════════════════════════════════════════════
   HYDROLOGY · zigzag steps + tool grid
   ════════════════════════════════════════════════════════════════════════ */
.tdw-steps {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
}
.tdw-step-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: center;
}
.tdw-step-row__media {
	border: 1px solid var(--ink-rule);
	width: fit-content;
}
.tdw-step-row--flip .tdw-step-row__media {
	order: -1;
}
.tdw-step-row__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.tdw-step-row__num {
	font-family: var(--font-mono-medium);
	font-size: 12px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--hydro);
}
.tdw-step-row__title {
	font-family: var(--font-display);
	font-size: var(--t-h3);
	line-height: 1.18;
	color: var(--ink);
	margin: 0;
}
.tdw-step-row__body {
	font-family: var(--font-sans);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--ink-2);
	margin: 0;
	max-width: 46ch;
}

/* Tool / integration chips (Step 4) */
.tdw-tools {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
}
.tdw-tool {
	border: 1px solid var(--ink-rule);
	background: var(--paper);
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	align-items: center;
	text-align: center;
	aspect-ratio: 1 / 1;
	justify-content: center;
}
.tdw-tool__glyph {
	width: 50px;
	height: 50px;
	/* border: 1.5px solid var(--ink-3); */
	object-fit: contain;
}
.tdw-tool__name {
	font-family: var(--font-sans-strong);
	font-weight: normal;
	font-size: 12px;
	color: var(--ink);
}
.tdw-tool__tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-4);
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT · legacy-stack table (on Ink)
   ════════════════════════════════════════════════════════════════════════ */
/* Problem section: danger-colored accents instead of hydro */
[data-screen-label="02 The problem"] .tdw-eyebrow {
	color: var(--danger);
}
[data-screen-label="02 The problem"] .tdw-chip {
	border-color: var(--danger);
	color: var(--danger);
}
[data-screen-label="02 The problem"] .tdw-eyebrow + .tdw-title {
	margin-top: var(--s-5);
}
[data-screen-label="02 The problem"] .tdw-title + .tdw-prose {
	margin-top: var(--s-6);
}
[data-screen-label="02 The problem"] .tdw-eyebrow + .tdw-stacktable {
	margin-top: var(--s-5);
}

.tdw-stacktable {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.tdw-stackrow {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: var(--s-5);
	align-items: center;
}
.tdw-chip {
	border: 1px solid var(--hydro);
	color: var(--hydro);
	font-family: var(--font-mono-medium);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 10px;
	text-align: center;
}
.tdw-stackrow__desc {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.5;
	color: #c8c2b0;
	margin: 0;
}

/* Ink-surface prose + headings */
.tdw-section--ink .tdw-title {
	color: var(--paper);
}
.tdw-section--ink .tdw-prose p {
	color: #c8c2b0;
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT · "before / after" comparison + big-stat readout
   ════════════════════════════════════════════════════════════════════════ */
.tdw-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: start;
}
.tdw-compare__panels {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.tdw-panel {
	border: 1px solid var(--ink-rule);
	padding: var(--s-7) var(--s-6);
}
.tdw-panel__eye {
	font-family: var(--font-mono-medium);
	font-size: 11px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--hydro);
	margin: 0 0 var(--s-4);
}
.tdw-panel__line {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}
.tdw-panel__line--accent {
	color: var(--hydro);
}

.tdw-compare__why {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.tdw-bigstats {
	display: flex;
	gap: var(--s-8);
	margin-top: var(--s-4);
	flex-wrap: wrap;
}
.tdw-bigstats > :first-child {
	text-align: right;
	color: var(--flag);
}
.tdw-bigstats > :nth-child(2) {
	color: var(--hydro);
}
.tdw-bigstat__num {
	font-family: var(--font-display-hero);
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: inherit;
	font-feature-settings: "tnum";
}
.tdw-bigstat__label {
	font-family: var(--font-mono-medium);
	font-size: 11px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: inherit;
	margin-top: var(--s-3);
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT · founder bio band (full-bleed Hydro panel | Paper panel)
   ════════════════════════════════════════════════════════════════════════ */
.tdw-bioband {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--ink-rule);
	border-bottom: 1px solid var(--ink-rule);
}
.tdw-bioband__left {
	background: var(--storm);
	color: var(--paper);
	display: flex;
	justify-content: flex-end;
}
.tdw-bioband__right {
	background: var(--paper);
	display: flex;
	justify-content: flex-start;
}
.tdw-bioband__inner {
	width: 100%;
	max-width: 640px;
	padding: var(--s-10) var(--s-7);
}
.tdw-bio__name {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.1;
	color: var(--paper);
	margin: 0 0 var(--s-4);
}
.tdw-bio__creds {
	font-family: var(--font-mono-medium);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rain);
	margin: 0 0 var(--s-6);
}
.tdw-bio p {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.65;
	color: #e7eeff;
	margin: 0 0 var(--s-5);
}
.tdw-bio strong {
	font-family: var(--font-sans-strong);
	font-weight: normal;
	color: var(--paper);
}
.tdw-bio__list {
	list-style: none;
	margin: var(--s-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.tdw-bio__list li {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.5;
	color: #e7eeff;
	padding-left: var(--s-4);
	position: relative;
}
.tdw-bio__list li::before {
	content: "·";
	position: absolute;
	left: 2px;
	top: -2px;
	font-size: 20px;
	color: var(--rain);
}

.tdw-mission {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.tdw-mission .tdw-title {
	max-width: 12ch;
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT · "What TEN is / is not" — numbered list + misconceptions
   ════════════════════════════════════════════════════════════════════════ */
.tdw-position {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--s-8);
	row-gap: var(--s-5);
	align-items: start;
	margin-top: var(--s-6);
}

/* Shared list + item layout for numlist / xlist */
.tdw-numlist,
.tdw-xlist {
	display: flex;
	flex-direction: column;
}
.tdw-numitem,
.tdw-xitem {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--s-4);
	align-items: start;
	border-top: 1px solid var(--ink-rule);
	padding: var(--s-5) 0;
}
.tdw-numitem__num {
	font-family: var(--font-mono-medium);
	font-size: 15px;
	letter-spacing: var(--track-label);
	color: var(--hydro);
	line-height: 2.3;
}
.tdw-xitem__mark {
	font-family: var(--font-sans-strong);
	font-size: 15px;
	color: var(--flag);
	line-height: 2.5;
}
.tdw-numitem__title,
.tdw-xitem__title {
	font-family: var(--font-sans-strong);
	font-weight: normal;
	font-size: var(--t-body);
	color: var(--ink);
	margin: var(--s-2) 0 var(--s-2);
}
.tdw-numitem__body,
.tdw-xitem__body {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}
.tdw-position > .tdw-eyebrow {
	margin-bottom: var(--s-3);
}

/* Team section background */
[data-screen-label="05 The team"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
[data-screen-label="05 The team"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/g-drainage-a-light.svg") center / cover no-repeat;
	opacity: 0.1;
	z-index: 0;
	pointer-events: none;
}
[data-screen-label="05 The team"] > * {
	position: relative;
	z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   TEAM GRID · reuses the prior site's portrait-card structure exactly
   ════════════════════════════════════════════════════════════════════════ */
.tdw-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}
.tdw-team__card {
	background: var(--paper-2);
	padding: var(--s-5);
	display: flex;
	gap: var(--s-5);
	min-height: 184px;
}
.tdw-team__photo {
	width: 112px;
	height: 112px;
	flex-shrink: 0;
	background: var(--paper-3);
	border-radius: 50%;
	overflow: hidden;
}
.tdw-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tdw-team__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.tdw-team__role {
	font-family: var(--font-mono-medium);
	font-size: 11px;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--hydro);
}
.tdw-team__name {
	font-family: var(--font-display);
	font-size: var(--t-h4);
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}
.tdw-team__bio {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.5;
	color: var(--ink-2);
	margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER · Ink, simplified 3-column (brand · nav · contact)
   ════════════════════════════════════════════════════════════════════════ */
.tdw-footer {
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-9) 0 var(--s-6);
	border-top: 1px solid #2a3036;
}
.tdw-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--s-7);
}
.tdw-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.tdw-footer__brand img {
	height: 24px;
	width: auto;
	align-self: flex-start;
}
.tdw-footer__tag {
	font-family: var(--font-sans);
	font-size: var(--t-body-sm);
	line-height: 1.6;
	color: #c8c2b0;
	max-width: 42ch;
	margin: 0;
}
.tdw-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.tdw-footer__col a,
.tdw-footer__col span {
	font-family: var(--font-mono-medium);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--paper);
	text-decoration: none;
	transition: color var(--motion-fast);
}
.tdw-footer__col a[href^="mailto"] {
	text-transform: none;
}
.tdw-footer__col a:hover {
	color: var(--hydro);
}
.tdw-footer__col span {
	color: #8a8e91;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE · single-column collapse for the handoff prototype
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
	/* Mobile nav */
	.tdw-header__burger {
		display: block;
	}
	.tdw-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ink);
		flex-direction: column;
		padding: var(--s-5) var(--s-7) var(--s-7);
		gap: 0;
		border-top: 1px solid #1f262c;
	}
	.tdw-header__toggle:checked ~ .tdw-header__nav {
		display: flex;
	}
	.tdw-header__nav a {
		padding: var(--s-4) 0;
		border-bottom: 1px solid #1f262c;
		width: 100%;
	}
	.tdw-header__nav a:last-child {
		border-bottom: 0;
	}
	.tdw-nav-login {
		border: 0;
		padding: var(--s-4) 0;
	}
	.tdw-header__nav .tdw-btn--cta {
		margin-top: var(--s-4);
		justify-content: center;
	}
	.tdw-hero__body {
		max-width: 100%;
	}
	.tdw-intro,
	.tdw-twocol,
	.tdw-cards,
	.tdw-step-row,
	.tdw-compare,
	.tdw-position,
	.tdw-team,
	.tdw-close__grid,
	.tdw-hero--light .tdw-hero__grid,
	.tdw-footer__grid {
		grid-template-columns: 1fr;
	}
	.tdw-step-row--flip .tdw-step-row__media {
		order: 0;
	}
	.tdw-bioband {
		grid-template-columns: 1fr;
	}
	.tdw-bioband__left,
	.tdw-bioband__right {
		justify-content: stretch;
	}
	.tdw-bioband__inner {
		max-width: none;
		padding: var(--s-8) var(--s-7);
	}
	.tdw-tools {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.tdw-cards {
		grid-template-columns: 1fr;
	}
	.tdw-team {
		grid-template-columns: 1fr;
	}
	.tdw-stats {
		gap: var(--s-6);
	}
}