/* Theme base styles */

/* Settings
Global variables available to all stylesheets below.
*/

:root {
    /* Filters — recolour monochrome SVG/PNG assets to a palette colour */
    --white-filter: brightness(0) invert(1);
    --black-filter: brightness(0) invert(0.2);
    --gray-filter: invert(34%) sepia(24%) saturate(470%) hue-rotate(170deg) brightness(90%) contrast(88%);
    --muted: #aab0b8;
    /* Fonts */
    --main-font:
        'Montserrat',             /* primary webfont */
        system-ui,                /* modern system font */
        -apple-system,            /* macOS/iOS */
        BlinkMacSystemFont,       /* Chrome */
        'Segoe UI',               /* Windows */
        Roboto,                   /* Android/Chrome OS */
        'Helvetica Neue',         /* legacy macOS */
        Arial,                    /* broadly available sans-serif */
        sans-serif;               /* final generic fallback */
    --heading-font: 'Bebas Neue', 'Oswald', Arial, sans-serif;
    /* Font Sizes */
    --tag-font: 14px;
    --base-font: 16px;
    --font-large: 20px;
    --font-larger: 24px;
    --font-xl: 28px;
    /* Widths and Heights */
    --content-width: 1200px;
    --banner-width: 1200px;
    --max-width: 2000px;
    /* Border */
    --border-radius: 16px;
    --border-radius-alt1: 16px 16px 0 0;
    --border-width: 2px;
    --border-1: 0.15rem solid transparent;
    /* Shadows */
    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 2px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.15);
    --box-shadow-btm: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
    /* Transitions */
    --transition-duration: 0.3s;
    /* Hover opacity — set via theme-overrides.css from theme.text.links.hover_opacity / hover_opacity_strong */
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--primary-color) var(--content-background);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--content-background);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

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

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

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

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

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

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

/* Font Imports 


/* 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 .4rem;
  text-wrap: pretty;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
  text-wrap: balance;
}



/* Lists */

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

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

ol {
  counter-reset: list-counter;
  padding-left: 0;
}

ol li {
  align-items: flex-start;
  counter-increment: list-counter;
  display: flex;
  gap: 0.75rem;
  list-style: none;
}

ol li::before {
  align-items: center;
  background: var(--content-background);
  border-radius: 50%;
  color: var(--primary-color);
  content: counter(list-counter);
  display: flex;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  margin-top: 0.1rem;
  min-width: 28px;
}

.hs-blog-post ol li::before {
  background: var(--white);
  color: var(--black);
}

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 var(--border-subtle);
}

/* Image alt text */

img {
  font-size: 0.583rem;
  font-style: italic;
  word-break: normal;
}
/* ============================================================
   BUTTON STYLES
   ============================================================ */


/* ------------------------------------------------------------
   Custom Properties
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Base Button Reset & Shared Behavior
   Applies to all button elements and common button classes
   ------------------------------------------------------------ */

.button-wrapper {
  display: grid;
  place-items: center;
}

button,
.button,
.hs-button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: var(--button-height);
  touch-action: manipulation;
  transition: all 0.15s linear;
  user-select: none;
  -webkit-user-select: none;
  white-space: normal;
}


/* ------------------------------------------------------------
   Sized / Shaped Variants
   ------------------------------------------------------------ */

/* Standard button shape (rounded corners, fixed width) */
.button,
.hs-button {
  border-radius: 8px;
  width: var(--button-width);
}

/* Circular icon button — cursor/padding cover use on real <button> elements.
   min-width holds the circle round when it sits in a flex row next to text
   (e.g. buttons-hubdb): as a flex item it would otherwise shrink toward the
   icon's width and render as an ellipse. */
.btn--rounded {
  background: var(--white, #fff);
  border: 1px solid var(--gray, #b5b8ba);
  border-radius: 50%;
  color: var(--black);
  cursor: pointer;
  display: grid;
  height: 48px;
  min-width: 48px;
  padding: 0;
  place-items: center;
  width: 48px;
}


/* ------------------------------------------------------------
   Themed Variants — btn--1 (light) & btn--2 (dark)
   ------------------------------------------------------------ */

/* Shared structure.
   These variants render on either an <a> or a real <button> — a trigger that
   opens a form popup (header.module) has to be a <button>. theme-overrides
   styles the bare `button` element with the theme's button font, spacing,
   colors and a color-swapping hover, so the variants restate every property
   those element rules set. Without that, the same button_1 looks and hovers
   differently depending on whether it was given a link or a form. */
.btn--1,
.btn--2 {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--button-font-size, 0.875rem);
  font-style: inherit;
  font-weight: inherit;
  justify-content: center;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  max-width: calc(var(--button-width) * 2);
  min-height: 0;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-radius 0.3s ease, opacity 0.3s ease;
  width: 100%;
}

/* Light variant */
.btn--1 {
  background-color: var(--btn-1-background, var(--white, #fff));
  border: 1px solid var(--btn-1-border, var(--black, #333));
  color: var(--btn-1-text, #000);
}

/* Dark variant */
.btn--2 {
  background-color: var(--btn-2-background, var(--black));
  border: 1px solid var(--btn-2-border, var(--white, #fff));
  color: var(--btn-2-text, var(--white, #fff));
}

/* Hover / focus — both variants fade slightly, nothing else moves.
   `button:hover`/`button:active` in theme-overrides is (0,1,1); the two-class
   selectors below are (0,2,0) and win, but only for properties they declare —
   so the variant's own colors and radius are repeated here to stop the theme
   button hover from bleeding through on the <button> form of the variant. */
.btn--1:hover,
.btn--1:focus-visible,
.btn--2:hover,
.btn--2:focus-visible {
  opacity: var(--hover-opacity);
}

.btn--1:hover,
.btn--1:focus,
.btn--1:active,
.btn--2:hover,
.btn--2:focus,
.btn--2:active {
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
}

.btn--1:hover,
.btn--1:focus,
.btn--1:active {
  background-color: var(--btn-1-background, var(--white, #fff));
  border-color: var(--btn-1-border, var(--black, #333));
  color: var(--btn-1-text, #000);
}

.btn--2:hover,
.btn--2:focus,
.btn--2:active {
  background-color: var(--btn-2-background, var(--black));
  border-color: var(--btn-2-border, var(--white, #fff));
  color: var(--btn-2-text, var(--white, #fff));
}

/* Icon sizing — shared */
.btn--1 .icon-greater-than,
.btn--2 .icon-greater-than {
  height: 1rem;
}

/* Icon color per variant */
.btn--1 .icon-greater-than { stroke: var(--btn-1-text, var(--black)); }
.btn--2 .icon-greater-than { stroke: var(--btn-2-text, var(--white)); }


/* ------------------------------------------------------------
   Disabled State
   ------------------------------------------------------------ */

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


/* ------------------------------------------------------------
   No-Button Utility
   Strips all button styling — useful for semantic <button>
   elements that should look like plain text or links
   ------------------------------------------------------------ */

.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.7rem;
  padding: 0.5rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

/* Touch devices: never let a focusable control compute below 16px.

   iOS Safari zooms the viewport whenever you focus a form control whose
   font-size is under 16px, and there is no maximum-scale in the viewport meta
   (deliberately — locking zoom breaks accessibility). The page is left panned
   sideways and feels like it cannot be scrolled until you pinch back out. It
   was most obvious on the header search field, which is reachable from every
   page, but it applied to every input in the theme.

   0.7rem resolves to 14px against the theme's 20px root, so all of these were
   under the threshold. 16px is a fixed browser constant rather than a step on
   the type scale, which is why it is written as an absolute value here instead
   of the rem units used elsewhere. Matched on pointer, not width, because
   tablets above the 767px breakpoint zoom too. */
@media (pointer: coarse) {
  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 {
    font-size: 16px;
  }
}

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

/* Inputs - checkbox/radio */

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

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: var(--white, #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: var(--white, #fff);
}

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

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

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

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

/* Submit button */

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

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


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

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

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: var(--white);
  }

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

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

/* Table */

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

/* Table cells */

td,
th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}

/* Table header */

thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: bottom;
}

/* Table rows */

tbody tr:nth-child(odd) {
  background-color: var(--docs-paper);
}

tbody tr:nth-child(even) {
  background-color: var(--docs-soft);
}

tbody tr:hover {
  background-color: rgba(18, 194, 201, 0.06);
}

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

.header-1__top-row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin: 0 0.5rem;
}

.header__row-1 {
  padding-top: 1rem;
  margin-left: 0.5rem;
}

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

@media  (min-width: 2000px) {
  .header-1 .header__container {
    max-width: var(--max-width);
}
}

@media (max-width: 767px) {
  .header-1__top-row {
      display: grid;
  grid-template-areas:
    "logo    submenu"
    "column  column";
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
}

/* ── TOP ROW CELLS ── */
.header__logo.header__logo--main { grid-area: logo; }
.header__simple-menu             { grid-area: submenu; }

/* ── BOTTOM ROW: column spans full width, then its own inner grid ── */
.header-1__column {
  grid-area: column;
  display: grid;
  grid-template-areas: "search nav";
  grid-template-columns: 2fr 1fr;
  align-items: center;
  padding-top: 1rem;
}

/* ── INNER CELLS ── */
.header__row-1           { grid-area: search; } /* contains .header__search */
.header__navigation      { grid-area: nav; }

  .header-1 .header__container {
        justify-content: space-between;
    display: grid;
    grid-template-columns: 1.5fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "client client"
        "nav search";
    align-items: center;
    position: relative;
  }
  .header__container {
    flex-direction: column;
    padding: 0.5rem 0 0;
  }

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

/* 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: 300px;
  overflow: hidden;
  padding: 0.5rem 0.5rem 0 0;
}
  /* Heading Menu */
.header__simple-menu {
  display: grid;
  padding-top: 1rem;
  place-items: flex-start;
}

.header__simple-menu ul {
  font-size: var(--tag-font);
}
.header__simple-menu ul li {
  padding: 0.5rem;
}

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

/* Search bar */

.header__search {
  width: auto;
}



  .hs-search-field__form {
    gap: 0.5rem;
    position: relative;
  }

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



.header__search .hs-search-field__input {
  
  background-color: var(--white, #fff);
  color: var(--black, #333);
  height: 35px;
  margin-left: 1rem;
}

.header__search .hs-search-field__input::placeholder {
  color: #595959;
  opacity: 1;
}



  .header__search .hs-search-field__button {
    background-color: transparent;
    border: none;
    fill: var(--gray);
    justify-content: flex-end;
    padding: 0;
    position: relative;
    right: 0;
    top: 0;
  }

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


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

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: var(--white, #fff);
  border: 2px solid var(--border-subtle);
  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 var(--border-subtle);
  font-size: 0.5rem;
}

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

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

@media (min-width: 767px) {

  .header__simple-menu ul {
  padding: 0;
}
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

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

@media (max-width: 767px) {
  .header__search {
    order: 1;
  }
  .header__search .hs-search-field__input {
    margin-left: 0;
    width: 100%;
  }
  .header__simple-menu {
    padding-top: 0;
  }
}

/* Pairs with the 16px touch minimum in elements/_forms.css. The input is
   border-box, so the fixed 35px height above was only ever tall enough for
   14px text — at 16px the text clips. Let it size to its content and hold a
   44px tap target. */
@media (pointer: coarse) {
  .header__search .hs-search-field__input {
    height: auto;
    min-height: 44px;
  }
}

/* Language switcher */

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

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

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

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity var(--transition-duration);
  visibility: visible;
}

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

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

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: var(--transition-duration);
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: var(--font-medium);
  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 var(--transition-duration);
}

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767px) {
  .header__logo {
    width: 100%;
  }
  .header__logo--main {
    padding-top: 0rem;
  }
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: grid;
    width: 100%;
    place-items: flex-start;
  }
}


@media  (max-width: 468px) {
    .header__simple-menu ul {
  justify-content: center;
}
}
.peerless-footer {
  --footer-container-padding: 4.5rem 0 2.5rem 0;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: center;
}

.peerless-footer__menu__container {
  display: flex;
}

.peerless-footer__menu ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.peerless-footer .m-footer-links ul {
  padding: 0;
}

.peerless-footer__contact,
.peerless-footer__menu {
  line-height: 1.75rem;
  padding: 0 1rem;
}

.peerless-footer__logo {
  padding: 0 1rem 0 0.3rem;
}

.peerless-footer__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 520px;
  padding: 0 0.3rem 0 1.5rem;
  width: auto;
}

.peerless-footer__social {
  margin-top: 1.5rem;
}

/* Flips the icon row above the description; the parent column is flex. */
.peerless-footer__social--above {
  margin-bottom: 1.5rem;
  margin-top: 0;
  order: -1;
}

/* The module centers its icons by default, which reads wrong in this
   left-aligned column. An Alignment set on the module still wins, because
   its scoped rule ships after the theme stylesheet. */
.peerless-footer__social .social-links {
  justify-content: flex-start;
}

.peerless-footer__left,
.peerless-footer__right {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: var(--footer-container-padding);
  width: 100%;
}

.peerless-footer__left {
  justify-content: flex-end;
}

@media screen and (max-width: 1200px) {
  .peerless-footer {
    flex-direction: column;
    --footer-container-padding: 3.5rem 0 2rem 0;
  }
  .peerless-footer__right, .peerless-footer__left {
    justify-content: space-evenly;
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .peerless-footer__logo {
    padding: 0 1rem 1rem 1rem;
  }
}

@media screen and (max-width: 600px) {
  .peerless-footer {
    --footer-container-padding: 3rem 0 2rem 0;
  }
  .peerless-footer__logo {
    padding: 0;
  }

  .peerless-footer__right {
    flex-direction: column;
  }

  .peerless-footer__left {
    flex-direction: row;
  }

  .peerless-footer__content {
    padding-left: 1.25rem;
  }

  .peerless-footer__contact, .peerless-footer__menu {
    padding: 0 0.83rem;
  }
}

@media screen and (max-width: 468px) {
  .peerless-footer__left {
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
}

.peerless-footer__bottom__content {
  border-top: 1px solid var(--gray);
  font-size: var(--base-font);
  margin: 0 auto;
  max-width: var(--content-width);
  padding: 1.25rem 1rem;
  text-align: center;
}

.peerless-back-to-top {
  align-items: center;
  background-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
  border: 0;
  border-radius: var(--border-radius);
  bottom: 4rem;
  color: var(--white, #fff);
  cursor: pointer;
  display: flex;
  height: 3rem;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 0.8rem;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  width: 3rem;
  z-index: 50;
}

.peerless-back-to-top:hover,
.peerless-back-to-top:focus-visible {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  outline: none;
  transform: translateY(-2px);
}

.peerless-back-to-top[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .peerless-back-to-top {
    transition: none;
  }
}
/* Hubspot Overwrite styles 
.hs_cos_wrapper_type_module {
  display: grid;
  place-items: center;
} */

/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 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: row;

  }
}

/* Vertical menu */

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

/* Flyouts */

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/* Theme variants — override CSS variables to switch color palette */
/*
.t-light {
  --background-color: #ffffff;
  --content-background: #f5f5f7;
  --background-secondary: #e8e8ec;
  --white: #171b22;
  --black: #ffffff;
  --gray: #555e6b;
  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 2px rgba(0, 0, 0, 0.06), 0 7px 7px rgba(0, 0, 0, 0.04);
  --box-shadow-btm: 0 10px 15px -5px rgba(0, 0, 0, 0.08);
  --white-filter: brightness(0) invert(0.1);
  --black-filter: brightness(0) invert(1);
}
*/
/* Global Classes */
body {
  background-color: var(--background-color);
  font-family: var(--main-font);
}

img {
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  shape-margin: 1rem;
  vertical-align: middle;
}

.button {
  min-width: var(--button-width);
}


/* =========================================================================
   Float Utilities
   Float an inline image left/right inside a rich-text block so paragraph
   copy flows around it. Apply to <img>/<figure> in HubL rich-text content.
   ========================================================================= */
.right {
  float: right;
  margin: 0 0 0.75rem 0.75rem;
}

.left {
  float: left;
  margin: 0 0.75rem 0.75rem 0;
}


/* =========================================================================
   Underline Animation
   ========================================================================= */

.underline-an {
  color: var(--alt-color--1);
  display: inline-block;
  margin-bottom: 1rem;
  position: relative;
  width: fit-content;
}

.underline-an .icon-greater-than {
  height: 1rem;
  stroke: var(--alt-color--1);
}

a.underline-an {
  align-items: center;
  color: var(--alt-color--1);
  display: flex;
  text-decoration: none;
}

.underline-an::after {
  background-color: var(--alt-color--1);
  bottom: -5px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

.underline-an:hover::after {
  transform: scaleX(0.95);
}

@media screen and (max-width: 768px) {
  .icon-greater-than {
    height: clamp(0.6rem, 2vw, 0.9rem);
  }
}


/* =========================================================================
   Landing Page
   ========================================================================= */

.body-container--landing-page {
  background-color: #fcfafc;
}


/* =========================================================================
   Border Animations
   ========================================================================= */

/* Static */
.s-border--1 {
  border: 3px solid transparent;
  border-image: linear-gradient(45deg, var(--alt-color--2), var(--primary-color));
  border-image-slice: 1;
}

/* Aurora Glow */
.s-border--an1 {
  animation: aurora-glow 3s infinite ease-in-out;
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, var(--alt-color--2), var(--alt-color--1), var(--primary-color));
  border-image-slice: 1;
}

@keyframes aurora-glow {
  0% {
    border-image-source: linear-gradient(135deg, var(--alt-color--2), var(--alt-color--1), var(--primary-color));
    filter: drop-shadow(0 0 5px var(--alt-color--2));
  }
  50% {
    border-image-source: linear-gradient(135deg, var(--primary-color), var(--alt-color--2), var(--alt-color--1));
    filter: drop-shadow(0 0 10px var(--primary-color));
  }
  100% {
    border-image-source: linear-gradient(135deg, var(--alt-color--2), var(--alt-color--1), var(--primary-color));
    filter: drop-shadow(0 0 5px var(--alt-color--1));
  }
}

/* Fiery Gold */
.s-border--gold {
  animation: fiery-border-glow 4s infinite linear;
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #ff4500, #ffd700, #ffae42);
  border-image-slice: 1;
}

@keyframes fiery-border-glow {
  0% {
    border-image-source: linear-gradient(135deg, #ff4500, #ffd700, #ffae42);
    box-shadow: 0 0 10px #ff4500, 0 0 20px #ffd700, 0 0 30px #ffae42;
  }
  20% {
    border-image-source: linear-gradient(135deg, #ffd700, #ffae42, #ff4500);
    box-shadow: 0 0 12px #ffd700, 0 0 24px #ff4500, 0 0 36px #ffae42;
  }
  40% {
    border-image-source: linear-gradient(135deg, #ffae42, #ff4500, #ffd700);
    box-shadow: 0 0 15px #ffae42, 0 0 28px #ff4500, 0 0 40px #ffd700;
  }
  60% {
    border-image-source: linear-gradient(135deg, #ff4500, #ffd700, #ffae42);
    box-shadow: 0 0 12px #ff4500, 0 0 24px #ffd700, 0 0 36px #ffae42;
  }
  80% {
    border-image-source: linear-gradient(135deg, #ffd700, #ffae42, #ff4500);
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff4500, 0 0 30px #ffae42;
  }
  100% {
    border-image-source: linear-gradient(135deg, #ff4500, #ffd700, #ffae42);
    box-shadow: 0 0 10px #ff4500, 0 0 20px #ffd700, 0 0 30px #ffae42;
  }
}

/* Glitch */
.s-border--an2 {
  border: 3px solid transparent;
  position: relative;
}

.s-border--an2::before,
.s-border--an2::after {
  animation: glitch 0.7s steps(5) infinite;
  border: 3px solid;
  border-image: linear-gradient(45deg, var(--primary-color), var(--alt-color--2));
  border-image-slice: 1;
  bottom: -3px;
  content: '';
  filter: blur(2px);
  left: -3px;
  position: absolute;
  right: -3px;
  top: -3px;
}

@keyframes glitch {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  33% {
    clip-path: polygon(0 10%, 100% 5%, 100% 90%, 0 85%);
  }
  66% {
    clip-path: polygon(0 5%, 100% 10%, 100% 95%, 0 90%);
  }
}

/* Ripple Wave */
.s-border--an3 {
  animation: ripple-wave 5s infinite linear;
  border: 6px solid transparent;
  border-image: conic-gradient(var(--alt-color--2), var(--alt-color--1), var(--primary-color), var(--alt-color--2));
  border-image-slice: 1;
}

@keyframes ripple-wave {
  0% {
    border-image-source: conic-gradient(var(--alt-color--2), var(--alt-color--1), var(--primary-color), var(--alt-color--2));
  }
  50% {
    border-image-source: conic-gradient(var(--primary-color), var(--alt-color--2), var(--alt-color--1), var(--primary-color));
  }
  100% {
    border-image-source: conic-gradient(var(--alt-color--2), var(--alt-color--1), var(--primary-color), var(--alt-color--2));
  }
}

/* Sparkle Pulse */
.s-border--an4 {
  animation: sparkle-pulse 2s infinite alternate ease-in-out;
  border: 4px dashed transparent;
  position: relative;
}

.s-border--an4::before {
  animation: sparkle-move 3s infinite;
  border: 4px dashed;
  border-image: linear-gradient(120deg, var(--alt-color--2), var(--primary-color));
  border-image-slice: 1;
  content: '';
  inset: 0;
  position: absolute;
}

@keyframes sparkle-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes sparkle-move {
  0% {
    border-image-source: linear-gradient(120deg, var(--alt-color--2), var(--primary-color));
  }
  100% {
    border-image-source: linear-gradient(300deg, var(--alt-color--2), var(--primary-color));
  }
}


/* =========================================================================
   Text Overlay
   ========================================================================= */

.t-1-text-overlay {
  display: grid;
  height: 100%;
  max-width: var(--content-width);
  opacity: 1;
  place-items: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transition: opacity 0.3s ease 0.3s;
  width: 100%;
  z-index: 10;
}

.t-1-text-overlay :is(h2, h3, h4, p) {
  color: var(--white, #fff);
  font-size: clamp(60px, 9vw, 120px);
  letter-spacing: 0.02em;
  margin: 0;
  text-shadow: 3px 5px 8px rgba(0, 0, 0, 0.5);
  word-break: break-word;
}


/* =========================================================================
   Hover Modifiers
   ========================================================================= */

/* Lift on hover — apply to any block element */
.p--pop {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.p--pop:hover,
.p--pop:focus-within {
  transform: scale(1.03);
}


/* =========================================================================
   A-Paper
   ========================================================================= */

@media screen and (min-width: 768px) {
  .a-paper {
    backdrop-filter: blur(30px);
    /* The ring is a border, not an outline. An outline paints entirely OUTSIDE
       the layout box and ignores box-sizing, so a card sitting flush in the
       content rail painted 0.5rem past it and never lined up with the sections
       around it. As a border it renders identically but the painted edge is
       the layout box edge. Keep the width fixed and toggle the colour, or the
       card shifts 0.5rem on hover. */
    border: 0.5rem solid var(--primary-color);
    display: grid;
    min-height: 600px;
    overflow-y: hidden;
    place-items: center;
    position: relative;
    transform: perspective(600px) rotateX(45deg) scale(0.7);
    transition: all 0.4s ease 0.3s;
    width: 100%;
    z-index: 0;
  }

  .a-paper::before {
    background: var(--white);
    border-radius: var(--border-radius);
    bottom: 0;
    box-shadow: var(--box-shadow);
    content: '';
    filter: brightness(0.2);
    left: 0;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.4s ease, filter 0.4s ease;
    z-index: 1;
  }

  .a-paper:hover,
  .a-paper:focus-within,
  .a-paper.a-paper--hover {
    border-color: transparent;
    height: 100%;
    margin: 3rem 0;
    max-height: 1200px;
    min-height: 500px;
    overflow-y: auto;
    transform: rotate(0deg) scale(1) translateY(10px);
    width: 100%;
    z-index: 2;
  }

  .a-paper:hover::before,
  .a-paper:focus-within::before,
  .a-paper.a-paper--hover::before {
    background: none;
    filter: brightness(1);
    opacity: 0;
    z-index: -1;
  }

  .a-paper:hover .t-1-text-overlay,
  .a-paper:focus-within .t-1-text-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .a-paper.a-paper--hover .t-1-text-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    visibility: hidden;
  }

  .a-paper p {
    font-size: clamp(var(--base-font), 2.2vw, var(--font-large));
  }
}

@media screen and (max-width: 767px) {
  .a-paper {
    margin: 2rem 0;
    min-height: 400px;
  }

  .a-paper p {
    font-size: var(--base-font);
  }

  .t-1-text-overlay {
    visibility: hidden;
  }
}