/* Theme base styles */

/* Build marker. HubSpot does not always recompile this file when an included
   partial changes, so bump this after editing anything under css/ to force a
   rebuild of the generated template_main.min.css. */
/* build: 63 */

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

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

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

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

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

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

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

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

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

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

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

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

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

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

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

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/* build: 2 — bump to force HubSpot to recompile this partial into main.css */
/* ==========================================================================
   Type scale

   The Figma type tokens, one definition per step. Modules reference these
   variables instead of restating pixel values, so changing a step here changes
   it everywhere it is used.

   Each step is a pair: --dm-text-* is the size, --dm-lh-* the line height.
   Tracking and weight differ between the plain and emphasised cuts, so those
   live on the .dm-type-* classes rather than in variables.

   Figma name          class
   ------------------  ---------------------------
   Display Large       .dm-type-display-l / -em
   Display Medium      .dm-type-display-m / -em
   Display Small       .dm-type-display-s / -em
   Headline Large      .dm-type-heading-l / -em
   Headline Medium     .dm-type-heading-m / -em
   Headline Small      .dm-type-heading-s / -em
   Title Large         .dm-type-title-l / -em
   Title Medium        .dm-type-title-m / -em
   Title Small         .dm-type-title-s / -em
   Body Large          .dm-type-body-l / -em
   Body Medium         .dm-type-body-m / -em
   Body Small          .dm-type-body-s / -em
   Label Large         .dm-type-label-l / -em   (DM Mono)
   Label Medium        .dm-type-label-m / -em   (DM Mono)
   Label Small         .dm-type-label-s / -em   (DM Mono)
   ========================================================================== */

:root {
  /* Display */
  --dm-text-display-l: 57px;  --dm-lh-display-l: 64px;
  --dm-text-display-m: 45px;  --dm-lh-display-m: 52px;
  --dm-text-display-s: 36px;  --dm-lh-display-s: 44px;

  /* Headline */
  --dm-text-heading-l: 32px;  --dm-lh-heading-l: 40px;
  --dm-text-heading-m: 28px;  --dm-lh-heading-m: 36px;
  --dm-text-heading-s: 24px;  --dm-lh-heading-s: 32px;

  /* Title */
  --dm-text-title-l: 22px;    --dm-lh-title-l: 28px;
  --dm-text-title-m: 16px;    --dm-lh-title-m: 24px;
  --dm-text-title-s: 14px;    --dm-lh-title-s: 20px;

  /* Body */
  --dm-text-body-l: 16px;     --dm-lh-body-l: 24px;
  --dm-text-body-m: 14px;     --dm-lh-body-m: 20px;
  --dm-text-body-s: 12px;     --dm-lh-body-s: 16px;

  /* Label — DM Mono */
  --dm-text-label-l: 14px;    --dm-lh-label-l: 20px;
  --dm-text-label-m: 12px;    --dm-lh-label-m: 16px;
  --dm-text-label-s: 11px;    --dm-lh-label-s: 16px;

  /* Figure — the oversized numerals used for headline statistics. Sits above
     the Display steps and is not part of the Figma text scale, because it is
     only ever used for numbers, never running text. */
  --dm-text-figure: 120px;    --dm-lh-figure: 1;
}

/* The Figma values are desktop. Redefining the larger steps here scales every
   heading in the theme at once, rather than each module carrying its own
   clamp() or breakpoint override. Title, body and label sizes are already
   small enough to leave alone. */

/* The figure step drops in two stages — 120px to 56px in one jump leaves it
   awkwardly large on tablets. */

@media (max-width: 1100px) {
  :root {
    --dm-text-figure: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --dm-text-display-l: 36px;  --dm-lh-display-l: 42px;
    --dm-text-display-m: 32px;  --dm-lh-display-m: 38px;
    --dm-text-display-s: 28px;  --dm-lh-display-s: 34px;

    --dm-text-heading-l: 22px;  --dm-lh-heading-l: 28px;
    --dm-text-heading-m: 20px;  --dm-lh-heading-m: 26px;
    --dm-text-heading-s: 20px;  --dm-lh-heading-s: 26px;

    --dm-text-figure: 56px;
  }
}

/* --------------------------------------------------------------------------
   Classes
   -------------------------------------------------------------------------- */

[class*="dm-type-"] {
  font-family: var(--dm-font-sans, sans-serif);
}

[class*="dm-type-label"] {
  font-family: var(--dm-font-mono, monospace);
  text-transform: uppercase;
}

/* Figure — headline numerals. Tracking is in em so it stays proportional as
   the size steps down. */

.dm-type-figure {
  font-size: var(--dm-text-figure);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: var(--dm-lh-figure);
}

/* Display */

.dm-type-display-l    { font-size: var(--dm-text-display-l); line-height: var(--dm-lh-display-l); font-weight: 400; letter-spacing: -2px; }
.dm-type-display-l-em { font-size: var(--dm-text-display-l); line-height: var(--dm-lh-display-l); font-weight: 600; letter-spacing: -1px; }
.dm-type-display-m    { font-size: var(--dm-text-display-m); line-height: var(--dm-lh-display-m); font-weight: 400; letter-spacing: 0; }
.dm-type-display-m-em { font-size: var(--dm-text-display-m); line-height: var(--dm-lh-display-m); font-weight: 600; letter-spacing: -1px; }
.dm-type-display-s    { font-size: var(--dm-text-display-s); line-height: var(--dm-lh-display-s); font-weight: 400; letter-spacing: 0; }
.dm-type-display-s-em { font-size: var(--dm-text-display-s); line-height: var(--dm-lh-display-s); font-weight: 600; letter-spacing: -0.5px; }

/* Headline */

.dm-type-heading-l    { font-size: var(--dm-text-heading-l); line-height: var(--dm-lh-heading-l); font-weight: 400; letter-spacing: 0; }
.dm-type-heading-l-em { font-size: var(--dm-text-heading-l); line-height: var(--dm-lh-heading-l); font-weight: 600; letter-spacing: -0.5px; }
.dm-type-heading-m    { font-size: var(--dm-text-heading-m); line-height: var(--dm-lh-heading-m); font-weight: 400; letter-spacing: 0; }
.dm-type-heading-m-em { font-size: var(--dm-text-heading-m); line-height: var(--dm-lh-heading-m); font-weight: 600; letter-spacing: -0.5px; }
.dm-type-heading-s    { font-size: var(--dm-text-heading-s); line-height: var(--dm-lh-heading-s); font-weight: 400; letter-spacing: 0; }
.dm-type-heading-s-em { font-size: var(--dm-text-heading-s); line-height: var(--dm-lh-heading-s); font-weight: 500; letter-spacing: 0; }

/* Title */

.dm-type-title-l    { font-size: var(--dm-text-title-l); line-height: var(--dm-lh-title-l); font-weight: 400; letter-spacing: 0; }
.dm-type-title-l-em { font-size: var(--dm-text-title-l); line-height: var(--dm-lh-title-l); font-weight: 500; letter-spacing: 0; }
.dm-type-title-m    { font-size: var(--dm-text-title-m); line-height: var(--dm-lh-title-m); font-weight: 500; letter-spacing: 0.15px; }
.dm-type-title-m-em { font-size: var(--dm-text-title-m); line-height: var(--dm-lh-title-m); font-weight: 600; letter-spacing: 0; }
.dm-type-title-s    { font-size: var(--dm-text-title-s); line-height: var(--dm-lh-title-s); font-weight: 500; letter-spacing: 0.1px; }
.dm-type-title-s-em { font-size: var(--dm-text-title-s); line-height: var(--dm-lh-title-s); font-weight: 600; letter-spacing: 0; }

/* Body */

.dm-type-body-l    { font-size: var(--dm-text-body-l); line-height: var(--dm-lh-body-l); font-weight: 400; letter-spacing: 0.5px; }
.dm-type-body-l-em { font-size: var(--dm-text-body-l); line-height: var(--dm-lh-body-l); font-weight: 700; letter-spacing: -0.5px; }
.dm-type-body-m    { font-size: var(--dm-text-body-m); line-height: var(--dm-lh-body-m); font-weight: 400; letter-spacing: 0.25px; }
.dm-type-body-m-em { font-size: var(--dm-text-body-m); line-height: var(--dm-lh-body-m); font-weight: 700; letter-spacing: -0.5px; }
.dm-type-body-s    { font-size: var(--dm-text-body-s); line-height: var(--dm-lh-body-s); font-weight: 400; letter-spacing: 0.4px; }
.dm-type-body-s-em { font-size: var(--dm-text-body-s); line-height: var(--dm-lh-body-s); font-weight: 500; letter-spacing: 0.4px; }

/* Label — DM Mono */

.dm-type-label-l    { font-size: var(--dm-text-label-l); line-height: var(--dm-lh-label-l); font-weight: 400; letter-spacing: 1px; }
.dm-type-label-l-em { font-size: var(--dm-text-label-l); line-height: var(--dm-lh-label-l); font-weight: 500; letter-spacing: 1px; }
.dm-type-label-m    { font-size: var(--dm-text-label-m); line-height: var(--dm-lh-label-m); font-weight: 400; letter-spacing: 1px; }
.dm-type-label-m-em { font-size: var(--dm-text-label-m); line-height: var(--dm-lh-label-m); font-weight: 500; letter-spacing: 1px; }
.dm-type-label-s    { font-size: var(--dm-text-label-s); line-height: var(--dm-lh-label-s); font-weight: 400; letter-spacing: 1px; }
.dm-type-label-s-em { font-size: var(--dm-text-label-s); line-height: var(--dm-lh-label-s); font-weight: 500; letter-spacing: 1px; }
/* build: 16 — bump to force HubSpot to recompile this partial into main.css */
/* ==========================================================================
   Section foundation
   Layout rhythm, container widths, and color schemes shared by every module.

   Brand tokens (--dm-blue-100 etc.) are defined in theme-overrides.css from
   theme fields. Every var() here carries a hardcoded fallback so this file
   still renders correctly on its own.
   ========================================================================== */

:root {
  /* Spacing scale */
  --dm-space-3xs: 4px;
  --dm-space-2xs: 8px;
  --dm-space-xs: 12px;
  --dm-space-sm: 16px;
  --dm-space-md: 24px;
  --dm-space-lg: 32px;
  --dm-space-xl: 48px;
  --dm-space-2xl: 64px;
  --dm-space-3xl: 96px;
  --dm-space-4xl: 128px;

  /* Section rhythm — overridable per section instance */
  --dm-section-padding-block: var(--dm-space-3xl);

  /* Measures: how wide text is allowed to run */
  --dm-measure-heading: 44rem;
  --dm-measure-text: 40rem;

  /* Frosted surface shared by the desktop dropdown and the mobile menu overlay,
     so the two cannot drift apart. */
  --dm-glass-bg: rgba(255, 255, 255, 0.7);
  --dm-glass-blur: blur(18px) saturate(140%);
}

@media (max-width: 767px) {
  :root {
    --dm-section-padding-block: var(--dm-space-2xl);
  }
}

/* --------------------------------------------------------------------------
   Drag-and-drop reset

   HubSpot wraps every dnd_section in padding and clamps its row to the content
   width. Our sections manage their own padding and need full-bleed
   backgrounds, so both are removed wherever a .dm-section is inside.
   -------------------------------------------------------------------------- */

.dnd-section:has(.dm-section) {
  padding: 0;
}

.dnd-section:has(.dm-section) > .row-fluid {
  max-width: none;
}

.dnd-section:has(.dm-section) .dnd-column {
  padding: 0;
}



.body-wrapper:not(:has(.dm-hero)) .body-container-wrapper {
  padding-top: var(--dm-header-height, 72px);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.dm-section {
  background-color: var(--dm-bg);
  color: var(--dm-text);
  overflow: hidden;
  padding-block: var(--dm-section-padding-block);
  position: relative;
}

/* Eye Echo pattern art, toggled per section. Vector, so it stays crisp at any
   size — the size/position controls scale it freely. Swapped by changing the
   three custom properties in theme-overrides.css. */



.dm-has-pattern::before {
  background-position: var(--dm-pattern-x, right) var(--dm-pattern-y, 50%);
  background-repeat: no-repeat;
  background-size: var(--dm-pattern-size, auto 140%);
  content: "";
  inset: 0;
  opacity: var(--dm-pattern-opacity, 0.55);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Size — height-relative so the artwork keeps its aspect ratio and overflows
   horizontally, except "cover" which fills the section. */

.dm-pattern-size--sm    { --dm-pattern-size: auto 100%; }
.dm-pattern-size--md    { --dm-pattern-size: auto 140%; }
.dm-pattern-size--lg    { --dm-pattern-size: auto 200%; }
.dm-pattern-size--xl    { --dm-pattern-size: auto 300%; }
.dm-pattern-size--cover { --dm-pattern-size: cover; }

/* Smaller on phones, because these sizes are a percentage OF THE SECTION and a
   stacked section is very tall - a zig-zag runs past 4000px there, so Large was
   asking for an 8000px raster of a masked, gradient-filled SVG. Held above 100%
   so the artwork still covers and the drift still has slack to move within;
   dropping below it would make the artwork shorter than its box, which inverts
   the geometry and sends the motif travelling the section's whole height.

   Cover is deliberately left alone: it drifts by translating a composited
   layer rather than repainting a background position, so it is not what costs
   anything here. */

@media (max-width: 767px) {
  .dm-pattern-size--md { --dm-pattern-size: auto 110%; }
  .dm-pattern-size--lg { --dm-pattern-size: auto 125%; }
  .dm-pattern-size--xl { --dm-pattern-size: auto 150%; }
}

/* Position — X and Y are held as separate properties rather than one shorthand,
   because the drift below animates background-position-y and so has to be able
   to read the chosen Y instead of simply replacing it.

   Y also carries a matching shift for the drift's timeline. The pan spends the
   whole of the slack the oversizing provides, so there is nothing left over to
   offset the artwork with; the offset is taken out of the timeline instead. The
   shift is Y - 50%, which is what lines the chosen Y up with the section's
   mid-pass across the viewport - see animation-range further down. */

.dm-pattern-pos--right        { --dm-pattern-x: right;  --dm-pattern-y: 50%;  --dm-pattern-range-shift: 0%; }
.dm-pattern-pos--right-top    { --dm-pattern-x: right;  --dm-pattern-y: 0%;   --dm-pattern-range-shift: -50%; }
.dm-pattern-pos--right-bottom { --dm-pattern-x: right;  --dm-pattern-y: 100%; --dm-pattern-range-shift: 50%; }
.dm-pattern-pos--center       { --dm-pattern-x: center; --dm-pattern-y: 50%;  --dm-pattern-range-shift: 0%; }
.dm-pattern-pos--left         { --dm-pattern-x: left;   --dm-pattern-y: 50%;  --dm-pattern-range-shift: 0%; }
.dm-pattern-pos--left-top     { --dm-pattern-x: left;   --dm-pattern-y: 0%;   --dm-pattern-range-shift: -50%; }
.dm-pattern-pos--left-bottom  { --dm-pattern-x: left;   --dm-pattern-y: 100%; --dm-pattern-range-shift: 50%; }

/* Intensity */

.dm-pattern-op--subtle { --dm-pattern-opacity: 0.25; }
.dm-pattern-op--medium { --dm-pattern-opacity: 0.55; }
.dm-pattern-op--strong { --dm-pattern-opacity: 0.8; }
.dm-pattern-op--full   { --dm-pattern-opacity: 1; }



.dm-scheme--blue.dm-has-pattern::before {
  background-image: var(--dm-pattern-blue);
}

.dm-scheme--dark.dm-has-pattern::before {
  background-image: var(--dm-pattern-dark);
}

.dm-scheme--white.dm-has-pattern::before,
.dm-scheme--light.dm-has-pattern::before {
  background-image: var(--dm-pattern-light);
}

/* Pattern type — swaps the artwork, nothing else. Size, position, intensity and
   the drift all keep working, because the weave layers over the scheme's own
   background exactly as the eye echo does. */

.dm-scheme--blue.dm-pattern-type--weave.dm-has-pattern::before {
  background-image: var(--dm-pattern-weave-blue);
}

.dm-scheme--dark.dm-pattern-type--weave.dm-has-pattern::before {
  background-image: var(--dm-pattern-weave-dark);
}

.dm-scheme--white.dm-pattern-type--weave.dm-has-pattern::before,
.dm-scheme--light.dm-pattern-type--weave.dm-has-pattern::before {
  background-image: var(--dm-pattern-weave-light);
}

/* ---------------------------------------------------------------------------
   Parallax

   The pattern layer drifts against the page as its section scrolls through the
   viewport. Driven by a scroll-driven animation rather than a scroll listener,
   so it runs off the main thread and costs nothing in JavaScript.

   Only the decorative layer moves. Parallaxing the content itself would shift
   text while it is being read and make section heights unpredictable.

   The pattern is panned via background-position rather than by translating the
   layer. Translating it cannot work here: the artwork is sized as a percentage
   of the layer box (auto 200%), so growing the box to make room for travel
   scales the image by the same factor and the movement stays a fixed, tiny
   fraction of what is on screen no matter how large the travel is set.

   Panning the position is decoupled from box size. The image is already taller
   than its box, so 0%-100% sweeps exactly the slack that oversizing provides -
   a full section height of movement at auto 200%, less at smaller sizes, and
   never an exposed edge at any size. It runs from 100% to 0% so the pattern
   lags the page as it scrolls, which is what reads as depth.

   Wrapped in @supports because scroll-driven animations are Chromium-first;
   elsewhere the pattern simply sits still, which is the current behaviour.
   --------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dm-has-pattern {
      view-timeline-axis: block;
      view-timeline-name: --dm-section-view;
    }

    .dm-has-pattern::before {
      animation: dm-pattern-drift linear both;

      /* The range is a fixed 100% long and slides along the timeline by the
         Y shift, so the pan itself keeps its full strength and it is only the
         moment it passes each position that moves. At a shift of 0 the artwork
         sits mid-slack when the section is mid-viewport; at -50% it has already
         reached the top by then, at +50% it is still at the bottom. Fill both
         clamps outside the range, so no edge is ever exposed. */

      animation-range:
        cover var(--dm-pattern-range-shift, 0%)
        cover calc(var(--dm-pattern-range-shift, 0%) + 100%);
      animation-timeline: --dm-section-view;
    }

    /* Only the Y component is animated, so the left/center/right alignment set
       by the .dm-pattern-pos-- classes is preserved. */

    @keyframes dm-pattern-drift {
      from { background-position-y: 100%; }
      to   { background-position-y: 0%; }
    }

    /* Cover needs a different mechanism, because panning the position has
       nothing to pan. `cover` scales the artwork to fill the box and leaves its
       excess on ONE axis - and for every section shape the site actually uses,
       that axis is the horizontal one. Vertical slack is exactly zero, so
       background-position-y moves nothing.

       So instead of moving the image inside a fixed layer, the layer itself is
       grown past the section on both edges and slid. Its size is unaffected:
       `cover` is anchored to the box, and translating a box does not resize it -
       which is the trap the percentage sizes fall into, where growing the box
       scales the artwork by the same factor and the travel cancels out. The
       section's own overflow: hidden does the clipping, and the travel is a
       length rather than a percentage so it can never exceed the room made for
       it. Being a transform, it also composites rather than repainting. */

    .dm-pattern-size--cover.dm-has-pattern::before {
      animation-name: dm-pattern-drift-cover;
      height: calc(100% + var(--dm-pattern-travel, 64px) * 2);
      top: calc(var(--dm-pattern-travel, 64px) * -1);
    }

    @keyframes dm-pattern-drift-cover {
      from { translate: 0 calc(var(--dm-pattern-travel, 64px) * -1); }
      to   { translate: 0 var(--dm-pattern-travel, 64px); }
    }
  }
}

/* --------------------------------------------------------------------------
   Cookie banner

   HubSpot's consent banner is styled entirely through custom properties: its
   own stylesheet only ever READS them, as var(--hs-banner-*, fallback), and
   never sets them. So the theme simply defines them and they cascade in — no
   overriding, no !important, and no dependence on where HubSpot injects its
   stylesheet. It renders in the light DOM, so nothing is walled off.

   Left alone deliberately: position (--hs-banner-inset), width and the close
   button, which are HubSpot's own layout decisions and are set from the console.
   These are colour, type and shape only.

   Values are the theme's tokens rather than literals, so the banner follows the
   palette if it ever moves. It is outside .dm-section, so the scheme variables
   do not reach it — the brand tokens from theme-overrides.css do.
   -------------------------------------------------------------------------- */

:root {
  --hs-banner-font-family: var(--dm-font-sans, sans-serif);
  --hs-banner-font-size: var(--dm-text-body-l, 16px);
  --hs-banner-color: var(--dm-glass-bg);
  --hs-banner-text-color: var(--dm-dark-100, #0A1D33);
  --hs-banner-corners: 16px;
  --hs-banner-padding: var(--dm-space-lg, 32px);

  /* Buttons take the pill and the palette of .dm-button: accept is the primary,
     decline is the quiet outline beside it. */

  --hs-banner-button-corners: 999px;
  --hs-banner-accept-color: var(--dm-blue-100, #003EFF);
  --hs-banner-accept-border-color: var(--dm-blue-100, #003EFF);
  --hs-banner-accept-text-color: var(--dm-white, #FFFFFF);
  --hs-banner-decline-color: var(--dm-white, #FFFFFF);
  --hs-banner-decline-border-color: var(--dm-grey-40, #CDD2DF);
  --hs-banner-decline-text-color: var(--dm-dark-100, #0A1D33);
  --hs-banner-settings-text-color: var(--dm-blue-100, #003EFF);

  /* The settings modal, same vocabulary again. */

  --hs-banner-modal-color: var(--dm-white, #FFFFFF);
  --hs-banner-modal-text-color: var(--dm-dark-100, #0A1D33);
  --hs-banner-modal-font-size: var(--dm-text-body-l, 16px);
  --hs-banner-modal-corners: 16px;
  --hs-banner-modal-padding: var(--dm-space-lg, 32px);
  --hs-banner-modal-button-corners: 999px;
  --hs-banner-modal-cateogry-color: var(--dm-grey-10, #F2F4F7);
  --hs-banner-modal-category-corners: 12px;
  --hs-banner-modal-category-text-color: var(--dm-dark-100, #0A1D33);
  --hs-banner-modal-accept-color: var(--dm-blue-100, #003EFF);
  --hs-banner-modal-accept-border-color: var(--dm-blue-100, #003EFF);
  --hs-banner-modal-accept-text-color: var(--dm-white, #FFFFFF);
  --hs-banner-modal-save-color: var(--dm-blue-100, #003EFF);
  --hs-banner-modal-save-border-color: var(--dm-blue-100, #003EFF);
  --hs-banner-modal-save-text-color: var(--dm-white, #FFFFFF);
  --hs-banner-modal-decline-text-color: var(--dm-dark-100, #0A1D33);
  --hs-banner-modal-toggle-on-color: var(--dm-blue-100, #003EFF);
  --hs-banner-modal-toggle-off-color: var(--dm-grey-40, #CDD2DF);
}

/* The frosted surface, same tokens as the header dropdown and the mobile menu.

   The tint arrives through --hs-banner-color above, which is the property
   HubSpot's own `background` reads. The blur cannot: there is no custom property
   for it, so it is declared outright — safe, because HubSpot never sets
   backdrop-filter and nothing is being overridden.

   The shadow IS one it sets, to 0 8px 28px rgba(0,0,0,.28) — too heavy under
   glass. Its own selector is two ids deep, so this has to be two ids plus the
   element to outrank it. The value is the header dropdown's, so the site's two
   floating panels match.

   Both banner elements are covered: HubSpot renders #hs-banner-gpc instead of
   the usual one for visitors sending a Global Privacy Control signal, which
   this portal has switched on. Styling only the first would leave those
   visitors with the unthemed panel.

   Without backdrop-filter the tint alone would leave the page legible straight
   through a 70% white panel, so it falls back to solid — the same guard the
   header uses. */

html #hs-banner-parent #hs-eu-cookie-confirmation,
html #hs-banner-parent #hs-banner-gpc {
  -webkit-backdrop-filter: var(--dm-glass-blur);
  backdrop-filter: var(--dm-glass-blur);
  box-shadow: 0 12px 32px rgba(10, 29, 51, 0.14);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --hs-banner-color: var(--dm-white, #FFFFFF);
  }
}

/* Padding modifiers, set from the module's spacing field */

.dm-section--pad-none  { --dm-section-padding-block: 0; }
.dm-section--pad-sm    { --dm-section-padding-block: var(--dm-space-xl); }
.dm-section--pad-md    { --dm-section-padding-block: var(--dm-space-3xl); }
.dm-section--pad-lg    { --dm-section-padding-block: var(--dm-space-4xl); }

.dm-section__inner {
  margin-inline: auto;
  max-width: var(--dm-container-max, 1240px);
  padding-inline: 1rem;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Color schemes
   One class sets background, text, headings, accents and borders together so
   contrast can't be broken by mixing arbitrary colors.
   -------------------------------------------------------------------------- */



.dm-scheme--white {
  --dm-bg: var(--dm-white, #FFFFFF);
  --dm-heading: var(--dm-blue-100, #003EFF);
  --dm-text: var(--dm-dark-80, #3B4A5C);
  --dm-text-muted: var(--dm-dark-80, #3B4A5C);
  --dm-accent: var(--dm-blue-100, #003EFF);
  --dm-border: var(--dm-grey-20, #E6E9EF);
  --dm-surface: var(--dm-grey-10, #F2F4F7);
}

.dm-scheme--light {
  --dm-bg: var(--dm-grey-10, #F2F4F7);
  --dm-heading: var(--dm-blue-100, #003EFF);
  --dm-text: var(--dm-dark-80, #3B4A5C);
  --dm-text-muted: var(--dm-dark-80, #3B4A5C);
  --dm-accent: var(--dm-blue-100, #003EFF);
  --dm-border: var(--dm-grey-40, #CDD2DF);
  --dm-surface: var(--dm-white, #FFFFFF);
}

.dm-scheme--blue {
  --dm-bg: var(--dm-blue-100, #003EFF);
  --dm-heading: var(--dm-white, #FFFFFF);
  --dm-text: var(--dm-white, #FFFFFF);
  
  --dm-text-muted: rgba(255, 255, 255, 0.78);
  --dm-accent: var(--dm-white, #FFFFFF);
  --dm-border: rgba(255, 255, 255, 0.25);
  --dm-surface: rgba(255, 255, 255, 0.1);
}

.dm-scheme--dark {
  --dm-bg: var(--dm-dark-100, #0A1D33);
  --dm-heading: var(--dm-white, #FFFFFF);
  --dm-text: var(--dm-white, #FFFFFF);
  --dm-text-muted: var(--dm-grey-60, #B3BCCF);
  --dm-accent: var(--dm-blue-60, #668BFF);
  --dm-border: rgba(255, 255, 255, 0.15);
  --dm-surface: rgba(255, 255, 255, 0.06);
}

/* Headings and links inherit from the active scheme */

.dm-section :is(h1, h2, h3, h4, h5, h6) {
  color: var(--dm-heading);
}



.dm-section :is(h1, h2, h3, h4, h5, h6, dt),
.dm-section-header__heading {
  text-wrap: balance;
}

.dm-section :is(p, li, dd, blockquote, figcaption) {
  text-wrap: pretty;
}

/* theme-overrides.css sets a colour on bare `p`, `li` etc. from the body font
   field. That beats inherited colour, so rich text rendered inside a blue or
   dark section came out dark-on-dark. Forcing inherit hands colour back to the
   scheme while leaving the font settings from that rule intact. */

.dm-section :is(p, li, td, th, blockquote, figcaption, strong, em) {
  color: inherit;
}

.dm-section a:not(.button):not(.dm-button) {
  color: var(--dm-accent);
}

/* --------------------------------------------------------------------------
   Section header — eyebrow + heading, repeated above most sections
   -------------------------------------------------------------------------- */

/* On the light schemes the eyebrow takes the heading's blue, not the muted
   grey. At the 0.8 below that composites to exactly Blue/80 (#3365FF), which is
   the muted blue these labels have always shown - they used to reach it by
   accident, inheriting --dm-text back when it was Blue/100, and only for the
   ones that happen to be a <p>. Two classes, so it applies to the <dt> and
   <span> eyebrows too and all of them finally match.

   Blue and dark schemes keep --dm-text-muted below: a muted white is right
   there, and the heading colour would be full white. */

.dm-scheme--white .dm-eyebrow,
.dm-scheme--light .dm-eyebrow {
  color: var(--dm-heading);
}

.dm-eyebrow {
  color: var(--dm-text-muted);

  

  opacity: 0.8;
  font-family: var(--dm-font-mono, "DM Mono", monospace);
  font-size: var(--dm-text-label-l);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: var(--dm-lh-label-l);
  margin: 0 0 var(--dm-space-md);
  text-transform: uppercase;
}

.dm-section-header {
  margin-bottom: var(--dm-space-2xl);
  max-width: var(--dm-measure-heading);
}



.dm-section-header__heading {
  font-size: var(--dm-text-display-l);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: var(--dm-lh-display-l);
  margin: 0;
}

.dm-section-header__text {
  color: var(--dm-text);
  margin: var(--dm-space-md) 0 0;
  max-width: var(--dm-measure-text);
}

/* --------------------------------------------------------------------------
   Buttons
   Pill buttons in three variants. Which one reads correctly depends on the
   section's scheme, so the variant is chosen per module instance.
   -------------------------------------------------------------------------- */

.dm-button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  font-family: var(--dm-font-sans, sans-serif);
  font-size: var(--dm-text-body-l);
  font-weight: 500;
  line-height: 1.2;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}



.dm-button {
  transition: background-color 0.2s ease;
}

.dm-section a.dm-button--primary:hover,
.dm-section a.dm-button--primary:focus {
  background-color: var(--dm-blue-80, #3365FF);
  color: var(--dm-white, #FFFFFF);
}

.dm-section a.dm-button--inverse:hover,
.dm-section a.dm-button--inverse:focus {
  background-color: var(--dm-grey-10, #F2F4F7);
  color: var(--dm-dark-100, #0A1D33);
}

.dm-section a.dm-button--contrast:hover,
.dm-section a.dm-button--contrast:focus {
  background-color: var(--dm-dark-80, #3B4A5C);
  color: var(--dm-white, #FFFFFF);
}

.dm-scheme--dark a.dm-button--contrast:hover,
.dm-scheme--dark a.dm-button--contrast:focus {
  background-color: var(--dm-dark-60, #6C7785);
}

.dm-button:hover,
.dm-button:focus {
  text-decoration: none;
}

.dm-section a.dm-button--primary {
  background-color: var(--dm-blue-100, #003EFF);
  color: var(--dm-white, #FFFFFF);
}



.dm-section a.dm-button--inverse {
  background-color: var(--dm-white, #FFFFFF);
  color: var(--dm-dark-100, #0A1D33);
}

.dm-section a.dm-button--contrast {
  background-color: var(--dm-dark-100, #0A1D33);
  color: var(--dm-white, #FFFFFF);
}



.dm-scheme--dark a.dm-button--contrast {
  background-color: var(--dm-dark-80, #3B4A5C);
}

/* --------------------------------------------------------------------------
   Icons
   Lucide symbols from templates/partials/icon-sprite.html. Stroke is
   currentColor, so colour comes from whatever the icon sits inside.
   -------------------------------------------------------------------------- */



.dm-icon {
  display: block;
  fill: none;
  flex: none;
  height: var(--dm-icon-size, 24px);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  width: var(--dm-icon-size, 24px);
}

.dm-icon--lg { --dm-icon-size: 32px; }
.dm-icon--sm { --dm-icon-size: 18px; }

/* --------------------------------------------------------------------------
   Shared helpers used across modules
   -------------------------------------------------------------------------- */

/* Strips a <button> back to plain content.

   theme-overrides.css styles every <button>, .button and .hs-button at (0,1,1) —
   higher than a lone class — across three rules: the base sets background,
   radius, border, padding and the theme's button font; `:hover` sets colour and
   background; `:active` re-applies the button font, which swaps DM Mono for DM
   Sans mid-press. Anything a module leaves undeclared falls through to those,
   so the reset has to name every property and every state. Getting this wrong
   produced a dark blob behind the header toggles, then behind the source link,
   then a font swap on press.

   Everything here resolves to `inherit`, so a button takes the typography and
   colour of whatever surrounds it. Where a button needs its own colour, set
   --dm-unbutton-color on it: a custom property is read at use time, so it wins
   without the component having to restate every state. */

.dm-unbutton,
.dm-unbutton:hover,
.dm-unbutton:focus,
.dm-unbutton:focus-visible,
.dm-unbutton:active {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--dm-unbutton-color, inherit);
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  text-transform: inherit;
}

.dm-unbutton {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Scroll reveal

   Items rise and fade as their section comes into view. The hidden state is
   applied by js/main.js, never by this stylesheet — a page whose script fails
   must not be left blank, and an element that is already on screen at load is
   left alone rather than animating under the reader.

   The transition sits on the revealed state so applying the hidden class does
   not animate anything; only the arrival does.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .dm-reveal {
    opacity: 0;
    translate: 0 40px;
  }

  .dm-reveal--in {
    opacity: 1;
    transition:
      opacity 0.6s ease,
      translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--dm-reveal-delay, 0ms);
    translate: 0 0;
  }
}

/* --------------------------------------------------------------------------
   Popover

   Shared surface for the small explanatory panels — stat feature sources, tag
   pill definitions. Built on the native popover attribute, so Esc, light
   dismiss and focus handling come from the platform rather than a script.

   The top layer is load-bearing, not incidental: .dm-section sets
   overflow: hidden, so a panel in normal flow is clipped at the section edge.
   -------------------------------------------------------------------------- */

.dm-popover {
  background-color: var(--dm-glass-bg);
  -webkit-backdrop-filter: var(--dm-glass-blur);
  backdrop-filter: var(--dm-glass-blur);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 29, 51, 0.16);

  

  color: var(--dm-dark-100, #0A1D33);
  max-height: min(60vh, 420px);
  max-width: min(92vw, 380px);
  overflow-y: auto;
  padding: var(--dm-space-lg, 32px);

  

  opacity: 0;
  transition:
    opacity 0.2s ease,
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete;
}

.dm-popover:popover-open {
  opacity: 1;
}

@starting-style {
  .dm-popover:popover-open {
    opacity: 0;
  }
}

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

@supports not (backdrop-filter: blur(1px)) {
  .dm-popover {
    background-color: var(--dm-white, #FFFFFF);
  }
}



@supports (anchor-name: --a) {
  .dm-popover {
    inset: auto;
    margin: 0;
    position-area: block-start span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
  }
}



.dm-popover__close {
  --dm-unbutton-color: var(--dm-blue-100, #003EFF);

  display: block;
  margin: 0 0 var(--dm-space-sm, 16px) auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.dm-popover__close:hover,
.dm-popover__close:focus-visible {
  opacity: 1;
}

.dm-popover__list {
  display: grid;
  gap: var(--dm-space-lg, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}



.dm-popover .dm-popover__name {
  align-items: center;
  color: var(--dm-blue-100, #003EFF);
  display: flex;
  gap: var(--dm-space-2xs, 8px);
  margin: 0 0 var(--dm-space-sm, 16px);
}

.dm-popover__name .dm-icon {
  --dm-icon-size: 18px;

  color: var(--dm-blue-100, #003EFF);
}

.dm-popover__text {
  font-size: var(--dm-text-body-l);
  line-height: var(--dm-lh-body-l);
}

.dm-popover__text > *:first-child { margin-top: 0; }
.dm-popover__text > *:last-child { margin-bottom: 0; }



@supports not selector(:popover-open) {
  .dm-popover,
  .dm-popover-trigger {
    display: none;
  }
}

.dm-divider {
  background-color: var(--dm-border);
  border: 0;
  height: 1px;
  margin: 0;
  width: 100%;
}

.dm-surface {
  background-color: var(--dm-surface);
}

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

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

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

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

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

/* Paragraphs */

/* Wrapped in :where() so it contributes zero specificity. It still sets the
   default paragraph size and rhythm for body copy, but a rich text field
   dropped inside a module now inherits that module's sizing instead of being
   forced back to 1rem. Without this, every richtext area in every module had
   to restate its own font-size on the child <p>. */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Image alt text */

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

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* build: 1 — bump to force HubSpot to recompile this partial into main.css */
/* Fields */

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

/* Labels */

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

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

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

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

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

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

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR — indents the consent wording away from its checkbox.

   The !important the boilerplate shipped here is gone: it beat every attempt to
   space that row from a module, including two-class selectors, which is exactly
   the kind of override an unstyled default has no business winning. The value
   stays as the default for any form nobody has styled; a module that lays the
   row out itself now simply sets its own. */

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

/* Validation */

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

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

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

/* Submit button */

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

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


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

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

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

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

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

/* Table */

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

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

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

/* build: 4 — bump to force HubSpot to recompile this partial into main.css */
/* ==========================================================================
   Odometer

   Slot-machine roll for large figures. Each digit becomes a reel of stacked
   glyphs inside a one-line-tall window; the reel starts a few digits above its
   final position and rolls down into place, staggered left to right so the last
   digit settles last.

   The reels are built by js/main.js when the figure scrolls into view, and the
   plain text is restored once the roll finishes. Nothing here runs on the
   markup HubSpot ships, so the served HTML always contains the real figure -
   correct for crawlers, for the page editor, and when JavaScript never runs.

   Only digits roll. Everything else in the string - currency symbols, the
   multiplication sign, "tn/yr", ">", en dashes - is left as static text, so an
   editor can type any figure without configuring anything.
   ========================================================================== */

.dm-visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}



.dm-odo {
  --dm-odo-duration: 1s;
  --dm-odo-ease: cubic-bezier(0.15, 0.6, 0.25, 1.02);
  --dm-odo-spin: 5;
  --dm-odo-stagger: 110ms;

  
}



.dm-odo__static {
  display: inline-block;
  white-space: pre;
}



.dm-odo__reels {
  white-space: nowrap;
}



.dm-odo__digit {
  clip-path: inset(0 -0.35em);
  display: inline-block;
  height: 1lh;
  vertical-align: bottom;
}

.dm-odo__reel {
  display: block;
  translate: 0 calc(var(--dm-odo-rest) * -1lh);
}



.dm-odo__reel > span {
  display: block;
  text-align: center;
}



.dm-odo--rolling .dm-odo__reel {
  animation: dm-odo-roll var(--dm-odo-duration) var(--dm-odo-ease) both;
  animation-delay: calc(var(--dm-odo-index) * var(--dm-odo-stagger));
}

@keyframes dm-odo-roll {
  from {
    translate: 0 calc((var(--dm-odo-rest) + var(--dm-odo-spin)) * -1lh);
  }
}
/* build: 4 — bump to force HubSpot to recompile this partial into main.css */
/* ==========================================================================
   Post cards

   The card and its carousel, shared by the blog-cards module (curated recent
   posts on a marketing page) and the blog templates (the blog's own listing and
   related stories). Extracted rather than copied: the listing cannot use the
   module, because it renders `contents` — the paginated, tag-filtered set — and
   the module fetches by recency instead.

   Module CSS only loads when its module is on the page, so leaving these rules
   there would mean the templates styling their own copy of the same card.
   ========================================================================== */
.dm-posts__grid {
  gap: var(--dm-space-lg, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Grid — wraps onto as many rows as needed */

.dm-posts__grid--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------------------------------------------------------------------------
   Carousel, no JavaScript.

   Scroll snapping handles swipe, trackpad and arrow-key navigation on its own.
   The prev/next buttons come from the CSS Carousel spec (::scroll-button),
   which browsers that lack support simply ignore — scrolling still works, so
   the fallback is the same component without buttons.
   --------------------------------------------------------------------------- */

/* scroll-behavior: smooth animates programmatic scrolls, which is what the
   prev/next buttons trigger. Dragging and swiping are unaffected — those stay
   1:1 with the pointer. */

.dm-posts__grid--carousel {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /* The scroller clips at its own edges, so the shadow needs room inside it —
     to the left, where the spread reaches back past the card, and below, where
     the 6px offset plus an 18px blur falls outside the card box.
     The left padding is pulled back off the section with a negative margin, so
     the first card still lines up with everything else on the page. */

  margin-left: calc(var(--dm-space-xs, 12px) * -1);
  padding-bottom: var(--dm-space-lg, 32px);
  padding-left: var(--dm-space-xs, 12px);

  /* Without this the snap position is the padding edge, so every card would
     come to rest 12px right of where it should. */

  scroll-padding-left: var(--dm-space-xs, 12px);

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;

  /* Cards rise 40px into place on scroll, which is scrollable overflow as far
     as this box is concerned - left at the auto that overflow-x implies, that
     flashes a vertical scrollbar for the length of the animation. Named hidden
     rather than clip because clip is not allowed to pair with a scrolling
     axis and would be used as hidden anyway. Either way the cut is at the
     padding box, so the room made for the shadow is untouched. */

  overflow-y: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .dm-posts__grid--carousel {
    scroll-behavior: auto;
  }
}

/* scroll-snap-stop: always is what makes the buttons advance exactly one card.
   Without it a button press scrolls by roughly a page and skips several cards;
   with it the scroller is not allowed to pass over a snap point, so it stops at
   the very next one. Also stops fast swipes from flinging past several cards. */

.dm-posts__grid--carousel > .dm-posts__card {
  flex: 0 0 clamp(260px, 30%, 380px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.dm-posts__grid--carousel:focus-visible {
  outline: 2px solid var(--dm-accent);
  outline-offset: 6px;
}

@supports selector(::scroll-button(*)) {
  .dm-posts__grid--carousel {
    anchor-name: --dm-posts-carousel;
    scrollbar-width: none;
  }

  /* Anchored to the scroller and sat just above its top-right corner, beside
     the section heading. `position: fixed` with `inset-area` was wrong on both
     counts: fixed pins to the viewport, and inset-area was renamed
     position-area, so the declaration was simply dropped. */

  /* The two buttons butt together to form one pill: the left has its right
     corners squared off and the right its left corners, so they read as a
     single control rather than two circles. */

  .dm-posts__grid--carousel::scroll-button(left),
  .dm-posts__grid--carousel::scroll-button(right) {
    background-color: var(--dm-blue-10, #E6ECFF);
    border: 0;
    bottom: calc(anchor(top) + 20px);
    color: var(--dm-accent);
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    line-height: 1;
    position: absolute;
    position-anchor: --dm-posts-carousel;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    width: 44px;
  }

  .dm-posts__grid--carousel::scroll-button(left) {
    border-radius: 999px 0 0 999px;
    content: "\276E";
    right: calc(anchor(right) + 44px);
  }

  .dm-posts__grid--carousel::scroll-button(right) {
    border-radius: 0 999px 999px 0;
    content: "\276F";
    right: anchor(right);
  }

  .dm-posts__grid--carousel::scroll-button(*):hover {
    background-color: var(--dm-blue-20, #CCD8FF);
  }

  .dm-posts__grid--carousel::scroll-button(*):disabled {
    cursor: default;
    opacity: 0.4;
  }

  .dm-scheme--blue .dm-posts__grid--carousel::scroll-button(*),
  .dm-scheme--dark .dm-posts__grid--carousel::scroll-button(*) {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--dm-white, #FFFFFF);
  }

  /* Leave room so the heading never runs under the buttons */

  .dm-posts .dm-section-header {
    padding-right: 104px;
  }
}

/* Cards stay white and lift off the page with a shadow rather than sitting in
   a tinted box — they read as cards on both the white and light grey schemes.
   On blue and dark, a translucent surface replaces it, since a white card
   would be far too loud. */

.dm-posts__card {
  background-color: var(--dm-white, #FFFFFF);
  border: 0;
  border-radius: 10px;
  box-shadow: 2px 6px 18px 0 rgba(0, 62, 255, 0.1);
  overflow: hidden;
}

.dm-scheme--blue .dm-posts__card,
.dm-scheme--dark .dm-posts__card {
  background-color: var(--dm-surface);
  box-shadow: none;
}

.dm-posts__link {
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.dm-posts__media {
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
}

.dm-posts__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

/* Stand-in for posts with no featured image, using the stacked logo */

.dm-posts__media--placeholder {
  background-color: var(--dm-blue-10, #E6ECFF);
  background-image: var(--dm-logo-stacked);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.dm-posts__link:hover .dm-posts__media img,
.dm-posts__link:focus-visible .dm-posts__media img {
  transform: scale(1.03);
}

.dm-posts__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--dm-space-md, 24px);
}

.dm-posts__title {
  color: var(--dm-accent);
  font-size: var(--dm-text-title-m);
  font-weight: 600;
  line-height: var(--dm-lh-title-m);
}

/* Excerpts are reading copy, so they stay dark rather than taking the light
   schemes' blue body text. */

.dm-posts__excerpt {
  color: var(--dm-dark-80, #3B4A5C);
  font-size: var(--dm-text-body-m);
  line-height: var(--dm-lh-body-m);
  margin-top: var(--dm-space-2xs, 8px);
}

.dm-scheme--blue .dm-posts__excerpt,
.dm-scheme--dark .dm-posts__excerpt {
  color: var(--dm-text);
}

/* margin-top: auto pushes the meta row to the bottom of the card, so the topic
   pill and Read more line up across cards regardless of title or excerpt
   length. */

.dm-posts__meta {
  align-items: center;
  display: flex;
  gap: var(--dm-space-md, 24px);
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--dm-space-lg, 32px);
}

.dm-posts__topic {
  background-color: var(--dm-blue-10, #E6ECFF);
  border-radius: 999px;
  color: var(--dm-blue-100, #003EFF);
  margin: 0;
  padding: 4px 10px;
}

.dm-scheme--blue .dm-posts__topic,
.dm-scheme--dark .dm-posts__topic {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--dm-white, #FFFFFF);
}

.dm-posts__more {
  color: var(--dm-accent);
  font-size: var(--dm-text-body-m);
  font-weight: 500;
  white-space: nowrap;
}

.dm-posts__link:hover .dm-posts__more,
.dm-posts__link:focus-visible .dm-posts__more {
  text-decoration: underline;
}

.dm-posts__empty {
  color: var(--dm-text-muted);
  margin: 0;
}
/* build: 6 — bump to force HubSpot to recompile this partial into main.css */
/* Header DND sections */

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

/* Header container */

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

/* ==========================================================================
   Digital Mirror header
   Two modes:
     1. Solid  — white background, dark text. Default.
     2. Overlay — transparent, sits on top of a dark/blue hero, white text.

   Overlay mode is triggered by the hero module rendering `.dm-hero--overlay`
   when its color scheme is Blue or Dark navy. The header reacts via :has(),
   so no per-page setting is needed.
   ========================================================================== */



.header {
  --dm-header-bg: transparent;
  --dm-header-text: var(--dm-dark-100, #0A1D33);
  --dm-header-cta-bg: var(--dm-blue-100, #003EFF);
  --dm-header-cta-text: var(--dm-white, #FFFFFF);
  --dm-header-cta-hover-bg: var(--dm-blue-80, #3365FF);
  --dm-header-scrolled-bg: var(--dm-white, #FFFFFF);
  
  --dm-header-height: 84px;

  background-color: var(--dm-header-bg);
  inset-inline: 0;
  position: fixed;
  top: 0;
  z-index: 100;
}



.header--ready {
  transition: background-color 0.3s ease;
}

.header--scrolled {
  --dm-header-bg: var(--dm-header-scrolled-bg);
}

/* Logo variants — only one is visible at a time */

.header__logo-link {
  display: block;
  line-height: 0;
}



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

.header__logo-img--on-dark,
.header__logo-img--symbol {
  display: none;
}

@media (max-width: 767px) {
  .header__logo-img--full {
    display: none;
  }

  .header__logo-img--symbol.header__logo-img--default {
    display: block;
  }
}

.header__container {
  align-items: center;
  gap: var(--dm-space-lg, 32px);
  padding-block: var(--dm-space-sm, 16px);
}

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

.header__column {
  align-items: center;
  display: flex;
  gap: var(--dm-space-xl, 48px);
  margin-left: auto;
  width: auto;
}



.header__navigation {
  align-items: center;
  display: flex;
  gap: var(--dm-space-xl, 48px);
}

/* Primary navigation links */

.header .menu__link {
  color: var(--dm-header-text);
  font-family: var(--dm-font-sans, sans-serif);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}



.header .menu__link:hover,
.header .menu__link:focus {
  color: var(--dm-header-text);
  opacity: 1;
  text-decoration: none;
}

.header .menu__link:focus-visible {
  outline: 2px solid var(--dm-header-text);
  outline-offset: 4px;
}

.header .menu__item--depth-1 > .menu__link--active-link:after {
  background-color: var(--dm-header-text);
}





.header--toggle,
.header__close--toggle {
  --dm-unbutton-color: var(--dm-header-text);

  display: none;
}

/* Call to action */

.header__cta .button-wrapper {
  margin: 0;
}

.header__cta .button {
  background-color: var(--dm-header-cta-bg);
  border: 0;
  border-radius: 999px;
  color: var(--dm-header-cta-text);
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  white-space: nowrap;
}



.header__cta .button {
  transition: background-color 0.2s ease;
}

.header__cta .button:hover,
.header__cta .button:focus {
  background-color: var(--dm-header-cta-hover-bg, var(--dm-blue-80, #3365FF));
  color: var(--dm-header-cta-text);
}

/* Overlay mode — the header floats transparently over a dark or blue hero,
   then settles onto a solid colour once the page is scrolled. The solid colour
   matches the hero it came from, so the transition reads as one surface. */



.body-wrapper:has(.dm-hero.dm-scheme--blue),
.body-wrapper:has(.dm-hero.dm-scheme--dark) {
  --dm-header-overlay: 1;
}

.body-wrapper:has(.dm-hero.dm-scheme--blue) .header,
.body-wrapper:has(.dm-hero.dm-scheme--dark) .header {
  --dm-header-text: var(--dm-white, #FFFFFF);
  --dm-header-cta-bg: var(--dm-white, #FFFFFF);
  --dm-header-cta-text: var(--dm-dark-100, #0A1D33);
  --dm-header-cta-hover-bg: var(--dm-blue-10, #E6ECFF);
}

.body-wrapper:has(.dm-hero.dm-scheme--blue) .header {
  --dm-header-scrolled-bg: var(--dm-blue-100, #003EFF);
}

.body-wrapper:has(.dm-hero.dm-scheme--dark) .header {
  --dm-header-scrolled-bg: var(--dm-dark-100, #0A1D33);
}

/* .header--scrolled is toggled from js/main.js */

.body-wrapper:has(.dm-hero.dm-scheme--blue) .header--scrolled,
.body-wrapper:has(.dm-hero.dm-scheme--dark) .header--scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}



.header--scrolled {
  box-shadow: 0 2px 16px rgba(10, 29, 51, 0.08);
}

.body-wrapper:has(.dm-hero.dm-scheme--blue) .header__logo-img--default,
.body-wrapper:has(.dm-hero.dm-scheme--dark) .header__logo-img--default {
  display: none;
}

.body-wrapper:has(.dm-hero.dm-scheme--blue) .header__logo-img--full.header__logo-img--on-dark,
.body-wrapper:has(.dm-hero.dm-scheme--dark) .header__logo-img--full.header__logo-img--on-dark {
  display: block;
}

@media (max-width: 767px) {
  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header__logo-img--full.header__logo-img--on-dark,
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header__logo-img--full.header__logo-img--on-dark {
    display: none;
  }

  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header__logo-img--symbol.header__logo-img--on-dark,
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header__logo-img--symbol.header__logo-img--on-dark {
    display: block;
  }
}

@media (max-width: 767px) {
  

  .header__container {
    align-items: center;
    flex-direction: row;
    padding-block: var(--dm-space-sm, 16px);
    padding-inline: var(--dm-space-md, 24px);
  }

  .header__column {
    gap: var(--dm-space-sm, 16px);
    margin-left: auto;
    width: auto;
  }

  .header__logo,
  .header__logo--main {
    margin: 0 auto 0 0;
    max-width: none;
    width: auto;
  }

  

  .header__navigation .header__cta {
    margin-top: var(--dm-space-2xl, 64px);
  }

  .header__navigation .header__cta .button {
    display: block;
    font-size: 16px;
    padding: 16px 24px;
    text-align: center;
    width: 100%;
  }

  

  .header__navigation {
    --dm-header-cta-bg: var(--dm-blue-100, #003EFF);
    --dm-header-cta-hover-bg: var(--dm-blue-80, #3365FF);
    --dm-header-cta-text: var(--dm-white, #FFFFFF);
  }

  

  .header__navigation--toggle,
  .header__close--toggle {
    margin: 0;
  }

  

  .header__navigation--toggle {
    background-image: none;
    height: 20px;
    position: relative;
    width: 24px;
  }

  .header__navigation--toggle span {
    background-color: var(--dm-header-text);
    border-radius: 2px;
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .header__navigation--toggle span:nth-child(1) { top: 2px; }
  .header__navigation--toggle span:nth-child(2) { top: 9px; }
  .header__navigation--toggle span:nth-child(3) { top: 16px; }

  .header__navigation--toggle {
    display: block;
  }

  .header__navigation--toggle.hide {
    display: none;
  }

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

  

  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header__navigation.open,
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header__navigation.open {
    --dm-header-text: var(--dm-dark-100, #0A1D33);
  }
}

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

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



@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    justify-content: flex-end;
    width: auto;
  }
}

@media (max-width: 767px) {
  

  .header__container {
    align-items: center;
    flex-direction: row;
    padding-block: var(--dm-space-sm, 16px);
    padding-inline: var(--dm-space-md, 24px);
  }

  .header__column {
    position: relative;
  }

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

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

/* Navigation skipper */

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

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

/* Logo */

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



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

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

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



/* Search bar */

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



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

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



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



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

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


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

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

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

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

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

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

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

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

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

/* Language switcher */

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

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

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

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

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

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

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

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  

  

  .header__navigation,
  .header__search,
  .header__language-switcher {
    -webkit-backdrop-filter: var(--dm-glass-blur);
    backdrop-filter: var(--dm-glass-blur);
    background-color: var(--dm-glass-bg);
    display: none;
    inset: 0;
    overflow-y: auto;
    padding: calc(var(--dm-header-height, 84px) + var(--dm-space-lg, 32px)) var(--dm-space-md, 24px) var(--dm-space-2xl, 64px);
    position: fixed;
    width: 100%;
    z-index: 1;
  }

  

  @supports not (backdrop-filter: blur(1px)) {
    .header__navigation,
    .header__search,
    .header__language-switcher {
      background-color: var(--dm-white, #FFFFFF);
    }
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    display: block;
  }

  

  .header__navigation {
    opacity: 0;
    transition:
      translate 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.24s ease,
      display 0.32s allow-discrete;
    translate: 100% 0;
  }

  .header__navigation.open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .header__navigation.open {
      opacity: 0;
      translate: 100% 0;
    }
  }

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

  

  .header__logo,
  .header--toggle,
  .header__close--toggle {
    position: relative;
    z-index: 2;
  }

  

  

  .header:has(.header__navigation.open),
  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header:has(.header__navigation.open),
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header:has(.header__navigation.open) {
    --dm-header-text: var(--dm-dark-100, #0A1D33);
  }

  .header:has(.header__navigation.open) .header__logo-img--on-dark,
  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header:has(.header__navigation.open) .header__logo-img--on-dark,
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header:has(.header__navigation.open) .header__logo-img--on-dark {
    display: none;
  }

  .header:has(.header__navigation.open) .header__logo-img--symbol.header__logo-img--default,
  .body-wrapper:has(.dm-hero.dm-scheme--blue) .header:has(.header__navigation.open) .header__logo-img--symbol.header__logo-img--default,
  .body-wrapper:has(.dm-hero.dm-scheme--dark) .header:has(.header__navigation.open) .header__logo-img--symbol.header__logo-img--default {
    display: block;
  }

  

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

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

  

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

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

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

  

  .header__navigation--toggle:after {
    content: "";
    display: none;
  }

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

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

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

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

  

  .header__close--toggle {
    display: none;
    height: 24px;
    margin: 0;
    position: relative;
    width: 24px;
  }

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

  .header__close--toggle::before,
  .header__close--toggle::after {
    background-color: var(--dm-header-text);
    border-radius: 2px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 22px;
  }

  .header__close--toggle::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .header__close--toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
/* Website footer */

.footer .dnd-section {
  padding-block: var(--dm-space-3xl, 96px);
}

@media (max-width: 767px) {
  .footer .dnd-section {
    padding-block: var(--dm-space-2xl, 64px);
  }
}
/* Menu and simple menu */

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

/* Horizontal menu */

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

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

/* Vertical menu */

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

/* Flyouts */

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

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

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

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

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

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

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

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

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

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

/* Utilities
Helper classes with ability to override anything that comes before it
*/

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

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

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