.brand-stories{padding:90px 0 70px;background:#f3f5f5}.story-intro{padding:0 5% 50px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.story-intro span,.story-production>span{font-size:10px;letter-spacing:.12em}.story-intro h2{font-size:clamp(38px,5vw,76px);letter-spacing:-.06em;margin:24px 0 0}.story-intro>p,.story-copy>p{font-size:14px;line-height:1.9}.story-wide{margin:0}.story-wide>img{display:block;width:100%;aspect-ratio:2.1;object-fit:cover}.brand-stories figcaption{font-size:10px;letter-spacing:.06em;padding:20px 5%;display:flex;justify-content:space-between;gap:20px;line-height:1.8}.story-copy{padding:80px 10%;display:grid;grid-template-columns:1.6fr 1fr;gap:45px;align-items:center}.story-copy h3{font-size:clamp(34px,4.7vw,70px);letter-spacing:-.055em;line-height:1.05;margin:0}.motion-study{margin:0 5%}.motion-film{position:relative;aspect-ratio:16/9;background:#00c8ce;overflow:hidden;isolation:isolate;container-type:inline-size}.motion-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation-duration:8s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-iteration-count:infinite}.motion-frame.word{font-size:clamp(70px,15vw,230px);font-size:18cqw;letter-spacing:-.065em;font-weight:700;line-height:1}.water{background:#00c8ce;color:#111;animation-name:water-frame}.people{background:#111;color:#00c8ce;animation-name:people-frame}.brands{background:#f9e600;color:#111;animation-name:brands-frame}.logo-frame{background:#00c8ce;flex-direction:column;gap:25px;animation-name:logo-frame}.logo-frame img{width:62%;height:auto}.logo-frame p{font-size:clamp(14px,2vw,28px);font-weight:700}.film-bottom{position:absolute;bottom:26px;left:30px;right:30px;z-index:5;display:flex;justify-content:space-between;color:#111;font:9px Arial,sans-serif;letter-spacing:.1em;background:#ffffffb8;padding:8px 12px}.film-progress{position:absolute;left:0;bottom:0;width:100%;height:5px;background:#111;transform-origin:left;animation:film-progress 8s linear infinite;z-index:6}.motion-study figcaption{padding-left:0;padding-right:0;align-items:center}.motion-study small{display:block;font-size:10px;letter-spacing:0;color:#666;margin-top:4px}.motion-study button{border:1px solid #111;border-radius:0;background:transparent;font:11px Line,Arial,sans-serif;padding:10px 16px;cursor:pointer;white-space:nowrap}.motion-film.paused *{animation-play-state:paused!important}.story-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:65px 5% 0}.story-duo figure{margin:0;min-width:0}.story-duo figure>img{display:block;width:100%;aspect-ratio:.88;object-fit:cover}.story-duo figcaption{padding-left:0;padding-right:0}.graphic-application{background:#00c8ce;padding:40px;aspect-ratio:.88;display:flex;flex-direction:column;justify-content:space-between}.graphic-application img{width:145px;max-width:60%;height:auto}.graphic-application h3{font-size:clamp(35px,5vw,77px);line-height:1.1;letter-spacing:-.055em;margin:35px 0}.graphic-application>span{font-size:10px;letter-spacing:.08em}.story-production{margin:45px 5% 0;border-top:1px solid #c6d3dc;padding-top:25px;display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:35px}.story-production p{font-size:11px;line-height:1.9;margin:0}.story-production p:last-child{color:#666;font-size:10px}@keyframes water-frame{0%,20%{transform:translateY(0);opacity:1}25%,95%{transform:translateY(-100%);opacity:0}96%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes people-frame{0%,20%{transform:translateY(100%);opacity:0}25%,45%{transform:translateY(0);opacity:1}50%,100%{transform:translateY(-100%);opacity:0}}@keyframes brands-frame{0%,45%{transform:translateY(100%);opacity:0}50%,70%{transform:translateY(0);opacity:1}75%,100%{transform:translateY(-100%);opacity:0}}@keyframes logo-frame{0%,70%{transform:translateY(100%);opacity:0}75%,95%{transform:translateY(0);opacity:1}100%{transform:translateY(-100%);opacity:0}}@keyframes film-progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@media(max-width:650px){.brand-stories{padding-top:55px}.story-intro{display:block;padding:0 7% 30px}.story-intro h2{font-size:40px}.story-intro>p{font-size:12px;margin-top:25px}.story-wide>img{aspect-ratio:1.2;object-position:62% center}.brand-stories figcaption{font-size:9px;padding:16px 7%;flex-wrap:wrap}.story-copy{padding:45px 7%;grid-template-columns:1fr;gap:20px}.story-copy h3{font-size:38px}.story-copy>p{font-size:12px}.motion-study{margin:0 7%}.motion-film{aspect-ratio:1.15}.motion-study figcaption{padding-left:0;padding-right:0}.film-bottom{left:12px;right:12px;bottom:16px;padding:6px;font-size:6px}.logo-frame{gap:8px}.logo-frame img{width:78%}.logo-frame p{font-size:12px}.story-duo{grid-template-columns:1fr;margin:35px 7% 0}.graphic-application{padding:28px}.graphic-application h3{font-size:46px}.story-duo figcaption{padding-left:0;padding-right:0}.story-production{margin:25px 7% 0;grid-template-columns:1fr;gap:15px}.story-production p{font-size:11px}}@media(prefers-reduced-motion:reduce),(pointer:coarse){.motion-frame,.film-progress{animation:none!important}.motion-frame{display:none}.logo-frame{display:flex}.film-progress{display:none}}
