/* =====================================================================
   STUDIO PRODUCTION SERVICES — page-specific styles
   (studio-production-services.html)

   Reuses tokens + chrome from styles.css: :root vars (--grad, --navh,
   --muted, --ease), .mp-sec / .mp-sec__inner / .mp-kicker / .mp-title /
   .mp-grad / .mp-lead__body, the .mp-tier package cards, .mp-stat hero
   stats, .nh-btn buttons, and the sitewide .wd-cta. The shared centered
   header pattern from website-design.css is re-declared locally as
   .sps-head so this page does not depend on css/website-design.css.

   Everything new is namespaced .sps-* so it can never leak into another
   page or collide with the legacy .mp-* rules in styles.css.
   ===================================================================== */

/* ---- breathing room: each full-height band clears the fixed nav and
       vertically centres its content (matches .wd-* page rhythm) ---- */
.sps-band{padding-top:calc(var(--navh) + 1.5vh);padding-bottom:3vh}

/* ---- shared centered section header (local copy of the wd-head pattern) ---- */
.sps-head{text-align:center;max-width:48rem;margin:0 auto clamp(1rem,2.4vh,2rem)}
.sps-head .mp-kicker{margin-left:auto;margin-right:auto}
.sps-head__title{font-size:clamp(1.7rem,3.6vw,3rem);margin-bottom:.5rem}
.sps-head__sub{font-size:clamp(.84rem,1.25vw,1rem);line-height:1.6;color:var(--muted);font-weight:300;margin:0 auto;max-width:42rem}

/* small leading icon for nh buttons that carry an svg */
.nh-btn .sps-btn-ico{width:16px;height:16px;margin-right:.1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   1 · HERO  (sits over the reused .nhero / .mhero scaffold)
   We only add the value-prop chip row beneath the existing CTA buttons.
   ===================================================================== */
.sps-hero__prop{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.6rem;list-style:none;padding:0;
  max-width:30rem}
.sps-hero__prop li{display:inline-flex;align-items:center;gap:.45rem;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:#bdb6cf}
.sps-hero__prop li svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:#ff8ac8;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,46,154,.45))}

/* =====================================================================
   2 · SUB-SERVICES BREAKDOWN — the full studio catalog grid
   ===================================================================== */
.sps-svc__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));
  gap:clamp(.8rem,1.6vw,1.3rem)}
.sps-svc{position:relative;display:flex;flex-direction:column;padding:clamp(1.1rem,1.8vw,1.5rem);
  border-radius:15px;border:1px solid rgba(168,85,247,.18);
  background:linear-gradient(160deg,rgba(22,16,40,.6),rgba(10,8,20,.45));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.sps-svc::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:2px 2px 0 0;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.sps-svc:hover{transform:translateY(-5px);border-color:rgba(255,46,154,.4);
  box-shadow:0 26px 56px -26px rgba(255,46,154,.45)}
.sps-svc:hover::before{transform:scaleX(1)}
.sps-svc__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:.85rem;
  border:1px solid rgba(168,85,247,.34);background:linear-gradient(150deg,rgba(168,85,247,.22),rgba(255,46,154,.08));
  color:#ff8ac8;box-shadow:inset 0 0 14px -4px rgba(168,85,247,.6)}
.sps-svc__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sps-svc__tag{display:block;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#a855f7;margin-bottom:.4rem}
.sps-svc__h{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .45rem;text-transform:uppercase;letter-spacing:.03em}
.sps-svc__p{font-size:.8rem;line-height:1.6;color:#9a93b3;margin:0 0 .9rem}
.sps-svc__list{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.sps-svc__list li{font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#cbbcff;
  padding:.26rem .55rem;border-radius:6px;border:1px solid rgba(168,85,247,.26);background:rgba(168,85,247,.07)}

/* =====================================================================
   3 · PROCESS — numbered glass step rail
   ===================================================================== */
.sps-proc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));
  gap:clamp(.8rem,1.6vw,1.3rem);counter-reset:sps-step}
.sps-step{position:relative;padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1.1rem,1.8vw,1.4rem) clamp(1.1rem,1.8vw,1.4rem);
  border-radius:15px;border:1px solid rgba(168,85,247,.16);
  background:linear-gradient(165deg,rgba(20,15,38,.55),rgba(10,8,20,.4));
  transition:transform .35s var(--ease),border-color .35s}
.sps-step:hover{transform:translateY(-4px);border-color:rgba(255,46,154,.36)}
.sps-step__no{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:.85rem;
  font-size:.95rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,rgba(255,46,154,.16),rgba(91,139,255,.14));
  border:1px solid rgba(168,85,247,.4);box-shadow:inset 0 0 16px -5px rgba(168,85,247,.65)}
.sps-step__h{font-size:.92rem;font-weight:600;color:#fff;margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.05em}
.sps-step__p{font-size:.78rem;line-height:1.6;color:#9a93b3;margin:0}
.sps-proc__note{display:flex;align-items:center;justify-content:center;gap:.55rem;text-align:center;
  max-width:46rem;margin:clamp(1.2rem,2.4vh,2rem) auto 0;font-size:.8rem;line-height:1.5;color:#bdb6cf;font-weight:300}
.sps-proc__note svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:#7CFFB2;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   4 · WHY SOVEREIGN ROW / DELIVERABLES — split layout
   ===================================================================== */
.sps-why__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.sps-why__copy .mp-title{margin-bottom:.9rem}
.sps-why__body{font-size:clamp(.86rem,1.3vw,1rem);line-height:1.7;color:var(--muted);font-weight:300;margin:0 0 1.4rem;max-width:30rem}
.sps-why__points{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.85rem;max-width:32rem}
.sps-why__point{display:flex;align-items:flex-start;gap:.7rem;font-size:.84rem;line-height:1.55;color:#cdc7dc}
.sps-why__point b{color:#fff;font-weight:600}
.sps-why__pico{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;flex:0 0 auto;margin-top:.05rem;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.1);color:#d6a3ff}
.sps-why__pico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* deliverables panel */
.sps-deliver{position:relative;border-radius:18px;padding:clamp(1.3rem,2.4vw,2rem);
  border:1px solid rgba(168,85,247,.24);
  background:linear-gradient(165deg,rgba(20,15,38,.7),rgba(10,8,20,.6));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 34px 78px -34px rgba(120,60,255,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.sps-deliver__h{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 1.1rem}
.sps-deliver__list{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.sps-deliver__list li{display:flex;align-items:center;gap:.55rem;font-size:.78rem;line-height:1.4;color:#cdc7dc}
.sps-deliver__list svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:#b9a3ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sps-deliver__rows{display:grid;gap:.7rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.1)}
.sps-deliver__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sps-deliver__row span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#9a93b3;font-weight:600}
.sps-deliver__row b{font-size:.86rem;font-weight:600;color:#fff;text-align:right}
.sps-deliver__row b em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   5 · PACKAGES — lead + assurance copy around the reused .mp-tier grid
   ===================================================================== */
.sps-price__assure{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:0 auto 1.4rem;
  font-size:.78rem;color:#bdb6cf;font-weight:300;max-width:40rem}
.sps-price__assure svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#7CFFB2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sps-price__help{display:block;text-align:center;margin-top:1.2rem;font-size:.8rem;font-weight:500;color:#cbb6ff;
  text-decoration:none;transition:color .25s}
.sps-price__help span{display:inline-block;transition:transform .25s var(--ease)}
.sps-price__help:hover{color:#fff}
.sps-price__help:hover span{transform:translateX(4px)}

/* =====================================================================
   6 · FAQ — accordion-free disclosure list
   ===================================================================== */
.sps-faq{max-width:52rem;margin:0 auto;display:grid;gap:.7rem}
.sps-faq__item{border:1px solid rgba(168,85,247,.18);border-radius:13px;overflow:hidden;
  background:linear-gradient(165deg,rgba(20,15,38,.5),rgba(10,8,20,.38));transition:border-color .3s}
.sps-faq__item[open]{border-color:rgba(255,46,154,.4)}
.sps-faq__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;
  padding:clamp(.95rem,1.7vw,1.25rem) clamp(1.1rem,2vw,1.5rem);
  font-size:clamp(.88rem,1.3vw,1rem);font-weight:600;color:#fff}
.sps-faq__q::-webkit-details-marker{display:none}
.sps-faq__q::after{content:"";width:11px;height:11px;flex:0 0 auto;border-right:2px solid #c98bff;border-bottom:2px solid #c98bff;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.sps-faq__item[open] .sps-faq__q::after{transform:rotate(-135deg) translateY(0)}
.sps-faq__a{margin:0;padding:0 clamp(1.1rem,2vw,1.5rem) clamp(1.1rem,1.9vw,1.35rem);
  font-size:.86rem;line-height:1.7;color:#a6a3bb}

/* =====================================================================
   7 · RELATED SERVICES — cross-link cards
   ===================================================================== */
.sps-rel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:clamp(.8rem,1.6vw,1.3rem)}
.sps-rel{position:relative;display:flex;flex-direction:column;text-decoration:none;
  padding:clamp(1.2rem,2vw,1.6rem);border-radius:15px;border:1px solid rgba(168,85,247,.18);
  background:linear-gradient(160deg,rgba(22,16,40,.55),rgba(10,8,20,.42));
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.sps-rel:hover{transform:translateY(-5px);border-color:rgba(255,46,154,.42);box-shadow:0 26px 56px -26px rgba(255,46,154,.45)}
.sps-rel__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;margin-bottom:.8rem;
  border:1px solid rgba(168,85,247,.34);background:rgba(168,85,247,.1);color:#ff8ac8}
.sps-rel__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sps-rel__h{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.03em}
.sps-rel__p{font-size:.78rem;line-height:1.55;color:#9a93b3;margin:0 0 1rem}
.sps-rel__go{margin-top:auto;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#cbb6ff;
  display:inline-flex;align-items:center;gap:.45rem}
.sps-rel__go i{font-style:normal;font-size:1.1em;transition:transform .3s var(--ease)}
.sps-rel:hover .sps-rel__go i{transform:translateX(4px)}

/* =====================================================================
   8 · ambient generic visual band (NOT captioned as our studio)
   ===================================================================== */
.sps-amb{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(150px,22vh,230px);
  border:1px solid rgba(168,85,247,.2)}
.sps-amb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.62)}
.sps-amb__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,46,154,.18),transparent 45%),
             linear-gradient(0deg,rgba(8,6,18,.85),rgba(8,6,18,.25))}
.sps-amb__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,2.4vw,1.7rem);z-index:2}
.sps-amb__cap b{display:block;font-size:clamp(1rem,2vw,1.4rem);font-weight:300;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.sps-amb__cap b em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.sps-amb__cap span{display:block;margin-top:.35rem;font-size:.74rem;color:#cdc7dc;font-weight:300}

/* =====================================================================
   SIGNATURE · THE MIX — scroll-driven mixing console
   -------------------------------------------------------------------
   data-scrub on .sps-desk sets --p (0..1) as the section crosses view.
   Progressive enhancement model:
     • NO JS  -> .is-in is never added; faders sit at their finished
                 --rest level and the playhead rests at the end. The
                 console reads as a fully mixed master (static truth).
     • JS on  -> anim.js adds .is-in and rides --p; faders sweep from a
                 low floor up to --rest and the playhead travels L→R.
     • reduced-motion -> anim.js adds .is-in with --p:0, so we force the
                 finished state below regardless of --p (no sweep).
   All motion is transform/opacity only (scaleY fills, translate caps +
   playhead). No height animation, no layout thrash.
   ===================================================================== */
.sps-mix .sps-head{margin-bottom:clamp(1.2rem,2.6vh,2.2rem)}

.sps-desk{position:relative;max-width:60rem;margin:0 auto;
  padding:clamp(1.1rem,2.4vw,2rem) clamp(1rem,2.4vw,2.2rem) clamp(1rem,2vw,1.6rem);
  border-radius:20px;border:1px solid rgba(168,85,247,.26);
  background:linear-gradient(165deg,rgba(20,15,38,.78),rgba(9,7,18,.66));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -40px rgba(120,60,255,.6),inset 0 1px 0 rgba(255,255,255,.06)}

/* ---- waveform + playhead strip ---- */
/* inline-size container so the playhead can travel the full strip width
   using cqw (compositor-only translate, no layout reads). */
.sps-wave{position:relative;container-type:inline-size;
  height:clamp(46px,8vh,72px);border-radius:11px;overflow:hidden;
  margin-bottom:clamp(1rem,2.4vh,1.7rem);border:1px solid rgba(168,85,247,.18);
  background:rgba(255,255,255,.03)}
/* dim baseline waveform (the "un-played" signal) */
.sps-wave__bars{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    rgba(150,120,210,.34) 0 2px, transparent 2px 7px);
  -webkit-mask-image:
    radial-gradient(120% 78% at 50% 50%, #000 38%, transparent 100%);
          mask-image:
    radial-gradient(120% 78% at 50% 50%, #000 38%, transparent 100%)}
/* lit waveform — revealed left→right via clip.
   default (no JS): fully lit = finished master. */
.sps-wave__bars--lit{
  background-image:repeating-linear-gradient(90deg,
    #ff2e9a 0 2px, transparent 2px 7px);
  filter:drop-shadow(0 0 5px rgba(255,46,154,.55));
  clip-path:inset(0 0 0 0)}
/* playhead line — default (no JS) rests at the far right (end of track) */
.sps-wave__head{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  box-shadow:0 0 10px 1px rgba(255,255,255,.7);
  transform:translateX(calc(100cqw - 2px))}

/* When JS is active the desk gets .is-in; drive clip + playhead by --pe.
   --pe = eased/amplified progress. A viewport-tall snap section only feeds
   --p ~0.25..0.5, so we remap it into a full 0..1 ride and clamp at 1 so the
   mix lands fully "up" while still on screen. */
.sps-desk.is-in{--pe:clamp(0, calc((var(--p,1) - 0.16) * 4.2), 1)}
.sps-desk.is-in .sps-wave__bars--lit{clip-path:inset(0 calc((1 - var(--pe)) * 100%) 0 0)}
.sps-desk.is-in .sps-wave__head{transform:translateX(calc(var(--pe) * (100cqw - 2px)))}

/* ---- channel faders ---- */
.sps-chan{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(7,1fr);gap:clamp(.5rem,1.4vw,1.1rem);align-items:end}
.sps-fader{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0}
.sps-fader__val{font-size:.5rem;letter-spacing:.08em;font-weight:600;color:#9a93b3;
  font-variant-numeric:tabular-nums;opacity:.85}
.sps-fader__track{position:relative;container-type:size;
  width:clamp(10px,1.6vw,16px);height:clamp(96px,17vh,150px);
  border-radius:9px;overflow:hidden;
  border:1px solid rgba(168,85,247,.2);background:rgba(255,255,255,.04);
  display:block}
/* fill grows from the bottom via scaleY — finished level by default */
.sps-fader__fill{position:absolute;inset:0;border-radius:inherit;
  transform-origin:50% 100%;transform:scaleY(var(--rest,.6));
  background:linear-gradient(0deg,#ff2e9a,#a855f7,#2d7fff);
  box-shadow:0 0 16px rgba(255,46,154,.45)}
/* the knob/cap rides on top of the fill at the current level (cqh = track height) */
.sps-fader__cap{position:absolute;left:50%;bottom:0;z-index:2;
  width:calc(100% + 8px);height:7px;border-radius:3px;background:#0c0916;
  border:1px solid rgba(255,255,255,.55);box-shadow:0 0 8px rgba(168,85,247,.5);
  transform:translate(-50%,50%) translateY(calc(var(--rest,.6) * -100cqh))}
.sps-fader__name{font-size:.5rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:#cbbcff;text-align:center;line-height:1.2;
  min-height:1.8em;display:flex;align-items:center;justify-content:center}
.sps-fader--master .sps-fader__fill{box-shadow:0 0 22px rgba(45,127,255,.6),0 0 14px rgba(255,46,154,.4)}
.sps-fader--master .sps-fader__name{color:#fff;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* JS-active sweep: ride each fader from a low floor up to --rest as --p climbs.
   level = floor + (rest - floor) * p.  anim.js eases --p visually through the
   viewport crossing; cap uses cqh so it tracks the fill top at any breakpoint. */
.sps-desk.is-in .sps-fader__fill{
  transform:scaleY(calc(0.06 + (var(--rest,.6) - 0.06) * var(--pe)))}
.sps-desk.is-in .sps-fader__cap{
  transform:translate(-50%,50%)
    translateY(calc((0.06 + (var(--rest,.6) - 0.06) * var(--pe)) * -100cqh))}

/* ---- caption ---- */
.sps-desk__cap{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:clamp(1rem,2.2vh,1.6rem) 0 0;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700}
.sps-desk__from{color:#9a93b3}
.sps-desk__arrow{color:#c98bff;font-size:.9rem}
.sps-desk__to{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   PARALLAX ENRICHMENT (decorative, transform/opacity only)
   These read --p from anim.js data-scrub. Each has a complete static
   look with no JS (no transform applied until .is-in is present).
   ===================================================================== */
/* deliverables glass panel gently lifts as it crosses the viewport */
.sps-deliver.is-in{transform:translateY(calc((var(--p,.5) - .5) * -22px))}
/* process sign-off note drifts up + settles in */
.sps-proc__note.is-in{
  transform:translateY(calc((1 - var(--p,1)) * 16px));
  opacity:calc(.35 + var(--p,1) * .65)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .sps-why__grid{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2.4rem)}
}
/* mixing desk: the 7-channel row stays comfortable on tablet, then becomes a
   tidy 2-row grid on phones so faders never crush. */
@media (max-width:640px){
  .sps-chan{grid-template-columns:repeat(4,1fr);gap:.7rem .5rem;
    row-gap:clamp(1.1rem,3.4vh,1.6rem)}
  .sps-fader__track{height:clamp(80px,16vh,120px)}
  /* cap uses cqh, so it tracks the shorter track automatically — no override needed */
}
@media (max-width:560px){
  .sps-deliver__list{grid-template-columns:1fr}
  .sps-hero__prop{gap:.45rem .7rem}
}
@media (max-width:380px){
  .sps-chan{grid-template-columns:repeat(3,1fr)}
}

/* reduced motion: kill the decorative hover lifts on already-static content
   (anim.js handles reveal fallbacks; this is belt-and-suspenders) */
@media (prefers-reduced-motion:reduce){
  .sps-svc,.sps-step,.sps-rel,.sps-svc::before,.sps-price__help span,.sps-rel__go i{transition:none}

  /* The mixing desk must read as a FINISHED master with motion off.
     anim.js adds .is-in with --p:0 under reduced motion, which would otherwise
     drop everything to the floor — so force the resting/finished state and
     strip all parallax. Content stays fully legible and meaningful. */
  .sps-desk.is-in .sps-fader__fill{transform:scaleY(var(--rest,.6))}
  .sps-desk.is-in .sps-fader__cap,
  .sps-fader__cap{transform:translate(-50%,50%) translateY(calc(var(--rest,.6) * -100cqh))}
  .sps-desk.is-in .sps-wave__bars--lit{clip-path:inset(0 0 0 0)}
  .sps-desk.is-in .sps-wave__head{transform:translateX(calc(100cqw - 2px))}
  .sps-deliver.is-in,.sps-proc__note.is-in{transform:none;opacity:1}
}