@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/*! 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;
}

/**
 * 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;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
}

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

.dnd-section,
.content-wrapper--vertical-spacing {
  padding: 80px 20px;
}

.dnd-section > .row-fluid {
  margin: 0 auto;
  max-width: 1200px;
}

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

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/* 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: 28px;
  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: 28px;
    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: 28px;
    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;
  }
}
button, .button,.hs-button {
  background-color: rgba(232, 93, 38, 1.0);
  border: 1px solid #E85D26;
  border-radius: 6px;
  color: #ffffff;
  padding: 15px 25px;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  cursor: pointer;
  line-height: normal;
  letter-spacing: 0;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  text-decoration: none;
  position: relative;
  text-transform:uppercase;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
  /* To affect HubSpot CTAs */
}


button:hover, button:focus, button:active, .button:hover, .button:focus, .button:active,.hs-button:hover, .hs-button:focus, .hs-button:active{
  background-color: rgba(232, 93, 38, 0.9);
  border-color: rgba(232, 93, 38, 0.9);
  color: #ffffff;
  text-decoration: none;
}

button:disabled, .button:disabled,.hs-button:disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-text);
}

button a, .button a{
  color: #ffffff;
}

button a:hover, .button a:hover {
  color: #ffffff;
  text-decoration: none;
}

.widget-type-cta {
  background-color: rgba(232, 93, 38, 1.0);
  border: 1px solid #E85D26;
  border-radius: 6px;
  color: #ffffff;
  padding: 15px 25px;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  cursor: pointer;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
  /* To affect HubSpot CTAs */
}

.widget-type-cta:hover, .widget-type-cta:focus, .widget-type-cta:active {
  background-color: rgba(232, 93, 38, 0.9);
  border-color: rgba(232, 93, 38, 0.9);
  color: #ffffff;
  text-decoration: none;
}

.widget-type-cta:disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-text);
}

.widget-type-cta a {
  color: #ffffff;
}

.widget-type-cta a:hover {
  color: #ffffff; 
  text-decoration: none;
}

.widget-type-cta a {
  color: #ffffff;
}

.widget-type-cta a:hover, .widget-type-cta a:focus, .widget-type-cta a:active {
  text-decoration: none;
}

.button--outlined {
  background-color: transparent;
  color: #E85D26;
  border: 2px solid #E85D26;
  font-weight: bold;
  /* To affect HubSpot CTAs */
}

.button--outlined a {
  color: inherit;
}

.button--arrow {
  color: #0F2B4C;
  background: none;
  border: none;
  padding: 0;
  transition: none;
  /* To affect HubSpot CTAs */
}

.button--arrow:after {
  content: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 13'%3E%3Cpath d='M37.5303 7.0303a.75.75 0 000-1.0606l-4.7729-4.773a.75.75 0 00-1.0607 1.0607L35.9393 6.5l-4.2426 4.2426a.75.75 0 001.0607 1.0607l4.7729-4.773zM0 7.25h37v-1.5H0v1.5z' fill='%230F2B4C'/%3E%3C/svg%3E");
    width: 36px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    }

.button--arrow:hover, .button--arrow:focus, .button--arrow:active {
  background: none;
  border: none;
  text-decoration: none;
  color: #E85D26;
}

.button--arrow:hover:after, .button--arrow:focus:after, .button--arrow:active:after {
  /* Really nasty way of chaning the color of the arrow */
  content: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 13'%3E%3Cpath d='M37.5303 7.0303a.75.75 0 000-1.0606l-4.7729-4.773a.75.75 0 00-1.0607 1.0607L35.9393 6.5l-4.2426 4.2426a.75.75 0 001.0607 1.0607l4.7729-4.773zM0 7.25h37v-1.5H0v1.5z' fill='%23E85D26'/%3E%3C/svg%3E");
    }

.button--arrow:hover a, .button--arrow:focus a, .button--arrow:active a {
  color: inherit;
}

.button--arrow:disabled {
  background: none;
  border: none;
  color: var(--color-grey-mid);
  cursor: auto;
}

.button--arrow a {
  color: inherit;
}
/* Form */
.hs-form-field {
  margin: 0 0 20px;
}

/* Labels */
form label {
  color: #0F2B4C;
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding-top: 0;
  margin-bottom: 4px;
  text-align: left;
  width: auto;
}

/* Help text - legends */
form legend {
  color: #0F2B4C;
  font-size: 12px;
}

/* Inputs */
.input {
  position: relative;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
select,
textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lighter);
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  padding: 15px 12px;
  line-height:28px;
  width: 100%;
  border-color: #E8ECF0;
  color: #0F2B4C;
}

textarea {
  min-height:140px; 
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=file]:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 1px solid #E85D26;
}

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

fieldset.form-columns-0, fieldset.form-columns-1, fieldset.form-columns-2, fieldset.form-columns-3 {
  margin-left: -4px !important ;
  margin-right: -4px !important ;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

fieldset.form-columns-0 > div, fieldset.form-columns-1 > div, fieldset.form-columns-2 > div, fieldset.form-columns-3 > div {
  margin-left: 4px;
  margin-right: 4px;
}

fieldset.form-columns-0 .hs-form-field, fieldset.form-columns-1 .hs-form-field, fieldset.form-columns-2 .hs-form-field, fieldset.form-columns-3 .hs-form-field {
  flex-grow: 1;
  flex-basis: 135px;
}

fieldset.form-columns-0 .hs-form-field .input, fieldset.form-columns-1 .hs-form-field .input, fieldset.form-columns-2 .hs-form-field .input, fieldset.form-columns-3 .hs-form-field .input {
  margin-right: 0;
}

fieldset.form-columns-0 .hs-form-field .hs-input, fieldset.form-columns-1 .hs-form-field .hs-input, fieldset.form-columns-2 .hs-form-field .hs-input, fieldset.form-columns-3 .hs-form-field .hs-input {
  width: 100% !important;
}

fieldset.form-columns-0 .hs-form-field input[type=checkbox],
fieldset.form-columns-0 .hs-form-field input[type=radio], fieldset.form-columns-1 .hs-form-field input[type=checkbox],
fieldset.form-columns-1 .hs-form-field input[type=radio], fieldset.form-columns-2 .hs-form-field input[type=checkbox],
fieldset.form-columns-2 .hs-form-field input[type=radio], fieldset.form-columns-3 .hs-form-field input[type=checkbox],
fieldset.form-columns-3 .hs-form-field input[type=radio] {
  width: auto !important;
}

/* Form placeholder text */
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::placeholder,
.hs-fieldtype-date .input .hs-dateinput:before {
  color: var(--color-disabled-text);
}

/* Inputs - checkbox/radio */
form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inputs-list > li {
  display: block;
  margin: 0.7rem 0;
  padding: 0;
  width: 100%;
}

.inputs-list input,
.inputs-list span {
  font-size: 12px;
  vertical-align: middle;
}

.hs-input[type=checkbox],
.hs-input[type=radio] {
  border: none;
  cursor: pointer;
  height: auto;
  line-height: normal;
  margin-right: 0.35rem;
  padding: 0;
  width: auto;
}

.hs-input[type=checkbox] + label,
.hs-input[type=radio] + label {
  display: inline;
  vertical-align: top;
}

/* Inputs - datepicker */
.hs-fieldtype-date .input .hs-dateinput:before {
  color: var(--color-disabled-text);
  content: '\01F4C5';
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.fn-date-picker button, .fn-date-picker .button {
  min-width: auto;
}

.fn-date-picker .pika-table thead th {
  color: var(--color-white);
  background-color: #E85D26;
}

.fn-date-picker td.is-today .pika-button {
  color: #E85D26;
}

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

.fn-date-picker td .pika-button:hover {
  background: #E85D26 !important;
  border-radius: 0 !important;
  color: var(--color-white);
}

/* Inputs - file picker */
input[type=file] {
  background-color: transparent;
  border: initial;
  box-shadow: none;
  line-height: 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;
}

form .header {
  background-color: transparent;
  border: none;
}

h3.form-title {
  color: #0F2B4C;
}

/* GDPR */
.legal-consent-container {
  margin: 0;
}

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  font-size: 0.875rem;
}

/* Validation */
.hs-form-required {
  color: red;
}

.hs-input.invalid.error {
  border-color: var(--color-error) !important;
}

.hs-error-msg {
  margin-top: 0.35rem;
  font-weight: normal;
}

ul.no-list.hs-error-msgs.inputs-list label,
.hs-error-msg {
  color: var(--color-error) !important;
}

/* Submit button */
form input[type=submit],
form .hs-button {
  background-color: rgba(232, 93, 38, 1.0);
  border: 1px solid #E85D26;
  border-radius: 6px;
  color: #ffffff;
  padding: 15px 25px;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  cursor: pointer;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  outline:0 !important;
  text-decoration: none;
  position: relative;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;

  /* To affect HubSpot CTAs */
}

@media(min-width:768px){
  form input[type=submit],
  form .hs-button {
    min-width:220px;
  }
}

form input[type=submit]:hover, form input[type=submit]:focus, form input[type=submit]:active,
form .hs-button:hover,
form .hs-button:focus,
form .hs-button:active {
  background-color: rgba(232, 93, 38, 0.9);
  border-color: rgba(232, 93, 38, 0.9);
  color: var(--color-white);
  text-decoration: none;
}

form input[type=submit]:disabled,
form .hs-button:disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-text);
}

form input[type=submit] a,
form .hs-button a {
  color: #ffffff;
}

form input[type=submit] a:hover,
form .hs-button a:hover {
  color: white;
  text-decoration: none;
}

h3.form-title{
  margin-bottom:20px;
}

/* Captcha */
.grecaptcha-badge {
  margin: 0;
  max-width: 100%;
}
@media(max-width:450px){
  .hs-form-field{
    width:100% !important;
    flex-basis:100%!important;
  }
  .hs-form-field .input {
    margin-right: 0 !important;
  }

  fieldset.form-columns-0, fieldset.form-columns-1, fieldset.form-columns-2, fieldset.form-columns-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  fieldset.form-columns-0>div, fieldset.form-columns-1>div, fieldset.form-columns-2>div, fieldset.form-columns-3>div {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Table */
table {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #0F2B4C;
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

tbody + tbody {
  border-top: 2px solid #0F2B4C;
}

/* Table Cells */
th,
td {
  border: 1px solid #0F2B4C;
  color: #0F2B4C;
  padding: 0.75rem;
  vertical-align: top;
}

/* Table Header */
thead th,
thead td {
  background-color: rgba(232, 93, 38, 1);
  color: #ffffff;
  vertical-align: bottom;
}

/* Table footer */
tfoot td {
  background-color: rgba(255, 255, 255, 1);
  color: #0F2B4C;
}
html {
  font-size: 16px;
}

body {
  font-family: Inter, sans-serif, sans-serif;
  color: #0F2B4C;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

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

/* Paragraphs */
p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 1.4rem;
}

strong {
  font-weight: 700;
}

/* Anchors */
a {
  color: #E85D26;
  cursor: pointer;
  text-decoration: none;
}

a:hover, a:focus {
  color: #E85D26;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Inter, sans-serif, serif;
  font-weight: 700;
  margin: 0 0 1.4rem;
}

h1 {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 54px;
  color: #0F2B4C;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

h2 {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 44px;
  color: #0F2B4C;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

h3 {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 32px;
  color: #0F2B4C;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

h4{
  color: #0F2B4C;
}

h4,h3.form-title {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

h5 {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 20px;
  color: #0F2B4C;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

h6 {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 18px;
  color: #0F2B4C;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}


@media(max-width:1023px){
  h1 {
    font-size: 43.99999999974px;
  }
  h2 {
    font-size: 35.99999999992px;
  }
  h3 {
    font-size: 28.0px;
  }
}

@media(max-width:767px){
  h1 {
    font-size: 31.999999999859998px;
  }
  h2 {
    font-size: 27.99999999984px;
  }
  h3 {
    font-size: 24.0px;
  }
  h4,h3.form-title {
    font-size: 21.99999999984px;
  }
  h5 {
    font-size: 18.0px;
  }
  h6 {
    font-size: 15.99999999984px;
  }
}

/* Lists */
ul,
ol {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1.1rem;
}

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

ul.no-list {
  list-style: none;
}

/* Code blocks */
code {
  vertical-align: bottom;
}

/* Blockquotes */
blockquote {
  border-left: 2px solid #ffffff;
  margin: 0 0 1.4rem;
  padding-left: 15px;
}

/* Horizontal rules */
hr {
  background-color: var(--color-grey-light);
  border: none;
  color: var(--color-grey-light);
  height: 1px;
}

img{
 max-width:100%; 
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

.disable-focus-styles :focus {
  outline: none;
}
/* Blog subscribe */
.blog-subscribe {
  background-color: var(--color-off-white);
  padding: 80px 0;
}

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

@media screen and (max-width: 768px) {
  .blog-subscribe__wrapper {
    display: block;
  }
}

.blog-subscribe__header {
  flex-basis: 465px;
  flex-grow: 1;
  max-width: 680px;
}

.blog-subscribe__form {
  flex-basis: 450px;
  margin-left: 32px;
}

@media screen and (max-width: 768px) {
  .blog-subscribe__form {
    margin: 32px 0 0;
  }
}
.kl-card-gallery {
  overflow: hidden;
}

.kl-card-gallery > div {
  display: flex;
  flex-wrap: wrap;
  margin: -26px;
}

.kl-card-gallery__card-wrapper {
  display: flex;
  flex-basis: calc(100% / 3);
  padding: 26px;
}

@media screen and (max-width: 768px) {
  .kl-card-gallery__card-wrapper {
    flex-basis: calc(100% / 2);
  }
}

@media screen and (max-width: 520px) {
  .kl-card-gallery__card-wrapper {
    flex-basis: calc(100% / 1);
  }
}

.kl-card-gallery__card {
  width: 100%;
  border: 0.5px solid var(--color-grey-light);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.1);
  border-radius: 9px;
  overflow: hidden;
}

.kl-card-gallery__image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  height: 260px;
  width: 100%;
}

.kl-card-gallery__preheader {
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1rem;
  display: block;
  color: #E85D26;
  margin: 0 0 .5rem;
}

.kl-card-gallery__content {
  display: block;
  padding: 20px 24px;
  color: #0F2B4C;
  text-decoration: none;
}

.kl-card-gallery__content h3, .kl-card-gallery__content h4 {
  margin: 0 0 .5rem;
}

.kl-card-gallery__content p {
  margin: 0;
}

.kl-card-gallery__content:hover, .kl-card-gallery__content:focus {
  color: #0F2B4C;
  text-decoration: none;
}
.kl-card-grid > div {
  display: flex;
  flex-wrap: wrap;
  margin: -26px;
}

.kl-card-grid__card-wrapper {
  display: flex;
  flex-basis: calc(100% / 3);
  padding: 26px;
}

@media screen and (max-width: 768px) {
  .kl-card-grid__card-wrapper {
    flex-basis: calc(100% / 2);
  }
}

@media screen and (max-width: 520px) {
  .kl-card-grid__card-wrapper {
    flex-basis: calc(100% / 1);
  }
}

.kl-card-grid__card {
  width: 100%;
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0px;
  overflow: hidden;
}

.kl-card-grid__image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  height: 260px;
  width: 100%;
}

.kl-card-grid__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  margin: 0 0 .5rem;
}

.kl-card-grid__content {
  display: block;
  padding: 20px 24px;
  color: #0F2B4C;
  text-decoration: none;
}

.kl-card-grid__content h3, .kl-card-grid__content h4 {
  margin: 0 0 .5rem;
}

.kl-card-grid__content p {
  margin: 0;
}

.kl-card-grid__content:hover, .kl-card-grid__content:focus {
  color: #0F2B4C;
  text-decoration: none;
}

.kl-card-grid--4-columns > div {
  margin: -24px -12px;
}

.kl-card-grid--4-columns .kl-card-grid__card-wrapper {
  flex-basis: calc(100% / 4);
  padding: 24px 12px;
}

@media screen and (max-width: 920px) {
  .kl-card-grid--4-columns .kl-card-grid__card-wrapper {
    flex-basis: calc(100% / 3);
  }
}

@media screen and (max-width: 768px) {
  .kl-card-grid--4-columns .kl-card-grid__card-wrapper {
    flex-basis: calc(100% / 2);
  }
}

@media screen and (max-width: 520px) {
  .kl-card-grid--4-columns .kl-card-grid__card-wrapper {
    flex-basis: calc(100% / 1);
  }
}

.kl-card-grid--4-columns .kl-card-grid__image {
  height: 220px;
}
.kl-cards-slider {
  position: relative;
  max-width: 848px;
  margin: 0 auto;
}

.kl-cards-slider-wrapper {
  padding: 0 15px;
}

.kl-cards-slider__arrow {
  position: absolute;
  top: 20px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 8px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kl-cards-slider__arrow svg {
  fill: var(--color-dark);
  display: block;
  width: 100%;
}

.kl-cards-slider__arrow--prev {
  left: 0;
  transform: translateX(-50%);
}

.kl-cards-slider__arrow--next {
  right: 0;
  transform: translateX(50%);
}

.kl-cards-slider__card {
  display: none;
  overflow: hidden;
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 0px;
}

.kl-cards-slider__card--active {
  display: block;
}

.kl-cards-slider__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--color-grey-subtle);
  padding: 16px 48px;
}

@media screen and (max-width: 360px) {
  .kl-cards-slider__header {
    display: block;
    padding: 16px 32px;
  }
}

.kl-cards-slider__image {
  margin: 0 15% 0 0;
}

.kl-cards-slider__button {
  display: flex;
}

@media screen and (max-width: 360px) {
  .kl-cards-slider__button {
    margin: 16px 0 0;
  }
}

.kl-cards-slider__content {
  padding: 16px 48px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 -22px;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 360px) {
  .kl-cards-slider__content {
    padding: 16px 32px;
  }
}

@media screen and (max-width: 580px) {
  .kl-cards-slider__content {
    display: block;
  }
}

.kl-cards-slider__content > div {
  margin: 0 22px;
  flex-grow: 1;
  flex-basis: 200px;
}

.kl-cards-slider__content h5 {
  color: #E85D26;
}

.kl-cards-slider__content ul {
  padding-inline-start: 1.1em;
}
.kl-rich-text__preheader{
  font-family: Roboto;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background-color: #E85D26;
  display: inline-block;
  margin: 0 0 10px;
  padding:10px 12px;
  width:auto;
  border-radius:30px;
  line-height: normal;
  text-transform:uppercase;
  min-width:164px;
  text-align:center;
}

.kl-rich-text h1 {
  color: #0F2B4C;
}

.kl-rich-text p {
  margin: 0 0 1rem;
}

.kl-rich-text p:last-child {
  margin: 0 0 2rem;
}

.kl-rich-text__buttons {
  margin: -10px;
}

.kl-rich-text__buttons .button {
  margin: 10px;
}

@media screen and (max-width: 480px) {
  .kl-rich-text__buttons .button {
    display: block;
  }
}

.kl-rich-text__form {
  max-width: 600px;
}

.kl-rich-text--center {
  text-align: center;
  margin: 0 auto;
}

.kl-rich-text--center .kl-rich-text__form {
  max-width: 600px;
  margin: 0 auto;
}

.kl-rich-text--right {
  text-align: right;
  margin: 0 0 0 auto;
}

.kl-rich-text--right .kl-rich-text__form {
  margin: 0 0 0 auto;
}
.kl-faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kl-faq .kl-faq__entry {
  box-shadow: var(--shadow-md);
  border-radius: 4px;
}
.kl-faq .kl-faq__header {
  padding: 21px 40px;
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.kl-faq .kl-faq__description {
  height: 0;
  overflow: hidden;
  padding: 0 40px;
  transition: height .25s ease-out;
}
.kl-faq__description .kl-faq__inner {
  margin: 0 0 21px;
}
.kl-faq .kl-faq__header h5 {
  font-family: DM Sans;
  font-weight: 400;
  margin: 0;
}
.kl-faq .kl-faq__icon {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  display: flex;
  background-color: var(--color-info);
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 20px;
  line-height: normal;
  transition: transform .2s ease-out;
}
.kl-faq .kl-faq__icon .before_icon,.kl-faq .kl-faq__icon .after_icon {
  transition: all .2s ease-out;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  line-height: normal;
}

.kl-faq .kl-faq__icon .after_icon {
  transform: translate(-60%, -50%) rotate(270deg);
}

.kl-faq .kl-faq__entry--active .kl-faq__icon .after_icon {
  transform: translate(-50%, -60%) rotate(360deg);
}
.kl-faq .kl-faq__header svg {
  vertical-align: middle;
}
.kl-faq .kl-faq__icon {
  min-width: 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
}
@media(max-width:767px){
  .top_content_se.faq{
    margin-bottom: 30px;
  }
  .kl-faq .kl-faq__header {
    padding: 20px;
  }
  .kl-faq .kl-faq__description{
    padding:0 20px; 
  }
  .kl-faq .kl-faq__header h4{
    font-size:20px;
  }
  .kl-faq .kl-faq__icon {
    min-width: 30px;
    width: 30px;
    height: 30px;
    min-height: 30px;
  }
  .kl-faq .kl-faq__icon svg {
    width: 18px;
  }
}
.kl-featured-cards__wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: -12px;
}

.kl-featured-cards__column {
  flex-basis: 360px;
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}

.kl-featured-cards__card-wrapper {
  flex-grow: 2;
  flex-basis: 360px;
  display: flex;
  padding: 12px;
}

.kl-featured-card {
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.kl-featured-card__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  line-height: 1rem;
  margin: 0 0 .75rem;
}

.kl-featured-card__content h1, .kl-featured-card__content h2, .kl-featured-card__content h3, .kl-featured-card__content h4, .kl-featured-card__content h5, .kl-featured-card__content h6 {
  font-weight: bold;
  margin: 0 0 1rem;
}

.kl-featured-card__content p {
  margin: 0 0 2rem;
}

.kl-featured-card__body {
  padding: 32px 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  flex-basis: 250px;
  flex-grow: 99;
}

.kl-featured-card__text {
  flex-grow: 1;
}

.kl-featured-card__image {
  width: 100%;
  flex-basis: 360px;
  flex-grow: 1;
}

.kl-featured-card__image a {
  display: block;
  height: 100%;
}

.kl-featured-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer .top_ft {
  padding: 80px 0 60px;
}
.footer .top_ft a {
  display: inline-block;
  margin-bottom: 10px;
}
.footer .footer_top_inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.footer .footer_top_inner .footer_right .menu_group {
  padding: 0 20px;
  width: 25%;
}
.footer .footer_top_inner .footer_left {
  width: 30%;
  padding: 0 20px;
}
.footer .footer_top_inner .footer_right {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}
.footer .menu_group h3 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  font-family: Roboto;
  margin-bottom: 14px;
}
.footer .footer_top_inner .footer_right .menu_group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer .footer_top_inner .footer_right .menu_group ul li a {
  font-size: 12px;
  line-height: 20px;
  display: block;
  text-decoration: none;
}
.footer .footer_top_inner .footer_right .menu_group ul li {
  margin-bottom: 10px;
}
.footer .footer_top_inner .address p,
.footer form label{
  font-size: 12px;
  font-weight:400;
  line-height: 20px;
}
.footer .top_ft .footer_top {
  padding-bottom: 12px;
}
.footer .footer_mid .footer_mid_inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.footer .contact_detail .contact_item {
  line-height:32px;
  display: flex;
  gap: 14px;
  font-size:14px;
  margin-bottom:14px;
}
.footer .contact_detail .contact_item .icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-info);
}
.footer .contact_detail .contact_item .icon svg {
  fill: currentColor;
}
.footer .footer_mid .footer_mid_inner .footer_mid_left {
  padding: 0 20px;
  width: 30%;
}
.footer .footer_mid .footer_mid_inner .footer_mid_right {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}
.footer .footer_mid_inner .footer_mid_right .footer_social {
  width: 25%;
  padding: 0 20px;
}
.footer .footer_mid_inner .footer_mid_right .footer_form {
  width: 75%;
  padding: 0 20px;
}
.footer .footer__copyright {
  padding: 10px 0;
}
.footer .footer__copyright p {
  font-size: 14px;
  line-height: normal;
  font-weight: 700;
}
.footer .footer_social .social_share_title{
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 32px;
}
.footer .footer_form .form_title{
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 18px;
}
.footer .footer_form .footer_strt{
  max-width: 100%;
  position: relative;
}
.footer .footer_social .social_share {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 18px;
}

.footer .footer_social .social_share a {
  width: 26px;
  height: 26px;
}

.footer .footer_social .social_share a svg {
  fill: currentColor;
}
.footer .footer_form .footer_strt form {
  max-width: calc(100% - 180px);
}

.footer .footer_form .footer_strt form input[type=submit] {
  min-width: 160px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  padding: 5px 10px;
  display: inline-block;
  text-align: center;
}

.footer .footer_form .footer_strt form .actions {
  position: absolute;
  top: 0;
  right: 0;
}

.footer .footer_form .hs-form-field {
  margin: 0;
}

.footer .footer_form form label {
  margin: 0;
}

.footer .footer_form input[type=email],
.footer .footer_form input[type=file], 
.footer .footer_form input[type=number],
.footer .footer_form input[type=password], 
.footer .footer_form input[type=tel], 
.footer .footer_form input[type=text], 
.footer .footer_form select,
.footer .footer_form textarea {
  border: 1px solid;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 29px;
  padding: 5px 18px;
}
.footer .footer_form input::-webkit-input-placeholder {
  opacity: 0.4;
}
.footer .footer_form .footer_strt form input[type=submit] {
  text-transform: capitalize;
}
.footer .top_ft a img {
  vertical-align: middle;
}
.footer .contact_detail .contact_item .text {
  line-height: normal;
}
.footer .contact_detail .contact_item:last-of-type {
  margin-bottom: 0;
}
.footer .contact_detail .contact_item .text a{
  margin-bottom: 0;
  vertical-align: middle;
}
@media(max-width:1024px){
  .footer .footer_top_inner .footer_right .menu_group {
    width: 50%;
  }

  .footer .footer_mid_inner .footer_mid_right .footer_form,.footer .footer_mid_inner .footer_mid_right .footer_social {
    width: 100%;
  }

  .footer .footer_mid .footer_mid_inner .footer_mid_right,
  .footer .footer_top_inner .footer_right{
    row-gap: 20px;
    width:60%;
  }
  .footer .footer_top_inner .footer_left,
  .footer .footer_mid .footer_mid_inner .footer_mid_left {
    width:40%;
  }
}
@media(max-width:850px){
  .footer .footer_form .footer_strt form .actions {
    position:unset;
    padding-top:20px;
  }
  .footer .footer_form .footer_strt form{
    max-width:100%;
  }
}
@media(max-width:767px){
  .footer .footer_top_inner .footer_left,
  .footer .footer_mid .footer_mid_inner .footer_mid_left,
  .footer .footer_mid .footer_mid_inner .footer_mid_right,
  .footer .footer_top_inner .footer_right{
    width:100%;
  }
  .footer .footer_mid .footer_mid_inner,
  .footer .footer_top_inner {
    row-gap: 20px;
  }
  .footer .footer_top_inner .address p {
    margin-bottom: 10px;
  }

  .footer .menu_group h3 {
    margin-bottom: 10px;
  }
}
@media(max-width:450px){
  .footer .footer_top_inner .footer_right .menu_group {
    width: 100%;
  }
}
/* field css */
.footer .top_ft{
  background-color: #091B30;
}
.footer .top_ft,
.footer .top_ft p,
.footer .top_ft li,
.footer .top_ft span,
.footer .top_ft h1,
.footer .top_ft h2,
.footer .top_ft h3,
.footer .top_ft h4,
.footer .top_ft h5,
.footer .top_ft h6{
  color: #FFFFFF;
}
.footer .footer_form input::-webkit-input-placeholder {
  color: #FFFFFF;
}
.footer .top_ft a{
  color: #FFFFFF;
}
.footer .top_ft a:hover{
  color: #E85D26;
}
.footer .footer_form input[type=email],
.footer .footer_form input[type=file], 
.footer .footer_form input[type=number],
.footer .footer_form input[type=password], 
.footer .footer_form input[type=tel], 
.footer .footer_form input[type=text], 
.footer .footer_form select,
.footer .footer_form textarea {
  border-color:#FFFFFF;
  color: #FFFFFF;
}
.footer .bottom_ft,
.footer .bottom_ft p,
.footer .bottom_ft h1,
.footer .bottom_ft h2,
.footer .bottom_ft h3,
.footer .bottom_ft h4,
.footer .bottom_ft h5,
.footer .bottom_ft h6{
  color: #FFFFFF; 
}
.footer .bottom_ft {
  /* Match the footer body colour so the copyright strip reads as one band */
  background-color: #091B30;
}
/* Cap the footer logo so it doesn't dominate the brand column */
.footer .footer_left .logo {
  max-width: 190px;
}
.footer .bottom_ft a {
  color: #FFFFFF;
}
.footer .bottom_ft a:hover {
  color: #FFFFFF;
}
.kl-hero-01 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 64px 0;
}

.kl-hero-01__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  position: relative;
  padding: 20px;
  padding-right: 50%;
}

@media screen and (min-width: 1380px) {
  .kl-hero-01__content {
    padding: 0px;
  }
}

@media screen and (max-width: 768px) {
  .kl-hero-01__content {
    padding: 20px;
  }
}

@media screen and (min-width: 1240px) {
  .kl-hero-01__content {
    padding: 0;
  }
}

.kl-hero-01__content > div {
  max-width: 430px;
}

@media screen and (max-width: 768px) {
  .kl-hero-01__content > div {
    max-width: none;
  }
}

.kl-hero-01__image {
  position: absolute;
  width: 45%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  right: 0;
  transition: opacity .2s, width .5s;
}

@media screen and (max-width: 768px) {
  .kl-hero-01__image {
    opacity: .3;
    width: 100%;
  }
}
.kl-hero-02 {
  display: flex;
  padding: 64px 0;
  min-height: 50vh;
}

.kl-hero-02__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 1380px) {
  .kl-hero-02__content {
    padding: 0px;
  }
}

@media screen and (max-width: 960px) {
  .kl-hero-02__content {
    display: block;
  }
}

.kl-hero-02__content .kl-rich-text {
  flex-basis: 300px;
  flex-grow: 1;
}

.kl-hero-02__image {
  margin-left: 32px;
  display: flex;
  flex-grow: 1;
  flex-basis: 480px;
  height: 100%;
}

@media screen and (max-width: 960px) {
  .kl-hero-02__image {
    max-width: 720px;
    margin: 32px auto 0;
    height: auto;
  }
}

.kl-hero-02__image img {
  max-width: 100%;
  display: block;
}

.kl-hero-02__image--left {
  justify-content: flex-start;
}

.kl-hero-02__image--center {
  justify-content: center;
}

.kl-hero-02__image--right {
  justify-content: flex-end;
}

.kl-hero-02__image--top {
  align-items: flex-start;
}

.kl-hero-02__image--middle {
  align-items: center;
}

.kl-hero-02__image--bottom {
  align-items: flex-end;
}
.kl-hero-03 {
  padding: 120px 0;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .kl-hero-03 {
    padding: 64px 0;
  }
}

.kl-hero-03__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 1380px) {
  .kl-hero-03__content {
    padding: 0px;
  }
}

.kl-hero-03__content .kl-rich-text {
  max-width: 50%;
}

@media screen and (max-width: 768px) {
  .kl-hero-03__content .kl-rich-text {
    max-width: 100%;
  }
}

.kl-hero-03__image {
  position: absolute;
  left: calc(50% + 64px);
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .kl-hero-03__image {
    position: static;
    transform: none;
    margin-top: 32px;
  }
}

@media screen and (max-width: 360px) {
  .kl-hero-03__image {
    display: none;
  }
}

.kl-hero-03__image img {
  display: block;
}
.kl-logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .kl-logos {
    flex-wrap: wrap;
  }
}

.kl-logos__item {
  padding: 16px 24px;
}

.kl-logos__item a {
  display: block;
}

.kl-logos__item img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 768px) {
  .kl-logos__item {
    flex-basis: 25%;
  }
}

@media screen and (max-width: 480px) {
  .kl-logos__item {
    flex-basis: 33%;
  }
}

@media screen and (max-width: 340px) {
  .kl-logos__item {
    flex-basis: 50%;
  }
}
.kl-header {
  position: fixed;
  z-index: 12;
  width: 100%;
  box-shadow: 0px 5px 10px rgba(154, 161, 177, 0.1);
  background-color: rgba(15, 43, 76, 1.0);
}

.kl-header-placeholder {
  height: 72px;
}

.kl-navbar {
  height: 72px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 920px) {
  .kl-navbar {
    justify-content: space-between;
  }
  .kl-navbar--active .kl-navbar__content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

.kl-navbar__logo {
  width: auto;
  display: block;
  margin-right: 42px;
}

.kl-navbar__content {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 920px) {
  .kl-navbar__content {
    background-color: rgba(15, 43, 76, 1.0);
    position: fixed;
    width: 100%;
    height: calc(100% - 72px);
    left: 0;
    bottom: 0;
    padding: 45px 20px;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  }
}

.kl-navbar__menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 920px) {
  .kl-navbar__menu {
    display: block;
    margin: 0 0 24px;
    width: 100%;
  }
}

.kl-navbar__item {
  position: relative;
  margin: 0 12.5px;
}

.kl-navbar__item--active .kl-navbar__panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 920px) {
  .kl-navbar__item--active .kl-navbar__panel {
    max-height: 100vh;
  }
}

.kl-navbar__item--active .kl-navbar__button {
  color: #E85D26;
}

.kl-navbar__item--active .kl-navbar__button > span:after {
  visibility: visible;
  width: 100%;
}

.kl-navbar__button {
  font-weight: 500;
  font-size: 15px;
  font-family: Inter, sans-serif;
  line-height: 2em;
  color: #ffffff;
  display: inline-block;
}

.kl-header, .kl-header .button{
  font-family: Inter, sans-serif;
}

@media screen and (max-width: 920px) {
  .kl-navbar__button {
    font-size: 1rem;
  }
}

.kl-navbar__button > span {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}

.kl-navbar__button > span:after {
  content: '';
  width: 0px;
  height: 2px;
  background-color: #E85D26;
  position: absolute;
  left: 0;
  bottom: 2px;
  visibility: hidden;
  transition: width .2s ease-in-out;
}

.kl-navbar__button:hover, .kl-navbar__button:focus, .kl-navbar__button:active {
  text-decoration: none;
  color: #E85D26;
}

.kl-navbar__button:hover > span:after, .kl-navbar__button:focus > span:after, .kl-navbar__button:active > span:after {
  visibility: visible;
  width: 100%;
}

.kl-navbar__end {
  display: flex;
  align-items: center;
}

.kl-navbar__end a + a {
  margin-left: 25px;
}

.kl-navbar__panel {
  background-color: rgba(15, 43, 76, 1.0);
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: all .25s ease-in-out;
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;
}

@media screen and (max-width: 920px) {
  .kl-navbar__panel {
    position: static;
    max-height: 0;
    overflow: hidden;
  }
}

.kl-navbar__panel-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 0;
  justify-content: space-between;
}

.kl-navbar__panel-wrapper > div {
  flex-basis: none;
}

.kl-navbar__categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-basis: 650px;
}

@media screen and (max-width: 920px) {
  .kl-navbar__categories p {
    display: none;
  }
}

.kl-navbar__description {
  flex-basis: 250px;
  margin: 0 16px;
  color: #ffffff;
}

@media screen and (max-width: 920px) {
  .kl-navbar__description {
    margin: 0;
    flex-basis: 50%;
  }
}

@media screen and (max-width: 920px) {
  .kl-navbar__description--full {
    flex-basis: auto;
  }
}

.kl-navbar__description h1, .kl-navbar__description h2, .kl-navbar__description h3, .kl-navbar__description h4, .kl-navbar__description h5, .kl-navbar__description h6 {
  color: inherit;
}

.kl-navbar__description h2 {
  font-size: 1.125rem;
  font-weight: bold;
  margin: 0 0 .5rem;
}

.kl-navbar__description h3 {
  font-size: 0.875rem;
  font-weight: bold;
  margin: 0 0 .5rem;
}

.kl-navbar__description p {
  font-size: 0.875rem;
  margin: 0 0 1.75rem;
}

.kl-navbar__description a {
  color: #ffffff;
}

.kl-navbar__description a:hover, .kl-navbar__description a:focus {
  text-decoration: none;
  color: #E85D26;
}

.kl-navbar .hamburger {
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  min-width: auto;
}

@media screen and (max-width: 920px) {
  .kl-navbar .hamburger {
    display: block;
  }
  .kl-navbar__item {
    margin: 0;
  }
}

.kl-navbar .hamburger:focus {
  outline: none;
}

.kl-navbar .hamburger-box {
  width: 24px;
  height: 19px;
  display: inline-block;
  position: relative;
}

.kl-navbar .hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}

.kl-navbar .hamburger-inner, .kl-navbar .hamburger-inner::before, .kl-navbar .hamburger-inner::after {
  width: 24px;
  height: 3px;
  background-color: var(--color-black);
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.kl-navbar .hamburger-inner::before, .kl-navbar .hamburger-inner::after {
  content: "";
  display: block;
}

.kl-navbar .hamburger-inner::before {
  top: -8px;
}

.kl-navbar .hamburger-inner::after {
  bottom: -8px;
}

.kl-navbar .hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.kl-navbar .hamburger--squeeze .hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.kl-navbar .hamburger--squeeze .hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.kl-navbar .hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.kl-navbar .hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.kl-navbar .hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Navbar submenu */
.kl-navbar-submenu-wrapper {
  position: absolute;
  left: -24px;
  visibility: hidden;
}

@media screen and (max-width: 920px) {
  .kl-navbar-submenu-wrapper {
    position: static;
    visibility: visible;
    display: none;
  }
}

.kl-navbar__item:hover > .kl-navbar-submenu-wrapper {
  visibility: visible;
}

.kl-navbar-submenu {
  background-color: rgba(15, 43, 76, 1.0);
  box-shadow: 0px 5px 10px rgba(154, 161, 177, 0.1);
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  width: 160px;
}

@media screen and (max-width: 920px) {
  .kl-navbar-submenu {
    box-shadow: none;
    margin: 12px 0;
    width: auto;
  }
}

.kl-navbar-submenu .kl-navbar-submenu {
  position: absolute;
  top: 0px;
  left: 100%;
  transform: translateX(0);
  margin: 0;
  visibility: hidden;
}

@media screen and (max-width: 920px) {
  .kl-navbar-submenu .kl-navbar-submenu {
    position: static;
    visibility: visible;
    display: none;
    margin-left: 20px;
  }
}

.kl-navbar-submenu__item {
  position: relative;
}

.kl-navbar-submenu__item:hover > .kl-navbar-submenu {
  visibility: visible;
}

.kl-navbar-submenu__item a {
  display: block;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 15px;
  font-family: Inter, sans-serif;
  line-height: 1rem;
  word-break: normal;
  color: #ffffff;
}

.kl-navbar-submenu__item a:hover, .kl-navbar-submenu__item a:focus {
  color: #E85D26;
  text-decoration: none;
}

@media screen and (max-width: 920px) {
  .kl-navbar-submenu__item a {
    padding: 12px 0;
  }
}

.kl-navbar__parent {
  cursor: pointer;
}

@media screen and (min-width: 920px) {
  .kl-navbar__parent:hover > a:after {
    transform: rotate(225deg);
  }
}

.kl-navbar__parent > a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 920px) {
  .kl-navbar__parent > a {
    pointer-events: none;
  }
}

.kl-navbar__parent > a:after {
  content: '';
  display: block;
  width: 5px;
  min-width: 5px;
  height: 5px;
  margin-right: 8px;
  margin-left: 8px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  transform: rotate(45deg);
  transform-origin: 3px 3px;
  transition: transform .25s ease-in-out;
}

.kl-navbar__parent--active > .kl-navbar-submenu-wrapper,
.kl-navbar__parent--active > .kl-navbar-submenu {
  display: block;
}

.kl-navbar__parent--active > a:after {
  transform: rotate(225deg);
}

.kl-navbar__parent--active > a {
  color: #E85D26;
}

.kl-navbar__parent--active > a > span:after {
  visibility: visible;
  width: 100%;
}
/* new css */

.kl-header .button--outlined.button {
  background-color:transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.kl-header .button--outlined.button:hover {
  background-color:#ffffff;
  border-color:#ffffff;
  color: var(--color-black);
}
.kl-header .button {
  background-color:#ffffff;
  border-color: #ffffff;
  color: var(--color-black);
}
.kl-header .button:hover {
  background-color: var(--color-black);
  border-color:#ffffff;
  color: #ffffff;
}
.kl-navbar .hamburger-inner, 
.kl-navbar .hamburger-inner:after, 
.kl-navbar .hamburger-inner:before{
  background-color:#ffffff;
}
.kl-header .button {
  padding: 15px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.41px;
  min-width: 120px;
  text-transform: capitalize;
  border-width: 1px;
}
@media(min-width:921px){
  .kl-header .kl-navbar__content{
    justify-content: flex-end;
    gap:25px;
  }
}
@media(max-width:420px){
  .kl-header .kl-navbar__end{
    flex-direction:column;
    gap:20px;
  }
  .kl-header .kl-navbar__end a{
    width:100%;
  }
  .kl-header .kl-navbar__end a+a{
    margin-left:0;
  }
}

/* ── Hardcoded colour corrections ─────────────────────────────────────────────
   The hamburger bars and mobile menu use theme variables that don't match the
   dark navy header. These overrides restore the correct contrast regardless of
   what the HubSpot theme editor colour settings are.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hamburger bars — always white on the dark header */
.kl-navbar .hamburger-inner,
.kl-navbar .hamburger-inner::before,
.kl-navbar .hamburger-inner::after {
  background-color: var(--color-white) !important;
}

/* Mobile slide-down menu — dark background, white text */
@media screen and (max-width: 920px) {
  .kl-navbar__content {
    background-color: var(--color-primary-dark) !important;
  }

  .kl-navbar__button,
  .kl-navbar-submenu__button {
    color: var(--color-white) !important;
  }

  .kl-navbar__button:hover,
  .kl-navbar__button:focus,
  .kl-navbar-submenu__button:hover,
  .kl-navbar-submenu__button:focus {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .kl-navbar__parent > a::after {
    border-right-color: var(--color-white) !important;
    border-bottom-color: var(--color-white) !important;
  }
}
.kl-offer-01 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  padding: 32px 36px 0;
  border: 1px solid #E8ECF0;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
}

.kl-offer-01__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-basis: 320px;
  flex-grow: 1;
  margin-bottom: 32px;
}

.kl-offer-01__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  margin: 0 0 1rem;
}

.kl-offer-01__text {
  flex-basis: 420px;
  flex-grow: 1;
  margin-right: 50px;
}

@media screen and (max-width: 480px) {
  .kl-offer-01__text {
    margin: 0;
  }
}

.kl-offer-01__text h1, .kl-offer-01__text h2, .kl-offer-01__text h3, .kl-offer-01__text h4, .kl-offer-01__text h5, .kl-offer-01__text h6 {
  margin: 0 0 1.125rem;
}

.kl-offer-01__button {
  flex-shrink: 0;
}

.kl-offer-01__image {
  flex-basis: 260px;
  margin: 0 auto;
  padding-right: 20px;
}

@media screen and (max-width: 480px) {
  .kl-offer-01__image {
    padding: 0;
  }
}

.kl-offer-01__image img {
  display: block;
  width: 100%;
  max-width: 420px;
}
.kl-pricing {
  display: flex;
  align-items: flex-start;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .kl-pricing {
    display: block;
  }
}

.kl-pricing__card {
  position: relative;
  padding: 36px 32px;
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0px;
  flex-basis: 346px;
  flex-grow: 1;
  transition: box-shadow .25s ease-in-out;
}

.kl-pricing__card--featured {
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
}

.kl-pricing__card:hover {
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
}

.kl-pricing__card + .kl-pricing__card {
  margin-left: 72px;
}

@media screen and (max-width: 1024px) {
  .kl-pricing__card + .kl-pricing__card {
    margin-left: 16px;
  }
}

@media screen and (max-width: 768px) {
  .kl-pricing__card + .kl-pricing__card {
    margin: 24px 0 0;
  }
}

.kl-pricing__badge {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 0.625rem;
  font-weight: bold;
  line-height: 1;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 40px;
  background-color: var(--color-off-white);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kl-pricing__icon {
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 1.5rem;
}

.kl-pricing__icon img {
  max-height: 100%;
  display: block;
}

.kl-pricing__price {
  color: #E85D26;
}

.kl-pricing__price h1, .kl-pricing__price h2, .kl-pricing__price h3, .kl-pricing__price h4, .kl-pricing__price h5, .kl-pricing__price h6 {
  color: inherit;
}

.kl-pricing__description p {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.kl-pricing__features {
  text-align: left;
  list-style: none;
  margin: 0 0 2.625rem;
  padding: 0;
}

.kl-pricing__features li {
  font-size: 0.875rem;
  margin: 0 0 1rem;
  display: flex;
}

.kl-pricing__features li:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7.59' cy='7.62' r='7.5' fill='%23EBF1FF'/%3E%3Cpath d='M10.84 4.39L6.37 9.11 4.61 7.26l-.95 1.01 2.71 2.86 5.43-5.72-.96-1.02z' fill='%234678EE'/%3E%3C/svg%3E");
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 2px 0.75rem 0 0;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.kl-pricing__button a {
  width: 100%;
}

.kl-pricing hr {
  margin: 1.75rem 0;
  color: var(--color-grey-subtle);
  background-color: var(--color-grey-subtle);
  height: 2px;
}
.kl-features-01 {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .kl-features-01 {
    display: block;
  }
}

.kl-features-01__card {
  flex-basis: 225px;
  flex-grow: 1;
}

.kl-features-01__card h4 {
  margin: 0 0 1rem;
}

.kl-features-01__card p {
  font-weight: 500;
}

.kl-features-01__card + .kl-features-01__card {
  margin-left: 64px;
}

@media screen and (max-width: 768px) {
  .kl-features-01__card + .kl-features-01__card {
    margin: 32px 0 0;
  }
}

.kl-features-01__image {
  min-height: 50px;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
}

.kl-features-01__image img {
  display: block;
  width: auto;
  max-height: 50px;
}

.kl-features-01__image > span {
  display: block;
}

.kl-features-01__image svg {
  max-height: 50px;
  width: 50px;
  fill: #E85D26;
}
.kl-features-02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -16px;
}

@media screen and (max-width: 530px) {
  .kl-features-02 {
    display: block;
  }
}

.kl-features-02-wrapper {
  overflow: hidden;
}

.kl-features-02__card {
  flex-basis: 225px;
  flex-grow: 1;
  margin: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kl-features-02__card h4 {
  margin: 0;
  display: inline;
  vertical-align: top;
}

.kl-features-02__card p {
  font-weight: 500;
  margin: 1rem 0 0;
}

.kl-features-02__card-header {
  display: flex;
}

.kl-features-02__image {
  min-height: 24px;
  margin: 0 16px 0 0;
  display: inline-block;
}

.kl-features-02__image img {
  display: block;
  width: auto;
  max-height: 24px;
}

.kl-features-02__image > span {
  display: block;
}

.kl-features-02__image svg {
  max-height: 24px;
  width: 24px;
  fill: #E85D26;
}
.kl-features-03__titles li.active h4, .kl-features-03__titles li h4:hover, .kl-features-03__titles li h4:focus {
  cursor: pointer;
  color: #E85D26;
}

.kl-features-03__titles {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .kl-features-03__titles {
    display: block;
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  .kl-features-03__titles li {
    background-color: var(--color-grey-subtle);
    text-align: center;
  }
  .kl-features-03__titles li + li {
    border-top: 1px solid var(--color-grey-lighter);
  }
}

.kl-features-03__titles li.active h4:after {
  visibility: visible;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .kl-features-03__titles li.active h4:after {
    visibility: hidden;
  }
}

.kl-features-03__titles li h4 {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
}

.kl-features-03__titles li h4:after {
  content: '';
  width: 0px;
  height: 2px;
  background-color: #E85D26;
  position: absolute;
  left: 0;
  bottom: 2px;
  visibility: hidden;
  transition: width .2s ease-in-out;
}

.kl-features-03__section {
  background-color: var(--color-grey-subtle);
  display: none;
}

.kl-features-03__section.active {
  display: flex;
  flex-wrap: wrap;
}

.kl-features-03__image {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  flex-basis: 360px;
  flex-grow: 1;
  display: flex;
}

.kl-features-03__image--left {
  justify-content: flex-start;
}

.kl-features-03__image--center {
  justify-content: center;
}

.kl-features-03__image--right {
  justify-content: flex-end;
}

.kl-features-03__image--top {
  align-items: flex-start;
}

.kl-features-03__image--middle {
  align-items: center;
}

.kl-features-03__image--bottom {
  align-items: flex-end;
}

.kl-features-03__image--cover {
  align-items: unset;
}

.kl-features-03__image--cover img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.kl-features-03__image--contain img {
  object-fit: contain;
}

.kl-features-03__content {
  padding: 54px 78px;
  flex-basis: 400px;
  flex-grow: 3;
}

@media screen and (max-width: 580px) {
  .kl-features-03__content {
    padding: 30px;
  }
}

.kl-features-03__text h3 {
  margin: 0 0 28px;
  max-width: 480px;
}

.kl-features-03__text p {
  margin: 0 0 64px;
  max-width: 600px;
}

.kl-features-03__buttons {
  display: flex;
  align-items: center;
}

.kl-features-03__primary-cta {
  margin: 0 35px 0 0;
}
.kl-card {
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  padding: 32px 25px;
  background-color: rgba(255, 255, 255, 0.7);
}

.kl-card__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  line-height: 1rem;
  margin: 0 0 .75rem;
}

.kl-card__content h1, .kl-card__content h2, .kl-card__content h3, .kl-card__content h4, .kl-card__content h5, .kl-card__content h6 {
  font-weight: bold;
  margin: 0 0 10px;
}

.kl-card__content p {
  margin: 0 0 2rem;
}

.kl-card__image {
  margin: 0 0 1.75rem;
}

.kl-card__form {
  max-width: 600px;
}
.kl-testimonials {
  display: flex;
}

@media screen and (max-width: 920px) {
  .kl-testimonials {
    display: block;
  }
}

.kl-testimonial {
  padding: 18px 25px 25px;
  border: 0.5px solid rgba(232, 236, 240, 1.0);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  flex-grow: 1;
  flex-basis: 300px;
}

.kl-testimonial + .kl-testimonial {
  margin-left: 64px;
}

@media screen and (max-width: 1024px) {
  .kl-testimonial + .kl-testimonial {
    margin-left: 16px;
  }
}

@media screen and (max-width: 920px) {
  .kl-testimonial + .kl-testimonial {
    margin: 16px 0 0;
  }
}

.kl-testimonial__quote {
  margin: 0 0 25px;
}

.kl-testimonial__quote svg {
  fill: #E85D26;
  height: 32px;
  max-height: 32px;
}

.kl-testimonial__content {
  font-weight: 500;
}

.kl-testimonial__footer {
  display: flex;
  align-items: center;
}

.kl-testimonial__footer img {
  display: block;
  object-fit: cover;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 16px 0 0;
}

.kl-testimonial__author {
  font-weight: bold;
}

.kl-testimonial__author span {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  font-size: 0.75rem;
  margin: 0 0 8px;
}
/* Callout block — inline trust signal or stat highlight */

.cf-callout {
  background: var(--color-off-white);
  border-left: 4px solid var(--color-primary);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-7) 0;
  border-radius: 0 4px 4px 0;
}

.cf-callout__stat {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  font-family: var(--font-family);
  margin: 0 0 var(--sp-2) 0;
}

.cf-callout__detail {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  margin: 0;
}
/* Case Study Card Module — index card */

.cf-case-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-light, #E8ECF0);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cf-case-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 43, 76, 0.08));
  transform: translateY(-2px);
}

.cf-case-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Full-colour client logo panel */
.cf-case-card__logo-wrap {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: var(--color-off-white, #F4F6F9);
  border-bottom: 1px solid var(--color-grey-light, #E8ECF0);
}
.cf-case-card__logo {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

.cf-case-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 22px;
}

.cf-case-card__tag {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent, #E8435A);
  margin: 0 0 6px;
}

.cf-case-card__eyebrow {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #718096);
  margin: 0 0 6px;
}

.cf-case-card__name {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-heading, #123B65);
  margin: 0 0 8px;
}

.cf-case-card__result {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-grey-dark, #4A5568);
  margin: 0 0 16px;
}

.cf-case-card__arrow {
  margin-top: auto;
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent, #E8435A);
}
/* CTA Banner Module */

.cf-cta-banner {
  background-color: var(--color-primary, #0F2B4C);
  padding: 32px 0;
}

.cf-cta-banner__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.cf-cta-banner__headline {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-inverse, #FFFFFF);
  margin: 0 0 24px;
}

.cf-cta-banner__btn {
  display: inline-block;
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-primary, #0F2B4C);
  padding: 14px 28px;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.1s ease;
}

.cf-cta-banner__btn:hover {
  background-color: var(--color-off-white, #F7F8FA);
}

.cf-cta-banner__btn:active {
  transform: translateY(1px);
}

.cf-cta-banner__btn:focus-visible {
  outline: 2px solid var(--color-white, #FFFFFF);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .cf-cta-banner {
    padding: 48px 0;
  }

  .cf-cta-banner__container {
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }

  .cf-cta-banner__headline {
    font-size: 30px;
    margin: 0;
  }
}

@media (min-width: 1280px) {
  .cf-cta-banner__container {
    padding: 0 24px;
  }

  .cf-cta-banner__headline {
    font-size: 36px;
  }
}
/***************************************************************************/
/************************   Menu and simple menu   *************************/
/***************************************************************************/
.hs-menu-wrapper ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* Vertical menu */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Flyouts */
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: -webkit-box;
    display: -ms-flexbox;
    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;
  }
}
/* Finance Tools Module */

.cf-finance {
  background-color: var(--color-white, #FFFFFF);
  padding: 48px 0;
}

.cf-finance__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-finance__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}

.cf-finance__headline {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading, #123B65);
  margin: 0;
}

.cf-finance__intro {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-grey-dark, #4A5568);
  margin: 14px 0 0;
}

.cf-finance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cf-finance__card {
  background-color: var(--color-off-white, #F7F8FA);
  border: 1px solid var(--color-grey-light, #E8ECF0);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
}

.cf-finance__logo {
  height: 48px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}

.cf-finance__name {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 8px;
}

.cf-finance__desc {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey-dark, #4A5568);
  margin: 0 0 16px;
}

.cf-finance__outcome {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary, #0F2B4C);
  margin: 0;
}

.cf-finance__outcome-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent, #E85D26);
  display: block;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .cf-finance {
    padding: 80px 0;
  }

  .cf-finance__container {
    padding: 0 32px;
  }

  .cf-finance__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }

  .cf-finance__card {
    padding: 40px;
  }
}

@media (min-width: 1280px) {
  .cf-finance__container {
    padding: 0 24px;
  }
}
/* Form Embed Module */

.cf-form-embed {
  background-color: var(--color-white, #FFFFFF);
  padding: 48px 0;
}

.cf-form-embed__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-form-embed__intro {
  margin-bottom: 32px;
}

.cf-form-embed__intro h2 {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 12px;
}

.cf-form-embed__intro p {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body, #2D3748);
  margin: 0;
}

/* HubSpot form style overrides */
.cf-form-embed__form .hs-form-field {
  margin-bottom: 20px;
}

.cf-form-embed__form label {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-body, #2D3748);
  display: block;
  margin-bottom: 6px;
}

.cf-form-embed__form input[type="text"],
.cf-form-embed__form input[type="email"],
.cf-form-embed__form input[type="tel"],
.cf-form-embed__form input[type="number"],
.cf-form-embed__form textarea,
.cf-form-embed__form select {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 16px;
  color: var(--color-text-body, #2D3748);
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-light, #E8ECF0);
  border-radius: 6px;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.cf-form-embed__form input:focus,
.cf-form-embed__form textarea:focus,
.cf-form-embed__form select:focus {
  border-color: var(--color-primary, #0F2B4C);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 43, 76, 0.1);
}

.cf-form-embed__form input::placeholder,
.cf-form-embed__form textarea::placeholder {
  color: var(--color-grey-mid, #9BA5B1);
}

.cf-form-embed__form .hs-error-msg {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-error, #C53030);
  margin-top: 4px;
}

.cf-form-embed__form input[type="submit"],
.cf-form-embed__form .hs-button {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 600;
  background-color: var(--color-accent, #E85D26);
  color: var(--color-white, #FFFFFF);
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  min-width: 200px;
}

.cf-form-embed__form input[type="submit"]:hover,
.cf-form-embed__form .hs-button:hover {
  background-color: var(--color-accent-hover, #D14D1A);
}

.cf-form-embed__confirmation {
  text-align: center;
  padding: 48px 24px;
}

.cf-form-embed__confirmation h2 {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 12px;
}

.cf-form-embed__confirmation p {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body, #2D3748);
  margin: 0;
}

.cf-form-embed__placeholder {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  color: var(--color-text-muted, #718096);
  text-align: center;
  padding: 48px;
  background-color: var(--color-off-white, #F7F8FA);
  border-radius: 8px;
}

@media (min-width: 768px) {
  .cf-form-embed {
    padding: 80px 0;
  }

  .cf-form-embed__container {
    padding: 0 32px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 48px;
    align-items: start;
  }

  .cf-form-embed__intro {
    margin-bottom: 0;
  }

  .cf-form-embed__intro h2 {
    font-size: 36px;
  }

  .cf-form-embed__form input[type="submit"],
  .cf-form-embed__form .hs-button {
    width: auto;
  }
}

@media (min-width: 1280px) {
  .cf-form-embed__container {
    padding: 0 24px;
  }
}
/* ==========================================================================
   Site Header
   Targets the custom .site-header partial (src/templates/partials/header.html)
   Background: dark navy, sticky, logo left / nav right / CTA far right
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link (accessibility)
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  background-color: var(--color-accent, #E85D26);
  color: var(--color-white, #FFFFFF);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 9999;
  outline: 2px solid var(--color-white, #FFFFFF);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* NOTE: content offset for the fixed header is handled by `.kl-header-placeholder`
   (rendered by the Simple Navbar module, height = theme.header.height). The old
   `body { padding-top }` here was a second offset for the retired `.site-header`
   partial and stacked a duplicate empty band below the header — removed. */

/* --------------------------------------------------------------------------
   Inner container — logo | nav | cta in a single row
   -------------------------------------------------------------------------- */

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 16px var(--container-padding, 24px);
}

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

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo__img {
  display: block;
  height: 32px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Navigation — HubSpot simple_menu output
   The @hubspot/simple_menu module with no_wrapper=True renders a <ul> directly
   inside .site-nav. Targeting the UL and its children.
   -------------------------------------------------------------------------- */

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* HubSpot simple_menu may wrap in .hs-menu-wrapper or render a bare <ul> */
.site-nav .hs-menu-wrapper,
.site-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.site-nav .hs-menu-wrapper ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.site-nav li {
  display: flex;
  align-items: center;
  position: relative;
}

.site-nav a,
.site-nav span {
  display: block;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-white, #FFFFFF);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.06);
  outline: none;
}

/* Active / current page */
.site-nav li.active-branch > a,
.site-nav li.active > a {
  color: var(--color-accent, #E85D26);
}

/* Dropdown children — hidden by default, shown on hover/focus */
.site-nav li ul {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background-color: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px;
  min-width: 180px;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
  display: flex;
}

.site-nav li ul a {
  font-size: 0.875rem;
  padding: 7px 12px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   CTA button — .btn and .btn--primary handle most of the styling.
   Ensure it stays right-aligned and doesn't shrink.
   -------------------------------------------------------------------------- */

.site-header__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobile hamburger toggle
   The HTML does not currently include a <button class="site-nav__toggle">.
   When added to the header partial, these styles will activate it.

   Expected markup to add inside .container after .site-logo:
     <button class="site-nav__toggle" aria-expanded="false" aria-controls="site-nav"
             aria-label="Open navigation">
       <span></span><span></span><span></span>
     </button>

   And add id="site-nav" to the <nav> element.
   -------------------------------------------------------------------------- */

.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.site-nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white, #FFFFFF);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate hamburger to X when open */
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Responsive — mobile breakpoint (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-header .container {
    flex-wrap: wrap;
    padding: 12px var(--container-padding, 16px);
    gap: 12px;
  }

  /* Show the hamburger toggle on mobile */
  .site-nav__toggle {
    display: flex;
    order: 3;
  }

  /* Move CTA to the right of the logo row */
  .site-header__cta {
    order: 2;
    font-size: 0.875rem;
    padding: 8px 14px;
  }

  /* Nav collapses off-screen on mobile by default */
  .site-nav {
    order: 4;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    margin: 0 calc(var(--container-padding, 16px) * -1);
    padding-left: var(--container-padding, 16px);
    padding-right: var(--container-padding, 16px);
  }

  /* Nav shown when toggle is active (JS adds .is-open to .site-nav) */
  .site-nav.is-open {
    display: flex;
  }

  /* Stack nav items vertically on mobile */
  .site-nav .hs-menu-wrapper,
  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 2px;
  }

  .site-nav li {
    width: 100%;
  }

  .site-nav a,
  .site-nav span {
    width: 100%;
    font-size: 1rem;
    padding: 10px 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Dropdowns open below on mobile */
  .site-nav li ul {
    position: static;
    display: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 0 16px;
    box-shadow: none;
    width: 100%;
  }

  .site-nav li.is-open > ul {
    display: flex;
  }

  .site-nav li ul a {
    font-size: 0.9375rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
}

@media (min-width: 768px) {
  /* Ensure nav is always visible on desktop regardless of JS state */
  .site-nav {
    display: flex !important;
  }
}
/* ==========================================================================
   Hero Module — Cloudfox arc-seam hero
   Light copy panel (left ~48%) + full-bleed photo (right), bridged by the
   signature white vertical seam. The panel is in normal flow so the section
   grows with its content; the photo + seam are absolute behind it.
   ========================================================================== */

.cf-hero {
  position: relative;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--color-grey-light);
}

/* full-bleed photo on the right, extending behind the seam */
.cf-hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 44%;
  z-index: 0;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}

.cf-hero--overlay .cf-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 59, 101, 0.55) 0%, rgba(18, 59, 101, 0.15) 60%, rgba(18, 59, 101, 0) 100%);
}

/* the signature white seam carving the curved boundary */
.cf-hero__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(48% - 1px);
  width: 170px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.cf-hero__seam svg { display: block; width: 100%; height: 100%; }
.cf-hero__seam path { fill: #fff; }

/* white copy panel — in flow, defines section height */
.cf-hero__panel {
  position: relative;
  z-index: 3;
  width: 48%;
  min-height: 560px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 56px;
}

.cf-hero--nophoto .cf-hero__panel { width: 100%; max-width: var(--container-max); margin: 0 auto; }

.cf-hero__eyebrow {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 14px;
}

.cf-hero__headline {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}
.cf-hero__hl { color: var(--color-teal); }

.cf-hero__subheading {
  font-family: var(--font-family);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: #41566b;
  margin: 16px 0 0;
  max-width: 540px;
}

.cf-hero__bullets { list-style: none; margin: 22px 0 0; padding: 0; }
.cf-hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
  margin-bottom: 10px;
}
.cf-hero__bullet-icon { flex-shrink: 0; color: var(--color-teal); margin-top: 3px; }

.cf-hero__ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.cf-hero__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 26px;
}
.cf-hero__trust p { margin: 0; }
.cf-hero__trust b, .cf-hero__trust strong { color: var(--color-primary); font-weight: 700; }

.cf-hero__mobilecurve { display: none; }

/* ==========================================================================
   CTA button system (cf-btn) — design-system buttons, independent of saved
   theme button settings. Used by hero and other modules.
   ========================================================================== */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: 6px;
  padding: 14px 22px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cf-btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.cf-btn--primary:hover, .cf-btn--primary:focus { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; text-decoration: none; }
.cf-btn--ghost { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }
.cf-btn--ghost:hover, .cf-btn--ghost:focus { background: var(--color-primary); color: #fff; text-decoration: none; }
.cf-btn--on-navy { background: #fff; color: var(--color-primary); border-color: #fff; }
.cf-btn--on-navy:hover, .cf-btn--on-navy:focus { background: rgba(255,255,255,0.88); color: var(--color-primary); text-decoration: none; }

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */
@media (max-width: 1100px) and (min-width: 881px) {
  .cf-hero__panel { width: 52%; padding: 56px 40px; }
  .cf-hero__headline { font-size: 40px; }
  .cf-hero__photo { left: 50%; }
  .cf-hero__seam { left: calc(52% - 1px); }
}

@media (max-width: 880px) {
  .cf-hero { display: flex; flex-direction: column; }
  .cf-hero__photo {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: 220px;
    order: 1;
  }
  .cf-hero__seam { display: none; }
  .cf-hero__mobilecurve {
    display: block;
    position: relative;
    height: 44px;
    margin-top: -44px;
    z-index: 1;
    line-height: 0;
    order: 2;
  }
  .cf-hero__mobilecurve svg { display: block; width: 100%; height: 100%; }
  .cf-hero__mobilecurve path { fill: #fff; }
  .cf-hero__panel {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 8px 22px 44px;
    order: 3;
  }
  .cf-hero__headline { font-size: 32px; }
  .cf-hero__subheading { font-size: 17px; max-width: none; }
}
/* How It Works Module */

.cf-hiw {
  background-color: var(--color-off-white, #F7F8FA);
  padding: 48px 0;
}

.cf-hiw__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-hiw__steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}

/* Vertical connector line on mobile */
.cf-hiw__steps::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background-color: var(--color-grey-light, #E8ECF0);
}

.cf-hiw__step {
  position: relative;
  padding-left: 56px;
}

.cf-hiw__number {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary, #0F2B4C);
  background-color: var(--color-white, #FFFFFF);
  border: 2px solid var(--color-primary, #0F2B4C);
  border-radius: 50%;
  z-index: 1;
}

.cf-hiw__title {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 8px;
}

.cf-hiw__desc {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey-dark, #4A5568);
  margin: 0;
}

@media (min-width: 768px) {
  .cf-hiw {
    padding: 80px 0;
  }

  .cf-hiw__container {
    padding: 0 32px;
  }

  .cf-hiw__steps {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }

  /* Horizontal connector line on desktop */
  .cf-hiw__steps::before {
    left: calc(40px / 2);
    right: calc(40px / 2);
    top: 20px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .cf-hiw__step {
    flex: 1;
    padding-left: 0;
    text-align: center;
  }

  .cf-hiw__number {
    position: relative;
    margin: 0 auto 16px;
  }
}

@media (min-width: 1280px) {
  .cf-hiw__container {
    padding: 0 24px;
  }
}
/* Trusted By / Partner Badges */

.cf-partner-badges {
  background-color: var(--color-primary-dark, #091B30);
  padding: 32px 0;
}

.cf-partner-badges__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  align-items: center;
  gap: 48px;
}

.cf-partner-badges__label {
  color: var(--color-white, #FFFFFF);
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
  opacity: 0.9;
}

.cf-partner-badges__logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.cf-partner-badges__item {
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.cf-partner-badges__item:hover {
  opacity: 1;
}

.cf-partner-badges__item img {
  height: 62px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Platinum partners — dedicated sub-row, set apart from the wordmark strip above.
   Badges keep their own colourways (Xero whiteout + HubSpot teal on the dark navy bg)
   and must NOT be recoloured or inverted, so no filter is applied here. */
.cf-partner-badges__platinum {
  max-width: var(--container-max, 1200px);
  margin: 24px auto 0;
  padding: 24px var(--container-padding, 24px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cf-partner-badges__platinum-label {
  color: var(--color-white, #FFFFFF);
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
  opacity: 0.7;
}

.cf-partner-badges__platinum-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.cf-partner-badges__platinum-item {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.cf-partner-badges__platinum-item img {
  height: 62px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .cf-partner-badges__container {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .cf-partner-badges__logos {
    justify-content: center;
    gap: 24px;
  }

  .cf-partner-badges__item img {
    height: 62px;
  }

  .cf-partner-badges__platinum {
    text-align: center;
  }

  .cf-partner-badges__platinum-row {
    justify-content: center;
    gap: 24px;
  }
}
/* Problem / Pain Module */

.cf-problem {
  background-color: var(--color-white, #FFFFFF);
  padding: 48px 0;
}

.cf-problem__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-problem__headline {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading, #0F2B4C);
  text-align: center;
  margin: 0 0 32px;
}

.cf-problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cf-problem__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-left: 2px solid var(--color-grey-light, #E8ECF0);
}

.cf-problem__icon {
  flex-shrink: 0;
  color: var(--color-grey-mid, #9BA5B1);
  margin-top: 2px;
}

.cf-problem__text {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-grey-dark, #4A5568);
  margin: 0;
}

@media (min-width: 768px) {
  .cf-problem {
    padding: 80px 0;
  }

  .cf-problem__container {
    padding: 0 32px;
  }

  .cf-problem__headline {
    font-size: 36px;
  }

  .cf-problem__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .cf-problem__container {
    padding: 0 24px;
  }

  .cf-problem__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* Proof / Testimonials Module */

.cf-proof {
  background-color: var(--color-white, #FFFFFF);
  padding: 48px 0;
}

.cf-proof__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.cf-proof__card {
  border: none;
  border-left: 3px solid var(--color-accent, #E85D26);
  margin: 0;
  padding: 32px;
  background-color: var(--color-off-white, #F7F8FA);
  border-radius: 0 8px 8px 0;
}

.cf-proof__quote-mark {
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 1;
  color: var(--color-accent, #E85D26);
  opacity: 0.3;
  margin-bottom: 8px;
}

.cf-proof__text {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-body, #2D3748);
  margin-bottom: 24px;
}

.cf-proof__text p {
  margin: 0;
}

.cf-proof__attribution {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cf-proof__logo {
  width: auto;
  height: 32px;
  max-width: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
}

.cf-proof__author {
  display: flex;
  flex-direction: column;
}

.cf-proof__name {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  color: var(--color-text-heading, #0F2B4C);
}

.cf-proof__company {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 14px;
  color: var(--color-text-muted, #718096);
}

@media (min-width: 768px) {
  .cf-proof {
    padding: 80px 0;
  }

  .cf-proof__container {
    padding: 0 32px;
  }

  .cf-proof__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cf-proof__text {
    font-size: 20px;
  }
}

@media (min-width: 1280px) {
  .cf-proof__container {
    padding: 0 24px;
  }
}
/* Section containers for consistent layout across all pages */

.cf-section {
  padding: 48px 0;
}

.cf-section--white {
  background-color: var(--color-white, #FFFFFF);
}

.cf-section--off-white {
  background-color: var(--color-off-white, #F7F8FA);
}

.cf-section__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

/* Narrow prose container for long-form text (About page, etc.) */
.cf-section__container--prose {
  max-width: 720px;
}

/* Standard narrow container for richtext sections */
.cf-section__container--narrow {
  max-width: 960px;
}

.cf-section h2 {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 16px;
}

.cf-section p {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body, #2D3748);
}

.cf-section ul,
.cf-section ol {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body, #2D3748);
  padding-left: 24px;
}

.cf-section li {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .cf-section {
    padding: 80px 0;
  }

  .cf-section__container {
    padding: 0 32px;
  }

  .cf-section h2 {
    font-size: 36px;
  }
}

@media (min-width: 1280px) {
  .cf-section__container {
    padding: 0 24px;
  }
}
/* Solution Snapshot Module */

.cf-solution {
  background-color: var(--color-off-white, #F7F8FA);
  padding: 48px 0;
}

.cf-solution__container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.cf-solution__headline {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading, #0F2B4C);
  text-align: center;
  margin: 0 0 32px;
}

.cf-solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cf-solution__card {
  background-color: var(--color-white, #FFFFFF);
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 43, 76, 0.06));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cf-solution__card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 43, 76, 0.08));
  transform: translateY(-2px);
}

.cf-solution__icon {
  /* Sized by height (set inline per card via the Logo size field; 48px fallback)
     with auto width so wide wordmarks and square marks read at an even scale. */
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
}

.cf-solution__title {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-heading, #0F2B4C);
  margin: 0 0 8px;
}

.cf-solution__desc {
  font-family: var(--font-family, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey-dark, #4A5568);
  margin: 0;
}

@media (min-width: 768px) {
  .cf-solution {
    padding: 80px 0;
  }

  .cf-solution__container {
    padding: 0 32px;
  }

  .cf-solution__headline {
    font-size: 36px;
  }

  .cf-solution__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .cf-solution__container {
    padding: 0 24px;
  }

  .cf-solution__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* ==========================================================================
   Blog — listing and post templates
   Uses CSS custom properties defined in website.css
   ========================================================================== */

/* ───────────────────────────────────────────────
   Shared card component (.cf-blog-card)
   Used on both the listing grid and related posts
   ─────────────────────────────────────────────── */

.cf-blog-card {
  background-color: var(--color-white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.cf-blog-card:hover {
  box-shadow: var(--shadow-md);
}

.cf-blog-card__image {
  display: block;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-grey-light);
  flex-shrink: 0;
}

.cf-blog-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cf-blog-card__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  background-color: var(--color-blog-badge);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  line-height: 1.4;
}

.cf-blog-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
}

.cf-blog-card__title a {
  color: var(--color-text-heading);
  text-decoration: none;
}

.cf-blog-card__title a:hover {
  color: var(--color-primary-light);
}

.cf-blog-card__excerpt {
  font-size: 14px;
  color: var(--color-grey-dark);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

.cf-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-grey-light);
  padding-top: 12px;
  margin-top: auto;
}

.cf-blog-card__author::after {
  content: '·';
  margin-left: 8px;
}


/* ==========================================================================
   Blog listing page (blog-index-v2.html)
   ========================================================================== */

/* Page header */
.cf-blog-header {
  background-color: var(--color-white);
  padding: 72px 0 40px;
}

.cf-blog-header__title {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.15;
  color: var(--color-text-heading);
}

.cf-blog-header__sub {
  margin: 0;
  color: var(--color-grey-dark);
  font-size: 18px;
  line-height: 1.5;
}

/* Tag filter bar */
.cf-blog-filter {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-light);
  padding: 14px 0;
}

.cf-blog-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cf-blog-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-grey-dark);
  border: 1px solid var(--color-grey-light);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cf-blog-tag:hover,
.cf-blog-tag--active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Post grid */
.cf-blog-grid-wrap {
  background-color: var(--color-off-white);
  padding: 56px 0 80px;
}

.cf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .cf-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .cf-blog-grid { grid-template-columns: 1fr; }
}

/* Pagination */
.cf-blog-pagination {
  margin-top: 48px;
  text-align: center;
}

.cf-blog-loadmore {
  display: inline-block;
  padding: 12px 32px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.cf-blog-loadmore:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}


/* ==========================================================================
   Reading progress bar
   ========================================================================== */

.cf-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-accent);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ==========================================================================
   Post layout — two-column with sticky ToC sidebar
   ========================================================================== */

.cf-post-layout {
  max-width: 1060px;
  margin: 0 auto;
}

/* Sidebar hidden by default */
.cf-post-toc {
  display: none;
}

/* Two-column grid when JS detects enough headings — desktop only */
@media (min-width: 1080px) {
  .cf-post-layout--has-toc {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 0 56px;
    padding: 0 24px;
  }

  .cf-post-layout--has-toc .cf-post-body {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .cf-post-layout--has-toc .cf-post-toc {
    display: block;
    padding-top: 4px;
  }
}

/* Sticky inner wrapper */
.cf-post-toc__inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-bottom: 24px;
}

.cf-post-toc__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

/* ToC list */
.cf-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-grey-light);
}

.cf-toc-item {
  margin: 0;
}

.cf-toc-link {
  display: block;
  padding: 5px 0 5px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-grey-dark);
  text-decoration: none;
  transition: color 0.15s;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.cf-toc-link:hover {
  color: var(--color-primary);
}

.cf-toc-link--active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

/* H3 items are indented */
.cf-toc-item--h3 .cf-toc-link {
  padding-left: 24px;
  font-size: 12px;
}

/* ==========================================================================
   Mobile FAB + slide-up panel
   ========================================================================== */

/* FAB hidden by default, shown on mobile when ToC has content */
.cf-toc-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s, transform 0.15s;
}

.cf-toc-fab:hover {
  background-color: var(--color-primary-light);
  transform: scale(1.05);
}

/* Only show FAB on mobile screens */
@media (max-width: 1079px) {
  .cf-toc-fab--visible {
    display: flex;
  }
}

/* Overlay */
.cf-toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 600;
}

.cf-toc-overlay--open {
  display: block;
}

/* Slide-up panel */
.cf-toc-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 700;
  background-color: var(--color-white);
  border-radius: 16px 16px 0 0;
  padding: 0 24px 32px;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.cf-toc-panel--open {
  transform: translateY(0);
}

.cf-toc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--color-grey-light);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background-color: var(--color-white);
}

.cf-toc-panel__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-heading);
}

.cf-toc-panel__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-grey-dark);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.cf-toc-panel__close:hover {
  background-color: var(--color-off-white);
}

.cf-toc-panel__nav .cf-toc-list {
  border-left: none;
}

.cf-toc-panel__nav .cf-toc-link {
  font-size: 15px;
  padding: 10px 0 10px 0;
  border-left: none;
  border-bottom: 1px solid var(--color-grey-light);
}

.cf-toc-panel__nav .cf-toc-item--h3 .cf-toc-link {
  padding-left: 16px;
  font-size: 14px;
}

/* ==========================================================================
   Blog post page (blog-post.html)
   ========================================================================== */

/* Post header */
.cf-post-header {
  background-color: var(--color-white);
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--color-grey-light);
}

.cf-post-header__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.cf-post-header__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 3px 10px;
  background-color: var(--color-blog-badge);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
}

.cf-post-header__title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--color-text-heading);
  margin: 0 0 16px;
}

.cf-post-header__summary {
  font-size: 18px;
  color: var(--color-grey-dark);
  line-height: 1.65;
  margin: 0 0 28px;
}

.cf-post-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.cf-post-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-grey-light);
  flex-shrink: 0;
}

.cf-post-header__author {
  font-weight: 600;
  color: var(--color-text-body);
  text-decoration: none;
}

.cf-post-header__author:hover {
  color: var(--color-primary);
}

.cf-post-header__date::before {
  content: '·';
  margin-right: 10px;
  color: var(--color-grey-mid);
}

/* Featured image — full bleed below header */
.cf-post-featured-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Post body */
.cf-post-body-wrap {
  padding: 64px 0 80px;
  background-color: var(--color-white);
}

.cf-post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-body);
}

.cf-post-body h2 {
  font-size: 26px;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--color-text-heading);
}

.cf-post-body h3 {
  font-size: 21px;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--color-text-heading);
}

.cf-post-body h4 {
  font-size: 17px;
  margin-top: 28px;
  color: var(--color-text-heading);
}

.cf-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 32px auto;
}

.cf-post-body a {
  color: var(--color-primary);
}

.cf-post-body a:hover {
  color: var(--color-primary-light);
}

.cf-post-body blockquote {
  border-left: 3px solid var(--color-grey-light);
  padding-left: 20px;
  margin: 28px 0 28px 0;
  color: var(--color-grey-dark);
  font-style: italic;
}

.cf-post-body ul,
.cf-post-body ol {
  padding-left: 24px;
  margin-bottom: 20px;
}

.cf-post-body li {
  margin-bottom: 6px;
}

/* Narration wrapper */
.cf-post-narration {
  background-color: var(--color-off-white);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 32px;
}

.cf-post-narration h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-heading);
}

.cf-post-narration p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-grey-dark);
}

/* Post tags */
.cf-post-tags {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--color-grey-light);
}

.cf-post-tag-link {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--color-grey-light);
  border-radius: 3px;
  font-size: 13px;
  color: var(--color-grey-dark);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.cf-post-tag-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Social sharing module — force icons into a horizontal row */
.hs_cos_wrapper_type_social_sharing {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Comments */
.cf-post-comments {
  padding: 48px 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-grey-light);
}

/* Related posts */
.cf-post-related {
  background-color: var(--color-off-white);
  padding: 72px 0;
}

.cf-post-related__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.cf-post-related__heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 32px;
}

.cf-post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .cf-post-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .cf-post-related__grid { grid-template-columns: 1fr; }
}
/* Error pages */
.kl-error-page {
  padding: 100px 0;
  text-align: center;
}

.kl-error-page__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  margin: 0 0 0.5rem;
}

.kl-error-page__heading {
  margin: 0 0 1rem;
}

/* System pages */
.systems-page__content {
  margin: 0 auto;
  max-width: 767px;
  padding: 120px 20px;
}
.systems-page form {
  margin-bottom: 50px;
}
span.form-separator {
  padding: 10px 0;
  display: block;
  text-align:center;
}
.systems-page .success {
  color: var(--color-success);
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
}

.systems-page h1 {
  text-align: center;
}

@media screen and (max-width: 360px) {
  .systems-page h1 {
    margin: 0 0 2rem;
    font-size: 2rem;
  }
}

.systems-page--membership {

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.systems-page--membership h1 {
  margin: 0 0 1rem;
}

.systems-page--membership p {
  text-align: center;
}

.systems-page--membership form .hs-submit input, .systems-page--membership form input[type="submit"] {
  width: 100%;
}

.systems-page--subscription-confirmation h1 {
  display: none;
  margin: 0 0 1.5rem;
}

.systems-page--subscription-confirmation h2 {
  color: var(--color-dark);
  font-size: 1rem;
  margin: 0;
}

.systems-page--subscription-confirmation .page-header {
  text-align: center;
  margin: 0 0 2rem;
}

.systems-page--subscription-preferences .page-header {
  text-align: center;
  margin: 0 0 2rem;
}

.systems-page--subscription-preferences h1 {
  margin: 0 0 1.5rem;
}

.systems-page--subscription-preferences h2 {
  color: var(--color-dark);
  font-size: 1rem;
  margin: 0;
}

.systems-page--subscription-preferences .email-prefs {
  padding: 32px;
  border: 1px solid var(--color-grey-light);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 10px;
}

.systems-page--subscription-preferences .email-prefs p, .systems-page--subscription-preferences .email-prefs span, .systems-page--subscription-preferences .email-prefs label {
  font-size: 0.875rem;
  vertical-align: text-top;
  font-weight: normal;
}

@media screen and (max-width: 360px) {
  .systems-page--subscription-preferences .email-prefs {
    padding: 18px;
  }
}

.systems-page--subscription-preferences input[type="checkbox"] {
  margin-right: 12px;
}

.systems-page__preheader {
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #E85D26;
  display: block;
  margin: 0 0 0.5rem;
  text-align: center;
}

.systems-page form {
  position: relative;
}

.systems-page form .hs-form-field {
  position: relative;
}

.systems-page form .form-input-validation-message ul {
  padding: 0;
}

.systems-page form .form-input-validation-message label {
  color: var(--color-grey-mid);
  font-size: 0.875rem;
  font-weight: normal;
}

.systems-page form .hs-login-widget-show-password,
.systems-page form .hs-register-widget-show-password,
.systems-page form .hs-reset-widget-show-password {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #E85D26;
}

.systems-page form .hs-login-widget-show-password:hover, .systems-page form .hs-login-widget-show-password:focus,
.systems-page form .hs-register-widget-show-password:hover,
.systems-page form .hs-register-widget-show-password:focus,
.systems-page form .hs-reset-widget-show-password:hover,
.systems-page form .hs-reset-widget-show-password:focus {
  color: #E85D26;
  text-decoration: none;
}

.systems-page form #hs_login_reset {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  margin: 1rem 0 0;
  z-index: 1;
  color: #E85D26;
  font-size: 0.875rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.systems-page form input {
  max-width: 100%;
}

.systems-page .form-container {
  max-width: 380px;
  margin: 0 auto 3rem;
}

.systems-page .form-container .label {
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  margin: 0 0 0.75rem;
}

#email-prefs-form .header {
  background-color: transparent;
}

/* Password prompt */
.password-prompt input[type=password] {
  display: block;
  height: auto !important;
  margin-bottom: 1.4rem;
}

/* Backup unsubscribe */
.backup-unsubscribe h3 {
  font-size: 0.875rem;
  font-weight: bold !important;
}

.backup-unsubscribe #email-prefs-form {
  padding: 42px 32px;
  border: 1px solid var(--color-grey-light);
  box-shadow: 0px 11px 30px rgba(154, 161, 177, 0.0);
  border-radius: 10px;
}

.backup-unsubscribe #email-prefs-form div {
  padding-bottom: 0 !important;
}

@media screen and (max-width: 360px) {
  .backup-unsubscribe #email-prefs-form {
    padding: 32px 18px;
  }
}

.backup-unsubscribe input[type=email] {
  margin-bottom: 1.5rem;
  padding: 0.7rem !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--color-grey-lighter);
}

/* Search pages */
.hs-search-field {
  max-width: 750px;
}

.hs-search-field input[type=text] {
  padding-right: 48px;
}

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

.hs-search-field__bar:after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4-4' stroke='%23C6C6C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.hs-search-field__suggestions {
  background-color: var(--color-white);
  max-width: 360px;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(8px);
  border-radius: 9px;
  width: 100%;
}

.hs-search-field__suggestions a, .hs-search-field__suggestions #results-for {
  padding: 8px 16px;
}

.hs-search-field--open .hs-search-field__suggestions {
  border: 1px solid var(--color-grey-lighter) !important;
}

.kl-search-results {
  padding: 80px 0;
}

.hs-search-results {
  margin-top: 3.5rem;
}

.hs-search-results__featured-image {
  margin-bottom: 1rem;
}

.hs-search-results__featured-image img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.hs-search-results__title {
  color: #0F2B4C;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: Inter, sans-serif, sans-serif;
}

.hs-search-results__title:hover, .hs-search-results__title:focus {
  color: #E85D26;
  text-decoration: none;
}

.hs-search-results__description {
  padding-top: 1.25rem;
  margin: 0 0 2.5rem;
}

.hs-search-results__pagination a {
  color: #0F2B4C;
  font-family: Inter, sans-serif, sans-serif;
  font-weight: bold;
}

.hs-search-results__listing {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px !important;
}

.hs-search-results__listing li {
  flex-basis: calc(100% / 2);
  padding: 0 20px !important;
}

@media screen and (max-width: 620px) {
  .hs-search-results__listing li {
    flex-basis: 100%;
  }
}

.hs-search-highlight {
  font-weight: bold;
}
/* ==========================================================================
   Design system CSS custom properties
   Source of truth: projects/cloudfox-website-redesign/design/design-system.md
   ========================================================================== */

:root {
  /* Primary — Cloudfox brand navy (reconciled 2026-06, design-system.md) */
  --color-primary:       #123B65;
  --color-primary-light: #1C4E80;
  --color-primary-dark:  #0C2A48;

  /* Accent (CTAs) — Ember */
  --color-accent:        #E8435A;
  --color-accent-hover:  #D6354C;
  --color-accent-active: #BE2C41;

  /* Teal — eyebrows, highlights, accents */
  --color-teal:          #20789E;
  --color-teal-dark:     #1A6585;

  /* Neutrals */
  --color-white:         #FFFFFF;
  --color-off-white:     #F4F6F9;
  --color-grey-light:    #E8ECF0;
  --color-grey-mid:      #9BA5B1;
  --color-grey-dark:     #4A5568;

  /* Text */
  --color-text-heading:  #123B65;
  --color-text-body:     #2D3748;
  --color-text-muted:    #718096;
  --color-text-inverse:  #FFFFFF;

  /* Extended neutrals */
  --color-black:          #000000;
  --color-dark:           #111111;
  --color-grey-lighter:   #DADADA;
  --color-grey-subtle:    #F3F3F3;
  --color-disabled:       #D0D0D0;
  --color-disabled-text:  #E6E6E6;
  --color-muted:          #C6C6C6;

  /* Status colours */
  --color-success:  #34A853;
  --color-error:    #EF6B51;
  --color-info:     #0096C7;
  --color-blog-badge: #e6edff;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 43, 76, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 43, 76, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 43, 76, 0.12);

  /* Layout */
  --container-max:     1200px;
  --container-padding: 24px;

  /* Font */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Base overrides — body text colour (headings stay navy via fields.json)
   ========================================================================== */

body {
  font-family: var(--font-family);
  color: var(--color-text-body);
}

p {
  color: var(--color-text-body);
}

/* Navigation — white header with bottom border per design system.
   Pin it to the very top so the fixed header doesn't float over the hero. */
.kl-header {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-grey-light);
  top: 0;
  left: 0;
  right: 0;
}

/* ==========================================================================
   Module: Backed by the platforms (light band) — heading + Platinum badges + tool strip
   ========================================================================== */

.cf-partner-badges {
  background-color: var(--color-off-white);
  padding: 56px 0;
}

.cf-partner-badges__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cf-partner-badges__intro {
  max-width: 480px;
}

.cf-partner-badges__label {
  color: var(--color-text-heading);
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.cf-partner-badges__subtext {
  color: var(--color-grey-dark);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.55;
  margin: 8px 0 0;
}

.cf-partner-badges__badges {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.cf-partner-badges__badge {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.cf-partner-badges__badge img {
  width: auto;
  object-fit: contain;
  display: block;
}

/* Sized by the visible mark: HubSpot hexagon fills ~0.685x its box, so its box runs
   ~1.6x Xero (118px vs 74px) and the two marks read at parity. */
.cf-partner-badges__badge--hs img { height: 118px; }
.cf-partner-badges__badge--xero img { height: 74px; }

/* Tool strip — every other platform, below the Platinum badges, smaller (hierarchy of depth). */
.cf-partner-badges__tools {
  max-width: var(--container-max);
  margin: 32px auto 0;
  padding: 0 var(--container-padding);
  display: flex;
  flex-wrap: wrap;
  gap: 22px 48px;
  justify-content: center;
  align-items: center;
}

.cf-partner-badges__tool {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-dark);
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 8px;
  padding: 10px 16px;
  line-height: 1;
}

.cf-partner-badges__tool-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .cf-partner-badges__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .cf-partner-badges__badges {
    gap: 24px;
  }

  .cf-partner-badges__badge--hs img { height: 92px; }
  .cf-partner-badges__badge--xero img { height: 58px; }
}

/* ==========================================================================
   Module: Problem / Pain
   ========================================================================== */

.cf-problem {
  background-color: transparent;
  padding: 48px 0;
}

.cf-problem__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.cf-problem__headline {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  text-align: center;
  margin: 0 0 32px;
}

.cf-problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cf-problem__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-left: 2px solid var(--color-grey-light);
}

.cf-problem__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

.cf-problem__text {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-grey-dark);
  margin: 0;
}

@media (min-width: 768px) {
  .cf-problem {
    padding: 80px 0;
  }

  .cf-problem__container {
    padding: 0 32px;
  }

  .cf-problem__headline {
    font-size: 36px;
  }

  .cf-problem__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .cf-problem__container {
    padding: 0 var(--container-padding);
  }

  .cf-problem__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   Module: How It Works
   ========================================================================== */

.cf-hiw {
  background-color: transparent;
  padding: 48px 0;
}

.cf-hiw__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.cf-hiw__steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}

/* Vertical connector line on mobile */
.cf-hiw__steps::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background-color: var(--color-grey-light);
}

.cf-hiw__step {
  position: relative;
  padding-left: 56px;
}

.cf-hiw__number {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  z-index: 1;
}

.cf-hiw__title {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-heading);
  margin: 0 0 8px;
}

.cf-hiw__desc {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey-dark);
  margin: 0;
}

@media (min-width: 768px) {
  .cf-hiw {
    padding: 80px 0;
  }

  .cf-hiw__container {
    padding: 0 32px;
  }

  .cf-hiw__steps {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }

  /* Horizontal connector line on desktop */
  .cf-hiw__steps::before {
    left: calc(40px / 2);
    right: calc(40px / 2);
    top: 20px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .cf-hiw__step {
    flex: 1;
    padding-left: 0;
    text-align: center;
  }

  .cf-hiw__number {
    position: relative;
    margin: 0 auto 16px;
  }
}

@media (min-width: 1280px) {
  .cf-hiw__container {
    padding: 0 var(--container-padding);
  }
}

/* ==========================================================================
   Original theme overrides (below)
   ========================================================================== */

.cm_banner .kl-rich-text__preheader{
  color: #E85D26;
  background-color: #ffffff;
}
.hs_cos_wrapper.widget-type-space{
  min-height:1px !important;
}
.cm_rich_text ul {
  list-style: none;
  padding: 0;
}
.cm_rich_text ul li:before{
  background-image:url(https://5559206.fs1.hubspotusercontent-eu1.net/hubfs/5559206/raw_assets/public/cloudfox-website/images/check.svg);
  background-size: cover;
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  vertical-align: middle;
  margin-right: 20px;
  margin-left: -40px;
}
.cm_rich_text ul li {
  padding: 6px 0;
  vertical-align: middle;
  padding-left: 40px;
}
@media(max-width:767px){
  .cm_rich_text ul li:before {
    margin-right: 10px;
    margin-left: -30px;
  }
  .cm_rich_text ul li {
    padding-left: 30px;
  }
}

.header_no_nav a img{
  display:block
}
p:last-child{
  margin-bottom: 0px;
}

/* ==========================================================================
   Home redesign overrides (loaded last — win the cascade)
   ========================================================================== */

/* Proof / Testimonials — optional section headline */
.cf-proof__headline {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  text-align: center;
  margin: 0 0 32px;
}

/* How It Works — optional headline + intro above the steps */
.cf-hiw__headline {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  text-align: center;
  margin: 0 0 12px;
}

.cf-hiw__intro {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-grey-dark);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

@media (min-width: 768px) {
  .cf-proof__headline,
  .cf-hiw__headline { font-size: 36px; }
}

/* Solution Snapshot — responsive card grid (4 cards -> 4 columns on the home page) */
@media (min-width: 768px) {
  .cf-solution__grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

/* Form embed — band-agnostic; the page section controls the band colour */
.cf-form-embed {
  background-color: transparent;
}

/* Nav menu links — navy on the white redesign header (theme default colour was light,
   designed for a dark header, so it rendered white-on-white). */
.kl-header .kl-navbar__button,
.kl-header .kl-navbar__button > span {
  color: var(--color-text-heading);
  white-space: nowrap;
}

.kl-header .kl-navbar__button:hover,
.kl-header .kl-navbar__button:focus,
.kl-header .kl-navbar__button:hover > span,
.kl-header .kl-navbar__button:focus > span {
  color: var(--color-accent);
}

/* ==========================================================================
   Pre-Lease Engine (page 2) overrides — rich-text bands, checklists, timeline
   ========================================================================== */

/* Proof / Testimonials — when a single quote is used (woven mid-page / pre-CTA), centre the
   lone card instead of leaving it stranded in the left column of the 2-up grid. */
.cf-proof__grid:has(> .cf-proof__card:only-child) {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

/* Rich-text bands (Custom Rich Text used for Outcomes / Timeline / Risk / See-It).
   Custom Rich Text carries no band styling, so the dnd_section sets the band colour
   and these rules give the inner content a centred, readable measure + vertical rhythm. */
.cfx-richband {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}

.cfx-richband > h2,
.cfx-richband .cfx-band-head {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  text-align: center;
  margin: 0 0 16px;
}

.cfx-richband > p {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-grey-dark);
  margin: 0 auto 24px;
  text-align: center;
  max-width: 740px;
}

@media (min-width: 768px) {
  .cfx-richband > h2,
  .cfx-richband .cfx-band-head { font-size: 34px; }
}

/* Ember ✓ checklist (Who-For bullets, Outcomes, Risk reduction).
   Scoped with .cfx-richband (2 classes) to outrank the theme's default rich-text bullet
   `.cm_rich_text ul li:before` (a cyan check.svg, off-brand) so brand ember ticks win. */
.cfx-richband .cf-checklist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.cfx-richband .cf-checklist > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 38px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-grey-dark);
}

.cfx-richband .cf-checklist > li::before {
  content: "✓";
  background-image: none;
  background-color: var(--color-accent);
  color: #fff;
  position: absolute;
  left: 0;
  top: 1px;
  margin: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfx-richband .cf-checklist > li strong { color: var(--color-text-heading); }

/* Two-up checklist on wider screens (Outcomes section) */
@media (min-width: 768px) {
  .cfx-richband .cf-checklist--2col { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
}

/* 30-day timeline table */
.cfx-timeline-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 22px;
  font-family: var(--font-family);
  text-align: left;
}

.cfx-timeline-table th,
.cfx-timeline-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #dfe5ec;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-grey-dark);
}

.cfx-timeline-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-bottom: none;
}

.cfx-timeline-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.cfx-timeline-table tbody td:nth-child(2) { color: var(--color-teal); font-weight: 600; }

.cfx-timeline-note {
  font-size: 15px;
  color: var(--color-grey-dark);
  text-align: center;
}

/* See It In HubSpot — centred showcase with editable product image (interim placeholder) */
.cfx-seeit { text-align: center; }

.cfx-seeit__frame {
  margin: 28px auto 12px;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  border: 1px solid #cfd8e3;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a94a3;
  font-family: var(--font-family);
  font-size: 14px;
  box-shadow: 0 18px 40px -28px rgba(18, 59, 101, 0.5);
}

.cfx-seeit__frame img { max-width: 100%; height: auto; border-radius: 13px; display: block; }

.cfx-richband > p.cfx-seeit__cap {
  font-size: 13px;
  color: #8a94a3;
  margin: 0;
  max-width: 760px;
}

/* System-components alternating rows — tighten the two-column-content default spacing
   (the module ships with 165px band padding; the band colour is set on the dnd_section)
   and give the vendor logo media column a light card so the logo reads as a product tile */
.twoColContent.cfx-syscomp-row {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
  background: transparent !important;
}

@media (max-width: 767px) {
  .twoColContent.cfx-syscomp-row {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

.cfx-syscomp-row .mediaColInner {
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.cfx-syscomp-row .mediaColInner img { max-height: 96px; width: auto; }

.cfx-syscomp-row .contentColInner h3 {
  color: var(--color-text-heading);
  font-size: 24px;
  margin: 0 0 12px;
}

/* ==========================================================================
   How We Work (page 5) overrides — feature cards on white, stat callout,
   pricing tiers, decision-point testimonial on alt band
   ========================================================================== */

/* "What you go live with" feature cards sit on the WHITE process band (wireframe:
   process + go-live are both white, no divider). Drop the module's off-white band so
   the white section shows through, and give cards a hairline border to read on white. */
.cf-how-we-work .cf-solution { background-color: transparent; padding-top: 8px; }
.cf-how-we-work .cf-solution__card { border: 1px solid #e4e9f0; }

/* Hide the solution-snapshot's own H2 on this page — the heading + intro come from a
   cfx-richband rich-text directly above (so we get a supporting paragraph the module lacks). */
.cf-solution__headline:empty { display: none; }

/* Decision-point testimonial sits on an ALT band here (proof module self-colours white). */
.cf-how-we-work .cf-proof { background-color: transparent; }

/* Stat callout — promotes the "2–4 hours per week" reassurance out of the body text. */
.cfx-statpull {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 30px auto 0;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  padding: 20px 26px;
  text-align: left;
}

.cfx-statpull__v {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-heading);
  white-space: nowrap;
  line-height: 1;
}

.cfx-statpull__t {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-grey-dark);
}

.cfx-statpull__t strong { color: var(--color-text-heading); }

/* Pricing tiers — two scope cards (Starter / Full Pre-Lease Engine) inside a rich-text band */
.cfx-pricegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 8px 0 0;
  text-align: left;
}

@media (min-width: 768px) {
  .cfx-pricegrid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.cfx-pricecard {
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  padding: 30px 28px;
  box-shadow: 0 1px 3px rgba(15, 43, 76, 0.06);
}

.cfx-pricecard--feature {
  border-color: var(--color-teal);
  box-shadow: 0 18px 40px -28px rgba(18, 59, 101, 0.5);
}

.cfx-pricecard h3 {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 2px;
}

.cfx-pricecard .cfx-price {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 16px;
}

/* Ember ✓ bullets inside the price cards — scoped with 2 classes to outrank the theme's
   default cyan check.svg list bullet, same trick as .cfx-richband .cf-checklist. */
.cfx-richband .cfx-pricecard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* Flex row (tick = inline flex item) instead of an absolutely-positioned ::before —
   absolute positioning was resolving against the card box, not the <li>, so the ticks
   floated out to the card edge / out of the band. Flex keeps the tick beside its text. */
.cfx-richband .cfx-pricecard li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-family);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-grey-dark);
}

.cfx-richband .cfx-pricecard li::before {
  content: "✓";
  background-image: none;
  position: static;
  flex: 0 0 auto;
  /* reset the Aug-2024 theme's .cm_rich_text ul li:before margin-left:-40px pull,
     which was dragging the tick out of the card. */
  margin: 0;
  width: auto;
  height: auto;
  color: var(--color-accent);
  font-weight: 700;
  line-height: 1.5;
}

.cfx-richband .cfx-pricecard li strong { color: var(--color-text-heading); }

/* Pricing footnote line under the tiers */
.cfx-richband > p.cfx-price-note { margin-top: 40px; font-size: 15px; }

/* ==========================================================================
   About (page 6) overrides — text-led centred hero (no photo/seam), two-list
   "who we work with", Our Story text + navy stat callout, testimonial bands
   ========================================================================== */

/* Hero with no photo → text-led CENTRED layout (Eddie 20/06). The hero module
   already drops the photo + seam + mobile curve when no image is set and adds
   .cf-hero--nophoto; here we centre the panel content. */
.cf-hero--nophoto { text-align: center; }
.cf-hero--nophoto .cf-hero__panel {
  align-items: center;
  min-height: 0;
  max-width: 860px;
  padding: 92px 32px 84px;
}
.cf-hero--nophoto .cf-hero__headline { font-size: 46px; max-width: 820px; }
.cf-hero--nophoto .cf-hero__subheading { max-width: 660px; margin-left: auto; margin-right: auto; }
.cf-hero--nophoto .cf-hero__ctas { justify-content: center; }
.cf-hero--nophoto .cf-hero__trust { justify-content: center; }
@media (max-width: 880px) {
  .cf-hero--nophoto .cf-hero__panel { padding: 56px 22px 56px; }
  .cf-hero--nophoto .cf-hero__headline { font-size: 32px; }
}

/* "Who we work with / What we implement" — two ember-✓ checklist columns inside
   a cfx-richband. (cf-checklist ember ticks already defined under .cfx-richband.) */
.cfx-twolist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 26px;
  text-align: left;
}
@media (min-width: 768px) {
  .cfx-twolist { grid-template-columns: 1fr 1fr; gap: 44px; }
}
.cfx-twolist h4 {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 14px;
}
/* Tighter checklist rhythm inside the two-list (default cfx-checklist gap is 18px). */
.cfx-twolist .cf-checklist { gap: 12px; }
.cfx-twolist .cf-checklist > li { font-size: 15px; }

/* Why Us — the lone Luna quote sits on the same ALT band as the icon list
   (proof-testimonials self-colours white). */
.cf-about .cf-proof { background-color: transparent; }

/* Our Story — 1.3fr text + 0.9fr navy stat callout, inside a cfx-richband. */
.cfx-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 10px;
  text-align: left;
  align-items: start;
}
@media (min-width: 768px) {
  .cfx-story { grid-template-columns: 1.3fr 0.9fr; gap: 44px; }
}
.cfx-story__text p {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-grey-dark);
  margin: 0 0 16px;
}
.cfx-story__text p:last-child { margin-bottom: 0; }
.cfx-statcallout {
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
  padding: 30px 30px;
}
.cfx-statcallout__yr {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}
.cfx-statcallout__big {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}
.cfx-statcallout p {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.55;
  color: #c4ccd6;
  margin: 6px 0 0;
}
.cfx-statcallout hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 22px 0;
}

/* Partner badges on About + Finance Stack use the centred "accredited" treatment
   (wireframe): a small uppercase centred label, the split Platinum badge pair centred,
   tool slider below — scoped so the Home left/right layout is untouched. */
.cf-about .cf-partner-badges__container,
.cf-finance-page .cf-partner-badges__container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
}
.cf-about .cf-partner-badges__intro,
.cf-finance-page .cf-partner-badges__intro { max-width: none; }
.cf-about .cf-partner-badges__label,
.cf-finance-page .cf-partner-badges__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cf-about .cf-partner-badges__badges,
.cf-finance-page .cf-partner-badges__badges { justify-content: center; gap: 40px; }


/* ============================================================================
   Capture / newsletter form band — two columns (rich text left + native
   @hubspot/form right). dnd_section/dnd_column don't accept a custom class in
   this theme, so we hook the band off the rich-text's class_selector
   (.cfx-formband__copy) via :has() to centre + constrain the full-width row.
   ============================================================================ */
.dnd-section:has(.cfx-formband__copy) > .row-fluid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.dnd-section:has(.cfx-formband__copy) > .row-fluid > .span6 {
  width: auto;
  flex: 1 1 0;
  float: none;
  margin: 0;
  min-width: 0;
}
.cfx-formband__copy h2 {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  margin: 0 0 14px;
}
.cfx-formband__copy p {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-grey-dark);
  margin: 0;
}
@media (max-width: 767px) {
  .dnd-section:has(.cfx-formband__copy) > .row-fluid {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}