/* =========================================================
   OLDPUG GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
    --pine: #0d3f34;
    --pine-deep: #082f27;
    --leaf: #5f8f3f;
    --leaf-dark: #48732f;
    --moss: #e4f2da;
    --moss-light: #f1f7ee;
    --gold: #f0b63d;
    --cream: #f7faf6;
    --white: #ffffff;
    --ink: #1f2b27;
    --muted: #62716b;
    --border: #dbe5df;

    --shadow-soft: 0 8px 24px rgba(18, 59, 47, 0.06);
    --shadow: 0 18px 45px rgba(18, 59, 47, 0.12);
    --shadow-strong: 0 26px 65px rgba(8, 47, 39, 0.2);

    --radius: 22px;
    --radius-large: 30px;
    --radius-small: 14px;

    --container: 1180px;
}


/* =========================================================
   RESET AND BASE STYLES
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--pine-deep);
    line-height: 1.16;
}

h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.45rem, 6vw, 5rem);
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    letter-spacing: -0.025em;
}

h3 {
    font-size: 1.25rem;
}

p:last-child {
    margin-bottom: 0;
}

::selection {
    color: var(--white);
    background: var(--leaf-dark);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--pine);
    background: var(--white);
    box-shadow: var(--shadow);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}


/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.narrow {
    max-width: 850px;
}

.section-pad {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-pad-top-small {
    padding-top: 1.5rem;
}

.section-soft {
    background: var(--cream);
}

.section-muted {
    background: var(--moss-light);
}

.text-center {
    text-align: center;
}

.muted {
    color: var(--muted);
}

.eyebrow {
    margin-bottom: 0.85rem;
    color: var(--leaf-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 2rem;
}

.split-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    max-width: none;
    gap: 2rem;
}

.split-heading > p,
.split-heading > a {
    max-width: 430px;
}


/* =========================================================
   HEADER AND NAVIGATION
   ========================================================= */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(219, 229, 223, 0.88);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    gap: 2rem;
}

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

.brand img {
    width: min(370px, 42vw);
    height: auto;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.primary-nav a {
    padding: 0.7rem 0.82rem;
    border-radius: 999px;
    color: #30423b;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a.current {
    color: var(--pine-deep);
    background: var(--moss);
}

.primary-nav .nav-cta {
    color: var(--white);
    background: var(--pine);
}

.primary-nav .nav-cta:hover,
.primary-nav .nav-cta.current {
    color: var(--white);
    background: var(--leaf-dark);
}

.menu-toggle {
    display: none;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--pine);
    background: var(--white);
    font-weight: 700;
    cursor: pointer;
}


/* =========================================================
   BUTTONS AND TEXT LINKS
   ========================================================= */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.button-row-center {
    justify-content: center;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.8rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: var(--white);
    background: var(--pine);
}

.button-primary:hover {
    background: var(--leaf-dark);
}

.button-secondary {
    border-color: var(--border);
    color: var(--pine);
    background: var(--white);
}

.button-secondary:hover {
    border-color: var(--leaf);
    background: var(--moss-light);
}

.button-light {
    color: var(--pine);
    background: var(--white);
}

.button-light:hover {
    background: var(--moss);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--pine);
    font-weight: 800;
    text-decoration: none;
}

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

.text-link span {
    transition: transform 180ms ease;
}

.text-link:hover span {
    transform: translateX(3px);
}

.text-link-light {
    color: var(--white);
}

.text-link-light:hover {
    color: #d9efc8;
}


/* =========================================================
   CARDS AND GRIDS
   ========================================================= */

.card {
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition:
        box-shadow 180ms ease,
        transform 180ms ease,
        border-color 180ms ease;
}

.card:hover {
    border-color: rgba(95, 143, 63, 0.28);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card-kicker {
    margin-bottom: 0.7rem;
    color: var(--leaf-dark);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.card-grid {
    display: grid;
    gap: 1.15rem;
}

.card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.card-number {
    color: var(--gold) !important;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.icon-badge {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--moss);
    font-size: 1.4rem;
}

.action-card p,
.priority-card p,
.resource-card p {
    color: var(--muted);
}

/* =========================================================
   HOME PAGE PRIORITY CARDS
   ========================================================= */

.priorities-section {
    background:
        linear-gradient(
            180deg,
            var(--white),
            #fbfdf9
        );
}

.priority-card--photo {
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.priority-card__photo {
    height: 190px;
    overflow: hidden;
    background: var(--moss);
}

.priority-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 280ms ease;
}

.priority-card--photo:hover .priority-card__image {
    transform: scale(1.035);
}

.priority-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.6rem;
}

.priority-card__body .card-number {
    margin-bottom: 0.75rem;
}

.priority-card__body h3 {
    margin-bottom: 1rem;
}

.priority-card__body p {
    color: var(--muted);
}

.priority-card__body .text-link {
    margin-top: auto;
}

.notice-card {
    max-width: 850px;
    margin-inline: auto;
}

.principle-card {
    min-height: 230px;
}

.urgent-note {
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
    border-left: 5px solid var(--gold);
    border-radius: 10px;
    background: #fff4d9;
}


/* =========================================================
   HOME PAGE HERO
   ========================================================= */

.hero {
    background:
        radial-gradient(
            circle at 83% 15%,
            #edf6e9 0,
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f7faf6
        );
}

.hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(330px, 0.82fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero-copy {
    max-width: 760px;
}

.hero-lead {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.hero-panel {
    padding: 2rem;
}

.hero-panel h2 {
    font-size: 2rem;
}

.hero-values {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    padding: 0;
    gap: 0.55rem;
    list-style: none;
}

.hero-values li {
    padding: 0.38rem 0.68rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--moss);
    font-size: 0.82rem;
    font-weight: 800;
}

.hero-photo-card {
    position: relative;
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.hero-photo-card:hover {
    transform: none;
}

.hero-photo-card__image,
.hero-photo-card__photo {
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.hero-photo-card__photo {
    object-fit: cover;
    object-position: center;
}

.hero-photo-card__image::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            rgba(8, 47, 39, 0.03) 20%,
            rgba(8, 47, 39, 0.18) 52%,
            rgba(8, 47, 39, 0.93) 100%
        );
    pointer-events: none;
}

.hero-photo-card__overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--white);
}

.hero-photo-card__overlay .card-kicker {
    color: #d9efc8;
}

.hero-photo-card__overlay h2 {
    margin-bottom: 1.25rem;
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}


/* =========================================================
   HOME PAGE ACTION CARDS
   ========================================================= */

.action-card--photo {
    padding: 0;
    overflow: hidden;
}

.action-card__photo {
    height: 215px;
    overflow: hidden;
    background: var(--moss);
}

.action-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 280ms ease;
}

.action-card--photo:hover .action-card__image {
    transform: scale(1.035);
}

.action-card__body {
    display: flex;
    flex-direction: column;
    min-height: 275px;
    padding: 1.6rem;
}

.action-card__body .text-link {
    margin-top: auto;
}

.action-card__image--tire {
    object-position: center 25%;
}

/* =========================================================
   HOME PAGE RESPECT THE PARK FEATURE
   ========================================================= */

.feature-section {
    background:
        linear-gradient(
            180deg,
            var(--white),
            var(--cream)
        );
}

.feature-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 470px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow);
}

.feature-photo {
    min-height: 430px;
    overflow: hidden;
    background: var(--moss);
}

.feature-photo__image {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    object-position: center;
}

.feature-copy {
    align-self: center;
    padding: clamp(2.2rem, 6vw, 5rem);
}

.feature-copy h2,
.feature-copy p {
    color: var(--white);
}

.feature-copy .eyebrow {
    color: #d9efc8;
}


/* =========================================================
   HOME PAGE PHOTO GALLERY
   ========================================================= */

.park-gallery-section {
    background: var(--white);
}

.home-photo-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 0.75fr)
        minmax(0, 0.75fr);
    gap: 1rem;
}

.home-photo {
    position: relative;
    min-height: 350px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--moss);
    box-shadow: var(--shadow-soft);
}

.home-photo--wide {
    min-height: 420px;
}

.home-photo__image {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform 300ms ease;
}

.home-photo:hover .home-photo__image {
    transform: scale(1.025);
}

.home-photo::after {
    position: absolute;
    inset: 40% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.8)
        );
    pointer-events: none;
}

.home-photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.25rem;
    bottom: 1rem;
    left: 1.25rem;
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 800;
}


/* =========================================================
   PROFILE CARDS
   ========================================================= */

.profile-card {
    text-align: center;
}

.profile-photo {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: var(--pine);
    background: var(--moss);
    font-size: 2rem;
    font-weight: 900;
}


/* =========================================================
   HOME PAGE UPDATES AND PHOTO SUBMISSION
   ========================================================= */

.update-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.update-card {
    min-height: 290px;
}

.dark-card {
    border-color: var(--pine);
    background: var(--pine);
}

.dark-card h2,
.dark-card p {
    color: var(--white);
}

.dark-card .eyebrow {
    color: #d9efc8;
}

.photo-submission-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
    min-height: 290px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--pine);
}

.photo-submission-card:hover {
    transform: none;
}

.photo-submission-card__image {
    min-height: 290px;
    overflow: hidden;
    background: var(--moss);
}

.photo-submission-card__photo {
    width: 100%;
    height: 100%;
    min-height: 290px;
    object-fit: cover;
    object-position: center;
}

.photo-submission-card__content {
    align-self: center;
    padding: clamp(1.6rem, 4vw, 2.5rem);
}

.photo-submission-card__content h2,
.photo-submission-card__content p {
    color: var(--white);
}

.photo-submission-card__content .eyebrow {
    color: #d9efc8;
}

/* =========================================================
   UPCOMING MEETINGS
   ========================================================= */

.upcoming-meetings-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.upcoming-meetings-card h2 {
    margin-bottom: 0.5rem;
}

.meeting-list {
    display: grid;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    gap: 0.75rem;
    list-style: none;
}

.meeting-list__item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--white);
}

.meeting-list__item--council {
    border-color: rgba(95, 143, 63, 0.35);
    background: var(--moss-light);
}

.meeting-list__topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.meeting-type {
    display: inline-flex;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--moss);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.meeting-list__item--council .meeting-type {
    color: var(--white);
    background: var(--pine);
}

.meeting-list time {
    color: var(--pine-deep);
    font-size: 0.92rem;
    font-weight: 800;
    text-align: right;
}

.meeting-list__details {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.upcoming-meetings-card > .text-link {
    margin-top: auto;
}

/* =========================================================
   HOME PAGE COMMUNITY CARDS
   ========================================================= */

.community-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.community-card__photo {
    height: 215px;
    overflow: hidden;
    background: var(--moss);
}

.community-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 280ms ease;
}

.community-card:hover .community-card__image {
    transform: scale(1.035);
}

.community-card__image--instagram {
    object-position: center 58%;
}

.community-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 300px;
    padding: 1.6rem;
}

.community-card__body p {
    color: var(--muted);
}

.community-card__body .text-link,
.community-card__status {
    margin-top: auto;
}

.community-card__status {
    display: inline-flex;
    color: var(--leaf-dark);
    font-size: 0.9rem;
    font-weight: 800;
}


/* =========================================================
   IMAGE PLACEHOLDERS
   ========================================================= */

.photo-placeholder {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 1.25rem;
    border: 10px solid rgba(255, 255, 255, 0.32);
    color: var(--pine);
    background:
        linear-gradient(
            135deg,
            #dbead2,
            #b8d29f
        );
    font-weight: 800;
    text-align: center;
}

.photo-placeholder span {
    max-width: 14rem;
}


/* =========================================================
   GENERAL INNER PAGES
   ========================================================= */

.page-hero {
    background:
        linear-gradient(
            180deg,
            var(--moss-light),
            var(--white)
        );
}

.page-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}


/* =========================================================
   RESPECT THE PARK CAMPAIGN
   ========================================================= */

.campaign-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.75rem, 4vw, 3rem);
    gap: clamp(2rem, 5vw, 5rem);
    border: 1px solid rgba(13, 67, 52, 0.12);
    background:
        linear-gradient(
            135deg,
            rgba(232, 244, 221, 0.95),
            rgba(255, 255, 255, 0.98)
        );
}

.campaign-intro h2 {
    margin: 0;
    color: var(--pine);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    line-height: 1.08;
}

.campaign-intro p {
    max-width: 42rem;
}

.campaign-privilege {
    margin-top: 1.25rem;
    color: var(--pine);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pillar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.pillar-card:hover {
    border-color: rgba(13, 67, 52, 0.2);
    box-shadow: 0 18px 38px rgba(13, 67, 52, 0.12);
    transform: translateY(-4px);
}

.pillar-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
}

.pillar-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--white);
}

.pillar-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    color: #4d685f;
    background:
        linear-gradient(
            135deg,
            #edf5e8,
            #f8fbf6
        );
    font-weight: 700;
    text-align: center;
}

.pillar-card__placeholder span {
    max-width: 11rem;
}

.pillar-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.pillar-card__body h2 {
    margin: 0 0 0.55rem;
    color: var(--pine);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.12;
}

.pillar-card__tagline {
    margin: 0 0 0.8rem;
    color: var(--leaf);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.35;
}

.pillar-card__body p:last-child {
    color: #52645e;
}

.pillar-card[id] {
    scroll-margin-top: 8rem;
}

.closing-card {
    padding: clamp(2rem, 5vw, 4rem);
}

.closing-card h2 {
    margin-bottom: 0.75rem;
    color: var(--pine);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}


/* =========================================================
   RESPECT THE PARK POSTER GALLERY
   ========================================================= */

.poster-lightbox-trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.poster-lightbox-trigger img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--white);
}

.poster-lightbox-trigger:focus-visible {
    outline: 4px solid #8bbd52;
    outline-offset: -4px;
}

.poster-zoom-hint {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    border-radius: 999px;
    color: var(--white);
    background: rgba(8, 55, 43, 0.92);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: translateY(0.4rem);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.poster-zoom-hint::before {
    content: "＋";
    font-size: 1rem;
    line-height: 1;
}

.poster-lightbox-trigger:hover .poster-zoom-hint,
.poster-lightbox-trigger:focus-visible .poster-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

.poster-lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.poster-lightbox[open] {
    display: grid;
    place-items: center;
}

.poster-lightbox::backdrop {
    background: rgba(4, 24, 19, 0.94);
    backdrop-filter: blur(4px);
}

.poster-lightbox__shell {
    position: relative;
    display: grid;
    grid-template-columns:
        4.5rem
        minmax(0, 1fr)
        4.5rem;
    align-items: center;
    width: min(96vw, 1200px);
    height: min(94vh, 1000px);
    padding: 1.25rem;
}

.poster-lightbox__figure {
    display: flex;
    grid-column: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.poster-lightbox__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100% - 4.5rem);
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--white);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.poster-lightbox__caption {
    display: flex;
    justify-content: space-between;
    width: min(100%, 52rem);
    padding: 1rem 0.25rem 0;
    gap: 2rem;
    color: var(--white);
    font-size: 0.95rem;
}

.poster-lightbox__caption strong {
    font-size: 1rem;
}

#poster-lightbox-count {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.72);
}

.poster-lightbox__close {
    position: absolute;
    z-index: 2;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition:
        background 160ms ease,
        transform 160ms ease;
}

.poster-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.04);
}

.poster-lightbox__nav {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition:
        background 160ms ease,
        transform 160ms ease;
}

.poster-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.04);
}

.poster-lightbox__nav--previous {
    grid-column: 1;
}

.poster-lightbox__nav--next {
    grid-column: 3;
}

.poster-lightbox__close:focus-visible,
.poster-lightbox__nav:focus-visible {
    outline: 3px solid #a9d96e;
    outline-offset: 3px;
}

body.poster-gallery-open {
    overflow: hidden;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding-top: 4rem;
    color: #dce9e3;
    background: var(--pine-deep);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2rem;
}

.site-footer a {
    display: block;
    margin: 0.45rem 0;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--white);
}

.footer-brand {
    color: var(--white);
    font-size: 1.7rem;
    font-weight: 900;
}

.footer-heading {
    color: var(--white);
    font-weight: 900;
}

.footer-small {
    font-size: 0.9rem;
}

.footer-bottom {
    margin-top: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.9rem;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
    }

    .primary-nav {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 1rem;
        left: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .primary-nav.open {
        display: flex;
    }

    .primary-nav a {
        padding: 0.85rem 1rem;
    }

    .brand img {
        width: min(340px, 62vw);
    }

    .hero-grid,
    .feature-card {
        grid-template-columns: 1fr;
    }

    .hero-photo-card {
        min-height: 560px;
    }

    .hero-photo-card__image,
    .hero-photo-card__photo {
        min-height: 560px;
    }

    .feature-photo,
    .feature-photo__image {
        min-height: 380px;
    }

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

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

    .home-photo--wide {
        grid-column: 1 / -1;
    }

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

    .campaign-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .section-pad {
        padding: 3.5rem 0;
    }

    .section-pad-top-small {
        padding-top: 0.75rem;
    }

    .header-inner {
        min-height: 76px;
    }

    .menu-toggle-label {
        display: none;
    }

    .card-grid-3,
    .card-grid-4,
    .update-grid,
    .footer-grid,
    .home-photo-grid,
    .pillar-grid {
        grid-template-columns: 1fr;
    }

    .split-heading {
        display: block;
    }

    .split-heading > p,
    .split-heading > a {
        max-width: none;
    }

    .hero-photo-card {
        min-height: 480px;
    }

    .hero-photo-card__image,
    .hero-photo-card__photo {
        min-height: 480px;
    }

    .action-card__photo {
        height: 240px;
    }

    .feature-copy {
        padding: 2rem;
    }

    .feature-photo,
    .feature-photo__image {
        min-height: 320px;
    }

    .home-photo,
    .home-photo--wide {
        min-height: 320px;
    }

    .photo-submission-card {
        grid-template-columns: 1fr;
    }

    .photo-submission-card__image,
    .photo-submission-card__photo {
        min-height: 300px;
    }

    .campaign-intro {
        padding: 1.5rem;
    }

    .pillar-card__body {
        padding: 1.25rem;
    }

    .poster-lightbox__shell {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        width: 100vw;
        height: 100vh;
        padding:
            4.25rem
            1rem
            max(1rem, env(safe-area-inset-bottom));
        gap: 0.75rem;
    }

    .poster-lightbox__figure {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .poster-lightbox__image {
        max-height: calc(100vh - 10rem);
        border-radius: 0.35rem;
    }

    .poster-lightbox__nav {
        width: 100%;
        height: 3rem;
        border-radius: 0.65rem;
        font-size: 2.25rem;
    }

    .poster-lightbox__nav--previous {
        grid-row: 2;
        grid-column: 1;
    }

    .poster-lightbox__nav--next {
        grid-row: 2;
        grid-column: 2;
    }

    .poster-lightbox__caption {
        padding-top: 0.75rem;
        gap: 1rem;
        font-size: 0.82rem;
    }

    .poster-lightbox__caption strong {
        font-size: 0.88rem;
    }

    .poster-lightbox__close {
        top: max(0.6rem, env(safe-area-inset-top));
        right: 0.75rem;
    }

    .poster-zoom-hint {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: min(calc(100% - 1.25rem), var(--container));
    }

    h1 {
        font-size: clamp(2.25rem, 12vw, 3.5rem);
    }

    .button-row {
        flex-direction: column;
    }

    .button-row .button {
        width: 100%;
    }

    .hero-photo-card {
        min-height: 430px;
    }

    .hero-photo-card__image,
    .hero-photo-card__photo {
        min-height: 430px;
    }

    .home-photo,
    .home-photo--wide {
        min-height: 280px;
    }
}

.meeting-list__topline {
    display: block;
}

.meeting-list time {
    display: block;
    margin-top: 0.55rem;
    text-align: left;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .card:hover,
    .button:hover,
    .poster-lightbox__close:hover,
    .poster-lightbox__nav:hover {
        transform: none;
    }

    .action-card--photo:hover .action-card__image,
    .home-photo:hover .home-photo__image {
        transform: none;
    }
}

.priority-card__photo {
    height: 240px;
}

.community-card__photo {
    height: 250px;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* About hero */

.about-hero {
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(228, 242, 218, 0.9),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.about-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.about-hero__copy {
    max-width: 720px;
}

.about-hero__photo {
    position: relative;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.about-hero__photo img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

.about-hero__photo::after {
    position: absolute;
    inset: 45% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.82)
        );
    pointer-events: none;
}

.about-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
}


/* What we are / What we are not */

.about-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.about-purpose-card {
    padding: clamp(2rem, 5vw, 3.5rem);
}

.about-purpose-card h2 {
    max-width: 18ch;
}

.about-purpose-card p {
    color: var(--muted);
}

.about-purpose-card--contrast {
    border-color: var(--pine);
    color: var(--white);
    background: var(--pine);
}

.about-purpose-card--contrast h2,
.about-purpose-card--contrast p {
    color: var(--white);
}

.about-purpose-card--contrast .card-kicker {
    color: #d9efc8;
}


/* Values */

.about-values-grid {
    align-items: stretch;
}

.value-card {
    position: relative;
    min-height: 280px;
    padding-top: 4.5rem;
    overflow: hidden;
}

.value-card::before {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    color: var(--white);
    background: var(--pine);
    content: "•";
    font-size: 1.5rem;
    line-height: 1;
}

.value-card h3 {
    font-size: 1.45rem;
}

.value-card p {
    color: var(--muted);
}


/* How OLDPUG works */

.structure-grid {
    display: grid;
    gap: 1.25rem;
}

.structure-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    gap: clamp(1.25rem, 4vw, 2.5rem);
}

.structure-card__label {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    border-radius: 999px;
    color: var(--pine);
    background: var(--moss);
    font-size: 1.2rem;
    font-weight: 900;
}

.structure-card--council {
    border-color: rgba(95, 143, 63, 0.4);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
}

.structure-card--council .structure-card__label {
    color: var(--white);
    background: var(--pine);
}

.structure-card h3 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.structure-card p {
    max-width: 62rem;
    color: var(--muted);
}


/* Practical-action feature */

.about-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow);
}

.about-feature__photo {
    min-height: 520px;
    overflow: hidden;
    background: var(--moss);
}

.about-feature__photo img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

.about-feature__copy {
    align-self: center;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.about-feature__copy h2,
.about-feature__copy p {
    color: var(--white);
}

.about-feature__copy .eyebrow {
    color: #d9efc8;
}

.about-feature__copy .button-primary {
    color: var(--pine);
    background: var(--white);
}

.about-feature__copy .button-primary:hover {
    background: var(--moss);
}


/* Local community feature */

.about-community-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.about-community-feature__copy {
    max-width: 680px;
}

.about-community-feature__copy p {
    color: var(--muted);
}

.about-community-feature__photo {
    position: relative;
    min-height: 560px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow);
}

.about-community-feature__photo img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

.about-community-feature__photo::after {
    position: absolute;
    inset: 52% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.86)
        );
    pointer-events: none;
}

.about-community-feature__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
}


/* =========================================================
   ABOUT PAGE — TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .about-hero__grid,
    .about-feature,
    .about-community-feature {
        grid-template-columns: 1fr;
    }

    .about-hero__photo,
    .about-hero__photo img {
        min-height: 500px;
    }

    .about-feature__photo,
    .about-feature__photo img {
        min-height: 420px;
    }

    .about-community-feature__photo,
    .about-community-feature__photo img {
        min-height: 500px;
    }

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


/* =========================================================
   ABOUT PAGE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .about-intro-grid,
    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-hero__photo,
    .about-hero__photo img {
        min-height: 420px;
    }

    .about-feature__photo,
    .about-feature__photo img {
        min-height: 340px;
    }

    .about-community-feature__photo,
    .about-community-feature__photo img {
        min-height: 440px;
    }

    .structure-card {
        grid-template-columns: 1fr;
    }

    .structure-card__label {
        width: 3rem;
        height: 3rem;
    }

    .value-card {
        min-height: 0;
    }
}


/* =========================================================
   ABOUT PAGE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .about-hero__photo,
    .about-hero__photo img {
        min-height: 360px;
    }

    .about-feature__photo,
    .about-feature__photo img {
        min-height: 300px;
    }

    .about-community-feature__photo,
    .about-community-feature__photo img {
        min-height: 380px;
    }

    .about-purpose-card,
    .about-feature__copy {
        padding: 1.75rem;
    }
}

/* =========================================================
   DOG PARKS PAGE
   ========================================================= */

/* Hero */

.parks-hero {
    background:
        radial-gradient(
            circle at 86% 14%,
            rgba(228, 242, 218, 0.9),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.parks-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.parks-hero__copy {
    max-width: 720px;
}

.parks-hero__photo {
    position: relative;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.parks-hero__image {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

.parks-hero__photo::after {
    position: absolute;
    inset: 48% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.84)
        );
    pointer-events: none;
}

.parks-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
}


/* Five City locations / seven communities explanation */

.park-community-note {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border-color: rgba(95, 143, 63, 0.3);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
}

.park-community-note h2 {
    margin-bottom: 0;
}

.park-community-note p {
    color: var(--muted);
}


/* Year-round park directory */

.year-round-parks-section {
    scroll-margin-top: 7rem;
}

.park-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.4rem;
}

.park-directory-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.park-directory-card__photo {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--moss);
}

.park-directory-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 280ms ease;
}

.park-directory-card:hover .park-directory-card__image {
    transform: scale(1.035);
}

.park-directory-card__badges {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
}

.park-classification,
.park-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.park-classification--all {
    color: var(--white);
    background: var(--pine);
}

.park-classification--small {
    color: var(--pine);
    background: var(--gold);
}

.park-status {
    color: var(--pine);
    background: rgba(255, 255, 255, 0.94);
}

.park-directory-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.6rem;
}

.park-directory-card__body h3 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.45rem, 2vw, 1.8rem);
}

.park-directory-card__classification {
    margin-bottom: 1rem;
    color: var(--leaf-dark);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.park-directory-card__description {
    color: var(--muted);
}

.park-address {
    display: flex;
    align-items: flex-start;
    margin: 1.1rem 0;
    gap: 0.5rem;
    color: var(--pine-deep);
    font-size: 0.92rem;
    font-weight: 800;
}

.park-address span {
    flex-shrink: 0;
}

.park-feature-list {
    display: grid;
    margin: 0 0 1.25rem;
    padding: 0;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.92rem;
    list-style: none;
}

.park-feature-list li {
    position: relative;
    padding-left: 1.25rem;
}

.park-feature-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--leaf);
    content: "✓";
    font-weight: 900;
}

.park-notice {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 10px 10px 0;
    color: var(--pine-deep);
    background: #fff5dc;
    font-size: 0.88rem;
    font-weight: 700;
}

.park-directory-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 1rem;
}

.park-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.park-map-link:hover {
    color: var(--leaf-dark);
}

.park-page-status {
    color: var(--leaf-dark);
    font-size: 0.88rem;
    font-weight: 800;
}


/* Seasonal off-leash areas */

#seasonal-areas {
    scroll-margin-top: 7rem;
}

.seasonal-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    margin-bottom: 1.5rem;
    gap: clamp(2rem, 5vw, 5rem);
}

.seasonal-reality-check {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-color: var(--gold);
    background: #fff8e7;
}

.seasonal-reality-check p {
    color: var(--muted);
}

.seasonal-hours {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);
    align-items: center;
    margin-bottom: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    gap: 2rem;
    border-color: rgba(95, 143, 63, 0.3);
}

.seasonal-hours h3 {
    margin-bottom: 0;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.seasonal-hours__times {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem 2rem;
}

.seasonal-hours__times p {
    margin: 0;
    color: var(--muted);
}

.seasonal-area-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.seasonal-area-card {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.seasonal-area-card__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
}

.seasonal-area-card .park-classification,
.seasonal-area-card .park-status {
    box-shadow: none;
}

.seasonal-area-card .park-status {
    border: 1px solid var(--border);
    background: var(--cream);
}

.seasonal-zone {
    margin-bottom: 0.4rem;
    color: var(--leaf-dark);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.seasonal-area-card h3 {
    margin-bottom: 0.5rem;
}

.seasonal-area-detail {
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.seasonal-area-card .text-link {
    margin-top: auto;
}


/* Before-you-go cards */

.park-reminder-grid {
    align-items: stretch;
}

.park-reminder-card {
    position: relative;
    min-height: 235px;
    padding-top: 4.7rem;
}

.park-reminder-card::before {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    color: var(--white);
    background: var(--pine);
    content: "✓";
    font-weight: 900;
}

.park-reminder-card p {
    color: var(--muted);
}


/* Official City-information block */

.official-information {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    margin-top: 1.5rem;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border-color: var(--pine);
    color: var(--white);
    background: var(--pine);
}

.official-information h2,
.official-information p {
    color: var(--white);
}

.official-information .card-kicker {
    color: #d9efc8;
}

.official-information .button-primary {
    color: var(--pine);
    background: var(--white);
}

.official-information .button-primary:hover {
    background: var(--moss);
}


/* =========================================================
   DOG PARKS PAGE — TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .parks-hero__grid {
        grid-template-columns: 1fr;
    }

    .parks-hero__photo,
    .parks-hero__image {
        min-height: 500px;
    }

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

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

    .park-community-note,
    .seasonal-intro,
    .official-information {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   DOG PARKS PAGE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .parks-hero__photo,
    .parks-hero__image {
        min-height: 420px;
    }

    .park-directory-grid,
    .seasonal-area-grid,
    .park-community-note,
    .seasonal-intro,
    .seasonal-hours,
    .official-information {
        grid-template-columns: 1fr;
    }

    .park-directory-card__photo {
        height: 250px;
    }

    .seasonal-hours__times {
        justify-content: flex-start;
    }

    .seasonal-area-card {
        min-height: 0;
    }

    .park-reminder-card {
        min-height: 0;
    }
}


/* =========================================================
   DOG PARKS PAGE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .parks-hero__photo,
    .parks-hero__image {
        min-height: 350px;
    }

    .park-directory-card__photo {
        height: 225px;
    }

    .park-directory-card__badges {
        top: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
    }

    .park-community-note,
    .seasonal-reality-check,
    .seasonal-hours,
    .official-information {
        padding: 1.5rem;
    }
}

/* =========================================================
   INDIVIDUAL PARK PROFILE PAGE
   ========================================================= */

/* Hero */

.park-profile-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.park-profile-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.park-profile-hero__copy {
    max-width: 730px;
}

.park-profile-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.45rem;
    color: var(--pine);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.park-profile-back:hover {
    color: var(--leaf-dark);
}

.park-profile-classification {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    margin: 0 0 1.25rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.park-profile-quick-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
    gap: 0.8rem;
}

.park-profile-quick-facts > div {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.8);
}

.park-profile-fact-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--leaf-dark);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.park-profile-quick-facts strong {
    color: var(--pine-deep);
    font-size: 0.98rem;
}

.park-profile-hero__photo {
    position: relative;
    min-height: 540px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.park-profile-hero__image {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    object-position: center;
}

.park-profile-hero__photo::after {
    position: absolute;
    inset: 48% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.86)
        );
    pointer-events: none;
}

.park-profile-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
}


/* Recurring reservation alert */

.park-profile-alert-section {
    padding: 0 0 clamp(2rem, 5vw, 4rem);
    background: var(--cream);
}

.park-profile-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    gap: 1.25rem;
    border: 1px solid rgba(240, 182, 61, 0.72);
    border-radius: var(--radius);
    background: #fff7df;
    box-shadow: var(--shadow-soft);
}

.park-profile-alert__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 1.5rem;
    font-weight: 900;
}

.park-profile-alert h2 {
    margin-bottom: 0.4rem;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.park-profile-alert p:last-child {
    color: var(--muted);
}


/* Park overview and eligibility */

.park-profile-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.park-profile-about-card,
.park-profile-eligibility-card {
    padding: clamp(2rem, 5vw, 3.5rem);
}

.park-profile-about-card p,
.park-profile-eligibility-card > p {
    color: var(--muted);
}

.park-profile-eligibility-card {
    border-color: rgba(240, 182, 61, 0.55);
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            var(--white)
        );
}

.park-size-limits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.75rem 0;
    gap: 1rem;
}

.park-size-limits > div {
    padding: 1.4rem 1rem;
    border: 1px solid rgba(240, 182, 61, 0.62);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.park-size-limit__number {
    display: block;
    color: var(--pine);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.park-size-limit__label {
    display: block;
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* Practical information cards */

.park-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.park-detail-card {
    min-height: 315px;
}

.park-detail-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.15rem;
    border-radius: var(--radius-small);
    background: var(--moss);
    font-size: 1.4rem;
}

.park-detail-card h3 {
    margin-bottom: 0.75rem;
}

.park-detail-card p {
    color: var(--muted);
}

.park-detail-placeholder {
    padding: 0.8rem 0.9rem;
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    background: #fff8e7;
    font-size: 0.9rem;
}


/* Representative */

.park-representative-section {
    scroll-margin-top: 7rem;
    background:
        linear-gradient(
            180deg,
            var(--white),
            var(--cream)
        );
}

.park-representative-card {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(0, 1.18fr);
    min-height: 560px;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.park-representative-card__photo {
    min-height: 560px;
    overflow: hidden;
    background: var(--moss);
}

.park-representative-card__image {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

.park-representative-card__content {
    align-self: center;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.park-representative-card__content h2,
.park-representative-card__content p {
    color: var(--white);
}

.park-representative-card__content .eyebrow,
.park-representative-card__content .card-kicker {
    color: #d9efc8;
}

.park-representative-role {
    margin-top: -0.35rem;
    font-size: 1rem;
    font-weight: 800;
}

.park-representative-bio-placeholder {
    margin: 1.5rem 0 2rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.08);
}

.park-representative-bio-placeholder p:last-child {
    color: rgba(255, 255, 255, 0.82);
}

.park-representative-card__content .button-primary {
    color: var(--pine);
    background: var(--white);
}

.park-representative-card__content .button-primary:hover {
    background: var(--moss);
}


/* Dogs of the Park gallery */

.park-photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.park-photo-gallery__item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.park-gallery-trigger {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--moss);
    cursor: zoom-in;
}

.park-gallery-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 280ms ease;
}

.park-gallery-trigger:hover img {
    transform: scale(1.04);
}

.park-gallery-trigger__hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: var(--white);
    background: rgba(8, 47, 39, 0.9);
    font-size: 0.74rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(0.35rem);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.park-gallery-trigger:hover .park-gallery-trigger__hint,
.park-gallery-trigger:focus-visible .park-gallery-trigger__hint {
    opacity: 1;
    transform: translateY(0);
}

.park-photo-gallery__item figcaption {
    min-height: 4.3rem;
    padding: 0.9rem 1rem;
    color: var(--muted);
    font-size: 0.87rem;
    font-weight: 700;
}

.park-gallery-placeholder {
    text-align: center;
}


/* Full-screen park gallery */

.park-gallery-dialog {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.park-gallery-dialog[open] {
    display: grid;
    place-items: center;
}

.park-gallery-dialog::backdrop {
    background: rgba(4, 24, 19, 0.95);
    backdrop-filter: blur(4px);
}

.park-gallery-dialog__shell {
    position: relative;
    display: grid;
    grid-template-columns:
        4.5rem
        minmax(0, 1fr)
        4.5rem;
    align-items: center;
    width: min(96vw, 1250px);
    height: min(94vh, 1000px);
    padding: 1.25rem;
}

.park-gallery-dialog__figure {
    display: flex;
    grid-column: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.park-gallery-dialog__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100% - 4.75rem);
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--white);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.park-gallery-dialog__caption {
    display: flex;
    justify-content: space-between;
    width: min(100%, 58rem);
    padding: 1rem 0.25rem 0;
    gap: 2rem;
    color: var(--white);
    font-size: 0.94rem;
}

#park-gallery-dialog-count {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.park-gallery-dialog__close {
    position: absolute;
    z-index: 2;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.park-gallery-dialog__nav {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.park-gallery-dialog__close:hover,
.park-gallery-dialog__nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.park-gallery-dialog__nav--previous {
    grid-column: 1;
}

.park-gallery-dialog__nav--next {
    grid-column: 3;
}

body.park-gallery-open {
    overflow: hidden;
}


/* Connect with the park community */

.park-community-connect {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    min-height: 500px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow);
}

.park-community-connect__photo {
    min-height: 500px;
    overflow: hidden;
    background: var(--moss);
}

.park-community-connect__image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center;
}

.park-community-connect__content {
    align-self: center;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.park-community-connect__content h2,
.park-community-connect__content p {
    color: var(--white);
}

.park-community-connect__content .eyebrow {
    color: #d9efc8;
}

.park-community-connect__content .text-link {
    display: flex;
    width: fit-content;
    margin-top: 1.25rem;
    color: #d9efc8;
}

.park-community-link-placeholder {
    margin: 1.5rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.08);
}


/* Reporting routes */

.park-reporting-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.park-reporting-card {
    display: flex;
    flex-direction: column;
    min-height: 310px;
}

.park-reporting-card p {
    color: var(--muted);
}

.park-reporting-card .text-link {
    margin-top: auto;
}

.park-reporting-card--urgent {
    border-color: #b73b34;
    color: var(--white);
    background: #8f2f2a;
}

.park-reporting-card--urgent h3,
.park-reporting-card--urgent p {
    color: var(--white);
}

.park-reporting-card--urgent .card-kicker {
    color: #ffd8d3;
}


/* Official information */

.park-official-information {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.park-official-information p {
    color: var(--muted);
}

.park-profile-updated {
    font-size: 0.88rem;
    font-weight: 800;
}


/* =========================================================
   PARK PROFILE — TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .park-profile-hero__grid,
    .park-representative-card,
    .park-community-connect {
        grid-template-columns: 1fr;
    }

    .park-profile-hero__photo,
    .park-profile-hero__image {
        min-height: 500px;
    }

    .park-detail-grid,
    .park-reporting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .park-photo-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .park-representative-card__photo,
    .park-representative-card__image {
        min-height: 500px;
    }

    .park-community-connect__photo,
    .park-community-connect__image {
        min-height: 420px;
    }

    .park-official-information {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PARK PROFILE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .park-profile-hero__photo,
    .park-profile-hero__image {
        min-height: 410px;
    }

    .park-profile-quick-facts,
    .park-profile-intro-grid,
    .park-detail-grid,
    .park-reporting-grid,
    .park-size-limits {
        grid-template-columns: 1fr;
    }

    .park-profile-alert {
        grid-template-columns: 1fr;
    }

    .park-profile-alert__icon {
        width: 3rem;
        height: 3rem;
    }

    .park-detail-card,
    .park-reporting-card {
        min-height: 0;
    }

    .park-representative-card__photo,
    .park-representative-card__image {
        min-height: 420px;
    }

    .park-photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .park-community-connect__photo,
    .park-community-connect__image {
        min-height: 350px;
    }

    .park-gallery-dialog__shell {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        width: 100vw;
        height: 100vh;
        padding:
            4.25rem
            1rem
            max(1rem, env(safe-area-inset-bottom));
        gap: 0.75rem;
    }

    .park-gallery-dialog__figure {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .park-gallery-dialog__image {
        max-height: calc(100vh - 10rem);
    }

    .park-gallery-dialog__nav {
        width: 100%;
        height: 3rem;
        border-radius: 0.65rem;
        font-size: 2.25rem;
    }

    .park-gallery-dialog__nav--previous {
        grid-row: 2;
        grid-column: 1;
    }

    .park-gallery-dialog__nav--next {
        grid-row: 2;
        grid-column: 2;
    }

    .park-gallery-dialog__caption {
        gap: 1rem;
        font-size: 0.82rem;
    }

    .park-gallery-trigger__hint {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   PARK PROFILE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .park-profile-hero__photo,
    .park-profile-hero__image {
        min-height: 340px;
    }

    .park-photo-gallery {
        grid-template-columns: 1fr;
    }

    .park-gallery-trigger {
        aspect-ratio: 4 / 3;
    }

    .park-representative-card__photo,
    .park-representative-card__image {
        min-height: 350px;
    }

    .park-community-connect__photo,
    .park-community-connect__image {
        min-height: 300px;
    }

    .park-representative-card__content,
    .park-community-connect__content {
        padding: 1.75rem;
    }
}


/* =========================================================
   PARK PROFILE — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .park-gallery-trigger img {
        transition: none;
    }

    .park-gallery-trigger:hover img {
        transform: none;
    }
}

/* =========================================================
   PARK GALLERY — PORTRAIT IMAGE FIX
   Keeps images and controls inside the browser window
   ========================================================= */

.park-gallery-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.park-gallery-dialog[open] {
    display: block;
}

.park-gallery-dialog__shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    padding: 1.25rem 6rem;
    overflow: hidden;
    box-sizing: border-box;
}

.park-gallery-dialog__figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.park-gallery-dialog__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 7rem);
    min-width: 0;
    min-height: 0;
    border-radius: 0.5rem;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.park-gallery-dialog__caption {
    display: flex;
    justify-content: space-between;
    width: min(100%, 58rem);
    padding: 1rem 0.25rem 0;
    gap: 2rem;
    color: var(--white);
    font-size: 0.94rem;
}

.park-gallery-dialog__close {
    position: absolute;
    z-index: 5;
    top: 1.25rem;
    right: 1.5rem;
}

.park-gallery-dialog__nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    transform: translateY(-50%);
}

.park-gallery-dialog__nav--previous {
    left: 1.5rem;
}

.park-gallery-dialog__nav--next {
    right: 1.5rem;
}


/* Mobile gallery controls */

@media (max-width: 760px) {

    .park-gallery-dialog__shell {
        display: flex;
        width: 100%;
        height: 100dvh;
        padding:
            4.5rem
            3.75rem
            max(1rem, env(safe-area-inset-bottom));
    }

    .park-gallery-dialog__figure {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        width: 100%;
        height: 100%;
    }

    .park-gallery-dialog__image {
        max-width: 100%;
        max-height: calc(100dvh - 8rem);
    }

    .park-gallery-dialog__nav {
        top: 50%;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 999px;
        font-size: 2.2rem;
        transform: translateY(-50%);
    }

    .park-gallery-dialog__nav--previous {
        left: 0.5rem;
    }

    .park-gallery-dialog__nav--next {
        right: 0.5rem;
    }

    .park-gallery-dialog__close {
        top: 0.75rem;
        right: 0.75rem;
    }

    .park-gallery-dialog__caption {
        gap: 1rem;
        font-size: 0.82rem;
    }
}

/* =========================================================
   MULTIPLE PARK REPRESENTATIVES
   Used when one park community has two or more representatives
   ========================================================= */

.park-representatives-heading {
    margin-bottom: 2rem;
}

.park-representatives-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;
}

.park-representative-profile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.park-representative-profile__photo {
    height: 390px;
    min-height: 390px;
    overflow: hidden;
    background: var(--moss);
}

.park-representative-profile__image {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    object-position: center;
}

.park-representative-profile__image.photo-placeholder {
    display: grid;
    place-items: center;
    min-height: 390px;
    padding: 2rem;
    color: var(--pine);
    background:
        linear-gradient(
            135deg,
            var(--moss),
            var(--cream)
        );
    font-weight: 800;
    text-align: center;
}

.park-representative-profile__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3rem);
}

.park-representative-profile__content h3,
.park-representative-profile__content p {
    color: var(--white);
}

.park-representative-profile__content h3 {
    margin-bottom: 0.45rem;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.park-representative-profile__content .eyebrow,
.park-representative-profile__content .card-kicker {
    color: #d9efc8;
}

.park-representative-profile .park-representative-role {
    margin-top: -0.25rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.park-representative-profile .park-representative-bio {
    margin: 1.5rem 0 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.08);
}

.park-representative-profile .park-representative-bio p {
    color: rgba(255, 255, 255, 0.84);
}

.park-representative-profile .park-representative-bio--placeholder {
    margin-top: auto;
    border-style: dashed;
}

.park-representatives-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
    gap: 1.5rem;
    border: 1px solid rgba(95, 143, 63, 0.3);
    border-radius: var(--radius);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.park-representatives-contact p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
}

.park-representatives-contact .button {
    flex-shrink: 0;
}


/* Multiple representatives — tablet and mobile */

@media (max-width: 900px) {

    .park-representatives-grid {
        grid-template-columns: 1fr;
    }

    .park-representative-profile__photo,
    .park-representative-profile__image,
    .park-representative-profile__image.photo-placeholder {
        min-height: 430px;
    }

    .park-representative-profile__photo {
        height: 430px;
    }

    .park-representatives-contact {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {

    .park-representative-profile__photo,
    .park-representative-profile__image,
    .park-representative-profile__image.photo-placeholder {
        min-height: 340px;
    }

    .park-representative-profile__photo {
        height: 340px;
    }

    .park-representative-profile__content {
        padding: 1.75rem;
    }

    .park-representatives-contact {
        padding: 1.4rem;
    }
}

/* =========================================================
   RESOURCES PAGE
   ========================================================= */

/* Hero */

.resources-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.resources-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.resources-hero__copy {
    max-width: 720px;
}

.resources-hero__photo {
    position: relative;
    min-height: 500px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.resources-hero__image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center;
}

.resources-hero__photo::after {
    position: absolute;
    inset: 48% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.86)
        );
    pointer-events: none;
}

.resources-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-weight: 800;
}


/* Featured guide */

.resource-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.resource-feature__content {
    padding: clamp(2.5rem, 6vw, 5rem);
}

.resource-feature__content h2,
.resource-feature__content p {
    color: var(--white);
}

.resource-feature__content .eyebrow {
    color: #d9efc8;
}

.resource-feature__lead {
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    font-weight: 700;
}

.resource-feature__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.resource-feature__content .button-primary {
    color: var(--pine);
    background: var(--white);
}

.resource-feature__content .button-primary:hover {
    background: var(--moss);
}

.resource-file-note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.86rem;
    font-weight: 700;
}

.resource-feature__summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--pine-deep);
}

.resource-feature__summary .card-kicker {
    color: #d9efc8;
}

.resource-checklist {
    display: grid;
    margin: 1rem 0 0;
    padding: 0;
    gap: 0.85rem;
    list-style: none;
}

.resource-checklist li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--white);
}

.resource-checklist li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gold);
    content: "✓";
    font-weight: 900;
}


/* Current resource links */

.resource-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

.resource-link-card {
    display: flex;
    flex-direction: column;
    min-height: 350px;
}

.resource-link-card__icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-small);
    color: var(--pine);
    background: var(--moss);
    font-size: 1.4rem;
    font-weight: 900;
}

.resource-link-card p {
    color: var(--muted);
}

.resource-link-card .text-link {
    margin-top: auto;
}


/* Future resources */

.resource-coming-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

.resource-coming-card {
    min-height: 315px;
    border-style: dashed;
    background:
        linear-gradient(
            135deg,
            var(--white),
            var(--cream)
        );
}

.resource-coming-card__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.resource-status {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.resource-coming-card p {
    color: var(--muted);
}


/* Disclaimer */

.resource-boundary-note {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.resource-boundary-note p {
    color: var(--muted);
}


/* Resources page — tablet */

@media (max-width: 1040px) {

    .resources-hero__grid,
    .resource-feature,
    .resource-boundary-note {
        grid-template-columns: 1fr;
    }

    .resources-hero__photo,
    .resources-hero__image {
        min-height: 470px;
    }

    .resource-link-grid,
    .resource-coming-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Resources page — mobile */

@media (max-width: 760px) {

    .resources-hero__photo,
    .resources-hero__image {
        min-height: 400px;
    }

    .resource-link-grid,
    .resource-coming-grid {
        grid-template-columns: 1fr;
    }

    .resource-link-card,
    .resource-coming-card {
        min-height: 0;
    }
}


/* Resources page — small mobile */

@media (max-width: 480px) {

    .resources-hero__photo,
    .resources-hero__image {
        min-height: 330px;
    }

    .resource-feature__content,
    .resource-feature__summary,
    .resource-boundary-note {
        padding: 1.75rem;
    }
}

/* =========================================================
   OUR PEOPLE PAGE
   ========================================================= */

/* Hero */

.people-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.people-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.people-hero__copy {
    max-width: 740px;
}

.people-hero__photo {
    position: relative;
    min-height: 510px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.people-hero__image {
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center;
}

.people-hero__photo::after {
    position: absolute;
    inset: 48% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.86)
        );
    pointer-events: none;
}

.people-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-weight: 800;
}


/* Sections */

.people-section {
    scroll-margin-top: 7rem;
}

.people-grid {
    display: grid;
    align-items: start;
    gap: 1.35rem;
}

.people-grid--executive,
.people-grid--council {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.people-council-note {
    margin-bottom: 1.5rem;
    padding: 1.15rem 1.3rem;
    border-left: 4px solid var(--leaf);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: var(--moss-light);
}

.people-council-note p {
    margin: 0;
    color: var(--muted);
}


/* Profile cards */

.people-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.people-card__photo {
    position: relative;
    height: 315px;
    min-height: 315px;
    overflow: hidden;
    background: var(--moss);
}

.people-card__image {
    width: 100%;
    height: 100%;
    min-height: 315px;
    object-fit: cover;
}

.people-card__image.photo-placeholder {
    display: grid;
    place-items: center;
    padding: 2rem;
    color: var(--pine);
    background:
        linear-gradient(
            135deg,
            var(--moss),
            var(--cream)
        );
    font-weight: 800;
    text-align: center;
}

.people-card__group {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    color: var(--white);
    background: rgba(8, 47, 39, 0.92);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.people-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.65rem;
}

.people-card__content h3 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}

.people-card__role {
    margin-bottom: 1.25rem;
    color: var(--leaf-dark);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.people-card__bio p {
    color: var(--muted);
}

.people-card__placeholder {
    margin-top: auto;
    padding: 1rem 1.05rem;
    border: 1px dashed rgba(95, 143, 63, 0.45);
    border-radius: var(--radius-small);
    background: var(--cream);
}

.people-card__placeholder p {
    color: var(--muted);
}

.people-card__dream {
    margin-top: 1.25rem;
    padding: 1rem 1.05rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: #fff7df;
}

.people-card__dream p:last-child {
    margin-bottom: 0;
    color: var(--pine-deep);
}

.people-card__park-link {
    margin-top: auto;
    padding-top: 1.25rem;
}


/* Join section */

.people-join-card {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border-radius: var(--radius-large);
    color: var(--white);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.people-join-card h2,
.people-join-card p {
    color: var(--white);
}

.people-join-card .eyebrow {
    color: #d9efc8;
}

.people-join-card .button-primary {
    color: var(--pine);
    background: var(--white);
}

.people-join-card .button-primary:hover {
    background: var(--moss);
}


/* People page — tablet */

@media (max-width: 1040px) {

    .people-hero__grid,
    .people-join-card {
        grid-template-columns: 1fr;
    }

    .people-hero__photo,
    .people-hero__image {
        min-height: 470px;
    }

    .people-grid--executive,
    .people-grid--council {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* People page — mobile */

@media (max-width: 760px) {

    .people-hero__photo,
    .people-hero__image {
        min-height: 400px;
    }

    .people-grid--executive,
    .people-grid--council {
        grid-template-columns: 1fr;
    }

    .people-card__photo,
    .people-card__image {
        min-height: 360px;
    }

    .people-card__photo {
        height: 360px;
    }
}


/* People page — small mobile */

@media (max-width: 480px) {

    .people-hero__photo,
    .people-hero__image {
        min-height: 330px;
    }

    .people-card__photo,
    .people-card__image {
        min-height: 320px;
    }

    .people-card__photo {
        height: 320px;
    }

    .people-card__content,
    .people-join-card {
        padding: 1.5rem;
    }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

/* Hero */

.contact-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.contact-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.contact-hero__copy {
    max-width: 730px;
}

.contact-hero__status {
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid rgba(240, 182, 61, 0.6);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            var(--white)
        );
    box-shadow: var(--shadow-strong);
}

.contact-hero__status p {
    color: var(--muted);
}

.contact-status-badge {
    display: inline-flex;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* Contact routes */

.contact-route-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.15rem;
}

.contact-route-card {
    display: flex;
    flex-direction: column;
    min-height: 315px;
}

.contact-route-card p {
    color: var(--muted);
}

.contact-route-card .text-link {
    margin-top: auto;
}

.contact-route-card--urgent {
    border-color: #b73b34;
    background: #8f2f2a;
}

.contact-route-card--urgent h3,
.contact-route-card--urgent p {
    color: var(--white);
}

.contact-route-card--urgent .card-kicker {
    color: #ffd8d3;
}


/* Facebook community */

.contact-community-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, 0.95fr);
    min-height: 500px;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.contact-community-card__content {
    align-self: center;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.contact-community-card__content h2,
.contact-community-card__content p {
    color: var(--white);
}

.contact-community-card__content .eyebrow {
    color: #d9efc8;
}

.contact-community-note {
    margin: 1.5rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.92rem;
}

.contact-community-card__content .button-primary {
    color: var(--pine);
    background: var(--white);
}

.contact-community-card__content .button-primary:hover {
    background: var(--moss);
}

.contact-community-card__photo {
    min-height: 500px;
    overflow: hidden;
    background: var(--moss);
}

.contact-community-card__image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center;
}


/* Boundary note */

.contact-boundary-note {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.contact-boundary-note p {
    color: var(--muted);
}


/* Contact page — tablet */

@media (max-width: 1040px) {

    .contact-hero__grid,
    .contact-community-card,
    .contact-boundary-note {
        grid-template-columns: 1fr;
    }

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

    .contact-community-card__photo,
    .contact-community-card__image {
        min-height: 430px;
    }
}


/* Contact page — mobile */

@media (max-width: 760px) {

    .contact-route-grid {
        grid-template-columns: 1fr;
    }

    .contact-route-card {
        min-height: 0;
    }

    .contact-community-card__photo,
    .contact-community-card__image {
        min-height: 350px;
    }
}


/* Contact page — small mobile */

@media (max-width: 480px) {

    .contact-hero__status,
    .contact-community-card__content,
    .contact-boundary-note {
        padding: 1.5rem;
    }

    .contact-community-card__photo,
    .contact-community-card__image {
        min-height: 300px;
    }
}

/* =========================================================
   GET INVOLVED PAGE
   ========================================================= */

/* Hero */

.involved-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.involved-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.involved-hero__copy {
    max-width: 740px;
}

.involved-hero__photo {
    position: relative;
    min-height: 510px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.involved-hero__image {
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center;
}

.involved-hero__photo::after {
    position: absolute;
    inset: 48% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.86)
        );
    pointer-events: none;
}

.involved-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-weight: 800;
}


/* Ways to help */

#ways-to-help,
#meetings,
#park-representatives,
#volunteer,
#photographs {
    scroll-margin-top: 7rem;
}

.involved-option-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.15rem;
}

.involved-option-card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
}

.involved-option-card__icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-small);
    background: var(--moss);
    font-size: 1.45rem;
}

.involved-option-card p {
    color: var(--muted);
}

.involved-option-card .text-link {
    margin-top: auto;
}


/* Feature sections */

.involved-feature-section {
    background: var(--white);
}

.involved-feature {
    display: grid;
    grid-template-columns:
        minmax(330px, 0.95fr)
        minmax(0, 1.05fr);
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.involved-feature--reverse {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, 0.95fr);
}

.involved-feature--reverse .involved-feature__photo {
    grid-column: 2;
    grid-row: 1;
}

.involved-feature--reverse .involved-feature__content {
    grid-column: 1;
    grid-row: 1;
}

.involved-feature__photo {
    min-height: 520px;
    overflow: hidden;
    background: var(--moss);
}

.involved-feature__image {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

.involved-feature__content {
    align-self: center;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.involved-feature__content h2,
.involved-feature__content p {
    color: var(--white);
}

.involved-feature__content .eyebrow,
.involved-feature__content .card-kicker {
    color: #d9efc8;
}

.involved-feature__content .button-primary {
    color: var(--pine);
    background: var(--white);
}

.involved-feature__content .button-primary:hover {
    background: var(--moss);
}

.involved-process-note {
    margin: 1.5rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.08);
}

.involved-process-note p:last-child {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
}


/* Park representation */

.involved-representative-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.95fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            var(--moss-light),
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.involved-representative-card p {
    color: var(--muted);
}

.involved-representative-card__needs {
    padding: 1.75rem;
    border: 1px solid rgba(240, 182, 61, 0.55);
    border-radius: var(--radius);
    background: #fff8e7;
}


/* Photo contribution section */

.involved-photo-call {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.involved-photo-call__content {
    max-width: 760px;
}

.involved-photo-call__content p {
    color: var(--muted);
}

.involved-photo-guidance {
    margin: 1.5rem 0;
    padding: 1.35rem 1.5rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: #fff8e7;
}

.involved-photo-guidance ul {
    margin-bottom: 0;
    color: var(--muted);
}

.involved-photo-call__content .involved-process-note {
    border-color: rgba(95, 143, 63, 0.35);
    background: var(--moss-light);
}

.involved-photo-call__content .involved-process-note .card-kicker {
    color: var(--leaf-dark);
}

.involved-photo-call__content .involved-process-note p:last-child {
    color: var(--muted);
}

.involved-photo-call__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.involved-photo-call__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}


/* Final idea card */

.involved-idea-card {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border-radius: var(--radius-large);
    color: var(--white);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.involved-idea-card h2,
.involved-idea-card p {
    color: var(--white);
}

.involved-idea-card .eyebrow {
    color: #d9efc8;
}

.involved-idea-card .button-primary {
    color: var(--pine);
    background: var(--white);
}

.involved-idea-card .button-primary:hover {
    background: var(--moss);
}


/* Get involved — tablet */

@media (max-width: 1040px) {

    .involved-hero__grid,
    .involved-feature,
    .involved-feature--reverse,
    .involved-representative-card,
    .involved-photo-call,
    .involved-idea-card {
        grid-template-columns: 1fr;
    }

    .involved-hero__photo,
    .involved-hero__image {
        min-height: 470px;
    }

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

    .involved-feature--reverse .involved-feature__photo,
    .involved-feature--reverse .involved-feature__content {
        grid-column: auto;
        grid-row: auto;
    }

    .involved-feature__photo,
    .involved-feature__image {
        min-height: 430px;
    }
}


/* Get involved — mobile */

@media (max-width: 760px) {

    .involved-hero__photo,
    .involved-hero__image {
        min-height: 400px;
    }

    .involved-option-grid {
        grid-template-columns: 1fr;
    }

    .involved-option-card {
        min-height: 0;
    }

    .involved-feature__photo,
    .involved-feature__image {
        min-height: 350px;
    }
}


/* Get involved — small mobile */

@media (max-width: 480px) {

    .involved-hero__photo,
    .involved-hero__image {
        min-height: 330px;
    }

    .involved-feature__photo,
    .involved-feature__image {
        min-height: 300px;
    }

    .involved-feature__content,
    .involved-representative-card,
    .involved-idea-card {
        padding: 1.5rem;
    }

    .involved-photo-call__gallery {
        grid-template-columns: 1fr;
    }

    .involved-photo-call__image {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================================
   TEAM DIRECTORY PAGE
   Compact directory cards with linked individual profiles.
   ========================================================= */

.team-directory-section,
.team-vacancy-section,
#executive,
#council,
#vacancies {
    scroll-margin-top: 7rem;
}

.team-directory-grid {
    display: grid;
    gap: 1.25rem;
}

.team-directory-grid--executive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-directory-grid--council {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-directory-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.team-directory-card--featured {
    grid-column: 1 / -1;
    border-color: rgba(240, 182, 61, 0.65);
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            var(--white)
        );
}

.team-directory-card__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 126px;
    padding: 1.3rem 1.4rem;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

a.team-directory-card__inner {
    transition:
        transform 160ms ease,
        background 160ms ease;
}

a.team-directory-card__inner:hover {
    background: var(--cream);
    transform: translateY(-2px);
}

.team-directory-card--featured a.team-directory-card__inner:hover {
    background: rgba(255, 248, 231, 0.78);
}

.team-directory-card__avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--moss);
    box-shadow: 0 4px 14px rgba(8, 47, 39, 0.13);
}

.team-directory-card--featured .team-directory-card__avatar {
    border-color: #fff7df;
}

.team-directory-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.team-directory-card__initials {
    color: var(--pine);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.team-directory-card__content {
    min-width: 0;
}

.team-directory-card__group {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--leaf-dark);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-directory-card__content h3 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.team-directory-card__role {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.team-directory-card__note {
    max-width: 760px;
    margin: 0.5rem 0 0;
    color: var(--pine-deep);
    font-size: 0.94rem;
}

.team-directory-card__arrow {
    color: var(--leaf-dark);
    font-size: 1.45rem;
    font-weight: 900;
    transition: transform 160ms ease;
}

a.team-directory-card__inner:hover .team-directory-card__arrow {
    transform: translateX(4px);
}

.team-directory-note {
    margin-bottom: 1.5rem;
    padding: 1.15rem 1.3rem;
    border-left: 4px solid var(--leaf);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: var(--moss-light);
}

.team-directory-note p {
    margin: 0;
    color: var(--muted);
}


/* Vacancies */

.team-vacancy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.team-vacancy-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: clamp(1.6rem, 4vw, 2.5rem);
    gap: 2rem;
    border: 1px dashed rgba(240, 182, 61, 0.8);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.team-vacancy-card p {
    max-width: 760px;
    color: var(--muted);
}

.team-vacancy-card__status {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* Tablet */

@media (max-width: 1040px) {

    .team-directory-grid--council {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Mobile */

@media (max-width: 760px) {

    .team-directory-grid--executive,
    .team-directory-grid--council {
        grid-template-columns: 1fr;
    }

    .team-directory-card--featured {
        grid-column: auto;
    }

    .team-vacancy-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .team-vacancy-card .button {
        justify-self: start;
    }
}


/* Small mobile */

@media (max-width: 480px) {

    .team-directory-card__inner {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
        padding: 1.1rem;
    }

    .team-directory-card__avatar {
        width: 62px;
        height: 62px;
    }

    .team-directory-card__arrow {
        display: none;
    }
}

/* =========================================================
   INDIVIDUAL TEAM PROFILE PAGES
   ========================================================= */

.team-profile-hero {
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(228, 242, 218, 0.92),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--cream)
        );
}

.team-profile-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 0.5rem;
    color: var(--leaf-dark);
    font-weight: 800;
    text-decoration: none;
}

.team-profile-back:hover {
    color: var(--pine);
}

.team-profile-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.team-profile-hero__copy {
    max-width: 760px;
}

.team-profile-positions {
    display: flex;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.5rem;
    gap: 0.7rem;
}

.team-profile-position {
    display: inline-flex;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    color: var(--pine);
    background: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.team-profile-hero__photo {
    position: relative;
    min-height: 540px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--moss);
    box-shadow: var(--shadow-strong);
}

.team-profile-hero__image {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
}

.team-profile-hero__image.photo-placeholder {
    display: grid;
    place-items: center;
    padding: 2rem;
    color: var(--pine);
    background:
        linear-gradient(
            135deg,
            var(--moss),
            var(--cream)
        );
    font-weight: 800;
    text-align: center;
}

.team-profile-hero__photo::after {
    position: absolute;
    inset: 55% 0 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8, 47, 39, 0.88)
        );
    pointer-events: none;
}

.team-profile-hero__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    color: var(--white);
    font-weight: 800;
}


/* Biography and sidebar */

.team-profile-content-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.team-profile-biography {
    max-width: 780px;
}

.team-profile-biography p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.team-profile-sidebar {
    display: grid;
    gap: 1.25rem;
}

.team-profile-role-card,
.team-profile-contact-card {
    min-height: 0;
}

.team-profile-role-list {
    display: grid;
    margin: 1rem 0 0;
    padding: 0;
    gap: 0.75rem;
    list-style: none;
}

.team-profile-role-list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--pine-deep);
    font-weight: 800;
}

.team-profile-role-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gold);
    content: "✓";
    font-weight: 900;
}

.team-profile-contact-card {
    color: var(--white);
    background: var(--pine);
}

.team-profile-contact-card h2,
.team-profile-contact-card p {
    color: var(--white);
}

.team-profile-contact-card .card-kicker {
    color: #d9efc8;
}

.team-profile-contact-card .button-primary {
    color: var(--pine);
    background: var(--white);
}

.team-profile-contact-card .button-primary:hover {
    background: var(--moss);
}


/* Dream */

.team-profile-dream {
    display: grid;
    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(0, 1.3fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(2rem, 5vw, 5rem);
    border: 1px solid rgba(240, 182, 61, 0.55);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            var(--white)
        );
    box-shadow: var(--shadow-soft);
}

.team-profile-dream blockquote {
    margin: 0;
    color: var(--pine-deep);
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 800;
    line-height: 1.45;
}


/* Optional gallery */

.team-profile-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.team-profile-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.team-profile-gallery__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.team-profile-gallery__item figcaption {
    padding: 1rem 1.15rem;
    color: var(--muted);
    font-weight: 700;
}


/* Return card */

.team-profile-return-section {
    padding-top: 0;
}

.team-profile-return-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    gap: 2rem;
    border-radius: var(--radius-large);
    color: var(--white);
    background: var(--pine);
    box-shadow: var(--shadow-strong);
}

.team-profile-return-card h2 {
    color: var(--white);
}

.team-profile-return-card .eyebrow {
    color: #d9efc8;
}

.team-profile-return-card .button-primary {
    color: var(--pine);
    background: var(--white);
}

.team-profile-return-card .button-primary:hover {
    background: var(--moss);
}


/* Tablet */

@media (max-width: 1040px) {

    .team-profile-hero__grid,
    .team-profile-content-grid,
    .team-profile-dream {
        grid-template-columns: 1fr;
    }

    .team-profile-hero__photo,
    .team-profile-hero__image {
        min-height: 480px;
    }

    .team-profile-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Mobile */

@media (max-width: 760px) {

    .team-profile-hero__photo,
    .team-profile-hero__image {
        min-height: 400px;
    }

    .team-profile-sidebar,
    .team-profile-gallery {
        grid-template-columns: 1fr;
    }

    .team-profile-return-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .team-profile-return-card .button {
        justify-self: start;
    }
}


/* Small mobile */

@media (max-width: 480px) {

    .team-profile-hero__photo,
    .team-profile-hero__image {
        min-height: 330px;
    }

    .team-profile-dream,
    .team-profile-return-card {
        padding: 1.5rem;
    }
}