/* Pinned opening and reversible, scroll-driven typography. */
.hero-stage{background:#fff;position:relative}
.hero{background:#fff;isolation:isolate;height:100svh;min-height:660px;max-height:none}
.hero-image{z-index:0}
.hero-content,.hero-footer,.image-note{z-index:2}
.hero .masthead{position:absolute;z-index:3;top:110px;left:3%;right:3%;padding:0;background:transparent;border:0;color:white;mix-blend-mode:difference;pointer-events:none}
.hero .masthead-word{font-size:25.3vw;line-height:.83;letter-spacing:-.025em}
.hero .masthead-meta{font-size:10px;margin-top:20px;border-top:1px solid white;padding-top:12px}
.hero .masthead-meta span:last-child{color:white}
.hero-content{bottom:100px;max-width:420px}
.hero h1{font-size:clamp(23px,2.3vw,36px);letter-spacing:-1px}
.hero .eyebrow{font-size:9px;margin-bottom:15px}
.hero .actions{margin-top:22px}
.scroll-line{background:white;padding:40px 0 70px;overflow:clip}
.scroll-line-sticky>.eyebrow,.kinetic-caption{margin-left:3%;font-size:10px;letter-spacing:1px}
.kinetic-line{display:flex;align-items:center;width:max-content;gap:4vw;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(90px,17vw,280px);font-weight:700;line-height:1.2;white-space:nowrap;padding:0 3vw}
.kinetic-rule{display:block;width:20vw;height:2px;background:var(--magenta);transform-origin:left center}
.kinetic-last{color:var(--magenta)}
.kinetic-caption{margin-top:30px}
.scroll-motion .hero-stage{height:185svh}
.scroll-motion .hero{position:sticky;top:0;height:100svh;min-height:600px}
.scroll-motion .hero-image{transform:scale(var(--hero-scale,1.12));clip-path:inset(0 0 var(--hero-wipe,0%) 0);will-change:clip-path,transform}
.scroll-motion .hero-content,.scroll-motion .hero-footer,.scroll-motion .image-note{opacity:var(--hero-opacity,1);transform:translateY(var(--copy-drift,0px))}
.scroll-motion .hero .masthead-word{line-height:.92;transform:translateY(var(--title-drift,0px));overflow:hidden}
.scroll-motion .hero .masthead-meta{transform:translateY(var(--title-drift,0px))}
.scroll-motion .scroll-line{height:110svh;overflow:clip;padding:0}
.scroll-motion .scroll-line-sticky{position:sticky;top:16svh;padding:55px 0}
.scroll-motion .kinetic-line{transform:translate3d(var(--line-x,0px),0,0);will-change:transform}
.scroll-motion .kinetic-rule{transform:scaleX(var(--line-scale,1))}
.scroll-motion .kinetic-last{transform:translateX(var(--last-x,0px))}
.scroll-motion .styles .style-row{transition:background .25s,color .25s,opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);transform:translateX(7vw);opacity:0}
.scroll-motion .styles .style-row.motion-in{transform:translateX(0);opacity:1}
@media(max-width:700px){
 .hero .masthead{top:115px;left:5%;right:5%}.hero .masthead-word{font-size:24.2vw}.hero .masthead-meta{font-size:7px;letter-spacing:0;gap:8px;margin-top:14px}
 .hero-content{bottom:120px}.hero h1{font-size:28px}.hero .actions{gap:16px}.hero .eyebrow{font-size:8px}
 .scroll-motion .hero-stage{height:155svh}.scroll-motion .hero{min-height:600px}
 .scroll-motion .scroll-line{height:85svh}.scroll-motion .scroll-line-sticky{top:18svh}.kinetic-line{font-size:25vw;gap:6vw}.kinetic-rule{width:24vw}.scroll-line-sticky>.eyebrow,.kinetic-caption{margin-left:5%;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.hero-stage,.scroll-motion .hero-stage{height:auto}.scroll-motion .hero{position:relative}.scroll-motion .hero-image{clip-path:none!important}.scroll-motion .hero-content,.scroll-motion .hero-footer,.scroll-motion .image-note{opacity:1}.scroll-motion .scroll-line{height:auto}.scroll-line-sticky{position:relative!important}.kinetic-line{font-size:12vw;gap:3vw;transform:none!important}.kinetic-rule{width:12vw}.kinetic-last{transform:none!important}}
.styles{overflow:clip}
/* Keep the two text blocks in normal layout, including short viewports. */
.hero,.scroll-motion .hero{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:110px 3% 100px;min-height:680px}
.hero .masthead{position:relative;top:auto;left:auto;right:auto;flex-shrink:0;width:100%}
.hero .masthead-word{font-size:min(25.3vw,max(130px,calc((100svh - 500px)*1.15)))}
.hero .hero-content{position:relative;left:auto;right:auto;bottom:auto;padding:0;flex-shrink:0;width:100%;max-width:420px}
.scroll-motion .hero-content{transform:none}
.scroll-motion .hero .masthead-word,.scroll-motion .hero .masthead-meta{transform:none}
@media(max-width:700px){.hero,.scroll-motion .hero{padding:115px 5% 120px;min-height:680px;gap:32px}.hero .masthead-word{font-size:24.2vw}.hero .hero-content{max-width:none}}