/* ============================================================
   STACK — isometric scroll narrative (v2) + THE STACK grid
   ============================================================ */

.stack { background: var(--ink-800); }
.stack__pin { height: 100svh; position: relative; overflow: clip; }

.iso { position: absolute; inset: 0; display: grid; place-items: center; }

/* faint engineering grid backdrop */
.iso__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(99,157,205,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,157,205,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 48%, #000 34%, transparent 76%);
          mask-image: radial-gradient(120% 90% at 50% 48%, #000 34%, transparent 76%);
}

/* coordinate space — sized off width but kept short enough to never clip */
.iso__scene {
  position: absolute; left: 50%; top: 50%;
  width: min(860px, 90vw);
  aspect-ratio: 1280 / 800;
  transform: translate(-50%, -50%);
}
.iso__layer { position: absolute; inset: 0; will-change: transform, opacity; }
.iso__layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }

/* ---- anchored-on-chain seal (beat 03) ---- */
.iso__seal { position: absolute; left: 42%; top: 35%; transform: translate(-50%, -50%); z-index: 9; display: grid; place-items: center; pointer-events: none; }
.iso__seal-ico { font-size: clamp(64px, 8vw, 110px); line-height: 1; color: var(--frame-conduit); font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 48; filter: drop-shadow(0 0 26px rgba(99,157,205,.85)); }
.iso__seal-ring { position: absolute; width: clamp(86px, 10vw, 150px); aspect-ratio: 1; border: 2px solid var(--frame-conduit); border-radius: 50%; }

/* ---- unified message block (centred below the diagram) ---- */
.iso__msg {
  position: absolute; left: 50%; bottom: clamp(34px, 7vh, 80px);
  transform: translateX(-50%); z-index: 18; text-align: center;
  width: min(820px, 90vw); display: grid; gap: clamp(12px, 1.6vw, 18px); justify-items: center;
}
.iso__msg-head { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 18px); flex-wrap: wrap; max-width: 100%; }
.iso__msg-no {
  flex: none; width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px);
  display: grid; place-items: center; background: var(--frame-deepwater); color: #fff;
  font-family: var(--font-condensed); font-weight: 600; font-size: clamp(18px, 2vw, 24px);
}
.iso__msg-title {
  min-width: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.5rem);
}
.iso__msg-cap {
  font-family: var(--font-body); font-size: clamp(1.02rem, 1.45vw, 1.35rem);
  line-height: 1.45; color: var(--frame-coldroll); max-width: 46ch; margin: 0;
}
.iso__msg-cap b { color: #fff; font-weight: 600; }

/* ---- opening header ---- */
.iso__intro {
  position: absolute; left: 50%; top: clamp(88px, 13vh, 136px);
  transform: translateX(-50%); text-align: center; z-index: 16;
  display: grid; gap: 16px; justify-items: center; width: max-content; max-width: 92vw;
}

/* ---- bold THE STACK lockup (resolve) ---- */
.iso__lockup {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 18; text-align: center; pointer-events: none; display: grid; gap: 18px; justify-items: center;
}
.iso__lockup-eyebrow {
  font-family: var(--font-condensed); font-weight: 600; font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .34em; text-transform: uppercase; color: var(--frame-conduit);
}
.iso__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .9; color: #fff; white-space: nowrap;
  font-size: clamp(2.8rem, 7.4vw, 6rem); text-shadow: 0 4px 40px rgba(7,10,13,.7);
}
.iso__lockup-sub {
  font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: var(--frame-coldroll); letter-spacing: .01em;
}

/* ---- slab labels (ride the iso plane) ---- */
.slab__lab {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; white-space: nowrap; pointer-events: none; color: #fff;
  font-size: clamp(14px, 1.5vw, 19px);
  transform: translate(-50%, -50%) rotate(-26.57deg) skewX(26.57deg) scaleY(.92);
  transform-origin: center; opacity: 0; text-shadow: 0 1px 12px rgba(7,10,13,.6);
}
.slab__lab--muted { color: var(--frame-coldroll); }
.slab__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(130px, 15vw, 200px); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(99,157,205,.8)) drop-shadow(0 2px 10px rgba(7,10,13,.85));
}
.slab__mark svg { width: 100%; height: auto; display: block; }
.slab__mark svg path { fill: #fff; }
.slab__sub {
  position: absolute; left: 50%; top: 50%; transform: translateX(-50%);
  font-family: var(--font-condensed); font-weight: 600; font-size: 14px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--frame-conduit);
  white-space: nowrap; opacity: 0; pointer-events: none;
}
.slab__sub--apps {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.005em; color: #fff; font-size: clamp(1.3rem, 2.5vw, 2.15rem);
}

/* ---- network rail nodes ---- */
.iso__nodes { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.node { position: absolute; transform: translate(-50%, -50%) scale(.55); display: grid; place-items: center; opacity: 0; }
.node__el {
  display: grid; place-items: center;
  width: clamp(128px, 13vw, 178px); min-height: clamp(54px, 5.8vw, 74px); padding: 12px 18px;
  background: linear-gradient(155deg, rgba(28,62,93,.6), rgba(13,17,22,.94));
  box-shadow: inset 0 0 0 1px rgba(99,157,205,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  font-family: var(--font-condensed); font-weight: 600; font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: .09em; text-transform: uppercase; color: var(--frame-clearspan); text-align: center;
}

/* ============================================================
   THE STACK — feature grid (own section, normal flow)
   ============================================================ */
.board-sec { background: var(--ink-900); padding: clamp(80px, 11vw, 170px) 0; position: relative; }
.board-sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,157,205,.35), transparent);
}
.board__intro { display: grid; gap: 22px; max-width: 60ch; margin-bottom: clamp(40px, 5vw, 70px); }

.board__live {
  justify-self: start; display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-condensed); font-weight: 600; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--frame-clearspan);
  border: 1px solid var(--line-3); padding: 10px 18px;
}
.board__live i {
  width: 8px; height: 8px; border-radius: 999px; background: #35B58C;
  animation: boardLivePulse 2.4s var(--ease-standard) infinite;
}
@keyframes boardLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,181,140,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(53,181,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,181,140,0); }
}

/* three platform columns — dark Deepwater head, white body, stat foot */
.pcols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px); align-items: stretch;
}
.pcol {
  display: flex; flex-direction: column; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.pcol__head {
  position: relative; display: grid; gap: 12px; color: #fff;
  background: linear-gradient(160deg, #14538a 0%, var(--frame-deepwater) 55%, #0b3d68 100%);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px);
  min-height: clamp(170px, 15vw, 210px); align-content: start;
}
.pcol__head::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 3px;
  background: var(--frame-conduit);
}
.pcol__eyebrow {
  font-family: var(--font-condensed); font-weight: 600; font-size: 14px;
  letter-spacing: .26em; text-transform: uppercase; color: #A9C8E2;
}
.pcol__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.015em; line-height: .95; color: #fff;
  font-size: clamp(1.9rem, 2.5vw, 2.5rem);
}
.pcol__sub {
  margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.5; color: rgba(255,255,255,.84); max-width: 30ch;
}
.pcol__body { display: flex; flex-direction: column; flex: 1; }
.prow {
  flex: 1; display: grid; gap: 7px; align-content: start;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
  border-bottom: 1px solid rgba(17,20,24,.08);
  transition: background .3s var(--ease-standard);
}
.prow:last-child { border-bottom: 0; }
.prow:hover { background: rgba(15,76,129,.045); }
.prow__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--frame-ironworks);
  font-size: clamp(1.1rem, 1.25vw, 1.3rem); line-height: 1.02;
}
.prow__desc {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
  color: var(--frame-forge);
}
.pcol__foot {
  background: rgba(15,76,129,.07); border-top: 1px solid rgba(17,20,24,.08);
  padding: 15px clamp(20px, 2vw, 28px) 17px;
  font-family: var(--font-condensed); font-weight: 600; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--frame-deepwater);
}

/* ---- mobile / reduced motion ---- */
.stack__static { display: none; }
@media (max-width: 880px) {
  .stack__pin { height: auto; min-height: 0; overflow: visible; }
  .iso { display: none; }
  .stack__static {
    display: grid; gap: 18px;
    padding: clamp(76px, 17vw, 120px) var(--gutter) clamp(8px, 3vw, 24px);
  }
  .board-sec { padding-top: clamp(40px, 9vw, 70px); }
}

/* platform columns stack below tablet width */
@media (max-width: 1024px) {
  .pcols { grid-template-columns: 1fr; gap: 20px; }
  .pcol__head { min-height: 0; }
  .pcol__title { font-size: 1.8rem; }
  .prow { padding: 16px 20px; }
  .pcol__foot { padding: 13px 20px 15px; }
}

/* ============================================================
   WHAT FRAME IS NOT — closing statement of 3.0
   ============================================================ */
.stack__not {
  max-width: 62ch;
  padding: clamp(56px, 7vw, 104px) 0 clamp(20px, 2.5vw, 36px);
  font-size: clamp(1.2rem, 1.6vw, 1.55rem); line-height: 1.55;
  color: var(--frame-galvanized);
}
.stack__not strong { color: var(--frame-clearspan); }