/* ═══ WORK · SECTION 4 — PROOF (why choose us + testimonial) ═══ */
.proof{position:relative;background:#080808;border-top:1px solid var(--border);
  padding:clamp(70px,12vh,140px) var(--gut)}
/* JS drifts the heading slightly against the scroll */
.proof-head{will-change:transform}
/* width limit lives on the h2 so "ch" is measured at the heading's size, not the body text's */
.proof-head h2{margin-top:20px;font-size:clamp(1.7rem,4.4vw,3.5rem);line-height:1;max-width:17ch}
.proof-head .lead{margin-top:clamp(18px,3vh,28px);max-width:46ch;
  font-size:clamp(.96rem,1.12vw,1.12rem);line-height:1.6;color:var(--muted)}

.proof-grid{margin-top:clamp(40px,7vh,80px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-left:1px solid var(--border)}
@media(max-width:1000px){.proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proof-grid{grid-template-columns:1fr}}

.pf{position:relative;overflow:hidden;padding:clamp(24px,3.2vw,40px);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.pf.is-in{opacity:1;transform:none}
.pf::before{content:"";position:absolute;inset:0;background:var(--surface);
  transform:translateX(-101%) skewX(-10deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:0}
.pf:hover::before{transform:translateX(0) skewX(-10deg)}
.pf > *{position:relative;z-index:1}
.pf .n{display:block;font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--cut);
  margin-bottom:clamp(30px,5vh,58px)}
.pf h3{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.08;letter-spacing:-.026em}
.pf p{margin-top:13px;font-size:.94rem;line-height:1.6;color:var(--muted)}
.pf .bar{margin-top:22px;height:2px;width:0;background:var(--cut);
  transition:width .8s cubic-bezier(.16,1,.3,1) .25s}
.pf.is-in .bar{width:40px}
.pf:hover .bar{width:64px;transition-delay:0s}

/* testimonial */
.quote{position:relative;margin-top:clamp(50px,9vh,100px);padding-top:clamp(34px,6vh,60px);
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:clamp(24px,5vw,80px);align-items:end;
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.quote.is-in{opacity:1;transform:none}
@media(max-width:860px){.quote{grid-template-columns:1fr;gap:26px;align-items:start}}
.quote blockquote{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.2rem,2.9vw,2.3rem);line-height:1.12;letter-spacing:-.028em;max-width:24ch}
.quote blockquote .mk{color:var(--cut)}
.quote .who{font-size:12.5px;line-height:1.6;color:var(--dim)}
.quote .who b{display:block;color:var(--text);font-weight:700;font-size:13.5px;margin-bottom:5px}
.quote .who .warn{display:block;margin-top:12px;color:var(--cut);font-size:10.5px;letter-spacing:.14em}
/* oversized quote mark behind the testimonial — JS drifts it */
.quote .mark-bg{position:absolute;right:0;top:-.18em;z-index:0;pointer-events:none;user-select:none;
  font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(9rem,22vw,20rem);line-height:.7;color:var(--text);opacity:.035;
  will-change:transform}
.quote > blockquote,.quote > .who{position:relative;z-index:2}

@media(prefers-reduced-motion:reduce){
  .pf,.quote{opacity:1;transform:none}
  .pf .bar{width:40px}
  .proof-head{transform:none!important}
  .quote .mark-bg{display:none}
}