:root {
    --radius: 0.375rem;

    /* Brand Colors */
    --primary-light: #2a3d66;
    --primary: #132741;
    --primary-deep: #07162a;
    --primary-foreground: #f9f5ec;
    --gold: #a98e60;
    --gold-soft: #dfcfb4;
    --brown: #482a1d;
    --cream: #f3eee3;
    --white: #ffffff;

    --gold-rgb: 169, 142, 96;
    --cream-rgb: 243, 238, 227;

    /* Background & Foreground */
    --background: #fbf9f3;
    --foreground: #1c2b42;

    /* Card */
    --card: #ffffff;
    --card-foreground: var(--foreground);

    /* Popover */
    --popover: #ffffff;
    --popover-foreground: var(--foreground);

    /* Secondary */
    --secondary: var(--cream);
    --secondary-foreground: var(--primary);

    /* Muted */
    --muted: #efede5;
    --muted-foreground: #5d6475;

    /* Accent */
    --accent: var(--gold);
    --accent-foreground: var(--primary-deep);

    /* Destructive */
    --destructive: #dc2626;
    --destructive-foreground: #fafafa;

    /* Borders & Inputs */
    --border: #e0dcd1;
    --input: #e0dcd1;
    --ring: var(--gold);

    --hero-overlay: linear-gradient(90deg, rgba(15, 31, 57, 0.95) 0%, rgba(15, 31, 57, 0.80) 31%, rgba(15, 31, 57, 0.23) 63%, transparent 100%);

    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-sans: "Source Sans 3", system-ui, sans-serif;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}

.font-display {
    font-family: var(--font-display);
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-navy {
    color: var(--primary);
}

.text-gold {
    color: var(--gold);
}

.text-gold-soft {
    color: var(--gold-soft);
}

body, .sp-preloader {
    background-color: rgba(251, 249, 243, 0.7);
}

#sp-header {
    background-color: var(--primary);
    background-image: unset;
    border-bottom: 1px solid rgba(249, 245, 236, 0.1);
    position: relative;
}

#sp-header.header-sticky {
    background: var(--primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: fixed;
}

@media (max-width: 575px) {
    #sp-header,
    #sp-header .logo {
        height: 86px;
    }
}

@media (max-width: 991px) {
    #sp-header,
    #sp-header .logo {
        height: 86px;
    }
}

@media (max-width: 1032px) {
    #sp-menu.menu-with-social nav.sp-megamenu-wrapper {
        display: none !important;
    }

    #offcanvas-toggler {
        display: flex !important;
    }
}

#sp-menu .burger-icon > span,
.offcanvas-active .burger-icon > span {
    background-color: var(--primary-foreground);
}

.offcanvas-menu {
    background-color: var(--primary);
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > span,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li ul.menu-child > li > a {
    font-size: 1.125rem !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-foreground);
    padding: 10px 0px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li ul.menu-child > li > a {
    position: relative;
    display: flex;
    gap: 10px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li ul.menu-child > li > a::before {
    content: "-";
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    opacity: 1 !important;
    position: relative;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
    color: var(--primary-foreground) !important;
}

#sp-header #sp-logo .sp-module {
    order: 2;
    margin-left: 10px;
}

#sp-header #sp-logo .sp-module .logo-name,
#sp-bottom .logo-name {
    font-family: var(--font-display);
    color: var(--primary-foreground);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

#sp-header #sp-logo .sp-module .logo-subname,
#sp-bottom .logo-subname {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--gold-soft);
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a,
#sp-header #sp-menu .sp-megamenu-parent > li > span {
    text-transform: uppercase;
    color: var(--primary-foreground);
    padding: 0;
}

#sp-header #sp-menu .sp-megamenu-parent > li {
    position: relative;
    margin: 0 20px;
}

#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > .sp-menu-item.active:after,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > .sp-menu-item:hover:after,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > .sp-menu-item:focus:after {
    content: "";
    background: var(--primary-foreground);
    width: 15px;
    height: 2px;
    position: absolute;
    bottom: 20px;
    left: 0;
}

#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown.sp-dropdown-main {
    top: 90%;
}

#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner {
    border-radius: 5px;
    border-top: 3px solid var(--gold);
}

#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    font-family: var(--font-display);
    font-size: 1.125rem !important;
    font-weight: 600;
    text-decoration: none;
}

#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner li.sp-menu-item > a,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner li.sp-menu-item > span {
    padding: 12px 20px;
}

#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner li.sp-menu-item:hover > a,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner li.sp-menu-item:hover > span {
    background-color: var(--primary-foreground);
    border-radius: 5px;
}

.addon-root-js-slideshow .sppb-addon-sp-slider .sp-slider-outer-stage .sp-item .sp-background::after {
    background: var(--hero-overlay) !important;
}

.sp-slider-btn-text {
    font-family: var(--font-display);
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--border);
}

/* Resource Card */
.resource-card {
    padding: 2rem;
    background-color: var(--card);
    color: var(--card-foreground);
}

/* Card Icon */
.resource-card-icon {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--gold);
}

/* Card Heading */
.resource-card h3 {
    margin: 1.5rem 0 0;
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Card Description */
.resource-card p {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Tablet */
@media (min-width: 640px) {
    .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .resource-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#sp-footer, #sp-bottom {
    background-color: var(--primary-deep);
}

#sp-footer {
    padding: 32px 0;
    border-top: 1px solid rgba(249, 245, 236, 0.1);
}

#sp-footer a {
    color: var(--primary-foreground);
}

#sp-footer a:hover {
    color: var(--gold-soft);
}

#sp-footer .sp-copyright {
    padding: 0;
    margin-bottom: 0;
}

#sp-footer #sp-footer-2 {
    text-align: right;
}

@media (max-width: 767px) {
    #sp-footer .sp-copyright {
        text-align: center;
    }

    #sp-footer #sp-footer-2 {
        margin-top: 12px;
        text-align: center;
    }
}

#sp-bottom {
    padding: 64px 0;
    border-radius: 0 !important;
}

#sp-bottom .bottom-logo a {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

#sp-bottom .bottom-logo img {
    max-width: 80px;
}

#sp-bottom .bottom-logo .logo-name {
    font-size: 1.5rem;
}

#sp-bottom .bottom-logo .logo-subname {
    font-size: 1rem;
}

#sp-bottom .bottom-logo div {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#sp-bottom .menu-detail-button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    color: #CBD5E1;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

#sp-bottom .menu-detail-button:hover,
#sp-bottom .menu-detail-button:focus {
    color: #ffffff;
    text-decoration: none;
}

#sp-bottom .menu-detail-button svg {
    color: #a98e60;
    width: 0.875rem;
    height: 0.875rem;
}

/* Badge Base */
#sp-bottom .menu-detail-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* COPE Badge */
#sp-bottom .menu-detail-badge--cope {
    background-color: #052e16;
    color: #86efac;
    border-color: #166534;
}

/* Watchdog Badge */
#sp-bottom .menu-detail-badge--watchdog {
    background-color: #450a0a;
    color: #fca5a5;
    border-color: #991b1b;
}

#sp-bottom .menu-detail-badge--relief {
    background-color: #263f5c;
    color: #e8d5b5;
    border-color: #263f5c;
}

#sp-bottom .menu-detail-button.menu-detail-button--between {
    display: flex;
    justify-content: space-between;
}

/* Mission Grid */
.mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Mission Card */
.mission-card {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 0;
}

/* Icon and Number */
.mission-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mission-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--gold, #c9a24a);
}

.mission-number {
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
}

/* Title */
.mission-title {
    margin: 24px 0 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
}

/* Description */
.mission-description {
    margin: 16px 0 0;
    font-size: inherit;
    line-height: 1.625;
    color: #cbd5e1;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .mission-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }
}

/* Highlights Grid */
.history-highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 8px;
}

/* Highlight Card */
.history-highlight-card {
    padding: 14px;
    background: rgba(248, 244, 232, 0.7);
    border: 1px solid #e4dfd3;
    border-radius: 4px;
}

/* Heading */
.history-highlight-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--primary-deep, #1c3566);
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Icon */
.history-highlight-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--gold, #c9a24a);
}

/* Description */
.history-highlight-description {
    margin: 0;
    color: #57534e;
    font-size: 0.85rem;
    line-height: 1.375;
}

/* Small Desktop and Tablet */
@media (min-width: 640px) {
    .history-highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Portrait Wrapper */
.founder-portrait-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Decorative Gold Frame */
.founder-portrait-accent {
    display: none;
    position: absolute;
    inset: -12px;
    border-radius: 8px;
    background: linear-gradient(
            to top right,
            rgba(201, 151, 66, 0.3),
            rgba(28, 53, 102, 0.1),
            transparent
    );
    transform: rotate(-1deg);
}

/* Portrait Card */
.founder-portrait-card {
    position: relative;
    padding: 12px;
    background: var(--brand-cream, #f8f4e8);
    border: 2px solid var(--brand-borderLight, #e4dfd3);
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Image Container */
.founder-portrait-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 400 / 437;
    border-radius: 4px;
    background: #1c1917;
}

/* Portrait Image */
.founder-portrait-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(100%) contrast(110%);
    transition: transform 500ms ease;
}

.founder-portrait-image-wrapper:hover .founder-portrait-image {
    transform: scale(1.05);
}

/* Bottom Gradient */
.founder-portrait-gradient {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 96px;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.3),
            transparent
    );
    pointer-events: none;
}

/* Portrait Text */
.founder-portrait-details {
    position: absolute;
    right: 16px;
    bottom: 12px;
    left: 16px;
    color: #ffffff;
}

.founder-portrait-role {
    display: block;
    color: #e8d5b5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.founder-portrait-name {
    display: block;
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.founder-portrait-dates {
    display: block;
    color: #cbd5e1;
    font-size: 11px;
}

/* Caption Plate */
.founder-portrait-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 8px 4px;
    border-top: 1px solid #e4dfd3;
    color: #78716c;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.founder-portrait-presidency {
    color: var(--primary, #1c3566);
    font-weight: 600;
}

.founder-portrait-location {
    text-align: right;
}

/* Tablet and Desktop */
@media (min-width: 640px) {
    .founder-portrait-accent {
        display: block;
    }
}

/* Small Mobile */
@media (max-width: 380px) {
    .founder-portrait-caption {
        align-items: flex-start;
        flex-direction: column;
    }

    .founder-portrait-location {
        text-align: left;
    }
}

.history-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0;
    list-style: none;
}

.history-timeline-item {
    min-width: 0;
    padding-top: 24px;
    border-top: 4px solid var(--primary, #1c3566);
}

.history-timeline-year {
    color: var(--brown, #795548);
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.history-timeline-title {
    margin: 12px 0 0;
    color: var(--primary, #1c3566);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.history-timeline-description {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.625;
}

@media (min-width: 768px) {
    .history-timeline {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 32px;
    }
}

/* Table Container */
.officers-table-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4dfd3;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Horizontal Scroll */
.officers-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.officers-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12px;
}

.officers-table th,
.officers-table td {
    padding: 12px 24px;
    vertical-align: middle;
    white-space: normal;
}

.officers-table thead {
    background: var(--primary-deep, #1c3566);
    color: #fff;
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.officers-table th {
    padding-top: 14px;
    padding-bottom: 14px;
    white-space: nowrap;
}

.officers-table tbody {
    color: #44403c;
}

.officers-table .officer-row {
    border-bottom: 1px solid #e4dfd3;
}

.officers-table .officer-row:last-child {
    border-bottom: none;
}

.officers-table .officer-row--highlight {
    background: rgba(248, 244, 232, 0.3);
}

.officers-table .officer-row--current {
    background: rgba(248, 244, 232, 0.6);
}

.officers-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.officer-office {
    color: var(--primary, #1c3566);
    font-weight: 700;
}

.officer-name {
    font-weight: 500;
}

.officer-name--bold {
    color: var(--primary, #1c3566);
    font-weight: 700;
}

.officer-tenure {
    color: #78716c;
}

.officer-tenure--medium {
    color: #57534e;
    font-weight: 500;
}

.officer-tenure--bold {
    color: var(--primary, #1c3566);
    font-weight: 700;
}

/* Footnote */
.officers-table-note {
    padding: 12px;
    background: var(--cream, #f8f4e8);
    border-top: 1px solid #e4dfd3;
    color: #78716c;
    font-size: 11px;
}

/* Tablet and Desktop */
@media (min-width: 640px) {
    .officers-table {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .officers-table th,
    .officers-table td {
        padding-right: 16px;
        padding-left: 16px;
    }

    .officers-table {
        min-width: 600px;
    }
}

/* Filter Panel */
.council-filter-panel {
    margin-bottom: 32px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--brand-borderLight, #e4dfd3);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (min-width: 640px) {
    .council-filter-panel {
        padding: 20px;
    }
}

/* Main Layout */
.council-filter-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 1024px) {
    .council-filter-layout {
        flex-direction: row;
        align-items: center;
    }
}

/* Search Wrapper */
.council-search-wrapper {
    position: relative;
    flex-grow: 1;
    width: 100%;
    max-width: 576px;
}

.council-search-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 14px;
    color: #a8a29e;
    pointer-events: none;
}

.council-search-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.council-search-input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 36px 10px 40px !important;
    background: rgba(248, 244, 232, 0.4) !important;
    border: 1px solid #e4dfd3 !important;
    border-radius: 4px !important;
    color: #292524 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.council-search-input::placeholder {
    color: #a8a29e !important;
    opacity: 1;
}

.council-search-input:focus {
    outline: none !important;
    border-color: var(--primary, #1c3566) !important;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(28, 53, 102, 0.08) !important;
}

/* Clear Search Button */
.council-search-clear {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #a8a29e;
    cursor: pointer;
}

.council-search-clear:hover {
    color: #44403c;
}

.council-search-clear svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Region Filter Buttons */
.council-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.council-tag-btn {
    padding: 8px 14px;
    background: var(--brand-cream, #f8f4e8);
    border: 1px solid var(--brand-borderLight, #e4dfd3);
    border-radius: 4px;
    color: #44403c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.council-tag-btn:hover {
    background: rgba(231, 229, 228, 0.7);
}

.council-tag-btn.is-active {
    background: var(--brand-navy, #1c3566);
    border-color: var(--brand-navy, #1c3566);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Results Footer */
.council-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(228, 223, 211, 0.6);
    color: #78716c;
    font-size: 11px;
}

.council-results-count {
    color: #44403c;
    font-weight: 500;
}

.council-reset-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--brand-navy, #1c3566);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.council-reset-btn:hover {
    color: var(--brand-gold, #c99742);
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 480px) {
    .council-filter-footer {
        align-items: flex-start;
    }

    .council-results-count {
        line-height: 1.5;
    }

    .council-filter-buttons {
        gap: 6px;
    }

    .council-tag-btn {
        padding: 7px 10px;
        font-size: 10px;
    }
}


/* ========================================
   COUNCIL CARD GRID
======================================== */

#councils-container,
#councils-container * {
    box-sizing: border-box;
}

#councils-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin: 0 auto;
    color: #1c2b42;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ========================================
   COUNCIL CARD
======================================== */

#councils-container .council-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0dcd1;
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(7, 22, 42, 0.06);
    transition: border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#councils-container .council-card:hover {
    border-color: #132741;
    box-shadow: 0 6px 18px rgba(7, 22, 42, 0.1);
    transform: translateY(-2px);
}

/* ========================================
   CARD HEADER
======================================== */

#councils-container .council-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    background: #132741;
    color: #f9f5ec;
}

#councils-container .council-card-heading {
    flex: 1;
    min-width: 0;
}

#councils-container .council-card-category {
    display: block;
    margin-bottom: 0.375rem;
    color: #a98e60;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
}

#councils-container .council-card-title {
    margin: 0;
    padding: 0;
    color: #f9f5ec;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

#councils-container .council-card:hover .council-card-title {
    color: #e8d5b5;
}

#councils-container .council-region-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ========================================
   CARD BODY
======================================== */

#councils-container .council-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #ffffff;
    color: #1c2b42;
}

#councils-container .council-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eae7df;
}

#councils-container .council-contact-item {
    min-width: 0;
}

#councils-container .council-field-label {
    display: block;
    margin: 0 0 0.3rem;
    color: #85878b;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
}

#councils-container .council-contact-name {
    margin: 0.125rem 0 0;
    color: #132741;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#councils-container .council-email {
    display: block;
    margin-top: 0.125rem;
    color: #132741;
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

#councils-container .council-email:hover {
    color: #a98e60;
}

#councils-container .council-phone-text {
    margin-top: 0.125rem;
    color: #5d6475;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

#councils-container .council-meeting-day {
    margin-top: 0.125rem;
    color: #1c2b42;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
}

#councils-container .council-meeting-time {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    color: #a98e60;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

#councils-container .council-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    vertical-align: middle;
}

/* ========================================
   COUNTY JURISDICTION
======================================== */

#councils-container .council-jurisdiction {
    min-width: 0;
}

#councils-container .council-county-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

#councils-container .council-county {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #f3eee3;
    border: 1px solid #e0dcd1;
    border-radius: 0.25rem;
    color: #5d6475;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ========================================
   MEETING LOCATION
======================================== */

#councils-container .council-location {
    padding-top: 0.875rem;
    border-top: 1px solid #eae7df;
}

#councils-container .council-address-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.375rem;
    color: #482a1d;
    font-size: 0.75rem;
    line-height: 1.6;
}

#councils-container .council-location-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: #a98e60;
}

#councils-container .council-address-name {
    display: inline;
    color: #132741;
    font-weight: 700;
}

#councils-container .council-address-detail {
    display: block;
    margin-top: 0.125rem;
    color: #5d6475;
    font-weight: 400;
    overflow-wrap: anywhere;
}

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

#councils-container .council-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(243, 238, 227, 0.6);
    border-top: 1px solid #e0dcd1;
}

#councils-container .council-footer-label {
    color: #5d6475;
    font-size: 0.6875rem;
    line-height: 1.5;
}

/* ========================================
   CREDENTIAL BUTTON
======================================== */

#councils-container .council-credential-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: #132741;
    border: 1px solid #132741;
    border-radius: 0.25rem;
    color: #ffffff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(7, 22, 42, 0.08);
    transition: background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

#councils-container .council-credential-btn:hover {
    background: #a98e60;
    border-color: #a98e60;
    color: #07162a;
}

#councils-container .council-credential-btn:focus-visible {
    outline: 2px solid #a98e60;
    outline-offset: 3px;
}

#councils-container .council-credential-btn .council-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 767px) {
    #councils-container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    #councils-container .council-card-title {
        font-size: 1.5rem;
    }
}

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

@media (max-width: 480px) {
    #councils-container {
        gap: 1rem;
    }

    #councils-container .council-card-header {
        gap: 0.5rem;
        padding: 1rem;
    }

    #councils-container .council-card-title {
        font-size: 1.375rem;
    }

    #councils-container .council-card-body {
        gap: 1rem;
        padding: 1rem;
    }

    #councils-container .council-contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    #councils-container .council-card-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem;
    }

    #councils-container .council-credential-btn {
        width: 100%;
    }
}

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

@media (max-width: 360px) {
    #councils-container .council-card-header {
        flex-direction: column;
    }

    #councils-container .council-region-badge {
        align-self: flex-start;
    }

    #councils-container .council-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Staff Cards
   Adjust the brand variables below to match your site's palette.
   ========================================================================== */

.staff-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .staff-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Card */
.staff-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(247, 243, 234, 0.4); /* cream at 40% */
    background-color: color-mix(in srgb, var(--cream) 40%, transparent);
    border: 1px solid #E5DFD3;
    border-radius: 4px;
}

/* Photo */
.staff-photo {
    width: 5rem;
    height: 6rem;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #e7e5e4;
    border: 1px solid #E5DFD3;
    border-radius: 4px;
}

.staff-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Text column */
.staff-info {
    font-size: 0.75rem;
    line-height: 1.375;
    color: #44403c;
}

.staff-info > * {
    margin: 0;
}

.staff-info > * + * {
    margin-top: 0.375rem;
}

.staff-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--staff-navy);
}

.staff-title {
    font-family: var(--font-display);
    font-size: 0.825rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
}

.staff-bio {
    padding-top: 0.25rem;
    font-size: 0.875rem;
    color: #57534e;
}

.staff-note {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a8a29e;
}

/* Contact line */
.staff-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

.staff-contact-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--gold);
}

/* ==========================================================================
   Executive Board – Leader Cards
   Adjust the brand variables below to match your site's palette.
   ========================================================================== */

.leader-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .leader-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Card */
.leader-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #E5DFD3;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.leader-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.leader-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .leader-card-body {
        flex-direction: row;
        padding: 1.75rem;
    }
}

/* Avatar */
.leader-avatar {
    position: relative;
    width: 6rem;
    height: 7rem;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--leader-navy);
    border: 2px solid rgba(232, 217, 181, 0.6); /* sand at 60% */
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (min-width: 640px) {
    .leader-avatar {
        width: 7rem;
        height: 8rem;
    }
}

.leader-card--treasurer .leader-avatar {
    border-color: rgba(18, 41, 64, 0.3); /* navy at 30% */
}

.leader-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(1) contrast(1.1);
    transition: filter 0.3s ease;
}

.leader-card:hover .leader-avatar-img {
    filter: grayscale(0) contrast(1.1);
}

.leader-avatar-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 0;
    text-align: center;
    background-color: rgba(18, 41, 64, 0.9);
}

.leader-avatar-label span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #E8D9B5;
}

/* Details */
.leader-details {
    flex-grow: 1;
}

.leader-details > * {
    margin: 0;
}

.leader-details > * + * {
    margin-top: 0.5rem;
}

.leader-details-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.leader-role-badge {
    padding: 2px 0.5rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    background-color: rgba(18, 41, 64, 0.05);
    border: 1px solid rgba(201, 151, 66, 0.3); /* gold at 30% */
    border-radius: 4px;
}

.leader-card--treasurer .leader-role-badge {
    color: var(--primary);
    border-color: rgba(18, 41, 64, 0.2);
}

.leader-since {
    font-size: 11px;
    font-weight: 600;
    color: #78716c;
}

.leader-name {
    font-family: var(--leader-font-condensed);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--primary);
}

@media (min-width: 640px) {
    .leader-name {
        font-size: 1.875rem;
    }
}

.leader-bio {
    font-size: 0.75rem;
    line-height: 1.625;
    color: #57534e;
}

/* Location / credential line */
.leader-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
    font-size: 11px;
    font-weight: 500;
    color: #78716c;
}

.leader-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.leader-icon {
    flex-shrink: 0;
    color: var(--gold);
}

.leader-meta-item .leader-icon {
    width: 12px;
    height: 12px;
}

/* Footer action bar */
.leader-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: rgba(247, 243, 234, 0.7); /* cream at 70% */
    background-color: color-mix(in srgb, var(--cream) 70%, transparent);
    border-top: 1px solid #E8D9B5;
}

.leader-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    color: var(--primary);
    transition: color 0.15s ease;
}

.leader-contact-link .leader-icon {
    width: 14px;
    height: 14px;
}

.leader-contact-link:hover {
    color: var(--gold);
}

.leader-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.leader-profile-btn:hover {
    color: var(--gold);
}

/* ==========================================================================
   Board Filter Panel
   Adjust the brand variables below to match your site's palette.
   ========================================================================== */

.board-filter-panel {
    --board-navy: #122940;
    --board-gold: #C99742;
    --board-cream: #F7F3EA;
    --board-border: #E5DFD3;

    box-sizing: border-box;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid var(--board-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.board-filter-panel *,
.board-filter-panel *::before,
.board-filter-panel *::after {
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .board-filter-panel {
        padding: 1.25rem;
    }
}

/* Layout: search + pills */
.board-filter-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .board-filter-layout {
        flex-direction: row;
        align-items: center;
    }
}

/* Search */
.board-search-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 36rem;
}

.board-search-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 0.875rem;
    color: #a8a29e;
    pointer-events: none;
}

.board-search-icon svg {
    width: 16px;
    height: 16px;
}

.board-search-input {
    width: 100% !important;
    padding: 0.625rem 2.25rem 0.625rem 2.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    color: #292524 !important;
    background-color: rgba(247, 243, 234, 0.4) !important; /* cream at 40% */
    background-color: color-mix(in srgb, var(--board-cream) 40%, transparent) !important;
    border: 1px solid var(--board-border) !important;
    border-radius: 4px !important;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.board-search-input::placeholder {
    color: #a8a29e;
}

.board-search-input:focus {
    background-color: #fff !important;
    border-color: var(--board-navy) !important;
}

.board-search-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 0;
    color: #a8a29e;
    background: none;
    border: 0;
    cursor: pointer;
}

.board-search-clear:hover {
    color: #44403c;
}

.board-search-clear svg {
    width: 14px;
    height: 14px;
}

/* Sector pills */
.board-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.board-tag-btn {
    padding: 0.5rem 0.875rem;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #44403c;
    background-color: var(--board-cream);
    border: 1px solid var(--board-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.board-tag-btn:hover {
    background-color: rgba(231, 229, 228, 0.7);
}

.board-tag-btn.is-active,
.board-tag-btn.is-active:hover {
    color: #fff;
    background-color: var(--board-navy);
    border-color: var(--board-navy);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Results counter bar */
.board-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    font-size: 11px;
    color: #78716c;
    border-top: 1px solid rgba(229, 223, 211, 0.6); /* border at 60% */
}

.board-results-count {
    font-weight: 500;
    color: #44403c;
}

.board-reset-btn {
    padding: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--board-navy);
    background: none;
    border: 0;
    cursor: pointer;
}

.board-reset-btn:hover {
    color: var(--board-gold);
    text-decoration: underline;
}

/* ==========================================================================
   Board Members – Vice-President Cards
   Adjust the brand variables below to match your site's palette.
   ========================================================================== */

.board-card-grid {
    --board-navy: #122940;
    --board-gold: #C99742;
    --board-sand: #E8D9B5;
    --board-cream: #F7F3EA;
    --board-border: #E5DFD3;
    --board-font-condensed: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .board-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .board-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Card */
.board-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--board-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease;
}

.board-card:hover {
    border-color: var(--board-navy);
}

/* Header banner */
.board-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #fff;
    background-color: var(--board-navy);
}

.board-card-role {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--board-gold);
}

.board-card-name {
    margin: 0;
    font-family: var(--board-font-condensed);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: inherit;
    transition: color 0.15s ease;
}

.board-card:hover .board-card-name {
    color: var(--board-sand);
}

.board-card-badge {
    padding: 2px 0.5rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--board-sand);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Body */
.board-card-body {
    flex-grow: 1;
    padding: 1.25rem;
    font-size: 0.75rem;
    color: #44403c;
}

@media (min-width: 640px) {
    .board-card-body {
        padding: 1.5rem;
    }
}

.board-field + .board-field {
    margin-top: 1rem;
}

.board-field-label {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a8a29e;
}

.board-org-name {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.375;
    color: var(--board-navy);
}

.board-field--contact {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(229, 223, 211, 0.6);
}

.board-field--contact .board-field-label {
    margin-bottom: 0.25rem;
}

.board-email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    word-break: break-all;
    color: var(--board-navy);
    text-decoration: underline;
    text-decoration-color: var(--board-border);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.board-email-link:hover {
    color: var(--board-gold);
    text-decoration-color: var(--board-gold);
}

.board-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--board-gold);
}

/* Footer */
.board-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: rgba(247, 243, 234, 0.6); /* cream at 60% */
    background-color: color-mix(in srgb, var(--board-cream) 60%, transparent);
    border-top: 1px solid var(--board-border);
}

.board-footer-label {
    font-size: 11px;
    font-weight: 500;
    color: #78716c;
}

.board-message-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: var(--board-navy);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.board-message-btn:hover {
    color: var(--board-navy);
    background-color: var(--board-gold);
}

.board-message-btn svg {
    width: 12px;
    height: 12px;
}

/* ==========================================================================
   Recent Presses
   ========================================================================== */
.article-list.article-list-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .article-list.article-list-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/*
@media (min-width: 1024px) {
    .article-list.article-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
 */
.article-list.article-list-grid .article-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #E5DFD3;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.article-list.article-list-grid .article-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
    .article-list.article-list-grid .article-card {
        padding: 1.75rem;
    }
}

.article-list.article-list-grid .article-card .published {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.25rem;
    color: #a8a29e;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1;
}

.article-list.article-list-grid .article-card .published svg {
    display: inline;
    color: var(--gold);
    width: 0.875rem;
    height: 0.875rem;
}

.article-list.article-list-grid .article-card .title h2 {
    letter-spacing: -0.025em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.875rem;
    line-height: 2rem;
}

@media (min-width: 640px) {
    .article-list.article-list-grid .article-card .title h2 {
        font-size: 2rem;
        line-height: 2.25rem;
    }
}

.article-list.article-list-grid .article-card .title h2 a {
    color: var(--primary);
}

.article-list.article-list-grid .article-card:hover .title h2 a {
    color: var(--gold);
}

.article-list.article-list-grid .article-card .description > :last-child {
    margin-bottom: 0;
}

.article-list.article-list-grid .article-card .bottom-wrap {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ded6c9b3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article-list.article-list-grid .article-card .bottom-wrap .press-bureau {
    font-weight: 500;
    font-size: 0.75rem;
    color: #a8a29e;
}

@media (max-width: 767px) {
    .article-list.article-list-grid .article-card .bottom-wrap .press-bureau {
        display: none;
    }
}

.article-list.article-list-grid .article-card .press-release-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.article-list.article-list-grid .article-card .press-release-btn:hover {
    background-color: var(--gold);
}

.article-list.article-list-grid .article-card .press-release-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ==========================================================================
   Press Desk & Media Kit Card
   Adjust the brand variables below to match your site's palette.
   ========================================================================== */

.press-card {
    box-sizing: border-box;
    padding: 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

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

.press-card > * + * {
    margin-top: 1rem;
}

/* Header */
.press-card-header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #1b3b5c;
}

.press-card-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.press-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.75rem;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #fff;
}

/* Body text */
.press-card-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.625;
    color: #cbd5e1;
}

/* Buttons */
.press-card-actions {
    padding-top: 0.25rem;
}

.press-card-actions > * + * {
    margin-top: 0.625rem;
}

.press-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.press-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.press-btn--primary {
    color: var(--primary);
    background-color: var(--gold-soft);
}

.press-btn--primary:hover {
    color: var(--white);
    background-color: var(--gold);
}

.press-btn--secondary {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.press-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#sp-left .sp-module, #sp-right .sp-module {
    padding: 0;
    border: none;
}

/* ==========================================================================
   App Modal
   Uses the site's :root variables (--primary, --gold, --cream, ...).
   ========================================================================== */

.app-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--primary-deep) 85%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Hidden state: works with either a "hidden" class or the hidden attribute */
.app-modal.hidden,
.app-modal[hidden] {
    display: none;
}

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

/* Dialog box */
.app-modal-box {
    font-family: var(--font-sans);
    width: 100%;
    max-width: 42rem;
    overflow: hidden;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 0.125rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Header */
.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--white);
    background-color: var(--primary);
    border-bottom: 1px solid #1c3959;
}

.app-modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.app-modal-close {
    display: inline-flex;
    padding: 0.25rem;
    color: #94a3b8;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s ease;
}

.app-modal-close:hover {
    color: var(--white);
}

.app-modal-close:focus {
    outline: none;
}

.app-modal-close:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--white) 60%, transparent);
    outline-offset: 2px;
}

/* Body */
.app-modal-body {
    max-height: 75vh;
    padding: 1.5rem;
    overflow-y: auto;
    font-size: 0.75rem;
    line-height: 1.625;
    color: var(--foreground);
    scrollbar-width: thin;
}

.app-modal-content > * + * {
    margin-top: 1rem;
}

.app-modal-info {
    padding: 0.75rem;
    font-size: 0.875rem;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.app-modal-info p {
    margin: 0;
}

.app-modal-info p + p {
    margin-top: 0.375rem;
}

.app-modal-hours {
    margin: 16px 0 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Footer */
.app-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.875rem 1.5rem;
    background-color: var(--cream);
    border-top: 1px solid var(--border);
}

.app-modal-close-btn {
    padding: 0.625rem 1.25rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--primary);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.app-modal-close-btn:hover {
    background-color: #1B3B5C;
}

/* ==========================================================================
   Social Card (Facebook Dispatch)
   Uses the site's :root variables. Facebook blue has no variable, so it's hex.
   ========================================================================== */

.social-card {
    font-family: var(--font-sans);
    overflow: hidden;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 0.125rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Header */
.social-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--white);
    background-color: #1877F2;
}

.social-card-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

.social-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: inherit;
}

.social-card-follow {
    padding: 2px 0.5rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background-color: color-mix(in srgb, var(--white) 20%, transparent);
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.social-card-follow:hover {
    color: var(--white);
    background-color: color-mix(in srgb, var(--white) 30%, transparent);
}

/* Feed container: draws a divider between posts if they're direct children */
.social-card-feed > * + * {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* Footer */
.social-card-footer {
    padding: 0.75rem;
    text-align: center;
    background-color: var(--background);
    border-top: 1px solid var(--border);
}

.social-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary);
    transition: color 0.15s ease;
}

.social-card-more:hover {
    color: #1877F2;
}

.social-card-more svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.social-card .ffp-feed-wrap {
    border: none !important;
}

.social-card .ffp-feed-posts-items {
    padding: 0 !important;
}

.social-card #ffp-feed-2 .ffp-feed-posts-items .ffp-feed-grid-item-content {
    padding: 0 !important;
}

.social-card #ffp-feed-2 .ffp-feed-posts-item {
    box-shadow: unset !important;
    border-bottom: 1px solid var(--border) !important;
}

.social-card #ffp-feed-2 .ffp-feed-posts-item:last-child {
    border-bottom: none !important;
}

.social-card .ffp-feed-load-more-container {
    display: none;
}

.view-category .com-content-category-blog__navigation .com-content-category-blog__pagination .pagination .page-item .page-link .fa-angle-left,
.view-category .com-content-category-blog__navigation .com-content-category-blog__pagination .pagination .page-item .page-link .fa-angle-right {
    font-family: "Font Awesome 6 Free" !important;
}

.view-category .com-content-category-blog__navigation .com-content-category-blog__pagination .pagination .page-item .page-link .fa-angle-right:before,
.view-category .com-content-category-blog__navigation .com-content-category-blog__pagination .pagination .page-item .page-link .fa-angle-left:before {
    content: var(--fa) !important;
}

.view-category .com-content-category-blog__navigation .com-content-category-blog__pagination .pagination .page-item.active .page-link {
    background-color: var(--primary-deep) !important;
}

@media (max-width: 767px) {
    #sp-right {
        margin-top: 5rem;
    }
}

/* ==========================================================================
   Endorsement Filter Panel
   Uses the site's :root variables (--primary, --gold, --cream, ...).
   ========================================================================== */

.endorsement-filter-panel {
    font-family: var(--font-sans);

    box-sizing: border-box;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.endorsement-filter-panel *,
.endorsement-filter-panel *::before,
.endorsement-filter-panel *::after {
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .endorsement-filter-panel {
        padding: 1.25rem;
    }
}

/* Layout: search + pills */
.endorsement-filter-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .endorsement-filter-layout {
        flex-direction: row;
        align-items: center;
    }
}

/* Search */
.endorsement-search-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 36rem;
}

.endorsement-search-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 0.875rem;
    color: #a8a29e;
    pointer-events: none;
}

.endorsement-search-icon svg {
    width: 16px;
    height: 16px;
}

.endorsement-search-input {
    width: 100% !important;
    padding: 0.625rem 2.25rem 0.625rem 2.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    color: var(--foreground) !important;
    background-color: color-mix(in srgb, var(--cream) 40%, transparent) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    outline: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.endorsement-search-input::placeholder {
    color: #a8a29e;
}

.endorsement-search-input:focus {
    background-color: var(--card);
    border-color: var(--primary);
}

.endorsement-search-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 0;
    color: #a8a29e;
    background: none;
    border: 0;
    cursor: pointer;
}

.endorsement-search-clear:hover {
    color: var(--foreground);
}

.endorsement-search-clear svg {
    width: 14px;
    height: 14px;
}

/* Sector pills */
.endorsement-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.endorsement-tag-btn {
    padding: 0.5rem 0.875rem;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--foreground);
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.endorsement-tag-btn:hover {
    background-color: var(--muted);
}

.endorsement-tag-btn.is-active,
.endorsement-tag-btn.is-active:hover {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Results counter bar */
.endorsement-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    font-size: 11px;
    color: var(--muted-foreground);
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.endorsement-results-count {
    font-weight: 500;
    color: var(--foreground);
}

.endorsement-reset-btn {
    padding: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    background: none;
    border: 0;
    cursor: pointer;
}

.endorsement-reset-btn:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ==========================================================================
   Endorsements – Section Header & Candidate Cards
   Uses the site's :root variables. Party and "Endorsed" badge colors have no
   matching variable, so they're hex.
   ========================================================================== */

.endorsement-section {
    font-family: var(--font-sans);
    margin-bottom: 3rem;
}

.endorsement-section > * + * {
    margin-top: 1rem;
}

/* Section header */
.endorsement-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--primary);
}

.endorsement-section-heading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.endorsement-section-marker {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--gold);
    border-radius: 2px;
}

.endorsement-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--primary);
}

@media (min-width: 640px) {
    .endorsement-section-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.endorsement-count-pill {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted-foreground);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Card grid */
.endorsement-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .endorsement-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .endorsement-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Candidate card */
.endorsement-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease;
}

.endorsement-card:hover {
    border-color: var(--primary);
}

.endorsement-card-info > * {
    margin: 0;
}

.endorsement-card-info > * + * {
    margin-top: 0.25rem;
}

.endorsement-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.endorsement-district {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
}

.endorsement-party {
    padding: 0 0.375rem;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.8;
    text-transform: uppercase;
    border-radius: var(--radius);
}

.endorsement-party--dem {
    color: #1e40af;
    background-color: #dbeafe;
}

.endorsement-party--rep {
    color: #991b1b;
    background-color: #fee2e2;
}

.endorsement-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--primary);
    transition: color 0.15s ease;
}

.endorsement-card:hover .endorsement-name {
    color: var(--gold);
}

.endorsement-counties {
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted-foreground);
}

/* Status badge */
.endorsement-card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    padding-left: 0.75rem;
}

.endorsement-status-badge {
    padding: 2px 0.5rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #065f46;
    background-color: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: var(--radius);
}

/* ==========================================================================
   House of Delegates variant (slightly more compact, navy accents)
   ========================================================================== */

.endorsement-section--house .endorsement-section-marker {
    background-color: var(--primary);
}

.endorsement-section--house .endorsement-card {
    padding: 0.875rem;
}

.endorsement-section--house .endorsement-card-info > * + * {
    margin-top: 0.125rem;
}

.endorsement-section--house .endorsement-district {
    color: var(--primary);
}

.endorsement-section--house .endorsement-card-status {
    padding-left: 0.5rem;
}

/* Leadership Grid */
.labor-leadership-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Leadership Card */
.labor-leadership-card {
    padding: 20px;
    background-color: rgba(243, 238, 227, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease;
}

.labor-leadership-card:hover {
    border-color: var(--primary);
}

/* Role Badge */
.labor-leadership-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Chairman Badge */
.labor-leadership-badge--chairman {
    color: var(--gold-soft);
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

/* Secretary-Treasurer Badge */
.labor-leadership-badge--secretary {
    color: var(--primary);
    background-color: var(--cream);
    border: 1px solid var(--border);
}

/* Director Badge */
.labor-leadership-badge--director {
    color: var(--gold);
    background-color: var(--cream);
    border: 1px solid var(--border);
}

/* Sector Vice-Chair Badge */
.labor-leadership-badge--sector {
    color: var(--muted-foreground);
    background-color: var(--white);
    border: 1px solid var(--border);
}

/* Member Name */
.labor-leadership-card h3 {
    margin: 0;
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Member Description */
.labor-leadership-card p {
    margin: 4px 0 0;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
}

/* Tablet: 2 Columns */
@media (min-width: 640px) {
    .labor-leadership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: 3 Columns */
@media (min-width: 1024px) {
    .labor-leadership-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Large Desktop: 4 Columns */
@media (min-width: 1280px) {
    .labor-leadership-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ========================================
   COPE Search and Filter Panel
======================================== */

.cope-filter-panel {
    margin-bottom: 32px;
    padding: 16px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-family: var(--font-sans);
}

/* Main Layout */
.cope-filter-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   Search Input
======================================== */

.cope-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 30rem;
    flex-grow: 1;
}

/* Search Icon */
.cope-search-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 14px;
    color: #a8a29e;
    pointer-events: none;
}

.cope-search-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Search Field */
.cope-search-input {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    padding: 10px 36px 10px 40px !important;
    background-color: rgba(243, 238, 227, 0.4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease,
    background-color 0.2s ease !important;
}

.cope-search-input::placeholder {
    color: #a8a29e !important;
    opacity: 1;
}

.cope-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
}

/* Clear Search Button */
.cope-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #a8a29e;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cope-search-clear:hover {
    color: var(--foreground);
}

.cope-search-clear svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Preserve hidden behavior */
.cope-search-clear.hidden {
    display: none;
}

/* ========================================
   Category Filter Buttons
======================================== */

.cope-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cope-tag-btn {
    display: inline-block;
    padding: 8px 14px;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: #44403c;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.8px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover State */
.cope-tag-btn:hover {
    background-color: var(--muted);
    border-color: var(--border);
}

/* Active Filter */
.cope-tag-btn.is-active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cope-tag-btn.is-active:hover {
    background-color: var(--primary-deep);
    border-color: var(--primary-deep);
}

/* Keyboard Focus */
.cope-tag-btn:focus-visible,
.cope-search-clear:focus-visible,
.cope-reset-button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ========================================
   Results Counter Bar
======================================== */

.cope-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 11px;
    line-height: 1.5;
}

.cope-count-badge {
    color: var(--muted-foreground);
    font-weight: 500;
}

/* Reset Filters */
.cope-reset-button {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cope-reset-button:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ========================================
   Responsive Layout
======================================== */

/* Small Screens */
@media (min-width: 640px) {
    .cope-filter-panel {
        padding: 20px;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .cope-filter-layout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cope-search-wrapper {
        min-width: 0;
    }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .cope-results-bar {
        align-items: flex-start;
    }

    .cope-count-badge {
        max-width: 70%;
    }

    .cope-filter-buttons {
        gap: 6px;
    }

    .cope-tag-btn {
        padding: 7px 10px;
        font-size: 11px;
    }
}

/* COPE committee – plain CSS. Adjust the variables to match your brand palette. */
.cope-wrap {
    --navy: #1b2a4a;
    --navy-light: #2a3d66;
    --gold: #b8902f;
    --cream: #faf6ec;
    --border: #e3dccb;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-500: #78716c;
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--stone-700)
}

.cope-wrap *, .cope-wrap *::before, .cope-wrap *::after {
    box-sizing: border-box
}

.cope-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.cope-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.cope-section-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: .75rem
}

.cope-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold)
}

.cope-title {
    margin: .125rem 0 0;
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--navy)
}

.cope-desc {
    margin: .25rem 0 0;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--stone-600)
}

.cope-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: .875rem;
    padding-top: .25rem
}

.cope-card {
    padding: .875rem;
    border: 1px solid var(--border);
    border-radius: .25rem;
    background: rgba(250, 246, 236, .5);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: border-color .15s, background-color .15s
}

.cope-card:hover {
    border-color: var(--navy);
    background: #fff
}

.cope-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.cope-name {
    margin: 0;
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--navy)
}

.cope-role {
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: .25rem;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--stone-600);
    text-align: right
}

.cope-org {
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--stone-700)
}

.cope-empty {
    display: none;
    text-align: center;
    padding: 4rem 2rem;
    margin: 2rem 0;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: .25rem
}

.cope-empty.is-visible {
    display: block
}

.cope-empty svg {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto .75rem;
    color: var(--gold)
}

.cope-empty h3 {
    margin: 0;
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--navy)
}

.cope-empty p {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--stone-500)
}

.cope-reset {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border: 0;
    border-radius: .25rem;
    background: var(--navy);
    color: #fff;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s
}

.cope-reset:hover {
    background: var(--navy-light)
}

.cope-reset:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

@media (min-width: 640px) {
    .cope-section {
        padding: 1.75rem
    }

    .cope-title {
        font-size: 1.5rem
    }
}

@media (min-width: 768px) {
    .cope-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (min-width: 1024px) {
    .cope-grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

/* COPE scorecard banner – plain CSS. Adjust the variables to match your brand palette. */
.cope-banner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--primary);
    color: #fff;
    border-left: 4px solid var(--gold);
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.cope-banner *, .cope-banner *::before, .cope-banner *::after {
    box-sizing: border-box
}

.cope-banner-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 48rem
}

.cope-banner-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem
}

.cope-banner-badge {
    padding: .125rem .5rem;
    border-radius: .25rem;
    background: var(--gold-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cope-banner-years {
    font-size: .75rem;
    font-weight: 600;
    color: #cbd5e1;
}

.cope-banner-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--white);
}

.cope-banner-text {
    margin: 0;
    font-size: .75rem;
    line-height: 1.625;
    color: #cbd5e1;
}

.cope-banner-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .75rem
}

.cope-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: .25rem;
    background: var(--gold-soft);
    color: var(--primary);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .1);
    transition: background-color .15s
}

.cope-banner-btn:hover {
    color: var(--primary);
    background: var(--gold)
}

.cope-banner-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px
}

.cope-banner-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

@media (min-width: 640px) {
    .cope-banner {
        padding: 1.75rem
    }

    .cope-banner-title {
        font-size: 1.875rem
    }
}

@media (min-width: 768px) {
    .cope-banner {
        flex-direction: row;
        align-items: center
    }
}

/* "Right to Work" talking points – plain CSS. Adjust the variables to match your brand palette. */
.cope-rtw {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cope-rtw-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: 0;
}

.cope-rtw-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .125rem;
    border-radius: 9999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: .5rem;
    line-height: 1;
    font-weight: 700;
}

.cope-rtw-claim {
    font-weight: 700;
    color: var(--primary);
}

.cope-rtw-detail {
    display: block;
    margin-top: .125rem;
}

.cope-rtw-detail strong {
    font-weight: 700;
}

.anti-worker-roll-call-vote-of-the-week .article.article-card .description {
    background-color: rgba(244, 239, 234, 0.3);
    border: 1px solid rgba(222, 214, 201, 0.7);
    border-radius: 0.25rem;
    padding: 1rem;
}

.anti-worker-roll-call-vote-of-the-week .article.article-card .description p {
    margin-bottom: .5rem;
}

.vote-details-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(228, 224, 215, 0.8);
    color: #be123c;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.vote-details-warning-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #e11d48;
}

/* Union benefits list – plain CSS. Adjust the variable to match your brand gold. */
.cope-benefits {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .5rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.cope-benefits-item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: 0
}

.cope-benefits-dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin-top: .5rem;
    border-radius: 9999px;
    background: var(--gold)
}

.union-march-wrapper {
    float: right;
    padding: 1rem;
}

.union-march-wrapper .union-march {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    position: relative;
}

.union-march-wrapper .union-march img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 380px;
}

/* Image caption overlay – plain CSS. Adjust the variables to match your brand palette.
   Place this inside a container with position:relative (e.g. the image wrapper). */
.union-march-wrapper .union-march .cope-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(to top, rgba(27, 42, 74, 1), rgba(27, 42, 74, .8), rgba(27, 42, 74, .3));
}

.union-march-wrapper .union-march .cope-caption-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.union-march-wrapper .union-march .cope-caption-text {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .025em;
    text-transform: uppercase
}

.union-march-wrapper .union-march-desc {
    color: #78716c;
    font-style: italic;
    font-size: 0.75rem;
    text-align: right;
    margin-top: 0.5rem;
}

.what-is-union h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    font-size: 1.5rem;
    line-height: 1.75rem;
}

/* Resource link cards – plain CSS. Adjust the variables to match your brand palette. */
.cope-links {
    --navy: #1b2a4a;
    --navy-light: #2a3d66;
    --navy-rgb: 27, 42, 74;
    --sand: #d9c7a0;
    --stone-200: #e7e5e4;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    display: grid;
    grid-template-columns:1fr;
    gap: 1.5rem;
}

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

.cope-link-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: border-color .15s;
}

.cope-link-card:hover {
    border-color: rgba(var(--navy-rgb), .6);
}

.cope-link-main {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cope-link-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cope-link-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .625rem;
    border-radius: .25rem;
    background: var(--navy);
    color: var(--sand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cope-link-badge svg {
    width: .75rem;
    height: .75rem;
    flex-shrink: 0;
}

.cope-link-domain {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--stone-400);
}

.cope-link-title {
    margin: 0;
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--navy);
}

.cope-link-title a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}

.cope-link-title a:hover {
    color: var(--gold);
}

.cope-link-title svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--stone-400);
}

.cope-link-desc {
    margin: 0;
    font-size: .75rem;
    line-height: 1.625;
    color: var(--stone-600);
}

.cope-link-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .5rem;
    font-size: 11px;
}

.cope-link-chip {
    padding: .25rem .5rem;
    border-radius: .25rem;
    background: var(--cream);
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s;
}

.cope-link-chip:hover {
    background: var(--stone-200);
}

.cope-link-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.cope-link-note {
    font-size: 11px;
    font-weight: 500;
    color: var(--stone-500);
}

.cope-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .375rem .875rem;
    border-radius: .25rem;
    background: var(--navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .15s;
}

.cope-link-btn:hover {
    background: var(--navy-light);
}

.cope-link-btn svg {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
    color: var(--sand);
}

.cope-links a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .cope-link-desc {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    .cope-links {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Film release card – plain CSS. Adjust the variables to match your brand palette. */
.cope-film {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 1.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(to bottom, #122940, #0e2133);
    border: 1px solid #1b3b5c;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
}

.cope-film *, .cope-film *::before, .cope-film *::after {
    box-sizing: border-box
}

.cope-film-glow {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    background: rgba(var(--gold-rgb), .1);
    filter: blur(40px);
    pointer-events: none
}

.cope-film-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    background: var(--gold-soft);
    color: var(--primary);
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase
}

.cope-film-disc-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14rem;
    height: 14rem;
    margin: .5rem auto
}

.cope-film-disc {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: .375rem;
    background: #1c1917;
    border: 4px solid rgba(252, 211, 77, .4);
    border-radius: 9999px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.cope-film-disc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
    transition: transform .5s
}

.cope-film-disc:hover img {
    transform: scale(1.05)
}

.cope-film-shine {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(to top right, rgba(255, 255, 255, .1), transparent, rgba(255, 255, 255, .05));
    pointer-events: none
}

.cope-film-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .75rem;
    color: #cbd5e1;
}

@media (min-width: 640px) {
    .cope-film-disc-wrap {
        width: 16rem;
        height: 16rem
    }
}

@media (prefers-reduced-motion: reduce) {
    .cope-film-disc img {
        transition: none
    }

    .cope-film-disc:hover img {
        transform: none
    }
}

/* Order card – plain CSS. Adjust the variables to match your brand palette. */
.cope-order {
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(var(--cream-rgb), .8);
    border: 2px solid var(--border);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

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

.cope-order-head {
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.cope-order-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.cope-order-title {
    margin: 0;
    font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--primary);
}

.cope-order-intro {
    margin: .25rem 0 0;
    font-size: .75rem;
    line-height: 1rem;
    color: var(--stone-600);
}

.cope-order-mail {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .5rem;
    font-size: .75rem;
    color: var(--stone-700)
}

.cope-order-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--primary)
}

.cope-order-address {
    padding: .75rem;
    background: rgba(var(--cream-rgb), .3);
    border: 1px solid var(--border);
    border-radius: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    line-height: 1.625;
    color: var(--stone-800)
}

.cope-order-contact {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding-top: .25rem;
    font-size: .75rem;
    color: var(--stone-600)
}

.cope-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.cope-order-phone {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none
}

.cope-order-phone--gold {
    color: var(--gold)
}

.cope-order-phone:hover {
    text-decoration: underline
}

.cope-order-fax {
    font-weight: 500;
    color: var(--stone-700)
}

.cope-order-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .5rem
}

.cope-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem .75rem;
    border: 0;
    border-radius: .25rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .15s
}

.cope-order-btn--primary {
    flex: 1 1 0%;
    background: var(--primary);
    color: #fff;
    font-weight: 700
}

.cope-order-btn--primary:hover {
    background: var(--primary-light)
}

.cope-order-btn--primary svg {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
    color: var(--gold-soft)
}

.cope-order-btn--secondary {
    background: var(--gold-soft);
    color: var(--primary);
    font-weight: 800
}

.cope-order-btn--secondary:hover {
    background: var(--gold)
}

.cope-order a:focus-visible, .cope-order-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

@media (min-width: 640px) {
    .cope-order-actions {
        flex-direction: row
    }
}

/* Classes used by the HTML injected into the "Order Details" modal.
   They don't depend on a parent, since the modal renders outside .cope-order. */
.cope-modal-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cope-modal-stack p {
    margin: 0;
}

.cope-modal-address {
    padding: .75rem;
    background: #faf6ec;
    border: 1px solid #e3dccb;
    border-radius: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
}

.cope-modal-note {
    font-size: .75rem;
    color: #57534e;
}


/* Toast banner – replaces the Tailwind translate-y / opacity utilities.
   Adjust the variables, position and size to match your design. */
.cope-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 100;
    max-width: calc(100% - 2rem);
    padding: .75rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border-left: 4px solid var(--gold-soft);
    border-radius: .375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .2), 0 4px 6px -4px rgba(0, 0, 0, .2);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 5rem);
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
}

.cope-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .cope-toast {
        transition: none;
    }
}

.rsfiles-layout {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.rsfiles-layout table.rsf_files thead {
    background-color: #f5f5f4;
    color: var(--primary);
}

.rsfiles-layout table.rsf_files thead th,
.rsfiles-layout table.rsf_files tbody tr td {
    padding: 0.75rem 1.25rem;
}

.rsfiles-layout table.rsf_files .rsfiles-download-info a {
    color: #292524;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rsfiles-layout table.rsf_files .rsfiles-download-info a:hover i {
    color: var(--gold);
}

/* Uses your :root variables. Only these two are local (not in your set): */
.wv-contact {
    --status-bg: #ecfdf5;
    --status-border: #a7f3d0;
    --status-text: #065f46;
    --link-blue: #1d4ed8;
}

/* ===== Layout ===== */
.wv-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    font-family: var(--font-sans);
}
.wv-contact *,
.wv-contact *::before,
.wv-contact *::after { box-sizing: border-box; }

@media (min-width: 768px) {
    .wv-contact { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Card ===== */
.wv-contact__card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.15s ease;
}
.wv-contact__card:hover {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
}

.wv-contact__body > * + * { margin-top: 0.75rem; }

/* ===== Icon ===== */
.wv-contact__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wv-contact__icon svg { width: 1.25rem; height: 1.25rem; }

/* ===== Heading ===== */
.wv-contact__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
}
.wv-contact__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--primary);
}

/* ===== Text ===== */
.wv-contact__text {
    font-size: 0.75rem;
    line-height: 1.625;
    color: var(--muted-foreground);
}
.wv-contact__text p { margin: 0; }
.wv-contact__text--tight > * + * { margin-top: 0.25rem; }
.wv-contact__text--loose > * + * { margin-top: 0.375rem; }
.wv-contact__strong { font-weight: 700; color: var(--foreground); }
.wv-contact__note { font-size: 11px; color: var(--muted-foreground); padding-top: 0.25rem; }

.wv-contact__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wv-contact__row--muted { color: var(--muted-foreground); }
.wv-contact__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

/* ===== Inline links ===== */
.wv-contact__phone {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.wv-contact__phone:hover { color: var(--gold); }

.wv-contact__email {
    font-weight: 700;
    color: var(--link-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
.wv-contact__email:hover { color: var(--primary); }

/* ===== Footer actions ===== */
.wv-contact__footer {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wv-contact__action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.wv-contact__action:hover { color: var(--gold); }
.wv-contact__action svg { width: 0.875rem; height: 0.875rem; }
.wv-contact__action .wv-contact__action-icon--gold { color: var(--gold); }

.wv-contact__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    transition: color 0.15s ease;
}
.wv-contact__copy:hover { color: var(--primary); }
.wv-contact__copy svg { width: 0.75rem; height: 0.75rem; }

/* ===== Badge ===== */
.wv-contact__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--status-bg);
    color: var(--status-text);
    border: 1px solid var(--status-border);
}

/* Uses your :root variables (--primary, --primary-light, --primary-foreground,
     --border, --card, --background, --muted, --foreground, --muted-foreground,
     --font-display). */

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

.wv-map {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background: var(--card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-sans);
}

/* Spans 7 of 12 columns on large screens (the old lg:col-span-7).
   Remove this if the parent isn't a 12-column grid. */
@media (min-width: 1024px) {
    .wv-map { grid-column: span 7 / span 7; }
}

/* ===== Header ===== */
.wv-map__header {
    background: var(--primary);
    color: #fff;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wv-map__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wv-map__heading svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary-foreground);
}
.wv-map__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wv-map__tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-foreground);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

/* ===== Map frame ===== */
.wv-map__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--muted);
}
@media (min-width: 640px) {
    .wv-map__frame { aspect-ratio: 16 / 9; }
}
.wv-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Footer ===== */
.wv-map__footer {
    padding: 1rem;
    background: var(--background);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
@media (min-width: 640px) {
    .wv-map__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.wv-map__street {
    display: block;
    font-weight: 700;
    color: var(--primary);
}
.wv-map__city {
    display: block;
    color: var(--muted-foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}
.wv-map__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== Buttons ===== */
.wv-map__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.wv-map__btn svg { width: 0.875rem; height: 0.875rem; }

.wv-map__btn--primary {
    padding: 0.375rem 0.875rem;
    background: var(--primary);
    color: #fff;
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wv-map__btn--primary:hover { background: var(--primary-light); }
.wv-map__btn--primary svg { color: var(--primary-foreground); }

.wv-map__btn--secondary {
    padding: 0.375rem 0.75rem;
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
}
.wv-map__btn--secondary:hover { background: var(--muted); }
.wv-map__btn--secondary svg { color: var(--muted-foreground); }