@charset "UTF-8";
/**
 * DigitalWebStudio — core stylesheet
 *
 * Layer order is declared once here so specificity never becomes a fight:
 * anything in a later layer beats an earlier layer regardless of selector
 * weight. Components reference design tokens only — no raw colour values
 * appear below the tokens layer.
 */

@layer reset, tokens, base, layout, components, utilities;

/* Self-hosted variable font: one 27KB file covering weights 400-800, latin
   subset, no third-party connection. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrics-adjusted fallback so the webfont swap barely moves the text. */
@font-face {
	font-family: "PJS Fallback";
	src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
	ascent-override: 96%;
	descent-override: 24%;
	line-gap-override: 0%;
	size-adjust: 103%;
}

/* ========================================================================== */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		tab-size: 4;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd,
	fieldset {
		margin: 0;
	}

	ul[class],
	ol[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	fieldset {
		padding: 0;
		border: 0;
	}

	img,
	picture,
	svg,
	video,
	canvas {
		display: block;
		max-width: 100%;
	}

	img,
	video {
		height: auto;
	}

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

	button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	:target {
		scroll-margin-block-start: 6rem;
	}
}

/* ========================================================================== */
@layer tokens {
	:root {
		/* --- Palette ------------------------------------------------------- */
		--dws-navy-900: #050f26;
		--dws-navy-800: #0a1b3d;
		--dws-navy-700: #102750;
		--dws-navy-600: #17376b;

		--dws-blue-700: #0f3fbf;
		--dws-blue-600: #1550e0;
		--dws-blue-500: #1e5eff;
		--dws-blue-400: #5285ff;
		--dws-blue-200: #b9cdff;
		--dws-blue-100: #e3ecff;
		--dws-blue-50: #f2f6ff;

		--dws-gray-50: #f7f9fc;
		--dws-gray-100: #eef2f8;
		--dws-gray-200: #e0e6f0;
		--dws-gray-300: #c8d1e0;
		--dws-gray-500: #6c7893;
		--dws-gray-600: #4d5972;

		--dws-white: #ffffff;
		--dws-success: #0f7b52;
		--dws-danger: #c0264a;

		/* --- Semantic ------------------------------------------------------ */
		--dws-ink: var(--dws-navy-800);
		--dws-ink-soft: var(--dws-gray-600);
		--dws-ink-muted: var(--dws-gray-500);
		--dws-ink-invert: var(--dws-white);
		--dws-ink-invert-soft: #b6c3dd;

		--dws-surface: var(--dws-white);
		--dws-surface-alt: var(--dws-gray-50);
		--dws-surface-sunken: var(--dws-gray-100);
		--dws-surface-invert: var(--dws-navy-800);
		--dws-surface-invert-alt: var(--dws-navy-700);

		--dws-border: var(--dws-gray-200);
		--dws-border-strong: var(--dws-gray-300);
		--dws-border-invert: rgb(255 255 255 / 0.12);

		--dws-accent: var(--dws-blue-500);
		--dws-accent-hover: var(--dws-blue-600);
		--dws-accent-soft: var(--dws-blue-50);
		--dws-focus: var(--dws-blue-500);

		/* --- Typography ---------------------------------------------------- */
		--dws-font: "Plus Jakarta Sans", "PJS Fallback", system-ui, -apple-system,
			"Segoe UI", sans-serif;
		--dws-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas",
			monospace;

		--dws-text-xs: 0.75rem;
		--dws-text-sm: 0.875rem;
		--dws-text-base: 1rem;
		--dws-text-md: 1.0625rem;
		--dws-text-lg: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
		--dws-text-xl: clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);

		--dws-h1: clamp(2.375rem, 1.55rem + 3.45vw, 4.375rem);
		--dws-h2: clamp(1.875rem, 1.42rem + 1.9vw, 2.9rem);
		--dws-h3: clamp(1.375rem, 1.22rem + 0.65vw, 1.75rem);
		--dws-h4: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
		--dws-h5: 1.0625rem;

		--dws-leading-tight: 1.08;
		--dws-leading-snug: 1.25;
		--dws-leading-normal: 1.55;
		--dws-leading-relaxed: 1.7;

		--dws-tracking-tight: -0.025em;
		--dws-tracking-snug: -0.014em;
		--dws-tracking-wide: 0.08em;

		/* --- Space --------------------------------------------------------- */
		--dws-space-1: 0.25rem;
		--dws-space-2: 0.5rem;
		--dws-space-3: 0.75rem;
		--dws-space-4: 1rem;
		--dws-space-5: 1.25rem;
		--dws-space-6: 1.5rem;
		--dws-space-8: 2rem;
		--dws-space-10: 2.5rem;
		--dws-space-12: 3rem;
		--dws-space-16: 4rem;
		--dws-space-20: 5rem;
		--dws-space-24: 6rem;

		--dws-section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
		--dws-section-y-sm: clamp(3rem, 2.2rem + 3.2vw, 5rem);

		/* --- Layout -------------------------------------------------------- */
		--dws-container: 1216px;
		--dws-container-wide: 1440px;
		--dws-container-narrow: 760px;
		--dws-gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);

		--dws-radius-sm: 6px;
		--dws-radius: 10px;
		--dws-radius-lg: 14px;
		--dws-radius-xl: 20px;
		--dws-radius-pill: 999px;

		/* Shadows stay subtle: the design leans on borders and whitespace. */
		--dws-shadow-sm: 0 1px 2px rgb(10 27 61 / 0.05);
		--dws-shadow: 0 4px 16px -4px rgb(10 27 61 / 0.08);
		--dws-shadow-lg: 0 18px 48px -12px rgb(10 27 61 / 0.16);

		/* --- Motion -------------------------------------------------------- */
		--dws-ease: cubic-bezier(0.22, 1, 0.36, 1);
		--dws-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
		--dws-dur-fast: 140ms;
		--dws-dur: 240ms;
		--dws-dur-slow: 620ms;

		--dws-header-h: 76px;
		--dws-logo-h: 42px;

		accent-color: var(--dws-accent);
		color-scheme: light;
	}

	@media (min-width: 768px) {
		:root {
			--dws-logo-h: 48px;
		}
	}

	@media (min-width: 1024px) {
		:root {
			--dws-header-h: 88px;
			--dws-logo-h: 52px;
		}
	}
}

/* ========================================================================== */
@layer base {
	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: var(--dws-font);
		font-size: var(--dws-text-md);
		line-height: var(--dws-leading-normal);
		font-weight: 400;
		color: var(--dws-ink);
		background-color: var(--dws-surface);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		/* Guards against any single wide child forcing a horizontal scrollbar. */
		overflow-x: clip;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 700;
		line-height: var(--dws-leading-snug);
		letter-spacing: var(--dws-tracking-snug);
		text-wrap: balance;
	}

	h1 {
		font-size: var(--dws-h1);
		line-height: var(--dws-leading-tight);
		letter-spacing: var(--dws-tracking-tight);
	}

	h2 {
		font-size: var(--dws-h2);
		letter-spacing: var(--dws-tracking-tight);
	}

	h3 {
		font-size: var(--dws-h3);
	}

	h4 {
		font-size: var(--dws-h4);
	}

	h5 {
		font-size: var(--dws-h5);
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--dws-accent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		transition: color var(--dws-dur-fast) var(--dws-ease);
	}

	a:hover {
		color: var(--dws-accent-hover);
	}

	strong,
	b {
		font-weight: 700;
	}

	small {
		font-size: var(--dws-text-sm);
	}

	code,
	kbd,
	pre,
	samp {
		font-family: var(--dws-font-mono);
		font-size: 0.9em;
	}

	hr {
		height: 1px;
		margin: var(--dws-space-10) 0;
		border: 0;
		background-color: var(--dws-border);
	}

	/* A single, consistent focus treatment. Focus is never removed, only
	   restyled, and :focus-visible keeps it off mouse clicks. */
	:focus-visible {
		outline: 2px solid var(--dws-focus);
		outline-offset: 3px;
		border-radius: 3px;
	}

	::selection {
		background-color: var(--dws-blue-100);
		color: var(--dws-navy-800);
	}
}

/* ========================================================================== */
@layer layout {
	.dws-container {
		width: 100%;
		max-width: calc(var(--dws-container) + (var(--dws-gutter) * 2));
		margin-inline: auto;
		padding-inline: var(--dws-gutter);
	}

	.dws-container--wide {
		max-width: calc(var(--dws-container-wide) + (var(--dws-gutter) * 2));
	}

	.dws-container--narrow {
		max-width: calc(var(--dws-container-narrow) + (var(--dws-gutter) * 2));
	}

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

	.dws-section--sm {
		padding-block: var(--dws-section-y-sm);
	}

	.dws-section--alt {
		background-color: var(--dws-surface-alt);
	}

	.dws-section--invert {
		background-color: var(--dws-surface-invert);
		color: var(--dws-ink-invert);
	}

	.dws-section--invert h1,
	.dws-section--invert h2,
	.dws-section--invert h3,
	.dws-section--invert h4 {
		color: var(--dws-ink-invert);
	}

	/* Vertical rhythm without margin collapse surprises. */
	.dws-stack {
		display: flex;
		flex-direction: column;
		gap: var(--dws-stack-gap, var(--dws-space-4));
	}

	.dws-grid {
		display: grid;
		gap: var(--dws-grid-gap, var(--dws-space-6));
	}

	/* Auto-fit grids: columns collapse by available width, so no breakpoint
	   list is needed and nothing ever overflows. */
	.dws-grid--auto {
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(var(--dws-grid-min, 260px), 100%), 1fr)
		);
	}

	.dws-grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dws-grid--3,
	.dws-grid--4 {
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(var(--dws-grid-min, 250px), 100%), 1fr)
		);
	}

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

	@media (min-width: 1024px) {
		.dws-grid--3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.dws-grid--4 {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	.dws-main {
		display: block;
		min-height: 40vh;
	}
}

/* ========================================================================== */
@layer components {
	/* --- Skip link ------------------------------------------------------- */
	.dws-skip-link {
		position: absolute;
		top: var(--dws-space-3);
		left: var(--dws-space-3);
		z-index: 200;
		padding: var(--dws-space-3) var(--dws-space-5);
		background-color: var(--dws-navy-800);
		color: var(--dws-white);
		border-radius: var(--dws-radius);
		font-weight: 600;
		text-decoration: none;
		transform: translateY(calc(-100% - var(--dws-space-4)));
		transition: transform var(--dws-dur) var(--dws-ease);
	}

	.dws-skip-link:focus-visible {
		transform: translateY(0);
		color: var(--dws-white);
	}

	/* --- Buttons --------------------------------------------------------- */
	.dws-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--dws-space-2);
		padding: 0.8125rem 1.5rem;
		border: 1px solid transparent;
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-base);
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.005em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		max-width: 100%;
		cursor: pointer;
		transition: background-color var(--dws-dur-fast) var(--dws-ease),
			border-color var(--dws-dur-fast) var(--dws-ease),
			color var(--dws-dur-fast) var(--dws-ease),
			transform var(--dws-dur-fast) var(--dws-ease),
			box-shadow var(--dws-dur) var(--dws-ease);
	}

	.dws-btn .dws-icon {
		flex-shrink: 0;
		transition: transform var(--dws-dur) var(--dws-ease);
	}

	.dws-btn:hover .dws-icon--arrow {
		transform: translateX(3px);
	}

	.dws-btn:active {
		transform: translateY(1px);
	}

	.dws-btn--primary {
		background-color: var(--dws-accent);
		color: var(--dws-white);
		box-shadow: 0 1px 2px rgb(10 27 61 / 0.12);
	}

	.dws-btn--primary:hover {
		background-color: var(--dws-accent-hover);
		color: var(--dws-white);
		box-shadow: 0 6px 20px -6px rgb(30 94 255 / 0.55);
	}

	.dws-btn--secondary {
		background-color: var(--dws-surface);
		border-color: var(--dws-border-strong);
		color: var(--dws-ink);
	}

	.dws-btn--secondary:hover {
		border-color: var(--dws-navy-800);
		background-color: var(--dws-surface);
		color: var(--dws-ink);
	}

	.dws-btn--dark {
		background-color: var(--dws-navy-800);
		color: var(--dws-white);
	}

	.dws-btn--dark:hover {
		background-color: var(--dws-navy-700);
		color: var(--dws-white);
	}

	.dws-btn--ghost {
		background-color: transparent;
		color: var(--dws-ink);
		padding-inline: var(--dws-space-2);
	}

	.dws-btn--ghost:hover {
		color: var(--dws-accent);
	}

	/* On dark sections the secondary button inverts rather than being restyled
	   at every call site. */
	.dws-section--invert .dws-btn--secondary,
	.dws-on-dark .dws-btn--secondary {
		background-color: transparent;
		border-color: var(--dws-border-invert);
		color: var(--dws-white);
	}

	.dws-section--invert .dws-btn--secondary:hover,
	.dws-on-dark .dws-btn--secondary:hover {
		border-color: rgb(255 255 255 / 0.5);
		background-color: rgb(255 255 255 / 0.06);
		color: var(--dws-white);
	}

	.dws-btn--lg {
		padding: 0.9375rem 1.75rem;
		font-size: var(--dws-text-md);
	}

	.dws-btn--sm {
		padding: 0.5rem 0.9375rem;
		font-size: var(--dws-text-sm);
	}

	.dws-btn--block {
		width: 100%;
		white-space: normal;
	}

	.dws-btn[aria-disabled="true"],
	.dws-btn:disabled {
		opacity: 0.55;
		pointer-events: none;
	}

	.dws-btn-group {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dws-space-3);
	}

	/* --- Eyebrow / badge -------------------------------------------------- */
	.dws-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--dws-space-2);
		font-size: var(--dws-text-xs);
		font-weight: 700;
		letter-spacing: var(--dws-tracking-wide);
		text-transform: uppercase;
		color: var(--dws-accent);
	}

	.dws-eyebrow::before {
		content: "";
		width: 22px;
		height: 1px;
		background-color: currentColor;
		opacity: 0.55;
	}

	.dws-section--invert .dws-eyebrow {
		color: var(--dws-blue-400);
	}

	.dws-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--dws-space-2);
		padding: 0.3125rem 0.75rem;
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius-pill);
		background-color: var(--dws-surface);
		font-size: var(--dws-text-xs);
		font-weight: 600;
		color: var(--dws-ink-soft);
	}

	.dws-badge--accent {
		border-color: transparent;
		background-color: var(--dws-accent-soft);
		color: var(--dws-blue-600);
	}

	/* --- Section heading -------------------------------------------------- */
	.dws-heading {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-4);
		max-width: 64ch;
	}

	.dws-heading--center {
		align-items: center;
		text-align: center;
		margin-inline: auto;
	}

	.dws-heading__title {
		font-size: var(--dws-h2);
	}

	.dws-heading__lead {
		font-size: var(--dws-text-lg);
		line-height: var(--dws-leading-relaxed);
		color: var(--dws-ink-soft);
		max-width: 58ch;
	}

	.dws-section--invert .dws-heading__lead {
		color: var(--dws-ink-invert-soft);
	}

	/* --- Cards ------------------------------------------------------------ */
	.dws-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-4);
		padding: var(--dws-space-8);
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius-lg);
		transition: border-color var(--dws-dur) var(--dws-ease),
			box-shadow var(--dws-dur) var(--dws-ease),
			transform var(--dws-dur) var(--dws-ease);
	}

	.dws-card--link:hover {
		border-color: var(--dws-blue-200);
		box-shadow: var(--dws-shadow-lg);
		transform: translateY(-3px);
	}

	/* Whole-card click target without nesting interactive elements: the inner
	   link is stretched over the card, so the accessible name stays on a real
	   anchor and keyboard focus lands in one place. */
	.dws-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.dws-card__link {
		color: inherit;
		text-decoration: none;
	}

	.dws-card--link:focus-within {
		border-color: var(--dws-accent);
	}

	.dws-card__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: var(--dws-radius);
		background-color: var(--dws-accent-soft);
		color: var(--dws-blue-600);
		transition: background-color var(--dws-dur) var(--dws-ease),
			color var(--dws-dur) var(--dws-ease);
	}

	.dws-card--link:hover .dws-card__icon {
		background-color: var(--dws-accent);
		color: var(--dws-white);
	}

	.dws-card__title {
		font-size: var(--dws-h4);
	}

	.dws-card__text {
		color: var(--dws-ink-soft);
		font-size: var(--dws-text-base);
	}

	.dws-card__meta {
		margin-top: auto;
		padding-top: var(--dws-space-2);
		font-size: var(--dws-text-sm);
		font-weight: 600;
		color: var(--dws-accent);
		display: inline-flex;
		align-items: center;
		gap: var(--dws-space-2);
	}

	.dws-card--flat {
		border: 0;
		background-color: transparent;
		padding: 0;
	}

	.dws-card--invert {
		background-color: rgb(255 255 255 / 0.04);
		border-color: var(--dws-border-invert);
		color: var(--dws-ink-invert);
	}

	.dws-card--invert .dws-card__text {
		color: var(--dws-ink-invert-soft);
	}

	.dws-card--invert .dws-card__icon {
		background-color: rgb(255 255 255 / 0.08);
		color: var(--dws-blue-400);
	}

	/* --- Industry card ------------------------------------------------------ */
	/* Shared by the homepage section, the industries archive and the Industries
	   page template. It lives in main.css rather than home.css because that is
	   the only stylesheet all three of those views load. */
	.dws-industries__grid {
		display: grid;
		gap: var(--dws-space-5);
		/* Mobile first: one column, cards stay full width and spacious. */
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 640px) {
		.dws-industries__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		.dws-industries__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--dws-space-6);
		}
	}

	.dws-industry {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dws-space-4);
		/* Generous, slightly asymmetric padding: more below than above, which
		   stops the description crowding the card edge. */
		padding: var(--dws-space-8) var(--dws-space-6) var(--dws-space-8);
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius-lg);
		box-shadow: var(--dws-shadow-sm);
		/* Equal height across the row regardless of description length. */
		height: 100%;
		transition: border-color var(--dws-dur) var(--dws-ease),
			box-shadow var(--dws-dur) var(--dws-ease),
			transform var(--dws-dur) var(--dws-ease);
	}

	.dws-industry:hover {
		border-color: var(--dws-blue-200);
		box-shadow: var(--dws-shadow-lg);
		transform: translateY(-4px);
	}

	/* Keyboard users get the same affordance as the mouse hover state, so the
	   card never depends on hover alone to signal that it is interactive. */
	.dws-industry:focus-within {
		border-color: var(--dws-accent);
		box-shadow: var(--dws-shadow-lg);
	}

	.dws-industry__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: var(--dws-radius);
		background-color: var(--dws-accent-soft);
		color: var(--dws-blue-600);
		transition: background-color var(--dws-dur) var(--dws-ease),
			color var(--dws-dur) var(--dws-ease),
			transform var(--dws-dur) var(--dws-ease);
	}

	.dws-industry:hover .dws-industry__icon,
	.dws-industry:focus-within .dws-industry__icon {
		background-color: var(--dws-accent);
		color: var(--dws-white);
		transform: translateY(-2px);
	}

	/* A card heading, not a link. The anchor inside is stripped of link styling
	   and stretched over the card, so the whole card is the target while the
	   accessible name stays on a real anchor. */
	.dws-industry__title {
		font-size: var(--dws-h4);
		font-weight: 700;
		line-height: var(--dws-leading-snug);
		letter-spacing: var(--dws-tracking-snug);
		color: var(--dws-ink);
	}

	.dws-industry__link {
		color: inherit;
		text-decoration: none;
		transition: color var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-industry__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.dws-industry:hover .dws-industry__link {
		color: var(--dws-accent);
	}

	/* The stretched pseudo-element makes the anchor's own focus ring unusable,
	   so focus is expressed on the card via :focus-within above. */
	.dws-industry__link:focus-visible {
		outline: none;
	}

	.dws-industry__link:focus-visible::after {
		outline: 2px solid var(--dws-focus);
		outline-offset: 3px;
	}

	.dws-industry__text {
		font-size: var(--dws-text-base);
		line-height: var(--dws-leading-normal);
		color: var(--dws-ink-soft);
	}

	/* --- Feature list ----------------------------------------------------- */
	.dws-list {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-3);
	}

	.dws-list__item {
		display: flex;
		align-items: flex-start;
		gap: var(--dws-space-3);
		color: var(--dws-ink-soft);
	}

	.dws-list__item .dws-icon {
		flex-shrink: 0;
		margin-top: 0.2em;
		color: var(--dws-accent);
	}

	.dws-section--invert .dws-list__item {
		color: var(--dws-ink-invert-soft);
	}

	/* --- Header ----------------------------------------------------------- */
	.dws-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: rgb(255 255 255 / 0.88);
		backdrop-filter: saturate(1.6) blur(14px);
		border-bottom: 1px solid transparent;
		transition: border-color var(--dws-dur) var(--dws-ease),
			background-color var(--dws-dur) var(--dws-ease);
	}

	.dws-header.is-scrolled {
		border-bottom-color: var(--dws-border);
		background-color: rgb(255 255 255 / 0.95);
	}

	.dws-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dws-space-3);
		min-height: var(--dws-header-h);
	}

	@media (min-width: 1024px) {
		.dws-header__inner {
			gap: var(--dws-space-6);
		}
	}

	.dws-logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 1;
		min-width: 0;
		text-decoration: none;
		color: var(--dws-ink);
	}

	.dws-logo__img {
		width: auto;
		height: auto;
		max-height: var(--dws-logo-h);
		max-width: min(240px, 52vw);
		object-fit: contain;
		object-position: left center;
	}

	.dws-logo__mark {
		font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.75rem);
		font-weight: 800;
		letter-spacing: -0.032em;
		line-height: 1.1;
		white-space: nowrap;
	}

	.dws-logo__mark-a {
		color: var(--dws-navy-800);
	}

	.dws-logo__mark-b {
		color: var(--dws-accent);
	}

	.dws-header__actions {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: var(--dws-space-3);
	}

	@media (max-width: 599px) {
		/* The same CTA lives in the mobile menu; hiding it here keeps the
		   enlarged wordmark from colliding with the burger on small phones. */
		.dws-header__cta {
			display: none;
		}
	}

	/* --- Primary nav ------------------------------------------------------ */
	.dws-nav__list {
		display: flex;
		align-items: center;
		gap: var(--dws-space-1);
	}

	.dws-nav__item {
		position: relative;
	}

	.dws-nav__link {
		display: inline-block;
		padding: var(--dws-space-2) var(--dws-space-3);
		border-radius: var(--dws-radius-sm);
		font-size: var(--dws-text-base);
		font-weight: 500;
		color: var(--dws-ink);
		text-decoration: none;
		transition: color var(--dws-dur-fast) var(--dws-ease);
	}

	@media (min-width: 1024px) and (max-width: 1279px) {
		.dws-nav__link {
			padding-inline: var(--dws-space-2);
		}
	}

	.dws-nav__link:hover,
	.dws-nav__item.is-current > .dws-nav__link {
		color: var(--dws-accent);
	}

	.dws-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--dws-space-2);
		color: var(--dws-ink-muted);
		border-radius: var(--dws-radius-sm);
	}

	.dws-nav__chevron {
		transition: transform var(--dws-dur) var(--dws-ease);
	}

	.dws-nav__toggle[aria-expanded="true"] .dws-nav__chevron {
		transform: rotate(180deg);
	}

	.dws-nav__submenu {
		display: none;
	}

	@media (min-width: 1024px) {
		.dws-nav__item--parent {
			display: flex;
			align-items: center;
		}

		.dws-nav__item--parent > .dws-nav__link {
			padding-right: var(--dws-space-1);
		}

		.dws-nav__submenu {
			display: block;
			position: absolute;
			top: calc(100% + var(--dws-space-3));
			left: 50%;
			min-width: 250px;
			padding: var(--dws-space-2);
			background-color: var(--dws-surface);
			border: 1px solid var(--dws-border);
			border-radius: var(--dws-radius-lg);
			box-shadow: var(--dws-shadow-lg);
			opacity: 0;
			visibility: hidden;
			transform: translate(-50%, -6px);
			transition: opacity var(--dws-dur) var(--dws-ease),
				transform var(--dws-dur) var(--dws-ease),
				visibility var(--dws-dur) var(--dws-ease);
		}

		/* An invisible bridge so the pointer can cross the gap to the submenu. */
		.dws-nav__item--parent::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: var(--dws-space-4);
		}

		.dws-nav__item--parent:hover > .dws-nav__submenu,
		.dws-nav__item--parent:focus-within > .dws-nav__submenu,
		.dws-nav__toggle[aria-expanded="true"] + .dws-nav__submenu {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, 0);
		}

		.dws-nav__link--child {
			display: block;
			padding: 0.625rem var(--dws-space-3);
			border-radius: var(--dws-radius-sm);
			font-weight: 500;
			color: var(--dws-ink-soft);
		}

		.dws-nav__link--child:hover {
			background-color: var(--dws-surface-alt);
			color: var(--dws-accent);
		}
	}

	/* --- Mobile nav ------------------------------------------------------- */
	.dws-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius);
		color: var(--dws-ink);
	}

	.dws-mobile-nav {
		/* Header backdrop-filter is a containing block for position:fixed, so
		   inset against the header box collapsed this panel to 0 height. */
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: calc(100vh - var(--dws-header-h));
		height: calc(100dvh - var(--dws-header-h));
		display: flex;
		flex-direction: column;
		padding: var(--dws-space-6) var(--dws-gutter) var(--dws-space-10);
		background-color: var(--dws-surface);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--dws-dur) var(--dws-ease),
			transform var(--dws-dur) var(--dws-ease),
			visibility var(--dws-dur) var(--dws-ease);
	}

	.dws-mobile-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.dws-mobile-nav .dws-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.dws-mobile-nav .dws-nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--dws-border);
	}

	.dws-mobile-nav .dws-nav__link {
		flex: 1;
		padding: var(--dws-space-4) 0;
		font-size: var(--dws-text-lg);
		font-weight: 600;
	}

	.dws-mobile-nav .dws-nav__toggle {
		width: 44px;
		height: 44px;
	}

	.dws-mobile-nav .dws-nav__submenu {
		display: flex;
		flex-direction: column;
		flex: 1 1 100%;
		width: 100%;
		min-height: 0;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height var(--dws-dur) var(--dws-ease),
			visibility var(--dws-dur) var(--dws-ease);
	}

	.dws-mobile-nav .dws-nav__toggle[aria-expanded="true"] + .dws-nav__submenu,
	.dws-mobile-nav .dws-nav__item--parent.is-open > .dws-nav__submenu,
	.dws-mobile-nav .dws-nav__submenu.is-open {
		max-height: 24rem;
		visibility: visible;
	}

	.dws-mobile-nav .dws-nav__item--child {
		border-bottom: 0;
	}

	.dws-mobile-nav .dws-nav__link--child {
		padding: var(--dws-space-2) 0 var(--dws-space-2) var(--dws-space-4);
		font-size: var(--dws-text-base);
		font-weight: 500;
		color: var(--dws-ink-soft);
	}

	.dws-mobile-nav__footer {
		margin-top: var(--dws-space-8);
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-4);
	}

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

	@media (min-width: 1024px) {
		.dws-burger,
		.dws-mobile-nav {
			display: none;
		}
	}

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

	.dws-contact-link {
		display: inline-flex;
		align-items: center;
		gap: var(--dws-space-3);
		min-width: 0;
		color: var(--dws-ink);
		font-weight: 500;
		text-decoration: none;
	}

	.dws-contact-link span {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.dws-contact-link .dws-icon {
		flex-shrink: 0;
		color: var(--dws-accent);
	}

	.dws-contact-link:hover {
		color: var(--dws-accent);
	}

	/* --- Breadcrumbs ------------------------------------------------------ */
	.dws-breadcrumbs {
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
	}

	.dws-breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dws-space-2);
	}

	.dws-breadcrumbs__sep {
		color: var(--dws-border-strong);
	}

	.dws-breadcrumbs a {
		color: var(--dws-ink-muted);
		text-decoration: none;
	}

	.dws-breadcrumbs a:hover {
		color: var(--dws-accent);
	}

	.dws-breadcrumbs [aria-current="page"] {
		color: var(--dws-ink);
		font-weight: 500;
	}

	/* --- Page hero (inner pages) ------------------------------------------ */
	.dws-page-hero {
		position: relative;
		padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--dws-section-y-sm);
		background-color: var(--dws-surface-alt);
		border-bottom: 1px solid var(--dws-border);
	}

	.dws-page-hero__inner {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-5);
		max-width: 60ch;
	}

	.dws-page-hero__lead {
		font-size: var(--dws-text-lg);
		line-height: var(--dws-leading-relaxed);
		color: var(--dws-ink-soft);
	}

	/* --- Accordion (native disclosure) ------------------------------------ */
	.dws-accordion {
		border-top: 1px solid var(--dws-border);
	}

	.dws-accordion__item {
		border-bottom: 1px solid var(--dws-border);
	}

	.dws-accordion__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dws-space-4);
		padding: var(--dws-space-5) 0;
		font-size: var(--dws-h4);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
		transition: color var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-accordion__summary::-webkit-details-marker {
		display: none;
	}

	.dws-accordion__summary:hover {
		color: var(--dws-accent);
	}

	.dws-accordion__icon {
		flex-shrink: 0;
		color: var(--dws-accent);
		transition: transform var(--dws-dur) var(--dws-ease);
	}

	.dws-accordion__item[open] .dws-accordion__icon {
		transform: rotate(45deg);
	}

	.dws-accordion__body {
		padding-bottom: var(--dws-space-6);
		max-width: 68ch;
		color: var(--dws-ink-soft);
	}

	.dws-accordion__body > * + * {
		margin-top: var(--dws-space-4);
	}

	/* --- Closing CTA band -------------------------------------------------- */
	.dws-cta-band {
		padding-block: var(--dws-section-y-sm);
		background-color: var(--dws-surface-alt);
		border-top: 1px solid var(--dws-border);
	}

	.dws-cta-band__inner {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-8);
		padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
		background: linear-gradient(135deg, var(--dws-navy-800), var(--dws-navy-600));
		border-radius: var(--dws-radius-xl);
		color: var(--dws-ink-invert);
	}

	@media (min-width: 900px) {
		.dws-cta-band__inner {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: var(--dws-space-12);
		}
	}

	.dws-cta-band__content {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-3);
		min-width: 0;
		max-width: 52ch;
	}

	.dws-cta-band__title {
		font-size: var(--dws-h3);
		color: var(--dws-ink-invert);
	}

	.dws-cta-band__text {
		color: var(--dws-ink-invert-soft);
	}

	.dws-cta-band .dws-btn--secondary {
		background-color: transparent;
		border-color: var(--dws-border-invert);
		color: var(--dws-white);
	}

	.dws-cta-band .dws-btn--secondary:hover {
		border-color: rgb(255 255 255 / 0.5);
		background-color: rgb(255 255 255 / 0.08);
	}

	.dws-cta-band .dws-btn-group {
		flex-shrink: 0;
		max-width: 100%;
	}

	/* --- Empty state -------------------------------------------------------- */
	.dws-empty {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dws-space-4);
		max-width: 52ch;
		padding-block: var(--dws-space-8);
	}

	.dws-empty__title {
		font-size: var(--dws-h3);
	}

	.dws-empty__text {
		color: var(--dws-ink-soft);
	}

	/* --- Long-form content -------------------------------------------------- */
	.dws-prose {
		font-size: var(--dws-text-lg);
		line-height: var(--dws-leading-relaxed);
		color: var(--dws-ink-soft);
	}

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

	.dws-prose h2 {
		margin-top: var(--dws-space-12);
		font-size: var(--dws-h3);
		color: var(--dws-ink);
	}

	.dws-prose h3 {
		margin-top: var(--dws-space-10);
		font-size: var(--dws-h4);
		color: var(--dws-ink);
	}

	.dws-prose h2 + *,
	.dws-prose h3 + * {
		margin-top: var(--dws-space-4);
	}

	.dws-prose ul,
	.dws-prose ol {
		padding-left: 1.35em;
	}

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

	.dws-prose a {
		font-weight: 500;
		text-decoration: underline;
	}

	.dws-prose img,
	.dws-prose figure {
		border-radius: var(--dws-radius-lg);
	}

	.dws-prose figcaption {
		margin-top: var(--dws-space-3);
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
		text-align: center;
	}

	.dws-prose blockquote {
		margin: var(--dws-space-8) 0;
		padding-left: var(--dws-space-6);
		border-left: 3px solid var(--dws-accent);
		font-size: var(--dws-text-xl);
		color: var(--dws-ink);
	}

	.dws-prose pre {
		padding: var(--dws-space-5);
		border-radius: var(--dws-radius);
		background-color: var(--dws-navy-900);
		color: #d7e2f5;
		overflow-x: auto;
	}

	.dws-prose :not(pre) > code {
		padding: 0.15em 0.4em;
		border-radius: var(--dws-radius-sm);
		background-color: var(--dws-surface-sunken);
		color: var(--dws-ink);
	}

	.dws-prose table {
		display: block;
		overflow-x: auto;
		font-size: var(--dws-text-base);
	}

	.dws-prose th,
	.dws-prose td {
		padding: var(--dws-space-3);
		border-bottom: 1px solid var(--dws-border);
		text-align: left;
	}

	.dws-prose th {
		color: var(--dws-ink);
		font-weight: 700;
	}

	/* --- Footer ----------------------------------------------------------- */
	.dws-footer {
		background-color: var(--dws-navy-900);
		color: var(--dws-ink-invert-soft);
		padding-block: var(--dws-section-y-sm) var(--dws-space-8);
		font-size: var(--dws-text-base);
	}

	.dws-footer a {
		color: var(--dws-ink-invert-soft);
		text-decoration: none;
	}

	.dws-footer a:hover {
		color: var(--dws-white);
	}

	.dws-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dws-space-10);
		width: 100%;
		min-width: 0;
		padding-bottom: var(--dws-space-12);
	}

	@media (min-width: 768px) {
		.dws-footer__top {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--dws-space-8);
		}
	}

	@media (min-width: 1024px) {
		.dws-footer__top {
			grid-template-columns:
				minmax(0, 1.5fr)
				repeat(2, minmax(0, 1fr))
				minmax(16rem, 1.2fr);
			gap: var(--dws-space-8);
		}
	}

	.dws-footer__brand,
	.dws-footer__col {
		min-width: 0;
	}

	.dws-footer__brand {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-4);
		max-width: 38ch;
	}

	.dws-footer .dws-logo {
		color: var(--dws-white);
	}

	.dws-footer .dws-logo__mark-a {
		color: var(--dws-white);
	}

	.dws-footer .dws-logo__mark-b {
		color: var(--dws-blue-400);
	}

	.dws-footer__col-title {
		margin-bottom: var(--dws-space-4);
		font-size: var(--dws-text-sm);
		font-weight: 700;
		letter-spacing: var(--dws-tracking-wide);
		text-transform: uppercase;
		color: var(--dws-white);
	}

	.dws-footer__list {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-3);
	}

	.dws-footer__contact {
		display: flex;
		align-items: flex-start;
		gap: var(--dws-space-3);
		min-width: 0;
	}

	.dws-footer__contact span {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.dws-footer__contact .dws-icon {
		flex-shrink: 0;
		color: var(--dws-blue-400);
	}

	.dws-footer__bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--dws-space-4);
		padding-top: var(--dws-space-6);
		border-top: 1px solid var(--dws-border-invert);
		font-size: var(--dws-text-sm);
	}

	.dws-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dws-space-5);
	}

	.dws-social {
		display: flex;
		gap: var(--dws-space-2);
	}

	.dws-social__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid var(--dws-border-invert);
		border-radius: var(--dws-radius);
		transition: background-color var(--dws-dur-fast) var(--dws-ease),
			border-color var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-social__link:hover {
		background-color: var(--dws-accent);
		border-color: var(--dws-accent);
		color: var(--dws-white);
	}

	/* --- Pagination -------------------------------------------------------- */
	.dws-pagination {
		display: flex;
		justify-content: center;
		margin-top: var(--dws-space-12);
	}

	.dws-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dws-space-2);
	}

	.dws-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 42px;
		height: 42px;
		padding-inline: var(--dws-space-3);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius);
		color: var(--dws-ink-soft);
		font-weight: 600;
		font-size: var(--dws-text-sm);
		text-decoration: none;
		transition: border-color var(--dws-dur-fast) var(--dws-ease),
			color var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-pagination .page-numbers:hover {
		border-color: var(--dws-accent);
		color: var(--dws-accent);
	}

	.dws-pagination .page-numbers.current {
		background-color: var(--dws-navy-800);
		border-color: var(--dws-navy-800);
		color: var(--dws-white);
	}

	.dws-pagination .dots {
		border-color: transparent;
	}
}

/* ========================================================================== */
@layer utilities {
	.dws-visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.dws-text-center {
		text-align: center;
	}

	.dws-text-muted {
		color: var(--dws-ink-soft);
	}

	.dws-lead {
		font-size: var(--dws-text-lg);
		line-height: var(--dws-leading-relaxed);
		color: var(--dws-ink-soft);
	}

	.dws-mt-auto {
		margin-top: auto;
	}

	.dws-no-wrap {
		white-space: nowrap;
	}

	.dws-flow > * + * {
		margin-top: var(--dws-flow, var(--dws-space-4));
	}

	/* --- Scroll reveal ---------------------------------------------------- */
	/* Only transform and opacity animate, so reveals never trigger layout and
	   never contribute to CLS. The initial hidden state is applied by JS
	   (html.dws-js) so content stays visible if scripts fail to load. */
	.dws-js [data-dws-reveal] {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity var(--dws-dur-slow) var(--dws-ease),
			transform var(--dws-dur-slow) var(--dws-ease);
		transition-delay: calc(var(--dws-reveal-order, 0) * 70ms);
		will-change: opacity, transform;
	}

	.dws-js [data-dws-reveal].is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* ========================================================================== */
/* Reduced motion: movement is removed outright rather than shortened, and
   revealed content is forced to its final state so nothing stays hidden.
   Placed outside the layer stack so it wins unconditionally. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.dws-js [data-dws-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Movement is removed outright rather than made instant. Without this the
	   global transition-duration override would still apply the hover lift, it
	   would just snap into place — which is more jarring than no motion at all.
	   Colour and shadow feedback is kept, since that is not motion. */
	.dws-industry:hover,
	.dws-industry:focus-within,
	.dws-industry:hover .dws-industry__icon,
	.dws-industry:focus-within .dws-industry__icon {
		transform: none !important;
	}
}

@media print {
	.dws-header,
	.dws-footer,
	.dws-mobile-nav,
	.dws-skip-link {
		display: none !important;
	}
}