:root {
  --navy: #132a3b;
  --navy-2: #1c3a51;
  --blue: #315d7d;
  --blue-light: #e8eef2;
  --ink: #172d3d;
  --muted: #60788a;
  --line: #d9e0e5;
  --surface: #ffffff;
  --surface-alt: #f5f7f8;
  --accent: #e8b84f;
  --shadow: 0 18px 42px rgba(19, 42, 59, .12);
  --radius: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--blue); }
a:hover { color: var(--navy); }
.site-container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }

.topbar { background: var(--navy); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.topbar-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.location-label { opacity: .9; }
.utility-links { display: flex; align-items: center; gap: 12px; letter-spacing: .04em; }
.utility-links a { color: #fff; text-decoration: none; }
.utility-links a:hover { text-decoration: underline; }
.utility-sep { opacity: .35; }

.brand-row { background: #fff; border-bottom: 1px solid var(--line); }
.brand-inner { min-height: 94px; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #355f7c, #17334a); color: #fff; font-weight: 800; font-size: 19px; letter-spacing: .03em; box-shadow: 0 7px 16px rgba(19,42,59,.16); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 23px; font-weight: 750; letter-spacing: -.02em; }
.brand-subtitle { margin-top: 7px; color: #6c8090; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

.main-nav { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.nav-inner { min-height: 52px; display: flex; align-items: center; }
.primary-menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: stretch; }
.primary-menu > li { position: relative; }
.primary-menu > li > a { display: block; padding: 15px 19px; color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; }
.primary-menu > li > a:hover, .primary-menu > li:hover > a { background: var(--surface-alt); color: var(--blue); }
.primary-menu ul { display: none; position: absolute; top: 100%; left: 0; min-width: 225px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: var(--shadow); }
.has-submenu:hover > ul, .has-submenu:focus-within > ul { display: block; }
.primary-menu ul a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; border-radius: 7px; }
.primary-menu ul a:hover { background: var(--surface-alt); color: var(--blue); }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--navy); font: inherit; font-weight: 700; padding: 12px 0; }

.hero { background: linear-gradient(135deg, #f3f6f7 0%, #fff 60%); padding: 74px 0 80px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); align-items: center; gap: 70px; }
.eyebrow { margin: 0 0 24px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 560px; color: var(--ink); font-size: clamp(52px, 6vw, 76px); line-height: .98; letter-spacing: -.045em; }
.hero-copy { margin: 42px 0 0; max-width: 540px; color: #60788a; font-size: 17px; line-height: 1.75; }
.hero-copy a { font-weight: 700; }

.slideshow { position: relative; min-height: 440px; padding: 18px; border-radius: 18px; background: linear-gradient(145deg, #557aa0, #294d69); box-shadow: 0 24px 48px rgba(19,42,59,.18); overflow: hidden; }
.slide { position: absolute; inset: 18px; opacity: 0; transform: translateX(16px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.slide.is-active { opacity: 1; transform: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
.slide-controls { position: absolute; left: 26px; bottom: 24px; z-index: 4; display: flex; gap: 7px; }
.slide-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.68); cursor: pointer; }
.slide-dot.is-active { width: 24px; border-radius: 8px; background: var(--accent); }

.content-section { padding: 70px 0; }
.content-section.alt { background: var(--surface-alt); }
.section-heading { margin-bottom: 30px; }
.section-heading h2 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.025em; }
.section-heading p { color: var(--muted); margin: 9px 0 0; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.highlight-card { min-height: 170px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(19,42,59,.05); }
.highlight-card h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.2; }
.highlight-card h3 a { color: var(--ink); text-decoration: none; }
.highlight-card p { margin: 0; color: var(--muted); }
.highlight-card img { border-radius: 10px; margin-bottom: 14px; }

.page-shell { padding: 58px 0 78px; }
.page-title { margin: 0 0 30px; font-size: clamp(36px, 5vw, 52px); line-height: 1.05; letter-spacing: -.04em; }
.page-content { max-width: 920px; }
.page-content table { max-width: 100%; }
.page-content input, .page-content select, .page-content textarea { max-width: 100%; }

.footer { background: var(--navy); color: #b8c7d1; }
.footer-content { padding: 42px 0; width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
.footer-brand { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.footer-links a { color: #d7e2e8; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-meta { font-size: 13px; }
.footer-separator { margin: 0 8px; opacity: .5; }
.footer-copyright { margin-top: 9px; color: #91a7b6; font-size: 12px; }

/* Compatibility helpers for legacy pages as they are migrated. */
.wrapper { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
#hero, #main { width: 100%; }

@media (max-width: 900px) {
  .hero { padding: 55px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero h1 { font-size: clamp(48px, 10vw, 68px); }
  .slideshow { min-height: 390px; }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .site-container, .footer-content, .wrapper { width: min(calc(100% - 32px), var(--container)); }
  .topbar-inner { min-height: 34px; }
  .location-label { font-size: 10px; }
  .utility-links { font-size: 10px; gap: 7px; }
  .brand-inner { min-height: 78px; }
  .brand-mark { width: 48px; height: 48px; border-radius: 13px; }
  .brand-name { font-size: 20px; }
  .brand-subtitle { font-size: 10px; letter-spacing: .13em; }
  .nav-inner { display: block; }
  .nav-toggle { display: block; width: 100%; text-align: left; }
  .primary-menu { display: none; flex-direction: column; padding-bottom: 8px; }
  .primary-menu.is-open { display: flex; }
  .primary-menu > li > a { padding: 10px 0; }
  .primary-menu ul { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 4px 14px; }
  .has-submenu.is-open > ul { display: block; }
  .hero-grid { gap: 30px; }
  .hero-copy { margin-top: 30px; font-size: 16px; }
  .slideshow { min-height: 300px; padding: 12px; }
  .slide { inset: 12px; }
  .highlight-grid { grid-template-columns: 1fr; }
  .content-section, .page-shell { padding: 48px 0 58px; }
}
.hero-social { margin-top: 24px; }
.hero-social img { width: 30px; height: 30px; margin-right: 7px; vertical-align: middle; }
.highlight-image img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; }
.highlight-text { color: var(--muted); }
.highlight-card .card-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.highlight-card .card-link:hover { text-decoration: underline; }
.site-header { padding: 0; }
.site-header a { color: inherit; }
.hero-social a { display: inline-block; }

/* Reusable Document Type page */
.document-page { padding: 58px 0 82px; background: var(--surface-alt); min-height: 60vh; }
.document-heading { max-width: 900px; margin-bottom: 34px; }
.document-heading .page-title { margin-bottom: 14px; }
.document-description { color: var(--muted); font-size: 17px; line-height: 1.75; }
.document-card { margin-top: 24px; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(19,42,59,.05); overflow: hidden; }
.document-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.document-card-heading h2 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -.025em; }
.card-kicker { margin: 0 0 6px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.document-disclaimer { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.document-disclaimer:hover { background: var(--surface-alt); }
.document-list table { width: 100%; border-collapse: collapse; }
.document-list td { padding: 10px 8px; border-bottom: 1px solid #edf1f3; vertical-align: middle; }
.document-list tr:last-child td { border-bottom: 0; }
.document-list img { max-width: 28px; vertical-align: middle; }
.document-list a.docs { color: var(--ink); font-weight: 600; text-decoration: none; }
.document-list a.docs:hover { color: var(--blue); text-decoration: underline; }
.document-committee-content > table { width: 100%; }
.document-gallery .gallery-description { margin: 0 0 20px; color: var(--muted); }
.gallery-tabs { margin: -4px 0 22px; overflow-x: auto; }
.gallery-tabs .wide-content, .gallery-tabs section { width: 100%; }
.document-pictures img { border-radius: 10px; }
.document-pictures a { text-decoration: none; }
@media (max-width: 720px) {
  .document-page { padding: 44px 0 60px; }
  .document-card { padding: 22px; }
  .document-card-heading { flex-direction: column; gap: 12px; }
  .document-description { font-size: 16px; }
}

/* ==========================================================
   V03 shared page components
   These rules let legacy ASP data render inside the new shell
   without requiring a site-specific page implementation.
   ========================================================== */
.standard-page-body { background: var(--surface-alt); color: var(--ink); }
.page-shell { min-height: 60vh; background: var(--surface-alt); }
.page-heading { max-width: 900px; margin-bottom: 34px; }
.page-intro { color: var(--muted); font-size: 17px; line-height: 1.75; }
.standard-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(19,42,59,.05); padding: 30px; }
.standard-card h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.2; }
.management-list h2 { margin-top: 0; padding-top: 0; color: var(--navy); }
.management-list h2:not(:first-child) { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.management-list a, .agency-list a { color: var(--blue); }
.management-list b, .agency-list b { color: var(--navy); }
.agency-list h2 { margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); text-decoration: none !important; }
.agency-list h2:first-child { margin-top: 0; }
.agency-list hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.map-card { padding: 18px; }
.map-actions { padding: 4px 8px 18px; }
.button-link { display: inline-block; padding: 10px 15px; border-radius: 8px; background: var(--navy); color: #fff !important; text-decoration: none; font-weight: 700; }
.button-link:hover { background: var(--blue); }
.google-maps { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; overflow: hidden; border-radius: 12px; background: #e8eef2; }
.google-maps iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.login-container { display: flex; justify-content: center; }
.login-card { width: min(100%, 520px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(19,42,59,.08); padding: 38px; }
.login-card .page-title { margin-bottom: 12px; }
.login-intro { color: var(--muted); margin: 0 0 26px; }
.modern-form { display: grid; gap: 10px; }
.modern-form label { font-weight: 700; color: var(--navy); margin-top: 6px; }
.modern-form input[type=text], .modern-form input[type=password] { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid #cbd6dd; border-radius: 8px; background: #fff; font: inherit; }
.modern-form input:focus { outline: 2px solid rgba(53,95,124,.18); border-color: var(--blue); }
.modern-form button { margin-top: 10px; border: 0; border-radius: 8px; padding: 12px 16px; background: var(--navy); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.modern-form button:hover { background: var(--blue); }
.form-message { min-height: 20px; margin: 0; color: #b42318; font-weight: 700; }
.login-register { margin-top: 10px; text-align: center; }
.login-register a, .login-help a { color: var(--blue); font-weight: 700; }
.login-help { text-align: center; margin: 16px 0 0; }
.form-note { color: var(--muted); font-size: 13px; }
.board-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 24px; align-items: start; }
.board-list { overflow-x: auto; }
.board-list > table { width: 100%; border-collapse: collapse; }
.board-list td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 8px; vertical-align: top; }
.board-list h3 { color: var(--navy); margin: 0; }
.board-list img { max-width: 175px; height: auto; border-radius: 10px; }
.board-list input[type=text], .board-list textarea, .board-list input[type=file] { max-width: 100%; }
.board-documents { position: sticky; top: 18px; }
.board-documents h2 { margin-bottom: 14px; }
.board-documents .document-disclaimer { display: inline-block; margin-bottom: 18px; }
.board-documents .document-list table { width: 100%; border-collapse: collapse; }
.board-documents .document-list td { padding: 8px 4px; border-bottom: 1px solid #edf1f3; }
.board-documents .document-list a { color: var(--ink); text-decoration: none; }
.board-documents .document-list a:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 900px) {
  .board-layout { grid-template-columns: 1fr; }
  .board-documents { position: static; }
}
@media (max-width: 720px) {
  .standard-card, .login-card { padding: 22px; }
  .page-intro { font-size: 16px; }
  .google-maps { min-height: 300px; }
  .board-list { overflow-x: auto; }
  .board-list > table { min-width: 620px; }
}


/* V04 reusable content components: Document Type pages, calendars and photo viewer. */
.document-page { padding: 3rem 0 4rem; }
.document-heading, .page-intro { max-width: 900px; margin: 0 auto 2rem; }
.document-description { color: #475569; font-size: 1.08rem; line-height: 1.75; }
.document-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 12px 35px rgba(15,23,42,.07); padding: 1.5rem; margin: 1.5rem auto; max-width: 1100px; }
.document-card-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1rem; }
.document-card-heading h2 { margin:.2rem 0 0; color:#102a43; }
.card-kicker, .eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:#6687a8; margin:0; }
.document-list table { width:100%; border-collapse:collapse; }
.document-list tr { border-bottom:1px solid #e7edf3; }
.document-list tr:last-child { border-bottom:0; }
.document-list td { padding:.75rem .5rem; vertical-align:middle; }
.document-list img { vertical-align:middle; max-width:24px; max-height:24px; }
.document-list a, .docs { color:#1d5d88; font-weight:600; text-decoration:none; }
.document-list a:hover, .docs:hover { text-decoration:underline; }
.document-disclaimer { font-size:.82rem; color:#64748b; }
.committee-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.committee-card { border:1px solid #e2e8f0; border-radius:14px; padding:1.15rem; background:#f8fafc; }
.committee-card h3 { margin:.2rem 0 .7rem; color:#102a43; }
.committee-office { color:#6687a8; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.committee-detail, .committee-notes { margin:.4rem 0; color:#475569; line-height:1.5; }
.committee-detail a { color:#1d5d88; }
.committee-notes { font-size:.92rem; }
.gallery-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; }
.gallery-tab { display:inline-block; border:1px solid #d6e0e9; border-radius:999px; padding:.55rem .85rem; color:#36566f; background:#fff; text-decoration:none; font-size:.9rem; }
.gallery-tab:hover, .gallery-tab.is-active { background:#173b59; border-color:#173b59; color:#fff; }
.gallery-description { color:#475569; line-height:1.6; margin-bottom:1.25rem; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.photo-card { margin:0; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; }
.photo-card-image { display:block; aspect-ratio:4/3; overflow:hidden; background:#e8eef3; }
.photo-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; }
.photo-card:hover .photo-card-image img { transform:scale(1.025); }
.photo-card-caption { padding:.8rem .9rem 1rem; color:#475569; font-size:.92rem; line-height:1.45; }
.empty-state { padding:1.25rem; border-radius:12px; background:#f8fafc; color:#64748b; }
.calendar-page { padding:3rem 0 4rem; }
.calendar-shell { max-width:1120px; margin:0 auto; background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 12px 35px rgba(15,23,42,.07); padding:1rem; overflow:auto; }
.calendar-shell table { border:0 !important; width:100% !important; max-width:none !important; border-collapse:separate !important; border-spacing:2px !important; }
.calendar-shell td { border:1px solid #e2e8f0; }
.calendar-shell td.month { background:#173b59 !important; color:#fff; padding:.8rem; }
.calendar-shell td.weekday { background:#e9f0f5 !important; color:#29465d; font-weight:700; padding:.65rem .3rem; }
.calendar-shell td.day, .calendar-shell td.selectedDay, .calendar-shell td.notaDay { min-height:90px; height:90px; padding:.45rem; vertical-align:top; background:#fff !important; }
.calendar-shell td.selectedDay { box-shadow:inset 0 0 0 2px #c88b3a; }
.calendar-shell td.notaDay { background:#f8fafc !important; }
.calendar-shell a.cal { color:#1d5d88; text-decoration:none; font-weight:600; }
.calendar-shell td.month a.cal { color:#fff; }
.calendar-shell input[type=submit], .calendar-shell #submit { appearance:none; border:0; border-radius:8px; background:#1d5d88; color:#fff; padding:.7rem 1rem; font-weight:700; cursor:pointer; }
.calendar-shell form { margin:.75rem 0; }
.photo-viewer-page-main { padding:3rem 0 4rem; }
.photo-viewer-card { max-width:1000px; margin:0 auto; background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 12px 35px rgba(15,23,42,.07); padding:1.25rem; text-align:center; }
.photo-viewer-card img { max-width:100%; height:auto; border-radius:10px; }
@media (max-width:700px) {
 .document-card { padding:1rem; border-radius:14px; }
 .document-card-heading { align-items:flex-start; flex-direction:column; }
 .calendar-shell { padding:.45rem; border-radius:12px; }
 .calendar-shell td.day, .calendar-shell td.selectedDay, .calendar-shell td.notaDay { height:70px; min-height:70px; font-size:.8rem; }
 .calendar-shell td.weekday { font-size:.75rem; }
 .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
}
@media (max-width:460px) { .photo-grid { grid-template-columns:1fr; } }