/*
Theme Name: Xirgo Global
Theme URI: http://www.xirgoglobal.com
Version: 1.0
Description: A custom theme created for Xirgo Global.
Author: Gerard Agency
Author URI: http://www.gerardagency.com
template: bb-theme
*/

/* to apply CQI font sizing to the terms and privacy page content */
#main .fl-html {
  container-type: inline-size;
}

/* chevron bullet list */
.list-chevron {
  padding-left: 0;
  list-style: none;

  & > li {
    position: relative;
    padding-inline-start: 1.25rem;

    &::before {
      position: absolute;
      top: 0.5rem;
      left: 0;
      content: " ";
      width: 0.5rem;
      height: 0.5rem;
      background: url(imgs/icon-chevron-rt.svg) no-repeat center;
    }

    & + li {
      margin-block-start: var(--cf-space-2xs);
    }
  }

  /* when used on a WP content block */
  &.wp-block-list > li::before {
    top: 0.6rem;
  }
}

.bullet-lime > li::before {
  filter: invert(71%) sepia(12%) saturate(6697%) hue-rotate(64deg)
    brightness(104%) contrast(82%);
}

.bullet-white > li::before {
  filter: invert(94%) sepia(6%) saturate(26%) hue-rotate(271deg)
    brightness(106%) contrast(104%);
}

.list-sitemap {
  columns: 300px 2;

  &:last-child {
    margin-bottom: 0;
  }
}

.list-sitemap > li {
  margin-bottom: var(--cf-space-s);
  page-break-inside: avoid;
  break-inside: avoid;
}

.list-sitemap > li > a {
  font-weight: 800;
}

.list-sitemap li li a {
  --bs-link-color-rgb: var(--bs-body-color-rgb);

  &:hover {
    --bs-link-color-rgb: var(--bs-secondary-rgb);
  }
}

.hdr-white .fl-heading,
.text-white .fl-heading {
  color: rgba(var(--bs-white-rgb), 1);
}

.text-lime,
.text-lime .fl-heading {
  color: var(--bs-brand-lime);
}

.text-kelly,
.text-kelly .fl-heading {
  color: var(--bs-brand-kelly);
}

.text-primary,
.text-primary .fl-heading {
  color: var(--bs-primary);
}

.text-aqua,
.text-aqua .fl-heading {
  color: var(--bs-brand-aqua);
}

.text-brand-blue,
.text-brand-blue .fl-heading {
  color: var(--bs-brand-blue);
}

.text-secondary,
.text-secondary .fl-heading {
  color: var(--bs-secondary);
}

a,
a:visited {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  transition: color var(--transition);

  &:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  }

  &.text-link {
    --bs-link-color-rgb: var(--bs-body-color-rgb);

    &:hover {
      --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    }
  }
}

/* undo .stretched-link when using BeaverBuilder */
html.fl-builder-edit .stretched-link::after {
  position: relative;
  z-index: unset;
}

/* don't hide text when in BB */
html.fl-builder-edit a:not(.fl-accordion-button-icon) .sr-only {
  position: relative;
  width: unset;
  height: unset;
  padding: 0;
  margin: unset;
  overflow: unset;
  clip: unset;
  white-space: unset;
}

.callout {
  background-color: rgba(var(--bs-light-rgb), 1);
  padding: var(--cf-space-xs) var(--cf-space-m);
}

/* icon things =========================================== */
.fl-builder-content .fl-button i:has(+ .fl-button-text > .sr-only) {
  margin-right: 0; /* when a button with an icon has screen reader copy only, get rid of the margin */
}
/* END icon things --------------------------------------- */

/* Components */
/* START buttons ========================================= */

/* make default BB match BS */
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
  -moz-border-radius: unset;
  -webkit-border-radius: unset;
  border-radius: var(--bs-btn-border-radius);
  display: inline-block;
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  text-decoration: none;
  text-shadow: none;
}

a.fl-button:hover,
.fl-builder-content a.fl-button:hover {
  color: var(--bs-btn-hover-color);
  background: var(--bs-btn-hover-bg);
}

/* override the link inner element that BB creates */
.bb-btn a.fl-button,
.bb-btn a.fl-button:visited,
.bb-btn a.fl-button:hover {
  & > .fl-button-text {
    color: inherit;
  }
}

/* override the default and hover text color for secondary buttons */
.fl-builder-content .bb-btn-secondary a {
  --bs-btn-color: var(--bs-btn-secondary-color);
  --bs-btn-hover-color: var(--bs-btn-secondary-hover-color);
}

/* override the hover text color for secondary outline buttons */
.fl-builder-content .bb-btn-outline-secondary a {
  --bs-btn-color: var(--bs-btn-outline-secondary-color);
  --bs-btn-hover-color: var(--bs-btn-outline-secondary-hover-color);
}

/* override the BB menu module it putting default padding on link items, this is really dumb */
[class*="fl-node-"] .menu .bb-btn a {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

/* button ghost ------------------------------- */
.fl-builder-content .bb-btn-ghost a.fl-button,
.fl-builder-content .bb-btn-ghost a.fl-button:visited {
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.35);
}

.fl-builder-content .bb-btn-ghost-primary a.fl-button,
.fl-builder-content .bb-btn-ghost-primary a.fl-button:visited {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary-700);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.25);

  & .fl-button-icon {
    color: inherit;
  }
}

.fl-builder-content .bb-btn-ghost-secondary a.fl-button,
.fl-builder-content .bb-btn-ghost-secondary a.fl-button:visited {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-secondary-700);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.25);

  & .fl-button-icon {
    color: inherit;
  }
}

.fl-builder-content #site-header .bb-btn-ghost a.fl-button,
.fl-builder-content #site-header .bb-btn-ghost a.fl-button:visited {
  --bs-btn-padding-y: var(--cf-space-3xs);
  --bs-btn-padding-x: var(--bs-btn-padding-y);
}

/* button text variation, animated icon or underline --------------- */
.fl-builder-content .bb-btn-link a.fl-button,
.fl-builder-content .bb-btn-link a.fl-button:visited {
  --bs-btn-font-weight: 800;
  display: inline-flex;
  position: relative;
}

/* text button with an icon on the right */
.fl-builder-content .bb-btn-link-icon-rt .fl-button i.fl-button-icon-after {
  transition: margin-left var(--transition);
}

/* text button with an icon on the left */
.fl-builder-content .bb-btn-link-icon-lft .fl-button i.fl-button-icon-before {
  transition: margin-right var(--transition);
}

.fl-builder-content
  .bb-btn-link-icon-rt
  .fl-button:hover
  i.fl-button-icon-after {
  --me: 8px;
  margin-left: calc(var(--me) * 2);
}

.fl-builder-content
  .bb-btn-link-icon-lft
  .fl-button:hover
  i.fl-button-icon-before {
  --me: 8px;
  margin-right: calc(var(--me) * 2);
}

/* primary menu phone icon link */
.fl-builder-content .menu-item.bb-btn-link-dark a {
  color: rgba(var(--bs-body-rgb), 1);

  & strong {
    font-weight: 900;
  }

  &:hover {
    --bs-link-color-rgb: var(--bs-toplevel-link-hover-color-rgb);

    color: rgba(var(--bs-link-color-rgb), 1);
  }
}

.fl-builder-content .menu-item.bb-btn-link-icon-lft a i.fl-button-icon-before {
  --me: 0.25em;
  margin-inline-end: calc(var(--me) * 2);
}

.fl-builder-content .bb-btn-link-underline .fl-button-text {
  --bs-btn-pe: 0.5rem;
  padding-bottom: var(--bs-btn-pe);
  position: relative;
}

.fl-builder-content .bb-btn-link-underline .fl-button-text:after {
  content: " ";
  height: 1px;
  display: block;
  width: 0;
  background-color: var(--bs-btn-color);
  transition: width var(--transition);
  position: absolute;
  bottom: 0;
  left: 0;
}

.fl-builder-content
  .bb-btn-link-underline
  .fl-button:hover
  .fl-button-text:after {
  width: 100%;
  background-color: var(--bs-btn-hover-color);
}

/* END buttons --------------------------------------- */

/* START tabs ======================================== */
.fl-tabs-labels {
  container-type: inline-size;
}

.fl-page-content .fl-tabs-label {
  --bs-link-color-rgb: var(--bs-body-color-rgb);
  font-size: var(--cf-text-s);
  text-transform: uppercase;
  font-weight: 800;
  padding: var(--cf-space-xs) var(--cf-space-s);

  &:hover {
    --bs-link-color-rgb: var(--bs-secondary-rgb);
  }
}

@supports (font-size: 1cqi) {
  .fl-page-content .fl-tabs-label {
    font-size: var(--cf-text-cqi-m);
  }
}

.fl-tabs-panel-content {
  padding: var(--cf-space-s);
}
/* END tabs ------------------------------------------ */

/* START accordion =================================== */
.fl-module-accordion {
  --border-width: 1px;
}

.fl-accordion-button {
  container-type: inline-size;
}

.fl-module-accordion .fl-accordion-item {
  border-top: var(--border-width) solid
    rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  border-bottom: var(--border-width) solid
    rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}

.fl-module-accordion .fl-accordion-item + .fl-accordion-item {
  margin-block-start: calc(var(--border-width) * -1);
}

.fl-accordion-small .fl-accordion-button {
  padding: var(--cf-space-2xs) 0;
}

.fl-page-content .fl-accordion-button-label {
  font-size: var(--cf-text-s);
  text-transform: uppercase;
  font-weight: 800;
}

@supports (font-size: 1cqi) {
  .fl-page-content .fl-accordion-button-label {
    font-size: var(--cf-text-cqi-s);
  }
}

.fl-accordion-small .fl-accordion-content {
  padding: 0 0 var(--cf-space-2xs) 0; /* 0 var(--cf-space-s) var(--cf-space-2xs) var(--cf-space-s) */
}

.fl-accordion-content {
  /* img-w setup here: https://www.fluid-type-scale.com/calculate?minFontSize=50&minWidth=340&minRatio=1.25&maxFontSize=160&maxWidth=1400&maxRatio=1.414&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=fs&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
  --img-w: clamp(3.13rem, 10.38vi + 0.92rem, 10rem);
  --img-w-sm: clamp(2.5rem, 6.9vi + 1.03rem, 7.07rem);
  --img-h: var(--img-w);
  --img-p: var(--cf-space-2xs);
  --img-offset: calc(var(--img-w) + var(--img-p));
  container-type: inline-size;
}

.fl-page-content .fl-accordion-button-label:hover {
  text-decoration: none;
}

.fl-accordion-button-icon-left,
.fl-accordion-button-icon-right {
  opacity: 1;
}

/* setup for the floating product image / layout in accordion content */
.fl-accordion-content .ftr-prod-img {
  /* float: left;
  padding-right: var(--cf-space-s); */
  width: var(--img-w);
  height: auto;
}

@media (max-width: 991px) {
  .fl-accordion-content .ftr-prod-img {
    display: none;
  }
}

.fl-accordion-content p:has(.ftr-prod-img) {
  margin-bottom: 0;
  float: left;
  padding-right: var(--cf-space-s);
  width: var(--img-w);
  text-align: center;
}

@media (min-width: 992px) {
  .fl-accordion-content p:has(.ftr-prod-img) + h4,
  .fl-accordion-content p:has(.ftr-prod-img) + h4 + p {
    margin-inline-start: var(--img-offset);
  }
}

/* END accordion -------------------------------------- */

/* START block title pointer ========================== */
.block-title-pointer > .fl-module-heading:first-child {
  display: flex;
  column-gap: var(--cf-space-xs);

  & > .fl-module-content {
    flex-grow: 1;
  }
}

.block-title-pointer > .fl-module-heading:first-child::before {
  background: url("imgs/icon-chevron-rt.svg") no-repeat center;
  font-size: var(--cf-text-2xl);
  width: var(--cf-text-2xl);
  height: var(--cf-text-2xl);
  display: flex;
  align-items: center;
}

/* adjusting SVG color using filters. Filter maker: https://codepen.io/sosuke/pen/Pjoqqp */
.icon-lime > .fl-module-heading:first-child::before {
  filter: invert(71%) sepia(12%) saturate(6697%) hue-rotate(64deg)
    brightness(104%) contrast(82%);
}

.icon-white > .fl-module-heading:first-child::before {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
    contrast(103%);
}

.block-title-pointer > .fl-module:not(:first-child) {
  margin-left: var(--cf-text-2xl);
  padding-left: var(--cf-space-xs);
}

/* END block title pointer ---------------------------- */

/* START forms (gravity forms plugin specific) =========================== */
body .gform-theme--api,
body .gform-theme--framework {
  --gf-ctrl-btn-radius: 50rem;
  --gf-ctrl-btn-border-color-primary: var(--bs-primary);
  --gf-ctrl-btn-border-width-primary: 2px;
  --gf-ctrl-btn-font-weight: 700;

  --gf-ctrl-btn-padding-x-lg: var(--cf-space-l);
  --gf-ctrl-btn-padding-x-xl: var(--cf-space-xl);
  --gf-ctrl-btn-padding-y-xs: var(--cf-space-2xs);

  --gf-ctrl-btn-font-size-md: var(--cf-text-m);
  --gf-ctrl-btn-font-size-sm: var(--cf-text-s);
  --gf-ctrl-btn-text-transform: uppercase;
  --gf-ctrl-btn-bg-color-hover-primary: var(--bs-primary);
  --gf-ctrl-btn-color-hover-primary: var(--bs-white);
}

body #gform_wrapper_2[data-form-index="0"].gform-theme,
body #gform_wrapper_3[data-form-index="0"].gform-theme,
body #gform_wrapper_4[data-form-index="0"].gform-theme,
body #gform_wrapper_5[data-form-index="0"].gform-theme,
body #gform_wrapper_6[data-form-index="0"].gform-theme,
body #gform_wrapper_7[data-form-index="0"].gform-theme,
body #gform_wrapper_8[data-form-index="0"].gform-theme,
body #gform_wrapper_9[data-form-index="0"].gform-theme,
body #gform_wrapper_10[data-form-index="0"].gform-theme,
body #gform_wrapper_11[data-form-index="0"].gform-theme,
body #gform_wrapper_12[data-form-index="0"].gform-theme {
  --gf-color-primary: var(--bs-white);
  --gf-color-primary-contrast: var(--bs-primary);
  --gf-ctrl-btn-font-size: var(--gf-ctrl-btn-font-size-sm);
  --gf-ctrl-btn-padding-y: var(--gf-ctrl-btn-padding-y-xs);
  --gf-ctrl-btn-padding-x: var(--gf-ctrl-btn-padding-x-lg);
  --gf-ctrl-border-color: var(--bs-border-color);
  --gf-radius: var(--bs-border-radius);
}

/* for some reason, the various source variables are not successfully being overidden - i think the way the plugin creates the initial vars is to blame */
.gform-theme--framework .gfield_list_group_item,
.gform-theme--framework .gform-field-label {
  --gf-local-font-size: var(--cf-text-m);
  --gf-local-line-height: var(--bs-body-line-height);
  --gf-local-color: var(--bs-body-color);
  --gf-local-margin-y: 0 var(--cf-space-3xs);
}

.gform-theme--framework .gform-field-label.gform-field-label--type-sub,
.gform-theme--framework .gfield_description {
  --gf-local-font-size: var(--cf-text-s);
  --gf-local-line-height: var(--bs-body-line-height);
  --gf-local-color: var(--bs-body-color);
  --gf-local-margin-y: 0 var(--cf-space-3xs);
}

/* like the above, but highlighted for error purposes */
.gform-theme--framework
  .gfield_validation_message:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ) {
  --gf-local-color: var(--bs-form-invalid-color);
  font-style: italic;
}

/* form fields */
.gform-theme--framework
  input[type]:where(:not(.gform-text-input-reset):not([type="hidden"])):where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  select:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  select[multiple]:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  textarea:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ) {
  --gf-local-font-size: var(--cf-text-m);
  --gf-local-line-height: var(--bs-body-line-height);
  --gf-local-color: var(--bs-body-color);
  --gf-local-bg-color: var(--bs-body-bg);
  --gf-local-height: unset;
  --gf-local-radius: var(--bs-border-radius);
  --gf-local-border-color: var(--bs-border-color);
  --gf-local-border-width: var(--bs-border-width);
  --gf-local-padding-x: var(--cf-space-xs);
  --gf-local-padding-y: var(--cf-space-3xs);
  --gf-local-shadow: none;
}

/* input: error */
.gform-theme--framework
  .gfield_error
  .gform-theme-field-control:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  .gfield_error
  input[type]:where(:not(.gform-text-input-reset):not([type="hidden"])):where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  .gfield_error
  select:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  .gfield_error
  select[multiple]:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework
  .gfield_error
  textarea:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ) {
  --gf-local-bg-color: var(--bs-body-bg);
  --gf-local-border-color: var(--bs-form-invalid-border-color);
  --gf-local-color: var(--bs-body-color);
}

/* error message box */
.gform-theme--framework .gform_validation_errors {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-form-invalid-border-color);
  border-radius: var(--gf-form-validation-radius);
  box-shadow: none;
  gap: var(--cf-space-xs);
  margin-block: var(--cf-space-m);
  padding-block: var(--cf-space-m);
  padding-inline: var(--cf-space-m);
}

.gform-theme--framework .gform_validation_errors .gform_submission_error,
.gform-theme--framework .gform_validation_errors ol,
.gform-theme--framework .gform_validation_errors ol a,
.gform-theme--framework .gform_validation_errors .gform-icon {
  color: var(--bs-form-invalid-color);
}

/* form buttons */
.gform-theme.gform-theme--framework.gform_wrapper
  .button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ),
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]).button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ),
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]):where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ),
.gform-theme.gform-theme--framework.gform_wrapper
  input[type="submit"].button.gform_button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ) {
  --btn-color: rgba(var(--bs-primary-rgb), 1);
  --btn-color-2: rgba(var(--bs-white-rgb), 1);

  --gf-local-font-size: var(--cf-text-m);
  --gf-local-line-height: var(--bs-body-line-height);
  --gf-local-bg-color: var(--btn-color);
  --gf-local-radius: var(--bs-border-radius);
  --gf-local-border-color: var(--btn-color);
  --gf-local-border-width: var(--bs-border-width);
  --gf-local-color: var(--btn-color-2);
  --gf-local-font-weight: 400;

  --gf-local-padding-y: var(--cf-space-xs);
  --gf-local-padding-x: var(--cf-space-l);

  transition: all var(--transition);
  text-transform: uppercase;
}

/* gravity form button hover */
.gform-theme.gform-theme--framework.gform_wrapper
  .button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):hover,
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]).button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):hover,
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]):where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):hover,
.gform-theme.gform-theme--framework.gform_wrapper
  input[type="submit"].button.gform_button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):hover {
  --gf-local-bg-color: rgba(var(--bs-primary-rgb), 0.5);
  --gf-local-shadow: none;
  --gf-local-color: var(--btn-color-2);
}

.gform-theme.gform-theme--framework.gform_wrapper
  .button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):focus,
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]).button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):focus,
.gform-theme.gform-theme--framework.gform_wrapper
  input:is([type="submit"], [type="button"], [type="reset"]):where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):focus,
.gform-theme.gform-theme--framework.gform_wrapper
  input[type="submit"].button.gform_button:where(
    :not(.gform-theme-no-framework):not(.gform-theme__disable):not(
        .gform-theme__disable *
      ):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ):focus {
  --gf-local-bg-color: rgba(var(--bs-primary-rgb), 1);
  --gf-local-border-color: rgba(var(--bs-primary-rgb), 1);
  --gf-local-shadow: none;
  --gf-local-color: var(--btn-color-2);
  --gf-local-outline-color: rgba(var(--bs-primary-rgb), 0.65);
}

.gform-theme--foundation .gform_footer,
.gform-theme--foundation .gform_page_footer {
  margin-block-start: var(--cf-space-m);
}

/* borrow BS5 trickery for 2col form fields */
.gc-row .ginput_container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));

  & > * {
    flex: 1 0 0%;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
  }
}

.gc-row-2col .ginput_container > * {
  flex: 0 0 auto;
  width: 50%;
}

@media (max-width: 767px) {
  .gc-smo-rowgap-2 .ginput_container {
    row-gap: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  .gc-smo-rowgap-3 .ginput_container {
    row-gap: 1rem;
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .gc-md-row .ginput_container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));

    & > * {
      flex: 1 0 0%;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5);
      margin-top: var(--bs-gutter-y);
    }
  }

  .gc-md-row-2col .ginput_container > * {
    flex: 0 0 auto;
    width: 50%;
  }
}

.gc-gx-3 .ginput_container {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
}

/* END forms (graivty forms plugin specific) ----------------------------- */

/* Main Content Sections + Beaver Builder specific */
.sctn-my {
  margin-block-start: var(--cf-section-my);
  margin-block-end: var(--cf-section-my);
}

main .fl-builder-content-primary > section:not([class*="bgc-"], [class*="bgg-"], [class*="bgi-"], .sctn-fluid-fixed).fl-row-bg-none,
#fl-main-content > .fl-builder-content > section:not([class*="bgc-"], [class*="bgg-"], [class*="bgi-"], [class*="hero-sub"]).fl-row-bg-none /* single post */ {
  margin-block-start: var(--cf-section-my);
  margin-block-end: var(--cf-section-my);
}

.sctn-ms {
  margin-block-start: var(--cf-section-my);
}

.sctn-me {
  margin-block-end: var(--cf-section-my);
}

@media (max-width: 767px) {
  .sctn-smo-ms {
    margin-block-start: var(--cf-section-py);
  }
}

@media (max-width: 991px) {
  .sctn-mdo-ms {
    margin-block-start: var(--cf-section-py);
  }
}

.sctn-py {
  padding-block-start: var(--cf-section-py);
  padding-block-end: var(--cf-section-py);
}

.sctn-py-m {
  padding-block-start: var(--cf-section-py-m);
  padding-block-end: var(--cf-section-py-m);
}

main
  .fl-builder-content-primary
  > section:where([class*="bgc-"], [class*="bgg-"], [class*="bgi-"]):not(
    .sctn-fluid-fixed,
    .sctn-fluid-fixed
  )
  > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py);
  padding-block-end: var(--cf-section-py);
}

.rcw-py > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py);
  padding-block-end: var(--cf-section-py);
}

.rcw-py-m > .fl-row-content-wrap,
#fl-main-content
  > article
  > .fl-builder-content-primary
  > .fl-row.rcw-py-m
  > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py-m);
  padding-block-end: var(--cf-section-py-m);
}

.sctn-ps {
  padding-block-start: var(--cf-section-py);
}

@media (max-width: 767px) {
  .sctn-smo-ps {
    padding-block-start: var(--cf-section-py);
  }
}

@media (max-width: 991px) {
  .sctn-mdo-ps {
    padding-block-start: var(--cf-section-py);
  }
}

.rcw-ps > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py);
}

.rcw-ps-0 > .fl-row-content-wrap {
  padding-block-start: 0 !important;
}

.sctn-pe {
  padding-block-end: var(--cf-section-py);
}

.rcw-pe > .fl-row-content-wrap {
  padding-block-end: var(--cf-section-py);
}

@media (min-width: 768px) and (max-width: 991px) {
  .neg-mdlg-space-m {
    margin-inline-start: var(--cf-neg-space-m);
    margin-inline-end: var(--cf-neg-space-m);
  }
}

/* START section titles ====================== */
.sctn-hdr:not(:only-child) {
  margin-block-end: var(--cf-gutter-y);
}

.sctn-hdr:not(.text-start, .text-end, .sctn-prod-hdr) > .fl-module-box {
  text-align: center;
}

@media (min-width: 992px) {
  .sctn-hdr > .fl-module-box {
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  /* hdr-custom-width assumes 100% width by default, but doesn't set it explicitly, so it can be set manually in BB */
  .sctn-hdr:not(.hdr-custom-width, .sctn-prod-hdr) > .fl-module-box {
    width: 83.333%;
  }
}

@media (min-width: 1200px) {
  .sctn-hdr:not(.hdr-custom-width, .sctn-prod-hdr) > .fl-module-box {
    width: 75%;
  }
}

.sctn-content-grid .sctn-content {
  row-gap: var(--cf-gutter-y);
  column-gap: var(--cf-gutter-x);
}

/* START sections, flex based ============================ */
/* add row gap between section-title (section-header) and section-content */
.sctn-content-flex > .fl-row-content-wrap > .fl-row-content > .fl-module-box {
  display: flex !important;
  flex-wrap: wrap;
  /* offset the space caused by child column padding */
  margin-left: var(--cf-flex-gutter-x-offset);
  margin-right: var(--cf-flex-gutter-x-offset);
  row-gap: var(--cf-gutter-y); /* space above and below child boxes */
}

.modbox-child-flex {
  display: flex !important;
  flex-wrap: wrap;
  /* offset the space caused by child column padding */
  margin-left: calc(var(--cf-flex-gutter-x-offset) * 1.5) !important;
  margin-right: calc(var(--cf-flex-gutter-x-offset) * 1.5) !important;
  row-gap: var(--cf-gutter-y); /* space above and below child boxes */

  &.my-s-xs {
    margin-block-start: var(--cf-space-xs) !important;
  }
}

/* flex child padding to create columns */
.modbox-child-flex > .fl-module-box,
.sctn-content-flex
  > .fl-row-content-wrap
  > .fl-row-content
  > .fl-module-box
  > .fl-module-box {
  flex: 0 0 auto;
  max-width: 100%;
  padding-inline-start: var(--cf-flex-gutter-x);
  padding-inline-end: var(--cf-flex-gutter-x);
}

/* i don't like this - but the alternative is to add a spacing class on the image module */
.sctn-content:not(.content-thumbs, .content-cards)
  > .fl-module-box
  > .fl-module-photo
  + .fl-module {
  padding-block-start: var(--cf-space-s);
}

.content-thumbs > .fl-module-box {
  gap: var(--cf-gutter-x);
}

/* START the left and right sections that are fixed and fluid, aka one column is fluid and one is fixed */
/* typically, the fluid column is an image. The fixed column contains text content, the fixed aspect allowing the left or right edge to align to other sections */
.sctn-fluid-fixed {
  /* using "base" from this calc: https://www.fluid-type-scale.com/calculate?minFontSize=350&minWidth=768&minRatio=1.25&maxFontSize=600&maxWidth=1400&maxRatio=1.414&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=fs&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
  --photo-height: clamp(21.88rem, 39.56vi + 2.89rem, 37.5rem);

  & .photo-col {
    flex: 0 0 auto;
  }

  & .fl-photo-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  & .photo-col:first-child .fl-photo-content {
    text-align: end;
  }

  & .photo-col:last-child .fl-photo-content {
    text-align: start;
  }

  & .content-col {
    flex: 0 0 auto;
    padding: var(--cf-section-py);

    &:first-child {
      margin-inline-start: auto;
    }

    & .fl-module-rich-text:last-child .fl-rich-text > *:last-child {
      margin-bottom: 0 !important;
    }
  }
}

@media (min-width: 768px) {
  .sctn-fluid-fixed .fl-photo-img {
    min-height: var(
      --photo-height
    ); /* should we split columns at this breakpoint */
    object-fit: cover;
  }

  .sctn-fluid-fixed .photo-col:first-child .fl-photo-img {
    /* set object position to the far right, when the photo col is the first child */
    object-position: 100% 0;
  }

  .sctn-fluid-fixed .photo-col:last-child .fl-photo-img {
    /* set object position to the far right, when the photo col is the first child */
    object-position: 0% 0;
  }
}

/* set the content-col width to imply an alignment with surrounding sections having fixed width containers */
@media (min-width: 992px) {
  .sctn-fluid-fixed .content-col {
    max-width: 480px;
  }
}

@media (min-width: 1200px) {
  .sctn-fluid-fixed .content-col {
    max-width: 570px;
  }
}

@media (min-width: 1400px) {
  .sctn-fluid-fixed .content-col {
    max-width: 660px;
  }

  .sctn-fluid-fixed .content-col:first-child {
    padding-inline-start: 0;
  }

  .sctn-fluid-fixed .photo-col + .content-col {
    padding-inline-end: 0;
  }
}

/* section footer */
.sctn-ftr .fl-module-heading .fl-heading {
  margin-bottom: 0 !important;
}

.fl-module + .sctn-ftr:last-child {
  margin-block-start: var(--cf-section-my);
}

@media (max-width: 767px) {
  /* force an image resize on mobile */
  .img-smo-resize {
    --img-ht: clamp(
      18.75rem,
      calc(18.75rem + ((1vw - 0.234375rem) * 51.0204)),
      31.25rem
    );

    & .fl-photo-img {
      min-height: var(--img-ht);
      width: auto;
      object-fit: cover;
    }

    &.img-smo-resize-rt .fl-photo-img {
      object-position: -10%;
    }
  }

  /* when the photo column is after the content column in the source ... */
  .content-col + .photo-col .img-smo-resize .fl-photo-img {
    object-position: -10%;
  }
}

/* END fixed / fluid sections ---------------------------------------- */

/* START product item sections ======================================= */
.sctn-prod-hdr {
  flex-wrap: nowrap !important; /* odd, otherwise this is very tall */
  margin-block-end: var(--cf-space-l) !important;

  & .fl-heading {
    margin-bottom: 0 !important;
    color: var(--bs-primary);
  }
}

/* remove top margin on every section that contains a prod-item because that section also has a bg gradient at the top */
main
  .fl-builder-content-primary
  > section.fl-row.sctn-content-flex.fl-row-bg-none.sctn-content-prod-lftrt {
  margin-block-start: 0;
}

/* add gradient overlay automagically to sections that have prod-item rows */
/* don't show gradient top within BB */
html:not(.fl-builder-edit)
  section.fl-row.sctn-content-flex.sctn-content-prod-lftrt {
  position: relative;

  & .fl-row-content-wrap {
    padding-block-start: var(--cf-section-py);
    position: relative;
    z-index: 1;
  }

  &::after {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    height: calc(var(--cf-section-py) + var(--cf-space-xl));
    content: "";
    background: linear-gradient(
      180deg,
      rgba(var(--bs-brand-lime-rgb), 0.35) 0%,
      rgba(var(--bs-brand-lime-rgb), 0) 100%
    );
  }
}

/* NOTE: .sctn-prod-item is NOT assigned to the <section>, but rather the .fl-module-box "row" */
.sctn-content-prod-lftrt .sctn-content + .sctn-content {
  margin-block-start: var(--cf-section-my);
  border-block-start: 5px solid var(--bs-brand-lime);
  padding-block-start: var(--cf-section-py);
}

.sctn-content-prod-lftrt .sctn-content .bb-btn-link + .fl-module-accordion {
  margin-block-start: var(--cf-space-m);
}

.sctn-content-prod-lftrt
  .sctn-content
  .fl-module-heading:where(.prod-title, .prod-subtitle)
  .fl-heading {
  margin-bottom: 0 !important;
}

.sctn-content-prod-lftrt .sctn-content .fl-module-heading + .prod-blurb {
  margin-block-start: var(--cf-space-xs);
}

.sctn-content-prod-lftrt .sctn-content .prod-blurb:has(+ .fl-module-button) {
  margin-block-end: var(--cf-space-m);

  & .fl-rich-text > *:last-child {
    margin-bottom: 0;
  }
}

.sctn-content-prod-lftrt .sctn-content .fl-module-button + .fl-module-button {
  margin-block-start: var(--cf-space-3xs);
}
/* END product item sections ----------------------------------------- */

/* START section style variations ==================================== */
/* bgc = BackGround Color */
.bgc-gray {
  background-color: var(--bs-gray-100);
}

.bgc-brand-gray {
  background-color: var(--bs-brand-gray);
  color: var(--bs-white);

  & .content-cards {
    --bs-card-bg: transparent;
    --bs-card-border-color: rgba(
      255,
      255,
      255,
      0.15
    ); /* dark mode variation of the default border color */
  }
}

.fl-page-content .bgc-brand-gray .fl-accordion-button-label,
.fl-page-content .bgc-brand-gray .fl-accordion-button-icon {
  --bs-link-color-rgb: var(--bs-white-rgb);

  &:hover {
    --bs-link-color-rgb: var(--bs-secondary-rgb);
  }
}

/* auto color the icon pointer when using a brand-gray background */
.bgc-brand-gray .block-title-pointer > .fl-module-heading:first-child::before {
  filter: invert(71%) sepia(12%) saturate(6697%) hue-rotate(64deg)
    brightness(104%) contrast(82%);
}

.bgc-brand-gray-550 {
  background-color: var(--bs-brand-gray-550);
}

.bgc-pale-aqua {
  background-color: var(--bs-brand-pale-aqua);
}

.bgc-aqua {
  background-color: var(--bs-brand-aqua);
}

.fl-builder-content .bgc-aqua .bb-btn-link a.fl-button,
.fl-builder-content .bgc-aqua .bb-btn-link a.fl-button:visited {
  --bs-btn-color: rgba(var(--bs-white-rgb), var(--bs-link-opacity, 1));
}

.fl-builder-content .bgc-aqua a,
.fl-builder-content .bgc-aqua a:visited {
  --bs-link-color-rgb: var(--bs-white-rgb);

  &:hover {
    --bs-link-color-rgb: var(--bs-white-rgb);
  }
}

/* exact match for the homepage section example */
.bgc-pale-lime {
  background-color: var(--bs-brand-lime-033);
}

.bgc-brand-lime,
.bgc-lime {
  background-color: var(--bs-brand-lime);
}

.fl-page-content .bgc-lime .fl-accordion-button-label,
.fl-page-content .bgc-lime .fl-accordion-button-icon {
  &:hover {
    --bs-link-color-rgb: var(--bs-white-rgb);
  }
}

.fl-builder-content .bgc-lime .bb-btn-link a.fl-button,
.fl-builder-content .bgc-lime .bb-btn-link a.fl-button:visited {
  --bs-btn-color: rgba(var(--bs-white-rgb), var(--bs-link-opacity, 1));
  --bs-btn-hover-color: rgba(
    var(--bs-body-color-rgb),
    var(--bs-link-opacity, 1)
  );
}

.fl-builder-content .bgc-lime a,
.fl-builder-content .bgc-lime a:visited {
  --bs-link-color-rgb: var(--bs-white-rgb);

  &:hover {
    --bs-link-color-rgb: var(--bs-white-rgb);
  }
}

/* auto color the icon pointer (to white) when using a lime background */
.bgc-lime .block-title-pointer > .fl-module-heading:first-child::before {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
    contrast(103%);
}

/* bgg = BackGround Gradient -------------------------- */
.bgg-aqua {
  background: linear-gradient(
    180deg,
    rgba(var(--bs-brand-aqua-100-rgb), 1) 0%,
    rgba(var(--bs-brand-aqua-rgb), 1) 50%
  );
}

.fl-builder-content .bgg-aqua .bb-btn-link a.fl-button,
.fl-builder-content .bgg-aqua .bb-btn-link a.fl-button:visited {
  --bs-btn-color: rgba(var(--bs-white-rgb), var(--bs-link-opacity, 1));
}

.fl-builder-content .bgg-aqua a,
.fl-builder-content .bgg-aqua a:visited {
  --bs-link-color-rgb: var(--bs-body-color-rgb);
  text-decoration: underline;

  &:hover {
    --bs-link-color-rgb: var(--bs-white-rgb);
  }
}

/* bggo = BackGround Gradient Overlay */
/* something here prevents access to content within the <section> when using BB */
/* by assigning this to only show when not in BB edit mode the downside is we won't see it apply in BB preview */
html:not(.fl-builder-edit) .bggo-lime-overlay {
  position: relative;

  & .fl-row-content-wrap {
    position: relative;
    z-index: 1;
  }

  &.fl-row-bg-none {
    & .fl-row-content-wrap {
      padding-block-start: var(--cf-section-py);
    }
  }
}

main .fl-builder-content-primary > section.bggo-lime-overlay.fl-row-bg-none {
  margin-block-start: 0; /* let other manually added section style classes manage the end padding */
}

html:not(.fl-builder-edit) .bggo-lime-overlay::after {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  height: calc(var(--cf-section-py) + var(--cf-space-xl));
  content: "";
  background: linear-gradient(
    180deg,
    rgba(var(--bs-brand-lime-rgb), 0.35) 0%,
    rgba(var(--bs-brand-lime-rgb), 0) 100%
  );
}

.rcw-arrowsduo .fl-row-content-wrap {
  background-image: url("imgs/bg-angles-bleed-rt.svg");
  background-repeat: no-repeat;
}

.rcw-rt-30 .fl-row-content-wrap {
  background-position: right top;
  background-size: auto 30%;
}

.rcw-rt10-30 .fl-row-content-wrap {
  background-position: right 10%;
  background-size: auto 30%;
}

@media (min-width: 768px) {
  .rcw-md-rc-sz30 .fl-row-content-wrap {
    background-position: right center;
    background-size: auto 30%;
  }

  .rcw-md-rt-sz50 .fl-row-content-wrap {
    background-position: right top;
    background-size: auto 50%;
  }
}

@media (min-width: 1200px) {
  .rcw-xl-rt-sz70 .fl-row-content-wrap {
    background-position: right top;
    background-size: auto 70%;
  }
}

/* END section style variations -------------------------------------- */

/* cards */
.cards-eqht .card {
  height: 100%;
}

.card .fl-rich-text > *:last-child {
  margin-bottom: 0;
}

/* .content-cards is applied to column parent, each column also has a wrapper box module */
.content-cards,
.content-imgoverlay-cards,
.imgoverlay-card {
  --bs-card-spacer-y: var(--cf-space-s);
  --bs-card-spacer-x: var(--cf-space-s);
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: 1rem; /* var(--bs-border-radius) */
  --bs-card-inner-border-radius: calc(
    var(--bs-card-border-radius) - var(--bs-border-width)
  );
}

.content-imgoverlay-cards,
.imgoverlay-card {
  --bs-card-border-width: 0;
  --bs-card-color: var(--bs-white);
  color: var(--bs-card-color);
}

.content-cards .fl-photo-img {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.content-imgoverlay-cards .fl-photo-img,
.imgoverlay-card .fl-photo-img {
  border-radius: var(--bs-card-inner-border-radius);
}

/* posts module */
.content-cards > .fl-module-post-grid .fl-post-grid,
.content-imgoverlay-cards > .fl-module-post-grid .fl-post-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--cf-gutter-y);
}

.content-cards > .fl-module-box > .fl-module-box, /* standard box module setup */
.content-imgoverlay-cards > .fl-module-box > .fl-module-box {
  background-color: var(--bs-card-bg);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  height: 100%;
}

.content-cards.content-cards-4-3 > .fl-module-box > .fl-module-box {
  aspect-ratio: 4/3;
}

.imgoverlay-card {
  background-color: transparent;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);

  & + .fl-module {
    margin-block-start: var(--cf-space-m);
    text-align: center;
  }
}

.content-cards > .fl-module-box > .fl-module-box .fl-photo-content {
  --bs-card-border-radius: 0.8rem;
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

.content-imgoverlay-cards > .fl-module-box > .fl-module-box,
.imgoverlay-card {
  position: relative;
}

/* posts module */
.content-cards > .fl-module-post-grid .fl-post-grid-post,
.content-imgoverlay-cards > .fl-module-post-grid .fl-post-grid-post {
  background-color: var(--bs-card-bg);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  height: 100%;
}

/* posts module */
.content-cards > .fl-module-post-grid .fl-post-column,
.content-imgoverlay-cards > .fl-module-post-grid .fl-post-column {
  float: none;
  padding-inline-start: var(--cf-flex-gutter-x);
  padding-inline-end: var(--cf-flex-gutter-x);
}

.content-cards
  > .fl-module-box
  > .fl-module-box
  > .fl-module:last-child
  .fl-rich-text
  > *:last-child,
.content-imgoverlay-cards
  > .fl-module-box
  > .fl-module-box
  > .fl-module:last-child
  .fl-rich-text
  > *:last-child,
.imgoverlay-card > .fl-module:last-child .fl-rich-text > *:last-child {
  margin-bottom: 0;
}

.content-imgoverlay-cards .card-content-wrap,
.imgoverlay-card .card-content-wrap {
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 1);

  & .fl-heading {
    margin-bottom: 0 !important;
  }
}

/* hover effects */
.content-imgoverlay-cards > .fl-module-box,
html:not(.fl-builder-edit) .imgoverlay-card {
  & .fl-heading {
    transition: transform var(--transition);
  }

  &:hover {
    & .fl-heading {
      transform: scale(1.125, 1.125);
    }
  }
}

/* posts grid content padding */
.content-cards .card-content-wrap,
.content-cards > .fl-module-post-grid .fl-post-grid-text,
.content-imgoverlay-cards .card-content-wrap,
.content-imgoverlay-cards > .fl-module-post-grid .fl-post-grid-text {
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.content-imgoverlay-cards .card-content-wrap,
.imgoverlay-card .card-content-wrap,
.content-imgoverlay-cards > .fl-module-post-grid .fl-post-grid-text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bs-card-inner-border-radius);
}

.imgoverlay-card .card-content-wrap {
  padding: var(--cf-space-m);
}

/* the above overlay blocks access to editing the underlying photo in BB, so let's muck up a few things when in the editor to attempt to allow focus to get there */
html.fl-builder-edit .content-imgoverlay-cards .card-content-wrap {
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: unset;
}

.content-imgoverlay-cards .fl-module-photo,
.imgoverlay-card .fl-module-photo {
  background-color: var(--bs-brand-aqua);
  border-radius: var(--bs-card-inner-border-radius);
  transition: background-color var(--transition);

  & .fl-photo-img {
    mix-blend-mode: multiply;
  }
}

/* turn off hover effect in BB as it's distracting */
html:not(.fl-builder-edit)
  .content-imgoverlay-cards
  .fl-module-photo:has(+ .card-content-wrap:hover),
html:not(.fl-builder-edit)
  .imgoverlay-card
  .fl-module-photo:has(+ .card-content-wrap:hover) {
  background-color: var(--bs-brand-lime);
}

/* make card text + button centered */
.cards-text-center .card-content-wrap {
  text-align: center;
}

.cards-text-center .card-content-wrap .fl-module-button {
  margin-block-start: var(--cf-space-s);
}

/* make card elements green */
.cards-lime {
  --bs-heading-color: var(--bs-brand-lime);
  --bs-card-border-color: var(--bs-brand-lime);
  --bs-card-border-width: 2px;
}

.cards-primary {
  --bs-heading-color: var(--bs-primary);
  --bs-card-border-color: var(--bs-primary);
  --bs-card-border-width: 2px;
}

.bgc-brand-gray .cards-lime.content-cards {
  --bs-card-border-color: var(--bs-brand-lime);
}

.bgc-brand-gray .cards-primary.content-cards {
  --bs-card-border-color: var(--bs-primary);
}

.cards-lime .fl-photo-content {
  background-color: var(--bs-brand-lime);
}

.cards-primary .fl-photo-content {
  background-color: var(--bs-primary);
}

/* have the top of the image protrude from the top of the card */
.sctn-hdr:not(:only-child):has(+ .card-img-offset-top) {
  margin-block-end: var(--cf-space-l);
  /* increase the space after the sctn-hdr if it has a offset image sibling */
}

main
  .fl-builder-content-primary
  > section:where([class*="bgc-"], [class*="bgg-"], [class*="bgi-"]):not(
    .sctn-fluid-fixed,
    .sctn-fluid-fixed
  ):has(.card-img-offset-top:only-child)
  > .fl-row-content-wrap {
  /* if we don't have a section hdr, make the top padding of the section itself bigger to accomodate negatively positioned images */
  padding-inline-start: calc(var(--cf-section-py) + var(--cf-space-xl));
}

.card-img-offset-top {
  --cf-gutter-y: var(--cf-space-xl);
}

.card-img-offset-top .fl-photo-content {
  padding-block-end: var(--cf-space-s);
}

.card-img-offset-top .fl-photo-img {
  margin-top: var(--cf-neg-space-xl);
}

/* START WP default specific things ===================== */

/* font awesome & font awesome brands */
.fab {
  font-family: "Font Awesome 6 Brands";
}

.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.fa,
.fa-brands,
.fa-classic,
.fa-regular,
.fa-sharp,
.fa-solid,
.fab,
.far,
.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fa-x-twitter:before {
  content: "\e61b";
}

.fl-menu .sub-menu {
  min-width: unset;
}

.fl-menu-expanded .sub-menu a {
  line-height: calc(var(--bs-body-line-height) * 0.8);
}

.hide-labels .nav-label,
.hide-icons .fab {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* left and right edge gutters ~ x-axis */
#fl-main-content
  > article
  > .fl-builder-content-primary
  > .fl-row:not(.sctn-fluid-fixed)
  > .fl-row-content-wrap {
  padding-inline-start: var(--cf-section-px);
  padding-inline-end: var(--cf-section-px);
}

/* padding at the far left and right edges of the screen ----------- */
#topbar > .fl-row-content-wrap,
#site-header > .fl-row-content-wrap,
#hero > .fl-row-content-wrap,
#site-breadcrumbs > .fl-row-content-wrap,
main
  .fl-builder-content-primary
  > section:not(.sctn-fluid-fixed)
  > .fl-row-content-wrap,
#fl-main-content
  > .fl-builder-content
  > section:not(.sctn-fluid-fixed)
  > .fl-row-content-wrap,
#cta > .fl-row-content-wrap,
#site-footer > .fl-row-content-wrap,
#site-copyright > .fl-row-content-wrap {
  padding-inline-start: var(--cf-section-px);
  padding-inline-end: var(--cf-section-px);
}

/* START topbar ===================================== */

/* WPML language switcher */
.wpml-ls-legacy-dropdown a {
  background-color: transparent;
  border-color: rgba(var(--bs-black-rgb), 0.125);
  padding: 5px 10px;
  transition: all var(--transition);
  border-radius: 0.8rem;

  &:hover {
    text-decoration: none;
  }

  &:focus,
  &:hover {
    border-color: rgba(var(--bs-black-rgb), 0.3);
  }
}

.wpml-ls-legacy-dropdown > ul > .wpml-ls-item:hover > a {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  border-top: 0;
  margin-top: -10px;
  z-index: 1001;

  & a {
    padding: 10px;
    border-radius: 0;
  }

  & li:first-child > a {
    margin-top: 10px;
  }

  & li:last-child > a {
    border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
  }
}

#topbar {
  --tb-gutter-y: var(--cf-space-xs);
  --tb-gutter-x: var(--cf-space-xs);
  --tb-py: var(--cf-space-2xs);
  --tb-col-px: calc(var(--tb-gutter-x) * 0.5);
  --tb-gutter-offset-x: calc(var(--cf-neg-space-xs) * 0.5);
  --bs-link-color-rgb: var(--bs-brand-aqua-rgb);

  color: var(--bs-white);
  background-color: var(--bs-brand-gray);
  font-size: var(--cf-text-xs);

  & > .fl-row-content-wrap {
    padding-block-start: var(--tb-py);
    padding-block-end: var(--tb-py);
  }

  & > .fl-row-content-wrap > .fl-row-content > .fl-module-box {
    row-gap: var(--tb-gutter-y);
    margin-inline-start: var(--tb-gutter-offset-x);
    margin-inline-end: var(--tb-gutter-offset-x);

    & > .fl-module-box {
      padding-inline-start: var(--tb-col-px);
      padding-inline-end: var(--tb-col-px);
    }
  }

  & p {
    margin-bottom: 0;
  }

  & a:hover {
    --bs-link-color-rgb: var(--bs-white-rgb);
  }

  /* style the language switcher in the topbar */
  & .wpml-ls-legacy-dropdown a {
    color: rgba(var(--bs-link-color-rgb), 1);

    &:focus {
      background: transparent;
    }

    &:focus,
    &:hover {
      color: rgba(var(--bs-white-rgb), 1);
    }
  }

  /* the initial language shown in the selector, NOT in the dropdown which appears on hover */
  & .wpml-ls-legacy-dropdown > ul > li > a {
    border-color: rgba(var(--bs-white-rgb), 0.125);

    &:focus,
    &:hover {
      border-color: rgba(var(--bs-white-rgb), 0.3);
    }
  }

  & .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a,
  & .wpml-ls-legacy-dropdown a:focus,
  & .wpml-ls-legacy-dropdown a:hover {
    color: rgba(var(--bs-white-rgb), 1);
    background: transparent;
  }

  & .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
    & a {
      background-color: var(--bs-brand-gray);
    }
  }
}

/* END topbar --------------------------------------- */

/* START site-header ================================ */
#site-header {
  --hdr-py: var(--cf-space-s);
  font-size: var(--cf-text-s);
  box-shadow: var(--bs-box-shadow);

  & > .fl-row-content-wrap {
    padding-block-start: var(--hdr-py);
    padding-block-end: var(--hdr-py);
    background-color: rgba(var(--bs-body-bg-rgb), 1);
    transition: padding-block-start var(--transition) padding-block-end
      var(--transition);

    &:where(
        .fl-theme-builder-header-shrink-row-top,
        .fl-theme-builder-header-shrink-row-bottom
      ) {
      --hdr-py: var(--cf-space-2xs);
    }
  }
}

#site-hdr-grid {
  --cf-gutter-y: var(--cf-space-2xs);
  --cf-gutter-x: var(--cf-space-2xs);
  display: grid;
  gap: var(--cf-gutter-y) var(--cf-gutter-x);

  --cf-gutter-y: var(--cf-space-s);
  grid-template-columns: auto 1fr repeat(2, auto);
  grid-template-areas:
    "st-hdr-branding empty-stretch st-hdr-search st-hdr-nav"
    "st-hdr-btns st-hdr-btns st-hdr-btns st-hdr-btns";
}

#site-hdr-branding {
  grid-area: st-hdr-branding;
  display: flex;
  align-items: center;
}

#site-hdr-nav {
  grid-area: st-hdr-nav;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#site-hdr-btns {
  margin: 0 auto;
  grid-area: st-hdr-btns;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  & > .fl-module {
    width: 100%;
  }
}

#site-hdr-search {
  grid-area: st-hdr-search;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 767px) {
  [id*="menu-primary-buttons"] {
    display: flex;
    width: 100%;

    & > .menu-item {
      padding-inline-start: var(--cf-flex-gutter-x);
      padding-inline-end: var(--cf-flex-gutter-x);
      width: 50%;
      flex: 0 0 auto;

      & > a {
        display: block;
      }
    }
  }
}

@media (min-width: 768px) {
  [id*="menu-primary-buttons"] .menu-item:not(:last-child) {
    margin-inline-end: var(--cf-space-2xs);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #site-hdr-grid {
    row-gap: 0;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: unset;
    position: relative; /* otherwise mobile megamenu overlay does not overlay all main content areas */
    z-index: 999;
  }

  #site-hdr-branding {
    text-align: start;
    grid-column: 1;
  }

  #site-hdr-btns {
    grid-column: 3;
  }

  #site-hdr-search {
    grid-column: 4;
  }

  #site-hdr-nav {
    grid-column: 5;
  }

  #site-hdr-nav,
  #site-hdr-nav .mega-menu {
    text-align: end !important;
  }
}

@media (min-width: 992px) {
  #site-hdr-grid {
    row-gap: var(--cf-space-2xs);
    grid-template-columns: auto 1fr repeat(2, auto);
    grid-template-areas:
      "st-hdr-branding st-hdr-btns st-hdr-btns st-hdr-search"
      "st-hdr-branding empty-stretch st-hdr-nav st-hdr-nav";
  }

  #site-hdr-btns {
    margin: 0 0 0 auto;

    width: auto;
    & > .fl-module {
      width: auto;
    }
  }
}

@media (min-width: 1400px) {
  #site-hdr-grid {
    row-gap: 0;
    grid-template-columns: auto 1fr repeat(3, auto);
    grid-template-areas: unset;
  }

  #site-hdr-branding {
    grid-column: 1;
  }

  #site-hdr-nav {
    grid-column: 3;
  }

  #site-hdr-btns {
    grid-column: 4;
  }

  #site-hdr-search {
    grid-column: 5;
  }
}

/* START mega menu ============================================ */

/* START MegaMenu plugin FIXES - the js calculated width is incorrect =============== */

@media only screen and (min-width: 768px) {
  #mega-menu-wrap-max_mega_menu_1
    [id*="mega-menu-max_mega_menu_1"][data-effect="fade"]
    li.mega-menu-item.mega-toggle-on
    > ul.mega-sub-menu,
  #mega-menu-wrap-max_mega_menu_1
    [id*="mega-menu-max_mega_menu_1"][data-effect="fade"]
    li.mega-menu-item.mega-menu-megamenu.mega-toggle-on
    > ul.mega-sub-menu {
    /* don't cover the logo */
    transform: translate(0, 1rem);
  }
}

@media (min-width: 992px) {
  #mega-menu-wrap-max_mega_menu_1,
  #mega-menu-wrap-max_mega_menu_1 [id*="mega-menu-max_mega_menu_1"] {
    position: unset !important;
  }

  #mega-menu-wrap-max_mega_menu_1
    [id*="mega-menu-max_mega_menu_1"]
    li.mega-menu-item.mega-menu-megamenu
    > ul.mega-sub-menu {
    left: 50% !important;
    transform: translate(-50%, 0.9rem) !important;
  }
}
/* END MegaMenu plugin FIXES - the js calculated width is incorrect -------------- */

/* START megamenu type style things ======================================= */
#mega-menu-wrap-max_mega_menu_1 [id*="mega-menu-max_mega_menu_1"] {
  /* style for megamenu top level parent links that are not buttons */
  & > li.mega-menu-item:not(.bb-btn) > a.mega-menu-link {
    --bs-link-color-rgb: var(--bs-toplevel-link-color-rgb);

    /* plugin sets a more specific selector so important is necessary to override */
    font-size: var(--cf-text-s);
    line-height: 1.2rem;
    height: unset;
    padding: var(--cf-space-2xs) var(--cf-space-2xs);
    display: flex;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
    transition: color var(--transition);

    &:hover,
    &[aria-expanded="true"] {
      --bs-link-color-rgb: var(--bs-toplevel-link-hover-color-rgb);
      background: unset !important;
    }

    & > span.mega-indicator {
      color: rgba(
        var(--bs-toplevel-link-hover-color-rgb),
        var(--bs-link-opacity, 1)
      ) !important;
    }
  }

  & > li.mega-menu-item > a.mega-menu-link {
    padding: 0 0.5rem !important;
  }

  & > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  & > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: transparent !important;
  }

  & > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: unset;
    color: rgba(
      var(--bs-toplevel-link-hover-color-rgb),
      var(--bs-link-opacity, 1)
    );
  }

  & > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    background: unset;
  }

  & .menu-title {
    font-size: var(--cf-text-l);
    margin-bottom: var(--cf-space-s);

    & > a {
      position: relative;

      /* animated underline on hover */
      &:after {
        content: "";
        height: 1px;
        width: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--bs-link-color);
        transition: width var(--transition);
      }

      &:hover:after {
        width: 100%;
      }
    }
  }

  & .menu-blurb {
    color: var(--bs-brand-gray-400);
    line-height: 1.4;

    &:not(:last-child) {
      margin-bottom: var(--cf-space-s);
    }
  }

  & .bb-btn:last-child {
    margin-bottom: 0;
  }

  a {
    text-decoration: none;
    transition: all var(--transition);

    /* animated underline on hover */
    & > .link-title {
      position: relative;

      &:after {
        content: "";
        height: 1px;
        width: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--bs-link-color);
        transition: width var(--transition);
      }
    }

    &:hover > .link-title:after {
      width: 100%;
    }
  }
}

/* hide extraneous content on mobile */
@media (max-width: 991px) {
  #mega-menu-wrap-max_mega_menu_1 [id*="mega-menu-max_mega_menu_1"] {
    .menu-blurb,
    .link-description,
    .mega-sub-menu .bb-btn {
      display: none;
    }
  }
}

@media (min-width: 992px) {
  #mega-menu-wrap-max_mega_menu_1 [id*="mega-menu-max_mega_menu_1"] {
    & .menu-title {
      margin-bottom: 0;
      margin-block-end: var(--cf-space-3xs);
    }
  }
}

/* style a megamenu nav menu section parent / title, aka Video Telematics or Vehicle Telematics */
/* prior-sibling:has(+ next-sibling) === amazing */
.mega-sub-menu .menu[id^="menu-sub-"] > .menu-item > a:has(+ .sub-menu) {
  color: var(--bs-brand-gray-600);
  border-block-end: 1px solid var(--bs-brand-coolgray-300);
  display: block;
  margin-block-end: var(--cf-space-3xs);

  &:hover {
    color: var(--bs-link-color);
    border-color: var(--bs-link-color);
  }
}

/* END type style things -------------------------------------------------- */

/* START layout for a submenu that is inside a megamenu */
.mega-sub-menu .menu[id^="menu-sub-"],
.mega-sub-menu .menu[id^="menu-sub-"] .sub-menu {
  list-style: none;
  padding-left: 0;
  display: grid;
  row-gap: var(--cf-space-2xs);
}

/* mobile specific */
@media (max-width: 991px) {
  #mega-menu-wrap-max_mega_menu_1
    .mega-menu-toggle
    + #mega-menu-max_mega_menu_1,
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item.mega-toggle-on
    > a.mega-menu-link {
    background: unset;
    background-color: var(--bs-body-bg);
  }
}

@media (min-width: 992px) {
  .mega-sub-menu .menu[id^="menu-sub-"] {
    display: grid;
    gap: var(--cf-space-s);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}

@media (min-width: 1200px) {
  .mega-sub-menu .menu[id^="menu-sub-"] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}

/* normal dropdown menu */
#mega-menu-wrap-max_mega_menu_1
  #mega-menu-max_mega_menu_1
  > li.mega-menu-flyout
  ul.mega-sub-menu
  li.mega-menu-item
  a.mega-menu-link {
  background: unset;
  background-color: var(--bs-gray-100);
}

/* site-hdr-nav is the positioned parent container for the primary menu bar */
#mega-menu-wrap-max_mega_menu_1 > #mega-menu-max_mega_menu_1  /* <nav> > <ul> */ {
  /* initial submenu layout items */
  /* .mega-menu-megamenu is the main menu parent link li, its direct child is the first mega-sub-menu child */
  & > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: unset;
    /* fake a drop shadow with a gradient background, formerly gray-100 */
    background: linear-gradient(
      180deg,
      rgba(229, 229, 229, 1) 0%,
      rgba(248, 249, 250, 1) 5%
    );
    /* box-shadow: inset 0px 11px 8px -10px #CCC; */

    & > li {
      z-index: 1; /* overlay the above */
    }

    /* overall megamenu column layout */
    & > li.mega-menu-row {
      float: none;

      & > .mega-sub-menu /* this is more the flex row than its parent */ {
        & > .mega-menu-column {
          float: none;
        }
      }
    }
  }
}

@media (min-width: 992px) {
  #mega-menu-wrap-max_mega_menu_1
    > #mega-menu-max_mega_menu_1
    > li.mega-menu-item:not(.mega-menu-flyout)
    > ul.mega-sub-menu {
    display: grid;
    grid-template-areas:
      "menu-title menu-title menu-title"
      "menu-intro menu-section-nav menu-section-nav";

    column-gap: var(--cf-space-s);
    padding-block-end: var(--cf-space-s);
    box-shadow: var(--bs-box-shadow);

    & > .mega-menu-item {
      &:first-child {
        grid-area: menu-title;
        padding-block-start: var(--cf-space-m);
        width: 100%;
      }

      &:nth-child(2) {
        grid-area: menu-intro;
        width: 100%;
      }

      &:last-child {
        grid-area: menu-section-nav;
        width: 100%;
      }
    }

    & > li.mega-menu-row {
      & > .mega-sub-menu {
        display: flex;
        flex-direction: row;

        padding-block-start: var(--cf-space-m);
        padding-block-end: var(--cf-space-m);

        & > .mega-menu-column {
          padding-inline-start: var(--cf-flex-gutter-x);
          padding-inline-end: var(--cf-flex-gutter-x);
        }
      }
    }
  }
}

/* Start link item descriptions, these classes are applied via Appearance > Menus > pick-a-menu > pick a link > CSS Classes */
.link-item-w-description .link-title {
  font-weight: 700;
  line-height: 1.3;
  display: inline-block;
}

.link-item-w-description .link-description {
  font-size: var(--cf-text-s);
  color: var(--bs-brand-gray-400);
  line-height: 1.4;
  transition: color var(--transition);
}

.link-item-w-description a:hover .link-description {
  color: var(--bs-brand-gray-600);
}

@media (min-width: 992px) {
  .link-item-w-description .link-description {
    display: block;
    margin-top: -0.125rem;
  }
}

/* END site-header ---------------------------------- */

/* START hero ======================================= */
#hero {
  flex-direction: row;

  & p {
    font-size: calc(var(--bs-body-font-size) * 1.2);
  }
}

#hero.hero-post {
  color: rgba(var(--bs-white-rgb), 1);
}

#hero > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py);
  padding-block-end: var(--cf-section-py);
}

/* fade out the overlay white on top of the hero image background - the overlay is created in BB */
#hero > .fl-row-content-wrap:after {
  animation: bb-overlayfadeout 1s ease-in-out; /* see utilities section for keyframes */
  animation-fill-mode: forwards;
}

#hero .fl-row-content > .fl-module-box {
  display: flex !important;
  flex-wrap: wrap;
  margin-left: var(--cf-flex-gutter-x-offset);
  margin-right: var(--cf-flex-gutter-x-offset);
}

#hero .fl-row-content > .fl-module-box > .fl-module-box {
  flex: 0 0 auto;
  max-width: 100%;
  padding-inline-start: var(--cf-flex-gutter-x);
  padding-inline-end: var(--cf-flex-gutter-x);
}

#hero .hero-content {
  background-color: rgba(var(--bs-white-rgb), 1);
  padding: var(--cf-space-xl);
}

#hero
  .hero-content
  .fl-module:last-child
  > .fl-module-content
  > div
  > *:last-child {
  margin-bottom: 0;
}

.hero-sub .content-col .fl-html {
  container-type: inline-size;
}

#page-eyebrow {
  color: var(--bs-brand-gray);
  font-size: var(--cf-text-m);
  margin-bottom: var(--cf-space-xs);
  font-weight: 700;
  text-transform: uppercase;
}

@supports (font-size: 1cqi) {
  #page-eyebrow {
    font-size: var(--cf-text-cqi-m);
  }
}

#page-oneliner .fl-heading {
  font-size: var(--cf-text-2-5xl); /* 42px at largest size */
  margin-bottom: var(--cf-space-xs) !important;
  line-height: 1.1;
  font-weight: 800;
}

.hero-lg #page-oneliner .fl-heading {
  font-size: var(--cf-hero-title-size);
}

.hero-sub {
  /* using "base" from this calc: https://www.fluid-type-scale.com/calculate?minFontSize=350&minWidth=768&minRatio=1.25&maxFontSize=500&maxWidth=1400&maxRatio=1.414&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=fs&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
  --photo-height: clamp(21.88rem, 23.73vi + 10.48rem, 31.25rem);

  & .content-col .fl-rich-text > *:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 992px) {
  /* when also used as a subpage hero */
  .hero-sub {
    & .content-col {
      padding-inline-start: 0;
    }
  }
}

/* END hero ----------------------------------------- */

/* START #site-breadcrumbs ========================== */
#site-breadcrumbs {
  border-block-start: 1px solid var(--bs-brand-aqua);
  font-size: var(--cf-text-xs);
  font-weight: 800;

  & > .fl-row-content-wrap {
    padding-block-start: var(--cf-space-3xs);
    padding-block-end: var(--cf-space-3xs);
  }
}
/* END #site-breadcrumbs ---------------------------- */

/* START content blocks ============================= */
.content-block {
  padding: var(--cf-space-m);
  border: 1px solid var(--bs-tertiary-color);
}

.content-block + .content-block {
  margin-block-start: var(--cf-space-m);
}

.content-block > .fl-module:last-child > .fl-module-content > * > *:last-child {
  margin-bottom: 0;
}

/* news layout */
.sidebar-block {
  & .fl-module-heading.fl-heading:first-child,
  & .fl-module-heading:first-child .fl-heading {
    color: var(--bs-primary);
    margin-bottom: 0.125rem !important;
  }

  & .fl-module-heading[class*="bb-"]:has(+ .fl-module-rich-text) {
    & .fl-heading {
      margin-bottom: 0 !important;
      font-weight: 700;
    }
  }

  & .fl-module-rich-text .fl-rich-text > p {
    margin-bottom: var(--cf-space-xs);
  }

  & > .fl-module:last-child > .fl-module-content > * > *:last-child {
    margin-bottom: 0;
  }

  &[class*="px-"] {
    .fl-menu-vertical {
      display: grid;
      row-gap: var(--cf-space-xs);

      &:before,
      &:after {
        display: none !important;
      }

      & > .menu-item > a {
        padding: 0 !important;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

/* END content blocks ------------------------------- */

/* START post item layout =========================== */
.fl-post-feed-post {
  border-bottom: 0 !important;
  margin-bottom: var(--cf-space-xl) !important;

  .fl-post-text {
    padding: unset;
  }

  .fl-post-image + .fl-post-text {
    padding-block-start: var(--cf-space-m);
  }
}

body .fl-post-text {
  container-type: inline-size;
}

/* standard post list, meta > title > blurb > link */
body .fl-post-text > .fl-post-meta {
  font-size: var(--cf-text-s);
  padding: unset;
  margin: unset;
  font-weight: 700;
  color: var(--bs-primary);
}

body .fl-post-text > .fl-post-title {
  font-size: var(--cf-post-title-size);
  line-height: 1.1;
  padding: unset;
  margin: unset;
  font-weight: 800;
}

@supports (font-size: 1cqi) {
  body .fl-post-text > .fl-post-title {
    font-size: var(--cf-post-title-cqi-size);
  }
}

body .fl-post-text > .fl-post-meta + .fl-post-title,
body .fl-post-text > .fl-post-title + .fl-post-meta {
  margin-block-start: var(--cf-space-3xs);
}

body .fl-post-excerpt {
  margin-block-start: var(--cf-space-xs);
}

body .fl-builder-pagination {
  & li a.page-numbers,
  & li span.page-numbers {
    border-width: 0;
    padding: var(--cf-space-3xs) var(--cf-space-xs);
    margin-bottom: var(--cf-space-3xs);
    border-radius: 50rem;
  }

  & li a.page-numbers:hover {
    background: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.085));
  }

  & li span.current {
    background: transparent;
  }
}

/* ---> post grid, title > meta > blurb > link */
body .fl-post-grid-text > .fl-post-grid-title {
  padding: unset;
  margin: unset;
  font-size: var(--cf-text-l);
  line-height: 1.1;
}

body .fl-post-grid-text > .fl-post-grid-meta {
  font-size: var(--cf-text-s);
  padding: unset;
}

body .fl-post-grid-content {
  margin-block-start: var(--cf-space-s);

  & .fl-post-grid-more {
    margin-top: unset;
    margin-block-start: var(--cf-space-xs);
  }
}

body .fl-post-grid-text > .fl-post-grid-content,
body .fl-post-grid-text > .fl-post-grid-content p {
  font-size: var(--cf-text-m);
  line-height: var(--bs-body-line-height);
}

@media (min-width: 992px) {
  .mpg-lg-px-l {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-l);
    }
  }

  .mpg-lg-px-xl {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-xl);
    }
  }

  .mpg-lg-px-2xl {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-2xl);
    }
  }
}

@media (min-width: 1200px) {
  .mpg-xl-px-l {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-l);
    }
  }

  .mpg-xl-px-xl {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-xl);
    }
  }

  .mpg-xl-px-2xl {
    & .fl-module-post-grid {
      padding-inline-end: var(--cf-space-2xl);
    }
  }
}

/* individual news page */
.single-news {
  & #page-title .fl-heading {
    font-weight: 800;
  }

  & #hero .fl-post-info-date {
    font-weight: 700;
  }

  & #main {
    container-type: inline-size; /* set container query for font sizing */
  }
}

.item-date {
  font-weight: 700;
  color: var(--bs-primary);
  font-size: var(--cf-text-s);
}

#main-title {
  margin-bottom: var(--cf-space-s);
  font-weight: 800;
}

/* END post item layout ----------------------------- */

/* START cta ======================================== */
#cta {
  --bs-heading-color: var(--bs-primary);

  &.cta-centered {
    &
      > .fl-row-content-wrap
      > .fl-row-content
      > .fl-module-box
      > .fl-module-box {
      row-gap: var(--cf-space-2xs);
    }

    & p:last-child {
      margin-bottom: 0;
    }
  }

  & .fl-heading {
    margin-bottom: 0;
  }

  & .fl-module-button {
    margin-block-start: var(--cf-space-l);
  }
}

#cta > .fl-row-content-wrap {
  padding-block-start: var(--cf-section-py);
  padding-block-end: var(--cf-section-py);
}

/* END cta ------------------------------------------ */

/* START site-footer ================================ */
#site-footer {
  --ftr-gap: var(--cf-gutter-y) var(--cf-gutter-x);
  --bs-body-color: rgba(var(--bs-brand-gray-550-rgb), 1);

  & > .fl-row-content-wrap {
    padding-block-start: var(--cf-space-l);
    padding-block-end: var(--cf-section-py);
  }

  & .site-footer__header {
    text-transform: uppercase;
    font-size: var(--cf-text-cqi-l);

    &:not(:first-child) {
      margin-block-start: var(--cf-space-s);
    }

    & + .bb-btn {
      margin-block-start: var(--cf-space-xs);
    }
  }

  & a,
  & a:visited {
    --bs-link-color-rgb: var(--bs-brand-gray-550-rgb);

    &:hover,
    &:focus-visible {
      --bs-link-color-rgb: var(--bs-primary-rgb);
    }
  }
}

#menu-footer {
  display: grid;
  gap: var(--cf-space-xs) var(--cf-space-m);
  grid-template-columns: 1fr 1fr;

  & li:first-child {
    grid-column-start: 1;
  }

  & a {
    padding: 0 0 var(--cf-space-3xs) 0;
    font-weight: 700;

    &:after {
      content: "";
      height: 1px;
      width: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: width var(--transition);
    }

    &:hover {
      &:after {
        width: 100%;
        background-color: rgba(var(--bs-link-color-rgb), 1);
      }
    }
  }
}

#site-copyright > .fl-row-content-wrap {
  padding-block-start: var(--cf-space-s);
  padding-block-end: var(--cf-space-s);
}

@media (max-width: 767px) {
  #site-copyright-social {
    margin-top: var(--cf-space-s);
  }

  #site-copyright-nav {
    margin-top: var(--cf-space-m);
  }
}

@media (min-width: 992px) {
  #site-copyright .fl-row-content > .fl-module-box {
    justify-content: center;
  }
}

#site-ftr-nav {
  --menu-row-gap: var(--cf-space-3xs);

  &:first-child:not(:only-child) {
    padding-block-end: var(--cf-section-my);
    border-bottom: 1px solid var(--bs-brand-gray-550);
    margin-block-end: var(--cf-space-xs);
  }

  & .fl-has-submenu-container {
    margin-block-end: var(--menu-row-gap);
  }

  & .sub-menu {
    row-gap: var(--menu-row-gap);
    display: flex;
    flex-direction: column;

    & a {
      font-size: var(--cf-text-s);
    }
  }

  & a {
    display: inline-block;
  }

  & .menu > .menu-item > div > a {
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .smo-hide-sub .sub-menu {
    display: none;
  }

  .menu-smo-inline .menu > .menu-item {
    display: inline-block;
  }

  .parent-link-smo-dividers
    .menu
    > .menu-item:not(:first-child)
    .fl-has-submenu-container
    a {
    padding-block-start: var(--cf-space-xs);
  }

  .parent-link-smo-dividers .menu > .menu-item:not(:last-child) {
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  }

  .parent-link-smo-dividers
    .menu
    > .menu-item:not(:last-child)
    .fl-has-submenu-container
    a {
    padding-block-end: var(--cf-space-2xs);
  }
}

#ftr-brand img {
  width: 100%;
  max-width: 200px;
}

#site-copyright-nav {
  font-size: var(--cf-text-xs);

  & .fl-module-content {
    margin-bottom: 0 !important;
  }
}

/* contains copyright copy + privacy policy link, terms, sitemap */
#copyright-menu {
  & > li > a {
    text-align: center !important;
  }

  & a {
    --bs-link-color-rgb: var(--bs-brand-gray-550-rgb);
    text-decoration: none;

    &:hover {
      --bs-link-color-rgb: var(--bs-primary-rgb);
    }

    &:not(.wpml-ls-item-toggle, .wpml-ls-link):hover {
      text-decoration: underline;
    }
  }

  & .wpml-ls-legacy-dropdown a:hover {
    background: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.08));
  }
}

@media (min-width: 1200px) {
  #copyright-menu {
    margin-bottom: 0;
  }
}

[id*="menu-social"] {
  & a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--cf-text-2xl);
    height: var(--cf-text-2xl);
    border-radius: 50rem;
    border: 1px solid transparent;
    transition: border-color var(--transition);
    color: rgba(var(--bs-primary-rgb), 1) !important;

    &:hover,
    &:focus-visible {
      border-color: rgba(var(--bs-primary-rgb), 0.35);
      text-decoration: none;
      color: rgba(var(--bs-primary-rgb), 1) !important;
    }
  }
}

/* END site-footer ---------------------------------- */

/* START utilities ================================== */
.clearfix-self {
  display: block;
  clear: both;
  content: "";
}

.fl-screen-reader-text:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 767px) {
  .text-smo-start {
    text-align: start;
  }

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

.img-link-border a {
  --opacity: 1;
  border: 1px solid rgba(var(--bs-secondary-rgb), var(--opacity));
  display: inline-block;
  transition: border var(--transition);

  &:hover {
    --opacity: 0.5;
  }
}

@media (min-width: 768px) {
  .sticky-md {
    position: sticky;
    top: 0;
  }

  .sticky-md-offset-hdr {
    --header-offset: 9.5rem;
    position: sticky;
    top: var(--header-offset);
  }

  html.fl-builder-is-showing-toolbar .sticky-md-offset-hdr {
    --header-offset: 2rem;
  }
}

/* default gutter is medium or m, overwrites the default gutter variables per .sctn- class */
/* has to follow sctn classes in order to override */
.gutter-l {
  --cf-gutter-y: var(--cf-space-l);
  --cf-gutter-x: var(--cf-space-l);
  --cf-flex-gutter-x: calc(var(--cf-gutter-x) * 0.5);
  --cf-flex-gutter-x-offset: var(--cf-neg-space-l);
}

.gutter-xl {
  --cf-gutter-y: var(--cf-space-xl);
  --cf-gutter-x: var(--cf-space-xl);
  --cf-flex-gutter-x: calc(var(--cf-gutter-x) * 0.5);
  --cf-flex-gutter-x-offset: var(--cf-neg-space-xl);
}

.gutter-2xl {
  --cf-gutter-y: var(--cf-space-2xl);
  --cf-gutter-x: var(--cf-space-2xl);
  --cf-flex-gutter-x: calc(var(--cf-gutter-x) * 0.5);
  --cf-flex-gutter-x-offset: var(--cf-neg-space-2xl);
}

.gutter-3xl {
  --cf-gutter-y: var(--cf-space-3xl);
  --cf-gutter-x: var(--cf-space-3xl);
  --cf-flex-gutter-x: calc(var(--cf-gutter-x) * 0.5);
  --cf-flex-gutter-x-offset: var(--cf-neg-space-3xl);
}

/* some row gap things */
.rowgap-s {
  row-gap: var(--cf-space-s);
}

.rowgap-m {
  row-gap: var(--cf-space-m);
}

.rowgap-l {
  row-gap: var(--cf-space-l);
}

.rowgap-xl {
  row-gap: var(--cf-space-xl);
}

.rowgap-2xl {
  row-gap: var(--cf-space-2xl);
}

@media (min-width: 768px) and (max-width: 991px) {
  .mdlg-row-gap-0 {
    row-gap: 0 !important;
  }
}

@media (max-width: 991px) {
  .lgo-row-gap-0 {
    row-gap: 0 !important;
  }
}

.rcw-bg-sz-70 > .fl-row-content-wrap {
  background-size: auto 70% !important;
}

.rcw-bgi-bsz-100-auto .fl-row-content-wrap {
  background-size: 100% auto;
}

ul.list-inline-flex {
  padding-left: 0;
  margin-bottom: 0;
}

.list-inline-flex {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  & > li + li {
    padding-left: var(--cf-space-xs);
  }

  & a:not(.wpml-ls-item-toggle),
  & li > .wpml-ls-legacy-dropdown {
    padding-block-start: var(--cf-space-2xs);
    padding-block-end: var(--cf-space-2xs);
  }
}

@keyframes bb-overlayfadeout {
  100% {
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .by-s-smo {
    border-block-start: 1px solid var(--bs-brand-aqua);
  }
}

@media (max-width: 991px) {
  .by-s-lgo {
    border-block-start: 1px solid var(--bs-brand-aqua);
  }
}

@media (min-width: 768px) {
  .bx-s-md {
    border-inline-start: 1px solid var(--bs-brand-aqua);
  }
}

@media (min-width: 992px) {
  .bx-s-lg {
    border-inline-start: 1px solid var(--bs-brand-aqua);
  }
}

/* END utilities ------------------------------------ */

/* hide the WPML dev banner at the bottom of the page */
.otgs-development-site-front-end {
  display: none;
}

.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer {
  margin-bottom: 0;
}