/* Theme base styles */

/* Generic */

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

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

/* Objects */

/* Responsive grid */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.container-fluid {
    *zoom: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Clearfix */

.clearfix {
    *zoom: 1;
}

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

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}



/* Responsive Visibilty Classes */

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

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

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

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

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

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

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

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

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

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

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

  




/* Content wrappers for blog post and system templates */

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

.content-wrapper-full{
    max-width: 1400px64px;
    margin: 0 auto;
}

/* Drag and drop layout styles */

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

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

/* Elements */

html {
  position: relative;
}

body {
  line-height: 1.4;
}

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

/* Paragraphs */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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

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

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

.no-list li {
  margin: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Subscripts and superscripts */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Image alt text */

img {
  font-size: 1rem;
  word-break: normal;
}
.primary-cta{
  display: inline-flex;
  padding: 20px 38px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px solid;
  font-size: 14px!important;
  font-weight: 500!important;
  line-height: 1.4;
  letter-spacing: 2px;
  text-decoration: none!important;
  text-transform: uppercase;
  padding: 20px 40px 20px 40px;
  transition: 0.4s ease-in-out;
  line-height: 1;
  background-color: transparent;
  max-width: fit-content;
}

.primary-cta:hover{
  padding: 20px 50px 20px 30px;
}

.primary-cta::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  opacity: 0;
  width: 16px;
  height: 12px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.4s ease-in-out;
}

.primary-cta:hover::after{
  opacity: 1;
}


.primary-cta.gold-cta{
  color: var(--gold);
  border-color: var(--gold);
}

.primary-cta.gold-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__gold.svg')
}


.primary-cta.solid-gold-cta{
  background-color: var(--gold);
  border-color: var(--gold);
}

.primary-cta:hover.solid-gold-cta{
  color: var(--black);
}

.primary-cta.solid-gold-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__black.svg')
}

.primary-cta.black-cta{
  color: var(--black);
  border-color: var(--black);
}

.primary-cta.black-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__black.svg')
}

.primary-cta.solid-black-cta{
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.primary-cta:hover.solid-black-cta{
  color: var(--white);
}

.primary-cta.solid-black-cta::after{
  background-image: url("https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__white.svg");
}

.primary-cta.white-cta{
  color: var(--white);
  border-color: var(--white);
}

.primary-cta.white-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__white.svg')
}

.primary-cta.solid-white-cta{
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.primary-cta.solid-white-cta::after{
  background-image: url("https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__black.svg");
}

.primary-cta:hover.solid-white-cta{
  color: var(--black);
}

.primary-cta.blue-cta{
  color: var(--blue);
  border-color: var(--blue);
}

.primary-cta.blue-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__blue.svg')
}

.primary-cta.solid-blue-cta{
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.primary-cta:hover.solid-blue-cta{
  color: var(--white);
}

.primary-cta.solid-blue-cta::after{
  background-image: url("https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__white.svg");
}

.primary-cta.plumb-cta{
  color: var(--plumb);
  border-color: var(--plumb);
}

.primary-cta.plumb-cta::after{
  background-image: url('https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__plumb.svg');
}

.primary-cta.solid-plumb-cta{
  background-color: var(--plumb);
  border-color: var(--plumb);
  color: var(--white);
}

.primary-cta:hover.solid-plumb-cta{
  color: var(--white);
}

.primary-cta.solid-plumb-cta::after{
  background-image: url("https://fitzroyoflondon.com/hubfs/Fitzroy%20Of%20London%20Theme%20Assets/Icons/cta-arrow__white.svg");
}


.text-cta{
  font-size: 14px;
  font-style: normal;
  font-weight: 500!important;
  line-height: 20px; /* 142.857% */
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  position: relative;
  text-decoration: none!important;
  max-width: max-content;
}

.text-cta:hover{
  color: var(--gold)!important;
}

.text-cta::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--gold);
  transition: var(--transition);
}

.text-cta:hover::after{
  width: 100%;
}





@media screen and (max-width: 767px){
  .primary-cta{
    width: 100%;
    text-align: center;
    line-height: 1.5;
    max-width: unset;
  }

  .cta_button.primary-cta{
    padding: 20px 0px!important;
  }
}



.primary-cta--small{
  font-size: 10px !important;
  padding: 15px 30px;
}
.primary-cta--small:hover{
  font-size: 10px !important;
  padding: 15px 44px 15px 16px;
}
/* Form title */

.form-title {
  margin: 0;
}



.form-title ~ div > form {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Labels */

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

/* Form fields */

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

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="file"],
form input[type="search"],
form select,
form textarea {
  display: inline-block;
  width: 100% !important; /* stylelint-disable-line declaration-no-important */
}

form fieldset {
  max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
}

/* Form fields - checkbox/radio */

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

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

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

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

/* Form fields - date picker */

form .hs-dateinput {
  position: relative;
}

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

form .is-selected .pika-button {
  border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
}

form .fn-date-picker .pika-button:hover,
form .fn-date-picker .pika-button:focus {
  border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
}

/* Form fields - file picker */

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

/* Headings and text */

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

form .hs-richtext img {
  height: auto;
  max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
}

/* GDPR */

form .legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 1rem !important; /* stylelint-disable-line declaration-no-important */
}

/* Validation */

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

form .hs-input.error {
  border-color: #ef6b51;
}

form .hs-error-msg,
form .hs-error-msgs {
  margin-top: 0.35rem;
  color: #ef6b51;
}

/* Submit button */

form input[type="submit"],
form .hs-button {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal !important; /* stylelint-disable-line declaration-no-important */
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}

select {
  padding: 14px 24px;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M23.5 1L11.7143 13L1 0.999999" stroke="black"/></svg>');
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px;
  border: 0px;
  border-bottom: 1px solid #d9d9d9;
  width: 100%;
  font-weight: 100;
  appearance: none;       /* For modern browsers */
  -webkit-appearance: none;  /* For WebKit browsers (Safari, Chrome) */
  -moz-appearance: none;     /* For Firefox */
  color: var(--black);
}
/* Load spinner */

.lds-spinner {
  opacity: 0;
  position: relative;
  right: 0;
  left: 0;
  display: block;
  margin: 20px auto;
  transform: scale(0.5);
  transform: all 0.3s;
}
.lds-spinner.active {
  opacity: 1;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #202349;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Icon wrapper */

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

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

/* Icon */

.icon svg {
  vertical-align: middle;
}
nav.pagination {
    margin-top: 3em;
}

nav.pagination a {
    margin: 0 .3rem;
}

nav.pagination a:not(.pagination__link--active) {
    color: var(--black);
    font-size: 13px;
}
/* Table */

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

/* Table cells */

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

/* Table header */

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


table {
	border-collapse: collapse;
}
table td {
	padding: 15px;
}
table thead td {
	background-color: #54585d;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid #54585d;
}
table tbody td {
	color: #636363;
	border: 1px solid #dddfe1;
}
table tbody tr {
	background-color: #f9fafb;
}
table tbody tr:nth-child(odd) {
	background-color: #ffffff;
}
/* Cards */

.card{
    background-color: #fff;
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
    cursor: pointer;
}

.card__cover-link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.card__image-container{
    width: 100%;
    overflow: hidden;
    /* the aspect will keep the image looking the same in all screen sizes */
    aspect-ratio: 3 / 2;
    background-color: #F7F8FB;
}

.card__image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: 0.5s ease-in-out;
}

.card__tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.card__tag{
    color: #5F73AD;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px; /* 166.667% */
    margin-bottom: 12px;
    text-transform: uppercase;
}


.card__body{
    padding: 24px 0px;
}

.card__body h1, 
.card__body h2, 
.card__body h3, 
.card__body h4, 
.card__body h5, 
.card__body h6{
    position: relative;
    display: inline;
    background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, var(--black), var(--black), var(--black));
    background-size: 100% 0.0625em, 0 0.0625em; /* 1px - Update this on the hover effect also if it changes here - PC */
    background-position: 100% 100%, 0 90%;
    background-repeat: no-repeat;
    transition: 0.5s ease-in-out;
    margin-bottom: 0px;
}

.card__body h3::after{
   content: "";
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 0%;
   height: 1px;
   background-color: var(--black);
   transition: 0.5s ease-in-out;
}

.card__body p:first-of-type{
    margin-top: 24px; /* We apply margin-top here due to the h tags being inline for the hover effect to work  - PC */
}


.card__body p:last-of-type{
    margin-bottom: 0px;
}


.card__footer{
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
}

/* Card Hover Effects */

.card:hover .card__image{
    transform: scale(1.1); /* 10% increase, you can adjust this if needed - PC */
}

.card:hover .card__body h1, 
.card:hover .card__body h2, 
.card:hover .card__body h3, 
.card:hover .card__body h4, 
.card:hover .card__body h5, 
.card:hover .card__body h6{
    background-size: 0 0.0625em, 100% 0.0625em;  /* 1px- Make sure this matches the none hover value - PC */
}

.card:hover .card__footer .primary-cta::after{
    opacity: 1;
}

.card:hover .card__footer .primary-cta{
  padding: 20px 50px 20px 30px;
}


@media screen and (min-width: 768px) {
    .card__body{
        padding: 36px 0px 26px 0px;
    }
}



/*  */

.meet-the-team{
    --swiper-theme-color: var(--black);
    position: relative;
    overflow-x: hidden;
}
.meet-the-team .content-wrapper{
    padding: 0px 32px;
}
.meet-the-team .content-wrapper, .meet-the-team{
    overflow: visible;
}
.meet-the-team h2{
    max-width: 590px;
    margin-bottom: 60px;
}
.meet-the-team__card img{
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.meet-the-team__card__no-image{
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: #D9D9D9;
}
.meet-the-team__card img, .meet-the-team__card__no-image{
    margin-bottom: 18px;
}
.meet-the-team__card__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.meet-the-team__card__header h4{
    margin-bottom: 12px;
}
.meet-the-team__card__header .linkedin-link{
    display: block;
    margin-top: 10px;
}

.meet-the-team__navigation{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
    position: relative;
}
.meet-the-team__navigation svg{
    cursor: pointer;
}

.meet-the-team__swiper-pagination{
    margin-top: 63px !important;
    position: relative;
}

/* Custom cardnstyling for this module */

.meet-the-team__card__media{
  position: relative;
  margin-bottom: 32px;
}

.meet-the-team__card__media img{
  margin-bottom: 0px;
}

.meet-the-team__card__media .meet-the-team__card__summary{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gold);
  color: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.meet-the-team__card__media:hover .meet-the-team__card__summary{
  opacity: 1;
  pointer-events: all;
}

.meet-the-team__card__summary .primary-cta{
  width: 100%;
  max-width: unset;
}

.swiper-pagination-progressbar{
    background-color: #F7F8FB !important;
}

@media screen and (max-width: 767px){
    .meet-the-team__card__media img{
        aspect-ratio: unset!important;
        min-height: 450px!important;
        max-height: 450px!important;
    }
}

@media screen and (min-width: 1440px) {
    .meet-the-team .content-wrapper{
        padding: 0;
    }
}


/*  */


.case-study-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}


@media screen and (min-width: 768px) {
    .case-study-wrapper{
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}@media screen and (min-width: 1024px) {
    .case-study-wrapper{
        gap: 56px;
    }
}


/* CARD STYLES */

.card--case-study .card__tags{
    display: flex;
    gap: 10px;
}
.card--case-study .card__tag{
    display: flex;
    gap: 10px;
    color: var(--black);
    text-transform: uppercase;
    
}
.card.card--case-study {
    background-color: #FFFFFF;
}
.card.card--case-study .card__body{
    padding: 40px 32px;
}

.card--case-study .primary-cta{
    margin-top: 28px;
}

@media screen and (min-width: 1024px) {
    .card.card--case-study .card__body{
        padding: 50px 60px;
    }   
}

/* Components */

/* Navigation skipper */

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

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

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


/* Macros */

.card-feed__title-bar {
  margin-bottom: 2.5rem;
}

.card-feed {
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2em 1.6em;
}

.card {
  border: 0;
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  padding: 0;
  flex-direction: column;
}

.card_body {
  flex: 1;
  height: 100%;
  margin-bottom: 20px;
}

.card_header {
  margin-bottom: 1rem;
}

.card_header img {
  border-radius: 10px;
}

.card_body .card_tags {
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .card-feed.card-feed__full-width {
    grid-template-columns: repeat(1, 1fr);
    gap: 2em 1.6em;
  }

  .card .card_full-width-container {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .card:not(:last-of-type) .card_full-width-container {
    border-bottom: 1px solid var(--blue);
    padding-bottom: 2em;
  }
  
  .card .card_full-width-container .card_header {
    height: 411px;
    margin-bottom: 0;
  }
  
  .card .card_full-width-container .card_header img {
    height: 100%;
    object-fit: cover;
  }
  
  .card .card_full-width-container .card_body {
    height: auto;
  }
  
  .card .card_full-width-container .card_full-width-col:last-of-type {
    padding: 2em 0;
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .card-feed__title-bar .card-feed__blog-button {
    display: none;
  }
}

/* Sections */



/* Settings */

:root {
  --white: #fff;
  --black: #000;
  --plumb: #62404E;
  --gold: #C58E34;
  --dark-gold: #76551F;
  --blue: #5F73AD;
  --grey: #D9D9D9;
  --transition: 0.5s ease-in-out;
  --blue-5: #F7F8FB;
}

html {
  scroll-behavior: smooth;
}

/* Metric-matched fallback fonts. Added 8 Oct 2026, ClickUp 869ejt2c3.

   Typekit fonts arrive after first paint, so text is laid out first in a
   system font and reflows when Aktiv/Loretta load. That reflow was most of the
   layout shift (CLS) on /products and blog posts. These faces resize a local
   system font to take the same space as the brand font, so the swap no longer
   moves anything. Once the brand fonts load, nothing here is used.

   Values measured from the Typekit font files against each system font:
   size-adjust = ratio of average glyph width; the overrides are the brand
   font's vertical metrics divided by size-adjust. Aktiv has two bands: below
   400 matches the 300 face (body text); 400 and up matches the 500 face, which
   the browser uses for any weight from 400 (the kit has only 300 and 500).
   Without the second band, large 400-weight titles wrapped one line shorter in
   the fallback and jumped 50px on swap (mobile case study CLS 0.046 -> 0.066).
   Loretta sets USE_TYPO_METRICS, so its typo metrics are used.
   Arial/Georgia cover Windows, macOS and iOS; Roboto/Noto Serif cover Android,
   which has neither. A face whose local() font is missing is skipped.
   Safari ignores the three override descriptors but applies size-adjust.

   Keep these in this file (compiled into main.css). Do not move them to
   theme-overrides.css or a module.css: the minifier there can strip the % from
   line-gap-override: 0%. */
@font-face{
  font-family: "aktiv-fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 1 399;
  size-adjust: 120.3%;
  ascent-override: 82.9%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "aktiv-fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 1000;
  size-adjust: 124.3%;
  ascent-override: 80.2%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "aktiv-fallback-android";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 1 399;
  size-adjust: 122.6%;
  ascent-override: 81.3%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "aktiv-fallback-android";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400 1000;
  size-adjust: 123.7%;
  ascent-override: 80.6%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "loretta-fallback";
  src: local("Georgia");
  size-adjust: 99%;
  ascent-override: 75.7%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "loretta-fallback-android";
  src: local("Noto Serif"), local("NotoSerif");
  size-adjust: 92.1%;
  ascent-override: 81.5%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

h1, h2, h3, h4, h5{
  font-family: "loretta-display","loretta-fallback","loretta-fallback-android",serif!important;
}

body, p, h6, a{
  font-family: 'aktiv-grotesk-extended',"aktiv-fallback","aktiv-fallback-android",sans-serif!important;
  font-weight: 300!important;
}

h6{
  font-family: 'aktiv-grotesk-extended',"aktiv-fallback","aktiv-fallback-android",sans-serif!important;
  font-weight: 500!important;
}

/* Rich text in page content carries inline font-family: aktiv-grotesk-extended
   on spans (855 found across 39 of 65 sampled pages), which bypasses the stacks
   above. Span-only on purpose: a bare [style*=] selector would also override
   the Loretta heading rule on headings that carry an inline Aktiv style. */
span[style*="aktiv-grotesk-extended"]{
  font-family: 'aktiv-grotesk-extended',"aktiv-fallback","aktiv-fallback-android",sans-serif!important;
}

/* Keep the sticky header still while scrolling. Added 8 Oct 2026, ClickUp 869ejt2c3.

   With the global header's sticky_menu setting on, the header is position:fixed
   from page load and every template already pads its content to clear it. The
   scroll handler in global-header module.js was written for a header that only
   becomes fixed on scroll: past 174px it adds 176px of padding to #main-content,
   and near the top it removes position-fixed again. Both jump the whole page,
   which counts as layout shift (measured 0.13 desktop, 0.21 mobile per scroll).

   These two rules hold the page in its load-time layout. The handler still
   toggles the .scrolled class, so the sticky logo and styling are unchanged.
   Caveat: if sticky_menu is ever switched off, remove this block, or the header
   will stay fixed and cover the top of the page. */
#main-content{
  padding-top: 0!important;
}

header.header-wrapper{
  position: fixed!important;
}

a{
  text-decoration: underline!important;
}


/* Quantity Selectors  */

.quantity__title{
    display: block;
    width: 100%;
    text-align: center;
}

.quantity__amount{
    display: flex;
    flex-direction: row;
    gap: 10px;
    border: 1px solid #BBB;
    justify-content: space-between;
    padding: 12px 8px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 24px;
}

.amount__button{
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    opacity: 1;
    padding: 0px 4px;
}

.amount__button.inactive{
    opacity: 0.2;
    cursor: not-allowed;
}

.amount__icon{
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
}

/* Utilities */

img {
  max-width: 100%;
  height: auto;
}

a,
a.button {
  transition: all 0.3s;
}

a.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

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

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

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

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.text-center {
  text-align: center;
}

.w-100 {
  width: 100%;
}

.position-fixed {
  position: fixed !important;
}

@media screen and (max-width: 767px) {
  .flex-phone {
    display: flex;
  }

  .flex-row-phone {
    flex-direction: row;
  }

  .flex-row-reverse-phone {
    flex-direction: row-reverse;
  }

  .flex-col-phone {
    flex-direction: column;
  }

  .flex-col-reverse-phone {
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .flex-row-tablet {
    flex-direction: row;
  }

  .flex-row-reverse-tablet {
    flex-direction: row-reverse;
  }

  .flex-col-tablet {
    flex-direction: column;
  }

  .flex-col-reverse-tablet {
    flex-direction: column-reverse;
  }
}

/* = box shadows -------------------- */
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

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

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

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

/* stylelint-enable declaration-no-important */