/**
 * Elementor layer: only what the widgets have no control for.
 * Colours come from the Elementor global colours (Site Settings), exposed as
 * --e-global-color-* custom properties: primary = navy, accent = orange,
 * da_offwhite = off-white.
 */

html {
	scroll-padding-top: 110px; /* anchors land below the sticky header */
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Accent words in Heading widgets are written as <strong>…</strong>.
   A plain tag, not a class: Elementor 4.2.4 strips every attribute from
   Heading titles when a non-administrator saves (docs/rebuild/PROGRESS.md). */
.elementor-heading-title strong {
	/* Orange with 12% of the heading's own colour mixed in: on light surfaces
	   that is navy (≈3.5:1, AA for large text; pure orange is 2.8:1), on navy
	   surfaces it is off-white, which only raises contrast. */
	color: var(--e-global-color-accent, #FF6500);
	color: color-mix(in srgb, var(--e-global-color-accent, #FF6500) 88%, currentColor);
	font-weight: inherit;
}

/* Below 768px accented headings drop under 24px, so they are no longer
   "large text" and need 4.5:1: 30% of the heading colour (≈4.6:1 on the
   tint band, ≈7.8:1 in off-white on navy). */
@media (max-width: 767px) {
	.elementor-heading-title strong {
		color: color-mix(in srgb, var(--e-global-color-accent, #FF6500) 70%, currentColor);
	}
}

/* Links inside form labels (the privacy notice) must not rely on colour. */
.elementor-form label a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Service strip. The track is an ordinary container of Heading widgets;
   elementor.js appends one aria-hidden copy so the loop is seamless. */
.da-marquee {
	overflow: hidden;
}

.da-marquee__track.e-con {
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
	animation: da-marquee 45s linear infinite;
}

.da-marquee:hover .da-marquee__track,
.da-marquee:focus-within .da-marquee__track {
	animation-play-state: paused;
}

.da-marquee__track .elementor-heading-title {
	white-space: nowrap;
}

/* Spacing lives on the items, not the flex gap, so -50% lands exactly on
   the start of the copy. */
.da-marquee__track.e-con > .elementor-element {
	padding-inline: 28px;
}

/* Inside the Elementor editor the strip stands still and wraps, so every
   logo can be clicked and edited, and the preview is not repainting
   continuously. */
.elementor-editor-active .da-marquee__track.e-con {
	animation: none;
	flex-wrap: wrap;
	width: auto;
}

@keyframes da-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.da-marquee__track.e-con {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.da-marquee__clone {
		display: none;
	}
}

/* Cards lift slightly on hover. */
.da-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.da-card:hover {
		transform: translateY(-4px);
	}
}

/* Dotted connectors between process steps, as in the reference. */
@media (min-width: 1025px) {
	.da-step {
		position: relative;
	}

	.da-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 42px;
		left: calc(50% + 60px);
		width: calc(100% - 120px);
		border-top: 3px dotted color-mix(in srgb, var(--e-global-color-primary, #061A32) 35%, transparent);
	}
}

/* Industry pages: dotted orange connectors between the lead-path steps
   (5 across on desktop; icon circles are 64px, grid gap 30px). */
@media (min-width: 1025px) {
	.da-path-step {
		position: relative;
	}

	.da-path-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 32px;
		left: calc(50% + 42px);
		width: calc(100% - 54px);
		height: 0;
		border-top: 3px dotted color-mix(in srgb, var(--e-global-color-accent, #FF6500) 70%, transparent);
	}
}

/* Industry pages: a line joining the numbered follow-up steps. */
.da-timeline-step {
	position: relative;
}

.da-timeline-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 46px;
	bottom: 6px;
	width: 0; /* Elementor's .e-con::before overlay rule sets width/height */
	height: auto;
	border-left: 2px dotted color-mix(in srgb, var(--e-global-color-accent, #FF6500) 70%, transparent);
}

/* Metric dividers. */
@media (min-width: 768px) {
	.da-metric:not(:last-child) {
		border-right: 1px solid color-mix(in srgb, var(--e-global-color-da_offwhite, #FAFAF7) 20%, transparent);
	}
}

/* Floating WhatsApp button (markup from DA Digital Core, hidden until a
   number is configured). */
.da-whatsapp {
	position: fixed;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 990;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--e-global-color-accent, #FF6500);
	color: var(--e-global-color-primary, #061A32);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--e-global-color-primary, #061A32) 30%, transparent);
}

/* body a.… outranks the kit's link hover colour (.elementor-kit-N a:hover). */
body a.da-whatsapp:hover,
body a.da-whatsapp:focus,
body a.da-whatsapp:active {
	background: var(--e-global-color-accent, #FF6500);
	color: var(--e-global-color-primary, #061A32);
}

@media (prefers-reduced-motion: no-preference) {
	.da-whatsapp {
		transition: transform 0.2s ease;
	}

	.da-whatsapp:hover,
	.da-whatsapp:focus-visible {
		transform: scale(1.08);
	}
}

.da-whatsapp:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #061A32);
	outline-offset: 3px;
}

/* Keyboard focus on Elementor links and buttons. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor .elementor-button:focus-visible {
	outline: 3px solid var(--e-global-color-accent, #FF6500);
	outline-offset: 3px;
}

/* Logo strips: a .da-marquee container whose track holds Image widgets.
   One optical height for every mark; width follows each logo. */
.da-logos .da-marquee__track .elementor-widget-image img {
	height: 40px;
	width: auto;
	max-width: none;
}

.da-logos .da-marquee__track.e-con > .elementor-element {
	padding-inline: 44px;
}

@media (max-width: 767px) {
	.da-logos .da-marquee__track .elementor-widget-image img {
		height: 30px;
	}

	.da-logos .da-marquee__track.e-con > .elementor-element {
		padding-inline: 26px;
	}
}

.da-marquee--reverse .da-marquee__track.e-con {
	animation-direction: reverse;
}

.da-marquee--slow .da-marquee__track.e-con {
	animation-duration: 60s;
}

/* Pause/play control added by elementor.js to every moving strip (or one
   per .da-marquee-group). It is visually hidden until it receives keyboard
   focus, so the design stays clean; mouse users pause by hovering and
   everyone can pause by focusing into the strip. */
.da-marquee,
.da-marquee-group {
	position: relative;
}


.da-marquee.is-paused .da-marquee__track.e-con {
	animation-play-state: paused;
}

/* body button.… beats the kit's global button styles (.elementor-kit-N button). */
body button.da-marquee__toggle:not(:focus-visible) {
	clip-path: inset(50%);
	opacity: 0;
}

body button.da-marquee__toggle {
	position: absolute;
	left: 12px; /* clear of the floating WhatsApp button (bottom right) */
	bottom: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #061A32) 25%, transparent);
	border-radius: 50%;
	background: var(--e-global-color-secondary, #FAFAF7);
	color: var(--e-global-color-primary, #061A32);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

body button.da-marquee__toggle:hover,
body button.da-marquee__toggle:focus {
	background: var(--e-global-color-secondary, #FAFAF7);
	color: var(--e-global-color-accent, #FF6500);
}

.da-marquee__toggle:focus-visible {
	outline: 3px solid var(--e-global-color-accent, #FF6500);
	outline-offset: 2px;
}

.da-marquee__toggle svg {
	width: 12px;
	height: 12px;
}

@media (prefers-reduced-motion: reduce) {
	body button.da-marquee__toggle {
		display: none; /* nothing moves, so nothing to pause */
	}
}

/* WhatsApp pending state: same placement, dashed ring signals "coming soon". */
.da-whatsapp--pending {
	outline: 2px dashed color-mix(in srgb, var(--e-global-color-primary, #061A32) 45%, transparent);
	outline-offset: 3px;
}

/* Keep the last footer line clear of the floating button on phones. */
@media (max-width: 767px) {
	.elementor-location-footer {
		padding-bottom: 76px;
		background: var(--e-global-color-primary, #061A32); /* the padding continues the navy footer */
	}
}

/* Company logo above a testimonial: same optical height as the logo strip. */
.da-quote-logo img {
	height: 34px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 767px) {
	.da-quote-logo img {
		height: 28px;
	}
}

/* Carousels: a drag that starts on an image must move the slide, not start
   the browser's native image drag (which cancels Swiper's gesture). */
.elementor-widget-n-carousel img {
	-webkit-user-drag: none;
	user-select: none;
}

/* Headings inside article and legal text (Post Content widget) use the
   heading colour; the kit no longer sets h1–h4 globally. */
.elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6) {
	color: var(--e-global-color-primary, #061A32);
}

/* Keyboard access to the desktop Services dropdown. SmartMenus opens it on
   mouse hover only, so Tab skipped its links; show it while focus is inside. */
.elementor-nav-menu--main .elementor-nav-menu > li:focus-within > ul.sub-menu {
	display: block !important; /* beats SmartMenus' inline display:none */
	width: max-content !important; /* SmartMenus sizes it only when it opens it */
	min-width: 12em;
}

/* Links inside running text (articles, legal, FAQ answers) must not rely on
   colour alone. */
.elementor-widget-text-editor :is(p, li) a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Card images that link somewhere fill the card: the link wraps the image
   inline, so the image's 100% width would otherwise follow the link. */
.da-card .elementor-widget-image a {
	display: block;
}

/* Industry pages: on desktop the feature photo fills the height of the
   feature cards beside it (the height control is the tablet/phone value). */
@media (min-width: 1025px) {
	.da-photo-fill .elementor-widget-image {
		position: relative;
		flex: 1 1 auto;
		min-height: 420px;
	}

	.da-photo-fill .elementor-widget-image img {
		position: absolute;
		inset: 0;
		height: 100% !important; /* beats the widget's fixed height */
	}
}