/* Theme base styles */

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

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

/* ------------------------------------------------------------------
   Self-hosted Univers webfonts (MyFonts kit 393787, web-licensed).
   Family names intentionally match the stacks declared in
   theme-overrides.css, so the theme picks them up with no other
   changes. The 67 Bold Condensed cut is registered as the bold
   (700) member of the body and display families, so font-weight:700
   resolves to the real bold cut instead of a synthesized one.
   URLs go through get_asset_url because compiled CSS is served from
   a hub_generated path — browser-relative url() would not resolve.
------------------------------------------------------------------ */

/* Body — Univers 47 Light Condensed */
@font-face {
  font-family: "Univers 47 Condensed Light";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_2_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_2_0.woff") format("woff");
}

@font-face {
  font-family: "Univers 47 Condensed Light";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_D_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_D_0.woff") format("woff");
}

@font-face {
  font-family: "Univers 47 Condensed Light";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff") format("woff");
}

@font-face {
  font-family: "Univers 47 Condensed Light";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_F_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_F_0.woff") format("woff");
}

/* Display — Univers 57 Condensed, with 67 Bold Condensed as its bold */
@font-face {
  font-family: "Univers Condensed 57 Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_0_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_0_0.woff") format("woff");
}

@font-face {
  font-family: "Univers Condensed 57 Regular";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff") format("woff");
}

/* Headings — Univers 67 Bold Condensed, addressable directly by name */
@font-face {
  font-family: "Univers 67 Condensed Bold";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff") format("woff");
}

@font-face {
  font-family: "Univers 67 Condensed Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_1_0.woff") format("woff");
}

/* ------------------------------------------------------------------
   Subscripts — U+2080-208E only.

   The webfont kit was cut with two different character sets: the 47
   Light files carry 440 glyphs, but 393787_0_0 and 393787_1_0 carry
   236 and are missing the entire subscript block. Those two are the
   whole of the display family and the 700 weight of the body family,
   so every SF6 subscript in a heading — and in bold body copy — was
   falling through to Arial. It is one character in a different
   typeface, mid-word.

   This claims just the fifteen subscript codepoints and serves them
   from the 440-glyph Light cut. Verified against the cmap tables:
   all fifteen are present there and absent from both 236-glyph
   files, so the range has no holes and over-claims nothing.
   Superscripts are already in every cut and are left alone.

   Declared at weight 400 only, on purpose. A bold heading then gets
   a synthesized bold on these characters, which sits far closer to
   the surrounding text than the Light cut would. It is not a real
   bold — the kit has no upright 440-glyph bold to point at.


   Nudging these: because this face serves nothing but the subscript
   block, `size-adjust` on it moves only those characters — no
   wrapper, no content change. It scales the glyph and its designed
   drop below the baseline together, so a larger value renders the
   subscript bigger and lower, a smaller one smaller and higher. The
   two cannot be separated; independent vertical movement needs an
   element around the character.

   It is left at 100% because the two cuts measure the same: 1000
   units per em in both, cap height 724 vs 722, x-height 498 vs 505.
   A corrective value would be 99.7%, which is invisible. So there is
   no mismatch to fix here, and any other number is a taste decision
   about how the subscript reads next to the display face — change it
   on both declarations below and keep them equal.

   This is a stopgap. The proper fix is to regenerate MyFonts kit
   393787 with the extended character set, which needs no code change
   at all: delete this block and the two stack entries in
   theme-overrides.css. Modifying the font files is not an option —
   the Monotype licence forbids it.
------------------------------------------------------------------ */

@font-face {
  font-family: "Univers Subscripts";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_2_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_2_0.woff") format("woff");
  size-adjust: 100%;
  unicode-range: U+2080-208E;
}

@font-face {
  font-family: "Univers Subscripts";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_D_0.woff2") format("woff2"),
       url("https://241963466.fs1.hubspotusercontent-na2.net/hubfs/241963466/raw_assets/public/dilo-usa-theme/fonts/webfonts/393787_D_0.woff") format("woff");
  size-adjust: 100%;
  unicode-range: U+2080-208E;
}
*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

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

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

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

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

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

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

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

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

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

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

/* Paragraphs */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Image alt text */

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

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #c3ced7;
  border-color: #c3ced7;
  color: #e4e8ec;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

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

/* Labels */

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

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

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

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

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

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

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

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

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

.hs-error-msg {
  color: #dc2626;
  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: #495156;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

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

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

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

/* ------------------------------------------------------------------
   Header — DILO USA redesign
   Custom properties below isolate the new accent palette so we can
   later promote them to fields.json without touching call sites.
------------------------------------------------------------------ */

.header {
  --dilo-text: #495156;
  --dilo-text-muted: #6b7880;
  --dilo-divider: #c3ced7;
  --dilo-utility-bg: #f0f3f5;
  --dilo-accent-orange: #eb690b;
  --dilo-accent-lime: #a2c037;
  --dilo-cta-dark: #1a1c1e;
  --dilo-font: var(--dilo-font-display);

  background-color: #ffffff;
  border-bottom: 0.8px solid var(--dilo-divider);
  position: relative;
  z-index: 100;
}

/* Sticky header — enabled via Theme Settings (theme.header.sticky).
   HubSpot wraps global partials in a div exactly as tall as the header,
   which would give position:sticky on the header itself zero travel
   range — so the WRAPPER carries the sticky positioning, selected via
   :has() so it still follows the theme toggle. Desktop: the negative
   top offset lets the utility bar scroll away while the main nav row
   stays pinned; mobile has no utility bar and pins flush. z-index 100
   keeps it above content and below the video lightbox (1000). */
.body-wrapper > div:has(> .header--sticky) {
  position: sticky;
  top: -36.8px;
  z-index: 100;
}

@media (max-width: 767px) {
  .body-wrapper > div:has(> .header--sticky) {
    top: 0;
  }
}

/* Anchor jumps land below the pinned nav row instead of underneath it */
html:has(.header--sticky) {
  scroll-padding-top: 61px;
}

/* Reset the boilerplate's DnD section padding inside the header */
.header .dnd-section {
  padding: 0;
}

/* Preserve Barlow Condensed across all interaction states — theme-overrides.css
   reapplies the body font + underline on `a:hover`/`a:focus`. This block has
   higher specificity (.header a:hover) than that global rule and locks the
   font and decoration in place so hover only changes color. */
.header a,
.header a:hover,
.header a:focus,
.header a:active,
.header button,
.header button:hover,
.header button:focus,
.header button:active {
  font-family: var(--dilo-font);
  text-decoration: none;
}

/* Lock font-weight per element across hover/focus so weight never shifts.
   Specificity 0,2,1 — beats global a:hover (0,1,1) from theme-overrides.css. */
.header .header-utility__locations,
.header .header-utility__locations:hover,
.header .header-utility__locations:focus {
  font-weight: 600;
}

.header .header-utility__contact,
.header .header-utility__contact:hover,
.header .header-utility__contact:focus {
  font-weight: 400;
}

.header .header-utility__action,
.header .header-utility__action:hover,
.header .header-utility__action:focus,
.header .lang-switcher__item,
.header .lang-switcher__item:hover,
.header .lang-switcher__item:focus,
.header .header-nav__link,
.header .header-nav__link:hover,
.header .header-nav__link:focus,
.header .header-cta,
.header .header-cta:hover,
.header .header-cta:focus {
  font-weight: 700;
}

/* Skip link */
.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;
  z-index: 100;
}

/* ==================================================================
   Top utility bar
   ================================================================== */
.header-utility {
  background-color: var(--dilo-utility-bg);
  border-bottom: 0.8px solid var(--dilo-divider);
  font-family: var(--dilo-font);
}

.header-utility__inner {
  align-items: center;
  display: flex;
  height: 36px;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}

.header-utility__left,
.header-utility__right {
  align-items: center;
  display: flex;
}

.header-utility__left {
  gap: 16px;
}

/* The phone/email links come from the header-contact module; flatten its
   .hs_cos_wrapper so both links become direct flex items of the left cluster
   and pick up its 16px gap (they otherwise sit almost touching inside the
   wrapper div, where the gap can't reach). */
.header-utility__left > .hs_cos_wrapper {
  display: contents;
}

.header-utility__right {
  gap: 0;
}

/* ------------------------------------------------------------------
   Locations dropdown — trigger plus panel. The wrapper is the hover
   area, so the panel does not close as the pointer travels into it.
   ------------------------------------------------------------------ */
.header-locations {
  position: relative;
}

.header-locations__panel {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  left: 0;
  list-style: none;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  padding: 6px 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}

/* Opens on hover and on keyboard focus anywhere inside the wrapper */
.header-locations:hover .header-locations__panel,
.header-locations:focus-within .header-locations__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.header-locations__item {
  margin: 0;
}

.header-locations__link {
  color: var(--dilo-text);
  display: block;
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.0544em;
  line-height: 1.4;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.15s linear, color 0.15s linear;
  white-space: nowrap;
}

/* Scoped under .header so it outranks the global a:hover in
   theme-overrides.css, which would otherwise recolour the label */
.header a.header-locations__link:hover,
.header a.header-locations__link:focus {
  background-color: #fef3ec;
  color: var(--dilo-accent-orange);
  font-weight: 600;
  text-decoration: none;
}

/* Escape dismisses the panel even while the trigger still holds focus;
   cleared by main.js on the next hover or focus change */
.header-locations.is-dismissed .header-locations__panel {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

/* An entry with no URL is plain text, so it gets no pointer affordance */
.header-locations__link--static {
  cursor: default;
}

/* Width floor per column count. The panel still sizes itself from its
   content (max-content above), so a wide footer can still widen it - but it
   can never come out narrower than its columns, which is what WebKit was
   doing when it under-computed the intrinsic width of a flex row of
   flex: 0 0 240px columns. Chrome already computes these values, so the
   floor changes nothing there. The mobile rule sets width: 100% and is
   unaffected either way. */
.mega-menu--cols-1 { min-width: 240px; }
.mega-menu--cols-2 { min-width: 480px; }
.mega-menu--cols-3 { min-width: 720px; }
.mega-menu--cols-4 { min-width: 960px; }

/* A lone column sizes to its own labels between two bounds rather than
   sitting at one fixed width: 240px keeps a short menu ("About Us") tidy
   instead of stranding whitespace, and 360px gives a long one (Resources
   carries a 49-character page title) room to wrap in two lines rather than
   five. The panel is max-content, so it follows the column. */
.mega-menu--cols-1 .mega-menu__col {
  flex: 0 1 auto;
  max-width: 360px;
  min-width: 240px;
}

/* Chevron flips while the panel is open.
   The icon tag wraps every svg in its own span, so `svg:last-child` matched
   the pin too - it is the last child of ITS wrapper. Target the last wrapper
   in the trigger instead, which is the chevron. */
.header-utility__locations > :last-child svg {
  transition: transform 0.15s ease;
}

.header-locations:hover .header-utility__locations > :last-child svg,
.header-locations:focus-within .header-utility__locations > :last-child svg {
  transform: rotate(180deg);
}

/* The pin never rotates */
.header-utility__locations > :first-child svg {
  transform: none;
}

/* Locations dropdown trigger */
.header-utility__locations {
  align-items: center;
  border-right: 0.8px solid var(--dilo-divider);
  color: var(--dilo-text);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.0544em;
  line-height: 1;
  padding: 4px 16px 4px 0;
  text-transform: uppercase;
}

/* The shared `.no-button` reset re-declares padding/font-size/color/border on
   its own :hover/:focus/:active (0,2,0), which beats the base rule (0,1,0):
   the text jumped 11px -> 16px, the padding and divider border vanished and
   the row reflowed on hover. Re-assert at equal specificity — this block wins
   on source order (components load after elements). Same fix as the burger
   toggle below. */
.header-utility__locations:hover,
.header-utility__locations:focus,
.header-utility__locations:active {
  border-right: 0.8px solid var(--dilo-divider);
  color: var(--dilo-text);
  font-size: 12px;
  letter-spacing: 0.0544em;
  line-height: 1;
  padding: 4px 16px 4px 0;
}

.header-utility__locations svg {
  fill: currentColor;
  height: 12px;
  width: 12px;
}

/* Phone / email links */
.header-utility__contact {
  align-items: center;
  color: var(--dilo-text-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 400;
  gap: 5px;
  line-height: 1.5;
  text-decoration: none;
}

.header-utility__contact:hover,
.header-utility__contact:focus {
  color: var(--dilo-text);
}

.header-utility__contact svg {
  height: 12px;
  width: 12px;
}

/* Language switcher (utility right) */
.lang-switcher {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-switcher li {
  margin: 0;
}

.lang-switcher__item {
  align-items: center;
  color: var(--dilo-text-muted);
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 11px;
  font-weight: 700;
  height: 17.9px;
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0 6px;
  text-decoration: none;
  text-transform: uppercase;
  min-width: 20px;
}

.lang-switcher__item:hover,
.lang-switcher__item:focus {
  color: var(--dilo-text);
}

.lang-switcher__item--active,
.lang-switcher__item--active:hover,
.lang-switcher__item--active:focus {
  background-color: var(--dilo-accent-orange);
  color: #ffffff;
}

.header-utility__divider {
  background-color: var(--dilo-divider);
  display: inline-block;
  height: 16px;
  margin: 0 11px;
  width: 1px;
}

/* Utility menu rendered by the header-utility-menu module. HubSpot wraps the
   module output in an .hs_cos_wrapper div; keep both that wrapper and the nav
   inside it as inline flex so the links sit in a row like the bare links did. */
.header-utility__right > .hs_cos_wrapper,
.header-utility__menu {
  align-items: center;
  display: flex;
}

/* Portal / Login */
.header-utility__action {
  align-items: center;
  color: var(--dilo-text-muted);
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.header-utility__action:hover,
.header-utility__action:focus {
  color: var(--dilo-text);
}

.header-utility__action svg {
  height: 12px;
  width: 12px;
}

/* ==================================================================
   Main header row
   ================================================================== */
.header-main {
  background-color: #ffffff;
}

.header-main__inner {
  align-items: stretch;
  display: flex;
  height: 60px;
  padding: 0;
}

/* Logo column with right border.

   12px, not 20px, on the sides. The row is 60px and the logo is capped at
   36px, so the vertical space is (60 - 36) / 2 = 12px top and bottom - it
   is derived, not declared. At 20px horizontal the box was 20/12, and the
   logo read as vertically pinched. Matching the sides to the vertical makes
   the padding equal on all four sides without changing the header height. */
.header-main__logo-col {
  align-items: center;
  border-right: 0.8px solid var(--dilo-divider);
  display: flex;
  flex: 0 0 auto;
  padding: 0 12px;
}

/* HubSpot wraps this module in a plain block div. An inline-flex anchor
   inside it sits on that div's text baseline, and the line box adds its
   descender plus half-leading underneath - about 6.6px at 16px/1.4. The
   wrapper was therefore ~42.6px tall, not 36px, and the column centred the
   WRAPPER, so the logo sat ~6.6px high: roughly 9px of air above it and 15px
   below. Making the wrapper a flex container removes the line box entirely,
   so the anchor is a flex item and the wrapper is exactly the logo's height. */
.header-main__logo-col > .hs_cos_wrapper {
  display: flex;
}

.header-main__logo {
  align-items: center;
  display: flex;
  text-decoration: none;
}

.header-main__logo-mark,
.header-main__logo img {
  display: block;
  height: 36px;
  max-height: 36px;
  width: auto;
}

/* Navigation
   The nav is rendered by the header-menu module, which HubSpot wraps in an
   .hs_cos_wrapper div. Promote that wrapper to the flex child slot the bare
   nav element used to occupy so the layout is unchanged. */
.header-main__inner > .hs_cos_wrapper {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.header-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.header-nav__list {
  align-items: stretch;
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav__item {
  align-items: stretch;
  border-bottom: 2.4px solid transparent;
  display: flex;
  margin: 0;
  transition: border-color 0.15s linear;
}

.header-nav__item:hover,
.header-nav__item:focus-within {
  border-bottom-color: var(--dilo-accent-orange);
}

.header-nav__link {
  align-items: center;
  color: var(--dilo-text);
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.header-nav__link:hover,
.header-nav__link:focus {
  color: var(--dilo-accent-orange);
}

.header-nav__link svg {
  height: 11px;
  width: 11px;
}

/* Right actions column */
.header-main__actions {
  align-items: center;
  border-left: 0.8px solid var(--dilo-divider);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 16px;
}

/* The CTA buttons come from the header-ctas module; flatten its wrapper so
   the anchors stay direct flex items of the actions row (desktop) and of the
   stacked column inside the open mobile menu. */
.header-main__actions > .hs_cos_wrapper {
  display: contents;
}

.header-action {
  align-items: center;
  background: none;
  border: none;
  color: var(--dilo-text);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 4px 6px;
}

.header-action svg {
  fill: currentColor;
  height: 16px;
  width: 16px;
}

.header-action:hover svg,
.header-action:focus svg {
  fill: var(--dilo-accent-orange);
}

/* Header CTAs */
.header-cta {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  height: 32px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
  white-space: nowrap;
}

.header-cta svg {
  fill: currentColor;
  height: 12px;
  width: 12px;
}

.header-cta--outline {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-accent-orange);
  color: var(--dilo-accent-orange);
}

/* Icons follow the text color via fill: currentColor on the base svg rule,
   so they fade with the color transition instead of snapping. */
.header-cta--outline:hover,
.header-cta--outline:focus {
  background-color: var(--dilo-accent-orange);
  color: #ffffff;
}

.header-cta--solid {
  background-color: var(--dilo-cta-dark);
  border: 0.8px solid var(--dilo-cta-dark);
  color: #ffffff;
}

.header-cta--solid:hover,
.header-cta--solid:focus {
  background-color: var(--dilo-accent-orange);
  border-color: var(--dilo-accent-orange);
  color: #ffffff;
}

/* DILO Academy and Customer Support, for the open mobile menu only. Desktop
   reaches both from the utility bar, so the pair stays hidden here and is
   shown in the 767px block below. */
.header-cta-pair {
  display: none;
}

/* Mobile-only CTA — hidden on desktop; shown in the ≤767px top bar between
   the logo and the hamburger. Per-instance background color is bound in the
   module's scope_css block and overrides the fallback below. */
.header-main__mobile-cta {
  display: none;
}

.header-mobile-cta {
  align-items: center;
  background-color: var(--dilo-accent-orange);
  color: #ffffff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.15s linear;
  white-space: nowrap;
}

.header-mobile-cta:hover,
.header-mobile-cta:focus {
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
}

/* Mobile toggle — hidden on desktop */
.header-main__toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--dilo-text);
  cursor: pointer;
  display: none;
  font-size: 22px;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  touch-action: manipulation;
}

/* The shared `.no-button` reset re-declares padding/font-size/color on its own
   :hover/:focus/:active (specificity 0,2,0), which would otherwise beat the base
   rule above (0,1,0) and collapse the toggle's padding + shrink the icon on
   hover. Re-assert them at equal specificity — this block wins on source order
   (components load after elements) so hovering the burger is visually inert. */
.header-main__toggle:hover,
.header-main__toggle:focus,
.header-main__toggle:active {
  color: var(--dilo-text);
  font-size: 22px;
  padding: 0 16px;
}

/* Phosphor icon cross-fade — both icons always in DOM; opacity transition
   prevents the instant display-swap that caused a visual flicker. */
.header-main__toggle .ph-list,
.header-main__toggle .ph-x {
  transition: opacity 0.15s ease;
}

.header-main__toggle .ph-list {
  opacity: 1;
}

/* X sits absolutely over the bars icon so layout size never changes */
.header-main__toggle .ph-x {
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header-main__inner.is-open .header-main__toggle .ph-list {
  opacity: 0;
}

.header-main__inner.is-open .header-main__toggle .ph-x {
  opacity: 1;
  pointer-events: auto;
}

/* ==================================================================
   Responsive — single mobile breakpoint
   ================================================================== */
/* Tightening band. Logo column 61px + nav 590px + three CTAs and the search
   icon 499px = 1149px of content, against a 1240px wrapper — comfortable on a
   desktop, but the nav is the only flexible child, so it absorbs everything
   below that. Trimming the horizontal padding here buys back 64px and moves
   the pinch down to roughly a 1120px viewport. Raised from 1100px when the
   third CTA was added. */
@media (max-width: 1200px) {
  .header-nav__link {
    padding: 0 10px;
  }

  .header-cta {
    padding: 0 10px;
  }
}

@media (max-width: 900px) {
  .header-utility__contact span,
  .header-utility__action span {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-utility {
    display: none;
  }

  .header-main__inner {
    /* Keep wrapped lines at their natural height instead of stretching them to
       fill min-height. Otherwise the logo row is taller when the menu is closed
       (2 lines share the leftover height) than when open (3+ lines, none spare),
       so the top bar visibly changes height between states. */
    align-content: flex-start;
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
  }

  .header-main__logo-col {
    border-right: none;
    flex: 1 1 auto;
    /* Pin the top bar to a stable 60px whether the menu is open or closed. */
    min-height: 60px;
  }

  .header-main__toggle {
    display: inline-flex;
  }

  /* Mobile CTA — visible in the top bar; the logo column's flex 1 pushes the
     CTA + hamburger to the right edge. */
  .header-main__mobile-cta {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
  }

  /* Search is desktop-only — hide it inside the slide-down mobile menu */
  .header-main__actions .header-action--icon {
    display: none;
  }

  /* The module wrapper takes its own full-width line; the nav inside it
     stays hidden until the menu is toggled open. */
  .header-main__inner > .hs_cos_wrapper {
    flex: 1 1 100%;
    width: 100%;
  }

  .header-nav,
  .header-main__actions {
    display: none;
    flex: 1 1 100%;
    width: 100%;
  }

  .header-main__inner.is-open .header-nav,
  .header-main__inner.is-open .header-main__actions {
    border-top: 0.8px solid var(--dilo-divider);
    display: flex;
  }

  .header-nav__list {
    flex-direction: column;
    width: 100%;
  }

  .header-nav__item {
    border-bottom: 0.8px solid var(--dilo-divider);
    /* Stack the link above its mega-menu panel so the panel drops below as an
       accordion. The base rule is display:flex (row); without this the link and
       the panel sit side by side and the accordion opens beside the link. */
    flex-direction: column;
    width: 100%;
  }

  .header-nav__link {
    flex: 1;
    justify-content: space-between;
    padding: 14px 20px;
  }

  .header-main__actions {
    border-left: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
  }

  .header-cta {
    height: 44px;
    justify-content: center;
    width: 100%;
  }

  /* Contact Us is covered by Get in Touch in the mobile top bar, so the open
     menu hides it. */
  .header-cta--desktop-only {
    display: none;
  }

  /* The open menu sets the buttons two to a row: Product Catalog and RMA
     Forms, then DILO Academy and Customer Support. The search box and
     Contact Us are hidden, so they take no cell. */
  .header-main__inner.is-open .header-main__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The pair's wrapper steps aside so its two buttons join the same grid. */
  .header-cta-pair {
    display: contents;
  }

  /* Half width each. On a narrow phone a label like "Customer Support" does
     not fit on one line at this size, so it may wrap to two lines inside the
     44px button instead of overflowing it. Icons keep their size. */
  .header-main__actions .header-cta {
    line-height: 1.2;
    min-width: 0;
    padding: 0 10px;
    text-align: center;
    white-space: normal;
  }

  .header-main__actions .header-cta > .hs_cos_wrapper_type_icon {
    flex-shrink: 0;
  }

  /* The open-in-new-tab arrow on Product Catalog goes, so that label fits a
     half-width button. */
  .header-cta__external {
    display: none;
  }
}

/* ==================================================================
   Mega Menu
   ================================================================== */

/* Positioning context: panel drops from the triggering item, not the full header */
.header-nav__item--has-mega {
  position: relative;
}

.mega-menu {
  background-color: #ffffff;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  visibility: hidden;
  /* max-content, not auto: an absolutely positioned box with width:auto is
     shrink-to-fit, and WebKit under-computes that when the content is a flex
     row of flex-basis columns - the white panel ended before the last column,
     leaving it on the page background. max-content asks for the content's
     natural width explicitly, which every engine resolves the same way.
     The mobile rule below resets this to 100% for the accordion. */
  width: max-content;
  z-index: 99;
}

.header-nav__item--has-mega:hover > .mega-menu,
.header-nav__item--has-mega:focus-within > .mega-menu,
.header-nav__item--has-mega.is-open > .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  visibility: visible;
}

.header-nav__link svg {
  transition: transform 0.18s ease;
}

.header-nav__item--has-mega:hover > .header-nav__link svg,
.header-nav__item--has-mega:focus-within > .header-nav__link svg,
.header-nav__item--has-mega.is-open > .header-nav__link svg {
  transform: rotate(180deg);
}

/* Columns */

.mega-menu__columns {
  display: flex;
}

.mega-menu__col {
  border: 0.8px solid var(--dilo-divider);
  display: flex;
  flex: 0 0 240px;
  flex-direction: column;
  /* Flex items default to min-width: auto, so a long unbreakable word can
     force the column past its 240px basis and out of the panel. */
  min-width: 0;
  padding: 28px;
}

/* Column heading */

.mega-menu__col-heading {
  color: var(--dilo-text);
  font-family: var(--dilo-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.88px;
  line-height: 1;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.mega-menu__col-heading--accent {
  color: var(--dilo-accent-orange);
}

/* Heading divider */

.mega-menu__col-divider {
  background-color: var(--dilo-divider);
  border: none;
  height: 0.8px;
  margin: 0;
}

/* Blank-label column: hide the line but keep its 0.8px slot in the layout so the
   links below don't shift — they stay aligned with the labeled columns' links. */
.mega-menu__col-divider--empty {
  visibility: hidden;
}

/* Every column heading blank: remove the heading + line from the layout entirely
   (not just hide the line) so the links aren't pushed down and the panel's top
   and bottom spacing stay even. */
.mega-menu__columns--no-labels .mega-menu__col-heading,
.mega-menu__columns--no-labels .mega-menu__col-divider {
  display: none;
}

/* Link items */

.mega-menu__item {
  display: block;
  padding: 10px 0 2px;
  text-decoration: none;
}

.mega-menu__item:hover .mega-menu__item-name,
.mega-menu__item:focus .mega-menu__item-name {
  color: var(--dilo-accent-orange);
}

.mega-menu__item-name {
  color: #1a1c1e;
  display: block;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: break-word;
  transition: color 0.15s linear;
}

.mega-menu__item-desc {
  color: var(--dilo-text-muted);
  display: block;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1px;
}

/* View all link */

.mega-menu__view-all {
  color: var(--dilo-accent-orange);
  display: block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.36px;
  margin-top: 14px;
  padding-bottom: 2px;
  text-decoration: none;
  transition: opacity 0.15s linear;
}

.mega-menu__view-all:hover,
.mega-menu__view-all:focus {
  opacity: 0.75;
}

/* Footer bar */

.mega-menu__footer {
  align-items: center;
  background-color: var(--dilo-utility-bg);
  border-top: 0.8px solid var(--dilo-divider);
  display: flex;
  justify-content: space-between;
  padding: 14px 28px;
}

.mega-menu__footer-text {
  color: var(--dilo-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.mega-menu__footer-cta {
  align-items: center;
  background-color: var(--dilo-accent-orange);
  border-radius: 4px;
  color: #ffffff;
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-left: auto;
  padding: 9px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s linear;
  white-space: nowrap;
}

.mega-menu__footer-cta:hover,
.mega-menu__footer-cta:focus {
  background-color: var(--dilo-cta-dark);
  color: #ffffff;
}

/* ==================================================================
   Mega Menu — Mobile (accordion inside the mobile nav drawer)
   ================================================================== */

@media (max-width: 767px) {
  /* The desktop width floors would beat width: 100% here and push the
     accordion wider than the screen, so clear them */
  .mega-menu--cols-1,
  .mega-menu--cols-2,
  .mega-menu--cols-3,
  .mega-menu--cols-4 {
    min-width: 0;
  }

  .mega-menu {
    box-shadow: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: static;
    transform: none;
    transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
    visibility: hidden;
    width: 100%;
  }

  .header-nav__item--has-mega:hover > .mega-menu,
  .header-nav__item--has-mega:focus-within > .mega-menu {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: none;
    visibility: hidden;
  }

  .header-nav__item--has-mega.is-open > .mega-menu {
    max-height: 1400px;
    opacity: 1;
    pointer-events: auto;
    transition: max-height 0.35s ease, opacity 0.2s ease, visibility 0s linear 0s;
    visibility: visible;
  }

  /* On touch, hover/focus must not rotate the chevron — the accordion is driven
     by the JS `.is-open` class, so the indicator follows that state alone. */
  .header-nav__item--has-mega:hover > .header-nav__link svg,
  .header-nav__item--has-mega:focus-within > .header-nav__link svg {
    transform: none;
  }

  .header-nav__item--has-mega.is-open > .header-nav__link svg {
    transform: rotate(180deg);
  }

  .mega-menu__columns {
    flex-direction: column;
    padding: 8px 0;
  }

  /* Flatten each Level-2 group into a plain run of links: hide the group heading
     and its divider, and drop the per-group border/padding, so tapping a Level-1
     button reveals one continuous list of items. */
  .mega-menu__col-heading,
  .mega-menu__col-divider {
    display: none;
  }

  .mega-menu__col {
    border: none;
    flex: none;
    min-width: 0;
    padding: 0 20px;
    width: 100%;
  }

  .mega-menu__footer {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
  }

  .mega-menu__footer-cta {
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }
}

/* ==================================================================
   Active menu state — classes are computed by the header-menu module
   from the HubSpot menu tree (activeNode = exact page, activeBranch =
   current section). Desktop: orange text + 2px bar under the item;
   mobile: orange text + left accent bar instead (the underline looks
   stray in the stacked accordion). Mega-menu marks the exact page.
   ================================================================== */
.header-nav__item--active > .header-nav__link {
  color: var(--dilo-accent-orange);
}

/* Reuse the nav's existing 2.4px bottom-border mechanic (the hover line)
   so the active underline is pixel-identical to it and sits flush with
   the header's bottom edge — a separate bar floats 2.4px high because
   the transparent border reserves that space below the link box */
.header-nav__item--active {
  border-bottom-color: var(--dilo-accent-orange);
}

.mega-menu__item--active,
.mega-menu__item--active .mega-menu__item-name {
  color: var(--dilo-accent-orange);
}

@media (max-width: 767px) {
  .header-nav__item--active > .header-nav__link {
    border-left: 2px solid var(--dilo-accent-orange);
    padding-left: 18px;
  }

  /* The desktop underline is the item border — neutralize it in the
     stacked mobile accordion where the left accent bar marks active */
  .header-nav__item--active {
    border-bottom-color: var(--dilo-divider);
  }
}

/* ==================================================================
   Header page search — fuzzy dropdown (behavior in js/main.js)
   ================================================================== */

/* Positioning context so the panel drops flush from the main row's bottom
   edge, aligned to the content right edge. Mega menus keep their own closer
   context (.header-nav__item--has-mega), so this doesn't re-anchor them. */
.header-main__inner {
  position: relative;
}

.header-search {
  align-items: center;
  display: inline-flex;
}

/* The toggle uses a Phosphor <i> glyph; the .header-action svg rules only
   cover the old FontAwesome icons */
.header-action i {
  font-size: 18px;
  line-height: 1;
}

.header-action:hover,
.header-action:focus {
  color: var(--dilo-accent-orange);
}

.header-search__panel {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  border-top: none;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 340px;
  z-index: 60;
}

/* Some resets stomp the UA [hidden] style — keep the toggle states reliable */
.header-search__panel[hidden],
.header-search__results[hidden] {
  display: none;
}

.header-search__input {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  border-radius: 0;
  color: var(--dilo-text);
  font-family: var(--dilo-font);
  font-size: 14px;
  height: 40px;
  padding: 0 12px;
  width: 100%;
}

.header-search__input:focus {
  border-color: var(--dilo-accent-orange);
  outline: none;
}

.header-search__results {
  list-style: none;
  margin: 8px 0 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
  /* Own offset context so the keyboard-scroll math in main.js measures
     option positions against the list, not the panel */
  position: relative;
}

.header-search__results li {
  margin: 0;
}

.header-search__results a {
  color: var(--dilo-text);
  display: block;
  font-family: var(--dilo-font);
  font-size: 13px;
  padding: 9px 10px;
  text-decoration: none;
}

.header-search__results li.is-active > a {
  background-color: #fef3ec;
  color: var(--dilo-accent-orange);
}

.header-search__empty {
  color: var(--dilo-text-muted);
  font-family: var(--dilo-font);
  font-size: 13px;
  margin: 0;
  padding: 9px 10px;
}

/* Search is desktop-only for now, matching the hidden icon on mobile */
@media (max-width: 767px) {
  .header-search {
    display: none;
  }
}
/* ------------------------------------------------------------------
   Eyebrow — the small uppercase label above a section heading.

   One class for all 111 modules that use one. Before this, each module
   carried its own copy of these rules, which is how they drifted onto
   three letter-spacings, two weights, two sizes, and two different
   typefaces — ten were set in the body face rather than the display
   face, and one was still on Barlow Condensed after the theme moved
   off it.

   The dashes are pseudo-elements on the centred variant only, so the
   rule is structural rather than a convention: a left- or
   right-aligned eyebrow has no dash because there is no element to
   draw one, not because someone remembered. They take their colour
   from currentColor, so a module setting the eyebrow's colour — or an
   editor setting it through a STYLE field — colours the dashes too
   with nothing extra to wire up.

   This deliberately sets only the properties stripped out of every
   module.css. `color` and `margin` stay with the modules, because
   colour is per-module and often editor-controlled, and margin is
   layout. Since the shared class never declares them, it does not
   matter which stylesheet the browser sees first — the two are equal
   specificity and would otherwise be decided by load order.
------------------------------------------------------------------ */

.eyebrow {
  align-items: center;
  display: flex;
  font-family: var(--dilo-font-display);
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow--center::before,
.eyebrow--center::after {
  background-color: currentColor;
  content: "";
  /* Without this the dashes collapse when the label is long */
  flex-shrink: 0;
  height: 2px;
  width: 24px;
}
/* ------------------------------------------------------------------
   Footer — DILO USA redesign
   Custom properties mirror the palette declared in _header.css so the
   two partials stay in lockstep. Promote both to fields.json once the
   new accent palette graduates to theme tokens.
------------------------------------------------------------------ */

.footer {
  --dilo-text: #495156;
  --dilo-text-muted: #6b7880;
  --dilo-text-soft: #8a9ba8;
  --dilo-divider: #c3ced7;
  --dilo-utility-bg: #f0f3f5;
  --dilo-accent-orange: #eb690b;
  --dilo-accent-lime: #a2c037;
  --dilo-cta-dark: #1a1c1e;
  --dilo-font: var(--dilo-font-display);

  background-color: #ffffff;
  border-top: 2.4px solid var(--dilo-accent-orange);
  font-family: var(--dilo-font);
}

/* Reset the boilerplate's DnD section padding inside the footer */
.footer .dnd-section {
  padding: 0;
}

/* Keep Barlow Condensed locked across hover/focus — same approach as the header. */
.footer a,
.footer a:hover,
.footer a:focus,
.footer a:active,
.footer button,
.footer button:hover,
.footer button:focus,
.footer button:active {
  font-family: var(--dilo-font);
  text-decoration: none;
}

/* ==================================================================
   Newsletter bar
   ================================================================== */
.footer-newsletter {
  background-color: var(--dilo-utility-bg);
  border-bottom: 0.8px solid var(--dilo-divider);
}

.footer-newsletter__inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding: 24px 20px;
}

.footer-newsletter__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-newsletter__eyebrow {
  color: var(--dilo-accent-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

.footer-newsletter__title {
  color: var(--dilo-cta-dark);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

.footer-newsletter__form {
  align-items: stretch;
  display: flex;
  height: 47px;
}

.footer-newsletter__input {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  border-right: none;
  color: var(--dilo-cta-dark);
  font-family: var(--dilo-font);
  font-size: 14px;
  height: 100%;
  padding: 12px 16px;
  width: 260px;
}

.footer-newsletter__input::placeholder {
  color: rgba(26, 28, 30, 0.5);
}

.footer-newsletter__input:focus {
  border-color: var(--dilo-accent-orange);
  outline: none;
}

.footer-newsletter__submit {
  align-items: center;
  background-color: var(--dilo-accent-orange);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dilo-font);
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 0 20px;
  text-transform: uppercase;
  transition: background-color 0.15s linear;
}

/* Re-assert every property the theme's button:hover sets - background, border,
   colour and radius. It only declared background and border before, so the
   label colour and corner radius were silently inherited from the theme's
   hover and would drift if those theme settings ever changed. */
.footer-newsletter__submit:hover,
.footer-newsletter__submit:focus,
.footer-newsletter__submit:active {
  background-color: var(--dilo-cta-dark);
  border: none;
  border-radius: 0;
  color: #ffffff;
}

.footer-newsletter__submit[disabled] {
  cursor: default;
  opacity: 0.75;
}

.footer-newsletter__submit svg {
  height: 14px;
  width: 14px;
  fill: currentColor;
}

/* ------------------------------------------------------------------
   HubSpot form embed — restyled to the inline input + button pill.
   HubSpot renders its own markup, so these selectors target its classes
   rather than the footer-newsletter__* ones used by the fallback.
   ------------------------------------------------------------------ */
.footer-newsletter__form--hs {
  height: auto;
}

.footer-newsletter__form--hs form {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

/* HubSpot's form tag always emits a title element, even though this module
   passes an empty title. The theme's form settings style it with a white
   background and 30px of bottom padding, which showed as a band above the
   field. The padding goes in every case; the element itself is hidden only
   when it has no content, so a form that does carry a title still shows one. */
.footer-newsletter__form--hs .form-title {
  padding: 0;
}

.footer-newsletter__form--hs .form-title:empty {
  display: none;
}

.footer-newsletter__form--hs .hs-form-field {
  margin: 0;
}

/* Labels stay in the accessibility tree but out of the layout — the
   placeholder carries the visible cue, as in the original design */
.footer-newsletter__form--hs .hs-form-field > label,
.footer-newsletter__form--hs .hs-field-desc {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  width: 1px;
}

.footer-newsletter__form--hs .hs-input {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  border-radius: 0;
  border-right: none;
  color: var(--dilo-cta-dark);
  font-family: var(--dilo-font);
  font-size: 14px;
  height: 47px;
  padding: 12px 16px;
  width: 260px;
}

.footer-newsletter__form--hs .hs-input:focus {
  border-color: var(--dilo-accent-orange);
  outline: none;
}

/* HubSpot ships its own form CSS inside forms/v2.js, injects it after this
   stylesheet, and rewrites its own selectors at render time - the bundle does
   .replace(/.hs-form-private/g, '.hs-form-' + id) - so the live rules read
   .hs-form-<per-form id> fieldset.form-columns-1 .input { margin-right: 8px }
   and the same for .hs-input { width: 95% }. That generated class cannot be
   written here, and matching only on the stable classes ties on specificity
   and loses to the later stylesheet.

   The margin opens a gap between the field and the button, so the two stop
   reading as one pill, and the 95% leaves space inside the field's own box.
   HubSpot does not mark either declaration important, so forcing these two
   wins without touching anything else it sets. */
.footer-newsletter__form--hs .input {
  margin-right: 0 !important;
}

.footer-newsletter__form--hs .hs-input {
  width: 260px !important;
}

.footer-newsletter__form--hs .hs_submit,
.footer-newsletter__form--hs .actions {
  margin: 0;
  padding: 0;
}

.footer-newsletter__form--hs .hs-button {
  background-color: var(--dilo-accent-orange);
  border: none;
  border-radius: 0;
  color: #ffffff;
  cursor: pointer;
  font-family: var(--dilo-font);
  font-size: 14px;
  font-weight: 700;
  height: 47px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 0 20px;
  text-transform: uppercase;
  transition: background-color 0.15s linear;
}

.footer-newsletter__form--hs .hs-button:hover,
.footer-newsletter__form--hs .hs-button:focus,
.footer-newsletter__form--hs .hs-button:active {
  background-color: var(--dilo-cta-dark);
  border: none;
  border-radius: 0;
  color: #ffffff;
}

/* Validation and confirmation messages drop onto their own line below the
   pill rather than stretching it */
.footer-newsletter__form--hs .hs-error-msgs,
.footer-newsletter__form--hs .hs_error_rollup {
  flex-basis: 100%;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.footer-newsletter__form--hs .hs-error-msg,
.footer-newsletter__form--hs .hs-main-font-element {
  color: var(--dilo-accent-orange);
  font-family: var(--dilo-font);
  font-size: 12px;
}

.footer-newsletter__form--hs .submitted-message {
  color: var(--dilo-cta-dark);
  font-family: var(--dilo-font);
  font-size: 14px;
  margin: 0;
}

/* ==================================================================
   Main footer — brand + 4 link columns
   ================================================================== */
.footer-main__inner {
  align-items: stretch;
  display: flex;
  gap: 0;
  padding: 48px 20px;
}

/* Module wrappers inserted by HubSpot must be transparent to the flex layout */
.footer-main__inner > div {
  display: contents;
}

/* Brand column */
.footer-brand {
  border-right: 0.8px solid var(--dilo-divider);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 23px;
  padding-right: 32px;
  width: 240px;
}

.footer-brand__logo {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.footer-brand__logo-img {
  display: block;
  height: auto;
  max-height: 52px;
  max-width: 160px;
  width: auto;
}

.footer-brand__logo-placeholder {
  color: var(--dilo-text-muted);
  font-size: 13px;
  font-style: italic;
}

.footer-brand__tagline {
  color: var(--dilo-text-soft);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  text-transform: uppercase;
}

.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-brand__contact-item {
  align-items: center;
  color: var(--dilo-text-muted);
  display: flex;
  font-size: 14px;
  font-weight: 400;
  gap: 10px;
  line-height: 1.5;
  margin: 0;
}

.footer-brand__contact-item svg {
  flex: 0 0 14px;
  height: 14px;
  width: 14px;
  fill: var(--dilo-accent-orange);
}

.footer-brand__contact-item a {
  color: var(--dilo-text-muted);
  font-family: var(--dilo-font);
  text-decoration: none;
}

.footer-brand__contact-item a:hover,
.footer-brand__contact-item a:focus {
  color: var(--dilo-accent-orange);
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social li {
  margin: 0;
}

.footer-social__link {
  align-items: center;
  background-color: var(--dilo-utility-bg);
  border: 0.8px solid var(--dilo-divider);
  color: var(--dilo-text);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
  width: 32px;
}

.footer-social__link:hover,
.footer-social__link:focus {
  background-color: var(--dilo-accent-orange);
  border-color: var(--dilo-accent-orange);
  color: #ffffff;
}

.footer-social__link svg {
  fill: currentColor;
  height: 16px;
  width: 16px;
}

/* Link columns */
.footer-columns {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.footer-column {
  border-right: 0.8px solid var(--dilo-divider);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px;
}

.footer-column--last {
  border-right: none;
}

.footer-column__title {
  color: var(--dilo-text-soft);
  font-family: var(--dilo-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

/* Scoped under .footer: theme-overrides colours every .footer h2 at higher
   specificity than a lone class, so these modifiers never actually won. */
.footer .footer-column__title--orange {
  color: var(--dilo-accent-orange);
}

.footer .footer-column__title--lime {
  color: var(--dilo-accent-lime);
}

/* A column title is a link when its menu item has a page, and a link takes
   the site's link colour unless told otherwise - which is why the lime
   column read orange, and why the alternative gas accent left these two
   titles alone. The link now takes the title's colour; hover underlines so
   it still reads as a link. */
.footer .footer-column__title a,
.footer .footer-column__title a:hover,
.footer .footer-column__title a:focus {
  color: inherit;
  text-decoration: none;
}

.footer .footer-column__title a:hover,
.footer .footer-column__title a:focus {
  text-decoration: underline;
}

.footer-column__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column__list li {
  margin: 0;
}

.footer-column__link {
  color: var(--dilo-text-muted);
  display: inline-block;
  font-family: var(--dilo-font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 4px 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s linear;
}

.footer-column__link:hover,
.footer-column__link:focus {
  color: var(--dilo-accent-orange);
}

/* ==================================================================
   Certifications bar
   ================================================================== */
.footer-certs {
  background-color: var(--dilo-utility-bg);
  border-top: 0.8px solid var(--dilo-divider);
  border-bottom: 0.8px solid var(--dilo-divider);
}

.footer-certs__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 17px 20px;
}

.footer-certs__label {
  color: var(--dilo-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

.footer-certs__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-certs__badge {
  background-color: #ffffff;
  border: 0.8px solid var(--dilo-divider);
  color: var(--dilo-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 4px 12px;
}

/* ==================================================================
   Bottom bar — copyright + legal links
   ================================================================== */
.footer-legal {
  background-color: var(--dilo-utility-bg);
}

.footer-legal__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 20px;
}

.footer-legal__copy {
  color: var(--dilo-text-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal__links li {
  margin: 0;
}

.footer-legal__link {
  color: var(--dilo-text-soft);
  font-family: var(--dilo-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s linear;
}

/* Current page in the legal menu */
.footer-legal__link--active {
  color: var(--dilo-accent-orange);
}

.footer-legal__link:hover,
.footer-legal__link:focus {
  color: var(--dilo-accent-orange);
}

/* ==================================================================
   Responsive — single mobile breakpoint
   ================================================================== */
@media (max-width: 1100px) {
  .footer-column {
    padding: 0 20px;
  }

  .footer-brand {
    padding-right: 20px;
    width: 220px;
  }
}

@media (max-width: 900px) {
  .footer-main__inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand {
    border-right: none;
    padding-right: 0;
    width: 100%;
  }

  .footer-columns {
    flex-wrap: wrap;
  }

  .footer-column {
    flex: 1 1 45%;
    padding: 0;
  }

  .footer-column,
  .footer-column--last {
    border-right: none;
  }
}

@media (max-width: 767px) {
  .footer-newsletter__inner {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }

  .footer-newsletter__form {
    width: 100%;
  }

  .footer-newsletter__input {
    flex: 1 1 auto;
    width: auto;
  }

  /* Same full-width behaviour for HubSpot's markup */
  .footer-newsletter__form--hs form {
    width: 100%;
  }

  .footer-newsletter__form--hs .hs-form-field {
    flex: 1 1 auto;
    min-width: 0;
  }

  .footer-newsletter__form--hs .hs-input {
    width: 100%;
  }

  /* Same override as above, so HubSpot's 95% does not shrink the field here
     either. */
  .footer-newsletter__form--hs .hs-input {
    width: 100% !important;
  }

  .footer-main__inner {
    padding: 32px 20px;
  }

  .footer-columns {
    flex-direction: column;
    gap: 24px;
  }

  .footer-column {
    flex: 1 1 100%;
  }

  .footer-certs__inner {
    padding: 16px 20px;
  }

  .footer-legal__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-legal__links {
    gap: 16px;
  }
}
/* Menu and simple menu */

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

/* Horizontal menu */

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

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

/* Vertical menu */

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

/* Flyouts */

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

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

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

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

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

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

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

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

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

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

/* 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;
  }
}
/* Scroll-reveal — initial states only active when .anim-js is on the html element (set by main.js).
   This prevents elements from being invisible when JS is blocked or slow. */

.anim-js [data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.anim-js [data-anim="fade-up"].anim-in {
  opacity: 1;
  transform: translateY(0);
}

.anim-js [data-anim="fade-in"] {
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
}

.anim-js [data-anim="fade-in"].anim-in {
  opacity: 1;
}

.anim-js [data-anim="zoom-in"] {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.anim-js [data-anim="zoom-in"].anim-in {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .anim-js [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}