/* ============================================================
   Atlas Integrated — Scroll-driven layout
   ============================================================
   Globe + section content are ALL position:fixed overlays.
   Sections in the DOM provide scrollable height only.
   JS maps scrollY → globe position + content opacity.
   Desktop only (≥1024px).
   ============================================================ */

@media (min-width: 1024px) {

  /* ---- Sections: height spacers with breathing room ---- */
  [data-globe-side] {
    min-height: 120vh;
    position: relative;
    border-top: none !important;
  }
  [data-globe-side]::before,
  [data-globe-side]::after {
    display: none !important;
  }

  /* ---- Section containers: fixed overlays ---- */
  [data-globe-side] > .container {
    position: fixed !important;
    top: 0;
    bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    /* flex-start so content anchors to top, never clips headline */
    justify-content: flex-start !important;
    padding-top: 120px !important;
    padding-bottom: 24px !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 5;
    opacity: 0;
    overflow: hidden !important;
  }

  /* Globe LEFT → content on the RIGHT */
  [data-globe-side="left"] > .container {
    left: 44vw !important;
    right: var(--gutter) !important;
  }

  /* Globe RIGHT → content on the LEFT */
  [data-globe-side="right"] > .container {
    left: var(--gutter) !important;
    right: 44vw !important;
  }

  /* Globe CENTER → content below globe */
  [data-globe-side="center"] > .container {
    left: var(--gutter) !important;
    right: var(--gutter) !important;
    justify-content: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: var(--space-8) !important;
  }

  /* Demo: navy background on the fixed container */
  .section-demo {
    background: none !important;
  }
  .section-demo::before {
    display: none !important;
  }
  .section-demo > .container {
    background: var(--color-navy);
    color: var(--color-surface);
    justify-content: center !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 24px !important;
    /* Don't cover the footer */
    bottom: auto !important;
    height: 100vh;
  }
  /* Compact the demo form to fit viewport */
  .section-demo .demo-form {
    padding: var(--space-5) var(--space-5);
    gap: var(--space-4);
  }
  .section-demo .demo-headline {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: var(--space-3);
  }
  .section-demo .demo-lede {
    margin-bottom: var(--space-5);
  }

  /* Each section spacer gets a background to block what's below */
  [data-globe-side] {
    background: var(--bg-page);
  }

  /* ---- Section-specific overrides ---- */

  /* Platform: single-column, compact to fit viewport */
  [data-globe-side] .split-2 {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }
  [data-globe-side] .split-text .section-headline {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--space-2);
  }
  [data-globe-side] .split-text .section-body {
    font-size: var(--fs-body-sm);
  }
  [data-globe-side] .split-text .section-body + .section-body {
    margin-top: var(--space-2);
  }
  [data-globe-side] .workflow-diagram {
    max-width: 480px;
  }

  /* Section headers: left-align in side lanes */
  [data-globe-side="left"] .section-header,
  [data-globe-side="right"] .section-header {
    text-align: left;
    margin-inline: 0;
    max-width: none;
  }
  [data-globe-side="left"] .section-header .section-headline,
  [data-globe-side="left"] .section-header .section-lede,
  [data-globe-side="right"] .section-header .section-headline,
  [data-globe-side="right"] .section-header .section-lede {
    margin-inline: 0;
  }

  /* Built Different: compact to fit viewport */
  [data-globe-side] .differentiator-grid {
    max-width: none;
    gap: var(--space-4) var(--space-5);
  }
  [data-globe-side] .differentiator-title {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    margin-bottom: var(--space-2);
  }
  [data-globe-side] .differentiator-body {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
  }
  [data-globe-side] .section-header {
    margin-bottom: var(--space-5);
  }

  /* ---- Capabilities ---- */
  /* Globe centered upper, header + cards in lower half */
  .section-capabilities > .container {
    /* Globe occupies the top ~45%. Content must start below. */
    padding-top: 48vh !important;
    justify-content: flex-start !important;
  }
  .section-capabilities .section-header {
    text-align: center !important;
    margin-inline: auto !important;
    max-width: 760px !important;
    margin-bottom: var(--space-3);
  }
  .section-capabilities .section-headline {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--space-2);
  }
  .section-capabilities .section-lede {
    display: none;
  }
  .section-capabilities .capability-feature {
    display: none;
  }

  /* Capability carousel: transform-driven, no scroll */
  .section-capabilities > .container {
    overflow: visible !important; /* cards extend beyond container */
  }
  .capability-carousel {
    position: relative;
    width: 100%;
    height: 260px;
    margin-top: var(--space-4);
  }
  .capability-carousel .capability-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    /* Override the section.css transition — JS sets transform every frame */
    transition: none !important;
    will-change: transform, opacity;
  }

  /* Footer must render above the fixed containers */
  .site-footer {
    position: relative;
    z-index: 10;
  }

} /* end 1024px */