/**
 * DA Digital page templates.
 *
 * Built entirely from the tokens in tokens.css. No colour literals, no values
 * that are not a token.
 */

/* --------------------------------------------------------------- Prose -- */

.da-prose--lg {
	color: var(--da-text-soft);
	font-size: var(--da-size-body-lg);
}

.da-prose--lg > * + *,
.da-prose--article > * + * {
	margin-top: var(--da-space-md);
}

.da-prose--article {
	color: var(--da-text-soft);
	font-size: var(--da-size-body-lg);
}

.da-prose--article h2 {
	margin-top: var(--da-space-2xl);
	color: var(--da-text);
	font-size: var(--da-size-h2);
	font-weight: var(--da-weight-medium);
	line-height: var(--da-leading-heading);
	letter-spacing: var(--da-tracking-heading);
}

.da-prose--article h3 {
	margin-top: var(--da-space-xl);
	color: var(--da-text);
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
}

.da-prose--article blockquote {
	margin: var(--da-space-xl) 0;
	padding-left: var(--da-space-md);
	border-left: var(--da-border-strong) solid var(--da-accent);
	color: var(--da-text);
	font-size: var(--da-size-h3);
	line-height: var(--da-leading-tight);
}

.da-prose--article img {
	border-radius: var(--da-radius-sm);
}

.da-prose--article ul,
.da-prose--article ol {
	padding-left: var(--da-space-md);
}

.da-prose--article li + li {
	margin-top: var(--da-space-2xs);
}

/* ----------------------------------------------------- Services archive -- */

.da-service-entry {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--da-space-xl);
	padding-block: clamp(2rem, 5vw, 4rem);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-service-entry:last-child {
	border-bottom: var(--da-border) solid var(--da-rule);
}

.da-service-entry__index {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
}

.da-service-entry__number {
	color: var(--da-accent-ink);
	font-size: var(--da-size-h3);
	font-variant-numeric: tabular-nums;
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
}

.da-service-entry__eyebrow {
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-service-entry__title {
	margin: 0;
}

.da-service-entry__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--da-accent), var(--da-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--da-border-strong);
	transition: background-size var(--da-dur) var(--da-ease);
}

.da-service-entry__title a:hover {
	background-size: 100% var(--da-border-strong);
}

.da-service-entry__summary {
	margin-top: var(--da-space-md);
	max-width: 54ch;
}

.da-service-entry__capabilities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs) var(--da-space-md);
	margin: var(--da-space-md) 0;
	padding: 0;
	list-style: none;
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-service-entry__capabilities li {
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
}

.da-service-entry__capabilities li::before {
	content: "";
	width: var(--da-space-2xs);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
	flex: none;
}

@media (max-width: 767px) {
	.da-service-entry {
		grid-template-columns: 1fr;
		gap: var(--da-space-md);
	}

	.da-service-entry__index {
		flex-direction: row;
		align-items: baseline;
		gap: var(--da-space-sm);
	}
}

/* ------------------------------------------------------ Single service -- */

.da-service__hero-head {
	display: flex;
	align-items: baseline;
	gap: var(--da-space-md);
}

.da-service__number {
	color: var(--da-accent);
	font-size: var(--da-size-h3);
	font-variant-numeric: tabular-nums;
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
}

.da-service__visual {
	padding-block: var(--da-space-2xl);
}

.da-service__visual-figure {
	margin: 0;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-service__visual-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateY(var(--da-parallax, 0));
}

.da-capability-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--da-border) solid var(--da-rule);
}

.da-capability {
	padding: var(--da-space-lg) var(--da-space-md) var(--da-space-lg) 0;
	border-bottom: var(--da-border) solid var(--da-rule);
}

.da-capability h3 {
	margin: 0 0 var(--da-space-2xs);
	position: relative;
	padding-top: var(--da-space-md);
}

.da-capability h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--da-space-md);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
}

.da-capability p {
	margin: 0;
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	line-height: var(--da-leading-tight);
}

.da-statement__text {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	font-weight: var(--da-weight-regular);
	line-height: 1.26;
	letter-spacing: var(--da-tracking-heading);
	text-wrap: balance;
}

.da-statement__stat {
	padding-top: var(--da-space-md);
	border-top: var(--da-border-strong) solid var(--da-accent);
}

/* FAQs ----------------------------------------------------------------- */

.da-faqs {
	border-top: var(--da-border) solid var(--da-rule);
}

.da-faq {
	border-bottom: var(--da-border) solid var(--da-rule);
}

.da-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-md);
	padding-block: var(--da-space-md);
	color: var(--da-text);
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
	cursor: pointer;
	list-style: none;
}

.da-faq__question::-webkit-details-marker {
	display: none;
}

.da-faq__question::after {
	content: "";
	width: var(--da-space-md);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
	flex: none;
	transition: transform var(--da-dur) var(--da-ease);
}

.da-faq[open] .da-faq__question::after {
	transform: rotate(90deg);
}

.da-faq__answer {
	padding-bottom: var(--da-space-md);
}

/* ---------------------------------------------------------- Work grid -- */

.da-work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--da-space-2xl) var(--da-space-lg);
}

.da-work-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.da-work-card__figure {
	position: relative;
	margin: 0 0 var(--da-space-md);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-work-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04) translateY(var(--da-parallax, 0));
	transition: transform var(--da-dur-slow) var(--da-ease);
}

.da-work-card__link:hover .da-work-card__figure img {
	transform: scale(1) translateY(var(--da-parallax, 0));
}

.da-motion .da-work-card__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--da-bg);
	transform-origin: bottom;
	transition: transform var(--da-dur-reveal) var(--da-ease);
}

.da-motion .da-work-card__figure.is-revealed::after {
	transform: scaleY(0);
}

.da-work-card__title {
	margin: 0 0 var(--da-space-2xs);
}

.da-work-card__summary {
	margin: 0 0 var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-work-grid__cell[hidden] {
	display: none;
}

/* Filters -------------------------------------------------------------- */

.da-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
	margin-bottom: var(--da-space-2xl);
	padding-bottom: var(--da-space-md);
	border-bottom: var(--da-border) solid var(--da-rule);
}

.da-filter {
	padding: var(--da-space-3xs) var(--da-space-sm);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-pill);
	background: none;
	color: var(--da-text-soft);
	font-family: inherit;
	font-size: var(--da-size-small);
	cursor: pointer;
	transition: border-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-filter:hover {
	border-color: var(--da-accent);
	color: var(--da-text);
}

.da-filter.is-active {
	border-color: var(--da-accent);
	background-color: var(--da-accent);
	/* Navy, not off-white: off-white on orange is only 2.8:1. */
	color: var(--da-navy);
}

.da-filters__empty {
	color: var(--da-text-soft);
}

/* --------------------------------------------------- Single case study -- */

.da-case__hero-media {
	padding-block: var(--da-space-2xl);
}

.da-case__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-case__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04) translateY(var(--da-parallax, 0));
}

.da-case__video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--da-radius-sm);
}

.da-case__story-title {
	margin: 0 0 var(--da-space-sm);
}

.da-case__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--da-space-md);
}

.da-case__gallery-item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-case__gallery-item--wide {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9;
}

.da-case__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.da-stat__context {
	display: block;
	margin-top: var(--da-space-2xs);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	line-height: var(--da-leading-tight);
}

@media (max-width: 767px) {
	.da-case__gallery-grid {
		grid-template-columns: 1fr;
	}

	.da-case__gallery-item--wide {
		aspect-ratio: 4 / 3;
	}
}

/* -------------------------------------------------------------- About -- */

.da-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--da-space-2xl) var(--da-space-lg);
}

.da-team-member__photo {
	margin: 0 0 var(--da-space-md);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-team-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.da-team-member__photo--empty {
	position: relative;
}

.da-team-member__photo--empty::after {
	content: "";
	position: absolute;
	top: var(--da-space-md);
	left: var(--da-space-md);
	width: var(--da-space-lg);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
}

.da-team-member__name {
	margin: 0;
}

.da-team-member__role {
	margin: var(--da-space-3xs) 0 var(--da-space-2xs);
	color: var(--da-accent-ink);
	font-size: var(--da-size-small);
}

.da-team-member__bio {
	margin: 0 0 var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-name-list {
	margin: var(--da-space-md) 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--da-border) solid var(--da-rule);
}

.da-name-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--da-space-sm);
	padding-block: var(--da-space-xs);
	border-bottom: var(--da-border) solid var(--da-rule);
	font-size: var(--da-size-body);
}

.da-name-list__tag {
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

/* ----------------------------------------------------------- Insights -- */

.da-insight-lead__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-insight-lead__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04) translateY(var(--da-parallax, 0));
}

.da-insight-lead__figure--empty::after {
	content: "";
	position: absolute;
	top: var(--da-space-md);
	left: var(--da-space-md);
	width: var(--da-space-lg);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
}

.da-insight-lead__title {
	margin: var(--da-space-sm) 0;
}

.da-insight-lead__title a {
	color: inherit;
	text-decoration: none;
}

.da-insight-lead__title a:hover {
	color: var(--da-accent);
}

.da-article__title {
	margin-top: var(--da-space-md);
}

.da-article__byline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
	margin-top: var(--da-space-md);
	color: var(--da-text-faint);
	font-size: var(--da-size-small);
}

.da-article__media {
	padding-block: var(--da-space-2xl);
}

.da-article__media figure {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateY(var(--da-parallax, 0));
}

.wp-block-post-title,
.pagination,
.navigation.pagination {
	margin-top: var(--da-space-2xl);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--da-space-2xs);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	color: var(--da-text);
	font-size: var(--da-size-small);
	text-decoration: none;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
	border-color: var(--da-accent);
	color: var(--da-accent);
}

/* ------------------------------------------------------------ Contact -- */

.da-contact__list {
	margin: var(--da-space-lg) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-lg);
}

.da-contact__big {
	display: inline-block;
	color: var(--da-text);
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
	text-decoration: none;
	border-bottom: var(--da-border) solid var(--da-rule);
	transition: border-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-contact__big:hover {
	border-bottom-color: var(--da-accent);
	color: var(--da-accent);
}

.da-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-md);
	margin: var(--da-space-2xl) 0 0;
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
	list-style: none;
}

.da-contact__social a {
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	text-decoration: none;
}

.da-contact__social a:hover {
	color: var(--da-accent);
}

/* --------------------------------------------------------------- Forms -- */

/* Off-screen rather than display:none so a bot that renders CSS still fills
   it in, while assistive technology skips it via aria-hidden. */
.da-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Off-screen, but it still must not introduce a colour outside the palette. */
.da-honeypot input {
	border: var(--da-border) solid var(--da-rule);
	color: var(--da-text);
	background-color: transparent;
}

.da-form {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
}

.da-field {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
}

.da-field__label {
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-medium);
}

.da-field__req {
	color: var(--da-accent);
}

.da-field__optional {
	color: var(--da-text-faint);
	font-weight: var(--da-weight-regular);
}

/* The parent theme styles typed inputs with `input[type=text]`-style selectors
   (0,1,1), which outrank a single class, so these are qualified to match that
   specificity and win on source order. Without this, fields keep the parent's
   #666 border. */
input.da-field__input,
select.da-field__input,
textarea.da-field__input,
.da-field__input {
	width: 100%;
	padding: var(--da-space-xs) var(--da-space-sm);
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: var(--da-radius-sm);
	background-color: transparent;
	color: var(--da-text);
	font-family: inherit;
	font-size: var(--da-size-body);
	transition: border-color var(--da-dur) var(--da-ease);
}

.da-field__input::placeholder {
	color: var(--da-text-faint);
}

.da-field__input:hover {
	border-color: var(--da-text-faint);
}

input.da-field__input:focus,
select.da-field__input:focus,
textarea.da-field__input:focus,
.da-field__input:focus {
	border-color: var(--da-accent);
	outline: var(--da-focus-width) solid var(--da-focus-color);
	outline-offset: 1px;
}

input.da-field__input:hover,
select.da-field__input:hover,
textarea.da-field__input:hover {
	border-color: var(--da-text-faint);
}

select.da-field__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--da-space-2xl);
}

/* Choice grid ---------------------------------------------------------- */

.da-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: var(--da-space-2xs);
}

.da-choice-grid--inline {
	grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
}

.da-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
	padding: var(--da-space-sm) var(--da-space-md);
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: var(--da-radius-sm);
	cursor: pointer;
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.da-choice__label {
	font-size: var(--da-size-small);
}

.da-choice::before {
	content: "";
	width: var(--da-space-sm);
	height: var(--da-space-sm);
	border: var(--da-border-strong) solid var(--da-rule-strong);
	border-radius: var(--da-radius-sm);
	flex: none;
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-choice:hover {
	border-color: var(--da-text-faint);
}

.da-choice:has(input:checked) {
	border-color: var(--da-accent);
	background-color: var(--da-orange-16);
}

.da-choice:has(input:checked)::before {
	border-color: var(--da-accent);
	background-color: var(--da-accent);
}

.da-choice:has(input:focus-visible) {
	outline: var(--da-focus-width) solid var(--da-focus-color);
	outline-offset: var(--da-focus-offset);
}

/* Notices -------------------------------------------------------------- */

.da-form__notice {
	padding: var(--da-space-md) var(--da-space-lg);
	border-left: var(--da-border-strong) solid var(--da-accent);
	background-color: var(--da-bg-alt);
	border-radius: var(--da-radius-sm);
}

.da-form__notice--ok {
	border-left-color: var(--da-accent);
}

.da-form__notice--error ul {
	margin: var(--da-space-2xs) 0 0;
	padding-left: var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-form__notice p {
	margin: 0;
}

.da-form__notice h2 {
	margin: 0 0 var(--da-space-2xs);
}

/* Steps ---------------------------------------------------------------- */

.da-steps__progress {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--da-space-2xs);
	margin: 0 0 var(--da-space-2xl);
	padding: 0;
	list-style: none;
}

.da-steps__tick {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-3xs);
	padding-top: var(--da-space-2xs);
	border-top: var(--da-border-strong) solid var(--da-rule);
	color: var(--da-text-faint);
	transition: border-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-steps__tick.is-done,
.da-steps__tick.is-current {
	border-top-color: var(--da-accent);
	color: var(--da-text);
}

.da-steps__tick-num {
	font-size: var(--da-size-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--da-tracking-eyebrow);
}

.da-steps__tick-label {
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-step {
	margin: 0;
	padding: 0;
	border: 0;
}

.da-form.is-stepped .da-step + .da-step {
	margin-top: 0;
}

/* Without the script every step is visible, so they need separating. */
.da-form:not(.is-stepped) .da-step + .da-step {
	margin-top: var(--da-space-2xl);
	padding-top: var(--da-space-2xl);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-step__title {
	margin: 0 0 var(--da-space-2xs);
	padding: 0;
}

.da-step__hint {
	margin: 0 0 var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-step > .da-field,
.da-step > .da-choice-grid {
	margin-top: var(--da-space-md);
}

.da-steps__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-sm);
	margin-top: var(--da-space-2xl);
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-steps__nav [hidden] {
	display: none;
}

.da-steps__status {
	margin: var(--da-space-sm) 0 0;
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.da-steps__progress {
		grid-template-columns: repeat(5, 1fr);
	}

	.da-steps__tick-label {
		display: none;
	}
}

/* ----------------------------------------------------------------- 404 -- */

.da-404 {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding-top: calc(var(--da-header-h) + var(--da-space-2xl));
	padding-bottom: var(--da-section-y-tight);
	overflow: hidden;
}

.da-404__inner {
	position: relative;
	z-index: var(--da-z-content);
}

/* The numerals are outlined, and the zero is an open ring, so the lattice
   reads straight through the middle of the mark rather than being covered. */
.da-404__mark {
	display: flex;
	align-items: center;
	gap: 0.02em;
	margin: 0 0 var(--da-space-lg);
	font-size: var(--da-size-mega);
	font-weight: var(--da-weight-medium);
	line-height: 0.85;
	letter-spacing: var(--da-tracking-display);
	color: transparent;
	-webkit-text-stroke: 2px var(--da-light-20);
}

.da-404__zero {
	display: inline-block;
	width: 0.62em;
	height: 0.92em;
	border: 2px solid var(--da-accent);
	border-radius: var(--da-radius-pill);
}

.da-404__body {
	max-width: 46rem;
}

.da-404__links {
	margin-top: var(--da-space-2xl);
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-404__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.da-404__links a {
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	text-decoration: none;
	border-bottom: var(--da-border) solid transparent;
	transition: border-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-404__links a:hover {
	border-bottom-color: var(--da-accent);
	color: var(--da-text);
}

.da-404__aside {
	margin-top: var(--da-space-lg);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.da-404 {
		min-height: auto;
		padding-block: calc(var(--da-header-h) + var(--da-space-2xl)) var(--da-space-3xl);
	}
}

/* ------------------------------------------------------- Insight cards --- */

.da-insight {
	padding-top: 0;
	border-top: 0;
}

.da-insight__figure {
	position: relative;
	margin: 0 0 var(--da-space-md);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-insight__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform var(--da-dur-slow) var(--da-ease);
}

.da-insight.is-reactive .da-insight__figure img {
	transform: scale(1.05);
}

/* Mask reveal, matching the case-study figures. */
.da-motion .da-insight__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--da-bg);
	transform-origin: bottom;
	transition: transform var(--da-dur-reveal) var(--da-ease);
}

.da-motion .da-insight__figure.is-revealed::after {
	transform: scaleY(0);
}

.da-insights__grid {
	border-top: 0;
	gap: var(--da-space-2xl) var(--da-space-lg);
}

/* Fills the overview heading column, which otherwise ran empty beside the
   prose on every service page. */
.da-overview__media {
	margin: var(--da-space-xl) 0 0;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
	aspect-ratio: 4 / 3;
}

.da-overview__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.da-overview__media {
		aspect-ratio: 16 / 10;
	}
}