.hp-banner{
      height: 1000px;
	background-color:#cccc;
      background-image: url(img/default.jpg);
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
}




.hp-banner .video{
      position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    background-size: 100%;
    /*background-color: #000;*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: none;
}

/*.hp-banner .video:before{
position: absolute;
content: "";
background: linear-gradient(90deg, rgba(67,67,67,.8) 0%, rgba(255,255,255,0) 100%);
height: 100%;
width: 100%;
min-width: 1700px;
left: 0;
top: 0;
}
*/
.hp-banner video{
      margin: auto;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    width: 100%;
}


.hp-banner .inner{
	text-align: center;
            position: relative;
            z-index: 3;
}
.hp-banner h1{
      font-family: brush-up, sans-serif;
      font-weight: 500;
      font-style: normal;
	color:#fff;
      letter-spacing: .02em;
	font-size:clamp(160px, 12vw, 240px);
      line-height: .9em;
	margin:0 0 30px;
}

.hp-banner h1 span{
      color: #f6c1cd;
}

.hp-banner p{
      color: #fff;
      font-size: 50px;
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1em;
}

.hp-banner p span{
      color: #f6c1cd;
      position: relative;
}

.hp-banner p span:before{
      position: absolute;
      content: "";
      aspect-ratio: 660/98;
      width: 100%;
      background: url(img/under-p.png);
      background-size: 100%;
      left: 0;
      bottom: -15px;
}

.hp-banner .arrow{
      display: block;
      aspect-ratio: 177/258;
      width: 73px;
      background: url(img/arrow-d.png);
      background-size: 100%;
      margin: 0 auto;
}


.hp-intro{ padding: 100px 150px 200px; position: relative;}

.hp-intro:before{
      position: absolute;
      content: "";
      width: 100%;
      height: 48px;
      background: url(img/edge-blue.png);
      background-size: cover;
      bottom: 0;
      left: 0;
      z-index: 5;
      background-position: right;
}

.hp-intro .doodles{
      position: absolute;
      aspect-ratio: 1260/852;
      width: 685px;
      background: url(img/doods-1.png);
      background-size: 100%;
      right: .5909090909091%;
      top: -300px;
      z-index: 5;
}


.hp-intro .wrapper{
      display: flex;
      flex-wrap: wrap;
      max-width: 1800px;
      margin: 0 auto;
}

.hp-intro .wrapper .left{
      width: 50%;
}


.hp-intro .wrapper .left h2{
      font-size: 40px;
      letter-spacing: -.015em;
      font-weight: 700;
      line-height: 1.5em;
      max-width: 685px;
      margin: 0;
}

.hp-intro .wrapper .left h2 span{
      position: relative;
}


.hp-intro .wrapper .left h2 span:before{
      position: absolute;
      content: "";
      aspect-ratio: 660/98;
      width: 100%;
      background: url(img/under-p.png);
      background-size: 100%;
      left: 0;
      bottom: -8px;
}

.hp-intro .wrapper .right{
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
}

.hp-intro .wrapper .right .wrap{
      /*text-align: center;*/
}

.hp-intro .wrapper .right a.btn{
      margin: 0 0 0 20px;
       -webkit-mask-image: url(img/btn-mask-2.png);
      mask-image: url(img/btn-mask-2.png);
      mask-repeat: no-repeat;
      mask-size: 100%;
      font-size: 24px;
      line-height: 1.2em;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      padding: 1em 2.5em;
      color: #000;
      background: #f6c1cd;
}


.hp-intro .wrapper .right a.btn:nth-of-type(2){
      -webkit-mask-image: url(img/btn-mask-1.png);
      mask-image: url(img/btn-mask-1.png);
      mask-repeat: no-repeat;
      mask-size: 100%; 
}

.hp-acords{
      background-color: #0d5a9c;
      padding: 100px 150px 150px;
      position: relative;
}


.hp-acords .doodles{
      position: absolute;
      aspect-ratio: 625/953;
      width: 366px;
      background: url(img/doods-2.png);
      background-size: 100%;
      top: -150px;
      left: -47px;
      z-index: 5;
}

.hp-acords:before{
      position: absolute;
      content: "";
      width: 100%;
      height: 48px;
      background: url(img/banner.png);
      background-size: cover;
      bottom: 0;
      left: 0;
      z-index: 5;
}

.hp-acords h2{
      text-align: center;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      color: #f5f2e8;
      font-size: 50px;
      margin: 0 0 60px;
}


/*.hp-support{
	padding: 100px 150px;
}
*/

.hp-support{position: relative; padding: 50px 150px 150px;}

.hp-support:before{
      position: absolute;
      content: "";
      width: 100%;
      height: 48px;
      background: url(img/edge-yellow.png);
      background-size: cover;
      bottom: 0;
      left: 0;
      z-index: 5;
      background-position: right;
}


.hp-support .doodles-left{
      position: absolute;
      aspect-ratio: 676/1359;
      width: 485px;
      background: url(img/doods-3.png);
      background-size: 100%;
      left: 3.5%;
      bottom: -270px;
      z-index: 5;
}

.hp-support .doodles-right{
      position: absolute;
      aspect-ratio: 818/1101;
      width: 557px;
      background: url(img/doods-4.png);
      background-size: 100%;
      right: 1.3636363636364%;
      top: 60px;
}


.hp-support .wrapper{
    max-width: 1800px; margin: 0 auto; 
}


.hp-support h2{
      text-align: center;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      font-size: 50px;
      color: #000;
      margin: 0 0 80px;
}


.hp-support h2 span{
      position: relative;
}

.hp-support h2 span:before{
      position: absolute;
      content: "";
      aspect-ratio: 660/98;
      width: 100%;
      background: url(img/under-p.png);
      background-size: 100%;
      left: 0;
      bottom: -5px;
}

.hp-support a.more{
      margin: 50px auto 0;
      display: block;
      background: #0d5a9c;
      width: fit-content;
      box-sizing: border-box;
       -webkit-mask-image: url(img/btn-mask-2.png);
      mask-image: url(img/btn-mask-2.png);
      mask-repeat: no-repeat;
      mask-size: 100%;
      font-family: "Permanent Marker", cursive;
      color: #f5f2e8;
      font-size: 30px;
      text-decoration: none;
      text-align: center;
      padding: 1em 1.75em;
}

.hp-support .swiper {
	/*aspect-ratio: 240/320;*/
      width: 512px;
      height: 768px;
      max-width: unset !important;
      padding: 0 !important;
}

.hp-support .swiper-button-prev{
	left: -200px;
      width: 108px;
      height: 74px;
}

.hp-support .swiper-button-prev:after{
      content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent url(img/arrow-l.png);
    background-size: 100% 100%;
    opacity: 1;
}

.hp-support .swiper-button-next{
	right: -200px;
       width: 108px;
      height: 74px;
}

.hp-support .swiper-button-next:after{
      content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent url(img/arrow-r.png);
    background-size: 100% 100%;
    opacity: 1;
}


.hp-support .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 2em;
      font-size: 22px;
      font-weight: bold;
      color: #000;
      box-sizing: border-box;
      padding: 40px;
    }

.swiper-3d .swiper-slide-shadow{
      background: none !important;
}    

.hp-support .swiper-slide:nth-child(5n + 1) {
      background-color: #abe6f0;
    }

.hp-support .swiper-slide:nth-child(5n + 2) {
      background-color: #ece27a;
    }

.hp-support .swiper-slide:nth-child(5n + 3) {
      background-color: #b9db8a;
    }

.hp-support .swiper-slide:nth-child(5n + 4) {
      background-color: #f6b66c;
    }

.hp-support .swiper-slide:nth-child(5n + 5) {
      background-color: #f6c1cd;
    }

.hp-support .swiper-slide .icon{
      height: 282.5px;
      margin: 0 0 30px;
}

.hp-support .swiper-slide .icon img{
      height: 100%;
}

.hp-support .swiper-slide h3{
      text-align: center;
      font-size: 36px;
      letter-spacing: -.015em;
      font-weight: 700;
      line-height: 1.3em;
      max-width: 400px;
}

.hp-form{
      background: #e9dc7c;
      padding: 100px 150px 150px;
      position: relative;
}

.hp-form:before{
       position: absolute;
      content: "";
      width: 100%;
      height: 48px;
      background: url(img/banner.png);
      background-size: cover;
      background-repeat: no-repeat;
      bottom: 0;
      left: 0;
      z-index: 5;
}

.hp-form form{
      max-width: 1300px;
      margin: 0 auto;
}

.hp-form form h2{
      text-align: center;
      margin: 0 0 100px;
      font-size: 50px;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      color: #000;
}

.hp-form form h2 span{
      position: relative;
}

.hp-form form h2 span:before{
      position: absolute;
      content: "";
      aspect-ratio: 660/98;
      width: 100%;
      background: url(img/under-b.png);
      background-size: 100%;
      left: 0;
      bottom: -10px;
}

.hp-form form .captcha{
      clear: both;
}

.hp-form form .captcha .captcha__element{
      width: fit-content;
      margin: 0 auto;
}

.hp-form form .button--primary{
       margin: 0 auto 0;
      display: block;
      background: #0d5a9c;
      width: fit-content;
      box-sizing: border-box;
       -webkit-mask-image: url(img/btn-mask-2.png);
      mask-image: url(img/btn-mask-2.png);
      mask-repeat: no-repeat;
      mask-size: 100%;
      font-family: "Permanent Marker", cursive;
      color: #f5f2e8;
      font-size: 30px;
      text-decoration: none;
      text-align: center;
      padding: .4em 1.75em;
}

.hp-network{
      padding: 200px 150px 100px;
      position: relative;
}

.hp-network .doodles{
      position: absolute;
      aspect-ratio: 1062/709;
      width: 760px;
      background: url(img/doods-5.png);
      background-size: 100%;
      right: -4.7727272727273%;
      top: -170px;
      z-index: 6;
}

.hp-network #paragraph--type--multi-column-content{
      max-width: 1700px;
      margin: 0 auto;
}

.hp-network #paragraph--type--multi-column-content .item:last-of-type .paragraph{
      height: 100%;
}

.hp-network #paragraph--type--multi-column-content .item:last-of-type .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
}

.hp-network #paragraph--type--multi-column-content .item:last-of-type .content h3{
      font-size: 50px;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      color: #000;
}

.hp-network #paragraph--type--multi-column-content .item:last-of-type .content p{
      max-width: 535px;
}


.hp-network #paragraph--type--multi-column-content .item:last-of-type .content a.btn{
    margin: 0 ;
      display: block;
      background: #f6c1cd;
      width: fit-content;
      box-sizing: border-box;
       -webkit-mask-image: url(img/btn-mask-2.png);
      mask-image: url(img/btn-mask-2.png);
      mask-repeat: no-repeat;
      mask-size: 100%;
      font-family: "Permanent Marker", cursive;
      color: #000;
      font-size: 22px;
      text-decoration: none;
      text-align: center;
      padding: 1em 1.15em;
}

.hp-steps{
      padding: 100px 0;
}
.hp-steps h2{
    font-family: "Permanent Marker", cursive;
      font-weight: 400;
      font-size: 50px;
      margin: 0 auto 50px; 
      text-align: center; 
}

.hp-steps .options{
      width: 100vw;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    -webkit-box-align: end;
    position: relative;
        min-height: 26.5625rem;
}

.hp-steps .options .option{
    color: #000;
    overflow: hidden;
    position: relative;
    -webkit-transition: all ease-out .3s;
    transition: all ease-out .3s;
        height: 46.875rem;
        width: 11rem;
        max-height: unset;
        border-radius: 2.25rem 0 0 2.25rem;
        margin-right: -1.875rem;
}

.hp-steps .options .option:nth-of-type(1){background: #abe6f0;}
.hp-steps .options .option:nth-of-type(2){background: #ece27a;}
.hp-steps .options .option:nth-of-type(3){background: #b9db8a;}
.hp-steps .options .option:nth-of-type(4){background: #f6b66c;}
.hp-steps .options .option:nth-of-type(5){background: #f6c1cd; margin-right: 0;}

.hp-steps .options .option .arrow{
      position: absolute;
      aspect-ratio: 263/180;
      width: 78px;
      background: url(img/arrow-b.png);
      background-size: 100%;
      left: 50px;
      bottom: 40px;
}

.hp-steps .options .option.expand .arrow{
      transform: rotate(180deg);
}

.hp-steps .options .option.expand:first-of-type .arrow{
      transform: rotate(0deg);
}


.hp-steps .options .option.expand {
    height: 100%;
    max-height: 1000px;
    -webkit-transition: all ease-out .3s;
    transition: all ease-out .3s;
        height: 46.875rem;
        width: 67.279rem;
        max-height: unset;
    }


.hp-steps .options .option .compress-cont {
    opacity: 1;
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
}

.hp-steps .options .option.expand .compress-cont {
    opacity: 0;
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
}

.hp-steps .options .option .compress-cont .compress-num{
      position: absolute;
      color: #000;
      font-size: 160px;
      font-family: brush-up, sans-serif;
      line-height: 1em;
      box-sizing: border-box;
      padding-right: 1.875rem;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
}

.hp-steps .options .option .compress-cont .compress-title{
      position: absolute;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      font-size: 50px;
      line-height: 1em;
          transform-origin: bottom left;
      -webkit-transform: rotate(90deg) translateY(-25%);
        -ms-transform: rotate(90deg) translateY(-25%);
        transform: rotate(90deg) translateY(-25%);
        left: 25%;
        top: 25%;
    
}

.hp-steps .options .option .expand-cont{
    display: none;
} 

.hp-steps .options .option.expand .expand-cont{
    display: block;
} 

.hp-steps .options .option.expand .expand-cont .expand-cont-cont{
      box-sizing: border-box;
      padding: 40px 50px;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .cap-title h3{
      font-family: "Permanent Marker", cursive;
      font-size: 70px;
      font-weight: 400;
      margin: 0 0 50px;
      padding: 0 0 18px;
      position: relative;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .cap-title h3:before{
      position: absolute;
      content: "";
      aspect-ratio: 1123/37;
      width: 80%;
      max-width: 550px;
      background: url(img/underline.png);
      background-size: 100%;
      left: 0;
      bottom: 0;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .cap-title h3 span{
        color: #000;
      font-size: 160px;
      font-family: brush-up, sans-serif;
      line-height: 1em;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .copy{
      width: 57.6208178438662%;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .copy p{
      font-size: 24.45px;
      letter-spacing: -.015em;
      font-weight: 500;
      line-height: 1.5em;
}

.hp-steps .options .option.expand .expand-cont .expand-cont-cont .copy p.big{
      font-weight: 700;
}




.hp-stats{
	padding: 100px 0 550px;
      position: relative;
}

.hp-stats:before{
      position: absolute;
      content: "";
      width: 100%;
      height: 48px;
      background: url(img/edge-blue.png);
      background-size: cover;
      bottom: 0;
      left: 0;
      z-index: 5;
      background-position: right;
}


.hp-stats .doodles-top{
      position: absolute;
      aspect-ratio: 1075/662;
      width: 600px;
      background: url(img/doods-6.png);
      background-size: 100%;
      top: -95px;
      left: -5.5909090909091%;
      z-index: 6;
}

.hp-stats .doodles-low{
      position: absolute;
      aspect-ratio: 991/818;
      width: 668px;
      background: url(img/doods-7.png);
      background-size: 100%;
      right: 3.7272727272727%;
      bottom: 95px;
}

.hp-stats .fam{
      position: absolute;
      aspect-ratio: 2054/845;
      width: 800px;
      background: url(img/family.png);
      background-size: 100%;
      left: 40px;
      bottom: -30px;
      z-index: 5;
}

.hp-stats h2{
text-align: center;
      font-family: "Permanent Marker", cursive;
      font-weight: 400;
      font-size: 50px;
      color: #000;
      margin: 0 0 80px;
}

.hp-stats h2 span{
      position: relative;
}

.hp-stats h2 span:before{
      position: absolute;
      content: "";
      aspect-ratio: 660/98;
      width: 100%;
      background: url(img/under-p.png);
      background-size: 100%;
      left: 0;
      bottom: 0px;
}


.hp-stats .swiper{
      max-width: unset;
      padding: 0 0 50px !important;
}

.hp-stats .swiper-pagination{
      bottom: 0px !important;
}


.hp-stats  .swiper-slide{
      background: #0064ab;
      border-radius: 2em;
      box-sizing: border-box;
      padding: 40px;
      height: auto;
      color: #ace3ef;
      /*min-height: 500px;*/
}

.hp-stats .wrap{display: flex; flex-direction: column; justify-content: center; height: 100%;}

.hp-stats .num{
      font-family: brushtones, sans-serif;
      font-weight: 400;
}


.hp-stats .one .num,
.hp-stats .two .num,
.hp-stats .eight .num{
      font-size: clamp(170px, 10vw, 256px);
      line-height: 1em;
      text-align: center;
}

.hp-stats .three .num,
.hp-stats .four .num,
.hp-stats .six .num{
      font-size: clamp(200px, 13vw, 308px);
       line-height: 1em;
       text-align: center;
}



.hp-stats .one .desc,
.hp-stats .two .desc,
.hp-stats .three .desc,
.hp-stats .four .desc,
.hp-stats .six .desc,
.hp-stats .eight .desc{
      font-size: 45px;
      font-weight: 700;
      letter-spacing: -.015em;
      line-height: 1.1em;
      text-align: center;
}

.hp-stats .five .top,
.hp-stats .five .low{
      display: flex;
      flex-wrap: wrap;
}

.hp-stats .five .top .num,
.hp-stats .five .low .num{
      font-size: 180px;
      line-height: 1em;
      width: fit-content;
}

.hp-stats .five .top .desc,
.hp-stats .five .low .desc{
      width: calc(100% - 281.7px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 45px;
      font-weight: 700;
      letter-spacing: -.015em;
      line-height: 1.1em;
      box-sizing: border-box;
      padding-left: 30px;
}

.hp-stats .five .divide,
.hp-stats .seven .divide{
      width: 100%;
      height: 70px;
      padding: 20px 0;
      background: url(img/stat-line.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
}

.hp-stats .five .divide span{
      background: #0064ab;
      text-align: center;
      font-family: "Permanent Marker", cursive;
      display: block;
      font-weight: 400;
      font-size: 70px;
      line-height: 1em;
      box-sizing: border-box;
      padding: 0 .25em;
      margin: 0 auto;
      width: fit-content;
}

.hp-stats .seven .top,
.hp-stats .seven .low{
      display: flex;
}

.hp-stats .seven .top .num,
.hp-stats .seven .low .num{
      font-size: 180px;
      line-height: 1em;
      width: fit-content;
}

.hp-stats .seven .top .desc,
.hp-stats .seven .low .desc{
      width: calc(100% - 195.31px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 45px;
      font-weight: 700;
      letter-spacing: -.015em;
      line-height: 1.1em;
      box-sizing: border-box;
      padding-left: 30px;
}


.desk-cta a,
.mob-cta a{
      display: block;
      position: fixed;
      top: 10%;
      z-index: 10;
      right: 0;
      width: fit-content;
      background: #f6c1cd;
      box-sizing: border-box;
      padding: .5em .75em .5em 1.25em;
      border-radius: 2em 0 0 2em;
      line-height: 0;
}

.desk-cta a img,
.mob-cta a img{
      height: 40px;
}


.mob-cta{
      display: none;
}