/*
Theme Name: WalktheChat
Theme URI: https://walkthechat.com
Description: WalktheChat child theme of Twenty Twenty-Five. Warm paper and ink palette, medium-weight grotesque headings, mono uppercase labels, pill outline buttons, and a blurred sticky header — visual language modeled on sentient.foundation.
Author: WalktheChat
Template: twentytwentyfive
Version: 1.9.7
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: walkthechat
*/

/* Sticky header with fading backdrop blur, as on sentient.foundation.
   The blur lives on a taller ::before layer masked to fade out below the
   bar, so the nav content itself stays fully opaque. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 99;
}

.wp-site-blocks > header::before {
	content: "";
	position: absolute;
	inset: 0 0 -50% 0;
	z-index: -1;
	pointer-events: none;
	background: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Header wordmark: Hanken Grotesk 500 baked to SVG paths (type-only
   study T1). The asset is glyph-tight; 17px glyph height reads like a
   24px font-size against the 0.95rem nav (the study showed 21px; the
   shipped size was nudged up on request). */
.wtc-header-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.wtc-header-logo img {
	display: block;
	width: auto;
	height: 17px;
}

/* Sentient nav pill, shared by the header CTA and hero actions:
   sentence-case grotesque text in a pill; on hover/focus a dot slides in
   from the left and nudges the label right (300ms ease-in-out, dot 10px +
   8px gap, as on sentient.foundation). The outline variant never fills. */
.wtc-pill,
.wtc-header-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0.5rem 0.75rem;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}

.wtc-pill:hover,
.wtc-pill:focus-visible,
.wtc-header-cta .wp-block-button__link:hover,
.wtc-header-cta .wp-block-button__link:focus-visible {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.wtc-pill::before,
.wtc-header-cta .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	max-width: 0;
	margin-right: 0;
	border-radius: 999px;
	background-color: currentColor;
	transform: translateX(-300%);
	transition:
		max-width 300ms cubic-bezier(0.42, 0, 0.58, 1),
		margin-right 300ms cubic-bezier(0.42, 0, 0.58, 1),
		transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.wtc-pill:hover::before,
.wtc-pill:focus-visible::before,
.wtc-header-cta .wp-block-button__link:hover::before,
.wtc-header-cta .wp-block-button__link:focus-visible::before {
	max-width: 0.625rem;
	margin-right: 0.5rem;
	transform: translateX(0);
}

/* Solid pill: ink fill, paper text — the dot slides in paper-colored. */
.wtc-pill--solid,
.wtc-pill--solid:hover,
.wtc-pill--solid:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* The menu and the pill need most of a tablet's width to sit on one
   row without wrapping, so below 860px the header goes to its phone
   form: the menu folds into its overlay. The pill stays at every width
   (theme 1.9.2), because the menu no longer carries a Contact link. WordPress
   hard-codes that fold at 600px; the last two rules are its own, moved
   up. Above it, nothing in the row may wrap. */
.wp-site-blocks > header .wp-block-navigation-item__label,
.wtc-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* On the narrowest phones the wordmark, menu button and pill overrun
   the row by 3px at the pattern's 1.25rem gap. */
@media (max-width: 359px) {
	.wp-site-blocks > header .wp-block-group:has(> .wtc-header-cta) {
		gap: 0.75rem;
	}
}

@media (max-width: 859px) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Navigation links: quiet, no underline, fade on hover. */
.wp-block-navigation a {
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
	opacity: 0.75;
	color: inherit;
}

/* Services submenu: a small paper card hung under its parent, in the
   header's own language — hairline rule, 16px radius, soft drop. Core
   parks it at top:100%; the 0.75rem gap it is nudged down by would open a
   dead zone on the way to it, so a transparent ::before bridges it.
   Scoped out of the mobile overlay, where core lays submenus out inline. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 0.75rem);
	left: -1.25rem;
	min-width: 16rem;
	padding: 0.5rem 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 16px;
	box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.75rem;
	height: 0.75rem;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.5rem 1.25rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

/* The chevron turns over while the submenu is up — on hover, where
   aria-expanded stays false, as well as on the click/keyboard toggle. */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.3s ease;
}

.wp-block-navigation .has-child:hover > .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Keep the mobile menu overlay on the paper background. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
}

/* The overlay as a ledger (theme 1.9.3). Core inherits the desktop row's
   right justification, which stacks the items against the right edge and
   indents the Services children from the wrong side. Here every item is a
   full-width row on the left margin, ruled above, in heading-size type;
   the three services sit under their parent as smaller, muted rows. */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem var(--wp--style--root--padding-right, 1.25rem) 2rem var(--wp--style--root--padding-left, 1.25rem);
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 4.5rem;
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.05rem 0;
	font-size: clamp(1.5rem, 6.4vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-align: left;
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	padding-bottom: 0.5rem;
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	align-items: stretch;
	gap: 0;
	width: 100%;
	padding: 0 0 0.9rem;
}

.wp-site-blocks > header .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.45rem 0;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
}

/* Core focuses the first link when the overlay opens; the parent theme
   outlines anything focused, so "Home" wore a box on every open. Keep the
   ring for keyboard focus only. */
.wp-site-blocks > header .is-menu-open :focus:not(:focus-visible) {
	outline: none;
}

/* Eyebrow label: mono, uppercase, muted — the Sentient section marker. */
.is-style-eyebrow {
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Rounded media, 24px like Sentient's cards and imagery. */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-cover,
.wp-block-media-text__media img {
	border-radius: 24px;
}

/* Logos and avatars keep their own shape. */
.wp-block-site-logo img,
.wp-block-avatar img {
	border-radius: 0;
}

.wp-block-avatar img {
	border-radius: 50%;
}

/* ---- Front-page hero ------------------------------------------------ */

.wtc-hero {
	padding: clamp(1.25rem, 3.5vh, 2.25rem) 0 clamp(1.5rem, 4vh, 2.5rem);
}

.wtc-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 782px) {
	.wtc-hero__copy {
		margin-top: -3.5rem;
		position: relative;
		z-index: 1;
	}

	/* Lift the atlas without reflowing the grid row. */
	.wtc-hero__atlas {
		transform: translateY(-2.75rem);
	}

	/* Extend the canvas from its column all the way past the viewport's
	   left edge; the ambient drifters fill it, drifting behind the copy.
	   left + width pin the right edge to the column's right edge. */
	.wtc-hero .wtc-hero__atlas canvas {
		left: calc(100% - 100vw);
		width: 100vw;
		-webkit-mask-image: linear-gradient(to left, #000 50%, rgba(0, 0, 0, 0.65) 72%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.12) 98%, transparent 100%);
		mask-image: linear-gradient(to left, #000 50%, rgba(0, 0, 0, 0.65) 72%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.12) 98%, transparent 100%);
	}

	/* Stretch the paper vignette with it so the map keeps its soft edges
	   and the far-left drifters get the top/bottom fog too. */
	.wtc-hero .wtc-hero__atlas::after {
		left: calc(100% - 100vw);
	}
}

.wtc-hero h1 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.5rem, 4.8vw, 4.25rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.wtc-hero__lede {
	margin: 0 0 2.5rem;
	max-width: 38ch;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wtc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The stipple atlas: a contained canvas with a soft paper vignette and a
   mono readout naming the country currently on stage. */
.wtc-hero__atlas {
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: 340px;
	/* aspect-ratio + min-height fight each other: once min-height clamps
	   the height, the browser re-derives the width from the ratio — 320 /
	   0.95 = 337px on mobile — and the atlas grows past its own column,
	   dragging the hero off a 320/360px viewport. max-inline-size pins the
	   width to the column and lets the ratio give way instead. */
	max-inline-size: 100%;
}

.wtc-hero__atlas canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.wtc-hero__atlas::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow:
		inset 0 0 48px 28px var(--wp--preset--color--base),
		inset 0 0 14px 10px var(--wp--preset--color--base);
}

/* Bottom bar of the atlas stage — readout left, controls right, with
   dot-atlas's exact mono HUD styling. */
.wtc-hero__atlasbar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--geist-mono);
}

/* nowrap keeps the telemetry on one line, so the readout's min-content is
   the whole string — "[ 02 / UNITED STATES ] WASHINGTON, D.C. — 38.91° N /
   77.04° W" is ~545px, wider than the atlas column below about 1230px.
   As a flex item it would refuse to shrink and push the page sideways,
   and only while the USA slide happened to be on stage, so it read as an
   intermittent side-scroll. Let it shrink; the cap gives way first. */
.wtc-hero__readout {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin: 0;
	min-width: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wtc-hero__readout-label {
	color: #46586a;
	font-size: 13px;
	letter-spacing: 0.12em;
}

.wtc-hero__readout-cap {
	color: #5e7285;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}


@media (max-width: 781px) {
	/* minmax(0, …), not a bare 1fr: a bare 1fr floors the track at the
	   items' min-content, which the atlas below puts at 337px — wider
	   than a 320 or 360px phone. Both halves are needed; either alone
	   still overflows. */
	.wtc-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.wtc-hero__atlas {
		aspect-ratio: 1 / 0.95;
		min-height: 320px;
	}

	.wtc-hero__readout-cap {
		display: none;
	}
}

/* ---- Client logo strip ---------------------------------------------- */

/* A slow seamless marquee of monochrome client marks on the paper ground,
   with the same soft edge fades as the hero field. Pauses on hover;
   falls back to a static centered wrap under prefers-reduced-motion. */
/* The edge fade is driven by a registered custom property so the reveal
   can open it: --wtc-fog is the inset at which the strip reaches full
   opacity, 12% at rest and near the centre while the section is armed. */
@property --wtc-fog {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 12%;
}

.wtc-clients {
	--wtc-fog: 12%;
	overflow: hidden;
	padding: clamp(1.75rem, 4vh, 2.75rem) 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--wtc-fog), #000 calc(100% - var(--wtc-fog)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--wtc-fog), #000 calc(100% - var(--wtc-fog)), transparent);
}

.wtc-clients__track {
	display: flex;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	width: max-content;
}

.wtc-clients__row {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: none;
	animation: wtc-clients-marquee 50s linear infinite;
}

.wtc-clients:hover .wtc-clients__row {
	animation-play-state: paused;
}

.wtc-clients__row li {
	flex: none;
	display: flex;
	align-items: center;
}

.wtc-clients__row img {
	height: 48px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	opacity: 0.8;
	border-radius: 0;
}

@keyframes wtc-clients-marquee {
	to {
		transform: translateX(calc(-100% - clamp(2.5rem, 5vw, 4.5rem)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtc-clients {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.wtc-clients__track {
		width: auto;
	}

	.wtc-clients__row {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.5rem;
		flex: 1;
	}

	.wtc-clients__row[aria-hidden="true"] {
		display: none;
	}
}

/* ---- "360° China support" section ----------------------------------- */

/* Two columns like the hero, mirrored: the radar dial left, copy right.
   Copy comes first in the DOM so small screens read heading → copy →
   dial. */
.wtc-c360 {
	padding: clamp(2.25rem, 5.5vh, 3.5rem) 0 clamp(1.75rem, 4.5vh, 2.75rem);
}

.wtc-c360__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.wtc-c360 h2 {
	margin: 0 0 1.5rem;
}

.wtc-c360__lede {
	margin: 0 0 1.25rem;
	max-width: 44ch;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wtc-c360__lede strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wtc-c360__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

@media (min-width: 782px) {
	.wtc-c360__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wtc-c360__radar {
		grid-column: 1;
		grid-row: 1;
	}

	.wtc-c360__copy {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ---- China 360 radar dial (lifted from china-360/china-360.html) ----
   Pure CSS: everything derives from --count/--period/--pulse; the only
   count-dependent literal is the 11.111% slot in c360-readout. */
.c360 {
	--count: 9;
	--period: 10s;
	--pulse: 3.6s;
	--radius: 35%;
	--beam: 42deg;
	--c360-rule: #e5e1d6;
	--c360-slate-deep: #46586a;
	--c360-slate-mid: #5e7285;

	max-inline-size: 30.5rem;
	margin-inline: auto;
	inline-size: 100%;
}

/* Light, not fill — a faint warm lift at the centre and a soft shadow
   hugging the dial, so it rests a hair above the paper. */
.c360__stage {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	/* Each .c360__node is a stage-sized square rotated into its slot, so its
	   *bounding box* is up to 1.41x the stage even though the only visible
	   thing inside it — the mark — never leaves the dial's circle. On a phone
	   the stage is nearly viewport-wide, and those empty rotated boxes were
	   what pushed the document ~37px past the viewport and let the whole page
	   side-scroll. Clip them; nothing drawn reaches this edge. */
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 46%),
		radial-gradient(circle at 50% 50%, transparent 50%, color-mix(in srgb, var(--wp--preset--color--accent-4) 5%, transparent) 56%, transparent 72%);
}

.c360__ring {
	position: absolute;
	inset: 15%;
	border: 1px solid var(--c360-rule);
	border-radius: 50%;
}

.c360__range {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: 46.6%;
	aspect-ratio: 1 / 1;
	translate: -50% -50%;
	border: 1px solid var(--c360-rule);
	border-radius: 50%;
	opacity: 0.45;
	pointer-events: none;
}

/* The beam: a slate conic wedge ahead of the arm, masked to an annulus
   so the wash never crosses the hub readout. */
.c360__beam {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(94, 114, 133, 0.16),
		rgba(94, 114, 133, 0) var(--beam),
		rgba(94, 114, 133, 0) 360deg
	);
	-webkit-mask: radial-gradient(circle, transparent 26%, #000 27%);
	mask: radial-gradient(circle, transparent 26%, #000 27%);
	animation: c360-turn var(--period) linear infinite;
}

/* The arm: solid through the field, fading out before the hub. */
.c360__arm {
	position: absolute;
	inset-inline-start: 50%;
	inset-block: 8% 50%;
	inline-size: 1px;
	background: linear-gradient(to bottom, var(--c360-slate-deep) 0%, var(--c360-slate-deep) 45%, transparent 76%);
	opacity: 0.55;
	transform-origin: bottom center;
	animation: c360-turn var(--period) linear infinite;
}

/* The wake the beam leaves on the dial: the full slate ring, revealed
   only along a trailing arc by a rotating conic mask. */
.c360__wake {
	position: absolute;
	inset: 15%;
	border: 1.5px solid var(--c360-slate-mid);
	border-radius: 50%;
	opacity: 0.5;
	-webkit-mask: conic-gradient(from 0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 250deg, #000 360deg);
	mask: conic-gradient(from 0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 250deg, #000 360deg);
	animation: c360-turn var(--period) linear infinite;
	pointer-events: none;
}

@keyframes c360-turn {
	to { transform: rotate(360deg); }
}

/* The centre pulse: two rings half a period apart, gone before they
   reach the marks. */
.c360__pulse {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: 72%;
	aspect-ratio: 1 / 1;
	translate: -50% -50%;
	pointer-events: none;
}

.c360__pulse::before,
.c360__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--c360-slate-mid);
	opacity: 0;
	scale: 0;
	animation: c360-pulse var(--pulse) ease-out infinite;
}

.c360__pulse::after {
	animation-delay: calc(var(--pulse) / -2);
}

@keyframes c360-pulse {
	0% { scale: 0; opacity: 0; }
	18% { opacity: 0.18; }
	100% { scale: 1; opacity: 0; }
}

/* The nodes: each fills the stage and rotates into its slot; the mark
   inside rotates back, so the icon hangs upright on the dial. Phase 0 of
   every node animation is the instant the arm is on it. */
.c360__nodes {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c360__node {
	--i: 0;
	--t: calc(var(--i) / var(--count));
	--angle: calc(var(--i) * (360deg / var(--count)));
	--d: calc((var(--t) - 1) * var(--period));
	position: absolute;
	inset: 0;
	margin: 0;
	transform: rotate(var(--angle));
}

.c360__node:nth-child(1) { --i: 0; }
.c360__node:nth-child(2) { --i: 1; }
.c360__node:nth-child(3) { --i: 2; }
.c360__node:nth-child(4) { --i: 3; }
.c360__node:nth-child(5) { --i: 4; }
.c360__node:nth-child(6) { --i: 5; }
.c360__node:nth-child(7) { --i: 6; }
.c360__node:nth-child(8) { --i: 7; }
.c360__node:nth-child(9) { --i: 8; }

.c360__mark {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: calc(50% - var(--radius));
	inline-size: 12.5%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
}

/* The marks are the platforms' own app icons, redrawn as slate duotone
   so real brand artwork sits on the dial without fighting the palette. */
.c360__logo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0;
	opacity: 0.42;
	animation: c360-logo var(--period) linear infinite;
	animation-delay: var(--d);
}

/* 88.333% is 100% − 42/360, the beam's own width: the mark starts rising
   as the faint leading edge of the wash touches it, and is at full
   strength as the arm crosses. */
@keyframes c360-logo {
	0% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: scale(1.08);
		filter: drop-shadow(0 0 0.5rem rgba(94, 114, 133, 0.45));
	}
	34% {
		opacity: 0.42;
		transform: scale(1);
		filter: drop-shadow(0 0 0 rgba(94, 114, 133, 0));
	}
	88.333% {
		animation-timing-function: ease-in;
		opacity: 0.42;
		transform: scale(1);
		filter: drop-shadow(0 0 0 rgba(94, 114, 133, 0));
	}
	100% {
		opacity: 1;
		transform: scale(1.08);
		filter: drop-shadow(0 0 0.5rem rgba(94, 114, 133, 0.45));
	}
}

/* The hub: the hero's mono readout, moved to the centre of the dial.
   Decorative — the real platform list is the <ul>. */
.c360__hub {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	translate: -50% -50%;
	inline-size: 44%;
	block-size: 3.25rem;
	font-family: var(--wp--preset--font-family--geist-mono);
}

.c360__readout {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	opacity: 0;
	animation: c360-readout var(--period) linear infinite;
	animation-delay: var(--d);
}

.c360__readout:nth-child(1) { --i: 0; }
.c360__readout:nth-child(2) { --i: 1; }
.c360__readout:nth-child(3) { --i: 2; }
.c360__readout:nth-child(4) { --i: 3; }
.c360__readout:nth-child(5) { --i: 4; }
.c360__readout:nth-child(6) { --i: 5; }
.c360__readout:nth-child(7) { --i: 6; }
.c360__readout:nth-child(8) { --i: 7; }
.c360__readout:nth-child(9) { --i: 8; }

.c360__readout {
	--t: calc(var(--i) / var(--count));
	--d: calc((var(--t) - 1) * var(--period));
}

.c360__readout-label {
	color: var(--c360-slate-deep);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.c360__readout-cap {
	color: var(--c360-slate-mid);
	font-size: 0.71875rem;
	letter-spacing: 0.06em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* One slot is 100%/9 = 11.111%. An entry rises just as the arm reaches
   its mark and is gone by the end of the slot. */
@keyframes c360-readout {
	0% { opacity: 0; }
	1.5% { opacity: 1; }
	9.6% { opacity: 1; }
	11.111% { opacity: 0; }
	100% { opacity: 0; }
}

.c360__readout--static {
	display: none;
}

@media (max-width: 781px) {
	.c360 {
		max-inline-size: min(29.5rem, 92vw);
	}
}

/* Reduced motion is not a degraded state: the sweep goes, and the whole
   circle comes up at once — which is the entire message. */
@media (prefers-reduced-motion: reduce) {
	.c360__beam,
	.c360__arm,
	.c360__wake,
	.c360__pulse {
		display: none;
	}

	.c360__logo,
	.c360__readout {
		animation: none;
	}

	.c360__logo { opacity: 1; }

	.c360__readout { display: none; }

	.c360__readout--static {
		display: flex;
		opacity: 1;
	}
}

/* ---- "Our services" section: the route ------------------------------ */

/* The page's third instrument: the services plotted as a navigation
   route. The hero's lede names the journey — understand, plan, operate —
   and the three families are its legs: the course is the hero's dot
   field pulled into a line of travel, a scatter of atlas dots along an
   invisible sinusoid through three waypoint stations (its zero
   crossings), with sub-services as stops on a spur line. The field
   fades in before the first column and dies away after the last, like
   the hero canvas's soft edges. wtc-course.js sets the dots drifting
   west to east in the hero's motion language. */
.wtc-services {
	padding: clamp(2.5rem, 6vh, 3.75rem) 0;
	/* The routewrap course layer runs a third of the strip past each
	   edge for the full-bleed drift; clip it at this full-width section
	   so it can't extend the page's horizontal scroll area. */
	overflow-x: hidden;
	overflow-x: clip;
}

.wtc-services__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
}

/* Heading row: title left, mono route readout right — the hero's
   atlas-bar language. */
.wtc-services__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-bottom: 2.75rem;
}

.wtc-services__head h2 {
	margin: 0;
}

.wtc-services__readout {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wtc-services__readout-label {
	color: #46586a;
	font-size: 13px;
	letter-spacing: 0.12em;
}

.wtc-services__readout-cap {
	color: #5e7285;
	font-size: 12.5px;
	letter-spacing: 0.06em;
}

.wtc-services__strip {
	position: relative;
	margin-bottom: 0.5rem;
}

.wtc-services__strip svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The flowing field: a layer spanning the full course (-392..1608 in
   strip units — a third of the strip width past each edge), under the
   stations. It holds the baked SVG field and the canvas wtc-course.js
   draws on; the script stamps `is-flowing` on the strip to swap one
   for the other. Without it (no JS, reduced motion, old browser) the
   baked field is the design. */
.wtc-services__strip > svg {
	position: relative;
	z-index: 1;
}

.wtc-services__routewrap {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -33.333%;
	width: 166.667%;
	pointer-events: none;
}

.wtc-services__routewrap svg {
	height: 100%;
}

.wtc-services__course {
	display: none;
	width: 100%;
	height: 100%;
}

.wtc-services__strip.is-flowing .wtc-services__field {
	display: none;
}

.wtc-services__strip.is-flowing .wtc-services__course {
	display: block;
}

.wtc-services__station-ring {
	fill: none;
	stroke: #5e7285;
	stroke-opacity: 0.7;
	stroke-width: 1;
}

.wtc-services__station-dot {
	fill: #46586a;
}

/* The columns have no gap of their own — station x positions in the SVG
   assume column left edges at exact thirds; breathing room comes from
   each column's right padding instead. */
.wtc-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wtc-services__col {
	padding-right: clamp(1.5rem, 3vw, 3rem);
}

.wtc-services__tag {
	display: block;
	margin-bottom: 0.85rem;
	color: #46586a;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
}

.wtc-services__col h3 {
	margin: 0 0 1.25rem;
}

.wtc-services__col ul {
	position: relative;
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
}

/* The spur line: sub-services are stops on a thin branch of the route. */
.wtc-services__col ul::before {
	content: "";
	position: absolute;
	left: 2.5px;
	top: 0;
	bottom: 0.4rem;
	width: 1px;
	background: #e5e1d6;
}

.wtc-services__col li {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.wtc-services__col li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5e7285;
	transform: translateY(-2px);
}

/* The section's scroll reveal — the course wiping in west to east,
   stations landing in sequence — lives with every other section's
   choreography in the Scroll reveal block at the end of this file. */

@media (max-width: 781px) {
	.wtc-services__strip {
		display: none;
	}

	.wtc-services__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.wtc-services__col {
		padding-right: 0;
	}
}

/* ---- Case studies (home.md §5–§7) -----------------------------------
   Shared "Under the Lens" split: the campaign visual is the
   instrument — mono annotation chips pin what we read in the frame
   (positioned inline per chip), and the hero's atlasbar language sits
   on the visual's bottom scrim. Metrics are a quiet 2×2 under
   hairlines. Static by design: a scan-line sweep was tried on the LV
   frame and removed as too gimmicky. Pure CSS (the De'Longhi video
   loop gets a small courtesy script, wtc-case.js). Per-case modifiers
   on the section (--lv, --marimekko, --delonghi) pick the frame ratio
   and brand mark; --flip mirrors the split so consecutive studies
   alternate. */

.wtc-case {
	padding: clamp(2.5rem, 6vh, 3.75rem) 0;
}

.wtc-case__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	align-items: center;
}

.wtc-case__eyerow {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.4rem;
}

.wtc-case__eyebrow {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: #46586a;
}

/* Each half holds together; a narrow screen breaks between them. */
.wtc-case__eyebrow span {
	white-space: nowrap;
}

.wtc-case__eyebrow span + span {
	margin-left: 0.9ch;
}

/* The brand mark recolored to ink through a mask, so it sits on the
   paper like type rather than a pasted black logo. */
.wtc-case__mark {
	flex: none;
	background: var(--wp--preset--color--contrast);
	opacity: 0.9;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

.wtc-case__mark--lv {
	width: clamp(50px, 5vw, 64px);
	aspect-ratio: 1;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-louis-vuitton.png);
	mask-image: url(assets/images/case-studies/case-study-logo-louis-vuitton.png);
}

/* The Marimekko mark is a wordmark: wide box, nudged down so its
   hairline height sits on the eyebrow's optical line. */
.wtc-case__mark--marimekko {
	width: clamp(118px, 11vw, 150px);
	aspect-ratio: 970 / 120;
	margin-top: 0.3rem;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-marimekko.png);
	mask-image: url(assets/images/case-studies/case-study-logo-marimekko.png);
}

/* The De'Longhi badge is a compact 3:1 lockup, heavier than the
   Marimekko hairline — sized between it and the LV square. */
.wtc-case__mark--delonghi {
	width: clamp(96px, 9vw, 118px);
	aspect-ratio: 294 / 97;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-delonghi.png);
	mask-image: url(assets/images/case-studies/case-study-logo-delonghi.png);
}

.wtc-case__mark--tory-burch {
	width: clamp(118px, 11vw, 150px);
	aspect-ratio: 163 / 16;
	margin-top: 0.4rem;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-tory-burch.svg);
	mask-image: url(assets/images/case-studies/case-study-logo-tory-burch.svg);
}

.wtc-case__mark--chaumet {
	width: 103px;
	aspect-ratio: 103 / 54;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-chaumet.png);
	mask-image: url(assets/images/case-studies/case-study-logo-chaumet.png);
}

/* Missoma's 2026 wordmark, a heavy serif: sized like the De'Longhi
   lockup rather than the hairline wordmarks. */
.wtc-case__mark--missoma {
	width: clamp(112px, 10vw, 136px);
	aspect-ratio: 1363 / 228;
	margin-top: 0.2rem;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-missoma.svg);
	mask-image: url(assets/images/case-studies/case-study-logo-missoma.svg);
}

/* AGATHA's lockup stacks the wordmark over PARIS: a compact box like
   the Chaumet mark. PDPAOLA is a single-line wordmark. */
.wtc-case__mark--agatha {
	width: 104px;
	aspect-ratio: 174 / 52;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-agatha.svg);
	mask-image: url(assets/images/case-studies/case-study-logo-agatha.svg);
}

.wtc-case__mark--pdpaola {
	width: clamp(112px, 10vw, 136px);
	aspect-ratio: 83 / 17;
	margin-top: 0.2rem;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-pdpaola.svg);
	mask-image: url(assets/images/case-studies/case-study-logo-pdpaola.svg);
}

/* Eight cases that live only on the Case studies ledger (theme 1.9.1).
   Mackage, Le Creuset and HEYTEA use the brands' own header logos; the
   other marks are the clients marquee logos, trimmed to the artwork. */
.wtc-case__mark--mackage {
	width: 118px;
	aspect-ratio: 600 / 136;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-mackage.png);
	mask-image: url(assets/images/case-studies/case-study-logo-mackage.png);
}

.wtc-case__mark--le-creuset {
	width: 140px;
	aspect-ratio: 167 / 24;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-le-creuset.svg);
	mask-image: url(assets/images/case-studies/case-study-logo-le-creuset.svg);
}

.wtc-case__mark--heytea {
	width: 50px;
	aspect-ratio: 251 / 223;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-heytea.png);
	mask-image: url(assets/images/case-studies/case-study-logo-heytea.png);
}

.wtc-case__mark--rouje {
	width: 104px;
	aspect-ratio: 600 / 246;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-rouje.png);
	mask-image: url(assets/images/case-studies/case-study-logo-rouje.png);
}

.wtc-case__mark--polene {
	width: 130px;
	aspect-ratio: 600 / 120;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-polene.png);
	mask-image: url(assets/images/case-studies/case-study-logo-polene.png);
}

.wtc-case__mark--armani-beauty {
	width: 104px;
	aspect-ratio: 600 / 257;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-armani-beauty.png);
	mask-image: url(assets/images/case-studies/case-study-logo-armani-beauty.png);
}

.wtc-case__mark--maison-kitsune {
	width: 136px;
	aspect-ratio: 600 / 122;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-maison-kitsune.png);
	mask-image: url(assets/images/case-studies/case-study-logo-maison-kitsune.png);
}

.wtc-case__mark--google {
	width: 104px;
	aspect-ratio: 600 / 181;
	-webkit-mask-image: url(assets/images/case-studies/case-study-logo-google.png);
	mask-image: url(assets/images/case-studies/case-study-logo-google.png);
}

.wtc-case h2 {
	margin: 0 0 1.25rem;
}

.wtc-case__lede {
	margin: 0 0 2.5rem;
	max-width: 46ch;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wtc-case__lede strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* When a list follows, the lede is its introduction — hold them close. */
.wtc-case__lede--intro {
	margin-bottom: 1.15rem;
}

/* Bulleted copy in the services list language: spur dots, quiet ink. */
.wtc-case__list {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	max-width: 48ch;
}

/* Not flex like the services list: these items hold inline <strong>
   runs, which flex would split into separate items. */
.wtc-case__list li {
	position: relative;
	padding-left: calc(6px + 0.85rem);
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.wtc-case__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.75em - 3px);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5e7285;
}

.wtc-case__list strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wtc-case__metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem 2rem;
	max-width: 30rem;
}

.wtc-case__metric {
	border-top: 1px solid #e5e1d6;
	padding-top: 0.85rem;
}

.wtc-case__metric small {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #46586a;
}

.wtc-case__metric span {
	font-size: clamp(1.7rem, 2.4vw, 2.15rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.wtc-case__frame {
	position: relative;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	transform: translateZ(0); /* keep the radius clipping the pinned chips on Safari */
}

.wtc-case--lv .wtc-case__frame {
	aspect-ratio: 1181 / 1125;
}

/* The Marimekko campaign still is 16:9; the frame keeps the sibling's
   near-square proportions and crops to the cast circle. */
.wtc-case--marimekko .wtc-case__frame {
	aspect-ratio: 1 / 1.02;
}

.wtc-case__frame img,
.wtc-case__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wtc-case--marimekko .wtc-case__frame img {
	object-position: 44% 50%;
}

/* The De'Longhi visual is the campaign reel itself: a muted 16:9 loop
   cropped into the family's near-square frame, like the Marimekko
   still. */
.wtc-case--delonghi .wtc-case__frame {
	aspect-ratio: 1 / 1.02;
}

/* Official Shanghai editorial portrait, in the home page's near-square frame. */
.wtc-case--tory-burch .wtc-case__frame {
	aspect-ratio: 1 / 1.02;
}

.wtc-case--chaumet .wtc-case__frame {
	aspect-ratio: 1 / 1.02;
}

.wtc-case--chaumet .wtc-case__list {
	margin-bottom: 0;
}

.wtc-case--tory-burch .wtc-case__frame img {
	object-position: center 45%;
}

/* China Social Operations cases. The Marimekko creator still is a 3:4
   portrait: the near-square frame keeps both figures and the table. */
.wtc-case--marimekko-social .wtc-case__frame,
.wtc-case--missoma .wtc-case__frame,
.wtc-case--agatha .wtc-case__frame,
.wtc-case--pdpaola .wtc-case__frame {
	aspect-ratio: 1 / 1.02;
}

.wtc-case--marimekko-social .wtc-case__frame img {
	object-position: center 62%;
}

.wtc-case--tory-burch .wtc-case__tag {
	left: 6%;
	top: 8%;
}

.wtc-case--tory-burch .wtc-case__tag + .wtc-case__tag {
	top: 76%;
}

/* Annotation chips: pinned dot + mono pill. */
.wtc-case__tag {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wtc-case__tag::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 2px rgba(70, 88, 106, 0.65);
}

.wtc-case__tag span {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: #46586a;
	background: rgba(249, 248, 246, 0.85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(70, 88, 106, 0.22);
	border-radius: 999px;
	padding: 5px 11px;
}

/* The atlasbar, moved onto the image's bottom edge. */
.wtc-case__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 3.5rem 1.4rem 1.1rem;
	background: linear-gradient(to top, rgba(4, 4, 27, 0.68), transparent);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-variant-numeric: tabular-nums;
}

.wtc-case__bar-label {
	font-size: 12.5px;
	letter-spacing: 0.12em;
	color: #e3e6ec;
	white-space: nowrap;
}

.wtc-case__bar-cap {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #c2c9d6;
	white-space: nowrap;
}

@media (min-width: 782px) {
	.wtc-case__inner {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	/* Mirrored split: visual left, copy right. The DOM keeps copy
	   first so mobile reads copy → photo like its sibling. */
	.wtc-case--flip .wtc-case__inner {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	}

	.wtc-case--flip .wtc-case__copy {
		order: 2;
	}

	.wtc-case--flip .wtc-case__frame {
		order: 1;
	}
}

@media (max-width: 781px) {
	.wtc-case__metrics {
		margin-bottom: 0.5rem;
	}

	.wtc-case--tory-burch .wtc-case__tag {
		top: 6%;
	}

	.wtc-case--tory-burch .wtc-case__tag + .wtc-case__tag {
		top: 76%;
	}

	.wtc-case__bar-cap {
		display: none;
	}
}

/* ---- "Contact us" section (home.md §9) ------------------------------
   The closing instrument is the form itself: the case studies' split
   grid with the frame swapped for the contact sheet. Field labels
   speak the metric language (mono, uppercase, slate), the fields keep
   the theme's pill outlines, and the submit is the solid Sentient
   pill — its sliding hover dot rebuilt as a background gradient,
   because an <input> can't carry the ::before the other pills use.
   The form markup itself lives in Contact Form 7 (form 12,
   "WalktheChat - Contact Form"), embedded by hash shortcode. */

.wtc-contact {
	padding: clamp(2.5rem, 6vh, 3.75rem) 0 clamp(3rem, 7.5vh, 4.5rem);
}

.wtc-contact__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	align-items: start;
}

.wtc-contact__eyebrow {
	margin: 0 0 1.4rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: #46586a;
}

.wtc-contact h2 {
	margin: 0 0 1.25rem;
}

.wtc-contact__lede {
	margin: 0 0 2.5rem;
	max-width: 40ch;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* The offices, in the metrics' hairline language. */
.wtc-contact__meta {
	display: grid;
	gap: 1.6rem;
	max-width: 30rem;
}

.wtc-contact__metaitem {
	border-top: 1px solid #e5e1d6;
	padding-top: 0.85rem;
}

.wtc-contact__metaitem small {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #46586a;
}

.wtc-contact__metaitem span {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.wtc-contact__form .wpcf7 form {
	margin: 0;
}

.wtc-cf7 .wtc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1.4rem;
}

.wtc-cf7 .wtc-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wtc-cf7 .wtc-message {
	margin-top: 1.5rem;
}

.wtc-cf7 .wtc-label {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #46586a;
}

.wtc-cf7 .wtc-hint {
	color: #5e7285;
}

.wtc-cf7 .wpcf7-form-control-wrap {
	display: block;
}

/* border-box: nothing upstream sets it, and width:100% + the pill's
   1.2rem inline padding overflows the grid tracks without it.
   The newsletter's email field shares the whole field treatment. */
.wtc-cf7 input:not([type="submit"]),
.wtc-newsletter .wtc-nl-input,
.wtc-cf7 textarea {
	box-sizing: border-box;
	width: 100%;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Focus glows slate, like the instruments' working color. */
.wtc-cf7 input:not([type="submit"]):focus,
.wtc-newsletter .wtc-nl-input:focus,
.wtc-cf7 textarea:focus {
	outline: none;
	border-color: #5e7285;
	box-shadow: 0 0 0 3px rgba(94, 114, 133, 0.14);
}

.wtc-cf7 textarea {
	min-height: 7rem;
	height: 9rem;
	resize: vertical;
}

.wtc-cf7 .wtc-submit {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.wtc-cf7 .wpcf7-submit,
.wtc-newsletter .wtc-nl-submit {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	margin: 0;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.2;
	background-image: radial-gradient(circle, var(--wp--preset--color--base) 45%, transparent 55%);
	background-size: 0.625rem 0.625rem;
	background-repeat: no-repeat;
	background-position: -0.75rem 50%;
	transition:
		background-position 300ms cubic-bezier(0.42, 0, 0.58, 1),
		padding 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.wtc-cf7 .wpcf7-submit:hover,
.wtc-cf7 .wpcf7-submit:focus-visible,
.wtc-newsletter .wtc-nl-submit:hover,
.wtc-newsletter .wtc-nl-submit:focus-visible {
	background-position: 1.1rem 50%;
	padding-left: calc(1.1rem + 0.625rem + 0.5rem);
}

.wtc-cf7 .wpcf7-submit:disabled,
.wtc-newsletter .wtc-nl-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.wtc-contact .wpcf7-spinner {
	background-color: #5e7285;
}

/* CF7 feedback, restyled from its defaults (2px WP-admin blues and
   reds) into the paper language: hairline card, gold when sent, muted
   brick for anything wrong. Selectors carry the extra .wtc-contact
   ancestor to outrank CF7's own per-state rules. */
.wtc-contact .wpcf7 form .wpcf7-response-output {
	margin: 1.6rem 0 0;
	padding: 0.7rem 1.2rem;
	border: 1px solid #cfd5da;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.wtc-contact .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent-1);
}

.wtc-contact .wpcf7 form.invalid .wpcf7-response-output,
.wtc-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.wtc-contact .wpcf7 form.payment-required .wpcf7-response-output,
.wtc-contact .wpcf7 form.failed .wpcf7-response-output,
.wtc-contact .wpcf7 form.aborted .wpcf7-response-output,
.wtc-contact .wpcf7 form.spam .wpcf7-response-output {
	border-color: #a8503c;
}

.wtc-contact .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: #a8503c;
}

/* Doubled control class: CF7's own .wpcf7-form-control.wpcf7-not-valid
   rule ties a single-class selector and its sheet loads after ours. */
.wtc-cf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: #a8503c;
}

/* Links in the meta rows (the contact page's email and careers). */
.wtc-contact__metaitem a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #cfd5da;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color 0.25s ease;
}

.wtc-contact__metaitem a:hover,
.wtc-contact__metaitem a:focus-visible {
	text-decoration-color: currentColor;
}

/* The contact page (/contact/): the same sheet opens the page, so it
   takes the page hero's top padding and its own <h1>. */
.wtc-contact--page {
	padding-top: clamp(2rem, 6vh, 4rem);
}

.wtc-contact--page h1 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.5rem, 4.8vw, 4.25rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

@media (min-width: 782px) {
	.wtc-contact__inner {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

@media (max-width: 599px) {
	.wtc-cf7 .wtc-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Newsletter ledger line (home.md §10) ---------------------------
   The page's closing line, between the contact sheet and the footer
   (ledger-line proposal, newsletter-band/newsletter-proposals.html):
   paper continues, and the section opens with a single full-bleed
   hairline that the mono eyebrow interrupts — the OFFICES / metric
   rule language at page scale. Same split grid as contact, form
   column vertically centered. The eyebrow stays inside the copy
   column in the DB markup; positioned absolute with no left, its
   static x is the container's left inset, so it lands in the rule
   without a markup change. The form markup lives in the Brevo plugin
   (form 2, "WalktheChat - professional email", fields authored with
   these wtc-nl-* classes), embedded by [sibwp_form id=2]; the field
   and submit treatments are shared with the CF7 rules above.
   Selectors that carry #sib_signup_form_2 or sib_signup_box_inside_
   are DB-coupled to that form id — they exist to outrank the
   plugin's inline per-form <style>, whose message rules also lead
   with the form id. */

.wtc-newsletter {
	position: relative;
	border-top: 1px solid #e5e1d6;
	padding: clamp(2.75rem, 7vh, 4.25rem) 0 clamp(3rem, 8vh, 4.75rem);
}

.wtc-newsletter__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	align-items: center;
}

/* In the rule: paper-backed, straddling the section's top hairline
   the way a legend breaks a map border. */
.wtc-newsletter__eyebrow {
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	margin: 0 0 0 -0.75rem;
	padding-inline: 0.75rem;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: #46586a;
}

.wtc-newsletter h2 {
	margin: 0;
}

.wtc-newsletter__form form {
	margin: 0;
}

/* Label above, then field + pill on one line; the plugin's message div
   is first in the DOM, so explicit order sends it below the row. Its
   empty pre-submit state still occupies a zero-height grid row — the
   stray row-gap under the field row is accepted as breathing room. */
.wtc-newsletter div[class^="sib_signup_box_inside_"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.6rem 0.75rem;
	align-items: center;
}

.wtc-newsletter .wtc-nl-label {
	grid-column: 1 / -1;
	order: 1;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #46586a;
}

.wtc-newsletter .wtc-nl-input {
	order: 2;
	min-width: 0;
}

.wtc-newsletter .wtc-nl-input::placeholder {
	color: #8b99a8;
}

.wtc-newsletter .wtc-nl-submit {
	order: 3;
}

.wtc-newsletter .sib_msg_disp {
	grid-column: 1 / -1;
	order: 4;
}

/* The plugin's spinner gif is off-instrument; the processing state
   dims the pill instead. display:none alone loses to the jQuery
   .show() that sets an inline display on submit. */
.wtc-newsletter .sib_loader {
	display: none !important;
}

.wtc-newsletter form.sib_processing .wtc-nl-submit {
	opacity: 0.6;
}

/* Brevo feedback, out of its bootstrap greens and into the contact
   sheet's hairline card: gold when subscribed, brick when something
   is wrong, slate for the nags. Ink text on all three. */
.wtc-newsletter #sib_signup_form_2 p.sib-alert-message {
	margin: 0.2rem 0 0;
	padding: 0.7rem 1.2rem;
	background-color: transparent;
	border: 1px solid #cfd5da;
	border-radius: 12px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.wtc-newsletter #sib_signup_form_2 p.sib-alert-message-success {
	border-color: var(--wp--preset--color--accent-1);
}

.wtc-newsletter #sib_signup_form_2 p.sib-alert-message-error {
	border-color: #a8503c;
}

.wtc-newsletter #sib_signup_form_2 p.sib-alert-message-warning {
	border-color: #5e7285;
}

@media (min-width: 782px) {
	.wtc-newsletter__inner {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

@media (max-width: 599px) {
	.wtc-newsletter div[class^="sib_signup_box_inside_"] {
		grid-template-columns: 1fr;
	}

	.wtc-newsletter .wtc-nl-submit {
		justify-self: start;
	}
}

/* ---- Footer ledger line ---------------------------------------------
   The page's last rule, closing the sequence the newsletter band opens:
   paper continues, one more full-bleed hairline, and beneath it a
   signature rather than a second navigation surface. The wordmark sits
   on the header wordmark's exact left edge — same wide container, same
   root inline padding — one step quieter at 15px against the header's
   17px. Everything else is the metric language: mono, uppercase, 11px,
   slate, resolving to ink on hover.

   Terms and Privacy are placeholder hrefs; see patterns/footer.php. */

.wtc-footer {
	position: relative;
	border-top: 1px solid #e5e1d6;
	padding: clamp(2.25rem, 5vh, 3.25rem) 0 clamp(2.25rem, 5vh, 3rem);
}

.wtc-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem 2rem;
	align-items: center;
}

.wtc-footer__logo {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	flex-shrink: 0;
}

.wtc-footer__logo img {
	display: block;
	width: auto;
	height: 15px;
}

.wtc-footer__links {
	grid-column: 2;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
}

.wtc-footer__copyright {
	grid-column: 1 / -1;
	margin: 0;
}

/* One label treatment for the legal row and the copyright, so the whole
   footer reads as a single line of instrument type. */
.wtc-footer__label {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wtc-footer__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	color: #46586a;
	text-decoration: none;
	transition: color 0.3s ease;
}

.wtc-footer__link:hover,
.wtc-footer__link:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* The outbound mark rides a touch above the baseline and leans away on
   hover — the only motion in the band. */
.wtc-footer__arrow {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.wtc-footer__link:hover .wtc-footer__arrow,
.wtc-footer__link:focus-visible .wtc-footer__arrow {
	transform: translate(1px, -1px);
}

.wtc-footer__copyright .wtc-footer__label {
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 599px) {
	.wtc-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.wtc-footer__links {
		grid-column: 1;
		justify-self: start;
		gap: 0.6rem 1.5rem;
	}
}

/* ---- Scroll reveal --------------------------------------------------
   Each section performs its own gesture as it arrives, in the vocabulary
   it is already built from: hairlines draw, mono labels resolve out of
   noise, annotation chips pin, the dial spins up. What draws or wipes
   does so west to east — the atlas's own reading direction, since
   wtc-atlas.js sorts its stipple by longitude so morphs sweep in
   coherent bands. Photographs are the exception and only fade: a sweep
   across a campaign still reads as an effect applied to the picture
   rather than as the page arriving.

   Armed only when wtc-reveal.js has stamped `wtc-js` on <html>: no
   JavaScript, no hidden content. Scoped to prefers-reduced-motion:
   no-preference so the reduced-motion page is the finished page rather
   than a degraded one — there the engine simply stamps every section
   live at once. `is-live` lands once, on entry, and is never removed.

   Three easings carry all of it, two of them already in the theme:
     wipes and draws  cubic-bezier(0.4, 0, 0.3, 1)
     pops             cubic-bezier(0.2, 0.9, 0.3, 1.3)
     rises            cubic-bezier(0.22, 1, 0.36, 1)
   Per-element stagger travels in --wtc-d, read by the shared
   transition-delay so one rule serves a whole column. */

/* The dial's rings are drawn by a conic mask sweeping from twelve
   o'clock — the device the wake already uses to trail the beam. */
@property --wtc-draw {
	syntax: "<angle>";
	inherits: false;
	initial-value: 360deg;
}

@media (prefers-reduced-motion: no-preference) {

	/* -- Hero. Above the fold, so this one plays on load. ----------- */

	.wtc-js .wtc-hero h1,
	.wtc-js .wtc-hero__lede,
	.wtc-js .wtc-hero__actions {
		opacity: 0;
		transform: translateY(8px);
	}

	.wtc-js .wtc-hero.is-live h1,
	.wtc-js .wtc-hero.is-live .wtc-hero__lede,
	.wtc-js .wtc-hero.is-live .wtc-hero__actions {
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--wtc-d, 0s);
		opacity: 1;
		transform: none;
	}

	.wtc-js .wtc-hero__lede { --wtc-d: 0.09s; }
	.wtc-js .wtc-hero__actions { --wtc-d: 0.18s; }

	/* Opacity only: the atlas carries a translateY of its own at
	   desktop widths, and its canvas is absolutely positioned inside. */
	.wtc-js .wtc-hero__atlas {
		opacity: 0;
	}

	.wtc-js .wtc-hero.is-live .wtc-hero__atlas {
		transition: opacity 0.9s ease;
		opacity: 1;
	}

	/* -- Clients: the edge fog opens and the marks come out of it. -- */

	.wtc-js .wtc-clients {
		--wtc-fog: 46%;
	}

	.wtc-js .wtc-clients.is-live {
		transition: --wtc-fog 1.2s cubic-bezier(0.4, 0, 0.3, 1);
		--wtc-fog: 12%;
	}

	/* -- 360° dial: the instrument comes online. -------------------- */

	.wtc-js .wtc-c360 .c360__ring,
	.wtc-js .wtc-c360 .c360__range {
		--wtc-draw: 0deg;
		-webkit-mask: conic-gradient(from -90deg, #000 var(--wtc-draw), transparent 0);
		mask: conic-gradient(from -90deg, #000 var(--wtc-draw), transparent 0);
	}

	.wtc-js .wtc-c360.is-live .c360__ring,
	.wtc-js .wtc-c360.is-live .c360__range {
		transition: --wtc-draw 0.9s cubic-bezier(0.4, 0, 0.3, 1);
		--wtc-draw: 360deg;
	}

	.wtc-js .wtc-c360.is-live .c360__range {
		transition-delay: 0.12s;
	}

	/* The sweep starts when you arrive, not wherever page load left it.
	   Each mark and readout carries a negative animation-delay, so a
	   paused animation is already sitting at that node's resting phase
	   and nothing jumps when the dial starts running. */
	.wtc-js .wtc-c360 .c360__beam,
	.wtc-js .wtc-c360 .c360__arm,
	.wtc-js .wtc-c360 .c360__wake,
	.wtc-js .wtc-c360 .c360__pulse::before,
	.wtc-js .wtc-c360 .c360__pulse::after,
	.wtc-js .wtc-c360 .c360__logo,
	.wtc-js .wtc-c360 .c360__readout {
		animation-play-state: paused;
	}

	.wtc-js .wtc-c360.is-live .c360__beam,
	.wtc-js .wtc-c360.is-live .c360__arm,
	.wtc-js .wtc-c360.is-live .c360__wake,
	.wtc-js .wtc-c360.is-live .c360__pulse::before,
	.wtc-js .wtc-c360.is-live .c360__pulse::after,
	.wtc-js .wtc-c360.is-live .c360__logo,
	.wtc-js .wtc-c360.is-live .c360__readout {
		animation-play-state: running;
	}

	.wtc-js .wtc-c360 h2,
	.wtc-js .wtc-c360__lede,
	.wtc-js .wtc-c360__actions {
		opacity: 0;
		transform: translateY(8px);
	}

	.wtc-js .wtc-c360.is-live h2,
	.wtc-js .wtc-c360.is-live .wtc-c360__lede,
	.wtc-js .wtc-c360.is-live .wtc-c360__actions {
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--wtc-d, 0s);
		opacity: 1;
		transform: none;
	}

	.wtc-js .wtc-c360__lede { --wtc-d: 0.09s; }
	.wtc-js .wtc-c360__lede + .wtc-c360__lede { --wtc-d: 0.18s; }
	.wtc-js .wtc-c360__actions { --wtc-d: 0.27s; }

	/* -- Services: the course wipes in, stations land in sequence. -- */

	.wtc-js .wtc-services__routewrap {
		-webkit-mask-image: linear-gradient(to right, #000 42%, transparent 58%);
		mask-image: linear-gradient(to right, #000 42%, transparent 58%);
		-webkit-mask-size: 320% 100%;
		mask-size: 320% 100%;
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}

	.wtc-js .wtc-services.is-live .wtc-services__routewrap {
		transition: -webkit-mask-position 0.85s cubic-bezier(0.4, 0, 0.3, 1);
		transition: mask-position 0.85s cubic-bezier(0.4, 0, 0.3, 1);
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0;
	}

	/* Animate the inner group: a CSS transform on the outer <g> would
	   override its SVG translate attribute and send stations to origin. */
	.wtc-js .wtc-services__station-inner {
		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0);
	}

	/* Each station lands as the wipe reaches it — the delays are ~0.17,
	   0.45 and 0.73 of the wipe's own duration, so the three move with
	   the course rather than on a cadence of their own. */
	.wtc-js .wtc-services.is-live .wtc-services__station-inner {
		animation: wtc-station-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
	}

	.wtc-js .wtc-services.is-live .wtc-services__station--1 .wtc-services__station-inner {
		animation-delay: 0.14s;
	}

	.wtc-js .wtc-services.is-live .wtc-services__station--2 .wtc-services__station-inner {
		animation-delay: 0.38s;
	}

	.wtc-js .wtc-services.is-live .wtc-services__station--3 .wtc-services__station-inner {
		animation-delay: 0.62s;
	}

	.wtc-js .wtc-services__head,
	.wtc-js .wtc-services__col {
		opacity: 0;
		transform: translateY(10px);
	}

	.wtc-js .wtc-services.is-live .wtc-services__head,
	.wtc-js .wtc-services.is-live .wtc-services__col {
		transition: opacity 0.48s ease, transform 0.48s ease;
		transition-delay: var(--wtc-d, 0s);
		opacity: 1;
		transform: none;
	}

	/* Each column follows its own station by a beat. */
	.wtc-js .wtc-services__col:nth-child(1) { --wtc-d: 0.2s; }
	.wtc-js .wtc-services__col:nth-child(2) { --wtc-d: 0.44s; }
	.wtc-js .wtc-services__col:nth-child(3) { --wtc-d: 0.68s; }

	/* -- Case studies: the frame settles, then the chips annotate it. -

	   The photograph is the one element that shouldn't perform, so it
	   only fades. The scale sits on the image rather than the frame —
	   the frame keeps its 24px crop and its position, and the picture
	   settles inside it, which reads as the frame coming to rest rather
	   than as a moving box. */
	.wtc-js .wtc-case__frame {
		opacity: 0;
	}

	.wtc-js .wtc-case__frame img,
	.wtc-js .wtc-case__frame video {
		transform: scale(1.03);
	}

	.wtc-js .wtc-case.is-live .wtc-case__frame {
		transition: opacity 1s ease;
		opacity: 1;
	}

	.wtc-js .wtc-case.is-live .wtc-case__frame img,
	.wtc-js .wtc-case.is-live .wtc-case__frame video {
		transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
		transform: none;
	}

	/* The pin lands with the stations' pop, the pill unrolls behind it,
	   once the frame under them has largely arrived. */
	.wtc-js .wtc-case__tag::before {
		transform: scale(0);
	}

	.wtc-js .wtc-case__tag span {
		opacity: 0;
		transform: translateX(-4px);
	}

	.wtc-js .wtc-case.is-live .wtc-case__tag::before {
		animation: wtc-pin 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
		animation-delay: var(--wtc-d, 0s);
	}

	.wtc-js .wtc-case.is-live .wtc-case__tag span {
		transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--wtc-d, 0s) + 0.12s);
		opacity: 1;
		transform: none;
	}

	.wtc-js .wtc-case__tag:nth-of-type(1) { --wtc-d: 0.45s; }
	.wtc-js .wtc-case__tag:nth-of-type(2) { --wtc-d: 0.59s; }
	.wtc-js .wtc-case__tag:nth-of-type(3) { --wtc-d: 0.73s; }

	.wtc-js .wtc-case__eyerow,
	.wtc-js .wtc-case h2,
	.wtc-js .wtc-case__lede,
	.wtc-js .wtc-case__list li,
	.wtc-js .wtc-case__metric {
		opacity: 0;
		transform: translateY(8px);
	}

	.wtc-js .wtc-case.is-live .wtc-case__eyerow,
	.wtc-js .wtc-case.is-live h2,
	.wtc-js .wtc-case.is-live .wtc-case__lede,
	.wtc-js .wtc-case.is-live .wtc-case__list li,
	.wtc-js .wtc-case.is-live .wtc-case__metric {
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--wtc-d, 0s);
		opacity: 1;
		transform: none;
	}

	.wtc-js .wtc-case h2 { --wtc-d: 0.07s; }
	.wtc-js .wtc-case__lede { --wtc-d: 0.14s; }
	.wtc-js .wtc-case__list li:nth-child(1) { --wtc-d: 0.21s; }
	.wtc-js .wtc-case__list li:nth-child(2) { --wtc-d: 0.28s; }
	.wtc-js .wtc-case__list li:nth-child(3) { --wtc-d: 0.35s; }
	.wtc-js .wtc-case__list li:nth-child(4) { --wtc-d: 0.42s; }
	.wtc-js .wtc-case__metric:nth-child(1) { --wtc-d: 0.55s; }
	.wtc-js .wtc-case__metric:nth-child(2) { --wtc-d: 0.64s; }
	.wtc-js .wtc-case__metric:nth-child(3) { --wtc-d: 0.73s; }
	.wtc-js .wtc-case__metric:nth-child(4) { --wtc-d: 0.82s; }

	/* -- Contact: the sheet fills in field by field. ---------------- */

	.wtc-js .wtc-contact__eyebrow,
	.wtc-js .wtc-contact h1,
	.wtc-js .wtc-contact h2,
	.wtc-js .wtc-contact__lede,
	.wtc-js .wtc-contact__metaitem,
	.wtc-js .wtc-contact .wtc-field,
	.wtc-js .wtc-contact .wtc-submit {
		opacity: 0;
		transform: translateY(8px);
	}

	.wtc-js .wtc-contact.is-live .wtc-contact__eyebrow,
	.wtc-js .wtc-contact.is-live h1,
	.wtc-js .wtc-contact.is-live h2,
	.wtc-js .wtc-contact.is-live .wtc-contact__lede,
	.wtc-js .wtc-contact.is-live .wtc-contact__metaitem,
	.wtc-js .wtc-contact.is-live .wtc-field,
	.wtc-js .wtc-contact.is-live .wtc-submit {
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--wtc-d, 0s);
		opacity: 1;
		transform: none;
	}

	.wtc-js .wtc-contact h1,
	.wtc-js .wtc-contact h2 { --wtc-d: 0.07s; }
	.wtc-js .wtc-contact__lede { --wtc-d: 0.14s; }
	.wtc-js .wtc-contact .wtc-grid .wtc-field:nth-child(1) { --wtc-d: 0.35s; }
	.wtc-js .wtc-contact .wtc-grid .wtc-field:nth-child(2) { --wtc-d: 0.41s; }
	.wtc-js .wtc-contact .wtc-grid .wtc-field:nth-child(3) { --wtc-d: 0.47s; }
	.wtc-js .wtc-contact .wtc-grid .wtc-field:nth-child(4) { --wtc-d: 0.53s; }
	.wtc-js .wtc-contact .wtc-message { --wtc-d: 0.59s; }
	.wtc-js .wtc-contact .wtc-submit { --wtc-d: 0.65s; }
	.wtc-js .wtc-contact__metaitem { --wtc-d: 0.48s; }

	/* -- The rules that draw ---------------------------------------- */

	/* The metric and office hairlines are drawn, not faded in. The
	   border keeps its 1px of layout and goes transparent; the visible
	   line is a bar scaling out from the left, so nothing reflows and
	   the no-JS page still gets a plain border. */
	.wtc-js .wtc-case__metric,
	.wtc-js .wtc-contact__metaitem {
		position: relative;
		border-top-color: transparent;
	}

	.wtc-js .wtc-case__metric::before,
	.wtc-js .wtc-contact__metaitem::before,
	.wtc-js .wtc-newsletter::before,
	.wtc-js .wtc-footer::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		right: 0;
		height: 1px;
		background: #e5e1d6;
		transform: scaleX(0);
		transform-origin: left center;
	}

	.wtc-js .wtc-case.is-live .wtc-case__metric::before,
	.wtc-js .wtc-contact.is-live .wtc-contact__metaitem::before {
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.3, 1);
		transition-delay: var(--wtc-d, 0s);
		transform: none;
	}

	/* -- Newsletter: the page's closing line draws full bleed, and the
	      legend resolves in its gap just after the rule passes. ------ */

	.wtc-js .wtc-newsletter {
		border-top-color: transparent;
	}

	.wtc-js .wtc-newsletter.is-live::before {
		transition: transform 0.9s cubic-bezier(0.4, 0, 0.3, 1);
		transform: none;
	}

	.wtc-js .wtc-newsletter__eyebrow,
	.wtc-js .wtc-newsletter h2,
	.wtc-js .wtc-newsletter__form {
		opacity: 0;
	}

	.wtc-js .wtc-newsletter.is-live .wtc-newsletter__eyebrow,
	.wtc-js .wtc-newsletter.is-live h2,
	.wtc-js .wtc-newsletter.is-live .wtc-newsletter__form {
		transition: opacity 0.5s ease;
		transition-delay: var(--wtc-d, 0.15s);
		opacity: 1;
	}

	.wtc-js .wtc-newsletter h2 { --wtc-d: 0.3s; }
	.wtc-js .wtc-newsletter__form { --wtc-d: 0.42s; }

	/* -- Footer: the last rule draws the same way the newsletter's did,
	      and the signature resolves behind it. ----------------------- */

	.wtc-js .wtc-footer {
		border-top-color: transparent;
	}

	.wtc-js .wtc-footer.is-live::before {
		transition: transform 0.9s cubic-bezier(0.4, 0, 0.3, 1);
		transform: none;
	}

	.wtc-js .wtc-footer__logo,
	.wtc-js .wtc-footer__link,
	.wtc-js .wtc-footer__copyright {
		opacity: 0;
	}

	.wtc-js .wtc-footer.is-live .wtc-footer__logo,
	.wtc-js .wtc-footer.is-live .wtc-footer__link,
	.wtc-js .wtc-footer.is-live .wtc-footer__copyright {
		/* color is re-declared so the settled links keep their hover
		   fade — a bare `transition: opacity` here would drop it — and
		   its own 0s delay keeps the stagger off the hover. */
		transition: opacity 0.5s ease, color 0.3s ease;
		transition-delay: var(--wtc-d, 0.15s), 0s;
		opacity: 1;
	}

	.wtc-js .wtc-footer__link:nth-child(1) { --wtc-d: 0.26s; }
	.wtc-js .wtc-footer__link:nth-child(2) { --wtc-d: 0.33s; }
	.wtc-js .wtc-footer__link:nth-child(3) { --wtc-d: 0.4s; }
	.wtc-js .wtc-footer__copyright { --wtc-d: 0.5s; }
}

@keyframes wtc-station-pop {
	to {
		transform: scale(1);
	}
}

@keyframes wtc-pin {
	to {
		transform: scale(1);
	}
}

/* Text selection in gold on paper. */
::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Search input and form fields follow the pill language. */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	background-color: transparent;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 999px;
	font-family: inherit;
	padding: 0.6rem 1.2rem;
}

textarea {
	border-radius: 24px;
}

.wp-block-search__button {
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation a,
	.wp-block-navigation .wp-block-navigation-submenu__toggle svg,
	.wtc-header-cta .wp-block-button__link::before,
	.wtc-cf7 input:not([type="submit"]),
	.wtc-cf7 textarea,
	.wtc-cf7 .wpcf7-submit,
	.wtc-newsletter .wtc-nl-input,
	.wtc-newsletter .wtc-nl-submit,
	.wtc-footer__link,
	.wtc-footer__arrow {
		transition: none;
	}
}

/* ---- Consulting & Audit page (consutling.md) -------------------------
   Three instruments, one grammar: a mosaic lit by the pointer, a plot
   swept by a front, a sheet read by a cursor. They share the slate ramp,
   the bracketed mono telemetry and the once-only reveal with the front
   page, so the second page reads as the same publication rather than a
   sibling site. */

.wtc-pagehero,
.wtc-team,
.wtc-bigdata,
.wtc-interviews {
	--wtc-slate-deep: #46586a;
	--wtc-slate-mid: #5e7285;
	--wtc-slate-soft: #8b99a8;
	--wtc-rule: #e5e1d6;
}

/* ---- Page hero ------------------------------------------------------- */

/* One column, not the front page's two: the atlas is the home page's
   signature and a second copy of it here would spend the same surprise
   twice. */
.wtc-pagehero {
	padding: clamp(2rem, 6vh, 4rem) 0 clamp(1.5rem, 4vh, 2.5rem);
}

.wtc-pagehero__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
}

.wtc-pagehero__eyebrow {
	display: block;
	margin: 0 0 1rem;
	color: var(--wtc-slate-deep);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
}

.wtc-pagehero h1 {
	margin: 0 0 1.5rem;
	max-width: 18ch;
	font-size: clamp(2.5rem, 4.8vw, 4.25rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.wtc-pagehero__lede {
	margin: 0;
	max-width: 52ch;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wtc-pagehero__lede strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---- Shared section frame for §1–§3 ---------------------------------- */

.wtc-team,
.wtc-bigdata,
.wtc-interviews {
	padding: clamp(2.75rem, 6vh, 4.5rem) 0;
}

.wtc-team__inner,
.wtc-bigdata__inner,
.wtc-interviews__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.wtc-team__num,
.wtc-bigdata__num,
.wtc-interviews__num {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--wtc-slate-deep);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
}

.wtc-team__copy h2,
.wtc-bigdata__copy h2,
.wtc-interviews__copy h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.125rem, 4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.wtc-team__lede,
.wtc-bigdata__lede,
.wtc-interviews__lede {
	margin: 0;
	max-width: 36ch;
	color: var(--wp--preset--color--accent-4);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.55;
}

.wtc-team__lede strong,
.wtc-bigdata__lede strong,
.wtc-interviews__lede strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* The sides alternate down the page: mosaic right, plot left, sheet
   right. Copy leads in the DOM wherever it leads on screen, so a narrow
   viewport always reads heading → copy → instrument. */
@media (min-width: 900px) {
	.wtc-team__inner,
	.wtc-bigdata__inner,
	.wtc-interviews__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wtc-team__copy { grid-column: 1; grid-row: 1; }
	.wtc-team__mosaic { grid-column: 2; grid-row: 1; }

	.wtc-bigdata__plot { grid-column: 1; grid-row: 1; }
	.wtc-bigdata__copy { grid-column: 2; grid-row: 1; }

	.wtc-interviews__copy { grid-column: 1; grid-row: 1; }
	.wtc-interviews__sheet { grid-column: 2; grid-row: 1; }
}

/* Keep the illustrations slightly inset so the larger editorial copy
   holds equal weight. All three share a measure as the sides alternate. */
.wtc-team__grid,
.wtc-bigdata__plotbox,
.wtc-interviews__sheetbox {
	width: 100%;
	max-width: 500px;
}

.wtc-bigdata__plot,
.wtc-interviews__sheet {
	display: flex;
}

.wtc-bigdata__plot { justify-content: flex-start; }
.wtc-interviews__sheet { justify-content: flex-end; }
.wtc-team__mosaic { display: flex; justify-content: flex-end; }

@media (max-width: 899px) {
	.wtc-bigdata__plot,
	.wtc-interviews__sheet,
	.wtc-team__mosaic {
		justify-content: flex-start;
	}
}

/* ---- Shared mono telemetry ------------------------------------------- */

/* The hero atlasbar's HUD, reused under the plot and the sheet. No wrap:
   the readout shrinks and the caption ellipses rather than dropping to a
   second row. */
.wtc-bigdata__bar,
.wtc-interviews__hud {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-top: 0.85rem;
	font-family: var(--wp--preset--font-family--geist-mono);
}

.wtc-bigdata__readout,
.wtc-interviews__readout {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wtc-bigdata__readout-label,
.wtc-interviews__readout-label {
	color: var(--wtc-slate-deep);
	font-size: 13px;
	letter-spacing: 0.12em;
	flex-shrink: 0;
}

.wtc-bigdata__readout-cap,
.wtc-interviews__readout-cap {
	color: var(--wtc-slate-mid);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 560px) {
	.wtc-bigdata__readout-cap,
	.wtc-interviews__readout-cap {
		display: none;
	}
}

/* ---- §1 The team mosaic ---------------------------------------------- */

/* --lit is the pointer spotlight, 0 at rest and 1 under the cursor, set
   per tile by wtc-team.js. Registering it means it resolves as a number
   rather than a token, which is what lets it drive calc() inside filter,
   and gives the no-JS grid a defined starting value.

   It MUST inherit. The value is set on the tile, but two of the three
   things it drives — the image's filter and the ::after slate wash — read
   it from inside the tile. Registered as inherits: false they fall back
   to the initial 0 and the mosaic stays uniformly grey no matter where
   the pointer is, with only the scale responding. */
@property --lit {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.wtc-team__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(3px, 0.45vw, 8px);
	aspect-ratio: 1 / 1;
}

.wtc-team__tile {
	--lit: 0;
	position: relative;
	margin: 0;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: clamp(3px, 0.45vw, 8px);
	background: #dedbd4;
	/* `scale` rather than `transform`, so the entrance below can own
	   `translate` with a transition on it while the spotlight stays
	   instant. A transition here would drag the pool half a second
	   behind the cursor. */
	scale: calc(1 + 0.055 * var(--lit));
}

.wtc-team__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
	filter:
		grayscale(calc(1 - var(--lit)))
		contrast(calc(0.9 + 0.18 * var(--lit)))
		brightness(calc(0.95 + 0.11 * var(--lit)));
}

/* The slate wash that makes the resting grid a duotone rather than a
   grey slab. `color` blend keeps the photograph's own luminance and
   lends it only hue, and it lifts as the tile comes up. */
.wtc-team__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wtc-slate-deep);
	mix-blend-mode: color;
	opacity: calc(0.58 * (1 - var(--lit)));
	pointer-events: none;
}

/* No pointer, no spotlight — and a grid that never lights at all reads as
   broken rather than as restrained. Rest these warmer instead. */
@media (hover: none) {
	.wtc-team__tile {
		--lit: 0.38;
	}
}

/* ---- §2 The plot ------------------------------------------------------ */

.wtc-bigdata__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--wtc-rule);
	background: var(--wp--preset--color--base);
	cursor: crosshair;
	touch-action: manipulation;
}

.wtc-bigdata__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- §3 The sheet ----------------------------------------------------- */

.wtc-interviews__paper {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 3.4vw, 1.65rem);
	border: 1px solid var(--wtc-rule);
	background: var(--wp--preset--color--base);
	cursor: pointer;
	overflow: hidden;
}

.wtc-interviews__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wtc-rule);
	color: var(--wtc-slate-mid);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}

.wtc-interviews__head b {
	color: var(--wtc-slate-deep);
	font-weight: 500;
}

.wtc-interviews__rows {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding-top: 0.5rem;
}

.wtc-interviews__row {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* The LV ledger's redaction at two weights. Soft is the body of the
   transcript and hides nothing, because there is nothing under it; hard
   marks a passage actually withheld. The heavier bars read as heavier
   before anything moves, so the reveal confirms where the withheld
   material is rather than surprising you. */
.wtc-interviews__bar {
	width: var(--w);
	height: 9px;
	border-radius: 4px;
	background: rgba(42, 40, 31, 0.13);
}

.wtc-interviews__cover {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.wtc-interviews__quote {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12.5px;
	line-height: 1.35;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wtc-interviews__bar--hard {
	position: absolute;
	left: -5px;
	right: -5px;
	top: 50%;
	height: 16px;
	width: auto;
	border-radius: 4px;
	background: rgba(42, 40, 31, 0.94);
	transform: translateY(-50%) scaleX(1);
	transform-origin: right center;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Retracting to the right uncovers the line left-to-right, in the same
   direction the glyph scramble resolves. */
.wtc-interviews__row--quote.is-open .wtc-interviews__bar--hard {
	transform: translateY(-50%) scaleX(0);
}

/* Concealment is the whole point, so it must not rest on ink-over-ink
   coincidence. Painting dark text under a dark bar leaves the glyphs
   faintly legible — their antialiased edges blend paper through — and,
   worse, leaves the excerpt selectable and in the accessibility tree, so
   the sheet could be read straight out of the DOM. A covered excerpt is
   genuinely hidden until its bar retracts.

   The hide is delayed by the close duration so the text never blinks out
   ahead of the bar sweeping back over it. */
.wtc-interviews__row--quote .wtc-interviews__quote {
	visibility: hidden;
	transition: visibility 0s linear 0.4s;
}

.wtc-interviews__row--quote.is-open .wtc-interviews__quote {
	visibility: visible;
	transition: visibility 0s linear 0s;
}

/* The reading cursor, from the LV ledger — a measure rule with a tick at
   each end. */
.wtc-interviews__cursor {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--wtc-slate-deep);
	opacity: 0;
	pointer-events: none;
}

.wtc-interviews__cursor::before,
.wtc-interviews__cursor::after {
	content: "";
	position: absolute;
	top: -3px;
	width: 1px;
	height: 7px;
	background: var(--wtc-slate-deep);
}

.wtc-interviews__cursor::before { left: 0; }
.wtc-interviews__cursor::after { right: 0; }

@media (max-width: 560px) {
	.wtc-interviews__quote {
		font-size: 11px;
	}
}

/* ---- Reveal ----------------------------------------------------------- */

.wtc-js .wtc-pagehero__eyebrow,
.wtc-js .wtc-pagehero h1,
.wtc-js .wtc-pagehero__lede,
.wtc-js .wtc-team__copy,
.wtc-js .wtc-team__mosaic,
.wtc-js .wtc-bigdata__copy,
.wtc-js .wtc-bigdata__plot,
.wtc-js .wtc-interviews__copy,
.wtc-js .wtc-interviews__sheet {
	opacity: 0;
	translate: 0 14px;
}

.wtc-pagehero.is-live .wtc-pagehero__eyebrow,
.wtc-pagehero.is-live h1,
.wtc-pagehero.is-live .wtc-pagehero__lede,
.wtc-team.is-live .wtc-team__copy,
.wtc-team.is-live .wtc-team__mosaic,
.wtc-bigdata.is-live .wtc-bigdata__copy,
.wtc-bigdata.is-live .wtc-bigdata__plot,
.wtc-interviews.is-live .wtc-interviews__copy,
.wtc-interviews.is-live .wtc-interviews__sheet {
	opacity: 1;
	translate: none;
	transition: opacity 0.75s ease, translate 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtc-pagehero.is-live h1 { transition-delay: 0.08s; }
.wtc-pagehero.is-live .wtc-pagehero__lede { transition-delay: 0.16s; }
.wtc-team.is-live .wtc-team__mosaic { transition-delay: 0.12s; }
.wtc-bigdata.is-live .wtc-bigdata__copy { transition-delay: 0.12s; }
.wtc-interviews.is-live .wtc-interviews__sheet { transition-delay: 0.12s; }

/* Tiles deal in on a diagonal, --i being row + column, at the same 26ms
   step as the transcript rows below and the case metrics on the front
   page. */
.wtc-js .wtc-team__tile {
	opacity: 0;
	translate: 0 6px;
}

.wtc-team.is-live .wtc-team__tile {
	opacity: 1;
	translate: none;
	transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(0.2s + var(--i) * 26ms);
}

/* Transcript rows deal in top to bottom as the sheet arrives. */
.wtc-js .wtc-interviews__row {
	opacity: 0;
	translate: 0 5px;
}

.wtc-interviews.is-live .wtc-interviews__row {
	opacity: 1;
	translate: none;
	transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(0.18s + var(--i) * 26ms);
}

@media (prefers-reduced-motion: reduce) {
	.wtc-js .wtc-pagehero__eyebrow,
	.wtc-js .wtc-pagehero h1,
	.wtc-js .wtc-pagehero__lede,
	.wtc-js .wtc-team__copy,
	.wtc-js .wtc-team__mosaic,
	.wtc-js .wtc-team__tile,
	.wtc-js .wtc-bigdata__copy,
	.wtc-js .wtc-bigdata__plot,
	.wtc-js .wtc-interviews__copy,
	.wtc-js .wtc-interviews__sheet,
	.wtc-js .wtc-interviews__row {
		opacity: 1;
		translate: none;
	}

	/* wtc-team.js does not run under reduced motion, so the spotlight
	   becomes a plain hover: no spring, no scale, no pool. */
	.wtc-team__tile {
		--lit: 0.38;
		scale: 1;
	}

	.wtc-team__tile:hover {
		--lit: 1;
	}

	.wtc-interviews__bar--hard,
	.wtc-interviews__row--quote .wtc-interviews__quote {
		transition: none;
	}
}

/* ---- In-page links --------------------------------------------------- */

/* The hero's two pills ("Book an introduction", "See our work") point at
   sections of the same page; glide there instead of jumping. The contact
   sheet stops clear of the sticky header, as the case ledger does. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.wtc-contact {
	scroll-margin-top: 5rem;
}