/* ============================================================
   page-top.css — TOP page (index.html) specific layout
   The TOP page is a stack of "bands" cut from the giant
   voyager-top.svg (1440 × 9754). Each band is a clipped viewport
   that shows a vertical slice. Transparent overlays sit on top
   for clickable buttons.
   ============================================================ */

/* Section container */
.vt-body {
  background: var(--paper);
  position: relative;
  width: 1440px;
  margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────
   Bands — each is a clipped viewport into voyager-top.svg
   ──────────────────────────────────────────────────────────── */
.vt-band {
  width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.vt-band__img {
  display: block;
  width: 1440px;
  height: 9754px;
}

/* Mission band: y=961..1704, h=743 */
.vt-band--mission         { height: 743px; }
.vt-band--mission .vt-band__img         { margin-top: -961px; }

/* Solution top: y=1704..2591, h=887 */
.vt-band--sol-top         { height: 887px; transition-delay: .05s; }
.vt-band--sol-top .vt-band__img         { margin-top: -1704px; }

/* Solution mid: y=2591..3450, h=859 */
.vt-band--sol-mid         { height: 859px; }
.vt-band--sol-mid .vt-band__img         { margin-top: -2591px; }

/* Solution CTA: y=3450..4067, h=617 */
.vt-band--sol-cta         { height: 617px; transition-delay: .05s; }
.vt-band--sol-cta .vt-band__img         { margin-top: -3450px; }

/* Service: y=4067..5091, h=1024 */
.vt-band--service         { height: 1024px; }
.vt-band--service .vt-band__img         { margin-top: -4067px; }

/* Case: y=5091..6115, h=1024 */
.vt-band--case            { height: 1024px; transition-delay: .05s; }
.vt-band--case .vt-band__img            { margin-top: -5091px; }

/* Crew + Column header: y=7151..8034, h=883 */
.vt-band--crew            { height: 883px; transition-delay: .05s; }
.vt-band--crew .vt-band__img            { margin-top: -7151px; }

/* Column cards: y=8034..8626, h=592 */
.vt-band--col-cards       { height: 592px; }
.vt-band--col-cards .vt-band__img       { margin-top: -8034px; }

/* ────────────────────────────────────────────────────────────
   Strength band — composite of laptop photo + strength.svg
   ──────────────────────────────────────────────────────────── */
.vt-band--strength {
  width: 1440px; height: 1036px;
  margin: 0 auto; overflow: hidden;
  position: relative; z-index: 1;
  background: var(--paper);
}
.vt-band--strength .vt-strength-laptop {
  position: absolute; left: 476px; top: 94px;
  width: 944px; height: 848px;
  object-fit: cover;
  z-index: 0; pointer-events: none;
}
.vt-band--strength .vt-strength-art {
  position: absolute; left: 20px; top: 94px;
  width: 1400px; height: 848px;
  z-index: 1; pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   Overlay layer (positioned on top of all bands)
   ──────────────────────────────────────────────────────────── */
.vt-overlays {
  position: absolute;
  left: 0; top: 0;
  width: 1440px;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Re-enable pointer events for the actual interactive items */
.vt-overlays > a,
.vt-overlays > .vt-overlay { pointer-events: auto; }

/* Common overlay base */
.vt-ov { position: absolute; }

/* Corner triangle helper */
.vt-ov--corner {
  width: 160px; height: 160px; border-radius: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ── (Mission corner removed — rebuilt section has its own MORE button) */

/* ── Solution cards (5 navy bars) — relative to .vt-body--upper (starts at SVG y=1704) */
.vt-ov--sol-card { width: 640px; height: 144px; border-radius: 24px; }
.vt-ov--sol-card-1 { left:  82px; top:  539px; }
.vt-ov--sol-card-2 { left:  82px; top:  703px; }
.vt-ov--sol-card-3 { left: 720px; top: 1219px; }
.vt-ov--sol-card-4 { left: 720px; top: 1383px; }
.vt-ov--sol-card-5 { left:  80px; top: 1899px; }

/* ── Solution CTA pill */
.vt-ov--sol-cta { left: 420px; top: 2163px; width: 601px; height: 120px; border-radius: 60px; }

/* ── (Service bullets removed — rebuilt section has its own clickable cards) */

/* ── Case industry cards (8 total: 4 + 3 + 1 MORE) — relative to .vt-body--lower (starts at SVG y=5091) */
.vt-ov--case-card { width: 334px; height: 334px; border-radius: 4px; }

.vt-ov--case-r1-1 { left:    7.5px; top: 254.5px; }
.vt-ov--case-r1-2 { left:  362.5px; top: 254.5px; }
.vt-ov--case-r1-3 { left:  717.5px; top: 254.5px; }
.vt-ov--case-r1-4 { left: 1072.5px; top: 254.5px; }

.vt-ov--case-r2-1 { left:    7.5px; top: 609.5px; }
.vt-ov--case-r2-2 { left:  717.5px; top: 609.5px; }
.vt-ov--case-r2-3 { left: 1072.5px; top: 609.5px; }

/* Case MORE card (yellow) → case-top */
.vt-ov--case-more { left: 362.5px; top: 609.5px; width: 334px; height: 334px; border-radius: 4px; }

/* ── Strength corner triangle → about */
.vt-ov--strength-corner { left: 522px; top: 1780px; }

/* ── Crew corner triangle → members */
.vt-ov--crew-corner { left: 1257px; top: 2783px; }

/* ── Column cards (3) */
.vt-ov--col-card { width: 300px; height: 360px; border-radius: 12px; top: 3103px; }
.vt-ov--col-card-1 { left:  413px; }
.vt-ov--col-card-2 { left:  728px; }
.vt-ov--col-card-3 { left: 1043px; }

/* Column MORE corner triangle → column */
.vt-ov--col-corner { left: 1258px; top: 3375px; }