/* ==========================================================================
   Junnu theme — global styles
   Design tokens live in theme.json. This file covers what theme.json can't
   express: resets, keyframes, hover/focus states, and component chrome
   (header, footer, nav, buttons, forms).
   ========================================================================== */

/* -- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
h1, h2, h3, h4, ul, ol, p { margin: 0; }
h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, label, legend, button, a { overflow-wrap: break-word; }
::placeholder { color: var(--wp--preset--color--subtle); }

/* Finnish compounds become distracting when automatic hyphenation is
   applied to every descendant, especially in display type and narrow UI.
   Let prose wrap at word boundaries and keep short interface copy intact. */
html[lang^="fi"] {
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
}
html[lang^="fi"] :is(p, li, dt, dd, blockquote, figcaption) {
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
	overflow-wrap: break-word;
}
html[lang^="fi"] :is(h1, h2, h3, h4, h5, h6, nav a, button, label, legend, summary, .eyebrow, .btn-primary, .link-ghost, .cta-link-row__title) {
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

a { text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 3px; }
a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent); }

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

/* -- Layout helpers ------------------------------------------------------ */
.section { padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter); }

/* -- Scroll text reveal -------------------------------------------------- */
[data-scroll-reveal] {
	--scroll-reveal-dim: rgb(0 0 0 / 0.16);
	--scroll-reveal-lit: currentColor;
}

.tone-dark [data-scroll-reveal],
[data-nav-tone="dark"] [data-scroll-reveal] {
	--scroll-reveal-dim: rgb(255 255 255 / 0.18);
}

.scroll-reveal-char {
	color: var(--scroll-reveal-dim);
	transition: color 120ms linear;
}

.scroll-reveal-char.is-lit { color: var(--scroll-reveal-lit); }

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

@media (prefers-reduced-motion: reduce) {
	.scroll-reveal-char {
		color: var(--scroll-reveal-lit);
		transition: none;
	}
}

/* Core gives every .wp-site-blocks child but the DOM's first child a
   margin-block-start for block spacing. The header is that first child but
   is position:fixed (out of flow), so <main> — the second child — inherits
   the margin instead, leaving a 24px gap of bare body background above the
   hero. Zero it explicitly; this selector's specificity beats core's :where(). */
.site-main { margin-block-start: 0; }

/* Flex/grid items default to min-width:auto, which sizes them to their
   content's preferred width and makes text overflow its column instead of
   wrapping (worst on narrow viewports). Every custom section layout here is
   built from nested wp:group blocks, so this one rule fixes it everywhere. */
.wp-block-group { min-width: 0; }

/* Anchor targets (e.g. the hero's "See how I think ↓" link to #paradox)
   would otherwise land partly hidden behind the fixed header. */
[id] { scroll-margin-top: 110px; }

/* Light "paper" sections. The home-* selectors predate the shared class and
   stay because the homepage's stored block markup still uses them. */
.tone-light,
.home-paradox,
.home-complexity,
.home-storytelling,
.home-bridge { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--black); }

/* -- Eyebrow / buttons / ghost links ------------------------------------ */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.eyebrow__mark {
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}
.eyebrow--muted { color: var(--wp--preset--color--on-dark-muted); }
.tone-light .eyebrow--muted { color: var(--wp--preset--color--on-light-muted); }
/* Section number in place of the square. Lifted on dark so the red keeps
   enough contrast against ink. */
.eyebrow__num { color: var(--wp--preset--color--accent); filter: brightness(1.6); }
.tone-light .eyebrow__num { filter: none; }

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 16px 26px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color .2s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

.link-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.link-ghost--boxed {
	gap: 12px;
	padding: 16px 22px;
	border: 1px solid var(--wp--preset--color--divider-dark);
	color: var(--wp--preset--color--paper);
	transition: border-color .2s ease, color .2s ease;
}
.link-ghost--boxed:hover { color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--paper); }
.link-ghost--boxed [aria-hidden] { color: var(--wp--preset--color--accent); font-size: 16px; letter-spacing: 0; }
.tone-light .link-ghost--boxed { border-color: var(--wp--preset--color--black); color: var(--wp--preset--color--black); }
.tone-light .link-ghost--boxed:hover { color: var(--wp--preset--color--accent); }

/* -- Site header --------------------------------------------------------- */
.site-header {
	--header-text: var(--wp--preset--color--paper);
	--header-muted: var(--wp--preset--color--on-dark-muted);
	--header-line: rgba(240,237,232,.16);
	--header-surface: rgba(13,13,13,.82);
	position: fixed;
	top: env(safe-area-inset-top, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0;
	pointer-events: none;
	transition: padding .3s cubic-bezier(.2,.7,.2,1);
}
.site-header[data-tone="light"] {
	--header-text: var(--wp--preset--color--black);
	--header-muted: var(--wp--preset--color--on-light-muted);
	--header-line: rgba(13,13,13,.15);
	--header-surface: rgba(246,244,240,.86);
}
.site-header.is-scrolled {
	padding: 12px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
}
.site-header__bar {
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
	width: 100%;
	padding-block: 28px;
	border-radius: 0;
	background: transparent;
	border: 1px solid transparent;
	color: var(--header-text);
	gap: clamp(24px, 4vw, 56px);
	pointer-events: auto;
	transition: padding .3s cubic-bezier(.2,.7,.2,1), max-width .3s cubic-bezier(.2,.7,.2,1), background-color .25s ease, border-color .25s ease, color .25s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled .site-header__bar {
	max-width: 960px;
	padding: 12px 28px;
	background: var(--header-surface);
	border-color: var(--header-line);
	box-shadow: 0 10px 30px rgba(0,0,0,.16);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo a { display: block; }
.site-header__logo img {
	display: block;
	height: 36px;
	width: auto;
	transition: height .3s cubic-bezier(.2,.7,.2,1), filter .25s ease;
}
.site-header[data-tone="light"] .site-header__logo img { filter: brightness(.08); }
.site-header.is-scrolled .site-header__logo img {
	height: 26px;
}
.site-header__right {
	gap: clamp(20px, 3vw, 40px);
	min-width: 0;
}

.site-header__nav {
	font-size: 14px;
	letter-spacing: .01em;
}
.site-header__nav .wp-block-navigation__container { gap: clamp(18px, 2.2vw, 34px); }
.site-header__nav a {
	position: relative;
	color: var(--header-muted);
	text-decoration: none;
	padding-block: 7px;
	white-space: nowrap;
	transition: color .2s ease;
}
.site-header__nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 2px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transition: right .25s cubic-bezier(.2,.7,.2,1);
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a[aria-current="page"] {
	color: var(--header-text);
}
.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after,
.site-header__nav a[aria-current="page"]::after {
	right: 0;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--header-muted);
}
.lang-switch a { color: inherit; text-decoration: none; padding: 8px 2px; }
.lang-switch a:hover,
.lang-switch a:focus-visible { color: var(--header-text); }
.lang-switch__current { color: var(--header-text) !important; text-decoration: underline !important; text-decoration-color: var(--wp--preset--color--accent) !important; text-underline-offset: 4px; }
.lang-switch__sep { color: var(--header-line); }
.lang-switch--mobile { display: none; }

.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close {
	color: currentColor;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	letter-spacing: .01em;
}
.site-header__nav .wp-block-navigation__responsive-container-open svg,
.site-header__nav .wp-block-navigation__responsive-container-close svg { display: none; }

.mobile-menu__button-label { display: inline-block; }
.mobile-menu__button-mark {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	flex: none;
}
.wp-block-navigation__responsive-container-open .mobile-menu__button-mark::before,
.wp-block-navigation__responsive-container-open .mobile-menu__button-mark::after,
.wp-block-navigation__responsive-container-close .mobile-menu__button-mark::before,
.wp-block-navigation__responsive-container-close .mobile-menu__button-mark::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 1px;
	background: currentColor;
}
.wp-block-navigation__responsive-container-open .mobile-menu__button-mark::before { transform: translateY(-3px); }
.wp-block-navigation__responsive-container-open .mobile-menu__button-mark::after { transform: translateY(3px); }
.wp-block-navigation__responsive-container-close .mobile-menu__button-mark::before { transform: rotate(45deg); }
.wp-block-navigation__responsive-container-close .mobile-menu__button-mark::after { transform: rotate(-45deg); }
.mobile-menu__top { display: none; }

@media (max-width: 959px) {
	.site-header,
	.site-header.is-scrolled {
		top: env(safe-area-inset-top, 0px);
		padding: 0;
	}
	.site-header__bar,
	.site-header.is-scrolled .site-header__bar {
		max-width: none;
		height: 64px;
		padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
		gap: 16px;
		border-width: 0 0 1px;
		border-radius: 0;
		box-shadow: none;
	}
	.site-header__logo img,
	.site-header.is-scrolled .site-header__logo img { height: 26px; }
	.site-header__right { gap: 0; margin-left: auto; }
	.site-header__right > .lang-switch { display: none; }
	.site-header__nav { margin-right: -12px; }
	.site-header__nav .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; }
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 200;
		padding: 0;
		background-color: var(--wp--preset--color--ink) !important;
		color: var(--wp--preset--color--paper);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 1;
		visibility: visible;
		animation: mobile-menu-fade-in .24s ease-out both;
	}
	.site-header__nav .wp-block-navigation__responsive-close { height: 100%; flex: 1; }
	.site-header__nav .wp-block-navigation__responsive-dialog { min-height: 100%; }
	.site-header__nav .wp-block-navigation__responsive-dialog,
	.site-header__nav .wp-block-navigation__responsive-container-content { width: 100%; height: 100%; }
	.site-header__nav .wp-block-navigation__responsive-dialog { display: flex; flex-direction: column; }
	.site-header__nav .mobile-menu__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 64px;
		padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
		border-bottom: 1px solid var(--wp--preset--color--divider-dark-2);
		flex: none;
	}
	.site-header__nav .mobile-menu__logo { display: flex; align-items: center; min-height: 44px; }
	.site-header__nav .mobile-menu__logo img { display: block; width: auto; height: 26px; filter: none; }
	.site-header__nav .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 16px max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
		animation: mobile-menu-body-in .32s cubic-bezier(.2,.7,.2,1) both;
	}
	.site-header__nav .wp-block-navigation__responsive-container-close {
		position: static;
		margin-right: -12px;
		color: var(--wp--preset--color--paper);
	}
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		counter-reset: mobile-navigation;
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		counter-increment: mobile-navigation;
		width: 100%;
	}
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px;
		align-items: baseline;
		width: 100%;
		min-height: 72px;
		padding: 18px 0;
		border-bottom: 1px solid var(--wp--preset--color--divider-dark-2);
		color: var(--wp--preset--color--paper);
		font-family: var(--wp--preset--font-family--display);
		font-size: clamp(32px, 8vw, 44px);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -.02em;
		white-space: normal;
	}
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::before {
		content: counter(mobile-navigation, decimal-leading-zero);
		font-family: var(--wp--preset--font-family--body);
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .12em;
		color: var(--wp--preset--color--accent);
	}
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after { display: none; }
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible,
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--paper); }
	/* WordPress focuses the first item on open; underline the label instead of drawing the global outline box. */
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible { outline: none; }
	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
		text-decoration: underline 2px var(--wp--preset--color--accent);
		text-underline-offset: 6px;
	}
	.site-header__nav .lang-switch--mobile {
		display: flex;
		margin-top: auto;
		padding-top: 40px;
		gap: 8px;
		color: var(--wp--preset--color--on-dark-muted);
		font-size: 12px;
	}
	.site-header__nav .lang-switch--mobile a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
	.site-header__nav .lang-switch--mobile .lang-switch__current { color: var(--wp--preset--color--paper) !important; }
}

@keyframes mobile-menu-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mobile-menu-body-in {
	from { transform: translateY(-8px); }
	to { transform: none; }
}

@media (min-width: 960px) {
	.site-header__nav .wp-block-navigation__responsive-container-open { display: none !important; }
	.site-header__nav .wp-block-navigation__responsive-container,
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block !important;
		position: static;
		width: auto;
		height: auto;
		min-height: 0;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		color: inherit;
	}
	.site-header__nav .wp-block-navigation__responsive-dialog,
	.site-header__nav .wp-block-navigation__responsive-container-content { width: auto; height: auto; }
	.site-header__nav .mobile-menu__top,
	.site-header__nav .lang-switch--mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__bar,
	.site-header__logo img,
	.site-header__nav a::after,
	.site-header__nav .wp-block-navigation__responsive-container,
	.site-header__nav .wp-block-navigation__responsive-container-content { transition: none; animation: none; }
}

/* -- Site footer --------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--divider-dark-2);
	padding: var(--wp--preset--spacing--gap-lg) var(--wp--preset--spacing--gutter) 36px;
}
.site-footer__grid { gap: 32px 64px; align-items: flex-start; }
.site-footer__brand img { height: 40px; width: auto; display: block; }
.site-footer__tagline { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--on-dark-muted); max-width: 34ch; }
.site-footer__nav a { color: var(--wp--preset--color--on-dark-muted); text-decoration: none; font-size: 14px; }
.site-footer__nav a:hover { color: var(--wp--preset--color--paper); }
.site-footer__brief { font-family: var(--wp--preset--font-family--display); font-size: 22px; line-height: 1.3; }
.site-footer__tellme a { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--paper); }
.site-footer__bottom {
	max-width: var(--wp--style--global--content-size, 1120px);
	margin: var(--wp--preset--spacing--gap-md) auto 0;
	border-top: 1px solid var(--wp--preset--color--divider-dark-2);
	padding-top: 20px;
	font-size: 12px;
	color: var(--wp--preset--color--subtle);
	gap: 12px 32px;
}
.site-footer__legal { gap: 20px; }
.site-footer__legal a { color: var(--wp--preset--color--on-dark-muted); text-decoration: none; }

/* -- Contact form --------------------------------------------------------- */
.contact-form { max-width: 640px; }
.contact-form__field { margin-bottom: 24px; }
.contact-form__field label { display: block; font-size: 14px; margin-bottom: 8px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--divider-light);
	border-radius: 0;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 300;
	font-family: inherit;
	color: inherit;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent);
}
.contact-form__reassure { margin-top: 16px; font-size: 13px; color: var(--wp--preset--color--on-light-muted); }
.contact-form__error { color: var(--wp--preset--color--accent); margin-bottom: 16px; }
.contact-form--sent { font-family: var(--wp--preset--font-family--display); font-size: 24px; }

/* ==========================================================================
   Shared page components
   Built for the Case Studies index; named for reuse on the other inner
   pages. Colours default to the dark (ink) tone and switch under .tone-light.
   ========================================================================== */

/* -- Page hero: image hero for inner pages ---------------------------------
   Shares the [data-jvh-image-hero] pointer parallax (--jvh-mx/--jvh-my from
   hero-parallax.js) and noise overlay with the other image heroes. */
.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(128px, 13vw, 200px) var(--wp--preset--spacing--gutter) clamp(40px, 5vw, 64px);
}
.page-hero__stage {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform: perspective(1200px) rotateY(calc(var(--jvh-mx, 0) * 1.4deg)) rotateX(calc(var(--jvh-my, 0) * -1deg));
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 0% 30%;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate3d(calc(var(--jvh-mx, 0) * -5px), calc(var(--jvh-my, 0) * -3px), 0) scale(1.06);
}
.page-hero__bg--mirrored { transform: translate3d(calc(var(--jvh-mx, 0) * -5px), calc(var(--jvh-my, 0) * -3px), 0) scale(-1.06, 1.06); }
.page-hero__fog {
	position: absolute;
	inset: -25%;
	mix-blend-mode: screen;
	background: radial-gradient(ellipse 38% 50% at 72% 36%, rgba(212,196,164,.08), rgba(212,196,164,0) 70%);
	animation: pageHeroFog 53s ease-in-out infinite alternate;
}
@keyframes pageHeroFog {
	from { transform: translate3d(-1.2%, .7%, 0); }
	to { transform: translate3d(1.4%, -.8%, 0); }
}
.page-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, var(--wp--preset--color--ink) 4.4%, rgba(13,13,13,0) 55%),
		linear-gradient(90deg, rgba(13,13,13,.88) 0%, rgba(13,13,13,.6) 45%, rgba(13,13,13,.1) 100%);
}
.page-hero__inner { position: relative; z-index: 3; max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; }
.page-hero__head {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 64px;
	align-items: flex-end;
	justify-content: space-between;
}
.page-hero__title { font-size: clamp(52px, 8vw, 120px); line-height: .98; letter-spacing: -.035em; }
.page-hero__title em { font-weight: 300; }
.page-hero__sub {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.3;
	color: var(--wp--preset--color--on-dark-secondary);
}
.page-hero__intro { max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); text-wrap: pretty; }
.page-hero__intro--readable { color: var(--wp--preset--color--on-dark-secondary); }
@media (min-width: 1100px) {
	#cases-hero .page-hero__head {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: 64px;
	}
	#cases-hero .page-hero__head > * { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.page-hero__fog { animation: none; }
}

/* -- Anchor index: numbered jump links to sections further down ----------- */
.anchor-index {
	margin-top: clamp(40px, 5vw, 64px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0 32px;
}
.anchor-index__link {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 4px 12px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--divider-dark);
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
	transition: border-color .2s ease;
}
.anchor-index__link:hover { color: var(--wp--preset--color--paper); border-top-color: var(--wp--preset--color--accent); }
.anchor-index__num { font-size: 12px; font-weight: 500; color: var(--wp--preset--color--on-dark-muted); }
.anchor-index__title { display: block; font-family: var(--wp--preset--font-family--display); font-size: 22px; line-height: 1.2; }
.anchor-index__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--wp--preset--color--on-dark-muted); }
.anchor-index__arrow { color: var(--wp--preset--color--accent); }

/* -- Layout primitives ----------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 64px; align-items: start; }
.split--end { gap: 24px 64px; align-items: end; }
.split--loose { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 72px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack--tight { gap: 20px; }

/* -- Case section ---------------------------------------------------------- */
/* The first case follows the page hero directly, so it starts tight. */
.case-section--lead { padding: clamp(32px, 4vw, 56px) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--section); }
.case-section__media { margin-top: clamp(40px, 5vw, 56px); }
.case-section__cta { margin-top: 28px; }
.case-section__cta .btn-primary { gap: 12px; }

/* -- Type helpers ---------------------------------------------------------- */
.title-compact { margin-top: 20px; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.title-compact em { font-weight: 300; }
.title-compact--accent em { color: var(--wp--preset--color--accent); }
.body-text { margin-top: 24px; max-width: 46ch; text-wrap: pretty; }
.body-text--muted { margin-top: 16px; font-size: 16px; color: var(--wp--preset--color--on-dark-muted); }
.tone-light .body-text--muted { color: var(--wp--preset--color--on-light-muted); }
.pull-line {
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	color: var(--wp--preset--color--on-dark-secondary);
}
.fact-label { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-muted); }
.tone-light .fact-label { color: var(--wp--preset--color--on-light-muted); }

/* -- Utility / legal content ---------------------------------------------
   Single-column informational pages. Kept separate from .longform, whose
   serif reading typography and editorial grid belong to articles and cases. */
.utility-page {
	padding: clamp(112px, 13vw, 168px) var(--wp--preset--spacing--gutter) clamp(80px, 10vw, 128px);
}
.utility-page__content {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--on-light-secondary);
}
.utility-page__title {
	max-width: 14ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 6vw, 76px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.03em;
	text-wrap: balance;
}
html[lang^="fi"] .utility-page__title { overflow-wrap: anywhere; }
.utility-page__intro {
	max-width: 720px;
	margin-top: clamp(28px, 4vw, 40px);
}
.utility-page__body { margin-top: clamp(28px, 4vw, 40px); }
.utility-page__intro > p + p,
.utility-page__section > p + p,
.utility-page__body > p + p { margin-top: 1em; }
.utility-page__section { margin-top: clamp(48px, 6vw, 72px); }
.utility-page__section h2,
.utility-page__body > h2 {
	max-width: 18ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.utility-page__body > h2 { margin-top: clamp(48px, 6vw, 72px); }
.utility-page__body > h2:first-child { margin-top: 0; }
.utility-page__section h2 + p,
.utility-page__body > h2 + p { margin-top: 20px; }
.utility-page__content :is(ul, ol) { font: inherit; }

@media (max-width: 599px) {
	.utility-page { padding-top: 104px; }
	.utility-page__title { font-size: clamp(44px, 14vw, 60px); }
}

/* -- Media link: image that opens the item it shows ------------------------ */
.media-link { display: block; overflow: hidden; background: var(--wp--preset--color--ink-raised); }
.tone-light .media-link { background: #e4e0d9; /* image backing on light, DESIGN-SYSTEM.md */ }
.media-link__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.media-link:hover .media-link__img { transform: scale(1.02); }
.media-link__img--square { aspect-ratio: 1 / 1; }
.media-link__img--wide { aspect-ratio: 16 / 7; }
.media-link__img--4x3 { aspect-ratio: 4 / 3; }

/* -- Key fact: the outcome, under a red top rule --------------------------- */
.key-fact { margin-top: 28px; border-top: 3px solid var(--wp--preset--color--accent); padding-top: 18px; }
.key-fact--quiet { border-top-width: 1px; border-top-color: var(--wp--preset--color--divider-dark); }
.key-fact__value {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.25;
}
.key-fact__text { margin-top: 8px; max-width: 46ch; font-size: 15px; line-height: 1.65; }

/* -- Timeline: years in a row, the latest under a red rule ----------------- */
.timeline {
	margin-top: clamp(48px, 6vw, 72px);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 0 24px;
}
.timeline__item { border-top: 1px solid var(--wp--preset--color--divider-dark); padding: 16px 0; }
.timeline__item:last-child { border-top-color: var(--wp--preset--color--accent); }
.timeline__year { font-family: var(--wp--preset--font-family--display); font-size: 28px; line-height: 1; }
.timeline__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--on-dark-muted); }

/* -- Meta: label/value facts, as wrapping columns or a two-column table ---- */
.meta-grid {
	margin-top: clamp(24px, 3vw, 40px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 0 40px;
}
.meta-grid > div { border-top: 1px solid var(--wp--preset--color--divider-dark-2); padding: 16px 0; }
.meta-grid dd { margin: 8px 0 0; font-size: 14px; line-height: 1.7; }
.meta-table {
	margin: 0;
	display: grid;
	grid-template-columns: fit-content(45%) minmax(0, 1fr);
	column-gap: 16px;
	border-bottom: 1px solid var(--wp--preset--color--divider-dark-2);
}
.meta-table > div {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--divider-dark-2);
}
.meta-table dt { padding-top: 3px; }
.meta-table dd { margin: 0; font-size: 14px; line-height: 1.6; }

/* -- Note columns: short dated notes side by side -------------------------- */
.note-columns {
	margin-top: clamp(32px, 4vw, 48px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 32px 48px;
}
.note-columns__item { border-top: 1px solid var(--wp--preset--color--paper); padding-top: 18px; }
.tone-light .note-columns__item { border-top-color: var(--wp--preset--color--black); }
.note-columns__item--key,
.tone-light .note-columns__item--key { border-top: 3px solid var(--wp--preset--color--accent); padding-top: 16px; }
.note-columns .fact-label { font-weight: 600; }
.note-columns__item--key .fact-label { color: var(--wp--preset--color--accent); }
.note-columns__text { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--on-dark-secondary); text-wrap: pretty; }
.tone-light .note-columns__text { color: var(--wp--preset--color--on-light-secondary); }
.note-columns__quote { margin-top: 12px; font-family: var(--wp--preset--font-family--display); font-size: 22px; line-height: 1.35; }
.note-columns__aside { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--on-dark-muted); }
.tone-light .note-columns__aside { color: var(--wp--preset--color--on-light-muted); }

/* -- Tag row: disciplines on the left, a CTA on the right ------------------ */
.tag-row {
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 48px;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--wp--preset--color--divider-dark);
	padding-top: 20px;
}
.tone-light .tag-row { border-top-color: var(--wp--preset--color--on-dark-secondary); }
.tag-row__tags { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.8; color: var(--wp--preset--color--on-dark-muted); }
.tone-light .tag-row__tags { color: var(--wp--preset--color--on-light-muted); }

/* -- More selected work: compact secondary case cards --------------------- */
.more-work {
	padding: clamp(64px, 8vw, 96px) var(--wp--preset--spacing--gutter);
}
.more-work__head { max-width: 760px; }
.more-work__heading {
	margin-top: 20px;
	font-size: clamp(36px, 4.2vw, 54px);
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.more-work__heading em { font-weight: 300; color: var(--wp--preset--color--accent); }
.more-work__grid {
	margin-top: clamp(36px, 4.5vw, 52px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.more-work__card {
	min-width: 0;
	border-top: 1px solid var(--wp--preset--color--black);
	padding-top: 16px;
}
.more-work__media { aspect-ratio: 4 / 3; }
.more-work__image { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.more-work__body { padding-top: 18px; }
.more-work__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-light-muted);
}
.more-work__title {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.015em;
}
.more-work__summary {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--on-light-secondary);
	text-wrap: pretty;
}
.more-work__action { margin-top: 18px; }
.more-work__action .link-ghost { color: var(--wp--preset--color--black); }
.more-work__action .link-ghost:hover { color: var(--wp--preset--color--accent); }
.more-work__pending {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-light-muted);
}
.more-work__head > * { margin-block: 0; }

@media (max-width: 959px) {
	.more-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.more-work { padding-block: 56px; }
	.more-work__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* -- Awards ---------------------------------------------------------------- */
.awards {
	border-top: 1px solid var(--wp--preset--color--divider-dark-2);
	padding: clamp(64px, 8vw, 104px) var(--wp--preset--spacing--gutter);
}
.awards__grid { display: flex; flex-wrap: wrap; gap: 32px 72px; align-items: flex-start; }
.awards__intro { flex: 1 1 260px; }
.awards__statement { margin-top: 20px; font-family: var(--wp--preset--font-family--display); font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -.01em; }
.awards__statement em { font-weight: 300; }
.awards__note { margin-top: 12px; font-size: 15px; color: var(--wp--preset--color--on-dark-muted); }
.awards__list { flex: 2 1 520px; min-width: 0; border-bottom: 1px solid var(--wp--preset--color--divider-dark); }
.awards__group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 8px 32px;
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--divider-dark);
}
.awards__name { font-family: var(--wp--preset--font-family--display); font-size: 24px; line-height: 1.2; }
.awards__group .awards__entries { grid-column: span 2; }
.awards__entries { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.awards__entries li { display: flex; justify-content: space-between; gap: 16px; }
.awards__org,
.awards__year,
.awards__summary-list { color: var(--wp--preset--color--on-dark-muted); }
.awards__more { border-top: 1px solid var(--wp--preset--color--divider-dark); }
.awards__more summary {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: baseline;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}
.awards__more summary::-webkit-details-marker { display: none; }
.awards__summary { font-size: 14px; font-weight: 500; }
.awards__summary-list { font-weight: 300; }
.awards__mark { flex: none; width: 16px; text-align: center; font-size: 20px; line-height: 1; color: var(--wp--preset--color--accent); }
.awards__mark::before { content: "+"; }
.awards__more[open] .awards__mark::before { content: "–"; }
.awards__more .awards__entries { padding-bottom: 20px; }

/* -- Bridge with a statement heading (the list variant is .home-bridge) ---- */
.bridge__grid--statement { gap: 40px 80px; }
.bridge__title { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.bridge__title em { font-weight: 300; color: var(--wp--preset--color--accent); }

/* Grid and stack containers are wp:group blocks, so core's flow-layout block
   gap would add a top margin to every child but the first. Spacing comes
   from the container's gap instead. Kept last so it wins over
   the margin-top of the type helpers above. */
.page-hero > *,
.page-hero__head > *,
.split > *,
.stack > *,
.note-columns > *,
.tag-row > *,
.awards__grid > *,
.bridge__grid > *,
.bridge__links > * { margin-block: 0; }

/* ==========================================================================
   Home page
   ========================================================================== */

/* -- Hero ----------------------------------------------------------------
   Ambient motion is deliberately split between cheap compositor layers and
   one small, frame-capped particle canvas. */
.home-hero {
	position: relative;
	min-height: min(92vh, 880px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-inline: var(--wp--preset--spacing--gutter);
}
/* Core's is-layout-flow block-gap gives every child but the DOM's first a
   margin-block-start; for the stage/grain/scrim/animus layers here (all
   position:absolute, inset:0) that margin stacks on top of the inset and
   shifts them down, leaving the first child's layer exposed above them. */
.home-hero > * { margin-block-start: 0; }
.home-hero + .home-paradox { margin-block-start: 0; }
.home-hero__artwork {
	position: absolute;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
}
.home-hero__stage {
	position: absolute;
	inset: 0;
	transform: perspective(1200px) rotateY(calc(var(--jvh-mx, 0) * 1.15deg)) rotateX(calc(var(--jvh-my, 0) * -0.8deg));
	transform-origin: center;
	will-change: transform;
}
.home-hero__bg,
.home-hero__statue {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 32% 50%;
	background-repeat: no-repeat;
	will-change: transform;
}
.home-hero__bg {
	transform: translate3d(calc(var(--jvh-mx, 0) * -4px), calc(var(--jvh-my, 0) * -2.5px), 0) scale(1.06);
}
/* The statue layer must scale from the same origin (center) as the bg layer
   underneath it, or the two drift apart as they scale — hence the wrapper.
   Only the statue's own subtle skew/stretch is anchored at its base point. */
.home-hero__statue-wrap {
	position: absolute;
	inset: 0;
	transform: translate3d(calc(var(--jvh-mx, 0) * -4px), calc(var(--jvh-my, 0) * -2.5px), 0) scale(1.06);
	will-change: transform;
}
.home-hero__statue {
	transform-origin: var(--jvh-ax, 30%) var(--jvh-ay, 88%);
	transform: skewX(calc(var(--jvh-mx, 0) * 0.55deg)) scaleY(calc(1 + var(--jvh-my, 0) * 0.007));
}
/* Homepage raster-halftone experiment. CSS backgrounds remain the fallback;
   JS suppresses them only after both canvases have rendered successfully. */
.home-hero__raster-halftone {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}
.home-hero__bg.is-halftone-ready,
.home-hero__statue.is-halftone-ready { background-image: none !important; }
.is-halftone-ready > .home-hero__raster-halftone { opacity: 1; }
.home-hero__dust {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
/* -- Animus: a faint architectural line-art overlay that pulses through
   regions (pillars, floor, center statue, etc.) via masked opacity sweeps.
   Ported from the design's .jvh-animus system; see assets/images/animus.svg. */
.jvh-animus {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--jvh-animus-opacity, .11);
	transform: translate3d(calc(var(--jvh-mx, 0) * -4px), calc(var(--jvh-my, 0) * -2.5px), 0) scale(1.06);
}
/* Lightweight Animus: one cached SVG and one compositor-friendly mask swipe.
   The legacy selectors keep already-saved block markup efficient too.
   Opacity raised from the original .09/.11 — the scrim it sits under
   (or, for the dust/grain layers, paints over) was washing these nearly
   out, so the base strength needs to be higher for them to read at all. */
.jvh-animus {
	opacity: var(--jvh-animus-opacity, .18);
	mix-blend-mode: screen;
}
.jvh-animus > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 32% 50%;
}
.jvh-animus-group,
.jvh-animus-group img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.jvh-animus-group {
	opacity: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.45) 28%, #000 50%, rgba(0,0,0,.45) 72%, transparent);
	mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.45) 28%, #000 50%, rgba(0,0,0,.45) 72%, transparent);
	-webkit-mask-position: 0 170%;
	mask-position: 0 170%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 34%;
	mask-size: 100% 34%;
}
.jvh-animus-group img {
	object-fit: cover;
	object-position: 32% 50%;
}
.jvh-animus-group--left { clip-path: inset(0 62% 0 0); }
.jvh-animus-group--right { clip-path: inset(0 0 0 62%); }
.jvh-animus-group--floor { clip-path: inset(72% 0 0); }
.jvh-animus-group--pillars { clip-path: polygon(7% 14%,25% 14%,25% 88%,7% 88%,7% 14%,72% 10%,91% 10%,91% 88%,72% 88%); }
.jvh-animus-group--center { clip-path: inset(45% 42% 14% 41%); }
.jvh-animus-group--full { clip-path: inset(3% 2% 4%); }
.jvh-animus-group--pulse { animation: jvhAnimusBottomTop var(--jvh-animus-duration, 1700ms) linear var(--jvh-animus-delay, 0ms) 1 both; }
.jvh-animus[data-animus-sweep="top-bottom"] .jvh-animus-group--pulse { animation-name: jvhAnimusTopBottom; }
.jvh-animus[data-animus-sweep="left-right"] .jvh-animus-group,
.jvh-animus[data-animus-sweep="right-left"] .jvh-animus-group { -webkit-mask-image: linear-gradient(to right,transparent,rgba(0,0,0,.45) 28%,#000 50%,rgba(0,0,0,.45) 72%,transparent); mask-image: linear-gradient(to right,transparent,rgba(0,0,0,.45) 28%,#000 50%,rgba(0,0,0,.45) 72%,transparent); -webkit-mask-size: 34% 100%; mask-size: 34% 100%; }
.jvh-animus[data-animus-sweep="left-right"] .jvh-animus-group--pulse { animation-name: jvhAnimusLeftRight; }
.jvh-animus[data-animus-sweep="right-left"] .jvh-animus-group--pulse { animation-name: jvhAnimusRightLeft; }
.jvh-animus[data-animus-sweep="center-out"] .jvh-animus-group,
.jvh-animus[data-animus-sweep="out-center"] .jvh-animus-group { -webkit-mask-image: radial-gradient(circle,transparent,rgba(0,0,0,.45) 30%,#000 50%,rgba(0,0,0,.45) 70%,transparent); mask-image: radial-gradient(circle,transparent,rgba(0,0,0,.45) 30%,#000 50%,rgba(0,0,0,.45) 70%,transparent); -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
.jvh-animus[data-animus-sweep="center-out"] .jvh-animus-group--pulse { animation-name: jvhAnimusCenterOut; }
.jvh-animus[data-animus-sweep="out-center"] .jvh-animus-group--pulse { animation-name: jvhAnimusOutCenter; }
@keyframes jvhAnimusBottomTop { 0% { opacity:0; mask-position:0 170%; -webkit-mask-position:0 170%; } 8% { opacity:1; } 92% { opacity:1; mask-position:0 -170%; -webkit-mask-position:0 -170%; } 100% { opacity:0; mask-position:0 -170%; -webkit-mask-position:0 -170%; } }
@keyframes jvhAnimusTopBottom { 0% { opacity:0; mask-position:0 -170%; -webkit-mask-position:0 -170%; } 8% { opacity:1; } 92% { opacity:1; mask-position:0 170%; -webkit-mask-position:0 170%; } 100% { opacity:0; mask-position:0 170%; -webkit-mask-position:0 170%; } }
@keyframes jvhAnimusLeftRight { 0% { opacity:0; mask-position:-170% 0; -webkit-mask-position:-170% 0; } 8% { opacity:1; } 92% { opacity:1; mask-position:170% 0; -webkit-mask-position:170% 0; } 100% { opacity:0; mask-position:170% 0; -webkit-mask-position:170% 0; } }
@keyframes jvhAnimusRightLeft { 0% { opacity:0; mask-position:170% 0; -webkit-mask-position:170% 0; } 8% { opacity:1; } 92% { opacity:1; mask-position:-170% 0; -webkit-mask-position:-170% 0; } 100% { opacity:0; mask-position:-170% 0; -webkit-mask-position:-170% 0; } }
@keyframes jvhAnimusCenterOut { 0% { opacity:0; mask-size:8% 8%; -webkit-mask-size:8% 8%; } 8%,92% { opacity:1; } 50% { mask-size:190% 190%; -webkit-mask-size:190% 190%; } 100% { opacity:0; mask-size:8% 8%; -webkit-mask-size:8% 8%; } }
@keyframes jvhAnimusOutCenter { 0% { opacity:0; mask-size:190% 190%; -webkit-mask-size:190% 190%; } 8%,92% { opacity:1; } 50% { mask-size:8% 8%; -webkit-mask-size:8% 8%; } 100% { opacity:0; mask-size:190% 190%; -webkit-mask-size:190% 190%; } }

/* Light shafts and fog are gradients, so no large beam canvas is rebuilt. */
.home-hero__stage::before {
	content: '';
	position: absolute;
	inset: -8%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(103deg, transparent 34%, rgba(229,214,181,.22) 45%, rgba(218,202,169,.06) 61%, transparent 70%);
	mix-blend-mode: screen;
	animation: jvhLightBreathe 9s ease-in-out infinite alternate;
	will-change: opacity, transform;
}
.home-hero__atmosphere {
	position: absolute;
	inset: -8%;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 42% 52% at 47% 38%, rgba(212,196,164,.17), transparent 72%),
		radial-gradient(ellipse 55% 38% at 38% 80%, rgba(180,166,140,.12), transparent 74%);
	mix-blend-mode: screen;
	animation: jvhLightBreathe 9s ease-in-out infinite alternate;
	will-change: opacity, transform;
}
@keyframes jvhLightBreathe {
	from { opacity: .72; transform: translate3d(-.6%, .3%, 0); }
	to { opacity: 1; transform: translate3d(.8%, -.4%, 0); }
}

.home-hero__fog {
	position: absolute;
	inset: -25%;
	mix-blend-mode: screen;
	will-change: transform;
}
.home-hero__fog--1 { background: radial-gradient(ellipse 40% 55% at 46% 38%, rgba(212,196,164,.10), rgba(212,196,164,0) 70%); }
.home-hero__fog--2 { background: radial-gradient(ellipse 55% 40% at 38% 78%, rgba(180,166,140,.07), rgba(180,166,140,0) 72%); }
/* Native-size repeating tiles keep the grain fine without regenerating a
   full-screen pixel buffer every frame. */
.home-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: .025;
	background-image: url('../images/noise.svg');
	background-repeat: repeat;
	mix-blend-mode: normal;
	filter: contrast(1.15);
}
@keyframes jvhNoiseShift {
	0% { transform: translate3d(-3%, 2%, 0); }
	25% { transform: translate3d(2%, -4%, 0); }
	50% { transform: translate3d(4%, 3%, 0); }
	75% { transform: translate3d(-2%, -3%, 0); }
	100% { transform: translate3d(-3%, 2%, 0); }
}
.home-hero__film {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.home-hero__film::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* One hairline scratch crosses the gate only occasionally; its horizontal
   position is changed by JS between appearances. */
.home-hero__film::after {
	inset: -4% auto -4% var(--jvh-scratch-x, 74%);
	width: 1px;
	background: rgba(240,237,232,.18);
	box-shadow: 1px 0 rgba(13,13,13,.2);
	opacity: 0;
	transform: rotate(var(--jvh-scratch-angle, .08deg));
}
.home-hero__film.is-scratched::after { animation: jvhFilmScratch 180ms steps(2, end) 1; }
.home-hero__composite-negative,
.home-hero__composite-burn {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.home-hero__composite-negative {
	z-index: 5;
	background: #fff;
	mix-blend-mode: difference;
	opacity: var(--hero-negative, 0);
}
.home-hero__composite-burn {
	z-index: 6;
	background: var(--wp--preset--color--paper);
	mix-blend-mode: screen;
	opacity: var(--hero-burn, 0);
}
.home-hero__luma-warm,
.home-hero__luma-inverted,
.home-hero__luma-shadows,
.home-hero__luma-paper {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.home-hero__luma-warm {
	z-index: 5;
	background: rgba(183, 155, 112, .1);
	-webkit-backdrop-filter: saturate(.24) sepia(.34) contrast(.92) brightness(1.04);
	backdrop-filter: saturate(.24) sepia(.34) contrast(.92) brightness(1.04);
	opacity: var(--hero-luma-warm, 0);
}
.home-hero__luma-inverted {
	z-index: 6;
	background: rgba(240, 237, 232, .01);
	-webkit-backdrop-filter: grayscale(.9) invert(1) brightness(var(--hero-luma-threshold, 1.85)) contrast(2.2);
	backdrop-filter: grayscale(.9) invert(1) brightness(var(--hero-luma-threshold, 1.85)) contrast(2.2);
	mix-blend-mode: darken;
	opacity: var(--hero-luma-inverted, 0);
}
.home-hero__luma-shadows {
	z-index: 7;
	background: rgba(240, 237, 232, .01);
	-webkit-backdrop-filter: grayscale(.9) invert(1) contrast(1.3);
	backdrop-filter: grayscale(.9) invert(1) contrast(1.3);
	mix-blend-mode: lighten;
	opacity: var(--hero-luma-shadows, 0);
}
.home-hero__luma-paper {
	z-index: 8;
	background: var(--wp--preset--color--paper);
	mix-blend-mode: screen;
	opacity: var(--hero-luma-paper, 0);
}
@keyframes jvhFilmScratch {
	0%, 100% { opacity: 0; }
	24%, 72% { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
	.home-hero__stage,
	.home-hero__bg,
	.home-hero__statue {
		transform: none;
	}
	.home-hero__fog,
	.home-hero__stage::before,
	.home-hero__atmosphere,
	.home-hero__dust {
		display: none;
	}
	.home-hero__grain { animation: none; transform: none; }
	.home-hero__film::after { animation: none; opacity: 0; }
	.home-hero__composite-negative,
	.home-hero__composite-burn,
	.home-hero__luma-warm,
	.home-hero__luma-inverted,
	.home-hero__luma-shadows,
	.home-hero__luma-paper { display: none; }
	.jvh-animus { animation: none; opacity: .12; -webkit-mask-image: none; mask-image: none; }
}

/* Shared depth/noise treatment for image heroes outside the front page. */
.single-case__hero,
.wp-block-cover.is-style-hero,
[data-jvh-image-hero] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.single-case__hero img,
.wp-block-cover.is-style-hero .wp-block-cover__image-background,
[data-jvh-image-hero] img {
	transform: perspective(1200px) translate3d(calc(var(--jvh-mx, 0) * -7px), calc(var(--jvh-my, 0) * -5px), 0) scale(1.025) rotateY(calc(var(--jvh-mx, 0) * 1deg)) rotateX(calc(var(--jvh-my, 0) * -.7deg));
	transform-origin: center;
	will-change: transform;
}
.single-case__hero::after,
.wp-block-cover.is-style-hero::after,
[data-jvh-image-hero]::after {
	content: '';
	position: absolute;
	inset: -18%;
	z-index: 2;
	pointer-events: none;
	opacity: .058;
	background: url('../images/noise.svg') repeat;
	mix-blend-mode: soft-light;
	animation: jvhNoiseShift 1.05s steps(2, end) infinite;
}
@media (max-width: 720px) {
	.home-hero { min-height: min(100svh, 780px); }
	.home-hero__stage { transform: none; }
	.home-hero__bg,
	.home-hero__statue-wrap,
	.jvh-animus { transform: scale(1.035); }
	.home-hero__grain { opacity: .02; }
	.home-hero__atmosphere { animation-duration: 12s; }
	.single-case__hero::after,
	.wp-block-cover.is-style-hero::after,
	[data-jvh-image-hero]::after { animation-duration: 1.45s; opacity: .045; }
}
.home-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(13,13,13,.12), rgba(13,13,13,.12)),
		linear-gradient(90deg, rgba(13,13,13,.86) 0%, rgba(13,13,13,.55) 48%, rgba(13,13,13,.12) 100%),
		linear-gradient(0deg, rgba(13,13,13,.9), rgba(13,13,13,0) 40%);
}
.home-hero__inner {
	position: relative;
	z-index: 9;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
	padding-block: clamp(128px, 14vw, 200px) clamp(48px, 6vw, 80px);
}
.home-hero__title {
	margin-top: 24px;
	text-wrap: pretty;
}
.home-hero__title em { font-weight: 300; font-style: italic; }
.home-hero__lede { margin-top: 32px; max-width: 48ch; font-family: var(--wp--preset--font-family--display); font-size: clamp(24px, 2.5vw, 32px); line-height: 1.3; }
.home-hero__meta-row {
	margin-top: var(--wp--preset--spacing--gap-md);
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(240,237,232,.22);
	padding-top: 24px;
}
.home-hero__tagline { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-secondary); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.home-hero__actions .link-ghost { color: var(--wp--preset--color--paper); padding: 16px 0; }

/* -- Product paradox ------------------------------------------------------- */
.home-paradox__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 80px;
	align-items: end;
}
.home-paradox__body { color: var(--wp--preset--color--on-light-secondary); max-width: 46ch; }
.home-paradox .eyebrow,
.home-paradox__head h2 em { color: var(--wp--preset--color--accent); }
.home-paradox__head h2 { margin-top: 20px; text-wrap: balance; }
.home-paradox__body p { text-wrap: pretty; }
.home-paradox__panel {
	margin-top: var(--wp--preset--spacing--gap-lg);
	border-top: 3px solid var(--wp--preset--color--accent);
	padding-top: clamp(32px, 4vw, 48px);
}
.home-paradox__panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 24px;
	align-items: center;
	background: var(--wp--preset--color--white);
}
.home-paradox__img { position: relative; z-index: 1; width: 100%; aspect-ratio: 945/1536; max-height: 520px; overflow: hidden; clip-path: inset(0); margin: 0; }
.home-paradox__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Both source photos face outward (left panel looks left, right panel
   looks right) — away from the copy between them. The mirror itself
   lives in paradox-reveal.js (innermost in the img's transform chain)
   so it flips the pixels without inverting the scroll-driven translate
   that the script also applies to the same element. */
/* Each crop has the nose right at its edge. Keep the figure narrower and
   pinned to its outer edge, but let the transformed image extend into the
   white centre instead of clipping the face at the figure boundary. */
.home-paradox__img:first-of-type { width: 85%; }
.home-paradox__img:last-of-type { width: 85%; justify-self: end; }
.home-paradox__panel-text { position: relative; z-index: 1; padding: 0 clamp(0px, 2vw, 24px); color: var(--wp--preset--color--on-light-secondary); }
.home-paradox__panel-text h3 { text-wrap: balance; }
.home-paradox__panel-text > p { margin-top: 16px; text-wrap: pretty; }
.home-paradox__pullline { margin-top: 16px; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 22px; line-height: 1.35; }

@media (min-width: 900px) {
	.home-paradox__img { overflow: visible; }
	.home-paradox__img:first-of-type { clip-path: inset(0 -18% 0 0); }
	.home-paradox__img:last-of-type { clip-path: inset(0 0 0 -18%); }
}

/* -- Where I get involved --------------------------------------------------- */
.home-involved__head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; }
.home-involved__head > .wp-block-group { max-width: 680px; }
.home-involved__head h2 { margin-top: 20px; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.home-involved__intro { max-width: 380px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); }
:lang(fi) .home-involved__intro { max-width: 60ch; }
.home-involved__head > .wp-block-group .home-involved__intro { margin-top: 24px; }
.home-involved__list { margin-top: var(--wp--preset--spacing--gap-md); padding: 0; list-style: none; border-bottom: 1px solid var(--wp--preset--color--divider-dark); }
.home-involved__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 48px; padding: 32px 0; border-top: 1px solid var(--wp--preset--color--divider-dark); align-items: baseline; }
.home-involved__num-head { display: flex; gap: 20px; align-items: baseline; }
.home-involved__num { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--wp--preset--color--accent); }
.home-involved__row h3 { font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.02em; }
.home-involved__meta { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-muted); }
.home-involved__desc { font-size: 16px; font-weight: 300; line-height: 1.6; }

/* -- Cost of complexity ------------------------------------------------------ */
.home-complexity > .eyebrow,
.home-complexity > h2 em { color: var(--wp--preset--color--accent); }
.home-complexity > h2 { margin-top: 24px; font-size: clamp(48px, 7.4vw, 108px); line-height: 1; letter-spacing: -.035em; }
.home-complexity__grid { margin-top: var(--wp--preset--spacing--gap-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 80px; align-items: start; }
.home-complexity__intro { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-light-secondary); max-width: 42ch; }
.home-complexity__list { margin-top: 24px; padding: 0; list-style: none; border-bottom: 1px solid var(--wp--preset--color--on-dark-secondary); }
.home-complexity__list li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--on-dark-secondary); align-items: baseline; font-family: var(--wp--preset--font-family--display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.home-complexity__list .home-complexity__num { font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; color: var(--wp--preset--color--accent); }
.home-complexity__followup { margin-top: 24px; font-size: 17px; font-weight: 300; line-height: 1.5; max-width: 42ch; }
.home-complexity__panel { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding: clamp(28px, 4vw, 44px); }
.home-complexity__panel-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-muted); }
.home-complexity__dl { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 28px; }
.home-complexity__dl > div { border-top: 1px solid var(--wp--preset--color--divider-dark-2); padding: 12px 0; }
.home-complexity__dl dt { font-family: var(--wp--preset--font-family--display); font-size: 21px; }
.home-complexity__dl dd { margin: 2px 0 0; font-size: 13px; font-weight: 300; color: var(--wp--preset--color--on-dark-muted); }
.home-complexity__panel-text { margin-top: 24px; font-size: 15px; font-weight: 300; line-height: 1.65; }
.home-complexity__panel-link { margin-top: 20px; color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--divider-dark); padding: 14px 20px; }

/* -- Proof (testimonials) ---------------------------------------------------- */
.home-proof__eyebrow { color: var(--wp--preset--color--on-dark-muted); }
.home-proof__heading { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.06; text-wrap: balance; }
.home-proof__grid { margin-top: var(--wp--preset--spacing--gap-md); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 80px; }
.home-proof__grid > .home-proof__item { margin-block-start: 0; }
.home-proof__item { border-top: 1px solid var(--wp--preset--color--divider-dark); padding-top: 28px; display: flex; flex-direction: column; gap: 24px; }
.home-proof__kicker { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.home-proof__quote { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.01em; }
.home-proof__quote em { font-weight: 300; font-style: italic; }
.home-proof__cite { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 18px; align-items: center; }
.home-proof__cite img { width: 72px; height: 72px; object-fit: cover; filter: grayscale(1); background: var(--wp--preset--color--ink-raised); border-radius: 50%; }
.home-proof__cite-text { font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--on-dark-muted); }
.home-proof__cite-text strong { display: block; font-weight: 500; color: var(--wp--preset--color--paper); }

/* -- Product storytelling ---------------------------------------------------- */
.home-storytelling .eyebrow,
.home-storytelling__grid h2 em { color: var(--wp--preset--color--accent); }
.home-storytelling__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 80px; align-items: start; }
.home-storytelling__grid h2 { margin-top: 20px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.home-storytelling__intro { margin-top: 24px; font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-light-secondary); max-width: 40ch; }
.home-storytelling__list { border-bottom: 1px solid var(--wp--preset--color--divider-light); }
.home-storytelling__item { border-top: 1px solid var(--wp--preset--color--black); padding: 24px 0; }
.home-storytelling__item:not(:first-child) { border-top-color: var(--wp--preset--color--divider-light); }
.home-storytelling__item h3 { font-weight: 500; font-size: 28px; line-height: 1.15; }
.home-storytelling__item-meta { margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; color: var(--wp--preset--color--on-light-muted); }
.home-storytelling__item p.home-storytelling__item-desc { margin-top: 12px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--on-light-secondary); }

/* -- AI tools (FI only) ------------------------------------------------------- */
.home-ai__eyebrow { color: var(--wp--preset--color--on-dark-muted); }
.home-ai__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 80px; align-items: start; }
.home-ai__head h2 { margin-top: 20px; text-wrap: balance; }
.home-ai__head h2 em { font-weight: 300; font-style: italic; }
.home-ai__support { margin-top: 24px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--on-dark-muted); max-width: 34ch; }
.home-ai__body { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-dark-secondary); max-width: 48ch; }
.home-ai__statement { margin-top: 32px; border-top: 1px solid var(--wp--preset--color--divider-dark); padding-top: 32px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.3; letter-spacing: -.02em; max-width: 48ch; }
.home-ai__statement em { font-weight: 300; font-style: italic; }

/* -- About ------------------------------------------------------------------- */
.home-about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px 80px; align-items: center; }
.home-about__img { position: relative; width: 100%; max-width: 440px; margin: 0; /* no UA figure margin: it pushed the image 40px off-grid and overflowed at 375px */ aspect-ratio: 4/5; overflow: hidden; background: var(--wp--preset--color--ink-raised); }
.home-about__img img,
img.home-about__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; }
.home-about__halftone { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; filter: grayscale(1) contrast(1.05); }
.home-about__img.is-halftone-ready > .home-about__halftone { opacity: 1; }
.home-about__lede { margin-top: 24px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -.02em; }
.home-about__lede em { font-weight: 300; font-style: italic; }
.home-about__notes { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.home-about__notes > p { margin-block-start: 0; border-top: 1px solid var(--wp--preset--color--divider-dark); padding-top: 18px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); }
.home-about__notes strong { font-weight: 600; color: var(--wp--preset--color--paper); }
.home-about__signature { margin-top: 32px; }
.home-about__signature-svg { display: block; width: 100%; max-width: 260px; height: auto; }
.home-about__signature-path { fill: none; stroke: var(--wp--preset--color--paper); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; }
@media (prefers-reduced-motion: reduce) {
	.home-about__signature-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
}

@media (max-width: 859px) {
	.home-proof__grid,
	.home-about__notes { grid-template-columns: minmax(0, 1fr); }
}

/* -- Bridge ------------------------------------------------------------------ */
.home-bridge__grid,
.bridge__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 80px; align-items: end; }
.home-bridge__kicker { color: var(--wp--preset--color--accent); }
.home-bridge__list { margin-top: 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-family: var(--wp--preset--font-family--display); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.25; }
.home-bridge__list li { display: flex; gap: 14px; }
.home-bridge__list li::before { content: "–"; color: var(--wp--preset--color--accent); }
.home-bridge__links,
.bridge__links { border-bottom: 1px solid var(--wp--preset--color--black); }

.cta-link-row {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 6px 20px;
	align-items: baseline;
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--black);
	text-decoration: none;
	color: var(--wp--preset--color--black);
}
.cta-link-row:nth-child(2) { border-top-color: var(--wp--preset--color--divider-light); }
.cta-link-row:hover { color: var(--wp--preset--color--accent); }
.cta-link-row__title { display: block; font-family: var(--wp--preset--font-family--display); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; color: inherit; }
.cta-link-row__desc { display: block; margin-top: 4px; font-size: 15px; font-weight: 300; color: var(--wp--preset--color--on-light-muted); }
.cta-link-row__arrow { color: var(--wp--preset--color--accent); font-size: 22px; }

/* On dark sections (hero, involved, proof, about) list/eyebrow defaults
   assume paper-on-ink; on light sections (paradox, complexity, storytelling,
   bridge) text is set to ink-on-paper via the section classes above. */

/* ==========================================================================
   Shared additions for the Field Notes, article and case-study templates
   ========================================================================== */

/* Generic helpers used by several of the components below. */
[data-notes-archive] [hidden] { display: none !important; }
.eyebrow__sep { color: var(--wp--preset--color--divider-dark); }
h2.eyebrow { font-family: var(--wp--preset--font-family--body); line-height: 1.3; }
.media-link__img--3x2 { aspect-ratio: 3 / 2; }
.link-ghost--arrow { gap: 12px; }
.link-ghost--arrow [aria-hidden] { color: var(--wp--preset--color--accent); font-size: 16px; letter-spacing: 0; }
.anchor-index__count { font-size: 12px; font-weight: 500; color: var(--wp--preset--color--on-dark-muted); }

/* Reading progress along the bottom of the condensed header bar (articles
   and case studies only; created by header.js). */
.site-header__bar { position: relative; }
.site-header__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.site-header.is-scrolled .site-header__progress { opacity: 1; }

/* Dark list of CTA rows: the light .cta-link-row on ink. */
.bridge--dark .bridge__links,
.note-continue__list { border-bottom: 1px solid var(--wp--preset--color--divider-dark); }
.bridge--dark .cta-link-row,
.note-continue .cta-link-row { border-top-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--paper); transition: border-color .2s ease; }
.bridge--dark .cta-link-row:nth-child(n+2),
.note-continue .cta-link-row { border-top-color: var(--wp--preset--color--divider-dark); }
.bridge--dark .cta-link-row:hover,
.note-continue .cta-link-row:hover { color: var(--wp--preset--color--paper); border-top-color: var(--wp--preset--color--accent); }
.bridge--dark .cta-link-row__desc,
.note-continue .cta-link-row__desc { color: var(--wp--preset--color--on-dark-muted); }
.bridge--dark .bridge__title em { color: inherit; }

/* Closing line under articles and case studies. */
.closing-line {
	margin-top: clamp(56px, 7vw, 88px);
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--divider-dark-2);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	align-items: baseline;
	justify-content: space-between;
}
.closing-line__text { font-family: var(--wp--preset--font-family--display); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; color: var(--wp--preset--color--on-dark-secondary); }
.closing-line__text em { font-weight: 300; }
.closing-line .link-ghost { color: var(--wp--preset--color--paper); }

/* Short date / read-time line. */
.notes-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--wp--preset--color--on-dark-muted); }
.notes-meta__sep { color: var(--wp--preset--color--divider-dark); }

/* -- Field Notes: intro ---------------------------------------------------- */
.notes-hero { padding-bottom: clamp(40px, 5vw, 56px); }
.notes-hero .page-hero__fog { background: radial-gradient(ellipse 38% 50% at 62% 40%, rgba(212,196,164,.08), rgba(212,196,164,0) 70%); }
.notes-hero .page-hero__scrim {
	background:
		linear-gradient(0deg, var(--wp--preset--color--ink) 8%, rgba(13,13,13,0) 55%),
		linear-gradient(90deg, rgba(13,13,13,.88) 0%, rgba(13,13,13,.6) 45%, rgba(13,13,13,.1) 100%);
}
.page-hero__bg.notes-hero__bg { background-position: 70% 30%; transform: translate3d(calc(var(--jvh-mx, 0) * -5px), calc(var(--jvh-my, 0) * -3px), 0) scale(1.06); }
.notes-hero__intro { max-width: 40ch; }
.notes-hero__intro > * { margin-block: 0; }
.notes-hero__lede { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-dark-secondary); text-wrap: pretty; }
.notes-hero__intro .notes-hero__aside { margin-top: 10px; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.3; }
.notes-hero .anchor-index__desc { font-weight: 300; line-height: 1.5; text-wrap: pretty; }
.notes-hero .anchor-index__count { color: var(--wp--preset--color--accent); }
.notes-hero .anchor-index__link:hover { border-top-color: var(--wp--preset--color--accent); }

/* -- Field Notes: featured note -------------------------------------------- */
.notes-featured { padding: clamp(16px, 2vw, 24px) var(--wp--preset--spacing--gutter) clamp(72px, 9vw, 112px); }
.notes-featured__grid {
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 64px;
	align-items: center;
}
.notes-featured .media-link { outline: 1px solid var(--wp--preset--color--divider-dark-2); outline-offset: -1px; }
.notes-featured__eyebrow { flex-wrap: wrap; gap: 8px 12px; }
.notes-featured__title a { color: var(--wp--preset--color--paper); text-decoration: none; }
.notes-featured__title a:hover { color: var(--wp--preset--color--paper); text-decoration: underline; text-decoration-thickness: 1px; }
.notes-featured__deck { margin-top: 20px; color: var(--wp--preset--color--on-dark-secondary); }
.notes-featured__cta { margin-top: 28px; }
.notes-featured__cta .btn-primary { gap: 12px; }
.notes-featured__cta .btn-primary [aria-hidden] { font-size: 16px; letter-spacing: 0; }

/* -- Field Notes: archive -------------------------------------------------- */
.notes-archive { padding-top: clamp(64px, 8vw, 112px); }
.notes-archive__inner { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; }
.notes-archive__head { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-end; justify-content: space-between; }
.notes-archive__eyebrow { color: var(--wp--preset--color--accent); }
.notes-archive__title { margin-top: 16px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.notes-archive__title em { font-weight: 300; }

.notes-search {
	flex: 1 1 300px;
	max-width: 440px;
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid var(--wp--preset--color--black);
	padding: 10px 0;
	cursor: text;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.notes-search:focus-within { border-bottom-color: var(--wp--preset--color--accent); box-shadow: 0 1px 0 var(--wp--preset--color--accent); }
.notes-search__label { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--subtle); }
.notes-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--black);
	-webkit-appearance: none;
	appearance: none;
}
.notes-search__input:focus { outline: none; }
.notes-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.notes-search__clear {
	flex: none;
	padding: 6px 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.notes-search__key { flex: none; font: inherit; font-size: 12px; color: var(--wp--preset--color--subtle); border: 1px solid var(--wp--preset--color--divider-light); padding: 1px 7px; }

.notes-chips {
	flex: 1 0 100%;
	margin: clamp(0px, 1vw, 12px) calc(-1 * var(--wp--preset--spacing--gutter)) 0;
	padding: 0 var(--wp--preset--spacing--gutter);
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.notes-chips::-webkit-scrollbar { display: none; }
.notes-chip {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--divider-light);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--wp--preset--color--black);
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.notes-chip:hover { border-color: var(--wp--preset--color--black); }
.notes-chip[aria-pressed="true"] { border-color: var(--wp--preset--color--black); background: var(--wp--preset--color--black); color: var(--wp--preset--color--paper); font-weight: 500; }
.notes-chip__count { font-size: 12px; color: var(--wp--preset--color--subtle); }
.notes-chip[aria-pressed="true"] .notes-chip__count { color: var(--wp--preset--color--on-dark-muted); }

.notes-status {
	margin-top: 24px;
	border-top: 1px solid var(--wp--preset--color--black);
	padding: 14px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	font-size: 13px;
	color: var(--wp--preset--color--on-light-secondary);
}
.notes-status__reset { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--accent); }

.notes-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--wp--preset--color--on-dark-secondary); }
.notes-list__item { border-top: 1px solid var(--wp--preset--color--on-dark-secondary); }
.notes-list__link {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	align-items: baseline;
	padding: 28px 0;
	text-decoration: none;
	color: var(--wp--preset--color--black);
}
.notes-list__link:hover { color: var(--wp--preset--color--accent); }
.notes-list__meta { flex: 0 0 168px; display: flex; flex-direction: column; gap: 6px; }
.notes-list__topic { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.notes-list__date { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--wp--preset--color--subtle); }
.notes-list__body { flex: 1 1 360px; min-width: 0; display: flex; gap: 24px; align-items: baseline; justify-content: space-between; }
.notes-list__text { min-width: 0; }
.notes-list__title { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.notes-list__deck { display: block; margin-top: 10px; max-width: 62ch; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--on-light-secondary); text-wrap: pretty; }
.notes-list__arrow { flex: none; font-size: 22px; color: var(--wp--preset--color--accent); }

.notes-empty { padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--wp--preset--color--on-dark-secondary); }
.notes-empty__title { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.25; }
.notes-empty__hint { margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--wp--preset--color--on-light-secondary); }
.notes-empty__reset { margin-top: 24px; gap: 10px; color: var(--wp--preset--color--black); }
.notes-empty__reset [aria-hidden] { color: var(--wp--preset--color--accent); font-size: 16px; letter-spacing: 0; }

/* -- Long-form: article and case-study body -------------------------------- */
.longform-section {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--black);
	padding: clamp(48px, 6vw, 88px) var(--wp--preset--spacing--gutter) clamp(72px, 9vw, 120px);
	overflow-x: clip;
}
/* A case without a written story yet shows only its hero, credits and next case. */
.longform-section--case:not(:has(> .wp-block-post-content)) { display: none; }
.longform-section--case { padding: clamp(56px, 7vw, 104px) var(--wp--preset--spacing--gutter) clamp(72px, 9vw, 128px); }
.longform {
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1.6fr);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(21px, .5vw + 18.6px, 24px);
	font-weight: 400;
	line-height: 1.52;
	font-feature-settings: 'kern', 'liga', 'onum';
}
.longform > * { grid-column: 2; margin: 0; }
.longform > p { margin-top: .9em; text-wrap: pretty; }
.longform > p.longform__lead { margin-top: 0; margin-bottom: .5em; font-size: 1.36em; font-weight: 300; line-height: 1.36; letter-spacing: -.005em; text-wrap: pretty; }
.longform--case > p.longform__lead { margin-bottom: 0; font-size: 1.3em; line-height: 1.38; }
.longform a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--black); text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: 1px; }
.longform a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent); }

.longform > h2,
.longform__head { margin-top: clamp(72px, 8vw, 120px); }
.longform h2 {
	grid-column: 2 / 4;
	max-width: min(100%, 640px);
	margin-bottom: .15em;
	font-size: clamp(36px, 4.2vw, 60px);
	line-height: 1.03;
	letter-spacing: -.025em;
	text-wrap: balance;
	scroll-margin-top: 96px;
}
.longform--case h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; }
.longform__head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.longform__head > h2 { margin-top: 0; }
.longform__year {
	grid-column: 1;
	justify-self: end;
	padding: .5em 28px 0 0;
	font-size: clamp(28px, 2.6vw, 36px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--accent);
}
.longform__year .eyebrow__mark { display: none; }

.longform h3,
.longform h4 {
	margin-top: clamp(48px, 5vw, 72px);
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--black);
	font-weight: 500;
	font-size: clamp(26px, 2.5vw, 34px);
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.longform--case h3,
.longform--case h4 { margin-top: clamp(40px, 4vw, 56px); padding-top: 16px; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.15; }
.longform h3.longform__numbered { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.longform__num { font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--wp--preset--color--accent); }

.longform__decision { grid-column: 1 / 3; display: grid; grid-template-columns: subgrid; margin-top: .9em; }
.longform__decision > .longform__decision-label {
	grid-column: 1;
	justify-self: end;
	padding: .42em 28px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--accent);
}
.longform__decision > .longform__decision-label::after { content: ''; width: 20px; height: 1px; background: var(--wp--preset--color--accent); }
.longform__decision > p.is-style-decision { grid-column: 2; margin: 0; padding-left: clamp(16px, 2vw, 24px); border-left: 1px solid var(--wp--preset--color--accent); text-wrap: pretty; }

.longform .wp-block-quote {
	margin: clamp(36px, 4vw, 52px) 0 clamp(20px, 2vw, 28px);
	padding: .1em 0 .15em clamp(20px, 3vw, 36px);
	border-left: 1px solid var(--wp--preset--color--subtle);
	font-style: italic;
	font-size: 1.24em;
	line-height: 1.32;
	letter-spacing: -.005em;
	text-wrap: balance;
}
.longform .wp-block-quote p { margin: 0; }
.longform .wp-block-quote p.note-stage-label {
	margin-top: 1.1em;
	margin-bottom: .35em;
	color: var(--wp--preset--color--on-light-muted);
}
.longform .wp-block-quote p.note-stage-label:first-child { margin-top: 0; }
.longform .wp-block-quote cite,
.longform .wp-block-pullquote cite { display: block; margin-top: 12px; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--wp--preset--color--on-light-muted); }

.longform .wp-block-pullquote {
	grid-column: 2 / 4;
	margin: clamp(40px, 4.4vw, 56px) 0 clamp(16px, 1.6vw, 24px);
	padding: 0;
	border: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-size: inherit;
}
.longform .wp-block-pullquote blockquote {
	margin: 0;
	max-width: 30ch;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 16px;
	align-items: baseline;
	font-weight: 300;
	font-size: clamp(28px, 2.9vw, 40px);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.longform .wp-block-pullquote blockquote::before { content: ''; width: 8px; height: 8px; background: var(--wp--preset--color--accent); transform: translateY(-.25em); }
.longform .wp-block-pullquote blockquote > * { grid-column: 2; margin: 0; font-size: inherit; line-height: inherit; }

.longform > ul,
.longform > ol { margin-top: 1.1em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45em; }
.longform > ul > li,
.longform > ol > li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); }
.longform > ul > li::before { content: '–'; color: var(--wp--preset--color--accent); }
.longform > ol > li::before { content: counter(list-item, decimal-leading-zero); align-self: baseline; font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; color: var(--wp--preset--color--accent); }
.longform > ol { counter-reset: list-item; }

/* Editorial decision sections: native disclosure widgets, styled as part of
   the article flow rather than as boxed FAQ cards. */
.longform > .wp-block-details {
	margin-top: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--divider-light);
}
.longform > .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--divider-light); }
.longform > .wp-block-details summary {
	position: relative;
	min-height: 64px;
	padding: 18px 40px 18px 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--black);
}
.longform > .wp-block-details summary::-webkit-details-marker { display: none; }
.longform > .wp-block-details summary::after {
	content: '+';
	position: absolute;
	top: 18px;
	right: 2px;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
}
.longform > .wp-block-details[open] summary::after { content: '−'; }
.longform > .wp-block-details summary:hover { color: var(--wp--preset--color--accent); }
.longform > .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}
.longform > .wp-block-details > :not(summary) { margin-right: 0; margin-left: 0; }
.longform > .wp-block-details > :last-child { margin-bottom: clamp(28px, 3vw, 40px); }

.longform .article-reference {
	font-family: var(--wp--preset--font-family--body);
	font-size: .72em;
	font-weight: 500;
	line-height: 1;
}
.longform .article-reference a { color: var(--wp--preset--color--accent); text-decoration: none; }
.longform .article-reference a:hover { text-decoration: underline; text-underline-offset: 3px; }
.longform .article-sources { font-family: var(--wp--preset--font-family--body); font-size: 14px; line-height: 1.6; }
.longform .article-sources li { margin-bottom: .7em; }

/* Copyable editorial prompts. The prompt stays a native Code block and is
   fully readable without JavaScript; the button is a progressive enhancement. */
.longform > .editorial-prompt {
	position: relative;
	margin-top: clamp(28px, 3vw, 40px);
	background: var(--wp--preset--color--paper-soft);
	border-top: 3px solid var(--wp--preset--color--accent);
}
.editorial-prompt .wp-block-code {
	margin: 0;
	padding: clamp(24px, 3vw, 36px);
	padding-top: clamp(68px, 7vw, 76px);
	border: 1px solid var(--wp--preset--color--divider-light);
	border-top: 0;
	overflow: visible;
	background: transparent;
}
.editorial-prompt .wp-block-code code {
	display: block;
	padding: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: clamp(13px, 1.2vw, 15px);
	font-weight: 400;
	line-height: 1.65;
	color: var(--wp--preset--color--text-on-light-2);
}
.editorial-prompt__copy {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--divider-light);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--text-on-light-3);
	cursor: pointer;
	transition: color .2s ease-out, border-color .2s ease-out;
}
.editorial-prompt__copy:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.editorial-prompt__copy:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.editorial-prompt__icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.editorial-prompt__icon--check { display: none; }
.editorial-prompt__copy.is-copied .editorial-prompt__icon--copy { display: none; }
.editorial-prompt__copy.is-copied .editorial-prompt__icon--check { display: block; }

@media (prefers-reduced-motion: reduce) {
	.editorial-prompt__copy { transition: none; }
}

/* Section break: an 8px red square, then a 1px line. */
.longform > hr.wp-block-separator,
.longform-end__break {
	margin-top: clamp(48px, 5vw, 72px);
	display: flex;
	align-items: center;
	gap: 14px;
	height: 8px;
	border: 0;
	width: 100%;
	max-width: none;
	opacity: 1;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left center / 8px 8px no-repeat,
		linear-gradient(var(--wp--preset--color--divider-light), var(--wp--preset--color--divider-light)) 22px center / calc(100% - 22px) 1px no-repeat;
}
.longform-end { margin-top: 0; }
.longform-end__break { grid-column: 2; }
.longform-section--note .longform-end__break { margin-top: clamp(40px, 4vw, 56px); }
.longform-end__byline {
	grid-column: 2;
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--on-light-muted);
}
.longform-end__byline a { color: inherit; text-decoration: none; }
.longform-end__byline a:hover { color: var(--wp--preset--color--accent); }

/* Figures: natural (column width), wide (all three columns), band
   (full-bleed dark), pair (gallery, 2-up 4:3) and video (embed). */
.longform > figure,
.longform > .wp-block-image,
.longform > .wp-block-gallery,
.longform > .wp-block-embed { font-family: var(--wp--preset--font-family--body); }
.longform > .wp-block-image { margin: clamp(36px, 4vw, 56px) 0 clamp(8px, 1vw, 16px); }
.longform > .wp-block-image img { display: block; width: auto; max-width: 100%; height: auto; }
.longform figcaption,
.longform .wp-element-caption {
	margin: 12px 0 0;
	max-width: 60ch;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.55;
	text-align: left;
	color: var(--wp--preset--color--on-light-muted);
	text-wrap: pretty;
}
.longform--note figcaption { margin-top: 14px; }
.longform__fig { margin-right: 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--black); }

.longform > .wp-block-image.alignwide,
.longform > .wp-block-embed,
.longform > .presto-block-video,
.longform > .wp-block-gallery { grid-column: 1 / -1; margin: clamp(44px, 5vw, 80px) 0 clamp(8px, 1vw, 16px); }
.longform > .wp-block-image.alignwide { display: grid; grid-template-columns: subgrid; }
.longform > .wp-block-image.alignwide > img,
.longform > .wp-block-image.alignwide > a { grid-column: 1 / -1; width: 100%; background: #e4e0d9; /* image backing on light, DESIGN-SYSTEM.md */ }
.longform > .wp-block-image.alignwide > a img { width: 100%; }
.longform > .wp-block-image.alignwide > figcaption { grid-column: 2 / 4; }

.longform > .wp-block-image.alignfull {
	grid-column: 1 / -1;
	width: 100vw;
	max-width: none;
	margin: clamp(56px, 6vw, 96px) 0 0 calc(50% - 50vw);
	padding: clamp(40px, 6vw, 96px) var(--wp--preset--spacing--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--wp--preset--color--ink);
}
.longform > .wp-block-image.alignfull img { max-width: min(100%, var(--wp--style--global--content-size, 1120px)); }
.longform > .wp-block-image.alignfull figcaption { width: 100%; max-width: var(--wp--style--global--content-size, 1120px); margin-top: 14px; color: var(--wp--preset--color--on-dark-muted); }
.longform > .wp-block-image.alignfull .longform__fig { color: var(--wp--preset--color--paper); }
.longform > .wp-block-image.alignfull + * { margin-top: clamp(56px, 6vw, 96px); }

/* Flex rather than an auto-fit grid: the full-width caption would keep
   auto-fit from collapsing the empty third track. */
.longform > .wp-block-gallery.wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.6vw, 20px);
}
.longform > .wp-block-gallery.wp-block-gallery > .wp-block-image { flex: 1 1 min(100%, 360px); width: auto !important; margin: 0 !important; background: #e4e0d9; }
.longform > .wp-block-gallery.wp-block-gallery > .wp-block-image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.longform > .wp-block-gallery > .wp-block-image figcaption { position: static; padding: 0; margin-top: 12px; background: none; color: var(--wp--preset--color--on-light-muted); font-size: 13px; }
.longform > .wp-block-gallery > figcaption.blocks-gallery-caption { flex: 1 0 100%; margin-top: 0; text-align: left; }

.longform > .wp-block-embed .wp-block-embed__wrapper { background: var(--wp--preset--color--ink); }
.longform > .wp-block-embed iframe { display: block; width: 100%; border: 0; }

/* Cognitive Budget Model diagram. The article stores this as a Custom HTML
   block, so give it the same responsive structure and finish as the approved
   Field Note handoff instead of relying on browser defaults for b/dl/dd. */
.longform > .cognitive-budget-diagram {
	grid-column: 2 / 4;
	width: 100%;
	line-height: 1.5;
}
.cognitive-budget-diagram > div:first-child {
	align-items: baseline;
	gap: 16px;
	font-weight: 500;
	color: #3d3b39;
}
.cognitive-budget-diagram > div:first-child > span:last-child {
	font-size: 15px;
	letter-spacing: 0;
}
.cognitive-budget-diagram > div:nth-child(2) > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}
.cognitive-budget-diagram > div:nth-child(2) b {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .08em;
	color: var(--wp--preset--color--black);
}
.cognitive-budget-diagram > div:nth-child(2) > div > div {
	column-gap: 2px;
	height: clamp(36px, 4vw, 48px) !important;
}
.cognitive-budget-diagram > div:nth-child(2) > div > div > span {
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 10px !important;
	overflow: hidden;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .12em;
}
.cognitive-budget-diagram > div:nth-child(2) > div > div > span:first-child {
	background: repeating-linear-gradient(135deg, #b9b5ae 0 1px, transparent 1px 7px) !important;
	outline: 1px solid #b9b5ae;
	outline-offset: -1px;
}
.cognitive-budget-diagram > dl {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
	gap: 0 24px !important;
	margin-bottom: 0;
}
.cognitive-budget-diagram > dl > div {
	position: relative;
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: 2px 12px;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--divider-light);
}
.cognitive-budget-diagram > dl > div::before {
	content: '';
	width: 14px;
	height: 14px;
	transform: translateY(2px);
	background: #6b6866;
}
.cognitive-budget-diagram > dl > div:first-child::before {
	background: repeating-linear-gradient(135deg, #b9b5ae 0 1px, transparent 1px 4px);
	outline: 1px solid #b9b5ae;
	outline-offset: -1px;
}
.cognitive-budget-diagram > dl > div:nth-child(3)::before { background: #3d3b39; }
.cognitive-budget-diagram > dl > div:nth-child(4)::before { background: var(--wp--preset--color--accent); }
.cognitive-budget-diagram dt {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--wp--preset--color--black);
}
.cognitive-budget-diagram dt b {
	margin-right: 8px;
	font-weight: 500;
}
.cognitive-budget-diagram dd {
	grid-column: 2;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #3d3b39;
}
.cognitive-budget-diagram figcaption {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--divider-light);
}

/* Conceptual comparison (Field Notes): two columns compared row by row, in
   the diagram's type and rules. Rows stack below 600px, each value labelled. */
.longform > .interface-comparison {
	grid-column: 2 / 4;
	width: 100%;
	max-width: 820px;
	margin: clamp(40px, 5vw, 64px) 0 clamp(16px, 2vw, 24px);
	line-height: 1.5;
}
.interface-comparison__head,
.interface-comparison dl > div {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 4px 24px;
}
.interface-comparison__head {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--black);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #3d3b39;
}
.interface-comparison__head > span:last-child { color: var(--wp--preset--color--accent); }
.interface-comparison dl { margin: 0; }
.interface-comparison dl > div {
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--divider-light);
	align-items: baseline;
}
.interface-comparison dt {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--wp--preset--color--black);
}
.interface-comparison dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #3d3b39;
}
.interface-comparison dd:last-child { padding-left: 12px; border-left: 2px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--black); }
.interface-comparison figcaption { margin-top: 14px; }
@media (max-width: 599px) {
	.interface-comparison__head { display: none; }
	.interface-comparison dl { border-top: 1px solid var(--wp--preset--color--black); }
	.interface-comparison dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.interface-comparison dd::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--on-light-muted);
	}
}

/* A chart carried over from the live article as inline SVG. */
.longform > .note-chart {
	grid-column: 2 / 4;
	width: 100%;
	max-width: 820px;
	margin: clamp(40px, 5vw, 64px) 0 clamp(16px, 2vw, 24px);
}
.note-chart svg { display: block; width: 100%; height: auto; font-family: var(--wp--preset--font-family--body); }
/* Below 600px the chart's labels would shrink past reading size: keep a
   legible width and let it scroll inside its own frame instead. */
@media (max-width: 599px) {
	.longform > .note-chart { overflow-x: auto; }
	.note-chart svg { min-width: 560px; }
}

/* Tables in articles: the meta-table finish. Cells wrap; a table too wide
   even so scrolls inside its own frame rather than the page. */
.longform > .wp-block-table {
	grid-column: 2 / 4;
	max-width: 820px;
	margin: clamp(32px, 4vw, 48px) 0 0;
	overflow-x: auto;
	font-family: var(--wp--preset--font-family--body);
}
.longform .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.longform .wp-block-table th,
.longform .wp-block-table td { padding: 12px 16px 12px 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--divider-light); text-align: left; vertical-align: top; }
.longform .wp-block-table thead th { border-bottom-color: var(--wp--preset--color--black); }
.longform .wp-block-table th { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #3d3b39; }
.longform .wp-block-table td:first-child { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--wp--preset--color--black); }

@media (max-width: 959px) {
	.case-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.longform { grid-template-columns: 0 minmax(0, 1fr) 0; }
	.longform__year { grid-column: 2; justify-self: start; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
	.longform__year .eyebrow__mark { display: inline-block; }
	.longform__decision { grid-column: 2; display: block; }
	.longform__decision > .longform__decision-label { justify-self: start; padding: 0 0 4px clamp(16px, 2vw, 24px); border-left: 1px solid var(--wp--preset--color--accent); }
	.longform__decision > .longform__decision-label::after { display: none; }
}

/* -- Field Note article ---------------------------------------------------- */
.note-opening {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(112px, 12vw, 168px) var(--wp--preset--spacing--gutter) clamp(40px, 5vw, 64px);
}
.note-opening__grid { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1.6fr); }
.note-opening__grid > * { grid-column: 2; }
.note-opening__eyebrow { grid-column: 2 / 4; flex-wrap: wrap; gap: 8px 12px; }
.note-opening__eyebrow a,
.case-hero__eyebrow a { color: inherit; text-decoration: none; }
.note-opening__eyebrow a:hover,
.case-hero__eyebrow a:hover { color: var(--wp--preset--color--paper); }
.note-opening__title { grid-column: 2 / 4; margin-top: clamp(20px, 2.4vw, 28px); max-width: 15ch; font-size: clamp(44px, 6.4vw, 88px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.note-opening__deck { margin-top: clamp(20px, 2.4vw, 28px); max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.55; color: var(--wp--preset--color--on-dark-secondary); text-wrap: pretty; }
.note-opening__meta { margin-top: 24px; gap: 6px 10px; }

.note-continue {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(64px, 8vw, 112px) var(--wp--preset--spacing--gutter) clamp(56px, 7vw, 88px);
}
.note-continue__inner { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; }
.note-continue__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 80px; align-items: start; }
.note-continue__title { margin-top: 20px; font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.note-continue__title a,
.case-next__title a { color: var(--wp--preset--color--paper); text-decoration: none; }
.note-continue__title a:hover,
.case-next__title a:hover { color: var(--wp--preset--color--paper); text-decoration: underline; text-decoration-thickness: 1px; }
.note-continue__deck { margin-top: 16px; max-width: 46ch; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--wp--preset--color--on-dark-secondary); text-wrap: pretty; }
.note-continue__meta { margin-top: 14px; font-size: 13px; color: var(--wp--preset--color--on-dark-muted); }
.note-continue__list { margin-top: 20px; }
.note-continue .cta-link-row { padding: 20px 0; }
.note-continue .cta-link-row__title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; text-wrap: balance; }
.note-continue .cta-link-row__desc { margin-top: 6px; font-size: 13px; font-weight: 400; }
.note-continue .cta-link-row__arrow { font-size: 20px; }
.note-continue__all { margin-top: 24px; }
.note-continue__all .link-ghost { color: var(--wp--preset--color--paper); }

/* -- Single case study ------------------------------------------------------ */
.case-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(104px, 12vw, 168px) var(--wp--preset--spacing--gutter) clamp(48px, 6vw, 80px);
}
.case-hero > *,
.case-credits > *,
.case-next__inner { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; }
.case-hero__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(36px, 5vw, 72px); align-items: end; }
.case-hero__inner > * { min-width: 0; }
.case-hero__eyebrow { flex-wrap: wrap; gap: 8px 12px; }
.case-hero__title { margin-top: clamp(20px, 2.4vw, 28px); font-size: clamp(52px, 7.4vw, 104px); line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.case-hero__headline { margin-top: clamp(16px, 2vw, 24px); max-width: 20ch; font-family: var(--wp--preset--font-family--display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.015em; color: var(--wp--preset--color--on-dark-secondary); text-wrap: balance; }
.case-hero__headline em { font-weight: 300; color: var(--wp--preset--color--paper); }
.case-hero__summary { margin-top: 24px; max-width: 48ch; font-size: 16px; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); text-wrap: pretty; }
.case-hero__image { margin: 0; background: var(--wp--preset--color--ink-raised); }
.case-hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.case-hero--wide .case-hero__inner { display: block; }
.case-hero--wide .case-hero__intro { max-width: none; }
.case-hero--wide .case-hero__title { white-space: nowrap; }
.case-hero__image--wide { margin: clamp(40px, 5vw, 64px) auto 0; }
.case-hero__image--wide img { aspect-ratio: 16 / 9; }

.longform .wp-block-image.is-style-white-frame img {
	box-sizing: border-box;
	border: 25px solid var(--wp--preset--color--white, #fff);
}

.longform > .wp-block-image.alignwide.scoopshot-logo > img {
	justify-self: center;
	width: auto;
	max-width: min(100%, 300px);
	background: transparent;
}

.case-hero__facts {
	margin: clamp(40px, 5vw, 64px) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0 32px;
	border-bottom: 1px solid var(--wp--preset--color--divider-dark-2);
}
.case-hero__fact { border-top: 1px solid var(--wp--preset--color--divider-dark-2); padding: 16px 0 20px; }
.case-hero__fact dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-muted); }
.case-hero__fact dd { margin: 8px 0 0; font-size: 14px; line-height: 1.65; text-wrap: pretty; }

.case-hero__overview { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.case-hero__changed { flex: 1 1 260px; border-top: 3px solid var(--wp--preset--color--accent); padding-top: 18px; }
.case-hero__changed-text { margin-top: 8px; max-width: 22ch; font-family: var(--wp--preset--font-family--display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; }
.case-hero__timeline { flex: 3 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 0 20px; }
.case-hero__timeline li { border-top: 1px solid var(--wp--preset--color--divider-dark); padding: 16px 0; }
.case-hero__timeline li:last-child { border-top-color: var(--wp--preset--color--accent); }
.case-hero__timeline-label { font-family: var(--wp--preset--font-family--display); font-size: 26px; line-height: 1; }
.case-hero__timeline li > p:not(.case-hero__timeline-label) { margin-top: 8px; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--wp--preset--color--on-dark-muted); text-wrap: pretty; }

@media (max-width: 599px) {
	/* Long client names must wrap instead of establishing the hero's width. */
	.case-hero__title { max-width: 100%; font-size: clamp(46px, 13vw, 52px); text-wrap: wrap; }
	.case-hero--wide .case-hero__title { font-size: clamp(28px, 9.2vw, 46px); white-space: nowrap; }
}

.case-credits {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(64px, 8vw, 112px) var(--wp--preset--spacing--gutter) 0;
}
.case-credits h2 { font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: .14em; }
.case-credits__awards ul { margin-top: 28px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 32px 24px; }
.case-credits__awards li { display: flex; flex-direction: column; gap: 14px; }
.award-mark { display: block; color: var(--wp--preset--color--paper); }
.award-mark__accent { stroke: var(--wp--preset--color--accent); filter: brightness(1.6); }
.case-credits__award { border-top: 1px solid var(--wp--preset--color--divider-dark-2); padding-top: 12px; }
.case-credits__organisation { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-muted); }
.case-credits__award-name { margin-top: 6px; font-family: var(--wp--preset--font-family--display); font-size: 21px; line-height: 1.2; }
.case-credits__year { margin-top: 4px; font-size: 13px; color: var(--wp--preset--color--on-dark-muted); }
.case-credits__awards + .case-credits__makers { margin-top: clamp(64px, 7vw, 96px); }
.case-credits__makers dl { margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 40px; }
.case-credits__makers dl > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--divider-dark-2); font-size: 14px; line-height: 1.55; }
.case-credits__makers dt { color: var(--wp--preset--color--on-dark-muted); }
.case-credits__makers dd { margin: 0; text-wrap: pretty; }

.case-next {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(72px, 9vw, 128px) var(--wp--preset--spacing--gutter) clamp(56px, 7vw, 88px);
}
.case-next__grid {
	border-top: 1px solid var(--wp--preset--color--divider-dark);
	padding-top: clamp(40px, 5vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 32px 64px;
	align-items: center;
}
.case-next__title { margin-top: 20px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.case-next__title em { font-weight: 300; }
.case-next__links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.case-next__links .link-ghost { color: var(--wp--preset--color--paper); }
.case-next__links .case-next__all { color: var(--wp--preset--color--on-dark-muted); }
.case-next__links .case-next__all:hover { color: var(--wp--preset--color--paper); }
.case-next .media-link { background: #e4e0d9; }

@media (prefers-reduced-motion: reduce) {
	.site-header__progress { transition: none; }
}

/* -- About me: clients appendix (secondary reference list) ---------------- */
/* Quiet, DM Sans, small — deliberately not styled as a .longform heading or
   paragraph, so it reads as reference material after the story, not as
   another chapter of it. Reuses existing colour tokens only. */
.about-clients__label { font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--on-light-muted); }
.about-clients__intro { margin-top: 10px; font-family: var(--wp--preset--font-family--body); font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--on-light-secondary); }
.about-clients__list { margin: 24px 0 0; padding: 0; font-family: var(--wp--preset--font-family--body); }
.about-clients__list > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--divider-light); }
.about-clients__list dt { font-size: 13px; font-weight: 500; color: var(--wp--preset--color--on-light-muted); }
.about-clients__list dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--wp--preset--color--on-light-secondary); }
@media (max-width: 640px) {
	.about-clients__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}