/* Digital Supply Chain: every section fills exactly one screen below the fixed header + section bar,
   and fit-snap.js glides the page onto the nearest section when scrolling stops (laptop/desktop only).
   --dsc-chrome is the height of the fixed header + section bar, measured by fit-snap.js (fallback below). */
@media (min-width: 1024px) {
  /* Menu links (Planning platforms, Our products, Why SupplyChainz) land exactly where the wheel snaps: each section's
     own top padding already clears the header and section bar, so the old one-page scroll offset (dsc-site-css,
     scroll-padding-top: 120px) would stop every jump 120px short. */
  html { scroll-padding-top: 0 !important; }
  :root { --dsc-chrome: 150px; --dsc-gap-top: clamp(12px, 3.2svh, 40px); --dsc-gap-bottom: clamp(12px, 3svh, 36px); }

  html body main .beat,
  html body main .beat.beat-fit,
  html body main #track-record {
    box-sizing: border-box;
    min-height: 100svh;
    padding-top: calc(var(--dsc-chrome) + var(--dsc-gap-top));
    padding-bottom: var(--dsc-gap-bottom);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Track record became a flex column above: keep its content full width (a centred auto-margin box would shrink to its text) */
  html body main #track-record > .mx-auto { width: 100%; }
  /* Reach: the same 1720px width as the other sections, so the map (sized from the screen height) can grow */
  html body main #reach > .mx-auto { max-width: 1720px; }

  /* Contact is the last section, right above the footer: keep its content at the bottom of its screen, so the last
     stop (footer in view) still shows the whole Contact block below the header */
  html body main > #contact:last-child { justify-content: flex-end; }
  /* ...and it is no longer a screen of its own: no planet curve and no empty space above the block, so the next stop after
     the section before it is the page end (Contact and the footer together) */
  html body main > #contact:last-child { min-height: 0; padding-top: clamp(28px, 5svh, 64px); }
  html body main > #contact:last-child > .planet { display: none; }
  /* RELEX and Products open with a decorative seam that sits under the header: lay it over the top of the first
     section instead of in front of it, so the first section also starts at the top of the page and fits one screen */
  html body main > .seam:first-child { position: absolute; top: 0; left: 0; right: 0; }
}

/* Reach map (DSC home): hover, focus or tap a city label (Amsterdam, Singapore, New York) for that office's card */
.dsc-office { pointer-events: auto; cursor: default; outline: none; }
.dsc-office > span:first-child { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px; }
.dsc-office:focus-visible > span:first-child { text-decoration-style: solid; }
.dsc-office-card { position: absolute; top: 14px; z-index: 5; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.dsc-office:hover .dsc-office-card, .dsc-office:focus-within .dsc-office-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .dsc-office-card { transform: none; transition-duration: .25s, .25s, 0s !important; } }   /* fades, no lift */

/* Reach map (DSC home): a soft frosted panel behind the map, so it stands out from the starfield */
#reach div[class*="aspect-[1000/440]"] { isolation: isolate; }
#reach div[class*="aspect-[1000/440]"]::before {
  content: ""; position: absolute; inset: -3% -2.5%; z-index: -1; pointer-events: none; border-radius: 28px;
  background: radial-gradient(70% 80% at 50% 45%, rgba(26, 44, 92, .55), rgba(10, 20, 46, .42) 70%);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(238, 242, 248, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -50px rgba(0, 0, 0, .8);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%);
}