/**
 * DA Digital visual components.
 *
 * Cards, icon wells, diagrams, fallback artwork, metrics and the button
 * system. Built entirely from tokens; no colour literals.
 */

/* ------------------------------------------------------------- Icons --- */

.da-icon {
	display: block;
	flex: none;
}

.da-icon-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex: none;
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: var(--da-radius-pill);
	color: var(--da-accent);
	background-color: transparent;
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-icon-well--solid {
	border-color: transparent;
	background-color: var(--da-orange-16);
}

.da-icon-well--lg {
	width: 3.75rem;
	height: 3.75rem;
}

.is-reactive .da-icon-well,
a:hover .da-icon-well,
button:hover .da-icon-well {
	border-color: var(--da-accent);
	background-color: var(--da-accent);
	color: var(--da-off-white);
}

/* Circular action button, used as the "go" affordance on cards. */
.da-round-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: var(--da-radius-pill);
	color: var(--da-text);
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease),
		transform var(--da-dur) var(--da-ease);
}

.da-round-action .da-icon {
	transition: transform var(--da-dur) var(--da-ease);
}

.is-reactive .da-round-action,
a:hover > .da-round-action,
.da-card:hover .da-round-action {
	border-color: var(--da-accent);
	background-color: var(--da-accent);
	color: var(--da-off-white);
}

.is-reactive .da-round-action .da-icon,
.da-card:hover .da-round-action .da-icon {
	transform: translateX(2px);
}

/* ------------------------------------------------------------ Buttons --- */

.da-button {
	border-radius: var(--da-radius-md);
	padding: var(--da-space-sm) var(--da-space-lg);
	will-change: transform;
}

/* PRIMARY: solid orange. This is the one that has to read as a button from
   across the room, so it carries weight, padding and an arrow well.

   The horizontal padding is deliberately lopsided -- 2rem left against 1rem
   right -- because the trailing arrow well sits in that shorter right side
   and balances it. */
.da-button--primary {
	gap: var(--da-space-sm);
	padding: var(--da-space-sm) var(--da-space-sm) var(--da-space-sm) var(--da-space-lg);
	background-color: var(--da-accent);
	color: var(--da-navy);
	font-weight: var(--da-weight-semibold);
	letter-spacing: -0.01em;
}

/* ...but several primaries are written by hand without an arrow: the header
   and menu-panel CTAs, the contact CTA and both form submits. Those inherited
   padding compensating for an element that is not there, which pushed the
   label 16px right of centre. 1.5rem is the mean of the two, so the label
   centres and the button keeps exactly the width it had. */
.da-button--primary:not(:has(.da-button__arrow)) {
	padding-inline: var(--da-space-md);
}

.da-button--primary:hover {
	background-color: var(--da-accent);
	color: var(--da-navy);
}

.da-button__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: var(--da-radius-pill);
	background-color: var(--da-navy);
	color: var(--da-accent);
	transition: transform var(--da-dur) var(--da-ease);
}

.da-button--primary:hover .da-button__arrow {
	transform: translateX(3px);
}

.da-button--primary:focus-visible {
	outline: var(--da-focus-width) solid var(--da-navy);
	outline-offset: var(--da-focus-offset);
}

.da-surface-dark .da-button--primary:focus-visible,
.da-invert .da-button--primary:focus-visible {
	outline-color: var(--da-off-white);
}

/* Large variant for the closing call to action. */
.da-button--xl {
	padding: var(--da-space-md) var(--da-space-md) var(--da-space-md) var(--da-space-xl);
	font-size: var(--da-size-body-lg);
}

.da-button--xl .da-button__arrow {
	width: 2.5rem;
	height: 2.5rem;
}

.da-button--secondary {
	border-color: var(--da-rule-strong);
	background-color: transparent;
	color: var(--da-text);
}

.da-button--secondary:hover {
	border-color: var(--da-text);
	background-color: transparent;
	color: var(--da-text);
}

/* -------------------------------------------------------------- Cards --- */

/*
 * A card is a panel with a hairline, not a floating rounded rectangle. The
 * pointer response is handled by reactive.js, which sets the transform; the
 * only thing CSS animates is the border and the internal accents.
 */
.da-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
	padding: var(--da-space-lg);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-md);
	background-color: var(--da-bg);
	overflow: hidden;
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-reactive-on .da-card {
	transform-style: preserve-3d;
	will-change: transform;
}

.da-card.is-reactive,
.da-card:hover {
	border-color: var(--da-rule-strong);
	background-color: var(--da-bg-alt);
}

/* A hairline that runs the top edge and fills in on hover. */
.da-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--da-border-strong);
	background-color: var(--da-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--da-dur-slow) var(--da-ease);
}

.da-card.is-reactive::before,
.da-card:hover::before {
	transform: scaleX(1);
}

.da-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--da-space-md);
}

.da-card__index {
	color: var(--da-accent-ink);
	font-family: var(--da-font-display);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	font-weight: var(--da-weight-bold);
	letter-spacing: var(--da-tracking-eyebrow);
}

.da-card__title {
	margin: 0;
}

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

.da-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-3xs) var(--da-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.da-card__tags li {
	padding: 2px var(--da-space-2xs);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: 0.02em;
}

.da-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-md);
	margin-top: auto;
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* The whole card is the hit area; the visible text carries the label. */
	text-indent: -9999px;
	overflow: hidden;
}

.da-card__link:focus-visible {
	outline: var(--da-focus-width) solid var(--da-focus-color);
	outline-offset: calc(var(--da-focus-offset) * -1);
	border-radius: var(--da-radius-md);
}

/* ----------------------------------------------------------- Diagrams --- */

.da-diagram {
	display: block;
	width: 100%;
	height: auto;
	color: var(--da-text);
}

/* No fill: a tinted block behind the diagram reads as a placeholder. The
   diagram sits on the card and is separated by a hairline instead. */
.da-card__visual {
	position: relative;
	margin: 0;
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
	overflow: hidden;
}

/* Path-draw reveal: the accent line traces itself once in view. */
.da-motion .da-draw {
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	transition: stroke-dashoffset 1400ms var(--da-ease);
}

.da-motion .is-revealed .da-draw,
.da-motion [data-reveal].is-revealed .da-draw {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.da-motion .da-draw {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* -------------------------------------------------- Fallback artwork --- */

/*
 * Shown where a real image has not been uploaded. Deliberately a composition
 * in the brand's own geometry rather than a grey box, so a half-populated CMS
 * still looks intentional. A real upload replaces it entirely.
 */
.da-fallback {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 12rem;
	background-color: var(--da-bg-alt);
	overflow: hidden;
}

.da-fallback__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--da-rule) var(--da-border), transparent var(--da-border)),
		linear-gradient(to bottom, var(--da-rule) var(--da-border), transparent var(--da-border));
	background-size: 2.5rem 2.5rem;
	opacity: 0.7;
}

.da-fallback__art {
	position: relative;
	width: min(72%, 22rem);
	color: var(--da-text);
}

.da-fallback__ring {
	position: absolute;
	right: 8%;
	top: 14%;
	width: clamp(3rem, 7vw, 5rem);
	aspect-ratio: 1;
	border: var(--da-border-strong) solid var(--da-accent);
	border-radius: var(--da-radius-pill);
	opacity: 0.55;
}

.da-fallback__label {
	position: absolute;
	left: var(--da-space-md);
	bottom: var(--da-space-md);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Metrics --- */

.da-metric {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
	padding-top: var(--da-space-md);
	border-top: var(--da-border-strong) solid var(--da-accent);
}

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

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

/* --------------------------------------------------------- Logo walls --- */

.da-logo-wall {
	display: grid;
	/* auto-fit, not auto-fill: a group with one or two partners fills the row
	   instead of leaving empty cells ruled off beside it. */
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--da-border) solid var(--da-rule);
	border-left: var(--da-border) solid var(--da-rule);
}

.da-logo-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--da-space-2xs);
	min-height: 6rem;
	padding: var(--da-space-sm);
	border-right: var(--da-border) solid var(--da-rule);
	border-bottom: var(--da-border) solid var(--da-rule);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-medium);
	text-align: center;
	transition: background-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-surface-dark .da-logo-wall__item img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.7;
}

.da-logo-wall__item img {
	/* The marks carry internal padding; 2.25rem left them reading as specks. */
	max-height: 3.5rem;
	width: auto;
	/* Keeps a mixed set of client logos visually consistent; a hover restores
	   the original colours. */
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--da-dur) var(--da-ease), opacity var(--da-dur) var(--da-ease);
}

.da-logo-wall__item:hover {
	background-color: var(--da-bg-alt);
	color: var(--da-text);
}

.da-logo-wall__item:hover img {
	filter: none;
	opacity: 1;
}

.da-logo-wall__type {
	display: block;
	margin-top: var(--da-space-3xs);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-regular);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

/* ------------------------------------------------------- Info panels --- */

.da-panel {
	padding: var(--da-space-lg);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-md);
	background-color: var(--da-bg-alt);
}

.da-panel--accent {
	border-left: var(--da-border-strong) solid var(--da-accent);
}

/* Small hero modules: compact facts beside the headline. */
.da-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
}

.da-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--da-space-2xs);
	padding: var(--da-space-3xs) var(--da-space-sm) var(--da-space-3xs) var(--da-space-3xs);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-pill);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	letter-spacing: 0.02em;
	transition: border-color var(--da-dur) var(--da-ease), color var(--da-dur) var(--da-ease);
}

.da-chip .da-icon-well {
	width: 1.75rem;
	height: 1.75rem;
}

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

@media (max-width: 600px) {
	.da-card {
		padding: var(--da-space-md);
	}

	.da-icon-well {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* ======================================================================
   Composition: hero, service grid, closing CTA
   =================================================================== */

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

.da-hero__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--da-space-2xl) var(--da-space-lg);
	align-items: center;
}

.da-hero__content {
	grid-column: 1 / span 7;
	max-width: none;
}

.da-hero__modules {
	grid-column: 9 / span 4;
	display: grid;
	gap: var(--da-space-sm);
}

.da-hero-module {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-sm);
	padding: var(--da-space-md);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-md);
	background-color: color-mix(in srgb, var(--da-off-white) 86%, transparent);
	overflow: hidden;
	transition: border-color var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-reactive-on .da-hero-module {
	will-change: transform;
}

.da-hero-module.is-reactive {
	border-color: var(--da-accent);
	background-color: var(--da-off-white);
}

.da-hero-module__visual {
	position: absolute;
	right: -6%;
	top: 50%;
	width: 42%;
	transform: translateY(-50%);
	opacity: 0.3;
	color: var(--da-navy);
	pointer-events: none;
	/* Fades out toward the label so the diagram never competes with text. */
	-webkit-mask-image: linear-gradient(to left, var(--da-navy) 55%, transparent 100%);
	mask-image: linear-gradient(to left, var(--da-navy) 55%, transparent 100%);
}

.da-hero-module.is-reactive .da-hero-module__visual {
	opacity: 0.5;
}

.da-hero-module__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--da-space-sm);
	max-width: 68%;
}

.da-hero-module__title {
	margin: 0;
}

.da-hero-module__note {
	margin: 2px 0 0;
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-hero__title {
	max-width: 17ch;
}

/* The hero should fill the screen without forcing a very tall first scroll. */
.da-hero {
	min-height: min(88vh, 54rem);
}

@media (max-width: 1023px) {
	/* The 12-column template must collapse, not just its children: eleven
	   gaps alone are wider than a 320px viewport's content box. */
	.da-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.da-hero__content {
		grid-column: 1 / -1;
	}

	.da-hero__modules {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.da-hero-module__visual {
		width: 46%;
	}
}

/* ------------------------------------------------------- Service grid --- */

.da-service-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--da-space-lg);
}

.da-service-card {
	grid-column: span 4;
}

/* The two lead services take a wider cell, so the row is composed rather
   than six identical boxes. */
.da-service-card--wide {
	grid-column: span 6;
}

.da-service-card .da-card__visual {
	margin-top: auto;
	padding: var(--da-space-sm);
	color: var(--da-navy);
}

/* Photography is the primary visual on every service card; the diagram is
   kept only on the two wide cells, as a small inset over the image. */
.da-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
	aspect-ratio: 16 / 10;
}

.da-service-card--wide .da-card__media {
	aspect-ratio: 16 / 9;
}

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

.da-service-card:hover .da-card__media img,
.da-service-card:focus-within .da-card__media img {
	transform: scale(1);
}

/* A navy wash keeps the photographs reading as DA chrome rather than as
   six unrelated stock frames. */
.da-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--da-navy) 62%, transparent),
		color-mix(in srgb, var(--da-navy) 8%, transparent) 55%
	);
	pointer-events: none;
}


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

@media (max-width: 1023px) {
	.da-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.da-service-card,
	.da-service-card--wide {
		grid-column: span 1;
	}
}

@media (max-width: 680px) {
	.da-service-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.da-service-card,
	.da-service-card--wide {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------- Final CTA --- */

.da-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: var(--da-space-2xl);
}

.da-cta__heading {
	max-width: 14ch;
	margin-top: var(--da-space-sm);
}

.da-cta__text {
	margin-top: var(--da-space-md);
	max-width: 46ch;
	color: var(--da-text-soft);
	font-size: var(--da-size-body-lg);
}

.da-cta__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--da-space-md);
}

.da-cta__alt {
	margin: 0;
	color: var(--da-text-faint);
	font-size: var(--da-size-small);
}

.da-cta__alt a {
	color: var(--da-text);
	border-bottom: var(--da-border) solid var(--da-rule-strong);
}

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

@media (max-width: 900px) {
	.da-cta__inner {
		grid-template-columns: 1fr;
		gap: var(--da-space-xl);
	}
}

/* ------------------------------------------------------- Text action --- */

.da-text-action {
	display: inline-flex;
	align-items: center;
	gap: var(--da-space-sm);
	color: var(--da-text);
	font-size: var(--da-size-button);
	font-weight: var(--da-weight-medium);
	text-decoration: none;
}

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

.da-text-action:hover .da-round-action {
	border-color: var(--da-accent);
	background-color: var(--da-accent);
	color: var(--da-off-white);
}

.da-text-action:hover .da-round-action .da-icon {
	transform: translateX(2px);
}

/* ---------------------------------------------------------- Ecosystem --- */

.da-ecosystem__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.da-ecosystem__intro .da-h2 {
	margin: 0 0 var(--da-space-md);
	max-width: 18ch;
}

.da-ecosystem__intro .da-lede {
	max-width: 46ch;
}

.da-ecosystem__points {
	margin: var(--da-space-lg) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--da-space-2xs);
}

.da-ecosystem__points li {
	position: relative;
	padding-left: var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-ecosystem__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.5rem;
	height: var(--da-border);
	background-color: var(--da-accent);
}

.da-ecosystem__partners {
	display: grid;
	gap: var(--da-space-xl);
}

.da-ecosystem__group-label {
	margin: 0 0 var(--da-space-sm);
	padding-bottom: var(--da-space-2xs);
	border-bottom: var(--da-border) solid var(--da-rule);
	color: var(--da-text-faint);
	font-size: var(--da-size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.da-ecosystem .da-eyebrow {
	margin-bottom: var(--da-space-md);
}

@media (max-width: 900px) {
	.da-ecosystem__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.da-logo-wall__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--da-space-3xs);
	color: inherit;
	text-decoration: none;
}

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

.da-process__step {
	position: relative;
}

.da-process__marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 1rem;
	border: var(--da-border-strong) solid var(--da-accent);
	border-radius: var(--da-radius-pill);
	background-color: var(--da-bg);
	transition: background-color var(--da-dur) var(--da-ease),
		transform var(--da-dur) var(--da-ease);
}

.da-process__step.is-reactive .da-process__marker {
	background-color: var(--da-accent);
	transform: scale(1.25);
}

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

.da-process__body .da-icon-well {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--da-space-2xs);
}

.da-positioning__facts {
	margin-top: var(--da-space-3xl);
}

@media (max-width: 900px) {
	.da-process__marker {
		top: 0.25rem;
	}
}

/* ======================================================================
   Marquee, proof, featured work, why, FAQ
   =================================================================== */

/* ------------------------------------------------------------ Marquee --- */

.da-marquee-band {
	padding-block: var(--da-space-xl);
	background-color: var(--da-bg);
	border-bottom: var(--da-border) solid var(--da-rule);
	overflow: hidden;
}

.da-marquee-band__label {
	margin: 0 0 var(--da-space-lg);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

/* Two identical tracks side by side; translating the pair by -50% lands the
   second exactly where the first began, so the loop has no seam. */
.da-marquee-band__viewport {
	display: flex;
	width: max-content;
	animation: da-marquee-scroll 44s linear infinite;
}

.da-marquee-band__track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	margin: 0;
	padding: 0 clamp(1.25rem, 3vw, 2.75rem);
	list-style: none;
}

.da-marquee-band__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 4.25rem;
}

.da-marquee-band__item img {
	height: 100%;
	width: auto;
	max-width: none;
	opacity: 0.7;
	filter: grayscale(1);
	transition: opacity var(--da-dur) var(--da-ease), filter var(--da-dur) var(--da-ease);
}

.da-marquee-band__item:hover img {
	opacity: 1;
	filter: none;
}

.da-marquee-band__name {
	color: var(--da-text-soft);
	font-family: var(--da-font-display);
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-semibold);
	white-space: nowrap;
}

@keyframes da-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Reduced motion: a static, wrapping row instead of a moving one. */
@media (prefers-reduced-motion: reduce) {
	.da-marquee-band__viewport {
		animation: none;
		width: 100%;
	}

	.da-marquee-band__track:last-child {
		display: none;
	}

	.da-marquee-band__track {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--da-space-lg) var(--da-space-2xl);
	}
}

/* -------------------------------------------------------------- Proof --- */

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

.da-proof__item {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
	padding-top: var(--da-space-md);
	border-top: var(--da-border-strong) solid var(--da-accent);
}

.da-proof__item .da-icon-well {
	margin-bottom: var(--da-space-2xs);
}

.da-proof__value {
	font-family: var(--da-font-display);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: var(--da-weight-bold);
	line-height: 1;
	letter-spacing: var(--da-tracking-metric);
	font-variant-numeric: tabular-nums;
}

.da-proof__label {
	font-size: var(--da-size-h4);
	font-weight: var(--da-weight-semibold);
}

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

/* ----------------------------------------------------- Featured work --- */

.da-featured__layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--da-space-2xl);
	align-items: start;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   content, so a long project title pushed out of this column and ran under
   the image frame. */
.da-featured__list,
.da-featured__frame {
	min-width: 0;
}

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

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

.da-featured__trigger {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--da-space-md);
	width: 100%;
	padding: var(--da-space-md) 0;
	border: 0;
	background: none;
	color: var(--da-text-soft);
	text-align: left;
	cursor: pointer;
	transition: color var(--da-dur) var(--da-ease), padding-left var(--da-dur) var(--da-ease);
}

.da-featured__row.is-active .da-featured__trigger,
.da-featured__trigger:hover {
	color: var(--da-text);
	padding-left: var(--da-space-sm);
}

.da-featured__index {
	color: var(--da-text-faint);
	font-family: var(--da-font-display);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	font-weight: var(--da-weight-bold);
	letter-spacing: var(--da-tracking-eyebrow);
	transition: color var(--da-dur) var(--da-ease);
}

.da-featured__row.is-active .da-featured__index {
	color: var(--da-accent);
}

.da-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-3xs);
	min-width: 0;
}

.da-featured__title {
	min-width: 0;
	overflow-wrap: break-word;
	font-family: var(--da-font-display);
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	font-weight: var(--da-weight-semibold);
	line-height: var(--da-leading-tight);
	letter-spacing: var(--da-tracking-heading);
}

.da-featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-featured__go {
	width: 2.25rem;
	height: 2.25rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--da-dur) var(--da-ease), transform var(--da-dur) var(--da-ease);
}

.da-featured__row.is-active .da-featured__go,
.da-featured__trigger:hover .da-featured__go,
.da-featured__trigger:focus-visible .da-featured__go {
	opacity: 1;
	transform: none;
}

/* The frame is fixed; only its contents change. */
.da-featured__frame {
	position: relative;
	display: grid;
}

.da-featured__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
}

/* Without the script every panel simply stacks and stays readable. */
.da-featured__layout.is-enhanced .da-featured__panel {
	opacity: 0;
	transition: opacity var(--da-dur-slow) var(--da-ease);
}

.da-featured__layout.is-enhanced .da-featured__panel.is-active {
	opacity: 1;
}

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

.da-featured__media > span {
	display: block;
	width: 100%;
	height: 100%;
}

.da-featured__media img,
.da-featured__media .da-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.da-featured__summary {
	margin: 0;
	max-width: 54ch;
	color: var(--da-text-soft);
}

.da-featured__cta {
	margin: 0;
}

@media (max-width: 900px) {
	.da-featured__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--da-space-lg);
	}

	/* Image first on small screens: it is the thing worth leading with. */
	.da-featured__frame {
		order: -1;
	}
}

/* ---------------------------------------------------------------- Why --- */

.da-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 0;
	border-top: var(--da-border) solid var(--da-rule);
	border-left: var(--da-border) solid var(--da-rule);
}

.da-why__item {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
	padding: var(--da-space-lg);
	border-right: var(--da-border) solid var(--da-rule);
	border-bottom: var(--da-border) solid var(--da-rule);
	transition: background-color var(--da-dur) var(--da-ease);
}

.da-why__item.is-reactive {
	background-color: var(--da-bg-alt);
}

.da-why__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-sm);
}

.da-why__index {
	color: var(--da-accent-ink);
	font-family: var(--da-font-display);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	font-weight: var(--da-weight-bold);
	letter-spacing: var(--da-tracking-eyebrow);
}

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

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

/* ---------------------------------------------------------------- FAQ --- */

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

.da-faq__answer {
	overflow: hidden;
}

.da-faq[open] .da-faq__answer {
	animation: da-faq-open var(--da-dur-slow) var(--da-ease);
}

@keyframes da-faq-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.da-faq[open] .da-faq__answer {
		animation: none;
	}
}

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

.da-about__layout {
	align-items: center;
}

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

.da-about__scene > span {
	display: block;
	width: 100%;
	height: 100%;
}

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

.da-about__body > .da-h1 {
	margin-top: var(--da-space-sm);
}

.da-about__body > .da-lede {
	margin-top: var(--da-space-md);
}

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

.da-about__member {
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
	min-width: 0;
}

.da-about__avatar {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--da-radius-pill);
	overflow: hidden;
	background-color: var(--da-bg-alt);
}

.da-about__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.da-about__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.da-about__name {
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-semibold);
}

.da-about__role {
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	line-height: var(--da-leading-tight);
}

.da-about__cta {
	margin: var(--da-space-xl) 0 0;
}

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

/* ---------------------------------------------------- About page media --- */

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

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

.da-about-page__scene--split figure {
	aspect-ratio: 4 / 3;
}

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

@media (max-width: 700px) {
	.da-about-page__scene figure {
		aspect-ratio: 3 / 2;
	}
}

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

.da-hero__stage {
	grid-column: 8 / span 5;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-sm);
	min-width: 0;
}

.da-hero__anchor {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: var(--da-radius-md);
	background-color: var(--da-bg-alt);
	border: var(--da-border) solid var(--da-rule);
	/* A single, very restrained lift. Nothing here floats. */
	box-shadow: 0 18px 40px -28px var(--da-navy-40);
	transition: border-color var(--da-dur) var(--da-ease);
}

.da-hero__anchor.is-reactive {
	border-color: var(--da-accent);
}

.da-hero__anchor > span {
	display: block;
	width: 100%;
	height: 100%;
}

.da-hero__anchor img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.da-hero__anchor-tag {
	position: absolute;
	left: var(--da-space-sm);
	bottom: var(--da-space-sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: calc(100% - var(--da-space-lg));
	padding: var(--da-space-2xs) var(--da-space-sm);
	border-radius: var(--da-radius-sm);
	background-color: var(--da-navy);
	color: var(--da-off-white);
}

.da-hero__anchor-label {
	color: var(--da-accent);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-hero__anchor-tag a {
	color: var(--da-off-white);
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-medium);
	line-height: var(--da-leading-tight);
	text-decoration: none;
}

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

.da-hero__stage .da-hero__modules {
	grid-column: auto;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.da-hero__stage {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------- Client stories --- */

.da-quotes__featured {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.da-quotes__viewport {
	position: relative;
	min-width: 0;
}

.da-quote {
	margin: 0;
}

.da-quote__logo {
	display: block;
	/* The marks carry internal padding, so they need height to read at all. */
	height: 4rem;
	margin-bottom: var(--da-space-md);
}

.da-quote__logo img {
	height: 100%;
	width: auto;
	max-width: 14rem;
	object-fit: contain;
	object-position: left center;
}

/* The marks are drawn in navy, so they need inverting on the dark surface. */
.da-surface-dark .da-quote__logo img,
.da-surface-dark .da-review-card__logo img,
.da-surface-dark .da-logo-wall__item img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.85;
}

.da-quote__text {
	margin: 0 0 var(--da-space-lg);
	max-width: 34ch;
	font-family: var(--da-font-display);
	font-size: clamp(1.375rem, 2.3vw, 2.125rem);
	font-weight: var(--da-weight-medium);
	line-height: 1.32;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.da-quote__attribution {
	display: flex;
	align-items: center;
	gap: var(--da-space-sm);
}

.da-quote__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}

.da-quote__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.da-quote__name {
	font-weight: var(--da-weight-semibold);
}

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

.da-quote__services {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs);
	margin: var(--da-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.da-quote__services li {
	padding: 0.3rem 0.7rem;
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: 999px;
	color: var(--da-text-soft);
	font-size: var(--da-size-tiny, 0.75rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.da-quote__project {
	margin: var(--da-space-md) 0 0;
}

/* --- The project a quote is about ------------------------------------- */

.da-quotes__media {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 3;
}

.da-quotes__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--da-dur) var(--da-ease), visibility var(--da-dur) var(--da-ease);
}

.da-quotes__shot.is-active {
	opacity: 1;
	visibility: visible;
}

.da-quotes__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.da-quotes__shot-label {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: var(--da-space-2xs) var(--da-space-sm);
	background-color: var(--da-navy);
	color: var(--da-off-white);
	font-size: var(--da-size-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.da-quotes__controls {
	display: flex;
	align-items: center;
	gap: var(--da-space-sm);
	margin-top: var(--da-space-xl);
}

.da-quotes__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: var(--da-border) solid var(--da-rule-strong);
	border-radius: 50%;
	background: none;
	color: var(--da-text);
	cursor: pointer;
	transition: background-color var(--da-dur) var(--da-ease), color var(--da-dur) var(--da-ease);
}

.da-quotes__button:hover {
	background-color: var(--da-accent);
	color: var(--da-navy);
}

.da-quotes__status {
	margin: 0 0 0 var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
}

/* --- Moving rail of the other reviews --------------------------------- */

.da-quotes__rail {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: var(--da-border) solid var(--da-rule);
	overflow: hidden;
	/* Fades the track into the section edges instead of cutting it. */
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.da-quotes__rail-viewport {
	display: flex;
	width: max-content;
	animation: da-rail-scroll 66s linear infinite;
}

.da-quotes__rail-track {
	display: flex;
	gap: var(--da-space-lg);
	margin: 0;
	padding: 0 calc(var(--da-space-lg) / 2);
	list-style: none;
}

.da-review-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--da-space-md);
	flex: none;
	width: min(22rem, 78vw);
	padding: var(--da-space-md);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	background-color: var(--da-bg-alt);
}

.da-review-card__text {
	margin: 0;
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	line-height: 1.55;
}

.da-review-card__foot {
	display: flex;
	align-items: center;
	gap: var(--da-space-sm);
}

.da-review-card__logo {
	flex: none;
	height: 2.5rem;
}

.da-review-card__logo img {
	height: 100%;
	width: auto;
	max-width: 8.5rem;
	object-fit: contain;
	object-position: left center;
}

.da-review-card__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.da-review-card__name {
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-semibold);
}

.da-review-card__company {
	color: var(--da-text-faint);
	font-size: var(--da-size-small);
}

@keyframes da-rail-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}


.da-icon--back {
	transform: rotate(180deg);
}

@media (max-width: 900px) {
	.da-quotes__featured {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photograph first on a phone: it is the part that survives the crop. */
	.da-quotes__media {
		order: -1;
		aspect-ratio: 16 / 10;
	}

	.da-quote__text {
		max-width: none;
	}

	.da-quote__logo {
		height: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.da-quotes__rail-viewport {
		animation: none;
		width: 100%;
		overflow-x: auto;
	}

	.da-quotes__rail-track:last-child {
		display: none;
	}
}


/* ----------------------------------------------------- Positioning pillar */

.da-pillar {
	position: relative;
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-pillar__index {
	display: block;
	margin-bottom: var(--da-space-2xs);
	color: var(--da-accent-ink);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.da-pillar__services {
	display: grid;
	gap: var(--da-space-3xs);
	margin: var(--da-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.da-pillar__services a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-sm);
	padding: var(--da-space-2xs) 0;
	border-bottom: var(--da-border) solid var(--da-rule);
	color: var(--da-text);
	font-weight: var(--da-weight-medium);
	text-decoration: none;
	transition: color var(--da-dur) var(--da-ease), padding-left var(--da-dur) var(--da-ease);
}

.da-pillar__services a:hover {
	padding-left: var(--da-space-2xs);
	color: var(--da-accent);
}

.da-pillar__services svg {
	flex: none;
	opacity: 0.55;
}