:root {
    --teal: #0e7c86;
    --teal-d: #0a5d65;
    --navy: #0b2e3a;
    --mint: #e8f5f2;
    --ink: #33474f;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Figtree',system-ui,sans-serif;
    color: var(--ink);
    overflow-x: hidden;
}

h1, h2, h3 {
    color: var(--navy);
    letter-spacing: -.02em;
}

.container-x {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section {
    padding: 4rem 0;
}

@media (min-width:1024px) {
    .section {
        padding: 6rem 0;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: .2s;
}

.btn-primary {
    background: var(--teal);
    color: #fff;
}

.btn-primary:hover {
    background: var(--teal-d);
    transform: translateY(-1px);
}

.btn-secondary {
    border: 2px solid var(--teal);
    color: var(--teal);
}

.btn-secondary:hover {
    background: var(--mint);
}

.btn-light {
    background: #fff;
    color: var(--navy);
}

.btn-light:hover {
    background: var(--mint);
}

.header-call {
    flex: 0 0 auto;
    gap: .375rem;
    min-height: 44px;
    padding: .5rem .625rem;
    font-size: .75rem;
    white-space: nowrap;
}

.header-call-number {
    display: inline;
}

@media (max-width:380px) {
    .header-brand-name {
        display: none;
    }
}

@media (min-width:640px) {
    .header-call {
        gap: .5rem;
        padding: .75rem 1.5rem;
        font-size: 1rem;
    }
}

.card {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 30px rgba(11,46,58,.08);
    transition: .25s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(11,46,58,.14);
}

.ph {
    background: linear-gradient(135deg,#bfe6e0,#e8f5f2);
    overflow: hidden;
    border-radius: 1.5rem;
}

.ph-transparent {
    background: transparent;
}

.ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}

.ph-transparent img {
    object-fit: contain;
}

.ph:hover img {
    transform: scale(1.04);
}

/* Google Calendar's overlay is transparent, so match its backdrop to the time-slot area. */
.hur54b {
    background-color: #fff !important;
}

:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: .6s;
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

.nav-link {
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 600;
}

.nav-link:hover, .nav-link[aria-current] {
    background: var(--mint);
    color: var(--teal);
}

#menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}

#menu.open {
    max-height: 420px;
}

.field {
    width: 100%;
    border: 1.5px solid #cfdde0;
    border-radius: .75rem;
    padding: .8rem 1rem;
}

.field[aria-invalid=true] {
    border-color: #c0392b;
}

.err {
    color: #c0392b;
    font-size: .875rem;
    margin-top: .25rem;
}

.track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
}

.track>* {
    scroll-snap-align: start;
    flex: 0 0 85%;
}

@media (min-width:1024px) {
    .track>* {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none!important;
        animation: none!important;
        scroll-behavior: auto!important;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}