:root{
  --brand-red: #b31942;
  --brand-blue: #0a3161;
  --ink: #0f172a;
}

html, body { height: 100%; }
body { color: var(--ink); background: #0b1220; }

.hero{
  position: relative;
  min-height: 72vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(10,49,97,.88), rgba(179,25,66,.78)),
    url("../img/fairview-city-hall.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transform: scale(1.02);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 600px at 50% 15%, rgba(255,255,255,.25), rgba(0,0,0,.35));
  pointer-events:none;
}

.hero-content{ position:relative; z-index:1; padding: 5rem 0 4rem; }

.glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.25rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.brand-mark{
  width:56px; height:56px;
  display:inline-grid;
  place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
}

.badge-soft{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

.section{ background:#f8fafc; }
.section-alt{ background:#ffffff; }

.card-soft{
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
}

.footer{ background:#0b1220; color: rgba(255,255,255,.85); }
.footer a{ color: rgba(255,255,255,.92); }
.footer a:hover{ color:#ffffff; }
small.muted{ color: rgba(255,255,255,.70); }

.notice{
  border-left:4px solid var(--brand-red);
  background: rgba(179,25,66,.08);
}

.icon-circle{
  width:40px; height:40px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background: rgba(10,49,97,.08);
  border: 1px solid rgba(10,49,97,.12);
}