.about-story{position:relative;display:flex;flex-direction:column;align-items:center;background:#000}
.about-hero{position:sticky;top:0;z-index:1;width:100%;padding:160px 40px;display:flex;flex-direction:column;align-items:center;gap:40px;overflow:hidden}
.about-eyebrow{margin:0;color:#999;font:20px/24px var(--mono);text-transform:uppercase;text-align:center}
.about-title{width:100%;margin:0;text-align:center;transform-origin:center;will-change:transform;font:800 152px/128px var(--sans);letter-spacing:-4px;text-transform:uppercase}
.about-title-line{display:block;overflow:hidden;max-width:1120px;margin:auto}
.about-title-line>span{display:block;will-change:transform,opacity}
.about-visual{position:relative;z-index:2;width:100%;padding:12px;display:flex;align-items:center;gap:12px;will-change:transform,opacity}
.about-quote{width:25%;flex:none;margin:0;padding:28px;text-align:center;color:#999;font:16px/24px var(--mono);text-transform:uppercase}
.about-portrait{position:relative;flex:1;min-width:0;aspect-ratio:.6650943396226415;border-radius:32px;overflow:hidden;background:#151515;isolation:isolate;margin:0}
.about-portrait-image{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;will-change:transform}
.about-intro{position:relative;background:#000;padding:160px 40px;display:flex;justify-content:center}
.about-intro p{width:75%;margin:0;font:400 32px/40px var(--sans)}
.about-film{position:relative;overflow:hidden;padding:12px 0;isolation:isolate}
.film-track{display:flex;width:max-content;gap:12px;animation:about-film-scroll 30.24s linear infinite;will-change:transform}
.film-group{display:flex;flex:none;gap:12px;list-style:none;margin:0;padding:0}
.film-frame{position:relative;flex:none;width:240px;height:240px;border-radius:32px;overflow:hidden;isolation:isolate}
.film-frame img{display:block;width:100%;height:100%;object-fit:cover}
.about-page .footer{margin-top:160px}
@keyframes about-film-scroll{from{transform:translateX(-90px)}to{transform:translateX(-1602px)}}
@media(min-width:810px) and (max-width:1199px){
  .about-hero{gap:32px}
  .about-title{font-size:128px;line-height:112px}
  .about-quote{display:none}.about-portrait{aspect-ratio:.6638513513513513}
  .about-intro p{width:100%}
}
@media(max-width:809px){
  .about-hero{padding:240px 32px 160px;gap:24px}
  .about-title{font-size:min(64px,calc((100vw - 52px)/5.12));line-height:56px;letter-spacing:-2px}
  .about-quote{display:none}.about-portrait{aspect-ratio:.6638513513513513}
  .about-intro{padding:96px 32px}.about-intro p{width:100%;font-size:24px;line-height:32px}
  .about-page .footer{margin-top:96px}
}
@media(max-width:370px){.about-title{font-size:min(60px,calc((100vw - 52px)/5.12))}}
@media(prefers-reduced-motion:reduce){.about-title,.about-title-line>span,.about-portrait-image,.about-visual{will-change:auto}.film-track{animation:none;transform:translateX(-90px)}}