/**
 * DA Digital site styles.
 *
 * Values come from tokens.css. Nothing here hard-codes a colour or a size.
 * Hello Elementor's reset.css is already loaded, so only what this system
 * actually needs is redeclared.
 */

/* ---------------------------------------------------------------- Base -- */

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background-color: var(--da-bg);
	color: var(--da-text);
	font-family: var(--da-font);
	font-size: var(--da-size-body);
	font-weight: var(--da-weight-regular);
	line-height: var(--da-leading-body);
	letter-spacing: var(--da-tracking-body);
	/* Nothing in this layout may cause a sideways scroll. */
	overflow-x: hidden;
}

body.da-menu-open {
	overflow: hidden;
}

img,
svg,
canvas {
	max-width: 100%;
	height: auto;
}

::selection {
	background-color: var(--da-accent);
	color: var(--da-off-white);
}

/* ------------------------------------------- Neutralising parent defaults --

   Hello Elementor's reset.css hard-codes colours that are not in this palette
   and applies them to bare elements:

     a                       color #c36   (magenta)
     a:hover                 color #336   (indigo)
     button, [type=submit]   border and color #c36, hover background #c36
     body, figcaption        color #333, figcaption italic 16px
     button                  white-space: nowrap
     input:focus             border-color #333

   Anything we do not explicitly style therefore inherits magenta — which is
   where the pink in rich-text links and bare buttons came from. The parent
   theme must not be edited, so these base rules put every bare element back on
   the palette. Component classes have higher specificity and still win.
------------------------------------------------------------------------- */

a {
	color: var(--da-text);
	text-decoration-color: var(--da-accent);
	text-underline-offset: 0.2em;
}

a:hover,
a:active {
	color: var(--da-accent);
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
	border-color: var(--da-rule);
	color: var(--da-text);
	font-family: inherit;
	/* The parent reset also sets white-space:nowrap on every button, which
	   stops multi-line labels wrapping and makes them paint outside their
	   grid cell. Buttons here hold real content, not just short verbs. */
	white-space: normal;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover,
button:focus,
[type="button"]:focus,
[type="submit"]:focus,
[type="reset"]:focus {
	background-color: transparent;
	color: var(--da-accent);
}

figcaption {
	color: var(--da-text-soft);
	/* The parent reset also italicises every figcaption and fixes it at 16px. */
	font-style: normal;
	font-size: inherit;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--da-accent);
}

/* ------------------------------------------------------------- Focus --- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--da-focus-width) solid var(--da-focus-color);
	outline-offset: var(--da-focus-offset);
	border-radius: var(--da-radius-sm);
}

.da-skip-link {
	position: absolute;
	left: var(--da-space-sm);
	top: var(--da-space-sm);
	z-index: var(--da-z-skip);
	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);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--da-dur) var(--da-ease);
}

.da-skip-link:focus {
	transform: translateY(0);
}

/* -------------------------------------------------------- Typography --- */

.da-display,
.da-h1,
.da-h2,
.da-h3 {
	margin: 0;
	color: var(--da-text);
	font-weight: var(--da-weight-medium);
	text-wrap: balance;
}

.da-display {
	font-size: var(--da-size-display);
	line-height: var(--da-leading-display);
	letter-spacing: var(--da-tracking-display);
}

.da-h1 {
	font-size: var(--da-size-h1);
	line-height: var(--da-leading-heading);
	letter-spacing: var(--da-tracking-heading);
}

.da-h2 {
	font-size: var(--da-size-h2);
	line-height: var(--da-leading-heading);
	letter-spacing: var(--da-tracking-heading);
}

.da-h3 {
	font-size: var(--da-size-h3);
	line-height: var(--da-leading-tight);
	letter-spacing: var(--da-tracking-heading);
}

.da-lede {
	max-width: var(--da-container-text);
	margin: 0;
	color: var(--da-text-soft);
	font-size: var(--da-size-body-lg);
	line-height: var(--da-leading-body);
	text-wrap: pretty;
}

.da-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--da-space-2xs);
	margin: 0;
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-eyebrow::before {
	content: "";
	width: var(--da-space-md);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
}

.da-prose {
	max-width: var(--da-container-text);
	color: var(--da-text-soft);
}

.da-prose > * + * {
	margin-top: var(--da-space-sm);
}

.da-prose a {
	color: var(--da-text);
	text-decoration-color: var(--da-accent);
	text-underline-offset: 0.2em;
}

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

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

.da-container--narrow {
	max-width: var(--da-container-narrow);
}

.da-section {
	position: relative;
	padding-block: var(--da-section-y);
}

.da-section--tight {
	padding-block: var(--da-section-y-tight);
}

.da-section--ruled + .da-section--ruled {
	border-top: var(--da-border) solid var(--da-rule);
}

.da-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
	max-width: var(--da-container-text);
	margin-bottom: var(--da-space-2xl);
}

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

.da-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--da-space-2xs);
	padding: var(--da-space-xs) var(--da-space-md);
	border: var(--da-border) solid transparent;
	border-radius: var(--da-radius-sm);
	font-size: var(--da-size-button);
	font-weight: var(--da-weight-medium);
	letter-spacing: 0;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease),
		border-color var(--da-dur) var(--da-ease),
		transform var(--da-dur-fast) var(--da-ease);
}

.da-button--primary {
	background-color: var(--da-navy);
	color: var(--da-off-white);
}

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

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

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

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

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

.da-invert .da-button--secondary {
	color: var(--da-text-invert);
}

/* Text link that reads as an action. */
.da-link {
	display: inline-flex;
	align-items: center;
	gap: var(--da-space-2xs);
	color: var(--da-text);
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-medium);
	text-decoration: none;
	padding-bottom: 2px;
	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-link:hover {
	border-bottom-color: var(--da-accent);
}

.da-link__arrow {
	transition: transform var(--da-dur) var(--da-ease);
}

.da-link:hover .da-link__arrow,
.da-button:hover .da-link__arrow {
	transform: translateX(3px);
}

/* --------------------------------------------------------- Utilities --- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.da-demo-flag {
	display: inline-block;
	padding: 2px var(--da-space-2xs);
	border: var(--da-border) solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Reveal --- */

/* `.da-motion` is set by motion.js itself, only once it has confirmed it will
   run. If the script fails, never loads, or bails for reduced motion, the class
   is absent and every element below renders normally — content is never left
   hidden waiting for JavaScript that is not coming. */
.da-motion [data-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--da-dur-reveal) var(--da-ease),
		transform var(--da-dur-reveal) var(--da-ease);
	transition-delay: var(--da-reveal-delay, 0ms);
}

.da-motion [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Masked line reveal for headings. */
.da-motion [data-reveal="mask"] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 105% 0);
	transition: clip-path var(--da-dur-reveal) var(--da-ease);
	transition-delay: var(--da-reveal-delay, 0ms);
}

/* The overhang this has to clear is the descender, which scales with the font
   size -- not with the box. At -20% the allowance shrank with the box, so a
   single-line heading with a descender ("Why DA Digital", "Before you get in
   touch.") had about 4px cut off the y and g. In em it tracks the thing it is
   actually clearing, at any size or line count. */
.da-motion [data-reveal="mask"].is-revealed {
	clip-path: inset(0 0 -0.35em 0);
}

@media (prefers-reduced-motion: reduce) {
	.da-motion [data-reveal],
	.da-motion [data-reveal="mask"] {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

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

.da-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--da-z-header);
	/* Always the off-white surface, never the hero's. The bar reads as global
	   navigation rather than as part of whichever page is under it, and
	   because it is opaque and sits above the field layer, a dark hero's mesh
	   stops drawing through it. */
	background-color: var(--da-off-white);
	border-bottom: var(--da-border) solid var(--da-navy-08);
	transition:
		border-color var(--da-dur) var(--da-ease),
		transform var(--da-dur-slow) var(--da-ease);
}

/* Settled over content: same surface, only the rule firms up, so scrolling
   never produces a colour change. */
.da-header.is-compact {
	border-bottom-color: var(--da-navy-14);
}

.da-header.is-hidden {
	transform: translateY(-100%);
}

/* The admin bar is fixed too, so the header has to start below it. */
body.admin-bar .da-header {
	top: 32px;
}

body.admin-bar .da-menu-panel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .da-header {
		top: 46px;
	}

	body.admin-bar .da-menu-panel {
		top: 46px;
	}
}

.da-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-lg);
	height: var(--da-header-h);
	transition: height var(--da-dur) var(--da-ease);
}

.da-header.is-compact .da-header__inner {
	height: var(--da-header-h-compact);
}

.da-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

/* Height-driven so the ratio is never touched. The supplied artwork is
   centred in a far larger transparent canvas -- the mark is 558x307 of
   1200x630, so only 49% of the height is ink -- which is why these heights
   read as large for a header. They are tuned against the visible mark, not
   the file. The source is 1200px wide, well past 2x at these sizes. */
.da-brand__logo {
	display: block;
	height: 3.75rem;
	width: auto;
	max-width: none;
}

.da-header.is-compact .da-brand__logo {
	height: 3.125rem;
}

/* A touch larger in the footer, where there is room for it to read as a
   sign-off rather than navigation. */
.da-footer .da-brand__logo {
	height: 5rem;
}

@media (max-width: 600px) {
	.da-brand__logo {
		height: 3.125rem;
	}

	.da-footer .da-brand__logo {
		height: 4rem;
	}
}

.da-nav__list {
	display: flex;
	align-items: center;
	gap: var(--da-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.da-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: var(--da-space-3xs);
	color: var(--da-text);
	font-size: var(--da-size-nav);
	text-decoration: none;
	transition: color var(--da-dur) var(--da-ease);
}

/* Hairline that grows from the left; no colour flash, no glow. */
.da-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--da-border);
	background-color: var(--da-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--da-dur) var(--da-ease);
}

.da-nav__list a:hover::after,
.da-nav__list a:focus-visible::after,
.da-nav__list .da-current > a::after {
	transform: scaleX(1);
}

/* The active route keeps the rule; hover only borrows it. */
.da-nav__list .da-current > a {
	font-weight: var(--da-weight-medium);
}

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

/* ------------------------------------------------- Mobile menu toggle -- */

.da-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: calc(var(--da-space-2xs) * -1);
	padding: 0;
	border: 0;
	background: none;
	color: var(--da-text);
	cursor: pointer;
}

.da-menu-toggle__bars {
	position: relative;
	display: block;
	width: 1.375rem;
	height: 0.625rem;
}

.da-menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--da-border-strong);
	background-color: currentColor;
	transition: transform var(--da-dur) var(--da-ease),
		opacity var(--da-dur-fast) var(--da-ease);
}

.da-menu-toggle__bars span:first-child {
	top: 0;
}

.da-menu-toggle__bars span:last-child {
	bottom: 0;
}

.da-menu-toggle[aria-expanded="true"] .da-menu-toggle__bars span:first-child {
	transform: translateY(0.3125rem) rotate(45deg);
}

.da-menu-toggle[aria-expanded="true"] .da-menu-toggle__bars span:last-child {
	transform: translateY(-0.3125rem) rotate(-45deg);
}

/* --------------------------------------------------- Mobile menu panel -- */

.da-menu-panel {
	position: fixed;
	inset: 0;
	z-index: var(--da-z-menu);
	display: flex;
	flex-direction: column;
	padding: var(--da-space-sm) 0 var(--da-space-2xl);
	background-color: var(--da-bg);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--da-dur) var(--da-ease),
		visibility 0s linear var(--da-dur);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.da-menu-panel.is-open {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.da-menu-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--da-header-h);
}

.da-menu-panel__nav ul {
	margin: var(--da-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.da-menu-panel__nav li {
	border-top: var(--da-border) solid var(--da-rule);
}

.da-menu-panel__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--da-space-md);
	color: var(--da-text);
	font-size: clamp(1.5rem, 7vw, 2rem);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
	text-decoration: none;
}

.da-menu-panel__nav a::after {
	content: "";
	width: var(--da-space-md);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
	opacity: 0;
	transition: opacity var(--da-dur) var(--da-ease);
}

.da-menu-panel__nav a:hover::after,
.da-menu-panel__nav a:focus-visible::after {
	opacity: 1;
}

.da-menu-panel__foot {
	margin-top: auto;
	padding-top: var(--da-space-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--da-space-md);
}

.da-menu-panel__contact {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-3xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-menu-panel__contact a {
	color: inherit;
}

@media (max-width: 1023px) {
	.da-header__nav {
		display: none;
	}

	.da-menu-toggle {
		display: inline-flex;
	}

	.da-header__actions .da-button {
		display: none;
	}
}

@media (min-width: 1024px) {
	.da-menu-panel {
		display: none;
	}
}

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

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

/* The mesh sits behind a section's content and never receives pointer events,
   so it cannot intercept a scroll, a tap or a drag. Any section can carry one. */
.da-signal-field {
	position: absolute;
	inset: 0;
	z-index: var(--da-z-field);
	pointer-events: none;
	overflow: hidden;
	/* Structural lattice by default. Scaling the layer rather than the
	   per-preset alphas keeps lines, nodes and trajectory in proportion, and
	   leaves every interaction in the engine untouched. */
	opacity: var(--da-grid-opacity);
}

/* Organic spider-web topology: every preset whose name starts web. */
.da-signal-field[data-signal-field^="web"] {
	opacity: var(--da-web-opacity);
}

.da-signal-field canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Fades the lattice out where it would sit under body copy. */
.da-signal-field--masked {
	/* Only the alpha of a mask matters; the colour is any opaque value, so it
	   uses a palette token rather than introducing a literal. */
	-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, var(--da-navy) 45%, transparent 100%);
	mask-image: radial-gradient(120% 90% at 50% 40%, var(--da-navy) 45%, transparent 100%);
}

/* A section that hosts a field needs a stacking context and lifted content. */
.da-has-field {
	position: relative;
	isolation: isolate;
}

.da-has-field > .da-container,
.da-has-field > .da-hero__inner {
	position: relative;
	z-index: var(--da-z-content);
}

.da-hero__inner {
	position: relative;
	z-index: var(--da-z-content);
	width: 100%;
}

.da-hero__content {
	/* Not a ch value: `ch` here would resolve against the body font-size, not
	   the display size of the heading inside, and collapse the column. */
	max-width: min(100%, 52rem);
}

.da-hero__title {
	margin-top: var(--da-space-md);
	/* On the heading itself, so `ch` resolves against the display size. */
	max-width: 15ch;
}

.da-hero__lede {
	margin-top: var(--da-space-md);
	max-width: 46ch;
}

.da-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-sm);
	margin-top: var(--da-space-xl);
}

.da-hero__scroll {
	position: absolute;
	right: var(--da-gutter);
	bottom: var(--da-space-xl);
	z-index: var(--da-z-content);
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-hero__scroll::after {
	content: "";
	width: var(--da-space-xl);
	height: var(--da-border);
	background-color: var(--da-rule);
}

@media (max-width: 767px) {
	.da-hero__content {
		max-width: none;
	}

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

	.da-hero__scroll {
		display: none;
	}
}

/* ------------------------------------------------------- Logo strip --- */

.da-trust {
	background-color: var(--da-bg);
	border-block: var(--da-border) solid var(--da-rule);
	padding-block: var(--da-space-lg);
	overflow: hidden;
}

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

.da-marquee {
	display: flex;
	gap: var(--da-space-2xl);
	width: max-content;
	animation: da-marquee 48s linear infinite;
}

.da-marquee:hover,
.da-marquee:focus-within {
	animation-play-state: paused;
}

.da-marquee__item {
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-body);
	font-weight: var(--da-weight-medium);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.da-marquee__item img {
	max-height: 1.75rem;
	width: auto;
}

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

@media (prefers-reduced-motion: reduce) {
	.da-marquee {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		gap: var(--da-space-md) var(--da-space-lg);
	}
}

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

.da-positioning__statement {
	max-width: 30ch;
	font-size: clamp(1.375rem, 2.6vw, 2.125rem);
	font-weight: var(--da-weight-regular);
	line-height: 1.32;
	letter-spacing: var(--da-tracking-heading);
	color: var(--da-text);
}

.da-positioning__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--da-space-lg);
	margin-top: var(--da-space-2xl);
	padding-top: var(--da-space-lg);
	border-top: var(--da-border) solid var(--da-rule);
}

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

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

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

.da-service-row__trigger {
	display: grid;
	grid-template-columns: 4rem 1fr auto;
	align-items: center;
	gap: var(--da-space-md);
	width: 100%;
	padding-block: clamp(1.25rem, 2.4vw, 2rem);
	border: 0;
	background: none;
	color: var(--da-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: padding-left var(--da-dur) var(--da-ease),
		color var(--da-dur) var(--da-ease);
}

.da-service-row__trigger:hover,
.da-service-row.is-open .da-service-row__trigger {
	padding-left: var(--da-space-sm);
}

.da-service-row__number {
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--da-tracking-eyebrow);
	transition: color var(--da-dur) var(--da-ease);
}

.da-service-row__trigger:hover .da-service-row__number,
.da-service-row.is-open .da-service-row__number {
	color: var(--da-accent);
}

.da-service-row__title {
	margin: 0;
	font-size: clamp(1.375rem, 3.2vw, 2.375rem);
	font-weight: var(--da-weight-medium);
	line-height: 1.1;
	letter-spacing: var(--da-tracking-heading);
}

.da-service-row__indicator {
	position: relative;
	width: var(--da-space-md);
	height: var(--da-space-md);
	flex: none;
}

.da-service-row__indicator::before,
.da-service-row__indicator::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: var(--da-border-strong);
	background-color: var(--da-text-faint);
	transition: transform var(--da-dur) var(--da-ease),
		background-color var(--da-dur) var(--da-ease);
}

.da-service-row__indicator::after {
	transform: rotate(90deg);
}

.da-service-row.is-open .da-service-row__indicator::before,
.da-service-row.is-open .da-service-row__indicator::after {
	background-color: var(--da-accent);
}

.da-service-row.is-open .da-service-row__indicator::after {
	transform: rotate(0deg);
}

.da-service-row__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--da-dur-slow) var(--da-ease);
}

.da-service-row.is-open .da-service-row__panel {
	grid-template-rows: 1fr;
}

.da-service-row__panel > div {
	overflow: hidden;
}

.da-service-row__body {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--da-space-md);
	padding-bottom: var(--da-space-xl);
}

.da-service-row__body > *:first-child {
	grid-column: 2;
}

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

.da-service-row__capabilities li {
	display: flex;
	align-items: center;
	gap: var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

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

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

/* The open row gets real weight: a solid orange edge and a tinted panel, so the
   active state is unmistakable rather than a one-pixel colour change. */
.da-service-row.is-open {
	background-color: var(--da-bg-alt);
}

.da-service-row.is-open .da-service-row__trigger {
	box-shadow: inset 3px 0 0 0 var(--da-accent);
}

.da-service-row__trigger {
	padding-inline: var(--da-space-sm);
}

.da-service-row.is-open .da-service-row__body,
.da-service-row__body {
	padding-inline: var(--da-space-sm);
}

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

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below the longest word and is the usual cause of a sideways scroll on a
   narrow phone. Text cells opt out and wrap instead. */
.da-service-row__trigger,
.da-service-row__title,
.da-work-item__body,
.da-work-item__title,
.da-cta__inner > *,
.da-footer__top > * {
	min-width: 0;
}

.da-service-row__title,
.da-work-item__title,
.da-insight__title {
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.da-service-row__trigger {
		grid-template-columns: 2.5rem 1fr auto;
		gap: var(--da-space-sm);
	}

	.da-service-row__body {
		grid-template-columns: 1fr;
	}

	.da-service-row__body > *:first-child {
		grid-column: 1;
	}
}

/* ------------------------------------------------------- Case studies --- */

.da-work__list {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-4xl);
}

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

.da-work-item:nth-child(even) .da-work-item__media {
	order: 2;
}

.da-work-item__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--da-radius-sm);
}

.da-work-item__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	background-color: var(--da-bg-alt);
	overflow: hidden;
}

.da-work-item__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Slight overscale gives the parallax somewhere to travel. */
	transform: scale(1.06) translateY(var(--da-parallax, 0));
	transition: transform var(--da-dur-slow) var(--da-ease);
}

.da-work-item:hover .da-work-item__figure img {
	transform: scale(1.02) translateY(var(--da-parallax, 0));
}

/* Image reveal: a wipe, not a fade-in-and-bounce. */
.da-motion .da-work-item__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-item__figure.is-revealed::after {
	transform: scaleY(0);
}

/* Placeholder used until a project image is uploaded. Deliberately plain. */
.da-work-item__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-work-item__placeholder::before {
	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-work-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-2xs) var(--da-space-sm);
	margin: 0 0 var(--da-space-sm);
	padding: 0;
	list-style: none;
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-work-item__title {
	margin: 0;
}

.da-work-item__title a {
	color: inherit;
	text-decoration: none;
}

.da-work-item__summary {
	margin-top: var(--da-space-sm);
}

.da-work-item__results {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-lg);
	margin: var(--da-space-lg) 0 0;
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-work-item__result-value {
	display: block;
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
	font-variant-numeric: tabular-nums;
}

.da-work-item__result-label {
	display: block;
	margin-top: var(--da-space-3xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-work-item__cta {
	margin-top: var(--da-space-lg);
}

@media (max-width: 900px) {
	.da-work__list {
		gap: var(--da-space-3xl);
	}

	.da-work-item {
		grid-template-columns: 1fr;
		gap: var(--da-space-lg);
	}

	.da-work-item:nth-child(even) .da-work-item__media {
		order: 0;
	}
}

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

.da-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--da-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The orange trajectory connecting the steps: one hairline, drawn in. */
.da-process__steps::before {
	content: "";
	position: absolute;
	top: 0.4375rem;
	left: 0;
	right: 0;
	height: var(--da-border-strong);
	background-color: var(--da-accent);
	transform: scaleX(var(--da-progress, 1));
	transform-origin: left;
	transition: transform var(--da-dur-reveal) var(--da-ease-inout);
}

.da-process__step {
	position: relative;
	padding-top: var(--da-space-lg);
}

.da-process__step::before {
	content: "";
	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);
}

.da-process__step-index {
	display: block;
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--da-tracking-eyebrow);
}

.da-process__step-title {
	margin: var(--da-space-3xs) 0 var(--da-space-2xs);
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	letter-spacing: var(--da-tracking-heading);
}

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

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

	/* Vertical trajectory on small screens. */
	.da-process__steps::before {
		top: 0;
		bottom: 0;
		left: 0.4375rem;
		right: auto;
		width: var(--da-border-strong);
		height: auto;
		transform: scaleY(var(--da-progress, 1));
		transform-origin: top;
	}

	.da-process__step {
		padding-top: 0;
		padding-left: var(--da-space-xl);
	}
}

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

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

.da-stat__value {
	display: block;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: var(--da-weight-medium);
	line-height: 1;
	letter-spacing: var(--da-tracking-display);
	font-variant-numeric: tabular-nums;
}

.da-stat__label {
	display: block;
	margin-top: var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

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

.da-quotes__viewport {
	position: relative;
}

.da-quote {
	display: none;
}

.da-quote.is-active {
	display: block;
}

.da-quote__text {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(1.375rem, 2.8vw, 2.25rem);
	font-weight: var(--da-weight-regular);
	line-height: 1.3;
	letter-spacing: var(--da-tracking-heading);
	text-wrap: balance;
}

.da-quote__text::before {
	content: "\201C";
	color: var(--da-accent);
}

.da-quote__text::after {
	content: "\201D";
	color: var(--da-accent);
}

.da-quote__attribution {
	display: flex;
	align-items: center;
	gap: var(--da-space-sm);
	margin-top: var(--da-space-lg);
	font-size: var(--da-size-small);
}

.da-quote__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--da-radius-pill);
	object-fit: cover;
}

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

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

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

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

.da-quotes__button:hover:not([disabled]) {
	border-color: var(--da-accent);
	color: var(--da-accent);
}

.da-quotes__button[disabled] {
	opacity: 0.4;
	cursor: default;
}

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

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

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

.da-insight {
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
	padding-top: var(--da-space-lg);
}

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

.da-insight__title {
	margin: 0;
	font-size: var(--da-size-h3);
	font-weight: var(--da-weight-medium);
	line-height: var(--da-leading-tight);
	letter-spacing: var(--da-tracking-heading);
}

.da-insight__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);
	transition: background-size var(--da-dur) var(--da-ease);
}

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

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

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

.da-cta {
	padding-block: var(--da-section-y);
}

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

.da-cta__heading {
	max-width: 18ch;
}

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

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

/* ------------------------------------------------------------ Footer --- */

.da-footer {
	padding-block: var(--da-section-y-tight) var(--da-space-xl);
	border-top: var(--da-border) solid var(--da-rule);
}

.da-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--da-space-2xl) var(--da-space-lg);
}

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

.da-footer__tagline {
	max-width: 28ch;
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

.da-footer__col-title {
	margin: 0 0 var(--da-space-md);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
	font-weight: var(--da-weight-semibold);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--da-space-2xs);
}

.da-footer a {
	color: var(--da-text);
	font-size: var(--da-size-small);
	text-decoration: none;
	transition: color var(--da-dur) var(--da-ease);
}

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

.da-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--da-space-sm);
	margin-top: var(--da-space-3xl);
	padding-top: var(--da-space-md);
	border-top: var(--da-border) solid var(--da-rule);
	color: var(--da-text-soft);
	font-size: var(--da-size-micro);
}

.da-footer .da-footer__legal {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--da-space-md);
}

.da-footer__social {
	flex-direction: row;
	gap: var(--da-space-md);
}

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

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

@media (max-width: 480px) {
	.da-service-row__title {
		font-size: 1.25rem;
	}

	.da-footer__top {
		grid-template-columns: 1fr;
		gap: var(--da-space-xl);
	}
}

/* =======================================================================
   Surfaces, composition and editorial furniture (Phase 4)
   ==================================================================== */

/* A dark block should read as one continuous field of navy even when it spans
   several sections, so consecutive dark sections drop the dividing rule. */
.da-surface-dark + .da-surface-dark {
	border-top: 0;
}

.da-surface-dark .da-section--ruled + .da-section--ruled {
	border-top-color: var(--da-rule);
}

/* Section numbering ---------------------------------------------------- */

.da-section__index {
	display: block;
	margin-bottom: var(--da-space-sm);
	color: var(--da-accent-ink);
	font-size: var(--da-size-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--da-tracking-eyebrow);
}

/* A section head that spans the grid, with the heading given real weight. */
.da-section__head--split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: var(--da-space-2xl);
	max-width: none;
}

.da-section__head--split .da-section__aside {
	position: relative;
	padding-top: var(--da-space-md);
	padding-bottom: var(--da-space-2xs);
	color: var(--da-text-soft);
	font-size: var(--da-size-small);
}

/* A short accent rule rather than one spanning the whole column. */
.da-section__head--split .da-section__aside::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--da-space-2xl);
	height: var(--da-border-strong);
	background-color: var(--da-accent);
}

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

/* Oversized display type used to open a page. */
.da-page-hero {
	position: relative;
	padding-top: calc(var(--da-header-h) + var(--da-space-3xl));
	padding-bottom: var(--da-section-y-tight);
	overflow: hidden;
}

.da-page-hero__title {
	max-width: 14ch;
	margin-top: var(--da-space-md);
}

.da-page-hero__lede {
	max-width: 52ch;
	margin-top: var(--da-space-lg);
}

.da-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-md) var(--da-space-xl);
	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-page-hero__meta dt,
.da-meta-key {
	display: block;
	margin-bottom: var(--da-space-3xs);
	color: var(--da-text-faint);
	font-size: var(--da-size-micro);
	letter-spacing: var(--da-tracking-eyebrow);
	text-transform: uppercase;
}

.da-page-hero__meta dd,
.da-meta-value {
	margin: 0;
	font-size: var(--da-size-small);
	font-weight: var(--da-weight-medium);
}

/* A fine orange rule used to open or close a composition. */
.da-rule-accent {
	width: var(--da-space-2xl);
	height: var(--da-border-strong);
	margin-bottom: var(--da-space-md);
	background-color: var(--da-accent);
}

/* Editorial split: heavy text column against a secondary column. */
.da-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--da-space-2xl);
	align-items: start;
}

.da-split--wide-left {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.da-split--wide-right {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

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

/* A bordered definition block, used for facts rather than decoration. */
.da-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	gap: var(--da-space-lg);
	margin: 0;
	padding-top: var(--da-space-lg);
	border-top: var(--da-border) solid var(--da-rule);
}

/* Numbered editorial list shared by process and approach sections. */
.da-numbered {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: da-step;
}

.da-numbered__item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--da-space-md);
	padding-block: var(--da-space-lg);
	border-top: var(--da-border) solid var(--da-rule);
	counter-increment: da-step;
}

.da-numbered__item::before {
	content: counter(da-step, decimal-leading-zero);
	color: var(--da-accent);
	font-size: var(--da-size-small);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--da-tracking-eyebrow);
}

@media (max-width: 600px) {
	.da-numbered__item {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: var(--da-space-sm);
	}
}

/* ---------------------------------------------- Header over dark heroes -- */

/* ------------------------------------------------ Typography hierarchy -- */

/*
 * Display faces carry the headings; DM Sans carries everything read at length.
 * Each step sets its own weight and tracking, so the hierarchy survives even
 * when two levels end up at a similar size.
 */
.da-display,
.da-display-xl,
.da-h1,
.da-h2,
.da-h3,
.da-h4,
.da-stat__value,
.da-metric__value,
.da-service-row__title,
.da-quote__text,
.da-positioning__statement,
.da-statement__text,
.da-404__mark {
	font-family: var(--da-font-display);
	font-weight: var(--da-weight-semibold);
}

.da-display-xl {
	margin: 0;
	font-size: var(--da-size-display-xl);
	font-weight: var(--da-weight-bold);
	line-height: var(--da-leading-display);
	letter-spacing: var(--da-tracking-display);
	text-wrap: balance;
}

.da-h4 {
	margin: 0;
	font-size: var(--da-size-h4);
	font-weight: var(--da-weight-semibold);
	line-height: var(--da-leading-tight);
	letter-spacing: var(--da-tracking-heading);
}

.da-display,
.da-h1 {
	font-weight: var(--da-weight-bold);
}

/* Body text stays DM Sans at a regular weight; the lede is the only place
   body copy steps up in size. */
.da-lede {
	font-weight: var(--da-weight-regular);
}

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

.da-nav__list a,
.da-button {
	font-family: var(--da-font);
	font-weight: var(--da-weight-medium);
}

.da-stat__value,
.da-metric__value {
	font-size: var(--da-size-metric);
	font-weight: var(--da-weight-bold);
	letter-spacing: var(--da-tracking-metric);
	line-height: 1;
}

/* Concept (illustrative) case study note, shown once in the hero. */
.da-concept-note {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-style: italic;
	opacity: 0.8;
}