:root{--navy:#14325c;--navy2:#1d4479;--navy3:#0d2342;--gold:#c9a227;--gold2:#e6c85a;--sky:#e9f1fb;--ink:#1f2933;--muted:#5f6b7a;--line:#dde3ea;--bg:#f3f6fa;--card:#fff;--alert:#fff6d6;--sans:Inter,"Segoe UI",Arial,sans-serif;--serif:"Source Serif 4",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 var(--sans);color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}
a{color:var(--navy2)}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
/* ticker */
.ticker{background:var(--navy3);color:#f6e7a6;font:500 13.5px/1.4 var(--sans);padding:8px 16px;text-align:center;border-bottom:2px solid var(--gold)}
.ticker b{background:var(--gold);color:var(--navy3);padding:2px 8px;border-radius:3px;margin-right:8px;letter-spacing:.8px;font-size:12px}
/* header */
.top{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(13,35,66,.14)}
.top>.wrap{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--navy);min-width:0}
.brand img{flex:none;width:72px;height:72px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.bt{display:flex;flex-direction:column;min-width:0}
.h1{font:700 27px/1.15 var(--serif);color:var(--navy);letter-spacing:.2px}
.sub{font:500 12.5px/1.35 var(--sans);color:var(--muted);margin-top:3px}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--muted);width:260px}
.search input{border:0;background:transparent;font:14px var(--sans);padding:10px 0;width:100%;min-width:0;color:var(--muted)}
.search input:disabled{cursor:text}
.menubtn{display:none;margin-left:auto;background:var(--navy);border:0;border-radius:8px;width:44px;height:44px;padding:0;cursor:pointer;flex:none}
.menubtn span{display:block;width:20px;height:2px;background:#fff;margin:4px auto}
nav{background:linear-gradient(var(--navy2),var(--navy))}
nav .wrap{display:flex;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;font:600 14px var(--sans);padding:14px 16px;border-bottom:3px solid transparent;letter-spacing:.2px}
nav a:hover{background:rgba(255,255,255,.1);border-bottom-color:var(--gold2)}
nav a[aria-current]{border-bottom-color:var(--gold);background:rgba(255,255,255,.08)}
nav .wrap{justify-content:center}
@media (min-width:1300px){nav .wrap{flex-wrap:nowrap;max-width:none}nav a{padding:14px 8px;font-size:13px;letter-spacing:0;white-space:nowrap}}
/* hero */
.hero{color:#fff;position:relative;overflow:hidden;background:
 radial-gradient(ellipse at 78% 22%,rgba(255,214,120,.75) 0,rgba(255,170,80,.25) 14%,transparent 30%),
 linear-gradient(180deg,rgba(13,35,66,.2),rgba(13,35,66,.78)),
 linear-gradient(180deg,#5f86b8 0,#8fb1d6 42%,#c7d6e4 58%,#3b6a8f 58.2%,#27506f 100%)}
.hero::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:46%;background:
 radial-gradient(60% 100% at 18% 100%,#173a2e 0 60%,transparent 61%),
 radial-gradient(55% 90% at 62% 100%,#1c4636 0 58%,transparent 59%),
 radial-gradient(45% 70% at 95% 100%,#143528 0 60%,transparent 61%);opacity:.9}
.hero .wrap{position:relative;padding-top:56px;padding-bottom:56px}
.hero h2,.hero h1{margin:0 0 10px;font:700 40px/1.15 var(--serif);text-shadow:0 2px 12px rgba(0,0,0,.4);max-width:760px}
.hero p{margin:0;max-width:640px;font-size:18px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.home .hero .wrap{padding-top:96px;padding-bottom:84px}
.home .hero h2,.home .hero h1{font-size:50px}
.herosearch{margin-top:28px;max-width:640px;display:flex;align-items:center;gap:10px;background:#fff;color:var(--muted);border-radius:999px;padding:0 22px;box-shadow:0 10px 30px rgba(0,0,0,.3);border-bottom:3px solid var(--gold)}
.herosearch input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--sans);padding:16px 0}
/* I want to */
.iwant{background:var(--navy);margin-top:-1px;border-bottom:4px solid var(--gold)}
.iwant .wrap{padding-top:22px;padding-bottom:26px}
.iw-title{font:700 22px var(--serif);color:var(--gold2);margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tiles a{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;text-decoration:none;color:var(--navy);background:#fff;border-radius:12px;padding:18px 8px;font:600 14px/1.25 var(--sans);transition:transform .15s,box-shadow .15s,background .15s}
.tiles a svg{width:34px;height:34px;color:var(--navy2);background:var(--sky);border-radius:50%;padding:8px;box-sizing:content-box}
.tiles a:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.28);background:#fffbe9}
.tiles a:hover svg{background:var(--gold2);color:var(--navy)}
/* layout */
main .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;padding-top:34px;padding-bottom:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:22px;box-shadow:0 2px 10px rgba(20,50,92,.06)}
.card h2{margin:0 0 14px;color:var(--navy);font:700 22px/1.25 var(--serif);padding-bottom:8px;border-bottom:3px solid var(--gold);display:inline-block;max-width:100%}
.news{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:18px;border-top:1px solid var(--line);padding:16px 0;align-items:start}
.news:first-of-type{border-top:0}
.news::before{content:"";grid-column:1;grid-row:1/span 12;height:100px;border-radius:10px;background:
 radial-gradient(circle at 75% 28%,rgba(255,224,140,.9) 0 9%,transparent 10%),
 linear-gradient(180deg,#86a9cf 0,#b9cde0 55%,#2f5f84 55.5%,#234d6d 100%)}
.news:nth-of-type(3n+2)::before{background:radial-gradient(70% 60% at 30% 100%,#1d4a38 0 60%,transparent 61%),radial-gradient(60% 50% at 85% 100%,#173b2d 0 60%,transparent 61%),linear-gradient(180deg,#c9a227 0,#e7d089 40%,#9ab6d3 100%)}
.news:nth-of-type(3n)::before{background:linear-gradient(135deg,var(--navy) 0 50%,var(--navy2) 50% 100%);box-shadow:inset 0 -6px 0 var(--gold)}
.news>*{grid-column:2}
.date{font:600 11.5px var(--sans);color:#8a6d0a;text-transform:uppercase;letter-spacing:.8px}
.news h3{margin:3px 0 5px;font:700 19px/1.3 var(--serif);color:var(--navy)}
.news p{margin:0 0 6px;color:#3b4652}
.quick a{display:block;padding:11px 0 11px 22px;border-top:1px solid var(--line);text-decoration:none;font:500 15px/1.4 var(--sans);position:relative}
.quick a::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-right:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}
.quick a:hover{color:var(--navy);background:#fffbe9}
.quick a:first-of-type{border-top:0}
table{width:100%;border-collapse:collapse;font:14px var(--sans)}
th,td{text-align:left;padding:10px 8px;border-top:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;border-top:0;background:var(--sky);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
tr:nth-child(even) td{background:#fafcfe}
.tag{display:inline-block;font:600 11px var(--sans);padding:3px 9px;border-radius:999px;background:var(--sky);color:var(--navy);border:1px solid #c9daee}
.hours td{border:0;padding:4px 0;background:none}
.hours td:first-child{padding-right:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.note{font:13.5px/1.5 var(--sans);color:var(--muted);margin-top:10px}
/* footer */
footer{background:var(--navy3);color:#cfd8e3;font:14px/1.6 var(--sans);border-top:5px solid var(--gold);margin-top:10px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr);gap:36px;padding-top:40px;padding-bottom:34px}
.fabout img{display:block;margin-bottom:12px}
.fabout div{font:700 18px var(--serif);color:#fff}
.fabout p{margin:8px 0 0;color:#aebbcc;max-width:360px}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fcols h2.fh{margin:0 0 10px;color:var(--gold2);font:700 13px/1.4 var(--sans);font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:1px}
.fcols a{display:block;color:#dfe7f1;text-decoration:none;padding:4px 0}
.fcols a:hover{color:var(--gold2);text-decoration:underline}
.fbar{background:#081a31;color:#8fa1b8;font-size:12.5px;padding:14px 0}
/* mobile */
@media (max-width:1180px){
 .search{display:none}
 .menubtn{display:block}
 nav{display:none}
 nav.open{display:block;max-height:calc(100vh - 80px);overflow-y:auto}
 nav .wrap{flex-direction:column;padding:0}
 nav a{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
 nav a[aria-current]{box-shadow:inset 4px 0 0 var(--gold)}
}
@media (max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* wide screens: one row; wrap stays allowed as a fallback so links never overflow */
@media (min-width:1181px){nav .wrap{justify-content:space-between}nav a{padding:14px 12px;white-space:nowrap}}
@media (max-width:780px){
 main .wrap{grid-template-columns:minmax(0,1fr);padding-top:22px}
 .h1{font-size:19px}
 .sub{display:none}
 .brand img{width:56px;height:56px}
 .brand{gap:10px}
 .hero h2,.home .hero h2,.hero h1,.home .hero h1{font-size:30px}
 .home .hero .wrap{padding-top:52px;padding-bottom:48px}
 .hero .wrap{padding-top:26px;padding-bottom:28px}
 .ticker{font-size:12.5px;line-height:1.35;padding:6px 12px;text-align:left}
 .ticker b{font-size:11px;padding:1px 6px;margin-right:6px}
 .hero p{font-size:16px}
 .iw-title{font-size:19px}
 .news{grid-template-columns:minmax(0,1fr)}
 .news::before{display:none}
 .news>*{grid-column:1}
 .card{padding:16px}
 .fgrid{grid-template-columns:minmax(0,1fr);gap:24px}
 table{display:block;overflow-x:auto}
}
@media (max-width:420px){.tiles{gap:8px}.tiles a{font-size:13px;padding:14px 4px}}

.sewerfee{background:#fff6d6;border-top:2px solid #c9a227;font:14px Inter,Arial,sans-serif;color:#5a4a12}
.sewerfee .wrap{padding:12px 16px}

ol.simple{padding-left:22px}
ol.simple li{margin:0 0 12px;font-size:17px;line-height:1.5}

/* phone wrapping: ordinance numbers, tags and dates never break mid-number; small labels at least 12.5px */
.tag{font-size:12.5px;white-space:nowrap}
.tags .tag{white-space:normal;max-width:100%}
.date,.feat .fdate{font-size:12.5px}
.doc h3 .dn{white-space:nowrap}
.home main table:not(.hours) td:first-child,
.card .mtable td:first-child,
.card table:has(th:nth-child(4):empty) td:first-child{white-space:nowrap}
@media (max-width:780px){
 .card .mtable{display:block;overflow-x:auto}
 .card .mtable td:first-child{white-space:nowrap}
}
.skip{position:fixed;left:8px;top:-120px;z-index:100;background:var(--gold);color:var(--navy3);font:700 15px var(--sans);padding:10px 16px;border-radius:6px;text-decoration:none}.skip:focus{top:8px}main:focus{outline:0}

/* anchors land below the sticky header */
html{scroll-padding-top:150px}
@media (max-width:1180px){html{scroll-padding-top:90px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* keyboard focus, site-wide */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--navy2);outline-offset:2px}
nav a:focus-visible,.iwant a:focus-visible,footer a:focus-visible,.menubtn:focus-visible,.ticker a:focus-visible{outline:3px solid var(--gold2);outline-offset:-3px}
nav a:focus-visible{border-bottom-color:var(--gold2)}
.tiles a:focus-visible{transform:translateY(-3px);background:#fffbe9}
.tiles a:focus-visible svg{background:var(--gold2);color:var(--navy)}
.quick a:focus-visible{color:var(--navy);background:#fffbe9}

/* phones: tables with 3+ columns become stacked rows (.hours and #mtable untouched) */
@media (max-width:600px){
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)){display:block;overflow:visible}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) :is(tbody,tr,td){display:block}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) tr:has(th){display:none}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) tr{border-top:1px solid var(--line);padding:10px 8px}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) td{border:0;padding:2px 0;background:none;white-space:normal;width:auto}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) td:first-child{font-weight:600;color:var(--navy)}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) td:empty{display:none}
 .card table:not(.hours):not(#mtable):has(th:nth-child(3)) tr:nth-child(even){background:#fafcfe}
}

/* print */
@media print{
 body{background:#fff;font-size:12pt}
 .ticker,.search,.menubtn,nav,.iwant,.sewerfee,.herobtn,.mfilter,.tbar,.filters,.lsearch,.fcols,.fbar{display:none!important}
 .top{position:static;box-shadow:none}
 .hero{background:none!important;color:#000}.hero::before{display:none}
 .hero h1,.hero h2,.hero p{text-shadow:none;color:#000}
 .hero .wrap,.home .hero .wrap{padding:12px 0}
 main .wrap{display:block}
 .card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
 table{display:table!important}
 .news::before{display:none}.news{display:block}
 footer{background:none;color:#000;border-top:1px solid #000}
 .fabout p,.fabout div{color:#000}
 a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* report-an-issue button (reported.html) */
.reportline{margin:18px 0 8px}
.reportbtn{display:inline-block;background:#bf0a30;color:#fff;text-decoration:none;font:700 16px var(--sans);padding:13px 22px;border-radius:8px;border-bottom:3px solid #8a0722}
.reportbtn:hover,.reportbtn:focus{background:#a00828;color:#fff}