:root {
    --blue: #0b4f86;
    --blue-dark: #062b4f;
    --blue-soft: #eef7ff;
    --red: #b42318;
    --red-dark: #8f1d14;
    --text: #1f2937;
    --muted: #475467;
    --border: rgba(8, 47, 87, .12);
    --radius-sm: 0.75rem; /* 12px */
    --radius-md: 1rem; /* 16px */
    --radius-lg: 1.5rem; /* 24px */
    --radius-xl: 2rem; /* 32px */
}

body {
    font-optical-sizing: auto;
    font-style: normal;
    background: #fff;
    color: var(--text);
    font-family: 'Source Sans 3', sans-serif;
}

h1, h2, h3, h4, h5, h6, .display-6, .display-4, .display-3, .display-5, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Montserrat", serif;
    font-style: normal;
    letter-spacing: .02em;
    font-weight: 800;
    color: var(--blue-dark);
    /*text-transform: uppercase;*/
}

#main-menu {
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

#main-menu .nav-link {
    color: var(--blue);
    font-weight: 700;
    font-size: .95rem;
    padding: .7rem .85rem;
    border-radius: 999px;
    position: relative;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

    #main-menu .nav-link:hover,
    #main-menu .nav-link:focus {
        background: var(--blue-soft);
        transform: translateY(-1px);
    }

    #main-menu .nav-link.active {
        background: var(--blue);
        color: #fff;
        box-shadow: 0 9px 18px rgba(5,44,131,.18);
    }

.navbar-brand {
    text-decoration: none;
    line-height: .95;
}

    .navbar-brand .brand-city-small {
        display: block;
        color: var(--red);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .navbar-brand .brand-city {
        display: block;
        color: var(--blue);
        font-family: "Montserrat", sans-serif;
        font-size: 2.25rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -.04em;
    }

    .navbar-brand .brand-authority {
        display: block;
        color: var(--muted);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

        .navbar-brand .brand-authority::before {
            content: "";
            display: inline-block;
            width: 32px;
            height: 3px;
            background: var(--red);
            margin-right: .5rem;
            vertical-align: middle;
        }

#footer {
    background: radial-gradient(circle at top left, #0b4f86 0%, #062b4f 42%, #031a31 100%);
    color: rgba(255,255,255,.82);
}

    #footer::before {
        content: "";
        display: block;
        height: 6px;
        background: linear-gradient(90deg, var(--red), var(--blue));
    }

.footer-brand {
    line-height: .95;
}

.footer-city-small {
    display: block;
    color: var(--red);
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .95rem;
}

.footer-city {
    display: block;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: -.04em;
}

.footer-authority {
    display: block;
    color: rgba(255,255,255,.55);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .9rem;
}

    .footer-authority::before {
        content: "";
        display: inline-block;
        width: 46px;
        height: 3px;
        background: var(--red);
        margin-right: .65rem;
        vertical-align: middle;
    }

.footer-heading {
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1rem;
}

    .footer-heading::after {
        content: "";
        display: block;
        width: 36px;
        height: 3px;
        background: var(--red);
        margin-top: .55rem;
    }

.footer-text {
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

    .footer-text strong {
        color: #fff;
    }

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

    .footer-links li + li {
        margin-top: .45rem;
    }

    .footer-links a {
        color: rgba(255,255,255,.78);
        text-decoration: none;
        font-weight: 600;
        transition: color .2s ease;
    }

        .footer-links a:hover {
            color: #fff;
        }

.footer-access-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .footer-access-icons img {
        max-width: 58px;
        filter: brightness(0) invert(1);
    }

    .footer-access-icons i {
        font-size: 2.8rem;
        color: #fff;
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 1.25rem 0;
    color: rgba(255,255,255,.68);
    font-size: .9rem;
}

    .footer-bottom a {
        color: #fff;
        font-weight: 800;
        text-decoration: none;
    }

.section-kicker {
    color: var(--red);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: .8rem;
    font-family: "Montserrat", serif;
    font-style: normal;
}

.section-title {
    color: var(--blue-dark);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 950;
}

.bg-soft-blue {
    background: var(--blue-soft);
}

.bg-blue-dark{
    background-color: var(--blue-dark);
}

.text-red{
    color: var(--red-dark);
}

.text-blue-dark{
    color: var(--blue-dark);
}

.alert, .list-group {
    border-radius: var(--radius-lg);
}

.btn {
    border-radius: var(--radius-md);
}

.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-dark);
    --bs-btn-hover-border-color: var(--red-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-dark);
    --bs-btn-active-border-color: var(--red-dark);
    --bs-btn-font-weight: 800;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue-dark);
    --bs-btn-hover-border-color: var(--blue-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue-dark);
    --bs-btn-active-border-color: var(--blue-dark);
    --bs-btn-font-weight: 800;
}

.btn-outline-blue {
    --bs-btn-color: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-font-weight: 800;
}

.btn-custom {
    background-color: #820302;
    color: #f8f9fa;
}

    .btn-custom:hover {
        background-color: #690202;
        border-color: #690202;
        color: #f8f9fa;
    }

    .btn-custom:not(:disabled):active {
        background-color: #820302 !important;
        border-color: #820302 !important;
        color: #f8f9fa;
    }

.card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.card-shadow {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(10, 35, 66, 0.05) 0px 20px 25px -5px, rgba(10, 35, 66, 0.05) 0px 8px 10px -6px;
}

#carouselHome {
    position: relative;
    overflow: hidden;
    background: var(--blue-dark);
}

    #carouselHome .carousel-item {
        position: relative;
        height: clamp(520px, 62vw, 720px);
        background: var(--blue-dark);
    }

        #carouselHome .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: relative;
            z-index: 0;
            display: block;
        }

/* Blue overlay */
    #carouselHome .carousel-item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient( 90deg, rgba(6, 43, 79, 0.70), rgba(6, 43, 79, 0.75), rgba(6, 43, 79, 0.10) );
    }

/* Red/blue bottom accent line */
#carouselHome::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 8px;
    z-index: 4;
    background: linear-gradient(90deg, var(--red), var(--blue));
}

/* Hero text */
.hero-copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    pointer-events: none;
}

    .hero-copy .container {
        pointer-events: auto;
    }

.hero-copy-inner {
    max-width: 740px;
    color: #fff;
}

.hero-brand {
    line-height: .9;
}

.hero-brand-city {
    display: block;
    color: #fff;
    font-size: clamp(.85rem, 1.3vw, 1.05rem);
    font-weight: 900;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero-brand-housing {
    display: block;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.75rem, 8vw, 6.25rem);
    font-weight: 950;
    line-height: .82;
    /*letter-spacing: -.08em;*/
    text-transform: uppercase;
}

.hero-brand-authority {
    display: block;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 900;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 5px solid var(--red);
    width: fit-content;
}

.hero-tagline {
    color: rgba(255,255,255,.95);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 600px;
    margin-top: 2rem;
}

/* Controls */
#carouselHome .carousel-control-prev,
#carouselHome .carousel-control-next {
    z-index: 5;
    width: 5rem;
}

#carouselHome .carousel-control-prev-icon,
#carouselHome .carousel-control-next-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-size: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
}

    #carouselHome .carousel-control-prev-icon:hover,
    #carouselHome .carousel-control-next-icon:hover {
        background-color: rgba(255, 255, 255, 0.32);
        transform: scale(1.05);
    }

/* Mobile */
@media (max-width: 991px) {
    #carouselHome .carousel-item {
        height: 620px;
    }
}

@media (max-width: 575px) {
    #carouselHome .carousel-item {
        height: 560px;
    }
}

.page-hero {
    position: relative;
    background-image: url("images/families/lg/family3.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 7rem 0;
    background-color: var(--blue-dark);
}

    .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(6, 43, 79, 0.70), rgba(6, 43, 79, 0.75), rgba(6, 43, 79, 0.10) );
    }

    .page-hero .container {
        position: relative;
        z-index: 1;
    }

    .page-hero:after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 8px;
        background: linear-gradient(90deg,var(--red),var(--blue));
    }

.page-title {
    font-size: clamp(2.75rem,6vw,4.9rem);
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.065em;
}

.quick-actions {
    position: relative;
    z-index: 5;
    margin-top: -68px;
}

.action-card {
    display: block;
    height: 100%;
    padding: 1.45rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .13);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .action-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 28px 60px rgba(15, 23, 42, .18);
    }

.news-list a {
    color: var(--blue-dark);
    text-decoration: none;
    font-weight: 800
}

.news-list .list-group-item {
    border-radius: 0;
    padding: 1rem 1rem;
    transition: background-color .2s ease;
}

    .news-list .list-group-item:hover {
        background-color: var(--blue-soft);
    }

.news-list .list-group-item a {
    color: var(--blue-dark);
    text-decoration: none;
    font-weight: 800;
}

.news-list .list-group-item .fa-arrow-right {
    transition: transform 0.25s ease;
}

.news-list .list-group-item:hover .fa-arrow-right {
    transform: translateX(4px);
}

.icon-badge {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    border-radius: 17px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: var(--blue-soft);
    color: var(--blue);
}

.icon-badge-red {
    background: rgba(180,35,24,.12);
    color: var(--red-dark);
}

.community-collage {
    position: relative;
    min-height: 520px;
}

.community-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #fff;
    border: 8px solid #fff;
    box-shadow: 0 26px 58px rgba(15, 23, 42, .18);
}

    .community-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.03) contrast(1.03);
    }

    .community-photo.back {
        top: 0;
        right: 0;
        width: 72%;
        height: 72%;
        opacity: .96;
    }

    .community-photo.front {
        left: 0;
        bottom: 5%;
        width: 62%;
        height: 52%;
        z-index: 2;
    }

    .community-photo.small {
        right: 5%;
        bottom: 0;
        width: 42%;
        height: 34%;
        z-index: 3;
    }

.director-photo {
    border-radius: 2rem;
    background: linear-gradient(0deg,rgba(6,43,79,.18),rgba(6,43,79,.18)),url("images/robertcopy.jpg") top/cover no-repeat;
    min-height: 520px;
    box-shadow: 0 24px 58px rgba(15,23,42,.16);
    border: 8px solid #fff
}

.property-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--blue-soft);
}

.map-frame {
    border: 0;
    width: 100%;
    min-height: 460px
}

.policy-card {
    transition: transform .18s ease,box-shadow .18s ease
}

a .policy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15,23,42,.14) !important
}

.policy-list {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.policy-list .list-group-item {
    border-color: rgba(6,43,79,.12);
    transition: background-color .18s ease, transform .18s ease;
}

    .policy-list .list-group-item:hover {
        background: var(--blue-soft);
    }

.policy-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: inline-grid;
    place-items: center;
    background: rgba(180,35,24,.12);
    color: var(--red-dark);
    flex: 0 0 auto;
}

.policy-download {
    color: var(--red-dark);
    font-weight: 800;
    white-space: nowrap;
}

.resource-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.resource-section {
    scroll-margin-top: 130px;
}

.resource-tile {
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(6,43,79,.14);
    color: var(--text);
    text-decoration: none;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

    .resource-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(15,23,42,.1);
        border-color: rgba(180,35,24,.35);
        color: var(--blue-dark);
    }

    .resource-tile strong {
        color: var(--blue-dark);
        display: block;
        line-height: 1.2;
    }

    .resource-tile small {
        color: var(--muted);
        display: block;
        margin-top: .25rem;
        font-weight: 600;
    }

.resource-arrow {
    color: var(--red-dark);
    flex: 0 0 auto;
    padding-top: .1rem;
}

.info-band {
    color: #fff;
    border-radius: var(--radius-xl);
    background: linear-gradient(110deg,rgba(6,43,79,.96),rgba(11,79,134,.88)),url("images/family-info.jpg") center/cover no-repeat
}

.season-highlight {
    display: flex;
    gap: .85rem;
    height: 100%;
    padding: 1rem;
    background: var(--blue-soft);
    border-radius: var(--radius-md);
}

    .season-highlight i {
        font-size: 1.25rem;
        margin-top: .2rem;
        flex: 0 0 auto;
    }

    .season-highlight strong {
        display: block;
        color: var(--blue-dark);
        font-weight: 800;
        margin-bottom: .25rem;
    }

    .season-highlight span {
        display: block;
        color: var(--muted);
        line-height: 1.45;
    }

.senior-portrait-gallery {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.senior-photo {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 8px solid #fff;
    box-shadow: 0 20px 50px rgba(15,23,42,.18);
}

    .senior-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

.photo-right {
    margin-top: 3rem;
}

.activity-pill {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1rem;
    height: 100%;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

    .activity-pill i {
        color: var(--red-dark);
        margin-top: .15rem;
    }

.youth-photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
}

.youth-photo {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border-radius: var(--radius-lg);
    background: var(--blue-soft);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .13);
}

    .youth-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.youth-photo-large,
.youth-photo-wide {
    grid-column: auto;
    grid-row: auto;
}

@media (min-width: 576px) {
    .youth-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }

    .youth-photo {
        min-height: auto;
    }

    .youth-photo-large,
    .youth-photo-wide {
        grid-column: span 2;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .youth-photo-grid {
        grid-template-columns: 1.35fr 1fr 1fr;
        grid-auto-rows: 230px;
    }

    .youth-photo-large {
        grid-column: auto;
        grid-row: span 2;
    }

    .youth-photo-wide {
        grid-column: span 2;
    }
}