/* ==========================================================================
   hale — custom layer
   Additions that sit on top of the Webflow export. Everything here reuses the
   existing design tokens so it inherits the site theme automatically.
   1. Hero legibility
   2. Navbar "Resources" dropdown
   3. Blog index
   4. Blog article
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero legibility
   The hero photo is bright behind white text. The original single gradient
   only darkened the very bottom edge, so the headline sat on unshaded
   highlights. These add a proper scrim that scales up on smaller screens
   where the text block covers most of the image.
   -------------------------------------------------------------------------- */

.hero_absol-image,
.brand-hero_absol-image {
  filter: saturate(.92) brightness(.86);
}

.hero_absol-gradient,
.brand-hero_absol-gradient {
  background-image:
    linear-gradient(to top, rgba(3, 3, 21, .92) 0%, rgba(3, 3, 21, .72) 26%, rgba(3, 3, 21, .34) 55%, rgba(3, 3, 21, .14) 78%, rgba(3, 3, 21, .08) 100%),
    linear-gradient(105deg, rgba(3, 3, 21, .78) 0%, rgba(3, 3, 21, .38) 45%, rgba(3, 3, 21, .12) 100%);
}

/* Lift the copy off the photo a little more without changing the type scale. */
.home-hero_heading,
.hero_para,
.hero_eyebrow-text,
.brand-hero_heading,
.brand-hero_para {
  text-shadow: 0 1px 24px rgba(3, 3, 21, .45);
}

@media screen and (max-width: 991px) {
  .hero_absol-image,
  .brand-hero_absol-image {
    filter: saturate(.9) brightness(.72);
  }

  .hero_absol-gradient,
  .brand-hero_absol-gradient {
    background-image:
      linear-gradient(to top, rgba(3, 3, 21, .95) 0%, rgba(3, 3, 21, .86) 42%, rgba(3, 3, 21, .68) 72%, rgba(3, 3, 21, .5) 100%);
  }

  /* The decorative data lines add visual noise straight through the headline
     on narrow screens. Keep them, but well under the copy. */
  .hero_absol-lines {
    opacity: .35;
  }
}

/* --------------------------------------------------------------------------
   2. Navbar "Resources" dropdown
   -------------------------------------------------------------------------- */

.nav_dropdown {
  position: relative;
  display: flex;
}

.nav_dropdown-toggle {
  grid-column-gap: var(--_responsive---spacing--8px);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.nav_dropdown-caret {
  width: .5rem;
  height: .5rem;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}

.nav_dropdown.is-open .nav_dropdown-caret {
  transform: translateY(1px) rotate(-135deg);
}

.nav_dropdown-list {
  z-index: 20;
  min-width: 17rem;
  padding: .5rem;
  margin: 0;
  border-radius: var(--_core---border-radius--xsm);
  border: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 30%, transparent);
  background-color: var(--_color---absolute-shades--white);
  box-shadow: 0 18px 44px rgba(3, 3, 21, .16);
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.375rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  list-style: none;
}

.nav_dropdown.is-open .nav_dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav_dropdown-link {
  grid-column-gap: .875rem;
  padding: .75rem .875rem;
  border-radius: var(--_core---border-radius--xsm);
  color: var(--_color---gray-shades--gray-600);
  text-decoration: none;
  align-items: flex-start;
  display: flex;
  transition: background-color .2s ease;
}

.nav_dropdown-link:hover {
  background-color: var(--_color---blue-shades--blue-100);
}

.nav_dropdown-link-dot {
  width: .5rem;
  height: .5rem;
  margin-top: .4rem;
  border-radius: 50%;
  flex: none;
  background-color: var(--_color---blue-shades--blue-400);
}

.nav_dropdown-link-title {
  display: block;
  font-weight: 500;
  color: var(--_color---gray-shades--gray-600);
}

.nav_dropdown-link-desc {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--_color---gray-shades--gray-500);
}

@media screen and (max-width: 991px) {
  /* Inside the mobile sheet the menu is a stacked column — render the submenu
     inline underneath its parent rather than as a floating panel. */
  .nav_dropdown {
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav_dropdown-list {
    position: static;
    min-width: 0;
    width: 100%;
    padding: 0 0 0 1.125rem;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .nav_dropdown.is-open .nav_dropdown-list {
    display: block;
  }

  .nav_dropdown-link {
    padding: .5rem 0;
    color: var(--navbar--menu-text-color);
  }

  .nav_dropdown-link:hover {
    background-color: transparent;
  }

  .nav_dropdown-link-desc {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Blog index
   -------------------------------------------------------------------------- */

.blog-hero_component {
  max-width: 56rem;
}

.blog-hero_eyebrow {
  grid-column-gap: .75rem;
  align-items: center;
  display: flex;
}

.blog-hero_eyebrow-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex: none;
  background-color: var(--_color---blue-shades--blue-400);
}

.blog-hero_eyebrow-text {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Filter bar --------------------------------------------------------------- */

.blog-filter_bar {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.blog-filter_list {
  grid-column-gap: 2rem;
  grid-row-gap: .75rem;
  padding-left: 0;
  margin: 0;
  flex-flow: wrap;
  align-items: center;
  display: flex;
  list-style: none;
}

.blog-filter_button {
  padding: .25rem 0;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--_typography---fonts--body-font);
  font-size: 1rem;
  color: var(--_color---gray-shades--gray-500);
  transition: color .2s ease, border-color .2s ease;
}

.blog-filter_button:hover {
  color: var(--_color---blue-shades--blue-400);
}

.blog-filter_button.is-active {
  color: var(--_color---gray-shades--gray-600);
  border-bottom-color: var(--_color---blue-shades--blue-400);
}

.blog-filter_count {
  margin: 0;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
}

/* Card grid ---------------------------------------------------------------- */

.blog-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 3.5rem;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.blog-card {
  color: inherit;
  text-decoration: none;
  flex-flow: column;
  display: flex;
}

.blog-card_media {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  border-radius: var(--_core---border-radius--md);
  overflow: hidden;
  position: relative;
}

.blog-card_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.blog-card:hover .blog-card_media img {
  transform: scale(1.04);
}

.blog-card_tag {
  padding: .3125rem .75rem;
  border-radius: var(--_core---border-radius--round);
  background-color: var(--_color---absolute-shades--white);
  color: var(--_color---gray-shades--gray-600);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.blog-card_title {
  margin: 0;
  transition: color .2s ease;
}

.blog-card:hover .blog-card_title {
  color: var(--_color---blue-shades--blue-400);
}

.blog-card_excerpt {
  margin: .75rem 0 0;
  color: var(--_color---gray-shades--gray-500);
}

.blog-card_meta {
  grid-column-gap: .5rem;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
  align-items: center;
  display: flex;
}

.blog-card_meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}

/* Featured card takes the full row width on desktop. */
.blog-card.is-featured {
  grid-column: span 3;
  grid-column-gap: 3rem;
  align-items: center;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.blog-card.is-featured .blog-card_media {
  aspect-ratio: 16 / 10;
  margin-bottom: 0;
}

/* The category filter hides cards by setting the native [hidden] attribute.
   .blog-card sets display:flex (and .is-featured display:grid), both of which
   outrank the user-agent [hidden] rule, so a filtered card would otherwise
   stay visible. Force it off. */
.blog-card[hidden] {
  display: none !important;
}

.blog-empty {
  grid-column: 1 / -1;
  padding: 4rem 0;
  text-align: center;
  color: var(--_color---gray-shades--gray-500);
}

@media screen and (max-width: 991px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card.is-featured {
    grid-column: span 2;
    grid-template-columns: 1fr;
    grid-row-gap: 1.5rem;
  }

  .blog-card.is-featured .blog-card_media {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .blog-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 2.5rem;
  }

  .blog-card.is-featured {
    grid-column: span 1;
  }

  /* Keep the categories on one swipeable line rather than wrapping into an
     awkward second row, and put the count above them. */
  .blog-filter_bar {
    grid-row-gap: .875rem;
    flex-flow: column;
    align-items: stretch;
  }

  .blog-filter_count {
    order: -1;
  }

  .blog-filter_list {
    grid-column-gap: 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .blog-filter_list::-webkit-scrollbar {
    display: none;
  }

  .blog-filter_button {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   4. Blog article
   -------------------------------------------------------------------------- */

.article_shell {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.article_crumbs {
  grid-column-gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.article_crumbs a {
  color: var(--_color---gray-shades--gray-500);
  text-decoration: none;
}

.article_crumbs a:hover {
  color: var(--_color---blue-shades--blue-400);
}

.article_lede {
  margin: 1.25rem 0 0;
  color: var(--_color---gray-shades--gray-500);
}

.article_byline {
  grid-column-gap: .875rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  align-items: center;
  display: flex;
}

.article_avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  flex: none;
  background-color: var(--_color---blue-shades--blue-400);
  color: var(--_color---absolute-shades--white);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.article_author {
  margin: 0;
  font-weight: 500;
}

.article_byline-meta {
  margin: .125rem 0 0;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
}

.article_cover {
  border-radius: var(--_core---border-radius--md);
  overflow: hidden;
}

.article_cover img {
  width: 100%;
  height: auto;
  display: block;
}

.article_cover .photo-credit {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--_color---gray-shades--gray-500);
}

/* Body copy ---------------------------------------------------------------- */

.article_body {
  font-family: var(--_typography---fonts--body-font);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--_color---gray-shades--gray-600);
}

.article_body > * + * {
  margin-top: 1.5rem;
}

.article_body h2 {
  margin-top: 3.5rem;
  margin-bottom: 0;
  font-family: var(--_typography---h4--font);
  font-size: var(--_fluide-type---font-size--h5);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}

.article_body h3 {
  margin-top: 2.5rem;
  margin-bottom: 0;
  font-family: var(--_typography---h6--font);
  font-size: var(--_fluide-type---font-size--h6);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
}

/* Inline links only — the Webflow .button component brings its own colours. */
.article_body a:not(.button) {
  color: var(--_color---blue-shades--blue-400);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.article_body ul,
.article_body ol {
  padding-left: 1.25rem;
}

.article_body li + li {
  margin-top: .625rem;
}

.article_body strong {
  font-weight: 500;
}

.article_body em {
  font-family: var(--_typography---fonts--italic-font);
  font-size: 1.08em;
}

.article_body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1.75rem 2rem;
  border-left: 3px solid var(--_color---blue-shades--blue-400);
  border-radius: 0 var(--_core---border-radius--xsm) var(--_core---border-radius--xsm) 0;
  background-color: var(--_color---blue-shades--blue-100);
  font-family: var(--_typography---fonts--italic-font);
  font-size: 1.375rem;
  line-height: 1.45;
}

.article_body blockquote p {
  margin: 0;
}

.article_body figure {
  margin-left: 0;
  margin-right: 0;
}

.article_body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--_core---border-radius--md);
  display: block;
}

.article_body figcaption {
  margin-top: .75rem;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
}

.article_body hr {
  height: 1px;
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: 0;
  background-color: color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
}

/* Pull-out stat / callout panels used inside the research pieces. */
.article_callout {
  padding: 2rem;
  border-radius: var(--_core---border-radius--md);
  background-color: var(--_color---secondary-shades--lime-100);
  border: 1px solid color-mix(in srgb, var(--_color---secondary-shades--lime-400) 30%, transparent);
}

.article_callout-label {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--_color---secondary-shades--lime-500);
}

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

.article_stat-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.article_stat {
  padding: 1.75rem 1.5rem;
  border-radius: var(--_core---border-radius--md);
  background-color: var(--_color---gray-shades--gray-100);
}

.article_stat-value {
  margin: 0;
  font-family: var(--_typography---h4--font);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--_color---blue-shades--blue-400);
}

.article_stat-label {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--_color---gray-shades--gray-500);
}

@media screen and (max-width: 767px) {
  .article_stat-grid {
    grid-template-columns: 1fr;
  }

  .article_body {
    font-size: 1.0625rem;
  }
}

/* Article footer / next reads --------------------------------------------- */

.article_share {
  grid-column-gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.article_share-label {
  margin: 0;
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-500);
}

.article_share-link {
  padding: .4375rem 1rem;
  border-radius: var(--_core---border-radius--round);
  border: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 45%, transparent);
  font-size: .875rem;
  color: var(--_color---gray-shades--gray-600);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.article_share-link:hover {
  border-color: var(--_color---blue-shades--blue-400);
  color: var(--_color---blue-shades--blue-400);
}

/* Research components ------------------------------------------------------
   The long-form research pieces carry a few recurring devices: a "short
   answer" panel, a stat strip, method notes, horizontal bar charts and a 2x2
   positioning grid. All drawn with the site's own tokens.
   -------------------------------------------------------------------------- */

.article_key-answer {
  padding: 2rem;
  border-radius: var(--_core---border-radius--md);
  background-color: var(--_color---blue-shades--blue-100);
  border-left: 3px solid var(--_color---blue-shades--blue-400);
}

.article_key-answer-label {
  margin: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--_color---blue-shades--blue-500);
}

.article_key-answer p:last-child {
  margin: 0;
}

.article_method {
  padding: 1.75rem 2rem;
  border-radius: var(--_core---border-radius--md);
  border: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  background-color: var(--_color---gray-shades--gray-100);
  font-size: 1rem;
  line-height: 1.6;
}

.article_method h4 {
  margin: 0 0 1rem;
  font-family: var(--_typography---fonts--body-font);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--_color---gray-shades--gray-600);
}

/* "Source.", "Scope." etc. read as lead-in labels rather than inline bold. */
.article_method strong {
  color: var(--_color---gray-shades--gray-600);
  font-weight: 500;
}

.article_method p {
  margin: 0 0 .875rem;
  color: var(--_color---gray-shades--gray-500);
}

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

/* Horizontal bar chart ----------------------------------------------------- */

.article_chart {
  padding: 2rem;
  border-radius: var(--_core---border-radius--md);
  border: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  background-color: var(--_color---absolute-shades--white);
}

.article_chart-title {
  margin: 0;
  font-family: var(--_typography---h6--font);
  font-size: 1.125rem;
  font-weight: 500;
}

.article_chart-sub {
  margin: .375rem 0 1.75rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--_color---gray-shades--gray-500);
}

.article_chart-row {
  grid-column-gap: 1rem;
  margin-bottom: .875rem;
  align-items: center;
  display: grid;
  grid-template-columns: 6.5rem 1fr 3.25rem;
}

.article_chart-label {
  font-size: .875rem;
  line-height: 1.3;
  color: var(--_color---gray-shades--gray-500);
}

.article_chart-track {
  height: 1.5rem;
  border-radius: var(--_core---border-radius--round);
  background-color: var(--_color---gray-shades--gray-100);
  overflow: hidden;
}

.article_chart-fill {
  height: 100%;
  border-radius: var(--_core---border-radius--round);
  background-color: var(--_color---blue-shades--blue-400);
  display: block;
}

.article_chart-fill.is-soft {
  background-color: var(--_color---blue-shades--blue-300);
}

.article_chart-value {
  font-size: .9375rem;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.article_chart-foot {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 30%, transparent);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--_color---gray-shades--gray-500);
}

/* 2x2 positioning grid ----------------------------------------------------- */

.article_quad-axis {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--_color---gray-shades--gray-500);
}

.article_quad {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.article_quad-cell {
  padding: 1.75rem 1.5rem;
  border-radius: var(--_core---border-radius--md);
  border: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 35%, transparent);
  background-color: var(--_color---absolute-shades--white);
}

.article_quad-cell.is-hi {
  border-color: var(--_color---blue-shades--blue-400);
  background-color: var(--_color---blue-shades--blue-100);
}

.article_quad-title {
  margin: 0 0 .5rem;
  font-family: var(--_typography---h6--font);
  font-size: 1.125rem;
  font-weight: 500;
}

.article_quad-desc {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--_color---gray-shades--gray-500);
}

@media screen and (max-width: 767px) {
  .article_quad {
    grid-template-columns: 1fr;
  }

  .article_chart {
    padding: 1.5rem 1.25rem;
  }

  .article_chart-row {
    grid-template-columns: 4.75rem 1fr 2.75rem;
    grid-column-gap: .625rem;
  }

  .article_key-answer,
  .article_method,
  .article_callout {
    padding: 1.5rem 1.25rem;
  }
}

/* In-article conversion panel ---------------------------------------------- */

.article_cta-panel {
  padding: 2.5rem;
  border-radius: var(--_core---border-radius--md);
  background-color: var(--_color---gray-shades--gray-600);
  color: var(--_color---absolute-shades--white);
}

.article_cta-panel h4 {
  margin: 0 0 .75rem;
  font-family: var(--_typography---h5--font);
  font-size: 1.5rem;
  font-weight: 500;
}

.article_cta-panel p {
  margin: 0 0 1.75rem;
  color: color-mix(in srgb, var(--_color---absolute-shades--white) 78%, transparent);
}

/* .button is display:flex, so it would stretch edge to edge in this block. */
.article_cta-panel .button {
  display: inline-flex;
}

.article_cta-panel .button_wrap {
  width: auto;
}

/* Related reading ---------------------------------------------------------- */

.article_related-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media screen and (max-width: 767px) {
  .article_related-grid {
    grid-template-columns: 1fr;
  }

  .article_cta-panel {
    padding: 1.75rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. Mobile navigation sheet
   The exported menu was a short, 70%-opaque card: page content read straight
   through it, the links were 26px tall (well under a comfortable tap target)
   and the CTA was a small left-aligned pill. This turns it into a full-height
   opaque sheet with large, generously spaced rows.

   webflow.js writes an inline pixel height onto .w-nav-overlay as it animates
   the menu open, so the sizing here has to be !important to win against it.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  /* A fixed child is positioned against the nearest ancestor that has a
     transform or backdrop-filter, not the viewport. .navbar carries
     backdrop-filter and GSAP leaves a transform on .nav_component, which
     between them pinned the sheet inside the 358x56 navbar. Drop both while
     the sheet is mounted so it can actually fill the screen. GSAP writes its
     transform inline, hence !important.

     These key off the menu's own [data-nav-menu-open], not the burger's
     .w--open class. webflow.js strips .w--open the moment a close starts but
     leaves the sheet mounted for the whole close animation, so keying on
     .w--open handed the sheet its transformed, blurred containing block back
     mid-close: the full-screen panel snapped into the navbar box and sat
     there until the attribute was dropped. That was the closing glitch. */
  .nav_component:has(.nav_menu.w-nav-menu[data-nav-menu-open]) {
    transform: none !important;
    translate: none !important;
    filter: none !important;
  }

  .navbar:has(.nav_menu.w-nav-menu[data-nav-menu-open]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The sheet covers the viewport and scrolls itself, so the page behind it
     is held still with a plain overflow lock (js/hale-custom.js toggles
     .is-nav-open). No scroll events are intercepted. */
  html.is-nav-open,
  html.is-nav-open body {
    overflow: hidden;
  }

  .nav_component .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .nav_component .nav_menu.w-nav-menu[data-nav-menu-open] {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0;
    background-color: var(--_color---absolute-shades--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: nav-sheet-in .26s cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes nav-sheet-in {
    from { opacity: 0; transform: translateY(-.75rem); }
    to   { opacity: 1; transform: none; }
  }

  /* Closing. .w--open is gone by now but the sheet is still mounted, so it
     needs its own exit: webflow.js closes by tweening an inline transform on
     the menu, and a filled `both` animation outranks inline styles, so the
     sheet would otherwise hang there fully opaque until webflow tore it
     down. Fading it out here also means the burger animating back to three
     lines matches what the sheet is doing. */
  .nav_component:has(.nav_button:not(.w--open)) .nav_menu.w-nav-menu[data-nav-menu-open] {
    animation: nav-sheet-out .22s cubic-bezier(.4, 0, 1, 1) both;
  }

  @keyframes nav-sheet-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-.5rem); }
  }

  /* The overlay stays in the DOM at full size until the close animation
     finishes. Once the sheet is on its way out it must not swallow taps
     aimed at the page underneath. */
  .nav_component:has(.nav_button:not(.w--open)) .w-nav-overlay,
  .nav_component:has(.nav_button:not(.w--open)) .nav_menu.w-nav-menu[data-nav-menu-open] {
    pointer-events: none;
  }

  /* Keep the wordmark and the close control above the opaque sheet. */
  .nav_container .nav_brand,
  .nav_container .nav_button {
    position: relative;
    z-index: 3;
  }

  /* Each page inks the wordmark black for the sheet with an embedded
     .nav_container:has(.nav_button.w--open) rule, and that key dies the
     instant the close starts: over a dark hero the wordmark snapped back to
     white while the cream sheet was still on screen, so it vanished into it
     for a beat. Ease the colour over the same window the sheet fades across
     and the two settle together. */
  .nav_container .nav_brand {
    transition: color .22s ease;
  }

  /* Lock the page behind the sheet on every collapsed width, not only on
     coarse pointers as the exported rule did. */
  body:has(.nav_component .nav_button.w--open) {
    overflow: hidden;
  }

  /* Mirror .navbar's width math and .nav_container's padding so the sheet's
     rows line up with the wordmark and the close button above them. */
  .nav_menu-wrapper {
    grid-row-gap: 2rem;
    width: calc(100% - var(--_core---site--margin) * 2);
    max-width: var(--_core---container--large);
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 7rem var(--_responsive---spacing--16px) calc(2rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .nav_menu_link-list {
    grid-row-gap: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .nav_menu_link-list > li {
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--_color---gray-shades--gray-400) 32%, transparent);
  }

  .nav_menu_link {
    grid-column-gap: .75rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 1rem 0;
    font-size: 1.75rem;
    line-height: 1.15;
    align-items: center;
  }

  /* The dot grows 0 → 8px on hover, which nudges the label sideways. On touch
     that hover state sticks after a tap, so rows visibly shift. Drop the dot
     in the sheet and mark the current page with colour instead. */
  .nav_menu_link .nav-link_dot,
  .nav_menu_link:hover .nav-link_dot,
  .nav_menu_link.w--current .nav-link_dot {
    display: none;
  }

  .nav_menu_link.w--current,
  .nav_menu_link.w--current .nav_menu_link-text {
    color: var(--_color---blue-shades--blue-400);
  }

  /* Resources submenu inside the sheet */
  .nav_dropdown-toggle {
    justify-content: space-between;
  }

  .nav_dropdown-caret {
    width: .625rem;
    height: .625rem;
    margin-left: auto;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .nav_dropdown-list {
    padding: 0 0 .75rem;
  }

  .nav_dropdown-link {
    min-height: 3rem;
    padding: .75rem 0 .75rem 1.25rem;
    font-size: 1.25rem;
    align-items: center;
  }

  .nav_dropdown-link-title {
    font-size: 1.25rem;
    font-weight: var(--_core---font-weight--light);
  }

  .nav_dropdown-link-dot {
    width: .375rem;
    height: .375rem;
    margin-top: 0;
  }

  /* Full-width CTA pinned to the bottom of the sheet */
  .nav_menu_btn-wrap {
    width: 100%;
    margin-top: auto;
    padding-top: 1.5rem;
    display: block;
  }

  .nav_menu_btn-wrap .button {
    width: 100%;
    min-height: 3.5rem;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }

  .nav_menu_btn-wrap .button_wrap {
    width: 100%;
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .nav_component .nav_menu.w-nav-menu[data-nav-menu-open] {
    animation: none;
  }

  /* No fade, but the sheet still has to leave the screen when the close
     starts rather than linger until webflow unmounts it. */
  .nav_component:has(.nav_button:not(.w--open)) .nav_menu.w-nav-menu[data-nav-menu-open] {
    animation: none;
    opacity: 0;
  }

  .nav_container .nav_brand {
    transition: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Tablet: same full-bleed sheet, but hold the rows to a readable column
     rather than stretching a link and a CTA across the whole width. */
  .nav_menu-wrapper {
    padding-top: 8rem;
  }

  .nav_menu_link-list,
  .nav_menu_btn-wrap {
    max-width: 26rem;
  }

  .nav_menu_link {
    min-height: 4.25rem;
    font-size: 2rem;
  }

  .nav_dropdown-link {
    font-size: 1.375rem;
  }

  .nav_dropdown-link-title {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 767px) {
  /* .nav_container switches to the 12px spacing token here, so the sheet has
     to follow or the rows stop lining up with the wordmark. */
  .nav_menu-wrapper {
    padding-left: var(--_responsive---spacing--12px);
    padding-right: var(--_responsive---spacing--12px);
  }
}

@media screen and (max-width: 479px) {
  .nav_menu-wrapper {
    padding-top: 6.5rem;
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }

  .nav_menu_link {
    min-height: 3.5rem;
    font-size: 1.5rem;
  }
}