:root {--clamptxt: clamp(2rem, -.909rem + 14.545vw, 3rem);}

.block {font-family: aktiv-grotesk-extended, sans-serif;}

.ph {border-bottom: 0; color: var(--white); background-color: transparent; background-image: linear-gradient(0deg, transparent, rgb(0 0 0 / .55) 100%); background-blend-mode: multiply;}
.ph-menu {color: var(--white);}
.block:has(.mask50) {margin-top: calc(-1 * var(--phheight) - 1px);}

.block-hero50 {min-height: 100dvh;}

.ph-menu a {display: inline-flex; gap: .75rem; text-align: center;}
.ph-menu a:hover {text-decoration: underline;}

.txt24 {font-weight: 600; font-size: 1.5rem; line-height: 1.4;}
.txt36 {font-weight: 400; font-size: clamp(1.5rem, -.682rem + 10.909vw, 2.25rem); line-height: 1.18;}
.f4 {font-size: clamp(1.5rem, -.682rem + 10.909vw, 2.25rem);}

.block .btn {padding-inline: 2.5rem; font-size: .8125rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: var(--white); background-color: var(--black); --bc: var(--black);}
.block .btn:hover {color: var(--black); background-color: var(--white);}

.block-lgm-image ~ .block {color: var(--white); background-color: var(--black); --bgfill: var(--black);}
.block-lgm-image ~ .block .btn {color: var(--black); background-color: var(--white); --bc: var(--white);}
.block-lgm-image ~ .block .btn:hover {color: var(--white); background-color: var(--black);}

.block-lgm-image ~ .block .btn-external::after {background-image: url('images/external-black.svg');}
.block-lgm-image ~ .block .btn-external:hover::after {background-image: url('images/external.svg');}

.block-centered > .wrapper h2 + * {margin-top: 2.5rem;}
.block-centered p:has(.btn ~ .btn) {display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 3.75rem;}
.block-centered .btn {margin-top: 0;}

.split-imgtxt {padding-block: var(--hs); background-color: var(--black);}
.split-imgtxt .wrapper {--mw: 616px;}
.split-imgtxt img {display: block;}
.split-txt {z-index: -1;}

.block:has(.pgr-vision) {min-height: 100dvh; padding-block: 6.25rem; text-align: center; --mw: 48.125rem;}
.block:has(.pgr-vision) h2 {margin: 0;}
.block:has(.pgr-vision) pg-rotatingtext .rts {display: grid; overflow: clip; margin-block: 1.875rem 3.125rem;}
.block:has(.pgr-vision) pg-rotatingtext .rt {grid-area: 1 / 1; height: 100%; opacity: 0; transition: .5s ease-in-out;}
.block:has(.pgr-vision) pg-rotatingtext .rt:not([aria-hidden="true"]) {opacity: 1;}

.mask50 {display: grid; grid-template: 1fr 1fr 1fr / max(var(--hs), ((100% - 66.875rem) / 2)) 2rem 1fr 2rem max(var(--hs), ((100% - 66.875rem) / 2)); height: 100dvh;}
.mask50 > p {display: none;}
.mask50 video, .mask50::after {grid-area: 1 / 1 / -1 / -1; place-self: center;}
.mask50 video {aspect-ratio: 640 / 1220;}
.mask50-desktop {display: none;}
.mask50-bg {z-index: 1;}
.mask50::after {z-index: 2; width: 100%; height: 100%; background-color: rgb(0 0 0 / .2); backdrop-filter: blur(1.875rem); content: '';}
.mask50-masked {z-index: 3; mask-image: url('images/50.svg'); mask-position: center; mask-repeat: no-repeat; mask-size: var(--maskscale, 1000%); transition: all .4s ease-in-out;}
.cued .mask50-masked {scale: .8; --maskscale: 100%;}
.mask50 button {z-index: 4; grid-area: 3 / 4; place-self: end; margin-bottom: var(--hs);}
.mask50 h1 {display: grid; z-index: 4; grid-area: 3 / 3; place-items: center; margin-top: 0; font-weight: 600; font-size: clamp(1.25rem, -.5rem + 8.75vw, 3rem); line-height: 1.08; text-align: center; text-transform: uppercase; letter-spacing: -.02em; color: var(--white); opacity: 0; transition: opacity .3s ease-in-out 1s;}
.cued h1 {opacity: 1;}
.mask50 h1 > * {grid-area: 1 / 1;}
.mask50 h1 pg-rotatingtext .rts {display: grid; align-items: center; overflow: clip;}
.mask50 h1 pg-rotatingtext .rt {display: grid; grid-area: 1 / 1; align-items: center; height: 100%; opacity: 0; transition: .5s ease-in-out;}
.mask50 h1 pg-rotatingtext .rt:not([aria-hidden="true"]) {opacity: 1;}

.timeline50 {min-height: 100dvh; padding-block: 10rem;}
.timeline50 .wrapper {text-align: center; --mw: 73.125rem;}
.timeline50 p {max-width: 35.625rem; margin-inline: auto; font-size: .875rem; color: #d3d7da;}
.timeline50 p:empty {display: none;}
.timeline50 p strong {display: block; margin-bottom: .25rem; font-weight: 600; font-size: 1rem; line-height: 1.25; color: #fff;}
.timeline50 pg-slider {margin-top: 3.75rem;}
.timeline50 pg-slider:defined {display: grid; grid-template: auto auto / max(1.5rem, ((100% - 73.125rem) / 2)) auto 1fr max(1.5rem, ((100% - 73.125rem) / 2)); row-gap: 2.5rem;}
.timeline50 pg-slider:defined [aria-label="Slider controls"] {display: grid; grid-area: 2 / 3; grid-template-columns: auto auto auto; gap: 1.5rem; place-self: center start;}
.timeline50 pg-slider:defined [aria-label="Slider controls"]::after {grid-area: 1 / 2; content: '';}
.timeline50 pg-slider:defined .slide-wrap {grid-area: 1 / 1 / 2 / -1; gap: var(--hs); scroll-behavior: smooth; padding-inline: max(1.5rem, ((100% - 73.125rem) / 2)); font-size: .875rem; line-height: 1.43; color: #d3d7da;}
.timeline50 pg-slider:defined .slide-wrap > * {flex-shrink: 0; max-width: 80dvw;}
.timeline50 pg-slider:defined .img {display: grid; grid-template-rows: 100%; height: clamp(20rem, 9.107rem + 54.464vw, 35.25rem); overflow: clip; border-radius: 1.875rem;}
.timeline50 pg-slider:defined .img > * {grid-area: 1 / 1;}
.timeline50 pg-slider:defined .img > div {z-index: 1; align-self: end; padding: 1.25rem; font-weight: 200; font-size: 4rem; line-height: .94; letter-spacing: -.2em; color: var(--white);}
.timeline50 pg-slider:defined .img::after {display: block; grid-area: 1 / 1; align-self: end; height: 100%; background-image: linear-gradient(180deg, transparent 70%, rgb(0 0 0 / .6) 90%), linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .6) 70%); content: '';}
.timeline50 pg-slider:defined .img img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.timeline50 pg-slider:defined .bar {display: grid; grid-area: 2 / 2; align-self: center; width: 10.625rem; height: 3px; margin-right: 1.875rem; background-color: #2c2c2c;}
.timeline50 pg-slider:defined .bar::after {width: var(--w); height: 100%; background-color: var(--white); transition: .3s width; content: '';}

@media (min-width: 40em) { /* 640px */

	.mask50 video {aspect-ratio: 1920 / 984; width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.mask50-desktop {display: block;}
	.mask50-mobile {display: none;}
	.mask50-masked {--maskscale: 700%;}
	.cued .mask50-masked {scale: .4;}

}

@media (min-width: 48em) { /* 768px */

	.timeline50 pg-slider:defined .slide-wrap {column-gap: 1.875rem;}

	.timeline50 pg-slider:defined .img > div {font-size: 1.5rem; line-height: 1.17; letter-spacing: -.04em;}
	.timeline50 pg-slider:defined .highlight .img > div {font-size: 8rem; line-height: .94; letter-spacing: -.2em;}

}

@media (min-width: 75em) { /* 1200px */

	.mask50 h1 {align-self: start; margin-top: 1.875rem;}
	.mask50 h1 pg-rotatingtext .rt {display: grid; grid-area: 1 / 1; align-items: center; height: 100%; opacity: 1; translate: 0 100%; animation: translate-up-out .3s 1 cubic-bezier(.7, 0, .3, 1); transition: none;}
	.mask50 h1 pg-rotatingtext .rt:not([aria-hidden="true"]) {translate: 0 0%; animation: translate-up-in .3s 1 cubic-bezier(.7, 0, .3, 1);}

	.split-img {position: relative;}
	.split-img-video::after {position: absolute; width: 100%; height: 100%; max-height: 658px; border-radius: 1.875rem; background-color: rgb(0 0 0 / .6); content: '';}
	.split-imgtxt {z-index: 1; padding-block: 0; background-color: transparent;}

}

@keyframes translate-up-in {
	0% {translate: 0 100%;}
	100% {translate: 0 0%;}
}

@keyframes translate-up-out {
	0% {translate: 0 0%;}
	100% {translate: 0 100%;}
}