@import url("https://use.typekit.net/nog5wvy.css");

:root {
   --cLPrimaryBlue: #184182;
  --cLAccentYellow: #FDC745;
  --cLLightGray: #D9D9D9;
  --cLBorderGray: #DDDDDD59;
  --cLBlack: #000000;
  --cLWhite: #FFFFFF;

  --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);
  --fs70: clamp(min(60px,7vw), 3vw, 70px);
  --fs56: clamp(min(35px,7.5vw), 2.5vw, 56px);
  --fs45: clamp(min(35px,7.5vw), 2.4vw, 45px);
  --fs42: clamp(min(20px,5.5vw), 2.15vw, 42px);
  --fs40: clamp(min(20px,5.5vw), 2.1vw, 40px);
  --fs36: clamp(min(22px,5.5vw), 2.2vw, 36px);
  --fs30: clamp(min(22px,5.5vw), 2.1vw, 30px);
  --fs25: clamp(min(20px,4.8vw), 1.5vw, 25px);
  --fs22: clamp(min(19px,4.5vw), 1.1vw, 22px);
  --fs20: clamp(min(18px,4.3vw), 1.1vw, 20px);
  --fs18: clamp(min(18px,4vw), 1.05vw, 18px);
  --fs16: 16px;
  --fs14: 14px;
}
body {
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
    overflow-x: hidden;
    letter-spacing: -0.5%;
    font-size: var(--fs16);
    color: var(--cLPrimaryBlue);
    font-family: "verdana", sans-serif;
    & hr {border-bottom: 2px solid var(--cLPurpleVivid);}
    & 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(--cLAccentYellow);
                }
            }
        }
    }
    & a {
        color: inherit;
        text-decoration: none;
        &:not([class]):hover {color: var(--cLAccentYellow);}
    }
    & strong {font-weight: 700;}
    & p:has( :is(.btn, .tag)) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: min(.5em,2vw) min(10px, 4vw);
        &:is(.text-center &) {
            justify-content: center;
        }
    }
    & :is(h1,h2,h3,h4,h5,h6) {line-height: 1.2;}
    & .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);}
    & .fs70 {font-size: var(--fs70);}
    & .fs56 {font-size: var(--fs56);}
    & .fs45 {font-size: var(--fs45);}
    & .fs42 {font-size: var(--fs42);}
    & .fs40 {font-size: var(--fs40);}
    & .fs36 {font-size: var(--fs36);}
    & .fs30 {font-size: var(--fs30);}
    & .fs25 {font-size: var(--fs25);}
    & .fs22 {font-size: var(--fs22);}
    & .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;}
    & .uppercase-text {text-transform: uppercase;}
    & .uppercase-initial {text-transform: initial;}
    & .lato {font-family: 'lato',sans-serif;}
    & .verdana {font-family: "verdana", sans-serif;;}
    & .cLWhite {color: var(--cLWhite);}
    & .cLBlack-055 {color: hsl(from var(--cLBlack) h s l / .55);}
    & .cLAccentYellow {color: var(--cLAccentYellow);}
    & .hidden {visibility: hidden;}
    /* & 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;
        }
        &[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;
        }
    }
    & [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;
        }
    }
    & .btn {
        border: none;
        width: 100%;
        display: block;
        line-height: 1;
        overflow: hidden;
        max-width: max-content;
        font-weight: 700;
        border-radius: 2em;
        text-align: center;
        transition: all .3s;
        letter-spacing: -2.5%;
        font-size: var(--fs14);
        text-transform: initial;
        justify-content: center;
        border: 1px solid transparent;
        font-family: 'verdana',sans-serif;
        padding: min(1.143em,3vw) min(1.8em,5vw);
        &.btn-border-cLPrimaryBlue {
            color: var(--cLPrimaryBlue);
            border-color: var(--cLPrimaryBlue);
            background-color: transparent;
            &:hover {
                color: var(--cLAccentYellow);
                border-color: var(--cLPrimaryBlue);
                background-color: var(--cLPrimaryBlue);
            
            }
        }
        &.btn-border-cLWhite {
            color: var(--cLWhite);
            border-color: var(--cLWhite);
            background-color: transparent;
            &:hover {
                color: var(--cLPrimaryBlue);
                border-color: contrast-color(currentColor);
                background-color: contrast-color(currentColor);
            
            }
        }
        &.btn-cLPrimaryBlue {
            color: var(--cLWhite);
            border-color: var(--cLPrimaryBlue);
            background-color: var(--cLPrimaryBlue);
            &:hover {
                color: var(--cLPrimaryBlue);
                border-color: var(--cLAccentYellow);
                background-color: var(--cLAccentYellow);
            
            }
        }
        &.btn-cLWhite {
            color: var(--cLPrimaryBlue);
            border-color: contrast-color(currentColor);
            background-color: contrast-color(currentColor);
            &:hover {
                color: var(--cLAccentYellow);
                border-color: var(--cLPrimaryBlue);
                background-color: var(--cLPrimaryBlue);
            
            }
        }
        @media screen and (width >= 1200px) {
            & {
                width: auto;
            }
        }
    }
    & .underline {
        &::after {
            position: relative;
            width: 2em;
            content: '';
            height: 1px;
            display: block;
            margin-top: 1em;
            background-color: var(--cLAccentYellow);
        }
    }
    /* & [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;
                    }
                }
            }

        }
    } */
}