/* wwu-perf.css — WorkWithUs performance + responsive pass. Loaded last; every rule is scoped to body.lp.wwu. */

/* ---------- pictures never add a layout box ---------- */
body.lp.wwu picture{display:contents}

/* ---------- header: one compact row at every width ---------- */
body.lp.wwu .primary-nav-wrap,body.lp.wwu .primary-nav-wrap.is-iconic-wrap{display:none!important}
body.lp.wwu .nav-cta{display:none!important}
body.lp.wwu .menu-toggle{display:inline-flex!important}
body.lp.wwu .topbar-inner{flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:12px;row-gap:0!important}
body.lp.wwu .brand-link{display:inline-flex;align-items:center;min-height:44px;flex:0 1 auto;min-width:0}
body.lp.wwu .topbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
body.lp.wwu .topbar .icon-btn{width:44px!important;height:44px!important;min-width:44px!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:15px!important;padding:0}
body.lp.wwu .topbar .lang-btn{font-size:13px!important}
body.lp.wwu .mobile-menu .mobile-close{width:44px;height:44px;min-width:44px}
body.lp.wwu :is(a,button,summary,input):focus-visible{outline:2px solid #E555C8;outline-offset:2px}
body.lp.wwu .bottom-nav,body.lp.wwu .m-theme-fab{display:none!important}
@media (max-width:1099px){
  body.lp.wwu .topbar{padding:0}
  body.lp.wwu .topbar-inner{padding:6px clamp(12px,3vw,22px)!important;border-radius:0}
}

/* ---------- offer bar: pinned on desktop, scrolls away below 861px (the bottom CTA bar takes over) ---------- */
@media (max-width:860px){
  body.lp.wwu .wa-bar{position:relative;top:auto;z-index:61}
  body.lp.wwu .wa-bar-in{flex-direction:row!important;align-items:center!important;gap:10px!important;padding:8px 14px!important}
  body.lp.wwu .wa-bar p{text-align:start!important;font-size:12.5px;line-height:1.5}
  body.lp.wwu .wa-cta{min-height:44px;padding:0 16px;font-size:13px}
  body.lp.wwu .topbar{position:sticky;top:0!important;z-index:60}
}
@media (max-width:360px){body.lp.wwu .wa-bar p{font-size:12px}}

/* ---------- hero: headline paints immediately (LCP), phones skip the costly layers ---------- */
body.lp.wwu .whero-h1.rv,body.lp.wwu .whero-sub.rv{opacity:1;filter:none;animation-name:wwuRiseT;animation-delay:0s!important}
@keyframes wwuRiseT{from{transform:translateY(10px)}to{transform:none}}
@media (max-width:760px){
  body.lp.wwu .whero-grain{display:none}
  body.lp.wwu .whero-bg .orb{animation:none!important;filter:blur(70px);will-change:auto}
}

/* ---------- vertical rhythm ---------- */
@media (min-width:1101px){body.lp.wwu section{padding:clamp(56px,6vw,92px) 0}}
body.lp.wwu #cases{padding-bottom:clamp(20px,2.6vw,40px)}
body.lp.wwu #proof{padding-top:clamp(20px,2.6vw,40px)}
body.lp.wwu #cases .lp-btns{margin-top:20px}
body.lp.wwu .lp-rail-h{margin-top:clamp(22px,3vw,40px)}

/* ---------- rails: explicit card geometry, snap, no CLS ---------- */
body.lp.wwu .lp-rail,body.lp.wwu .lp-hs,body.lp.wwu .lp-strip{scroll-padding-inline:2px}
body.lp.wwu .lp-rail.mixed{--vh:clamp(220px,17vw,290px);gap:12px;min-height:calc(var(--vh) + 10px)}
body.lp.wwu .lp-rail.mixed>.lp-vcard{flex:0 0 auto!important;height:var(--vh)!important;width:calc(var(--vh) * 16 / 9)!important;aspect-ratio:auto!important}
body.lp.wwu .lp-rail.mixed>.lp-vcard.vert{width:calc(var(--vh) * 9 / 16)!important}
@media (max-width:1100px){body.lp.wwu .lp-rail.mixed{--vh:210px}}
@media (max-width:760px){body.lp.wwu .lp-rail.mixed{--vh:min(200px,calc(86vw * 9 / 16));gap:10px}}
body.lp.wwu .lp-rail-nav .rn{width:44px;height:44px}
@media (max-width:760px){body.lp.wwu .lp-rail-nav .rn{width:44px;height:44px;font-size:19px}}

body.lp.wwu .lp-strip{grid-auto-columns:minmax(150px,1fr)}
@media (max-width:1100px){body.lp.wwu .lp-strip{grid-auto-columns:140px}}
@media (max-width:560px){body.lp.wwu .lp-strip{grid-auto-columns:122px;gap:9px}}

@media (min-width:561px) and (max-width:1100px){body.lp.wwu .lp-hs.avatar>*{flex:0 0 380px;width:380px}}
@media (max-width:560px){body.lp.wwu .lp-hs.avatar>*{flex:0 0 min(82vw,300px);width:min(82vw,300px)}}
body.lp.wwu .av-step button img{width:100%;height:100%;aspect-ratio:16/9}

/* ---------- testimonials: lightweight poster until Play ---------- */
body.lp.wwu .lp-vbox>.lp-vcard{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;margin:0;background:#000}
body.lp.wwu .lp-vbox>.lp-vcard:hover{transform:none}
body.lp.wwu .lp-vbox>.lp-vcard>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;background:#000!important}
body.lp.wwu .lp-vbox .sh{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,11,.04),rgba(11,11,11,.5))}
body.lp.wwu .lp-vbox .play{z-index:2}
body.lp.wwu .lp-vbox:hover{border-color:var(--lp-ink)}

/* ---------- video modal ---------- */
.wv-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,32px);padding-top:72px;background:rgba(6,6,9,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease}
.wv-modal[hidden]{display:none}
.wv-modal.on{opacity:1}
.wv-box{position:relative;width:min(100%,1120px,calc((100vh - 110px) * 16 / 9));aspect-ratio:16/9}
.wv-modal.vert .wv-box{width:min(100%,calc((100vh - 110px) * 9 / 16),460px);aspect-ratio:9/16}
.wv-frame{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.wv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wv-x{position:absolute;top:-56px;inset-inline-end:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,24,.7);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center}
.wv-x:hover{background:linear-gradient(120deg,#FF9A3C,#E45CA8 45%,#7C6CF5)}
html.wv-lock,html.wv-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.wv-modal{transition:none}}

/* ---------- below-the-fold sections skip rendering until near ---------- */
body.lp.wwu #avatar,body.lp.wwu #cases,body.lp.wwu #proof,body.lp.wwu .wwu-testi,body.lp.wwu #team-you-get,body.lp.wwu #pricing,body.lp.wwu .wwu-faq,body.lp.wwu .lp-close,body.lp.wwu .lp-foot{content-visibility:auto}
body.lp.wwu #avatar{contain-intrinsic-size:auto 1900px}
body.lp.wwu #cases{contain-intrinsic-size:auto 560px}
body.lp.wwu #proof{contain-intrinsic-size:auto 780px}
body.lp.wwu .wwu-testi{contain-intrinsic-size:auto 1500px}
body.lp.wwu #team-you-get{contain-intrinsic-size:auto 1000px}
body.lp.wwu #pricing{contain-intrinsic-size:auto 1000px}
body.lp.wwu .wwu-faq{contain-intrinsic-size:auto 700px}
body.lp.wwu .lp-close{contain-intrinsic-size:auto 560px}
body.lp.wwu .lp-foot{contain-intrinsic-size:auto 110px}
@media (max-width:760px){
  body.lp.wwu #avatar{contain-intrinsic-size:auto 1500px}
  body.lp.wwu #cases{contain-intrinsic-size:auto 430px}
  body.lp.wwu #proof{contain-intrinsic-size:auto 560px}
  body.lp.wwu .wwu-testi{contain-intrinsic-size:auto 560px}
  body.lp.wwu #team-you-get{contain-intrinsic-size:auto 420px}
  body.lp.wwu #pricing{contain-intrinsic-size:auto 1250px}
  body.lp.wwu .wwu-faq{contain-intrinsic-size:auto 640px}
}
html.cv-off body.lp.wwu section,html.cv-off body.lp.wwu .lp-foot{content-visibility:visible!important}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  body.lp.wwu *,body.lp.wwu *::before,body.lp.wwu *::after{scroll-behavior:auto!important}
  body.lp.wwu .lp-vcard,body.lp.wwu .lp-vcard:hover{transition:none;transform:none}
}