/* Theme base styles */

/* Generic */

*, *: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;
}

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

main {
  display: block;
}

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

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

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

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

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

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

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

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

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

a {
  background-color: transparent;
}

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

img {
  border-style: none;
}

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

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

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

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

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

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

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


/* Remove Safari's default appearance for select elements */

select {
  -webkit-appearance: none;
  appearance: none;
}

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

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

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

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

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

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

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

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

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

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

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

progress {
  vertical-align: baseline;
}

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

textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

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

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

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

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

template {
  display: none;
}

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

[hidden] {
  display: none;
}

/* Objects */

/* Responsive grid */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.container-fluid {
    *zoom: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Clearfix */

.clearfix {
    *zoom: 1;
}

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

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
}

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

/* Responsive Visibilty Classes */

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

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

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

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

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

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

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

@media (min-width: 768px) and (max-width: 1139px) {
    .visible-tablet {
        display: inherit !important;
    }

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

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

    .visible-desktop {
        display: none !important ;
    }
}
/* Content wrappers for blog post and system templates */

.content-wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

/* Drag and drop layout styles */

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

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

/* Elements */

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

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

/* Paragraphs */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

ul,
ol {
  padding-left: 1rem;
  margin: 0 0 1.4rem;
}

ul li,
ol li {
  margin: 0.7rem;
}

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

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

.no-list li {
  margin: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  padding-left: 1rem;
  border-left: 10px solid;
  margin: 0 0 1.4rem;
}

/* Horizontal rules */

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

/* Subscripts and superscripts */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Image alt text */

img {
  font-size: 1rem;
  word-break: normal;
}
/* Primary button */

button,
.button,
.hs-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s linear;
  white-space: normal;
}

.hs-button-modify--full-width {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Simple button */

.button.button--simple {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.button.button--simple:hover,
.button.button--simple:focus {
  border: none;
  background-color: transparent;
}

/* Disabled button */

button:disabled,
.button:disabled,
.hs-button:disabled {
  border-color: #f1f1f1;
  background-color: #f1f1f1;
  pointer-events: none;
}

button:disabled,
.button:disabled,
.button.button--secondary:disabled,
.button.button--simple:disabled {
  color: #d0d0d0;
}

/* No button */

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

/* Tooltip styles for copy to clipboard */

.hs-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  display: none;
  height: auto;
  width: auto;
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #494a52;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
  transform: translateX(-50%);
}
.hs-tooltip:after {
  position: absolute;
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
  border-top: 5px solid #494a52;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: '';
  transform: translateX(-50%);
}
.hs-tooltip__failure,
.hs-tooltip__success {
  display: none;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.hs-visible {
  display: block;
}

/* Button icons */

.button .button__icon svg {
  display: block;
  height: 1.25rem;
  margin-right: 1rem;
  fill: inherit;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .button .button__icon svg {
    width: 1.25rem;
  }
}

.button--icon-right .button__icon {
  order: 1;
}

.button--icon-right .button__icon svg {
  margin-right: 0;
  margin-left: 1rem;
}
/* ==========================================================================
   HUBSPOT FORMS - ASYRIL CUSTOM STYLES
   ========================================================================== */

/*
 * This stylesheet keeps HubSpot's native form controls as the functional base.
 * JavaScript only enhances the user interface where needed.
 *
 * Important for file uploads:
 * - the real HubSpot <input type="file"> remains in the form;
 * - it is hidden only after the custom interface has been initialized;
 * - if JavaScript does not run, the browser's native file picker stays visible.
 */


/* ==========================================================================
   1. Form title
   ========================================================================== */

/* Removes extra spacing around the optional form title. */
.form-title {
  margin: 0;
}

/*
 * When a title is directly above a form, removes the form's upper border
 * rounding so the two blocks visually join together.
 */
.form-title ~ div > form {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* ==========================================================================
   2. Global variables, spacing and labels
   ========================================================================== */

:root {
  /* HubSpot spacing variables used by the form theme. */
  --hsf-module__vertical-spacing: 0.35rem;
  --hsf-row__vertical-spacing: 1.8rem;

  /* One shared error color for required indicators and validation. */
  --hsf-global-error__color: #e83940;
  --hsf-field-label-requiredindicator__color:
    var(--hsf-global-error__color);
  --hsf-erroralert__color:
    var(--hsf-global-error__color);

  /* Submit buttons use the full available width. */
  --hsf-button__width: 100%;

}

/* Standard label spacing. */
form label {
  display: block;
  margin-bottom: 0.35rem;
}

/* Standard vertical spacing between form fields. */
form .hs-form-field {
  margin-bottom: 1.8rem;
}

/*
 * HubSpot fieldsets sometimes include their own width restrictions.
 * These rules ensure they use the complete width of their parent column.
 */
form fieldset {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Makes HubSpot's .input wrapper fill its form field. */
form .hs-form-field .input {
  width: 100%;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}



/* ==========================================================================
   3. Form rows with two columns
   ========================================================================== */

/*
 * Desktop: HubSpot rows configured with two columns are displayed side by side.
 */
form fieldset.form-columns-2 {
  display: flex !important;
  align-items: flex-start;
  gap: 1.4rem;
  width: 100%;
}

form fieldset.form-columns-2 > .hs-form-field {
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0;
  margin-right: 0 !important;
}

form fieldset.form-columns-2 > .hs-dependent-field {
  display: block !important;
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0;
  margin: 0 !important;
}

/*
 * Dependent HubSpot fields can add extra wrappers.
 * These rules make them obey the same width as ordinary fields.
 */
form
  fieldset.form-columns-2
  > .hs-dependent-field
  > .hs-form-field {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 0 !important;
  float: none !important;
}

form
  fieldset.form-columns-2
  > .hs-dependent-field
  > .hs-form-field
  > .asy-floating-control,
form
  fieldset.form-columns-2
  > .hs-dependent-field
  > .hs-form-field
  > .input,
form
  fieldset.form-columns-2
  > .hs-dependent-field
  > .hs-form-field
  .input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

form
  fieldset.form-columns-2
  > .hs-dependent-field
  input,
form
  fieldset.form-columns-2
  > .hs-dependent-field
  select,
form
  fieldset.form-columns-2
  > .hs-dependent-field
  textarea {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/*
 * Tablet/mobile: two-column rows become one column.
 */
@media (max-width: 767px) {
  form fieldset.form-columns-2 {
    display: block !important;
  }

  form fieldset.form-columns-2 > .hs-form-field,
  form fieldset.form-columns-2 > .hs-dependent-field {
    width: 100% !important;
  }
}


/* ==========================================================================
   4. Standard form inputs
   ========================================================================== */

/*
 * Gives text fields, selects and textareas a predictable 100% width.
 * File inputs are intentionally excluded because their native fallback and
 * enhanced display are handled in the dedicated file upload section below.
 */
.form-columns-1 .hs-fieldtype-intl-phone,
form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='search'],
form select,
form textarea {
  display: inline-block;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}


/* ==========================================================================
   5. Radio buttons and checkboxes
   ========================================================================== */

form .inputs-list {
  margin: 0 !important;
  padding: 0 !important;
}

form .inputs-list > li {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3;
}

form .inputs-list > li + li {
  margin-top: 0.3rem !important;
}

/*
 * Gives all HubSpot checkbox and radio labels the same layout,
 * including GDPR and subscription preference checkboxes.
 */
form .inputs-list label,
form .hs-form-radio-display,
form .hs-form-checkbox-display,
form .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
}

/* Keeps the control aligned with the first line of its label. */
form input[type='checkbox'],
form input[type='radio'] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 3px 0 0 !important;
  box-sizing: border-box;
  cursor: pointer;
}

/* Prevents HubSpot from adding inconsistent spacing around label text. */
form .hs-form-checkbox-display > span,
form .hs-form-booleancheckbox-display > span,
form .hs-form-radio-display > span {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}


/* ==========================================================================
   6. Date picker
   ========================================================================== */

form .hs-dateinput {
  position: relative;
}

/* Calendar icon shown inside HubSpot date fields. */
form .hs-dateinput::before {
  position: absolute;
  top: 50%;
  content: '\01F4C5';
  transform: translateY(-50%);
}

/* Custom arrow for HubSpot select fields. */
form select.hs-input {
  padding-right: 40px;

  background-image:
    url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");

  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

form .is-selected .pika-button {
  border-radius: 0 !important;
  box-shadow: none !important;
}

form .fn-date-picker .pika-button:hover,
form .fn-date-picker .pika-button:focus {
  border-radius: 0 !important;
}


/* ==========================================================================
   7. Native HubSpot file upload - enhanced appearance and 10 MB limit
   ========================================================================== */

/*
 * NATIVE FALLBACK
 *
 * The genuine HubSpot file input is visible by default. This is essential for
 * progressive enhancement: if the custom JavaScript does not run on a browser,
 * the visitor still receives the browser's normal file picker and HubSpot can
 * still submit the real field.
 */
form .hs-fieldtype-file input[type='file'] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: initial;
  border: initial;
  background-color: transparent;
}

/*
 * NATIVE LABEL FALLBACK
 *
 * Before JavaScript enhances the field, HubSpot's own label stays in its normal
 * position above the native file picker. JavaScript later moves this exact same
 * label into the custom upload component so the required asterisk and the
 * original label/field relationship are preserved.
 */
form .hs-fieldtype-file > label {
  display: block;
  margin-bottom: 0.35rem;
}

form .hs-fieldtype-file > label .hs-form-required {
  color: var(--hsf-global-error__color) !important;
}

/*
 * ACCESSIBLE VISUAL HIDING
 *
 * JavaScript adds .asy-file-upload-initialized only after the enhanced upload
 * interface has been built successfully. At that moment the original input is
 * visually hidden, but it stays in the DOM and remains the exact file input
 * submitted by HubSpot.
 */
form
  .hs-form-field.asy-file-upload-initialized
  input[type='file'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;

  border: 0 !important;
  opacity: 0 !important;
}

/*
 * Outer wrapper.
 *
 * width: 100% and min-width: 0 make the component follow exactly the same left
 * and right boundaries as the other HubSpot fields, including in two-column
 * layouts and on responsive breakpoints.
 */
form .asy-file-upload-component {
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * FLOATING FILE-FIELD LABEL
 *
 * JavaScript moves HubSpot's existing label into this component. It is then
 * positioned across the dashed top border, using the same visual principle as
 * the floating labels used on the other form fields when they contain a value.
 * The white background creates a clean break in the dashed border behind it.
 */
form .asy-file-upload-component > .asy-file-upload__floating-label {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 2;

  display: block;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 1px 4px 2px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: inherit;
  background-color: #fff;

  font-family: inherit;
  font-size: 0.82em;
  font-weight: inherit;
  line-height: 1.2;

  cursor: pointer;

  transform: translateY(-35%);
}

/* Keep HubSpot's required asterisk red inside the floating file label. */
form
  .asy-file-upload-component
  > .asy-file-upload__floating-label
  .hs-form-required {
  color: var(--hsf-global-error__color) !important;
}

/*
 * Main Browse / drag-and-drop area.
 *
 * It deliberately uses the form's inherited font settings instead of defining
 * a separate font, so it remains visually aligned with the rest of the theme.
 */
form .asy-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 104px;
  padding: 22px 16px 18px;
  box-sizing: border-box;

  color: inherit;
  background-color: #fff;

  border: 1px dashed #c7c7c7;
  border-radius: 4px;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;

  cursor: pointer;
  user-select: none;

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

/* Same black hover/focus treatment as the other form controls. */
form .asy-file-upload:hover,
form .asy-file-upload:focus-visible {
  border-color: #000;
}

form .asy-file-upload:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Visual feedback while files are physically dragged over the drop zone. */
form .asy-file-upload.is-dragover {
  border-color: #e83940;
  background-color: #fff7f7;
}

/* Inline upload icon. No external image or icon library is required. */
form .asy-file-upload__icon {
  display: block;
  width: 24px;
  height: 24px;
  color: #09152b;
}

form .asy-file-upload__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Highlight only the Browse action inside the main explanatory sentence. */
form .asy-file-upload__action {
  color: #e83940;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Main drag-and-drop sentence. */
form .asy-file-upload__message {
  display: block;
  max-width: 100%;
}

/*
 * HUBSPOT FIELD HELP TEXT
 *
 * JavaScript moves HubSpot's existing .hs-field-desc element directly below
 * the drag-and-drop sentence. The text stays part of the original HubSpot field
 * but is intentionally smaller and lighter so it reads as secondary guidance.
 */
form .asy-file-upload__help {
  display: block !important;
  max-width: min(100%, 680px);
  margin: 0.15rem 0 0 !important;
  padding: 0 !important;

  color: inherit;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;

  opacity: 0.65;
}

/* HubSpot descriptions can contain paragraphs; remove their default margins. */
form .asy-file-upload__help p,
form .asy-file-upload__help span {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Live selection summary row.
 *
 * The text stays on the left and a global trash button sits on the right.
 * Both columns are kept inside the same 100% width as the other form fields.
 */
form .asy-file-upload__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;

  /*
   * The summary itself stays full-width. Its horizontal padding is the sum of:
   * - 0.7rem outer inset used by the file list;
   * - 0.7rem internal padding used by each file tile.
   *
   * Result:
   * - summary text aligns with file names;
   * - the global trash icon aligns with every per-file trash icon.
   */
  width: 100% !important;
  min-width: 0;
  max-width: 100% !important;

  margin: 0.5rem 0 0 !important;
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;

  box-sizing: border-box !important;
}

/* Example: "2 files selected · 6.8 MB / 10 MB". */
form .asy-file-upload__status {
  min-width: 0;

  color: inherit;
  font-size: 0.9em;
  line-height: 1.4;
}

/*
 * 10 MB ERROR MESSAGE
 *
 * JavaScript uses this dedicated area instead of a browser alert() popup. The
 * message remains visible and can be announced by assistive technologies.
 */
form .asy-file-upload__alert {
  width: 100%;
  min-width: 0;
  margin-top: 0.45rem;

  color: var(--hsf-global-error__color);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
}

form .asy-file-upload__alert[hidden] {
  display: none !important;
}

/*
 * Browser compatibility note.
 *
 * This appears only on browsers that can use the native picker but cannot
 * safely rebuild FileList. In that fallback mode, Browse remains functional,
 * but a new Browse selection replaces the previous selection.
 */
form .asy-file-upload__compatibility {
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;

  font-size: 0.82em;
  line-height: 1.4;
  opacity: 0.75;
}

form .asy-file-upload__compatibility[hidden] {
  display: none !important;
}

/* Selected-file list. */
form .asy-file-upload__list {
  display: grid !important;
  gap: 0.5rem !important;

  /*
   * The list keeps a full 100% width, while real padding creates the visible
   * 0.7rem inset on BOTH sides. This proved more robust than width:calc(...)
   * against HubSpot/theme rules that can force child elements to 100% width.
   */
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0.65rem 0 0 !important;
  padding-left: 0.7rem !important;
  padding-right: 0.7rem !important;

  list-style: none;
  box-sizing: border-box !important;
}

form .asy-file-upload__list[hidden] {
  display: none !important;
}

/*
 * One selected-file row.
 * The file-information column may shrink, while the trash icon keeps only the
 * small fixed space that it needs.
 */
form .asy-file-upload__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;

  /*
   * width:auto makes the tile fill only the INNER width of the padded list.
   * The same 0.7rem inset is therefore visible on the left and on the right.
   */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.55rem 0.7rem !important;

  background-color: #f4f5f6;
  border-radius: 4px;
  box-sizing: border-box !important;
}

form .asy-file-upload__file-info {
  min-width: 0;
}

/*
 * Long names are shortened visually with an ellipsis so they never enlarge the
 * form. JavaScript also adds the complete file name to the title attribute.
 */
form .asy-file-upload__file-name {
  display: block;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-weight: 600;
}

form .asy-file-upload__file-size {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.82em;
  opacity: 0.75;
}

/*
 * Trash buttons.
 *
 * The icon itself is an inline SVG generated by our JavaScript. No external
 * icon library, image file, font or licence-dependent asset is loaded.
 *
 * .asy-file-upload__remove removes one file.
 * .asy-file-upload__clear-all clears all files from this HubSpot file field.
 */
form .asy-file-upload__remove,
form .asy-file-upload__clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;

  color: #e83940;
  background-color: transparent;

  border: 0;
  border-radius: 4px;

  cursor: pointer;
}

form .asy-file-upload__remove svg,
form .asy-file-upload__clear-all svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

form .asy-file-upload__remove:hover,
form .asy-file-upload__remove:focus-visible,
form .asy-file-upload__clear-all:hover,
form .asy-file-upload__clear-all:focus-visible {
  background-color: rgba(232, 57, 64, 0.08);
}

form .asy-file-upload__remove:focus-visible,
form .asy-file-upload__clear-all:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

form .asy-file-upload__remove:disabled,
form .asy-file-upload__clear-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

form .asy-file-upload__clear-all[hidden] {
  display: none !important;
}

/* Disabled HubSpot file field. */
form .hs-form-field.asy-file-upload-disabled .asy-file-upload {
  opacity: 0.6;
  cursor: not-allowed;
}

/*
 * REQUIRED FIELD ERROR
 *
 * This red border appears after a submission attempt when HubSpot requires the
 * file field but the genuine native input contains no file.
 */
form.asy-submit-attempted
  .hs-form-field.asy-file-upload-error
  .asy-file-upload {
  border-color: var(--hsf-global-error__color) !important;
}

/*
 * FILE-SIZE ERROR
 *
 * The 10 MB limit is checked immediately when files are added. A rejected
 * addition receives a red border immediately, without waiting for Submit.
 */
form
  .hs-form-field.asy-file-upload-limit-error
  .asy-file-upload {
  border-color: var(--hsf-global-error__color) !important;
}

/*
 * Responsive behavior.
 *
 * The upload area remains 100% of its HubSpot column. On small screens the
 * touch target is slightly taller while each file row keeps its trash icon on
 * the right, aligned with the global trash icon.
 */
@media (max-width: 480px) {
  form .asy-file-upload {
    min-height: 112px;
    padding: 22px 12px 16px;
  }

  form .asy-file-upload__help {
    max-width: 100%;
    font-size: 0.78em;
  }

  /*
   * Keep file information on the left and the trash icon on the right even on
   * narrow screens. Long names shrink with an ellipsis instead of widening the
   * page or pushing the button onto a second line.
   */
  form .asy-file-upload__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;

    /*
     * Keep the same 0.7rem horizontal padding as desktop so the per-file trash
     * icons remain vertically aligned with the global trash icon above them.
     */
    padding: 0.55rem 0.7rem;
  }

  form .asy-file-upload__summary {
    gap: 0.35rem;
  }
}


/* ==========================================================================
   8. Rich text
   ========================================================================== */

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

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


/* ==========================================================================
   9. GDPR
   ========================================================================== */

/*
 * GDPR and subscription checkboxes use the shared checkbox styles
 * defined in section 5.
 */

/* ==========================================================================
   10. Validation
   ========================================================================== */

/* Required-field asterisk. */
form .hs-form-required {
  color: var(--hsf-global-error__color);
}

/* HubSpot's standard error border. */
form .hs-input.error {
  border-color: var(--hsf-global-error__color);
}

/*
 * Individual HubSpot messages under fields are hidden because this design uses
 * the global validation message above the Submit button.
 */
form .hs-form-field .hs-error-msg,
form .hs-form-field .hs-error-msgs,
form .legal-consent-container .hs-error-msg,
form .legal-consent-container .hs-error-msgs {
  display: none !important;
}

/*
 * Global HubSpot validation message:
 * "Please complete all required fields."
 */
form .hs_error_rollup {
  margin: 0 0 1rem;
  padding: 0;
}

form .hs_error_rollup .hs-error-msgs,
form .hs_error_rollup .hs-error-msgs li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

form .hs_error_rollup .hs-error-msgs {
  display: block !important;
  color: var(--hsf-global-error__color);
}

form .hs_error_rollup .hs-error-msg {
  display: block !important;
  margin: 0 !important;
  color: var(--hsf-global-error__color);
}

form .hs_error_rollup .hs-error-msgs li label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  margin: 0;
  padding: 0;

  color: var(--hsf-global-error__color);

  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

/*
 * Before the first submission attempt, validation messages are hidden.
 */
form:not(.asy-submit-attempted) .hs_error_rollup,
form:not(.asy-submit-attempted) .hs-error-msg,
form:not(.asy-submit-attempted) .hs-error-msgs {
  display: none !important;
}

/*
 * Before the first submission attempt, HubSpot may already have applied its
 * .error class. Keep the normal grey border until the user actually submits.
 */
form:not(.asy-submit-attempted) .hs-input.error {
  border-color: #c7c7c7 !important;
}

/* After the first submission attempt, invalid standard fields become red. */
form.asy-submit-attempted .hs-input.error {
  border-color: var(--hsf-global-error__color) !important;
}

/* After the first submission attempt, show HubSpot's global error message. */
form.asy-submit-attempted .hs_error_rollup {
  display: block !important;
}


/* ==========================================================================
   11. Submit button
   ========================================================================== */

form input[type='submit'],
form .hs-button {
  display: inline-block;
  width: 100%;

  padding: 6px 12px;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  color: #fff;
  background-color: #e83940;

  border: none !important;
  border-radius: 4px;

  cursor: pointer;
  text-align: center;
  white-space: normal !important;

  transition: all 0.15s linear;
}


/* ==========================================================================
   12. Full-screen submission processing overlay
   ========================================================================== */

/*
 * Prevent page scrolling while the blocking submission overlay is visible.
 * This class is added only after the form has passed the file checks and the
 * browser/HubSpot has actually started submission.
 */
body.asy-submission-in-progress {
  overflow: hidden;
}

/*
 * Full-screen layer displayed in front of the page during the upload/submission
 * process. A high z-index ensures that it stays above HubSpot page content.
 */
.asy-submission-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.92);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.asy-submission-overlay[hidden] {
  display: none !important;
}

/* JavaScript adds this class while processing is active. */
.asy-submission-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Centered content block. */
.asy-submission-overlay__dialog {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(100%, 460px);
  padding: 28px 24px;
  box-sizing: border-box;

  color: #09152b;
  text-align: center;
}

/*
 * Large processing wheel.
 * Only CSS is used, so there is no external image or JavaScript dependency.
 */
.asy-submission-overlay__spinner {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  box-sizing: border-box;

  border: 6px solid #e6e6e6;
  border-top-color: #e83940;
  border-radius: 50%;

  animation: asy-submission-spin 0.8s linear infinite;
}

.asy-submission-overlay__title {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.asy-submission-overlay__hint {
  max-width: 38rem;
  margin-top: 0.55rem;
  white-space: pre-line;

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: inherit;
  line-height: 1.5;
}

@keyframes asy-submission-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Reduced-motion accessibility fallback: keep the progress wheel visible but
 * stop continuous rotation when the user requests reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  .asy-submission-overlay,
  .asy-submission-overlay__spinner {
    transition: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .asy-submission-overlay {
    padding: 16px;
  }

  .asy-submission-overlay__dialog {
    padding: 22px 16px;
  }

  .asy-submission-overlay__spinner {
    width: 60px;
    height: 60px;
    border-width: 5px;
  }
}


/* ==========================================================================
   13. Captcha
   ========================================================================== */

.grecaptcha-badge {
  right: 8px !important;
  bottom: 8px !important;

  margin: 0 auto;
  opacity: 0.6;

  transform: scale(0.75);
  transform-origin: bottom right;
}

.grecaptcha-badge:hover {
  opacity: 1;
}


/* ==========================================================================
   14. Floating labels
   ========================================================================== */

form .asy-floating-control {
  position: relative;
  width: 100%;
  min-width: 0;
}

form .asy-floating-control > .input {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

/* Label initially displayed inside the field. */
form .asy-floating-control > label {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 2;

  max-width: calc(100% - 20px);

  margin: 0;
  padding: 1px 4px 2px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: inherit;
  background-color: #fff;

  font-size: 1em;
  font-weight: inherit;
  line-height: 1.2;

  pointer-events: none;

  transform: translateY(-50%);
  transform-origin: left center;

  transition: opacity 0.12s ease;
}

/* Floating state while focused, filled or browser-autofilled. */
form .asy-floating-control.is-focused > label,
form .asy-floating-control.has-value > label,
form .asy-floating-control.is-autofilled > label {
  top: 0;
  transform: translateY(-35%);
  font-size: 0.82em;
}

/* Hides native placeholders because the label itself acts as the placeholder. */
form .asy-floating-control input::placeholder,
form .asy-floating-control textarea::placeholder {
  color: transparent;
  opacity: 0;
}

/* Standard floating controls always fill their available width. */
form .asy-floating-control input[type='text'],
form .asy-floating-control input[type='email'],
form .asy-floating-control input[type='password'],
form .asy-floating-control input[type='tel'],
form .asy-floating-control input[type='number'],
form .asy-floating-control input[type='search'],
form .asy-floating-control select,
form .asy-floating-control textarea {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

form .asy-floating-control > label .hs-form-required {
  color: var(--hsf-global-error__color) !important;
}

/*
 * When an empty select is not focused, keep its label visible inside the field.
 */
form
  .asy-floating-control.asy-floating-select:not(.is-focused):not(.has-value)
  > label {
  opacity: 1;
  background-color: transparent;
}

form
  .asy-floating-control.asy-floating-select:not(.is-focused):not(.has-value)
  > label
  .hs-form-required {
  color: var(--hsf-global-error__color) !important;
}


/* ==========================================================================
   15. Textarea floating label
   ========================================================================== */

form .asy-floating-control.asy-floating-textarea > label {
  top: 18px;
  transform: translateY(0);
  font-size: 1em;
}

form .asy-floating-control.asy-floating-textarea.is-focused > label,
form .asy-floating-control.asy-floating-textarea.has-value > label,
form .asy-floating-control.asy-floating-textarea.is-autofilled > label {
  top: 0;
  transform: translateY(-35%);
  font-size: 0.82em;
}


/* ==========================================================================
   16. Select lists
   ========================================================================== */

/* Select controls fill their floating-label wrapper. */
form
  .asy-floating-control.asy-floating-select
  select {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * HubSpot's temporary placeholder option is visually hidden in the closed
 * field to avoid showing it twice next to the custom floating label.
 */
form
  .asy-floating-control.asy-floating-select
  select.is-placeholder {
  color: transparent !important;
}

/* Options remain readable when the native select menu is opened. */
form
  .asy-floating-control.asy-floating-select
  select.is-placeholder
  option {
  color: #000;
}

/* Empty select: label is shown inside the field. */
form
  .asy-floating-control.asy-floating-select:not(.is-focused):not(.has-value)
  > label {
  top: 50%;
  opacity: 1;
  background-color: #fff;
  transform: translateY(-50%);
  font-size: 1em;
}

/* Focused or filled select: label moves above the border. */
form
  .asy-floating-control.asy-floating-select.is-focused
  > label,
form
  .asy-floating-control.asy-floating-select.has-value
  > label {
  top: 0;

  opacity: 1;
  background-color: #fff;

  transform: translateY(-35%);
  font-size: 0.82em;
}

/* Required asterisk in select labels. */
form
  .asy-floating-control.asy-floating-select
  > label
  .hs-form-required {
  color: var(--hsf-global-error__color) !important;
}


/* ==========================================================================
   17. International phone field
   ========================================================================== */

/*
 * Country prefix selector + phone number are displayed as two grid columns.
 */
form
  .asy-floating-control.asy-floating-phone
  > .input
  > .hs-fieldtype-intl-phone {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 8px;
  align-items: stretch;

  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Country prefix selector. */
form
  .asy-floating-control.asy-floating-phone
  > .input
  > .hs-fieldtype-intl-phone
  > select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  box-sizing: border-box;
}

/* Visible phone number input. */
form
  .asy-floating-control.asy-floating-phone
  > .input
  > .hs-fieldtype-intl-phone
  > input[type='tel'] {
  display: block;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  box-sizing: border-box;
}

/* HubSpot technical hidden input must remain hidden. */
form
  .asy-floating-control.asy-floating-phone
  > .input
  > .hs-fieldtype-intl-phone
  > input[type='hidden'] {
  display: none !important;
}

@media (max-width: 480px) {
  form
    .asy-floating-control.asy-floating-phone
    > .input
    > .hs-fieldtype-intl-phone {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}


/* ==========================================================================
   18. Conditional Country + State on the same row
   ========================================================================== */

/*
 * When JavaScript adds .asy-country-state-row, Country and State share the
 * available width equally on desktop.
 */
form .hs-dependent-field.asy-country-state-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  column-gap: 1.4rem;
  align-items: start;

  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

form
  .hs-dependent-field.asy-country-state-row
  > .hs_dotb_country {
  grid-column: 1;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-right: 0 !important;
}

form
  .hs-dependent-field.asy-country-state-row
  > .hs-form-field[class*='asy_state_'] {
  grid-column: 2;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-right: 0 !important;
}

form
  .hs-dependent-field.asy-country-state-row
  > .hs_dotb_country
  .input,
form
  .hs-dependent-field.asy-country-state-row
  > .hs-form-field[class*='asy_state_']
  .input,
form
  .hs-dependent-field.asy-country-state-row
  > .hs_dotb_country
  select,
form
  .hs-dependent-field.asy-country-state-row
  > .hs-form-field[class*='asy_state_']
  select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

form
  .hs-dependent-field.asy-country-state-row
  > .hs-form-field {
  margin-bottom: 1.8rem;
}

/* Mobile: Country and State stack vertically. */
@media (max-width: 767px) {
  form .hs-dependent-field.asy-country-state-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.8rem;
  }

  form
    .hs-dependent-field.asy-country-state-row
    > .hs_dotb_country,
  form
    .hs-dependent-field.asy-country-state-row
    > .hs-form-field[class*='asy_state_'] {
    grid-column: 1;
  }
}


/* ==========================================================================
   19. Standard input borders
   ========================================================================== */

/*
 * File inputs are intentionally excluded. Their native fallback keeps the
 * browser's native appearance, while the enhanced upload uses its own border.
 */
form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='search'],
form select,
form textarea {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #c7c7c7 !important;

  box-shadow: none !important;
  outline: none;
}

/* Black border while a standard field is focused. */
form input[type='text']:focus,
form input[type='email']:focus,
form input[type='password']:focus,
form input[type='tel']:focus,
form input[type='number']:focus,
form input[type='search']:focus,
form select:focus,
form textarea:focus {
  border-width: 1px !important;
  border-color: #000 !important;

  box-shadow: none !important;
  outline: none;
}

/* Grey border when a standard field is not focused. */
form input[type='text']:not(:focus),
form input[type='email']:not(:focus),
form input[type='password']:not(:focus),
form input[type='tel']:not(:focus),
form input[type='number']:not(:focus),
form input[type='search']:not(:focus),
form select:not(:focus),
form textarea:not(:focus) {
  border-width: 1px !important;
  border-color: #c7c7c7 !important;

  box-shadow: none !important;
}


/* ==========================================================================
   20. Textarea size
   ========================================================================== */

form .hs-fieldtype-textarea textarea {
  min-height: 12rem;
  height: auto;

  resize: vertical;
  overflow-y: auto;
}
/* Icon wrapper */

.icon {
  display: inline-flex;
  border-radius: 50%;
}

.icon--square .icon {
  border-radius: 0;
}

/* Icon */

.icon svg {
  vertical-align: middle;
}
/* Table */

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

/* Table cells */

th,
td {
  padding: 0.7rem;
  vertical-align: top;
}

/* Table header */

thead th,
thead td {
  vertical-align: bottom;
}

/* Components */

/* Navigation skipper */

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

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  z-index: 2;
  top: 0;
  left: 0;
  overflow: visible;
  height: auto;
  width: auto;
}
/* Card */

.card {
  border: 0;
}

.card--dark,
.card--light {
  padding: 1.4rem;
}
/* Blog listing */

.blog-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.blog-listing--3-col,
.blog-listing--4-col {
  justify-content: flex-start;
}

/* Section heading */

.blog-listing__heading {
  width: 100%;
  text-align: center;
}

/* Article */

.blog-listing__post {
  display: flex;
  width: 100%;
  padding: 0;
  margin-bottom: 2.8rem;
  flex-direction: column;
}

.blog-listing__post-inner-wrapper {
  display: flex;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
}

/* Featured image */

.blog-listing__post-image-wrapper {
  display: flex;
}

.blog-listing__post-image {
  height: auto;
  width: 100%;
}

/* Content */

.blog-listing__post-content {
  display: flex;
  padding: 0.7rem 0 0;
  flex-direction: column;
  flex-grow: 1;
}

.card--dark .blog-listing__post-content,
.card--light .blog-listing__post-content {
  padding: 1.4rem;
}

/* Heading */

.blog-listing__header {
  margin-bottom: 1.05rem;
}

/* Tags */

.blog-listing__post-tags {
  margin-bottom: 0.7rem;
}

.blog-listing__post-tag,
.blog-listing__post-tag:hover,
.blog-listing__post-tag:focus,
.blog-listing__post-tag:active {
  text-decoration: none;
}

/* Title */

.blog-listing__post-title {
  margin-bottom: 0.7rem;
}

/* Author */

.blog-listing__post-author {
  display: flex;
  margin-bottom: 0.7rem;
  align-items: center;
}

.blog-listing__post-author-image {
  height: auto;
  width: 50px;
  margin-right: 0.7rem;
}

.blog-listing__post-author-name,
.blog-listing__post-author-name:hover,
.blog-listing__post-author-name:focus,
.blog-listing__post-author-name:active {
  text-decoration: none;
}

/* Date */

.blog-listing__post-timestamp {
  display: block;
  margin-bottom: 0.35rem;
}

/* Button */

.blog-listing__post-button-wrapper {
  margin-top: auto;
}

/* Blog listing - basic grid */

.blog-listing--card .blog-listing__post {
  flex-direction: column;
}

.blog-listing--2-col .blog-listing__post {
  width: calc(50% - 1rem);
}

.blog-listing--3-col .blog-listing__post {
  width: calc(33.3% - 1rem);
}

.blog-listing--4-col .blog-listing__post {
  width: calc(25% - 1rem);
}

.blog-listing--3-col .blog-listing__post:nth-of-type(3n + 1),
.blog-listing--3-col .blog-listing__post:nth-of-type(3n + 2) {
  margin-right: 1.5rem;
}

.blog-listing--4-col .blog-listing__post:nth-of-type(4n + 1),
.blog-listing--4-col .blog-listing__post:nth-of-type(4n + 2),
.blog-listing--4-col .blog-listing__post:nth-of-type(4n + 3) {
  margin-right: 1.333rem;
}

@media (max-width: 767px) {
  .blog-listing .blog-listing__post {
    width: 100%;
    margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
}

.blog-listing--card .blog-listing__post-image-wrapper {
  height: 200px;
}

.blog-listing--card .blog-listing__post-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .blog-listing--card .blog-listing__post-image-wrapper,
  .blog-listing--card .blog-listing__post-image {
    height: auto;
  }
}

/* Blog listing - side by side */

/* stylelint-disable no-descending-specificity */
.blog-listing--list .blog-listing__post {
  display: flex;
}
/* stylelint-enable no-descending-specificity */

.blog-listing--list .blog-listing__post-image-wrapper {
  width: 100%;
}

.blog-listing--list .blog-listing__post-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .blog-listing--list .blog-listing__post-image-wrapper,
  .blog-listing--list .blog-listing__post-image {
    height: auto;
  }
}

@media (min-width: 768px) {
  .blog-post-listing__post--list {
    flex-direction: row;
  }

  .blog-listing__post-content--list {
    order: 1;
  }

  .blog-post-listing__post-image-wrapper--list {
    order: 1;
  }

  .blog-post-listing__post-image-wrapper--right {
    order: 2;
  }

  .blog-listing--list .blog-listing__post-image-wrapper {
    width: 25%;
  }

  .blog-listing--list .blog-post-listing__post-image-wrapper--left {
    margin-right: 1.4rem;
  }

  .blog-listing--list .blog-post-listing__post-image-wrapper--right {
    margin-left: 1.4rem;
  }
}
/* Logo */

.widget-type-logo:not(.hs-lp-header-logo) img {
  height: auto;
  max-width: 100%;
  margin-bottom: 1.4rem;
}

/* Menu and simple menu */

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

.hs-menu-wrapper li {
  margin: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper li {
    margin-bottom: 1.4rem;
    text-align: center;
  }
}

/* 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 {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

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

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

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

@media (max-width: 767px) {
  /* prettier-ignore */
  .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 {
    position: relative;
    top: auto;
    left: 0;
    opacity: 1;
  }
}

/* Rich text */

.widget-type-rich_text img {
  height: auto;
  max-width: 100%;
}

/* If the default module language switcher is used, keep growth margins from messing it up */
.lang_switcher_class .lang_list_class li {
  margin: initial;
}

/* Utilities */

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

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

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


/* Mobile page margins */

@media (max-width: 1024px) {
  .row-fluid {
    padding-inline: 6px;
    box-sizing: border-box;
  }
}