:root {
    --ink: #172e35;
    --muted: #607177;
    --accent: #65bdd5;
    --accent-dark: #23738a;
    --wash: #eff7f9;
    --line: #dce6e9;
    --heading: "Kumbh Sans",sans-serif;
    --bs-body-font-family: "Red Hat Text",sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: #fff;
    --bs-body-font-size: 1.125rem;
    --bs-body-line-height: 1.75;
    --bs-link-color: var(--accent-dark);
    --bs-link-hover-color: var(--ink)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem
}

body {
    -webkit-font-smoothing: antialiased
}

::selection {
    background: #bae5f0;
    color: var(--ink)
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.045em
}

a {
    text-underline-offset: .23em
}

button, a {
    -webkit-tap-highlight-color: transparent
}

:focus-visible {
    outline: 3px solid var(--accent-dark);
    outline-offset: 5px
}

.site-container {
    --page-edge: clamp(1.25rem,4.4vw,7rem);
    width: 100%;
    max-width: none;
    padding-inline: var(--page-edge)
}

    .site-container > .row {
        --bs-gutter-x: 1.5rem
    }

.icon {
    width: 1.4em;
    height: 1.4em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle
}

.icon-arrow {
    width: 1.2em;
    height: 1.2em
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase
}

    .eyebrow::before {
        content: "";
        width: 1.7rem;
        height: 2px;
        background: var(--accent);
        flex: 0 0 auto
    }

.section-space {
    padding-block: clamp(4.5rem,8.2vw,9rem)
}

.section-title {
    font-size: clamp(2.6rem,5.1vw,6.6rem);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1.08;
    margin: 1.35rem 0 1.7rem
}

.text-muted-custom {
    color: var(--muted)
}

.skip-link {
    position: fixed;
    top: -6rem;
    left: 1rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: #fff;
    color: var(--ink);
    border-radius: .5rem
}

    .skip-link:focus {
        top: 1rem
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    min-height: 3.6rem;
    border-radius: .4rem;
    padding: .85rem 1.45rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    transition: background .2s,color .2s,border-color .2s,transform .2s
}

    .btn:hover {
        transform: translateY(-2px)
    }

.btn-sky {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: #89d1e4;
    --bs-btn-hover-border-color: #89d1e4;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: #a2ddec;
    --bs-btn-active-border-color: #a2ddec
}

.btn-ghost {
    color: #fff;
    border: 1px solid #ffffff69;
    background: #ffffff08
}

    .btn-ghost:hover, .btn-ghost:focus-visible {
        color: var(--ink);
        background: #fff;
        border-color: #fff
    }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none
}

    .text-link .icon {
        transition: transform .2s
    }

    .text-link:hover {
        color: var(--accent-dark)
    }

        .text-link:hover .icon {
            transform: translateX(4px)
        }

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    padding: 1.5rem 0;
    color: #fff;
    transition: background .25s,padding .25s,box-shadow .25s
}

    .site-header.is-scrolled {
        padding: .9rem 0;
        background: #fffffff5;
        color: var(--ink);
        box-shadow: 0 1px 0 #172e3512;
        backdrop-filter: blur(16px)
    }

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0
}

    .brand img {
        display: block;
        width: 248px;
        max-width: 100%;
        height: auto;
        transition: filter .25s
    }

.desktop-nav {
    gap: .3rem
}

    .desktop-nav .nav-link {
        position: relative;
        color: inherit;
        padding: .8rem .85rem;
        font-size: .9rem;
        font-weight: 700
    }

        .desktop-nav .nav-link::before {
            content: "";
            position: absolute;
            left: .85rem;
            right: .85rem;
            bottom: .45rem;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .2s
        }

        .desktop-nav .nav-link:hover::before, .desktop-nav .nav-link[aria-current]::before {
            transform: scaleX(1)
        }

    .desktop-nav .dropdown-toggle::after {
        margin-left: .45rem;
        vertical-align: .2em
    }

    .desktop-nav .dropdown-menu {
        padding: .6rem;
        min-width: 15rem;
        border: 1px solid var(--line);
        border-radius: .65rem;
        box-shadow: 0 18px 50px #172e351c
    }

    .desktop-nav .dropdown-item {
        font-size: .9rem;
        padding: .65rem .8rem;
        border-radius: .3rem;
        color: var(--ink)
    }

        .desktop-nav .dropdown-item:hover, .desktop-nav .dropdown-item:focus {
            color: var(--ink);
            background: var(--wash)
        }

.nav-contact {
    font-size: .9rem;
    margin-left: 1rem;
    color: inherit;
    border-color: currentColor;
    min-height: 2.8rem;
    padding: .65rem 1.1rem
}

    .nav-contact:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--ink)
    }

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    color: inherit;
    background: #ffffff12;
    border: 1px solid #ffffff5c;
    border-radius: .5rem;
    padding: .65rem .8rem;
    font-size: .8rem;
    font-weight: 600
}

    .menu-toggle .icon {
        width: 22px;
        height: 22px
    }

.is-scrolled .menu-toggle {
    border-color: var(--line);
    background: var(--wash)
}

.mobile-menu {
    --bs-offcanvas-width: min(440px,94vw);
    --bs-offcanvas-padding-x: 1.7rem;
    --bs-offcanvas-padding-y: 1.6rem;
    --bs-offcanvas-bg: #fff;
    color: var(--ink);
    border-radius: 1.25rem 0 0 1.25rem;
    border: 0 !important
}

.offcanvas-backdrop {
    background: #0e252e
}

    .offcanvas-backdrop.show {
        opacity: .65
    }

.mobile-menu .offcanvas-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    margin: 0 1.6rem;
    padding: 1.6rem 0 1.3rem
}

.mobile-brand img {
    width: 205px;
    max-width: 100%;
    height: auto
}

.menu-close {
    border: 1px solid var(--line);
    background: var(--wash);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
    margin-left: .75rem
}

.mobile-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding-top: 1.2rem;
    padding-bottom: max(1.6rem,env(safe-area-inset-bottom));
    overscroll-behavior: contain
}

.mobile-nav > a, .mobile-nav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 61px;
    padding: .7rem 0;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--heading);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.035em;
    cursor: pointer
}

.mobile-nav > a, .mobile-nav details {
    border-bottom: 1px solid var(--line)
}

    .mobile-nav > a[aria-current] {
        color: var(--accent-dark)
    }

.mobile-nav summary {
    list-style: none
}

    .mobile-nav summary::-webkit-details-marker {
        display: none
    }

    .mobile-nav summary .icon {
        width: 18px;
        height: 18px;
        transition: transform .2s
    }

.mobile-nav details[open] summary .icon {
    transform: rotate(180deg)
}

.mobile-nav .subnav {
    display: grid;
    padding: .1rem 0 .8rem .85rem;
    border-left: 2px solid var(--accent);
    margin-bottom: .7rem
}

    .mobile-nav .subnav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: .35rem .6rem;
        color: var(--muted);
        text-decoration: none;
        font-size: .95rem
    }

.mobile-nav a:hover {
    color: var(--accent-dark)
}

.mobile-visit {
    margin-top: auto;
    padding-top: 2rem
}

.mobile-visit-inner {
    border-radius: .7rem;
    padding: 1.2rem;
    background: var(--wash)
}

.mobile-visit strong {
    display: block;
    font-family: var(--heading);
    font-size: 1.2rem;
    letter-spacing: -.03em
}

.mobile-visit p {
    font-size: .85rem;
    color: var(--muted);
    margin: .35rem 0 1rem
}

.mobile-social {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    padding: 1.1rem .15rem .25rem
}

    .mobile-social a {
        font-size: .85rem;
        font-weight: 500;
        color: var(--muted);
        padding-block: .3rem
    }

.hero {
    isolation: isolate;
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(780px,100svh,1080px);
    padding: 10.5rem 0 8.5rem;
    color: #fff;
    background: #234652
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,#102832c9 0%,#10283255 80%),linear-gradient(180deg,#10283250 0%,#10283210 40%,#10232dc4 100%)
}

.hero .eyebrow {
    color: #e5f3f6;
    margin-bottom: 1.8rem;
    font-size: .8rem
}

.hero h1 {
    font-size: clamp(2.8rem,9.1vw,11.5rem);
    font-weight: 600;
    line-height: .99;
    margin: 0
}

    .hero h1 > span {
        display: block
    }

.hero .title-accent {
    color: #a3e0ef
}

.hero-verse {
    font-size: clamp(1.1rem,1.7vw,1.55rem);
    color: #f0f6f8;
    margin: 2rem 0 0;
    max-width: 42rem;
    line-height: 1.65
}

    .hero-verse cite {
        display: block;
        font-size: .85rem;
        font-style: normal;
        color: #c2d6de;
        margin-top: .45rem
    }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem
}

.hero-bottom {
    position: absolute;
    bottom: 1.8rem;
    left: 0;
    right: 0
}

.hero-meta {
    font-size: .85rem;
    letter-spacing: .02em;
    color: #d5e4e9
}

    .hero-meta > span {
        display: flex;
        align-items: center;
        gap: .6rem
    }

.hero-bottom .site-container::before {
    content: "";
    position: absolute;
    left: clamp(1.25rem,4.4vw,7rem);
    right: clamp(1.25rem,4.4vw,7rem);
    top: -.95rem;
    height: 1px;
    background: #ffffff35
}

.scroll-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    border: 1px solid #ffffff59;
    border-radius: 50%
}

    .scroll-cue:hover {
        background: #fff;
        color: var(--ink)
    }

.welcome-intro {
    margin-bottom: clamp(2.8rem,4vw,4.8rem)
}

    .welcome-intro .section-title {
        margin-bottom: 0
    }

.welcome-lead {
    font-size: clamp(1.15rem,1.6vw,1.6rem);
    line-height: 1.7;
    color: var(--muted);
    max-width: 36rem;
    margin: 0
}

.welcome-copy .text-link {
    margin-top: 1.4rem
}

.welcome-layout {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
    gap: clamp(1rem,2vw,2rem)
}

.welcome-photo {
    position: relative;
    isolation: isolate;
    margin: 0;
    min-height: 590px;
    border-radius: .85rem;
    overflow: hidden;
    background: #45555b
}

    .welcome-photo img {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 55%;
        transition: transform 1.2s cubic-bezier(.2,.7,.3,1)
    }

    .welcome-photo::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        z-index: -1;
        background: linear-gradient(transparent,#10272fd9)
    }

    .welcome-photo figcaption {
        position: absolute;
        left: clamp(1.4rem,3vw,3rem);
        bottom: clamp(1.4rem,3vw,3rem);
        right: 1.4rem;
        color: #fff
    }

        .welcome-photo figcaption span {
            display: block;
            font-size: .8rem;
            letter-spacing: .03em;
            margin-bottom: .6rem;
            color: #d6e5eb
        }

        .welcome-photo figcaption strong {
            display: block;
            font-family: var(--heading);
            font-weight: 600;
            font-size: clamp(1.8rem,3.1vw,3.7rem);
            line-height: 1.1;
            letter-spacing: -.05em
        }

.service-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.8rem,3.7vw,4.5rem);
    border-radius: .85rem;
    background: var(--ink);
    color: #fff
}

.service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1.2rem
}

    .service-top .eyebrow {
        margin: 0;
        color: #c1d8e0;
        font-size: .8rem
    }

        .service-top .eyebrow::before {
            display: none
        }

.round-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid #a7d5e163;
    color: #a3e0ef;
    flex: 0 0 auto
}

.service-panel h3 {
    margin: .6rem 0 .7rem;
    font-size: clamp(1.3rem,1.8vw,1.8rem);
    letter-spacing: -.035em
}

.service-time {
    font-family: var(--heading);
    font-size: clamp(4rem,6.4vw,8rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.07em;
    margin-bottom: 1.6rem;
    color: #a3e0ef
}

    .service-time span {
        font-size: clamp(1.3rem,1.8vw,1.8rem);
        letter-spacing: -.035em;
        color: #fff
    }

.service-panel p {
    font-size: clamp(1.05rem,1.25vw,1.25rem);
    color: #d1e0e5
}

.service-panel .text-link {
    color: #fff;
    align-self: flex-start;
    padding-bottom: 1.8rem
}

    .service-panel .text-link:hover {
        color: #a3e0ef
    }

.kids-note {
    display: flex;
    align-items: flex-start;
    gap: .95rem;
    border-top: 1px solid #ffffff30;
    padding-top: 1.5rem;
    margin-top: auto
}

    .kids-note > .icon {
        color: #a3e0ef;
        margin-top: .2rem
    }

    .kids-note h4 {
        font-size: 1.1rem;
        letter-spacing: -.025em;
        margin-bottom: .55rem
    }

    .kids-note p {
        font-size: 1rem;
        margin: 0;
        line-height: 1.65
    }

.community {
    background: #eff5f7
}

.community-heading {
    display: grid;
    grid-template-columns: minmax(0,1.85fr) minmax(0,1fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: 3.5rem
}

    .community-heading .section-title {
        margin-bottom: 0
    }

        .community-heading .section-title span {
            color: var(--accent-dark)
        }

    .community-heading .community-lead {
        max-width: 30rem;
        color: var(--muted);
        font-size: clamp(1.1rem,1.4vw,1.4rem);
        margin: 0 0 .5rem
    }

.community-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(1rem,3vw,3rem);
    padding: clamp(2rem,3.3vw,3.6rem) 0;
    border-top: 1px solid #c7d9e0
}

    .community-row:last-child {
        border-bottom: 1px solid #c7d9e0
    }

.row-heading {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem,2.5vw,3rem);
    min-width: 0
}

.row-number {
    color: var(--accent-dark);
    font-size: .85rem;
    font-weight: 600;
    flex: 0 0 auto
}

.community-row h3 {
    font-size: clamp(1.9rem,3.3vw,4rem);
    font-weight: 600;
    letter-spacing: -.055em;
    margin: 0;
    transition: color .2s
}

.community-row p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem,1.3vw,1.3rem);
    max-width: 32rem
}

.row-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.2rem,4.5vw,5rem);
    height: clamp(3.2rem,4.5vw,5rem);
    border: 1px solid #b7cdd6;
    border-radius: 50%;
    color: var(--ink);
    transition: color .2s,background .2s,border-color .2s,transform .3s
}

    .row-link .icon {
        transform: rotate(-40deg)
    }

.community-row:hover .row-link {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: rotate(40deg)
}

.community-row:hover h3 {
    color: var(--accent-dark)
}

.explore-heading {
    margin-bottom: 3rem
}

    .explore-heading h2 {
        font-size: clamp(2.6rem,5.1vw,6.6rem);
        font-weight: 600;
        letter-spacing: -.06em;
        margin: 1.3rem 0 0
    }

.explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    height: 100%;
    padding: clamp(1.6rem,2.8vw,3.7rem);
    border-radius: .85rem;
    background: var(--wash);
    transition: transform .3s
}

    .explore-card > .icon {
        color: var(--accent-dark);
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 3rem
    }

    .explore-card h3 {
        font-size: clamp(1.6rem,2.15vw,3rem);
        font-weight: 600;
        line-height: 1.12;
        letter-spacing: -.045em
    }

    .explore-card p {
        font-size: clamp(1.05rem,1.2vw,1.2rem);
        color: var(--muted);
        margin: .9rem 0 2.4rem
    }

    .explore-card .text-link {
        margin-top: auto;
        justify-content: space-between;
        gap: .6rem
    }

    .explore-card.card-dark {
        background: var(--ink);
        color: #fff
    }

.card-dark > .icon {
    color: var(--accent)
}

.card-dark p {
    color: #beccd1
}

.card-dark .text-link {
    color: #fff
}

    .card-dark .text-link:hover {
        color: var(--accent)
    }

.explore-card.card-outline {
    background: #fff;
    border: 1px solid var(--line)
}

@media (hover:hover) and (pointer:fine) {
    .welcome-photo:hover img {
        transform: scale(1.025)
    }

    .explore-card:hover {
        transform: translateY(-5px)
    }
}

.site-footer {
    background: #10272f;
    color: #fff;
    padding: 4.3rem 0 0
}

.footer-brand img {
    width: 255px;
    max-width: 100%;
    height: auto
}

.footer-intro {
    border-bottom: 1px solid #ffffff21;
    padding-bottom: 2.6rem;
    margin-bottom: 2.8rem
}

.footer-invitation {
    font-family: var(--heading);
    font-size: clamp(1.7rem,3.2vw,3.5rem);
    letter-spacing: -.05em;
    font-weight: 600;
    margin: 0
}

    .footer-invitation span {
        color: #9dd6e6
    }

.site-footer h2 {
    font-family: var(--bs-body-font-family);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1.1rem;
    color: #fff
}

.site-footer a {
    color: #bacbd1;
    text-decoration: none;
    font-size: .92rem
}

    .site-footer a:hover {
        color: #fff;
        text-decoration: underline
    }

.site-footer address {
    font-style: normal;
    margin: 0
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0
}

    .footer-list a {
        display: inline-flex;
        align-items: center;
        padding: .3rem 0;
        min-height: 36px;
        overflow-wrap: anywhere
    }

.footer-route {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
    color: #9dd6e6 !important
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #ffffff21;
    margin-top: 3rem;
    padding: 1.3rem 0
}

    .footer-bottom p {
        color: #a9bdc5;
        font-size: .8rem;
        margin: 0
    }

.social-links {
    display: flex;
    gap: .55rem
}

    .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        border: 1px solid #ffffff30;
        border-radius: 50%;
        color: #fff
    }

        .social-links a:hover {
            background: #ffffff12
        }

.back-top {
    position: fixed;
    right: 1.3rem;
    bottom: 1.3rem;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d8e6ec;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 4px 20px #172e3517
}

    .back-top[hidden] {
        display: none
    }

@media (max-width:1200px) {
    .brand img {
        width: 235px
    }

    .welcome-copy {
        margin-top: 1.7rem
    }

    .welcome-lead {
        max-width: 50rem
    }

    .welcome-photo {
        min-height: 560px
    }

    .welcome-layout {
        grid-template-columns: minmax(0,1.1fr) minmax(0,1fr)
    }

    .community-heading {
        grid-template-columns: 1fr;
        gap: 2rem
    }

        .community-heading .community-lead {
            max-width: 44rem
        }

    .community-row {
        grid-template-columns: minmax(0,1fr) minmax(0,.85fr) auto;
        gap: 1.5rem
    }

    .row-heading {
        gap: 1rem
    }
}

@media (max-width:992px) {
    .welcome-layout {
        grid-template-columns: 1fr
    }

    .welcome-photo {
        min-height: 0;
        aspect-ratio: 16 / 10
    }

    .service-panel {
        padding: 2.4rem
    }

    .service-time {
        font-size: 5.8rem
    }

    .service-panel > p {
        max-width: 35rem
    }

    .kids-note {
        margin-top: .4rem
    }

    .community-row {
        grid-template-columns: minmax(0,1fr) 3.5rem;
        gap: 1rem 1.5rem
    }

        .community-row h3 {
            font-size: clamp(1.65rem,4.3vw,3rem)
        }

        .community-row > p {
            grid-column: 1
        }

        .community-row > .row-link {
            grid-column: 2;
            grid-row: 1 / span 2
        }

    .explore-card {
        min-height: 330px
    }

        .explore-card h3 {
            font-size: clamp(1.8rem,4vw,2.7rem)
        }

        .explore-card > .icon {
            margin-bottom: 2rem
        }
}

@media (max-width:768px) {
    .site-container {
        --page-edge: 1.25rem
    }

    .site-header {
        padding: 1.15rem 0
    }

    .brand img {
        width: 200px
    }

    .hero {
        min-height: 760px;
        padding: 9rem 0 8.5rem
    }

        .hero h1 {
            font-size: clamp(2.75rem,10.1vw,5rem);
            line-height: 1.04
        }

        .hero .eyebrow {
            font-size: .72rem;
            letter-spacing: .12em;
            margin-bottom: 1.5rem
        }

    .hero-verse {
        max-width: 30rem;
        font-size: 1.1rem;
        margin-top: 1.7rem
    }

    .hero-meta {
        font-size: .78rem
    }

        .hero-meta .location {
            display: none
        }

    .hero-bottom {
        bottom: 1.5rem
    }

    .section-title, .explore-heading h2 {
        font-size: clamp(2.45rem,7.9vw,3.8rem)
    }

    .welcome-intro .section-title {
        font-size: clamp(2.65rem,9.2vw,4.4rem)
    }

    .welcome-photo {
        aspect-ratio: 4 / 3
    }

        .welcome-photo figcaption strong {
            font-size: 2rem
        }

    .service-panel {
        padding: 1.8rem
    }

    .service-time {
        font-size: clamp(3.9rem,13vw,5.8rem)
    }

    .community-row {
        grid-template-columns: minmax(0,1fr) 2.8rem;
        gap: .85rem 1rem
    }

    .row-heading {
        display: block
    }

    .row-number {
        display: block;
        margin-bottom: .6rem
    }

    .community-row h3 {
        font-size: clamp(1.4rem,6.4vw,2.7rem)
    }

    .row-link {
        width: 2.8rem;
        height: 2.8rem
    }

    .explore-card {
        padding: 1.8rem
    }

    .footer-intro {
        margin-bottom: 2.2rem
    }

    .footer-invitation {
        margin-top: 1.7rem
    }

    .site-footer {
        padding-top: 3.5rem
    }

    .back-top {
        right: .8rem;
        bottom: .8rem
    }
}

@media (max-width:390px) {
    .site-container {
        --page-edge: 1rem
    }

    .brand img {
        width: 170px
    }

    .menu-toggle {
        gap: .4rem;
        padding: .6rem
    }

    .hero h1 {
        font-size: 2.65rem
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .hero {
        min-height: 790px
    }

    .section-title, .explore-heading h2 {
        font-size: 2.25rem
    }

    .welcome-intro .section-title {
        font-size: 2.55rem
    }

    .service-panel {
        padding: 1.4rem
    }

    .welcome-photo figcaption strong {
        font-size: 1.7rem
    }

    .mobile-menu {
        --bs-offcanvas-padding-x: 1.25rem
    }

    .mobile-brand img {
        width: 165px
    }

    .mobile-menu .offcanvas-header {
        margin-inline: 1.25rem
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }

    .welcome-photo:hover img {
        transform: none
    }
}