:root {
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-font-size: 16px;
  --body-line-height: 1.6;
  /* Boston.gov brand colors (from brand guidelines) */
  --charles-blue: #091F2F; /* dark Charles Blue */
  --optimistic-blue: #1871BD; /* bright link/button blue */
  --freedom-red: #FB4D42; /* Freedom Trail Red */
  --support-blue-1: #061622;
  --support-blue-2: #0C2639;
  --support-blue-3: #45789C;
  --support-blue-4: #51ACFF;
  --support-gray-1: #58585B; /* body copy gray */
  --support-gray-2: #D2D2D2;
  --support-gray-3: #E0E0E0;
  --support-gray-4: #F2F2F2;

  --body-color: var(--support-gray-1);
  --brand-navy: var(--charles-blue);
  --top-banner-height: 39px; /* tiny bump to better match screenshot */
  --header-height: 64px; /* height reserved for the white menu bar */
  --site-top-height: calc(var(--top-banner-height) + var(--header-height));
  --heading-color: var(--brand-navy);
}

/* Make general hyperlinks use optimistic blue by default. Specific contexts
   (e.g. the disclaimer banner) override this where needed. */
a, a:link, a:visited {
  color: var(--optimistic-blue);
}

/* Hover/focus state for all links (preserve disclaimer overrides via specificity) */
a:hover, a:focus {
  color: var(--freedom-red);
}

html {
  /* base font-size for rem calculations */
  font-size: 16px;
}

/* Use border-box everywhere so width calculations include padding/border
   — prevents 100% width elements plus padding from overflowing flex items */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  /* reserve space at the top for the fixed banner + header across all pages */
  padding-top: calc(24px + var(--site-top-height));
  /* side gutters: min = 32px, max = 48px — increased so text isn't cramped */
  padding-right: clamp(32px, 1.0vw, 48px);
  padding-bottom: 20px;
  padding-left: clamp(32px, 1.0vw, 48px);
  box-sizing: border-box;
  /* widen content area so edges are nearer the viewport */
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
}

/* Keep gutters roomier on medium/smaller desktop windows where clamp() may
   shrink the visible spacing — increase padding when viewport is <= 1200px */
@media (max-width: 1200px) {
  body {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* On small/mobile viewports use a slightly smaller but comfortable gutter */
@media (max-width: 600px) {
  body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

:root {
  /* Vertical space to subtract from 100vh to account for banners/header above the section */
  --stats-top-offset: 140px; /* adjust if headers/banners change size */
  --section-gap: 2.5rem; /* vertical space used between stats rows and method banners */
  --list-gap: 0.5rem; /* vertical spacing between list items — tweak this to make bullets tighter/looser */
}

h1 {
  margin: 18px 0 18px 0; /* tiny increase below h1 */
  padding: 6px 8px;
  text-align: left;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--heading-color);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* responsive size: match Boston hero scale */
  font-size: clamp(28px, 5.5vw, 64px);
}

 h2 {
  margin: 24px 0 18px;
  padding: 0 8px 0 8px;
  /* slightly smaller responsive h2 scale to match target page */
  font-size: clamp(18px, 2.6vw, 28px);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading-color);
  border-bottom: 3px solid var(--charles-blue);
}

h3 {
  margin: 0 0 8px;
  padding: 0 8px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
}

h4 {
  margin: 0 0 8px;
  padding: 0 8px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Headings inside "team-member" cards are handled by .team-member h2 below */

h3 {
  margin: 0 0 8px;
  padding: 0 8px;
  text-align: left;
  color: rgb(176, 0, 0);
  display: flex;
  align-items: center;
  gap: 12px;
}

h4 {
  margin: 0 0 8px;
  padding: 0 8px;
  text-align: left;
}

/* Body copy (paragraphs, captions, list text) */
p, li, figcaption {
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: #58585B; /* unified body paragraph color */
  margin: 0 0 1rem;
  padding: 0 8px;
}

/* Intro text styling - italicized text under h1 with line underneath */
p.intro-text {
  font-style: italic;
  font-size: clamp(var(--body-font-size), 3.2vw, 24px);
  padding: 0 8px 1rem 8px;
  line-height: 2; /* increased for improved readability */
  color: var(--heading-color);
  margin-bottom: 1rem;
}

/* Decorative squiggly divider used between intro text and the first h2 */
.squiggle {
  /* Align the squiggle pattern with the site's left/right gutters so it
     visually lines up with body text. Use the same gutter values and media
     overrides so the offsets match exactly. */
  display: block;
  width: 100%;
  max-width: 1100px; /* same content width as body */
  margin: 1rem auto 20px; /* center within the content column; increased bottom gap */
  /* make the visual divider shorter to match the reference */
  height: 12px;
  box-sizing: border-box;
  /* create matching left/right padding equal to the body's gutters so the
     tiled SVG starts exactly where the text content begins */
  padding-left: clamp(32px, 1.0vw, 48px);
  padding-right: clamp(32px, 1.0vw, 48px);
  background-image: url("../images/squiggle.svg");
  background-repeat: repeat-x;
  background-position: left center;
  /* make each tile narrow so the squiggle has many bumps across the content width */
  background-size: 28px 100%;
}

/* Match the body gutter overrides so the squiggle padding remains identical */
@media (max-width: 1200px) {
  .squiggle {
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media (max-width: 600px) {
  .squiggle {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* General list reset to reduce large default browser spacing */
ul {
  margin: 0 0 0 0;
  padding-left: 20px;
}

/* Use a variable for list spacing so we can tweak it globally */
li {
  margin: 0;
  padding-block: var(--list-gap);
  line-height: 1.4;
}

/* Remove default paragraph margins inside list items so spacing is consistent */
li > p {
  margin: 0;
}

/* Tighten nested list spacing and remove extra block padding at the start */
ul ul {
  padding-left: 1rem;
  margin: 0;
  padding-block-start: 0;
  padding-block-end: 0;
}

/* Use smaller padding for nested list items so their rhythm matches top-level lists */
ul ul li {
  padding-block: calc(var(--list-gap) * 0.5); /* nested items are 50% of top-level gap */
}

/* MAIN PAGE STYLES*/
.stats-row {
  display: flex;
  /* reduce vertical spacing between rows while keeping horizontal gap */
  gap: 1.5rem; /* row-gap column-gap */
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 8px 0;
  box-sizing: border-box;
  margin-bottom: 16px;
  align-items: stretch;

}

/* Centered two-up row: center the row and make two cards split the width */
.stats-row.centered {
  justify-content: center;
  gap: 1.5rem;
}
.stats-row.centered .stat-card {
  flex: 0 1 calc(50% - 0.75rem); /* two cards, accounting for gap */
  max-width: calc(50% - 0.75rem);
}

/* Full-page stats section: top-align content and fill viewport (account for header) */
.stats-fullpage{
  min-height: calc(100vh - var(--stats-top-offset));
  width: 100%;                /* full width */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* top-align content */
  align-items: stretch;        /* let children stretch full width */
  padding-top: 10px;

} 

/* Let rows span the section width */
.stats-fullpage .stats-row{
  width: 100%;
  max-width: none;             /* remove the cap */
  display: flex;               /* ensure flex is actually on */
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;             /* important for smaller screens */
}
/* three-up row: evenly split three cards */
.stats-fullpage .stats-row.three-up .stat-card {
  flex: 0 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}

/* Mobile: stack centered/two-up rows into single column */
@media (max-width: 700px) {
  .stats-row.centered .stat-card,
  .stats-fullpage .stats-row.three-up .stat-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .stats-fullpage {
    /* account for taller header area on small screens */
    min-height: calc(100vh - 180px);
    padding: 12px;
    margin-bottom: 10px;
  }

}

.stat-card {
  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid var(--support-gray-2);
  background: #ffffff;
  padding: 18px;
  border-radius: 8px;
  flex: 1 1 320px;
  min-width: 220px;

}

.stat-card .number {
  font-size: 24px;
  font-weight: 700;
  color: var(--optimistic-blue);
  text-align: center;
  padding: 4px 0 0;
}

.stat-card .label {
  font-size: 16px;
  color: var(--brand-navy);
  text-align: center;
  /* add vertical padding so labels have more breathing room inside the card */
  padding: 6px 0;
}

/* Back link spacing: remove default paragraph top margin so link sits closer to cards */
.back-link {
  margin: 0 20px 12px;
  padding: 0 20px;
}

/* Top banner: simple, full-width within body (no viewport trick) */
/* Top banner: simple, full-width within body (no viewport trick) */
.disclaim-banner {
  /* pinned full-bleed top bar */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--freedom-red);
  color: #ffffff;
  text-align: center;
  min-height: 40px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-weight: 550;
  font-size: 14px; /* keep banner text size */
  z-index: 9999;
  width: 100%;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure any leftover images inside the disclaimer are hidden */
.disclaim-banner img {
  display: none !important;
  width: auto;
  height: auto;
}

/* Logo inside the top banner */
/* banner logo styles removed (logo image no longer used) */

.disclaim-banner .banner-text {
  /* allow text to wrap and unwrap naturally */
}

/* Media query: increase line-height when text wraps to multiple lines */
@media (max-width: 768px) {
  .disclaim-banner .banner-text {
    line-height: 1.8;
  }
}

/* Main header (white menu bar) placed below the top banner */
.top-header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: var(--top-banner-height);
  height: var(--header-height);
  z-index: 9998;
  left: 0;
  right: 0;
  /* subtle shadow to match screenshot */
  box-shadow: 0 4px 14px rgba(9,31,47,0.12) !important;
}

/* The header's top position is controlled via JavaScript which tracks the banner's
   actual height so it will sit flush beneath the banner even when the banner wraps. */
.top-header .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
}

/* Ensure the menu bar uses Montserrat regular */
.top-header,
.top-header .header-inner,
.site-nav-list li a {
  font-family: var(--font-heading);
  font-weight: 400;
}
.site-logo {
  height: 22px;
  width: auto;
  display: block;
  border-radius: 0;
  overflow: visible;
}
.site-nav-list {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  align-items: center; /* vertically center nav items */
  height: var(--header-height);
}
.site-nav-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* fill the nav list so vertical centering matches header */
  box-sizing: border-box;
  padding: 0 6px; /* horizontal spacing between items */
  font-family: var(--font-heading);
  font-weight: 400; /* Montserrat Regular */
  text-transform: uppercase;
  color: var(--brand-navy);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 12px; /* match .disclaim-banner font-size */
  /* downward nudge to position labels closer to the header bottom shadow */
  transform: translateY(12px);
}

/* Hide the full menu when the viewport narrows to prevent wrapping of items.
   Adjust the breakpoint (780px) if your nav starts wrapping at a different width. */
/* Hide navigation only at very small widths to avoid wrapping.
   Change the max-width value if you want the menu to disappear earlier/later. */
@media (max-width: 900px) {
  .site-nav-list {
    display: none !important;
  }
}
.site-nav-list li a:hover {
  text-decoration: none;
  color: var(--freedom-red);
}

.sectionbanner {
  background: var(--freedom-red);
  color: #ffffff;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  /* make banner text more prominent */
  font-size: 16px;
  /* match Boston headings: heading font, weight and uppercase spacing */
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* add vertical spacing between banners */
  margin-top: 24px;
  margin-bottom: 12px;
  padding: 10px 18px 10px 14px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 600;
}

.sectionbanner .banner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Mini inline badge for use in paragraph text */
.mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  vertical-align: middle;
  margin: 0 2px;
}

/* Badge list - remove bullet points and use badges as markers */
.badge-list {
  list-style: none;
  margin: 8px 0 16px 0;
  padding-left: 8px;
}

.badge-list li {
  margin: 0;
  padding: 4px 0;
  line-height: 1.5;
}

/* Small inline section note used near figures (not the global top banner) */
.section-note {
  background: transparent;
  color: var(--body-color);
  text-align: left;
  padding: 8px 0;
  width: 100%;
  box-sizing: border-box;
  font-weight: 600;
  font-family: var(--font-heading);
}

/* Banner link color */
.disclaim-banner a {
  color: #ffffff;
  text-decoration: underline;
}

.disclaim-banner a:hover,
.disclaim-banner a:focus {
  color: #fff9e6;
  text-decoration: none;
}
/* METHODOLOGY BANNER STYLES */
/* Collapsible thin methodology banner under cards */
.method-banner {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 12px;
  margin-top: calc(var(--section-gap) - 0.5rem);
  margin-bottom: 0;
  font-size: 15px;
}

/* If a method-banner sits inside a .stats-row, the row gap should control spacing instead */
.stats-row .method-banner {
  margin-top: 0;
}

.method-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 2px solid var(--support-gray-2);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.method-toggle:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.method-toggle[aria-expanded="true"] {
  background: var(--support-gray-4);
  border-color: var(--brand-blue);
}

.method-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: #ffffff;
  border-left: 2px solid var(--support-gray-2);
  border-right: 2px solid var(--support-gray-2);
  border-bottom: 2px solid var(--support-gray-2);
  border-radius: 0 0 4px 4px;
  padding: 0;
}

.method-content.open {
  padding: 24px;
  max-height: 1000px;
}

.chev {
  margin-left: 12px;
  transition: transform 0.3s ease;
  font-size: 18px;
}

.method-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* OUR TEAM PAGE STYLES */
/* center names (h2) */
.team-member h2 {
  display: block;
  text-align: center;
  width: 100%; /* full width so text is clearly centered */
  margin: 12px 0;
  font-size: 24px;
  margin-bottom: 24px;
  /* allow long names to wrap instead of overflowing */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Force first and last name onto separate lines and keep the underline */
.team-member h2 .first,
.team-member h2 .last {
  display: block;
  line-height: 1;
}

.team-member h2 { /* ensure underline appears directly under the name block */
  border-bottom: 3px solid var(--charles-blue);
  padding-bottom: 6px; /* small gap between text and underline to match Brandon */
}

/* allows image to be responsive to the "card" size when screen size changes! */
img {
  max-width: 100%;
  display: block;
  border-radius: 12px;
}

/* Layout of the cards */
.team-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px 8px; /* reduced bottom padding */
  box-sizing: border-box;
}

/* Each member is a vertical card (base rules) */
.team-member {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Ensure images fill card width and don't stretch height */
.team-member {
  /* Use explicit column math so each card keeps the same width when rows wrap */
  flex: 0 1 calc((100% - 40px) / 3); /* three-up layout accounting for 2 gaps of 20px */
  max-width: calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background: #1772be;
  /* prevent any child text from overflowing the card */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Paragraphs inside team cards */
.team-member p {
  line-height: var(--body-line-height);
  color: #F2F2F2;
  text-align: left;
  padding: 12px 20px;
  /* ensure paragraph text wraps inside the card */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Push email to bottom so cards align visually */
.team-member .email {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #F2F2F2;
  font-size: 0.68rem; /* slightly larger so email is more readable */
  /* allow wrapping so emails always stay inside the card */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  letter-spacing: 0.02em;
  max-width: 100%;
  box-sizing: border-box;
    /* allow email height to size naturally so other emails move up when
      one wraps to multiple lines (remove fixed min-height) */
    line-height: 1.1;
}

/* Make very small screens use a smaller email size to avoid overflow */
@media (max-width: 420px) {
  .team-member .email {
    font-size: 0.60rem;
    letter-spacing: 0.01em;
  }
}

/* Make all text inside team member boxes the same light color */
.team-member,
.team-member h2,
.team-member h2 .first,
.team-member h2 .last,
.team-member p,
.team-member .email,
.team-member a {
  color: #F2F2F2;
}

/* Small-screen adjustments */
@media (max-width: 900px) {
  .team-member {
    flex: 0 1 calc((100% - 20px) / 2); /* two-up layout accounting for 1 gap */
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 600px) {
  .team-row { padding: 0 12px; }
  .team-member {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

.photo {
  width: 60%;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin: 0 auto 12px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* center focal point by default */
  border-radius: 0; /* ensure photos inside .photo container are square */
}
.asteric {
    font-size: 0.85em; /* smaller than .label */
    line-height: 1.2;
    padding: 0 0 0;
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

/* Two-column layout with vertical divider separator */
.two-column-divider {
  display: flex;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 0;
  box-sizing: border-box;
  gap: 0;
  align-items: stretch; /* stretch so divider line goes full height */
}

.column-left,
.column-right {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.divider-line {
  width: 2px;
  background-color: #ddd;
  flex-shrink: 0;
  margin: 0;
}

.column-image {
  width: 80px;
  height: 80px;
  margin-top: 0;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

.large-text {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
  padding: 20px 0;
  text-align: center;
}

.footnote {
  font-size: 0.7rem;
  font-weight: normal;
  text-align: left;
  padding: 8px 20px 20px 20px;
  color: #666;
  margin-top: 12px;
  border-top: 1px solid #ddd;
  padding-top: 12px;
}

/* Graph / Chart container and image styles */
.graph-container {
  width: 100%;
  max-width: 1100px; /* matches stats content width */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
}
.graph-figure {
  margin: 0;
  width: 100%;
}
#d3-graph {
  width: 100%;
  display: flex;
  justify-content: center;
}
#d3-graph svg {
  max-width: 100%;
  height: auto;
}
.graph-figure figcaption {
  margin-top: 24px;
  text-align: center;
  font-size: 0.6rem;
  color: #333;
}

@media (max-width: 700px) {
  .graph-img {
    max-height: 320px;
  }
}

/* Top site navigation: simple, compact bar matching Boston style rhythm */
.site-nav {
  display: flex;
  justify-content: flex-end;
  background: #ffffff;
  border-bottom: none;
  padding: 12px 20px;
  margin-bottom: 26px;
  box-sizing: border-box;
}
.site-nav-list {
  list-style: none;
  display: flex;
  gap: 6px; /* tightened spacing */
  margin: 0;
  padding: 0 6px;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Montserrat Bold */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

/* Ensure links explicitly use the sans-serif Montserrat to override inheritance */
.site-nav-list a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px;
}

/* (removed vertical squash transform — nav uses natural font metrics) */
.site-nav-list li { margin: 0; }
.site-nav-list a {
  color: var(--optimistic-blue);
  text-decoration: none;
  padding: 0 6px;
}

/* Ensure nav labels are vertically centered across page layouts */
.site-nav-list a {
  /* use normal inline layout for nav links */
  display: inline-block;
  padding: 6px 8px;
}
.site-nav-list a:hover,
.site-nav-list a:focus {
  text-decoration: none;
  color: var(--freedom-red);
}

@media (max-width: 600px) {
  .site-nav { padding: 10px 0; }
  .site-nav-list { gap: 14px; font-size: 12px; }
}

/* Mobile: center nav on small screens */
@media (max-width: 700px) {
  .site-nav { justify-content: center; }
}

.impact-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: 10px 0 10px;
}

.impact-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.impact-compare .sectionbanner {
  margin-bottom: 0; /* keep banner and cards tightly stacked */
}

.impact-compare .stat-blocks {
  margin: 10px 0 10px; /* cap space under banner at ~10px */
  padding: 0; /* remove padding so cards extend to match banner width */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.impact-compare .stat-blocks.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.impact-compare .stat-blocks.stack .stat-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 144px;
  padding: 16px 16px 16px 16px;
}

.impact-compare .stat-blocks.stack .stat-block > *:last-child {
  margin-bottom: 0;
}

/* Stat Blocks - Boston.gov style card layout */
.stat-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.stat-blocks.stack {
  grid-template-columns: 1fr;
}

.stat-block {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 24px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-block:nth-child(5) {
  grid-column: 1 / -1;
  width: 50%;
  margin: 0 auto;
}

.stat-block:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-blue);
}

.block-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-navy);
  margin: 0 0 6px 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}

.block-reduction {
  font-size: 18px;
  color: var(--optimistic-blue);
  margin: 6px 0;
  font-weight: 500;
  line-height: 1.3;
}

.reduction-percent {
  font-weight: 700;
  font-size: 20px;
}

.block-description {
  font-size: 14px;
  color: #666;
  margin: 6px 0 0 0;
  line-height: 1.3;
}

/* Ensure nav is hidden on small screens even if earlier rules re-enable it */
@media (max-width: 480px) {
  .site-nav-list {
    display: none !important;
  }
}