:root {
  /* ==================================================
     COLORS
  ================================================== */

  --navy: #062f54;
  --navy-dark: #041f38;

  --blue: #0f66a0;
  --blue-dark: #095789;
  --blue-bright: #1687c8;
  --blue-soft: #e8f3fb;
  --blue-pale: #dceefa;

  --white: #ffffff;
  --page: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f9fbfd;

  --border: #d8e2ea;
  --border-dark: #b8c8d4;

  --text: #152536;
  --muted: #5d6b78;

  --gold: #efb82d;
  --success: #2d7d46;
  --warning: #a96800;
  --danger: #a92828;

  /* ==================================================
     SHARED LAYOUT
  ================================================== */

  --max-width: 1360px;
  --content-width: 1080px;
  --text-width: 760px;

  --gutter-desktop: 32px;
  --gutter-tablet: 24px;
  --gutter-mobile: 20px;

  --section-space: 56px;
  --section-space-small: 32px;

  --radius: 7px;
  --radius-small: 6px;
  --radius-large: 12px;

  --shadow:
    0 4px 15px rgba(5, 41, 71, 0.08);

  --shadow-large:
    0 10px 28px rgba(5, 41, 71, 0.12);

  /* ==================================================
     HEADER
  ================================================== */

  --utility-height: 42px;

  --header-height: 108px;
  --header-gap: 32px;
  --header-image-box-height: 82px;

  --smart-column-width: 320px;
  --smart-image-width: 320px;
  --smart-image-height: 72px;

  --title-column-width: 520px;
  --title-image-width: 450px;
  --title-image-height: 76px;

  --badge-column-width: 230px;
  --badge-image-width: 160px;
  --badge-image-height: 76px;

  --smart-image-down: 0px;
  --title-image-down: 18px;
  --badge-image-down: 7px;

  --navigation-height: 56px;

  /* ==================================================
     HOMEPAGE HERO
  ================================================== */

  --hero-height-desktop: 430px;
  --hero-height-mobile: 500px;
  --hero-content-width: 500px;
}

/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;

  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.5;

  color: var(--text);
  background: var(--page);
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--navy);
}

p:last-child {
  margin-bottom: 0;
}

img {
  display: block;

  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding-left: 0;
}

ul {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

table {
  width: 100%;

  border-collapse: collapse;
}

iframe {
  display: block;

  width: 100%;
  max-width: 100%;

  border: 0;
}

/* ==================================================
   SHARED CONTAINERS
================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);

  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.content-container {
  width: 100%;
  max-width: var(--content-width);

  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.text-container {
  width: 100%;
  max-width: var(--text-width);

  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.full-width {
  width: 100%;
}

.centered {
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

/* ==================================================
   ACCESSIBILITY
================================================== */

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter-desktop);
  z-index: 9999;

  padding: 12px 16px;

  font-weight: 800;

  color: var(--white);
  background: var(--navy-dark);

  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ==================================================
   UTILITY BAR
================================================== */

.utility-bar {
  color: var(--white);
  background: var(--navy-dark);
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: var(--utility-height);
  gap: 16px;

  font-size: 0.92rem;
}

.utility-email,
.members-link {
  font-weight: 700;
  color: var(--white);
}

.utility-email:hover,
.utility-email:focus-visible,
.members-link:hover,
.members-link:focus-visible {
  text-decoration: underline;
}

/* ==================================================
   HEADER
================================================== */

.site-header {
  position: relative;
  z-index: 100;

  background: var(--surface);

  border-bottom: 1px solid var(--border);
}

.branding-row {
  display: grid;

  grid-template-columns:
    minmax(0, var(--smart-column-width))
    minmax(0, var(--title-column-width))
    minmax(0, var(--badge-column-width));

  align-items: center;
  justify-content: space-between;

  min-height: var(--header-height);
  gap: var(--header-gap);

  padding-top: 8px;
  padding-bottom: 6px;
}

.header-logo-column,
.header-title-column,
.header-badge-column {
  display: flex;
  align-items: center;

  min-width: 0;
  height: var(--header-image-box-height);
}

.header-logo-column {
  justify-content: flex-start;
}

.header-title-column {
  justify-content: center;
}

.header-badge-column {
  justify-content: flex-end;
}

.header-logo-link,
.header-title-link {
  display: flex;
  align-items: center;

  width: 100%;
  height: 100%;
}

.header-logo-link {
  justify-content: flex-start;
}

.header-title-link {
  justify-content: center;
}

.smart-logo {
  width: min(var(--smart-image-width), 100%);
  height: var(--smart-image-height);

  object-fit: contain;
  object-position: left center;

  transform: translateY(var(--smart-image-down));
}

.local303-title-image {
  width: min(var(--title-image-width), 100%);
  height: var(--title-image-height);

  object-fit: contain;
  object-position: center center;

  transform: translateY(var(--title-image-down));
}

.local-badge {
  width: min(var(--badge-image-width), 100%);
  height: var(--badge-image-height);

  object-fit: contain;
  object-position: right center;

  transform: translateY(var(--badge-image-down));
}

/* ==================================================
   MENU BUTTON
================================================== */

.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;

  min-height: 46px;
  padding: 11px 17px;

  font-weight: 800;

  color: var(--white);
  background: var(--blue);

  border: 0;
  border-radius: var(--radius-small);
}

.menu-button:hover,
.menu-button:focus-visible {
  background: var(--blue-bright);
}

/* ==================================================
   PRIMARY NAVIGATION
================================================== */

.primary-navigation {
  color: var(--white);
  background: var(--blue);
}

.navigation-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.primary-navigation a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: var(--navigation-height);
  padding: 12px 8px;

  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;

  text-align: center;
  text-transform: uppercase;

  border-bottom: 3px solid transparent;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible,
.primary-navigation a.active,
.primary-navigation a[aria-current="page"] {
  background: rgba(4, 31, 56, 0.28);

  border-bottom-color: var(--white);
}

/* ==================================================
   BUTTONS
================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 11px 16px;

  font-weight: 800;
  line-height: 1.2;
  text-align: center;

  border: 2px solid transparent;
  border-radius: var(--radius-small);

  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: var(--blue);

  box-shadow:
    0 5px 14px rgba(5, 41, 71, 0.17);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--blue-bright);
}

.button-secondary {
  color: var(--blue);
  background: var(--white);

  border-color: var(--blue);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: var(--white);
  background: var(--blue);
}

.button-dark {
  color: var(--white);
  background: var(--navy-dark);
}

.button-dark:hover,
.button-dark:focus-visible {
  background: var(--navy);
}

.button-light {
  color: var(--navy);
  background: var(--blue-soft);

  border-color: var(--border);
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--blue-pale);
}

.button-small {
  min-height: 36px;
  padding: 8px 13px;

  font-size: 0.78rem;
}

.button-full {
  width: 100%;
}

/* ==================================================
   TEXT LINKS
================================================== */

.text-link {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  font-weight: 800;

  color: var(--blue);
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

/* ==================================================
   GENERIC PAGE HERO
================================================== */

.page-hero {
  padding-top: 48px;
  padding-bottom: 48px;

  color: var(--white);

  background:
    linear-gradient(
      110deg,
      var(--navy-dark),
      var(--navy),
      var(--blue-dark)
    );
}

.page-hero .container,
.page-hero .content-container {
  position: relative;
}

.page-eyebrow {
  margin-bottom: 8px;

  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.13em;

  color: #bfe3f7;

  text-transform: uppercase;
}

.page-hero h1 {
  margin-bottom: 12px;

  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;

  color: var(--white);
}

.page-introduction {
  max-width: 720px;
  margin-bottom: 0;

  font-size: 1rem;
  line-height: 1.6;

  color: #e1eef6;
}

/* ==================================================
   GENERIC PAGE SECTIONS
================================================== */

.page-section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.page-section-small {
  padding-top: var(--section-space-small);
  padding-bottom: var(--section-space-small);
}

.page-section-white {
  background: var(--white);
}

.page-section-soft {
  background: var(--surface-soft);
}

.page-section-blue {
  color: var(--white);
  background: var(--navy);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;
}

.section-heading-content {
  max-width: 760px;
}

.section-eyebrow {
  margin-bottom: 7px;

  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.12em;

  color: var(--blue);

  text-transform: uppercase;
}

.section-heading h2 {
  margin-bottom: 8px;

  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;

  color: var(--navy);
}

.section-heading p {
  margin-bottom: 0;

  color: var(--muted);
}

/* ==================================================
   GENERIC GRIDS
================================================== */

.grid {
  display: grid;

  gap: 20px;
}

.grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-sidebar {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.35fr);

  align-items: start;
}

/* ==================================================
   GENERIC CARDS
================================================== */

.card {
  min-width: 0;
  padding: 22px;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.card h2,
.card h3,
.card h4 {
  color: var(--navy);
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;
}

.card-icon {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  color: var(--white);
  background: var(--blue);

  border-radius: 50%;
}

.card-icon svg {
  width: 28px;
  height: 28px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-label {
  margin-bottom: 5px;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.09em;

  color: var(--blue);

  text-transform: uppercase;
}

.card-description {
  color: var(--muted);
}

.card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 18px;
}

/* ==================================================
   PANEL
================================================== */

.panel {
  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 42px;
  gap: 14px;

  padding: 9px 16px;

  color: var(--white);

  background:
    linear-gradient(
      90deg,
      var(--navy),
      var(--blue)
    );
}

.panel-header h2,
.panel-header h3 {
  margin-bottom: 0;

  font-size: 0.86rem;
  font-weight: 900;

  color: var(--white);

  text-transform: uppercase;
}

.panel-body {
  padding: 20px;
}

.panel-footer {
  padding: 11px 16px;

  background: var(--surface-soft);

  border-top: 1px solid var(--border);
}

/* ==================================================
   DOCUMENT AND PDF CARDS
================================================== */

.document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}

.document-card {
  display: grid;

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

  grid-template-areas:
    "icon content"
    "icon actions";

  align-items: start;

  gap: 12px 18px;

  padding: 22px;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.document-icon {
  grid-area: icon;

  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  color: var(--white);
  background: var(--blue);

  border-radius: 50%;
}

.document-icon svg {
  width: 31px;
  height: 31px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-content {
  grid-area: content;

  min-width: 0;
}

.document-content h2,
.document-content h3 {
  margin-bottom: 4px;

  color: var(--navy);
}

.document-meta {
  margin-bottom: 8px;

  font-size: 0.82rem;
  font-weight: 800;

  color: var(--blue);
}

.document-description {
  margin-bottom: 0;

  color: var(--muted);
}

.document-actions {
  grid-area: actions;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}

/* ==================================================
   ARCHIVE LISTS
================================================== */

.archive-group {
  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.archive-group + .archive-group {
  margin-top: 20px;
}

.archive-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 13px 18px;

  color: var(--white);

  background:
    linear-gradient(
      90deg,
      var(--navy),
      var(--blue)
    );
}

.archive-heading h2,
.archive-heading h3,
.archive-heading p {
  margin-bottom: 0;

  color: var(--white);
}

.archive-heading h2,
.archive-heading h3 {
  font-size: 1rem;
  font-weight: 900;
}

.archive-heading p {
  font-size: 0.74rem;

  color: #d9effc;
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-width: 0;
  gap: 18px;

  padding: 17px 18px;

  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.archive-item:nth-child(2n) {
  border-right: 0;
}

.archive-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.archive-label {
  margin-bottom: 3px;

  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;

  color: var(--blue);

  text-transform: uppercase;
}

.archive-item h3,
.archive-item h4 {
  margin-bottom: 2px;

  color: var(--navy);
}

.archive-item p {
  margin-bottom: 0;

  font-size: 0.76rem;

  color: var(--muted);
}

.archive-item a {
  flex-shrink: 0;

  font-size: 0.75rem;
  font-weight: 900;

  color: var(--blue);

  text-transform: uppercase;
}

.archive-item a:hover,
.archive-item a:focus-visible {
  text-decoration: underline;
}

/* ==================================================
   NOTICE BOXES
================================================== */

.notice {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);

  gap: 14px;

  padding: 18px;

  background: var(--blue-soft);

  border: 1px solid #c5e0f2;
  border-radius: var(--radius);
}

.notice-icon {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  color: var(--white);
  background: var(--blue);

  border-radius: 50%;
}

.notice h2,
.notice h3 {
  margin-bottom: 5px;

  color: var(--navy);
}

.notice p {
  margin-bottom: 0;
}

.notice-warning {
  background: #fff5dc;

  border-color: #efd69a;
}

.notice-warning .notice-icon {
  background: var(--warning);
}

.notice-danger {
  background: #fff0f0;

  border-color: #e1b5b5;
}

.notice-danger .notice-icon {
  background: var(--danger);
}

.notice-success {
  background: #edf8f0;

  border-color: #b9d9c1;
}

.notice-success .notice-icon {
  background: var(--success);
}

/* ==================================================
   FORMS
================================================== */

.form-card {
  padding: 24px;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.form-group {
  display: grid;

  gap: 7px;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-label,
.form-group label {
  font-size: 0.84rem;
  font-weight: 800;

  color: var(--navy);
}

.form-help {
  margin-bottom: 0;

  font-size: 0.76rem;

  color: var(--muted);
}

.form-control,
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 46px;

  padding: 11px 12px;

  color: var(--text);
  background: var(--white);

  border: 1px solid var(--border-dark);
  border-radius: var(--radius-small);
}

.form-group textarea {
  min-height: 140px;

  resize: vertical;
}

.form-control:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue);

  outline: 3px solid rgba(15, 102, 160, 0.16);
  outline-offset: 0;
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 22px;
}

/* ==================================================
   TABLES
================================================== */

.table-wrapper {
  width: 100%;

  overflow-x: auto;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.data-table {
  min-width: 680px;
}

.data-table th,
.data-table td {
  padding: 13px 15px;

  text-align: left;
  vertical-align: top;

  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-size: 0.76rem;
  font-weight: 900;

  color: var(--white);
  background: var(--navy);

  text-transform: uppercase;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
  background: var(--surface-soft);
}

/* ==================================================
   ACCORDION AND DETAILS
================================================== */

.details-list {
  display: grid;

  gap: 12px;
}

.details-card {
  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.details-card summary {
  padding: 15px 18px;

  font-weight: 900;

  color: var(--navy);

  cursor: pointer;
}

.details-content {
  padding: 0 18px 18px;

  color: var(--muted);
}

/* ==================================================
   HOMEPAGE HERO
================================================== */

.hero {
  display: flex;

  min-height: var(--hero-height-desktop);

  background:
    url("../images/trackpic.png")
    center center / cover no-repeat;
}

.hero-inner {
  display: flex;
  align-items: flex-start;

  width: 100%;

  padding-top: 32px;
  padding-bottom: 32px;
}

.hero-content {
  width: min(var(--hero-content-width), 100%);
}

.hero-eyebrow {
  margin-bottom: 8px;

  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.13em;

  color: var(--blue);

  text-transform: uppercase;

  text-shadow:
    0 1px 2px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 1);
}

.hero h1 {
  margin-bottom: 11px;

  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;

  color: var(--blue);

  text-transform: uppercase;

  text-shadow:
    0 1px 2px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.95);
}

.hero-description {
  max-width: 470px;
  margin-bottom: 18px;

  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;

  color: var(--blue);

  text-shadow:
    0 1px 2px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 1);
}

/* ==================================================
   HOMEPAGE QUICK ACCESS
================================================== */

.quick-access-section {
  padding-top: 26px;
  padding-bottom: 14px;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.quick-access-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: flex-start;

  min-width: 0;
  min-height: 114px;
  gap: 11px;

  padding: 17px 14px;

  background: var(--surface);

  border-right: 1px solid var(--border);

  transition:
    background 160ms ease,
    transform 160ms ease;
}

.quick-access-card:last-child {
  border-right: 0;
}

.quick-access-card:hover,
.quick-access-card:focus-visible {
  background: var(--blue-soft);
}

.quick-access-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  color: var(--blue);
}

.quick-access-icon svg {
  width: 31px;
  height: 31px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-access-content {
  display: block;

  min-width: 0;
}

.quick-access-content strong {
  display: block;

  margin-bottom: 7px;

  font-size: 0.79rem;
  font-weight: 900;
  line-height: 1.2;

  color: var(--navy);

  text-transform: uppercase;
}

.quick-access-content span {
  display: block;

  font-size: 0.76rem;
  line-height: 1.45;

  color: var(--text);
}

/* ==================================================
   HOMEPAGE PANELS
================================================== */

.homepage-panels-section {
  padding-top: 0;
  padding-bottom: 16px;
}

.homepage-panels-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 1fr)
    minmax(280px, 0.9fr);

  align-items: start;

  gap: 16px;
}

.homepage-panel {
  min-width: 0;

  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 40px;
  gap: 12px;

  padding: 8px 15px;

  color: var(--white);

  background:
    linear-gradient(
      90deg,
      var(--navy),
      var(--blue)
    );
}

.panel-heading h2 {
  margin: 0;

  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;

  color: var(--white);

  text-transform: uppercase;
}

.panel-heading a {
  flex-shrink: 0;

  font-size: 0.7rem;
  font-weight: 700;

  color: #d9effc;

  text-transform: uppercase;
}

.panel-heading a:hover,
.panel-heading a:focus-visible {
  color: var(--white);

  text-decoration: underline;
}

/* ==================================================
   HOMEPAGE EVENTS
================================================== */

.event-list {
  padding-inline: 15px;
}

.event-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;

  min-height: 82px;
  gap: 12px;

  padding-block: 11px;

  border-bottom: 1px solid var(--border);
}

.event-item:last-child {
  border-bottom: 0;
}

.event-date {
  align-self: start;

  width: 48px;

  overflow: hidden;

  text-align: center;

  background: var(--white);

  border: 1px solid #aabac7;
  border-radius: 4px;
}

.event-date span {
  display: block;

  padding: 4px 2px;

  font-size: 0.59rem;
  font-weight: 900;
  line-height: 1.1;

  color: var(--white);
  background: var(--navy);

  text-transform: uppercase;
}

.event-date strong {
  display: block;

  padding: 5px 2px 6px;

  font-size: 1.18rem;
  line-height: 1;

  color: var(--navy);
}

.event-details {
  min-width: 0;
}

.event-details h3 {
  margin-bottom: 4px;

  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.25;

  color: var(--navy);

  text-transform: uppercase;
}

.event-details p {
  margin-bottom: 2px;

  font-size: 0.72rem;
  line-height: 1.35;

  color: var(--muted);
}

.event-label {
  align-self: center;

  padding: 5px 7px;

  font-size: 0.59rem;
  font-weight: 900;
  line-height: 1;

  color: var(--white);
  background: var(--gold);

  border-radius: 3px;

  text-transform: uppercase;
}

.panel-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 8px 14px;

  font-size: 0.68rem;
  font-weight: 900;

  color: var(--blue);
  background: #fbfcfd;

  border-top: 1px solid var(--border);

  text-transform: uppercase;
}

.panel-footer-link:hover,
.panel-footer-link:focus-visible {
  background: var(--blue-soft);
}

/* ==================================================
   HOMEPAGE NEWS
================================================== */

.news-list {
  padding-inline: 15px;
}

.news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  min-height: 82px;
  gap: 10px;

  padding-block: 11px;

  border-bottom: 1px solid var(--border);
}

.news-item:last-child {
  border-bottom: 0;
}

.news-copy {
  display: block;

  min-width: 0;
}

.news-copy strong {
  display: block;

  margin-bottom: 3px;

  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.3;

  color: var(--navy);
}

.news-copy > span {
  display: block;

  margin-bottom: 3px;

  font-size: 0.72rem;
  line-height: 1.35;

  color: var(--text);
}

.news-copy small {
  display: block;

  font-size: 0.64rem;
  font-weight: 700;

  color: var(--muted);
}

a.news-item:hover,
a.news-item:focus-visible {
  background: #f8fbfd;
}

.news-arrow {
  font-size: 1.55rem;
  font-weight: 300;

  color: #8795a2;
}

/* ==================================================
   HOMEPAGE SIDEBAR
================================================== */

.homepage-sidebar {
  display: grid;

  gap: 12px;
}

.notice-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;

  min-height: 142px;
  gap: 15px;

  padding: 19px;

  background:
    linear-gradient(
      135deg,
      #edf8ff,
      #cfe8f8
    );

  border: 1px solid #c5e0f2;
  border-radius: var(--radius);

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

.notice-card .notice-icon {
  width: 51px;
  height: 51px;
}

.notice-card .notice-icon svg {
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-content h2 {
  margin-bottom: 4px;

  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.2;

  color: var(--navy);

  text-transform: uppercase;
}

.notice-content p {
  margin-bottom: 12px;

  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.4;

  color: var(--text);
}

.notice-button {
  min-height: 32px;
  padding: 6px 17px;

  font-size: 0.67rem;

  text-transform: uppercase;
}

.local-contact-card {
  min-height: 151px;
  padding: 16px 18px;

  color: var(--white);

  background:
    radial-gradient(
      circle at 88% 55%,
      rgba(255, 255, 255, 0.1),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--blue),
      var(--navy-dark)
    );

  border-radius: var(--radius);

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

.contact-card-heading {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 12px;
}

.contact-card-heading h2 {
  flex-shrink: 0;

  margin: 0;

  font-size: 0.77rem;
  font-weight: 900;

  color: var(--white);

  text-transform: uppercase;
}

.contact-card-heading span {
  display: block;

  width: 100%;
  height: 1px;

  background: rgba(255, 255, 255, 0.55);
}

.contact-card-lines {
  display: grid;

  gap: 7px;
}

.contact-card-lines p {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);

  align-items: start;

  margin: 0;

  font-size: 0.75rem;
  line-height: 1.4;
}

.contact-card-link {
  display: inline-flex;

  margin-top: 12px;

  font-size: 0.7rem;
  font-weight: 800;

  color: #d7efff;
}

.contact-card-link:hover,
.contact-card-link:focus-visible,
.contact-card-lines a:hover,
.contact-card-lines a:focus-visible {
  color: var(--white);

  text-decoration: underline;
}

/* ==================================================
   PWS PAGE
================================================== */

.pws-current-section {
  padding-top: 52px;
  padding-bottom: 32px;
}

.pws-archive-section {
  padding-top: 10px;
  padding-bottom: 64px;
}

.pws-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}

.pws-section-heading .section-eyebrow {
  color: var(--blue);
}

.pws-section-heading h2 {
  margin-bottom: 0;

  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;

  color: var(--navy);
}

.pws-update-note {
  flex-shrink: 0;

  margin-bottom: 3px;

  font-size: 0.78rem;
  font-weight: 800;

  color: var(--muted);

  text-transform: uppercase;
}

.pws-current-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}

.pws-schedule-card {
  display: grid;

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

  grid-template-areas:
    "icon content"
    "icon actions";

  align-items: start;

  gap: 12px 18px;

  padding: 24px;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.pws-card-icon {
  grid-area: icon;

  display: grid;
  place-items: center;

  width: 62px;
  height: 62px;

  color: var(--white);
  background: var(--blue);

  border-radius: 50%;
}

.pws-card-icon svg {
  width: 33px;
  height: 33px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pws-card-content {
  grid-area: content;

  min-width: 0;
}

.pws-card-label {
  margin-bottom: 5px;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.09em;

  color: var(--blue);

  text-transform: uppercase;
}

.pws-card-content h3 {
  margin-bottom: 3px;

  font-size: 1.45rem;
  line-height: 1.2;

  color: var(--navy);
}

.pws-bid-pack {
  margin-bottom: 9px;

  font-size: 0.88rem;
  font-weight: 800;

  color: var(--blue);
}

.pws-card-description {
  margin-bottom: 0;

  font-size: 0.9rem;
  line-height: 1.5;

  color: var(--muted);
}

.pws-card-actions {
  grid-area: actions;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}

.pws-card-actions .button {
  min-height: 40px;
  padding: 9px 15px;

  font-size: 0.78rem;
}

.pws-download-link {
  font-size: 0.78rem;
  font-weight: 800;

  color: var(--blue);
}

.pws-download-link:hover,
.pws-download-link:focus-visible {
  text-decoration: underline;
}

.pws-archive-group {
  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius);

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

.pws-archive-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 13px 18px;

  color: var(--white);

  background:
    linear-gradient(
      90deg,
      var(--navy),
      var(--blue)
    );
}

.pws-archive-heading h3,
.pws-archive-heading p {
  margin-bottom: 0;
}

.pws-archive-heading h3 {
  font-size: 1rem;
  font-weight: 900;

  color: var(--white);
}

.pws-archive-heading p {
  font-size: 0.74rem;

  color: #d9effc;
}

.pws-archive-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pws-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-width: 0;
  gap: 18px;

  padding: 17px 18px;

  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pws-archive-item:nth-child(2n) {
  border-right: 0;
}

.pws-archive-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.pws-archive-quarter {
  margin-bottom: 3px;

  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;

  color: var(--blue);

  text-transform: uppercase;
}

.pws-archive-item h4 {
  margin: 0 0 2px;

  font-size: 0.95rem;
  line-height: 1.25;

  color: var(--navy);
}

.pws-archive-item p:last-child {
  margin-bottom: 0;

  font-size: 0.76rem;

  color: var(--muted);
}

.pws-archive-item a {
  flex-shrink: 0;

  font-size: 0.75rem;
  font-weight: 900;

  color: var(--blue);

  text-transform: uppercase;
}

.pws-archive-item a:hover,
.pws-archive-item a:focus-visible {
  text-decoration: underline;
}

/* ==================================================
   FOOTER
================================================== */

.site-footer {
  color: var(--white);

  background:
    linear-gradient(
      110deg,
      var(--navy-dark),
      var(--navy),
      var(--blue-dark)
    );

  border-top: 4px solid var(--blue-bright);
}

.footer-content {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.8fr)
    minmax(480px, 1.7fr);

  align-items: start;

  gap: 20px 48px;

  padding-top: 26px;
  padding-bottom: 16px;
}

.footer-identity {
  display: grid;

  gap: 3px;
}

.footer-name {
  margin-bottom: 0;

  font-size: 1rem;
  font-weight: 900;

  color: var(--white);

  text-transform: uppercase;
}

.footer-location {
  margin-bottom: 2px;

  font-size: 0.82rem;

  color: #c8dce9;
}

.footer-email {
  width: fit-content;

  font-size: 0.82rem;
  font-weight: 700;

  color: var(--white);
}

.footer-email:hover,
.footer-email:focus-visible {
  text-decoration: underline;
}

.footer-navigation {
  display: grid;

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

  align-self: center;

  column-gap: 20px;
  row-gap: 2px;
}

.footer-navigation a {
  display: flex;
  align-items: center;

  min-height: 30px;
  padding: 4px 10px;

  font-size: 0.78rem;
  font-weight: 750;

  color: #e8f4fb;

  border-radius: 4px;
}

.footer-navigation a:hover,
.footer-navigation a:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.footer-bottom {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-top: 12px;

  font-size: 0.72rem;

  color: #c8dce9;

  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
  margin-bottom: 0;
}

/* ==================================================
   TABLET AND SMALL DESKTOP
================================================== */

@media (max-width: 1100px) {
  :root {
    --header-height: 90px;
    --header-image-box-height: 68px;

    --title-image-width: 350px;
    --title-image-height: 60px;

    --title-image-down: 0px;
    --badge-image-down: 0px;
  }

  .container,
  .content-container,
  .text-container {
    padding-inline: var(--gutter-tablet);
  }

  .branding-row {
    grid-template-columns: minmax(0, 1fr) auto;

    min-height: var(--header-height);

    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header-logo-column,
  .header-badge-column {
    display: none;
  }

  .header-title-column {
    justify-content: flex-start;

    height: var(--header-image-box-height);
  }

  .header-title-link {
    justify-content: flex-start;
  }

  .local303-title-image {
    object-position: left center;
  }

  .menu-button {
    display: inline-flex;
  }

  .primary-navigation {
    display: none;
  }

  .primary-navigation.is-open {
    display: block;
  }

  .navigation-list {
    display: block;
  }

  .primary-navigation a {
    justify-content: flex-start;

    min-height: 50px;

    padding:
      13px
      var(--gutter-tablet);

    text-align: left;

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

    border-bottom: 0;
  }

  .primary-navigation a:hover,
  .primary-navigation a:focus-visible,
  .primary-navigation a.active,
  .primary-navigation a[aria-current="page"] {
    border-bottom-color: transparent;
  }

  .grid-four {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .grid-sidebar {
    grid-template-columns: 1fr;
  }

  .quick-access-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .quick-access-card:nth-child(3n) {
    border-right: 0;
  }

  .quick-access-card:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }

  .homepage-panels-grid {
    grid-template-columns: 1fr 1fr;
  }

  .homepage-sidebar {
    grid-column: 1 / -1;

    grid-template-columns: 1fr 1fr;
  }

  .footer-content {
    grid-template-columns:
      minmax(190px, 0.7fr)
      minmax(0, 1.3fr);

    gap: 22px 34px;
  }

  .footer-navigation {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {
  .grid-three {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .document-grid,
  .pws-current-grid {
    grid-template-columns: 1fr;
  }

  .archive-list,
  .pws-archive-items {
    grid-template-columns: 1fr;
  }

  .archive-item,
  .pws-archive-item {
    border-right: 0;
  }

  .archive-item:nth-last-child(-n + 2),
  .pws-archive-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .archive-item:last-child,
  .pws-archive-item:last-child {
    border-bottom: 0;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {
  :root {
    --header-height: 76px;
    --header-image-box-height: 54px;

    --title-image-width: 245px;
    --title-image-height: 48px;

    --section-space: 42px;
    --section-space-small: 26px;
  }

  .container,
  .content-container,
  .text-container {
    padding-inline: var(--gutter-mobile);
  }

  .utility-bar {
    display: none;
  }

  .branding-row {
    min-height: var(--header-height);
    gap: 12px;

    padding-top: 7px;
    padding-bottom: 7px;
  }

  .header-title-column,
  .header-title-link {
    height: var(--header-image-box-height);
  }

  .menu-button {
    min-height: 44px;
    padding: 10px 14px;
  }

  .primary-navigation a {
    padding-right: var(--gutter-mobile);
    padding-left: var(--gutter-mobile);
  }

  .page-hero {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .section-heading,
  .pws-section-heading {
    display: block;
  }

  .section-heading > :last-child,
  .pws-update-note {
    margin-top: 8px;
  }

  .grid-two,
  .grid-three,
  .grid-four {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group-full {
    grid-column: auto;
  }

  .hero {
    min-height: var(--hero-height-mobile);

    background:
      url("../images/trackpic.png")
      62% center / cover no-repeat;
  }

  .hero-inner {
    align-items: flex-start;

    padding-top: 30px;
    padding-bottom: 24px;
  }

  .hero-content {
    width: min(100%, 440px);
  }

  .hero h1 {
    max-width: 410px;

    font-size:
      clamp(
        1.75rem,
        8.2vw,
        2.3rem
      );
  }

  .hero-description {
    max-width: 390px;

    font-size: 0.96rem;
  }

  .quick-access-section {
    padding-top: 18px;
  }

  .quick-access-grid {
    grid-template-columns: 1fr 1fr;
  }

  .quick-access-card {
    min-height: 104px;

    padding: 15px 13px;
  }

  .quick-access-card:nth-child(3n) {
    border-right: 1px solid var(--border);
  }

  .quick-access-card:nth-child(2n) {
    border-right: 0;
  }

  .quick-access-card:nth-child(-n + 4) {
    border-bottom: 1px solid var(--border);
  }

  .homepage-panels-grid {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .homepage-sidebar {
    grid-column: auto;

    grid-template-columns: 1fr;
  }

  .event-item {
    grid-template-columns:
      52px
      minmax(0, 1fr);
  }

  .event-label {
    grid-column: 2;

    justify-self: start;
  }

  .notice-card {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    padding: 17px;
  }

  .notice-card .notice-icon {
    width: 46px;
    height: 46px;
  }

  .document-card,
  .pws-schedule-card {
    grid-template-columns: 1fr;

    grid-template-areas:
      "icon"
      "content"
      "actions";

    gap: 14px;

    padding: 20px;
  }

  .document-actions,
  .pws-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .document-actions .button,
  .pws-card-actions .button {
    width: 100%;
  }

  .pws-download-link {
    text-align: center;
  }

  .archive-heading,
  .pws-archive-heading {
    display: block;
  }

  .archive-heading h3,
  .pws-archive-heading h3 {
    margin-bottom: 3px;
  }

  .footer-content {
    grid-template-columns: 1fr;

    gap: 20px;

    padding-top: 24px;
    padding-bottom: 16px;
  }

  .footer-navigation {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 14px;
    row-gap: 2px;
  }

  .footer-bottom {
    grid-column: auto;

    display: grid;
    grid-template-columns: 1fr;

    gap: 7px;

    padding-top: 12px;
  }
}

/* ==================================================
   SMALL PHONES
================================================== */

@media (max-width: 460px) {
  :root {
    --gutter-mobile: 18px;

    --title-image-width: 205px;
    --title-image-height: 43px;
  }

  .menu-button {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hero h1 {
    font-size:
      clamp(
        1.65rem,
        9vw,
        2rem
      );
  }

  .quick-access-grid {
    grid-template-columns: 1fr;
  }

  .quick-access-card {
    min-height: auto;

    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .quick-access-card:nth-child(3n),
  .quick-access-card:nth-child(2n) {
    border-right: 0;
  }

  .quick-access-card:last-child {
    border-bottom: 0;
  }

  .panel-heading {
    display: block;
  }

  .panel-heading h2 {
    margin-bottom: 3px;
  }

  .event-list,
  .news-list {
    padding-inline: 13px;
  }

  .notice {
    grid-template-columns: 1fr;
  }

  .footer-navigation {
    grid-template-columns: 1fr;
  }

  .footer-navigation a {
    min-height: 30px;
  }

  .archive-item,
  .pws-archive-item {
    align-items: flex-start;

    padding: 15px;
  }
}