@charset 'utf-8';


/** vars **/

:root {
    --color-natural: #F2EEE5;
    --color-primary: #152038;
    --color-secondary: #E79524;

    --wrapper: 1320px;
    --wrapper-offset: calc((100% - var(--wrapper)) / 2);
}

@media (max-width: 1680px) {
    :root {
        --wrapper: 1056px;
    }
}

@font-face {
    font-family: 'Sora-Outline';

    src: url('assets/fonts/Sora-SemiBold.woff2');
    src: url('assets/fonts/Sora-SemiBold.woff') format('woff');

    font-style: normal;
    font-weight: 600;
}


/** reset **/

* {
    border-radius: 0;

    border: 0;
    margin: 0;
    padding: 0;

    resize: none;
    outline: none;

    background: transparent;
}

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

p {
    text-wrap: pretty;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer
}

ul, ol, li {
    list-style: none;
}

button, input, select, textarea {
    -webkit-appearance: none;
            appearance: none;

    font: inherit;
}

img, svg, video, canvas, iframe, picture {
    height: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

body, html {
    color: black;

    width: 100%;
    overflow-x: hidden;

    font-size: 10px;
    line-height: 1.2;

    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;

    background: var(--color-natural);
}

@media (max-width: 1680px) {
    body, html {
        font-size: 8px;
    }
}


/** tag **/

.tag {
    color: #222222;

    height: 3.0rem;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;

    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    font-family: Sora, sans-serif;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    border: 1px solid #CDD0CD;
    border-radius: 5.6rem;
}


/** btn **/

.btn {
    color: white;
    height: 5.6rem;

    display: inline-flex;
    overflow: hidden;
    position: relative;
    align-items: center;

    font-size: 1.6rem;
    font-weight: 700;
    font-family: Sora, sans-serif;
    text-transform: uppercase;

    padding: 0 0.5rem 0 3.2rem;
    background: var(--color-primary);

    border-radius: 8.0rem;
}

.btn::after {
    z-index: 2;
    content: '';

    width: 4.8rem;
    height: 4.8rem;
    margin: 0 0 0 2.6rem;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    background-color: var(--color-secondary);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDMwNTkgMS45OTMyMUg4LjU5NzM4TDAuMjkxODk2IDEwLjI5ODdDMi42NjEyMmUtMDYgMTAuNTkwNiAtMC4wNzI5NzI4IDExLjAxODUgMC4wNzI5NzAxIDExLjM3ODRDMC4xMjE2MiAxMS40OTg0IDAuMTk0NTk2IDExLjYxMDggMC4yOTE4OTYgMTEuNzA4MUMwLjY4MTA5OCAxMi4wOTczIDEuMzEyMTEgMTIuMDk3MyAxLjcwMTMxIDExLjcwODFMMTAuMDA2OCAzLjQwMjYyVjguOTY5NDFDMTAuMDA2OCA5LjAzODIxIDEwLjAxMzggOS4xMDU0MiAxMC4wMjcxIDkuMTcwMjRDMTAuMTIgOS42MjQzNyAxMC41MjE4IDkuOTY2MDEgMTEuMDAzNCA5Ljk2NjAxQzExLjU1MzkgOS45NjYwMSAxMiA5LjUxOTg1IDEyIDguOTY5NDFWMC45OTY2MDVDMTIgMC40NDYxOTIgMTEuNTUzOSAwIDExLjAwMzQgMEgzLjAzMDU5QzIuOTk2MTkgMCAyLjk2MjIgMC4wMDE3Mzc4NCAyLjkyODY5IDAuMDA1MTQyMjRDMi40MjYxNSAwLjA1NjE3NjQgMi4wMzM5OSAwLjQ4MDU5NSAyLjAzMzk5IDAuOTk2NjA1QzIuMDMzOTkgMS41NDcwMSAyLjQ4MDE4IDEuOTkzMjEgMy4wMzA1OSAxLjk5MzIxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');

    background-size: 1.2rem;
    background-repeat: no-repeat;
    background-position: center;

    border: 0;
    border-radius: 50%;

    transition: transform 0.3s ease-out;
}

.btn::before {
    z-index: 1;

    top: 0;
    left: 0;
    width: 0;
    bottom: 0;

    content: '';
    position: absolute;

    background: rgba(0,0,0,0.1);
    transition: width 0.3s ease-out;
}

.btn span {
    z-index: 2;
    position: relative;
}

.btn.secondary { background: var(--color-secondary) }
.btn.secondary::after { background-color: var(--color-primary) }

.btn.outline {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: transparent;
}

.btn.outline::after { background-color: var(--color-primary) }

@media (any-hover: hover) {
    .btn:hover::after {
        transform: rotate(45deg);
    }

    .btn:hover::before {
        width: 100%;
    }
}


/** text **/

.text {
    color: #555855;

    font-size: 2.0rem;
    font-weight: 400;
    line-height: 2.8rem;
    font-family: DM Sans, sans-serif;
}

.text p {
    margin: 0 0 1em;
}

.text p:last-child { margin-bottom: 0 }

.text.h1,
.text.h2,
.text.h3,
.text.h4,
.text.h5,
.text.h6,
.text.h7 {
    color: var(--color-primary);
}

.text.h1 {
    font-size: 18.0rem;
    font-weight: 600;
    line-height: 14.0rem;
    font-family: Sora, sans-serif;
}

.text.h2 {
    font-size: 5.6rem;
    font-weight: 500;
    line-height: 6.4rem;
    font-family: Sora, sans-serif;
}

.text.h4 {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 4.4rem;
    font-family: Sora, sans-serif;
}

.text.h5 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 3.6rem;
    font-family: Sora, sans-serif;
}

.text.h7 {
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 2.8rem;
    font-family: Sora, sans-serif;
}

.text.small {
    font-size: 1.8rem;
    line-height: 2.6rem;
}

.text.white { color: white }
.text.natural { color: var(--color-natural) }

.text.left { text-align: left }
.text.right { text-align: right }
.text.center { text-align: center }

.text.outline {
    color: transparent;

    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--color-primary);

    text-stroke: 2px var(--color-primary);
}

.text.outline.white { -webkit-text-stroke-color: white; text-stroke: 2px white }
.text.outline.natural { -webkit-text-stroke-color: var(--color-natural); text-stroke: 2px var(--color-natural) }

.text.outline.thin { -webkit-text-stroke-width: 0.5px; text-stroke: 0.5px var(--color-primary) }

.text.outline.thin.white { text-stroke: 0.5px white }
.text.outline.thin.natural { text-stroke: 0.5px var(--color-natural) }


@media (max-width: 1180px) {
    .text {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }
    .text.h1 {
        font-size: 14.0rem;
        line-height: 12.0rem;
    }

    .text.h2 {
        font-size: 4.4rem;
        line-height: 5.2rem;
    }

    .text.h4 {
        font-size: 2.8rem;
        line-height: 3.6rem;
    }

    .text.h5 {
        font-size: 2.2rem;
        line-height: 2.8rem;
    }

    .text.h7 {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    .text.small {
        font-size: 1.4rem;
        line-height: 2.0rem;
    }
}


/** input **/

.input {
    width: 100%;
    color: #555855;

    margin: 0 0 1.6rem;
    padding: 1.5rem 2.0rem;
    background: white;
    border-radius: 2.8rem;

    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.6rem;
    font-family: DM Sans, sans-serif;
}

textarea.input { height: 22.0rem }

.error-message {
    color: #990000;
    margin: -1.6rem 0 1.6rem;
    padding: 0 2.0rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.6rem;
    font-family: DM Sans, sans-serif;
}

.error-message.success {
    color: #152038;
    margin: 1.6rem 0;
    padding: 0;
    font-weight: 600;
}


/** wcag **/

.for-display { speak: none }
.for-sreader, .screen-reader-text {
    width: 0;
    height: 0;

    display: block;
    overflow: hidden;

    font-size: 14px;
}


/** flexbox **/

.flex        { display: flex        }
.flex.inline { display: inline-flex }

.flex.wrap   { flex-wrap: wrap        }
.flex.column { flex-direction: column }

.flex.al-end    { align-items: flex-end   }
.flex.al-start  { align-items: flex-start }
.flex.al-center { align-items: center     }

.flex.jf-end     { justify-content: flex-end      }
.flex.jf-start   { justify-content: flex-start    }
.flex.jf-center  { justify-content: center        }
.flex.jf-around  { justify-content: space-around  }
.flex.jf-between { justify-content: space-between }

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .grow   { flex-grow: 1   }
.flex > .shrink { flex-shrink: 1 }

@media (max-width: 768px) {
    .flex.wrap-mobile {
        flex-wrap: wrap;
    }
}


/** containers **/

.wrapper {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;

    max-width: var(--wrapper);
}


/** object position **/

.cover,
.contain {
    object-fit: cover;
    object-position: center;
}

.contain { object-fit: contain }

.cover.left,  .contain.left  { object-position: left center  }
.cover.right, .contain.right { object-position: right center }

.cover.top,       .contain.top       { object-position: center top }
.cover.top.left,  .contain.top.left  { object-position: left top   }
.cover.top.right, .contain.top.right { object-position: right top  }

.cover.bottom,       .contain.bottom       { object-position: center bottom }
.cover.bottom.left,  .contain.bottom.left  { object-position: left bottom   }
.cover.bottom.right, .contain.bottom.right { object-position: right bottom  }


/** page-banner **/

.page-banner {
    z-index: 10;
    width: 100%;
    height: 60.0rem;
    position: relative;
}

.page-banner svg {
    z-index: 10;

    left: 50%;
    width: 384.0rem;
    bottom: -2px;

    position: absolute;
    transform: translate(-50%, 51%);

    -webkit-pointer-events: none;
            pointer-events: none;

    max-width: none;
    max-height: none;
}

.page-banner .cover {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}

.page-banner .mask {
    z-index: 5;

    inset: 0;
    opacity: 0.5;

    position: absolute;
    background: var(--color-primary);
}

.page-banner .title {
    margin: 0 0 1rem 0;
}

.page-banner .title strong {
    margin: -0.1em 0 0;
    font-family: 'Sora-Outline';
}

.page-banner .wrapper {
    z-index: 15;

    width: calc(100% - 36.0rem);
    max-width: 220.0rem;

    position: relative;
}


@media (max-width: 1680px) {
    .page-banner .wrapper {
        width: calc(100% - 40px);
        max-width: var(--wrapper);
    }
}

@media (max-width: 1180px) {
    .page-banner .title {
        font-size: 2.0rem;
        line-height: 2.6rem;
    }

    .page-banner .title strong {
        font-size: 10.0rem;
        line-height: 8.5rem;
    }
}

@media (max-width: 768px) {
    .page-banner .title {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }
    .page-banner .title strong {
        font-size: 8rem;
        line-height: 6.5rem;
    }
}


html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}