@charset "UTF-8";
/*
$brand-teal: #0E7C92;
$brand-teal-dark: #154C5B;
$brand-gold: #FAB017;
*/
:root {
  --color-primary: $primary;
  --color-text: #1a1a1a;
  --color-bg: #fff;
  --color-gray: #f8f9fa;
  --color-border: #e9ecef;
  --font-family: $font-family // 'Inter', system-ui, -apple-system, sans-serif;
}

/*
 * Output font size in px/rem
 */
/**
 * Centered Grid Layout Mixin
 * ----------------------------
 * This mixin creates a 3-column grid that allows for full-width 
 * backgrounds while keeping content centered.
 */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1rem; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1rem; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25rem;
}

sup {
  top: -0.5rem;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625rem;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  appearance: textfield;
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

html {
  font-size: 18px;
  scroll-padding-top: 55.1px;
  /* Adjust this value based on the height of your header */
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  background: #f9f9f9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.resize-animation-stopper * {
  transition: none !important;
}

figure {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 600px;
}
figure img {
  width: 100%;
  height: auto;
}

.full-bleed {
  /* Take up full viewport width */
  width: 100vw;
  /* Shift left by half the width of the screen,
     minus half the width of the parent (50%) */
  margin-left: calc(50% - 50vw);
  /* Reset right margin for safety */
  margin-right: calc(50% - 50vw);
  /* Ensure it doesn't cause horizontal scrollbars */
  max-width: 100vw;
  position: relative;
  left: 0;
}

/*
  Animation:
  Highlight/reveal content of anchor id when directed there from URL
  <a href="#some_id">go to this id on the page...</a>
*/
*:target {
  animation-name: revealText;
  animation-direction: normal;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

@keyframes revealText {
  0% {
    clip-path: inset(0px 100% 0px 0%);
    -webkit-clip-path: inset(0px 100% 0px 0%);
  }
  100% {
    clip-path: inset(0px 0px 0px 0px);
    -webkit-clip-path: inset(0px 0px 0px 0px);
  }
}
article.search-results a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 20px 30px 10px 30px;
}
article.search-results a:hover {
  background-color: #0056b3;
  color: white;
}
article.search-results a h2,
article.search-results a p {
  text-decoration: none;
  color: inherit;
}
article.search-results a h2 {
  font-size: 1.125rem;
  margin: 0;
}
article.search-results a h2 + p {
  margin-bottom: 10px;
}
article.search-results a p {
  font-size: 0.875rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
article.search-results a p:last-child {
  margin-bottom: 0;
}

/*
General styles for some screen reader only text. This is text that
screen readers will see, but sighted users will not see. It needs to
be moved out of the way by cautious means. Code provided by A360.

The code seems somewhat incomplete because an absolute positioned thing
can be rooted into different relative positioned boxes on the page, and
a 1x1 square could still draw a spec of color. But we'll see what it's
like in the real world first.
*/
.screen_reader_only {
  position: absolute;
  height: 1px;
  width: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden !important;
}

/*
Make the first focusable link one that skips to the main content.
Should be visible to screen readers, hidden from desktop users,
yet visible to desktop users when focused. Therefore, hidden by
moving it out of sight, and moved back into sight when focused.
*/
.skip_to_content {
  display: block;
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.skip_to_content:focus {
  height: auto;
  width: auto;
  top: 0;
  left: 0;
  border: 1px solid #000;
  padding: 8px 15px;
  background-color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

i.far, i.fas, i.fal, i.fad, i.fab {
  vertical-align: middle;
  font-size: 1em;
  margin-right: 0.25em;
}
i.far ~ i.far, i.far ~ i.fas, i.far ~ i.fal, i.far ~ i.fad, i.far ~ i.fab, i.fas ~ i.far, i.fas ~ i.fas, i.fas ~ i.fal, i.fas ~ i.fad, i.fas ~ i.fab, i.fal ~ i.far, i.fal ~ i.fas, i.fal ~ i.fal, i.fal ~ i.fad, i.fal ~ i.fab, i.fad ~ i.far, i.fad ~ i.fas, i.fad ~ i.fal, i.fad ~ i.fad, i.fad ~ i.fab, i.fab ~ i.far, i.fab ~ i.fas, i.fab ~ i.fal, i.fab ~ i.fad, i.fab ~ i.fab {
  margin-left: 1em;
}
i.far.color-gray, i.fas.color-gray, i.fal.color-gray, i.fad.color-gray, i.fab.color-gray {
  color: #999;
}
i.far.color-black, i.fas.color-black, i.fal.color-black, i.fad.color-black, i.fab.color-black {
  color: #000;
}
i.far.color-white, i.fas.color-white, i.fal.color-white, i.fad.color-white, i.fab.color-white {
  color: #fff;
}
i.far.size-tiny, i.fas.size-tiny, i.fal.size-tiny, i.fad.size-tiny, i.fab.size-tiny {
  font-size: 0.5em;
}
i.far.size-small, i.fas.size-small, i.fal.size-small, i.fad.size-small, i.fab.size-small {
  font-size: 0.8em;
}
i.far.size-medium, i.fas.size-medium, i.fal.size-medium, i.fad.size-medium, i.fab.size-medium {
  font-size: 1em;
}
i.far.size-large, i.fas.size-large, i.fal.size-large, i.fad.size-large, i.fab.size-large {
  font-size: 1.5em;
}
i.far.size-xl, i.fas.size-xl, i.fal.size-xl, i.fad.size-xl, i.fab.size-xl {
  font-size: 2em;
}
i.far.size-2xl, i.fas.size-2xl, i.fal.size-2xl, i.fad.size-2xl, i.fab.size-2xl {
  font-size: 2.5em;
}
i.far.size-3xl, i.fas.size-3xl, i.fal.size-3xl, i.fad.size-3xl, i.fab.size-3xl {
  font-size: 3em;
}
i.far.size-4xl, i.fas.size-4xl, i.fal.size-4xl, i.fad.size-4xl, i.fab.size-4xl {
  font-size: 3.5em;
}
i.far.size-5xl, i.fas.size-5xl, i.fal.size-5xl, i.fad.size-5xl, i.fab.size-5xl {
  font-size: 4em;
}

.btn, .cta {
  display: inline-block;
  background: #0056b3;
  color: #fff;
  padding: 1rem 2rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 2px;
  transition: background 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  border-width: 0;
}
.btn:hover, .cta:hover {
  background: #004494;
  cursor: pointer;
}

/*
a.xexternal_link {
  position: relative;
  color: #333;
  &:after {
    content: 'EXT';
    display: inline-block;
    font-size: 0.6em;
    padding: 0.1em 0.25em;
    margin-left: 0.25em;
    background: #ff6600;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
    vertical-align: super;
    letter-spacing: 0.05em;
  }
}
*/
main a.external_link {
  text-decoration: underline;
  position: relative;
  padding-right: 1rem;
  margin-right: 0.4rem;
}
main a.external_link::after {
  font-family: "Font Awesome 7 Free";
  content: "\f35d";
  font-weight: 900;
  margin-left: 0.3em;
  margin-right: 0.5em;
  font-size: 0.9em;
  color: #ff6600;
  position: absolute;
  bottom: -0.2em;
}
main {
  /* 
  main {
    // Keep the underline on the link text
    a.external_link {
        text-decoration: underline; // Underline the link text

        &::after {
            font-family: 'Font Awesome 7 Free';
            content: '\f35d'; // external-link icon
            font-weight: 900;
            margin-left: 0.2em;
            margin-right:0.5em;
            font-size: 0.9em;
            color: #ff6600;
        } 
    }
  */
}
main a {
  color: #0056b3;
  text-decoration: none;
}
main a:hover {
  text-decoration: underline;
}
main a:focus {
  text-decoration: underline;
}
/* The somewhat bulletproof repetition of heading styles is so that something like <h4 class="h1"> looks exactly like <h1> */
h1, .h1 {
  font-family: Roboto, "Georgia", "Times New Roman", Times, serif;
  word-spacing: 0.2em;
  font-weight: 600;
  font-size: 2.5rem;
  text-transform: none;
  margin: 0;
  margin-block: 1rem 0.5rem; /* top and bottom */
  margin-inline: 0; /* left and right */
  line-height: 1;
}
h1:first-child, .h1:first-child {
  margin-block-start: 0;
  margin-top: 0;
}

h2, .h2 {
  font-family: Roboto, "Georgia", "Times New Roman", Times, serif;
  word-spacing: 0.15em;
  font-weight: 600;
  font-size: 2rem;
  text-transform: none;
  margin: 0;
  margin-block: 2rem 0.5rem; /* top and bottom */
  margin-inline: 0; /* left and right */
  line-height: 1.15;
}
h2:first-child, .h2:first-child {
  margin-block-start: 0;
  margin-top: 0;
}

h3, .h3 {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-spacing: 0em;
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0;
  margin-block: 1rem 0.5rem; /* top and bottom */
  margin-inline: 0; /* left and right */
  line-height: 1.15;
}
h3:first-child, .h3:first-child {
  margin-block-start: 0;
  margin-top: 0;
}

h4, .h4 {
  font-family: Roboto, "Georgia", "Times New Roman", Times, serif;
  word-spacing: 0.2em;
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: none;
  margin: 0;
  margin-block: 1rem 0.5rem; /* top and bottom */
  margin-inline: 0; /* left and right */
  line-height: 1.15;
}
h4:first-child, .h4:first-child {
  margin-block-start: 0;
  margin-top: 0;
}

h5:first-child, .h5:first-child {
  margin-block-start: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2rem;
  }
  h2, .h2 {
    font-size: 1.75rem;
  }
  h3, .h3 {
    font-size: 1.5rem;
  }
  h4, .h4 {
    font-size: 1.125rem;
  }
}
p {
  margin-block: 0 1rem; /* top and bottom */
  margin-inline: 0; /* left and right */
  font-size: 1rem;
  line-height: 1.6rem;
}

.primary-article aside.metabar {
  margin: 0.5rem 0;
}
.primary-article > p:first-of-type::first-letter, .primary-article > section:first-child > p:first-of-type::first-letter {
  float: left;
  font-size: 5.6rem;
  line-height: 0.8;
  padding-top: 0.05em;
  padding-right: 0.1em;
  padding-bottom: 0;
  font-weight: bold;
  font-family: Merriweather;
  color: #0056b3;
}

main ol, main ul {
  margin: 1rem 0 1rem 0;
  padding-left: 1rem;
}
main ol li, main ul li {
  margin-bottom: 1rem;
  line-height: 1.5rem;
}

ul.circle-check {
  list-style: none;
  padding-left: 0;
}
ul.circle-check li {
  padding-left: 40px;
  background-image: url(/assets/img/icons/circle-check.svg);
  background-repeat: no-repeat;
  background-position: 0px 1px;
  min-height: 2em;
}

ol > li {
  margin-bottom: 1rem;
}
ol > li p + ul, ol > li ul + p {
  margin-top: 1rem;
}

ol.big-step-list {
  padding: 0;
  list-style: none;
  counter-reset: step-counter;
}
ol.big-step-list > li {
  counter-increment: step-counter;
  margin-bottom: 1.5rem;
  padding-left: 4rem;
  position: relative;
  font-size: 1.1rem;
}
ol.big-step-list > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
ol.big-step-list > li > ul, ol.big-step-list > li > ol {
  margin-left: 1rem;
  padding-left: 0rem;
}

ul.no-indent {
  padding-left: 1rem;
  margin-left: 0;
  list-style-position: outside;
}

ul.table-of-contents {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.table-of-contents li {
  margin: 0;
}
ul.table-of-contents li a {
  display: block;
  border-left: 4px solid #0056b3;
  padding: 10px 10px 10px 24px;
  line-height: 1rem;
  margin: 0;
  text-decoration: none;
  color: inherit;
  transition: all 100ms ease-in-out;
}
ul.table-of-contents li a.active {
  border-color: #004494;
}
ul.table-of-contents li a:hover {
  background-color: #f8f9fa;
}

/*
Pagination as returned by laravel defaults
*/
.pagination {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}
.pagination li {
  font-size: 1rem;
}
.pagination li span, .pagination li a {
  display: block;
  padding: 5px;
}
.pagination li a span {
  display: inline;
}
.pagination li span span {
  display: inline;
}

header.site-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  header.site-header {
    --grid-gutter: 0.5rem;
  }
}
header.site-header {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
  overflow: visible !important;
  /* Make Nav section stay visible */
  position: sticky;
  top: -132.4px;
  z-index: 1000;
}
header.site-header > * {
  grid-column: content;
}
header.site-header > .utility-bar-wrapper, header.site-header > .nav-bar {
  grid-column: full;
}
header.site-header .utility-bar-wrapper {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e9ecef;
  padding: 0.5rem 0;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  header.site-header .utility-bar-wrapper {
    --grid-gutter: 0.5rem;
  }
}
header.site-header .utility-bar-wrapper {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
@media (max-width: 768px) {
  header.site-header .utility-bar-wrapper {
    display: none;
  }
}
header.site-header .utility-bar-wrapper .utility-bar {
  grid-column: content;
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
header.site-header .utility-bar-wrapper .utility-bar a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.2s;
}
header.site-header .utility-bar-wrapper .utility-bar a:hover {
  color: #0056b3;
}
header.site-header .utility-bar-wrapper .utility-bar .divider {
  color: #ccc;
}
header.site-header .utility-bar-wrapper .utility-bar .badge-urgent {
  color: #D32F2F;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
header.site-header .utility-bar-wrapper .utility-bar .badge-urgent::before {
  content: "●";
  font-size: 1.2em;
  line-height: 0;
}
@media (max-width: 768px) {
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e9ecef;
  }
}

.masthead {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left logo right";
  align-items: center;
  position: relative;
}
@media (max-width: 768px) {
  .masthead {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo right";
    height: 70px;
    padding: 10px 0px;
  }
}
.masthead-left {
  grid-area: left;
  text-align: left;
  font-size: 0.85rem;
  color: #555;
  font-weight: 500;
}
@media (max-width: 768px) {
  .masthead-left {
    display: none;
  }
}
.masthead .logo {
  grid-area: logo;
}
.masthead .logo img {
  height: 60px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .masthead .logo img {
    height: 30px;
  }
}
.masthead-right {
  grid-area: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}
@media (max-width: 768px) {
  .masthead-right {
    gap: 10px;
  }
  .masthead-right .searchbar {
    display: none;
  }
}

.searchbar {
  position: relative;
  width: 40px;
  height: 40px;
}
.searchbar input#site-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url("/assets/img/icons/search.svg") center/24px no-repeat;
  border: 0;
  cursor: pointer;
  transition: width 0.3s;
  z-index: 10;
  color: transparent;
}
.searchbar input#site-search:focus {
  width: 250px;
  background-color: #f9f9f9;
  background-image: url("/assets/img/icons/search-33.svg");
  background-position: 10px center;
  padding-left: 40px;
  outline: none;
  border: 1px solid #ddd;
  color: inherit;
}

main {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  min-height: 200px;
}

.nav-bar {
  border-bottom: 1px solid #000;
  border-top: 1px solid #e9ecef;
  position: relative;
  background: #fff;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  .nav-bar {
    --grid-gutter: 0.5rem;
  }
}
.nav-bar {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
.nav-bar > .nav-menu {
  grid-column: content;
}
@media (max-width: 768px) {
  .nav-bar {
    border: none;
    position: static;
    height: 0;
    background: transparent;
  }
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  z-index: 2001;
}
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
}
.hamburger .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #333;
  transition: all 0.3s ease-in-out;
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #fff;
    flex-direction: column;
    justify-content: flex-start;
    transform: translateX(-100%);
    transition: transform 0.3s;
    overflow-y: auto;
    z-index: 2000;
    border-top: 1px solid #eee;
  }
  .nav-menu.active {
    transform: translateX(0);
  }
}

.mobile-search {
  display: none;
}
@media (max-width: 768px) {
  .mobile-search {
    display: block;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
  }
  .mobile-search form {
    display: block;
    width: 100%;
  }
  .mobile-search input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9 url("/assets/img/icons/search-33.svg") 10px center/20px no-repeat;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
  }
  .mobile-search input:focus {
    background-color: #fff;
    border-color: #0056b3;
  }
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-bottom: 2rem;
  }
}
.menu > li {
  position: static;
}
.menu > li > a {
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
}
@media (max-width: 768px) {
  .menu > li > a {
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 1.2rem;
  }
}
.menu > li > a:hover, .menu > li > a.open, .menu > li > a.focus {
  color: #0056b3;
  border-bottom-color: #0056b3;
}
.menu > li.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.3rem;
  margin-bottom: 0.1rem;
}
.menu > li > a.open::after, .menu > li > a.open-mobile::after {
  transform: rotate(-135deg);
  margin-bottom: -0.2rem;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid #0056b3;
  display: none;
  opacity: 0;
  z-index: 1000;
}
.submenu.open {
  display: block;
  opacity: 1;
}
@media (max-width: 768px) {
  .submenu {
    position: static;
    box-shadow: none;
    border: 0;
    border: 0;
    background: #f9f9f9;
    padding-bottom: 0;
  }
  .submenu.open {
    display: none !important;
  }
  .submenu.open-mobile {
    display: block !important;
    opacity: 1;
  }
}
.submenu .mega-container {
  padding: 2.5rem 20px;
  display: flex;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .submenu .mega-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
}
.submenu .mega-container .submenu-col {
  flex: 1;
  max-width: 250px;
}
@media (max-width: 768px) {
  .submenu .mega-container .submenu-col {
    flex: none;
    max-width: none;
    padding: 0 1.5rem;
    margin-bottom: 1rem;
  }
}
.submenu .mega-container .submenu-col h4 {
  color: #111;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
@media (max-width: 768px) {
  .submenu .mega-container .submenu-col h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #555;
    border-bottom: none;
    padding-left: 0;
  }
}
.submenu .mega-container .submenu-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.submenu .mega-container .submenu-col ul li {
  margin-bottom: 0.5rem;
}
.submenu .mega-container .submenu-col ul li a {
  color: #555;
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  padding: 0.2rem 0;
  transition: color 0.1s;
  border: none;
  text-transform: none;
  font-weight: normal;
}
.submenu .mega-container .submenu-col ul li a:hover {
  color: #0056b3;
}
@media (max-width: 768px) {
  .submenu .mega-container .submenu-col ul li a {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    background: transparent;
  }
}
.submenu .mega-container .featured-card {
  background: #f4f6f8;
  padding: 1.5rem;
  border-radius: 4px;
}
@media (max-width: 768px) {
  .submenu .mega-container .featured-card {
    display: none;
  }
}
.submenu .mega-container .featured-card h3 {
  margin-top: 0;
  color: #0056b3;
  font-size: 1.1rem;
}
.submenu .mega-container .featured-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 1rem;
}
.submenu .mega-container .featured-card .featured-link {
  font-weight: bold;
  color: #0056b3;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.submenu .mega-container .featured-card .featured-link:hover {
  text-decoration: underline;
}

:root {
  --form-builder-red-error: #C50101;
  --form-builder-gray-90: #111111;
  --form-builder-gray-80: #222222;
  --form-builder-gray-70: #444444;
  --form-builder-gray-60: #616D70;
  --form-builder-gray-50: #999999;
  --form-builder-gray-40: #C5C6CF;
  --form-builder-gray-30: #E5E5E5;
  --form-builder-gray-20: #F2F2F2;
  --form-builder-gray-10: #FAFAFA;
  --form-builder-white: #FFFFFF;
  --form-builder-black: #000000;
  --form-builder-navy-deep: #1C1D25;
  --form-builder-blue-info: #0056b3;
  --form-builder-radio-button-border: var(--form-builder-gray-30);
  --form-builder-radio-button-background: #F9F9F9;
  --form-builder-radio-button-color: var(--form-builder-black);
  --form-builder-radio-button-hover-background: var(--form-builder-gray-50);
  --form-builder-radio-button-hover-border: var(--form-builder-gray-50);
  --form-builder-radio-button-hover-color: var(--form-builder-white);
  --form-builder-radio-button-checked-background: var(--form-builder-blue-info);
  --form-builder-radio-button-checked-border: #067EAB;
  --form-builder-radio-button-checked-color: var(--form-builder-white);
  --form-builder-radio-button-disabled-background: #f9f9f9;
  --form-builder-radio-button-disabled-border: var(--form-builder-gray-30);
  --form-builder-radio-button-disabled-color: var(--form-builder-gray-30);
  --form-builder-radio-button-checked-disabled-background: var(--form-builder-gray-60);
  --form-builder-radio-button-checked-disabled-border: var(--form-builder-gray-60);
  --form-builder-radio-button-checked-disabled-color: var(--form-builder-white);
}

/*
Form elements in general
*/
input[type=checkbox] + label,
input[type=radio] + label {
  cursor: pointer;
}
input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
  cursor: not-allowed;
}

/* Form styling using CSS variables */
form.fb-form fieldset {
  margin: 0;
  padding: 20px 0;
  background-color: var(--form-builder-white);
  border: none;
}
form.fb-form fieldset legend {
  float: left;
  width: 100%;
  display: block;
  font-weight: 400;
  font-size: 1.875rem;
  margin-bottom: 10px;
  text-transform: uppercase;
}
form.fb-form fieldset legend + * {
  clear: both;
}
@media (min-width: 600px) {
  form.fb-form fieldset {
    margin-bottom: 40px;
  }
  form.fb-form fieldset legend {
    margin-bottom: 20px;
  }
}
@media (min-width: 600px) {
  form.fb-form .form_row {
    display: flex;
    flex-wrap: wrap;
  }
}
form.fb-form .form_field {
  margin: 0 0 20px;
}
@media (min-width: 600px) {
  form.fb-form .form_field {
    margin-right: 20px;
  }
  form.fb-form .form_field.wfull {
    width: 100%;
  }
}
@media (min-width: 600px) {
  form.fb-form .form_field.w250 button.cta {
    width: 250px;
  }
}
form.fb-form .form_field h4,
form.fb-form .form_field label {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--form-builder-navy-deep);
  margin: 0;
  height: auto;
  min-height: 24px;
  line-height: 24px;
}
form.fb-form .form_field h4.required,
form.fb-form .form_field label.required {
  font-weight: 700;
}
form.fb-form .form_field h4.disabled,
form.fb-form .form_field label.disabled {
  cursor: not-allowed;
}
form.fb-form .form_field span.note {
  color: #666;
  font-size: 0.9rem;
}
form.fb-form .form_field.fieldnote {
  padding-top: 0;
  margin-top: -15px;
}
form.fb-form .form_field.fieldnote span br {
  display: none;
}
@media (min-width: 600px) {
  form.fb-form .form_field.fieldnote {
    padding-top: 25px;
    margin-top: inherit;
  }
  form.fb-form .form_field.fieldnote span br {
    display: inline-block;
  }
}
form.fb-form .form_field.text input,
form.fb-form .form_field.text input[type=email],
form.fb-form .form_field.text input[type=password],
form.fb-form .form_field.text input[type=tel],
form.fb-form .form_field.text input[type=text] {
  display: block;
  background-color: var(--form-builder-gray-10);
  border: 1px solid var(--form-builder-gray-30);
  border-radius: 5px;
  height: 40px;
  font-size: 1rem;
  padding: 0 5px;
  line-height: 40px;
  color: var(--form-builder-gray-70);
  width: 100%;
}
form.fb-form .form_field.textarea {
  width: 100%;
}
form.fb-form .form_field.textarea textarea {
  display: block;
  background-color: var(--form-builder-gray-10);
  border: 1px solid var(--form-builder-gray-30);
  border-radius: 5px;
  font-size: 1rem;
  padding: 10px 5px;
  color: var(--form-builder-gray-70);
  width: 100%;
  height: 200px;
}
form.fb-form .form_field.select label {
  margin-bottom: 0;
}
form.fb-form .form_field.select select {
  background-color: #f9f9f9;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #C5C6CF;
  width: 100%;
  border-radius: 4px;
}
form.fb-form .form_field.select label {
  margin-bottom: 0;
}
form.fb-form .form_field.select select {
  background-color: var(--form-builder-gray-10);
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--form-builder-gray-30);
  width: 100%;
  border-radius: 4px;
}
form.fb-form .form_field.checkbox {
  margin-top: 10px;
  margin-bottom: 30px;
}
form.fb-form .form_field.checkbox input[type=checkbox] {
  display: none;
}
form.fb-form .form_field.checkbox input[type=checkbox] ~ label span.error_flag {
  display: block;
  position: absolute;
  top: 0;
  left: calc(100% + 5px);
  margin: 0;
}
form.fb-form .form_field.checkbox input[type=checkbox] + label {
  cursor: pointer;
  margin: 0 2em 10px 5px;
  display: flex;
  align-items: center;
  line-height: normal;
  min-height: 30px;
  text-indent: 0;
  position: relative;
}
form.fb-form .form_field.checkbox input[type=checkbox] + label:before {
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
  content: "\f0c8";
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin-right: 10px;
}
form.fb-form .form_field.checkbox input[type=checkbox]:checked + label:before {
  content: "\f14a";
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
}
form.fb-form .form_field.checkbox.button .options-container.button-group {
  display: flex;
  flex-wrap: wrap;
}
form.fb-form .form_field.checkbox.button .options-container.button-group ul.checkbox_options {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
form.fb-form .form_field.checkbox.button .options-container.button-group ul.checkbox_options li.form_field.checkbox {
  margin: 0;
  padding: 0;
  display: flex;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox] + label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--form-builder-radio-button-border);
  border-left-width: 0;
  background-color: var(--form-builder-radio-button-background);
  min-width: 100px;
  padding: 0 40px;
  height: 40px;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  position: relative;
  transition: all 0.2s ease;
  border-radius: 0;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox] + label:before {
  display: none;
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  content: "\f00c";
  font-size: 14px;
  position: absolute;
  left: 15px;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox] + label:hover {
  border-color: var(--form-builder-radio-button-hover-border);
  background-color: var(--form-builder-radio-button-hover-background);
  color: var(--form-builder-radio-button-hover-color);
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox]:checked + label {
  border-color: var(--form-builder-radio-button-checked-border);
  background-color: var(--form-builder-radio-button-checked-background);
  color: var(--form-builder-white);
  border-bottom-width: 2px;
  z-index: 1;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox]:checked + label:before {
  display: block;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox]:checked + label:hover {
  background-color: var(--form-builder-radio-button-checked-background);
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox]:first-of-type + label {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left-width: 1px;
}
form.fb-form .form_field.checkbox.button .options-container.button-group input[type=checkbox]:last-of-type + label {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
form.fb-form .form_field.radio h4 {
  height: auto;
  min-height: 24px;
  margin: 0;
}
form.fb-form .form_field.radio label + span.note {
  display: block;
  margin-top: 0.5em;
}
form.fb-form .form_field.radio input[type=radio] {
  display: none;
}
form.fb-form .form_field.radio input[type=radio] + label {
  cursor: pointer;
  margin: 0 2em 10px 5px;
  display: flex;
  align-items: center;
  line-height: normal;
  min-height: 30px;
  text-indent: 0;
  position: relative;
}
form.fb-form .form_field.radio input[type=radio] + label:before {
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
  content: "\f111";
  font-size: 22px;
  display: inline-block;
  line-height: 1;
  margin-right: 10px;
}
form.fb-form .form_field.radio input[type=radio]:checked + label:before {
  content: "\f192";
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
}
form.fb-form .form_field.radio.button .options-container.button-group {
  display: flex;
  flex-wrap: wrap;
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio] + label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--form-builder-radio-button-border);
  border-left-width: 0;
  background-color: var(--form-builder-radio-button-background);
  min-width: 100px;
  padding: 0 40px;
  height: 40px;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  position: relative;
  transition: all 0.2s ease;
  border-radius: 0;
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio] + label:before {
  display: none;
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio] + label:hover {
  border-color: var(--form-builder-radio-button-hover-border);
  background-color: var(--form-builder-radio-button-hover-background);
  color: var(--form-builder-radio-button-hover-color);
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:checked + label {
  border-color: var(--form-builder-radio-button-checked-border);
  background-color: var(--form-builder-radio-button-checked-background);
  color: var(--form-builder-white);
  border-bottom-width: 2px;
  z-index: 1;
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:checked + label:hover {
  background-color: var(--form-builder-radio-button-checked-background);
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:disabled + label, form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:disabled + label:hover {
  border-color: var(--form-builder-radio-button-disabled-border);
  background-color: var(--form-builder-radio-button-disabled-background);
  color: var(--form-builder-radio-button-disabled-color);
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:checked:disabled + label, form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:checked:disabled + label:hover {
  border-color: var(--form-builder-radio-button-checked-disabled-border);
  background-color: var(--form-builder-radio-button-checked-disabled-background);
  color: var(--form-builder-radio-button-checked-disabled-color);
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:first-of-type + label {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left-width: 1px;
}
form.fb-form .form_field.radio.button .options-container.button-group input[type=radio]:last-of-type + label {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
form.fb-form input:disabled,
form.fb-form select:disabled,
form.fb-form textarea:disabled {
  cursor: not-allowed;
}
form.fb-form .checkbox_options {
  margin-bottom: 30px;
}
form.fb-form .checkbox_options .form_field.checkbox {
  margin: 0;
}
form.fb-form .checkbox_options.checkbox_wrap {
  width: 100%;
}
form.fb-form ul.checkbox_options {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
form.fb-form div.checkbox-multiple + div.checkbox-multiple {
  margin-left: 3em;
}
form.fb-form .button_group {
  display: flex;
  margin-bottom: 10px;
  max-width: 520px;
}
form.fb-form .button_group a.cta,
form.fb-form .button_group button,
form.fb-form .button_group input[type=submit] {
  flex: 1 1 0;
  margin-right: 20px;
}
form.fb-form .button_group a.cta:last-child,
form.fb-form .button_group button:last-child,
form.fb-form .button_group input[type=submit]:last-child {
  margin-right: 0;
}
form.fb-form p.message.error span.icon.w16.error,
form.fb-form div.message.error span.icon.w16.error {
  border: 1px solid var(--form-builder-white);
  border-radius: 9px;
  width: 18px;
  height: 18px;
}
form.fb-form div.note, form.fb-form p.note {
  color: #666;
  font-size: 0.9rem;
  margin-top: 5px;
}
form.fb-form div.note *, form.fb-form p.note * {
  font-size: inherit;
}
form.fb-form p + ol {
  margin-top: 0;
}
form.fb-form ol {
  padding-left: 20px;
}
form.fb-form ol ol {
  padding-left: 20px;
  list-style-type: lower-alpha;
}
form.fb-form .hidden {
  display: none;
}
form.fb-form button.cta {
  width: 100%;
}
form.fb-form {
  /*
  // Icons / Flags
  .icon {
      display: inline-block;
      height: 20px;
      width: 20px;
      background-color: transparent;
      background-image: url("/assets/img/icons/msf_sprites.svg1");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: 0 0;
      background-size: 80px 480px;

      // Specific error icon style (scoped to avoid conflict with text .error)
      &.error {
          width: 16px;
          height: 16px;
          position: relative;

          &::before {
              content: "";
              display: block;
              height: 16px;
              width: 16px;
              position: absolute;
              top: 0;
              left: 0;
              background-color: transparent;
              background-image: url("/assets/img/icons/icon_sprites.svg?v={$icons-version}");
              background-repeat: no-repeat;
              background-attachment: scroll;
              background-size: 80px 480px;
              background-position: 0 -256px;
          }
      }
  }
  */
}
form.fb-form .error_flag {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  color: var(--form-builder-red-error);
  border-radius: 7.5px;
  position: relative;
  vertical-align: bottom;
  margin-bottom: 4px;
  text-transform: none;
  font-size: 0.75rem;
  font-weight: 700;
}
form.fb-form .error_flag::before {
  font-family: "Font Awesome 7 Free";
  content: "\f06a";
  font-weight: 900;
  margin-left: -4px;
  font-size: 24px;
  height: 16px;
  width: 16px;
}
form.fb-form .error_flag.active, form.fb-form .error_flag:hover {
  width: auto;
  height: auto;
  background-color: var(--form-builder-red-error);
  color: var(--form-builder-white);
  padding-right: 8px;
  padding-left: 18px;
}
form.fb-form .error_flag.active::before, form.fb-form .error_flag:hover::before {
  content: "";
  font-size: 12px;
  margin-left: -12px;
}
form.fb-form .disabled_flag {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  font-weight: 700;
  color: var(--form-builder-white);
  border-radius: 0;
  position: relative;
  vertical-align: bottom;
  text-indent: 16px;
  margin-bottom: 4px;
  font-size: 0.8rem;
}
form.fb-form .disabled_flag::before {
  font-family: "Font Awesome 7 Free";
  content: "\f023";
  font-weight: 900;
  color: black;
  margin-left: -12px;
  font-size: 14px;
  height: 16px;
  width: 16px;
}

.page-content {
  padding: 3rem 0;
}

/*
.hero-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  align-items: center;

  @include mobile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .hero-image {
    @include mobile { order: -1; }
    img { width: 100%; border-radius: 2px; }
  }
}
*/
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}
.news-grid .news-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 2px;
  background: #ddd;
}
.news-grid .news-card h3 a {
  color: #111;
  text-decoration: none;
}
.news-grid .news-card h3 a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/*
  --content-width: 600px;
  max-width: 600px;
  margin-inline: auto;
*/
.prose {
  --content-width: 600px;
  max-width: 600px;
  margin-inline: auto;
  --grid-width: 600px;
}

footer.site-footer {
  background-color: #111;
  color: #ccc;
  padding: 2rem 0;
  font-size: 0.9rem;
  margin-top: 0;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  footer.site-footer {
    --grid-gutter: 0.5rem;
  }
}
footer.site-footer {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
footer.site-footer > .footer-grid {
  grid-column: content;
}
footer.site-footer a {
  color: #ddd;
  text-decoration: none;
}
footer.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  grid-template-rows: 50px auto auto;
  grid-template-areas: "Logo nav nav" "text nav nav" "bottom bottom bottom";
}
@media (max-width: 900px) {
  footer.site-footer .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto auto auto;
    grid-template-areas: "Logo " "nav" "text" "bottom";
  }
}
@media screen and (max-width: 500px) {
  footer.site-footer .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "Logo" "nav" "text" "bottom";
    gap: 2rem;
  }
}
footer.site-footer .site-footer-logo-area {
  grid-area: Logo;
  display: flex;
  align-items: center;
}
footer.site-footer .site-footer-logo-area img {
  height: 40px;
  filter: invert(1);
}
@media (max-width: 900px) {
  footer.site-footer .site-footer-logo-area {
    justify-content: center;
  }
  footer.site-footer .site-footer-logo-area img {
    height: 30px;
    filter: invert(1);
  }
}
footer.site-footer .site-footer-mission-area {
  grid-area: text;
}
footer.site-footer .site-footer-mission-area p {
  line-height: 1.6;
  margin: 0 0 1rem 0;
  color: #888;
}
footer.site-footer .site-footer-mission-area .newsletter-block {
  margin-top: 1.5rem;
}
footer.site-footer .site-footer-mission-area .newsletter-block h4 {
  border: none;
  margin-bottom: 0.5rem;
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}
footer.site-footer .site-footer-mission-area .newsletter-block form {
  display: flex;
  gap: 5px;
}
@media screen and (max-width: 400px) {
  footer.site-footer .site-footer-mission-area .newsletter-block form {
    flex-direction: column;
  }
}
footer.site-footer .site-footer-mission-area .newsletter-block form input {
  padding: 10px;
  border: 1px solid #444;
  background: #222;
  color: #fff;
  width: 100%;
  border-radius: 2px;
  font-size: 0.9rem;
}
footer.site-footer .site-footer-mission-area .newsletter-block form input:focus {
  outline: none;
  border-color: #0056b3;
}
footer.site-footer .site-footer-mission-area .newsletter-block form button {
  padding: 10px 14px;
  border: none;
  background: #0056b3;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s;
}
footer.site-footer .site-footer-mission-area .newsletter-block form button:hover {
  background: rgb(0, 61.4972067039, 128);
}
@media screen and (max-width: 400px) {
  footer.site-footer .site-footer-mission-area .newsletter-block form button {
    width: 100%;
  }
}
footer.site-footer .site-footer-nav-area {
  grid-area: nav;
  display: flex;
  justify-content: center;
  gap: 4rem 2rem;
}
@media (max-width: 900px) {
  footer.site-footer .site-footer-nav-area {
    flex-wrap: wrap;
    gap: 2rem;
  }
}
@media screen and (max-width: 500px) {
  footer.site-footer .site-footer-nav-area {
    gap: 1.5rem;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 380px) {
  footer.site-footer .site-footer-nav-area {
    gap: 1rem;
  }
  footer.site-footer .site-footer-nav-area > * {
    flex: 1 1 120px;
  }
}
footer.site-footer .footer-col h4 {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.5rem;
  display: inline-block;
}
footer.site-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.site-footer .footer-col li {
  margin-bottom: 0.6rem;
}
footer.site-footer .site-footer-copyright-area {
  grid-area: bottom;
  border-top: 1px solid #222;
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #555;
}
@media (max-width: 768px) {
  footer.site-footer .site-footer-copyright-area {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ==========================================
   EMERGENCY PAGE PROTOTYPE
   ========================================== */
.emergency-hero {
  background: #b11226;
  color: #ffffff;
  padding: 3rem 1rem;
  text-align: center;
}
.emergency-hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.emergency-alert {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.emergency-alert p {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.emergency-script {
  background: #ffffff;
  color: #212121;
  padding: 1.5rem;
  border-radius: 8px;
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.5;
}
.emergency-script strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
}
.emergency-script p {
  margin: 0;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 600;
}

/* ==========================================
   ACTION CARDS
   ========================================== */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: 1fr;
  }
}

.action-card {
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
}
.action-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: #b11226;
  font-weight: 700;
}
.action-card p {
  margin: 0;
  line-height: 1.6;
}

/* ==========================================
   WARRANT COMPARISON (UPDATED)
   ========================================== */
.warrant-section {
  background: #fff8e1;
  border: 3px solid #f9a825;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 3rem;
}
.warrant-section h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.warrant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.warrant-warning {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
}
.warrant-warning p {
  margin: 0;
  font-weight: 600;
  color: #8d6e00;
}

/* ==========================================
   CARD
   ========================================== */
.card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
}
.card h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.card ul {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.8;
}
.card li {
  margin-bottom: 0.5rem;
}
.card {
  /* ------------------------------------------
     Child elements (neutral by default)
     ------------------------------------------ */
}
.card .card-header {
  padding: 0.75rem;
  margin: -1.5rem -1.5rem 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 5px 5px 0 0;
}
.card .card-header p {
  margin: 0;
}
.card .card-footer {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
  font-weight: 600;
}
.card {
  /* ------------------------------------------
     Color variants ripple from parent
     ------------------------------------------ */
}
.card.card--red {
  border: 3px solid #b11226;
}
.card.card--red h3 {
  color: #b11226;
}
.card.card--red .card-header {
  background: #b11226;
  color: #ffffff;
}
.card.card--red .card-footer {
  background: #f8d7da;
  color: #7f1d1d;
}
.card.card--green {
  border: 3px solid #2e7d32;
}
.card.card--green h3 {
  color: #2e7d32;
}
.card.card--green .card-header {
  background: #2e7d32;
  color: #ffffff;
}
.card.card--green .card-footer {
  background: #dcedc8;
  color: #1b5e20;
}

/* ==========================================
   EMERGENCY CONTACTS
   ========================================== */
.contacts-section {
  background: #212121;
  color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.contacts-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  display: block;
  background: #424242;
  padding: 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: #ffffff;
  border: 2px solid #616161;
  transition: all 0.2s ease;
}
.contact-card:hover {
  border-color: #b11226;
  background: #616161;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.contact-card .org-name {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  display: block;
}
.contact-card .phone {
  font-size: 1.8rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}
.contact-card .availability {
  font-size: 0.9rem;
  opacity: 0.8;
}

.contacts-reminder {
  margin-top: 1.5rem;
  text-align: center;
  padding: 1rem;
  background: #424242;
  border-radius: 8px;
}
.contacts-reminder p {
  margin: 0;
  font-size: 1rem;
}

/* ==========================================
   RESOURCES SECTION
   ========================================== */
.resources-section {
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 8px;
}
.resources-section h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
}
.resources-section ul {
  line-height: 2;
  margin: 0;
}
.resources-section a {
  color: #1565c0;
  font-weight: 600;
  text-decoration: none;
}
.resources-section a:hover {
  color: #0d47a1;
  text-decoration: underline;
}

:root {
  --color-primary: #0056b3;
  --color-text: #1a1a1a;
  --color-bg: #fff;
  --color-gray: #f8f9fa;
  --color-border: #e9ecef;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

a.hero-style-1 {
  text-decoration: none;
  color: inherit;
}

.hero-style-1 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-areas: "image content";
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.hero-style-1 .hero-image {
  grid-area: image;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hero-style-1 .hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}
.hero-style-1 .hero-content {
  grid-area: content;
}
.hero-style-1 .hero-content .kicker {
  color: var(--color-primary);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.8rem;
}
.hero-style-1 .hero-content .lead {
  font-size: 1.15rem;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hero-style-1 {
    grid-template-areas: "image" "content";
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: left;
  }
  .hero-style-1 .hero-image {
    aspect-ratio: 16/9;
  }
  .hero-style-1 .hero-content h1 {
    font-size: 2rem;
  }
}
/**
 * Unified Layout System (Grid-Based)
 * ---------------------------------
 * Uses CSS Grid named areas to handle sidebar placement and mobile stacking.
 */
.unified-layout {
  display: grid;
  /* Base/Default: Full Width */
  grid-template-columns: 1fr;
  grid-template-areas: "main";
  gap: 40px;
  margin: 3rem 0;
  align-items: start;
  /* Systemic Fix: Remove margin-top when layouts are nested */
}
.unified-layout .unified-layout {
  margin-top: 0;
}
.unified-layout {
  /* Named Area Assignments */
}
.unified-layout .layout-main {
  grid-area: main;
  /*
  article {
      max-width: 75ch;
      margin: 0 auto;
  }
  */
}
.unified-layout .layout-sidebar {
  grid-area: sidebar;
  display: none;
  /* Hidden by default */
}
.unified-layout {
  /* Configuration: Sidebar Right */
}
.unified-layout.layout-sidebar-right {
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main sidebar";
}
.unified-layout.layout-sidebar-right .layout-sidebar {
  display: block;
}
.unified-layout {
  /* Configuration: Sidebar Left */
}
.unified-layout.layout-sidebar-left {
  grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar main";
}
.unified-layout.layout-sidebar-left .layout-sidebar {
  display: block;
}
.unified-layout {
  /* Responsive Stacking (Tablet & Mobile) */
}
@media (max-width: 900px) {
  .unified-layout {
    grid-template-columns: 1fr;
    /* Default Mobile Stacking: Main on top, Sidebar below */
    grid-template-areas: "main" "sidebar";
    gap: 2rem;
    /* Configuration: Sidebar on Top for Mobile */
  }
  .unified-layout.mobile-sidebar-top {
    grid-template-areas: "sidebar" "main";
  }
  .unified-layout {
    /* Visual polish for stacked sidebars */
  }
  .unified-layout .layout-sidebar {
    border-top: 1px solid #eee;
    padding-top: 2rem;
  }
  .unified-layout.mobile-sidebar-top .layout-sidebar {
    border-top: none;
    padding-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
  }
}

/**
 * Modern CSS Grid Layout System
 * ----------------------------
 * This utility allows for full-width (100vw) backgrounds while keeping
 * content centered within the $container-width.
 *
 * Usage:
 * <main class="grid-wrapper">
 *   <section>Centered Content</section>
 *   <div class="full-bleed" style="background: red;">Full Width BG</div>
 * </main>
 */
.grid-wrapper {
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  .grid-wrapper {
    --grid-gutter: 0.5rem;
  }
}
.grid-wrapper {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
.grid-wrapper > * {
  grid-column: content;
}
.grid-wrapper > .full-bleed {
  grid-column: full;
}
.grid-wrapper > .full-bleed-content {
  grid-column: full;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  .grid-wrapper > .full-bleed-content {
    --grid-gutter: 0.5rem;
  }
}
.grid-wrapper > .full-bleed-content {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
.grid-wrapper > .full-bleed-content > * {
  grid-column: content;
}
.grid-wrapper > .breakout {
  grid-column: full;
}
.grid-wrapper > .inherits-grid {
  grid-column: full;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  .grid-wrapper > .inherits-grid {
    --grid-gutter: 0.5rem;
  }
}
.grid-wrapper > .inherits-grid {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
.grid-wrapper > .inherits-grid.prose {
  --grid-width: 600px;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
}
.grid-wrapper > .inherits-grid > * {
  grid-column: content;
}
.grid-wrapper > .inherits-grid > .full-bleed {
  grid-column: full;
}
.grid-wrapper > .inherits-grid > .full-bleed-content {
  grid-column: full;
  --grid-width: 1200px;
  --grid-width: 1200px;
  --grid-gutter: 1.5rem;
}
@media (max-width: 768px) {
  .grid-wrapper > .inherits-grid > .full-bleed-content {
    --grid-gutter: 0.5rem;
  }
}
.grid-wrapper > .inherits-grid > .full-bleed-content {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--grid-gutter), 1fr) [content-start] min(var(--grid-width), 100% - var(--grid-gutter) * 2) [content-end] minmax(var(--grid-gutter), 1fr) [full-end];
  max-width: 100vw;
  overflow-x: clip;
}
.grid-wrapper > .inherits-grid > .full-bleed-content > * {
  grid-column: content;
}