/* homepage hero: faces grid, variation b (staged 18 oct). loaded only when config.json hero_mode = "faces". */
.rb-hf{--hf-t:236px;--hf-g:6px;background:var(--p);margin:0;padding:0;overflow:hidden;position:relative}
.rb-hf .hf-copy{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:clamp(40px,5vw,64px) clamp(20px,3.2vw,48px) clamp(32px,3.4vw,46px);max-width:1600px;margin:0 auto}
body.lx .rb-hf h1{font-family:'Russo One',sans-serif!important;font-weight:400;color:var(--k)!important;font-size:clamp(56px,8.8vw,136px)!important;line-height:.9!important;letter-spacing:-.04em;margin:0!important;text-transform:lowercase;text-shadow:none}
.rb-hf .hf-side{max-width:400px;padding-bottom:8px;flex:none}
body.lx .rb-hf .hf-sub{font:400 19px/1.4 var(--sans);color:var(--t)!important;margin:0}
.rb-hf .hf-cta{margin-top:20px;display:inline-flex;align-items:center;min-height:46px;padding:11px 26px;border-radius:99px;background:var(--k);color:var(--p)!important;font:700 16px/1 var(--sans);text-decoration:none;transition:background .2s}
.rb-hf .hf-cta:hover{background:#000}
.rb-hf .hf-cta:focus-visible,.rb-hf .hf-t:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.rb-hf .hf-strip{display:flex;flex-direction:column;gap:var(--hf-g)}
.rb-hf .hf-row{overflow:hidden}
.rb-hf .hf-track{display:flex;width:max-content;animation:hf-l calc(var(--n) * 12s) linear infinite}
.rb-hf .hf-row:nth-child(even) .hf-track{animation-name:hf-r;margin-left:calc(var(--hf-t) / -2)}  /* elad 19 oct: no negative delay (it opened row 2 on the end of its set); half-tile margin keeps the offset look */
.rb-hf .hf-set{display:flex;gap:var(--hf-g);padding-right:var(--hf-g)}
.rb-hf .hf-strip:hover .hf-track,.rb-hf .hf-strip:focus-within .hf-track{animation-play-state:paused}
@keyframes hf-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes hf-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.rb-hf .hf-t{position:relative;display:block;width:var(--hf-t);height:var(--hf-t);flex:none;overflow:hidden;background:#e9e4d8}
.rb-hf .hf-t img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;filter:grayscale(1) contrast(1.02) brightness(1.04) sepia(.08);transition:filter .5s,transform .8s}
.rb-hf .hf-n{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:99px;background:rgba(251,248,240,.92);color:var(--k);font:600 13px/1 var(--sans);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
@media(hover:hover){.rb-hf .hf-t:hover img{filter:grayscale(.15) contrast(1.02);transform:scale(1.03)}.rb-hf .hf-t:hover .hf-n{opacity:1;transform:none}}
.rb-hf .hf-t:focus-visible .hf-n{opacity:1;transform:none}
.rb-hf .hf-row.m{display:none}
@media(max-width:760px){
.rb-hf{--hf-t:150px;--hf-g:5px}
.rb-hf .hf-copy{flex-direction:column;align-items:flex-start;gap:16px;padding:30px 20px 26px}
body.lx .rb-hf h1{font-size:clamp(36px,calc(14vw - 6px),64px)!important;line-height:.94!important}  /* 20 oct: sized so "has a protocol." stays on one line (2-line slogan) */
.rb-hf .hf-side{max-width:none;padding:0}
body.lx .rb-hf .hf-sub{font-size:16px}
.rb-hf .hf-cta{min-height:44px;font-size:15px;margin-top:16px}
.rb-hf .hf-row.d{display:none}.rb-hf .hf-row.m{display:block}
.rb-hf .hf-track{animation-duration:calc(var(--n) * 10s)}
}
@media(prefers-reduced-motion:reduce){.rb-hf .hf-track{animation:none!important;transform:none!important}.rb-hf .hf-row:nth-child(even) .hf-track{transform:none!important}.rb-hf .hf-t img,.rb-hf .hf-n{transition:none}}
/* 20 oct (rhode, v2 18:06): "greatness / has a protocol." confident, not shouting. desktop ~6vw (max 92px), tablet scales between and stays 2 lines, mobile "has a protocol." ~82% of the content width. tracking -.04em. tighter vertical padding so the faces row shows sooner. */
body.lx .rb-hf h1{letter-spacing:-.04em!important;line-height:.9!important;text-align:left}
@media(min-width:1200px){
.rb-hf .hf-copy{padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(36px,3.6vw,60px)}
body.lx .rb-hf h1{font-size:clamp(72px,6.1vw,92px)!important;max-width:85%}
}
@media(min-width:761px) and (max-width:1199px){
.rb-hf .hf-copy{flex-direction:column;align-items:flex-start;gap:28px;padding-top:clamp(40px,4.6vw,56px);padding-bottom:clamp(32px,3.4vw,42px)}
body.lx .rb-hf h1{font-size:calc(2.05vw + 48.4px)!important;max-width:none}
}
@media(max-width:760px){
.rb-hf .hf-copy{padding-top:32px;padding-bottom:26px}
body.lx .rb-hf h1{font-size:clamp(30px,calc((100vw - 40px) * .119),64px)!important;line-height:.95!important}
}