/*
 * IDM-Tech Elementor widgets - one stylesheet for all of them.
 *
 * Every custom widget used to print its own <style> block from its render()
 * method, so the same rules were parsed again on every page, the colours were
 * written as raw hex in six different files, and three different mobile
 * breakpoints were in use (640px, 767px and 1023px). This file replaces all of
 * that. The values are unchanged - this is the same design, kept in one place.
 *
 * Layout of this file:
 *   1. Tokens        - the brand palette and the shared metrics
 *   2. Primitives    - rules every widget's heading, text and button share
 *   3. Components    - the per-widget rules, moved here from the PHP files
 *   4. Motion        - what is switched off for reduced-motion visitors
 *
 * Breakpoints match Elementor's own, so a rule written here lines up with what
 * the editor's Tablet and Mobile views show:
 *   mobile  max-width: 767px
 *   tablet  max-width: 1024px
 */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
	/* Brand.
	   --idm-brand follows Customize > Theme Settings > Brand Colours, which
	   writes --color-brand-500; the hex after the comma is only the fallback
	   for when nothing has been set there. */
	--idm-brand: var(--color-brand-500, #b90000);
	--idm-brand-soft: #fbecec;
	--idm-grad-from: #6e0c10;
	--idm-grad-to: #e2453f;

	/* The secondary button's own two colours, from the brand sheet. */
	--idm-btn-2-text: #111111;
	--idm-btn-2-line: #d9d9d9;

	/* Neutrals */
	--idm-ink: #0f1622;
	--idm-text: #3d3d3d;
	--idm-line: #d2d2d2;
	--idm-line-soft: #ececef;
	--idm-white: #ffffff;
	--idm-surface: #f7f5f5;

	/* Type scale - the heading sizes the widgets were already using */
	--idm-title-size: clamp(2rem, 4vw, 3rem);
	--idm-title-weight: 900;
	--idm-title-leading: 1.1;
	--idm-title-tracking: -0.02em;
	--idm-text-size: 1.125rem;
	--idm-text-leading: 1.7;

	/* Spacing and shape */
	--idm-section-y: 5rem;
	--idm-section-y-sm: 3.5rem;
	--idm-radius: 1rem;
	--idm-radius-lg: 1.5rem;

	/* Buttons - the brand CTA metrics, shared with inc/buttons.php */
	--idm-btn-height: 48px;
	--idm-btn-height-sm: 44px;
	--idm-btn-pad-x: 24px;
	--idm-btn-badge: 32px;

	/* One transition curve for the whole widget set */
	--idm-ease: 0.3s ease;
	--idm-ease-fast: 0.25s ease;
}

/* -------------------------------------------------------------- 2. Primitives */

/*
 * The shared shapes. A widget opts in by putting the class in its markup, and
 * anything it does not set - colour, size - still comes from its own Style tab
 * controls, so these never fight the dashboard.
 */
.idm-title {
	margin: 0;
	font-size: var(--idm-title-size);
	font-weight: var(--idm-title-weight);
	line-height: var(--idm-title-leading);
	letter-spacing: var(--idm-title-tracking);
}

.idm-text {
	margin: 1rem 0 0;
	color: var(--idm-text);
	font-size: var(--idm-text-size);
	line-height: var(--idm-text-leading);
}

/*
 * Gradient text. Thirteen widgets paint an accent phrase this way and each one
 * repeated the four properties it takes; the widgets' own gradient controls
 * override the two colours through --idm-grad-from / --idm-grad-to.
 */
.idm-gradient-text {
	background-image: linear-gradient(90deg, var(--idm-grad-from), var(--idm-grad-to));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ------------------------------------------------------------- 3. Components */

/* --- Button widget: the shape it falls back to ----------------------------
 *
 * The widget used to carry its measurements as utility classes in the markup
 * (py-3 pl-6 pr-3, gap-2, h-7 w-7, h-4 w-4). Those are Style tab controls now,
 * and Elementor writes a control's value into the page's own stylesheet - a
 * file it only rebuilds when the page is saved. A page built before the
 * controls existed would therefore have had nothing at all to size its
 * buttons with.
 *
 * These are those same values as a floor. Anything set on the Style tab
 * outranks them, because Elementor scopes its rules to the element.
 */
.idmtech-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 12px 12px 24px;
	border-radius: 9999px;
	box-sizing: border-box;
}

.idmtech-button__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 9999px;
}

.idmtech-button__arrow svg {
	width: 16px;
	height: 16px;
}

.idmtech-button__arrow i {
	font-size: 16px;
	line-height: 1;
}

/* --- Button widget: the brand CTA presets -------------------------------- */

.idmtech-button__link--cta {
	background-image: none !important;
	border: 1.5px solid transparent !important;
	box-shadow: none !important;
	transition: background-color var(--idm-ease-fast), color var(--idm-ease-fast), border-color var(--idm-ease-fast);
}

/* The hover sweep washes brand red across the button, which would show through
   the secondary button's light fill before the hover colour lands. */
.idmtech-button__link--cta::before,
.idmtech-button__link--cta::after {
	display: none !important;
}

.idmtech-button__link--cta .idmtech-button__arrow {
	transition: background-color var(--idm-ease-fast), color var(--idm-ease-fast);
}

.idmtech-button__link--cta-primary {
	background-color: var(--idm-brand) !important;
	color: var(--idm-white) !important;
	border-color: var(--idm-brand) !important;
}

.idmtech-button__link--cta-primary .idmtech-button__arrow {
	background-color: var(--idm-white) !important;
	color: var(--idm-brand) !important;
}

.idmtech-button__link--cta-primary:hover,
.idmtech-button__link--cta-primary:focus-visible {
	background-color: var(--idm-white) !important;
	color: var(--idm-brand) !important;
	border-color: var(--idm-brand) !important;
}

.idmtech-button__link--cta-primary:hover .idmtech-button__arrow,
.idmtech-button__link--cta-primary:focus-visible .idmtech-button__arrow {
	background-color: var(--idm-brand) !important;
	color: var(--idm-white) !important;
}

.idmtech-button__link--cta-secondary {
	background-color: var(--idm-white) !important;
	color: var(--idm-btn-2-text) !important;
	border-color: var(--idm-btn-2-line) !important;
}

.idmtech-button__link--cta-secondary .idmtech-button__arrow {
	background-color: var(--idm-btn-2-text) !important;
	color: var(--idm-white) !important;
}

.idmtech-button__link--cta-secondary:hover,
.idmtech-button__link--cta-secondary:focus-visible {
	background-color: var(--idm-brand) !important;
	color: var(--idm-white) !important;
	border-color: var(--idm-brand) !important;
}

.idmtech-button__link--cta-secondary:hover .idmtech-button__arrow,
.idmtech-button__link--cta-secondary:focus-visible .idmtech-button__arrow {
	background-color: var(--idm-white) !important;
	color: var(--idm-brand) !important;
}

/* --- The button inside a card -------------------------------------------
 *
 * Shared by the Service Cards, Fan Cards, Feature Flipper and Service
 * Accordion widgets. These values used to be utility classes in each widget's
 * markup, which meant the Style tab could not touch them. They are the same
 * values, as a floor: everything here is overridden by Style > Card button,
 * and they are what a page shows before its own stylesheet is rebuilt.
 */
.idm-card-btn,
.elementor .idm-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding: 8px 8px 8px 20px;
	border-radius: 9999px;
	background-color: var(--idm-white);
	color: var(--idm-grad-from);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.idm-card-btn__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 9999px;
	background-color: var(--color-brand-600, #8f0000);
	color: var(--idm-white);
}

.idm-card-btn__arrow svg {
	width: 16px;
	height: 16px;
}

/* --- Feature widget: the icon badge -------------------------------------- */

.idmtech-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--idm-radius);
	background: var(--idm-brand-soft);
	color: var(--idm-brand);
	font-size: 24px;
	line-height: 1;
	transition: transform var(--idm-ease);
}

.idmtech-feature__icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.idmtech-feature__icon i {
	font-size: 24px;
}

.idmtech-feature:hover .idmtech-feature__icon {
	transform: translateY(-2px) scale(1.04);
}

/* --- Data table ---------------------------------------------------------- */

.idmtech-dtable {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.idmtech-dtable th,
.idmtech-dtable td {
	vertical-align: top;
}

.idmtech-dtable__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.idmtech-dtable__row:hover {
	background-color: rgba(185, 0, 0, 0.04);
}

.idmtech-dtable__c1 {
	font-weight: 700;
}

/* On a phone each row becomes its own card, with the column name printed
   above each cell - a wide table cannot be read any other way. */
@media (max-width: 767px) {
	.idmtech-dtable__wrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.idmtech-dtable,
	.idmtech-dtable tbody,
	.idmtech-dtable tr,
	.idmtech-dtable th,
	.idmtech-dtable td {
		display: block;
		width: 100%;
	}

	.idmtech-dtable thead {
		display: none;
	}

	.idmtech-dtable tbody tr {
		margin-bottom: 14px;
		border: 1px solid var(--idm-line);
		border-radius: var(--idm-radius);
		background: var(--idm-white);
		overflow: hidden;
	}

	.idmtech-dtable tbody tr:nth-child(even) {
		background: var(--idm-white);
	}

	.idmtech-dtable td,
	.idmtech-dtable th {
		padding: 14px 18px !important;
	}

	.idmtech-dtable__c1 {
		background: var(--idm-brand);
		color: var(--idm-white) !important;
		font-size: 15px;
	}

	.idmtech-dtable td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--idm-brand);
	}
}

/* --- Partner logos ------------------------------------------------------- */

.idmtech-plogos {
	--plogos-gap: 1.25rem;
	padding: var(--idm-section-y) 0;
	background: var(--idm-surface);
	overflow: hidden;
}

.idmtech-plogos__head {
	max-width: 48rem;
	margin: 0 auto 3rem;
	padding: 0 1rem;
	text-align: center;
}

.idmtech-plogos__title {
	margin: 0;
	color: #000;
	font-size: var(--idm-title-size);
	font-weight: var(--idm-title-weight);
	line-height: var(--idm-title-leading);
	letter-spacing: var(--idm-title-tracking);
}

.idmtech-plogos__text {
	margin: 1rem 0 0;
	color: var(--idm-text);
	font-size: var(--idm-text-size);
	line-height: var(--idm-text-leading);
}

.idmtech-plogos__rows {
	display: grid;
	gap: var(--plogos-gap);
}

.idmtech-plogos__rows--fade {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.idmtech-plogos__track {
	display: flex;
	gap: var(--plogos-gap);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: idmtech-plogos var(--plogos-dur, 40s) linear infinite;
}

.idmtech-plogos__track--reverse {
	animation-direction: reverse;
}

.idmtech-plogos__rows:hover .idmtech-plogos__track {
	animation-play-state: paused;
}

.idmtech-plogos__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 11.5rem;
	height: 6rem;
	padding: 0.6rem;
	border-radius: var(--idm-radius);
	background: var(--idm-white);
	border: 1px solid var(--idm-line-soft);
	transition: transform var(--idm-ease), box-shadow var(--idm-ease), border-color var(--idm-ease), background-color var(--idm-ease);
}

.idmtech-plogos__tile:hover {
	transform: translateY(-3px);
	border-color: rgba(185, 0, 0, 0.3);
	box-shadow: 0 18px 32px -20px rgba(185, 0, 0, 0.55);
}

.idmtech-plogos__tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.idmtech-plogos__name {
	font-size: 1.05rem;
	font-weight: 900;
	color: #111;
	text-align: center;
}

.idmtech-plogos__cta {
	margin-top: 3rem;
	text-align: center;
}

@keyframes idmtech-plogos {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - (var(--plogos-gap, 1.25rem) / 2)));
	}
}

/* --- Slideshow: video slides --------------------------------------------- */

.idmtech-slideshow__slat--video {
	overflow: hidden;
	background-repeat: no-repeat;
}

.idmtech-slideshow__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Service cards: the pinned horizontal scroll ------------------------- */

/* Below the desktop breakpoint the section is not pinned, so it does not need
   to fill the viewport and the track becomes an ordinary swipe. */
@media (max-width: 1024px) {
	.idmtech-services > div {
		min-height: 0;
	}

	.idmtech-services [data-pinscroll-track] {
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		transform: none !important;
		padding-bottom: 2rem;
	}

	.idmtech-services [data-pinscroll-track]::-webkit-scrollbar {
		display: none;
	}

	.idmtech-services [data-pinscroll-track] > * {
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------- 4. Responsive */

@media (max-width: 767px) {
	.idmtech-plogos {
		padding: var(--idm-section-y-sm) 0;
	}

	.idmtech-plogos__tile {
		width: 9rem;
		height: 5rem;
	}

	/* A background clip is a large download on mobile data, so a phone gets
	   the poster image unless the slide explicitly asks for the video. */
	.idmtech-slideshow__slat--video:not(.is-mobile-video) .idmtech-slideshow__video {
		display: none;
	}
}

/* ----------------------------------------------------------------- 5. Motion */

@media (prefers-reduced-motion: reduce) {
	.idmtech-plogos__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}

	.idmtech-plogos__track [aria-hidden="true"] {
		display: none;
	}

	.idmtech-slideshow__video {
		display: none;
	}
}


/* =====================================================================
 * 6. Section backgrounds and widget corrections
 *
 * These were printed inline from inc/elementor.php on every page load. They
 * are the same rules, unchanged, kept here so all widget styling lives in one
 * file. The three abstract backgrounds are opt-in: put idm-bg-grid,
 * idm-bg-dots or idm-bg-mesh in a container's Advanced > CSS Classes field.
 * idm-bg-left mirrors idm-bg-grid to the bottom-left.
 *
 * The phone breakpoint here was 639px and is now 767px, matching every other
 * rule in this file and Elementor's own Mobile view.
 * ===================================================================== */

.idm-bg-grid,.idm-bg-dots,.idm-bg-mesh{position:relative;overflow:hidden;isolation:isolate}
.idm-bg-grid>*,.idm-bg-dots>*{position:relative;z-index:1}
.idm-bg-grid::after,.idm-bg-dots::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}

.idm-bg-grid{background-image:radial-gradient(640px circle at 100% 0%,rgba(185,0,0,.11),transparent 62%),radial-gradient(520px circle at 0% 100%,rgba(185,0,0,.05),transparent 60%)}
.idm-bg-grid::after{background-image:linear-gradient(rgba(110,12,16,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(110,12,16,.075) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 88% 12%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 75% 85% at 88% 12%,#000 15%,transparent 72%)}

/* idm-bg-left: add alongside idm-bg-grid to mirror it (grid + glow from the bottom-left). */
.idm-bg-grid.idm-bg-left{background-image:radial-gradient(640px circle at 0% 100%,rgba(185,0,0,.11),transparent 62%),radial-gradient(520px circle at 100% 0%,rgba(185,0,0,.05),transparent 60%)}
.idm-bg-grid.idm-bg-left::after{-webkit-mask-image:radial-gradient(ellipse 75% 85% at 12% 88%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 75% 85% at 12% 88%,#000 15%,transparent 72%)}

.idm-bg-dots{background-image:radial-gradient(560px circle at 100% 100%,rgba(185,0,0,.09),transparent 62%)}
.idm-bg-dots::after{background-image:radial-gradient(rgba(110,12,16,.22) 1.2px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%)}

.idm-bg-mesh{background-image:radial-gradient(42% 60% at 8% 12%,rgba(185,0,0,.10),transparent 70%),radial-gradient(38% 55% at 92% 28%,rgba(240,138,134,.20),transparent 70%),radial-gradient(50% 60% at 55% 108%,rgba(185,0,0,.08),transparent 70%)}

/* FAQ answers use the full row instead of the widget's 32rem default. */
.idmtech-faq .idmtech-faq__desc{max-width:100%}
/* The row-end arrow turns to point down while its answer is open, so the
   icon shows the state. Only the icon turns - the circle keeps its own
   hover nudge. */
.idmtech-faq__arrow svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.idmtech-faq__item.is-open .idmtech-faq__arrow svg{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.idmtech-faq__arrow svg{transition:none}}
/* Long collapsed accordion labels wrap onto a second line instead of
   overflowing the card (they were nowrap). */
.idmtech-accordion__vtitle{white-space:normal;max-height:21rem;line-height:1.25}
/* The "Why" scroll widget pads its item list by 8vh at the bottom; the
   section container already supplies the bottom spacing. */
@media (min-width:1024px){.idmtech-why__nodes--split{padding-bottom:0}}

/* Hero slideshow copy sits on the header's grid. The header bar is
   max-width 80rem with 1.25rem of inline padding, so its logo starts
   at (100% - 80rem)/2 + 1.25rem; the hero used a flat viewport padding
   instead, which left it further out on the left than the logo. */
.idmtech-slideshow__content{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1.25rem}
.idmtech-slideshow__nav{right:max(1.25rem,calc((100% - 80rem) / 2 + 1.25rem))}

/* Button hover. Replaces the magnetic pull, which dragged a button
   toward the cursor and slid it over the next button in a row. This
   lift + fill stays inside the button's own box. Add the class
   idmtech-button__link--fx to any button that should use it. */
/* Catch-all for buttons whose markup still asks for the pull (an
   Elementor HTML widget, say): the script sets an inline transform,
   which this outranks. */
[data-magnetic]{transform:none!important}
.idmtech-button__link--fx{position:relative;overflow:hidden;isolation:isolate;
	transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background-color .3s ease,border-color .3s ease,color .3s ease}
.idmtech-button__link--fx>*{position:relative;z-index:1}
.idmtech-button__link--fx::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
	background:linear-gradient(100deg,rgba(185,0,0,.12),rgba(185,0,0,.03));
	opacity:0;transform:scaleX(.55);transform-origin:left center;
	transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.idmtech-button__link--fx:hover{transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(110,12,16,.55)}
.idmtech-button__link--fx:hover::before{opacity:1;transform:scaleX(1)}
.idmtech-button__link--fx:active{transform:translateY(-1px)}
.idmtech-button__link--fx:focus-visible{outline:2px solid #B90000;outline-offset:3px}
/* Only the outline style shows the tinted sweep - on the red and white
   styles it would muddy the fill, so they just lift. */
.idmtech-button__link--fx:not(.idmtech-button__link--outline)::before{content:none}
.idmtech-button__link--outline:hover{background-color:rgba(185,0,0,.04)}

/* Red buttons keep their red fill and white label on hover.
   The compiled theme CSS fades a white panel (::before) over a red
   button on hover and switches the label to black, which reads as dark,
   low-contrast text. These buttons now stay red, the label stays white
   and the arrow badge stays white with a red arrow, as at rest. */
a.bg-brand-500:hover,button.bg-brand-500:hover,
a.bg-brand-600:hover,button.bg-brand-600:hover,
a.bg-ink:hover,button.bg-ink:hover,
a.bg-gradient-to-r:hover,button.bg-gradient-to-r:hover{color:#fff!important}
a.bg-brand-500:hover:before,button.bg-brand-500:hover:before,
a.bg-brand-600:hover:before,button.bg-brand-600:hover:before,
a.bg-ink:hover:before,button.bg-ink:hover:before,
a.bg-gradient-to-r:hover:before,button.bg-gradient-to-r:hover:before{opacity:0!important}
a.bg-brand-500:hover .text-brand-600,button.bg-brand-500:hover .text-brand-600,
a.bg-brand-600:hover .text-brand-600,a.bg-ink:hover .text-brand-600,
a.bg-gradient-to-r:hover .text-crimson-600,button.bg-gradient-to-r:hover .text-crimson-600{
	background-image:none!important;background-color:#fff!important;
	color:var(--idmtech-btn-1,#b90000)!important}
@media (prefers-reduced-motion:reduce){
	.idmtech-button__link--fx,.idmtech-button__link--fx::before{transition:none}
	.idmtech-button__link--fx:hover{transform:none}
}

/* Back-to-top button: smaller and tighter into the corner on phones,
   where a 48px button 24px from the edge sits over the body text. */
@media (max-width:767px){
	[data-back-to-top]{height:2.5rem;width:2.5rem;bottom:1rem;right:1rem}
	[data-back-to-top] svg{height:1rem;width:1rem}
}

@media (max-width:767px){
	.idm-bg-grid::after{background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 110% 55% at 90% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 110% 55% at 90% 0%,#000 10%,transparent 70%)}
	.idm-bg-dots::after{background-size:18px 18px}
}


/* =====================================================================
 * 7. Elementor container corrections
 *
 * Elementor gives a widget inside a container `width: 100%`. In a row
 * container that wraps, a tick icon and its line of text therefore never share
 * a row: the text claims the full width and drops below the icon, which reads
 * as a broken bullet. Letting the text flex from a zero basis fixes it without
 * touching any page's data, so pages built before this existed are fixed too.
 *
 * Deliberately narrow - it only matches a text block directly after an icon,
 * which is exactly the bullet pattern. Moved here from
 * inc/elementor-layout-fixes.php, which this replaces.
 * ===================================================================== */

.e-con > .elementor-widget-icon + .elementor-widget-text-editor,
.e-con-full > .elementor-widget-icon + .elementor-widget-text-editor {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
.e-con > .elementor-widget-icon,
.e-con-full > .elementor-widget-icon {
	flex: 0 0 auto;
	width: auto;
}


/* =====================================================================
 * IDM-Tech Heading
 *
 * The defaults that used to be Tailwind utilities inside the widget's
 * render(). Same tokens, same computed values - but now overridable from
 * the Style tab, because a single class loses to Elementor's own
 * element-scoped rules.
 * ===================================================================== */

.idmtech-heading__sub {
	display: inline-block;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-brand-600);
}

.idmtech-heading__title {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	font-weight: var(--font-weight-black);
	letter-spacing: var(--tracking-tight);
	color: var(--color-ink);
}

/* The widget carried lg:text-5xl, which is Tailwind's 64rem breakpoint. */
@media (min-width: 1024px) {
	.idmtech-heading__title {
		font-size: var(--text-5xl);
	}
}

.idmtech-heading__text {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-muted);
}

/* =====================================================================
 * IDM-Tech Process Steps
 *
 * The shape only. Every value below is a custom property the widget's
 * Style tab writes on the root, and the fallback after the comma is the
 * same number the matching control defaults to - so a page saved before
 * a control existed still renders, and the Style tab always outranks
 * this, because Elementor scopes its rules to the element.
 *
 * The track is one dashed line running the height of the list, behind
 * the tiles; the tiles have their own background, so they mask it and it
 * reads as a connector between them. The brand fill and its dot are
 * driven by --idm-steps-progress, which inc/elementor/steps.js sets from
 * 0 to 1 as the section scrolls. Without that script the property stays
 * at 0, the fill has no height and the dot is hidden, which is exactly
 * the resting state - nothing depends on JavaScript to be readable.
 * ===================================================================== */

.idmtech-steps {
	--idm-step-tile: 76px;
	--idm-step-tile-radius: 18px;
	--idm-step-tile-bd: 1px;
	--idm-step-tile-bg: var(--idm-white);
	--idm-step-tile-bg-on: var(--idm-brand-soft);
	--idm-step-tile-line: var(--idm-line);
	--idm-step-tile-lift: 0px;
	--idm-step-icon: #9aa3af;
	--idm-step-icon-size: 28px;
	--idm-step-accent-default: var(--idm-brand);

	--idm-step-gap-x: 28px;
	--idm-step-gap-y: 40px;
	--idm-step-body-max: 100%;
	--idm-step-title-gap: 10px;

	--idm-step-track-w: 2px;
	--idm-step-track-color: var(--idm-line);
	--idm-step-progress: var(--idm-brand);
	--idm-step-dash: 6px;
	--idm-step-dash-gap: 7px;
	--idm-step-dot: 14px;
	--idm-step-dot-color: var(--idm-brand);
	--idm-step-dot-ring: var(--idm-white);

	/* steps.js writes this; 0 is the no-JavaScript resting state. */
	--idm-steps-progress: 0;

	position: relative;
}

.idmtech-steps__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--idm-step-gap-y);
}

/* ---------------------------------------------------------- the track */

/*
 * Centred on the tile column and inset by half a tile top and bottom, so
 * it starts at the centre of the first tile and ends at the centre of the
 * last one rather than running past them.
 */
.idmtech-steps__track {
	position: absolute;
	top: calc(var(--idm-step-tile) / 2);
	bottom: calc(var(--idm-step-tile) / 2);
	left: calc((var(--idm-step-tile) - var(--idm-step-track-w)) / 2);
	width: var(--idm-step-track-w);
	/* A dash gap of 0 makes this a solid line, which is why the dashes are
	   drawn as a gradient rather than with border-style: dashed. */
	background-image: repeating-linear-gradient(
		to bottom,
		var(--idm-step-track-color) 0,
		var(--idm-step-track-color) var(--idm-step-dash),
		transparent var(--idm-step-dash),
		transparent calc(var(--idm-step-dash) + var(--idm-step-dash-gap))
	);
	pointer-events: none;
}

.idmtech-steps--no-track .idmtech-steps__track {
	display: none;
}

.idmtech-steps__fill {
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--idm-steps-progress) * 100%);
	background-color: var(--idm-step-progress);
	border-radius: inherit;
}

.idmtech-steps__dot {
	position: absolute;
	left: 50%;
	top: calc(var(--idm-steps-progress) * 100%);
	width: var(--idm-step-dot);
	height: var(--idm-step-dot);
	margin: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--idm-step-dot-color);
	box-shadow: 0 0 0 4px var(--idm-step-dot-ring);
	/* Shown only once the script is driving the progress - a dot parked at
	   the very top of the track with nothing moving it looks like a fault. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.idmtech-steps.is-live .idmtech-steps__dot {
	opacity: 1;
}

/* ----------------------------------------------------------- the step */

.idmtech-steps__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--idm-step-gap-x);
}

.idmtech-steps__marker {
	flex: 0 0 var(--idm-step-tile);
	width: var(--idm-step-tile);
}

.idmtech-steps__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--idm-step-tile);
	height: var(--idm-step-tile);
	border: var(--idm-step-tile-bd) solid var(--idm-step-tile-line);
	border-radius: var(--idm-step-tile-radius);
	background-color: var(--idm-step-tile-bg);
	color: var(--idm-step-icon);
	transition: color 0.35s ease, border-color 0.35s ease,
		background-color 0.35s ease, transform 0.35s ease;
}

.idmtech-steps__tile svg,
.idmtech-steps__tile i {
	width: var(--idm-step-icon-size);
	height: var(--idm-step-icon-size);
	font-size: var(--idm-step-icon-size);
	line-height: 1;
	fill: currentColor;
	color: inherit;
}

/*
 * A step the progress dot has reached. The accent is the step's own when
 * one is set under Steps, and the widget-wide accent otherwise.
 */
.idmtech-steps__item.is-on .idmtech-steps__tile {
	color: var(--idm-step-accent, var(--idm-step-accent-default));
	border-color: var(--idm-step-accent, var(--idm-step-accent-default));
	background-color: var(--idm-step-tile-bg-on);
	transform: translateY(var(--idm-step-tile-lift));
}

.idmtech-steps__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--idm-step-body-max);
	/* Optically centres the first line of the title against the tile. */
	padding-top: calc((var(--idm-step-tile) - var(--idm-step-icon-size) * 2) / 6);
}

.idmtech-steps__title {
	margin: 0;
	font-size: var(--text-xl);
	line-height: 1.3;
	font-weight: var(--font-weight-bold);
	color: var(--idm-ink);
	transition: color 0.35s ease;
}

.idmtech-steps__text {
	margin: var(--idm-step-title-gap) 0 0;
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--idm-text);
}

/* ------------------------------------------------------------- motion */

/*
 * A step is never hidden from here. steps.js writes its own from-state
 * inline, in the same frame as it takes charge, so there is nothing to
 * flash and nothing that can strand a step at zero opacity if a tween is
 * interrupted. Without JavaScript, with reduced motion, or in the
 * Elementor editor preview - which loads no animation JS - every step is
 * simply visible.
 */
@media (prefers-reduced-motion: reduce) {
	.idmtech-steps__tile,
	.idmtech-steps__title,
	.idmtech-steps__dot {
		transition: none;
	}
}

/* --------------------------------------------------------- responsive */

/*
 * Only what the layout itself needs. The tile size and the two gaps have
 * their own Tablet and Mobile controls, so an editor can tune them
 * without touching this.
 */
@media (max-width: 767px) {
	.idmtech-steps__title {
		font-size: var(--text-lg);
	}
	.idmtech-steps__text {
		font-size: var(--text-sm);
	}
	.idmtech-steps__body {
		padding-top: 0;
	}
}