@font-face {
  font-family: "DM Sans";
  src: url("/assets/fgx/fonts/dm-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --_font-default: "DM Sans", Arial, sans-serif;
  --_font-accent: "DM Sans", Arial, sans-serif;
  --base: #0f0f0f;
  --base-rgb: 15, 15, 15;
  --base-tint: #171719;
  --base-tint-rgb: 23, 23, 25;
  --base-bright: #000;
  --base-bright-rgb: 0, 0, 0;
  --base-opp: #eeeae8;
  --base-opp-rgb: 238, 234, 232;
  --t-bright: #fff;
  --t-medium: #8e93a1;
  --t-muted: #36363c;
  --t-muted-extra: #191a1d;
  --t-opp-bright: #161616;
  --t-opp-medium: #666870;
}

html { background: #0f0f0f; }
body {
  margin: 0;
  overflow-x: hidden !important;
  background: #0f0f0f;
  color: var(--t-medium);
  font-family: "DM Sans", Arial, sans-serif;
  cursor: auto !important;
}

/* The supplied project layout uses Bootstrap's grid names, but not its
   interactive components. These few rules replace the 750 KB plugin bundle. */
.container-fluid { width: 100%; margin-inline: auto; }
.p-0 { padding: 0 !important; }
.row { display: flex; flex-wrap: wrap; }
.g-0 { margin: 0; }
.g-0 > * { padding: 0; }
.col-12 { flex: 0 0 auto; width: 100%; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

/* No preloader or page-transition layer. */
.mxd-loader,
.mxd-page-transition,
.mxd-cursor,
.mxd-cursor__pointer { display: none !important; }

/* The original animation library hid these nodes before JavaScript split
   their text. Keep the exact layout while making all content immediately usable. */
.loading-fade,
.loading-item,
.loading-split,
.anim-uni-in-up,
.anim-uni-slide-down,
.anim-uni-fade-in,
.mxd-split-lines,
.mxd-split-line,
.blur-section {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* The shared FGX menu replaces the page-specific template header. */
[data-fgx-menu] { position: relative; z-index: 1000; }
.rayo-primary-navigation[data-logo-theme="light"]:not(.is-open) .rayo-primary-navigation__bar { --rayo-nav-ink: #f4f0ee; --rayo-nav-paper: #101010; }
.rayo-primary-navigation:not(.is-open) .fgx-logo-dark { opacity: 1 !important; }
.rayo-primary-navigation:not(.is-open) .fgx-logo-light { opacity: 0 !important; }
.rayo-primary-navigation[data-logo-theme="light"]:not(.is-open) .fgx-logo-dark { opacity: 0 !important; }
.rayo-primary-navigation[data-logo-theme="light"]:not(.is-open) .fgx-logo-light { opacity: 1 !important; }
.rayo-primary-navigation[data-logo-theme="light"]:not(.is-open) .rayo-primary-navigation__contact { color: #f4f0ee; }
.rayo-primary-navigation[data-logo-theme="light"]:not(.is-open) .rayo-primary-navigation__toggle { color: #101010; background: #f4f0ee; }
.mxd-page-content { padding-top: clamp(9rem, 8vw, 13rem); }

/* Match the project masthead used by Kudusure. The source theme reset was
   removed with its plugin bundle, so keep these rules local to this header. */
.project-pilot .inner-headline {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
}
.project-pilot .inner-headline .row.g-0 > .mxd-grid-item {
  padding-right: 30px;
  padding-left: 30px;
}
.project-pilot .inner-headline h1.large {
  margin: 0;
  font-family: "Funnel Display", "DM Sans", sans-serif;
  font-weight: 600;
}
.project-pilot .inner-headline__subtitle p {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.project-pilot .breadcrumbs__nav a,
.project-pilot .breadcrumbs__nav span,
.project-pilot .inner-headline .tag.tag-m,
.project-pilot .inner-headline__tags .btn,
.project-pilot .inner-headline__tags .btn-caption {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.project-pilot .inner-headline .tag.tag-m {
  letter-spacing: 0.5px;
}

/* Preserve the media composition from the supplied page. */
.mxd-divider__image.divider-image-11 {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-image: url("media/pilot-hero.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.mxd-images-grid .container-fluid { max-width: none; padding: 0; }
.mxd-images-grid__gallery {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 0 4px;
}
.mxd-images-grid__gallery > [class*="col-"] {
  flex: 1 1 0;
  max-width: none;
  padding: 0 2px;
}
.mxd-images-grid__gallery > [class*="col-"]:first-child { padding-left: 0; }
.mxd-images-grid__gallery > [class*="col-"]:last-child { padding-right: 0; }
.mxd-images-grid__item,
.mxd-images-grid__item.wide {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0;
}
.mxd-images-grid__inner {
  height: auto;
  margin: 0 !important;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f4f4f2;
}
.mxd-images-grid__inner img,
.mxd-images-grid__inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lightweight marquee behaviour; the heavy GSAP/plugin bundle is not required. */
.marquee { overflow: hidden; }
.marquee__toleft,
.marquee__toright { display: flex; width: max-content; }
.marquee__item { flex: 0 0 auto; }
.marquee__image img { object-fit: cover; }
.marquee-left--gsap .marquee__toleft { animation: pilot-marquee-left 52s linear infinite; }
.marquee-right--gsap .marquee__toright { animation: pilot-marquee-right 52s linear infinite; }
@keyframes pilot-marquee-left { to { transform: translateX(-50%); } }
@keyframes pilot-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Keep the shared footer isolated from the source theme's broad typography rules. */
[data-fgx-footer] { position: relative; z-index: 2; font-size: 10px; }

@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
}

@media (max-width: 1199px) {
  .mxd-page-content { padding-top: 8rem; }
}

@media (max-width: 767px) {
  .mxd-page-content { padding-top: 7rem; }
  .mxd-images-grid__gallery { flex-wrap: wrap; margin-bottom: 0; }
  .mxd-images-grid__gallery > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 0 4px;
  }
  .mxd-divider__image.divider-image-11 { aspect-ratio: 4 / 5; background-position: 58% center !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
