/* Theme base styles
   ITCSS layer order: generic → elements → objects → components → utilities.
   Tools (`_macros.css`) is imported per-stylesheet where macros are used, not here.
   Templates (`css/templates/system.css`) is loaded per-system-page via the `template_css` variable. */

/* Generic
   Reset, normalize, box-sizing. No class selectors. */

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* 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;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 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: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, 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: 1em; /* 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.25em;
}

sup {
  top: -0.5em;
}

/* 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 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 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;
}

/**
 * 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.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * 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 */
  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 and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Elements
   Bare HTML element styles: typography, buttons, forms, tables. */

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
  font-weight: 400;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  /* border-left: 2px solid; */
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #ccc;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button,
.hs-blog-post-listing__post-button {
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.06rem;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #d0d0d0;
  border-color: #d0d0d0;
  color: #e6e6e6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.6rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  font-family: --var(--font-family-serif);
  text-transform: uppercase;
  color: --var(--color-text);
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button,
form .hsfc-Button{
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
  border-radius: var(--radius-pill);
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Objects
   Non-cosmetic layout primitives: grid, DnD area containers. */



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (width >= 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
/* Sticky footer — <main> grows to fill the viewport so the footer sits at
   the bottom of the screen instead of floating up on short pages. */

.body-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body-container-wrapper {
  flex: 1 0 auto;
}

.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (width >= 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (width <= 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Horizontally center images that sit in narrow dnd blocks — the logo bar
   places six span2 images across. @hubspot/linked_image has no alignment
   field, and the page editor exposes only padding and margin for it, so CSS
   is the only lever. Scoped to span2 and to blocks that actually contain an
   image, so the wider editorial images (span4/span6 in about.html) keep their
   current alignment. The span2 class stays in the markup at every width — the
   grid only overrides its width — so this also centers the stacked logos on
   mobile. */

.dnd-module.span2:has(img),
.dnd-column.span2 .dnd-module:has(img) {
  text-align: center;
}

/* Components
   Named UI pieces: header, default module styles. */

/* ==========================================================================
   Header
   ========================================================================== */

/* Accessibility skip link */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  width: 1px;
}

.header__skip:focus {
  background: var(--color-yellow);
  color: var(--color-navy);
  height: auto;
  left: 1rem;
  overflow: visible;
  padding: 0.5rem 1rem;
  top: 1rem;
  width: auto;
  z-index: 200;
}

/* Sticky bar — every viewport.
   base.html wraps the header module in .header-sticky because HubSpot renders
   module-tag output inside its own hs_cos_wrapper div. A sticky element can
   only travel inside its parent's box, and that wrapper is exactly the header's
   height, so sticky on .header alone never sticks. The outer wrapper has to be
   the sticky element. .header stays sticky for the templates that render a
   header partial directly (landing-page, system pages). */

.header-sticky,
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The wrapper HubSpot injects between .header-sticky and .header must not
   introduce its own box quirks — it is purely structural. */

.header-sticky > .hs_cos_wrapper {
  display: block;
}

.header .dnd-section {
  padding: 0;
}

/* -------------------------------------------------------------------------
   Grid layout: [logo | nav (1fr) | actions]
   Using grid instead of flex so column widths are explicit and predictable.
   min-width: 0 on nav prevents the HubSpot module wrapper from blowing out.
   ------------------------------------------------------------------------- */

.header__container {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo nav actions";
  height: var(--header-height);
  padding: 0 3rem;
  width: 100%;
}

/* Logo — left column, natural width */

.header__logo {
  grid-area: logo;
  flex-shrink: 0;
  height: calc(var(--header-height) - 10px);
  margin-right: 2rem;
  max-width: 150px;
  padding: 5px 0;
}

.header__logo img {
  aspect-ratio: 488.63 / 193.53;
  display: block;
  height: 100%;
  width: auto;
}

.header__logo .logo-company-name {
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Nav — middle column, takes remaining space, clipped so wrapper can't expand */

.header__navigation {
  align-items: center;
  display: flex;
  grid-area: nav;
  justify-content: start;
  min-width: 0;
  overflow: hidden;
}

/* Force HubSpot module wrapper to not expand beyond nav column */

.header__navigation > div {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

/* Desktop menu */

.menu--desktop {
  align-items: center;
  display: flex;
  min-width: 0;
}

.menu--desktop .menu__wrapper {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu--desktop .menu__item {
  flex-shrink: 0;
  position: relative;
}

.menu--desktop .menu__link {
  color: var(--color-white);
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 0.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition);
  white-space: nowrap;
}

.header .menu--desktop .menu__link:hover,
.header .menu--desktop .menu__link:focus {
  color: var(--color-yellow);
}

.menu--desktop .menu__link--active-link {
  color: var(--color-yellow);
}

/* Desktop dropdowns */

.menu--desktop .menu__submenu {
  background-color: #141e2e;
  border-top: 2px solid var(--color-yellow);
  display: none;
  left: 0;
  min-width: 180px;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  z-index: 50;
}

.menu--desktop .menu__item--open > .menu__submenu {
  display: block;
}

.menu--desktop .menu__submenu .menu__link {
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.menu--desktop .menu__submenu .menu__link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-yellow);
}

/* Hide mobile menu on desktop */

.menu--mobile {
  display: none;
}

/* Actions — right column, natural width */

.header__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  grid-area: actions;
  margin-left: 1rem;
}

.header__btn-assessment {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-yellow);
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-pill);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--transition);
  white-space: nowrap;
  letter-spacing: 0.12em;
}

.header__btn-assessment:hover,
.header__btn-assessment:focus {
  background-color: var(--color-yellow-hover);
  color: var(--color-navy);
}

.header__btn-assessment:focus-visible {
  /* outline is always rectangular regardless of border-radius — box-shadow
     follows the pill shape instead, so focus doesn't look square-cornered. */
  box-shadow: 0 0 0 2px var(--color-navy);
  /* outline: none; */
}

.header__btn-login {
  align-items: center;
  color: var(--color-yellow);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  gap: 0.4rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 0.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition);
  white-space: nowrap;
}

.header__btn-login svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.header__btn-login:hover,
.header__btn-login:focus {
  color: var(--color-white);
}

.header__btn-login:hover svg,
.header__btn-login:focus svg {
  opacity: 1;
}

/* Child toggle arrow */

.menu__child-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.2rem;
}

.menu__child-toggle-icon {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.6);
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}

/* Mobile bar — hidden on desktop */

.header__mobile-bar {
  display: none;
}

/* Hamburger icon */

.header__navigation--toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Crect y='0' width='22' height='2' rx='1' fill='%23ffffff'/%3E%3Crect y='7' width='22' height='2' rx='1' fill='%23ffffff'/%3E%3Crect y='14' width='22' height='2' rx='1' fill='%23ffffff'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 22px;
  padding: 1.4rem;
  width: 22px;
}

/* ==========================================================================
   Mobile full-screen menu — native <dialog>
   Mirrors assessment-modal.module's pattern (fixed full-screen dialog +
   showModal()/close()) so Escape, backdrop-click, and focus-trap are native
   browser behavior instead of hand-rolled JS.
   ========================================================================== */

.header__mobile-menu {
  background-color: #141e2e;
  border: none;
  height: 100vh;
  margin: 0;
  max-height: 100vh;
  max-width: 100vw;
  padding: 0;
  transform: translateX(100%);
  transition:
    transform 0.4s ease,
    overlay 0.4s ease allow-discrete,
    display 0.4s ease allow-discrete;
  width: 100vw;
}

.header__mobile-menu[open] {
  transform: translateX(0);
}

@starting-style {
  .header__mobile-menu[open] {
    transform: translateX(100%);
  }
}

.header__mobile-menu::backdrop {
  background-color: rgba(5, 28, 44, 0.6);
}

.header__mobile-menu-inner {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 5.5rem 1.5rem 6rem;
  position: relative;
  align-content: center;
}

.header__mobile-menu-close {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0.8rem;
  position: fixed;
  right: 1.25rem;
  top: 1rem;
  transition:
    background-color var(--transition),
    color var(--transition);
  z-index: 10;
}

.header__mobile-menu-close:hover,
.header__mobile-menu-close:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-yellow);
}

.header__mobile-menu-close:focus-visible {
  box-shadow: 0 0 0 2px var(--color-yellow);
  outline: none;
}

/* Reuses .header__logo/.header__logo img sizing (defined above); only the
   position within the dialog needs to change. */

.header__mobile-menu .header__logo {
  left: 1.25rem;
  margin-right: 0;
  max-width: 130px;
  position: fixed;
  top: 1rem;
  z-index: 10;
}

.header__mobile-menu .menu--mobile {
  display: block;
  width: 100%;
}

.header__mobile-menu .menu--mobile .menu__wrapper {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__mobile-menu .menu--mobile .menu__link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: block;
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 1.1rem 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition);
}

.header__mobile-menu .menu--mobile .menu__link:hover,
.header__mobile-menu .menu--mobile .menu__link:focus {
  color: var(--color-yellow);
}

/* Member login / Resources — folded into the mobile nav list itself so it
   reads as a nav item rather than a floating action; module.html renders it
   last and main.js moves it right after "Contact" when that item exists. */

.header__mobile-menu .menu__item--login .menu__link {
  color: var(--color-yellow);
}

.header__mobile-menu-cta {
  background-color: #141e2e;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  bottom: 0;
  left: 0;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 10;
}

.header__mobile-menu-cta .header__btn-assessment {
  font-size: 0.95rem;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

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

/* ==========================================================================
   Mobile (≤1020px)
   ========================================================================== */

@media (width <= 1020px) {
  .header__container {
    display: flex;
    flex-wrap: wrap;
    grid-template-areas: none;
    grid-template-columns: none;
    height: auto;
    justify-content: space-between;
    padding: 1rem 1.25rem;
  }

  .header__logo {
    margin-right: 0;
    max-width: 120px;
  }

  .header__mobile-bar {
    align-items: center;
    display: flex;
  }

  /* Desktop nav/actions and the mobile full-screen menu are separate elements
     now (see .header__mobile-menu above) — just hide the desktop ones here. */

  .header__navigation,
  .header__actions {
    display: none;
  }

  .menu--desktop {
    display: none;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (width <= 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (width <= 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (width <= 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Utilities
   Single-responsibility helpers that override everything above. */

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (width <= 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/* Highlight label — 6px accent bar + uppercase tracked label.
   Repeats across nearly every marketing section (Home/Programs/Corporate/
   About/Blog/Contact). Bar color flips to `--on-dark`/`--on-accent` when the
   surrounding background can't show the default yellow bar or navy label. */

.highlight {
  align-items: stretch;
  display: inline-flex;
  gap: 0.875rem;
}

.highlight__bar {
  background-color: var(--color-yellow);
  flex: 0 0 auto;
  width: 6px;
}

.highlight__label {
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.highlight--on-dark .highlight__label {
  color: var(--color-cream);
}

/* Used on yellow backgrounds, where a yellow bar would disappear. */

.highlight--on-accent .highlight__bar {
  background-color: var(--color-cream);
}

/* Heading emphasis — the "Barlow upright + Playfair italic word(s)" pattern.
   Wrap a heading with this class so any <em> inside it renders in the
   secondary (serif) font instead of an italicized sans-serif. */

.heading-emphasis em {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.2rem;
}

/* Rich text colour snapping — keeps the RTE's text colour button on-brand.

   HubSpot gives no way to restrict the rich text colour picker to a fixed
   palette, so it writes whatever the editor picked as an inline hex/rgb.
   These rules catch the five canonical ABI hexes and re-point them at the
   theme tokens, so a colour changed in theme settings still flows through
   to existing copy instead of going stale. The match targets are the
   original palette values — deliberately literal, not tokens, because the
   published HTML holds whatever hex was current when it was written.

   `!important` is required: an inline style attribute otherwise wins.

   The match must be anchored to `color:` and exclude any element that also
   sets a background inline. A bare `[style*="#051C2C"]` also matches
   `background:#051C2C`, which forced navy text onto the navy panels in the
   Contact/About/Legal templates — the copy went invisible against its own
   background, and children inherited it. RTE-authored spans never carry a
   background (the RTE's background-colour button is not enabled on any of
   our richtext fields, only `text_color`), so the guard only ever excludes
   hand-authored panels, which set their own text colour anyway. */

[style*="color:#051C2C" i]:not([style*="background" i]),
[style*="color: #051C2C" i]:not([style*="background" i]),
[style*="color:rgb(5, 28, 44)"]:not([style*="background" i]),
[style*="color: rgb(5, 28, 44)"]:not([style*="background" i]) {
  color: var(--color-navy) !important;
}

[style*="color:#FBF8E8" i]:not([style*="background" i]),
[style*="color: #FBF8E8" i]:not([style*="background" i]),
[style*="color:rgb(251, 248, 232)"]:not([style*="background" i]),
[style*="color: rgb(251, 248, 232)"]:not([style*="background" i]) {
  color: var(--color-cream) !important;
}

[style*="color:#38584B" i]:not([style*="background" i]),
[style*="color: #38584B" i]:not([style*="background" i]),
[style*="color:rgb(56, 88, 75)"]:not([style*="background" i]),
[style*="color: rgb(56, 88, 75)"]:not([style*="background" i]) {
  color: var(--color-green) !important;
}

[style*="color:#81312F" i]:not([style*="background" i]),
[style*="color: #81312F" i]:not([style*="background" i]),
[style*="color:rgb(129, 49, 47)"]:not([style*="background" i]),
[style*="color: rgb(129, 49, 47)"]:not([style*="background" i]) {
  color: var(--color-red) !important;
}

[style*="color:#F3DD6D" i]:not([style*="background" i]),
[style*="color: #F3DD6D" i]:not([style*="background" i]),
[style*="color:rgb(243, 221, 109)"]:not([style*="background" i]),
[style*="color: rgb(243, 221, 109)"]:not([style*="background" i]) {
  color: var(--color-yellow) !important;
}