.accordion {
counter-increment: count;
--number: counter(count);
position: relative;
border-top: 1px solid #dedede;
}
.accordion:nth-child(-n+9) {
--number: "0"counter(count)".";
}
.accordion__tab {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 2em;
font-size: 1.735rem;
line-height: 1.1;
letter-spacing: -0.02em;
text-align: left;
color: #3b413a;
padding: 0.6em 3em 0.6em 10%;
}
@media only screen and (min-width: 1279px) {
.accordion__tab {
font-size: 1.354vw;
}
}
@media only screen and (max-width: 1278.99px) {
.accordion__tab {
font-size: 4.103vw;
}
}
.accordion__tab::before {
content: var(--number);
position: absolute;
left: 0;
width: -moz-fit-content;
width: fit-content;
}
.accordion__tab .text {
width: 100%;
}
.accordion__tab .icon {
position: absolute;
right: 0;
width: 2rem;
height: 2rem;
color: #313132;
background: #EFF2F4;
border-radius: 50%;
}
@media only screen and (min-width: 1279px) {
.accordion__tab .icon {
width: 1.563vw;
height: 1.563vw;
}
}
@media only screen and (max-width: 1278.99px) {
.accordion__tab .icon {
display: none;
}
}
.accordion__tab .icon-plus {
width: 0.761rem;
height: 0.761rem;
}
@media only screen and (min-width: 1279px) {
.accordion__tab .icon-plus {
width: 0.595vw;
height: 0.595vw;
}
}
.accordion__panel {
overflow: hidden;
max-height: 0;
pointer-events: none;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.accordion__panel[aria-hidden=false] {
max-height: 9999px;
pointer-events: all;
transition: max-height 0.5s cubic-bezier(1, 0, 1, 0);
}
.accordion__content {
font-size: 1.066rem;
line-height: 1.2;
letter-spacing: -0.02em;
padding: 0.8em 3em 3em 10%;
}
@media only screen and (min-width: 1279px) {
.accordion__content {
font-size: 0.833vw;
}
}
.accordion:last-child {
border-bottom: 1px solid #dedede;
}
.accordions.is-style-outlined .accordion {
border: 1px solid #e1e1e1;
}
.accordions.is-style-outlined .accordion__tab {
min-height: 8rem;
font-size: clamp(1.8rem, 1.8rem + 6 * (100vw - 375px) / 905, 2.4rem);
padding: 1.4rem 9rem 1.4rem 2.4rem;
}
@media only screen and (min-width: 1279px) {
.accordions.is-style-outlined .accordion__tab {
min-height: 8.6rem;
padding: 1.6rem 14rem 1.6rem 6rem;
}
}
.accordions.is-style-outlined .accordion__tab .icon {
right: 2.4rem;
width: 4.2rem;
height: 4.2rem;
color: #fff;
background: #030a2c;
padding: 1.6rem;
}
@media only screen and (min-width: 1279px) {
.accordions.is-style-outlined .accordion__tab .icon {
right: 6rem;
width: 5.6rem;
height: 5.6rem;
padding: 2.1rem;
}
}
.accordions.is-style-outlined .accordion__content {
padding: 2.4rem 2.4rem 3.2rem;
border-top: 1px solid #e1e1e1;
}
@media only screen and (min-width: 1279px) {
.accordions.is-style-outlined .accordion__content {
padding: 2.4rem 6rem 3.2rem;
}
}
.accordions.is-style-outlined .accordion + .accordion {
border-top: 0;
}
.accordions.is-style-contained .accordion {
background: #fff;
border-radius: 1.6rem;
box-shadow: 1px 2px 16px 1px rgba(0, 0, 0, 0.02);
}
.accordions.is-style-contained .accordion__tab {
padding: 1.6rem 7.2rem 1.6rem 3.2rem;
}
.accordions.is-style-contained .accordion__tab .icon {
right: 2.4rem;
}
.accordions.is-style-contained .accordion__content {
padding: 2.4rem 3.2rem 3.2rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.accordions.is-style-contained .accordion + .accordion {
border-top: 0;
margin-top: 1.6rem;
}.cta-int {
overflow: hidden;
position: relative;
display: flex;
width: 100% !important;
max-width: unset !important;
}
.cta-int__inner-container {
padding-top: calc(4.8rem + 10%);
padding-bottom: calc(4.8rem + 12%);
}
@media only screen and (max-width: 1278.99px) {
.cta-int__inner-container {
padding-top: 42.051vw;
padding-bottom: 42.051vw;
}
}
.cta-int__content {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: calc(100% - var(--site-padding) * 2);
height: 100%;
margin: 0 auto;
}
.cta-int__tagline {
position: relative;
display: block;
font-size: clamp(2.1rem, 2.1rem + 6 * (100vw - 375px) / 905, 2.7rem);
text-align: center;
color: #131513;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 0.1rem;
}
@media only screen and (min-width: 1279px) {
.cta-int__tagline {
font-size: 2.08vw;
margin-bottom: 0.313vw;
}
}
@media only screen and (max-width: 1278.99px) {
.cta-int__tagline {
font-size: 6.154vw;
margin-bottom: 6.154vw;
}
}
.cta-int__tagline > span {
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: bottom;
letter-spacing: -0.02em;
}
.cta-int__tagline > span > span {
display: inline-block;
}
.cta-int__heading {
position: relative;
font-size: clamp(5.6rem, 5.6rem + 51 * (100vw - 375px) / 905, 10.7rem);
text-align: center;
line-height: 1.1;
color: #131513;
margin: 0;
}
@media only screen and (min-width: 1279px) {
.cta-int__heading {
font-size: 8.33vw;
}
}
@media only screen and (max-width: 1278.99px) {
.cta-int__heading {
font-size: 15.385vw;
}
}
.cta-int__heading > span {
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: bottom;
letter-spacing: -0.02em;
}
.cta-int__heading > span > span {
display: inline-block;
}
.cta-int__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: clamp(4.5rem, 3.516vw, 3.516vw);
font-size: clamp(1.2rem, 0.833vw, 0.833vw);
text-decoration: none;
color: #fff;
background: #131513;
border-radius: 100vw;
padding: 0 2em;
margin: 4.1rem auto 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media only screen and (min-width: 1279px) {
.cta-int__button {
margin: 2.604vw auto 0;
}
}
@media only screen and (max-width: 1278.99px) {
.cta-int__button {
padding: 0 7.179vw;
height: 14.359vw;
font-size: 3.333vw;
margin: 16.41vw auto 0;
}
}
.cta-int__button:hover {
color: #fff;
background: #606060;
}
.cta-int__background {
position: absolute;
inset: 0;
z-index: -1;
animation: animateColors 7s infinite linear;
}
.cta-int__background::before {
content: "";
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
background-color: #a800ff;
animation: animateColors 7s infinite linear;
z-index: -1;
}
.cta-int__background img {
position: absolute;
inset: 0;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
margin: auto;
z-index: 2;
}
.cta-int__background canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 100%;
mix-blend-mode: soft-light;
z-index: 1;
}
@media (min-aspect-ratio: 3/2) {
.cta-int {
min-height: 100vh;
}
}
.cta-int.js-visible .cta-int__tagline.js-animate-text > span > span,
.cta-int.js-visible .cta-int__heading.js-animate-text > span > span {
animation: animateTextLine 0.75s ease-out 1 both;
}
.cta-int.js-visible .cta-int__tagline.js-animate-text > span > span {
animation-delay: 600ms;
}
.cta-int.js-visible .cta-int__heading.js-animate-text > span > span {
animation-delay: 400ms;
}
.cta-int.js-visible .cta-int__button {
animation: animateOpacity 1s ease-out 1 both;
animation-delay: 1000ms;
}