/* FinTech F4 RAIL: deep ink, huge condensed type, products travel sideways as the page scrolls. */
:root{
  --ink:#0a0b0f;--ink2:#10121a;--ink3:#181b26;--bone:#ece8df;--dim:#8d8f99;--sig:#ff5a2c;--sigd:#d9441a;--mute:#a9a597;
  --u:min(1vw,1.6vh);
  --disp:'Anton','Anton SC',Impact,'Arial Narrow Bold',sans-serif;
  --text:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--ink);scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

/* top nav (right side; the brand mark on the left is the eject control from kit/eject.js) */
.nav{mix-blend-mode:difference;position:fixed;top:calc(var(--u)*1.5);right:calc(var(--u)*2.4);z-index:50;display:flex;gap:calc(var(--u)*2.4);
  font:600 max(14px,calc(var(--u)*1.05))/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:#fff;padding:calc(var(--u)*.6) 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{border-color:var(--sig)}

/* hero */
.hero{position:relative;height:100vh;min-height:calc(var(--u)*62);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--u)*6) calc(var(--u)*4) calc(var(--u)*4.4)}
.hero h1{margin:0;font:400 min(calc((100vw - var(--u)*8)/5.9),27vh,calc(var(--u)*23.5))/.9 var(--disp);   /* as big as the screen allows: the indented middle line always fits the width */
  text-transform:uppercase;letter-spacing:-.005em;color:var(--bone)}
.hero h1 span{display:block;white-space:nowrap;will-change:transform}
.hero h1 span:nth-child(2){color:var(--sig);padding-left:.46em}
.hero-row{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--u)*3);margin-top:calc(var(--u)*3.2 + 24px)}
.hero p{margin:0;font:500 calc(var(--u)*1.6)/1.4 var(--text);max-width:46em;color:var(--bone)}
.cta{display:inline-flex;align-items:center;gap:calc(var(--u)*1.2);background:var(--bone);color:var(--ink);font:700 max(13px,calc(var(--u)*1.25))/1 var(--text);
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:calc(var(--u)*1.5) calc(var(--u)*2.2);transition:transform .25s ease,background .2s}
.cta:hover,.cta:active{transform:translateX(calc(var(--u)*.6));background:var(--sig)}   /* calm bone buttons; orange only on hover and press */
.cta i{font-style:normal;display:inline-block;transition:transform .25s}
.cta:hover i{transform:translateX(calc(var(--u)*.5))}
/* the rail: one tall wrapper, one pinned stage, three panels */
.rail{position:relative;height:292vh;background:var(--ink)}   /* 2*STEP + HOLD_LAST + 100, see HOLD_LAST in rail.js */
.stage{position:sticky;top:0;height:100vh;min-height:calc(var(--u)*62);overflow:hidden;
  --S:max(0px,calc(100vh - var(--u)*62.5));      /* window height beyond the 62.5u design frame */
  --ex:min(var(--S),calc(var(--u)*14));           /* the frame grows by up to 14u so 4:3 windows fill too */
  --oy:max(0px,calc((var(--S) - var(--u)*14)/2))}  /* taller than that: centre the frame. The frame bottom is the window bottom. */
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.panel{position:absolute;inset:0;overflow:hidden;pointer-events:none}   /* panels are stacked full-screen; only their contents take clicks, so a later panel never blocks the one in view */
.panel>*{pointer-events:auto}
.p-bgw{position:absolute;inset:0;overflow:hidden;will-change:transform;pointer-events:none}   /* the outline word is cropped to its own panel and leaves with it */
.p-bg,.p-text,.p-moment,.p-facts{position:absolute;will-change:transform}
.p-bg{left:calc(var(--u)*-2);bottom:calc(100vh - var(--oy) - var(--u)*62.5 - var(--ex) - var(--u)*1.4);font:400 calc(var(--u)*32)/.85 var(--disp);text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px #23273a;letter-spacing:.01em;user-select:none}
.p-text{left:calc(var(--u)*5);top:calc(var(--oy) + var(--ex)*.35 + var(--u)*10);width:calc(var(--u)*29)}
.p-kicker{font:700 max(12px,calc(var(--u)*1))/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:calc(var(--u)*1.4)}
.p-name{margin:0;font:400 calc(var(--u)*7)/.92 var(--disp);text-transform:uppercase;color:var(--bone);letter-spacing:.005em}
.p-line{margin:calc(var(--u)*2) 0 calc(var(--u)*2.6);font:500 calc(var(--u)*1.7)/1.35 var(--text);color:var(--bone);text-wrap:balance}   /* balanced breaks: no word left alone on the last line */
/* the sentence follows its title at the same distance on every panel; the head block is held to the tallest one
   (two title lines, three sentence lines) so See it work sits in the same place on all three */
.p-head{min-height:calc(var(--u)*(1 + 1.4 + 7*.92*2 + 2 + 1.7*1.35*3 + 2.6))}
.p-head .p-line{margin-bottom:0}
.p-moment{left:calc(var(--u)*38);top:calc(var(--oy) + var(--ex)*.35 + var(--u)*7);width:calc(100% - var(--u)*43);max-width:calc(var(--u)*74);height:calc(var(--u)*40 + var(--ex)*.3)}
.p-facts{left:calc(var(--u)*5);right:calc(var(--u)*5);top:calc(var(--oy) + var(--ex) + var(--u)*50);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*3)}
.fact{border-top:1px solid #2f3344;padding-top:calc(var(--u)*1)}
.fact b{display:block;font:400 calc(var(--u)*3)/1 var(--disp);color:var(--bone);text-transform:uppercase;letter-spacing:.01em}
.fact span{display:block;margin-top:calc(var(--u)*.6);font:400 max(13px,calc(var(--u)*1.05))/1.4 var(--text);color:var(--dim);max-width:34em}

/* moments: bone-paper fragments of the real products */
.m{position:relative;width:100%;height:100%;background:var(--bone);color:var(--ink);overflow:hidden}
.sc{position:absolute;inset:0;padding:calc(var(--u)*3);transform:translateX(100%);transition:transform .9s cubic-bezier(.65,0,.25,1)}
.sc.here{transform:translateX(0)}
.sc.gone{transform:translateX(-100%)}
.sc.snap{transition:none}
.lab{font:700 calc(var(--u)*.95)/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:#6b6c74}
.lab.o{color:var(--sigd)}
/* brain */
.q{margin-top:calc(var(--u)*1.4);font:700 calc(var(--u)*2.7)/1.2 var(--text);letter-spacing:-.01em;min-height:calc(var(--u)*6.6)}
.q u{display:inline-block;width:.08em;height:1em;background:var(--sigd);vertical-align:-.12em;margin-left:.06em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{background:transparent}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);margin-top:calc(var(--u)*1.4)}
.duo div{border-top:3px solid var(--ink);padding-top:calc(var(--u)*.8);transform:translateY(calc(var(--u)*6));clip-path:inset(0 0 100% 0);transition:transform .6s cubic-bezier(.2,.8,.2,1),clip-path .6s cubic-bezier(.2,.8,.2,1)}
.duo div.up{transform:none;clip-path:inset(0)}
.duo em{font:700 calc(var(--u)*1.2)/1 var(--text);font-style:normal;letter-spacing:.12em}
.duo b{display:block;font:400 calc(var(--u)*6)/1 var(--disp);letter-spacing:.005em;margin-top:calc(var(--u)*.6)}
.duo div:last-child b{color:var(--sigd)}
.tag{display:inline-block;margin-top:calc(var(--u)*1);font:500 calc(var(--u)*1.1)/1 var(--mono);background:var(--ink);color:var(--bone);padding:calc(var(--u)*.8) calc(var(--u)*1.2);}
.tag i{font-style:normal;color:var(--sigd)}
.ln{display:flex;align-items:center;margin-top:calc(var(--u)*1.6)}.ln .tag{margin-top:0}
.fy{font:700 calc(var(--u)*1.1)/1 var(--text);letter-spacing:.14em;color:#6b6c74;margin-left:calc(var(--u)*1.4)}
.bars{margin-top:calc(var(--u)*2.4);display:grid;gap:calc(var(--u)*1.5)}
.br{display:grid;grid-template-columns:calc(var(--u)*13) 1fr calc(var(--u)*7);align-items:center;gap:calc(var(--u)*1.4);font:600 calc(var(--u)*1.4)/1 var(--text)}
.br .tr{height:calc(var(--u)*2.6);background:#d9d4c8;position:relative;overflow:hidden}
.br .fl{position:absolute;inset:0;background:var(--mute);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.br:last-child .fl{background:var(--sigd)}
.br .pc{font:400 calc(var(--u)*2.1)/1 var(--disp);text-align:right;letter-spacing:.01em}
.big159{margin-top:calc(var(--u)*2.2);font:400 calc(var(--u)*5.2)/1 var(--disp);text-transform:uppercase}
.big159 span{color:var(--sigd)}
/* paybridge */
.grid{margin-top:calc(var(--u)*2.4);display:grid;grid-template-columns:calc(var(--u)*18.6) calc(var(--u)*8.8) calc(var(--u)*10) 1fr;column-gap:calc(var(--u)*1.2);row-gap:calc(var(--u)*.8)}
.grid .h{font:700 calc(var(--u)*.95)/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--sigd);border-bottom:2px solid var(--ink);padding-bottom:calc(var(--u)*.7);transform:translateY(calc(var(--u)*-3));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.grid .h.up{transform:none}
.chip{font:600 calc(var(--u)*1.5)/1.2 var(--mono);padding:calc(var(--u)*.7) 0;white-space:nowrap}
.fused{display:flex;gap:calc(var(--u)*1);margin-top:calc(var(--u)*3)}
.ghosts{margin-top:calc(var(--u)*2.4);font:500 calc(var(--u)*1.35)/1 var(--mono);color:#9a958a}
.ghosts div{padding:calc(var(--u)*1.05) 0;border-top:1px solid #d3cdbf;white-space:nowrap}
.fused .chip{background:var(--ink);color:var(--bone);padding:calc(var(--u)*1) calc(var(--u)*1.2);font-size:calc(var(--u)*1.5)}
.fused.split{margin-top:0;display:grid;grid-template-columns:calc(var(--u)*18.6) calc(var(--u)*8.8) calc(var(--u)*10) 1fr;column-gap:calc(var(--u)*1.2)}
.fused.split .chip{background:none;color:var(--ink);padding:calc(var(--u)*.7) 0}
.rows{margin-top:calc(var(--u)*2)}
.rw{display:grid;grid-template-columns:calc(var(--u)*18.6) calc(var(--u)*8.8) calc(var(--u)*10) 1fr;column-gap:calc(var(--u)*1.2);padding:calc(var(--u)*1) 0;border-bottom:1px solid #cfc9bb;font:600 calc(var(--u)*1.35)/1.2 var(--mono);white-space:nowrap;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:translate(var(--rx),var(--ry)) rotate(var(--rr))}
.rw.ok{transform:none}
.rw.flag{box-shadow:inset calc(var(--u)*.5) 0 0 var(--sig);padding-left:calc(var(--u)*1.2)}
.card{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*3);background:var(--ink);color:var(--bone);padding:calc(var(--u)*2.4);transform:translateY(calc(var(--u)*46));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card.up{transform:none}
.card .raw{font:500 calc(var(--u)*1.4)/1 var(--mono);color:var(--dim);text-decoration:line-through;text-decoration-color:var(--sig)}
.card .sug{font:400 calc(var(--u)*5)/1 var(--disp);text-transform:uppercase;margin:calc(var(--u)*1) 0 calc(var(--u)*1.4)}
.card .meta{display:flex;gap:calc(var(--u)*3);font:600 calc(var(--u)*1.25)/1.3 var(--text);color:var(--bone)}
.card .meta span{color:var(--dim);display:block;font-size:calc(var(--u)*.95);letter-spacing:.16em;text-transform:uppercase;margin-bottom:calc(var(--u)*.4)}
.ready{position:absolute;right:calc(var(--u)*3);bottom:calc(var(--u)*3);background:var(--sig);color:var(--ink);font:400 calc(var(--u)*4.4)/1 var(--disp);text-transform:uppercase;padding:calc(var(--u)*1.2) calc(var(--u)*2.2);transform:translateX(calc(var(--u)*60));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ready.up{transform:none}
/* compute calendar (placeholder moment) */
.cc .sc{display:flex;flex-direction:column;padding:calc(var(--u)*3)}
.cc-top{display:flex;justify-content:space-between;align-items:center}
.cc-st{display:inline-flex;align-items:center;gap:calc(var(--u)*.6);font:600 calc(var(--u)*.95)/1 var(--mono);color:#6b6c74;text-transform:uppercase;letter-spacing:.08em}
.cc-st i{width:calc(var(--u)*.7);height:calc(var(--u)*.7);background:var(--sig)}
.cc-days{display:grid;grid-template-columns:repeat(10,1fr);margin:calc(var(--u)*2.4) 0 0 calc(var(--u)*10);font:600 calc(var(--u)*1)/1 var(--mono);color:#6b6c74;letter-spacing:.08em;text-transform:uppercase}
.cc-days span{padding-bottom:calc(var(--u)*.8);border-left:1px solid #cfc9bb;padding-left:calc(var(--u)*.8)}
.cc-rows{display:grid;gap:calc(var(--u)*1.2);margin-top:calc(var(--u)*.4)}
.cc-row{display:grid;grid-template-columns:calc(var(--u)*10) 1fr;align-items:center}
.cc-n{font:600 calc(var(--u)*1.25)/1 var(--text)}
.cc-tr{position:relative;height:calc(var(--u)*4.4);background:repeating-linear-gradient(90deg,#e1dccf 0 1px,transparent 1px 20%);background-color:#e9e5d9}
.cc-dl{position:absolute;top:calc(var(--u)*-.3);bottom:calc(var(--u)*-.3);width:2px;background:#8d8f99;transform:translateX(-1px)}
.cc-b{position:absolute;top:calc(var(--u)*.7);bottom:calc(var(--u)*.7);background:var(--ink);color:var(--bone);display:flex;align-items:center;padding-left:calc(var(--u)*1);overflow:hidden;
  transition:left .9s cubic-bezier(.2,.8,.2,1),width .9s cubic-bezier(.2,.8,.2,1)}
.cc-b span{position:relative;z-index:1;font:600 calc(var(--u)*1)/1 var(--mono);white-space:nowrap}
.cc-b em{position:absolute;right:0;top:0;bottom:0;background:#4a4d5a;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cc-b.late::after{content:"";position:absolute;right:0;top:0;bottom:0;width:calc(var(--u)*.5);background:var(--sig)}
.cc-note{margin-top:auto;display:flex;gap:calc(var(--u)*1.4);align-items:center;font:500 calc(var(--u)*1.25)/1.4 var(--text);opacity:0;transform:translateY(calc(var(--u)*1));transition:opacity .5s,transform .5s}
.cc-note.on{opacity:1;transform:none}
.cc-note b{font:400 calc(var(--u)*2.6)/1 var(--disp);text-transform:uppercase;white-space:nowrap}
.cc-note .cc-msg{color:#6b6c74}
/* universe (unused) */
.m.cu{background:#0f1118;color:var(--bone)}
.m.cu .lab{color:#8d8f99}
.m.cu canvas{position:absolute;inset:0;width:100%;height:100%}
.cap{position:absolute;left:calc(var(--u)*3);bottom:calc(var(--u)*2.4);font:600 calc(var(--u)*1.5)/1.3 var(--text);max-width:calc(var(--u)*34)}
.cap b{font:400 calc(var(--u)*4)/1 var(--disp);display:block;text-transform:uppercase;margin-bottom:calc(var(--u)*.4)}
.m.cu .sc.tr{background:var(--bone);color:var(--ink)}
.m.cu .sc.tr .lab{color:#6b6c74}
.trs{margin-top:calc(var(--u)*1.6);display:grid;gap:calc(var(--u)*.95)}
.tr8{display:grid;grid-template-columns:calc(var(--u)*17) 1fr calc(var(--u)*5);align-items:center;gap:calc(var(--u)*1.2);font:600 calc(var(--u)*1.25)/1 var(--text);text-transform:capitalize}
.tr8 .t{height:calc(var(--u)*1.7);background:#d9d4c8;position:relative;overflow:hidden}
.tr8 .f{position:absolute;inset:0;background:#2d2f3b;transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}

.tr8 .n{font:400 calc(var(--u)*1.9)/1 var(--disp);text-align:right}

.p-cta{display:inline-flex}
/* work */
.work{position:relative;background:var(--ink2);padding:calc(var(--u)*9) calc(var(--u)*5) calc(var(--u)*6);min-height:100vh}
.sec-h{font:700 calc(var(--u)*1)/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--sig);margin:0 0 calc(var(--u)*3)}
.wrow{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(var(--u)*3);border-top:1px solid #2f3344;padding:calc(var(--u)*2) 0;overflow:hidden;cursor:pointer;text-decoration:none;color:var(--bone)}
.wrow:before{content:'';position:absolute;inset:0;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.25,1)}
.wrow>*{position:relative;transition:transform .45s cubic-bezier(.65,0,.25,1),color .3s}
.wrow h3{margin:0;white-space:nowrap;font:400 calc(var(--u)*7.4)/.95 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.wrow p{margin:0;font:500 calc(var(--u)*1.5)/1.35 var(--text)}
.wrow p i{display:block;font:700 calc(var(--u)*1.05)/1 var(--text);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--sig)}
.wrow:hover:before,.wrow:focus-visible:before{transform:scaleX(1)}
.wrow:hover>*,.wrow:focus-visible>*{transform:translateX(calc(var(--u)*2));color:var(--bone)}   /* the text stays white on hover */
.wrow:hover p i,.wrow:focus-visible p i{color:var(--bone)}
.wrow.slot{cursor:default;border-top:1px dashed #3a3e52}
.wrow.slot:before{display:none}
.wrow.slot h3{color:transparent;-webkit-text-stroke:1px #3a3e52}
.wrow.slot:hover>*{transform:none;color:var(--dim)}
.wrow.slot p{color:var(--dim)}
/* about */
.about{position:relative;background:var(--bone);color:var(--ink);padding:calc(var(--u)*8) calc(var(--u)*5) calc(var(--u)*3.5);min-height:100vh}
.about .sec-h{color:var(--sigd)}
.ab{display:grid;grid-template-columns:.9fr 1.1fr;gap:calc(var(--u)*5)}
.ab h2{margin:0;font:400 calc(var(--u)*11)/.88 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.ab h4{margin:0 0 calc(var(--u)*1.3);font:400 calc(var(--u)*3)/1 var(--disp);text-transform:uppercase;text-wrap:balance}
.ab p{margin:0 0 calc(var(--u)*1.1);font:400 calc(var(--u)*1.2)/1.45 var(--text);max-width:36em}
.ab a{display:inline-block;margin-top:calc(var(--u)*1);font:700 calc(var(--u)*1.15)/1 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--bone);padding:calc(var(--u)*1.3) calc(var(--u)*2)}
.ab a:hover{background:var(--sig);color:var(--ink)}
/* ===== ABOUT LINKS (rail.js, ?about=1|2|3): "See how I build" and LinkedIn =====
   .ab-btn is LinkedIn's button (ink, bone letters, the same size, padding and spacing) with an arrow; on hover or keyboard focus
   it lifts a little and takes the accent and its arrow travels right. .ab-orange starts in the accent and deepens; .ab-out is
   outlined (the line drawn inside, so it is exactly as tall as the solid one) and fills with ink. .ab-quiet is the small
   letter-spaced line with an arrow, which takes the accent and draws its underline from the left. Only transforms and colours
   change, so nothing moves the layout; the focus ring is the page's own (:focus-visible). */
.ab a.ab-btn{transition:background-color .25s,color .25s,box-shadow .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.ab a.ab-btn i,.ab a.ab-quiet i{display:inline-block;font-style:normal;margin-left:.45em;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ab a.ab-btn:hover,.ab a.ab-btn:focus-visible{background:var(--sig);color:var(--ink);transform:translateY(-2px)}
.ab a.ab-btn:hover i,.ab a.ab-btn:focus-visible i,.ab a.ab-quiet:hover i,.ab a.ab-quiet:focus-visible i{transform:translateX(.4em)}
.ab a.ab-under{margin-top:calc(var(--u)*2.4)}
.ab a.ab-orange{background:var(--sig);color:var(--ink)}
.ab a.ab-orange:hover,.ab a.ab-orange:focus-visible{background:var(--sigd);color:var(--ink)}
.ab a.ab-out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ab a.ab-out:hover,.ab a.ab-out:focus-visible{background:var(--ink);color:var(--bone);box-shadow:inset 0 0 0 2px var(--ink)}
.ab-ctas{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1);margin-top:calc(var(--u)*1)}
.ab-ctas a.ab-btn{margin-top:0}
.ab a.ab-quiet{position:relative;padding:0;background:none;margin-top:calc(var(--u)*1.2);font:700 calc(var(--u)*1.2)/1.3 var(--text);letter-spacing:.14em;color:#4d4f59;transition:color .3s}
.ab a.ab-quiet::after{content:"";position:absolute;left:0;right:0;bottom:-.3em;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.25,1)}
.ab a.ab-quiet:hover,.ab a.ab-quiet:focus-visible{background:none;color:var(--sigd)}
.ab a.ab-quiet:hover::after,.ab a.ab-quiet:focus-visible::after{transform:scaleX(1)}
.foot{margin-top:calc(var(--u)*3);border-top:1px solid #bdb7a8;padding-top:calc(var(--u)*1.4);font:400 calc(var(--u)*2.6)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}

/* ?preview: the hero alone, no motion (the console shows it on the old CRT) */
html.is-preview .nav,html.is-preview .rail,html.is-preview .work,html.is-preview .about,html.is-preview .site-foot{display:none}
html.is-preview .hero .cta{display:none}
html.is-preview{overflow:hidden}

/* reduced motion: a plain vertical page, every moment at its end state */
html.rm .rail{height:auto}
html.rm .stage{position:static;height:auto;overflow:visible;--oy:0px;--ex:0px;--S:0px}
html.rm .panel{position:relative;inset:auto;height:calc(var(--u)*66);border-top:1px solid #23273a}
html.rm .anchor{display:none}
html.rm .sc{transition:none}
html.rm *{transition-duration:.01ms!important}

/* fix leg 1 */
.sc{overflow:hidden}
.rev{display:block;width:100%;height:calc(var(--u)*10);margin-top:calc(var(--u)*2.2);overflow:visible}
.rev polyline{fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}

.drawn .rev polyline{stroke-dashoffset:0}
.yrs{display:flex;justify-content:space-between;margin-top:calc(var(--u)*.6);font:700 calc(var(--u)*1)/1 var(--text);letter-spacing:.14em;color:#6b6c74}
.card{padding:calc(var(--u)*2.8);top:calc(var(--u)*6)}
.card .sug{font-size:calc(var(--u)*4.6)}
.trs{gap:calc(var(--u)*1.5)}
.tr8 .t{height:calc(var(--u)*2.1)}

/* ===== round 2 ===== */
.hero-row{margin-top:calc(var(--u)*3.6)}
/* Corporate Brain: counters, then bars */
.counters{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.6) calc(var(--u)*3);height:100%;align-content:center}
.cn{border-top:3px solid var(--ink);padding-top:calc(var(--u)*.8)}
.cn b{display:block;font:400 calc(var(--u)*8.4)/1 var(--disp);letter-spacing:.005em;font-variant-numeric:tabular-nums}
.cn span{display:block;margin-top:calc(var(--u)*.5);font:600 calc(var(--u)*1.5)/1 var(--text);color:#4d4f59}
.cn:first-child b{color:var(--ink)}
.big159{margin-top:0;font:400 calc(var(--u)*5)/1 var(--disp);text-transform:uppercase}
.bars{margin-top:calc(var(--u)*2.2)}
.lab.bl{margin-top:calc(var(--u)*2);text-transform:none;letter-spacing:.02em;font-size:calc(var(--u)*1.15)}
/* PayBridge: page text face, no monospace */
.m.pay{background:var(--bone)}
.m.pay .sc{padding:0}
.pd{position:absolute;inset:0;padding:calc(var(--u)*3);font-family:var(--text);display:none}
.m.pay.d1 .pd1,.m.pay.d2 .pd2{display:block}
.ph{font:700 calc(var(--u)*1.7)/1.2 var(--text);letter-spacing:-.005em}
.ps{font:500 calc(var(--u)*1.15)/1.2 var(--text);color:#4d4f59;margin:calc(var(--u)*.2) 0 calc(var(--u)*1.1)}
.pchip{display:block;font:600 calc(var(--u)*1.4)/1 var(--text);padding:calc(var(--u)*.8) calc(var(--u)*1.2);border:2px solid var(--ink);margin-bottom:calc(var(--u)*.7);background:var(--bone)}
.pchip.b{border-color:var(--sigd);color:var(--ink)}
.pd1 .pcol{position:absolute;top:calc(var(--u)*3);width:calc(var(--u)*17);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pd1 .pf{left:calc(var(--u)*3);transform:translateX(calc(var(--u)*-25))}
.pd1 .pb{right:calc(var(--u)*3);transform:translateX(calc(var(--u)*25))}
.pd1 .pcol.on{transform:none}
.pd1 .pmap{position:absolute;left:calc(var(--u)*20.5);width:calc(100% - var(--u)*41);top:calc(var(--u)*3);height:calc(var(--u)*16.5);overflow:visible}
.pd1 .pmap path{fill:none;stroke:var(--sigd);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .5s}
.pd1 .pmap.on path{stroke-dashoffset:0}
.pd1 .ppay{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*22.4)}
.prow{display:flex;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*.55) 0;border-top:1px solid #cfc9bb;font:600 calc(var(--u)*1.35)/1.2 var(--text);font-variant-numeric:tabular-nums;transform:translateX(calc(var(--u)*-6));clip-path:inset(0 100% 0 0);transition:transform .6s cubic-bezier(.2,.8,.2,1),clip-path .6s cubic-bezier(.2,.8,.2,1)}
.prow.on{transform:none;clip-path:inset(0)}
.prow span:first-child{flex:1}
.prow span:nth-child(2){min-width:calc(var(--u)*8);text-align:right}
.ck{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);color:var(--sigd);flex:none}
.pend{position:absolute;right:calc(var(--u)*3);bottom:calc(var(--u)*2.4);display:flex;align-items:baseline;gap:calc(var(--u)*1.6);transform:translateY(calc(var(--u)*8));clip-path:inset(0 0 100% 0);transition:transform .6s cubic-bezier(.2,.8,.2,1),clip-path .6s cubic-bezier(.2,.8,.2,1)}
.pend.on{transform:none;clip-path:inset(0)}
.pend .rd{background:var(--sig);color:var(--ink);font:400 calc(var(--u)*3.6)/1 var(--disp);text-transform:uppercase;padding:calc(var(--u)*.8) calc(var(--u)*1.6)}
.pend .pc100{font:400 calc(var(--u)*3.6)/1 var(--disp);text-transform:uppercase}
/* design 2: a gate the payments cross */
.g2file{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);right:calc(var(--u)*3);display:flex;align-items:center;gap:calc(var(--u)*.8);transform:translateY(calc(var(--u)*-8));clip-path:inset(0 0 100% 0);transition:transform .7s cubic-bezier(.2,.8,.2,1),clip-path .7s cubic-bezier(.2,.8,.2,1)}
.g2file.on{transform:none;clip-path:inset(0)}
.g2file .ph{margin-right:calc(var(--u)*1.2)}
.g2file .pchip{margin:0;padding:calc(var(--u)*.6) calc(var(--u)*1)}
.g2lane{position:absolute;inset:0}
.gate{position:absolute;left:calc(50% - var(--u)*1.2);top:calc(var(--u)*7.6);bottom:calc(var(--u)*2.4);width:calc(var(--u)*2.4);background:var(--ink);color:var(--bone);transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.gate.on{transform:none}
.gate span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font:700 calc(var(--u)*1.1)/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
.g2row{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);height:calc(var(--u)*3.4);display:flex;align-items:center;font:600 calc(var(--u)*1.45)/1 var(--text);font-variant-numeric:tabular-nums;border-top:1px solid #cfc9bb;overflow:hidden}
.g2row .a{position:absolute;left:0;color:#4d4f59;transform:translateX(calc(var(--u)*-16));transition:transform .9s cubic-bezier(.65,0,.25,1)}
.g2row .b{position:absolute;left:calc(50% + var(--u)*2.6 - var(--u)*3);transform:translateX(calc(var(--u)*30));transition:transform .9s cubic-bezier(.65,0,.25,1) .25s;white-space:nowrap}
.g2row .ck{position:absolute;right:0;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1) 1s}
.g2row.on .a{transform:none}
.g2row.on .b{transform:none}
.g2row.on .ck{transform:none}
.g2row .a{color:var(--ink)}
/* round 2 fixes */
.m canvas{position:absolute;inset:0;width:100%;height:100%}
/* the PayBridge and Compute Calendar cards play their films (film-pb.html, film-cc.html); the frame never takes a scroll or tap */
.m.film{background:#fff}
.m.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
/* when the film ends, the panel's "See it work" button lights up (one soft ring, then it stays orange) */
.p-cta.lit{background:var(--sig);animation:cta-lit 1.4s cubic-bezier(.2,.8,.2,1) 1}
@keyframes cta-lit{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sig) 55%,transparent)}100%{box-shadow:0 0 0 calc(var(--u)*1.8) color-mix(in srgb,var(--sig) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.p-cta.lit{animation:none}}
.counters{grid-template-columns:1fr 1fr 1fr;gap:calc(var(--u)*2.4) calc(var(--u)*2.4)}
.cn:first-child{grid-column:1 / 4}
.cn b{font-size:calc(var(--u)*7)}
.cn:first-child b{font-size:calc(var(--u)*10)}
.pchip{font-size:calc(var(--u)*1.2);padding:calc(var(--u)*.5) calc(var(--u)*1);margin-bottom:calc(var(--u)*.5)}
.pd1 .pmap{top:calc(var(--u)*4.6);height:calc(var(--u)*12)}
.pd1 .ppay{top:calc(var(--u)*22.6);right:calc(var(--u)*24)}
.prow{padding:calc(var(--u)*.45) 0;font-size:calc(var(--u)*1.25)}
.g2row .b{left:calc(50% + var(--u)*2.2);font-size:calc(var(--u)*1.3)}
.g2row{font-size:calc(var(--u)*1.35)}
.pend .rd,.pend .pc100{font-size:calc(var(--u)*3.2)}

.pd1 .pmap{top:0;height:100%}
.pd1 .ppay{top:calc(var(--u)*22.2);right:calc(var(--u)*25)}
.pend .rd,.pend .pc100{font-size:calc(var(--u)*2.6)}
.g2row .b{font-size:calc(var(--u)*1.3)}
.pd1 .pmap path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.pd1 .pmap{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.4,0,.2,1) .4s}
.pd1 .pmap.on{clip-path:inset(0)}

/* round 3: Corporate Brain counters tally one at a time */
.cn{opacity:0;transform:translateY(calc(var(--u)*1.2)) scale(.97);transform-origin:left bottom;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.2)}   /* invisible until its turn; its space is reserved */
.cn.lit{opacity:1;transform:none}

/* About: the same big outline word as the products, cropped to the section, anchored in u like the content */
.about{overflow:hidden}
.about>*{position:relative;z-index:1}
.about>.ab-bg{position:absolute;z-index:0;left:0;top:0;pointer-events:none}

/* PayBridge design 3: messy files, one example, every payment checked */
.m.pay.d3 .pd3{display:block}
.pd3 .ph{font:700 calc(var(--u)*1.15)/1.2 var(--text);letter-spacing:.04em}
.f3cap{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}
.f3cap span{position:absolute;left:0;top:0;font:400 calc(var(--u)*2.2)/1 var(--disp);text-transform:uppercase;letter-spacing:.01em;opacity:0;transform:translateY(calc(var(--u)*.8));transition:opacity .45s,transform .45s}
.f3cap span.on{opacity:1;transform:none}
.f3files{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*6.4);width:calc(var(--u)*21)}
.f3file{position:relative;margin-bottom:calc(var(--u)*.9);padding:calc(var(--u)*.8) calc(var(--u)*1);background:var(--bone);border:2px solid var(--ink);
  transform:translateX(calc(var(--u)*-30)) rotate(calc((var(--i) - 1) * 1.6deg));opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .16s),opacity .4s calc(var(--i) * .16s),border-color .4s}
.f3file.on{transform:rotate(calc((var(--i) - 1) * 1.6deg));opacity:1}
.f3cols{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.4);margin-top:calc(var(--u)*.5)}
.f3cols span{font:500 calc(var(--u)*1)/1 ui-monospace,Menlo,Consolas,monospace;padding:calc(var(--u)*.35) calc(var(--u)*.5);background:rgba(10,11,15,.07)}
.pd3.learn .f3file:not(:first-child){opacity:.35}
.pd3.learn .f3file:first-child{border-color:var(--sigd)}
.f3map{position:absolute;left:calc(var(--u)*24.5);right:calc(var(--u)*20);top:calc(var(--u)*6.4);height:calc(var(--u)*14);overflow:visible}
.f3map path{fill:none;stroke:var(--sigd);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.f3map.on path{stroke-dashoffset:0}
.f3bank{position:absolute;right:calc(var(--u)*3);top:calc(var(--u)*6.4);width:calc(var(--u)*16);transform:translateX(calc(var(--u)*25));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.f3bank.on{transform:none}
.f3bank .pchip{margin-top:calc(var(--u)*.55)}
.f3lane{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*21.6);height:calc(var(--u)*13)}
.f3gate{position:absolute;left:calc(var(--u)*17);top:0;bottom:0;width:calc(var(--u)*.5);background:var(--sigd);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.65,0,.25,1)}
.f3gate.on{transform:none}
.f3gate{font-size:0}
.f3row{position:absolute;left:0;right:0;top:calc(var(--i) * var(--u) * 2.1);height:calc(var(--u)*2);display:flex;align-items:center;gap:calc(var(--u)*1.2);
  font:600 calc(var(--u)*1.2)/1 var(--text);font-variant-numeric:tabular-nums;border-top:1px solid #cfc9bb;opacity:0;transform:translateX(calc(var(--u)*-8));transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.f3row.on{opacity:1;transform:none}
.f3row .raw{width:calc(var(--u)*15.5);font:500 calc(var(--u)*1.05)/1 ui-monospace,Menlo,Consolas,monospace;color:#77736a;text-decoration:line-through;text-decoration-color:rgba(0,0,0,0);transition:text-decoration-color .3s .3s}
.f3row.on .raw{text-decoration-color:rgba(119,115,106,.6)}
.f3row .clean{flex:1;padding-left:calc(var(--u)*1.6);clip-path:inset(0 100% 0 0);transition:clip-path .45s .25s}
.f3row.on .clean{clip-path:inset(0)}
.f3row .amt{min-width:calc(var(--u)*8);text-align:right}
.f3row .ck{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);color:var(--sigd);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1) .45s}
.f3row.on .ck{transform:none}
.f3row.bad{color:#b3261e}
.f3row.bad .clean{color:#b3261e}
.f3row .held{font:700 calc(var(--u)*1)/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#b3261e;padding:calc(var(--u)*.4) calc(var(--u)*.7);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1) .45s}
.f3row.on .held{transform:none}
.f3count{position:absolute;left:calc(var(--u)*3);bottom:calc(var(--u)*2.6);font:600 calc(var(--u)*1.3)/1 var(--text);color:#4d4f59;opacity:0;transition:opacity .4s}
.f3count.on{opacity:1}
.f3count b{font:400 calc(var(--u)*3.6)/1 var(--disp);color:var(--ink);margin-right:calc(var(--u)*.6);font-variant-numeric:tabular-nums}
.pd3 .f3files,.pd3 .f3map,.pd3 .f3bank{transition-property:transform,opacity,border-color;}
.pd3.stream .f3files,.pd3.stream .f3map,.pd3.stream .f3bank{opacity:0;transform:translateY(calc(var(--u)*-3));pointer-events:none;transition:opacity .45s,transform .45s}
.pd3 .f3lane{top:calc(var(--u)*6.6);height:calc(var(--u)*19)}
.pd3 .f3row{top:calc(var(--i) * var(--u) * 3);height:calc(var(--u)*2.7);font-size:calc(var(--u)*1.35)}
.pd3 .f3row .held{margin-right:calc(var(--u)*1)}
.pd3 .f3count{bottom:calc(var(--u)*2.4)}
.pd3 .f3count b{font-size:calc(var(--u)*3)}
.pd3 .pend .rd,.pd3 .pend .pc100{font-size:calc(var(--u)*2.8)}
.pd3 .f3row .clean{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pd3 .f3row .held{flex:none;white-space:nowrap}
.pd3 .f3row.bad .amt{display:none}
.pd3 .f3row.bad .clean{flex:1 1 auto;overflow:visible}
.pd3 .f3count b{display:block;margin:0 0 calc(var(--u)*.4)}
/* the closing rule and studio name sit at the bottom of the About page */
.about{display:flex;flex-direction:column}
.about .foot{margin-top:auto}

/* PayBridge design 4: one client file scanned, the column map built, every line output in the bank's layout */
.m.pay.d4 .pd4{display:block}
.pd4{background:var(--ink);color:#d8d2c4}
.k4cap{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*2.6);font:400 calc(var(--u)*2.3)/1 var(--disp);text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.k4file{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*5.9);font:600 calc(var(--u)*1.05)/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#8a857a}
.k4map{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*8.2);display:flex;flex-wrap:wrap;gap:calc(var(--u)*.8)}
.k4m{display:inline-flex;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.55) calc(var(--u)*.9);border:1px solid rgba(201,169,97,.45);
  font:500 calc(var(--u)*1.05)/1 ui-monospace,"IBM Plex Mono",Menlo,Consolas,monospace;opacity:0;transform:translateY(calc(var(--u)*.6));transition:opacity .35s calc(var(--i) * .12s),transform .35s calc(var(--i) * .12s)}
.k4m i{font-style:normal;color:#8a857a}.k4m b{color:var(--sig);font-weight:400}.k4m em{font-style:normal;color:var(--bone)}
.pd4.s3 .k4m{opacity:1;transform:none}
.k4wall{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*2);top:calc(var(--u)*12);bottom:calc(var(--u)*7.6);display:flex;flex-direction:column;justify-content:space-around;overflow:hidden}
.k4l{white-space:pre;font:500 calc(var(--u)*1.25)/1 ui-monospace,"IBM Plex Mono",Menlo,Consolas,monospace;color:#6f6a60;opacity:0;transition:opacity .4s,color .4s}
.pd4.s1 .k4l{opacity:1}
.k4l.hd{color:#8a857a;letter-spacing:.02em}
.k4l.on{color:var(--bone)}
.k4l.hd.on{color:var(--sig)}
.k4l.on .k4t{border-left:2px solid var(--sig);padding-left:calc(var(--u)*1)}
.k4scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--sig);box-shadow:0 0 18px 2px var(--sig);opacity:0}
.pd4.s2 .k4scan{animation:k4scan 2.4s cubic-bezier(.45,0,.55,1) 1 forwards}
@keyframes k4scan{0%{top:0;opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.k4foot{position:absolute;right:calc(var(--u)*3);bottom:calc(var(--u)*2.4)}
.pd4 .pend{position:static}
.pd4 .pend .rd{font-size:calc(var(--u)*2.8)}
/* PayBridge design 4 on the white (bone) panel */
.pd4{background:var(--bone);color:var(--ink)}
.pd4 .k4cap{color:var(--ink)}
.pd4 .k4file{color:#6c675e}
.pd4 .k4m{border-color:var(--sigd)}
.pd4 .k4m i{color:#77736a}.pd4 .k4m b{color:var(--sigd)}.pd4 .k4m em{color:var(--ink)}
.pd4 .k4l{color:#8a857a}
.pd4 .k4l.hd{color:#6c675e}
.pd4 .k4l.on{color:var(--ink)}
.pd4 .k4l.hd.on{color:var(--sigd)}
.pd4 .k4l.on .k4t{border-left-color:var(--sigd)}
.pd4 .k4scan{background:var(--sigd);box-shadow:0 0 16px 2px rgba(201,169,97,.7)}
/* PayBridge design 4: three-step line on top; the scan does the rest */
.pd4 .k4cap{display:flex;align-items:center;gap:calc(var(--u)*1.2);color:#b8b2a4}
.pd4 .k4cap span{color:#b8b2a4;transition:color .35s}
.pd4 .k4cap span.done{color:#6c675e}
.pd4 .k4cap span.on{color:var(--ink)}
.pd4 .k4cap b{font-family:var(--text);font-weight:400;color:var(--sigd);font-size:.8em}
.pd4 .k4map,.pd4 .k4file{display:none}
.pd4 .k4wall{top:calc(var(--u)*7)}
/* PayBridge design 4, refined: raw file lines (small, grey) become a clean table in the site's own type as the scan passes */
.pd4 .k4cap{display:none}
.pd4 .k4wall{top:calc(var(--u)*3.4);bottom:calc(var(--u)*8);left:calc(var(--u)*3);right:calc(var(--u)*3);display:block}
.pd4 .k4l{position:relative;height:calc(var(--u)*3.2);border-bottom:1px solid rgba(10,11,15,.08);opacity:0;transition:opacity .5s}
.pd4.s1 .k4l{opacity:1}
.pd4 .k4l.on .k4t{border:0;padding:0}
.k4raw{position:absolute;left:0;top:50%;transform:translateY(-50%);font:400 calc(var(--u)*1.1)/1 ui-monospace,Menlo,Consolas,monospace;color:#a29c8f;white-space:pre;transition:opacity .45s,filter .45s,transform .45s}
.k4row{position:absolute;inset:0;display:grid;grid-template-columns:2.2fr 1fr 1.1fr 1fr;align-items:center;font:500 calc(var(--u)*1.45)/1 var(--text);color:var(--ink);font-variant-numeric:tabular-nums;
  clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(calc(var(--u)*.5));transition:clip-path .5s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.k4row .c1{text-align:right;padding-right:calc(var(--u)*2.4)}
.k4l.hd .k4row{font:700 calc(var(--u)*1.05)/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--sigd)}
.k4l.on .k4raw{opacity:0;filter:blur(3px);transform:translateY(-50%) translateY(calc(var(--u)*-.6))}
.k4l.on .k4row{clip-path:inset(0);opacity:1;transform:none}
.pd4 .k4scan{position:absolute;left:calc(var(--u)*-1);right:calc(var(--u)*-1);top:0;height:1px;background:var(--sigd);box-shadow:0 0 12px 1px rgba(201,169,97,.55);opacity:0;animation:none;transition:top .26s linear,opacity .4s}
.pd4.s2 .k4scan{opacity:1}
.pd4.s3 .k4scan{opacity:0}


/* PayBridge on every version: neutral greys for the scan and headers; Ready to send in black, not the accent */
.pd4 .k4l.hd .k4row{color:#6b6d76}
.pd4 .k4scan{background:#8d8f99;box-shadow:0 0 10px 1px rgba(141,143,153,.45)}
.pd4 .pend .rd{background:var(--ink);color:var(--bone)}
/* PayBridge heading: says what the panel is, not each step */
.k4head{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*2.6);right:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*.7)}
.k4head span{font:700 calc(var(--u)*.95)/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:#6b6d76}
.k4head b{font:400 calc(var(--u)*2.6)/1 var(--disp);text-transform:uppercase;color:var(--ink);font-weight:400}
.pd4 .k4wall{top:calc(var(--u)*9.4)}
.pd4 .k4l{height:calc(var(--u)*2.75)}
.pd4 .k4wall{bottom:calc(var(--u)*7)}
/* Corporate Brain intro: three counters (documents across the top, months and product below) */
.brain-m .counters{grid-template-columns:1fr 1fr}
.brain-m .cn:first-child{grid-column:1 / 3}

/* the Work list has no section label */
.work .sec-h{display:none}
/* footer: the studio name, then Work, About, LinkedIn and the year */
.site-foot{background:var(--ink);color:var(--bone);padding:calc(var(--u)*4) max(24px,calc(var(--u)*5)) calc(var(--u)*3);border-top:1px solid #1d2030}
.sf-brand{font:400 calc(var(--u)*7)/1 var(--disp);text-transform:uppercase;letter-spacing:.005em;color:var(--bone);margin:0 0 calc(var(--u)*3)}
.sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px calc(var(--u)*3);border-top:1px solid #2f3344;padding-top:calc(var(--u)*1.8);font:500 max(14px,calc(var(--u)*1.1))/1.2 var(--text)}
.sf-row a{color:var(--bone);text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:10px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.sf-row a:hover{border-color:var(--bone)}
.sf-row .sf-year{color:var(--dim);margin-left:auto}

/* ===== tablet and phone: one vertical stack per product (text, card, facts) in place of the pinned sideways rail ===== */
@media (max-width:900px){
  :root{--bar:52px;--gx:clamp(16px,5vw,40px);--pu:clamp(8px,calc((100vw - 2*var(--gx))/40),12.5px)}
  .nav{gap:24px;padding:0 var(--gx)}
  /* hero */
  .hero{height:auto;min-height:0;justify-content:flex-start;gap:22px;padding:calc(var(--bar) + 36px) var(--gx) 56px}   /* the headline starts under the nav, no empty screen above it */
  .hero .hero-eyebrow{font-size:13px;gap:12px;line-height:1.4}
  .hero .hero-eyebrow:before{width:28px}
  .hero h1{font-size:min(calc((100vw - 2*var(--gx))/3.5),150px);line-height:.92}   /* as wide as the screen: the longest line (the indented FINANCE) just fits */
  .hero h1 span{white-space:normal}
  .hero-row{margin-top:32px}
  .cta{font-size:14px;padding:18px 26px;min-height:52px;gap:12px}
  /* rail -> stack */
  .rail{height:auto}
  .stage{position:static;height:auto;min-height:0;overflow:visible}
  .anchor{display:none}
  .panel{position:relative;inset:auto;overflow:visible;pointer-events:auto;padding:56px var(--gx) 24px;border-top:1px solid #1d2030;display:flex;flex-direction:column;gap:32px;visibility:visible!important}
  .panel:first-of-type{border-top:0}
  .p-bgw{display:none}
  .p-text,.p-moment,.p-facts{position:static;transform:none!important;width:auto;max-width:none;left:auto;right:auto;top:auto;height:auto}
  .p-text{max-width:640px}
  .p-head{min-height:0}
  .p-kicker{font-size:12px;margin-bottom:14px}
  .p-name{font-size:clamp(48px,13vw,92px);line-height:.95}
  .p-line,.p-head .p-line{font-size:17px;line-height:1.5;margin:18px 0 28px}
  .p-moment{--u:var(--pu);height:calc(var(--pu)*46);max-width:760px}
  .p-facts{grid-template-columns:repeat(3,1fr);gap:24px}
  .fact{padding-top:14px}
  .fact b{font-size:clamp(26px,4.4vw,36px)}
  .fact span{margin-top:8px;font-size:15px;line-height:1.45}
  /* work */
  .work{padding:72px var(--gx) 56px;min-height:0}
  .sec-h{font-size:12px;margin-bottom:28px}
  .wrow{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .wrow h3{white-space:normal;font-size:clamp(44px,12vw,84px)}
  .wrow p i{font-size:13px}
  /* about */
  .about{padding:72px var(--gx) 56px;min-height:0}
  .about>.ab-bg{display:none}
  .ab{grid-template-columns:1fr;gap:32px}
  .ab h2{font-size:clamp(60px,17vw,120px)}
  .ab a.ab-under{margin-top:20px}
  .ab a.ab-quiet{font-size:13px;padding:0;margin-top:10px}
  .ab-ctas{gap:12px;margin-top:8px}
  .ab-ctas a.ab-btn{flex:1 1 auto;text-align:center}
  .ab h4{font-size:clamp(26px,6vw,34px);margin-bottom:18px}
  .ab p{font-size:16px;line-height:1.6;margin-bottom:16px}
  .ab a{font-size:14px;padding:16px 28px;margin-top:8px}
  /* footer */
  .site-foot{padding:48px var(--gx) 32px}
  .sf-brand{font-size:clamp(40px,11vw,72px);margin-bottom:28px}
  .sf-row{font-size:14px;gap:6px 24px;padding-top:16px}
  .sf-row .sf-year{margin-left:0;flex-basis:100%;order:5}
  /* the cards keep their art; each is re-proportioned for a narrow screen */
  .p-moment .cn:first-child b{font-size:calc(var(--u)*6.8)}
  .p-moment .cn b{font-size:calc(var(--u)*5.6)}
  .p-moment .big159{font-size:calc(var(--u)*4.4)}
  .p-moment .k4head b{font-size:calc(var(--u)*2.3);line-height:1.1}
  .p-moment .k4head{gap:calc(var(--u)*.6)}
  .p-moment .pd4 .k4wall{top:calc(var(--u)*10.6);bottom:calc(var(--u)*6.4)}
  .p-moment .k4row{font-size:calc(var(--u)*1.1);grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:calc(var(--u)*1.1);white-space:nowrap}
  .p-moment .k4row .c1{padding-right:0}
  .p-moment .k4l.hd .k4row{font-size:calc(var(--u)*.85);letter-spacing:.06em}
  .p-moment .pd4 .k4wall{left:calc(var(--u)*2);right:calc(var(--u)*2)}
  .p-moment .k4raw{font-size:calc(var(--u)*1.12)}
  .p-moment .cc-days{margin-left:calc(var(--u)*9);font-size:calc(var(--u)*.95);letter-spacing:0}
  .p-moment .cc-days span{padding-left:calc(var(--u)*.4)}
  .p-moment .cc-row{grid-template-columns:calc(var(--u)*9) 1fr}
  .p-moment .cc-rows{gap:calc(var(--u)*1.8)}
  .p-moment .cc-tr{height:calc(var(--u)*5.6)}
  .p-moment .cc-b span{font-size:calc(var(--u)*1.2)}
  .p-moment .cc-n{font-size:calc(var(--u)*1.45)}
  .p-moment .cc-st,.p-moment .lab{font-size:calc(var(--u)*1.05)}
  .p-moment .cc-note{flex-direction:column;gap:calc(var(--u)*.6);align-items:flex-start}
  .p-moment .cc-note b{font-size:calc(var(--u)*2.2)}
  .p-moment .cc-note span{font-size:calc(var(--u)*1.15)}
}
@media (max-width:600px){
  :root{--bar:52px}
  .nav{font-size:14px;gap:20px}
  .p-facts{grid-template-columns:1fr;gap:20px}
  .fact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:baseline;gap:14px}
  .fact b{font-size:30px}
  .fact span{margin-top:0}
  .p-name{font-size:clamp(46px,14vw,64px)}
  .p-line{font-size:17px}
  .wrow h3{font-size:clamp(40px,12.5vw,56px)}
}

/* Products, My process: plain words, the current item underlined in orange (Products, on the home and every product page). A soft halo in the page's own colour keeps each word
   readable over anything that scrolls behind it, and on a dark background the words turn light */
.nav{mix-blend-mode:normal!important;gap:30px!important;--nv-tx:#16181d;--nv-glow:rgba(250,250,252,.92)}
html.nav-dk .nav{--nv-tx:#f4f4f6;--nv-glow:rgba(8,9,14,.85)}
.nav a,.nav a:visited{display:inline-block;white-space:nowrap;padding:6px 0!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--nv-tx)!important;text-decoration:none;text-shadow:0 0 4px var(--nv-glow),0 0 10px var(--nv-glow),0 0 20px var(--nv-glow);transition:color .25s,border-color .2s}
.nav a:hover,.nav a.on,.nav a[aria-current]{border-bottom-color:#ff5a2c!important}
@media (max-width:900px){.nav{gap:22px!important}}
/* phones: no scroll bars, no grey tap flash */
@media (max-width:900px){html{scrollbar-width:none}html::-webkit-scrollbar,body ::-webkit-scrollbar{display:none}a,button{-webkit-tap-highlight-color:transparent}}
/* the soft fade behind the words: whatever scrolls up behind them is blurred and washed in the colour behind the words (navtone.js),
   solid through the words and fading out just below them, so content never runs into them */
.nav::before{content:"";position:fixed;left:0;right:0;top:0;height:92px;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:rgba(var(--nv-bg,10,11,15),.82);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%)}
@media (max-width:900px){.nav::before{height:64px}}
.fact span i.nb{font-style:normal;white-space:nowrap}
/* portrait monitors (a desktop width on a screen taller than 3:4, e.g. 1080x1920): the side-by-side frame fills the width but only
   the middle third of the height, with wide empty bands above and below. There each panel stacks instead, in the tablet order
   (text, card, facts): a little larger, the card across the width, the stack centred, the outline word on the screen's bottom edge.
   The hero's headline breaks WHAT / FINANCE as on phones, so it can be set larger and fills more of the first screen. */
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .hero h1{font-size:min(calc((100vw - var(--u)*8)/3.5),27vh)}
  .hero h1 span{white-space:normal}
  html:not(.rm) .stage{--tu:calc(var(--u)*1.3);--mu:calc(var(--u)*1.5);--px:calc(var(--u)*5);   /* text and card units; the side margin */
    --py:max(calc(var(--u)*7),calc((100vh - var(--tu)*31 - var(--mu)*40 - var(--u)*16)/2));   /* top of the stack: text 31, card 40, facts 7, gaps 5 + 4 */
    --my:calc(var(--py) + var(--tu)*31 + var(--u)*5)}
  html:not(.rm) .p-text{--u:var(--tu);left:var(--px);top:var(--py)}
  html:not(.rm) .p-moment{--u:var(--mu);left:var(--px);top:var(--my);width:calc(100% - var(--px)*2);max-width:none;height:calc(var(--mu)*40)}
  html:not(.rm) .p-facts{top:calc(var(--my) + var(--mu)*40 + var(--u)*4)}
  html:not(.rm) .p-bg{bottom:calc(var(--u)*-1.4)}   /* (reduced motion keeps its own static list) */
}

/* the product map (built in rail.js): the names along the bottom of the pinned rail. The current one is lit and the orange bar
   under it travels with the rail; a name under the pointer brightens and draws a thin line from its left. */
.rmap{position:absolute;left:50%;bottom:max(10px,calc(var(--u)*1.6));z-index:5;transform:translateX(-50%);display:flex;gap:calc(var(--u)*2.8);white-space:nowrap}
.rmap button{position:relative;padding:calc(var(--u)*.9) 0;font:600 max(12px,calc(var(--u)*.92))/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .25s}
.rmap button::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--u)*.35);height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.25,1)}
.rmap button:hover,.rmap button:focus-visible,.rmap button[aria-current]{color:var(--bone)}
.rmap button:hover::after{transform:scaleX(1)}
.rmap button[aria-current]::after{transform:scaleX(0)}   /* the orange bar is already there */
.rmap-bar{position:absolute;left:0;bottom:calc(var(--u)*.35);width:1px;height:2px;background:var(--sig);transform-origin:0 50%;pointer-events:none}
html.rm .rmap{display:none}
@media (max-width:900px){.rmap{display:none}}   /* phones and tablets: the plain stack, no map */
/* "See the products" points down, to the rail below; its arrow dips on hover */
.hero .cta:hover i{transform:translateY(calc(var(--u)*.35))}
/* Work list: the hovered row's words shift right by 2u; the row keeps that much room on its right so "See it work" is never cut */
@media (min-width:901px){.wrow{padding-right:calc(var(--u)*2.4)}}

/* crisp films: the film card's layer must not carry will-change:transform. Chrome freezes the raster scale of everything under a
   will-change:transform layer (the film's pieces included), so a piece first drawn small stays a small raster stretched up.
   rail.js still moves the card with translate3d, which keeps it on its own layer for the sideways travel. */
.p-moment:has(> .m.film){will-change:auto}
/* ===== LIT SCREEN: each white film is the light in a dark room, its card a hair in front of the page (rail.js INTEG) =====
   Off: dark glass. On (as the panel lands): a line of light, then the glass parts from the middle; a bloom hugs the card,
   its light spreads over the page and catches the giant outline word; a soft, wide shadow sits under the card.
   Only transform and opacity change, so nothing here repaints while a film plays. The white runs right to the card's edge. */
.m.film{overflow:hidden;background:#0c0d12}
.w1-lid{position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:linear-gradient(155deg,#181a23 0%,#0c0d12 62%);background-size:100% 200%}
.w1-top{top:0;height:calc(50% + 1px);background-position:0 0}
.w1-bot{top:50%;height:50%;background-position:0 100%}
.w1-edge{position:absolute;left:24%;right:24%;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 16px 4px rgba(255,255,255,.55);transform:scaleX(0)}
.w1-top .w1-edge{top:calc(100% - 1px)}
.w1-bot .w1-edge{top:0}
/* the bloom hugging the screen: painted once, it grows out from behind the card */
.w1-bloom{position:absolute;inset:0;pointer-events:none;box-shadow:0 -10px 38px 2px rgba(244,240,255,.24),0 -24px 120px 22px rgba(244,240,255,.1);
  transform:scale(.6);transition:transform 1.1s cubic-bezier(.2,.7,.15,1)}
.p-moment.w1-on .w1-bloom{transform:none}
/* the light on the page (grows out from the card as it powers on) */
.w1-glow{position:absolute;left:-22%;right:-22%;top:-38%;bottom:-52%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,243,255,.34),rgba(246,243,255,.16) 38%,rgba(246,243,255,.05) 68%,rgba(246,243,255,0));
  scale:.4;transition:scale 1.4s cubic-bezier(.2,.7,.15,1)}
.p-moment.w1-on .w1-glow{scale:1}
/* the card's shadow on the page: soft, wide, low contrast (rail.js lowers it a little while the card is lifted) */
.w1-shade{position:absolute;left:-7%;right:-7%;top:80%;height:44%;pointer-events:none;transform-origin:50% 0;
  background:radial-gradient(closest-side,rgba(4,4,7,.92),rgba(4,4,7,.62) 45%,rgba(4,4,7,0));transform:translate3d(0,calc(var(--u)*1),0)}
/* the giant outline word catching the light near the card */
.w1-litw{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s cubic-bezier(.2,.7,.15,1);
  -webkit-mask-image:radial-gradient(circle calc(var(--u)*52) at var(--lx,50%) var(--ly,50%),#000 0%,rgba(0,0,0,.6) 38%,transparent 100%);
  mask-image:radial-gradient(circle calc(var(--u)*52) at var(--lx,50%) var(--ly,50%),#000 0%,rgba(0,0,0,.6) 38%,transparent 100%)}
.panel.w1-lit-on .w1-litw{opacity:1}
.w1-lit{-webkit-text-stroke:1px rgba(236,232,223,.9);color:transparent}
@media (max-width:900px){.p-moment:has(> .m.film){position:relative}.w1-glow{left:-10%;right:-10%;top:-20%;bottom:-26%}.w1-shade{top:70%;height:46%}}
/* the screen's glass (a faint sheen and edge falloff over the picture), its light on the floor in front of it, and its white
   light spilling onto the page from each side, as bright as that side of the picture (rail.js; film-light.js) */
.w1-glass{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 125% at 50% 40%,rgba(18,20,38,0) 60%,rgba(18,20,38,.055) 100%),
             linear-gradient(112deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.05) 40%,rgba(255,255,255,0) 52%)}
.w1-floor{position:absolute;left:-6%;right:-6%;top:108%;height:40%;pointer-events:none;transform-origin:50% 0;
  background:radial-gradient(closest-side,rgba(255,255,255,.12),rgba(255,255,255,.045) 55%,rgba(255,255,255,0));
  scale:.4;transition:scale 1.4s cubic-bezier(.2,.7,.15,1)}
.p-moment.w1-on .w1-floor{scale:1 .62}
.w1-amb{position:absolute;pointer-events:none;opacity:0;background:#fff;transition:opacity .35s linear}
.w1-amb-l{right:100%;top:-14%;bottom:-14%;width:30%;-webkit-mask-image:radial-gradient(farthest-side at 100% 50%,#000,transparent);mask-image:radial-gradient(farthest-side at 100% 50%,#000,transparent)}
.w1-amb-r{left:100%;top:-14%;bottom:-14%;width:30%;-webkit-mask-image:radial-gradient(farthest-side at 0% 50%,#000,transparent);mask-image:radial-gradient(farthest-side at 0% 50%,#000,transparent)}
.w1-amb-t{bottom:100%;left:-8%;right:-8%;height:34%;-webkit-mask-image:radial-gradient(farthest-side at 50% 100%,#000,transparent);mask-image:radial-gradient(farthest-side at 50% 100%,#000,transparent)}
.w1-amb-b{top:100%;left:-8%;right:-8%;height:42%;-webkit-mask-image:radial-gradient(farthest-side at 50% 0%,#000,transparent);mask-image:radial-gradient(farthest-side at 50% 0%,#000,transparent)}
@media (max-width:900px){.w1-amb-l,.w1-amb-r{width:14%}}
/* phones and tablets: the light around each film card (.w1-amb, .w1-glow) spills past the screen's right edge; clipped here, so the
   page stays exactly the screen's width (it had grown to 421px on a 390px phone, could be panned sideways, and Home, Work,
   About sat off the edge) */
@media (max-width:900px){html{overflow-x:clip}}
/* ===== SCREEN SET INTO THE PAGE (rail.js INTEG, ?screen=a|b|c; off: the card on top of the page as before) =====
   Once landed, the screen sits behind the page, seen through an opening in it. .w1-inset is the opening's shade on the picture,
   over the film, its glass and lids (an inset shadow on the card itself would paint under the iframe); clear in the middle, so
   none of the film is dimmed beyond the shadow's edge. .w1-rim is the opening's edge on the page around the card. The card's
   shadow on the page goes once it has landed. rail.js fades these in, and the shadow out, on the tilt's own curve, so they change
   only while the card moves; the flow layouts (phones, tablets, reduced motion) show the landed look.
   Each is ONE element, so the rim and the shade are one continuous shape with true corners. (Drawn as four edge bands before,
   the bands met with a seam where they crossed the rim near each corner.) Both sit beside the card's glass, not inside its
   clip, and rail.js gives them the card's tilt. Each is its own layer and only its opacity changes: nothing repaints, and the
   film rasterises exactly as before. The shadows: --ins (inside) and --rimsh (outside), drawn under
   the frame's own (--fin, --fout); a frame inside the opening gives its width as --fw, and the shade starts inside it. */
.w1-inset,.w1-rim{display:none;position:absolute;inset:0;pointer-events:none;will-change:opacity,transform}   /* (opacity alone left the
   layer up to 2 device px off the opening at 1.5x, uncovering a sliver of the picture along the left and top edges) */
.scr-in .w1-inset{display:block;z-index:3;box-shadow:var(--fin,0 0 transparent),var(--ins,0 0 transparent)}
.w1-rim{box-shadow:var(--fout,0 0 transparent),var(--rimsh,0 0 transparent)}
.scr-in .w1-shade{opacity:0}
/* a, subtle: a soft shade along the top and sides; no rim */
.scr-a .w1-inset{
  --ins:inset 0 calc(var(--u)*.55) calc(var(--u)*1.2) calc(var(--u)*-.3 + var(--fw,0px)) rgba(6,7,11,.24),
    inset calc(var(--u)*.45) 0 calc(var(--u)*1.1) calc(var(--u)*-.4 + var(--fw,0px)) rgba(6,7,11,.14),inset calc(var(--u)*-.45) 0 calc(var(--u)*1.1) calc(var(--u)*-.4 + var(--fw,0px)) rgba(6,7,11,.14)}
/* b, recessed: deeper, heaviest under the top edge as if lit from above, and (with no frame) a faint light lip on the page along
   the bottom edge. With a frame, the frame is the opening's edge: no lip, and the shade fades in evenly from the frame all the
   way round (still a little deeper at the top), so the corners and the bottom meet the frame as softly as the top does. */
.scr-b .w1-inset{
  --ins:inset 0 calc(var(--u)*.2) calc(var(--u)*.3) var(--fw,0px) rgba(6,7,11,.32),
    inset 0 calc(var(--u)*1.3) calc(var(--u)*2) calc(var(--u)*-.6 + var(--fw,0px)) rgba(6,7,11,.4),
    inset calc(var(--u)*.7) 0 calc(var(--u)*1.4) calc(var(--u)*-.6 + var(--fw,0px)) rgba(6,7,11,.22),inset calc(var(--u)*-.7) 0 calc(var(--u)*1.4) calc(var(--u)*-.6 + var(--fw,0px)) rgba(6,7,11,.22),
    inset 0 calc(var(--u)*-.25) calc(var(--u)*.6) calc(var(--u)*-.3 + var(--fw,0px)) rgba(6,7,11,.1)}
html.scr-b:not(.frm-off) .w1-inset{
  --ins:inset 0 calc(var(--u)*.2) calc(var(--u)*.3) var(--fw,0px) rgba(6,7,11,.24),
    inset 0 calc(var(--u)*1.3) calc(var(--u)*2) calc(var(--u)*-.6 + var(--fw,0px)) rgba(6,7,11,.32),
    inset 0 0 calc(var(--u)*.7) var(--fw,0px) rgba(6,7,11,.3),
    inset 0 0 calc(var(--u)*1.8) var(--fw,0px) rgba(6,7,11,.24)}
.scr-b .w1-rim{
  --rimsh:0 max(1px,calc(var(--u)*.05)) 0 rgba(6,7,11,.55),0 max(2px,calc(var(--u)*.12)) 0 rgba(236,232,223,.17),0 calc(var(--u)*.3) calc(var(--u)*.5) calc(var(--u)*-.1) rgba(236,232,223,.06)}
/* c, a shallow well: a thin rim just inside the opening, the shade, and the page darkening toward the opening */
.scr-c .w1-inset{
  --ins:inset 0 0 0 calc(max(1px,calc(var(--u)*.06)) + var(--fw,0px)) rgba(6,7,11,.5),inset 0 0 calc(var(--u)*.4) calc(var(--u)*.06 + var(--fw,0px)) rgba(6,7,11,.18),
    inset 0 calc(var(--u)*.9) calc(var(--u)*1.5) calc(var(--u)*-.4 + var(--fw,0px)) rgba(6,7,11,.32),
    inset calc(var(--u)*.55) 0 calc(var(--u)*1.2) calc(var(--u)*-.45 + var(--fw,0px)) rgba(6,7,11,.18),inset calc(var(--u)*-.55) 0 calc(var(--u)*1.2) calc(var(--u)*-.45 + var(--fw,0px)) rgba(6,7,11,.18)}
.scr-c .w1-rim{
  --rimsh:0 0 0 max(1px,calc(var(--u)*.06)) rgba(255,255,255,.06),0 calc(var(--u)*-.2) calc(var(--u)*2) calc(var(--u)*.2) rgba(3,3,6,.45)}
/* the rim layer only where there is something on the page around the opening: b's lip (no frame), c's well, frames 1c, 2, 3 */
html.scr-b.frm-off .w1-rim,html.scr-c .w1-rim,html.frm-1c.scr-in .w1-rim,html.frm-2.scr-in .w1-rim,html.frm-3.scr-in .w1-rim{display:block}

/* ===== FRAME around the screen (rail.js INTEG, ?frame=1a|1b|1c|1|2|3|off), drawn in the same layers as the shade above =====
   1, bezel: a slim, even dark rim inside the opening, like a monitor's bezel (it covers the outermost few px of the picture,
      its own width); the shade starts inside it.
   1a, the bezel much lighter: the same width, a soft slate grey between the page's ink and the picture.
   1b, lighter and thinner: about half the width in a paler grey, a delicate edge.
   1c, frosted: a light, translucent rim on the page just outside the opening (the page shows through it), so it takes on
      whatever light is around it; it covers none of the picture.
   2, hairline: a fine double line, light on the page just outside the opening and dark just inside it, so the opening reads as
      cut cleanly (each one px).
   3, bevel: a narrow chamfered lip on the page around the opening, light on the top and left, shade on the bottom and right.
   Solid lines, no blur, so they stay crisp at any scale; one line each (no second light line inside a bezel). Every frame
   replaces b's lip (the frame is the opening's edge). A bezel (1, 1a, 1b) reaches 1px past the opening onto the page: the
   picture's own edge pixel is then always under it, so no sliver of the picture shows along the bezel's outer edge where the
   opening falls between two device pixels (it did along the bottom and right). (Clipping the picture 1px in instead would
   do the same, but a clip-path on the film costs it a lot of frames on the software renderer.) */
html.frm-1 .w1-inset,html.frm-1a .w1-inset,html.frm-1b .w1-inset{inset:-1px;--fw:calc(var(--bz) + 1px);--fin:inset 0 0 0 calc(var(--bz) + 1px) var(--bzc)}
html.frm-1 .w1-inset{--bz:max(3px,calc(var(--u)*.3));--bzc:#111318}
html.frm-1a .w1-inset{--bz:max(3px,calc(var(--u)*.3));--bzc:#5b5e68}
html.frm-1b .w1-inset{--bz:max(2px,calc(var(--u)*.15));--bzc:#8c8f99}
html.frm-1c .w1-rim{--bz:max(3px,calc(var(--u)*.3));--rimsh:0 0 transparent;
  --fout:0 0 0 var(--bz) rgba(236,232,223,.17),0 0 0 calc(var(--bz) + 1px) rgba(236,232,223,.06)}
html.frm-2 .w1-inset{--fw:1px;--fin:inset 0 0 0 1px rgba(6,7,11,.7)}
html.frm-2 .w1-rim{--fout:0 0 0 1px rgba(236,232,223,.42);--rimsh:0 0 transparent}
html.frm-3 .w1-rim{--bv:max(2px,calc(var(--u)*.2));--rimsh:0 0 transparent;
  --fout:calc(var(--bv)*-1) calc(var(--bv)*-1) 0 0 rgba(236,232,223,.3),var(--bv) var(--bv) 0 0 rgba(0,0,0,.6),0 0 0 var(--bv) rgba(120,122,134,.22)}

/* ===== POWER ON (rail.js INTEG, ?on=1|2|3; 0: the glass parting from the middle, as before) =====
   The screen is off as dark glass and opens onto the picture as the panel lands; then the film is cued, as before. Only the
   opening travels: the glass itself stays put (1 and 2 move each piece of glass out while its glass moves back in; 3 clips the
   picture), so nothing slides and nothing fades in place. The light on the page (bloom, glow, floor, the lit outline word, and
   rail.js's spill at each side) comes up from where the picture opens, over the same time.
   1, line: a line of light across the middle; the picture opens from it top and bottom, the line riding each edge out (0.7 s).
   2, sweep: a soft band of light crosses the glass on a slant, left to right; the picture is behind it (0.76 s).
   3, iris: the picture opens from the centre as a rounded rectangle growing to the full screen, a rim of light on its edge
      (0.66 s). */
.m.film{background:linear-gradient(155deg,#181a23 0%,#0c0d12 62%)}   /* the dark glass itself (3 opens the picture over it) */
.w1-g{position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(155deg,#181a23 0%,#0c0d12 62%)}
/* 1, line: two halves of glass (each overflows nothing; its glass is the whole screen's) and a line of light on each inner edge */
.w1-ln{position:absolute;left:0;right:0;z-index:2;overflow:hidden;pointer-events:none}
.w1-ln-t{top:0;height:calc(50% + 1px)}.w1-ln-b{top:50%;height:50%}
.w1-ln-t .w1-g{height:calc((100% - 1px)*2)}.w1-ln-b .w1-g{top:-100%;height:200%}
.w1-ll{position:absolute;left:0;right:0;height:max(1px,calc(var(--u)*.06));background:#fff;transform:scaleX(0);
  box-shadow:0 0 calc(var(--u)*.8) calc(var(--u)*.12) rgba(255,255,255,.55),0 0 calc(var(--u)*2.4) calc(var(--u)*.3) rgba(255,255,255,.18)}
.w1-ln-t .w1-ll{bottom:1px}.w1-ln-b .w1-ll{top:0}
/* 2, sweep: one sheet of glass wider than the screen (it stays over the corners on the slant), its glass the screen's own; a soft
   band of light on its leading edge, and that light on the glass just behind it */
.w1-sw{position:absolute;top:0;bottom:0;left:calc(var(--u)*-12);right:calc(var(--u)*-12);z-index:2;overflow:hidden;pointer-events:none;transform:skewX(-12deg)}
.w1-sw .w1-g{left:calc(var(--u)*12);right:calc(var(--u)*12);transform:skewX(12deg)}
.w1-sw::after{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--u)*4);background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
.w1-swb{position:absolute;top:0;bottom:0;left:calc(var(--u)*-12 - 20%);width:20%;z-index:2;pointer-events:none;visibility:hidden;
  transform:skewX(-12deg);transform-origin:calc(350% + var(--u)*12) 50%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 50%,rgba(255,255,255,.42) 90%,rgba(255,255,255,.6))}
/* 3, iris: the rim of light under the picture's edge (a crisp line and a soft halo), hidden until it opens */
.w1-ir{position:absolute;inset:0;pointer-events:none;clip-path:inset(50%);opacity:0}
.w1-ir1{background:rgba(255,255,255,.9)}
.w1-ir2{background:rgba(255,255,255,.14)}
/* the light on the page, from where the picture opens (the on state is LIT SCREEN's: .p-moment.w1-on, .panel.w1-lit-on) */
html.on-1 .w1-bloom{transform:scale(1,.06);transition:transform .62s cubic-bezier(.25,.7,.15,1) .12s}
html.on-1 .w1-glow{scale:1 .1;transition:scale .7s cubic-bezier(.25,.7,.15,1) .12s}
html.on-1 .w1-floor{scale:.9 .1;transition:scale .6s cubic-bezier(.25,.7,.15,1) .3s}
html.on-1 .w1-litw{transition:opacity .75s cubic-bezier(.3,.6,.2,1) .15s}
html.on-2 .w1-bloom{transform-origin:0 50%;transform:scale(.02,1);transition:transform .6s cubic-bezier(.45,.05,.25,1) .1s}
html.on-2 .w1-glow{transform-origin:15% 50%;scale:.05 1;transition:scale .66s cubic-bezier(.45,.05,.25,1) .1s}
html.on-2 .w1-floor{transform-origin:5% 0;scale:.04 .62;transition:scale .66s cubic-bezier(.45,.05,.25,1) .1s}
html.on-2 .w1-litw{transition:opacity .85s cubic-bezier(.45,.05,.25,1) .1s}
html.on-3 .w1-bloom{transform:scale(.2);transition:transform .66s cubic-bezier(.3,.65,.15,1)}
html.on-3 .w1-glow{scale:.2;transition:scale .75s cubic-bezier(.3,.65,.15,1)}
html.on-3 .w1-floor{scale:.2 .12;transition:scale .75s cubic-bezier(.3,.65,.15,1) .08s}
html.on-3 .w1-litw{transition:opacity .75s cubic-bezier(.3,.65,.15,1)}