/**
 * DELIAN design system.
 *
 * 1. Tokens          6. Hero              11. Feature band     16. Forms
 * 2. Base            7. Process flow      12. Capability       17. Footer
 * 3. Typography      8. Section header    13. Cards & data     18. Archive & nav
 * 4. Layout          9. Buttons & links   14. Steps & tiles    19. Prose & motion
 * 5. Header & nav   10. Placeholders      15. FAQ & notices
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--dl-ink: #0e1113;
	--dl-ink-2: #151a1d;
	--dl-ink-3: #1d2429;
	--dl-steel: #232b30;
	--dl-paper: #ffffff;
	--dl-mist: #f3f5f6;
	--dl-mist-2: #e9edef;
	--dl-line: #d9dee1;
	--dl-line-strong: #bfc7cc;
	--dl-text: #1a2126;
	--dl-muted: #5f6b73;
	--dl-invert: #f1f4f5;
	--dl-invert-muted: #a6b1b8;
	--dl-accent: #d2581f;
	--dl-accent-rgb: 210, 88, 31;
	--dl-accent-strong: #b04417;
	--dl-accent-soft: rgba(210, 88, 31, 0.12);
	--dl-accent-line: rgba(210, 88, 31, 0.42);
	--dl-ink-line: rgba(255, 255, 255, 0.13);
	--dl-ink-line-strong: rgba(255, 255, 255, 0.28);
	--dl-success: #1d7a52;
	--dl-error: #b3261e;

	/* One neutral, modern sans everywhere: display headings and body copy share the
	   same family, so nothing looks like a second typeface was bolted on. Inter and
	   the variable Segoe UI faces are used when the operating system has them, with
	   the classic system stack behind them — still no webfont download. */
	--dl-font-sans: "Inter", "Inter var", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--dl-font-display: "Inter", "Inter var", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--dl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--dl-fs-xs: 0.75rem;
	--dl-fs-sm: 0.8125rem;
	--dl-fs-base: 1rem;
	--dl-fs-md: 1.0625rem;
	--dl-fs-lg: clamp(1.125rem, 1.6vw, 1.3rem);
	--dl-fs-xl: clamp(1.35rem, 2.1vw, 1.75rem);
	--dl-fs-2xl: clamp(1.6rem, 2.8vw, 2.3rem);
	--dl-fs-3xl: clamp(2rem, 4.4vw, 3.2rem);
	--dl-fs-4xl: clamp(2.35rem, 5.6vw, 4rem);

	--dl-space-1: 0.25rem;
	--dl-space-2: 0.5rem;
	--dl-space-3: 0.75rem;
	--dl-space-4: 1rem;
	--dl-space-5: 1.5rem;
	--dl-space-6: 2rem;
	--dl-space-7: 3rem;
	--dl-space-8: 4rem;
	--dl-space-9: 6rem;

	--dl-radius: 2px;
	--dl-radius-md: 3px;
	--dl-radius-lg: 6px;
	--dl-container: 1320px;
	--dl-gutter: clamp(1.15rem, 4vw, 2.5rem);
	--dl-section-y: clamp(3.5rem, 7vw, 7rem);
	--dl-shadow: 0 1px 2px rgba(14, 17, 19, 0.06);
	--dl-shadow-lg: 0 18px 40px -28px rgba(14, 17, 19, 0.45);
	--dl-header-height: 74px;
	--dl-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

	/*
 * The bottom-right corner is shared by three floating controls, and they stack
 * upwards from here: the WhatsApp button, the back-to-top control above it and
 * the ask prompt above that (`--dl-corner-y` plus a button plus a gap, written out
 * where the two are placed, so a narrower screen that moves the corner moves the
 * whole stack with it). The numbers live in one place so the three cannot drift
 * into each other.
 */
	--dl-corner-x: clamp(0.9rem, 3vw, 1.6rem);
	--dl-corner-y: clamp(0.9rem, 3vw, 1.6rem);
	--dl-fab-size: 3.25rem;
	--dl-fab-gap: 0.6rem;
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body.dl-body {
	margin: 0;
	background: var(--dl-paper);
	color: var(--dl-text);
	font-family: var(--dl-font-sans);
	font-size: var(--dl-fs-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

figure {
	margin: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: var(--dl-accent-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--dl-ink);
}

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

.dl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 20px;
	background: var(--dl-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.dl-skip-link:focus {
	left: 12px;
	top: 12px;
	color: #fff;
}

[id],
:target {
	scroll-margin-top: calc(var(--dl-header-height) + 18px);
}

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

/* 3. Typography ------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5 {
	margin: 0 0 0.6em;
	color: var(--dl-ink);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

h1 {
	font-size: var(--dl-fs-4xl);
}

h2 {
	font-size: var(--dl-fs-3xl);
}

h3 {
	font-size: var(--dl-fs-xl);
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--dl-fs-lg);
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 650;
}

.dl-eyebrow,
.dl-label {
	margin: 0 0 0.6rem;
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* 4. Layout ---------------------------------------------------------------- */
.dl-container {
	width: 100%;
	max-width: var(--dl-container);
	margin: 0 auto;
	padding: 0 var(--dl-gutter);
}

.dl-main {
	display: block;
	padding-bottom: 0;
}

.dl-section {
	padding: var(--dl-section-y) 0;
	background: var(--dl-paper);
}

.dl-section--mist {
	background: var(--dl-mist);
	border-top: 1px solid var(--dl-line);
	border-bottom: 1px solid var(--dl-line);
}

.dl-section--related {
	padding-top: calc(var(--dl-section-y) * 0.8);
}

.dl-grid {
	display: grid;
	gap: clamp(1.25rem, 2.6vw, 2rem);
}

.dl-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dl-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.dl-split {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
}

.dl-split__aside {
	align-self: start;
}

.dl-aside-note {
	margin-top: 1rem;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
}

@media (min-width: 1024px) {
	.dl-split {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
		align-items: start;
	}
}

/* 5. Header & navigation --------------------------------------------------- */
.dl-topbar {
	background: var(--dl-ink-2);
	border-bottom: 1px solid var(--dl-ink-line);
	color: var(--dl-invert-muted);
	font-size: var(--dl-fs-sm);
}

.dl-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}

.dl-topbar__claim {
	margin: 0;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
}

.dl-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-topbar__list a {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	color: var(--dl-invert);
	text-decoration: none;
}

.dl-topbar__list a:hover {
	color: #fff;
}

.dl-topbar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
}

/*
 * Social icon row — the top bar and the footer draw the same list
 * (`delian_social_icon_list()`), so the marks a visitor sees at the top of the
 * page are the same ones at the bottom.
 */
.dl-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	/* Squared like the rest of the design, and dimmed so a row of six does not
	   shout louder than the sentence beside it. */
	opacity: 0.6;
	transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}

.dl-social__link:hover,
.dl-social__link:focus-visible {
	opacity: 1;
	color: var(--dl-accent);
	border-color: var(--dl-accent);
}

/* The top bar is a slim strip, so its icons sit a size smaller. */
.dl-social--topbar .dl-social__link {
	width: 1.6rem;
	height: 1.6rem;
}

.dl-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--dl-ink);
	border-bottom: 1px solid var(--dl-ink-line);
	color: var(--dl-invert);
	transition: box-shadow var(--dl-transition);
}

.dl-header.is-stuck {
	box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.8);
}

.dl-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--dl-header-height);
}

.dl-brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.dl-brand a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dl-brand__mark {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0.35rem 0;
}

/* The delivered brand mark. It carries the name itself, so when it is used the
   wordmark is not repeated — only the positioning line stays under it. */
.dl-brand__logo {
	display: block;
	width: auto;
	height: 3rem;
	margin-bottom: 0.35rem;
	/* The header's bar heights are set for a two-line wordmark, so the logo keeps a
	   little air below it rather than filling the row edge to edge. */
	max-width: 12rem;
}

.dl-brand__name {
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: #fff;
	line-height: 1.1;
}

.dl-brand__tagline {
	font-family: var(--dl-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dl-invert-muted);
}

.custom-logo {
	max-height: 46px;
	width: auto;
}

.dl-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.dl-nav__list {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-nav__list > li {
	position: relative;
}

.dl-nav__list > li > a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0.55rem;
	border-radius: var(--dl-radius);
	color: var(--dl-invert);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dl-transition), background var(--dl-transition);
}

.dl-nav__list > li > a:hover,
.dl-nav__list > li.is-current > a {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.dl-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.dl-nav .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 100;
	min-width: 264px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--dl-ink-3);
	border: 1px solid var(--dl-ink-line);
	border-radius: var(--dl-radius-md);
	box-shadow: var(--dl-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dl-transition), transform var(--dl-transition), visibility var(--dl-transition);
}

.dl-nav .sub-menu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--dl-radius);
	color: var(--dl-invert);
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: normal;
}

.dl-nav .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.dl-nav .sub-menu .menu-item:first-child a {
	color: var(--dl-accent);
	font-weight: 600;
}

@media (min-width: 1180px) {
	.dl-nav__list > li:hover > .sub-menu,
	.dl-nav__list > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.dl-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.dl-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--dl-ink-line-strong);
	border-radius: var(--dl-radius);
	color: var(--dl-invert);
	cursor: pointer;
}

.dl-nav-toggle__close {
	display: none;
}

@media (max-width: 1179px) {
	.dl-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: block;
		padding: calc(var(--dl-header-height) + 3.5rem) var(--dl-gutter) 3rem;
		background: var(--dl-ink);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dl-transition), visibility var(--dl-transition);
	}

	.dl-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.dl-nav__list {
		display: block;
	}

	.dl-nav__list > li {
		border-bottom: 1px solid var(--dl-ink-line);
	}

	.dl-nav__list > li > a {
		padding: 1rem 0;
		font-size: 1.0625rem;
		letter-spacing: 0.04em;
	}

	.dl-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0.75rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.dl-nav__list > li.is-expanded .sub-menu {
		display: block;
	}

	.dl-nav .sub-menu a {
		padding: 0.5rem 0;
		color: var(--dl-invert-muted);
		font-size: 0.9375rem;
	}

	.dl-nav-toggle {
		display: inline-flex;
	}

	.dl-body--nav-open {
		overflow: hidden;
	}

	.dl-body--nav-open .dl-nav-toggle__open {
		display: none;
	}

	.dl-body--nav-open .dl-nav-toggle__close {
		display: block;
	}
}

/* The full navigation, brand tagline and primary CTA only coexist on very
   wide screens; below that the header tightens before collapsing at 1180px. */
@media (max-width: 1559px) {
	.dl-brand__tagline {
		display: none;
	}

	.dl-nav__list > li > a {
		padding: 0.5rem 0.45rem;
		font-size: 0.78rem;
		letter-spacing: 0.03em;
	}

	.dl-header__actions .dl-btn--compact {
		padding: 0.65rem 0.8rem;
		font-size: 0.72rem;
		letter-spacing: 0.06em;
	}
}

@media (max-width: 900px) {
	.dl-topbar__inner {
		justify-content: center;
	}

	.dl-topbar__claim {
		display: none;
	}
}

@media (max-width: 560px) {
	.dl-header__actions .dl-btn--compact .dl-btn__label {
		display: none;
	}

	.dl-header__actions .dl-btn--compact {
		padding: 0.65rem;
	}
}

/* 6. Hero ------------------------------------------------------------------ */
.dl-hero {
	position: relative;
	background: var(--dl-ink);
	color: var(--dl-invert);
	padding: clamp(2.5rem, 6vw, 5rem) 0;
	overflow: hidden;
}

.dl-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--dl-ink-line);
}

.dl-hero h1,
.dl-hero h2 {
	color: #fff;
}

.dl-hero__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 1024px) {
	.dl-hero__inner {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
		align-items: center;
	}
}

.dl-hero__meta {
	margin-bottom: 1rem;
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-hero__title {
	margin-bottom: 0.75rem;
	font-size: var(--dl-fs-4xl);
	letter-spacing: -0.025em;
}

.dl-hero__subtitle {
	margin-bottom: 1rem;
	color: #fff;
	font-size: var(--dl-fs-lg);
	font-weight: 500;
}

.dl-hero__text-body {
	max-width: 46ch;
	margin-bottom: 1.75rem;
	color: var(--dl-invert-muted);
	font-size: var(--dl-fs-md);
}

.dl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0;
}

.dl-hero .dl-btn--secondary,
.dl-section--feature .dl-btn--secondary {
	background: transparent;
	border-color: var(--dl-ink-line-strong);
	color: var(--dl-invert);
}

.dl-hero .dl-btn--secondary:hover,
.dl-section--feature .dl-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.dl-hero__index {
	display: grid;
	gap: 0.75rem;
	margin: 2.25rem 0 0;
	padding: 1.25rem 0 0;
	list-style: none;
	border-top: 1px solid var(--dl-ink-line);
}

.dl-hero__index li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	align-items: baseline;
}

.dl-hero__index-key {
	min-width: 9rem;
	color: var(--dl-invert-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dl-hero__index-value {
	color: var(--dl-invert);
	font-size: 0.9375rem;
}

.dl-hero__media {
	display: grid;
	gap: 1rem;
}

.dl-hero__caption {
	margin: 0;
	color: var(--dl-invert-muted);
	font-size: var(--dl-fs-sm);
}

.dl-hero--compact {
	padding: clamp(2rem, 4vw, 3.25rem) 0;
}

.dl-hero--center {
	text-align: center;
}

.dl-hero--center .dl-hero__actions {
	justify-content: center;
}

/* Key/value grids that sit inside the hero are on the dark band, so they need
   the inverse treatment rather than the page's default ink-on-white. */
.dl-hero .dl-datagrid__key {
	color: rgba(255, 255, 255, 0.72);
}

.dl-hero .dl-datagrid__value {
	color: var(--dl-invert);
}

.dl-hero .dl-datagrid__item {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* 7. Process flow ---------------------------------------------------------- */
.dl-flow {
	/* Containing block for the absolutely positioned rail fill and the stage
	   counter: without it they resolve against the page and land on the header. */
	position: relative;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.dl-flow__headline {
	margin-bottom: 0.35rem;
	font-weight: 650;
	color: var(--dl-ink);
	font-size: var(--dl-fs-lg);
}

.dl-flow__intro {
	max-width: 70ch;
	color: var(--dl-muted);
}

.dl-flow__list {
	display: grid;
	gap: 0;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: dl-flow;
}

.dl-flow__stage {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"index icon toggle"
		"title title title"
		"detail detail detail";
	gap: 0.75rem 1rem;
	align-items: center;
	padding: 1.5rem 0;
	border-top: 1px solid var(--dl-line);
}

/* The whole stage is a click target (assets/js/main.js routes the click to its
   own toggle); the "+" stays the accessible control. */
.dl-js .dl-flow__stage {
	cursor: pointer;
}

.dl-js .dl-flow__stage:hover .dl-flow__title {
	color: var(--dl-accent);
}

.dl-flow__stage:last-child {
	border-bottom: 1px solid var(--dl-line);
}

.dl-flow__index {
	grid-area: index;
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.dl-flow__icon {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--dl-ink);
	background: var(--dl-mist);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
}

.dl-flow__title {
	grid-area: title;
	color: var(--dl-ink);
	font-size: var(--dl-fs-xl);
	font-weight: 650;
	letter-spacing: -0.01em;
}

.dl-flow__toggle {
	grid-area: toggle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--dl-line-strong);
	border-radius: 50%;
	color: var(--dl-ink);
	cursor: pointer;
	transition: background var(--dl-transition), color var(--dl-transition), transform var(--dl-transition);
}

.dl-flow__toggle[aria-expanded="true"] {
	background: var(--dl-ink);
	border-color: var(--dl-ink);
	color: #fff;
	transform: rotate(45deg);
}

.dl-flow__detail {
	grid-area: detail;
	max-width: 62ch;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-flow__detail[hidden] {
	display: none;
}

.dl-flow__branches {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem;
	list-style: none;
	background: var(--dl-mist);
	border: 1px dashed var(--dl-accent-line);
	border-radius: var(--dl-radius-md);
}

.dl-flow__branch {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.dl-flow__branch .dl-flow__icon {
	background: #fff;
}

.dl-flow__branch-body {
	display: grid;
	gap: 0.25rem;
}

.dl-flow__branch-body .dl-flow__title,
.dl-flow__branch-body .dl-flow__detail {
	grid-area: auto;
}

.dl-flow__branch .dl-flow__title {
	font-size: var(--dl-fs-lg);
}

@media (min-width: 760px) {
	.dl-flow__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		border-top: 1px solid var(--dl-line);
	}

	.dl-flow__stage {
		/* The number badge rides with the icon row and the toggle keeps a row of
		   its own at the card's foot, so the columns line up whatever the title
		   does: a two-line title grows into the flexible row between them. */
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"icon index"
			"title title"
			"detail detail"
			"toggle toggle";
		grid-template-rows: auto auto 1fr auto;
		gap: 0.85rem;
		align-content: start;
		min-height: 180px;
		padding: 1.75rem 1.5rem 1.5rem 0;
		border-top: 0;
		border-right: 1px solid var(--dl-line);
		border-bottom: 1px solid var(--dl-line);
	}

	.dl-flow__stage::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		width: 52px;
		height: 3px;
		background: var(--dl-accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 500ms ease-out;
	}

	.dl-flow__stage.is-revealed::before {
		transform: scaleX(1);
	}

	.dl-flow__index {
		position: static;
		grid-area: index;
		align-self: start;
		justify-self: end;
	}

	.dl-flow__toggle {
		grid-area: toggle;
		position: static;
		justify-self: start;
		align-self: end;
		margin: 0;
	}

	.dl-flow__detail {
		grid-area: detail;
	}
}

@media (min-width: 760px) and (max-width: 1199px) {
	.dl-flow__stage:nth-child(3n) {
		border-right: 0;
		padding-right: 0;
	}

	.dl-flow__stage:nth-last-child(-n + 3) {
		border-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.dl-flow__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.dl-flow__stage {
		min-height: 230px;
	}

	.dl-flow__stage:last-child {
		border-right: 0;
		padding-right: 0;
	}

	.dl-flow__stage:nth-last-child(-n + 6) {
		border-bottom: 0;
	}
}

/* 8. Section header ------------------------------------------------------- */
.dl-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.dl-section-head__text {
	max-width: 72ch;
}

.dl-section-head__title {
	margin-bottom: 0.5rem;
	font-size: var(--dl-fs-3xl);
}

.dl-section-head__subtitle {
	margin: 0;
	color: var(--dl-muted);
	font-size: var(--dl-fs-lg);
	font-weight: 400;
	line-height: 1.5;
}

.dl-section-head__action {
	margin: 0;
}

/* 9. Buttons & links ------------------------------------------------------ */
.dl-btn {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.35rem;
	background: var(--dl-ink);
	border: 1px solid var(--dl-ink);
	border-radius: var(--dl-radius);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--dl-transition), border-color var(--dl-transition), color var(--dl-transition), transform var(--dl-transition);
}

.dl-btn:hover {
	transform: translateY(-1px);
}

.dl-btn--primary {
	background: var(--dl-accent);
	border-color: var(--dl-accent);
	color: #fff;
}

.dl-btn--primary:hover {
	background: var(--dl-accent-strong);
	border-color: var(--dl-accent-strong);
	color: #fff;
}

.dl-btn--secondary {
	background: transparent;
	border-color: var(--dl-line-strong);
	color: var(--dl-ink);
}

.dl-btn--secondary:hover {
	background: var(--dl-ink);
	border-color: var(--dl-ink);
	color: #fff;
}

.dl-btn--ghost-light {
	background: transparent;
	border-color: var(--dl-ink-line-strong);
	color: var(--dl-invert);
}

.dl-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.dl-btn--text {
	padding: 0.85rem 0.25rem;
	background: transparent;
	border-color: transparent;
	color: var(--dl-invert);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

.dl-btn--text:hover {
	background: transparent;
	border-color: transparent;
	color: #fff;
	text-decoration-color: var(--dl-accent);
}

.dl-section .dl-btn--text,
.dl-section .dl-btn--text:hover {
	color: var(--dl-ink);
}

.dl-btn--large {
	padding: 1.05rem 1.6rem;
	font-size: 0.875rem;
}

.dl-btn--compact {
	padding: 0.7rem 1rem;
	font-size: 0.75rem;
}

.dl-link {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	color: var(--dl-accent-strong);
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.dl-link:hover {
	color: var(--dl-ink);
}

.dl-link--arrow .dl-icon {
	transition: transform var(--dl-transition);
}

.dl-link--arrow:hover .dl-icon {
	transform: translateX(4px);
}

.dl-icon--flip {
	transform: rotate(180deg);
}

/* 10. Placeholder figures ------------------------------------------------- */
.dl-ph {
	margin: 0;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	overflow: hidden;
	background: var(--dl-ink-2);
}

.dl-ph__media {
	aspect-ratio: var(--dl-ph-ratio, 16 / 9);
	overflow: hidden;
}

.dl-ph__svg {
	width: 100%;
	height: 100%;
}

.dl-ph__plate {
	fill: #172023;
	stroke: rgba(255, 255, 255, 0.07);
}

.dl-ph__art {
	fill: none;
	stroke: #4c5a61;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dl-ph__line {
	fill: none;
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1.5;
	stroke-dasharray: 6 8;
}

.dl-ph__caption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--dl-ink);
	border-top: 1px solid var(--dl-ink-line);
	color: var(--dl-invert-muted);
	font-size: var(--dl-fs-sm);
}

.dl-ph__badge {
	padding: 0.15rem 0.45rem;
	background: var(--dl-accent-soft);
	border: 1px solid var(--dl-accent-line);
	border-radius: var(--dl-radius);
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dl-ph__label {
	color: var(--dl-invert);
	font-weight: 500;
}

.dl-ph__hint,
.dl-ph__note {
	flex: 1 1 100%;
	font-size: var(--dl-fs-xs);
	line-height: 1.5;
}

.dl-ph--laboratory .dl-ph__svg,
.dl-ph--press .dl-ph__svg {
	background: #141a1d;
}

.dl-media {
	overflow: hidden;
	border-radius: var(--dl-radius-md);
	background: var(--dl-mist);
}

.dl-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dl-media--image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dl-media--hero img {
	aspect-ratio: 4 / 3;
}

/* 11. Feature band (microtunneling) -------------------------------------- */
.dl-section--feature {
	background: var(--dl-ink);
	color: var(--dl-invert);
}

/*
 * The plant-equipment band (the thickener) uses the same two-column grid on the
 * light ground, so it reads as a sibling of the press and application bands
 * rather than as a new layout. The dark microtunneling band follows it, which is
 * why it is not dark itself.
 */
.dl-section--plant {
	background: var(--dl-mist);
	color: var(--dl-text);
}

.dl-section--plant .dl-feature__media {
	/* The dark band paints this panel black and lets it stretch to the row; on the
	   light band the picture is the panel, so it centres instead. */
	align-self: center;
	background: transparent;
}

.dl-section--plant .dl-feature__title,
.dl-section--plant h2 {
	color: var(--dl-ink);
}

.dl-section--plant .dl-feature__text {
	color: var(--dl-text);
}

.dl-section--plant .dl-feature__media .dl-media {
	border: 1px solid var(--dl-line);
	background: #ffffff;
}

.dl-section--feature h2 {
	color: #fff;
}

.dl-feature {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	/*
	 * One column that is allowed to shrink. With an implicit column the track is
	 * sized `auto`, i.e. at least the largest min-content of the two items, and on a
	 * phone that came out 422 px in a 375 px viewport — which made the whole
	 * document 65 px wider than the screen, so every line in the band was cut off
	 * at the right edge (the client's "这里也不全"). `minmax(0, 1fr)` plus
	 * `min-width: 0` on the items lets them take the width they are given.
	 */
	grid-template-columns: minmax(0, 1fr);
}

.dl-feature > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.dl-feature {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
	}

	.dl-feature__media {
		order: 2;
	}
}

.dl-feature__title {
	font-size: var(--dl-fs-3xl);
}

.dl-feature__text {
	max-width: 52ch;
	color: var(--dl-invert-muted);
	font-size: var(--dl-fs-lg);
}

.dl-feature__chain {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 2.25rem 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dl-ink-line);
}

.dl-feature__stage {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding: 1rem 1rem 1rem 0;
	border-bottom: 1px solid var(--dl-ink-line);
}

.dl-feature__stage-index {
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.12em;
}

.dl-feature__stage-label {
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (min-width: 760px) {
	.dl-feature__chain {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dl-feature__stage {
		border-right: 1px solid var(--dl-ink-line);
		padding-left: 1rem;
	}

	.dl-feature__stage:nth-child(4n) {
		border-right: 0;
	}

	.dl-feature__stage:nth-last-child(-n + 3) {
		border-bottom: 0;
	}
}

/* 12. Capability --------------------------------------------------------- */
.dl-capability {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--dl-line);
	border: 1px solid var(--dl-line);
}

@media (min-width: 760px) {
	.dl-capability {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1140px) {
	.dl-capability {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.dl-capability__item {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--dl-paper);
}

.dl-capability__index {
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
}

.dl-capability__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--dl-ink);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
}

.dl-capability__title {
	margin: 0.4rem 0 0;
	font-size: var(--dl-fs-lg);
}

.dl-capability__text {
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

/* 13. Cards & data ------------------------------------------------------- */
.dl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	overflow: hidden;
	transition: border-color var(--dl-transition), transform var(--dl-transition), box-shadow var(--dl-transition);
}

.dl-card:hover {
	border-color: var(--dl-line-strong);
	transform: translateY(-3px);
	box-shadow: var(--dl-shadow-lg);
}

.dl-card__media {
	display: block;
	position: relative;
	border-bottom: 1px solid var(--dl-line);
}

.dl-card__media .dl-ph,
.dl-card__media .dl-media {
	border: 0;
	border-radius: 0;
}

.dl-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dl-card__media .dl-ph__media {
	aspect-ratio: 16 / 9;
}

.dl-card__media .dl-ph__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	padding: 0.5rem 0.65rem;
	background: linear-gradient(180deg, rgba(14, 17, 19, 0) 0%, rgba(14, 17, 19, 0.88) 100%);
	border: 0;
}

.dl-card__media .dl-ph__label,
.dl-card__media .dl-ph__hint,
.dl-card__media .dl-ph__note {
	display: none;
}

.dl-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1 1 auto;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.dl-card__meta {
	margin: 0;
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-card__title {
	margin: 0;
	font-size: var(--dl-fs-xl);
}

.dl-card__title a {
	color: inherit;
	text-decoration: none;
}

.dl-card__title a:hover {
	color: var(--dl-accent-strong);
}

.dl-card__text {
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-card__features {
	display: grid;
	gap: 0.4rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--dl-text);
	font-size: 0.9375rem;
}

.dl-card__features li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.dl-card__features .dl-icon {
	flex: 0 0 auto;
	margin-top: 0.28rem;
	color: var(--dl-accent);
}

.dl-card__action {
	margin: auto 0 0;
	padding-top: 0.75rem;
}

.dl-card--shortcut .dl-card__media .dl-ph__media {
	aspect-ratio: 16 / 7;
}

.dl-datagrid {
	display: grid;
	gap: 0.5rem 1.25rem;
	margin: 0;
}

.dl-datagrid__item {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--dl-line);
}

.dl-datagrid__key {
	margin: 0;
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dl-datagrid__value {
	margin: 0;
	color: var(--dl-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: right;
}

.dl-datagrid--card {
	margin-top: 0.25rem;
}

.dl-datagrid--hero {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--dl-ink-line);
	border-radius: var(--dl-radius-md);
}

.dl-datagrid--hero .dl-datagrid__item {
	border-bottom-color: var(--dl-ink-line);
}

.dl-datagrid--hero .dl-datagrid__value {
	color: #fff;
}

@media (min-width: 700px) {
	.dl-datagrid--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 2rem;
	}
}

.dl-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	background: var(--dl-paper);
}

.dl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.dl-table__caption {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--dl-line);
	color: var(--dl-ink);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}

.dl-table__row + .dl-table__row {
	border-top: 1px solid var(--dl-line);
}

.dl-table__key {
	width: 45%;
	padding: 0.85rem 1.25rem;
	color: var(--dl-muted);
	font-weight: 500;
	text-align: left;
	vertical-align: top;
}

.dl-table__value {
	padding: 0.85rem 1.25rem;
	color: var(--dl-ink);
	font-weight: 600;
	vertical-align: top;
}

.dl-table__note {
	display: block;
	margin-top: 0.2rem;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
	font-weight: 400;
}

@media (max-width: 640px) {
	.dl-table,
	.dl-table tbody,
	.dl-table tr,
	.dl-table th,
	.dl-table td {
		display: block;
		width: 100%;
	}

	.dl-table__key {
		padding-bottom: 0.15rem;
	}

	.dl-table__value {
		padding-top: 0;
	}
}

.dl-missing {
	padding: 0.1rem 0.35rem;
	background: transparent;
	border: 1px dashed var(--dl-line-strong);
	border-radius: var(--dl-radius);
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: 0.75rem;
	font-weight: 400;
}

.dl-empty {
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--dl-mist);
	border: 1px dashed var(--dl-line-strong);
	border-radius: var(--dl-radius-md);
}

.dl-empty__title {
	margin-bottom: 0.5rem;
	font-size: var(--dl-fs-xl);
}

.dl-empty__text {
	max-width: 70ch;
	color: var(--dl-muted);
}

.dl-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* 14. Steps, feature lists, tiles, results ------------------------------- */
.dl-section--credentials {
	padding: var(--dl-section-y) 0;
	background: var(--dl-ink);
	color: var(--dl-invert);
}

.dl-credentials {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.dl-credentials {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.dl-credentials__headline {
	color: #ffffff;
	font-size: var(--dl-fs-2xl);
}

.dl-credentials__text {
	max-width: 56ch;
	color: var(--dl-invert-muted);
}

.dl-credentials__figures {
	display: grid;
	gap: 1.5rem;
	margin: 1.75rem 0 0;
}

@media (min-width: 560px) {
	.dl-credentials__figures {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

.dl-credentials__figure {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--dl-ink-line-strong);
}

.dl-credentials__value {
	display: block;
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	overflow-wrap: anywhere;
	font-weight: 700;
	line-height: 1;
}

.dl-credentials__label {
	display: block;
	margin-top: 0.35rem;
	color: var(--dl-invert-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dl-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-chips__item a {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	min-height: 4.5rem;
	padding: 0.9rem 1rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--dl-ink-line-strong);
	color: var(--dl-invert);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.dl-chips__item a:hover {
	border-color: var(--dl-accent);
	color: #ffffff;
}

.dl-chips__mark {
	width: 0.7rem;
	height: 0.7rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--dl-accent);
}

.dl-section--specialists {
	padding: var(--dl-section-y) 0;
}

.dl-specialists {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.dl-specialists {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.dl-specialists__text {
	max-width: 54ch;
	color: var(--dl-muted);
}

.dl-specialists__media img,
.dl-specialists__media .dl-ph {
	width: 100%;
	border-radius: var(--dl-radius-md);
}

.dl-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dl-line);
}

.dl-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--dl-line);
}

.dl-steps__index {
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.dl-steps__title {
	margin: 0 0 0.35rem;
	font-size: var(--dl-fs-lg);
}

.dl-steps__text {
	max-width: 68ch;
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--dl-line);
	border: 1px solid var(--dl-line);
}

.dl-feature-list__item {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding: clamp(1.25rem, 2.4vw, 1.85rem);
	background: var(--dl-paper);
}

.dl-feature-list__icon {
	color: var(--dl-accent);
}

.dl-feature-list__title {
	margin: 0;
	font-size: var(--dl-fs-lg);
}

.dl-feature-list__text {
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-tile {
	padding: clamp(1.35rem, 2.6vw, 2rem);
	background: var(--dl-paper);
	border: 1px solid var(--dl-line);
	border-left: 3px solid var(--dl-accent);
	border-radius: var(--dl-radius-md);
}

.dl-tile__title {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.5rem;
	font-size: var(--dl-fs-lg);
}

.dl-tile__title .dl-icon {
	color: var(--dl-accent);
}

.dl-tile__text {
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.25rem, 2.6vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-results__item {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding-top: 1.25rem;
	border-top: 2px solid var(--dl-accent);
}

.dl-results__icon {
	color: var(--dl-accent);
}

.dl-results__title {
	margin: 0;
	font-size: var(--dl-fs-lg);
}

.dl-results__text {
	margin: 0;
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-chip {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.85rem;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line-strong);
	border-radius: 100px;
	color: var(--dl-text);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--dl-transition), color var(--dl-transition), background var(--dl-transition);
}

.dl-chip:hover,
.dl-chip.is-active {
	background: var(--dl-ink);
	border-color: var(--dl-ink);
	color: #fff;
}

.dl-chip--large {
	padding: 0.7rem 1.1rem;
	font-size: 0.9375rem;
}

.dl-chip__count {
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: 0.75rem;
}

.dl-chip:hover .dl-chip__count,
.dl-chip.is-active .dl-chip__count {
	color: var(--dl-invert-muted);
}

.dl-gallery {
	display: grid;
	gap: 1rem;
}

@media (min-width: 700px) {
	.dl-gallery--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dl-gallery__item {
	background: var(--dl-paper);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	overflow: hidden;
}

.dl-gallery__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dl-gallery__caption {
	padding: 0.65rem 0.85rem;
	border-top: 1px solid var(--dl-line);
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
}

.dl-before-after {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 760px) {
	.dl-before-after {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dl-before-after__item {
	position: relative;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	overflow: hidden;
}

.dl-before-after__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dl-before-after__caption {
	padding: 0.75rem 1rem;
	background: var(--dl-mist);
	border-top: 1px solid var(--dl-line);
	color: var(--dl-ink);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-documents {
	display: grid;
	gap: 0.85rem;
	margin-top: 1.25rem;
}

.dl-documents--grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.dl-download {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	color: var(--dl-text);
	text-decoration: none;
	transition: border-color var(--dl-transition), transform var(--dl-transition);
}

.dl-download:hover {
	border-color: var(--dl-accent);
	transform: translateY(-2px);
	color: var(--dl-text);
}

.dl-download__icon {
	color: var(--dl-accent);
}

.dl-download__body {
	display: grid;
	gap: 0.15rem;
	flex: 1 1 auto;
}

.dl-download__label {
	font-weight: 600;
}

.dl-download__meta {
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.08em;
}

.dl-download__action {
	color: var(--dl-muted);
}

.dl-downloads__heading {
	margin: 2.5rem 0 1rem;
	font-size: var(--dl-fs-xl);
}

/* 15. FAQ, notices, video ------------------------------------------------ */
.dl-faq {
	border-top: 1px solid var(--dl-line);
}

.dl-faq__item {
	border-bottom: 1px solid var(--dl-line);
}

.dl-faq__question {
	margin: 0;
	font-size: inherit;
}

.dl-faq__trigger {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.35rem 0;
	background: transparent;
	border: 0;
	color: var(--dl-ink);
	font-size: var(--dl-fs-lg);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.dl-faq__trigger .dl-icon {
	flex: 0 0 auto;
	color: var(--dl-accent);
	transition: transform var(--dl-transition);
}

.dl-faq__trigger[aria-expanded="true"] .dl-icon {
	transform: rotate(180deg);
}

.dl-faq__panel {
	max-width: 78ch;
	padding: 0 0 1.5rem;
	color: var(--dl-muted);
}

.dl-faq__panel[hidden] {
	display: none;
}

.dl-notice {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dl-line);
	border-left: 3px solid var(--dl-line-strong);
	border-radius: var(--dl-radius-md);
	background: var(--dl-mist);
	font-size: 0.9375rem;
}

.dl-notice .dl-icon {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

.dl-notice__text {
	margin: 0;
}

.dl-notice__list {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.dl-notice--placeholder {
	/* The demo-data note is a caption, not an alarm: one quiet line so the page
	   still reads as a finished site. */
	margin: 0;
	padding: 0.7rem 0 0.7rem 0.9rem;
	background: transparent;
	border: 0;
	border-left: 2px solid var(--dl-line-strong);
	border-radius: 0;
	color: var(--dl-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.dl-notice__tag {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.1rem 0.4rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-family: var(--dl-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
}

.dl-notice--success {
	background: #f1f8f4;
	border-color: #c8e3d5;
	border-left-color: var(--dl-success);
	color: #145236;
}

.dl-notice--error {
	background: #fdf3f2;
	border-color: #f0cfcb;
	border-left-color: var(--dl-error);
	color: #7c1c16;
}

.dl-video {
	position: relative;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	overflow: hidden;
	background: var(--dl-ink);
}

.dl-video__facade {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	background: var(--dl-ink);
	border: 0;
	cursor: pointer;
}

.dl-video__poster,
.dl-video__canvas {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	opacity: 0.82;
	transition: opacity var(--dl-transition), transform var(--dl-transition);
}

.dl-video__canvas {
	background:
		linear-gradient(120deg, rgba(210, 88, 31, 0.12), transparent 55%),
		repeating-linear-gradient(90deg, #161c1f 0 42px, #1b2327 42px 84px);
}

.dl-video__facade:hover .dl-video__poster,
.dl-video__facade:hover .dl-video__canvas {
	opacity: 1;
	transform: scale(1.01);
}

.dl-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: var(--dl-accent);
	border-radius: 100px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
}

.dl-video__facade:hover .dl-video__play {
	background: var(--dl-accent-strong);
}

.dl-video__fallback {
	display: block;
	padding: 1rem;
	color: #fff;
	text-align: center;
}

.dl-video__frame iframe,
.dl-video__frame video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.dl-video__frame {
	background: #000;
}

.dl-video-single__title {
	margin-bottom: 0.5rem;
}

.dl-video-single__tagline {
	color: var(--dl-muted);
	font-size: var(--dl-fs-lg);
}

.dl-video-single__meta {
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-video-single__player {
	margin-bottom: 1.5rem;
}

.dl-takeaways {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--dl-ink);
	color: var(--dl-invert);
	border-radius: var(--dl-radius-md);
}

.dl-takeaways__title {
	color: #fff;
	font-size: var(--dl-fs-lg);
}

.dl-takeaways__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding-left: 1.1rem;
	color: var(--dl-invert-muted);
}

/* 16. Forms -------------------------------------------------------------- */
.dl-inquiry {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.dl-inquiry {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}
}

.dl-inquiry__aside {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--dl-ink);
	color: var(--dl-invert);
	border-radius: var(--dl-radius-md);
}

@media (min-width: 1024px) {
	.dl-inquiry__aside {
		position: sticky;
		top: calc(var(--dl-header-height) + 1.5rem);
	}
}

.dl-inquiry__title {
	color: #fff;
	font-size: var(--dl-fs-2xl);
}

.dl-inquiry__text {
	color: var(--dl-invert-muted);
}

.dl-inquiry__list {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.dl-inquiry__list li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.dl-inquiry__list .dl-icon {
	flex: 0 0 auto;
	margin-top: 0.25rem;
	color: var(--dl-accent);
}

.dl-inquiry__contact {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dl-ink-line);
	font-size: 0.9375rem;
}

.dl-inquiry__contact dt {
	color: var(--dl-invert-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-inquiry__contact dd {
	margin: 0.15rem 0 0;
}

.dl-inquiry__contact a {
	color: #fff;
}

.dl-inquiry__form-wrap {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-md);
	background: var(--dl-paper);
}

.dl-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.dl-field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.dl-field--wide {
	grid-column: 1 / -1;
}

.dl-field__label {
	color: var(--dl-ink);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-field__required {
	color: var(--dl-accent);
}

.dl-field__input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line-strong);
	border-radius: var(--dl-radius);
	color: var(--dl-text);
	font-size: 1rem;
	transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
}

.dl-field__input:focus {
	border-color: var(--dl-accent);
	box-shadow: 0 0 0 3px var(--dl-accent-soft);
	outline: none;
}

.dl-field__input[aria-invalid="true"] {
	border-color: var(--dl-error);
}

select.dl-field__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--dl-muted) 50%), linear-gradient(135deg, var(--dl-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.dl-input {
	position: relative;
	display: block;
}

.dl-input--suffixed .dl-field__input {
	padding-right: 3.5rem;
}

.dl-input__suffix {
	position: absolute;
	top: 50%;
	right: 0.9rem;
	transform: translateY(-50%);
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-sm);
	pointer-events: none;
}

.dl-field__desc {
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
	line-height: 1.5;
}

.dl-file {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0.9rem;
	border: 1px dashed var(--dl-line-strong);
	border-radius: var(--dl-radius);
	background: var(--dl-mist);
}

.dl-file__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.dl-file__button {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.5rem 0.85rem;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line-strong);
	border-radius: var(--dl-radius);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dl-file__name {
	color: var(--dl-muted);
	font-size: 0.9375rem;
}

.dl-form__consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 1.25rem 0 0;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
	line-height: 1.5;
}

.dl-form__consent input {
	margin-top: 0.25rem;
}

.dl-form__honeypot {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.dl-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-top: 1.5rem;
}

.dl-form__status {
	margin: 0;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
}

.dl-form.is-submitting .dl-btn {
	opacity: 0.7;
	pointer-events: none;
}

/* 17. Footer ------------------------------------------------------------- */
.dl-footer {
	background: var(--dl-ink);
	color: var(--dl-invert-muted);
}

.dl-footer__cta {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--dl-ink-3);
	border-bottom: 1px solid var(--dl-ink-line);
}

.dl-footer__cta-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}

.dl-footer__cta-title {
	max-width: 24ch;
	margin: 0;
	color: #fff;
	font-size: var(--dl-fs-2xl);
}

.dl-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.dl-footer__main {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding: clamp(2.5rem, 5vw, 4rem) var(--dl-gutter);
}

@media (min-width: 900px) {
	.dl-footer__main {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	}
}

.dl-footer__name {
	margin: 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.dl-footer__positioning {
	margin: 0.35rem 0 1.5rem;
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-footer__contact {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.9375rem;
}

.dl-footer__contact dt {
	color: var(--dl-invert-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-footer__contact dd {
	margin: 0.15rem 0 0;
	color: var(--dl-invert);
}

.dl-footer__contact a,
.dl-footer__list a,
.dl-footer__legal a,
.dl-social--footer .dl-social__link {
	color: var(--dl-invert);
	text-decoration: none;
}

.dl-footer__contact a:hover,
.dl-footer__list a:hover,
.dl-footer__legal a:hover,
.dl-social--footer .dl-social__link:hover,
.dl-social--footer .dl-social__link:focus-visible {
	color: var(--dl-accent);
}

/* The footer's icon row is the shared `.dl-social` list; it only needs the space
   above it that the old text row had. */
.dl-social--footer {
	margin-top: 1.5rem;
}

.dl-footer__heading {
	margin: 0 0 1rem;
	color: #fff;
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dl-footer__list,
.dl-footer__legal {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.dl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-top: 1px solid var(--dl-ink-line);
	font-size: var(--dl-fs-sm);
}

.dl-footer__copy {
	margin: 0;
}

.dl-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

/* 18. Archive, breadcrumbs, pagination, sticky bar ----------------------- */
.dl-breadcrumbs__wrap {
	padding-top: 1.25rem;
}

.dl-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
}

.dl-breadcrumbs__item + .dl-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.75rem;
	color: var(--dl-line-strong);
}

.dl-breadcrumbs__link {
	color: var(--dl-muted);
	text-decoration: none;
}

.dl-breadcrumbs__link:hover {
	color: var(--dl-accent-strong);
	text-decoration: underline;
}

.dl-breadcrumbs__current {
	color: var(--dl-ink);
}

.dl-hero + .dl-breadcrumbs__wrap,
.dl-hero .dl-breadcrumbs {
	margin-bottom: 0;
}

.dl-archive-head {
	padding: clamp(2.25rem, 5vw, 4rem) 0 0;
	background: var(--dl-paper);
}

.dl-archive-head__title {
	max-width: 34ch;
	margin-top: 1rem;
	font-size: var(--dl-fs-3xl);
}

.dl-archive-head__meta {
	margin: 1rem 0 0;
	color: var(--dl-accent);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dl-archive-head__intro {
	max-width: 74ch;
	margin: 0;
	color: var(--dl-muted);
	font-size: var(--dl-fs-lg);
}

.dl-archive-head__form {
	max-width: 520px;
	margin-top: 1.75rem;
}

.dl-filters {
	margin-top: 1.75rem;
}

.dl-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-section--archive {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.dl-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.dl-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `.page-numbers` is what `paginate_links()` puts on every page link and on the
 * current-page and dots spans. It has to be the selector: a bare `span` also
 * matches the label inside a previous/next link (`<a class="next"><span>Next
 * </span>…`), which drew a second box inside the button.
 */
.dl-pagination__item a.page-numbers,
.dl-pagination__item span.page-numbers {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	color: var(--dl-text);
	font-size: 0.875rem;
	text-decoration: none;
}

/*
 * `.page-numbers.current`, not `.current`: the box rule above now ends in
 * `span.page-numbers`, which outranks a two-class selector and would paint the
 * current page white.
 */
.dl-pagination__item .page-numbers.current {
	background: var(--dl-ink);
	border-color: var(--dl-ink);
	color: #fff;
}

.dl-pagination__item a:hover {
	border-color: var(--dl-ink);
}

.dl-searchform__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--dl-muted);
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-searchform__row {
	display: flex;
	gap: 0.5rem;
}

.dl-searchform__input {
	flex: 1 1 auto;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--dl-line-strong);
	border-radius: var(--dl-radius);
	font-size: 1rem;
}

.dl-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	background: var(--dl-ink);
	border: 1px solid var(--dl-ink);
	border-radius: var(--dl-radius);
	color: #fff;
	cursor: pointer;
}

.dl-searchform__submit:hover {
	background: var(--dl-accent);
	border-color: var(--dl-accent);
}

.dl-sticky-actions {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: flex;
	gap: 0.5rem;
	padding: 0.6rem var(--dl-gutter);
	background: rgba(14, 17, 19, 0.97);
	border-top: 1px solid var(--dl-ink-line);
}

/* Every button centres its own label, however wide the button is — the label
   was hugging the left edge on the full-width secondary buttons. */
.dl-btn,
.dl-btn--secondary,
.dl-btn--outline,
.dl-btn--text,
.dl-btn--ghost-light {
	justify-content: center;
	text-align: center;
}

/*
 * A button that carries an icon as well as a label centres the *label*: with the
 * icon in the flow, centring the pair pushes the text off centre by half the
 * icon. The icon keeps its corner instead.
 */
.dl-btn:has( .dl-btn__label ) {
	position: relative;
}

.dl-btn .dl-btn__label {
	flex: 1 1 auto;
	text-align: center;
}

.dl-btn:has( .dl-btn__label ) .dl-icon {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
}

.dl-sticky-actions a {
	display: inline-flex;
	flex: 1 1 0;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 0.75rem;
	border-radius: var(--dl-radius);
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.dl-sticky-actions__primary {
	background: var(--dl-accent);
	color: #fff;
}

.dl-sticky-actions__whatsapp {
	border: 1px solid var(--dl-ink-line-strong);
	color: #fff;
}

.dl-body--has-sticky-actions .dl-footer__bottom {
	padding-bottom: 5rem;
}

@media (min-width: 1180px) {
	.dl-sticky-actions {
		display: none;
	}

	.dl-body--has-sticky-actions .dl-footer__bottom {
		padding-bottom: 1.5rem;
	}
}

/*
 * The floating WhatsApp button, bottom right, on every page.
 *
 * It is the corner's WhatsApp entry point exactly where the sticky action bar is
 * off screen: below 1180 px the bar is carrying a WhatsApp button a few pixels
 * from where this one would sit, and the mobile layer already treats a second
 * floating control in that corner as crowding (see the ask prompt). Above that
 * width the bar is gone and this is how a visitor starts a conversation from
 * anywhere on the page.
 *
 * The back-to-top control and the ask prompt are pushed up out of its way, off
 * the corner variables in section 1.
 */
.dl-whatsapp-fab {
	position: fixed;
	right: var(--dl-corner-x);
	bottom: var(--dl-corner-y);
	z-index: 105;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dl-fab-size);
	height: var(--dl-fab-size);
	/*
	 * The mark is white, and white on the bright accent is 2.4:1 — legible as a
	 * shape but under the 3:1 that a non-text control should carry, which is what
	 * the client saw as "不太清楚". The darker step of the same green is 3.4:1.
	 */
	background: var(--dl-accent-strong);
	color: #ffffff;
	border-radius: var(--dl-radius);
	box-shadow: 0 12px 26px rgba(14, 17, 19, 0.28);
	text-decoration: none;
	transition: background var(--dl-transition), box-shadow var(--dl-transition);
}

.dl-whatsapp-fab .dl-icon {
	width: 1.6rem;
	height: 1.6rem;
	/*
	 * The mark is drawn with `currentColor`, and the reference skin paints every
	 * link (`.dl-body--industrial a`, and its `:hover`) in the accent green — which
	 * put a dark-green outline on the green button and left the icon nearly
	 * illegible. A colour set *on the icon itself* beats an inherited one whatever
	 * the specificity, so the mark stays white in all three states.
	 */
	color: #ffffff;
	/* A 1.5 stroke at 24 px is thin once the button is 52 px; the mark is a shape,
	   not a hairline. */
	stroke-width: 1.8;
}

.dl-whatsapp-fab:hover,
.dl-whatsapp-fab:focus-visible {
	/* The corner's two controls swap on hover: the back-to-top box goes green and
	   the WhatsApp button goes ink. */
	background: var(--dl-ink);
	box-shadow: 0 16px 30px rgba(14, 17, 19, 0.34);
}

/*
 * On anything narrow enough for the sticky action bar, the bar owns the bottom
 * edge, so the whole corner stack starts above it: the WhatsApp button clears the
 * bar, and the back-to-top control clears the button. The bar's own height is
 * text- and safe-area-dependent, so the offset is a comfortable clearance rather
 * than a measured height, and the button's z-index keeps it on top of the bar in
 * the one case where a wrapped label makes the bar taller than that.
 */
.dl-body--has-sticky-actions {
	--dl-corner-y: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

/*
 * One stack, from the corner upwards: WhatsApp button, back-to-top, ask prompt.
 * The offsets are written out here rather than pre-computed in `:root` — a custom
 * property is substituted where it is declared, so a `--dl-fab-top` computed at
 * the root would keep the root's corner offset and ignore the one the sticky-bar
 * rule sets on the body.
 */
.dl-body--whatsapp-fab .dl-to-top {
	bottom: calc(var(--dl-corner-y) + var(--dl-fab-size) + var(--dl-fab-gap));
}

.dl-body--whatsapp-fab .dl-ask-pill {
	bottom: calc(var(--dl-corner-y) + var(--dl-fab-size) + var(--dl-fab-gap) + 3rem + var(--dl-fab-gap));
}

@media (min-width: 1180px) {
	/* The bar is off screen from here, so the corner is free. */
	.dl-body--has-sticky-actions {
		--dl-corner-y: clamp(0.9rem, 3vw, 1.6rem);
	}
}

/* 19. Prose & motion ---------------------------------------------------- */
.dl-prose {
	max-width: 74ch;
	color: var(--dl-text);
	font-size: var(--dl-fs-md);
}

.dl-prose--narrow {
	max-width: 66ch;
}

.dl-prose h2 {
	margin-top: 2rem;
	font-size: var(--dl-fs-2xl);
}

.dl-prose h3 {
	margin-top: 1.75rem;
}

.dl-prose ul,
.dl-prose ol {
	padding-left: 1.25rem;
}

.dl-prose li + li {
	margin-top: 0.4rem;
}

.dl-prose blockquote {
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--dl-accent);
	color: var(--dl-muted);
	font-size: var(--dl-fs-lg);
}

.dl-prose img {
	border-radius: var(--dl-radius-md);
}

.dl-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.dl-prose th,
.dl-prose td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--dl-line);
	text-align: left;
}

.dl-prose pre,
.dl-prose code {
	font-family: var(--dl-font-mono);
	font-size: 0.875rem;
}

.dl-prose pre {
	overflow-x: auto;
	padding: 1.25rem;
	background: var(--dl-ink);
	color: var(--dl-invert);
	border-radius: var(--dl-radius-md);
}

.dl-page .dl-prose {
	margin: 0 auto;
}

.dl-js [data-dl-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

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

.dl-admin-badge {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 100px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dl-admin-badge--warning {
	background: #fdf3e8;
	color: #8a4b12;
}

.dl-admin-badge--ok {
	background: #eef7f1;
	color: #1c5c3c;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.dl-js [data-dl-reveal],
	.dl-js [data-dl-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* 21. Hero photograph carousel --------------------------------------------- */
.dl-hero__slides {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Slides 2…n cross-fade over slide 1, which stays painted by the section
   background. Hidden even without JavaScript, so the hero can never end up
   showing two photographs at once. */
.dl-hero__slide--overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 700ms var(--dl-ease-out), visibility 700ms var(--dl-ease-out);
}

.dl-hero__slide--overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * While an overlay slide is showing, the static slide's copy steps aside: slide 1
 * carries the section's own background photograph, so its `<li>` never leaves the
 * flow and its copy would otherwise print underneath the incoming slide's copy at
 * the same coordinates (see item 80). Without JavaScript no overlay is ever
 * activated, so the hero keeps showing slide 1 as it always has.
 */
.dl-hero.is-overlay-active .dl-hero__slide:not(.dl-hero__slide--overlay) .dl-hero__inner {
	opacity: 0;
	visibility: hidden;
}

.dl-hero__slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Copy-safe framing (Customize → Homepage hero → Slide N — photograph framing).
   For a photograph whose machine runs across the middle of the frame, the image
   is anchored to its left edge and enlarged until the clear band under the copy
   is wide enough for the type — the same picture, framed so the two do not
   overlap. Below this width the frame is too narrow for framing to help, so the
   photograph keeps its centred crop and the copy stacks over it. */
@media (min-width: 1024px) {
	.dl-hero__slide--copy-safe .dl-hero__slide-img {
		transform: scale(1.28);
		transform-origin: left center;
	}
}

.dl-hero__slide--overlay .dl-hero__inner {
	width: 100%;
}

/* Controls exist only when JavaScript can drive them. */
.dl-hero__nav {
	display: none;
}

/* Controls stay out of the way: pill dots bottom left, round arrows bottom right. */
.dl-js .dl-hero__nav {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 4;
	display: block;
	pointer-events: none;
}

.dl-js .dl-hero__nav > * {
	pointer-events: auto;
}

.dl-hero__dots {
	position: absolute;
	left: var(--dl-gutter);
	bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-hero__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: width 260ms var(--dl-ease-soft), background 200ms linear;
}

.dl-hero__dot:hover,
.dl-hero__dot:focus-visible {
	background: rgba(255, 255, 255, 0.9);
}

.dl-hero__dot.is-active {
	width: 1.75rem;
	background: var(--dl-accent);
}

.dl-hero__nav-arrow {
	position: absolute;
	bottom: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #181818;
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background 200ms linear, transform 200ms var(--dl-ease-soft);
}

.dl-hero__nav-arrow:hover,
.dl-hero__nav-arrow:focus-visible {
	background: #ffffff;
	transform: translateY(-2px);
}

.dl-hero__nav-arrow[data-dl-carousel-prev] {
	right: calc(var(--dl-gutter) + 6.6rem);
}

.dl-hero__nav-arrow[data-dl-carousel-next] {
	right: calc(var(--dl-gutter) + 3.5rem);
}

/* The slide counter is not needed once the dots read as a progress bar. */
.dl-hero__counter {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dl-hero__slide--overlay {
		transition: none;
	}
}

/* ------------------------------------------------------------------ ask -- */

/*
 * The proactive contact block on the custom-route page: the visitor picks the
 * line, writes what is needed and sends it out on WhatsApp, by email or through
 * the form. `assets/js/main.js` (initAsk) keeps the message in step with those
 * links; without JavaScript they still carry a default message.
 */
.dl-ask__parts {
	margin: 0 0 1.75rem;
}

.dl-ask__parts button.dl-chip {
	font-family: inherit;
	cursor: pointer;
}

.dl-ask__fields {
	display: grid;
	gap: 1.25rem 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 1.5rem;
}

.dl-ask__fields .dl-field {
	margin: 0;
}

.dl-ask__preview {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--dl-mist);
	border-left: 3px solid var(--dl-accent);
	color: var(--dl-text);
	font-size: 0.9375rem;
	white-space: pre-line;
}

.dl-ask__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0 0 1rem;
}

.dl-ask__note {
	margin: 0;
	color: var(--dl-muted);
	font-size: var(--dl-fs-sm);
}

/*
 * The prompt that follows the visitor once the block is above the fold. Hidden
 * without JavaScript — the block itself is always on the page.
 */
.dl-ask-pill {
	position: fixed;
	right: var(--dl-gutter);
	/* Clear of the back-to-top button, which owns the corner below. */
	bottom: calc(var(--dl-gutter) + 5.75rem + env(safe-area-inset-bottom, 0px));
	z-index: 55;
	display: flex;
	align-items: stretch;
	background: var(--dl-ink);
	color: var(--dl-invert);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.dl-ask-pill[hidden] {
	display: none;
}

.dl-ask-pill__link {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.9rem 1.1rem;
	color: inherit;
	font-family: var(--dl-font-mono);
	font-size: var(--dl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.dl-ask-pill__link:hover,
.dl-ask-pill__link:focus-visible {
	background: var(--dl-accent);
	color: #fff;
}

.dl-ask-pill__close {
	display: inline-flex;
	align-items: center;
	padding: 0 0.7rem;
	background: none;
	border: 0;
	border-left: 1px solid var(--dl-ink-line);
	color: var(--dl-invert-muted);
	cursor: pointer;
}

.dl-ask-pill__close:hover,
.dl-ask-pill__close:focus-visible {
	color: #fff;
}

@media (max-width: 960px) {
	.dl-ask__fields {
		grid-template-columns: 1fr;
	}

	/*
	 * On phones the sticky action bar (WhatsApp and the form) is already on
	 * screen the whole way down, so a second floating prompt would only crowd
	 * it out.
	 */
	.dl-ask-pill {
		display: none;
	}
}

@media print {
	.dl-header,
	.dl-footer,
	.dl-sticky-actions,
	.dl-whatsapp-fab,
	.dl-inquiry__form-wrap,
	.dl-ask-pill {
		display: none;
	}

	body.dl-body {
		color: #000;
	}
}