/* Theme base styles
   ---------------------------------------------------------------------------
   Include manifest in ITCSS order, expressed as CSS cascade layers so that
   order, not specificity, decides conflicts (docs/migration-plan.md §14.2).

   generic   -> reset, normalize, font fallbacks
   objects   -> layout patterns with no cosmetics (grid, containers, splits)
   elements  -> bare HTML elements and HubSpot's form/button classes
   components-> partial-specific UI (header, footer, hero, blog)
   utilities -> single-purpose helpers; the only layer allowed !important

   theme-overrides.css is loaded separately after this file and is unlayered
   on purpose: it applies the --pc-* tokens and must win over any layer.
   Components change appearance by remapping tokens (see utilities/_schemes.css),
   not by out-specifying theme-overrides. Module CSS (module.css) is also
   unlayered so field-driven module styles win over theme defaults.

   Tools: css/tools/_macros.css is imported by theme-overrides.css only.
   ------------------------------------------------------------------------- */

@layer generic, objects, elements, components, utilities;

@layer generic {
  /* Reset
   A light layer on top of normalize.css: sane box model, media that never
   overflows its column, form controls that inherit type, and the page-level
   defaults every partial can rely on. No cosmetics here. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-wrap: break-word;
  text-rendering: optimizelegibility;
}

img,
picture,
video,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  block-size: auto;
  vertical-align: middle;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none;
}

/* Anchor targets clear the sticky header. --pc-header-height comes from theme-overrides.css. */

:target {
  scroll-margin-block-start: calc(var(--pc-header-height) + var(--pc-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
  /*! 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;
}
  /* Fonts
   ---------------------------------------------------------------------------
   The real families (Work Sans, Open Sans, Bebas Neue) are declared as Google
   font fields in fields.json and served by HubSpot from the page's own domain,
   so nothing here loads a web font. What this file provides is a metric-
   matched local fallback for each role, so text set in the fallback occupies
   the same space as the web font and the swap does not shift layout (CLS).

   The overrides were computed with fontTools from the Google-served latin
   files against Arial's metrics (xAvgCharWidth / typo ascender and descender).
   If a theme font family changes in Settings > Theme, recompute these:
   docs/migration-plan.md §10.3.

   Consumed by theme-overrides.css as the second family in each font stack:
   --pc-font-body:    "Open Sans", "Polarcraft Body Fallback", sans-serif
   --pc-font-heading: "Work Sans", "Polarcraft Heading Fallback", sans-serif
   --pc-font-label:   "Bebas Neue", "Polarcraft Label Fallback", sans-serif
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Polarcraft Body Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 116.04%;
  ascent-override: 92.11%;
  descent-override: 25.25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Polarcraft Heading Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 135.25%;
  ascent-override: 68.76%;
  descent-override: 17.97%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Polarcraft Label Fallback";
  src: local("Arial Narrow"), local("Arial"), local("Liberation Sans Narrow");
  size-adjust: 87.67%;
  ascent-override: 102.65%;
  descent-override: 34.22%;
  line-gap-override: 0%;
}
}

@layer objects {
  

/* 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));
    }
  
}
  /* Containers and drag-and-drop areas
   Structure only. Widths and section spacing are applied from tokens in
   theme-overrides.css §2 (--pc-container*, --pc-gutter, --pc-section-space).
   HubSpot renders dnd areas as .dnd-section > .row-fluid > .dnd-column. */

.content-wrapper {
  margin-inline: auto;
}

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

.dnd-section .dnd-column {
  padding-inline: var(--pc-space-4);
}

@media (max-width: 39.99rem) {
  .dnd-section .dnd-column {
    padding-inline: 0;
  }

  /* Columns stack on phones; give each one after the first some air. */
  .dnd-section .dnd-column + .dnd-column {
    margin-block-start: var(--pc-space-6);
  }
}

/* Full-bleed section that still keeps its content in the container. */

.dnd-section--bleed {
  padding-inline: 0;
}

.dnd-section--bleed > .row-fluid {
  max-width: none;
}
  /* Diagonal split backgrounds
   The angled black/blue and light/dark splits seen on the Products hero and
   the Home contact section. Gradient stops are defined from scheme tokens in
   theme-overrides.css §12 (.o-diagonal--dark-brand, .o-diagonal--light-dark);
   this file only provides the layout box.

   Usage: add the object class to a dnd section (section class field) and pick
   a modifier. Content inside uses the normal grid; the split sits behind it. */

.o-diagonal {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Below the md breakpoint the two halves stack, so the angle is softened to
   a horizontal band split instead of a steep diagonal. */

@media (max-width: 55.99rem) {
  .o-diagonal {
    --pc-diagonal-angle: 165deg;
    --pc-diagonal-stop: 62%;
  }
}
  /* Media split
   Two-column text-and-image pattern used by feature columns, the split intro
   and the contact panel. Stacks below the md breakpoint. Image side is chosen
   with a modifier so DOM order (text first) never changes for reading order;
   only the non-focusable media column is reordered. */

.o-split {
  align-items: center;
  display: grid;
  gap: var(--pc-space-8) var(--pc-space-9);
  grid-template-columns: minmax(0, 1fr);
}

.o-split__media {
  min-width: 0;
}

.o-split__media > img,
.o-split__media > picture > img {
  inline-size: 100%;
}

.o-split__body {
  min-width: 0;
}

@media (min-width: 56rem) {
  .o-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o-split--media-left .o-split__media {
    order: -1;
  }

  .o-split--wide-media {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .o-split--wide-media.o-split--media-left {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .o-split--top {
    align-items: start;
  }
}
}

@layer elements {
  /* Typography
   Rhythm and structure for bare elements. Families, sizes, weights, colours
   and transforms come from tokens applied in theme-overrides.css §3. */

/* Word breaking for languages that break differently. Kept from the
   boilerplate; harmless for a single-language site. */

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

/* Flow rhythm: one spacing unit between block elements. */

p,
ul,
ol,
dl,
blockquote,
pre,
figure,
table {
  margin-block: 0 var(--pc-space-5);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 var(--pc-space-4);
}

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Lists */

ul ul,
ol ul,
ul ol,
ol ol {
  margin-block-end: 0;
}

ul.no-list,
ol.no-list {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

/* Eyebrow label and heading bar: sizing comes from tokens, this is placement. */

.eyebrow {
  display: block;
  margin-block-end: var(--pc-space-2);
}

.heading-bar {
  border: 0;
  display: block;
  margin-block: var(--pc-space-5) var(--pc-space-6);
  margin-inline: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-inline-start: 4px solid;
  padding-inline-start: var(--pc-space-4);
}

/* Horizontal rules */

hr {
  border: 0;
  border-block-end: 1px solid var(--pc-color-line);
  margin-block: var(--pc-space-6);
}

/* Image alt text renders small when an image fails. */

img {
  font-size: 0.75rem;
  word-break: normal;
}

/* Reading column for long-form copy (blog body, FAQ answers). */

.prose {
  max-width: var(--pc-text-measure);
}

.prose img {
  block-size: auto;
  inline-size: 100%;
}
  /* Buttons
   Structure and states for .button (theme module and CTAs) and .hs-button
   (HubSpot form submit). Colours, type and padding come from --pc-btn-*
   tokens applied in theme-overrides.css §4. Native button elements are
   NOT styled as call-to-action buttons: accordion and tab toggles are
   buttons too and carry their own module CSS. */

.button,
.hs-button,
input[type="submit"] {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--pc-space-2);
  justify-content: center;
  line-height: 1.2;
  min-block-size: 2.75rem;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
  white-space: normal;
}

.button:disabled,
.hs-button:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--block {
  display: flex;
  inline-size: 100%;
}

.button--small {
  font-size: 0.875em;
  min-block-size: 2.25rem;
  padding-block: var(--pc-space-2);
  padding-inline: var(--pc-space-4);
}

/* Unstyled button: for toggles that must look like plain text or icons. */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  text-align: start;
  text-decoration: none;
  transition: none;
}
  /* Forms
   Structure for HubSpot-rendered forms (.hs-form and the markup the forms
   script injects). Colours, borders and radii come from --pc-form-* tokens in
   theme-overrides.css §5; the dark scheme is the default because every form
   on the site sits on a black panel, and .form--light flips it for white
   backgrounds. HubSpot's own inline widths for .form-columns-N are respected. */

.hs-form fieldset {
  border: 0;
  margin: 0;
  max-width: 100%;
  padding: 0;
}

.hs-form-field {
  margin-block-end: var(--pc-space-4);
}

.hs-form fieldset .hs-form-field {
  padding-inline: var(--pc-space-2);
}

.hs-form .form-columns-1 .hs-form-field {
  padding-inline: 0;
}

.hs-form fieldset.form-columns-2,
.hs-form fieldset.form-columns-3 {
  margin-inline: calc(var(--pc-space-2) * -1);
}

/* Labels: always visible, never zero-height. */

.hs-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block-end: var(--pc-space-1);
}

.hs-form-required {
  margin-inline-start: 0.2em;
}

.hs-form legend,
.hs-form .hs-field-desc {
  font-size: 0.875rem;
  margin-block-end: var(--pc-space-2);
}

/* Inputs */

.hs-form .hs-input,
.hs-form input[type="text"],
.hs-form input[type="search"],
.hs-form input[type="email"],
.hs-form input[type="password"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="date"],
.hs-form select,
.hs-form textarea {
  appearance: none;
  display: block;
  inline-size: 100%;
  line-height: 1.4;
  max-inline-size: 100%;
  min-block-size: 2.75rem;
  padding-block: var(--pc-space-2);
  padding-inline: var(--pc-space-3);
}

.hs-form textarea {
  min-block-size: 10rem;
  resize: vertical;
}

.hs-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right var(--pc-space-3) center;
  background-repeat: no-repeat;
  padding-inline-end: var(--pc-space-8);
}

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

/* Checkbox and radio lists */

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

.hs-form .inputs-list > li {
  margin-block-end: var(--pc-space-2);
}

.hs-form .inputs-list label {
  align-items: flex-start;
  display: flex;
  font-weight: inherit;
  gap: var(--pc-space-2);
}

.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
  accent-color: var(--pc-color-brand);
  block-size: 1.125rem;
  flex: 0 0 auto;
  inline-size: 1.125rem;
  margin-block-start: 0.2em;
}

/* Date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput::before {
  content: "\01F4C5";
  inset-block-start: 50%;
  inset-inline-end: var(--pc-space-3);
  position: absolute;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: var(--pc-color-text);
}

/* Rich text and legal consent blocks inside forms */

.hs-form .hs-richtext,
.hs-form .legal-consent-container {
  font-size: 0.875rem;
}

.hs-form .hs-richtext p,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-block: 0 var(--pc-space-2);
}

.hs-form .hs-richtext img {
  block-size: auto;
  max-inline-size: 100%;
}

/* Validation */

.hs-input.invalid.error {
  border-color: currentcolor;
  outline: 2px solid currentcolor;
  outline-offset: 1px;
}

.hs-error-msgs {
  list-style: none;
  margin: var(--pc-space-1) 0 0;
  padding: 0;
}

.hs-error-msg {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Submit */

.hs-form .hs-submit {
  margin-block-start: var(--pc-space-2);
}

.hs-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-3);
}

/* HubSpot's reCAPTCHA badge overlaps the footer; hide it and rely on the
   legal text HubSpot adds to the form instead. */

.grecaptcha-badge {
  visibility: hidden;
}

/* HubSpot's search_input module (.hs-search-field): one row, the input
   stretches, the button sits at the end. Used in the header dropdown, the
   search results page and the 404 page. Colours in theme-overrides.css §5. */

.hs-search-field__bar form {
  align-items: stretch;
  display: flex;
  gap: var(--pc-space-2);
}

.hs-search-field__input {
  flex: 1 1 auto;
  inline-size: 100%;
  min-inline-size: 0;
}

.hs-search-field__bar button {
  align-items: center;
  border: 0;
  border-radius: var(--pc-form-field-radius);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: 0 var(--pc-space-3);
}

.hs-search-field__bar button svg {
  block-size: 1.125rem;
  inline-size: 1.125rem;
}

.hs-search-field {
  position: relative;
}

.hs-search-field__suggestions {
  inset-block-start: calc(100% + var(--pc-space-2));
  inset-inline: 0;
  list-style: none;
  margin: 0;
  padding: var(--pc-space-2) 0;
  position: absolute;
  z-index: 40;
}

.hs-search-field__suggestions li {
  margin: 0;
}

.hs-search-field__suggestions li a {
  display: block;
  padding: var(--pc-space-2) var(--pc-space-4);
  text-decoration: none;
}

/* The first row is the "Results for" summary line */

.hs-search-field__suggestions li:first-child a {
  font-weight: 700;
}
  /* Tables
   Structure only; colours, borders and cell padding come from --pc-table-*
   tokens in theme-overrides.css §6. Wrap wide tables in .table-scroll so the
   page never scrolls sideways. */

table {
  border-collapse: collapse;
  inline-size: 100%;
  overflow-wrap: break-word;
}

td,
th {
  text-align: start;
  vertical-align: top;
}

thead th {
  vertical-align: bottom;
}

.table-scroll {
  margin-block-end: var(--pc-space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > table {
  margin-block-end: 0;
}
  /* Focus, skip link, and motion preferences
   One visible focus treatment for every interactive element, the skip link
   that base.html's #main-content target relies on, and the reduced-motion
   baseline. --pc-focus-ring and --pc-focus-offset are tokens. */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--pc-focus-ring);
  outline-offset: var(--pc-focus-offset);
}

/* Inputs already draw a border; keep the ring tight. */

.hs-form :is(input, select, textarea):focus-visible {
  outline-offset: 0;
}

/* Skip link: visually hidden until focused, then pinned top-left above the header. */

.pc-skip {
  background-color: var(--pc-color-brand-deep);
  border-radius: 0 0 var(--pc-radius-md) 0;
  color: var(--pc-color-white);
  font-weight: 700;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--pc-space-3) var(--pc-space-4);
  position: absolute;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 150ms ease;
  z-index: 100;
}

.pc-skip:focus-visible {
  outline-offset: -3px;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}
}

@layer components {
  /* Site header
   Sticky bar that floats transparent over the page hero and turns solid once
   the page scrolls (.is-scrolled, set by js/main.js from a sentinel). Below
   md the navigation, search and call to action live in an overlay panel
   opened by the menu button (.is-open). Colours come from --pc-header-*
   tokens applied in theme-overrides.css §7. */

.pc-header__sentinel {
  block-size: 3.5rem;
  inline-size: 1px;
  inset-block-start: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.pc-header {
  inset-block-start: 0;
  position: sticky;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
  z-index: 50;
}

.pc-header.is-scrolled {
  box-shadow: var(--pc-shadow-float);
}

.pc-header__inner {
  align-items: center;
  display: flex;
  gap: var(--pc-space-5);
  justify-content: space-between;
  min-block-size: var(--pc-header-height);
  transition: min-block-size 200ms ease;
}

.pc-header.is-scrolled .pc-header__inner {
  min-block-size: var(--pc-header-height-compact);
}

/* Announcement strip: no padding when empty */

.pc-header__announcement:empty,
.pc-header__announcement .dnd-section:empty {
  display: none;
}

.pc-header__announcement .dnd-section {
  padding-block: var(--pc-space-2);
}

/* Logo */

.pc-header__logo {
  flex: 0 1 auto;
  max-inline-size: clamp(11rem, 25vw, 22rem);
}

.pc-logo {
  display: block;
}

.pc-logo img {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

/* Menu button (below md only) */

.pc-header__toggle {
  align-items: center;
  color: var(--pc-header-text);
  display: inline-flex;
  gap: var(--pc-space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--pc-space-2);
}

.pc-header__toggle-label {
  font-family: var(--pc-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pc-header__burger {
  block-size: 1rem;
  display: inline-flex;
  flex-direction: column;
  inline-size: 1.5rem;
  justify-content: space-between;
}

.pc-header__burger span {
  background-color: currentcolor;
  block-size: 2px;
  border-radius: 1px;
  display: block;
  inline-size: 100%;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

.is-open .pc-header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.is-open .pc-header__burger span:nth-child(2) {
  opacity: 0;
}

.is-open .pc-header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Panel: overlay below md, inline row from md up */

.pc-header__panel {
  background-color: var(--pc-header-bg);
  display: none;
  flex-direction: column;
  gap: var(--pc-space-5);
  inset: var(--pc-header-height-compact) 0 auto 0;
  max-block-size: calc(100vh - var(--pc-header-height-compact));
  overflow-y: auto;
  padding: var(--pc-space-6) var(--pc-gutter) var(--pc-space-8);
  position: absolute;
}

.pc-header.is-open .pc-header__panel {
  display: flex;
}

/* Search */

.pc-header__search {
  position: relative;
}

.pc-header__search-toggle {
  align-items: center;
  color: var(--pc-header-text);
  display: inline-flex;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

.pc-header__search-toggle:hover,
.pc-header__search-toggle:focus-visible {
  color: var(--pc-header-text-hover);
}

.pc-header__search-panel {
  inline-size: 100%;
}

/* The module's label stays for screen readers; the placeholder does the
   visual job in the dropdown. */

.pc-header__search-panel .hs-search-field__label {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Call to action */

.pc-header__cta .button-wrapper {
  text-align: start;
}

@media (min-width: 56rem) {
  .pc-header__toggle {
    display: none;
  }

  .pc-header__panel {
    align-items: center;
    background-color: transparent;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--pc-space-6);
    inset: auto;
    justify-content: flex-end;
    max-block-size: none;
    overflow: visible;
    padding: 0;
    position: static;
  }

  .pc-header__search-panel {
    background-color: var(--pc-header-dropdown-bg);
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-float);
    inline-size: 24rem;
    inset-block-start: calc(100% + var(--pc-space-3));
    inset-inline-end: 0;
    padding: var(--pc-space-4);
    position: absolute;
    z-index: 30;
  }

  /* Caret pointing at the search button */
  .pc-header__search-panel::before {
    background-color: var(--pc-header-dropdown-bg);
    block-size: 0.875rem;
    content: "";
    inline-size: 0.875rem;
    inset-block-start: -0.4375rem;
    inset-inline-end: 1rem;
    position: absolute;
    transform: rotate(45deg);
  }
}

/* Floating variant: transparent over the hero until scrolled. The hero
   module pulls itself up under the header by --pc-header-height so the
   header never leaves a gap. */

.pc-header--floating:not(.is-scrolled) {
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
}

/* Lock page scroll while the mobile panel is open */

html.pc-nav-open {
  overflow: hidden;
}

/* Logo-only variant */

.pc-header--simple .pc-header__inner {
  justify-content: center;
}
  /* Site footer
   Three dnd columns (contact, quick menu, newsletter) over a copyright bar.
   Colours come from --pc-footer-* tokens applied in theme-overrides.css §8;
   headings get the brand underline the source footer uses. */

.pc-footer {
  --pc-h3-size: var(--pc-h5-size);
}

.pc-footer__brand {
  padding-block-start: var(--pc-space-9);
  padding-inline: var(--pc-gutter);
}

.pc-logo--footer {
  display: block;
  max-inline-size: 16rem;
}

.pc-footer__area {
  padding-inline: var(--pc-gutter);
}

.pc-footer .dnd-section {
  padding-inline: 0;
}

.pc-footer h3 {
  border-block-end: 3px solid var(--pc-footer-rule);
  letter-spacing: 0.04em;
  margin-block-end: var(--pc-space-5);
  padding-block-end: var(--pc-space-3);
  text-transform: uppercase;
}

.pc-footer p {
  font-family: var(--pc-font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

.pc-footer a {
  text-decoration: none;
}

.pc-footer a:hover,
.pc-footer a:focus-visible {
  color: var(--pc-color-brand);
}

.pc-footer .social-links {
  margin-block-start: var(--pc-space-4);
}

/* Copyright bar */

.pc-footer__bar {
  border-block-start: 1px solid rgb(255 255 255 / 0.2);
  padding-block: var(--pc-space-5);
}

.pc-footer__copyright {
  color: var(--pc-footer-text);
  font-family: var(--pc-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.85;
}

.pc-footer__copyright small,
.pc-footer__copyright .hs_cos_wrapper {
  display: inline;
  font-size: inherit;
}

@media (max-width: 55.99rem) {
  .pc-footer .dnd-column + .dnd-column {
    margin-block-start: var(--pc-space-7);
  }
}
}

@layer utilities {
  /* Helpers
   Single-purpose utilities. This is the only layer where !important is
   allowed, because a utility exists to win. */

/* Visually hidden, still read by screen readers. */

.show-for-sr,
.u-sr-only {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 39.99rem) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* Text alignment for module fields that expose an alignment choice. */

.u-text-start {
  text-align: start !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-end {
  text-align: end !important;
}

/* Measure: cap line length on a block of copy. */

.u-measure {
  max-width: var(--pc-text-measure) !important;
}

.u-measure--center {
  margin-inline: auto !important;
  max-width: var(--pc-text-measure) !important;
}

/* Kill bottom margin on the last flow element inside a box. */

.u-flow-end > :last-child {
  margin-block-end: 0 !important;
}
  /* Colour schemes
   A scheme is a token remap, not a set of overrides. Put .scheme--* on any
   box a template controls (a module wrapper, the footer). HubSpot's dnd
   sections accept no class, so editor-built sections use the "Section
   colour" marker module instead: .dnd-section:has(.pc-scheme-marker--*)
   applies the same remap. Either way
   every element inside picks up the right surface, text, heading, eyebrow,
   link and button colours through the tokens theme-overrides.css applies.

   Scheme colours themselves are theme fields (--pc-scheme-*). The one rule
   this file encodes is decision D3: text on the brand blue is --pc-color-
   on-brand (black), never white, and buttons on brand or dark surfaces use
   the secondary (white) style so they stay legible. */

.scheme--white,
.dnd-section:has(.pc-scheme-marker--white.pc-scheme-marker--scope-section),
.dnd-column:has(.pc-scheme-marker--white.pc-scheme-marker--scope-column) {
  --pc-surface: var(--pc-scheme-white);
  --pc-on-surface: var(--pc-color-text);
  --pc-on-surface-heading: var(--pc-color-ink);
  --pc-on-surface-eyebrow: var(--pc-eyebrow-color);
  --pc-on-surface-link: var(--pc-link-color);
}

.scheme--light,
.dnd-section:has(.pc-scheme-marker--light.pc-scheme-marker--scope-section),
.dnd-column:has(.pc-scheme-marker--light.pc-scheme-marker--scope-column) {
  --pc-surface: var(--pc-scheme-light);
  --pc-on-surface: var(--pc-color-text);
  --pc-on-surface-heading: var(--pc-color-ink);
  --pc-on-surface-eyebrow: var(--pc-eyebrow-color);
  --pc-on-surface-link: var(--pc-link-color);
}

.scheme--dark,
.scheme--diagonal-dark-brand,
.scheme--diagonal-light-dark,
.dnd-section:has(.pc-scheme-marker--dark.pc-scheme-marker--scope-section),
.dnd-section:has(.pc-scheme-marker--diagonal-dark-brand.pc-scheme-marker--scope-section),
.dnd-section:has(.pc-scheme-marker--diagonal-light-dark.pc-scheme-marker--scope-section),
.dnd-column:has(.pc-scheme-marker--dark.pc-scheme-marker--scope-column) {
  --pc-surface: var(--pc-scheme-dark);
  --pc-on-surface: var(--pc-color-white);
  --pc-on-surface-heading: var(--pc-color-white);
  --pc-on-surface-eyebrow: var(--pc-color-brand);
  --pc-on-surface-link: var(--pc-color-brand);
  --pc-link-color-hover: var(--pc-color-white);
  --pc-btn-bg: var(--pc-btn-secondary-bg);
  --pc-btn-color: var(--pc-btn-secondary-color);
  --pc-btn-border-color: var(--pc-btn-secondary-bg);
  --pc-btn-bg-hover: var(--pc-color-brand);
  --pc-btn-color-hover: var(--pc-color-on-brand);
  --pc-btn-border-color-hover: var(--pc-color-brand);
  --pc-focus-ring: 3px solid var(--pc-color-brand);
}

.scheme--brand,
.dnd-section:has(.pc-scheme-marker--brand.pc-scheme-marker--scope-section),
.dnd-column:has(.pc-scheme-marker--brand.pc-scheme-marker--scope-column) {
  --pc-surface: var(--pc-scheme-brand);
  --pc-on-surface: var(--pc-color-on-brand);
  --pc-on-surface-heading: var(--pc-color-on-brand);
  --pc-on-surface-eyebrow: var(--pc-color-on-brand);
  --pc-on-surface-link: var(--pc-color-on-brand);
  --pc-link-color-hover: var(--pc-color-white);
  --pc-btn-bg: var(--pc-btn-secondary-bg);
  --pc-btn-color: var(--pc-btn-secondary-color);
  --pc-btn-border-color: var(--pc-btn-secondary-bg);
  --pc-btn-bg-hover: var(--pc-btn-secondary-bg-hover);
  --pc-btn-color-hover: var(--pc-btn-secondary-color-hover);
  --pc-btn-border-color-hover: var(--pc-btn-secondary-bg-hover);
  --pc-focus-ring: 3px solid var(--pc-color-on-brand);
}

/* Paint the surface. Text colour is inherited by everything inside because
   body/heading/link rules in theme-overrides.css read the remapped tokens. */

[class*="scheme--"],
.dnd-section:has(.pc-scheme-marker--scope-section),
.dnd-column:has(.pc-scheme-marker--scope-column) {
  background-color: var(--pc-surface);
  color: var(--pc-on-surface);
}

/* Forms on light surfaces switch to the light field scheme automatically. */

.scheme--white :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field),
.scheme--light :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field),
.dnd-section:has(.pc-scheme-marker--white.pc-scheme-marker--scope-section) :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field),
.dnd-section:has(.pc-scheme-marker--light.pc-scheme-marker--scope-section) :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field),
.dnd-column:has(.pc-scheme-marker--white.pc-scheme-marker--scope-column) :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field),
.dnd-column:has(.pc-scheme-marker--light.pc-scheme-marker--scope-column) :is(.hs-form, .submitted-message, .hsfc-Renderer, .hs-search-field) {
  --pc-form-bg: transparent;
  --pc-form-padding: 0;
  --pc-form-error-color: var(--pc-form-light-error-color);
  --pc-form-label-color: var(--pc-form-light-label-color);
  --pc-form-field-color: var(--pc-form-light-field-color);
  --pc-form-field-bg: var(--pc-form-light-field-bg);
  --pc-form-field-border-color: var(--pc-form-light-field-border-color);
  --pc-form-help-color: var(--pc-color-text);
  --pc-form-placeholder-color: var(--pc-color-text);
}

/* Diagonal schemes: dark text tokens plus the split background from
   theme-overrides.css §12. The gradient is painted here so the section's own
   background-color rule above does not cover it. */

.scheme--diagonal-dark-brand,
.dnd-section:has(.pc-scheme-marker--diagonal-dark-brand.pc-scheme-marker--scope-section) {
  background-image: linear-gradient(var(--pc-diagonal-angle), var(--pc-scheme-dark) var(--pc-diagonal-stop), var(--pc-scheme-brand) var(--pc-diagonal-stop));
}

.scheme--diagonal-light-dark,
.dnd-section:has(.pc-scheme-marker--diagonal-light-dark.pc-scheme-marker--scope-section) {
  background-image: linear-gradient(90deg, var(--pc-scheme-light) 50%, var(--pc-scheme-dark) 50%);
}

@media (max-width: 55.99rem) {
  .scheme--diagonal-dark-brand,
  .dnd-section:has(.pc-scheme-marker--diagonal-dark-brand.pc-scheme-marker--scope-section) {
    --pc-diagonal-angle: 165deg;
    --pc-diagonal-stop: 62%;
  }
}

/* Split panel: two full-bleed halves with no gutter between them, each
   half's content aligned to the page container, and a brand notch hanging
   from the top seam. Set from the Section colour module ("Layout: Split").
   HubSpot writes the column widths and padding inline with !important, so
   this is the one place the theme answers in kind. */

.dnd-section:has(.pc-scheme-marker--layout-split) {
  position: relative;
}

.dnd-section:has(.pc-scheme-marker--layout-split) > .row-fluid {
  max-width: none;
}

.dnd-section:has(.pc-scheme-marker--layout-split) > .row-fluid > .dnd-column {
  margin-inline: 0 !important;
  padding-inline: var(--pc-gutter) !important;
}

@media (min-width: 48rem) {
  .dnd-section:has(.pc-scheme-marker--layout-split) > .row-fluid > .dnd-column {
    width: 50% !important;
  }

  .dnd-section:has(.pc-scheme-marker--layout-split) .dnd-column:first-child {
    padding-inline: max(var(--pc-gutter), calc((100% - var(--pc-container)) / 2 + var(--pc-space-4))) var(--pc-space-8) !important;
  }

  .dnd-section:has(.pc-scheme-marker--layout-split) .dnd-column:last-child {
    padding-inline: var(--pc-space-8) max(var(--pc-gutter), calc((100% - var(--pc-container)) / 2 + var(--pc-space-4))) !important;
  }

  .dnd-section:has(.pc-scheme-marker--layout-split)::before {
    border-color: var(--pc-color-brand) transparent transparent;
    border-style: solid;
    border-width: 4.5rem 2.5rem 0;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1;
  }
}

/* Angled top edge: the section is pulled up under the one above and clipped
   on a shallow slope, so the section above shows through as a wedge. Set
   from the Section colour module ("Top edge: Angled"). */

.dnd-section:has(.pc-scheme-marker--edge-angled) {
  --pc-edge-rise: clamp(1.5rem, 2.5vw, 2.5rem);

  clip-path: polygon(0 var(--pc-edge-rise), 100% 0, 100% 100%, 0 100%);
  margin-block-start: calc(-1 * var(--pc-edge-rise));
  padding-block-start: var(--pc-edge-rise);
}

/* Decoration: the triangle pattern pinned to the section's top-right
   corner (Section colour module, "Decoration"). Phones hide it so it never
   sits behind a centred title. */

.dnd-section:has(.pc-deco) {
  position: relative;
}

.pc-deco {
  display: none;
  inset-block-start: 0;
  inset-inline-end: 0;
  pointer-events: none;
  position: absolute;
}

@media (min-width: 56rem) {
  .pc-deco {
    display: block;
  }
}
  /* Scroll reveal
   The source site slid images in from the side and faded text up as the page
   scrolled (Divi "slideLeft"/"bounceRight"/"fade", 1 s). This is the same
   idea without a library: js/main.js §6 adds .pc-reveal (with a direction
   modifier and a stagger delay) only to modules that are below the fold when
   the page loads, then swaps in .is-visible as each one scrolls into view
   via IntersectionObserver.

   Three guards keep content visible at rest:
   - nothing here applies unless the root element carries data-pc-reveal, set from the theme
     setting Motion > Scroll reveal animations;
   - the whole file sits under prefers-reduced-motion: no-preference;
   - the class is added by script, so without JavaScript nothing is hidden,
     and elements already on screen at load are never touched (no flash).
   Only opacity and transform animate, so there is no layout shift. */

@media (prefers-reduced-motion: no-preference) {
  /* Hidden state has no transition, so marking an off-screen module hides
     it instantly; the transition lives on the visible state only. */

  [data-pc-reveal] .pc-reveal {
    opacity: 0;
    transform: translate3d(var(--pc-reveal-x, 0), var(--pc-reveal-y, 0), 0);
  }

  [data-pc-reveal] .pc-reveal--up {
    --pc-reveal-y: var(--pc-reveal-distance);
  }

  [data-pc-reveal] .pc-reveal--left {
    --pc-reveal-x: calc(-1 * var(--pc-reveal-distance) * 1.5);
  }

  [data-pc-reveal] .pc-reveal--right {
    --pc-reveal-x: calc(var(--pc-reveal-distance) * 1.5);
  }

  [data-pc-reveal] .pc-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--pc-motion-duration) var(--pc-motion-ease),
      transform var(--pc-motion-duration) var(--pc-motion-ease);
    transition-delay: var(--pc-reveal-delay, 0ms);
  }
}
}