/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

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

/* In-page anchor links glide instead of jumping. Reduced motion turns it off:
   a scroll the user did not drive is exactly the kind of movement that setting
   exists to suppress, and an instant jump is the correct fallback. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/*! 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;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* 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 (min-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));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

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

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

/* Anchor targets have to clear the fixed header stack, and HubSpot's native anchors
   land in two different places: a section's Anchor ID is written onto the
   .dnd-section wrapper, while the rich text editor's "insert anchor" writes an
   inline element inside the content. Covering any element that carries an id
   catches both. scroll-margin only does anything when the element is actually
   scrolled to, so it is inert everywhere else.

   The offset is the measured header height plus a gap. --ar-header-offset is
   published by js/main.js from `.site-header`'s height, and `.site-header` fixes
   the announcement bar and the header row as one stack, so it is the whole
   obstruction. `.site-header--scrolled` only repaints -- it changes background and
   border colour, not height -- so the measurement stays valid through the jump and
   needs no padding for state changes. The added --ar-space-xs is deliberate
   spacing, so the target starts clear of the bar rather than flush against it.
   The fallback only applies before js/main.js runs; 129px is the larger of the two
   values _header.css uses, because erring tall opens a gap while erring short
   hides content. */
[id] {
  scroll-margin-top: calc(var(--ar-header-offset, 129px) + var(--ar-space-xs));
}

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

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

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* 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: var(--ar-leading-body, 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;
}

/* 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 var(--ar-color-border, #CCC);
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

/* AlphaRoute text utilities

   Audited from the production site so future modules (hero, CTA band, cards, metrics)
   can reuse them without re-deriving values.

   .text-lead   -- Uncode .text-lead: 18px / 1.75
   .eyebrow     -- Uncode .font-ui-fixed: 12px, .05em, uppercase. Production requests
                   weight 600, but Roboto 600 is never loaded there so browsers render 700;
                   700 is used here to match what visitors actually see.
   .text-display -- hero scale. Desktop reference only; the responsive curve
                   (70 -> 40 at <=800px -> 30 at <=500px) belongs with the hero markup. */

.text-lead {
  font-size: var(--ar-text-lead);
  line-height: var(--ar-leading-lead);
}

.text-small {
  font-size: var(--ar-text-small);
}

.eyebrow {
  font-size: var(--ar-text-eyebrow);
  font-weight: var(--ar-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.text-display {
  font-size: var(--ar-text-display);
  font-weight: var(--ar-weight-strong);
  line-height: var(--ar-leading-heading);
}

.text-muted {
  color: var(--ar-color-muted);
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: var(--ar-color-border, #D0D0D0);
  border-color: var(--ar-color-border, #D0D0D0);
  box-shadow: none;
  color: var(--ar-color-muted, #626365);
  cursor: not-allowed;
  transform: none;
}

/* 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;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  transition: none;
  transform: none;
}
/* Fields */

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

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* 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] {
  accent-color: var(--ar-color-primary, #ED9F2C);
  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

   The boilerplate's #EF6B51 is 3.05:1 on white and only 2.84:1 on the AlphaRoute page
   background (#F7F7F7), so error text failed AA. Production has no error styling to
   reproduce (Contact Form 7 supplies its own), so the hue is kept and darkened to
   #C63E22 -- 5.11:1 on white, 4.77:1 on #F7F7F7. */

.hs-form-required {
  color: var(--ar-color-error, #C63E22);
}

.hs-input.invalid.error {
  border-color: var(--ar-color-error, #C63E22);
}

.hs-error-msg {
  color: var(--ar-color-error, #C63E22);
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: normal;
}

/* 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: var(--ar-color-inverse, #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: var(--ar-color-body, #303133);
    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;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header stack (announcement bar + header) — fixed, like production. Fixed
   (not sticky) because HubSpot wraps the global partial in a wrapper div only
   as tall as the header, which gives position:sticky no room to stick. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Offset page content by the fixed header's height. The exact height is set on
   --ar-header-offset by js/main.js (it varies with the announcement bar); the
   114px fallback covers first paint. Overlay pages skip the offset so the dark
   hero sits beneath the transparent header. */
.body-wrapper:not(.body-wrapper--header-overlay) .body-container-wrapper {
  padding-top: var(--ar-header-offset, 114px);
}

/* Header DND sections */

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

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    justify-content: flex-end;
    padding-top: 0;
    padding-right: 15px;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

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

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 217px;
  overflow: visible;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

/* The brand files carry ~30% transparent padding above and below the mark, so
   the file's aspect ratio (1787x862, 2.07:1) is far squatter than the artwork
   inside it (1700x336, 5.06:1). Sizing the <img> by its own box therefore
   either squashes the mark (a fixed 217x40) or inflates the header row
   (height:auto). Instead the link stays the real 217x40 brand box and the
   image is centred inside it at the scale that renders the *artwork* at
   --ar-logo-w; the transparent padding overflows harmlessly. Swap in a
   trimmed asset and these two ratios become 1:1. */

.header__brand-link {
  position: relative;
  display: block;
  width: var(--ar-logo-w, 217px);
  height: 40px;
  line-height: 0;
}

.header__brand-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: calc(var(--ar-logo-w, 217px) * 1787 / 1700);
  height: auto;
  max-width: none;
}

.header__brand-image--light {
  display: none;
}

@media (min-width: 768px) {
  .body-wrapper--header-overlay .header__brand-image--dark {
    display: none;
  }

  .body-wrapper--header-overlay .header__brand-image--light {
    display: block;
  }
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: var(--ar-color-body, #303133);
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: var(--ar-surface-card, #FFF);
  border: 2px solid var(--ar-color-border, #D1D6DC);
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid var(--ar-color-border, #D1D6DC);
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: var(--ar-color-body, #303133);
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid var(--ar-color-border, #CED4DB);
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--ar-color-body, #303133);
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid var(--ar-color-border, #CED4DB);
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Production nav labels are mixed-case, not uppercase (overrides the
   boilerplate menu module's default uppercasing on the header nav only). */
.header .menu__item--depth-1,
.header .menu__submenu .menu__link {
  text-transform: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__search.open,
  .header__language-switcher.open {
    background-color: var(--ar-surface-page, #F8FAFC);
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  /* Animated open/close — production grows the panel open rather than
     snapping it in; display can't be transitioned, so the reveal is driven
     by max-height/opacity/visibility instead. */
  .header__navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    overflow-y: hidden;
    background-color: var(--ar-surface-card, #ffffff);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    visibility: hidden;
    transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out, transform 0.35s ease-in-out, visibility 0s linear 0.35s;
  }

  .header__navigation.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out, transform 0.35s ease-in-out;
  }

  .header__language-switcher--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

}

/* Animated hamburger ↔ close icon — a single button whose icon morphs between
   three bars and an X (matches production's lines-button behaviour: the bars
   slide to centre then rotate open, and unrotate then slide apart on close).
   The same bar component drives the search overlay's close icon (permanently
   in its "X" state) so both icons read as one visual language. */

.header__menu-toggle {
  display: none;
  position: relative;
  width: 25px;
  height: 25px;
  padding: 0;
}

.header__menu-toggle-bars,
.header__menu-toggle-bars::before,
.header__menu-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ar-color-body, #303133);
  transform: translateX(-50%);
  transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.header__menu-toggle-bars {
  top: 50%;
  margin-top: -1px;
}

.header__menu-toggle-bars::before {
  content: "";
  top: -7px;
}

.header__menu-toggle-bars::after {
  content: "";
  top: 7px;
}

.header__menu-toggle.open .header__menu-toggle-bars {
  background: transparent;
}

.header__menu-toggle.open .header__menu-toggle-bars::before,
.header__menu-toggle.open .header__menu-toggle-bars::after {
  top: 0;
  transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}

.header__menu-toggle.open .header__menu-toggle-bars::before {
  transform: translateX(-50%) rotate(45deg);
}

.header__menu-toggle.open .header__menu-toggle-bars::after {
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 767px) {
  .header__menu-toggle {
    display: block;
    cursor: pointer;
    margin: 0 5vw;
  }
}

/* Desktop single-row header ---------------------------------------------------
   Production lays the header out as one row: logo left, then the nav and a
   search icon on the right. The boilerplate instead stacks the search row above
   the nav row, so on desktop we collapse both rows onto one line and reduce the
   search field to just its magnifier until hovered/focused.                    */

@media (min-width: 768px) {
  .header__container {
    align-items: center;
    min-height: 70px;
    padding-inline: var(--ar-space-sm, 36px);
  }

  .header__logo {
    width: 217px;
    max-width: 217px;
  }

  .header__logo--main {
    padding-top: 0;
  }

  .header__column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .header__row-1 {
    width: auto;
    padding-top: 0;
    order: 2;
  }

  .header__row-2 {
    width: auto;
    order: 1;
  }

  .header__search-trigger {
    order: 2;
    padding-left: 0.75rem;
  }

  .header .menu__item--depth-1 {
    display: inline-flex;
    min-height: 70px;
    align-items: center;
    padding: 0 14px;
  }

  /* Nav label typography — matches production: mixed-case (not uppercase),
     16px, semibold, with a touch of tracking. */
  .header .menu__item--depth-1 > .menu__link {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.8px;
    line-height: 1.4;
  }

  /* Production's dropdown caret is a small, light chevron set 9px off the
     label — the menu module's default is a 16px stroke-2 glyph, which reads
     as a second piece of type rather than a marker beside a 16px label. The
     mask has to be respecified (not just resized) because the weight lives
     inside the SVG's stroke-width, not in any CSS property. */
  .header .menu__item--depth-1 > .menu__child-toggle .menu__child-toggle-icon {
    width: 11px;
    height: 11px;
    margin-left: 9px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Search magnifier trigger (opens the fullscreen overlay) */

.header__search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ar-color-body, #303133);
  cursor: pointer;
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--ar-transition, 200ms ease-in-out);
}

/* Production fades the magnifier to 50% of its own colour on hover — no
   background, border or box appears (matches the live header). */
.header__search-trigger:hover,
.header__search-trigger:focus {
  opacity: 0.5;
}

.header__search-trigger:focus-visible {
  outline: 2px solid var(--ar-color-focus-outline, #303133);
  outline-offset: 2px;
}

.body-wrapper--header-overlay .header__search-trigger {
  color: var(--ar-color-inverse, #ffffff);
}

/* Fullscreen search overlay (matches production's dark trigger-overlay search) */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ar-container-pad, 36px);
  background-color: rgba(20, 22, 24, 0.95);
  opacity: 0;
  visibility: hidden;
  /* Production's timings, which are deliberately asymmetric: the scrim fades
     in over 0.5s the moment the magnifier is clicked, but on close it holds
     for 0.5s before fading out over another 0.5s. js/main.js keeps the
     `hidden` attribute in step with the 1s close, so nothing here can be
     tabbed into once the fade has finished. */
  transition: opacity 0.5s ease 0.5s, visibility 0s linear 1s;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

/* The `hidden` attribute is the pre-JS state and the resting state between
   opens; the fade above only runs while the element is displayed. */
.search-overlay[hidden] {
  display: none;
}

/* Production sizes the field as a share of the viewport rather than to a fixed
   maximum, so it keeps the same proportion on every desktop width. Measured
   against the viewport, not the parent: the overlay carries 36px of padding
   that production's centring table does not, and a percentage here would take
   its 60% from the padded box and land the field ~45px narrow. */
.search-overlay__inner {
  position: relative;
  width: 60vw;
  max-width: 100%;
}

/* Right-aligned magnifier inside the search field (matches production).
   Painted on the input rather than positioned as a sibling: the autosuggest
   results render inside .hs-search-field, so they grow the box an absolutely
   positioned icon would centre against, and the magnifier slid to the bottom
   edge of the field as soon as a query returned anything. A background-image
   centres on the input alone and cannot drift — the same technique the
   .header__search field above already uses. */

/* Production puts this at the very top-right of the viewport, which works there
   because its announcement bar is the topmost strip and the header sits below
   it — the close lands in the bar's band, clear of the header. Our stack runs
   the other way round (header first, announcement under it), so the same 27px
   inset would bury the X behind the opaque header, which paints above the
   scrim. The header is a fixed stack of known height, so the X clears it by
   the same 27px instead of the viewport edge. */
.search-overlay__close {
  position: absolute;
  top: calc(var(--ar-header-offset, 114px) + 27px);
  right: 36px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity var(--ar-transition, 200ms ease-in-out);
}

.search-overlay__close-bars,
.search-overlay__close-bars::before,
.search-overlay__close-bars::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ar-color-inverse, #ffffff);
}

.search-overlay__close-bars {
  background: transparent;
}

.search-overlay__close-bars::before {
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-overlay__close-bars::after {
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search-overlay__close:focus-visible {
  outline: 2px solid var(--ar-color-inverse, #ffffff);
  outline-offset: 2px;
}

.search-overlay__close:hover,
.search-overlay__close:focus {
  opacity: 0.7;
}

.search-overlay .hs-search-field,
.search-overlay .hs-search-field__bar,
.search-overlay .hs-search-field__form {
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.search-overlay .hs-search-field__form {
  display: flex;
  align-items: center;
}

.search-overlay .hs-search-field__label {
  display: none;
}

/* Field metrics come from production, where the padding is expressed in ems of
   the 25px field text (0.8em / 3em / 0.8em / 1.5em) — the em basis is what
   keeps the magnifier's 37px inset clear of the text and the box a shade over
   70px tall, matching the header it sits under. */
.search-overlay .hs-search-field__input {
  width: 100%;
  padding: 0.8em 3em 0.8em 1.5em;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8.25' cy='8.25' r='6.25'/%3E%3Cline x1='12.9' y1='12.9' x2='18' y2='18'/%3E%3C/svg%3E");
  background-position: center right 37px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.024);
  color: var(--ar-color-inverse, #ffffff);
  font-size: 25px;
  line-height: normal;
  transition: color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    background-color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border-color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.search-overlay .hs-search-field__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* The clear control is the browser's own type="search" widget, which paints
   itself blue-grey here and cannot simply be recoloured — its glyph is a UA
   image, not text. Dropping the native appearance and rebuilding it as a
   masked box is what makes `background-color` the glyph colour. WebKit-only by
   nature: Firefox renders no such control, so there is nothing to restyle. */
.search-overlay .hs-search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background-color: var(--ar-color-inverse, #ffffff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* Focus is signalled by the border alone — it takes the brand orange, and the
   default outline is suppressed on both paths so the box stays a single clean
   rule. The border already transitions above, so the change eases in rather
   than snapping. */
.search-overlay .hs-search-field__input:focus,
.search-overlay .hs-search-field__input:focus-visible {
  border-color: var(--ar-color-primary, #ED9F2C);
  outline: none;
}

.search-overlay .hs-search-field__bar button,
.search-overlay .hs-search-field__button {
  display: none;
}

/* Autosuggest panel ---------------------------------------------------------
   The search_input module ships its own opinionated panel — a white box with a
   grey border and a drop shadow — under `.hs-search-field--open
   .hs-search-field__suggestions`. That selector is two classes deep and the
   module stylesheet loads *after* the theme's, so a two-class override here
   loses the tie on source order and the white box stays. Every rule below is
   therefore scoped through `.hs-search-field--open` as well, which outranks it
   outright. Getting that wrong is what produced the blank panel: the box kept
   the module's white background while the links took the overlay's white text,
   so a list of real results rendered as an empty white rectangle. */

.search-overlay .hs-search-field__suggestions-container {
  margin-top: 8px;
}

.search-overlay .hs-search-field--open .hs-search-field__suggestions {
  max-height: min(420px, 50vh);
  padding: var(--ar-space-2xs, 9px) 0;
  overflow-y: auto;
  background-color: var(--ar-surface-dark, #141618);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ar-radius-xs, 2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: var(--ar-color-inverse, #ffffff);
  text-align: left;
}

.search-overlay .hs-search-field--open .hs-search-field__suggestions li {
  margin: 0;
  border: 0;
  font-size: var(--ar-text-body, 16px);
  line-height: var(--ar-leading-body, 1.4);
}

/* "Results for X" / "There are no autosuggest results for X". The module keeps
   this row for screen readers and un-hides it once a query is in flight, so it
   is a real visible line and needs to read as a caption rather than a result. */
.search-overlay .hs-search-field--open .hs-search-field__suggestions .results-for {
  padding: var(--ar-space-2xs, 9px) var(--ar-space-xs, 18px);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--ar-text-small, 13px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-overlay .hs-search-field--open .hs-search-field__suggestions li a {
  display: block;
  padding: var(--ar-space-2xs, 9px) var(--ar-space-xs, 18px);
  color: var(--ar-color-inverse, #ffffff);
  text-decoration: none;
  transition: background-color var(--ar-transition, 200ms ease-in-out),
    color var(--ar-transition, 200ms ease-in-out);
}

/* The module moves focus onto the anchors with the arrow keys, so :focus has to
   carry the same highlight as the pointer state or keyboard users lose their
   place in the list. */
.search-overlay .hs-search-field--open .hs-search-field__suggestions li a:hover,
.search-overlay .hs-search-field--open .hs-search-field__suggestions li a:focus,
.search-overlay .hs-search-field--open .hs-search-field__suggestions li:focus a {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ar-color-primary, #ED9F2C);
  outline: none;
}

/* The module wraps the matched substring in .hs-search-highlight; left alone it
   inherits the panel's white and the match is invisible as a match. */
.search-overlay .hs-search-field--open .hs-search-field__suggestions .hs-search-highlight {
  color: var(--ar-color-primary, #ED9F2C);
  font-weight: var(--ar-weight-strong, 700);
}

body.search-overlay-open .site-header {
  z-index: 10000;
}

/* Keep the header (logo and nav) painted above the scrim so it stays bright
   while the overlay is open — production does the same; only the page content
   below is dimmed. The header sits above the overlay's own stacking context
   (z-index 2000), so without pointer-events:none it would intercept clicks
   meant for the overlay's close button underneath it; re-enabling
   pointer-events only on the logo/nav keeps those controls usable without
   blocking the close button. */
body.search-overlay-open .header {
  position: relative;
  z-index: 10001;
  pointer-events: none;
}

body.search-overlay-open .header__brand-link,
body.search-overlay-open .header__navigation {
  pointer-events: auto;
}

/* AlphaRoute live-header fidelity ------------------------------------------
   Dark hero pages start transparent and become a dark fixed bar after the
   first scroll. Solid pages remain white. The announcement follows the header
   in document order, and .site-header fixes both as one measured stack. */

@media (min-width: 768px) {
  .body-wrapper--header-overlay .site-header--scrolled .header {
    background-color: var(--ar-surface-dark, #141618);
    border-bottom-color: var(--ar-surface-dark, #141618);
  }
}

/* Desktop dropdowns are compact dark panels, matching production. */

@media (min-width: 768px) {
  .header .menu__submenu {
    width: auto;
    min-width: 190px;
    padding: 12px 6px;
    border: 0;
    border-radius: 0;
    box-shadow: var(--ar-shadow-soft, 0 4px 4px rgba(0, 0, 0, 0.1));
    overflow: hidden;
  }

  .header .menu__submenu--level-2 {
    transform: none;
  }

  .header .menu__submenu--level-2 > .menu__item:first-child:before {
    content: none;
  }

  .header .menu__submenu .menu__item {
    border: 0;
  }

  .header .menu__submenu .menu__link {
    min-height: 0;
    padding: 6px 12px;
    font-size: var(--ar-text-small, 14px);
    font-weight: var(--ar-weight-strong, 700);
    white-space: nowrap;
  }
}

/* Mobile header: one 84px row (logo left, menu toggle right), a fixed menu
   below the complete header/announcement stack, and inline search. */

.header__mobile-search {
  display: none;
}

@media (max-width: 767px) {
  .header__container {
    position: static;
    min-height: 84px;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--ar-container-pad, 15px);
  }

  .header__logo,
  .header__logo--main {
    width: auto;
    max-width: 163px;
    margin: 0 auto 0 0;
    padding: 0;
  }

  .header__brand-link {
    --ar-logo-w: 163px;
    height: 30px;
  }

  .header__column {
    position: static;
    width: auto;
  }

  .header__row-1 {
    display: none;
  }

  .header__row-2 {
    width: auto;
    padding: 0;
  }

  .header__menu-toggle {
    margin: 0;
  }

  .header__menu-toggle:hover,
  .header__menu-toggle:focus,
  .header__menu-toggle:active,
  .header .menu__child-toggle:hover,
  .header .menu__child-toggle:focus,
  .header .menu__child-toggle:active {
    border: 0;
    background: transparent;
    color: var(--ar-color-body, #303133);
    box-shadow: none;
    transform: none;
  }

  /* Production grows the panel to exactly its content height. Animating
     max-height to the viewport cap instead would finish the visible reveal in a
     fraction of the stated duration and read as a snap, so js/main.js measures
     the content into --ar-menu-panel-height and the cap only clamps a menu tall
     enough to need scrolling. */
  .header__navigation.open {
    top: 100%;
    min-height: 0;
    max-height: min(
      var(--ar-menu-panel-height, 100vh),
      calc(100vh - var(--ar-header-offset, 129px))
    );
    overflow-y: auto;
  }

  /* Production opens the list 27px below the header edge rather than butting the
     first row against it. */
  .header .menu--mobile .menu__wrapper {
    padding-top: calc(var(--ar-space-xs, 18px) + var(--ar-space-2xs, 9px));
  }

  .header .menu__item--depth-1 {
    border-top: 0;
  }

  /* The trailing chevron is positioned out of flow, so the right padding is
     what keeps a long label from running underneath it. */
  .header .menu__item--depth-1 > .menu__link {
    min-height: 0;
    padding: 9px var(--ar-space-md, 72px) 9px var(--ar-space-sm, 36px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: normal;
    text-transform: uppercase;
  }

  .header .menu__item--has-submenu > .menu__link {
    width: 100%;
    padding-right: 72px;
  }

  /* Only the glyph inside the button carries the 8px inset, so it lines up with
     the row chevrons while the button stays a comfortable tap target.
     Deliberately anchored to the top rather than centred: this button is
     positioned against .menu__item, which grows to contain the expanded
     submenu, so a 50%/translateY centre would slide the chevron down among the
     child rows the moment the submenu opens. */
  .header .menu__child-toggle {
    display: flex;
    height: 32px;
    width: 56px;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    top: 0;
    right: var(--ar-space-sm, 36px);
  }

  .header .menu__child-toggle-icon {
    width: 14px;
    height: 14px;
    margin: 0 8px 0 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
  }

  /* Production's dropdown chevron never rotates on open — only the panel
     below expands. module.module's base "rotate(180deg) when open" rule
     outranks the plain override above on specificity, so it must be pinned
     back here with a matching selector shape. */
  .header .menu__item--open > .menu__child-toggle .menu__child-toggle-icon {
    transform: none;
  }

  .header .menu__submenu,
  .header .menu__submenu .menu__item,
  .header .menu__submenu .menu__link,
  .header .menu__submenu .menu__link:hover,
  .header .menu__submenu .menu__link:focus {
    color: var(--ar-color-muted, #777777) !important;
    background-color: var(--ar-surface-card) !important;
  }

  .header .menu__submenu .menu__item {
    border: 0;
  }

  /* Second-level rows step in from their parent so the nesting reads without
     needing a rule or a marker. */
  .header .menu__submenu--level-2 > .menu__item {
    padding-left: var(--ar-space-xs, 18px);
  }

  /* An expanded parent takes the same brand colour as the children it reveals,
     so the open group reads as one block.

     The .menu--mobile qualifier is load-bearing, not decoration. The menu
     module emits its own colour rules from its Theme Editor fields via scoped
     CSS, and those land after this file. Without the extra class these
     selectors only tie the module's and lose on source order — which is what
     left the child rows dark while the parent turned orange. The :hover and
     :focus variants are spelled out for the same reason: the module sets
     colour on those states too. */
  .header .menu--mobile .menu__item--has-submenu.menu__item--open > .menu__link,
  .header .menu--mobile .menu__item--has-submenu.menu__item--open > .menu__link:hover,
  .header .menu--mobile .menu__item--has-submenu.menu__item--open > .menu__link:focus {
    color: var(--ar-color-primary, #ED9F2C);
  }

  .header .menu--mobile .menu__submenu .menu__link,
  .header .menu--mobile .menu__submenu .menu__link:hover,
  .header .menu--mobile .menu__submenu .menu__link:focus {
    color: var(--ar-color-primary, #ED9F2C);
  }

  /* The chevron is a sibling of the link, not a descendant, so it cannot pick
     the colour up through currentColor — it has to be tinted directly. */
  .header .menu__item--open > .menu__child-toggle .menu__child-toggle-icon {
    background-color: var(--ar-color-primary, #ED9F2C);
  }

  /* Child rows sit on the same 34.5px rhythm as their parents. The explicit
     line-height resets the module's 1.667rem, which otherwise makes these rows
     ~6px taller than every other row in the panel. */
  .header .menu__submenu .menu__link {
    padding: 9px var(--ar-space-md, 72px) 9px var(--ar-space-sm, 36px);
    color: var(--ar-color-primary, #ED9F2C);
    font-size: 14px;
    font-weight: var(--ar-weight-strong, 700);
    letter-spacing: normal;
    line-height: normal;
    text-transform: uppercase;
  }

  .header__mobile-search {
    display: block;
  }

  .header__mobile-search-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--ar-space-xs, 18px);
    padding: 9px var(--ar-space-sm, 36px) !important;
    color: var(--ar-color-body, #303133);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: normal;
    text-transform: uppercase;
  }

  .header__mobile-search-toggle:hover,
  .header__mobile-search-toggle:focus,
  .header__mobile-search-toggle:active {
    border: 0;
    background: transparent;
    color: var(--ar-color-primary);
    box-shadow: none;
    transform: none;
  }

  .header__mobile-search-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    margin-right: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
  }

  .header__mobile-search-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--ar-space-sm, 36px);
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out, padding 0.3s ease-in-out, visibility 0s linear 0.3s;
  }

  .header__mobile-search-panel.open {
    /* Tall enough for the field plus a full autosuggest list, which renders in
       flow below it. max-height is only a ceiling, so the disclosure still sits
       at the field's own height until a query returns something. */
    max-height: 440px;
    padding: 9px var(--ar-space-sm, 36px);
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out, padding 0.3s ease-in-out;
  }

  .header__mobile-search-panel[hidden] {
    display: none;
  }

  .header__mobile-search-panel .hs-search-field__label {
    display: none;
  }

  /* Padding and margin are zeroed explicitly: the search_input module ships its
     own spacing on these wrappers, which would otherwise inset the field from
     the 36px gutter the rest of the panel lines up on. */
  .header__mobile-search-panel .hs-search-field,
  .header__mobile-search-panel .hs-search-field__bar,
  .header__mobile-search-panel .hs-search-field__form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* An underline field rather than a boxed one. The horizontal padding goes
     with the box: with only a rule beneath it, the text would otherwise start
     15px inside the underline and sit out of line with the SEARCH label and the
     menu rows above, which all begin at the 36px gutter. */
  .header__mobile-search-panel .hs-search-field__input {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    margin-top: var(--ar-space-2xs, 9px);
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--ar-color-border, #EAEAEA);
    border-radius: 0;
    background: var(--ar-color-input-bg, #ffffff);
    color: var(--ar-color-body, #303133);
    font-size: 14px;
    line-height: normal;
  }

  /* The underline is the whole focus indicator here — the theme's usual #303133
     outline is deliberately suppressed on this field. */
  .header__mobile-search-panel .hs-search-field__input:focus,
  .header__mobile-search-panel .hs-search-field__input:focus-visible {
    border-bottom-color: var(--ar-color-primary, #ED9F2C);
    outline: none;
  }

  .header__mobile-search-panel .hs-search-field__button {
    display: none;
  }

  /* Autosuggest, light variant. The desktop overlay's note about source order
     applies here too: `display: none` on a two-class selector loses the tie to
     the module's own `.hs-search-field--open .hs-search-field__suggestions`,
     so the panel was never actually hidden — it rendered clipped inside the
     disclosure's max-height. Showing it is the better answer anyway; the
     disclosure's open height below is sized to hold a full result list. */
  .header__mobile-search-panel .hs-search-field__suggestions-container {
    margin-top: var(--ar-space-2xs, 9px);
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions {
    /* The module positions this list absolutely so it can float over the page.
       Here it sits inside a disclosure that clips its own overflow — and inside
       the mobile menu panel, which clips too — so an out-of-flow list is simply
       invisible. In flow it grows the disclosure instead, and the menu panel's
       ResizeObserver in js/main.js re-measures around it. */
    position: static;
    padding: 0;
    background-color: var(--ar-surface-card, #ffffff);
    border: 1px solid var(--ar-color-border, #EAEAEA);
    border-radius: var(--ar-radius-xs, 2px);
    box-shadow: var(--ar-shadow-soft, 0 4px 4px rgba(0, 0, 0, 0.1));
    text-align: left;
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions li {
    margin: 0;
    border: 0;
    font-size: var(--ar-text-small, 13px);
    line-height: var(--ar-leading-body, 1.4);
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions .results-for {
    padding: 8px 12px;
    color: var(--ar-color-muted, #6B7280);
    font-size: var(--ar-text-eyebrow, 12px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions li a {
    display: block;
    padding: 8px 12px;
    color: var(--ar-color-body, #303133);
    text-decoration: none;
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions li a:hover,
  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions li a:focus {
    background-color: var(--ar-surface-alt, #F3F6F9);
    color: var(--ar-color-primary, #ED9F2C);
    outline: none;
  }

  .header__mobile-search-panel .hs-search-field--open .hs-search-field__suggestions .hs-search-highlight {
    color: var(--ar-color-primary, #ED9F2C);
    font-weight: var(--ar-weight-strong, 700);
  }

  .search-overlay {
    display: none;
  }
}
/* Shared video dialog.

   Any module that emits the data-ar-video-* contract gets the play control and
   the modal dialog from here; the module supplies only its own media box
   sizing, through --ar-video-media-min and --ar-video-play-size.

   The behaviour lives in js/main.js rather than in a module.js because a
   module script binds every matching container on the *page*, not just its own
   instances. Two modules using this contract on one page would therefore each
   bind every dialog, attaching duplicate listeners. base.html loads main.js on
   every template, so one copy covers all consumers. */

/* The thumbnail and the play button share grid cell 1/1 so the button is
   centred on the *image*, not on the container. The video embed can add flow
   content to this container, which previously grew it below the thumbnail and
   dragged the button off-centre. */
.ar-video {
  --ar-video-media-min: 0px;
  --ar-video-play-size: 88px;
  position: relative;
  display: grid;
  grid-template: minmax(var(--ar-video-media-min), auto) / minmax(0, 1fr);
  overflow: hidden;
}

.ar-video > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: var(--ar-video-media-min);
  object-fit: cover;
}

/* Centred with place-self rather than a translate, because theme-overrides.css
   resets `transform` on button :hover/:active with higher specificity than a
   single class. */
.ar-video__play {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  width: var(--ar-video-play-size);
  height: var(--ar-video-play-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  place-self: center;
  place-items: center;
}

.ar-video__play:hover,
.ar-video__play:focus-visible {
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
}

.ar-video__play > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: none;
}

/* Fallback mark, shown only when no play icon image is set. Kept at fixed
   dimensions: it is a stand-in, not a design element that has to track the
   button size exactly. */
.ar-video__play-shape {
  width: 0;
  height: 0;
  margin-left: 8px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid var(--ar-color-inverse);
}

.ar-video__dialog {
  width: min(1120px, calc(100vw - (2 * var(--ar-container-pad))));
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-color-dark);
}

.ar-video__dialog::backdrop {
  background: rgb(0 0 0 / 78%);
}

.ar-video__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - (2 * var(--ar-space-md)));
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: inherit;
  background: var(--ar-color-dark);
  filter: none;
  object-fit: contain;
}

.ar-video__close {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -18px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--ar-color-inverse);
  border-radius: 50%;
  background: var(--ar-color-dark);
  color: var(--ar-color-inverse);
  font-size: 30px;
  line-height: 1;
}

.ar-video__close:hover,
.ar-video__close:focus-visible {
  border-radius: 50%;
}
/* 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 (max-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 (max-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 (max-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
Helper classes with ability to override anything that comes before it
*/

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