/* Recent work: drag strip of finished jobs, number + name under each photo */
.rw{padding:120px 0;background:#0A0A0A;color:#fff;overflow:hidden}
.rw-sv{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(32px,calc(4vw*var(--vz,1)),64px);margin-left:max(40px,(100% - var(--wrap))/2)}
.rw-in .ty{margin-top:14px}.rw-in .ty b{color:var(--orange)}
.rw-ld{margin:28px 0 44px;font-size:19px;line-height:1.55;color:rgba(255,255,255,.86);max-width:380px}
.rw-nv{display:flex;gap:12px}
.rw-nv button,.rwl-b button,.rwl-x{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.rw-nv button:hover{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.rw-nv button:active,.rwl-b button:active,.rwl-x:active{transform:scale(.94)}
.rw-vp{position:relative;display:flex;align-items:flex-start;gap:20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding-right:40px}
.rw-vp::-webkit-scrollbar{display:none}
.rw-vp.dr{cursor:grabbing;scroll-snap-type:none}.rw-vp.dr .rw-k{pointer-events:none}
.rw-k{position:relative;flex:0 0 340px;display:block;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.rw-ph{display:block;overflow:hidden;border-radius:20px;background:#161616;aspect-ratio:3/4}
.rw-ph img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .9s var(--ease)}
.rw-k:hover .rw-ph img{transform:scale(1.04)}
.rw-k:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:20px}
.rw-cb{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-top:20px}
.rw-cb em{font-style:normal;font-size:44px;font-weight:500;line-height:.9;letter-spacing:-.04em;color:rgba(255,255,255,.35);transition:color .4s}
.rw-k:hover .rw-cb em{color:var(--orange)}
.rw-cb b{display:block;font-size:20px;font-weight:600;line-height:1.25}
.rw-cb small{display:block;margin-top:8px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* entrance: the cards rise one after another */
.js .rw-k{opacity:0;transform:translateY(48px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--k) * 90ms + .15s)}
.js .rw.in .rw-k{opacity:1;transform:none}
/* full-screen photo */
.rwl{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:88px 32px 120px;background:rgba(0,0,0,.94);opacity:0;transition:opacity .4s var(--ease);overscroll-behavior:contain;touch-action:none}
.rwl[hidden]{display:none}.rwl.on{opacity:1}
.rwl-st{position:relative;width:100%;height:100%}
.rwl-st img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;border-radius:16px;object-fit:contain;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.rwl-st img.a{opacity:0;transform:scale(.94)}
.rwl-st img.r{opacity:0;transform:translateX(80px)}.rwl-st img.l{opacity:0;transform:translateX(-80px)}
.rwl-x{position:absolute;top:24px;right:24px;z-index:2}
.rwl-x:hover,.rwl-b button:hover{background:#fff;border-color:#fff;color:#0A0A0A}
.rwl-b{position:absolute;left:32px;right:32px;bottom:32px;display:flex;align-items:center;gap:20px;transform:translateY(16px);opacity:0;transition:opacity .5s var(--ease) .15s,transform .6s var(--ease) .15s}
.rwl.on .rwl-b{opacity:1;transform:none}
.rwl-n{font-size:16px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.rwl-t{flex:1;font-size:20px;font-weight:600;transition:opacity .3s}
@media (max-width:760px){
  .rw{padding:96px 0}
  .rw-sv{display:block;margin-left:0}
  .rw-in{width:calc(100% - 48px);margin:0 auto 32px}
  .rw-ld{margin:20px 0 0;font-size:17px}
  .rw-nv{display:none}
  .rw-vp{padding:0 24px;scroll-padding:0 24px;gap:12px}
  .rw-k{flex-basis:78%}
  .rw-cb{gap:14px;margin-top:16px}.rw-cb em{font-size:36px}.rw-cb b{font-size:18px}
  .rwl{padding:76px 16px 112px}
  .rwl-x{top:16px;right:16px;width:52px;height:52px}
  .rwl-b{left:24px;right:24px;bottom:28px;gap:12px}.rwl-b button{width:52px;height:52px}
  .rwl-t{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.js .rw-k{transition:opacity .4s;transform:none}.rwl-st img{transition:opacity .3s}.rwl-st img.r,.rwl-st img.l,.rwl-st img.a{transform:none}}

/* How it works option 3: the layout 1 list on a solid orange field, content in black */
.hw[data-v="6"]{background:var(--orange);color:#0A0A0A}
.hw[data-v="6"] .kic,.hw[data-v="6"] .ty b,.hw[data-v="6"] .ty i.o,.hw[data-v="6"] .hw-n,.hw[data-v="6"] .hw-ic,.hw[data-v="6"] .hw-go svg{color:#0A0A0A}
.hw[data-v="6"] .sh .lead{color:rgba(10,10,10,.86)}
.hw[data-v="6"] .hw-grid{border-top-color:rgba(10,10,10,.22)}
.hw[data-v="6"] .hw-st{border-bottom-color:rgba(10,10,10,.22)}
.hw[data-v="6"] .hw-st.on,.hw[data-v="6"] .hw-st:hover{background:rgba(10,10,10,.08)}
.hw[data-v="6"] .hw-st::before{background:#0A0A0A}
.hw[data-v="6"] .hw-d{border-left-color:rgba(10,10,10,.22)}
.hw[data-v="6"] .hw-d p,.hw[data-v="6"] .hw-grid:hover .hw-st.on:not(:hover) .hw-d p{color:rgba(10,10,10,.6)}
.hw[data-v="6"] .hw-st.on .hw-d p,.hw[data-v="6"] .hw-st:hover .hw-d p{color:#0A0A0A}
.hw[data-v="6"] .hw-n{opacity:.35}
.hw[data-v="6"] .hw-go:hover{color:#fff}
.hw[data-v="6"] .ab2-q{background:#0A0A0A;color:#fff}
.hw[data-v="6"] .ab2-q:hover{background:#1E1E1E}
.hw[data-v="6"] .ab2-q em{background:#fff;color:#0A0A0A}
.hw[data-v="6"] .hw-call i{border-color:rgba(10,10,10,.3)}
.hw[data-v="6"] .hw-call small,.hw[data-v="6"] .hw-note{color:rgba(10,10,10,.72)}
.hw[data-v="6"] .hw-note{border-top-color:rgba(10,10,10,.22)}
.hw .hw-note{display:flex;align-items:center;gap:18px;width:100%;margin-top:32px;padding-top:28px;border-top:1px solid rgba(10,10,10,.16)}
.hw .hw-note-i{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#0a0a0a;color:#ff5e08}
.hw .hw-note b{display:block;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#0a0a0a}
.hw .hw-note div>span{display:block;margin-top:6px;font-size:17px;line-height:1.45;color:rgba(10,10,10,.72)}
@media (max-width:600px){.hw .hw-note{align-items:flex-start;gap:16px}.hw .hw-note-i{width:48px;height:48px;border-radius:12px}.hw .hw-note b{font-size:20px}}