/* =============================================================================
   TEN DIGITALS - SECTION COMPONENTS

   Styles for inc/sections.php. Every page type draws on these, so nothing here
   may assume a particular template. Surfaces read the four-property contract
   (--td-card-bg / -border / -backdrop / -shadow) and therefore render as soft
   relief in light and frosted glass in dark without knowing which is active.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   PAGE HERO  -  td_render_hero
   -------------------------------------------------------------------------- */

.td-phero {
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--td-header-h) + clamp(40px, 5vw, 80px)) clamp(48px, 5vw, 88px);
	position: relative;
}

.td-phero__grid {
	align-items: center;
	display: grid;
	gap: clamp(36px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.td-phero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.td-phero__grid--solo { grid-template-columns: minmax(0, 1fr); }
}

.td-phero__copy { max-width: 720px; }
.td-phero__grid--solo .td-phero__copy { max-width: 860px; }

.td-phero__title {
	font-size: var(--td-fs-h1);
	font-weight: 700;
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-tight);
	text-transform: uppercase;
	text-wrap: balance;
}

.td-phero__lead {
	color: var(--td-ink-2);
	font-size: var(--td-fs-lead);
	max-width: 56ch;
}

.td-phero__micro {
	align-items: center;
	color: var(--td-ink-3);
	display: flex;
	font-size: var(--td-fs-xs);
	gap: 8px;
}

.td-phero__micro svg { color: var(--td-accent); flex: none; }

.td-phero__meta {
	border-top: 1px solid var(--td-line);
	display: grid;
	gap: var(--td-s-4) var(--td-s-6);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	list-style: none;

	/* The stack this sits in spaces its children with a top margin, so
	   resetting margin outright put the rule hard against the last line of
	   the lead. The row needs its own space above the rule. */
	margin: var(--td-s-5) 0 0;
	padding: var(--td-s-4) 0 0;
}

.td-phero__meta-label {
	color: var(--td-ink-4);
	display: block;
	font-size: 0.6875rem;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-phero__meta-value { color: var(--td-ink); display: block; font-weight: 600; margin-top: 4px; }

/* The mark is ornament, so it is the first thing to go when space is tight. */
.td-phero__media { display: none; }

@media (min-width: 1024px) {
	.td-phero__media {
		display: block;
		margin-inline: auto;
		max-width: min(420px, 38vw);
		position: relative;
		width: 100%;
	}
}

.td-phero__media img { display: block; height: auto; width: 100%; }
.td-phero__mark { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45)); opacity: 0.95; }

/* -----------------------------------------------------------------------------
   INTRO / PROBLEM STATEMENT  -  td_render_intro
   -------------------------------------------------------------------------- */

.td-intro__grid {
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.td-intro__grid { align-items: start; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.td-intro__title {
	font-size: var(--td-fs-h2);
	letter-spacing: var(--td-tracking-head);
	text-wrap: balance;
}

.td-intro__copy { color: var(--td-ink-2); font-size: var(--td-fs-lead); max-width: 58ch; }

/* -----------------------------------------------------------------------------
   CARD GRID  -  td_render_cards
   -------------------------------------------------------------------------- */

.td-cards__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--td-s-6);
}

@media (min-width: 640px) {
	.td-cards__grid { gap: var(--td-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.td-cards__grid--1 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
	.td-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.td-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.td-ccard {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-3);
	min-height: 200px;
	padding: clamp(22px, 2.2vw, 34px);
	text-decoration: none;
}

.td-ccard__eyebrow {
	color: var(--td-ink-4);
	font-family: var(--td-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-ccard__title {
	font-family: var(--td-font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: 700;
	letter-spacing: var(--td-tracking-head);
	line-height: 1.18;
	text-transform: uppercase;
}

.td-ccard__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); }

.td-ccard__list {
	color: var(--td-ink-3);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--td-fs-xs);
	gap: 5px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-ccard__list li::after { color: var(--td-ink-4); content: " /"; }
.td-ccard__list li:last-child::after { content: ""; }

.td-ccard__foot {
	align-items: center;
	color: var(--td-accent);
	display: flex;
	font-size: var(--td-fs-xs);
	font-weight: 600;
	gap: 8px;
	letter-spacing: var(--td-tracking-button);
	margin-top: auto;
	padding-top: var(--td-s-4);
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   FLOW / SYSTEM  -  td_render_flow
   A connected system, not a numbered queue: the rail runs behind the nodes.
   -------------------------------------------------------------------------- */

.td-flow__rail {
	background: var(--td-line);
	border-radius: 2px;
	height: 2px;
	margin-block: var(--td-s-6) var(--td-s-5);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.td-flow__rail .td-progress-rail__fill { height: 100%; width: 100%; }

.td-flow__stages {
	counter-reset: td-flow;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px)  { .td-flow__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .td-flow__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A stage is an object in the system, so it is given the edges of one. The
   card is the homepage's: same surface tokens, same lift, same accent rule
   arriving from the left on hover. */
.td-flow__stage {
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
	padding: var(--td-s-4);
	position: relative;
	transition:
		background-color var(--td-t-standard) var(--td-ease),
		border-color var(--td-t-standard) var(--td-ease),
		box-shadow var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
}

.td-flow__stage::after {
	background: var(--td-grad-brand);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--td-t-standard) var(--td-ease-out);
	width: 100%;
}

.td-flow__stage:hover {
	box-shadow: var(--td-card-shadow);
	transform: translate3d(0, -4px, 0);
}

.td-flow__stage:hover::after { transform: scaleX(1); }

.td-flow__node { align-items: center; display: flex; gap: 10px; }

/* The diamond is the Ten mark in miniature; on hover it turns, the way the
   tile does on a homepage card. */
.td-flow__stage:hover .td-flow__dot {
	transform: rotate(135deg) scale(1.15);
}

.td-flow__stage:hover .td-flow__index { color: var(--td-accent); }

.td-flow__dot {
	background: var(--td-grad-brand);
	border-radius: 3px;
	flex: none;
	height: 10px;
	transform: rotate(45deg);
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: 10px;
}

.td-flow__index {
	color: var(--td-ink-4);
	font-family: var(--td-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	transition: color var(--td-t-micro) var(--td-ease);
}

.td-flow__title {
	font-family: var(--td-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-flow__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); }

.td-flow__note {
	border-left: 2px solid var(--td-accent);
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	margin-top: var(--td-s-6);
	max-width: 70ch;
	padding-left: var(--td-s-4);
}

/* -----------------------------------------------------------------------------
   PROCESS  -  td_render_process
   -------------------------------------------------------------------------- */

.td-process__list {
	counter-reset: td-step;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--td-s-6) 0 0;
	padding: 0;
}

@media (min-width: 900px) { .td-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--td-s-4); } }

.td-process__step {
	align-items: baseline;
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	display: flex;
	gap: var(--td-s-4);
	overflow: hidden;
	padding: var(--td-s-5);
	position: relative;
	transition:
		border-color var(--td-t-standard) var(--td-ease),
		box-shadow var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
}

/* A bar down the leading edge rather than a rule along the bottom: these read
   top to bottom in two columns, and the eye is tracking the sequence. */
.td-process__step::before {
	background: var(--td-grad-brand);
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform var(--td-t-standard) var(--td-ease-out);
	width: 3px;
}

.td-process__step:hover {
	box-shadow: var(--td-card-shadow);
	transform: translate3d(0, -4px, 0);
}

.td-process__step:hover::before { transform: scaleY(1); }

.td-process__num {
	color: var(--td-accent);
	flex: none;
	font-family: var(--td-font-editorial);
	font-size: 2rem;
	line-height: 1;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: 2.6ch;
}

.td-process__step:hover .td-process__num { transform: translateY(-2px); }

.td-process__title {
	font-family: var(--td-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-process__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin-top: 6px; }

/* -----------------------------------------------------------------------------
   PRINCIPLES  -  td_render_principles
   -------------------------------------------------------------------------- */

.td-principles__list {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--td-s-6) 0 0;
	padding: 0;
}

@media (min-width: 800px) { .td-principles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-s-4) var(--td-s-6); } }

.td-principles__item {
	align-items: flex-start;
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	display: flex;
	gap: 14px;
	padding: var(--td-s-4) var(--td-s-5);
	transition:
		border-color var(--td-t-standard) var(--td-ease),
		box-shadow var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
}

.td-principles__item:hover {
	box-shadow: var(--td-card-shadow);
	transform: translate3d(0, -3px, 0);
}

.td-principles__item strong { display: block; font-weight: 600; }

/* The tick gets the same round well the homepage tiles sit in, so a list of
   deliverables reads as a set of marks rather than a run of glyphs. */
.td-principles__mark {
	align-items: center;
	background: color-mix(in oklab, var(--td-accent) 12%, transparent);
	border-radius: var(--td-r-pill);
	color: var(--td-accent);
	display: inline-flex;
	flex: none;
	height: 28px;
	justify-content: center;
	margin-top: 0;
	transition: background-color var(--td-t-standard) var(--td-ease);
	width: 28px;
}

.td-principles__item:hover .td-principles__mark {
	background: color-mix(in oklab, var(--td-accent) 22%, transparent);
}
.td-principles__copy { color: var(--td-ink-2); display: block; font-size: var(--td-fs-sm); margin-top: 4px; }

/* -----------------------------------------------------------------------------
   SYMPTOMS  -  td_render_symptoms
   A definition list, because that is what it is: the thing the visitor says,
   and what it usually turns out to mean.
   -------------------------------------------------------------------------- */

.td-symptoms__list { margin: var(--td-s-6) 0 0; }

.td-symptoms__row {
	border-top: 1px solid var(--td-line);
	display: grid;
	gap: 6px var(--td-s-6);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--td-s-5);
}

@media (min-width: 800px) {
	.td-symptoms__row { align-items: baseline; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.td-symptoms__row:last-child { border-bottom: 1px solid var(--td-line); }

.td-symptoms__symptom {
	color: var(--td-ink);
	font-family: var(--td-font-editorial);
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.34;
	margin: 0;
	position: relative;
}

.td-symptoms__quote { color: var(--td-accent); margin-right: 2px; }

.td-symptoms__reading {
	color: var(--td-ink-3);
	font-size: var(--td-fs-sm);
	margin: 0;
	padding-left: var(--td-s-4);
	position: relative;
}

.td-symptoms__reading::before {
	background: var(--td-accent);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 0.7em;
	width: 12px;
}

/* -----------------------------------------------------------------------------
   BAND  -  td_render_band
   One line, one action. Used for the Finder hand-off mid-page.
   -------------------------------------------------------------------------- */

.td-band__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-4) var(--td-s-6);
	justify-content: space-between;
	padding: clamp(24px, 3vw, 40px);
}

.td-band__copy { display: flex; flex-direction: column; gap: 8px; max-width: 60ch; }

.td-band__title {
	font-family: var(--td-font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	margin: 0;
}

.td-band__copy-text { color: var(--td-ink-3); font-size: var(--td-fs-xs); margin: 0; }
.td-band__action { flex: none; }

@media (max-width: 639.98px) {
	.td-band__inner { flex-direction: column; align-items: flex-start; }
	.td-band__action { width: 100%; }
	.td-band__action .td-btn { justify-content: center; width: 100%; }
}

/* -----------------------------------------------------------------------------
   CROSS-UNIT CONNECTIONS  -  td_render_connections
   -------------------------------------------------------------------------- */

.td-connect__list { display: grid; gap: 0; list-style: none; margin: var(--td-s-6) 0 0; padding: 0; }

.td-connect__item { border-top: 1px solid var(--td-line); }
.td-connect__item:last-child { border-bottom: 1px solid var(--td-line); }

.td-connect__link {
	align-items: center;
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 10px var(--td-s-4);
	padding-block: var(--td-s-4);
	text-decoration: none;
	transition: color var(--td-t-micro) var(--td-ease),
	            padding-inline var(--td-t-standard) var(--td-ease-out);
}

.td-connect__link {
	border-radius: var(--td-r-xs);
	position: relative;
}

/* A wash that grows from the leading edge, so the row a pointer is on is
   unmistakable in a list of eight near-identical rows. */
.td-connect__link::before {
	background: linear-gradient(90deg, color-mix(in oklab, var(--td-accent) 9%, transparent), transparent 70%);
	border-radius: inherit;
	content: "";
	inset: -2px -12px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var(--td-t-micro) var(--td-ease);
	z-index: -1;
}

.td-connect__link:hover { color: var(--td-accent); padding-inline: 12px 0; }
.td-connect__link:hover::before { opacity: 1; }

.td-connect__arrow {
	transition: transform var(--td-t-standard) var(--td-ease-out);
}

.td-connect__link:hover .td-connect__arrow { transform: translateX(4px); }

.td-connect__need { color: var(--td-ink-2); flex: 1 1 240px; font-size: var(--td-fs-sm); }

.td-connect__unit {
	font-family: var(--td-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-connect__arrow { color: var(--td-accent); flex: none; }

/* -----------------------------------------------------------------------------
   PROOF  -  td_render_proof
   -------------------------------------------------------------------------- */

.td-proof__grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--td-s-6);
}

@media (min-width: 900px) { .td-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.td-proof__empty { margin-top: var(--td-s-6); }

/* -----------------------------------------------------------------------------
   SOLUTION ROUTES  -  td_render_routes
   -------------------------------------------------------------------------- */

.td-routes__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--td-s-6);
}

@media (min-width: 640px)  { .td-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .td-routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.td-route {
	display: grid;
	gap: 8px;
	grid-template-areas:
		"icon arrow"
		"title title"
		"copy copy";
	grid-template-columns: 1fr auto;
	padding: clamp(20px, 2vw, 30px);
	text-decoration: none;
}

.td-route__index { color: var(--td-accent); grid-area: icon; }
.td-route__arrow { color: var(--td-accent); grid-area: arrow; }

.td-route__title {
	font-family: var(--td-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	grid-area: title;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-route__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); grid-area: copy; }

/* -----------------------------------------------------------------------------
   FAQ  -  td_render_faq
   -------------------------------------------------------------------------- */

.td-faq__list { margin-top: var(--td-s-6); }

.td-faq__item { border-bottom: 1px solid var(--td-line); }
.td-faq__item:first-child { border-top: 1px solid var(--td-line); }

.td-faq__heading { font-size: inherit; margin: 0; }

.td-faq__trigger {
	align-items: center;
	color: inherit;
	display: flex;
	font-family: var(--td-font-display);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	font-weight: 600;
	gap: var(--td-s-4);
	justify-content: space-between;
	padding-block: var(--td-s-5);
	text-align: left;
	transition: color var(--td-t-micro) var(--td-ease);
	width: 100%;
}

.td-faq__trigger:hover { color: var(--td-accent); }

.td-faq__icon {
	color: var(--td-accent);
	flex: none;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
}

.td-faq__trigger[aria-expanded="true"] .td-faq__icon { transform: rotate(45deg); }

/* The padding sits on the answer, not on the clipped wrapper. overflow:hidden
   zeroes a wrapper's content contribution but not its padding, so padding here
   would hold every collapsed row open by that amount. */
.td-faq .td-accordion__inner {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	max-width: 68ch;
	overflow: hidden;
}

.td-faq .td-accordion__inner > :last-child { padding-bottom: var(--td-s-5); }

/* -----------------------------------------------------------------------------
   BODY PROSE  -  td_render_prose
   -------------------------------------------------------------------------- */

.td-body__grid {
	display: grid;
	gap: clamp(32px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.td-body__grid { align-items: start; grid-template-columns: minmax(0, 1fr) 260px; }
	.td-body__aside { position: sticky; top: calc(var(--td-header-h) + 24px); }
}

/* -----------------------------------------------------------------------------
   FIGURE  -  td_render_figure
   -------------------------------------------------------------------------- */

.td-figure { margin: var(--td-s-6) 0; }

.td-figure img {
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	display: block;
	height: auto;
	width: 100%;
}

.td-figure--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.td-figure--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }

.td-figure figcaption {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	margin-top: 12px;
	text-align: center;
}

/* -----------------------------------------------------------------------------
   METRICS  -  td_render_metrics
   -------------------------------------------------------------------------- */

.td-metrics__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-top: var(--td-s-6);
}

.td-metrics__grid .td-metric { padding: clamp(20px, 2vw, 30px); }

.td-metrics__note { color: var(--td-ink-3); font-size: var(--td-fs-xs); margin-top: var(--td-s-4); }

/* -----------------------------------------------------------------------------
   QUOTE  -  td_render_quote
   -------------------------------------------------------------------------- */

.td-quote__figure { margin: 0; text-align: center; }
.td-quote__mark { color: var(--td-accent); margin-bottom: var(--td-s-4); }

.td-quote__text {
	border: 0;
	font-family: var(--td-font-editorial);
	font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.3;
	margin: 0;
	padding: 0;
	text-wrap: balance;
}

.td-quote__author {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	letter-spacing: var(--td-tracking-eyebrow);
	margin-top: var(--td-s-5);
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   FINAL CTA  -  td_render_cta
   -------------------------------------------------------------------------- */

.td-final { overflow: hidden; position: relative; text-align: center; }

.td-final__inner {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-5);
	margin-inline: auto;
	max-width: 780px;
	position: relative;
	z-index: 1;
}

.td-final .td-eyebrow { margin-inline: auto; }

.td-final__title {
	font-size: var(--td-fs-h2);
	letter-spacing: var(--td-tracking-head);
	text-wrap: balance;
}

.td-final__copy { color: var(--td-ink-2); font-size: var(--td-fs-lead); margin-inline: auto; max-width: 52ch; }

.td-final .td-btn-group { justify-content: center; margin-top: var(--td-s-4); }

.td-final__micro { color: var(--td-ink-4); font-size: var(--td-fs-xs); }

/* Completion state of the mark. Anchored into the bottom-right corner and
   cropped by the section, so it frames the close instead of running through the
   buttons and the disclaimer the way a centred mark did. */
.td-final__mark {
	aspect-ratio: 1;
	bottom: -70px;
	pointer-events: none;
	position: absolute;
	right: -70px;
	width: min(360px, 32vw);
	z-index: 0;
}

/* The dimming lives on the image, not the wrapper: the wrapper carries
   [data-reveal], and .is-revealed sets opacity:1 on it once it scrolls in. */
.td-final__mark .td-ten-form { opacity: 0.14; }

/* Below the two-column breakpoint the copy fills the width, so the mark goes. */
@media (max-width: 767.98px) {
	.td-final__mark { display: none; }
}

/* -----------------------------------------------------------------------------
   MOBILE
   Vol 02 s17: process steps stack, nothing essential hides behind hover, and
   there is no horizontal overflow at 390px or 360px.
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {
	.td-route {
		grid-template-areas:
			"icon arrow"
			"title title"
			"copy copy";
	}

	.td-process__step { padding-block: var(--td-s-4); }
	.td-flow__note { margin-top: var(--td-s-5); }
}

/* =============================================================================
   VOLUME 04 - WORK AND CASE STUDIES
   The long-form proof layer. Everything here is shared: a case study, a report
   and a project write-up all draw on the same components.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Narrative - the eight-chapter story
   -------------------------------------------------------------------------- */

.td-narr__list {
	display: grid;
	gap: var(--td-s-8);
	margin-top: var(--td-s-7);
}

.td-narr__chapter {
	display: grid;
	gap: var(--td-s-4);
}

.td-narr__head {
	align-items: baseline;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto 1fr;
}

.td-narr__index {
	color: var(--td-accent);
	font-size: var(--td-fs-h4);
	font-weight: 500;
	line-height: 1;
}

.td-narr__title {
	font-size: var(--td-fs-h3);
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

/* The rule runs under the whole heading row rather than beside the words, so a
   two-line chapter title on a phone does not break the alignment. */
.td-narr__rule {
	background: linear-gradient(90deg, var(--td-hairline-accent), transparent);
	grid-column: 1 / -1;
	height: 1px;
}

.td-narr__body { display: grid; gap: var(--td-s-5); }

.td-narr__copy { max-width: 68ch; }

.td-narr__points {
	color: var(--td-ink-2);
	display: grid;
	gap: var(--td-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-narr__points li { padding-left: var(--td-s-4); position: relative; }

.td-narr__points li::before {
	background: var(--td-accent);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 0.65em;
	width: 5px;
}

.td-narr__metrics {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.td-narr__metrics .td-metric {
	display: grid;
	gap: 6px;
	padding: clamp(18px, 1.8vw, 26px);
}

.td-metric__context {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	line-height: 1.5;
	text-transform: none;
}

.td-narr__note { margin: 0; }

@media (min-width: 1024px) {
	.td-narr__chapter {
		gap: var(--td-s-7);
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	/* The chapter heading holds its place while its body scrolls, which is what
	   keeps a long story readable without a floating table of contents. */
	.td-narr__head {
		align-self: start;
		grid-template-columns: auto;
		position: sticky;
		top: calc(var(--td-header-h) + var(--td-s-6));
	}

	.td-narr__rule { grid-column: auto; }
}

/* -----------------------------------------------------------------------------
   Gallery - real project artifacts, never decorative stock
   -------------------------------------------------------------------------- */

.td-gallery__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--td-s-6) 0 0;
	padding: 0;
}

.td-gallery__figure { margin: 0; }

.td-gallery__link {
	background: var(--td-well-bg);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	display: block;
	overflow: hidden;
}

.td-gallery__link img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.td-gallery__link:focus-visible { outline: 2px solid var(--td-accent); outline-offset: 3px; }

.td-gallery__caption {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	margin-top: var(--td-s-2);
}

.td-gallery__note { margin-top: var(--td-s-5); }

@media (min-width: 640px) {
	.td-gallery__grid { gap: var(--td-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.td-gallery__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.td-gallery__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   Note - disclosure and the public half of the proof record
   -------------------------------------------------------------------------- */

.td-note__inner {
	border-left: 2px solid var(--td-hairline-accent);
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto minmax(0, 1fr);
	padding: var(--td-s-4) 0 var(--td-s-4) var(--td-s-5);
}

.td-note__mark { color: var(--td-ink-3); line-height: 1; padding-top: 2px; }

.td-note__body { display: grid; gap: var(--td-s-3); }

.td-note__title {
	font-size: var(--td-fs-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0;
	text-transform: uppercase;
}

.td-note__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

.td-note__meta {
	display: grid;
	gap: var(--td-s-2);
	margin: 0;
}

.td-note__row {
	color: var(--td-ink-3);
	display: grid;
	font-size: var(--td-fs-xs);
	gap: 2px;
}

.td-note__row dt { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.td-note__row dd { color: var(--td-ink-2); margin: 0; }

@media (min-width: 640px) {
	.td-note__row { grid-template-columns: 140px minmax(0, 1fr); gap: var(--td-s-4); }
}

/* -----------------------------------------------------------------------------
   Filters - ordinary links, so a filtered view is shareable and works with no
   JavaScript at all
   -------------------------------------------------------------------------- */

.td-filters__bar {
	border-block: 1px solid var(--td-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-4) var(--td-s-6);
	padding-block: var(--td-s-4);
}

.td-filters__group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-2) var(--td-s-3);
	align-items: center;
}

.td-filters__label {
	color: var(--td-ink-3);
	font-size: var(--td-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-filters__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-chip {
	align-items: center;
	background: var(--td-card-bg);
	border: var(--td-card-border);
	border-radius: var(--td-r-pill);
	color: var(--td-ink-2);
	display: inline-flex;
	font-size: var(--td-fs-xs);
	gap: 6px;
	padding: 6px 14px;
	text-decoration: none;
	transition: border-color var(--td-t-micro) var(--td-ease), color var(--td-t-micro) var(--td-ease);
}

.td-chip:hover { border-color: var(--td-hairline-accent); color: var(--td-ink); }

.td-chip.is-active {
	background: var(--td-accent);
	border-color: transparent;
	color: var(--td-accent-ink);
}

.td-chip__count { color: currentColor; font-size: 0.6875rem; opacity: 0.65; }

.td-filters__reset { align-self: center; font-size: var(--td-fs-xs); margin-left: auto; }

.td-filters__summary {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	margin-top: var(--td-s-3);
}

/* -----------------------------------------------------------------------------
   Spotlight - one dominant story
   -------------------------------------------------------------------------- */

.td-spot__inner {
	display: grid;
	gap: var(--td-s-6);
	overflow: hidden;
	padding: clamp(24px, 3vw, 48px);
	position: relative;
}

.td-spot__media { border-radius: var(--td-r-card); overflow: hidden; }
.td-spot__media img { display: block; height: auto; width: 100%; }

.td-spot__body { position: relative; z-index: 1; }

.td-spot__title { font-size: var(--td-fs-h3); letter-spacing: var(--td-tracking-head); }

.td-spot__subtitle {
	color: var(--td-accent);
	font-size: var(--td-fs-sm);
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-spot__copy { color: var(--td-ink-2); max-width: 56ch; }

.td-spot__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-spot__meta li { display: grid; gap: 2px; }

.td-spot__meta-label {
	color: var(--td-ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-spot__meta-value { color: var(--td-ink); font-size: var(--td-fs-sm); }

.td-spot__metrics {
	border-top: 1px solid var(--td-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-6);
	padding-top: var(--td-s-4);
}

/* The panel is clickable, but the heading and the button carry the meaning, so
   the overlay is hidden from assistive technology and skipped by the keyboard. */
.td-spot__overlay {
	inset: 0;
	position: absolute;
	z-index: 0;
}

@media (min-width: 900px) {
	.td-spot__inner { align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--td-s-7); }
}

/* -----------------------------------------------------------------------------
   Collection - the shared post grid
   -------------------------------------------------------------------------- */

.td-collection__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--td-s-6);
}

.td-collection__empty { margin-top: var(--td-s-6); }

.td-collection__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-4);
	justify-content: center;
	margin-top: var(--td-s-7);
}

@media (min-width: 640px) {
	.td-collection__grid { gap: var(--td-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.td-collection__grid--1 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
	.td-collection__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.td-collection__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   Selected work card - visual, and quieter than a case study on purpose
   -------------------------------------------------------------------------- */

.td-project {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-3);
	text-decoration: none;
}

.td-project .td-media {
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	overflow: hidden;
}

.td-project__body { display: grid; gap: var(--td-s-2); }

.td-project__type {
	color: var(--td-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-project__title { font-size: var(--td-fs-h4); letter-spacing: var(--td-tracking-head); }

.td-project__client { color: var(--td-ink-3); font-size: var(--td-fs-xs); }

.td-project__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--td-s-2); }

.td-project--feature .td-project__title { font-size: var(--td-fs-h3); }

/* -----------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.td-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-pagination .page-numbers {
	align-items: center;
	border: var(--td-card-border);
	border-radius: var(--td-r-btn);
	color: var(--td-ink-2);
	display: inline-flex;
	font-size: var(--td-fs-sm);
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0 12px;
	text-decoration: none;
	transition: border-color var(--td-t-micro) var(--td-ease), color var(--td-t-micro) var(--td-ease);
}

.td-pagination a.page-numbers:hover { border-color: var(--td-hairline-accent); color: var(--td-ink); }

.td-pagination .page-numbers.current {
	background: var(--td-accent);
	border-color: transparent;
	color: var(--td-accent-ink);
}

.td-pagination .page-numbers.dots { border-color: transparent; }

/* -----------------------------------------------------------------------------
   Case-study hero shot
   -------------------------------------------------------------------------- */

.td-phero__shot {
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.td-narr__metrics { grid-template-columns: minmax(0, 1fr); }
	.td-filters__reset { margin-left: 0; }
}

/* =============================================================================
   VOLUME 05 - ABOUT AND BRAND AUTHORITY
   The strategic core: more editorial than the service pages, same Ten DNA.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   The Ten Dimensions explorer
   -------------------------------------------------------------------------- */

.td-dims__layout { position: relative; }

/* Decorative, and behind the list: the dimensions have to be readable as text
   whether or not the mark renders. */
.td-dims__mark {
	display: none;
	inset-block-start: 0;
	pointer-events: none;
	position: absolute;
	width: min(420px, 34vw);
}

.td-dims__mark .td-ten-form { opacity: 0.1; }

.td-dims__list {
	counter-reset: none;
	display: grid;
	gap: var(--td-s-3);
	list-style: none;
	margin: var(--td-s-6) 0 0;
	padding: 0;
}

.td-dims__item {
	border-bottom: 1px solid var(--td-line);
	padding-bottom: var(--td-s-3);
	scroll-margin-top: calc(var(--td-header-h) + 24px);
}

.td-dims__head {
	align-items: start;
	display: grid;
	gap: var(--td-s-3) var(--td-s-4);
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.td-dims__number {
	color: var(--td-accent);
	font-size: var(--td-fs-h4);
	font-weight: 500;
	line-height: 1.1;
}

.td-dims__naming { display: grid; gap: 4px; }

.td-dims__name {
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
}

.td-dims__def { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

.td-dims__toggle {
	align-items: center;
	background: none;
	border: var(--td-card-border);
	border-radius: var(--td-r-pill);
	color: var(--td-ink-2);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	transition: border-color var(--td-t-micro) var(--td-ease), color var(--td-t-micro) var(--td-ease);
	width: 40px;
}

.td-dims__toggle:hover { border-color: var(--td-hairline-accent); color: var(--td-accent); }

.td-dims__detail { display: grid; gap: var(--td-s-4); padding-top: var(--td-s-3); }

.td-dims__role { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

.td-dims__role-label {
	color: var(--td-ink-3);
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-dims__tags,
.td-dims__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-2) var(--td-s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-dims__links { font-size: var(--td-fs-sm); }

.td-dims__note {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	margin-top: var(--td-s-6);
	max-width: 60ch;
}

@media (min-width: 1024px) {
	.td-dims__mark { display: block; inset-inline-end: 0; inset-block-start: var(--td-s-7); }
	.td-dims__list { margin-inline-end: min(360px, 30vw); }
}

/* -----------------------------------------------------------------------------
   Triad - the 3E model
   -------------------------------------------------------------------------- */

.td-triad__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--td-s-6) 0 0;
	padding: 0;
}

.td-triad__item {
	display: grid;
	gap: var(--td-s-3);
	padding: clamp(24px, 2.6vw, 40px);
}

.td-triad__mark {
	color: var(--td-accent);
	font-size: var(--td-fs-numeral);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.8;
}

.td-triad__title { font-size: var(--td-fs-h4); letter-spacing: var(--td-tracking-head); }

.td-triad__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

@media (min-width: 768px) {
	.td-triad__grid { gap: var(--td-s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */

.td-person {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.td-person .td-media { border-radius: 0; }

.td-person__body {
	display: grid;
	gap: var(--td-s-2);
	padding: clamp(20px, 2vw, 30px);
}

.td-person__name { font-size: var(--td-fs-h4); letter-spacing: var(--td-tracking-head); }

.td-person__role { color: var(--td-accent); font-size: var(--td-fs-sm); font-weight: 600; margin: 0; }

.td-person__meta {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.td-person__bio { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

.td-person__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: var(--td-s-2) 0 0;
	padding: 0;
}

.td-person__link { font-size: var(--td-fs-xs); justify-self: start; }

/* -----------------------------------------------------------------------------
   Open roles
   -------------------------------------------------------------------------- */

.td-role {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-4);
	padding: clamp(22px, 2.2vw, 34px);
	text-decoration: none;
}

.td-role__body { display: grid; gap: var(--td-s-2); }

.td-role__title { font-size: var(--td-fs-h4); letter-spacing: var(--td-tracking-head); }

.td-role__meta {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.td-role__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: 0; }

.td-role__foot {
	align-items: center;
	color: var(--td-accent);
	display: inline-flex;
	font-size: var(--td-fs-xs);
	font-weight: 600;
	gap: 8px;
	letter-spacing: var(--td-tracking-eyebrow);
	margin-top: auto;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   The client-facing output of an approach phase
   -------------------------------------------------------------------------- */

.td-process__output {
	border-left: 2px solid var(--td-hairline-accent);
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	margin: var(--td-s-3) 0 0;
	padding-left: var(--td-s-3);
}

.td-process__output-label {
	color: var(--td-ink-3);
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =============================================================================
   VOLUME 06 - INSIGHTS
   Editorial and intelligent, not a corporate blog. Typography and whitespace do
   most of the work.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   The answer-first block
   -------------------------------------------------------------------------- */

.td-answer__inner {
	border-left: 3px solid var(--td-accent);
	display: grid;
	gap: var(--td-s-3);
	margin-inline: auto;
	max-width: 74ch;
	overflow: hidden;
	padding: clamp(26px, 2.8vw, 44px);
	position: relative;
}

/* The answer is the one block on the page an answer engine is most likely to
   lift whole, and the one a reader in a hurry stops at. It gets the only warm
   wash on the article so it reads as the summary rather than as a pull-quote. */
.td-answer__inner::after {
	background: radial-gradient(120% 140% at 0% 0%, var(--td-glow), transparent 62%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

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

.td-answer__label {
	align-items: center;
	color: var(--td-accent);
	display: flex;
	font-size: var(--td-fs-eyebrow);
	font-weight: 600;
	gap: var(--td-s-2);
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-answer__label::before {
	background: var(--td-grad-brand);
	content: "";
	height: 2px;
	width: 22px;
}

.td-answer__question {
	font-size: var(--td-fs-h3);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-tight);
	text-wrap: balance;
}

.td-answer__body { color: var(--td-ink); font-size: var(--td-fs-lead); line-height: var(--td-lh-body); }
.td-answer__body p { margin: 0 0 var(--td-s-3); }
.td-answer__body p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */

.td-toc__panel {
	border-block: 1px solid var(--td-line);
	padding-block: var(--td-s-3);
}

.td-toc__summary {
	align-items: center;
	color: var(--td-ink-3);
	cursor: pointer;
	display: flex;
	font-size: var(--td-fs-eyebrow);
	font-weight: 600;
	gap: var(--td-s-2);
	justify-content: space-between;
	letter-spacing: var(--td-tracking-eyebrow);
	list-style: none;
	text-transform: uppercase;
}

.td-toc__summary::-webkit-details-marker { display: none; }

.td-toc__icon { transition: transform var(--td-t-micro) var(--td-ease); }
.td-toc__panel[open] .td-toc__icon { transform: rotate(180deg); }

.td-toc__list {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: var(--td-s-3) 0 0;
	padding: 0;
}

.td-toc__link {
	border-left: 2px solid transparent;
	color: var(--td-ink-3);
	display: block;
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-snug);
	padding: 7px 0 7px var(--td-s-3);
	text-decoration: none;
	transition:
		border-color var(--td-t-micro) var(--td-ease),
		color var(--td-t-micro) var(--td-ease);
}

.td-toc__item--h3 .td-toc__link {
	font-size: var(--td-fs-xs);
	padding-left: var(--td-s-5);
}

.td-toc__link:hover,
.td-toc__link:focus-visible {
	border-left-color: var(--td-accent);
	color: var(--td-ink);
}

/* Set by reveal.js as each heading passes the top of the viewport, so the rail
   tells you where you are as well as where you can go. Nothing depends on it:
   without JavaScript the list is still a working set of anchors. */
.td-toc__link.is-current {
	border-left-color: var(--td-accent);
	color: var(--td-ink);
	font-weight: 600;
}

/* As a rail the panel is a column, not a band, so the horizontal rules that
   separated it from the article above and below would read as clutter. */
@media (min-width: 960px) {
	.td-body__aside .td-toc__panel { border-block: 0; padding-block: 0; }

	/* The rail is always open at this width, so the disclosure control becomes
	   a plain heading rather than a control that does nothing. */
	.td-body__aside .td-toc__summary { cursor: default; pointer-events: none; }
	.td-body__aside .td-toc__icon { display: none; }

	.td-body__aside .td-toc__nav {
		border-left: 1px solid var(--td-line);
		margin-top: var(--td-s-3);
		max-height: calc(100vh - var(--td-header-h) - var(--td-s-9));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Pulled one pixel left so an item's own accent border lands on the rail
	   line rather than beside it. */
	.td-body__aside .td-toc__list { margin-top: 0; }
	.td-body__aside .td-toc__link { margin-left: -1px; }
}

/* -----------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.td-sources {
	--td-sources-measure: 68ch;
}

.td-sources__title {
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	margin-inline: auto;
	max-width: var(--td-sources-measure);
}

/* A reference list, not a bullet list: the marker is a counter in the brand
   mono face so a citation can be pointed at by number the way a report cites
   one, and the note under each source gets its own line rather than trailing
   the title in the same colour. */
.td-sources__list {
	color: var(--td-ink-2);
	counter-reset: td-source;
	display: grid;
	font-size: var(--td-fs-sm);
	gap: var(--td-s-4);
	list-style: none;
	margin: var(--td-s-5) auto 0;
	max-width: var(--td-sources-measure);
	padding-left: 0;
}

.td-sources__list > li {
	border-top: 1px solid var(--td-line);
	counter-increment: td-source;
	display: grid;
	gap: 0 var(--td-s-4);
	grid-template-columns: auto minmax(0, 1fr);
	padding-top: var(--td-s-3);
}

.td-sources__list > li::before {
	color: var(--td-accent);
	content: counter(td-source, decimal-leading-zero);
	font-family: var(--td-font-mono);
	font-size: var(--td-fs-xs);
	grid-row: span 2;
	letter-spacing: var(--td-tracking-eyebrow);
	padding-top: 2px;
}

.td-sources__list a { color: var(--td-ink); }
.td-sources__list a:hover { color: var(--td-accent); }

.td-sources__note {
	color: var(--td-ink-4);
	display: block;
	font-size: var(--td-fs-xs);
	margin-top: 4px;
}

.td-sources__method {
	border-left: 2px solid var(--td-line-2);
	color: var(--td-ink-3);
	font-size: var(--td-fs-sm);
	margin: var(--td-s-6) auto 0;
	max-width: var(--td-sources-measure);
	padding-left: var(--td-s-4);
}

/* -----------------------------------------------------------------------------
   Author
   -------------------------------------------------------------------------- */

.td-author__card {
	align-items: start;
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(20px, 2vw, 32px);
}

.td-author__portrait img {
	border-radius: var(--td-r-pill);
	display: block;
	height: 72px;
	object-fit: cover;
	width: 72px;
}

.td-author__label {
	color: var(--td-ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-author__name { font-size: var(--td-fs-h4); letter-spacing: var(--td-tracking-head); margin: 4px 0 0; }
.td-author__name a { color: inherit; text-decoration: none; }
.td-author__name a:hover { color: var(--td-accent); }

.td-author__role { color: var(--td-accent); font-size: var(--td-fs-sm); font-weight: 600; margin: 2px 0 0; }
.td-author__bio { color: var(--td-ink-2); font-size: var(--td-fs-sm); margin: var(--td-s-2) 0 0; }

@media (min-width: 640px) {
	.td-author__card { grid-template-columns: auto minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   Insight card
   -------------------------------------------------------------------------- */

.td-insight {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	text-decoration: none;
}

.td-insight .td-media { border-radius: 0; }

.td-insight__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--td-s-2);
	padding: clamp(20px, 2vw, 30px);
}

.td-insight__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-2);
	margin: 0;
}

/* The type is the first thing that tells a reader whether this is five minutes
   or fifty, so it is a marker rather than another line of small caps. */
.td-insight__type {
	background: color-mix(in srgb, var(--td-accent) 12%, transparent);
	border-radius: var(--td-r-xs);
	color: var(--td-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	padding: 3px 8px;
	text-transform: uppercase;
}

.td-insight__time {
	color: var(--td-ink-4);
	font-family: var(--td-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The separator is drawn rather than typed so it never lands at the start of a
   wrapped line. */
.td-insight__time::before {
	content: "";
	display: inline-block;
	height: 3px;
	margin-right: var(--td-s-2);
	vertical-align: middle;
	width: 3px;
	background: currentColor;
	border-radius: 50%;
}

.td-insight__title {
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-tight);
	text-wrap: balance;
	transition: color var(--td-t-micro) var(--td-ease);
}

.td-insight:hover .td-insight__title { color: var(--td-accent); }

.td-insight--feature .td-insight__title { font-size: var(--td-fs-h3); }

.td-insight__copy {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-body);
	margin: 0;
}

.td-insight__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--td-s-2); }

.td-insight__date {
	border-top: 1px solid var(--td-line);
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	margin: auto 0 0;
	padding-top: var(--td-s-3);
}

/* The feature card runs as one wide unit on desktop: image beside the words,
   rather than a taller version of the cards beside it. */
@media (min-width: 900px) {
	.td-insight--feature {
		align-items: stretch;
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.td-insight--feature .td-media { height: 100%; }
	.td-insight--feature .td-media img { height: 100%; object-fit: cover; }

	.td-insight--feature .td-insight__body {
		justify-content: center;
		padding: clamp(28px, 3vw, 48px);
	}
}

/* =============================================================================
   Find Your Solution — the questionnaire and the recommendation
   ========================================================================== */

/* The questionnaire ---------------------------------------------------------

   One panel, one form, one column. The whole thing is deliberately narrow: a
   question is a sentence, and a sentence read across a full 1440px page is a
   worse question. The steps are rows in that panel rather than bands on the
   page, so answering feels like filling in a card rather than scrolling a
   brochure.

   Which step is open is a class on the row. Without the script every row is
   open at once and the panel is an ordinary long form — the .td-no-js block at
   the end of this section is what makes that true. */

.td-finder {
	overflow: hidden;
	position: relative;
}

/* One soft field of brand light behind the panel, so a page that is mostly a
   form still reads as part of the same site as the hero. */
.td-finder::before {
	background: radial-gradient(60% 50% at 50% 0%, rgba(255, 138, 43, 0.10), transparent 70%);
	content: "";
	inset: 0 0 auto 0;
	height: 420px;
	pointer-events: none;
	position: absolute;
}

.td-finder > .td-container {
	position: relative;
	z-index: var(--td-z-base);
}

.td-finder__intro {
	margin: 0 auto var(--td-s-7);
	max-width: 54ch;
	text-align: center;
}

.td-finder__lede {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h2);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-tight);
	margin: var(--td-s-3) 0 0;
}

.td-finder__sub {
	color: var(--td-ink-3);
	margin: var(--td-s-4) auto 0;
	max-width: 52ch;
}

.td-finder__panel {
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-xl);
	box-shadow: var(--td-card-shadow);
	margin: 0 auto;
	max-width: 840px;
	padding: clamp(20px, 2.6vw, 36px);
}

/* Progress ------------------------------------------------------------------ */

.td-finder__bar {
	align-items: center;
	display: flex;
	gap: var(--td-s-4);
	margin-bottom: var(--td-s-5);
}

.td-finder__count {
	align-items: baseline;
	color: var(--td-ink-3);
	display: flex;
	font-size: var(--td-fs-xs);
	font-variant-numeric: tabular-nums;
	gap: 0.35em;
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.td-finder__count [data-finder-current] {
	color: var(--td-ink);
	font-size: var(--td-fs-sm);
}

.td-finder__track {
	background: var(--td-line);
	border-radius: var(--td-r-pill);
	flex: 1 1 auto;
	height: 3px;
	overflow: hidden;
}

.td-finder__fill {
	background: linear-gradient(90deg, var(--td-accent), color-mix(in oklab, var(--td-accent) 55%, var(--td-ink)));
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width var(--td-t-standard) var(--td-ease-out);
	width: var(--td-finder-progress, 0%);
}

/* What went wrong ----------------------------------------------------------- */

.td-form__alert {
	background: color-mix(in oklab, var(--td-accent) 10%, transparent);
	border: 1px solid color-mix(in oklab, var(--td-accent) 32%, transparent);
	border-radius: var(--td-r-card);
	margin-bottom: var(--td-s-5);
	padding: var(--td-s-4) var(--td-s-5);
}

.td-form__alert p {
	font-weight: 600;
	margin: 0 0 var(--td-s-2);
}

.td-form__alert ul {
	margin: 0;
	padding-left: 1.1em;
}

.td-form__alert a { color: var(--td-accent); }

/* The steps ----------------------------------------------------------------- */

.td-finder__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-finder__step + .td-finder__step {
	border-top: 1px solid var(--td-line);
}

.td-finder__step.is-locked { display: none; }

.td-finder__step > .td-finder__body { display: none; }

.td-finder__step.is-active > .td-finder__body {
	animation: td-finder-in var(--td-t-standard) var(--td-ease-out) both;
	display: block;
	padding: var(--td-s-5) 0 var(--td-s-6);
}

@keyframes td-finder-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* A closed step -------------------------------------------------------------

   Once answered, a question shrinks to the thing a visitor actually needs from
   it: what was asked, what they said, and a way back. */

/* A class selector beats the user agent's [hidden] rule, so the collapsed head
   has to opt back out of display by name or it shows above its own question. */
.td-finder__head[hidden] { display: none; }

.td-finder__head {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: grid;
	font: inherit;
	gap: var(--td-s-4);
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: var(--td-s-4) 0;
	text-align: left;
	width: 100%;
}

.td-finder__num {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--td-tracking-eyebrow);
}

.td-finder__head-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.td-finder__head-q {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.td-finder__head-a {
	color: var(--td-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.td-finder__edit {
	color: var(--td-accent);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	opacity: 0;
	text-transform: uppercase;
	transition: opacity var(--td-t-micro) var(--td-ease);
}

.td-finder__head:hover .td-finder__edit,
.td-finder__head:focus-visible .td-finder__edit { opacity: 1; }

/* Nothing hovers on a touch screen, so the only way back to an earlier answer
   would be invisible. Show it. */
@media (hover: none) {
	.td-finder__edit { opacity: 1; }
}

.td-finder__head:focus-visible {
	border-radius: var(--td-r-xs);
	outline: 2px solid var(--td-accent);
	outline-offset: 3px;
}

/* The question --------------------------------------------------------------- */

.td-finder__fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.td-finder__legend {
	display: block;
	float: none;
	margin-bottom: var(--td-s-5);
	padding: 0;
	width: 100%;
}

.td-finder__legend .td-finder__num {
	display: block;
	margin-bottom: var(--td-s-2);
}

.td-finder__question {
	display: block;
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
}

.td-finder__question:focus { outline: none; }

.td-finder__hint {
	color: var(--td-ink-3);
	display: block;
	font-size: var(--td-fs-sm);
	margin-top: var(--td-s-2);
	max-width: 54ch;
}

.td-form__error {
	color: var(--td-accent);
	display: block;
	font-size: var(--td-fs-sm);
	margin: 0 0 var(--td-s-3);
}

/* The options ---------------------------------------------------------------- */

.td-finder__options {
	display: grid;
	gap: var(--td-s-3);
}

/* Two columns, not three. The panel is 760px wide by design, and a card with
   a sentence of reasoning in it needs about 340px before the reasoning starts
   wrapping to three lines. Six options then read as 3x2. */
.td-finder__options--grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.td-finder__options--list { grid-template-columns: minmax(0, 1fr); }

.td-finder__options--chips {
	display: flex;
	flex-wrap: wrap;
}

.td-finder__option { display: block; }
.td-finder__option[hidden] { display: none; }

.td-finder__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.td-finder__face {
	align-items: flex-start;
	background: var(--td-card-bg-2);
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-card);
	cursor: pointer;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto minmax(0, 1fr) auto;
	height: 100%;
	padding: var(--td-s-4);
	transition:
		border-color var(--td-t-micro) var(--td-ease),
		background-color var(--td-t-micro) var(--td-ease),
		transform var(--td-t-micro) var(--td-ease-out);
}

.td-finder__face:hover {
	border-color: var(--td-line-2);
	transform: translateY(-2px);
}

.td-finder__glyph {
	align-items: center;
	color: var(--td-accent);
	display: inline-flex;
	height: 22px;
}

.td-finder__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.td-finder__label {
	font-weight: 600;
	line-height: var(--td-lh-snug);
}

.td-finder__copy {
	color: var(--td-ink-3);
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-snug);
}

.td-finder__tick {
	align-items: center;
	background: var(--td-accent);
	border-radius: var(--td-r-pill);
	color: var(--td-accent-ink);
	display: inline-flex;
	height: 20px;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity var(--td-t-micro) var(--td-ease),
		transform var(--td-t-micro) var(--td-ease-spring);
	width: 20px;
}

.td-finder__input:checked + .td-finder__face {
	background: color-mix(in oklab, var(--td-accent) 8%, var(--td-card-bg-2));
	border-color: color-mix(in oklab, var(--td-accent) 48%, transparent);
}

.td-finder__input:checked + .td-finder__face .td-finder__tick {
	opacity: 1;
	transform: none;
}

.td-finder__input:focus-visible + .td-finder__face {
	outline: 2px solid var(--td-accent);
	outline-offset: 2px;
}

/* Chips are the same control with the reasoning taken out: a one-word answer
   does not need a card the size of a paragraph. */
.td-finder__options--chips .td-finder__face {
	border-radius: var(--td-r-pill);
	gap: var(--td-s-2);
	grid-template-columns: auto auto;
	padding: 10px 18px;
}

.td-finder__options--chips .td-finder__copy { display: none; }

/* Unanswered ---------------------------------------------------------------- */

.td-finder__step.is-missing .td-finder__options {
	animation: td-finder-nudge 400ms var(--td-ease);
	border-radius: var(--td-r-card);
	outline: 2px solid color-mix(in oklab, var(--td-accent) 55%, transparent);
	outline-offset: 8px;
}

@keyframes td-finder-nudge {
	0%, 100% { transform: none; }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* Moving on ------------------------------------------------------------------ */

.td-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-3) var(--td-s-4);
	margin-top: var(--td-s-5);
}

.td-form__note {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	margin: 0;
	max-width: 36ch;
}

/* Lead fields ---------------------------------------------------------------

   Shared. The Finder's last step and the discovery request are the same six
   questions, so they are the same markup and the same rules. */

.td-form__trap {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.td-form__fields {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* align-content is the whole reason the fields in a row line up. A grid's
   default is stretch, so a field with no help note under it shared the row's
   spare height between its own rows: its label sat lower and its input grew
   taller than the input beside it. Packing the rows to the top means every
   control in a row starts at the same y and is the same height, whatever sits
   underneath it. */
.td-form__field {
	align-content: start;
	display: grid;
	gap: var(--td-s-2);
	margin: 0;
	min-width: 0;
}

.td-form__field--wide { grid-column: 1 / -1; }

.td-form__field > label {
	align-items: baseline;
	color: var(--td-ink-2);
	display: flex;
	font-size: var(--td-fs-sm);
	gap: var(--td-s-2);
}

.td-form__optional {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-form__field input,
.td-form__field textarea {
	background: var(--td-well-bg, var(--td-card-bg-2));
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-btn);
	color: var(--td-ink);
	font: inherit;
	padding: 12px 14px;
	transition: border-color var(--td-t-micro) var(--td-ease);
	width: 100%;
}

.td-form__field textarea { resize: vertical; }

.td-form__field input:focus-visible,
.td-form__field textarea:focus-visible {
	border-color: var(--td-accent);
	outline: 2px solid color-mix(in oklab, var(--td-accent) 40%, transparent);
	outline-offset: 1px;
}

.td-form__field.is-invalid input,
.td-form__field.is-invalid textarea { border-color: var(--td-accent); }

.td-form__help {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
}

.td-form__consent {
	display: grid;
	gap: var(--td-s-3);
	margin-top: var(--td-s-5);
}

.td-form__check {
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
}

.td-form__check input {
	accent-color: var(--td-accent);
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

.td-form__check label {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-snug);
}

.td-form__check a { color: var(--td-accent); }
.td-form__check .td-form__error { grid-column: 2; }

/* The icon is set inline rather than as a flex sibling: as a flex item it takes
   its own column, and a note that wraps to two lines then reads as a left-hand
   glyph beside a centred paragraph. */
.td-finder__assure {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	margin: var(--td-s-5) auto 0;
	max-width: 62ch;
	text-align: center;
}

.td-finder__assure .td-icon {
	margin-right: 6px;
	vertical-align: -2px;
}

/* Without the script --------------------------------------------------------

   Every step is open, the progress bar means nothing and the buttons that only
   move between steps are gone. What is left is one long questionnaire with one
   submit button, which is exactly what it was underneath all along. */

.td-no-js .td-finder__step,
.td-no-js .td-finder__step > .td-finder__body {
	animation: none;
	display: block;
}

.td-no-js .td-finder__step > .td-finder__body { padding: var(--td-s-5) 0 var(--td-s-6); }
.td-no-js .td-finder__bar { display: none; }
.td-no-js [data-finder-next],
.td-no-js [data-finder-skip] { display: none; }

@media (max-width: 640px) {
	.td-finder__lede { font-size: var(--td-fs-h3); }
	.td-finder__panel { padding: var(--td-s-4); }
	.td-finder__options--grid { grid-template-columns: minmax(0, 1fr); }
	.td-form__actions .td-btn { width: 100%; }
	.td-finder__edit { opacity: 1; }
}

/* The recommendation --------------------------------------------------------

   The primary recommendation is the answer; the supporting opportunity and the
   ranked service lines are the reasoning. Reasoning sits beside an answer, not
   in a band of its own underneath it. */

.td-rec__grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: minmax(0, 1fr);
}

.td-rec__primary,
.td-rec__supporting,
.td-rec__services {
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	box-shadow: var(--td-card-shadow);
	position: relative;
}

.td-rec__primary { padding: clamp(24px, 3vw, 44px); }

.td-rec__eyebrow {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0 0 var(--td-s-3);
	text-transform: uppercase;
}

.td-rec__title {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h2);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-tight);
	margin: 0;
}

.td-rec__outcome {
	color: var(--td-ink-2);
	font-size: var(--td-fs-lead);
	margin: var(--td-s-4) 0 0;
	max-width: 46ch;
}

/* What they said, quoted back. It is the one line on this page that proves the
   recommendation was arrived at rather than picked. */
.td-rec__because {
	border-left: 2px solid color-mix(in oklab, var(--td-accent) 60%, transparent);
	display: grid;
	gap: 2px;
	margin: var(--td-s-5) 0 0;
	padding-left: var(--td-s-4);
}

.td-rec__because span {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-rec__because q {
	color: var(--td-ink);
	font-size: var(--td-fs-body);
}

.td-rec__primary .td-btn { margin-top: var(--td-s-6); }

.td-rec__rule {
	background: linear-gradient(90deg, var(--td-accent), transparent);
	border-radius: inherit;
	height: 3px;
	inset: 0 auto auto 0;
	position: absolute;
	width: 46%;
}

.td-rec__side {
	display: grid;
	gap: var(--td-s-5);
}

.td-rec__supporting,
.td-rec__services { padding: var(--td-s-5); }

.td-rec__sub {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
	margin: 0;
}

.td-rec__copy {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	margin: var(--td-s-3) 0 0;
}

.td-rec__aside {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	line-height: var(--td-lh-snug);
	margin: var(--td-s-4) 0 0;
}

.td-rec__link {
	align-items: center;
	color: var(--td-accent);
	display: inline-flex;
	font-size: var(--td-fs-sm);
	gap: var(--td-s-2);
	margin-top: var(--td-s-4);
}

.td-rec__link:hover .td-arrow { transform: translate(2px, -2px); }

.td-rec__lines {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-rec__lines li + li { border-top: 1px solid var(--td-line); }

.td-rec__lines a {
	align-items: center;
	color: inherit;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: var(--td-s-3) 0;
	transition: color var(--td-t-micro) var(--td-ease);
}

.td-rec__lines a:hover { color: var(--td-accent); }
.td-rec__lines a:hover .td-arrow { transform: translate(2px, -2px); }

.td-rec__rank {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	font-variant-numeric: tabular-nums;
}

.td-rec__line {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.td-rec__line-title {
	font-size: var(--td-fs-sm);
	font-weight: 600;
}

.td-rec__line-unit {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
}

/* The ranking already said which line matches you most. The bar says by how
   much, which is the difference between a list and a measurement. Widths are
   relative to the strongest line, so the top one is always full. */
.td-rec__meter {
	align-items: center;
	display: grid;
	gap: var(--td-s-2);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: 6px;
}

.td-rec__meter-fill {
	background: var(--td-line);
	border-radius: var(--td-r-pill);
	display: block;
	height: 3px;
	overflow: hidden;
	position: relative;
}

.td-rec__meter-fill::after {
	animation: td-meter-grow 900ms var(--td-ease-out) both;
	background: var(--td-grad-brand);
	border-radius: inherit;
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: var(--td-meter, 0%);
}

.td-rec__meter-value {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

@keyframes td-meter-grow {
	from { width: 0; }
	to   { width: var(--td-meter, 0%); }
}

@media (min-width: 960px) {
	.td-rec__grid {
		align-items: start;
		column-gap: var(--td-s-6);
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
	}
}

@media (max-width: 640px) {
	.td-rec__title { font-size: var(--td-fs-h3); }
}

/* =============================================================================
   The result panel
   ========================================================================== */

/* The recommendation arrives here rather than on a page of its own. A <dialog>
   carries its own focus trap, its own Escape handling and its own inert
   background, so this file only has to say what it looks like. */

.td-modal {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--td-ink);
	max-height: min(88vh, 940px);
	max-width: min(1000px, calc(100vw - 2 * var(--td-s-4)));
	overflow: visible;
	padding: 0;
	width: 100%;
}

.td-modal::backdrop {
	backdrop-filter: blur(6px);
	background: color-mix(in oklab, #0b0a09 62%, transparent);
}

.td-modal__shell {
	/* Two layers, because a card's background is glass and glass over a
	   backdrop is a window: the footer of the page behind was legible through
	   the recommendation. The solid ground goes underneath, the card's own
	   tint stays on top of it, and the panel reads as a surface in both
	   themes. */
	background: linear-gradient(var(--td-card-bg), var(--td-card-bg)), var(--td-bg-alt);
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	box-shadow: var(--td-card-shadow);
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow: hidden;
}

/* Opening is a movement the page can afford: it is a deliberate act with a
   result behind it, and arriving without any transition reads as a jump cut. */
.td-modal[open] .td-modal__shell {
	animation: td-modal-in 320ms var(--td-ease-out) both;
}

@keyframes td-modal-in {
	from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

/* The bar stays while the result scrolls under it, so the way out is never
   somewhere the reader has to scroll back to find. */
.td-modal__bar {
	align-items: center;
	background: var(--td-card-bg-2);
	border-bottom: 1px solid var(--td-line);
	display: flex;
	flex: none;
	gap: var(--td-s-3);
	padding: var(--td-s-3) var(--td-s-4);
}

.td-modal__mark {
	align-items: center;
	background: color-mix(in oklab, var(--td-accent) 12%, transparent);
	border-radius: var(--td-r-pill);
	color: var(--td-accent);
	display: inline-flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.td-modal__label {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0;
	margin-right: auto;
	text-transform: uppercase;
}

.td-modal__close {
	align-items: center;
	background: transparent;
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-pill);
	color: var(--td-ink-3);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.25rem;
	height: 34px;
	justify-content: center;
	line-height: 1;
	transition:
		background-color var(--td-t-micro) var(--td-ease),
		border-color var(--td-t-micro) var(--td-ease),
		color var(--td-t-micro) var(--td-ease);
	width: 34px;
}

.td-modal__close:hover {
	background: color-mix(in oklab, var(--td-accent) 10%, transparent);
	border-color: var(--td-accent);
	color: var(--td-accent);
}

.td-modal__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 0 var(--td-s-5);
}

.td-modal__body:focus-visible { outline: none; }

.td-modal__head {
	padding: var(--td-s-6) clamp(20px, 3vw, 40px) 0;
}

.td-modal__eyebrow {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0 0 var(--td-s-3);
	text-transform: uppercase;
}

.td-modal__title {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h3);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
	margin: 0;
}

.td-modal__copy {
	color: var(--td-ink-3);
	margin: var(--td-s-4) 0 0;
	max-width: 62ch;
}

/* The sections inside are the page's sections, unmodified. What changes is the
   space around them: a band sized to own a viewport is wrong inside a panel
   that is already a viewport's worth of content. */
.td-modal__sections .td-section {
	padding-block: var(--td-s-5);
}

.td-modal__sections .td-container {
	max-width: none;
	padding-inline: clamp(20px, 3vw, 40px);
}

.td-modal__sections .td-section--alt {
	background: transparent;
}

.td-modal__full {
	margin: 0;
	padding: 0 clamp(20px, 3vw, 40px);
	text-align: center;
}

.td-modal__full a {
	align-items: center;
	color: var(--td-accent);
	display: inline-flex;
	font-size: var(--td-fs-sm);
	gap: 6px;
}

.td-modal__full a:hover .td-arrow { transform: translate(2px, -2px); }

/* The page behind must not scroll while the panel is open. A modal dialog makes
   the page inert, which is not the same thing as still. */
.td-modal-open { overflow: hidden; }

/* Waiting -------------------------------------------------------------------

   The submit does real work - it stores a lead and may hand a message to an
   SMTP server - so the button says so rather than appearing to have missed the
   click. */

.td-form__status {
	color: var(--td-ink-4);
	flex-basis: 100%;
	font-size: var(--td-fs-xs);
	margin: 0;
	min-height: 1em;
}

.td-finder__panel.is-working [data-finder-submit] {
	cursor: progress;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.td-modal[open] .td-modal__shell { animation: none; }
}

@media (max-width: 640px) {
	.td-modal {
		max-height: 92vh;
		max-width: calc(100vw - var(--td-s-3));
	}

	.td-modal__title { font-size: var(--td-fs-h4); }
}

/* =============================================================================
   The working
   ========================================================================== */

/* What the visitor told us, and the arithmetic that turned it into the
   recommendation above. It shares the recommendation's grid proportions on
   purpose: the answer and its evidence should read as one spread, not as a
   section and an appendix. */

.td-sum__grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: minmax(0, 1fr);
}

.td-sum__answers,
.td-sum__score {
	border-radius: var(--td-r-lg);
	padding: clamp(20px, 2.6vw, 36px);
}

.td-sum__title {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
	margin: 0 0 var(--td-s-5);
}

.td-sum__list {
	display: grid;
	margin: 0;
}

.td-sum__row {
	align-items: baseline;
	border-top: 1px solid var(--td-line);
	display: grid;
	gap: var(--td-s-2) var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
	padding: var(--td-s-4) 0;
}

.td-sum__row:first-child { border-top: 0; padding-top: 0; }
.td-sum__row:last-child { padding-bottom: 0; }

.td-sum__q {
	color: var(--td-ink-4);
	font-size: var(--td-fs-sm);
	margin: 0;
}

.td-sum__a {
	color: var(--td-ink);
	font-size: var(--td-fs-sm);
	font-weight: 600;
	margin: 0;
}

/* A question that was declined is still a fact about the enquiry, so it stays
   on the sheet - quietly, in the voice of an absence rather than an answer. */
.td-sum__row.is-skipped .td-sum__a {
	color: var(--td-ink-4);
	font-style: italic;
	font-weight: 400;
}

.td-sum__answers .td-rec__link { margin-top: var(--td-s-5); }

/* The score ---------------------------------------------------------------- */

.td-sum__figure {
	align-items: baseline;
	display: flex;
	font-family: var(--td-font-editorial);
	gap: 2px;
	line-height: 1;
	margin: 0;
}

.td-sum__figure-value {
	color: var(--td-ink);
	font-size: clamp(3rem, 7vw, 4.25rem);
	font-variant-numeric: tabular-nums;
}

.td-sum__figure-unit {
	color: var(--td-accent);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.td-sum__meter {
	background: var(--td-line);
	border-radius: var(--td-r-pill);
	display: block;
	height: 6px;
	margin-top: var(--td-s-4);
	overflow: hidden;
	position: relative;
}

.td-sum__meter-fill {
	animation: td-meter-grow 1100ms var(--td-ease-out) both;
	background: var(--td-grad-brand);
	border-radius: inherit;
	display: block;
	height: 100%;
	width: var(--td-meter, 0%);
}

.td-sum__copy {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	line-height: var(--td-lh-body);
	margin: var(--td-s-4) 0 0;
}

.td-sum__flag {
	align-items: flex-start;
	background: color-mix(in oklab, var(--td-accent) 8%, transparent);
	border-radius: var(--td-r-card);
	color: var(--td-ink-3);
	display: flex;
	font-size: var(--td-fs-xs);
	gap: var(--td-s-3);
	line-height: var(--td-lh-snug);
	margin: var(--td-s-4) 0 0;
	padding: var(--td-s-3) var(--td-s-4);
}

.td-sum__flag .td-icon {
	color: var(--td-accent);
	flex: none;
	margin-top: 2px;
}

.td-sum__facts {
	border-top: 1px solid var(--td-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-3) var(--td-s-6);
	list-style: none;
	margin: var(--td-s-5) 0 0;
	padding: var(--td-s-4) 0 0;
}

.td-sum__facts li {
	align-items: baseline;
	display: flex;
	gap: var(--td-s-2);
}

.td-sum__fact-value {
	color: var(--td-ink);
	font-family: var(--td-font-editorial);
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.td-sum__fact-label {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
}

.td-sum__method {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	line-height: var(--td-lh-snug);
	margin: var(--td-s-4) 0 0;
}

@media (min-width: 960px) {
	.td-sum__grid {
		align-items: start;
		column-gap: var(--td-s-6);
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
	}

	/* Question and answer side by side once there is room for both: the sheet
	   is then scannable down the answers column, which is how anybody rereads
	   their own form. */
	.td-sum__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* =============================================================================
   Book a Discovery Call
   ========================================================================== */

/* The calendar and the form sit side by side where there is room, and stack
   calendar-first where there is not. Where no calendar is configured the form
   is the whole column rather than half of an empty grid. */

.td-book__grid {
	display: grid;
	gap: var(--td-s-6);
	grid-template-columns: minmax(0, 1fr);
}

.td-book__title {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h4);
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
	margin: var(--td-s-3) 0 0;
}

.td-book__copy {
	color: var(--td-ink-3);
	font-size: var(--td-fs-sm);
	margin: var(--td-s-3) 0 0;
	max-width: 46ch;
}

.td-book__calendar {
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	box-shadow: var(--td-card-shadow);
	padding: var(--td-s-5);
}

.td-book__calendar .td-book__title { margin-top: 0; }

/* A fixed height rather than an aspect ratio: a scheduling calendar is a fixed
   amount of interface, and scaling it with the viewport makes it either tiny or
   absurd. It scrolls inside the frame either way. */
.td-book__frame {
	border: 0;
	border-radius: var(--td-r-card);
	display: block;
	height: 640px;
	margin-top: var(--td-s-4);
	width: 100%;
}

.td-book__fallback {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	margin: var(--td-s-3) 0 0;
}

.td-book__fallback a { color: var(--td-accent); }

.td-book__head { margin-bottom: var(--td-s-5); }

.td-book__form {
	background: var(--td-card-bg);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-lg);
	box-shadow: var(--td-card-shadow);
	padding: clamp(20px, 2.6vw, 32px);
}

.td-book__direct {
	color: var(--td-ink-4);
	font-size: var(--td-fs-sm);
	margin: var(--td-s-4) 0 0;
	text-align: center;
}

.td-book__direct a { color: var(--td-accent); }

@media (min-width: 1000px) {
	.td-book__grid:has(.td-book__calendar) {
		align-items: start;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.td-book__frame { height: 560px; }
}

/* -----------------------------------------------------------------------------
   The card upgrades above are all transform-based, so they all stand down
   together for anyone who has asked for less movement. The colour and the
   surface stay; only the travel goes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.td-flow__stage:hover,
	.td-process__step:hover,
	.td-principles__item:hover { transform: none; }

	.td-flow__stage:hover .td-flow__dot,
	.td-process__step:hover .td-process__num,
	.td-connect__link:hover .td-connect__arrow { transform: none; }

	.td-flow__stage:hover .td-flow__dot { transform: rotate(45deg); }

	/* The meters still show their value; they simply do not travel to it. */
	.td-rec__meter-fill::after,
	.td-sum__meter-fill { animation: none; }
}