/*
  Main entry point for theme CSS.
  Partials are pulled in with HubL includes, grouped ITCSS-style.
*/

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

*, *: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;
}

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

.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: 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 #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  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.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] {
  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 {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  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: #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;
}

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

/* 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) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
    align-items: center;
    justify-content: center;
  }

  .header__column {
    position: relative;
  }

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

  .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: 200px;
  overflow: hidden;
}

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

.header__logo img {
  max-width: 100%;
}

.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: #000;
    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: #FFF;
  border: 2px solid #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 #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  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 #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 #494A52;
  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 #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;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

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

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

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

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

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

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

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

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .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";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* 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%;
}
/* ==========================================================================
   CARDINAL — SINGLE-FILE DESIGN SYSTEM (test + production)
   Included from main.css. Contains ALL layout/design for the landing page,
   with .body-wrapper prefixes so rules beat both the HubSpot theme-settings
   <style> block (injected after main.css) and individual module.css files.
   Sections that must span the full viewport (hero, ribbons, gray band,
   footer) use the 100vw breakout since dnd wrappers constrain width.
   ========================================================================== */

:root {
  --cc-red: #cf3339;
  --cc-teal: #1a9188;
  --cc-dark: #55534a;
  --cc-gray-bg: #ececea;
  --cc-text: #4a4a4a;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS / BOILERPLATE OVERRIDES
   -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; } /* required by full-bleed breakouts */

.body-wrapper,
.body-wrapper p,
.body-wrapper li,
.body-wrapper label,
.body-wrapper span {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  color: var(--cc-text);
  font-size: 1rem;
  line-height: 1.6;
}
.body-wrapper h1, .body-wrapper h2, .body-wrapper h3,
.body-wrapper h4, .body-wrapper h5, .body-wrapper h6 {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  color: inherit;
  margin: 0;
}
.body-wrapper a,
.body-wrapper a:hover,
.body-wrapper a:focus,
.body-wrapper a:active {
  font-family: inherit;
  text-decoration: none;
  color: inherit;
}
.body-wrapper a:hover {
  color: #cf3339;
}
.body-wrapper img { max-width: 100%; height: auto; }

/* dnd layout: kill boilerplate paddings/widths so modules control layout */
.body-wrapper .dnd-section,
.body-wrapper .content-wrapper--vertical-spacing { padding: 0; }
.body-wrapper .dnd-section > .row-fluid { max-width: none; }
.body-wrapper .dnd-section .dnd-column { padding: 0; }
.body-wrapper .header .content-wrapper,
.body-wrapper .footer .content-wrapper { max-width: none; padding: 0; }
.body-wrapper .header { background-color: #fff; }
.body-wrapper .footer { background-color: transparent; }

/* Shared container + full-bleed helper */
.body-wrapper .cc-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.cc-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Buttons */
.body-wrapper .cc-btn,
.body-wrapper .cc-btn:hover,
.body-wrapper .cc-btn:focus {
  display: inline-block;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  background-color: var(--cc-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.body-wrapper .cc-btn--teal,
.body-wrapper .cc-btn--teal:hover,
.body-wrapper .cc-btn--teal:focus { background-color: var(--cc-teal); }

/* Accessibility skip link */
.header__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--cc-red);
  padding: 10px 16px;
  z-index: 100;
}
.header__skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   2. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.body-wrapper .cc-header {
  padding: 20px 0;
  background: #fff;
}
.body-wrapper .cc-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.body-wrapper .cc-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.body-wrapper .cc-header__brand img {
  width: 90px;
  height: auto;
  flex-shrink: 0;
}
.body-wrapper .cc-header__brand-name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--cc-text);
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 240px;
}
.body-wrapper .cc-header__nav { flex: 1; min-width: 0; }
.body-wrapper .cc-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 10px;
}
.body-wrapper .cc-header__nav li { display: flex; align-items: center; }
.body-wrapper .cc-header__nav li + li::before {
  content: "|";
  color: #c9c9c9;
  margin: 0 14px;
}
.body-wrapper .cc-header__nav a {
  text-decoration: none;
  color: #5a5a5a;
  font-size: 0.95rem;
  white-space: nowrap;
}
.body-wrapper .cc-header__nav a:hover { color: var(--cc-red); }

/* --------------------------------------------------------------------------
   3. HERO (full-bleed image + red banner)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.body-wrapper .cc-hero__image {
  width: 100%;
  max-height: 900px;
  object-fit: cover;
  display: block;
}
.body-wrapper .cc-hero__banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 0; /* establishes a stacking context so ::before z-index:-1 sits
                 behind this banner but still ABOVE the hero image */
  background: var(--cc-red);
  color: #fff;
  padding: 28px 48px 28px 0px;
  border-radius: 0 14px 14px 0;
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}
.body-wrapper .cc-hero__banner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(50% - 50vw);
  background: var(--cc-red);
  border-radius: 0 14px 14px 0;
  z-index: -1;
}
.body-wrapper .cc-hero__banner .cc-hero__tagline {
  color: #fff;
  margin: 0 0 16px;
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.body-wrapper .cc-hero__banner .cc-hero__tagline sup { font-size: .55em; }
.body-wrapper .cc-hero__banner p.cc-hero__headline {
  color: #fff;
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. SECTION HEADING RIBBON (bleeds from left viewport edge)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-ribbon {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 60px;
  color: #fff;
  padding: 18px 34px 18px 20px;
  margin: 50px 0 55px;
  min-width: 500px;
  transform: translate(150px, 0);
}
/* Red bar painted behind, stretching to the left viewport edge.
   The element itself stays in normal flow so wrappers can't clip it. */
.body-wrapper .cc-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(50% - 50vw);
  background: var(--cc-red);
  border-radius: 0 14px 14px 0;
  z-index: -1;
}
.body-wrapper .cc-ribbon h2 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.body-wrapper .cc-ribbon img { width: 56px; height: 56px; position: absolute;  right: 30px; }
/* 1400px and below: drop the right nudge so the ribbon lines up with the
   left-aligned body text (container edge) instead of overhanging right. */
@media (max-width: 1400px) {
  .body-wrapper .cc-ribbon { transform: translate(0, 0); }
}
@media (max-width: 1080px) {
  .body-wrapper .cc-hero__banner .cc-hero__tagline {
    margin-left: 30px;
  }
  .body-wrapper .cc-ribbon h2 {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
  }

  .body-wrapper .cc-steps h3 {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
  }

}
/* 1024–1400px: the ribbon is full-bleed but the body text sits in the centered
   1100px container. Indent the ribbon content to match that column's left edge
   so the heading aligns with the paragraphs below it.
   Left edge of paragraph text = (viewport - 1100)/2 + 20px container padding. */
@media (min-width: 1024px) and (max-width: 1400px) {
  .body-wrapper .cc-ribbon {
    padding-left: max(20px, calc((100vw - 1100px) / 2 + 20px));
  }
}

/* --------------------------------------------------------------------------
   5. HARD FACTS (gray card: stats + symptoms)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-facts__card {
  background: var(--cc-gray-bg);
  border-radius: 18px;
  padding: 25px 25px;
}
.body-wrapper .cc-facts__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: start;
}
.body-wrapper .cc-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 34px;
}
.body-wrapper .cc-facts__item { margin-bottom: 20px; }
.body-wrapper .cc-facts__item p { margin: 0; }
.body-wrapper .cc-facts__item p.cc-facts__stat {
  color: var(--cc-red);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 4px;
}
.body-wrapper .cc-facts__icon img { width: 160px; height: auto; }
.body-wrapper .cc-facts__divider {
  border: none;
  border-top: 1px solid #c7c7c7;
  margin: 30px 0;
}
.body-wrapper .cc-facts__symptoms h3 {
  color: var(--cc-red);
  font-size: 1.3rem;
  margin: 0 0 16px;
}
.body-wrapper ul.cc-facts__symptom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px;
  align-content: start;
  font-weight: 700
}
.body-wrapper ul.cc-facts__symptom-list li {
  padding-left: 18px;
  position: relative;
  margin: 0;
  line-height: 1.5;
}
.body-wrapper ul.cc-facts__symptom-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cc-red);
  font-weight: 700;
}
.body-wrapper .cc-facts__closing { margin: 40px 0; }

/* --------------------------------------------------------------------------
   6. STEPS CTA (teal card)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-steps {
  background: var(--cc-teal);
  color: #fff;
  border-radius: 18px;
  padding: 50px 46px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}
.body-wrapper .cc-steps h3 {
  color: #fff;
  font-size: 1.6rem;
  margin: 0 0 26px;
  line-height: 1.4;
}
.body-wrapper .cc-steps p,
.body-wrapper .cc-steps p strong { color: #fff; }
.body-wrapper .cc-steps p.cc-steps__step { margin: 0 0 18px; }
.body-wrapper .cc-steps__icon img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
}
.body-wrapper .cc-steps__cta {
  text-align: center;
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   7. MISSION + GOALS (gray band is full-bleed)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-mission__intro { margin-bottom: 34px; }
.body-wrapper .cc-mission__subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cc-text);
  margin: 0 0 30px;
}
.body-wrapper .cc-mission__band {
  position: relative;
  z-index: 0;
  padding: 60px 0;
  margin: 40px 0 60px;
}
.body-wrapper .cc-mission__band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--cc-gray-bg);
  z-index: -1;
}
.body-wrapper .cc-mission__goals-title {
  color: var(--cc-red);
  font-size: 1.5rem;
  margin: 0 0 34px;
  max-width: 700px;
  line-height: 1.4;
}
.body-wrapper .cc-mission__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}
.body-wrapper .cc-mission__grid ul {
  list-style: disc;
  margin: 0;
  padding-left: 22px;
}
.body-wrapper .cc-mission__grid li { margin-bottom: 22px; font-weight: 700;}
.body-wrapper .cc-mission__grid li::marker { color: var(--cc-text); }

/* --------------------------------------------------------------------------
   8. CONTENT BLOCKS (Clearity / About)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-content-blocks__block { margin-bottom: 28px; }
.body-wrapper .cc-content-blocks__block h3 {
  color: var(--cc-red);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 30px;
  line-height: 1.4;
}
.body-wrapper .cc-content-blocks__block h3:nth-child(1) {
    padding-left: 25px;
}
.body-wrapper .cc-content-blocks__block p { margin: 0 0 16px; }

/* --------------------------------------------------------------------------
   9. JOURNEY (image + story)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-journey__image { margin-bottom: 40px; }
.body-wrapper .cc-journey__image img { width: 100%; display: block; }
.body-wrapper .cc-journey__story p { margin: 0 0 26px; }

/* --------------------------------------------------------------------------
   10. DONATE
   -------------------------------------------------------------------------- */
.body-wrapper .cc-donate__intro { margin-bottom: 28px; }
.body-wrapper .cc-donate__note { margin-top: 28px; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   11. CONTACT (teal card + HubSpot form)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-contact {
  background: var(--cc-teal);
  color: #fff;
  border-radius: 18px;
  padding: 50px 55px;
  margin-bottom: 60px;
}
.body-wrapper .cc-contact p,
.body-wrapper .cc-contact li,
.body-wrapper .cc-contact label,
.body-wrapper .cc-contact span,
.body-wrapper .cc-contact legend { color: #fff; }
.body-wrapper .cc-contact__intro { margin-bottom: 34px; }
.body-wrapper .cc-contact form,
.body-wrapper .cc-contact .submitted-message {
  background: transparent;
  border: none;
  padding: 0;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}
.body-wrapper .cc-contact .hs-form-field { margin-bottom: 16px; }
.body-wrapper .cc-contact form label {
  color: #fff;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.body-wrapper .cc-contact form input[type=text],
.body-wrapper .cc-contact form input[type=email],
.body-wrapper .cc-contact form input[type=tel],
.body-wrapper .cc-contact form input[type=number],
.body-wrapper .cc-contact form select,
.body-wrapper .cc-contact form textarea {
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cc-text);
  background: #fff;
}
.body-wrapper .cc-contact .hs-form-booleancheckbox label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}
.body-wrapper .cc-contact .hs-form-booleancheckbox input {
  width: 20px;
  height: 20px;
}
.body-wrapper .cc-contact form input[type=submit],
.body-wrapper .cc-contact form .hs-button {
  background-color: var(--cc-red);
  color: #fff;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   12. FOOTER (full-bleed dark)
   -------------------------------------------------------------------------- */
.body-wrapper .cc-footer {
  position: relative;
  z-index: 0;
  text-align: center;
  padding: 70px 20px;
  margin-top: 70px;
}
.body-wrapper .cc-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--cc-dark);
  z-index: -1;
}
.footer .cc-footer p,
.footer .cc-footer span,
.footer .cc-footer li,
.body-wrapper .cc-footer p { color: #e9e9e5; margin: 0 0 26px; }
.body-wrapper .cc-footer p:last-child { margin-bottom: 0; }
.body-wrapper .cc-footer__legal { margin-bottom: 26px; }
.body-wrapper .cc-footer__legal p { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Header: stack brand above centered nav */
  .body-wrapper .cc-header__inner {
    align-items: center;
    gap: 14px;
  }
  .body-wrapper .cc-header__brand-name { max-width: none; text-align: left; }
  .body-wrapper .cc-header__nav ul { justify-content: center; }
}

@media (max-width: 767px) {
  /* Hero banner drops below image */
  .body-wrapper .cc-hero__banner {
    position: static;
    border-radius: 0;
    max-width: none;
    width: 100%;
  }

  /* Ribbon hugs left edge with smaller indent */
  .body-wrapper .cc-ribbon {
    gap: 20px;
    padding-left: 20px;
    margin-top: 36px;
    margin-bottom: 28px;
    transform: unset;
    min-width: 80vw;
  }
  .body-wrapper .cc-ribbon h2 { white-space: normal; }
  .body-wrapper .cc-ribbon img { width: 44px; height: 44px; }

  /* Cards: single column */
  .body-wrapper .cc-facts__card { padding: 30px 22px; }
  .body-wrapper .cc-facts__grid,
  .body-wrapper .cc-facts__list,
  .body-wrapper ul.cc-facts__symptom-list,
  .body-wrapper .cc-mission__grid {
    grid-template-columns: 1fr;
  }
  .body-wrapper .cc-facts__icon { order: -1; }
  .body-wrapper .cc-facts__icon img { width: 120px; height: auto; }

  .body-wrapper .cc-steps {
    grid-template-columns: 1fr;
    padding: 34px 24px;
  }
  .body-wrapper .cc-steps__icon img { width: 150px; height: 150px; }

  .body-wrapper .cc-contact { padding: 34px 24px; }
  .body-wrapper .cc-footer { padding: 50px 16px; margin-top: 50px; }
}

@media (max-width: 480px) {
  .body-wrapper .cc-header__nav li + li::before { margin: 0 8px; }
  .body-wrapper .cc-header__nav a { font-size: 0.85rem; }
  .body-wrapper .cc-header__brand img { width: 64px; }
  .body-wrapper .cc-header__brand-name { font-size: 1.05rem; }
}


.dnd-section .dnd-column {
    padding: 0;
}
body .footer-column-1-row-1-margin {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* ===== FIX HEADER CONTAINER ALIGNMENT ===== */
/* Remove the problematic flex that causes mobile alignment issues */
.header__container {
  display: block !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  justify-content: normal !important;
}

/* Ensure the row-fluid stays centered */
.header__container .row-fluid-wrapper,
.header__container .row-fluid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
}

/* Fix the dnd-section */
.header__container .dnd-section {
  padding: 0 !important;
  margin: 0 !important;
}

/* Override the existing flex from template_m_min.css */
.header_container {
  display: block !important;
  justify-content: normal !important;
}

/* More specific override using the body-wrapper prefix */
.body-wrapper .header__container {
  display: block !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  justify-content: normal !important;
}

.body-wrapper .header__container .row-fluid {
  display: block !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .header__container,
  .body-wrapper .header__container {
    padding: 0 15px !important;
  }
}

@media (max-width: 480px) {
  .header__container,
  .body-wrapper .header__container {
    padding: 0 10px !important;
  }
}

/* ==========================================================================
   MIGRATED MODULE CSS
   The rules below were relocated verbatim from each module's module.css so
   styles load once (via main.css) instead of twice. They are appended (not
   reordered) beneath the global base above. Most cc-* rules here are also
   present higher up with a stronger `.body-wrapper` prefix, which continues
   to win — these lower-specificity copies are kept only to preserve the exact
   cascade that existed when both files loaded. See migration report for the
   per-module duplicate/conflict notes.
   ========================================================================== */

/* ===== Module: _hero ===== */
/* (module.css was empty — no rules to migrate) */

/* ===== Module: _hard_facts ===== */
/* NOTE: duplicated by section 5 above (.body-wrapper-prefixed rules win). */
.cc-facts__card {
  background: var(--cc-gray-bg);
  border-radius: 18px;
  padding: 46px 44px;
}
.cc-facts__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: start;
}
.cc-facts__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 34px;
}
.cc-facts__item { margin-bottom: 20px; }
.cc-facts__item p { margin: 0; }
.cc-facts__stat {
  color: var(--cc-red);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 4px !important;
}
.cc-facts__icon img { width: 160px; height: 160px; }
.cc-facts__divider { border: none; border-top: 1px solid #c7c7c7; margin: 30px 0; }
.cc-facts__symptoms h3 { color: var(--cc-red); font-size: 1.3rem; margin: 0 0 16px; }
ul.cc-facts__symptom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px;
  align-content: start;
}
ul.cc-facts__symptom-list li {
  padding-left: 18px;
  position: relative;
  margin: 0;
  line-height: 1.5;
}
ul.cc-facts__symptom-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cc-red, #cf3339);
  font-weight: 700;
}
.cc-facts__closing { margin: 40px 0; }
@media (max-width: 767px) {
  .cc-facts__card { padding: 30px 22px; }
  .cc-facts__grid { grid-template-columns: 1fr; }
  .cc-facts__list { grid-template-columns: 1fr; }
  ul.cc-facts__symptom-list { grid-template-columns: 1fr; }
  .cc-facts__icon { order: -1; }
}

/* ===== Module: _steps_cta ===== */
/* NOTE: duplicated by section 6 above (.body-wrapper-prefixed rules win). */
.cc-steps {
  background: var(--cc-teal);
  color: #fff;
  border-radius: 18px;
  padding: 50px 46px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}
.cc-steps h3 { margin: 0 0 26px; font-size: 1.6rem; }
.cc-steps__step { margin: 0 0 18px; }
.cc-steps__icon img { width: 200px; height: 200px; margin: 0 auto; }
.cc-steps__cta { text-align: center; grid-column: 1 / -1; }
@media (max-width: 767px) {
  .cc-steps { grid-template-columns: 1fr; padding: 34px 24px; }
}

/* ===== Module: _section_heading ===== */
/* NOTE: section 4 above (.body-wrapper .cc-ribbon) uses a ::before full-bleed
   bar and wins; the solid `background`/`border-radius` here are visually
   redundant (painted behind by the ::before). Kept for cascade parity. */
.cc-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  background: var(--cc-red);
  color: #fff;
  padding: 18px 34px 18px 90px;
  border-radius: 0 14px 14px 0;
  margin: 50px 0 40px;
}
.cc-ribbon h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.cc-ribbon img { width: 56px; height: 56px; }
@media (max-width: 767px) {
  .cc-ribbon { padding-left: 20px; gap: 20px; }
}

/* ===== Module: _mission_goals ===== */
/* NOTE: duplicated by section 7 above (.body-wrapper-prefixed rules win). */
.cc-mission__intro { margin-bottom: 34px; }
.cc-mission__subtitle { font-size: 1.5rem; margin: 0 0 30px; }
.cc-mission__band { background: var(--cc-gray-bg); padding: 60px 0; margin: 40px 0 60px; }
.cc-mission__goals-title { color: var(--cc-red); font-size: 1.5rem; margin: 0 0 34px; max-width: 700px; }
.cc-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.cc-mission__grid ul { list-style: disc; margin: 0; padding-left: 22px; }
.cc-mission__grid li { margin-bottom: 22px; }
@media (max-width: 767px) {
  .cc-mission__grid { grid-template-columns: 1fr; }
}

/* ===== Module: _content_blocks ===== */
/* NOTE: duplicated by section 8 above (.body-wrapper-prefixed rules win). */
.cc-content-blocks__block { margin-bottom: 28px; }
.cc-content-blocks__block h3 {
  color: var(--cc-red);
  font-size: 1.2rem;
  margin: 0 0 12px;
}
.cc-content-blocks__block p { margin: 0 0 16px; }

/* ===== Module: _journey ===== */
/* NOTE: duplicated by section 9 above (.body-wrapper-prefixed rules win). */
.cc-journey__image { margin-bottom: 40px; }
.cc-journey__image img { width: 100%; }
.cc-journey__story p { margin: 0 0 26px; }

/* ===== Module: _cardinal ===== */
/* NOTE: no .body-wrapper equivalent exists for .cc-cardinal__* — these are the
   authoritative rules for the Cardinal module image/story. */
.cc-cardinal__image { margin-bottom: 40px; }
.cc-cardinal__image img { width: 100%; }
.cc-cardinal__story p { margin: 0 0 26px; }

/* ===== Module: _resources ===== */
/* NOTE: markup uses .cc-cardinal__image + .cc-resources__story; these
   .cc-resources__image rules are unused by current markup but preserved. */
.cc-resources__image { margin-bottom: 40px; }
.cc-resources__image img { width: 100%; }
.cc-resources__story p { margin: 0 0 26px; }

/* ===== Module: _donate ===== */
/* NOTE: duplicated by section 10 above (.body-wrapper-prefixed rules win). */
.cc-donate__intro { margin-bottom: 28px; }
.cc-donate__note { margin-top: 28px; font-size: 0.98rem; }

/* ===== Module: _contact_form ===== */
/* NOTE: section 11 above styles the same fields via `.cc-contact form ...`;
   these `.cc-contact__form ...` copies target the form wrapper and coexist. */
.cc-contact {
  background: var(--cc-teal);
  color: #fff;
  border-radius: 18px;
  padding: 50px 55px;
  margin-bottom: 60px;
}
.cc-contact__intro { margin-bottom: 34px; }
.cc-contact__form .hs-form-field { margin-bottom: 16px; }
.cc-contact__form label {
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 6px;
}
.cc-contact__form input[type="text"],
.cc-contact__form input[type="tel"],
.cc-contact__form input[type="email"],
.cc-contact__form textarea {
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
.cc-contact__form .hs-form-booleancheckbox label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}
.cc-contact__form .hs-button {
  background: var(--cc-red);
  color: #fff;
  font-weight: 700;
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .cc-contact { padding: 34px 24px; }
}

/* ===== Module: _header ===== */
/* FUNCTIONAL — not duplicated in the base above. Drives the sticky/scrolled
   header, burger button, and mobile nav dropdown (paired with module.js).
   CONFLICT (pre-existing, preserved as-is): `.cc-header` is set to
   position:sticky here while `.header` is set to position:fixed further down;
   the fixed `.header` governs the actual sticky behavior. Not resolved. */
body .body-wrapper .cc-header {
  padding: 0;
  background: #fff;
  position: sticky !important;
  top: 0 !important;
  z-index: 999;
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.header__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: block !important;
}
.header__container .row-fluid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.header__container .span12 {
  max-width: 1200px !important;
  width: 100% !important;
  padding: 0 !important;
}
.body-wrapper .cc-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}
.body-wrapper .cc-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.body-wrapper .cc-header__brand img {
  width: 90px;
  height: auto;
  flex-shrink: 0;
  transition: width 0.3s ease;
}
.body-wrapper .cc-header__brand-name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 240px;
  color: var(--cc-text);
}
.body-wrapper .cc-header__nav {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.body-wrapper .cc-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 10px;
}
.body-wrapper .cc-header__nav li {
  display: flex;
  align-items: center;
}
.body-wrapper .cc-header__nav li + li::before {
  content: "|";
  color: #c9c9c9;
  margin: 0 14px;
}
.body-wrapper .cc-header__nav a {
  text-decoration: none;
  color: #5a5a5a;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.body-wrapper .cc-header__nav a:hover {
  color: var(--cc-red);
}
.body-wrapper .cc-header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 5px;
  flex-direction: column;
  gap: 5px;
  z-index: 100;
  margin-left: auto;
}
.body-wrapper .cc-header__burger span {
  display: block;
  width: 25px;
  height: 3px;
  background: #333;
  border-radius: 3px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.body-wrapper .cc-header__burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}
.body-wrapper .cc-header__burger.active span:nth-child(2) {
  opacity: 0;
}
.body-wrapper .cc-header__burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}
.body-wrapper .cc-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 12px 0;
}
.body-wrapper .cc-header.scrolled .cc-header__brand img {
  width: 70px;
}
@media (max-width: 1024px) {
  .body-wrapper .cc-header__brand-name {
    display: none;
  }
}
@media (max-width: 900px) {
  .body-wrapper .cc-header__burger {
    display: flex;
  }
  .header__container {
    padding: 0 15px !important;
  }
  .header__container .row-fluid {
    padding: 0 !important;
  }
  .body-wrapper .cc-header__inner {
    padding: 0 15px;
    gap: 10px;
    justify-content: space-between;
  }
  .body-wrapper .cc-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: block !important;
    z-index: 99;
  }
  .body-wrapper .cc-header__nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .body-wrapper .cc-header__nav ul {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  .body-wrapper .cc-header__nav li {
    width: 100%;
    justify-content: center;
  }
  .body-wrapper .cc-header__nav li + li::before {
    display: none;
  }
  .body-wrapper .cc-header__nav a {
    font-size: 1.1rem;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    white-space: normal;
    display: block;
  }
  .body-wrapper .cc-header__nav a:hover {
    background: #f5f5f5;
  }
  .body-wrapper .cc-header.scrolled {
    padding: 10px 0;
  }
}
@media (max-width: 480px) {
  .body-wrapper .cc-header__brand img {
    width: 64px;
  }
  .body-wrapper .cc-header {
    padding: 15px 0;
  }
  .header__container {
    padding: 0 10px !important;
  }
  .body-wrapper .cc-header__inner {
    padding: 0 10px;
    gap: 8px;
  }
  .body-wrapper .cc-header.scrolled {
    padding: 10px 0;
  }
  .body-wrapper .cc-header.scrolled .cc-header__brand img {
    width: 54px;
  }
}
.body-wrapper .header {
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999999;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.body-wrapper .header.hide {
  transform: translateY(-100%);
}
.body-wrapper .header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 12px 0;
}
.body-wrapper .header.scrolled .cc-header__brand img {
  width: 70px;
  transition: width 0.3s ease;
}
@media (max-width: 900px) {
  .body-wrapper .header.scrolled {
    padding: 10px 0;
  }
}
@media (max-width: 480px) {
  .body-wrapper .header {
    padding: 15px 0;
  }
  .body-wrapper .header.scrolled {
    padding: 10px 0;
  }
  .body-wrapper .header.scrolled .cc-header__brand img {
    width: 54px;
  }
}

/* ===== Module: _footer ===== */
/* NOTE: duplicated by section 12 above (.body-wrapper-prefixed rules win). */
.cc-footer {
  background: var(--cc-dark);
  color: #e9e9e5;
  text-align: center;
  padding: 70px 20px;
  margin-top: 70px;
}
.cc-footer p { margin: 0 0 26px; }
.cc-footer p:last-child { margin-bottom: 0; }
.cc-footer__legal { margin-bottom: 26px; }

/* ==========================================================================
   HEADER SUB-MENUS (dropdowns) — desktop hover/focus, mobile accordion
   Pairs with modules/_header.module (markup) + module.js (mobile toggle).
   ========================================================================== */

/* Each top-level item anchors its dropdown */
.body-wrapper .cc-header__item { position: relative; }

/* Desktop caret indicator on items that have a submenu */
.body-wrapper .cc-header__item--has-children > a { position: relative; }
.body-wrapper .cc-header__item--has-children > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.body-wrapper .cc-header__item--has-children:hover > a::after,
.body-wrapper .cc-header__item--has-children:focus-within > a::after {
  transform: rotate(180deg);
}

/* The toggle button is desktop-hidden (hover/focus drives the dropdown) */
.body-wrapper .cc-header__submenu-toggle { display: none; }

/* Dropdown panel */
.body-wrapper .cc-header__submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 1000;
}
.body-wrapper .cc-header__item--has-children:hover > .cc-header__submenu,
.body-wrapper .cc-header__item--has-children:focus-within > .cc-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu items — reset the "|" separator + flex from the top-level rules */
.body-wrapper .cc-header__submenu li { display: block; width: 100%; }
.body-wrapper .cc-header__submenu li + li::before { content: none; margin: 0; }
.body-wrapper .cc-header__submenu a {
  display: block;
  padding: 10px 20px;
  color: #5a5a5a;
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1.4;
}
.body-wrapper .cc-header__submenu a:hover,
.body-wrapper .cc-header__submenu .is-active > a {
  background: #f5f5f5;
  color: var(--cc-red);
}

/* Third level: fly out to the side on desktop */
.body-wrapper .cc-header__subitem { position: relative; }
.body-wrapper .cc-header__submenu--nested {
  top: 0;
  left: 100%;
  border-radius: 10px;
}
.body-wrapper .cc-header__subitem--has-children > a::after {
  content: "";
  width: 0;
  height: 0;
  float: right;
  margin-top: 7px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
}

/* --------------------------------------------------------------------------
   MOBILE (≤900px): submenus become inline accordions inside the nav panel
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Let the item's link + toggle sit on one row and the submenu wrap below */
  .body-wrapper .cc-header__item--has-children { flex-wrap: wrap; }

  /* Hide the desktop caret; use the real toggle button instead */
  .body-wrapper .cc-header__item--has-children > a::after,
  .body-wrapper .cc-header__subitem--has-children > a::after { display: none; }

  .body-wrapper .cc-header__submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .body-wrapper .cc-header__submenu-toggle .cc-header__caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #5a5a5a;
    transition: transform 0.25s ease;
  }
  .body-wrapper .cc-header__item.submenu-open > .cc-header__submenu-toggle .cc-header__caret {
    transform: rotate(180deg);
  }

  /* Static, collapsible dropdown */
  .body-wrapper .cc-header__submenu,
  .body-wrapper .cc-header__submenu--nested {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: #f7f7f7;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease;
  }
  .body-wrapper .cc-header__item.submenu-open > .cc-header__submenu {
    max-height: 1000px;
    padding: 4px 0;
  }
  .body-wrapper .cc-header__submenu a {
    text-align: center;
    white-space: normal;
    font-size: 1rem;
    padding: 12px 20px;
  }
  /* Nested third level indented + always expanded within an open submenu */
  .body-wrapper .cc-header__submenu--nested {
    background: #efefef;
    max-height: none;
  }
}

/* ==========================================================================
   MODERN HEADER REDESIGN
   Supersedes the earlier header/sub-menu visuals (appears later, so it wins).
   Goals: single-row nav (no wrap, no pipes), pill hover states, chevron
   carets, soft floating dropdowns with a hover bridge, polished mobile panel.
   ========================================================================== */

/* ---- Layout: keep everything on one tidy row ---- */
.body-wrapper .cc-header__inner { gap: 24px; flex-wrap: nowrap; }

/* Brand: fixed footprint so it never grows into the nav */
.body-wrapper .cc-header__brand { flex-shrink: 0; gap: 12px; }
.body-wrapper .cc-header__brand img { width: 74px; }
.body-wrapper .cc-header__brand-name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  max-width: 190px;
}

/* Nav takes the remaining space and is allowed to shrink (min-width:0) */
.body-wrapper .cc-header__nav {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}
.body-wrapper .cc-header__menu,
.body-wrapper .cc-header__nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  row-gap: 0;
}
/* Kill the old "|" separators entirely */
.body-wrapper .cc-header__nav li + li::before { content: none; margin: 0; }

/* ---- Top-level items: pill buttons ---- */
.body-wrapper .cc-header__item { display: flex; align-items: center; }
.body-wrapper .cc-header__item > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--cc-text);
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.body-wrapper .cc-header__item > a:hover,
.body-wrapper .cc-header__item:focus-within > a {
  color: var(--cc-red);
  background: rgba(207, 51, 57, 0.08);
}
.body-wrapper .cc-header__item.is-active > a {
  color: var(--cc-red);
  background: rgba(207, 51, 57, 0.10);
}

/* ---- Chevron caret (replaces the flat triangle) ---- */
.body-wrapper .cc-header__item--has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.body-wrapper .cc-header__item--has-children:hover > a::after,
.body-wrapper .cc-header__item--has-children:focus-within > a::after {
  transform: translateY(1px) rotate(225deg);
}

/* ---- Floating dropdown ---- */
/* Force vertical stacking: the generic `.cc-header__nav ul { display:flex }`
   above also matches submenus, so raise specificity to override it. */
.body-wrapper .cc-header__nav .cc-header__submenu {
  display: block;
}
.body-wrapper .cc-header__nav .cc-header__submenu > li { width: 100%; }
.body-wrapper .cc-header__submenu {
  padding: 8px;
  min-width: 240px;
  top: calc(100% + 12px);
  left: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 45px rgba(20, 20, 45, 0.16);
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.2s ease,
              transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
              visibility 0.24s;
}
/* Invisible bridge so the pointer can cross the gap without closing */
.body-wrapper .cc-header__submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.body-wrapper .cc-header__item--has-children:hover > .cc-header__submenu,
.body-wrapper .cc-header__item--has-children:focus-within > .cc-header__submenu {
  transform: translateY(0) scale(1);
}
.body-wrapper .cc-header__submenu a {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cc-text);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.body-wrapper .cc-header__submenu a:hover,
.body-wrapper .cc-header__submenu .is-active > a {
  background: rgba(26, 145, 136, 0.10);
  color: var(--cc-teal);
}

/* ---- Third-level fly-out ---- */
.body-wrapper .cc-header__submenu--nested {
  top: -8px;
  left: calc(100% + 8px);
  border-radius: 16px;
}
.body-wrapper .cc-header__subitem--has-children > a::after {
  margin-top: 6px;
  border: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
}

/* ---- Mid-width desktop (901–1200px): tighten so nav clears the brand ---- */
@media (min-width: 901px) and (max-width: 1200px) {
  .body-wrapper .cc-header__inner { gap: 16px; }
  .body-wrapper .cc-header__menu,
  .body-wrapper .cc-header__nav ul { gap: 2px; }
  .body-wrapper .cc-header__item > a {
    padding: 8px 10px;
    font-size: 0.86rem;
    letter-spacing: 0.1px;
  }
  .body-wrapper .cc-header__brand img { width: 64px; }
  .body-wrapper .cc-header__brand-name {
    font-size: 0.92rem;
    max-width: 160px;
  }
}

/* --------------------------------------------------------------------------
   MODERN MOBILE (≤900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .body-wrapper .cc-header__nav {
    padding: 14px;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.14);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
  }
  .body-wrapper .cc-header__menu,
  .body-wrapper .cc-header__nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
  }

  .body-wrapper .cc-header__item {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 14px;
    transition: background-color 0.2s ease;
  }
  .body-wrapper .cc-header__item.submenu-open {
    background: rgba(15, 23, 42, 0.03);
  }
  .body-wrapper .cc-header__item > a {
    flex: 1;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 1.02rem;
  }

  /* Toggle chevron button */
  .body-wrapper .cc-header__submenu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }
  .body-wrapper .cc-header__submenu-toggle:hover {
    background: rgba(15, 23, 42, 0.05);
  }
  .body-wrapper .cc-header__submenu-toggle .cc-header__caret {
    width: 9px;
    height: 9px;
    border: 0;
    border-right: 2px solid var(--cc-text);
    border-bottom: 2px solid var(--cc-text);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .body-wrapper .cc-header__item.submenu-open > .cc-header__submenu-toggle .cc-header__caret {
    transform: rotate(-135deg);
  }

  /* Inline accordion panel */
  .body-wrapper .cc-header__submenu,
  .body-wrapper .cc-header__submenu--nested {
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.03);
    margin: 2px 6px 6px;
    width: calc(100% - 12px);
    box-shadow: none;
  }
  .body-wrapper .cc-header__submenu::before { content: none; }
  .body-wrapper .cc-header__item.submenu-open > .cc-header__submenu {
    padding: 6px;
  }
  .body-wrapper .cc-header__submenu a {
    border-radius: 9px;
    padding: 12px 16px;
    font-size: 0.98rem;
    font-weight: 500;
  }
  .body-wrapper .cc-header__submenu--nested {
    background: rgba(15, 23, 42, 0.05);
    margin: 4px 4px 4px 8px;
  }
}
/* ==========================================================================
   CONTACT — HubSpot NEW form renderer (.hsfc-*)
   Label + field on one row, all text white, inputs on white pills.
   The legacy `.cc-contact form ...` rules (section 11) target the old
   `hs-form-*` markup and don't apply to this renderer.
   ========================================================================== */

/* Layout: one field per row, comfortable vertical rhythm */
.body-wrapper .cc-contact .hsfc-Step__Content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 !important; 
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-FieldLabel span {
    font-size: 14px;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-Row { margin: 0; }

/* Each field = [ label | input ] on a single line */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* Label column: fixed width, right-aligned, white, bold.
   Scoped with `>` to the real field wrappers only — the checkbox <label> also
   carries .hsfc-FieldLabel, and must NOT be clamped to the 155px column. */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField > .hsfc-FieldLabel,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField > .hsfc-FieldLabel,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField > .hsfc-FieldLabel,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField > .hsfc-FieldLabel {
  flex: 0 0 155px;
  max-width: 155px;
  text-align: right;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-FieldLabel {
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-FieldLabel span { color: #fff; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-FieldLabel__RequiredIndicator { color: #fff; margin-left: 3px; }

/* Inputs: white pills */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextInput,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaInput {
  flex: 1 1 auto;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cc-text);
  box-shadow: none;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaInput { min-height: 52px; resize: vertical; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextInput::placeholder,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaInput::placeholder { color: #9a9a9a; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextInput:focus,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaInput:focus {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 1px;
}

/* Phone field: flag + input share one white pill */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneInput {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneInput .hsfc-TextInput { border-radius: 0; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneInput__FlagAndCaret {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0 12px;
  border-right: 1px solid #e3e3e3;
  cursor: pointer;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneInput__FlagAndCaret__Flag { font-size: 1.15rem; line-height: 1; color: #222; }
/* Caret fallback triangle (HubSpot's own caret styling isn't loaded here) */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneInput__FlagAndCaret__Caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6a6a6a;
}
/* Country dropdown must stay dark-on-white (base rule turns .cc-contact text white) */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DropdownOptions,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DropdownOptions * { color: var(--cc-text); }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DropdownOptions {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Consent block: consistent font + 10px gap between its items */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DataPrivacyField {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DataPrivacyField .hsfc-Row { margin: 0; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DataPrivacyField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-DataPrivacyField * {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}

/* Consent text + checkbox: white */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-RichText { color: #fff; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-CheckboxField label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;      /* undo the 155px field-label sizing */
  max-width: none;
  text-align: left;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-CheckboxField label > span { flex: 1 1 auto; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-CheckboxField label span { color: #fff; }
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-CheckboxInput {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 3px 0 0;
  accent-color: var(--cc-red);
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField {
    margin-bottom: 30px;
}
/* Submit button */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-Button {
  background: var(--cc-red);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 20px 55px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: -20px;
  transition: opacity 0.2s ease;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-Button:hover { opacity: 0.9; }

/* Validation / alert text readable on teal */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-ErrorAlert,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-NavigationRow__Alerts { color: var(--cc-red); }
[data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content>:last-child {
  margin-top: 0;
}
.hsfc-NavigationRow__Alerts {
    max-width: max-content;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-ErrorAlert, .body-wrapper .cc-contact .hsfc-Renderer .hsfc-NavigationRow__Alerts {
    color: var(--cc-red);
    background: #e1e7e7;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}
/* When empty (no alert shown), remove the box so no stray dot/background shows */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-NavigationRow__Alerts:empty,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-NavigationRow__Alerts:not(:has(*)) {
    background: none;
    padding: 0;
    margin: 0;
}
/* Field-level error: sits UNDER the input without disturbing the label|input
   row. The row stays nowrap; the error is pulled out of flow and placed just
   below, indented to line up with the input (155px label + 50px gap). */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField {
  position: relative;
}
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField > .hsfc-ErrorAlert,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField > .hsfc-ErrorAlert,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField > .hsfc-ErrorAlert,
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField > .hsfc-ErrorAlert {
  position: absolute;
  top: calc(100% + 4px);
  left: 205px;
  right: 0;
  margin: 0;
}
/* Only when a field actually has an error, reserve space below it so the
   absolutely-positioned message isn't hidden behind the next field. */
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField:has(> .hsfc-ErrorAlert),
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField:has(> .hsfc-ErrorAlert),
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField:has(> .hsfc-ErrorAlert),
.body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField:has(> .hsfc-ErrorAlert) {
  margin-bottom: 38px;
}
/* Mobile: stack label above field */
@media (max-width: 767px) {
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextField > .hsfc-FieldLabel,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-EmailField > .hsfc-FieldLabel,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-PhoneField > .hsfc-FieldLabel,
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-TextareaField > .hsfc-FieldLabel {
    flex: 0px;
    max-width: 155px;
    text-align: left;
  }

  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-FieldLabel {
    flex: none;
    max-width: none;
    text-align: left;
  }
  
  .body-wrapper .cc-contact .hsfc-Renderer .hsfc-Button {
      margin-top: 30px;
  }
}

/* ==========================================================================
   BACK-TO-TOP BUTTON (injected by _header module.js)
   ========================================================================== */
.body-wrapper .cc-to-top,
.cc-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--cc-red, #cf3339);
  color: #fff;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}
.cc-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cc-to-top:hover { background: var(--cc-teal, #1a9188); }
.cc-to-top:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
/* Chevron-up arrow */
.cc-to-top__arrow {
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(-45deg);
  margin-top: 3px;
}
@media (max-width: 767px) {
  .cc-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

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