/* Work With Us (4.0): page styles. Scoped under .hp, built on the homepage tokens. */

.hp .wwu-sec{padding-block:120px}
.hp .wwu-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:900px;margin:0 auto 64px}
.hp .wwu-head .lead{max-width:62ch}
.hp .wwu-head.wwu-left{align-items:flex-start;text-align:left;margin-left:0}
.hp .wwu-kicker{margin:10px 0 0;color:var(--acc)}

/* ---- hero ---- */
.hp .wwu-hero .hero{padding-block:84px 72px}
.hp .wwu-hero .h1{font-size:clamp(40px,5.4cqw,70px);overflow-wrap:normal}

/* ---- the three ways ---- */
.hp .wwu-cards{align-items:stretch}
.hp .wwu-path{color:inherit;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease}
.hp .wwu-path:not(.feat):hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(29,74,110,.08),0 24px 50px rgba(16,34,52,.16)}
.hp .wwu-path.feat:hover{transform:translateY(-22px)}
.hp .wwu-path:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.hp .wwu-path .ttl{font-size:34px}
.hp .wwu-path .body{margin:0}
.hp .wwu-go{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.75}
.hp .wwu-path:hover .wwu-go{opacity:1}

/* ---- each way, in depth ---- */
.hp .wwu-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}
.hp .wwu-lead{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px}
.hp .wwu-n{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--acc)}
.hp .sg-dark .wwu-n{color:var(--accD)}
.hp .wwu-name{font-size:clamp(44px,6cqw,84px)}
.hp .wwu-content{display:flex;flex-direction:column;gap:26px;max-width:640px}
.hp .wwu-content .lead{max-width:none}
.hp .sg-dark .wwu-content .lead{color:#fff}
.hp .wwu-list{margin:0}
.hp .wwu-list li{font-size:18px;line-height:1.5}
.hp .sg-dark .wwu-list li{border-top-color:var(--lineD);color:var(--ink2D)}
.hp .wwu-kick{margin:0;font-stretch:var(--fs);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.08;letter-spacing:.006em}
.hp .wwu-ctas{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:4px}
.hp .sg-dark .wwu-ctas .tl{color:var(--inkD)}
.hp .wwu-prod .qmom{margin-top:110px}

/* ---- words from the community ---- */
.hp .wwu-qs .q blockquote em{font-style:italic}
.hp .wwu-swipe{display:none}

/* ---- founders closer ---- */
.hp .wwu-closer{align-items:center;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:72px}
.hp .wwu-fcopy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.hp .wwu-pain{margin:0;font-stretch:100%;font-weight:500;text-transform:none;font-size:26px;line-height:1.4;letter-spacing:0;color:var(--ink2D);max-width:34ch}
.hp .wwu-div{display:flex;align-items:center;gap:12px;width:140px}
.hp .wwu-div span{flex:1;height:1px;background:var(--lineD)}
.hp .wwu-div i{width:8px;height:8px;border-radius:50%;background:#f2cf3c;box-shadow:0 0 0 4px rgba(246,226,112,.22),0 0 14px 2px rgba(246,226,112,.6)}
.hp .wwu-turn{margin:0;color:#fff}
.hp .wwu-fbody{margin:0;font-size:18px;color:var(--ink2D);max-width:60ch}
.hp .wwu-sign .names{display:flex;flex-direction:column;gap:4px}
.hp .wwu-sign .names b{font-stretch:var(--fs);font-weight:650;font-size:22px}
.hp .wwu-sign .names b em{font-weight:400}
.hp .wwu-sign .wc{color:var(--ink2D)}
.hp .wwu-close{margin:6px 0 0;font-stretch:var(--fs);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.1;color:#fff}
.hp .wwu-closer .btn{margin-top:0}
.hp .wwu-duo{height:560px}
.hp .wwu-duo .fr{--frame-sh:0 30px 60px rgba(0,0,0,.35)}
.hp .wwu-duo .c{transform:rotate(-1.5deg)}
.hp .wwu-duo .s{transform:rotate(1.5deg)}

/* ---- tablet ---- */
@container (min-width:701px) and (max-width:980px){
  .hp .wwu-cards{grid-template-columns:minmax(0,1fr)!important}
  .hp .wwu-path.feat,.hp .wwu-path.feat:hover{transform:none}
  .hp .wwu-grid,.hp .wwu-closer{grid-template-columns:minmax(0,1fr);gap:40px}
  .hp .wwu-lead{position:static}
  .hp .wwu-duo{max-width:560px;width:100%}
}

/* ---- phone ---- */
@container (max-width:700px){
  .hp .wwu-sec{padding-block:72px}
  .hp .wwu-head{margin-bottom:40px;gap:18px}
  .hp .wwu-hero .hero{padding-block:48px 40px;gap:24px}
  .hp .wwu-path.feat,.hp .wwu-path.feat:hover{transform:none}
  .hp .wwu-path .ttl{font-size:30px}
  .hp .wwu-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .hp .wwu-lead{position:static;gap:14px}
  .hp .wwu-list li{font-size:17px}
  .hp .wwu-kick,.hp .wwu-close{font-size:21px}
  .hp .wwu-prod .qmom{margin-top:64px}
  .hp .wwu-qs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--mx) * -1);padding:4px var(--mx) 24px;scrollbar-width:none}
  .hp .wwu-qs::-webkit-scrollbar{display:none}
  .hp .wwu-qs .q{flex:0 0 86%;scroll-snap-align:center}
  .hp .wwu-swipe{display:block;margin:4px 0 0;text-align:center;color:var(--ink2);font-size:10.5px}
  .hp .wwu-closer{grid-template-columns:minmax(0,1fr);gap:48px}
  .hp .wwu-pain{font-size:21px}
  .hp .wwu-duo{height:420px}
}

/* quote highlights: a flat band, never a gradient */
.hp .qmom .qhl2{background:none;box-shadow:inset 0 -.42em 0 rgba(245,236,138,.75);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hp .sg-dark .qmom .qhl2{background:none;box-shadow:inset 0 -.42em 0 rgba(245,236,138,.3)}
.hp .q .qhl{background:none;box-shadow:inset 0 -.5em 0 var(--band)}

/* ---- QA pass: quote cards are figures; drop the browser's default figure margin ---- */
.hp .qs .q{margin:0}

@container (min-width:701px) and (max-width:1000px){
  .hp .qs{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}
}

/* Oct 24: path arrows centered in their circles; product quotes sit under the left column on desktop */
.hp .wwu-go{padding-top:0;margin-top:auto}
.hp .wwu-path .body{margin-bottom:14px}
.hp .wwu-go .arr{margin:0}
.hp .wwu-side{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:36px;margin-top:-24px}
.hp .wwu-grid:has(> .wwu-side) .wwu-content{grid-column:2;grid-row:1 / span 2}
.hp .wwu-grid:has(> .wwu-side) .wwu-lead{position:static}
.hp .wwu-prod .wwu-side .qmom{margin:0;max-width:none;gap:12px}
.hp .wwu-side .qmom blockquote{font-size:clamp(20px,2cqw,26px)}
@container (max-width:980px){
  .hp .wwu-side,.hp .wwu-grid:has(> .wwu-side) .wwu-content{grid-column:1;grid-row:auto}
  .hp .wwu-side{margin-top:24px}
}