.hero-stage{--card-w:clamp(12rem, 21vw, 21rem);--card-h:calc(var(--card-w) * 4 / 3);--card-gap:clamp(.75rem, 1.2vw, 1.5rem);--card-center-y:58%;--card-radius:1.25rem;--side-travel:32vw;background:var(--color-canvas);height:220svh;position:relative}.hero-stage__sticky{height:100svh;position:sticky;top:0;overflow:hidden}.hero-stage__background{background:var(--color-photo-frame);clip-path:inset(calc((var(--card-center-y) - var(--card-h) / 2) * var(--shrink)) calc((50% - var(--card-w) / 2) * var(--shrink)) calc((100% - var(--card-center-y) - var(--card-h) / 2) * var(--shrink)) calc((50% - var(--card-w) / 2) * var(--shrink)) round calc(var(--card-radius) * var(--shrink)));will-change:clip-path;position:absolute;inset:0;overflow:hidden}.hero-stage__scrim{background:linear-gradient(to bottom, var(--color-photo-scrim), transparent 45%);opacity:calc(1 - var(--shrink));position:absolute;inset:0}.hero-stage__outline{top:calc(var(--card-center-y) - var(--card-h) / 2);left:calc(50% - var(--card-w) / 2);width:var(--card-w);height:var(--card-h);border:1px solid var(--color-on-photo);border-radius:var(--card-radius);opacity:calc(.6 * (1 - var(--shrink) * 2));pointer-events:none;position:absolute}.hero-stage__title{top:calc(var(--header-height) + var(--space-l));left:var(--gutter);right:var(--gutter);font-size:var(--text-xxl);font-weight:500;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--color-on-photo);opacity:calc(1 - var(--intro));transform:translateY(calc(var(--intro) * -3rem));margin:0;position:absolute}.hero-stage__section-title{top:calc(var(--card-center-y) - var(--card-h) / 2 - var(--space-l) - 1em);left:var(--gutter);right:var(--gutter);text-align:center;font-size:var(--text-l);font-weight:500;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--color-canvas-text);opacity:var(--cards);transform:translateY(calc((1 - var(--cards)) * 1.5rem));margin:0;position:absolute}.hero-stage__row{top:calc(var(--card-center-y) - var(--card-h) / 2);justify-content:center;gap:var(--card-gap);pointer-events:none;display:flex;position:absolute;left:0;right:0}.hero-stage__row--interactive{pointer-events:auto}.hero-stage__card{flex:0 0 var(--card-w);height:var(--card-h);border-radius:var(--card-radius);color:var(--color-on-photo);text-decoration:none;position:relative;overflow:hidden}.hero-stage__card--left,.hero-stage__card--right{background:var(--color-photo-frame);opacity:var(--cards)}.hero-stage__card--left{transform:translateX(calc((1 - var(--cards)) * var(--side-travel) * -1)) scale(.94)}.hero-stage__card--right{transform:translateX(calc((1 - var(--cards)) * var(--side-travel))) scale(.94)}.hero-stage__card-media{position:absolute;inset:0}.hero-stage__card:after{content:"";background:linear-gradient(to top, var(--color-photo-scrim), transparent 40%);opacity:var(--labels);pointer-events:none;position:absolute;inset:0}.hero-stage__card-media--center{opacity:0}.hero-stage__card-name{left:var(--space-s);right:var(--space-s);bottom:var(--space-s);font-size:var(--text-m);font-weight:500;line-height:var(--leading-tight);color:var(--color-on-photo);z-index:1;opacity:var(--labels);margin:0;position:absolute}.hero-stage__card:hover .hero-stage__card-name,.hero-stage__card:focus-visible .hero-stage__card-name{text-underline-offset:.2em;text-decoration:underline}.hero-stage--static{height:auto}.hero-stage--static .hero-stage__sticky{height:auto;padding-bottom:var(--space-xl);position:relative}.hero-stage--static .hero-stage__background{clip-path:none;height:100svh;position:relative}.hero-stage--static .hero-stage__outline{display:none}.hero-stage--static .hero-stage__section-title{margin:var(--space-l) 0;position:static}.hero-stage--static .hero-stage__row{flex-wrap:wrap;position:static}.hero-stage--static .hero-stage__card-media--center{opacity:1}@media (max-width:48rem){.hero-stage{--row-top:calc(var(--header-height) + var(--space-l) + 2.5rem);--card-w:calc(100vw - 2 * var(--gutter));--card-h:calc((100svh - var(--row-top) - var(--space-m) - (var(--card-count,3) - 1) * var(--card-gap)) / var(--card-count,3));--card-center-y:calc(var(--row-top) + var(--card-h) / 2);--side-travel-y:60svh}.hero-stage__row{flex-direction:column;align-items:center}.hero-stage__card{flex:0 0 var(--card-h);width:var(--card-w)}.hero-stage__card--center{order:-1}.hero-stage__card--left,.hero-stage__card--right{transform:translateY(calc((1 - var(--cards)) * var(--side-travel-y)))}.hero-stage__section-title{top:calc(var(--row-top) - var(--space-s) - 1.2em)}.hero-stage__title{top:auto;bottom:var(--space-l)}.hero-stage--static .hero-stage__row{flex-direction:column}}