/**
 * DELIAN — industrial reference era (default presentation).
 *
 * Visual language of the European separation-plant sector: near-white grounds,
 * light grey bands, one strong green accent, heavy condensed uppercase display
 * type, square corners, hairline rules, full-bleed photography, outlined green
 * buttons, a numbered plant diagram, a green credentials band and a black
 * footer bar.
 *
 * Applied over the existing markup, so every template, field, form and SEO
 * feature keeps working unchanged.
 *
 *  1. Tokens                7. Diagram (process flow)
 *  2. Base & typography     8. Cards, data & lists
 *  3. Buttons & labels      9. Forms
 *  4. Header & navigation  10. Credentials & chips
 *  5. Hero                 11. Footer
 *  6. Bands & sections     12. Archive, prose, motion
 */

/* 1. Tokens ---------------------------------------------------------------- */
.dl-body--industrial {
	--dl-ink: #181818;
	--dl-ink-2: #111111;
	--dl-ink-3: #1f1f1f;
	--dl-steel: #2c2c2c;
	--dl-paper: #ffffff;
	--dl-mist: #ececec;
	--dl-mist-2: #e2e2e2;
	--dl-line: #dcdcdc;
	--dl-line-strong: #b9b9b9;
	--dl-text: #1b1b1b;
	--dl-muted: #5c5c5c;
	--dl-invert: #ffffff;
	--dl-invert-muted: #d6d6d6;
	--dl-accent: #7db713;
	--dl-accent-strong: #5e9c0b;
	--dl-accent-soft: rgba(125, 183, 19, 0.12);
	--dl-accent-line: rgba(125, 183, 19, 0.5);
	--dl-ink-line: rgba(255, 255, 255, 0.22);
	--dl-ink-line-strong: rgba(255, 255, 255, 0.45);

	--dl-ind-green: #7db713;
	--dl-ind-green-dark: #5e9c0b;
	--dl-ind-ground: #fcfcfc;
	--dl-ind-band: #ececec;
	--dl-ind-rule: #dcdcdc;
	--dl-ind-black: #181818;
	--dl-accent-rgb: 125, 183, 19;
	/* Same modern sans as the base design system — the condensed face was doing the
	   heavy lifting for a look that no longer matches the reference. */
	--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-radius: 0;
	--dl-radius-md: 0;
	--dl-radius-lg: 0;
	--dl-container: 1300px;
	--dl-gutter: clamp(1.15rem, 3.4vw, 2.5rem);
	/* Section rhythm. The first cut of this era used 5.5vw up to 84 px, which the
	   client read as too much empty space between full-width bands; 3.6vw up to
	   3.5rem keeps the bands distinct without the gap dominating the page. */
	--dl-section-y: clamp(2.25rem, 3.6vw, 3.5rem);
	--dl-shadow: none;
	--dl-shadow-lg: none;
	--dl-transition: 160ms ease;
}

/*
 * The homepage is the one page that stacks eight bands, and the client read the
 * result as "有点太长" (item 75). Tightening the rhythm there alone takes roughly
 * 240 px off the scroll; section pages keep the roomier padding above, where the
 * gap between two bands is what separates them.
 */
.dl-body--industrial.dl-body--home {
	--dl-section-y: clamp(1.9rem, 2.9vw, 2.75rem);
}

/* 2. Base & typography ----------------------------------------------------- */
body.dl-body--industrial {
	background: var(--dl-ind-ground);
	color: var(--dl-text);
	font-size: 1rem;
	line-height: 1.7;
}

.dl-body--industrial h1,
.dl-body--industrial h2,
.dl-body--industrial h3,
.dl-body--industrial h4 {
	color: var(--dl-ind-black);
	font-family: var(--dl-font-sans);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dl-body--industrial h2,
.dl-body--industrial .dl-section-head__title {
	font-size: clamp(1.5rem, 2.5vw, 2.2rem);
	line-height: 1.2;
}

.dl-body--industrial h3 {
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
}

.dl-body--industrial p {
	color: #3a3a3a;
}

.dl-body--industrial .dl-section-head__subtitle,
.dl-body--industrial .dl-card__text,
.dl-body--industrial .dl-steps__text,
.dl-body--industrial .dl-capability__text,
.dl-body--industrial .dl-hero__text-body,
.dl-body--industrial .dl-archive-head__intro,
.dl-body--industrial .dl-tile__text,
.dl-body--industrial .dl-results__text {
	color: var(--dl-muted);
}

.dl-body--industrial .dl-eyebrow,
.dl-body--industrial .dl-label,
.dl-body--industrial .dl-card__meta,
.dl-body--industrial .dl-steps__index,
.dl-body--industrial .dl-capability__index,
.dl-body--industrial .dl-flow__index,
.dl-body--industrial .dl-datagrid__key,
.dl-body--industrial .dl-footer__heading,
.dl-body--industrial .dl-hero__index-key {
	color: var(--dl-muted);
	font-family: var(--dl-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dl-body--industrial a {
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial a:hover {
	color: var(--dl-ind-black);
}

.dl-body--industrial :focus-visible {
	outline: 2px solid var(--dl-ind-green);
	outline-offset: 2px;
}

/* 3. Buttons & labels ------------------------------------------------------ */
.dl-body--industrial .dl-btn {
	position: relative;
	display: inline-flex;
	gap: 0.65rem;
	align-items: center;
	padding: 0.7rem 1.15rem 0.7rem 0.75rem;
	background: transparent;
	border: 1px solid var(--dl-ind-green);
	border-radius: 0;
	color: var(--dl-ind-green-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: none;
}

.dl-body--industrial .dl-btn::before {
	content: "";
	display: inline-block;
	width: 1.55rem;
	height: 1.55rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e9c0b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
	border: 1px solid var(--dl-ind-green);
	flex: 0 0 auto;
}

.dl-body--industrial .dl-btn .dl-icon {
	display: none;
}

/*
 * The ask block's buttons each name a channel — WhatsApp, email, the form — so
 * there the mark carries meaning, and the reference treatment's ">" bracket
 * would be telling the visitor nothing they cannot read. That one row shows the
 * icon the markup already passes, leading the label where the bracket sat, and
 * its padding goes symmetrical because there is no bracket to make room for.
 * Every other button keeps the bracket.
 */
.dl-body--industrial .dl-ask__actions .dl-btn {
	padding-inline: 1.1rem;
}

.dl-body--industrial .dl-ask__actions .dl-btn::before {
	display: none;
}

.dl-body--industrial .dl-ask__actions .dl-btn .dl-icon {
	display: block;
	order: -1;
	flex: 0 0 auto;
}

.dl-body--industrial .dl-btn:hover {
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
	color: var(--dl-ind-black);
	transform: none;
}

.dl-body--industrial .dl-btn:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.6);
}

.dl-body--industrial .dl-btn--primary,
.dl-body--industrial .dl-btn--secondary,
.dl-body--industrial .dl-btn--ghost-light,
.dl-body--industrial .dl-hero .dl-btn--secondary,
.dl-body--industrial .dl-section--feature .dl-btn--secondary,
.dl-body--industrial .dl-section .dl-btn--text {
	background: transparent;
	border: 1px solid var(--dl-ind-green);
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-btn--primary:hover,
.dl-body--industrial .dl-btn--secondary:hover,
.dl-body--industrial .dl-btn--ghost-light:hover,
.dl-body--industrial .dl-hero .dl-btn--secondary:hover,
.dl-body--industrial .dl-section--feature .dl-btn--secondary:hover {
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
	color: #ffffff;
}

.dl-body--industrial .dl-btn--large {
	padding: 0.85rem 1.35rem 0.85rem 0.85rem;
	font-size: 0.8125rem;
}

.dl-body--industrial .dl-btn--text {
	border-color: transparent;
	padding-left: 0;
	text-decoration: none;
}

.dl-body--industrial .dl-btn--text::before {
	display: none;
}

.dl-body--industrial .dl-section--feature .dl-btn,
.dl-body--industrial .dl-inquiry__aside .dl-btn {
	border-color: #ffffff;
	color: #ffffff;
}

.dl-body--industrial .dl-section--feature .dl-btn::before,
.dl-body--industrial .dl-inquiry__aside .dl-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.65);
}

.dl-body--industrial .dl-section--feature .dl-btn:hover,
.dl-body--industrial .dl-inquiry__aside .dl-btn:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-section--feature .dl-btn:hover::before,
.dl-body--industrial .dl-inquiry__aside .dl-btn:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: var(--dl-ind-black);
}

.dl-body--industrial .dl-link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--dl-ind-green-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.dl-body--industrial .dl-link::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e9c0b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.75rem;
	border: 1px solid var(--dl-ind-green);
}

.dl-body--industrial .dl-link .dl-icon {
	display: none;
}

.dl-body--industrial .dl-link:hover {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-link:hover::before {
	background-color: var(--dl-ind-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.dl-body--industrial .dl-chip {
	padding: 0.5rem 0.9rem;
	background: #ffffff;
	border: 1px solid var(--dl-ind-green);
	border-radius: 0;
	color: var(--dl-ind-green-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-body--industrial .dl-chip:hover,
.dl-body--industrial .dl-chip.is-active {
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
	color: #ffffff;
}

.dl-body--industrial .dl-chip__count {
	color: inherit;
	opacity: 0.6;
}

/* 4. Header & navigation --------------------------------------------------- */
.dl-body--industrial .dl-topbar {
	background: #ffffff;
	border-bottom: 1px solid var(--dl-ind-rule);
	color: var(--dl-muted);
}

.dl-body--industrial .dl-topbar__claim {
	color: var(--dl-muted);
	font-family: var(--dl-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
}

.dl-body--industrial .dl-topbar__list a {
	color: var(--dl-ind-black);
	font-size: 0.75rem;
	font-weight: 600;
}

/*
 * The social row. Both places it appears are light in this skin — the top bar is
 * white and the footer sits on the near-white ground — so the icons are charcoal
 * on a hairline box and light up green on hover, the same treatment the chips
 * carry. Without these rules the skin's blanket `.dl-body--industrial a` would
 * paint every icon green at rest and black on hover.
 */
.dl-body--industrial .dl-social__link {
	width: 2rem;
	height: 2rem;
	color: var(--dl-ind-black);
	background: #ffffff;
	border-color: var(--dl-ind-rule);
	opacity: 1;
}

.dl-body--industrial .dl-social__link:hover,
.dl-body--industrial .dl-social__link:focus-visible {
	color: var(--dl-ind-green-dark);
	border-color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-social--topbar .dl-social__link {
	width: 1.7rem;
	height: 1.7rem;
}

.dl-body--industrial .dl-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: #ffffff;
	border-bottom: 1px solid var(--dl-ind-black);
	box-shadow: none;
}

.dl-body--industrial .dl-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 0;
	padding: 0.9rem var(--dl-gutter) 0.55rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.dl-body--industrial .dl-brand__mark {
	gap: 0.15rem;
}

.dl-body--industrial .dl-brand__name {
	color: var(--dl-ind-black);
	font-family: var(--dl-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.35rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 0.95;
	text-transform: uppercase;
}

.dl-body--industrial .dl-brand__tagline {
	color: var(--dl-muted);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
}

.dl-body--industrial .custom-logo-link img {
	max-height: 54px;
}

/* The second navigation row is a desktop treatment. Below 1180 px the navigation
   must remain the full-screen drawer defined in main.css, so all of the layout
   rules live inside this media query. */
@media (min-width: 1180px) {
	.dl-body--industrial .dl-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		justify-content: center;
		border-top: 1px solid var(--dl-ind-rule);
		background: #ffffff;
	}

	.dl-body--industrial .dl-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
		width: 100%;
		max-width: var(--dl-container);
		margin: 0 auto;
		padding: 0 var(--dl-gutter);
	}

}

.dl-body--industrial .dl-nav__list > li > a {
	padding: 0.85rem 1.15rem 0.85rem 0;
	border-radius: 0;
	color: var(--dl-ind-black);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dl-body--industrial .dl-nav__list > li > a:hover,
.dl-body--industrial .dl-nav__list > li.is-current > a {
	background: transparent;
	color: var(--dl-ind-green-dark);
}

/*
 * Menu spacing, desktop row only (item 76). The rule above is
 * `padding: 0.85rem 1.15rem 0.85rem 0` — zero on the left — so the space between
 * two words was the previous item's right padding alone: about 18 px under 12 px
 * uppercase text with 0.12em tracking, which the client read as cramped. Symmetric
 * padding doubles it to 34 px. It has to sit *after* that rule: same specificity,
 * so source order is what decides.
 */
@media (min-width: 1180px) {
	.dl-body--industrial .dl-nav__list > li > a {
		padding: 0.85rem 1.05rem;
	}
}

.dl-body--industrial .dl-nav .sub-menu {
	border-radius: 0;
	border: 1px solid var(--dl-ind-black);
	background: #ffffff;
	box-shadow: none;
}

.dl-body--industrial .dl-nav .sub-menu a {
	border-radius: 0;
	color: var(--dl-ind-black);
	font-size: 0.8125rem;
}

.dl-body--industrial .dl-nav .sub-menu a:hover {
	background: var(--dl-ind-band);
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-nav .sub-menu .menu-item:first-child a {
	color: var(--dl-ind-green-dark);
	font-weight: 700;
}

.dl-body--industrial .dl-header__actions .dl-btn--compact {
	padding: 0.6rem 1rem 0.6rem 0.6rem;
}

@media (max-width: 560px) {
	.dl-body--industrial .dl-header__actions .dl-btn--compact {
		padding: 0.55rem;
	}

	.dl-body--industrial .dl-header__actions .dl-btn--compact::before {
		width: 1.4rem;
		height: 1.4rem;
	}
}

.dl-body--industrial .dl-nav-toggle {
	border: 1px solid var(--dl-ind-black);
	border-radius: 0;
	color: var(--dl-ind-black);
}

@media (max-width: 1179px) {
	.dl-body--industrial .dl-nav {
		border-top: 0;
		padding-top: calc(var(--dl-header-height) + 6rem);
	}

	.dl-body--industrial .dl-nav__list {
		padding: 0;
	}

	.dl-body--industrial .dl-nav__list > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	/* The desktop row is black on white; inside the dark drawer the labels must
	   invert, otherwise they render black on black. */
	.dl-body--industrial .dl-nav__list > li > a {
		padding: 1.05rem 0;
		color: #ffffff;
		font-size: 0.9375rem;
	}

	.dl-body--industrial .dl-nav__list > li > a:hover,
	.dl-body--industrial .dl-nav__list > li.is-current > a {
		color: var(--dl-ind-green);
	}

	.dl-body--industrial .dl-nav .sub-menu {
		border-color: rgba(255, 255, 255, 0.2);
		background: transparent;
	}

	.dl-body--industrial .dl-nav .sub-menu a {
		color: rgba(255, 255, 255, 0.72);
	}

	.dl-body--industrial .dl-nav .sub-menu a:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #ffffff;
	}
}

/* 5. Hero ------------------------------------------------------------------ */
.dl-body--industrial .dl-hero {
	position: relative;
	min-height: clamp(26rem, 52vw, 40rem);
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: var(--dl-ind-black);
	background-image: var(--dl-hero-image, none);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	overflow: hidden;
}

.dl-body--industrial .dl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	height: auto;
	/* No darkening layer: at the client's request the hero photograph runs edge to
	   edge with nothing laid over it. Legibility is carried by the type itself —
	   the copy keeps a two-layer drop shadow (see the kicker, headline, supporting
	   line and text link below) instead of a grey panel behind it.
	   If a photograph is ever too light for white copy, the answer is a darker
	   photograph or the dark-copy variant, not a scrim. */
	background: none;
}

.dl-body--industrial .dl-hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	padding: clamp(2.5rem, 6vw, 5rem) var(--dl-gutter) clamp(2rem, 4vw, 3rem);
}

.dl-body--industrial .dl-hero__inner::before {
	display: none;
}

.dl-body--industrial .dl-hero__text {
	/* Keep the copy in its own column: the hero photograph now carries the machine,
	   so the type must not run across it. */
	max-width: 34rem;
}

.dl-body--industrial .dl-hero__kicker {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.32rem 0.7rem;
	background: var(--dl-ind-green);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-body--industrial .dl-hero__title {
	margin: 0 0 0.75rem;
	color: #ffffff;
	font-family: var(--dl-font-display);
	font-size: clamp(1.9rem, 3.5vw, 3.1rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	/* With no scrim over the photograph the type has to hold itself up: a tight
	   shadow for the glyph edges plus a wider, softer one for the halo. */
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.55),
		0 4px 22px rgba(0, 0, 0, 0.45);
}

.dl-body--industrial .dl-hero__subtitle {
	max-width: 44ch;
	margin-bottom: 0.9rem;
	color: #ffffff;
	font-size: clamp(1.05rem, 1.45vw, 1.2rem);
	font-weight: 700;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		0 3px 14px rgba(0, 0, 0, 0.5);
}

.dl-body--industrial .dl-hero__text-body {
	/* The copy column already caps the measure (`34rem` on `.dl-hero__text`), so
	   the paragraph runs to the same width as the headline above it rather than
	   wrapping inside a narrower `ch` box: slide 4 carries a full remark here,
	   and every line it saves is a line of hero band it does not need. */
	max-width: none;
	margin-bottom: 1.6rem;
	color: rgba(255, 255, 255, 0.82);
}

.dl-body--industrial .dl-hero__actions {
	gap: 0.75rem;
}

.dl-body--industrial .dl-hero__actions .dl-btn,
.dl-body--industrial .dl-hero .dl-btn--text {
	border-color: #ffffff;
	color: #ffffff;
}

.dl-body--industrial .dl-hero__actions .dl-btn::before,
.dl-body--industrial .dl-hero .dl-btn--text::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.65);
}

.dl-body--industrial .dl-hero__actions .dl-btn:hover,
.dl-body--industrial .dl-hero .dl-btn--text:hover {
	background: #ffffff;
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-hero__actions .dl-btn:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: var(--dl-ind-black);
}

.dl-body--industrial .dl-hero__text .dl-btn--text {
	border-color: transparent;
	padding-left: 0;
	/* White type straight on the photograph, same treatment as the copy. */
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		0 3px 14px rgba(0, 0, 0, 0.5);
}

.dl-body--industrial .dl-hero__text .dl-btn--text::before {
	display: none;
}

/* Copy colour per slide ----------------------------------------------------
   A hero photograph that is light exactly where the copy sits cannot carry
   white type, and the client does not want a darkening layer over the picture.
   Those slides take the ink treatment instead: the same copy block in the
   charcoal ink with a faint light halo, and the outlined button follows.
   Applied per slide through `dl-hero__slide--ink` (Customize → DELIAN website
   settings → Homepage hero → per-slide "Text colour"). */
.dl-body--industrial .dl-hero__slide--ink .dl-hero__title,
.dl-body--industrial .dl-hero__slide--ink .dl-hero__subtitle,
.dl-body--industrial .dl-hero__slide--ink .dl-hero__text-body,
.dl-body--industrial .dl-hero__slide--ink .dl-hero__text .dl-btn--text {
	color: var(--dl-ind-black);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dl-body--industrial .dl-hero__slide--ink .dl-hero__actions .dl-btn {
	border-color: var(--dl-ind-black);
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-hero__slide--ink .dl-hero__actions .dl-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(24, 24, 24, 0.6);
}

.dl-body--industrial .dl-hero__slide--ink .dl-hero__actions .dl-btn:hover {
	background: var(--dl-ind-black);
	color: #ffffff;
	text-shadow: none;
}

.dl-body--industrial .dl-hero__slide--ink .dl-hero__actions .dl-btn:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.65);
}

/* The industry mosaic ------------------------------------------------------
   The fourth slide's introduction is the photographs themselves: a row of
   portrait strips, one application per strip, each with its own label, filling
   the whole band edge to edge — the banner the client asked for. The copy block
   stands down on this slide, so nothing at all is laid over the pictures; the
   copy slots still drive the plain photograph version a site gets back when no
   strips are configured. The label is a solid chip rather than a wash over the
   picture, for the same reason the hero carries no scrim — the photograph is
   never dulled to hold a word. */
.dl-body--industrial .dl-hero__panels {
	display: flex;
	/*
	 * Flush, no gutter: the client's second note on the mosaic was "中间不要有空隙"
	 * (item 132). The 2 px seam this replaces drew a card edge between every pair of
	 * photographs; without it the six columns read as the one banner they are, and
	 * the picture edges themselves do the separating.
	 */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-body--industrial .dl-hero__panel {
	position: relative;
	overflow: hidden;
	/*
	 * The strip under the pointer grows — the behaviour of the banner the client
	 * sent with the same note (item 132), and the reason this row is a flex box at
	 * all. flex-grow animates: the five strips the pointer is not over hand over
	 * exactly the width the sixth takes, so nothing leaves the row and the border
	 * between two photographs stays a single line while it moves.
	 */
	transition: flex-grow 460ms var(--dl-ease-out, ease-out);
}

.dl-body--industrial .dl-hero__panel-link,
.dl-body--industrial .dl-hero__panel-media {
	display: block;
	position: absolute;
	inset: 0;
}

.dl-body--industrial .dl-hero__panel-media {
	overflow: hidden;
}

/* The floor under the strip's white copy: a plain darkening, no colour of its own.

   Items 121–132 tried to answer "make the filter stronger" with a tint — first the
   theme ink mixed with the accent green, then, when the client sent the reference
   banner back with "这个绿色太怪了", that banner's blue. Both were refused in turn
   ("蓝色也太怪了"), and the client named the lever themselves: 压低一些明度, 把图片做
  清晰些 — take the brightness down, leave the picture's own colour alone, and spend
   the effort on sharpness instead. So the wash is neutral now. It is also the
   strongest the copy has measured: the tinted washes added their own luminance
   *behind* the letters, while black only subtracts.

   Sharpness is answered in the files, not here: the strips are cut square at the
   frame's full height (tmp/panel-recut.py) so the column grows around the photograph
   rather than into it, they carry a tighter unsharp mask, and the 5 % push on the
   image that used to accompany the hover — a second magnification, on top of the
   blurriest part of the old stack — is gone. */
.dl-body--industrial .dl-hero__panel-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
}

.dl-body--industrial .dl-hero__panel-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--dl-ease-out, ease-out);
}

/* The label, its rule and the line under them (item 123) are one centred block:
   with the three of them anchored separately, a label that wraps to two lines
   would push the text into the rule. */
.dl-body--industrial .dl-hero__panel-copy {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: calc(100% - 1.4rem);
	text-align: center;
	transition: transform var(--dl-transition);
}

.dl-body--industrial .dl-hero__panel-label {
	display: block;
	color: #ffffff;
	/*
	 * A viewport-relative size, not a fixed one. The strip is one sixth of the
	 * viewport, so a rem-fixed caption is a different size relative to its own
	 * column on every screen — which is why the same two values read fine here and
	 * "还是小" to the client, whose window is 1920 px wide (item 129). 1.33 vw is
	 * 8 % of a strip: 19 px at 1440, 26 px at 1920, and the 1.1 rem floor keeps it
	 * at 18 px on a phone, where the card is 74 % of a 390 px screen instead of a
	 * sixth of it.
	 */
	font-size: clamp(1.1rem, 1.33vw, 2rem);
	font-weight: 700;
	/* 0.04 em rather than 0.09: the tracking was sized for a 12.5 px caption, and
	   at 19 px it cost the longest label ("Food & beverage") 13 px of its 216 px
	   copy box — enough to wrap it on a 1440 px screen. */
	letter-spacing: 0.04em;
	line-height: 1.35;
	/*
	 * The label may use the whole column, not just the copy box's inset middle: when
	 * the pointer narrows a strip to two thirds of its width (item 132) a single long
	 * word — "Pharmaceutical", "Electroplating" — must still fit on one line inside
	 * it, and the inset was what cut them in half. The sentence under it keeps the
	 * inset, so the block still reads as centred in the strip.
	 */
	margin-inline: -0.7rem;
	overflow-wrap: break-word;
	text-transform: uppercase;
	/* No plate: the label is white type on the photograph, drawn the way the
	   reference the client sent draws it, with the strip's wash behind it. It
	   keeps a light two-layer shadow of its own — a tight edge for definition
	   plus a soft halo — because the wash is deliberately shallow, and a short
	   rule sits under it. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.45);
}

/* The rule under the label: the reference's underline, in DELIAN's green. */
.dl-body--industrial .dl-hero__panel-label::after {
	content: '';
	display: block;
	/*
	 * In the same viewport-relative unit as the label above it, and longer: 2.1 rem
	 * was 34 px under a 12.5 px caption, and the client asked for it longer once the
	 * caption grew (item 130). 3.6 vw is about 21 % of a strip — 52 px at 1440,
	 * 69 px at 1920, 50 px on a phone — which is the proportion the reference banner
	 * draws its own rules at.
	 */
	width: clamp(3.1rem, 3.6vw, 5.5rem);
	height: 2px;
	margin: 0.5rem auto 0;
	background: var(--dl-ind-green);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	transition: width var(--dl-transition);
}

/* What the sector is, under the rule — one or two short lines. Empty in the
   Customizer and the strip is label-only again. */
.dl-body--industrial .dl-hero__panel-text {
	display: block;
	max-width: 17rem;
	margin: 0.55rem auto 0;
	color: #ffffff;
	/* 1.2 vw is 7.2 % of a strip — the step the label takes, a little quieter, so
	   the name still reads heavier than the sentence under it: 17 px at 1440,
	   23 px at 1920, 16 px on a phone. */
	font-size: clamp(1rem, 1.2vw, 1.8rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.5;
	overflow-wrap: break-word;
	/*
	 * This sits on the same photograph the label does, so it carries a tighter
	 * dark edge than the label's shadow: at the size it was first drawn (0.64 rem)
	 * a soft halo alone left the strokes swimming on the two pale strips (item
	 * 123), and it has been stepped up three times since — 0.72 rem (item 124),
	 * 0.88 rem (item 128) and item 129's viewport-relative size, where the client
	 * said the fixed one was *still* too small on their 1920 px window.
	 */
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.5);
}

/* No zoom on the photograph. The strip widens under the pointer (item 132) and the
   picture is cut square, so the column grows *around* the frame and shows more of it;
   the 5 % push this rule used to add magnified the picture a second time and was the
   half of "一放大太模糊了" that the file sizes could not answer. */
.dl-body--industrial .dl-hero__panel-link:hover .dl-hero__panel-copy,
.dl-body--industrial .dl-hero__panel-link:focus-visible .dl-hero__panel-copy {
	transform: translate(-50%, -50%) translateY(-2px);
}

.dl-body--industrial .dl-hero__panel-link:hover .dl-hero__panel-label::after,
.dl-body--industrial .dl-hero__panel-link:focus-visible .dl-hero__panel-label::after {
	width: clamp(4.4rem, 5.1vw, 7.8rem);
}

.dl-body--industrial .dl-hero__panel-link:focus-visible {
	outline: 2px solid var(--dl-ind-green);
	outline-offset: -4px;
}

@media (min-width: 900px) {
	.dl-body--industrial .dl-hero__slide--panels {
		display: block;
		background: var(--dl-ind-ground);
	}

	.dl-body--industrial .dl-hero__slide--panels .dl-hero__panels {
		position: absolute;
		inset: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	/* A strip narrower than this cannot hold its label, so the row scrolls
	   instead of squeezing the type — the same choice the mobile rails make. */
	.dl-body--industrial .dl-hero__slide--panels .dl-hero__panel {
		flex: 1 1 0;
		min-width: 8rem;
	}

	/*
	 * 2.4 grow factors against five of 1: the hovered strip takes about a third of
	 * the row and its neighbours about an eighth each — the proportion the reference
	 * banner draws (item 132) — while still leaving the narrow five room for their
	 * longest labels on the line. `focus-within` gives the keyboard the same
	 * feedback, and the row keeps its `overflow-x: auto`, so nothing is clipped.
	 */
	.dl-body--industrial .dl-hero__slide--panels .dl-hero__panel:hover,
	.dl-body--industrial .dl-hero__slide--panels .dl-hero__panel:focus-within {
		flex-grow: 2.4;
	}

	.dl-body--industrial .dl-hero__slide--panels .dl-hero__panels::-webkit-scrollbar {
		display: none;
	}
}

.dl-body--industrial .dl-hero__index {
	gap: 0.35rem;
	margin-top: 1.75rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.dl-body--industrial .dl-hero__index-key {
	color: rgba(255, 255, 255, 0.7);
}

.dl-body--industrial .dl-hero__index-value {
	color: #ffffff;
}

/* With a hero photograph the media panel is redundant; without one it shows the
   technical placeholder drawing instead of an empty band. */
.dl-body--industrial .dl-hero__media {
	display: none;
}

.dl-body--industrial .dl-hero:not([style*="--dl-hero-image"]) .dl-hero__media {
	display: grid;
	max-width: 34rem;
	margin-top: 2rem;
}

/*
 * Product, solution, project and technology heroes are a two-column band: the
 * copy keeps the left half and the product plate with its key figures takes the
 * right. Both halves used to stack in the left column, which left the right half
 * of a 640 px band empty.
 */
@media (min-width: 900px) {
	.dl-body--industrial .dl-hero--split:not(.dl-hero--compact) .dl-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2rem, 4vw, 4rem);
	}

	.dl-body--industrial .dl-hero--split:not(.dl-hero--compact) .dl-hero__text {
		max-width: none;
	}

	.dl-body--industrial .dl-hero--split:not(.dl-hero--compact) .dl-hero__media {
		max-width: none;
		margin-top: 0;
	}
}

.dl-body--industrial .dl-hero__scroll {
	position: absolute;
	right: var(--dl-gutter);
	bottom: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	background: rgba(255, 255, 255, 0.92);
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-hero__scroll:hover {
	background: var(--dl-ind-green);
	color: #ffffff;
}

/* 6. Bands & sections ------------------------------------------------------ */
.dl-body--industrial .dl-section {
	background: var(--dl-ind-ground);
	border: 0;
	padding: var(--dl-section-y) 0;
}

.dl-body--industrial .dl-section--mist,
.dl-body--industrial .dl-section--related {
	background: var(--dl-ind-band);
	border: 0;
}

.dl-body--industrial .dl-section--feature,
.dl-body--industrial .dl-section--dark {
	background: var(--dl-ind-black);
}

/* The plant-equipment band keeps the light ground of the reference skin. */
.dl-body--industrial .dl-section--plant {
	background: var(--dl-ind-band);
	color: var(--dl-text);
}

.dl-body--industrial .dl-section--plant .dl-feature__media {
	align-self: center;
	background: transparent;
}

.dl-body--industrial .dl-section--plant .dl-feature__media .dl-media {
	border-color: var(--dl-ind-rule);
	background: #ffffff;
}

.dl-body--industrial .dl-section--plant .dl-feature__title {
	color: var(--dl-ind-black);
}

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

.dl-body--industrial .dl-section-head {
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
	text-align: center;
}

.dl-body--industrial .dl-section-head__text {
	max-width: 62rem;
	margin: 0 auto;
}

.dl-body--industrial .dl-section-head__subtitle {
	max-width: 64ch;
	margin: 0 auto;
	font-size: 1rem;
}

.dl-body--industrial .dl-section-head__action {
	margin-top: 0.35rem;
}

.dl-body--industrial .dl-archive-head {
	background: var(--dl-ind-ground);
	border-bottom: 1px solid var(--dl-ind-rule);
	padding: clamp(1.75rem, 4vw, 3.25rem) 0;
}

.dl-body--industrial .dl-archive-head__title {
	max-width: 40ch;
	margin-top: 0.75rem;
}

/* 7. Diagram (process flow) ------------------------------------------------ */
.dl-body--industrial .dl-flow {
	margin-top: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: #ffffff;
	border: 1px solid var(--dl-ind-rule);
}

/* The dotted rail carries the progress in this era, so the gradient bar the
   base design system paints along the panel's top edge is not drawn. */
.dl-body--industrial .dl-flow__fill {
	display: none;
}

.dl-body--industrial .dl-flow__headline {
	text-align: center;
	font-size: 1.0625rem;
}

.dl-body--industrial .dl-flow__intro {
	margin: 0 auto;
	text-align: center;
	font-size: 0.9375rem;
}

.dl-body--industrial .dl-flow__list {
	position: relative;
	margin-top: 2rem;
	border-top: 0;
}

/*
 * The rail is a dotted line in this era. The base design system paints a moving
 * dash (`motion.css`), so the two things that made it read as broken segments
 * are replaced here: the pattern becomes dots, and the per-stage tick that drew
 * a bar inside every column is switched off. The dots crawl one pitch per beat,
 * so the loop is seamless rather than jumping like the 46 px dash did.
 */
@media (min-width: 760px) {
	.dl-js .dl-body--industrial .dl-flow__list {
		background-image: radial-gradient(circle, var(--dl-ind-rule) 1.5px, transparent 1.6px);
		background-size: 12px 3px;
		background-position: 0 0;
		background-repeat: repeat-x;
	}

	/* The walked part of the rail, painted green as the stages advance. */
	.dl-body--industrial .dl-flow__list::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		height: 3px;
		width: calc(var(--dl-flow-progress, 0) * 100%);
		background-image: radial-gradient(circle, var(--dl-ind-green) 1.5px, transparent 1.6px);
		background-repeat: repeat-x;
		background-size: 12px 3px;
		background-position: 0 0;
		transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
		pointer-events: none;
	}

	/* A bar inside every column is what left a gap at each column boundary. */
	.dl-body--industrial .dl-flow__stage::before {
		display: none;
	}
}

.dl-body--industrial .dl-flow__stage {
	border-color: var(--dl-ind-rule);
}

.dl-body--industrial .dl-flow__index {
	color: #ffffff;
	background: var(--dl-ind-green);
	border-radius: 50%;
	width: 1.85rem;
	height: 1.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dl-body--industrial .dl-flow__icon {
	width: 44px;
	height: 44px;
	background: var(--dl-ind-band);
	border: 0;
	border-radius: 0;
	color: var(--dl-ind-green-dark);
	box-shadow: none;
}

.dl-body--industrial .dl-flow__title {
	color: var(--dl-ind-black);
	font-size: 1rem;
	font-weight: 700;
}

.dl-body--industrial .dl-flow__toggle {
	border-radius: 0;
	border-color: var(--dl-line-strong);
	color: var(--dl-ind-black);
	background: transparent;
}

.dl-body--industrial .dl-flow__toggle[aria-expanded="true"] {
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
	color: #ffffff;
}

.dl-body--industrial .dl-flow__branches {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--dl-ind-band);
	border: 0;
	border-left: 4px solid var(--dl-ind-green);
	border-radius: 0;
}

.dl-body--industrial .dl-flow__branch .dl-flow__icon {
	background: #ffffff;
}

/* 8. Cards, data & lists --------------------------------------------------- */
.dl-body--industrial .dl-card {
	background: #ffffff;
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.dl-body--industrial .dl-card::after {
	display: none;
}

.dl-body--industrial .dl-card:hover {
	transform: none;
	border-color: var(--dl-ind-black);
	box-shadow: none;
}

.dl-body--industrial .dl-card__media {
	border-bottom: 1px solid var(--dl-ind-rule);
	background: var(--dl-ind-band);
}

.dl-body--industrial .dl-card__body {
	gap: 0.7rem;
	padding: 1.35rem 1.4rem 1.5rem;
}

.dl-body--industrial .dl-card__title {
	font-size: 1.2rem;
}

.dl-body--industrial .dl-card__title a,
.dl-body--industrial .dl-card__title {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-card__title a:hover {
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-card__meta {
	display: inline-block;
	padding: 0.22rem 0.5rem;
	background: var(--dl-ind-green);
	color: #ffffff;
	align-self: flex-start;
}

.dl-body--industrial .dl-card__features .dl-icon,
.dl-body--industrial .dl-feature-list__icon,
.dl-body--industrial .dl-results__icon {
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-datagrid__item {
	border-bottom: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-datagrid__value {
	color: var(--dl-ind-black);
	font-weight: 700;
}

/* The era repaints the whole key/value grid in ink, including the copy inside
   the hero — where the ground is the black band, not white. */
.dl-body--industrial .dl-hero .dl-datagrid__key {
	color: rgba(255, 255, 255, 0.72);
}

.dl-body--industrial .dl-hero .dl-datagrid__value {
	color: #ffffff;
}

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

.dl-body--industrial .dl-table-wrap {
	background: #ffffff;
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
}

.dl-body--industrial .dl-table__caption {
	background: var(--dl-ind-band);
	border-bottom: 1px solid var(--dl-ind-rule);
	color: var(--dl-ind-black);
	font-family: var(--dl-font-sans);
	font-weight: 700;
}

.dl-body--industrial .dl-table__key {
	color: var(--dl-muted);
	background: #fafafa;
}

.dl-body--industrial .dl-table__value {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-missing {
	background: transparent;
	border: 1px solid var(--dl-line-strong);
	color: var(--dl-muted);
	border-style: dashed;
}

.dl-body--industrial .dl-feature-list,
.dl-body--industrial .dl-capability {
	gap: 1px;
	background: var(--dl-ind-rule);
	border: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-feature-list__item,
.dl-body--industrial .dl-capability__item {
	background: #ffffff;
	border: 0;
	border-radius: 0;
	padding: 1.5rem 1.6rem;
}

.dl-body--industrial .dl-capability__icon {
	width: 46px;
	height: 46px;
	background: var(--dl-ind-green);
	border: 0;
	border-radius: 0;
	color: #ffffff;
}

.dl-body--industrial .dl-capability__title {
	font-size: 1.15rem;
}

.dl-body--industrial .dl-tile {
	border: 1px solid var(--dl-ind-rule);
	border-left: 4px solid var(--dl-ind-green);
	border-radius: 0;
	background: #ffffff;
}

.dl-body--industrial .dl-steps {
	border-top: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-steps__item {
	gap: 1.5rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-steps__index {
	color: #ffffff;
	background: var(--dl-ind-green);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
}

.dl-body--industrial .dl-results__item {
	padding-top: 1.1rem;
	border-top: 2px solid var(--dl-ind-green);
}

.dl-body--industrial .dl-gallery__item,
.dl-body--industrial .dl-before-after__item {
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
}

.dl-body--industrial .dl-gallery__caption,
.dl-body--industrial .dl-before-after__caption {
	background: #ffffff;
	border-top: 1px solid var(--dl-ind-rule);
	color: var(--dl-muted);
	font-family: var(--dl-font-sans);
	font-weight: 600;
}

.dl-body--industrial .dl-download {
	background: #ffffff;
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
}

.dl-body--industrial .dl-download:hover {
	border-color: var(--dl-ind-green);
	transform: none;
}

.dl-body--industrial .dl-download__icon,
.dl-body--industrial .dl-download__action {
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-faq {
	border-top: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-faq__item {
	border-bottom: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-faq__trigger {
	color: var(--dl-ind-black);
	font-size: 1.0625rem;
}

.dl-body--industrial .dl-faq__trigger .dl-icon {
	color: var(--dl-ind-green-dark);
}

/* Placeholder media -------------------------------------------------------- */
.dl-body--industrial .dl-ph {
	background: var(--dl-ind-band);
	border: 0;
	border-radius: 0;
}

.dl-body--industrial .dl-ph__svg {
	background: var(--dl-ind-band);
}

.dl-body--industrial .dl-ph__plate {
	fill: #e4e4e4;
	stroke: #d2d2d2;
}

.dl-body--industrial .dl-ph__art {
	stroke: #8c8c8c;
	stroke-width: 2.4;
}

.dl-body--industrial .dl-ph__line {
	stroke: rgba(24, 24, 24, 0.18);
}

.dl-body--industrial .dl-ph__caption {
	background: #ffffff;
	border-top: 1px solid var(--dl-ind-rule);
	color: var(--dl-muted);
}

.dl-body--industrial .dl-ph__badge {
	background: var(--dl-ind-green);
	border: 0;
	border-radius: 0;
	color: #ffffff;
	animation: none;
}

.dl-body--industrial .dl-ph__label {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-section--feature .dl-ph,
.dl-body--industrial .dl-section--feature .dl-ph__svg {
	background: #141414;
}

.dl-body--industrial .dl-section--feature .dl-ph__plate {
	fill: #1c1c1c;
	stroke: #2b2b2b;
}

.dl-body--industrial .dl-section--feature .dl-ph__art {
	stroke: #cfd6da;
}

.dl-body--industrial .dl-section--feature .dl-ph__line {
	stroke: rgba(255, 255, 255, 0.22);
}

.dl-body--industrial .dl-section--feature .dl-ph__caption {
	background: #101010;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.7);
}

.dl-body--industrial .dl-section--feature .dl-ph__label {
	color: #ffffff;
}

.dl-body--industrial .dl-card__media .dl-ph__caption {
	background: rgba(255, 255, 255, 0.94);
	border-top: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-card__media .dl-ph__badge {
	color: #ffffff;
}

.dl-body--industrial .dl-notice {
	background: var(--dl-ind-band);
	border: 0;
	border-left: 4px solid var(--dl-ind-green);
	border-radius: 0;
	color: var(--dl-text);
}

.dl-body--industrial .dl-notice--placeholder {
	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;
	padding: 0.7rem 0 0.7rem 0.9rem;
	margin: 0;
}

.dl-body--industrial .dl-notice--success {
	background: #eef7e6;
	border-left-color: var(--dl-ind-green);
	color: #35510a;
}

.dl-body--industrial .dl-notice--error {
	background: #fbeeee;
	border-left-color: #b3261e;
	color: #7c1c16;
}

.dl-body--industrial .dl-empty {
	background: #ffffff;
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
}

/* Feature band ------------------------------------------------------------ */
.dl-body--industrial .dl-section--feature {
	padding: 0;
}

.dl-body--industrial .dl-feature {
	gap: 0;
	align-items: stretch;
}

.dl-body--industrial .dl-feature__media {
	background: #101010;
}

.dl-body--industrial .dl-feature__media .dl-ph {
	height: 100%;
	border: 0;
}

.dl-body--industrial .dl-feature__media .dl-ph__media {
	height: auto;
}

/* The figure only fills the tall row once the feature is two columns. In the
   stacked layout an aspect-ratio box with `height: 100%` derives its width from
   the row height and pushes the figure past the viewport. */
@media (min-width: 1024px) {
	.dl-body--industrial .dl-feature__media .dl-ph__media {
		height: 100%;
	}
}

.dl-body--industrial .dl-feature__body {
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

.dl-body--industrial .dl-feature__title {
	color: #ffffff;
	font-family: var(--dl-font-display);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1;
	text-transform: uppercase;
}

.dl-body--industrial .dl-feature__text {
	color: rgba(255, 255, 255, 0.78);
}

.dl-body--industrial .dl-feature__chain {
	border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.dl-body--industrial .dl-feature__stage {
	border-color: rgba(255, 255, 255, 0.18);
}

.dl-body--industrial .dl-feature__stage-index {
	color: var(--dl-ind-green);
	font-family: var(--dl-font-sans);
	font-weight: 700;
}

.dl-body--industrial .dl-feature__stage-label {
	color: #ffffff;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Hero carousel ------------------------------------------------------------ */
/* The hero copy is stacked full width in this era, so the flow HUD would run
   through the headline and the buttons. The process section carries the same
   information in its own diagram. */
.dl-motion--subtle .dl-body--industrial .dl-hero__viz,
.dl-motion--full .dl-body--industrial .dl-hero__viz,
.dl-body--industrial .dl-hero__viz {
	display: none;
}

.dl-body--industrial .dl-hero__dots {
	left: var(--dl-gutter);
}

.dl-body--industrial .dl-hero__dot {
	/* No scrim sits under the controls any more, so the inactive dots need a
	   hairline to stay visible on a light floor. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.dl-body--industrial .dl-hero__dot.is-active {
	background: var(--dl-ind-green);
}

.dl-body--industrial .dl-hero__nav-arrow {
	background: rgba(255, 255, 255, 0.92);
	color: var(--dl-ind-black);
}

/* 9. Forms ----------------------------------------------------------------- */
.dl-body--industrial .dl-inquiry {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.dl-body--industrial .dl-inquiry__aside {
	background: var(--dl-ind-black);
	border-radius: 0;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.dl-body--industrial .dl-inquiry__title {
	color: #ffffff;
	font-family: var(--dl-font-display);
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	text-transform: uppercase;
}

.dl-body--industrial .dl-inquiry__text,
.dl-body--industrial .dl-inquiry__list {
	color: rgba(255, 255, 255, 0.78);
}

.dl-body--industrial .dl-inquiry__list .dl-icon {
	color: var(--dl-ind-green);
}

.dl-body--industrial .dl-inquiry__contact {
	border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.dl-body--industrial .dl-inquiry__contact dt {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--dl-font-sans);
}

.dl-body--industrial .dl-inquiry__contact a {
	color: #ffffff;
}

.dl-body--industrial .dl-inquiry__form-wrap {
	padding: 0;
	border: 0;
	background: transparent;
}

.dl-body--industrial .dl-field__label {
	color: var(--dl-ind-black);
	font-family: var(--dl-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
}

.dl-body--industrial .dl-field__input {
	padding: 0.8rem 0.9rem;
	background: #ffffff;
	border: 1px solid var(--dl-line-strong);
	border-radius: 0;
	color: var(--dl-text);
	box-shadow: none;
}

.dl-body--industrial .dl-field__input:focus {
	border-color: var(--dl-ind-green);
	box-shadow: 0 0 0 2px rgba(125, 183, 19, 0.25);
}

.dl-body--industrial select.dl-field__input {
	background-image: linear-gradient(45deg, transparent 50%, var(--dl-ind-green-dark) 50%), linear-gradient(135deg, var(--dl-ind-green-dark) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	background-color: #ffffff;
}

.dl-body--industrial .dl-input__suffix {
	color: var(--dl-muted);
}

.dl-body--industrial .dl-file {
	background: #ffffff;
	border: 1px dashed var(--dl-line-strong);
	border-radius: 0;
}

.dl-body--industrial .dl-file__button {
	background: var(--dl-ind-band);
	border: 1px solid var(--dl-line-strong);
	border-radius: 0;
	color: var(--dl-ind-black);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.6875rem;
}

.dl-body--industrial .dl-form__consent,
.dl-body--industrial .dl-field__desc {
	color: var(--dl-muted);
}

.dl-body--industrial .dl-form__status {
	color: var(--dl-ind-green-dark);
}

/* 10. Credentials & chips -------------------------------------------------- */
.dl-body--industrial .dl-section--credentials {
	background: var(--dl-ind-green);
	padding: clamp(2.25rem, 4.5vw, 3.75rem) 0;
}

.dl-body--industrial .dl-section--credentials .dl-credentials__headline,
.dl-body--industrial .dl-section--credentials .dl-credentials__text {
	color: #ffffff;
}

.dl-body--industrial .dl-section--credentials .dl-credentials__value,
.dl-body--industrial .dl-section--credentials .dl-credentials__label {
	color: #ffffff;
}

.dl-body--industrial .dl-section--credentials .dl-credentials__figure {
	border-top-color: rgba(255, 255, 255, 0.45);
}

/* The green rule under the headline is invisible on the green band, so it turns white here. */
.dl-body--industrial .dl-section--credentials .dl-credentials__headline::after {
	background: #ffffff;
}

.dl-body--industrial .dl-section--credentials .dl-btn {
	border-color: #ffffff;
	color: #ffffff;
}

.dl-body--industrial .dl-section--credentials .dl-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.65);
}

.dl-body--industrial .dl-section--credentials .dl-btn:hover {
	background: #ffffff;
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-section--specialists {
	background: var(--dl-ind-ground);
}

.dl-credentials__actions,
.dl-specialists__actions {
	margin: 1.5rem 0 0;
}

.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-family: var(--dl-font-display);
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	line-height: 1.02;
	text-transform: uppercase;
}

.dl-credentials__text {
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.85);
}

.dl-credentials__figures {
	display: grid;
	gap: 1.5rem;
	margin: 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 rgba(255, 255, 255, 0.4);
}

.dl-credentials__value {
	display: block;
	color: #ffffff;
	font-family: var(--dl-font-display);
	font-size: clamp(1.9rem, 3.2vw, 3.1rem);
	font-weight: 700;
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.dl-credentials__label {
	display: block;
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	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: #ffffff;
	border: 1px solid var(--dl-ind-rule);
	color: var(--dl-ind-black);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.dl-chips__item a:hover {
	border-color: var(--dl-ind-green);
	color: var(--dl-ind-green-dark);
}

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

.dl-chips__item:nth-child(3n + 2) .dl-chips__mark {
	background: var(--dl-ind-green-dark);
}

.dl-chips__item:nth-child(3n + 3) .dl-chips__mark {
	background: #b8b12a;
}

.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__title {
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

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

.dl-specialists__media {
	min-height: 18rem;
}

.dl-specialists__media img,
.dl-specialists__media .dl-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* 11. Footer --------------------------------------------------------------- */
.dl-body--industrial .dl-footer {
	background: var(--dl-ind-ground);
	color: var(--dl-text);
	border-top: 1px solid var(--dl-ind-rule);
}

.dl-body--industrial .dl-footer__cta {
	padding: 0;
	background: var(--dl-ind-black);
	border: 0;
}

.dl-body--industrial .dl-footer__cta-inner {
	padding: clamp(2rem, 4vw, 3.25rem) var(--dl-gutter);
}

.dl-body--industrial .dl-footer__cta-title {
	color: #ffffff;
	font-family: var(--dl-font-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.02;
	text-transform: uppercase;
}

.dl-body--industrial .dl-footer__cta-actions .dl-btn {
	border-color: #ffffff;
	color: #ffffff;
}

.dl-body--industrial .dl-footer__cta-actions .dl-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	border-color: rgba(255, 255, 255, 0.6);
}

.dl-body--industrial .dl-footer__cta-actions .dl-btn:hover {
	background: #ffffff;
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-footer__main {
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.dl-body--industrial .dl-footer__name {
	color: var(--dl-ind-black);
	font-family: var(--dl-font-display);
	font-size: 1.6rem;
	letter-spacing: 0.06em;
}

.dl-body--industrial .dl-footer__positioning {
	color: var(--dl-muted);
	font-family: var(--dl-font-sans);
}

.dl-body--industrial .dl-footer__contact dt {
	color: var(--dl-muted);
	font-family: var(--dl-font-sans);
}

.dl-body--industrial .dl-footer__contact dd,
.dl-body--industrial .dl-footer__contact a,
.dl-body--industrial .dl-footer__list a,
.dl-body--industrial .dl-footer__legal a {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-footer__contact a:hover,
.dl-body--industrial .dl-footer__list a:hover {
	color: var(--dl-ind-green-dark);
}

.dl-body--industrial .dl-footer__heading {
	color: var(--dl-ind-black);
	font-family: var(--dl-font-sans);
}

.dl-body--industrial .dl-footer__bottom {
	padding: 0;
	background: var(--dl-ind-black);
	border: 0;
}

.dl-body--industrial .dl-footer__bottom {
	display: flex;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: none;
	width: 100%;
	padding: 1.1rem var(--dl-gutter);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
}

.dl-body--industrial .dl-footer__copy {
	margin: 0;
	padding-left: max(0px, calc((100% - var(--dl-container)) / 2));
}

.dl-body--industrial .dl-footer__legal {
	display: flex;
	gap: 1.5rem;
	padding-right: max(0px, calc((100% - var(--dl-container)) / 2));
}

.dl-body--industrial .dl-footer__legal a {
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dl-body--industrial .dl-sticky-actions {
	background: var(--dl-ind-black);
	border-top: 0;
}

.dl-body--industrial .dl-sticky-actions a {
	border-radius: 0;
	/* The label sits in the middle of the bar, icon and all, however long it is. */
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
}

.dl-body--industrial .dl-drawer-cta a,
.dl-body--industrial .dl-inquiry__submit {
	justify-content: center;
	text-align: center;
}

/* Highest-specificity guard: in this era every button-like box centres its own
   label, whatever width it takes (full-width secondary buttons included). */
.dl-body--industrial .dl-hero__actions .dl-btn,
.dl-body--industrial .dl-hero__actions .dl-btn--text,
.dl-body--industrial .dl-hero__actions .dl-btn--secondary,
.dl-body--industrial .dl-btn,
.dl-body--industrial .dl-btn--secondary,
.dl-body--industrial .dl-btn--outline,
.dl-body--industrial .dl-btn--text,
.dl-body--industrial .dl-btn--ghost-light,
.dl-body--industrial .dl-chip--large,
.dl-body--industrial .dl-sticky-actions a,
.dl-body--industrial .dl-inquiry__submit {
	justify-content: center;
	text-align: center;
}

/*
 * The hero buttons draw their chevron as a `::before` box. In the flow it sits
 * beside the label and pushes the text off centre, so it moves into the button's
 * left padding and the label takes the middle.
 */
.dl-body--industrial .dl-hero__actions .dl-btn,
.dl-body--industrial .dl-hero__actions .dl-btn--text {
	position: relative;
	/* Symmetric room for the chevron box: equal on both sides, so the label stays
	   centred in the button while the arrow sits clear of the text in the left
	   padding. (Padding on one side only is what pushed the label off centre.) */
	padding-left: 3.1rem;
	padding-right: 3.1rem;
	justify-content: center;
	text-align: center;
}

.dl-body--industrial .dl-hero__actions .dl-btn::before,
.dl-body--industrial .dl-hero__actions .dl-btn--text::before {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

.dl-body--industrial .dl-sticky-actions__primary {
	background: var(--dl-ind-green);
	color: #ffffff;
}

.dl-body--industrial .dl-sticky-actions__whatsapp {
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #ffffff;
}

/* 12. Archive, prose, motion ----------------------------------------------- */
.dl-body--industrial .dl-breadcrumbs__list {
	color: var(--dl-muted);
	font-size: 0.75rem;
}

.dl-body--industrial .dl-breadcrumbs__current {
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-pagination__item a.page-numbers,
.dl-body--industrial .dl-pagination__item span.page-numbers {
	border: 1px solid var(--dl-line-strong);
	border-radius: 0;
	background: #ffffff;
	color: var(--dl-ind-black);
}

.dl-body--industrial .dl-pagination__item .page-numbers.current {
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
	color: #ffffff;
}

.dl-body--industrial .dl-searchform__input {
	border-radius: 0;
	border: 1px solid var(--dl-line-strong);
	background: #ffffff;
}

.dl-body--industrial .dl-searchform__submit {
	border-radius: 0;
	background: var(--dl-ind-green);
	border-color: var(--dl-ind-green);
}

.dl-body--industrial .dl-filters {
	margin-top: 1.25rem;
}

.dl-body--industrial .dl-prose {
	color: var(--dl-text);
}

.dl-body--industrial .dl-prose h2,
.dl-body--industrial .dl-prose h3 {
	margin-top: 2rem;
}

.dl-body--industrial .dl-prose blockquote {
	padding: 1.25rem 1.5rem;
	background: var(--dl-ind-band);
	border-left: 4px solid var(--dl-ind-green);
	color: var(--dl-text);
	font-size: 1.05rem;
}

.dl-body--industrial .dl-prose th,
.dl-body--industrial .dl-prose td {
	border-color: var(--dl-ind-rule);
}

.dl-body--industrial .dl-prose pre {
	background: var(--dl-ind-black);
	color: #eaeaea;
	border-radius: 0;
}

.dl-body--industrial .dl-takeaways {
	background: var(--dl-ind-black);
	border-radius: 0;
}

.dl-body--industrial .dl-takeaways__title {
	font-family: var(--dl-font-display);
	text-transform: uppercase;
}

.dl-body--industrial .dl-video {
	border: 1px solid var(--dl-ind-rule);
	border-radius: 0;
}

.dl-body--industrial .dl-video__play {
	border-radius: 0;
	background: var(--dl-ind-green);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	padding: 0.7rem 1.1rem;
}

@media (max-width: 700px) {
	.dl-body--industrial .dl-hero {
		min-height: 0;
	}

	.dl-body--industrial .dl-hero__scroll {
		display: none;
	}

	.dl-body--industrial .dl-footer__copy,
	.dl-body--industrial .dl-footer__legal {
		padding-left: 0;
		padding-right: 0;
	}

	.dl-body--industrial .dl-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}