/*
Theme Name: IE Advance Engineering
Theme URI: https://ie.jextures.com
Author: IE Advance Engineering Services
Description: Custom WordPress theme for IE Advance Engineering Services.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: ie-advance
*/

:root {
  --ie-navy: #030b2d;
  --ie-ink: #252944;
  --ie-muted: #858997;
  --ie-soft: #eef7fa;
  --ie-line: #e7e9ee;
  --ie-orange: #ff6b2b;
  --ie-orange-dark: #d95422;
  --ie-white: #ffffff;
  --ie-max: 1140px;
  --ie-rail: 1140px;
  --ie-font: "Strichpunkt Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

body {
  margin: 0;
  color: var(--ie-ink);
  font-family: var(--ie-font);
  background: #fff;
  line-height: 1.45;
}

body.iee-detail-page {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.iee-detail-page {
    overflow-x: hidden;
  }
}

body.elementor-page,
body.elementor-page .elementor-widget,
body.elementor-page .elementor-widget-heading .elementor-heading-title,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page .elementor-widget-button .elementor-button,
body.elementor-page .elementor-widget-button .elementor-button-text,
body.elementor-page input,
body.elementor-page textarea,
body.elementor-page select,
body.elementor-page button {
  font-family: var(--ie-font) !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.elementor-page .elementor-section {
  overflow: hidden;
}

body.elementor-page .elementor-section > .elementor-container {
  width: min(var(--ie-rail), calc(100% - 40px)) !important;
  max-width: var(--ie-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.elementor-page .iee-hero-media > .elementor-container {
  width: min(var(--ie-rail), calc(100% - 40px)) !important;
  max-width: var(--ie-rail) !important;
}

html.iee-intro-lock {
  overflow-y: scroll;
  overscroll-behavior: none;
}

html.iee-intro-lock body {
  overflow: hidden;
  touch-action: none;
}

html.iee-intro-lock .iee-video-intro__skip {
  touch-action: manipulation;
}

body.iee-intro-active .iee-hero-title {
  opacity: var(--ie-real-title-opacity, 0);
  transition: opacity 0.18s cubic-bezier(0, 0, 1, 0.967);
}

body.iee-reveal-ready .iee-reveal-target,
body.iee-reveal-ready .iee-reveal-target.iee-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

body.iee-intro-active .iee-header .elementor-widget-image,
body.iee-intro-active .iee-header .iee-nav li,
body.iee-intro-active .iee-hero-media .elementor-widget-button,
body.iee-intro-active .iee-hero-media .elementor-widget-html,
body.iee-intro-active .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: 0 !important;
  filter: blur(6px) !important;
  transform: translate3d(0, 16px, 0) !important;
  will-change: opacity, transform, filter;
}

body.iee-intro-active .iee-header .elementor-widget-image {
  opacity: var(--ie-logo-opacity, 0) !important;
  filter: blur(var(--ie-logo-blur, 6px)) !important;
  transform: translate3d(0, var(--ie-logo-y, 22px), 0) scale(var(--ie-logo-scale, .9)) !important;
  transform-origin: left center;
}

body.iee-intro-active .iee-header .elementor-widget-image img {
  opacity: var(--ie-logo-opacity, 0) !important;
  filter: blur(var(--ie-logo-blur, 6px)) !important;
  transform: scale(var(--ie-logo-scale, .9)) !important;
  transform-origin: left center;
}

body.iee-intro-active .iee-header .iee-nav li {
  opacity: var(--ie-nav-opacity, 0) !important;
  filter: blur(var(--ie-nav-blur, 6px)) !important;
  transform: translate3d(0, var(--ie-nav-y, 18px), 0) scale(var(--ie-nav-scale, .96)) !important;
}

body.iee-intro-active .iee-header .iee-nav li:nth-child(2) {
  opacity: max(0, calc(var(--ie-nav-opacity, 0) - .05)) !important;
}

body.iee-intro-active .iee-header .iee-nav li:nth-child(3) {
  opacity: max(0, calc(var(--ie-nav-opacity, 0) - .1)) !important;
}

body.iee-intro-active .iee-header .iee-nav li:nth-child(4) {
  opacity: max(0, calc(var(--ie-nav-opacity, 0) - .15)) !important;
}

body.iee-intro-active .iee-header .iee-nav li:nth-child(5) {
  opacity: max(0, calc(var(--ie-nav-opacity, 0) - .2)) !important;
}

body.iee-intro-active .iee-header .iee-nav li:nth-child(6) {
  opacity: max(0, calc(var(--ie-nav-opacity, 0) - .25)) !important;
}

body.iee-intro-active .iee-hero-media .elementor-widget-button,
body.iee-intro-active .iee-hero-media .elementor-widget-html,
body.iee-intro-active .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: var(--ie-hero-item-opacity, 0) !important;
  filter: blur(var(--ie-hero-item-blur, 6px)) !important;
  transform: translate3d(0, var(--ie-hero-item-y, 20px), 0) scale(var(--ie-hero-item-scale, .98)) !important;
}

body.iee-intro-complete .iee-header .elementor-widget-image,
body.iee-intro-complete .iee-header .elementor-widget-image img,
body.iee-intro-complete .iee-header .iee-nav li,
body.iee-intro-complete .iee-hero-media .elementor-widget-button,
body.iee-intro-complete .iee-hero-media .elementor-widget-html,
body.iee-intro-complete .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: none !important;
  transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}

.iee-video-intro {
  position: fixed;
  top: var(--ie-intro-y, 0);
  left: var(--ie-intro-x, 0);
  width: var(--ie-intro-w, 100vw);
  height: var(--ie-intro-h, 100vh);
  z-index: 999999;
  overflow: hidden;
  background: #050505;
  transform-origin: top left;
  border-radius: var(--ie-intro-radius, 0);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  will-change: top, left, width, height, border-radius;
}

.iee-video-intro__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iee-video-intro:not(.is-docked)::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.34);
  opacity: var(--ie-intro-overlay-opacity, 1);
  transition: opacity .16s linear;
  pointer-events: none;
  content: "";
}

.iee-video-intro__cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 11px;
  color: #fff;
  font-family: var(--ie-font);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  opacity: var(--ie-intro-cue-opacity, 1);
  transform: translateX(-50%);
  transition: opacity .18s ease;
  cursor: ns-resize;
}

.iee-video-intro__cue i {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.95));
  position: relative;
  overflow: hidden;
}

.iee-video-intro__cue i::after {
  position: absolute;
  top: -18px;
  left: -3px;
  width: 7px;
  height: 18px;
  border-radius: 99px;
  background: #fff;
  content: "";
  animation: iee-scroll-cue 1.28s cubic-bezier(.65, 0, .35, 1) infinite;
}

.iee-video-intro__skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.iee-video-intro-title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(1160px, calc(100% - 56px));
  color: #fff;
  font-family: var(--ie-font);
  font-size: 45px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: 0;
  opacity: var(--ie-intro-title-opacity, 1);
  pointer-events: none;
  text-align: left;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity;
}

.iee-video-intro-title span {
  display: block;
}

.iee-video-intro-title span:nth-child(2),
.iee-video-intro-title span:nth-child(3) {
  display: inline;
}

.iee-video-intro-title span:nth-child(2)::after {
  content: " ";
}

.iee-video-intro.is-docked {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.iee-video-intro.is-docked .iee-video-intro__cue,
.iee-video-intro.is-docked .iee-video-intro__skip,
.iee-video-intro.is-docked .iee-video-intro-title {
  display: none;
}

@keyframes iee-scroll-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(70px);
    opacity: 0;
  }
}

@keyframes iee-reveal-up {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

.iee-hero-media {
  position: relative;
  overflow: hidden;
  background-color: #050505;
}

.iee-hero-media.iee-hero-video-ready {
  background-image: none !important;
}

.iee-hero-media.iee-hero-video-ready::before,
.iee-hero-media.iee-hero-video-ready::after {
  background-image: none !important;
}

.iee-hero-media.iee-hero-video-ready .elementor-background-video-container {
  display: none;
}

.iee-hero-bg-video,
.iee-hero-media .elementor-background-video-container,
.iee-hero-media .elementor-background-video-hosted {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.iee-hero-media > .elementor-container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .iee-video-intro {
    display: none;
  }

  body.iee-intro-active .iee-header .elementor-widget-image,
  body.iee-intro-active .iee-header .iee-nav li,
  body.iee-intro-active .iee-hero-media .elementor-widget-button,
  body.iee-intro-active .iee-hero-media .elementor-widget-html,
  body.iee-intro-active .iee-hero-media .elementor-widget-iee-trust-bar {
    opacity: 1;
    transform: none;
  }

  body.iee-intro-complete .iee-header .elementor-widget-image,
  body.iee-intro-complete .iee-header .iee-nav li,
  body.iee-intro-complete .iee-hero-media .elementor-widget-button,
  body.iee-intro-complete .iee-hero-media .elementor-widget-html,
  body.iee-intro-complete .iee-hero-media .elementor-widget-iee-trust-bar {
    animation: none;
  }

  .iee-video-intro-title {
    display: none;
  }
}

.ie-container {
  width: min(var(--ie-max), calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease;
  will-change: transform;
}

body.iee-header-hidden .site-header {
  transform: translate3d(0, -100%, 0);
}

body.iee-header-is-sticky .site-header {
  box-shadow: 0 12px 34px rgba(5, 12, 44, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}

.site-logo img {
  width: 73px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  color: #33384b;
  font-size: 13px;
  font-weight: 500;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ie-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ie-ink);
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  content: "";
}

.hero {
  background: #fff;
}

.hero__headline {
  max-width: 1082px;
  margin: 0 auto 36px;
  color: var(--ie-ink);
  font-size: clamp(34px, 4.1vw, 56px);
  font-weight: 700;
  line-height: 1.18;
}

.hero__headline strong {
  color: var(--ie-orange);
  font-weight: 700;
}

.hero__media {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: #131723;
}

.hero__media img {
  width: 100%;
  height: 634px;
  object-fit: cover;
}

.hero__copy {
  position: absolute;
  left: max(390px, calc((100vw - var(--ie-max)) / 2));
  top: 90px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
}

.hero__actions {
  position: absolute;
  left: max(390px, calc((100vw - var(--ie-max)) / 2));
  bottom: 142px;
  display: flex;
  gap: 18px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}

.button--primary {
  color: #fff;
  background: var(--ie-orange);
}

.button--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.18);
}

.trust-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 0;
  color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(90deg, rgba(3, 11, 45, 0.2), rgba(3, 11, 45, 0.72), rgba(3, 11, 45, 0.25));
  backdrop-filter: blur(10px);
}

.trust-strip__inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 28px;
  align-items: center;
  font-size: 13px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.section {
  padding: 96px 0;
}

.section--dark {
  color: #fff;
  background: var(--ie-navy);
}

.section--soft {
  background: var(--ie-soft);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--ie-orange);
  font-size: 13px;
  font-weight: 700;
}

.section h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.14;
}

.section h2 .muted {
  color: #9296a2;
}

.section p {
  margin: 0;
  color: var(--ie-muted);
  font-size: 16px;
}

.section--dark p {
  color: rgba(255, 255, 255, 0.72);
}

.challenge-image {
  width: min(100%, 1530px);
  margin: 42px auto 0;
}

.solutions-list {
  margin-top: 56px;
  border-top: 1px solid var(--ie-line);
}

.solution-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ie-line);
}

.solution-row h3 {
  margin: 0 0 12px;
  color: var(--ie-orange);
  font-size: 16px;
}

.solution-row img {
  width: 100%;
  border-radius: 6px;
}

.partners {
  padding: 56px 0 64px;
  background: #edf7fb;
}

.partners h3,
.clients h3 {
  margin: 0 0 28px;
  text-align: center;
  color: #4c5265;
  font-size: 16px;
}

.partners img,
.clients img {
  margin: 0 auto;
}

.results {
  padding: 88px 0;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.metric {
  min-height: 160px;
  padding: 28px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--ie-orange), #ffbd69);
}

.metric span {
  display: block;
  max-width: 240px;
  font-size: 15px;
  font-weight: 700;
}

.metric strong {
  display: block;
  margin-top: 46px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}

.process {
  text-align: center;
}

.process__intro {
  max-width: 700px;
  margin: 14px auto 72px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 160px;
  text-align: left;
}

.step {
  min-height: 150px;
  border-top: 1px solid var(--ie-line);
  padding-top: 18px;
}

.step__label {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 4px 8px;
  border-radius: 3px;
  color: var(--ie-orange);
  background: #fff0e9;
  font-size: 12px;
  font-weight: 700;
}

.step h3 {
  margin: 0 0 8px;
  color: var(--ie-ink);
  font-size: 18px;
}

.industries {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 572px;
  gap: 90px;
  align-items: start;
}

.industries__visual {
  border-radius: 6px;
  box-shadow: 0 24px 55px rgba(217, 84, 34, 0.2);
}

.clients {
  padding: 70px 0 40px;
  background: #f5fbfd;
}

.cta-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ie-navy);
}

.cta-footer__image {
  width: 100%;
}

.site-footer {
  padding: 34px 0;
  color: rgba(255, 255, 255, 0.58);
  background: var(--ie-navy);
  font-size: 13px;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 960px) {
  .site-header__inner {
    min-height: 76px;
  }

  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: absolute;
    top: 76px;
    right: 20px;
    left: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    border: 1px solid var(--ie-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(3, 11, 45, 0.12);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 12px;
  }

  .hero__headline {
    margin-top: 14px;
  }

  .hero__media {
    min-height: 640px;
  }

  .hero__media img {
    height: 640px;
  }

  .hero__copy,
  .hero__actions {
    left: 20px;
    right: 20px;
  }

  .hero__actions {
    bottom: 210px;
    flex-wrap: wrap;
  }

  .trust-strip__inner {
    grid-template-columns: 1fr 1fr;
  }

  .section__grid,
  .solution-row,
  .industries,
  .metrics,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .section__grid,
  .solution-row,
  .industries,
  .process-grid {
    gap: 34px;
  }

  .industries {
    align-items: stretch;
  }

  .industries__visual {
    width: min(100%, 572px);
    margin: 0 auto;
  }

  .site-footer__inner {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .ie-container {
    width: min(100% - 28px, var(--ie-max));
  }

  .site-logo img {
    width: 64px;
  }

  .hero__media,
  .hero__media img {
    height: 700px;
  }

  .trust-strip__inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .section {
    padding: 68px 0;
  }

  .metric {
    min-height: 130px;
  }
}

/* Cinematic hero motion. The body class keeps this layer above Elementor's custom CSS. */
body.iee-motion-v2 .iee-video-intro--cinematic {
  position: fixed;
  inset: auto;
  top: var(--ie-intro-y, 0);
  left: var(--ie-intro-x, 0);
  width: var(--ie-intro-w, 100vw);
  height: var(--ie-intro-h, 100vh);
  z-index: 999999;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: top left;
  transition: opacity .34s ease, top 1.85s cubic-bezier(.16, 1, .3, 1), left 1.85s cubic-bezier(.16, 1, .3, 1), width 1.85s cubic-bezier(.16, 1, .3, 1), height 1.85s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, top, left, width, height;
}

body.iee-motion-v2 .iee-video-intro--cinematic .iee-video-intro__media {
  transform: translateZ(0);
  transform-origin: center;
  transition: none;
}

body.iee-motion-v2 .iee-video-intro--cinematic::after {
  background: linear-gradient(180deg, rgba(3, 11, 45, .08), rgba(3, 11, 45, .3));
  opacity: 1;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-settling {
  top: var(--ie-intro-target-y, 0);
  left: var(--ie-intro-target-x, 0);
  width: var(--ie-intro-target-w, 100vw);
  height: var(--ie-intro-target-h, 100vh);
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-settling .iee-video-intro__media {
  transform: translateZ(0);
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-settling::after {
  opacity: 0;
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-settling .iee-video-intro__skip {
  opacity: 0;
  pointer-events: none;
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-docked {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-docked .iee-video-intro__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: none;
}

body.iee-motion-v2 .iee-video-intro--cinematic.is-docked::after {
  display: none;
}

body.iee-motion-v2 .iee-video-intro__skip {
  right: 28px;
  bottom: 28px;
  min-height: 36px;
  padding: 0 15px;
  border-color: rgba(255, 255, 255, .45);
  border-radius: 4px;
  background: rgba(3, 11, 45, .28);
  letter-spacing: .02em;
  pointer-events: auto;
  transition: opacity .3s ease, background-color .25s ease, border-color .25s ease;
}

body.iee-motion-v2 .iee-video-intro__skip:hover,
body.iee-motion-v2 .iee-video-intro__skip:focus-visible {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(3, 11, 45, .55);
  outline: none;
}

body.iee-motion-v2.iee-intro-active .iee-hero-title {
  opacity: 1 !important;
}

body.iee-motion-v2 .iee-hero-title .iee-hero-line .elementor-heading-title {
  animation: none !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image,
body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image img,
body.iee-motion-v2.iee-intro-active .iee-hero-title .elementor-heading-title,
body.iee-motion-v2.iee-intro-active .iee-hero-media .elementor-widget-button,
body.iee-motion-v2.iee-intro-active .iee-hero-media .elementor-widget-html,
body.iee-motion-v2.iee-intro-active .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: 0 !important;
  filter: none !important;
  transform: translate3d(0, 22px, 0) !important;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .82s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: auto !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .iee-nav-wrap {
  opacity: 0 !important;
  filter: none !important;
  transform: translate3d(0, -120px, 0) !important;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .82s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: auto !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image,
body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image {
  transform: translate3d(0, -120px, 0) !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image img {
  transform: none !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(1),
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(2),
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(3),
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(4),
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(5),
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav li:nth-child(6) {
  opacity: 1 !important;
  transition-delay: 0s !important;
}

body.iee-motion-v2.iee-intro-revealing .iee-header .elementor-widget-image,
body.iee-motion-v2.iee-intro-revealing .iee-header .elementor-widget-image img,
body.iee-motion-v2.iee-intro-revealing .iee-header .iee-nav-wrap,
body.iee-motion-v2.iee-intro-revealing .iee-hero-title .elementor-heading-title {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image,
body.iee-motion-v2.iee-intro-active .iee-header .elementor-widget-image img { transition-delay: .24s !important; }
body.iee-motion-v2.iee-intro-active .iee-header .iee-nav-wrap { transition-delay: .28s !important; }
body.iee-motion-v2.iee-intro-active .iee-hero-title .iee-hero-line-1 .elementor-heading-title { transition-delay: .5s !important; }
body.iee-motion-v2.iee-intro-active .iee-hero-title .iee-hero-line-2 .elementor-heading-title { transition-delay: .62s !important; }
body.iee-motion-v2.iee-intro-active .iee-hero-title .iee-hero-line-3 .elementor-heading-title { transition-delay: .74s !important; }

body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-button,
body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-html,
body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: 0 !important;
  filter: blur(3px) !important;
  transform: translate3d(0, 14px, 0) !important;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1), filter .9s cubic-bezier(.4, 0, .2, 1), transform .95s cubic-bezier(.4, 0, .2, 1) !important;
}

body.iee-motion-v2.iee-hero-content-entering.iee-hero-content-visible .iee-hero-media .elementor-widget-button,
body.iee-motion-v2.iee-hero-content-entering.iee-hero-content-visible .iee-hero-media .elementor-widget-html,
body.iee-motion-v2.iee-hero-content-entering.iee-hero-content-visible .iee-hero-media .elementor-widget-iee-trust-bar {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) !important;
}

body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-button:nth-child(1) { transition-delay: .1s !important; }
body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-button:nth-child(2) { transition-delay: .22s !important; }
body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-html,
body.iee-motion-v2.iee-hero-content-entering .iee-hero-media .elementor-widget-iee-trust-bar { transition-delay: .36s !important; }

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready {
  border: 1px solid rgba(255, 255, 255, .32) !important;
  background: rgba(3, 11, 45, .58) !important;
  box-shadow: 0 8px 26px rgba(3, 11, 45, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translate3d(0, 0, 0) scale(1);
  transition: border-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-bg {
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, #ffb770 0, #f2763b 38%, #c64b1d 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-glow {
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 244, 225, .72), transparent 58%);
  filter: none;
  opacity: .3;
  transform: scale(.45);
  transition: opacity .35s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .iee-glass-white {
  display: none;
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-text {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(3, 11, 45, .28);
}

/* Same treatment as the text above: forced white unconditionally (not just
   on hover) so the WhatsApp icon stays solid white through every state,
   including the glass-hover swap to an orange background — a font icon
   with no explicit color would otherwise inherit something translucent
   from an ancestor here and read as a washed-out grey blob against orange. */
body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-icon,
body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-icon i {
  color: #fff !important;
  opacity: 1 !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-icon svg {
  fill: #fff !important;
  opacity: 1 !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-text::before,
body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-text::after {
  content: none !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::before,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::after {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  content: "";
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::before {
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, .46);
  transform: translate3d(-50%, -50%, 0) scaleX(1);
  transition: opacity .2s ease, transform .35s ease;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::after {
  top: 50%;
  left: 50%;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, .46);
  transform: translate3d(-50%, -50%, 0) scaleY(1);
  transition: opacity .2s ease, transform .35s ease;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:hover,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:focus-visible {
  border-color: rgba(255, 190, 124, .82) !important;
  box-shadow: 0 14px 34px rgba(3, 11, 45, .26), 0 0 0 1px rgba(255, 184, 112, .12);
  outline: none;
  transform: translate3d(0, -2px, 0) scale(1.018);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-glow {
  opacity: .9;
  transform: scale(1);
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:hover::before,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:focus-visible::before,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:hover::after,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:focus-visible::after {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.2);
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:active {
  box-shadow: 0 5px 16px rgba(3, 11, 45, .14);
  transform: translate3d(0, 0, 0) scale(.985);
  transition-duration: .1s !important;
}

html body.iee-reveal-ready .iee-reveal-item {
  will-change: auto !important;
}

body.iee-motion-v2 .iee-process-wheel,
body.iee-motion-v2 .iee-hero-media .iee-glass-bg,
body.iee-motion-v2 .iee-hero-media .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .iee-glass-white {
  will-change: auto !important;
}

/* Technical wireframe CTA. */
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready {
  --ie-wire: #ff9a63;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  background: rgba(3, 11, 45, .62) !important;
  box-shadow: 0 9px 28px rgba(3, 11, 45, .22);
  transform: translate3d(0, 0, 0);
  transition: box-shadow .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), clip-path .45s cubic-bezier(.16, 1, .3, 1) !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button {
  --ie-wire: #a9edf4;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent 0 18%, var(--ie-wire) 26%, transparent 34% 68%, var(--ie-wire) 76%, transparent 84% 100%);
  content: "";
  opacity: .38;
  pointer-events: none;
  transform: rotate(-105deg) scale(1.45);
  transition: opacity .3s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::after {
  position: absolute;
  inset: 5px;
  z-index: 2;
  background:
    linear-gradient(var(--ie-wire), var(--ie-wire)) left top / 10px 1px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) left top / 1px 8px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) right top / 10px 1px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) right top / 1px 8px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) left bottom / 10px 1px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) left bottom / 1px 8px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--ie-wire), var(--ie-wire)) right bottom / 1px 8px no-repeat;
  content: "";
  opacity: .42;
  pointer-events: none;
  transform: scale(.92);
  transition: opacity .3s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .iee-glass-bg {
  border-radius: 0;
  background-color: rgba(3, 11, 45, .7) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-position .55s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .iee-glass-glow {
  inset: -25% 0;
  width: auto;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ie-wire) 72%, transparent) 49%, var(--ie-wire) 50%, color-mix(in srgb, var(--ie-wire) 72%, transparent) 51%, transparent 65%);
  filter: none;
  opacity: 0;
  transform: translate3d(0, -55%, 0);
  transition: opacity .2s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible {
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  box-shadow: 0 14px 34px rgba(3, 11, 45, .28), 0 0 18px color-mix(in srgb, var(--ie-wire) 24%, transparent);
  outline: none;
  transform: translate3d(0, -2px, 0);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover::before,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible::before {
  opacity: .95;
  transform: rotate(105deg) scale(1.45);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover::after,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible::after {
  opacity: .9;
  transform: scale(1);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-bg,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-bg {
  background-position: 0 4px, 4px 0 !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-glow {
  opacity: .62;
  transform: translate3d(0, 55%, 0);
}

/* Elastic outline CTA. */
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready {
  --ie-elastic-color: #ff9b65;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 10px !important;
  clip-path: none;
  background: rgba(3, 11, 45, .4) !important;
  box-shadow: 0 8px 26px rgba(3, 11, 45, .16);
  transform: translate3d(0, 0, 0);
  transition: border-color .3s ease, box-shadow .3s ease, transform 450ms linear(0, .3942, .904, 1.115, 1.1014, 1.0313, .9905, .9848, .9931, 1, 1, 1.0013, 1.0002, 1, 1) !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button {
  --ie-elastic-color: #a9edf4;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::before,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::after {
  content: none !important;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-bg {
  border-radius: inherit;
  background: rgba(3, 11, 45, .3) !important;
  background-image: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.iee-motion-v2 .iee-hero-media .iee-glass-glow {
  display: none;
}

body.iee-motion-v2 .iee-hero-media .iee-cta-elastic-outline {
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  opacity: .58;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible {
  border-color: color-mix(in srgb, var(--ie-elastic-color) 58%, white) !important;
  clip-path: none;
  box-shadow: 0 13px 32px rgba(3, 11, 45, .23), 0 0 18px color-mix(in srgb, var(--ie-elastic-color) 16%, transparent);
  outline: none;
  transform: translate3d(0, -2px, 0);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-cta-elastic-outline,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-cta-elastic-outline,
body.iee-motion-v2 .iee-hero-media .elementor-button.is-elastic-active .iee-cta-elastic-outline {
  border-color: var(--ie-elastic-color);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--ie-elastic-color) 14%, transparent), 0 0 9px color-mix(in srgb, var(--ie-elastic-color) 22%, transparent);
  opacity: 1;
}

/* Selected expanding arrow capsule CTA. */
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button {
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 999px !important;
  clip-path: none;
  background: rgba(3, 11, 45, .3) !important;
  box-shadow: 0 8px 26px rgba(3, 11, 45, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform: translate3d(0, 0, 0);
  transition: border-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::before,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready::after {
  content: none !important;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-bg {
  border-radius: inherit;
  background: rgba(3, 11, 45, .56) !important;
  background-image: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.iee-motion-v2 .iee-hero-media .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .iee-glass-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 10%, rgba(255, 112, 49, .38) 68%, rgba(255, 190, 124, .5) 100%);
  filter: none;
  opacity: 0;
  transform: scaleX(.62);
  transform-origin: right center;
  transition: opacity .35s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-glow {
  opacity: 1;
  transform: scaleX(1);
}

body.iee-motion-v2 .iee-hero-media .iee-cta-arrow {
  position: absolute;
  top: 50%;
  right: 9px;
  z-index: 4;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ie-orange);
  box-shadow: 0 5px 14px rgba(143, 48, 12, .32);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(16px, -50%, 0) scale(.65) rotate(-28deg);
  transition: opacity .3s ease, transform .58s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .iee-cta-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-cta-arrow,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-cta-arrow {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1) rotate(0);
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-content-wrapper {
  transition: transform .58s cubic-bezier(.16, 1, .3, 1);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .elementor-button-content-wrapper,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .elementor-button-content-wrapper {
  transform: translate3d(-14px, 0, 0);
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible {
  border-color: rgba(255, 190, 124, .82) !important;
  clip-path: none;
  box-shadow: 0 14px 34px rgba(3, 11, 45, .26), 0 0 0 1px rgba(255, 184, 112, .12);
  transform: translate3d(0, -2px, 0);
}

/* The hover state used to briefly widen these buttons (239px / 182px) and
   shift the first one left to compensate — neither button kept a stable
   width across hover, which read as the button "shrinking" back afterwards.
   Removed: hover no longer touches width at all. */

/* Figma 143:632 and 143:635 hero CTA glass styling. */
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button {
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, .004) !important;
  box-shadow: none;
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  transform: none;
  transition: background-color .32s ease, box-shadow .32s ease, transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .19) !important;
  background-image: none !important;
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  overflow: hidden;
  transition: background-color .35s ease, backdrop-filter .35s ease;
}

body.iee-motion-v2 .iee-hero-media .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .iee-glass-glow {
  position: absolute;
  inset: -65% !important;
  z-index: 0;
  display: block !important;
  width: auto !important;
  border-radius: 50%;
  background: conic-gradient(from 90deg at 40% -25%, #daf4f7, rgba(218, 244, 247, .75), rgba(218, 244, 247, .35), transparent, rgba(218, 244, 247, .35), rgba(218, 244, 247, .75), #daf4f7) !important;
  filter: blur(5px) !important;
  opacity: 0;
  transform: rotate(-35deg) scale(.8);
  transition: none;
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-text {
  font-family: var(--ie-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-shadow: none;
  transition: color .3s ease;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:hover,
body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:focus-visible,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button.iee-glass-ready:hover,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button.iee-glass-ready:focus-visible {
  border: 0 !important;
  background: rgba(0, 0, 0, .004) !important;
  box-shadow: none !important;
  outline: none;
  transform: none !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:hover .iee-glass-glow,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:focus-visible .iee-glass-glow {
  animation: iee-glass-glow-sweep 1.1s linear both;
}

@keyframes iee-glass-glow-sweep {
  0% {
    opacity: 0;
    transform: rotate(-35deg) scale(.8);
  }
  28% {
    opacity: .4;
  }
  62% {
    opacity: .24;
  }
  100% {
    opacity: 0;
    transform: rotate(145deg) scale(2);
  }
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .iee-glass-bg,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .iee-glass-bg,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:hover .iee-glass-bg,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:focus-visible .iee-glass-bg {
  background: #f8f8f8 !important;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background-color 1.1s linear, backdrop-filter 1.1s linear;
}

body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
  transition: color .3s ease;
}

body.iee-motion-v2 .iee-hero-media .elementor-button.iee-glass-ready:active,
body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button.iee-glass-ready:active {
  border: 0 !important;
  background: rgba(52, 18, 5, .5) !important;
  box-shadow: 0 4px 12px rgba(3, 11, 45, .18) !important;
  transform: translate3d(0, 0, 0) scale(.985) !important;
  transition-duration: .12s !important;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .elementor-button-content-wrapper,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .elementor-button-content-wrapper {
  transform: none;
}

body.iee-motion-v2 .iee-hero-media .elementor-button:hover .elementor-button-text,
body.iee-motion-v2 .iee-hero-media .elementor-button:focus-visible .elementor-button-text {
  color: #10162a !important;
  transition: color 1s linear .08s;
}

@media (min-width: 768px) {
  /* Base (in-hero, not yet stuck) width. Deliberately plain selectors — no
     :has(:hover) companions — so nothing here can out-specificity the
     .iee-hero-ctas-stuck width rule further down during hover. */
  body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(1) {
    width: 197px !important;
    transform: none;
  }

  body.iee-motion-v2 .iee-hero-media .elementor-widget-button:nth-child(2) {
    width: 140px !important;
    transform: none;
  }
}

/* Figma 143:989 challenge section. */
.iee-challenge-intro--enhanced {
  position: relative;
  height: 253px !important;
  min-height: 253px !important;
  padding: 52px 0 0 !important;
  overflow: visible !important;
}

.iee-challenge-intro--enhanced > .elementor-container {
  display: grid !important;
  grid-template-columns: 618px 436px;
  column-gap: 39px;
  align-items: start;
  width: 1140px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

.iee-challenge-intro--enhanced > .elementor-container > .elementor-column {
  width: auto !important;
}

.iee-challenge-intro--enhanced > .elementor-container > .elementor-column:last-child {
  padding-top: 46px;
}

.iee-challenge-intro--enhanced h2.elementor-heading-title {
  width: 618px;
  margin: 0;
  color: #f7f8fa !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 35px !important;
  font-weight: 500 !important;
  line-height: 45px !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

.iee-challenge-intro--enhanced .iee-challenge-muted {
  color: #8d93a2;
}

.iee-challenge-intro.iee-challenge-intro--enhanced .elementor-widget-text-editor {
  width: 436px;
  margin: 0;
  color: #f7f8fa;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px !important;
}

.iee-challenge-chrome {
  position: absolute;
  z-index: 2;
  top: 185px;
  right: 0;
  left: max(20px, calc((100% - 1140px) / 2));
  height: 27px;
}

.iee-challenge-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 13px;
  border-radius: 5px;
  background: #dc6838;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.iee-challenge-rule,
.iee-challenge-footer-rule {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) .5px, transparent .65px);
  background-position: left center;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.iee-challenge-rule {
  top: 14px;
}

.iee-challenge-cards--enhanced {
  position: relative;
  height: 456px;
  min-height: 456px;
  margin-top: -31px;
  padding: 0 !important;
  overflow: hidden;
}

.iee-challenge-cards--enhanced > .iee-challenge-track {
  --iee-challenge-shift: 0px;
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 15px;
  width: 1525px !important;
  max-width: none !important;
  margin: 0 0 0 max(20px, calc((100% - 1140px) / 2)) !important;
  transform: translate3d(var(--iee-challenge-shift), 31px, 0);
  cursor: grab;
  touch-action: pan-y;
  transition: transform 90ms linear;
  user-select: none;
  will-change: transform;
}

.iee-challenge-cards--enhanced > .iee-challenge-track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.iee-challenge-cards--enhanced > .iee-challenge-track::after {
  content: "";
  flex: 0 0 180px;
}

.iee-challenge-track > .iee-challenge-card {
  position: relative;
  flex: 0 0 370px !important;
  width: 370px !important;
  max-width: 370px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.iee-reveal-ready .iee-challenge-cards--enhanced .iee-challenge-card {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 24px, 0);
  transition-property: opacity, filter, transform;
  transition-duration: .76s, .76s, .86s;
  transition-delay: var(--iee-challenge-delay, 0ms) !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

body.iee-reveal-ready .iee-challenge-cards--enhanced.iee-visible .iee-challenge-card {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.iee-challenge-card > .elementor-column-wrap,
.iee-challenge-card > .elementor-widget-wrap {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  overflow: visible !important;
}

.iee-challenge-card .elementor-widget-image {
  margin: 0 0 10px !important;
}

.iee-challenge-card .elementor-widget-image img {
  display: block;
  width: 370px !important;
  height: 200px !important;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
}

.iee-challenge-cards--enhanced .iee-challenge-card .elementor-widget-text-editor,
.iee-challenge-card p {
  width: 367px;
  margin: 0 0 20px !important;
  color: #f7f8fa !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
}

.iee-challenge-number {
  position: absolute;
  z-index: 10;
  top: -31px;
  left: 10px;
  width: 32px;
  height: 59px;
  pointer-events: none;
}

.iee-challenge-number svg {
  display: block;
  width: 32px;
  height: 59px;
  overflow: visible;
}

.iee-challenge-number text {
  fill: none;
  stroke: #dc6838;
  stroke-width: 1px;
  stroke-dasharray: 4 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 600;
}

.iee-challenge-drag {
  --iee-drag-size: 100px;
  position: absolute;
  z-index: 4;
  top: var(--iee-drag-y, 78px);
  left: var(--iee-drag-x, max(399px, calc((100% - 1140px) / 2 + 379px)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--iee-drag-size);
  height: var(--iee-drag-size);
  border-radius: 50%;
  background: rgba(50 56 65 / 26%);
  backdrop-filter: blur(12px);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(.76);
  transition: opacity 180ms ease, filter 220ms ease, transform 300ms linear(0, 0.5183, 0.9652, 1.0541, 1.0243, 1.0012, 0.9971, 0.9988, 1, 1);
  will-change: opacity, filter, transform;
  pointer-events: none;
}

.iee-challenge-cards--enhanced.has-drag-cursor .iee-challenge-drag {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .iee-challenge-cards--enhanced > .iee-challenge-track,
  .iee-challenge-cards--enhanced > .iee-challenge-track.is-dragging {
    cursor: none;
  }
}

.iee-challenge-drag-arrow {
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.iee-challenge-drag-arrow--left {
  transform: rotate(-135deg);
}

.iee-challenge-drag-arrow--right {
  transform: rotate(45deg);
}

.iee-challenge-footer {
  position: absolute;
  z-index: 2;
  top: 337px;
  right: 0;
  left: max(20px, calc((100% - 1140px) / 2));
  height: 41px;
}

.iee-challenge-footer-rule {
  top: 0;
}

.iee-challenge-footer p {
  margin: 20px 0 0;
  color: #f7f8fa;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.iee-challenge-footer strong {
  color: #f7f8fa;
  font-weight: 500;
}

@media (max-width: 1180px) {
  .iee-challenge-intro--enhanced {
    height: auto !important;
    min-height: 0 !important;
    padding: 64px 20px 72px !important;
  }

  /* The global rail-cap rule (.elementor-section.elementor-section-full_width
     > .elementor-container { width:min(1140px, calc(100% - 40px)) }) beats
     this at equal specificity and re-narrows + auto-centers the container,
     adding a second 20px inset on top of this section's own 20px padding —
     which is why the title/copy sit 40px in instead of flush with the cards
     track below. Out-specify it explicitly so width:100% actually wins here. */
  body.elementor-page .elementor-section.elementor-section-full_width.iee-challenge-intro--enhanced > .elementor-container {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .iee-challenge-intro--enhanced > .elementor-container > .elementor-column:last-child {
    padding-top: 0;
  }

  .iee-challenge-intro--enhanced h2.elementor-heading-title,
  .iee-challenge-intro.iee-challenge-intro--enhanced .elementor-widget-text-editor {
    width: 100%;
  }

  .iee-challenge-chrome {
    top: auto;
    right: 0;
    bottom: 27px;
    left: 20px;
  }

  .iee-challenge-cards--enhanced > .iee-challenge-track {
    margin-left: 20px !important;
  }

  .iee-challenge-drag {
    display: none;
  }

  .iee-challenge-footer {
    left: 20px;
  }
}

/* Tablet-tier taper for section headings that only had a base (desktop)
   size and a phone-width override — without this they sat at the full
   35px desktop size through the whole 768-1024px range, noticeably
   bigger than the hero's own tablet size (40px) for that width. Placed
   ahead of the 767px blocks below so those narrower overrides still win
   at phone widths despite matching this same source-order tie. */
@media (max-width: 1024px) {
  .iee-challenge-intro--enhanced h2.elementor-heading-title,
  .iee-results-top h2,
  .iee-industries-copy h2 {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  /* Extra .iee-solutions-intro--enhanced / .iee-process-intro repeat below
     is a specificity bump, not a typo — their base (desktop) rule is also
     !important, and at equal specificity a later, unconditional rule beats
     an earlier @media one regardless of viewport, so this needs to outrank
     it rather than out-order it. */
  .iee-solutions-intro--enhanced.iee-solutions-intro--enhanced h2.elementor-heading-title,
  body.elementor-page.elementor-page .iee-process-intro h2.elementor-heading-title {
    font-size: 28px !important;
    line-height: 34px !important;
  }
}

@media (max-width: 767px) {
  .iee-challenge-intro--enhanced {
    padding-top: 48px !important;
  }

  .iee-challenge-intro--enhanced h2.elementor-heading-title {
    font-size: 24px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    white-space: normal;
  }

  .iee-challenge-cards--enhanced {
    height: 475px;
    min-height: 475px;
  }

  .iee-challenge-desktop-break {
    display: none;
  }

  .iee-challenge-cards--enhanced > .iee-challenge-track {
    gap: 12px;
    width: max-content !important;
  }

  .iee-challenge-cards--enhanced > .iee-challenge-track::after {
    flex-basis: 64px;
  }

  .iee-challenge-track > .iee-challenge-card {
    flex-basis: min(82vw, 370px) !important;
    width: min(82vw, 370px) !important;
  }

  .iee-challenge-card .elementor-widget-image img,
  .iee-challenge-cards--enhanced .iee-challenge-card .elementor-widget-text-editor,
  .iee-challenge-card p {
    width: 100% !important;
  }

  .iee-challenge-footer {
    top: 300px;
    right: 20px;
    height: 142px;
  }

  .iee-challenge-footer p {
    padding-right: 12px;
  }
}

/* Figma 143:1033 solutions introduction. */
.iee-solutions-intro.iee-solutions-intro--enhanced {
  padding: 40px 0 36px !important;
}

.iee-solutions-intro--enhanced > .elementor-container {
  align-items: flex-start;
}

.iee-solutions-intro--enhanced > .elementor-container > .elementor-column:first-child {
  flex: 0 0 570px;
  width: 570px !important;
}

.iee-solutions-intro--enhanced > .elementor-container > .elementor-column:last-child {
  flex: 0 0 570px;
  width: 570px !important;
  padding-top: 4px;
}

.iee-solutions-intro--enhanced .elementor-widget-heading,
.iee-solutions-intro--enhanced h2.elementor-heading-title {
  width: 512px;
}

.iee-solutions-intro--enhanced h2.elementor-heading-title {
  margin: 0;
  color: #050c2c !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 35px !important;
  font-weight: 500 !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
}

.iee-solutions-intro--enhanced h2.elementor-heading-title span {
  color: #838383 !important;
}

.iee-solutions-intro.iee-solutions-intro--enhanced .elementor-widget-text-editor {
  width: 570px;
  margin: 0;
  color: #5d5d5d !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
}

.iee-solutions-intro-cta.elementor-widget {
  margin-top: 25px;
}

.iee-solutions-intro-cta.elementor-widget .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 231px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(5, 12, 44, .1) !important;
  color: #111 !important;
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-decoration: none;
  transition: background-color 280ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.iee-solutions-intro-cta.elementor-widget .elementor-button:hover,
.iee-solutions-intro-cta.elementor-widget .elementor-button:focus-visible {
  background: rgba(5, 12, 44, .16) !important;
  color: #111 !important;
  outline: none;
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .iee-solutions-intro.iee-solutions-intro--enhanced {
    padding: 72px 20px 20px !important;
  }

  /* Same rail-cap specificity fight as the challenges intro above — out-
     specify the global container-width-cap rule so this actually goes
     full-width instead of getting re-centered with an extra 20px inset. */
  body.elementor-page .elementor-section.elementor-section-full_width.iee-solutions-intro--enhanced > .elementor-container {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .iee-solutions-intro--enhanced > .elementor-container > .elementor-column:first-child,
  .iee-solutions-intro--enhanced > .elementor-container > .elementor-column:last-child,
  .iee-solutions-intro--enhanced .elementor-widget-heading,
  .iee-solutions-intro--enhanced h2.elementor-heading-title,
  .iee-solutions-intro.iee-solutions-intro--enhanced .elementor-widget-text-editor {
    flex-basis: auto;
    width: 100% !important;
  }

  .iee-solutions-intro--enhanced > .elementor-container > .elementor-column:last-child {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .iee-solutions-intro--enhanced.iee-solutions-intro--enhanced h2.elementor-heading-title {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

/* Figma 2033:4 scroll-driven solutions pointers. */
.iee-solutions.iee-solutions--enhanced {
  position: relative;
  min-height: 0;
  padding: 58px 0 68px !important;
  overflow: hidden !important;
}

.iee-solutions--enhanced > .iee-solutions-panel {
  position: relative !important;
  top: auto !important;
  display: block !important;
  width: 1140px !important;
  max-width: 1140px !important;
  height: auto;
  margin: 0 auto !important;
}

/* Desktop: one shared image tracks whichever row is active (matches the
   Figma reference) — click or scroll through the list to change it. Each
   row's own <img> stays in the markup (so mobile below can keep showing
   every row expanded with its own inline image, unchanged) but on desktop
   they're absolutely stacked in the same top-right spot, cross-fading via
   .is-active. The list reserves that space with padding-right rather than
   a grid column, specifically so each row's dotted border-bottom — drawn
   on the full-width row-copy box, padding included — runs the full
   component width instead of stopping at a text column. Figma has no
   border above the first row and no gap between a row's own content and
   its divider beyond a fixed 40px, hence border-bottom (not border-top)
   with zero top padding: the divider belongs to the row above it, not
   the row below. Mobile resets all of this back to plain always-expanded
   rows further down, in the existing max-width:1180px block. */
.iee-solution-rows {
  position: relative;
  display: flex;
  flex-direction: column;
}

.iee-solution-row {
  display: contents;
}

.iee-solution-row-copy {
  padding: 0 610px 40px 0;
  border-bottom: 1px dotted #adadad;
  cursor: pointer;
}

/* First row sits flush at the top of the list — only the 2nd/3rd rows
   need top padding to clear the divider above them. */
.iee-solution-row:not(:first-child) .iee-solution-row-copy {
  padding-top: 40px;
}

.iee-solutions--enhanced .iee-solution-pointer {
  margin: 0 !important;
}

.iee-solutions--enhanced .iee-solution-pointer h2 {
  margin: 0;
  color: var(--iee-det-idle, #a4a4a4) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
  transition: color 0.25s ease;
}

.iee-solution-row.is-active .iee-solutions--enhanced .iee-solution-pointer h2,
.iee-solutions--enhanced .iee-solution-row.is-active .iee-solution-pointer h2 {
  color: transparent !important;
  background: linear-gradient(79deg, #c44614 1%, #db6536 33%, #f0aa5e 79%, #ffcb93 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.elementor-page .iee-solutions--enhanced .iee-solution-description {
  position: relative !important;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0 !important;
  height: 0;
  color: #5d5d5d !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  opacity: 0 !important;
  overflow: hidden;
  transform: none !important;
  transition: opacity 0.25s ease, height 0.25s ease, margin 0.25s ease;
}

body.elementor-page .iee-solutions--enhanced .iee-solution-row.is-active .iee-solution-description {
  margin: 17px 0 0 !important;
  height: auto;
  opacity: 1 !important;
}

.iee-solution-row-image {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 570px;
  height: 250px;
  border-radius: 10px;
  object-fit: cover;
  background: #d9d9d9;
  opacity: 0;
  /* top is driven by main.js — it steps the image down to track whichever
     row is active, from flush with the list top (row 1) to flush with
     the list bottom (the last row). */
  transition: opacity 0.35s ease, top 0.35s ease;
}

.iee-solution-row.is-active .iee-solution-row-image {
  opacity: 1;
}

/* Figma 707:2 key-partner marquee, with live HTML structure. */
.iee-partners.iee-partners--enhanced {
  min-height: 142px;
  padding: 28px 0 32px !important;
  overflow: hidden;
}

.iee-partners-shell {
  width: 100%;
  margin: 0 auto;
}

.iee-partners-heading {
  margin: 0;
  color: #050c2c;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.22, 1, .36, 1);
}

.iee-partners-marquee {
  /* Full viewport width regardless of the section's own 1140px rail cap —
     the old JS-built version bypassed that cap entirely by replacing the
     section's children directly (discarding Elementor's own
     .elementor-container wrapper, which carries the cap); the widget
     keeps that wrapper intact, so this needs the same break-out trick
     already used for the Industries/About marquee (.iee-marquee). */
  width: 100vw;
  margin-top: 11px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.iee-partners-track,
.iee-partners-group {
  display: flex;
  width: max-content;
}

.iee-partners-track {
  animation: iee-partners-marquee 128s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.iee-partners--enhanced.is-visible .iee-partners-track {
  animation-play-state: running;
}

.iee-partners-group {
  flex: none;
  display: flex;
}

.iee-partner {
  display: flex;
  flex: 0 0 180px;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 96px;
  padding: 0 20px;
  border-right: 1px dotted #c3c3c3;
  box-sizing: border-box;
}

.iee-partners--enhanced.is-visible .iee-partners-heading {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.iee-partner img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 66px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* The track holds N real repeats then the same N again (aria-hidden), so
   translating exactly half its own rendered width always lands on an
   identical repeat boundary — seamless at any viewport width. */
@keyframes iee-partners-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (hover: hover) {
  .iee-partners-marquee:hover .iee-partners-track {
    animation-play-state: paused;
  }
}

/* Figma 88:4065 results and outcome composition. */
.iee-results-intro.iee-results-intro--enhanced {
  min-height: 563px;
  padding: 65px 0 60px !important;
  overflow: hidden;
}

.iee-results--legacy[hidden] {
  display: none !important;
}

.iee-results-shell {
  width: 1140px;
  max-width: calc(100% - 40px);
  height: 438px;
  margin: 0 auto;
}

.iee-results-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 118px;
}

.iee-results-top h2 {
  width: 381px;
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: 0;
}

.iee-results-top h2 span {
  display: block;
  color: #8f94a5;
  white-space: nowrap;
}

.iee-results-top h2 strong {
  color: #fff;
  font: inherit;
}

.iee-results-top p {
  width: 526px;
  margin: 20px 0 0;
  color: #f5fbfd;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.iee-results-outcome {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 27px;
  margin-top: 20px;
  border-bottom: 1px dotted rgba(255, 255, 255, .3);
}

.iee-results-outcome span {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 10px;
  border: 1px dotted rgba(255, 255, 255, .3);
  border-bottom: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.iee-results-cards {
  display: grid;
  grid-template-columns: repeat(3, 370px);
  gap: 15px;
  width: 1140px;
  height: 200px;
  margin-top: 19px;
}

.iee-result-card {
  --iee-scan-x: 50%;
  --iee-scan-y: 50%;
  --iee-texture-x: 0px;
  --iee-texture-y: 0px;
  --iee-content-x: 0px;
  --iee-content-y: 0px;
  --iee-arrow-x: 0px;
  --iee-arrow-y: 0px;
  position: relative;
  isolation: isolate;
  height: 200px;
  padding: 20px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(67.34deg, #c44614 1.13%, #db6536 36.31%, #f0aa5e 88.89%, #ffe9d1 108.73%);
  box-shadow: 0 0 0 rgba(5, 12, 44, 0);
  color: #fff;
  transition: box-shadow 320ms ease;
}

.iee-result-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: plus-lighter;
  opacity: .15;
  pointer-events: none;
  transform: translate3d(var(--iee-texture-x), var(--iee-texture-y), 0) scale(1.06);
  transition: opacity 320ms ease, transform 180ms ease-out;
  content: "";
}

.iee-result-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle 150px at var(--iee-scan-x) var(--iee-scan-y), rgba(255, 255, 255, .42), rgba(255, 231, 201, .16) 42%, transparent 72%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  content: "";
}

.iee-result-card:nth-child(1)::before {
  background-image: url("assets/images/results-textures/dark-rattan-background-2x.jpg");
  background-position: 50% 49%;
  background-size: 106.8% auto;
}

.iee-result-card:nth-child(2)::before {
  background-image: url("assets/images/results-textures/circular-dot-texture-2x.jpg");
  background-position: 50% 50%;
  background-size: 260.6% auto;
  opacity: .25;
}

.iee-result-card:nth-child(3)::before {
  background-image: url("assets/images/results-textures/grunge-metal-background-2x.jpg");
  background-position: 29% 50%;
  background-size: 134.6% auto;
}

.iee-result-card h3,
.iee-result-card strong {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  transform: translate3d(var(--iee-content-x), var(--iee-content-y), 0);
  transition: transform 150ms ease-out;
}

.iee-result-card h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
}

.iee-result-card strong {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 45px;
  font-weight: 500;
  line-height: 59px;
}

.iee-result-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 17px;
  z-index: 1;
  display: block;
  width: auto;
  height: 59px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 76px;
  font-weight: 300;
  line-height: 59px;
  transform: translate3d(var(--iee-arrow-x), var(--iee-arrow-y), 0);
  transition: transform 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .iee-result-card:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 28px rgba(5, 12, 44, .16);
  }

  .iee-result-card:hover::before {
    opacity: .28;
  }

  .iee-result-card:hover::after {
    opacity: 1;
  }
}

.iee-results-takeaway {
  display: flex;
  align-items: center;
  width: 1020px;
  height: 32px;
  min-height: 32px;
  margin: 22px auto 0;
  padding: 0 8px;
  border: 1px dotted rgba(255, 255, 255, .3);
  border-radius: 100px;
  box-sizing: border-box;
  color: #fff;
}

.iee-results-takeaway > span {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url("assets/images/results-textures/tick-circle-solid.svg") center / contain no-repeat;
}

.iee-results-takeaway p {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
}

/* Figma 2039:6 process map and alternating step rhythm. */
body.elementor-page .iee-process-intro {
  min-height: 287px;
  padding: 70px 0 63px !important;
}

body.elementor-page .iee-process-intro > .elementor-container {
  width: 1140px !important;
  max-width: calc(100% - 40px) !important;
  height: 154px;
}

body.elementor-page .iee-process-intro .elementor-widget-wrap {
  display: block;
  padding: 0 !important;
}

body.elementor-page .iee-process-intro .elementor-widget-heading,
body.elementor-page .iee-process-intro h2.elementor-heading-title {
  width: 410px !important;
  margin: 0 auto !important;
}

body.elementor-page .iee-process-intro h2.elementor-heading-title {
  color: #050c2c !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 35px !important;
  font-weight: 500 !important;
  line-height: 42px !important;
  text-align: center;
}

body.elementor-page .iee-process-intro h2.elementor-heading-title span {
  color: #8f94a5 !important;
  white-space: nowrap;
}

body.elementor-page .iee-process-intro .elementor-widget-text-editor {
  width: 718px !important;
  margin: 10px auto 0 !important;
  color: #5d5d5d !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: center;
}

body.elementor-page .iee-steps {
  min-height: 853px;
  padding: 0 0 60px !important;
}

body.elementor-page .iee-steps > .elementor-container {
  width: 1140px !important;
  max-width: calc(100% - 40px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.elementor-page .iee-steps .elementor-column,
body.elementor-page .iee-steps .elementor-widget-wrap,
body.elementor-page .iee-steps .elementor-widget-html {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.elementor-page .iee-process-map {
  position: relative;
  width: 1139px;
  max-width: 100%;
  height: 793px;
  margin: 0 auto;
}

body.elementor-page .iee-process-map::after {
  position: absolute;
  top: calc(244px + var(--ie-wheel-y, 0px));
  left: 50%;
  width: 0;
  height: calc(549px - var(--ie-wheel-y, 0px));
  border-left: 1px dotted #adadad;
  content: "";
}

body.elementor-page .iee-process-wheel {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  display: block;
  width: 230px !important;
  height: 230px !important;
  margin: 0 !important;
  object-fit: contain;
  transform: translateX(-50%) translateY(var(--ie-wheel-y, 0px)) rotate(var(--ie-wheel-rotate, 0deg)) !important;
  transform-origin: center;
}

body.elementor-page .iee-process-map .iee-step {
  position: absolute !important;
  width: 406px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.elementor-page .iee-process-map .iee-step::before {
  position: absolute;
  top: 27px;
  left: 0;
  width: 100%;
  border-top: 1px dotted #adadad;
  content: "";
}

body.elementor-page .iee-process-map .iee-step > span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px dotted #adadad;
  box-sizing: border-box;
  color: #dc6838;
  background: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

body.elementor-page .iee-process-map .iee-step h3 {
  position: absolute;
  top: 43px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #050c2c;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

body.elementor-page .iee-process-map .iee-step p {
  position: absolute;
  top: 74px;
  left: 0;
  width: 406px;
  margin: 0;
  color: #5d5d5d;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

body.elementor-page .iee-process-map .iee-step-1 { top: 0; left: 0; height: 179px; }
body.elementor-page .iee-process-map .iee-step-2 { top: 151px; right: 0; height: 179px; }
body.elementor-page .iee-process-map .iee-step-3 { top: 324px; left: 0; height: 158px; }
body.elementor-page .iee-process-map .iee-step-4 { top: 476px; right: 0; height: 158px; }
body.elementor-page .iee-process-map .iee-step-5 { top: 628px; left: 0; height: 158px; }

/* Figma 2039:7 industries served composition. */
.iee-industries.iee-industries--enhanced {
  min-height: 0;
  padding: 60px 0 80px !important;
  overflow: visible !important;
}

.iee-industries-shell {
  position: relative;
  display: grid;
  grid-template-columns: 568px 572px;
  width: 1140px;
  max-width: calc(100% - 40px);
  height: 880px;
  margin: 0 auto;
}

.iee-industries-copy {
  position: static;
  align-self: start;
}

.iee-industries-copy h2 {
  width: 568px;
  margin: 0;
  color: #050c2c;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0;
}

.iee-industries-copy h2 span {
  color: #8f94a5;
}

.iee-industries-copy > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 231px;
  height: 50px;
  margin-top: 20px;
  border: 0;
  border-radius: 10px;
  color: #111;
  background: rgba(5, 12, 44, .1);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-decoration: none;
  transition: background-color 280ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.iee-industries-copy > a:hover,
.iee-industries-copy > a:focus-visible {
  background: rgba(5, 12, 44, .16);
  outline: none;
  transform: translateY(-2px);
}

.iee-industries-panel {
  width: 572px;
  height: 880px;
  padding: 44px 61px 45px;
  border-radius: 10px;
  box-sizing: border-box;
  background: linear-gradient(167deg, #c44614 0%, #db6536 33%, #f0aa5e 79%, #ffcb93 100%);
}

.iee-industries-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.iee-industry {
  --iee-industry-y: 0px;
  --iee-industry-opacity: 1;
  position: relative;
  display: flex;
  align-items: center;
  width: 450px;
  height: 100px;
  padding: 0 30px;
  border: 1px dashed #adadad;
  border-radius: 10px;
  box-sizing: border-box;
  color: #050c2c;
  background: #fff;
  opacity: var(--iee-industry-opacity);
  transform: translate3d(0, var(--iee-industry-y), 0);
  will-change: transform;
}

.iee-industry:nth-child(1) { z-index: 7; }
.iee-industry:nth-child(2) { z-index: 6; }
.iee-industry:nth-child(3) { z-index: 5; }
.iee-industry:nth-child(4) { z-index: 4; }
.iee-industry:nth-child(5) { z-index: 3; }
.iee-industry:nth-child(6) { z-index: 2; }
.iee-industry:nth-child(7) { z-index: 1; }

.iee-industry-icon {
  display: flex;
  flex: 0 0 65px;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 60px;
  margin-right: 15px;
}

.iee-industry-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0 !important;
  object-fit: contain;
}

.iee-industry:nth-child(1) .iee-industry-icon img {
  width: 58.5px;
  height: 58px;
}

.iee-industry:nth-child(2) .iee-industry-icon img {
  width: 48px;
  height: 48px;
}

.iee-industry:nth-child(3) .iee-industry-icon img {
  width: 42.5px;
  height: 56.5px;
}

.iee-industry:nth-child(4) .iee-industry-icon img {
  width: 60.5px;
  height: 53.5px;
}

.iee-industry:nth-child(5) .iee-industry-icon img {
  width: 49px;
  height: 47.5px;
}

.iee-industry:nth-child(6) .iee-industry-icon img {
  width: 57px;
  height: 49.5px;
}

.iee-industry:nth-child(7) .iee-industry-icon img {
  width: 49px;
  height: 50px;
}

.iee-industry-name {
  color: #050c2c;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

/* Figma 700:165 trusted-industries text marquee. */
.iee-clients.iee-clients--enhanced {
  position: relative;
  z-index: 2;
  padding: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  background: transparent !important;
}

.iee-clients--enhanced > .elementor-container,
.iee-clients--enhanced .elementor-column,
.iee-clients--enhanced .elementor-widget-wrap {
  width: 100% !important;
  max-width: none !important;
}

.iee-clients--enhanced .elementor-widget-wrap {
  display: block !important;
  padding: 0 !important;
}

.iee-clients-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 48px 0 50px;
  overflow: hidden;
  box-sizing: border-box;
  background: #f5fbfd;
}

.iee-clients-marquee-track,
.iee-clients-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
  width: max-content;
}

.iee-clients-marquee-track {
  animation: iee-clients-marquee 56s linear infinite;
  will-change: transform;
}

.iee-clients-marquee-group {
  gap: 35px;
  padding-right: 35px;
}

.iee-clients-marquee-phrase {
  color: #050c2c;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 22.5px;
  font-weight: 400;
  line-height: 29.5px;
  letter-spacing: 0;
  white-space: nowrap;
}

.iee-clients-marquee-phrase > span {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(78.53deg, #c44614 1.15%, #db6536 33.29%, #f0aa5e 78.65%, #ffcb93 99.44%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.iee-clients-marquee-separator {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #84a7b5;
}

.iee-clients-marquee-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.iee-clients--enhanced .elementor-widget-image {
  width: 100% !important;
  margin: 0 auto !important;
}

@keyframes iee-clients-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (hover: hover) {
  .iee-clients-marquee:hover .iee-clients-marquee-track {
    animation-play-state: paused;
  }
}

/* Figma 2053:5 CTA and office footer. */
.iee-footer-cta {
  position: relative;
  z-index: 2;
  width: min(1337px, calc(100vw - 40px));
  height: 300px;
  margin: 0 0 0 50%;
  overflow: visible;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff;
  background: url("assets/images/footer/143-440.png") center / cover no-repeat;
  transform: translateX(-50%);
}

.iee-footer-cta-copy {
  position: absolute;
  top: 44px;
  left: 98px;
}

.iee-footer-cta h2 {
  width: 397px;
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
}

.iee-footer-cta p {
  width: 421px;
  margin: 12px 0 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.iee-footer-back-to-top {
  position: absolute;
  z-index: 3;
  right: 96px;
  bottom: -25px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(90deg, #c44614 0%, #db6536 36.54%, #f0aa5e 75%, #ffcb93 88.95%);
  cursor: pointer;
}

.iee-footer-back-to-top span {
  position: absolute;
  display: block;
  content: "";
}

.iee-footer-back-to-top span {
  top: 13px;
  left: 16px;
  width: 18px;
  height: 24px;
  background: url("assets/images/ui/backtotop-2x.png") center / contain no-repeat;
}

.iee-footer-main.iee-footer-main--enhanced {
  position: relative;
  z-index: 1;
  min-height: 458px;
  margin-top: -98px;
  padding: 138px 0 0 !important;
  border: 0 !important;
  box-sizing: border-box;
  background: #050c2c !important;
}

.iee-footer-shell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  width: 1140px;
  max-width: calc(100% - 40px);
  min-height: 320px;
  margin: 0 auto;
}

.iee-footer-office,
.iee-footer-links {
  min-width: 0;
  border-left: 1px dashed #576088;
  box-sizing: border-box;
}

.iee-footer-office {
  padding-left: 34px;
}

.iee-footer-office h2 {
  display: flex;
  align-items: center;
  width: 171px;
  height: 27px;
  margin: 0 0 11px;
  padding: 0 0 0 29px;
  /* Figma 146:2556 is an OPEN path: top, right and bottom only, with 2px
     radius on the right corners. Its left side is the column rule itself. */
  border: 1px dashed #576088;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  color: rgba(255, 255, 255, .5);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
}

.iee-footer-office strong {
  display: block;
  margin: 0 0 10px;
  color: #ff6c30;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
}

.iee-footer-office address {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

.iee-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.iee-footer-contacts a {
  display: flex;
  align-items: center;
  min-height: 27px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-decoration: none;
}

.iee-footer-contact-icon {
  position: relative;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  margin-right: 5px;
  box-sizing: border-box;
  color: #ff6c30;
  background-position: center;
  background-repeat: no-repeat;
}

.iee-footer-contact-icon--whatsapp {
  background-image: url("assets/images/footer/contact-whatsapp-2x.png");
  background-size: 100% 100%;
}

.iee-footer-contact-icon--whatsapp::after {
  content: none;
}

.iee-footer-contact-icon--phone::before {
  content: none;
}

.iee-footer-contact-icon--phone {
  background-image: url("assets/images/footer/contact-phone-2x.png");
  background-size: 100% 100%;
}

.iee-footer-contact-icon--email {
  background-image: url("assets/images/footer/contact-email-2x.png");
  background-size: 100% 100%;
  font-size: 0;
}

.iee-footer-links {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 36px;
  padding: 19px 0 0;
  border-left: 0;
  border-top: 1px dashed #576088;
}

.iee-footer-links a {
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-decoration: none;
}

.iee-footer-bottom.iee-footer-bottom--enhanced {
  height: 61px;
  min-height: 61px;
  border-top: 1px dashed #576088 !important;
  box-sizing: border-box;
  background: #050c2c !important;
}

.iee-footer-legal-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1140px;
  max-width: calc(100% - 40px);
  height: 60px;
  margin: 0 auto;
}

.iee-footer-legal-shell p {
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.iee-footer-legal-shell small {
  font-size: 10px;
}

.iee-footer-legal-shell nav {
  display: flex;
  gap: 14px;
}

.iee-footer-legal-shell a {
  color: rgba(255, 255, 255, .62);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: none;
}

@media (hover: hover) {
  .iee-footer-links a,
  .iee-footer-contacts a,
  .iee-footer-legal-shell a {
    transition: color 220ms ease;
  }

  .iee-footer-links a:hover,
  .iee-footer-contacts a:hover,
  .iee-footer-legal-shell a:hover {
    color: #ff6c30;
  }
}

@media (max-width: 1180px) {
  .iee-solutions.iee-solutions--enhanced {
    min-height: 0;
    padding: 40px 20px 68px !important;
    overflow: hidden !important;
  }

  /* Same rail-cap specificity fight as the intro band above — out-specify
     the global container-width-cap rule so the panel goes truly full-width
     instead of getting re-centered with an extra 20px inset either side. */
  body.elementor-page .elementor-section.elementor-section-full_width.iee-solutions--enhanced > .iee-solutions-panel {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  /* Undo the desktop shared-panel accordion entirely — mobile keeps the
     simpler "every row expanded, own inline image" layout it always had. */
  .iee-solution-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .iee-solution-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 16px;
  }

  .iee-solution-row:not(:first-child) {
    border-top: 1px dotted #adadad;
  }

  .iee-solution-row-copy,
  .iee-solution-row:not(:first-child) .iee-solution-row-copy {
    padding: 0;
    border-bottom: 0;
    cursor: auto;
  }

  .iee-solutions--enhanced .iee-solution-pointer h2 {
    color: transparent !important;
    background: linear-gradient(79deg, #c44614 1%, #db6536 33%, #f0aa5e 79%, #ffcb93 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  body.elementor-page .iee-solutions--enhanced .iee-solution-description {
    margin: 12px 0 0 !important;
    height: auto;
    opacity: 1 !important;
  }

  .iee-solution-row-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 250;
    opacity: 1;
  }

  .iee-partners.iee-partners--enhanced {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .iee-partners-shell {
    max-width: 100%;
  }

  .iee-results-intro.iee-results-intro--enhanced {
    min-height: 0;
    padding: 65px 20px 60px !important;
  }

  .iee-results-shell {
    max-width: 100%;
    height: auto;
  }

  .iee-results-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .iee-results-takeaway {
    width: calc(100% - 120px);
  }

  .iee-industries-shell {
    grid-template-columns: 1fr 1fr;
  }

  .iee-industries-copy h2,
  .iee-industries-panel,
  .iee-industry {
    width: 100%;
  }

  .iee-industries-panel {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 767px) {
  .iee-partners.iee-partners--enhanced {
    min-height: 0;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .iee-partner {
    flex-basis: 140px;
    width: 140px;
    height: 92px;
    padding: 0 14px;
  }

  .iee-partner img {
    max-height: 64px;
  }

  .iee-results-intro.iee-results-intro--enhanced {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .iee-results-top {
    display: block;
    height: auto;
  }

  .iee-results-top h2,
  .iee-results-top p {
    width: 100%;
  }

  .iee-results-top h2 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .iee-results-top p {
    margin-top: 24px;
  }

  .iee-results-outcome {
    margin-top: 32px;
  }

  .iee-results-cards {
    grid-template-columns: 1fr;
    height: auto;
  }

  .iee-result-card {
    height: 160px;
  }

  .iee-results-takeaway {
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    border-radius: 18px;
  }

  .iee-results-takeaway > span {
    margin-top: 2px;
  }

  .iee-results-takeaway p {
    white-space: normal;
  }

  body.elementor-page .iee-process-intro {
    min-height: 0;
    padding: 70px 20px 48px !important;
  }

  body.elementor-page .iee-process-intro > .elementor-container {
    max-width: 100% !important;
    height: auto;
  }

  body.elementor-page .iee-process-intro .elementor-widget-heading,
  body.elementor-page .iee-process-intro h2.elementor-heading-title,
  body.elementor-page .iee-process-intro .elementor-widget-text-editor {
    width: 100% !important;
  }

  body.elementor-page.elementor-page .iee-process-intro h2.elementor-heading-title {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  body.elementor-page .iee-process-intro .elementor-widget-text-editor {
    margin-top: 20px !important;
  }

  body.elementor-page .iee-steps {
    min-height: 0;
    padding: 0 20px 48px !important;
  }

  body.elementor-page .iee-steps > .elementor-container,
  body.elementor-page .iee-steps .elementor-column,
  body.elementor-page .iee-steps .elementor-widget-wrap,
  body.elementor-page .iee-steps .elementor-widget-html {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* A single 200px wheel sitting above the steps, spinning in place while
     the steps scroll past underneath, read as decoration with no real
     connection to the content — like a vertical timeline instead: a
     small wheel + dotted line on the left that travels down alongside
     the steps as you scroll, the same "marker beside the content" shape
     as any left-rail timeline. .iee-process-wheel and ::after are direct
     children of .iee-process-map already, so making the map a 2-column
     grid — narrow rail, wide content — and placing both of them in the
     rail column (spanning every row) needs no markup changes: the .iee-
     step blocks, given only a column, auto-flow into the next column's
     rows on their own. */
  body.elementor-page .iee-process-map {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    height: auto;
  }

  /* grid-row: 1 / -1 needs the grid's total row count to resolve "-1" —
     but that count comes from the .iee-step items further down, which
     are only auto-placed (no explicit row of their own). Depending on
     placement order that resolution isn't reliable: it ended up spanning
     only row 1, so the line stuck around Step 1 instead of running the
     full height. `span 5` matches the fixed count of .iee-step-1..5
     below explicitly instead — a larger span (e.g. 20) "fixes" the same
     bug but overshoots into unused rows, which then pull in a minimum
     size contribution each and visibly inflate the section with empty
     space below the last step. */
  body.elementor-page .iee-process-map::after {
    display: block;
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 5;
    top: 0;
    left: 21px;
    width: 0;
    height: 100%;
    justify-self: start;
  }

  /* position:sticky only "catches" once and then stays pinned at that
     same screen position for the rest of the scroll — it does not keep
     traveling down the page, so once it caught near Step 1 it read as
     stopped there for good. The wheel needs to keep moving the whole
     way, same as it does on desktop: absolutely positioned against
     .iee-process-map and driven by the same JS-computed --ie-wheel-y
     translateY, just rescaled in main.js for the mobile rail's actual
     height instead of desktop's fixed 549px travel. */
  body.elementor-page .iee-process-wheel {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    transform: translateY(var(--ie-wheel-y, 0px)) rotate(var(--ie-wheel-rotate, 0deg)) !important;
  }

  body.elementor-page .iee-process-map .iee-step,
  body.elementor-page .iee-process-map .iee-step-1,
  body.elementor-page .iee-process-map .iee-step-2,
  body.elementor-page .iee-process-map .iee-step-3,
  body.elementor-page .iee-process-map .iee-step-4,
  body.elementor-page .iee-process-map .iee-step-5 {
    position: relative !important;
    grid-column: 2;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 43px 0 0 !important;
  }

  body.elementor-page .iee-process-map .iee-step + .iee-step {
    margin-top: 36px !important;
  }

  body.elementor-page .iee-process-map .iee-step h3,
  body.elementor-page .iee-process-map .iee-step p {
    position: static;
    width: 100%;
  }

  body.elementor-page .iee-process-map .iee-step p {
    margin-top: 5px;
  }

  .iee-industries.iee-industries--enhanced {
    min-height: 0;
    padding: 40px 20px 60px !important;
  }

  body.elementor-page .elementor-section.elementor-element-s8fa4148b3bc2 {
    padding-bottom: 32px !important;
  }

  .iee-industries-shell {
    position: static;
    display: block;
    max-width: 100%;
    height: auto;
  }

  .iee-industries-copy h2 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .iee-footer-cta h2 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .iee-industries-copy {
    position: static;
  }

  .iee-industries-panel {
    height: auto;
    margin-top: 40px;
    padding: 24px;
  }

  .iee-industries-list {
    gap: 12px;
  }

  .iee-industry {
    height: 90px;
    padding: 0 20px;
  }

  .iee-industry-icon {
    margin-right: 12px;
  }
}

/* Figma 143:882 trust-content alignment. */
@media (min-width: 1181px) {
  body.elementor-page .iee-trust {
    display: flex;
    justify-content: flex-start;
    gap: 0;
  }

  body.elementor-page .iee-trust strong {
    flex: 0 0 346px;
    width: 346px;
    color: #f0aa5e !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
  }

  body.elementor-page .iee-trust-iso {
    flex: 0 0 156px;
    width: 156px;
    margin-left: 19px;
    gap: 10.58px;
  }

  body.elementor-page .iee-trust-iso img {
    width: 48.42px;
    height: 48.42px;
  }

  /* Margins slimmed from Figma's 50px to make room for the third flag
     (Singapore) in the presence box — the row must still total the
     1140px rail. */
  body.elementor-page .iee-trust-eco {
    flex: 0 0 162px;
    width: 162px;
    margin-left: 33px;
    gap: 10px;
  }

  body.elementor-page .iee-trust-years {
    flex: 0 0 131px;
    width: 131px;
    margin-left: 33px;
    gap: 10.7px;
  }

  body.elementor-page .iee-trust-years img {
    width: 50px;
    height: 50px;
  }

  body.elementor-page .iee-trust-presence {
    flex: 0 0 228px;                 /* label 74+10 + three 40px flags + 2x12 gaps */
    width: 228px;
    margin-left: 33px;
    gap: 0;
    align-items: flex-start;
    position: relative;
    top: -1px;
  }

  body.elementor-page .iee-trust-item {
    color: #cdcdcd;
    font-size: 14px;
    line-height: 18px;
  }

  body.elementor-page .iee-trust-presence em {
    flex: 0 0 74px;
    margin-right: 10px;
    margin-top: 2px;
    white-space: nowrap;
  }

  /* every flag but the last carries the gap — was :first-of-type when
     there were only two flags */
  body.elementor-page .iee-trust-presence .iee-flag:not(:last-of-type) {
    margin-right: 12px;
  }

}

body.elementor-page .iee-trust-presence .iee-flag {
  flex: 0 0 40px;
  width: 40px !important;
  min-width: 40px;
  max-width: 40px;
  height: 40px !important;
  min-height: 40px;
  max-height: 40px;
  object-fit: contain;
  border-radius: 50%;
  cursor: default;
  outline: none;
  transition: filter .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

body.elementor-page .iee-trust-presence .iee-flag:hover,
body.elementor-page .iee-trust-presence .iee-flag:focus-visible {
  filter: drop-shadow(0 8px 18px rgba(240, 170, 94, .28));
  transform: translate3d(0, -2px, 0);
}

body.elementor-page .iee-trust-item > i {
  display: block;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

body.elementor-page .iee-trust-iso > i {
  flex-basis: 48.42px;
  width: 48.42px;
  height: 48.42px;
  background-image: url("assets/images/icons-iso-2x.png");
}

body.elementor-page .iee-trust-eco > i {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
  background-image: url("assets/images/icons-ecovadix-2x.png");
}

body.elementor-page .iee-trust-years > i {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
  background-image: url("assets/images/icons-10years.png");
}

body.elementor-page .iee-trust-presence .iee-flag-my {
  background-image: url("assets/images/icons-malaysia-2x.png");
}

body.elementor-page .iee-trust-presence .iee-flag-sg {
  background-image: url("assets/images/icons-singapore-2x.png");
}

body.elementor-page .iee-trust-presence .iee-flag-id {
  background-image: url("assets/images/icons-indonesia-2x.png");
}

body.elementor-page .iee-hero-media {
  z-index: 20;
  overflow: visible;
}

body.elementor-page .iee-trust {
  position: relative;
  z-index: 30;
  overflow: visible;
}

/* The two grouping boxes are a mobile-only device (see max-width:767px) —
   on every wider layout they stay invisible to layout so the certs/presence
   items remain direct flex children of .iee-trust, matching the desktop
   Figma spec untouched. */
body.elementor-page .iee-trust-box {
  display: contents;
}

@media (max-width: 1180px) {
  body.elementor-page .iee-hero-media .elementor-widget-html,
  body.elementor-page .iee-hero-media .elementor-widget-iee-trust-bar,
  body.elementor-page .iee-hero-media .iee-trust {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.elementor-page .iee-hero-media .iee-trust {
    left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
  }

  body.elementor-page .iee-hero-media .iee-trust strong {
    flex: 1 1 300px;
    max-width: 360px;
  }

  body.elementor-page .iee-hero-media .iee-trust-item {
    flex: 0 0 auto;
  }
}

/* Figma-positioned hero CTA buttons (desktop/tablet base state) — this used
   to live only in the legacy Customizer "Additional CSS" with no media
   query of its own; removing that dead block (its top:430px was already
   overridden everywhere by the more specific mobile rules below) also
   removed the only place position:absolute was ever set for these two
   buttons above 767px, so it's restored here properly instead. */
body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa,
body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
  position: absolute !important;
  top: 410px;
}

body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa {
  left: 392px;
  width: 197px;
}

body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
  left: 609px;
  width: 140px;
}

@media (max-width: 767px) {
  /* Side by side at the same size/position the stuck state uses (see the
     iee-hero-ctas-stuck rules further down) — matching them exactly here
     means becoming sticky on scroll no longer changes the buttons' size at
     all, only their position. */
  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa,
  body.elementor-page .iee-hero-media .elementor-widget-wrap .elementor-widget-button:nth-child(1),
  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619,
  body.elementor-page .iee-hero-media .elementor-widget-wrap .elementor-widget-button:nth-child(2) {
    /* Only the leftover Customizer "Additional CSS" (now removed) was ever
       setting position:absolute for these — without it they fall back to
       Elementor's own default (relative), and top/left below stop meaning
       anything relative to the viewport. */
    position: absolute !important;
    width: calc((100vw - 52px) / 2) !important;
    max-width: none !important;
  }

  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa .elementor-button,
  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 .elementor-button {
    padding: 0 10px !important;
  }

  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa .elementor-button-text,
  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 .elementor-button-text {
    font-size: 12.5px !important;
    letter-spacing: -0.01em;
  }

  /* The positioning ancestor here (.elementor-widget-wrap) is inset 40px
     from the viewport by the hero section's own padding, but the width
     formula above is viewport-relative (matching the fixed-position stuck
     state exactly). left:0/50% would measure from the wrap's inset edge,
     not the viewport, so the two buttons would overlap by that same 40px
     shortfall. Offset by the wrap's known 40px inset so both buttons land
     at the identical viewport position the stuck state uses. */
  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa,
  body.elementor-page .iee-hero-media .elementor-widget-wrap .elementor-widget-button:nth-child(1) {
    left: -20px !important;
    top: 372px !important;
  }

  body.elementor-page .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619,
  body.elementor-page .iee-hero-media .elementor-widget-wrap .elementor-widget-button:nth-child(2) {
    left: calc(50vw - 34px) !important;
    top: 372px !important;
  }

  /* Two grouped boxes: certs (ISO / EcoVadis / Years, one per row) in the
     first, presence (flags) in the second — instead of one long stack. */
  body.elementor-page .iee-hero-media .iee-trust {
    display: block;
    padding: 16px !important;
    backdrop-filter: blur(6px);
  }

  body.elementor-page .iee-hero-media .iee-trust strong {
    display: block;
    max-width: 100%;
  }

  body.elementor-page .iee-hero-media .iee-trust-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
  }

  body.elementor-page .iee-hero-media .iee-trust-box--presence {
    flex-direction: row;
    align-items: center;
  }

  body.elementor-page .iee-hero-media .iee-trust-item {
    flex: 0 0 auto;
  }

  body.elementor-page .iee-hero-media .iee-trust-presence {
    justify-content: flex-start;
  }

  body.elementor-page .iee-hero-media .iee-trust-iso > i,
  body.elementor-page .iee-hero-media .iee-trust-eco > i,
  body.elementor-page .iee-hero-media .iee-trust-years > i {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  body.elementor-page .iee-hero-media .iee-trust-presence .iee-flag {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}

body.elementor-page .iee-trust-iso {
  position: relative;
  z-index: 40;
  cursor: default;
  outline: none;
}

body.elementor-page .iee-trust-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: block;
  width: max-content;
  max-width: calc(100vw - 20px);
  min-height: 28px;
  padding: 5px 14px;
  box-sizing: border-box;
  color: #cdcdcd;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  box-shadow: none;
  font-family: var(--ie-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0);
  transition: opacity .2s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

body.elementor-page .iee-trust-tooltip.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.elementor-page .iee-trust-iso:focus-visible {
  outline: 1px solid rgba(240, 170, 94, .75);
  outline-offset: 4px;
}

body.elementor-page .iee-trust-presence .iee-flag:focus-visible {
  outline: 1px solid rgba(240, 170, 94, .75);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .iee-challenge-drag {
    transition: none;
  }

  .iee-challenge-cards--enhanced > .iee-challenge-track {
    transition: none;
  }

  .iee-partners-heading,
  .iee-partner {
    transition: none;
  }

  .iee-partners-marquee {
    overflow-x: auto;
  }

  .iee-partners-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .iee-partners-group[aria-hidden="true"] {
    display: none;
  }

  .iee-clients-marquee {
    overflow-x: auto;
  }

  .iee-clients-marquee-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .iee-clients-marquee-group:nth-child(2) {
    display: none;
  }

  .iee-industries-copy,
  .iee-industry {
    position: static;
  }

  .iee-result-card,
  .iee-result-card::before,
  .iee-result-card::after,
  .iee-result-card h3,
  .iee-result-card strong,
  .iee-result-card-arrow {
    transition: none;
  }

  .iee-result-card:hover,
  .iee-result-card:hover::before,
  .iee-result-card:hover .iee-result-card-arrow {
    transform: none;
  }

  body.iee-motion-v2 .iee-hero-media .elementor-widget-button {
    transition: none !important;
  }

  body.iee-motion-v2 .iee-hero-title .iee-hero-line .elementor-heading-title,
  body.iee-motion-v2 .iee-hero-media .elementor-button,
  body.iee-motion-v2 .iee-hero-media .elementor-button::before,
  body.iee-motion-v2 .iee-hero-media .elementor-button::after,
  body.iee-motion-v2 .iee-hero-media .iee-glass-bg,
  body.iee-motion-v2 .iee-hero-media .iee-glass-white,
  body.iee-motion-v2 .iee-hero-media .iee-glass-glow,
  body.iee-motion-v2 .iee-hero-media .iee-cta-elastic-outline,
  body.iee-motion-v2 .iee-hero-media .iee-cta-arrow,
  body.iee-motion-v2 .iee-hero-media .elementor-button-content-wrapper,
  body.iee-motion-v2 .iee-hero-media .elementor-button-text {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1180px) {
  .iee-footer-shell {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
  }

  .iee-footer-office {
    padding-right: 20px;
    padding-left: 20px;
  }

  .iee-footer-links {
    padding-left: 0;
  }
}

@media (max-width: 1024px) {
  .iee-footer-cta {
    height: 360px;
    background-position: 58% center;
  }

  .iee-footer-cta-copy {
    top: 32px;
    right: 24px;
    left: 24px;
  }

  .iee-footer-cta h2,
  .iee-footer-cta p {
    width: auto;
  }

  .iee-footer-cta h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .iee-footer-cta p {
    margin-top: 18px;
  }

  .iee-footer-back-to-top {
    right: 20px;
  }

  .iee-footer-main.iee-footer-main--enhanced {
    min-height: 0;
    margin-top: -80px;
    /* padding-top(104) + margin-top(-80) nets a real 24px gap above the
       shell — it used to net to exactly 0 (80 and -80 cancelling out),
       leaving the "Facing a grinding..." card flush against "Malaysia
       Office" with no breathing room at all. */
    padding: 104px 20px 0 !important;
  }

  .iee-footer-shell {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
  }

  .iee-footer-shell > .iee-footer-office:first-child,
  .iee-footer-shell > .iee-footer-links:first-child {
    border-top: 0;
  }

  .iee-footer-office {
    padding: 0 0 28px 0;
  }

  /* Single column at this width can run much wider than true mobile, and
     with nothing capping it the address/contact text was stretching out
     to the full shell width — reading as detached from the thin border-
     left rule instead of contained by it. */
  .iee-footer-office > strong,
  .iee-footer-office > address,
  .iee-footer-office > .iee-footer-contacts {
    max-width: 480px;
    margin-left: 20px;
  }

  .iee-footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
    padding: 28px 0 0;
  }

  .iee-footer-bottom.iee-footer-bottom--enhanced {
    height: auto;
    min-height: 0;
    padding: 20px !important;
  }

  .iee-footer-legal-shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/* ==========================================================================
   Solutions Overview page
   Figma: Solution_overview (146:2496) — 1920 frame, 1140 rail at x=390.
   All values below are measured from the Figma nodes, expressed as px where
   the design is fixed and as % of the 1140 rail where it must scale.
   ========================================================================== */

:root {
  --iee-sol-bg: #e3eaef;          /* hero tint            */
  --iee-sol-navy: #050c2c;        /* headings             */
  --iee-sol-slate: #84a7b5;       /* hero heading, 2nd colour */
  --iee-sol-body: #5d5d5d;        /* body + descriptions  */
  --iee-sol-accent: #dc6838;      /* "Solution N" labels  */
  --iee-sol-rule: #adadad;        /* row dividers         */
}

/* --- Hero ---------------------------------------------------------------
   heading 390,166 512x208 · body 970,217 570x147 · tint band y126–757     */

.iee-sol-hero {
  background: var(--iee-sol-bg);
  padding: 40px 0 50px;
}

body.page-id-193 .iee-sol-hero {
  background: transparent;
}

.iee-sol-hero__title,
.iee-sol-hero__title.elementor-widget .elementor-heading-title {
  margin: 0;
  max-width: 512px;               /* 512 / 1140 — forces the 4-line wrap */
  color: var(--iee-sol-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -0.01em;
}

.iee-sol-hero__title.elementor-widget .elementor-heading-title .muted,
.iee-sol-hero__title .muted {
  color: var(--iee-sol-slate);
  font-weight: 500;
}

.iee-sol-hero__copy,
.iee-sol-hero__copy.elementor-widget {
  max-width: 570px;
}

.iee-sol-hero__copy.elementor-widget p {
  margin: 0 0 21px;               /* one blank line, matching the \n\n */
  color: var(--iee-sol-body);
  font-size: 16px;
  line-height: 1.3;               /* Figma AUTO ≈ 1.3 for this face */
}

.iee-sol-hero__copy.elementor-widget p:last-child {
  margin-bottom: 0;
}

/* Media strip: image 390,424 1141x400; tint ends at y757 = 83.25% of it. */
.iee-sol-hero__media {
  padding: 0;
  background: linear-gradient(
    to bottom,
    var(--iee-sol-bg) 0,
    var(--iee-sol-bg) 83.25%,
    #fff 83.25%,
    #fff 100%
  );
}

body.page-id-193 .iee-sol-hero__media {
  background: #fff;
}

.iee-sol-hero__media img,
.iee-sol-hero__media .elementor-widget-image img {
  display: block;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1141 / 400;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* --- Solutions list -----------------------------------------------------
   rows start y884/1147/1365/1557/1749/1967; each row is content + 40px,
   divider, then 40px. Text column max 664 (58.25%); reveal image 463x250
   (40.61%) right-aligned to the rail, top-aligned with the row label.     */

.iee-sol {
  --iee-sol-accent-local: var(--iee-sol-accent);
  --iee-sol-title: var(--iee-sol-navy);
  --iee-sol-line: var(--iee-sol-rule);
  position: relative;
}

.iee-sol__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iee-sol__row {
  position: relative;
  /* Figma puts the divider 40px under the content and the next label 40px
     under the divider — 80px total. The 1px rule lives inside that 80, so the
     top padding absorbs it. */
  padding: 39px 0 40px;
  border-bottom: 1px dotted var(--iee-sol-line);
}

.iee-sol__row:first-child {
  padding-top: 0;
}

.iee-sol__row:last-child {
  /* .iee-sol__thumb is absolutely positioned, so it never counts toward
     this row's own height — every row's thumb quietly overlaps the row
     below it, which is invisible against the shared list background. The
     last row has no row below it to overlap into, so without reserving
     its own clearance here its thumb bleeds straight into the CTA band's
     different-colored background instead. The row's own text already
     covers most of the thumb's height on its own, so this only needs to
     make up the remainder — padding-bottom as a percentage resolves
     against the row's width, same reference as the thumb's own width, so
     it scales with it correctly at any rail width. */
  padding-bottom: 12%;
  border-bottom: 0;
}

.iee-sol__inner {
  display: block;
  max-width: 58.25%;              /* 664 / 1140 */
  color: inherit;
  text-decoration: none;
  outline-offset: 6px;
}

.iee-sol__inner:focus-visible {
  outline: 2px solid var(--iee-sol-accent-local);
}

.iee-sol__label {
  display: block;
  margin: 0 0 10px;
  color: var(--iee-sol-accent-local);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;   /* pinned: Figma label box is exactly 21px */
}

.iee-sol__title {
  margin: 0;
  color: var(--iee-sol-title);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

/* Tablet-tier taper — without this the row title held the full 35px
   desktop size through 768-1024px, edging past the page hero's own
   34px size in that same range. */
@media (max-width: 1024px) {
  .iee-sol__title {
    font-size: 28px;
    line-height: 36px;
  }
}

.iee-sol__desc {
  margin: 10px 0 0;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

/* Active row title carries the design's orange gradient fill.
   A gradient cannot be transitioned, so the gradient lives in a duplicate
   text layer that cross-fades over the solid navy underneath. */
.iee-sol__title {
  position: relative;
  transition: color 0.35s ease;
}

.iee-sol__title::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    101deg,
    #c44614 0%,
    #db6536 32.7%,
    #f0aa5e 78.8%,
    #ffcb93 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.iee-sol__row.is-active .iee-sol__title::after {
  opacity: 1;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .iee-sol__title::after {
    display: none;
  }

  .iee-sol__row.is-active .iee-sol__title {
    color: var(--iee-sol-accent-local);
  }
}

.iee-sol__thumb {
  position: absolute;
  top: 40px;                      /* aligns with the row's label */
  right: 0;
  z-index: 2;
  width: 40.61%;                  /* 463 / 1140 */
  aspect-ratio: 463 / 250;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.iee-sol__row:first-child .iee-sol__thumb {
  top: 0;
}

.iee-sol__row.is-active .iee-sol__thumb {
  opacity: 1;
  transform: translateX(0);
  /* Only clickable once actually visible — while opacity:0 it still sits on
     top of other rows (absolute, z-index:2), and letting it capture clicks
     in that state would make nearby rows randomly unclickable depending on
     which one happens to be active behind the scenes. */
  pointer-events: auto;
}

.iee-sol__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row divider reacts to hover as well, so the whole row feels live. */
.iee-sol__row {
  transition: border-color 0.35s ease;
}

.iee-sol__row.is-active {
  border-bottom-color: color-mix(in srgb, var(--iee-sol-accent-local) 45%, transparent);
  border-bottom-style: dotted;
}

@media (prefers-reduced-motion: reduce) {
  .iee-sol__thumb {
    transition: opacity 0.2s linear;
    transform: none;
  }
}

/* --- Industries CTA band ------------------------------------------------
   band y2232 h250 · heading 391,2287 (572 wide) · body 391,2387 (722)
   button 1307,2332 222x66 r10, right-aligned to the rail                  */

.iee-sol-cta {
  position: relative;
  overflow: hidden;
  padding: 55px 0 53px;
  background-color: #c44614;
  background-position: center;
  background-size: cover;
  color: #fff;
  isolation: isolate;
}

.iee-sol-cta > .elementor-container {
  align-items: center;
}

.iee-sol-cta__title,
.iee-sol-cta__title.elementor-widget .elementor-heading-title {
  margin: 0 0 10px;
  max-width: 572px;
  /* !important: without it this loses to Elementor's own kit-default
     heading color specifically inside the editor preview (frontend is
     unaffected either way, but the editor showed the wrong color). */
  color: #fff !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

.iee-sol-cta__text,
.iee-sol-cta__text.elementor-widget {
  max-width: 722px;
}

.iee-sol-cta__text.elementor-widget p {
  margin: 0;
  color: #fff !important;
  font-size: 16px;
  line-height: 1.3;
}

.iee-sol-cta__button.elementor-widget {
  /* Figma seats the button 8px below the band's optical centre (y2332 in a
     2232–2482 band), so nudge it rather than relying on pure centring. */
  margin-top: 8px;
}

.iee-sol-cta__button.elementor-widget .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  /* Every other CTA button on the site (.iee-det-cta__button,
     .iee-solutions-intro-cta, .iee-fit__btn) is 50px/16px — this one was
     the odd one out at 55px/18px, which reads as oversized especially
     once it also goes full-width on mobile. Matched to the standard. */
  height: 50px;
  padding: 0;
  border-radius: 10px;
  /* !important: same editor-only kit-default color override as the title
     above — the button showed green/orange in the editor, white/accent
     on the frontend. */
  background: #fff !important;
  color: var(--iee-sol-accent) !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.iee-sol-cta__button.elementor-widget .elementor-button:hover,
.iee-sol-cta__button.elementor-widget .elementor-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(5, 12, 44, 0.22);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .iee-sol-hero__title,
  .iee-sol-hero__title.elementor-widget .elementor-heading-title {
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  .iee-sol-hero {
    padding: 32px 0 40px;
  }

  .iee-sol-hero__title,
  .iee-sol-hero__title.elementor-widget .elementor-heading-title {
    font-size: 34px;
    line-height: 41px;
  }

  .iee-sol__inner {
    max-width: 56%;
  }

  .iee-sol-cta__title,
  .iee-sol-cta__title.elementor-widget .elementor-heading-title {
    font-size: 27px;
    line-height: 35px;
  }

  /* Desktop's 8px is an optical nudge for a button sitting roughly
     alongside the text in a two-column row; stacked on mobile, the button
     ends up crowding the paragraph right above it, so it needs real
     spacing here instead. */
  .iee-sol-cta__button.elementor-widget {
    margin-top: 24px;
  }
}

@media (max-width: 860px) {
  .iee-sol__row,
  .iee-sol__row:first-child,
  .iee-sol__row:last-child {
    /* The desktop-only calc() clearance above is for the thumb's absolute
       overlap, which doesn't apply once thumbs go static/in-flow below —
       reset back to the same padding as every other row here. */
    padding: 26px 0;
  }

  .iee-sol__inner {
    max-width: 100%;
  }

  .iee-sol__title {
    font-size: 26px;
    line-height: 34px;
  }

  .iee-sol__desc {
    font-size: 17px;
    line-height: 24px;
  }

  .iee-sol__thumb,
  .iee-sol__row:first-child .iee-sol__thumb {
    position: static;
    width: 100%;
    margin-top: 18px;
    opacity: 1;
    transform: none;
    /* All rows show their thumb at once on mobile (not just whichever one
       carries .is-active from the desktop hover state), so every thumb
       needs to be clickable here regardless of that class. */
    pointer-events: auto;
  }

  .iee-sol-cta__button.elementor-widget {
    text-align: center;
  }

  .iee-sol-cta__button.elementor-widget .elementor-button {
    width: auto;
    min-width: 180px;
    padding: 0 24px;
  }

  /* Unlike .iee-sol-hero/.iee-det-hero above and below, this band had no
     mobile override at all and stayed at its full desktop 55/53 padding
     down to phone width — out of step with every other section's ~40/48
     mobile gap. */
  .iee-sol-cta {
    padding: 40px 0 48px;
  }
}

@media (max-width: 620px) {
  .iee-sol-hero__title,
  .iee-sol-hero__title.elementor-widget .elementor-heading-title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* The shared footer section is tuned for the homepage, where it tucks 98px up
   under the CTA image (margin-top:-98px + padding-top:138px = 40px net). This
   page has no such image, so the pull-up would cover the CTA copy. Reset it
   only where our CTA band is the preceding sibling; the homepage is untouched.
   Figma: footer starts at y2482 (= CTA band end) with content 43px in. */
body:not(.home) .elementor-section.iee-footer-main.iee-footer-main--enhanced {
  margin-top: 0;
  /* min-height 402 exists to fill the homepage's 138px top padding. With the
     pull-up gone it would leave ~95px of dead space, detaching the column
     rules from the copyright rule — Figma has them meeting at y2786. */
  min-height: 0;
  padding-top: 40px !important;   /* Figma: footer y2482 -> office tag y2522 */
  overflow: visible;              /* let the back-to-top button overhang */
}

/* Back-to-top, when it is appended to the footer rather than the clients strip.
   Figma 160:71 — 50x50 gradient disc, centred on x1510 of the 1920 frame
   (rail 390–1530) and overhanging the footer's top edge by 29px. */
.iee-footer-main--has-top-button {
  position: relative;
}

.iee-footer-main--has-top-button > .iee-footer-back-to-top {
  top: -29px;
  right: max(20px, calc(50% - 575px));
  bottom: auto;
}

/* ==========================================================================
   Solution detail pages
   Figma: Solution (146:2667) — 1920 frame, 1140 rail at x=390.
   ========================================================================== */

:root {
  --iee-det-navy: #050c2c;
  --iee-det-panel: #cedee8;      /* image panel tint */
  --iee-det-mutedhead: #84a7b5;  /* 2nd half of two-tone headings */
  --iee-det-idle: #a4a4a4;       /* inactive product type */
  --iee-det-bar: #d86130;        /* prev/next bar */
}

/* The orange gradient used for hero titles and active product types. */
/* !important: without it this loses to Elementor's own kit-default heading
   color specifically inside the editor preview (frontend is unaffected
   either way, but the editor showed a solid light blue instead of the
   gradient). */
.iee-det-hero__title.elementor-widget .elementor-heading-title {
  background: linear-gradient(101deg, #c44614 0%, #db6536 32.7%, #f0aa5e 78.8%, #ffcb93 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* --- Dark hero (y0–546) -------------------------------------------------- */

.iee-det-hero {
  background: var(--iee-det-navy);
}

/* The header sits above the hero, so carry the navy up through it. */
.iee-detail-page .iee-header,
.iee-detail-page .iee-header .elementor-container {
  background: var(--iee-det-navy) !important;
}

.iee-det-hero__eyebrow,
.iee-det-hero__eyebrow.elementor-widget .elementor-heading-title {
  margin: 0;
  color: var(--iee-sol-accent);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

/* Dashed rule under the eyebrow — Figma 161:460, y160, full rail. */
/* Elementor's divider already supplies the 10px gap above and below, which is
   exactly the Figma rhythm (eyebrow 150 -> rule 160 -> title 170). */
.iee-det-hero__rule {
  margin: 0;
}

.iee-det-hero__rule .elementor-divider-separator {
  border-top-style: dashed;
  border-top-color: rgba(174, 174, 174, 0.5);
}

.iee-det-hero__title.elementor-widget .elementor-heading-title {
  margin: 0;   /* the divider widget already supplies the 10px gap */
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 58px;
}

.iee-det-hero__sub,
.iee-det-hero__sub.elementor-widget p {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

/* Some pages fold a fuller description in as a second paragraph. Pages with
   the key-variables widget push that box to the right via margin-left:auto
   (see .iee-keyvars below) — match that same right-aligned placement here
   so the hero reads consistently whether the right-hand content is a
   variables box or this extra paragraph. */
.iee-det-hero__sub.elementor-widget p + p {
  margin: 14px 0 0 auto;
  max-width: 640px;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  opacity: 0.85;
  text-align: left;
}

/* --- Key variables (Figma 282:621) --------------------------------------- */

.iee-keyvars {
  margin: 40px 0 0 auto;
  max-width: 646px;
  color: #fff;
}

.iee-keyvars__preface,
.iee-keyvars__intro,
.iee-keyvars__outro {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-keyvars__preface {
  margin-bottom: 20px;
}

.iee-keyvars__tiles {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.iee-keyvars__tile {
  display: grid;
  grid-template-rows: 46px 21px;
  align-content: center;
  justify-items: center;
  row-gap: 8px;
  width: 108px;
  height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
}

.iee-keyvars__icon {
  display: block;
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
}

.iee-keyvars__label {
  display: block;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #fff;
}

.iee-keyvars__outro {
  max-width: 646px;
}

.iee-s4-services {
  background: #f5fafd;
}

.iee-s4-services .iee-keyvars {
  display: grid;
  grid-template-columns: 544px 1fr;
  column-gap: 54px;
  align-items: start;
  max-width: 1086px;
  margin: 0 auto;
  color: var(--iee-det-navy);
}

.iee-s4-services .iee-keyvars__intro {
  max-width: 544px;
  color: var(--iee-det-navy);
  font-size: 35px;
  font-weight: 400;
  line-height: 45px;
}

/* This heading had no mobile taper at all — flat 35px down to the
   smallest phone, well past the page hero's own mobile sizes. */
@media (max-width: 1024px) {
  .iee-s4-services .iee-keyvars__intro {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .iee-s4-services .iee-keyvars__intro {
    font-size: 24px;
    line-height: 31px;
  }
}

.iee-s4-services .iee-keyvars__intro .muted {
  color: var(--iee-det-mutedhead);
}

.iee-s4-services .iee-keyvars__tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 231px);
  justify-content: space-between;
  gap: 28px;
  margin: 54px 0 0;
}

.iee-s4-services .iee-keyvars__tile {
  position: relative;
  display: grid;
  grid-template-rows: 144px auto;
  justify-items: center;
  align-content: start;
  row-gap: 24px;
  width: 231px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.iee-s4-services .iee-keyvars__tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 144px;
  height: 144px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transform: translateX(-50%);
}

.iee-s4-services .iee-keyvars__icon {
  align-self: center;
  width: 96px !important;
  height: 106px !important;
}

.iee-s4-services .iee-keyvars__label {
  width: 231px;
  color: #5d5d5d;
  text-align: center;
}

.iee-s4-services .iee-keyvars__outro {
  display: none;
}

.iee-det-hero .iee-keyvars__intro .muted {
  color: var(--iee-det-mutedhead);
}

.iee-detail-page .iee-det-hero .iee-keyvars__tiles {
  align-items: stretch;
  margin-top: 16px;
}

.iee-detail-page .iee-det-hero .iee-keyvars__tile {
  grid-template-rows: 46px minmax(21px, auto);
  height: 128px;
  padding: 18px 10px 12px;
  overflow: hidden;
}

.iee-detail-page .iee-det-hero .iee-keyvars__label {
  max-width: 88px;
  text-align: center;
  font-size: 15px;
  line-height: 19px;
}

.iee-s5-hero .iee-keyvars {
  max-width: 735px;
}

.iee-s5-hero .iee-keyvars__tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.iee-s5-hero .iee-keyvars__tile {
  width: 112px;
  height: 126px;
  padding: 16px 8px 10px;
}

.iee-s5-hero .iee-keyvars__icon {
  width: 48px !important;
  height: 48px !important;
}

.iee-s5-hero .iee-keyvars__label {
  max-width: 96px;
  font-size: 14px;
  line-height: 18px;
}

/* --- Full-bleed image band (y546–896) ------------------------------------ */

.iee-det-band {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.elementor-section.iee-det-band > .elementor-container {
  flex: 1 1 auto;
}

.iee-det-band .elementor-column,
.iee-det-band .elementor-widget-wrap {
  width: 100%;
}

.iee-det-band__title,
.iee-det-band__title.elementor-widget .elementor-heading-title {
  /* Figma 146:2820 — the 628px text box is centred on the 1920 frame
     (x646..1274), so it needs auto side margins in a full-bleed section. */
  margin: 0 auto;
  max-width: 628px;
  /* !important: same editor-only kit-default color override seen elsewhere
     on this site — frontend was already white. */
  color: #fff !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
  text-align: center;
}

/* --- Product category block ---------------------------------------------- */

.iee-cat__heading {
  margin: 0;
  max-width: 680px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

.iee-cat__heading .muted {
  color: var(--iee-det-mutedhead);
}

.iee-cat__desc {
  margin: 20px 0 0;
  max-width: 782px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-cat__body {
  display: grid;
  grid-template-columns: 50% 1fr;   /* 570 / 1140 */
  align-items: start;
  gap: 40px;
  margin-top: 30px;
}

.iee-cat__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 570 / 422;
  overflow: hidden;
  border-radius: 10px;
  background: var(--iee-det-panel);
  /* the list advances with scroll, so hold the panel in view while it does */
  position: sticky;
  top: calc(50vh - 211px);
  isolation: isolate;
  /* Sticky grid items don't reliably honour the parent's align-items:start
     for their natural (not-yet-stuck) position in every engine — when the
     row is taller than the panel (list column longer than usual, e.g. the
     6-item tool types list), it can drift down instead of sitting flush
     with the top of the row. Pin it explicitly. */
  align-self: start;
}

/* sticky already establishes the containing block for the absolute layers */

/* Two stacked layers cross-fade; see product-category.js. */
.iee-cat__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.iee-cat__panel img.iee-cat__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iee-cat__list-label {
  display: inline-block;
  color: #fff;
  margin: 0;
  padding: 3px 15px;
  border-radius: 2px;
  background: var(--iee-sol-accent);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  /* the pill is solid orange with white text, so cancel the gradient clip */
  -webkit-text-fill-color: #fff;
}

/* Orange rule running right from the pill (Figma 146:2930, y1152). */
.iee-cat__list {
  position: relative;
}

/* --- Product category block: points-only layout --------------------------
   Used where there is no reliable per-item photo — a clean tick list at full
   rail width instead of the sticky image + list split. */

.iee-cat__points {
  margin-top: 30px;
}

.iee-cat__points .iee-cat__list-label {
  margin-bottom: 20px;
}

.iee-cat__points-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 60px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iee-cat__point {
  position: relative;
  padding: 0 0 0 34px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.iee-cat__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-image: url("assets/images/industries/icons/tick.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.iee-cat__point-desc {
  display: block;
  margin-top: 3px;
  color: var(--iee-sol-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.iee-cat__list::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--iee-sol-accent);
}

.iee-cat__list-label {
  position: relative;
  z-index: 1;
}

.iee-cat__items {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.iee-cat__item {
  border-bottom: 1px dashed rgba(174, 174, 174, 0.6);
}

/* Desktop uses the separate sticky .iee-cat__panel image instead — this
   per-row image is only for the mobile accordion (see the max-width:960px
   block further down, which switches it back on). Without this base
   hide, the image has no rule at all on desktop and falls back to the
   browser's default visible <img> display. */
.iee-cat__item-image {
  display: none;
}

.iee-cat__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.iee-cat__name {
  color: var(--iee-det-idle);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  transition: color 0.3s ease;
}

.iee-cat__copy {
  display: block;
  min-width: 0;
}

.iee-cat__item-desc {
  display: none;
  margin-top: 8px;
  max-width: 488px;
  color: #5d5d5d;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.iee-cat__item.is-active .iee-cat__item-desc {
  display: block;
}

.iee-cat__marker {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  opacity: 0;
  background-image: url("assets/images/solution-detail/icons/product-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;
}

.iee-cat__item.is-active .iee-cat__marker {
  opacity: 1;
}

.iee-cat__name {
  /* Must be a single rectangular box, not inline — an inline element that
     wraps onto two lines doesn't give an absolutely-positioned pseudo
     (the gradient overlay below) one coherent box to align against, so on
     longer names it clips to one line fragment and the overlay garbles. */
  display: block;
  position: relative;
}

.iee-cat__name::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    101deg,
    #c44614 0%,
    #db6536 32.7%,
    #f0aa5e 78.8%,
    #ffcb93 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.iee-cat__item.is-active .iee-cat__name::after {
  opacity: 1;
}

.iee-s2-match {
  position: relative;
  /* Not overflow:hidden — same problem as .iee-s2-tooltypes below: this
     section also contains a sticky panel now, and overflow:hidden here
     would make the section itself sticky's (non-scrolling) reference,
     breaking it. The decorative band above still needs clipping to its
     -60px overhang, so that's done with clip-path on the pseudo itself
     instead of relying on the parent to clip it. */
}

.iee-s2-match::before {
  content: "";
  display: block;
  height: 388px;
  margin: -60px calc(50% - 50vw) 0;
  clip-path: inset(60px 0 0 0);
  background: #fff url("assets/images/solution-detail/solution-2/matching-tool-top.png") right calc(50vw - 570px) top / auto 384px no-repeat;
}

.iee-s2-match .iee-cat {
  margin-top: 35px;
}

.iee-s2-match .iee-cat__heading {
  position: absolute;
  top: -252px;
  left: 0;
  width: 544px;
  max-width: min(544px, 100%);
  font-size: 35px;
  line-height: 45px;
}

.iee-s2-match .iee-cat__desc,
.iee-s2-match .iee-cat__list-label,
.iee-s2-match .iee-cat__list::before {
  display: none;
}

.iee-s2-match .iee-cat__body {
  grid-template-columns: 570px 529px;
  gap: 41px;
  margin-top: 0;
}

.iee-s2-match .iee-cat__panel {
  /* Was pinned to position:relative (no sticky) because this list used to
     be shorter than the panel, so there was no scroll room for it to be
     worth sticking. The list has since grown past the panel's height
     (item descriptions were added), so it now inherits the base sticky
     behaviour instead of staying hardcoded static. */
  aspect-ratio: 570 / 422;
  background: #ebebeb;
}

.iee-s2-match .iee-cat__panel img.iee-cat__image {
  object-fit: contain;
  padding: 24px;
}

.iee-s2-match .iee-cat__items {
  margin-top: 0;
}

.iee-s2-match .iee-cat__button {
  min-height: 66px;
  padding: 13px 0 12px;
  gap: 20px;
}

.iee-s2-match .iee-cat__name {
  color: #a4a4a4;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.iee-s2-match .iee-cat__item.is-active .iee-cat__name {
  color: transparent;
}

.iee-s2-match .iee-cat__item-desc {
  margin-top: 4px;
  max-width: 488px;
  font-size: 16px;
  line-height: 21px;
}

/* Insert descriptions reveal on hover here, independent of the click-to-swap
   active state used for the image panel. */
.iee-s2-match .iee-cat__item:hover .iee-cat__item-desc {
  display: block;
}

.iee-s2-match .iee-cat__marker {
  width: 40px;
  height: 40px;
}

/* Tool types band: mirrored layout — list on the left, sticky image on the
   right — same panel treatment as the insert types above it. */
.iee-s2-tooltypes .iee-cat__body {
  grid-template-columns: 1fr 570px;
}

/* The site's global "Additional CSS" sets overflow:hidden on every
   .elementor-section, which makes THIS section the sticky panel's nearest
   scroll-container reference — and since the section itself never scrolls
   independently (it just clips, and its box already contains everything),
   the sticky panel below never has a real scroll position to react to and
   just moves in lockstep with the page instead of pinning. It needs to be
   a plain non-clipping ancestor for sticky to work at all. */
body.elementor-page .iee-s2-tooltypes.elementor-section,
body.elementor-page .iee-s2-match.elementor-section {
  overflow: visible;
}

/* order lives on the slot, not the sticky panel itself — a position:sticky
   grid item with order applied directly doesn't reliably honour the row's
   align-items:start once the row is taller than the panel (e.g. this
   6-item tool types list), and drifts down instead of sitting flush with
   the top. Wrapping it in a plain (non-sticky) grid-item slot sidesteps
   that engine quirk entirely. */
.iee-s2-tooltypes .iee-cat__panel-slot {
  order: 2;
}

.iee-s2-tooltypes .iee-cat__list {
  order: 1;
}

.iee-s2-tooltypes .iee-cat__panel img.iee-cat__image {
  object-fit: contain;
  padding: 24px;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .iee-cat__name::after {
    display: none;
  }

  .iee-cat__item.is-active .iee-cat__name {
    color: var(--iee-sol-accent);
  }

  .iee-det-hero__title.elementor-widget .elementor-heading-title {
    background: none;
    color: var(--iee-sol-accent);
  }
}

/* --- Tinted interstitial strips -------------------------------------------
   Figma 147:405 (fine grit) and 2079:2 (conventional). The photo is a
   positioned element, not a background: it overhangs the band's top edge
   (33px / 74px) which a background image cannot do.
   -------------------------------------------------------------------------- */

.iee-det-strip {
  position: relative;
  background-color: #f5fafd;
}

/* The Customizer clips every section; these two need the photo to overhang. */
body.elementor-page .elementor-section.iee-det-strip,
body.elementor-page .elementor-section.iee-det-strip.elementor-section-full_width {
  overflow-x: clip;
  overflow-y: visible;
}

@supports not (overflow: clip) {
  body.elementor-page .elementor-section.iee-det-strip,
  body.elementor-page .elementor-section.iee-det-strip.elementor-section-full_width {
    overflow-x: hidden;
  }
}

.iee-det-strip__title,
.iee-det-strip__title.elementor-widget .elementor-heading-title {
  margin: 0;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

.iee-det-strip__title .muted,
.iee-det-strip__title.elementor-widget .elementor-heading-title .muted {
  color: var(--iee-det-mutedhead);
}

.iee-det-strip__text,
.iee-det-strip__text.elementor-widget {
  margin-top: 20px;
}

.iee-det-strip__text.elementor-widget p {
  margin: 0;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

/* Photo, band and watermark are positioned against the SECOND COLUMN, which
   Elementor already makes `position: relative`. Earlier this forced the
   column to `static` so the offsets could resolve against the full 1140
   container — but any rule re-asserting `relative` on the column silently
   halved every percentage. Anchoring to the column instead means there is
   nothing to fight: offsets below are expressed as % of the 570px half-rail
   (negative where the element starts left of the column edge). */

/* Figma text-box widths, which drive the 3-line wrap and the band height. */
.iee-det-strip--fine .iee-det-strip__title,
.iee-det-strip--fine .iee-det-strip__title.elementor-widget .elementor-heading-title {
  max-width: 544px;
}

.iee-det-strip--fine .iee-det-strip__text,
.iee-det-strip--fine .iee-det-strip__text.elementor-widget {
  max-width: 398px;
}

.iee-det-strip--conv .iee-det-strip__title,
.iee-det-strip--conv .iee-det-strip__title.elementor-widget .elementor-heading-title {
  max-width: 483px;
}

.iee-det-strip--conv .iee-det-strip__text,
.iee-det-strip--conv .iee-det-strip__text.elementor-widget {
  max-width: 449px;
}

/* Elementor sets `.elementor-widget { position: relative }` at the same
   specificity and later in the cascade, so these must outrank it. */
.iee-det-strip__media.elementor-widget,
.iee-det-strip__mark.elementor-widget,
.iee-det-strip__band.elementor-widget {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.iee-det-strip__media img,
.iee-det-strip__mark img,
.iee-det-strip__band img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fine grit: photo x815 y2334 756x412, band top y2367 -> -33px */
.iee-det-strip--fine .iee-det-strip__media.elementor-widget {
  left: -25.44%;     /* rail x425 -> (425-570)/570 */
  top: -93px;        /* -33 from the band edge, less the 60px top padding */
  width: 132.63%;    /* 756/570 */
}

/* Conventional: exported as one flat image, so it no longer needs the old
   separate band + watermark offsets. */
.iee-det-strip--conv .iee-det-strip__media.elementor-widget {
  left: -9%;
  top: -70px;
  width: 91%;
}

/* Blue band under the blueprint — Figma 168:612, x901.5 y3813 564x81 */
.iee-det-strip--conv .iee-det-strip__band.elementor-widget {
  left: -10.26%;     /* rail x511.5 -> (511.5-570)/570 */
  top: 218px;        /* 318 from the band edge, less the 100px top padding */
  width: 98.95%;     /* 564/570 */
}

/* Watermark x1233 y3602 297x108 (its 20% opacity is baked into the file) */
.iee-det-strip--conv .iee-det-strip__mark.elementor-widget {
  left: 47.89%;      /* rail x843 -> (843-570)/570 */
  top: 7px;          /* 107 from the band edge, less the 100px top padding */
  width: 52.11%;     /* 297/570 */
}

.iee-det-strip__title,
.iee-det-strip__text {
  position: relative;
  z-index: 1;
}

/* --- Solution detail list sections --------------------------------------- */

.iee-sdetail-list-band {
  background: #f5fafd;
}

/* --- Two-up CTA ----------------------------------------------------------- */

.iee-det-cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: #fff;
}

.iee-det-cta__half > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 500px;
  padding: 114px 40px 0;
  text-align: center;
  background-position: center;
  background-size: cover;
}

.iee-det-cta__half > .elementor-widget-wrap > .elementor-element {
  width: 100%;
}

@media (min-width: 961px) {
  .iee-det-cta__half--left > .elementor-widget-wrap > .elementor-element {
    transform: translateX(calc(25vw - 285px));
  }

  .iee-det-cta__half--right > .elementor-widget-wrap > .elementor-element {
    transform: translateX(calc(285px - 25vw));
  }
}

.iee-det-cta__half--left > .elementor-widget-wrap {
  background-color: #00007c;
}

.iee-det-cta__half--right > .elementor-widget-wrap {
  position: relative;
  isolation: isolate;
}

.iee-det-cta__half--right > .elementor-widget-wrap::before {
  content: none;
}

body.page-id-144 .iee-det-cta__half--left,
body.page-id-145 .iee-det-cta__half--left,
body.page-id-146 .iee-det-cta__half--left,
body.page-id-147 .iee-det-cta__half--left {
  display: none;
}

body.page-id-144 .iee-det-cta__half--right,
body.page-id-145 .iee-det-cta__half--right,
body.page-id-146 .iee-det-cta__half--right,
body.page-id-147 .iee-det-cta__half--right {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

body.page-id-144 .iee-det-cta__half--right > .elementor-widget-wrap,
body.page-id-145 .iee-det-cta__half--right > .elementor-widget-wrap,
body.page-id-146 .iee-det-cta__half--right > .elementor-widget-wrap,
body.page-id-147 .iee-det-cta__half--right > .elementor-widget-wrap {
  align-items: center !important;
  align-content: center !important;
  flex-wrap: nowrap !important;
  min-height: 420px;
  text-align: center;
}

body.page-id-144 .iee-det-cta__half--right > .elementor-widget-wrap > .elementor-element,
body.page-id-145 .iee-det-cta__half--right > .elementor-widget-wrap > .elementor-element,
body.page-id-146 .iee-det-cta__half--right > .elementor-widget-wrap > .elementor-element,
body.page-id-147 .iee-det-cta__half--right > .elementor-widget-wrap > .elementor-element {
  align-self: center;
  width: min(100%, 580px) !important;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

.iee-det-cta__title,
.iee-det-cta__title.elementor-widget {
  margin: 0 0 20px;
  max-width: 512px;
}

.iee-det-cta__title.elementor-widget .elementor-heading-title {
  margin: 0;
  /* !important: same editor-only kit-default color override seen elsewhere
     on this site — frontend was already white. */
  color: #fff !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 42px;
  text-align: center;
}

.iee-det-cta__half--right .iee-det-cta__title,
.iee-det-cta__half--right .iee-det-cta__title.elementor-widget {
  margin-bottom: 20px;
  max-width: 329px;
}

.iee-det-cta__half--left .iee-det-cta__title,
.iee-det-cta__half--left .iee-det-cta__title.elementor-widget {
  margin-bottom: 20px;
}

.iee-det-cta__text,
.iee-det-cta__text.elementor-widget {
  margin: 0 0 30px;
  max-width: 520px;
  min-height: 78px;
}

.iee-det-cta__half--left .iee-det-cta__text,
.iee-det-cta__half--left .iee-det-cta__text.elementor-widget {
  max-width: 450px;
  margin-bottom: 30px;
}

.iee-det-cta__text.elementor-widget p {
  margin: 0;
  color: #fff !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
}

.iee-det-cta__half--right .iee-det-cta__text,
.iee-det-cta__half--right .iee-det-cta__text.elementor-widget {
  max-width: 348px;
  margin-bottom: 30px;
}

/* Same glass treatment as the homepage hero CTA — main.js injects the
   .iee-glass-bg / .iee-glass-glow layers for these buttons too. Values mirror
   the hero button's computed style: 50px tall, r10, no border, translucent
   dark fill over a 48px backdrop blur, white 16/300 label. */
.iee-det-cta__button.elementor-widget .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 197px;
  height: 50px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  /* !important: without it Elementor's own kit-default button styling
     (green fill) wins in the editor preview — main.js also isn't loaded
     there to inject the .iee-glass-bg/.iee-glass-glow layers, so this flat
     color is what actually shows in the editor either way. */
  background: rgba(0, 0, 0, 0.004) !important;
  color: #fff !important;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  transition: background-color 0.32s ease, box-shadow 0.32s ease,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.iee-det-cta__half--left .iee-det-cta__button.elementor-widget .elementor-button {
  min-width: 258px;
}

.iee-det-cta__button .iee-glass-bg,
.iee-det-cta__button .iee-glass-glow {
  position: absolute;
  pointer-events: none;
}

.iee-det-cta__button .iee-glass-bg {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.19);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease;
}

.iee-det-cta__button .iee-glass-glow {
  inset: -65%;
  z-index: 0;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(
    from 90deg at 40% -25%,
    #daf4f7,
    rgba(218, 244, 247, 0.75),
    rgba(218, 244, 247, 0.35),
    rgba(255, 255, 255, 0),
    rgba(218, 244, 247, 0.35),
    rgba(218, 244, 247, 0.75),
    #daf4f7
  );
  filter: blur(5px);
  transform: rotate(-35deg) scale(0.8);
  transition: none;
}

.iee-det-cta__button .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

.iee-det-cta__button .elementor-button-text {
  color: #fff !important;
  line-height: 21px;
  white-space: nowrap;
}

.iee-det-cta__button.elementor-widget .elementor-button:hover,
.iee-det-cta__button.elementor-widget .elementor-button:focus-visible {
  background: rgba(0, 0, 0, 0.004);
  box-shadow: none;
  outline: none;
  transform: none;
}

.iee-det-cta__button .elementor-button:hover .iee-glass-glow,
.iee-det-cta__button .elementor-button:focus-visible .iee-glass-glow {
  animation: iee-glass-glow-sweep 1.1s linear both;
}

.iee-det-cta__button .elementor-button:hover .iee-glass-bg,
.iee-det-cta__button .elementor-button:focus-visible .iee-glass-bg {
  background: #f8f8f8;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 1.1s linear, backdrop-filter 1.1s linear;
}

.iee-det-cta__button .elementor-button:hover .elementor-button-text,
.iee-det-cta__button .elementor-button:focus-visible .elementor-button-text {
  color: #10162a;
  transition: color 1s linear 0.08s;
}

.iee-det-cta__button.elementor-widget .elementor-button:active {
  transform: translate3d(0, 0, 0) scale(0.985);
  transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .iee-det-cta__button .iee-glass-glow,
  .iee-det-cta__button.elementor-widget .elementor-button {
    transition: none !important;
  }

  .iee-det-cta__button.elementor-widget .elementor-button:hover {
    transform: none;
  }
}

/* --- Solution nav bar + "other solutions" menu ----------------------------
   Figma 2080:3 — bar 1920x70 (#D86130); tiles 100x77 r10 #FFFFFF1A with a
   48px glass blur; menu panel 273x461 r10 #00000066, items 16px Medium 71px
   apart on dashed #FFFFFF33 rules, current item #D86130.
   -------------------------------------------------------------------------- */

.iee-solnav {
  position: relative;
  display: flex;
  align-items: center;
  /* Figma bar is exactly 70px; the 77px tiles overhang it rather than
     stretching it, so pin the height instead of using min-height. */
  height: 70px;
  /* The bar's fill lives in ::before so it can be layered ABOVE the open
     menu — in Figma the panel slides out behind the bar and its tiles, and
     only the part above the bar is visible. A background on the element
     itself always paints behind its own descendants, so it cannot do that. */
  background: transparent;
}

.iee-solnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--iee-det-bar);
}

/* Bar contents sit above the fill; the menu sits below it. */
.iee-solnav__side--back,
.iee-solnav__toggle,
.iee-solnav__divider {
  position: relative;
  z-index: 2;
}

/* The menu opens upward out of the bar, so this section (and the column
   chain inside it) must not clip. The Customizer clips every section at
   specificity 0,3,1, hence the long selector. */
body.elementor-page .elementor-section.iee-det-navwrap,
body.elementor-page .elementor-section.iee-det-navwrap.elementor-section-full_width {
  overflow: visible;
  z-index: 5;
}

.iee-det-navwrap .elementor-container,
.iee-det-navwrap .elementor-column,
.iee-det-navwrap .elementor-widget-wrap,
.iee-det-navwrap .elementor-widget {
  overflow: visible;
}

.iee-solnav__side {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  gap: 15px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.iee-solnav__side--back {
  justify-content: flex-start;
  padding-left: max(20px, calc(50% - 570px));
}

.iee-solnav__side--next {
  /* Deliberately NOT position:relative — the menu below is offset from the
     rail, so its containing block must be the full-width bar. Anchoring it
     here would make its 50% resolve against this half-width side. */
  justify-content: flex-end;
  padding-right: max(20px, calc(50% - 570px));
}

.iee-solnav__toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.iee-solnav__label {
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #fff;
  transition: opacity 0.25s ease;
}

.iee-solnav__side:hover .iee-solnav__label,
.iee-solnav__toggle:hover .iee-solnav__label {
  opacity: 0.85;
}

.iee-solnav__tile {
  position: relative;
  /* Figma: tile y4421 against a bar at y4437 — it rides 16px up into the
     section above. Centred in a 70px bar it would sit at -3.5, so lift it a
     further 12.5px. The overhang is what makes the glass read: the blur then
     samples the CTA above instead of flat orange. */
  top: -12.5px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 77px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);   /* white @ 10% */
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  transition: background 0.25s ease;
}

.iee-solnav__side:hover .iee-solnav__tile,
.iee-solnav__toggle:hover .iee-solnav__tile {
  background: rgba(255, 255, 255, 0.22);
}

.iee-solnav__tile img {
  display: block;
  width: 28.5px;
  height: 37.5px;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Same arrow asset, turned to point back. */
.iee-solnav__side--back .iee-solnav__tile img {
  transform: rotate(-90deg);
}

.iee-solnav__side--back:hover .iee-solnav__tile img {
  transform: rotate(-90deg) translateY(4px);
}

.iee-solnav__toggle:hover .iee-solnav__tile img {
  transform: translateY(-4px);
}

.iee-solnav.is-open .iee-solnav__toggle .iee-solnav__tile img {
  transform: rotate(180deg);
}

.iee-solnav__divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
}

/* --- the menu panel ------------------------------------------------------- */

.iee-solnav__menu {
  position: absolute;
  /* Figma: panel right edge x1544 = rail right (1530) + 14. 50% here is half
     the bar, so this lands the panel 14px past the rail's right edge. */
  right: max(6px, calc(50% - 584px));
  bottom: calc(100% - 24px);            /* tucks 24px behind the bar */
  z-index: 0;                           /* behind the bar fill and tiles */
  width: 273px;
  padding: 28px 30px 36px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);       /* #00000066 */
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.iee-solnav__menu[hidden] {
  display: none;
}

.iee-solnav.is-open .iee-solnav__menu {
  opacity: 1;
  transform: translateY(0);
}

.iee-solnav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iee-solnav__item + .iee-solnav__item {
  border-top: 1px dashed rgba(255, 255, 255, 0.2);   /* #FFFFFF33 */
}

.iee-solnav__link {
  display: block;
  padding: 14px 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.iee-solnav__item:first-child .iee-solnav__link {
  padding-top: 0;
}

.iee-solnav__item:last-child .iee-solnav__link {
  padding-bottom: 0;
}

.iee-solnav__link:hover,
.iee-solnav__link:focus-visible {
  color: #ffcb93;
  padding-left: 4px;
}

.iee-solnav__link.is-current {
  color: var(--iee-det-bar);   /* #D86130 */
}

@media (prefers-reduced-motion: reduce) {
  .iee-solnav__menu,
  .iee-solnav__tile img,
  .iee-solnav__link {
    transition: none !important;
  }
}

/* --- Dark header variant, used on solution detail pages ------------------- */

.iee-detail-page .iee-header .iee-nav a {
  color: #fff;
}

/* The toggle icon defaults to navy (#050c2c) to sit on the white header
   used everywhere else — invisible against this navy header. The open
   panel itself is still white, so flip back to navy only once it's open. */
.iee-detail-page .iee-header .iee-nav-toggle {
  color: #fff;
}

.iee-detail-page .iee-nav-toggle[aria-expanded="true"] {
  color: #050c2c;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .iee-solnav__side--back {
    padding-left: 20px;
  }

  .iee-solnav__side--next {
    padding-right: 20px;
  }
}

@media (max-width: 960px) {
  .iee-det-hero {
    padding: 90px 0 36px;
  }

  .iee-det-hero__title,
  .iee-det-hero__title.elementor-widget .elementor-heading-title {
    font-size: 32px;
    line-height: 40px;
  }

  .iee-cat__points-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .iee-cat__heading,
  .iee-det-band__title,
  .iee-det-band__title.elementor-widget .elementor-heading-title,
  .iee-det-strip__title,
  .iee-det-strip__title.elementor-widget .elementor-heading-title {
    font-size: 27px;
    line-height: 35px;
  }

  .iee-det-strip {
    background-image: none !important;
  }

  .iee-det-cta__half {
    min-height: 0;
  }

  .iee-det-cta__half > .elementor-widget-wrap {
    min-height: 0;
    padding: 48px 24px;
  }

  .iee-det-cta__title,
  .iee-det-cta__title.elementor-widget .elementor-heading-title {
    font-size: 28px;
    line-height: 34px;
  }

  .iee-det-cta__text,
  .iee-det-cta__text.elementor-widget,
  .iee-det-cta__half--right .iee-det-cta__text,
  .iee-det-cta__half--right .iee-det-cta__text.elementor-widget {
    margin-bottom: 28px;
  }

  .iee-det-cta__text.elementor-widget p {
    font-size: 16px;
    line-height: 23px;
  }

}

@media (max-width: 860px) {
  .iee-keyvars__tiles {
    flex-wrap: wrap;
  }

  .iee-keyvars__tile {
    width: calc(50% - 5px);
  }

  /* This variant sets its own fixed 6-column grid (112px each) for desktop
     with no responsive rule of its own, so it was overflowing the rail on
     narrow screens instead of wrapping like the default tiles above. */
  .iee-s5-hero .iee-keyvars__tiles {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
  }

  .iee-s5-hero .iee-keyvars__tile {
    width: auto;
  }

  /* Stays one row on mobile — the desktop tile/label sizes just don't leave
     enough width for both "Back to All Solutions" and "View Other
     Solutions" side by side under ~400px, so everything shrinks instead of
     stacking into two rows. */
  .iee-solnav {
    height: auto;
    min-height: 56px;
  }

  .iee-solnav__side,
  .iee-solnav__toggle {
    gap: 8px;
  }

  .iee-solnav__side--back {
    padding-left: 14px;
  }

  .iee-solnav__side--next {
    padding-right: 14px;
  }

  .iee-solnav__tile {
    /* Geometric centre measures exactly true, but an upward-pointing arrow
       is base-heavy — most of its visual weight sits in the wide bottom,
       not the narrow tip — so a mathematically centred one reads as
       sitting slightly low. Nudge up a couple px to compensate. */
    top: -2px;
    width: 36px;
    height: 29px;
  }

  .iee-solnav__tile img {
    width: 13px;
    height: 16px;
  }

  .iee-solnav__label {
    font-size: 12px;
    line-height: 15px;
  }
}

/* Full-bleed sections: override the site-wide 1140 container cap. */
/* The Customizer CSS caps every container with
   `body.elementor-page .elementor-section > .elementor-container` (0,3,1),
   so these have to outrank that, not just the plain section rule. */
body.elementor-page .elementor-section.iee-det-cta > .elementor-container,
body.elementor-page .elementor-section.iee-det-band > .elementor-container,
body.elementor-page .elementor-section.iee-det-navwrap > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* The Customizer clips every section with
   `body.elementor-page .elementor-section.elementor-section-full_width`
   (0,3,1), which ties with the footer reset above and wins on order — so the
   back-to-top button was being cut off at the footer's top edge. */
body:not(.home) .elementor-section.iee-footer-main.iee-footer-main--enhanced {
  overflow: visible;
}

/* Figma 146:2556 — the office tag sits flush against its column rule
   (tag x391 against the rail at x390), not inset by the column padding. */
.iee-footer-office > h2 {
  margin-left: -31px;   /* -30 padding -1 border: butt onto the column rule */
}

@media (max-width: 991px) {
  .iee-footer-office > h2 {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Motion pass — anything that changes state on hover/focus gets a transition,
   and everything is disabled under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* Panel image cross-fades when a product type is selected (see
   product-category.js, which toggles .is-swapping around the src change). */
.iee-cat__button {
  transition: padding-left 0.35s ease;
}

.iee-cat__item:hover .iee-cat__button,
.iee-cat__item.is-active .iee-cat__button {
  padding-left: 6px;
}

.iee-cat__marker {
  transform: scale(0.7) rotate(-360deg);
  transition: opacity 0.35s ease;
}

.iee-cat__item.is-active .iee-cat__marker {
  animation: iee-cat-marker-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transform: scale(1) rotate(0deg);
}

@keyframes iee-cat-marker-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-360deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.iee-cat__item {
  transition: border-color 0.35s ease;
}

.iee-cat__item .iee-cat__name {
  opacity: 0.75;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.iee-cat__item.is-active .iee-cat__name,
.iee-cat__item:hover .iee-cat__name {
  opacity: 1;
}

/* Key-variable tiles lift slightly on hover. */
.iee-keyvars__tile {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.iee-keyvars__tile:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
}

/* Nav + footer links. */
.iee-nav a,
.iee-footer-links a,
.iee-footer-contacts a,
.iee-footer-legal-shell a,
.site-nav a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.iee-nav-toggle {
  display: none;
}

.iee-nav-cta {
  display: none;
}

/* Traps background scroll while the fullscreen mobile menu is open.
   NOT position:fixed here — that would make body the containing block
   for the panel's own position:fixed, offsetting it by the scroll
   amount instead of covering the viewport (see main.js). Plain
   overflow:hidden handles desktop/Android; main.js's touchmove guard
   covers iOS Safari, which doesn't respect overflow:hidden for touch. */
body.iee-nav-open {
  overflow: hidden;
}

.iee-footer-back-to-top {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

.iee-footer-back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(5, 12, 44, 0.35);
}

.iee-solnav__side--next:hover .iee-solnav__tile img {
  transform: translateY(-4px);
}

.iee-solnav__label {
  transition: opacity 0.25s ease;
}

.iee-solnav__side:hover .iee-solnav__label {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .iee-sol__title,
  .iee-sol__title::after,
  .iee-sol__row,
  .iee-sol__thumb,
  .iee-cat__name::after,
  .iee-cat__button,
  .iee-cat__marker,
  .iee-cat__item,
  .iee-keyvars__tile,
  .iee-footer-back-to-top,
  .iee-solnav__tile img,
  .iee-solnav__label,
  .iee-sol-cta__button.elementor-widget .elementor-button,
  .iee-det-cta__button.elementor-widget .elementor-button {
    transition: none !important;
  }

  .iee-keyvars__tile:hover,
  .iee-footer-back-to-top:hover,
  .iee-solnav__side--next:hover .iee-solnav__tile img,
  .iee-solnav__side--back:hover .iee-solnav__tile::before,
  .iee-solnav__side--back:hover .iee-solnav__tile::after {
    transform: none;
  }

  .iee-cat__item.is-active .iee-cat__marker {
    animation: none;
    transform: scale(1) rotate(0deg);
  }
}

/* Sticky only makes sense while the columns sit side by side, and even
   forcing it to work on mobile felt fragile (fighting a global reveal
   animation and a global overflow:hidden just to get a floating panel
   working). Simpler and more reliable on mobile: drop the shared image
   panel entirely and let each row carry its own image, expanding directly
   underneath it when that row is active — an accordion, not a scroller. */
@media (max-width: 960px) {
  .iee-cat__panel-slot {
    display: none;
  }

  .iee-cat__body {
    display: block;
  }

  /* Two classes to out-specify Elementor's own "img { height: auto }" /
     ".elementor img" defaults, which otherwise win over a single-class
     selector and leave every row's image at its natural height instead
     of collapsed. */
  .iee-cat__item .iee-cat__item-image {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    border-radius: 10px;
    /* contain, not cover — cover was cropping product photos to fill a
       fixed box; the full photo needs to stay visible, letterboxed on a
       tinted background instead of clipped. */
    object-fit: contain;
    background: var(--iee-det-panel);
    opacity: 0;
    overflow: hidden;
    transition: height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
  }

  .iee-cat__item.is-active .iee-cat__item-image {
    height: 200px;
    margin: 16px 0 20px;
    opacity: 1;
  }

  .iee-s2-match::before {
    height: 170px;
    background-position: right top;
    background-size: auto 320px;
  }

  .iee-s2-match .iee-cat {
    margin-top: 0;
  }

  .iee-s2-match .iee-cat__heading {
    position: static;
    width: auto;
    margin-bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-cat__image {
    transition: none !important;
  }
}

/* Strips stack below the two-column breakpoint: photo returns to flow.
   Elementor only stacks columns at 767px, so force it here or the photo is
   squeezed into a half-width column between 768 and 960. */
@media (max-width: 960px) {
  .iee-det-strip .elementor-column {
    width: 100%;
  }

  .iee-det-strip__media.elementor-widget,
  .iee-det-strip__mark.elementor-widget,
  .iee-det-strip__band.elementor-widget {
    position: static;
    width: 100%;
    margin-top: 28px;
  }

  .iee-det-strip__mark,
  .iee-det-strip__band {
    display: none;
  }
}

/* Inverted logo on the solution-detail headers (Figma 791:28): 74x68 with its
   left edge on the rail (x390 of the 1920 frame). Elementor centres image
   widgets by default, which pushed it ~134px into the column. */
.iee-detail-page .iee-det-logo {
  text-align: left;
}

.iee-detail-page .iee-det-logo img {
  width: 73px;
  height: auto;
  margin-left: 0;
  margin-right: auto;
}

.iee-detail-page .iee-det-logo a {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.25s ease;
}

.iee-detail-page .iee-det-logo a:hover,
.iee-detail-page .iee-det-logo a:focus-visible {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .iee-detail-page .iee-det-logo a {
    transition: none !important;
  }
}

/* ==========================================================================
   Industries page
   Figma 395:2220 — 1920 frame, 1140 rail at x=390.
   ========================================================================== */

/* Figma 395:2905 — the orange band is full-bleed (x -14, w 1947), so it has to
   escape the 1140 rail. The parent section is overflow:hidden, which clips the
   breakout instead of producing a horizontal scrollbar. */
.iee-ind__bar {
  position: relative;
  background: var(--iee-sol-accent);          /* #DC6838 */
  height: 81px;
  display: flex;
  align-items: flex-end;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Figma 395:3027 — 1128 wide, centred; its top sits 23px below the band top,
   and the pill fills the remaining 68px down to the band's bottom edge. */
.iee-ind__tabs {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 36px;
  height: 68px;
  padding-top: 10px;
  width: min(1128px, 100% - 40px);
  margin: 0 auto;
  scrollbar-width: none;
}

.iee-ind__tabs::-webkit-scrollbar {
  display: none;
}

/* The white pill tracks the active tab (position set in JS): Figma 157x68 at
   x372 for a 109px label, i.e. 24px of breathing room on each side. */
.iee-ind__tabs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: calc(var(--iee-pill-w, 109px) + 48px);
  height: 68px;
  border-radius: 10px 10px 0 0;
  background: #f5fafd;
  transform: translateX(calc(var(--iee-pill-x, 0px) - 24px));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.iee-ind__tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.8);             /* #FFFFFFCC */
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  cursor: pointer;
  transition: color 0.25s ease;
}

.iee-ind__tab:hover {
  color: #fff;
}

.iee-ind__tab.is-active {
  color: var(--iee-sol-accent);
  font-weight: 400;
}

.iee-ind__tab--bearing,
.iee-ind__tab--bearing.is-active {
  min-width: max-content;
  white-space: nowrap;
}

/* --- panels --------------------------------------------------------------- */

.iee-ind__panels {
  position: relative;
  padding: 60px 0 0;
}

.iee-ind__panel {
  position: relative;
  display: grid;
  grid-template-columns: 40.55% minmax(0, 1fr);  /* aside 462 / main 676 */
  gap: 0;
  align-items: start;
  isolation: isolate;
}

.iee-ind__panel[hidden] {
  display: none;
}

.iee-ind__panel--aerospace {
  min-height: 580px;
}

/* Line-art sits behind the content and is positioned per tab. */
.iee-ind__panel::before {
  content: "";
  position: absolute;
  left: var(--iee-ind-bg-left, -86px);
  top: var(--iee-ind-bg-top, 464px);
  z-index: 0;
  width: var(--iee-ind-bg-w, 438px);
  height: var(--iee-ind-bg-h, 435px);
  background-image: var(--iee-ind-bg-image, url("assets/images/industries/line-art.png"));
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.iee-ind__aside,
.iee-ind__main {
  position: relative;
  z-index: 1;
}

.iee-ind__title {
  margin: 0;
  max-width: 320px;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
  background: linear-gradient(101deg, #c44614 0%, #db6536 32.7%, #f0aa5e 78.8%, #ffcb93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .iee-ind__title {
    background: none;
    color: var(--iee-sol-accent);
  }
}

.iee-ind__subtitle {
  margin: 10px 0 0;
  max-width: 367px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.iee-ind__main {
  max-width: 676px;
}

.iee-ind__intro {
  margin: 0 0 21px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

/* --- cards ---------------------------------------------------------------- */

.iee-ind__card {
  max-width: 450px;
  margin-top: 50px;
  border: 1px dashed #00007c;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.iee-ind__card + .iee-ind__card {
  margin-top: 20px;
}

.iee-ind__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 26px;
  background: #00007c;
}

.iee-ind__card-icon {
  display: block;
  width: 26px;
  height: 28px;
  object-fit: contain;
}

.iee-ind__card-title {
  margin: 0;
  color: #f5fafd;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
}

.iee-ind__list {
  margin: 0;
  padding: 22px 26px 18px 32px;
  list-style: none;
}

.iee-ind__item {
  position: relative;
  padding: 0 0 0 32px;
  margin-bottom: 9px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 19px;
}

.iee-ind__item:last-child {
  margin-bottom: 0;
}

.iee-ind__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  background-image: url("assets/images/industries/icons/tick.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.iee-ind__actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.iee-ind__client {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 17px;
  gap: 4px;
  border-radius: 20px;
  background: #e4ebef;
  color: #838383;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ind__client-label {
  color: inherit;
}

.iee-ind__client-name {
  color: inherit;
  font-weight: 600;
}

.iee-ind__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 0;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--iee-sol-accent);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.iee-ind__cta:hover,
.iee-ind__cta:focus-visible {
  background: #c44614;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(196, 70, 20, 0.28);
}

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

@media (max-width: 960px) {
  .iee-ind__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .iee-ind__panel--aerospace {
    min-height: 0;
  }

  .iee-ind__panel::before {
    display: none;
  }

  .iee-ind__title,
  .iee-ind__subtitle {
    max-width: none;
  }

  .iee-ind__bar {
    height: auto;
    padding: 14px 0;
  }

  .iee-ind__tabs {
    gap: 28px;
    height: auto;
    padding-top: 0;
    padding-right: 24px;                       /* runway so the last tab isn't flush to the fade edge */
    justify-content: flex-start;
    overflow-x: auto;
  }

  /* Tabs get cut off mid-word at the scroll edges — fade them into the
     bar's own orange instead of a hard clip, so it reads as "more to
     scroll" rather than a chopped-off label. Each side's fade only shows
     while there's actually strip left to scroll past on that side
     (toggled in industry-tabs.js), so the very first and last tabs read
     as fully opaque, solid edges rather than always fading away. Widened
     past the original 24px so the right edge reads more clearly as "cut
     off, keep scrolling" instead of just a soft trim. */
  .iee-ind__tabs.iee-ind__tabs--fade-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
    mask-image: linear-gradient(90deg, transparent, #000 24px);
  }

  .iee-ind__tabs.iee-ind__tabs--fade-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }

  .iee-ind__tabs.iee-ind__tabs--fade-left.iee-ind__tabs--fade-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
  }

  .iee-ind__tab {
    min-height: 0;
    width: auto !important;                    /* Figma's hand-set widths are desktop-only */
    white-space: nowrap;
  }

  /* A divider between tabs — sits in the middle of the flex gap so it
     doesn't crowd either label. */
  .iee-ind__tab:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;                              /* half of the 28px gap */
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
  }

  /* the pill can't track a scrolling strip cleanly on small screens */
  .iee-ind__tabs::before {
    display: none;
  }

  .iee-ind__tab.is-active {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .iee-ind__panel {
    padding-bottom: 40px;
  }

  /* Lock the tab bar in place while the selected industry's panel scrolls
     past underneath, same as the FAQ search/rail: .iee-ind__bar and
     .iee-ind__panels are direct siblings inside .iee-ind, so that
     wrapper's own height (bar + whichever panel is active) is exactly the
     runway sticky needs — it releases on its own once the section ends
     and the next one scrolls into view, no JS required. */
  body.elementor-page .iee-reveal-item:has(.iee-ind__bar) {
    transform: none !important;
  }

  /* Every .elementor-section on the site clips overflow (body.elementor-page
     .elementor-section { overflow: hidden }, line 79) so its own background
     tricks stay contained — but that clip also blocks position:sticky on
     anything inside it, since sticky only tracks scroll within the nearest
     ancestor that doesn't clip. This section (.iee-ind-wrap) needs to allow
     it through for the bar below to stick at all.
     !important because the Customizer's Additional CSS (#wp-custom-css)
     re-asserts overflow:hidden on sections with a same-specificity
     selector, and being inline it loads after this file and wins. */
  body.elementor-page .elementor-section.iee-ind-wrap {
    overflow: visible !important;
  }

  /* A sticky child's release point is bounded by its own parent's box —
     .iee-ind (bar + panels) is that parent here, but left at its default
     position:static some engines get the containing-block boundary wrong
     and let the sticky child run past it indefinitely instead of
     un-sticking at the parent's bottom edge. Making it an explicit
     formal containing block removes the ambiguity. */
  .iee-ind {
    position: relative;
  }

  /* Scroll anchoring must never track the bar or its section: the
     released swap teleports the bar between the section's bottom
     (absolute) and its flow slot at the section's top (sticky), and
     Chrome, having chosen the bar as its scroll anchor, dragged the
     page's scroll position along with it — a ~1200px jump back to the
     section top mid-scroll, with no scroll call in sight (caught by the
     on-page debug log: "JUMP 1722 -> 536" right after the class flip). */
  body.elementor-page .elementor-section.iee-ind-wrap,
  .iee-ind,
  .iee-ind__bar,
  .iee-ind__panels {
    overflow-anchor: none;
  }

  /* Escalated to the whole scroller: the targeted exclusions above did
     not stop the mid-scroll teleports on mobile Chrome (debug log:
     JUMP ~1710 -> 536 with no scroll call). Disabling anchoring for the
     page removes the entire mechanism from suspicion; layout above the
     viewport is stable here (reveals animate transform/opacity only), so
     losing anchoring costs nothing visible. */
  html {
    overflow-anchor: none;
  }

  .iee-ind__bar {
    position: sticky;
    top: 76px;                                  /* site header height */
    z-index: 60;
    transition: top 260ms cubic-bezier(.16, 1, .3, 1);
  }

  /* No JS-driven "released" fallback any more: native sticky release
     works once nothing clips the section (the overflow override above),
     and the old class-swap moved layout mid-scroll, which mobile Chrome
     answered with a scroll teleport back to the section top. */

  /* main.js toggles this on body while scrolling down (the header itself
     slides away via transform), so once it's hidden the bar's reserved
     76px offset is dead space above it instead of the true top — track
     the header's real on-screen state instead of assuming it's always
     there. */
  body.iee-header-hidden .iee-ind__bar {
    top: 0;
  }

  /* Sized to its text (inline-flex, no width rule) like every desktop CTA
     button, but stacked full-width on mobile that leaves it looking
     stranded next to a large block of empty space beside it.
     text-align because once a long label wraps (Semiconductor), the
     wrapped text block fills the button's full width and justify-content
     can no longer center anything — each line renders left-aligned with
     dead space on the right. text-wrap: balance splits the two lines
     evenly instead of a long first line over a short orphan. */
  .iee-ind__cta {
    width: 100%;
    padding: 12px 22px;
    text-align: center;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-ind__tabs::before,
  .iee-ind__cta,
  .iee-ind__tab {
    transition: none !important;
  }
}

/* --- Industries: marquee + "does it fit" card ----------------------------- */

.iee-ind-marquee {
  background: #fff;
  overflow: hidden;
}

.iee-marquee {
  overflow: hidden;
  padding: 35px 0 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.iee-marquee__track {
  display: flex;
  align-items: center;
  gap: 35px;
  width: max-content;
  animation: iee-marquee 46s linear infinite;
}

.iee-marquee__item {
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 22.5px;
  line-height: 29.5px;
  white-space: nowrap;
}

.iee-marquee__item strong {
  color: var(--iee-sol-accent);
  font-weight: 400;
}

.iee-marquee__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #84a7b5;
}

@keyframes iee-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.iee-fit {
  position: relative;
  overflow: hidden;
  width: 1337px;
  height: 300px;
  margin: 0 calc(50% - 668.5px);
  border-radius: 10px;
  background-position: center right;
  background-size: cover;
  isolation: isolate;
}

.iee-fit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.94) 0%, rgba(20, 20, 20, 0.86) 42%, rgba(20, 20, 20, 0.35) 72%, rgba(20, 20, 20, 0.1) 100%);
}

.iee-fit__copy {
  max-width: 519px;                            /* 421 of copy + the 98px inset */
  padding: 50px 0 0 98px;
}

.iee-fit__title {
  margin: 0 0 20px;
  max-width: 397px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
}

/* Tablet-tier taper — this only had a phone override, so it held the
   full 35px desktop size through 768-1024px. */
@media (max-width: 1024px) {
  .iee-fit__title {
    font-size: 28px;
    line-height: 34px;
  }
}

.iee-fit__text {
  margin: 0;
  max-width: 421px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-fit__actions {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  right: 102px;
  top: 125px;
  z-index: 2;
  gap: 21px;
}

/* Figma 395:2922 — this page's CTA button is 222x66, narrower than the
   solutions overview's, so it is scoped to the modifier class. */
.iee-sol-cta--compact .iee-sol-cta__button .elementor-button {
  width: 222px;
}

@media (max-width: 860px) {
  .iee-sol-cta--compact .iee-sol-cta__button .elementor-button {
    width: auto;
    min-width: 180px;
    padding: 0 24px;
  }
}

.iee-fit__btn.elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 270px;
  max-width: 270px;
  height: 50px;
  min-height: 50px;
  padding: 0 20px;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.004) !important;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.32s ease, box-shadow 0.32s ease,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.iee-fit__btn.elementor-button.iee-fit__btn--whatsapp {
  width: 140px;
  max-width: 140px;
}

.iee-fit__btn .iee-glass-bg,
.iee-fit__btn .iee-glass-glow {
  position: absolute;
  pointer-events: none;
}

.iee-fit__btn .iee-glass-bg {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease;
}

.iee-fit__btn .iee-glass-glow {
  inset: -65%;
  z-index: 0;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(
    from 90deg at 40% -25%,
    #daf4f7,
    rgba(218, 244, 247, 0.75),
    rgba(218, 244, 247, 0.35),
    rgba(255, 255, 255, 0),
    rgba(218, 244, 247, 0.35),
    rgba(218, 244, 247, 0.75),
    #daf4f7
  );
  filter: blur(5px);
  transform: rotate(-35deg) scale(0.8);
  transition: none;
}

.iee-fit__btn .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

.iee-fit__btn .elementor-button-text {
  color: #fff;
  line-height: 21px;
  white-space: nowrap;
}

.iee-fit__btn.elementor-button:hover,
.iee-fit__btn.elementor-button:focus-visible {
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.004) !important;
  box-shadow: none !important;
  outline: none;
  transform: none !important;
}

.iee-fit__btn:hover .iee-glass-glow,
.iee-fit__btn:focus-visible .iee-glass-glow {
  animation: iee-glass-glow-sweep 1.1s linear both;
}

.iee-fit__btn:hover .iee-glass-bg,
.iee-fit__btn:focus-visible .iee-glass-bg {
  background: #f8f8f8;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 1.1s linear, backdrop-filter 1.1s linear;
}

.iee-fit__btn:hover .elementor-button-text,
.iee-fit__btn:focus-visible .elementor-button-text {
  color: #10162a;
  transition: color 1s linear 0.08s;
}

@media (max-width: 860px) {
  .iee-fit {
    width: auto;
    height: auto;
    margin: 0;
  }

  .iee-fit__copy {
    max-width: none;
    padding: 36px 24px 20px;
  }

  /* Stacked and centred as a group: the column is sized by its widest
     button (the consultation one at its natural width), the WhatsApp
     button stretches to match it, and auto side margins centre the pair
     in the card. Not full-width by design — see also the tighter button
     padding below. */
  .iee-fit__actions {
    position: relative;
    right: auto;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: calc(100% - 48px);
    gap: 14px;
    margin: 16px auto 32px;
  }

  /* The desktop hug-widths (270px / 140px) squeezed the labels against
     the button edges with lopsided leftover space. Instead: natural text
     width plus a modest 16px inset, and both buttons share the column's
     width so they always match. Selectors mirror the desktop rules so
     this later block wins on specificity for the whatsapp variant too. */
  .iee-fit__btn.elementor-button,
  .iee-fit__btn.elementor-button.iee-fit__btn--whatsapp {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0 16px;
  }

  .iee-marquee {
    padding: 12px 0;
    margin-left: 0;
    margin-right: 0;
  }

  .iee-fit__title {
    font-size: 24px;
    line-height: 31px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-marquee__track {
    animation: none;
  }

  .iee-fit__btn {
    transition: none !important;
  }
}

/* ==========================================================================
   About page
   Figma 261:18 — 1920 frame, 1140 rail at x=390.
   ========================================================================== */

/* --- split hero ----------------------------------------------------------- */

body.elementor-page .elementor-section.iee-ab-hero > .elementor-container,
body.elementor-page .elementor-section.iee-ab-timeline > .elementor-container {
  width: 100% !important;                       /* opt out of the global rail cap */
  max-width: 100% !important;
}

.iee-ab-hero {
  position: relative;
  background: #050c2c;                          /* Figma 272:480 */
}

.iee-ab-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                    /* the title sits on the floor */
  min-height: 500px;
  background: #1c1c97 center/cover no-repeat;   /* Figma 272:479 under the photo */
  isolation: isolate;
}

.iee-ab-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}

.iee-ab-hero__title {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  max-width: 928px;                             /* 440 inset + 448 of text + 40 */
  padding: 0 40px 99px clamp(24px, calc(50vw - 520px), 440px);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 52px;
}

.iee-ab-hero__heading {
  margin: 0 0 20px;
  max-width: 370px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.iee-ab-hero__copy p {
  margin: 0 0 21px;
  width: 497px;
  max-width: 100%;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ab-hero__copy p:last-child {
  margin-bottom: 0;
}

/* Figma 265:144 — the white disc straddles the hero's bottom edge. It lives in
   a zero-height section of its own so it anchors to the page, not to a column. */
body.elementor-page .elementor-section.iee-ab-badge {
  overflow: visible !important;
}

.iee-ab-badge {
  position: relative;
  z-index: 3;
  height: 0;
}

.iee-ab-hero__badge {
  /* !important on the layout-critical properties: this is now a native
     Elementor image widget (was a raw <a> before), and Elementor's own
     auto-generated per-widget CSS (.elementor-element-be8da3c, scoped to
     this exact widget id) is more specific than this class alone, so it
     was winning and stretching the badge to the column's full width. */
  position: absolute !important;
  left: 50% !important;
  top: -59px !important;
  z-index: 3;
  /* !important: Elementor's own `.elementor-element:where(.e-con-full,
     .elementor-widget) { align-items: var(--align-items) }` (--align-items
     defaults to initial) ties this rule's specificity and loads after it,
     so without !important the flex alignment loses and the arrow icon
     stretches to fill the full 145px circle instead of centering. */
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  width: 145px !important;
  height: 145px !important;
  margin-left: -72px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: default;
  transition: transform 0.3s ease;
}

.iee-ab-hero__badge:hover,
.iee-ab-hero__badge:focus-visible {
  transform: translateY(4px);
}

.iee-ab-hero__badge img {
  display: block;
  width: 30px !important;
  height: auto;
}

/* --- who we are ----------------------------------------------------------- */

.iee-ab-who__label,
.iee-ab-eyebrow {
  margin: 0;
  color: var(--iee-sol-accent);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.iee-ab-who__statement {
  margin: 0 0 20px;
  width: 892px;
  max-width: none;
  color: #838383;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

/* Tablet-tier taper — this had a phone override but nothing for
   768-1024px, so it held the full 35px desktop size there, past the
   page hero's own tablet size (32px). */
@media (max-width: 1024px) {
  .iee-ab-who__statement {
    font-size: 28px;
    line-height: 36px;
  }
}

.iee-ab-who__statement strong {
  color: var(--iee-det-navy);
  font-weight: 500;
}

.iee-ab-who__copy p {
  margin: 0 0 21px;
  width: 677px;
  max-width: none;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ab-who__copy p:last-child {
  margin-bottom: 0;
}

/* --- founder -------------------------------------------------------------- */

.iee-ab-founder {
  position: relative;
}

/* Figma 288:1424 — 1208x293 at x356, i.e. 34px wider than the rail each side.
   Was a 3-track grid (portrait / gap-fill / copy); with the portrait removed
   at the founder's request, "who" takes the freed space as a proper column
   instead of the narrow leftover gap-fill track it used to be. */
.iee-ab-founder__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 632px;
  align-items: start;
  gap: 0;
  width: 1208px;
  max-width: none;
  min-height: 293px;
  margin: 0 calc(50% - 604px);
  border-radius: 10px;
  background: #fff9e9;
}

.iee-ab-founder__who {
  padding: 52px 0 0 40px;
}

.iee-ab-founder__name {
  margin: -8px 0 0;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 78px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .iee-ab-founder__name {
    margin-bottom: 20px;
  }
}

.iee-ab-founder__copy {
  padding: 52px 33px 0 0;
}

.iee-ab-founder__copy p {
  margin: 0 0 21px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ab-founder__copy p:last-child {
  margin-bottom: 0;
}

.iee-ab-founder__quote {
  position: relative;
  margin: -30px 0 0;
  padding: 0;
  border: 0;
  width: 1207px;
  max-width: none;
  color: var(--iee-sol-accent);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
  text-align: right;
}

/* --- timeline ------------------------------------------------------------- */

.iee-ab-timeline {
  background: var(--iee-det-navy);
}

.iee-ab-timeline > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: calc(50% - 570px);              /* left edge onto the rail */
  padding-right: 0;                             /* the row runs to the edge */
}

.iee-tl {
  position: relative;
}

.iee-tl__head {
  height: 49px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.iee-tl__label {
  margin: 0;
  color: var(--iee-sol-accent);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.iee-tl__hint {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 27px;
  padding: 0 14px;
  border-radius: 2px;
  background: var(--iee-sol-accent);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-tl__drag {
  position: absolute;
  left: var(--iee-tl-drag-x, 367px);
  top: var(--iee-tl-drag-y, 85px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(50 56 65 / 26%);
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f5fbfd;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(.76);
  pointer-events: none;
  transition: opacity 180ms ease, filter 220ms ease, transform 300ms linear(0, 0.5183, 0.9652, 1.0541, 1.0243, 1.0012, 0.9971, 0.9988, 1, 1);
  will-change: opacity, filter, transform;
}

.iee-tl__drag-arrow {
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  font-size: 0;
  line-height: 0;
}

.iee-tl__drag-arrow:first-child {
  transform: rotate(-135deg);
}

.iee-tl__drag-arrow:last-child {
  transform: rotate(45deg);
}

.iee-tl.has-drag-cursor .iee-tl__drag {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

.iee-tl.is-used .iee-tl__hint {
  opacity: 0;
}

.iee-tl__viewport {
  padding-top: 30px;                            /* dividers start 30px above */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}

.iee-tl__viewport::-webkit-scrollbar {
  display: none;
}

.iee-tl.is-dragging .iee-tl__viewport {
  cursor: grabbing;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .iee-tl__viewport,
  .iee-tl.is-dragging .iee-tl__viewport {
    cursor: none;
  }
}

.iee-tl.is-static .iee-tl__viewport {
  cursor: default;
}

.iee-tl__track {
  display: flex;
  align-items: flex-start;
  gap: 80px;                                    /* Figma pitch 380 - 300 */
  width: max-content;
  padding-right: 40px;
}

.iee-tl__col {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-height: 293px;
}

.iee-tl__col::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -30px;
  width: 0;
  height: 323px;
  border-left: 1px dotted rgba(245, 251, 253, 0.32);
}

.iee-tl__col:first-child::before {
  left: -2px;
}

.iee-tl__track > .iee-tl__col:last-child::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -30px;
  width: 0;
  height: 323px;
  border-left: 1px dotted rgba(245, 251, 253, 0.32);
}

.iee-tl__year {
  margin: 0 0 14px;
  color: #2b345e;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 70px;
  font-weight: 500;
  line-height: 91px;
}

.iee-tl__title {
  margin: 10px 0 8px;
  max-width: 263px;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 70px;
  font-weight: 500;
  line-height: 70px;
  background: linear-gradient(101deg, #c44614 0%, #db6536 32.7%, #f0aa5e 78.8%, #ffcb93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .iee-tl__title {
    background: none;
    color: var(--iee-sol-accent);
  }
}

.iee-tl__text {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

/* --- why manufacturers ---------------------------------------------------- */

.iee-ben {
  display: grid;
  grid-template-columns: 41.93% minmax(0, 1fr); /* heading 478 / card 662 */
  align-items: start;
  gap: 0;
}

.iee-ben__title {
  margin: 0;
  max-width: 377px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

/* This heading had no mobile taper at all — flat 35px down to the
   smallest phone, well past the page hero's own mobile sizes. */
@media (max-width: 1024px) {
  .iee-ben__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .iee-ben__title {
    font-size: 24px;
    line-height: 31px;
  }
}

.iee-ben__title span {
  color: #84a7b5;
}

.iee-ben__card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* No fixed min-height: the Figma 671px left surplus space pooled at the
     card's bottom whenever the rows came up shorter, so the bottom inset
     never matched the top. Content + equal padding defines the height. */
  padding: 45px 38px;                           /* bottom matches top */
  border-radius: 10px;
  background: linear-gradient(101deg, #c44614 0%, #db6536 32.7%, #f0aa5e 78.8%, #ffcb93 100%);
}

.iee-ben__row {
  --iee-ben-row-y: 0px;
  --iee-ben-row-opacity: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 31px;
  min-height: 100px;
  padding: 12px 24px 12px 32px;
  border: 1px dashed #adadad;
  border-radius: 10px;
  background: #fff;
  opacity: var(--iee-ben-row-opacity);
  transform: translate3d(0, var(--iee-ben-row-y), 0);
  transition: box-shadow 0.25s ease;
  will-change: transform, opacity;
}

.iee-ben__row:hover {
  transform: translate3d(0, calc(var(--iee-ben-row-y) - 2px), 0);
  box-shadow: 0 10px 24px rgba(80, 30, 5, 0.18);
}

.iee-ben__row:nth-child(1) { z-index: 5; }
.iee-ben__row:nth-child(2) { z-index: 4; }
.iee-ben__row:nth-child(3) { z-index: 3; }
.iee-ben__row:nth-child(4) { z-index: 2; }
.iee-ben__row:nth-child(5) { z-index: 1; }

.iee-ben__icon-wrap {
  flex: 0 0 61px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iee-ben__icon {
  display: block;
  height: auto;
  max-height: 57px;
  object-fit: contain;
}

.iee-ben__text {
  margin: 0;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

/* --- key partners --------------------------------------------------------- */

.iee-ab-partners__label {
  margin: 0 0 37px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

.iee-logos {
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.iee-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: iee-logos 128s linear infinite;
}

.iee-logos__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 96px;
  padding: 0 20px;
  border-right: 1px solid rgba(5, 12, 44, 0.12);
}

.iee-logos__item img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 66px;
  object-fit: contain;
  filter: saturate(0.9);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.iee-logos__item:hover img {
  filter: none;
  transform: scale(1.04);
}

@keyframes iee-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- certifications ------------------------------------------------------- */

.iee-fit--wide .iee-fit__copy {
  max-width: 729px;                             /* 631 of copy + the 98 inset */
  padding-top: 41px;
}

.iee-fit--wide .iee-fit__title {
  max-width: 593px;
}

.iee-fit--wide .iee-fit__text {
  max-width: 631px;
}

.iee-ab-cert {
  background: linear-gradient(101deg, #c44614 0%, #db6536 32.7%, #f0aa5e 81.6%, #ffe9d1 100%);
}

.iee-ab-cert__title {
  margin: 0 0 40px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
  text-align: center;
}

/* This heading had no mobile taper at all — flat 35px down to the
   smallest phone, well past the page hero's own mobile sizes. */
@media (max-width: 1024px) {
  .iee-ab-cert__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .iee-ab-cert__title {
    font-size: 24px;
    line-height: 31px;
  }
}

.iee-ab-cert__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 560px));
  justify-content: start;
  column-gap: 19px;
  row-gap: 19px;
  width: 1139px;
  max-width: 100%;
  margin-left: 1px;
}

.iee-ab-cert__card {
  position: relative;
  min-height: 181px;
  padding: 30px 35px 30px 200px;                /* Figma insets the copy deeply */
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: transform;
}

.iee-ab-cert__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(5, 12, 44, 0.16);
}

.iee-ab-cert__icon {
  position: absolute;
  top: 50%;
  left: 35px;
  transform: translateY(-50%);
  width: 134px;
  height: 134px;
  object-fit: contain;
}

.iee-ab-cert__card h3 {
  margin: 0 0 5px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.iee-ab-cert__card p {
  margin: 0;
  max-width: 350px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

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

@media (max-width: 1100px) {
  /* Figma's hand-set copy widths are desktop-only. */
  .iee-ab-who__statement,
  .iee-ab-who__copy p,
  .iee-ab-hero__copy p,
  .iee-ab-founder__quote {
    width: auto;
    max-width: 100%;
  }

  .iee-ab-founder__card {
    width: auto;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .iee-ab-founder__copy {
    grid-column: 1 / -1;
    padding: 0 30px 34px;
  }

  .iee-ab-founder__who {
    padding: 30px 30px 0;
  }

  .iee-ab-founder__name {
    /* margin-top 0, not the desktop -8px optical nudge — it swallowed the
       10px of air the eyebrow adds below itself on small screens. */
    margin-top: 0;
    font-size: 44px;
    line-height: 56px;
    white-space: normal;
  }

  .iee-ab-founder__quote {
    font-size: 40px;
    line-height: 46px;
    text-align: center;
  }

  .iee-ben {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .iee-ben__title {
    max-width: none;
  }
}

/* Below this, the column is too narrow for the 45px title to fit "Engineering
   Services" on one line even with the clamp() above at its floor — drop to
   the compact size early instead of letting it wrap to 3+ lines. */
@media (max-width: 1120px) {
  .iee-ab-hero__title {
    padding: 0 24px 34px;
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 860px) {
  .iee-ab-hero__media {
    min-height: 320px;
  }

  .iee-ab-hero__title {
    padding: 0 24px 34px;
    font-size: 32px;
    line-height: 40px;
  }

  .iee-ab-hero__badge {
    width: 96px;
    height: 96px;
    margin-left: -48px;
    bottom: -48px;
  }

  .iee-ab-who__statement {
    font-size: 26px;
    line-height: 34px;
  }

  .iee-ab-founder__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .iee-ab-founder__who {
    padding: 24px 24px 0;
    text-align: center;
  }

  /* Breathing room between the eyebrow ("Who We Are" / "Founder") and
     the heading it introduces — they sat flush on small screens. */
  .iee-ab-who__label,
  .iee-ab-eyebrow {
    margin-bottom: 10px;
  }

  .iee-ab-founder__quote {
    font-size: 28px;
    line-height: 34px;
  }

  .iee-tl__drag {
    display: none;
  }

  /* Desktop's padding-left: calc(50% - 570px) is a rail-alignment trick
     that only works at ≥1140px — below that it resolves negative, which
     browsers clamp to 0, leaving the label and the first card flush
     against the very edge of the screen. */
  .iee-ab-timeline > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left: 20px;
  }

  .iee-tl__col {
    flex-basis: 260px;
    width: 260px;
  }

  /* Milestone cards get cut off hard at the screen edge — fade them into
     the section's navy instead, same affordance as the industries tab
     strip. Each side's fade only shows while there is row left to scroll
     past on that side (toggled in timeline.js), so the first and last
     stops read as solid, complete edges. */
  .iee-tl__viewport.iee-tl__viewport--fade-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
    mask-image: linear-gradient(90deg, transparent, #000 32px);
  }

  .iee-tl__viewport.iee-tl__viewport--fade-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }

  .iee-tl__viewport.iee-tl__viewport--fade-left.iee-tl__viewport--fade-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 56px), transparent);
  }

  .iee-tl__title,
  .iee-tl__year {
    font-size: 48px;
    line-height: 60px;
  }

  .iee-ben__card {
    min-height: 0;
    padding: 24px 20px;                         /* bottom matches top */
  }

  .iee-ben__row {
    gap: 18px;
    padding: 16px 18px;
  }

  .iee-ab-cert__grid {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    margin-left: 0;
  }

  .iee-ab-cert__card {
    min-height: 0;
    padding: 24px 20px 28px 112px;
  }

  .iee-ab-cert__icon {
    top: 50%;
    left: 20px;
    width: 72px;
    height: 72px;
  }

  .iee-logos {
    margin-left: 0;
    margin-right: 0;
  }

  .iee-logos__item {
    width: 140px;
    height: 92px;
    padding: 0 14px;
  }

  .iee-logos__item img {
    max-height: 64px;
  }
}

@media (max-width: 767px) {
  body.elementor-page .elementor-section.iee-ab-hero {
    padding-bottom: 56px !important;
  }

  body.elementor-page .elementor-section.iee-ab-hero > .elementor-container,
  body.elementor-page .elementor-section.iee-ab-hero .elementor-column,
  body.elementor-page .elementor-section.iee-ab-hero .elementor-widget-wrap {
    min-height: 0 !important;
    height: auto !important;
  }

  body.elementor-page .elementor-section.iee-ab-hero .iee-ab-hero__copy {
    padding-bottom: 6px;
  }

  .iee-ab-hero__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-logos__track {
    animation: none;
  }

  .iee-ab-hero__badge,
  .iee-ben__row,
  .iee-logos__item img,
  .iee-tl__drag {
    transition: none !important;
  }
}

/* ==========================================================================
   FAQ page
   Figma 388:1075 — 1920 frame, 1140 rail at x=390.
   ========================================================================== */

/* The white band and the pale panel are full-bleed, so this section opts out
   of the global rail cap (see body.elementor-page .elementor-section > …). */
body.elementor-page .elementor-section.iee-faq-wrap > .elementor-container {
  width: 100% !important;
  max-width: 100% !important;
}

body.elementor-page .elementor-section.iee-faq-wrap {
  overflow: visible !important;
}

.iee-faq__head {
  background: #fff;                             /* Figma 388:1605 — 1920x308 */
}

.iee-faq__head-inner,
.iee-faq__body-inner {
  width: min(1140px, 100% - 40px);
  margin: 0 auto;
}

.iee-faq__head-inner {
  padding: 11px 0 37px;
}

.iee-faq__title {
  margin: 0 0 15px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 59px;
}

/* --- search --------------------------------------------------------------- */

.iee-faq__search {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 12px 0 20px;
  border-radius: 10px;
  background: #f2f4f4;                          /* Figma 389:1943 */
}

.iee-faq__search-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: currentColor;
  color: #c3c3c3;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat center / contain;
}

.iee-faq__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 16px 0 15px;
  border: 0;
  background: none;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.iee-faq__input::placeholder {
  color: #c3c3c3;
  opacity: 1;
}

.iee-faq__input:focus {
  outline: none;
}

.iee-faq__search:focus-within {
  box-shadow: 0 0 0 2px rgba(220, 104, 56, 0.35);
}

.iee-faq__search-btn {
  flex: 0 0 100px;
  width: 100px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--iee-sol-accent);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.iee-faq__search-btn:hover,
.iee-faq__search-btn:focus-visible {
  background: #c44614;
  transform: translateY(-1px);
}

/* --- body split ----------------------------------------------------------- */

.iee-faq__body {
  position: relative;
  padding: 40px 0 150px;
  isolation: isolate;
}

/* Figma 389:1957 — the pale panel bleeds off the left edge. */
.iee-faq__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: calc(50% - 960px + 682px);
  min-width: 200px;
  border-radius: 0;
  background: #e7f3fa;
}

.iee-faq__body-inner {
  display: grid;
  grid-template-columns: 33.95% minmax(0, 1fr);  /* rail 387 / accordion 754 */
  align-items: start;
  gap: 0;
}

/* --- category rail -------------------------------------------------------- */

.iee-faq__rail {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;                                     /* Figma itemSpacing */
  width: 100%;
  padding: 11px 0 40px;
  max-width: none;
}

.iee-faq__cat {
  padding: 0;
  border: 0;
  background: none;
  color: #84a7b5;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.iee-faq__cat:hover,
.iee-faq__cat:focus-visible {
  color: var(--iee-det-navy);
}

.iee-faq__cat.is-active {
  color: var(--iee-sol-accent);
}

/* --- accordion ------------------------------------------------------------ */

.iee-faq__group[hidden] {
  display: none;
}

/* While a search is running every matching category is on screen at once. */
.iee-faq__group.is-filtered + .iee-faq__group.is-filtered {
  margin-top: 30px;
}

.iee-faq__group.is-filtered::before {
  content: attr(data-category);
  display: block;
  margin-bottom: 18px;
  color: var(--iee-sol-accent);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.iee-faq__item {
  padding-bottom: 19px;                          /* 19 + the 1px rule = Figma's 20 */
  border-bottom: 1px dashed #adadad;
}

.iee-faq__item[hidden] {
  display: none;
}

.iee-faq__item + .iee-faq__item {
  margin-top: 30px;
}

.iee-faq__q-wrap {
  margin: 0;
}

.iee-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.iee-faq__q:hover .iee-faq__q-text,
.iee-faq__q:focus-visible .iee-faq__q-text {
  color: var(--iee-sol-accent);
}

.iee-faq__q-text {
  transition: color 0.25s ease;
}

/* The +/- is drawn rather than typed so the two strokes line up exactly. */
.iee-faq__sign {
  position: relative;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
}

.iee-faq__sign::before,
.iee-faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--iee-sol-accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.iee-faq__sign::before {
  width: 21px;
  height: 3px;
}

.iee-faq__sign::after {
  width: 3px;
  height: 21px;
}

.iee-faq__item.is-open .iee-faq__sign::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.iee-faq__a {
  padding: 4px 0 10px;
}

.iee-faq__a[hidden] {
  display: none;
}

.iee-faq__a p,
.iee-faq__a li {
  margin: 0 0 8px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.iee-faq__a p:last-child,
.iee-faq__a li:last-child {
  margin-bottom: 0;
}

.iee-faq__a ul {
  margin: 0 0 8px;
  padding-left: 22px;
  list-style: disc;
}

.iee-faq__a strong {
  color: var(--iee-det-navy);
  font-weight: 500;
}

.iee-faq__empty {
  margin: 0;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.iee-faq__empty[hidden] {
  display: none;
}

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

@media (max-width: 960px) {
  .iee-faq__title {
    font-size: 32px;
    line-height: 42px;
  }

  /* The reveal-in animation puts a transform on the widget wrapper (and
     stays there until it scrolls into view), which creates a new
     containing block and breaks position:sticky on any descendant. Kill
     it here so the search bar and rail below can stick correctly. */
  body.elementor-page .iee-reveal-item:has(.iee-faq__search) {
    transform: none !important;
  }

  /* faq.js moves the search bar in next to the rail so both share the
     rail's already-tall containing block (.iee-faq__body-inner, which
     spans the whole accordion) — that's what lets them stay stuck for
     the full list scroll instead of just the height of .iee-faq__head. */
  .iee-faq__search {
    height: 52px;
    padding: 0 8px 0 14px;
    position: sticky;
    top: 76px;                                   /* site header height */
    z-index: 60;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 40, 58, 0.12);
  }

  .iee-faq__input {
    font-size: 16px;
  }

  .iee-faq__search-btn {
    flex-basis: 84px;
    width: 84px;
  }

  .iee-faq__body {
    padding: 30px 0 60px;
  }

  .iee-faq__body::before {
    width: 100%;
    border-radius: 0;
  }

  .iee-faq__body-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .iee-faq__rail {
    position: sticky;
    top: 136px;                                  /* search top + its height + 8px gap */
    z-index: 55;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 22px;
    width: auto;
    padding: 10px 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 40, 58, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .iee-faq__rail::-webkit-scrollbar {
    display: none;
  }

  /* Same treatment as the Industries tab strip: fade each edge only while
     there's more to scroll past on that side (toggled in faq.js), rather
     than a permanent fade or a hard clip mid-label. */
  .iee-faq__rail.iee-faq__rail--fade-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
    mask-image: linear-gradient(90deg, transparent, #000 24px);
  }

  .iee-faq__rail.iee-faq__rail--fade-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }

  .iee-faq__rail.iee-faq__rail--fade-left.iee-faq__rail--fade-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }

  .iee-faq__cat {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 16px;
  }

  /* When the site header slides away on scroll-down, its reserved 76px
     becomes dead space above the stuck toolbar — track the header's real
     state so the search + rail ride at the very top instead of hanging
     mid-air (same handoff as the industries tab bar). */
  .iee-faq__search,
  .iee-faq__rail {
    transition: top 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.iee-header-hidden .iee-faq__search {
    top: 0;
  }

  body.iee-header-hidden .iee-faq__rail {
    top: 60px;                                   /* search height + 8px gap */
  }

  .iee-faq__q {
    font-size: 17px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-faq__sign::before,
  .iee-faq__sign::after,
  .iee-faq__search-btn,
  .iee-faq__cat,
  .iee-faq__q-text {
    transition: none !important;
  }
}

/* ==========================================================================
   Current-page marker in the header nav
   Reuses the nav's hover badge (nav-hover.svg, defined in the Customizer CSS)
   and simply pins it on for the page you are actually on. The selectors have
   to out-specify `.iee-nav a::before`, hence the descendant class.
   ========================================================================== */

.iee-nav .current-menu-item > a::before,
.iee-nav .current-menu-ancestor > a::before,
.iee-nav .current-page-ancestor > a::before {
  opacity: 1;
  transform: translateX(-50%) rotate(0deg) scale(1);
}

.iee-header .iee-nav .current-menu-item > a,
.iee-header .iee-nav .current-menu-ancestor > a,
.iee-header .iee-nav .current-page-ancestor > a {
  color: var(--iee-sol-accent);
}

/* The badge is a static state here, so it should not re-animate on hover. */
.iee-nav .current-menu-item > a:hover::before,
.iee-nav .current-menu-ancestor > a:hover::before,
.iee-nav .current-page-ancestor > a:hover::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .iee-nav a::before {
    transition: opacity 0.2s !important;
  }
}

body.elementor-page .iee-header,
body.elementor-page .elementor-section.iee-header,
body.elementor-page .elementor-section.iee-header.elementor-section-full_width {
  position: sticky !important;
  top: 0;
  z-index: 100000;
  background: #fff !important;
  overflow: visible !important;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease, background-color 220ms ease !important;
  will-change: transform;
}

body.iee-header-hidden.elementor-page .iee-header,
body.iee-header-hidden.elementor-page .elementor-section.iee-header {
  transform: translate3d(0, -100%, 0) !important;
}

/* The fullscreen nav panel is nested inside .iee-header, so ANY transform
   on it (including the hide-on-scroll-down one above) becomes the
   panel's containing block and breaks its position:fixed — it renders
   offset instead of covering the viewport. main.js already keeps the
   scroll handler from adding iee-header-hidden while the menu is open,
   but this is a hard guarantee regardless of event timing. */
body.iee-nav-open.elementor-page .iee-header,
body.iee-nav-open.elementor-page .elementor-section.iee-header {
  transform: none !important;
}

body.iee-header-is-sticky.elementor-page .iee-header,
body.iee-header-is-sticky.elementor-page .elementor-section.iee-header {
  box-shadow: 0 12px 34px rgba(5, 12, 44, 0.08);
}

body.elementor-page .iee-header > .elementor-container {
  width: min(var(--ie-rail), calc(100% - 40px)) !important;
  max-width: var(--ie-rail) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.elementor-page .iee-header > .elementor-container > .elementor-column:first-child,
body.elementor-page .iee-header > .elementor-container > .elementor-column:first-child .elementor-widget-wrap {
  justify-content: flex-start !important;
  text-align: left !important;
}

body.elementor-page .iee-header .elementor-widget-image,
body.elementor-page .iee-header .elementor-widget-image .elementor-widget-container {
  margin-left: 0 !important;
  text-align: left !important;
}

/* Desktop logo size for the tagline artwork (mobile gets 84px in the
   960 block below); height follows the image's 1.58 ratio. max-width
   too — Elementor's generated post CSS carries its own 73px max-width
   that would otherwise clamp the width back down. */
body.elementor-page .iee-header .elementor-widget-image img {
  width: 110px;
  max-width: 110px;
  height: auto;
  transition: width 0.25s ease, max-width 0.25s ease;
}

/* Compact once the header is stuck mid-page (main.js toggles the body
   class past 16px of scroll). Mobile is unaffected — its 84px rule in
   the 960 block is !important. */
body.iee-header-is-sticky.elementor-page .iee-header .elementor-widget-image img {
  width: 90px;
  max-width: 90px;
}

body.iee-detail-page.elementor-page .iee-header,
body.iee-detail-page.elementor-page .elementor-section.iee-header,
body.iee-detail-page.elementor-page .iee-header > .elementor-container {
  background: var(--iee-det-navy) !important;
}

/* One logo asset for the whole site: the navy detail-page headers render
   the same blue artwork as pure white via filter, instead of maintaining
   a separate white file that drifts every time the logo changes. */
body.iee-detail-page.elementor-page .iee-header .elementor-widget-image img {
  filter: brightness(0) invert(1);
}

@media (max-width: 960px) {
  body.elementor-page .iee-header,
  body.elementor-page .elementor-section.iee-header,
  body.elementor-page .elementor-section.iee-header.elementor-section-full_width {
    position: sticky !important;
    z-index: 100000;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  body.elementor-page .iee-header > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  body.elementor-page .iee-header > .elementor-container > .elementor-column {
    width: auto !important;
    overflow: visible !important;
  }

  body.elementor-page .iee-header > .elementor-container > .elementor-column:first-child {
    flex: 0 0 auto;
  }

  body.elementor-page .iee-header > .elementor-container > .elementor-column:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.elementor-page .iee-header .elementor-widget-wrap {
    align-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body.elementor-page .iee-header > .elementor-container > .elementor-column:first-child .elementor-widget-wrap {
    justify-content: flex-start !important;
  }

  body.elementor-page .iee-header > .elementor-container > .elementor-column:last-child .elementor-widget-wrap {
    justify-content: flex-end !important;
  }

  body.elementor-page .iee-header .elementor-widget-image {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .iee-nav-wrap {
    position: static;
    z-index: 100001;
    display: flex;
    justify-content: flex-end;
    width: auto;
  }

  .iee-nav-toggle {
    position: relative;
    z-index: 100003;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #050c2c;
    background: rgba(0, 0, 0, 0.004);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Attribute selector, not .iee-nav-wrap.is-open descendant — main.js
     relocates the toggle to <body> (alongside the panel) while open, so
     it can't rely on still being nested inside .iee-nav-wrap for this. */
  .iee-nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: 16px;
    right: 20px;
  }

  .iee-nav-toggle span,
  .iee-nav-toggle::before,
  .iee-nav-toggle::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 240ms ease, opacity 180ms ease;
  }

  .iee-nav-toggle::before {
    transform: translateY(-7px);
  }

  .iee-nav-toggle::after {
    transform: translateY(7px);
  }

  .iee-nav-toggle[aria-expanded="true"]::before {
    transform: rotate(45deg);
  }

  .iee-nav-toggle[aria-expanded="true"] span {
    opacity: 0;
  }

  .iee-nav-toggle[aria-expanded="true"]::after {
    transform: rotate(-45deg);
  }

  /* .iee-nav-panel (js-inserted) wraps the list and the CTA block so both
     can share one flex-column layout. It has to stay position:fixed at
     ALL times, not just while open — the moment it's a normal in-flow
     box in the closed state, the (opacity:0 but still laid-out) list and
     CTA content inflate the header's height. Opacity/pointer-events are
     what actually gate visibility; fixed positioning just keeps it out
     of the document's flow regardless of that state. */
  /* .iee-nav-panel is appended directly to <body> by main.js — NOT
     nested in .iee-header — so nothing about the header (sticky, hidden
     transform, anything else) can ever become its containing block and
     mis-position it. Visibility is its own .is-open class, set at the
     same time as .iee-nav-wrap's. */
  body.elementor-page .iee-nav-panel {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    /* inset:0 alone doesn't reliably stretch a flex + overflow-y:auto box
       to the full viewport in every browser — needs an explicit height.
       100vh first as a safe fallback, 100dvh after so browsers that
       support it get the dynamic-toolbar-aware value. */
    height: 100vh;
    height: 100dvh;
    padding: 88px 24px 24px;
    background: #fff;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  body.elementor-page .iee-nav-panel.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.elementor-page .iee-nav {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Panel itself is a plain fade (moving a full-bleed white rectangle a
     few px doesn't read as motion) — the sense of entrance instead comes
     from each row sliding/fading in with a short stagger. */
  body.elementor-page .iee-nav li {
    width: 100%;
    border-bottom: 1px dotted #adadad;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 220ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: 0ms;
  }

  body.elementor-page .iee-nav li:first-child {
    border-top: 1px dotted #adadad;
  }

  body.elementor-page .iee-nav-panel.is-open .iee-nav li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(1) { transition-delay: 40ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(2) { transition-delay: 75ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(3) { transition-delay: 110ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(4) { transition-delay: 145ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(5) { transition-delay: 180ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(6) { transition-delay: 215ms; }
  body.elementor-page .iee-nav-panel.is-open .iee-nav li:nth-child(n+7) { transition-delay: 250ms; }

  .iee-nav-cta {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 220ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: 0ms;
  }

  body.elementor-page .iee-nav-panel.is-open .iee-nav-cta {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 260ms;
  }

  body.elementor-page .iee-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 20px 4px;
    border-radius: 0;
    color: #050c2c;
    font-size: 22px;
    font-weight: 500;
    text-align: left;
  }

  body.elementor-page .iee-nav a::before {
    display: none;
  }

  body.elementor-page .iee-nav a::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.35;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Ancestor classes included to match the desktop nav rules: on a
     solution detail page WordPress marks the Solutions item with
     current-page-ancestor (not current-menu-item), and without these the
     drawer showed no active state at all on subpages. */
  body.elementor-page .iee-nav .current-menu-item > a,
  body.elementor-page .iee-nav .current-menu-ancestor > a,
  body.elementor-page .iee-nav .current-page-ancestor > a,
  body.elementor-page .iee-nav a:hover,
  body.elementor-page .iee-nav a:focus-visible {
    color: #df6633 !important;
  }

  body.elementor-page .iee-nav a:hover,
  body.elementor-page .iee-nav a:focus-visible {
    background: rgba(223, 102, 51, 0.08);
  }

  body.elementor-page .iee-nav a:hover::after,
  body.elementor-page .iee-nav a:focus-visible::after,
  body.elementor-page .iee-nav .current-menu-item > a::after,
  body.elementor-page .iee-nav .current-menu-ancestor > a::after,
  body.elementor-page .iee-nav .current-page-ancestor > a::after {
    opacity: 0.9;
    transform: rotate(-45deg) translate(2px, -2px);
  }

  body.elementor-page .iee-nav .current-menu-item > a,
  body.elementor-page .iee-nav .current-menu-ancestor > a,
  body.elementor-page .iee-nav .current-page-ancestor > a {
    background: none;
  }

  body.elementor-page .iee-nav .current-menu-item > a::before,
  body.elementor-page .iee-nav .current-menu-ancestor > a::before,
  body.elementor-page .iee-nav .current-page-ancestor > a::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 4px;
    height: 22px;
    background: #df6633;
    transform: translateY(-50%);
    display: block;
  }

  .iee-nav-cta {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 12px;
    width: 100%;
    max-width: 375px;
    margin-top: auto;
    padding-top: 28px;
  }

  .iee-nav-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    background: var(--iee-sol-accent, #df6633);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
  }

  .iee-nav-cta__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1px solid #d8dbe2;
    border-radius: 10px;
    color: #050c2c;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
  }

  .iee-nav-cta__whatsapp-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.87 9.87 0 0 0 12.04 2m0 1.67a8.2 8.2 0 0 1 5.83 2.42 8.19 8.19 0 0 1 2.41 5.82c0 4.54-3.7 8.24-8.25 8.24a8.24 8.24 0 0 1-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.39c0-4.55 3.7-8.23 8.26-8.23m-4.53 4.7c-.16 0-.43.06-.65.31-.23.24-.86.85-.86 2.06 0 1.22.89 2.4 1.01 2.56.13.16 1.76 2.71 4.28 3.79.6.26 1.06.41 1.43.53.6.19 1.15.16 1.58.1.48-.08 1.48-.61 1.69-1.19.21-.59.21-1.09.15-1.2-.06-.1-.23-.16-.48-.28-.25-.13-1.48-.73-1.71-.81-.23-.09-.4-.13-.56.13-.17.25-.64.81-.79.98-.14.16-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.24-.41.08-.17.04-.31-.02-.44-.06-.13-.56-1.36-.78-1.85-.2-.48-.41-.42-.56-.42Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.87 9.87 0 0 0 12.04 2m0 1.67a8.2 8.2 0 0 1 5.83 2.42 8.19 8.19 0 0 1 2.41 5.82c0 4.54-3.7 8.24-8.25 8.24a8.24 8.24 0 0 1-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.39c0-4.55 3.7-8.23 8.26-8.23m-4.53 4.7c-.16 0-.43.06-.65.31-.23.24-.86.85-.86 2.06 0 1.22.89 2.4 1.01 2.56.13.16 1.76 2.71 4.28 3.79.6.26 1.06.41 1.43.53.6.19 1.15.16 1.58.1.48-.08 1.48-.61 1.69-1.19.21-.59.21-1.09.15-1.2-.06-.1-.23-.16-.48-.28-.25-.13-1.48-.73-1.71-.81-.23-.09-.4-.13-.56.13-.17.25-.64.81-.79.98-.14.16-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.24-.41.08-.17.04-.31-.02-.44-.06-.13-.56-1.36-.78-1.85-.2-.48-.41-.42-.56-.42Z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

@media (max-width: 767px) {
  body.elementor-page .iee-header {
    min-height: 76px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  body.elementor-page .iee-header > .elementor-container {
    min-height: 64px !important;
  }

  /* 84px, was 58px: the logo artwork now carries the tagline below the
     mark (wider canvas, 1.58 ratio) — at the old width the mark itself
     shrank to ~36px. This keeps the mark's visual height where it was. */
  body.elementor-page .iee-header .elementor-widget-image img {
    width: 84px !important;
    max-width: 84px !important;
  }

  .iee-nav-toggle {
    width: 40px;
    height: 40px;
  }

  .iee-nav-toggle span,
  .iee-nav-toggle::before,
  .iee-nav-toggle::after {
    width: 20px;
  }

  /* Equal air above and below the headline (was 6px / 34px). */
  body.elementor-page .iee-hero-title {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body.elementor-page .iee-hero-title .elementor-heading-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
  }

  body.elementor-page .iee-hero-media {
    min-height: 530px;
  }

  body.elementor-page .iee-hero-media > .elementor-container,
  body.elementor-page .iee-hero-media .elementor-widget-wrap {
    min-height: 490px !important;
  }

  body.elementor-page .iee-hero-media .iee-trust {
    gap: 9px;
    padding: 14px !important;
  }

  body.elementor-page .iee-hero-media .iee-trust strong {
    font-size: 14px !important;
    line-height: 19px !important;
  }

  body.elementor-page .iee-hero-media .iee-trust-item {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  /* Each badge reads on one line on mobile. The <br> is desktop's
     two-line layout; the markup carries a space before it (added in the
     page data) so hiding it here leaves a proper word gap. nowrap because
     the flex column otherwise sizes the box to the old two-line
     min-content width and re-wraps the joined text anyway. */
  body.elementor-page .iee-hero-media .iee-trust-item em br {
    display: none;
  }

  /* Full available width, not fit-content: sized to its content the box
     hugged the old two-line min-content width (re-wrapping the joined
     labels), and with nowrap instead the text overflowed into the
     padding on devices with larger font metrics, ending flush with the
     box edge. At full width every label fits one line with air to spare,
     and an extreme font scale wraps gracefully instead of overflowing. */
  body.elementor-page .iee-hero-media .iee-trust-box--certs {
    width: 100%;
    max-width: 100%;
    padding-right: 24px;
  }

  body.elementor-page .iee-hero-media .iee-trust-box--certs .iee-trust-item {
    min-width: 0;
  }

  body.elementor-page .iee-trust-iso > i,
  body.elementor-page .iee-trust-eco > i,
  body.elementor-page .iee-trust-years > i {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  body.elementor-page .iee-trust-presence .iee-flag {
    flex-basis: 30px;
    width: 30px !important;
    min-width: 30px;
    max-width: 30px;
    height: 30px !important;
    min-height: 30px;
    max-height: 30px;
  }

  .iee-ab-hero__title,
  .iee-faq__title,
  .iee-ct-head__title {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .iee-ab-hero__heading {
    font-size: 18px;
    line-height: 24px;
  }

  /* Every other hero/CTA band shrinks its padding for mobile; this one had
     no override at all and stayed at the full desktop 40/50. */
  .iee-ct-head {
    padding: 40px 0 48px;
  }

  .iee-ab-hero__copy p,
  .iee-ab-who__copy p,
  .iee-ind__intro,
  .iee-ct-head p,
  .iee-sol__desc {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .iee-ct-head__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .iee-ab-who__statement,
  .iee-sol__title {
    font-size: 24px !important;
    line-height: 31px !important;
  }

  .iee-ind__title {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .iee-ind__subtitle {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .iee-faq__q-wrap {
    font-size: 21px !important;
    line-height: 29px !important;
  }

  .iee-faq__answer p,
  .iee-faq__answer li {
    font-size: 15px !important;
    line-height: 23px !important;
  }
}

@media (max-width: 380px) {
  body.elementor-page .iee-hero-title .elementor-heading-title {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .iee-ab-hero__title,
  .iee-faq__title,
  .iee-ct-head__title,
  .iee-ind__title {
    font-size: 26px !important;
    line-height: 33px !important;
  }
}

/* ==========================================================================
   Contact page
   Figma 389:1977 — 1920 frame, 1140 rail at x=390.
   ========================================================================== */

body.elementor-page .elementor-section.iee-ct-head > .elementor-container,
body.elementor-page .elementor-section.iee-ct-offices > .elementor-container,
body.elementor-page .elementor-section.iee-ct-footer > .elementor-container {
  width: 100% !important;
  max-width: 100% !important;
}

.iee-ct-head {
  background: #fff;                              /* Figma 389:1979 — 1920x330 */
  padding: 40px 0 50px;
}

.iee-ct-head__inner,
.iee-ct-offices__inner,
.iee-ct-footer__inner {
  width: min(1140px, 100% - 40px);
  margin: 0 auto;
}

.iee-ct-head__inner {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

/* The title's 512px box already wraps to 4 short lines inside a half-width
   column well before 767px — drop to a stacked 2-row layout earlier so it
   isn't cramped through the tablet range. */
@media (max-width: 1024px) {
  .iee-ct-head__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
}

.iee-ct-head__title {
  margin: 0;
  max-width: 512px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 52px;
}

/* This page's hero had no tablet-tier size (unlike the About/FAQ heroes it
   shares its phone sizes with, which each have their own ~32px tablet
   rule elsewhere) — it held the full 45px desktop size through 768-1024px.
   min-width keeps this scoped above the phone tiers below, which already
   handle anything narrower via their own !important rules. */
@media (min-width: 768px) and (max-width: 1024px) {
  .iee-ct-head__title {
    font-size: 32px !important;
    line-height: 40px !important;
  }
}

.iee-ct-head__copy p {
  margin: 0 0 21px;
  max-width: 570px;
  color: var(--iee-sol-body);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ct-head__copy p:last-child {
  margin-bottom: 0;
}

/* --- enquiry form --------------------------------------------------------- */

.iee-ct-form-wrap {
  width: min(930px, 100%);                       /* Figma 501..1431 */
  margin: 0 auto;
}

.iee-ct-alert {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-radius: 10px;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.iee-ct-alert--ok {
  border: 1px solid rgba(30, 130, 76, 0.35);
  background: rgba(30, 130, 76, 0.08);
  color: #15603a;
}

.iee-ct-alert--bad {
  border: 1px solid rgba(196, 70, 20, 0.35);
  background: rgba(196, 70, 20, 0.08);
  color: #a53b11;
}

/* The honeypot has to be reachable by a bot but never by a reader. */
.iee-ct-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.iee-ct-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  justify-content: space-between;
  column-gap: 30px;
  row-gap: 30px;                                 /* 71px pitch - 41px field */
}

.iee-ct-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.iee-ct-field--full {
  grid-column: 1 / -1;
}

.iee-ct-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.iee-ct-field__label--visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  white-space: normal;
}

.iee-ct-field__req {
  color: var(--iee-sol-accent);
}

.iee-ct-field__opt {
  color: var(--iee-sol-accent);
  font-size: 14px;
  font-weight: 400;
}

/* Figma draws the rule 41px below the label top, i.e. 20px of typing room. */
.iee-ct-field__input {
  box-sizing: border-box;
  height: 41px;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px dashed #adadad;
  border-radius: 0;
  background: none;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  transition: border-color 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
}

.iee-ct-field__input::placeholder,
.iee-ct-field__textarea::placeholder {
  color: var(--iee-det-navy);
  opacity: 1;
}

.iee-ct-field__input:focus::placeholder,
.iee-ct-field__textarea:focus::placeholder {
  opacity: 0;
}

.iee-ct-field__input:focus {
  outline: none;
  border-bottom-color: var(--iee-sol-accent);
  border-bottom-style: solid;
}

.iee-ct-field__input.is-invalid {
  border-bottom-color: #c44614;
  border-bottom-style: solid;
}

select.iee-ct-field__input {
  cursor: pointer;
  padding-right: 36px;
}

select.iee-ct-field__input:focus {
  border-bottom-style: dashed;
}

/* Figma 403:32 — a thin chevron parked on the rule. */
.iee-ct-field--select::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 15px;
  width: 18px;
  height: 10px;
  background: url("assets/images/ui/dropdown-2x.png") center / 18px 10px no-repeat;
  pointer-events: none;
}

.iee-ct-field__other {
  margin-top: 16px;
}

.iee-ct-field__other[hidden] {
  display: none;
}

/* --- file field ----------------------------------------------------------- */

.iee-ct-field--file {
  justify-content: flex-start;
}

.iee-ct-field__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Figma 403:55 — a 30px orange disc at the right end of the row. */
.iee-ct-field__file-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--iee-sol-accent);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.iee-ct-field__file-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 19px;
  background: url("assets/images/ui/upload-2x.png") center / 19px 19px no-repeat;
  transform: translate(-50%, -50%);
}

.iee-ct-field__file:focus-visible + .iee-ct-field__file-btn,
.iee-ct-field__file-btn:hover {
  background: #c44614;
  transform: scale(1.06);
}

.iee-ct-field__file-name {
  box-sizing: border-box;
  display: block;
  height: 41px;
  padding: 0 44px 20px 0;
  overflow: hidden;
  border-bottom: 1px dashed #adadad;
  color: var(--iee-det-navy);
  cursor: pointer;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- message box ---------------------------------------------------------- */

.iee-ct-field__textarea {
  height: 130px;
  margin-top: 10px;
  padding: 18px 22px;
  border: 1px dashed #adadad;
  border-radius: 20px;
  background: none;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  resize: vertical;
  transition: border-color 0.25s ease;
}

.iee-ct-field__textarea:focus {
  outline: none;
  border-color: var(--iee-sol-accent);
  border-style: solid;
}

/* --- submit --------------------------------------------------------------- */

.iee-ct-form__actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.iee-ct-form__submit {
  width: 150px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--iee-sol-accent);
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.iee-ct-form__submit:hover,
.iee-ct-form__submit:focus-visible {
  background: #c44614;
  transform: translateY(-1px);
}

.iee-ct-form__submit.is-sending {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.iee-ct-form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 18px 0 0;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ct-form__note-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--iee-det-navy);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- offices band --------------------------------------------------------- */

.iee-ct-offices {
  position: relative;
  background: #1e1110 center/cover no-repeat;
  isolation: isolate;
}

.iee-ct-offices::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 6, 5, 0.55);
}

.iee-ct-offices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.iee-ct-office__title {
  margin: 0 0 9px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

/* Figma 395:3329 — black@15% with a 48px glass blur, r20. */
.iee-ct-office__card {
  min-height: 247px;
  padding: 31px 26px 31px 30px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
}

.iee-ct-office__name {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
}

.iee-ct-office__address {
  margin: 10px 0 0;
  max-width: 387px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 21px;
}

.iee-ct-office__rows {
  display: flex;
  flex-direction: column;
  gap: 13px;                                     /* Figma row pitch 37 */
  margin-top: 18px;
}

.iee-ct-office__row {
  display: flex;
  align-items: center;
  min-height: 24px;
  gap: 8px;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.iee-ct-office__row:hover,
.iee-ct-office__row:focus-visible {
  color: var(--iee-sol-accent);
}

.iee-ct-office__row .iee-footer-contact-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.iee-ct-hours {
  margin: 0;
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}

.iee-ct-hours + .iee-ct-hours {
  margin-top: 36px;
}

.iee-ct-hours strong {
  font-weight: 600;
}

.iee-ct-office--hours {
  grid-column: auto;
}

.iee-ct-office--hours .iee-ct-office__card {
  display: block;
  min-height: 0;
}

.iee-ct-office--hours .iee-ct-hours + .iee-ct-hours {
  margin-top: 24px;
}

.iee-ct-offices__meta {
  display: grid;
  grid-template-columns: minmax(0, 443px) minmax(0, 1fr);
  align-items: stretch;
  gap: 28px;
  margin-top: 28px;
}

.iee-ct-offices__scope {
  display: flex;
  align-items: center;
  margin: 35px 0 0;
  max-width: none;
  color: #f5fafd;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

/* --- compact footer ------------------------------------------------------- */

/* Figma 398:2 — this page carries the office details in the body, so the
   footer reduces to a link row plus the legal line. */
.iee-ct-footer {
  background: var(--iee-det-navy);
}

.iee-ct-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  margin-bottom: 40px;
}

.iee-ct-footer__links a {
  color: #fff;
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.iee-ct-footer__links a:hover,
.iee-ct-footer__links a:focus-visible {
  color: var(--iee-sol-accent);
}

.iee-ct-footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}

.iee-ct-footer__legal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  border-top: 1px dotted rgba(255, 255, 255, 0.32);
  transform: translateX(-50%);
}

.iee-ct-footer__legal p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.iee-ct-footer__legal small {
  font-size: 10px;
}

.iee-ct-footer__legal nav {
  display: flex;
  gap: 20px;
}

.iee-ct-footer__legal a {
  color: rgba(255, 255, 255, 0.62);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.iee-ct-footer__legal a:hover,
.iee-ct-footer__legal a:focus-visible {
  color: var(--iee-sol-accent);
}

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

@media (max-width: 1100px) {
  .iee-ct-offices__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .iee-ct-offices__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 860px) {
  .iee-ct-head__title {
    font-size: 32px;
    line-height: 42px;
  }

  .iee-ct-form__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }

  .iee-ct-field__textarea {
    height: 110px;
    padding: 16px 18px;
  }

  .iee-ct-form__note {
    align-items: flex-start;
    text-align: left;
  }

  .iee-ct-form__note-icon {
    margin-top: 3px;
  }

  .iee-ct-offices__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .iee-ct-office__card {
    min-height: 0;
    padding: 24px 22px;
  }

  .iee-ct-offices__scope {
    margin-top: 0;
  }

  .iee-ct-footer__links {
    gap: 18px 26px;
  }

  .iee-ct-footer__legal {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .iee-ct-field--file .iee-ct-field__label {
    padding-right: 54px;
  }

  .iee-ct-form__note {
    justify-content: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iee-ct-form__submit,
  .iee-ct-field__file-btn,
  .iee-ct-field__input,
  .iee-ct-field__textarea {
    transition: none !important;
  }
}

/* Homepage persistent CTAs: these are the only primary action buttons left, so
   keep them available after the hero scrolls away. */
body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa,
body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
  position: fixed !important;
  top: auto !important;
  bottom: calc(var(--iee-hero-cta-bottom, 24px) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 80 !important;
  margin: 0 !important;
  transition: bottom 780ms cubic-bezier(.45, 0, .2, 1), opacity .9s cubic-bezier(.4, 0, .2, 1), filter .9s cubic-bezier(.4, 0, .2, 1), transform .95s cubic-bezier(.4, 0, .2, 1) !important;
}

/* "Request Consultation" measures 155px at 16px/Strichpunkt Sans; the old
   197px box (157px after padding) clipped its last letter by a couple of
   pixels. Widened with real breathing room, keeping the pair centred as a
   unit with the same 20px gap between them. */
body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa {
  left: calc(50% - 178px) !important;
  width: 197px !important;
}

body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
  left: calc(50% + 39px) !important;
  width: 154px !important;
}

body.home .iee-hero-media .elementor-widget-button .elementor-button-wrapper,
body.home .iee-hero-media .elementor-widget-button .elementor-button {
  width: 100% !important;
}

/* Over a light section the glass treatment read as a near-invisible white
   pill; switched to the same solid-orange CTA used across Industries and
   Solutions (var(--iee-sol-accent), darkening on hover) so it stays a clear
   primary action here too. */
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button.iee-glass-ready,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button {
  border: 0 !important;
  background: var(--iee-sol-accent) !important;
  box-shadow: 0 14px 34px rgba(5, 12, 44, .18) !important;
}

body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .iee-glass-bg {
  background: var(--iee-sol-accent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button .elementor-button-text,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:hover .elementor-button-text,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:focus-visible .elementor-button-text {
  color: #fff !important;
  text-shadow: none !important;
}

body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:hover .iee-glass-bg,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:focus-visible .iee-glass-bg {
  background: #c44614 !important;
}

body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:hover.iee-glass-ready,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-button:focus-visible.iee-glass-ready,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:hover,
body.home.iee-hero-ctas-stuck.iee-hero-ctas-on-light .iee-hero-media .elementor-widget-button:nth-child(2) .elementor-button:focus-visible {
  background: #c44614 !important;
}

@media (max-width: 767px) {
  /* Side-by-side at an equal (100vw-52px)/2 split leaves ~121px of usable
     text width after padding — too narrow for "Request Consultation" at the
     desktop 16px size, so it clipped. Trim the horizontal padding and drop
     the font size here (mobile-stuck only) so the label actually fits
     inside that split instead of stacking full-width. */
  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa,
  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
    bottom: calc(var(--iee-hero-cta-bottom, 14px) + env(safe-area-inset-bottom, 0px)) !important;
    width: calc((100vw - 52px) / 2) !important;
  }

  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa .elementor-button,
  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 .elementor-button {
    padding: 0 10px !important;
  }

  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa .elementor-button-text,
  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 .elementor-button-text {
    font-size: 12.5px !important;
    letter-spacing: -0.01em;
  }

  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b61b83c6a1faa {
    left: 20px !important;
  }

  body.home.iee-hero-ctas-stuck .iee-hero-media .elementor-widget-button.elementor-element-b9727aca6a619 {
    left: calc(50vw + 6px) !important;
  }
}

/* Body/section text audited at 16px felt slightly large on phones —
   dropping to 14px at <=767px only; desktop is untouched. Form
   inputs/textareas are deliberately excluded: shrinking them below
   16px triggers iOS Safari's auto-zoom-on-focus, a real usability
   bug, not a style preference. */
@media (max-width: 767px) {
  .hero__copy {
    font-size: 14px !important;
  }

  .section p {
    font-size: 14px !important;
  }

  .solution-row h3 {
    font-size: 14px !important;
  }

  .partners h3,
  .clients h3 {
    font-size: 14px !important;
  }

  body.iee-motion-v2 .iee-hero-media .elementor-button .elementor-button-text {
    font-size: 14px !important;
  }

  .iee-challenge-intro.iee-challenge-intro--enhanced .elementor-widget-text-editor {
    font-size: 14px !important;
  }

  .iee-challenge-cards--enhanced .iee-challenge-card .elementor-widget-text-editor,
  .iee-challenge-card p {
    font-size: 14px !important;
  }

  .iee-challenge-cards--enhanced {
    height: 440px;
    min-height: 440px;
  }

  .iee-challenge-footer p {
    font-size: 14px !important;
  }

  .iee-solutions-intro.iee-solutions-intro--enhanced .elementor-widget-text-editor {
    font-size: 14px !important;
  }

  .iee-solutions-intro-cta.elementor-widget .elementor-button {
    font-size: 14px !important;
  }

  body.elementor-page .iee-solutions--enhanced .iee-solution-description {
    font-size: 14px !important;
  }

  .iee-results-top p {
    font-size: 14px !important;
  }

  .iee-results-outcome span {
    font-size: 14px !important;
  }

  .iee-result-card h3 {
    font-size: 14px !important;
  }

  .iee-results-takeaway p {
    font-size: 14px !important;
  }

  body.elementor-page .iee-process-intro .elementor-widget-text-editor {
    font-size: 14px !important;
  }

  body.elementor-page .iee-process-map .iee-step > span {
    font-size: 14px !important;
  }

  body.elementor-page .iee-process-map .iee-step p {
    font-size: 14px !important;
  }

  .iee-industries-copy > a {
    font-size: 14px !important;
  }

  .iee-industry-name {
    font-size: 14px !important;
  }

  .iee-footer-cta p {
    font-size: 14px !important;
  }

  .iee-footer-office h2 {
    font-size: 14px !important;
  }

  .iee-footer-office strong {
    font-size: 14px !important;
  }

  .iee-footer-office address {
    font-size: 14px !important;
  }

  .iee-footer-contacts a {
    font-size: 14px !important;
  }

  .iee-footer-links a {
    font-size: 14px !important;
  }

  .iee-sol-hero__copy.elementor-widget p {
    font-size: 14px !important;
  }

  .iee-sol__label {
    font-size: 14px !important;
  }

  .iee-sol-cta__text.elementor-widget p {
    font-size: 14px !important;
  }

  .iee-sol-cta__button.elementor-widget .elementor-button {
    font-size: 14px !important;
  }

  .iee-det-hero__eyebrow,
  .iee-det-hero__eyebrow.elementor-widget .elementor-heading-title {
    font-size: 14px !important;
  }

  .iee-det-hero__sub.elementor-widget p + p {
    font-size: 14px !important;
  }

  .iee-keyvars__preface,
  .iee-keyvars__intro,
  .iee-keyvars__outro {
    font-size: 14px !important;
  }

  .iee-keyvars__label {
    font-size: 12px !important;
  }

  .iee-cat__desc {
    font-size: 14px !important;
  }

  .iee-cat__list-label {
    font-size: 14px !important;
  }

  .iee-s2-match .iee-cat__item-desc {
    font-size: 14px !important;
  }

  .iee-det-strip__text.elementor-widget p {
    font-size: 14px !important;
  }

  .iee-det-cta__button.elementor-widget .elementor-button {
    font-size: 14px !important;
  }

  .iee-solnav__link {
    font-size: 14px !important;
  }

  .iee-ind__tab {
    font-size: 14px !important;
  }

  .iee-ind__intro {
    font-size: 14px !important;
  }

  .iee-ind__card-title {
    font-size: 14px !important;
  }

  .iee-ind__client {
    font-size: 14px !important;
  }

  .iee-ind__cta {
    font-size: 14px !important;
  }

  .iee-fit__text {
    font-size: 14px !important;
  }

  .iee-fit__btn.elementor-button {
    font-size: 14px !important;
  }

  .iee-ab-hero__copy p {
    font-size: 14px !important;
  }

  .iee-ab-who__label,
  .iee-ab-eyebrow {
    font-size: 14px !important;
  }

  .iee-ab-who__copy p {
    font-size: 14px !important;
  }

  .iee-ab-founder__copy p {
    font-size: 14px !important;
  }

  .iee-tl__label {
    font-size: 14px !important;
  }

  .iee-tl__hint {
    font-size: 14px !important;
  }

  .iee-tl__text {
    font-size: 14px !important;
  }

  .iee-ben__text {
    font-size: 14px !important;
  }

  .iee-faq__search-btn {
    font-size: 14px !important;
  }

  .iee-faq__group.is-filtered::before {
    font-size: 14px !important;
  }

  .iee-faq__a p,
  .iee-faq__a li {
    font-size: 14px !important;
  }

  .iee-faq__empty {
    font-size: 14px !important;
  }

  .iee-ct-head__copy p {
    font-size: 14px !important;
  }

  .iee-ct-alert {
    font-size: 14px !important;
  }

  .iee-ct-field__label--visible {
    font-size: 14px !important;
  }

  .iee-ct-field__file-name {
    font-size: 14px !important;
  }

  /* Match the field prompts ("Name *", "Company *", …) to the 14px of
     the upload row. They are input placeholders, and the input itself
     must STAY 16px (see the note near select below) — but placeholder
     font-size can be styled independently, and iOS's zoom heuristic
     keys off the control's own font-size, not the placeholder's. */
  .iee-ct-field__input::placeholder,
  .iee-ct-field__textarea::placeholder {
    font-size: 14px;
  }

  /* Selects (Industry, Country) show their prompt as the selected option,
     not a placeholder, so the control's own size has to shrink… */
  select.iee-ct-field__input {
    font-size: 14px !important;
  }

  /* …except on iOS, which zooms the whole page when any control under
     16px gains focus — the very reason inputs are pinned at 16px. The
     -webkit-touch-callout support test matches iOS Safari only. */
  @supports (-webkit-touch-callout: none) {
    select.iee-ct-field__input {
      font-size: 16px !important;
    }
  }

  .iee-ct-form__submit {
    font-size: 14px !important;
  }

  .iee-ct-form__note {
    font-size: 14px !important;
  }

  .iee-ct-office__name {
    font-size: 14px !important;
  }

  .iee-ct-office__address {
    font-size: 14px !important;
  }

  .iee-ct-office__row {
    font-size: 14px !important;
  }

  .iee-ct-hours {
    font-size: 14px !important;
  }

  .iee-ct-footer__links a {
    font-size: 14px !important;
  }

  .iee-cat__heading,
  .iee-det-band__title,
  .iee-det-band__title.elementor-widget .elementor-heading-title,
  .iee-det-strip__title,
  .iee-det-strip__title.elementor-widget .elementor-heading-title, .iee-s2-match .iee-cat__heading {
    font-size: 22px;
    line-height: 26px;
  }

  .iee-det-hero__title, .iee-det-hero__title.elementor-widget .elementor-heading-title, .iee-det-cta__title, .iee-det-cta__title.elementor-widget .elementor-heading-title {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 10px;
  }

  .iee-det-hero__sub, .iee-det-hero__sub.elementor-widget p {
    font-size: 15px;
    line-height: 22px;
  }

  .iee-keyvars {
    margin-top: 20px;
  }

  .iee-det-band {
    min-height: 300px;
  }

  .iee-solutions--enhanced .iee-solution-pointer h2{
    font-size: 18px !important;
  }

  .iee-sol-cta__button.elementor-widget .elementor-button, .iee-det-cta__half--left .iee-det-cta__button.elementor-widget .elementor-button {
    height: 42px;
    min-height: 42px;
  }

  .iee-cat__name, .iee-s2-match .iee-cat__name {
    font-size: 18px;
  }

  .iee-det-cta__text.elementor-widget p {
    font-size: 14px;
  }

  .iee-det-cta__half--left .iee-det-cta__text, .iee-det-cta__half--left .iee-det-cta__text.elementor-widget, .iee-det-cta__text, .iee-det-cta__text.elementor-widget, .iee-det-cta__half--right .iee-det-cta__text, .iee-det-cta__half--right .iee-det-cta__text.elementor-widget {
    margin-bottom: 0;
  }

  .iee-s2-match::before {
    background-size: cover;
    background-position: center;
    height: 242px;
    margin: 0;
    clip-path: none;
  }

  .iee-s2-match .iee-cat__marker, .iee-cat__marker {
    width: 35px;
    height: 35px;
  }

  body.page-id-144 .iee-det-cta__half--right > .elementor-widget-wrap, body.page-id-145 .iee-det-cta__half--right > .elementor-widget-wrap, body.page-id-146 .iee-det-cta__half--right > .elementor-widget-wrap, body.page-id-147 .iee-det-cta__half--right > .elementor-widget-wrap {
    min-height: 320px;
  }

  .iee-cat__point {
    font-size: 16px;
    padding-left: 25px;
  }

  .iee-cat__point::before {
    width: 15px;
    height: 15px;
  }

  .iee-ab-hero__media {
    min-height: 250px;
  }

  .iee-ab-founder__quote {
    font-size: 22px;
    margin-top: -17px;
  }

  .iee-tl__title, .iee-tl__year {
    font-size: 38px;
    line-height: 40px;
  }

  .iee-tl__col {
    flex-basis: 180px;
    width: 180px;
  }

  .iee-tl__viewport {
    padding-top: 0;
  }

  .iee-ab-cert__card h3 {
    font-size: 16px;
  }

  .iee-ab-cert__card p {
    font-size: 12px;
  }

  .iee-ab-cert__icon {
    width: 95px;
  }

  .iee-ab-cert__card {
    padding-left: 130px;
  }

  .iee-faq__head-inner {
    padding-bottom: 20px;
  }

  .iee-faq__cat {
    font-size: 14px;
  }

  /* .iee-faq__input and .iee-ct-field__input are real <input> elements
     (FAQ search box, Contact form field) — kept at 16px on purpose.
     Anything smaller triggers iOS Safari's auto-zoom-on-focus. */
  .iee-faq__input, .iee-ct-field__input {
    font-size: 16px;
  }

  .iee-faq__q {
    font-size: 16px;
  }

  .iee-solutions-intro-cta.elementor-widget .elementor-button {
    width: auto;
    height: 45px;
    padding: 0 30px;
  }

  .iee-footer-cta {
    height: 280px;
  }

  .iee-ind__panels{
    padding-top: 30px;
  }

}
/* ==========================================================================
   Legal pages (Terms of Use, Privacy Policy)
   Simple reading column on the shared rail; content built by
   tools/build-legal-pages.php.
   ========================================================================== */

.iee-legal__inner {
  max-width: 760px;
}

.iee-legal__inner h1 {
  margin: 0 0 18px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 52px;
}

.iee-legal__inner h2 {
  margin: 36px 0 10px;
  color: var(--iee-det-navy);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
}

.iee-legal__inner p,
.iee-legal__inner li {
  margin: 0 0 14px;
  color: var(--ie-ink);
  font-family: "Strichpunkt Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.iee-legal__inner ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.iee-legal__inner li {
  margin-bottom: 8px;
}

.iee-legal__inner a {
  color: var(--iee-sol-accent, #df6633);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .iee-legal__inner h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .iee-legal__inner h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .iee-legal__inner p,
  .iee-legal__inner li {
    font-size: 14px;
    line-height: 22px;
  }
}