/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Network Index · tone: technical restrained industrial · anchor hue: MOSINTER green */
:root {
  --mos-network-paper: var(--color-about-paper, oklch(98% 0.006 250));
  --mos-network-paper-raised: oklch(100% 0 0);
  --mos-network-ink: var(--color-about-ink, oklch(20% 0.018 255));
  --mos-network-muted: var(--color-about-ink-soft, oklch(46% 0.018 255));
  --mos-network-rule: var(--color-about-rule, oklch(86% 0.012 250));
  --mos-network-accent: var(--color-about-accent, oklch(58.365% 0.12409 131.416));
  --mos-network-accent-strong: var(--color-about-accent-strong, oklch(54.123% 0.12997 132.225));
  --mos-network-accent-glow: oklch(58.365% 0.12409 131.416 / 0.18);
  --mos-network-night: var(--color-about-night, oklch(18% 0.025 255));
  --mos-network-focus: var(--color-about-focus, oklch(34% 0.11 255));
  --mos-network-shadow: var(--color-about-shadow, oklch(20% 0.018 255 / 0.12));
  --mos-network-space-2: 0.5rem;
  --mos-network-space-3: 0.75rem;
  --mos-network-space-4: 1rem;
  --mos-network-space-6: 1.5rem;
  --mos-network-space-8: 2rem;
  --mos-network-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mos-network-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mos-network-cycle: 6.4s;
}

html:has(body.mos-about-global-supply-page),
body.mos-about-global-supply-page {
  overflow-x: clip;
}

.mos-about-global-supply-page .mos-about-hero {
  background-image: url("/assets/imgs/about/global-supply-network/hero.png");
}

.mos-about-global-supply-page .site-footer .footer-top,
.mos-about-global-supply-page .mos-about-cta {
  background-image: url("/assets/imgs/about/global-supply-network/footer-bg.png");
}

.mos-about-global-supply-page .contact-slide-hide {
  background-image: url("/assets/imgs/about/global-supply-network/contact-bg.jpg");
}

.mos-about-global-supply-page .contact-nav-info {
  background-image: url("/assets/imgs/about/global-supply-network/contact-map.png");
}

.mos-global-map-section {
  overflow: clip;
}

.mos-global-map-section .section-head h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mos-global-map {
  position: relative;
  max-width: 72rem;
  margin: var(--mos-network-space-8) auto var(--mos-network-space-6);
  overflow: hidden;
  border: 1px solid var(--mos-network-rule);
  background: var(--mos-network-paper-raised);
  box-shadow: 0 1.25rem 3.25rem var(--mos-network-shadow);
  contain: layout paint;
  isolation: isolate;
}

.mos-global-map > img {
  display: block;
  width: 100%;
  height: auto;
}

.mos-global-map:focus-visible {
  outline: 3px solid var(--mos-network-focus);
  outline-offset: 3px;
}

.mos-global-map-routes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.mos-global-route {
  position: absolute;
  left: var(--route-left);
  top: var(--route-top);
  width: var(--route-length);
  height: 2px;
  background: linear-gradient(90deg, var(--mos-network-accent-glow), var(--mos-network-accent-strong));
  opacity: 0.24;
  transform: rotate(var(--route-angle)) scaleX(1);
  transform-origin: left center;
}

.mos-global-route::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--mos-network-paper-raised);
  border-radius: 50%;
  background: var(--mos-network-accent-strong);
  box-shadow: 0 0 0 0.25rem var(--mos-network-accent-glow);
  content: "";
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.mos-global-map.is-ready:not(.is-settled) .mos-global-route,
.mos-global-map.is-ready:not(.is-settled) .mos-global-route::after,
.mos-global-map.is-ready:not(.is-settled) .mos-map-destination {
  will-change: opacity, transform;
}

.mos-global-map.is-ready .mos-global-route {
  animation: mos-route-cycle var(--mos-network-cycle) var(--mos-network-ease-in-out) 2 both;
  animation-delay: calc(0s - var(--route-delay));
  animation-play-state: paused;
}

.mos-global-map.is-ready .mos-global-route::after {
  animation: mos-route-signal var(--mos-network-cycle) var(--mos-network-ease-in-out) 2 both;
  animation-delay: calc(0s - var(--route-delay));
  animation-play-state: paused;
}

.mos-map-origin,
.mos-map-destination {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 3;
  width: 0.75rem;
  height: 0.75rem;
  border: 3px solid var(--mos-network-paper-raised);
  border-radius: 50%;
  background: var(--mos-network-accent);
  box-shadow: 0 0 0 0.3rem var(--mos-network-accent-glow);
  transform: translate(-50%, -50%);
}

.mos-map-origin {
  z-index: 4;
}

.mos-map-origin::before,
.mos-map-destination::before {
  position: absolute;
  inset: -0.4rem;
  border: 2px solid var(--mos-network-accent);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: scale(0.45);
}

.mos-map-origin::after,
.mos-map-destination::after {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: max-content;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--mos-network-rule);
  background: var(--mos-network-night);
  color: var(--mos-network-paper-raised);
  content: attr(data-map-label);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(var(--label-shift-x), var(--label-shift-y));
}

.mos-map-destination {
  opacity: 0.72;
}

.mos-global-map.is-ready .mos-map-destination {
  animation: mos-destination-cycle var(--mos-network-cycle) var(--mos-network-ease-in-out) 2 both;
  animation-delay: calc(0s - var(--marker-delay));
  animation-play-state: paused;
}

.mos-global-map.is-ready .mos-map-origin::before {
  animation: mos-origin-pulse 2.4s var(--mos-network-ease-out) 5 both;
  animation-play-state: paused;
}

.mos-global-map.is-ready .mos-map-destination::before {
  animation: mos-destination-pulse var(--mos-network-cycle) var(--mos-network-ease-out) 2 both;
  animation-delay: calc(0s - var(--marker-delay));
  animation-play-state: paused;
}

.mos-global-map.is-ready.is-visible .mos-global-route,
.mos-global-map.is-ready.is-visible .mos-global-route::after,
.mos-global-map.is-ready.is-visible .mos-map-origin::before,
.mos-global-map.is-ready.is-visible .mos-map-destination,
.mos-global-map.is-ready.is-visible .mos-map-destination::before {
  animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
  .mos-global-map:hover .mos-global-route,
  .mos-global-map:hover .mos-global-route::after,
  .mos-global-map:hover .mos-map-origin::before,
  .mos-global-map:hover .mos-map-destination,
  .mos-global-map:hover .mos-map-destination::before {
    animation-play-state: paused;
  }
}

.mos-global-map:focus .mos-global-route,
.mos-global-map:focus .mos-global-route::after,
.mos-global-map:focus .mos-map-origin::before,
.mos-global-map:focus .mos-map-destination,
.mos-global-map:focus .mos-map-destination::before {
  animation-play-state: paused;
}

.mos-global-map-section .mos-market-regions {
  margin-top: var(--mos-network-space-4);
}

.mos-about-global-supply-page .mos-platform-list-wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mos-network-space-4);
}

.mos-about-global-supply-page .mos-platform-list-wide a {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--mos-network-rule);
  text-align: left;
}

.mos-platform-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mos-network-paper);
}

.mos-platform-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--mos-network-ease-out);
}

.mos-platform-copy {
  display: block;
  min-width: 0;
  padding: var(--mos-network-space-4);
}

.mos-platform-copy strong,
.mos-platform-copy small {
  display: block;
}

.mos-platform-copy strong {
  color: var(--mos-network-ink);
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mos-platform-copy small {
  margin-top: 0.375rem;
  color: var(--mos-network-muted);
  font-size: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
  .mos-about-global-supply-page .mos-platform-list-wide a:hover .mos-platform-media img {
    transform: scale(1.035);
  }
}

.mos-about-global-supply-page .mos-platform-list-wide a:focus-visible {
  outline: 3px solid var(--mos-network-focus);
  outline-offset: 3px;
}

.mos-about-global-supply-page .mos-platform-list-wide a:active .mos-platform-media img {
  transform: scale(1.015);
}

.mos-about-global-supply-page .mos-platform-list-wide a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes mos-route-cycle {
  0%, 100% { opacity: 0.24; transform: rotate(var(--route-angle)) scaleX(0.985); }
  18%, 62% { opacity: 0.82; transform: rotate(var(--route-angle)) scaleX(1); }
  82% { opacity: 0.34; transform: rotate(var(--route-angle)) scaleX(1); }
}

@keyframes mos-route-signal {
  0%, 4% { opacity: 0; transform: translate3d(0, -50%, 0) scale(0.72); }
  9% { opacity: 1; }
  42% { opacity: 1; transform: translate3d(var(--route-length), -50%, 0) scale(1); }
  48%, 100% { opacity: 0; transform: translate3d(var(--route-length), -50%, 0) scale(0.72); }
}

@keyframes mos-origin-pulse {
  0% { opacity: 0.85; transform: scale(0.45); }
  72%, 100% { opacity: 0; transform: scale(1.75); }
}

@keyframes mos-destination-cycle {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.94); }
  22%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  84% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.97); }
}

@keyframes mos-destination-pulse {
  0%, 19% { opacity: 0; transform: scale(0.45); }
  28% { opacity: 0.8; transform: scale(0.65); }
  48%, 100% { opacity: 0; transform: scale(1.8); }
}

@media (max-width: 74.9375rem) {
  .mos-about-global-supply-page .mos-platform-list-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 61.9375rem) {
  .mos-about-global-supply-page .mos-platform-list-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375rem) {
  .mos-global-map {
    margin-top: var(--mos-network-space-6);
  }

  .mos-map-destination {
    display: none;
  }

  .mos-map-origin {
    width: 0.625rem;
    height: 0.625rem;
    border-width: 2px;
  }

  .mos-map-origin::after {
    padding: 0.25rem 0.375rem;
    font-size: 0.625rem;
    transform: translate(calc(-100% - 0.75rem), -1.75rem);
  }
}

@media (max-width: 35.9375rem) {
  .mos-about-global-supply-page .mos-platform-list-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .mos-platform-media {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mos-global-route,
  .mos-global-map.is-ready .mos-global-route {
    opacity: 0.82;
    transform: rotate(var(--route-angle)) scaleX(1);
    animation: none;
  }

  .mos-global-route::after,
  .mos-global-map.is-visible .mos-global-route::after,
  .mos-map-origin::before,
  .mos-map-destination::before {
    opacity: 0;
    animation: none;
  }

  .mos-map-destination,
  .mos-global-map.is-ready .mos-map-destination {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: none;
  }

  .mos-platform-media img {
    transition-duration: 50ms;
  }
}