:root {
    --civic-navy-950: #07172f;
    --civic-navy-800: #12345b;
    --civic-blue-600: #1769aa;
    --civic-red-700: #b3262e;
    --civic-ice-100: #eaf3f8;
    --civic-canvas: #f5f7fa;
    --civic-paper: #fff;
    --civic-ink: #172033;
    --civic-muted: #5d6878;
    --civic-border: #dbe2ea;
    --civic-shadow: 0 18px 42px rgba(7, 23, 47, .09);
}

html.civic-motion-booting .civic-hero .civic-eyebrow,
html.civic-motion-booting .civic-hero h1,
html.civic-motion-booting .civic-hero__lead,
html.civic-motion-booting .civic-hero__actions > *,
html.civic-motion-booting .civic-hero__panel,
html.civic-motion-booting #page-title h1,
html.civic-motion-booting .civic-section-heading h2,
html.civic-motion-booting .civic-info-grid h2,
html.civic-motion-booting #content .heading-block h2,
html.civic-motion-booting #content .heading-block h3,
html.civic-motion-booting #content .entry-title,
html.civic-motion-booting .civic-alert-row,
html.civic-motion-booting .civic-service-card,
html.civic-motion-booting .civic-map-card,
html.civic-motion-booting .civic-story-card,
html.civic-motion-booting .civic-institution-grid > a,
html.civic-motion-booting #content .entry-sm,
html.civic-motion-booting #content .portfolio-item,
html.civic-motion-booting #content .toggle,
html.civic-motion-booting #content .card,
html.civic-motion-booting #content .entry-meta,
html.civic-motion-booting #content .a2a_kit,
html.civic-motion-booting #content .entry-image,
html.civic-motion-booting #content .entry-content > *,
html.civic-motion-booting #content form,
html.civic-motion-booting #content table { opacity: 0; }

html { scroll-behavior: smooth; }
body { background: var(--civic-canvas) !important; background-image: none !important; color: var(--civic-ink); font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 16px; line-height: 1.65; }
#wrapper { width: 100%; margin: 0; }
a { color: var(--civic-blue-600); }
a:hover { color: var(--civic-red-700); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #f2bb13 !important; outline-offset: 3px; }
.civic-skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 16px; background: #fff; color: var(--civic-navy-950); transform: translateY(-150%); }
.civic-skip-link:focus { transform: translateY(0); }
.container { max-width: 1200px; }

.civic-topbar { height: auto !important; min-height: 40px; border: 0 !important; background: var(--civic-navy-950); color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.civic-topbar__inner { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 24px; }
.civic-topbar__actions { display: flex; align-items: center; gap: 24px; }
.civic-topbar a { color: #fff; }
.civic-topbar a[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }

#header.civic-header { height: auto; background: #fff; border: 0; }
.civic-brand-row { display: grid; grid-template-columns: minmax(260px, 420px) 1fr auto; align-items: center; gap: 44px; min-height: 118px; }
.civic-brand img { display: block; width: 100%; max-width: 390px; height: 70px; object-fit: contain; object-position: left center; }
.civic-brand-row__description { max-width: 610px; margin: 0; color: var(--civic-muted); font-size: 14px; line-height: 1.5; }
.civic-menu-toggle { display: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--civic-border); background: #fff; color: var(--civic-navy-950); font: inherit; }
.civic-nav { border-top: 1px solid var(--civic-border); border-bottom: 1px solid var(--civic-border); background: #fff; }
.civic-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.civic-nav > .container > ul > li { position: relative; }
.civic-nav a { position: relative; display: flex; min-height: 54px; align-items: center; padding: 0 24px; color: var(--civic-navy-950); font-family: "IBM Plex Sans Condensed", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.civic-nav a:hover, .civic-nav a[aria-current="page"] { background: var(--civic-ice-100); color: var(--civic-navy-800); }
.civic-nav > .container > ul > li > a::after { position: absolute; right: 22px; bottom: 8px; left: 22px; height: 2px; content: ""; background: var(--civic-red-700); transform: scaleX(0); transform-origin: left; }
.civic-nav > .container > ul > li > a:hover::after, .civic-nav > .container > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.civic-nav__has-submenu > ul { position: absolute; z-index: 120; top: 100%; left: 0; display: block; visibility: hidden; width: 340px; max-height: 70vh; overflow-y: auto; border: 1px solid var(--civic-border); background: #fff; box-shadow: var(--civic-shadow); opacity: 0; pointer-events: none; transform: translateY(-6px); }
.civic-nav__has-submenu:hover > ul, .civic-nav__has-submenu:focus-within > ul { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.civic-nav__has-submenu > ul li, .civic-nav__has-submenu > ul a { display: block; width: 100%; }
.civic-nav__has-submenu > ul a { min-height: auto; padding: 12px 18px; font-size: 14px; line-height: 1.35; text-transform: none; }

#main-content { min-height: 50vh; }
.civic-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--civic-navy-950); color: #fff; }
.civic-hero::before { position: absolute; z-index: -2; inset: 0; content: ""; background-image: var(--civic-hero-image, url('../img/default-background.jpg')); background-position: center; background-size: cover; opacity: .26; }
.civic-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(7,23,47,.98) 0%, rgba(7,23,47,.88) 52%, rgba(7,23,47,.52) 100%); }
.civic-hero__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); align-items: end; gap: 72px; min-height: 520px; padding-top: 88px; padding-bottom: 88px; }
.civic-eyebrow { margin: 0 0 12px; color: var(--civic-blue-600); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.civic-hero .civic-eyebrow { color: #9dcbea; }
.civic-hero h1 { max-width: 760px; margin: 0 0 22px; color: #fff; font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(44px, 6vw, 76px); font-weight: 700; line-height: .98; letter-spacing: -.025em; text-transform: none; }
.civic-hero__lead { max-width: 720px; margin: 0; color: rgba(255,255,255,.84); font-size: 19px; line-height: 1.65; }
.civic-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.civic-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.civic-button--light { background: #fff; color: var(--civic-navy-950); }
.civic-button--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.civic-button--primary { background: var(--civic-navy-800); color: #fff; }
.civic-hero__panel { display: grid; gap: 8px; padding: 28px; border-top: 4px solid var(--civic-red-700); background: rgba(255,255,255,.96); box-shadow: var(--civic-shadow); color: var(--civic-ink); }
.civic-hero__panel > span { color: var(--civic-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.civic-hero__panel strong { font-size: 18px; }

.civic-section { padding: 88px 0; background: #fff; }
.civic-section:nth-of-type(even) { background: var(--civic-canvas); }
.civic-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.civic-section-heading h2, .civic-info-grid h2, .civic-contact-card h2 { max-width: 850px; margin: 0; color: var(--civic-navy-950); font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-transform: none; }
.civic-arrow-link { flex: 0 0 auto; padding-bottom: 4px; border-bottom: 2px solid currentColor; font-weight: 700; }

.civic-section--alerts { background: #fff7f6 !important; }
.civic-section--alerts .civic-eyebrow { color: var(--civic-red-700); }
.civic-alert-list { border-top: 1px solid #e8c8c7; }
.civic-alert-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 52px; align-items: center; gap: 28px; min-height: 128px; border-bottom: 1px solid #e8c8c7; }
.civic-alert-row time { display: grid; color: var(--civic-red-700); text-align: center; }
.civic-alert-row time strong { font-family: "IBM Plex Sans Condensed", sans-serif; font-size: 40px; line-height: 1; }
.civic-alert-row time span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.civic-alert-row p { margin: 0 0 6px; color: var(--civic-red-700); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.civic-alert-row h3 { margin: 0; font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(20px, 2.2vw, 29px); line-height: 1.25; }
.civic-alert-row h3 a { color: var(--civic-ink); }
.civic-alert-row__arrow { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #e2b5b5; color: var(--civic-red-700); font-size: 22px; }

.civic-section--services { background: var(--civic-ice-100) !important; }
.civic-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.civic-service-card { position: relative; display: grid; grid-template: "icon arrow" auto "title title" 1fr / 1fr auto; align-content: start; gap: 0 20px; min-height: 218px; padding: 24px; border: 1px solid #cedfe9; border-radius: 8px; background: #fff; color: var(--civic-navy-950); box-shadow: 0 4px 18px rgba(7,23,47,.04); font-weight: 700; line-height: 1.42; }
.civic-service-card:hover { border-color: var(--civic-blue-600); color: var(--civic-blue-600); transform: translateY(-2px); }
.civic-service-card__icon { grid-area: icon; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: var(--civic-ice-100); }
.civic-service-card__icon img { max-width: 42px; max-height: 42px; object-fit: contain; }
.civic-service-card__title { grid-area: title; align-self: start; margin-top: 20px; font-size: 16px; }
.civic-service-card__arrow { grid-area: arrow; align-self: center; font-size: 20px; }
.civic-services-more { margin-top: 30px; }
.civic-services-more summary { display: flex; width: fit-content; min-height: 48px; align-items: center; gap: 18px; margin: auto; padding: 10px 20px; border: 1px solid var(--civic-navy-800); border-radius: 4px; color: var(--civic-navy-800); cursor: pointer; font-weight: 700; list-style: none; }
.civic-services-more summary::-webkit-details-marker { display: none; }
.civic-services-more[open] summary span { transform: rotate(45deg); }
.civic-service-grid--all { margin-top: 28px; }

.civic-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.civic-map-card { overflow: hidden; border: 1px solid var(--civic-border); border-radius: 14px; background: #fff; box-shadow: var(--civic-shadow); }
.civic-map-card__preview { height: 360px; background: var(--civic-ice-100); }
.civic-map-card__preview iframe { width: 100%; height: 100%; border: 0; }
.civic-map-card__body { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.civic-map-card__body p { margin: 0; color: var(--civic-blue-600); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.civic-map-card__body h3 { margin: 2px 0 0; font-family: "IBM Plex Sans Condensed", sans-serif; font-size: 26px; }
.civic-map-card__body a { flex: 0 0 auto; font-weight: 700; }

.civic-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.civic-story-card { overflow: hidden; border: 1px solid var(--civic-border); border-radius: 8px; background: #fff; }
.civic-story-card img { width: 100%; height: 220px; object-fit: cover; }
.civic-story-card h3 { margin: 0; padding: 22px; color: var(--civic-navy-950); font-family: "IBM Plex Sans Condensed", sans-serif; font-size: 24px; line-height: 1.25; }

.civic-section--institutional { background: var(--civic-navy-950) !important; color: rgba(255,255,255,.78); }
.civic-info-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: start; }
.civic-info-grid > div:first-child > p:not(.civic-eyebrow) { max-width: 680px; font-size: 18px; }
.civic-info-grid h2, .civic-section--institutional .civic-contact-card h2 { color: #fff; }
.civic-info-links { display: grid; gap: 12px; margin-top: 30px; }
.civic-info-links a { width: fit-content; color: #fff; font-weight: 700; }
.civic-contact-card { padding: 34px; border-top: 4px solid var(--civic-red-700); background: #fff; color: var(--civic-ink); }
.civic-section--institutional .civic-contact-card h2 { color: var(--civic-navy-950); font-size: 34px; }
.civic-contact-card address { display: grid; gap: 9px; margin: 22px 0 28px; font-style: normal; }

.civic-institution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--civic-border); border-left: 1px solid var(--civic-border); }
.civic-institution-grid a { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border-right: 1px solid var(--civic-border); border-bottom: 1px solid var(--civic-border); color: var(--civic-navy-950); font-weight: 700; }

#page-title { position: relative; overflow: hidden; background: var(--civic-navy-950) !important; border: 0; }
#page-title::after { position: absolute; inset: 0; content: ""; background-image: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 100%; pointer-events: none; }
#page-title .container { z-index: 1; }
#page-title h1, #page-title .breadcrumb a, #page-title .breadcrumb-item { color: #fff !important; }
#content { background: #eef2f6; }
#content .content-wrap { padding: 64px 0; }
#content .content-wrap > .container { padding: clamp(28px, 4vw, 52px); border: 1px solid var(--civic-border); border-radius: 12px; background: #fff; box-shadow: var(--civic-shadow); }
#content .entry-sm { padding: 24px; border: 1px solid var(--civic-border); border-radius: 8px; background: #fff; }
#content .entry-sm + .entry-sm { margin-top: 18px; }
#content .entry-image img, #content .portfolio-image img, .department-header img { border-radius: 8px; }
#content .toggle, #content .card, #content .style-msg2 { border-radius: 8px; box-shadow: 0 8px 24px rgba(7,23,47,.06); }
#content .sidebar-widgets-wrap { padding: 22px; border: 1px solid var(--civic-border); border-radius: 8px; background: var(--civic-ice-100); }
.form-control { min-height: 46px; border-color: #bfc9d5; border-radius: 4px; color: var(--civic-ink); font-size: 16px; }
textarea.form-control { min-height: 150px; }
.button, button, input[type="submit"] { border-radius: 4px !important; }

#footer.civic-footer { margin-top: 0; border: 0; background: var(--civic-navy-950); color: rgba(255,255,255,.76); }
.civic-footer__grid { display: grid; grid-template-columns: 1.2fr .9fr .7fr; gap: 72px; padding-top: 72px; padding-bottom: 64px; }
.civic-footer h2 { margin: 0 0 18px; color: #fff; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.civic-footer a { color: #fff; }
.civic-footer address { font-style: normal; }
.civic-footer ul { margin: 0; list-style: none; }
.civic-footer__identity img { width: 100%; max-width: 330px; height: 76px; object-fit: contain; object-position: left center; }
.civic-footer__identity p { max-width: 480px; margin-top: 22px; }
.civic-footer__bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; }

@media (max-width: 991px) {
    .civic-brand-row { grid-template-columns: 1fr auto; min-height: 92px; gap: 20px; }
    .civic-brand img { max-width: 310px; height: 56px; }
    .civic-brand-row__description { display: none; }
    .civic-menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .civic-nav { display: none; }
    .civic-nav.is-open { display: block; }
    .civic-nav ul { display: block; }
    .civic-nav a { min-height: 48px; padding: 0 4px; }
    .civic-nav__has-submenu > ul { position: static; display: block; visibility: visible; width: auto; max-height: none; border: 0; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
    .civic-nav__has-submenu > ul a { padding-left: 24px; }
    .civic-hero__grid { grid-template-columns: 1fr; gap: 44px; min-height: auto; }
    .civic-hero__panel { max-width: 480px; }
    .civic-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .civic-info-grid { grid-template-columns: 1fr; gap: 48px; }
    .civic-footer__grid { grid-template-columns: 1fr 1fr; }
    .civic-footer__identity { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    html { scroll-behavior: auto; }
    .civic-topbar__inner > span { display: none; }
    .civic-topbar__inner { justify-content: flex-end; }
    .civic-topbar__actions { gap: 15px; }
    .civic-brand-row { padding-right: 18px; padding-left: 18px; }
    .civic-brand img { max-width: 230px; height: 48px; }
    .civic-hero__grid { padding-top: 62px; padding-bottom: 62px; }
    .civic-hero h1 { font-size: 46px; }
    .civic-section { padding: 58px 0; }
    .civic-section-heading { display: block; }
    .civic-section-heading .civic-arrow-link { display: inline-block; margin-top: 20px; }
    .civic-alert-row { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
    .civic-alert-row time strong { font-size: 32px; }
    .civic-alert-row__arrow { display: none; }
    .civic-service-grid, .civic-map-grid, .civic-story-grid, .civic-institution-grid, .civic-footer__grid { grid-template-columns: 1fr; }
    .civic-service-card { min-height: 180px; }
    .civic-map-card__preview { height: 280px; }
    .civic-map-card__body { align-items: flex-start; flex-direction: column; }
    .civic-footer__identity { grid-column: auto; }
    .civic-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
    a, button, summary, .civic-service-card { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
    .civic-nav > .container > ul > li > a::after { transition: transform .18s cubic-bezier(.23,1,.32,1); }
    .civic-nav__has-submenu > ul { transition: opacity .18s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1), visibility 0s linear .18s; }
    .civic-nav__has-submenu:hover > ul, .civic-nav__has-submenu:focus-within > ul { transition-delay: 0s; }
}

@media (hover: hover) and (pointer: fine) {
    #content .entry-sm:hover { border-color: #b9d0df; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7,23,47,.08); }
}

@media (prefers-reduced-motion: no-preference) {
    #content .entry-sm { transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.23,1,.32,1); }
}
.article-gallery { margin-top: 28px; }
.article-gallery .slides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.article-gallery .slides li { min-width: 0; }
.article-gallery .slides a { display: block; border-radius: 10px; overflow: hidden; }
.article-gallery .slides img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .22s ease;
}
.article-gallery .slides a:hover img { transform: scale(1.025); }
.article-gallery .caption { display: block; margin-top: 7px; color: #314960; }

/* Keep legacy chart typography on desktop; use readable hierarchy on phones. */
ol.organizational-chart .organizational-chart__root-title { margin: 0; color: #fff; font-size: 15px; line-height: 1.5; }
ol.organizational-chart .organizational-chart__department-title { margin: 0; color: #fff; font-size: 10px; font-weight: 400; }
.civic-hero__grid > *, .civic-info-grid > *, .civic-footer__grid > * { min-width: 0; }
.civic-contact-card, .civic-footer address { overflow-wrap: anywhere; }
.civic-contact-form input[type="file"] { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; }
.civic-contact-form button[type="submit"] { min-height: 44px; }

@media (max-width: 991px) {
    .civic-hero__grid, .civic-info-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
    .civic-hero h1 { font-size: 35px; }
}

@media (max-width: 1199px) {
    ol.organizational-chart { margin: 0; text-align: left; }
    ol.organizational-chart ol { padding-top: 0; }
    ol.organizational-chart ol > li { width: auto; padding: 0; }
    ol.organizational-chart li::before, ol.organizational-chart li::after,
    ol.organizational-chart ol::before, ol.organizational-chart ol::after,
    ol.organizational-chart li > div::before, ol.organizational-chart li > div::after { display: none; }
    ol.organizational-chart li > div { padding: 16px; }
    ol.organizational-chart > li > div { margin-right: 0; }
    ol.organizational-chart > li > div:only-of-type { display: block; width: auto; margin: 0; }
    ol.organizational-chart > li > ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
    ol.organizational-chart > li > ol > li > ol { margin-top: 12px; padding-left: 16px; border-left: 1px solid var(--civic-border); }
    ol.organizational-chart > li > ol > li > ol > li + li { margin-top: 12px; }
    ol.organizational-chart .organizational-chart__root-title { font-size: 20px; }
    ol.organizational-chart .organizational-chart__sector-title,
    ol.organizational-chart .organizational-chart__department-title { font-size: 16px; line-height: 1.5; }
}