@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&family=Prompt:wght@300;400;700&display=swap');

:root {
  --cLDarkBlack: #1A181A;
  --cLDarkGray: #1E1E22;
  --cLPrimaryBlue: #2892D0;
  --cLDarkBlue: #16163C;
  --cLWhite: #FFFFFF;
  --cLLightGray: #F3F3F3;

  --ct: min(1331px, min(calc(100vw - min(2rem, 10vw)),100%));
  --ct-xl: min(clamp(1200px,73.44vw, 1410px), calc(100vw - min(5rem, 10vw)));
  --ct-pad:clamp(min(3em,10vw),3.646vw,70px);

  --fs120: clamp(min(40px,23vw),5vw,120px);
  --fs90: clamp(min(40px,8vw),4.6875vw,90px);
  --fs80: clamp(min(38px,7vw),4.1669vw,80px);
  --fs60: clamp(min(20px,5.3vw),3.125vw,60px);
  --fs50: clamp(min(19px,5vw),3vw,50px);
  --fs40: clamp(min(18px,4.3vw),3.125vw,40px);
  --fs24: clamp(min(15px,4.3vw), 1.25vw, 24px);
  --fs20: clamp(min(14px,4.1vw), 1.044vw, 20px);
  --fs18: clamp(min(13px,3.8vw), 0.93875vw, 18px);
  --fs16: clamp(min(13px,3.5vw), 0.84vw, 16px);
  --fs14: clamp(min(12px,3.3vw), 0.75vw, 14px);
}
body {
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
    overflow-x: hidden;
    font-size: var(--fs18);
    color: var(--cLDarkGray);
    font-family: "Poppins", sans-serif;
    & hr {
        width: 100%;
        border: none;
        display: block;
        border-bottom: 2px solid hsl(from currentColor h s l/.5);
        
    }
    & ol,
    & ul {
        margin: 0;
        padding: 0;
        & li {
            &::marker { 
                line-height: 0;
                font-size: 1.3em;
                color: currentColor;
            }
        }
        &[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(--cLPrimaryBlue);
                }
            }
        }
    }
    & a {
        color: inherit;
        text-decoration: none;
        &:not([class]):hover {color: var(--cLPrimaryBlue);}
    }
    & strong {font-weight: 700;}
    & p:has( :is(img)) {
        gap: .5em;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(min(100px, 40vw), 30%), 1fr));
    }
    p:has( :is([class^=btn-],.link)) {
        display: flex;
        flex-wrap: wrap;
        &:is(.text-center &) {
            justify-content: center;
        }
        gap: min(2em,3vw);
    }
    & p:has( :is([calss^="btn"], .tag)) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: min(.5em,2vw) min(10px, 4vw);
        &:is(:has( .tag)) {align-items: center;}
    }
    & :is(h1,h2,h3,h4,h5,h6) {line-height: 1;font-family: 'Prompt',sans-serif;}
    & :is(h1,h2,h3,h4,h5,h6) em {font: inherit;}
    & .fs120 {font-size: var(--fs120);}
    & .fs90 {font-size: var(--fs90);}
    & .fs80 {font-size: var(--fs80);}
    & .fs60 {font-size: var(--fs60);}
    & .fs50 {font-size: var(--fs50);}
    & .fs40 {font-size: var(--fs40);}
    & .fs24 {font-size: var(--fs24);}
    & .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;}
    & .fw700 {font-weight: 700;}
    & .italic {font-style: italic;}
    & .line-height-1 {line-height: 1;}
    & .uppercase-text {text-transform: uppercase;}
    & .uppercase-initial {text-transform: initial;}
    & .ff-inherit {font-family: inherit;}
    & .prompt {font-family: "Prompt", sans-serif;}
    & .cLPrimaryBlue {color: var(--cLPrimaryBlue) !important;}
    & .hidden {visibility: hidden;}
    & [style^="--icn-"] {
        display: flex;
        align-items: center;
        column-gap: min(10px, 3vw);
        &[style^="--icn-before"]::before,
        &[style^="--icn-after"]::after {
            position: relative;
            width: 0;
            height: 0;
            content: "";
            display: block;
            transition: initial;
            pointer-events: none;
            padding: min(.5em, 4vw);
            background-color: currentcolor;
        }
        &[style^="--icn-before"]::before {
            -webkit-mask : var(--icn-before) center / contain no-repeat;
            mask : var(--icn-before) center / contain no-repeat;
        }
        &[style^="--icn-after"]::after {
            -webkit-mask : var(--icn-after) center / contain no-repeat;
            mask : var(--icn-after) center / contain no-repeat;
        }
    }
    & .tag {
        display: block;
        padding: 0.5em 1.2em;
        background: hsl(from currentColor h s l/0.2);
    }
    & .tag,
    & time {
        font-size: 0.9em;
        font-weight: 500;
        letter-spacing: 10%;
        color: currentColor;
        text-transform: uppercase;
    }
    & [style^="--bg-image"] {
        position: relative;
        display: inline-block;
        &::before {
            position: relative;
            content: "";
            display: block;
            flex: 0 0 auto;
            padding: .35em;
            transition: initial;
            pointer-events: none;
            aspect-ratio: 1/0.25;
            height: -webkit-fill-available;
            background: var(--bg-image) center / contain no-repeat;
        }
    }
    & .link,
    & [class^="btn-"] {
        --br-sp: min(.6875em,3vw);
        position: relative;
        width: auto;
        display: block;
        line-height: 1;
        overflow: hidden;
        font-weight: 700;
        isolation: isolate;
        text-align: center;
        transition: all .3s;
        letter-spacing: -2.5%;
        font-size: var(--fs16);
        max-width: max-content;
        text-transform: initial;
        justify-content: center;
        border-radius: 0 0 0 .5em;
        font-family: 'poppins',sans-serif;
        &:is([class^="btn-"]) {
            border: 1px solid currentColor;
            padding: var(--br-sp) min(1em,5vw);
            clip-path: polygon(100% var(--br-sp), 100% 100%, 0% 100%, 0% 0%, calc(100% - var(--br-sp)) 0%, calc(100% - var(--br-sp)) var(--br-sp));
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLPrimaryBlue);
                clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 0);
                &::before {clip-path: circle(145% at 0 100%)}
            }
            & span:not([class]) {
                position: relative;
                z-index: 1;
                font: inherit;
            }
            &::before {
                position: absolute;
                inset: 0;
                z-index: -1;
                content: "";
                display: block;
                transition: all .3s;
                clip-path: circle(0% at 0 100%);
                background-color: var(--cLPrimaryBlue);
            }
            /* & .hover {
                position: absolute;
                inset: 0;
                z-index: -1;
                display: block;
                transition: all .3s;
                clip-path: circle(0% at 0 100%);
                background-color: var(--cLPrimaryBlue);
                :is([class^="btn-"]:hover &) {clip-path: circle(145% at 0 100%);}
            } */
        }
        &:has( .arrow) {
            display: flex;
            column-gap: .7em;
            align-items: center;
            & .arrow {
                position: relative;
                scale: 1;
                z-index: 0;
                left: -0.2em;
                border-radius: 0;
                color: currentColor;
                pointer-events: none;
                padding: min(.5rem,1.3vw);
                border-color: transparent;
                &::before,
                &::after {inset: 0;}
                &:is(*:hover > &) {
                    border-color: transparent;
                    background-color: transparent;
                }
                /* padding: clamp(min(0.4em,2.5vw),0.5vw,0.5em); */
            }
        }
        &.btn-clWhite {
            color: var(--cLDarkBlue);
            border-color: var(--cLWhite);
            background-color: var(--cLWhite);
            clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 0);
        }
        &.btn-text-cLPrimaryBlue {
            color: var(--cLPrimaryBlue);
            background-color: transparent;
            border-color: var(--cLDarkBlack);
        }
    }
    & .underline {
        &::after {
            position: relative;
            width: 2em;
            content: '';
            height: 1px;
            display: block;
            margin-top: 1em;
            background-color: var(--cLPrimaryBlue);
        }
    }
    & .swiper-wrapper {
        display: flex;
        & .swiper-slide {flex: 0 0 auto;}
    }
    /* & [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-block;
            & > 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: fixed;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: 10;
                height: auto;
                font: initial;
                visibility: visible;
                will-change: transform;
                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;
                    padding: min(2em, 5vw);
                    justify-content: center;
                }
                @media screen and (width >= 1200px) {
                    & {
                        pointer-events: none;
                    }
                }
            }

        }
    } */
}