/* Theme base styles */

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

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

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

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: 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;
}

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

img,
picture,
svg {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  font-style: italic;
  shape-margin: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

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

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

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

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

section[data-column-injected="no"],
div[data-column-injected="no"] {
  padding: 0 1rem;
}

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

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

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

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

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

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

/* Paragraphs */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Image alt text */

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

.button_icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
}

.button_icon svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
}

button:disabled,
.button:disabled,
.hs-button:disabled,
/* Needed on its own: .hs-button.primary carries the primary colours at two
   classes, which would otherwise outrank the plain :disabled selector while
   HubSpot disables the submit during form submission. */
.hs-button.primary:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

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

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

/* Labels */

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

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

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

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

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

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

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  text-transform: none !important;
  margin-left: 0 !important;;
  line-height: 1.6 !important;
}

.contact-form-wrapper .hs-form-field label.hs-form-booleancheckbox-display {
  display: flex;
}


/* Validation */

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

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

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

/* Submit button */

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

/* Captcha */



/* Table */

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

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

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

/* Header DND sections */

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

.header .dnd-area {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.header__navigation {
  width: 100%;
}

.header__grid {
  display: grid;
  /* minmax(0, 1fr): column 1 can shrink so logo scales and column 2 (socials/actions) is not crushed */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 32px;
  align-items: center;
  padding: 0 1rem;
  width: 100%;
  position: relative;
  overflow: visible;
}

/* HubSpot wraps custom module output in a div; the grid must see logo/actions/nav/search as
   direct children. Flatten the module wrapper; inner .header__grid-mega-root is also
   display:contents in module.html so the four cells participate in this grid. */
.header__grid > *:not(.header__search-desktop-wrap) {
  display: contents;
}

/* Grid cell for desktop search only; children moved to #hs-live-header-search-mount-mobile ≤980px. */
.header__search-desktop-wrap:empty {
  display: none !important;
}

/* Off-DOM source for live language module (moved into #hs-live-language-switcher-mount synchronously). */
.hs-live-language-switcher-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header__grid-actions .header__language-switcher {
  padding-right: 0;
  overflow: visible;
  position: relative;
  z-index: 5;
  /* Optional left nudge for legacy v0 dropdown; 0 = flush to switcher’s right edge. */
  --header-lang-dropdown-nudge: 0;
}

/* Match .btn / .btn-primary typography from agriportance-theme.css (label + v1 control only; no button chrome) */
.header__grid-actions .header__language-switcher--label-current,
.header__grid-actions .header__language-switcher .hs-language-switcher__button {
  color: #000;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: capitalize;
  font-style: normal;
}

.header__grid-actions .header__language-switcher .hs-language-switcher__button {
  gap: 8px;
  padding: 0;
}

.header__utility-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #000;
  font-size: 0.875rem;
  text-decoration: none;
}

.header__utility-login:hover,
.header__utility-login:focus {
  color: #000;
  text-decoration: underline;
}

.header__utility-login::after {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-bottom: 0.15em;
}

.header__utility-divider {
  display: inline-block;
  width: 1px;
  height: 1.125rem;
  background: #dee2e9;
  flex-shrink: 0;
}

.header__utility-social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.header__utility-social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.header__utility-social-link {
  display: inline-flex;
  color: #000;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.header__utility-social-link:hover,
.header__utility-social-link:focus {
  color: #000;
  opacity: 0.75;
}

.header__utility-social-icon {
  display: block;
  flex-shrink: 0;
}

.header__utility-social-link .header__utility-social-img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.header__grid::before {
  content: '';
  position: absolute;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  width: 100vw;
  border-top: 1px solid #f7f7f7;
  pointer-events: none;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
}

.header__search.header--element {
  margin-top: 8px;
}

.header__grid-logo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  align-self: center;
}

/* Logo scales down with the first grid column (HubSpot / brand kit markup uses .header__logo) */
.header__grid-logo .header__logo {
  max-width: min(200px, 100%);
  width: 100%;
  box-sizing: border-box;
}

.header__grid-logo .header__logo img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* When mega-menu logo cell is omitted (logo rendered in sibling column, e.g. modules/header-mega-menu.html) */
.header__grid--suppress-logo .header__grid-actions {
  grid-column: 1 / -1;
}

.header__grid-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  justify-self: end;
  justify-content: flex-end;
  overflow: visible;
}

/* Login, social divider, socials, and menu toggles — pinned to the right */
.header__grid-actions-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 20px;
  margin-left: auto;
  flex-shrink: 0;
}

.header__grid-actions-end .header__utility-social {
  margin-left: 0;
  margin-right: 0;
}

/* Toggles only apply ≤980px; hide empty toggle nodes on desktop so they don't add flex gap after socials */
@media (min-width: 981px) {
  .header__grid-actions-end > .header--toggle {
    display: none;
  }
}

.header__grid-nav {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: 12px;
}

.header__grid-nav > .navbar__mobile__content {
  display: none;
}

.header__grid-nav > .navbar {
  width: 100%;
  max-width: 100%;
}

.header__grid > .header__search-desktop-wrap {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-self: end;
  padding-top: 4px;
  min-width: 0;
}

.header__column {
  width: 100%;
  padding: 0;
}

/* Mega-menu: hide header search below 1220px (grid slot + drawer mount). */
@media (max-width: 1219px) {
  .header__grid:has(#hs-live-header-search-mount-mobile) > .header__search-desktop-wrap,
  #hs-live-header-search-mount-mobile {
    display: none !important;
  }
}

/* ≤980px (mega-menu mobile): top bar = logo + nav toggle only; CTAs / lang / social open in drawer */
@media (max-width: 980px) {
  .header__grid-actions > *:not(.header__grid-actions-end) {
    display: none !important;
  }

  .header__grid-actions-end .header__utility-divider,
  .header__grid-actions-end .header__utility-social {
    display: none !important;
  }

  .header__grid-actions-end .header__language-switcher--toggle {
    display: none !important;
  }

  .header__mobile-menu-extras {
    align-items: flex-end;
    border-top: 1px solid #dee2e9;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    width: 100%;
  }

  .header__utility-social--mobile {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    align-self: flex-end;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
  }

  .module__navbar-animated__header .header__utility-social--mobile,
  .module__navbar-animated__header .header__utility-social--mobile > li {
    width: auto !important;
    max-width: none;
  }

  /* Search lives in the drawer when mega-menu provides #hs-live-header-search-mount-mobile. */
  .header__grid:has(#hs-live-header-search-mount-mobile) > .header__search-desktop-wrap {
    display: none !important;
  }

  body:has(#hs-live-header-search-mount-mobile) .header__search--toggle {
    display: none !important;
  }

  .header__mobile-search-mount {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 0 0 1rem;
    width: 100%;
  }

  .header__mobile-search-mount .header__search {
    border-top: none;
    display: flex !important;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    width: 100%;
  }

  .header__mobile-search-mount .header__search.header--element {
    margin-top: 0;
  }

  .header__mobile-search-mount .hs-search-field__bar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header__mobile-search-mount .hs-search-field__form {
    max-width: 100%;
    min-width: 0;
    width: 100% !important;
  }

  .header__mobile-search-mount .header__search .hs-search-field__input {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: 0;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
  }

  .header__mobile-search-mount .hs-search-field {
    max-width: 100% !important;
    min-width: 0;
    width: 100% !important;
  }

  .header__mobile-search-mount .header__search form {
    width: 100% !important;
    max-width: 100%;
  }

  /*
   * Full-bleed row rule uses 100vw; with a vertical scrollbar, 100vw is wider than the layout
   * box and creates horizontal overflow — often reported on .header__grid-nav (grid row 2).
   */
  .header__grid {
    overflow-x: clip;
  }

  .header__grid::before {
    left: 0;
    right: 0;
    width: 100%;
  }

  .header__grid-nav {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .header__navigation.open {
    background-color: #fff;
    bottom: 0;
    box-sizing: border-box;
    display: block;
    left: 0;
    overflow-y: auto;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    position: fixed;
    right: 0;
    top: 0;
    padding-top: 20px;
    z-index: 100000;
  }

  /* Logo row pinned to top of overlay; horizontal inset matches 1rem + notches */
  .header__navigation.open .header__grid {
    align-items: start;
    align-content: start;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .header__navigation.open .header__grid-logo {
    align-self: start;
  }

  .header__navigation.open .header__grid-actions {
    align-self: start;
  }

  /*
   * Drop the container’s own box + .content-wrapper padding from layout when the drawer is open.
   * display:none would hide all descendants (including position:fixed); contents only removes the wrapper.
   */
  .header__container.content-wrapper:has(.header__navigation.open) {
    display: contents;
  }
}

/*
 * Tablet / mobile: avoid a second empty grid track when the drawer is closed.
 * Even with one template row, grid-row: 2 on .header__grid-nav / .header__grid::before
 * still created an implicit row — so we stack nav on row 1 at zero contribution and
 * drop the full-bleed ::border pseudo until the menu opens (then default placement returns).
 */
@media (max-width: 991px) {
  .header__grid {
    position: relative;
    grid-template-rows: auto;
  }

  .header__column {
    padding: 0 1rem;
  }

  .header__navigation:not(.open) .header__grid::before {
    display: none;
  }

  .header__navigation:not(.open) .header__grid-nav {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    min-height: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    z-index: 0;
    pointer-events: none;
  }

  .header__navigation:not(.open) .header__grid-nav > * {
    pointer-events: auto;
  }

  .header__navigation:not(.open) .header__grid-logo,
  .header__navigation:not(.open) .header__grid-actions {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
    padding: 0;
  }

  /* Tighter horizontal rhythm: same icon size as desktop, less gutter before the social/cluster */
  .header__grid {
    gap: 8px 16px;
  }

  .header__grid-actions,
  .header__grid-actions-end {
    gap: 16px 12px;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
  }

  /* Logo + toggle on row 1; nav uses row 2 when drawer open (see ≤991px :not(.open) collapse). */
  .header__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    gap: 12px;
    padding: 8px 1rem;
    align-items: center;
  }

  .header__grid-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .header__grid-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    justify-self: end;
    align-self: center;
    gap: 12px;
  }

  .header__grid-actions-end {
    margin-left: 0;
    justify-content: flex-end;
    width: auto;
    flex-wrap: wrap;
  }

  .header__utility-social {
    flex-wrap: wrap;
  }

  .header__grid-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .header__grid::before {
    grid-column: 1 / -1;
    grid-row: 2;
    border: none;
  }

  .module__navbar-animated__header {
    border: none !important;
  }

  .header__grid--suppress-logo .header__grid-actions {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-end;
    justify-self: stretch;
  }

  .header__grid--suppress-logo .header__grid-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .header__grid:has(> .header__grid--suppress-logo)::before {
    grid-row: 2;
  }
}

/* Navigation skipper */

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

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

/* Logo */

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

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

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

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

/* Search bar */

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

.hs-search-field__form {

}




.header__search .hs-search-field__input {
  
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
  
  height: 45px;
  padding: 0 0.7rem;
  border-radius: 8px;
  background-color: #F7F7F7;
  border-color: #F7F7F7;
}




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

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

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

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

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

@media (min-width: 767px) {
  /* Only the slot in the header grid — not the node moved into #hs-live-header-search-mount-mobile */
  .header__search-desktop-wrap .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search-desktop-wrap .header__search label {
    margin: 0 1rem 0 0;
  }

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

  /* Mega-menu search: compact by default; expand while focused or suggestions open (overrides theme-overrides .hs-search-field__bar width) */
  .header__search-desktop-wrap .header__search .hs-search-field__bar {
    width: auto !important;
    max-width: 10rem !important;
    transition: max-width 0.22s ease-out;
  }

  .header__search-desktop-wrap .header__search:focus-within .hs-search-field__bar,
  .header__search-desktop-wrap .header__search .hs-search-field--open .hs-search-field__bar {
    max-width: 320px !important;
  }
}

/* Mid-width mega-menu header: icon-only search until focus or autosuggest (overrides _forms.css input width) */
@media (min-width: 768px) and (max-width: 1150px) {
  .header__search-desktop-wrap
    .header__search:not(:focus-within)
    .hs-search-field:not(.hs-search-field--open)
    .hs-search-field__bar {
    max-width: 3rem !important;
    overflow: hidden;
    transition: max-width 0.22s ease-out;
  }

  .header__search-desktop-wrap
    .header__search:not(:focus-within)
    .hs-search-field:not(.hs-search-field--open)
    .hs-search-field__input {
    flex: 0 1 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    border: none !important;
    pointer-events: none;
  }

  .header__search-desktop-wrap .header__search:focus-within .hs-search-field__bar,
  .header__search-desktop-wrap .header__search .hs-search-field--open .hs-search-field__bar {
    max-width: min(320px, calc(100vw - 2rem)) !important;
    overflow: visible;
  }

  .header__search-desktop-wrap .header__search:focus-within .hs-search-field__input,
  .header__search-desktop-wrap .header__search .hs-search-field--open .hs-search-field__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto;
    padding: 10px !important;
    border: none !important;
    border-radius: 6px;
  }
}


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

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

/* Legacy v0 @hubspot/language_switcher: hide globe sprite / icon; keep wrapper for dropdown hit area. */
.header__language-switcher .lang_switcher_class .globe_class {
  background-image: none !important;
  background-size: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.header__language-switcher .lang_switcher_class .globe_class img,
.header__language-switcher .lang_switcher_class .globe_class svg {
  display: none !important;
}

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

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

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

/* HubSpot v0 dropdown caret pseudo — hide (flat panel matches nav dropdowns) */
.header__language-switcher .lang_list_class:after,
.header__language-switcher .lang_list_class.first-active::after {
  display: none !important;
}

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

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

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

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

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

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

/* L-chevron: default points right (same construction as .header__utility-login::after); hover rotates to point down — no translate so it stays put */
.header__language-switcher--label-current:after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.35em;
  height: 0.35em;
  border: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  margin-left: 0.5rem;
  margin-bottom: 0.12em;
  vertical-align: middle;
  transition: transform 0.15s linear;
}

.header__language-switcher:hover .header__language-switcher--label-current::after,
.header__language-switcher:focus-within .header__language-switcher--label-current::after {
  transform: rotate(45deg);
}

/* Legacy @hubspot/language_switcher (v0: .globe_class / .lang_list_class) inside mega-menu grid */
@media (min-width: 768px) {
  .header__grid-actions .header__language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header__grid-actions .header__language-switcher--label-current {
    order: -1;
    margin-left: 0;
    margin-bottom: 0;
    gap: 8px;
  }

  /*
   * Chevron: inherit label’s 16px em. ~0.4em ≈ 6.5px — balanced vs Poppins 16px (full 1em box was huge for border-L shape).
   */
  /* Bolder chevron = thicker strokes (font-weight does not affect border-drawn ::after) */
  .header__grid-actions .header__language-switcher--label-current::after {
    font-size: inherit;
    font-family: inherit;
    width: 0.475em;
    height: 0.475em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    margin-left: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    align-self: center;
  }

  /* Static so .lang_list_class positions against .header__language-switcher (full label + globe row). */
  .header__grid-actions .header__language-switcher .lang_switcher_class {
    position: static !important;
    display: inline-block;
  }

  /* No positioned CB on globe — list may be nested inside; static lets it anchor to .header__language-switcher. */
  .header__grid-actions .header__language-switcher .globe_class {
    position: static;
    display: inline-block;
    cursor: pointer;
  }

  /* v0 list: same visual language as primary nav submenus + v1 .hs-language-switcher__menu */
  .header__grid-actions .header__language-switcher .lang_list_class {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 6px;
    z-index: 10050;
    transform: translateX(calc(-1 * var(--header-lang-dropdown-nudge, 0px)));
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Abs-pos shrink-to-fit is capped by the narrow switcher wrapper; max-content sizes to the longest entry instead. */
    width: max-content;
    min-width: 11rem;
    max-width: min(20rem, calc(100vw - 2rem));
    border-radius: 6px;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.35;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .header__grid-actions .header__language-switcher .lang_list_class li {
    font-size: inherit;
    padding: 0.35rem 0;
    margin: 0;
  }

  /* HubSpot v0: <a class="lang_switcher_link" data-language …> */
  .header__grid-actions .header__language-switcher .lang_list_class a.lang_switcher_link,
  .header__grid-actions .header__language-switcher .lang_list_class li a {
    display: block;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
  }

  /* Flat panel like nav dropdowns — legacy sprite arrows clash with radius/shadow. */
  .header__grid-actions .header__language-switcher .lang_list_class:before,
  .header__grid-actions .header__language-switcher .lang_list_class:after {
    display: none !important;
  }

  .header__grid-actions .header__language-switcher .lang_list_class.first-active::after {
    display: none !important;
  }

  .header__grid-actions .header__language-switcher:focus-within .lang_list_class {
    opacity: 1;
    visibility: visible;
  }
}@media (max-width: 980px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_switcher_class {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    vertical-align: unset;
  }

  /* ul.lang_list_class lives inside .globe_class — uncollapse globe wrapper on narrow layouts */
  .header__language-switcher .lang_switcher_class .globe_class {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100%;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box;
    background-image: none !important;
    background-size: unset !important;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    position: static !important;
    inset: unset !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    opacity: 1;
    padding: 0 1.05rem;
    visibility: visible;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
  }

  .header__language-switcher .lang_list_class li {
    background-color: transparent !important;
    font-size: 18px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
    text-align: left;
    border: none !important;
    padding: 0.35rem 0 !important;
  }

  .header__language-switcher .lang_list_class li:first-child,
  .header__language-switcher .lang_list_class li:last-child {
    border: none !important;
    border-radius: 0 !important;
  }

  .header__language-switcher .lang_list_class li:first-child {
    padding-top: 0 !important;
  }

  .header__language-switcher .lang_list_class li a,
  .header__language-switcher .lang_list_class a.lang_switcher_link {
    font-size: 18px !important;
    display: block;
    width: 100%;
    white-space: normal;
    box-sizing: border-box;
    text-align: left;
  }

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

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

  .header__language-switcher .lang_list_class li:hover{
    background-color: transparent !important;
  }

  /* Tablet / mobile: no HubSpot caret/triangle pseudos on the language list */
  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after,
  .header__language-switcher .lang_list_class.first-active::after {
    display: none !important;
    content: none !important;
  }}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles: mega-menu uses max-width 980px for mobile nav; toggles are empty divs and only got
   icon dimensions under 767px before, so the menu control was invisible between 768px and 980px. */
@media (max-width: 980px) {
  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }

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

  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  /* If both hide + open ever slip onto the hamburger, hide must win (open comes later and would show it). */
  .header__navigation--toggle.hide.open {
    display: none !important;
  }
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

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

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 25px;
    width: 25px;
    margin-right: 0;
    padding-right: 0;
  }

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

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

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

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

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

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block !important;
    position: fixed;
    z-index: 100001;
    top: max(20px, env(safe-area-inset-top, 0px) + 8px);
    right: max(1rem, env(safe-area-inset-right, 0px));
    left: auto;
    bottom: auto;
    margin: 0;
  }
}

@media (max-width: 980px) {
  /* Logo + mega-menu grid live inside .header__navigation — do not hide the whole block or the logo vanishes. */
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  /* Drawer mount (narrow + tablet): keep switcher usable when HubSpot renders under .navbar__mobile__ctas. */
  .header__mobile-lang .header__language-switcher:not(.open) {
    display: block !important;
    position: relative !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 0 !important;
  }

  /* HubSpot v0: .lang_switcher_class is inline-block; desktop dropdown uses absolute children — flatten for drawer flow */
  .header__mobile-lang .lang_switcher_class {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    vertical-align: unset;
  }

  /*
   * HubSpot v0 nests <ul.lang_list_class> inside .globe_class.
   * Desktop hides the globe hit-area with width/height 0 (!important in _header + theme .globe_class 1px)
   * — restore full-size flow wrapper in the drawer only.
   */
  .header__mobile-lang .lang_switcher_class .globe_class,
  .header__mobile-lang .header__language-switcher .globe_class {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
    background-image: none !important;
    background-size: unset !important;
    cursor: default;
  }

  .header__mobile-lang .lang_list_class {
    position: static !important;
    inset: unset !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    z-index: auto;
    box-sizing: border-box;
  }

  .header__mobile-lang .lang_list_class:before,
  .header__mobile-lang .lang_list_class:after,
  .header__mobile-lang .lang_list_class.first-active::after {
    display: none !important;
    content: none !important;
  }

  .header__mobile-lang .lang_list_class li,
  .header__mobile-lang .lang_list_class li a,
  .header__mobile-lang .lang_list_class a.lang_switcher_link {
    font-size: 18px !important;
  }

  .header__language-switcher.open {
    background-color: transparent;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle:not(.show) {
    margin: 0 5vw;
  }

  .header__navigation--toggle {
    margin: 0;
    padding-right: 0;
  }
}
/* 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%;
}
.hero-chart {
  position: relative;
  width: 100%;
  max-width: var(--main-max-width);
  margin-left: auto;
  margin-right: auto;
  font-family: Poppins, sans-serif;
}

.hero-chart__header {
  margin-bottom: 16px;
  max-width: var(--hero-chart-width, 80%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-chart__title {
  margin: 0;
}

.hero-chart__canvas-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--hero-chart-width, 80%);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 0 0;
}

.hero-chart__canvas-scroll {
  order: 1;
  width: 100%;
  min-width: 0;
}

.hero-chart__canvas {
  order: 1;
  display: block;
  width: 100% !important;
  height: 360px !important;
}

.hero-chart__watermark-external {
  order: 0;
  display: none;
  text-align: center;
}

.hero-chart[data-watermark-position="out_top"] .hero-chart__watermark-external:not(:empty) {
  display: block;
  order: 0;
  padding: 12px 8px 10px;
}

.hero-chart[data-watermark-position="out_bottom"] .hero-chart__watermark-external:not(:empty) {
  display: block;
  order: 2;
  padding: 10px 8px 12px;
}

.hero-chart__watermark-external-img {
  display: block;
  max-width: 40%;
  height: auto;
  margin: 0 auto;
}

.hero-chart__watermark-external-text {
  display: block;
  font-weight: 700;
  color: rgba(142, 142, 141, 1);
  line-height: 1.2;
}

.hero-chart__empty {
  order: 3;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
}

.hero-chart__empty.is-visible {
  display: flex;
}

.hero-chart__disclaimer-wrap {
  max-width: var(--main-max-width);
  margin-left: auto;
  margin-right: auto;
}

.hero-chart__disclaimer {
  margin-top: 12px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.3;
  text-align: center;
  padding: 0;
}

.hero-chart__disclaimer p {
  font-size: 12px;
}

@media (max-width: 1024px) {
  .hero-chart__disclaimer p {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .hero-chart__canvas-wrap {
    padding: 8px 0 12px;
    max-width: 100%;
  }

  .hero-chart--scrollable .hero-chart__canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .hero-chart--scrollable .hero-chart__canvas-scroll {
    width: max-content;
    max-width: none;
  }

  .hero-chart__canvas {
    height: 400px !important;
  }

  .hero-chart__disclaimer-wrap {
    max-width: 100%;
  }

  .hero-chart__disclaimer, .hero-chart__disclaimer p {
    font-size: 1rem;
    line-height: 30.6px;
  }

  .hero-chart__disclaimer {
    margin-top: 18px;
  }

  .hero-chart__watermark-external-img {
    max-width: 15%;
  }

  .hero-chart__watermark-external-text {
    font-size: 10px !important;
  }
}

.hero-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.hero-chart-modal[hidden] {
  display: none !important;
}

.hero-chart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.hero-chart-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 960px);
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: 16px;
  border-radius: var(--border-radius-md, 8px);
  background: #fff;
  box-sizing: border-box;
}

.hero-chart-modal__title {
  margin: 0 40px 12px 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.hero-chart-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-sm, 4px);
  background: transparent;
  color: #000;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Two global rules list `button:hover` at (0,1,1) and so outrank the single-class
   rule above: theme-overrides.css recolours the × and gives it a border, and the
   shared .btn rule in agriportance-theme.css shrinks it to 16px with 10px 20px of
   padding — animated, because that rule also sets a transition. Everything they
   touch has to be restated. :focus counts as much as :hover here, since
   module.html moves focus to this button when the modal opens. */
.hero-chart-modal__close:hover,
.hero-chart-modal__close:focus {
  padding: 0;
  border: none;
  border-radius: var(--border-radius-sm, 4px);
  background: transparent;
  color: #000;
  font-size: 28px;
  line-height: 1;
}

.hero-chart-modal__close:hover {
  background: #f3f4f3;
}

.hero-chart-modal__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 120px);
}

.hero-chart-modal__img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 auto;
  touch-action: pan-x pan-y pinch-zoom;
}

body.hero-chart-modal-open {
  overflow: hidden;
}

/* "Did the chart module render?" is the single source of truth — only the chart
   module needs a smart rule; the lock and the labels disclaimer follow from it.
   Keyed off [data-hero-chart] in both directions so the two can never disagree.
   Note :has() matches display:none elements, so keying the disclaimer off the
   lock's presence instead would wrongly hide it for unlocked visitors too. */

/* Chart rendered → visitor is unlocked → hide the lock. */
.dnd-section:has([data-hero-chart]) .hero-chart--locked,
.dnd-column:has([data-hero-chart]) .hero-chart--locked {
  display: none;
}

/* Chart absent → visitor is locked → hide the labels module's disclaimer, which
   would otherwise dangle under the blurred image. hero-chart-labels is a separate
   non-global module, so a smart rule there would mean per-page config. */
.dnd-section:not(:has([data-hero-chart])) .hero-chart__disclaimer-wrap,
.dnd-column:not(:has([data-hero-chart])) .hero-chart__disclaimer-wrap {
  display: none;
}

/* Chart lock — stand-in shown when the smart rule hides the chart module. */
.hero-chart__lock {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.hero-chart__lock-img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-chart__lock-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

/* Unlock control uses <button class="btn">. On mobile .btn is width:100%; cap it
   so it does not span the full blurred chart. */
@media (max-width: 767px) {
  .hero-chart__lock-content .hero-chart__lock-btn {
    width: auto;
    max-width: 100%;
  }
}

.hero-chart__lock-text {
  margin: 0;
  max-width: 40ch;
}

.hero-chart__lock-hint {
  padding: 24px;
  text-align: center;
  font-style: italic;
  opacity: 0.5;
}

/* Unlock form pop-up reuses .hero-chart-modal above, so it matches the chart
   image modal. Only the width differs — 960px is right for a chart, too wide
   for a form. Note the shared modal is a normal stacking context rather than
   <dialog> + showModal(); the top layer would render above reCAPTCHA's
   challenge and make the form impossible to complete. */
.hero-chart-modal__dialog--form {
  width: min(100%, 560px);
  /* The 40px lives on the scroll child instead, so the scrolling box spans the
     full dialog and its scrollbar sits against the edge rather than floating
     40px inside it. overflow keeps that full-bleed child within the corners. */
  padding: 0;
  overflow: hidden;
}

.hero-chart-modal__dialog--form .hero-chart-modal__scroll {
  padding: 40px;
}

/* Field styling mirrors contact-form.module. It is copied rather than shared
   because that module's rules are scoped to .contact-form-wrapper and live in a
   module stylesheet, which HubSpot only loads on pages where that module is
   placed — a chart page usually has no contact form. Two classes throughout, to
   stay ahead of the `form label` and `form input[type=…]` rules in
   theme-overrides.css, which loads after this file. */
.hero-chart-modal__dialog--form .hs-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-chart-modal__dialog--form .hs-form-field {
  margin-bottom: 0;
}

.hero-chart-modal__dialog--form .hs-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin-bottom: 8px;
}

/* Consent checkbox: label wraps the box and its text, so it cannot be a block.
   _forms.css does the same for .contact-form-wrapper. */
.hero-chart-modal__dialog--form .hs-form-field label.hs-form-booleancheckbox-display {
  display: flex;
}

.hero-chart-modal__dialog--form .hs-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #d1d5d1;
  border-radius: 4px;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
}

.hero-chart-modal__dialog--form .hs-input:focus {
  outline: none;
  border-color: var(--green-dark);
}

.hero-chart-modal__dialog--form textarea.hs-input {
  min-height: 120px;
  resize: vertical;
}

.hero-chart-modal__dialog--form .hs-richtext p {
  color: #000000;
  font-size: 16px;
}

.hero-chart-modal__dialog--form .legal-consent-container p {
  color: #000000;
  font-size: 14px;
  line-height: 150%;
}

/* HubSpot renders validation messages as <label>, so they need pulling back out
   of the uppercase label styling above. */
.hero-chart-modal__dialog--form .hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
}

.hero-chart-modal__dialog--form li label.hs-error-msg {
  color: #d32f2f;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

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

/* Theme overrides */
/* Colors */
:root {
    --green-light: #CCEFC1;
    --green-dark: #497A32;
    --green-darker: #214F38;
    --green-mid: #73AD59;

    --text-link-color: #000;
    --text-link-color-hover: #497A32;
    --text-link-color-active: #214F38;
    --text-link-color-visited: #214F38;
    --text-link-underline: underline;

    --grey-light: rgba(247, 247, 247, 1);
    --grey-mid: rgba(199, 199, 199, 1);
    --grey-dark: #808080;
    --grey-darker: rgba(77, 77, 77, 1);

    --yellow: rgba(255, 251, 142, 1);

    /* --main-max-width: 1360px; */
    --border-radius-lg: 12px;
    --border-radius-md: 8px;
    --border-radius-sm: 4px;
    --main-max-width: 1320px;
}

.hs-image-widget {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.hs-image-widget img {
  border-radius: inherit;
  display: block;
  max-width: 100%;
  height: auto;
}

.color-text-default {
  color: #000000 !important;
}

.text-line-height-100 {
  line-height: 100% !important;
}

.text-line-height-150 {
  line-height: 150% !important;
}

.text-line-height-170 {
  line-height: 170% !important;
}

.tags .tag-badge {
  font-weight: 500;
  font-style: medium;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
  text-transform: none;
  color: white;

  background-color: #FF8000;
  border-radius: 16px;
  padding: 4px 12px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.tags .tag-badge:hover {
  background-color: #E57E1F;
  color: #fff;
}

.copy-default {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
}

.copy-small {
  font-family: Poppins;
  font-weight: 500;
  font-style: medium;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0%;
}

.copy-medium {
  font-family: Poppins;
  font-weight: 500;
  font-style: medium;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0%;
}

.copy-large {
  font-family: Poppins;
  font-weight: 700;
  font-style: bold;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 0%;
}

.tagline {
  font-family: Poppins;
  font-weight: 700;
  font-style: bold;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #000;
}

/* HubSpot renders form submits as <input class="hs-button primary large">, markup
   we do not control, so they cannot carry .btn. .hs-button.primary is listed
   alongside .btn-primary throughout this file to give them the primary variant.
   Two classes is deliberate: it has to outrank `form .hs-button` and
   `form input[type=submit]` in theme-overrides.css, which loads later. */
button,
.button,
.btn,
.hs-button,
.hs-button.primary,
button:hover,
.button:hover,
.btn:hover,
.hs-button:hover,
.hs-button.primary:hover,
.hs-button.primary:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  font-family: Poppins;
  font-weight: 500;
  font-style: medium;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  text-transform: none;
  opacity: 1;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s linear;
}

/* Native <button class="btn"> — strip UA chrome only, so the rules above and the
   .btn-* variants land the same way they do on <a class="btn">. Keep this block
   free of font, background, border and color: it outranks both of them. */
button.btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
}

button.btn::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


button:disabled,
.button:disabled,
.btn:disabled,
.hs-button:disabled,
.hs-button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary,
.hs-button.primary {
  background-color: var(--green-mid);
  border: 1px solid var(--green-mid);
  color: #000;
}

.btn-primary:hover,
.hs-button.primary:hover,
.hs-button.primary:focus {
  background-color: var(--green-dark);
  border: 1px solid var(--green-dark);
  color: #fff;
}

.btn-primary:active,
.hs-button.primary:active {
  background-color: var(--green-darker);
  border: 1px solid var(--green-darker);
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
}

.btn-secondary:hover {
  background-color: var(--green-dark);
  border: 1px solid var(--green-dark);
  color: #fff;
}

.btn-secondary:active {
  background-color: var(--green-dark);
  border: 1px solid var(--green-dark);
  color: #fff;
}

.btn-tertiary {
  background-color: transparent;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
}

.btn-tertiary:hover {
  background-color: transparent;
  color: #000;
  border: 1px solid transparent;
}

/* Fourth button variant — orange CTA, white label (default + hover) */
.btn-quaternary {
  background-color: #ff8000;
  border: 1px solid #ff8000;
  color: #fff;
}

.btn-quaternary:hover {
  background-color: #73ad59;
  border: 1px solid #73ad59;
  color: #fff;
}

.btn-quaternary:active {
  background-color: #5f9248;
  border: 1px solid #5f9248;
  color: #fff;
}

/* White outline on dark / photo backgrounds — hover fill matches quaternary */
.btn-white {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.btn-white:hover {
  background-color: #73ad59;
  border: 1px solid #73ad59;
  color: #000;
}

.btn-white:active {
  background-color: #5f9248;
  border: 1px solid #5f9248;
  color: #000;
}

.btn-link {
  background-color: transparent;
  color: #000;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--green-dark);
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.header__container {
  padding: 20px 0px 20px 0px;
}

/* Custom list styling with check icon (excluding header) */
.hp-hero__subtitle ul,
.hp-hero__subtitle ol,
.hero-text-image__content ul,
.hero-text-image__content ol,
.hero-text-media__content ul,
.hero-text-media__content ol,
.hero-text-media__content ul,
.hero-cards__description ul,
.hero-cards__description ol {
  list-style: none;
  padding-left: 0;
}

.hp-hero__subtitle li,
.hp-hero__subtitle ol li,
.hero-text-image__content li,
.hero-text-image__content ol li,
.hero-text-media__content li,
.hero-cards__description li,
.hero-cards__description ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.hp-hero__subtitle li:has(> p),
.hp-hero__subtitle ol li:has(> p),
.hero-text-image__content li:has(> p),
.hero-text-image__content ol li:has(> p),
.hero-text-media__content li:has(> p),
.hero-cards__description li:has(> p),
.hero-cards__description ol li:has(> p) {
  display: block;
}

.hp-hero__subtitle li > p,
.hp-hero__subtitle ol li > p,
.hero-text-image__content li > p,
.hero-text-image__content ol li > p,
.hero-text-media__content li > p,
.hero-cards__description li > p,
.hero-cards__description ol li > p {
  display: block;
  margin: 0;
  padding-left: 0;
}

.hp-hero__subtitle li > p + p,
.hp-hero__subtitle ol li > p + p,
.hero-text-image__content li > p + p,
.hero-text-image__content ol li > p + p,
.hero-text-media__content li > p + p,
.hero-cards__description li > p + p,
.hero-cards__description ol li > p + p {
  margin-top: 10px;
}

.hero-text-image__content p:has(+ ul) {
  margin-bottom: 10px;
}

.hp-hero__subtitle li::before,
.hp-hero__subtitle ol li::before,
.hero-text-image__content li::before,
.hero-text-image__content ol li::before,
.hero-text-media__content li::before,
.hero-text-media__content ol li::before,
.hero-text-media__content li::before,
.hero-cards__description li::before,
.hero-cards__description ol li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-image: url('https://25523324.fs1.hubspotusercontent-eu1.net/hubfs/25523324/raw_assets/public/Agriportance-Theme/images/c-check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.header ul,
.header ul li {
  all: revert;
}

.header ul li::before {
  display: none;
}
/* Form placeholder text */

::-webkit-input-placeholder {
    color: var(--grey-dark);
}

::-moz-placeholder {
  color: var(--grey-dark);
}

:-ms-input-placeholder {
  color: var(--grey-dark);
}

::placeholder {
  color: var(--grey-dark);
}

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

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute ! important;
  width: 1px;
  word-wrap: normal ! important;
}

/* ========================================
   Blog Cards
   ======================================== */

.blog-cards {
  background-color: transparent;
  padding: 0;
}

.blog-cards__header {
  text-align: center;
  margin-bottom: 48px;
  max-width: var(--main-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.blog-cards__badge {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #000;
  line-height: 1;
}

.blog-cards__title {
  margin-bottom: 16px;
}

.blog-cards__subtitle {
  max-width: 800px;
  margin: 0 auto;
}

.blog-cards__subtitle > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #000;
}

.blog-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--main-max-width);
  margin: 0 auto 48px;
  padding: 0;
}

@media (min-width: 641px) {
  .blog-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .blog-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-cards__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-cards__card:hover {
  /* transform: translateY(-4px); */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease;
  color: var(--text-link-color-hover);
}

.blog-cards__card:hover .blog-cards__card-title * {
  cursor: pointer;
  text-decoration: var(--text-link-underline);
  transition: color 0.3s ease;
  color: var(--text-link-color-hover);
}

.blog-cards__image-wrapper {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}

.blog-cards__image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

.blog-cards__card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-cards__card-badge-wrapper {
  margin-bottom: 16px;
}

.blog-cards__card-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
  width: fit-content;
  color: #fff;
  line-height: 1;
}

.blog-cards__card-title {
  margin-bottom: 12px;
}

.blog-cards__card-title > * {
  margin: 0;
  font-weight: 600;
  color: #000;
}

.blog-cards__card-description {
  margin-bottom: 20px;
  flex-grow: 1;
}

.blog-cards__card-description > p {
  margin: 0;
  color: #000;
  line-height: 140%;
}

.blog-cards__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.blog-cards__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-cards__author-image-empty-inner {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: 1px solid #f7f7f7;
  border-radius: 50%;
}

.blog-cards__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-cards__author-info {
  flex-grow: 1;
}

.blog-cards__author-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 4px 0;
  line-height: 1;
}

.blog-cards__author-meta {
  font-size: 12px;
  color: #000;
  margin: 0;
  line-height: 1;
}

.blog-cards__bottom-cta {
  text-align: center;
  max-width: var(--main-max-width);
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .blog-cards__title > * {
    font-size: 2rem;
  }

  .blog-cards {
    padding: 0px 0px;
  }
}

@media (max-width: 640px) {
  .blog-cards__title > * {
    font-size: 1.75rem;
  }

  .blog-cards {
    padding: 0px 0px;
  }

  .blog-cards__image-wrapper {
    height: 200px;
  }

  .blog-cards__card-content {
    padding: 20px;
  }
}

/* Utility: add check icon to UL/LI bullets within container */
.li-check-icon ul {
  list-style: none;
  padding-left: 0;
}

.li-check-icon ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .dnd-section {
     padding: 24px 1rem !important;
  }
}

.li-check-icon ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  background-image: url('https://25523324.fs1.hubspotusercontent-eu1.net/hubfs/25523324/raw_assets/public/Agriportance-Theme/images/c-check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

footer .dnd-section .dnd-column {
  padding: 0 !important;
}

footer .dnd-section, footer .content-wrapper--vertical-spacing {
  padding: 80px 1rem !important;
}

@media (max-width: 768px) {
  footer .dnd-section, footer .content-wrapper--vertical-spacing {
    padding: 40px 1rem !important;
  }
}

.dnd_area-row-0-padding,
.dnd_area-row-1-padding,
.dnd_area-row-2-padding,
.dnd_area-row-3-padding,
.dnd_area-row-4-padding,
.dnd_area-row-5-padding,
.dnd_area-row-6-padding,
.dnd_area-row-7-padding,
.dnd_area-row-8-padding,
.dnd_area-row-9-padding,
.dnd_area-row-10-padding,
.dnd_area-row-11-padding,
.dnd_area-row-12-padding,
.dnd_area-row-13-padding,
.dnd_area-row-14-padding,
.dnd_area-row-15-padding,
.dnd_area-row-16-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/*
.body-container--blog-index .dnd-section {
  padding: 0px 1rem 0px 1rem !important;
}*/

.body-container--blog-index {
  margin-top: 1px !important;
}

article.blog-post .blog-post__body a:not(.btn):not(.button) {
  color: var(--text-link-color);
  text-decoration: var(--text-link-underline);
  transition: color 0.3s ease;
}

article.blog-post .blog-post__body a:not(.btn):not(.button):hover {
  color: var(--text-link-color-hover);
  text-decoration: var(--text-link-underline);
  transition: color 0.3s ease;
}

article.blog-post .blog-post__body a:not(.btn):not(.button):active {
  color: var(--text-link-color-active);
  text-decoration: var(--text-link-underline);
  transition: color 0.3s ease;
}