/* Maddy brand palette overrides (from maddygroupltd.com) */
:root {
  --color--purple-900: #010535;
  --color--purple-800: #0a1458;
  --color--purple-700: #2a2f8f;
  --color--purple-600: #3b40a0;
  --color--purple-500: #4d51ab;
  --color--purple-400: #6b6fc0;
  --color--purple-300: #898dce;
  --color--purple-200: #b0b3e0;
  --color--purple-100: #d0d2ed;
  --color--purple-50: #e8e9f5;
  --color--purple-10: #f2f3fa;
  /* Signature green → primary blue */
  --color--flow-lime: #4d51ab;
  --color--flow-pastel-lime-300: #55cee3;
  --color--flow-pastel-lime-200: #898dce;
}

/* Hardcoded purple leftovers → brand blues */
.section.is-videotab-section {
  background-image: linear-gradient(#010535, #4d51ab) !important;
}

.blur-element {
  background-image: linear-gradient(
    rgba(1, 5, 53, 0),
    rgba(1, 5, 53, 0.85) 11%,
    #4d51ab
  ) !important;
}

.git-right-bg {
  background-image: linear-gradient(rgba(77, 81, 171, 0), #4d51ab 50%, #010535) !important;
}

.mask-video-hero.mobile.is-bright-mask {
  background-image: linear-gradient(rgba(1, 5, 53, 0), #4d51ab 34%, #4d51ab) !important;
}

.looped-logo.dark-looped {
  background-color: #010535 !important;
  border-color: #2a2f8f !important;
}

.market-logo {
  border-color: #2a2f8f !important;
}

.section.is-hero-section {
  overflow: hidden;
  background-image: none !important;
  background-color: transparent !important;
}

/* Scroll-reactive heroes: the rounded rectangle stays fixed (corners always
   rounded, including the top). The media is zoomed in at the top and zooms out
   to fill the rectangle as you scroll; scrolling back up re-triggers it.
   --hero-inset is driven per-frame from scroll (0 -> 1) by the runtime in
   Loader.tsx. Uniform 1.5rem replaces webflow's asymmetric 6rem/1.5rem corners. */
.section.is-hero-section,
.section.is-why-flow-hero,
.section.is-products-hero,
.section.is-why-about-hero,
.section.is-contact-hero {
  border-radius: 1.5rem;
}

/* The hero-media stays a fixed rounded frame that CLIPS the zooming media.
   The mask forces a composited buffer so the rounded corners also clip a
   <video> (Chrome/Safari won't round-clip a raw <video> via overflow alone —
   which is why the image heroes rounded but the homepage video hero did not). */
.is-hero-section .hero-media,
.is-why-flow-hero .hero-media,
.is-products-hero .hero-media,
.is-why-about-hero .hero-media,
.is-contact-hero .hero-media {
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  /* clip-path reliably rounds a composited, over-scaled <video> child that
     overflow + border-radius alone won't clip in Chrome. The image heroes were
     always fine; this is what fixes the landing-page video hero's top corners. */
  -webkit-clip-path: inset(0 round 1.5rem);
  clip-path: inset(0 round 1.5rem);
}

/* The media itself carries the scroll zoom; it is clipped by the frame above. */
.is-hero-section .hero-media__video,
.is-hero-section .hero-media__image,
.is-why-flow-hero .hero-media__image,
.is-why-flow-hero .hero-media__video,
.is-products-hero .hero-media__image,
.is-why-about-hero .hero-media__image {
  border-radius: inherit;
  transform: scale(calc(1 + 0.08 * (1 - var(--hero-inset, 0))));
  transform-origin: center center;
  will-change: transform;
}

.section.is-products-hero {
  overflow: hidden;
  background-image: none !important;
  background-color: #010535 !important;
  position: relative;
}

.section.is-why-about-hero {
  overflow: hidden;
  background-image: none !important;
  background-color: #010535 !important;
  position: relative;
}

.section.is-why-flow-hero:not(.carriers-hero) {
  overflow: hidden;
  background-image: none !important;
  background-color: #010535 !important;
  position: relative;
}

.hero-media {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: #010535;
  background-image: url(https://ik.imagekit.io/fqsfbn5ad/maddymedia/herobg1?updatedAt=1784879987462);
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
}

.hero-media__video,
.hero-media__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.hero-hue-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(1, 5, 53, 0.96) 0%,
    rgba(1, 5, 53, 0.75) 18%,
    rgba(77, 81, 171, 0.45) 34%,
    rgba(77, 81, 171, 0.12) 48%,
    transparent 58%
  );
}

.hero-description-container {
  z-index: 2;
}

.maddy-image-frame {
  overflow: hidden;
}

.maddy-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.maddy-background-image {
  object-fit: cover;
  object-position: center;
}

.maddy-section-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 20%, rgba(85, 206, 227, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(77, 81, 171, 0.55), rgba(1, 5, 53, 0.96));
}

.video-flow-about .maddy-cover-image {
  position: absolute;
  inset: 0;
}

.tab-bg-video .maddy-cover-image,
.tab-bg-video-hero .maddy-cover-image {
  position: absolute;
  inset: 0;
}

.w-webflow-badge {
  display: none !important;
}

.flex-target {
  align-items: flex-start;
  border-bottom-color: #4d51ab !important;
}

.flex-target h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  letter-spacing: -0.06rem;
  line-height: 1.15;
}

.drop-wrap,
.drop-sub {
  overflow: visible;
}

/* A second-level heading drawn at main-heading size, so each page keeps a single h1. */
h2.is-h1 {
  letter-spacing: -0.22rem;
  font-size: 4.4rem;
}

@media screen and (max-width: 767px) {
  h2.is-h1 {
    letter-spacing: -0.15rem;
    font-size: 2.7rem;
  }
}

/* Leadership intro: a full-width white band keeps the section photo below the text. */
.leadership-team-features .leadership-intro {
  padding-bottom: 1.2rem;
  background-color: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}

/* One line on wide screens. */
@media screen and (min-width: 992px) {
  .leadership-team-features .leadership-intro {
    max-width: none;
  }
}

/* About team grid: equal cards, Read Bio buttons on one line. */
.leadership-team-features .person-description {
  flex: 1 1 auto;
}

.leadership-team-features .person-description .height-48 {
  height: auto;
  min-height: 2.8rem;
}

/* Name and role sit on the section photo: dark text with a light halo keeps them legible. */
.leadership-team-features .person-description > p {
  text-shadow:
    0 0 0.2rem #fff,
    0 0 0.5rem #fff,
    0 0 0.9rem rgba(255, 255, 255, 0.9);
}

.leadership-team-features .person-description .height-48 {
  color: var(--color--grey-900);
  font-weight: 500;
}

.leadership-team-features .person-image-wrapper {
  position: relative;
}

.leadership-team-features .person-image {
  display: block;
}

.leadership-team-features .person-image-link {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.4rem rgba(19, 17, 22, 0.18);
}

.leadership-team-features .button-bio {
  margin-top: auto;
  padding-top: 0.2rem;
}

.leadership-team-features .button-bio > .button {
  padding: 0.55rem 1.1rem;
  grid-column-gap: 0.4rem;
}

/* Center the incomplete last row of the About team grid (7 cards / 4 columns). */
@media screen and (min-width: 992px) {
  .leadership-team-features .team-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .leadership-team-features .team-member {
    grid-column: span 2;
  }

  .leadership-team-features .team-member:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media screen and (min-width: 480px) and (max-width: 991px) {
  .leadership-team-features .team-member:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.4rem);
  }
}

/* Leadership profile pop-up: photo with an overlapping card, plus previous/next controls. */
html.leader-modal-open {
  overflow: hidden;
}

.leader-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  padding: 72px 24px 32px;
  overflow-y: auto;
  animation: leader-fade 0.25s ease-out;
}

.leader-modal[hidden],
.leader-slide[hidden] {
  display: none;
}

.leader-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(19, 17, 22, 0.78);
}

.leader-modal__body {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: auto;
}

.leader-slide {
  display: flex;
  align-items: center;
  animation: leader-fade 0.4s ease-in-out;
}

.leader-slide__photo {
  flex: 0 0 auto;
  width: min(470px, 44vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 24px;
  background-color: #e5e7eb;
}

.leader-slide__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.leader-slide__card {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  max-width: 576px;
  max-height: min(520px, calc(100vh - 220px));
  margin-left: -80px;
  padding: 32px;
  overflow-y: auto;
  border-radius: 24px;
  background-color: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  text-align: left;
}

.leader-slide__name {
  margin: 0 0 8px;
  color: var(--color--grey-900);
  font-size: 24px;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.leader-slide__role {
  margin: 0 0 24px;
  color: var(--color--grey-600);
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  line-height: 1.45;
}

.leader-slide__bio p {
  margin: 0 0 12px;
  color: var(--color--grey-900);
  font-size: 16px;
  line-height: 1.625;
}

.leader-slide__bio p:last-child {
  margin-bottom: 0;
}

.leader-slide__links {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.leader-slide__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color--grey-900);
  color: #fff;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

.leader-slide__link:hover {
  background-color: #4d51ab;
  transform: scale(1.05);
}

.leader-slide__link svg {
  width: 20px;
  height: 20px;
}

.leader-modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.leader-modal__arrow,
.leader-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background-color: #f3f4f6;
  color: var(--color--grey-700);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.2s;
}

.leader-modal__arrow:hover,
.leader-modal__close:hover {
  background-color: #e5e7eb;
}

.leader-modal__close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
}

.leader-modal__close svg {
  width: 20px;
  height: 20px;
}

.leader-modal__dots {
  display: flex;
  gap: 8px;
}

.leader-modal__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 0.2s;
}

.leader-modal__dot.is-active {
  background-color: #fff;
}

.leader-modal__arrow:focus-visible,
.leader-modal__close:focus-visible,
.leader-modal__dot:focus-visible,
.leader-slide__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes leader-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leader-modal,
  .leader-slide {
    animation: none;
  }
}

/* Keep the arrows and dots in one place when a long bio makes the card taller than the photo. */
@media screen and (min-width: 768px) {
  .leader-slide {
    min-height: min(520px, calc(100vh - 220px));
  }
}

/* Phones: a white full-screen sheet with the photo stacked above centred text. */
@media screen and (max-width: 767px) {
  .leader-modal {
    padding: 80px 20px 32px;
  }

  .leader-modal__backdrop {
    background-color: #fff;
  }

  .leader-modal__body {
    max-width: 384px;
  }

  .leader-slide {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .leader-slide__photo {
    width: 100%;
  }

  .leader-slide__card {
    max-width: none;
    max-height: none;
    margin: 24px 0 0;
    padding: 0 8px;
    overflow: visible;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
  }

  .leader-slide__name {
    font-size: 20px;
  }

  .leader-slide__role {
    margin-bottom: 16px;
  }

  .leader-slide__bio p {
    font-size: 14px;
  }

  .leader-slide__links {
    justify-content: center;
    margin-top: 24px;
  }

  .leader-modal__dot {
    background-color: #9ca3af;
  }

  .leader-modal__dot.is-active {
    background-color: var(--color--grey-900);
  }

  .leader-modal__arrow:focus-visible,
  .leader-modal__close:focus-visible,
  .leader-modal__dot:focus-visible,
  .leader-slide__link:focus-visible {
    outline-color: #4d51ab;
  }
}

/* Cookie choice banner: sits above the page and navbar, below the page loader. */
.cookie-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 980px;
  max-height: calc(100vh - 32px);
  margin: 0 auto;
  padding: 20px 24px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 20px 40px -12px rgba(1, 5, 53, 0.35);
  color: var(--color--grey-900);
  text-align: left;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner:focus {
  outline: none;
}

.cookie-banner__text {
  flex: 1 1 0;
  min-width: 260px;
}

.cookie-banner__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  line-height: 1.4;
}

.cookie-banner__copy {
  margin: 0;
  color: var(--color--grey-600);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner__copy a {
  color: #4d51ab;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.cookie-banner__manage {
  padding: 12px 8px;
  border: 0;
  background: none;
  color: var(--color--grey-900);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.cookie-banner__manage:focus-visible {
  outline: 2px solid #4d51ab;
  outline-offset: 2px;
}

/* The per-category switches, shown by "Manage choices". */
.cookie-banner__options {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.cookie-banner__options[hidden] {
  display: none;
}

.cookie-banner__options > .cookie-banner__button {
  align-self: flex-end;
}

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  cursor: pointer;
}

.cookie-option__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cookie-option__label {
  font-size: 14px;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  line-height: 1.4;
}

.cookie-option__description {
  color: var(--color--grey-600);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.cookie-option__switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background-color: #c7c9d1;
  cursor: pointer;
  transition: background-color 0.2s;
  appearance: none;
}

.cookie-option__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.2s;
}

.cookie-option__switch:checked {
  background-color: #4d51ab;
}

.cookie-option__switch:checked::after {
  transform: translateX(20px);
}

.cookie-option__switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cookie-option__switch:focus-visible {
  outline: 2px solid #4d51ab;
  outline-offset: 2px;
}

/* Both choices carry the same weight, so rejecting is as easy as accepting. */
.cookie-banner__button {
  min-width: 140px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background-color: var(--color--grey-900);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cookie-banner__button--accept {
  background-color: #4d51ab;
}

.cookie-banner__button:hover {
  opacity: 0.88;
}

.cookie-banner__button:focus-visible {
  outline: 2px solid #4d51ab;
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .cookie-banner {
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  .cookie-banner__actions {
    flex-wrap: wrap;
  }

  .cookie-banner__manage {
    flex: 1 0 100%;
    order: 1;
    padding: 4px 8px;
  }

  .cookie-banner__actions > .cookie-banner__button {
    flex: 1 1 0;
    min-width: 0;
  }

  .cookie-banner__options {
    flex: 0 0 auto;
  }

  .cookie-banner__options > .cookie-banner__button {
    align-self: stretch;
  }
}

/* Page loader: navy + long logo */
html.is-page-loading {
  overflow: hidden;
}

.maddy-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #010535;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  overflow: hidden;
}

/* Soft radial shine behind the logo */
.maddy-loader::before {
  content: '';
  position: absolute;
  width: min(46rem, 120vw);
  height: min(46rem, 120vw);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(120, 170, 255, 0.28) 0%,
    rgba(60, 110, 220, 0.12) 32%,
    rgba(1, 5, 53, 0) 68%
  );
  filter: blur(6px);
  animation: maddy-loader-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}

.maddy-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.maddy-loader__logo {
  position: relative;
  width: min(20rem, 68vw);
  height: auto;
  display: block;
  animation: maddy-loader-rise 0.6s ease both;
}

@keyframes maddy-loader-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes maddy-loader-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maddy-loader::before {
    animation: none;
    opacity: 0.8;
  }
  .maddy-loader__logo {
    animation: none;
  }
}

/* Partner cards: text crossfades out to a logo on hover/focus */
.partner-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.partner-card:hover,
.partner-card:focus-visible {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--color--grey-100);
  outline: none;
}

/* Text layer: visible by default, fades + lifts away on hover */
.partner-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  width: 100%;
  height: 100%;
  padding: 1.25rem 1.5rem;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.partner-card__name {
  display: block;
}

.partner-card__detail {
  display: block;
  margin: 0.45rem 0 0;
}

.partner-card:hover .partner-card__text,
.partner-card:focus-visible .partner-card__text {
  opacity: 0;
  transform: translateY(-0.5rem);
}

/* Logo layer: hidden by default ("vanishes if not there"), fades in on hover */
.partner-card__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(0.6rem) scale(0.94);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.partner-card__logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-card:hover .partner-card__logo,
.partner-card:focus-visible .partner-card__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .partner-card__text,
  .partner-card__logo {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* Contact hero: same rounded card in a navy frame as the homepage hero. The
   hero-media clip + scroll zoom come from the shared hero rules above. */
.section.is-contact-hero {
  position: relative;
  overflow: hidden;
}

/* Contact form as frosted glass over the video, in the site's navy/lime palette.
   The webflow gradient slab behind it is dropped. */
.is-contact-hero .git-right-bg {
  display: none;
}

.is-contact-hero .form-block {
  /* navy-tinted so white text holds up over the bright parts of the video */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(1, 5, 53, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1.5rem 3rem rgba(1, 5, 53, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.is-contact-hero .text-field {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color--white);
  caret-color: var(--color--flow-pastel-lime-300);
  /* Windows' I-beam inverts what's under it, which vanishes over mid-tone
     glass. A white I-beam with a navy outline reads on any background. */
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 4h6M9 20h6M12 4v16' fill='none' stroke='%23010535' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 4h6M9 20h6M12 4v16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
      12 12,
    text;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.is-contact-hero .text-field::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.is-contact-hero .text-field:focus {
  border-color: var(--color--flow-pastel-lime-300);
  background-color: rgba(255, 255, 255, 0.16);
  outline: none;
}

/* Webflow hides .select-field, which made the required "How can we help?"
   dropdown unfocusable, so reportValidity() failed silently and the form never
   sent. Show both dropdowns side by side (stacking when narrow) in the glass
   style, with a white chevron. */
.is-contact-hero .form-select-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
}

.is-contact-hero .select-field {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1.1rem center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

/* Empty (placeholder) choice reads like the text-field placeholders. */
.is-contact-hero .select-field:has(option[value='']:checked) {
  color: rgba(255, 255, 255, 0.72);
}

/* The opened list is drawn by the OS on a light surface. */
.is-contact-hero .select-field option {
  color: #010535;
  background-color: #fff;
}

/* Custom glass dropdowns (built over the selects by GetInTouchPage.tsx). The
   native select stays underneath, invisible, for submit and validation. */
.is-contact-hero .glass-select {
  position: relative;
  min-width: 0;
}

.is-contact-hero .glass-select > .select-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.is-contact-hero .glass-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.is-contact-hero .glass-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-contact-hero .glass-select.is-placeholder .glass-select__value {
  color: rgba(255, 255, 255, 0.72);
}

.is-contact-hero .glass-select__chevron {
  flex: none;
  width: 12px;
  height: 8px;
  transition: transform 0.3s ease;
}

.is-contact-hero .glass-select.is-open .glass-select__chevron {
  transform: rotate(180deg);
}

.is-contact-hero .glass-select.is-open .glass-select__trigger,
.is-contact-hero .glass-select__trigger:focus-visible {
  border-color: var(--color--flow-pastel-lime-300);
  background-color: rgba(255, 255, 255, 0.16);
  outline: none;
}

.is-contact-hero .glass-select.is-invalid .glass-select__trigger {
  border-color: #ff9b9b;
}

/* The list is appended to <body> (outside the clipping hero card), so these
   rules aren't scoped to .is-contact-hero. Glass to match the form card. */
.glass-select__menu {
  position: absolute;
  /* Parked at the page's top-left until opened (the script then sets top/left).
     Left at its static position after the footer, the hidden list made the page
     taller and left empty space under the footer. */
  top: 0;
  left: 0;
  z-index: 4000; /* under the fixed navbar (5000) */
  width: max-content;
  max-width: 20rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.75rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(1, 5, 53, 0.55);
  box-shadow: 0 1.5rem 3rem rgba(1, 5, 53, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

.glass-select__menu.opens-up {
  transform: translateY(10px);
}

.glass-select__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s;
}

.glass-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0; /* Webflow gives every li a 1.11rem bottom margin */
  padding: 0.5rem 1rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color--white);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-20px);
  /* reset instantly once the menu has faded out */
  transition:
    background-color 0.2s ease,
    opacity 0s 0.2s,
    transform 0s 0.2s;
}

.glass-select__option:last-child {
  border-bottom: none;
}

/* Options slide in one after another as the menu opens */
.glass-select__menu.is-open .glass-select__option {
  opacity: 1;
  transform: none;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease calc(var(--i, 0) * 0.05s),
    transform 0.2s ease calc(var(--i, 0) * 0.05s);
}

.glass-select__option.is-active {
  background-color: rgba(255, 255, 255, 0.18);
}

.glass-select__check {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color--flow-pastel-lime-300);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-select__option[aria-selected='true'] .glass-select__check {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .is-contact-hero .glass-select__chevron,
  .glass-select__menu,
  .glass-select__menu.is-open,
  .glass-select__option,
  .glass-select__menu.is-open .glass-select__option,
  .glass-select__check {
    transition: none;
  }
}

/* Browser autofill paints inputs yellow/white; keep the glass look. */
.is-contact-hero .text-field:-webkit-autofill {
  -webkit-text-fill-color: var(--color--white);
  box-shadow: 0 0 0 100px rgba(36, 17, 75, 0.9) inset;
}

/* Video fills the card edge to edge (cover). No scroll zoom here, so only the
   unavoidable top/bottom trim from the wider-than-16:9 card is lost. */
.is-contact-hero .hero-media {
  background-image: none;
}

/* Even navy tint so the text and form read over the video. */
.contact-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 5, 53, 0.35), rgba(1, 5, 53, 0.55));
}

.is-contact-hero .hero-description-container {
  position: relative;
}

/* Desktop: the framed hero fills exactly one screen (viewport minus the 1rem
   frame top and bottom), content centred below the fixed navbar, so the footer
   only appears on scroll. min-height lets it grow rather than clip on short
   screens; stacked tablet/mobile layouts keep their natural height. */
@media (min-width: 992px) {
  .section.is-get-in-touch-section.is-contact-hero {
    min-height: calc(100vh - 2rem);
    min-height: calc(100svh - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6.8rem; /* clears the 6.58rem fixed navbar */
    padding-bottom: 0.8rem;
    /* 4rem sides like the other heroes, so the copy lines up with the navbar */
    padding-left: 4rem;
    padding-right: 4rem;
  }

  /* Tighter form card so the whole hero fits a laptop screen. */
  .is-contact-hero .git-right {
    padding: 0 1rem;
  }

  .is-contact-hero .form-block {
    padding: 1.2rem 1.5rem;
  }

  .is-contact-hero .form,
  .is-contact-hero .form-select-row {
    gap: 0.45rem;
  }

  .is-contact-hero .text-field.message-area {
    min-height: 3.2rem;
  }
}

/* Contact intro: justified block with a width cap so the last line doesn't
   stretch. Whole words only, no hyphenation. */
.git-intro {
  max-width: 30rem;
  text-align: justify;
  hyphens: none;
}

/* Dropdown group label (e.g. "Partners" heading inside the About Us menu) */
.navbar-dl-label {
  margin: 0.5rem 0 0.25rem;
  padding: 0.25rem 0.8rem 0.35rem;
  border-top: 1px solid var(--color--grey-100);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color--grey-500);
}

/* Partner quote section: subtle photo backdrop with a dark overlay for legibility */
.partner-quote-section {
  position: relative;
  overflow: hidden;
}

.partner-quote-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.partner-quote-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.partner-quote-media__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(85, 206, 227, 0.16), transparent 40%),
    linear-gradient(135deg, rgba(1, 5, 53, 0.92) 0%, rgba(1, 5, 53, 0.86) 100%);
}

.partner-quote-section .hero-description-container {
  position: relative;
  z-index: 1;
}

/* Webflow hides .select-field, which made the required "What are you
   interested in?" dropdown unfocusable: reportValidity() failed silently and
   the partner quote form could never be sent. Show it like the other white
   fields, with a dark chevron. */
.partner-quote-section .select-field {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  color: #55515d; /* same as the text fields */
  background-color: var(--color--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355515d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1.2rem center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

/* Partner detail pages: product & service category cards */
.partner-cats-head {
  max-width: 46rem;
  margin-bottom: 2.6rem;
}

.partner-cats-head h2 {
  margin-bottom: 1rem;
}

.partner-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.25rem;
}

.partner-cat-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--color--grey-100);
  border-radius: 0.9rem;
  background-color: #fff;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}

.partner-cat-card:hover {
  border-color: transparent;
  box-shadow: 0 1.2rem 2.4rem rgba(1, 5, 53, 0.08);
  transform: translateY(-2px);
}

.partner-cat-card h3 {
  margin: 0 0 0.6rem;
}

.partner-cat-card__body {
  margin: 0 0 1.1rem;
}

@media screen and (max-width: 767px) {
  .partner-cats-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile nav: sticky bar + compact menu flush under it */
@media screen and (max-width: 991px) {
  .navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 5000;
    max-width: 100%;
  }

  .navbar.w-nav {
    position: relative !important;
    z-index: 5000;
    max-width: 100%;
    width: 100%;
    min-height: 4.75rem;
  }

  .w-nav-overlay {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100%;
    overflow: visible !important;
    z-index: 5001;
  }

  /* Kill the full-viewport menu sheet; size to links only, grow with Technologies */
  .nav-menu,
  .w-nav-overlay [data-nav-menu-open],
  .navbar .w-nav-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 5.25rem);
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 1.6rem 1.6rem;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
    z-index: 5001;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .menu-button {
    position: relative;
    z-index: 5002;
  }

  /* Hamburger ↔ X when Webflow toggles .w--open */
  .menu-button .hamburger {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
    font-size: 0;
    line-height: 0;
  }

  .menu-button .hamburger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #212121;
    border-radius: 1px;
    transition:
      transform 0.28s ease,
      opacity 0.2s ease,
      top 0.28s ease,
      bottom 0.28s ease,
      margin 0.28s ease;
  }

  .menu-button .hamburger-line:nth-child(1) {
    top: 0;
  }

  .menu-button .hamburger-line:nth-child(2) {
    top: 50%;
    margin-top: -1px;
  }

  .menu-button .hamburger-line:nth-child(3) {
    top: auto;
    bottom: 0;
  }

  .menu-button.w--open .hamburger-line:nth-child(1) {
    top: 50%;
    margin-top: -1px;
    transform: rotate(45deg);
  }

  .menu-button.w--open .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .menu-button.w--open .hamburger-line:nth-child(3) {
    top: 50%;
    bottom: auto;
    margin-top: -1px;
    transform: rotate(-45deg);
  }

  .nav-menu .nav-link,
  .nav-menu .dropdown.w-dropdown,
  .nav-menu .button.mobile-contact,
  .nav-menu .is-black-button.mobile-contact {
    flex: 0 0 auto;
  }

  .nav-menu .button.mobile-contact,
  .nav-menu .is-black-button.mobile-contact {
    align-self: stretch;
    max-width: 100%;
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
    white-space: normal;
    opacity: 1 !important;
  }

  /* Smooth Technologies open/close (Webflow toggles display; keep it block and animate height) */
  .navbar .dropdown.w-dropdown {
    width: 100%;
  }

  .navbar .dropdown-list.w-dropdown-list {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    background: transparent !important;
    transition:
      max-height 0.38s ease,
      opacity 0.28s ease,
      margin 0.32s ease,
      visibility 0.28s ease;
  }

  .navbar .dropdown-list.w-dropdown-list.w--open {
    /* Tall enough for all tech links — expand the sheet, don't nest-scroll */
    max-height: 28rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin: 0.25rem 0 0.75rem;
    overflow: hidden;
  }

  .navbar .navbar-dropdown-wrapper {
    box-shadow: none;
    border-style: none;
    border-radius: 0.9rem;
    background: #f6f5f7;
    margin: 0;
    padding: 0.5rem 0.65rem;
  }

  .navbar .arrow-icon.drop {
    transition: transform 0.3s ease;
  }

  .navbar .dropdown.w--open .arrow-icon.drop,
  .navbar .w-dropdown-toggle.w--open .arrow-icon.drop {
    transform: rotate(180deg);
  }
}

/* Technologies dropdown (desktop): under the toggle, left-aligned (kill Webflow 8rem pad) */
@media screen and (min-width: 992px) {
  .navbar-wrap,
  .navbar.w-nav,
  .container.nav-flex,
  .nav-menu.w-nav-menu {
    overflow: visible !important;
  }

  .navbar .dropdown.w-dropdown {
    position: relative !important;
    display: flex;
    align-items: center;
  }

  .navbar .dropdown-list.w-dropdown-list,
  .navbar .dropdown-list.w-dropdown-list.w--open {
    position: absolute !important;
    /* Flush under toggle; padding is the hover bridge into the panel */
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    padding: 0.5rem 0 0 !important;
    margin: 0 !important;
    min-width: 16rem;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    max-height: min(70vh, 28rem);
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 5100;
  }

  /* Panels follow Webflow's w--open: hover opens and mouse-out closes (data-hover
     is set for desktop mice in Header.tsx), and a click toggles. Webflow closes
     the other dropdown when one opens, so only one panel is ever shown. */
  .navbar .dropdown.w-dropdown > .dropdown-list.w-dropdown-list {
    display: none !important;
  }

  .navbar .dropdown.w-dropdown > .dropdown-list.w-dropdown-list.w--open {
    display: block !important;
  }

  .navbar .navbar-dropdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    min-width: 16rem;
    max-height: min(70vh, 27rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0.6rem 0.45rem !important;
    text-align: left;
    background-color: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 1rem !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  }

  .navbar .dropdown-link,
  .navbar .dropdown-link.navbar-dl-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left !important;
    margin-bottom: 0 !important;
    padding: 0.65rem 0.95rem !important;
    white-space: nowrap;
  }

  .navbar .arrow-icon.drop {
    transition: transform 0.28s ease;
  }

  .navbar .dropdown.w--open .arrow-icon.drop,
  .navbar .w-dropdown-toggle.w--open .arrow-icon.drop {
    transform: rotate(180deg);
  }
}

/* Arrow-fill hover (markup: ArrowFillContent in components/ui/ArrowFill.tsx).
   The arrow circle on the right grows to fill the element, the label changes
   colour as the fill passes over it (a recoloured copy revealed by clip-path),
   and the arrow slides out as a new one slides in. Each use sets the circle
   size and the colours below. */
.arrow-fill {
  --af-circle: 1.5rem;
  --af-right: 0.3rem;
  --af-inset-y: calc((100% - var(--af-circle)) / 2);
  --af-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --af-duration: 0.45s;
  --af-rest-bg: var(--color--purple-10); /* circle at rest */
  --af-fill-bg: var(--color--purple-500); /* fill on hover */
  --af-filled-text: #fff; /* label once filled */
  --af-arrow: var(--color--purple-500);
  --af-arrow-hover: #fff;
  position: relative;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Navbar dropdown items */
.navbar .dropdown-link.navbar-dl-link.arrow-fill {
  display: flex !important;
  border-radius: 999px !important;
  padding-right: calc(var(--af-circle) + var(--af-right) + 0.9rem) !important;
  background-color: transparent !important;
  transition: none !important;
}

.arrow-fill .arrow-fill__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.arrow-fill .arrow-fill__fill {
  position: absolute;
  z-index: 2;
  inset: var(--af-inset-y) var(--af-right) var(--af-inset-y)
    calc(100% - var(--af-right) - var(--af-circle));
  border-radius: 999px;
  background-color: var(--af-rest-bg);
  pointer-events: none;
  transition:
    inset var(--af-duration) var(--af-ease),
    background-color var(--af-duration) var(--af-ease);
}

.arrow-fill .arrow-fill__label--filled {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  padding: inherit;
  color: var(--af-filled-text);
  pointer-events: none;
  clip-path: inset(
    var(--af-inset-y) var(--af-right) var(--af-inset-y)
      calc(100% - var(--af-right) - var(--af-circle)) round 999px
  );
  transition: clip-path var(--af-duration) var(--af-ease);
}

.arrow-fill .arrow-fill__icon {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--af-right);
  width: var(--af-circle);
  height: var(--af-circle);
  overflow: hidden;
  border-radius: 50%;
  color: var(--af-arrow);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--af-duration) var(--af-ease);
}

.arrow-fill .arrow-fill__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--af-arrow-size, 0.8rem);
  height: var(--af-arrow-size, 0.8rem);
  transition: transform var(--af-duration) var(--af-ease);
}

.arrow-fill .arrow-fill__arrow--in {
  transform: translate(-170%, -50%) scale(0);
}

.arrow-fill .arrow-fill__arrow--out {
  transform: translate(-50%, -50%);
}

.arrow-fill:hover .arrow-fill__fill,
.arrow-fill:focus-visible .arrow-fill__fill {
  inset: 0;
  background-color: var(--af-fill-bg);
}

.arrow-fill:hover .arrow-fill__label--filled,
.arrow-fill:focus-visible .arrow-fill__label--filled {
  clip-path: inset(0 round 999px);
}

.arrow-fill:hover .arrow-fill__icon,
.arrow-fill:focus-visible .arrow-fill__icon {
  color: var(--af-arrow-hover);
}

.arrow-fill:hover .arrow-fill__arrow--in,
.arrow-fill:focus-visible .arrow-fill__arrow--in {
  transform: translate(-50%, -50%) scale(1);
}

.arrow-fill:hover .arrow-fill__arrow--out,
.arrow-fill:focus-visible .arrow-fill__arrow--out {
  transform: translate(70%, -50%) scale(0);
}

/* Buttons: a white arrow circle that fills the button on hover, turning the
   label to the button's own colour. The fill replaces Webflow's hover tint. */
.button.arrow-fill--button {
  --af-circle: 2.4rem;
  --af-right: 0.4rem;
  --af-arrow-size: 0.95rem;
  --af-rest-bg: var(--color--white);
  --af-fill-bg: var(--color--white);
  border-radius: 999px;
  padding-right: calc(var(--af-circle) + var(--af-right) + 1rem);
  /* Never squeeze the label under the arrow circle when sharing a row with text. */
  flex-shrink: 0;
}

.button.is-black-button.arrow-fill--button {
  --af-filled-text: var(--color--black);
  --af-arrow: var(--color--black);
  --af-arrow-hover: var(--color--black);
}

/* Once the fill has covered the button, match the button to it so no dark
   hairline shows at the rounded edge; snap back instantly on leave. */
.button.is-black-button.arrow-fill--button {
  transition: background-color 0s;
}

.button.is-black-button.arrow-fill--button:hover,
.button.is-black-button.arrow-fill--button:focus-visible {
  background-color: var(--color--white);
  transition-delay: var(--af-duration);
}

@media (prefers-reduced-motion: reduce) {
  .arrow-fill .arrow-fill__fill,
  .arrow-fill .arrow-fill__label--filled,
  .arrow-fill .arrow-fill__icon,
  .arrow-fill .arrow-fill__arrow {
    transition: none;
  }
}

/* Reference footer layout over the existing animated background. */
.mf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(#163d7f, #12316d);
  color: #fff;
}
.mf__media {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to right, #000 80%, transparent);
}
.mf__video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.mf__inner {
  position: relative;
  width: 90%;
  max-width: 1400px;
  min-height: 480px;
  margin: 0 auto;
  padding: 64px 0 36px;
  display: flex;
  flex-direction: column;
}
.mf__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 145px 125px 300px;
  gap: 28px;
  align-items: start;
  flex: 1;
}
.mf__brand-logo {
  display: block;
  width: 200px;
  height: auto;
}
.mf__tagline {
  max-width: 240px;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}
.mf__heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  font-variation-settings: 'wght' 600;
  color: #fff;
}
.mf__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf__list li {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.mf a.mf__link {
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.18s ease;
}
.mf a.mf__link:hover,
.mf a.mf__link:focus-visible {
  color: #fff;
}
.mf__news {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 32px;
  min-height: 240px;
}
.mf__news .mf__heading {
  font-size: 20px;
  margin-bottom: 14px;
}
.mf__news-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}
.mf__form {
  display: flex;
  align-items: stretch;
  height: 38px;
  margin: 26px 0 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px;
}
.mf__form:focus-within {
  border-color: #fff;
}
.mf__input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
}
.mf__input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.mf__input:focus {
  outline: none;
}
.mf__submit {
  flex: 0 0 auto;
  margin: -1px;
  padding: 0 20px;
  border: 0;
  border-radius: 9px;
  background: #202020;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mf__submit:hover,
.mf__submit:focus-visible {
  background: #353535;
}
.mf__socials {
  display: flex;
  gap: 28px;
  margin-top: 32px;
}
.mf__social {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.74);
}
.mf__social:hover,
.mf__social:focus-visible {
  color: #fff;
}
.mf__social svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.mf__divider {
  width: 100%;
  height: 0;
  margin: 32px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.mf__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  color: rgba(255, 255, 255, 0.65);
}
.mf__copyright {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.mf__bar-links {
  display: flex;
  gap: 48px;
}
.mf__bar .mf__link {
  font-size: 13px;
}
.mf__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media screen and (max-width: 1100px) {
  .mf__grid {
    grid-template-columns: minmax(180px, 1fr) 140px 110px 260px;
    gap: 20px;
  }
  .mf__news {
    padding-left: 20px;
  }
}
@media screen and (max-width: 900px) {
  .mf__inner {
    padding-top: 40px;
  }
  .mf__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .mf__brand {
    grid-column: 1 / -1;
    min-height: 280px;
  }
  .mf__media {
    top: 60px;
    height: 300px;
    bottom: auto;
  }
  .mf__news {
    grid-column: 1 / -1;
    min-height: 0;
    border-left: 0;
    padding: 0;
    max-width: 360px;
  }
  .mf__bar {
    flex-wrap: wrap;
  }
  .mf__bar-links {
    flex-wrap: wrap;
    gap: 24px;
  }
}

/* Software products showcase: a list of rows where hovering one floats a
   picture and a "View" badge alongside the pointer. The trailing motion is
   driven from script; everything else here is transitions. */
.product-showcase__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.product-showcase__intro {
  max-width: 24rem;
  margin: 0;
}

.product-showcase {
  margin-top: 3.2rem;
}

.product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--color--grey-100);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.product-row:last-child {
  border-bottom: 1px solid var(--color--grey-100);
}

.product-row__name {
  font-size: 2.6rem;
  line-height: 1.1;
  font-weight: 400;
  transition: transform 0.3s ease;
}

.product-row__label {
  color: var(--color--grey-500);
  text-align: right;
  transition: transform 0.3s ease;
}

/* Dimming the whole list and lifting only the hovered row is what makes the
   pointer feel like it is picking one item out of the set. */
.product-showcase[data-active='true'] .product-row {
  opacity: 0.45;
}

.product-showcase[data-active='true'] .product-row:hover {
  opacity: 1;
}

.product-row:hover .product-row__name,
.product-row:hover .product-row__label {
  transform: translateX(0.6rem);
}

.product-row:focus-visible {
  outline: 2px solid var(--color--purple-500);
  outline-offset: -2px;
}

/* Floating picture. Fixed positioning keeps it with the pointer without the
   page scroll offset that pageX would otherwise need correcting for. */
.product-showcase__panel,
.product-showcase__badge {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.product-showcase__panel {
  width: 20rem;
  height: 17.5rem;
  transition:
    opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.4s;
}

/* The tilt lives on an inner layer so the script can keep translating the
   outer one along the pointer without the two transforms fighting. */
.product-showcase__tilt {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 1.5rem 3rem rgba(19, 17, 22, 0.25);
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}

.product-showcase__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--color--purple-500);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 300;
  z-index: 41;
  transition:
    opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.4s;
}

.product-showcase[data-active='true'] .product-showcase__panel,
.product-showcase[data-active='true'] .product-showcase__badge {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The slides are stacked full-height; the script slides the stack by whole
   multiples of 100% so the hovered row's picture lands in the frame. */
.product-showcase__stack {
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.product-showcase__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.product-showcase__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 991px) {
  .product-row {
    padding: 1.75rem 0.5rem;
  }
  .product-row__name {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 600px) {
  .product-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .product-row__label {
    text-align: left;
  }
}

/* No pointer to follow, and nothing to reveal on hover, so the panel stays
   out of the way entirely. Tapping a row still opens the picture. */
@media (hover: none) {
  .product-showcase__panel,
  .product-showcase__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-showcase__panel,
  .product-showcase__badge {
    display: none;
  }
  .product-row,
  .product-row__name,
  .product-row__label,
  .product-showcase__stack {
    transition: none;
  }
}

/* Picture gallery opened from a product row. The dialog supplies Escape, the
   backdrop and focus handling; everything below is presentation. */
.pg {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  overflow: hidden;
}

.pg::backdrop {
  background-color: rgba(19, 17, 22, 0.72);
  backdrop-filter: blur(0.5rem);
}

.pg__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem 1.5rem 9rem;
}

.pg__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: min(64rem, 92vw);
  margin: 0;
}

/* Re-added by script on every change of picture, so each one lands with the
   same settle as the first. */
.pg__frame.is-entering {
  animation: pg-enter 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@keyframes pg-enter {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pg__image {
  display: block;
  max-width: min(64rem, 92vw);
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: 0.6rem;
}

.pg__caption {
  padding: 0;
  text-align: center;
}

.pg__title {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.pg__desc {
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.pg__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color--grey-800, #26222e);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.pg__close:hover {
  transform: scale(1.1);
  background-color: #fff;
}

.pg__close:active {
  transform: scale(0.9);
}

/* Dock of every shot, draggable anywhere in the dialog. */
.pg__dock {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  transform: translateX(-50%);
  touch-action: none;
  cursor: grab;
}

.pg__dock[data-pg-dragging='true'] {
  cursor: grabbing;
}

.pg__dock-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(160, 130, 245, 0.35);
  background-color: rgba(122, 68, 235, 0.22);
  backdrop-filter: blur(1rem);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

.pg__thumb {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  overflow: hidden;
  cursor: pointer;
  background: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition:
    transform 0.35s cubic-bezier(0.22, 1.4, 0.36, 1),
    box-shadow 0.25s ease;
}

/* Alternating tilt, the way the dock reads in the original. */
.pg__thumb:nth-child(odd) {
  transform: rotate(-15deg);
}

.pg__thumb:nth-child(even) {
  transform: rotate(15deg);
}

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

.pg__thumb:hover,
.pg__thumb:focus-visible {
  transform: rotate(0deg) scale(1.3) translateY(-0.6rem);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  outline: none;
  z-index: 2;
}

.pg__thumb[data-pg-current='true'] {
  transform: rotate(0deg) scale(1.2) translateY(-0.5rem);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 1.5rem rgba(255, 255, 255, 0.45);
  z-index: 3;
}

@media screen and (max-width: 600px) {
  .pg__stage {
    padding: 1rem 0.75rem 8rem;
  }
  .pg__thumb {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg__frame.is-entering {
    animation: none;
  }
  .pg__thumb {
    transition: none;
  }
}

/* One knob for all three contact icons. */
.text-with-icon {
  --contact-icon: #ffffff;
}

/* Animated at-sign on the contact page. pathLength="1" on both shapes
   normalises their lengths, so one dashoffset keyframe draws either of them,
   which is what framer's pathLength animation does. */
.at-icon {
  display: inline-flex;
  color: var(--contact-icon);
}

.at-icon svg {
  display: block;
  overflow: visible;
}

.at-icon__circle,
.at-icon__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Hovering anywhere on the email line redraws the mark: the ring first, then
   the tail a beat later, matching the delay in the original variants. */
.text-with-icon:hover .at-icon__circle {
  animation: at-draw 0.3s ease both;
}

.text-with-icon:hover .at-icon__path {
  animation: at-draw 0.3s ease 0.3s both;
}

@keyframes at-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-with-icon:hover .at-icon__circle,
  .text-with-icon:hover .at-icon__path {
    animation: none;
  }
}

/* Animated phone on the contact page. Motion spreads a keyframe array evenly
   across the duration, so rotate's five values land on 0/25/50/75/100% and
   scale's three on 0/50/100%; the two timelines are merged below. */
.phone-icon {
  display: inline-flex;
  color: var(--contact-icon);
}

.phone-icon svg {
  display: block;
  overflow: visible;
  transform-origin: center;
}

.text-with-icon:hover .phone-icon svg {
  animation: phone-ring 0.9s ease-in-out both;
}

@keyframes phone-ring {
  0% {
    transform: rotate(10deg) scale(1);
  }
  25% {
    transform: rotate(20deg) scale(1.05);
  }
  50% {
    transform: rotate(-10deg) scale(1.1);
  }
  75% {
    transform: rotate(10deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-with-icon:hover .phone-icon svg {
    animation: none;
  }
}

/* Animated map pin on the contact page. The whole mark hops, and the inner
   ring draws itself a beat later. The hop distance is scaled from the
   original's -5px at size 28 to keep the same lift at our 20px. */
.pin-icon {
  display: inline-flex;
  color: var(--contact-icon);
}

.pin-icon svg {
  display: block;
  overflow: visible;
}

/* Motion drives pathLength through stroke-dasharray and pathOffset through a
   negated stroke-dashoffset. pathLength="1" on the circle normalises its
   length, so both animate between plain numbers. */
.pin-icon__circle {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  opacity: 1;
}

.text-with-icon:hover .pin-icon svg {
  animation: pin-hop 0.5s ease-in-out both;
}

.text-with-icon:hover .pin-icon__circle {
  animation: pin-ring 0.5s ease 0.3s both;
}

/* pathOffset 0.5 -> 0 starts the ring half a turn round, so it sweeps into
   place rather than growing from its start point. */
@keyframes pin-ring {
  from {
    stroke-dasharray: 0 1;
    stroke-dashoffset: -0.5;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* times: [0, 0.6, 1] puts the peak at 60% rather than halfway. */
@keyframes pin-hop {
  0% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-3.5px);
  }
  100% {
    transform: translateY(-2.1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-with-icon:hover .pin-icon svg,
  .text-with-icon:hover .pin-icon__circle {
    animation: none;
  }
}

/* Contact page: the phone and email links keep their underline for hover and
   keyboard focus instead of wearing it permanently. Scoped to .git-left so the
   same class on the partner pages is left alone. */
.git-left .link-on-dark {
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.git-left .link-on-dark:hover,
.git-left .link-on-dark:focus-visible {
  text-decoration: underline;
}

/* About Us mission photo: Webflow keeps its portrait shape only below 768px.
   Between 768px and 991px the box became a short full-width strip that showed
   just the top half of the picture, so keep the shape there too. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .rounded-feature-picture.about-logo {
    aspect-ratio: 33 / 35;
    height: auto;
    max-width: 29.6rem;
  }
}

/* Navbar logo: white over the dark hero, navy once the navbar turns white (on
   scroll, or behind the open mobile menu). Header.tsx mirrors the navbar's
   background opacity into --maddy-nav-solid; both images share one canvas. */
.logo.maddy-logo {
  position: relative;
}

.maddy-logo .maddy-logo-light {
  opacity: calc(1 - var(--maddy-nav-solid, 0));
}

.maddy-logo .maddy-logo-dark {
  position: absolute;
  inset: 0;
  opacity: var(--maddy-nav-solid, 0);
}

/* Desktop navbar: logo | menu pill | Contact Us on a 1fr auto 1fr grid, so the
   pill sits dead centre whatever the logo and button widths (Webflow nudged it
   with left: 3rem), and the button stretches to the pill's height and radius. */
@media screen and (min-width: 992px) {
  .navbar .container.nav-flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }

  .navbar .nav-flex > .logo {
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }

  .navbar .nav-flex > .nav-menu {
    grid-column: 2;
    left: auto;
    margin: 0;
  }

  .navbar .nav-flex > .is-navbar-button {
    grid-column: 3;
    justify-self: end;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 1.6rem;
  }

  /* The font leaves more room under the letters than above them, so a centred
     line box still reads high. Trim the line to cap height and baseline so the
     label is optically centred; older browsers get the original 0.1rem nudge. */
  .navbar .nav-flex > .is-navbar-button p {
    text-box: trim-both cap alphabetic;
  }

  @supports not (text-box: trim-both cap alphabetic) {
    .navbar .nav-flex > .is-navbar-button {
      padding-top: 0.1rem;
    }
  }
}

/* Webflow widens the heroes' side padding to 5rem from 1440px, which put the
   hero copy 1rem inside the navbar's edges (the hero card adds its own 1rem).
   Keep 4rem so the heroes line up with the navbar like the rest of the page. */
@media screen and (min-width: 1440px) {
  .section.is-hero-section,
  .section.is-why-flow-hero,
  .section.is-why-about-hero,
  .section.is-products-hero {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}