.landing {
	--landing-paper: #f8f8f6;
	--landing-ink: #111111;
	--landing-bg: var(--landing-paper);
	--landing-fg: var(--landing-ink);
	--landing-muted: #6c6c6a;
	--landing-line: color-mix(in srgb, var(--landing-fg) 16%, transparent);
	--landing-night: #0e0e0e;
	--landing-night-muted: #8e8e8b;
	--landing-night-line: color-mix(in srgb, var(--landing-paper) 20%, transparent);
	--landing-serif: "Fraunces", Georgia, serif;
	--landing-sans: "Manrope", system-ui, sans-serif;
	--landing-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--landing-edge: 1rem;
	--landing-gutter: 1.5rem;
	--landing-section: 5.5rem;
	--landing-stack: 3rem;
	--landing-gap: 0.75rem;
	--landing-nav-height: 4rem;
	--landing-display: 2.75rem;
	--landing-title: 3rem;
	--landing-statement: 2.5rem;
	--landing-project: 1.5rem;
	--landing-lead: 1.0625rem;
	--landing-label: 0.6875rem;

	margin: 0;
	background: var(--landing-bg);
	color: var(--landing-fg);
	font: 400 1rem/1.65 var(--landing-sans);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--landing-fg);
	color: var(--landing-paper);
}

@media (min-width: 768px) {
	.landing {
		--landing-edge: 1.5rem;
		--landing-gutter: 3rem;
		--landing-section: 8rem;
		--landing-stack: 5rem;
		--landing-gap: 1.5rem;
		--landing-display: 4.25rem;
		--landing-title: 4.75rem;
		--landing-statement: 3.75rem;
		--landing-project: 1.875rem;
		--landing-lead: 1.125rem;
		--landing-label: 0.75rem;
	}
}

@media (min-width: 1200px) {
	.landing {
		--landing-edge: 2rem;
		--landing-gutter: 6rem;
		--landing-section: 11rem;
		--landing-stack: 7rem;
		--landing-gap: 2rem;
		--landing-nav-height: 5.5rem;
		--landing-display: 5.75rem;
		--landing-title: 6.75rem;
		--landing-statement: 4.75rem;
		--landing-project: 2.25rem;
	}
}

@media (min-width: 1600px) {
	.landing {
		--landing-display: 6.75rem;
		--landing-title: 7.75rem;
		--landing-statement: 5.5rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:not(.lenis) {
		scroll-behavior: smooth;
	}
}

html.lenis,
html.lenis body {
	height: auto;
}

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

.lenis [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

:where(.landing) *,
:where(.landing) *::before,
:where(.landing) *::after {
	box-sizing: border-box;
}

:where(.landing) h1,
:where(.landing) h2,
:where(.landing) h3,
:where(.landing) p,
:where(.landing) figure {
	margin: 0;
}

:where(.landing) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.landing) a {
	color: inherit;
}

:where(.landing) button,
:where(.landing) input,
:where(.landing) select,
:where(.landing) textarea {
	color: inherit;
	font: inherit;
}

.landing :focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.landing-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--landing-gutter);
}

.landing-section {
	padding-block: var(--landing-section);
}

.landing-label {
	font-size: var(--landing-label);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.landing-title {
	font-family: var(--landing-serif);
	font-size: var(--landing-title);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1;
	overflow-wrap: break-word;
}

.landing-section-head {
	margin-bottom: var(--landing-stack);
	text-align: center;
}

.landing-button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.875rem 1.625rem 1rem;
	overflow: hidden;
	border: 1px solid var(--landing-button-line, color-mix(in srgb, currentColor 35%, transparent));
	border-radius: 999px;
	background: var(--landing-button-fill, transparent);
	color: inherit;
	font: italic 300 1.1875rem/1.1 var(--landing-serif);
	text-align: center;
	text-decoration: none;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	cursor: pointer;
}

.landing-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--landing-button-hover, color-mix(in srgb, currentColor 6%, transparent));
	opacity: 0;
	transition: opacity 0.5s ease;
}

.landing-button:hover::before {
	opacity: 1;
}

.landing-button svg,
.landing-link svg {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	transition: transform 0.6s var(--landing-ease);
}

.landing-button:hover svg {
	transform: translateX(0.25rem);
}

.landing-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.625rem 0;
	font-size: var(--landing-label);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
}

.landing-link::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
	transform-origin: left;
}

.landing-link:hover::after {
	animation: landing-redraw 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}

@keyframes landing-redraw {
	0% {
		transform: scaleX(1);
		transform-origin: right;
	}

	50% {
		transform: scaleX(0);
		transform-origin: right;
	}

	50.01% {
		transform: scaleX(0);
		transform-origin: left;
	}

	100% {
		transform: scaleX(1);
		transform-origin: left;
	}
}

.landing-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 2rem;
}

.landing-js .landing-reveal {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 1.1s var(--landing-ease), transform 1.3s var(--landing-ease);
}

.landing-js .landing-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.landing-js .landing-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.landing-motion .landing-split:not(.is-split) {
	visibility: hidden;
}

.landing-nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--landing-nav-height);
	padding-inline: var(--landing-edge);
	color: #fff;
	mix-blend-mode: difference;
}

.landing-skip {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 60;
	padding: 0.75rem 1rem;
	background: var(--landing-ink);
	color: var(--landing-paper);
	font-size: 0.875rem;
	transform: translateY(-200%);
}

.landing-skip:focus {
	transform: none;
}

.admin-bar .landing-nav {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .landing-nav {
		top: 32px;
	}
}

.landing-nav-logo {
	flex-shrink: 0;
	display: block;
	width: 8.5rem;
}

.landing-nav-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.landing-nav-cta {
	min-width: 0;
	text-align: end;
}

@media (min-width: 1200px) {
	.landing-nav-logo {
		width: 11rem;
	}
}

.landing-hero {
	--landing-button-line: color-mix(in srgb, var(--landing-paper) 45%, transparent);
	--landing-button-fill: color-mix(in srgb, var(--landing-paper) 8%, transparent);
	--landing-button-hover: color-mix(in srgb, var(--landing-paper) 16%, transparent);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: calc(var(--landing-nav-height) + 3rem) var(--landing-stack);
	overflow: hidden;
	background: var(--landing-night);
	color: var(--landing-paper);
}

.landing-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, color-mix(in srgb, var(--landing-night) 62%, transparent), color-mix(in srgb, var(--landing-night) 10%, transparent) 55%, color-mix(in srgb, var(--landing-night) 8%, transparent));
}

.landing-hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.landing-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

/* settles out of a slow push-in on load, the same gesture as the work frames */
.landing-motion .landing-hero-image img {
	animation: landing-hero-settle 2.8s var(--landing-ease) both;
}

/* the gradient sits above the image, so fading opacity here would flash the page behind */
@keyframes landing-hero-settle {
	from {
		transform: scale(1.09);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.landing-motion .landing-hero-image img {
		animation: none;
	}
}

.landing-hero-cue {
	position: absolute;
	right: var(--landing-edge);
	bottom: var(--landing-stack);
	width: 1px;
	height: 4.5rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--landing-paper) 30%, transparent);
}

.landing-hero-cue::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--landing-paper);
	transform: translateY(-100%);
	animation: landing-cue 2.4s var(--landing-ease) infinite;
}

@keyframes landing-cue {
	to {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.landing-hero-cue::after {
		animation: none;
	}
}

.landing-hero-content {
	max-width: 62rem;
}

.landing-hero-title {
	font-family: var(--landing-serif);
	font-size: var(--landing-display);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 0.98;
	overflow-wrap: break-word;
}

.landing-hero-text {
	max-width: 30rem;
	margin-top: 1.5rem;
	font-size: var(--landing-lead);
}

.landing-hero-name {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 1.5rem;
}

.landing-hero-name::before {
	content: "";
	flex-shrink: 0;
	width: 2.5rem;
	height: 1px;
	background: currentColor;
}

.landing-hero--center {
	align-items: center;
	text-align: center;
}

.landing-hero--center .landing-hero-content,
.landing-hero--center .landing-hero-text {
	margin-inline: auto;
}

.landing-hero--center .landing-actions {
	justify-content: center;
}

.landing-work {
	--landing-work-height: 62vh;
	--landing-work-gap: var(--landing-gap);
	--landing-work-size: 1;
	--landing-work-lane: 0;
	--landing-work-scatter: 0;

	padding-block: var(--landing-section);
}

/* the title is the track's first column, so it scrolls away with the images */
.landing-work-intro {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(85vw, 34rem);
	gap: var(--landing-stack);
}

.landing-work-intro .landing-title {
	text-wrap: balance;
}

.landing-work-cue {
	color: var(--landing-muted);
}

.landing-work-cue::after {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	margin-left: 0.875rem;
	background: currentColor;
	vertical-align: middle;
}

/* touch gets a real swipe strip: pinned horizontal scroll is unreliable on ios */
.landing-work-track {
	display: flex;
	align-items: center;
	gap: var(--landing-work-gap);
	height: var(--landing-work-height);
	padding-inline: var(--landing-gutter);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.landing-work-track::-webkit-scrollbar {
	display: none;
}

/* height is the only fixed dimension: width follows each image's own ratio */
.landing-work-item {
	flex-shrink: 0;
	height: calc( var(--landing-work-height) * var(--landing-work-size) );
	overflow: hidden;
	scroll-snap-align: center;
}

.landing-work-item img {
	width: auto;
	height: 100%;
	aspect-ratio: var(--landing-work-ratio);
	object-fit: contain;
}

/* revealed centred once the rail has finished, so it is the section's last beat */
.landing-work-outro {
	display: flex;
	justify-content: center;
	margin-top: var(--landing-stack);
	padding-inline: var(--landing-gutter);
}

.landing-work-outro .landing-button {
	font-size: 1.375rem;
	padding: 1.125rem 2.25rem 1.25rem;
}

@media (min-width: 1024px) {
	.landing-work {
		--landing-work-height: 72vh;
	}

	/* gsap pins this element, so it must be the one that clips the overflowing track */
	.landing-work.is-pinned {
		position: relative;
		/* the statement isolates and follows in source order, so it would paint over the pin */
		z-index: 2;
		height: 100vh;
		height: 100svh;
		padding-block: 0;
		overflow: clip;
		background: var(--landing-bg);
	}

	.landing-work.is-pinned .landing-work-viewport {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		overflow: clip;
	}

	.landing-work.is-pinned .landing-work-track {
		height: 100%;
		overflow: visible;
		scroll-snap-type: none;
	}

	.landing-work.is-pinned .landing-work-outro {
		position: absolute;
		inset: 0;
		z-index: 1;
		align-items: center;
		margin-top: 0;
		opacity: var(--landing-work-outro, 0);
		/* unreachable until revealed, so it never swallows clicks on the frames */
		pointer-events: none;
	}

	.landing-work.is-pinned .landing-work-outro .landing-button {
		translate: 0 calc( ( 1 - var(--landing-work-outro, 0) ) * 2rem );
	}

	.landing-work.is-pinned.is-outro .landing-work-outro {
		pointer-events: auto;
	}

	/* --landing-work-scatter runs 0 to 1 as the track advances, so entry stays on-rail */
	.landing-work.is-pinned .landing-work-item {
		translate: 0 calc( var(--landing-work-lane) * var(--landing-work-scatter) * (100svh - var(--landing-work-height) * var(--landing-work-size)) / 2 );
	}
}

.landing-work-track:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 0.5rem;
}

.landing-motion .landing-work-item img {
	transform: scale(1.12);
	transition: transform 1.6s var(--landing-ease);
}

.landing-motion .landing-work-item.is-visible img {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.landing-work-track {
		scroll-snap-type: none;
	}

	.landing-motion .landing-work-item img {
		transform: none;
		transition: none;
	}

	.landing-work.is-pinned .landing-work-item {
		translate: none;
	}
}

.landing-statement {
	--landing-progress: 1;

	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.landing-statement-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scale(var(--landing-progress));
}

.landing-statement-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--landing-night) 55%, transparent), color-mix(in srgb, var(--landing-night) 25%, transparent) 50%, color-mix(in srgb, var(--landing-night) 30%, transparent));
}

.landing-statement-layer {
	position: absolute;
	inset: 0;
}

.landing-statement-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.landing-statement-layer--front img {
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

.landing-statement-layer--front:nth-child(3) {
	transform: scale(0.85);
}

.landing-statement-layer--front:nth-child(4) {
	transform: scale(0.6);
}

.landing-statement-layer--front:nth-child(5) {
	transform: scale(0.45);
}

.landing-statement-layer--front:nth-child(6) {
	transform: scale(0.3);
}

.landing-statement-layer--front:nth-child(7) {
	transform: scale(0.15);
}

.landing-statement-layer--front:nth-child(n + 5) {
	display: none;
}

.landing-statement:not(.is-animated) .landing-statement-layer--front,
.landing-statement:not(.is-animated) .landing-statement-scatter {
	display: none;
}

.landing-statement-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: calc(100% - var(--landing-gutter) * 2);
	color: var(--landing-fg);
	color: color-mix(in srgb, var(--landing-paper) calc(var(--landing-progress) * 100%), var(--landing-fg));
	font-family: var(--landing-serif);
	font-size: var(--landing-statement);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-align: center;
	overflow-wrap: break-word;
}

.landing-statement-half {
	display: block;
}

.landing-statement-half:first-child {
	transform: translate3d(0, calc(var(--landing-progress) * -20svh), 0);
}

.landing-statement-half:last-child {
	transform: translate3d(0, calc(var(--landing-progress) * 20svh), 0);
}

.landing-statement-body {
	position: absolute;
	bottom: var(--landing-stack);
	left: 50%;
	width: min(30rem, 100% - var(--landing-gutter) * 2);
	opacity: clamp(0, (var(--landing-progress) - 0.75) * 4, 1);
	color: var(--landing-paper);
	font-size: var(--landing-lead);
	text-align: center;
	transform: translateX(-50%);
}

.landing-statement-scatter {
	position: absolute;
	inset: 0;
	perspective: 100vh;
	pointer-events: none;
}

.landing .landing-statement-scatter img {
	position: absolute;
	width: 22vw;
}

.landing-statement-scatter img:nth-child(1) { top: 6%; left: 4%; }
.landing-statement-scatter img:nth-child(2) { top: 10%; left: 58%; }
.landing-statement-scatter img:nth-child(3) { top: 22%; left: 30%; }
.landing-statement-scatter img:nth-child(4) { top: 26%; right: 4%; }
.landing-statement-scatter img:nth-child(5) { bottom: 24%; left: 6%; }
.landing-statement-scatter img:nth-child(6) { bottom: 8%; left: 36%; }
.landing-statement-scatter img:nth-child(7) { bottom: 20%; right: 8%; }
.landing-statement-scatter img:nth-child(8) { bottom: 4%; right: 3%; }

@media (min-width: 1024px) {
	.landing-statement-layer--front:nth-child(n + 5) {
		display: block;
	}

	.landing-statement-title {
		position: absolute;
		inset: 0;
		display: block;
		max-width: none;
	}

	.landing-statement-half {
		position: absolute;
		top: 50%;
		max-width: calc(50vw - var(--landing-gutter));
	}

	.landing-statement-half:first-child {
		right: calc(50% + 0.15em);
		text-align: end;
		transform: translate3d(calc(var(--landing-progress) * (-50vw + 100% + var(--landing-gutter) + 0.15em)), -50%, 0);
	}

	.landing-statement-half:last-child {
		left: calc(50% + 0.15em);
		text-align: start;
		transform: translate3d(calc(var(--landing-progress) * (50vw - 100% - var(--landing-gutter) - 0.15em)), -50%, 0);
	}

	.landing .landing-statement-scatter img {
		width: 10vw;
	}

	.landing-statement-scatter img:nth-child(1) { top: 10%; left: 4%; }
	.landing-statement-scatter img:nth-child(2) { top: 5%; left: 24%; }
	.landing-statement-scatter img:nth-child(3) { top: 17%; left: 41%; }
	.landing-statement-scatter img:nth-child(4) { top: 7%; right: 22%; }
	.landing-statement-scatter img:nth-child(5) { top: 21%; right: 5%; }
	.landing-statement-scatter img:nth-child(6) { bottom: 9%; left: 8%; }
	.landing-statement-scatter img:nth-child(7) { bottom: 19%; left: 29%; }
	.landing-statement-scatter img:nth-child(8) { bottom: 6%; right: 12%; }
}

.landing-projects-list {
	display: grid;
	gap: var(--landing-stack) var(--landing-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.landing-project-link {
	display: block;
	text-decoration: none;
}

.landing-project-media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.landing-project-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--landing-ease);
}

.landing-project-link:hover .landing-project-media img {
	transform: scale(1.03);
}

.landing-project-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.375rem 1.5rem;
	margin-top: 1.25rem;
}

.landing-project-name {
	min-width: 0;
	font-family: var(--landing-serif);
	font-size: var(--landing-project);
	font-weight: 300;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.landing-project-location {
	color: var(--landing-muted);
}

@media (min-width: 768px) {
	.landing-projects-list {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.landing-project:nth-child(odd) {
		grid-column: 1 / 10;
	}

	.landing-project:nth-child(even) {
		grid-column: 4 / -1;
	}
}

.landing-contact {
	--landing-button-line: color-mix(in srgb, var(--landing-paper) 45%, transparent);
	--landing-button-fill: color-mix(in srgb, var(--landing-paper) 8%, transparent);
	--landing-button-hover: color-mix(in srgb, var(--landing-paper) 16%, transparent);
	--landing-muted: var(--landing-night-muted);
	--landing-line: var(--landing-night-line);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--landing-night);
	color: var(--landing-paper);
}

.landing-contact-image {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.landing-contact-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.landing-contact-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--landing-night) 72%, transparent);
}

.landing-contact-grid {
	display: grid;
	gap: var(--landing-stack) var(--landing-gap);
}

.landing-contact-title {
	font-size: var(--landing-statement);
}

.landing-contact-text {
	max-width: 26rem;
	margin-top: 1.5rem;
	color: var(--landing-muted);
	font-size: var(--landing-lead);
}

.landing-contact-links {
	display: grid;
	gap: 1.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.landing-contact-link .landing-label {
	display: block;
	color: var(--landing-muted);
}

.landing-contact-link a {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--landing-serif);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.15;
	overflow-wrap: anywhere;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

@media (min-width: 480px) {
	.landing-contact-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem var(--landing-gap);
	}
}

@media (min-width: 1024px) {
	.landing-contact-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
	}

	.landing-contact-intro {
		grid-column: 1 / 6;
	}

	.landing-contact-form {
		grid-column: 7 / -1;
	}
}

.landing-form-row {
	display: grid;
	gap: 0 1.5rem;
}

@media (min-width: 768px) {
	.landing-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.landing-field {
	display: block;
	margin-bottom: 1.75rem;
	color: var(--landing-muted);
	font-size: var(--landing-label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

fieldset.landing-field {
	min-width: 0;
	margin-inline: 0;
	padding: 0;
	border: 0;
}

fieldset.landing-field legend {
	padding: 0;
}

.landing-field .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.landing-field input:not([type="radio"]),
.landing-field textarea {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem 0 0.625rem;
	border: 0;
	border-bottom: 1px solid var(--landing-line);
	border-radius: 0;
	background: transparent;
	color: var(--landing-paper);
	font: 400 1rem/1.5 var(--landing-sans);
	letter-spacing: normal;
	text-transform: none;
	appearance: none;
}

.landing-field textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.landing-field input:focus,
.landing-field textarea:focus {
	border-bottom-color: currentColor;
	outline: 0;
}

.landing-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.875rem;
}

.landing-chips .wpcf7-list-item {
	position: relative;
	margin: 0;
}

.landing-chips input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.landing-chips .wpcf7-list-item-label {
	display: block;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--landing-line);
	border-radius: 999px;
	color: var(--landing-paper);
	font: 400 0.875rem/1.2 var(--landing-sans);
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 0.3s ease;
}

.landing-chips input:hover + .wpcf7-list-item-label {
	border-color: currentColor;
}

.landing-chips input:checked + .wpcf7-list-item-label {
	border-color: var(--landing-paper);
	background: var(--landing-paper);
	color: var(--landing-ink);
}

.landing-chips input:focus-visible + .wpcf7-list-item-label {
	outline: 1px solid var(--landing-paper);
	outline-offset: 3px;
}

.landing-contact-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--landing-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	cursor: pointer;
}

.landing-contact-form .wpcf7-acceptance input {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0 0;
	accent-color: var(--landing-paper);
}

.landing-contact-form .wpcf7-list-item {
	margin: 0;
}

.landing-contact-form .wpcf7-recaptcha,
.landing-contact-form .landing-recaptcha {
	margin-top: 1.75rem;
}

.landing-contact-form .wpcf7-submit {
	width: 100%;
	margin-top: 1.75rem;
	appearance: none;
}

.landing-contact-form .wpcf7-submit:hover {
	background: var(--landing-button-hover);
}

@media (min-width: 768px) {
	.landing-contact-form .wpcf7-submit {
		width: auto;
	}
}

.landing-contact-form .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	color: #FFF;
	font-size: 0.8125rem;
	letter-spacing: normal;
	text-transform: none;
}

.landing-contact-form .wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem;
	border: 1px solid var(--landing-line);
	font-size: 0.875rem;
}

.landing-footer {
	background: var(--landing-night);
	color: var(--landing-night-muted);
	font-size: 0.8125rem;
}

.landing-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 2rem var(--landing-edge);
	border-top: 1px solid color-mix(in srgb, var(--landing-paper) 12%, transparent);
}

.landing-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.landing-footer-links a,
.landing-footer-links button {
	padding: 0;
	border: 0;
	background: none;
	text-decoration: none;
	cursor: pointer;
}

.landing-footer-links a:hover,
.landing-footer-links button:hover {
	text-decoration: underline;
}

.landing-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* the fade is what makes the loop read as endless rather than as a reset */
	mask-image: linear-gradient(to right, transparent, #000 var(--landing-marquee-fade, 12%), #000 calc(100% - var(--landing-marquee-fade, 12%)), transparent);
}

.landing-marquee-track {
	display: flex;
	width: max-content;
}

.landing-marquee-run {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.landing-credibility {
	--landing-logo: 2rem;
	--landing-marquee-fade: 8%;
}

.landing-credibility-group + .landing-credibility-group {
	margin-top: var(--landing-section);
}

.landing-credibility-label {
	font-family: var(--landing-serif);
	font-size: var(--landing-project);
	font-weight: 300;
	line-height: 1.15;
	overflow-wrap: anywhere;
	margin-bottom: var(--landing-stack);
	padding-inline: var(--landing-gutter);
	text-align: center;
	opacity: 0.3;
}

.landing-credibility-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: calc(var(--landing-gutter) / 2);
}

.landing-credibility-item img,
.landing-credibility-item svg {
	max-width: none;
	width: auto;
	height: var(--landing-logo);
	object-fit: contain;
}

/* raster marks can't take currentColor, so they're knocked back to the ink */
.landing-credibility-item:not(.is-colour) img {
	filter: grayscale(1) brightness(0) opacity(0.78);
}

.landing-credibility-name {
	font-family: var(--landing-serif);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

/* without js the run never clones, so it has to wrap instead of overflow */
.landing-marquee:not(.is-running) .landing-marquee-track {
	width: 100%;
}

.landing-marquee:not(.is-running) .landing-credibility-list {
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 0;
	padding-inline: var(--landing-gutter);
}

@media (min-width: 768px) {
	.landing-credibility {
		--landing-logo: 2.5rem;
		--landing-marquee-fade: 12%;
	}

}

@media (min-width: 1200px) {
	.landing-credibility {
		--landing-logo: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.landing-marquee {
		mask-image: none;
	}
}