/* Inner pages (Careers, Contact, Thanks) and their forms.
   Same world as the four-suits home: dark sheets with a low red glow, Gloock headlines, eyebrows that carry
   a suit pip, and playing-card panels with a corner index top-left and the same index turned 180° bottom-right. */

.sp{width:12px;height:12px;flex:none;vertical-align:-1px}
.sp.r{color:var(--red)}

/* ---------- page shell ---------- */
.ip{position:relative;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + clamp(48px,8vw,112px)) var(--gutter) clamp(72px,10vw,140px);
  background:radial-gradient(70% 55% at 88% 0%,rgba(28,4,2,.95) 0%,rgba(28,4,2,0) 70%),
             radial-gradient(60% 40% at 0% 100%,rgba(28,4,2,.7) 0%,rgba(28,4,2,0) 70%),var(--bg)}
/* desktop: copy and "what happens next" in the left column, the form card spans the right.
   phone: copy, then the form, then "what happens next" (the DOM is in that order too). */
.ip-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"copy card" "aside card";
  grid-template-rows:auto 1fr;column-gap:clamp(36px,6vw,96px);row-gap:28px;align-items:start}
.ip-copy{grid-area:copy;display:grid;gap:20px}
.ip-in>.fcard{grid-area:card}
.ip-aside{grid-area:aside}
.ip .eb{display:flex;align-items:center;gap:8px}
.ip .eb .sp{color:var(--ink)}
.ip .eb .sp.r{color:var(--red)}
.ip h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(42px,5.6vw,84px);line-height:.97;letter-spacing:-.014em;text-wrap:balance}
.ip .lede{margin:0;max-width:44ch;color:var(--dim);font-size:clamp(14px,1.3vw,16px)}
@media (max-width:980px){
  .ip-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "aside";grid-template-rows:auto;row-gap:36px}
}

/* what happens next (a real sequence, so it's numbered) */
.next{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint);counter-reset:n}
.next li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--dim)}
.next li::before{counter-increment:n;content:counter(n);font-family:var(--f-display);font-size:20px;line-height:1;color:var(--ink)}
.next b{display:block;margin-bottom:2px;font-weight:400;color:var(--ink)}

/* buttons, same build as the home page */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;border-radius:8px;
  font:inherit;font-size:13px;letter-spacing:.01em;color:#000;
  background:linear-gradient(var(--red),var(--red)) 0 0/0% 100% no-repeat,var(--ink);
  transition:background-size .38s var(--ease),color .25s ease,opacity .2s ease}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn.o{color:var(--ink);border:1px solid var(--faint);background:linear-gradient(var(--red),var(--red)) 0 0/0% 100% no-repeat,transparent}
.btn.o:hover,.btn.o:focus-visible{border-color:var(--red)}
.btn[disabled]{opacity:.55;cursor:progress}
.ip a.text{color:var(--ink);border-bottom:1px solid var(--faint);transition:border-color .2s ease,color .2s ease}
.ip a.text:hover,.ip a.text:focus-visible{color:var(--red-hot);border-color:var(--red-hot)}
.ip a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- the form card ---------- */
.fcard{position:relative;padding:max(52px,clamp(26px,3.4vw,44px)) clamp(20px,3.4vw,44px) max(60px,clamp(30px,3.6vw,48px));border-radius:16px;
  background:linear-gradient(180deg,#0f0e0e 0%,#0a0909 100%);border:1px solid var(--faint);box-shadow:0 40px 90px rgba(0,0,0,.55)}
.fcard .ix{position:absolute;top:14px;left:16px;display:grid;justify-items:center;gap:3px;font-family:var(--f-display);font-size:15px;line-height:1;color:var(--ink);pointer-events:none}
.fcard .ix .sp{color:var(--red)}
.fcard .ix.b{top:auto;left:auto;bottom:14px;right:16px;transform:rotate(180deg)}
.fcard h2{margin:0 0 6px;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05}
.fcard .sub{margin:0 0 26px;font-size:13px;color:var(--dim)}

form.nf{display:grid;gap:22px}
.nf .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@media (max-width:620px){.nf .grid2{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:8px;min-width:0}
.field>label,.field>.lbl,.nf legend{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;letter-spacing:.01em;color:var(--ink);padding:0}
.opt{font-size:11px;color:var(--dim)}
.help{margin:0;font-size:11.5px;color:var(--dim)}
.nf input[type=text],.nf input[type=email],.nf input[type=url],.nf select,.nf textarea{
  width:100%;min-width:0;height:48px;padding:0 14px;border-radius:8px;border:1px solid var(--faint);background:#070606;color:var(--ink);
  font:inherit;font-size:15px;transition:border-color .2s ease,background-color .2s ease}
.nf textarea{height:auto;min-height:132px;padding:12px 14px;line-height:1.5;resize:vertical}
.nf select{appearance:none;padding-right:40px;cursor:pointer;
  background:#070606 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23f4f4f2' stroke-width='1.3'/%3E%3C/svg%3E") right 14px center/10px no-repeat}
.nf select:invalid{color:var(--dim)}
.nf select option{color:var(--ink);background:#0e0d0d}
.nf ::placeholder{color:rgba(244,244,242,.32)}
.nf input:hover,.nf select:hover,.nf textarea:hover{border-color:rgba(244,244,242,.3)}
.nf input:focus-visible,.nf select:focus-visible,.nf textarea:focus-visible{outline:none;border-color:var(--ink);background-color:#0b0a0a;box-shadow:0 0 0 3px rgba(219,37,24,.45)}
.nf [aria-invalid=true]{border-color:var(--red-hot)!important}
.err{margin:0;font-size:12px;color:var(--red-hot);min-height:0}
.err:empty{display:none}
.count{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.nf fieldset{margin:0;padding:0;border:0;min-width:0}
.nf legend{margin-bottom:10px;width:100%}

/* choice chips (radio) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;height:42px;padding:0 15px;border-radius:8px;border:1px solid var(--faint);font-size:13px;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;font-variant-numeric:tabular-nums}
.chip:hover span{border-color:rgba(244,244,242,.34)}
.chip input:checked+span{background:var(--ink);color:#000;border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.chips[aria-invalid=true] .chip span{border-color:rgba(255,58,38,.6)}

/* suit cards (checkbox) */
.suitset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:620px){.suitset{grid-template-columns:minmax(0,1fr)}}
.suitc{position:relative;display:block;cursor:pointer}
.suitc input{position:absolute;opacity:0;width:1px;height:1px}
.suitc .face{position:relative;display:grid;align-content:end;gap:6px;height:100%;min-height:138px;padding:46px 18px 18px;border-radius:12px;border:1px solid var(--faint);background:var(--panel);
  transition:border-color .2s ease,background-color .2s ease,transform .3s var(--ease)}
.suitc .face .ix{position:absolute;top:12px;left:14px;display:grid;justify-items:center;gap:3px;font-family:var(--f-display);font-size:14px;line-height:1}
.suitc .face .ix .sp{width:12px;height:12px;color:var(--ink)}
.suitc .face .ix .sp.r{color:var(--red)}
.suitc b{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.05}
.suitc small{font-size:12px;line-height:1.45;color:var(--dim)}
.suitc .tick{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:1px solid var(--faint);font-size:12px;color:transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.suitc:hover .face{border-color:rgba(244,244,242,.32)}
.suitc input:checked+.face{border-color:var(--ink);background:#151413;transform:translateY(-2px)}
.suitc input:checked+.face .tick{background:var(--ink);border-color:var(--ink);color:#000}
.suitc input:focus-visible+.face{outline:2px solid var(--red);outline-offset:3px}
.suitc.unsure{justify-self:start;width:min(100%,280px)}
.suitc.unsure .face{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;padding:14px 14px 14px 18px}
.suitc.unsure .tick{position:static;flex:none;order:2}
.suitc.unsure b{font-size:18px;line-height:1.1}
.suitset+.err,.suitwrap .err{margin-top:8px}
.suitwrap[aria-invalid=true] .face{border-color:rgba(255,58,38,.6)}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.fine{margin:0;font-size:11.5px;color:var(--dim)}
.fine a{color:var(--ink);border-bottom:1px solid var(--faint)}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-top:6px}
.actions .right{display:flex;gap:8px;margin-left:auto}
.formerr{margin:0;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,58,38,.5);background:rgba(219,37,24,.1);font-size:13px;color:var(--ink)}

/* ---------- stepper (only when JS runs; without it every step shows and the form posts normally) ---------- */
.steps{display:none}
html.js .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 26px;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;gap:8px;font-size:11.5px;color:var(--dim);transition:color .3s ease}
.steps li::before{content:"";height:2px;border-radius:2px;background:var(--faint);transition:background-color .4s var(--ease)}
.steps li span{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li i{font-style:normal;font-family:var(--f-display);font-size:15px;color:var(--ink)}
.steps li[aria-current=step]{color:var(--ink)}
.steps li[aria-current=step]::before{background:var(--red)}
.steps li.done::before{background:var(--ink)}
.steps li.done{color:var(--soft,rgba(244,244,242,.84))}
@media (max-width:520px){.steps li span b{display:none}}
html.js .step[hidden]{display:none!important}
html.js .step{animation:stepin .45s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .step+.step{padding-top:22px;border-top:1px solid var(--hair)}
html:not(.js) .js-only{display:none}

/* ---------- sent ---------- */
.sent{display:grid;gap:16px;justify-items:start;padding:8px 0 0;animation:stepin .5s var(--ease)}
.sent .pip{display:grid;place-items:center;width:54px;height:76px;border-radius:8px;background:var(--paper);color:var(--red);box-shadow:0 14px 30px rgba(0,0,0,.5);transform:rotate(-6deg)}
.sent .pip .sp{width:22px;height:22px;color:var(--red)}
.sent h2,.sent h1{margin:6px 0 0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,3.4vw,48px);line-height:1}
.sent p{margin:0;max-width:46ch;color:var(--dim)}
.preview-note{margin-top:10px;width:100%;padding:14px 16px;border-radius:10px;border:1px dashed rgba(244,244,242,.25);font-size:12px;color:var(--dim)}
.preview-note b{color:var(--ink);font-weight:400}
.preview-note dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:10px 0 0}
.preview-note dt{color:var(--dim)}
.preview-note dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  html.js .step,.sent{animation:none}
  .suitc input:checked+.face{transform:none}
}

/* ===================== About ===================== */
.ab-hero{min-height:0;padding-bottom:clamp(72px,9vw,128px)}
.ab-hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center}
.ab-copy{display:grid;gap:22px}
.ab-copy h1{font-size:clamp(46px,6.6vw,104px)}
.ab-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (max-width:900px){.ab-hero-in{grid-template-columns:minmax(0,1fr)}}

/* a hand of four cards, one per suit; spreads a little on hover */
.hand{position:relative;height:clamp(260px,30vw,380px);max-width:100%}
.hc{--w:clamp(130px,13vw,188px);position:absolute;left:50%;bottom:6%;width:var(--w);height:calc(var(--w) * 1.4);margin-left:calc(var(--w) / -2);
  display:grid;place-items:center;border-radius:12px;background:var(--paper);color:var(--paper-ink);border:1px solid rgba(0,0,0,.25);
  box-shadow:-10px 18px 36px rgba(0,0,0,.55);transform-origin:50% 150%;
  transform:rotate(calc((var(--i) - 1.5) * 11deg));transition:transform .6s var(--ease)}
.hand:hover .hc{transform:rotate(calc((var(--i) - 1.5) * 16deg)) translateY(-6px)}
.hc .big{width:42%;height:42%;color:var(--paper-ink)}
.hc.r .big,.hc.r .ix svg{color:var(--red)}
.hc .ix{position:absolute;top:10px;left:11px;display:grid;justify-items:center;gap:3px;font-style:normal;font-family:var(--f-display);font-size:14px;line-height:1}
.hc .ix svg{width:11px;height:11px;color:var(--paper-ink)}
.hc .ix.b{top:auto;left:auto;bottom:10px;right:11px;transform:rotate(180deg)}
@media (max-width:900px){.hand{height:clamp(240px,62vw,320px)}}
@media (prefers-reduced-motion:reduce){.hc{transition:none}.hand:hover .hc{transform:rotate(calc((var(--i) - 1.5) * 11deg))}}

/* sections */
.ab-page{--out:cubic-bezier(.16,1,.3,1)}
.ab-sec{position:relative;padding:clamp(80px,11vw,150px) var(--gutter);border-top:1px solid var(--hair);
  background:radial-gradient(70% 50% at 12% 0%,rgba(28,4,2,.7) 0%,rgba(28,4,2,0) 70%),var(--bg)}
.ab-in{max-width:1180px;margin:0 auto;display:grid;gap:32px}
.ab-head{display:grid;gap:16px;max-width:860px}
.ab-sec .eb,.ab-block .eb{display:flex;align-items:center;gap:8px}
.ab-sec .eb .sp{color:var(--ink)}
.ab-sec .eb .sp.r{color:var(--red)}
.ab-sec h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.8vw,68px);line-height:1;letter-spacing:-.012em;text-wrap:balance}
.ab-sec .lede{margin:0;max-width:56ch;color:var(--dim);font-size:clamp(14px,1.3vw,16px)}

/* scroll reveal: only rows that start below the fold are held back (forms.js-style: content is visible without JS) */
.rv{transition:opacity .8s var(--out),transform 1s var(--out);transition-delay:calc(var(--d,0) * 90ms)}
.rv.pre{opacity:0;transform:translateY(28px)}

/* how we think: a sticky lead and three open rows, like the suit chapters on the home page */
.ab-two{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,7vw,120px);align-items:start}
.ab-lead{display:grid;gap:18px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 18px;padding:34px 0 38px;border-bottom:1px solid var(--faint)}
.row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.row:hover::after{transform:scaleX(1)}
.row .num{font-family:var(--f-display);font-size:clamp(30px,3vw,44px);line-height:.9;color:rgba(244,244,242,.3);transition:color .4s ease,transform .5s var(--out)}
.row:hover .num{color:var(--red);transform:translateX(4px)}
.row h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.008em}
.row p{margin:12px 0 0;max-width:46ch;font-size:13.5px;line-height:1.75;color:var(--dim)}
@media (max-width:900px){.ab-two{grid-template-columns:minmax(0,1fr)}.row{grid-template-columns:52px minmax(0,1fr)}}

/* what we do: four suit rows; hovering one lights it from the left and slides the arrow in */
.srows{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.srows li{border-bottom:1px solid var(--faint)}
.srow{position:relative;isolation:isolate;display:grid;grid-template-columns:62px minmax(0,4fr) minmax(0,6fr) 28px;align-items:center;gap:14px 24px;padding:26px 14px 26px 6px;overflow:hidden}
.srow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(219,37,24,.16) 0%,rgba(219,37,24,.04) 45%,rgba(219,37,24,0) 75%);
  transform:translateX(-101%);transition:transform .7s var(--ease)}
.srow:hover::before,.srow:focus-visible::before{transform:none}
.srow:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.srow .pip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:16px;line-height:1;color:var(--dim)}
.srow .pip svg{width:16px;height:16px;color:var(--ink);transition:transform .5s var(--out)}
.srow.r .pip svg{color:var(--red)}
.srow:hover .pip svg{transform:scale(1.25) rotate(-8deg)}
.srow .nm{display:grid;gap:4px;min-width:0}
.srow b{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1;transition:transform .5s var(--out)}
.srow:hover b{transform:translateX(6px)}
.srow .tl{font-size:12.5px;color:var(--dim)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border:1px solid var(--faint);border-radius:999px;font-size:11.5px;color:rgba(244,244,242,.86);
  background:rgba(0,0,0,.25);transition:border-color .3s ease,color .3s ease}
.srow:hover .pills span{border-color:rgba(244,244,242,.32);color:var(--ink)}
.srow .go{justify-self:end;font-size:18px;color:var(--red-hot);opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .5s var(--out)}
.srow:hover .go,.srow:focus-visible .go{opacity:1;transform:none}
@media (max-width:900px){
  .srow{grid-template-columns:44px minmax(0,1fr);padding:22px 6px}
  .srow .pills{grid-column:2}
  .srow .go{display:none}
}

/* founders: open rows, the portrait is a playing card that sits slightly askew and squares up on hover */
.people{display:grid;gap:0;border-top:1px solid var(--faint)}
.person{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--faint)}
.person.flip{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
.person.flip .portrait{order:2}
.portrait{position:relative;aspect-ratio:5/7;width:100%;max-width:260px;border-radius:14px;overflow:hidden;background:#120403;border:1px solid rgba(219,37,24,.4);
  display:grid;place-items:center;box-shadow:0 26px 50px rgba(0,0,0,.55);transform:rotate(-3deg);transition:transform .7s var(--out),box-shadow .7s var(--out)}
.person.flip .portrait{transform:rotate(3deg);justify-self:end}
.person:hover .portrait{transform:rotate(0) translateY(-6px);box-shadow:0 34px 60px rgba(0,0,0,.65)}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.portrait:has(img) .seal,.portrait:has(img) canvas{display:none}
.portrait .seal{position:relative;display:grid;place-items:center;width:52%;aspect-ratio:1;border-radius:50%;background:#000;border:1px solid rgba(219,37,24,.55);
  font-family:var(--f-display);font-size:clamp(26px,2.6vw,38px);letter-spacing:.02em;color:var(--ink)}
.portrait .cx{position:absolute;z-index:2;top:12px;left:13px;display:grid;justify-items:center;gap:3px;font-style:normal;font-family:var(--f-display);font-size:15px;line-height:1;color:var(--ink)}
.portrait .cx svg{width:11px;height:11px;color:var(--ink)}
.portrait .cx svg.r{color:var(--red)}
.portrait .cx.b{top:auto;left:auto;bottom:12px;right:13px;transform:rotate(180deg)}
.pbody{display:grid;gap:12px;min-width:0}
.pbody h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:-.012em}
.pbody .role{margin:0;font-family:var(--f-hud);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-hot)}
.pbody p:not(.role){margin:4px 0 0;max-width:62ch;font-size:14px;line-height:1.75;color:var(--dim)}
@media (max-width:760px){
  .person,.person.flip{grid-template-columns:minmax(0,1fr);gap:26px}
  .person.flip .portrait{order:0;justify-self:start}
  .portrait{max-width:220px}
}

/* studio + careers */
.ab-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.ab-block{display:grid;gap:16px;justify-items:start;align-content:start;padding-top:24px;border-top:1px solid var(--faint)}
.ab-block h2{font-size:clamp(30px,3.4vw,48px)}
.ab-block p{margin:0;max-width:44ch;color:var(--dim)}
.ulink{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding-bottom:6px;border-bottom:1px solid var(--red);
  font-family:var(--f-display);font-size:20px;line-height:1.2;transition:gap .35s var(--ease),color .25s ease}
.ulink i{font-style:normal;color:var(--red-hot)}
.ulink:hover,.ulink:focus-visible{gap:18px;color:#fff}
.ab-last{padding-bottom:clamp(96px,12vw,160px)}
@media (max-width:760px){.ab-split{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .rv,.row::after,.row .num,.srow::before,.srow b,.srow .pip svg,.srow .go,.portrait{transition:none}
  .rv.pre{opacity:1;transform:none}
}