/* ── v8 · two scroll-driven sections ──────────────────────────────────────
   HOW WE DO IT   — structure from arrakis.tech's "command center" band:
                    a 400vh track, a pinned centre, and five panels that
                    alternate left/right and light one at a time.
                    Their centre is a Rive <canvas>, which a capture cannot
                    take, so the visual here is our own SVG.
   THE WORK       — structure from the Wispr Flow capture's testimonial band
                    (.testiv2_height / _wrap / _card): a tall track, a sticky
                    wrap, and absolutely-stacked cards that peel in 3D.
   Both drivers are re-implemented in sections.js — stripped JS never boots.
   ───────────────────────────────────────────────────────────────────────── */

/* ════ HOW WE DO IT ═══════════════════════════════════════════════════ */
.nq-how__track { position: relative; height: 420vh; }
.nq-how__pin   { position: sticky; top: 66px; height: calc(100vh - 66px);
                 display: flex; align-items: center; }
.nq-how__stage { position: relative; display: grid; width: 100%;
                 grid-template-columns: 1fr 46% 1fr;
                 grid-template-rows: repeat(5, auto); align-items: center; }

/* the pinned centre, with corner ticks rather than a full border */
.nq-how__centre { position: relative; grid-column: 2; grid-row: 1 / -1; padding: 24px;
                  display: flex; align-items: center; justify-content: center; }
.nq-how__centre::before, .nq-how__centre::after { content: ""; position: absolute;
                  left: 0; right: 0; height: 14px; pointer-events: none; }
.nq-how__centre::before { top: 0;    border-top: 1px solid #373737; }
.nq-how__centre::after  { bottom: 0; border-bottom: 1px solid #373737; }
.nq-how__rail { position: absolute; top: 0; bottom: 0; width: 1px; background: #373737; }
.nq-how__rail--l { left: 0; } .nq-how__rail--r { right: 0; }
.nq-how__art { width: 100%; max-width: 460px; aspect-ratio: 634 / 760; }

/* the five panels */
.nq-how__panel { position: relative; padding: 8px 20px;
                 transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                             transform .55s cubic-bezier(.22,.61,.36,1);
                 /* hidden until its step arrives — it appears, it does not just brighten */
                 opacity: 0; transform: translateY(26px); pointer-events: none; }
.nq-how__panel.is-on   { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nq-how__panel.is-past { opacity: .22; transform: translateY(0); }
.nq-how__panel::before, .nq-how__panel::after { content: ""; position: absolute;
                 left: 0; width: 16px; height: 16px; border-color: #373737; }
.nq-how__panel::before { top: 0;    border-top: 1px solid; border-left: 1px solid; }
.nq-how__panel::after  { bottom: 0; border-bottom: 1px solid; border-left: 1px solid; }
.nq-how__panel.is-on::before, .nq-how__panel.is-on::after { border-color: #C3EBA6; }
@media (min-width:1024px){ .nq-how__panel--r { padding-right: 118px; } }
.nq-how__step  { font-size: 12px; font-weight: 700; letter-spacing: .18em;
                 text-transform: uppercase; color: #C3EBA6; }
.nq-how__t     { font-family: "EB Garamond", Georgia, serif; font-weight: 500;
                 font-size: 23px; line-height: 1.15; color: #f5f3ef; margin-top: 6px; }
.nq-how__b     { font-size: 13.5px; line-height: 1.45; color: rgba(245,243,239,.62);
                 margin-top: 6px; max-width: 32ch; }

@media (max-width: 1023px){
  .nq-how__track { height: auto; }
  .nq-how__pin   { position: static; height: auto; display: block; padding: 8px 0 0; }
  .nq-how__stage { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
  .nq-how__centre{ grid-column: 1; grid-row: auto; padding: 8px 0 28px; }
  .nq-how__rail  { display: none; }
  .nq-how__panel { opacity: 1; transform: none; border-top: 1px solid #373737; padding: 22px 0; }
  .nq-how__panel::before, .nq-how__panel::after { display: none; }
  .nq-how__b     { max-width: none; }
}

/* ════ THE WORK — the peeling card stack ══════════════════════════════ */
.nq-stack__track { position: relative; height: 460vh; }
.nq-stack__pin   { position: sticky; top: 66px; height: calc(100vh - 66px);
                   display: flex; align-items: center; justify-content: center;
                   perspective: 1900px; }
/* the cards travel THROUGH a clipped frame: one leaves by the top edge while the
   next arrives from the bottom, together. Any exit that merely uncovers a
   stationary card behind it reveals that card's middle, which reads as a
   mistake — clipping is what makes the motion legible. */
.nq-stack__frame { position: relative; width: min(92vw, 940px); height: min(76vh, 470px);
                   overflow: hidden; transform-style: preserve-3d; }
.nq-stack__card  { position: absolute; inset: 0; width: 100%;
                   transform-style: preserve-3d; backface-visibility: hidden;
                   will-change: transform, opacity;
                   background: #1c1c1c; border: 1px solid #373737; border-radius: 26px;
                   overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; }
.nq-stack__body  { padding: 44px 44px 40px; display: flex; flex-direction: column;
                   justify-content: center; }
.nq-stack__k     { font-size: 12px; font-weight: 700; letter-spacing: .2em;
                   text-transform: uppercase; color: #C3EBA6; }
.nq-stack__t     { font-family: "EB Garamond", Georgia, serif; font-weight: 500;
                   font-size: clamp(25px, 2.6vw, 36px); line-height: 1.12; color: #fff; margin-top: 16px; }
.nq-stack__p     { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.58); margin-top: 18px; }
.nq-stack__lead  { color: rgba(195,235,166,.92); }
.nq-stack__art   { position: relative; overflow: hidden; }
.nq-stack__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nq-stack__count { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
                   font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
                   color: rgba(245,243,239,.45); }

@media (max-width: 900px){
  .nq-stack__track { height: auto; }
  .nq-stack__pin   { position: static; height: auto; display: flex; flex-direction: column;
                     gap: 18px; perspective: none; padding-bottom: 8px; }
  .nq-stack__frame { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 18px; width: 100%; }
  .nq-stack__card  { position: relative; inset: auto; width: 100%; grid-template-columns: 1fr;
                     transform: none !important; opacity: 1 !important; }
  .nq-stack__art   { height: 190px; order: -1; }
  .nq-stack__count { display: none; }
}