@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@font-face {
    font-family: 'MonetaSans';
    src: url('../fonts/MonetaSans-Black.woff2') format('woff2'),
        url('../fonts/MonetaSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MonetaSans';
    src: url('../fonts/MonetaSans-Bold.woff2') format('woff2'),
        url('../fonts/MonetaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MonetaSans';
    src: url('../fonts/MonetaSans-Light.woff2') format('woff2'),
        url('../fonts/MonetaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MonetaSans';
    src: url('../fonts/MonetaSans-Regular.woff2') format('woff2'),
        url('../fonts/MonetaSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monotalic';
    src: url('../fonts/Monotalic-Bold.woff2') format('woff2'),
        url('../fonts/Monotalic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monotalic';
    src: url('../fonts/Monotalic-Light.woff2') format('woff2'),
        url('../fonts/Monotalic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monotalic';
    src: url('../fonts/Monotalic-Medium.woff2') format('woff2'),
        url('../fonts/Monotalic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monotalic';
    src: url('../fonts/Monotalic-Regular.woff2') format('woff2'),
        url('../fonts/Monotalic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Narrow';
    src: url('../fonts/Monotalic-Narrow.woff2') format('woff2'),
        url('../fonts/Monotalic-Narrow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Narrow';
    src: url('../fonts/Monotalic-NarrowLight.woff2') format('woff2'),
        url('../fonts/Monotalic-NarrowLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Narrow';
    src: url('../fonts/Monotalic-NarrowMedium.woff2') format('woff2'),
        url('../fonts/Monotalic-NarrowMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
   --cLoragneStrong: #FF6011;
   --cLoragneSoft: #FFAE43;

  --cLnavyDark: #151F36;
  --cLBlue: #0246E1;
  --cNavyAlpha: #121427;
  --cLBlack: #000000;
  --cLnavyDarkOpacity: #151f3694;
  
  --cLLight: #EDF3FA;
  --cLWhite: #FFFFFF;
  --cLGray: #DADADA;

  --fs470: clamp(min(70px,18vw),24.5vw,470px);
  --fs390: clamp(min(70px,18vw),17vw,390px);
  --fs330: clamp(min(70px,18vw),17vw,330px);
  --fs260: clamp(min(80px,15vw),14vw,260px);
  --fs200: clamp(min(70px,14vw),11vw,200px);
  --fs160: clamp(min(50px,10vw), 8vw, 160px);
  --fs150: clamp(min(50px,13vw),7.82vw,150px);
  --fs140: clamp(min(45px,12vw),7.5vw,140px);
  --fs110: clamp(min(40px,10vw), 6.6vw, 110px);
  --fs100: clamp(min(40px,10vw), 6.5vw, 100px);
  --fs90: clamp(min(60px,8vw), 5vw, 90px);
  --fs80: clamp(min(60px,7.5vw), 3.2vw, 80px);
  --fs70: clamp(min(60px,7.4vw), 3vw, 70px);
  --fs63: clamp(min(55px,7.3vw), 2.5vw, 63px);
  --fs60: clamp(min(56px,7vw), 2.5vw, 60px);
  --fs50: clamp(min(40px,5.6vw), 2.3vw, 50px);
  --fs40: clamp(min(20px,5.5vw), 2.1vw, 40px);
  --fs30: clamp(min(22px,5.5vw), 2.1vw, 30px);
  --fs22: clamp(min(19px,4.5vw), 1.1vw, 22px);
  --fs21: clamp(min(19px,4.5vw), 1.1vw, 21px);
  --fs20: clamp(min(18px,4vw), 1.1vw, 20px); 
  --fs18: clamp(min(18px,3.9vw), 1vw, 18px);
  --fs16: min(16px,3.6vw);
  --fs14: min(14px,3.4vw);
}
.mce-content-body {background-color: #cecec333;}
body {
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
    overflow-x: hidden;
    color: var(--cLnavyDark);
    font-size: var(--fs20);
    font-family: "DM Sans", sans-serif;
    & ol,
    & ul {
        margin: 0;
        padding: 0;
        & li {
            &::marker { 
                line-height: 0;
                font-size: 1.3em;
                color: var(--cLoragneStrong);
            }
        }
        &[class] {list-style: none;}
        &:not([class]) {
            display: grid;
            row-gap: .3em;
            padding-left: 1.7em;
        }
        &:is(ol) {
            list-style: none;
            counter-reset: item;
            padding-left: 0 !important;
            & li {
                position: relative;
                padding-left: 1.7em;
                counter-increment: item;
                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    line-height: 1;
                    display: block;
                    font-weight: 800;
                    font-size: 1.3em;
                    content: counter(item) ". ";
                    color: transparent !important;
                    -webkit-text-stroke: 1px var(--cLoragneStrong);
                }
            }
        }
    }
    hr {
        width: 100%;
        border: none;
        display: block;
        margin-block: 0;
        border-bottom: 1px solid var(--cLGray);
    }
    & a {
        color: inherit;
        text-decoration: none;
        &:not([class]):hover {color: var(--cLoragneStrong);}
    }
    & strong {font-weight: 700;}
    & p:has( :is(.btn, .tag)) {
        display: flex;
        flex-wrap: wrap;
        gap: min(10px, 4vw);
        &:is(.text-center &) {
            justify-content: center;
        }
    }
    & :is(h1,h2,h3,h4,h5,h6) {line-height: .9;}
    & :is(h1,h2,h3,h4,h5,h6) em {font-style: normal;}
    & .fs470 {font-size: var(--fs470);}
    & .fs390 {font-size: var(--fs390);}
    & .fs330 {font-size: var(--fs330);}
    & .fs260 {font-size: var(--fs260);}
    & .fs200 {font-size: var(--fs200);}
    & .fs160 {font-size: var(--fs160);}
    & .fs150 {font-size: var(--fs150);}
    & .fs140 {font-size: var(--fs140);}
    & .fs110 {font-size: var(--fs110);}
    & .fs100 {font-size: var(--fs100);}
    & .fs90 {font-size: var(--fs90);}
    & .fs80 {font-size: var(--fs80);}
    & .fs70 {font-size: var(--fs70);}
    & .fs63 {font-size: var(--fs63);}
    & .fs60 {font-size: var(--fs60);}
    & .fs50 {font-size: var(--fs50);}
    & .fs40 {font-size: var(--fs40);}
    & .fs30 {font-size: var(--fs30);}
    & .fs22 {font-size: var(--fs22);}
    & .fs21 {font-size: var(--fs21);}
    & .fs20 {font-size: var(--fs20);}
    & .fs18 {font-size: var(--fs18);}
    & .fs16 {font-size: var(--fs16);}
    & .fs14 {font-size: var(--fs14);}
    
    & .fw300 {font-weight: 300;}
    & .fw400 {font-weight: 400;}
    & .fw500 {font-weight: 500;}
    & .fw600 {font-weight: 600;}
    & .fw700 {font-weight: 700;}
    & .fw750 {font-weight: 750;}
    & .fw800 {font-weight: 800;}
    & .fw900 {font-weight: 900;}
    & .italic {font-style: italic;}
    & .line-height-1 {line-height: 1;}
    & .line-height--8 {line-height: .8;}
    & .uppercase-text {text-transform: uppercase;}
    & .uppercase-initial {text-transform: initial;}
    
     & p:has( :is(.btn, .tag)) {
        display: flex;
        flex-wrap: wrap;
        gap: min(10px, 4vw);
        &:is(.text-center &) {
            justify-content: center;
        }
    }
    & [style^="--icn-"] {
        display: flex;
        align-items: center;
        column-gap: min(10px, 3vw);
        &[style^="--icn-before"]::before,
        &[style^="--icn-after"]::after {
            position: relative;
            content: "";
            display: block;
            transition: initial;
            pointer-events: none;
            padding: min(1rem, 5vw);
            background-color: currentcolor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-position: center;
            mask-position: center;
        }
        &[style^="--icn-before"]::before {
            -webkit-mask-image: var(--icn-before);
            mask-image: var(--icn-before);
        }
        &[style^="--icn-after"]::after {
            -webkit-mask-image: var(--icn-after);
            mask-image: var(--icn-after);
        }
    }
    & [style^="--bg-image"] {
        position: relative;
        column-gap: 1em;
        display: inline-flex;
        &::before {
            position: relative;
            content: "";
            display: block;
            flex: 0 0 auto;
            padding: .35em;
            transition: initial;
            pointer-events: none;
            aspect-ratio: 1/0.25;
            /* aspect-ratio: 1 / 0.25; */
            height: -webkit-fill-available;
            background: var(--bg-image) center / contain no-repeat;
        }
    }
    & .btn {
        border: none;
        display: block;
        line-height: 1;
        overflow: hidden;
        font-weight: 600;
        border-radius: 0;
        white-space: nowrap;
        font-size: var(--fs14);
        text-transform: uppercase;
        transition: all .3s ease-out;
        border: 1px solid transparent;
        font-family: 'DM Sans',sans-serif;
        padding: min(0.8575em,3vw) min(.6875em,5vw);
        text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 transparent;
        &.narrow {
            font-weight: 400;
            font-size: var(--fs40);
            text-transform: initial;
            padding-block: min(0.475em,3vw);
        }
        &.btn-cLoragneStrong {
            color: var(--cLnavyDark);
            background-color: var(--cLoragneStrong);
            &:hover {
                color: var(--cLoragneSoft);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLWhite);
            }
        }
        &.btn-cLWhite {
            color: var(--cLnavyDark);
            background-color: var(--cLWhite);
            &:hover {
                color: var(--cLWhite);
                background-color: var(--cLnavyDark);
            }
        }
        &.btn-cLWhite-border {
            border-color: currentColor;
            color: var(--cLnavyDark);
            background-color: var(--cLWhite);
            &:hover {
                color: var(--cLWhite);
                background-color: var(--cLnavyDark);
            }
        }
        &.btn-border {
            color: currentColor;
            border-color: currentColor;
            background-color: transparent;
        }
        &.btn-border-cLoragneStrong {
            color: var(--cLnavyDark);
            background-color: transparent;
            border-color: var(--cLoragneStrong);
            &:hover {
                color: var(--cLoragneStrong);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLWhite);
            }
            &:is(header &) {
                color: var(--cLWhite);
                &:hover {
                    text-indent: 100%;
                    color: var(--cLoragneSoft);
                    text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLnavyDark);
                }
            }
        }
        &.btn-border-cLnavyDark {
            color: var(--cLnavyDark);
            border-color: var(--cLnavyDark);
            background-color: transparent;
            &:hover {
                text-indent: 100%;
                color: var(--cLBlue);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLWhite);
            }
        }
        &.btn-border-cLWhite {
            color: var(--cLWhite);
            border-color: var(--cLWhite);
            background-color: transparent;
            &:hover {
                text-indent: 100%;
                color: var(--cLBlue);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLWhite);
            }
        }
        &.btn-cLWhite {
            color: var(--cLBlack);
            border-color: var(--cLWhite);
            background-color: var(--var(--cLWhite));
            &:hover {
                text-indent: 100%;
                color: var(--cLBlack);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLoragneStrong);
            }
        }
        &.btn-cLBlue {
            color: var(--cLWhite);
            border-color: var(--cLBlue);
            background-color: var(--cLBlue);
            &:hover {
                text-indent: 100%;
                color: var(--cLoragneStrong);
                text-shadow: calc((var(--lg) - min(.6875em,5vw) * 2.25) * -1) 0 0 var(--cLWhite);
            }
        }
        &:hover {
            scale: 1.15 1;
            text-indent: 100%; 
            border-color: currentColor;
            background-color: currentColor;
            &:not(:is(header &)) {
                scale: 1;
                animation: bounce-top 1s both;
            }
        }
        &[style^="--icn-"] {
            display: flex;
            column-gap: .8em;
            align-items: center;
            &::before, 
            &::after {
                scale: 1.4;
                background-color: currentColor;
                padding: clamp(min(0.3rem, 1.7vw),0.8vw,0.4rem);
            }
        }
    }
    & .line-block {display: block;}
    & .line-mask {
        width: 100%;
        display: block;
    }
    & .monetasans {font-family: 'MonetaSans',sans-serif;}
    & .dmsans {font-family: 'DM Sans',sans-serif;}
    & .narrow {font-family: 'Narrow',sans-serif;}
    & .monotalic {font-family: 'Monotalic',sans-serif;}
    & .cLWhite {color: var(--cLWhite);}
    & .cLBlue {color: var(--cLBlue);}
    & .cLnavyDark {color: var(--cLnavyDark);}
    & .cLoragneStrong {color: var(--cLoragneStrong);}

    & [class*="stroke"] {
        color: transparent;
        -webkit-text-stroke: 2px var(--cLnavyDark);
        &.stroke-cLWhite {-webkit-text-stroke: 2px var(--cLWhite)}
    }

    & .icon-text[style^="--icn-before"] {
        display: inline-block;
        &::before {
            aspect-ratio: 1/0.3;
            height: -webkit-fill-available;
            padding: 0.35em;
            -webkit-mask-position: center bottom;
            mask-position: center bottom;
        }
    }
    & .menu-js {
        & .menu-item {
            position: relative;
            display: inline;
            & > a {
                font-weight: 900;
                cursor: pointer;
                font-style: italic;
                font-size: var(--fs110);
                text-decoration: underline;
                font-family: 'MonetaSans',sans-serif;
                & * {text-decoration: underline;}
            }
            & .img-reveal {
                position: relative;
                width: min(400px, 100%);
                & .revealImg {
                    width: 100%;
                    will-change: transform;
                    & img {
                        position: relative;
                        width: 100%;
                        height: auto;
                        will-change: transform;
                    }
                }
                & .text-center {
                    position: absolute;
                    inset: 0;
                    row-gap: 1;
                    z-index: 1;
                    aspect-ratio: 1/1;
                    padding: 3em min(2em, 5vw);
                    justify-content: center;
                    @media screen and (width >= 1200px) {
                        & {
                            aspect-ratio: initial;
                            padding: min(2em, 5vw);
                        }
                    }

                }
                @media screen and (width >= 1200px) {
                    & {
                        position: fixed;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        z-index: 10;
                        height: auto;
                        font: initial;
                        visibility: visible;
                        pointer-events: none;
                        display: inline-block;
                        will-change: transform;
                    }
                }
                @media screen and (width < 1200px) {
                    & {
                        height: 0;
                        width: 80vw;
                        display: block;
                        transition: all .3s;
                        border-radius: 1em 0 1em 0;
                        &:is(.menu-item.is-active &) {height: var(--h);}
                    }
                }
            }

        }
    }
}
@keyframes bounce-top {
  0% {
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-10px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}