:root {
    --green: #78bf26;
    --blueLight: #0e2d7b;
    --blueDark: #041753;
    --white: #fff;
    --black: #000;
}

@font-face {
    font-family: "ek-bodytext";
    src: url("ek-bodytext-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "ek-bodytext";
    src: url("ek-bodytext-demibold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "ek-bodytext";
    src: url("ek-bodytext-black.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "ek-headline";
    src: url("ek-headline-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.bold {
    font-weight: 600;
}

html, body {
    margin: 0;
    padding: 0;
}

.long {
    background-image: url(../assets/bg.avif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.port .long {
    background-position: 53% 50%;
}

/* html { font-size: clamp(0vh, 2vw, 2vh); }
html.land-short { font-size: clamp(0vh, 2vw, 4vh); }
html.port { font-size: clamp(0vh, 4vw, 1vh); }
html.port-short { font-size: clamp(0vh, 4vw, 2vh); } */

/* html {font-size: clamp(0vh, 1vw, 1vh);}
html.land-short {font-size: clamp(0vh, 1vw, 2vh);}
html.port {font-size: clamp(0vh, 2vw, .5vh);}
html.port-short {font-size: clamp(0vh, 2vw, 1vh);} */

html {font-size: clamp(0vh, 1vw, calc(2vh / 3));}
html.land-short {font-size: clamp(0vh, 1vw, 2vh);}
html.port {font-size: clamp(0vh, 2vw, calc(1vh / 3));}
html.port-short {font-size: clamp(0vh, 2vw, 1vh);}

.port .banner {
    font-size: 1.2em;
}

.port .br-l { display: none; }
.land .br-p { display: none; }

.banner {
    font-family: 'ek-bodytext', sans-serif;
    font-weight: 400;
    color: var(--white);
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-feature-settings: "kern";
}

.banner, .banner *, .banner:after, .banner:before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(100% / 3);
}

.bg-top {
    top: 0;
}

.bg-middle {
    top: calc(100% / 3);
    background-color: var(--greenDark);
}

.bg-bottom {
    top: calc(100% / 3 * 2);
}

.bg-frame {
    width: 100%;
    height: 100%;
}

/* .long {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template-rows: 1.05fr .9fr 1.05fr;
}

.bg-top { grid-area: 1 / 1 / 2 / 2; }
.bg-middle { grid-area: 2 / 1 / 3 / 2; }
.bg-bottom { grid-area: 3 / 1 / 4 / 2; }

.bg-middle {
    background-color: var(--greenDark);
}

.bg-frame {
    width: 100%;
    height: 100%;
} */

.banner {
    display: grid;
    padding: 4em;
    position: absolute;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.port .banner {
    padding: 4em 3em 5em 3em;
}

.content {
    display: grid;
    grid-area: 1 / 1 / 2 / 2;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: absolute;
    inset: 0;
}

.logo {
    width: 20em;
    height: auto;
    position: relative;
    position: absolute;
    align-self: start;
    justify-self: end;
    transform-origin: 100% 0%;
}

.port .logo {
    top: -1em;
}

.animate .logo {
    transition: all .4s ease;
}

.show-2 .logo,
.show-2b .logo,
.show-3 .logo,
.show-4 .logo {
    transform: scale(.76);
}

.copy {
    position: absolute;
    justify-self: start;
    align-self: end;
    color: var(--white);
    opacity: 0;
    /* margin-top: .5em; */
}

.land .copy {
    margin: 1em;
}

.port .copy {
    margin-top: 2em;
}

.hero {
    font-family: "ek-headline", sans-serif;
    font-weight: 400;
    font-size: 10em;
    letter-spacing: -.015em;
    line-height: .95;
    white-space: nowrap;
}

.port .hero {
    font-size: 7em;
    margin-bottom: 2em;
}

.animate .he {
    transition: all .4s ease;

    will-change: transform, opacity;
}

.he-2,
.he-3 {
    opacity: 0;
    transform: translateX(-1em);
}

.show-1 .he-2,
.show-1 .he-3 {
    opacity: 1;
    transform: translateY(0em);
}

.animate .he-2 { transition-delay: .1s; }
.animate .he-3 { transition-delay: .05s; }

.show-1 .he-2 { transition-delay: .1s; }
.show-1 .he-3 { transition-delay: .2s; }

.highlight {
    color: var(--green);
}

.byline {
    font-size: 2em;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-top: .7em;
    opacity: 0;
}

.port .byline {
    margin-top: 1.1em;
    font-size: 2.2em;
}

.animate .copy,
.animate .byline {
    transition: all .4s ease;
}

.copy {
    transform: translateX(-3em);
}

.byline {
    transform: translateX(-1.5em);
}

.show-1 .c-1,
.show-1 .c-1 .byline {
    opacity: 1;
    transform: translateX(0em);
    transition-delay: .2s;
}

.show-3 .c-2,
.show-3 .c-2 .byline {
    opacity: 1;
    transform: translateX(0em);
}

/**/

.grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2.8em;
    grid-row-gap: 2.8em;
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    padding: 12.5em 5.5em 13.5em 5.5em;
    width: 100%;
    height: 100%;
    padding: 15em 6em;
    padding: 11em 0 10.5em 0;
    padding: 10em 0 8em 0;

    padding: 16em 0 7em 0;
    padding: 16em 2em 7em 2em;
    padding: 15em 2em 8em 2em;

    padding: 15em 0em 4em 0em;

    padding: 12em 0em 6em 0em;

    padding: 12em 3em 6em 3em;
}

.port .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        padding: 8em 3em 16em 3em;

        /* grid-column-gap: 2.8em;
        grid-row-gap: 4.6em; */
        padding: 15em 3.8em 18em 3.8em;
        padding: 18em 0 11em 0;

        padding: 25em 1em 10em 1em;
        
        padding: 11em 0em 12em 0em;
        grid-row-gap: 4em;


        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0em;
        grid-row-gap: 2em;

        padding: 0;
        padding: 12em 0em 12em 0em;
    }

.box {
    position: relative;
    cursor: pointer;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    left: 50%;
    transform: translate(-50%,-50%);
}

.bb-wrap {
    position: relative;
    width: 100%;
    height: 100%;

    transition: all .33s ease;
    transform-origin: bottom center;
    transform-origin: 50% 70%;

    display: grid;
}

.bb-wrap--::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    background-image: url(../assets/light.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

@media (orientation: landscape) {
    /* .b-small {
        transform: scale(.85);
    } */
    .b-large {
        transform: scale(1.2);

        transform: scale(1.05);
    }
}

@media (orientation: portrait) {
    .b-large-port {
        transform: scale(1.07);
    }
}

.box-footer {
    position: absolute;
    bottom: -2em;
    z-index: 100;
    white-space: nowrap;
    left: 0;
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    width: 100%;
    color: var(--white);

    min-height: 3em;
    position: relative;
    bottom: 0;
}

.port .box-footer {
    position: absolute;
    bottom: -2em;
}

/* .port .box-4 .box-footer, 
.port .box-5 .box-footer {
    bottom: -1.5em;
}

.port .box-6 .box-footer {
    bottom: -.5em;
} */

/* @media (orientation: landscape) {
    .box-footer {
        bottom: calc(50% - 4.3em);
        transform: translateY(50%);
    }
} */

.info-discount {
    background-color: var(--fifth);
    color: var(--second);
    background-color: var(--logo);
    color: var(--third);
    padding: .1em .6em;
    display: inline-block;
    position: relative;

    padding: .1em 1.1em .1em .6em;
    clip-path: polygon(0 0, 100% 0%, 82% 100%, 0% 100%);

    /* display: none; */
}

.info-discount-::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 100%;
    background-color: red;

    /* width: 0;
    height: 0;

    border-bottom: 1em solid transparent;
    border-left: .5em solid green; */

    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}

.info-price {
    font-size: 3em;

    font-size: 2.8em;
}

.info-before {
    font-weight: 600;
    font-size: 80%;
    line-height: 1.2;
}

.info-name {
    font-weight: 400;
    font-size: 80%;
    line-height: 1.3;
}

/* .info-before {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
} */

.bf-copy {
    margin-bottom: 1em;
    font-size: .75em;
    vertical-align: middle;
    line-height: 1.1;
    white-space: nowrap;
    color: #373737;
}

/* @media (orientation: landscape) {
    .bf-copy br {
        display: none;
    }
} */

.bf-copy br {
    display: none;
}

.arrow {
    width: .6em;
    height: auto;
    vertical-align: middle;
    margin-left: .15em;
    transition: all .2s ease;
    opacity: .7;
}

.box:hover .arrow {
    opacity: 1;
    transform: translateX(.4em);
}

.box-img {
    width: 100%;
    width: auto;
    height: auto;
    height: 22em;
    max-height: 22em;
    object-fit: contain;
    object-position: 0 0;
    object-position: 50% 50%;
    position: relative;
}

.box-bg {
    /* width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; */

    position: relative;
    width: 100%;
    height: 20em;
    max-height: 20em;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 25%;
    
    /* background-color: #efefef; */

    transition: all .33s ease;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}

/* .box:hover .box-bg {
    transform: scale(1.03);
    transform-origin: 50% 55%;
    transform: rotate(-1deg) scale(1.03);
    transform: scale(1.03);
} */
    
.box-1 { grid-area: 1 / 1 / 2 / 2; }
.box-2 { grid-area: 1 / 2 / 2 / 3; }
.box-3 { grid-area: 1 / 3 / 2 / 4; }
/* .box-4 { grid-area: 1 / 4 / 2 / 5; } */

.box-4 { grid-area: 1 / 1 / 2 / 2; }
.box-5 { grid-area: 1 / 2 / 2 / 3; }
.box-6 { grid-area: 1 / 3 / 2 / 4; }

.port .box-1 { grid-area: 1 / 1 / 2 / 3; }
.port .box-2 { grid-area: 1 / 3 / 2 / 5; }
.port .box-3 { grid-area: 2 / 2 / 3 / 4; }

.port .box-4 { grid-area: 1 / 1 / 2 / 3; }
.port .box-5 { grid-area: 1 / 3 / 2 / 5; }
.port .box-6 { grid-area: 2 / 2 / 3 / 4; }

.port .box {
    width: 100%;
}

.port .box-img {
    width: 100%;
}

.badge {
    color: var(--greenDark);
    background-color: var(--yellow);
    display: inline-block;
    border-radius: 20em;
    text-align: center;
    width: 8em;
    height: 8em;
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.1;

    transform: translateX(50%);
    right: calc(50% - 4.5em);

    top: -1em;
    font-size: 1.1em;
}

.port .badge {
    top: -.25em;
}

.b-center {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.badge-top,
.badge-bottom {
    font-size: 90%;
    font-size: 120%;
    line-height: .9;
    font-weight: 500;
    white-space: nowrap;
}

.badge-middle {
    font-weight: 600;
    font-size: 190%;
    white-space: nowrap;
}

.medium {
    font-size: 130%;
}

.large {
    font-size: 170%;
}

.percentage {
    font-size: 70%;
}

.strike {
    text-decoration: line-through;
}

.info-price,
.info-discount {
    display: none;
}


/**/

.copy {
    pointer-events: none;
}

.grid {
    /* opacity: 0; */
    pointer-events: none;
}

.grid-2 {
    position: absolute;
}

.flight-1 .grid-1,
.flight-2 .grid-2 {
    opacity: 1;
    pointer-events: auto;
}

.animate .box-img {
    transition: all .3s ease;
}

.box-img {
    transform: translateY(6.5em);
    opacity: 0;
}

.flight-1 .grid-1 .box-img,
.flight-2 .grid-2 .box-img {
    transform: translateY(0em);
    transition: all .65s cubic-bezier(.68,-0.55,.27,1.55);
    opacity: 1;
}

.badge {
    transform: translateX(50%) scale(.5);
    opacity: 0;
}

.animate .badge {
    transition: all .15s ease;
}

.flight-1 .grid-1 .badge,
.flight-2 .grid-2 .badge {
    transform: translateX(50%);
    transition: all .5s cubic-bezier(.68,-0.55,.27,1.55);
    opacity: 1;
}

.box-footer,
.disc,
.btn-wrap {
    transform: translateY(3em);
    opacity: 0;
}

.animate .box-footer,
.animate .disc,
.animate .btn-wrap {
    transition: all .3s ease;
}

.flight-1 .grid-1 .box-footer,
.flight-2 .grid-2 .box-footer {
    transform: translateY(0em);
    transition: all .35s ease;
    opacity: 1;
}

.flight-1 .disc,
.flight-1 .btn-wrap,
.flight-2 .disc,
.flight-2 .btn-wrap {
    opacity: 1;
    transform: translateY(0em);
    transition-delay: .45s;
}

.flight-1 .box-1 .box-img { transition-delay: .1s; }
.flight-1 .box-3 .box-img { transition-delay: .15s; }

.flight-2 .box-5 .box-img { transition-delay: .05s; }
.flight-2 .box-6 .box-img { transition-delay: .1s; }

/* .flight-1 .box-1 .badge { transition-delay: .1s; }
.flight-1 .box-3 .badge { transition-delay: .15s; }

.flight-2 .box-5 .badge { transition-delay: .05s; }
.flight-2 .box-6 .badge { transition-delay: .1s; } */

.flight-1 .box-2 .badge { transition-delay: .3s; }
.flight-1 .box-1 .badge { transition-delay: .4s; }
.flight-1 .box-3 .badge { transition-delay: .45s; }

.flight-2 .box-4 .badge { transition-delay: .3s; }
.flight-2 .box-5 .badge { transition-delay: .35s; }
.flight-2 .box-6 .badge { transition-delay: .4s; }

/* .flight-1 .box-1 .box-footer { transition-delay: .1s; }
.flight-1 .box-3 .box-footer { transition-delay: .15s; }

.flight-2 .box-5 .box-footer { transition-delay: .05s; }
.flight-2 .box-6 .box-footer { transition-delay: .1s; } */

.flight-1 .box-2 .box-footer { transition-delay: .2s; }
.flight-1 .box-1 .box-footer { transition-delay: .3s; }
.flight-1 .box-3 .box-footer { transition-delay: .35s; }

.flight-2 .box-4 .box-footer { transition-delay: .15s; }
.flight-2 .box-5 .box-footer { transition-delay: .2s; }
.flight-2 .box-6 .box-footer { transition-delay: .35s; }


.disc {
    font-weight: 400;
    font-size: .9em;
    position: absolute;
    justify-self: start;
    align-self: end;
}

.btn-wrap {
    position: absolute;
    justify-self: end;
    align-self: end;
}

.btn {
    background-color: var(--light);
    color: var(--greenDark);
    font-weight: 600;
    padding: .7em 1.5em;
    font-size: 1.3em;
    letter-spacing: -.01em;
}

.port .btn {
    font-size: 1.45em;
}

.animate .btn {
    transition: all .15s ease;
}

.btn:hover, .btn:focus {
    background-color: var(--yellow);
    transform: scale(1.03);
    /* color: var(--light); */
}

.btn:active {
    transform: scale(1);
}

.exit-wrap {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/**/

.hand {
    position: absolute;
    align-self: center;
    display: grid;
    grid-auto-flow: column;
    align-items: center;

    opacity: 0;
}

.port .hand {
    grid-auto-flow: row;
}

.hand-left {
    left: 0;
    margin-bottom: 10em;

    transform: translateX(-40%);
}

.hand-right {
    right: 0;
    margin-top: 35em;

    transform: translateX(40%);
}

.animate .hand {
    transition: all .6s ease;

    will-change: transform, opacity;
}

.show-2 .hand-left {
    transform: translateX(0%);
    opacity: 1;
    transition-delay: 0s;
}

.show-2 .hand-right {
    transform: translateX(0%);
    opacity: 1;
    transition-delay: .2s;
}

.ha {
    position: relative;
    width: 58em;
    height: auto;

    /* opacity: 0; */
}

.port .ha {
    width: 46em;
    width: 100%;
    max-width: 52em;
}

.port .ha-left {
    left: -5em;
}

.port .ha-right {
    right: -5em;
}

.port .hand-left {
    /* left: -6em; */
    margin-bottom: 17em;
}

.port .hand-right {
    /* right: -6em; */
    margin-top: 52em;
}

/* .ha-left {
    transform: translateX(-50%);
}

.ha-right {
    transform: translateX(50%);
}

.animate .ha {
    transition: all .6s ease;
}

.show-2 .ha-left {
    transform: translateX(0%);
    opacity: 1;
    transition-delay: 0s;
}

.show-2 .ha-right {
    transform: translateX(0%);
    opacity: 1;
    transition-delay: .15s;
} */

.ha-copy {
    position: relative;
    font-size: 2em;
    margin-bottom: 5.5em;
    line-height: 1.3;

    opacity: 0;
    transform: translateX(-15%);
}

.port .ha-copy {
    grid-row: 1;
    margin-bottom: 1em;
    /* margin-left: 4em; */
    justify-self: center;
    text-align: center;
}

.animate .ha-copy {
    transition: all .4s ease;
    transition-delay: .2s;

    will-change: transform, opacity;
}

.show-2 .ha-copy {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: .4s;
}

.iphone17 {
    position: relative;
    width: 16em;
    height: auto;
    margin-bottom: 12.5em;
    margin-right: 2em;

    opacity: 0;
    transform: translateX(15%);
}

.port .iphone17 {
    margin: 0;
    margin-bottom: 3em;
    justify-self: center;
}

.animate .iphone17 {
    transition: all .4s ease;
    transition-delay: .2s;

    will-change: transform, opacity;
}

.show-2 .iphone17 {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: .65s;
}

.label {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 4em;
    height: auto;
    opacity: 0;
}

.animate .label {
    transition: all .3s ease;

    will-change: transform, opacity;
}

.show-3 .label {
    opacity: 1;
    transition-delay: .5s;
}

.wrap-end {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    grid-column-gap: 4em;

    /* height: 40em; */
    max-width: 66em;
    /* max-height: 30em; */
    align-self: end;
    position: absolute;
    justify-self: center;
}

.port .wrap-end {
    grid-auto-flow: row;
    grid-row-gap: 1em;
    /* padding: 0 8em; */
    width: 28em;
}

.port .pro-wrap {
    grid-row: 2;
    /* width: 28em; */
}

.pro-wrap {
    display: grid;
    position: relative;
}

.pro {
    width: 30em;
    height: auto;
    align-self: end;

    width: 100%;
}

.pro-1 {
    transform: translateY(30%);
    opacity: 0;
}

.animate .pro-1 {
    transition: all .4s ease;

    will-change: transform, opacity;
}

.show-3 .pro-1 {
    transform: translateY(0%);
    opacity: 1;
}

.pro-2 {
    position: absolute;
    top: 0;
    left: 0;

    /* transform: scale(.95); */
    transform: translateY(-3%);
    transform-origin: 50% 0%;
    opacity: 0;
}

.animate .pro-2 {
    transition: all .3s ease;

    will-change: transform, opacity;
}

.show-3 .pro-2 {
    opacity: 1;
    transform: scale(1);
    transition: all .5s ease;
    transition-delay: .25s;
}

.benefit-wrap {
    align-self: center;
    justify-self: start;
    width: 30em;
    padding-right: 2em;
}

.port .benefit-wrap {
    width: 100%;
    padding: 0;
    /* text-align: center; */
}

.benefit {
    margin: 1.25em 0;
    /* text-wrap: pretty; */
    font-size: 1.3em;
    line-height: 1.2;

    transform: translateX(15%);
    opacity: 0;
}

.animate .benefit {
    transition: all .4s ease;

    will-change: transform, opacity;
}

.show-3 .benefit {
    opacity: 1;
    transform: translateX(0em);
}

/* .benefit:nth-child(1) { transition-delay: .05s; }
.benefit:nth-child(2) { transition-delay: .1s; }
.benefit:nth-child(3) { transition-delay: .15s; }
.benefit:nth-child(4) { transition-delay: .2s; }
.benefit:nth-child(5) { transition-delay: .25s; } */
.benefit:nth-child(1) { transition-delay: .025s; }
.benefit:nth-child(2) { transition-delay: .05s; }
.benefit:nth-child(3) { transition-delay: .075s; }
.benefit:nth-child(4) { transition-delay: .1s; }
.benefit:nth-child(5) { transition-delay: .125s; }

.show-3 .benefit:nth-child(1) { transition-delay: calc(.05s + .25s); }
.show-3 .benefit:nth-child(2) { transition-delay: calc(.10s + .25s); }
.show-3 .benefit:nth-child(3) { transition-delay: calc(.15s + .25s); }
.show-3 .benefit:nth-child(4) { transition-delay: calc(.20s + .25s); }
.show-3 .benefit:nth-child(5) { transition-delay: calc(.25s + .25s); }

.be-head {
    font-weight: 500;
    margin-bottom: .1em;
}

.be-copy {
    font-size: 88.5%;
}