/* ==========================================================================
   Stockpile Terrain Awareness (solutions-stockpile.html). Prefix sp-
   Sits on home-2026.css (tokens, .hp-shell, .hp-chip, .hp-gradient, the
   .hp-how block, .hp-btn-*, .hp-cta) and on solutions-pas-2026.css, whose
   components the body uses as they are: the problem list, the numbered screen
   notes, the outcomes, the FAQ and the bridge card into the CTA. This file
   holds the hero and the few additions the stockpile page needs on top.
   Designed on the "Stockpile Terrain Awareness Page" canvas, October 2026
   (hero: round 5; body: round 6 A).
   ========================================================================== */

/* ------------------------------------------------------------- type */
.sp-d1 { margin: 0; font-size: 64px; font-weight: 600; line-height: 1.05; letter-spacing: -2.3px; color: #fff; }
/* The brand gradient shifted up for a navy ground, as on the PAS hero */
.sp-d1 em { display: block; width: fit-content; padding-bottom: 4px; font-style: normal;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 38%, var(--hp-blue-bright) 72%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sp-eyebrow { display: block; margin: 0 0 18px; color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700;
  line-height: 1.6; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.sp-lead { margin: 26px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.62; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ================================================================ HERO */
/* The copy sits on the navy at the left; the cutaway fills the right and
   fades in under it. Numbered markers name the parts of the picture. */
.sp-hero { position: relative; z-index: 0; overflow: hidden; background: var(--hp-deep);
  margin-top: calc(-1 * var(--nv-offset, 80px)); min-height: 780px; display: flex; align-items: flex-end; padding-bottom: 80px; }
.sp-hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(88% 66% at 20% 4%, rgba(7, 110, 232, 0.26) 0%, transparent 62%),
              radial-gradient(66% 56% at 90% 0%, rgba(26, 206, 225, 0.15) 0%, transparent 58%); }
.sp-hero__sentinel { position: absolute; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; }
.sp-hero__in { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--nv-offset, 80px) + 64px); }
.sp-hero__copy { max-width: 600px; }

.sp-cutbox { position: absolute; inset: 0 0 0 24%; z-index: 0; overflow: hidden; container-type: size; }
/* The stage keeps the picture's own shape, so the markers stay on their features at any width */
.sp-stage { position: absolute; right: 0; top: 50%; aspect-ratio: 2688 / 1900;
  width: max(100cqw, calc(100cqh * 2688 / 1900)); transform: translateY(-50%); }
.sp-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Two nested fades, one direction each: left on the box, top and bottom on
   the wrapper. A single three-layer mask with mask-composite did not combine
   reliably in Chrome and left an edge. */
.sp-cutbox--pic { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 18%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 18%, #000 38%); }
.sp-cutbox__fade { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000 22%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000 22%, #000 88%, transparent 100%); }
/* The markers sit in a twin box with the same geometry, above the copy and not faded */
.sp-cutbox--marks { z-index: 2; pointer-events: none; }

.sp-num { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px;
  transform: translate(-13px, -50%); }
.sp-num b { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--hp-cyan); color: #02102f; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 4px rgba(26, 206, 225, 0.25); }
.sp-num span { padding: 5px 10px; border-radius: var(--hp-radius-pill); background: rgba(2, 16, 47, 0.88);
  border: 1px solid rgba(143, 230, 245, 0.35); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sp-num--plain { transform: translate(-50%, -50%); }
.sp-num--plain span { background: rgba(2, 16, 47, 0.7); color: rgba(255, 255, 255, 0.86); font-weight: 500; }

/* ============================================================ BODY */
/* What it solves: the PAS figure, in the blade view's own shape */
.sp-blind { aspect-ratio: 760 / 470; }

/* The product's own screens: a thin device bezel, numbered marks on the picture */
.sp-screen { position: relative; margin: 0; }
.sp-screen__main { position: relative; overflow: hidden; padding: 9px; border-radius: 18px; background: #040a18;
  border: 1px solid rgba(143, 230, 245, 0.22); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5); }
.sp-screen__main > img { display: block; width: 100%; height: auto; border-radius: 9px; }
.sp-marked { position: relative; }
.sp-marked > img { display: block; width: 100%; height: auto; border-radius: 9px; }
.sp-marked .pd-hud__mk { z-index: 2; }

/* The operator: the screen is 4:3, so its notes sit beside it in a column */
.sp-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 48px; }
.pd-hudnotes.sp-notes-col { grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0; }
.pd-hudnotes.sp-notes-col li:first-child { padding-top: 0; border-top: 0; }

/* Operations: a navy section, the wide screen with four notes under it */
.sp-navy { background: var(--hp-deep); padding-bottom: 236px; }
.sp-navy .pd-d2 { color: #fff; }
.sp-navy .pd-lead { color: rgba(226, 236, 247, 0.78); }
.sp-navy .pd-hud__mk { background: var(--hp-cyan); color: #02102f; box-shadow: 0 0 0 4px rgba(26, 206, 225, 0.28); }
.sp-navy .pd-hudnotes li { border-color: rgba(143, 230, 245, 0.16); }
.sp-navy .pd-hudnotes h3 { color: #fff; }
.sp-navy .pd-hudnotes h3 span { color: var(--hp-ice); }
.sp-navy .pd-hudnotes p { color: rgba(226, 236, 247, 0.74); }
.sp-wide { margin-top: 48px; }
.sp-views-note { margin: 28px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; }

/* No-go zones: a bridge. The zones screen straddles the navy section above and
   the white one; only the screen is lifted, the words start below the line. */
.sp-zones { padding-top: 0; }
.sp-zonebridge { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sp-zonebridge .sp-screen { z-index: 2; margin-top: -150px; }
.sp-zonebridge .sp-screen__main { background: #0a1630; box-shadow: 0 30px 70px rgba(4, 19, 73, 0.3); }
.sp-zonebridge__copy { padding-top: 48px; }
.sp-zonebridge__copy .pd-d2 { font-size: 40px; letter-spacing: -1.1px; }
.sp-note { margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pd-rule); color: var(--hp-muted); font-size: 15px; line-height: 1.6; max-width: 50ch; }

/* How it works closes the two views. The no-go bridge leads into it on the same
   white ground, so it carries on rather than opening a new band. */
.sp-how { padding-top: 24px; }

/* The bridge into the CTA carries a related product rather than a case study.
   Its band takes the FAQ's ground, the tint, so the card closes the FAQ and
   carries straight on into the CTA. */
.sp-bridge { background: var(--pd-tint); }
.sp-case .pd-case__img img { object-position: 50% 50%; }

/* ======================================================== RESPONSIVE */
@media (max-width: 1180px) {
  .sp-d1 { font-size: 54px; letter-spacing: -1.8px; }
  .sp-hero__copy { max-width: 500px; }
}

/* The nav goes to its phone layout here. The hero stacks: the picture
   across the top, under the nav, and the copy below it. */
@media (max-width: 1099px) {
  .sp-hero { display: block; min-height: 0; padding-bottom: 64px; }
  .sp-cutbox { position: relative; inset: auto; width: 100%; aspect-ratio: 2688 / 1900; }
  .sp-cutbox--marks { position: absolute; top: 0; left: 0; }
  .sp-cutbox--pic { -webkit-mask-image: none; mask-image: none; }
  .sp-hero__in { padding-top: 8px; }
  .sp-hero__copy { max-width: 640px; }

  .sp-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sp-navy { padding-bottom: 176px; }
  .sp-zonebridge { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sp-zonebridge .sp-screen { margin-top: -110px; }
  .sp-zonebridge__copy { padding-top: 32px; }
}

/* The markers need a wide picture to sit apart. Below this the drawn layer
   carries the picture on its own and the copy explains it. */
@media (max-width: 959px) {
  .sp-cutbox--marks { display: none; }
}

@media (max-width: 640px) {
  /* a square crop keeps the pile, the void and the tunnel large enough to read,
     centred between the tower and the void rather than pinned to the right */
  .sp-cutbox { aspect-ratio: 1 / 1; }
  .sp-stage { right: auto; left: 50%; transform: translate(-60%, -50%); }
  .sp-d1 { font-size: 40px; letter-spacing: -1.3px; }
  .sp-lead { font-size: 16.5px; }
  .sp-acts .hp-btn-primary, .sp-acts .hp-btn-ghost { width: 100%; justify-content: center; }
  .sp-screen__main { padding: 5px; border-radius: 12px; }
  .sp-screen__main > img, .sp-marked > img { border-radius: 7px; }
  .sp-navy { padding-bottom: 136px; }
  .sp-zonebridge .sp-screen { margin-top: -80px; }
  .sp-zonebridge__copy .pd-d2 { font-size: 30px; letter-spacing: -0.8px; }
}

@media (max-width: 400px) {
  .sp-d1 { font-size: 36px; letter-spacing: -1.1px; }
}