/* ==========================================================================
   Innovara Studios — block theme stylesheet
   Ported from the original Tailwind build. Tokens live in theme.json and
   surface here as --wp--preset--* custom properties.
   ========================================================================== */

/* Core ships box-sizing only on the blocks it generates, so anything this
   theme renders in PHP would otherwise measure as content-box. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--inv-paper: var( --wp--preset--color--paper, #f2efea );
	--inv-paper-2: var( --wp--preset--color--paper-2, #ebe7df );
	--inv-ink: var( --wp--preset--color--ink, #241f21 );
	--inv-accent: var( --wp--preset--color--accent, #f26522 );
	--inv-warm: #988f8b;
	/* The original drops the warm grey to 70% for datestamps and read times. */
	--inv-warm-soft: rgba( 152, 143, 139, 0.7 );
	--inv-rule: rgba( 36, 31, 33, 0.14 );
	--inv-rule-strong: rgba( 36, 31, 33, 0.28 );
	--inv-nav-h: 72px;
	/* The original rounds nothing but the pill buttons, which set their own. */
	--inv-radius: 0;
	--inv-ease: cubic-bezier( 0.25, 0.1, 0.25, 1 );
	--inv-arrow: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E" );

	/* The diagonal cousin, for the links that lead out of a card. */
	/* The curtain's noise tile, at the source's 140px. */
	--inv-grain-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E" );

	--inv-arrow-ur: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E" );

	/* Same glyph pre-tinted, for the button badges — those paint the arrow as a
	   background-image on a coloured disc, so a currentColor mask will not do. */
	--inv-arrow-accent: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E" );
	--inv-arrow-ink: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241F21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E" );
	--inv-arrow-white: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E" );
}

@media ( min-width: 640px ) {
	:root {
		--inv-nav-h: 86px;
	}
}

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

body {
	background: var( --inv-paper );
	color: var( --inv-ink );
	overflow-x: hidden;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

/* Lenis drives scrolling; it needs the document to not fight it. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

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

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

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

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

.inv-shell {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media ( min-width: 640px ) {
	.inv-shell {
		padding-inline: 2rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-shell {
		padding-inline: 3rem;
	}
}

/* Sections step 64 → 80 → 112 as the viewport widens. A handful of bands in the
   original break that rhythm on purpose, so each of those gets its own
   modifier rather than a fudged clamp. */
.inv-section {
	padding-block: 4rem;
}

.inv-section--tight {
	padding-block: 2.5rem 4rem;
}

/* The disciplines stack ends on a deeper gutter so the last sticky card has
   somewhere to land. */
.inv-section--deep {
	padding-bottom: 5rem;
}

/* The introduction opens further down the page and closes early. */
.inv-section--open {
	padding-block: 4rem 3rem;
}

/* The partner band sits a step closer to the journal strip above it. */
.inv-section--close {
	padding-top: 4rem;
}

/* A section that closes a step early rather than opening one late. */
.inv-section--shallow {
	padding-bottom: 4rem;
}

/* The band directly under an interior hero opens a step short of a full one. */
.inv-section--lead {
	padding-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-section {
		padding-block: 5rem;
	}

	.inv-section--tight {
		padding-block: 3.5rem 5rem;
	}

	.inv-section--deep {
		padding-bottom: 7rem;
	}

	.inv-section--open {
		padding-block: 5rem 4rem;
	}

	.inv-section--close {
		padding-top: 5rem;
	}

	.inv-section--shallow {
		padding-bottom: 5rem;
	}

	.inv-section--lead {
		padding-top: 4rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-section {
		padding-block: 7rem;
	}

	.inv-section--tight {
		padding-block: 3.5rem 6rem;
	}

	.inv-section--deep {
		padding-bottom: 9rem;
	}

	.inv-section--open {
		padding-block: 8rem 6rem;
	}

	.inv-section--close {
		padding-top: 6rem;
	}

	.inv-section--shallow {
		padding-bottom: 6rem;
	}

	.inv-section--lead {
		padding-top: 5rem;
	}
}

.inv-section--paper2 {
	background: var( --inv-paper-2 );
}

.inv-section--ink {
	background: var( --inv-ink );
	color: var( --inv-paper );
}

.inv-section--ink a {
	color: inherit;
}

/* The project index band sits a shade cooler than the brand ink. */
.inv-section--ink.inv-section--slate {
	background: #111827;
	color: #fff;
}

.inv-rule {
	border: 0;
	border-top: 1px solid var( --inv-rule );
	margin: 0;
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

.inv-d1 {
	font-size: var( --wp--preset--font-size--d-1 );
	line-height: 1.05;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin: 0;
}

.inv-d2 {
	font-size: var( --wp--preset--font-size--d-2 );
	line-height: 1.1;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin: 0;
}

.inv-d3 {
	font-size: var( --wp--preset--font-size--d-3 );
	line-height: 1.05;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin: 0;
}

.inv-d4 {
	font-size: var( --wp--preset--font-size--d-4 );
	line-height: 1.1;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin: 0;
}

.inv-body-lg {
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.inv-body-sm {
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.inv-label {
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.inv-muted {
	opacity: 0.62;
}

.inv-measure {
	max-width: 46ch;
}

/* Display headings each carry their own measure, because where a line breaks
   is part of how the original reads. */
.inv-measure-16 {
	max-width: 16ch;
}

.inv-measure-18 {
	max-width: 18ch;
}

.inv-measure-20 {
	max-width: 20ch;
}

.inv-measure-22 {
	max-width: 22ch;
}

.inv-measure-wide {
	max-width: 62ch;
}

/* A line break that only exists once there is room for it. Two headings in the
   original break on a chosen word rather than wherever the measure lands, and
   this is how they do it. */
.inv-br {
	display: none;
}

@media ( min-width: 640px ) {
	.inv-br {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
   Motion primitives
   Reveal: one-shot, triggered by JS adding .is-in.
   -------------------------------------------------------------------------- */

.inv-reveal {
	opacity: 0;
	transform: translate3d( 0, 26px, 0 );
	transition:
		opacity 900ms var( --inv-ease ),
		transform 900ms var( --inv-ease );
	will-change: opacity, transform;
}

.inv-reveal.is-in {
	opacity: 1;
	transform: none;
}

.inv-reveal[ data-delay='1' ] {
	transition-delay: 100ms;
}
.inv-reveal[ data-delay='2' ] {
	transition-delay: 200ms;
}
.inv-reveal[ data-delay='3' ] {
	transition-delay: 300ms;
}
.inv-reveal[ data-delay='4' ] {
	transition-delay: 400ms;
}
.inv-reveal[ data-delay='5' ] {
	transition-delay: 500ms;
}

.inv-reveal--mask {
	transform: none;
	opacity: 1;
	clip-path: inset( 0 0 100% 0 );
	transition: clip-path 1100ms var( --inv-ease );
}

.inv-reveal--mask.is-in {
	clip-path: inset( 0 0 0 0 );
}

/* Parallax: JS writes translate3d on the inner layer. */
.inv-parallax {
	position: relative;
	overflow: hidden;
}

.inv-parallax__layer {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	will-change: transform;
	transform: translate3d( 0, 0, 0 ) scale( 1.12 );
}

.inv-parallax__layer > img,
.inv-parallax__layer > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --inv-obj, 50% 50% );
}

/* Decorative illustration figure (innovara/art). */
.inv-art {
	margin: 0;
}

.inv-art .inv-parallax {
	overflow: hidden;
	border-radius: var( --inv-radius );
}

/* The source sets its one image caption as plain meta copy, not as the
   uppercase label the rest of the page uses. */
.inv-art__caption {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var( --inv-warm );
}

/* Fill variant: no ratio, no parallax — used inside the discipline cards. */
.inv-art--fill,
.inv-art--fill .inv-parallax {
	height: 100%;
}

.inv-art--fill .inv-parallax {
	border-radius: 0;
}

.inv-art--fill .inv-parallax__layer {
	transform: none;
}

.inv-art__label {
	position: absolute;
	left: 1.25rem;
	bottom: 1.1rem;
	z-index: 2;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	mix-blend-mode: difference;
}

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

	.inv-reveal {
		opacity: 1;
		transform: none;
		clip-path: none;
	}

	.inv-parallax__layer {
		transform: none;
	}
}

/* Decorative texture reused across sections. */
.inv-glow {
	position: absolute;
	pointer-events: none;
	border-radius: 9999px;
	background: radial-gradient(
		circle,
		rgba( 242, 101, 34, 0.3 ) 0%,
		rgba( 242, 101, 34, 0.1 ) 45%,
		rgba( 242, 101, 34, 0 ) 70%
	);
}

.inv-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E" );
}

.inv-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba( 36, 31, 33, 0.88 ) 0%,
		rgba( 36, 31, 33, 0.55 ) 28%,
		rgba( 36, 31, 33, 0.1 ) 58%,
		rgba( 36, 31, 33, 0.22 ) 100%
	);
}

/* --------------------------------------------------------------------------
   Links & buttons
   -------------------------------------------------------------------------- */

.inv-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var( --wp--preset--font-size--body-sm );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	transition: opacity 300ms var( --inv-ease );
}

.inv-link:hover {
	opacity: 0.6;
}

.inv-link svg {
	transition: transform 500ms var( --inv-ease );
}

.inv-link:hover svg {
	transform: rotate( -45deg );
}

/* The arrow glyph, for markup that cannot carry the inline SVG. `:has()` keeps
   it off the PHP-rendered links, which already ship the real SVG. */
.inv-link:not( :has( svg ) )::after {
	content: '';
	flex: none;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var( --inv-arrow ) center / contain no-repeat;
	mask: var( --inv-arrow ) center / contain no-repeat;
	transition: transform 500ms var( --inv-ease );
}

.inv-link:not( :has( svg ) ):hover::after {
	transform: rotate( -45deg );
}

/* Going back up a level — a warm, sentence-case link whose arrow leads and
   points the other way. */
.inv-link--back {
	gap: 0.5rem;
	font-size: 0.8125rem;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.4;
	color: var( --inv-warm );
	transition: color 300ms var( --inv-ease );
}

.inv-link--back:hover {
	opacity: 1;
	color: var( --inv-ink );
}

.inv-link--back::after {
	content: none;
}

.inv-link--back::before {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var( --inv-arrow ) center / contain no-repeat;
	mask: var( --inv-arrow ) center / contain no-repeat;
	transform: rotate( 180deg );
}

/* The pill button. A label preceded by a circular badge holding an arrow that
   rests at -45deg and swings level on hover — the studio's one call to action.
   Three variants; `orange` is the default, as in the original. */
.inv-btn {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.625rem;
	border: 0;
	cursor: pointer;
	border-radius: 9999px;
	padding: 0.5rem 1.25rem 0.5rem 0.5rem;
	font-size: 0.875rem;
	letter-spacing: -0.02em;
	line-height: 1.4;
	text-transform: none;
	background: var( --inv-accent );
	color: #fff;
	transition: background-color 300ms var( --inv-ease );
}

.inv-btn:hover {
	background: #e05a1a;
}

.inv-btn__badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: #fff;
	color: var( --inv-accent );
	transform: rotate( -45deg );
	transition: transform 300ms ease-in-out;
}

.inv-btn__badge svg {
	width: 15px;
	height: 15px;
}

.inv-btn__label {
	white-space: nowrap;
	transition: transform 300ms ease-in-out;
}

.inv-btn:hover .inv-btn__badge {
	transform: rotate( 0deg );
}

.inv-btn:hover .inv-btn__label {
	transform: translateX( 0.125rem );
}

@media ( min-width: 640px ) {
	.inv-btn {
		padding-right: 1.5rem;
	}

	.inv-btn__badge {
		width: 2.25rem;
		height: 2.25rem;
	}
}

.inv-btn--dark {
	background: var( --inv-ink );
	color: var( --inv-paper );
}

.inv-btn--dark:hover {
	background: rgba( 36, 31, 33, 0.9 );
}

.inv-btn--dark .inv-btn__badge {
	background: var( --inv-paper );
	color: var( --inv-ink );
}

.inv-btn--white {
	background: #fff;
	color: var( --inv-ink );
}

.inv-btn--white:hover {
	background: var( --inv-paper );
}

.inv-btn--white .inv-btn__badge {
	background: var( --inv-ink );
	color: #fff;
}

/* The compact size, used where a button sits inside a dense row. */
.inv-btn--sm {
	padding: 0.375rem 1rem 0.375rem 0.5rem;
}

.inv-btn--sm .inv-btn__badge {
	width: 1.75rem;
	height: 1.75rem;
}

.inv-btn--sm .inv-btn__badge svg {
	width: 13px;
	height: 13px;
}

@media ( min-width: 640px ) {
	.inv-btn--sm {
		padding-right: 1rem;
	}

	.inv-btn--sm .inv-btn__badge {
		width: 1.75rem;
		height: 1.75rem;
	}
}

/* Core button blocks put their custom class on the wrapper and render a bare
   anchor inside, which cannot carry the badge markup — so the badge is drawn
   as a pseudo-element instead. The disc is rotationally symmetric, so turning
   the whole thing reads as the arrow turning. */
.wp-block-button.inv-btn {
	display: inline-flex;
	width: auto;
	padding: 0;
	background: none;
	box-shadow: none;
}

.wp-block-button.inv-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	border: 0;
	border-radius: 9999px;
	padding: 0.5rem 1.25rem 0.5rem 0.5rem;
	font-size: 0.875rem;
	letter-spacing: -0.02em;
	line-height: 1.4;
	text-transform: none;
	background: var( --inv-accent );
	color: #fff;
	transition: background-color 300ms var( --inv-ease );
}

.wp-block-button.inv-btn > .wp-block-button__link:hover {
	background: #e05a1a;
}

.wp-block-button.inv-btn > .wp-block-button__link::before {
	content: '';
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background-color: #fff;
	background-image: var( --inv-arrow-accent );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	transform: rotate( -45deg );
	transition: transform 300ms ease-in-out;
}

.wp-block-button.inv-btn > .wp-block-button__link:hover::before {
	transform: rotate( 0deg );
}

@media ( min-width: 640px ) {
	.wp-block-button.inv-btn > .wp-block-button__link {
		padding-right: 1.5rem;
	}

	.wp-block-button.inv-btn > .wp-block-button__link::before {
		width: 2.25rem;
		height: 2.25rem;
	}
}

.wp-block-button.inv-btn--dark > .wp-block-button__link {
	background: var( --inv-ink );
	color: var( --inv-paper );
}

.wp-block-button.inv-btn--dark > .wp-block-button__link:hover {
	background: rgba( 36, 31, 33, 0.9 );
}

.wp-block-button.inv-btn--dark > .wp-block-button__link::before {
	background-color: var( --inv-paper );
	background-image: var( --inv-arrow-ink );
}

.wp-block-button.inv-btn--white > .wp-block-button__link {
	background: #fff;
	color: var( --inv-ink );
}

.wp-block-button.inv-btn--white > .wp-block-button__link:hover {
	background: var( --inv-paper );
}

.wp-block-button.inv-btn--white > .wp-block-button__link::before {
	background-color: var( --inv-ink );
	background-image: var( --inv-arrow-white );
}

.inv-link a,
.inv-link a:hover {
	color: inherit;
}

/* Core buttons wrappers keep the row layout the original actions row had. */
.wp-block-buttons.inv-hero__actions,
.wp-block-buttons.inv-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.wp-block-buttons.inv-hero__actions {
	margin-top: 2.5rem;
}

/* The 404 stacks its two actions until there is room to sit them in a row. */
.wp-block-buttons.inv-actions--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 2rem;
}

@media ( min-width: 640px ) {
	.wp-block-buttons.inv-actions--stack {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
		margin-top: 2.5rem;
	}
}

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

/* --------------------------------------------------------------------------
   Route-change curtain

   Ported from the original: 8 skewed slats sweep up to cover the page while the
   next document loads, then sweep off. The numbers are the source's — 31deg of
   skew, 48vh of overhang so the skewed edges never show, 175% of travel, and a
   20ms/26ms per-slat stagger.
   -------------------------------------------------------------------------- */

.inv-curtain {
	position: fixed;
	inset: 0;
	z-index: 90;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}

.inv-curtain[ data-phase='cover' ],
.inv-curtain[ data-phase='reveal' ] {
	visibility: visible;
}

.inv-curtain__slats {
	position: absolute;
	left: -48vh;
	right: -48vh;
	top: -25%;
	height: 150%;
}

.inv-curtain__slat {
	position: absolute;
	top: 0;
	height: 100%;
	width: calc( 12.5% + 1px );
	background-color: var( --inv-ink );
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0.05 ) 0%,
		rgba( 255, 255, 255, 0 ) 45%,
		rgba( 0, 0, 0, 0.1 ) 100%
	);
	transform: skewX( -31deg ) translateY( 175% ) translateZ( 0 );
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.inv-curtain[ data-phase='cover' ] .inv-curtain__slat {
	transform: skewX( -31deg ) translateY( 0 ) translateZ( 0 );
	transition: transform 340ms cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: calc( var( --inv-slat ) * 20ms );
}

.inv-curtain[ data-phase='reveal' ] .inv-curtain__slat {
	transform: skewX( -31deg ) translateY( -175% ) translateZ( 0 );
	opacity: 0;
	transition:
		transform 420ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		opacity 252ms ease-out;
	transition-delay: calc( var( --inv-slat ) * 26ms );
}

/* The accent bloom that sits behind the slats while they close. */
.inv-curtain__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 70vh;
	height: 70vh;
	border-radius: 9999px;
	transform: translate3d( -50%, -50%, 0 );
	background: radial-gradient(
		circle,
		rgba( 242, 101, 34, 0.3 ) 0%,
		rgba( 242, 101, 34, 0.1 ) 45%,
		rgba( 242, 101, 34, 0 ) 70%
	);
	opacity: 0;
	transition: opacity 300ms cubic-bezier( 0.22, 1, 0.36, 1 );
	will-change: opacity;
}

.inv-curtain[ data-phase='cover' ] .inv-curtain__glow {
	opacity: 1;
	transition-duration: 520ms;
}

.inv-curtain__grain {
	position: absolute;
	inset: 0;
	background-image: var( --inv-grain-url );
	background-repeat: repeat;
	opacity: 0.13;
	transition: opacity 252ms ease-out;
}

.inv-curtain[ data-phase='reveal' ] .inv-curtain__grain {
	opacity: 0;
}

/* Without scripts, or with motion turned down, there is no curtain at all. */
@media ( prefers-reduced-motion: reduce ) {
	.inv-curtain {
		display: none;
	}
}

/* Core's flow layout gives every top-level region a 24px top margin. On <main>
   that margin collapses out through <body> and opens a paper band above the
   hero; on the footer it opens one under the closing band. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Footer reveal: the page rides over a footer pinned to the bottom of the
   viewport, so the closing band slides up off it. motion.js adds the class and
   reserves the height, and only while the footer is shorter than the screen. */
.wp-site-blocks > main {
	position: relative;
	z-index: 10;
	background: var( --inv-paper );
}

.wp-block-template-part.is-pinned {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 0;
}

/* The nav block emits three siblings into the header group, and core's flow
   layout would give the second and third a 24px top margin — which offsets the
   fixed bar and collapses out of the page, leaving a band above the hero. */
.inv-header .inv-skip,
.inv-header .inv-nav,
.inv-header .inv-menu {
	margin-block: 0;
}

.inv-nav {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 30;
}

.inv-nav__inner {
	display: flex;
	height: var( --inv-nav-h );
	max-width: 1440px;
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-inline: 1rem;
}

@media ( min-width: 640px ) {
	.inv-nav__inner {
		padding-inline: 1.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-nav__inner {
		padding-inline: 2rem;
	}
}

@media ( min-width: 640px ) {
	.inv-nav__inner {
		padding-inline: 1.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-nav__inner {
		padding-inline: 2rem;
	}
}

.inv-nav__brand {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	border-radius: 12px;
	background: #fff;
	padding: 0.5rem 1rem;
}

.inv-nav__brand a {
	display: flex;
	align-items: baseline;
	font-size: var( --wp--preset--font-size--body-lg );
	letter-spacing: -0.02em;
	color: var( --inv-ink );
}

.inv-nav__brand sup {
	margin-left: 0.125rem;
	font-size: 0.5em;
}

.inv-nav__links {
	display: none;
	align-items: center;
	gap: 1rem;
}

@media ( min-width: 768px ) {
	.inv-nav__links {
		display: flex;
	}
}

/* The link cluster. A single white shape sits behind all four links, pinched
   into necks between them, and swells around whichever one is active — the
   original's metaball nav. motion.js draws the path; the geometry constants
   are its: 37px tall, 16px apart, 8px necks, 2.25px of swell. */
.inv-nav__cluster {
	position: relative;
	display: flex;
	align-items: center;
	height: 37px;
}

.inv-nav__blob {
	position: absolute;
	left: 0;
	top: -3.25px;
	z-index: 0;
	height: 43.5px;
	pointer-events: none;
}

/* The accent bloom inside the shape, over whichever link is active. */
.inv-nav__glow {
	position: absolute;
	top: 3px;
	z-index: 1;
	height: 31px;
	border-radius: 15.5px;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba( 242, 101, 34, 0.3 ) 0%,
		rgba( 242, 101, 34, 0.14 ) 55%,
		rgba( 242, 101, 34, 0 ) 100%
	);
	filter: blur( 8px );
	mix-blend-mode: multiply;
}

.inv-nav__link {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 37px;
	padding-inline: 20px;
	margin-right: 16px;
	font-size: var( --wp--preset--font-size--body-sm );
	text-transform: uppercase;
	line-height: 1;
	color: var( --inv-ink );
	text-decoration: none;
}

.inv-nav__link:last-child {
	margin-right: 0;
}

/* Without scripts the shape is never drawn, so the links need their own. */
.no-blob .inv-nav__link {
	background: #fff;
	border-radius: 18.5px;
}

.inv-nav__cta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var( --wp--preset--font-size--body-sm );
	text-transform: uppercase;
	line-height: 1;
	color: var( --inv-ink );
	text-decoration: none;
	transition: opacity 300ms var( --inv-ease );
}

.inv-nav__cta:hover {
	opacity: 0.6;
}

.inv-nav__cta svg {
	transition: transform 500ms cubic-bezier( 0.25, 0.1, 0.25, 1 );
}

.inv-nav__cta:hover svg {
	transform: rotate( -45deg );
}

.inv-nav__toggle {
	display: flex;
	align-items: center;
	height: 37px;
	gap: 0.5rem;
	border: 0;
	cursor: pointer;
	border-radius: 12px;
	padding-inline: 1.25rem;
	background: var( --inv-ink );
	color: var( --inv-paper );
	font-size: var( --wp--preset--font-size--body-sm );
	text-transform: uppercase;
	line-height: 1;
	transition: background-color 300ms var( --inv-ease );
}

@media ( min-width: 768px ) {
	.inv-nav__toggle {
		display: none;
	}
}

/* The mobile menu is a sheet that rises from the bottom over a scrim, as in
   the original. */
.inv-menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	transition: visibility 0s linear 500ms;
}

.inv-menu.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.inv-menu__scrim {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	opacity: 0;
	transition: opacity 500ms var( --inv-ease );
}

.inv-menu.is-open .inv-menu__scrim {
	opacity: 1;
}

.inv-menu__sheet {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin: 0 0.75rem 0.75rem;
	border-radius: 1rem;
	background: #fff;
	color: var( --inv-ink );
	padding: 1.25rem;
	transform: translateY( 100% );
	transition: transform 500ms cubic-bezier( 0.32, 0.72, 0, 1 );
}

.inv-menu.is-open .inv-menu__sheet {
	transform: none;
}

.inv-menu__place {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --inv-rule-strong );
	border-radius: 9999px;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --inv-warm );
}

.inv-menu__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.inv-menu__list a {
	display: block;
	padding-block: 0.5rem;
	font-size: var( --wp--preset--font-size--d-4 );
	letter-spacing: -0.04em;
	line-height: 1.1;
	color: var( --inv-ink );
	text-decoration: none;
}

.inv-menu__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 1.5rem;
	border-radius: 9999px;
	background: var( --inv-accent );
	padding: 0.75rem 0.75rem 0.75rem 1.5rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}

.inv-menu__cta-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: #fff;
	color: var( --inv-accent );
	transition: transform 500ms cubic-bezier( 0.25, 0.1, 0.25, 1 );
}

.inv-menu__cta:hover .inv-menu__cta-badge {
	transform: rotate( -45deg );
}

@media ( min-width: 768px ) {
	.inv-menu {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-menu__sheet,
	.inv-menu__scrim {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.inv-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

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

.inv-hero__media video,
.inv-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inv-hero__body {
	position: relative;
	z-index: 1;
	padding-bottom: clamp( 2.5rem, 6vw, 5rem );
	padding-top: calc( var( --inv-nav-h ) + 4rem );
}

.inv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var( --wp--preset--font-size--body-sm );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 1.75rem;
}

/* The pulsing availability dot. Drawn as a pseudo-element so the eyebrow can
   stay a plain paragraph block that an editor can retype. */
.inv-hero__eyebrow::before,
.inv-hero__dot {
	content: '';
	position: relative;
	display: inline-block;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var( --inv-accent );
	animation: inv-ping 2s cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}

@keyframes inv-ping {
	0% {
		box-shadow: 0 0 0 0 rgba( 242, 101, 34, 0.9 );
	}
	75%,
	100% {
		box-shadow: 0 0 0 0.5rem rgba( 242, 101, 34, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-hero__eyebrow::before,
	.inv-hero__dot {
		animation: none;
	}
}

.inv-hero h1 {
	max-width: 22ch;
	margin: 0;
}

.inv-hero__actions {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.inv-hero__cue {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba( 255, 255, 255, 0.25 );
}

.inv-hero__cue-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.1rem;
	font-size: var( --wp--preset--font-size--body-sm );
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Section headings (index number + eyebrow + display line)
   -------------------------------------------------------------------------- */

.inv-head {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	align-items: end;
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}

@media ( min-width: 900px ) {
	.inv-head {
		grid-template-columns: 1fr auto;
	}
}

.inv-head__meta {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var( --inv-rule );
	padding-bottom: 1rem;
}

.inv-section--ink .inv-head__meta {
	border-color: rgba( 255, 255, 255, 0.18 );
}

.inv-head__num {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	opacity: 0.5;
}

/* Numbered badge: a filled circle followed by a bordered pill. Used to open
   most sections on the home and studio pages. */
.inv-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-badge {
		margin-bottom: 2rem;
	}
}

.inv-badge__num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 9999px;
	background: #111827;
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1;
}

.inv-badge__label {
	border: 1px solid var( --inv-rule );
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.5;
}

@media ( min-width: 640px ) {
	.inv-badge__num {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.75rem;
	}

	.inv-badge__label {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}
}

/* On the ink sections the circle inverts and the pill borrows a light rule. */
.inv-section--ink .inv-badge__num {
	background: #fff;
	color: var( --inv-ink );
}

.inv-section--ink .inv-badge__label {
	border-color: rgba( 255, 255, 255, 0.2 );
	color: #fff;
}

/* The other section opener: a hairline rule carrying an eyebrow, a warm arrow
   and an optional right-hand note. */
.inv-head__rule {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	border-top: 1px solid var( --inv-rule );
	padding-top: 1rem;
	margin-bottom: 2rem;
	font-size: 0.875rem;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

/* Where the rule leads a grid rather than a heading, the source opens a step
   wider before the first row. */
.inv-head__rule--wide {
	margin-bottom: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-head__rule {
		margin-bottom: 2.5rem;
	}

	.inv-head__rule--wide {
		margin-bottom: 3.5rem;
	}
}

.inv-section--ink .inv-head__rule {
	border-color: rgba( 255, 255, 255, 0.18 );
}

.inv-head__rule > * {
	margin: 0;
}

.inv-head__rule > * + * {
	flex: none;
	color: var( --inv-warm );
}

.inv-section--ink .inv-head__rule > * + * {
	color: rgba( 255, 255, 255, 0.6 );
}

/* The arrow after the eyebrow. Kept as its own element so an editor can retype
   the label without losing it. */
.inv-head__arrow {
	margin-left: 0.5rem;
	color: var( --inv-warm );
}

/* --------------------------------------------------------------------------
   Discipline cards — sticky stack
   Each card pins below the one before it, then scales down and dims as the
   next card slides over it. The offsets mirror the source build: 104px for
   the first card, +22px for every card after it. JS writes the scale and the
   brightness; the pinning is pure CSS so it survives with scripting off.
   -------------------------------------------------------------------------- */

.inv-disciplines {
	position: relative;
	margin-top: clamp( 2.5rem, 5vw, 4rem );
}

.inv-discipline {
	position: sticky;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	min-height: min( 74vh, 620px );
	border-radius: var( --inv-radius );
	overflow: hidden;
	background: var( --inv-paper );
	transform-origin: center top;
	will-change: transform, filter;
}

/* Core pads any group that carries a background, so the card padding has to be
   written one step more specific than that to survive. */
.wp-block-group.inv-discipline {
	padding: 1.5rem;
}

@media ( min-width: 640px ) {
	.wp-block-group.inv-discipline {
		padding: 2.25rem;
	}
}

@media ( min-width: 1024px ) {
	.wp-block-group.inv-discipline {
		padding: 3rem;
	}
}

.inv-discipline:nth-child( 1 ) {
	top: 104px;
	z-index: 1;
}
.inv-discipline:nth-child( 2 ) {
	top: 126px;
	z-index: 2;
}
.inv-discipline:nth-child( 3 ) {
	top: 148px;
	z-index: 3;
}
.inv-discipline:nth-child( 4 ) {
	top: 170px;
	z-index: 4;
}
.inv-discipline:nth-child( 5 ) {
	top: 192px;
	z-index: 5;
}
.inv-discipline:nth-child( 6 ) {
	top: 214px;
	z-index: 6;
}

@media ( min-width: 1024px ) {
	.inv-discipline {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: 3.5rem;
	}
}

/* The illustration column only exists from the large breakpoint up — below it
   the source ships the image at a 1px size, i.e. never paints it. */
.inv-discipline > .inv-art {
	display: none;
}

@media ( min-width: 1024px ) {
	/* The illustration is a 4:5 plate, and it is what gives the card its height
	   once the copy stops being the tallest thing in it. */
	.inv-discipline > .inv-art {
		display: block;
		aspect-ratio: 4 / 5;
		height: auto;
	}
}

/* The card itself is padded now, so the copy column only has to fill it and
   push its footer to the bottom the way the original's justify-between does. */
.inv-discipline__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.inv-discipline__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	font-size: 0.875rem;
	line-height: 1.4;
}

.inv-discipline__top p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	opacity: 0.55;
}

/* The name and the description are one block of their own, so the card's three
   parts spread the way the original's justify-between does. */
.inv-discipline__mid {
	padding-block: 2rem;
}

@media ( min-width: 640px ) {
	.inv-discipline__mid {
		padding-block: 2.5rem;
	}
}

.inv-discipline h3 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--d-1 );
	letter-spacing: -0.04em;
	line-height: 1.05;
	font-weight: 400;
}

.inv-discipline h3 span {
	font-size: 0.36em;
	opacity: 0.55;
}

.inv-discipline__mid p {
	margin: 1.25rem 0 0;
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.4;
	opacity: 0.55;
	max-width: 44ch;
}

/* One wrapping row of tags, not a column grid. */
.inv-discipline ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0.55;
}

.inv-discipline ul li {
	margin: 0;
}

/* The card's own link is sentence-case and underlined, unlike the uppercase
   .inv-link the rest of the page uses. */
.inv-discipline .inv-link {
	display: flex;
	width: fit-content;
	margin: 1.75rem 0 0;
	gap: 0.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	font-size: 0.875rem;
	letter-spacing: -0.02em;
	line-height: 1.4;
	text-transform: none;
}

.inv-discipline .inv-link::after {
	width: 15px;
	height: 15px;
	-webkit-mask-image: var( --inv-arrow-ur );
	mask-image: var( --inv-arrow-ur );
}

/* The diagonal arrow drifts rather than turns. */
.inv-discipline .inv-link:hover::after {
	transform: translate( 2px, -2px );
}

/* Without motion the stack is meaningless — the cards simply follow one
   another, exactly as the source falls back. */
@media ( prefers-reduced-motion: reduce ) {
	.inv-discipline {
		position: static;
		min-height: 0;
		margin-bottom: 1.25rem;
		transform: none;
		filter: none;
	}
}

/* --------------------------------------------------------------------------
   Split intro
   -------------------------------------------------------------------------- */

.inv-split {
	display: grid;
	gap: clamp( 2rem, 5vw, 4rem );
	align-items: start;
}

@media ( min-width: 900px ) {
	.inv-split {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.inv-split--even {
		grid-template-columns: 1fr 1fr;
	}
}

.inv-split p {
	margin: 0 0 1.1rem;
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.45;
}

/* The even split carries running copy rather than an intro, so it sets a
   measure and drops a size. */
.inv-split--even p {
	margin-bottom: 0;
	max-width: 52ch;
	font-size: var( --wp--preset--font-size--body-md );
	line-height: 1.3;
}

.inv-split--even .inv-warm p,
.inv-split--even p.inv-warm {
	color: var( --inv-warm );
}

/* --------------------------------------------------------------------------
   Introduction band
   Three columns on desktop — a narrow figure, the statement, a wide figure —
   with the statement reading first on smaller screens. Source order is
   statement, narrow figure, wide figure so the copy leads without CSS.
   -------------------------------------------------------------------------- */

.inv-intro {
	display: grid;
	gap: 1.5rem;
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-intro {
		grid-template-columns: 45% 1fr;
		margin-top: 4rem;
	}

	.inv-intro > :nth-child( 1 ) {
		grid-column: 1 / -1;
	}
}

@media ( min-width: 1024px ) {
	.inv-intro {
		grid-template-columns: 26% 1fr 48%;
		align-items: end;
		margin-top: 7rem;
	}

	.inv-intro > :nth-child( 1 ) {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		justify-self: end;
	}

	.inv-intro > :nth-child( 2 ) {
		grid-column: 1;
		grid-row: 1;
	}

	.inv-intro > :nth-child( 3 ) {
		grid-column: 3;
		grid-row: 1;
	}
}

.inv-intro__text p {
	margin: 0;
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.45;
	max-width: 34ch;
}

.inv-intro__text .wp-block-buttons {
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Featured project cards
   -------------------------------------------------------------------------- */

.inv-featured {
	display: grid;
	gap: clamp( 1.25rem, 2vw, 1.75rem );
	margin-top: 2.5rem;
}

/* The row of buttons under the grid keeps its own step, smaller than the one
   above the grid. */
.inv-featured + .inv-actions {
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-featured {
		margin-top: 3.5rem;
	}

	.inv-featured + .inv-actions {
		margin-top: 3rem;
	}
}

@media ( min-width: 768px ) {
	.inv-featured {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.inv-featured {
		margin-top: 4rem;
	}
}

.inv-card {
	display: block;
	color: var( --inv-ink );
}

.inv-card__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var( --inv-card-ratio, 329 / 246 );
	isolation: isolate;
}

.inv-card--square .inv-card__frame {
	--inv-card-ratio: 1 / 1;
}

.inv-card__media {
	position: absolute;
	inset: 0;
}

.inv-card__media > img,
.inv-card__media > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --inv-obj, 50% 50% );
}

/* The pill sits as a 36px disc until the card is hovered, then grows to
   uncover its label. Width is per-card because the labels differ in length. */
.inv-card__pill {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: #fff;
	color: var( --inv-ink );
	transition: width 300ms ease-in-out;
}

.inv-card__pill--dark {
	background: #111827;
	color: #fff;
}

.inv-card:hover .inv-card__pill,
.inv-card:focus-visible .inv-card__pill,
.inv-grid__link:hover .inv-card__pill,
.inv-grid__link:focus-visible .inv-card__pill {
	width: var( --inv-pill-w, 148px );
}

.inv-card__pill-badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	transform: rotate( -45deg );
	transition: transform 300ms ease-in-out;
}

.inv-card:hover .inv-card__pill-badge,
.inv-card:focus-visible .inv-card__pill-badge,
.inv-grid__link:hover .inv-card__pill-badge,
.inv-grid__link:focus-visible .inv-card__pill-badge {
	transform: rotate( 0deg );
}

.inv-card__pill-label {
	white-space: nowrap;
	font-size: 0.8125rem;
	opacity: 0;
	transition: opacity 300ms ease-in-out 100ms;
}

.inv-card:hover .inv-card__pill-label,
.inv-card:focus-visible .inv-card__pill-label,
.inv-grid__link:hover .inv-card__pill-label,
.inv-grid__link:focus-visible .inv-card__pill-label {
	opacity: 1;
}

.inv-card__desc {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.625;
	color: var( --inv-warm );
}

.inv-card__title {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-card__desc {
		font-size: 0.875rem;
	}

	.inv-card__title {
		font-size: 0.9375rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-card__pill {
		width: var( --inv-pill-w, 148px );
	}

	.inv-card__pill-badge {
		transform: none;
	}

	.inv-card__pill-label {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Project index rows
   -------------------------------------------------------------------------- */

.inv-index {
	border-top: 1px solid var( --inv-rule );
	margin-top: 3rem;
}

/* The button under the ladder sits a step closer than the ladder sits to the
   heading. */
.inv-index + .inv-actions {
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-index {
		margin-top: 4rem;
	}

	.inv-index + .inv-actions {
		margin-top: 3rem;
	}
}

/* The cover plate that trails the cursor. It is fixed because the pointer
   coordinates motion.js feeds it are viewport coordinates. */
.inv-index__preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	display: none;
	width: 340px;
	height: 240px;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: opacity 300ms var( --inv-ease );
}

@media ( min-width: 1024px ) {
	.inv-index__preview {
		display: block;
	}
}

@media ( min-width: 1280px ) {
	.inv-index__preview {
		width: 420px;
		height: 300px;
	}
}

.inv-index.is-previewing .inv-index__preview {
	opacity: 1;
}

.inv-index__shot {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 250ms var( --inv-ease );
}

.inv-index__shot.is-active {
	opacity: 1;
}

.inv-index__shot > img,
.inv-index__shot > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-index__preview {
		display: none;
	}
}

.inv-section--ink .inv-index,
.inv-section--ink .inv-index__row {
	border-color: rgba( 255, 255, 255, 0.1 );
}

/* Each row carries the rule above it, and the last one closes the list off. */
.inv-index__row {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: 1rem;
	align-items: center;
	border-top: 1px solid var( --inv-rule );
	padding-block: 1.5rem;
	transition: padding-left 500ms var( --inv-ease );
}

.inv-index__row:last-child {
	border-bottom: 1px solid var( --inv-rule );
}

@media ( min-width: 640px ) {
	.inv-index__row {
		gap: 2rem;
		padding-block: 2rem;
	}
}

/* The row only steps in from the large breakpoint up, as in the original. */
@media ( min-width: 1024px ) {
	.inv-index__row:hover {
		padding-left: 1.5rem;
	}
}

.inv-index__num {
	font-size: 0.75rem;
	opacity: 0.4;
}

.inv-index__cat,
.inv-index__year {
	font-size: 0.8125rem;
	opacity: 0.5;
}

@media ( min-width: 640px ) {
	.inv-index__num {
		font-size: 0.8125rem;
	}
}

.inv-index__name {
	font-size: 1.5rem;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 400;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color 500ms var( --inv-ease );
}

.inv-index__row:hover .inv-index__name {
	color: var( --inv-accent );
}

.inv-index__cat--stacked {
	display: block;
	margin-top: 0.25rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.inv-index__aside {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Both the right-hand discipline and the year only appear once there is room. */
.inv-index__aside .inv-index__cat,
.inv-index__year {
	display: none;
}

.inv-index__arrow {
	flex-shrink: 0;
	opacity: 0.4;
	transition:
		transform 500ms var( --inv-ease ),
		color 500ms var( --inv-ease ),
		opacity 500ms var( --inv-ease );
}

.inv-index__row:hover .inv-index__arrow {
	color: var( --inv-accent );
	opacity: 1;
	transform: translateX( 0.25rem );
}

@media ( min-width: 640px ) {
	.inv-index__name {
		font-size: 2.125rem;
	}

	.inv-index__year {
		display: inline;
	}
}

@media ( min-width: 1024px ) {
	.inv-index__name {
		font-size: 2.75rem;
	}

	.inv-index__aside .inv-index__cat {
		display: inline;
	}

	.inv-index__cat--stacked {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Project grid (archive) + filters
   -------------------------------------------------------------------------- */

.inv-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

@media ( min-width: 640px ) {
	.inv-filters {
		gap: 0.75rem;
	}
}

.inv-filter {
	border: 1px solid var( --inv-rule );
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.5;
	transition:
		background-color 300ms var( --inv-ease ),
		color 300ms var( --inv-ease ),
		border-color 300ms var( --inv-ease );
}

@media ( min-width: 640px ) {
	.inv-filter {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}
}

.inv-filter:hover {
	border-color: #9ca3af;
}

.inv-filter[ aria-pressed='true' ] {
	background: var( --inv-ink );
	border-color: var( --inv-ink );
	color: var( --inv-paper );
}

.inv-grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-grid {
		gap: 1.5rem;
		margin-top: 3rem;
	}
}

@media ( min-width: 768px ) {
	.inv-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.inv-grid {
		gap: 1.75rem;
	}
}

.inv-grid__item[ hidden ] {
	display: none;
}

.inv-grid__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Title and category sit on one baseline, the title taking the slack. */
.inv-grid__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.inv-grid__title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var( --inv-ink );
}

.inv-grid__meta {
	flex: none;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --inv-warm );
	opacity: 0.7;
}

.inv-grid__desc {
	margin: 0.25rem 0 0;
	max-width: 52ch;
	font-size: 0.8125rem;
	line-height: 1.625;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-grid__title {
		font-size: 0.9375rem;
	}

	.inv-grid__meta {
		font-size: 0.8125rem;
	}

	.inv-grid__desc {
		font-size: 0.875rem;
	}
}

/* The cover plate. Every third one is square, as in the original. */
.inv-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 329 / 246;
}

.inv-thumb--square {
	aspect-ratio: 1 / 1;
}

.inv-thumb img,
.inv-thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */

/* The home teaser: three entries, no rules, the datestamp last. */
.inv-journal {
	display: grid;
	gap: 2.5rem;
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-journal {
		margin-top: 3.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-journal {
		grid-template-columns: repeat( 3, 1fr );
		gap: 2rem;
	}
}

/* The teaser cards sit in a paper-2 container with a picture on top. The
   original ran these as bare text; the container and cover are a deliberate
   departure, so the card keeps the site's own card language. */
.inv-journal__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --inv-paper-2 );
	color: inherit;
	text-decoration: none;
	transition: background-color 500ms var( --inv-ease );
}

.inv-journal__item:hover {
	background: var( --inv-paper );
}

.inv-journal__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.inv-journal__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var( --inv-ease );
}

.inv-journal__item:hover .inv-journal__frame img {
	transform: scale( 1.04 );
}

.inv-journal__art {
	display: block;
	height: 100%;
}

.inv-journal__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-journal__text {
		padding: 2rem;
	}
}

.inv-journal__text .inv-journal__cat {
	align-self: flex-start;
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	color: var( --inv-warm );
}

.inv-journal__title {
	display: block;
	max-width: 22ch;
	margin: 0;
	font-size: var( --wp--preset--font-size--d-4 );
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.04em;
	transition: color 500ms var( --inv-ease );
}

.inv-journal__item:hover .inv-journal__title {
	color: var( --inv-accent );
}

.inv-journal__excerpt {
	display: block;
	max-width: 42ch;
	margin: 1rem 0 0;
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.4;
	color: var( --inv-warm );
}

.inv-journal__date {
	display: block;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var( --inv-warm );
}

/* The journal index: a lead card, then the rest as a ruled ladder. */
.inv-journal-lead {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
	background: var( --inv-paper-2 );
	color: inherit;
	text-decoration: none;
}

@media ( min-width: 640px ) {
	.inv-journal-lead {
		padding: 2rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-journal-lead {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		gap: 3rem;
		padding: 3rem;
	}
}

.inv-journal-lead__meta,
.inv-journal__meta,
.inv-journal__times {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --inv-warm-soft );
}

@media ( min-width: 640px ) {
	.inv-journal-lead__meta,
	.inv-journal__times {
		font-size: 0.8125rem;
	}
}

.inv-journal__cat {
	border: 1px solid var( --inv-rule );
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	line-height: 1.5;
	color: var( --inv-ink );
	white-space: nowrap;
}

.inv-journal__cat--strong {
	border-color: var( --inv-rule-strong );
}

.inv-journal-lead__title {
	margin: 1.25rem 0 0;
	font-size: var( --wp--preset--font-size--d-3 );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.04em;
	transition: color 500ms var( --inv-ease );
}

.inv-journal-lead:hover .inv-journal-lead__title {
	color: var( --inv-accent );
}

.inv-journal-lead__excerpt {
	max-width: 52ch;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-journal-lead__excerpt {
		font-size: 1rem;
	}
}

.inv-journal-lead__by {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

@media ( min-width: 1024px ) {
	.inv-journal-lead__by {
		justify-content: flex-end;
	}
}

.inv-journal-lead__name {
	font-size: 0.8125rem;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-journal-lead__name {
		font-size: 0.875rem;
	}
}

.inv-journal-lead__go {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: #111827;
	background-image: var( --inv-arrow-white );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1rem;
	transition: transform 500ms var( --inv-ease );
}

.inv-journal-lead:hover .inv-journal-lead__go {
	transform: rotate( -45deg );
}

.inv-journal--rows {
	display: block;
	margin-top: 1.25rem;
}

@media ( min-width: 640px ) {
	.inv-journal--rows {
		margin-top: 1.5rem;
	}
}

.inv-journal--rows .inv-journal__item {
	display: grid;
	gap: 0.75rem;
	padding-block: 1.75rem;
	border-top: 1px solid var( --inv-rule );
}

@media ( min-width: 640px ) {
	.inv-journal--rows .inv-journal__item {
		gap: 1.5rem;
		padding-block: 2.25rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-journal--rows .inv-journal__item {
		grid-template-columns: 10rem 1fr 14rem;
		align-items: start;
	}
}

.inv-journal--rows .inv-journal__title {
	max-width: 26ch;
	font-size: 1.25rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

@media ( min-width: 640px ) {
	.inv-journal--rows .inv-journal__title {
		font-size: 1.625rem;
	}
}

.inv-journal--rows .inv-journal__excerpt {
	max-width: 60ch;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.65;
}

@media ( min-width: 640px ) {
	.inv-journal--rows .inv-journal__excerpt {
		font-size: 0.9375rem;
	}
}

.inv-journal__times {
	justify-content: space-between;
}

@media ( min-width: 1024px ) {
	.inv-journal__times {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.5rem;
	}
}

.inv-journal__end {
	margin-top: 0;
	border-top: 1px solid var( --inv-rule );
}

/* Keep reading: two cards closing a journal article. */
.inv-related__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var( --inv-warm-soft );
}

@media ( min-width: 640px ) {
	.inv-related__eyebrow {
		font-size: 0.875rem;
	}
}

.inv-related {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-related {
		gap: 1.5rem;
	}
}

@media ( min-width: 768px ) {
	.inv-related {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.inv-related__item {
	display: block;
	height: 100%;
	padding: 1.5rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

@media ( min-width: 640px ) {
	.inv-related__item {
		padding: 2rem;
	}
}

.inv-related__meta {
	display: block;
	font-size: 0.75rem;
	color: var( --inv-warm-soft );
}

.inv-related__title {
	display: block;
	margin-top: 0.75rem;
	font-size: 1.25rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	transition: color 500ms var( --inv-ease );
}

.inv-related__item:hover .inv-related__title {
	color: var( --inv-accent );
}

.inv-related__excerpt {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-related__meta {
		font-size: 0.8125rem;
	}

	.inv-related__title {
		font-size: 1.5rem;
	}

	.inv-related__excerpt {
		font-size: 0.9375rem;
	}
}

/* The header and body of a single journal article. */
.inv-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	color: var( --inv-warm );
	text-decoration: none;
	transition: color 300ms var( --inv-ease );
}

@media ( min-width: 640px ) {
	.inv-back {
		margin-bottom: 2rem;
	}
}

.inv-back::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	background: currentColor;
	-webkit-mask: var( --inv-arrow ) center / contain no-repeat;
	mask: var( --inv-arrow ) center / contain no-repeat;
	transform: rotate( 180deg );
}

.inv-back:hover {
	color: var( --inv-ink );
}

.inv-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --inv-warm-soft );
}

@media ( min-width: 640px ) {
	.inv-postmeta {
		font-size: 0.8125rem;
	}
}

.inv-postmeta__cat {
	border: 1px solid var( --inv-rule-strong );
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	color: var( --inv-ink );
}

.inv-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --inv-rule-strong );
}

@media ( min-width: 640px ) {
	.inv-author {
		margin-top: 2.5rem;
	}
}

.inv-author__disc {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: #111827;
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: -0.01em;
}

.inv-author__name {
	display: block;
	font-size: 0.875rem;
	color: var( --inv-ink );
}

.inv-author__role {
	display: block;
	font-size: 0.8125rem;
	color: var( --inv-warm-soft );
}

.inv-lede {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.6;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-lede {
		margin-bottom: 2.5rem;
		font-size: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   Values / manifesto
   -------------------------------------------------------------------------- */

.inv-values {
	display: grid;
	gap: 1.5rem;
	margin-top: clamp( 2.5rem, 5vw, 4rem );
}

@media ( min-width: 800px ) {
	.inv-values {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.inv-value {
	border-top: 1px solid currentColor;
	padding-top: 1rem;
	opacity: 0.9;
}

.inv-value h3 {
	margin: 0 0 0.5rem;
	font-size: var( --wp--preset--font-size--body-lg );
	font-weight: 400;
	letter-spacing: -0.02em;
}

.inv-value p {
	margin: 0;
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.45;
	opacity: 0.75;
}

/* Manifesto variant: one continuous rule above the row rather than three. */
.inv-values--rule {
	border-top: 1px solid var( --inv-rule );
	padding-top: 2rem;
	gap: 2rem;
}

@media ( min-width: 640px ) {
	.inv-values--rule {
		gap: 2.5rem;
	}
}

.inv-values--rule .inv-value {
	border-top: 0;
	padding-top: 0;
	opacity: 1;
}

.inv-values--rule .inv-value h3 {
	font-size: var( --wp--preset--font-size--d-4 );
}

.inv-values--rule .inv-value p {
	max-width: 38ch;
	margin-top: 0.75rem;
	color: var( --inv-warm );
	opacity: 1;
}

.inv-quote {
	margin: 0;
	font-size: var( --wp--preset--font-size--d-3 );
	letter-spacing: -0.04em;
	line-height: 1.15;
	max-width: 22ch;
}

/* The partner statement closes on a pull quote a size up from .inv-quote.
   Core rules a quote down its left edge; here the statement stands alone. */
.inv-partner__quote {
	max-width: 26ch;
	margin: clamp( 3.5rem, 6vw, 5rem ) 0 0;
	border: 0;
	padding: 0;
	line-height: 1.1;
}

.inv-partner__quote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.inv-partner__figure {
	margin-top: clamp( 3.5rem, 6vw, 5rem );
}

/* The manifesto opens on a statement rather than a heading, held to a narrow
   measure so the line breaks land where the original set them. */
.inv-manifesto__lead {
	max-width: 30ch;
	margin-top: clamp( 2rem, 4vw, 2.5rem );
}

.inv-manifesto__eyebrow {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var( --inv-warm );
}

.inv-manifesto__eyebrow sup {
	margin-left: 0.05em;
	font-size: 0.6em;
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

/* The steps pin one under the next exactly as the discipline cards do, only
   with a shallower ladder — 6rem, then 1.25rem per step. */
.inv-process {
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-process {
		margin-top: 4rem;
	}
}

.inv-process__step {
	position: sticky;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	background: #fff;
	padding: 1.5rem;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

.inv-process__step:nth-child( 1 ) {
	top: 6rem;
	z-index: 1;
}

.inv-process__step:nth-child( 2 ) {
	top: 7.25rem;
	z-index: 2;
}

.inv-process__step:nth-child( 3 ) {
	top: 8.5rem;
	z-index: 3;
}

.inv-process__step:nth-child( 4 ) {
	top: 9.75rem;
	z-index: 4;
}

.inv-process__step:nth-child( 5 ) {
	top: 11rem;
	z-index: 5;
}

.inv-process__step:nth-child( 6 ) {
	top: 12.25rem;
	z-index: 6;
}

@media ( min-width: 640px ) {
	.inv-process__step {
		gap: 2rem;
		margin-bottom: 1.25rem;
		padding: 2rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-process__step {
		grid-template-columns: 8rem 1fr 1.4fr;
		align-items: start;
		padding: 2.5rem;
	}
}

.inv-process__num {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-accent );
}

/* The duration rides beside the number on small screens and moves under the
   description from the large breakpoint up. */
.inv-process__num .inv-process__time {
	color: var( --inv-warm );
}

@media ( min-width: 1024px ) {
	.inv-process__num .inv-process__time {
		display: none;
	}
}

.inv-process__title {
	margin: 0;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	line-height: 1.5;
	font-weight: 400;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-process__title {
		font-size: 1.75rem;
	}
}

.inv-process__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
	max-width: 56ch;
}

@media ( min-width: 640px ) {
	.inv-process__text {
		font-size: 0.9375rem;
	}
}

.inv-process__time {
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.7;
}

.inv-process__text + .inv-process__time {
	display: none;
	margin-top: 0.75rem;
	color: var( --inv-warm );
}

@media ( min-width: 1024px ) {
	.inv-process__text + .inv-process__time {
		display: block;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-process__step {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.inv-stats {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( 2, 1fr );
}

@media ( min-width: 800px ) {
	.inv-stats {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.inv-stat {
	border-top: 1px solid var( --inv-rule );
	padding-top: 1rem;
}

.inv-section--ink .inv-stat {
	border-color: rgba( 255, 255, 255, 0.18 );
}

.inv-stat__value {
	display: block;
	font-size: var( --wp--preset--font-size--d-3 );
	letter-spacing: -0.04em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.inv-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.65;
}

@media ( min-width: 640px ) {
	.inv-stat__label {
		font-size: 0.875rem;
	}
}

/* Proof variant: the rules are a 1px grid gap showing through, not borders,
   so every cell reads as a tile on white. */
.inv-stats--hair {
	gap: 1px;
	background: rgba( 36, 31, 33, 0.1 );
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-stats--hair {
		margin-top: 4rem;
	}
}

.inv-stats--hair .inv-stat {
	border-top: 0;
	padding: 1.75rem 1.25rem;
	background: #fff;
}

@media ( min-width: 640px ) {
	.inv-stats--hair .inv-stat {
		padding: 2.25rem 2rem;
	}
}

.inv-stats--hair .inv-stat__value {
	font-size: var( --wp--preset--font-size--d-3 );
}

/* Project outcomes: three cells, a step roomier than the proof figures. */
.inv-stats--metrics {
	grid-template-columns: 1fr;
	margin-top: 0;
}

@media ( min-width: 640px ) {
	.inv-stats--metrics {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.inv-stats--metrics .inv-stat {
	padding: 2rem 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-stats--metrics .inv-stat {
		padding: 2.5rem 2rem;
	}
}

.inv-stats--hair .inv-stat__label {
	margin-top: 0.5rem;
	color: var( --inv-warm );
	opacity: 1;
}

.inv-stats--metrics .inv-stat__label {
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.inv-quotes {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

@media ( min-width: 640px ) {
	.inv-quotes {
		gap: 1.5rem;
		margin-top: 1.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-quotes {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.inv-testimonial {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
	border-radius: var( --inv-radius );
	background: var( --inv-paper-2 );
	padding: 1.5rem;
	transition: background-color 500ms ease;
}

@media ( min-width: 640px ) {
	.inv-testimonial {
		padding: 2rem;
	}
}

.inv-section--ink .inv-testimonial {
	background: rgba( 255, 255, 255, 0.06 );
}

/* Core gives a quote a rule down its left edge; here the card is the frame. */
.inv-testimonial blockquote {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.inv-testimonial blockquote p {
	margin: 0;
}

@media ( min-width: 640px ) {
	.inv-testimonial blockquote {
		font-size: 1rem;
	}
}

.inv-testimonial:hover {
	background: var( --inv-paper );
}

.inv-section--ink .inv-testimonial:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

/* Core has no figure/figcaption pairing for hand-authored blocks, so the
   attribution takes a class and shares the figcaption rules. */
.inv-testimonial figcaption,
.inv-testimonial .inv-testimonial__cite {
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 36, 31, 33, 0.2 );
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
}

.inv-section--ink .inv-testimonial .inv-testimonial__cite {
	border-color: rgba( 255, 255, 255, 0.18 );
}

.inv-testimonial figcaption strong,
.inv-testimonial .inv-testimonial__cite strong {
	display: block;
	margin-bottom: 0.125rem;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
	color: var( --inv-ink );
}

.inv-section--ink .inv-testimonial .inv-testimonial__cite strong {
	color: inherit;
}

/* The opening and closing marks are the one place the accent shows in a quote. */
.inv-quote-mark {
	color: var( --inv-accent );
}

.inv-quote-mark:first-child {
	margin-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   Why we exist (studio page)
   Two columns that do not line up: the prose column is dropped by a heading's
   worth of space so the first paragraph sits below the section title.
   -------------------------------------------------------------------------- */

.inv-why {
	display: grid;
	gap: 2.5rem;
}

@media ( min-width: 1024px ) {
	.inv-why {
		grid-template-columns: 1fr 1.1fr;
		gap: 4rem;
	}
}

.inv-why__body p {
	max-width: 58ch;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-why__body p {
		font-size: 1rem;
	}
}

.inv-why__body p:last-child {
	margin-bottom: 0;
}

@media ( min-width: 1024px ) {
	.inv-why__body {
		padding-top: 3.5rem;
	}
}

/* The two studio photographs below the prose: a narrow portrait beside a
   wider frame, stacked until there is room for both. */
.inv-why__figures {
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-why__figures {
		grid-template-columns: 45% 1fr;
		gap: 1.5rem;
		margin-top: 4rem;
	}
}

.inv-why__figures img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.inv-why__figure--a img {
	aspect-ratio: 438 / 346;
}

.inv-why__figure--b img {
	aspect-ratio: 3 / 2;
}

/* --------------------------------------------------------------------------
   Services grid (studio page)
   Four discipline cards on a hairline lattice: the gap is the rule, so the
   grid's own background shows through the 1px seams between white cards.
   -------------------------------------------------------------------------- */

/* The heading and its note sit on one baseline once there is room, with the
   note refusing to shrink so the heading takes the slack. */
.inv-services__head > * {
	margin-block: 0;
}

.inv-services__note {
	max-width: 42ch;
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-services__note {
		font-size: 1rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-services__head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}

	.inv-services__note {
		flex: none;
		margin-top: 0;
	}
}

.inv-services {
	display: grid;
	gap: 1px;
	background: rgba( 36, 31, 33, 0.1 );
	overflow: hidden;
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-services {
		margin-top: 4rem;
	}
}

@media ( min-width: 768px ) {
	.inv-services {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.inv-service {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 1.5rem;
	transition: background-color 500ms var( --inv-ease );
}

@media ( min-width: 640px ) {
	.inv-service {
		padding: 2rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-service {
		padding: 2.5rem;
	}
}

.inv-service:hover {
	background: #fafafa;
}

/* An accent rule that wipes in from the left edge of the card on hover. */
.inv-service::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var( --inv-accent );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 500ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.inv-service:hover::after {
	transform: scaleX( 1 );
}

.inv-service__top {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.inv-service__num {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-accent );
}

.inv-service h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

@media ( min-width: 640px ) {
	.inv-service h3 {
		font-size: 1.5rem;
	}
}

.inv-service__text {
	max-width: 46ch;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-service__text {
		font-size: 0.9375rem;
	}
}

/* Deliverables read as pills, so they stay a list and not a paragraph. */
.inv-service__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.inv-service__tags li {
	border: 1px solid var( --inv-rule );
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-service__tags li {
		font-size: 0.8125rem;
	}
}

.inv-services__more {
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-services__more {
		margin-top: 3rem;
	}
}

/* --------------------------------------------------------------------------
   Team, clients, awards (studio page)
   -------------------------------------------------------------------------- */

.inv-team {
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-team {
		gap: 1.5rem;
		margin-top: 4rem;
	}
}

@media ( min-width: 768px ) {
	.inv-team {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.inv-team {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.inv-person {
	background: #fff;
	padding: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-person {
		padding: 2rem;
	}
}

/* Each person carries their own disc colour; the tint classes below are the
   only way a colour can reach the markup, since core blocks cannot save an
   arbitrary inline style. */
.inv-person__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border-radius: 9999px;
	background: var( --inv-tint, var( --inv-ink ) );
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media ( min-width: 640px ) {
	.inv-person__initials {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 0.9375rem;
	}
}

.inv-person--tint-1 {
	--inv-tint: #f26522;
}

.inv-person--tint-2 {
	--inv-tint: #1b3a6b;
}

.inv-person--tint-3 {
	--inv-tint: #1f5c4a;
}

.inv-person--tint-4 {
	--inv-tint: #8a2846;
}

.inv-person--tint-5 {
	--inv-tint: #7c5cff;
}

.inv-person--tint-6 {
	--inv-tint: #b4531f;
}

.inv-person h3 {
	margin: 1.25rem 0 0;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

@media ( min-width: 640px ) {
	.inv-person h3 {
		font-size: 1.1875rem;
	}
}

.inv-person__role {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
	opacity: 0.7;
}

.inv-person__bio {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-person__role {
		font-size: 0.875rem;
	}

	.inv-person__bio {
		font-size: 0.9375rem;
	}
}

/* Clients on the left, the award ladder on the right, once there is room. */
.inv-recognition {
	display: grid;
	gap: 3rem;
}

.inv-recognition > * {
	margin-block: 0;
}

@media ( min-width: 1024px ) {
	.inv-recognition {
		grid-template-columns: repeat( 2, 1fr );
		gap: 4rem;
	}
}

.inv-clients {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.inv-clients li {
	font-size: 1.125rem;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-clients li {
		font-size: 1.375rem;
	}
}

/* Each award opens with a rule, and a last empty row closes the list. */
.inv-awards {
	margin-top: 0.5rem;
}

.inv-award {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 1rem;
	border-top: 1px solid var( --inv-rule );
	padding-block: 1rem;
}

@media ( min-width: 640px ) {
	.inv-award {
		padding-block: 1.25rem;
	}
}

.inv-awards__end {
	border-top: 1px solid var( --inv-rule );
}

.inv-awards__year {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
	opacity: 0.7;
}

.inv-awards__name {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var( --inv-ink );
}

.inv-awards__org {
	margin: 0.125rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
	opacity: 0.7;
}

@media ( min-width: 640px ) {
	.inv-awards__year,
	.inv-awards__org {
		font-size: 0.875rem;
	}

	.inv-awards__name {
		font-size: 0.9375rem;
	}
}

/* --------------------------------------------------------------------------
   Single project
   -------------------------------------------------------------------------- */

/* The title block reads as a page hero on paper; the cover follows it as a
   band of its own rather than sitting behind the type. */
.inv-project-hero {
	padding-top: calc( var( --inv-nav-h ) + 2.5rem );
	padding-bottom: 3rem;
}

@media ( min-width: 640px ) {
	.inv-project-hero {
		padding-top: calc( var( --inv-nav-h ) + 3.5rem );
		padding-bottom: 4rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-project-hero {
		padding-top: calc( var( --inv-nav-h ) + 4rem );
		padding-bottom: 5rem;
	}
}

/* The way back out, with the arrow turned around. */
.inv-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
	text-decoration: none;
	transition: color 300ms var( --inv-ease );
}

.inv-back svg {
	transform: rotate( 180deg );
}

.inv-back:hover {
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-back {
		margin-bottom: 2rem;
	}
}

.inv-project-hero h1 {
	margin: 0;
	max-width: 16ch;
}

.inv-project-hero__tagline {
	margin: 1.5rem 0 0;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --inv-ink );
}

@media ( min-width: 640px ) {
	.inv-project-hero__tagline {
		margin-top: 2rem;
		font-size: 1.0625rem;
	}
}

/* A site walkthrough. It rests on its poster and carries a quiet cue; the
   motion only runs while the visitor asks for it. */
.inv-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.has-walkthrough {
	position: relative;
}

.has-walkthrough::after {
	content: 'Hover to play';
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --inv-ink );
	padding: 0.5rem 0.875rem;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: -0.02em;
	transition: opacity 300ms var( --inv-ease );
}

.has-walkthrough.is-playing::after,
.has-walkthrough.is-intro::after {
	opacity: 0;
}

/* While the opening runs, the frame is not asking to be touched. */
.has-walkthrough.is-intro .inv-video {
	cursor: default;
}

.has-walkthrough:focus-within::after {
	content: 'Press Enter to play';
}

.inv-video:focus-visible {
	outline: 2px solid var( --inv-accent );
	outline-offset: -4px;
}

/* Reduced motion: the poster is the whole story, so say nothing at all. */
.is-still .inv-video {
	cursor: default;
}

@media ( hover: none ) {
	.has-walkthrough::after {
		content: 'Tap to play';
	}
}

/* The full-width cover, then the gap the source leaves under it. */
.inv-project-cover__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.inv-project-cover__frame img,
.inv-project-cover__frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inv-project-cover__gap {
	height: 4rem;
}

@media ( min-width: 640px ) {
	.inv-project-cover__gap {
		height: 5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-project-cover__gap {
		height: 7rem;
	}
}

/* --------------------------------------------------------------------------
   Case-study chapters

   The body of a project page: numbered chapters, each a short piece of writing
   against a narrow measure, then the work at full width. Visuals carry their
   own ratio so brand spreads are never cropped.
   -------------------------------------------------------------------------- */

.inv-chapters {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

@media ( min-width: 640px ) {
	.inv-chapters {
		gap: 7rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-chapters {
		gap: 9rem;
	}
}

.inv-chapter {
	display: block;
}

/* The number sits in the margin beside the title on a wide screen. */
.inv-chapter__head {
	display: grid;
	gap: 0.75rem;
	border-top: 1px solid var( --inv-rule );
	padding-top: 1.25rem;
}

@media ( min-width: 1024px ) {
	.inv-chapter__head {
		grid-template-columns: 6rem 1fr;
		gap: 2rem;
		align-items: baseline;
	}
}

.inv-chapter__num {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	letter-spacing: 0.025em;
	color: var( --inv-warm-soft );
	font-variant-numeric: tabular-nums;
}

.inv-chapter__title {
	margin: 0;
	max-width: 20ch;
	font-size: var( --wp--preset--font-size--d-3 );
	letter-spacing: -0.04em;
	line-height: 1.05;
	font-weight: 400;
}

.inv-chapter__body {
	max-width: 58ch;
	margin-top: 2rem;
}

@media ( min-width: 1024px ) {
	.inv-chapter__body {
		margin-left: 8rem;
	}
}

.inv-chapter__body p {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-chapter__body p {
		font-size: 1rem;
	}
}

.inv-chapter__body p:last-child {
	margin-bottom: 0;
}

.inv-chapter__media {
	display: grid;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-chapter__media {
		gap: 1.5rem;
		margin-top: 3.5rem;
	}
}

@media ( min-width: 768px ) {
	.inv-chapter__media--pair {
		grid-template-columns: repeat( 2, 1fr );
	}

	.inv-chapter__media--trio {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.inv-shot {
	margin: 0;
}

.inv-shot__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var( --inv-ratio, 16 / 9 );
	background: inherit;
}

.inv-shot__frame img,
.inv-shot__frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inv-shot__caption {
	margin-top: 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm-soft );
}

/* --------------------------------------------------------------------------
   Our role
   -------------------------------------------------------------------------- */

.inv-role__title {
	margin: 0;
	font-size: var( --wp--preset--font-size--d-3 );
	letter-spacing: -0.04em;
	line-height: 1.05;
	font-weight: 400;
}

.inv-role__cols {
	display: grid;
	gap: 2.5rem;
	border-top: 1px solid var( --inv-rule );
	margin-top: 2.5rem;
	padding-top: 2.5rem;
}

@media ( min-width: 768px ) {
	.inv-role__cols {
		grid-template-columns: repeat( 3, 1fr );
		gap: 3.5rem;
	}
}

.inv-role__col h3 {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --inv-warm-soft );
	font-weight: 400;
}

.inv-role__col ul {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.inv-role__col li {
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.4;
	color: var( --inv-ink );
}

/* The credits, on a rule under the tagline. */
.inv-meta {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( 2, 1fr );
	border-top: 1px solid var( --inv-rule-strong );
	margin: 2.5rem 0 0;
	padding-top: 2rem;
}

@media ( min-width: 640px ) {
	.inv-meta {
		margin-top: 3rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-meta {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.inv-meta__item {
	margin: 0;
}

.inv-meta__key {
	display: block;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.025em;
	color: var( --inv-warm-soft );
}

.inv-meta__val {
	display: block;
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --inv-ink );
}

/* The outcome figures open on their own top gutter and close on the copy. */
.inv-section--metrics {
	padding-block: 4rem 0;
}

@media ( min-width: 640px ) {
	.inv-section--metrics {
		padding-block: 5rem 0;
	}
}

@media ( min-width: 1024px ) {
	.inv-section--metrics {
		padding-block: 6rem 0;
	}
}

.inv-prose {
	max-width: 62ch;
}

.inv-prose p {
	margin: 0 0 1.15rem;
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.55;
}

.inv-prose p:last-child {
	margin-bottom: 0;
}

.inv-prose h2 {
	margin: 2.5rem 0 1rem;
	font-size: var( --wp--preset--font-size--d-4 );
}

.inv-prose blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var( --inv-accent );
	font-size: var( --wp--preset--font-size--d-4 );
	letter-spacing: -0.03em;
	line-height: 1.25;
}

.inv-prose ul {
	margin: 0 0 1.5rem;
	padding-left: 1.1rem;
}

.inv-prose li {
	margin-bottom: 0.5rem;
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.5;
}

.inv-gallery {
	display: grid;
	gap: 1.25rem;
	/* It sits under the two-column write-up, at a gap of its own. */
	margin-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-gallery {
		gap: 1.5rem;
		margin-top: 4rem;
	}
}

@media ( min-width: 768px ) {
	.inv-gallery {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.inv-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var( --inv-radius );
	aspect-ratio: var( --inv-ratio, 4 / 3 );
	grid-column: var( --inv-span, auto );
}

.inv-gallery__item img,
.inv-gallery__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The next case study: its title and cover on one line, then the way in. */
.inv-next__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	letter-spacing: 0.025em;
	color: var( --inv-warm-soft );
}

@media ( min-width: 640px ) {
	.inv-next__eyebrow {
		font-size: 0.875rem;
	}
}

.inv-next__link {
	display: block;
	margin-top: 1.25rem;
	color: inherit;
	text-decoration: none;
}

@media ( min-width: 640px ) {
	.inv-next__link {
		margin-top: 1.5rem;
	}
}

.inv-next__row {
	display: grid;
	gap: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-next__row {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
		gap: 2.5rem;
	}
}

.inv-next__title {
	display: block;
	font-size: var( --wp--preset--font-size--d-2 );
	letter-spacing: -0.04em;
	line-height: 1.1;
	transition: color 300ms var( --inv-ease );
}

.inv-next__link:hover .inv-next__title {
	color: var( --inv-accent );
}

.inv-next__frame {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.inv-next__frame img,
.inv-next__frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inv-next__actions {
	margin-top: 2rem;
}

@media ( min-width: 640px ) {
	.inv-next__actions {
		margin-top: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   Connect form
   -------------------------------------------------------------------------- */

.inv-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Name and email share a line as soon as there is room for two. */
.inv-form__row {
	display: grid;
	gap: 1.25rem;
}

@media ( min-width: 640px ) {
	.inv-form__row {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.inv-field {
	display: block;
	margin: 0;
}

.inv-field label,
.inv-fieldset legend {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	font-weight: 400;
	color: var( --inv-ink );
}

.inv-fieldset legend {
	margin-bottom: 0.75rem;
}

.inv-field input,
.inv-field textarea,
.inv-field select {
	width: 100%;
	border: 1px solid rgba( 36, 31, 33, 0.2 );
	border-radius: 0;
	background: #fff;
	color: var( --inv-ink );
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: 0.75rem 1rem;
	transition: border-color 300ms var( --inv-ease );
}

.inv-field input::placeholder,
.inv-field textarea::placeholder {
	color: #9ca3af;
}

.inv-field textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.inv-field input:focus,
.inv-field textarea:focus,
.inv-field select:focus {
	outline: none;
	border-color: #111827;
}

.inv-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.inv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The chips are real checkboxes and radios with the control hidden behind the
   pill, so the set still works without scripting and still reads to a screen
   reader as the group it is. */
.inv-chip {
	position: relative;
}

.inv-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.inv-chip span {
	display: inline-block;
	border: 1px solid var( --inv-rule );
	border-radius: 9999px;
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-ink );
	cursor: pointer;
	transition:
		background-color 300ms var( --inv-ease ),
		color 300ms var( --inv-ease ),
		border-color 300ms var( --inv-ease );
}

.inv-chip:hover span {
	border-color: #9ca3af;
}

.inv-chip input:checked + span {
	background: #111827;
	border-color: #111827;
	color: #fff;
}

.inv-chip input:focus-visible + span {
	outline: 2px solid var( --inv-accent );
	outline-offset: 3px;
}

/* The submit sits a little clear of the field above it. */
.inv-form__submit {
	margin-top: 0.5rem;
}

.inv-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inv-form__status {
	font-size: var( --wp--preset--font-size--body-sm );
	border-left: 2px solid var( --inv-accent );
	padding-left: 0.9rem;
}

.inv-form__status[ data-state='error' ] {
	border-color: #b3261e;
}

/* The form and its aside. The form column takes the extra width. */
.inv-connect {
	display: grid;
	gap: 3rem;
}

.inv-connect > * {
	margin-block: 0;
}

@media ( min-width: 1024px ) {
	.inv-connect {
		grid-template-columns: 1.3fr 1fr;
		gap: 4rem;
	}

	.inv-connect__aside {
		padding-top: 0.5rem;
	}
}

/* The contact card at the top of the aside. */
.inv-contact-card {
	background: var( --inv-paper-2 );
	padding: 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-contact-card {
		padding: 2rem;
	}
}

.inv-contact-card > * {
	margin-block: 0;
}

.inv-contact__place {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --inv-warm );
}

.inv-contact-card h2 {
	margin-top: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.inv-contact__email {
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
}

.inv-contact__email a {
	color: var( --inv-accent );
	text-decoration: underline;
	text-underline-offset: 4px;
}

.inv-contact__address {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

.inv-contact__phone {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-contact-card h2 { font-size: 1.5rem; }
	.inv-contact__email { font-size: 1.125rem; }
	.inv-contact__address,
	.inv-contact__phone { font-size: 0.9375rem; }
}

/* The questions worth answering before anyone writes in. Each one opens with a
   rule and a last empty row closes the list, exactly as the awards ladder. */
.inv-connect__faq {
	margin-top: 2rem;
}

.inv-faq__item {
	border-top: 1px solid var( --inv-rule );
	padding-block: 1.25rem;
}

.inv-faq__item > * {
	margin-block: 0;
}

.inv-faq__end {
	border-top: 1px solid var( --inv-rule );
}

.inv-faq__q {
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: 400;
	color: var( --inv-ink );
}

.inv-faq__a {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --inv-warm );
}

/* --------------------------------------------------------------------------
   CTA band + footer
   -------------------------------------------------------------------------- */

/* A dark card sitting on the paper-2 section, with an accent glow that grows
   on hover. */
.inv-cta {
	background: var( --inv-paper-2 );
	padding-block: 4rem;
}

@media ( min-width: 640px ) {
	.inv-cta {
		padding-block: 5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-cta {
		padding-block: 7rem;
	}
}

.inv-cta__inner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #111827;
	color: #fff;
	padding: 3rem 1.5rem;
}

@media ( min-width: 640px ) {
	.inv-cta__inner {
		padding: 4rem 2.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-cta__inner {
		padding: 5rem 4rem;
	}
}

.inv-cta__inner::before {
	content: '';
	position: absolute;
	top: -6rem;
	right: -6rem;
	z-index: -1;
	width: 420px;
	height: 420px;
	border-radius: 9999px;
	pointer-events: none;
	background: rgba( 242, 101, 34, 0.25 );
	filter: blur( 110px );
	transition: transform 1200ms ease-out;
}

.inv-cta__inner:hover::before {
	transform: scale( 1.25 );
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-cta__inner::before {
		transition: none;
	}

	.inv-cta__inner:hover::before {
		transform: none;
	}
}

.inv-cta__inner > .inv-label {
	color: rgba( 255, 255, 255, 0.5 );
	letter-spacing: 0.025em;
	line-height: 1.5;
	font-size: 0.8125rem;
	text-transform: none;
}

@media ( min-width: 640px ) {
	.inv-cta__inner > .inv-label {
		font-size: 0.875rem;
	}
}

.inv-cta h2 {
	margin: 1.25rem 0 0;
	max-width: 18ch;
	color: #fff;
}

@media ( min-width: 640px ) {
	.inv-cta h2 {
		margin-top: 1.5rem;
	}
}

.inv-cta p {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.6 );
	max-width: 52ch;
}

@media ( min-width: 640px ) {
	.inv-cta p {
		font-size: 1rem;
	}
}

.inv-cta .wp-block-buttons {
	margin-top: 2rem;
}

@media ( min-width: 640px ) {
	.inv-cta .wp-block-buttons {
		margin-top: 2.5rem;
	}
}

.inv-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var( --inv-ink );
	color: var( --inv-paper );
	--inv-fx: 50%;
	--inv-fy: 50%;
	--inv-fo: 0;
}

/* The footer plate.
 *
 * The original hero ran a four-layer shader stack, and the built site moved it
 * here and recoloured it dark. Reproduced without WebGPU, layer for layer:
 *
 *   Swirl       #241F21 → #37302F, detail 1.7   → the drifting base
 *   ChromaFlow  #ff5f03, momentum 13, radius 3.5 → orange pushed by the pointer
 *   FlutedGlass angle 31, frequency 8, refraction 4, highlight 0.12,
 *               lightAngle -90, softness 1, speed 0.15 → eight ribs of glass
 *   FilmGrain   strength 0.05
 *
 * The colour only moves while the pointer does, which is why the whole thing
 * reads as a hover effect.
 */
.inv-field {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Swirl — the slow base. */
.inv-field__swirl {
	position: absolute;
	inset: -25%;
	background:
		radial-gradient( 45% 55% at 28% 32%, #37302f 0%, rgba( 55, 48, 47, 0 ) 70% ),
		radial-gradient( 50% 60% at 74% 68%, #37302f 0%, rgba( 55, 48, 47, 0 ) 72% ),
		radial-gradient( 60% 70% at 52% 12%, #2e2827 0%, rgba( 46, 40, 39, 0 ) 75% );
	animation: inv-swirl 42s ease-in-out infinite alternate;
}

@keyframes inv-swirl {
	from {
		transform: translate3d( -2%, -1.5%, 0 ) scale( 1.05 );
	}
	to {
		transform: translate3d( 2%, 1.5%, 0 ) scale( 1.12 );
	}
}

/* ChromaFlow — the accent the pointer pushes around. */
.inv-field__flow {
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(
			38% 46% at var( --inv-fx, 50% ) var( --inv-fy, 50% ),
			rgba( 255, 95, 3, 0.55 ) 0%,
			rgba( 255, 95, 3, 0.24 ) 38%,
			rgba( 255, 95, 3, 0 ) 72%
		);
	filter: blur( 50px );
	opacity: var( --inv-fo, 0 );
	transition: opacity 900ms var( --inv-ease );
	will-change: opacity;
}

/* FlutedGlass — eight ribs, skewed to the source's 31 degrees. The overhang
   keeps the skewed ends off screen. */
.inv-field__glass {
	position: absolute;
	left: -48vh;
	right: -48vh;
	top: -25%;
	height: 150%;
	display: flex;
}

/* The ribs rest off the bottom of the plate and only sweep in on hover, so the
   footer is quiet until you reach it. Timing is lifted from the route curtain
   verbatim — 340ms cover in, 420ms reveal out, staggered per rib — so the
   footer plays the same animation as a page transition. */
.inv-field__rib {
	position: relative;
	flex: 1;
	transform: skewX( -31deg ) translateY( 175% ) translateZ( 0 );
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 420ms cubic-bezier( 0.4, 0, 0.2, 1 );
	transition-delay: calc( var( --inv-slat, 0 ) * 26ms );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	/* highlight 0.12 from lightAngle -90, and the warm/cool split that
	   aberration 0.61 leaves on each edge. */
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0.12 ) 0%,
		rgba( 255, 170, 120, 0.04 ) 8%,
		rgba( 255, 255, 255, 0 ) 42%,
		rgba( 120, 170, 255, 0.03 ) 88%,
		rgba( 0, 0, 0, 0.16 ) 100%
	);
}

.inv-footer:hover .inv-field__rib,
.inv-footer.is-lit .inv-field__rib {
	transform: skewX( -31deg ) translateY( 0 ) translateZ( 0 );
	transition: transform 340ms cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: calc( var( --inv-slat, 0 ) * 20ms );
}

/* Touch has no hover to give, so the glass simply stays put rather than
   never appearing at all. */
@media ( hover: none ) {
	.inv-field__rib {
		transform: skewX( -31deg );
		transition: none;
		transition-delay: 0s;
	}
}

/* FilmGrain — strength 0.05. */
.inv-field__grain {
	position: absolute;
	inset: 0;
	background-image: var( --inv-grain-url );
	background-repeat: repeat;
	opacity: 0.05;
}

/* The footer's own content rides above the plate. */
.inv-footer > .inv-shell {
	position: relative;
	z-index: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-field__swirl {
		animation: none;
	}

	.inv-field__flow {
		transition: none;
	}

	/* No sweep, but the fluted glass still reads — the ribs simply sit in
	   place instead of animating in. */
	.inv-field__rib {
		transform: skewX( -31deg );
		transition: none;
		transition-delay: 0s;
	}

	.inv-footer:hover .inv-field__rib,
	.inv-footer.is-lit .inv-field__rib {
		transform: skewX( -31deg );
		transition: none;
		transition-delay: 0s;
	}
}

.inv-footer .inv-footer__top {
	padding-top: 3rem;
}

@media ( min-width: 640px ) {
	.inv-footer .inv-footer__top {
		padding-top: 3.5rem;
	}
}

/* Address on the left, mailing list on the right, both sitting on the same
   baseline at the bottom of the band. */
.inv-footer__lead {
	display: grid;
	gap: 2rem;
}

@media ( min-width: 1024px ) {
	.inv-footer__lead {
		grid-template-columns: 1.25fr 1fr;
		align-items: end;
		gap: 4rem;
	}
}

.inv-footer .inv-footer__status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba( 242, 239, 234, 0.6 );
}

/* The live dot, with the halo that pulses out of it. */
.inv-dot {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var( --inv-accent );
}

.inv-dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	opacity: 0.7;
	animation: inv-ping 1000ms cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}

@keyframes inv-ping {
	75%,
	100% {
		transform: scale( 2 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.inv-dot::before {
		animation: none;
	}
}

.inv-footer .inv-footer__title {
	margin: 1.25rem 0 0;
	max-width: 14ch;
	font-size: var( --wp--preset--font-size--d-2 );
	letter-spacing: -0.04em;
	line-height: 1.1;
	font-weight: 400;
}

.inv-footer .inv-footer__mail {
	margin: 1.25rem 0 0;
	font-size: var( --wp--preset--font-size--d-4 );
	letter-spacing: -0.04em;
	line-height: 1.1;
	word-break: break-word;
}

/* The mailing-list block closes on a hairline of its own. */
.inv-footer .inv-signup-block {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	padding-bottom: 3rem;
}

@media ( min-width: 1024px ) {
	.inv-footer .inv-signup-block {
		padding-bottom: 4rem;
	}
}

.inv-footer .inv-signup-block__grid {
	display: grid;
	gap: 1.5rem;
}

@media ( min-width: 1024px ) {
	.inv-footer .inv-signup-block__grid {
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: 4rem;
	}
}

.inv-footer .inv-signup__title {
	margin: 0;
	max-width: 16ch;
	font-size: var( --wp--preset--font-size--d-4 );
	letter-spacing: -0.04em;
	line-height: 1.1;
	font-weight: 400;
	color: #fff;
}

.inv-footer .inv-signup__note {
	margin: 0.75rem 0 0;
	max-width: 46ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.5 );
}

.inv-footer .inv-signup__legal {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.4 );
}

.inv-footer .inv-footer__cols {
	display: grid;
	gap: 2rem;
	border-top: 1px solid rgba( 242, 239, 234, 0.15 );
	margin-top: 2.5rem;
	padding-block: 2.5rem;
}

@media ( min-width: 640px ) {
	.inv-footer .inv-footer__cols {
		grid-template-columns: repeat( 2, 1fr );
		gap: 2.5rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-footer .inv-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	}
}

.inv-footer .inv-footer__cols h3 {
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: -0.02em;
	line-height: 1.4;
	color: rgba( 242, 239, 234, 0.4 );
	font-weight: 400;
}

.inv-footer .inv-footer__cols ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.5;
}

.inv-footer .inv-footer__blurb {
	margin: 0;
	max-width: 32ch;
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.4;
	color: rgba( 242, 239, 234, 0.6 );
}

/* Two addresses, two sizes: meta under the blurb, body under the link list. */
.inv-footer .inv-footer__place {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba( 242, 239, 234, 0.6 );
}

.inv-footer .inv-footer__place--body {
	font-size: var( --wp--preset--font-size--body-sm );
	line-height: 1.5;
}

.inv-footer .inv-signup {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );
	padding-bottom: 0.75rem;
}

/* Present to a screen reader, absent to everyone else. */
.inv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.inv-footer .inv-signup .inv-field {
	flex: 1 1 auto;
	min-width: 0;
}

.inv-footer .inv-signup input {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 1rem;
	color: #fff;
}

.inv-footer .inv-signup input::placeholder {
	color: rgba( 255, 255, 255, 0.3 );
}

/* The mailing-list submit is the arrow on its own, not a labelled pill. */
.inv-signup__send {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	cursor: pointer;
	border-radius: 9999px;
	background: #fff;
	color: var( --inv-ink );
	transition: transform 500ms var( --inv-ease );
}

.inv-signup__send:hover {
	transform: rotate( -45deg );
}

.inv-signup__send svg {
	width: 16px;
	height: 16px;
}

.inv-footer .inv-footer__bottom,
.inv-footer .inv-footer__base {
	margin-top: 0;
}

.inv-footer .inv-footer__base {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-top: 1px solid rgba( 242, 239, 234, 0.15 );
	padding-block: 1rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba( 242, 239, 234, 0.4 );
}

@media ( min-width: 640px ) {
	.inv-footer .inv-footer__base {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* The copyright and the partner badge share the left end of the base bar. */
.inv-footer .inv-footer__base-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.inv-partner {
	display: inline-flex;
	align-items: center;
	opacity: 0.75;
	transition: opacity 300ms var( --inv-ease );
}

.inv-partner:hover {
	opacity: 1;
}

.inv-partner img {
	display: block;
	height: 30px;
	width: auto;
}

.inv-footer .inv-footer__base ul {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.inv-page-hero {
	padding-top: calc( var( --inv-nav-h ) + 2.5rem );
	padding-bottom: 3rem;
}

@media ( min-width: 640px ) {
	.inv-page-hero {
		padding-top: calc( var( --inv-nav-h ) + 3.5rem );
		padding-bottom: 4rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-page-hero {
		padding-top: calc( var( --inv-nav-h ) + 4rem );
		padding-bottom: 5rem;
	}
}

/* The badge already sets the gap above the title. */
.inv-page-hero h1 {
	max-width: 18ch;
	margin: 0;
}

.inv-page-hero__lede {
	max-width: 52ch;
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --inv-warm );
}

@media ( min-width: 640px ) {
	.inv-page-hero__lede {
		margin-top: 2rem;
		font-size: 1.0625rem;
	}
}

/* The 404 sits taller in the page than the interior heroes and pulls both of
   its lines in tighter. */
.inv-page-hero--404 {
	padding-top: calc( var( --inv-nav-h ) + 4rem );
	padding-bottom: 5rem;
}

@media ( min-width: 640px ) {
	.inv-page-hero--404 {
		padding-top: calc( var( --inv-nav-h ) + 5rem );
		padding-bottom: 7rem;
	}
}

@media ( min-width: 1024px ) {
	.inv-page-hero--404 {
		padding-top: calc( var( --inv-nav-h ) + 6rem );
		padding-bottom: 9rem;
	}
}

.inv-page-hero--404 h1 {
	max-width: 16ch;
}

.inv-page-hero--404 .inv-page-hero__lede {
	max-width: 46ch;
}

/* A journal article titles one step down from the index pages, and sets its
   body a little wider than the project write-ups. */
.inv-page-hero--post h1 {
	max-width: 20ch;
	margin-top: 1.5rem;
	font-size: var( --wp--preset--font-size--d-2 );
	line-height: 1.1;
}

/* The measure has to beat the shell's blanket max-width reset. */
.inv-shell .inv-article,
.inv-article {
	max-width: 68ch;
}

/* Article body. The importer writes plain core blocks here so the entries stay
   ordinary posts, which means the typography has to come off element
   selectors rather than classes. */
.inv-article p {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var( --inv-warm );
}

.inv-article h2 {
	margin: 2.5rem 0 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var( --inv-ink );
}

.inv-article blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var( --inv-accent );
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	line-height: 1.45;
	color: var( --inv-ink );
}

.inv-article blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.inv-article ul {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

/* The marker is an accent dot set on the first line, not a bullet glyph. */
.inv-article li {
	position: relative;
	padding-left: 1rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --inv-warm );
}

.inv-article li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6875rem;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var( --inv-accent );
}

@media ( min-width: 640px ) {
	.inv-article p,
	.inv-article li {
		font-size: 1.0625rem;
	}

	.inv-article h2 {
		margin-top: 3.5rem;
		font-size: 1.625rem;
	}

	.inv-article blockquote {
		margin: 3rem 0;
		padding-left: 1.75rem;
		font-size: 1.375rem;
	}

	.inv-article li::before {
		top: 0.75rem;
	}
}

/* A project write-up runs as two badged columns rather than one prose river. */
.inv-narrative {
	display: grid;
	gap: 3rem;
}

.inv-narrative > * {
	margin-top: 0;
}

@media ( min-width: 1024px ) {
	.inv-narrative {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 4rem;
	}
}

.inv-narrative__p {
	max-width: 58ch;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --inv-warm );
}

.inv-narrative__p:last-child {
	margin-bottom: 0;
}

@media ( min-width: 640px ) {
	.inv-narrative__p {
		font-size: 1rem;
	}
}

/* Skip link */
.inv-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	background: var( --inv-ink );
	color: var( --inv-paper );
	padding: 0.75rem 1rem;
}

.inv-skip:focus {
	left: 1rem;
	top: 1rem;
}

/* --------------------------------------------------------------------------
   Core-block containers
   The sections are built from core Group blocks so their text stays editable.
   Those blocks ship a default vertical rhythm; inside the layouts below the
   gap is set by the grid, so the inherited margins are cleared.
   -------------------------------------------------------------------------- */

/* The sections butt straight up against one another — each one carries its own
   vertical rhythm in its padding, so the flow margin between siblings has to
   go or the whole page grows by 24px a section. */
.inv-hero,
.inv-section,
.inv-cta {
	margin-block: 0;
}

.inv-head > *,
.inv-hero__body > *,
.inv-footer__top > *,
.inv-footer__lead > *,
.inv-signup-block > *,
.inv-signup-block__grid > *,
.inv-footer__cols > *,
.inv-footer__base > *,
.inv-split > *,
.inv-values > *,
.inv-team > *,
.inv-quotes > *,
.inv-intro > *,
.inv-discipline > *,
.inv-discipline__text > *,
.inv-discipline__top > *,
.inv-discipline__mid > *,
.inv-discipline__bottom > *,
.inv-process__step > *,
.inv-stats > *,
.inv-stat > *,
.inv-testimonial > *,
.inv-why > *,
.inv-why__figures > *,
.inv-services > *,
.inv-service__top > *,
.inv-award > *,
.inv-value > * {
	margin-block: 0;
}

/* The two sticky stacks set their own rhythm, so the flow margin has to go
   but the trailing gap the stack depends on has to stay. */
.inv-disciplines > *,
.inv-disciplines > :last-child {
	margin-block: 0 1.25rem;
}

/* The process ladder is the same case: the flow margin above each card goes,
   the gap under it is what separates the pinned cards. */
.inv-process > *,
.inv-process > :last-child {
	margin-block: 0 1rem;
}

@media ( min-width: 640px ) {
	.inv-process > *,
	.inv-process > :last-child {
		margin-block: 0 1.25rem;
	}
}

/* Core wraps every Group in a div with its own layout class; none of them
   should introduce a width of their own inside a shell. */
.inv-shell > .wp-block-group,
.inv-section > .wp-block-group {
	max-width: none;
}

/* Editor niceties — keep the canvas honest about the fixed header. */
.editor-styles-wrapper .inv-nav {
	position: relative;
}

.editor-styles-wrapper .inv-hero,
.editor-styles-wrapper .inv-project-hero {
	min-height: 60vh;
}