/* ==========================================================================
   DotLynx 2027 - motion layer (theme 3.1)

   Progressive enhancement only. `.dlx-js` is added by motion.js; `.dlx-motion`
   is added in <head> (so a pinned slider never shifts the layout) unless the
   visitor prefers reduced motion, and is withdrawn if motion.js never starts.
   Without either class the page in dotlynx.css is complete.
   ========================================================================== */

/* ---------- storyline ---------- */
.dlx-storyline {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	margin: 0 !important;
	z-index: 2;
	pointer-events: none;
}
/* The base `svg { max-width: 100% }` would clamp this to its zero-width
   wrapper and hide every line of the storyline. */
.dlx-storyline__svg { position: absolute; left: 0; top: 0; max-width: none; height: auto; overflow: visible; }
.dlx-storyline__track { fill: none; stroke: rgba(120, 142, 168, .34); stroke-width: 1.25; }
.dlx-storyline__progress { fill: none; stroke: var(--dlx-orange); stroke-width: 2; stroke-linecap: round; }
.dlx-storyline__handoff { fill: none; stroke: var(--dlx-orange); stroke-width: 1.5; stroke-linecap: round; opacity: 0; transition: opacity .4s ease-out; }
.dlx-storyline__handoff.is-on { opacity: .9; }
.dlx-storyline__node,
.dlx-storyline__dot,
.dlx-storyline__land { position: absolute; left: 0; top: 0; border-radius: 999px; }
.dlx-storyline__node {
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	background: var(--dlx-surface);
	border: 2px solid rgba(120, 142, 168, .75);
	transition: background-color .35s ease-out, border-color .35s ease-out, box-shadow .35s ease-out;
}
.dlx-storyline__node.is-reached { background: var(--dlx-orange); border-color: var(--dlx-orange); box-shadow: 0 0 0 5px rgba(242, 140, 40, .18); }
.dlx-storyline__dot {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background: var(--dlx-orange);
	box-shadow: 0 0 0 6px rgba(242, 140, 40, .22), 0 0 24px rgba(242, 140, 40, .5);
	will-change: transform;
	transition: opacity .3s ease-out;
}
.dlx-storyline__dot.is-idle { opacity: 0; }
.dlx-storyline__land { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--dlx-orange); opacity: 0; transition: opacity .3s ease-out; }
.dlx-storyline__land.is-landed { opacity: 1; animation: dlx-land 1s var(--dlx-ease) both; }
@keyframes dlx-land {
	0% { box-shadow: 0 0 0 0 rgba(242, 140, 40, .6); }
	100% { box-shadow: 0 0 0 22px rgba(242, 140, 40, 0); }
}

/* ---------- background networks ---------- */
.dlx-bgnet { position: absolute; inset: 0; z-index: 0; margin: 0 !important; overflow: hidden; pointer-events: none; }
.dlx-bgnet__field { position: absolute; inset: 0; animation: dlx-drift 16s ease-in-out infinite alternate; animation-play-state: paused; }
.dlx-bgnet.is-live .dlx-bgnet__field { animation-play-state: running; }
.dlx-bgnet__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dlx-bgnet__link {
	stroke: rgba(39, 77, 112, .2);
	stroke-width: 1;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.4s var(--dlx-ease) calc(var(--i, 0) * 110ms + 200ms);
}
.dlx-bgnet__node {
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 999px;
	background: rgba(39, 77, 112, .32);
	opacity: 0;
	transform: scale(.3);
	transition: opacity .6s ease-out calc(var(--i, 0) * 110ms), transform .7s var(--dlx-ease) calc(var(--i, 0) * 110ms);
}
.dlx-bgnet__node--accent { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--dlx-orange); box-shadow: 0 0 0 5px rgba(242, 140, 40, .14); }
.dlx-bgnet--dark .dlx-bgnet__link { stroke: rgba(255, 255, 255, .17); }
.dlx-bgnet--dark .dlx-bgnet__node:not(.dlx-bgnet__node--accent) { background: rgba(255, 255, 255, .4); }
.dlx-bgnet.is-live .dlx-bgnet__link { stroke-dashoffset: 0; }
.dlx-bgnet.is-live .dlx-bgnet__node { opacity: 1; transform: none; }
@keyframes dlx-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-6px, -10px, 0); }
}

/* ---------- linked sector map ---------- */
.dlx-links__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.dlx-links__line {
	stroke: rgba(247, 165, 90, .45);
	stroke-width: 1.25;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset .7s var(--dlx-ease) calc(var(--i, 0) * 90ms);
}
[data-dlx-links].is-live .dlx-links__line { stroke-dashoffset: 0; }

/* ---------- controlled reveals ---------- */
.dlx-js .dlx-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity var(--dlx-dur) var(--dlx-ease), transform .6s var(--dlx-ease);
	transition-delay: calc(var(--dlx-i, 0) * 80ms);
}
.dlx-js .dlx-reveal.is-visible { opacity: 1; transform: none; }
.dlx-js .dlx-reveal :is(.dlx-card__media, .dlx-svc__media, .dlx-sector-row__media, .dlx-sector-tile__media) img {
	clip-path: inset(0 0 14% 0);
	transition: clip-path .9s var(--dlx-ease) calc(var(--dlx-i, 0) * 80ms + 120ms), transform .6s var(--dlx-ease);
}
.dlx-js .dlx-reveal.is-visible :is(.dlx-card__media, .dlx-svc__media, .dlx-sector-row__media, .dlx-sector-tile__media) img { clip-path: inset(0); }

.dlx-js :is(.dlx-hero__copy, .dlx-pagehero__copy) > * { animation: dlx-rise .6s var(--dlx-ease) both; }
.dlx-js :is(.dlx-hero__copy, .dlx-pagehero__copy) > :nth-child(2) { animation-delay: .06s; }
.dlx-js :is(.dlx-hero__copy, .dlx-pagehero__copy) > :nth-child(3) { animation-delay: .12s; }
.dlx-js :is(.dlx-hero__copy, .dlx-pagehero__copy) > :nth-child(n+4) { animation-delay: .18s; }
@keyframes dlx-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

.dlx-js .dlx-parallax { will-change: transform; }

/* ---------- step sequences ---------- */
.dlx-js .dlx-seq .dlx-challenge.is-current { border-color: rgba(242, 140, 40, .65); box-shadow: var(--dlx-shadow); }
.dlx-js .dlx-seq .dlx-process__step:is(.is-current, :has(~ .is-current)) .dlx-process__num { background: var(--dlx-orange); color: #11202E; }
@media (min-width: 860px) {
	/* A segment fills once the step it leads to is reached. */
	.dlx-js .dlx-seq .dlx-process__step:has(~ .is-current)::after { background-size: 100% 100%; }
}

/* ---------- scroll-driven slider (pinned) ---------- */
.dlx-motion .dlx-slider { height: calc(100svh - var(--dlx-pin-top) + (var(--dlx-slides) - 1) * 72svh); }
.dlx-motion .dlx-slider__sticky {
	position: sticky;
	top: var(--dlx-pin-top);
	height: calc(100svh - var(--dlx-pin-top));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.25rem, 3.5vh, 2.25rem);
}
.dlx-motion .dlx-slider__slides { position: relative; display: block; height: min(600px, calc(100svh - var(--dlx-pin-top) - 9rem)); }
.dlx-motion .dlx-slide { position: absolute; inset: 0; pointer-events: none; }
.dlx-motion .dlx-slide.is-active { pointer-events: auto; }
.dlx-motion .dlx-slide__media {
	height: 100%;
	/* No shadow: the circle clip would cut it into a visible arc. */
	/* From the picture's nearest edge (--dlx-r0) to past its far corner (+ --dlx-r), centred on the dot. */
	clip-path: circle(calc(var(--dlx-r0, 0px) + var(--dlx-reveal, 0) * var(--dlx-r, 160%)) at var(--dlx-ox, 0px) var(--dlx-oy, 100%));
}
.dlx-motion .dlx-slide:first-child .dlx-slide__media,
.dlx-motion .dlx-slide.is-shown .dlx-slide__media { clip-path: none; }
.dlx-motion .dlx-slide__media img { height: 100%; aspect-ratio: auto; }
.dlx-motion .dlx-slide__body { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .35s ease-out, transform .5s var(--dlx-ease); }
.dlx-motion .dlx-slide.is-active .dlx-slide__body { opacity: 1; transform: none; transition-delay: .08s; }
.dlx-motion .dlx-slider__rail { display: block; }
@media (max-width: 899px) {
	.dlx-motion .dlx-slider { height: calc(100svh - var(--dlx-pin-top) + (var(--dlx-slides) - 1) * 64svh); }
	.dlx-motion .dlx-slider__slides { height: calc(100svh - var(--dlx-pin-top) - 5.5rem); }
	.dlx-motion .dlx-slide { grid-template-rows: minmax(0, 48%) auto; align-content: start; }
	.dlx-motion .dlx-slide__media { height: 100%; }
}

/* ---------- retouch (theme 3.2.3) ----------
   Everything below only runs for visitors who have not asked for reduced
   motion, and only animates transform, opacity and clip-path. */
@media (prefers-reduced-motion: no-preference) {
	/* Reveals travel a little further and settle more softly. */
	.dlx-js .dlx-reveal { transform: translate3d(0, 28px, 0); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--dlx-i, 0) * 90ms); }

	/* Section headings rise out of their own line. */
	.dlx-js .dlx-reveal > h2,
	.dlx-js .dlx-reveal > div > h2,
	.dlx-js .dlx-chapter__head.dlx-reveal h2 {
		clip-path: inset(-.25em -.25em 100% -.25em);
		transform: translate3d(0, .45em, 0);
		transition: clip-path .9s cubic-bezier(.22, 1, .36, 1) .08s, transform .9s cubic-bezier(.22, 1, .36, 1) .08s;
	}
	.dlx-js .dlx-reveal.is-visible > h2,
	.dlx-js .dlx-reveal.is-visible > div > h2,
	.dlx-js .dlx-chapter__head.dlx-reveal.is-visible h2 { clip-path: inset(-.25em); transform: none; }

	/* The eyebrow dot lands with a ring - the brand's "connecting dot". */
	.dlx-js .dlx-reveal .dlx-eyebrow::before { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .15s; }
	.dlx-js .dlx-reveal.is-visible .dlx-eyebrow::before { transform: none; animation: dlx-ping 1.2s ease-out .5s 1 both; }
	@keyframes dlx-ping {
		0% { box-shadow: 0 0 0 0 rgba(242, 140, 40, .55); }
		100% { box-shadow: 0 0 0 10px rgba(242, 140, 40, 0); }
	}

	/* Process numbers pop as the sequence reaches them. */
	.dlx-js .dlx-process__num { transition: background-color .3s ease-out, color .3s ease-out, box-shadow .45s ease-out; }
	.dlx-js .dlx-seq .dlx-process__step.is-current .dlx-process__num { box-shadow: 0 0 0 6px rgba(242, 140, 40, .18); }

}

/* ---------- reduced motion: final state, no movement ---------- */
.dlx-reduced-motion .dlx-reveal,
.dlx-reduced-motion :is(.dlx-hero__copy, .dlx-pagehero__copy) > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.dlx-reduced-motion .dlx-storyline__dot,
.dlx-reduced-motion .dlx-storyline__handoff,
.dlx-reduced-motion .dlx-storyline__land { display: none; }
.dlx-reduced-motion .dlx-bgnet__field { animation: none; }
.dlx-reduced-motion .dlx-bgnet__link,
.dlx-reduced-motion .dlx-links__line { stroke-dashoffset: 0; transition: none; }
.dlx-reduced-motion .dlx-bgnet__node { opacity: 1; transform: none; transition: none; }
.dlx-reduced-motion .dlx-parallax { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	.dlx-js .dlx-reveal,
	.dlx-js :is(.dlx-hero__copy, .dlx-pagehero__copy) > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
	.dlx-js .dlx-reveal img { clip-path: none !important; }
	.dlx-storyline__dot,
	.dlx-storyline__handoff,
	.dlx-storyline__land { display: none; }
	.dlx-bgnet__field { animation: none; }
	.dlx-card__media img,
	.dlx-svc__media img,
	.dlx-pub-feature__media img,
	.dlx-sector-tile .dlx-figure img { transition: none !important; transform: none !important; }
}

@media print {
	.dlx-js .dlx-reveal { opacity: 1 !important; transform: none !important; }
	.dlx-bgnet, .dlx-storyline { display: none !important; }
}