:root {

    --color-primary-900: #12341e;

    --color-primary-800: #163b1f;

    --color-primary-700: #1f4f2a;

    --color-primary-600: #276437;

    --color-accent-500: #d4a62a;

    --color-accent-600: #b6891e;

    --color-accent-100: #f8edc5;

    --color-surface-50: #f7faf5;

    --color-surface-100: #eef4ea;

    --color-surface-200: #d7e3d4;

    --color-white: #ffffff;

    --color-text-900: #1c291f;

    --color-text-700: #415445;

    --color-text-600: #5e7062;

    --color-text-500: #738477;

    --shadow-soft: 0 12px 30px rgba(18, 52, 30, 0.08);

    --shadow-card: 0 18px 40px rgba(18, 52, 30, 0.1);

    --shadow-hero: 0 26px 60px rgba(9, 27, 16, 0.24);

    --radius-sm: 14px;

    --radius-md: 20px;

    --radius-lg: 28px;

    --radius-pill: 999px;

    --section-space: clamp(4rem, 7vw, 6rem);

    --transition-base: 0.28s ease;

    --font-body: "Public Sans", "Trebuchet MS", sans-serif;

    --font-heading: "Merriweather", Georgia, serif;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    min-width: 320px;

    overflow-x: hidden;

    font-family: var(--font-body);

    color: var(--color-text-900);

    background:

        radial-gradient(circle at top right, rgba(212, 166, 42, 0.07), rgba(212, 166, 42, 0) 28%),

        linear-gradient(180deg, #fbfdf9 0%, #ffffff 14%, #ffffff 100%);

    line-height: 1.7;

}



body::selection {

    background: rgba(212, 166, 42, 0.25);

}



a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);

}



img {

    display: block;

    max-width: 100%;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-heading);

    color: var(--color-primary-800);

    line-height: 1.12;

    letter-spacing: -0.02em;

}



p {

    margin-bottom: 1rem;

}



@media (min-width: 1400px) {

    .container {

        max-width: 1240px;

    }

}



.section-spacing {

    padding: var(--section-space) 0;

}



.section-light {

    background:

        radial-gradient(circle at top left, rgba(212, 166, 42, 0.08), rgba(212, 166, 42, 0) 36%),

        linear-gradient(180deg, #f7faf5 0%, #eef4ea 100%);

}



.section-title-wrap {

    margin-bottom: 2.2rem;

}



.section-kicker,

.page-kicker,

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    margin-bottom: 1rem;

    padding: 0.55rem 1rem;

    border-radius: var(--radius-pill);

    background: rgba(212, 166, 42, 0.12);

    border: 1px solid rgba(212, 166, 42, 0.18);

    color: var(--color-accent-600);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.section-title {

    margin-bottom: 0.95rem;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

}



.section-text {

    max-width: 760px;

    color: var(--color-text-600);

    font-size: 1.02rem;

    line-height: 1.85;

    margin-bottom: 0;

}



.section-link {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    color: var(--color-primary-700);

    font-weight: 700;

}



.section-link:hover {

    color: var(--color-accent-600);

    transform: translateX(2px);

}



.page-hero {

    position: relative;

    overflow: hidden;

    color: var(--color-white);

    padding: clamp(5rem, 11vw, 7.5rem) 0 clamp(4rem, 9vw, 6rem);

    background-color: var(--color-primary-900);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}



.page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(120deg, rgba(18, 52, 30, 0.92), rgba(31, 79, 42, 0.82)),

        radial-gradient(circle at right top, rgba(212, 166, 42, 0.18), rgba(212, 166, 42, 0) 38%);

}



.page-hero .container {

    position: relative;

    z-index: 1;

}



.page-hero h1 {

    max-width: 820px;

    color: var(--color-white);

    margin-bottom: 1rem;

    font-size: clamp(2.2rem, 5vw, 4.2rem);

}



.page-hero p {

    max-width: 760px;

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.02rem;

    line-height: 1.85;

}



.hero-stat-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 2rem;

}



.hero-stat-card {

    min-width: 0;

    padding: 1.25rem 1.35rem;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(10px);

}



.hero-stat-card strong {

    display: block;

    color: var(--color-white);

    font-size: clamp(1.4rem, 2.8vw, 1.95rem);

    line-height: 1.15;

    margin-bottom: 0.55rem;

    overflow-wrap: anywhere;

}



.hero-stat-card span {

    color: rgba(255, 255, 255, 0.84);

    font-size: 0.94rem;

}



.surface-card,

.surface-panel,

.info-card,

.feature-card,

.stat-card,

.media-card {

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(215, 227, 212, 0.9);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);

}



.surface-card:hover,

.media-card:hover,

.feature-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-card);

}



.surface-card,

.feature-card,

.media-card {

    height: 100%;

    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

}



.icon-badge {

    width: 58px;

    height: 58px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: rgba(212, 166, 42, 0.14);

    color: var(--color-accent-600);

    font-size: 1.2rem;

}



.meta-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.65rem 0.95rem;

    border-radius: var(--radius-pill);

    border: 1px solid rgba(215, 227, 212, 0.95);

    background: #f8fbf6;

    color: var(--color-text-700);

    font-size: 0.9rem;

    font-weight: 700;

}



.meta-chip i {

    color: var(--color-accent-600);

}



.btn-muni-primary,

.btn-muni-secondary,

.btn-muni-outline,

.btn-muni-light,

.btn-muni-gold {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    min-height: 48px;

    padding: 0.8rem 1.35rem;

    border: 1px solid transparent;

    border-radius: var(--radius-pill);

    font-size: 0.95rem;

    font-weight: 800;

    line-height: 1;

    text-decoration: none;

}



.btn-muni-primary {

    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800));

    color: var(--color-white);

    box-shadow: 0 12px 24px rgba(31, 79, 42, 0.16);

}



.btn-muni-primary:hover {

    color: var(--color-white);

    transform: translateY(-1px);

    box-shadow: 0 16px 30px rgba(31, 79, 42, 0.22);

}



.btn-muni-secondary,

.btn-muni-gold {

    background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));

    color: var(--color-white);

    box-shadow: 0 12px 24px rgba(212, 166, 42, 0.2);

}



.btn-muni-secondary:hover,

.btn-muni-gold:hover {

    color: var(--color-white);

    transform: translateY(-1px);

    box-shadow: 0 16px 30px rgba(212, 166, 42, 0.28);

}



.btn-muni-outline {

    background: transparent;

    border-color: rgba(22, 59, 31, 0.18);

    color: var(--color-primary-700);

}



.btn-muni-outline:hover {

    background: var(--color-primary-800);

    border-color: var(--color-primary-800);

    color: var(--color-white);

}



.btn-muni-light {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.2);

    color: var(--color-white);

    backdrop-filter: blur(8px);

}



.btn-muni-light:hover {

    background: rgba(255, 255, 255, 0.18);

    color: var(--color-white);

}



.topbar {

    position: relative;

    z-index: 1031;

    background:

        linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800)),

        radial-gradient(circle at right, rgba(212, 166, 42, 0.16), rgba(212, 166, 42, 0) 38%);

    color: rgba(255, 255, 255, 0.92);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.topbar .container {

    padding-top: 0.85rem;

    padding-bottom: 0.85rem;

}



.topbar-layout {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 1rem 1.4rem;

}



.topbar-contact {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1rem 1.35rem;

    flex: 1 1 720px;

}



.topbar-contact span,

.topbar-contact a {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    color: rgba(255, 255, 255, 0.92);

    font-size: 0.84rem;

    font-weight: 600;

}



.topbar-contact a:hover {

    color: #fff1c6;

}



.topbar-contact i {

    color: var(--color-accent-500);

}



.topbar-highlight {

    padding: 0.42rem 0.85rem;

    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #fff1c6;

}



.topbar-social {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 0.7rem;

    flex-shrink: 0;

}



.topbar-social a {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: var(--color-white);

}



.topbar-social a:hover {

    background: rgba(212, 166, 42, 0.18);

    color: #fff1c6;

    transform: translateY(-1px);

}



.main-navbar {

    position: fixed;

    top: 0;

    z-index: 9999;

    padding: 0.9rem 0;

    background: rgba(18, 52, 30, 0.88);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(18px);

    box-shadow: 0 12px 28px rgba(18, 52, 30, 0.14);

}



.main-navbar.is-scrolled {

    background: rgba(18, 52, 30, 0.96);

    box-shadow: 0 14px 34px rgba(9, 27, 16, 0.22);

}



.main-navbar .container {

    max-width: 1320px;

}



.main-navbar .navbar-collapse {

    align-items: center;

    gap: 1rem;

}



.navbar-brand {

    margin-right: 1.4rem;

    padding: 0;

    max-width: 360px;

}



.navbar-brand-wrap {

    display: flex;

    align-items: center;

    gap: 0.95rem;

}



.navbar-logo-shell {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 18px;

    background:

        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),

        rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.navbar-logo {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 0.32rem;

}



.navbar-brand-title,

.navbar-brand-subtitle,

.navbar-brand-motto {

    margin: 0;

}



.navbar-brand-title {

    font-family: var(--font-heading);

    color: var(--color-white);

    font-size: 1.06rem;

    font-weight: 700;

}



.navbar-brand-subtitle {

    margin-top: 0.18rem;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.72rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.navbar-brand-motto {

    margin-top: 0.22rem;

    color: #ffe7a0;

    font-size: 0.72rem;

    font-weight: 700;

}



.main-navbar .navbar-nav {

    align-items: center;

    gap: 0.35rem;

}



.main-nav-list {

    flex: 1 1 auto;

    justify-content: center;

}



.nav-cta {

    flex-shrink: 0;

}



.main-navbar .nav-link {

    position: relative;

    color: rgba(255, 255, 255, 0.94);

    padding: 0.82rem 1rem;

    border-radius: var(--radius-pill);

    font-size: 0.93rem;

    font-weight: 700;

}



.main-navbar .nav-link:hover,

.main-navbar .nav-link.active,

.main-navbar .show > .nav-link {

    color: #fff4cf;

    background: rgba(255, 255, 255, 0.08);

}



.main-navbar .dropdown-menu {

    padding: 0.75rem;

    border: 1px solid rgba(215, 227, 212, 0.9);

    border-radius: 18px;

    box-shadow: 0 20px 40px rgba(18, 52, 30, 0.14);

}



.main-navbar .dropdown-item {

    display: flex;

    align-items: center;

    padding: 0.82rem 0.95rem;

    border-radius: 12px;

    color: var(--color-text-900);

    font-weight: 600;

    font-size: 0.92rem;

}



.main-navbar .dropdown-item:hover,

.main-navbar .dropdown-item:focus {

    background: var(--color-surface-50);

    color: var(--color-primary-700);

}





.main-navbar .navbar-toggler {

    border: 1px solid rgba(255, 255, 255, 0.16);

    padding: 0.55rem 0.7rem;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);

    box-shadow: none;

}



.main-navbar .navbar-toggler:focus {

    box-shadow: none;

}



.site-footer {

    position: relative;

    overflow: hidden;

    margin-top: clamp(4rem, 7vw, 6rem);

    padding: 4.25rem 0 1.35rem;

    color: rgba(255, 255, 255, 0.84);

    background:

        radial-gradient(circle at top right, rgba(212, 166, 42, 0.12), rgba(212, 166, 42, 0) 34%),

        linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800));

    border-top: 4px solid rgba(212, 166, 42, 0.88);

}



.site-footer h5 {

    color: var(--color-white);

    font-size: 1.08rem;

    font-weight: 700;

    margin-bottom: 1rem;

}



.site-footer p {

    color: rgba(255, 255, 255, 0.8);

}



.footer-brand-copy {

    max-width: 360px;

}



.footer-brand {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

}



.footer-brand-mark {

    width: 62px;

    height: 62px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    overflow: hidden;

}



.footer-brand-mark img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 0.35rem;

}



.footer-links,

.footer-contact {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li,

.footer-contact li {

    margin-bottom: 0.85rem;

}



.footer-links a {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: rgba(255, 255, 255, 0.86);

    font-weight: 600;

}



.footer-links a:hover {

    color: #fff1c6;

    transform: translateX(2px);

}



.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    color: rgba(255, 255, 255, 0.82);

}



.footer-contact i {

    width: 18px;

    margin-top: 0.2rem;

    color: var(--color-accent-500);

}



.site-footer hr {

    border-color: rgba(255, 255, 255, 0.12);

    margin: 2rem 0 1.2rem;

}



.footer-bottom {

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.92rem;

}



.footer-social {

    display: flex;

    align-items: center;

    gap: 0.65rem;

}



.footer-social a {

    width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: var(--color-white);

}



.footer-social a:hover {

    background: rgba(212, 166, 42, 0.16);

    color: #fff1c6;

    transform: translateY(-1px);

}



.home-hero {

    position: relative;

    overflow: hidden;

    min-height: max(74vh, 620px);

    background: #0f2b18;

}



.hero-slider {

    position: relative;

    min-height: inherit;

}



.hero-slider-track {

    position: relative;

    min-height: inherit;

}



.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.7s ease, visibility 0.7s ease;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}



.hero-slide.is-active {

    opacity: 1;

    visibility: visible;

}



.hero-slide::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(112deg, rgba(18, 52, 30, 0.95) 0%, rgba(18, 52, 30, 0.78) 45%, rgba(18, 52, 30, 0.5) 100%),

        radial-gradient(circle at top right, rgba(212, 166, 42, 0.2), rgba(212, 166, 42, 0) 34%);

}



.hero-slide::after {

    content: "";

    position: absolute;

    inset: auto auto -140px -110px;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(212, 166, 42, 0.16), rgba(212, 166, 42, 0));

}



.hero-slide-inner {

    position: relative;

    z-index: 1;

    min-height: inherit;

    display: flex;

    align-items: center;

    padding: clamp(5rem, 10vw, 7rem) 0 clamp(3rem, 7vw, 4rem);

}



.hero-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 360px);

    gap: 2rem;

    align-items: end;

}



.hero-copy {

    max-width: 760px;

    color: var(--color-white);

}



.hero-copy .eyebrow {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.15);

    color: #fff1c6;

}



.hero-title {

    margin-bottom: 1.1rem;

    color: var(--color-white);

    font-size: clamp(2.5rem, 6vw, 5.1rem);

}



.hero-lead {

    max-width: 680px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.05rem;

    line-height: 1.9;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.9rem;

    margin-top: 1.8rem;

}



.hero-side-panel {

    padding: 1.3rem;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: var(--radius-lg);

    backdrop-filter: blur(10px);

    box-shadow: var(--shadow-hero);

}



.hero-side-panel h3 {

    color: var(--color-white);

    font-size: 1.25rem;

    margin-bottom: 0.85rem;

}



.hero-side-panel p {

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.95rem;

    margin-bottom: 1rem;

}



.hero-stat-list {

    display: grid;

    gap: 0.85rem;

}



.hero-stat-item {

    padding: 0.9rem 1rem;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.hero-stat-item strong {

    display: block;

    color: #ffe7a0;

    font-size: 1.55rem;

    line-height: 1;

    margin-bottom: 0.35rem;

}



.hero-stat-item span {

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.9rem;

}



.hero-controls {

    position: absolute;

    inset: auto 0 1.4rem;

    z-index: 2;

}



.hero-controls-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

}



.hero-nav-group {

    display: flex;

    gap: 0.65rem;

}



.hero-control {

    width: 46px;

    height: 46px;

    border: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: var(--color-white);

    backdrop-filter: blur(8px);

}



.hero-control:hover {

    background: rgba(255, 255, 255, 0.2);

}



.hero-indicators {

    display: flex;

    align-items: center;

    gap: 0.65rem;

}



.hero-indicator {

    width: 11px;

    height: 11px;

    border: 0;

    padding: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.42);

}



.hero-indicator.is-active {

    width: 34px;

    border-radius: var(--radius-pill);

    background: var(--color-accent-500);

}



.quick-links-band {

    position: relative;

    z-index: 3;

    margin-top: -2.2rem;

}



.quick-links-shell {

    padding: 1rem;

    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid rgba(215, 227, 212, 0.9);

    box-shadow: var(--shadow-card);

}



.quick-link-card {

    display: flex;

    align-items: flex-start;

    gap: 0.9rem;

    height: 100%;

    padding: 1rem;

    border-radius: 18px;

    background: var(--color-surface-50);

    color: var(--color-text-900);

}



.quick-link-card:hover {

    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800));

    color: var(--color-white);

    transform: translateY(-2px);

}



.quick-link-card .icon-badge {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

}



.quick-link-card:hover .icon-badge {

    background: rgba(255, 255, 255, 0.12);

    color: #ffe7a0;

}



.quick-link-card strong {

    display: block;

    font-size: 1rem;

    margin-bottom: 0.25rem;

}



.quick-link-card span {

    color: var(--color-text-600);

    font-size: 0.9rem;

}



.quick-link-card:hover span {

    color: rgba(255, 255, 255, 0.82);

}



.split-feature {

    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);

    gap: 2rem;

    align-items: stretch;

}



.split-copy,

.split-panel {

    padding: clamp(1.6rem, 3vw, 2rem);

}



.split-copy ul {

    padding-left: 0;

    margin: 0;

    list-style: none;

}



.split-copy li {

    display: flex;

    gap: 0.8rem;

    align-items: flex-start;

    margin-bottom: 0.95rem;

    color: var(--color-text-700);

    font-weight: 600;

}



.split-copy li i {

    margin-top: 0.25rem;

    color: var(--color-accent-600);

}



.split-panel {

    background: linear-gradient(145deg, var(--color-primary-700), var(--color-primary-800));

    color: var(--color-white);

}



.split-panel h3,

.split-panel h4 {

    color: var(--color-white);

}



.split-panel p {

    color: rgba(255, 255, 255, 0.84);

}



.stats-stack {

    display: grid;

    gap: 0.9rem;

}



.stat-card {

    padding: 1rem 1.1rem;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.stat-card strong {

    display: block;

    color: #ffe7a0;

    font-size: 1.45rem;

    line-height: 1;

    margin-bottom: 0.4rem;

}



.stat-card span {

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.92rem;

}



.card-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.25rem;

}



.filter-shell {

    padding: 1.15rem;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(215, 227, 212, 0.92);

    box-shadow: var(--shadow-soft);

    margin-bottom: 1.75rem;

}



.filter-form {

    display: grid;

    grid-template-columns: minmax(0, 1.6fr) minmax(200px, 0.8fr) auto;

    gap: 0.9rem;

    align-items: center;

}



.search-field,

.select-field {

    width: 100%;

    min-height: 52px;

    border-radius: 16px;

    border: 1px solid rgba(215, 227, 212, 0.96);

    background: #f9fbf8;

    color: var(--color-text-900);

    padding: 0.9rem 1rem;

    font-size: 0.95rem;

}



.search-field:focus,

.select-field:focus {

    outline: none;

    border-color: rgba(31, 79, 42, 0.5);

    box-shadow: 0 0 0 4px rgba(31, 79, 42, 0.08);

}



.filter-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 1rem;

}



.list-summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.list-summary p {

    margin-bottom: 0;

    color: var(--color-text-600);

}



.file-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 0.8rem;

    border-radius: var(--radius-pill);

    background: rgba(212, 166, 42, 0.1);

    color: var(--color-accent-600);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.back-link {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: rgba(255, 255, 255, 0.9);

    font-weight: 700;

    margin-bottom: 1rem;

}



.back-link:hover {

    color: #fff1c6;

}



.detail-layout {

    display: grid;

    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);

    gap: 1.5rem;

}



.detail-main-card,

.detail-side-card {

    padding: clamp(1.5rem, 3vw, 2rem);

}



.detail-main-card img {

    width: 100%;

    margin-bottom: 1.25rem;

    border-radius: 18px;

    object-fit: cover;

}



.detail-main-card h1,

.detail-main-card h2,

.detail-main-card h3 {

    margin-bottom: 1rem;

}



.article-body {

    color: var(--color-text-700);

    line-height: 1.95;

    font-size: 1rem;

}



.article-body p:last-child {

    margin-bottom: 0;

}



.article-body ul,

.article-body ol {

    margin-bottom: 1rem;

    padding-left: 1.25rem;

}



.pagination-shell {

    margin-top: 2rem;

}



.pagination-shell .pagination {

    margin-bottom: 0;

}



.pagination-shell .page-link {

    color: var(--color-primary-700);

    border-color: rgba(215, 227, 212, 0.96);

    border-radius: 12px;

    margin: 0 4px;

    padding: 0.72rem 0.95rem;

    font-weight: 700;

    box-shadow: none;

}



.pagination-shell .page-item.active .page-link {

    background: var(--color-primary-700);

    border-color: var(--color-primary-700);

    color: var(--color-white);

}



.pagination-shell .page-item.disabled .page-link {

    color: var(--color-text-500);

}



.feature-card,

.media-card {

    padding: 1.5rem;

}



.media-thumb {

    aspect-ratio: 16 / 10;

    margin-bottom: 1rem;

    overflow: hidden;

    border-radius: 16px;

    background: var(--color-surface-100);

}



.media-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.card-kicker {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    margin-bottom: 0.8rem;

    color: var(--color-accent-600);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.card-title {

    margin-bottom: 0.8rem;

    font-size: 1.3rem;

}



.card-copy {

    color: var(--color-text-600);

    margin-bottom: 0;

    line-height: 1.8;

}



.meta-row {

    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem 1rem;

    margin-top: 1rem;

    color: var(--color-text-500);

    font-size: 0.88rem;

    font-weight: 600;

}



.meta-row i {

    color: var(--color-accent-600);

}



.cta-banner {

    padding: clamp(2rem, 4vw, 2.8rem);

    border-radius: var(--radius-lg);

    background:

        linear-gradient(140deg, var(--color-primary-700), var(--color-primary-900)),

        radial-gradient(circle at right, rgba(212, 166, 42, 0.18), rgba(212, 166, 42, 0) 38%);

    box-shadow: var(--shadow-card);

    color: var(--color-white);

}



.cta-banner h2,

.cta-banner h3 {

    color: var(--color-white);

    margin-bottom: 0.85rem;

}



.cta-banner p {

    max-width: 720px;

    color: rgba(255, 255, 255, 0.84);

    margin-bottom: 0;

}



.cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.9rem;

}



.empty-state-panel {

    padding: 2.1rem;

    text-align: center;

    border-radius: var(--radius-md);

    border: 1px dashed rgba(215, 227, 212, 1);

    background: rgba(255, 255, 255, 0.95);

}



.empty-state-panel h3,

.empty-state-panel h4 {

    margin-bottom: 0.75rem;

}



.empty-state-panel p {

    max-width: 680px;

    margin: 0 auto;

    color: var(--color-text-600);

}



.content-hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.8rem;

    margin-top: 1.25rem;

}



.notice-card,

.download-card {

    display: flex;

    flex-direction: column;

    padding: 1.5rem;

}



.notice-card-top,

.download-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1rem;

}



.notice-date {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--color-text-500);

    font-size: 0.88rem;

    font-weight: 700;

    white-space: nowrap;

}



.notice-date i {

    color: var(--color-accent-600);

}



.notice-card .card-title,

.download-card .card-title {

    font-size: 1.35rem;

}



.notice-card-footer,

.download-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 0.85rem;

    margin-top: auto;

    padding-top: 1rem;

}



.download-card-header {

    justify-content: flex-start;

}



.download-icon-shell {

    width: 64px;

    height: 64px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 20px;

    background: rgba(212, 166, 42, 0.12);

    color: var(--color-accent-600);

    font-size: 1.4rem;

}



.download-card-copy {

    flex: 1;

}



.notice-card-top {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: flex-start;

}



.notice-card-top > div,

.download-card-copy {

    min-width: 0;

}



.notice-card-footer,

.download-actions {

    padding-top: 1rem;

    border-top: 1px solid rgba(215, 227, 212, 0.9);

}



.empty-state-panel i {

    display: inline-flex;

    justify-content: center;

    margin-bottom: 1rem;

    color: var(--color-accent-600);

    font-size: 2rem;

}



.empty-state-panel .btn-muni-gold,

.empty-state-panel .btn-muni-outline,

.empty-state-panel .btn-muni-primary {

    margin-top: 1.35rem;

}



.archive-page .card-grid {

    align-items: stretch;

}



.department-directory-page .directory-stack {

    display: grid;

    gap: 1.75rem;

    margin-top: 2.25rem;

}



.department-directory-page .department-panel {

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(215, 227, 212, 0.92);

    box-shadow: var(--shadow-soft);

}



.department-directory-page .department-panel-inner {

    display: grid;

    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);

}



.department-directory-page .department-media {

    position: relative;

    min-height: 100%;

    background: var(--color-surface-100);

}



.department-directory-page .department-media img {

    width: 100%;

    height: 100%;

    min-height: 320px;

    object-fit: cover;

}



.department-directory-page .department-media-badge {

    position: absolute;

    top: 1.25rem;

    left: 1.25rem;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.65rem 0.9rem;

    border-radius: var(--radius-pill);

    background: rgba(18, 52, 30, 0.84);

    color: var(--color-white);

    font-size: 0.82rem;

    font-weight: 700;

    box-shadow: 0 12px 26px rgba(18, 52, 30, 0.2);

}



.department-directory-page .department-content {

    padding: clamp(1.35rem, 2.8vw, 2rem);

}



.department-directory-page .department-heading {

    margin-bottom: 1rem;

}



.department-directory-page .department-heading h2 {

    margin: 0;

    font-size: clamp(1.65rem, 3vw, 2rem);

}



.department-directory-page .department-chip-row {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.department-directory-page .department-description {

    margin-bottom: 1.35rem;

    color: var(--color-text-600);

    line-height: 1.85;

}



.department-directory-page .department-mandate {

    margin-bottom: 1.35rem;

    padding: 1.1rem 1.2rem;

    border-radius: var(--radius-md);

    background: var(--color-surface-50);

    border: 1px solid rgba(215, 227, 212, 0.92);

}



.department-directory-page .department-mandate h3 {

    margin-bottom: 0.45rem;

    font-size: 1rem;

}



.department-directory-page .department-mandate p {

    margin-bottom: 0;

    color: var(--color-text-600);

    line-height: 1.8;

}



.department-directory-page .lead-preview-grid {

    display: grid;

    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);

    gap: 1rem;

    margin-bottom: 1.35rem;

}



.department-directory-page .lead-card {

    padding: 1.35rem;

    border-radius: var(--radius-md);

    background: linear-gradient(160deg, var(--color-primary-700), var(--color-primary-900));

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--color-white);

    box-shadow: var(--shadow-soft);

}



.department-directory-page .lead-card img {

    width: 84px;

    height: 84px;

    border-radius: 24px;

    object-fit: cover;

    border: 3px solid rgba(255, 255, 255, 0.14);

    margin-bottom: 1rem;

}



.department-directory-page .lead-label {

    color: #ffe7a0;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.department-directory-page .lead-card h3 {

    color: var(--color-white);

    font-size: 1.3rem;

    margin: 0.55rem 0 0.35rem;

}



.department-directory-page .lead-title {

    margin-bottom: 0.85rem;

    color: #f7d97f;

    font-weight: 700;

}



.department-directory-page .lead-card p {

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.84);

    line-height: 1.72;

}



.department-directory-page .team-preview-card {

    padding: 1.35rem;

    border-radius: var(--radius-md);

    background: #f9fbf8;

    border: 1px solid rgba(215, 227, 212, 0.92);

}



.department-directory-page .team-preview-head {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.department-directory-page .team-preview-head h3 {

    margin: 0;

    font-size: 1.15rem;

}



.department-directory-page .team-preview-head span {

    color: var(--color-text-600);

    font-size: 0.92rem;

}



.department-directory-page .staff-preview-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 0.9rem;

}



.department-directory-page .staff-card {

    height: 100%;

    padding: 1rem;

    border-radius: 18px;

    background: var(--color-white);

    border: 1px solid rgba(215, 227, 212, 0.92);

    box-shadow: 0 10px 18px rgba(18, 52, 30, 0.04);

}



.department-directory-page .staff-card img {

    width: 68px;

    height: 68px;

    border-radius: 18px;

    object-fit: cover;

    margin-bottom: 0.9rem;

}



.department-directory-page .staff-card h4 {

    margin-bottom: 0.35rem;

    font-size: 1rem;

}



.department-directory-page .staff-card .staff-role {

    margin-bottom: 0.65rem;

    color: var(--color-accent-600);

    font-size: 0.9rem;

    font-weight: 700;

}



.department-directory-page .staff-card p {

    margin-bottom: 0;

    color: var(--color-text-600);

    font-size: 0.92rem;

    line-height: 1.72;

}



.staff-source {

    display: inline-flex;

    align-items: center;

    margin-bottom: 0.75rem;

    padding: 0.42rem 0.65rem;

    border-radius: var(--radius-pill);

    background: rgba(212, 166, 42, 0.12);

    color: #7b6419;

    font-size: 0.78rem;

    font-weight: 800;

}



.department-directory-page .department-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.85rem 1rem;

}



.department-directory-page .department-link {

    width: auto;

}



.department-empty-state {

    text-align: center;

}



.department-empty-state h2,

.department-empty-state h3 {

    margin-bottom: 0.75rem;

}



.department-detail-hero .hero-stat-card strong {

    font-size: clamp(1.12rem, 1.9vw, 1.45rem);

}



.department-detail-page .overview-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);

    gap: 1.5rem;

    margin-top: 2rem;

}



.department-detail-page .content-stack {

    display: grid;

    gap: 1.5rem;

}



.department-detail-page .department-info-card,

.department-detail-page .department-contact-card {

    padding: clamp(1.35rem, 2.8vw, 1.9rem);

}



.department-detail-page .department-info-card p,

.department-detail-page .department-contact-card p {

    margin-bottom: 0;

    color: var(--color-text-600);

    line-height: 1.85;

}



.department-detail-page .department-lead-card {

    overflow: hidden;

    border-radius: var(--radius-lg);

    border: 1px solid rgba(215, 227, 212, 0.92);

    box-shadow: var(--shadow-soft);

}



.department-detail-page .department-lead-card-media {

    padding: 1.6rem;

    color: var(--color-white);

    background: linear-gradient(145deg, var(--color-primary-700), var(--color-primary-900));

}



.department-detail-page .department-lead-card-media img {

    width: 96px;

    height: 96px;

    object-fit: cover;

    border-radius: 26px;

    border: 3px solid rgba(255, 255, 255, 0.14);

    margin-bottom: 1rem;

}



.department-detail-page .department-lead-card-media span {

    color: #ffe7a0;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.department-detail-page .department-lead-card-media h3 {

    margin: 0.55rem 0 0.35rem;

    color: var(--color-white);

    font-size: 1.35rem;

}



.department-detail-page .department-lead-card-media p {

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.84);

    line-height: 1.75;

}



.department-detail-page .lead-role {

    margin-bottom: 0.8rem;

    color: #f7d97f;

    font-weight: 700;

}



.department-detail-page .contact-list {

    list-style: none;

    padding: 0;

    margin: 1rem 0 0;

    display: grid;

    gap: 0.85rem;

}



.department-detail-page .contact-list li {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    color: var(--color-text-700);

    line-height: 1.72;

}



.department-detail-page .contact-list i {

    width: 18px;

    margin-top: 0.2rem;

    color: var(--color-accent-600);

}



.department-detail-page .team-toolbar {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1rem 1.25rem;

    margin-bottom: 1.75rem;

}



.department-detail-page .toolbar-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.department-detail-page .staff-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1rem;

}



.department-detail-page .department-staff-card {

    height: 100%;

    padding: 1.25rem;

    border-radius: 22px;

    background: var(--color-white);

    border: 1px solid rgba(215, 227, 212, 0.92);

    box-shadow: var(--shadow-soft);

}



.department-detail-page .department-staff-card img {

    width: 82px;

    height: 82px;

    object-fit: cover;

    border-radius: 22px;

    margin-bottom: 1rem;

}



.department-detail-page .department-staff-card h3 {

    margin-bottom: 0.35rem;

    font-size: 1.08rem;

}



.department-detail-page .staff-role {

    margin-bottom: 0.75rem;

    color: var(--color-accent-600);

    font-size: 0.94rem;

    font-weight: 700;

}



.department-detail-page .department-staff-card p {

    margin-bottom: 0;

    color: var(--color-text-600);

    line-height: 1.75;

}



.sidebar-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    gap: 0.95rem;

}



.sidebar-list li {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    color: var(--color-text-700);

}



.sidebar-list i {

    width: 18px;

    margin-top: 0.25rem;

    color: var(--color-accent-600);

}



.detail-side-stack {

    display: grid;

    gap: 1rem;

}



.attachment-panel {

    padding: 1.1rem 1.15rem;

    border-radius: 18px;

    background: var(--color-surface-50);

    border: 1px solid rgba(215, 227, 212, 0.96);

}



.attachment-panel p {

    color: var(--color-text-600);

    margin-bottom: 0.9rem;

}



.section-divider {

    height: 1px;

    margin: 1.5rem 0;

    background: linear-gradient(90deg, rgba(212, 166, 42, 0.24), rgba(215, 227, 212, 0.88));

}



@media (max-width: 1199.98px) {

    .hero-grid,

    .split-feature,

    .detail-layout {

        grid-template-columns: 1fr;

    }



    .hero-stat-grid,

    .department-directory-page .department-panel-inner,

    .department-directory-page .lead-preview-grid,

    .department-detail-page .overview-grid {

        grid-template-columns: 1fr;

    }



    .card-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .hero-side-panel {

        max-width: 420px;

    }

}



@media (max-width: 991.98px) {

    .topbar .container {

        padding-top: 0.75rem;

        padding-bottom: 0.75rem;

    }



    .topbar-layout {

        align-items: flex-start;

    }



    .topbar-social {

        justify-content: flex-start;

    }



   /* --- ULTRA-SLIM NAVBAR OVERRIDE --- */

.main-navbar {
    /* 1. Force the container to collapse */
    min-height: 0 !important; 
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* 2. Neutralize the background and border */
    background: rgba(22, 59, 31, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-navbar .container {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.main-navbar .nav-link {
    /* 3. The Secret: Force line-height to 1 to remove text-box padding */
    line-height: 1 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    
    /* Typography: Compact for a professional ICT feel */
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

/* 4. Shrink the Mobile Toggler */
.navbar-toggler {
    padding: 2px 4px !important;
    font-size: 0.8rem !important;
    margin: 4px 0 !important;
}



    .nav-cta {

        margin-top: 0.85rem;

    }



    .home-hero {

        min-height: 680px;

    }



    .hero-stat-grid {

        grid-template-columns: 1fr;

    }



    .hero-slide-inner {

        padding-top: 5.25rem;

    }



    .quick-links-band {

        margin-top: -1.5rem;

    }



    .footer-bottom {

        text-align: center;

    }



    .footer-social {

        justify-content: center;

    }

}



@media (max-width: 767.98px) {

    .topbar-contact {

        gap: 0.65rem;

    }



    .topbar-contact span,

    .topbar-contact a {

        font-size: 0.8rem;

    }



    .main-navbar .container {

        padding-left: 0.95rem;

        padding-right: 0.95rem;

    }



    .navbar-logo-shell {

        width: 42px;

        height: 42px;

        border-radius: 14px;

    }



    .navbar-brand-title {

        font-size: 0.92rem;

    }



    .navbar-brand-subtitle,

    .navbar-brand-motto {

        display: none;

    }



    .footer-brand {

        flex-direction: column;

    }



    .hero-title {

        font-size: clamp(2rem, 10vw, 3rem);

    }



    .hero-actions,

    .cta-actions {

        flex-direction: column;

        align-items: stretch;

    }



    .btn-muni-primary,

    .btn-muni-secondary,

    .btn-muni-outline,

    .btn-muni-light,

    .btn-muni-gold {

        width: 100%;

    }



    .hero-controls-inner {

        flex-direction: column;

        align-items: flex-start;

    }



    .filter-form,

    .card-grid {

        grid-template-columns: 1fr;

    }



    .notice-card-top,

    .notice-card-footer,

    .download-actions {

        flex-direction: column;

        align-items: flex-start;

    }



    .notice-card-top {

        grid-template-columns: 1fr;

    }



    .hero-nav-group {

        order: 2;

    }



    .section-spacing {

        padding: clamp(3.5rem, 10vw, 4.5rem) 0;

    }



    .department-directory-page .department-content,

    .department-detail-page .department-info-card,

    .department-detail-page .department-contact-card,

    .department-detail-page .department-staff-card {

        padding: 1.2rem;

    }



    .department-directory-page .team-preview-head,

    .department-directory-page .department-actions,

    .department-detail-page .team-toolbar {

        align-items: flex-start;

    }



    .department-directory-page .staff-preview-grid,

    .department-detail-page .staff-grid {

        grid-template-columns: 1fr;

    }

}