/* 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 design tokens, reset, normalize & box-sizing styles go.
*/

/* Design tokens
Static custom properties for values that recur across the theme but are NOT
driven by the HubSpot theme settings. (Brand colors live in utilities/_colors.css
and fonts in theme-overrides.css, both seeded from the editor.) Defined on :root
in the generic layer so every component and module stylesheet can read them via
var(). Values mirror what is already used in the codebase, so adopting them is a
visual no-op — just a single source of truth going forward.
*/

/* Breakpoints — canonical set. CSS custom properties CANNOT be used in @media
   (no build step here), so these stay literal; the rule is to reuse THESE
   values and not introduce new ones.
     mobile    @media (max-width: 767px)
     tablet    @media (min-width: 768px)
     desktop   @media (min-width: 1024px)
     xl        @media (min-width: 1440px)
   Allowed max-side complements (non-overlapping): 1023, 1439.
   Documented one-offs (intentional — do not "normalize" away):
     1150  menu nav-crowding band (768–1150)  — menu.module
     480   HubSpot form two-column threshold  — _hubspot-form-dark
     1800  ultra-wide home-hero padding nudge — home-hero.module
   Legacy: the 640px `sm:` utility tier (flex-grid) predates this set and is
   pending consolidation onto 768 (5 `sm:grid-cols-2` sites). */

:root {
  /* Neutrals & on-dark
  --color-white replaces the hardcoded white literals. The on-dark ramp is
  translucent white for text/borders over dark sections (home-hero,
  product-showcase, map-form, product-compat) — one token per opacity in use. */
  --color-white: #fff;
  --on-dark-90: rgba(255, 255, 255, 0.9);
  --on-dark-80: rgba(255, 255, 255, 0.8);
  --on-dark-70: rgba(255, 255, 255, 0.7);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-40: rgba(255, 255, 255, 0.4);
  --on-dark-30: rgba(255, 255, 255, 0.3);
  --on-dark-25: rgba(255, 255, 255, 0.25);
  --on-dark-20: rgba(255, 255, 255, 0.2);
  --on-dark-15: rgba(255, 255, 255, 0.15);
  --border-on-light: rgba(0, 0, 0, 0.15);

  /* Brand accent — static literal, NOT part of the theme's Global colors
     palette (those live in utilities/_colors.css, seeded from the editor). */
  --color-red: #e22f5a;

  /* Neutral UI grays — hairline borders + muted surfaces (NOT brand colors) */
  --border-hairline: #d1d6dc;
  --border-hairline-2: #ced4db;
  --surface-muted: #f1f1f1;
  --surface-pill: #e5e5e5;

  /* Spacing scale (0.25rem base — matches the utilities in utilities/_spacing.css) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-gutter: var(--space-10); /* 2.5rem — section side padding */

  /* Font weight (the three real weights in use; retire stray `bold`) */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-dropdown: 0 2px 9px 0 rgba(0, 0, 0, 0.2);

  /* Motion */
  --duration-fast: 0.15s;
  --duration-medium: 0.25s;
  --duration-slow: 0.3s;
  --easing-standard: linear;

  /* Z-index */
  --z-overlay: 1;
  --z-content: 2;
  --z-dropdown: 99;
  /* Viewport-docked drawers (product-compare) — above the sticky header, which
     sits at --z-dropdown. */
  --z-drawer: 100;
}
*, *:before, *:after {
  box-sizing: border-box;
}

p,h1,h2,h3,h4,h5,h6,ul,ol,pre {
  margin: 0;
  padding-inline-start: 0;
}

/* Focus-visible baseline: a consistent keyboard-focus ring for any focusable
   element that doesn't define its own. :where() keeps specificity at 0 so every
   component's own :focus-visible style still wins; this only catches the gaps.
   Controls on dark backgrounds that need a light ring set their own (e.g. the
   product-showcase arrows/thumbnails). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}
/*! 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 {
}

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

/* xl: full-bleed once the viewport clears the container + gutter */
@media screen and (min-width: 1440px) {
  .content-wrapper {
    padding: 0;
  }
}

/* A dnd_area's root cell is the only child of the area's own row. Pages built
   through the API can save it with `w: 0`, which renders `span0`: no width
   rule matches, so the flex item shrinks to its content and every section
   pins left. Force the full row whatever the span. The child chain starts at
   the area's `.container-fluid`, so columns inside a dnd section (one level
   deeper, under `.dnd-section`) never match. */
.container-fluid > .row-fluid-wrapper > .row-fluid > .widget-type-cell:only-child {
  width: 100%;
}

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

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

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/* Zigzag
Alternating media/text rows: stacked on mobile, side-by-side on desktop with
every other row reversed. Shared layout for the Feature and How-we-help panels.
Modules keep their own inner styling (titles, text colour, media aspect-ratio).
*/

.zigzag {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.zigzag__row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.zigzag__media,
.zigzag__body {
  width: 100%;
}

@media (min-width: 1024px) {
  .zigzag {
    gap: 1rem;
  }

  .zigzag__row {
    align-items: center;
    flex-direction: row;
    gap: 3.5rem;
  }

  .zigzag__row:nth-child(even) {
    flex-direction: row-reverse;
  }

  .zigzag__media,
  .zigzag__body {
    flex: 1;
    min-width: 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 */

.typography p {
}

/* Anchors */

.typography a {
  cursor: pointer;
}

/* Headings */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  margin: 0;
}

/* Lists */

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

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

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

/* Code blocks */

.typography pre {
  overflow: auto;
}

.typography code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Image alt text */

.typography img {
  font-size: 0.583rem;
  word-break: normal;
}

.typography > * {
  margin: 0;
}

.typography > * + * {
  margin-top: 1rem;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all var(--duration-fast) linear;
  white-space: normal;
}

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

/* Call-to-action button — yellow bar with a trailing arrow. Shared across hero, cta,
   industry-tabs, how-we-help, product cards, etc. Modules override padding / min-width
   / display as needed (this block holds only the common visual). */

.btn-cta {
  align-items: center;
  background-color: var(--color-yellow);
  color: var(--color-black);
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  transition: filter var(--duration-fast) var(--easing-standard);
}

.btn-cta:hover {
  filter: brightness(0.95);
}

.btn-cta__arrow {
  align-items: center;
  display: flex;
  flex: none;
}

.btn-cta__arrow .icon {
  height: 1.25rem;
  width: 1.375rem;
}

/* Secondary (grey) variant of the CTA button. */

.btn-cta--secondary {
  background-color: var(--color-dark2);
  color: var(--color-white);
}

.btn-cta--secondary:hover {
  filter: brightness(1.2);
}

/* Dark CTA bar — black, flips to yellow on hover. Hover trigger is left to the
   module (self-hover for home-hero, card-hover for the articles card). Shared base only. */

.btn-dark {
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  font-weight: var(--fw-medium);
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.btn-dark__arrow {
  align-items: center;
  display: flex;
  flex: none;
}

.btn-dark__arrow .icon {
  height: 1.25rem;
  width: 1.375rem;
}

/* 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.hs-form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

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

/* Help text */

form.hs-form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form.hs-form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

form.hs-form .hs-dateinput {
  position: relative;
}

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

form.hs-form .fn-date-picker .pika-table thead th {
  color: var(--color-white);
}

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

form.hs-form .fn-date-picker td .pika-button:hover,
form.hs-form .fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: var(--color-white);
}

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

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

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

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

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all var(--duration-fast) 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: var(--color-white);
  }

  .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 var(--duration-slow);
  }

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

/* ==========================================================================
   Global site header (Metal Pless)
   Dark bar, centred logo, navigation split left/right, language switcher
   on the trailing edge, yellow accent rule along the bottom.
   Two `menu` module instances (left/right) sit on either side of the logo.
   Desktop is the focus here; the polished responsive panel comes later.
   ========================================================================== */

.site-header {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-dropdown);
}

/* The dark navigation bar. */
.site-header__bar {
  background-color: var(--color-black);
  position: relative;
  /* anchors the mobile dropdown panel */
}

/* Yellow accent rule along the bottom of the bar, inset from both edges
   (Figma "Frame 470": 5px tall, 19px in from each side, desktop and mobile). */
.site-header__bar::after {
  background-color: var(--color-yellow);
  content: "";
  display: block;
  height: 5px;
  margin-inline: 19px;
  position: relative;
  z-index: 1;
}

.site-header__inner {
  align-items: stretch;
  display: flex;
  gap: 1.5rem;
  max-width: none;
  min-height: 84px;
  position: relative;
}

.site-header .site-header__inner .site-header__actions--mobile {
  display: none;
}

.site-header .site-header__inner .site-header__actions--nav {
  align-self: center;
  display: flex;
  flex: 0 0 auto;
  justify-self: end;
}

/* Navigation skipper — hidden until focused */

.site-header__skip {
  background-color: var(--color-yellow);
  color: var(--color-black);
  left: -1000px;
  padding: 0.5rem 1rem;
  position: absolute;
  top: -1000px;
  z-index: 1;
}

.site-header__skip:focus {
  left: 1rem;
  top: 1rem;
}

/* Logo ------------------------------------------------------------------- */

/* Keep the desktop logo centered to the header itself, independent of nav/action
   width changes. The menu grid below reserves the middle space around it. */
.site-header__brand {
  align-items: center;
  display: flex;
  flex-grow: 0;
  grid-column: 2;
  justify-content: center;
  margin: 0;
  order: 2;
  z-index: 2;
}

.site-header__brand img {
  display: block;
  height: auto;
  max-height: 56px;
  width: auto;
}

.site-header__brand .logo-company-name {
  color: var(--color-white);
}

/* Mobile-only bar logo — shown below the 1300px breakpoint (see media query
   below). Hidden on desktop, where the centred .site-header__brand inside the
   menu row is used instead. */
.site-header__brand--mobile {
  display: none;
}

/* No-navigation variant (system / membership pages) — centred logo only.
   It has no .site-header__bar, so it carries the dark bar itself. */

.site-header--minimal {
  background-color: var(--color-black);
  border-bottom: 4px solid var(--color-yellow);
}

.site-header--minimal .site-header__brand {
  flex: 1 1 auto;
  margin: 0 auto;
}

/* Collapsible region (left nav + right nav + actions) -------------------- */

.site-header__menu {
  align-items: stretch;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 21vw, 20rem) minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

.site-header__group {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
}

.site-header__group #hs_cos_wrapper_navigation_right,
.site-header__group #hs_cos_wrapper_navigation_left {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.site-header__group--start {
  gap: 1rem;
  grid-column: 1;
  justify-content: flex-start;
  order: 1;
}

.site-header__group--end {
  gap: 1.5rem;
  grid-column: 3;
  justify-content: flex-end;
  order: 3;
}

/* Navigation (menu module on a dark bar) -------------------------------- */

.site-header .menu {
  width: 100%;
}

.site-header .menu__wrapper {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}

.site-header__group--start .menu__wrapper {
  justify-content: flex-start;
}

.site-header__group--end #hs_cos_wrapper_navigation_right {
  order: 1;
}

.site-header__group--end .site-header__actions--nav {
  margin-left: 0;
  order: 2;
}

.site-header__group--end .menu__wrapper {
  justify-content: flex-end;
}

.site-header .menu__item--depth-1 {
  padding: 0.5rem 0.9rem;
  position: relative;
  /* anchors the submenu under this item */
}

@media (min-width: 1300px) {
  .site-header__group--start {
  }

  .site-header .menu__item--depth-1 {
    display: flex;
    flex-wrap: nowrap;
  }
}

.site-header .menu__link {
  color: var(--color-white);
  font-family: var(--font-body);
  font-variant: lining-nums;
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  /* override the module's uppercased depth-1 items */
  white-space: nowrap;
  padding-top: 30px;
  padding-bottom: 30px;
  flex-wrap: nowrap;
}

/* theme-overrides' `.menu .menu__link:focus/:active` (same specificity,
   loaded later) paints a clicked link black until it blurs. A mouse click
   leaves the link white; keyboard focus (:focus-visible) turns it yellow. */
.site-header .menu .menu__link:focus,
.site-header .menu .menu__link:active {
  color: var(--color-white);
}

.site-header .menu .menu__link:hover,
.site-header .menu .menu__link:focus-visible,
.site-header .menu .menu__link--active-link,
.site-header .menu .menu__link--active-branch,
.site-header .menu .menu__item--depth-1:hover>.menu__link,
.site-header .menu .menu__item--open>.menu__link {
  color: var(--color-yellow);
}

/* White chevron on the dark bar; flips up + turns yellow when the dropdown
   is open (or the item is hovered). Set explicitly (not currentColor) — the
   toggle <button> computes a black color the icon would otherwise inherit. */
.site-header .menu__child-toggle-icon {
  border-top-color: var(--color-white);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.site-header .menu__item--depth-1:hover>.menu__child-toggle .menu__child-toggle-icon,
.site-header .menu__item--open>.menu__child-toggle .menu__child-toggle-icon {
  border-top-color: var(--color-yellow);
  transform: rotate(180deg);
}

/* Dropdowns — dark panel, left-aligned under the parent item.
   The menu module + theme-overrides ship their own rules (light surface,
   yellow border, centred via translateX(-50%), a caret ::before, list
   markers). theme-overrides' `.menu .menu__submenu` has the same specificity
   but loads after main.css, so the surface colour/border need !important. */

.site-header .menu__submenu {
  background-color: var(--color-dark1) !important;
  border: none !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  list-style: none;
  min-width: 280px;
  /* Links are nowrap: grow with the longest label (FR runs past 280px)
     instead of the module's fixed 270px. */
  width: max-content;
  padding: 0;
}

/* Left-align the panel under the parent (cancel the module's centring). */
.site-header .menu__submenu--level-2 {
  left: 0 !important;
  top: 100%;
  transform: none !important;
}

/* The bar's last drop-down (Contact Us) opens leftwards: left-aligned, its
   280px+ panel ran past the window's right edge, under the scrollbar. */
@media (min-width: 1300px) {
  .site-header__group--end .menu__item--depth-1:last-child > .menu__submenu--level-2 {
    left: auto !important;
    right: 0;
  }
}

/* Hide the module's centred caret. */
.site-header .menu__submenu--level-2>.menu__item:first-child::before {
  display: none;
}

.site-header .menu__submenu .menu__item {
  border: 0;
  border-top: 1px solid var(--on-dark-15);
  list-style: none;
  margin: 0;
}

.site-header .menu__submenu .menu__item:first-child {
  border-top: 0;
}

.site-header .menu__submenu .menu__link {
  /* The menu module paints dropdown links with the theme's default light
     background via its own scoped CSS — force it clear so the dark surface
     shows through. */
  background-color: transparent !important;
  color: var(--color-white);
  display: block;
  font-family: var(--font-body);
  font-variant: lining-nums;
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
  padding: 1.05rem 2.25rem;
  text-transform: none;
}

.site-header .menu .menu__submenu .menu__link:hover,
.site-header .menu .menu__submenu .menu__link:focus-visible {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-yellow);
}

/* Contact Us drop-down: phone and address under the links (menu.module,
   contact_item), on a slightly lighter band, the icons in yellow. */
.site-header .menu__submenu .menu__contact {
  background-color: rgba(255, 255, 255, 0.04);
  padding: 1.05rem 2.25rem 1.25rem;
}

.site-header .menu__contact-link {
  color: var(--on-dark-80);
  font-family: var(--font-body);
  font-size: 1rem;
  font-variant: lining-nums;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.site-header .menu__contact-link .icon {
  color: var(--color-yellow);
}

.site-header .menu__contact-link:hover,
.site-header .menu__contact-link:focus-visible {
  color: var(--color-yellow);
}

/* Actions: language switcher ------------------------------------------- */

.site-header__actions {
  align-items: center;
  display: flex;
  gap: 1.25rem;
  order: 4;
}

.site-header__lang {
  align-items: center;
  display: flex;
  color: var(--color-white);
}

.site-header__lang a {
  color: currentColor;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Social profiles (client request 2026-10-27): icon links, white, yellow on
   hover/focus like the footer's. Desktop: utility row above the bar;
   mobile/tablet: last row of the menu panel (see the media query below). */
.site-header__social {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__social li {
  display: flex;
  margin: 0;
}

.site-header__social-link {
  color: var(--color-white);
  display: inline-flex;
  padding: 0.25rem;
}

.site-header__social-link .icon {
  height: 18px;
  width: 18px;
}

.site-header__social-link:hover,
.site-header__social-link:focus-visible {
  color: var(--color-yellow);
}

.site-header__social-link:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* Desktop utility row above the bar (28px). Part of the fixed header, so
   main.js's --site-header-height includes it. Hidden below 1300px, where
   the panel copy takes over. A one-row grid, so the compact header can fold
   it to nothing (grid-template-rows 1fr → 0fr, see "Compact header" below).
   The hairline is an inset shadow, inside the 28px, and folds away with it. */
.site-header__utility {
  background-color: var(--color-black);
  box-shadow: inset 0 -1px 0 var(--on-dark-15);
  display: grid;
  grid-template-rows: 1fr;
}

.site-header__utility-inner {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  min-height: 28px;
}

.site-header__social--utility {
  gap: 0.875rem;
}

.site-header__social--utility .site-header__social-link .icon {
  height: 14px;
  width: 14px;
}

.site-header__social--panel {
  display: none;
}

/* HubSpot's tools menu (the sprocket shown to logged-in users) is pinned
   16px from the viewport's top right, over the language switcher and the
   mobile menu button (Teamwork 50941180): it drops under the fixed header.
   Its stylesheet sets `top` with !important on a lone class, hence the
   body > and the !important. */
body > .hs-tools-menu {
  top: calc(var(--site-header-current-height, var(--site-header-height, 100px)) + 1rem) !important;
}

/* Language switcher — white text on the dark bar */

.site-header__lang {
  color: var(--color-white);
  cursor: pointer;
  position: relative;
}

.site-header__lang-current {
  align-items: center;
  display: inline-flex;
  font-size: 0.95rem;
}

.site-header__lang .lang_list_class {
  background-color: var(--color-white);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-dropdown);
  color: var(--color-black);
  opacity: 0;
  position: absolute;
  right: 0;
  top: 100%;
  transition: opacity var(--duration-fast) var(--easing-standard);
  visibility: hidden;
}

.site-header__lang:hover .lang_list_class,
.site-header__lang:focus-within .lang_list_class {
  opacity: 1;
  visibility: visible;
}

.site-header__lang .lang_list_class li {
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}

/* Mobile burger --------------------------------------------------------- */

.site-header__burger {
  align-items: center;
  display: none;
  /* desktop hides it */
  height: 40px;
  justify-content: center;
  order: 1;
  width: 40px;
}

.site-header__burger-box {
  display: block;
  height: 2px;
  position: relative;
  width: 24px;
}

.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
  background-color: var(--color-white);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transition: transform var(--duration-fast) var(--easing-standard);
  width: 24px;
}

.site-header__burger-bar {
  top: 0;
}

.site-header__burger-bar::before {
  top: -7px;
}

.site-header__burger-bar::after {
  top: 7px;
}

/* ==========================================================================
   Mobile (<1300px) — logo left, icon actions + circular burger in the bar,
   full-width dark dropdown panel with an accordion. Aligns with the menu
   module's own mobile breakpoint, below which its single nav is an accordion.
   ========================================================================== */

@media (max-width: 1299px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 30px;
    grid-template-columns: none;
  }

  /* Logo back to the left edge, in normal flow */
  .site-header__brand {
    left: auto;
    margin-right: auto;
    order: 1;
    position: static;
    top: auto;
    transform: none;
  }

  /* Swap the in-panel logo — which collapses into the dropdown and would
     otherwise render mid-list when the menu is open — for the always-visible
     bar logo, pinned to the left so the burger stays on the right. */
  .site-header__menu .site-header__brand {
    display: none;
  }

  .site-header__brand--mobile {
    display: flex;
    margin: 0;
    margin-right: auto;
    order: 0;
  }

  /* The language switcher stays in the bar, beside the burger */
  .site-header .site-header__inner .site-header__actions--nav {
    display: none;
  }

  .site-header .site-header__inner .site-header__actions--mobile {
    display: flex;
    gap: 1rem;
    max-width: none;
    opacity: 1;
    order: 2;
    overflow: visible;
    pointer-events: auto;
    position: static;
    transform: none;
    visibility: visible;
  }

  .site-header__group--end {
    padding-right: 0;
  }

  /* Burger — circular button that morphs into a cross when open */
  .site-header__burger {
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-circle);
    display: flex;
    height: 48px;
    order: 3;
    width: 48px;
    z-index: 1;
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-bar {
    background-color: transparent;
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-bar::before {
    top: 0;
    transform: rotate(45deg);
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-bar::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* Panel — full-width, anchored under the (fixed) bar */
  .site-header__menu {
    background-color: var(--color-black);
    border-top: 1px solid var(--on-dark-15);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    left: 50%;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 100vw;
  }

  .site-header__menu.is-open {
    display: flex;
  }

  .site-header__group {
    display: block;
    margin: 0;
    width: 100%;
  }

  .site-header__group>div {
    height: 100%;
  }

  .site-header .menu .menu__wrapper {
    align-items: center;
    flex-direction: column;
    width: 100%;
  }

  /* Top-level rows */
  .site-header .menu .menu__item--depth-1 {
    border-top: 1px solid var(--on-dark-15);
    justify-content: center;
    padding: 0;
    text-align: center;
  }

  .site-header .menu .menu__link {
    color: var(--color-white);
    font-family: var(--font-body);
    font-variant: lining-nums;
    font-size: 1.25rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  .site-header .menu .menu__item--depth-1>.menu__link {
    justify-content: center;
    padding: 1.15rem 2.5rem;
    width: 100%;
  }

  /* Open row gets a faint highlight that also wraps its children */
  .site-header .menu .menu__item--open {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* Chevron toggle (replaces the module's plus glyph) */
  .site-header .menu .menu__child-toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 16px;
    margin-right: 2.5rem;
  }

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

  /* Sub-levels — full width: the dropdowns' max-content width (desktop,
     long FR labels) would leave them short of the screen's edge. */
  .site-header .menu .menu__submenu {
    min-width: 0;
    width: 100%;
  }

  /* Sub-levels — indented, muted, transparent over the row highlight */
  .site-header .menu .menu__submenu .menu__item {
    background-color: transparent;
    border-top: 1px solid var(--on-dark-15);
  }

  .site-header .menu .menu__submenu .menu__link {
    color: var(--on-dark-80);
    font-size: 1.05rem;
    padding: 0.85rem 2.5rem;
  }

  .site-header .menu .menu__submenu--level-3 .menu__link {
    padding-left: 2.5rem;
  }

  .site-header__utility {
    display: none;
  }

  /* Social icons close the opened panel, centred under the last row */
  .site-header__social--panel {
    border-top: 1px solid var(--on-dark-15);
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    order: 4; /* after both nav groups (orders 1 and 3) */
    padding: 1.25rem 2.5rem;
    width: 100%;
  }

  /* Contact details centred like the rows above, text left of its icon. */
  .site-header .menu .menu__submenu .menu__contact {
    align-items: center;
    padding: 1rem 2.5rem 1.25rem;
  }

  .site-header .menu__contact-link {
    text-align: left;
  }
}

/* ==========================================================================
   Compact header — main.js adds .site-header--compact once the page has
   scrolled past 60px and drops it back under 20px (the gap keeps it from
   flickering at the threshold). The utility row folds away, the bar slims
   (108 → 76px from 1300px, 89 → 68px below) and the logo shrinks in place,
   about its centre (its left edge below 1300px), so nothing beside it moves.
   The page's padding-top keeps the expanded height (--site-header-height):
   the content never moves under the header. Sticky bars follow the live one
   (--site-header-current-height); anchor offsets use the compact one
   (--site-header-compact-height), where a jump down the page ends.
   ========================================================================== */

/* Folded: no height, and out of the tab order (visibility switches off once
   the fold is over, back on as soon as it unfolds). */
.site-header--compact .site-header__utility {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
}

.site-header--compact .site-header__utility-inner {
  min-height: 0;
  overflow: hidden;
}

/* 63px + the 5px yellow rule = 68px below 1300px. From 1300px the menu
   links set the bar's height (below), above this floor. */
.site-header--compact .site-header__inner {
  min-height: 63px;
}

.site-header__brand--mobile img {
  transform-origin: left center;
}

.site-header--compact .site-header__brand img {
  transform: scale(0.76);
}

@media (min-width: 1300px) {
  /* 14 + 26.7 + 14 + the items' 2 × 8px = 71px + the 5px rule = 76px.
     The drop-downs hang from the items (top: 100%): still right under it. */
  .site-header--compact .menu__item--depth-1 > .menu__link {
    padding-bottom: 14px;
    padding-top: 14px;
  }

  .site-header--compact .site-header__brand img {
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__utility {
    transition:
      grid-template-rows 250ms ease-out,
      opacity 250ms ease-out,
      visibility 0s;
  }

  .site-header--compact .site-header__utility {
    transition:
      grid-template-rows 250ms ease-out,
      opacity 250ms ease-out,
      visibility 0s linear 250ms;
  }

  .site-header__utility-inner,
  .site-header__inner {
    transition: min-height 250ms ease-out;
  }

  .site-header__brand img {
    transition: transform 250ms ease-out;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1300px) {
  .site-header .menu__item--depth-1 > .menu__link {
    transition: padding 250ms ease-out;
  }
}

/* ==========================================================================
   Docked social strip (>=1300px, Teamwork 51279411: "on scroll la top bar
   va se mettre sticky à gauche dans le gutter"; moved to the right edge
   with yellow to stand out, Teamwork 51279597). While the header is
   compact, the utility row's own list (no second copy of the links) leaves
   the folded row and docks as a fixed vertical strip on the viewport's
   right edge, in the page gutter, under the compact header: yellow icons
   (white on hover/focus) and a 3px yellow border on its inner (left) edge.
   main.js (SiteHeaderSocialDock) drives three classes on the header:
   --social-docked: the list is the fixed strip (off-screen to the right);
   --social-shown: it has slid in;
   --social-leaving: --social-shown is gone, the strip slides out.
   Once the slide-out is over, --social-docked and --social-leaving go and
   the list fades back into the row.
   Fixed and out of flow, the strip never counts in the header's height
   (the row's 28px is its min-height, not the list's). Nothing on the
   header's ancestors (transform, filter, contain) traps it: checked live.
   Below 1300px the row is display: none, list included: the classes do
   nothing there.
   ========================================================================== */

@media (min-width: 1300px) {
  /* The folded row's opacity would hide the strip with it (opacity reaches
     fixed descendants): the row folds by its height alone, black on the
     black bar. Its visibility: hidden stays, the strip overrides it. */
  .site-header--social-docked .site-header__utility {
    opacity: 1;
  }

  /* The border sits inside the 2.5rem (border-box); the 3px end padding
     balances it so the icons stay centred on the strip. */
  .site-header--social-docked .site-header__social--utility {
    background-color: var(--color-black);
    border-left: 3px solid var(--color-yellow);
    box-sizing: border-box;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    padding: 0.75rem 3px 0.75rem 0;
    position: fixed;
    right: 0;
    top: calc(var(--site-header-compact-height) + 1.5rem);
    transform: translateX(100%);
    visibility: visible;
    width: 2rem; /* a little under the 40px gutter */
    /* In the header's stacking context: under its drop-downs (menu.module,
       --z-dropdown), over the rest of the header and the page. */
    z-index: calc(var(--z-dropdown) - 1);
  }

  .site-header--social-shown .site-header__social--utility {
    opacity: 1;
    transform: none;
  }

  /* Docked icons keep the row's colours (white, hover as in the row): the
     yellow is the strip's inner border only (client, 2026-10-29). */
}

@media (prefers-reduced-motion: no-preference) {
  /* Back in the row: fades in (the transform snaps, there is nowhere to
     slide from). */
  .site-header__social--utility {
    transition: opacity var(--duration-fast) var(--easing-standard);
  }

  /* The off-screen start is set at once, or the slide-in would begin from
     wherever a transition towards it had got to by the next frame. */
  .site-header--social-docked .site-header__social--utility {
    transition: none;
  }

  .site-header--social-shown .site-header__social--utility,
  .site-header--social-leaving .site-header__social--utility {
    transition:
      opacity var(--duration-fast) var(--easing-standard),
      transform var(--duration-fast) var(--easing-standard);
  }
}

@media print {
  .site-header--social-docked .site-header__social--utility {
    display: none;
  }
}

/* main.js: a state set without animating it (a page reloaded mid-scroll,
   the expanded height measured while compact). */
.site-header--instant,
.site-header--instant * {
  transition: none !important;
}

/* Header heights before main.js measures them (it then overrides these
   inline on :root): bar only below 1300px, utility row + bar above. Keeps
   the content from sliding under the fixed header on first paint.
   --site-header-height: the expanded header (page padding-top);
   --site-header-current-height: the header as drawn, compact or not
   (sticky tops);
   --site-header-compact-height: the compact header, where an anchor jump or
   a scripted scroll ends (scroll-margin-top, product filters, plow matcher). */
:root {
  --site-header-compact-height: 68px;
  --site-header-current-height: 89px;
  --site-header-height: 89px;
}

@media (min-width: 1300px) {
  :root {
    --site-header-compact-height: 76px;
    --site-header-current-height: 136px;
    --site-header-height: 136px;
  }
}
:root {
  --module-padding-block: 3rem;
}

.container {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media (max-width: 767px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}


/* 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%;
}
.module-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.module-header__uptitle-text,
.module-header__title {
  text-transform: uppercase;
}

@media screen and (min-width: 1024px) {
  .module-header {
    flex-direction: row;
    gap: 2rem;
  }

  .module-header__uptitle {
    flex: 1 1 100px;
    max-width: 200px;
  }

  .module-header__content {
    flex: 0 1 464px;
    margin-left: auto;
    max-width: 464px;
  }
}
/* Editorial card */

.editorial-list {
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.editorial-list__item {
  display: flex;
}

/* Filtered out by script (News & Events Upcoming / Past, main.js). */
.editorial-list__item[hidden] {
  display: none;
}

.editorial-card {
  background-color: var(--color-light1);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  position: relative;
}

.editorial-card__content {
  display: flex;
  padding: 0.75rem;
  text-decoration: none;
}

.editorial-card__eyebrow,
.editorial-card__meta {
  font-weight: var(--fw-bold);
  margin: 0;
  text-transform: uppercase;
}

.editorial-card__title {
  margin: 0;
}

.editorial-card__title-link {
  color: inherit;
  font-family: var(--font-secondary);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--duration-fast) linear;
}

.editorial-card__title-link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.editorial-card__title-link:focus-visible {
  outline: none;
}

.editorial-card:hover .editorial-card__title-link,
.editorial-card:focus-within .editorial-card__title-link {
  color: var(--color-yellow);
}

.editorial-card__excerpt {
  margin: 0;
}

.editorial-card__readmore {
  font-family: var(--font-primary);
  font-variant: lining-nums;
  margin-top: auto;
}

.editorial-card:hover .editorial-card__readmore,
.editorial-card:focus-within .editorial-card__readmore {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.editorial-card:focus-within {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .editorial-list--roomy {
    gap: 1.5rem;
  }
}
/* Blog filters */

.blog-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: var(--module-padding-block);
  padding-bottom: var(--module-padding-block);
  /* Cible de l'ancre posée sur chaque onglet : la page rechargée se replace ici
     plutôt qu'en haut. Le header est fixe (barre 84px + filet jaune 4px),
     d'où le décalage réservé. */
  scroll-margin-top: calc(88px + 1.5rem);
}

.blog-filters__legend {
  color: var(--color-dark2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.blog-filters__list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-filters__tab {
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  font-weight: var(--fw-bold);
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--duration-fast) linear,
    color var(--duration-fast) linear;
  font-weight: 500;
}

.blog-filters__tab:hover,
.blog-filters__tab:focus-visible,
.blog-filters__tab.is-active {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.blog-filters__tab-count {
  font-variant-numeric: lining-nums tabular-nums;
}
/* Dark HubSpot form */

.hs-form-dark,
.hs-form-dark .hbspt-form,
.hs-form-dark .hs-form {
  background: transparent;
}

.hs-form-dark .form-title,
.hs-form-dark .hs-form-title {
  background: transparent;
  color: var(--color-white);
}

.hs-form-dark fieldset {
  border: 0;
  margin: 0;
  max-width: none;
  padding: 0;
}

/* Field content sits inset while the submit block keeps the full width, so the
   yellow bar reads wider than the fields. Everything except `.hs_submit` is a
   fieldset (or a hidden input / the submission iframe, which have no box).
   Tune or cancel per module with --hs-form-content-inset. */
.hs-form-dark form.hs-form > *:not(.hs_submit) {
  padding-left: var(--hs-form-content-inset, 1.25rem);
  padding-right: var(--hs-form-content-inset, 1.25rem);
}

.hs-form-dark .hs-richtext {
  color: var(--on-dark-70);
  margin-bottom: 1rem;
}

/* A heading typed in a form's rich text (the FR support form's « Joindre
   notre équipe de soutien », copied from the V4 form) — theme-overrides'
   bare h1–h4 rules paint it #111 on the dark panel. Same look as the V4
   in-form heading (_hubspot-form-v2-dark.css .hsfc-Heading). */
.hs-form-dark .hs-richtext :is(h1, h2, h3, h4) {
  color: var(--color-white);
  font-size: clamp(1.625rem, 1.46rem + 0.69vw, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.hs-form-dark .hs-form-field {
  position: relative;
  border: 1px solid var(--on-dark-25);
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
}

.hs-form-dark .hs-form-field:focus-within {
  border-color: var(--color-yellow);
}

.hs-form-dark .hs-form-field>label {
  color: var(--color-white);
  display: block;
  font-size: 0.8125rem;
  position: absolute;
  top: -10px;
  left: 15px;
  background-color: var(--color-black);
  padding-left: 6px;
  padding-right: 6px;
}

.hs-form-dark .hs-form-required {
  color: #e8a0a0;
  margin-left: 0.15rem;
}

/* Help text under the floating label (e.g. the upload limits on Share your
   story) — otherwise it inherits the page's black body text. */
.hs-form-dark .hs-field-desc {
  color: var(--on-dark-70);
  font-size: 0.8125rem;
  margin: 0.35rem 0 0.25rem;
}

.hs-form-dark .hs-form-field .input {
  margin: 0;
}

.hs-form-dark .hs-input {
  background-color: transparent;
  border: 0;
  color: var(--color-white);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  padding: 0;
  width: 100% !important;
}

.hs-form-dark .hs-input::placeholder {
  color: var(--on-dark-40);
}

.hs-form-dark textarea.hs-input {
  min-height: var(--hs-form-textarea-min-height, 5rem);
  resize: vertical;
}

.hs-form-dark select.hs-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 1.5rem;
}

.hs-form-dark select.hs-input option {
  color: #111111;
}

.hs-form-dark .hs-fieldtype-booleancheckbox,
.hs-form-dark .hs-fieldtype-checkbox,
.hs-form-dark .hs-fieldtype-radio {
  border: 0;
  padding: 0;
}

/* Group label (e.g. "Your Business and Segment:") sits statically above the
   options — not as a floating pill like the bordered text inputs. */
.hs-form-dark .hs-fieldtype-checkbox>label,
.hs-form-dark .hs-fieldtype-radio>label {
  background: transparent;
  font-size: 0.875rem;
  left: auto;
  margin-bottom: 0.25rem;
  padding: 0;
  position: static;
  top: auto;
}

.hs-form-dark .inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.hs-form-dark .inputs-list>li {
  margin: 0;
}

.hs-form-dark .inputs-list label {
  align-items: center;
  color: var(--color-white);
  display: flex;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
}

/* Custom checkbox + radio controls.
   Scoped under .inputs-list and width/height forced with !important to beat
   HubSpot's injected forms CSS, which sets width: auto at higher priority and
   would otherwise collapse the box to a thin vertical line. */
.hs-form-dark .inputs-list .hs-input[type="checkbox"],
.hs-form-dark .inputs-list .hs-input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--on-dark-40);
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  height: 1.125rem !important;
  margin: 0;
  transition: border-color var(--duration-fast) linear,
    background-color var(--duration-fast) linear;
  width: 1.125rem !important;
}

.hs-form-dark .hs-input[type="radio"] {
  border-radius: 50%;
}

.hs-form-dark .hs-input[type="checkbox"]:hover,
.hs-form-dark .hs-input[type="radio"]:hover {
  border-color: var(--color-yellow);
}

.hs-form-dark .hs-input[type="checkbox"]:focus-visible,
.hs-form-dark .hs-input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.hs-form-dark .hs-input[type="checkbox"]:checked {
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  border-color: var(--color-yellow);
}

.hs-form-dark .hs-input[type="radio"]:checked {
  background-image: radial-gradient(var(--color-yellow) 0 35%,
      transparent 40%);
  border-color: var(--color-yellow);
}

.hs-form-dark input[type="file"].hs-input {
  color: var(--on-dark-70);
  font-size: 0.9375rem;
}

.hs-form-dark .hs-error-msgs {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.hs-form-dark .hs-error-msg {
  color: #ff8a8a;
  font-size: 0.8125rem;
}

.hs-form-dark .hs_submit .actions {
  margin: 1.5rem 0 0;
  padding: 0;
}

.hs-form-dark .hs-button {
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTAuNzY5MkgxOS4wMzI1TDEwLjg3NTcgMTguODQ2MkwxMS45MDExIDIwTDIyIDEwTDExLjkwMTEgMEwxMC44NzU3IDEuMTUzODVMMTkuMDMyNSA5LjIzMDc3SDBWMTAuNzY5MloiIGZpbGw9IiMxMTExMTEiLz4KPC9zdmc+Cg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
  color: var(--color-black);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  padding: 1rem 1.25rem;
  text-align: left;
  transition: filter var(--duration-fast) linear;
  width: 100%;
  font-weight: 500;
}

.hs-form-dark .hs-button:hover,
.hs-form-dark .hs-button:focus {
  filter: brightness(0.95);
  background-color: var(--color-yellow);
  border-radius: 0;
  color: var(--color-black);
}

/* Inline thank-you message that replaces the form after a submission —
   theme-overrides gives `.submitted-message` the theme's light form fill
   (#F5F5F5) under the panel's white text. Same outline as the fields, with a
   yellow edge so the confirmation stands out on the black panel. */
.hs-form-dark .submitted-message {
  background-color: transparent;
  border: 1px solid var(--on-dark-25);
  border-left: 4px solid var(--color-yellow);
  border-radius: 0;
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: 1.5;
  padding: 1.25rem 1.5rem;
}

.hs-form-dark .submitted-message p {
  margin: 0 0 0.75rem;
}

.hs-form-dark .submitted-message > :last-child {
  margin-bottom: 0;
}

.hs-form-dark .submitted-message a {
  color: var(--color-yellow);
}

/* HubSpot .form-columns-2 / -3 → two or three columns above the smallest
   phones. HubSpot's own CSS floats the fields at 50% / 33.33% with no gutter;
   flex + gap replaces that, and flex-shrink absorbs the percentage widths. */
@media (min-width: 480px) {
  .hs-form-dark .form-columns-2,
  .hs-form-dark .form-columns-3 {
    display: flex;
    gap: 1rem;
  }

  .hs-form-dark .form-columns-2 .hs-form-field,
  .hs-form-dark .form-columns-3 .hs-form-field {
    flex: 1;
    float: none;
    min-width: 0;
  }
}

.hs-form-dark .hs-fieldtype-text .hs-error-msgs.inputs-list {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background-color: var(--color-black);
}

.hs-form-dark form.hs-form .hs-error-msgs.inputs-list > li {
  margin: 0;
}

.hs-form-dark .hs-error-msgs.inputs-list label {
  font-size: 12px;
  line-height: 1.1;
  color: var(--color-red);
}
/* Dark HubSpot form — V2 renderer (hsfc-*)

   Same visual language as the V1 rules in _hubspot-form-dark.css (bordered
   field boxes, floating label pill on the black background, transparent
   borderless inputs, yellow arrow submit), applied to the markup the new
   embed ships: `[data-hsfc-id="Renderer"] .hsfc-*`.

   Two override channels are used, on purpose:

   1. `--hsf-*` custom properties on the .hs-form-dark wrapper. The renderer's
      injected CSS reads every value as `var(--hsf-X, var(--hsf-default-X))`
      and only ever sets the `--hsf-default-*` tier itself, so setting the
      `--hsf-*` tier here wins by inheritance — no specificity contest.
   2. Real rules for what has no variable (floating label, field box, arrow,
      checked states, dropdown popup). Those carry the
      `.hs-form-dark [data-hsfc-id="Renderer"]` prefix: the renderer's own CSS
      is injected into <head> at runtime, i.e. AFTER this stylesheet, so ties
      go to HubSpot and every rule below needs one compound more than theirs.
*/

.hs-form-dark {
  /* Global */
  --hsf-global__font-family: var(--font-body);
  --hsf-global__font-size: 1rem;
  --hsf-global__color: var(--color-white);
  --hsf-global__error-color: #ff8a8a;

  /* Layout — the step is a bare panel, spacing matches the V1 1rem rhythm */
  --hsf-background__padding: 0;
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-style: none;
  --hsf-background__border-width: 0;
  --hsf-background__border-radius: 0;
  --hsf-row__vertical-spacing: 1rem;
  --hsf-row__horizontal-spacing: 1rem;
  --hsf-module__vertical-spacing: 0;

  /* Text */
  --hsf-heading__font-family: var(--font-secondary);
  --hsf-heading__color: var(--color-white);
  --hsf-heading__text-shadow: none;
  --hsf-richtext__color: var(--on-dark-70);
  --hsf-richtext__font-size: 0.875rem;
  --hsf-infoalert__color: var(--on-dark-70);
  --hsf-erroralert__color: #ff8a8a;
  --hsf-erroralert__font-size: 0.8125rem;

  /* Labels & help text */
  --hsf-field-label__font-size: 0.8125rem;
  --hsf-field-label__color: var(--color-white);
  --hsf-field-label-requiredindicator__color: #e8a0a0;
  --hsf-field-description__color: var(--on-dark-70);
  --hsf-field-description__font-size: 0.8125rem;
  --hsf-field-footer__color: var(--on-dark-70);
  --hsf-field-footer__font-size: 0.8125rem;

  /* Inputs — the border lives on the field box, the control itself is bare.
     Type size mirrors what V1 actually RENDERS: `.hs-form-dark .hs-input`
     asks for 1rem, but _forms.css `form.hs-form input[type=text]` (0,2,2)
     outranks it (0,2,0), so the shipped look is 0.875rem.
     The inner padding is the field height knob: V1 renders 0.7rem (53px
     boxes), V2 runs 0.85rem for a slightly roomier box (~58px). */
  --hsf-field-input__font-size: 0.875rem;
  --hsf-field-input__padding: 0.85rem;
  --hsf-field-input__color: var(--color-white);
  --hsf-field-input__background-color: transparent;
  --hsf-field-input__placeholder-color: var(--on-dark-40);
  --hsf-field-input__border-color: transparent;
  --hsf-field-input__border-style: none;
  --hsf-field-input__border-width: 0;
  --hsf-field-input__border-radius: 0;
  --hsf-field-textarea__font-size: 0.875rem;
  --hsf-field-textarea__padding: 0.85rem;
  --hsf-field-textarea__color: var(--color-white);
  --hsf-field-textarea__background-color: transparent;
  --hsf-field-textarea__placeholder-color: var(--on-dark-40);
  --hsf-field-textarea__border-color: transparent;
  --hsf-field-textarea__border-style: none;
  --hsf-field-textarea__border-width: 0;
  --hsf-field-textarea__border-radius: 0;
  --hsf-field-dropdown-options__border-radius: 0;

  /* Checkboxes & radios — 8px padding + 1px border reads as the V1 1.125rem box */
  --hsf-field-checkbox__background-color: transparent;
  --hsf-field-checkbox__border-color: var(--on-dark-40);
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__padding: 0.5rem;
  --hsf-field-checkbox__color: var(--color-black);
  --hsf-field-radio__background-color: transparent;
  --hsf-field-radio__border-color: var(--on-dark-40);
  --hsf-field-radio__border-style: solid;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__padding: 0.5rem;
  --hsf-field-radio__color: var(--color-yellow);

  /* Submit — square yellow bar, label left, arrow right */
  --hsf-button__font-family: var(--font-body);
  --hsf-button__font-size: 1.125rem;
  --hsf-button__font-weight: var(--fw-medium);
  --hsf-button__color: var(--color-black);
  --hsf-button__background-color: var(--color-yellow);
  --hsf-button--hover__color: var(--color-black);
  --hsf-button--hover__background-color: var(--color-yellow);
  --hsf-button--focus__color: var(--color-black);
  --hsf-button--focus__background-color: var(--color-yellow);
  --hsf-button__background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTAuNzY5MkgxOS4wMzI1TDEwLjg3NTcgMTguODQ2MkwxMS45MDExIDIwTDIyIDEwTDExLjkwMTEgMEwxMC44NzU3IDEuMTUzODVMMTkuMDMyNSA5LjIzMDc3SDBWMTAuNzY5MloiIGZpbGw9IiMxMTExMTEiLz4KPC9zdmc+Cg==");
  --hsf-button__border-style: none;
  --hsf-button__border-width: 0;
  --hsf-button__border-radius: 0;
  --hsf-button__padding: 1rem 1.25rem;
  --hsf-button__box-shadow: none;
  --hsf-button__width: 100%;

  /* Multi-step progress bar */
  --hsf-progressbar-text__color: var(--color-white);
  --hsf-progressbar-progressLine__background-color: var(--color-yellow);
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-style: none;
  --hsf-progressbar-trackLine__background-color: var(--on-dark-25);
}

/* In-form heading — V2 lets editors put the title inside the form, where V1
   relied on the module heading. Match the module look (.text-h4): condensed
   secondary face, uppercase, 32px on desktop. */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-Heading {
  font-size: clamp(1.625rem, 1.46rem + 0.69vw, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Field box — one bordered rectangle per field, like .hs-form-field in V1.
   Checkbox/radio groups and consent blocks are deliberately excluded. */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-EmailField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-NumberField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-URLField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DateField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileField,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileFieldAsync {
  border: 1px solid var(--on-dark-25);
  padding: 0.4rem 1rem;
  position: relative;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-EmailField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-NumberField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-URLField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DateField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileField:focus-within,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileFieldAsync:focus-within {
  border-color: var(--color-yellow);
}

/* Floating label pill, straddling the box border on the black background */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-EmailField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-NumberField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-URLField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DateField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileField > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileFieldAsync > .hsfc-FieldLabel {
  background-color: var(--color-black);
  left: 15px;
  margin: 0;
  padding: 0 6px;
  position: absolute;
  top: -10px;
  width: auto;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 0.15rem;
}

/* Inputs */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextInput,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
  box-shadow: none;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextInput:hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextInput:active,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaInput:hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaInput:active {
  box-shadow: none;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
  min-height: var(--hs-form-textarea-min-height, 5rem);
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileInput,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-FileInputAsync {
  color: var(--on-dark-70);
  font-size: 0.9375rem;
}

/* Phone country picker — the flag block keeps a hairline divider */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret {
  margin-right: 0.5rem;
  padding: 0 0.5rem 0 0;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret {
  border-right: 1px solid var(--on-dark-25);
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PhoneInput--rtl .hsfc-PhoneInput__FlagAndCaret {
  border-left: 1px solid var(--on-dark-25);
}

/* Dropdown caret + options popup (the popup inherits the input vars, which are
   transparent here — it needs its own dark surface to stay readable) */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret {
  padding: 0;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions {
  background-color: var(--color-black);
  border: 1px solid var(--on-dark-25);
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 0.5rem 1rem;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--selected {
  background-color: var(--on-dark-15);
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__Search .hsfc-TextInput {
  border: 1px solid var(--on-dark-25);
  padding: 0.4rem 0.5rem;
}

/* Checkbox & radio groups — static group label, options on a wrapping row */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup > .hsfc-FieldLabel {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxFieldGroup__Options,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup__Options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxFieldGroup__Options > *:not(:last-child),
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup__Options > *:not(:last-child) {
  margin-bottom: 0;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxField label,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxFieldGroup__Options label,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup__Options label {
  color: var(--color-white);
  font-size: 1rem;
  justify-content: flex-start;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioInput:hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:focus,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioInput:focus,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:active,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioInput:active {
  border-color: var(--color-yellow);
  box-shadow: none;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:focus-visible,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioInput:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:checked {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-RadioInput:checked {
  border-color: var(--color-yellow);
}

/* Submit */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-NavigationRow {
  margin-top: 1.5rem;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-Button {
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  text-align: left;
  transition: filter var(--duration-fast) linear;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover,
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):focus {
  filter: brightness(0.95);
  transform: none;
}

.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):active {
  transform: none;
}

/* Inline link buttons ("Not you? Click here to reset", shortened-form links) —
   the renderer hardcodes a dark navy that disappears on the black panel. */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-LinkButton {
  color: var(--color-white);
}

/* Post-submit message */
.hs-form-dark [data-hsfc-id="Renderer"] .hsfc-PostSubmit .hsfc-RichText {
  color: var(--on-dark-70);
}
/* Accordion section
Shared header + panel for the collapsible product-page sections
(Feature, Technical information, Blade positions, Inclusions).
Each module is a single <details>; the <summary> is the header bar:
eyebrow ——— rule ——— +/- toggle. Markup via the accordion_header macro
(_macros/components.html); the open state is the open_by_default field.
*/

.accordion-section {
  padding: calc(var(--module-padding-block) / 2) var(--space-gutter);
}

.accordion-section__header {
  position: relative;
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1.25rem;
  list-style: none;
  transition: color var(--duration-fast) var(--easing-standard);
}

.accordion-section__header::-webkit-details-marker {
  display: none;
}

.accordion-section__eyebrow {
  color: inherit;
  flex: none;
  font-family: var(--font-body);
  font-variant: lining-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accordion-section__rule {
  background-color: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 1px;
}

.accordion-section__toggle {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  right: 0;
  top: .5rem;
}

.accordion-section__toggle::after {
  content: "+";
}

.accordion-section[open] .accordion-section__toggle::after {
  content: "\2212";
}

.accordion-section__header:hover {
  color: var(--color-yellow);
}

.accordion-section__panel {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 1024px) {
  .accordion-section__panel {
  }

  /* Content sits in the right half (left column intentionally empty). */
  .accordion-section__panel--aside {
    margin-left: auto;
    width: 50%;
  }
}
/* Product card
   Shared catalog card rendered by the components.product_card macro — used by
   product-filters (HubDB catalog) and related-products (curated repeater). Two-tone
   name (dark1 + dark2 accent — yellow fails contrast on the light card), 231/130
   media panel with optional badge, description, and Vehicles/Activities tag pills
   with a "+N" overflow. The name-link is stretched so the whole card is clickable
   while the tags stay non-interactive. Lives in the global components layer so both
   modules render correctly whether or not the other is on the page. */

.product-card {
  background-color: var(--color-light1);
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.product-card__media {
  aspect-ratio: 231 / 130;
  background-color: var(--color-dark2);
  background-image: linear-gradient(135deg, var(--color-dark2) 0%, var(--color-black) 100%);
  overflow: hidden;
  position: relative;
}

/* contain, not cover: the renders are wide plows on a transparent background,
   and cover cut their wings off (client review 2026-09-23, BugHerd #16). The
   media box's dark gradient fills the letterbox. */
.product-card__image {
  display: block;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duration-slow) ease;
  width: 100%;
}

/* Placeholder shown when the product has no image. */
.product-card__media--empty {
  align-items: center;
  display: flex;
  justify-content: center;
}

.product-card__placeholder {
  color: var(--on-dark-25);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card__badge {
  align-items: center;
  background-color: var(--on-dark-15);
  border-radius: var(--radius-xs);
  bottom: 0.75rem;
  display: inline-flex;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  position: absolute;
  right: 0.75rem;
}

.product-card__badge-icon {
  display: block;
  height: 2.25rem;
  width: auto;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* The family leads at heading size, two-toned as the design draws it: the first
   token yellow, the rest dark. The model code follows, small. Oswald 700, the
   weight of the product page title (Teamwork 50853855); 600 isn't loaded. */
.product-card__family {
  color: var(--color-yellow);
  display: block;
  font-weight: 700;
  line-height: 1;
}

.product-card__family .product-card__name-accent {
  color: var(--color-dark2);
}

/* Surtitre type from the design: Oswald Medium 16 / 1, 2px tracking. */
.product-card__model {
  color: var(--color-dark2);
  display: block;
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.125em;
  line-height: 1;
  margin-top: 0.5rem;
}

/* No family (curated cards): the model code is the heading, so it keeps the
   heading type instead of the small treatment. */
.product-card__model--lead {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-top: 0;
}

/* Dark by default on the light card; the family line overrides to yellow above. */
.product-card__name {
  color: var(--color-dark2);
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}

/* Everywhere else the accent just follows its line's colour. */
.product-card__name-accent {
  color: inherit;
}

/* Font restated: theme-overrides' `a` (Raleway 400) would otherwise replace the
   heading's Oswald — only linked names were Raleway. */
.product-card__name-link {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* Stretch the name link across the whole card so the card is clickable without
   wrapping the (non-link) tags in an anchor. */
.product-card__name-link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.product-card__name-link:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image {
  transform: scale(1.04);
}

.product-card__desc {
  color: var(--color-dark2);
  margin: 0;
}

.product-card__desc p {
  margin: 0;
}

.product-card__taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-card__tax {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.product-card__tax-label {
  color: var(--color-dark1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-secondary);
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card__tag {
  background-color: var(--surface-pill);
  border-radius: var(--radius-pill);
  color: var(--color-dark1);
  font-weight: 600;
  padding: 0.45rem 1rem;
  white-space: nowrap;
}

/* Clickable pills fade to their hover colours instead of snapping (Teamwork
   50853738): the model links of a range card, the Plow Matcher's sizes and the
   "+ N" toggle. Plain <li> tags have no hover, so no transition. */
a.product-card__tag,
.product-card__tag--more {
  transition: background-color var(--duration-medium) ease-in-out,
    color var(--duration-medium) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  a.product-card__tag,
  .product-card__tag--more {
    transition: none;
  }
}

/* --- Family card (components.product_family_card) ---
   One range, its models listed as pills that link to each model page. Used by
   product-filters when models are grouped by family. */

/* On a model card the tags sit at the bottom (margin-top: auto) under a
   description that fills the space. A range has no description, so the same rule
   would dig a gap under short names (VMaxx) — the content keeps its natural flow. */
.product-card--family .product-card__taxonomy {
  margin-top: 0;
}

/* The model pills take their own full row under Vehicles / Activities. */
.product-card__tax--models {
  flex-basis: 100%;
}

/* Above the family card's stretched name-link (::after, inset 0), so a model
   pill opens its size, not the family page. Oswald, not the body Raleway: 500 is
   the loaded weight (600 would snap to 700). */
.product-card__tax--models .product-card__tag {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-secondary);
  font-weight: 500;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

/* Colour restated on hover: theme-overrides' `a:hover` would otherwise win. */
.product-card__tax--models a.product-card__tag:hover,
.product-card__tax--models a.product-card__tag:focus-visible {
  background-color: var(--color-yellow);
  color: var(--color-dark1);
}

/* "Top pick" sizes (BugHerd #55): filled yellow pill + star, explained by the
   note under the pills — as on the family page's showcase. Hover goes black,
   since the plain pills already turn yellow. */
.product-card__tax--models .product-card__tag--top-pick {
  background-color: var(--color-yellow);
  color: var(--color-black);
  gap: 0.375rem;
}

.product-card__tax--models a.product-card__tag--top-pick:hover,
.product-card__tax--models a.product-card__tag--top-pick:focus-visible {
  background-color: var(--color-black);
  color: var(--color-yellow);
}

.product-card__tag--top-pick .icon,
.product-card__top-pick-note .icon {
  flex: none;
  height: 0.75rem;
  width: 0.75rem;
}

/* Smaller than the pills it explains: a legend, not content. */
.product-card__top-pick-note {
  align-items: center;
  color: var(--color-dark2);
  display: flex;
  font-size: 0.75rem;
  gap: 0.25rem;
  justify-content: flex-end;
  line-height: 1.2;
  margin: 0.5rem 0 0;
}

.product-card__top-pick-note .icon {
  color: var(--color-yellow);
  height: 0.625rem;
  width: 0.625rem;
}

/* display: flex above would beat the UA [hidden] rule: product-filters hides
   the legend while every starred pill is behind the "+ N". */
.product-card__top-pick-note[hidden] {
  display: none;
}

.product-card__sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Black, not yellow: the ring sits on the light card, where brand yellow drops
   to 1.49:1 and disappears for keyboard users. */
.product-card__tax--models a.product-card__tag:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* 44px touch target on small screens only; above that the pill keeps the exact
   height of the model-card tags (it already clears WCAG 2.5.8's 24px). */
@media (max-width: 767px) {
  .product-card__tax--models .product-card__tag {
    min-height: 44px;
  }
}

/* --- "+ N" row toggle ---
   The button at the end of a tag row that reveals the rest: Vehicles / Activities
   (ProductCardTags in js/main.js) and the model pills of a range card
   (product-filters). Same pill as the tags, yellow on hover like the model links.
   It sits above the stretched name-link of a model card (::after, inset 0),
   which would otherwise take its clicks. */
.product-card__tag--more {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  z-index: 1;
}

.product-card__tag--more:hover,
.product-card__tag--more:focus-visible {
  background-color: var(--color-yellow);
  color: var(--color-dark1);
}

.product-card__tag--more:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Tags revealed by the toggle, and filtered-out model pills: `hidden` must win
   over any display a pill rule sets. */
.product-card__tags [hidden] {
  display: none;
}
/* "Find my size" modal (BugHerd #43) — the <dialog> of
   templates/partials/size-finder.html holding the plow matcher, on the family,
   home and industry pages; opened by any [data-size-finder-open] (SizeFinder
   in js/main.js). Global since it left the family pages (Teamwork 50912199). */

.size-finder {
  background-color: var(--color-black);
  border: 0;
  color: var(--color-white);
  max-height: calc(100dvh - 2rem);
  max-width: min(75rem, calc(100vw - 2rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  width: 100%;
}

.size-finder::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* The page behind doesn't scroll while the modal is open. */
html:has(.size-finder[open]) {
  overflow: hidden;
}

.size-finder__close {
  align-items: center;
  background-color: var(--color-yellow);
  border: 0;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  position: sticky;
  float: right;
  top: 0;
  width: 2.75rem;
  z-index: 1;
}

.size-finder__close svg {
  height: 0.875rem;
  width: 0.875rem;
}

.size-finder__close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}

/* The "See all" link repeated under the matcher (data-size-finder-open="all"). */
.size-finder__all {
  clear: both;
  margin: 0;
  padding: 0 var(--space-gutter) var(--space-gutter);
  text-align: center;
}

.size-finder__all-link {
  color: var(--color-yellow);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.size-finder__all-link:hover {
  color: var(--color-white);
}

/* Desktop: the three dropdowns (equipment, size, industry) side by side in
   three equal columns, the "Find a plow" button across under them (Teamwork
   51279369). Overrides the module's two-by-two catalog grid in the modal only:
   the home page's matcher keeps its own layout. */
@media (min-width: 1024px) {
  .size-finder .plow-matcher__fields--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* A third of the dialog is too narrow for the module's 36px trigger
     ("Sidewalk Specialty Vehicle" was cut): smaller type, and a long choice
     wraps to a second line instead of ending in "…". */
  .size-finder .plow-matcher__trigger {
    font-size: 1.25rem;
  }

  .size-finder .plow-matcher__trigger-text {
    white-space: normal;
  }
}

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

/* Vertical focus of an image cropped by object-fit: cover — which band of the
   photo stays visible (imagePositionField + components.image options.position,
   BugHerd #30). Centre is the browser default and needs no class. */

.object-pos-top {
  object-position: 50% 0%;
}

.object-pos-upper {
  object-position: 50% 25%;
}

.object-pos-lower {
  object-position: 50% 75%;
}

.object-pos-bottom {
  object-position: 50% 100%;
}

/* Exact point of the height / width (imageOffsetField, BugHerd #91): the
   percentages travel in custom properties set by components.image(). */
.object-pos-custom {
  object-position: var(--object-pos-x, 50%) var(--object-pos-y, 50%);
}
/* Color utilities
Tailwind-style helper classes for the Metal Pless brand palette (MP-*
in Figma). Each brand color gets a text and a background utility, the
same way Tailwind's text-* and bg-* utilities do. Loaded in the
utilities layer so they override element and component styles.

The palette is exposed as CSS custom properties on :root, seeded from
the "Global colors" theme settings, so the utilities stay in sync when
an editor changes the palette.
*/

:root {
  --color-yellow: #F3C600;
  --color-black: #111111;
  --color-dark1: #262626;
  --color-dark2: #454545;
  --color-light1: #F5F5F5;
}

/* Text color */

.text-yellow {
  color: var(--color-yellow);
}
.text-black {
  color: var(--color-black);
}
.text-dark1 {
  color: var(--color-dark1);
}
.text-dark2 {
  color: var(--color-dark2);
}
.text-light1 {
  color: var(--color-light1);
}

/* Background color */

.bg-yellow {
  background-color: var(--color-yellow);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-dark1 {
  background-color: var(--color-dark1);
}
.bg-dark2 {
  background-color: var(--color-dark2);
}
.bg-light1 {
  background-color: var(--color-light1);
}
/* Flex & grid utilities
Tailwind-style helper classes scoped to flexbox and grid layout. Single-class
selectors, loaded in the utilities layer so they override component styles.
Gap follows Tailwind's spacing scale (1 unit = 0.25rem).

Scope note: this file used to generate the full Tailwind matrix (gap-x/gap-y,
col-start/col-end, order-*, place-*, auto-cols/rows, row-* ... x sm/md/lg) — 647
selectors, of which the theme used ~20. It was trimmed to the families actually
used plus a small safety margin (full grid-cols/col-span/gap base scale, and
grid-cols/col-span at the sm/md/lg breakpoints). If you need a dropped family,
add just that family back rather than regenerating the whole matrix.
Breakpoints: sm 640px (legacy — only grid-cols), md 768px, lg 1024px.
*/

/* Display */

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

/* Flex direction */

.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}

/* Flex wrap */

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

/* Flex */

.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}

/* Grow & shrink */

.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}

/* Align items */

.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}

/* Justify content */

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

/* Align self */

.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}

/* Grid template columns */

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-none {
  grid-template-columns: none;
}

/* Column span */

.col-auto {
  grid-column: auto;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-full {
  grid-column: 1 / -1;
}

/* Gap */

.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}

/* Responsive — grid-cols & col-span only (the families used across breakpoints) */

@media (min-width: 640px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-full {
    grid-column: 1 / -1;
  }
}
/* Vertical spacing utilities
Tailwind-style helper classes for vertical margin and padding (top, bottom,
and the y-axis shorthand). Loaded in the utilities layer so they override
component styles. Scale follows Tailwind's spacing scale (1 unit = 0.25rem),
matching the gap utilities in _flex-grid.css.

Scope note: trimmed from the full Tailwind scale (147 selectors incl. .mt-px,
.mt-0.5 ... .mt-96 and the negative-margin set) to a common subset. Add a step
back if a design needs it rather than regenerating the whole scale.
*/

/* Margin · top */

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}

/* Margin · bottom */

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}

/* Margin · y-axis */

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-16 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/* Padding · top */

.pt-0 {
  padding-top: 0;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}

/* Padding · bottom */

.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}

/* Padding · y-axis */

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* Text style utilities
Tailwind-style helper classes for the Metal Pless text styles (MTPL-*
in Figma). Each class bundles font-size + line-height, the same way
Tailwind's text-* utilities do. Loaded in the utilities layer so they
override element styles.

Headings use fluid typography: font-size scales smoothly with the
viewport via clamp(min, preferred, max), interpolated linearly between
a 375px and a 1240px viewport. The max is the exact Figma px value
(converted to rem, 16px root); the min is a mobile-readable floor.
Body styles (<= 24px) are already mobile-appropriate and stay fixed.

Font family and weight are not set here — add them per style if the
design system requires more than size and line-height.
*/

/* Headings — fluid (mobile floor → Figma desktop size) */

.text-h1 {
  /* Desktop: 135px */
  font-size: clamp(2.75rem, 1.35rem + 5.9vw, 8.4375rem);
  line-height: 1;
  font-family: var(--font-secondary);
}
/* French: an accented capital (À, É) rises above the cap height and Ç hangs
   below the baseline, so at line-height 1 they touch the next line. Same 1.2
   as the other heading styles (Teamwork 50986663). */
html[lang^="fr"] .text-h1 {
  line-height: 1.2;
}
.text-h1-product {
  /* Desktop: 100px */
  font-size: clamp(2.25rem, 0.52rem + 7.4vw, 6.25rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.text-h2 {
  /* Desktop: 72px */
  font-size: clamp(2.125rem, 1.1rem + 4.39vw, 4.5rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.text-h-cta {
  /* Desktop: 100px */
  font-size: clamp(2.25rem, 0.52rem + 7.4vw, 6.25rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.text-h3 {
  /* Desktop: 56px */
  font-size: clamp(1.875rem, 1.17rem + 3.01vw, 3.5rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.text-h4 {
  /* Desktop: 32px */
  font-size: clamp(1.625rem, 1.46rem + 0.69vw, 2rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.text-h5 {
  /* Desktop: 36px */
  font-size: clamp(1.75rem, 1.53rem + 0.93vw, 2.25rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}

/* Stats — fluid, gentle reduction */

.text-stat-desc {
  /* Desktop: 36px */
  font-size: clamp(1.75rem, 1.53rem + 0.93vw, 2.25rem);
  line-height: 1.2;
}

/* Body — fixed (already mobile-appropriate) */

.text-normal {
  /* Desktop: 18px */
  font-size: 1.125rem;
  line-height: 1.3;
}
.text-large {
  /* Desktop: 24px */
  font-size: 1.5rem;
  line-height: 1.4;
}
.text-small {
  /* Desktop: 16px */
  font-size: 1rem;
  line-height: 1.4;
}
.text-surtitre {
  /* Desktop: 16px */
  font-size: 1rem;
  line-height: 1.2;
}
.text-tag {
  /* Desktop: 14px */
  font-size: 0.875rem;
  line-height: 1.2;
}
.text-table-title {
  /* Desktop: 18px */
  font-size: 1.125rem;
  line-height: 1.2;
}