/*
 * 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;
	}
}

/* Back-to-top icon: the chevron inherits its colour, which renders dark against
   the crimson disc and leaves the button looking empty. Set the stroke here so
   the icon stays light whatever the surrounding text colour is. */
[data-back-to-top]{color:#fff}
[data-back-to-top] svg{stroke:#fff}