/* === base-globals.css === */
:root {
  --background: rgb(235, 235, 235);
  --foreground: #171717;

  --base-font-size: 18px;
  --base-line-height: 1.5;

  --orange: #e84e1b;
  --orange-dark: #ba3c13;
  --orange-pale: #feede9;
  --green: #2dab66;
  --green-pale: #ecf6ef;
  --blueGreen: #1f938a;
  --blueGreen-pale: #eaf4f3;
  --midBlue: #1d70b7;
  --midBlue-pale: #eaf0f8;
  --darkBlue: #1a1c38;
  --darkBlue-pale: #e8e8ea;
  --white: #fff;
  --grey-99: #f4f4f4;
  --grey-95: #e5e5e5;
  --grey-90: #ccc;
  --grey-60: #888;
  --grey-40: #666;

  --input-border-color: var(--darkBlue);

  --menu-toggle-size: 32px;
  --menu-logo-height: 24px;

  --behomed-logo-width: 400px;
  --behomed-logo-height: 62px;
  --behomed-logo-scale-factor: calc(24 / var(--behomed-logo-height));
  --header-border-color: rgba(225, 225, 225, 0.2);
  --header-padding-top: var(--space-4);

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;

  --top-site-bar-row-1-height: calc(
    var(--menu-logo-height) + calc(var(--space-3) * 2)
  );
  --top-site-bar-row-2-height: calc(21px + calc(var(--space-3) * 2));
  --top-site-bar-height-mobile: calc(
    var(--top-site-bar-row-1-height) + var(--top-site-bar-row-2-height) + 8px
  );
  --top-site-bar-height-desktop: calc(var(--top-site-bar-row-1-height) + 8px);

  --top-site-bar-back-color-step-1: #181a38;
  --top-site-bar-back-color-step-2: #192446;
  --top-site-bar-back-color-step-3: #192d54;
  --top-site-bar-back-color-step-4: #1a3763;
  --top-site-bar-back-color-step-5: #1a4171;
  --top-site-bar-back-color-step-6: #1b4a7f;
  --top-site-bar-back-color-step-7: #1b548d;
  --top-site-bar-back-color-step-8: #1c5e9c;
  --top-site-bar-back-color-step-9: #1c67aa;
  --top-site-bar-back-color-step-10: #1d71b8;
  --top-site-bar-text-color-step-1: #1d71b8;
  --top-site-bar-text-color-step-2: #3681c0;
  --top-site-bar-text-color-step-3: #4f91c8;
  --top-site-bar-text-color-step-4: #68a0d0;
  --top-site-bar-text-color-step-5: #81b0d8;
  --top-site-bar-text-color-step-6: #9bc0df;
  --top-site-bar-text-color-step-7: #b4d0e7;
  --top-site-bar-text-color-step-8: #cddfef;
  --top-site-bar-text-color-step-9: #e6eff7;
  --top-site-bar-text-color-step-10: #ffffff;

  --box-shadow-very-small:
    0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12);

  --box-shadow-small:
    0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);

  --box-shadow-large-soft:
    0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11),
    0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11),
    0 4px 16px rgba(0, 0, 0, 0.11), 0 4px 32px rgba(0, 0, 0, 0.11);

  --box-shadow-inset-very-large:
    inset 0 1px 2px -1px rgba(0, 0, 0, 0.03),
    inset 0 2px 4px -2px rgba(0, 0, 0, 0.03),
    inset 0 4px 8px -4px rgba(0, 0, 0, 0.03),
    inset 0 8px 16px -8px rgba(0, 0, 0, 0.03),
    inset 0 16px 32px -16px rgba(0, 0, 0, 0.03),
    inset 0 32px 64px -32px rgba(0, 0, 0, 0.03);

  --skew-angle: 10deg;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --max-width: 1080px;

  --form-control-color: var(--orange);
  --form-control-disabled: #959495;

  --h1-font-scale: 1.9;
  --h2-font-scale: 1.5;
  --h3-font-scale: 1.2;
  --h4-font-scale: 1.1;
  --h5-font-scale: 1.05;
  --p-font-scale: 1;
  --p-sml-font-scale: 0.85;
  --p-legal-font-scale: 0.75;
  --p-xsmall-font-scale: 0.65;
}

@view-transition {
  navigation: auto;
}

[hidden] {
  display: none !important;
}

@keyframes fade-page-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-page-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation:
      90ms cubic-bezier(0.4, 0, 1, 1) both fade-page-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation:
      210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-page-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body,
#page {
  min-height: 100vh;
}

body {
  position: relative;
}

#page {
  display: grid;
  grid-template-rows: 1fr auto;
}

.skip-link.screen-reader-text {
  position: absolute;
}

.bg--orange {
  background: var(--orange);
}
.bg--green {
  background: var(--green);
}
.bg--blueGreen {
  background: var(--blueGreen);
}
.bg--midBlue {
  background: var(--midBlue);
}
.bg--darkBlue {
  background: var(--darkBlue);
}
.bg--white {
  background: var(--white);
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--darkBlue);
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong {
  font-weight: 600;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre,
label,
.list li {
  line-height: 1.5;
  margin: 0;

  &::before {
    content: "";
    margin-bottom: -0.393em;
    display: table;
  }

  &::after {
    content: "";
    margin-top: -0.397em;
    display: table;
  }
}

.no-leading-trim {
  &::before,
  &::after {
    display: none;
  }
}

h1,
.h1,
h2,
.h2 {
  font-weight: 700;
  line-height: 1.1;
}

h1,
.h1 {
  font-size: calc(var(--base-font-size) * var(--h1-font-scale));

  &::before {
    margin-bottom: -0.192em;
  }
  &::after {
    margin-top: -0.196em;
  }

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--h1-font-scale) * 1.1);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--h1-font-scale) * 1.5);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--h1-font-scale) * 2);
  }
}

h2,
.h2 {
  font-size: calc(var(--base-font-size) * var(--h2-font-scale));
  text-transform: uppercase;

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--h2-font-scale) * 1.1);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--h2-font-scale) * 1.5);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--h2-font-scale) * 2);
  }

  &::before {
    content: "";
    margin-bottom: -0.218em;
    display: table;
  }

  &::after {
    content: "";
    margin-top: -0.222em;
    display: table;
  }
}

h3,
.h3 {
  font-size: calc(var(--base-font-size) * var(--h3-font-scale));

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.08);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.25);
  }
}

h4,
.h4 {
  font-size: calc(var(--base-font-size) * var(--h4-font-scale));

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--h4-font-scale) * 1.08);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--h4-font-scale) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--h4-font-scale) * 1.25);
  }
}

.text.sml {
  font-size: calc(var(--base-font-size) * var(--p-sml-font-scale));

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--p-sml-font-scale) * 1.08);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--p-sml-font-scale) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--p-sml-font-scale) * 1.25);
  }
}

.text.legal {
  font-size: calc(var(--base-font-size) * var(--p-legal-font-scale));

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--p-legal-font-scale) * 1.08);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--p-legal-font-scale) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--p-legal-font-scale) * 1.25);
  }
}

.text.xsmall {
  font-size: calc(var(--base-font-size) * var(--p-xsmall-font-scale));

  @media (min-width: 391px) {
    font-size: calc(var(--base-font-size) * var(--p-xsmall-font-scale) * 1.08);
  }

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * var(--p-xsmall-font-scale) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * var(--p-xsmall-font-scale) * 1.25);
  }
}

p,
label,
li {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);

  @media (min-width: 601px) {
    font-size: calc(var(--base-font-size) * 1.08);
  }

  @media (min-width: 801px) {
    font-size: calc(var(--base-font-size) * 1.125);
  }

  @media (min-width: 1201px) {
    font-size: calc(var(--base-font-size) * 1.25);
  }
}

.orange-divider-above.orange-divider-above,
.section-heading.section-heading {
  &::before {
    background: var(--orange);
    content: "";
    display: block;
    height: 8px;
    margin-bottom: 4px;
    width: 48px;
  }

  &.small-divider::before {
    height: 8px;
    margin-bottom: 8px;
    width: 40px;
  }
}

h5,
.h5 {
  font-size: 18px;
  font-weight: 700;
}
h6,
.h6 {
  font-size: 18px;
}

.white-text {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    color: var(--white);
  }
}

.section-heading {
  font-weight: 700;
  margin-bottom: var(--space-3);

  &::before {
    background: var(--orange);
    content: "";
    display: block;
    height: 12px;
    margin-bottom: 10px;
    width: 50px;
  }

  &.color--white {
    color: var(--white);
  }
}

.wgt-700 {
  font-weight: 700;
}

.btn-container {
  display: flex;
  justify-content: start;

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn.loading .spinner {
  display: inline-block;
}

.btn .spinner {
  display: none;
}

.btn {
  border-radius: 4px;
  color: var(--white);
  display: block;
  font-size: 22px;
  font-weight: 700;
  outline-offset: 3px;
  padding: var(--space-2) var(--space-3);
  position: relative;
  text-align: center;
  text-decoration: none;

  &.sml {
    font-size: 18px;
    padding: var(--space-1) var(--space-2);
  }

  &::after {
    animation: spin 2s linear infinite;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 18px;
    opacity: 0;
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 11px);
    transition: opacity 0.2s ease-in-out;
    width: 18px;
    z-index: 4;
  }

  &.submitting {
    span {
      opacity: 0;
    }
    &::after {
      opacity: 1;
    }
  }

  &.bg--orange {
    background: var(--orange);

    &.submitting {
      background: var(--orange-dark);
    }

    &:active,
    &:focus,
    &:hover {
      /*background: var(--orange-dark);*/
      outline: 2px solid white;
      outline-offset: 2px;
    }
  }

  &.bg--white {
    &:active,
    &:focus,
    &:hover {
      outline: 1px solid white;
    }
  }

  @media (min-width: 801px) {
    padding: calc(var(--space-2) * 1.5) calc(var(--space-3) * 1.5);
  }

  @media (min-width: 1201px) {
    padding: var(--space-3) var(--space-4);
  }
}

button.btn {
  border: 0;
}

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

.visually-hidden {
  appearance: none;
  border: 0;
  clip: rect(0 0 0 0);
  height: 0px;
  overflow: hidden;
  width: 0;
}

.grecaptcha-badge {
  bottom: 24px !important;
  position: absolute !important;
  z-index: 99 !important;
}

hr.divider {
  border: 0;
  border-top: 1px solid var(--grey-90);
  width: 100%;
}


/* === base-layout-blocks.css === */
#page {
  position: relative;
  z-index: 1;

  &.nav-is-open {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

.section-content {
  position: relative;
}

.section-anchor {
  position: relative;
  top: calc(var(--top-site-bar-height-mobile) * -1);

  @media (min-width: 801px) {
    top: calc(var(--top-site-bar-height-desktop) * -1);
  }
}

.contains-video {
  overflow: hidden;
  position: relative;
  width: 100%;

  .video {
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

    @media (min-width: 801px) {
      display: block;
    }
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  &.with-mask::before {
    background: linear-gradient(
      215deg,
      rgba(24, 26, 56, 0.4),
      rgba(24, 26, 56, 0.8)
    );
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
  }

  &.pale-overlay {
    &::before,
    &::after {
      background: linear-gradient(
        215deg,
        rgba(255, 245, 255, 0.7),
        rgba(255, 245, 255, 1)
      );
    }
  }

  .content-width-wrapper {
    position: relative;
    z-index: 6;
  }
}

.hero,
.content-section.pad-x,
footer {
  .content-width-wrapper {
    padding-left: 24px;
    padding-right: 24px;

    @media (min-width: 601px) {
      padding-left: 36px;
      padding-right: 36px;
    }

    @media (min-width: 1176px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.content-section.pad-y {
  .content-width-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;

    @media (min-width: 601px) {
      padding-top: 48px;
      padding-bottom: 48px;
    }

    @media (min-width: 1176px) {
      padding-top: 56px;
      padding-bottom: 56px;
    }

    @media (min-width: 1501px) {
      padding-top: 64px;
      padding-bottom: 64px;
    }
  }
}

.content-section.pad-y-top {
  .content-width-wrapper {
    padding-top: 24px;

    @media (min-width: 601px) {
      padding-top: 48px;
    }

    @media (min-width: 1176px) {
      padding-top: 56px;
    }

    @media (min-width: 1501px) {
      padding-top: 64px;
    }
  }
}

.content-section.pad-y-bottom {
  .content-width-wrapper {
    padding-bottom: 24px;

    @media (min-width: 601px) {
      padding-bottom: 48px;
    }

    @media (min-width: 1176px) {
      padding-bottom: 56px;
    }

    @media (min-width: 1501px) {
      padding-bottom: 64px;
    }
  }
}

.bg-orange {
  background: var(--orange);
}
.color--orange {
  color: var(--orange);
}
.bg-green {
  background: var(--green);
}
.color--green {
  color: var(--green);
}
.bg-blueGreen {
  background: var(--blueGreen);
}
.color-blueGreen {
  color: var(--blueGreen);
}
.bg-midBlue {
  background: var(--midBlue);
}
.color--midBlue {
  color: var(--midBlue);
}
.bg-darkBlue {
  background: var(--darkBlue);
}
.color--darkBlue {
  color: var(--darkBlue);
}
.bg-white {
  background: var(--white);
}
.color--white {
  color: var(--white);
}

.bg-blueGreen,
.bg-darkBlue,
.bg-green,
.bg-midBlue {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li {
    color: var(--white) !important;
  }
}

.content-width-wrapper {
  margin: 0 auto;
  max-width: var(--max-width);
  width: 100%;
}

.text-stack,
.list {
  display: grid;

  &.gap-4 {
    grid-gap: 4px;
  }
  &.gap-8 {
    grid-gap: 8px;
  }
  &.gap-12 {
    grid-gap: 12px;
  }
  &.gap-16 {
    grid-gap: 16px;
  }
  &.gap-24 {
    grid-gap: 24px;
  }
  &.gap-32 {
    grid-gap: 32px;
  }
  &.gap-40 {
    grid-gap: 40px;
  }
  &.gap-48 {
    grid-gap: 48px;
  }

  &.gap-xsm {
    grid-gap: 4px;
  }
  &.gap-sml {
    grid-gap: 8px;
  }
  &.gap-med {
    grid-gap: 16px;
  }
  &.gap-lge {
    grid-gap: 24px;
  }
  &.gap-xlg {
    grid-gap: 32px;
  }
  &.gap-xxl {
    grid-gap: 48px;
  }

  @media (min-width: 601px) {
    &.gap-xsm {
      grid-gap: calc(4px * 1.08);
    }
    &.gap-sml {
      grid-gap: calc(8px * 1.08);
    }
    &.gap-med {
      grid-gap: calc(16px * 1.08);
    }
    &.gap-lge {
      grid-gap: calc(24px * 1.08);
    }
    &.gap-xlg {
      grid-gap: calc(32px * 1.08);
    }
    &.gap-xxl {
      grid-gap: calc(48px * 1.08);
    }
  }

  @media (min-width: 801px) {
    &.gap-xsm {
      grid-gap: calc(4px * 1.125);
    }
    &.gap-sml {
      grid-gap: calc(8px * 1.125);
    }
    &.gap-med {
      grid-gap: calc(16px * 1.125);
    }
    &.gap-lge {
      grid-gap: calc(24px * 1.125);
    }
    &.gap-xlg {
      grid-gap: calc(32px * 1.125);
    }
    &.gap-xxl {
      grid-gap: calc(48px * 1.125);
    }
  }

  @media (min-width: 801px) {
    &.gap-xsm {
      grid-gap: calc(4px * 1.175);
    }
    &.gap-sml {
      grid-gap: calc(8px * 1.175);
    }
    &.gap-med {
      grid-gap: calc(16px * 1.175);
    }
    &.gap-lge {
      grid-gap: calc(24px * 1.175);
    }
    &.gap-xlg {
      grid-gap: calc(32px * 1.175);
    }
    &.gap-xxl {
      grid-gap: calc(48px * 1.175);
    }
  }
}

ul {
  &.bullet,
  &.decimal {
    list-style: decimal;
    margin-left: var(--space-2);
    padding-left: var(--space-4);
  }

  &.bullet {
    list-style: disc;
  }
}

.align-left {
  justify-self: start;
}

.center-content {
  display: grid;
  justify-content: center;
  text-align: center;
}

.skew-to-right {
  transform: skew(calc(var(--skew-angle) * -1));
}

.reverse-skew-to-right {
  transform: skew(var(--skew-angle));
}

.masks {
  display: none;
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 5;
}

.mask {
  background: linear-gradient(
    to right,
    rgba(24, 26, 56, 0.3),
    rgba(24, 26, 56, 0.7)
  );
  height: 100%;
  position: absolute;
  left: -10vw;
  top: 0;
  transform: skew(calc(var(--skew-angle) * -1));
  width: 30vw;

  @media (min-width: 801px) {
    background: linear-gradient(
      to right,
      rgba(24, 26, 56, 0.4),
      rgba(24, 26, 56, 0.6) 75%,
      rgba(24, 26, 56, 0.8) 100%
    );
    left: -5vw;
  }

  &:nth-of-type(1) {
    background: linear-gradient(
      to right,
      rgba(24, 26, 56, 0.5),
      rgba(24, 26, 56, 0.7)
    );
    left: auto;
    right: -10vw;
    width: 118vw;

    @media (min-width: 801px) {
      background: linear-gradient(
        to right,
        rgba(24, 26, 56, 0.4),
        rgba(24, 26, 56, 0.6) 75%,
        rgba(24, 26, 56, 0.8) 100%
      );
      right: -5vw;
      width: 112vw;
    }
  }
  &:nth-of-type(2) {
    background: linear-gradient(
      to right,
      rgba(24, 26, 56, 0.15),
      rgba(24, 26, 56, 0.4)
    );
    width: 90vw;

    @media (min-width: 801px) {
      width: 80vw;
    }
  }
  &:nth-of-type(3) {
    background: linear-gradient(
      to right,
      rgba(24, 26, 56, 0.25),
      rgba(24, 26, 56, 0.4)
    );
    width: 35vw;

    @media (min-width: 801px) {
      width: 55vw;
    }
  }
  &:nth-of-type(4) {
    display: none;
    width: 30vw;

    @media (min-width: 801px) {
      background: linear-gradient(
        to right,
        rgba(24, 26, 56, 0.25),
        rgba(24, 26, 56, 0.4)
      );
      display: block;
    }
  }
}

.dark-mask {
  .mask {
    background: linear-gradient(
      to right,
      rgba(24, 26, 56, 0.4),
      rgba(24, 26, 56, 0.2) 50%
    );

    &:nth-last-of-type(4) {
      background: linear-gradient(
        to right,
        rgba(24, 26, 56, 0.8),
        rgba(24, 26, 56, 0.5) 50%
      );
    }
  }
}

.pale-mask {
  .mask {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.3) 50%
    );

    &:nth-last-of-type(4) {
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.4) 50%
      );
    }
  }
}


/* === accordion.css === */
/* Accordion layout */
.top-level-accordion-container {
  display: grid;
  width: 100%;
}

.accordion-container {
  position: relative;
  grid-template-columns: 1fr 20px;
}

/* Accordion content: hidden by default, revealed when checkbox checked */
.accordion-content {
  grid-column: 1 / 4;
  grid-row-start: 2;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: all 300ms ease-in-out;
}

.accordion-content h3 {
  font-weight: bold;
}

.accordion-content > :first-child:not(li) {
  margin-top: 1.75rem !important;
}

.toggle-input:checked ~ .accordion-content {
  max-height: 9999px;
}

/* Misc accordion helpers */
.no-list-style {
  list-style: none;
  padding-left: 0.75rem;
}

/* Close link inside accordion content */
div .accordion-close-link {
  display: inline-block !important;
  height: auto;
  position: relative;
  width: auto;
  padding-right: 1.5rem !important;
}

div .accordion-close-link span {
  left: auto;
  margin-top: -1px;
  right: 0;
  top: 50%;
  width: 0.75rem;
}

div .accordion-close-link::before,
div .accordion-close-link::after {
  display: none;
}

/* FAQ page section headings */
.faq-page .section-heading {
  margin-bottom: 0;
  font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.1);
}

@media (min-width: 391px) {
  .faq-page .section-heading {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.08 * 1.1);
  }
}

@media (min-width: 601px) {
  .faq-page .section-heading {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.125 * 1.1);
  }
}

@media (min-width: 1201px) {
  .faq-page .section-heading {
    font-size: calc(var(--base-font-size) * var(--h3-font-scale) * 1.25 * 1.1);
  }
}

.faq-page .content-section {
  box-shadow:
    inset 0 1px 2px -1px rgba(0, 0, 0, 0.03),
    inset 0 2px 4px -2px rgba(0, 0, 0, 0.03),
    inset 0 4px 8px -4px rgba(0, 0, 0, 0.03),
    inset 0 8px 16px -8px rgba(0, 0, 0, 0.03),
    inset 0 16px 32px -16px rgba(0, 0, 0, 0.03),
    inset 0 32px 64px -32px rgba(0, 0, 0, 0.03);
}


/* === coloured-grid.css === */
.coloured-grid-header.how-it-works {
  background: var(--green);

  @media (min-width: 601px) {
    background: var(--darkBlue);
  }
}

.grid-3,
.grid-4,
.grid-6 {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  text-align: center;

  @media (min-width: 1081px) {
    border-radius: var(--space-3);
    overflow: hidden;
  }
}

.grid-3 {
  grid-template-rows: repeat(3, auto);

  @media (min-width: 801px) {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  grid-template-rows: repeat(4, auto);

  @media (min-width: 801px) {
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-6 {
  grid-template-rows: repeat(6, auto);

  @media (min-width: 601px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  @media (min-width: 801px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}

.icon-wrapper {
  display: grid;
  justify-items: center;

  img {
    height: 36px;
    width: 36px;

    @media (min-width: 601px) {
      height: 48px;
      width: 48px;
    }
  }
}

h4 {
  font-size: 21px;
  text-transform: uppercase;
}

.cell.icon-and-text {
  align-content: start;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.08),
    inset 0 2px 2px rgba(0, 0, 0, 0.12),
    inset 0 4px 4px rgba(0, 0, 0, 0.16),
    inset 0 8px 8px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  position: relative;

  @media (max-width: 600px) {
    &:first-of-type {
      box-shadow: none;
    }
  }

  h4,
  p {
    position: relative;
    z-index: 10;
  }

  @media (min-width: 601px) {
    box-shadow:
      inset 2px 0 2px -1px rgba(0, 0, 0, 0.08),
      inset 6px 0 4px -4px rgba(0, 0, 0, 0.12),
      inset 9px 0 6px -6px rgba(0, 0, 0, 0.16),
      inset 14px 0 10px -10px rgba(0, 0, 0, 0.2),
      inset 18px 0 14px -14px rgba(0, 0, 0, 0.2);
  }

  /*@media (min-width: 1176px) {*/
  /*  border-radius: var(--space-2);*/
  /*}*/

  .chevron {
    background: var(--midBlue);
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.08),
      2px 2px 2px rgba(0, 0, 0, 0.1),
      4px 4px 6px rgba(0, 0, 0, 0.14),
      8px 8px 12px rgba(0, 0, 0, 0.16);
    display: block;
    height: 50px;
    left: 12%;
    margin-top: -25px;
    position: absolute;
    top: 100%;
    transform: rotate(45deg) skew(-12deg, -12deg);
    width: 50px;
    z-index: 5;

    &::before {
      background: var(--midBlue);
      content: "";
      display: block;
      height: 80px;
      left: -10px;
      position: absolute;
      top: -31px;
      transform: rotate(69deg) skew(24deg, -24deg);
      width: 40px;
      z-index: 10;
    }

    @media (min-width: 601px) {
      box-shadow:
        2px 1px 2px rgba(0, 0, 0, 0.08),
        4px 2px 4px rgba(0, 0, 0, 0.12),
        6px 4px 8px rgba(0, 0, 0, 0.16),
        8px 8px 16px rgba(0, 0, 0, 0.2);
    }
  }

  &.chevron-at-right {
    .chevron {
      left: auto;
      right: 12%;
    }
  }

  &:nth-child(1) {
    background: var(--green);
    z-index: 60;

    .chevron,
    .chevron::before {
      background: var(--green);
    }
  }
  &:nth-child(2) {
    background: var(--midBlue);
    z-index: 59;

    .chevron,
    .chevron::before {
      background: var(--midBlue);
    }
  }
  &:nth-child(3) {
    background: var(--blueGreen);
    z-index: 58;

    .chevron,
    .chevron::before {
      background: var(--blueGreen);
    }
  }
  &:nth-child(4) {
    background: var(--midBlue);
    z-index: 57;

    .chevron,
    .chevron::before {
      background: var(--midBlue);
    }
  }
  &:nth-child(5) {
    background: var(--darkBlue);
    z-index: 56;

    .chevron,
    .chevron::before {
      background: var(--darkBlue);
    }
  }
  &:nth-child(6) {
    background: var(--green);
    z-index: 55;

    .chevron,
    .chevron::before {
      display: none;
    }
  }

  @media (min-width: 601px) {
    .chevron {
      left: 100%;
      margin-left: -25px;
      top: 50%;
      transform: rotate(-45deg) skew(-12deg, -12deg);
    }

    &:nth-child(1) {
      background: var(--green);

      .chevron,
      .chevron::before {
        background: var(--green);
      }
    }
    &:nth-child(2) {
      background: var(--darkBlue);

      .chevron,
      .chevron::before {
        background: var(--darkBlue);
      }
    }
    &:nth-of-type(n + 3) {
      box-shadow:
        inset 2px 1px 0 -1px rgba(0, 0, 0, 0.08),
        inset 6px 2px 4px -4px rgba(0, 0, 0, 0.12),
        inset 9px 4px 6px -6px rgba(0, 0, 0, 0.16),
        inset 14px 6px 10px -10px rgba(0, 0, 0, 0.2),
        inset 18px 8px 14px -14px rgba(0, 0, 0, 0.2);
    }
    &:nth-child(3) {
      background: var(--midBlue);

      .chevron,
      .chevron::before {
        background: var(--midBlue);
      }
    }
    &:nth-child(4) {
      background: var(--blueGreen);

      .chevron,
      .chevron::before {
        background: var(--blueGreen);
      }
    }
    &:nth-child(5) {
      background: var(--darkBlue);

      .chevron,
      .chevron::before {
        background: var(--darkBlue);
      }
    }
    &:nth-child(6) {
      background: var(--green);

      .chevron,
      .chevron::before {
        background: var(--green);
      }
    }
  }

  @media (min-width: 801px) {
    &:nth-child(1) {
      background: var(--green);

      .chevron,
      .chevron::before {
        background: var(--green);
      }
    }
    &:nth-child(2) {
      background: var(--midBlue);

      .chevron,
      .chevron::before {
        background: var(--midBlue);
      }
    }
    &:nth-child(3) {
      background: var(--blueGreen);
      box-shadow:
        inset 2px 0 2px -1px rgba(0, 0, 0, 0.08),
        inset 6px 0 4px -4px rgba(0, 0, 0, 0.12),
        inset 9px 0 6px -6px rgba(0, 0, 0, 0.16),
        inset 14px 0 10px -10px rgba(0, 0, 0, 0.2),
        inset 18px 0 14px -14px rgba(0, 0, 0, 0.2);

      .chevron,
      .chevron::before {
        display: none;
      }
    }
    &:nth-child(4) {
      background: var(--midBlue);

      .chevron,
      .chevron::before {
        background: var(--midBlue);
      }
    }
    &:nth-child(5) {
      background: var(--blueGreen);

      .chevron,
      .chevron::before {
        background: var(--blueGreen);
        display: block;
      }
    }
    &:nth-child(6) {
      background: var(--green);

      .chevron,
      .chevron::before {
        display: none;
      }
    }
  }
  @media (min-width: 1081px) {
    &:nth-child(1),
    &:nth-child(4) {
      box-shadow: none;
    }
  }
}


/* === controls.css === */
/* toggle icons */

.toggle-icon,
.close-link {
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.toggle-icon span,
.close-link span {
  background-color: var(--darkBlue);
  border-radius: 2px;
  display: block;
  height: 3px;
  margin-top: -1px;
  position: relative;
  transition: all 0.3s ease;
  width: 20px;
}

.toggle-icon span {
  position: absolute;
  top: 50%;
}

.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  opacity: 0;
}

.close-menu-link,
.burger.toggle-icon {
  cursor: pointer;
  height: 17px;
  position: relative;
  width: 21px;
  z-index: 405;
}

.close-menu-link {
  display: grid;
  grid-template-columns: 1fr auto;
}

.burger.toggle-icon span {
  background-color: var(--white);
  border-radius: 2px;
  display: block;
  height: 3px;
  margin-top: 4px;
  position: relative;
  top: 0;
  transition: all 0.3s ease;
  width: 100%;

  &:first-of-type {
    margin-top: 0;
  }
}

.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  opacity: 0;
}

.is-active .burger.toggle-icon span,
.burger.toggle-input:checked ~ .burger.toggle-icon span {
  &:nth-child(1) {
    transform: rotate(45deg) translate(3px, -3px);
    transform-origin: top left;
  }
  &:nth-child(2) {
    opacity: 0;
    transform-origin: center center;
    width: 0;
  }
  &:nth-child(3) {
    transform: rotate(-45deg) translate(3px, 3px);
    transform-origin: bottom left;
  }
}

.close-container {
  align-items: center;
  display: grid;
  justify-content: end;
  margin-top: var(--space-2);

  @media (min-width: 1201px) {
    margin-top: var(--space-3);
  }
}

.close-link {
  align-items: center;
  display: grid;
  font-weight: 700;
  grid-column-end: 2;
  grid-gap: var(--space-3);
  grid-template-columns: auto auto;

  span {
    width: 16px;
  }

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

.plus-and-minus.toggle-icon {
  transition: all 0.3s ease-in-out;

  span {
    &:nth-child(1) {
      transform: rotate(90deg);
      /*transform-origin: top left;*/
    }

    &:nth-child(2) {
      transform: rotate(0deg);
      /*transform-origin: bottom left;*/
    }
  }
}

.plus-and-minus.toggle-input:checked ~ .plus-and-minus.toggle-icon {
  transform: rotate(90deg);

  span {
    &:nth-child(1) {
      transform: rotate(90deg);
      /*transform-origin: top left;*/
    }
    &:nth-child(2) {
      transform: rotate(90deg);
      /*transform-origin: bottom left;*/
    }
  }
}


/* === footer.css === */
footer {
  background: var(--darkBlue);
  color: var(--white);

  svg.behomed-logo {
    height: 30px;
    transform: translateY(1px);
  }

  p {
    margin: 0;
  }

  a {
    text-decoration: none;

    &:visited {
      color: var(--top-site-bar-text-color-step-5);
    }

    &:active,
    &:focus,
    &:hover {
      color: var(--green);

      svg path {
        fill: var(--green);
      }
    }
  }

  .text-stack {
    align-content: start;
  }

  .footer-content {
    display: grid;
    grid-gap: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    width: 100%;

    @media (min-width: 601px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 801px) {
      grid-template-columns: 220px 1fr 1fr 1fr;
      padding-top: var(--space-6);
      padding-bottom: var(--space-6);
    }
  }

  .quick-links {
    @media (min-width: 601px) and (max-width: 800px) {
      grid-row-start: 2;
    }
  }

  .quick-links,
  .legal-links,
  .social-links {
    margin-top: 13px;
  }

  .icon-link {
    align-items: center;
    display: grid;
    grid-gap: var(--space-2);
    grid-template-columns: auto 1fr;

    svg {
      height: 16px;
    }
  }

  .h4,
  ul {
    text-transform: uppercase;
  }

  .h4 {
    font-weight: 700;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    ul {
      list-style: disc;

      li {
        margin-top: -8px;

        &::before {
          display: none;
        }
      }
    }
  }

  ul ul {
    margin: var(--space-3) var(--space-2) var(--space-2) var(--space-3);
  }

  li {
    font-size: calc(var(--base-font-size) * 0.75);
  }

  .registered-address {
    padding-bottom: var(--space-5);

    @media (min-width: 801px) {
      text-align: center;
    }
  }
}


/* === form-range-input.css === */
.range-container {
  display: grid;
  justify-content: center;
}

.range-value {
  position: relative;
  display: none;
  text-align: center;
  font-size: 6em;
  color: #999;
  font-weight: 400;
}

.controlled-by-js .range-value {
  display: block;
}

.range {
  width: 400px;
  height: 15px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-green);
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px var(--color-green);
}


/* === form.css === */
form {
  button {
    display: inline-block;

    &:active,
    &:focus,
    &:hover {
      cursor: pointer;
    }
  }

  .main-label {
    font-weight: 700;
  }
}

.application-form {
  display: grid;
  grid-gap: var(--space-5);
  margin: 0 auto;
  max-width: 600px;
}

textarea {
  min-height: 120px;
}

fieldset {
  border: 0;
  padding: 0;
}

label {
  display: block;
}

.form-navigation {
  display: grid;
  grid-gap: var(--space-4);
  grid-template-columns: auto auto;
  justify-content: space-between;
  width: 100%;

  div:last-of-type {
    text-align: right;
  }
}

/*.justify-end {*/
/*  text-align: right;*/
/*}*/

.single-column.width-half {
  @media (min-width: 601px) {
    max-width: 600px;
  }
}

.form-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-3);

  @media (min-width: 801px) {
    grid-gap: var(--space-4);
  }

  .text-input,
  select,
  textarea,
  > label,
  .radio-container,
  .checkbox-container,
  p {
    grid-column: span 12;
  }

  .text-input {
    &:active,
    &:focus {
      outline: 2px solid var(--darkBlue);
      outline-offset: 2px;
    }
  }
}

.field-helper-text {
  color: var(--grey-60);
  font-size: calc(var(--base-font-size) * 0.9);
}

.simple-form {
  .form-row {
    .text-input,
    select,
    textarea {
      @media (min-width: 801px) {
        grid-column: span 8;
      }

      @media (min-width: 1201px) {
        grid-column: span 6;
      }
    }
  }
}

p.form-head-error,
.has-error p,
.has-error .main-label,
.field-error-message {
  color: var(--orange);
  font-weight: 600;
}

.field-error-message {
  font-size: calc(var(--base-font-size) * 0.85);
}

.checkbox-group,
.radio-buttons-group {
  display: grid;
  grid-column: span 12;
  grid-gap: var(--space-3);
}

.checkbox-container,
.radio-container {
  align-items: start;
  display: grid;
  grid-gap: var(--space-3);
  grid-template-columns: auto 1fr;

  label {
    padding-top: 1px;
  }
}

.input-with-prefix {
  align-items: center;
  display: grid;
  grid-gap: var(--space-3);
  grid-template-columns: auto 1fr;
}

.input-prefix {
  font-size: calc(var(--base-font-size) * 1.25);
}

.text-input,
select,
textarea {
  background: var(--background);
  border: 2px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--foreground);
  font-family: "Raleway";
  font-size: calc(var(--base-font-size) * 1.1);
  padding: calc(var(--space-2) * 1.5);
}

input[type="checkbox"] {
  height: 20px;
  width: 20px;
}

/** credit / thanks to https://moderncss.dev/pure-css-custom-checkbox-style/ */
input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1.2em 1.2em var(--green);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:focus {
  outline: 2px solid var(--darkBlue);
  outline-offset: 2px;
}

.checkbox {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

.checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.checkbox:checked::before {
  transform: scale(1);
}

.checkbox:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

.checkbox:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.review-information {
  margin: 30px 0;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 5px;
}

.review-section {
  display: grid;
  grid-gap: var(--space-4);
}

.review-head {
  border-bottom: 1px solid #ddd;
  display: grid;
  grid-template-columns: 1fr auto;
  padding-bottom: var(--space-4);
}

.form-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  width: 100%;

  .step {
    align-content: center;
    display: grid;
    justify-content: center;

    p {
      background: var(--grey-90);
      border-radius: 100%;
      color: var(--white);
      height: 24px;
      padding-top: 4px;
      width: 24px;
    }

    &.active p {
      background: var(--orange);
    }

    &.completed p {
      background: var(--darkBlue);
    }
  }

  .step.active {
    font-weight: 700;
  }
}

.btn-link {
  background: url("/wp-content/themes/behomed/images/icons/edit-pencil-black-2.png") no-repeat left
    center/14px;
  color: var(--darkBlue);
  padding-left: 20px;
}

.btn-link:hover {
  color: var(--orange);
}

.review-table {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 100%;
  margin: 0;
  padding: 0;

  @media (min-width: 801px) {
    grid-template-columns: 25% 1fr;
  }
}

.review-table dt {
  font-weight: 600;
  padding: 8px 10px;
  margin: 0;
}

.review-table dd {
  padding: 8px 10px;
}

.review-table dt,
.review-table dd {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.review-table dt:nth-of-type(even),
.review-table dd:nth-of-type(even) {
  background-color: #f2f2f2;
}

.review-table ul {
  margin: 0;
  padding-left: 20px;
}

/** do not change */
.msg {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

.form-radios {
  input {
    display: block;

    @media (min-width: 601px) {
      display: inline-block;
      margin-right: var(--space-4);
    }
  }
}

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;

  .step-counter {
    background: var(--green);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--green);
  }
}

.stepper-item.completed .step-counter {
  background-color: var(--green);
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid var(--green);
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}


/* === hero.css === */
.hero {
  background: var(--darkBlue);
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  text-align: left;
  z-index: 1000;

  &.with-mask::before {
    background: linear-gradient(
      215deg,
      rgba(24, 26, 56, 0.4),
      rgba(24, 26, 56, 0.9)
    );
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
  }

  .hero-text {
    display: grid;
    grid-gap: var(--space-6);
  }

  .hero-content {
    position: relative;
    z-index: 10;

    .content-width-wrapper {
      align-items: center;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      min-height: 56vw;
      justify-content: start;
      padding-top: var(--space-5);
      padding-bottom: var(--space-5);

      @media (min-width: 801px) {
        min-height: 40.4vw;
      }

      @media (min-width: 1201px) {
        padding: var(--space-7) 0;
      }

      @media (min-width: 1001px) and (min-height: 900px) {
        min-height: 560px;
      }
    }
  }

  h1,
  h2,
  p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
  }

  .hero-text {
    grid-column: span 12;

    @media (min-width: 801px) {
      grid-column: span 8;
    }
  }

  .h1 {
    color: var(--white);
    position: relative;
    z-index: 4;
  }

  .h3 {
    font-weight: 600;
  }

  /* Bottom CTA link */
  .hero-bottom-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    z-index: 40;
  }
  .find-out-more-link {
    color: #fff;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 10px;
    font-weight: 600;
  }
  .find-out-more-link .label {
    color: #fff;
  }
  .find-out-more-link .icon svg {
    display: block;
  }
}

.faq-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-faq-sml.jpg") no-repeat left center/cover;
}

.tenant-buyer-page,
.landlords-page,
.developers-page,
.investors-page,
.press-page {
  .hero {
    @media (min-width: 801px) {
      &.with-mask::before {
        display: none;
      }
    }
  }
}

.press-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-family-painting-wall-portrait.jpg")
    no-repeat left center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-family-painting-wall-1200.jpg")
      no-repeat left center/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-family-painting-wall-2500.jpg")
      no-repeat left center/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-family-painting-wall-4000.jpg")
      no-repeat left center/cover;
  }
}

.tenant-buyer-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-girl-with-teddy-portrait.jpg") no-repeat
    left center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-girl-with-teddy-1200.jpg") no-repeat
      left center/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-girl-with-teddy-2500.jpg") no-repeat
      left center/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-girl-with-teddy-4000.jpg") no-repeat
      left center/cover;
  }
}

.landlords-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-woman-with-laptop-portrait.jpg")
    no-repeat right center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-with-laptop-1200.jpg") no-repeat
      right center/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-with-laptop-4000.jpg") no-repeat
      right center/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-with-laptop-4000.jpg") no-repeat
      right center/cover;
  }
}

.investors-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-woman-in-white-portrait.jpg") no-repeat
    center center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-in-white-1200.jpg") no-repeat
      center center/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-in-white-2500.jpg") no-repeat
      center center/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-woman-in-white-4000.jpg") no-repeat
      center center/cover;
  }
}

.developers-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-man-in-hard-hat-portrait.jpg") no-repeat
    right center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-man-in-hard-hat-1200.jpg") no-repeat
      right center/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-man-in-hard-hat-2500.jpg") no-repeat
      right center/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-man-in-hard-hat-4000.jpg") no-repeat
      right center/cover;
  }
}

.apply-here-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-portrait.jpg") no-repeat
    center top/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-1200.jpg") no-repeat
      center top/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-2500.jpg") no-repeat
      center top/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-4000.jpg") no-repeat
      center top/cover;
  }
}

.get-your-guide-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/bh-hero-resources-portrait.jpg") no-repeat
    center top/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/bh-hero-resources-1200.jpg") no-repeat
      center top/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/bh-hero-resources-2500.jpg") no-repeat
      center top/cover;
  }

  @media (min-width: 2401px) {
    background: url("/wp-content/themes/behomed/images/hero/bh-hero-resources-4000.jpg") no-repeat
      center top/cover;
  }
}

.who-we-are-page .hero,
.thank-you-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-sheila-blue-wall-1200.jpg") no-repeat
    right 10%/100%;
  min-height: 35vh;

  .hero-text {
    grid-column: span 7;
  }

  @media (min-width: 801px) {
    background-position: center 20%;
    min-height: 450px;
  }

  @media (min-width: 1201px) {
    background-image: url("/wp-content/themes/behomed/images/hero/hero-sheila-blue-wall-2500.jpg");
    background-position: center 30%;
  }

  @media (min-width: 2401px) {
    background-image: url("/wp-content/themes/behomed/images/hero/hero-sheila-blue-wall-4000.jpg");
    background-position: center center;
  }
}

.get-free-guide-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-portrait.jpg") no-repeat
    center center/cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-walking-upstairs-1200.jpg") no-repeat
      center center/cover;
  }
}

.serious-page .hero {
  background: url("/wp-content/themes/behomed/images/hero/hero-serious-page-portrait.jpg") no-repeat
    center 30% / cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-serious-page-1200.jpg") no-repeat
      center 30% / cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-serious-page-2500.jpg") no-repeat
      center 30% / cover;
  }
}

.calendar-page .hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);

  .hero-text {
    grid-gap: var(--space-4);
  }

  iframe {
    border-radius: 10px;
  }

  .content-width-wrapper {
    align-items: center;
    display: grid;
  }
  background: url("/wp-content/themes/behomed/images/hero/hero-calendar-portrait.jpg") no-repeat center
    30% / cover;

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/hero/hero-calendar-2500.jpg") no-repeat center
      30% / cover;
  }
}


/* === homepage.css === */
.homepage-intro {
  p {
    font-size: 20px;

    @media (min-width: 801px) {
      font-size: 22px;
    }

    @media (min-width: 1081px) {
      font-size: 24px;
    }
  }
}

.press-section iframe {
  width: 100%;
  height: 55vw;
  max-height: 650px;
  max-width: 1080px;
}

.home-page {
  background: var(--darkBlue);
}

.category-container {
  display: grid;

  @media (min-width: 601px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  @media (min-width: 1081px) {
    border-radius: var(--space-3);
    overflow: hidden;
  }
}

.category-tile {
  display: grid;
  grid-template-rows: 210px auto;
  overflow: hidden;

  @media (min-width: 601px) {
    grid-template-rows: 240px 1fr;
  }

  @media (min-width: 1001px) {
    grid-template-rows: 310px auto;
  }

  &:nth-of-type(1) {
    background: var(--green);
  }
  &:nth-of-type(1) .btn {
    color: var(--green);
  }
  &:nth-of-type(2) {
    background: var(--blueGreen);
  }
  &:nth-of-type(2) .btn {
    color: var(--blueGreen);
  }
  &:nth-of-type(3) {
    background: var(--midBlue);
  }
  &:nth-of-type(3) .btn {
    color: var(--midBlue);
  }
  &:nth-of-type(4) {
    background: var(--top-site-bar-back-color-step-5);
  }
  &:nth-of-type(4) .btn {
    color: var(--top-site-bar-back-color-step-5);
  }

  .text-stack {
    grid-template-rows: auto 1fr auto;
    padding: var(--space-3) var(--space-4) var(--space-4) var(--space-4);
    position: relative;

    &::before {
      background: inherit;
      box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.04),
        inset 0 2px 2px rgba(0, 0, 0, 0.06),
        inset 0 4px 4px rgba(0, 0, 0, 0.08),
        inset 0 8px 8px rgba(0, 0, 0, 0.1);
      content: "";
      display: block;
      height: 300px;
      position: absolute;
      width: 100%;
    }

    h3 {
      margin-top: var(--space-3);
    }

    h3,
    p,
    a {
      position: relative;
      z-index: 20;
    }

    .btn {
      font-size: calc(var(--base-font-size) * 0.9);
    }
  }
}

.tile-background {
  background-position: center center;
  background-size: cover;
}

#tile-buyer .tile-background {
  background-image: url("/wp-content/themes/behomed/images/homepage-tiles/homepage-tile--tenant-buyer.jpg");
}

#tile-landlord .tile-background {
  background-image: url("/wp-content/themes/behomed/images/homepage-tiles/homepage-tile--landlord.jpg");
  background-position: center 70%;
}

#tile-investor .tile-background {
  background-image: url("/wp-content/themes/behomed/images/homepage-tiles/homepage-tile--investor.jpg");
}

#tile-developer .tile-background {
  background-image: url("/wp-content/themes/behomed/images/homepage-tiles/homepage-tile--developer.jpg");
}

.content-section.who-we-are {
  background: url("/wp-content/themes/behomed/images/hero/hero-sheila-blue-wall-portrait.jpg") no-repeat
    center bottom/cover;

  .content-width-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    .text-content {
      grid-column: span 12;

      @media (min-width: 801px) {
        grid-column: span 8;
      }
    }
  }

  @media (min-width: 801px) {
    background: url("/wp-content/themes/behomed/images/section-sheila-crop-right-1200.jpg") no-repeat
      right top/cover;
  }

  @media (min-width: 1201px) {
    background: url("/wp-content/themes/behomed/images/section-sheila-crop-right-2500.jpg") no-repeat
      right top/cover;
  }

  @media (min-width: 1801px) {
    background: url("/wp-content/themes/behomed/images/section-sheila-crop-right-widest.jpg") no-repeat
      right top/cover;
  }
}

.news-article-container {
  display: grid;
  grid-gap: var(--space-5);

  @media (min-width: 601px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1001px) {
    grid-template-columns: repeat(3, 1fr);
  }

  .press-article {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .h3 {
    font-size: 24px;
  }

  svg,
  img {
    display: block;
    height: 30px;

    @media (min-width: 601px) {
      height: 35px;
    }
  }

  .btn {
    border: 2px solid var(--darkBlue);
  }

  article {
    border-radius: var(--radius-2);
    box-shadow: var(--box-shadow-large-soft);
    overflow: hidden;
  }

  .source-logo-holder,
  .text-stack {
    padding: var(--space-4);
  }

  .source-logo-holder {
    background: var(--top-site-bar-text-color-step-9);
  }

  .text-stack {
    grid-template-rows: 1fr auto;
  }
}


/* === investors.css === */
.investors-page {
  .grid-5 {
    align-items: start;
    display: grid;
    grid-gap: var(--space-5);

    @media (min-width: 601px) {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  .cell {
    align-items: start;

    @media (min-width: 601px) {
      &:nth-of-type(1) {
        grid-column-start: 1;
        grid-column-end: 7;
      }
      &:nth-of-type(2) {
        grid-column-start: 7;
        grid-column-end: 13;
      }
      &:nth-of-type(3) {
        grid-column-start: 4;
        grid-column-end: 10;
      }
      &:nth-of-type(4) {
        grid-column-start: 1;
        grid-column-end: 7;
      }
      &:nth-of-type(5) {
        grid-column-start: 7;
        grid-column-end: 13;
      }
    }
    @media (min-width: 801px) {
      &:nth-of-type(1) {
        grid-column-start: 1;
        grid-column-end: 5;
      }
      &:nth-of-type(2) {
        grid-column-start: 5;
        grid-column-end: 9;
      }
      &:nth-of-type(3) {
        grid-column-start: 9;
        grid-column-end: 13;
      }
      &:nth-of-type(4) {
        grid-column-start: 3;
        grid-column-end: 7;
      }
      &:nth-of-type(5) {
        grid-column-start: 7;
        grid-column-end: 11;
      }
    }

    h3 {
      border-bottom: 8px solid var(--orange);
      display: inline-block;
      font-size: calc(var(--base-font-size) * 1.75);
      justify-self: start;
      padding-bottom: var(--space-2);
    }
  }
  .subheading {
    font-weight: 700;
    text-transform: uppercase;
  }
}

/* === landlords.css === */
.bullet-point.with-chevron,
.with-chevron li {
  background: transparent url("/wp-content/themes/behomed/images/icons/chevron-right.png") no-repeat
    left top/15px;
  padding-left: 20px;
}

.with-chevron li {
  background-position: 0 1px;
}

.with-chevron.color--darkBlue li {
  background-image: url("/wp-content/themes/behomed/images/icons/chevron-right--darkBlue.png");
}

.three-steps-container {
  @media (min-width: 1081px) {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
  }

  .cell {
    color: var(--white);
  }

  .heading-wrap {
    padding: var(--space-5) var(--space-4) 0 var(--space-4);

    @media (min-width: 601px) {
      padding: 48px 32px 0 32px;
    }

    @media (min-width: 1081px) {
      padding: 56px 0 0 0;
    }

    @media (min-width: 1501px) {
      padding: 64px 0 0 0;
    }
  }
}


/* === main-menu.css === */
@keyframes fadeMenuIn {
  0%,
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

main.home-page #link-tenant-buyers,
main.landlords-page #link-landlords,
main.investors-page #link-investors,
main.developers-page #link-developers {
  color: var(--green);
}

.site-navigation {
  background-color: var(--top-site-bar-back-color-step-5);
  background-image: linear-gradient(
    to right,
    var(--darkBlue) 0%,
    var(--header-border-color) 25% 75%,
    var(--darkBlue) 100%
  );
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.02),
    inset 0 2px 2px rgba(0, 0, 0, 0.02),
    inset 0 4px 4px rgba(0, 0, 0, 0.04),
    inset 0 8px 8px rgba(0, 0, 0, 0.04),
    inset 0 16px 16px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-gap: var(--space-4);
  height: 0;
  opacity: 0;
  overflow: scroll;
  position: static;
  transition:
    height 0.15s ease-in-out,
    opacity 0.3s ease-in-out;
  width: 100%;
  z-index: 110;

  &.is-visible {
    height: auto;
    opacity: 1;
    position: relative;
  }
  &.controlled-by-js {
    &.is-visible {
      height: calc(100vh - var(--top-site-bar-height-mobile));
      position: absolute;

      @media (min-width: 601px) {
        height: calc(100vh - var(--top-site-bar-height-desktop));
      }
    }
  }

  .content-width-wrapper {
    display: grid;
  }

  p,
  a {
    color: var(--white);
    font-weight: 400;
    text-decoration: none;
  }

  p,
  a:not(:visited) {
    font-weight: 700;
  }

  a:not(.btn):visited {
    color: var(--top-site-bar-text-color-step-4);
  }

  p.top-level-menu-item,
  a.top-level-menu-item {
    color: var(--white) !important;
    font-size: calc(var(--base-font-size) * 1.25);
    font-weight: 700;
    position: relative;
    text-transform: uppercase;

    &::before {
      content: "";
      margin-bottom: -0.262em;
      display: table;
    }

    &::after {
      content: "";
      margin-top: -0.266em;
      display: table;
    }

    svg {
      height: 24px;
      position: absolute;
      right: 0;
      stroke: var(--white);
      stroke-linecap: round;
      stroke-width: 10;
      transform: translateY(3px) rotate(90deg);
      transition: all 0.2s ease-in-out;

      @media (min-width: 601px) {
        display: none;
      }
    }

    @media (max-width: 600px) {
      &:active,
      &:focus,
      &:hover {
        color: var(--green) !important;
      }
    }

    @media (min-width: 601px) {
      cursor: pointer;

      &:active,
      &:focus,
      &:hover {
        color: var(--white) !important;
      }
    }
  }

  .menu-item {
    &.divider {
      border-top: 1px solid var(--midBlue);
      padding-top: var(--space-3);
    }
  }

  .submenu-container {
    padding: 0 var(--space-2) var(--space-4) var(--space-2);

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

  .submenu {
    align-items: start;
    display: grid;
    grid-gap: var(--space-3);
    justify-content: start;
    max-height: 9999px;
    max-width: 740px;
    overflow: hidden;
    padding-left: var(--space-2);
    text-align: left;
    transition: all 0.3s ease-in-out;
    width: 100%;

    a {
      display: block;
      font-size: var(--base-font-size);
      text-transform: none;
      position: relative;

      .link-text {
        display: inline-block;
        transition: all 0.1s ease-in-out;
      }

      &.active {
        .link-text {
          transform: translateX(var(--space-5));
        }
      }
    }

    a::after {
      opacity: 0;
      transition: opacity 0.1s ease-in-out 0.1s;
    }

    a.active::after {
      animation: spin 2s linear infinite;
      border: 2px solid rgba(255, 255, 255, 0.7);
      border-top: 2px solid transparent;
      border-radius: 50%;
      content: "";
      display: inline-block;
      height: 14px;
      opacity: 1;
      position: absolute;
      left: 0;
      top: calc(50% - 9px);
      width: 14px;
      z-index: 4;
    }

    li {
      margin: 0 !important;
    }

    a,
    li {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  .menu-container {
    align-content: start;
    display: grid;
    grid-gap: var(--space-4);
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    padding: var(--space-4);
    text-align: left;
    width: 100%;

    @media (min-width: 601px) {
      padding: var(--space-5);
    }

    @media (min-width: 801px) {
      grid-template-rows: auto auto;
      padding: var(--space-6);
    }
  }
}

.menu-primary,
.menu-section {
  align-content: start;
  border-bottom: 1px solid var(--midBlue);
  display: grid;
  grid-column: span 12;
  grid-gap: var(--space-4);
  padding: var(--space-3) 0 0 0;

  @media (max-width: 600px) {
    &.closed {
      .submenu {
        max-height: 0;
      }
    }

    &.open {
      .top-level-menu-item {
        svg {
          transform: translateY(3px) rotate(90deg) scaleX(-1);
        }
      }
    }
  }

  &.menu-highlight {
    background: var(--midBlue);
    border: 0;
    border-radius: var(--space-3);
    margin-top: -12px;
    padding: var(--space-4);

    .btn.bg--orange {
      &:active,
      &:focus,
      &:hover {
        color: var(--darkBlue) !important;
      }
    }
  }

  @media (min-width: 601px) {
    grid-column: span 6;
  }

  @media (min-width: 801px) {
    grid-column: span 4;
  }
}

.close-menu-container {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 20px var(--space-3) var(--space-4) 0;
}


/* === posts.css === */
.press-clipping-container,
.post-preview {
  display: grid;
  grid-gap: var(--space-4);
  justify-content: space-between;
  width: 100%;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a {
    text-decoration: none;
    transition: all 0.1s ease-in-out;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    opacity: 0.8;
  }

  .h2 {
    font-size: 40px;
    text-transform: unset;

    &::before {
      margin-bottom: 12px;
    }
  }
}

.press-clipping-container {
  @media (min-width: 601px) {
    grid-template-columns: auto auto;
  }
}

.publication-logo-container {
  align-content: start;
  display: grid;
  grid-gap: var(--space-6);
  justify-content: center;

  img,
  svg {
    height: 20px;
  }
}

.publication-info {
  font-size: 12px;
}

.light-weight {
  color: var(--grey-40);
  font-weight: 400;
}

.fake-link {
  padding-right: 28px;
  text-decoration: underline !important;
}

.posts-list {
  margin-top: var(--space-3);
  position: relative;
  width: 100%;

  @media (min-width: 601px) {
    margin-top: var(--space-3);
  }

  @media (min-width: 801px) {
    margin-top: var(--space-5);
  }
}

.post-preview-container.carousel {
  display: flex;
  margin: 0 calc(var(--space-4) * -1);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  position: relative;
  width: 100vw;

  @media (min-width: 601px) {
    margin: 0 -36px;
  }

  @media (min-width: 1081px) {
    width: var(--max-width);
  }

  @media (min-width: 1176px) {
    margin: 0 -36px;
    padding: var(--space-3) 0;
    width: calc(var(--max-width) + 36px);
  }

  &::-webkit-scrollbar {
    display: none;
  }

  .post-preview {
    scroll-snap-align: start;
    flex: 0 0 280px;
    opacity: 1;
    padding: 0 16px;
    transition: all 0.3s ease-in-out;
    width: 280px;

    @media (min-width: 601px) {
      flex: 0 0 343px;
      width: 343px;

      &:first-of-type {
        margin-left: var(--space-4);
      }
    }

    @media (min-width: 1081px) {
      &.out-of-view {
        opacity: 0;
      }
    }

    @media (min-width: 1176px) {
      flex: 0 0 calc((1080px + 16px) / 3);
      width: calc((1080px + 16px) / 3);
    }
  }
}

.carousel-controls {
  display: flex;
  gap: 8px;
  position: absolute;
  right: 0;
  top: -56px;
  z-index: 10;

  @media (min-width: 1081px) {
    top: -61px;
  }
}

.carousel-btn {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  width: 40px;

  &:hover {
    transform: scale(1.05);

    svg {
      stroke: var(--midBlue);
    }
  }

  &:active {
    transform: scale(0.95);
  }

  &:disabled,
  &.disabled {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
  }

  &.carousel-btn-prev {
    svg {
      transform: scaleX(-1);
    }
  }

  svg {
    height: 32px;
    stroke: var(--darkBlue);
    stroke-width: 5;
    width: 32px;
  }
}

.content-section:not(.bg-white) {
  .carousel-btn {
    svg {
      stroke: var(--white);
    }

    &:active,
    &:focus,
    &:hover {
      svg {
        stroke: var(--blueGreen-pale);
      }
    }
  }
}

.scroll-markers {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}

.scroll-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;

  &.active {
    background: var(--orange);
    transform: scale(1.2);
  }
}

.content-section:not(.bg-white) {
  .scroll-marker.active {
    background: var(--green-pale);
  }
}

.carousel-btn-prev img {
  transform: rotate(180deg);
}

.post-preview {
  align-content: start;
  grid-gap: var(--space-5);
  margin: 0;
  transform-origin: center 100px;
  transition: all 0.1s ease-in-out;

  @media (min-width: 601px) {
    transform-origin: center 110px;
  }

  @media (min-width: 801px) {
    transform-origin: center 120px;
  }

  .text-stack {
    align-content: start;
  }

  h4,
  h5 {
    font-size: calc(var(--base-font-size) * var(--h4-font-scale) * 1.1);
    line-height: 1.3;
    text-transform: unset;
  }

  p,
  a {
    font-size: calc(
      var(--base-font-size) * var(--h4-font-scale) * 0.9
    ) !important;
  }

  p a {
    &:active,
    &:focus,
    &:hover {
      color: inherit !important;
      text-decoration: underline !important;
    }
  }

  &:focus,
  &:hover {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
      opacity: 1;
    }
    .post-preview-thumbnail {
      box-shadow: var(--box-shadow-small);

      &::after {
        opacity: 1;
      }
    }
    transform: scale(1.03) translateY(-4px);
  }
}

.post-preview-image-container {
  display: grid;
  grid-gap: var(--space-4);
}

.post-preview-thumbnail {
  padding: 0;
  border-radius: 4px;
  box-shadow: var(--box-shadow-very-small);
  display: block;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;

  &::after {
    align-items: center;
    background: rgba(255, 255, 255, 0.8)
      url("/wp-content/themes/behomed/images/icons/open-in-new-tab.png") no-repeat center center/36px;
    bottom: 0;
    content: "";
    display: grid;
    height: 100%;
    left: 0;
    opacity: 0;
    padding-left: var(--space-2);
    position: absolute;
    transition: all 0.1s ease-in-out;
    width: 100%;
  }

  @media (min-width: 601px) {
    height: 220px;
  }

  @media (min-width: 801px) {
    height: 240px;
  }

  img {
    min-height: 100%;
    object-fit: cover;
    transition: all 0.1s ease-in-out;
    width: 100%;
  }
}

.single-post-hero {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  height: 60vw;

  @media (min-width: 601px) {
    height: 50vw;
  }

  @media (min-width: 801px) {
    height: 30vw;
  }
}

.single-post-page {
  .entry-content {
    h4 {
      margin-bottom: 0 !important;
      text-transform: unset;
    }
  }

  /* the fixed value of margin-top is to align the baselines of the quote with the paragraph */
  /* it will render alongside */
  blockquote {
    color: var(--blueGreen);
    font-size: calc(var(--base-font-size) * var(--h2-font-scale));
    font-weight: 700;
    line-height: 1.2;
    margin: var(--space-6) 0;
    position: relative;
    width: 100%;

    &::before {
      background: transparent url("/wp-content/themes/behomed/images/icons/open-quote-2.png") no-repeat
        center/contain;
      content: "";
      display: block;
      float: left;
      height: 48px;
      margin-left: -36px;
      margin-right: var(--space-3);
      width: 68px;
    }

    @media (min-width: 601px) {
      width: 80%;
    }

    @media (min-width: 801px) {
      float: left;
      margin: -11px var(--space-5) var(--space-3) 0;
      width: 45%;
    }
  }
}

.entry-content {
  h2,
  h3,
  h4,
  p {
    margin: var(--space-5) 0;

    @media (min-width: 601px) {
      margin: var(--space-6) 0;
    }
  }

  .post-date {
    margin-top: 0;
  }
}

.back-btn {
  display: grid;
  justify-content: left;
}


/* === third-party-logos.css === */
.articles-and-opinions-heading {
  width: 60vw;

  @media (min-width: 601px) {
    width: auto;
  }
}

.third-party-logos-container {
  text-align: center;

  .h3 {
    font-size: 24px;
  }

  .logos {
    align-items: center;
    justify-items: center;
    display: grid;
    grid-gap: var(--space-4);
    padding: var(--space-4) 0;

    @media (min-width: 551px) {
      align-items: center;
      grid-gap: var(--space-5);
      grid-template-columns: repeat(2, 1fr);

      .daily-express-logo {
        position: relative;
        top: 13px;
      }
    }

    @media (min-width: 801px) {
      grid-template-columns: repeat(3, 1fr);
      justify-content: center;
    }

    @media (min-width: 1001px) {
      grid-column-gap: var(--space-5);
      grid-row-gap: var(--space-6);
      grid-template-columns: repeat(4, 1fr);

      :nth-child(5) {
        grid-column-start: 2;
      }

      :nth-child(6) {
        grid-column-start: 3;
      }
    }
  }

  svg,
  img {
    display: block;
    height: 32px;

    @media (min-width: 551px) {
      height: 26px;
    }

    @media (min-width: 801px) {
      height: 36px;
    }

    @media (min-width: 1001px) {
      height: 40px;
    }
  }
}

.brand-you-logo-container {
  background: #000;
  border-radius: 5px;
  padding: 5px;
}

.compliance-logos-container {
  .logos {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;

    @media (min-width: 601px) {
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  }

  img {
    display: block;
    height: 26px;

    @media (min-width: 601px) {
      height: 40px;
    }
  }
}


/* === top-site-bar.css === */
.top-bar-container {
  padding-top: var(--top-site-bar-height-mobile);
  z-index: 400;

  @media (min-width: 601px) {
    padding-top: var(--top-site-bar-height-desktop);
  }
}

#masthead.controlled-by-js {
  .top-bar-container {
    height: var(--top-site-bar-height-mobile);

    @media (min-width: 601px) {
      height: var(--top-site-bar-height-desktop);
    }
  }
}

.top-site-bar {
  view-transition-name: masthead;

  .logo-link {
    display: block;
    justify-content: center;
    margin-left: var(--space-4);
    text-align: left;
    transition: all 0.2s ease-in-out;

    span {
      /* this is the BeHomed text for screen readers */
      display: inline;
      overflow: hidden;
      position: absolute;
      height: 0;
      width: 0;

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

    @media (min-width: 1001px) {
      margin-left: 0;
    }
  }

  svg.behomed-logo {
    display: block;
    height: var(--menu-logo-height);
    width: calc(var(--behomed-logo-width) * var(--behomed-logo-scale-factor));

    @media (min-width: 801px) {
      height: calc(var(--menu-logo-height) * 1.25);
    }

    @media (min-width: 1201px) {
      height: calc(var(--menu-logo-height) * 1.5);
    }

    .logo-path {
      &.be {
        fill: var(--green);
      }

      &.homed {
        fill: var(--white);
      }
    }
  }
}

.top-site-bar {
  align-items: center;
  background: var(--top-site-bar-back-color-step-1);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.11),
    0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11),
    0 8px 8px rgba(0, 0, 0, 0.11),
    0 16px 16px rgba(0, 0, 0, 0.11),
    0 32px 32px rgba(0, 0, 0, 0.11);
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  position: fixed;
  text-transform: uppercase;
  top: 0;
  width: 100%;
  z-index: 111;

  @media (min-width: 601px) {
    height: var(--top-site-bar-height-desktop);
    grid-template-columns: auto 1fr auto;
    padding: 0 0 0 var(--space-2);
  }

  @media (min-width: 1001px) {
    padding-left: var(--space-4);
  }

  .breadcrumb-holder {
    align-items: center;
    background: var(--top-site-bar-back-color-step-3);
    display: grid;
    height: var(--top-site-bar-row-2-height);
    grid-column: span 3;
    grid-row-start: 2;
    justify-content: end;
    margin-left: calc(var(--space-2) * -1);
    position: relative;
    z-index: 98;

    &::before {
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 15%,
        rgba(0, 0, 0, 0) 100%
      );
      content: "";
      display: block;
      height: 12px;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    @media (min-width: 601px) {
      align-items: end;
      grid-column: span 1;
      grid-row-start: 1;
      grid-column-start: 2;
      height: 100%;
      margin-left: var(--space-4);
      transform: skew(calc(var(--skew-angle) * -1));

      &::before {
        display: none;
      }
    }

    @media (min-width: 801px) {
      margin-left: var(--space-5);
    }
  }

  p.breadcrumb-label {
    align-content: center;
    background: var(--top-site-bar-back-color-step-5);
    display: grid;
    font-size: 21px;
    font-weight: 700;
    height: 100%;
    margin-right: -8px;
    padding: 0 calc(var(--space-3) + 12px) 0 var(--space-5);
    position: relative;

    &::before,
    &::after {
      content: none;
      display: none;
    }

    a {
      color: var(--top-site-bar-text-color-step-5);
      display: inline-block;
      height: 100%;
      text-decoration: none;
    }

    @media (min-width: 601px) {
      align-content: end;
      box-shadow: none;
      background: none;
      padding: 0 var(--space-4);
      padding-bottom: 12px;
      transform: skew(0);
    }

    /*@media (min-width: 1201px) {*/
    /*  font-size: 30px;*/
    /*}*/
  }

  .links-container {
    height: var(--top-site-bar-height-desktop);
    margin-right: -8px;
    padding-right: 8px;

    @media (max-width: 600px) {
      margin-left: var(--space-3);
    }
  }

  .links-holder {
    display: grid;
    height: 100%;
    grid-template-columns: auto auto;

    > div {
      overflow: hidden;

      &:first-of-type {
        background: var(--top-site-bar-back-color-step-7);
      }

      &:last-of-type {
        background: var(--top-site-bar-back-color-step-10);
        margin-right: -8px;
      }
    }
  }

  a.top-site-bar-text-link {
    align-items: center;
    border-bottom: 8px solid transparent;
    color: var(--white);
    display: grid;
    font-size: 21px;
    height: 100%;
    margin-left: -8px;
    margin-right: -8px;
    padding: var(--space-4) var(--space-5) 8px var(--space-5);
    text-decoration: none;

    @media (min-width: 801px) {
      grid-template-columns: auto auto;
    }

    @media (min-width: 1001px) {
      grid-gap: var(--space-3);
    }

    span.text {
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      position: absolute;
      width: 1px;
      white-space: nowrap;

      @media (min-width: 1001px) {
        clip: auto;
        height: auto;
        display: inline-block;
        overflow: visible;
        position: static;
        width: auto;
      }
    }

    svg {
      height: 24px;
      transition: all 0.1s ease-in-out;
      width: 24px;
    }

    &:visited {
      color: var(--white);
    }

    &:focus,
    &:hover,
    &.is-active {
      background-image: linear-gradient(
        to right,
        rgba(26, 28, 56, 0.07) 0%,
        rgba(26, 28, 56, 0.15) 70%,
        rgba(26, 28, 56, 0.25) 100%
      );
      border-color: var(--green);
      color: var(--green);
    }
  }

  #show-menu.is-active {
    svg {
      transform: rotate(180deg);
    }
  }
}

#skip-to-contact-form {
  svg {
    position: relative;
    top: 2px;

    line {
      stroke: var(--top-site-bar-back-color-step-7) !important;
    }
  }
}

#show-menu {
  &:hover .burger.toggle-icon span,
  &.is-active .burger.toggle-icon span {
    background-color: var(--green);
  }
}

/* Animate the three lines inside the "Get in touch" SVG when the Get in touch link is active */
/* We now scope to when #skip-to-contact-form has .is-active (per updated requirements) */
#skip-to-contact-form.is-active svg[aria-label="Get in touch"] line {
  stroke-dasharray: 12 36; /* half visible by default */
  stroke-dashoffset: 36; /* start hidden, reveal from left to right */
  animation: get-in-touch-read 2s ease-in-out infinite both;
}

/* Stagger the three lines for a clearer reading-like effect with larger gaps */
#skip-to-contact-form.is-active
  svg[aria-label="Get in touch"]
  line:nth-of-type(1) {
  animation-delay: 0s;
}
#skip-to-contact-form.is-active
  svg[aria-label="Get in touch"]
  line:nth-of-type(2) {
  animation-delay: 0.5s;
}
#skip-to-contact-form.is-active
  svg[aria-label="Get in touch"]
  line:nth-of-type(3) {
  animation-delay: 0.75s;
}

@keyframes get-in-touch-read {
  0% {
    stroke-dashoffset: 36;
    opacity: 0.5;
  }
  25% {
    stroke-dashoffset: 12;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  75% {
    stroke-dashoffset: -24;
    opacity: 0.95;
  }
  100% {
    stroke-dashoffset: -36;
    opacity: 0.85;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  #skip-to-contact-form.is-active svg[aria-label="Get in touch"] line,
  #skip-to-contact-form.animate-lines svg[aria-label="Get in touch"] line {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* Activation via class to avoid sibling-order dependency (kept for backward compat; JS still toggles it) */
#skip-to-contact-form.animate-lines svg[aria-label="Get in touch"] line {
  stroke-dasharray: 12 12;
  stroke-dashoffset: 12;
  animation: get-in-touch-read 1.6s ease-in-out infinite both;
}
#skip-to-contact-form.animate-lines
  svg[aria-label="Get in touch"]
  line:nth-of-type(1) {
  animation-delay: 0s;
}
#skip-to-contact-form.animate-lines
  svg[aria-label="Get in touch"]
  line:nth-of-type(2) {
  animation-delay: 0.32s;
}
#skip-to-contact-form.animate-lines
  svg[aria-label="Get in touch"]
  line:nth-of-type(3) {
  animation-delay: 0.64s;
}


/* === Custom styles === */
.site-title { margin: 0; }