/**
 * DEC Marine widget styles.
 *
 * Colour and type reference Elementor Global Style custom properties, so
 * the kit (post 6) stays the single source of truth. Literal fallbacks
 * are the kit's real values read from the database — not guesses.
 *
 * Body copy is Manrope. A "Funnel Sans" variable exists in the Figma
 * file but is applied on no page checked (About, Land-Based, landing),
 * so it was treated as a leftover and dropped. See docs/DECISIONS.md.
 */

/*
 * Geist Mono — bundled VARIABLE face (weights 100–900), OFL, from the
 * open-source Geist family. The site's Elementor custom font (post 32)
 * only ships a single face whose woff2 is SemiBold, so every Geist-Mono
 * weight rendered SemiBold and there was no Light. This variable face
 * makes real weights work — the eyebrow (600) and the stat figures
 * (Light 300, per Figma) render at their intended weight. The widgets
 * request only 300 and 600, so this doesn't collide with Elementor's
 * stray weight-400 face for those values.
 */
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url( "../fonts/GeistMono-Variable.woff2" ) format( "woff2" );
}

/* ── Shared ─────────────────────────────────────────────────── */

/*
 * Green monospace eyebrow — the kit's "Sub Heading Text" style,
 * Geist Mono 600 16/38 in Regulatory Green #00B388.
 */
.dec-eyebrow {
	font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 38px;
	color: #00b388;
	margin: 0 0 0.25rem;
}

/*
 * Shared body copy — the kit's "Body Text" (Manrope 16, weight 400).
 *
 * line-height is set to `normal` rather than inherited. The kit stores
 * Body Text as 16px/16px (ratio 1.0), but Figma's own generated code
 * for these paragraphs emits `leading-[normal]`, and the design
 * screenshots clearly show leaded body copy. 1.0 would be unreadable
 * for anything multi-line. Drop this override if the kit value is ever
 * corrected. See docs/SITE-AUDIT.md.
 */
.dec-section-intro__body,
.dec-text-image__body {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

/* ── Section Intro ──────────────────────────────────────────── */

.dec-section-intro__heading {
	color: var( --e-global-color-accent, #041e42 ); /* Navy Blue */
	margin: 0 auto 1.25rem; /* auto sides so a constrained heading centres */
	text-wrap: balance;
}

.dec-section-intro__body {
	margin: 0 auto;
}

.dec-section-intro__body > p {
	margin: 0 0 1rem;
}

.dec-section-intro__body > p:last-child {
	margin-bottom: 0;
}

/*
 * Constrained heading/body blocks centre by default (margin-inline:auto).
 * When the intro is LEFT-aligned they must sit flush-left instead — set
 * the inline-start margin to 0 so the max-width block hugs the left edge
 * rather than floating to the middle/right. Driven by the render-time
 * `--align-left` modifier (see section-intro.php).
 */
.dec-section-intro__heading,
.dec-section-intro__body {
	margin-inline: auto;
}

.dec-section-intro--align-left .dec-section-intro__heading,
.dec-section-intro--align-left .dec-section-intro__body {
	margin-inline: 0 auto;
}

/*
 * Dark scheme — white text for the navy world-map band. Text only; the
 * band background is the container's, per DECISIONS. The green eyebrow
 * reads on both, so it is left unchanged.
 */
.dec-section-intro--dark .dec-section-intro__heading,
.dec-section-intro--dark .dec-section-intro__body {
	color: #ffffff;
}

/* ── Text + Image ───────────────────────────────────────────── */

/*
 * Measurements read from Figma node 307:769 (About_us, "Our Expertise"):
 * image 568×550 radius 10, text column 450, column gap 138, and a 36px
 * stack gap between eyebrow / heading / body.
 */
.dec-text-image {
	display: grid;
	grid-template-columns: 568fr 450fr;
	gap: 138px;
	align-items: center;
}

.dec-text-image--image-left {
	grid-template-columns: 568fr 450fr;
}

.dec-text-image--image-right {
	grid-template-columns: 450fr 568fr;
}

/*
 * No image selected. The widget emits `--no-image` INSTEAD of a positional
 * modifier, so there is no image track to reserve and no gutter to leave —
 * the text simply fills the row. Its own measure still applies: the Text
 * max-width control writes `max-width` on `.dec-text-image__text`, so a row
 * on the DPF contract stays at its 450px measure rather than running the
 * full container width.
 */
.dec-text-image--no-image {
	grid-template-columns: 1fr;
	gap: 0;
}

/*
 * ...and the text fills it. The measure exists to keep a line readable
 * BESIDE an image; with no image it left the text at 450px against 750px of
 * dead space, which was the visible half of the bug.
 *
 * `!important` is load-bearing here, not laziness. `dec_content_max_width`
 * is a per-instance control, and Elementor emits it as
 *
 *     .elementor-133 .elementor-element.elementor-element-XXX .dec-text-image__text
 *
 * which is (0,3,0) AND enqueued after widgets.css — no selector this
 * stylesheet can write will outrank it. (Same mechanism as the checklist
 * marker in 1.19.1; there the fix was to move a control DEFAULT into CSS,
 * but this is an author-set value, so there is nothing to move.)
 *
 * The deliberate consequence: **Content max width is inert on a row with no
 * image.** Heading max width is untouched and still applies.
 */
.dec-text-image--no-image .dec-text-image__text {
	max-width: none !important;
}

/*
 * The stack gap is exposed as a custom property so the per-item spacing
 * controls can be ABSOLUTE rather than additive. A flex `gap` applies
 * uniformly and can't be varied per item, so a control that only set
 * margin-top would mean "36px plus whatever you type" — surprising. The
 * per-item controls instead emit `calc(<value> - var(--dec-ti-gap))`, so
 * the gap collapses to exactly the number in the field. Negative margins
 * are fine here and are how a value below the stack gap is expressed.
 */
.dec-text-image__text {
	display: flex;
	flex-direction: column;
	gap: var( --dec-ti-gap, 36px );
}

/*
 * The 36px stack gap does the spacing; kill the inherited margins.
 *
 * ⚠️ This rule DOES NOT fully achieve that, and hasn't since it was
 * written. `.dec-text-image__text > *` is (0,1,0) — the universal selector
 * contributes nothing — so it merely TIES with `.dec-text-image__body`
 * below, which is declared later and therefore wins. Every body paragraph
 * except the last consequently carries an extra 1rem under the stack gap.
 *
 * Left as-is deliberately: correcting it shifts paragraph spacing by 16px
 * on every composed page, which is a visual change to ~17 pages and needs
 * to be someone's decision, not a side effect. The rich-body container
 * below opts out explicitly instead. See DECISIONS 2026-08-20.
 */
.dec-text-image__text > * {
	margin: 0;
}

.dec-text-image__heading {
	font-size: 36px;
	line-height: 40px;
	color: var( --e-global-color-accent, #041e42 ); /* Navy Blue */
	text-wrap: balance;
}

.dec-text-image__body {
	margin: 0 0 1rem;
}

.dec-text-image__body:last-child {
	margin-bottom: 0;
}

/*
 * Body on light rows is Carbon Black #121212, not the navy used for
 * headings — read from Figma 348:855 rather than assumed.
 */
.dec-text-image--light .dec-text-image__body {
	color: #121212;
}

/* Manrope SemiBold for the emphasised closing line (Figma 348:855). */
.dec-text-image__body--emphasis {
	font-weight: 600;
}

/*
 * WYSIWYG body (2026-08-20). The container carries .dec-text-image__body so
 * it inherits the same type and colour rules as the legacy <p> version, and
 * the children inherit from it — so the two body modes look identical.
 *
 * `.dec-text-image__text > * { margin: 0 }` zeroes the wrapper's own margin,
 * which is right, but the paragraphs INSIDE it are children of the wrapper
 * and keep whatever the theme/kit gives them. These rules restate the 1rem
 * paragraph rhythm the repeater version had, and collapse the first/last
 * margins so the column's 36px flex gap stays the only outer spacing.
 */
/*
 * Opt out of the stray 1rem `.dec-text-image__body` bottom margin (see the
 * specificity note above). This container is a wrapper, not a paragraph,
 * and the stray margin would otherwise be silently added to whatever the
 * "Space above button" control asks for — making an absolute control lie
 * by 16px.
 */
.dec-text-image__body--rich {
	margin-bottom: 0;
}

.dec-text-image__body--rich > :first-child {
	margin-top: 0;
}

.dec-text-image__body--rich > :last-child {
	margin-bottom: 0;
}

.dec-text-image__body--rich p {
	margin: 0 0 1rem;
	font: inherit;
	color: inherit;
}

.dec-text-image__body--rich a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Emphasis parity with the legacy repeater. A paragraph flagged
 * `emphasis` renders through .dec-text-image__body--emphasis at Manrope
 * SemiBold 600 (Figma 348:855). In the WYSIWYG the same intent is typed as
 * <strong>, which the UA renders at 700 — so pin it to 600 and the two
 * paths look identical. Without this, converting a legacy row to rich text
 * silently makes its closing line heavier.
 */
.dec-text-image__body--rich strong,
.dec-text-image__body--rich b {
	font-weight: 600;
}

.dec-text-image__body--rich ul,
.dec-text-image__body--rich ol {
	margin: 0 0 1rem;
	padding-left: 1.25em;
}

.dec-text-image__body--rich li {
	margin-bottom: 0.35em;
}

/*
 * Dark panels invert heading and body to white; the green eyebrow is
 * unchanged — it reads on both. Figma 307:769 is the reference.
 */
.dec-text-image--dark .dec-text-image__heading,
.dec-text-image--dark .dec-text-image__body {
	color: #ffffff;
}

/*
 * Optional "Key Benefits" block — divider + label + dot-bullet list in
 * the text column. Figma 474:2845/2862/2903 (Emission Control): a
 * hairline, a "designed to support:" label, then dot-bullet items.
 * The block is one flex child; the 36px column gap spaces it, internal
 * margins handle the divider/label/list rhythm.
 */
/*
 * ⚠️ Two-class, and it has to be. Elementor's frontend.min.css ships
 * `.elementor hr { background: transparent }` at (0,1,1), which outranked
 * the single-class rule this used to be — so the default hairline has been
 * INVISIBLE on every light row since the widget was written (the --dark
 * variant below was already two-class, so dark rows were fine). Surfaced
 * 2026-08-20 while adding the Divider-colour control, whose generated
 * selector is (0,4,0) and was working while the default underneath it was
 * not. See DECISIONS.
 */
.dec-text-image .dec-text-image__divider {
	height: 1px;
	border: 0;
	margin: 0 0 24px;
	background: #d5dde1; /* light steel hairline */
}

.dec-text-image__benefits-label {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
	color: #041e42;
}

.dec-text-image__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dec-text-image__benefits li {
	position: relative;
	padding-left: 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.375;
	color: #121212; /* Carbon Black — body copy on light */
}

.dec-text-image__benefits li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

/*
 * WYSIWYG benefits (2026-08-20). The container keeps
 * `.dec-text-image__benefits` so its `li` rules — including the brand dot
 * bullet — still reach a list typed in the editor. What it must NOT keep is
 * the grid layout, which would treat every paragraph and heading as a grid
 * row with an 8px gap and flatten the typographic rhythm.
 *
 * The inner <ul>/<ol> then need the reset the container used to provide
 * (no markers, no indent), since the brand bullet is drawn by ::before.
 */
.dec-text-image__benefits--rich {
	display: block;
}

.dec-text-image__benefits--rich > :first-child {
	margin-top: 0;
}

.dec-text-image__benefits--rich > :last-child {
	margin-bottom: 0;
}

.dec-text-image__benefits--rich ul,
.dec-text-image__benefits--rich ol {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dec-text-image__benefits--rich p {
	margin: 0 0 1rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.375;
	color: #121212;
}

.dec-text-image__benefits--rich h2,
.dec-text-image__benefits--rich h3,
.dec-text-image__benefits--rich h4 {
	margin: 0 0 8px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
	color: #041e42;
}

.dec-text-image--dark .dec-text-image__benefits--rich p {
	color: #ffffff;
}

.dec-text-image--dark .dec-text-image__benefits--rich h2,
.dec-text-image--dark .dec-text-image__benefits--rich h3,
.dec-text-image--dark .dec-text-image__benefits--rich h4 {
	color: #ffffff;
}

.dec-text-image--dark .dec-text-image__divider {
	background: rgba( 255, 255, 255, 0.25 );
}

.dec-text-image--dark .dec-text-image__benefits-label,
.dec-text-image--dark .dec-text-image__benefits li {
	color: #ffffff;
}

/* ── Full-width variant ─────────────────────────────────────────
 *
 * The image column runs to the VIEWPORT edge on its side; the text stays in
 * the content column. Reference: the CMC layout Arqam shared, which does it
 * by zeroing the wrapper's padding on one side (`.padding-global.flex-special
 * { padding-right: 0 }`). We can't reach the Elementor container's padding
 * from inside a widget, so the image takes a negative margin instead.
 *
 * THE BLEED MATHS. For a row of width R with column gap g, each column is
 * (R - g) / 2. The distance from the row's edge to the viewport edge is
 * 50vw - R/2. As a margin on the image, whose own 100% IS the column width:
 *
 *     100% + g/2 - 50vw  =  (R - g)/2 + g/2 - 50vw  =  R/2 - 50vw
 *
 * which is exactly the negative of the distance needed. Gap-aware, so it
 * stays correct if the Column-gap control is touched (that control publishes
 * --dec-ti-colgap for this reason).
 *
 * ⚠️ `50vw` counts the scrollbar, so on a platform with classic scrollbars
 * the bleed overshoots by half a scrollbar and would create a horizontal
 * scrollbar. The :has() rule below clips it at the container, which is
 * full-width even when the container is "boxed" (boxed puts the max-width on
 * .e-con-inner, not .e-con). `clip` rather than `hidden` — it doesn't create
 * a scroll container.
 */
.dec-text-image--full {
	grid-template-columns: 1fr 1fr;
	gap: 0;
	--dec-ti-colgap: 0px;
	align-items: stretch;
}

.dec-text-image--full.dec-text-image--image-right {
	grid-template-columns: 1fr 1fr;
}

.dec-text-image--full.dec-text-image--image-left {
	grid-template-columns: 1fr 1fr;
}

/*
 * (0,2,0), so it beats `.dec-text-image--full` above regardless of order.
 * A full-bleed row with no image is still one column — the half-width
 * image track would otherwise reappear here only for `--full` rows.
 */
.dec-text-image--full.dec-text-image--no-image {
	grid-template-columns: 1fr;
}

.dec-text-image--full.dec-text-image--image-right .dec-text-image__image {
	margin-right: calc( 100% + var( --dec-ti-colgap, 0px ) / 2 - 50vw );
}

.dec-text-image--full.dec-text-image--image-left .dec-text-image__image {
	margin-left: calc( 100% + var( --dec-ti-colgap, 0px ) / 2 - 50vw );
}

.e-con:has( .dec-text-image--full ) {
	overflow-x: clip;
}

/* The text needs its own breathing room now the gap is 0. */
.dec-text-image--full .dec-text-image__text {
	justify-content: center;
	padding-block: 48px;
}

.dec-text-image--full.dec-text-image--image-right .dec-text-image__text {
	padding-right: 64px;
}

.dec-text-image--full.dec-text-image--image-left .dec-text-image__text {
	padding-left: 64px;
}

/*
 * Full-bleed image fills its column and squares off.
 *
 * HEIGHT. A full-bleed image is very wide, so left to its aspect ratio it
 * drives the row to an enormous height (a 744x655 photo at 960px wide wants
 * ~845px). --dec-ti-imgh gives the column a definite height so it stops
 * scaling with width — as a MIN-height, deliberately: the grid row is still
 * max(text, this), so a text column taller than the image still wins and the
 * image grows to meet it rather than leaving a gap. Never taller than it
 * needs to be, never shorter than the copy beside it.
 *
 * The <img> is absolutely positioned rather than height:100% — a percentage
 * height against a stretched grid item is exactly the sort of thing that
 * resolves to auto and lets the intrinsic ratio back in. inset:0 cannot.
 */
.dec-text-image--full .dec-text-image__image {
	position: relative;
	align-self: stretch;
	min-height: var( --dec-ti-imgh, 750px );
}

.dec-text-image--full .dec-text-image__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/*
 * Vertical notch, cut into the image with a MASK.
 *
 * It used to be a painted SVG overlay, which meant it had to be filled with
 * a colour — so it covered whatever background the section actually had
 * (set a green section, the notch stayed white). Masking removes pixels
 * instead, so the notch is genuinely transparent and the section shows
 * through whatever colour it is.
 *
 * The mask is only applied when the widget renders --dec-ti-mask, so a
 * notch-less full-width row is untouched.
 *
 * Four layers — see notch_mask_style() in text-image.php. Layers 3 and 4
 * collapse to zero height at the default 100% notch height and only do work
 * when the notch is shortened.
 *
 * `--dec-ti-notch-y` is the notch strip's distance from the top, set in px by
 * the scroll handler in hero-curve.js when the row opts into travel. The two
 * filler layers are derived from the SAME value — above is the offset itself,
 * below is whatever is left — so they cannot drift out of step with it.
 *
 * Unset, every use falls back to today's geometry exactly: the strip is
 * `center` and the fillers are equal halves. That is why the offset is a
 * LENGTH and never a percentage — a percentage in mask-position means
 * "align x% of the layer with x% of the box", not "x from the top", so a
 * percentage here would place the notch somewhere subtly wrong.
 */
.dec-text-image--full .dec-text-image__image {
	-webkit-mask-image: var( --dec-ti-mask ), linear-gradient( #fff, #fff ), linear-gradient( #fff, #fff ), linear-gradient( #fff, #fff );
	mask-image: var( --dec-ti-mask ), linear-gradient( #fff, #fff ), linear-gradient( #fff, #fff ), linear-gradient( #fff, #fff );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size:
		var( --dec-ti-notchw, 25px ) var( --dec-ti-notchh, 100% ),
		calc( 100% - var( --dec-ti-notchw, 25px ) ) 100%,
		var( --dec-ti-notchw, 25px ) var( --dec-ti-notch-y, calc( ( 100% - var( --dec-ti-notchh, 100% ) ) / 2 ) ),
		var( --dec-ti-notchw, 25px ) calc( 100% - var( --dec-ti-notch-y, calc( ( 100% - var( --dec-ti-notchh, 100% ) ) / 2 ) ) - var( --dec-ti-notchh, 100% ) );
	mask-size:
		var( --dec-ti-notchw, 25px ) var( --dec-ti-notchh, 100% ),
		calc( 100% - var( --dec-ti-notchw, 25px ) ) 100%,
		var( --dec-ti-notchw, 25px ) var( --dec-ti-notch-y, calc( ( 100% - var( --dec-ti-notchh, 100% ) ) / 2 ) ),
		var( --dec-ti-notchw, 25px ) calc( 100% - var( --dec-ti-notch-y, calc( ( 100% - var( --dec-ti-notchh, 100% ) ) / 2 ) ) - var( --dec-ti-notchh, 100% ) );
	-webkit-mask-position:
		var( --dec-ti-notch-side, left ) var( --dec-ti-notch-y, center ),
		var( --dec-ti-rest-side, right ) top,
		var( --dec-ti-notch-side, left ) top,
		var( --dec-ti-notch-side, left ) bottom;
	mask-position:
		var( --dec-ti-notch-side, left ) var( --dec-ti-notch-y, center ),
		var( --dec-ti-rest-side, right ) top,
		var( --dec-ti-notch-side, left ) top,
		var( --dec-ti-notch-side, left ) bottom;
}

@media ( max-width: 1024px ) {
	/*
	 * Stacked at tablet + mobile: one column, no bleed, no notch — all only
	 * make sense side by side. (Image-first ordering and the 40px stack gap
	 * come from the shared ≤1024 rule below.)
	 * CRUCIAL: every --full row is also --image-left/right, and those
	 * variant rules set the two-column grid (0,2,0), the half-viewport bleed
	 * margin (0,3,0) and the text side-padding (0,3,0) — all higher than a bare
	 * `.dec-text-image--full`. So each stack override has to carry the same
	 * variant classes, or it loses the cascade and the row never collapses on a
	 * phone (which is exactly what was happening).
	 */
	.dec-text-image--full,
	.dec-text-image--full.dec-text-image--image-right,
	.dec-text-image--full.dec-text-image--image-left {
		grid-template-columns: 1fr;
	}

	.dec-text-image--full .dec-text-image__text,
	.dec-text-image--full.dec-text-image--image-right .dec-text-image__text,
	.dec-text-image--full.dec-text-image--image-left .dec-text-image__text {
		padding: 0;
	}

	/*
	 * Image: kill the bleed, drop the mask, and let it flow to its own aspect
	 * ratio — the desktop `min-height:750px` + absolutely-positioned <img>
	 * otherwise pin the photo ~750px tall on any width.
	 */
	.dec-text-image--full .dec-text-image__image,
	.dec-text-image--full.dec-text-image--image-right .dec-text-image__image,
	.dec-text-image--full.dec-text-image--image-left .dec-text-image__image {
		margin-left: 0;
		margin-right: 0;
		min-height: 0;
		align-self: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dec-text-image--full .dec-text-image__image img {
		position: static;
		height: auto; /* width:100% + the inherited aspect-ratio size it */
	}
}

.dec-text-image__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
	aspect-ratio: 568 / 550;
}

/*
 * The swap. Source order stays text-then-image so reading order and
 * screen-reader order are identical in both variants — only the visual
 * column order changes.
 */
.dec-text-image--image-left .dec-text-image__text {
	order: 2;
}

.dec-text-image--image-left .dec-text-image__image {
	order: 1;
}

/*
 * Tablet + mobile (Elementor's tablet breakpoint is 1024): every text-image
 * row stacks to one column, IMAGE FIRST, with a 40px gap between image and
 * text. Image-first has to be forced on BOTH variants — the desktop
 * `--image-left` swap sets order on the image at (0,2,0), so the override
 * carries the same variant classes or --image-left keeps its own order.
 */
@media ( max-width: 1024px ) {
	.dec-text-image,
	.dec-text-image--image-left,
	.dec-text-image--image-right {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.dec-text-image__image,
	.dec-text-image--image-left .dec-text-image__image,
	.dec-text-image--image-right .dec-text-image__image {
		order: -1;
	}

	.dec-text-image__text,
	.dec-text-image--image-left .dec-text-image__text,
	.dec-text-image--image-right .dec-text-image__text {
		order: 0;
	}
}

/*
 * Mobile only: tighten the stacked gap to 20px (tablet keeps the 40px above).
 * !important because the `dec_gap` control emits per-instance
 * `{{WRAPPER}} .dec-text-image { gap }` at (0,3,0) — a row that set a desktop
 * column gap (e.g. the emission-control --full row at 40px) would otherwise
 * keep it on mobile. The stacked mobile gap is a fixed layout value, so it
 * wins regardless of the per-instance desktop gap.
 */
@media ( max-width: 767px ) {
	.dec-text-image,
	.dec-text-image--image-left,
	.dec-text-image--image-right {
		gap: 20px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Site navigation + mega menu
   Reference: Figma 418:1148 (bar) and the Desktop_landing_page
   mega panels. Bar is 68px, white, backdrop-blurred.
   ═══════════════════════════════════════════════════════════════ */

.dec-nav {
	position: relative;
	z-index: 100;
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

.dec-nav__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 68px;
}

.dec-nav__logo img {
	display: block;
	width: 116px;
	height: 41px;
}

.dec-nav__nav {
	flex: 1;
}

.dec-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Push the trailing items to the right. The design splits the bar into a
 * left cluster (items with panels) and a right cluster; rather than hard
 * -coding an index, the CTA sits outside the list and this margin does the
 * work — reorder-safe.
 */
.dec-nav__item--has-panel + .dec-nav__item:not( .dec-nav__item--has-panel ) {
	margin-left: auto;
}

.dec-nav__item {
	position: static; /* panel anchors to .dec-nav, not the item */
}

/*
 * NOTE for future widgets: the Elementor kit styles ALL buttons via
 * `.elementor-kit-6 button` (specificity 0,1,1) — navy fill, 15/30
 * padding, 3px radius. Any bare <button> in a widget inherits that.
 *
 * The panel triggers are <button> for accessibility, so they must be
 * un-styled back. `.dec-nav .dec-nav__link` is 0,2,0, which outranks
 * the kit rule without resorting to !important.
 */
.dec-nav .dec-nav__link {
	/*
	 * `--dec-nav-mark-space` is the whole hover offset: 15px of mark + 6px
	 * before the label. Change it in one place to retune the movement.
	 *
	 * `--dec-nav-mark-speed` and `--dec-nav-mark-ease` drive BOTH halves of
	 * the effect — the mark scaling up and the label sliding right. They are
	 * one pair on purpose: the two have to finish together or the mark
	 * arrives before the space does and it reads as a stutter. Tune the feel
	 * here, or per header from Elementor's Custom CSS:
	 *
	 *     selector .dec-nav__link { --dec-nav-mark-speed: 0.5s; }
	 */
	--dec-nav-mark-space: 21px;
	--dec-nav-mark-speed: 0.35s;
	--dec-nav-mark-ease: ease;
	position: relative; /* containing block for the hover mark below */
	transition: padding-left var( --dec-nav-mark-speed ) var( --dec-nav-mark-ease ),
		margin-right var( --dec-nav-mark-speed ) var( --dec-nav-mark-ease );
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	/*
	 * Vertical padding is a HIT AREA, not spacing. The label's line box is
	 * 13px but the hover mark is 15px, so with no padding the glyph
	 * overhung the link by 1px top and bottom — and since the mark is
	 * `pointer-events: none`, that overhang could not extend the hover
	 * region. Aiming at the visible mark landed you on the link's edge,
	 * where a pixel of mouse jitter toggled :hover and the mark flickered
	 * in and out.
	 *
	 * 10px puts the whole mark comfortably inside the thing you hover. The
	 * bar is `min-height: 68px` with items centred, so a 33px link changes
	 * no layout — verified: label positions and bar height are unmoved.
	 *
	 * The rule is general: if a hover affordance is drawn OUTSIDE the
	 * element that owns the hover, the element has to grow to hold it.
	 */
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #121212; /* Carbon Black */
	cursor: pointer;
	text-decoration: none;
}

.dec-nav__chevron svg {
	display: block;
	width: 4px;
	height: 8px;
	transform: rotate( 90deg ); /* source chevron points right */
	transition: transform 0.2s ease;
}

/* Open item turns Regulatory Green, per the design. */
.dec-nav .dec-nav__item--has-panel.is-open > .dec-nav__link,
.dec-nav .dec-nav__link:hover,
.dec-nav .dec-nav__item.is-current > .dec-nav__link {
	color: #00b388;
	color: var( --dec-btn-bg-hover, var( --e-global-color-1a36e19, #42697a ) );
	background-color: transparent;
}

.dec-nav__item--has-panel.is-open .dec-nav__chevron svg {
	transform: rotate( -90deg );
}

/*
 * Hover mark — the DEC square glyph grows in to the left of a nav link.
 *
 * ABSOLUTE, NOT A FLEX CHILD. The link is `inline-flex` with `gap: 6px`
 * (it separates the chevron), and a flex gap applies between items no
 * matter how small they are — so a zero-width ::before would still push
 * every label 6px right at rest, before anyone hovered.
 *
 * THE LABEL MOVES, THE BAR DOES NOT. On hover the link opens
 * `padding-left`, which slides its label right and reveals the mark in the
 * space that opens. An equal NEGATIVE `margin-right` cancels the growth on
 * the outside, so following items stay exactly where they are.
 *
 * That is measured off the Figma reference, not assumed: between the
 * hovered and unhovered frames, Cases / Compliance / About sit at the same
 * x (560/700/930 against 568/707/920 — within scaling error) while the
 * hovered label alone shifts right. Only the hovered item moves.
 *
 * `transform: scale()` rather than animating width/height: it grows from
 * the centre, runs on the compositor, and cannot reflow the bar even by
 * accident. Visually identical for a square that scales from nothing.
 *
 * The glyph is Arqam's Vector.svg (15x15) as a mask, so the colour is a
 * kit token rather than baked into the file — same masked-data-URI
 * pattern as the Gravity submit arrow. The mask's hole stays transparent,
 * which is what makes it read as a frame.
 */
.dec-nav .dec-nav__link::before,
.dec-secnav__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0; /* the padding the hover opens up — see the link rule above */
	width: 15px;
	height: 15px;
	transform: translateY( -50% ) scale( 0 );
	transform-origin: center;
	background-color: var( --e-global-color-accent, #041e42 ); /* Navy Blue */
	/* Declared ONCE — the two properties must never drift apart. */
	--dec-nav-mark: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M14.8582 0H0.141837C0.0634722 0 0 0.0634722 0 0.141837V14.8582C0 14.9365 0.0634722 15 0.141837 15H14.8582C14.9365 15 15 14.9365 15 14.8582V0.141837C15 0.0634722 14.9365 0 14.8582 0ZM10.8598 10.7179C10.8598 10.7963 10.7963 10.8598 10.7179 10.8598H4.28207C4.2037 10.8598 4.14023 10.7963 4.14023 10.7179V4.28207C4.14023 4.2037 4.2037 4.14023 4.28207 4.14023H10.7179C10.7963 4.14023 10.8598 4.2037 10.8598 4.28207V10.7179Z'/%3E%3C/svg%3E" );
	-webkit-mask: var( --dec-nav-mark ) center / contain no-repeat;
	mask: var( --dec-nav-mark ) center / contain no-repeat;
	transition: transform var( --dec-nav-mark-speed ) var( --dec-nav-mark-ease );
	pointer-events: none;
}

/* Keyboard users get it too — the mark tracks focus, not just the mouse. */
.dec-nav .dec-nav__link:hover,
.dec-nav .dec-nav__link:focus-visible,
.dec-secnav__link:hover,
.dec-secnav__link:focus-visible {
	padding-left: var( --dec-nav-mark-space );
	margin-right: calc( var( --dec-nav-mark-space ) * -1 );
}

.dec-nav .dec-nav__link:hover::before,
.dec-nav .dec-nav__link:focus-visible::before,
.dec-secnav__link:hover::before,
.dec-secnav__link:focus-visible::before {
	transform: translateY( -50% ) scale( 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-nav .dec-nav__link,
	.dec-nav .dec-nav__link::before {
		transition: none;
	}
}

/* ── Mega panel ──────────────────────────────────────────────── */

.dec-nav__panel {
	position: absolute;
	left: 0;
	right: 0;
	/* 20px of breathing room between the bar and the panel (Arqam). The
	   menu is click-toggled, not hover-opened, so a transparent gap can't
	   break a hover bridge — see nav.js. */
	top: calc( 100% + 20px );
	display: none;
	padding: 0;
}

.dec-nav__item--has-panel.is-open > .dec-nav__panel {
	display: block;
}

.dec-nav__panel-inner {
	display: flex;
	gap: 48px;
	padding: 32px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba( 4, 30, 66, 0.12 );
}

.dec-nav__group {
	flex: 1;
}

/*
 * A group with a single card shouldn't stretch to match a 4-card group —
 * "Products" sits narrow beside "Solutions" in the design.
 */
.dec-nav__group:has( .dec-nav__card-item:only-child ) {
	flex: 0 0 auto;
	/*
	 * The card's fixed chrome is 275px (12+12 padding, 179 media, 2x16 gap,
	 * 40 arrow), so the text column is max-width - 275. "Product Catalogue"
	 * measures 147px at Manrope 700/16, and at 420px it got 145px — two
	 * pixels short, so it wrapped to two lines. 440px gives it 165px:
	 * ~12% headroom for font-loading and cross-platform metric variance.
	 */
	max-width: 440px;
}

.dec-nav__group-title {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: #041e42;
}

.dec-nav__cards {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One card alone gets the full group width rather than half of it. */
.dec-nav__cards:has( .dec-nav__card-item:only-child ) {
	grid-template-columns: minmax( 0, 1fr );
}

/*
 * Industries-style panel — Figma Main_Navigation Variant3 ("Discover
 * Industries We Serve"): a single group of larger-image cards, left-
 * aligned rather than stretched full-bleed. A solo group in the panel is
 * the reliable signal (Products & Solutions has two groups, so its cards
 * are untouched). Fixed 434px card tracks, start-aligned, with the bigger
 * 179×138 media the design uses.
 */
.dec-nav__group:only-child .dec-nav__cards {
	grid-template-columns: repeat( 2, minmax( 0, 434px ) );
	justify-content: start;
	gap: 20px;
}

.dec-nav__group:only-child .dec-nav__card-media img {
	width: 179px;
	height: 138px;
}

/*
 * Single-card group (Products & Solutions → "Products" → Product
 * Catalogue): the design gives that one card the large 179×138 image, not
 * the small Solutions thumbnail. The four Solutions cards are a 4-card
 * group, so they keep the default thumbnail.
 */
.dec-nav__cards:has( .dec-nav__card-item:only-child ) .dec-nav__card-media img {
	width: 179px;
	height: 138px;
}

@media ( max-width: 900px ) {
	.dec-nav__group:only-child .dec-nav__cards {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * Products card (single-card group) is TOP-aligned, not centred — Figma
 * Desktop_About_us header. Its media is the tall 179x138, so centring left
 * the title/subtitle floating in the middle of the image; the design lines
 * the text block up with the top of the photo. The Solutions cards keep
 * `center` because their 100x76 thumb and their text block are near enough
 * the same height for the two to be indistinguishable.
 */
.dec-nav__cards:has( .dec-nav__card-item:only-child ) .dec-nav__card {
	align-items: flex-start;
}

.dec-nav__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border-radius: 10px;
	background: #f1f3f5;
	text-decoration: none;
	transition: background 0.15s ease;
}

.dec-nav__card:hover {
	background: #e7ebef;
}

.dec-nav__card-media img {
	display: block;
	width: 100px;
	height: 76px;
	border-radius: 8px;
	object-fit: cover;
}

.dec-nav__card-text {
	flex: 1;
	min-width: 0;
}

.dec-nav__card-title {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #041e42;
}

.dec-nav__card-desc {
	display: block;
	margin-top: 2px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #42697a; /* Industrial Blue */
}

.dec-nav__card-arrow {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #ffffff;
	color: #041e42;
}

.dec-nav__card-arrow svg {
	width: 6px;
	height: 11px;
}
.dec-nav__card:hover .dec-nav__card-arrow  {
	background: #00b388;
}

/* ── Classic Button ──────────────────────────────────────────── */

.dec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 4px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Sizes (Primary/On-dark/White/Outline family; md = base). Full-width. */
.dec-btn--sm { padding: 12px 24px; font-size: 12px; }
.dec-btn--lg { padding: 20px 40px; font-size: 14px; }
.dec-btn--full { width: 100%; }

.dec-btn--primary {
	background: var( --dec-btn-bg, var( --e-global-color-accent, #041e42 ) ); /* Navy Blue */
	color: var( --dec-btn-text, #ffffff );
	box-shadow:
		0 2px 4px rgba( 136, 194, 147, 0.2 ),
		0 5px 15px rgba( 37, 84, 97, 0.15 );
}

/*
 * Per-instance colour overrides. The Style tab's colour controls set
 * --dec-btn-text / --dec-btn-arrow / --dec-btn-border on the wrapper; the
 * resting-state rules below read them with the variant default as the
 * fallback. HOVER rules deliberately use literal colours, so an override
 * changes only the resting state and never breaks the hover swap.
 */
.dec-btn__arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	color: var( --dec-btn-arrow, currentColor );
	transition: transform 0.18s ease;
}

/* Optional custom icon (Elementor <svg> or <i>), before or after the text. */
.dec-btn__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.dec-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dec-btn__icon i {
	font-size: inherit;
	line-height: 1;
}

.dec-btn-wrap {
	/* Alignment control writes text-align here; the button is inline-flex. */
	display: block;
}

/*
 * On-dark variant — from the "Our Customer Promise" panel (Figma
 * 348:911, the "Read More" button over the dark ocean image). CONFIRMED
 * Industrial Blue #42697A fill + white text, NOT the white button an
 * earlier read assumed. Same metrics as primary. Also used on the navy
 * contact band, where the lighter blue reads cleanly.
 *
 * Hover swaps to Navy Blue — the inverse of the primary's Navy→Industrial
 * swap, keeping the button system to those two tokens. (Figma doesn't
 * expose a distinct hover for this instance; this is the on-brand choice.)
 */
.dec-btn--light {
	background: var( --dec-btn-bg, var( --e-global-color-1a36e19, #42697a ) ); /* Industrial Blue */
	color: var( --dec-btn-text, #ffffff );
	box-shadow:
		0 2px 4px rgba( 136, 194, 147, 0.2 ),
		0 5px 15px rgba( 37, 84, 97, 0.15 );
}

.dec-btn--light:hover,
.dec-btn--light:focus-visible {
	background: var( --dec-btn-bg-hover, var( --e-global-color-accent, #041e42 ) ); /* Navy Blue */
	color: var( --dec-btn-text-hover, #ffffff );
}

/*
 * Hover — CONFIRMED FROM FIGMA. The Classic Button component set
 * (25:186) carries a `Hover=true` variant (25:192): the fill swaps
 * Navy Blue → Industrial Blue #42697A (kit var 1a36e19). Text stays
 * white, shadow unchanged — a flat colour swap, not a lift. (The
 * earlier navy-darken + deeper-shadow was an invented stand-in.)
 * The arrow nudge below is our own motion — Figma can't depict it.
 */
.dec-btn--primary:hover,
.dec-btn--primary:focus-visible {
	background: var( --dec-btn-bg-hover, var( --e-global-color-1a36e19, #42697a ) ); /* Industrial Blue */
	color: var( --dec-btn-text-hover, #ffffff ); /* beats the theme reset a:hover (0,1,1) */
}

/*
 * White + Outline — the two hero-CTA styles used on dark image
 * backgrounds (Arqam's reference, 2026-08-13). Same shape/metrics as the
 * Classic Button. Distinctive detail: the ARROW is a different colour
 * from the text — Industrial Blue on the white button, Regulatory Green
 * on the outline button (the arrow uses currentColor by default, so each
 * variant recolours .dec-btn__arrow explicitly).
 *
 * Confirmed by Arqam 2026-08-13: white arrow is Industrial Blue, radius
 * 4, this pair is the homepage hero CTA, and the hovers below.
 */
.dec-btn--white {
	background: var( --dec-btn-bg, #ffffff );
	color: var( --dec-btn-text, var( --e-global-color-accent, #041e42 ) ); /* Navy Blue text */
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
}

.dec-btn--white .dec-btn__arrow {
	color: var( --dec-btn-arrow, var( --e-global-color-1a36e19, #42697a ) ); /* Industrial Blue arrow */
}

/* Hover: fill swaps to Industrial Blue; text + arrow go white. */
.dec-btn--white:hover,
.dec-btn--white:focus-visible {
	background: var( --dec-btn-bg-hover, var( --e-global-color-1a36e19, #42697a ) ); /* Industrial Blue */
	color: var( --dec-btn-text-hover, #ffffff );
}

.dec-btn--white:hover .dec-btn__arrow,
.dec-btn--white:focus-visible .dec-btn__arrow {
	color: #ffffff;
}

.dec-btn--outline {
	background: var( --dec-btn-bg, transparent );
	color: var( --dec-btn-text, #ffffff );
	border: 1px solid var( --dec-btn-border, #ffffff );
	box-shadow: none;
	/*
	 * Frost the transparent outline button over a photo/video hero (Arqam).
	 * -webkit- prefix included because iOS Safari still needs it for
	 * backdrop-filter — without it the blur is silently dropped on iPhone.
	 */
	-webkit-backdrop-filter: blur( 25px );
	backdrop-filter: blur( 25px );
}

.dec-btn--outline .dec-btn__arrow {
	color: var( --dec-btn-arrow, var( --e-global-color-0f4020e, #00b388 ) ); /* Regulatory Green arrow */
}

/* Hover: fill goes white to match the border; text + arrow go black. */
.dec-btn--outline:hover,
.dec-btn--outline:focus-visible {
	background: var( --dec-btn-bg-hover, #ffffff );
	color: var( --dec-btn-text-hover, var( --e-global-color-73e4458, #0b0b0b ) ); /* Black */
	border-color: var( --dec-btn-border-hover, #ffffff );
}

.dec-btn--outline:hover .dec-btn__arrow,
.dec-btn--outline:focus-visible .dec-btn__arrow {
	color: var( --dec-btn-text-hover, var( --e-global-color-73e4458, #0b0b0b ) ); /* Black */
}

/*
 * Text-only variants — Link and Link-with-arrow. No fill/border/padding;
 * inherit the same colour-override vars. Link-with-arrow reuses the shared
 * arrow (which keeps its hover nudge); plain Link underlines on hover.
 */
.dec-btn--link,
.dec-btn--link-arrow {
	padding: 0;
	gap: 8px;
	background: none;
	border: none;
	box-shadow: none;
	color: var( --dec-btn-text, var( --e-global-color-accent, #041e42 ) );
}

.dec-btn--link:hover,
.dec-btn--link:focus-visible {
	color: var( --dec-btn-text-hover, var( --e-global-color-1a36e19, #42697a ) );
	text-decoration: underline;
}

.dec-btn--link-arrow:hover,
.dec-btn--link-arrow:focus-visible {
	color: var( --dec-btn-text-hover, var( --e-global-color-1a36e19, #42697a ) );
}

.dec-btn:hover .dec-btn__arrow {
	transform: translateX( 3px );
}

.dec-btn:focus-visible {
	outline: 2px solid #00b388; /* Regulatory Green */
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-btn__arrow {
		transition: none;
	}

	.dec-btn:hover .dec-btn__arrow {
		transform: none;
	}
}

/* ── Mobile menu ─────────────────────────────────────────────────
   Above 1023px the desktop mega bar is the whole story; the toggle and
   the in-overlay CTA are hidden and the bar CTA shows. Below it the bar
   collapses to logo + hamburger, and .dec-nav__nav becomes a full-screen
   overlay whose panels reuse the desktop accordion toggle (nav.js is
   breakpoint-agnostic — tapping a top item just toggles .is-open).      */
.dec-nav__toggle,
.dec-nav__mcta {
	display: none; /* desktop: neither the hamburger nor the overlay CTA */
}

/* Freeze the page behind the open overlay (JS toggles this on <html>). */
html.dec-nav-lock {
	overflow: hidden;
}

@media ( max-width: 1023px ) {
	/*
	 * backdrop-filter establishes a containing block for fixed-position
	 * descendants — which would trap the overlay inside the 68px bar. Drop
	 * the blur here (the 92%-white background alone reads as a solid bar on a
	 * phone) so .dec-nav__nav can pin to the viewport.
	 */
	.dec-nav {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* ---- collapsed bar: logo + hamburger, no inline menu, no bar CTA ---- */
	.dec-nav__bar-cta {
		display: none;
	}

	/* Two-class scope beats the kit's `.elementor-kit-6 button` (0,1,1). */
	.dec-nav .dec-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto; /* push to the right edge of the bar */
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		background-color: transparent;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
		color: #041e42; /* Navy */
		cursor: pointer;
	}

	.dec-nav__toggle-bars {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}

	.dec-nav__toggle-bars span {
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
	}

	.dec-nav__toggle-bars span:nth-child( 1 ) {
		top: 0;
	}
	.dec-nav__toggle-bars span:nth-child( 2 ) {
		top: 7px;
	}
	.dec-nav__toggle-bars span:nth-child( 3 ) {
		top: 14px;
	}

	.dec-nav.is-menu-open .dec-nav__toggle-bars span:nth-child( 1 ) {
		top: 7px;
		transform: rotate( 45deg );
	}
	.dec-nav.is-menu-open .dec-nav__toggle-bars span:nth-child( 2 ) {
		opacity: 0;
	}
	.dec-nav.is-menu-open .dec-nav__toggle-bars span:nth-child( 3 ) {
		top: 7px;
		transform: rotate( -45deg );
	}

	/* ---- the overlay itself ---- */
	.dec-nav__nav {
		position: fixed;
		top: 68px; /* below the fixed bar */
		left: 0;
		right: 0;
		bottom: 0;
		flex: none;
		display: block;
		padding: 8px 24px 40px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: #ffffff;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0s 0.25s;
	}

	.dec-nav.is-menu-open .dec-nav__nav {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease;
	}

	/* ---- top-level list becomes a stacked accordion ---- */
	.dec-nav__list {
		flex-direction: column;
		align-items: stretch;
		/*
		 * !important, deliberately: the `dec_link_gap` control on the header
		 * (40px on template 67) emits a per-instance rule
		 * `.elementor-67 .elementor-element-dechdr2 .dec-nav__list { gap }` at
		 * (0,3,0), which outranks a plain `.dec-nav__list` here. The stacked
		 * accordion uses row borders, never a gap, so the mobile layout must win
		 * regardless of what the desktop link-spacing control is set to.
		 */
		gap: 0 !important;
	}

	.dec-nav__item {
		position: static;
		border-bottom: 1px solid rgba( 4, 30, 66, 0.08 );
	}

	/* the desktop right-push is meaningless in a column */
	.dec-nav__item--has-panel + .dec-nav__item:not( .dec-nav__item--has-panel ) {
		margin-left: 0;
	}

	.dec-nav .dec-nav__link {
		width: 100%;
		justify-content: space-between; /* label left, chevron right */
		gap: 12px;
		padding: 18px 2px;
		font-size: 16px;
		--dec-nav-mark-space: 0px; /* no hover-slide indent on mobile */
	}

	/* the desktop hover square glyph has no place in a tap list */
	.dec-nav .dec-nav__link::before {
		content: none;
	}

	.dec-nav__chevron svg {
		width: 7px;
		height: 12px;
	}

	/* ---- panels: from floating card to inline accordion body ---- */
	.dec-nav__panel {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		padding: 0 0 20px;
	}

	.dec-nav__panel-inner {
		flex-direction: column;
		gap: 22px;
		padding: 4px 0 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.dec-nav__group,
	.dec-nav__group:has( .dec-nav__card-item:only-child ) {
		flex: none;
		max-width: none;
	}

	.dec-nav__group-title {
		margin: 0 0 10px;
		font-size: 15px;
		color: #42697a; /* Industrial Blue — a quiet section label at this size */
	}

	.dec-nav__cards,
	.dec-nav__group:only-child .dec-nav__cards,
	.dec-nav__cards:has( .dec-nav__card-item:only-child ) {
		grid-template-columns: minmax( 0, 1fr );
		gap: 8px;
	}

	/*
	 * On a phone the "Product Catalogue" and Industries cards use the big
	 * 179×138 image; shrink them to the small Solutions thumbnail so every card
	 * in the overlay matches (Arqam).
	 */
	.dec-nav__group:only-child .dec-nav__card-media img,
	.dec-nav__cards:has( .dec-nav__card-item:only-child ) .dec-nav__card-media img {
		width: 100px;
		height: 76px;
	}

	/* ---- CTA travels into the overlay ---- */
	.dec-nav__mcta {
		display: inline-flex;
		justify-content: center;
		width: 100%;
		margin-top: 28px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Site footer
   Reference: Figma 497:10738 (Footer_Desktop), 1440x651.
   Colours sampled from Figma's render, not guessed:
   bg #041E42, headings #00B388, links #FFFFFF.

   Measured: content box x=51..1403 (1352 wide); columns 332 / 250 /
   194 with 90px gutters; links 38px apart; divider at y=564; logo
   130x46 top-right.

   NOTE the columns start at x=87 in Figma while the divider, legal row
   and social icon all start at x=51 — a 36px inconsistency that reads
   as unintentional. Everything is aligned to 51 here. Revert if the
   designer confirms the indent is deliberate.
   ═══════════════════════════════════════════════════════════════ */

.dec-footer {
	background: #041e42; /* Navy Blue */
	color: #ffffff;
}

.dec-footer__inner {
	max-width: 1352px;
	margin: 0 auto;
	padding: 69px 24px 40px;
}

.dec-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

.dec-footer__columns {
	display: flex;
	gap: 90px;
	flex-wrap: wrap;
}

.dec-footer__col-title {
	margin: 0 0 32px;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 33px;
	color: #00b388; /* Regulatory Green */
}

.dec-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-footer__link-item + .dec-footer__link-item {
	margin-top: 16px; /* 38px baseline pitch minus the 22px line box */
}

.dec-footer__link {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: #ffffff;
	text-decoration: none;
}

a.dec-footer__link:hover {
	color: #00b388;
}

.dec-footer__logo {
	flex: 0 0 auto;
	color: #ffffff; /* logo-white.svg is monotone currentColor */
}

.dec-footer__logo img {
	display: block;
	width: 130px;
	height: 46px;
}

/* ── Social + badges ─────────────────────────────────────────── */

.dec-footer__mid {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-top: 72px;
}

.dec-footer__social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* White disc, navy glyph — as in the design. */
.dec-footer__social-link {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	color: #041e42;
}

.dec-footer__social-link svg {
	width: 18px;
	height: 18px;
}

.dec-footer__badges {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-footer__badges img {
	display: block;
	width: auto;
	/* height comes from the per-badge control — they are different shapes */
}

/* ── Legal bar ───────────────────────────────────────────────── */

.dec-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba( 255, 255, 255, 1 );
}

.dec-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-footer__legal-list a {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
	text-decoration: none;
}

.dec-footer__legal-list a:hover {
	color: #00b388;
}

.dec-footer__copyright {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	color: #ffffff;
	text-align: right;
}

@media ( max-width: 1023px ) {
	.dec-footer__top,
	.dec-footer__mid,
	.dec-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.dec-footer__columns {
		gap: 40px;
	}

	.dec-footer__copyright {
		text-align: left;
	}

	/*
	 * Tighten the stacked vertical rhythm on phones (Arqam) — the desktop
	 * margins/gaps (72px above the mid row, 40px between the social/badges and
	 * between the legal links) read as huge once everything is a single column.
	 */
	.dec-footer__mid {
		margin-top: 28px;
		gap: 20px;
	}

	.dec-footer__legal-list {
		gap: 14px 24px;
	}

	.dec-footer__bottom {
		margin-top: 20px;
		gap: 16px;
	}
}

@media ( max-width: 767px ) {
	/*
	 * Certification badges (AAA, two ISO circles, Gasell) squished into one
	 * no-wrap row on phones. Let them wrap and cap the height well down (the
	 * per-badge height controls are ~90px) — max-height beats them without
	 * needing each badge's own value, width:auto keeps every shape's ratio.
	 */
	.dec-footer__badges {
		flex-wrap: wrap;
		gap: 16px 20px;
	}

	.dec-footer__badges img {
		max-height: 36px;
		width: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Hero
   Figma: About_us 307:350 (image 1440x500 at y=68) + 307:736
   (World_map curve at y=538).

   The curve starts 30px ABOVE the image's bottom edge (538 vs 568),
   so it overlaps the last 30px of the photo rather than sitting
   flush under it. That overlap is what makes the white section read
   as cutting INTO the image.
   ═══════════════════════════════════════════════════════════════ */

.dec-hero__media {
	position: relative;
	height: 500px;
	overflow: hidden;
}

.dec-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Background video sits over the poster image, covering the media area. */
.dec-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/*
 * Width variants. 'boxed' is the default (no class rule needed — the hero
 * fills its section's content width). 'wide' and 'full' break out of a
 * boxed container: margin math re-centres the element against the
 * VIEWPORT (see the button-system note; margin % resolves against the
 * parent width, vw against the viewport, so 50% − 50vw = −(parent inset)).
 */
.dec-hero--width-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
}

.dec-hero--width-wide {
	width: min( 100vw, 1600px );
	max-width: 100vw;
	margin-left: calc( 50% - min( 50vw, 800px ) );
}

.dec-hero__overlay {
	position: absolute;
	inset: 0;
	background: #041e42; /* Navy Blue */
	opacity: 0;
	pointer-events: none;
}

/*
 * Pinned to the bottom. Height is the 22.5px step plus a margin of
 * solid fill, so the shape always covers down to the edge no matter
 * how the hero is sized — the source viewBox is 435 tall but only the
 * top ~23px carries the curve.
 */
/*
 * Height is the notch depth itself (Figma: 22.5px), NOT an arbitrary
 * band. hero-curve.js overwrites both this and the viewBox in pixel
 * space so the shape never shears; this value is the no-JS fallback.
 */
.dec-hero__curve {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* kills the hairline gap from fractional rounding */
	width: 100%;
	height: 23px;
	color: #ffffff;
}

@media ( max-width: 767px ) {
	.dec-hero__media {
		/*
		 * !important: the Height control (`dec_height`) emits
		 * `{{WRAPPER}} .dec-hero__media { height }` at (0,3,0) on every hero that
		 * has a value saved (its 500px default counts) — that outranks a plain
		 * `.dec-hero__media` and pinned phones at 500px. 250 is a fixed mobile
		 * height, so it wins regardless of the per-instance desktop value.
		 */
		height: 250px !important; /* Arqam: shorter hero on phones */
	}

	/*
	 * Shallower on phones — the plateau is half the viewport there, so a
	 * full-depth step reads as a large chunk cut out rather than a notch.
	 * The JS clamps shoulder width proportionally to match.
	 */
	.dec-hero__curve {
		height: 14px;
	}
}

/* ── Curve / Notch (standalone divider widget) ──────────────────
   Same geometry as the hero curve, droppable on any section edge.
   Block-level, full width; height is the notch depth (Depth control).
   preserveAspectRatio:none lets it stretch to any width/height. */
.dec-curve {
	display: block;
	width: 100%;
	height: 23px;
	color: #041e42; /* Navy Blue — overridden by the Colour control */
}

.dec-curve--flip {
	transform: scaleY( -1 );
}

/*
 * Border-only: the same boundary as an OPEN path, stroked instead of
 * filled (see hero-curve.js buildPath). The <path> already carries
 * fill/stroke attributes so it is correct before CSS or JS runs; these
 * rules simply outrank them for the Colour control, which sets `color`
 * on the svg and is picked up here through currentColor.
 *
 * stroke-width is left to the Border-width control (Elementor emits it at
 * (0,4,0)); the attribute on the path is the fallback.
 */
.dec-curve--outline path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: butt;
	stroke-linejoin: round;
}

/*
 * Height is driven by the Depth control, but an outline's box is
 * depth + stroke (the stroke is centred on the line, so half of it falls
 * outside the geometry). hero-curve.js sets the real height inline once
 * it runs; `auto` keeps the pre-JS state from clipping the line.
 */
.dec-curve--outline {
	height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Section nav — Figma About_us 557:4159 (1440x60)
   Colours sampled from Figma's render, not guessed:
   bar #FBFBFB, top hairline #A0B3BC, label #121212.
   ═══════════════════════════════════════════════════════════════ */

.dec-secnav {
	background: #fbfbfb;
	border-top: 1px solid #a0b3bc;
}

/* Sticky is Elementor's job — set it on the container, not here. */

.dec-secnav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	max-width: 1240px;
	min-height: 60px;
	margin: 0 auto;
	padding: 0 24px;
	list-style: none;
}

.dec-secnav__link {
	/*
	 * Same hover mark as the site nav — the shared `::before` above draws
	 * it, this just opts in by supplying the variables and a positioning
	 * context. Retune either bar independently by overriding these.
	 *
	 * No hit-area padding needed here: the 8px block padding already makes
	 * the link 28px, so the 15px mark clears by ~6px top and bottom. The
	 * site nav needed `padding: 10px 0` because its 13px line box was
	 * SHORTER than the mark and the glyph overhung the hover target (1.22.2).
	 */
	--dec-nav-mark-space: 21px;
	--dec-nav-mark-speed: 0.35s;
	--dec-nav-mark-ease: ease;
	position: relative;
	display: block;
	padding: 8px 0;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #121212; /* Carbon Black */
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease,
		padding-left var( --dec-nav-mark-speed ) var( --dec-nav-mark-ease ),
		margin-right var( --dec-nav-mark-speed ) var( --dec-nav-mark-ease );
}

.dec-secnav__link:hover,
.dec-secnav__link.is-active {
	color: #00b388; /* Regulatory Green */
	border-bottom-color: #00b388;
	color: var( --dec-btn-bg-hover, var( --e-global-color-1a36e19, #42697a ) );
	border-bottom-color: var( --dec-btn-bg-hover, var( --e-global-color-1a36e19, #42697a ) );
}

/*
 * Scrolls horizontally on narrow screens rather than wrapping to two
 * rows — six labels can't fit on a phone, and a wrapped jump bar reads
 * as broken.
 */
@media ( max-width: 900px ) {
	.dec-secnav__list {
		justify-content: flex-start;
		gap: 28px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dec-secnav__list::-webkit-scrollbar {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-secnav__link,
	.dec-secnav__link::before {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Expanding panel — Figma About_us 348:911
   Starts inset with rounded corners, grows to full-bleed on scroll.
   Ported from TVG's .makesmall: IntersectionObserver toggles
   .is-in-view, CSS transitions do the work. No GSAP.
   ═══════════════════════════════════════════════════════════════ */

.dec-expand {
	padding: var( --dec-expand-inset, 20px );
}

.dec-expand__panel {
	position: relative;
	overflow: hidden;
	border-radius: var( --dec-expand-radius, 10px );
	min-height: 640px;
	display: flex;
	align-items: center;
}

/*
 * The transition lives on the padding and radius only — not `all`.
 * TVG uses `transition: all 1.4s ease !important`, which also animates
 * colour and layout properties and makes anything else on the panel feel
 * sluggish. Same 1.4s ease, scoped to what actually moves.
 */
.dec-expand--animate {
	transition: padding 1.4s ease;
}

.dec-expand--animate .dec-expand__panel {
	transition: border-radius 1.4s ease;
}

.dec-expand--animate .dec-expand__content {
	opacity: 0;
	transition: opacity 1.4s ease;
}

.dec-expand--animate.is-in-view {
	--dec-expand-inset: 0px;
}

.dec-expand--animate.is-in-view .dec-expand__panel {
	--dec-expand-radius: 0px;
}

.dec-expand--animate.is-in-view .dec-expand__content {
	opacity: 1;
}

.dec-expand__media {
	position: absolute;
	inset: 0;
	/*
	 * z-index:0 makes the media its own stacking context, so the grid
	 * texture (raised to z-index:2 below, to sit ABOVE the opaque poster)
	 * still stays under the copy — `.dec-expand__content` is z-index:1 at
	 * the panel level and must never be overpainted by the grid.
	 */
	z-index: 0;
}

/*
 * Two-class selector: a global `img { height: auto }` (Elementor/theme,
 * 0,1,1) outranks a single-class `.dec-expand__poster` (0,1,0) on the
 * HEIGHT property only — so width:100% applied but height:100% didn't,
 * and a portrait poster overflowed to its natural height (the panel
 * clips it, showing only the pale top slice). Never caught because the
 * About panel uses a <video>, which the `img` rule doesn't touch.
 */
.dec-expand__media .dec-expand__video,
.dec-expand__media .dec-expand__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dec-expand__scrim {
	position: absolute;
	inset: 0;
	background: #041e42; /* Navy Blue */
	opacity: 0.25;
}

/*
 * The grid texture attaches to the media layer, so the scrim is a child
 * of a `.dec-grid` element — and `.dec-grid > *` (0,1,1) forces
 * position:relative on every child, which outranks the single-class
 * absolute rule above (0,1,0) and drops the scrim into flow (height 0,
 * no overlay). Two-class selector restores the overlay. Same latent bug
 * on the About panel — unnoticed there because it uses a dark video.
 */
.dec-expand__media .dec-expand__scrim {
	position: absolute;
}

/*
 * The panel is full-bleed, but its copy must line up with the boxed page
 * column like every other section — not hug the panel's own edge. So the
 * content layer spans the panel and centres a 1440px box (the kit's
 * container_width) with the standard 24px gutter; the inner block then
 * caps the text measure and left-aligns it. Result: the eyebrow's left
 * edge sits exactly where boxed sections above and below it start.
 */
.dec-expand__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	color: #ffffff;
}

.dec-expand__inner {
	max-width: 560px;
}

@media ( max-width: 767px ) {
	/* Arqam: breathing room above/below the copy on phones (was 0). */
	.dec-expand__content {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.dec-expand__heading {
	margin: 0 0 24px;
	font-family: "Manrope", sans-serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 40px;
	color: #ffffff;
	text-wrap: balance;
}

/* Beat the kit's `.elementor-kit-6 h2` (0,1,1); see the hero note above. */
.dec-expand .dec-expand__heading {
	color: #ffffff;
}

.dec-expand__body {
	margin: 0 0 32px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: normal;
	color: #ffffff;
}

.dec-expand__body > p {
	margin: 0 0 1rem;
}

.dec-expand__body > p:last-child {
	margin-bottom: 0;
}

/* Optional "Key Benefits" list in the scrim card — always white on media. */
.dec-expand__benefits-block {
	margin: 0 0 32px;
}

.dec-expand__benefits-label {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
	color: #ffffff;
}

.dec-expand__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dec-expand__benefits li {
	position: relative;
	padding-left: 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.375;
	color: #ffffff;
}

.dec-expand__benefits li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

/*
 * WYSIWYG benefits container. Keeps `.dec-expand__benefits` so the brand dot
 * above still reaches list items typed in the editor (the rule is a
 * descendant selector, so nested <li>s match). What it DROPS is the
 * `display: grid` — that would treat every heading and paragraph as a grid
 * row with an 8px gap and flatten the typographic rhythm — so the inner
 * ul/ol restate the marker and indent reset the container used to provide.
 *
 * Same shape as .dec-text-image__benefits--rich, but this card always sits
 * on media, so the type is white rather than the light-scheme ink.
 */
.dec-expand__benefits--rich {
	display: block;
}

.dec-expand__benefits--rich > :first-child {
	margin-top: 0;
}

.dec-expand__benefits--rich > :last-child {
	margin-bottom: 0;
}

.dec-expand__benefits--rich ul,
.dec-expand__benefits--rich ol {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dec-expand__benefits--rich p {
	margin: 0 0 1rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.375;
	color: #ffffff;
}

.dec-expand__benefits--rich h2,
.dec-expand__benefits--rich h3,
.dec-expand__benefits--rich h4 {
	margin: 0 0 8px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
	color: #ffffff;
}

.dec-expand__benefits--rich a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Reduced motion: land in the expanded state immediately rather than
 * animating, and don't hide the content behind an opacity transition
 * that never runs.
 */
@media ( prefers-reduced-motion: reduce ) {
	.dec-expand--animate,
	.dec-expand--animate .dec-expand__panel,
	.dec-expand--animate .dec-expand__content {
		transition: none;
	}

	.dec-expand--animate {
		--dec-expand-inset: 0px;
	}

	.dec-expand--animate .dec-expand__panel {
		--dec-expand-radius: 0px;
	}

	.dec-expand--animate .dec-expand__content {
		opacity: 1;
	}
}

@media ( max-width: 767px ) {
	.dec-expand__panel {
		min-height: 480px;
	}

	.dec-expand__heading {
		font-size: 28px;
		line-height: 32px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Timeline — Figma About_us 348:1292 (Punktlista_scroll)
   568x687 viewport over 1047px of content, so it scrolls internally.
   Every colour sampled from Figma's render: dots, rail, year and
   description are all Regulatory Green #00B388.
   The navy band behind it belongs to the Elementor container.
   ═══════════════════════════════════════════════════════════════ */

/*
 * Two milestones, with the third fading out — the design shows exactly that,
 * and a taller window made the band enormous for no gain. At the item pitch
 * (65 year + 40 gap + 22 text + 100 spacing = 227px) 520px shows two in full
 * and about a third of the next, which the fade then dissolves.
 *
 * The bottom fade is far deeper than the top on purpose: the top edge only
 * needs to avoid a hard cut, while the bottom is doing real work — it is what
 * makes the third year read as "there is more below" rather than as a
 * milestone that has been chopped.
 */
.dec-timeline__scroll {
	max-height: 520px;
	overflow-y: auto;
	scrollbar-width: none;

	-webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 40px, #000 calc( 100% - 150px ), transparent 100% );
	mask-image: linear-gradient( to bottom, transparent 0, #000 40px, #000 calc( 100% - 150px ), transparent 100% );
}

.dec-timeline__scroll::-webkit-scrollbar {
	display: none;
}

/* ── Advance on scroll ────────────────────────────────────────
 *
 * Opt-in per instance (`dec-timeline--scroll`). The rail advances as the
 * section crosses the viewport instead of scrolling inside its own box.
 *
 * NOT PINNED, deliberately (Arqam, after seeing it): pinning needs surplus
 * page height to scroll through, and that surplus is part of the section —
 * so it paints as a tall empty band under the content, or as a gap if made
 * transparent. There is no version of a pin where that height is zero. This
 * keeps the section at exactly its content height, which is what he wanted,
 * and the years still move on scroll.
 *
 * Only the shift is animated, and it is a transform — compositor only.
 */
.dec-timeline--scroll .dec-timeline__scroll {
	overflow: hidden; /* JS drives the offset; native scrolling would fight it */
}

.dec-timeline--scroll .dec-timeline__list {
	transform: translate3d( 0, calc( -1 * var( --dec-tl-shift, 0px ) ), 0 );
	will-change: transform;
}

/*
 * Desktop-only and off under reduced motion — both fall back to the internal
 * scroll the widget has always had, which is why that was kept rather than
 * replaced.
 */
@media ( max-width: 900px ) {
	.dec-timeline--scroll .dec-timeline__scroll {
		overflow-y: auto;
	}

	.dec-timeline--scroll .dec-timeline__list {
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-timeline--scroll .dec-timeline__scroll {
		overflow-y: auto;
	}

	.dec-timeline--scroll .dec-timeline__list {
		transform: none;
	}
}

/* ── Full-screen "Our Story" pin ──────────────────────────────
 *
 * The band FILLS the viewport and holds still for one screenful while the
 * rail advances, then releases — the 1.26.3 mechanism, chosen after the
 * "cover" variant read as a white stripe sandwiched in navy.
 *
 * timeline-pin.js turns the section into a TRACK taller than the viewport
 * (100vh + rail travel) and pins its `.e-con-inner` at exactly 100vh, so the
 * navy ALWAYS fills the screen — there is no "below" to paint empty (the flaw
 * that sank 1.25/1.26). Content is centred in the pinned viewport.
 *
 * position / top / height / flex / align are set INLINE by the JS because
 * Elementor's own flex rules on `.e-con-inner` (flex:1 1 auto, align normal)
 * otherwise win and the pin has nowhere to stick — the exact trap that cost
 * three attempts in August. The rules here are only a no-JS fallback.
 */
.elementor-element.dec-story-fullpin > .e-con-inner {
	min-height: 100vh;
	align-items: center;
}

/* Pin off on mobile / reduced-motion — JS clears its inline styles and the
 * rail falls back to its own internal scroll. */
@media ( max-width: 900px ) {
	.elementor-element.dec-story-fullpin > .e-con-inner {
		min-height: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-element.dec-story-fullpin > .e-con-inner {
		min-height: 0;
	}
}

.dec-timeline__list {
	transform: translate3d( 0, calc( -1 * var( --dec-tl-shift, 0px ) ), 0 );
	will-change: transform;
}

.dec-timeline__scroll:focus-visible {
	outline: 2px solid #00b388;
	outline-offset: 4px;
}

.dec-timeline__list {
	margin: 0;
	padding: 48px 0;
	list-style: none;
}

/*
 * Continuous rail (the Tången scrollable-block approach). Each item draws
 * the green line as its own ::before, running from its marker down PAST
 * its bottom edge (bottom:-8px) to overlap the next item's line — so the
 * rail reads as one unbroken stroke regardless of how tall each item is.
 *
 * Spacing is padding-bottom, NOT margin: the previous build used
 * `margin-top:200px` between items, which opened 200px gaps the
 * border-left rail couldn't bridge, so the line looked chopped into
 * segments. Padding keeps the rail inside the element, so it stays whole.
 */
.dec-timeline__item {
	position: relative;
	padding: 0 0 100px 54px; /* Figma gap between milestones */
	color: #00b388;
}

.dec-timeline__item::before {
	content: "";
	position: absolute;
	left: 11px; /* centre of the 24px marker */
	top: 8px;
	bottom: -8px;
	width: 2px;
	background: #00b388; /* Regulatory Green */
	z-index: 1;
}

.dec-timeline__item:last-child {
	padding-bottom: 0;
}

.dec-timeline__item:last-child::before {
	display: none;
}

.dec-timeline__dot {
	position: absolute;
	left: 0;
	top: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #00b388; /* Regulatory Green — solid, per Figma 348:1292 */
	z-index: 2;
}

/*
 * Year and description are the Figma type, read off the node rather than
 * guessed: 348:1296 is Manrope Regular 54/65 ("Heading/h1" in the file, despite
 * the name — it is weight 400), and the descriptions are 16px on a 468px
 * measure with a 40px gap under the year. The build had drifted small at
 * 40/15 with a 320px measure and a 14px gap.
 *
 * ⚠️ Two of the five descriptions are FUNNEL SANS 16/22 in Figma while the
 * other three are Manrope — a source inconsistency, not a design decision.
 * Funnel Sans is not a site font, so all five render Manrope here; the 1.4
 * line-height matches Funnel Sans's 22/16 anyway.
 */
.dec-timeline__year {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 54px;
	font-weight: 400;
	line-height: 65px;
	color: #00b388;
}

.dec-timeline__text {
	display: block;
	margin-top: 40px;
	max-width: 468px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #00b388;
}

@media ( max-width: 767px ) {
	.dec-timeline__item {
		padding: 0 0 48px 40px;
	}

	.dec-timeline__year {
		font-size: 40px;
		line-height: 1.2;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Icon cards — Figma About_us "Our Values" (402:581/582/588)
   Card 410x203, icon 60, title ~24 bold, body ~15 capped at 385.
   Title and body sampled as Navy #041E42. Icons are #1C1B1F in
   Figma (Material's default fill) — treated as an oversight and
   defaulted to Navy via a control.
   ═══════════════════════════════════════════════════════════════ */

.dec-cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 44px;
}

.dec-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * Filled variant — each card in a rounded Industrial-Blue-Light panel
 * (About_us "Our Values", Figma 402:581). The tint is the kit's
 * Industrial Blue Light (#42697A at 10%); reference the kit CSS var so a
 * palette change flows through, with the measured hex as fallback for
 * contexts where the var isn't emitted. Radius + colour are also editable
 * per instance via the controls.
 */
.dec-cards--filled .dec-card {
	background-color: var( --e-global-color-a4b6c74, rgba( 66, 105, 122, 0.1 ) );
	border-radius: 16px;
	padding: 40px 32px;
}

.dec-card__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 8px;
	color: #041e42;
}

/* Elementor emits <svg> for uploaded SVGs and <i> for font icons. */
.dec-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.dec-card__icon i {
	font-size: inherit;
	line-height: 1;
}

.dec-card__title {
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 33px;
	color: #041e42; /* Navy Blue */
}

/*
 * 385 of the card's 410 — the design deliberately insets the body
 * relative to the title so the two-line measure breaks where intended.
 */
.dec-card__text {
	max-width: 385px;
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #041e42;
}

@media ( max-width: 767px ) {
	.dec-cards {
		gap: 32px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Grid texture — the faded blueprint grid on the navy surfaces
   (footer 497:10738, the 348:911 panel, and 307:757).

   Measured from Figma's render, not eyeballed: 52x52px cells, white
   lines ramping from ~0.12 to ~0.25 alpha left-to-right, with the grid
   only starting around 35% across.

   Two repeating gradients draw it and a mask does the fade — no image
   asset, resolution-independent, and it costs nothing to ship. Figma
   bakes this as a raster; don't export it.

   Two ways to use it:

   1. `dec-grid` — the bare primitive. Draws the texture on an element
      you have ALREADY made `position: relative` (and clipped, if the
      texture would otherwise bleed). The footer and expand panel do
      exactly that via `.dec-footer.dec-grid` / `.dec-expand__media`.

   2. `dec-grid-section` — the self-contained variant. Positions and
      clips itself, so it works standalone on any Elementor
      container/section: paste `dec-grid-section` into the element's
      "CSS Classes" field and the blueprint grid appears behind its
      content. This is the "use it anywhere" class.

   Tune either per instance with the custom properties below.
   ═══════════════════════════════════════════════════════════════ */

/*
.dec-grid,
.dec-grid-section {
	--dec-grid-size: 52px;
	--dec-grid-line: rgba( 255, 255, 255, 0.25 );
	--dec-grid-fade-from: 30%;
	--dec-grid-fade-angle: to right;
}
*/

/*
 * The section variant carries its own positioning + clipping so it needs
 * no companion class. A shallow left-edge fade (12%) keeps the grid
 * across almost the full width — a whole-section look, versus the
 * footer's deeper 30% ramp — while still softening the leading edge.
 */
.dec-grid-section {
	position: relative;
	overflow: hidden;
	--dec-grid-fade-from: 12%;
}

.dec-grid::after,
.dec-grid-section::after,
.dec-grid-hero::after {
	content: "";
	position: absolute;
	/* Overridable so a variant can place the pattern off-centre or oversized;
	   defaults to filling the element, i.e. exactly what it always did. */
	inset: var( --dec-grid-inset, 0 );
	z-index: 0;
	pointer-events: none;

	/*
	 * `0 1px` then `1px var(--size)` gives a 1px line and a transparent
	 * remainder — one gradient per axis rather than an SVG <pattern>,
	 * which would need a wrapper element and its own viewBox handling.
	 */
	background-image:
		repeating-linear-gradient( to right, var( --dec-grid-line ) 0 1px, transparent 1px var( --dec-grid-size ) ),
		repeating-linear-gradient( to bottom, var( --dec-grid-line ) 0 1px, transparent 1px var( --dec-grid-size ) );

	/* The fade is a whole mask, not just an angle, so a variant can swap the
	   directional ramp for a radial bloom without duplicating the painting. */
	-webkit-mask-image: var( --dec-grid-mask, linear-gradient( var( --dec-grid-fade-angle ), transparent var( --dec-grid-fade-from ), #000 100% ) );
	mask-image: var( --dec-grid-mask, linear-gradient( var( --dec-grid-fade-angle ), transparent var( --dec-grid-fade-from ), #000 100% ) );
}

/* Content sits above the texture (footer, panel, and any section). */
.dec-grid > *,
.dec-grid-section > *,
.dec-grid-hero > * {
	position: relative;
	z-index: 1;
}

/* ── .dec-grid-hero — the light radial bloom ────────────────────
 *
 * The Products hero (Figma Desktop_Products `494:2859`, 1441x749). Same
 * painting as .dec-grid-section, different everything else — which is why
 * it is a sibling class and not a tweak to that one:
 *
 *   .dec-grid-section  white lines, fades in DIRECTIONALLY from one edge,
 *                      fills the element. For dark bands.
 *   .dec-grid-hero     Industrial Blue lines, fades RADIALLY from a centre,
 *                      and the pattern is larger than the element and
 *                      offset. For light bands.
 *
 * Every value below is measured, not guessed:
 *   size  55px — six consecutive line gaps on the 1440 render read 55, 55,
 *                54.5, 55, 55, 54.5.
 *   line  #42697A at 15% — the exported layer's RGB is (66,105,122) and the
 *                darkest rendered pixel is rgb(227,233,235), which is
 *                exactly that colour at 15% over white.
 *   inset  Figma places the pattern left 24%, top -23.07%, 76% x 146.14%.
 *          Left 24% + width 76% = 100%, so the right edge is flush; the
 *          height overhangs symmetrically, hence -23.07% top and bottom.
 *   mask   stop values sampled off the export's own alpha channel across
 *          its centre line (100/97/66/24/5/0 at 0/20/40/60/80/100% radius)
 *          rather than approximating with a single stop.
 */
.dec-grid-hero {
	position: relative;
	overflow: hidden;
	--dec-grid-size: 55px;
	--dec-grid-line: rgba( 66, 105, 122, 0.15 ); /* Industrial Blue @ 15% */
	--dec-grid-inset: -23.07% 0 -23.07% 24%;
	--dec-grid-mask: radial-gradient(
		ellipse closest-side at 50% 50%,
		rgba( 0, 0, 0, 1 ) 0%,
		rgba( 0, 0, 0, 0.97 ) 20%,
		rgba( 0, 0, 0, 0.66 ) 40%,
		rgba( 0, 0, 0, 0.24 ) 60%,
		rgba( 0, 0, 0, 0.05 ) 80%,
		rgba( 0, 0, 0, 0 ) 100%
	);
}

/* Footer: grid sits behind everything, fading in from the left. */
.dec-footer.dec-grid {
	position: relative;
	overflow: hidden;
}

/*
 * Panel: the texture belongs over the video but under the copy, so it
 * attaches to the media layer rather than the panel itself.
 */
.dec-expand__media.dec-grid::after {
	--dec-grid-fade-from: 20%;
	/*
	 * Above the poster/video (which `.dec-grid > *` lifts to z-index:1),
	 * so the blueprint lines actually show over the image. Still contained
	 * below the copy by the media's own z-index:0 stacking context.
	 */
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   Contact card — Figma Contact_Us 407:1770 / 1775 / 1780
   280 wide, 60px centred icon, green lines beneath.
   Lines sampled as Regulatory Green #00B388.
   ═══════════════════════════════════════════════════════════════ */

.dec-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 280px;
	margin: 0 auto;
}

.dec-contact__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	/* Fallback only — the widget's "Icon gap" control writes margin-bottom
	   at (0,4,0) and drives this in practice. Kept so the default holds
	   even on instances saved before the control existed. */
	margin-bottom: 16px;
	color: #041e42;
}

.dec-contact__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.dec-contact__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-contact__line {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #00b388; /* Regulatory Green */
}

.dec-contact__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.dec-contact__link:hover,
.dec-contact__link:focus-visible {
	border-bottom-color: currentColor;
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-contact__link {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Testimonials — Figma landing page 497:13071 ("Group 1")
   Sampled: quote + CTA Navy #041E42, active underline #00B388,
   inactive tab logo #8AA1AB.
   ═══════════════════════════════════════════════════════════════ */

.dec-testi {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.dec-testi__panel[hidden] {
	display: none;
}

/*
 * Enhanced (JS-on) switching. All panels occupy the SAME grid cell, so the
 * block is always as tall as the tallest quote — switching no longer resizes
 * the section (the jank the client saw). Inactive panels stay in layout
 * (`visibility: hidden`, which also drops them from the a11y tree and tab
 * order) but fade to transparent, so the swap crossfades instead of snapping.
 */
.dec-testi--enhanced .dec-testi__panels {
	display: grid;
}

.dec-testi--enhanced .dec-testi__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( 6px );
	transition: opacity 0.3s ease,
	            transform 0.3s ease,
	            visibility 0s linear 0.3s; /* hide only after the fade-out */
}

.dec-testi--enhanced .dec-testi__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	z-index: 1;
	transition: opacity 0.3s ease,
	            transform 0.3s ease,
	            visibility 0s; /* show immediately */
}

.dec-testi__logo {
	display: block;
	max-width: 280px !important;
	height: auto;
	margin: 0 auto 40px;
}

.dec-testi__figure {
	margin: 0;
}

.dec-testi__quote {
	margin: 0;
	max-width: 840px;
	margin-inline: auto;
}

.dec-testi__quote p {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
	color: #041e42; /* Navy Blue */
	text-wrap: pretty;
}

.dec-testi__attr {
	margin-top: 28px;
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 14px;
	font-style: normal; /* the global figcaption style italicises; Figma is upright */
	color: #041e42;
}

.dec-testi .dec-btn-wrap {
	margin-top: 36px;
}

/* ── Logo tabs ───────────────────────────────────────────────── */

.dec-testi__tabs {
	position: relative; /* offset parent for the sliding marker */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 72px;
	border-top: 1px solid #e3e7ea;
}

/*
 * Sliding active indicator — one bar moved to the active tab by JS, not a
 * border per tab. Sits over the 1px divider like the old border-top did.
 * Only present when JS has run (`.dec-testi--enhanced`); the static border
 * below is the no-JS fallback.
 */
.dec-testi__marker {
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: #00b388; /* Regulatory Green */
	pointer-events: none;
	will-change: transform, width;
	transition: transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ),
	            width 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* First paint, resize and font-swap place the marker without sliding it. */
.dec-testi__marker.is-instant {
	transition: none;
}

/*
 * These are <button>s, so the kit's global button styling applies —
 * same trap as the header nav. Two classes outrank `.elementor-kit-6
 * button` (0,1,1) without !important. See docs/DECISIONS.md.
 */
.dec-testi .dec-testi__tab {
	flex: 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 24px 8px;
	border: 0;
	border-radius: 0;
	border-top: 2px solid transparent;
	margin-top: -1px; /* sit the indicator on the divider */
	background: none;
	background-color: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.dec-testi .dec-testi__tab:hover, .dec-testi .dec-testi__tab:focus{
	background: unset !important;
	color: unset;
	border-radius: unset !important;
}
.dec-testi__tab img {
	max-width: 140px;
	max-height: 28px;
	width: auto;
	height: auto;
	object-fit: contain;

	/*
	 * Inactive logos are muted to #8AA1AB in the design. Client logos
	 * arrive in their own brand colours, so greyscale + reduced opacity
	 * normalises them without needing a second asset per client.
	 */
	filter: grayscale( 1 );
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.dec-testi .dec-testi__tab.is-active {
	border-top-color: #00b388; /* Regulatory Green — no-JS fallback */
}

/* With the sliding marker present, drop the per-tab border. */
.dec-testi--enhanced .dec-testi__tab.is-active {
	border-top-color: transparent;
}

.dec-testi__tab.is-active img,
.dec-testi__tab:hover img {
	filter: none;
	opacity: 1;
}

.dec-testi .dec-testi__tab:focus-visible {
	outline: 2px solid #00b388;
	outline-offset: -4px;
}

@media ( max-width: 767px ) {
	.dec-testi__quote p {
		font-size: 19px;
		line-height: 28px;
	}

	.dec-testi__tabs {
		gap: 12px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dec-testi__tabs::-webkit-scrollbar {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-testi .dec-testi__tab,
	.dec-testi__tab img,
	.dec-testi__marker,
	.dec-testi--enhanced .dec-testi__panel {
		transition: none;
	}

	.dec-testi--enhanced .dec-testi__panel {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Hero overlay — Figma landing page 272:587 / 272:588 / two buttons,
   sitting over the 1440x833 hero image.
   ═══════════════════════════════════════════════════════════════ */

.dec-hero__scrim {
	position: absolute;
	inset: 0;
	background: #041e42; /* Navy Blue */
	opacity: 0;
	pointer-events: none;
}

.dec-hero__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp( 24px, 5vw, 80px );
	color: #ffffff;
}

.dec-hero__heading {
	max-width: 560px; /* Figma 272:587 is 528 wide */
	margin: 0 0 16px;
	font-family: "Manrope", sans-serif;
	font-size: 54px;
	font-weight: 400;
	line-height: 65px;
	color: #ffffff;
	text-wrap: balance;
}

/*
 * Colour needs a two-class selector: the kit's `.elementor-kit-6 h2`
 * (0,1,1) outranks single-class `.dec-hero__heading` (0,1,0) and would
 * repaint this white overlay heading in the kit's primary (black). Same
 * trap as the buttons in DECISIONS — beat it on specificity, not
 * !important. Colour only, so the responsive font-size rules (single
 * class) still apply normally.
 */
.dec-hero .dec-hero__heading {
	color: #ffffff;
}

.dec-hero__sub {
	max-width: 560px;
	margin: 0 0 32px;
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	line-height: 33px;
	color: #ffffff;
}

.dec-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * Icon above the heading — the mid-page banner variant (OEM "Proven
 * Technology"). White to read on the darkened photo.
 */
.dec-hero__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 0 20px;
	color: #ffffff;
}

.dec-hero__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.dec-hero__icon i {
	font-size: 56px;
	line-height: 1;
}

/*
 * Centred banner variant. The page hero stays left; mid-page banners
 * centre the block and its measure. The heading/sub keep their max-width
 * but centre via auto margins, and the icon centres too.
 */
.dec-hero--align-center .dec-hero__content {
	align-items: center;
	text-align: center;
	max-width: 1000px;
}

.dec-hero--align-center .dec-hero__heading,
.dec-hero--align-center .dec-hero__sub {
	margin-left: auto;
	margin-right: auto;
}

@media ( max-width: 767px ) {
	.dec-hero__heading {
		font-size: 32px;
		line-height: 38px;
	}

	.dec-hero__sub {
		font-size: 17px;
		line-height: 26px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Stats — Figma landing page 272:616 ("Frame 217")
   Three 305x172 blocks, each with a rule across the top.
   ═══════════════════════════════════════════════════════════════ */

.dec-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 122px;
	margin: 0;
	color: #041e42; /* Navy Blue */
}

/* Rule as a top border on the item — tracks the column width for free. */
.dec-stats__item {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	padding-top: 13px;
	border-top: 1px solid currentColor;
}

/*
 * Figure above label visually; DOM order stays <dt> then <dd> so screen
 * readers announce "Vessels Equipped: 900+", not a bare number.
 */
/*
 * Figures are Geist Mono Light, 81px, line-height Auto — the thin
 * monospace look in Figma (272:616). Their "hollow" appearance is the
 * light weight of the mono face, NOT a stroke. Geist Mono is already
 * loaded (the eyebrows use it) as a variable font, so weight 300 renders.
 */
.dec-stats__figure {
	order: -1;
	margin: 0;
	font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 81px;
	font-weight: 300;
	line-height: normal;
	color: inherit;
}

.dec-stats__label {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 33px;
	color: inherit;
}

@media ( max-width: 1023px ) {
	.dec-stats {
		gap: 40px;
	}

	.dec-stats__figure {
		font-size: 56px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Checklist — icon + line list in pills / card / plain containers.

   Canonical: Compliance certification pills (459:2464) — 3-col grid of
   365x63 bordered pills, outlined check_circle marker in steel, navy
   label. The widget never paints a section background; the navy scheme
   only inverts text + softens the border for use over a dark surface.
   ═══════════════════════════════════════════════════════════════ */
.dec-checklist__heading {
	margin: 0 0 24px;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 33px;
	color: #041e42; /* Navy Blue */
}

.dec-checklist--navy .dec-checklist__heading {
	color: #ffffff;
}

.dec-checklist__list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-checklist__item {
	display: flex;
	align-items: center;
	gap: 17px; /* 59px text offset − 42px icon in the design */
}

/* Pills — each item is its own bordered rounded pill. */
.dec-checklist--pills .dec-checklist__item {
	padding: 10px 20px;
	border: 1px solid #a0b3bc; /* steel hairline */
	border-radius: 12px;
}

/*
 * Glass pills — the "Why DEC Marine?" band (Figma marine 468:1740 and the
 * land-based twin). A frosted pill on the navy gradient:
 *
 *   fill    #FFFFFF at 15%
 *   stroke  #15ABE6, 1px, inside
 *   radius  10
 *   effect  background blur 25
 *
 * Those four are the authored values straight off the Figma layer panel,
 * not sampled off a render, so there is no rounding to argue about.
 * Geometry is the frame's own: 922x63 with the content inset 20/10, which
 * is the same 10px/20px padding the plain pills already use.
 *
 * ⚠️ #15ABE6 is NOT in the Elementor kit (no cyan exists there — the
 * closest is Navy Blue Mild #307BE4, which is a different hue). It is
 * hard-coded here deliberately rather than mapped to a near-miss token,
 * and flagged: if this cyan is now a brand colour it belongs in the kit.
 *
 * Built for a dark band — pair with scheme: navy. Deliberately NOT added
 * to the navy border-softening rule below, which would overwrite the cyan
 * stroke with white-25%.
 */
.dec-checklist--glass .dec-checklist__item {
	padding: 10px 20px;
	border: 1px solid #15abe6;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.15 );
	-webkit-backdrop-filter: blur( 25px );
	backdrop-filter: blur( 25px );
}

/*
 * The design's check circle is 42px, which is also where the shared 17px
 * item gap comes from (59px text offset − 42px icon). The default marker
 * renders at 28px, so this variant restores the drawn size rather than
 * changing it for every other list.
 */
.dec-checklist--glass .dec-checklist__marker {
	width: 42px;
	height: 42px;
	font-size: 42px;
	color: #ffffff;
}

/*
 * Glass PANEL — the same frosted treatment as the glass pills above, but
 * applied once to the whole block instead of to every item:
 *
 *   fill    #FFFFFF at 15%
 *   stroke  #15ABE6, 1px, inside
 *   radius  10
 *   effect  background blur 25
 *
 * Identical authored values, so the two frosted variants can sit on the same
 * band without one looking mixed.
 *
 * It borders the WRAPPER, not `.dec-checklist__list` the way `card` does —
 * that is the whole point of the variant: the heading has to sit INSIDE the
 * frosted card with the list, and the heading is a sibling of the list.
 *
 * Items stay plain: `.dec-checklist__item` has no border of its own, so
 * nothing needs unsetting. Pair with scheme: navy, which already turns the
 * heading, bullets, titles and text white. Like the glass pills, this is
 * deliberately NOT added to the navy border-softening rule below, which
 * would replace the cyan stroke with white-25%.
 *
 * ⚠️ #15ABE6 is still not in the Elementor kit — see the glass pills note.
 */
.dec-checklist--glass-panel {
	padding: 40px;
	border: 1px solid #15abe6;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.15 );
	-webkit-backdrop-filter: blur( 25px );
	backdrop-filter: blur( 25px );
}

/* Card — all items share one bordered rounded panel; column gaps tighten. */
.dec-checklist--card .dec-checklist__list {
	gap: 20px 40px;
	padding: 32px;
	border: 1px solid #a0b3bc;
	border-radius: 16px;
}

/* Navy scheme — soften borders against a dark background. */
.dec-checklist--navy.dec-checklist--pills .dec-checklist__item,
.dec-checklist--navy.dec-checklist--card .dec-checklist__list {
	border-color: rgba( 255, 255, 255, 0.25 );
}

/*
 * Marker defaults live HERE, not on the controls (see dec_icon_size in
 * checklist.php). `font-size` is carried too, because the size control also
 * sets it — icon-font markers inherit from this box.
 */
.dec-checklist__marker {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 28px;
	color: #42697a; /* Industrial Blue */
}

.dec-checklist__marker svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.dec-checklist__marker i {
	font-size: inherit;
	line-height: 1;
}

.dec-checklist__bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/*
 * The marker colour above is a hard-coded Industrial Blue and the navy
 * scheme never inverted it. On the Compliance "Measurable Reductions" band
 * — which is itself #42697A — that made the bullet the SAME colour as its
 * background, i.e. invisible. Figma renders that whole block, list included,
 * in white.
 *
 * Scoped to the bullet deliberately. The check_circle marker also inherits
 * this colour, but it sits on #041E42 navy elsewhere where it is legible,
 * and recolouring it would change 4 other pages with no evidence asking for
 * it. That one is still open.
 */
.dec-checklist--navy .dec-checklist__bullet {
	background: #ffffff;
}

.dec-checklist__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dec-checklist__title {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #041e42;
}

.dec-checklist__text {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.375;
	color: #121212; /* Carbon Black — body copy on light, per DECISIONS */
}

.dec-checklist--navy .dec-checklist__title,
.dec-checklist--navy .dec-checklist__text {
	color: #ffffff;
}

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

@media ( max-width: 767px ) {
	.dec-checklist__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ═══════════════════════════════════════════════════════════════
   Media card panel — a rounded photo with frosted navy cards floating
   over one edge, stacked. Compliance "IMO Requirements" (433:3275):
   image 524×550, cards 451 wide offset ~44px, ~11px gap.
   ═══════════════════════════════════════════════════════════════ */
.dec-mcp {
	position: relative;
}

.dec-mcp__image {
	border-radius: 16px;
	overflow: hidden;
}

.dec-mcp__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 524 / 550;
}

/*
 * Card placement (2026-08-20). Both axes are author-controllable:
 * horizontal left/centre/right, vertical top/middle/bottom.
 *
 * The centring is done with translate on BOTH axes, and a second
 * `transform` declaration REPLACES the first rather than composing with it
 * — the same trap that silently un-centred the text-image notch in 1.9.2.
 * So the two axes contribute one variable each to a single translate(),
 * and each placement class sets only its own variable. Defaults reproduce
 * the pre-2026-08-20 rendering exactly (left, vertically centred).
 */
.dec-mcp__cards {
	position: absolute;
	transform: translate( var( --dec-mcp-tx, 0 ), var( --dec-mcp-ty, 0 ) );
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 86%;
}

/*
 * `--dec-mcp-x` / `--dec-mcp-y` are the optional offset controls. Each
 * placement reads them with ITS OWN fallback, which is what keeps existing
 * instances byte-identical when the author has never touched the sliders:
 * Left/Right fall back to the design's -8% overhang, everything else to 0.
 *
 * Centre and Middle add the offset to the 50% anchor rather than replacing
 * it, so there the control reads as a nudge either side of centre. The
 * offset is in the same coordinate space as `left`/`top` (the containing
 * block), NOT the translate — mixing the two would make a percentage
 * offset resolve against the card's own width instead of the panel's.
 */

/* Horizontal — left/right overhang the image edge, centre sits inside it. */
.dec-mcp--left .dec-mcp__cards {
	left: var( --dec-mcp-x, -8% );
	right: auto;
	--dec-mcp-tx: 0;
}

.dec-mcp--right .dec-mcp__cards {
	left: auto;
	right: var( --dec-mcp-x, -8% );
	--dec-mcp-tx: 0;
}

.dec-mcp--center .dec-mcp__cards {
	left: calc( 50% + var( --dec-mcp-x, 0px ) );
	right: auto;
	--dec-mcp-tx: -50%;
}

/* Vertical — middle is the design default; top/bottom sit flush. */
.dec-mcp--v-top .dec-mcp__cards {
	top: var( --dec-mcp-y, 0px );
	bottom: auto;
	--dec-mcp-ty: 0;
}

.dec-mcp--v-middle .dec-mcp__cards {
	top: calc( 50% + var( --dec-mcp-y, 0px ) );
	bottom: auto;
	--dec-mcp-ty: -50%;
}

.dec-mcp--v-bottom .dec-mcp__cards {
	top: auto;
	bottom: var( --dec-mcp-y, 0px );
	--dec-mcp-ty: 0;
}

.dec-mcp__card {
	padding: 20px 24px;
	border-radius: 12px;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	/*
	 * Frosted Industrial Blue. CORRECTED 2026-08-20 — this was
	 * rgba(4,30,66,0.62), a frosted NAVY, which read far darker than the
	 * design. Measured, not guessed: Figma's cards (433:3626, 459:2545)
	 * render to rgb(151,173,182) composited on white, and solving per
	 * channel gives #42697A at 0.550 / 0.547 / 0.549 — i.e. Industrial
	 * Blue at exactly 55%.
	 */
	background: rgba( 66, 105, 122, 0.55 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

/*
 * Optional per-card CTA (Compliance "Leading SCR Systems", Figma 459:2545).
 * inline-flex so the shared .dec-btn arrow sits on the baseline; the top
 * margin is the card's own rhythm, since .dec-btn carries none.
 */
.dec-mcp__card .dec-mcp__card-btn {
	display: inline-flex;
	margin-top: 24px;
}

/* Two-class colour selectors — beat `.elementor-kit-6 h4` (see DECISIONS). */
.dec-mcp__card .dec-mcp__card-title {
	margin: 0 0 6px;
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.dec-mcp__card-text {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: rgba( 255, 255, 255, 0.85 );
}

/* Stack below the image on narrow viewports — no overlap. */
@media ( max-width: 767px ) {
	.dec-mcp__cards {
		position: static;
		transform: none;
		width: 100%;
		margin-top: 16px;
	}

	/*
	 * Two-class reset: the placement rules above are (0,2,0) and a media
	 * query adds no specificity, so the single-class `position: static`
	 * would not be enough to unpin them on its own.
	 */
	.dec-mcp--left .dec-mcp__cards,
	.dec-mcp--right .dec-mcp__cards,
	.dec-mcp--center .dec-mcp__cards,
	.dec-mcp--v-top .dec-mcp__cards,
	.dec-mcp--v-middle .dec-mcp__cards,
	.dec-mcp--v-bottom .dec-mcp__cards {
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		transform: none;
	}

	.dec-mcp__card {
		/* No backdrop-filter: fall back to the same hue, opaque. */
		background: #42697a;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Open positions — job rows on a navy band (Careers 557:3993).
   White text + hairline dividers; the navy band is the container's.
   ═══════════════════════════════════════════════════════════════ */
.dec-openpos__heading {
	/*
	 * 40px, not the 24 this used to carry: Figma Careers puts the heading
	 * (560:4449) bottom at y=1759 and the first row (560:4674) at y=1798,
	 * i.e. a 39px gap. Overridable via the Heading gap control.
	 */
	margin: 0 0 40px;
	font-family: "Manrope", sans-serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 40px;
	color: #ffffff;
}

/* Two-class — beat the kit heading rule (see DECISIONS). */
.dec-openpos .dec-openpos__heading {
	color: #ffffff;
}

.dec-openpos__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --dec-op-rule, #ffffff );
}

/*
 * Row metrics are Figma `560:4674` (Frame 271, 1156x73), read from the
 * component rather than eyeballed: padding 20/40/20/24, white rules top and
 * bottom, title Manrope Regular 24 (not the SemiBold 20 we had), status
 * Manrope Regular 16 in WHITE (not Geist Mono green), and a 156px gap
 * between status and arrow — the status sits well clear of the arrow, which
 * is the spacing the old 24px flex gap collapsed.
 */
.dec-openpos__row {
	position: relative; /* for the hover sweep */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 40px 20px 24px;
	border-bottom: 1px solid var( --dec-op-rule, #ffffff );
	color: #ffffff;
	text-decoration: none;
}

/*
 * Hover background — Figma is a LINEAR gradient, white with stops
 * 0%/50%/100% at alpha 0/100/0, the whole fill layer at 15% opacity. So it
 * is a soft white sweep brightest at the centre, NOT the flat darkening we
 * had. Painted on a ::before rather than `background-image` so it can fade
 * independently and cannot collide with a background set on the row.
 */
.dec-openpos__row::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ) 0%,
		rgba( 255, 255, 255, 1 ) 50%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	transition: opacity 0.2s ease;
}

a.dec-openpos__row:hover::before,
a.dec-openpos__row:focus-visible::before {
	opacity: var( --dec-op-tint, 0.15 );
}

/*
 * Keep content above the sweep, and shift BOTH groups on hover — the title
 * and the status+arrow pair move right together (Figma's hovered row).
 *
 * `transform`, not the `padding-left` this used to animate. Padding was
 * wrong twice over: it only moved the title (the end group is pinned right
 * by `justify-content: space-between`, so shrinking the content box left it
 * where it was), and animating padding reflows the row, which can re-wrap a
 * long title mid-transition. A transform moves both groups by exactly the
 * same distance, composites instead of reflowing, and — importantly — stays
 * correct when the Row-padding control changes the base padding, which a
 * `calc(24px + ...)` hover rule would silently have broken.
 */
.dec-openpos__title,
.dec-openpos__end {
	position: relative;
	z-index: 1;
	transition: transform 0.2s ease;
}

.dec-openpos a.dec-openpos__row:hover .dec-openpos__title,
.dec-openpos a.dec-openpos__row:hover .dec-openpos__end,
.dec-openpos a.dec-openpos__row:focus-visible .dec-openpos__title,
.dec-openpos a.dec-openpos__row:focus-visible .dec-openpos__end {
	transform: translateX( var( --dec-op-indent, 12px ) );
}

/*
 * ⚠️ The theme reset's `a:hover { color: #333366 }` is (0,1,1) and beat the
 * row's own (0,1,0) `color`, so a hovered row turned purple. Restating the
 * colour at (0,2,1) fixes it — same class of bug as the linkless-<a> one in
 * DECISIONS 2026-08-13, and the reason the hover looked "darker".
 */
.dec-openpos a.dec-openpos__row:hover,
.dec-openpos a.dec-openpos__row:focus-visible {
	color: #ffffff;
}

.dec-openpos a.dec-openpos__row:hover .dec-openpos__arrow,
.dec-openpos a.dec-openpos__row:focus-visible .dec-openpos__arrow {
	color: var( --dec-op-arrow-hover, #00b388 ); /* Regulatory Green */
}

.dec-openpos__title {
	flex: 1 0 0;
	min-width: 0;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: normal;
}

/* Status + arrow travel together; the big gap lives between them. */
.dec-openpos__end {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var( --dec-op-gap, 156px );
}

.dec-openpos__status {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #ffffff;
	white-space: nowrap;
}

/*
 * A "closed" position (dynamic source, "Application open" flag off): dimmed so
 * the open roles stand out. Still a link — the posting can be viewed.
 */
.dec-openpos__row--closed .dec-openpos__title,
.dec-openpos__row--closed .dec-openpos__end {
	opacity: 0.5;
}

.dec-openpos__arrow {
	display: inline-flex;
	flex-shrink: 0;
	width: var( --dec-op-arrow, 28px );
	color: #ffffff;
	transition: color 0.2s ease;
}

.dec-openpos__arrow svg {
	width: 100%;
	height: auto;
}

@media ( max-width: 767px ) {
	.dec-openpos__row {
		flex-wrap: wrap;
		row-gap: 8px;
		column-gap: 16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	/*
	 * Phone layout (Arqam): the status ("Application open") moves ABOVE the
	 * title, and the title keeps the arrow to its right. `display: contents`
	 * dissolves the status+arrow wrapper so both become direct flex children of
	 * the row and can be ordered independently — the status takes a full-width
	 * first line, the title + arrow share the line below.
	 */
	.dec-openpos__end {
		display: contents;
	}

	.dec-openpos__status {
		order: -1;
		flex: 0 0 100%;
		white-space: normal;
	}

	.dec-openpos__title {
		order: 0;
	}

	.dec-openpos__arrow {
		order: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-openpos__row::before,
	.dec-openpos__title,
	.dec-openpos__end,
	.dec-openpos__arrow {
		transition: none;
	}

	/* No slide at all — the sweep and arrow colour still carry the state. */
	.dec-openpos a.dec-openpos__row:hover .dec-openpos__title,
	.dec-openpos a.dec-openpos__row:hover .dec-openpos__end {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Download list — green text links (Code-of-Conduct 505:13731).
   ═══════════════════════════════════════════════════════════════ */
.dec-downloads__lead {
	margin: 0 0 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #121212;
	max-width: 760px;
}

.dec-downloads__label {
	margin: 0 0 12px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #041e42;
}

.dec-downloads__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.dec-downloads__link {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #00b388; /* Regulatory Green */
	text-decoration: none;
}

a.dec-downloads__link:hover {
	text-decoration: underline;
}

.dec-downloads__link--nolink {
	color: #42697a; /* Industrial Blue — link target still pending */
	cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   Download card — ISO certificate cards (Figma 285:1033/1043, 288×100).
   Filled Industrial-Blue panel: bold title + subtitle + download icon
   top-right; the whole card is the download link.
   ═══════════════════════════════════════════════════════════════ */
.dec-dlcards {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
}

.dec-dlcard {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	min-height: 100px;
	padding: 16px 16px 18px;
	border-radius: 16px;
	background: var( --dec-dlcard-bg, var( --e-global-color-1a36e19, #42697a ) ); /* Industrial Blue */
	color: var( --dec-dlcard-text, #ffffff );
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.dec-dlcard__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dec-dlcard__title {
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
}

.dec-dlcard__subtitle {
	margin-top: 14px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
}

.dec-dlcard__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 20px;
	color: var( --dec-dlcard-icon, #ffffff );
}

.dec-dlcard__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

/*
 * Lift + slightly deeper fill on hover — only for real links. The
 * `color` is restated (0,2,1) so the theme reset's `a:hover` (0,1,1)
 * can't repaint the white text (same trap as the buttons).
 */
a.dec-dlcard:hover,
a.dec-dlcard:focus-visible {
	transform: translateY( -2px );
	background: var( --dec-dlcard-bg-hover, #000 ); /* Industrial Blue, deeper */
	color: var( --dec-dlcard-text, #ffffff );
}

a.dec-dlcard:focus-visible {
	outline: 2px solid #00b388; /* Regulatory Green */
	outline-offset: 3px;
}
a.dec-dlcard:hover .dec-dlcard__icon,
a.dec-dlcard:focus-visible .dec-dlcard__icon{
	color: var( --dec-dlcard-icon, #00b388 );
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-dlcard {
		transition: none;
	}

	a.dec-dlcard:hover,
	a.dec-dlcard:focus-visible {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Rich text — constrained long-form prose (Privacy / posting / article).
   ═══════════════════════════════════════════════════════════════ */
.dec-richtext {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #121212;
}

.dec-richtext h2,
.dec-richtext h3,
.dec-richtext h4 {
	color: #041e42; /* Navy Blue */
	margin: 2em 0 0.5em;
	line-height: 1.25;
}

.dec-richtext h3 {
	font-size: 24px;
}

.dec-richtext > :first-child {
	margin-top: 0;
}

.dec-richtext p {
	margin: 0 0 1em;
}

.dec-richtext ul,
.dec-richtext ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.dec-richtext li {
	margin: 0 0 0.4em;
}

.dec-richtext a {
	color: #00b388;
}

/* ═══════════════════════════════════════════════════════════════
   Featured image — content-width rounded image + caption (article).
   ═══════════════════════════════════════════════════════════════ */
.dec-featimg {
	margin: 0;
}

.dec-featimg__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.dec-featimg__caption {
	margin: 12px 0 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #42697a; /* Industrial Blue */
}

/* ═══════════════════════════════════════════════════════════════
   Icon Headline — heading + side/top icon + optional text, optionally
   a link. Colours/sizes come from Elementor selectors (see the widget).
   ═══════════════════════════════════════════════════════════════ */
.dec-iconhead {
	display: flex;
	gap: 24px;
	text-decoration: none;
	align-items: flex-start; /* default; the vertical-align control overrides via {{WRAPPER}} */
}

.dec-iconhead__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 32px;
	height: 32px;
	color: #041e42; /* Navy Blue */
}

.dec-iconhead__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.dec-iconhead__icon i {
	font-size: inherit;
	line-height: 1;
}

/*
 * Long-arrow preset (arrow_long): a wide 44×12 arrow. The Icon size control
 * forces the box square (its generated CSS is (0,4,0) — not worth
 * out-specifying), so instead of fighting the box, we stop the flex
 * container from STRETCHING the svg and let it keep its 44:12 ratio,
 * centred in the box. Result: a long, thin arrow sized by the Icon size
 * slider (which becomes the arrow length). No !important, no war.
 */
.dec-iconhead__icon--arrow-long {
	align-items: center;
}

.dec-iconhead__icon--arrow-long svg {
	height: auto;
}

/*
 * The 12px between heading and text is a GAP, not a bottom margin on the
 * heading. As a margin it was part of the body's box, so a heading-only
 * instance measured 12px taller than its text — and because the wrapper
 * centres the body against the icon, the visible heading sat 6px high
 * (measured on /products/ "Click to enlarge": heading centre 1681 vs icon
 * centre 1687). A gap only exists BETWEEN children, so it disappears on its
 * own when there is nothing to separate.
 */
.dec-iconhead__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Two-class selectors so this DEFAULT style beats the kit's
 * `.elementor-kit-6 hN` (0,1,1) — otherwise the heading falls back to the
 * kit's tag size/weight (e.g. H3 24/400) instead of the intended 36/700.
 * The Heading-typography group control emits {{WRAPPER}} .dec-iconhead__heading
 * (also 0,2,0) later in source order, so a picked Global Font still wins.
 */
.dec-iconhead .dec-iconhead__heading {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	color: #041e42;
}

.dec-iconhead .dec-iconhead__text {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #121212; /* Carbon Black */
}

/* Icon on the RIGHT (reference): icon top-right, aligned with the heading,
   text flowing below within the body. */
.dec-iconhead--right {
	flex-direction: row;
}
.dec-iconhead--right .dec-iconhead__body { order: 0; flex: 1; }
.dec-iconhead--right .dec-iconhead__icon { order: 1; }

.dec-iconhead--left {
	flex-direction: row;
}
.dec-iconhead--left .dec-iconhead__icon { order: 0; }
.dec-iconhead--left .dec-iconhead__body { order: 1; flex: 1; }

.dec-iconhead--top {
	flex-direction: column;
}

/* Link affordance — nudge the icon on hover. */
a.dec-iconhead .dec-iconhead__icon {
	transition: transform 0.2s ease;
}
a.dec-iconhead:hover .dec-iconhead__icon {
	transform: translateX( 4px );
}

/* ═══════════════════════════════════════════════════════════════
   Utility: .dec-gradient-band — the deep navy radial band
   Figma Desktop_Careers `560:4268` ("Rectangle 211", 1440x551),
   used behind the Open Positions block.

   WHY AN INLINE SVG AND NOT radial-gradient()
   Figma's fill is a radial gradient with a gradientTransform of
   matrix(142.8 46.241 -122.47 136.87 96 99.396) on a r=10 circle. Decoded
   that is an ELLIPSE centred at 6.67% / 18.04%, semi-axes 1501 x 1837px,
   **rotated 17.94 degrees**. CSS radial-gradient() has no rotation
   parameter, and dropping the rotation is not a rounding error: modelling
   the same ellipse axis-aligned was measured at a mean 7/255 and a peak
   **22.6/255** channel deviation (worst at the top-right corner) — plainly
   visible across a band this size. So the gradient is carried as an inline
   SVG, which reproduces the transform exactly.

   The SVG is left UNENCODED (only `#` -> `%23`, which a data URI requires)
   so the stops stay readable and editable in this file. `preserveAspect
   Ratio='none'` + `background-size: 100% 100%` makes it stretch to the
   element exactly as the Figma rectangle does.

   The 7 stops are Figma's own output: the picker shows 3
   (0% #4B6878 / 50% #041E42 / 100% #4B6878) and Figma emits the 4
   intermediates to linearise its interpolation. Keeping all 7 matches the
   design; keeping only 3 would band differently.

   Drop-anywhere, like .dec-grid-section: paste into any Elementor
   element's CSS Classes field.
   ═══════════════════════════════════════════════════════════════ */
.dec-gradient-band {
	background-color: #041e42; /* fallback + matches the kit Navy */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 551' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(142.8 46.241 -122.47 136.87 96 99.396)'><stop offset='0' stop-color='rgb(75,104,120)'/><stop offset='0.2524' stop-color='rgb(40,67,93)'/><stop offset='0.37861' stop-color='rgb(22,49,80)'/><stop offset='0.50481' stop-color='rgb(4,30,66)'/><stop offset='0.62861' stop-color='rgb(22,49,80)'/><stop offset='0.7524' stop-color='rgb(40,67,93)'/><stop offset='1' stop-color='rgb(75,104,120)'/></radialGradient></defs><rect width='100%' height='100%' fill='url(%23g)'/></svg>");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════════════════════════
   Image Band — full-bleed photo + floating glass card
   Figma Desktop_Products 494:3039 (band 1440x849) + 494:3040 (card
   510x422 at x=142). Card: rgba(4,30,66,.5) over a 25px backdrop blur,
   10px radius, 40/30 padding, 36px stack gap, white Manrope.
   ═══════════════════════════════════════════════════════════════ */

.dec-imageband {
	position: relative;
	display: flex;
	min-height: var( --dec-ib-height, 849px );
}

/*
 * The photo is the widget's own background — unlike section backgrounds,
 * which stay on the Elementor container (see DECISIONS). Absolute rather
 * than a CSS background-image so it stays a real <img>: srcset, lazy
 * loading and alt all keep working.
 */
.dec-imageband__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.dec-imageband__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The band is full-bleed but the card must line up with the boxed page
 * column, exactly as .dec-expand__content does: span the band, centre a
 * 1440 box, keep the standard 24px gutter. That puts the card's left edge
 * at x=142 on a 1440 canvas, which is the Figma placement.
 */
.dec-imageband__inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	align-items: center;
	justify-content: flex-start;
}

.dec-imageband__card {
	display: flex;
	flex-direction: column;
	width: 510px;
	max-width: 100%;
	gap: 36px;
	padding: 40px 30px;
	border-radius: 10px;
	background-color: rgba( 4, 30, 66, 0.5 );
	-webkit-backdrop-filter: blur( 25px );
	backdrop-filter: blur( 25px );
	color: #ffffff;
}

.dec-imageband__heading {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 40px;
	color: #ffffff;
	text-wrap: balance;
}

/* Two-class — the kit styles every h2/h3 (see DECISIONS). */
.dec-imageband .dec-imageband__heading {
	color: #ffffff;
}

.dec-imageband__body {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #ffffff;
}

.dec-imageband__body > :first-child {
	margin-top: 0;
}

.dec-imageband__body > :last-child {
	margin-bottom: 0;
}

.dec-imageband__body p {
	margin: 0 0 1rem;
	font: inherit;
	color: inherit;
}

.dec-imageband__body a {
	color: inherit;
	text-decoration: underline;
}

.dec-imageband__body ul,
.dec-imageband__body ol {
	margin: 0 0 1rem;
	padding-left: 1.25em;
}

.dec-imageband__btn {
	margin: 0;
}

@media ( max-width: 767px ) {
	/* A blurred panel over a photo is unreadable at phone size; let the card
	   run the column width and lean on the fill instead of the blur. */
	.dec-imageband__card {
		width: 100%;
	}

	/* 20px side gutter on phones, matching the rest of the mobile pass (was 24). */
	.dec-imageband__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ══ Gravity Forms — DEC theme ═══════════════════════════════════════
 *
 * Gravity Forms 2.x ("orbital") ships its own palette and injects it as
 * custom properties on the wrapper ITSELF, at
 *
 *     #gform_wrapper_N[data-form-index="0"].gform-theme
 *
 * which is (1,2,0) — an ID. No class-based rule can outrank that, so the
 * variable overrides below carry `!important`. That is the documented way
 * to retheme GF rather than a shortcut: we re-declare Gravity's OWN
 * tokens, so every control it renders — including field types this site
 * doesn't use yet — follows the DEC palette instead of Gravity blue.
 *
 * Colours reference the Elementor kit globals per CLAUDE.md; the literal
 * after each var is only the fallback.
 *
 * TWO SCHEMES, and they differ by exactly three custom properties:
 *   (default)           dark ink on a light background   → Figma 663:5310
 *   .dec-form--on-dark  white ink over navy/gradient     → Figma 663:4632
 * Put `.dec-form--on-dark` on ANY ancestor — normally the Elementor
 * container that already carries `.dec-gradient-band`.
 *
 * The submit button is restyled to match `.dec-btn` exactly (same 16/32
 * padding, 4px radius, Manrope 13/700, same shadow and hover swap). GF
 * renders a real <button>, so the arrow is a masked ::after using the
 * same path as DECWidgets::arrow_svg() — it cannot be an inline <svg>.
 */

.gform_wrapper.gform-theme {
	/* Gravity's own tokens, repointed at the kit. */
	--gf-color-primary: var( --e-global-color-0f4020e, #00b388 ) !important;              /* Regulatory Green */
	--gf-color-primary-rgb: 0, 179, 136 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: var( --e-global-color-1a36e19, #42697a ) !important;       /* Industrial Blue */
	--gf-color-primary-lighter: var( --e-global-color-56c7b90, #44e4be ) !important;      /* Green Mild */
	--gf-ctrl-border-color-focus: var( --e-global-color-0f4020e, #00b388 ) !important;
	--gf-ctrl-shadow-color-focus: rgba( 0, 179, 136, 0.3 ) !important;
	--gf-local-outline-color: rgba( 0, 179, 136, 0.3 ) !important;
	--gf-radius: 4px !important;                                                          /* matches .dec-btn */

	/* DEC scheme — the ONLY things the two schemes swap. */
	--dec-form-ink: #121212;                                                              /* = .dec-text-image--light body */
	--dec-form-rule: #121212;
	--dec-form-btn-bg: var( --e-global-color-accent, #041e42 );                           /* Navy Blue */
	--dec-form-btn-ink: #ffffff;
	--dec-form-btn-arrow: currentColor;
	--dec-form-btn-shadow: 0 2px 4px rgba( 136, 194, 147, 0.2 ), 0 5px 15px rgba( 37, 84, 97, 0.15 );

	/* Same arrow path as DECWidgets::arrow_svg(). */
	--dec-form-arrow: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0.658545 6.65854H8.01449L4.80079 9.87224C4.54396 10.1291 4.54396 10.5505 4.80079 10.8074C5.05762 11.0642 5.47251 11.0642 5.72934 10.8074L10.0621 6.46756C10.3189 6.21073 10.3189 5.79584 10.0621 5.53901L5.73593 1.19265C5.61411 1.07083 5.4489 1.00171 5.27709 1.00171C5.10528 1.00171 4.94007 1.07083 4.81825 1.19265C4.56142 1.44948 4.56142 1.86437 4.81825 2.1212L8.01449 5.34149H0.658545C0.29538 5.34149 0 5.63687 0 6.00002C0 6.36316 0.29538 6.65854 0.658545 6.65854Z'/%3E%3C/svg%3E" );

	/* Label colours go through Gravity's tokens rather than per-rule. */
	--gf-ctrl-label-color-primary: var( --dec-form-ink ) !important;
	--gf-ctrl-label-color-secondary: var( --dec-form-ink ) !important;
	--gf-ctrl-label-color-req: var( --dec-form-ink ) !important;
	--gf-ctrl-desc-color: var( --dec-form-ink ) !important;
}

/* ── On-dark scheme ─────────────────────────────────────────── */
.dec-form--on-dark .gform_wrapper.gform-theme {
	--dec-form-ink: #ffffff;
	--dec-form-rule: #ffffff;
	--dec-form-btn-bg: #ffffff;
	color: #fff;
	--dec-form-btn-ink: var( --e-global-color-accent, #041e42 );                          /* Navy Blue text */
	--dec-form-btn-arrow: var( --e-global-color-1a36e19, #42697a );                       /* Industrial Blue arrow */
	--dec-form-btn-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
}

/* ── Layout ─────────────────────────────────────────────────── */
.gform_wrapper.gform-theme .gform_fields {
	grid-row-gap: 15px;
}

.gform_wrapper.gform-theme .gform_heading .gform_description,
.gform_wrapper.gform-theme .gfield_description {
	color: var( --dec-form-ink );
}

/* ── Labels ─────────────────────────────────────────────────── */
.gform_wrapper.gform-theme .gform-field-label {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var( --dec-form-ink );
}

.gform_wrapper.gform-theme .gform-field-label a,
.gform_wrapper.gform-theme .gfield_description a {
	color: inherit;
	text-decoration: underline;
}
.gform_wrapper.gform-theme .gform_fields  .gfield--type-html{
	font-size: 12px;
}
.gform_wrapper.gform-theme .gform_fields  .gfield--type-html a{
	color: #00b388;
}
/*
 * Gravity appends a visible "(Required)" to required labels. The DEC labels
 * already carry their own "*" (it is typed into the field label, and that is
 * what Figma shows), so the two together read "Full name* (Required)".
 *
 * Hidden VISUALLY ONLY — not `display: none` — so screen readers still
 * announce it. Delete this block if the written "(Required)" is wanted back;
 * the asterisk in the label would then be the thing to remove.
 */
.gform_wrapper.gform-theme .gfield_required {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * Underlined fields. `border: 0` then a single bottom rule — Gravity sets
 * a full box border plus a radius on every control, so all four sides have
 * to be cleared before the rule is drawn.
 */
.gform_wrapper.gform-theme .gform_fields input[type="text"],
.gform_wrapper.gform-theme .gform_fields input[type="email"],
.gform_wrapper.gform-theme .gform_fields input[type="tel"],
.gform_wrapper.gform-theme .gform_fields input[type="url"],
.gform_wrapper.gform-theme .gform_fields input[type="number"],
.gform_wrapper.gform-theme .gform_fields input[type="password"],
.gform_wrapper.gform-theme .gform_fields textarea,
.gform_wrapper.gform-theme .gform_fields select {
	border: 0 !important;
	border-bottom: 1px solid var( --dec-form-rule ) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var( --dec-form-ink ) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-family: "Manrope", sans-serif;
}

.gform_wrapper.gform-theme .gform_fields input::placeholder,
.gform_wrapper.gform-theme .gform_fields textarea::placeholder {
	color: var( --dec-form-ink );
	opacity: 0.6;
}

/*
 * Focus. The rule thickens and turns Regulatory Green — a VISIBLE focus
 * state, deliberately: the CSS this replaces set `outline: none` on every
 * control, which left keyboard users with no indicator at all.
 */
.gform_wrapper.gform-theme .gform_fields input:focus,
.gform_wrapper.gform-theme .gform_fields textarea:focus,
.gform_wrapper.gform-theme .gform_fields select:focus {
	border-bottom-color: var( --e-global-color-0f4020e, #00b388 ) !important;
	box-shadow: 0 1px 0 0 var( --e-global-color-0f4020e, #00b388 ) !important;
	outline: none !important;
}

/* ── Consent / choice controls ──────────────────────────────── */
.gform_wrapper.gform-theme input[type="checkbox"],
.gform_wrapper.gform-theme input[type="radio"] {
	accent-color: var( --e-global-color-0f4020e, #00b388 );
	border-color: var( --dec-form-rule ) !important;
	background-color: transparent !important;
}

.gform_wrapper.gform-theme .gfield--type-consent .gform-field-label {
	color: var( --dec-form-ink );
}

/* ── Submit button — mirrors .dec-btn ───────────────────────── */
/*
 * Two-class specificity plus !important: the kit styles every <button>,
 * and Gravity styles `.gform_button` from an ID-scoped block. This is the
 * fourth framework-beats-widget case in this file — see the note above
 * .dec-text-image__divider.
 */
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper.gform-theme .gform-footer .gform_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px !important; /* GF sets its own button icon gap (6px) — see the ::after note */
	width: auto !important;
	padding: 16px 32px !important;
	border: 0 !important;
	border-radius: 4px !important;
	font-family: "Manrope", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	background-color: var( --dec-form-btn-bg ) !important;
	color: var( --dec-form-btn-ink ) !important;
	box-shadow: var( --dec-form-btn-shadow ) !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/*
 * The arrow. A masked ::after, because GF renders plain text in <button>.
 *
 * `content` NEEDS !important, and that was established by experiment, not
 * assumed: an identical selector injected later in the cascade still lost,
 * while the same rule with !important won — so Gravity resets the button's
 * generated content with !important of its own. Note it does NOT show up in
 * document.styleSheets, so a scripted cascade audit reports "no competing
 * rule" and lies. Every other property here applies without !important;
 * only `content` and the gap actually need it.
 */
.gform_wrapper.gform-theme .gform_footer .gform_button::after,
.gform_wrapper.gform-theme .gform-footer .gform_button::after {
	content: "" !important;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: var( --dec-form-btn-arrow );
	-webkit-mask: var( --dec-form-arrow ) center / contain no-repeat;
	mask: var( --dec-form-arrow ) center / contain no-repeat;
	transition: transform 0.18s ease;
}

/* Hover — Navy → Industrial Blue, the same swap .dec-btn--primary makes. */
.gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme .gform-footer .gform_button:hover,
.gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible,
.gform_wrapper.gform-theme .gform-footer .gform_button:focus-visible {
	background-color: var( --e-global-color-1a36e19, #42697a ) !important;
	color: #ffffff !important;
}

.gform_wrapper.gform-theme .gform_footer .gform_button:hover::after,
.gform_wrapper.gform-theme .gform-footer .gform_button:hover::after,
.gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible::after,
.gform_wrapper.gform-theme .gform-footer .gform_button:focus-visible::after {
	background-color: #ffffff;
	transform: translateX( 3px );
}

/*
 * Figma puts the button inline with the consent checkbox; Gravity emits
 * the footer as its own block and Arqam's call is not to fight it. Right
 * aligning is the one line that gets it back to the design's position.
 */
.gform_wrapper.gform-theme .gform_footer,
.gform_wrapper.gform-theme .gform-footer {
	justify-content: flex-end;
	padding-top: 8px;
}

/* ── Validation ─────────────────────────────────────────────── */
/*
 * Gravity's error red is legible on white but muddy on navy, so the
 * on-dark scheme lightens it rather than leaving an unreadable message.
 */
.dec-form--on-dark .gform_wrapper.gform-theme .gfield_validation_message,
.dec-form--on-dark .gform_wrapper.gform-theme .validation_message {
	color: #ffb4a8;
	background-color: transparent;
	border: 0;
}

.dec-form--on-dark .gform_wrapper.gform-theme .gfield_error .gform-field-label {
	color: var( --dec-form-ink );
}

@media ( prefers-reduced-motion: reduce ) {
	.gform_wrapper.gform-theme .gform_footer .gform_button::after,
	.gform_wrapper.gform-theme .gform-footer .gform_button::after {
		transition: none;
	}

	.gform_wrapper.gform-theme .gform_footer .gform_button:hover::after,
	.gform_wrapper.gform-theme .gform-footer .gform_button:hover::after {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Breadcrumbs — sits in the HEADER template, so every page gets it
   without being touched. The widget renders nothing on the front
   page, so no condition is needed there either.
   ═══════════════════════════════════════════════════════════════ */

.dec-breadcrumbs {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 18px 0px;
}

.dec-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

.dec-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dec-breadcrumbs__link {
	color: #00b388; /* Regulatory Green */
	text-decoration: none;
}

.dec-breadcrumbs__link:hover,
.dec-breadcrumbs__link:focus-visible {
	text-decoration: underline;
}

/* A mega-menu heading: part of the path, but it never went anywhere. */
.dec-breadcrumbs__step,
.dec-breadcrumbs__current,
.dec-breadcrumbs__sep {
	color: #6b7b85; /* muted steel */
}

.dec-breadcrumbs__current {
	color: #42697a; /* Industrial Blue */
}

/*
 * OVER AN IMAGE HERO.
 *
 * Six pages open with `dec-hero` and the rest with a text intro. Rather than
 * a negative margin set by hand on each of those six — six chances to miss
 * one, and again on every page added later — `:has()` detects the hero and
 * lifts the crumbs onto the image automatically. `:has()` is already relied
 * on in this file (see `.e-con:has( .dec-text-image--full )`).
 *
 * The scrim is deliberate: white text on an uncontrolled photograph is a
 * contrast gamble, and the hero's own overlay does not extend this high.
 */
body:has( .dec-hero ) .dec-breadcrumbs {
	position: relative;
	z-index: 2;
	margin-bottom: -58px;
}

body:has( .dec-hero ) .dec-breadcrumbs__list {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 4px;
	background: rgba( 4, 30, 66, 0.45 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

body:has( .dec-hero ) .dec-breadcrumbs__link {
	color: #ffffff;
}

body:has( .dec-hero ) .dec-breadcrumbs__step,
body:has( .dec-hero ) .dec-breadcrumbs__current,
body:has( .dec-hero ) .dec-breadcrumbs__sep {
	color: rgba( 255, 255, 255, 0.75 );
}

@media ( max-width: 767px ) {
	.dec-breadcrumbs {
		padding: 0; /* Arqam: no breadcrumb padding on phones */
	}

	.dec-breadcrumbs__list {
		font-size: 13px;
	}

	/* Stacked heroes are short; overlapping one would cover the headline. */
	body:has( .dec-hero ) .dec-breadcrumbs {
		margin-bottom: 0;
	}

	body:has( .dec-hero ) .dec-breadcrumbs__list {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body:has( .dec-hero ) .dec-breadcrumbs__link {
		color: #00b388;
	}

	body:has( .dec-hero ) .dec-breadcrumbs__step,
	body:has( .dec-hero ) .dec-breadcrumbs__current,
	body:has( .dec-hero ) .dec-breadcrumbs__sep {
		color: #6b7b85;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Hotspots — diagram with clickable points (Figma Component 16).
   The chips in the design are 40x40 rounded squares; positions come
   from that component's own coordinates, converted to percentages,
   so the artwork can be re-exported at any size without moving one.
   ═══════════════════════════════════════════════════════════════ */

.dec-hotspots {
	/*
	 * 40 / 804 of the frame — the chip's own proportion in the design.
	 * Clamped so it never becomes untappable on a narrow phone or absurd on a
	 * very wide screen. An instance can override with a fixed px via the
	 * Marker size control.
	 */
	--dec-hotspot-size: clamp( 24px, 4.98cqw, 44px ); /* 24 = WCAG 2.5.8 minimum target */
	width: 100%;
}

/*
 * A size container, so the markers can be expressed in `cqw` — 1% of the
 * rendered image width. That is the whole trick: the chips are 40px inside an
 * 804px Figma frame, but the image renders at whatever width the column gives
 * it (651px on desktop, far less on a phone). Fixed pixels made every marker
 * ~23% oversized on desktop and worse as the image shrank. In `cqw` they hold
 * the design's proportion at any size, exactly like the percentage positions.
 */
.dec-hotspots__frame {
	position: relative;
	display: block;
	width: 100%;
	container-type: inline-size;
}

.dec-hotspots__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Leader lines — the Figma callout style: the marker sits in the whitespace
 * and a thin line runs to the component. One SVG overlays the whole frame in a
 * 0-100 space (so line endpoints are the same percentages the markers use),
 * stretched with `preserveAspectRatio: none`. `non-scaling-stroke` is what
 * keeps the line an even hairline despite that non-uniform stretch — without
 * it a line would be thick along one axis and thin along the other.
 */
.dec-hotspots__leaders {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.dec-hotspots__leader {
	fill: none;
	stroke: var( --dec-hotspot-leader, rgba( 255, 255, 255, 0.55 ) );
	stroke-width: var( --dec-hotspot-leader-width, 1.5px );
}

/*
 * The dot at the component end. A separate element rather than an SVG circle:
 * inside the stretched SVG a circle becomes an ellipse, but a square HTML box
 * sized in cqw stays round at any width.
 */
.dec-hotspots__dot {
	position: absolute;
	transform: translate( -50%, -50% );
	width: clamp( 4px, 0.9cqw, 8px );
	height: clamp( 4px, 0.9cqw, 8px );
	border-radius: 50%;
	background: var( --dec-hotspot-leader, rgba( 255, 255, 255, 0.55 ) );
	pointer-events: none;
	z-index: 1;
}

/*
 * Points are placed by their CENTRE — the translate is what makes a
 * percentage coordinate mean "this component", not "the top-left corner of a
 * box near it". Without it every marker sits down and right of its target by
 * half its own size, which reads as a systematic misalignment rather than a
 * bug and is easy to "fix" by dragging all sixteen.
 */
.dec-hotspots__point {
	position: absolute;
	transform: translate( -50%, -50% );
	/* Marker gap between marker and its label (label is positioned off it). */
	--dec-hotspot-gap: clamp( 6px, 1.5cqw, 14px );
	/* Above the leader SVG + dots (z-index 1), so the marker caps its own line. */
	z-index: 2;
	/* Width shrinks to the marker alone — see the label note below. */
	width: var( --dec-hotspot-size );
	height: var( --dec-hotspot-size );
}

/*
 * Two-class selector, and every box property restated. The Elementor kit
 * styles ALL buttons via `.elementor-kit-6 button` at (0,1,1) — navy fill,
 * 15/30 padding, 3px radius — which beats a single class and had this marker
 * rendering 60px instead of 40. Same trap the nav's panel triggers hit; see
 * the note on `.dec-nav .dec-nav__link`.
 */
.dec-hotspots .dec-hotspots__marker {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
	display: grid;
	place-items: center;
	width: var( --dec-hotspot-size );
	height: var( --dec-hotspot-size );
	padding: 0;
	border: 0;
	/* 10 / 40 in the design — a proportion, so it survives any marker size. */
	border-radius: 25%;
	/*
	 * Figma: fill #FFFFFF at 60%, effect Background blur 10 (uniform). Not the
	 * opaque chip this first shipped with — the frosted fill is what lets the
	 * drawing read through the marker instead of punching a hole in it.
	 */
	background: rgba( 255, 255, 255, 0.6 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.dec-hotspots .dec-hotspots__marker:hover {
	background: rgba( 255, 255, 255, 0.85 );
	transform: scale( 1.06 );
}

.dec-hotspots .dec-hotspots__marker:focus-visible {
	outline: 2px solid #00b388; /* Regulatory Green */
	outline-offset: 3px;
}

/*
 * The + is drawn, not a glyph: an icon font would need loading and an SVG per
 * marker would be sixteen copies of the same shape. Two bars, and the open
 * state simply hides the upright one — which is what makes + become −.
 */
.dec-hotspots__glyph {
	position: relative;
	display: block;
	/* 14 / 40 of the marker, so the + never looks heavy at a small size. */
	width: 35%;
	height: 35%;
}

.dec-hotspots__glyph::before,
.dec-hotspots__glyph::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: #041e42; /* Navy Blue */
}

.dec-hotspots__glyph::before {
	width: 100%;
	height: 2px;
}

.dec-hotspots__glyph::after {
	width: 2px;
	height: 100%;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.dec-hotspots__point.is-open .dec-hotspots__glyph::after {
	opacity: 0;
	transform: rotate( 90deg );
}

.dec-hotspots .dec-hotspots__point.is-open .dec-hotspots__marker {
	background: rgba( 255, 255, 255, 0.85 );
}

/*
 * The label is INLINE beside the marker, not a floating tooltip — that is the
 * difference that made this a custom widget rather than Elementor's hotspot.
 * `visibility` rather than `display` so the transition has something to
 * animate, and `pointer-events` off so a hidden label can never intercept a
 * click meant for the drawing underneath.
 */
.dec-hotspots__label {
	/*
	 * Absolutely positioned beside the marker, NOT a flex sibling of it. A
	 * `visibility: hidden` label still reserves its width in normal flow, so a
	 * flex row [label · marker] is centred on the point's coordinate and the
	 * marker ends up pushed half a label-width off it — which also left the
	 * leader line starting where the marker was supposed to be, not where it is.
	 * Taking the label out of flow lets the marker sit exactly on its point.
	 */
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	flex-direction: column;
	gap: 4px;
	/*
	 * The client wants every title on ONE line (see .dec-hotspots__title). The
	 * old min(220px,28cqw) cap forced long labels — and, on a phone where 28cqw
	 * collapses to ~90px, every word — onto its own line. The box now grows to
	 * the text; the cap is only a pathological backstop (a title longer than
	 * this still wraps rather than run off-screen). hotspots.js picks the side
	 * with room so a wide one-line label never overflows the viewport.
	 */
	max-width: min( 92vw, 340px );
	/*
	 * Frosted backing. Sixteen points on a dense drawing means a label can open
	 * over a busy part of the diagram however carefully the side is chosen — the
	 * backing keeps it readable there instead of relying on side alone. Navy at
	 * 55% + blur matches the marker's own frosted treatment; a page can restyle
	 * it with --dec-hotspot-label-bg.
	 */
	padding: clamp( 5px, 1cqw, 9px ) clamp( 8px, 1.6cqw, 13px );
	border-radius: 6px;
	background: var( --dec-hotspot-label-bg, rgba( 4, 30, 66, 0.55 ) );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.dec-hotspots__point--right .dec-hotspots__label {
	left: 100%;
	margin-left: var( --dec-hotspot-gap );
	align-items: flex-start;
	text-align: left;
}

.dec-hotspots__point--left .dec-hotspots__label {
	right: 100%;
	margin-right: var( --dec-hotspot-gap );
	align-items: flex-end;
	text-align: right;
}

/*
 * Lift the OPEN point (marker + its label) above every other point so a dense
 * neighbour's marker can't sit on top of the label. All points share z-index 2,
 * so without this the stacking falls to DOM order and a later marker wins —
 * which is why a label read as "Injector [+]s Assembly". All devices, not just
 * mobile, since the overlap can happen at any width.
 */
.dec-hotspots__point.is-open {
	z-index: 3;
}

.dec-hotspots__point.is-open .dec-hotspots__label {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.dec-hotspots__title {
	font-family: "Geist Mono", ui-monospace, monospace;
	/* Scales with the diagram, but never below readable. */
	font-size: clamp( 11px, 1.87cqw, 15px );
	line-height: 1.3;
	color: #00b388; /* Regulatory Green */
	/*
	 * ONE LINE (client request). The earlier `normal` wrapped long titles to
	 * keep them inside the old narrow backing, but on a phone that became one
	 * word per line. The backing now sizes to the text (see the label's
	 * max-width) so nowrap reads as a single line; overflow-wrap only bites if
	 * a future title is wider than the 340px backstop.
	 */
	white-space: nowrap;
	overflow-wrap: break-word;
}

.dec-hotspots__text {
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #ffffff;
}

@media ( prefers-reduced-motion: reduce ) {
	.dec-hotspots__marker,
	.dec-hotspots__label,
	.dec-hotspots__glyph::after {
		transition: none;
	}
}

/*
 * Stacked layouts (tablet + mobile): drop the size container.
 *
 * On /products/ the diagram sits in a 2-column grid that stacks to one column
 * at ≤1024. `.dec-hotspots__frame`'s `container-type: inline-size` then
 * COLLAPSES to 0 height inside the stacked grid's auto-track — the container
 * query breaks the image's intrinsic block size while the grid sizes the row,
 * so the row (and the widget) reserve no height and the absolutely-positioned
 * markers spill onto the whole next section. (On desktop the 2-col grid gives
 * the row its height from the text column, so it never shows there.)
 *
 * Turning the container off restores the height; the markers then lose their
 * `cqw` basis, so re-express the size against the viewport — at these widths
 * the frame is the viewport minus the 20px gutters, so 4.98vw lands within a
 * pixel or two of the 4.98cqw it replaces. Positions and leaders are already
 * percentage-based, so they are unaffected.
 */
@media ( max-width: 1024px ) {
	.dec-hotspots__frame {
		container-type: normal;
	}

	.dec-hotspots {
		--dec-hotspot-size: clamp( 24px, 4.98vw, 44px );
	}
}