.site-photo {
    margin: 0;
    overflow: hidden;
    background: #d7ecee;
}

.site-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
}

.site-photo.hero-photo {
    min-height: 380px;
    box-shadow: 0 22px 60px rgba(45, 88, 93, .18);
}

.site-photo.hero-photo img {
    min-height: 380px;
    aspect-ratio: 4 / 3;
}

.page-hero-about .hero-photo img {
    object-position: center 45%;
}

.content-card .site-photo {
    aspect-ratio: 4 / 3;
}

.content-card .site-photo img {
    min-height: 100%;
}

.site-video-preview {
    position: relative;
    cursor: pointer;
}

.site-video-preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
}

.site-video-preview.is-playing video {
    opacity: 1;
}

.video-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    border: 0;
    background: linear-gradient(transparent 65%, rgba(29, 25, 42, .62));
    color: #fff;
    cursor: pointer;
}

.video-open span {
    padding: .42rem .7rem;
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(29,25,42,.58);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.site-video-preview.is-playing .video-open span {
    opacity: 0;
}

.video-dialog {
    width: fit-content;
    max-width: calc(100% - 2rem);
    overflow: hidden;
    background: #15131d;
}

.video-dialog > div {
    display: flex;
    width: auto;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: #15131d;
}

.video-dialog video {
    display: block;
    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: 86vh;
    object-fit: contain;
    background: #15131d;
}

.content-card .site-button {
    color: #f4ffff;
}

.content-card {
    display: flex;
    flex-direction: column;
}

.content-card .card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
}

@media (min-width: 851px) {
    .page-about .cards-3 .card-copy h3 {
        min-height: 2.45em;
    }
}

.content-card .card-copy .site-button {
    align-self: flex-start;
    margin-top: auto;
}

.card-meta span {
    display: block;
}

.cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-notes {
    margin-top: 1.4rem;
    padding: 1rem 1.2rem;
    background: #effafb;
    border-left: 4px solid var(--brand);
    text-align: left;
}

.section-heading .section-notes p {
    margin: .35rem 0;
    color: var(--ink);
}

.section-heading .section-notes p:last-child {
    color: var(--brand-dark);
    font-weight: 700;
}

.card-rate-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .5rem 0 1.25rem;
}

.card-rate-groups section {
    padding: .85rem;
    background: #effafb;
    border-top: 3px solid var(--brand);
}

.card-rate-groups h4 {
    min-height: 3.1em;
    margin: 0 0 .5rem;
    color: var(--brand-dark);
    font-size: .93rem;
}

.card-rate-groups p {
    margin: .15rem 0;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
}

.site-button {
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.site-button:hover,
.site-button:focus-visible {
    background: #55c2cd;
    box-shadow: 0 7px 18px rgba(23, 125, 136, .22);
    color: #102f33;
    transform: translateY(-2px);
}

.site-button.secondary:hover,
.site-button.secondary:focus-visible {
    background: #e9f9fa;
}

.page-hero-background {
    position: relative;
    display: flex;
    justify-content: flex-start;
    min-height: 650px;
    border-top: 10px solid var(--brand);
    background-color: #bfe9ec;
    background-image: var(--hero-image);
    background-position: center;
    background-size: cover;
}

.page-hero-home.page-hero-background {
    background-image: url("assets/site-photos/hero-home.jpg");
    background-position: center 62%;
}

.page-hero-meet.page-hero-background {
    background-image: url("assets/site-photos/hero-meet.jpg");
}

.page-hero-live.page-hero-background {
    background-image: url("assets/site-photos/hero-live.jpg");
}

.page-hero-about.page-hero-background {
    background-image: url("assets/site-photos/hero-about.jpg");
}

.page-hero-wednesdays.page-hero-background {
    background-image: url("assets/site-photos/hero-wednesdays.jpg");
}

.page-hero-background .hero-panel {
    width: min(650px, 58%);
    padding: clamp(2rem, 5vw, 4rem);
    background: linear-gradient(125deg, rgba(232, 249, 249, .94), rgba(191, 233, 236, .84));
    box-shadow: 0 20px 60px rgba(28, 55, 59, .18);
    backdrop-filter: blur(2px);
}

.hero-panel .site-button {
    color: #fff;
}

.hero-panel .site-button:hover,
.hero-panel .site-button:focus-visible {
    color: #102f33;
}

.hero-contact-link {
    align-self: center;
    padding: .45rem .15rem;
    display: inline-flex;
    align-items: center;
    color: #405c60;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}

.page-about .hero-actions {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 0 1rem;
}

.page-about .hero-locate-action {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}

.page-about .hero-contact-phone {
    grid-column: 2;
    grid-row: 1;
}

.page-about .hero-contact-email {
    grid-column: 3;
    grid-row: 1;
}

.page-about .hero-contact-phone,
.page-about .hero-contact-email {
    padding-bottom: .12rem;
}

.page-about .hero-contact-location {
    grid-column: 2 / 4;
    grid-row: 2;
    align-items: flex-start;
    padding-top: 0;
    line-height: 1.3;
    color: var(--brand-dark);
}

.contact-location-icon {
    width: 1.05em;
    height: 1.05em;
    margin: .18em .38em 0 0;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-contact-link:hover,
.hero-contact-link:focus-visible {
    color: var(--brand-dark);
}

.section-contacts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .7rem 1.6rem;
    margin-top: 1.5rem;
}

.section-contacts a {
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.section-contacts .contact-location {
    display: inline-flex;
    align-items: flex-start;
}

.section-contacts a:hover,
.section-contacts a:focus-visible {
    color: var(--ink);
}

.marketing-footer small {
    margin-top: .35rem;
    color: #aaa5b2;
    font-size: .72rem;
}

.page-wednesdays .section-action {
    margin-top: 2.2rem;
}

.page-wednesdays .section-action .site-button {
    color: #fff;
}

.page-wednesdays .section-action .site-button:hover,
.page-wednesdays .section-action .site-button:focus-visible {
    color: #102f33;
}

.page-home .section-action .site-button {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(63, 58, 77, .09);
}

.page-home .section-action .site-button:hover,
.page-home .section-action .site-button:focus-visible {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 8px 20px rgba(63, 58, 77, .24);
}

@media (max-width: 850px) {
    .marketing-header {
        grid-template-columns: 1fr auto 1fr;
    }

    .marketing-header .marketing-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .marketing-header .marketing-help {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .marketing-header nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .site-photo.hero-photo,
    .site-photo.hero-photo img {
        min-height: 300px;
    }

    .page-hero-background {
        min-height: 600px;
        align-items: flex-end;
        background-position: 55% center;
    }

    .page-hero-background .hero-panel {
        width: min(620px, 92%);
    }
}

@media (max-width: 600px) {
    .page-about .hero-actions {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: .25rem;
    }

    .page-about .hero-locate-action,
    .page-about .hero-contact-phone,
    .page-about .hero-contact-email,
    .page-about .hero-contact-location {
        grid-column: 1;
        grid-row: auto;
    }

    .page-about .hero-locate-action {
        margin-bottom: .4rem;
    }

    .cards-4,
    .card-rate-groups {
        grid-template-columns: 1fr;
    }

    .card-rate-groups h4 {
        min-height: 0;
    }

    .page-hero-background {
        min-height: 660px;
        padding: 2rem 1.25rem;
    }

    .page-hero-background .hero-panel {
        width: 100%;
        padding: 1.6rem;
        background: linear-gradient(125deg, rgba(232, 249, 249, .95), rgba(191, 233, 236, .9));
    }
}