/**
 * INAI Global CSS — pixel-perfect refinements vs Figma Startseite (1036:1129)
 * Prefer Elementor settings; this file covers gaps Elementor cannot express cleanly.
 */

/* —— Base —— */
html {
	scroll-behavior: smooth;
}

.inia-theme,
.inia-theme body {
	font-family: var(--inai-font-body);
	font-weight: var(--inai-body-weight);
	font-size: var(--inai-body-size);
	line-height: var(--inai-body-lh);
	color: var(--inai-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.inia-theme h1,
.inia-theme h2,
.inia-theme h3,
.inia-theme h4,
.inia-theme .inia-display {
	font-family: var(--inai-font-display);
	font-weight: 600;
}

.inia-theme p {
	margin: 0;
}

.inia-theme ul {
	margin: 0;
	padding-left: 24px;
}

.inia-theme.elementor-page header.site-header,
.inia-theme.elementor-page footer.site-footer {
	display: none;
}

/* Front page: Figma gradient runs behind floating header */
body.home.inia-theme,
body.page-id-17.inia-theme {
	background-color: #ffffff;
	background-image: var(--inai-hero-gradient);
	background-repeat: no-repeat;
	background-size: 100% 3350px;
	background-position: top center;
	/* Clip marquee / decorative overflow so mobile never grows a horizontal scroller. */
	overflow-x: clip;
}

body.home .inia-homepage.inia-hero-gradient,
body.page-id-17 .inia-homepage.inia-hero-gradient,
body.home .elementor-element.inia-hero-gradient {
	background-image: none !important;
	background-color: transparent !important;
}

/* —— Typography helpers —— */
.inia-eyebrow {
	font-family: var(--inai-font-body) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: 1.8px !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 !important;
}

.inia-accent {
	color: var(--inai-electric-blue);
}

.inia-up { color: var(--inai-gruen); }
.inia-down { color: var(--inai-signal-rot); }

/* —— Buttons (Figma Primary / Secondary — SMART_ANIMATE 0.3s ease-in-out) —— */
.elementor-widget-button.inia-btn-primary,
.elementor-widget-button.inia-btn-secondary,
.elementor-widget-button.inia-btn {
	width: auto !important;
	max-width: max-content !important;
}

.inia-btn-primary .elementor-button,
.inia-btn-secondary .elementor-button,
.elementor-button.inia-btn-primary,
.elementor-button.inia-btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	isolation: isolate;
	overflow: hidden !important;
	width: auto !important;
	max-width: max-content !important;
	min-height: var(--inai-btn-h-secondary) !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
	border-radius: 999px !important;
	box-shadow: var(--inai-shadow-btn) !important;
	font-family: var(--inai-font-body) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	border: 0 !important;
	cursor: pointer;
	/* No scale/translate — Figma button components only animate fills/colors. */
	transition:
		background-color var(--inai-btn-transition),
		color var(--inai-btn-transition),
		border-color var(--inai-btn-transition),
		box-shadow var(--inai-btn-transition),
		opacity var(--inai-btn-transition);
}

.inia-btn-primary .elementor-button .elementor-button-content-wrapper,
.inia-btn-secondary .elementor-button .elementor-button-content-wrapper,
.elementor-button.inia-btn-primary .elementor-button-content-wrapper,
.elementor-button.inia-btn-secondary .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}

/*
 * Beat Elementor post CSS:
 *   .elementor-N .elementor-element.elementor-element-ID .elementor-button:hover  → (0,5,1)
 * Use html body.inia-theme .elementor .elementor-element.VARIANT …              → (0,6,2+)
 */

/* —— Secondary: white + electric → rgba(255,255,255,0.1) + white. —— */
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:visited {
	min-height: var(--inai-btn-h-secondary) !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
	background-color: var(--inai-btn-secondary-bg) !important;
	background-image: none !important;
	color: var(--inai-btn-secondary-color) !important;
}

html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:hover,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:focus,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:focus-visible,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:active {
	background-color: var(--inai-btn-secondary-bg-hover) !important;
	background-image: none !important;
	color: var(--inai-btn-secondary-color-hover) !important;
}

html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:hover .elementor-button-text,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:focus .elementor-button-text,
html body.inia-theme .elementor .elementor-element.inia-btn-secondary .elementor-button:active .elementor-button-text {
	color: var(--inai-btn-secondary-color-hover) !important;
}

/* —— Primary: gradient electric→deep → gradient deep→black (via ::before crossfade). —— */
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:visited {
	min-height: var(--inai-btn-h-primary) !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
	background-color: transparent !important;
	background-image: var(--inai-btn-primary-gradient) !important;
	color: var(--inai-btn-primary-color) !important;
}

html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--inai-btn-primary-gradient-hover);
	opacity: 0;
	transition: opacity var(--inai-btn-transition);
	z-index: 0;
	pointer-events: none;
}

html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:hover::before,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:focus::before,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:focus-visible::before,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:active::before {
	opacity: 1;
}

html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:hover,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:focus,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:focus-visible,
html body.inia-theme .elementor .elementor-element.inia-btn-primary .elementor-button:active {
	background-color: transparent !important;
	background-image: var(--inai-btn-primary-gradient) !important;
	color: var(--inai-btn-primary-color-hover) !important;
}

/* Custom HTML CTAs that reuse the primary look (blog phone, etc.). */
/*
 * Blog phone CTA — Figma Primary 51:801.
 * Fills live on ::after/::before: Elementor lazyload sets `* { background-image: none !important }`
 * on unloaded parents, which strips backgrounds on the <a> itself but not on pseudos.
 * Label span keeps white text above the hover overlay.
 */
html body .inia-blog-carousel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: 45px;
	min-height: 45px;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: #2d5bff !important; /* fallback if pseudos fail */
	color: #ffffff !important;
	font-family: var(--inai-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none !important;
	box-shadow: var(--inai-shadow-btn);
	cursor: pointer;
	transition: color var(--inai-btn-transition), box-shadow var(--inai-btn-transition);
}

html body .inia-blog-carousel__cta:visited {
	color: #ffffff !important;
}

/* Default Primary gradient */
html body .inia-blog-carousel__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--inai-btn-primary-gradient);
	z-index: 0;
	pointer-events: none;
}

/* Hover: deep → black (Figma Variant2) */
html body .inia-blog-carousel__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--inai-btn-primary-gradient-hover);
	opacity: 0;
	transition: opacity var(--inai-btn-transition);
	z-index: 0;
	pointer-events: none;
}

html body .inia-blog-carousel__cta-label {
	position: relative;
	z-index: 1;
	color: #ffffff !important;
}

html body .inia-blog-carousel__cta:hover::before,
html body .inia-blog-carousel__cta:focus::before,
html body .inia-blog-carousel__cta:focus-visible::before {
	opacity: 1;
}

html body .inia-blog-carousel__cta:hover,
html body .inia-blog-carousel__cta:focus,
html body .inia-blog-carousel__cta:focus-visible,
html body .inia-blog-carousel__cta:hover .inia-blog-carousel__cta-label,
html body .inia-blog-carousel__cta:focus .inia-blog-carousel__cta-label,
html body .inia-blog-carousel__cta:focus-visible .inia-blog-carousel__cta-label,
html body .inia-blog-carousel__cta:visited .inia-blog-carousel__cta-label {
	color: #ffffff !important;
}

/* —— HEADER (Figma Navigation 1200×77 @ x120 y24) —— */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent !important;
	width: 100%;
}

.elementor-location-header > .elementor {
	background: transparent !important;
}

/* Outer padding = Figma side inset 120 */
.elementor-location-header > .elementor > .e-con-full.e-parent {
	padding: 24px 120px 0 !important;
	background: transparent !important;
	max-width: 100% !important;
}

/* White floating nav card (boxed inner) */
.elementor-location-header .e-con-boxed.e-parent,
.elementor-location-header .e-con-boxed > .e-con-inner {
	max-width: 1200px !important;
}

.elementor-location-header .e-con-boxed.e-parent {
	width: 100% !important;
	min-height: 77px !important;
	margin-inline: auto !important;
	background-color: #ffffff !important;
	border-radius: 24px !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	overflow: visible !important;
}

.elementor-location-header .e-con-boxed > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	min-height: 77px !important;
	padding: 16px 32px !important;
	box-sizing: border-box !important;
}

/* Child columns: e-con-full defaults to width:100% — kill that for logo/nav/CTA */
.elementor-location-header .e-con-boxed > .e-con-inner > .e-con.e-child {
	--width: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
}

.elementor-location-header .inia-header-logo-wrap {
	flex: 0 0 96px !important;
	--flex-grow: 0 !important;
	--flex-shrink: 0 !important;
	width: 96px !important;
	--width: 96px !important;
}

.elementor-location-header .inia-header-menu-wrap {
	flex: 1 1 auto !important;
	--flex-grow: 1 !important;
	--flex-shrink: 1 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: auto !important;
	--width: auto !important;
}

.elementor-location-header .inia-header-cta-wrap {
	flex: 0 0 auto !important;
	--flex-grow: 0 !important;
	--flex-shrink: 0 !important;
	width: auto !important;
	--width: auto !important;
	display: flex !important;
	justify-content: flex-end !important;
}

/* Logo exact 96×30 */
.elementor-location-header .inia-header-logo,
.elementor-location-header .inia-header-logo .elementor-widget-container,
.elementor-location-header .inia-header-logo a {
	width: 96px !important;
	max-width: 96px !important;
	line-height: 0 !important;
}

.elementor-location-header .inia-header-logo img {
	display: block !important;
	width: 96px !important;
	max-width: 96px !important;
	height: 30px !important;
	object-fit: contain !important;
	object-position: left center !important;
}

/* Nav: 520px space-between, Bricolage 16/24/600 */
.elementor-location-header .inia-header-nav-widget {
	width: 100%;
	display: flex;
	justify-content: center;
}

.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--main {
	display: flex !important;
	justify-content: center;
	width: auto;
}

.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--main .elementor-nav-menu {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 520px !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

.elementor-location-header .inia-header-nav-widget .elementor-item {
	font-family: var(--inai-font-display) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
	color: #000000 !important;
	padding: 0 !important;
	background: none !important;
}

/* Active needs the same weight as the base rule above, which is !important. */
.elementor-location-header .inia-header-nav-widget .elementor-item:hover,
.elementor-location-header .inia-header-nav-widget .elementor-item:focus,
.elementor-location-header .inia-header-nav-widget .elementor-item.elementor-item-active,
.elementor-location-header .inia-header-nav-widget .current-menu-item > .elementor-item,
.elementor-location-header .inia-header-nav-widget .current-menu-ancestor > .elementor-item {
	color: var(--inai-electric-blue) !important;
}

/* Figma button size variants (Navigation/Leistungen 45, Testimonials 52) */
.elementor-location-header .inia-btn-primary .elementor-button,
.inia-leist__cta .elementor-button {
	min-height: var(--inai-btn-h-primary) !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
	white-space: nowrap !important;
}

.inia-testi__cta .elementor-button {
	min-height: 52px !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
}

/* Scrolled state */
.elementor-location-header.is-scrolled .e-con-boxed.e-parent,
.inia-site-header.is-scrolled .e-con-boxed.e-parent {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* —— Referenzen cards (384×685, radius 24) —— */
.inia-referenz-cards {
	width: 100% !important;
	max-width: 1200px !important;
	/* Don't clip card hover zoom at the row — each card clips itself. */
	overflow: visible !important;
}

.inia-referenz-card-img,
.inia-referenz-card-img .elementor-widget-container,
.inia-referenz-card-video,
.inia-referenz-card-video .elementor-widget-container,
.inia-referenz-video {
	width: 384px !important;
	max-width: 100% !important;
	height: 685px !important;
	border-radius: 24px !important;
	overflow: hidden !important;
}

.inia-referenz-card-img img,
.inia-referenz-card-video .inia-video__el,
.inia-referenz-video .inia-video__el {
	width: 384px !important;
	max-width: 100% !important;
	height: 685px !important;
	object-fit: cover !important;
	border-radius: 24px !important;
	display: block;
}

/* —— Blog carousel (Figma 1036:1303 / 1440×590) ——
   Phone = active post. Rail starts at x885 with 234×252 cards, gap 16. */
.elementor-element.inia-section-blog,
.inia-section-blog {
	position: relative;
	/* Rail clips itself; section must not chop the phone bezel or arrows. */
	overflow: visible !important;
	min-height: 590px !important;
}

.inia-section-blog > .e-con-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	overflow: visible;
}

.inia-blog-carousel,
.inia-blog-carousel-widget,
.inia-blog-carousel-widget .elementor-widget-container {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 590px;
	overflow: visible;
}

.inia-blog-carousel__band {
	position: absolute;
	left: 0;
	top: 135px;
	width: 100%;
	height: 320px;
	background: var(--inai-soft-grey);
	pointer-events: none;
	z-index: 0;
}

/* Figma iPhone / Blog Card — 298×590, centered (x571 on 1440). */
.inia-blog-carousel__phone {
	position: absolute;
	left: 50%;
	top: 0;
	width: 298px;
	height: 590px;
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
	overflow: visible;
}

.inia-blog-carousel__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 298px !important;
	height: 590px !important;
	max-width: none !important;
	/* Source asset is taller than Figma's 298×590 — contain keeps the full bezel. */
	object-fit: contain !important;
	object-position: center center;
	z-index: 2;
	pointer-events: none;
}

/* Screen mask 266×554 @ 16,18 inside the frame. */
.inia-blog-carousel__screen {
	position: absolute;
	left: 16px;
	top: 18px;
	width: 266px;
	height: 554px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 50px 16px 24px;
	box-sizing: border-box;
	border-radius: 40px;
	background: #ffffff;
	overflow: hidden;
	z-index: 1;
	pointer-events: auto;
}

.inia-blog-carousel__screen-title {
	margin: 0;
	color: var(--inai-black);
	font-family: var(--inai-font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
}

.inia-blog-carousel__screen-title span {
	color: var(--inai-electric-blue);
}

.inia-blog-carousel__phone-card {
	width: 100%;
	display: flex;
	justify-content: center;
}

.inia-blog-carousel__phone-card .inia-blog__card {
	width: 234px;
	max-width: 100%;
}

/* Layout metrics for .inia-blog-carousel__cta live with the Primary button block above. */

/*
 * Upcoming cards rail — Figma instances at x885 / x1135, y174.
 * Active post lives only in the phone; rail starts at the next post.
 * 885 = 50% + 149 (phone half) + 16 (gap).
 */
.inia-blog-carousel__viewport {
	position: absolute;
	left: calc(50% + 165px);
	top: 174px;
	/* Exactly two upcoming cards (234 + 16 + 234), matching Figma 885→1369. */
	width: 484px;
	height: 252px;
	overflow: hidden;
	z-index: 1;
}

/* Beat .inia-theme ul { padding-left: 24px } (higher specificity). */
ul.inia-blog-carousel__track {
	display: flex;
	align-items: stretch;
	gap: 16px;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
	width: max-content;
	height: 252px;
	transform: translate3d(0, 0, 0);
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: transform;
}

.inia-blog-carousel__slide {
	display: block;
	flex: 0 0 234px;
	width: 234px;
	height: 252px;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
}

.inia-blog-carousel__slide:focus-visible .inia-blog__card {
	outline: 2px solid var(--inai-electric-blue);
	outline-offset: 4px;
}

/* Arrows — Figma 443 / 948 @ y271 (720±277 / 720+228).
   Beat Elementor kit button chrome (padding 14×24 collapses the 48px SVG to 0). */
.inia-blog-carousel__arrow {
	position: absolute;
	top: 271px;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
	line-height: 0 !important;
	font-size: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	z-index: 10;
	overflow: visible;
}

.inia-blog-carousel__arrow img {
	display: block !important;
	width: 48px !important;
	height: 48px !important;
	max-width: none !important;
	object-fit: contain;
}

.inia-blog-carousel__arrow--prev {
	left: calc(50% - 277px);
}

.inia-blog-carousel__arrow--next {
	left: calc(50% + 228px);
}

.inia-blog__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 234px;
	height: 252px;
	padding: 16px !important;
	border-radius: var(--inai-radius-card-sm);
	background: rgba(241, 241, 242, 0.8);
	border: 1px solid #ffffff;
	box-shadow: var(--inai-shadow-card);
	backdrop-filter: blur(10px);
	overflow: hidden;
}

.inia-blog__card-link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.inia-blog__card-img {
	width: 100%;
	height: 136px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--inai-deep-blue);
	flex: 0 0 136px;
}

.inia-blog__card-img img,
.inia-blog__card-img-fallback {
	display: block;
	width: 100%;
	height: 136px;
	object-fit: cover;
	border-radius: 8px;
}

.inia-blog__author {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 8px;
	padding: 10px !important;
	flex: 1 1 auto;
	overflow: hidden;
}

.inia-blog__avatar-img,
.inia-blog__avatar img,
.inia-blog-carousel img.inia-blog__avatar-img {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex: 0 0 48px;
	overflow: hidden;
}

.inia-blog__byline p {
	margin: 0;
	color: var(--inai-black);
	font-family: var(--inai-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.inia-section-blog {
		overflow-x: clip !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.inia-blog-carousel,
	.inia-blog-carousel-widget,
	.inia-blog-carousel-widget .elementor-widget-container {
		min-height: 0 !important;
		height: auto !important;
	}

	.inia-blog-carousel {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		grid-template-areas:
			"phone phone phone"
			"prev rail next";
		align-items: center;
		justify-items: center;
		gap: 20px 8px;
		padding: 24px 16px 40px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.inia-blog-carousel__band {
		display: none;
	}

	.inia-blog-carousel__phone {
		grid-area: phone;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important; /* base rule uses translateX(-50%) for desktop */
		width: min(260px, 68vw) !important;
		height: calc(min(260px, 68vw) * 590 / 298) !important;
		margin-inline: auto;
		overflow: visible;
	}

	.inia-blog-carousel__frame {
		position: absolute !important;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	.inia-blog-carousel__screen {
		left: 5.37%;
		top: 3.05%;
		width: 89.26%;
		height: 93.9%;
		padding: 12% 6% 8%;
		border-radius: 12%;
	}

	.inia-blog-carousel__screen-title {
		font-size: clamp(16px, 4.5vw, 20px);
		white-space: normal;
		text-align: center;
	}

	.inia-blog-carousel__phone-card .inia-blog__card {
		width: 100%;
		max-width: 200px;
		height: auto;
		min-height: 0;
	}

	/* Match card height (252) — previous 220px clipped author/CTA from the bottom. */
	.inia-blog-carousel__viewport {
		grid-area: rail;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100%;
		max-width: 100%;
		height: 252px;
		overflow: hidden;
	}

	.inia-blog-carousel__slide .inia-blog__card {
		height: 252px;
	}

	.inia-blog-carousel__arrow--prev {
		grid-area: prev;
		position: relative !important;
		left: auto !important;
		top: auto !important;
	}

	.inia-blog-carousel__arrow--next {
		grid-area: next;
		position: relative !important;
		left: auto !important;
		top: auto !important;
	}
}

/* —— HERO —— */
.inia-section-hero {
	overflow: visible !important;
	max-width: 1200px !important;
	margin-inline: auto !important;
	/* Boxed containers apply padding on .e-con-inner — keep outer clean to avoid double padding */
	padding: 0 !important;
	min-height: 0 !important;
}

.inia-section-hero > .e-con-inner {
	box-sizing: border-box !important;
	min-height: 763px !important;
	height: 763px !important;
	overflow: hidden !important;
	padding-top: 120px !important;
	padding-right: 120px !important;
	padding-bottom: 83px !important;
	padding-left: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
}

.inia-section-hero .inia-hero-left,
.inia-hero-left {
	max-width: 596px;
}

.inia-section-hero .elementor-heading-title {
	margin: 0 !important;
}

.inia-section-hero .elementor-widget-text-editor {
	color: #ffffff;
}

.inia-section-hero .elementor-widget-text-editor ul {
	color: #ffffff;
	list-style: disc;
	padding-left: 24px;
}

.inia-section-hero .elementor-widget-text-editor li {
	font-family: var(--inai-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

.inia-hero-phone-wrap {
	max-width: 451px !important;
	width: 451px !important;
	overflow: visible !important;
}

/* Figma 1060:1472 — Video Startseite under iPhone chrome, +7.5° (CW). */
.inia-hero-phone .elementor-widget-container,
.inia-hero-phone {
	width: 451px;
	max-width: 100%;
}

.inia-hero-phone__stage {
	position: relative;
	width: 451px;
	max-width: 100%;
	margin: 0 auto;
	aspect-ratio: 451 / 772;
}

/* Chrome + video share one tilt so screen and bezel stay locked (Figma 95,0 / 359×731). */
.inia-hero-phone__device {
	position: absolute;
	left: 21.06%;
	top: 0;
	width: 79.6%;
	height: 94.69%;
	transform: rotate(7.5deg);
	transform-origin: center center;
}

.inia-hero-phone__video {
	position: absolute !important;
	left: 4.46% !important; /* (111-95)/359 */
	top: 2.46% !important; /* 18/731 */
	width: 90.25% !important; /* 324/359 */
	max-width: none !important;
	height: 95.9% !important; /* 701/731 */
	object-fit: cover !important;
	border-radius: 37px;
	background: #0a0a0a;
	pointer-events: none;
	z-index: 0;
}

.inia-hero-phone__chrome {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: fill !important;
	pointer-events: none;
	z-index: 1;
}

.inia-hero-phone img:not(.inia-hero-phone__chrome),
.inia-hero-phone .elementor-widget-container > img {
	display: block !important;
	width: 451px !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center top !important;
}

/* —— Service cards (Figma "Card / Service" 51:1171) —— */
.inia-service-card {
	max-width: 384px;
	padding: 32px !important;
	background: var(--inai-service-card-bg) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid #ffffff !important;
	border-radius: 24px !important;
	box-shadow: var(--inai-shadow-card) !important;
	box-sizing: border-box;
	overflow: hidden;
}

.inia-service-card__icon img,
.inia-service-card .inia-service-card__icon img {
	width: 85px !important;
	height: 70px !important;
	object-fit: contain !important;
}

.inia-service-card__body p {
	margin: 0;
}

.inia-service-card__body p + p {
	margin-top: var(--inai-body-lh);
}

/* Figma Button / Service Cards (51:892): 230×45 electric → white + 1px electric stroke. */
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button,
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:visited {
	min-width: 230px !important;
	min-height: var(--inai-btn-h-primary) !important;
	padding: var(--inai-btn-py) var(--inai-btn-px) !important;
	justify-content: center !important;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	background-color: var(--inai-btn-accent-bg) !important;
	background-image: none !important;
	color: var(--inai-btn-accent-color) !important;
	box-shadow: none !important;
	white-space: nowrap !important;
	transition:
		background-color var(--inai-btn-transition),
		color var(--inai-btn-transition),
		border-color var(--inai-btn-transition);
}

html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:hover,
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:focus,
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:focus-visible,
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:active {
	background-color: var(--inai-btn-accent-bg-hover) !important;
	background-image: none !important;
	color: var(--inai-btn-accent-color-hover) !important;
	border-color: var(--inai-btn-accent-border-hover) !important;
	box-shadow: none !important;
}

html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:hover .elementor-button-text,
html body.inia-theme .elementor .elementor-element.inia-service-card__cta .elementor-button:focus .elementor-button-text {
	color: var(--inai-btn-accent-color-hover) !important;
}

/**
 * INAI-O-Meter (Figma 149:443) — the gradient ramps through five stops, which
 * Elementor's two-stop control cannot express, so it is drawn here.
 */
.inia-leist__meter {
	background-image: linear-gradient(
		180deg,
		#ff9539 0%,
		#e84935 27.89%,
		#d82e3e 38.46%,
		#b01143 53.85%,
		var(--inai-deep-blue) 98.08%
	) !important;
}

.inia-leist__meter .elementor-heading-title,
.inia-leist__meter .inia-service-card__body,
.inia-leist__meter .inia-service-card__body p {
	color: #ffffff !important;
}

.inia-leistungen-path {
	pointer-events: none;
	opacity: 0.95;
	max-width: none;
	margin-inline: auto;
	z-index: 0;
}

/* —— Metric / insight / testimonial —— */
.inia-metric-card {
	box-sizing: border-box;
	padding: 8px 16px !important;
	background: #f1f1f2 !important;
	border: 1px solid #ffffff !important;
	border-radius: 16px !important;
	box-shadow: var(--inai-shadow-card) !important;
	max-width: 157px;
}

.inia-insight-card {
	box-sizing: border-box;
	padding: 32px !important;
	background: #173393 !important;
	border: 1px solid #ffffff !important;
	border-radius: 24px !important;
	color: #ffffff !important;
	max-width: 294px;
}

.inia-testimonial-card {
	box-sizing: border-box;
	padding: 32px !important;
	gap: 16px !important;
	background: #173393 !important;
	border: 1px solid #ffffff !important;
	border-radius: 24px !important;
	color: #ffffff !important;
	box-shadow: var(--inai-shadow-card) !important;
	align-items: flex-start !important;
	overflow: hidden;
}

/* Figma separates copy paragraphs by one blank line. */
.inia-homepage .elementor-widget-text-editor p + p {
	margin-top: var(--inai-body-lh);
}

.inia-homepage .elementor-widget-text-editor .inia-testimonial-card__name + p {
	margin-top: 0;
}

/* Figma sets the company line in the small caps navigation style. */
.inia-testimonial-card__name {
	margin: 0 0 16px !important;
	font-family: var(--inai-font-body);
	font-size: var(--inai-small-size);
	font-weight: var(--inai-small-weight);
	line-height: var(--inai-small-lh);
	letter-spacing: var(--inai-small-tracking);
	text-transform: uppercase;
}

/* Figma Kunden Logo components: 64×64 circular badges, then 16px gap to name. */
.inia-testimonial-card > .elementor-widget-image {
	width: 64px !important;
	max-width: 64px !important;
	align-self: flex-start !important;
	flex: 0 0 64px !important;
	margin: 0 !important;
}

.inia-testimonial-card > .elementor-widget-image .elementor-widget-container,
.inia-testimonial-card > .elementor-widget-image img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
	overflow: hidden;
}

.inia-testimonial-card > .elementor-widget-image img {
	display: block !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* —— FOOTER (Figma 1441×586, p64, gap64) —— */
.elementor-location-footer .inia-footer,
.elementor-location-footer .e-con.inia-footer,
.elementor-location-footer > .elementor > .e-con {
	background-color: #173393 !important;
}

.elementor-location-footer .elementor-heading-title {
	font-family: var(--inai-font-display) !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor a {
	font-family: var(--inai-font-body) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #ffffff !important;
}

.elementor-location-footer a:hover {
	opacity: 0.75;
}

.inia-footer-input {
	width: 100%;
	max-width: 358px;
	height: 40px;
	padding: 0 24px 0 31px;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	color: #173393;
	font-family: var(--inai-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	box-sizing: border-box;
}

/*
 * Visually hide the newsletter submit without expanding page width.
 * Theme/Elementor button padding + absolute left was pushing past the viewport.
 */
.inia-newsletter {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

.inia-newsletter__submit.screen-reader-text,
button.inia-newsletter__submit {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	left: 0 !important;
	right: auto !important;
	top: 0 !important;
	pointer-events: none;
}

.inia-footer-input::placeholder {
	color: #173393;
	opacity: 0.7;
}

.inia-newsletter-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 9999;
	transform: translateX(-50%);
	padding: 14px 24px;
	border-radius: 999px;
	background: #173393;
	color: #fff;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.24);
	animation: inia-toast-in 0.35s ease both;
}

@keyframes inia-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.inia-header-logo a {
	display: inline-flex;
	line-height: 0;
}

.elementor-location-footer img {
	object-fit: contain;
}

/* —— Media slots (Figma "Animation / Video", "Animierte Illustration") —— */
.inia-video {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
}

.inia-video__el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.inia-video__pending {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	background: var(--inai-soft-grey, #f1f1f2);
}

/* Impact slot (1036:1155) — flush video, no card chrome. */
.inia-impact__media .inia-video,
.inia-impact__media .inia-video__pending {
	width: 100%;
	height: 100%;
	min-height: 321px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	background: transparent;
}

.inia-impact__media,
.inia-impact__media > .elementor-widget-html,
.inia-impact__media > .elementor-widget-html > .elementor-widget-container {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.inia-referenz-video,
.inia-referenz-card-video {
	overflow: hidden;
	display: block;
}

/* —— Growth Partner Q&A (Figma 1036:1149 / 191:109) —— */
.inia-section-growth {
	overflow: visible;
	/* Soft-grey band is ::before only — heading sits on the page white (Figma 1036:1147). */
	background: transparent !important;
	background-color: transparent !important;
}

/* Reset Elementor kit button chrome — Figma rows are text+icon, not pills. */
.inia-growth-qa__q {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	color: rgba(0, 0, 0, 0.5) !important;
	font: inherit;
	min-height: 0 !important;
	width: auto;
}

.inia-growth-qa__q:hover,
.inia-growth-qa__q:focus {
	background: transparent !important;
	color: #000 !important;
	box-shadow: none !important;
}

.inia-growth-qa__q.is-active {
	color: #000 !important;
	cursor: default;
}

.inia-growth-qa__icon {
	display: block;
	object-fit: contain;
	pointer-events: none;
}

.inia-growth-qa__label {
	display: block;
	font-family: var(--inai-font-display, "Bricolage Grotesque", sans-serif);
	font-weight: 600;
	font-size: 24px;
	line-height: 31px;
	color: inherit;
	white-space: normal;
}

.inia-growth-qa__answer {
	font-family: var(--inai-font-body, "DM Sans", sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	white-space: pre-line;
}

.inia-growth-qa__divider img {
	display: block;
	width: 1px;
	height: 319px;
	max-width: none;
}

.inia-growth-qa__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma Button / Primary in Q&A is 45 tall (box-sizing border-box). */
	box-sizing: border-box;
	height: 45px;
	min-height: 45px;
	padding: 10px 24px;
	border-radius: 999px;
	background: var(--inai-deep-blue, #173393) !important;
	color: #fff !important;
	font-family: var(--inai-font-body, "DM Sans", sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease;
}

.inia-growth-qa__cta:hover,
.inia-growth-qa__cta:focus {
	background: var(--inai-electric-blue, #2d5bff) !important;
	color: #fff !important;
}

.inia-referenz-video .inia-video__el {
	display: block;
	background: #0a0a0a;
}

/* —— Animation / Trenner (1036:1179) —— */
.inia-section-trenner {
	background: var(--inai-deep-blue) !important;
	overflow: hidden !important;
}

.inia-trenner__widget,
.inia-trenner__widget > .elementor-widget-container {
	width: 100%;
	height: 66px;
	padding: 0 !important;
}

.inia-trenner {
	display: flex;
	align-items: center;
	width: 100%;
	height: 66px;
	overflow: hidden;
}

.inia-trenner__track {
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	animation: inia-trenner-scroll 28s linear infinite;
	will-change: transform;
}

.inia-trenner__item {
	flex: 0 0 365px;
	width: 365px;
	font-family: var(--inai-font-body);
	font-size: 22px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.1em;
	color: #ffffff;
	white-space: nowrap;
}

@keyframes inia-trenner-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Figma "Animation Kreis" — text path spinning around the ring. */
.inia-kal__kreis img {
	animation: inia-kreis-spin 24s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes inia-kreis-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.inia-trenner__track,
	.inia-kal__kreis img {
		animation: none !important;
	}
}

/* The HTML widget has no intrinsic height, so stretch it to the Figma slot. */
.inia-impact__media > .elementor-widget-html,
.inia-impact__media > .elementor-widget-html > .elementor-widget-container {
	height: 100%;
}

/* Figma 1036:1146 — GIF cropped in 553×433 (imageTransform scale ~160% / top −30%). */
.inia-problem__media {
	overflow: hidden !important;
}

.inia-problem__media > .e-con-inner,
.inia-problem__media .elementor-widget-image,
.inia-problem__media .elementor-widget-container {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.inia-problem__media img {
	position: absolute !important;
	left: 0 !important;
	/* 433 * -0.3033 ≈ -131px; 433 * 1.6011 ≈ 693px */
	top: -131px !important;
	width: 553px !important;
	max-width: none !important;
	height: 693px !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/*
 * Calendly — Figma 1036:1156 / shared .inia-lu-kalender
 * No extra white card/chrome around the embed (Calendly draws its own).
 * overflow:visible so the loader dots and the decorative ring aren’t clipped.
 */
.inia-section-kalender,
.inia-lu-kalender,
.inia-lu-kalender > .e-con-inner {
	overflow: visible !important;
}

.inia-kal__kreis,
.inia-kal__kreis .elementor-widget-container {
	overflow: visible !important;
	pointer-events: none;
}

.inia-kal__embed,
.inia-kal__embed > .elementor-widget-container {
	width: 100%;
	height: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	overflow: visible !important;
}

/* Calendly only draws info|calendar in a row above ~1000px. */
.inia-kal__viewport {
	position: relative;
	width: 1000px;
	max-width: 100%;
	height: 700px;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	overflow: visible !important;
}

.inia-kal__embed .calendly-inline-widget {
	width: 1000px !important;
	height: 700px !important;
	min-width: 1000px !important;
	min-height: 700px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	overflow: visible !important;
}

.inia-kal__embed iframe {
	width: 1000px !important;
	height: 700px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* —— Interaction states —— */
/* Service cards grow instead of lifting — see layout-desktop.css. */
.inia-testimonial-card,
.inia-metric-card,
.inia-insight-card,
.inia-blog__card,
.inia-referenz-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.inia-testimonial-card:hover,
.inia-metric-card:hover,
.inia-insight-card:hover,
.inia-blog__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--inai-shadow-card);
}

/* Photo tiles zoom inside the card frame (overflow clipped on the card, not the row). */
.inia-referenz-card-img img,
.inia-blog__card-img img,
.inia-tools__logos img {
	transition: transform 0.35s ease, opacity 0.25s ease;
	transform-origin: center center;
	will-change: transform;
}

.inia-referenz-card-img:hover img,
.inia-referenz-card-img:focus-within img,
.inia-blog__card:hover .inia-blog__card-img img {
	transform: scale(1.04);
}

/* —— Team cards (Figma 1036:1184 / Card Laura Default→Variant2 on hover) —— */
.inia-team-cards {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: max-content;
	height: 384px;
}

.inia-team-card {
	position: relative;
	flex: 0 0 256px;
	width: 256px;
	height: 384px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.inia-team-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
	transition: opacity 0.3s ease-out;
}

.inia-team-card__img--default {
	opacity: 1;
	z-index: 1;
}

.inia-team-card__img--hover {
	opacity: 0;
	z-index: 2;
}

.inia-team-card:hover .inia-team-card__img--hover,
.inia-team-card:focus-within .inia-team-card__img--hover {
	opacity: 1;
}

.inia-team-card:hover .inia-team-card__img--default,
.inia-team-card:focus-within .inia-team-card__img--default {
	opacity: 0;
}

.inia-tools__logos img:hover {
	transform: scale(1.08);
}

.inia-blog__arrow-prev,
.inia-blog__arrow-next,
.inia-blog-carousel__arrow {
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.inia-blog__arrow-prev:hover,
.inia-blog__arrow-next:hover,
.inia-blog-carousel__arrow:hover {
	opacity: 0.85;
}

.inia-blog-carousel__arrow:hover {
	/* Keep position; don't fight absolute left/top with transform scale. */
	transform: none;
}

.elementor-location-footer .inia-footer__social a {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.elementor-location-footer .inia-footer__social a:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.inia-btn-primary .elementor-button,
	.inia-btn-secondary .elementor-button,
	.elementor-button.inia-btn-primary,
	.elementor-button.inia-btn-secondary,
	.inia-btn-primary .elementor-button::before,
	.elementor-button.inia-btn-primary::before,
	.inia-blog-carousel__cta,
	.inia-blog-carousel__cta::before,
	.inia-service-card__cta .elementor-button,
	.inia-service-card,
	.inia-service-card__body,
	.inia-service-card__cta,
	.inia-testimonial-card,
	.inia-metric-card,
	.inia-insight-card,
	.inia-blog__card,
	.inia-referenz-card,
	.inia-referenz-card-img img,
	.inia-blog__card-img img,
	.inia-tools__logos img,
	.inia-blog__arrow-prev,
	.inia-blog__arrow-next,
	.inia-team-card__img {
		transition: none;
		transform: none;
	}

	.inia-team-card:hover .inia-team-card__img--hover,
	.inia-team-card:focus-within .inia-team-card__img--hover {
		opacity: 1;
	}
}

/* —— Homepage vertical rhythm —— */
.inia-homepage > .e-con,
.inia-homepage.e-con > .e-con {
	/* Elementor gap handled in settings; ensure no accidental collapse */
}

.inia-homepage .elementor-widget-heading .elementor-heading-title {
	font-family: var(--inai-font-display);
}

/* Media: consistent radii from Figma */
.inia-homepage img:not(.inia-blog-carousel__frame) {
	max-width: 100%;
	height: auto;
}

/* Prevent horizontal scroll */
.inia-theme,
.inia-theme .elementor,
.inia-theme .e-con {
	max-width: 100vw;
}

body.inia-theme {
	overflow-x: hidden;
}

/* —— Responsive —— */
@media (max-width: 1440px) {
	.elementor-location-header > .elementor > .e-con-full.e-parent {
		padding-left: max(40px, calc((100vw - 1200px) / 2)) !important;
		padding-right: max(40px, calc((100vw - 1200px) / 2)) !important;
	}
}

@media (max-width: 1024px) {
	:root {
		--inai-h1-size: 40px;
		--inai-h1-lh: 48px;
		--inai-h2-size: 32px;
		--inai-h2-lh: 40px;
		--inai-side-gutter: 40px;
		--inai-section-gap: 80px;
	}

	.inia-homepage.inia-hero-gradient {
		row-gap: var(--inai-section-gap) !important;
	}

	.inia-impact__media {
		width: 100% !important;
		max-width: 587px;
		aspect-ratio: 587 / 321;
		height: auto !important;
		margin-inline: auto;
	}

	.inia-section-hero .elementor-heading-title {
		font-size: var(--inai-h1-size) !important;
		line-height: var(--inai-h1-lh) !important;
	}

	.inia-ref__heading .elementor-heading-title,
	.inia-leist__heading .elementor-heading-title,
	.inia-tools__heading .elementor-heading-title,
	.inia-team__copy .elementor-heading-title,
	.inia-promise__copy .elementor-heading-title,
	.inia-growth__heading .elementor-heading-title,
	.inia-problem__copy .elementor-heading-title,
	.inia-impact__copy .elementor-heading-title,
	.inia-testi__heading .elementor-heading-title,
	.inia-kal__heading .elementor-heading-title {
		font-size: var(--inai-h2-size) !important;
		line-height: var(--inai-h2-lh) !important;
	}

	.elementor-location-header > .elementor > .e-con-full.e-parent {
		padding: 16px 24px 0 !important;
	}

	.elementor-location-header .e-con-boxed > .e-con-inner {
		padding: 12px 20px !important;
		min-height: 64px !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--main {
		display: none !important; /* burger takes over (Elementor tablet breakpoint) */
	}

	/* Mobile/tablet bar: logo | space | CTA | hamburger */
	.elementor-location-header .e-con-boxed > .e-con-inner {
		justify-content: flex-start !important;
	}

	.elementor-location-header .inia-header-logo-wrap {
		order: 1 !important;
		flex: 0 0 auto !important;
	}

	.elementor-location-header .inia-header-cta-wrap {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
		margin-right: 4px !important;
	}

	.elementor-location-header .inia-header-menu-wrap {
		order: 3 !important;
		flex: 0 0 auto !important;
		width: auto !important;
		justify-content: flex-end !important;
	}

	.inia-section-hero > .e-con-inner {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		/* Clear sticky header (~89px) so H1 isn’t tucked under the bar */
		padding: 112px 24px 48px !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 32px !important;
	}

	.inia-section-hero .inia-hero-left {
		width: 100% !important;
		max-width: 560px;
		text-align: left;
	}

	.inia-hero-phone-wrap {
		width: 100% !important;
		max-width: min(300px, 78vw) !important;
		height: auto !important;
		--height: auto !important;
		justify-content: center !important;
		margin-inline: auto;
		/* Room for the 7.5° tilt so chrome isn’t clipped */
		padding-block: 18px 28px !important;
		overflow: visible !important;
	}

	.inia-hero-phone,
	.inia-hero-phone .elementor-widget-container {
		height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	.inia-hero-phone__stage {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		/* Was overflow:hidden — rotated device bled past and got cropped */
		overflow: visible !important;
		aspect-ratio: 451 / 772;
	}

	.inia-hero-phone__device {
		/* Center + slightly inset so full bezel stays on screen while tilted */
		left: 50% !important;
		top: 2% !important;
		width: 72% !important;
		height: 90% !important;
		transform: translateX(-50%) rotate(7.5deg) !important;
		transform-origin: center center !important;
	}

	.inia-hero-phone img:not(.inia-hero-phone__chrome),
	.inia-hero-phone .elementor-widget-container > img {
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin-inline: auto;
	}

	.inia-section-referenzen {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 28px !important;
	}

	/* Keep Figma portrait ratio — fixed short heights were cropping faces. */
	.inia-referenz-card-img,
	.inia-referenz-card-img .elementor-widget-container,
	.inia-referenz-card-video,
	.inia-referenz-card-video .elementor-widget-container,
	.inia-referenz-video {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 384 / 685;
		overflow: hidden !important;
		border-radius: 24px !important;
	}

	.inia-referenz-card-img img,
	.inia-referenz-card-video .inia-video__el,
	.inia-referenz-video .inia-video__el {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}

	.inia-service-card {
		max-width: 100%;
	}

	.inia-tools__text {
		max-width: 540px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	:root {
		--inai-h1-size: 32px;
		--inai-h1-lh: 40px;
		--inai-h2-size: 28px;
		--inai-h2-lh: 34px;
		--inai-side-gutter: 20px;
		--inai-section-gap: 64px;
	}

	.elementor-location-header > .elementor > .e-con-full.e-parent {
		padding: 12px 16px 0 !important;
	}

	.elementor-location-header .e-con-boxed.e-parent {
		border-radius: 16px !important;
	}

	/* The boxed wrapper keeps its desktop 32px gutters; the bar owns padding on mobile. */
	.elementor-location-header .e-con-boxed.e-parent {
		padding-inline: 0 !important;
	}

	.elementor-location-header .e-con-boxed > .e-con-inner {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		padding: 10px 12px !important;
		min-height: 56px !important;
	}

	/* Mobile bar: logo | space | CTA | hamburger — everything shrinks to fit. */
	.elementor-location-header .inia-header-logo-wrap {
		order: 1 !important;
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.elementor-location-header .inia-header-cta-wrap {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
		margin-right: 4px !important;
	}

	/* Collapse the nav column down to just the 40px burger (rightmost). */
	.elementor-location-header .inia-header-menu-wrap {
		order: 3 !important;
	}

	.elementor-location-header .inia-header-menu-wrap,
	.elementor-location-header .inia-header-nav-widget,
	.elementor-location-header .inia-header-nav-widget .elementor-widget-container {
		flex: 0 0 40px !important;
		width: 40px !important;
		max-width: 40px !important;
		min-width: 0 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--main,
	.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--main .elementor-nav-menu {
		width: auto !important;
		min-width: 0 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle {
		flex: 0 0 40px !important;
		width: 40px !important;
		max-width: 40px !important;
		margin: 0 !important;
	}

	.elementor-location-header .inia-header-cta-wrap .elementor-button {
		min-height: 36px !important;
		padding: 8px 14px !important;
		font-size: 13px !important;
		white-space: nowrap !important;
	}

	.elementor-location-header .inia-header-logo,
	.elementor-location-header .inia-header-logo .elementor-widget-container,
	.elementor-location-header .inia-header-logo a,
	.elementor-location-header .inia-header-logo img {
		width: 80px !important;
		max-width: 80px !important;
	}

	.elementor-location-header .inia-header-logo img {
		height: 25px !important;
	}

	.elementor-location-footer > .elementor > .e-con {
		padding: 40px 20px !important;
	}

	.inia-footer-input {
		max-width: 100%;
	}

	.inia-section-hero > .e-con-inner {
		padding: 104px 20px 56px !important;
	}

	.inia-hero-phone-wrap {
		width: 100% !important;
		max-width: min(260px, 72vw) !important;
		height: auto !important;
		--height: auto !important;
		padding-block: 14px 22px !important;
		overflow: visible !important;
	}

	.inia-hero-phone,
	.inia-hero-phone .elementor-widget-container,
	.inia-hero-phone__stage {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	.inia-hero-phone__device {
		left: 50% !important;
		top: 2% !important;
		width: 70% !important;
		height: 90% !important;
		transform: translateX(-50%) rotate(6deg) !important;
	}

	.inia-hero-phone img:not(.inia-hero-phone__chrome),
	.inia-hero-phone .elementor-widget-container > img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
	}

	.inia-referenz-cards {
		flex-direction: column !important;
	}

	.inia-referenz-card-img,
	.inia-referenz-card-img .elementor-widget-container,
	.inia-referenz-card-video,
	.inia-referenz-card-video .elementor-widget-container,
	.inia-referenz-video {
		/* Slightly shorter on phones so three cards don’t dominate the scroll. */
		aspect-ratio: 3 / 4;
		max-height: min(560px, 140vw);
	}
}

@media (max-width: 430px) {
	.elementor-location-header > .elementor > .e-con-full.e-parent {
		padding: 12px 12px 0 !important;
	}

	.elementor-location-header .e-con-boxed > .e-con-inner {
		gap: 6px !important;
		padding: 8px 10px !important;
	}

	.elementor-location-header .inia-header-cta-wrap .elementor-button {
		min-height: 34px !important;
		padding: 7px 12px !important;
		font-size: 12px !important;
	}
}

@media (max-width: 360px) {
	.elementor-location-header .inia-header-logo,
	.elementor-location-header .inia-header-logo .elementor-widget-container,
	.elementor-location-header .inia-header-logo a,
	.elementor-location-header .inia-header-logo img {
		width: 68px !important;
		max-width: 68px !important;
	}

	.elementor-location-header .inia-header-logo img {
		height: 21px !important;
	}

	.elementor-location-header .inia-header-cta-wrap .elementor-button {
		padding: 7px 10px !important;
		font-size: 11px !important;
	}
}

/* —— Mobile / tablet nav side drawer (Storeby / DesignR pattern) —— */
/*
 * Lock the scroll at the root only. Pinning the body with
 * `position: fixed; top: -scrollY` shifts the whole document up, which makes
 * body the sticky header's scrollport and drops the header off-screen by the
 * scroll offset — and the scroll restore on close then animates, because
 * `html` carries `scroll-behavior: smooth`.
 */
html.inia-nav-open {
	overflow: hidden !important;
	overscroll-behavior: none;
	/* Set by nav-drawer.js to replace the width of the hidden scrollbar. */
	padding-right: var(--inia-nav-scrollbar, 0px);
}

.inia-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 1002;
	background: rgba(23, 51, 147, 0.45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.24s ease, visibility 0.24s ease;
}

.inia-nav-overlay.inia-nav-overlay--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.inia-nav-open .elementor-location-header {
	z-index: 1005 !important;
}

body.inia-nav-open .inia-nav-overlay {
	left: 60vw;
	width: 40vw;
}

@media (max-width: 1024px) {
	.elementor-location-header .inia-header-menu-wrap,
	.elementor-location-header .inia-header-nav-widget,
	.elementor-location-header .inia-header-nav-widget .elementor-widget-container {
		overflow: visible !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 1px solid rgba(0, 0, 0, 0.12) !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		color: #000000 !important;
		position: relative;
		z-index: 1004 !important;
		cursor: pointer;
	}

	body.inia-nav-open .elementor-location-header .inia-header-nav-widget .elementor-menu-toggle {
		z-index: 1006 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle .elementor-menu-toggle__icon--open,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle .elementor-menu-toggle__icon--close {
		display: none !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::before,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::after {
		content: "";
		position: absolute;
		left: 13px;
		right: 13px;
		height: 2px;
		background: #000000;
		border-radius: 2px;
		transition: transform 0.22s ease, top 0.22s ease, opacity 0.22s ease;
		pointer-events: none;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::before {
		top: 15px;
		box-shadow: 0 6px 0 #000000;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::after {
		top: 27px;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle.elementor-active::before {
		top: 21px;
		transform: rotate(45deg);
		box-shadow: none;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle.elementor-active::after {
		top: 21px;
		transform: rotate(-45deg);
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown,
	.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--toggle .elementor-menu-toggle + .elementor-nav-menu__container {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		width: 60vw !important;
		max-width: 60vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 88px 22px 24px !important;
		background: #ffffff !important;
		box-shadow: 16px 0 40px rgba(23, 51, 147, 0.14) !important;
		transform: translateX(-100%) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		z-index: 1003 !important;
		transition: transform 0.24s ease, opacity 0.2s ease, visibility 0.2s ease !important;
		border-radius: 0 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
	.elementor-location-header .inia-header-nav-widget .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container,
	body.inia-nav-open .elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown {
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		left: 0 !important;
		width: 60vw !important;
		max-width: 60vw !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		max-height: none !important;
		z-index: 1003 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .menu-item {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
		background: transparent !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .menu-item > a {
		display: block !important;
		width: 100% !important;
		padding: 18px 0 !important;
		font-family: var(--inai-font-display) !important;
		font-size: 16px !important;
		line-height: 1.15 !important;
		font-weight: 600 !important;
		color: #000000 !important;
		background: transparent !important;
		border: 0 !important;
		border-inline-start: 0 !important;
		text-shadow: none !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .menu-item > a:hover,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .current-menu-item > a,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .menu-item > a.elementor-item-active {
		color: var(--inai-electric-blue) !important;
		background: transparent !important;
	}
}

@media (max-width: 767px) {
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::before,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::after {
		left: 11px;
		right: 11px;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::before {
		top: 13px;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle::after {
		top: 25px;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle.elementor-active::before,
	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle.elementor-active::after {
		top: 19px;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown {
		padding: 80px 18px 24px !important;
	}

	.elementor-location-header .inia-header-nav-widget .elementor-menu-toggle + .elementor-nav-menu--dropdown .elementor-nav-menu > .menu-item > a {
		font-size: 15px !important;
		padding: 16px 0 !important;
	}
}