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

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

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

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

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

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

/* Sections wrapping a genuinely full-bleed module (a background photo/tile
   that needs to touch the section's true edge) drop the default padding
   and container width. Every other module keeps the theme's normal default
   section spacing (theme.spacing.vertical_spacing / maximum_content_width,
   see theme-overrides.css) now that it has no padding of its own - that's
   an intentional design choice, not something to zero out here too.
   two-col-media-text is full-bleed only in its "large" variant - "small"
   is explicitly inset within the section's own padding by design. The
   same goes for video-embed: only its "full" layout is full-bleed,
   "contained" sits inside the normal section padding and width. */
.dnd-section:has(:is(.hero, .tile-row, .subnav-row, .two-col-media--large, .video-embed--full)) {
  padding: 0;
}

.dnd-section:has(:is(.hero, .tile-row, .subnav-row, .two-col-media--large, .video-embed--full)) > .row-fluid {
  max-width: none;
}

.dnd-section:has(:is(.hero, .tile-row, .subnav-row, .two-col-media--large, .video-embed--full)) .dnd-column {
  padding: 0;
}

/* Logo walls stacked back to back (e.g. clients, partners, accreditations on
   the home page) read as one block, so every logo-grid section after the
   first drops its top padding. Replaces a per-section padding={"top": 0}
   so the "Logo slider" section can be reused without hard-coding spacing. */
.dnd-section:has(.logo-grid) + .dnd-section:has(.logo-grid) {
  padding-top: 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 {
  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: var(--body-font-size, 1rem);
  margin: 0 0 2.1rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 2.1rem;
}

/* Lists */

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

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 2.1rem;
  padding-left: 1.05rem;
}

/* Horizontal rules */

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

/* Image alt text */

img {
  font-size: 0.875rem;
  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;
}

/* Shared CTA button (Figma "Button" component, node 1:99) — used inside
   modules that embed their own CTAs (Hero, Stat/CTA Banner, etc.) rather
   than the drag-and-drop button.module */

.btn {
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.4px;
  line-height: 1.2;
  padding: 20px 40px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.btn:hover,
.btn:active,
.btn:focus {
  font-weight: 600;
}

.btn--light {
  background-color: #FFF;
  border: 1px solid #FFF;
  color: #303133;
}

.btn--light:hover,
.btn--light:active,
.btn--light:focus {
  background-color: transparent;
  color: #FFF;
}

.btn--dark {
  background-color: #303133;
  border: 1px solid #303133;
  color: #FFFFFF;
}

.btn--dark:hover,
.btn--dark:active,
.btn--dark:focus {
  background-color: transparent;
  color: #303133;
}

.btn--outline-dark {
  background-color: transparent;
  border: 1px solid #303133;
  color: #303133;
}

.btn--outline-dark:hover,
.btn--outline-dark:active,
.btn--outline-dark:focus {
  background-color: #303133;
  color: #FFFFFF;
}

.btn--outline-light {
  background-color: transparent;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.btn--outline-light:hover,
.btn--outline-light:active,
.btn--outline-light:focus {
  background-color: #FFFFFF;
  color: #303133;
}

.btn--accent {
  background-color: #02CCB9;
  border: 1px solid #02CCB9;
  color: #FFFFFF;
}

.btn--accent:hover,
.btn--accent:active,
.btn--accent:focus {
  background-color: transparent;
  color: #02CCB9;
}

.btn--small {
  padding: 8px 14px;
}

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

/* Labels */

form label {
  display: block;
  font-size: 1.312rem;
  margin-bottom: 0.525rem;
}

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

/* Help text */

form legend {
  font-size: 1.312rem;
}

/* 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: 1.312rem;
  padding: 1.05rem;
  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: 1.05rem 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.525rem;
}

/* 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: 1.312rem;
  margin: 0 0 2.1rem;
}

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: 1.5rem !important;
}

/* Validation */

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

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

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

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


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 2.1rem;
  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;
}

/* Sticky header, all variants - fixed to the viewport, hides on scroll down,
   reappears on scroll up (toggled by .header--hidden via main.js). Needs a
   solid background by default since it's no longer in normal document flow
   (main.js adds matching body padding-top for non-transparent variants so
   page content doesn't start underneath it). */

.header {
  background-color: #FFFFFF;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 50;
}

/* Header icon colour (hamburger, close, search). Icons are CSS masks filled
   with this colour, so one variable switches them all: #303133 on the white
   header, white while a transparent header sits over a hero. */

.header {
  --header-icon-color: #303133;
}

.header--transparent:not(.header--scrolled) {
  --header-icon-color: #FFFFFF;
}

.header--hidden {
  transform: translateY(-100%);
}

/* Transparent / overlay header variant (homepage hero, no-nav campaign
   pages) - genuinely see-through and white-branded until the user scrolls
   past the hero, at which point .header--scrolled (added by main.js) makes
   it solidify back to the exact same look as the default header.
   Selector is qualified as .header.header--transparent (not just
   .header--transparent) to out-specificity theme-overrides.css's
   `.header { background-color:  }` - that file loads
   after main.css in base.html, so a same-specificity single-class selector
   here would lose the cascade tie and always render solid. */

.header.header--transparent {
  background-color: #0000001A;
}

/* Rough header height so the hero clears the overlay header before main.js
   runs - main.js then sets the measured value inline on the html element, which
   overrides this. Heroes add it to their top padding. */

:root:has(.header--transparent) {
  --header-overlap: 104px;
}

.header--transparent .header__container {
  background-color: transparent;
}

.header--transparent.header--scrolled {
  background-color: #FFFFFF;
}

/* Fallback only - used when theme.header.logo.white_image is empty (no
   .header--has-white-logo class on <header>, see header-transparent.html).
   Once a real white logo is uploaded, the crossfade rules below take over
   and this never applies. */

.header--transparent:not(.header--scrolled):not(.header--has-white-logo) .header__logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease-in-out;
}

/* Logo crossfade (transparent header only) - the dark logo (@hubspot/logo)
   and the optional white logo (theme.header.logo.white_image) are stacked
   in the same grid cell and cross-faded via opacity, rather than hard-cut,
   when scrolling past the hero toggles .header--scrolled on <header>. */

/* Double class so it beats the later `.header__logo { display: flex }` -
   with flex the two logos sat side by side instead of stacked */
.header__logo.header__logo--crossfade {
  display: grid;
}

.header__logo-image {
  align-items: center;
  display: flex;
  grid-area: 1 / 1;
  transition: opacity 0.3s ease-in-out;
}

.header__logo-image--white {
  opacity: 0;
  pointer-events: none;
}

.header--has-white-logo.header--transparent:not(.header--scrolled) .header__logo-image--dark {
  opacity: 0;
  pointer-events: none;
}

.header--has-white-logo.header--transparent:not(.header--scrolled) .header__logo-image--white {
  opacity: 1;
  pointer-events: auto;
}

.header--transparent:not(.header--scrolled) .header__navigation .menu__link,
.header--transparent:not(.header--scrolled) .header__navigation .menu__item--depth-1:last-child:before {
  color: #FFFFFF !important;
  transition: color 0.3s ease-in-out;
}

/* No-navigation header (gated campaign / landing pages) - Figma 101:8249.
   Same bar as the transparent header, logo only, left aligned. The logo
   sits exactly where it does in the transparent header:
   - 1500px and below: the shared 24px container padding (logo at 24px)
   - 1501px and up: the transparent header centres a logo + nav + search
     group 1383px wide (measured on staging with the current menu), so the
     no-nav content box is that wide and centred too, 104px tall like the
     desktop bar. If the menu's width changes a lot, update 1383px. */

.header--no-navigation .header__container {
  justify-content: flex-start;
}

.header--no-navigation .header__logo img {
  height: auto !important;
  width: 198px !important; /* same as the other headers - the logo module here defaulted to 486px */
}

@media (min-width: 1501px) {
  .header--no-navigation .header__container {
    margin: 0 auto;
    max-width: calc(1383px + 48px);
    min-height: 104px;
  }
}

/* Header container */

.header__container {
  align-items: center;
  border-bottom: 1px solid rgba(203, 214, 226, 0.25);
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: none;
  padding: 24px;
  width: 100%;
}

@media (max-width: 600px) {
  .header__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Figma's nav has no visible dropdown caret - remove the toggle arrows entirely */

/* Desktop only - the mobile menu still needs its +/- toggles to open submenus */
.menu--desktop .menu__child-toggle,
.menu--desktop .menu__child-toggle-icon {
  display: none !important;
}

/* Nav items - Figma: Montserrat SemiBold 12px, uppercase, 0.96px tracking,
   16px line-height, py-44/px-12 per item.
   NOTE: menu.module's own module.css sets `.menu__item--depth-1 { display:
   inline-block }` (this is what makes the nav horizontal) and `.menu__link
   { font-size: 1.376rem }` at the same specificity as a bare override here,
   so these rules target .header__navigation .menu__link / .menu__item--depth-1
   specifically to reliably win regardless of CSS load order - do NOT add a
   `display` override on .menu__item/.menu__item--depth-1 here, it will
   break the inline-block horizontal layout. */

.header__navigation .menu__item--depth-1 {
  padding: 0;
}

.header__navigation .menu__link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.96px;
  line-height: 16px;
  padding: 44px 12px;
  text-transform: uppercase;
}

/* "For Parents" sits after a "|" divider in Figma, separated from the rest */

.header__navigation .menu--desktop .menu__item--depth-1:last-child .menu__link {
  padding-left: 8px;
}

.header__navigation .menu--desktop .menu__item--depth-1:last-child:before {
  color: currentColor;
  content: "|";
  font-size: 12px;
  font-weight: 600;
  opacity: 0.4;
  padding-left: 12px;
}

.header--transparent .header__container {
  border-bottom: none;
}

/* Desktop: logo | nav | search icon, all in one row (Figma layout).
   Search now lives inside row-2 (markup, after nav) as a true sibling,
   not via cross-row CSS reordering - row-1 is effectively unused unless
   the language switcher is active. */

@media (min-width: 1501px) {
  .header__column {
    align-items: center;
    display: flex;
  }

  /* row-1 is empty unless the language switcher is active. The shared
     `.header__row-1, .header__row-2 { width: 100% }` rule further down
     this file (unconditional, same specificity) loads AFTER this block
     and wins on source order alone - !important forces these to win
     regardless. Without this, row-1 eats all the flex space and
     squeezes row-2 (nav+search) down, forcing the nav to wrap. */
  .header__row-1 {
    width: auto !important;
  }

  .header__row-2 {
    align-items: center;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: flex-end;
    padding-top: 0;
    width: auto !important;
  }
}

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

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

/* Tablet / mobile (hamburger at 1500px and below) - Figma 193:5612:
   logo left, [search][hamburger] right in a single row, 24px padding,
   28px icon boxes with an 8px gap. The container is the positioning
   context for the dropdown panels (nav / search / language), so they
   span the full header width directly under it. */

@media (max-width: 1500px) {
  .header__container {
    flex-direction: row;
    justify-content: space-between;
    padding: 24px;
    position: relative;
  }

  .header__column {
    align-items: center;
    display: flex;
    position: static;
  }

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

  .header__row-2 {
    gap: 8px;
    justify-content: flex-end;
    padding: 0;
    width: auto;
  }

  /* Figma order: search icon first, hamburger / close last */
  .header__search--toggle {
    order: 1;
  }

  .header__language-switcher--toggle {
    order: 2;
  }

  .header__navigation--toggle,
  .header__close--toggle {
    order: 3;
  }
}

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

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

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

.header__logo .logo-company-name {
  font-size: 1.751rem;
  margin-top: 1.05rem;
}

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

/* Search bar */

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




.header__search .hs-search-field__input {
  
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-position: center right 15px;
    background-repeat: no-repeat;
  
  height: 45px;
  padding: 0 1.05rem;
}




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

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

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


/* Language switcher */

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

.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.525rem 1.05rem;
}

.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: 1.125rem;
  margin-bottom: 0.262rem;
  margin-left: 1.05rem;
}

.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: 1.05rem;
  margin-top: 0.262rem;
  width: 0px;
}

@media (max-width: 1500px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.575rem;
    padding-right: 0;
  }

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

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

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

/* Mobile toggles */

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

  /* Panels drop down directly under the header bar (top: 100% of
     .header__container) and scroll internally if taller than the
     remaining viewport. --header-height is set by main.js. */
  .header__navigation.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    max-height: calc(100vh - var(--header-height, 160px));
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 2;
  }

  .header__navigation.open {
    min-height: calc(100vh - var(--header-height, 160px));
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    background-color: var(--header-icon-color);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin: 0;
    position: relative;
  }

  /* While any panel is open the close (X) takes the hamburger's place;
     the search icon stays visible next to it (Figma 193:5612). */
  .header--panel-open .header__navigation--toggle,
  .header--panel-open .header__language-switcher--toggle {
    display: none;
  }

  .header__navigation--toggle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M23.3327 8.75H4.66602V10.5H23.3327V8.75Z'/%3E%3Cpath d='M23.3327 17.5H4.66602V19.25H23.3327V17.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M23.3327 8.75H4.66602V10.5H23.3327V8.75Z'/%3E%3Cpath d='M23.3327 17.5H4.66602V19.25H23.3327V17.5Z'/%3E%3C/svg%3E");
    height: 28px;
    width: 28px;
  }

  .header__language-switcher--toggle {
    background-color: transparent;
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    height: 28px;
    -webkit-mask-image: none;
    mask-image: none;
    width: 28px;
  }

  .header__search--toggle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M13.2917 6.04167C17.2792 6.04167 20.5417 9.30417 20.5417 13.2917C20.5417 14.9833 19.9375 16.5542 18.9708 17.7625L23.5625 22.3542L22.2333 23.6833L17.6417 19.0917C16.4333 20.0583 14.8625 20.6625 13.1708 20.6625C9.18333 20.6625 5.92083 17.4 5.92083 13.4125C5.92083 9.42501 9.30417 6.04167 13.2917 6.04167ZM13.2917 18.7292C16.3125 18.7292 18.7292 16.3125 18.7292 13.2917C18.7292 10.2708 16.3125 7.85417 13.2917 7.85417C10.2708 7.85417 7.85417 10.2708 7.85417 13.2917C7.85417 16.3125 10.2708 18.7292 13.2917 18.7292Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M13.2917 6.04167C17.2792 6.04167 20.5417 9.30417 20.5417 13.2917C20.5417 14.9833 19.9375 16.5542 18.9708 17.7625L23.5625 22.3542L22.2333 23.6833L17.6417 19.0917C16.4333 20.0583 14.8625 20.6625 13.1708 20.6625C9.18333 20.6625 5.92083 17.4 5.92083 13.4125C5.92083 9.42501 9.30417 6.04167 13.2917 6.04167ZM13.2917 18.7292C16.3125 18.7292 18.7292 16.3125 18.7292 13.2917C18.7292 10.2708 16.3125 7.85417 13.2917 7.85417C10.2708 7.85417 7.85417 10.2708 7.85417 13.2917C7.85417 16.3125 10.2708 18.7292 13.2917 18.7292Z'/%3E%3C/svg%3E");
    height: 29px;
    width: 29px;
  }

  .header__close--toggle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M20.1993 6.31726L7 19.5166L8.23744 20.754L21.4368 7.5547L20.1993 6.31726Z'/%3E%3Cpath d='M21.1993 19.7158L8 6.51648L6.76256 7.75392L19.9619 20.9533L21.1993 19.7158Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M20.1993 6.31726L7 19.5166L8.23744 20.754L21.4368 7.5547L20.1993 6.31726Z'/%3E%3Cpath d='M21.1993 19.7158L8 6.51648L6.76256 7.75392L19.9619 20.9533L21.1993 19.7158Z'/%3E%3C/svg%3E");
    display: none;
    height: 28px;
    width: 28px;
  }

  .header__close--toggle.show {
    display: block;
  }
}

/* Collapse search to an icon-only trigger on desktop too (matches design) */

@media (min-width: 1501px) {
  .header__search {
    padding: 0;
    position: relative;
  }

  .header__search form {
    display: none;
  }

  .header__search--toggle {
    background-color: var(--header-icon-color);
    cursor: pointer;
    display: block;
    height: 29px;
    margin-left: 1.875rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M13.2917 6.04167C17.2792 6.04167 20.5417 9.30417 20.5417 13.2917C20.5417 14.9833 19.9375 16.5542 18.9708 17.7625L23.5625 22.3542L22.2333 23.6833L17.6417 19.0917C16.4333 20.0583 14.8625 20.6625 13.1708 20.6625C9.18333 20.6625 5.92083 17.4 5.92083 13.4125C5.92083 9.42501 9.30417 6.04167 13.2917 6.04167ZM13.2917 18.7292C16.3125 18.7292 18.7292 16.3125 18.7292 13.2917C18.7292 10.2708 16.3125 7.85417 13.2917 7.85417C10.2708 7.85417 7.85417 10.2708 7.85417 13.2917C7.85417 16.3125 10.2708 18.7292 13.2917 18.7292Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M13.2917 6.04167C17.2792 6.04167 20.5417 9.30417 20.5417 13.2917C20.5417 14.9833 19.9375 16.5542 18.9708 17.7625L23.5625 22.3542L22.2333 23.6833L17.6417 19.0917C16.4333 20.0583 14.8625 20.6625 13.1708 20.6625C9.18333 20.6625 5.92083 17.4 5.92083 13.4125C5.92083 9.42501 9.30417 6.04167 13.2917 6.04167ZM13.2917 18.7292C16.3125 18.7292 18.7292 16.3125 18.7292 13.2917C18.7292 10.2708 16.3125 7.85417 13.2917 7.85417C10.2708 7.85417 7.85417 10.2708 7.85417 13.2917C7.85417 16.3125 10.2708 18.7292 13.2917 18.7292Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.3s ease-in-out;
    width: 29px;
  }
}

/* ==========================================================================
   Mobile menu panel (1500px and below) - Figma 193:5310 "M-Menu"
   While the nav is open (.header--nav-open, set by main.js) the header
   becomes a full-screen scrollable overlay:
     1. white bar: logo | search | close
     2. dark (#303133) menu panel
     3. announcement bar, moved from the top to the bottom of the overlay
   The order is done with flexbox only - .header__column and .header__row-2
   become display: contents so the nav panel can sit on its own row of
   .header__container under the logo bar. No DOM moving.
   ========================================================================== */

@media (max-width: 1500px) {
  html.header-nav-open {
    overflow: hidden;
  }

  .header.header--nav-open {
    background-color: #303133;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 1. Logo bar first, announcement bar (top dnd area) pushed to the bottom */
  .header--nav-open > .header__container {
    background-color: #FFFFFF;
    border-bottom: none;
    column-gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    order: -1;
  }

  .header--nav-open > .header__skip + .container-fluid {
    margin-top: auto;
  }

  .header--nav-open .header__column,
  .header--nav-open .header__row-2 {
    display: contents;
  }

  .header--nav-open .header__row-1 {
    display: none;
  }

  .header--nav-open .header__logo {
    margin-right: auto;
  }

  /* 2. Menu panel - full width row under the logo bar */
  .header--nav-open .header__navigation.open {
    background-color: #303133;
    flex: 0 0 calc(100% + 48px);
    margin: 24px -24px -24px;
    max-height: none;
    min-height: 0;
    order: 10;
    overflow: visible;
    padding: 48px 32px; /* + 16px item padding = Figma's 64px */
    position: static;
  }

  /* Spacing between items is padding on the links (not gap/margin), so the
     whole row is tappable with no dead space between items. The visual
     spacing still matches Figma: 32px between top-level items, 20px under
     a parent and between sub items, 32px after the last sub item. */
  .header .menu--mobile .menu__wrapper {
    display: flex;
    flex-direction: column;
  }

  .header .menu--mobile .menu__item--depth-1 {
    border: none;
    padding: 0;
    position: relative;
  }

  /* Top level: Montserrat SemiBold 18/16, 1.44px tracking, uppercase, white */
  .header .menu--mobile .menu__item--depth-1 > .menu__link {
    background: none;
    color: #FFFFFF;
    display: block;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.44px;
    line-height: 16px;
    padding: 16px 48px 16px 0;
    text-transform: uppercase;
    width: 100%;
  }

  /* Caret toggle - tap area covers the right of the row, icon sits flush right */
  .header .menu--mobile .menu__child-toggle {
    background: none;
    height: 48px; /* full height of the top-level link row */
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
  }

  .header .menu--mobile .menu__child-toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M8.88867 1.11632L8.47969 0.707203L4.79821 4.38944L1.11598 0.707203L0.706855 1.11632L4.7978 5.2072L8.88867 1.11632Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23004F9F' stroke='%2302CCB9'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    height: 6px;
    margin: 0 0 0 auto;
    transition: transform 0.3s;
    width: 10px;
  }

  .header .menu--mobile .menu__item--open > .menu__child-toggle .menu__child-toggle-icon {
    transform: rotate(180deg);
  }

  .header .menu--mobile .menu__submenu {
    background: none;
    border: none;
    box-shadow: none;
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .header .menu--mobile .menu__item--open > .menu__submenu {
    display: flex;
  }

  .header .menu--mobile .menu__submenu .menu__item {
    background: none;
    border: none;
    padding: 0;
  }

  .header .menu--mobile .menu__submenu .menu__item:before {
    content: none;
  }

  /* Submenu links: Montserrat Medium 16/16, 0.64px tracking, white */
  .header .menu--mobile .menu__submenu .menu__link,
  .header .menu--mobile .menu__submenu .menu__link:hover,
  .header .menu--mobile .menu__submenu .menu__link:focus {
    background: none;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.64px;
    line-height: 16px;
    padding: 10px 0;
    text-transform: none;
    width: 100%;
  }

  /* 16px parent bottom padding + 4px = 20px under the parent;
     16px + next parent's 16px = 32px after the last sub item */
  .header .menu--mobile .menu__submenu--level-2 > .menu__item:first-child > .menu__link {
    padding-top: 4px;
  }

  .header .menu--mobile .menu__submenu--level-2 > .menu__item:last-child > .menu__link {
    padding-bottom: 16px;
  }

  .header .menu--mobile .menu__submenu--level-3 {
    padding-left: 20px;
  }

  /* 3. Announcement bar at the bottom of the open menu - Figma 193:5771:
     32px padding, stacked text + button with a 16px gap */
  .header--nav-open .announcement-bar__inner {
    flex-direction: column;
    gap: 16px;
    padding: 32px;
  }
}

/* Below 1300px the announcement bar only appears inside the open mobile
   menu, not above the header bar */

@media (max-width: 1300px) {
  .header:not(.header--nav-open) .announcement-bar {
    display: none;
  }
}

/* Active page and its ancestor items in the menu (desktop + mobile).
   !important + .header__navigation so it beats the white !important link
   colour on the transparent header. */

.header .header__navigation .menu__link.menu__link--active-link,
.header .header__navigation .menu__link.menu__link--active-branch {
  color: #02CCB9 !important;
}

/* ==========================================================================
   Desktop dropdowns (1501px and up) - styled after the live site: no arrow,
   no outline, dark panel attached flush to the bottom of the header bar,
   white text, green (#119688) on hover and for the active page.
   ========================================================================== */

@media (min-width: 1501px) {
  /* Each top-level link is a real 104px box (16px line + 44px padding top and
     bottom, Figma). The header bar is exactly that tall, so the dropdown's
     top: 100% lands on the bar's bottom edge and the mouse never crosses a
     gap (which would close it - the menu opens on hover of the item). */
  .header__container {
    padding-bottom: 0;
    padding-top: 0;
  }

  .header__navigation .menu--desktop .menu__item--depth-1 > .menu__link {
    display: inline-block;
  }

  .header .menu--desktop .menu__submenu {
    background-color: #303133;
    border: none;
    border-radius: 0;
    box-shadow: none;
    left: 0;
    min-width: 270px;
    padding: 20px 0;
    top: 100%;
    transform: none;
    width: auto;
  }

  /* Keep the last two dropdowns inside the viewport */
  .header .menu--desktop .menu__item--depth-1:nth-last-child(-n+2) > .menu__submenu {
    left: auto;
    right: 0;
  }

  /* No arrow */
  .header .menu--desktop .menu__submenu--level-2 > .menu__item:first-child:before {
    content: none;
    display: none;
  }

  .header .menu--desktop .menu__submenu .menu__item {
    background: none;
    border: none;
  }

  /* Dropdown links - Montserrat Medium 14px, sentence case */
  .header .header__navigation .menu--desktop .menu__submenu .menu__link {
    background: none;
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.64px;
    line-height: 16px;
    padding: 14px 32px;
    text-transform: none;
    transition: color 0.2s;
    white-space: nowrap;
  }

  /* Green on hover / keyboard focus, and on the top-level item whose
     dropdown is open. !important beats the transparent header's white
     !important link colour. */
  .header .header__navigation .menu--desktop .menu__submenu .menu__link:hover,
  .header .header__navigation .menu--desktop .menu__submenu .menu__link:focus,
  .header .header__navigation .menu--desktop .menu__item--open > .menu__link {
    color: #02CCB9 !important;
  }
}

/* ==========================================================================
   Search overlay (all widths) - like the live site: the search icon opens a
   full-page dark overlay with one large field. The field matches the form
   fields in Figma (51:1336): 10% white fill, 30% white 1px border, 8px
   radius, 48px tall, 24px side padding, Montserrat Medium 14px white.
   Closes with the X, the Escape key or a click on the dark background
   (main.js). Selectors are prefixed with .header so they beat the older
   .header__search rules above at every breakpoint.
   ========================================================================== */

html.header-search-open {
  overflow: hidden;
}

.header .header__search.open {
  align-items: center;
  background-color: rgba(48, 49, 51, 0.97);
  border: none;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  width: auto;
  z-index: 100;
}

.header .header__search.open .hs_cos_wrapper,
.header .header__search.open .hs-search-field {
  max-width: 752px;
  width: 100%;
}

.header .header__search.open .hs-search-field {
  position: relative;
}

.header .header__search form {
  background: transparent;
}
.header .header__search.open form {
  display: block;
  position: relative;
}

/* Label kept for screen readers only - the placeholder is the visible label */
.header .header__search label {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.header .header__search .hs-search-field__input,
.header .header__search .hs-search-field--open .hs-search-field__input {
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath fill='%23FFFFFF' d='M13.2917 6.04167C17.2792 6.04167 20.5417 9.30417 20.5417 13.2917C20.5417 14.9833 19.9375 16.5542 18.9708 17.7625L23.5625 22.3542L22.2333 23.6833L17.6417 19.0917C16.4333 20.0583 14.8625 20.6625 13.1708 20.6625C9.18333 20.6625 5.92083 17.4 5.92083 13.4125C5.92083 9.42501 9.30417 6.04167 13.2917 6.04167ZM13.2917 18.7292C16.3125 18.7292 18.7292 16.3125 18.7292 13.2917C18.7292 10.2708 16.3125 7.85417 13.2917 7.85417C10.2708 7.85417 7.85417 10.2708 7.85417 13.2917C7.85417 16.3125 10.2708 18.7292 13.2917 18.7292Z'/%3E%3C/svg%3E");
  background-position: center right 16px;
  background-repeat: no-repeat;
  background-size: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: none;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 1.35;
  max-width: none;
  padding: 0 56px 0 24px;
  width: 100%;
}

.header .header__search .hs-search-field__input::placeholder {
  color: #FFFFFF;
  opacity: 1;
}

.header .header__search .hs-search-field__input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  outline: none;
}

/* Suggestions: plain list under the field, white text, green on hover */
.header .header__search .hs-search-field--open .hs-search-field__suggestions {
  background: none;
  border: none;
  margin: 8px 0 0;
  padding: 0;
  position: static;
}

.header .header__search .hs-search-field__suggestions li {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
}

.header .header__search .hs-search-field__suggestions li a {
  background: none;
  color: #FFFFFF;
  display: block;
  font-weight: 500;
  padding: 14px 24px;
  text-decoration: none;
  transition: color 0.2s;
}

.header .header__search .hs-search-field__suggestions li a:hover,
.header .header__search .hs-search-field__suggestions li a:focus {
  color: #119688;
}

/* Close (X), top right of the overlay */
.header__search-close {
  display: none;
}

.header .header__search.open .header__search-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M20.1993 6.31726L7 19.5166L8.23744 20.754L21.4368 7.5547L20.1993 6.31726Z'/%3E%3Cpath d='M21.1993 19.7158L8 6.51648L6.76256 7.75392L19.9619 20.9533L21.1993 19.7158Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M20.1993 6.31726L7 19.5166L8.23744 20.754L21.4368 7.5547L20.1993 6.31726Z'/%3E%3Cpath d='M21.1993 19.7158L8 6.51648L6.76256 7.75392L19.9619 20.9533L21.1993 19.7158Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: block;
  height: 28px;
  padding: 0;
  position: absolute;
  right: 24px;
  top: 24px;
  width: 28px;
}

/* Templates that opt out of the announcement bar (block body_classes ->
   body-wrapper--no-announcement in base.html), e.g. Integration Partner
   Detail. Hidden at every width, including inside the open mobile menu. */

.body-wrapper--no-announcement .header .announcement-bar {
  display: none !important;
}
/* Footer layout */

.footer {
  border-top: 4px solid #02CCB9;
  padding: 40px 0 0;
  position: relative;
}
.footer .content-wrapper {
  max-width: 1288px;
  padding: 0;
}

.footer .dnd-section {
  padding-top: 32px;
  padding-bottom: 32px;
  margin-bottom: 0;
}

/* Logo + CTA row */

.footer .row-fluid {
  align-items: center;
}

.footer .header__logo,
.footer img {
  height: auto;
  max-height: 55px;
  object-fit: contain;
  width: auto;
}

.footer .cta-button {
  text-align: right;
}

/* Dividers (Figma: rgba(255,255,255,0.2)) */

.footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

/* Compliance copy (Figma: rgba(255,255,255,0.75), 14px, Regular) */

.footer__compliance {
  color: rgba(255, 255, 255, 0.75);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

/* Bottom bar - distinct background strip (Figma #2a2b2d) */

.footer__bottom-bar .dnd-section {
  padding-top: 23px;
  padding-bottom: 23px;
}

.footer__bottom-bar .row-fluid {
  align-items: center;
}
.footer .social-links {
  justify-content: flex-end;
}

/* Back to top */

.footer__back-to-top {
  align-items: center;
  background-color: #119688;
  border-radius: 999px;
  color: #FFFFFF;
  display: flex;
  height: 48px;
  justify-content: center;
  position: absolute;
  right: 32px;
  text-decoration: none;
  top: -24px;
  width: 48px;
  transition: background-color 0.3s ease-in-out;
}

.footer__back-to-top:hover,
.footer__back-to-top:focus {
  background-color: #02CCB9;
}

.footer--minimal {
  border: none;
  padding: 0;
}

@media (max-width: 991px) {
  .footer,
  .footer .cta-button {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .footer .cta-button,
  .footer .social-links {
    margin-top: 16px;
  }
  .footer .social-links {
    justify-content: center;
  }
  .footer .cta-button a {
    width: 100%;
  }
  .footer .legal-links {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .footer .dnd-row > .row-fluid {
    flex-wrap: wrap;
  }

  .footer__bottom-bar .dnd-row > .row-fluid {
    flex-wrap: wrap;
    gap: 16px;
  }
}
/* 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%;
}

/* Gated campaign landing - Figma hero: overlay header (measured by main.js) + 104px padding
   above the title, 104px below (the module's default compact padding is 140px each side). */

.body-container--gated-landing .hero--compact .hero__inner {
  padding-bottom: 104px;
  padding-top: calc(104px + var(--header-overlap, 0px));
}

@media (max-width: 768px) {
  .body-container--gated-landing .hero--compact .hero__inner {
    padding-bottom: 64px;
    padding-top: calc(64px + var(--header-overlap, 0px));
  }
}

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