:root {
    color-scheme: light;
    --brand: #02b2a7;
    --surface: #f7fdfb;
}

* {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: #fff;
    color: #555;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
picture {
    display: block;
}
a {
    -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
    outline: 3px solid #153f42;
    outline-offset: 5px;
}
.page {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.site-header {
    position: relative;
}
.brand-link {
    position: absolute;
    left: 2.083333%;
    top: 23.636364%;
    width: 15.520833%;
    height: 53.636364%;
}
.hero {
    margin: 0;
}
.cta {
    position: relative;
    aspect-ratio: 1920 / 350;
    background: var(--brand);
}
.cta-title {
    position: absolute;
    left: 21.822917%;
    top: 17.428571%;
    width: 56.354167%;
    margin: 0;
}
.cta-link {
    position: absolute;
    top: 31.142857%;
    width: 41.770833%;
    transition: opacity 160ms ease;
    border-radius: 999px;
}
.cta-link:hover {
    opacity: 0.8;
}
.cta-entry {
    left: 8.541667%;
}
.cta-contact {
    left: 49.895833%;
}
.mobile-points {
    display: none;
}
.site-footer {
    display: block;
}

@media (max-width: 767px) {
    .brand-link {
        left: 3.125%;
        width: 46.71875%;
    }
    .cta {
        aspect-ratio: 640 / 570;
    }
    .cta-title {
        left: 5.46875%;
        top: 11.052632%;
        width: 89.21875%;
    }
    .cta-link {
        width: 95.15625%;
        left: 2.5%;
    }
    .cta-entry {
        top: 31.578947%;
    }
    .cta-contact {
        top: 62.631579%;
    }
    .mobile-points {
        display: block;
        background: var(--surface);
        overflow: hidden;
    }
    .points-track {
        display: flex;
        gap: 3.125vw;
        margin: 0;
        padding: 0 4.6875%;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .points-track::-webkit-scrollbar {
        display: none;
    }
    .point-slide {
        flex: 0 0 calc(100vw * 564 / 640);
        scroll-snap-align: center;
    }
    .points-dots {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 1.25vw;
        height: 25.78125vw;
        padding-top: 7.03125vw;
    }
    .point-dot {
        display: grid;
        place-items: start center;
        padding: 0;
        width: 3.125vw;
        height: 6.875vw;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .point-dot::before {
        content: "";
        display: block;
        width: 2.1875vw;
        height: 2.1875vw;
        border: 1px solid var(--brand);
        border-radius: 50%;
        background: #fff;
    }
    .point-dot[aria-current="true"]::before {
        background: var(--brand);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-link {
        transition: none;
    }
}