.teaser-section{width:calc(100% - 48px);max-width:1680px;margin:40px auto 30px}
.teaser-card{position:relative;display:block;isolation:isolate;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;overflow:hidden;padding:0;color:#fff;background:#000;text-align:left}
.teaser-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.teaser-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0006,transparent 35%,#0001 55%,#000c)}
.teaser-card:hover .teaser-poster{transform:scale(1.025)}
.teaser-card:focus-visible{outline-offset:6px}
.teaser-kicker{position:absolute;z-index:1;left:42px;top:34px;font-size:12px;letter-spacing:.12em}
.teaser-play{position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%);width:100px;height:100px;border:1px solid #fff;border-radius:50%;background:#0004;backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .2s,color .2s}
.teaser-play svg{width:32px;height:32px;margin-left:4px}
.teaser-card:hover .teaser-play,.teaser-card:focus-visible .teaser-play{background:#fff;color:#000}
.teaser-caption{position:absolute;z-index:1;inset:auto 42px 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.teaser-caption>span:first-child{font-size:clamp(38px,5.1vw,80px);line-height:1.02;letter-spacing:-.045em;font-weight:400}
.teaser-watch{display:flex;align-items:center;gap:30px;font-size:15px;white-space:nowrap;padding-bottom:6px}
.teaser-watch svg{width:25px;height:25px;transform:rotate(-45deg)}
.teaser-duration{position:absolute;z-index:1;right:42px;top:34px;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.teaser-modal{position:fixed;inset:0;width:min(1440px,calc(100% - 64px));max-width:none;max-height:calc(100dvh - 40px);height:fit-content;margin:auto;border:0;padding:0;overflow:visible;background:transparent;color:#fff}
.teaser-modal::backdrop{background:#000c;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.teaser-modal-shell{overflow:hidden;border:1px solid #ffffff40;border-radius:14px;background:#000;animation:teaser-enter .28s cubic-bezier(.2,.7,.2,1) both}
.teaser-modal-heading{height:64px;padding:0 18px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.teaser-modal-heading h2{font-size:13px;font-weight:500;letter-spacing:.045em;line-height:1.4}
.teaser-modal-heading h2 span{font-weight:400;margin-left:12px}
.teaser-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff60;border-radius:50%;background:#000;color:#fff;padding:0;flex-shrink:0}
.teaser-close svg{width:20px;height:20px}
.teaser-close:hover{background:#fff;color:#000}
#teaser-video{display:block;width:100%;height:auto;max-height:calc(100dvh - 108px);background:#000;object-fit:contain}
.teaser-status{padding:12px 24px;font-size:14px}
@keyframes teaser-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* The vector ribbon is material on a path, not a translated raster layer. */
.hero-art.ribbon-art{width:36%;height:100%;top:0;overflow:visible;right:calc((100vw - 100%)/-2 - 5%)}
.living-ribbon{display:block;width:100%;height:100%;overflow:visible}
.statement-art.ribbon-art{width:47%;height:110%;right:-12%;top:-2%;transform:rotate(4deg)}
.statement .wrap{position:relative;z-index:1;pointer-events:none}
.statement-art{pointer-events:auto}
.ribbon-ready .ribbon-static{display:none}
.city>img{transform-origin:50% 50%}
.teaser-section{margin-top:0;margin-bottom:85px}
.teaser-card{border-radius:6px;max-height:85svh}
.teaser-poster{object-position:center}
.teaser-close{cursor:pointer}
.submit{font-size:15px;gap:20px}
@media(max-width:1050px){.hero-art.ribbon-art{right:-12%;width:38%}.statement-art.ribbon-art{width:55%;right:-18%}}
@media(max-width:650px){
 .hero-art.ribbon-art{width:175px;right:-108px;top:108px;height:365px}
 .hero{overflow:visible}.hero h1,.hero-bottom{position:relative;z-index:1}
 .hero-art{opacity:.95}
 .statement-art.ribbon-art{width:280px;height:280px;top:auto;bottom:0;right:-105px;transform:rotate(-7deg)}
 .statement{padding-bottom:155px}
 .statement p{position:relative;z-index:1}
 .teaser-section{width:calc(100% - 24px);margin-bottom:42px}
 .teaser-card{aspect-ratio:4/3;border-radius:5px;max-height:none}
 .teaser-kicker{left:18px;top:18px;font-size:9px}.teaser-duration{right:18px;top:18px;font-size:10px}
 .teaser-play{width:68px;height:68px;top:43%}.teaser-play svg{width:25px;height:25px}
 .teaser-caption{inset:auto 18px 22px;gap:15px}.teaser-caption>span:first-child{font-size:32px}
 .teaser-watch{font-size:11px;gap:12px;max-width:80px;white-space:normal;line-height:1.5}.teaser-watch svg{width:19px;flex:0 0 19px}
 .teaser-modal{width:calc(100% - 20px)}.teaser-modal-heading{height:56px;padding-inline:14px}
 .teaser-modal-heading h2{font-size:11px;letter-spacing:.03em}.teaser-modal-heading h2 span{margin-left:8px}
 #teaser-video{max-height:calc(100dvh - 100px)}.submit{font-size:14px;gap:12px}.submit svg{width:20px;flex:0 0 20px}
}
@media(prefers-reduced-motion:reduce){.teaser-poster,.teaser-play{transition:none}.teaser-modal-shell{animation:none}}
main{overflow:clip}
@media(min-width:651px){.event{padding-right:20%}}

/* Connected material: the artwork can travel to the actual CTA and next heading. */
.hero-art.ribbon-art{inset:0;width:100%;height:100%;opacity:1;overflow:visible}
.statement{overflow:visible}
.statement-art.ribbon-art{inset:0;width:100%;height:100%;transform:none;overflow:visible;pointer-events:none}
.contact{position:relative;z-index:1}
.living-ribbon{pointer-events:none}
@media(max-width:650px){.hero-art.ribbon-art{inset:0;width:100%;height:100%}.statement-art.ribbon-art{inset:0;width:100%;height:100%;transform:none}}

/* The first gesture starts a short ribbon sequence before native scrolling resumes. */
.hero-scroll-stage{position:relative;--ribbon-sticky-top:96px}
.hero-scroll-stage .hero{min-height:calc(100svh - var(--ribbon-sticky-top))}
html{scrollbar-gutter:stable}
html.ribbon-scroll-lock{overflow:hidden!important;scroll-behavior:auto!important;overscroll-behavior:none}
@media(max-width:650px){.hero-scroll-stage{--ribbon-sticky-top:76px}}

/* Native mobile pinning keeps inertia in the browser instead of fighting scrollY.
   Each pin includes the following content, so its travel never exposes a blank spacer. */
.ribbon-scroll-content{display:flow-root}
.contact-scroll-anchor{display:none}
@media(max-width:650px){
 .hero-scroll-stage .hero{min-height:0;padding-bottom:24px}
 html.ribbon-native .ribbon-scroll-stage{position:relative;overflow-anchor:none}
 html.ribbon-native .ribbon-scroll-stage::after{content:"";display:block;height:var(--ribbon-travel,0px)}
 html.ribbon-native .contact-scroll-anchor{display:block;position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:20px}
 html.ribbon-native .ribbon-scroll-content{position:sticky;top:var(--ribbon-sticky-top,76px)}
}