@font-face {
    font-family: 'DIN Next Pro';
    font-style: normal;
    font-weight: 200 500;
    src: url('https://stgeorgethrivetest.my.canva.site/st-george-thrive-website/_assets/fonts/f5b8c824aca3530e31347793805ade0b.woff') format('woff');
    font-display: swap
}

@font-face {
    font-family: 'DIN Next Pro';
    font-style: normal;
    font-weight: 600 900;
    src: url('https://stgeorgethrivetest.my.canva.site/st-george-thrive-website/_assets/fonts/07ab6b0c3a056ce9f3c78a496e983d81.woff') format('woff');
    font-display: swap
}

:root {
    --ink: #231f20;
    --cream: #f6f1e7;
    --teal: #008ba2;
    --sky: #0cc0df;
    --orange: #f3941e;
    --gold: #ffc107;
    --white: #fff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body, input, select, button, .leaflet-container {
    margin: 0;
    color: var(--ink);
    font-family: 'DIN Next Pro','Arial Narrow',Arial,sans-serif
}

body {
    font-size: 1.04rem;
    line-height: 1.55;
    background: var(--cream)
}

a {
    color: inherit
}

h1, h2, p {
    margin-top: 0
}

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

.eyebrow {
    font-weight: 800;
    font-size: 1.2em;
    letter-spacing: .10em;
    text-shadow: 1px 1px black;
}

.hero-home {
    position: relative;
    min-height: calc(100svh - 72px);
    overflow: hidden;
    color: #fff;
    background: linear-gradient(90deg,rgba(16,13,12,.88),rgba(16,13,12,.60) 49%,rgba(16,13,12,.42)),url('images/desert-flower.jpg') 60% center/cover no-repeat
}

    .hero-home:after {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(0deg,rgba(0,0,0,.35),transparent 50%);
        pointer-events: none
    }

.location-section {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0,.88fr) minmax(420px,1fr);
    align-items: center;
    gap: clamp(3rem,7vw,8rem);
    width: min(1440px,100%);
    min-height: inherit;
    margin: auto;
    padding: clamp(6.5rem,10vw,9.5rem) clamp(1.5rem,7vw,7rem) clamp(4rem,7vw,7rem)
}

.section-intro {
    max-width: 650px
}

    .section-intro .eyebrow {
        color: #75e7f1
    }

    .section-intro h1 {
        max-width: 720px;
        margin-bottom: 1.5rem;
        font-size: clamp(3.6rem,6.7vw,7.2rem);
        font-weight: 900;
        line-height: .84;
        letter-spacing: -.055em;
        text-transform: uppercase
    }

        .section-intro h1 span, .map-page-header h1 span {
            color: var(--gold)
        }

    .section-intro > p:not(.eyebrow) {
        max-width: 560px;
        margin-bottom: 1.6rem;
        color: rgba(255,255,255,.9);
        font-size: 1.1rem
    }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: .25rem;
    border-bottom: 3px solid var(--gold);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-decoration: none;
    text-transform: uppercase
}

    .text-link:hover {
        color: var(--gold)
    }
.form-wrap {
    position: relative;
    max-width: 650px;
    padding: clamp(1.6rem,4vw,3rem);
    color: var(--ink);
    background: rgba(246,241,231,.96);
    box-shadow: 18px 18px 0 rgba(0,139,162,.9)
}

    .form-wrap:before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 9px;
        content: "";
        background: linear-gradient(90deg,var(--teal) 0 42%,var(--orange) 42% 68%,var(--gold) 68%)
    }

.form-heading {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.7rem
}

    .form-heading .eyebrow {
        margin: 0;
        color: var(--teal)
    }

    .form-heading h2 {
        margin: .2rem 0 0;
        font-size: clamp(1.55rem,2.6vw,2.25rem);
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase
    }

.field-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 1rem
}

.field {
    margin-bottom: 1rem
}

    .field label {
        display: block;
        margin-bottom: .35rem;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase
    }

        .field label span {
            color: darkred;
            font-style: italic;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none
        }

    .field input, .field select {
        width: 100%;
        height: 52px;
        padding: 0 .9rem;
        border: 2px solid #9f9a91;
        border-radius: 0;
        background: #fff;
        color: var(--ink);
        font-size: 1rem;
        outline: 0
    }

        .field input:focus, .field select:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(0,139,162,.18)
        }

.validation-message, .error-note {
    display: block;
    margin-top: .25rem;
    color: #a43b2d;
    font-size: .76rem
}

.submit-button, .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: .35rem;
    padding: .75rem 1.25rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--gold);
    box-shadow: 5px 5px 0 var(--ink);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .15s
}

    .submit-button:hover, .cta-button:hover {
        background: #ffd637;
        box-shadow: 2px 2px 0 var(--ink);
        transform: translate(3px,3px)
    }

    .submit-button:disabled {
        opacity: .6
    }

.status-note {
    padding: 2rem;
    border-left: 6px solid var(--gold);
    background: #fff
}

.success-note {
    display: grid;
    gap: .35rem;
    padding: 1.5rem;
    border-left: 6px solid var(--teal);
    background: #fff
}

    .success-note strong {
        font-size: 1.7rem;
        font-weight: 900;
        text-transform: uppercase
    }

    .success-note a {
        color: var(--teal);
        font-weight: 800
    }

.story-band {
    display: grid;
    grid-template-columns: auto minmax(260px,.8fr) minmax(300px,1fr);
    align-items: center;
    gap: clamp(1.5rem,5vw,5rem);
    padding: clamp(4.5rem,8vw,8rem) clamp(1.5rem,8vw,8rem);
    background: var(--cream);
    border-top: 12px solid var(--teal);
}

.story-number {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 3px solid var(--ink);
    font-weight: 900
}

.story-band .eyebrow {
    margin: 0;
    color: var(--teal)
}

.story-band h2 {
    margin: .25rem 0 0;
    font-size: clamp(2.4rem,4.5vw,5rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.04em;
    text-transform: uppercase
}

.story-band > p {
    margin: 0;
    color: #5b5753;
    font-size: 1.55rem;
    line-height: 1.75;
}

footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 3.2rem clamp(1.5rem,8vw,8rem);
    border-top: 10px solid var(--gold);
    background: #000;
    color: #fff
}

.footer-brand {
    width: 155px
}

    .footer-brand img {
        display: block;
        width: 100%
    }

footer nav {
    display: flex;
    gap: 1.6rem
}

    footer nav a {
        font-size: 1em;
        font-weight: 800;
        letter-spacing: .1em;
        text-decoration: none;
        text-transform: uppercase
    }

        footer nav a:hover {
            color: var(--sky)
        }

footer > p {
    margin: 0;
    color: #aaa;
    font-size: 1rem;
    text-align: right
}

.map-page {
    min-height: calc(100vh - 72px);
    padding: 0 clamp(1.5rem,6vw,6rem) clamp(4rem,7vw,7rem);
    overflow: hidden;
    background: var(--cream)
}

.map-page-header {
    position: relative;
    min-height: clamp(380px,72vh,780px);
    margin: 0 calc(clamp(1.5rem,6vw,6rem)*-1) 3.5rem;
    overflow: hidden;
    border-bottom: 12px solid var(--gold);
    color: #fff;
    background: linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.08) 62%),url('https://stgeorgethrivetest.my.canva.site/st-george-thrive-website/_assets/video/794738cea8028670652e650ee180eac8.jpg') center/cover no-repeat
}

.map-page-header-copy {
    position: absolute;
    z-index: 3;
    right: clamp(1.5rem,7vw,8rem);
    bottom: clamp(3rem,7vw,6rem);
    left: clamp(1.5rem,7vw,8rem);
    max-width: 920px
}

.map-page-header .eyebrow {
    color: #78e9f1
}

.map-page-header h1 {
    margin-bottom: 1.1rem;
    font-size: clamp(3.5rem,7vw,7rem);
    font-weight: 900;
    line-height: .84;
    letter-spacing: -.05em;
    text-transform: uppercase
}

.map-page-header-copy > p:last-child {
    max-width: 610px;
    margin: 0;
    font-size: 1.12rem;
    text-shadow: 0 2px 8px #000
}

.city-map {
    min-height: 560px;
    margin-top: 2rem;
    border: 8px solid #fff;
    box-shadow: 0 18px 55px rgba(52,38,24,.15)
}

.city-grid-section {
    margin-top: 3.5rem !important
}

    .city-grid-section h2 {
        margin-bottom: 1rem;
        font-size: clamp(2rem,4vw,3.2rem);
        font-weight: 900;
        text-transform: uppercase
    }

.table {
    margin: 0;
    background: #fff;
    box-shadow: 0 12px 35px rgba(52,38,24,.09)
}

    .table th {
        padding: 1rem 1.25rem !important;
        border: 0 !important;
        background: var(--ink) !important;
        color: #fff !important;
        font-size: .72rem;
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .table td {
        padding: 1rem 1.25rem !important;
        border-color: #e5ded0 !important
    }

.city-users-link {
    color: #007d88;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .3rem;
    cursor: pointer
}

    .city-users-link:hover {
        color: #b7513e
    }

.users-modal-backdrop {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(10,10,10,.75);
    backdrop-filter: blur(5px)
}

.users-modal {
    position: relative;
    width: min(560px,100%);
    max-height: 85vh;
    overflow: auto;
    padding: 2.25rem;
    border-top: 9px solid var(--teal);
    background: #fff;
    box-shadow: 0 25px 80px #000
}

    .users-modal:before {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 9px;
        content: "";
        background: linear-gradient(90deg,var(--orange) 0 50%,var(--gold) 50%)
    }

    .users-modal h2 {
        padding-right: 2rem;
        font-size: 2rem;
        font-weight: 900;
        text-transform: uppercase
    }

.users-modal-close {
    position: absolute;
    z-index: 2;
    top: .7rem;
    right: .8rem;
    border: 0;
    background: transparent;
    font-size: 2rem;
    cursor: pointer
}

.users-list {
    display: grid;
    gap: .75rem
}

.users-list-item {
    display: grid;
    grid-template-columns: minmax(110px,.45fr) 1fr;
    gap: 1rem;
    padding: 1rem;
    border-top: 4px solid var(--gold);
    background: var(--cream)
}

    .users-list-item a {
        color: var(--teal);
        overflow-wrap: anywhere
    }

@media(max-width:800px) {
    .location-section {
        grid-template-columns: 1fr;
        gap: 2.7rem;
        padding-top: 6rem
    }

    .section-intro h1 {
        font-size: clamp(3.3rem,15vw,5rem)
    }

    .form-wrap {
        box-shadow: 10px 10px 0 rgba(0,139,162,.9)
    }

    .story-band {
        grid-template-columns: auto 1fr
    }

        .story-band > p {
            grid-column: 1/-1
        }

    .map-page-header {
        min-height: 380px;
        background-position: 58% center
    }

        .map-page-header h1 {
            font-size: clamp(3.1rem,15vw,5rem)
        }

    .city-map {
        min-height: 430px;
        border-width: 4px
    }

    footer {
        grid-template-columns: 1fr
    }

        footer > p {
            text-align: left
        }
}

@media(max-width:520px) {
    .field-row {
        grid-template-columns: 1fr 105px
    }

    .form-wrap {
        padding: 1.5rem 1.15rem
    }

    .form-heading {
        gap: .8rem
    }

    .story-band {
        grid-template-columns: 1fr
    }

    .story-number {
        width: 58px;
        height: 58px
    }

    .users-list-item {
        grid-template-columns: 1fr
    }
}

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

    .submit-button, .cta-button {
        transition: none
    }
}