/* v6: scroll-driven YC-style reviews with the customers / partners finale */
.yc .wrap{position:relative}
.yc{padding-bottom:clamp(40px,5vw,72px)}
.ycx{position:relative}
.ycx__pin{display:flex;align-items:center}
.ycx--pin .ycx__pin{position:sticky;top:0;height:100vh;padding-top:64px}
.ycx--pin .yc__stage{width:100%}

/* stage: three columns; logo grids share the card cells */
.yc__stage{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1fr);grid-template-rows:auto}
.yc__left,.cp__side--l{grid-column:1;grid-row:1}
.yc__names{grid-column:2;grid-row:1}
.yc__right,.cp__side--r{grid-column:3;grid-row:1}
.yc__col{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.yc__tile,.yc__card{max-height:min(420px,52vh);aspect-ratio:1/1;width:auto;max-width:100%}
.yc__tile{width:100%}
.yc__card{width:100%}

/* names column */
.yc__names{height:min(520px,64vh)}
.yc__list{top:0;transition:none;will-change:transform}
.yc__list li{transition:opacity .15s linear}
.yc__list button{opacity:1;transition:color .3s,font-size .3s;color:var(--ink)}
.yc__list button:hover{opacity:1;color:var(--navy)}
.yc__list button[aria-current="true"]{color:var(--ink)}
.yc__list button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.yc__list button:focus:not(:focus-visible){outline:none}

/* the stat is the last item of the column */
.yc__stat{height:auto!important;padding:28px 0 8px}
.yc__stat .cp__mid{text-align:center}

/* finale: cards out, logo grids in */
.cp__side{align-self:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
.cp__side .cp__cap{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.cp__grid li{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 45ms)}
.is-final .cp__side{opacity:1;pointer-events:auto}
.is-final .cp__side .cp__cap{opacity:1;transform:none}
.is-final .cp__grid li{opacity:1;transform:none}
.is-final .yc__left{opacity:0;transform:translateX(-24px) scale(.97);pointer-events:none}
.is-final .yc__right{opacity:0;transform:translateX(24px) scale(.97);pointer-events:none}
.cp__side--r .cp__grid li{transition-delay:calc(var(--i,0) * 45ms + 120ms)}

/* small screens and reduced motion: no pin, grids shown under the stage */
@media (max-width:1100px){
  .yc__stage{grid-template-columns:1fr 1fr}
  .yc__names{grid-column:1/-1;grid-row:1;height:240px}
  .yc__left{grid-column:1;grid-row:2}
  .yc__right{grid-column:2;grid-row:2}
  .cp__side--l,.cp__side--r{grid-row:3;opacity:1;pointer-events:auto;margin-top:48px}
  .cp__side--l{grid-column:1}.cp__side--r{grid-column:2}
  .cp__side .cp__cap,.cp__grid li{opacity:1;transform:none}
  .is-final .yc__left,.is-final .yc__right{opacity:1;transform:none;pointer-events:auto}
  .yc__stat{display:none}
}
@media (max-width:640px){
  .yc__stage{grid-template-columns:1fr}
  .yc__names{height:210px}
  .yc__left,.yc__right,.cp__side--l,.cp__side--r{grid-column:1}
  .yc__left{grid-row:2}.yc__right{grid-row:3}
  .cp__side--l{grid-row:4}.cp__side--r{grid-row:5;margin-top:32px}
  .yc__tile{aspect-ratio:16/9;max-height:none}
  .yc__card{aspect-ratio:auto;max-height:none;min-height:280px}
}
@media (prefers-reduced-motion:reduce){
  .cp__side,.cp__side .cp__cap,.cp__grid li{opacity:1;transform:none;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce) and (min-width:1101px){
  .cp__side--l,.cp__side--r{grid-row:2;margin-top:48px}
  .yc__stat{display:none}
}

/* hero badges hidden by default; the shield button in the nav brings them in */
.hero .certs .cert,.hero .accred{opacity:0;scale:.9;pointer-events:none;transition:opacity .5s ease,scale .6s cubic-bezier(.2,.8,.2,1)}
.hero .accred{max-height:0;margin-top:0;overflow:hidden;transition:opacity .5s ease,scale .6s cubic-bezier(.2,.8,.2,1),max-height .6s ease,margin-top .6s ease}
.badges-on .hero .certs .cert,.badges-on .hero .accred{opacity:1;scale:1;pointer-events:auto}
.badges-on .hero .accred{max-height:140px;margin-top:40px}
.badges-on .hero .cert--iso1{transition-delay:.06s}.badges-on .hero .cert--iso2{transition-delay:.12s}.badges-on .hero .cert--g2{transition-delay:.18s}
.badges-t{margin-right:0}
.badges-t::after{display:none}
.badges-t[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff}
@media (max-width:1180px){html:not(.badges-on) .hero .certs{display:none}}

/* nav matches the hero background, like the reference */
.hero-cream .nav:not(.is-light) .nav__cap{background:#FFF8ED;color:var(--ink);border:1px solid rgba(120,86,40,.12);box-shadow:none}
.hero-light:not(.hero-cream) .nav:not(.is-light) .nav__cap{background:#fff;color:var(--ink);border:1px solid rgba(11,35,71,.08);box-shadow:none}
html:not(.hero-light) .nav:not(.is-light) .nav__cap{background:rgba(8,25,58,.9);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:none}
.hero-light .nav:not(.is-light) .nav__links a:hover{background:rgba(11,35,71,.05)}
html:not(.hero-light) .nav:not(.is-light) .nav__links a:hover{background:rgba(255,255,255,.08)}
.hero-light .nav:not(.is-light) .btn--nav{background:var(--navy);color:#fff}
html:not(.hero-light) .nav:not(.is-light) .btn--nav{background:#fff;color:var(--navy)}
.hero-light .nav:not(.is-light) .eye{border-color:rgba(11,35,71,.14);background:transparent}
html:not(.hero-light) .nav:not(.is-light) .eye{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.badges-t{margin-left:0}.nav__cap>.badges-t+.eye{margin-left:-24px}

/* heading lives inside the pinned viewport, so there is no empty gap */
.ycx--pin .ycx__pin{flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);padding-top:84px}
.yc__head{margin-bottom:0}
.ycx:not(.ycx--pin) .yc__head{margin-bottom:40px}
.ycx--pin .yc__names{height:min(460px,52vh)}
.ycx--pin .yc__tile,.ycx--pin .yc__card{max-height:min(400px,46vh)}

/* calmer finale: aligned columns, one clear stat */
.cp__side{align-self:start;padding-top:12px}
.cp__cap{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.cp__grid{gap:28px 22px}
.cp__grid li{display:grid;place-items:center;height:36px;width:100%}
.cp__grid img{max-height:26px!important;height:auto!important;max-width:100%}
.yc__stat{padding:0}
.yc__stat .cp__big{font-size:clamp(64px,6vw,92px)}
.yc__stat .cp__l{font-style:normal;font-size:16px;color:var(--muted);margin-top:6px}
.yc__stat .cp__link{font-style:normal;font-size:15px;margin-top:22px;text-decoration:none;padding:10px 16px;border:1px solid rgba(11,35,71,.16);border-radius:10px;background:#fff}
.yc__stat .cp__link:hover{border-color:rgba(11,35,71,.32)}