body {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}

:root {
    --lucida-hojicha: 102, 55, 27;
    --lucida-beige: 227, 216, 194;
    --lucida-light: 247, 241, 225;
    --lucida-dark: 34, 18, 8;
    --lucida-green: 64, 63, 43;
    --lucida-matcha: 129, 117, 75;
    --lucida-golden: 180, 131, 62;
    --lucida-white: 253, 253, 253;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1416px;
    }
}
p {
    padding: 0;
    margin: 0;
}
b {
    font-weight: 700;
}
.bg-lucida-hojicha {
    background-color: rgba(var(--lucida-hojicha));
}
.bg-lucida-beige {
    background-color: rgba(var(--lucida-beige));
}
.bg-lucida-light {
    background-color: rgba(var(--lucida-light));
}
.bg-lucida-dark {
    background-color: rgba(var(--lucida-dark));
}
.bg-lucida-green {
    background-color: rgba(var(--lucida-green));
}
.bg-lucida-matcha {
    background-color: rgba(var(--lucida-matcha));
}
.bg-lucida-golden {
    background-color: rgba(var(--lucida-golden));
}
.bg-lucida-white {
    background-color: rgba(var(--lucida-white));
}
.color-lucida-hojicha {
    color: rgba(var(--lucida-hojicha));
}
.color-lucida-beige {
    color: rgba(var(--lucida-beige));
}
.color-lucida-light {
    color: rgba(var(--lucida-light));
}
.color-lucida-dark {
    color: rgba(var(--lucida-dark));
}
.color-lucida-green {
    color: rgba(var(--lucida-green));
}
.color-lucida-matcha {
    color: rgba(var(--lucida-matcha));
}
.color-lucida-golden {
    color: rgba(var(--lucida-golden));
}
.color-lucida-white {
    color: rgba(var(--lucida-white));
}
.flip-y {
    transform: rotateX(180deg);
}
.flip-x {
    transform: rotateY(180deg);
}
.paragraph-space {
    display: block;
    margin-top: 10px;
}
.btn-cta {
    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: rgba(var(--lucida-beige));

    color: rgba(var(--lucida-hojicha));
    font-family: "Host Grotesk", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration: none;
}
.btn-cta.btn-cta-hojicha {
    background: rgba(var(--lucida-hojicha));
    color: rgba(var(--lucida-light));
}
.btn-cta.btn-cta-green {
    background: rgba(var(--lucida-beige));
    color: rgba(var(--lucida-green));
}
.btn-cta.btn-cta-matcha {
    background: rgba(var(--lucida-matcha));
    color: rgba(var(--lucida-white));
}
.btn-cta.btn-cta-matcha svg path {
    stroke: rgba(var(--lucida-white));
}
.btn-cta:hover, .btn-cta.btn-cta-green:hover {
    background: rgba(var(--lucida-light));
}
.btn-cta.btn-cta-hojicha:hover {
    background: rgba(var(--lucida-golden));
}
.btn-cta.btn-cta-matcha:hover {
    background: rgba(var(--lucida-matcha), 0.8);
    color: rgba(var(--lucida-white));
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    body {
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
    }
}
.highlight-box {
    padding: 16px;
    border-radius: 7px;
}
.highlight-box.highlight-box-white {
    background-color: rgba(var(--lucida-white));
}
.highlight-box.highlight-box-hojicha {
    background-color: rgba(var(--lucida-hojicha));
}
.highlight-box.highlight-box-white.highlight-box-mirror {
    background-image: url("../images/mirror-white-sm.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.highlight-box.highlight-box-hojicha.highlight-box-mirror {
    background-image: url("../images/mirror-hojicha-sm.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.highlight-box > .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
.highlight-box > .content .title {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.highlight-box > .content p + p {
    padding-top: 10px;
}


section.info {
    padding-top: 32px;
    padding-bottom: 32px;
}
section.info + section.info {
    padding-top: 16px;
    padding-bottom: 16px;
}
.info:has(+ .quotes) {
    padding-bottom: 0 !important;
}
section.quotes + section.info {
    padding-top: 0 !important;
}
section.info .section-wrapper {
    display: flex;
    padding: 56px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
    border-radius: 20px;

    background-image: url("../images/mirror-dark-02.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat:no-repeat;
}
section.info .section-wrapper .section-header {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
section.info .section-wrapper .section-header .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
section.info .section-wrapper .section-header .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-width: 715px;
    flex-shrink: 0;
    text-align: left;
}
section.info .section-wrapper .section-header h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.info .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.info .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
}
@media (max-width: 1250.98px) {
    section.info .section-wrapper .section-header .right {
        max-width: 600px;
    }
}
@media (max-width: 1150.98px) {
    section.info .section-wrapper .section-header .right {
        max-width: 500px;
    }
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    section.info .container-xxl {
        padding-left: 8px;
        padding-right: 8px;
    }

    section.info .section-wrapper {
        padding: 24px;
        gap: 32px;
    }

    section.info .section-wrapper .section-header {
        flex-direction: column;
        gap: 32px;
    }

    section.info .section-wrapper .section-header .left {
        align-items: center;
        margin: unset;
    }

    section.info .section-wrapper .section-header .right {
        align-items: center;
        max-width: 100%;
    }

    section.info .section-wrapper .section-header h3 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }

    section.info .section-wrapper .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }

    section.info .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.info .section-wrapper .section-header .btn-wrapper {
        width: 100%;
    }
    section.info .section-wrapper .section-header .btn-cta {
        width: 100%;
    }
}


section.articles {
    padding-top: 80px;
    padding-bottom: 80px;
}

section.articles .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 56px;
}
section.articles .articles-grid .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
}
section.articles .articles-grid .item .item-thumbnail {
    background: var(--article-image) center right / cover no-repeat;
    height: 270px;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
}
section.articles .articles-grid .item .item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
section.articles .articles-grid .item .item-body .item-category {
    padding: 4px 12px;
    border-radius: 900px;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
section.articles .articles-grid .item .item-body .item-category a {
    text-decoration: none;
    color: inherit;
}
section.articles .articles-grid .item .item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
section.articles .articles-grid .item .item-content .item-header h4 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.articles .articles-grid .item .item-content .item-excerpt {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
section.articles .articles-grid .item a.item-read-more {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;

    text-decoration: none;
    transition: filter 0.2s ease;
}
section.articles .articles-grid .item a.item-read-more:hover {
    filter: brightness(1.4);
}
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    section.articles .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    section.articles .articles-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }
}

section.article-body {
    padding-top: 80px;
    padding-bottom: 80px;
}
section.article-body > .container-xl {
    padding-left: 20px;
    padding-right: 20px;
}
section.article-body .content-wrapper {
    display: flex;
    gap: 64px;
}
section.article-body .content-wrapper .content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 32px;
    max-width: 790px;
}
section.article-body .content-wrapper .content h2 {
    font-size: 40px;
}
section.article-body .content-wrapper .content h3 {
    font-size: 28px;
}
section.article-body .content-wrapper .content h4 {
    font-size: 24px;
}
section.article-body .content-wrapper .content h5 {
    font-size: 16px;
}
section.page-body {
}
section.page-body > .container-xxl {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
}
section.page-body .content-wrapper {
    display: flex;
    gap: 64px;
}
section.page-body .content-wrapper .content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 32px;
}