.founders-hero{
  --founders-w:1576;            /* natural pixel size of the rendered clips   */
  --founders-h:1312;            /* (all five must share the same dimensions)  */
  --founders-clear:110px;       /* breathing room above the heads / copy       */
  --founders-white-lift:1.025;  /* nudges the clip's studio white to pure #fff */
  position:relative;
  display:grid;
  grid-template-columns:52fr 48fr;
  height:90vh;
  height:90svh;
  min-height:640px;
  max-height:1040px;
  background:#fff;
  overflow:hidden;
}
.founders-hero__stage{
  position:relative;
  min-height:0;
  container-type:size;
}
/* The shared box. Every layer inherits exactly this geometry, so the men
   never shift when clips swap. Bottom-left anchored; sized to the clip's
   aspect so the box edge *is* the video edge. */
.founders-hero__figures{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  max-height:calc(100% - var(--founders-clear));
  width:min(100%,calc((100cqh - var(--founders-clear)) * var(--founders-w) / var(--founders-h)));
  aspect-ratio:var(--founders-w) / var(--founders-h);
  pointer-events:none;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 98.5%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 98.5%,transparent 100%);
  mask-composite:intersect;
}
.founders-hero__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left bottom;
  display:block;
  filter:brightness(var(--founders-white-lift));
}
.founders-hero__video{
  opacity:0;
  transition:opacity 140ms ease;
  will-change:opacity;
}
.founders-hero__video.is-active{opacity:1}
.founders-hero.is-static .founders-hero__video{display:none}   /* autoplay blocked / reduced motion → poster only */

.founders-hero__hint{
  position:absolute;
  right:5%;
  bottom:32px;
  display:none;
  font-family:'Courier New',monospace;
  font-size:12px;
  letter-spacing:.045em;
  color:#8f9592;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .8s ease .9s,transform .8s ease .9s;
  pointer-events:none;
  user-select:none;
}
.founders-hero.is-ready .founders-hero__hint{opacity:1;transform:none}
.founders-hero.is-discovered .founders-hero__hint,
.founders-hero.is-static .founders-hero__hint{opacity:0;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.founders-hero__hint{display:block}}

.founders-hero__content{
  position:relative;
  z-index:1;
  align-self:center;
  padding:calc(var(--founders-clear) + 2vh) var(--pad) 8vh 2vw;
  max-width:720px;
}
.founders-hero__content .eyebrow{display:block;color:#676d69}
.founders-hero h2{
  font-size:clamp(46px,5.6vw,92px);
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:700;
  margin:26px 0 28px;
}
.founders-hero__support{
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.5;
  margin:0;
  max-width:440px;
}
.founders-hero__actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:40px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--ink);
  color:#fff;
  padding:17px 28px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn--link{border-bottom:1px solid currentColor;padding-bottom:6px;font-size:14px}

@media(max-width:1100px){
  .founders-hero{grid-template-columns:50fr 50fr}
  .founders-hero h2{font-size:clamp(42px,5.4vw,72px)}
}
@media(max-width:860px){
  .founders-hero{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    max-height:none;
    padding-top:calc(var(--founders-clear) - 10px);
  }
  .founders-hero__content{order:1;align-self:auto;padding:0 var(--pad) 36px;max-width:none}
  .founders-hero h2{font-size:clamp(44px,10.5vw,72px);margin:22px 0 22px}
  .founders-hero__actions{margin-top:30px;gap:22px}
  .founders-hero__stage{order:2;container-type:normal;min-height:0}
  .founders-hero__figures{
    position:relative;
    width:114%;
    margin-left:-7%;
    max-height:none;
    transform:none;
    transition:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .founders-hero__video,.founders-hero__hint{display:none}
  .founders-hero__figures{transition:none;transform:none}
  .btn{transition:none}
}
/* Men on the right, copy on the left (data-side="right"). */
.founders-hero[data-side="right"]{grid-template-columns:48fr 52fr}
.founders-hero[data-side="right"] .founders-hero__stage{order:2}
.founders-hero[data-side="right"] .founders-hero__content{order:1;padding:calc(var(--founders-clear) + 2vh) 2vw 8vh var(--pad);justify-self:start}
.founders-hero[data-side="right"] .founders-hero__figures{left:auto;right:0}
.founders-hero[data-side="right"] .founders-hero__layer{object-position:right bottom}
.founders-hero[data-side="right"] .founders-hero__hint{right:auto;left:7%}
@media(max-width:860px){
  .founders-hero[data-side="right"] .founders-hero__content{order:1;padding:0 var(--pad) 36px}
  .founders-hero[data-side="right"] .founders-hero__stage{order:2}
  .founders-hero[data-side="right"] .founders-hero__figures{margin-left:-7%}
}
/* Mid-page placement: the men stand on the top edge of the section that follows. */
.founders-hero+.feature{padding-top:60px}