:root {
  --jf-shadow: 0 2px 10px rgb(0 65 91 / 9%);
  --jf-radius: 6px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #333;
  font-family: "Poppins", system-ui, sans-serif;
}

::selection {
  background: #ead788;
  color: #00415b;
}

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

a {
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration: underline;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  border-radius: 3px;
  outline: 3px solid #109be0;
  outline-offset: 3px;
}

.jf-container {
  margin-inline: auto;
  max-width: 1440px;
  padding-inline: 32px;
}

.jf-skip-link {
  background: #ead788;
  color: #00415b;
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -8rem;
  z-index: 100000;
}

.jf-skip-link:focus {
  top: 1rem;
}

.jf-state-banner {
  background: #00415b;
  color: #fff;
  font-size: 0.75rem;
}

.jf-state-banner__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  justify-content: space-between;
}

.jf-state-banner__brand {
  display: block;
  flex: 0 0 auto;
}

.jf-state-banner__brand img {
  display: block;
  height: auto;
  max-width: 117px;
  width: 117px;
}

.jf-state-banner__controls {
  align-items: center;
  display: flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.jf-state-banner__tagline {
  color: #fff;
  flex: 0 1 auto;
  font-size: inherit;
  margin: 0;
}

.jf-state-banner__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 700;
  gap: 0.25rem;
  padding: 0;
  text-align: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4375rem;
  white-space: nowrap;
}

.jf-state-banner__toggle:hover {
  text-decoration-thickness: 4px;
}

.jf-state-banner__toggle:focus-visible {
  border-radius: 2px;
  outline: 3px solid #109be0;
  outline-offset: 2px;
}

.jf-state-banner__chevron {
  fill: currentcolor;
  flex-shrink: 0;
  height: 1.5rem;
  transition: transform 180ms ease;
  width: 1.5rem;
}

.jf-state-banner__toggle.is-open .jf-state-banner__chevron {
  margin-bottom: 0.3125rem;
  transform: rotate(180deg);
}

#state-header {
  padding-block: 1rem;
}

.jf-state-banner__details {
  background: #202020;
  color: #fff;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* Padding lives on the inner wrapper, not the element being height-
   animated - otherwise border-box padding fights the shrinking box
   as height nears 0, showing up as a stall partway through. */
.jf-state-banner__details .jf-container {
  padding-block: 1.5rem;
}

.jf-state-banner__detail + .jf-state-banner__detail {
  margin-top: 1.5rem;
}

.jf-state-banner__detail h2 {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 1.125rem;
  font-weight: 700;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
}

.jf-state-banner__icon {
  fill: currentcolor;
  flex-shrink: 0;
  height: 1.5rem;
  margin-inline: -0.25rem 0.15rem;
  width: 1.5rem;
}

.jf-state-banner__detail p {
  color: rgb(255 255 255 / 70%);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  max-width: 42rem;
}

@media (min-width: 768px) {
  .jf-state-banner {
    font-size: 1rem;
  }

  .jf-state-banner__tagline {
    font-size: 1rem;
  }

  #state-header {
    padding-block: 1.125rem;
  }

  .jf-state-banner__controls {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .jf-state-banner__toggle:focus-visible {
    outline-offset: -3px;
  }
}

.jf-site-header {
  background: #fff;
  border-bottom: 1px solid #afd9ed;
  position: relative;
  z-index: 1000;
}

.jf-site-header.has-global-padding {
  padding-inline: 0;
}

.jf-header-inner {
  gap: 1.5rem;
  min-height: 74px;
  padding-inline: 32px;
}

.jf-primary-navigation {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-left: 6px;
}

.jf-primary-navigation .wp-block-navigation__container {
  gap: 26px;
}

.jf-primary-navigation .wp-block-navigation-item__content {
  border-bottom: 2px solid transparent;
  color: #595959;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.4rem;
  text-decoration: none;
}

.jf-primary-navigation .wp-block-navigation-item__content:hover {
  color: #00415b;
}

.jf-primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.jf-primary-navigation
  .current-menu-ancestor
  > .wp-block-navigation-item__content {
  border-bottom-color: #00415b;
  color: #00415b;
  font-weight: 600;
}

.jf-primary-navigation .jf-nav-drawer-cta {
  display: none !important;
}

.jf-header-cta {
  flex: 0 0 auto;
  margin-left: auto;
}

.wp-element-button,
.wp-block-button__link {
  min-height: 44px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  background: #00668f;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Shared visual style for the site's primary CTA buttons (header,
   mobile nav drawer, hero/footer apply buttons) - one place to
   restyle them all. The pale-blue background is close enough in
   luminance to navy text that the generic hover darken above would
   fail contrast, so hover keeps the same fill and lifts with a
   shadow instead. */
.jf-btn-primary .wp-block-button__link,
.jf-nav-drawer-cta .wp-block-navigation-item__content {
  background: #bdeaf2;
  border-radius: 6px;
  color: #00415b;
  font-weight: 600;
}

.jf-btn-primary .wp-block-button__link:hover,
.jf-nav-drawer-cta .wp-block-navigation-item__content:hover {
  background: #bdeaf2;
  box-shadow: 0 4px 10px rgb(0 65 91 / 25%);
}

.jf-main {
  margin-block-start: 0;
  min-height: 45vh;
}

/* Full-width guarded pages break out of theme root padding */
.jf-guarded-page {
  --jf-site-gutter: max(32px, calc((100vw - 1440px) / 2 + 32px));
  --wp--style--block-gap: 0;
  max-width: none !important;
  width: auto !important;
}

.jf-guarded-page > .wp-block-group {
  margin-block: 0 !important;
}

/* Shared 1440px content gutter — matches legacy .jf-container padding */
.jf-guarded-page .jf-section,
.jf-guarded-page .jf-page-hero,
.jf-guarded-page .jf-home-hero {
  box-sizing: border-box;
  padding-inline: var(--jf-site-gutter) !important;
}

.jf-guarded-page .jf-section {
  --wp--style--block-gap: 1rem;
  padding-block: clamp(3.5rem, 6vw, 5rem) !important;
}

/* Heroes: cancel alignwide inset inside constrained layout */
.jf-page-hero.is-layout-constrained,
.jf-home-hero.is-layout-constrained {
  --wp--style--global--content-size: 1440px;
  --wp--style--global--wide-size: 1440px;
}

.jf-home-hero .alignwide {
  margin-inline: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.jf-page-hero .alignwide {
  margin-inline: 0 !important;
}

.jf-page-hero {
  padding-block: 60px !important;
}

.jf-page-hero h1 {
  color: #fff;
  line-height: 1.1;
  margin-block: 0;
  max-width: 22ch !important;
}

.jf-page-hero p:not(.jf-eyebrow) {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  margin-block: 1.5rem 0;
  max-width: 820px;
  opacity: 0.84;
}

.jf-section {
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.jf-page-content,
.jf-index,
.jf-article-layout,
.jf-not-found {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.jf-eyebrow {
  color: #00668f;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-block: 0;
  text-transform: uppercase;
}

.jf-page-hero .jf-eyebrow {
  /* !important: overrides whatever has-*-color class ends up baked
     into each page's saved content in the database, so this color
     stays controlled from here regardless of what's stored. */
  color: #addc80 !important;
  margin-bottom: 0;
  opacity: 1;
}

.jf-guarded-page .jf-section > .jf-eyebrow + :is(h2, .wp-block-heading),
.jf-guarded-page .jf-page-hero .jf-eyebrow + :is(h1, .wp-block-heading) {
  margin-top: 0.5rem;
}

.jf-guarded-page .jf-section > :is(h2, .wp-block-heading) {
  margin-block: 0.5rem 0;
}

.jf-guarded-page .jf-section > :is(h2, .wp-block-heading) + p {
  margin-top: 1rem;
}

.jf-guarded-page .jf-page-hero + .jf-section {
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
}

.jf-news-section {
  padding-bottom: 4rem !important;
}

.jf-guarded-page .jf-home-news.jf-section,
.jf-guarded-page
  .jf-section.has-pale-blue-background-color:has(.jf-news-query):not(
    :has(.jf-news-archive)
  ) {
  padding-block: 56px !important;
}

.jf-home-news-head {
  align-items: flex-end !important;
}

.jf-home-news .jf-news-query,
.jf-guarded-page
  .jf-section.has-pale-blue-background-color:has(.jf-news-query):not(
    :has(.jf-news-archive)
  )
  .jf-news-query {
  padding-block: 0;
}

.jf-home-hero {
  padding-block: 72px 64px !important;
}

.jf-home-hero h1 {
  color: #fff;
}

.jf-hero-break {
  display: none;
}

@media (min-width: 768px) {
  .jf-hero-break {
    display: inline;
  }
}

/* WP outputs the accent word in a <mark>; reset browser highlight
   styling. Target the generic .has-inline-color wrapper (not a
   specific has-X-color class) with !important, so this wins
   regardless of whichever color class is baked into the page's
   saved content in the database. */
.jf-home-hero h1 mark,
.jf-home-hero h1 .has-inline-color {
  background: none;
  background-color: transparent;
  color: #addc80 !important;
}

.jf-hero-logo {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 18%);
  display: inline-block;
  margin: 0;
  padding: 14px 18px;
  width: fit-content;
}

.jf-hero-logo img {
  display: block;
  height: 96px;
  max-width: none;
  width: auto;
}

.jf-video-card {
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
  overflow: hidden;
}

.jf-video-card img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.jf-stat-grid {
  gap: 0.875rem;
}

.jf-g2s,
.jf-stat-grid.jf-g2s {
  display: grid !important;
  gap: 0.875rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jf-g2s > .wp-block-column,
.jf-stat-grid.jf-g2s > .wp-block-column {
  width: 100% !important;
}

.jf-stat-card,
.jf-process-card,
.jf-category-card,
.jf-card,
.jf-contact-card,
.jf-faq-card {
  background: #fff;
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
  padding: 1.375rem;
}

.jf-stat-grid .jf-stat-card {
  background: #e9f8fe;
  box-shadow: none;
  padding: 1.375rem;
}

.jf-stat-card h3 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.jf-stat-card p {
  color: #595959;
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-block: 0.25rem 0;
}

.jf-quote {
  background: #e9f8fe;
  border-left: 4px solid #00668f;
  border-radius: 0 var(--jf-radius) var(--jf-radius) 0;
  color: #00415b;
  font-family: var(--wp--preset--font-family--arvo);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
}

.jf-quote cite {
  color: #595959;
  display: block;
  font-family: var(--wp--preset--font-family--poppins);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 0.75rem;
  text-transform: uppercase;
}

.jf-card-grid {
  gap: 1.25rem;
}

.jf-card {
  overflow: hidden;
  padding: 1.375rem 1.375rem 1.375rem;
}

.jf-card .wp-block-post-featured-image {
  margin-inline: -1.375rem;
}

.jf-card .wp-block-post-featured-image img {
  width: 100%;
}

.jf-card .wp-block-post-date {
  color: #595959;
  margin: 0;
}

.jf-card__label .wp-block-post-terms__separator,
.jf-card__label a:not(:first-of-type) {
  display: none;
}

.jf-card__label a {
  background: #00668f;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.1875rem 0.5rem;
  text-decoration: none;
  text-transform: uppercase;
}

.jf-card__label a[href*="launch"] {
  background: #ead788;
  color: #00415b;
}

.jf-card__label a[href*="designation"],
.jf-card__label a[href*="milestone"] {
  background: #00668f;
  color: #fff;
}

.jf-card__label a[href*="resource"],
.jf-card__label a[href*="announcement"] {
  background: #e9f8fe;
  border-color: #afd9ed;
  color: #00415b;
}

.jf-news-query .jf-card__media {
  margin-inline: -1.375rem;
  margin-top: -1.375rem;
  overflow: hidden;
}

.jf-news-query .jf-card__media:not(:has(img)):not(:has(.jf-card__label)) {
  display: none;
}

.jf-news-query .jf-card__media .wp-block-post-featured-image {
  margin: 0;
}

.jf-news-query .jf-card__media .wp-block-post-featured-image img {
  display: block;
  height: 150px;
  object-fit: cover;
  width: 100%;
}

.jf-news-query .jf-card__meta {
  align-items: center;
  color: #595959;
  font-size: 0.8125rem;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
}

.jf-news-query .jf-card__media:has(img) + .jf-card__meta {
  margin-top: 0.875rem;
}

.jf-news-query .jf-card__meta + .wp-block-post-title {
  margin-top: 0;
}

.jf-news-query .wp-block-post-title,
.jf-news-query .wp-block-post-title a {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 0.75rem 0;
}

.jf-news-query .wp-block-post-title a {
  color: #00415b;
  text-decoration: none;
}

.jf-news-query .wp-block-post-excerpt {
  color: #595959;
  font-size: 0.875rem;
  line-height: 1.55;
}

.jf-news-query .wp-block-post-excerpt__more-link {
  color: #00668f;
  display: inline-block;
  font-weight: 600;
  margin-top: 0.875rem;
  text-decoration: none;
}

.jf-category-card__icon {
  align-items: center;
  background: var(--cat-bg, #91dce5);
  border-radius: 4px;
  color: #00415b;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.jf-category-card__icon svg {
  height: 24px;
  width: 24px;
}

/* Category icons are drawn from CSS rather than inline <svg> in post_content:
   wp-admin runs KSES on save for users without `unfiltered_html`, which strips
   raw SVG out of core/html blocks and silently empties these badges. */
:root {
  --jf-cat-icon-housing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
  --jf-cat-icon-broadband: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3Cpath d='M16.616 13.924a5 5 0 1 0 -9.23 0'/%3E%3Cpath d='M20.307 15.469a9 9 0 1 0 -16.615 0'/%3E%3Cpath d='M9 21l3 -9l3 9'/%3E%3Cpath d='M10 19h4'/%3E%3C/svg%3E");
  --jf-cat-icon-energy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11'/%3E%3C/svg%3E");
  --jf-cat-icon-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.502 19.423c2.602 2.105 6.395 2.105 8.996 0c2.602 -2.105 3.262 -5.708 1.566 -8.546l-4.89 -7.26c-.42 -.625 -1.287 -.803 -1.936 -.397a1.376 1.376 0 0 0 -.41 .397l-4.893 7.26c-1.695 2.838 -1.035 6.441 1.567 8.546'/%3E%3C/svg%3E");
  --jf-cat-icon-mixed-use: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l5 5v7h-5v-4m0 4h-5v-7l5 -5m1 1v-6a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v17h-8'/%3E%3Cpath d='M13 7l0 .01'/%3E%3Cpath d='M17 7l0 .01'/%3E%3Cpath d='M17 11l0 .01'/%3E%3Cpath d='M17 15l0 .01'/%3E%3C/svg%3E");
}

.jf-category-card__icon--housing { --jf-cat-icon: var(--jf-cat-icon-housing); }
.jf-category-card__icon--broadband { --jf-cat-icon: var(--jf-cat-icon-broadband); }
.jf-category-card__icon--energy { --jf-cat-icon: var(--jf-cat-icon-energy); }
.jf-category-card__icon--water { --jf-cat-icon: var(--jf-cat-icon-water); }
.jf-category-card__icon--mixed-use { --jf-cat-icon: var(--jf-cat-icon-mixed-use); }

/* Positional fallback for pages saved before the modifier classes existed.
   The section is templateLock: contentOnly, so card order is fixed. */
.jf-about-categories .jf-category-grid > .wp-block-column:nth-child(1) .jf-category-card__icon { --jf-cat-icon: var(--jf-cat-icon-housing); }
.jf-about-categories .jf-category-grid > .wp-block-column:nth-child(2) .jf-category-card__icon { --jf-cat-icon: var(--jf-cat-icon-broadband); }
.jf-about-categories .jf-category-grid > .wp-block-column:nth-child(3) .jf-category-card__icon { --jf-cat-icon: var(--jf-cat-icon-energy); }
.jf-about-categories .jf-category-grid > .wp-block-column:nth-child(4) .jf-category-card__icon { --jf-cat-icon: var(--jf-cat-icon-water); }
.jf-about-categories .jf-category-grid > .wp-block-column:nth-child(5) .jf-category-card__icon { --jf-cat-icon: var(--jf-cat-icon-mixed-use); }

.jf-category-card__icon::before {
  -webkit-mask: var(--jf-cat-icon) center / 24px 24px no-repeat;
  background: currentColor;
  content: "";
  display: none;
  height: 24px;
  mask: var(--jf-cat-icon) center / 24px 24px no-repeat;
  width: 24px;
}

/* Only draw the badge where an icon is actually defined, so a card without one
   renders empty rather than as a solid square. */
.jf-category-card__icon[class*="__icon--"]::before,
.jf-about-categories .jf-category-grid > .wp-block-column .jf-category-card__icon::before {
  display: block;
}

/* An icon that survived in post_content wins over the CSS-drawn one. */
.jf-category-card__icon:has(svg)::before {
  display: none;
}

.jf-category-card {
  display: flex;
  flex-direction: column;
}

.jf-category-card h3 {
  margin-block: 0.875rem 0;
}

.jf-category-card p {
  color: #595959;
  font-size: 0.8125rem;
  margin-block: 0.75rem;
}

.jf-category-card__examples {
  border-top: 1px solid #afd9ed;
  color: #595959;
  font-size: 0.75rem !important;
  margin-top: auto !important;
  padding-top: 0.625rem;
}

.jf-category-card__examples strong {
  color: #00668f;
  font-weight: 600;
}

.jf-process-card h3 {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.jf-process-card h3 span {
  align-items: center;
  background: #addc80;
  border-radius: 50%;
  color: #00415b;
  display: inline-flex;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  justify-content: center;
}

.jf-category-grid {
  gap: 1rem;
}

.jf-category-card {
  min-height: 8rem;
}

.jf-cta-band {
  border-radius: var(--jf-radius);
  gap: 1.5rem;
  padding: clamp(1.75rem, 5vw, 2.5rem);
}

.jf-cta-band h2,
.jf-cta-band p {
  margin-block: 0;
}

.jf-resource-query,
.jf-news-query {
  padding-block: 2rem 4rem;
}

.jf-news-section .jf-news-query {
  padding-block: 0;
}

.jf-empty-state,
.jf-contact-prompt,
.jf-side-card {
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  padding: 1.5rem;
}

/* White cards floating on the aside's own pale-blue panel (see
   .jf-article-aside), matching the production sidebar treatment. */
.jf-quick-facts,
.jf-related {
  background: #fff;
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: 0 2px 8px rgb(0 65 91 / 7%);
  padding: 1.375rem;
}

.jf-quick-facts + .jf-related {
  margin-top: 1.25rem;
}

.jf-quick-facts .jf-eyebrow,
.jf-related .jf-eyebrow {
  margin-bottom: 0.875rem;
}

.jf-quick-facts__row {
  align-items: center;
  border-bottom: 1px solid #afd9ed;
  margin-block: 0 0.625rem;
  padding-bottom: 0.625rem;
}

.jf-quick-facts__row:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.jf-quick-facts__row p {
  margin-block: 0;
}

.jf-quick-facts__row > :first-child {
  color: #595959;
}

.jf-quick-facts__row > :last-child {
  color: #00415b;
  font-weight: 600;
}

.jf-quick-facts .wp-block-buttons {
  margin-top: 0.75rem;
}

.jf-faq-query .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.jf-faq-card h2 {
  margin-top: 0;
}

.jf-contact-grid {
  gap: 0.875rem;
}

.jf-contact-card a {
  overflow-wrap: anywhere;
}

.jf-check-list {
  list-style: none;
  padding-left: 0;
}

.jf-check-list li {
  margin-block: 0.75rem;
  padding-left: 2rem;
  position: relative;
}

.jf-check-list li::before {
  align-items: center;
  background: #00668f;
  border-radius: 4px;
  color: #fff;
  content: "✓";
  display: flex;
  height: 1.25rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0.15rem;
  width: 1.25rem;
}

.jf-post-meta {
  color: #595959;
}

.jf-article .wp-block-post-title {
  font-size: 28px;
}

@media (min-width: 768px) {
  .jf-article .wp-block-post-title {
    font-size: 36px;
  }
}

.jf-list-card {
  border-bottom: 1px solid #afd9ed;
  padding-block: 1.5rem;
}

.jf-not-found {
  text-align: center;
}

.jf-not-found .wp-block-search {
  margin-inline: auto;
  max-width: 36rem;
}

.jf-site-footer {
  font-size: 1rem;
  padding-block: 3rem 1.5rem;
}

.jf-site-footer.has-global-padding {
  padding-inline: 0;
}

.jf-site-footer > .alignwide {
  box-sizing: border-box;
  padding-inline: 32px;
}

.jf-site-footer a {
  color: rgb(255 255 255 / 72%);
  text-decoration: none;
}

.jf-site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.jf-site-footer h2 {
  color: #afd9ed;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-block: 0 0.75rem;
  text-transform: uppercase;
}

.jf-footer-logo {
  background: #fff;
  border-radius: var(--jf-radius);
  display: inline-block;
  padding: 0.65rem;
}

.jf-footer-grid {
  gap: 2.25rem;
}

.jf-footer-navigation {
  align-items: flex-start;
}

.jf-footer-legal {
  border-top: 1px solid rgb(255 255 255 / 12%);
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.jf-footer-legal p {
  margin: 0;
}

.jf-footer-legal a {
  color: rgb(255 255 255 / 58%);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jf-footer-credit {
  color: rgb(255 255 255 / 65%);
  font-size: 0.75rem;
}

/* Production-parity layout */
.jf-static-logo {
  display: inline-flex;
  flex: 0 0 auto;
}

.jf-static-logo img {
  display: block;
  height: 42px;
  width: auto;
}

.jf-header-inner {
  align-items: center;
  padding-block: 0;
}

.jf-home-hero {
  padding-block: 72px 64px !important;
}

.jf-home-hero h1 {
  font-size: clamp(1.75rem, 4vw, 3.125rem);
  font-weight: 700;
  line-height: 1.12;
  margin-top: 0;
  max-width: 22ch;
}

.jf-home-hero .has-large-font-size {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 820px;
  opacity: 0.84;
}

.jf-home-hero .wp-block-columns {
  align-items: flex-start;
  gap: 48px;
}

.jf-home-hero .wp-block-columns > .wp-block-column:first-child {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.jf-home-hero .wp-block-columns > .wp-block-column:last-child {
  flex-basis: auto !important;
  flex-grow: 1 !important;
  min-width: min(100%, 380px);
}

.jf-home-hero .jf-hero-logo {
  margin: 10px 0 0;
  max-width: none;
  width: fit-content;
}

.jf-home-hero .jf-hero-logo img {
  height: 124px;
  max-width: none;
  width: auto;
}

.jf-two-thirds {
  gap: 3rem;
}

.jf-two-thirds > .wp-block-column:first-child {
  flex-basis: 56.5% !important;
}

.jf-two-thirds > .wp-block-column:last-child {
  flex-basis: 43.5% !important;
}

/* .jf-main itself renders edge-to-edge (see .jf-main below); on the single-post
   layout the two-column split is the only direct child, so it needs its own
   explicit cap instead of relying on the block editor's alignwide sizing.
   1440px minus 64px (32px each side) so the column edges line up with the
   header/footer content, which sit inside that same padding via .jf-container. */
.jf-article-layout > .jf-two-thirds,
.jf-article-layout > .jf-breadcrumb {
  margin-inline: auto !important;
  max-width: calc(1440px - 64px) !important;
}

.jf-breadcrumb {
  align-items: center;
  border-bottom: 1px solid #afd9ed;
  color: #595959;
  font-size: 0.875rem;
  padding-block: 0.875rem;
}

.jf-breadcrumb p {
  margin: 0;
}

.jf-breadcrumb a {
  color: #00668f;
}

.jf-breadcrumb > * + *::before {
  color: #afd9ed;
  content: "/";
  margin-right: 0.5rem;
}

/* The pale-blue panel the two sidebar cards sit on; matches production's
   <aside style="background:#E9F8FE"> wrapper. */
.jf-article-aside {
  background: #e9f8fe;
  border-radius: var(--jf-radius);
  padding: 2.5rem 1.75rem;
}

/* Category badge, scoped to the article's own byline row — the same term
   shown plainly in Quick Facts/Related updates should stay plain text,
   matching production (badge only appears next to the date under the H1). */
.jf-post-meta .taxonomy-category a {
  background: #00668f;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  text-decoration: none;
  text-transform: uppercase;
}

.jf-related .wp-block-post-title {
  margin-bottom: 0.25rem;
}

.jf-related__meta {
  color: #595959;
  font-size: 0.8125rem;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.jf-related__meta .wp-block-post-terms::before {
  content: "· ";
}

.jf-guarded-page .jf-text-link a,
.jf-contact-directory__general-email,
.jf-contact-directory__card a,
.jf-resource-card__link,
.jf-faq-item__answer a {
  color: #00668f;
  font-weight: 600;
}

.jf-guarded-page .jf-text-link a:hover,
.jf-contact-directory__general-email:hover,
.jf-contact-directory__card a:hover {
  text-decoration: underline;
}

.jf-guarded-page .jf-section > .wp-block-heading,
.jf-guarded-page .jf-section h2.wp-block-heading {
  font-size: 2rem;
  line-height: 1.2;
  margin-block: 0.5rem 0;
}

.jf-header-cta .wp-block-button__link {
  font-size: 0.9375rem;
  padding: 0.8125rem 1.375rem;
  white-space: nowrap;
}

.jf-card-grid {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jf-contact-prompt {
  background: #fff;
  box-shadow: var(--jf-shadow);
  margin-top: 2.5rem;
}

@media (min-width: 901px) {
  .jf-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jf-category-grid {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .jf-category-grid > .wp-block-column {
    width: 100% !important;
  }
}

.jf-process-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 2rem 0;
}

.jf-process-stack > .jf-process-card {
  margin-block-start: 0;
}

.jf-about-process > .alignwide.wp-block-heading + .alignwide {
  margin-bottom: 2rem;
  margin-inline: 0 !important;
  max-width: 820px;
}

.jf-about-apply {
  margin-top: 2rem;
}

/* Consecutive white sections on About — prod uses 0 top so the
   previous section's bottom padding is the only gap. Sibling
   selectors cover already-migrated post_content. */
.jf-guarded-page .jf-agencies-section.jf-section {
  padding-block: 0 clamp(3.5rem, 6vw, 5rem) !important;
}

.jf-guarded-page .jf-application-cta.jf-section,
.jf-guarded-page .jf-agencies-section + .jf-section {
  padding-block: 0 clamp(3.5rem, 6vw, 5rem) !important;
}

.jf-category-grid--compact .jf-category-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-block: 0.875rem 0;
}

.jf-building-stages {
  gap: 3rem;
}

.jf-building-stages .wp-block-image img {
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
}

.jf-cta-band p {
  color: rgb(255 255 255 / 72%);
  margin: 0.375rem 0 0;
}

/* Forces the pale-blue/navy button scheme regardless of whichever
   has-*-color/has-*-background-color classes are already baked into
   an already-migrated page's saved content (e.g. the About page's
   old gold/navy Apply now button). */
.jf-cta-band .wp-block-button__link {
  background: #bdeaf2 !important;
  color: #00415b !important;
}

.jf-cta-band .wp-block-button__link:hover {
  background: #bdeaf2 !important;
  box-shadow: 0 4px 10px rgb(0 65 91 / 25%);
}

.jf-news-query .jf-card {
  position: relative;
}

.jf-news-query .jf-card .wp-block-post-title a::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.jf-news-query .jf-card .wp-block-post-excerpt__more-link {
  position: relative;
  z-index: 2;
}

.jf-page-hero .has-large-font-size {
  opacity: 0.84;
}

.jf-process-card ul {
  color: #595959;
  font-size: 0.875rem;
  line-height: 1.55;
  margin-block: 0.875rem 0;
  padding-left: 1.125rem;
}

.jf-process-card li + li {
  margin-top: 0.5rem;
}

.jf-news-grid .jf-card,
.jf-news-query .jf-card {
  min-height: 100%;
}

.jf-process-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block: 1rem 0;
}

.jf-process-grid > .wp-block-column {
  width: 100%;
}

.jf-process-card {
  padding: 1.5rem;
}

.jf-process-card h3 {
  margin-block: 0;
}

.jf-process-card h3 small {
  color: #595959;
  font-size: 0.85rem;
  font-weight: 400;
}

.jf-category-card {
  min-height: 7.25rem;
}

.jf-agency-table {
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  overflow: hidden;
}

.jf-agency-table table {
  border: 0;
}

.jf-agency-table th {
  text-align: left;
}

.jf-agency-table thead th {
  background: #00415b;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jf-agency-table tbody th {
  color: #00415b;
  font-weight: 600;
}

.jf-agency-table td,
.jf-agency-table th {
  border: 0;
  border-bottom: 1px solid #afd9ed;
  padding: 0.85rem 1rem;
}

.jf-agency-table tbody tr:nth-child(even) {
  background: #e9f8fe;
}

.jf-resource-directory {
  padding-block: 0 1rem;
}

.jf-resource-section + .jf-resource-section {
  margin-top: 2.5rem;
}

.jf-resource-section > h2 {
  color: #00668f;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.jf-resource-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jf-resource-card {
  background: #fff;
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
  padding: 1.5rem;
}

.jf-resource-card__icon {
  align-items: center;
  background: #e9f8fe;
  border-radius: 4px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.jf-resource-card__icon svg {
  color: #00668f;
  height: 24px;
  width: 24px;
}

.jf-resource-card h3 {
  font-size: 1.125rem;
  margin-block: 0.875rem 0.35rem;
}

.jf-resource-card__description p {
  color: #595959;
  font-size: 0.875rem;
  margin-block: 0;
}

.jf-resource-card__links {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.jf-resource-card__link {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.375rem;
  text-decoration: none;
}

.jf-resource-card__link:hover,
.jf-resource-action a:hover {
  text-decoration: none;
}

.jf-resource-card__link:hover .jf-resource-card__link-label,
.jf-resource-action a:hover .jf-resource-action__label {
  text-decoration: underline;
}

.jf-resource-card__link-icon,
.jf-resource-action__icon {
  flex-shrink: 0;
  font-size: 0.8125rem;
  text-decoration: none;
}

.jf-resource-action {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.jf-resource-action a {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.375rem;
  text-decoration: none;
}

.jf-resource-card__status {
  background: #e9f8fe;
  border: 1px solid #afd9ed;
  border-radius: 4px;
  color: #00415b;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.875rem;
  padding: 0.3rem 0.6rem;
}

.jf-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.jf-faq-item {
  background: #fff;
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
}

.jf-faq-item summary {
  align-items: center;
  color: #00415b;
  cursor: pointer;
  display: flex;
  font-size: 1.0625rem;
  font-weight: 600;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  padding: 1.25rem 1.5rem;
}

.jf-faq-item summary::-webkit-details-marker {
  display: none;
}

.jf-faq-item summary svg {
  color: #00668f;
  flex: 0 0 1.25rem;
  height: 1.25rem;
  transition: transform 160ms ease;
  width: 1.25rem;
}

.jf-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.jf-faq-item__answer {
  border-top: 1px solid #e9f8fe;
  color: #595959;
  font-size: 0.9375rem;
  line-height: 1.65;
  padding: 0 1.5rem 1.25rem;
}

.jf-faq-item__answer p {
  margin-block: 0 0.75rem;
}

.jf-faq-item__answer p:last-child {
  margin-bottom: 0;
}

.jf-contact-directory {
  display: grid !important;
  gap: 2.75rem;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.8fr);
}

.jf-contact-section {
  padding-block: 3.75rem !important;
}

.jf-contact-directory__general h2 {
  font-size: 1.625rem;
  font-weight: 600;
  margin-block: 0.5rem 0;
}

.jf-contact-directory__general-email {
  color: #00668f;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.625rem;
  text-decoration: none;
}

.jf-contact-directory__card--featured h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

.jf-contact-directory__general > .wp-block-group {
  color: #595959;
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 0.625rem;
}

.jf-contact-directory__general > .wp-block-group p {
  margin-block: 0;
}

.jf-contact-directory__general > .wp-block-group p + p {
  margin-top: 0.875rem;
}

.jf-contact-directory__people
  > .jf-eyebrow
  + .jf-contact-directory__leadership {
  margin-top: 0.875rem;
}

.jf-contact-directory__leadership,
.jf-contact-directory__ombudsmen {
  display: grid !important;
  gap: 0.875rem;
}

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

.jf-contact-directory__ombudsmen {
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jf-contact-directory__card {
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  padding: 0.875rem;
}

.jf-contact-directory__card--featured {
  background: #e9f8fe;
  padding: 1.125rem;
}

.jf-contact-directory__card h3 {
  color: var(--wp--preset--color--navy, #00415b);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.jf-contact-directory__card--featured h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

.jf-contact-directory__card p {
  color: #595959;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-block: 0.125rem 0;
}

.jf-contact-directory__card--featured p {
  font-size: 0.8125rem;
}

.jf-contact-directory__card a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.375rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.jf-contact-directory__card--featured a {
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.jf-contact-directory__subheading {
  color: #595959;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-block: 1.25rem 0.625rem;
  text-transform: uppercase;
}

.jf-guarded-page .jf-page-hero {
  padding-block: 3.25rem !important;
}

.jf-guarded-page .jf-page-hero p:not(.jf-eyebrow) {
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.6;
  margin-block: 1.375rem 0;
  max-width: 70ch;
  opacity: 0.8;
}

.jf-guarded-page .jf-dashboard-acceleration.jf-section,
.jf-guarded-page .jf-dashboard-shell.jf-section {
  padding-block: 0 !important;
}

.jf-guarded-page .jf-page-hero + .jf-dashboard-acceleration {
  padding-bottom: 0 !important;
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
}

.jf-dashboard-acceleration > .alignwide:first-child {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.jf-dashboard-acceleration > .alignwide:first-child .wp-block-heading {
  color: #00415b;
  flex: 1 1 auto;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.jf-dashboard-baseline-label {
  color: #595959;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-block: 0;
  margin-left: auto;
  text-transform: uppercase;
}

.jf-dashboard-acceleration-card {
  align-items: flex-start !important;
  border: 1px solid #afd9ed;
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
  gap: 1.75rem;
  padding: 1.75rem;
}

.jf-dashboard-acceleration-card > .wp-block-column {
  align-self: flex-start !important;
}

.jf-dashboard-acceleration-card > .wp-block-column > * {
  margin-block-start: 0 !important;
}

.jf-dashboard-acceleration-card > .wp-block-column:first-child h3 {
  color: #00415b;
  font-size: 1.25rem;
  font-weight: 600;
  margin-block: 0 0.5rem !important;
}

.jf-dashboard-acceleration-card > .wp-block-column:first-child p {
  color: #595959;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-block: 0 !important;
  max-width: 42ch;
}

.jf-dashboard-acceleration-card
  > .wp-block-column
  > .jf-dashboard-target-stats {
  gap: 0.75rem;
  margin-block: 1.5rem 0 !important;
}

.jf-dashboard-target-stats .wp-block-column {
  --wp--style--block-gap: 0.5rem;
  align-self: flex-start !important;
  border-left: 2px solid #afd9ed;
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-start;
  padding-left: 0.5rem;
}

.jf-dashboard-target-stats .wp-block-column > * {
  margin-block: 0 !important;
}

.jf-dashboard-target-stats strong,
.jf-dashboard-target-stats span {
  display: block;
}

.jf-dashboard-target-stats strong {
  color: #00415b;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.jf-dashboard-target-stats span {
  color: #595959;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.jf-dashboard-comparison {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  justify-content: flex-start;
}

.jf-dashboard-comparison label {
  color: #595959;
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.jf-dashboard-comparison__baseline,
.jf-dashboard-comparison__target {
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  min-height: 48px;
  padding: 0.8125rem 0.875rem;
}

.jf-dashboard-comparison__baseline {
  background: linear-gradient(90deg, #767676, #595959);
  color: #fff;
  margin-bottom: 1.125rem;
}

.jf-dashboard-comparison__target {
  background: #e9f8fe;
  color: #00415b;
  overflow: hidden;
  position: relative;
}

.jf-dashboard-comparison__target span {
  background: linear-gradient(90deg, #109be0, #00668f);
  inset: 0 auto 0 0;
  position: absolute;
  width: 22.2%;
}

.jf-dashboard-comparison__target strong {
  display: block;
  margin-left: calc(22.2% + 0.75rem);
  position: relative;
  white-space: nowrap;
}

.jf-guarded-page .jf-dashboard-shell.jf-section {
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem !important;
}

.jf-dashboard-shell .jf-dashboard__inner {
  max-width: none;
  padding-inline: 0;
}

.jf-site-footer {
  font-size: 0.875rem;
}

.jf-footer-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.jf-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jf-footer-links li {
  margin: 0;
}

/* ── Responsive overrides (legacy parity: 900px tablet, 640px mobile) ── */

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

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

  .jf-contact-directory {
    grid-template-columns: 1fr !important;
  }

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

  .jf-two-thirds,
  .jf-building-stages {
    gap: 2rem !important;
  }

  .jf-two-thirds > .wp-block-column,
  .jf-building-stages > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .jf-home-hero h1,
  .jf-page-hero h1 {
    font-size: 2.375rem !important;
    line-height: 1.15 !important;
  }

  .jf-home-hero .wp-block-columns {
    gap: 1.75rem !important;
  }

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

/* The full desktop nav + CTA stops fitting the header well below 1024px, so
   the overlay drawer takes over there instead. Core's own overlayMenu:"mobile"
   breakpoint is hard-coded at 600px (wp-includes/blocks/navigation/style.css
   switches the container back to a static list and hides the hamburger in
   `@media (min-width: 600px)`), so the two rules below undo that for the
   600–1023.98px band. They need !important rather than specificity: the
   overrides tie with core's selectors, and core's separate block stylesheet is
   enqueued at render time, so it can print after theme.css. */
@media (max-width: 1023.98px) {
  .jf-primary-navigation .wp-block-navigation__responsive-container:not(
      .is-menu-open
    ) {
    /* Back to core's own pre-600px defaults (style.css
       .wp-block-navigation__responsive-container). */
    display: none !important;
    inset: 0 !important;
    position: fixed !important;
    width: auto !important;
    z-index: auto !important;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: inline-flex !important;
  }

  body.jf-nav-open {
    overflow: hidden;
  }

  body.jf-nav-open .jf-site-header {
    box-shadow: 0 2px 12px rgb(0 65 91 / 12%);
    position: sticky;
    top: 0;
    z-index: 1001;
  }

  .jf-header-cta {
    display: none !important;
  }

  .jf-primary-navigation {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-container-open {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-container-open svg {
    fill: #00415b;
    height: 22px;
    width: 22px;
  }

  body.jf-nav-open
    .jf-primary-navigation
    .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container.has-modal-open,
  .jf-primary-navigation
    .wp-block-navigation__responsive-container.is-menu-open {
    background: #fff;
    border-top: 1px solid #afd9ed;
    bottom: 0 !important;
    box-shadow: 0 8px 24px rgb(0 65 91 / 15%);
    left: 0 !important;
    /* Visible, not auto: the close button below sits at a negative top so it can
       replace the hamburger button up in the header, and an overflow-clipping
       ancestor here would clip it off. The nav list scrolls within its own box
       instead (see .wp-block-navigation__responsive-container-content). Both
       axes must be set together — a lone overflow-y: visible computes back to
       auto when overflow-x isn't also visible (core sets both via the
       `overflow: auto` shorthand). */
    overflow: visible !important;
    padding: 0 0 2rem;
    position: fixed;
    right: 0 !important;
    top: var(--jf-mobile-nav-top, 64px) !important;
    /* Above the sticky header's z-index: 1001 (see body.jf-nav-open .jf-site-header)
       so the close button, painted within this panel's stacking context, isn't
       hidden behind it. */
    z-index: 1002;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-dialog {
    height: 100%;
    /* Core adds margin-top: 46px/32px here when logged in with the admin bar
       present, assuming the panel starts at the viewport top. Our panel is
       already positioned below the real (admin-bar-inclusive) header via
       --jf-mobile-nav-top, so this would double the offset. */
    margin-top: 0 !important;
    position: relative;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-container-close {
    align-items: center;
    background: transparent;
    border: 0;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 8px;
    position: absolute;
    right: 16px;
    /* Aligns with the hamburger button's on-screen position in the header,
       computed in theme.js (the panel itself starts lower, at --jf-mobile-nav-top). */
    top: calc(
      var(--jf-mobile-close-top, 12px) - var(--jf-mobile-nav-top, 64px)
    );
    width: 44px;
    z-index: 1;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-container-close svg {
    fill: #00415b;
    height: 22px;
    width: 22px;
  }

  .jf-primary-navigation .wp-block-navigation__responsive-container-content {
    /* height: 100% doesn't work here — .wp-block-navigation__responsive-dialog
       and .wp-block-navigation__responsive-close are both height: auto (sized
       to their content), so a 100% chain through them just resolves to the
       content's own height and overflow never triggers. Compute the real
       viewport-constrained height directly instead. */
    height: calc(100vh - var(--jf-mobile-nav-top, 64px));
    /* Core's own `.is-menu-open:where(...) ... -content { overflow: visible }`
       has higher specificity (3 classes vs. 2 here) and no !important, so a
       plain overflow-y: auto silently loses to it — override both axes with
       !important (see the panel rule above for why both axes are needed). */
    overflow: auto !important;
    /* Core defaults to calc(24px + 2rem), sized to clear its own default
       close-button layout inside this wrapper. Ours lives in the header
       instead (see .wp-block-navigation__responsive-container-close), so
       this only needs to be a normal top inset. */
    padding-top: 1.5rem !important;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container {
    /* Core's `.is-menu-open:where(...) ... { align-items: var(--navigation-layout-
       justification-setting, initial) }` maps the block's justifyContent:"left"
       setting onto this axis too, resolving to flex-start (higher specificity,
       no !important) — so items shrink to text width and the border-bottom
       below only spans the link text instead of the full row. */
    align-items: stretch !important;
    flex-direction: column;
    /* Beats core's higher-specificity `.is-menu-open:where(...) ... { gap: inherit }`,
       which otherwise re-inherits the desktop 26px gap into the flyout. */
    gap: 0 !important;
    width: 100%;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item:not(.jf-nav-drawer-cta)
    .wp-block-navigation-item__content {
    border-bottom: 1px solid #e9f8fe;
    border-bottom-color: #e9f8fe !important;
    color: #00415b;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    width: 100%;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-content
    .jf-nav-drawer-cta {
    border-top: 0;
    display: list-item !important;
    margin: 0;
    padding: 0;
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-content
    .jf-nav-drawer-cta
    .wp-block-navigation-item__content {
    border: 0;
    border-bottom: none !important;
    display: block !important;
    font-size: 0.9375rem;
    margin: 1.25rem 1.5rem 0;
    padding: 0.875rem 1.125rem;
    text-align: center;
    width: calc(100% - 3rem);
  }

  .jf-primary-navigation
    .wp-block-navigation__responsive-container-content
    .jf-nav-drawer-cta
    .wp-block-navigation-item__content:hover {
    text-decoration: none;
  }
}

@media (max-width: 640px) {
  .jf-container {
    padding-inline: 16px;
  }

  .jf-header-inner {
    padding-inline: 16px;
  }

  .jf-site-footer > .alignwide {
    padding-inline: 16px;
  }

  .jf-guarded-page {
    /* Flat 16px, not 16px + the theme's 1.5rem root padding — that additive
       calc was producing 40px (2.5rem) instead of the intended 16px gutter. */
    --jf-site-gutter: 16px;
  }

  .jf-state-banner__top {
    align-items: flex-start;
    gap: 0.5rem 1rem;
  }

  .jf-state-banner__controls {
    flex: 1 1 calc(100% - 135px);
  }

  .jf-header-inner {
    gap: 0.75rem !important;
    min-height: 64px;
  }

  .jf-guarded-page .jf-section {
    padding-block: 2.5rem !important;
  }

  .jf-guarded-page .jf-home-news.jf-section,
  .jf-guarded-page
    .jf-section.has-pale-blue-background-color:has(.jf-news-query):not(
      :has(.jf-news-archive)
    ) {
    padding-block: 2.5rem !important;
  }

  .jf-guarded-page .jf-agencies-section.jf-section {
    padding-block: 0 2.5rem !important;
  }

  .jf-guarded-page .jf-application-cta.jf-section,
  .jf-guarded-page .jf-agencies-section + .jf-section {
    padding-block: 0 2.5rem !important;
  }

  .jf-home-hero,
  .jf-page-hero {
    padding-block: 2.5rem !important;
  }

  .jf-home-hero h1,
  .jf-page-hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .jf-page-hero p:not(.jf-eyebrow),
  .jf-home-hero .has-large-font-size {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .jf-guarded-page .jf-section > .wp-block-heading,
  .jf-guarded-page .jf-section h2.wp-block-heading {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .jf-home-hero .wp-block-columns {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .jf-home-hero .jf-hero-logo {
    margin-top: 0 !important;
    max-width: none;
  }

  .jf-home-hero .jf-hero-logo img {
    height: 64px;
  }

  .jf-quote {
    font-size: 1rem !important;
  }

  .jf-stat-card {
    padding: 1rem !important;
  }

  .jf-stat-card h3 {
    font-size: 2rem !important;
  }

  .jf-g2s,
  .jf-stat-grid.jf-g2s {
    display: grid !important;
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jf-g2s > .wp-block-column,
  .jf-stat-grid.jf-g2s > .wp-block-column {
    width: 100% !important;
  }

  .jf-card-grid,
  .jf-contact-grid,
  .jf-resource-grid,
  .jf-category-grid,
  .jf-contact-directory,
  .jf-contact-directory__leadership,
  .jf-contact-directory__ombudsmen,
  .jf-footer-grid {
    grid-template-columns: 1fr !important;
  }

  .jf-dashboard__stats {
    grid-template-columns: 1fr !important;
  }

  .jf-dashboard__category {
    grid-template-columns: 110px 1fr 25px;
  }

  .jf-dashboard__category > span:first-child {
    font-size: 0.75rem;
  }

  .jf-dashboard-acceleration > .alignwide:first-child {
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .jf-dashboard-acceleration > .alignwide:first-child .wp-block-heading {
    flex: 1 1 auto;
    font-size: 1.5rem;
    min-width: 0;
  }

  .jf-dashboard-baseline-label {
    flex: 0 0 auto;
    font-size: 0.5625rem;
    margin-left: auto;
    white-space: nowrap;
  }

  .jf-dashboard-acceleration-card {
    padding: 1.25rem;
  }

  .jf-dashboard-acceleration-card > .wp-block-column {
    flex-basis: 100% !important;
  }

  .jf-dashboard-target-stats {
    display: grid !important;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jf-dashboard-target-stats > .wp-block-column {
    width: 100% !important;
  }

  .jf-dashboard__map {
    height: 300px;
  }

  .jf-cta-band {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}