.form-twi{display: grid;grid-template-columns: 50% 50%;background: transparent;min-height: 100vh} .form-twi__image{position: relative} .form-twi__image img{position: absolute;top: 0;left: 0;right: 0;bottom: 0;object-fit: cover;object-position: center;z-index: 1;width: 100%;height: 100%} @media screen and (max-width: 768px){.form-twi__image img{object-position: top} } .form-twi__title:before{content: attr(data-index);color: #727272;margin-right: clamp(10px,2.76vw + 0.1px,53px);display: none !important;text-align: left !important} .form-twi__title{font-family: GT-America-Mono,monospace;font-weight: 300;font-size: clamp(22px,1.77vw + 0.1px,34px);line-height: 1.3;letter-spacing: 0;text-align: left !important;display: flex;align-items: center;justify-content: start;gap: 30px} .form-twi__title > span{font-size: 13px;max-width: 300px;overflow: hidden} .form-twi__content{display: flex;flex-direction: column;padding: 20.18vh clamp(20px,6.51vw + 0.1px,125px);font-family: "General Sans",sans-serif;font-size: clamp(20px,1.5625vw + 0.1px,30px);line-height: 1.3} .form-twi__content p{margin-bottom: 1em} .form-twi__description{flex: 1 1 auto;display: flex;flex-direction: column;justify-content: center;margin-bottom: 1em} .sc-button{background: #000;color: #fff;text-decoration: none;display: inline-flex;align-items: center;gap: 10px;padding: 10px 15px;font-family: GT-America-Mono,monospace;font-weight: 300;font-size: 14px;text-transform: uppercase;width: max-content;transition: 0.3s ease !important} .sc-button:hover{transform: translate(1px,-1px);box-shadow: -3px 3px 3px 0 rgba(0,0,0,0.6)} @media screen and (max-width: 768px){.form-twi{display: block} .form-twi__image{height: 45vh} .form-twi__content{padding-top: 5vh;padding-bottom: 5vh} .form-twi__title:before{display: block;margin: 0} .form-twi__title{font-size: 28px;margin-bottom: 3.48vh} .form-twi__description{margin-bottom: 3.48vh} } .form-cta{padding: 10vh 20px;min-height: 100vh;background: transparent url(../img/pager-bg/generic-bg.png) no-repeat center center / cover;display: flex;flex-direction: column;justify-content: center} .form-cta__container{max-width: 1590px;display: flex;align-items: center;gap: clamp(20px,5.2vw + 0.1px,100px);margin: 0 auto} .form-cta__content{padding-inline: clamp(20px,6.51vw + 0.1px,60px);flex: 1 1 auto} .form-cta__content h2{font-size: clamp(30px,3.125vw + 0.1px,60px);letter-spacing: 0} .form-cta__description{padding-left: clamp(0px,3.64vw + 0.1px,70px);font-family: "General Sans",sans-serif;line-height: 1.3} .form-cta__description p{margin-bottom: 1.3em} .form-cta__description .sc-button{margin-top: 50px} .form-cta__form{width: 50%;flex: 0 0 auto;background: #fff;padding: 40px} .form-cta__form-meta{font-family: GT-America-Mono,monospace;font-size: 20px;display: flex;gap: 26px;align-items: center;margin-bottom: 8vh;text-transform: uppercase} .form-cta__form-meta-tag{background: #000;color: #fff;width: 63px;height: 63px;display: flex;align-items: center;justify-content: center} .form-cta__form-meta h3{font-size: clamp(20px,1.4vw + 0.1px,27px);letter-spacing: 0;margin-bottom: 2.6vh} .form-cta__option{border-bottom: solid 0.5px #000;padding-bottom: 2.78vh;margin-bottom: 2.3vh} .form-cta__option:last-child{margin-bottom: 0;border-bottom: none} .form-cta__option h4:before{content: attr(data-index);font-family: FT-Lambert,FT-Lambert Fallback\:Libre Baskerville,FT-Lambert Fallback\:Georgia,FT-Lambert Fallback\:Times New Roman,Libre Baskerville,Georgia,Times New Roman,serif;font-size: clamp(20px,1.5625vw + 0.1px,30px);transform: translateY(-2px)} .form-cta__option h4{display: flex;align-items: center;gap: 15px;font-size: clamp(16px,1.04vw + 0.1px,20px);font-family: "General Sans",sans-serif;text-transform: unset;line-height: 1;margin-bottom: 1.85vh} .form-cta__option h4 sup{font-family: GT-America-Mono,monospace;font-size: 8px;text-transform: uppercase;max-width: 35ch;line-height: 1.2;letter-spacing: 0} .form-cta__option-item-list{display: flex;flex-wrap: wrap;column-gap: 20px} .form-cta__option-item{display: flex;gap: 9px} .form-cta__option-item:before{content: "";display: block;width: 14px;height: 14px;border: solid 1px #000;flex: 0 0 auto;transform: translateY(8px)} .form-cta__option-item input[type="checkbox"],.form-cta__option-item input[type="radio"]{display: none} .form-cta__option-item:has(input[type="checkbox"]:checked):before,.form-cta__option-item:has(input[type="radio"]:checked):before{background: #000} @media screen and (max-width: 768px){.form-cta__container{flex-direction: column} .form-cta__content{padding: 0} .form-cta__form{width: 100%} } .mp-screen{position: relative;width: 100%;min-height: 100vh;overflow: hidden;display: flex;flex-direction: column;color: #ffffff;background: transparent url(../img/pager-bg/generic-bg.png) no-repeat center center / cover;object-fit: cover;object-position: center;z-index: 1} .mp-screen__background-video{position: fixed;top: 50%;left: 50%;min-width: 100vw;min-height: 100vh;z-index: -1;object-fit: cover;aspect-ratio: 368 / 156;transform: translate(-50%,-50%)} @media screen and (min-width: 1024px){.mp-screen__background-video.scaled{top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;scale: 1.2;object-position: center center;transform: none} } .mp-topbar{position: absolute;top: 0;z-index: 3;display: flex;align-items: center;justify-content: space-between;padding: clamp(15px,2.35vw,45px) clamp(30px,4.81vh,52px) 0;width: 100%} .mp-icon-btn{background: none;border: none;color: #ffffff;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;opacity: 0.9;transition: opacity 0.2s ease} .mp-icon-btn:hover{opacity: 1} .mp-icon-btn svg{width: 12px;height: 12px;display: block} .mp-main{position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 0;gap: clamp(30px,10.09vw,109px)} .mp-main::before{content: "";background: #000000;background: linear-gradient( to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.7) 100% );pointer-events: none;transition: opacity 0.3s ease-in-out;position: absolute;width: 100%;height: 100%;inset: 0;z-index: -1} .mp-main > iframe{z-index: -2} .mp-main .h2{color: #fff !important;margin-bottom: 0} @media (max-width: 768px){.mp-main{padding: clamp(40px,23.24vh,70px) 45px clamp(30px,17.22vh,70px)} .mp-main .h2{margin-top: 0 !important} } .mp-subtitle{font-size: clamp(18px,1.145vw,22px);margin-bottom: clamp(30px,6.3vh,68px);font-family: GT-America-Mono,monospace;font-weight: 300;margin-top: 0;text-transform: uppercase} .mp-progress{width: 100%;max-width: clamp(900px,78.177vw,1501px);margin: 0 auto 10px} .mp-progress-track{display: grid;grid-template-columns: repeat(6,1fr);align-items: center} .mp-step{position: relative;display: flex;align-items: center;justify-content: center} .mp-progress-node{position: relative;z-index: 1;flex-shrink: 0;width: clamp(10px,0.9375vw,18px);height: clamp(10px,0.9375vw,18px);border: 1px solid rgba(255,255,255,0.8);background: transparent} .mp-progress-node--done{background: #ffffff;border: 1px solid #ffffff} .mp-progress-node--pending{background: transparent;border: 1px solid rgba(255,255,255,0.8)} .mp-progress-line{position: absolute;top: 50%;left: 50%;width: 100%;height: 0;border-top: 1px solid rgba(255,255,255,0.9);transform: translateY(-50%);z-index: 0} .mp-progress-line--dotted{border-top-style: dotted;border-top-width: 2px} .mp-progress-labels{display: grid;grid-template-columns: repeat(6,1fr);margin-top: 16px} .mp-progress-label{font-weight: 300;letter-spacing: 0.3px;text-transform: uppercase;line-height: 1.27;padding: 0 6px;text-align: center;opacity: 0.75;transition: opacity 0.2s ease;font-size: clamp(16px,1.458vw,28px);font-family: GT-America-Mono,monospace} .mp-progress-label--done,.mp-progress-label--current{opacity: 1} .mp-progress-mobile{display: none;flex-direction: column;max-width: 320px;margin: 0 auto} .mp-step-v{position: relative;height: 64px;display: flex;align-items: center;gap: 18px} .mp-step-v__node-col{position: relative;width: 28px;flex-shrink: 0;height: 64px;display: flex;align-items: center;justify-content: center} .mp-step-v .mp-progress-node{width: 14px;height: 14px} .mp-step-v .mp-progress-line{top: 50%;left: 50%;width: 0;height: 100%;border-top: none;border-left: 1px solid rgba(255,255,255,0.9);transform: translate(-50%,0)} .mp-step-v .mp-progress-line--dotted{border-left-style: dotted;border-left-width: 2px;border-top: none} .mp-step-v .mp-progress-node--done{background: #ffffff;border-color: #ffffff} .mp-step-v .mp-progress-node--pending{background: transparent;border-color: rgba(255,255,255,0.8)} .mp-step-v .mp-progress-label{text-align: left;padding: 0;font-size: 15px;line-height: 1.3} .mp-nav{display: flex;align-items: center;justify-content: center;gap: 20px;margin-top: 10px} .mp-btn{font-family: inherit;font-size: 14px;font-weight: 300;letter-spacing: 1px;text-transform: uppercase;background: transparent;border: 1px solid #fff;color: #ffffff;padding: 13px 32px;cursor: pointer;display: inline-flex;align-items: center;gap: 9px;transition: background 0.2s ease,color 0.2s ease;font-family: GT-America-Mono,monospace} .mp-btn__arrow{flex: 0 0 auto} .mp-btn--back .mp-btn__arrow{transform: scaleX(-1)} .mp-btn__arrow img{height: 12px;width: 12px} .mp-btn:hover{background: #ffffff;color: #000000} .mp-btn:hover img{filter: brightness(0)} .mp-btn:disabled{opacity: 0.35;cursor: not-allowed;pointer-events: none} .mp-btn__arrow{font-size: 13px;line-height: 1} @media (max-width: 760px){.mp-progress-node{width: 18px;height: 18px} .mp-progress-track,.mp-progress-labels{display: none} .mp-progress-mobile{display: flex} .mp-title{font-size: 22px} .mp-subtitle{font-size: 11px;padding: 0 8px} .mp-nav{flex-direction: row} } @media (max-width: 480px){.mp-topbar{padding: 20px 18px 0} .mp-video-link{margin: 0 18px 20px 0} }