/* Theme base styles */

/* INCLUDE THE VARIABLES AT THE TOP OF THE FILE, AS IT'S USED IN ALL STYLESHEETS BELOW */

:root {
  --container-width: 1330px;
  --dnd-section-padding: 60px 20px;
  --dnd-section-padding-tablet: 40px 20px;
  --dnd-section-padding-mobile: 30px 20px;
  --hero-section-padding: 100px 20px;
  --hero-section-padding-tablet: 60px 20px;
  --hero-section-padding-mobile: 40px 20px;
  --hero-section-padding-top-desktop: 40px;
  --hero-section-padding-top-tablet: 20px;
  --hero-section-padding-top-mobile: 0px;
}


:root {
  --primary-color: #010F5A;
  --secondary-color: #00B3FD;
  --accent-color: #F4D800;
  --dark-color: #4c4492;
  --light-color: #F2F5FF;
  --white-color: #ffffff;
  --font-color: #3C4677;
  --drop-shadow: 0 45px 100px -45px rgba(0, 0, 0, 0.45);
}


:root {
  --font-family: "Plus Jakarta Sans", sans-serif;
  --body-font-size: 20px;
  --body-font-weight: 400;
  --body-font-letter-spacing: normal;
  --body-font-line-height: 1.5;
  --heading-1-font-size: 80px;
  --heading-1-font-weight: 400;
  --heading-1-line-height: 1;
  --heading-2-font-size: 48px;
  --heading-2-font-weight: 700;
  --heading-2-line-height: 1;
  --heading-3-font-size: 36px;
  --heading-3-font-weight: 500;
  --heading-3-line-height: 1.2;
  --heading-4-font-size: 20px;
  --heading-4-font-weight: 600;
  --heading-4-line-height: 1.5;
  --heading-5-font-size: 16px;
  --heading-5-font-weight: 600;
  --heading-5-line-height: 1.2;
  --heading-6-font-size: 14px;
  --heading-6-font-weight: 600;
  --heading-6-line-height: 1.2;
  --paragraph-font-size: 1rem;
  --small-font-size: 0.8rem;
  --body-font-color: var(--font-color);
  --heading-font-color: var(--primary-color);
  --anchor-font-color: var(--secondary-color);
  --anchor-font-hover-color: var(--accent-color);
}


:root {
  --button-background-color: var(--primary-color);
  --button-font-color: var(--white-color);
  --button-border: none;
  --button-border-radius: 50px;
  --button-padding: 14px 24px;
}


:root {
  --form-title-background-color: var(--light-color);
  --form-title-font-color: var(--primary-color);
  --form-label-font-color: var(--primary-color);
  --form-help-text-font-color: var(--primary-color);
  /* Crimson, not brown. 4.80:1 on --secondary-color; distinct from --font-color. */
  --form-error-text-font-color: #780818;
  --form-input-border-color: var(--dark-color);
  --form-input-focus-border-color: var(--primary-color);
}


:root {
  --table-header-background-color: var(--light-color);
  --table-background-color: var(--white-color);
  --table-border-color: var(--primary-color);
  --table-footer-background-color: var(--light-color);
  --table-footer-font-color: var(--primary-color);
}


:root {
  --header-height-desktop: 160px;
  --header-height-tablet: 120px;
  --header-height-mobile: 100px;
  --header-padding-top-desktop: 20px;
  --header-padding-top-tablet: 20px;
  --header-padding-top-mobile: 20px;
  --header-background-color: var(--white-color);
  --header-scrolled-padding-top: 5px;
  --header-scrolled-inner-padding-y: 15px;
  --header-default-inner-padding-y: 25px;
  --header-height-mobile-scrolled: calc(
    var(--header-height-mobile)
    - (var(--header-padding-top-mobile) - var(--header-scrolled-padding-top))
    - (2 * (var(--header-default-inner-padding-y) - var(--header-scrolled-inner-padding-y)))
  );
  --header-height-tablet-scrolled: calc(
    var(--header-height-tablet)
    - (var(--header-padding-top-tablet) - var(--header-scrolled-padding-top))
    - (2 * (var(--header-default-inner-padding-y) - var(--header-scrolled-inner-padding-y)))
  );
}


:root {
  --footer-background-color: var(--primary-color);
}
/* Self-hosted Plus Jakarta Sans — subset weights used by the theme (400–700). */
/* Paths are relative to this file (styles/tools/). get_asset_url emits an absolute
   CDN URL so the browser does not resolve url() against template_main.min.css. */

/* plus-jakarta-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
}
/* plus-jakarta-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2');
}
/* plus-jakarta-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
/* plus-jakarta-sans-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 500;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-500italic.woff2') format('woff2');
}
/* plus-jakarta-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
/* plus-jakarta-sans-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 600;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-600italic.woff2') format('woff2');
}
/* plus-jakarta-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}
/* plus-jakarta-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 700;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/public/@projects/cpio2026/theme/fonts/plus-jakarta-sans-v12-latin-700italic.woff2') format('woff2');
}

/* Self-hosted Material Symbols Outlined.
   Static instance only: optical size 48, weight 400, fill 0, grade 0.
   Full icon set (no icon_names subset) so CMS editors can type any
   ligature name. About 344 KB. Do not preload this file in the layout;
   it would compete with the text fonts on every page. */
@font-face {
  font-display: block;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('https://25982807.fs1.hubspotusercontent-eu1.net/hubfs/25982807/raw_assets/32/public/@projects/cpio2026/theme/fonts/material-symbols-outlined-opsz48-wght400.woff2') format('woff2');
}

/* Ligature class from the Google Fonts stylesheet. Keep this name so
   markup matches fonts.google.com/icons. font-display: block hides the
   raw name (e.g. "home") until the glyph is ready. */
.material-symbols-outlined {
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

/*  Generic
    This is where reset, normalize & box-sizing styles go.
*/
/*! 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;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

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

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

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

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

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

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

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

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
*, *:before, *:after {
  box-sizing: border-box;
}

/*  Modules
    Styling for custom modules
*/


/*  Components
    Specific pieces of UI that are stylized. Typically used for global partial styling
*/
.s-background-color--primary-color,
.s-background-color--primary-color-hover:hover,
.s-background-color--primary-color-active.active,
.s-icon-background-color--primary-color svg {
  background-color: var(--primary-color);
}

.s-background-color--secondary-color,
.s-background-color--secondary-color-hover:hover,
.s-background-color--secondary-color-active.active,
.s-icon-background-color--secondary-color svg {
  background-color: var(--secondary-color);
}

.s-background-color--dark-color,
.s-background-color--dark-color-hover:hover,
.s-background-color--dark-color-active.active,
.s-icon-background-color--dark-color svg {
  background-color: var(--dark-color);
}

.s-background-color--light-color,
.s-background-color--light-color-hover:hover,
.s-background-color--light-color-active.active,
.s-icon-background-color--light-color svg {
  background-color: var(--light-color);
}

.s-background-color--white,
.s-background-color--white-hover:hover,
.s-background-color--white-active.active,
.s-icon-background-color--white svg {
  background-color: var(--white-color);
}

.s-background-color--accent-color,
.s-background-color--accent-color-hover:hover,
.s-background-color--accent-color-active.active,
.s-icon-background-color--accent-color svg {
  background-color: var(--accent-color);
}

.s-text-color--primary-color,
.s-text-color--primary-color-hover:hover,
.s-text-color--primary-color-hover:hover h1,
.s-text-color--primary-color-hover:hover h2,
.s-text-color--primary-color-hover:hover h3,
.s-text-color--primary-color-hover:hover h4,
.s-text-color--primary-color-hover:hover h5,
.s-text-color--primary-color-hover:hover h6,
.s-text-color--primary-color-hover:hover p,
.s-text-color--primary-color-hover:hover ul,
.s-text-color--primary-color-hover:hover li,
.s-text-color--primary-color-hover:hover a,
.s-text-color--primary-color-hover:hover i,
.s-text-color--primary-color-active.active,
.s-text-color--primary-color-active.active h1,
.s-text-color--primary-color-active.active h2,
.s-text-color--primary-color-active.active h3,
.s-text-color--primary-color-active.active h4,
.s-text-color--primary-color-active.active h5,
.s-text-color--primary-color-active.active h6,
.s-text-color--primary-color-active.active p,
.s-text-color--primary-color-active.active ul,
.s-text-color--primary-color-active.active li,
.s-text-color--primary-color-active.active a,
.s-text-color--primary-color-active.active i,
.s-text-color--primary-color h1,
.s-text-color--primary-color h2,
.s-text-color--primary-color h3,
.s-text-color--primary-color h4,
.s-text-color--primary-color h5,
.s-text-color--primary-color h6,
.s-text-color--primary-color p,
.s-text-color--primary-color ul,
.s-text-color--primary-color li,
.s-text-color--primary-color a,
.s-text-color--primary-color i,
h1.s-text-color--primary-color,
h2.s-text-color--primary-color,
h3.s-text-color--primary-color,
h4.s-text-color--primary-color,
h5.s-text-color--primary-color,
h6.s-text-color--primary-color,
p.s-text-color--primary-color,
ul.s-text-color--primary-color,
li.s-text-color--primary-color,
a.s-text-color--primary-color,
i.s-text-color--primary-color {
  color: var(--primary-color);
}

.s-text-color--primary-color svg path,
.s-text-color--primary-color-hover:hover svg path,
.s-text-color--primary-color-active.active svg path,
svg.s-text-color--primary-color {
  fill: var(--primary-color);
}

.s-text-color--secondary-color,
.s-text-color--secondary-color-hover:hover,
.s-text-color--secondary-color-hover:hover h1,
.s-text-color--secondary-color-hover:hover h2,
.s-text-color--secondary-color-hover:hover h3,
.s-text-color--secondary-color-hover:hover h4,
.s-text-color--secondary-color-hover:hover h5,
.s-text-color--secondary-color-hover:hover h6,
.s-text-color--secondary-color-hover:hover p,
.s-text-color--secondary-color-hover:hover ul,
.s-text-color--secondary-color-hover:hover li,
.s-text-color--secondary-color-hover:hover a,
.s-text-color--secondary-color-hover:hover i,
.s-text-color--secondary-color-active.active,
.s-text-color--secondary-color-active.active h1,
.s-text-color--secondary-color-active.active h2,
.s-text-color--secondary-color-active.active h3,
.s-text-color--secondary-color-active.active h4,
.s-text-color--secondary-color-active.active h5,
.s-text-color--secondary-color-active.active h6,
.s-text-color--secondary-color-active.active p,
.s-text-color--secondary-color-active.active ul,
.s-text-color--secondary-color-active.active li,
.s-text-color--secondary-color-active.active a,
.s-text-color--secondary-color-active.active i,
.s-text-color--secondary-color h1,
.s-text-color--secondary-color h2,
.s-text-color--secondary-color h3,
.s-text-color--secondary-color h4,
.s-text-color--secondary-color h5,
.s-text-color--secondary-color h6,
.s-text-color--secondary-color p,
.s-text-color--secondary-color ul,
.s-text-color--secondary-color li,
.s-text-color--secondary-color a,
.s-text-color--secondary-color i,
h1.s-text-color--secondary-color,
h2.s-text-color--secondary-color,
h3.s-text-color--secondary-color,
h4.s-text-color--secondary-color,
h5.s-text-color--secondary-color,
h6.s-text-color--secondary-color,
p.s-text-color--secondary-color,
ul.s-text-color--secondary-color,
li.s-text-color--secondary-color,
a.s-text-color--secondary-color,
i.s-text-color--secondary-color {
  color: var(--secondary-color);
}

.s-text-color--secondary-color svg path,
.s-text-color--secondary-color-hover:hover svg path,
.s-text-color--secondary-color-active.active svg path,
svg.s-text-color--secondary-color {
  fill: var(--secondary-color);
}

.s-text-color--dark-color,
.s-text-color--dark-color-hover:hover,
.s-text-color--dark-color-hover:hover h1,
.s-text-color--dark-color-hover:hover h2,
.s-text-color--dark-color-hover:hover h3,
.s-text-color--dark-color-hover:hover h4,
.s-text-color--dark-color-hover:hover h5,
.s-text-color--dark-color-hover:hover h6,
.s-text-color--dark-color-hover:hover p,
.s-text-color--dark-color-hover:hover ul,
.s-text-color--dark-color-hover:hover li,
.s-text-color--dark-color-hover:hover a,
.s-text-color--dark-color-hover:hover i,
.s-text-color--dark-color-active.active,
.s-text-color--dark-color-active.active h1,
.s-text-color--dark-color-active.active h2,
.s-text-color--dark-color-active.active h3,
.s-text-color--dark-color-active.active h4,
.s-text-color--dark-color-active.active h5,
.s-text-color--dark-color-active.active h6,
.s-text-color--dark-color-active.active p,
.s-text-color--dark-color-active.active ul,
.s-text-color--dark-color-active.active li,
.s-text-color--dark-color-active.active a,
.s-text-color--dark-color-active.active i,
.s-text-color--dark-color h1,
.s-text-color--dark-color h2,
.s-text-color--dark-color h3,
.s-text-color--dark-color h4,
.s-text-color--dark-color h5,
.s-text-color--dark-color h6,
.s-text-color--dark-color p,
.s-text-color--dark-color ul,
.s-text-color--dark-color li,
.s-text-color--dark-color a,
.s-text-color--dark-color i,
h1.s-text-color--dark-color,
h2.s-text-color--dark-color,
h3.s-text-color--dark-color,
h4.s-text-color--dark-color,
h5.s-text-color--dark-color,
h6.s-text-color--dark-color,
p.s-text-color--dark-color,
ul.s-text-color--dark-color,
li.s-text-color--dark-color,
a.s-text-color--dark-color,
i.s-text-color--dark-color {
  color: var(--dark-color);
}

.s-text-color--dark-color svg path,
.s-text-color--dark-color-hover:hover svg path,
.s-text-color--dark-color-active.active svg path,
svg.s-text-color--dark-color {
  fill: var(--dark-color);
}

.s-text-color--white,
.s-text-color--white-hover:hover,
.s-text-color--white-hover:hover h1,
.s-text-color--white-hover:hover h2,
.s-text-color--white-hover:hover h3,
.s-text-color--white-hover:hover h4,
.s-text-color--white-hover:hover h5,
.s-text-color--white-hover:hover h6,
.s-text-color--white-hover:hover p,
.s-text-color--white-hover:hover ul,
.s-text-color--white-hover:hover li,
.s-text-color--white-hover:hover a,
.s-text-color--white-hover:hover i,
.s-text-color--white-active.active,
.s-text-color--white-active.active h1,
.s-text-color--white-active.active h2,
.s-text-color--white-active.active h3,
.s-text-color--white-active.active h4,
.s-text-color--white-active.active h5,
.s-text-color--white-active.active h6,
.s-text-color--white-active.active p,
.s-text-color--white-active.active ul,
.s-text-color--white-active.active li,
.s-text-color--white-active.active a,
.s-text-color--white-active.active i,
.s-text-color--white h1,
.s-text-color--white h2,
.s-text-color--white h3,
.s-text-color--white h4,
.s-text-color--white h5,
.s-text-color--white h6,
.s-text-color--white p,
.s-text-color--white ul,
.s-text-color--white li,
.s-text-color--white a:not(.c-button),
.s-text-color--white i,
.s-text-color--white label,
.s-text-color--white .hs-form-required,
h1.s-text-color--white,
h2.s-text-color--white,
h3.s-text-color--white,
h4.s-text-color--white,
h5.s-text-color--white,
h6.s-text-color--white,
p.s-text-color--white,
ul.s-text-color--white,
li.s-text-color--white,
a.s-text-color--white:not(.c-button),
i.s-text-color--white {
  color: var(--white-color);
}

.s-text-color--white svg path,
.s-text-color--white-hover:hover svg path,
.s-text-color--white-active.active svg path,
svg.s-text-color--white {
  fill: var(--white-color);
}

.s-section-drop-shadow {
  box-shadow: var(--drop-shadow);
}
/* Menu and simple menu */

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

/* Horizontal menu — mobile-first: stack by default, row from tablet up */
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

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

@media (min-width: 768px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal > ul {
    flex-direction: row;
  }
}

/* Vertical menu */

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

/* Flyouts */

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

@media (min-width: 768px) {
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
    display: inline-flex;
  }
}

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

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

/* Mobile-first: flyouts stay in-flow until tablet */
.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;
}

@media (min-width: 768px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
    left: -9999px;
    opacity: 0;
    position: absolute;
  }

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

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

span.hs_cos_wrapper_type_linked_image {
  display: flex;
}

.widget-type-linked_image {
  overflow: hidden;
}

/* In-page editor UI */

.in-editor-ui-label {
  background: #fff;
  border: 1px dotted blue;
  color: var(--primary-color) !important;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 300;
  padding: 10px 15px;
}

/* Tools/Utility classes */

.l-negative-scroll-position,
a[data-hs-anchor="true"] {
  display: block;
  height: 1px;
  position: relative;
  top: -200px;
  width: 1px;
  z-index: -9999;
}
.l-footer {
  background-color: var(--footer-background-color);
  border-radius: 18px 18px 0 0;
  color: var(--white-color);
  padding-top: 60px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.l-footer h2, 
.l-footer h3,
.l-footer h4,
.l-footer h5,
.l-footer h6 {
  color: var(--white-color);
}

/* Body copy and nav/legal links. Buttons keep their own font-size. */
.l-footer p,
.l-footer a:not(.c-button) {
  font-size: 14px;
}

.l-footer ul {
  gap: 10px;
}

.l-footer__inner {
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: var(--container-width);
}

.l-footer__top-section .l-footer__inner,
.l-footer__main-section .l-footer__inner {
  border-bottom: 1px solid var(--white-color);
}

.l-footer__top-section .l-footer__inner {
  gap: 32px;
  padding-bottom: 10px;
}

.l-footer__top-section-left,
.l-footer__top-section-right {
  width: 100%;
}

.l-footer__top-section-left {
  margin-bottom: 0;
}

/*
  Top-section headings on mobile only (below 768px).
  From tablet up, these are reset to the theme heading styles
  so this override does not carry into larger breakpoints.
*/
.l-footer__top-section-left h2,
.l-footer__top-section-right h4 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1em;
}

.l-footer__main-section {
  position: relative;
}

.l-footer__main-section .l-footer__inner {
  gap: 40px;
  padding-bottom: 30px;
  padding-top: 30px;
}

/*
  Main-section columns are full width on mobile (stacked via flex utilities).
  Widths at 992px+ are set in the media query below.
*/
.l-footer__main-section__col-1,
.l-footer__main-section__col-2 {
  width: 100%;
}

/* Vertical rhythm between logos, heading, button, and intro copy. */
.l-footer__main-section__col-1 {
  gap: 24px;
}

.l-footer__main-section__images {
  gap: 20px;
}

/*
  HubSpot's linked_image module writes an inline width on the <img>.
  width: auto !important is required to override that so height can
  drive the size and the image keeps its aspect ratio.
*/
.l-footer__main-section__image img {
  border-radius: 0;
  height: auto;
  margin-bottom: 0;
  max-height: 48px;
  max-width: 180px;
  width: auto !important;
}

/*
  Five nav columns. CSS vars drive l-flex__child--wrap-fixed-columns:
  2 cols on mobile, 1 col from 768px, 5 equal cols from 992px.
  gap must match the var.
*/
.l-footer__main-section__col-2 {
  --l-flex-wrap-cols-mobile: 2;
  --l-flex-wrap-cols-tablet: 2;
  --l-flex-wrap-cols-desktop: 5;
  --l-flex-wrap-col-gap: 24px;
  gap: var(--l-flex-wrap-col-gap);
}

/* Vertical menus use item margins for spacing; keep list gap at 0 on mobile. */
.l-footer ul:not(.hs-menu-children-wrapper) {
  gap: 0;
  margin-top: 15px;
}

.l-footer ul.hs-menu-children-wrapper {
  margin-top: 10px;
}

.l-footer li {
  margin-bottom: 0;
  padding-left: 0;
  font-size: 14px;
}

.l-footer ul li a {
  max-width: 400px;
  color: var(--white-color);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.l-footer ul li a:hover,
.l-footer ul li a:focus {
  color: var(--accent-color);
}

.l-footer .hs-menu-item.hs-menu-depth-1:not(:last-child) {
  margin-bottom: 8px;
}

.l-footer .hs-menu-item.hs-menu-depth-2.hs-item-has-children>a {
  font-weight: 700;
}

.l-footer .hs-menu-item.hs-menu-depth-2.hs-item-has-children ul.hs-menu-children-wrapper {
  padding-left: 10px;
}

/*
  Vertical footer nav links — min 44px tap height (mobile-first).
  Applies to the four menu columns in the main section.
*/
.l-footer__main-section-navigation ul li a {
  align-items: center;
  display: inline-flex;
  padding-bottom: 5px;
  padding-top: 5px;
}

.l-footer__main-section-navigation-column a {
  color: var(--white-color);
  text-decoration: none;
}

.l-footer__main-section-navigation-column a:hover,
.l-footer__main-section-navigation-column a:focus {
  color: var(--accent-color);
}

.l-footer__bottom-bar {
}

.l-footer__bottom-bar > .l-footer__inner {
  padding-top: 24px;
}

.l-footer__bottom-bar a {
  color: var(--white-color) !important;
}

.l-footer__bottom-bar a:hover,
.l-footer__bottom-bar a:focus {
  color: var(--accent-color) !important;
}

/*
  Bottom-bar horizontal menu — ensure sibling items do not abut.
  More specific than `.l-footer ul:not(.hs-menu-children-wrapper) { gap: 0 }`.
*/
.l-footer__bottom-bar .hs-menu-wrapper ul,
.l-footer__bottom-bar ul[role="menu"] {
  column-gap: 16px;
  gap: 12px 16px;
  margin-top: 0;
  row-gap: 12px;
}

.l-footer__bottom-bar .hs-menu-wrapper .hs-menu-item {
  margin-right: 0;
}

.c-footer__bottom-bar-legal-text {
  margin-top: 32px;
}

.l-footer__main-section__subscribe .c-button {
  color: var(--light-color);
  font-size: 14px;
}

.l-footer__main-section__images {
  align-items: flex-start !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .l-footer__main-section__images {
    align-items: flex-end;
  }

 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .l-footer {
    padding-left: 40px;
    padding-right: 40px;
  }

  .l-footer__main-section .l-footer__inner {
    padding-bottom: 60px;
    padding-top: 60px;
  }

  .l-footer__top-section-left {
    margin-bottom: 40px;
    width: 45%;
  }

  .l-footer__top-section-right {
    width: 40%;
  }

  .l-footer__main-section-navigation ul li a {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  /* Hand top-section headings back to the theme's mobile/tablet scale. */
  .l-footer__top-section-left h2 {
    font-size: calc(var(--heading-2-font-size) * .65);
    font-weight: var(--heading-2-font-weight);
    line-height: var(--heading-2-line-height);
  }

  .l-footer__top-section-right h4 {
    font-size: calc(var(--heading-4-font-size) * .75);
    font-weight: var(--heading-4-font-weight);
    line-height: var(--heading-4-line-height);
  }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
  .l-footer__inner {
    flex-direction: row;
  }

  .l-footer__top-section .l-footer__inner {
    padding-bottom: 60px;
  }

  .l-footer__top-section-left {
    margin-bottom: 0;
    width: 45%;
  }

  .l-footer__top-section-right {
    width: 30%;
  }

  /*
    Two main columns: ~30% branding / ~70% nav.
    Each width subtracts half of the 40px parent gap so they fit on one row.
  */
  .l-footer__main-section__col-1 {
    width: calc(30% - 20px);
  }

  .l-footer__main-section__col-2 {
    width: calc(70% - 20px);
  }

  /* Match theme heading sizes from 992px (see _typography.hubl.css). */
  .l-footer__top-section-left h2 {
    font-size: 35px;
  }

  .l-footer__top-section-right h4 {
    font-size: var(--heading-4-font-size);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 1200px) {
  .l-footer {
    padding-bottom: 100px;
    padding-top: 100px;
  }

  /* Match theme h2 size from 1200px (see _typography.hubl.css). */
  .l-footer__top-section-left h2 {
    font-size: var(--heading-2-font-size);
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .l-footer {
    padding-left: unset;
    padding-right: unset;
  }
}

@media (min-width: 1600px) {
  .l-footer {
    padding-top: 200px;
  }
}
body.js-no-scroll {
  overflow: hidden;
}

/*
  HEADER GEOMETRY

  The header is a flat, full width white bar (Figma design). It used to be a
  rounded "pill" floating below a transparent gap, so .l-header reserved more
  height than the pill actually used. A flat bar has no gap above it and is
  exactly as tall as its content, so these values are redefined here.

  They are set on :root, not on .l-header, because other stylesheets read them
  to work out how far to push content clear of the fixed header:
    - _header.hubl.css   first drag and drop section on a page
    - system.hubl.css    system template offsets
    - _layout.hubl.css   full height section min-height

  Redefining them in one place keeps all of those in step. These ideally belong
  in tools/_variables.hubl.css alongside the other header values.
*/
:root {
  /* No gap above the bar any more. */
  --header-padding-top-mobile: 0px;
  --header-padding-top-tablet: 0px;
  --header-padding-top-desktop: 0px;

  /*
    Bar height = inner padding top + bottom (25px each) + tallest child.
    The tallest child is the 44px burger button on mobile and tablet, and the
    ~42px CTA button on desktop, so one value covers every breakpoint.
  */
  --header-height-mobile: 94px;
  --header-height-tablet: 94px;
  --header-height-desktop: 94px;

  /* Scrolled: inner padding drops 25px to 15px, so the bar loses 20px. */
  --header-height-mobile-scrolled: 74px;
  --header-height-tablet-scrolled: 74px;

  /*
    Wider than --container-width. On :root so a drag-and-drop row can use
    the same cap as .l-header__inner (Resources Hero).
  */
  --header-container-width: 1548px;
}

/* Exclude HubSpot embed rows (classes like embed-410652075196-row-0-...) */
.l-header-style--fixed #l-main-content .dnd-section:first-of-type:not([class*="embed-"]) {
  padding-top: calc(var(--header-height-mobile) + var(--hero-section-padding-top-mobile));
}

/*
  The white background now sits on .l-header so the bar spans the full
  viewport. width is 100% rather than 100vw: on a fixed element 100% resolves
  against the viewport excluding the scrollbar, so the bar no longer overflows
  sideways.
*/
.l-header {
  background-color: var(--header-background-color);
  height: var(--header-height-mobile);
  padding: 0 20px;
  transition: height .3s ease;
  margin: 0 auto;
  width: 100%;
  z-index: 2;

  /*
    Header tuning values, kept together so the sizing taken from the Figma
    design can be adjusted in one place. Scoped to .l-header rather than :root
    so they stay local to the header component. Each breakpoint below
    overrides these rather than repeating the rules that use them.
  */
  /*
    Logo sizes match the Figma design (site logo 40px tall, partner logo 26px)
    and are the same at every breakpoint. They only varied before because the
    stretched logo was being capped by width; with the aspect ratio fixed the
    site logo is only ~63px wide, so it fits everywhere.
  */
  --header-logo-height: 40px;
  --header-partner-logo-height: 26px;
  --header-logo-gap: 20px;
  --header-nav-font-size: 16px;
  --header-nav-gap: 15px;
  --header-buttons-gap: 20px;
  /*
    --header-container-width is set on :root. It is wider than
    --container-width so the nav and CTAs have the Figma gap.
  */
  /* Space between the logo, nav and CTA groups. */
  --header-inner-gap: 40px;
}

/* The bar is already white, so opening the mobile menu only needs to stop the
   height transition from animating. */
.l-header:has(.js-header-mobile-menu--active) {
  transition: none;
}

.l-header--fixed {
  position: fixed;
}

/*
  .l-header__inner is now purely the centred content container — the pill's
  background, 170px radius and drop shadow have all been removed.

  height: 100% lets the existing l-flex--align-items-center class centre the
  logo, menu and CTAs within the bar, so the bar height comes from the
  variables above rather than from padding here.
*/
.l-header__inner {
  height: 100%;
  margin: 0 auto;
  width: 100%;
  max-width: var(--header-container-width);
  gap: var(--header-inner-gap);
}

/* LOGOS */

/* Site logo and partner logo sit side by side, vertically centred. */
.c-header__logos {
  gap: var(--header-logo-gap);
}

.c-header__logo a {
  display: flex;
}

/*
  Sized by height so the logo keeps its own aspect ratio and lines up with the
  partner logo next to it.

  width: auto is !important because HubSpot's logo module writes the image's
  full pixel width into an inline style (e.g. style="height:auto;width:626px").
  An inline style beats any stylesheet rule, so width stayed fixed while
  max-height squashed the height — stretching the logo to the full 200px width.
  !important is the only way to override an inline style.
*/
.c-header__logo img {
  height: auto;
  max-height: var(--header-logo-height);
  width: auto !important;
  max-width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

/*
  Optional partner logo (e.g. Sage Business Partner). Not rendered at all when
  the field is empty — see header.hubl.html.

  Hidden on the narrowest phones: the site logo and the burger menu already fill
  the header pill at that width, and adding the partner logo pushed the burger
  off screen. It is shown from 576px up.
*/
.c-header__partner-logo {
  display: none;
  height: var(--header-partner-logo-height);
  width: auto;
  border-radius: 0;
  margin-bottom: 0;
}

.c-header__subtitle {
  font-size:10px;
  margin-bottom: 0;
}

/* MENU */
.c-header__menu {
  display: none;
}

/*
  Menu selectors target .hs-menu-wrapper rather than ul[role="menu"]. HubSpot's
  menu markup does not always include the role attribute (the local dev server
  preview omits it), which left the nav links unstyled.
*/
/*
  Links pack to the left so the nav starts alongside the logos, rather than
  being spread across the nav block. Paired with flex: 1 on .c-header__menu at
  the desktop breakpoint, this pushes all the spare width to the right of the
  links, which is the gap before the CTAs in the design.
*/
.c-header__menu .hs-menu-wrapper > ul {
  justify-content: flex-start;
  gap: var(--header-nav-gap);
}

/* Design spec: Plus Jakarta Sans SemiBold, 16px, 1.5 line height, navy. */
.c-header__menu .hs-menu-wrapper a {
  color: var(--primary-color);
  font-size: var(--header-nav-font-size);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.c-header__menu .hs-menu-wrapper a:hover,
.c-header__menu .hs-menu-wrapper a:focus {
  color: var(--accent-color);
}

.c-header__menu li {
  margin-bottom: 0;
}

.c-header__menu li.hs-menu-depth-1.hs-item-has-children > a {
  display: inline-block;
}

/*
  Dropdown chevron. Drawn with an SVG mask rather than a background-image so it
  inherits the link colour via currentColor. The previous background-image was
  filled white, which made it invisible against the white header.
*/
.c-header__menu li.hs-menu-depth-1.hs-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 5px;
  margin-left: 8px;
  vertical-align: middle;
  background-color: currentColor;
  transition: transform 200ms ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M3.75 4.625L0 0.875L0.875 0L3.75 2.875L6.625 0L7.5 0.875L3.75 4.625Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M3.75 4.625L0 0.875L0.875 0L3.75 2.875L6.625 0L7.5 0.875L3.75 4.625Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Flip the chevron while the dropdown is open. */
.c-header__menu li.hs-menu-depth-1.hs-item-has-children:hover > a::after,
.c-header__menu li.hs-menu-depth-1.hs-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

.c-header__menu li.hs-item-has-children {
  position: relative;
}

.c-header__menu li.hs-menu-depth-1.hs-item-has-children::after,
.c-header__menu li.hs-menu-depth-2.hs-item-has-children::after {
  content: '';
  position: absolute;
  background-color: transparent;
}

.c-header__menu li.hs-menu-depth-1.hs-item-has-children::after {
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.c-header__menu li.hs-menu-depth-2.hs-item-has-children::after {
  width: 0;
  height: 0;
  top: auto;
  right: auto;
  transform: none;
}

/*
  TOP LEVEL DROPDOWNS

  These rules intentionally do not rely on the .flyouts class that the HubSpot
  menu module adds, because that class is not always present (the local dev
  server preview renders the menu without it). Including .hs-menu-wrapper in the
  selectors keeps them a step more specific than the shared flyout CSS in
  _default-modules.hubl.css, so the header wins wherever the two overlap.

  The desktop menu is hidden below 1200px, so the dropdown only needs to become
  a floating panel from tablet width up.
*/
@media (min-width: 768px) {
  .c-header__menu .hs-menu-wrapper .hs-menu-children-wrapper {
    background-color: var(--header-background-color);
    border-radius: 10px;
    /*
      Not --drop-shadow: that shadow is very large and soft, which left the
      white dropdown with no visible edge against a white page. This is a
      tighter shadow using the brand navy at low opacity.
    */
    box-shadow: 0 8px 24px rgba(1, 15, 90, 0.15);
    flex-direction: column;
    gap: 4px;
    left: 0;
    min-width: 220px;
    opacity: 0;
    padding: 16px;
    position: absolute;
    top: calc(100% + 12px);
    visibility: hidden;
  }

  /* :focus-within keeps the dropdown usable for keyboard navigation. */
  .c-header__menu .hs-menu-wrapper li.hs-menu-depth-1.hs-item-has-children:hover > .hs-menu-children-wrapper,
  .c-header__menu .hs-menu-wrapper li.hs-menu-depth-1.hs-item-has-children:focus-within > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    top: calc(100% + 12px);
    visibility: visible;
  }

  /* Any deeper levels open to the side rather than stacking on top. */
  .c-header__menu .hs-menu-wrapper li.hs-menu-depth-2.hs-item-has-children > .hs-menu-children-wrapper {
    left: calc(100% + 18px);
    top: -10px;
    z-index: 2;
  }

  .c-header__menu .hs-menu-wrapper li.hs-menu-depth-2.hs-item-has-children:hover > .hs-menu-children-wrapper,
  .c-header__menu .hs-menu-wrapper li.hs-menu-depth-2.hs-item-has-children:focus-within > .hs-menu-children-wrapper {
    left: calc(100% + 18px);
    top: -10px;
  }
}

/* Dropdown links are lighter than the top level items. */
.c-header__menu .hs-menu-children-wrapper a {
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 6px;
}

.c-header__menu .hs-menu-children-wrapper a:hover,
.c-header__menu .hs-menu-children-wrapper a:focus {
  background-color: var(--light-color);
}

/*
  BUTTONS

  The header CTAs come from the shared Buttons module, so they already use the
  theme .c-button styles. These rules only adjust size and spacing to match the
  header design — the colours still come from the chosen Button Style.
*/
.c-header__buttons {
  display: none;
  height: 100%;
}

/* The module wrapper is full width by default, which would stretch the header. */
.c-header__buttons .l-button-group {
  align-items: center;
  gap: var(--header-buttons-gap);
  padding-bottom: 0;
  padding-top: 0;
  width: auto;
}

/* Design spec: 16px SemiBold, 8px/16px padding, pill radius. */
.c-header__buttons .c-button {
  font-size: var(--header-nav-font-size);
  padding: 8px 16px;
  white-space: nowrap;
}

/* Design spec: 18px arrow, smaller than the 24px used elsewhere. */
.c-header__buttons .c-button::after {
  width: 18px;
  height: 18px;
  margin-left: 10px;
}

/*
  Link style CTAs (e.g. "Customer Support Hub") read as plain navy text in the
  header, so drop the underline. Arrow V2 is the exception: that diagonal
  arrow is part of the support link design, so it is shown again below.
*/
.c-header__buttons .c-button__link,
.c-header__mobile-menu-buttons .c-button__link {
  color: var(--primary-color);
  font-size: var(--header-nav-font-size);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* The desktop support link is regular weight, lighter than the 600 used for
   the nav links next to it. The burger menu version keeps 600 above. */
.c-header__buttons .c-button__link {
  font-weight: 400;
}

.c-header__buttons .c-button__link::after,
.c-header__mobile-menu-buttons .c-button__link::after {
  display: none;
}

/*
  Arrow V2 is the diagonal arrow on "Customer Support Hub".
  The rule above hides every link icon. This puts that one back,
  at the Figma size rather than the 18px used by the other header arrow.
*/
.c-header__buttons .c-button__link.c-button__icon--arrow-v2::after,
.c-header__mobile-menu-buttons .c-button__link.c-button__icon--arrow-v2::after {
  display: inline-block;
  height: 19.284px;
  width: 19.284px;
}

.c-header__buttons .c-button__link:hover,
.c-header__buttons .c-button__link:focus,
.c-header__mobile-menu-buttons .c-button__link:hover,
.c-header__mobile-menu-buttons .c-button__link:focus {
  color: var(--accent-color);
}

/* BURGER MENU BUTTON — 44×44 minimum tap target (WCAG / mobile) */
.c-header__burger-menu {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* (44 - 24 icon) / 2 = 10px padding keeps the SVG centred */
  padding: 10px;
  color: var(--primary-color);
  position: relative;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  -webkit-appearance: unset;
}

.c-header__burger-menu:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.c-header__burger-menu.js-header-mobile-menu--active {
  display: flex;
}

.c-header__burger-menu svg {
  width: 24px;
  height: 24px;
}

/* MOBILE MENU ICONS - Both positioned absolutely for smooth transition */
.c-header-mobile-menu__icon--open,
.c-header-mobile-menu__icon--close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease, transform 300ms ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-header-mobile-menu__icon--open {
  opacity: 1;
  visibility: visible;
}

.c-header-mobile-menu__icon--close {
  opacity: 0;
  visibility: hidden;
}

.js-header-mobile-menu--active .c-header-mobile-menu__icon--open {
  opacity: 0;
  visibility: hidden;
}

.js-header-mobile-menu--active .c-header-mobile-menu__icon--close {
  opacity: 1;
  visibility: visible;
}

/* MENU ICONS */
button.c-header-mobile-menu__icon--open,
button.c-header-mobile-menu__icon--close,
button.c-header-search__icon,
button.c-site-search-modal__close {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  -webkit-appearance: unset;
}

/* MOBILE MENU OVERLAY */
.c-header__mobile-menu-overlay {
  background-color: transparent;
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 998;
}

.c-header__mobile-menu-overlay.js-header-mobile-menu--active {
  display: block;
}

/* MOBILE MENU CONTAINER */
.c-header__mobile-menu {
  /*
    Burger menu tuning values, grouped so type size and density can be adjusted
    in one place.

    Note the theme sets the root font size to 20px, so 1rem here is 20px, not
    the usual 16px.
  */
  --mobile-menu-font-size: 1rem;
  --mobile-menu-item-gap: 6px;
  /*
    Sub-levels are smaller and tighter than the top level to group them
    visually. 16px matches the desktop nav size rather than being a rem value,
    because 1rem is 20px under this theme's root font size.
  */
  --mobile-menu-sub-font-size: 16px;
  --mobile-menu-sub-item-gap: 2px;
  --mobile-menu-sub-indent: 16px;
  /* Separates the menu list from the CTA block below it. */
  --mobile-menu-cta-gap: 24px;

  background-color: var(--header-background-color);
  box-shadow: var(--drop-shadow);
  bottom: 0;
  display: none;
  left: 0;
  overflow-y: auto;
  position: fixed;
  /* Sits flush under the bar. The old -10px tucked it behind the pill's
     rounded bottom edge, which the flat bar no longer has. */
  top: var(--header-height-mobile);
  transition: top 0.5s ease;
  width: 100%;
  z-index: 999;
}

.c-header__mobile-menu.js-header-mobile-menu--active {
  display: block;
}

/*
  The inner panel has exactly two children, the menu list and the button block,
  so the gap here is the space between the menu and the CTA.
*/
.c-header__mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: var(--mobile-menu-cta-gap);
  min-height: 100%;
  padding: 20px;
}

.c-header__mobile-menu-content {
  width: 100%;
}

/*
  MOBILE MENU BUTTONS

  Same shared Buttons module as the desktop header, stacked full width so both
  the support link and the CTA are easy to tap.
*/
.c-header__mobile-menu-buttons {
  gap: 15px;
  width: 100%;
}

.c-header__mobile-menu-buttons .l-button-group {
  align-items: stretch;
  flex-direction: column;
  gap: 15px;
  padding-top: 0;
  width: 100%;
}

.c-header__mobile-menu-buttons .c-button {
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* MOBILE MENU LIST */
.c-header-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-header-mobile-menu__list summary,
.c-header-mobile-menu__list a {
  font-size: var(--mobile-menu-font-size);
}

/*
  MOBILE MENU LIST ITEMS

  Clears the theme's global list spacing. _typography.hubl.css gives every li a
  .5em bottom margin and a 1rem left margin via a selector with three :not()
  classes, which outranks a class-based override here — hence !important, which
  this rule already used.

  Now applies to every li, not just the top level: nested sub-items were still
  picking up that 9px bottom margin and 20px indent, which is what made the
  sub-item spacing so loose. Indentation is handled once per level by the
  accordion panel's left padding instead.
*/
.c-header-mobile-menu__list li {
  margin: 0 !important;
  padding-left: 0;
}


/* MOBILE MENU LINKS */
.c-header-mobile-menu__link {
  color: var(--primary-color);
  display: block;
  font-weight: 500;
  /* Even padding top and bottom keeps rows ~44px, the minimum tap target. */
  padding: var(--mobile-menu-item-gap) 0;
  text-decoration: none;
  width: 100%;
}

.c-header-mobile-menu__link:hover,
.c-header-mobile-menu__link:focus {
  color: var(--secondary-color);
  outline: none;
}

/* MOBILE MENU ACCORDION */

.c-header-mobile-menu__accordion-summary {
  cursor: pointer;
  /* Space between the label and the chevron. */
  gap: 12px;
  list-style: none;
  padding: var(--mobile-menu-item-gap) 0;
}

.c-header-mobile-menu__accordion-summary::-webkit-details-marker {
  display: none;
}

.c-header-mobile-menu__accordion-link {
  color: var(--primary-color);
  text-decoration: none;
  flex: 1;
}

.c-header-mobile-menu__accordion-link:hover,
.c-header-mobile-menu__accordion-link:focus {
  color: var(--secondary-color);
  outline: none;
}

.c-header-mobile-menu__accordion-icon {
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.c-header-mobile-menu__accordion-icon svg {
  width: 18px;
  height: 18px;
}

.c-header-mobile-menu__accordion-item[open] .c-header-mobile-menu__accordion-icon {
  transform: rotate(90deg);
  color: var(--secondary-color);
}

/*
  Left padding is the only indent for a sub-level, applied once per nesting.

  Re-pointing the font size and gap variables at their sub-level values here
  means every nested summary, link and panel inside picks them up
  automatically, so these two declarations cover all levels of nesting without
  extra descendant selectors.
*/
.c-header-mobile-menu__accordion-panel {
  --mobile-menu-font-size: var(--mobile-menu-sub-font-size);
  --mobile-menu-item-gap: var(--mobile-menu-sub-item-gap);
  padding: 0 0 var(--mobile-menu-item-gap) var(--mobile-menu-sub-indent);
}

.c-header-mobile-menu__accordion-panel ul[role="menu"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-header-mobile-menu__accordion-panel ul[role="menu"] li {
  padding: 0;
}

.c-header-mobile-menu__accordion-panel ul[role="menu"] a {
  color: var(--primary-color);
  display: block;
  padding: var(--mobile-menu-item-gap) 0;
  text-decoration: none;
}

.c-header-mobile-menu__accordion-panel ul[role="menu"] a:hover,
.c-header-mobile-menu__accordion-panel ul[role="menu"] a:focus {
  color: var(--secondary-color);
  outline: none;
}

/* SITE SEARCH */
.c-site-search-modal {
  background: rgba(255,255,255,.95);
  bottom: 0;
  display: none;
  height: 100vh;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 999;
}

.js-site-search-modal--active {
  display: block;
}

.c-site-search-modal__inner {
  margin: 2em auto;
  max-width: var(--container-width);
  position: relative;
  width: 600px;
}

.c-site-search-modal__close {
  position: absolute;
  right: 0;
  top: 0;
}

.c-site-search-modal__search-form {
  padding-top: 1rem;
}

.c-site-search-modal__search-form .hs-search-field__input,
.c-site-search-modal__search-form .hs-search-field__button {
  padding: .5rem;
}

.c-site-search-modal__search-form .hs-search-field__bar button {
  font-size: 1rem;
  line-height: 1;
}

.c-site-search-modal__search-form .hs-search-field__bar button svg {
  fill: white;
  height: 1rem;
}

.c-site-search-modal__search-form .hs-search-field__suggestions .results-for,
.c-site-search-modal__search-form .hs-search-field__suggestions a {
  padding: .25rem .5rem
}

.c-site-search-modal__search-form .hs-search-field--open .hs-search-field__suggestions,
.c-site-search-modal__search-form .inpage-editor-active-field .hs-search-field__suggestions {
  border: none;
}

.c-site-search-modal__search-form .hs-search-field__suggestions a:focus,
.c-site-search-modal__search-form .hs-search-field__suggestions a:hover {
  background-color: var(--secondary-color);
  color: var(--white-color);
}

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

.l-header__skip:hover,
.l-header__skip:focus,
.l-header__skip:active {
  height: auto;
  left: 0.5rem;
  overflow: visible;
  padding: 0.25rem 0.5rem;
  top: 0.5rem;
  width: auto;
}

/*
  Scrolled header — the bar shrinks after 150px scroll (see js/header-scroll.js).
  Now driven by height rather than padding, since the flat bar's height comes
  from the variables at the top of this file.

  The bar has no shadow at rest, per the design. A subtle one is added when
  scrolled so a white header still separates from white page content.
*/
.l-header.l-header--scrolled {
  height: var(--header-height-mobile-scrolled);
  box-shadow: 0 2px 12px rgba(1, 15, 90, 0.10);
}

.l-header.l-header--scrolled .c-header__mobile-menu {
  bottom: 0;
  top: var(--header-height-mobile-scrolled);
}

.l-header.l-header--scrolled .c-header__mobile-menu-inner {
  min-height: 100%;
}


/*********************
  RESPONSIVE STYLES
*********************/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Enough room alongside the burger menu from this width up. */
  .c-header__partner-logo {
    display: block;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /*
    This rule was missing the hero top padding term that the mobile rule above
    and system.hubl.css both use, so the first section cleared the bar by 0px.
  */
  .l-header-style--fixed #l-main-content .dnd-section:first-of-type:not([class*="embed-"]) {
    padding-top: calc(var(--header-height-tablet) + var(--hero-section-padding-top-tablet)) !important;
  }

  .l-header {
    height: var(--header-height-tablet);
    padding: 0 20px;
  }

  /* Ensure desktop menu is hidden on tablet */
  .c-header__menu {
    display: none;
  }

  .c-header__buttons {
    display: none;
  }

  .c-header__mobile-menu {
    bottom: 0;
    top: var(--header-height-tablet);
  }

  .c-header__mobile-menu-inner {
    min-height: 100%;
  }

  .l-header.l-header--scrolled .c-header__mobile-menu {
    bottom: 0;
    top: var(--header-height-tablet-scrolled);
  }

  .l-header.l-header--scrolled .c-header__mobile-menu-inner {
    min-height: 100%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Ensure mobile menu styles still apply up to 1200px */
  .c-header__mobile-menu {
    bottom: 0;
    top: var(--header-height-tablet);
  }

  .c-header__mobile-menu-inner {
    min-height: 100%;
  }

  .l-header.l-header--scrolled .c-header__mobile-menu {
    bottom: 0;
    top: var(--header-height-tablet-scrolled);
  }

  .l-header.l-header--scrolled .c-header__mobile-menu-inner {
    min-height: 100%;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /*
    Back to the calculated offset. The hard-coded 245px was tuned for the old
    taller pill header, and was dead code anyway: the tablet rule above carries
    !important, so it won at every width. Marked !important here too so the
    desktop value actually applies (same specificity, later in the file).
  */
  .l-header-style--fixed #l-main-content .dnd-section:first-of-type:not([class*="embed-"]) {
    padding-top: calc(var(--header-height-desktop) + var(--hero-section-padding-top-desktop)) !important;
  }

  .l-header-style--fixed #l-main-content .dnd-section:has(.c-half-width-image--no-top-bottom-padding):first-of-type:not([class*="embed-"]) {
    padding-top: 0 !important;
  }

  /* Full desktop sizing taken from the Figma header design. */
  .l-header {
    height: var(--header-height-desktop);
    padding: 0 20px;
    --header-logo-gap: 26px;
    --header-nav-gap: 24px;
    --header-buttons-gap: 24px;
  }

  .c-header__subtitle {
    font-size:10px;
    margin-bottom: 0;
  }

  /* flex: 1 takes up the width left over by the logos and CTAs, so the spare
     space collects between the nav links and the CTAs. */
  .c-header__menu {
    display: flex;
    flex: 1;
  }

  /*
    Search sits between the two CTA modules, so the gap lives on this
    row rather than inside a single button group. Module wrappers are
    full width by default and would stretch the row.
  */
  .c-header__buttons {
    display: flex;
    gap: var(--header-buttons-gap);
  }

  .c-header__buttons > * {
    width: auto;
  }

  /* Hide burger menu on desktop */
  .c-header__burger-menu {
    display: none !important;
  }

  /* Hide mobile menu on desktop */
  .c-header__mobile-menu {
    display: none !important;
  }

  /* Hide mobile menu buttons on desktop */
  .c-header__mobile-menu-buttons {
    display: none !important;
  }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  /* Height and padding are unchanged from the 1200px block, so only the
     spacing variables need overriding here. */
  .l-header {
    /* More room at this width, so the nav links can breathe as per the design. */
    --header-nav-gap: 40px;
    --header-buttons-gap: 32px;
  }
}

/*  Elements
    Base HMTL elements are styled in this section (<body<, <h1>, <a>, <p>, <button> etc.)
*/
.l-button-group {
  gap: .5rem;
  padding-bottom: 1em;
  padding-top: 1em;
  width: 100%;
}

/*
  Layer 1: branded default.

  Targets:
  - generic <button> (HubSpot / Splide / editor chrome excluded)
  - <a> or <button> with .c-button
  - HubSpot form submits (.hsfc-Button)

  :where() keeps the exclusion list at zero specificity so colour
  classes in layer 2 can override without !important.

  Keep this exclusion list identical on every generic-button rule:
  - [class*="splide"]              Splide carousel controls
  - [class*="hs-"]                 HubSpot chrome (overlay, image grid, sprocket, tools)
  - [class*="ToolbarIconButton"]   HubSpot editor toolbar
  - [class*="PrivateButton"]       HubSpot editor private UI
  - .hsfc-Button                   HubSpot forms (does not match [class*="hs-"];
                                   forms still get CTA look via the explicit .hsfc-Button rule)
*/

button:where(:not([class*="splide"]):not([class*="hs-"]):not([class*="ToolbarIconButton"]):not([class*="PrivateButton"]):not(.hsfc-Button)),
.c-button,
.hsfc-Button {
  align-items: center;
  background-color: var(--button-background-color);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  color: var(--button-font-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  max-width: var(--button-max-width);
  padding: 8px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.35s ease;
  white-space: normal;
  width: auto;
}

button:where(:not([class*="splide"]):not([class*="hs-"]):not([class*="ToolbarIconButton"]):not([class*="PrivateButton"]):not(.hsfc-Button)):hover,
.c-button:hover {
  transform: scale(1.05);
}

/* Keyboard focus only. Matches .c-blog-card:focus-visible. */
button:where(:not([class*="splide"]):not([class*="hs-"]):not([class*="ToolbarIconButton"]):not([class*="PrivateButton"]):not(.hsfc-Button)):focus-visible,
.c-button:focus-visible,
.hsfc-Button:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Grey fill with body text colour so disabled labels stay readable (WCAG AA). */
button:disabled,
.c-button:disabled,
.hsfc-Button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: var(--font-color);
  cursor: not-allowed;
  transform: none;
}

button.hs-overlay__close--top {
  cursor: pointer;
}

/*
  Layer 2: colour variants.

  These classes override the branded default on both <button> and <a>.
  Do not add the generic button catch-all here.
*/
.c-button__solid--primary-color {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white-color);
}

.c-button__solid--primary-color:hover,
.c-button__solid--primary-color:focus,
.c-button__solid--primary-color:focus-within {
  /* No hover/focus state changes needed for .c-button__solid--primary-color */
}

.c-button__solid--accent-color {
  background-color: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--primary-color);
}

.c-button__solid--accent-color:hover,
.c-button__solid--accent-color:focus,
.c-button__solid--accent-color:focus-within {
  /* No hover/focus state changes needed for .c-button__solid--accent-color */
}

.c-button__solid--white {
  background-color: var(--white-color);
  border: 1px solid var(--white-color);
  color: var(--primary-color);
}

.c-button__solid--white:hover,
.c-button__solid--white:focus,
.c-button__solid--white:focus-within {
  /* No hover/focus state changes needed for .c-button__solid--white */
}

.c-button__solid--secondary-color {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: var(--primary-color);
}

.c-button__solid--secondary-color:hover,
.c-button__solid--secondary-color:focus,
.c-button__solid--secondary-color:focus-within {
  /* No hover/focus state changes needed for .c-button__solid--secondary-color */
}

.c-button__solid--dark-color {
  background-color: var(--dark-color);
  border: 1px solid var(--dark-color);
  color: var(--primary-color);
}

.c-button__solid--dark-color:hover,
.c-button__solid--dark-color:focus,
.c-button__solid--dark-color:focus-within {
  /* No hover/focus state changes needed for .c-button__solid--dark-color */
}


/*
  Outline Button Styles
*/
.c-button__outline--primary-color {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.c-button__outline--primary-color:hover,
.c-button__outline--primary-color:focus,
.c-button__outline--primary-color:focus-within {
  /* No hover/focus state changes needed for .c-button__outline--primary-color */
}

.c-button__outline--accent-color {
  background-color: transparent;
  border: 1px solid var(--accent-color);
  color: var(--primary-color);
}

.c-button__outline--accent-color:hover,
.c-button__outline--accent-color:focus,
.c-button__outline--accent-color:focus-within {
  /* No hover/focus state changes needed for .c-button__outline--accent-color */
}

.c-button__outline--secondary-color {
  background-color: transparent;
  border: 1px solid var(--secondary-color);
  color: var(--primary-color);
}

.c-button__outline--secondary-color:hover,
.c-button__outline--secondary-color:focus,
.c-button__outline--secondary-color:focus-within {
  /* No hover/focus state changes needed for .c-button__outline--secondary-color */
}

.c-button__outline--dark-color {
  background-color: transparent;
  border: 1px solid var(--dark-color);
  color: var(--primary-color);
}

.c-button__outline--dark-color:hover,
.c-button__outline--dark-color:focus,
.c-button__outline--dark-color:focus-within {
  /* No hover/focus state changes needed for .c-button__outline--dark-color */
}

.c-button__outline--white {
  background-color: transparent;
  border: 1px solid var(--white-color);
  color: var(--white-color);
}

.c-button__outline--white:hover,
.c-button__outline--white:focus,
.c-button__outline--white:focus-within {
  /* No hover/focus state changes needed for .c-button__outline--white */
}

/*
  Link Button Styles
*/
.c-button__link,
.c-button__link--white {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  text-decoration: underline;
}

.c-button__link {
  color: var(--primary-color);
}

.c-button__link--white {
  color: var(--white-color);
}

.c-button__link:hover,
.c-button__link:focus,
.c-button__link:focus-within,
.c-button__link--white:hover,
.c-button__link--white:focus,
.c-button__link--white:focus-within {
  background-color: transparent;
  border: none;
  transform: none;
}

.c-button__link:hover,
.c-button__link:focus,
.c-button__link:focus-within {
  color: var(--primary-color);
}

.c-button__link.c-button__link--white:hover,
.c-button__link.c-button__link--white:focus,
.c-button__link.c-button__link--white:focus-within {
  color: var(--white-color);
}

/* 
  Button icons.
  Link styles use this same None / Arrow / Phone set. Do not add a
  separate ::after on .c-button__link — it would clash with the arrow.
  Phone sits on the left (::before). Arrow stays on the right (::after).
*/
.c-button::after {
  position: relative;
  margin-left: 10px;
  right: 0;
  transition: all 0.35s ease;
}

.c-button:hover::after,
.c-button:focus::after,
.c-button:focus-within::after,
.c-content-card__link--full:hover .c-button::after,
.c-content-card__link--full:focus .c-button::after,
.c-content-card__link--full:focus-within .c-button::after {
  right: -5px;
}

.c-button__icon--none::after {
  display: none;
}

.c-button__icon--arrow::after {
  content: '';
  background-color: currentColor;
  /* Path-only SVG: nested <mask> inside a CSS mask image does not paint. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/*
  Diagonal arrow from the header "Customer Support Hub" design.
  The Figma icon is arrow_forward at 19.284px, turned -45 degrees.
  The path is that icon without its mask, so currentColor can paint it.
  Width and height match the SVG root. Do not resize them here.
*/
.c-button__icon--arrow-v2::after {
  background-color: currentColor;
  content: '';
  display: inline-block;
  height: 19.284px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.2843' height='19.2843' viewBox='0 0 19.2843 19.2843' fill='none'%3E%3Cpath d='M13.36 10.2448H3.61579V9.03952H13.36L8.78298 4.46251L9.64213 3.61581L15.6685 9.64215L9.64213 15.6685L8.78298 14.8218L13.36 10.2448Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.2843' height='19.2843' viewBox='0 0 19.2843 19.2843' fill='none'%3E%3Cpath d='M13.36 10.2448H3.61579V9.03952H13.36L8.78298 4.46251L9.64213 3.61581L15.6685 9.64215L9.64213 15.6685L8.78298 14.8218L13.36 10.2448Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  transform: rotate(-45deg);
  width: 19.284px;
}

/*
  Phone handset, left of the label. currentColor paints navy on yellow
  and white on navy. The path is the Figma "call" icon, without its mask.
*/
.c-button__icon--phone::before {
  background-color: currentColor;
  content: '';
  display: inline-block;
  height: 24px;
  margin-right: 12px;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M19.4402%2020.5C17.5557%2020.5%2015.6625%2020.0618%2013.7605%2019.1855C11.8587%2018.3092%2010.1113%2017.073%208.51825%2015.477C6.92542%2013.8808%205.69083%2012.1333%204.8145%2010.2345C3.93817%208.33583%203.5%206.44425%203.5%204.55975C3.5%204.25692%203.6%204.00458%203.8%203.80275C4%203.60092%204.25%203.5%204.55%203.5H7.8115C8.064%203.5%208.28675%203.58242%208.47975%203.74725C8.67275%203.91192%208.7955%204.11542%208.848%204.35775L9.42125%207.3C9.46092%207.573%209.45258%207.80758%209.39625%208.00375C9.33975%208.19992%209.23842%208.36467%209.09225%208.498L6.78275%2010.7462C7.15442%2011.4269%207.57908%2012.0708%208.05675%2012.678C8.53425%2013.285%209.05125%2013.8648%209.60775%2014.4173C10.1564%2014.9661%2010.7397%2015.4757%2011.3577%2015.9462C11.9757%2016.4167%2012.6431%2016.8546%2013.3598%2017.2598L15.6038%2014.9962C15.7603%2014.8334%2015.9498%2014.7193%2016.1723%2014.6538C16.3946%2014.5884%2016.6257%2014.5724%2016.8655%2014.6057L19.6422%2015.1713C19.8947%2015.2379%2020.1008%2015.3667%2020.2605%2015.5577C20.4202%2015.7487%2020.5%2015.9654%2020.5%2016.2078V19.45C20.5%2019.75%2020.3991%2020%2020.1973%2020.2C19.9954%2020.4%2019.7431%2020.5%2019.4402%2020.5ZM6.073%209.327L7.85775%207.61925C7.88975%207.59358%207.91058%207.55833%207.92025%207.5135C7.92992%207.46867%207.92833%207.427%207.9155%207.3885L7.48075%205.15375C7.46792%205.10258%207.4455%205.06417%207.4135%205.0385C7.3815%205.01283%207.33983%205%207.2885%205H5.15C5.1115%205%205.07942%205.01283%205.05375%205.0385C5.02825%205.06417%205.0155%205.09625%205.0155%205.13475C5.06667%205.81808%205.1785%206.51225%205.351%207.21725C5.52333%207.92242%205.764%208.62567%206.073%209.327ZM14.773%2017.9693C15.4358%2018.2783%2016.1272%2018.5145%2016.847%2018.678C17.567%2018.8413%2018.2397%2018.9384%2018.8652%2018.9693C18.9037%2018.9693%2018.9358%2018.9564%2018.9615%2018.9307C18.9872%2018.9051%2019%2018.873%2019%2018.8345V16.7307C19%2016.6794%2018.9872%2016.6377%2018.9615%2016.6057C18.9358%2016.5737%2018.8974%2016.5513%2018.8462%2016.5385L16.7462%2016.1115C16.7077%2016.0987%2016.6741%2016.0971%2016.6453%2016.1067C16.6164%2016.1164%2016.5859%2016.1372%2016.5538%2016.1692L14.773%2017.9693Z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M19.4402%2020.5C17.5557%2020.5%2015.6625%2020.0618%2013.7605%2019.1855C11.8587%2018.3092%2010.1113%2017.073%208.51825%2015.477C6.92542%2013.8808%205.69083%2012.1333%204.8145%2010.2345C3.93817%208.33583%203.5%206.44425%203.5%204.55975C3.5%204.25692%203.6%204.00458%203.8%203.80275C4%203.60092%204.25%203.5%204.55%203.5H7.8115C8.064%203.5%208.28675%203.58242%208.47975%203.74725C8.67275%203.91192%208.7955%204.11542%208.848%204.35775L9.42125%207.3C9.46092%207.573%209.45258%207.80758%209.39625%208.00375C9.33975%208.19992%209.23842%208.36467%209.09225%208.498L6.78275%2010.7462C7.15442%2011.4269%207.57908%2012.0708%208.05675%2012.678C8.53425%2013.285%209.05125%2013.8648%209.60775%2014.4173C10.1564%2014.9661%2010.7397%2015.4757%2011.3577%2015.9462C11.9757%2016.4167%2012.6431%2016.8546%2013.3598%2017.2598L15.6038%2014.9962C15.7603%2014.8334%2015.9498%2014.7193%2016.1723%2014.6538C16.3946%2014.5884%2016.6257%2014.5724%2016.8655%2014.6057L19.6422%2015.1713C19.8947%2015.2379%2020.1008%2015.3667%2020.2605%2015.5577C20.4202%2015.7487%2020.5%2015.9654%2020.5%2016.2078V19.45C20.5%2019.75%2020.3991%2020%2020.1973%2020.2C19.9954%2020.4%2019.7431%2020.5%2019.4402%2020.5ZM6.073%209.327L7.85775%207.61925C7.88975%207.59358%207.91058%207.55833%207.92025%207.5135C7.92992%207.46867%207.92833%207.427%207.9155%207.3885L7.48075%205.15375C7.46792%205.10258%207.4455%205.06417%207.4135%205.0385C7.3815%205.01283%207.33983%205%207.2885%205H5.15C5.1115%205%205.07942%205.01283%205.05375%205.0385C5.02825%205.06417%205.0155%205.09625%205.0155%205.13475C5.06667%205.81808%205.1785%206.51225%205.351%207.21725C5.52333%207.92242%205.764%208.62567%206.073%209.327ZM14.773%2017.9693C15.4358%2018.2783%2016.1272%2018.5145%2016.847%2018.678C17.567%2018.8413%2018.2397%2018.9384%2018.8652%2018.9693C18.9037%2018.9693%2018.9358%2018.9564%2018.9615%2018.9307C18.9872%2018.9051%2019%2018.873%2019%2018.8345V16.7307C19%2016.6794%2018.9872%2016.6377%2018.9615%2016.6057C18.9358%2016.5737%2018.8974%2016.5513%2018.8462%2016.5385L16.7462%2016.1115C16.7077%2016.0987%2016.6741%2016.0971%2016.6453%2016.1067C16.6164%2016.1164%2016.5859%2016.1372%2016.5538%2016.1692L14.773%2017.9693Z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  width: 24px;
}

/* Keep the handset still. The shared arrow rule slides ::after on hover. */
.c-button__icon--phone::after {
  display: none;
}


/* 
  Button burger 
*/
.c-button-burger {
  display: block;
  width: 40px;
  height: 36px;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
}
.c-button-burger .line {
  fill: none;
  stroke: var(--dark-color);
  stroke-width: 4;
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)
}

.c-button-burger .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 4
}

.c-button-burger .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 4
}

.c-button-burger .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 4
}

.c-button-burger.open .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 4
}

.c-button-burger.open .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -40;
  stroke-width: 4
}

.c-button-burger.open .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 4
}

/* Smaller button */
.c-button--small {
  font-size: .8rem;
  padding: 8px 16px;
}

/* Link styles */
.c-back-link {
  align-items: center;
  display: flex;
  font-size: .8rem;
  gap: 8px;
  line-height: 1;
}

.c-back-link svg {
  width: .8rem;
}

.c-back-link--white {
  color: #fff;
}

@media (min-width: 768px) {
  button:where(:not([class*="splide"]):not([class*="hs-"]):not([class*="ToolbarIconButton"]):not([class*="PrivateButton"]):not(.hsfc-Button)),
  .c-button {
    padding: var(--button-padding);
  }

  /* Re-apply after the padding shorthand above so link buttons stay flush. */
  .c-button__link,
  .c-button__link--white {
    padding-left: 0;
    padding-right: 0;
  }
}
.l-video-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.l-video-embed-container iframe,
.l-video-embed-container object,
.l-video-embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.l-cookiebot-privacy-wrapper .hs-embed-wrapper {
  max-height: 100% !important;
  max-width: 100vw !important;
  width: 100%;
}

.CookieDeclarationType {
  border: none !important;
  padding: unset !important;
}
form {
  margin-top: 1rem;
}

form,
.submitted-message {
  font-family: var(--font-family);
  font-size: var(--paragraph-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-font-color);
}

/* Form title */
.form-title {
  background-color: var(--form-title-background-color);
  color: var(--form-title-font-color);
}

/*
  HubSpot always outputs the form title heading, even when the title field
  is blank. :empty matches a node with no children and no text, so the leftover
  h3 margin does not leave a gap above the fields.
*/
.form-title:empty {
  display: none;
}

/* Form fields. Figma field stack uses 12px between rows. */
.hs-form-field,
[data-hsfc-id=Renderer] .hsfc-Row {
  margin-bottom: 12px;
}

/* Labels. 14px and the theme body colour when the editor set a label. */
form label,
.hsfc-FieldLabel {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.45rem;
  color: var(--body-font-color);
}

/*
  HubSpot still outputs a label when the label field is blank.
  v2 labels can be truly empty. v4 wraps an empty <span> inside .hsfc-FieldLabel.
  Hide both so the leftover margin does not leave a gap above the input.
*/
form label:empty,
.hsfc-FieldLabel:empty,
.hsfc-FieldLabel:has(> span:only-child:empty) {
  display: none;
}

/* Help text - legends */
form legend {
  font-size: 0.875rem;
  color: var(--form-help-text-font-color);
}

/*
  Text, select, and textarea fields.
  Figma: white pill, 32px radius, 12px 16px padding, 48px tall, 16px type.
*/
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form select,
form textarea,
.hsfc-TextInput,
.hsfc-TextareaInput,
.hsfc-Select,
.hsfc-SelectInput,
.hsfc-DropdownInput {
  background-color: var(--white-color, #ffffff);
  border: 1px solid var(--white-color, #ffffff);
  border-radius: 32px;
  box-sizing: border-box;
  color: var(--body-font-color);
  display: inline-block;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  min-height: 48px;
  padding: 12px 16px;
  width: 100%;
}

form textarea,
.hsfc-TextareaInput {
  min-height: 120px;
  resize: vertical;
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form select:focus,
form textarea:focus,
.hsfc-TextInput:focus,
.hsfc-TextareaInput:focus,
.hsfc-Select:focus,
.hsfc-SelectInput:focus,
.hsfc-DropdownInput:focus,
form input[type=text]:focus-visible,
form input[type=email]:focus-visible,
form input[type=password]:focus-visible,
form input[type=tel]:focus-visible,
form input[type=number]:focus-visible,
form select:focus-visible,
form textarea:focus-visible,
.hsfc-TextInput:focus-visible,
.hsfc-TextareaInput:focus-visible,
.hsfc-Select:focus-visible,
.hsfc-SelectInput:focus-visible,
.hsfc-DropdownInput:focus-visible {
  border: 1px solid var(--primary-color);
  box-shadow: none;
  outline: none;
}

form select {
  /** Replace the dropdown arrow indicator */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

form fieldset {
  border: none;
  margin: 0;
  max-width: 100% !important;
  padding: 0;
}

fieldset.form-columns-1 .hs-input:not(input[type=checkbox]) {
  width: 100% !important;
}

/* Placeholder. Figma inactive grey #949494. */
form input::placeholder,
form textarea::placeholder,
.hsfc-TextInput::placeholder,
.hsfc-TextareaInput::placeholder,
[data-hsfc-id=Renderer] .hsfc-TextInput::placeholder,
[data-hsfc-id=Renderer] .hsfc-TextareaInput::placeholder,
.hs-fieldtype-date .input .hs-dateinput:before {
  color: #949494 !important;
  opacity: 1;
}

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

form input[type=checkbox] {
  height: 18px;
  margin-top: 2px;
  position: relative;
  top: 2px;
  width: 18px;
}

/* Inputs - datepicker */
.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;
  background: var(--primary-color);
}

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

.fn-date-picker td.is-today .pika-button {
  color: var(--primary-color);
}

/* Inputs - file picker */
form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: .7rem 0;
}

/* Headings and text. Matches the 14px medium note under the Figma submit. */
form .hs-richtext,
form .hs-richtext p,
.hsfc-RichText,
.hsfc-RichText p {
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

form .hs-richtext p:last-child,
.hsfc-RichText p:last-child {
  margin-bottom: 0;
}

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

/* GDPR */
form .legal-consent-container .hs-richtext,
form .legal-consent-container .hs-richtext p {
  font-size: .75rem;
}

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

.legal-consent-container .hs-form-booleancheckbox-display > span p {
  font-size: .8rem;
}

.legal-consent-container label {
  color: var(--primary-color);
  font-size: .8rem;
  margin-bottom: 1.5rem;
}

.legal-consent-container li {
  padding-left: 0;
}

.legal-consent-container .hs-form-booleancheckbox-display input {
  display: inline-flex;
  position: relative;
  top: 5px;
}

/* Validation */
.hs-form-required {
  color: var(--form-error-text-font-color);
  margin-left: 7px;
}

.hs-input.invalid.error,
.hsfc-TextInput.invalid,
.hsfc-TextInput.error,
.hsfc-TextInput[aria-invalid=true],
.hsfc-TextareaInput.invalid,
.hsfc-TextareaInput.error,
.hsfc-TextareaInput[aria-invalid=true],
.hsfc-Select.invalid,
.hsfc-Select.error,
.hsfc-SelectInput.invalid,
.hsfc-SelectInput[aria-invalid=true] {
  border-color: var(--form-error-text-font-color);
}

.hs-error-msg {
  color: var(--form-error-text-font-color);
  margin-top: 0.35rem;
}

/* v4 field errors. HubSpot ships its own font and #E51520; force theme type and colour. */
[data-hsfc-id=Renderer] .hsfc-ErrorAlert {
  color: var(--form-error-text-font-color) !important;
  font-family: var(--font-family) !important;
  font-size: 0.8rem !important;
}

/*
  Every HubSpot form submit.
  Figma: full width, 64px tall, accent yellow, navy 20px semibold, pill.
*/
form input[type=submit],
form .hs-button,
form .hsfc-Button,
.hsfc-Button {
  align-items: center;
  background-color: var(--accent-color);
  border: none;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--primary-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: -0.6px;
  line-height: 1.5;
  max-width: none;
  min-height: 64px;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all ease .35s;
  white-space: normal;
  width: 100%;
}

form input[type=submit]:focus,
form input[type=submit]:focus-visible,
form .hs-button:focus,
form .hs-button:focus-visible,
form .hsfc-Button:focus,
form .hsfc-Button:focus-visible,
.hsfc-Button:focus,
.hsfc-Button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

form .hs-submit .actions,
[data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons {
  display: flex;
  position: relative;
  width: 100%;
}

/* Captcha */

/** Style underline **/
.s-form--underline form input[type=email],
.s-form--underline form input[type=file],
.s-form--underline form input[type=number],
.s-form--underline form input[type=password],
.s-form--underline form input[type=tel],
.s-form--underline form input[type=text],
.s-form--underline form select,
.s-form--underline form textarea{
  border: 0 none;
  border-bottom: 1px solid var(--form-label-font-color);
  border-radius: 0;
  outline: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100% !important;
  background-color: transparent;
}

/* Override HubSpot v4 renderer defaults so they match the Figma pills. */
[data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content {
  padding: 0 !important;
}

[data-hsfc-id=Renderer] .hsfc-Row {
  margin-bottom: 12px !important;
}

[data-hsfc-id=Renderer] .hsfc-FieldLabel,
[data-hsfc-id=Renderer] .hsfc-TextInput,
[data-hsfc-id=Renderer] .hsfc-TextareaInput,
[data-hsfc-id=Renderer] .hsfc-Select,
[data-hsfc-id=Renderer] .hsfc-SelectInput {
  font-family: var(--font-family) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--body-font-color) !important;
}

[data-hsfc-id=Renderer] .hsfc-FieldLabel {
  font-size: 14px !important;
}

[data-hsfc-id=Renderer] .hsfc-FieldLabel:empty,
[data-hsfc-id=Renderer] .hsfc-FieldLabel:has(> span:only-child:empty) {
  display: none !important;
}

[data-hsfc-id=Renderer] .hsfc-TextInput,
[data-hsfc-id=Renderer] .hsfc-TextareaInput,
[data-hsfc-id=Renderer] .hsfc-Select,
[data-hsfc-id=Renderer] .hsfc-SelectInput,
[data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret {
  background-color: var(--white-color) !important;
  border: 1px solid var(--white-color) !important;
  border-radius: 32px !important;
}

[data-hsfc-id=Renderer] .hsfc-TextInput,
[data-hsfc-id=Renderer] .hsfc-Select,
[data-hsfc-id=Renderer] .hsfc-SelectInput {
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
}

[data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret {
  border-radius: 32px 0 0 32px !important;
}

[data-hsfc-id=Renderer] .hsfc-TextInput[type=tel] {
  border-radius: 0 32px 32px 0 !important;
}

[data-hsfc-id=Renderer] .hsfc-RichText {
  margin-bottom: 0 !important;
}

[data-hsfc-id=Renderer] .hsfc-RichText p {
  font-size: .8rem !important;
  margin-bottom: .8rem !important;
}

[data-hsfc-id=Renderer] .hsfc-RichText p:last-child {
  margin-bottom: 0 !important;
}

/*
  Kill HubSpot's hover/focus glow (0 0 2px / 0 0 3px / 0 0 4px)
  and our old compiled 2px ring (box-shadow + outline).
*/
[data-hsfc-id="Renderer"] .hsfc-TextInput:hover,
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-TextInput:active,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:hover,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:active,
[data-hsfc-id="Renderer"] .hsfc-Select:hover,
[data-hsfc-id="Renderer"] .hsfc-Select:focus,
[data-hsfc-id="Renderer"] .hsfc-Select:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-Select:active,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:hover,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:focus,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:active,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:hover,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:focus,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:active,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:hover,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:focus,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:active {
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
}

/* Focus: 1px navy border only. No extra ring. */
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus,
[data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-Select:focus,
[data-hsfc-id="Renderer"] .hsfc-Select:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:focus,
[data-hsfc-id="Renderer"] .hsfc-SelectInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:focus,
[data-hsfc-id="Renderer"] .hsfc-DropdownInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:focus,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__Input:focus-visible {
  border: 1px solid var(--primary-color) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--primary-color) !important;
}

/*
  HubSpot v4 buttons read --hsf-button__* on [data-hsfc-id=Renderer].
  Set those tokens first so their own rules use our values.
  Then zero the leftover properties they hard-code (transition, display).
*/
[data-hsfc-id="Renderer"] {
  --hsf-button__background-color: var(--accent-color);
  --hsf-button__background-image: none;
  --hsf-button__border-color: transparent;
  --hsf-button__border-radius: 999px;
  --hsf-button__border-style: none;
  --hsf-button__border-width: 0;
  --hsf-button__box-shadow: none;
  --hsf-button__color: var(--primary-color);
  --hsf-button__font-size: 20px;
  --hsf-button__font-weight: 600;
  --hsf-button__padding: 16px 24px;
  --hsf-button__width: 100%;
  --hsf-button--hover__background-color: var(--accent-color);
  --hsf-button--hover__border-color: transparent;
  --hsf-button--hover__color: var(--primary-color);
  --hsf-button--focus__background-color: var(--accent-color);
  --hsf-button--focus__border-color: transparent;
  --hsf-button--focus__color: var(--primary-color);
  --hsf-default-button__background-color: var(--accent-color);
  --hsf-default-button__background-image: none;
  --hsf-default-button__border-color: transparent;
  --hsf-default-button__border-radius: 999px;
  --hsf-default-button__border-style: none;
  --hsf-default-button__border-width: 0;
  --hsf-default-button__box-shadow: none;
  --hsf-default-button__color: var(--primary-color);
  --hsf-default-button__padding: 16px 24px;
  --hsf-default-button--hover__background-color: var(--accent-color);
}

[data-hsfc-id="Renderer"] .hsfc-Button {
  background-color: var(--accent-color) !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  border-style: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  color: var(--primary-color) !important;
  display: inline-flex !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.6px !important;
  min-height: 64px !important;
  padding: 16px 24px !important;
  transition: none !important;
  width: 100% !important;
}

[data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover,
[data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):active,
[data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):focus {
  background-color: var(--accent-color) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--primary-color) !important;
  transform: none !important;
}

[data-hsfc-id="Renderer"] .hsfc-Button:focus,
[data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}

[data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons:has(>*:only-child) {
  justify-content: stretch !important;
  width: 100%;
}

.hsfc-DataPrivacyField {
  color: var(--body-font-color) !important;
  font-family: var(--font-family) !important;
  font-size: 12px;
}

.l-footer [data-hsfc-id=Renderer] .hsfc-RichText,
[data-hsfc-id=Renderer] .hsfc-RichText,
[data-hsfc-id=Renderer] .hsfc-FileInput,
[data-hsfc-id=Renderer] .hsfc-Button {
  font-family: var(--font-family) !important;
}

.l-footer [data-hsfc-id=Renderer] .hsfc-RichText {
  color: var(--white-color);
}
/**
 * Shared resource card listing styles.
 *
 * Used by IntegrationsAndSoftwareListings and other modules that show
 * HubDB (or similar) items in a card grid.
 *
 * Flex direction, wrap, and stretch come from `_flex.hubl.css` utilities
 * on the markup. Column count uses `l-flex__child--wrap-fixed-columns`.
 * This file holds gap, card chrome, image, type, and button alignment.
 *
 * Mobile first. Base styles are mobile. Every media query is `min-width`.
 * One card per row by default. Two from 768px (and through 992–1199).
 * Three from 1200px. Incomplete last rows keep the same card width as full rows.
 *
 * Shared `l-flex__child--wrap-fixed-columns` applies the desktop col var at
 * 992px; the overrides below keep tablet (2) until 1200px, then use 3.
 */

/* Grid wrapper: set CSS vars that `l-flex__child--wrap-fixed-columns` reads. */
.c-resource-cards {
  --resource-cards-gap: 24px;
  --l-flex-wrap-cols-mobile: 1;
  --l-flex-wrap-cols-tablet: 2;
  --l-flex-wrap-cols-desktop: 3;
  --l-flex-wrap-col-gap: var(--resource-cards-gap);

  gap: var(--resource-cards-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Grid cell fills its calculated column width. */
.c-resource-cards__item {
  box-sizing: border-box;
  min-width: 0;
}

/*
  Keep two columns through the large breakpoint. The shared utility would
  switch to `--l-flex-wrap-cols-desktop` (3) at 992px otherwise.
*/
@media (min-width: 992px) {
  .c-resource-cards .l-flex__child--wrap-fixed-columns {
    flex-basis: calc(
      (
          100% -
            (var(--l-flex-wrap-cols-tablet, 1) - 1) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-tablet, 1)
    );
    max-width: calc(
      (
          100% -
            (var(--l-flex-wrap-cols-tablet, 1) - 1) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-tablet, 1)
    );
  }
}

/* Three cards per row from 1200px. */
@media (min-width: 1200px) {
  .c-resource-cards .l-flex__child--wrap-fixed-columns {
    flex-basis: calc(
      (
          100% -
            (var(--l-flex-wrap-cols-desktop, 1) - 1) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-desktop, 1)
    );
    max-width: calc(
      (
          100% -
            (var(--l-flex-wrap-cols-desktop, 1) - 1) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-desktop, 1)
    );
  }
}

/* Card shell: light fill, rounded, padded. Height 100% shares row height. */
.c-resource-card {
  background-color: var(--light-color, #f2f5ff);
  border-radius: 24px;
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 24px;
  width: 100%;
}

/* Image, title, and description group. Button sits outside this block. */
.c-resource-card__body {
  min-width: 0;
  width: 100%;
}

/* Relative box so tags can sit over the image. */
.c-resource-card__media {
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.c-resource-card__media--empty {
  background-color: var(--primary-color, #010f5a);
  min-height: 160px;
}

/*
  Tag overlay: 8px inset from top/left, 8px gap between pills.
  Overrides the shared `.c-tags` 12px gap for this card only.
  pointer-events: none keeps plain span tags non-interactive on HubDB
  cards. Linked tags (blog listing) re-enable clicks on the anchors.
  z-index: 0 keeps tags above the image inside this media box without
  stacking above sticky filter chrome in the listings module.
*/
.c-resource-card__tags {
  box-sizing: border-box;
  gap: 8px;
  left: 8px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 0;
}

.c-resource-card__tags a.c-tag {
  pointer-events: auto;
}

.c-resource-card__image {
  border-radius: 16px;
  display: block;
  max-height: 264px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.c-resource-card__title {
  margin: 0 0 16px;
}

.c-resource-card__description {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  margin: 0;
}

/*
  Button stays content-width. The card is a column flex with stretch
  children by default, so align-self keeps the CTA from growing full width.
*/
.c-resource-card__button {
  align-self: flex-start;
  margin-top: 24px;
  width: auto;
}
/**
 * Shared topic / label tags (Featured Blogs and other modules).
 * Use with theme flex utilities on the list, e.g. l-flex l-flex--direction-row l-flex--wrap.
 */

.c-tags {
  gap: 12px;
}

.c-tag {
  --c-tag-color: var(--primary-color);
  background-color: transparent;
  border: 1px solid var(--secondary-color);
  border-radius: 30px;
  box-sizing: border-box;
  color: var(--c-tag-color);
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  padding: 4px 12px;
  text-decoration: none;
  /* Same grow as .c-button. Transform only, so the fill does not fade. */
  transition: transform 0.35s ease;
}

.c-tag:hover,
.c-tag:focus-visible {
  transform: scale(1.05);
}

/* Theme links change colour on hover. A tag keeps its own colour and grows instead. */
a.c-tag:hover,
a.c-tag:focus,
a.c-tag:active,
a.c-tag:visited {
  color: var(--c-tag-color);
  text-decoration: none;
}

/* Background colour modifiers — pair with base `.c-tag` (TagsRepeater and other modules). */
.c-tag.c-tag--primary-color {
  --c-tag-color: var(--white-color);
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--c-tag-color);
}

.c-tag.c-tag--secondary-color {
  --c-tag-color: var(--primary-color);
  background-color: var(--secondary-color);
  color: var(--c-tag-color);
}

.c-tag.c-tag--accent-color {
  --c-tag-color: var(--white-color);
  background-color: var(--accent-color);
  color: var(--c-tag-color);
}

/* Selected / current page — inverse of default .c-tag; :visited keeps link color correct */
.c-tag.c-tag--active,
.c-tag.c-tag--active:hover,
.c-tag.c-tag--active:focus,
.c-tag.c-tag--active:visited {
  --c-tag-color: var(--primary-color);
  background-color: var(--secondary-color);
  color: var(--c-tag-color);
}
html {
  scroll-behavior: smooth;
  font-size: var(--body-font-size);
}

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

body {
  color: var(--body-font-color);
  font-family: var(--font-family);
  font-weight: var(--body-font-weight);
  letter-spacing: var(--body-font-letter-spacing);
  line-height: var(--body-font-line-height);
  word-break: break-word;
}

/* Paragraphs */
p {
  font-size: calc(var(--paragraph-font-size) * .8);
  margin: 0 0 1.2em 0;
}

strong {
  font-weight: 700;
}


/* Anchors */
a {
  cursor: pointer;
  text-decoration: underline;
  transition: all .3s ease-in-out;
  color: var(--anchor-font-color);
}

/*
  Hover/focus accent colour for text links only.
  Exclude .c-button and .c-tag in the same selector — separate
  a:not(.c-tag):hover rules still matched <a class="c-button"> and
  overrode solid/outline button text colours on hover.
*/
a:not(.c-button):not(.c-tag):active,
a:not(.c-button):not(.c-tag):hover,
a:not(.c-button):not(.c-tag):focus {
  text-decoration: none;
  color: var(--anchor-font-hover-color);
}

a.s-link-dark:hover,
a.s-link-dark:focus {
  color: var(--primary-color);
}

/* Headings */
h1,
h2,
h3, 
h4,
h5,
h6 {
  color: var(--heading-font-color);
  font-family: var(--font-family);
  margin: 0 0 .5rem 0;
}

h1 {
  font-size: calc(var(--heading-1-font-size) * .5);
  font-weight: var(--heading-1-font-weight);
  line-height: var(--heading-1-line-height);
  margin-bottom: 1rem;
}

h1 strong, h1 span[style*="font-weight: bold"] {
  font-weight: 500 !important;
}

h2 {
  font-size: calc(var(--heading-2-font-size) * .65);
  font-weight: var(--heading-2-font-weight);
  letter-spacing: -1.44px;
  line-height: var(--heading-2-line-height);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: calc(var(--heading-3-font-size) * .6);
  font-weight: var(--heading-3-font-weight);
  line-height: var(--heading-3-line-height);
}

h4 {
  font-size: calc(var(--heading-4-font-size) * .9);
  font-weight: var(--heading-4-font-weight);
  line-height: var(--heading-4-line-height);
}

h5 {
  font-size: var(--heading-5-font-size);
  font-weight: var(--heading-5-font-weight);
  line-height: var(--heading-5-line-height);
}

h6 {
  font-size: var(--heading-6-font-size);
  font-weight: var(--heading-6-font-weight);
  line-height: var(--heading-6-line-height);
}


small, .text_small {
  font-size: var(--small-font-size);
  font-weight: var(--body-font-weight);
  letter-spacing: var(--body-font-letter-spacing);
  line-height: var(--body-font-line-height);
}

/* Lists */
ul,
ol {
  margin: 0 0 1.4rem;
  padding-left: 0;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: .5em 0 0 0;
  padding-left: 0;
}

ul.no-list {
  list-style: none;
}

li {
  line-height: 1.6;
  margin-bottom: .5em;
  padding-left: 0.25em;
  font-size: calc(var(--body-font-size) * .9);
}

li:not(.hs-menu-item):not(.splide__slide):not(.osano-cm-list-item) {
  margin-left: 1rem;
}

ol {
  list-style-type: none;
  counter-reset: item;
  /* margin: 0; */
  /* padding: 0; */
}

ol li:not(.hs-menu-item):not(.splide__slide):not(.osano-cm-list) {
  margin-left: 0;
}

ol>li {
  display: table;
  counter-increment: item;
  /* margin-left: 0; */
  /* margin-bottom: 0.6em; */
}

ol>li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
  word-break: initial;
}

li ol li:last-child {
  margin-bottom: 0;
}

li ol>li:before {
  content: counters(item, ".") " ";
}

li ol li ol>li:before {
  content: counters(item, ".") " ";
}

/* Code blocks */
pre {
  overflow: auto;
}

code {
  background-color: #eee;
  display: block;
  padding: 1em;
  vertical-align: bottom;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid;
  margin: 1rem 0;
  padding: 2rem;
  border-left-color: var(--secondary-color);
}

/* Horizontal rules */
hr {
  background-color: #CECECE;
  border: none;
  color: #CECECE;
  height: 1px;
  margin: 25px 0;
}

.s-text-color--white hr {
  background-color: var(--white-color);
  color: var(--white-color);
}

th, td {
  font-size: calc(var(--body-font-size) * .9);
}

/* Image alt text */
img {
  font-size: 1em;
  word-break: normal;
}

.hs-search-field {
  margin-bottom: 2em;
}

.hs-search-field__suggestions-container {
  padding: 1em 0;
  z-index: 10;
}

.hs-search-field--open .hs-search-field__suggestions, .inpage-editor-active-field .hs-search-field__suggestions {
  border: none;
}

/*********************
  RESPONSIVE STYLES
*********************/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  h1 {
    margin-bottom: 2rem;
  }
  
  .hs-image-widget {
    margin-bottom: 0
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  p {
    font-size: var(--paragraph-font-size);
  }

  li, th, td {
    font-size: var(--body-font-size);
  }

  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 35px;
  }

  h3 {
    font-size: var(--heading-3-font-size);
  }

  h4 {
    font-size: var(--heading-4-font-size);
  }

  h5 {
    font-size: var(--heading-5-font-size);
  }

  h6 {
    font-size: var(--heading-6-font-size);
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {
    font-size: var(--heading-1-font-size);
  }

  h2 {
    font-size: var(--heading-2-font-size);
  }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}

/*  Objects
    Non-cosmetic design patterns including grid and layout classes)
*/
#l-main-content {
  /* overflow: hidden; */
}

.content-wrapper {
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--container-width);
}
.dnd-section{
  overflow-x: clip;
}

.dnd-section,
.content-wrapper--vertical-spacing {
  padding: var(--dnd-section-padding-mobile);
}

.dnd-section.row-number-1 {
  padding: var(--hero-section-padding-mobile);
}

.dnd-section > .row-fluid {
  margin: 0 auto;
  max-width: var(--container-width);
}

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

@media (min-width: 768px) {
  .dnd-section,
  .content-wrapper--vertical-spacing {
    padding: var(--dnd-section-padding-tablet);
  }

  .dnd-section.row-number-1 {
    padding: var(--hero-section-padding-tablet);
  }
}

@media (min-width: 992px) {
  .dnd-section,
  .content-wrapper--vertical-spacing {
    padding: var(--dnd-section-padding);
  }

  .dnd-section.row-number-1 {
    padding: var(--hero-section-padding);
  }

}

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

@media (min-width: 1600px) {
  .content-wrapper {
    max-width: var(--container-width);
  }

  .dnd-section > .row-fluid {
    max-width: var(--container-width);
  }
}

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

.l-flex--inline {
  display: inline-flex;
}

/*******************************************
  Direction
*******************************************/
.l-flex--direction-row {
  flex-direction: row;
}

.l-flex--direction-row-reverse {
  flex-direction: row-reverse;
}

.l-flex--direction-column {
  flex-direction: column;
}

.l-flex--direction-column-reverse {
  flex-direction: column-reverse;
}

/*******************************************
  Wrap
*******************************************/
.l-flex--nowrap {
  flex-wrap: nowrap;
}

.l-flex--wrap {
  flex-wrap: wrap;
}

.l-flex--wrap-reverse {
  flex-wrap: wrap-reverse;
}

/*******************************************
  Justify Content
*******************************************/
.l-flex--justify-content-flex-start {
  justify-content: flex-start;
}

.l-flex--justify-content-flex-end {
  justify-content: flex-end;
}

.l-flex--justify-content-center {
  justify-content: center;
}

.l-flex--justify-content-space-between {
  justify-content: space-between;
}

.l-flex--justify-content-space-around {
  justify-content: space-around;
}

.l-flex--justify-content-space-evenly {
  justify-content: space-evenly;
}

.l-flex--justify-content-start {
  justify-content: start;
}

.l-flex--justify-content-end {
  justify-content: end;
}

.l-flex--justify-content-left {
  justify-content: left;
}

.l-flex--justify-content-right {
  justify-content: right;
}

/*******************************************
  Align Items
*******************************************/
.l-flex--align-items-stretch {
  align-items: stretch;
}

.l-flex--align-items-flex-start {
  align-items: flex-start;
}

.l-flex--align-items-flex-end {
  align-items: flex-end;
}

.l-flex--align-items-center {
  align-items: center;
}

.l-flex--align-items-baseline {
  align-items: baseline;
}

.l-flex--align-items-first-baseline {
  align-items: first baseline;
}

.l-flex--align-items-last-baseline {
  align-items: last baseline;
}

.l-flex--align-items-start {
  align-items: start;
}

.l-flex--align-items-end {
  align-items: end;
}

.l-flex--align-items-self-start {
  align-items: self-start;
}

.l-flex--align-items-self-end {
  align-items: self-end;
}

/*******************************************
  Align Content
*******************************************/
.l-flex--align-content-flex-start {
  align-content: flex-start;
}

.l-flex--align-content-flex-end {
  align-content: flex-end;
}

.l-flex--align-content-center {
  align-content: center;
}

.l-flex--align-content-space-between {
  align-content: space-between;
}

.l-flex--align-content-space-around {
  align-content: space-around;
}

.l-flex--align-content-space-evenly {
  align-content: space-evenly;
}

.l-flex--align-content-stretch {
  align-content: start;
}

.l-flex--align-content-start {
  align-content: start;
}

.l-flex--align-content-end {
  align-content: end;
}

.l-flex--align-content-baseline {
  align-content: baseline;
}

.l-flex--align-content-first-baseline {
  align-content: first baseline;
}

.l-flex--align-content-last-baseline {
  align-content: last baseline;
}

/*******************************************
  Align Self
*******************************************/
.l-flex--align-self-auto {
  align-self: auto;
}

.l-flex--align-self-flex-start {
  align-self: flex-start;
}

.l-flex--align-self-flex-end {
  align-self: flex-end;
}

.l-flex--align-self-center {
  align-self: center;
}

.l-flex--align-self-baseline {
  align-self: baseline;
}

.l-flex--align-self-stretch {
  align-self: stretch;
}


/*************************************************************
  RESPONSIVE STYLES
************************************************************/


/************************************************************
  Small devices (landscape phones, 576px and up)
  Class names should have --sm added to denote the media breakpoint
************************************************************/
@media (min-width: 576px) {
  /*******************************************
    Direction
  *******************************************/
  .l-flex--direction-row--sm {
    flex-direction: row;
  }

  .l-flex--direction-row-reverse--sm {
    flex-direction: row-reverse;
  }

  .l-flex--direction-column--sm {
    flex-direction: column;
  }

  .l-flex--direction-column-reverse--sm {
    flex-direction: column-reverse;
  }

  /*******************************************
    Wrap
  *******************************************/
  .l-flex--nowrap--sm {
    flex-wrap: nowrap;
  }

  .l-flex--wrap--sm {
    flex-wrap: wrap;
  }

  .l-flex--wrap-reverse--sm {
    flex-wrap: wrap-reverse;
  }

  /*******************************************
    Justify Content
  *******************************************/
  .l-flex--justify-content-flex-start--sm {
    justify-content: flex-start;
  }

  .l-flex--justify-content-flex-end--sm {
    justify-content: flex-end;
  }

  .l-flex--justify-content-center--sm {
    justify-content: center;
  }

  .l-flex--justify-content-space-between--sm {
    justify-content: space-between;
  }

  .l-flex--justify-content-space-around--sm {
    justify-content: space-around;
  }

  .l-flex--justify-content-space-evenly--sm {
    justify-content: space-evenly;
  }

  .l-flex--justify-content-start--sm {
    justify-content: start;
  }

  .l-flex--justify-content-end--sm {
    justify-content: end;
  }

  .l-flex--justify-content-left--sm {
    justify-content: left;
  }

  .l-flex--justify-content-right--sm {
    justify-content: right;
  }

  /*******************************************
    Align Items
  *******************************************/
  .l-flex--align-items-stretch--sm {
    align-items: stretch;
  }

  .l-flex--align-items-flex-start--sm {
    align-items: flex-start;
  }

  .l-flex--align-items-flex-end--sm {
    align-items: flex-end;
  }

  .l-flex--align-items-center--sm {
    align-items: center;
  }

  .l-flex--align-items-baseline--sm {
    align-items: baseline;
  }

  .l-flex--align-items-first-baseline--sm {
    align-items: first baseline;
  }

  .l-flex--align-items-last-baseline--sm {
    align-items: last baseline;
  }

  .l-flex--align-items-start--sm {
    align-items: start;
  }

  .l-flex--align-items-end--sm {
    align-items: end;
  }

  .l-flex--align-items-self-start--sm {
    align-items: self-start;
  }

  .l-flex--align-items-self-end--sm {
    align-items: self-end;
  }

  /*******************************************
    Align Content
  *******************************************/
  .l-flex--align-content-flex-start--sm {
    align-content: flex-start;
  }

  .l-flex--align-content-flex-end--sm {
    align-content: flex-end;
  }

  .l-flex--align-content-center--sm {
    align-content: center;
  }

  .l-flex--align-content-space-between--sm {
    align-content: space-between;
  }

  .l-flex--align-content-space-around--sm {
    align-content: space-around;
  }

  .l-flex--align-content-space-evenly--sm {
    align-content: space-evenly;
  }

  .l-flex--align-content-stretch--sm {
    align-content: start;
  }

  .l-flex--align-content-start--sm {
    align-content: start;
  }

  .l-flex--align-content-end--sm {
    align-content: end;
  }

  .l-flex--align-content-baseline--sm {
    align-content: baseline;
  }

  .l-flex--align-content-first-baseline--sm {
    align-content: first baseline;
  }

  .l-flex--align-content-last-baseline--sm {
    align-content: last baseline;
  }

  /*******************************************
    Align Self
  *******************************************/
  .l-flex--align-self-auto--sm {
    align-self: auto;
  }

  .l-flex--align-self-flex-start--sm {
    align-self: flex-start;
  }

  .l-flex--align-self-flex-end--sm {
    align-self: flex-end;
  }

  .l-flex--align-self-center--sm {
    align-self: center;
  }

  .l-flex--align-self-baseline--sm {
    align-self: baseline;
  }

  .l-flex--align-self-stretch--sm {
    align-self: stretch;
  }
}


/************************************************************
  Medium devices (tablets, 768px and up)
  Class names should have --md added to denote the media breakpoint
************************************************************/
@media (min-width: 768px) {
  /*******************************************
    Direction
  *******************************************/
  .l-flex--direction-row--md {
    flex-direction: row;
  }

  .l-flex--direction-row-reverse--md {
    flex-direction: row-reverse;
  }

  .l-flex--direction-column--md {
    flex-direction: column;
  }

  .l-flex--direction-column-reverse--md {
    flex-direction: column-reverse;
  }

  /*******************************************
    Wrap
  *******************************************/
  .l-flex--nowrap--md {
    flex-wrap: nowrap;
  }

  .l-flex--wrap--md {
    flex-wrap: wrap;
  }

  .l-flex--wrap-reverse--md {
    flex-wrap: wrap-reverse;
  }

  /*******************************************
    Justify Content
  *******************************************/
  .l-flex--justify-content-flex-start--md {
    justify-content: flex-start;
  }

  .l-flex--justify-content-flex-end--md {
    justify-content: flex-end;
  }

  .l-flex--justify-content-center--md {
    justify-content: center;
  }

  .l-flex--justify-content-space-between--md {
    justify-content: space-between;
  }

  .l-flex--justify-content-space-around--md {
    justify-content: space-around;
  }

  .l-flex--justify-content-space-evenly--md {
    justify-content: space-evenly;
  }

  .l-flex--justify-content-start--md {
    justify-content: start;
  }

  .l-flex--justify-content-end--md {
    justify-content: end;
  }

  .l-flex--justify-content-left--md {
    justify-content: left;
  }

  .l-flex--justify-content-right--md {
    justify-content: right;
  }

  /*******************************************
    Align Items
  *******************************************/
  .l-flex--align-items-stretch--md {
    align-items: stretch;
  }

  .l-flex--align-items-flex-start--md {
    align-items: flex-start;
  }

  .l-flex--align-items-flex-end--md {
    align-items: flex-end;
  }

  .l-flex--align-items-center--md {
    align-items: center;
  }

  .l-flex--align-items-baseline--md {
    align-items: baseline;
  }

  .l-flex--align-items-first-baseline--md {
    align-items: first baseline;
  }

  .l-flex--align-items-last-baseline--md {
    align-items: last baseline;
  }

  .l-flex--align-items-start--md {
    align-items: start;
  }

  .l-flex--align-items-end--md {
    align-items: end;
  }

  .l-flex--align-items-self-start--md {
    align-items: self-start;
  }

  .l-flex--align-items-self-end--md {
    align-items: self-end;
  }

  /*******************************************
    Align Content
  *******************************************/
  .l-flex--align-content-flex-start--md {
    align-content: flex-start;
  }

  .l-flex--align-content-flex-end--md {
    align-content: flex-end;
  }

  .l-flex--align-content-center--md {
    align-content: center;
  }

  .l-flex--align-content-space-between--md {
    align-content: space-between;
  }

  .l-flex--align-content-space-around--md {
    align-content: space-around;
  }

  .l-flex--align-content-space-evenly--md {
    align-content: space-evenly;
  }

  .l-flex--align-content-stretch--md {
    align-content: start;
  }

  .l-flex--align-content-start--md {
    align-content: start;
  }

  .l-flex--align-content-end--md {
    align-content: end;
  }

  .l-flex--align-content-baseline--md {
    align-content: baseline;
  }

  .l-flex--align-content-first-baseline--md {
    align-content: first baseline;
  }

  .l-flex--align-content-last-baseline--md {
    align-content: last baseline;
  }

  /*******************************************
    Align Self
  *******************************************/
  .l-flex--align-self-auto--md {
    align-self: auto;
  }

  .l-flex--align-self-flex-start--md {
    align-self: flex-start;
  }

  .l-flex--align-self-flex-end--md {
    align-self: flex-end;
  }

  .l-flex--align-self-center--md {
    align-self: center;
  }

  .l-flex--align-self-baseline--md {
    align-self: baseline;
  }

  .l-flex--align-self-stretch--md {
    align-self: stretch;
  }
}


/************************************************************
  Large devices (desktops, 992px and up)
  Class names should have --lg added to denote the media breakpoint
************************************************************/
@media (min-width: 992px) {
  /*******************************************
    Direction
  *******************************************/
  .l-flex--direction-row--lg {
    flex-direction: row;
  }

  .l-flex--direction-row-reverse--lg {
    flex-direction: row-reverse;
  }

  .l-flex--direction-column--lg {
    flex-direction: column;
  }

  .l-flex--direction-column-reverse--lg {
    flex-direction: column-reverse;
  }

  /*******************************************
    Wrap
  *******************************************/
  .l-flex--nowrap--lg {
    flex-wrap: nowrap;
  }

  .l-flex--wrap--lg {
    flex-wrap: wrap;
  }

  .l-flex--wrap-reverse--lg {
    flex-wrap: wrap-reverse;
  }

  /*******************************************
    Justify Content
  *******************************************/
  .l-flex--justify-content-flex-start--lg {
    justify-content: flex-start;
  }

  .l-flex--justify-content-flex-end--lg {
    justify-content: flex-end;
  }

  .l-flex--justify-content-center--lg {
    justify-content: center;
  }

  .l-flex--justify-content-space-between--lg {
    justify-content: space-between;
  }

  .l-flex--justify-content-space-around--lg {
    justify-content: space-around;
  }

  .l-flex--justify-content-space-evenly--lg {
    justify-content: space-evenly;
  }

  .l-flex--justify-content-start--lg {
    justify-content: start;
  }

  .l-flex--justify-content-end--lg {
    justify-content: end;
  }

  .l-flex--justify-content-left--lg {
    justify-content: left;
  }

  .l-flex--justify-content-right--lg {
    justify-content: right;
  }

  /*******************************************
    Align Items
  *******************************************/
  .l-flex--align-items-stretch--lg {
    align-items: stretch;
  }

  .l-flex--align-items-flex-start--lg {
    align-items: flex-start;
  }

  .l-flex--align-items-flex-end--lg {
    align-items: flex-end;
  }

  .l-flex--align-items-center--lg {
    align-items: center;
  }

  .l-flex--align-items-baseline--lg {
    align-items: baseline;
  }

  .l-flex--align-items-first-baseline--lg {
    align-items: first baseline;
  }

  .l-flex--align-items-last-baseline--lg {
    align-items: last baseline;
  }

  .l-flex--align-items-start--lg {
    align-items: start;
  }

  .l-flex--align-items-end--lg {
    align-items: end;
  }

  .l-flex--align-items-self-start--lg {
    align-items: self-start;
  }

  .l-flex--align-items-self-end--lg {
    align-items: self-end;
  }

  /*******************************************
    Align Content
  *******************************************/
  .l-flex--align-content-flex-start--lg {
    align-content: flex-start;
  }

  .l-flex--align-content-flex-end--lg {
    align-content: flex-end;
  }

  .l-flex--align-content-center--lg {
    align-content: center;
  }

  .l-flex--align-content-space-between--lg {
    align-content: space-between;
  }

  .l-flex--align-content-space-around--lg {
    align-content: space-around;
  }

  .l-flex--align-content-space-evenly--lg {
    align-content: space-evenly;
  }

  .l-flex--align-content-stretch--lg {
    align-content: start;
  }

  .l-flex--align-content-start--lg {
    align-content: start;
  }

  .l-flex--align-content-end--lg {
    align-content: end;
  }

  .l-flex--align-content-baseline--lg {
    align-content: baseline;
  }

  .l-flex--align-content-first-baseline--lg {
    align-content: first baseline;
  }

  .l-flex--align-content-last-baseline--lg {
    align-content: last baseline;
  }

  /*******************************************
    Align Self
  *******************************************/
  .l-flex--align-self-auto--lg {
    align-self: auto;
  }

  .l-flex--align-self-flex-start--lg {
    align-self: flex-start;
  }

  .l-flex--align-self-flex-end--lg {
    align-self: flex-end;
  }

  .l-flex--align-self-center--lg {
    align-self: center;
  }

  .l-flex--align-self-baseline--lg {
    align-self: baseline;
  }

  .l-flex--align-self-stretch--lg {
    align-self: stretch;
  }
}


/************************************************************
  X-Large devices (large desktops, 1200px and up)
  Class names should have --xl added to denote the media breakpoint
************************************************************/
@media (min-width: 1200px) {
  /*******************************************
    Direction
  *******************************************/
  .l-flex--direction-row--xl {
    flex-direction: row;
  }

  .l-flex--direction-row-reverse--xl {
    flex-direction: row-reverse;
  }

  .l-flex--direction-column--xl {
    flex-direction: column;
  }

  .l-flex--direction-column-reverse--xl {
    flex-direction: column-reverse;
  }

  /*******************************************
    Wrap
  *******************************************/
  .l-flex--nowrap--xl {
    flex-wrap: nowrap;
  }

  .l-flex--wrap--xl {
    flex-wrap: wrap;
  }

  .l-flex--wrap-reverse--xl {
    flex-wrap: wrap-reverse;
  }

  /*******************************************
    Justify Content
  *******************************************/
  .l-flex--justify-content-flex-start--xl {
    justify-content: flex-start;
  }

  .l-flex--justify-content-flex-end--xl {
    justify-content: flex-end;
  }

  .l-flex--justify-content-center--xl {
    justify-content: center;
  }

  .l-flex--justify-content-space-between--xl {
    justify-content: space-between;
  }

  .l-flex--justify-content-space-around--xl {
    justify-content: space-around;
  }

  .l-flex--justify-content-space-evenly--xl {
    justify-content: space-evenly;
  }

  .l-flex--justify-content-start--xl {
    justify-content: start;
  }

  .l-flex--justify-content-end--xl {
    justify-content: end;
  }

  .l-flex--justify-content-left--xl {
    justify-content: left;
  }

  .l-flex--justify-content-right--xl {
    justify-content: right;
  }

  /*******************************************
    Align Items
  *******************************************/
  .l-flex--align-items-stretch--xl {
    align-items: stretch;
  }

  .l-flex--align-items-flex-start--xl {
    align-items: flex-start;
  }

  .l-flex--align-items-flex-end--xl {
    align-items: flex-end;
  }

  .l-flex--align-items-center--xl {
    align-items: center;
  }

  .l-flex--align-items-baseline--xl {
    align-items: baseline;
  }

  .l-flex--align-items-first-baseline--xl {
    align-items: first baseline;
  }

  .l-flex--align-items-last-baseline--xl {
    align-items: last baseline;
  }

  .l-flex--align-items-start--xl {
    align-items: start;
  }

  .l-flex--align-items-end--xl {
    align-items: end;
  }

  .l-flex--align-items-self-start--xl {
    align-items: self-start;
  }

  .l-flex--align-items-self-end--xl {
    align-items: self-end;
  }

  /*******************************************
    Align Content
  *******************************************/
  .l-flex--align-content-flex-start--xl {
    align-content: flex-start;
  }

  .l-flex--align-content-flex-end--xl {
    align-content: flex-end;
  }

  .l-flex--align-content-center--xl {
    align-content: center;
  }

  .l-flex--align-content-space-between--xl {
    align-content: space-between;
  }

  .l-flex--align-content-space-around--xl {
    align-content: space-around;
  }

  .l-flex--align-content-space-evenly--xl {
    align-content: space-evenly;
  }

  .l-flex--align-content-stretch--xl {
    align-content: start;
  }

  .l-flex--align-content-start--xl {
    align-content: start;
  }

  .l-flex--align-content-end--xl {
    align-content: end;
  }

  .l-flex--align-content-baseline--xl {
    align-content: baseline;
  }

  .l-flex--align-content-first-baseline--xl {
    align-content: first baseline;
  }

  .l-flex--align-content-last-baseline--xl {
    align-content: last baseline;
  }

  /*******************************************
    Align Self
  *******************************************/
  .l-flex--align-self-auto--xl {
    align-self: auto;
  }

  .l-flex--align-self-flex-start--xl {
    align-self: flex-start;
  }

  .l-flex--align-self-flex-end--xl {
    align-self: flex-end;
  }

  .l-flex--align-self-center--xl {
    align-self: center;
  }

  .l-flex--align-self-baseline--xl {
    align-self: baseline;
  }

  .l-flex--align-self-stretch--xl {
    align-self: stretch;
  }
}


/************************************************************
  XX-Large devices (larger desktops, 1400px and up)
  Class names should have --xxl added to denote the media breakpoint
************************************************************/
@media (min-width: 1400px) {
  /*******************************************
    Direction
  *******************************************/
  .l-flex--direction-row--xxl {
    flex-direction: row;
  }

  .l-flex--direction-row-reverse--xxl {
    flex-direction: row-reverse;
  }

  .l-flex--direction-column--xxl {
    flex-direction: column;
  }

  .l-flex--direction-column-reverse--xxl {
    flex-direction: column-reverse;
  }

  /*******************************************
    Wrap
  *******************************************/
  .l-flex--nowrap--xxl {
    flex-wrap: nowrap;
  }

  .l-flex--wrap--xxl {
    flex-wrap: wrap;
  }

  .l-flex--wrap-reverse--xxl {
    flex-wrap: wrap-reverse;
  }

  /*******************************************
    Justify Content
  *******************************************/
  .l-flex--justify-content-flex-start--xxl {
    justify-content: flex-start;
  }

  .l-flex--justify-content-flex-end--xxl {
    justify-content: flex-end;
  }

  .l-flex--justify-content-center--xxl {
    justify-content: center;
  }

  .l-flex--justify-content-space-between--xxl {
    justify-content: space-between;
  }

  .l-flex--justify-content-space-around--xxl {
    justify-content: space-around;
  }

  .l-flex--justify-content-space-evenly--xxl {
    justify-content: space-evenly;
  }

  .l-flex--justify-content-start--xxl {
    justify-content: start;
  }

  .l-flex--justify-content-end--xxl {
    justify-content: end;
  }

  .l-flex--justify-content-left--xxl {
    justify-content: left;
  }

  .l-flex--justify-content-right--xxl {
    justify-content: right;
  }

  /*******************************************
    Align Items
  *******************************************/
  .l-flex--align-items-stretch--xxl {
    align-items: stretch;
  }

  .l-flex--align-items-flex-start--xxl {
    align-items: flex-start;
  }

  .l-flex--align-items-flex-end--xxl {
    align-items: flex-end;
  }

  .l-flex--align-items-center--xxl {
    align-items: center;
  }

  .l-flex--align-items-baseline--xxl {
    align-items: baseline;
  }

  .l-flex--align-items-first-baseline--xxl {
    align-items: first baseline;
  }

  .l-flex--align-items-last-baseline--xxl {
    align-items: last baseline;
  }

  .l-flex--align-items-start--xxl {
    align-items: start;
  }

  .l-flex--align-items-end--xxl {
    align-items: end;
  }

  .l-flex--align-items-self-start--xxl {
    align-items: self-start;
  }

  .l-flex--align-items-self-end--xxl {
    align-items: self-end;
  }

  /*******************************************
    Align Content
  *******************************************/
  .l-flex--align-content-flex-start--xxl {
    align-content: flex-start;
  }

  .l-flex--align-content-flex-end--xxl {
    align-content: flex-end;
  }

  .l-flex--align-content-center--xxl {
    align-content: center;
  }

  .l-flex--align-content-space-between--xxl {
    align-content: space-between;
  }

  .l-flex--align-content-space-around--xxl {
    align-content: space-around;
  }

  .l-flex--align-content-space-evenly--xxl {
    align-content: space-evenly;
  }

  .l-flex--align-content-stretch--xxl {
    align-content: start;
  }

  .l-flex--align-content-start--xxl {
    align-content: start;
  }

  .l-flex--align-content-end--xxl {
    align-content: end;
  }

  .l-flex--align-content-baseline--xxl {
    align-content: baseline;
  }

  .l-flex--align-content-first-baseline--xxl {
    align-content: first baseline;
  }

  .l-flex--align-content-last-baseline--xxl {
    align-content: last baseline;
  }

  /*******************************************
    Align Self
  *******************************************/
  .l-flex--align-self-auto--xxl {
    align-self: auto;
  }

  .l-flex--align-self-flex-start--xxl {
    align-self: flex-start;
  }

  .l-flex--align-self-flex-end--xxl {
    align-self: flex-end;
  }

  .l-flex--align-self-center--xxl {
    align-self: center;
  }

  .l-flex--align-self-baseline--xxl {
    align-self: baseline;
  }

  .l-flex--align-self-stretch--xxl {
    align-self: stretch;
  }
}

/*******************************************
  Wrap row: fixed column count (CSS vars on parent)
*******************************************/
/**
 * Use on each flex child when the parent is `l-flex l-flex--direction-row l-flex--wrap`
 * with `gap` equal to `--l-flex-wrap-col-gap`.
 *
 * Set these **unitless** counts and one **length** gap on the flex parent (inline style or CSS):
 * - `--l-flex-wrap-cols-mobile`, `--l-flex-wrap-cols-tablet`, `--l-flex-wrap-cols-desktop`
 * - `--l-flex-wrap-col-gap` (e.g. `60px`)
 *
 * `flex-basis` + `max-width` match so at most N items fit per row (small assets cannot pack extra columns).
 */
.l-flex__child--wrap-fixed-columns {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
  flex-basis: calc(
    (
        100% -
          (
            var(--l-flex-wrap-cols-mobile, 1) - 1
          ) *
          var(--l-flex-wrap-col-gap, 0px)
      ) / var(--l-flex-wrap-cols-mobile, 1)
  );
  max-width: calc(
    (
        100% -
          (
            var(--l-flex-wrap-cols-mobile, 1) - 1
          ) *
          var(--l-flex-wrap-col-gap, 0px)
      ) / var(--l-flex-wrap-cols-mobile, 1)
  );
}

@media (min-width: 768px) {
  .l-flex__child--wrap-fixed-columns {
    flex-basis: calc(
      (
          100% -
            (
              var(--l-flex-wrap-cols-tablet, 1) - 1
            ) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-tablet, 1)
    );
    max-width: calc(
      (
          100% -
            (
              var(--l-flex-wrap-cols-tablet, 1) - 1
            ) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-tablet, 1)
    );
  }
}

@media (min-width: 992px) {
  .l-flex__child--wrap-fixed-columns {
    flex-basis: calc(
      (
          100% -
            (
              var(--l-flex-wrap-cols-desktop, 1) - 1
            ) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-desktop, 1)
    );
    max-width: calc(
      (
          100% -
            (
              var(--l-flex-wrap-cols-desktop, 1) - 1
            ) *
            var(--l-flex-wrap-col-gap, 0px)
        ) / var(--l-flex-wrap-cols-desktop, 1)
    );
  }
}
.body-wrapper {}

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
}

.row-fluid:after {
    clear: both;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.127659574%;
    *margin-left: 2.0744680846382977%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid .span12 {
    width: 99.99999998999999%;
    *width: 99.94680850063828%;
}

.row-fluid .span11 {
    width: 91.489361693%;
    *width: 91.4361702036383%;
}

.row-fluid .span10 {
    width: 82.97872339599999%;
    *width: 82.92553190663828%;
}

.row-fluid .span9 {
    width: 74.468085099%;
    *width: 74.4148936096383%;
}

.row-fluid .span8 {
    width: 65.95744680199999%;
    *width: 65.90425531263828%;
}

.row-fluid .span7 {
    width: 57.446808505%;
    *width: 57.3936170156383%;
}

.row-fluid .span6 {
    width: 48.93617020799999%;
    *width: 48.88297871863829%;
}

.row-fluid .span5 {
    width: 40.425531911%;
    *width: 40.3723404216383%;
}

.row-fluid .span4 {
    width: 31.914893614%;
    *width: 31.8617021246383%;
}

.row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.3510638276383%;
}

.row-fluid .span2 {
    width: 14.89361702%;
    *width: 14.8404255306383%;
}

.row-fluid .span1 {
    width: 6.382978723%;
    *width: 6.329787233638298%;
}

.container-fluid {
    *zoom: 1;
}

.container-fluid:before, .container-fluid:after {
    display: table;
    content: "";
}

.container-fluid:after {
    clear: both;
}

@media (max-width: 767px) {
    .row-fluid {
        width: 100%;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: auto;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.762430939%;
        *margin-left: 2.709239449638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 99.999999993%;
        *width: 99.9468085036383%;
    }

    .row-fluid .span11 {
        width: 91.436464082%;
        *width: 91.38327259263829%;
    }

    .row-fluid .span10 {
        width: 82.87292817100001%;
        *width: 82.8197366816383%;
    }

    .row-fluid .span9 {
        width: 74.30939226%;
        *width: 74.25620077063829%;
    }

    .row-fluid .span8 {
        width: 65.74585634900001%;
        *width: 65.6926648596383%;
    }

    .row-fluid .span7 {
        width: 57.182320438000005%;
        *width: 57.129128948638304%;
    }

    .row-fluid .span6 {
        width: 48.618784527%;
        *width: 48.5655930376383%;
    }

    .row-fluid .span5 {
        width: 40.055248616%;
        *width: 40.0020571266383%;
    }

    .row-fluid .span4 {
        width: 31.491712705%;
        *width: 31.4385212156383%;
    }

    .row-fluid .span3 {
        width: 22.928176794%;
        *width: 22.874985304638297%;
    }

    .row-fluid .span2 {
        width: 14.364640883%;
        *width: 14.311449393638298%;
    }

    .row-fluid .span1 {
        width: 5.801104972%;
        *width: 5.747913482638298%;
    }
}

@media (min-width: 1200px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.564102564%;
        *margin-left: 2.510911074638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 100%;
        *width: 99.94680851063829%;
    }

    .row-fluid .span11 {
        width: 91.45299145300001%;
        *width: 91.3997999636383%;
    }

    .row-fluid .span10 {
        width: 82.905982906%;
        *width: 82.8527914166383%;
    }

    .row-fluid .span9 {
        width: 74.358974359%;
        *width: 74.30578286963829%;
    }

    .row-fluid .span8 {
        width: 65.81196581200001%;
        *width: 65.7587743226383%;
    }

    .row-fluid .span7 {
        width: 57.264957265%;
        *width: 57.2117657756383%;
    }

    .row-fluid .span6 {
        width: 48.717948718%;
        *width: 48.6647572286383%;
    }

    .row-fluid .span5 {
        width: 40.170940171000005%;
        *width: 40.117748681638304%;
    }

    .row-fluid .span4 {
        width: 31.623931624%;
        *width: 31.5707401346383%;
    }

    .row-fluid .span3 {
        width: 23.076923077%;
        *width: 23.0237315876383%;
    }

    .row-fluid .span2 {
        width: 14.529914530000001%;
        *width: 14.4767230406383%;
    }

    .row-fluid .span1 {
        width: 5.982905983%;
        *width: 5.929714493638298%;
    }
}

/* Clearfix */

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
}

.hidden {
    display: none;
    visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-phone {
        display: inherit !important;
    }

    .hidden-phone {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .visible-tablet {
        display: inherit !important;
    }

    .hidden-tablet {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important ;
    }
}


/* NEW STYLES IN NEW FORMAT */
.l-position-relative {
    position: relative;
}

.l-full-height-section {
    min-height: calc(100vh - var(--header-height-mobile));
}

@media (min-width: 768px) {
    .l-full-height-section {
        min-height: calc(100vh - var(--header-height-tablet));
    }
}

@media (min-width: 1200px) {
    .l-full-height-section {
        min-height: calc(100vh - var(--header-height-desktop));
    }
}

@media (max-width: 767px) {
  .reverse-row-order > .row-fluid {
    display: flex;
    flex-direction: row-reverse !important;
  }
  
  .stack > .row-fluid {
    align-items: flex-start !important;
    flex-direction: column !important;
    flex-wrap: wrap; 
  }

  .stack > .row-fluid [class*="span"] {
    width: 100% !important;
  }

  .stack > .row-fluid .dnd-column {
    margin: 1em 0 !important;
    width: 100% !important;
  }

  .stack > .row-fluid .dnd-column:last-child {
    margin: 0 !important;
  }

  .no-stack .row-fluid {
    display: flex !important;
    align-items: center !important;
  }

  .reverse-row-order.stack > .row-fluid .dnd-column:first-child {
    margin: 0 !important;
  }
  
  .reverse-row-order.stack > .row-fluid {
    align-items: flex-start !important;
    display: flex;
    flex-direction: column-reverse !important;
  }

}

.hs-web-interactives-top-banner-open #hs-web-interactives-top-push-anchor {
  margin-bottom: -5px;
}

/*  Tools
    Any animations, or functions used throughout the theme
    Note: _macros.hubl.css needs to be imported into each stylesheet where macros are used and not included here
    Note: _variables.hubl.css can be ignored, it's already included at the top of this file
*/
/**
 * Accessibility Helper Classes
 * 
 * Reusable accessibility utility classes for use across the theme.
 * These classes follow the h- (helper) namespace convention.
 */

/* Visually hidden helper class for screen reader only text */
/* Hides content visually but keeps it accessible to screen readers */
.h-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* 
  Animation Styles 
*/
.reveal {
  opacity: 0;
}

.reveal {
  animation-fill-mode: forwards !important;
  opacity: 0;
  visibility: hidden;
  -webkit-animation-fill-mode: forwards !important;
}

:-webkit-full-screen-ancestor .reveal {
  animation-fill-mode: none !important;
}

.fade-in {
  animation: 1s ease fadeIn;
}

.fade-up {
  animation: 1s ease fadeUp;
}

.fade-down {
  animation: 1s ease fadeDown;
}

.fade-right {
  animation: 1s ease fadeRight;
}

.fade-left {
  animation: 1s ease fadeLeft;
}

.expand-left {
  animation: 1s ease expandLeft;
}

.expand-right {
  animation: 1s ease expandRight;
}

.bubble-up {
  animation: 1s ease bubbleUp;
}

.bubble-down {
  animation: 1s ease bubbleDown;
}

.bubble-left {
  animation: 1s ease bubbleLeft;
}

.bubble-right {
  animation: 1s ease bubbleRight;
}

.zoom-in {
  animation: 1s ease zoomIn;
}

.zoom-out {
  animation: 1s ease zoomOut;
}

/* 
  Keyframes 
*/

/* Fade In */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade Up */
@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Fade Down */
@-webkit-keyframes fadeDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Fade Right */
@-webkit-keyframes fadeRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Fade Left */
@-webkit-keyframes fadeLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Expand Left */
@-webkit-keyframes expandLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2,1);
    transform: scale(.2,1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}
@keyframes expandLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2,1);
    transform: scale(.2,1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

/* Expand Right */
@-webkit-keyframes expandRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2,1);
    transform: scale(.2,1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}
@keyframes expandRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2,1);
    transform: scale(.2,1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

/* Bubble Up */
@-webkit-keyframes bubbleUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateY(10px);
    transform: scale(.2, .2) translateY(10px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateY(-5px);
    transform: scale(1.2, 1.2) translateY(-5px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}
@keyframes bubbleUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateY(10px);
    transform: scale(.2, .2) translateY(10px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateY(-5px);
    transform: scale(1.2, 1.2) translateY(-5px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

/* Bubble Down */
@-webkit-keyframes bubbleDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateY(-10px);
    transform: scale(.2, .2) translateY(-10px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateY(5px);
    transform: scale(1.2, 1.2) translateY(5px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
}
@keyframes bubbleDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateY(-10px);
    transform: scale(.2, .2) translateY(-10px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateY(5px);
    transform: scale(1.2, 1.2) translateY(5px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
}

/* Bubble Left */
@-webkit-keyframes bubbleLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateX(10px);
    transform: scale(.2, .2) translateX(10px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateX(-5px);
    transform: scale(1.2, 1.2) translateX(-5px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes bubbleLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateX(10px);
    transform: scale(.2, .2) translateX(10px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateX(-5px);
    transform: scale(1.2, 1.2) translateX(-5px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

/* Bubble Right */
@-webkit-keyframes bubbleRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateX(-10px);
    transform: scale(.2, .2) translateX(-10px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateX(5px);
    transform: scale(1.2, 1.2) translateX(5px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes bubbleRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.2, .2) translateX(-10px);
    transform: scale(.2, .2) translateX(-10px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  60% {
    -webkit-transform: scale(1.2, 1.2) translateX(5px);
    transform: scale(1.2, 1.2) translateX(5px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1) translateY(0);
    transform: scale(1,1) translateY(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

/* Zoom In */
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

/* Zoom Out */
@-webkit-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
  }
}
@keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
  }
}
.s-text-align--left {
  text-align: left;
}

.s-text-align--center {
  text-align: center;
}

.s-text-align--right {
  text-align: right;
}

.s-padding--bottom-0 {
  padding-bottom: 0;
}

.s-padding--top-0 {
  padding-top: 0;
}

.dnd-section:has(.s-remove-section-padding--top-bottom) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}