/* SHAPE motion refresh — shared with Webflow site custom code. */
:root { --shape-ease: cubic-bezier(.22,1,.36,1); }
html { scroll-padding-top: 92px; }
/* The original IX2 fades must never leave the content invisible. */
.hero-block, .im_plus, .company-logos { opacity: 1 !important; }
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.navbar.shape-scrolled { box-shadow: 0 4px 30px rgba(18,31,46,.07); }
.brand { transition: opacity .2s ease; }
.brand:hover { opacity: .76; }
.nav-link-2 { transition: color .2s ease; }
.nav-link-2:hover, .nav-link-2.w--current { color: #1269d0; }
a:focus-visible, .w-nav-button:focus-visible {
  outline: 3px solid #ce7b26; outline-offset: 5px; border-radius: 4px;
}
.hero-block .heading { text-wrap: balance; letter-spacing: -.035em; }
body:has(.icon-im_plus) .hero-block .heading {
  background: linear-gradient(110deg, #121f2e 20%, #165da8 48%, #121f2e 76%);
  background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.im_plus:not(.about-us) > .container {
  background: radial-gradient(ellipse at 50% 15%, #fff 0%, #eef5ff 50%, #e7f1ff 100%);
  box-shadow: inset 0 0 0 1px rgba(104,153,214,.12), 0 24px 70px -48px rgba(25,88,157,.32);
}
.icon-im_plus { filter: drop-shadow(0 18px 20px rgba(49,104,183,.16)); }
.im_plus:not(.about-us) .logos { perspective: 1000px; }
.im_plus:not(.about-us) .logos > img {
  transform: rotateX(var(--shape-rx,0deg)) rotateY(var(--shape-ry,0deg));
  transition: transform .5s var(--shape-ease), filter .5s ease;
  filter: drop-shadow(0 22px 22px rgba(35,74,127,.12));
}
.button.margin-top-48 {
  background: #1676e5; box-shadow: 0 8px 24px rgba(26,131,255,.2);
  transition: transform .25s var(--shape-ease), box-shadow .25s ease, background-color .25s ease;
}
.button.margin-top-48:hover { background: #1065ca; box-shadow: 0 12px 28px rgba(26,131,255,.3); transform: translateY(-3px); }
.button.margin-top-48:active { transform: translateY(0) scale(.98); }
.columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.columns::before, .columns::after { display: none; }
.columns > .w-col {
  width: auto; float: none; padding: 24px 12px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.48);
  transition: transform .35s var(--shape-ease), background-color .35s ease, box-shadow .35s ease;
}
.columns .icons { height: 76px; margin-top: 0; transition: transform .4s var(--shape-ease); }
.columns .heading.h4 { line-height: 1.4; }
.company-logos .container-3 { border-width: 1px; padding-left: 32px; padding-right: 32px; }
.company-logos .heading.h3 { text-wrap: balance; }
.logos.social-proof {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  align-items: center; justify-items: center; gap: 28px;
  width: 100%; margin: 40px 0 0; min-width: 0;
}
.logos.social-proof .image {
  display: block; width: 100%; max-width: 140px; min-width: 0;
  height: 40px; object-fit: contain; margin: 0;
}
.logos.social-proof .image.porsche { height: 22px; }
.logos.social-proof .image { opacity: .72; transition: opacity .3s ease, transform .3s var(--shape-ease); }
.logos.social-proof .image:hover { opacity: 1; transform: translateY(-3px); }
.link-2 { display: inline-block; transition: color .2s ease, transform .2s ease; }
.link-2:hover { color: #a5d0ff; transform: translateX(3px); }
.subtitle.left-about a { text-underline-offset: 4px; }
.shape-reading-progress {
  position: fixed; top: 0; left: 0; z-index: 1100; height: 3px; width: 100%;
  background: #cf8b43; transform: scaleX(0); transform-origin: left; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .columns > .w-col:hover { transform: translateY(-7px); background: #fff; box-shadow: 0 16px 28px -18px rgba(35,74,127,.35); }
  .columns > .w-col:hover .icons { transform: translateY(-4px) rotate(-4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .icon-im_plus.shape-in-view { animation: shape-float 6s ease-in-out infinite; }
  body:has(.icon-im_plus) .hero-block .heading.shape-in-view { animation: shape-colour 12s ease-in-out infinite; }
  @keyframes shape-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
  @keyframes shape-colour { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
}
@media (max-width: 991px) {
  .columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .logos.social-proof { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 32px; }
  .nav-menu { padding: 8px 24px; }
  .nav-link-2 { padding: 16px 0; }
}
@media (max-width: 767px) {
  .im_plus.main:not(.about-us) { margin-top: 144px; }
  .im_plus.main:not(.about-us) .container { padding-top: 96px; }
  .icon-im_plus { margin-top: -196px; }
  .columns { gap: 12px; margin-top: 40px; }
  .company-logos { padding-left: 16px; padding-right: 16px; }
  .company-logos .container-3 { padding-left: 24px; padding-right: 24px; }
  .logos.social-proof { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .logos.social-proof .image:last-child { grid-column: 1 / -1; max-width: 120px; }
}
@media (max-width: 479px) {
  .hero-block .heading.margin-top-64 { font-size: clamp(32px,9vw,40px); line-height: 1.18; margin-top: 48px; }
  .im_plus.main:not(.about-us) { margin-top: 96px; padding: 0 16px; overflow: visible; }
  .im_plus.main:not(.about-us) .container { padding: 64px 20px 32px; margin-top: 0; }
  .icon-im_plus { margin-top: -132px; }
  .im_plus:not(.about-us) .logos { margin-top: 28px; }
  .im_plus:not(.about-us) .logos > img { width: min(230px,100%); height: auto; }
  .button.margin-top-48.first_plus { margin-top: 32px; }
  .columns { grid-template-columns: 1fr; }
  .columns > .w-col { padding: 28px 20px; }
  .columns .icons { height: 72px; }
  .logos.social-proof { margin-top: 28px; gap: 24px; }
  .logos.social-proof .image { max-width: 110px; height: 30px; }
  .logos.social-proof .image.porsche { height: 18px; }
  .company-logos .heading.h3 { margin-bottom: 0; }
  .container.about-us { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .navbar, .brand, .nav-link-2, .button, .columns > .w-col, .columns .icons,
  .link-2, .logos > img { transition: none !important; animation: none !important; transform: none !important; }
}
@media (forced-colors: active) {
  body:has(.icon-im_plus) .hero-block .heading { background: none; -webkit-text-fill-color: CanvasText; }
}
