/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Vars
# Colors
# Typography & Resets
# Header & Navigation
# Icons & Social
# Button Styling
# General Styles
# Section Paddings
# General Sections
  ## Hero
  ## Columns
  ## Cards
  ## Text Cards
  ## Stats
  ## Popups & Video Player
  ## Video Grid
# 404
# Footer
# Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Font fallbacks
Local Arial resized to the metrics of the web fonts (measured on the live site).
Until field-gothic / Archivo arrive, text is drawn with these, so lines wrap at
the same points and have the same height: the font swap does not move the layout (CLS).
Liberation Sans / Arimo are metric clones of Arial (Linux, Lighthouse).
--------------------------------------------------------------*/
@font-face {
  font-family: "Field Gothic Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 100 900;
  size-adjust: 95.55%;
  ascent-override: 92.10%;
  descent-override: 18.84%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 500;
  size-adjust: 98.64%;
  ascent-override: 89.21%;
  descent-override: 21.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600 900;
  size-adjust: 97.95%;
  ascent-override: 89.84%;
  descent-override: 21.44%;
  line-gap-override: 0%;
}

/*--------------------------------------------------------------
# Vars
--------------------------------------------------------------*/
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #6E8A8F;
  --color-gray-alt: #385B57;
  --color-gray-soft: #4A4A46;
  --color-foreground: #111;
  --color-primary: #FBC725;  
  --color-secondary: #BD4C00;
  --color-tertiary: #123038;
  --color-accent: #CFDED4;
  --color-ada: #691A0D;
  --color-light: #DEDFD9;
  --plyr-video-control-color: #9DB3B5;
  --font-family-main-heading: "field-gothic", "Field Gothic Fallback", sans-serif;
  --font-family-heading: "Archivo", "Archivo Fallback", sans-serif;
  --font-family-content: "Archivo", "Archivo Fallback", sans-serif;

  /* Header (desktop values in the 992px media query) */
  --header-h: 80px;
  --header-pad: 1.5rem;
  --header-max: 1360px;
  --header-logo-h: 34px;

  /* Focus ring: dark outline + light halo, one of the two always reaches 3:1 */
  --focus-ring-color: var(--color-tertiary);
  --focus-ring-halo: var(--color-white);

  /* Icons */
  --icon-size: 20px;

  /* Scrollbars (page, modals, mobile menu): see "Scrollbars" below */
  --scrollbar-size: 8px;
  --scrollbar-thumb: var(--color-primary);
  --scrollbar-track: var(--color-light);
  --scrollbar-edge: var(--color-foreground);
}
/*--------------------------------------------------------------
# Reset
# Replaces Bootstrap's Reboot (Bootstrap CSS is no longer loaded).
# Only the base rules the theme relied on; no classes, no utilities.
# Paste right after the :root block, before "# Colors".
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol,
ul {
  padding-left: 2rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 0.875em;
}
figure {
  margin: 0 0 1rem;
}
hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}
img,
svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
th {
  text-align: inherit;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
/* Text Color utility classes */
.color-white              { color: var(--color-white); }
.color-black              { color: var(--color-black); }
.color-gray               { color: var(--color-gray); }
.color-gray-soft          { color: var(--color-gray-soft); }
.color-foreground         { color: var(--color-foreground); }
.color-primary            { color: var(--color-primary); }
.color-secondary          { color: var(--color-secondary); }
.color-tertiary           { color: var(--color-tertiary); }
.color-accent             { color: var(--color-accent); }
.color-ada                { color: var(--color-ada); }
.color-light              { color: var(--color-light); }

/* Background utility classes */
.bg-white              { background-color: var(--color-white); }
.bg-black              { background-color: var(--color-black); }
.bg-gray               { background-color: var(--color-gray) !important; }
.bg-gray-soft          { background-color: var(--color-gray-soft) !important; }
.bg-foreground         { background-color: var(--color-foreground) !important; }
.bg-primary            { background-color: var(--color-primary) !important; }
.bg-secondary          { background-color: var(--color-secondary) !important; }
.bg-tertiary           { background-color: var(--color-tertiary) !important; }
.bg-accent             { background-color: var(--color-accent) !important; }
.bg-ada                { background-color: var(--color-ada) !important; }
.bg-light              { background-color: var(--color-light) !important; }

/* Hover and focus states */
.color-white:hover, .color-white:focus                         { color: var(--color-white); }
.color-black:hover, .color-black:focus                         { color: var(--color-black); }
.color-gray:hover, .color-gray:focus                           { color: var(--color-gray); }
.color-gray-soft:hover, .color-gray-soft:focus                 { color: var(--color-gray-soft); }
.color-foreground:hover, .color-foreground:focus               { color: var(--color-foreground); }
.color-primary:hover, .color-primary:focus                     { color: var(--color-primary); }
.color-secondary:hover, .color-secondary:focus                 { color: var(--color-secondary); }
.color-tertiary:hover, .color-tertiary:focus                   { color: var(--color-tertiary); }
.color-accent:hover, .color-accent:focus                       { color: var(--color-accent); }
.color-ada:hover, .color-ada:focus                             { color: var(--color-ada); }
.color-light:hover, .color-light:focus                         { color: var(--color-light); }
.bg-white:hover, .bg-white:focus                         { background-color: var(--color-white); }
.bg-black:hover, .bg-black:focus                         { background-color: var(--color-black); }
.bg-gray:hover, .bg-gray:focus                           { background-color: var(--color-gray); }
.bg-gray-soft:hover, .bg-gray-soft:focus                 { background-color: var(--color-gray-soft); }
.bg-foreground:hover, .bg-foreground:focus               { background-color: var(--color-foreground); }
.bg-primary:hover, .bg-primary:focus                     { background-color: var(--color-primary); }
.bg-secondary:hover, .bg-secondary:focus                 { background-color: var(--color-secondary); }
.bg-tertiary:hover, .bg-tertiary:focus                   { background-color: var(--color-tertiary); }
.bg-accent:hover, .bg-accent:focus                       { background-color: var(--color-accent); }
.bg-ada:hover, .bg-ada:focus                             { background-color: var(--color-ada); }
.bg-light:hover, .bg-light:focus                         { background-color: var(--color-light); }

/*--------------------------------------------------------------
# Typography & Resets
--------------------------------------------------------------*/
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px); /* CHANGED: anchors land below the sticky header */
}
.page-content,
.entry-content,
.entry-summary {
  margin: 0 !important;
}

body,
html {
  max-width: 100vw;
}
.post, .page {
    margin: 0;
}

html.has-menu-open {
  overflow: hidden;
}
body {
  font-family: var(--font-family-content);
  overflow-x: clip; /* CHANGED: was hidden */
  word-break: normal;
  hyphens: none;
  overflow-wrap: normal;
  color: var(--color-foreground);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  background-color: var(--color-white);
}
/*Stops Some Of Looms Issues on Certain Browsers*/
section#shadow-host-companion {
  padding: 0;
  margin: 0;
}
/* Line heights = "normal" of the web fonts (field-gothic 1.064, Archivo 1.088), as numbers:
   the height no longer depends on which font is drawn, so the swap cannot change it. */
h1 {
  font-family: var( --font-family-heading);
  font-size: 52px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.064;
}
.hero-section__heading{
  font-size: 60px;
  font-weight: 700;
}
h2 {
  font-family: var(--font-family-heading);
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.088;
}
h3 {
  font-family: var(--font-family-heading);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.088;
}
h4 {
  font-family: var(--font-family-heading);
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.088;
}
h5 {
  font-family: var(--font-family-heading);
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.088;
}
h6 {
  font-family: var(--font-family-heading);
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.088;
}

.text b,
.text strong {
  font-weight: 700;
  color: var(--color-foreground);
}
.text p:not(:last-child) {
  margin-bottom: 1.5em;
}

/* Screen-reader text + skip link */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal !important;
}
.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  clip: auto;
  clip-path: none;
  background-color: var(--color-white);
  color: var(--color-foreground);
  font-weight: 700;
}

/* Keyboard focus, site-wide. Visible on every background of the palette. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring-halo);
}

/* Scrollbars: the page, every modal (<dialog>) and the mobile menu panel.
   Yellow thumb on a light gray track. Yellow on that gray is only ~1.2:1, so the
   thumb gets a dark edge (16:1) to stay visible (WCAG 1.4.11), like the buttons.
   Chrome/Edge 121+ ignore the ::-webkit-scrollbar rules on any element that has
   scrollbar-color or scrollbar-width, so the standard properties go to Firefox only.
   Phones and tablets draw their own overlay scrollbars and ignore all of this.
   Scroll boxes with their own scrollbar (comparison table, logo slider) keep it. */
html::-webkit-scrollbar,
dialog::-webkit-scrollbar,
.site-header__panel::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
html::-webkit-scrollbar-track,
dialog::-webkit-scrollbar-track,
.site-header__panel::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner,
dialog::-webkit-scrollbar-corner,
.site-header__panel::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track);
}
html::-webkit-scrollbar-thumb,
dialog::-webkit-scrollbar-thumb,
.site-header__panel::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 1px solid var(--scrollbar-edge);
  background-color: var(--scrollbar-thumb);
}
/* Firefox: no border on the thumb, colors only (inherited by modals and the menu) */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}
/* Windows high contrast: system scrollbars */
@media (forced-colors: active) {
  html::-webkit-scrollbar-thumb,
  dialog::-webkit-scrollbar-thumb,
  .site-header__panel::-webkit-scrollbar-thumb {
    border-color: CanvasText;
    background-color: ButtonText;
  }
  html::-webkit-scrollbar-track,
  dialog::-webkit-scrollbar-track,
  .site-header__panel::-webkit-scrollbar-track {
    background-color: Canvas;
  }
}

/*--------------------------------------------------------------
# Header & Navigation
# Mobile-first. No Bootstrap classes: Bootstrap loads async,
# so the header must not wait for it.
--------------------------------------------------------------*/
.site-header {
  position: relative;
  z-index: 100;
  height: var(--header-h);
  background-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header--sticky {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
}
.site-header.is-scrolled,
.site-header.is-open {
  background-color: var(--color-white);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.14), 0 8px 20px rgba(17, 17, 17, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}

/* Logo (two classes so a:visited { color: unset } does not win) */
.site-header .site-header__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 13px;
  flex: 0 0 auto;
  color: var(--color-foreground);
}
.site-header.is-scrolled .site-header__logo{
  gap: 0px;
}
.site-header__logo-img {
  display: block;
  width: auto;
  height: var(--header-logo-h);
  max-width: 240px;
      margin-top: 20px;
      transition: all 0.2s ease;
}

.site-header__logo-text {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
/* Title below the logo (Theme Settings > Branding) */
.site-header__logo-title {
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 700;
    white-space: nowrap;
}

/* Menu toggle */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--color-foreground);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-foreground);
  cursor: pointer;
}
.site-header__toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.site-header__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 2px solid currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: 6px; }
.site-header__toggle-bars span:nth-child(3) { top: 12px; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Header button next to the menu toggle (tablets and phones). On desktop the
   same link is the last item of the menu (.menu-item--cta): one of the two shows.
   Two classes so a:visited { color: unset } does not win. */
.site-header .site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: auto;
  padding: 0 18px;
  border: 2px solid var(--color-foreground);
  background-color: var(--color-primary);
  color: var(--color-foreground);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .site-header .site-header__cta:hover {
    background-color: var(--color-foreground);
    color: var(--color-primary);
  }
}

/* Navigation list (mobile layout; desktop in the 992px media query) */
.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list > li > a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 4px;
  border-bottom: 2px solid var(--color-foreground);
  color: var(--color-foreground);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav__list > li > a:focus-visible {
  outline-offset: -4px; /* inset: neighbours share borders */
  box-shadow: none;
}
.site-nav__list > li > a[aria-current] {
  box-shadow: inset 3px 0 0 var(--color-secondary);
  padding-left: 14px;
}
.site-nav__list > .menu-item--cta > a {
  justify-content: center;
  margin-top: 20px;
  border: 2px solid var(--color-foreground);
  background-color: var(--color-primary);
}
@media (hover: hover) {
  .site-nav__list > li > a:hover {
    background-color: var(--color-accent);
  }
  .site-nav__list > .menu-item--cta > a:hover {
    background-color: var(--color-foreground);
    color: var(--color-primary);
  }
}

/* Submenus (one level). */
.site-nav__list > li {
  position: relative;
}
.site-nav__list > .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
}
.site-nav__list > .menu-item-has-children > a {
  flex: 1 1 0;
  min-width: 0;
}
/* Parent without its own URL: the whole item is the button */
.site-nav__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 100%;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 10px 4px;
  border: 0;
  border-bottom: 2px solid var(--color-foreground);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Parent with a URL: the link navigates, this button opens the submenu */
.site-nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--color-foreground);
  border-left: 2px solid var(--color-foreground);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.site-nav__parent:focus-visible,
.site-nav__sub-toggle:focus-visible {
  outline-offset: -4px;
  box-shadow: none;
}
.site-nav__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
[aria-expanded="true"] > .site-nav__chevron {
  transform: translateY(2px) rotate(-135deg);
}
.site-nav__list .sub-menu {
  flex: 1 0 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 4px 10px 20px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.3);
  color: var(--color-foreground);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav__list .sub-menu a:focus-visible {
  outline-offset: -4px;
  box-shadow: none;
}
.site-nav__list .sub-menu a[aria-current] {
  box-shadow: inset 3px 0 0 var(--color-secondary);
}
@media (hover: hover) {
  .site-nav__parent:hover,
  .site-nav__sub-toggle:hover,
  .site-nav__list .sub-menu a:hover {
    background-color: var(--color-accent);
  }
}

/*--------------------------------------------------------------
# Icons & Social
# Generic: header, footer, blocks. Markup from inc/template-icons.php
--------------------------------------------------------------*/
/* Icon wrapper: bechtel_render_icon(). Size via --icon-size, color via currentColor */
.icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size);
  line-height: 1;
  vertical-align: middle;
}
.icon.dashicons {
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size);
  color: currentColor;
}
.icon svg,
.icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.icon svg {
  fill: currentColor;
}
.icon svg [fill]:not([fill="none"]) {
  fill: currentColor;
}
.icon svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

/* Social list: bechtel_social_list(). Theme it per context with the custom properties */
.social-list {
  --social-color: var(--color-white);
  --social-hover-color: var(--color-primary);
  --social-target: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* On dark backgrounds (footer, tertiary sections) */
.social-list--light {
  --social-color: var(--color-white);
}
.social-list .social-list__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--social-target);
  min-height: var(--social-target);
  background-color: transparent;
  color: var(--social-color);
  text-decoration: none;
  transition: color 0.15s ease;
}
header.is-scrolled .social-list .social-list__link{
  color: var(--color-foreground) !important;
} 
.social-list__text {
  padding-inline: 8px;
  font-size: 0.875rem;
  font-weight: 700;
}
  /* Only the icon changes color, no background */
  .social-list .social-list__link:hover,
  header.is-scrolled .social-list .social-list__link:hover {
    color: var(--social-hover-color) !important;
  }
 


/*--------------------------------------------------------------
# Button Styling
--------------------------------------------------------------*/
/* CHANGED: removed "outline: none" (it hid keyboard focus site-wide, WCAG 2.4.7) */
a,
a:active,
a:focus {
  text-decoration: none;
  transition: 0.15s ease all;
}
a:visited{
  color: unset;
}
/*CTA BTN TYPE*/
.button {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 14px 24px;
  font-size: 15px;
  line-height: 1;
  font-family: var(--font-family-content);
  font-weight: 700;
  font-style: normal;
  text-shadow: none;
  box-shadow: none;
  transition: 0.18s ease all;
  overflow: hidden;
  border: 2px solid transparent;
  width: max-content;
  text-align: center;
  text-decoration: none !important;
}
/* ADDED: .button resets box-shadow, which removed the focus halo.
   Without it the ring disappears on buttons over dark sections. */
.button:focus-visible {
  box-shadow: 0 0 0 5px var(--focus-ring-halo);
}
/* Action Primary Fill  (Yellow)*/
.button.primary_filled {
  background-color: var(--color-primary) !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-foreground);
}
.button.primary_filled:hover,
.button.primary_filled:focus {
  background-color: transparent !important;
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
}

.button.primary_outline{
  background-color: transparent !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-foreground) !important;
}
.button.primary_outline:hover,
.button.primary_outline:focus {
  background-color: var(--color-primary) !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-primary) !important;
}

/* Action Secondary Fill  (Red)*/
.button.secondary_filled {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-black);
}
.button.secondary_filled:hover,
.button.secondary_filled:focus {
  background-color: var(--color-light) !important;
  color: var(--color-foreground) !important;
}

/* Action Secondary Outline  */
.button.secondary_outline {
  background-color: var(--color-light) !important;
  color: var(--color-foreground);
  border-color: var(--color-black) !important;
}
.button.secondary_outline:hover,
.button.secondary_outline:focus {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-black);
}

/*--------------------------------------------------------------
# Section Paddings
--------------------------------------------------------------*/
.padding-xsmall {
  padding: 50px 0 !important;
}
.padding-small {
  padding: 65px 0 !important;
}
.padding-medium {
  padding: 90px 0 !important;
}
.padding-large {
  padding: 100px 0;
}
.padding-xlarge {
  padding: 130px 0;
}

/*--------------------------------------------------------------
# General Sections
--------------------------------------------------------------*/

/* Hero Section */
.hero-section {
  --hero-bg: var(--color-accent);
  --hero-gutter: var(--header-pad);
  /* Defaults. The block overrides them inline when the ACF fields have a value */
  --hero-overflow-bottom: 0px;
  --hero-overlap-left: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--hero-bg);
  border-bottom: 2px solid var(--color-tertiary);
  color: var(--color-foreground);
}
/* First block of the page: slides under the transparent header */
.hero-section--under-header {
  margin-top: calc(var(--header-h) * -1);
}
.hero-section__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hero-section--v-top .hero-section__content,
.hero-section--v-items-stretch .hero-section__content {
  justify-content: flex-start;
}
.hero-section--v-bottom .hero-section__content {
  justify-content: flex-end;
}
.hero-section__text {
  width: 100%;
  padding-inline: var(--hero-gutter);
}
.hero-section--under-header .hero-section__text {
  padding-top: var(--header-h);
}
.eyebrow {
  margin: 0 0 20px;
  color: var(--color-ada);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero-section__description {
  max-width: 30rem;
  margin-top: 20px;
  font-size: 18px;
}
.hero-section__description > :last-child {
  margin-bottom: 0;
}
.hero-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Horizontal alignment */
.hero-section--h-middle .hero-section__text { text-align: center; }
.hero-section--h-middle .hero-section__description { margin-inline: auto; }
.hero-section--h-middle .hero-section__buttons { justify-content: center; align-items: center; }
.hero-section--h-right .hero-section__text { text-align: right; }
.hero-section--h-right .hero-section__description { margin-left: auto; }
.hero-section--h-right .hero-section__buttons { justify-content: flex-end; align-items: flex-end; }

/* Media. Below 992px the image keeps its natural height (width/height attributes
   on the <img> reserve the space, so there is no layout shift). Desktop rules in the 992px query. */
.hero-section__media {
  position: relative;
  min-width: 0;
}
.hero-section__media picture {
  display: block;
}
.hero-section__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Ratios printed by hero.php (--hero-ratio / --hero-ratio-mobile). Same space the
   width/height attributes reserve, stated in CSS so Lighthouse sees a sized image.
   Desktop "Fill text height" ignores it: there the image has a definite width and height (100%). */
.hero-section__img {
  aspect-ratio: var(--hero-ratio, auto);
}
@media (max-width: 767.98px) {
  .hero-section__img {
    aspect-ratio: var(--hero-ratio-mobile, var(--hero-ratio, auto));
  }
}
/* Mobile and tablet (stacked): image running over the top of the next section.
   Negative margin = the hero ends before the image does; the image keeps its full
   size, so nothing is cropped and nothing moves (no CLS). The hero paints above
   the next section; that section needs at least this much top padding.
   The field is a % of the image height; hero.php converts it to a % of the width
   (margins resolve against the width), so the overlap scales with the image.
   Tablet (768-991px) shows the desktop image, so it gets its own value. */
@media (max-width: 991.98px) {
  .hero-section--overflow-mobile {
    z-index: 2;
  }
  .hero-section--overflow-mobile .hero-section__media {
    margin-bottom: calc(var(--hero-overflow-tablet, 0%) * -1);
  }
}
@media (max-width: 767.98px) {
  .hero-section--overflow-mobile .hero-section__media {
    margin-bottom: calc(var(--hero-overflow-mobile, 0%) * -1);
  }
}

/* Columns Section (acf/columns)
   Text columns with selectable widths. Stacked below 992px. */
.columns-section {
  --columns-count: 2;
  --columns-template: repeat(var(--columns-count), minmax(0, 1fr));
  --columns-gap: 64px;
  --columns-divider: #966F24;
  position: relative;
  background-color: var(--color-white);
  color: var(--color-foreground);
}
.columns-section__inner {
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}
.columns-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.columns-section__col {
  min-width: 0;
}
.columns-section__col > :first-child {
  margin-top: 0;
}
.columns-section__col > :last-child {
  margin-bottom: 0;
}
.columns-section__heading {
  margin: 0 0 25px;
  line-height: 1.2;
}
.columns-section__text {
  max-width: 34rem;
}
.columns-section__text > :last-child {
  margin-bottom: 0;
}
.columns-section__divider {
  height: 0;
  margin: 49px 0 18px;
  border: 0;
  border-top: 1px solid var(--columns-divider);
  background: none;
  color: inherit;
  opacity: 1;
}
.columns-section__cta-title {
  margin: 24px 0 0;
  font-family: var(--font-family-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.columns-section__divider + .columns-section__cta-title {
  margin-top: 0;
}
.columns-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

/* Content block (acf/content): same markup as a column, at the full width of the container */
.content-section .columns-section__text {
  max-width: none;
}

/* Column widths: only printed by the block when it has exactly two columns */
.columns-section--w-40-60 { --columns-template: minmax(0, 2fr) minmax(0, 3fr); }
.columns-section--w-60-40 { --columns-template: minmax(0, 3fr) minmax(0, 2fr); }
.columns-section--w-33-67 { --columns-template: minmax(0, 1fr) minmax(0, 2fr); }
.columns-section--w-67-33 { --columns-template: minmax(0, 2fr) minmax(0, 1fr); }
.columns-section--w-30-70 { --columns-template: minmax(0, 3fr) minmax(0, 7fr); }
.columns-section--w-70-30 { --columns-template: minmax(0, 7fr) minmax(0, 3fr); }
.columns-section--w-25-75 { --columns-template: minmax(0, 1fr) minmax(0, 3fr); }
.columns-section--w-75-25 { --columns-template: minmax(0, 3fr) minmax(0, 1fr); }

/* Backgrounds */
.columns-section--bg-accent  { background-color: var(--color-accent); }
.columns-section--bg-light   { background-color: var(--color-light); }
.columns-section--bg-primary { background-color: var(--color-primary); --columns-divider: var(--color-foreground); }
.columns-section--bg-tertiary {
  --columns-divider: var(--color-primary);
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  background-color: var(--color-tertiary);
  color: var(--color-white);
}
.columns-section--bg-tertiary .eyebrow {
  color: var(--color-primary); /* 8.83:1 on tertiary */
}
.columns-section--bg-tertiary .text b,
.columns-section--bg-tertiary .text strong {
  color: inherit;
}

/* Column image (optional, per column): above or below the text, or alone.
   Shape set in the block (--columns-img-ratio): the box has its size before the
   image loads, so nothing moves (CLS). Natural: the width/height attributes do it. */
.columns-section__media {
  position: relative;
  margin: 0 0 24px;
  overflow: hidden;
  aspect-ratio: var(--columns-img-ratio, auto);
}
.columns-section__media--bottom {
  margin: 24px 0 0;
}
.columns-section__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--columns-img-focus, center center);
}
.columns-section__media--natural .columns-section__img,
.columns-section__media--fill .columns-section__img {
  height: auto;
}
.columns-section__media--border {
  border: 2px solid var(--color-foreground);
}

/* Mobile and tablet (stacked): last column first, e.g. an image column that sits
   on the right on desktop shows above the text */
@media (max-width: 991.98px) {
  .columns-section--reverse-mobile .columns-section__grid {
    display: flex;
    flex-direction: column-reverse;
  }
  .site-header{
    background-color: var(--color-white) !important;
  }
  .entry-content{
    padding-top: 80px !important;
  }
}

/* Desktop: "Fill column height". The image column is as tall as the row (the
   tallest column sets it) and the image covers it, cropped. */
@media (min-width: 992px) {
  .columns-section__col--fill {
    position: relative;
    align-self: stretch;
    min-height: 280px;
  }
  .columns-section__col--fill .columns-section__media {
    position: absolute;
    inset: 0;
    margin: 0;
  }
  .columns-section__col--fill .columns-section__img {
    height: 100%;
  }
   br.show-mv{
    display: none !important;
  }
}

/* Heading size, independent of the tag (keeps the H2 > H3 order while matching the design) */
.heading-like-h1 { font-size: 52px; }
.heading-like-h2 { font-size: 44px; }
.heading-like-h3 { font-size: 32px; }
.heading-like-h4 { font-size: 25px; }
.heading-like-h5 { font-size: 21px; }
.heading-like-h6 { font-size: 18px; }

/* Cards Section (acf/cards) */
.cards-section {
  --cards-cols: 4;                 /* cards per row on desktop (block field) */
  --cards-n: 1;                    /* cards per row right now (set per breakpoint) */
  --cards-gap: 22px;
  --cards-bg: var(--color-accent);
  --cards-ratio: 321 / 170;        /* image box of every card (Figma: 321 x 170) */
  --cards-desc-max: none;          /* description max width, desktop only */
  position: relative;
  background-color: var(--cards-bg);
  color: var(--color-foreground);
}
.cards-section__inner {
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}
.cards-section__header {
  margin-bottom: 28px;
}
.cards-section__header > :last-child {
  margin-bottom: 0;
}
.cards-section__heading {
  margin: 0 0 12px;
  line-height: 1.15;
}
.cards-section__description > :last-child {
  margin-bottom: 0;
}

/* Grid: flex instead of grid so an incomplete row can be centered */
.cards-section__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cards-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards-section--centered .cards-section__grid {
  justify-content: center;
}
.cards-section__card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--cards-n) - 1) * var(--cards-gap)) / var(--cards-n));
  min-width: 0;
  border: 2px solid var(--color-foreground);
  background-color: var(--color-white);
  color: var(--color-foreground);
}
.cards-section__media {
  aspect-ratio: var(--cards-ratio);
  overflow: hidden;
  background-color: var(--color-light);
}
.cards-section__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cards-section__body {
  flex: 1 1 auto;
  padding: 20px 22px 28px;
}
.cards-section__title {
  margin: 0 0 10px;
  line-height: 1.2;
}
.cards-section__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.cards-section--card-center .cards-section__body {
  text-align: center;
}
.cards-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Linked card: */
.cards-section .cards-section__link {
  color: inherit;
  text-decoration: none;
}
.cards-section__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cards-section__link:focus-visible {
  outline: none;
  box-shadow: none;
}
.cards-section__link:focus-visible::after {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--focus-ring-halo);
}
.cards-section__card--link {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cards-section__card--link .cards-section__img {
  transition: transform 0.45s ease;
}
.cards-section__card--link:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(17, 17, 17, 0.2);
}
.cards-section__card--link:focus-within .cards-section__img {
  transform: scale(1.06);
}
@media (hover: hover) {
  .cards-section__card--link:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(17, 17, 17, 0.2);
  }
  .cards-section__card--link:hover .cards-section__img {
    transform: scale(1.06);
  }
  .cards-section__card--link:hover .cards-section__link {
    color: var(--color-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cards-section__card--link,
  .cards-section__card--link .cards-section__img {
    transition: none;
  }
  .cards-section__card--link:hover,
  .cards-section__card--link:focus-within,
  .cards-section__card--link:hover .cards-section__img,
  .cards-section__card--link:focus-within .cards-section__img {
    transform: none;
  }
}

/* Header alignment */
.cards-section--h-middle .cards-section__header { text-align: center; }
.cards-section--h-middle .cards-section__description { margin-inline: auto; }
.cards-section--h-middle .cards-section__buttons { justify-content: center; align-items: center; }
.cards-section--h-right .cards-section__header { text-align: right; }
.cards-section--h-right .cards-section__description { margin-left: auto; }
.cards-section--h-right .cards-section__buttons { justify-content: flex-end; align-items: flex-end; }

/* Dark background picked in the block: light text and inverted focus ring (cards stay white) */
.cards-section--dark {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  color: var(--color-white);
}
.cards-section--dark .cards-section__description {
  color: var(--color-accent);
}
.cards-section--dark .cards-section__header .eyebrow {
  color: var(--color-primary);
}
.cards-section--dark .cards-section__header .text b,
.cards-section--dark .cards-section__header .text strong {
  color: inherit;
}

/* Text Cards (acf/text-cards)*/
.cards-section__card--text .cards-section__body {
  display: flex;
  flex-direction: column;
  padding: 22px 23px 23px;
}
.cards-section__card--text .cards-section__text {
  font-size: 16px;
}
/* Two classes so a:visited { color: unset } does not win */
.cards-section .cards-section__more {
  display: block;
  align-self: flex-start;
  margin-top: auto;          /* links line up at the bottom of equal-height cards */
  padding-top: 14px;
  color: var(--color-secondary); /* #BD4C00 on white: 5:1 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cards-section--card-center .cards-section__more {
  align-self: center;
}
/* The link covers the whole card: clicking anywhere on it follows the link */
.cards-section__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Last word + arrow stay together when the link wraps */
.cards-section__more-tail {
  white-space: nowrap;
}
.cards-section__arrow {
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-left: 8px;
  vertical-align: baseline;
  transition: transform 0.3s ease;
}
.cards-section .cards-section__more:focus-visible {
  outline: none;
  box-shadow: none;
  color: var(--color-foreground);
}
.cards-section__more:focus-visible::after {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--focus-ring-halo);
}
.cards-section__more:focus-visible .cards-section__arrow {
  transform: translateX(6px);
}
@media (hover: hover) {
  .cards-section__card--more:hover .cards-section__more {
    color: var(--color-foreground);
  }
  .cards-section__card--more:hover .cards-section__arrow {
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cards-section .cards-section__more,
  .cards-section__arrow {
    transition: none;
  }
  .cards-section__card--more:hover .cards-section__arrow,
  .cards-section__more:focus-visible .cards-section__arrow {
    transform: none;
  }
}
/* ==========================================================================
   TEXT CARDS POPUP
   ========================================================================== */
/* ==========================================================================
   POPUPS + VIDEO PLAYER: rules to add to css/bechtel.css. Replaces the previous snippet. Do not enqueue this file.
   Paste the whole block right after the "Text Cards" rules (before "# 404").
   ========================================================================== */

/* Text Cards: in popup mode the card link is a <button>. Same look as the link. */
.cards-section button.cards-section__more {
  width: auto;               /* beats the mobile "button { width: 100% }" */
  padding: 14px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cards-section--card-center button.cards-section__more {
  text-align: center;
}

/* Popups: native <dialog>, opened by js/bechtel.js ("# Popups").
   Reusable: any <dialog class="popup"> with a [data-popup-open="id"] trigger. */
html.has-popup-open {
  overflow: hidden;
}
.popup {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 2px solid var(--color-foreground);
  background-color: var(--color-white);
  color: var(--color-foreground);
  overflow: auto;
  overscroll-behavior: contain;
}
.popup::backdrop {
  background-color: rgba(18, 48, 56, 0.72);
}
.popup[open] {
  animation: popup-in 0.22s ease;
}
.popup[open]::backdrop {
  animation: popup-fade 0.22s ease;
}
@keyframes popup-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes popup-fade {
  from {
    opacity: 0;
  }
}
.popup__box {
  position: relative;
  padding: 32px 28px 28px;
}
.popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
@media (hover: hover) {
  .popup__close:hover {
    background-color: var(--color-accent);
  }
}
.popup__title {
  margin: 0 44px 30px 0;     /* room for the close button */
  line-height: 1.2;
}
.popup__text > :last-child {
  margin-bottom: 0;
}
.popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  .popup[open],
  .popup[open]::backdrop {
    animation: none;
  }
}

/* Popup media (image or video) */
.popup--media {
  width: min(800px, calc(100% - 32px)); /* wider when the popup holds an image or a video */
}
.popup__media {
  margin: 0 0 20px;
}
.popup__media:last-child {
  margin-bottom: 0;
}
.popup__img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   CARDS: eyebrow + "more" line (acf/cards, blocks/cards/cards.php)
   The "more" link/button reuses the Text Cards styles (.cards-section__more).
   -------------------------------------------------------------------------- */
.cards-section__eyebrow {
  margin: 0 0 10px;
  color: var(--color-ada);                   /* #691A0D on white: 11.5:1 */
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Image cards with a "more" line: same image zoom as linked cards */
.cards-section__card--more .cards-section__img {
  transition: transform 0.45s ease;
}
.cards-section__card--more:focus-within .cards-section__img {
  transform: scale(1.06);
}
@media (hover: hover) {
  .cards-section__card--more:hover .cards-section__img {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cards-section__card--more .cards-section__img {
    transition: none;
  }
  .cards-section__card--more:hover .cards-section__img,
  .cards-section__card--more:focus-within .cards-section__img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   TRADE POPUP: cards in popup mode (blocks/cards/cards.php) + js/bechtel.js
   ("# Trade popups"). Separate from the Text Cards popup (.popup).
   Mobile: full-screen sheet; eyebrow + Close stay pinned at the top.
   768px and up: centered box, the same blocks side by side.
   A closed <dialog> is not rendered: its image is not downloaded until it opens.
   -------------------------------------------------------------------------- */
.trade-popup {
  --trade-pad: 16px;
  --trade-rule: var(--color-light);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-white);
  color: var(--color-foreground);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.trade-popup::backdrop {
  background-color: #0B1B20;
}
.trade-popup[open] {
  animation: trade-popup-up 0.25s ease;
}
@keyframes trade-popup-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Mobile order: bar (eyebrow | close), photo, title, intro, details, band.
   Head and intro are flattened (display: contents) so their parts join this grid. */
.trade-popup__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow close"
    "media   media"
    "title   title"
    "lead    lead"
    "details details"
    "cta     cta";
  align-content: start;
  min-height: 100%;                          /* fills the sheet: a tap on it never counts as the backdrop */
}
.trade-popup__head,
.trade-popup__intro {
  display: contents;
}

/* Pinned bar: two sticky cells on the same row */
.trade-popup__eyebrow,
.trade-popup__close-cell {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-foreground);
}
.trade-popup__eyebrow {
  grid-area: eyebrow;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 var(--trade-pad);
  color: var(--color-primary);               /* #FBC725 on #111: 12.6:1 */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.trade-popup__close-cell {
  grid-area: close;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px var(--trade-pad) 6px 0;
}
.trade-popup__close {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;                               /* beats any mobile "button { width: 100% }" */
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-white);
  font-family: var(--font-family-content);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.trade-popup__close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .trade-popup__close:hover .trade-popup__close-icon {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-foreground);
  }
}

.trade-popup__media {
  grid-area: media;
  aspect-ratio: 16 / 9;                      /* space reserved before the image loads */
  overflow: hidden;
  background-color: var(--color-light);
}
.trade-popup__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trade-popup__title {
  grid-area: title;
  margin: 0;
  padding: 20px var(--trade-pad) 0;
  font-size: 30px;
  line-height: 1.1;
}
.trade-popup__lead {
  grid-area: lead;
  padding: 14px var(--trade-pad) 22px;
  border-bottom: 1px solid var(--trade-rule);
}
.trade-popup__subtitle {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
}

.trade-popup__text {
  font-size: 17px;
  line-height: 1.5;
}
.trade-popup__text > :last-child {
  margin-bottom: 0;
}

/* Snapshot figures + how it works */
.trade-popup__details {
  grid-area: details;
  display: grid;
  gap: 24px;
  padding: 16px var(--trade-pad) 24px;
}
.trade-popup__section-title {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.25;
}
.trade-popup__snapshot {
  padding: 16px;
  background-color: var(--color-accent);
}
.trade-popup__stats,
.trade-popup__rows {
  margin: 0;
}
.trade-popup__stat {
     display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 25px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #A9BCB1;
}
.trade-popup__stat:last-child {
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}
.trade-popup__stat-value {
  font-family: var(--font-family-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.trade-popup__stat-label,
.trade-popup__row-text {
  margin: 0;
}
.trade-popup__stat-label {
  font-size: 14px;
  line-height: 1.35;
}
.trade-popup__source {
  margin: 10px 0 0;
  color: var(--color-gray-soft);             /* #4A4A46 on sage: 6.4:1 */
  font-size: 12px;
  line-height: 1.4;
}
.trade-popup__row {
  padding: 12px 0;
  border-top: 1px solid var(--trade-rule);
}
.trade-popup__row:last-child {
  border-bottom: 1px solid var(--trade-rule);
}
.trade-popup__row-label {
  margin-bottom: 4px;
  color: var(--color-ada);                   /* 11.5:1 on white */
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.trade-popup__row-text {
  font-size: 15px;
  line-height: 1.45;
}

/* Bottom band */
.trade-popup__cta {
  grid-area: cta;
  padding: 20px var(--trade-pad) 24px;
  border-top: 2px solid var(--color-foreground);
  background-color: var(--color-primary);
}
.trade-popup__cta-text {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.trade-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Two classes so a:visited { color: unset } does not win */
.trade-popup .trade-popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 2px solid var(--color-foreground);
  font-family: var(--font-family-content);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.trade-popup .trade-popup__btn--dark {
  background-color: var(--color-foreground);
  color: var(--color-white);
}
.trade-popup .trade-popup__btn--outline {
  background-color: transparent;
  color: var(--color-foreground);
}
.trade-popup .trade-popup__btn--dark:hover {
  background-color: transparent;
  color: var(--color-foreground);
}
.trade-popup .trade-popup__btn--outline:hover {
  background-color: var(--color-foreground);
  color: var(--color-primary);
}
.trade-popup__btn-icon {
  flex: 0 0 auto;
}

/* Section reached from a popup button: focused for screen readers and the
   keyboard (tabindex -1, js), no ring around the whole section */
[data-focus-target]:focus {
  outline: none;
  box-shadow: none;
}

/* 768px and up: centered box */
@media (min-width: 768px) {
  .trade-popup {
    --trade-pad: 28px;
    width: min(1080px, calc(100% - 48px));
    /* Not "auto": a modal <dialog> is fixed with top and bottom at 0, so an auto
       height stretches it to max-height and leaves empty space under short content.
       fit-content (the browser default for dialogs) sizes it to its content. */
    height: -webkit-fit-content;
    height: fit-content;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
  }
  .trade-popup[open] {
    animation-name: trade-popup-in;
  }
  @keyframes trade-popup-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
  .trade-popup__box {
    display: block;
    min-height: 0;
  }

  /* Head: eyebrow + title, Close on the right */
  .trade-popup__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow close"
      "title   close";
    column-gap: 24px;
    padding: 28px var(--trade-pad) 24px;
    border-bottom: 2px solid var(--color-foreground);
  }
  .trade-popup__eyebrow,
  .trade-popup__close-cell {
    position: static;
    background: none;
  }
  .trade-popup__eyebrow {
    padding: 0;
    margin-bottom: 6px;
    color: var(--color-ada);
  }
  .trade-popup__close-cell {
    align-items: flex-start;
    padding: 0;
  }
  .trade-popup__close {
    --focus-ring-color: var(--color-tertiary);
    --focus-ring-halo: var(--color-white);
    color: var(--color-foreground);
  }
  .trade-popup__title {
    padding: 0;
    font-size: 40px;
  }

  /* Intro: photo | text */
  .trade-popup__intro {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-areas: "media lead";
    gap: 28px;
    align-items: start;
    padding: 24px var(--trade-pad);
    border-bottom: 1px solid var(--trade-rule);
  }
  .trade-popup__intro--no-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead";
  }
  .trade-popup__media {
    aspect-ratio: 3 / 2;
  }
  .trade-popup__lead {
    max-width: 30rem;
    padding: 0;
    border: 0;
  }
  .trade-popup__subtitle {
    font-size: 21px;
  }

  /* Snapshot | how it works */
  .trade-popup__details {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 22px var(--trade-pad) 28px;
  }
  .trade-popup__details--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .trade-popup__snapshot {
    padding: 20px;
  }
  .trade-popup__section-title {
    font-size: 21px;
  }
  .trade-popup__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 16px;
  }
  .trade-popup__row-label {
    margin: 0;
  }

  /* Band: text left, buttons right */
  .trade-popup__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 18px var(--trade-pad);
  }
  .trade-popup__cta-text {
    margin: 0;
  }
  .trade-popup__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .trade-popup .trade-popup__btn {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trade-popup[open] {
    animation: none;
  }
  .trade-popup__close-icon,
  .trade-popup .trade-popup__btn {
    transition: none;
  }
}
@media (forced-colors: active) {
  .trade-popup {
    border: 2px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   VIDEO PLAYER: bechtel_video_player() (inc/template-media.php) + Plyr.
   Shared by popups and by on-page players (video grid).
   -------------------------------------------------------------------------- */
/* 16:9 box reserved before the player exists, so nothing jumps when it loads */
.video-player {
  --plyr-color-main: var(--color-secondary);        /* Plyr accent: control bar, progress */
  --plyr-font-family: var(--font-family-content);
  /* Large play icon: Plyr overlaid button and poster button share these */
  --video-play-size: 36px;
  --video-play-color: #9DB3B5;
  --video-play-color-hover: #fff;
  --video-play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Ccircle cx='18' cy='18' r='15' stroke='%23000' stroke-width='2.25'/%3E%3Cpath d='M15 12.75 24 18l-9 5.25z' fill='%23000'/%3E%3C/svg%3E");
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-tertiary);
}
.video-player > video.video-player__media,
.video-player > .plyr {
  display: block;
  width: 100%;
  height: 100%;
}
/* YouTube/Vimeo before Plyr takes over (or if it never loads): a plain link */
.video-player > div.video-player__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  text-align: center;
}
.video-player .video-player__fallback {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.video-player :focus-visible {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
}

/* Large play icon. ONE rule for both buttons so they always look the same:
   - Plyr's overlaid button (popups, and on-page players once built);
   - the poster button (.video-player__play), shown before Plyr exists.
   Drawn as a mask: the color comes from the button's `color`. */
.video-player .plyr__control--overlaid::before,
.video-player .video-player__play-icon {
  content: "";
  position: static;
  display: block;
  width: var(--video-play-size);
  height: var(--video-play-size);
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  -webkit-mask: var(--video-play-icon) center / contain no-repeat;
  mask: var(--video-play-icon) center / contain no-repeat;
  transform: none;
}

/* Plyr overlaid button. Plyr reads its colors from custom properties, so they are
   set on the button itself: this wins whatever the order or specificity in plyr.css.
   The small play button in the control bar is not affected. */
.video-player .plyr__control--overlaid {
  --plyr-video-control-background-hover: transparent;
  --plyr-video-control-color: var(--video-play-color);
  --plyr-video-control-color-hover: var(--video-play-color-hover);
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  opacity: 1;
}
.video-player .plyr--playing .plyr__control--overlaid {
  opacity: 0;
}
/* Hide the sprite icon: the custom one is drawn by ::before */
.video-player .plyr__control--overlaid svg,
.video-player .plyr__control--overlaid use {
  display: none !important;
}

/* Poster button (on-page players, and grid cards that open a popup).
   Same colors and hover/focus behavior as the Plyr button above. */
.video-player .video-player__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;               /* also right for the mobile "button { width: 100% }" */
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--color-tertiary);
  color: var(--video-play-color);
  cursor: pointer;
  transition: color 0.3s ease;
}
.video-player .video-player__play:hover,
.video-player .video-player__play:focus-visible {
  color: var(--video-play-color-hover);
}
.video-player__play-icon::before {
  content: none;
}
.video-player__play[hidden] {
  display: none;
}
.video-player__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
/* The icon is above the poster */
.video-player__play-icon {
  position: relative;
  z-index: 1;
}
.video-player__play:focus-visible {
  outline-offset: -6px;
  box-shadow: none;
}
@media (hover: hover) {
  .video-player__play:hover .video-player__poster {
    transform: scale(1.04);
  }
}
/* Without JS the button could do nothing: leave the native video or the link reachable */
html:not(.js) .video-player__play {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-player__poster,
  .video-player .video-player__play {
    transition: none;
  }
  .video-player__play:hover .video-player__poster {
    transform: none;
  }
}
/* Plyr poster (YouTube/Vimeo thumbnail or poster image) fills the box */
.plyr__poster {
  background-size: cover !important;
}

/* --------------------------------------------------------------------------
   STATS: blocks/stats/stats.php
   Same section, header and buttons as Cards (.cards-section), but its own
   columns and gaps (--stats-*), so nothing here touches the other card blocks.
   --cards-cols (stats per row on desktop) comes inline from the block.
   -------------------------------------------------------------------------- */
.cards-section--stats {
  --stats-size: 40px;                          /* figure size */
  --stats-n: min(var(--cards-cols), 2);        /* stats per row right now (set per breakpoint) */
  --stats-gap-x: 16px;                         /* column gap */
  --stats-gap-y: 28px;                         /* row gap */
}
.cards-section--stats .cards-section__header {
  margin-bottom: 35px;
}
/* Two classes: beats the base .cards-section__grid gap */
.cards-section--stats .cards-section__grid {
  gap: var(--stats-gap-y) var(--stats-gap-x);
}
.cards-section__stat {
  flex: 0 0 calc((100% - (var(--stats-n) - 1) * var(--stats-gap-x)) / var(--stats-n));
  min-width: 0;
  padding-top: 8px;
  border-top: 3px solid var(--color-foreground);
}
.cards-section__stat-value {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--stats-size);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;          /* digits keep their width while counting */
  overflow-wrap: anywhere;
}
.cards-section__stat-label {
  max-width: 20rem;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.4;
}
.cards-section--card-center .cards-section__stat {
  text-align: center;
}
.cards-section--card-center .cards-section__stat-label {
  margin-inline: auto;
}
.cards-section__source {
  margin: 18px 0 0;
  color: var(--color-gray-soft);               /* #4A4A46 on primary: 5.64:1, on white: 8.9:1 */
  font-size: 12px;
  line-height: 1.4;
}
.cards-section--h-middle .cards-section__source { text-align: center; }
.cards-section--h-right .cards-section__source { text-align: right; }
.cards-section--dark .cards-section__source {
  color: var(--color-light);
}
@media (min-width: 992px) and (max-width: 1198.98px) {
  .site-header__logo-img{
        height: auto;
    max-width: 158px;
  }
}
@media (min-width: 992px) and (max-width: 1059.98px) {
  .site-nav__list > li > a{
    font-size: 11px !important;
  }
}
/* Stats breakpoints: 2 per row on phones and tablets, up to 4 on desktop,
   the full number chosen in the block from 1200px */
@media (max-width: 767.98px) {
  .cards-section--stats {
    --stats-size: 26px;
  }
}
@media (max-width: 575.98px) {
  
  .cards-section__stat-label {
    max-width: 100%;
  }
  .cards-section__stat-label {
  margin: 10px 0 0;
  font-size: 14px;
}
.columns-section__divider{
  margin: 28px 0 18px;
}
.columns-section__grid{
  gap: 16px;
}

}
@media (max-width: 480.98px) {
.cards-section--stats .cards-section__grid{
  flex-direction: column;
}
}
@media (min-width: 768px) {
  .cards-section--stats {
    --stats-gap-x: 28px;
    --stats-gap-y: 36px;
  }
}
@media (min-width: 992px) {
  .cards-section--stats {
    --stats-n: min(var(--cards-cols), 4);
    --stats-gap-x: 40px;
  }
  .cards-section__source{
    margin-top: 51px;
  }
}
@media (min-width: 1200px) {
  .cards-section--stats {
    --stats-n: var(--cards-cols);
  }
}

/* --------------------------------------------------------------------------
   VIDEO GRID: blocks/video-grid/video-grid.php
   Same section, header, grid and buttons as Cards (.cards-section).
   The player is the shared .video-player (see "VIDEO PLAYER").
   -------------------------------------------------------------------------- */
.cards-section--video {
  --cards-gap: 22px;
  --video-card-ratio: 16 / 9;                       /* media box of every video */
  --video-card-quote-bg: var(--color-gray-soft);    /* quote badge, white text on it */
}
/* No card frame: media + text sit straight on the section background */
.cards-section--video .video-card {
  border: 0;
  background-color: transparent;
  color: inherit;
}
.video-card__media {
  position: relative;
  aspect-ratio: var(--video-card-ratio);
  overflow: hidden;
  /* Placeholder tint that works on light and dark sections */
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.video-card__media > .video-player {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background-color: transparent;
}
.video-card__media .video-player__play {
  background-color: transparent;
}
.video-card__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Quote badge over the video. Clicks go through to the play button. */
.video-card__quote {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 5px 10px;
  background-color: var(--color-gray-alt);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}
/* Hidden once the video starts in place, so it never covers the controls */
.video-player.is-active + .video-card__quote {
  display: none;
}
.cards-section--video .cards-section__body {
  padding: 14px 0 0;
}
.cards-section--video .cards-section__title {
  margin-bottom: 8px;
}

/* Buttons alignment set apart from the text alignment (.cards-section--btn-*).
   After the .cards-section--h-* rules on purpose: same specificity, so these win. */
.cards-section--btn-left .cards-section__buttons { justify-content: flex-start; align-items: flex-start; }
.cards-section--btn-middle .cards-section__buttons { justify-content: center; align-items: center; }
.cards-section--btn-right .cards-section__buttons { justify-content: flex-end; align-items: flex-end; }

/* The global mobile rule "button { width: 100% }" would stretch Plyr's control buttons */
@media (max-width: 575.98px) {
  .plyr button {
    width: auto;
  }
}
/* --------------------------------------------------------------------------
   COMPARISON TABLE: blocks/comparison-table/comparison-table.php
   Same section, header, note and buttons as Cards (.cards-section).
   Wider than its box: scrolls sideways, first column kept in view.
   -------------------------------------------------------------------------- */
.cards-section--table {
  --cards-bg: var(--color-white);
  --table-min: 760px;                        /* block field: below this, scroll */
  --table-head-bg: var(--color-foreground);
  --table-head-color: var(--color-primary);  /* #FBC725 on #111: 12.6:1 */
  --table-border: var(--color-light);
  --table-cell-bg: var(--color-white);
}
.compare-table {
  position: relative;
}
.compare-table table tbody tr:nth-child(odd) th,
.compare-table table tbody tr:nth-child(odd) td { background: #F7F6F2; }
.compare-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--table-border);
  background-color: var(--table-cell-bg);
  color: var(--color-foreground);            /* stays dark on dark sections: the table is white */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray) var(--color-light);
}
.compare-table__scroll::-webkit-scrollbar {
  height: 8px;
}
.compare-table__scroll::-webkit-scrollbar-track {
  background-color: var(--color-light);
}
.compare-table__scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
}
.compare-table__scroll:focus-visible {
  outline-offset: 3px;
}
.compare-table__table {
  width: 100%;
  min-width: var(--table-min);
  margin: 0;
  border-collapse: separate;                 /* needed for the sticky column borders */
  border-spacing: 0;
  table-layout: fixed;                       /* equal columns, like the design */
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.compare-table__table th,
.compare-table__table td {
  padding: 15px;
  border-bottom: 1px solid var(--table-border);
  vertical-align: top;
  background-color: var(--table-cell-bg);
  font-weight: 400;

}
.compare-table__table td{
    color: var(--color-gray-soft);
}
.compare-table__table td a{
  color: var(--color-gray-soft);
  text-decoration: underline;
}
.compare-table__table td a:hover{
  color: var(--color-black);
  text-decoration: none;
}
.compare-table__table tbody tr:last-child > * {
  border-bottom: 0;
}
.compare-table__table thead th {
  padding-block: 14px;
  border-bottom: 0;
  background-color: var(--table-head-bg);
  color: var(--table-head-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}
.compare-table__table tbody th {
  font-weight: 700;
}
/* Row reached through its anchor (#pathway-apprenticeship) */
.compare-table__table tbody tr:target > * {
  background-color: var(--color-accent);
}

/* First column kept in view while the table scrolls */
.compare-table--sticky .compare-table__table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid transparent;
}
/* Edge shadow on the first column once the table has scrolled (class set by js) */
.compare-table--sticky.is-scrolled .compare-table__table tr > :first-child {
 border-right-color: var(--table-border);
}
/* Right edge shadow: there is more to the right (class set by js).
   A dark shade, so it reads on the black header and on the white rows alike. */
.compare-table__frame {
  position: relative;
}
.compare-table__frame::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.compare-table.is-scrollable:not(.is-at-end) .compare-table__frame::after {
  opacity: 1;
}
.compare-table__hint {
  display: none;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.compare-table.is-scrollable .compare-table__hint {
  display: block;
}
.cards-section--h-middle .compare-table__hint { text-align: center; }
.cards-section--h-right .compare-table__hint { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .compare-table__frame::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  .compare-table__table th,
  .compare-table__table td {
    border: 1px solid CanvasText;
  }
}
/* Column name inside each cell: phones only (below) */
.compare-table__label {
  display: none;
}

/* Phones: one card per row. Row name in a dark header, then each value under its
   column name, divided by thin lines. Nothing scrolls sideways any more.
   Table semantics stay: the PHP sets the ARIA roles, the header row is only hidden
   visually (screen readers still use it), and .compare-table__label is aria-hidden. */
@media (max-width: 767.98px) {
  .compare-table__scroll {
    overflow: visible;
    border: 0;
    background-color: transparent;
  }
  .compare-table__table,
  .compare-table__table tbody,
  .compare-table__table tr,
  .compare-table__table th,
  .compare-table__table td {
    display: block;
    width: auto;
  }
  .compare-table__table {
    min-width: 0;
    font-size: 16px;
    line-height: 1.45;
  }
  /* Header row: kept for screen readers only */
  .compare-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .compare-table__table tbody tr {
    margin-bottom: 24px;
    padding-bottom: 6px;
    border: 1px solid var(--table-border);
    background-color: var(--table-cell-bg);
    color: var(--color-foreground);
  }
  .compare-table__table tbody tr:last-child {
    margin-bottom: 0;
  }
  /* Card header: the row name */
  .compare-table--sticky .compare-table__table tr > :first-child,
  .compare-table__table tbody th {
    position: static;
    padding: 14px 20px;
    border: 0;
    background-color: var(--table-head-bg);
    color: var(--table-head-color);           /* #FBC725 on #111: 12.6:1 */
    font-family: var(--font-family-heading);
    font-size: 18px;
    line-height: 1.25;
  }
  /* One value per block, inset lines between them */
  .compare-table__table td {
    margin-inline: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--table-border);
    background-color: transparent;
    color: var(--color-foreground);
  }
  /* The desktop rule "last row: no bottom line" must not remove the lines inside the last card */
  .compare-table__table tbody tr:last-child > td {
    border-bottom: 1px solid var(--table-border);
  }
  .compare-table__table tbody tr > td:last-child {
    border-bottom: 0;
  }
  .compare-table__label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-ada);                   /* 11.5:1 on white */
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
  }
  /* Row reached through its anchor: tint the card, keep the dark header */
  .compare-table__table tbody tr:target {
    background-color: var(--color-accent);
  }
  .compare-table__table tbody tr:target > td {
    background-color: transparent;
  }
  .compare-table__table tbody tr:target > th {
    background-color: var(--table-head-bg);
  }
  .compare-table__hint {
    display: none !important;
  }
}
/* --------------------------------------------------------------------------
   RESOURCES: blocks/resources/resources.php
   Same section, header, grid and buttons as Cards (.cards-section).
   Each card has its own background (--resource-card-bg, set inline).
   -------------------------------------------------------------------------- */
.cards-section--resources {
  --cards-bg: var(--color-tertiary);
  --cards-gap: 40px;
}
.cards-section--resources .resource-card {
  --resource-link: var(--color-secondary);
  box-sizing: border-box;      /* padding inside the grid width, even before Bootstrap's reset loads */
  
  border: 0;
  background-color: var(--resource-card-bg, var(--color-white));
  color: var(--color-foreground);
}
.cards-section--resources .resource-card.resource-card--padded{
  padding: 32px 24px;
}
/* Link color picked by the block so it reaches 4.5:1 on the card.
   Same specificity as the rule above and after it, so these win. */
.cards-section--resources .resource-card--link-ada { --resource-link: var(--color-ada); }   /* light non-white cards, e.g. accent: 8.58:1 */
.cards-section--resources .resource-card--link-light { --resource-link: var(--color-primary); }
/* Dark card: light text and inverted focus ring */
.cards-section--resources .resource-card--dark {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  color: var(--color-white);
}
.resource-card__title {
  margin: 0 0 18px;
  line-height: 1.15;
}
.resource-card__description {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}
.resource-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #2F5660;
}
.resource-card__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid #2F5660;
}
.resource-card__info {
  flex: 1 1 14rem;
  min-width: 0;
}
.resource-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.resource-card__meta {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.4;
}
/* Two classes so a:visited { color: unset } does not win */
.resource-card .resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-block: 6px;          /* comfortable target without changing the row height much */
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.resource-card .resource-card__link:hover,
.resource-card .resource-card__link:focus-visible {
  text-decoration: underline;
}
.resource-card__icon {
  flex: 0 0 auto;
  width: 9px;                  /* the SVG now scales (viewBox fixed in resources.php): design size */
  height: 9px;
}
.resource-card__note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 992px) {
  .cards-section--resources .resource-card.resource-card--padded {
    padding: 26px 30px 34px;
  }

}

/* Phones and tablets: the link goes under the name and the place */
@media (max-width: 991.98px) {
  .resource-card__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .site-header__logo-title{
    font-size: 11px;
  }
  .resource-card__info {
    flex: none;
    width: 100%;
  }
  .hero-section--under-header .hero-section__text {
    padding-top: 0;
}
}
/* Phones (one card per row): a list-only card without padding continues the list of
   the card above it. No gap and no top line, so there is one divider, not two. */
@media (max-width: 575.98px) {
  .cards-section--resources .resource-card:not(.resource-card--padded) + .resource-card--list-only:not(.resource-card--padded) {
    margin-top: calc(var(--cards-gap) * -1);
  }
  .cards-section--resources .resource-card:not(.resource-card--padded) + .resource-card--list-only:not(.resource-card--padded) .resource-card__list {
    border-top: 0;
  }
}

/* --------------------------------------------------------------------------
   EVENTS: blocks/events/events.php
   Same section and header as Cards (.cards-section).
   Rows: date badge | name + host | place | link. Stacked under 768px.
   -------------------------------------------------------------------------- */
.cards-section--events {
  --cards-bg: var(--color-white);
  --events-rule: #B0935A;                    /* line above the list (same as the Columns divider) */
  --events-row-line: color-mix(in srgb, currentColor 14%, transparent);
  --events-link: var(--color-secondary);
}
/* Link color picked by the block so it reaches 4.5:1 on the section background */
.cards-section--events.events-section--link-ada { --events-link: var(--color-ada); }
.cards-section--events.events-section--link-light { --events-link: var(--color-primary); }

.events-section__subtext {
  margin: 12px 0 0;
  color: var(--color-gray-soft);             /* #4A4A46 on white: 8.9:1 */
  font-size: 15px;
  line-height: 1.45;
}
.cards-section--dark .events-section__subtext {
  color: var(--color-light);
}

.events-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--events-rule);
}
.events-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas:
    "date info"
    "date location"
    "date link";
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--events-row-line);
}
/* Rows past the first N: hidden until the toggle opens them (only when JS runs) */
.js .events-section__list:not(.is-expanded) .events-item--extra {
  display: none;
}

/* Date badge */
.events-item__date {
  grid-area: date;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 6px 4px;
  border: 1px solid var(--color-foreground);
  background-color: var(--color-primary);
  color: var(--color-foreground);
  text-align: center;
  line-height: 1;
}
.events-item__month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.events-item__day {
  margin-top: 2px;
  font-family: var(--font-family-heading);
  font-size: 22px;
  font-weight: 700;
}
.events-item__date--tbc .events-item__day {
  font-size: 16px;
}

.events-item__info {
  grid-area: info;
  min-width: 0;
}
.events-item__name {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}
.events-item__host {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.events-item__location {
  grid-area: location;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.events-item__location:empty {
  display: none;
}
/* Two classes so a:visited { color: unset } does not win */
.events-item .events-item__link {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
  color: var(--events-link);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.events-item .events-item__link:hover,
.events-item .events-item__link:focus-visible {
  text-decoration: underline;
}
.events-item__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* Footer: toggle on the left, buttons on the right */
.events-section__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.events-section__footer .cards-section__buttons {
  margin: 0 0 0 auto;
}
/* Toggle: outline button with a chevron that turns when the list is open */
.cards-section--events .events-section__toggle {
  gap: 12px;
  font-family: var(--font-family-content);
  background-color: var(--color-white) !important;
}
.cards-section--events .events-section__toggle:hover,
.cards-section--events .events-section__toggle:focus-visible {
  background-color: var(--color-primary) !important;
}
.events-section__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.events-section__toggle[aria-expanded="true"] .events-section__chevron {
  transform: translateY(2px) rotate(-135deg);
}
/* Without JS every event is already visible: nothing to toggle */
html:not(.js) .events-section__toggle {
  display: none;
}

@media (min-width: 768px) {
  .events-item {
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 14rem) 10rem;
    grid-template-areas: "date info location link";
    align-items: center;
    column-gap: 24px;
  }
  .events-item .events-item__link {
    justify-self: end;
  }
}
@media (min-width: 992px) {
  .events-item {
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 15rem) 10rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .events-section__chevron {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  /* Stacked footer: buttons full width under the toggle (global .wrap-btn rule) */
  .events-section__footer .cards-section__buttons {
    margin-left: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   SIGNUP: blocks/signup/signup.php
   Left: text, numbered steps, buttons. Right: box with a Gravity Form.
   -------------------------------------------------------------------------- */
.signup-section {
  --signup-bg: var(--color-foreground);
  --signup-error: #FF9E8F;                   /* error text on the dark box: 8.2:1 */
  position: relative;
  background-color: var(--signup-bg);
  color: var(--color-foreground);
}
.signup-section--dark {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  color: var(--color-white);
}
.signup-section--dark .eyebrow {
  color: var(--color-primary);
}
.signup-section__inner {
  display: grid;
  gap: 48px;
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}
.signup-section__content {
  min-width: 0;
}
.signup-section__heading {
  margin: 0 0 20px;
  line-height: 1.15;
}
.signup-section__description {
  max-width: 38rem;
  font-size: 16px;
  line-height: 1.5;
}
.signup-section--dark .signup-section__description b,
.signup-section--dark .signup-section__description strong {
  color: inherit;
}

/* Numbered steps: 01, 02, 03 in the theme yellow */
.signup-section__steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: signup-step;
}
.signup-section__step {
  position: relative;
  padding: 6px 0 6px 48px;
  font-size: 16px;
  line-height: 1.45;
  counter-increment: signup-step;
}
.signup-section__step::before {
  content: counter(signup-step, decimal-leading-zero);
  position: absolute;
  top: 6px;
  left: 0;
  color: var(--color-ada);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.signup-section--dark .signup-section__step::before {
  color: var(--color-primary);
}
/* Two classes so a:visited { color: unset } does not win */
.signup-section .signup-section__step-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.signup-section .signup-section__step-link:hover {
  text-decoration-thickness: 2px;
  text-decoration: underline;
}
.signup-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Form box */
.signup-section__box {
  box-sizing: border-box;
  min-width: 0;
  padding: 28px 22px 32px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background-color: color-mix(in srgb, currentColor 4%, transparent);
}
.signup-section__box-heading {
  margin: 0 0 18px;
  line-height: 1.15;
}
.signup-section__box-text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}
.signup-section__notice {
  margin: 0;
  padding: 12px;
  border: 1px dashed currentColor;
  font-size: 14px;
}
/* Only one column filled: no empty half */
.signup-section--single .signup-section__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* Right column in image mode (the form box above stays for form mode).
   Shape from the block (--signup-img-ratio): the box has its size before the
   image loads, so nothing moves (CLS). Natural: the width/height attributes do it. */
.signup-section__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: var(--signup-img-ratio, auto);
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.signup-section__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--signup-img-focus, center center);
}
.signup-section__media--natural .signup-section__img,
.signup-section__media--fill .signup-section__img {
  height: auto;
}
/* "Hide image on mobile": stacked layout only. The image is lazy, so a hidden one is never downloaded. */
@media (max-width: 991.98px) {
  .signup-section--media-desktop-only .signup-section__media {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Gravity Form inside the box (Gravity Forms 2.5+ markup, legacy markup off).
   Row 1: email field | submit button. Row 2: consent. Anything else below.
   The form's own wrappers are flattened (display: contents) so the email
   field and the button, which live in different wrappers, share one grid.
   Every selector starts with .signup-section .signup-form .gform_wrapper: it beats the
   Gravity Forms theme rules and never touches other forms on the site.
   -------------------------------------------------------------------------- */
.signup-section .signup-form .gform_wrapper {
  margin: 0;
}
/* The form always spans the whole box */
.signup-section .signup-form .gform_wrapper,
.signup-section .signup-form .gform_wrapper form {
  width: 100% !important;
  max-width: none !important;
}
/* "* indicates required fields": the design has no room for it. The fields keep
   aria-required, so screen readers still announce them as required. */
.signup-section .signup-form .gform_wrapper .gform_required_legend {
  display: none;
}
.signup-section .signup-form .gform_wrapper form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-auto-columns: 0;
  column-gap: 10px;
  row-gap: 16px;
  align-items: start;
}
.signup-section .signup-form .gform_wrapper .gform_body,
.signup-section .signup-form .gform_wrapper .gform_fields {
  display: contents;
}
/* Default: full width, after the email row */
.signup-section .signup-form .gform_wrapper form > *,
.signup-section .signup-form .gform_wrapper .gform_fields > .gfield {
  grid-column: 1 / -1 !important;      /* never Gravity's "span 12": it would add empty columns */
  order: 4;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.signup-section .signup-form .gform_wrapper .gform_validation_errors {
  order: 0;
}
.signup-section .signup-form .gform_wrapper .gform_fields > .gfield.gfield--type-email {
  grid-column: 1 / 2 !important;
  order: 1;
}
.signup-section .signup-form .gform_wrapper form > .gform_footer {
  grid-column: 2 / 3 !important;
  order: 2;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
}
/* Only the button sizes the button column. Anything else Gravity puts in the
   footer (spinner, loader) sits under it without widening the column. */
.signup-section .signup-form .gform_wrapper .gform_footer > :not(.gform_button) {
  position: absolute;
  top: 100%;
  left: 0;
}
.signup-section .signup-form .gform_wrapper .gform_fields > .gfield.gfield--type-consent {
  order: 3;
}

/* Things Gravity Forms hides with its own CSS: hidden here too, in case its CSS is off */
.signup-section .signup-form .gform_wrapper .gform_validation_container,
.signup-section .signup-form .gform_wrapper .gfield--type-honeypot,
.signup-section .signup-form .gform_wrapper .gfield_visibility_hidden,
.signup-section .signup-form .gform_wrapper .gform_hidden,
.signup-section .signup-form .gform_wrapper .gfield--type-hidden {
  display: none !important;
}
/* Label set to "Hidden" in the form editor: still read by screen readers */
.signup-section .signup-form .gform_wrapper .hidden_label > .gfield_label,
.signup-section .signup-form .gform_wrapper .hidden_label > legend.gfield_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
.signup-section .signup-form .gform_wrapper .gfield_label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}
.signup-section .signup-form .gform_wrapper .gfield_required,
.signup-section .signup-form .gform_wrapper .gfield_required .gfield_required_asterisk {
  margin-left: 4px;
  color: var(--signup-error);                /* GF's red (#c02b0a) is unreadable on the dark box */
  font-weight: 400;
}
.signup-section .signup-form .gform_wrapper .gfield_description {
  margin-top: 6px;
  font-size: 13px;
}

/* Email input */
.signup-section .signup-form .gform_wrapper .ginput_container input[type="email"],
.signup-section .signup-form .gform_wrapper .ginput_container input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--color-white);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-foreground);
  font-family: var(--font-family-content);
  font-size: 16px;                         /* 16px: no zoom on focus in iOS */
  box-shadow: none;
}
.signup-section .signup-form .gform_wrapper .ginput_container input::placeholder {
  color: #6B6B66;                          /* 5.3:1 on white */
  opacity: 1;
}
.signup-section .signup-form .gform_wrapper .ginput_container input:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring-halo);
}

/* Submit button: same look as .button.primary_filled */
.signup-section .signup-form .gform_wrapper .gform_footer .gform_button {
  box-sizing: border-box;
  width: auto;
  height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 2px solid var(--color-primary);
  border-radius: 0;
  background-color: var(--color-primary);
  color: var(--color-foreground);
  font-family: var(--font-family-content);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.signup-section .signup-form .gform_wrapper .gform_footer .gform_button:hover {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.signup-section .signup-form .gform_wrapper .gform_footer .gform_button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring-halo);
}
.signup-section .signup-form .gform_wrapper .gform_ajax_spinner {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

/* Consent checkbox */
.signup-section .signup-form .gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.signup-section .signup-form .gform_wrapper .ginput_container_consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.signup-section .signup-form .gform_wrapper .gfield_consent_label {
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.signup-section .signup-form .gform_wrapper .gfield_consent_label a {
  color: inherit;
  text-decoration: underline;
}

/* Errors */
.signup-section .signup-form .gform_wrapper .gform_validation_errors {
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--signup-error);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--signup-error);
}
.signup-section .signup-form .gform_wrapper .gform_validation_errors ol {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.signup-section .signup-form .gform_wrapper .gform_validation_errors li,
.signup-section .signup-form .gform_wrapper .gform_validation_errors a {
  color: inherit;
}
.signup-section .signup-form .gform_wrapper .gform_validation_errors .gform-icon {
  display: none;
}
.signup-section .signup-form .gform_wrapper .gform_submission_error {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.signup-section .signup-form .gform_wrapper .gfield_validation_message,
.signup-section .signup-form .gform_wrapper .validation_message {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--signup-error);
  font-size: 13px;
  font-weight: 700;
}
.signup-section .signup-form .gform_wrapper .gfield_error input[type="email"],
.signup-section .signup-form .gform_wrapper .gfield_error input[type="text"] {
  border: 2px solid var(--signup-error);
}
/* Gravity tints the whole field with a light background on error: not on the dark box */
.signup-section .signup-form .gform_wrapper .gfield_error {
  background: none;
  border: 0;
}
/* Light section: errors in the dark red of the palette */
.signup-section:not(.signup-section--dark) {
  --signup-error: var(--color-ada);
}

/* After sending */
.signup-section .signup-form .gform_confirmation_message {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

/* Desktop: two columns. Widths from the block (--signup-cols, inline); 50 / 50 without it */
@media (min-width: 992px) {
  .signup-section__inner {
    grid-template-columns: var(--signup-cols, minmax(0, 1fr) minmax(0, 1fr));
    align-items: start;
    gap: 64px;
  }
  .signup-section--v-middle .signup-section__inner {
    align-items: center;
  }
  /* Image "Fill column height": as tall as the text column, cropped */
  .signup-section__media--fill {
    align-self: stretch;
    min-height: 280px;
  }
  .signup-section__media--fill .signup-section__img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .signup-section__box {
    padding: 32px 28px 40px;
  }
}
/* Small phones: button under the email field, full width */
@media (max-width: 479.98px) {
  .signup-section .signup-form .gform_wrapper form {
    grid-template-columns: minmax(0, 1fr);
  }
  .signup-section .signup-form .gform_wrapper form > .gform_footer {
    grid-column: 1 / -1 !important;
  }
  .signup-section .signup-form .gform_wrapper .gform_footer .gform_button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signup-section .signup-form .gform_wrapper .gform_footer .gform_button {
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   BACK & FORTH: blocks/back-and-forth/back-and-forth.php
   A box with a text column and an image column (widths and side set in the block),
   a line of small text, and an optional full-width band underneath whose content
   lines up with the box (same container, same inner padding and columns).
   Below 992px it stacks: text, image, small text ("Image first on mobile" moves
   the image above the text; the small text always stays last).
   -------------------------------------------------------------------------- */
.back-forth {
  /* Defaults. The block overrides them inline when the fields have a value */
  --back-forth-bg: var(--color-tertiary);
  --back-forth-band-bg: var(--color-primary);
  --back-forth-section-bg: transparent;
  --back-forth-text: 67fr;
  --back-forth-media: 33fr;
  --back-forth-focus: center center;
  --back-forth-gap: clamp(32px, 4vw, 91px);
  --back-forth-pad: clamp(18px, 3.5vw, 48px);
  position: relative;
  background-color: var(--back-forth-section-bg);
}
.back-forth__inner {
  max-width: var(--header-max);
  margin-inline: auto;
      padding-inline: var(--header-pad);
}

/* Box. Mobile: one column. The text wrapper is flattened (display: contents) so
   its two parts and the image are siblings that "order" can arrange. */
.back-forth__panel {
  --back-forth-rule: #2F5660;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: var(--back-forth-bg);
  color: var(--color-foreground);
}
.back-forth__panel--dark {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  color: var(--color-white);
}
.back-forth__panel--dark .eyebrow {
  color: var(--color-primary);           /* 8.83:1 on the default teal */
}
.back-forth__panel--dark .text b,
.back-forth__panel--dark .text strong {
  color: inherit;
}
.back-forth__text {
  display: contents;
}
.back-forth__content {
  order: 1;
  min-width: 0;
}
.back-forth__media {
  order: 2;
  min-width: 0;
}
.back-forth__note {
  order: 3;
}
.back-forth--reverse-mobile .back-forth__media {
  order: 0;
}

/* Text column */
.back-forth__heading {
  margin: 0 0 34px;
  line-height: 1.15;
}
.back-forth__description {
  margin-bottom: 32px;
  font-size: 19px;
  line-height: 1.5;
}
.back-forth__description > :last-child {
  margin-bottom: 0;
}

/* List: a rule above, below and between the items */
.back-forth__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--back-forth-rule);
  counter-reset: back-forth-item;
}
.back-forth__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--back-forth-rule);
  font-size: 19px;
  line-height: 1.4;
}
/* Numbered: 01, 02... in its own column, on the baseline of the first line */
.back-forth__list--numbered .back-forth__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: start;
  counter-increment: back-forth-item;
  column-gap: 30px;
}
.back-forth__list--numbered .back-forth__item::before {
  content: counter(back-forth-item, decimal-leading-zero);
  color: var(--color-ada);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
.back-forth__panel--dark .back-forth__list--numbered .back-forth__item::before {
  color: var(--color-primary);
}
/* Two classes so a:visited { color: unset } does not win. Underlined: a link
   must not rely on color alone (same color as the text here). */
.back-forth .back-forth__item-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.back-forth .back-forth__item-link:hover {
  text-decoration-thickness: 2px;
}
.back-forth__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Image column. Mobile: cropped to the block's proportions (natural when none).
   The box has its size before the image loads, so nothing moves (CLS). */
.back-forth__media {
  position: relative;
  aspect-ratio: var(--back-forth-ratio-mobile, auto);
  overflow: hidden;
}
.back-forth__media picture {
  display: block;
  height: 100%;
}
.back-forth__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--back-forth-focus);
}
.back-forth--img-border .back-forth__media {
  border: 2px solid var(--color-foreground);
}

/* Small text: under the list on desktop, last on mobile */
.back-forth__note {
  margin: 0;
  color: var(--color-gray-soft);         /* #4A4A46 on white: 8.9:1 */
  font-size: 15px;
  line-height: 1.5;
}
.back-forth__panel--dark .back-forth__note {
  color: var(--color-accent);             /* #DEDFD9 on #123038: 11.6:1 */
}


/* Band: full width background. Its content box mirrors the Back & Forth box:
   .back-forth__band-inner = .back-forth__inner (same max width, same side space),
   .back-forth__band-box   = .back-forth__panel (same inner side space, same columns).
   If one of them changes, change its pair too, or the band stops lining up. */
.back-forth__band {
  background-color: var(--back-forth-band-bg);
  color: var(--color-foreground);
}
.back-forth__band-inner {
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}
.back-forth__band-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 27px;
}
.back-forth__band--dark {
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  color: var(--color-white);
}
.back-forth__band-text {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
}
.back-forth .back-forth__band-button {
  gap: 12px;
  width: 100%;
  max-width: 100%;
}
/* Outline button on the band: its default hover fills it with the yellow,
   invisible on the yellow band. Here it fills with the dark foreground instead. */
.back-forth__band .button.primary_outline:hover,
.back-forth__band .button.primary_outline:focus-visible {
  background-color: var(--color-foreground) !important;
  border-color: var(--color-foreground) !important;
  color: var(--color-primary) !important;
}
.back-forth__band--dark .button.primary_outline {
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}
.back-forth__band--dark .button.primary_outline:hover,
.back-forth__band--dark .button.primary_outline:focus-visible {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-foreground) !important;
}

/* Arrow in the band button */
.back-forth__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.back-forth__chevron--right {
  transform: rotate(-45deg);
}
.back-forth__band-button:hover .back-forth__chevron--down,
.back-forth__band-button:focus-visible .back-forth__chevron--down {
  transform: translateY(1px) rotate(45deg);
}
.back-forth__band-button:hover .back-forth__chevron--right,
.back-forth__band-button:focus-visible .back-forth__chevron--right {
  transform: translateX(3px) rotate(-45deg);
}

/* Tablet: band text and button side by side */
@media (min-width: 768px) {
  .back-forth__band-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 52px;
  }
  .back-forth__band-text {
    font-size: clamp(25px, 2.2vw, 34px);
  }
  .back-forth .back-forth__band-button {
    flex: 0 0 auto;
    width: max-content;
  }
}

/* Desktop: two columns */
@media (min-width: 992px) {
  .back-forth__item {
    font-size: 24px;
        padding: 16px 0;
  }
  .back-forth__description{
    font-size: 24px;
  }
  .back-forth__media {
    aspect-ratio: auto;
  }
  .back-forth__list--numbered .back-forth__item {
  column-gap: 58px;
}
.back-forth__list--numbered .back-forth__item::before{
  font-size: 15px;
}

  /* Text column back as one box: content, then the small text under it */
  .back-forth__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }
  .back-forth--v-middle .back-forth__text { justify-content: center; }
  .back-forth--v-bottom .back-forth__text { justify-content: flex-end; }

  /* Text | image, widths from the block */
  .back-forth--split .back-forth__panel {
    display: grid;
    grid-template-columns: minmax(0, var(--back-forth-text)) minmax(0, var(--back-forth-media));
    column-gap: var(--back-forth-gap);
  }
  /* Reversed: image on the left. Same widths, mirrored. */
  .back-forth--split.back-forth--reverse-desktop .back-forth__panel {
    grid-template-columns: minmax(0, var(--back-forth-media)) minmax(0, var(--back-forth-text));
  }
  .back-forth--split.back-forth--reverse-desktop .back-forth__media {
    order: -1;
  }

  /* Image fills the column, as tall as the text column (cropped to fit) */
  .back-forth--img-fill .back-forth__media {
    min-height: 240px;
  }
  .back-forth--img-fill .back-forth__media > img,
  .back-forth--img-fill .back-forth__media > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* Natural proportions: top aligned with the text */
  .back-forth--img-natural .back-forth__media {
    align-self: start;
  }
  .back-forth--img-natural .back-forth__img {
    height: auto;
  }

  /* Band in the same columns as the box: the button lines up with the image.
     Reversed box: the band keeps text left, button right (flex, above). */
  .back-forth--split:not(.back-forth--reverse-desktop) .back-forth__band-box {
    display: grid;
    grid-template-columns: minmax(0, var(--back-forth-text)) minmax(0, var(--back-forth-media));
    column-gap: var(--back-forth-gap);
  }
  .back-forth--split:not(.back-forth--reverse-desktop) .back-forth__band-button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-forth__chevron {
    transition: none;
  }
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
.error-404 {
  background-color: var(--color-accent);
  /* Slides under the transparent header, same contract the hero will use */
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 48px) 0 64px;
}
.error-404__inner {
  display: grid;
  gap: 32px;
  align-items: center;
  max-width: var(--header-max);
  margin-inline: auto;
  padding-inline: var(--header-pad);
}
.error-404__content {
  max-width: 34rem;
}
.error-404__code {
  margin: 0 0 12px;
  color: var(--color-ada); /* #691A0D on accent: 8.58:1 */
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.error-404__title {
  margin: 0 0 12px;
}
.error-404__subtitle {
  margin: 0 0 16px;
  font-family: var(--font-family-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}
.error-404__text {
  margin-bottom: 28px;
}
.error-404__media img {
  display: block;
  width: 100%;
  height: auto;
}
/*--------------------------------------------------------------
# Footer
# footer.php + Theme Settings > Footer. Photo background with a dark
# overlay, partner logos (row or slider), bottom bar with menu and social.
--------------------------------------------------------------*/
.site-footer {
  --footer-overlay: 0.45;                  /* Theme Settings > Footer > Dark overlay */
  --footer-focus: center center;           /* Theme Settings > Footer > Image focus */
  --footer-line: rgb(255 255 255 / 0.7);
  --focus-ring-color: var(--color-white);
  --focus-ring-halo: var(--color-tertiary);
  position: relative;
  isolation: isolate;                      /* the background stays behind the footer only */
  overflow: hidden;
  background-color: var(--color-tertiary); /* while the photo loads, or without one */
  color: var(--color-white);
}
.site-footer--has-bg {
  --footer-min-h: clamp(460px, 75vw, 600px); /* phones and tablets; desktop: 762px (992px query) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;               /* content sits at the bottom of the photo */
  min-height: var(--footer-min-h);
}

/* Background photo: decorative, covers the footer */
.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.site-footer__bg picture,
.site-footer__bg-img {
  display: block;
  width: 100%;
  height: 100%;
}
.site-footer__bg-img {
  object-fit: cover;
  object-position: var(--footer-focus);
}
/* Overlay: even darkening + a stronger shade at the bottom, where the text is */
.site-footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.45) 100%),
    rgb(0 0 0 / var(--footer-overlay));
}

.site-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--header-max);
  margin-inline: auto;
  padding: 48px var(--header-pad) 24px;
}

/* About text (Theme Settings > Footer > About Text): at the top of the footer.
   The inner box fills the footer, so the first block after the text (logos, or
   the bottom bar) is pushed to the bottom: text at the start, slider at the end. */
.site-footer--has-about {
  justify-content: flex-start;
}
.site-footer--has-about .site-footer__inner {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.site-footer__about {
  max-width: 46rem;
  margin-bottom: 48px;
  font-size: 16px;
  line-height: 1.5;
}
.site-footer__about + * {
  margin-top: auto;
}
.site-footer__about > :first-child {
  margin-top: 0;
}
.site-footer__about > :last-child {
  margin-bottom: 0;
}
/* White on the photo: bold text and headings keep the footer color (the global
   .text strong rule makes them dark) */
.site-footer__about.text b,
.site-footer__about.text strong,
.site-footer__about :is(h2, h3, h4, h5, h6) {
  color: inherit;
}
/* Two classes so a:visited { color: unset } does not win */
.site-footer .site-footer__about a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer .site-footer__about a:hover {
  color: var(--color-primary);
}
/* The text sits on the top of the photo: darker there too, not only at the bottom */
.site-footer--has-about .site-footer__bg::after {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0) 65%, rgb(0 0 0 / 0.45) 100%),
    rgb(0 0 0 / var(--footer-overlay));
}

/* Partner logos */
.site-footer__partners-title {
  margin: 0 0 30px;
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Logo slider. Logos per view (--logos-visible): 1 under 400px, 2 on phones,
   3 on tablets, 5 on desktop. Moves only when js/bechtel.js adds .is-animated:
   desktop when "Logos as a slider on desktop" is on, tablets and phones unless
   "Logos as a slider on tablets and phones" is off (then a grid, below).
   Without JS or with reduced motion: a static row that scrolls sideways.
   -------------------------------------------------------------------------- */
.logo-slider {
  --logos-visible: 1;
  --logo-h: 64px;                          /* max logo height */
  --logos-speed: 4s;                       /* seconds per logo: the loop takes count x speed */
  position: relative;
}
.logo-slider__viewport {
  container-type: inline-size;             /* 100cqw = width of the visible area */
  overflow-x: auto;
  scrollbar-width: none;
}
.logo-slider__viewport::-webkit-scrollbar {
  display: none;
}
.logo-slider__track {
  display: flex;
  width: max-content;
  margin-inline: auto;                     /* fewer logos than the row holds: centered */
}
.logo-slider__list {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(100cqw / var(--logos-visible));
  box-sizing: border-box;
  min-height: calc(var(--logo-h) + 16px);
  padding: 0 16px;
}
.logo-slider__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--logo-h);
  object-fit: contain;
}
/* "Show logos in white": any color logo becomes solid white. brightness(0) turns
   every visible pixel black, invert(1) turns black into white; transparency stays.
   Logos marked "Keep colors" (badges with a filled background) are left as they are. */
.logo-slider--white .logo-slider__item:not(.logo-slider__item--colors) .logo-slider__img {
  filter: brightness(0) invert(1);
}
/* Two classes so a:visited { color: unset } does not win */
.logo-slider .logo-slider__link {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  color: inherit;
  transition: opacity 0.2s ease;
}
.logo-slider .logo-slider__link:focus-visible {
  outline-offset: 2px;
}
@media (hover: hover) {
  .logo-slider .logo-slider__link:hover {
    opacity: 0.8;
  }
}

/* The copy that closes the loop only exists while the logos move */
.logo-slider__list--copy {
  display: none;
}
.logo-slider.is-animated .logo-slider__viewport {
  overflow: hidden;
}
.logo-slider.is-animated .logo-slider__track {
  margin-inline: 0;
  animation: logo-slider-scroll calc(var(--logos-count) * var(--logos-speed)) linear infinite;
}
.logo-slider.is-animated .logo-slider__list--copy {
  display: flex;
}
@keyframes logo-slider-scroll {
  to {
    transform: translateX(-50%);           /* exactly one list: the copy takes its place */
  }
}
/* Stops: hover, keyboard focus inside, or out of view (saves CPU) */
.logo-slider.is-offscreen .logo-slider__track,
.logo-slider:focus-within .logo-slider__track {
  animation-play-state: paused;
}
@media (hover: hover) {
  .logo-slider:hover .logo-slider__track {
    animation-play-state: paused;
  }
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--footer-line);
}
.site-footer__copyright {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}
.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Two classes so a:visited { color: unset } does not win */
.site-footer .site-footer__menu a {
  display: inline-block;
  padding-block: 6px;                      /* 24px+ target */
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.site-footer .site-footer__menu a:hover,
.site-footer .site-footer__menu a:focus-visible,
.site-footer .site-footer__menu a[aria-current] {
  text-decoration: underline;
}
.site-footer__social {
  --social-color: var(--color-white);
  --social-hover-color: var(--color-primary);
  --social-target: 24px;
}

/* Phones 400px+: 2 logos */
@media (min-width: 400px) {
  .logo-slider { --logos-visible: 2; }
}
/* Tablets: 3 logos */
@media (min-width: 576px) {
  .logo-slider { --logos-visible: 3; }
}
/* Tablets and phones with the slider off: a static grid, 2 logos per row on
   phones and 3 on tablets. An incomplete last row is centered (flex-wrap). */
@media (max-width: 991.98px) {
  .logo-slider--mobile-grid .logo-slider__viewport {
    overflow: visible;
  }
  .logo-slider--mobile-grid .logo-slider__track {
    width: 100%;
  }
  .logo-slider--mobile-grid .logo-slider__list:not(.logo-slider__list--copy) {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 40px;
  }
  .logo-slider--mobile-grid .logo-slider__item {
    flex: 0 0 50%;
    padding: 0 12px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .logo-slider--mobile-grid .logo-slider__item {
    flex-basis: calc(100% / 3);
  }
}
@media (min-width: 768px) {
  .site-footer__bottom {
    justify-content: flex-end;
  }
  .site-footer__copyright {
    margin-right: auto;                    /* copyright left, links and icons right */
  }
}
/* Desktop: 5 logos when sliding; a full row otherwise */
@media (min-width: 992px) {
  .logo-slider {
    --logos-visible: 5;
    --logo-h: 60px;
  }
  .site-footer--has-bg { --footer-min-h: 762px; }   /* design height */
  .site-footer__inner { padding-top: 64px; }

  .logo-slider--desktop-row .logo-slider__viewport {
    overflow: visible;
  }
  .logo-slider--desktop-row .logo-slider__track {
    width: 100%;
  }
  .logo-slider--desktop-row .logo-slider__list:not(.logo-slider__list--copy) {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 24px;
  }
  .logo-slider--desktop-row .logo-slider__item {
    flex: 0 1 auto;
    max-width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slider .logo-slider__link {
    transition: none;
  }
}
@media (forced-colors: active) {
  .site-footer__bg::after {
    display: none;
  }
}
/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  /* Cards: up to 2 per row */
  .cards-section {
    --cards-n: min(var(--cards-cols), 2);
  }
}
/* Medium devices (desktops, 768px and up)*/
@media (min-width: 768px) {

}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  :root {
    --header-h: 98px;
    --header-logo-h: 74px;
  }
header.is-scrolled .site-header__logo-img{
  margin-top: 0;
}
  /* Header: horizontal nav */
  .site-header__toggle,
  .site-header .site-header__cta {
    display: none;
  }
  .site-header__panel {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  .site-header__social {
    --social-target: 20px;
  }
  .site-nav__list {
    display: flex;
    border: 2px solid var(--color-foreground);
    background-color: var(--color-white);
  }
  .site-nav__list > li + li {
    border-left: 2px solid var(--color-foreground);
  }
  .site-nav__list > li > a {
    min-height: 35px;
    padding: 0 11px;
    border-bottom: 0;
    font-size: 13px;
    white-space: nowrap;
  }
  .site-nav__list > li > a[aria-current] {
    box-shadow: inset 0 -3px 0 var(--color-secondary);
    padding-left: 12px;
  }
  .site-nav__list > .menu-item--cta > a {
    margin-top: 0;
    border: 0;
  }

  /* Submenus: dropdown */
  .site-nav__list > li {
    display: flex;
  }
  .site-nav__list > .menu-item-has-children {
    flex-wrap: nowrap;
  }
  .site-nav__list > .menu-item-has-children > a {
    flex: 0 0 auto;
    padding-right: 6px;
  }
  .site-nav__parent {
    flex: 0 0 auto;
    width: auto;
    min-height: 35px;
    padding: 0 11px;
    border-bottom: 0;
    font-size: 13px;
    white-space: nowrap;
  }
  .site-nav__sub-toggle {
    flex: 0 0 26px;
    min-height: 35px;
    border: 0;
  }
  .site-nav__list .sub-menu {
    position: absolute;
    top: 100%;      /* sits on the bottom border of the bar: no gap to cross with the mouse */
    left: -2px;
    z-index: 10;
    min-width: 220px;
    border: 2px solid var(--color-foreground);
    background-color: var(--color-white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }
  /* Last items open towards the left so the dropdown stays inside the viewport */
  .site-nav__list > li:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: -2px;
  }
  .site-nav__list > li.is-sub-open > .sub-menu,
  html:not(.js) .site-nav__list > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  @media (hover: hover) {
    .site-nav__list > li:hover > .sub-menu {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 0s;
    }
  }
  .site-nav__list .sub-menu a {
    min-height: 40px;
    padding: 8px 14px;
    border-bottom: 0;
    font-size: 13px;
    white-space: nowrap;
  }
  .site-nav__list .sub-menu li + li a {
    border-top: 2px solid var(--color-foreground);
  }

  /* Hero: two columns. The text lines up with the header logo, the image bleeds to the right edge */
  .hero-section {
    --hero-gutter: max(var(--header-pad), calc((100vw - var(--header-max)) / 2 + var(--header-pad)));
    grid-template-columns: calc(var(--hero-gutter) + min(34rem, 40vw)) minmax(0, 1fr);
  }
  .hero-section--no-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-section__text {
    padding-right: 32px;
  }
  .hero-section__content {
    position: relative;
    z-index: 2; /* text stays above the image where they overlap */
  }
  .hero-section__media {
    z-index: 1;
    pointer-events: none; /* the overlap never blocks clicks on the text or the next section */
  }

  /* Default, "Whole image": the image keeps its own shape at any width, never cropped.
     It sits at the bottom of its column; the hero is as tall as the text or the
     image, whichever is taller. Negative margins = runs over the next section /
     over the text column (block fields). */
  .hero-section:not(.hero-section--fit-cover) .hero-section__media {
    align-self: end;
    margin-bottom: calc(var(--hero-overflow-bottom) * -1);
    margin-left: calc(var(--hero-overlap-left) * -1);
  }

  /* "Fill text height": the text sets the height of the hero. The image is out of
     the flow and covers its column top to bottom (cropped when the shapes differ). */
  .hero-section--fit-cover .hero-section__media picture {
    position: absolute;
    top: 0;
    right: 0;
    /* Block fields: how far the image runs over the next section / over the text column */
    bottom: calc(var(--hero-overflow-bottom) * -1);
    left: calc(var(--hero-overlap-left) * -1);
  }
  .hero-section--fit-cover .hero-section__img {
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-img-position, left bottom);
  }
  /* Image running over the next section: the hero must paint above it */
  .hero-section--overflow {
    z-index: 2;
  }

  /* Cards: up to 4 per row; the description gets its max width */
  .cards-section {
    --cards-n: min(var(--cards-cols), 4);
  }
  .cards-section__description {
    max-width: var(--cards-desc-max);
  }

  /* Columns: side by side */
  .columns-section__grid {
    grid-template-columns: var(--columns-template);
    gap: var(--columns-gap);
    align-items: center;
  }
  .columns-section--v-top .columns-section__grid { align-items: start; }
  .columns-section--v-bottom .columns-section__grid { align-items: end; }
  .columns-section--v-items-stretch .columns-section__grid { align-items: stretch; }

  /* 404 */
  .error-404 {
    padding: calc(var(--header-h) + 80px) 0 110px;
  }
  .error-404--has-image .error-404__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 64px;
  }

  .padding-xsmall.pt-lg-0 {
    padding-top: 0 !important;
  }
  .padding-small.pt-lg-0 {
    padding-top: 0 !important;
  }
  .padding-medium.pt-lg-0 {
    padding-top: 0 !important;
  }
  .padding-large.pt-lg-0 {
    padding-top: 0 !important;
  }
  .padding-xlarge.pt-lg-0 {
    padding-top: 0 !important;
  }
  .padding-xsmall.pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .padding-small.pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .padding-medium.pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .padding-large.pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .padding-xlarge.pb-lg-0 {
    padding-bottom: 0 !important;
  }  

}

/* X-Large devices (1200px and up)*/
@media (min-width: 1200px) {
  /* Cards: the full number chosen in the block */
  .cards-section {
    --cards-n: var(--cards-cols);
  }
  .site-header__panel {
    gap: 24px;
  }
  .site-nav__list > li > a,
  .site-nav__list > li > a[aria-current],
  .site-nav__parent {
    padding-inline: 16px;
  }
  .site-nav__list > .menu-item-has-children > a {
    padding-right: 8px;
  }
}
@media (min-width: 1360px) {
:root {  
    --header-pad: 0px;
  }
}
/* `lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  /* Header: logo | button | toggle. The logo gives way first on narrow phones. */
  .site-header__inner {
    gap: 10px;
  }
  .site-header .site-header__logo {
    flex: 0 1 auto;
    min-width: 0;
  }
  .site-header__logo-img {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  /* The button sits next to the toggle: not repeated inside the panel */
  .site-nav__list > .menu-item--cta {
    display: none;
  }

  /* Header: mobile panel */
  .site-header__social {
    margin-top: 20px;
  }
  /* The panel is white: dark icons (the default white ones were invisible) */
  .site-header .site-header__social {
    --social-color: var(--color-foreground);
    --social-hover-color: var(--color-secondary);   /* #BD4C00 on white: 5:1 */
  }
  .site-header__logo-img{
    margin-top: 0;
  }
  .site-header .site-header__logo{
    gap: 6px;
  }

  /* Submenus: collapsed until their button is pressed (only when JS runs) */
  .js .site-nav__list .sub-menu {
    display: none;
  }
  .js .site-nav__list > li.is-sub-open > .sub-menu {
    display: block;
  }
  html:not(.js) .site-nav__sub-toggle {
    display: none;
  }
  

  /* Collapsed only when JS runs. visibility keeps closed links out of the tab order. */
  .js .site-header__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    padding: 4px var(--header-pad) 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-white);
    box-shadow: 0 16px 24px rgba(17, 17, 17, 0.12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js .site-header.is-open .site-header__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  /* No JS: the menu stays in the flow, under the logo */
  html:not(.js) .site-header {
    height: auto;
    min-height: var(--header-h);
    background-color: var(--color-white);
  }
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }
  html:not(.js) .site-header__toggle {
    display: none;
  }
  html:not(.js) .site-header__panel {
    flex: 1 0 100%;
  }
    h1 br:not(.no-hide),
  h2 br:not(.no-hide),
  h3 br:not(.no-hide),
  h4 br:not(.no-hide),
  h5 br:not(.no-hide),
  h6 br:not(.no-hide),
  .hide-br-mv br,
  p br:not(.no-hide),
  li br:not(.no-hide){
    display: none;
  }
  br.show-mv{
    display: block !important;
  }
  .padding-xsmall,
  .padding-small,
  .padding-medium,
  .padding-large,
  .padding-xlarge {
    padding: 2em 0 !important;
  } 
  .pb-0-important {
    padding-bottom: 0 !important;
  }
  .pt-0-important {
    padding-top: 0 !important;
  }
  .back-forth__list--numbered .back-forth__item {
    column-gap: 10px;
  }
}

/* `md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

  h1{
    font-size: 32px;
  }
  .hero-section__heading{
    font-size: 40px;
  }
  h2{
    font-size: 30px;
  }
  h3{
    font-size: 26px;
  }
  h4{
    font-size: 22px;
  }
  h5{
    font-size: 20px;    
  }
  h6{
    font-size: 18px;    
  } 
  .heading-like-h1 { font-size: 32px; } 
  .heading-like-h2 { font-size: 30px; }
  .heading-like-h3 { font-size: 26px; }
  .heading-like-h4 { font-size: 22px; }
  .heading-like-h5 { font-size: 20px; }
  .heading-like-h6 { font-size: 18px; }

  /* Cards: tighter gap on phones. Changed through the variable so the
     card width calc and the real gap stay in sync. Stats use their own gaps. */
  .cards-section {
    --cards-gap: 16px;
  }
  .cards-section__grid {
    row-gap: 20px;
  }
}
/* The WP admin bar is not fixed below 600px */
@media (max-width: 600px) {
  .site-header--sticky {
    top: 0;
  }
}
/* `sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .wrap-btn{
    flex-direction: column;
  }  
  .button{
    width: 100%;
  }
}

/* Narrow phones: smaller header button so logo, button and toggle fit on one line */
@media (max-width: 399.98px) {
  .site-header .site-header__cta {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* User preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .site-header,
  .site-header__panel,
  .site-header .site-header__cta,
  .site-header__toggle-bars span,
  .site-nav__list > li > a,
  .site-nav__list .sub-menu,
  .site-nav__list .sub-menu a,
  .site-nav__parent,
  .site-nav__sub-toggle,
  .site-nav__chevron,
  .social-list .social-list__link {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .site-header__toggle-bars span {
    border-top-color: ButtonText;
    forced-color-adjust: none;
  }
  .site-nav__list > li > a[aria-current] {
    text-decoration: underline;
  }
}