/*
Theme Name: Lúcida
Theme URI: https://wearelucida.co
Author: Elisa Henry
Author URI: https://wearelucida.co
Description: Lúcida Agency
Requires at least: 5.3
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0
License: Proprietary - All Rights Reserved
License URI: https://wearelucida.co
Text Domain: lucida-agency
Tags: one-column, custom-menu, featured-images, translation-ready

Copyright (c) 2025 Lúcida. All rights reserved.
This theme is proprietary software. Unauthorized copying, modification,
distribution, or use of this theme, in whole or in part, is strictly
prohibited without prior written permission from Lúcida.
*/

header {
    /*background-color: rgba(var(--lucida-hojicha));*/
}

header section.nav {
    padding-top: 16px;
    padding-bottom: 16px;
    background: transparent;

    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    left: 0;
    transition: background 0.3s ease;
}

header section.nav .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;

}
header section.nav img.logo {
    height: 36px;
}
header section.nav .menu {
    display: flex;
    align-items: center;
    gap: 40px;
}
header section.nav .menu a:not(.btn-cta) {
    color: rgba(var(--lucida-light));

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    text-decoration: none;
}
header section.nav .menu a:not(.btn-cta):hover {
    color: rgba(var(--lucida-beige));
}
section.hero {
    padding-top: 140px;
    padding-bottom: 32px;

    background: url("images/mirror-hojicha.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
section.hero .hero-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
section.hero.hero-article .hero-header h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.hero .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}
section.hero .content h1 {
    color: rgba(var(--lucida-light));

    font-size: 86px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.hero .content h3 {
    max-width: 382px;

    color: rgba(var(--lucida-light), 0.7);
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}

/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.hero {
        padding-top: 28px;
        padding-bottom: 0;
    }
    section.hero .container-xxl {
        padding: 0;
    }
    section.hero .hero-wrapper {
        gap: 32px;
    }
    section.hero .content {
        gap: 24px;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
    }
    section.hero .content h1 {
        letter-spacing: -2px;
        font-size: 40px;
    }
    section.hero .content h3 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
}

section.billboard {
    padding-top: 80px;
}
section.billboard .section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 816px;
}
section.billboard .section-wrapper p {
    opacity: 0.7;

    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.billboard .section-wrapper .splash {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.billboard .boom-wrapper {
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
    position: relative;
}
section.billboard .boom {
}
section.billboard .boom .items {
    display: flex;
    flex-direction:column;
    align-self: stretch;
    gap: 15px;
}
section.billboard .boom .items .item {
    display: flex;
    gap: 24px;
    align-items: center;

    font-size: 96px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -3.84px;
}
section.billboard .boom .items .item img {
    height: 70px;
}
.glass-wrapper {
    display: flex;
    z-index: 100;
    height: 100%;
    width: 100%;
    position: absolute;
    gap: 0;
}
.glass {
    height: 100%;
    width: 5%;
    background-image: url("images/glass-pane.png");
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-position: center center;
    backdrop-filter: blur(.65rem);
    z-index: 99;
    inset: 0;
    transition: opacity 2s;
}
.glass:hover {
    opacity: 0;
    transition: opacity 0.5s;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.billboard {
        padding-top: 56px;
    }
    section.billboard .section-wrapper .splash {
        font-size: 24px;
        line-height: 130%;
        letter-spacing: -0.48px;
    }
    section.billboard .boom .items {
        gap: 0;
    }
    section.billboard .boom .items .item {
        gap: 6px;
        font-size: 38px;
        line-height: 110%;
        letter-spacing: -2px;
    }
    section.billboard .boom .items .item img {
        height: 27px;
    }
    .glass {
        transition: opacity 1.5s ease-in-out;
    }
    .glass.reveal {
        opacity: 0;
    }
}

section.problem {
    padding-top: 80px;
    padding-bottom: 80px;

    background-image: url("images/bg-lucida-icon-light.png");
    background-position: -115px calc(100% + 50px);
    background-size: 429px auto;
    background-repeat: no-repeat;
}
section.problem .section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
section.problem .section-wrapper .section-header h2 {
    font-size: 86px;
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
    letter-spacing: -3.44px;
}
section.problem .section-wrapper .content {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    gap: 20px;
    max-width: 816px;
}
section.problem .section-wrapper .content p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.36px;
    opacity: 0.7;
}
section.problem .section-wrapper .content .hook {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.problem {
        padding-top: 56px;
        padding-bottom: 56px;
        background-position: -87px calc(100% + 64px);
        background-size: 332px auto;
    }
    section.problem .section-wrapper .section-header h2 {
        font-size: 40px;
        line-height: 110%;
        letter-spacing: -2px;
    }
    section.problem .section-wrapper {
        gap: 24px;
    }
    section.problem .section-wrapper .content p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
}

section.deliverables {
    padding-top: 0;
    padding-bottom: 56px;
    overflow: hidden;

    background-image: url("images/bg-lucida-icon-light.png");
    background-position: -115px -360px;
    background-size: 429px auto;
    background-repeat: no-repeat;
}
section.deliverables .section-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
}
section.deliverables .section-wrapper .section-header {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 24px;
    max-width: 816px;
}
section.deliverables .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
    text-align: center;
}
section.deliverables .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    text-align: center;
    opacity: 0.7;
}
section.deliverables .section-wrapper .slides {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
section.deliverables .section-wrapper .slides .slide {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 20px;
    background: rgba(var(--lucida-light));
}
section.deliverables .section-wrapper .slides .slide img.slide-image {
    max-width: 600px;
}
section.deliverables .section-wrapper .slides .slide .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: center;
}
section.deliverables .section-wrapper .slides .slide:nth-child(odd) .content {
    padding-right: 32px;
}
section.deliverables .section-wrapper .slides .slide:nth-child(even) .content {
    padding-left: 32px;
}
section.deliverables .section-wrapper .slides .slide .content .slide-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
section.deliverables .section-wrapper .slides .slide .content .slide-header h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.deliverables .section-wrapper .slides .slide .content .slide-header h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.deliverables .section-wrapper .slides .slide .content > p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.8;
}
section.deliverables .section-wrapper .slides .slide .content > p.outcome {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 1;
}
section.deliverables .section-wrapper .slides .slide .content > p.outcome b {
    font-weight: 700;
}
.tags {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 3px -6px;
    align-self: stretch;
    flex-wrap: wrap;
    margin-left: 6px;
}
.tags.tags-md .tag {
    font-size: 14px;
}
.tags.tags-lg .tag {
    padding: 4px 24px;
    font-size: 24px;
}
.tags .tag, .tags-slider-wrapper .tag {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4.987px;
    border-radius: 448.855px;

    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.48px;

    margin-left: -6px;
}
.tags-slider-wrapper .tag {
    margin-left: 0;
    width: fit-content;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.deliverables {
        background-position: -87px -252px;
        background-size: 332px auto;
    }
    section.deliverables .section-wrapper {
        gap: 32px;
    }
    section.deliverables .section-wrapper .section-header {
        gap: 16px;
    }
    section.deliverables .section-wrapper .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.deliverables .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
    }
    section.deliverables .section-wrapper .slides .slide {
        padding: 16px 16px 32px;
        gap: 24px;
        flex-direction: column;
    }
    section.deliverables .section-wrapper .slides .slide img.slide-image {
        width: 100%;
    }
    section.deliverables .section-wrapper .slides .slide .content {
        gap: 16px;
        order: 1;
    }
    section.deliverables .section-wrapper .slides .slide:nth-child(odd) .content {
        padding-right: 0;
    }
    section.deliverables .section-wrapper .slides .slide:nth-child(even) .content {
        padding-left: 0;
    }
    section.deliverables .section-wrapper .slides .slide .content .slide-header h4 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.deliverables .section-wrapper .slides .slide .content .slide-header h3 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.28px;
    }
    section.deliverables .section-wrapper .slides .slide .content > p.outcome {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    .tags .tag {
        padding: 4px 16px;
        font-size: 14px;
        letter-spacing: -0.56px;
    }

    .tags-slider-wrapper .slick-slide {
        margin-right: 32px; /* Reduce margin for mobile */
    }

    section.deliverables .tags-slider-wrapper {
        width: 100%; /* Ensure wrapper doesn't overflow */
    }

    section.deliverables .tags-slider-wrapper .slick-list {
        overflow: visible; /* Allow proper slide movement */
    }

    /* Fix for tags sliders in mobile */
    .tags-slider-wrapper {
        width: 100%;
        overflow: hidden; /* Critical: prevent overflow */
        position: relative;
    }

    .tags-slider-wrapper .slick-list {
        overflow: hidden; /* Change from visible to hidden */
    }

    .tags-slider-wrapper .slick-track {
        display: flex;
        align-items: center;
    }

    .tags-slider-wrapper .slick-slide {
        margin-right: -6px; /* Reduce margin */
        height: auto;
    }

    /* Constrain tag width in sliders */
    .tags-slider-wrapper .tag {
        white-space: nowrap;
        max-width: 100%;
        display: inline-block;
    }

    /* Ensure parent container doesn't overflow */
    section.deliverables .section-wrapper .slides .slide .content {
        overflow: hidden;
        width: 100%;
    }
}

section.clarityos {
    padding-top: 56px;
    padding-bottom: 32px;
}
section.clarityos .section-wrapper {
    display: flex;
    padding: 56px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    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.clarityos .section-wrapper .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
section.clarityos .section-wrapper .section-header h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    text-align: center;
}
section.clarityos .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
    text-align: center;
    padding-bottom: 8px;
}
section.clarityos .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
    padding-bottom: 16px;
}
section.clarityos .section-wrapper .section-header .btn-wrapper {
    text-align: center;
}
.spotlight .tags {
    justify-content: center;
    margin-bottom: -15px;
    z-index: 2;
    position: relative;
}
.spotlight .tags .tag {
    font-size: 19.949px;
    font-weight: 400;
}
section.clarityos .backed-by {
    display: flex;
    align-items: center;
    gap: 64px;
    align-self: stretch;
}
section.clarityos .backed-by p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
    flex-shrink: 0;
}
section.clarityos .backed-by .logos-wrapper {
    position: relative;
    overflow: hidden;
}
section.clarityos .backed-by .logos-wrapper .overlay {
    width:72px;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0.8;
    background: linear-gradient(270deg, rgba(34, 18, 8, 0.00) 0%, #221208 100%);
    z-index: 100;
}
section.clarityos .backed-by .logos-wrapper .overlay.overlay-left {
    left: 0;
}
section.clarityos .backed-by .logos-wrapper .overlay.overlay-right {
    right: 0;
}
.logos-slider .slick-slide {
    margin-right: 64px;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.clarityos {
        padding-top: 24px;
        padding-bottom: 0;
    }
    section.clarityos .container-xxl {
        padding-left: 8px;
        padding-right: 8px;
    }
    section.clarityos .section-wrapper {
        padding: 24px 16px;
        gap: 32px;
    }
    section.clarityos .section-wrapper .section-header h3 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.clarityos .section-wrapper .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.clarityos .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.clarityos .backed-by {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
    .logos-slider .slick-slide {
        margin-right: 32px; /* Reduce margin for mobile */
    }

    section.clarityos .backed-by .logos-wrapper {
        width: 100%; /* Ensure wrapper doesn't overflow */
    }

    section.clarityos .backed-by .logos-wrapper .slick-list {
        overflow: visible; /* Allow proper slide movement */
    }

    /* Constrain logo sizes in mobile */
    .logos-slider .logo {
        max-width: 120px; /* Adjust this value as needed */
        height: auto;
        width: auto;
    }
}

section.how-works {
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: hidden;
}
section.how-works .section-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 110px;
}
section.how-works .section-wrapper .section-header {
    max-width: 392px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
}
section.how-works .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.how-works .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
}
section.how-works .section-wrapper .items {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px 56px;
    align-self: stretch;
    flex-wrap: wrap;
}
section.how-works .section-wrapper .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    flex: 0 0 calc(50% - 28px);
}
section.how-works .section-wrapper .item .item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
section.how-works .section-wrapper .item .item-content .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.how-works .section-wrapper .item .item-content .description {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
/*
.how-works-slider-container {
    background-color: #221208;
    position: relative;
    overflow: hidden;
    width: 100%;
}*/

.how-works-slider-container .controllers {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    padding-top: 32px;
}
.how-works-slider-container .controllers button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.how-works-slider-container .controllers img:hover {
    opacity: 0.60;
}

.how-works-slider .slick-slider {
    position: relative;
}

.how-works-slider .slick-carousel {
    width: 100%;
    /* Full width container */
}

.how-works-slider .slick-slide {
    max-width: 300px !important;
    /* Fixed slide width */
    margin-right: 25px;
    /* 32px space between slides */
    height: auto;
    /* Ensure slides have the same height */
    background: transparent;
}
/* Prevent overflow from extra spacing */
.how-works-slider .slick-list {
    /*margin: 0 -16px; /* Half of the space to balance the edges */
    overflow: hidden;
    /* Clean edges without overflow */
}

.how-works-slider .slick-track {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

.how-works-slider-container .custom-prev.slick-disabled,
.how-works-slider-container .custom-next.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default !important;
    display: block !important;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.how-works {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    section.how-works .section-wrapper {
        gap: 32px;
        flex-direction: column;
    }
    section.how-works .section-wrapper .section-header {
        justify-content: center;
        align-items: center;
    }
    section.how-works .section-wrapper .section-header h2 {
        text-align: center;
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.how-works .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
        text-align: center;
    }
}

.comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar completely */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-table-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


.comparison-table {
    display: grid;
    grid-template-columns: 310px 310px 16px 1fr 16px 1fr 16px 1fr;
    column-gap: 0;
    min-width: 900px; /* Triggers horizontal scroll below this width */
    width: 100%;
}
.comparison-table .col:nth-child(1) { grid-column: 1; } /* Sticky */
.comparison-table .col:nth-child(2) { grid-column: 2; } /* Lúcida - no gap before */
.comparison-table .col:nth-child(3) { grid-column: 4; } /* Platforms - skip gap column 3 */
.comparison-table .col:nth-child(4) { grid-column: 6; } /* Freelancers - skip gap column 5 */
.comparison-table .col:nth-child(5) { grid-column: 8; } /* Agencies - skip gap column 7 */
.comparison-table .row {
    display: contents;
}

.comparison-table .col {
    background: white;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid rgba(var(--lucida-light));

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    color: rgba(var(--lucida-dark), 0.7);
}
.comparison-table .col.sticky {
    position: sticky;
    left: 0;
    background: rgba(var(--lucida-light));
    border-bottom: 1px solid rgba(var(--lucida-beige));
    border-radius: unset;
    padding-left:0;
    justify-content: flex-start;
    text-align: left;
    z-index: 10;
}

.comparison-table .header .col.sticky,
.comparison-table .pricing .col.sticky {
    border: none;
    border-radius: unset;
}

/* Header styling */
.comparison-table .header .col {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
    padding: 24px 16px;
    border-radius: 26px 26px 0 0;
}
.comparison-table .pricing .col {
    border-radius: 0 0 26px 26px;
}

.comparison-table .col.lucida {
    background: rgba(var(--lucida-hojicha));
    font-weight: 700;
    color: rgba(var(--lucida-light));
}

section.comparison {
    padding-bottom: 80px;
}
section.comparison img.logo {
    height: 29px;
}
section.comparison .section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    align-self: stretch;
}
section.comparison .section-header {
    max-width: 816px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 24px;
}
section.comparison .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
    text-align: center;
}
section.comparison .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
}
section.comparison .table-arrow {
    align-self: flex-end;
    margin-top: -15px;
}
section.comparison .section-footer {
    max-width: 816px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
}
section.comparison .section-footer p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    text-align: center;
}

/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .comparison-table {
        grid-template-columns: 1fr 1fr 16px 1fr 16px 1fr 16px 1fr;
    }
    section.comparison {
        padding-bottom: 56px;
    }
    section.comparison .section-wrapper {
        gap: 32px;
    }
    section.comparison .section-header {
        gap: 16px;
    }
    section.comparison .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.comparison .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.comparison .section-footer p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
}

@media (max-width: 768px) {
    .comparison-table {
        min-width: 850px;
    }

    .comparison-table .col {
        padding: 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .comparison-table {
        min-width: 750px;
    }

    .comparison-table .col {
        padding: 12px;
        font-size: 13px;
    }

    .comparison-table .col.sticky {
        min-width: 150px;
    }
}

section.cta {
    padding-top: 112px;
    padding-bottom: 112px;

    background-image: url("images/mirror-sided-green.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
section.cta .section-wrapper .section-header {
    max-width: 768px;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    margin: 0 auto;
}
section.cta h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
    text-align: center;
}
section.cta p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
}
section.cta .btn-cta-wrapper {
    text-align: center;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.cta {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    section.cta h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.cta .btn-cta, section.cta .btn-cta-wrapper {
        width: 100%;
    }
}

footer section.nav {
    padding-top: 32px;
    padding-bottom: 32px;
}
footer section.nav .section-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
footer section.nav .social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
footer section.nav .social a:hover svg path {
    fill: rgba(var(--lucida-golden));
}
footer section.nav .links {
    display: flex;
    align-items: center;
    gap: 32px;
}
footer section.nav .links a {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    text-decoration: none;
    color: rgba(var(--lucida-light), 0.7);
}
footer section.nav .links a:hover {
    color: rgba(var(--lucida-light), 1);
}
footer section.nav .legal {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    footer section.nav {
        padding-bottom: 16px;
    }
    footer section.nav .section-wrapper {
        align-items: center;
        flex-direction: column;
        gap: 24px;
    }
    footer section.nav .links {
        gap: 16px;
    }
    section.lucida img.logo {
        width: calc(100% + 15px);
        margin-left: -15px;
        margin-bottom: -10px;
    }
}

footer section.lucida {
    overflow: hidden;
}
footer section.lucida h1, h2, h3 {
    margin: 0;
}
footer section.lucida img.logo {
    width: calc(100% + 40px);
    margin-left: -30px;
    margin-bottom: -20px;
}

#embed-pop .modal-content {
    overflow: hidden;
    position: relative;
}
#embed-pop .btn-cta-close {
    position: absolute;
    top: 6px;
    right: 15px;
    z-index: 10;
}
#embed-pop .btn-cta-close button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}
#embed-pop .modal-body {
    padding: 16px;
}
#embed-pop .section-header {

}
#embed-pop .section-header h1 {
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.56px;
}

/** LEGAL **/
section.legal {
    padding-top: 80px;
    padding-bottom: 80px;
}
section.legal .section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
section.legal .section-header {
    display: flex;
    flex-direction: column;
}
section.legal .section-header h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.legal .section-header p {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.legal .section-content {
    display: flex;
    flex-direction: column;
    gap: 34px;
}
section.legal .section-content .intro {
    display:flex;
    flex-direction: column;
    gap: 14px;
}
section.legal .section-content .intro p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.legal .section-content .item {
    display:flex;
    flex-direction: column;
    gap: 6px;
}
section.legal .section-content .item .item-header h2 {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -1.32px;
}
section.legal .section-content .item .item-content {
    display:flex;
    flex-direction: column;
    gap: 14px;
}
section.legal .section-content .item .item-content p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.legal .section-content .sub-item {
    display:flex;
    flex-direction: column;
    gap: 6px;
    padding-left:30px;
}
section.legal .section-content .sub-item .sub-item-header h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -1.32px;
    opacity: 0.9;
}
section.legal .section-content .sub-item .sub-item-content {
    display:flex;
    flex-direction: column;
    gap: 14px;
}
section.legal .section-content .sub-item .sub-item-content p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.legal dl, section.legal ol, section.legal ul {
    margin-bottom: 0;
    padding-left: 15px;

    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.legal {
        padding-top:40px;
    }
    section.legal .section-header h1 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.legal .intro p {
        font-size: 16px;
    }
    section.legal .section-content .item .item-content p {
        font-size: 16px;
    }
    section.legal .section-content .sub-item .sub-item-content p {
        font-size: 16px;
    }
    section.legal .section-content .item .item-header h2 {
        font-size: 24px;
    }
    section.legal .section-content .sub-item .sub-item-header h3 {
        font-size: 21px;
    }
}

/** SERVICES ADDITIONS **/
section.clarityos.clarityos-type02 .section-wrapper .section-header {
    display: flex;
    gap: 16px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-width: 597px;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header h3 {
    text-align: left;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header h2 {
    padding-bottom: 0;
    text-align: left;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header p {
    text-align: left;
    padding-bottom: 0;
}
section.clarityos.clarityos-type02 .section-wrapper .section-header .btn-wrapper {
    text-align: left;
}

/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.clarityos.clarityos-type02 .section-wrapper .section-header {
        flex-direction: column;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header .left {
        align-items: center;
        margin: 0 auto;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header .right {
        align-items: center;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header h3 {
        text-align: center;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header h2 {
        text-align: center;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header p {
        text-align: center;
    }
    section.clarityos.clarityos-type02 .section-wrapper .section-header .btn-wrapper {
        width: 100%;
    }
    section.clarityos .backed-by {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
    .logos-slider .slick-slide {
        margin-right: 32px; /* Reduce margin for mobile */
    }

    section.clarityos .backed-by .logos-wrapper {
        width: 100%; /* Ensure wrapper doesn't overflow */
    }

    section.clarityos .backed-by .logos-wrapper .slick-list {
        overflow: visible; /* Allow proper slide movement */
    }

    /* Constrain logo sizes in mobile */
    .logos-slider .logo {
        max-width: 120px; /* Adjust this value as needed */
        height: auto;
        width: auto;
    }
}
section.clarityos .getting {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    align-self: stretch;
}
section.clarityos .getting .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    max-width: 500px;
}
section.clarityos .getting .header h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.clarityos .getting .header p {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.clarityos .getting .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 64px;
}
section.clarityos .getting .items .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
section.clarityos .getting .items .item .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.clarityos .getting .items .item .description {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.clarityos .getting {
        flex-direction: column;
        gap: 32px;
    }
    section.clarityos .getting .header {
        align-items: center;
        margin: 0 auto;
    }
    section.clarityos .getting .header .tags {
        justify-content: center;
    }
    section.clarityos .getting .header h3 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.28px;
        text-align:center;
    }
    section.clarityos .getting .header p {
        text-align: center;
    }
    section.clarityos .getting .items {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

section.clarityos .who {
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 20px;
}
section.clarityos .who h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 48px */
    letter-spacing: -1.6px;
}
section.clarityos .who .items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}
section.clarityos .who .items .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
section.clarityos .who .items .item .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
section.clarityos .who .items .item .content .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.clarityos .who .items .item .content .description {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.clarityos .who {
        padding: 24px 16px;
        gap: 16px;
    }
    section.clarityos .who h3 {
        font-size: 32px;
        letter-spacing: -1.28px;
    }
    section.clarityos .who .items {
        grid-template-columns: 1fr;
    }
}
section.clarityos .pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}
section.clarityos .pricing h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.clarityos .pricing .pricing-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
section.clarityos .pricing .offer-base {
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 15px;
    border: 1px solid rgba(var(--lucida-dark));
    background: rgba(var(--lucida-beige));
}
section.clarityos .pricing .offer-base .header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}
section.clarityos .pricing .offer-base .header .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
section.clarityos .pricing .offer-base .header .content .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 33.6px */
    letter-spacing: -0.48px;
}
section.clarityos .pricing .offer-base .header .content p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.clarityos .pricing .offer-base .header .price {
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 61.6px */
    letter-spacing: -4px;
}
section.clarityos .pricing .offer-base .features {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
section.clarityos .pricing .offer-base .features .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
section.clarityos .pricing .offer-base .features .items .item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
section.clarityos .pricing .offer-addons {
    border-radius: 15px;
    border: 1px solid rgba(var(--lucida-dark));
    background: rgba(var(--lucida-beige));
}
section.clarityos .pricing .offer-addons .header {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;

    padding: 16px;
}
section.clarityos .pricing .offer-addons .item {
    padding: 16px;

    display: flex;
    align-items: center;
    gap: 32px;
    align-self: stretch;

    border-top: 1px solid rgba(var(--lucida-hojicha), 0.10);
}
section.clarityos .pricing .offer-addons .item .content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
section.clarityos .pricing .offer-addons .item .content .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
section.clarityos .pricing .offer-addons .item .content .description .title {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
section.clarityos .pricing .offer-addons .item .content .description p {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
section.clarityos .pricing .offer-addons .item .price {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.36px;
    align-self: start;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.clarityos .pricing h3 {
        font-size: 32px;
        letter-spacing: -1.28px;
    }
    section.clarityos .pricing .pricing-tables {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    section.clarityos .pricing .offer-base {
        padding: 24px 16px;
        gap: 23px;
    }
    section.clarityos .pricing .offer-base .header {
        gap: 8px;
        flex-direction: column;
    }
    section.clarityos .pricing .offer-base .header .content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }
    section.clarityos .pricing .offer-base .header .price {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.clarityos .pricing .offer-base .features .items {
        gap: 16px;
    }
    section.clarityos .pricing .btn-wrapper {
        width: 100%;
    }
}
section.why {
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: hidden;
}
section.why .section-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 56px;
}
section.why .section-wrapper .section-header {
    max-width: 392px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    margin: 0 auto;
}
section.why .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.why .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
}
section.why .section-wrapper .items {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px 56px;
    align-self: stretch;
    flex-wrap: wrap;
}
section.why .section-wrapper .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    flex: 0 0 calc(30% - 28px);
}
section.why .section-wrapper .item .item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
section.why .section-wrapper .item .item-content .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.why .section-wrapper .item .item-content .description {
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.48px;
    /*opacity: 0.7;*/
}
.why-slider-container .controllers {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    padding-top: 32px;
}
.why-slider-container .controllers button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.why-slider-container .controllers img:hover {
    opacity: 0.60;
}

.why-slider .slick-slider {
    position: relative;
}

.why-slider .slick-carousel {
    width: 100%;
    /* Full width container */
}
.why-slider .slick-slide {
    max-width: 300px !important;
    /* Fixed slide width */
    margin-right: 25px;
    /* 32px space between slides */
    height: auto;
    /* Ensure slides have the same height */
    background: transparent;
}
/* Prevent overflow from extra spacing */
.why-slider .slick-list {
    /*margin: 0 -16px; /* Half of the space to balance the edges */
    overflow: hidden;
    /* Clean edges without overflow */
}

.why-slider .slick-track {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

.why-slider-container .custom-prev.slick-disabled,
.why-slider-container .custom-next.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default !important;
    display: block !important;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.why {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    section.why .section-wrapper {
        gap: 32px;
        flex-direction: column;
    }
    section.why .section-wrapper .section-header {
        justify-content: center;
        align-items: center;
        margin: unset;
    }
    section.why .section-wrapper .section-header h2 {
        text-align: center;
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.why .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
        text-align: center;
    }
    section.why .section-wrapper .item .item-content .description {
        font-size: 24px;
        letter-spacing: -0.36px;
    }
}

section.hero .boom-wrapper {
    max-width: 1014px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin:0 auto;
    padding: 0 20px 48px 20px;
}
section.hero .boom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 0 25px;
}
section.hero .boom span {
    display: inline-block;
    text-align: center;
    font-size: 86px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.hero .boom img {
    flex-shrink: 0;
    width: 160px;
}
section.hero .boom-wrapper h3 {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.hero .boom-wrapper .btn-cta-wrapper {
    display: flex;
    justify-content: center;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.hero .boom-wrapper {
        padding: 0 20px 80px 20px;
        gap: 24px;
    }
    section.hero .boom {
        gap: 0 18px;
    }
    section.hero .boom span {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.hero .boom img {
        width: 78px;
    }
    section.hero .boom-wrapper h3 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }
    section.hero .btn-cta-wrapper, section.hero .btn-cta {
        width: 100%;
    }
}

section.services {
    padding-top: 32px;
    padding-bottom: 56px;
    background: rgba(var(--lucida-light));
}
section.services .section-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}
section.services .section-wrapper .slides {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
section.services .section-wrapper .slides .slide {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 80px;
    align-self: stretch;
    border-radius: 20px;
    background: rgba(var(--lucida-light));
}
section.services .section-wrapper .slides .slide img.slide-image {
    max-width: 600px;
}
section.services .section-wrapper .slides .slide > .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: center;
}
section.services .section-wrapper .slides .slide > .content .slide-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
section.services .section-wrapper .slides .slide > .content .slide-header h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.services .section-wrapper .slides .slide > .content .slide-header h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.services .section-wrapper .slides .slide > .content > p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.8;
}
section.services .section-wrapper .slides .slide > .content > p.outcome {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 1;
}
section.services .section-wrapper .slides .slide > .content > p.outcome b {
    font-weight: 700;
}
section.services .tab-selector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
section.services .tab-selector > .tab {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 7px;
    background: rgba(var(--lucida-light));
    border: 1px solid rgba(var(--lucida-beige));
    cursor: pointer;
}

section.services .tab-selector > .tab.active {
    background: rgba(var(--lucida-white));
    border: 1px solid rgba(var(--lucida-white));
}

section.services .tab-selector > .tab .icon-wrapper {
    display: flex;
    padding: 5.115px;
    align-items: center;
    gap: 6.393px;
    border-radius: 6px;
    background: rgba(var(--lucida-light));
}
section.services .tab-selector > .tab .icon-wrapper img {
    width: 28.77px;
}
section.services .tab-selector > .tab .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
section.services .tab-selector > .tab .content .title {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 39.2px */
    letter-spacing: -0.56px;
}
section.services .tab-selector > .tab .content .description {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.services .tab-selector > .tab .content a.action {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;

    text-decoration: none;
}
section.services .tab-selector > .tab .content a.action:hover {
    opacity: 0.8;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.services {
        background-position: -87px -252px;
        background-size: 332px auto;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    section.services .section-wrapper {
        gap: 32px;
    }

    section.services .section-wrapper .section-header {
        gap: 16px;
    }

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

    section.services .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
    }

    section.services .section-wrapper .slides .slide {
        padding: 16px 16px 32px;
        gap: 24px;
        flex-direction: column;
    }

    section.services .section-wrapper .slides .slide img.slide-image {
        width: 100%;
    }

    section.services .section-wrapper .slides .slide > .content {
        gap: 16px;
        /*order: 1;*/
    }

    section.services .section-wrapper .slides .slide > .content .slide-header h4 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }

    section.services .section-wrapper .slides .slide > .content .slide-header h3 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.28px;
    }

    section.services .section-wrapper .slides .slide > .content > p.outcome {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
    }

}
section.agency {
    padding-top: 56px;
    padding-bottom: 32px;
}
section.agency .section-wrapper {
    display: flex;
    padding: 56px;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    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.agency .section-wrapper .section-header {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
section.agency .section-wrapper .section-header .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
section.agency .section-wrapper .section-header .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-width: 597px;
    text-align: left;
}
section.agency .section-wrapper .section-header h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.agency .section-wrapper .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.agency .section-wrapper .section-header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
}
section.agency .sprint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;

    max-width: 816px;
    margin: 0 auto;
}
section.agency .sprint h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.agency .sprint p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
}
section.agency .sprint-timeline {
    width: 100%;
    position: relative;
}
section.agency .sprint-timeline .progress-stepper-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar completely */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    padding-bottom: 0;
}

section.agency .sprint-timeline .progress-stepper-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
section.agency .sprint-timeline .progress-stepper .step-item {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 284px;
}
section.agency .sprint-timeline .progress-stepper .step-label img {
    cursor: pointer;
}
section.agency .sprint-timeline .description {
    position: absolute;
    top: 100%; /* Position it right below the step-label */
    left: 0;
    right: 0;
    z-index: 10; /* Ensure it appears above other content */

    width: 100%;
    max-width: 284px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(var(--lucida-hojicha));
    white-space: normal;
    margin-top: 16px;

    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    color: rgba(var(--lucida-white));
    text-align: center;
}
section.agency .after-sprint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}
section.agency .after-sprint .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    max-width: 816px;
    margin: 0 auto;
}
section.agency .after-sprint .header h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
    text-align: center;
}
section.agency .after-sprint .header p {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
}
section.agency .after-sprint .tiers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}
section.agency .after-sprint .tiers .item {
    display: flex;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    background-color: rgba(var(--lucida-beige));
    border-radius: 15px;
    border: 1px solid rgba(var(--lucida-dark));

    padding: 32px;
}
section.agency .after-sprint .tiers .item .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.agency .after-sprint .tiers .item .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;

    max-width: 700px;
}
section.agency .after-sprint .tiers .item .content p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    opacity: 0.7;
}
section.agency .after-sprint .tiers .item .content .investment {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
section.agency .after-sprint .tiers .footer {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    text-align: center;
}
section.agency .who {
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 20px;
}
section.agency .who h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 48px */
    letter-spacing: -1.6px;
}
section.agency .who .items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}
section.agency .who .items .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
section.agency .who .items .item .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
section.agency .who .items .item .content .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.48px;
}
section.agency .who .items .item .content .description {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    opacity: 0.7;
}
section.agency .connection {
    padding: 24px 32px;
    border-radius: 20px;
    background-color: rgba(var(--lucida-hojicha));
    background: url("images/mirror-hojicha.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
section.agency .connection h3 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;

    max-width: 373px;
}
section.agency .connection .content {
    max-width: 700px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
section.agency .connection .content p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.agency {
        padding-top: 24px;
        padding-bottom: 0;
    }
    section.agency .container-xxl {
        padding-left: 8px;
        padding-right: 8px;
    }
    section.agency .section-wrapper {
        padding: 24px 16px;
        gap: 32px;
    }
    section.agency .section-wrapper .section-header {
        flex-direction: column;
    }
    section.agency .section-wrapper .section-header .left {
        align-items: center;
        margin: 0 auto;
    }
    section.agency .section-wrapper .section-header .right {
        align-items: center;
    }
    section.agency .section-wrapper .section-header h3 {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
        text-align: center;
    }
    section.agency .section-wrapper .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
        text-align: center;
    }
    section.agency .section-wrapper .section-header p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: unset;
        text-align: center;
    }
    section.agency .section-wrapper .section-header .btn-wrapper {
        width: 100%;
    }
    section.agency .section-wrapper .section-header .btn-cta {
        width: 100%;
    }
    section.agency .after-sprint .header h3 {
        font-size: 32px;
        letter-spacing: -1.28px;
    }
    section.agency .after-sprint .tiers .item {
        gap: 16px;
        flex-direction: column;
        padding: 24px;
    }
    section.agency .after-sprint .tiers .item .title {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.agency .who {
        padding: 24px 16px;
        gap: 16px;
    }
    section.agency .who h3 {
        font-size: 32px;
        letter-spacing: -1.28px;
    }
    section.agency .who .items {
        grid-template-columns: 1fr;
    }
    section.agency .connection {
        flex-direction: column;
        gap: 24px;
    }
    section.agency .connection h3 {
        font-size: 40px;
        letter-spacing: -2px;
    }

    section.agency .connection .content .btn-wrapper {
        width: 100%;
    }
}

section.faq {
    background-color: rgba(var(--lucida-white));
    padding-top: 112px;
    padding-bottom: 112px;
}
section.faq .section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    align-self: stretch;
}
section.faq .section-header h2 {
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
    text-align: center;
}
section.faq .items {
    display: block;
    width: 100%;
}
section.faq .items .accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    align-items:  start;
    --bs-accordion-border-color: #E3D8C2;
    --bs-accordion-border-radius: 10px;
    --bs-accordion-btn-padding-x: 24px;
    --bs-accordion-btn-padding-y: 24px;
    --bs-accordion-bg: white;
    --bs-accordion-btn-bg: white;
    --bs-accordion-btn-active-bg: white;
    --bs-accordion-active-bg: white;
    --bs-accordion-btn-focus-box-shadow: none;
}
section.faq .items > .accordion {
    flex: 1;
    --bs-accordion-border-color: #E3D8C2;
    --bs-accordion-color: rgba(var(--lucida-dark));
    --bs-accordion-border-radius: 10px;
    --bs-accordion-btn-padding-x: 24px;
    --bs-accordion-btn-padding-y: 24px;
    --bs-accordion-bg: white;
    --bs-accordion-btn-bg: white;
    --bs-accordion-btn-active-bg: white;
    --bs-accordion-active-bg: white;
    --bs-accordion-btn-focus-box-shadow: none;
}
section.faq .items > .accordion .accordion-item {
    border: 1px solid var(--bs-accordion-border-color);
    border-radius: var(--bs-accordion-border-radius);
    background-color: white;
    overflow: hidden;
}
/* Hide default Bootstrap arrow */
section.faq .accordion-button::after {
    display: none;
}
/* Add custom SVG arrow */
section.faq .accordion-button {
    position: relative;
    padding-right: 50px;

    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    color: rgba(var(--lucida-dark));
    border: none !important;
}
section.faq .accordion-button:not(.collapsed) {
    color: rgba(var(--lucida-dark));
    box-shadow: none;
    border: none !important;
}
section.faq .accordion-button:hover,
section.faq .accordion-button:focus {
    color: rgba(var(--lucida-dark));
    box-shadow: none;
    border: none !important;
}

section.faq .accordion-button::before {
    content: '';
    position: absolute;
    right: 1rem;
    top: 37px;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22.2295' height='22.2295' rx='6' fill='%23B4833E'/%3E%3Cpath d='M11.2212 14.9448C11.1273 14.9448 11.0513 14.9165 10.9712 14.8364L6.02783 9.89209C5.94584 9.8101 5.91943 9.73623 5.91943 9.64893C5.91946 9.56169 5.94589 9.4877 6.02783 9.40576C6.1059 9.32776 6.18286 9.29736 6.28369 9.29736C6.38429 9.29744 6.46064 9.32794 6.53857 9.40576L6.53955 9.40674L10.8687 13.7104L11.2222 14.062L15.9028 9.38135C15.9806 9.3036 16.0468 9.28174 16.1274 9.28467C16.2217 9.28812 16.3031 9.31971 16.3892 9.40576C16.4673 9.48388 16.4976 9.56073 16.4976 9.66162C16.4975 9.7625 16.4673 9.83937 16.3892 9.91748L11.4702 14.8364C11.3902 14.9164 11.3149 14.9447 11.2212 14.9448Z' fill='%23FDFDFD' stroke='%23FDFDFD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
    border: none !important;
}
section.faq .accordion-collapse {
    border-top: 1px solid var(--bs-accordion-border-color);
}
/* Rotate arrow when accordion is open */
section.faq .accordion-button:not(.collapsed)::before {
    transform: translateY(-50%) rotate(180deg);
}

/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.faq {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    section.faq .section-wrapper {
        gap: 24px;
    }
    section.faq .section-header h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.faq .items .accordion {
        display: grid;
        grid-template-columns: 1fr;
    }
}
section.hero.hero-two-columns {
    padding-bottom: 56px;
}
section.hero.hero-two-columns .hero-wrapper {
    display: flex;
    flex-direction: row;
    gap: 80px;
    justify-content: space-between;
    align-items: flex-end;
}
.tag-headline {
    display: flex;
    padding: 4px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    color: rgba(var(--lucida-light), 0.7);

    border-radius: 900px;
    border: 0.5px solid rgba(var(--lucida-light), 0.3);
    background: rgba(var(--lucida-white), 0.10);
    backdrop-filter: blur(0.5px);
}
section.hero.hero-two-columns .hero-wrapper .hero-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 24px;
}
section.hero.hero-two-columns .hero-wrapper .hero-header h1 {
    font-size: 86px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -4px;
}
section.hero.hero-two-columns .hero-wrapper .content {
    max-width: 382px;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
    opacity: 0.7;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.hero.hero-two-columns .container-xxl {
        padding-top: 100px;
        padding-left:20px;
        padding-right: 20px;
    }
    section.hero.hero-two-columns .hero-wrapper {
        flex-direction: column;
        gap: 24px;
    }
    section.hero.hero-two-columns .hero-wrapper .hero-header h1 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    section.hero.hero-two-columns .hero-wrapper .content {
        font-size: 16px;
        letter-spacing: unset;
        max-width: 100%;
    }
}

section.page-menu {
    padding-top: 32px;
    padding-bottom: 32px;
}
section.page-menu .menu-wrapper {
    display: flex;
    align-items: center;
    gap: 56px;
    justify-content: space-between;
}
section.page-menu .menu-container {
    display: flex;
    align-items: center;
    gap: 56px;
}
section.page-menu .menu-container a {
    text-decoration: underline;
    color: rgba(var(--lucida-hojicha));

    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;

    white-space: nowrap;
}
section.page-menu .menu-container a:hover {
    color: rgba(var(--lucida-golden));
}
/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    section.page-menu .menu-wrapper {
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
    }
    section.page-menu .menu-wrapper::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    section.page-menu .menu-container {
        order: 1;
    }
}

section.quotes {
    padding-top: 80px;
    padding-bottom: 80px;
}
section.quotes .section-wrapper {
    max-width: 991px;
    margin: 0 auto;
}
section.quotes .quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 24px;
}
section.quotes .description {
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.6px;
}
section.quotes .author {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}
section.quotes .author .name {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.36px;
}
section.quotes .author .company {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.36px;
}
/*`lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    section.quotes {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    section.quotes .description {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        letter-spacing: -0.48px;
    }
}


/** 404 **/
section.not-found {
    min-height: 100vh;
    gap: 16px;
    background-color: rgba(var(--lucida-hojicha));
    background-image: url("images/bg-lucida.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
section.not-found .logo {
    height: 36px;
    width: auto;
    margin-bottom: 16px;
}
section.not-found h1 {
    font-size: 120px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -4px;
    margin: 0;
}
section.not-found h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}

/** WP BLOCKS **/
.wp-block-image {
    margin: 0;
}
.wp-block-image img {
    margin-bottom: 16px;
    width: 100%;
}
.wp-block-image :where(figcaption) {
    color: rgba(var(--marissa-dark-blue));
    text-align: right;
    font-family: "Spectral", serif;
    font-size: var(--marissa-text-small);
    font-style: italic;
    font-weight: 300;
    line-height: 150%;
    margin: 0;
}