/* ═══════════════════════════════════════════════════════════════════════════
   BIZLO homepage: scene player
   Four scenes, each parked on one frame of the flight. A scroll does not scrub
   the footage; it plays the camera move to the next scene, and the foreground
   leaves and arrives in step with that move.

   Two layouts share this markup:
     html.scenes  full-screen scenes, one gesture = one scene (desktop, tablets)
     (default)    a normal stacked page with the scene stills behind each
                  section. Phones, reduced motion, and any failure land here,
                  so the page is always readable even if no script runs.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --e-out:cubic-bezier(.16,.84,.24,1);      /* long, soft landing */
  --e-in:cubic-bezier(.55,0,.78,.24);       /* leaves quickly */
  --amber:#FFB25C; --amber-2:#FFD9A8;
  --mx:0; --my:0;                           /* mouse, -1..1, eased in JS */
}

/* ── Stage: footage and anything glued to it ───────────────────────────── */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b1a33}
.stage-in{position:absolute;inset:0}
.stage img.still,.stage canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.stage canvas{opacity:0}
.stage canvas.on{opacity:1}
/* Sharp 2400px stills sit over the canvas only while a scene is at rest.
   They are the same instant as the canvas frame beneath, so the swap only
   ever reads as the image getting crisper. */
.stage img.still{opacity:0;transition:opacity .35s ease}
.stage img.still.on{opacity:1}
.stage img.still.poster{opacity:1}
.stage img.still.poster.off{opacity:0;transition:opacity .35s ease}

/* Light that belongs to the footage: the little laptop waking up, the sun on
   the peak, the cabin windows. Positioned every frame from the same cover
   maths as the canvas, so they stay on the object they belong to. */
.glow{position:fixed;left:0;top:0;pointer-events:none;opacity:0;
  mix-blend-mode:screen;border-radius:50%;z-index:1}
.glow.laptop{background:radial-gradient(closest-side,rgba(210,230,255,.95),rgba(150,190,255,.45) 45%,transparent 72%)}
.glow.peak{background:radial-gradient(closest-side,rgba(255,244,220,.55),rgba(255,230,190,.18) 55%,transparent 78%)}
.glow.cabin{background:radial-gradient(closest-side,rgba(255,176,84,.62),rgba(255,140,50,.22) 48%,transparent 76%)}
/* Glows are steady. Their brightness follows the camera (set per frame by the
   engine) and never pulses or flickers on its own: a pulsing light on a
   screen reads as a faulty display. */

/* ── Scrims: one per scene, designed against that scene's frame ────────── */
.scrims{position:fixed;inset:0;z-index:2;pointer-events:none}
.scrims > i{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.scrims > i.on{opacity:1}
/* Intro: bright open sky. Darken only behind the logo and copy, keep the
   rest of the sky blue. */
.scrims > i[data-s="0"]{background:
  radial-gradient(ellipse 46% 34% at 50% 44%,rgba(6,16,44,.50),rgba(6,16,44,.22) 55%,transparent 80%),
  linear-gradient(180deg,rgba(4,10,28,.28),transparent 16%)}
/* Laptop: the screen carries its own page, so almost nothing. */
/* laptop: none. Any tint here would shade the screen the page sits on,
   and the toolbar twin would no longer match the footage's own toolbar. */
.scrims > i[data-s="1"]{background:none}
/* Mountain: the forest across the bottom is already dark; deepen the lower
   left where the copy sits so the white text never meets a cloud wisp. */
.scrims > i[data-s="2"]{background:
  radial-gradient(ellipse 60% 62% at 20% 82%,rgba(2,10,14,.74),rgba(2,10,14,.38) 55%,transparent 82%),
  linear-gradient(0deg,rgba(2,8,12,.62),transparent 46%),
  linear-gradient(180deg,rgba(4,10,24,.30),transparent 18%)}
/* Cabin: warm dark on the left for the call to action, cabin left clear. */
.scrims > i[data-s="3"]{background:
  linear-gradient(90deg,rgba(14,8,3,.86) 0%,rgba(14,8,3,.66) 30%,rgba(14,8,3,.18) 52%,transparent 64%),
  linear-gradient(0deg,rgba(10,6,2,.55),transparent 42%),
  linear-gradient(180deg,rgba(10,6,2,.32),transparent 16%)}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.snav{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px 18px;
  transition:transform .8s var(--e-out)}
.snav .navin{max-width:1240px}
.snav .navin{transition:background .7s ease,box-shadow .7s ease,-webkit-backdrop-filter .7s ease,backdrop-filter .7s ease}
.scenes[data-scene="0"] .snav .navin{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.scenes[data-scene="0"] .snav .navin::after{opacity:0}
.scenes[data-scene="0"] .snav .navlink{text-shadow:0 1px 10px rgba(0,20,60,.55)}
/* liquid glass saturates whatever is behind it, which turns the bar loud
   blue over open sky; a dark base keeps it calm in every scene */
.snav .navin{background:rgba(8,16,34,.34)}
.scenes[data-scene="3"] .snav .navin{background:rgba(34,20,8,.46)}
.snav .brand{display:flex;align-items:center;transition:opacity .5s ease,transform .6s var(--e-out)}
.snav .brand img{height:21px;width:auto;display:block}
.snav .navlink{color:rgba(255,255,255,.86)}
.snav .navlink:hover{color:#fff}
/* The big logo owns the intro, so the small one waits. Inside the laptop the
   whole bar tucks away: the screen is the interface there. */
.scenes[data-scene="0"] .snav .brand{opacity:0;transform:translateY(-6px)}
.scenes[data-scene="1"] .snav{transform:translateY(-140%)}

/* ── Scene dots ────────────────────────────────────────────────────────── */
.sdots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:none;flex-direction:column;gap:14px;list-style:none}
.scenes .sdots{display:flex}
.sdots button{position:relative;display:block;width:12px;height:12px;border:0;padding:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.34);box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:background .3s ease,transform .3s var(--e-out)}
.sdots button:hover{background:rgba(255,255,255,.7)}
.sdots button[aria-current="step"]{background:#fff;transform:scale(1.3)}
.sdots button span{position:absolute;right:24px;top:50%;transform:translate(6px,-50%);white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;opacity:0;pointer-events:none;
  padding:5px 11px;border-radius:999px;background:rgba(8,16,34,.72);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:opacity .2s ease,transform .25s var(--e-out)}
.sdots button:hover span,.sdots button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.sdots button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.scenes[data-scene="1"] .sdots button{background:rgba(20,40,90,.28)}
.scenes[data-scene="1"] .sdots button[aria-current="step"]{background:#16307a}

/* ── Scenes ────────────────────────────────────────────────────────────── */
.sc{position:relative;z-index:3}
.sc-in{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:620;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:18px}
.mwb{display:inline-flex}
/* gradient text is transparent, so a text-shadow shows THROUGH it and muddies the colour */
.shadowtext .grad,.shadowtext .warm{text-shadow:none;filter:drop-shadow(0 2px 14px rgba(0,10,30,.35))}
.emailpop .poplabel,.emailpop .pophint{display:block}
.shadowtext{text-shadow:0 2px 24px rgba(0,10,30,.45),0 1px 2px rgba(0,10,30,.35)}

/* Motion units. Every [data-m] enters from, and leaves to, a state the
   engine sets per transition so it matches what the camera is doing:
   flying past on a push-in, rising as the camera drops, swelling on the
   approach to the cabin. --i staggers them. Glass elements are marked
   themselves rather than through a parent, because animating opacity on
   an ancestor of a backdrop-filter strips its blur until the fade ends. */
.scenes .sc{position:fixed;inset:0;display:flex;visibility:hidden;pointer-events:none}
.scenes .sc.is-in,.scenes .sc.is-out{visibility:visible}
.scenes .sc.is-in{pointer-events:auto}
.scenes .sc [data-m]{opacity:0;
  transform:translate3d(var(--fx,0),var(--fy,40px),0) scale(var(--fs,1));
  filter:blur(var(--fb,0px))}
.scenes .sc:not(.is-in):not(.is-out) [data-m]{transition:none}
.scenes .sc.is-in [data-m]{opacity:1;transform:none;filter:none;
  transition:opacity .9s var(--e-out) calc(var(--i,0)*95ms),
             transform 1.15s var(--e-out) calc(var(--i,0)*95ms),
             filter .9s var(--e-out) calc(var(--i,0)*95ms)}
.scenes .sc.is-out [data-m]{opacity:0;
  transform:translate3d(var(--ox,0),var(--oy,-40px),0) scale(var(--os,1));
  filter:blur(var(--ob,0px));
  transition:opacity .5s var(--e-in) calc(var(--i,0)*28ms),
             transform .75s var(--e-in) calc(var(--i,0)*28ms),
             filter .6s var(--e-in) calc(var(--i,0)*28ms)}
/* glass never gets a blur filter, it would stack on top of its backdrop blur */
.scenes .sc .glass[data-m],.scenes .sc .deck[data-m]{filter:none !important}
/* (mouse parallax removed: it kept everything creeping in sub-pixel steps
   after each mouse move, which shimmers fine detail) */

/* ── Scene 0: intro, logo in the open sky ──────────────────────────────── */
.s0{align-items:center;justify-content:center;text-align:center}
.s0 .sc-in{display:flex;flex-direction:column;align-items:center;transform:translateY(-6vh)}
.introLogo{width:clamp(250px,33vw,540px)}
.introLogo .float{position:relative}
.introLogo img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 30px rgba(0,20,60,.35))}
/* a slow light across the letters only: the gradient moves, the mask does not */
.introLogo .float::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%) no-repeat;
  background-size:300% 100%;background-position:150% 0;
  -webkit-mask:url(../admin/bizlo-white.svg) center/100% 100% no-repeat;mask:url(../admin/bizlo-white.svg) center/100% 100% no-repeat;
  animation:logoShine 2.6s ease-in-out 1.2s 2 both;opacity:.55}
@keyframes logoShine{0%{background-position:150% 0}100%{background-position:-50% 0}}
.s0 h1{margin-top:clamp(22px,3.2vh,34px);font-size:clamp(22px,2.3vw,34px);font-weight:620;
  letter-spacing:-.02em;line-height:1.2;max-width:22ch}
.s0 .lede{margin-top:12px;font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.88);letter-spacing:-.005em}

.cue{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:clamp(22px,4.5vh,44px);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;color:#fff;font:inherit;cursor:pointer;opacity:.92}
.cue:hover{opacity:1}
.cue .mouse{position:relative;width:26px;height:40px;border-radius:14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.cue .mouse::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
  border-radius:2px;background:#fff;animation:wheel 1.8s var(--e-out) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
/* load progress drawn as a ring around the mouse, so waiting reads as
   intentional rather than broken */
.cue svg{position:absolute;left:50%;top:-9px;width:44px;height:58px;margin-left:-22px;overflow:visible}
.cue svg rect{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,160);stroke-dashoffset:calc(var(--len,160) * (1 - var(--p,0)));
  transition:stroke-dashoffset .25s linear,opacity .6s ease}
.cue.ready svg rect{opacity:0}
.cue .lbl{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,10,30,.5)}
.cue .mw{position:relative;display:block;width:26px;height:40px}
.cue .mouse{display:block}

/* ── Scene 1: the page on the laptop screen ─────────────────────────────
   No background of its own. The lit screen in the footage IS the page, so
   there is no white box to line up or fade: the content simply appears on
   the real screen. scenes.js warps this layer onto the screen's four
   measured corners every frame (a perspective transform, because the camera
   looks up at the laptop and the screen is a trapezoid, not a rectangle).
   All sizes are in em against a base of screen width / 60, so the page
   keeps its proportions on every window. No will-change: it would freeze
   the raster scale and blur the text after the push-in. */
.su{position:fixed;left:0;top:0;transform-origin:0 0;z-index:3;overflow:hidden;
  color:#0B1633;visibility:hidden;pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter var","Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

/* Twin of the toolbar the footage draws during the pull-back. Proportions and
   colours measured off those frames: height 4.62% of screen width, dots at
   4.3 / 6.6 / 8.8%, address pill 30-70%, menu at 94%. */
.su-bar{position:absolute;left:0;top:0;right:0;height:2.77em;background:#E8F3FB;
  box-shadow:0 1px 0 rgba(60,100,160,.10)}
.su-dot{position:absolute;top:1.025em;width:.72em;height:.72em;border-radius:50%}
.su-dot:nth-child(1){left:2.214em;background:#E26077}
.su-dot:nth-child(2){left:3.61em;background:#ECBA2F}
.su-dot:nth-child(3){left:4.91em;background:#65C777}
.su-url{position:absolute;left:18em;width:24em;top:.75em;height:1.3em;border-radius:.65em;background:#D2E1F2;
  display:flex;align-items:center;justify-content:center}
.su-urltext{display:flex;align-items:center;gap:.45em;font-size:.6em;color:#6B7A93;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.su-urltext svg{width:.9em;height:.9em}
.su-menu{position:absolute;left:56.4em;width:1.45em;top:0;height:100%}
.su-menu i{position:absolute;left:0;right:0;height:.11em;border-radius:.06em;background:#A0ABBA}
.su-menu i:nth-child(1){top:1.06em}.su-menu i:nth-child(2){top:1.42em}.su-menu i:nth-child(3){top:1.79em}

.su-body{position:absolute;left:0;right:0;top:2.77em;bottom:0;padding:2.2em 3.4em 1.8em;
  display:flex;flex-direction:column}
.su-main{display:grid;grid-template-columns:1.12fr 1fr;gap:3em;align-items:stretch}
.su-kick{font-size:.64em;font-weight:720;letter-spacing:.17em;text-transform:uppercase;color:#2E5BE8}
.su h2{font-size:2.45em;line-height:1.03;letter-spacing:-.038em;font-weight:760;color:#0B1633;margin:.42em 0 .78em}
.su-search{display:flex;align-items:center;gap:.6em;height:2.35em;border-radius:1.18em;padding:0 1.05em;
  background:#fff;font-size:.92em;
  box-shadow:0 .35em 1.3em rgba(30,60,130,.13),inset 0 0 0 1px rgba(30,60,130,.10)}
.su-search svg{width:1em;height:1em;flex:0 0 auto;color:#7B86A0}
.su .q{color:#0B1633;font-weight:520}
.su .caret{display:inline-block;width:.085em;height:1.15em;background:#2E5BE8;margin-left:1px;vertical-align:-.2em;
  animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* the cursor stops blinking once the search has run */
.su.b3 .caret{animation:none;opacity:0;transition:opacity .3s ease}
.su-results{list-style:none;margin-top:.85em;display:grid;gap:.5em}
.su-results li{display:grid;grid-template-columns:1.75em 1fr auto;gap:.8em;align-items:center;
  padding:.55em .7em .55em .6em;border-radius:.75em;background:rgba(255,255,255,.84);
  box-shadow:0 .15em .6em rgba(30,60,130,.08),inset 0 0 0 1px rgba(30,60,130,.06);
  transition:opacity .65s var(--e-out),transform .75s var(--e-out),box-shadow .5s ease,background .5s ease}
.su-results .ic{width:1.75em;height:1.75em;border-radius:.5em;background:var(--c,#ccd)}
.su-results .nm b{display:block;font-size:.82em;font-weight:660;letter-spacing:-.01em;color:#0B1633}
.su-results .nm small{display:block;font-size:.62em;color:#5B6785;margin-top:.1em}
.su-results .go{font-size:.6em;font-weight:680;color:#2E5BE8;background:rgba(46,91,232,.10);padding:.45em .95em;border-radius:1em}
.su-results .you .ic{background:transparent;box-shadow:inset 0 0 0 .11em #B9C3D6;background-image:repeating-linear-gradient(135deg,transparent 0 .25em,rgba(160,175,200,.25) .25em .38em)}
.su-results .you .go.off{color:#9AA6BA;background:rgba(20,40,80,.05)}
.su.b4 .su-results .you{background:rgba(255,244,244,.95);box-shadow:0 0 0 .12em rgba(226,96,119,.55),0 .3em 1em rgba(226,96,119,.18)}
.su.b4 .su-results .you .nm small{color:#C9405A;font-weight:620}
.su.b4 .su-results .you .go.off{color:#C9405A;background:rgba(226,96,119,.10)}

/* the two cards stretch to the full height of the left column, so the
   page has no empty patch in its lower right */
.su-right{display:grid;grid-template-rows:1fr 1fr;gap:1.1em;padding-top:.2em}
.su-card{display:grid;grid-template-columns:6.6em 1fr;gap:1.4em;align-items:center;padding:1.2em 1.6em;
  border-radius:1em;background:rgba(255,255,255,.84);
  box-shadow:0 .3em 1.2em rgba(30,60,130,.10),inset 0 0 0 1px rgba(30,60,130,.06)}
.ringwrap{position:relative;width:6.6em;height:6.6em}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11}
.ring .trk{stroke:#E1E8F5}
.ring .val{stroke:url(#suGrad);stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;
  transition:stroke-dashoffset 1.6s var(--e-out)}
.ringnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.8em;font-weight:780;letter-spacing:-.045em;color:#0B1633;font-variant-numeric:tabular-nums}
.su-cap{font-size:.92em;line-height:1.42;color:#28324C}
.su-cap strong{color:#0B1633;font-weight:720}
.su-cap small{display:block;margin-top:.55em;font-size:.66em;letter-spacing:.07em;text-transform:uppercase;color:#7B86A0}

.su-punch{margin-top:auto;padding-top:1em;border-top:1px solid rgba(20,50,110,.12);display:flex;align-items:center;
  justify-content:space-between;gap:1em;font-size:1.28em;font-weight:720;letter-spacing:-.022em;color:#0B1633}
.su-hint{display:inline-flex;align-items:center;gap:.5em;font-size:.5em;font-weight:680;letter-spacing:.12em;
  text-transform:uppercase;color:#2E5BE8;white-space:nowrap}
.su-hint svg{width:1.3em;height:1.3em;animation:nudge 1.8s var(--e-out) infinite}
@keyframes nudge{0%,100%{transform:translateY(-.1em)}50%{transform:translateY(.25em)}}

/* the page builds itself once the camera lands; the engine adds b1..b6 */
.su [data-b]{opacity:0;transform:translateY(.7em);transition:opacity .7s var(--e-out),transform .85s var(--e-out)}
.su [data-b="3"]{transition-delay:calc(var(--k,0) * 130ms)}
.su [data-b="5"]{transition-delay:calc(var(--k,0) * 170ms)}
.su.b1 [data-b="1"],.su.b2 [data-b="2"],.su.b3 [data-b="3"],.su.b5 [data-b="5"],.su.b6 [data-b="6"]{opacity:1;transform:none}
.su.b5 .ring .val{stroke-dashoffset:calc(326.73 * (1 - var(--p)))}

/* ── Scene 2: power statements and the work, at the mountain ───────────── */
.s2{align-items:stretch}
.s2 .sc-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,56px);
  align-items:end;padding-top:clamp(80px,12vh,120px);padding-bottom:clamp(34px,7vh,72px)}
.s2 .pill{background:rgba(6,16,34,.46);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 8px 24px rgba(0,0,0,.25)}
.s2 .grad{background:linear-gradient(95deg,#E4EEFF,#9CC0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.s2 h2{font-size:clamp(36px,4.3vw,66px);line-height:1.02;letter-spacing:-.04em;font-weight:720;max-width:13ch}
.powers{list-style:none;margin-top:clamp(20px,3.2vh,34px);display:grid;gap:clamp(12px,1.9vh,18px);max-width:34em}
.powers li{display:grid;grid-template-columns:2.2em 1fr;gap:.1em 1em;align-items:baseline}
.powers b{grid-row:span 2;font-size:.82em;font-weight:700;letter-spacing:.08em;color:var(--accent-soft);
  font-variant-numeric:tabular-nums}
.powers strong{font-size:clamp(17px,1.35vw,20px);font-weight:660;letter-spacing:-.012em}
.powers span{font-size:clamp(14.5px,1.05vw,16px);color:rgba(255,255,255,.8);line-height:1.5}

.deck{position:relative;align-self:center;justify-self:end;width:min(100%,640px);min-width:0}
.s2 .copy{min-width:0}
.deck .lbl{font-size:12.5px;font-weight:620;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);
  margin-bottom:30px;text-shadow:0 1px 12px rgba(0,10,30,.55)}
.deck .stack{position:relative;width:100%;aspect-ratio:16/11.2;perspective:1600px}
.card{position:absolute;left:0;top:0;width:82%;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#0c1020;transform-origin:50% 60%;
  box-shadow:0 30px 70px rgba(0,8,20,.55),0 6px 18px rgba(0,8,20,.4),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .95s var(--e-out),opacity .7s ease,filter .7s ease}
.card .cb{height:26px;display:flex;align-items:center;gap:6px;padding:0 11px;background:#eef1f6}
.card .cb i{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.card .cb i:nth-child(2){background:#febc2e}.card .cb i:nth-child(3){background:#28c840}
.card .cb span{margin-left:10px;font:11px ui-monospace,Menlo,monospace;color:#64708a;white-space:nowrap;overflow:hidden}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* aerial perspective: cards further back take on the haze of the valley air */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(140,180,230,var(--haze,0));
  transition:background .7s ease}
.card.exit{transform:translate3d(-58%,4%,0) rotateY(24deg) scale(.9) !important;opacity:0 !important;
  transition:transform .55s var(--e-in),opacity .45s ease !important}
.card.snap{transition:none !important}
.card:focus-visible{outline:3px solid #fff;outline-offset:4px}
.deckbar{display:flex;align-items:center;gap:14px;margin-top:18px}
.deckbar .who{flex:1;min-width:0}
.deckbar .who strong{display:block;font-size:17px;font-weight:660;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deckbar .who span{font-size:13.5px;color:rgba(255,255,255,.78)}
.deckbar .count{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.arrowbtn{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .2s ease,transform .2s ease}
.arrowbtn:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.arrowbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* the stack sits still; a bobbing screenshot shimmers its small text */

/* ── Scene 3: the cabin. Warm light, the door open ─────────────────────── */
/* Everything lives in one column on the left, over the warm scrim, so the
   cabin and its lit windows stay completely clear on the right. */
.s3{align-items:stretch}
.s3 .sc-in{display:flex;padding-top:clamp(84px,12vh,112px);padding-bottom:clamp(20px,3.6vh,40px)}
.s3 .left{display:flex;flex-direction:column;width:min(100%,560px);min-height:0}
.s3 .eyebrow{color:var(--amber-2);margin-bottom:12px}
.s3 h2{font-size:clamp(38px,4.3vw,64px);line-height:1;letter-spacing:-.045em;font-weight:720}
.s3 h2 .warm{background:linear-gradient(95deg,#FFF0D8,#FFB866);-webkit-background-clip:text;background-clip:text;color:transparent}
.s3 .sub{margin-top:14px;font-size:clamp(16px,1.2vw,18px);color:rgba(255,255,255,.9);max-width:30em}
.s3 .btnrow{justify-content:flex-start;margin-top:22px}
.s3 .reach{margin-top:14px;font-size:14px;color:rgba(255,255,255,.82)}
.s3 .reach a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,217,168,.5)}
.s3 .reach a:hover{border-bottom-color:var(--amber)}
/* the metal ring warms up to match the cabin light */
.s3 .lm::before{background:conic-gradient(from 0turn,#7a5a3a 0%,#e8c9a0 7%,#fff4e2 12%,#f0d4ae 17%,#9c7447 25%,
  #634528 33%,#d9b38a 40%,#fff4e2 46%,#e9c89d 52%,#8f6a42 60%,#5b3f24 68%,#d4ad80 75%,#fff4e2 81%,#eacaa0 87%,#8b6640 94%,#7a5a3a 100%)}
.s3 .lm:hover{box-shadow:0 20px 50px rgba(0,0,0,.62),0 0 40px rgba(255,178,92,.32)}
.faqpanel{margin-top:22px;flex:1 1 auto;min-height:0;max-height:52vh;display:flex;flex-direction:column;
  padding:18px 22px 6px;background:rgba(30,18,8,.34)}
.faqpanel h3{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);margin-bottom:2px}
.faqscroll{overflow:auto;overscroll-behavior:contain;margin-right:-12px;padding-right:12px;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,217,168,.35) transparent}
.faqscroll::-webkit-scrollbar{width:6px}.faqscroll::-webkit-scrollbar-thumb{background:rgba(255,217,168,.3);border-radius:3px}
.faqpanel .faq summary{padding:12px 0;font-size:15px}
.faqpanel .faq summary::after{color:var(--amber-2)}
.faqpanel .faq p,.faqpanel .faq ol{font-size:14.5px;color:rgba(255,255,255,.86);line-height:1.6;padding-bottom:13px}
.faqpanel .faq ol{padding-left:1.25em;display:grid;gap:4px}
.s3 .fine{padding-top:14px;font-size:12px;color:rgba(255,255,255,.62)}
.s3 .fine a{color:rgba(255,255,255,.8)}

@media (max-height:820px){
  .s3 .sc-in{padding-top:84px}
  .s3 h2{font-size:clamp(34px,3.6vw,52px)}
  .s3 .sub{margin-top:10px;font-size:15.5px}
  .s3 .btnrow{margin-top:16px}
  .s3 .btnrow .lm,.s3 .btnrow .btn{min-height:50px}
  .s3 .reach{margin-top:10px}
  .faqpanel{margin-top:14px;padding-top:14px}
  .faqpanel .faq summary{padding:10px 0;font-size:14.5px}
  .s2 .sc-in{padding-top:84px}
}

/* short windows in scene mode (small laptops, browsers with toolbars,
   900x560 and up): tighten everything so each scene still fits whole */
@media (max-height:680px){
  .scenes .s2 .sc-in{padding-top:76px;padding-bottom:20px;align-items:center}
  .scenes .s2 h2{font-size:clamp(30px,3.3vw,44px)}
  .scenes .s2 .pill{padding-top:6px;padding-bottom:6px}
  .scenes .powers{margin-top:14px;gap:8px}
  .scenes .powers strong{font-size:16px}
  .scenes .powers span{font-size:13.5px;line-height:1.4}
  .scenes .deck{width:min(100%,640px,calc((100vh - 220px) * 1.2))}
  .scenes .deck .lbl{margin-bottom:8px}
  .scenes .deckbar{margin-top:10px}
  .scenes .s3 .sc-in{padding-top:74px;padding-bottom:14px}
  .scenes .s3 .eyebrow{margin-bottom:6px}
  .scenes .s3 h2{font-size:clamp(30px,3.3vw,42px)}
  .scenes .s3 .sub{margin-top:8px;font-size:14.5px}
  .scenes .s3 .btnrow{margin-top:12px}
  .scenes .s3 .btnrow .lm,.scenes .s3 .btnrow .btn{min-height:46px}
  .scenes .s3 .reach{margin-top:8px;font-size:13px}
  .scenes .faqpanel{margin-top:10px;padding-top:10px;min-height:min(180px,30vh)}
  .scenes .faqpanel .faq summary{padding:8px 0;font-size:14px}
  .scenes .s3 .fine{padding-top:8px}
}
@media (max-height:600px){
  .scenes .powers span{display:none}
  .scenes .s3 .fine{display:none}
}

/* ── Lightbox for the work ─────────────────────────────────────────────── */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(1180px,92vw);width:100%;color:#fff;margin:auto}
dialog.lb::backdrop{background:rgba(4,8,18,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog.lb[open]{animation:lbin .45s var(--e-out)}
@keyframes lbin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.lb figure{border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);background:#0c1020}
.lb img{display:block;width:100%;height:auto}
.lb figcaption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 4px 0}
.lb figcaption strong{font-size:18px;font-weight:660}
.lb figcaption span{color:rgba(255,255,255,.75);font-size:14px;flex:1}
.lb .x{position:absolute;right:-6px;top:-50px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  font-size:22px;color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.lb .golive{font-size:14px;font-weight:620;color:#fff;text-decoration:none;padding:10px 18px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.lb .golive:hover{background:rgba(255,255,255,.12)}

.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ Scene mode: page is locked, scenes are layers ══════════════════════ */
html.scenes,html.scenes body{height:100%;overflow:hidden;overscroll-behavior:none}
html.scenes body{touch-action:none}
html.scenes .faqscroll{touch-action:pan-y}

/* ═══ Stacked mode (phones, reduced motion, no script) ═══════════════════ */
html:not(.scenes) .stage-in canvas,html:not(.scenes) .glow,html:not(.scenes) .cue svg{display:none}
html:not(.scenes) .stage img.still{transition:opacity .8s ease}
html:not(.scenes) .scrims > i{transition:opacity .8s ease}
html:not(.scenes) .sc{min-height:100svh;display:flex;align-items:center;padding:96px 0 56px}
html:not(.scenes) .s0{padding-top:0}
html:not(.scenes) .cue{position:absolute}
html:not(.scenes) .cue .mouse::after{animation:none}
html:not(.scenes) .sdots{display:none}
/* the laptop page becomes an ordinary browser card */
html:not(.scenes) .s1{justify-content:center}
html:not(.scenes) .su{position:relative;visibility:visible;transform:none !important;width:min(92vw,820px) !important;height:auto !important;
  margin:0 auto;border-radius:14px;font-size:clamp(10px,1.75vw,15.5px) !important;
  background:radial-gradient(120% 110% at 50% 36%,#F3F8FF 0%,#DDE9FA 62%,#CADDF6 100%);
  box-shadow:0 30px 80px rgba(0,10,30,.45),0 0 0 1px rgba(255,255,255,.4)}
html:not(.scenes) .su-bar{position:relative}
/* the stacked card is not lined up with any footage, so its toolbar can
   simply fit the card instead of the laptop's measured proportions */
html:not(.scenes) .su-url{left:7.4em;right:4.2em;width:auto}
html:not(.scenes) .su-menu{left:auto;right:1.6em}
html:not(.scenes) .su-body{position:relative;top:auto}
html:not(.scenes) .su [data-b]{opacity:1;transform:none}
html:not(.scenes) .su .ring .val{stroke-dashoffset:calc(326.73 * (1 - var(--p)))}
html:not(.scenes) .su .caret{display:none}
html:not(.scenes) .su-punch{margin-top:1.6em}
html:not(.scenes) .su-results .you{background:rgba(255,244,244,.95);box-shadow:0 0 0 .12em rgba(226,96,119,.55)}
html:not(.scenes) .su-results .you .nm small{color:#C9405A}
html:not(.scenes) .deck .stack{aspect-ratio:auto;display:flex;width:100%;min-width:0;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;perspective:none;-webkit-overflow-scrolling:touch}
html:not(.scenes) .card{position:relative;flex:0 0 84%;width:84%;min-width:0;scroll-snap-align:center;transform:none !important;opacity:1 !important;filter:none !important}
html:not(.scenes) .card::after{display:none}
html:not(.scenes) .deckbar{display:none}

@media (max-width:980px){
  /* on a narrow screen the copy spans the full width, so the side-weighted
     desktop scrims are not enough: darken evenly behind the text */
  html:not(.scenes) .scrims > i[data-s="0"]{background:radial-gradient(ellipse 90% 40% at 50% 42%,rgba(6,16,44,.5),transparent 80%)}
  html:not(.scenes) .scrims > i[data-s="2"]{background:linear-gradient(180deg,rgba(2,10,16,.35),rgba(2,10,16,.62) 30%,rgba(2,10,16,.78))}
  html:not(.scenes) .scrims > i[data-s="3"]{background:linear-gradient(180deg,rgba(14,8,3,.45),rgba(14,8,3,.74) 26%,rgba(14,8,3,.84))}
  /* minmax(0,...) so the portfolio row cannot size the column to the images' natural width */
  html:not(.scenes) .s2 .sc-in{grid-template-columns:minmax(0,1fr);gap:34px}
  html:not(.scenes) .deck{justify-self:stretch;width:100%}
  html:not(.scenes) .faqpanel{max-height:none}
  html:not(.scenes) .faqscroll{overflow:visible}
}
@media (max-width:640px){
  .snav{padding:10px 12px}
  .snav .navlink{display:none}
  .snav .navin{padding:8px 10px 8px 16px}
  .s0 .sc-in{transform:none}
  .su-main{grid-template-columns:1fr;gap:1.6em}
  .su-right{grid-template-rows:auto auto}
  .su-body{padding:1.6em 1.4em 1.4em}
  .su-punch{flex-direction:column;align-items:flex-start;gap:.6em}
  .s3 .btnrow{flex-direction:column}
  .cue{bottom:18px}
}
/* short landscape screens (phones on their side): keep the intro clear of
   the nav and small enough to fit, so nothing hides under the bar */
@media (max-height:560px){
  html:not(.scenes) .sc{padding-top:78px;padding-bottom:40px}
  html:not(.scenes) .s0{padding-top:74px;padding-bottom:70px}
  html:not(.scenes) .s0 .sc-in{transform:none}
  html:not(.scenes) .introLogo{width:clamp(170px,26vw,300px)}
  html:not(.scenes) .s0 h1{margin-top:14px;font-size:22px}
  html:not(.scenes) .cue{bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .introLogo .float::after{animation:none !important}
  .cue .mouse::after{animation:none}
  .stage img.still,.scrims > i{transition:none}
}

/* ═══ Lite: phones, tablets, weak computers, data saver ══════════════════
   Same design, cheaper to draw. No refracting glass or noise overlays, no
   blend modes, no filters on the deck, and nothing that repaints forever. */
html.lite .glow{mix-blend-mode:normal}
html.lite .card{filter:none !important}
html.lite .introLogo .float::after{display:none}
html.lite .introLogo img{filter:none}
html.lite .scrims > i{transition:none}
@media (max-width:899px){
  html.lite .s3 .faqpanel,html.lite .s3 .btn.glass{background:rgba(34,20,8,.82)}
}
/* lite: content moves and fades between scenes, but is never blurred on the
   way (a blur filter on text is re-rasterised every frame of the move) */
html.lite.scenes .sc [data-m]{filter:none !important}
/* lite, scene mode: no live blur over the moving footage. A backdrop blur
   has to be recomputed for every frame the camera moves under it; on weak
   GPUs the nav bar alone cost a third of each frame. Tinted glass instead. */
html.lite.scenes .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,16,34,.62)}
html.lite.scenes .snav .navin{background:rgba(8,16,34,.72)}
html.lite.scenes[data-scene="0"] .snav .navin{background:transparent}
html.lite.scenes[data-scene="3"] .snav .navin{background:rgba(34,20,8,.78)}
html.lite.scenes .s3 .faqpanel{background:rgba(30,18,8,.72)}
html.lite.scenes .s3 .btn.glass{background:rgba(34,20,8,.6)}

/* ═══ Stable on every device (see the note at the end of glass.css) ═════ */
.scenes .sc [data-m]{filter:none !important}
.glow{mix-blend-mode:normal}
.scenes .glass{background:rgba(10,16,34,.66)}
.scenes .snav .navin{background:rgba(8,16,34,.74)}
.scenes[data-scene="0"] .snav .navin{background:transparent}
.scenes[data-scene="3"] .snav .navin{background:rgba(34,20,8,.8)}
dialog.lb::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,8,18,.9)}