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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

main {
  outline: none;
}

ul[role='list'],
ol[role='list'],
li {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

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

:root {
  /* Color */
  --black: #0a0203;
  --white: #ffffff;
  --surface-grey: #edf3f6;
  --brand-blue-one: rgb(170, 230, 250);
  --brand-blue-two: rgb(100, 180, 220);
  --brand-blue-three: rgb(22, 87, 136);
  --brand-blue-four: rgb(0, 50, 100);
  --brand-blue-five: rgb(0, 10, 70);
  --brand-green-one: rgb(200, 230, 155);
  --brand-green-two: rgb(150, 210, 90);
  --brand-green-three: rgb(115, 150, 0);
  --brand-green-four: rgb(20, 100, 70);
  --brand-green-five: rgb(0, 50, 10);
  --warning: #ffbf47;
  --danger: #f23a3c;
  --danger-dark: #b60f12;

  /* Spacing */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-sm: 1.5rem;
  --spacing-md: 3rem;
  --spacing-lg: 6rem;
  --spacing-xl: 9rem;
  --responsive-spacing-sm: clamp(0rem, 0.3rem + 1.27vw, 1.5rem);
  --responsive-spacing: clamp(1rem, -1.2857rem + 3.5714vw, 3rem);
  --responsive-spacing-lg: clamp(3rem, -0.4286rem + 5.3571vw, 6rem);

  /* Font */
  --primary-font-family: "Plus Jakarta Sans", sans-serif;
  --font-size-h1-lg: clamp(3rem, 2.438rem + 3vw, 6rem);
  --font-size-h1: clamp(1.7rem, 0.95rem + 3.37vw, 4rem);
  --margin-h1: clamp(0.75rem, 0.76rem + 0.76vw, 1.9rem);
  --font-size-h2: clamp(1.52rem, 1.01rem + 2.26vw, 3.04rem);
  --margin-h2: clamp(0.75rem, 0.57rem + 0.76vw, 1.52rem);
  --font-size-h3: clamp(1.33rem, 1.08rem + 1.13vw, 2.09rem);
  --margin-h3: clamp(0.57rem, 0.38rem + 0.38vw, 1.33rem);
  --font-size-h4: clamp(1.14rem, 1.01rem + 0.56vw, 1.52rem);
  --margin-h4: clamp(0.57rem, 0.38rem + 0.3vw, 0.95rem);
  --font-size-h5: clamp(0.95rem, 0.82rem + 0.56vw, 1.33rem);
  --margin-h5: clamp(0.57rem, 0.38rem + 0.3vw, 0.95rem);
  --font-size-h6: clamp(0.86rem, 0.76rem + 0.42vw, 1.14rem);
  --font-size-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --font-size-body-large: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
  --font-size-body-small: 0.875rem;

  /* Grid */
  --grid-template-columns: repeat(12, minmax(0, 1fr));
  --grid-gap: var(--responsive-spacing);

  /* Misc */
  --max-container-width: 1920px;
  --border-radius: 0.25rem;
  --aspect-ratio: 16 / 9;
  --box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.25);
  --transition-all: all ease 0.3s;
  --brand-border-surface: 1px solid var(--surface-grey);
  scrollbar-gutter: stable;
}


.fade-in {
  opacity: 0;
}

.fade-in.visible {
  animation: fadeIn 1s ease forwards;
}

.fade-in.no-animation {
  opacity: 1;
  transform: unset;
  animation: none;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.grid {
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  margin: 0 auto;
  padding: 0;
  width: 100%;
  gap: var(--grid-gap);

  > * {
    min-width: 0;
    min-height: 0;
  }

  > li {
    list-style: none;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--grid-gap));
  margin-right: calc(-0.5 * var(--grid-gap));
  margin-left: calc(-0.5 * var(--grid-gap));

  > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--grid-gap) * 0.5);
    padding-left: calc(var(--grid-gap) * 0.5);
    margin-top: var(--grid-gap);
  }

  .col {
    flex: 1 0 0;
  }
}

[class*="col-"] {
  grid-column: span 12;
}

.col-12 {
  grid-column: span 12;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

@media (min-width: 375px) {
  .col-sm-10 {
    grid-column: span 10;
  }

  .col-sm-9 {
    grid-column: span 9;
  }

  .col-sm-8 {
    grid-column: span 8;
  }

  .col-sm-6 {
    grid-column: span 6;
  }

  .col-sm-4 {
    grid-column: span 4;
  }

  .col-sm-3 {
    grid-column: span 3;
  }

  .col-sm-2 {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .col-md-10 {
    grid-column: span 10;
  }

  .col-md-9 {
    grid-column: span 9;
  }

  .col-md-8 {
    grid-column: span 8;
  }

  .col-md-7 {
    grid-column: span 7;
  }

  .col-md-6 {
    grid-column: span 6;
  }

  .col-md-5 {
    grid-column: span 5;
  }

  .col-md-4 {
    grid-column: span 4;
  }

  .col-md-3 {
    grid-column: span 3;
  }

  .col-md-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) {
  .col-lg-12 {
    grid-column: span 12;
  }

  .col-lg-10 {
    grid-column: span 10;
  }

  .col-lg-9 {
    grid-column: span 9;
  }

  .col-lg-8 {
    grid-column: span 8;

    [class*="col-"] & {
      grid-column: span 12;
    }
  }

  .col-lg-7 {
    grid-column: span 7;
  }

  .col-lg-6 {
    grid-column: span 6;
  }

  .col-lg-5 {
    grid-column: span 5;
  }

  .col-lg-4 {
    grid-column: span 4;
  }

  .col-lg-3 {
    grid-column: span 3;
  }

  .col-lg-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1440px) {
  .col-xl-12 {
    grid-column: span 12;
  }

  .col-xl-10 {
    grid-column: span 10;
  }

  .col-xl-9 {
    grid-column: span 9;
  }

  .col-xl-8 {
    grid-column: span 8;
  }

  .col-xl-7 {
    grid-column: span 7;
  }

  .col-xl-6 {
    grid-column: span 6;
  }

  .col-xl-5 {
    grid-column: span 5;
  }

  .col-xl-4 {
    grid-column: span 4;
  }

  .col-xl-3 {
    grid-column: span 3;
  }

  .col-xl-2 {
    grid-column: span 2;
  }
}

body {
  font-family: var(--primary-font-family);
  font-optical-sizing: auto;
}

h1 {
  margin-bottom: var(--margin-h1);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h1);
  font-weight: 600;
  line-height: 1.2;

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

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

  .article-body & {
    padding: var(--responsive-spacing-lg) var(--spacing-s) 0;

    @media (min-width: 1200px) {
      padding: var(--responsive-spacing-lg) 0 0;
    }
  }

  &.title {
    padding: var(--responsive-spacing-lg) var(--spacing-s) 0;

    @media (min-width: 1200px) {
      padding: var(--responsive-spacing-lg) var(--responsive-spacing-lg) 0;
    }
  }
}

h2 {
  max-width: 35ch;
  margin-bottom: var(--margin-h2);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.2;

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

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

h3 {
  margin-bottom: var(--margin-h3);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h3);
  font-weight: 600;
  line-height: 1.2;

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

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

h4 {
  margin-bottom: var(--margin-h4);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h4);
  font-weight: 600;
  line-height: 1.2;

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

h5 {
  margin-bottom: var(--spacing-s);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h5);
  font-weight: 600;
  line-height: 1.1;

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

h6 {
  margin-bottom: var(--spacing-s);
  color: var(--brand-blue-five);
  font-size: var(--font-size-h6);
  font-weight: 600;
  line-height: 1.1;

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

.subtitle {
  margin-left: var(--responsive-spacing);

  @media (min-width: 1200px) {
    margin-left: var(--responsive-spacing-lg);
  }
}

p {
  max-width: 90ch;
  margin-bottom: var(--spacing-s);
  color: var(--black);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.6;

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

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

  &.small {
    font-size: var(--font-size-body-small);
    line-height: 1.6;
  }

  &.large {
    font-size: var(--font-size-body-large);
    line-height: 1.6;
  }

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

  + .button {
    margin: 0;
  }
}

ul {
  margin-bottom: var(--spacing-s);
  padding-inline-start: 2.5rem;

  li {
    font-size: var(--font-size-body);
    line-height: 1.6;
    list-style-type: disc;

    &::marker {
      color: var(--brand-blue-five);
    }
  }
}

ol {
  margin-left: var(--spacing-sm);
}

a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: right bottom;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  color: var(--brand-blue-five);
  font-weight: 600;
  text-decoration: none;
  transition: background-size 0.4s ease;

  &:hover,
  &:focus {
    background-size: 0 1px;
  }

  &:focus-visible {
    box-shadow: 0 0 0 0.125rem blue;
    border-radius: 0.25rem;
    outline: 0.125rem solid yellow;
    outline-offset: 0.125rem;
  }

  &[href^="mailto:"] {
    word-break: break-all;
  }

  &.phone-number {
    align-self: flex-start;
    margin-bottom: var(--spacing-s);
    background-size: 100% 1px;
    font-size: var(--font-size-h3);
    font-weight: 700;
    text-decoration-thickness: 0.5rem;

    &:hover,
    &:focus {
      background-size: 0 1px;
    }
  }

  .bg-green-one &,
  .bg-green-two &,
  .bg-green-three & {
    color: var(--brand-blue-five);
  }

  .bg-green-four &,
  .bg-green-five & {
    color: var(--white);
  }

  .bg-blue-one &,
  .bg-blue-two & {
    color: var(--brand-green-five);
  }

  .bg-blue-three &,
  .bg-blue-four &,
  .bg-blue-five &,
  .bg-black & {
    color: var(--white);
  }

  &.button {
    background-image: none;
    color: var(--white);

    + p {
      margin-top: var(--spacing-s);
    }
  }

  .terms & {
    svg {
      height: 1rem;

      path {
        fill: var(--brand-blue-five);
      }
    }
  }
}

.bold {
  font-weight: 600;
}


.accordion {
  margin: var(--spacing-md) var(--spacing-s);

  @media (min-width: 1200px) {
    margin: var(--responsive-spacing) calc(var(--responsive-spacing) + var(--spacing-sm));
  }

  @media (min-width: 1800px) {
    margin: calc(var(--responsive-spacing) + var(--spacing-sm)) calc(var(--responsive-spacing-lg) + var(--spacing-sm));
  }

  +.accordion {
    margin-top: var(--responsive-spacing-lg);
  }

  .container {
    padding: 0 var(--responsive-spacing);

    &:has(.title) {
      padding: 0 var(--responsive-spacing);

      @media (min-width: 1200px) {
        padding: 0 var(--responsive-spacing-lg);
      }

      p {
        padding: 0;
      }
    }

    .container {
      padding: 0;
    }
  }

  .layout-one-column &,
  .layout-two-column &,
  .layout-three-column & {
    margin-right: 0;
    margin-left: 0;
    padding: 0;

    &:first-child {
      margin-top: 0;
    }
  }

  .accordion-container {
    height: fit-content;
    border-bottom: 1px solid var(--brand-blue-five);

    .bg-blue-five &,
    .bg-blue-four &,
    .bg-blue-three &,
    .bg-green-four &,
    .bg-green-five &,
    .bg-black & {
      border-bottom-color: var(--white);
    }

    .bg-green-one &,
    .bg-green-two & {
      border-bottom-color: var(--brand-green-five);
    }

    .bg-blue-one &,
    .bg-blue-two & {
      border-bottom-color: var(--brand-green-five);
    }
  }

  h3 {
    margin-bottom: 0;
  }

  details.accordion-item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: none;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    transition: background-color 0.3s linear;
    border-top: 1px solid var(--brand-blue-five);

    .bg-blue-five &,
    .bg-blue-four &,
    .bg-blue-three &,
    .bg-green-four &,
    .bg-green-five &,
    .bg-black & {
      border-top-color: var(--white);
    }

    .bg-green-one &,
    .bg-green-two & {
      border-top-color: var(--brand-green-five);
    }

    .bg-blue-one &,
    .bg-blue-two & {
      border-top-color: var(--brand-green-five);
    }

    &:open {
      svg {
        transform: rotate(45deg);
      }
    }

    summary {
      display: flex;
      align-items: center;
      padding: var(--spacing-s);
      color: var(--brand-blue-five);
      font-weight: 600;
      cursor: pointer;

      &:focus-visible {
        box-shadow: 0 0 0 0.125rem blue;
        border-radius: var(--btn-border-radius);
        outline: 0.125rem solid yellow;
        outline-offset: 0.125rem;
      }

      .title {
        flex-grow: 1;
      }

      .date {
        color: rgba(70, 80, 83, 1);
        font-size: var(--font-size-body-small);
      }

      svg {
        position: static;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        margin-left: var(--spacing-s);
        transition: transform 0.15s ease-in-out;

        path {
          stroke: var(--brand-blue-four);

          @media (prefers-contrast: more) {
            stroke: CanvasText;
          }

          .bg-blue-five &,
          .bg-blue-four &,
          .bg-blue-three &,
          .bg-green-four &,
          .bg-green-five &,
          .bg-black & {
            stroke: var(--white);
          }

          .bg-green-one &,
          .bg-green-two & {
            stroke: var(--brand-green-five);

            @media (prefers-contrast: more) {
              stroke: CanvasText;
            }
          }

          .bg-green-three &,
          .bg-blue-one &,
          .bg-blue-two & {
            stroke: var(--brand-blue-five);

            @media (prefers-contrast: more) {
              stroke: CanvasText;
            }
          }
        }
      }
    }

    &:hover,
    &:focus,
    &:open {
      box-shadow: none;
      background-color: transparent;

      span {
        color: var(--brand-blue-five);

        &.title {
          text-decoration: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: 0.125rem;
        }

        .bg-blue-five &,
        .bg-blue-four &,
        .bg-blue-three &,
        .bg-green-four &,
        .bg-green-five &,
        .bg-black & {
          color: var(--white);
        }

        .bg-green-three & {
          color: var(--brand-blue-five);
        }

        .bg-blue-one &,
        .bg-blue-two & {
          color: var(--brand-green-five);
        }
      }
    }

    &:hover {
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem blue;
      border-radius: 0.25rem;
    }
  }

  .accordion-panel {
    padding: 0 var(--spacing-s) var(--spacing-s);

    p,
    ul,
    ol {
      margin: 0 0 var(--spacing-sm) 0;

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

    ul,
    ol {
      padding-left: var(--spacing-sm);

      li {
        margin: var(--spacing-s) 0;
        padding-left: var(--spacing-xs);
        line-height: 1.6;
        list-style: initial;
      }
    }

    ol {
      li {
        list-style: decimal;
      }
    }
  }

  .col-md-6 & {
    .col-lg-4,
    .col-lg-8 {
      grid-column: span 12;
    }
  }
}

@media (min-width: 1440px) {
  .accordion {
    &.accordion-spacing {
      padding: var(--responsive-spacing-lg) 0;
    }

    .layout-one-column & {
      padding: 0;

      .accordion-container {
        min-width: 43.75rem;
      }
    }

    .layout-two-column &,
    .layout-three-column & {
      padding: 0;
    }
  }
}

nav.breadcrumb {
  position: absolute;
  z-index: 10;
  margin: var(--spacing-s) 0;
  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xs) 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-size: var(--font-size-body-small);

  &.news-article-breadcrumb {
    padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) 0;
    background-color: var(--white);
  }

  ol {
    display: flex;
    margin-left: var(--spacing-s);
    border-radius: var(--border-radius);

    &.no-padding {
      padding-left: 0;
    }

    li {
      display: none;
      margin-right: var(--spacing-xs);

      a {
        &:hover {
          text-decoration: none;
        }
      }

      &:nth-last-child(2) {
        display: flex;

        &:before {
          display: block;
          margin-right: var(--spacing-xxs);
          content: "Back to ";
        }
      }
    }
  }
}

@media (min-width: 768px) {
  nav.breadcrumb {
    &.news-article-breadcrumb {
      padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
        var(--spacing-s);
      border-radius: var(--border-radius);
    }

    ol {
      li {
        display: initial;
        font-size: 1rem;

        a {
          font-size: 1rem;
          font-weight: 400;

          .bg-green-one &,
          .bg-green-two &,
          .bg-green-three & {
            color: var(--brand-blue-five);

            &::before {
              background-color: var(--brand-blue-five);
            }
          }

          .bg-green-four &,
          .bg-green-five &,
          .bg-blue-three &,
          .bg-blue-four &,
          .bg-blue-five & {
            color: var(--white);

            &::before {
              background-color: var(--white);
            }
          }

          .bg-blue-one &,
          .bg-blue-two & {
            color: var(--brand-green-five);

            &::before {
              background-color: var(--brand-green-five);
            }
          }
        }

        &:hover {
          cursor: default;
        }

        &:nth-last-child(2) {
          display: block;

          &:before {
            display: none;
          }

          a {
            margin-left: 0;
            padding-left: 0;
          }
        }

        &:last-child {
          span {
            font-weight: 600;
          }

          a {
            font-weight: 600;

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

        &:has(a) {
          font-size: 1rem;

          &:hover {
            text-decoration: none;
            cursor: pointer;
          }
        }

        &.crumb::after,
        &.home::after {
          display: inline-block;
          width: 9px;
          height: 12px;
          margin: 0 0 0 0.75rem;
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.999999%201L7%207L1%2013%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
          color: white;
          content: "";
        }

        .bg-green-one &,
        .bg-green-two &,
        .bg-green-three &,
        .bg-white &,
        .no-banner & {
          &.crumb::after,
          &.home::after {
            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.999999%201L7%207L1%2013%22%20stroke%3D%22%23000a46%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");

            @media (prefers-contrast: more) {
              filter: brightness(0) invert(1);
            }
          }
        }

        .bg-green-four &,
        .bg-green-five &,
        .bg-blue-three &,
        .bg-blue-four &,
        .bg-blue-five & {
          &.crumb::after,
          &.home::after {
            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.999999%201L7%207L1%2013%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
          }
        }

        .bg-blue-one &,
        .bg-blue-two &,
        .news-article-breadcrumb & {
          &.crumb::after,
          &.home::after {
            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.999999%201L7%207L1%2013%22%20stroke%3D%22%2300320a%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");

            @media (prefers-contrast: more) {
              filter: brightness(0) invert(1);
            }
          }
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  nav.breadcrumb {
    margin: var(--responsive-spacing);
    padding: 0;

    &.no-banner {
      margin: var(--responsive-spacing) var(--responsive-spacing);

      &.news-article {
        margin: var(--responsive-spacing);
      }
    }

    ol {
      margin-left: 0;
    }
  }
}

@media (min-width: 1440px) {
  nav.breadcrumb {
    &.no-banner {
      margin: var(--responsive-spacing)
        calc(var(--responsive-spacing-lg));

      &.news-article {
        margin: var(--responsive-spacing);
      }
    }
  }
}

:root {
  /* Button base styles */
  --btn-border-radius: 0.25rem;
  --btn-font-size: var(--font-size-body);
  --btn-font-weight: 600;
  --btn-letter-spacing: 2%;
  --btn-line-height: 1.2;
  --btn-margin: clamp(1rem, 0.75rem + 0.5vw, 1.5rem) 0 0;
  --btn-padding: 0.75rem clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
  --btn-padding-mobile: 0.5rem 1rem;

  /* Primary variant */
  --btn-primary-bg-color: var(--brand-blue-four);
  --btn-primary-border: 1px solid var(--brand-blue-four);
  --btn-primary-hover-bg-color: var(--white);
  --btn-primary-hover-border: 1px solid var(--brand-blue-four);
  --btn-primary-hover-text-color: var(--brand-blue-four);
  --btn-primary-text-color: var(--white);

  /* Secondary variant */
  --btn-secondary-bg-color: transparent;
  --btn-secondary-border: 1px solid var(--brand-blue-four);
  --btn-secondary-hover-bg-color: var(--brand-blue-four);
  --btn-secondary-hover-border: 1px solid var(--brand-blue-four);
  --btn-secondary-hover-text-color: var(--white);
  --btn-secondary-text-color: var(--brand-blue-four);

  /* Tertiary variant */
  --btn-tertiary-bg-color: var(--brand-blue-four);
  --btn-tertiary-border: 1px solid var(--brand-blue-four);
  --btn-tertiary-hover-bg-color: var(--white);
  --btn-tertiary-hover-border: 1px solid var(--brand-blue-four);
  --btn-tertiary-hover-text-color: var(--brand-blue-four);
  --btn-tertiary-text-color: var(--white);
}

button,
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  margin: var(--btn-margin);
  padding: var(--btn-padding-mobile);
  border: var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  background-color: var(--btn-primary-bg-color);
  color: var(--btn-primary-text-color);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-style: normal;
  line-height: var(--btn-line-height);
  text-decoration: none;
  letter-spacing: var(--btn-letter-spacing);
  transition: background-color ease 0.3s;
  font-optical-sizing: auto;

  @media (min-width: 1200px) {
    padding: var(--btn-padding);
  }

  &:before {
    background-color: transparent;
  }

  svg {
    width: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    height: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    margin-left: var(--spacing-xs);
  }

  .bg-green-one &,
  .bg-green-two &,
  .bg-green-three &,
  .bg-green-four &,
  .bg-green-five &,
  .bg-blue-one &,
  .bg-blue-two &,
  .bg-blue-three &,
  .bg-blue-four &,
  .bg-blue-five &,
  .bg-white &,
  .bg-black &,
  .bg-surface-grey & {
    &:before {
      background-color: transparent;
    }
  }

  .bg-blue-four & {
    border: 1px solid var(--white);
  }

  &:hover,
  &:focus {
    background-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-text-color);
    text-decoration: none;
    cursor: pointer;
  }

  &:focus-visible {
    box-shadow: 0 0 0 0.125rem blue;
    border-radius: var(--btn-border-radius);
    outline: 0.125rem solid yellow;
    outline-offset: 0.125rem;
  }

  &.button--secondary {
    border: var(--btn-secondary-border);
    background-color: transparent;
    color: var(--btn-secondary-text-color);

    &:hover,
    &:focus {
      background-color: var(--btn-secondary-hover-bg-color);
      color: var(--btn-secondary-hover-text-color);
    }
  }

  &.button--tertiary {
    border: var(--btn-tertiary-border);
    background-color: var(--btn-tertiary-bg-color);
    color: var(--btn-tertiary-text-color);

    &:hover,
    &:focus {
      background-color: var(--btn-tertiary-hover-bg-color);
      color: var(--btn-tertiary-hover-text-color);
    }
  }
}

.link {
  display: flex;
  align-items: center;
  align-self: flex-start;
  color: var(--black);

  svg {
    width: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    height: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    margin-left: var(--spacing-xs);
  }

  &:before {
    bottom: 1px;
  }

  &:hover,
  &:focus {
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
  }
}

@media (min-width: 1440px) {
  button,
  .button {
    & + .button {
      margin-bottom: 0;
    }
  }
}

@media (min-width: 1440px) {
  .accordion {
    &.accordion-spacing {
      padding: var(--responsive-spacing-lg) 0;
    }

    .layout-one-column & {
      padding: 0;

      .accordion-container {
        min-width: 43.75rem;
      }
    }
  }
}

.card {
  overflow: hidden;
  border: 1px solid var(--brand-blue-four);
  border-radius: var(--border-radius);
  background-image: none;
  background-color: var(--white);
  transition: 0.75s all cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &.article {
    background-image: none;
  }

  .articles &,
  [class*="layout-"] & {
    @media (min-width: 1200px) {
      padding: 0;
    }

    h3 span {
      background-image: linear-gradient(currentColor, currentColor);
      background-position: right bottom;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      color: var(--brand-blue-five);
      text-decoration: none;
      transition: background-size 0.4s ease-out;
    }
  }

  .image-wrapper {
    img {
      display: block;
      aspect-ratio: var(--aspect-ratio);
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all ease 0.5s;
    }

    .articles &,
    [class*="layout-"] & {
      overflow: hidden;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
  }

  .content-wrapper {
    padding: var(--responsive-spacing-sm);
    border-top: none;

    .article & {
      padding-bottom: 2rem;
    }

    .button {
      margin-bottom: 0;
    }
  }
}

a.card {
  .articles &,
  [class*="layout-"] & {
    &:hover {
      transform: scale(1.05);
      cursor: pointer;

      img {
        transform: scale(1.05);
      }

      h3 span {
        background-size: 0 1px;
      }
    }
  }
}

@media (min-width: 768px) {
  .card {
    display: flex;
    flex-direction: column;
    height: 100%;

    .content-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;

      .button {
        align-self: flex-start;
        margin-top: auto;
      }
    }
  }
}

.checkbox-filter {
    margin: var(--spacing-s) 0;
    max-width: 22rem;
    padding: 0;

    .filter-title {
        font-size: 1.953rem;
        line-height: 1;
        font-weight: 600;
    }
    
    .accordion-item {
        margin-bottom: var(--spacing-xs);

        .accordion-panel {
            padding: 0;
        }

        .checkbox {
            margin: var(--spacing-s) 0;
        }

        label {
            margin-left: var(--spacing-xs);
        }
    }
}

.content-item-list {
  margin-top: var(--responsive-spacing);
  margin-bottom: var(--spacing-md);

  .grid {
    grid-gap: 0.75rem;
  }

  .articles,
  .top-articles {
    padding: 0 var(--spacing-xs);
  }

  .articles {
    margin-top: var(--spacing-xs);
  }
}

.news-item {
  display: flex;
  background-image: none;
  transition: all ease 0.3s;

  h3 span {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: right bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    color: var(--brand-blue-five);
    text-decoration: none;
    transition: background-size 0.4s ease-out;
  }

  &:hover,
  &:focus {
    text-decoration: none;

    h3 span {
      background-size: 0 1px;
    }

    img {
      transform: scale(1.05);
    }
  }

  .content {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: column;
    background-color: var(--surface-grey);

    .img-wrapper {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      width: 100%;
      height: unset;
      margin-bottom: var(--spacing-xs);
      border-radius: var(--border-radius);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.4s ease;
      }
    }

    .information {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: var(--responsive-spacing-sm);
      color: var(--black);

      h3 {
        margin: var(--spacing-xs) 0 0;
        color: var(--brand-blue-five);
        font-size: clamp(1rem, 0.6909rem + 1.4545vw, 2rem);
        line-height: 1.3;
        text-decoration-color: var(--brand-green-two);
      }

      .title-full {
        display: none;
      }

      p {
        margin: var(--spacing-xs) 0 0;
      }

      .date {
        display: flex;
        align-items: center;
        margin: 0;
        color: rgba(70, 80, 83, 1);
        font-size: var(--font-size-body-small);

        svg {
          width: 20px;
          height: 1rem;
          margin-right: var(--spacing-xs);

          circle,
          path {
            stroke: var(--brand-blue-three);
          }

          rect {
            fill: var(--brand-blue-three);
          }

          @media (prefers-contrast: more) {
            rect {
              fill: CanvasText;
            }

            circle,
            path {
              stroke: CanvasText;
            }
          }
        }
      }

      .types {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-top: auto;
        padding-top: var(--spacing-s);

        .type {
          margin: 0;
          padding: 0.5em 0.75em;
          border: 2px solid var(--brand-green-two);
          border-radius: 10rem;
          background-color: var(--brand-green-two);
          color: var(--brand-blue-five);
          font-size: var(--font-size-body-small);
          font-weight: 600;
          line-height: 1;
        }
      }
    }

    .featured & {
      overflow: hidden;
      margin: 0 var(--spacing-xs);
      border-radius: var(--border-radius);
      background-color: var(--brand-blue-three);

      .img-wrapper {
        aspect-ratio: unset;
        max-height: 28rem;
        margin-bottom: 0;
        border-radius: var(--border-radius) var(--border-radius) 0 0;

        img {
          border-radius: 0;
        }
      }

      .information {
        .date {
          color: white;

          svg {
            circle,
            path {
              stroke: white;
            }

            rect {
              fill: white;
            }

            @media (prefers-contrast: more) {
              rect {
                fill: CanvasText;
              }

              circle,
              path {
                stroke: CanvasText;
              }
            }
          }
        }

        h3 span {
          color: white;
        }

        .title-full {
          display: block;
        }

        .title-truncated {
          display: none;
        }

        p {
          color: white;
        }
      }
    }
  }

  .top-articles &,
  .articles &,
  .news-highlights & {
    .content {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }

    .img-wrapper {
      grid-column: span 3;
    }

    .information {
      grid-column: span 9;

      h3 {
        margin-bottom: 0;
        font-size: clamp(1rem, 0.6909rem + 1.4545vw, 2rem);
      }
    }
  }

  .top-articles & {
    .img-wrapper {
      height: 100%;
    }
  }
}

@media (min-width: 768px) {
  .content-item-list {
    .grid {
      grid-gap: 1.5rem;
    }

    .articles {
      margin-top: var(--spacing-s);
    }
  }

  .news-item {
    display: flex;
    height: 100%;

    .content {
      .img-wrapper {
        aspect-ratio: 1.59 / 1;
      }

      .information {
        flex: 1;

        .title-full {
          display: block;
          font-size: 1.75rem;
        }

        .title-truncated {
          display: none;
        }
      }

      .featured & {
        margin-bottom: 0;

        .information {
          h3 {
            font-size: 2rem;
          }
        }
      }

      .top-articles &,
      .articles &,
      .news-highlights & {
        display: flex;
        flex: 1;
        flex-direction: column;

        .img-wrapper {
          grid-column: span 12;
        }

        .information {
          grid-column: span 12;
        }
      }

      .top-articles & {
        .img-wrapper {
          height: unset;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .content-item-list {
    .grid {
      grid-gap: 1.5rem;
    }

    .articles,
    .top-articles {
      margin: 0;
      padding: 0;
    }

    .articles {
      padding-top: var(--spacing-sm);
    }

    .top-articles {
      height: 100%;
    }
  }

  .news-item {
    &.featured {
      height: 100%;
      padding-bottom: 0;
    }

    .top-articles & {
      &:last-child {
        .content {
          padding-bottom: 0;
        }
      }

      &:first-child {
        .content {
          padding-top: 0;
        }
      }
    }

    .content {
      .articles &,
      .top-articles &,
      .news-highlights & {
        display: grid;
        grid-template-columns: repeat(12, 1fr);

        .img-wrapper {
          grid-column: span 4;
        }

        .information {
          grid-column: span 8;
        }
      }

      .img-wrapper {
        margin-bottom: 0;
      }

      .information {
        .title-full {
          font-size: clamp(1.5rem, 0.25rem + 1.6667vw, 1.75rem);
        }
      }

      .featured & {
        min-height: 20rem;
        margin: 0;

        .img-wrapper {
          margin-bottom: 0;
        }
      }

      .top-articles & {
        padding: var(--spacing-xs) 0;

        .img-wrapper {
          height: 100%;
        }
      }

      .articles &,
      .news-highlights & {
        display: flex;
        padding: 0;
      }
    }
  }
}

footer {
  overflow: hidden;
  margin-top: var(--responsive-spacing-lg);
  padding: var(--responsive-spacing-lg) var(--spacing-s);
  background-color: var(--brand-blue-four);

  p {
    max-width: 100%;
    color: var(--white);
    line-height: 1.1;
  }

  nav {
    margin-bottom: var(--spacing-md);

    ul {
      margin: 0 0 var(--spacing-md) 0;
      padding: 0;

      li {
        margin-right: var(--spacing-md);
        margin-bottom: var(--spacing-s);
        list-style: none;

        h2 {
          margin-bottom: var(--spacing-sm);
          color: var(--white);
          font-size: 1.25rem;
        }

        a,
        .manage-cookies {
          display: inline;
          background-image: linear-gradient(currentColor, currentColor);
          background-position: right bottom;
          background-size: 100% 1px;
          background-repeat: no-repeat;
          color: var(--white);
          font-weight: 400;
          line-height: 1.5;
          text-decoration: none;
          transition: background-size 0.4s ease;

          &:hover,
          &:focus {
            background-size: 0 1px;
          }

          &:has(img) {
            background-image: none;
          }

          img {
            width: 2rem;
          }
        }

        ul {
          flex-wrap: wrap;
          margin-bottom: var(--spacing-sm);
        }
      }
    }
  }

  .nbs {
    display: block;
    width: 240px;
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    background: none;

    &:before {
      background-color: transparent;
    }

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

  .copyright {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    margin-top: var(--spacing-md);
  }
}

@media (min-width: 768px) {
  footer {
    padding: calc(var(--responsive-spacing) + var(--spacing-s)) var(--spacing-s);

    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
    }

    nav {
      margin-top: 0;
      margin-bottom: 0;

      ul {
        display: flex;
        margin-bottom: 0;
        padding-left: 0;
      }
    }

    .copyright {
      flex-direction: row;
      margin-top: 0;
      padding: 0;
    }
  }
}

.form-component {
  margin: var(--responsive-spacing) 0;

  @media (min-width: 1440px) {
    margin: var(--responsive-spacing-lg) 0;
  }

  .form-all {
    max-width: calc(var(--max-container-width) / 2);
  }
}

form,
.form {
  label,
  legend {
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.6;

    + p,
    ~ p {
      font-size: var(--font-size-body-small);
    }

    ~ p {
      margin-top: var(--spacing-xs);
    }
  }

  legend {
    margin-bottom: 0.25rem;

    + p {
      margin-top: 0;
    }
  }

  fieldset {
    border: none;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
  }

  input,
  textarea,
  select {
    min-height: 2.375rem;
    padding: var(--spacing-xs) var(--spacing-s);
    border: 1px solid var(--brand-blue-four);
    border-radius: var(--border-radius);
    font: inherit;

    &.form-validation-error {
      border-color: var(--danger);
    }
  }

  button {
    padding-right: var(--spacing-sm);
  }

  .form-line {
    list-style: none;
  }

  .always-hidden,
  .button-hidden,
  .is-none {
    display: none;
  }

  select {
    width: 100%;
    max-width: calc(var(--max-container-width) / 2);
    min-height: 47px;
    margin-top: var(--spacing-xs);
    background-image: url("/images/arrow-down.svg");
    background-position: right 1rem center;
    background-size: 0.813rem;
    background-repeat: no-repeat;
    background-color: #fff;
    appearance: none;

    @media (prefers-contrast: more) {
      background-image: url("/images/arrow-down-light.svg");
    }

    &:hover {
      cursor: pointer;
    }
  }

  textarea {
    width: 100%;
    max-width: calc(var(--max-container-width) / 2);
  }

  .other-input-container {
    width: 100%;
    padding: var(--spacing-xs) 0;
  }

  .form-textbox-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: var(--spacing-xs);

    .prefix,
    .suffix {
      display: flex;
      align-items: center;
      height: 100%;
      min-height: 47px;
      padding: 0 var(--spacing-s);
      border: 1px solid var(--brand-blue-four);
      background: var(--brand-blue-four);
      color: white;
    }

    .prefix {
      border-bottom-left-radius: var(--border-radius);
      border-top-left-radius: var(--border-radius);
    }

    .suffix {
      border-bottom-right-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }

    .form-textbox {
      flex-grow: 1;

      &[data-prefix="true"],
      &[data-suffix="true"] {
        min-height: 47px;
      }

      &[data-prefix="true"] {
        border-bottom-left-radius: 0;
        border-left: 0;
        border-top-left-radius: 0;
      }

      &[data-suffix="true"] {
        border-bottom-right-radius: 0;
        border-right: 0;
        border-top-right-radius: 0;
      }

      &:focus-visible {
        outline-style: solid;
      }
    }
  }

  .form-textbox {
    width: 100%;
    max-width: calc(var(--max-container-width) / 2);
  }

  .form-dropdown {
    margin-top: 0;
  }

  .form-line {
    max-width: calc(var(--max-container-width) / 2);
    padding-top: var(--spacing-sm);
    list-style: none;
  }

  .form-label {
    font-weight: 600;
  }

  .form-sub-label {
    font-size: 1rem;
  }

  .form-input-wide {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-xs);

    [data-type="control_fullname"] & {
      max-width: calc(var(--max-container-width) / 2);
    }

    div:has(.form-sub-label-container) {
      display: flex;
      gap: var(--spacing-s);

      .form-sub-label-container {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        gap: var(--spacing-xs);

        [data-type="control_fullname"] &,
        .items-2 & {
          width: 50%;
        }
      }
    }

    .form-sub-label-container {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }
  }

  .form-radio,
  .form-checkbox {
    width: 1.25em;
    height: 1.25em;
    border: 1px solid var(--brand-blue-four);
  }

  .form-checkbox-item,
  .rating-item {
    margin-top: var(--spacing-xs);
  }

  .form-radio-item,
  .form-checkbox-item,
  .rating-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

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

    .form-radio,
    .form-checkbox {
      margin-right: var(--spacing-xs);
    }
  }

  .form-check {
    display: block;
    min-height: 1.75rem;
    margin-bottom: 0.125rem;
    padding-left: 1.75em;

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

    label {
      display: inline-block;
      font-weight: 400;
      cursor: pointer;
    }

    input {
      float: left;
      flex-shrink: 0;
      width: 1.25em;
      height: 1.25em;
      min-height: 0;
      margin: 0;
      margin-top: 0.25em;
      margin-left: -1.75em;
      padding: 0;
      border: 1px solid var(--brand-blue-three);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: white;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      vertical-align: top;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-print-color-adjust: exact;
      color-adjust: exact;
      print-color-adjust: exact;

      &[type=radio] {
        border-radius: 50%;
      }

      &:checked {
        border-color: var(--brand-blue-three);
        background-color: var(--brand-blue-three);
      }
    }
  }

  .date-separate {
    display: none;
  }

  [data-component="datetime"] {
    display: none;
  }

  .form-submit-button {
    margin-top: 0;
  }

  .form-error-message,
  .validation-summary-errors ul li {
    display: flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    margin-top: var(--spacing-xs);
    padding: 0.25rem 0.5rem 0.25rem 1.625rem;
    border-radius: var(--border-radius);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7 14.515a7 7 0 1 1 0-14 7 7 0 0 1 0 14m-.814-5.86h1.628v-5.21H6.186zM7 11.259a.82.82 0 0 0 0.814-.824A.816.816 0 0 0 7 9.631a.813.813 0 1 0 0 1.628' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: 0.375rem;
    background-size: 0.875rem;
    background-repeat: no-repeat;
    background-color: var(--danger);
    color: #fff;
    font-size: var(--font-size-body-small);

    img {
      display: none;
    }
  }

  .validation-summary-errors ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
  }

  .field-validation-error {
    align-self: flex-start;
    margin-top: 0.125rem;
    padding: 0.125rem 0;
    color: var(--danger);
    font-weight: bold;
  }

  .error-navigation-container {
    max-width: calc(var(--max-container-width) / 2);

    .error-navigation-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-s);
      margin-top: var(--spacing-xs);
      padding: var(--spacing-s);
      border: 2px solid var(--danger);
      border-radius: var(--border-radius);
      background-color: var(--danger);
      color: white;

      p {
        margin-bottom: var(--spacing-s);
      }

      button {
        margin: 0;
        border: 2px solid var(--white);
        background-color: var(--white);
        color: var(--black);

        &:hover,
        &:focus {
          border: 2px solid var(--white);
          background-color: var(--black);
          color: var(--white);
        }
      }
    }
  }

  .input-group {
    margin: var(--spacing-sm) 0;
  }

  .form-line {
    margin: var(--spacing-s) 0;
    padding: 0;
    list-style: none;
  }

  .form-html {
    margin: var(--spacing-sm) 0;
  }

  .form-header {
    color: var(--brand-blue-five) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .form-header-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  div.form-header-group.header-large,
  div.form-header-group.hasImage {
    padding: 0;

    .header-logo {
      margin-top: var(--spacing-md);
    }
  }

  ul.form-section {
    padding: 0;
  }

  .form-subHeader {
    margin: var(--spacing-sm) 0;
    padding: 0 !important;
  }

  li[data-type="control_pagebreak"] {
    margin-top: var(--spacing-md);
  }

  li[data-type="control_image"] {
    margin-bottom: var(--spacing-md);
  }

  .form-line-active {
    background-color: transparent;
  }

  .form-pagebreak {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm);

    > div {
      &:empty,
      &:has(> .button-hidden) {
        display: none;
      }
    }

    .form-pagebreak-back {
      margin: 0;
      border: var(--btn-secondary-border) !important;
      background-color: transparent !important;
      color: var(--btn-secondary-text-color) !important;
      font-family: var(--primary-font-family) !important;
      font-size: var(--btn-font-size) !important;
      font-weight: var(--btn-font-weight) !important;

      &:hover,
      &:focus {
        background-color: var(--btn-secondary-hover-bg-color) !important;
        color: var(--btn-secondary-hover-text-color) !important;
      }
    }

    .form-pagebreak-next,
    .form-submit-button {
      margin: 0;
      border: var(--btn-primary-border) !important;
      background-color: var(--btn-primary-bg-color) !important;
      font-family: var(--primary-font-family) !important;
      font-size: var(--btn-font-size) !important;
      font-weight: var(--btn-font-weight) !important;

      &:hover,
      &:focus {
        background-color: var(--btn-primary-hover-bg-color) !important;
      }
    }
  }
}

.jotform-form {
  textarea {
    width: 100% !important;
  }

  .form-textbox {
    width: 100% !important;
  }

  select {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  form,
  .form {
    .form-multiple-column {
      &[data-columncount="2"] {
        display: grid;
        gap: var(--spacing-s);
        grid-template-columns: repeat(2, 1fr);

        .form-sub-label-container {
          width: 100%;
        }
      }

      &[data-columncount="3"] {
        display: grid;
        gap: var(--spacing-s);
        grid-template-columns: repeat(3, 1fr);

        .form-sub-label-container {
          width: 100%;
        }
      }
    }
  }
}

.firstTimeBuyerForm {
  max-width: calc(var(--max-container-width) / 2);

  .depositSubmitButton {
    margin-top: 0;
  }
}

.savings-calculator,
.mortgage-calculator {
  margin-bottom: var(--responsive-spacing);
  padding: var(--spacing-sm);
  border: 1px solid var(--surface-grey);
  border-radius: var(--btn-border-radius);

  p {
    max-width: 100%;
    margin-bottom: 0;
  }

  .calculator-inner {
    @media (min-width: 768px) {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-sm);
    }

    .form-multiple-column {
      flex-grow: 1;

      .form-sub-label-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: var(--spacing-sm);

        @media (min-width: 768px) {
          margin-bottom: 0;
        }
      }
    }

    .form-textbox {
      min-height: 47px;
    }

    select {
      min-height: 47px;
      margin-top: var(--spacing-xs);
    }

    .button,
    button {
      align-self: flex-end;
      margin: 0 0 clamp(1rem, 0.75rem + 0.5vw, 1.5rem);

      @media (min-width: 768px) {
        margin: var(--btn-margin);
      }
    }
  }

  .results {
    @media (min-width: 768px) {
      margin-top: var(--spacing-sm);
    }
  }

  .repayment-disclaimer {
    margin-top: var(--spacing-s);
    font-size: 0.875rem;
  }

  .repayment-results {
    margin-top: var(--spacing-sm);
    font-weight: 600;
  }
}

.calendar.popup {
  z-index: 100000;
  max-width: calc(var(--max-container-width) / 4);
  margin-top: -102px;
  margin-left: -40px;
  border-radius: 0 0 4px 4px;
  background: #fff;
}

.calendar.popup:before {
  z-index: 2;
  top: 0;
  height: 100%;
  box-shadow: var(--box-shadow);
  border: 1px solid;
  border-radius: var(--border-radius);
  pointer-events: none;
}

.calendar.popup:after,
.calendar.popup:before {
  position: absolute;
  left: 0;
  width: 100%;
  content: ""
}

.calendar.popup:after {
  top: -1px;
  height: 1px;
  background-color: #c3cad8;
}

.todayButton {
  display: none;
}

.calendar.popup button {
  display: block;
  margin: 0;
  border-radius: 0;
  font-size: var(--font-size-body);
  line-height: 1;
}

.calendar.popup table {
  width: 100%;
  border: 0;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  border-spacing: 0;
}

.calendar-new-header {
  position: relative;
  display: table-row;
}

.calendar-new-header>* {
  position: absolute;
  top: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 48px;
  color: var(--brand-blue-five);
  font-size: var(--font-size-body);
  font-weight: 500;
  text-align: center;
}

.calendar-new-header span {
  font-size: var(--font-size-body);
}

.calendar-new-header .button {
  position: absolute;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.calendar-new-header .button:focus {
  border-radius: var(--border-radius);
  outline: 1px solid var(--brand-blue-five);
  outline-offset: -1px;
}

.calendar-new-header .button:focus span.calendar-arrow {
  background-color: var(--brand-blue-five);
}

.calendar-new-header .button.nextMonth,
.calendar-new-header .button.nextYear {
  top: 0;
}

.calendar-new-header .button.nextMonth span.calendar-arrow,
.calendar-new-header .button.nextYear span.calendar-arrow {
  transform: rotate(180deg);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.calendar-new-header .button.previousMonth,
.calendar-new-header .button.previousYear {
  bottom: 0;
}

.calendar-new-header .button.previousMonth span.calendar-arrow,
.calendar-new-header .button.previousYear span.calendar-arrow {
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.calendar-new-header .button span.calendar-arrow {
  display: block;
  width: 100%;
  height: 100%;
  background-image: none;
  background-color: var(--brand-blue-five);
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2357647E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center center;
}

.calendar-new-header .button span.calendar-arrow svg {
  width: auto;
  height: auto;
  margin-left: 0;
}

select.calendar-month-select,
select.calendar-year-select {
  padding: 0.625em;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  background-color: #fff;
  color: var(--brand-blue-five);
  font-size: 1em;
}

select.calendar-month-select:hover,
select.calendar-year-select:hover {
  box-shadow: 0 0 0 2px rgba(46, 105, 255, 0.25);
  border-color: rgba(46, 105, 255, 0.5);
}

select.calendar-month-select:focus,
select.calendar-year-select:focus {
  box-shadow: 0 0 0 3px rgba(46, 105, 255, 0.25);
  border-color: var(--brand-blue-five);
}

.calendar-new-header-withSVG .calendar-new-header .nextMonth svg,
.calendar-new-header-withSVG .calendar-new-header .nextYear svg,
.calendar-new-header-withSVG .calendar-new-header .previousMonth svg,
.calendar-new-header-withSVG .calendar-new-header .previousYear svg {
  position: absolute;
  z-index: 0;
  left: 3px;
  display: none;
  width: 18px;
  height: 18px;
  color: #9fa1b8;
  pointer-events: none;
}

.calendar-new-header-withSVG .calendar-new-header .nextMonth span.calendar-arrow,
.calendar-new-header-withSVG .calendar-new-header .nextYear span.calendar-arrow {
  padding-top: 6px;
}

.calendar-new-month {
  left: 0;
  border-right: 1px solid var(--surface-grey);
}

.calendar-new-year {
  right: 0;
}

.calendar.popup th {
  height: 2rem;
  border: 0;
  background-color: var(--surface-grey);
  color: var(--brand-blue-five);
  font-size: var(--font-size-body-small);
  font-weight: 600;
}

.calendar.popup table tbody td {
  position: relative;
  z-index: 1;
  padding: 12px 8px;
  box-shadow: inset 0 0 0 4px #fff;
  border-radius: 6px;
  background: transparent;
  color: var(--brand-blue-five);
  font-size: var(--font-size-body);
  text-align: center;
  cursor: pointer;
}

.calendar.popup table tbody td:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: #fff;
  content: "";
}

.calendar.popup table tbody td button {
  width: 100%;
}

.calendar tr.days td:hover:not(.unselectable):after {
  border-color: var(--brand-blue-four);
}

.calendar.popup tr.days td:not(.selected):focus:after {
  background-color: var(--surface-grey);
}

.calendar tr.days td.otherDay button {
  opacity: 0.5;
  font-weight: 400;
}

.calendar tr.days td:hover:not(.unselectable) {
  color: var(--brand-blue-four);
}

.calendar.popup tr.days td.selected {
  color: #fff;
}

.calendar.popup tr.days td.selected:after {
  background-color: var(--brand-blue-four);
}

.calendar.popup tr.days td.selected:focus:after {
  background-color: rgba(46, 105, 255, 0.87);
}

.calendar.popup tr.days td.today:not(.selected) {
  color: var(--brand-blue-four);
}

.calendar.popup tr.days td.today:not(.selected):after {
  border-color: var(--brand-blue-four);
}

.calendar.popup.extended {
  max-width: 400px;
  margin-top: -90px;
}

.calendar.popup.extended:before {
  top: 0;
  height: 100%;
}

[data-qtype=control_inline][data-version=v2].calendar.popup {
  min-width: 300px;
  margin-top: -90px;
}

[data-qtype=control_inline][data-version=v2].calendar.popup .calendar-new-month,
[data-qtype=control_inline][data-version=v2].calendar.popup .calendar-new-year {
  padding-right: 28px;
}

[data-qtype=control_inline][data-version=v2].calendar.popup:before {
  top: 0;
  height: 100%
}

.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.glide * {
  box-sizing: inherit;
}

.glide-track {
  overflow: hidden;
}

.glide-slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.glide-slides--dragging {
  user-select: none;
}

.glide-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.glide-slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.glide-arrows {
  -webkit-touch-callout: none;
  user-select: none;
}

.glide-bullets {
  -webkit-touch-callout: none;
  user-select: none;
}

.glide--rtl {
  direction: rtl;
}

/*# Theme */

.glide-arrow {
  position: absolute;
  display: block;
  top: 50%;
  z-index: 2;
  color: white;
  text-transform: uppercase;
  padding: var(--spacing-xs) 0.75rem;
  background-color: transparent;
  border: 0.125rem solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  opacity: 1;
  cursor: pointer;
  transition: opacity 150ms ease, border 300ms ease-in-out;
  transform: translateY(-50%);
  line-height: 1;
}

.glide-arrow:focus {
  outline: none;
}

.glide-arrow:hover {
  border-color: white;
}

.glide-arrow--left {
  left: 2rem;
}

.glide-arrow--right {
  right: 2rem;
}

.glide-arrow--disabled {
  opacity: 0.33;
}

.glide-bullets {
  display: flex;
  list-style: none;
  justify-content: center;
}

.glide-bullet {
  background-color: rgba(10, 2, 3, 0.75);
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  margin: 0.625rem;
}

.glide-bullet:focus {
  outline: none;
}

.glide-bullet:hover, .glide-bullet:focus {
  border: 1px solid white;
  background-color: var(--manchester-purple);
}

.glide-bullet--active {
  background-color: var(--manchester-purple);
}

.glide--swipeable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.glide--dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.img-wrapper-single {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
body {
  overflow-x: hidden;

  &.active {
    overflow: hidden;
  }

  &.no-scroll {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    overflow-y: scroll;
    width: 100%;
  }
}

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

.layout-one-column,
.layout-two-column,
.layout-three-column {
  figure {
    height: 100%;
  }
}

.layout-one-column {
  width: 100%;
  padding: var(--responsive-spacing-lg) var(--spacing-s);

  .title-container {
    margin-bottom: 0;
  }

  &.remove-padding-top {
    padding-top: 0;

    &:has(.container section) {
      padding-top: 0;
    }
  }

  &.remove-padding-bottom {
    padding-bottom: 0;

    &:has(.container section) {
      padding-bottom: 0;
    }
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;

    &:has(.container section) {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .container {
    grid-gap: calc(var(--grid-gap) / 2);
    text-align: left;

    .button {
      align-self: auto;
    }

    .subtitle {
      margin: 0;
    }

    .content-align-left & {
      align-items: flex-start;
    }

    .content-align-right & {
      align-items: flex-end;
    }

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

    section,
    div {
      text-align: left;
    }

    section {
      margin-bottom: var(--spacing-sm);
    }

    h2,
    h3 {
      scroll-margin: 7.5rem;

      &:not(:first-of-type) {
        margin-top: var(--responsive-spacing);
      }
    }

    p + h2,
    p + h3,
    p + .accordion {
      margin-top: var(--responsive-spacing);
    }

    a {
      p {
        font-weight: 600;
      }
    }

    ul,
    ol {
      .layout-list & {
        padding: 0;
      }

      &.form-section {
        padding-left: 0;
      }

      li {
        max-width: 90ch;
        margin: var(--spacing-s) 0;
        padding-left: var(--spacing-xs);
        font-size: var(--font-size-body);
        line-height: 1.5;
        list-style: initial;

        .layout-list & {
          padding: 0;
          list-style: none;
        }

        &.form-line,
        &.form-input-wide {
          padding: 0;
          list-style: none;
        }
      }
    }

    ol {
      li {
        list-style: decimal;
      }
    }
  }

  .main-content {
    .content-align-center & {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.layout-two-column {
  padding: var(--responsive-spacing-lg) var(--spacing-s);

  .title-container {
    margin-bottom: 0;
  }

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .subtitle {
    margin: 0;
  }

  .grid {
    gap: var(--grid-gap);

    @media(min-width: 1800px) {
      gap: var(--grid-gap) calc(var(--grid-gap) * 2);
    }
  }

  h2,
  h3 {
    scroll-margin: 7.5rem;
  }

  img {
    aspect-ratio: var(--aspect-ratio);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    object-fit: cover;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;

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

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: var(--spacing-sm);

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

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }
  }

  ul,
  ol {
    padding-left: var(--spacing-sm);

    &.form-section {
      padding-left: 0;
    }

    li {
      margin: var(--spacing-s) 0;
      padding-left: var(--spacing-xs);
      line-height: 1.5;
      list-style: initial;

      &.form-line,
      &.form-input-wide {
        padding: 0;
        list-style: none;
      }
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }
}

.layout-three-column {
  width: 100%;
  padding: var(--responsive-spacing-lg) var(--spacing-s);

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .subtitle {
    margin: 0;
  }

  h2 {
    scroll-margin: 7.5rem;
  }

  ul,
  ol {
    padding-left: var(--spacing-sm);

    li {
      margin: var(--spacing-s) 0;
      padding-left: var(--spacing-xs);
      line-height: 1.5;
      list-style: initial;
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }

  .grid {
    gap: var(--grid-gap);
    padding: 0;

    .grid {
      gap: 0;
    }

    .col-md-4 {
      display: flex;
      flex-direction: column;

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

      &.align-content-top {
        justify-content: flex-start;
      }

      &.align-content-bottom {
        justify-content: flex-end;
      }
    }
  }

  .category-cta {
    margin: 0 0 var(--spacing-sm);

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

  .accordion {
    padding: 0;
  }

  .col-lg-8 {
    grid-column: span 12;
  }

  .title-container {
    margin-bottom: var(--grid-gap);
  }
}

.layout-list {
  padding: var(--responsive-spacing-lg) var(--spacing-s);

  .title-container {
    margin-bottom: var(--spacing-s);
  }

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

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

  .align-content-top & {
    justify-content: flex-start;
  }

  .align-content-bottom & {
    justify-content: flex-end;
  }

  .button {
    width: 100%;
    text-align: center;
  }

  &:has(.img-wrapper-single) {
    .col-lg-2,
    .col-lg-3,
    .col-lg-4 {
      grid-column: span 6;
    }

    @media (min-width: 768px) {
      .col-lg-2 {
        grid-column: span 6;
      }

      .col-lg-3 {
        grid-column: span 3;
      }

      .col-lg-4 {
        grid-column: span 4;
      }
    }
  }
}

@media (min-width: 768px) {
  .layout-one-column {
    .card {
      max-width: 674px;
    }
  }

  .layout-two-column {
    .right {
      margin-top: 0;
    }
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 var(--responsive-spacing);
  }

  main {
    max-width: 2600px;
    margin: 0 auto;

    &:before {
      position: fixed;
      z-index: 20;
      top: 0;
      left: 0;
      display: none;
      opacity: 0;
      width: 100%;
      height: 100%;
      background-color: var(--brand-blue-five);
      transition: all ease 0.3s;
      content: "";
    }

    &.active {
      &:before {
        display: block;
        opacity: 0.25;
      }
    }
  }

  .layout-one-column,
  .layout-two-column,
  .layout-three-column {
    padding: var(--responsive-spacing);

    &.remove-padding-top {
      padding-top: 0;
    }

    &.remove-padding-bottom {
      padding-bottom: 0;
    }

    &.no-padding {
      padding-top: 0;
      padding-bottom: 0;
    }

    .title-container {
      margin-bottom: 0;
    }

    .container {
      padding: 0 var(--responsive-spacing-lg);

      .container {
        padding: 0;
      }

      section {
        margin-bottom: var(--spacing-sm);

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

    .category-cta {
      align-self: unset;
      margin: 0;
    }
  }

  .layout-three-column {
    .title-container {
      max-width: 80%;
      margin-bottom: var(--grid-gap);
    }
  }

  .layout-list {
    padding: var(--responsive-spacing);

    [class*="layout-"] & {
      padding: 0;
    }

    &.remove-padding-top {
      padding-top: 0;
    }

    &.remove-padding-bottom {
      padding-bottom: 0;
    }

    &.no-padding {
      padding-top: 0;
      padding-bottom: 0;
    }

    .subtitle {
      margin: 0;
    }

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

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }
  }
}

@media (min-width: 1800px) {
  .container {
    padding: 0 var(--responsive-spacing-lg);
  }

  .layout-one-column,
  .layout-two-column,
  .layout-three-column,
  .layout-list {
    padding: calc(var(--responsive-spacing) + var(--spacing-sm)) calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
  }
}

@media (min-width: 2200px) {
  .layout-one-column,
  .layout-two-column,
  .layout-three-column,
  .layout-list {
    .container {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing-lg));
    }
  }
}

.wayfinder {
  position: relative;
  z-index: 500;
  overflow: hidden;
  max-width: 100%;
  max-height: 6rem;
  background-color: var(--surface-grey);
  transition: max-height 0.3s ease-in-out;

  @media (min-width: 768px) {
    max-height: 4rem;
  }

  @media (min-width: 1200px) {
    max-height: 2rem;
  }

  div {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xxs);
  }

  p {
    font-size: var(--font-size-body-small);
    text-align: center;
  }

  .active & {
    max-height: 0;
  }
}

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

    li {
      list-style: none;
    }
  }
}

header {
  position: sticky;
  z-index: 101;
  top: 0;
  width: 100%;
  background-color: var(--white);
  transition: transform 0.3s ease-in-out;
  border-bottom: 2px solid var(--surface-grey);

  &.active {
    transform: translate(-0%, -150%);
  }

  .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 4rem;
    padding: 0 var(--spacing-s);
    background-color: white;
  }

  .logo {
    z-index: 101;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 8rem;
    padding-right: var(--spacing-s);
    background-image: none;

    &:before {
      background-color: transparent;
    }

    @media (prefers-contrast: more) {
      filter: brightness(0) invert(1);
    }
  }

  .menu-buttons {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);

    .log-in,
    .register {
      z-index: 1;
      margin: 0;
      font-size: var(--font-size-body-small);
      white-space: nowrap;
    }

    &.desktop {
      display: none;
    }
  }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(100dvh - 4rem);
    min-height: max-content;
    padding: var(--spacing-xxs) var(--spacing-s) var(--spacing-s);
    background-color: var(--white);
    font-size: var(--font-size-body-small);
    transform: translateY(-100%);
    transition: all 0.3s ease;

    &.active {
      top: 4rem;
      overflow-y: scroll;
      min-height: unset;
      transform: translateY(0);
    }

    button,
    .submenu-button,
    a {
      z-index: 101;
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 0;
      padding: var(--spacing-s) ;
      border: none;
      background-image: none;
      background-color: transparent;
      color: var(--brand-blue-five);
      font-size: 1rem;
      transition: background-size 0.4s ease, background-color 0.4s ease;

      &:hover,
      &:focus {
        background-color: transparent;
      }

      &:focus-visible {
        border-radius: 0;
        outline-offset: -0.125rem;
      }

      .chevron-wrapper {
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
        margin-left: var(--spacing-xxs);
      }

      svg {
        @media (prefers-contrast: more) {
          fill: CanvasText;
        }
      }

      .open {
        width: unset;
        height: unset;
        margin-bottom: -3px;
        margin-left: 0;
        transform: rotate(-90deg);
        transition: all ease 0.3s;
      }

      .close {
        position: absolute;
        bottom: 0;
        left: 0;
        width: unset;
        height: unset;
        margin-left: 0;
        transform: rotate(-90deg);
        transition: all ease 0.3s;
      }

      &[aria-expanded="true"] {
        background-color: var(--surface-grey);
        color: var(--brand-green-four);

        .open {
          transform: translateY(0);
          fill: var(--brand-blue-five);
        }

        .close {
          bottom: -4px;
          transform: rotate(180deg);
          fill: var(--brand-blue-five);
        }
      }
    }

    p {
      margin-top: 0;
    }

    .sub-nav-container {
      visibility: hidden;
      opacity: 0;
      overflow: hidden;
      max-height: 0;
      transition: opacity 0.4s ease, max-height 0.4s ease;

      &:has(.active) {
        visibility: visible;
        opacity: 1;
        max-height: max-content;
      }
    }

    .level-one {
      border: var(--brand-border-surface);
      border-radius: var(--border-radius);

      ul {
        display: flex;
        overflow: hidden;
        flex-direction: column;
        margin: 0;
        border: var(--brand-border-surface);
        transition: all 0.3s ease;

        &.level-two {
          padding: 0 var(--spacing-s);
          border: none;

          li {
            width: 100%;

            a {
              color: var(--brand-blue-five);
              font-size: 1rem;
              font-weight: 600;
              line-height: 1.375rem;

              &:after {
                display: none;
              }

              &:before {
                background-color: transparent;
              }
            }

            p {
              margin: 0;
              font-size: var(--font-size-body-small);
              line-height: 1.375rem;
            }
          }
        }
      }

      .promo {
        position: relative;
        display: block;
        height: 100%;
        margin: var(--spacing-xxs) var(--spacing-s) var(--spacing-s);
        padding: var(--spacing-xs) var(--spacing-s) 0.75rem;
        border: 1px solid var(--brand-blue-five);
        border-radius: var(--border-radius);
        background-color: var(--white);
        transition: background-color 0.3s ease;

        p {
          margin: 0;
          font-size: 1rem;
          transition: color 0.3s ease;

          &.title {
            color: var(--brand-blue-five);
            font-size: var(--font-size-body-large);
            font-weight: 600;
          }
        }

        a {
          position: static;
          width: auto;
          margin-top: var(--spacing-xs);
          padding: var(--spacing-xxs) 0.75rem;

          &:hover,
          &:focus {
            background-color: var(--white);
          }

          &:after {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            content: "";
          }
        }
      }

      li {
        border-bottom: var(--brand-border-surface);

        &:last-child {
          border-bottom: none;
        }

        a {
          font-size: 1rem;
          font-weight: 600;
          line-height: 1.625rem;
        }
      }
    }
  }

  .hamburger {
    position: relative;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: var(--spacing-xxs);
    width: 24px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: var(--spacing-xs);
    padding: var(--spacing-xs);
    border: none;
    background: none;
    color: var(--brand-blue-five);
    cursor: pointer;

    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

  .bar {
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 0.125rem;
    background-color: var(--brand-blue-five);
    transition: transform 0.3s, opacity 0.3s;

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

    &:nth-child(3) {
      bottom: 0;
    }

    .open & {
      &:nth-child(1) {
        transform: translateY(5.75px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
      }
    }
  }
}

#skiptocontent button {
  position: fixed;
  z-index: 900;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  left: var(--spacing-xs);
  opacity: 0;
  margin: 0;
  padding: var(--spacing-s);
  outline: 2px solid var(--black);
  outline-offset: -1px;
  background-color: var(--warning);
  transform: translateY(calc(-100% - var(--spacing-xs)));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:focus {
    opacity: 1;
    transform: translateY(0);
  }
}

.announcement-banner {
  width: 100%;

  .announcement-banner-items {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-s);

    p {
      margin: var(--spacing-xs) 0;
    }

    a {
      margin: var(--spacing-xs) 0;
      font-weight: 600;
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
        text-decoration-thickness: 0.125rem;
        text-underline-offset: 0.375rem;
      }
    }
  }
}

.utility-nav {
  margin: var(--spacing-md) 0;

  &.mobile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
  }

  &.desktop {
    display: none;
  }

  li {
    display: flex;
    width: fit-content;
    margin: 0;
    text-align: center;

    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 44px;
      padding: var(--btn-padding-mobile);
      border: var(--brand-border-surface);
      border-radius: var(--border-radius);
      background-color: var(--surface-grey);
      color: var(--brand-blue-five);
      font-size: var(--font-size-body-small);
      font-weight: var(--btn-font-weight);
      font-style: normal;
      text-decoration: none;
      font-optical-sizing: auto;

      &:before {
        display: none;
      }

      img {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 var(--spacing-xs) 0 0;

        @media (prefers-contrast: more) {
          filter: brightness(0) invert(1);
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  header {
    padding: 0;

    .container {
      padding: 0 var(--responsive-spacing);
    }

    .header-inner {
      padding: 0;
    }

    .logo {
      width: auto;
      max-width: 100%;
      height: 4rem;
      margin-left: 0;

      img {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .menu-buttons {
      flex-direction: row;
      align-items: flex-end;
      gap: var(--spacing-s);
      margin-left: auto;
      order: 2;

      .log-in,
      .register {
        width: max-content;
      }

      &.mobile {
        display: none;
      }

      &.desktop {
        display: flex;
      }
    }

    .button,
    button {
      &:hover,
      &:focus {
        background-color: var(--white);
        color: var(--brand-blue-five);
        text-decoration: none;
        cursor: pointer;
      }

      &.menuToggle {
        display: none;
      }
    }

    nav {
      position: unset;
      z-index: 101;
      flex-direction: row;
      width: auto;
      height: unset;
      padding: 0;
      background-color: unset;
      transform: unset;
      border-bottom: none;

      button,
      .submenu-button,
      a {
        position: relative;
        z-index: 101;
        width: max-content;
        height: 100%;
        padding: 2rem 0.75rem;
        border: none;
        background-color: transparent;
        transition: all 0.3s ease;

        .close {
          display: block;
          transform: rotate(0deg);
        }

        .open {
          margin-bottom: 0;
          transform: rotate(0deg);
        }

        svg {
          position: absolute;
          right: 0;
          transition: all ease 0.3s;
        }

        &[aria-expanded="true"] {
          color: var(--brand-green-four);

          .close {
            transform: rotate(180deg) translateY(2px);
            fill: var(--brand-blue-five);

            @media (prefers-contrast: more) {
              fill: CanvasText;
            }
          }

          .open {
            transform: translateY(-2px);
            fill: var(--brand-blue-five);

            @media (prefers-contrast: more) {
              fill: CanvasText;
            }
          }
        }
      }

      p {
        margin-top: 0;
      }

      ul {
        &.level-one {
          display: flex;
          overflow-y: unset;
          flex-direction: row;
          margin: 0 var(--spacing-s);
          padding-bottom: 0;
          border: none;

          button,
          a {
            border-radius: 0;

            &:hover,
            &:focus {
              color: var(--brand-green-four);
            }
          }

          ul {
            overflow: unset;
          }

          li {
            position: relative;
            border-bottom: none;

            &:first-child {
              border-left: none;
            }

            &:last-child {
              a {
                border-right: none;
              }
            }

            a {
              font-size: 1rem;
              font-weight: 600;
              line-height: 1.625rem;

              &:after {
                display: none;
              }
            }
          }

          .sub-nav-container {
            --box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 100%;
            visibility: hidden;
            opacity: 0;
            width: max-content;
            min-width: 100%;
            box-shadow: var(--box-shadow);
            background-color: var(--surface-grey);
            pointer-events: none;
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);

            &:has(.active) {
              visibility: visible;
              opacity: 1;
              pointer-events: all;
            }
          }

          ul {
            &.level-two {
              z-index: 0;
              visibility: hidden;
              opacity: 0;
              overflow-y: unset;
              width: 100%;
              height: unset;
              margin: 0;
              padding: var(--spacing-xs) 0;

              &.active {
                z-index: 1;
                visibility: visible;
                opacity: 1;
                transition-delay: 0s;
              }

              button {
                display: flex;
                align-items: center;
                height: 100%;
                padding: var(--spacing-xs) var(--spacing-s);
                text-align: left;
              }

              li {
                position: relative;
                max-width: none;
                padding: 0.75rem var(--spacing-s);
                line-height: 1;
                transition: all 0.3s ease;

                a {
                  position: static;
                  display: inline-block;
                  padding: 0;
                  background-image: linear-gradient(currentColor, currentColor);
                  color: var(--brand-blue-five);
                  font-weight: 600;
                  line-height: 1.2;

                  &:after {
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                    content: "";
                  }
                }
              }
            }
          }
        }

        .promo{
          max-width: 25rem;
        }
      }
    }

    .hamburger {
      display: none;
    }

    .container:has(.logo) {
      margin-top: 0;
    }
  }

  .utility-nav {
    position: relative;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    background-color: var(--white);
    font-size: var(--font-size-body-small);

    ul {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: var(--spacing-xs);
      min-width: 50%;
      border-bottom: var(--brand-border-surface);

      li {
        margin: var(--spacing-xs) 0;
        padding: 0;

        a {
          padding: var(--spacing-xs) 0.75rem;
          border: var(--brand-border-surface);
          background-color: var(--white);
          transition: 0.3s all ease;

          &:hover,
          &:focus {
            background-color: var(--surface-grey);
          }
        }
      }
    }

    &.desktop {
      display: block;
    }

    &.mobile {
      display: none;
    }

    .container {
      display: flex;
    }

    .utility-nav-link {
      display: flex;
      align-items: center;
      margin: 0;
      background-image: none;
      color: var(--brand-blue-five);
      font-size: var(--font-size-body-small);
      text-decoration: none;

      .utility-nav-text {
        font-size: var(--font-size-body-small);
      }
    }

    .utility-nav-img {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      margin-right: var(--spacing-xxs);
      object-fit: contain;
    }
  }
}

@media (min-width: 1440px) {
  header {
    .menu-buttons {
      margin-right: 0;
      order: 2;

      .log-in,
      .register {
        padding: var(--spacing-xs) 1.25rem;
      }
    }

    nav {
      .level-one {
        .level-two {
          li {
            a {
              font-size: 1rem;
              line-height: 1.5;
              text-decoration: none;
            }

            p {
              line-height: 1.5;
            }

            &:hover,
            &:focus {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  .announcement-banner {
    .announcement-banner-items {
      p,
      a {
        font-size: var(--font-size-body);
      }
    }
  }
}

@media (min-width: 1800px) {
  header {
    .container {
      padding: 0 var(--responsive-spacing-lg);
    }
  }
}

#ot-sdk-btn-floating.ot-floating-button button {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto;
}

#ot-sdk-btn-floating.ot-floating-button button > * {
  margin: 0;
}

/* OneTrust Cookie List - The use of !important in this area is necessary to override imported styles */
#ot-sdk-cookie-policy {
  margin-top: var(--spacing-sm) !important;
}

#ot-sdk-cookie-policy section {
  overflow-x: auto;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-title {
  display: none !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group {
  color: var(--brand-blue-five) !important;
  font-size: var(--font-size-h3) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h5,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h6,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy li,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy p,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description {
  max-width: 80ch !important;
  color: var(--black) !important;
  font-size: var(--font-size-body) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group-desc,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td {
  color: var(--black) !important;
  font-size: var(--font-size-body) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td:before {
  display: block !important;
  width: 100% !important;
  margin-bottom: var(--spacing-xxs);
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header {
  color: var(--white) !important;
  font-size: var(--font-size-body) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th {
  background-color: var(--brand-blue-four) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table {
  overflow: auto !important;
  margin-bottom: var(--responsive-spacing) !important;
  border: none !important;
  border-radius: 0 !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th {
  border-bottom: 1px solid var(--brand-blue-four) !important;
  border-right: 1px solid var(--brand-blue-four) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table td {
  border-bottom: 1px solid var(--surface-grey) !important;
  border-right: 1px solid var(--surface-grey) !important;

  @media only screen and (max-width: 530px) {
    border-left: 1px solid var(--surface-grey) !important;
  }
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table td:first-child {
  border-left: 1px solid var(--surface-grey) !important;

  @media only screen and (max-width: 530px) {
    border-top: 1px solid var(--surface-grey) !important;
  }
}

#ot-sdk-cookie-policy a {
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-position: right bottom !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  color: var(--brand-blue-five) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-size 0.4s ease !important;
  word-wrap: break-word !important;

  &:hover,
  &:focus {
    background-size: 0 1px !important;
  }
}

#cookie-policy-description {
  margin-bottom: var(--responsive-spacing) !important;
}

@media (min-width: 550px) {
  #ot-sdk-cookie-policy .ot-sdk-container {
    padding: 0 1rem !important;
  }
}

@media (min-width: 1200px) {
  #ot-sdk-cookie-policy .ot-sdk-container {
    padding: 0 !important;
  }
}

.select-box {
  position: relative;
  width: 100%;
  margin: var(--spacing-s) 0;

  .button {
    width: 100%;
    min-width: 210px;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-s);
    border: 1px solid var(--brand-blue-five);
    border-radius: var(--border-radius);
    background-color: var(--white);
    color: var(--black);
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;

    @media (min-width: 768px) {
      min-width: 300px;
    }

    span {
      width: 100%;
      white-space: nowrap;
    }

    img {
      margin-left: var(--spacing-s);
      transition: all 0.3s ease;

      @media (prefers-contrast: more) {
        filter: brightness(0) invert(1);
      }
    }

    &[aria-expanded="true"] {
      img {
        transform: rotate(-180deg);
      }
    }
  }

  .list {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    display: none;
    overflow-y: auto;
    overflow-y: scroll;
    width: 100%;
    min-width: 210px;
    max-height: 13.75rem;
    margin: 0;
    padding: var(--spacing-xs);
    border: 1px solid var(--brand-blue-four);
    background-color: #fff;
    transition: none !important;
    border-top: none;
    list-style: none;

    @media (min-width: 768px) {
      min-width: 300px;
    }

    &.visible {
      display: block;
    }

    &.above {
      top: auto;
      bottom: calc(100% - 5px);
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      border-bottom: none;
    }

    &.below {
      top: calc(100% - 5px);
      bottom: auto;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
  }

  .option {
    padding: var(--spacing-xs);
    border: 1px solid #fff;
    border-radius: var(--border-radius);
    cursor: pointer;

    &:focus,
    &:hover {
      border: 1px solid var(--black);
      outline: none;
      background-color: var(--surface-grey);
    }

    &[aria-selected="true"] {
      background-color: var(--surface-grey);
    }
  }

  .sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
  }
}

@media screen and (min-width: 768px) {
  .select-box {
    width: auto;
    max-width: 300px;
  }
}


.accordion-search-container {
  .accordion-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs) var(--spacing-s);

    @media (min-width: 480px) {
      flex-direction: row;
      flex-wrap: wrap;
    }

    button {
      width: 100%;
      margin: 0;

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

    .search-input-container {
      position: relative;
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;

      input {
        flex-grow: 1;
        min-height: 2.375rem;
        padding: var(--spacing-xs) calc(var(--spacing-xs) + 44px) var(--spacing-xs) var(--spacing-s);
        border: 1px solid var(--brand-blue-four);
        border-radius: var(--border-radius);
        font: inherit;

        &.invalid {
          border-color: var(--danger);
        }
      }

      .clear-btn {
        position: absolute;
        top: 50%;
        right: 0;
        width: auto;
        height: 100%;
        padding: var(--btn-padding-mobile);
        border: none;
        background-color: transparent;
        color: var(--btn-secondary-text-color);
        transform: translateY(-50%);
        transition: opacity ease 0.3s;

        &:hover,
        &:focus {
          opacity: 0.75;
          background-color: transparent;
          color: var(--btn-secondary-text-color);
        }

        &.hidden {
          display: none;
        }

        svg {
          margin: 0;
        }
      }
    }

    .error {
      display: none;
      flex-basis: 100%;
      color: var(--danger);
      font-weight: bold;

      @media (min-width: 768px) {
        padding-left: var(--spacing-s);
      }

      &.visible {
        display: block;
      }
    }
  }

  .suggested-search {
    padding-top: var(--spacing-xs);

    .suggested-items {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--spacing-xs) var(--spacing-s);

      @media (min-width: 768px) {
        padding-left: var(--spacing-s);
      }

      p {
        margin: 0;
        line-height: 1;
      }

      p,
      a {
        font-size: var(--font-size-body-small);
      }
    }
  }

  .accordion-az-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-top: var(--responsive-spacing);

    button {
      align-self: unset;
    }

    .az-filter-button {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 3rem;
      margin: 0;
      padding: var(--spacing-xs);
      border: 1px solid var(--surface-grey);
      background-color: var(--surface-grey);
      color: var(--btn-secondary-text-color);

      @media (min-width: 576px) {
        max-width: 2.5rem;
      }

      &:hover,
      &:focus {
        background-color: var(--btn-secondary-hover-bg-color);
        color: var(--btn-secondary-hover-text-color);
      }

      &:disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      &.selected {
        border: var(--btn-tertiary-border);
        background-color: var(--btn-tertiary-bg-color);
        color: var(--btn-tertiary-text-color);
      }
    }

    #clearFilter {
      min-width: 6rem;
      max-width: unset;
      margin: 0;
      padding: var(--spacing-xs);
      border: var(--btn-secondary-border);
      background-color: var(--btn-secondary-bg-color);
      color: var(--btn-secondary-text-color);
      font-size: var(--font-size-body-small);
      white-space: nowrap;

      @media (min-width: 576px) {
        max-width: 6rem;
      }

      &:hover,
      &:focus {
        background-color: var(--btn-secondary-hover-bg-color);
        color: var(--btn-secondary-hover-text-color);
      }

      &.hidden {
        display: none;
      }
    }
  }
}

.accordion-search-container,
.search-results {
  .hidden {
    display: none;
  }
}

.no-results-message,
.search-results {
  margin-top: var(--margin-h2);
}

.articles {
  padding: var(--responsive-spacing) var(--spacing-s);

  @media(min-width: 1200px) {
    padding: 0 0 var(--responsive-spacing-lg);
  }
}

.content-banner {
  position: relative;
  overflow: hidden;
  margin: var(--responsive-spacing-lg) 0;
  background-repeat: no-repeat;

  &:has(h1) {
    margin: 0;

    .banner-content {
      padding: var(--responsive-spacing);
    }
  }

  &.statement {
    .img-wrapper {
      border-radius: 0;

      .image-right & {
        order: 2;
      }
    }

    .banner-content {
      justify-content: flex-start;
      padding: var(--responsive-spacing);
      border-radius: 0;

      .image-right & {
        order: 1;
      }

      p {
        font-style: italic;
      }

      h2 {
        margin-bottom: var(--spacing-xs);
        font-size: var(--font-size-h3);
      }

      h3 {
        margin-bottom: 0;
        font-size: var(--font-size-h4);
      }
    }
  }

  .container {
    &.grid {
      gap: 0;
    }

    .container & {
      padding: 0;
    }
  }

  .banner-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    grid-column: span 12;
    padding: var(--responsive-spacing);
    order: 1;

    h1 {
      margin-top: 2rem;
    }

    p {
      &:has(br) {
        display: none;
      }
    }
  }

  img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 35vh;
    object-fit: cover;
    object-position: right;
  }

  h1 {
    margin-top: 0;
  }

  .img-wrapper {
    position: relative;
    grid-column: span 12;
  }
}

@media (min-width: 1200px) {
  .content-banner {
    .banner-content {
      grid-column: span 5;
      border-radius: var(--border-radius) 0 0 var(--border-radius);
      order: 0;

      .image-left & {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        order: 1;
      }

      .content-width-wide & {
        grid-column: span 8;
      }

      &.bg-white {
        border-bottom: 1px solid var(--brand-blue-four);
        border-left: 1px solid var(--brand-blue-four);
        border-top: 1px solid var(--brand-blue-four);
      }
    }

    .img-wrapper {
      overflow: hidden;
      grid-column: span 7;
      height: 100%;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;

      &:has(img) {
        min-height: 400px;
        max-height: 560px;
      }

      .image-left & {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
      }

      .content-width-wide & {
        grid-column: span 4;
      }

      &.bg-white {
        border-bottom: 1px solid var(--brand-blue-four);
        border-right: 1px solid var(--brand-blue-four);
        border-top: 1px solid var(--brand-blue-four);
      }
    }
  }
}

.bdm-finder {
  margin: var(--responsive-spacing) 0;

  @media (min-width: 1800px) {
    margin: calc(var(--responsive-spacing) + var(--spacing-sm)) 0;
  }

  .mobile-bg-image {
    display: block;
    width: 100%;

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

  .bdm-finder-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);

    #filter {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      transition: all ease 0.3s;

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

      &.active {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }

    > .grid {
      padding: var(--responsive-spacing-lg);
      background-position: bottom right;
      background-size: cover;

      @media (max-width: 1199.98px) {
        background: none !important;
        padding: 0;
      }
    }

    .search-wrapper {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: var(--responsive-spacing);
      background-color: white;
      transition: all 0.3s ease;

      @media (min-width: 1200px) {
        min-height: 31rem;
        padding: calc(var(--responsive-spacing) / 1.5);
      }

      h2 {
        margin: 0;
      }

      h3 {
        margin: 0 0 var(--spacing-s);
        color: var(--brand-green-three);
      }

      p {
        color: var(--brand-blue-three);
        font-weight: 500;
      }

      .search-container {
        margin-top: auto;
        padding-top: 2rem;

        input {
          width: 100%;
          min-height: 3rem;
          padding: var(--spacing-xs) var(--spacing-s);
          border: 1px solid var(--surface-grey);
        }

        button {
          justify-content: center;
          width: 100%;
          margin: var(--spacing-s) 0 0;
        }
      }
    }

    #results-wrapper {
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s ease;

      &.active {
        z-index: 2;
        visibility: visible;
        opacity: 1;
      }

      .bdm-wrapper {
        position: relative;
        display: none;
        height: 100%;
        padding: 0;

        @media (min-width: 480px) {
          padding: 0 var(--responsive-spacing-sm);
        }

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

        &.d-block {
          display: block;
        }

        &.d-none {
          display: none;
        }

        &.notfound {
          .no-results-wrapper {
            height: 100%;
            padding: calc(var(--responsive-spacing) / 1.5);
            background-color: white;
          }
        }

        .grid {
          height: 100%;
        }

        .bdm {
          background-color: white;

          .profile-img-wrapper {
            img {
              display: block;
              aspect-ratio: 1.5 / 1;
              width: 100%;
              object-fit: cover;
            }
          }

          .bdm-info-wrapper {
            padding: var(--responsive-spacing) var(--responsive-spacing-sm);

            @media (min-width: 1200px) {
              padding: calc(var(--responsive-spacing) / 2)
                calc(var(--responsive-spacing) / 1.5);
            }

            .profile-info-wrapper {
              h4 {
                margin: 0 0 var(--spacing-xs);
              }

              h5 {
                margin: 0 0 var(--spacing-s);
                font-size: var(--font-size-h6);
              }

              p {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                margin: 0;
                color: var(--brand-blue-three);

                a {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                svg {
                  flex: 0 0 auto;
                  width: 1.25rem;
                  height: 1.25rem;
                  margin-right: var(--spacing-xs);
                }
              }
            }
          }
        }
      }
    }
  }
}

.bento-layout {
  margin: var(--responsive-spacing-lg) 0;
  padding-left: var(--spacing-s);

  ul {
    li {
      height: 24rem;
      border-radius: var(--border-radius);
      padding: var(--spacing-s);
      position: relative;
      overflow: hidden;
      transition: all .3s ease-in-out;

      &:hover {
        cursor: pointer;
      }

      a,
      .link {
        border: none;
        padding: var(--spacing-s);
        height: 100%;
        display: block;
        transition: all .3s ease-in-out;

        p {
          font-size: 2.25rem;
          font-weight: 600;
          margin: 0;
          line-height: 1.1;
        }

        img {
          width: 60%;
        }
      }
    }
  }

  .glide-bullets {
    margin: var(--spacing-s) 0;
  }
}

@media (min-width: 1200px) {
  .bento-layout {
    padding-left: 0;

    .glide-track {
      overflow: unset;
    }

    ul {
      all: unset;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: var(--spacing-sm);
      grid-row-gap: var(--spacing-sm);
      height: 24rem;
      margin: unset !important; /* override Glide styles */
      width: auto !important; /* override Glide styles */

      li {
        border-radius: var(--border-radius);
        height: unset;
        width: auto !important; /* override Glide styles */
        margin: unset !important; /* override Glide styles */
        padding: 0.375rem;

        &:hover {
          scale: 1.015;
        }

        a, .link {
          border: none;
          padding: var(--spacing-s) var(--spacing-sm);
          height: calc(100% - 2rem);

          img {
            max-width: 120px;;
          }

          &:focus-visible {
            border-radius: var(--border-radius);
          }
        }

        &:first-child {
          grid-area: 1 / 1 / 3 / 4;

          &:before {
            height: 11.438rem;
          }

          &:hover {
            &::before {
              height: 10.813rem;
            }
          }
        }

        &:nth-child(2) {
          grid-area: 2 / 4 / 3 / 6;

          a {
            padding: 0;
            height: 100%;
          }
        }

        &:nth-child(3) {
          grid-area: 2 / 6 / 3 / 13;
          text-align: right;

          &:before {
            width: 15.563rem;
            height: 120%;
          }
        }

        &:nth-child(4) {
          grid-area: 1 / 4 / 2 / 11; 

          &:before {
            height: 12rem;
          }
        }

        &:nth-child(5) {     
          grid-area: 1 / 11 / 2 / 13;
        }
      }
    }
  }

  .glide-bullets {
    display: none;
  }
}

@media (min-width: 1440px) {
  .bento-layout {
    padding: 0;
  }
}
.box-links {
  .box-link {
    margin: var(--responsive-spacing) 0;
  }

  a {
    display: flex;
    
    svg {
      height: 1rem;
      width: 1rem;
      margin-left: var(--spacing-s);
    }
  }
}
.calculator-wrapper {
  padding: 1rem 0 3rem;

  h2 {
    margin-bottom: 2rem;
    color: var(--brand-green-one);
  }

  p {
    max-width: 750px;
    line-height: 1.5;
  }

  .required {
    margin-top: 5px;
    color: #f23a3c;
  }

  .button {
    margin: 0 var(--spacing-s) 3rem 0;
  }

  .questions-container {
    padding-bottom: var(--spacing-s);
  }

  .question-wrapper {
    margin: 0.5em 2rem 0.75em 0;
    padding-bottom: 1rem;

    fieldset {
      max-width: 26rem;
    }

    &.percentage {
      .input-wrapper {
        width: unset;
      }

      .input-value-percent {
        max-width: 88px;
        padding: 3px var(--spacing-s);
        text-align: left;
      }

      .answer-prefix {
        right: var(--spacing-s);
        left: unset;
        margin-right: 0;
        margin-left: var(--spacing-xs);
      }
    }
  }

  .label-wrapper {
    display: flex;
  }

  .question-label {
    display: block;
    margin: 0.25em 0;
    color: var(--brand-blue-five);
    font-size: var(--font-size-body-large);

    &.required:after {
      color: red;
      content: "*";
    }
  }

  .question-hint {
    display: block;
    max-width: 400px;
    margin: 0 0 0.375rem;
    padding-right: 0.625rem;
    color: #505a5f;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .question-hint p {
    margin: 0 0 var(--spacing-xs);
    line-height: 1.5;
  }

  .question-wrapper .answer-prefix {
    display: inline-block;
    margin-right: 6px;
  }

  .question-wrapper input[type='text'],
  .question-wrapper input[type='email'],
  .question-wrapper input[type='tel'],
  .question-wrapper input[type='password'],
  .question-wrapper input[type='number'] {
    width: 100%;
    max-width: 400px;
    height: 45px;
    padding: 3px 2rem 3px 2rem;
    border: 2px solid var(--brand-blue-three, #165788);
    font: inherit
  }

  .question-wrapper select:focus,
  .question-wrapper input[type='text']:focus,
  .question-wrapper input[type='email']:focus,
  .question-wrapper input[type='tel']:focus,
  .question-wrapper input[type='password']:focus,
  .question-wrapper input[type='number']:focus,
  .question-wrapper textarea:focus {
    outline: 3px solid var(--warning, #ffbf47);
    outline-offset: 0;
  }

  .question-wrapper select {
    width: 100%;
    max-width: 400px;
    height: 45px;
    padding: 0.75rem 3rem 0.7rem 1rem;
    border: 2px solid var(--brand-blue-three, #165788);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-size: 1rem;
    background-repeat: no-repeat;
    background-color: #fff;
    font-family: inherit;
    font-size: 1rem;
    appearance: none
  }

  .input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;

    .answer-prefix {
      position: absolute;
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
    }
  }

  .question-radio-button {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
  }

  .question-wrapper fieldset {
    margin: 0;
    padding: 0;
    border: 0 none;
  }

  .question-wrapper legend {
    padding: 0;
  }

  .radio-input {
    position: relative;
    width: 2.105rem;
    height: 2.105rem;
    accent-color: var(--brand-blue-three, #165788);
    cursor: pointer;
  }

  .radio-label {
    padding-left: 0.75rem;
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  .additional-content {
    padding-top: 1rem;

    h3 {
      margin-bottom: -1rem;
    }
  }

  /* Validation */
  .field-validation-error {
    display: block;
    line-height: 2rem;
  }

  /* Results */
  .results {
    span {
      color: var(--brand-blue-five);
      font-size: var(--font-size-body-large);
    }
  }

  .results-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background-color: var(--brand-blue-four);
    text-align: left;
    text-align: center;

    p {
      margin: 1rem 0 0 0;
      color: var(--white);
      font-size: 1.5rem;

      b {
        font-weight: bold;
      }
    }

    p:has(b) {
      margin: 0;
      padding: 0;
    }

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

    h3 {
      color: var(--white);
      font-size: 40px;
    }
  }

  .validation-summary-errors {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    padding: var(--spacing-sm) 0;
    border: 1px solid var(--danger);
    border-radius: var(--border-radius);

    ul {
      margin: 0;
    }
  }
}

/* Breakpoint SM */
@media (min-width: 48rem) {
  .calculator-wrapper {
    padding: 2rem 0 3rem;
  }
}

.category-cta {
  --responsive-spacing: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);

  &.link-cover {
    position: relative;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;

    a {
      background: none;
      color: inherit;

      &:after {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
      }
    }

    .content-wrapper {
      .link {
        background-size: 100% 1px;
        transition: background-size 0.3s ease;
      }
    }

    &:hover,
    &:focus {
      transform: scale(1.05);
      cursor: pointer;

      .content-wrapper {
        .link {
          background-size: 0 1px;
        }
      }
    }
  }

  .layout-one-column & {
    max-width: 620px;
  }

  .layout-list & {
    height: 100%;
  }

  h3 {
    font-size: var(--font-size-h4);
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    p {
      margin-top: 0;
      margin-bottom: var(--spacing-sm);
    }

    a {
      margin-left: auto;
      background-size: 100% 1px;
      color: var(--brand-blue-five);
      font-weight: 600;
      text-decoration: none;

      &:hover,
      &:focus {
        background-size: 0 1px;
      }
    }

    .link {
      display: inline;
      font-size: var(--font-size-body-large);
    }

    ul,
    ol {
      li {
        margin: var(--spacing-s) 0;

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  &.header-only {
    border: 0.125rem solid var(--brand-green-two);

    .title-wrapper {
      padding: var(--responsive-spacing);
      background-color: var(--brand-green-two);
    }

    &.blue-one {
      border: 0.125rem solid var(--brand-blue-one);

      .title-wrapper {
        background-color: var(--brand-blue-one);

        h3 {
          color: var(--brand-green-five);
        }
      }
    }

    &.blue-two {
      border: 0.125rem solid var(--brand-blue-two);

      .title-wrapper {
        background-color: var(--brand-blue-two);

        h3 {
          color: var(--brand-green-five);
        }
      }
    }

    &.blue-three {
      border: 0.125rem solid var(--brand-blue-three);

      .title-wrapper {
        background-color: var(--brand-blue-three);

        h3 {
          color: var(--white);
        }
      }
    }

    &.blue-four {
      border: 0.125rem solid var(--brand-blue-four);

      .title-wrapper {
        background-color: var(--brand-blue-four);

        h3 {
          color: var(--white);
        }
      }
    }

    &.blue-five {
      border: 0.125rem solid var(--brand-blue-five);

      .title-wrapper {
        background-color: var(--brand-blue-five);

        h3 {
          color: var(--white);
        }
      }
    }

    &.green-one {
      border: 0.125rem solid var(--brand-green-one);

      .title-wrapper {
        background-color: var(--brand-green-one);
      }
    }

    &.green-two {
      border: 0.125rem solid var(--brand-green-two);

      .title-wrapper {
        background-color: var(--brand-green-two);
      }
    }

    &.green-three {
      border: 0.125rem solid var(--brand-green-three);

      .title-wrapper {
        background-color: var(--brand-green-three);
      }
    }

    &.green-four {
      border: 0.125rem solid var(--brand-green-four);

      .title-wrapper {
        background-color: var(--brand-green-four);

        h3 {
          color: var(--white);
        }
      }
    }

    &.green-five {
      border: 0.125rem solid var(--brand-green-five);

      .title-wrapper {
        background-color: var(--brand-green-five);

        h3 {
          color: var(--white);
        }
      }
    }

    &.black {
      border: var(--black) 3px solid;

      .title-wrapper {
        background-color: var(--black);

        h3 {
          color: var(--white);
        }
      }
    }

    &.white {
      border: var(--white) 3px solid;

      .title-wrapper {
        background-color: var(--white);
      }
    }

    &.surface-grey {
      border: var(--surface-grey) 3px solid;

      .title-wrapper {
        background-color: var(--surface-grey);
      }
    }

    .content-wrapper {
      padding: var(--responsive-spacing) var(--responsive-spacing) calc(var(--responsive-spacing) + 1rem);
      background-color: var(--white);

      .link-wrapper {
        text-align: right;
        text-wrap-style: pretty;
      }
    }
  }

  &.full-colour {
    padding: var(--responsive-spacing);
    background-image: none;
    transition: all 0.3s ease-in-out;

    .title-wrapper {
      margin-bottom: var(--margin-h3);
    }

    .content-wrapper {
      .link-wrapper {
        display: flex;
      }

      .link {
        span {
          align-self: flex-end;
          margin: 0 0 0 auto;
          background-image: linear-gradient(currentColor, currentColor);
          background-position: right bottom;
          background-size: 100% 1px;
          background-repeat: no-repeat;
          font-size: var(--font-size-body-large);
          font-weight: 600;
          text-decoration: none;
          transition: background-size 0.4s ease;
        }

        &:hover,
        &:focus {
          span {
            background-size: 0 1px;
          }
        }
      }
    }

    &.blue-one {
      background-color: var(--brand-blue-one);
      color: var(--brand-green-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-green-five);

        &::before {
          background-color: var(--brand-green-five);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-green-five);

          &:before {
            color: var(--brand-green-five);
          }
        }
      }
    }

    &.blue-two {
      background-color: var(--brand-blue-two);
      color: var(--brand-green-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-green-five);

        &::before {
          background-color: var(--brand-green-five);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-green-five);

          &:before {
            color: var(--brand-green-five);
          }
        }
      }
    }

    &.blue-three {
      background-color: var(--brand-blue-three);
      color: var(--white);

      h2,
      h3,
      a,
      p {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.blue-four {
      background-color: var(--brand-blue-four);
      color: var(--white);

      h2,
      h3,
      a,
      p {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.blue-five {
      background-color: var(--brand-blue-five);
      color: var(--white);

      h2,
      h3,
      a,
      p {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.green-one {
      background-color: var(--brand-green-one);
      color: var(--brand-blue-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-blue-five);

        &::before {
          background-color: var(--brand-blue-five);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-blue-five);

          &:before {
            color: var(--brand-blue-five);
          }
        }
      }
    }

    &.green-two {
      background-color: var(--brand-green-two);
      color: var(--brand-blue-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-blue-five);

        &::before {
          background-color: var(--brand-blue-five);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-blue-five);

          &:before {
            color: var(--brand-blue-five);
          }
        }
      }
    }

    &.green-three {
      background-color: var(--brand-green-three);
      color: var(--brand-blue-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-blue-five);

        &::before {
          background-color: var(--brand-blue-five);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-blue-five);

          &:before {
            color: var(--brand-blue-five);
          }
        }
      }
    }

    &.green-four {
      background-color: var(--brand-green-four);
      color: var(--white);

      h2,
      h3,
      p {
        color: var(--white);
      }

      a {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.green-five {
      background-color: var(--brand-green-five);
      color: var(--white);

      h2,
      h3,
      p {
        color: var(--white);
      }

      a {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.black {
      background-color: var(--black);
      color: var(--white);

      h2,
      h3,
      a,
      p {
        color: var(--white);

        &::before {
          background-color: var(--white);
        }
      }

      ul,
      ol {
        li {
          color: var(--white);

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

    &.surface-grey {
      background-color: var(--surface-grey);
      color: var(--brand-blue-five);

      h2,
      h3,
      a,
      p {
        color: var(--brand-blue-five);

        &::before {
          background-color: var(--brand-blue-five);
        }

        &.link {
          color: var(--brand-blue-three);
        }
      }

      ul,
      ol {
        li {
          color: var(--brand-blue-five);

          &:before {
            color: var(--brand-blue-five);
          }
        }
      }
    }

    &.white {
      border: 1px solid var(--surface-grey);
    }
  }

  &.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: var(--responsive-spacing);
    border: 2px solid var(--surface-grey);
    transition: all 0.3s ease-in-out;

    @media (min-width: 1200px) {
      aspect-ratio: 1;

      .col-lg-6 & {
        aspect-ratio: unset;
        padding: var(--spacing-md) var(--responsive-spacing);
      }
    }

    &:hover,
    &:focus {
      transform: scale(1.05);
      cursor: pointer;

      img {
        transform: scale(1.075);
      }

      .content-wrapper {
        .link {
          background-size: 0 1px;
        }
      }
    }

    &.blue-one {
      border: 0.125rem solid var(--brand-blue-one);
    }

    &.blue-two {
      border: 0.125rem solid var(--brand-blue-two);
    }

    &.blue-three {
      border: 0.125rem solid var(--brand-blue-three);
    }

    &.blue-four {
      border: 0.125rem solid var(--brand-blue-four);
    }

    &.blue-five {
      border: 0.125rem solid var(--brand-blue-five);
    }

    &.green-one {
      border: 0.125rem solid var(--brand-green-one);
    }

    &.green-two {
      border: 0.125rem solid var(--brand-green-two);
    }

    &.green-three {
      border: 0.125rem solid var(--brand-green-three);
    }

    &.green-four {
      border: 0.125rem solid var(--brand-green-four);
    }

    &.green-five {
      border: 0.125rem solid var(--brand-green-five);
    }

    &.black {
      border: var(--black) 3px solid;
    }

    h3 {
      color: var(--brand-blue-three);
    }

    img {
      height: 3rem;
      transition: transform 0.3s ease-in-out;

      @media (prefers-contrast: more) {
        filter: brightness(0) invert(1);
      }

      @media (min-width: 1200px) {
        height: 6rem;
      }
    }

    .title-wrapper {
      padding: var(--spacing-sm) 0 var(--spacing-xs);
      border: none;
      background-color: transparent;
      text-align: center;

      h3 {
        font-size: var(--font-size-h3);
        font-weight: 600;
      }
    }

    .content-wrapper {
      height: unset;
      text-align: center;

      .header-only & {
        padding: var(--spacing-sm);
      }

      .link-wrapper {
        margin-top: var(--spacing-s);
      }

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

      .link {
        .full-colour &,
        .icon & {
          span {
            align-self: center;
            margin: 0;
            background-image: linear-gradient(currentColor, currentColor);
            background-position: right bottom;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            color: var(--brand-blue-three);
            font-size: var(--font-size-body-large);
            font-weight: 600;
            text-decoration: none;
            transition: background-size 0.4s ease;
          }

          &:hover,
          &:focus {
            span {
              background-size: 0 1px;
            }
          }
        }
      }
    }
  }
}

.three-column-category-cta {
  margin: var(--responsive-spacing) var(--spacing-s);

  @media (min-width: 1440px) {
    margin: var(--responsive-spacing-lg)
      calc(var(--responsive-spacing) + 1.5rem);
  }

  .grid {
    gap: var(--grid-gap);

    @media (min-width: 1200px) {
      margin-top: var(--spacing-md);
    }
  }
}

@media (min-width: 1200px) {
  .category-cta {
    padding: 0;

    &.header-only {
      &:has(img) {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          height: 6rem;
        }

        .title-wrapper {
          padding: var(--spacing-sm) 0 var(--spacing-xs);
          text-align: center;

          h5 {
            font-size: var(--font-size-h3);
          }
        }

        .content-wrapper {
          .link {
            margin: 0 auto;
            margin-top: 0;
          }
        }
      }
    }

    &.full-colour {
      padding: var(--spacing-sm) var(--spacing-sm) 2rem;
    }
  }
}

.column-cards {
  .container {
    h2 {
      width: 100%;
    }

    p {
      width: 100%;
    }

    ul {
      display: flex;
      justify-content: space-between;
      margin: var(--spacing-md) 0;

      .card {
        width: 30%;
  
        img {
          height: 16rem;
        }
      }
    }
  }
}
.disclaimer {
  margin: var(--spacing-md) var(--spacing-s);

  .container {
    .container & {
      padding: 0;
    }
  }

  .content {
    border-radius: var(--border-radius);
    padding: var(--responsive-spacing);

    p {
      max-width: unset;
    }

    img {
      width: 110px;
      margin-left: auto;
    }

    &.no-image {
      text-align: center;
      border: 1px solid var(--brand-blue-five);
      padding: var(--responsive-spacing) var(--responsive-spacing-lg);

      &.bg-white {
        border: 1px solid var(--black);
      }
    }

    .col-12 {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  .layout-two-column &,
  .layout-three-column {
    margin: 0;
  }
    
}

@media (min-width: 768px) {
  .disclaimer {
    margin: var(--responsive-spacing-lg) var(--responsive-spacing);

    .content {
      p {
        margin-bottom: 0;
      }

      img {
        margin-top: var(--spacing-xs);
      }

      .col-md-2 {
        display: flex;
        justify-content: center;
        align-self: flex-start;
      }
    }
  }
}

@media (min-width: 1440px) {
  .disclaimer {
    margin: var(--responsive-spacing-lg) calc(var(--responsive-spacing) + var(--spacing-sm));
  }
}

.disclaimer + .disclaimer {
  margin-top: 0;
}

.documents-group {
  margin: var(--responsive-spacing) 0;
  padding: 0 var(--spacing-sm);

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

  .container {
    ul,
    ol {
      padding-left: 0;

      li {
        display: flex;
        padding-left: 0;
        list-style: none;

        .icon {
          width: auto;
          height: 2rem;
          margin-right: 1rem;

          @media (prefers-contrast: more) {
            filter: brightness(0) invert(1);
          }
        }
      }
    }
  }

  ul {
    @media (min-width: 1200px) {
      column-count: 2;
    }

    li {
      margin-bottom: var(--spacing-sm);
      list-style: none;

      &:first-child {
        margin-top: 0;
      }

      a {
        display: flex;
        flex-direction: column;
        background: none;

        &:before {
          display: none;
        }

        p {
          .layout-one-column & {
            font-weight: 400;
          }
        }
      }

      p {
        position: relative;
        align-self: flex-start;
        font-weight: 400;

        &:first-child {
          margin-bottom: var(--spacing-xs);

          &:before {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--brand-blue-five);
            transform: scaleX(1);
            transform-origin: left;
            transition: transform 0.3s ease-in-out;
            content: "";
          }

          &:hover,
          &:focus {
            &:before {
              transform: scaleX(0);
              transform-origin: right;
            }
          }
        }

        span {
          font-weight: 400;
        }

        &.description {
          font-size: var(--body-size-small);
        }
      }

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

.event-list {
  .past-events {
    .event {
      filter: grayscale(1);
      opacity: 0.85;
      color: #6c757d;

      .button {
        display: none;
      }
    }
  }

  ul {
    list-style: none;

    .event {
      margin: var(--spacing-md) 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: var(--spacing-s);

      .image-wrapper {
        grid-column: span 3;

        img {
          border-radius: var(--border-radius);
          object-fit: cover;
          width: 100%;
          height: 100%;
          max-height: 300px;
          margin: 0;
        }
      }

      .content-wrapper {
        display: flex;
        flex-direction: column;
        grid-column: span 3;
        height: 100%;
        margin-top: var(--spacing-s);
        padding: 0;

        .event-details {
          display: flex;
          flex-wrap: wrap;
          gap: var(--spacing-xs) var(--spacing-s);
          margin-bottom: var(--spacing-s);

          svg {
            height: 1rem;
            width: 20px;

            circle,
            path {
              stroke: var(--brand-blue-three);

              @media (prefers-contrast: more) {
                stroke: CanvasText;
              }
            }

            rect {
              fill: var(--brand-blue-three);

              @media (prefers-contrast: more) {
                fill: CanvasText;
              }
            }
          }

          p {
            margin: 0;
          }
        }

        .button {
          margin-top: auto;
          margin-bottom: 0;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .event-list {
    ul {
      .event {
        .image-wrapper {
          grid-column: span 1;

          img {
            min-height: 400px;
            max-height: initial;
          }
        }

        .content-wrapper {
          grid-column: span 2;
          margin-top: 0;
          padding: 0 var(--spacing-s);
        }
      }
    }
  }
}

.feature-list {
  padding: var(--responsive-spacing) 0;

  .layout-one-column &,
  .layout-two-column &,
  .layout-three-column & {
    padding: 0;
  }

  .product &,
  .savings-product-page & {
    margin-top: 0;
  }

  .content-wrapper {
    max-width: 700px;
  }

  ul {
    padding-left: 0;

    li {
      display: flex;
      align-items: flex-start;
      margin: var(--spacing-s) 0;
      padding-left: 0;

      &:first-child {
        margin-top: 0;
      }

      svg {
        flex-shrink: 0;
        height: 0.8rem;
        margin-top: 0.375rem;
        margin-right: var(--spacing-s);

        &.tick {
          margin-top: var(--spacing-xs);
          fill: var(--brand-green-four);

          @media (prefers-contrast: more) {
            fill: CanvasText;
          }
        }

        &.cross {
          height: 0.75rem;
          margin-top: var(--spacing-xs);
          fill: var(--brand-blue-four);

          @media (prefers-contrast: more) {
            fill: CanvasText;
          }
        }
      }

      span {
        margin-right: var(--spacing-s);
        margin-left: var(--spacing-xxs);
        color: var(--brand-green-four);
      }

      p {
        margin: 0;
      }
    }
  }
}

.financial-advisor-contact {
  display: flex;
  margin: var(--responsive-spacing-lg) var(--spacing-s);
  border-radius: var(--border-radius);
  overflow: hidden;

  .grid {
    grid-gap: 0;
  }

  .image-section {
    img {
      height: 100%;
      object-fit: cover;
    }
  }

  .content {
    padding: var(--responsive-spacing-lg) var(--responsive-spacing);

    .phone-number {
      margin-bottom: var(--spacing-s);
      display: inline-flex;
    }

    p {
      @media (min-width: 1200px) {
        padding-right: var(--responsive-spacing-lg);
      }
    }
  }

  .hidden {
    display: none;
  }
}

.icon-link {
  display: flex;
  justify-content: center;

  .icon-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--spacing-s);
    color: black;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-align: center;

    &:hover, &:focus {
      text-decoration-color: var(--surface-grey);
    }

    img {
      height: 45px;
    }
  }
}
.image-carousel {
  display: flex;
  overflow-x: hidden;
  align-items: center;
  padding: var(--responsive-spacing-lg) var(--spacing-s);
  transition: background-color 0.3s ease;

  .container {
    &:has(.static) {
      width: 100%;
    }
  }

  .carousel-title {
    display: flex;
    flex-direction: column;
  }

  .glide {
    .glide-track {
      overflow: unset;
      padding-bottom: var(--spacing-md);
      border-radius: var(--border-radius);
      clip-path: inset(0 -1000px 0 0);

      &.static {
        .glide-slides {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 100%;

          .glide-slide {
            max-width: 726px;
            padding: 0 var(--spacing-s);
            list-style: none;
          }
        }
      }
    }

    .glide-slides {
      overflow: unset;
    }

    .glide-slide {
      opacity: 0.5;
      margin-top: var(--spacing-md);
      transition: opacity 0.3s ease;
      list-style: none;

      &.glide-slide--active {
        opacity: 1;
      }

      .image-wrapper {
        overflow: hidden;
        aspect-ratio: var(--aspect-ratio);
        width: 100%;
        margin-top: 0;
        margin-bottom: var(--spacing-sm);

        img {
          width: 100%;
          height: 100%;
          border-radius: var(--border-radius);
          object-fit: cover;
        }
      }

      .content-wrapper {
        max-width: 700px;
        padding-bottom: var(--spacing-md);

        .button {
          margin-top: var(--responsive-spacing-sm);
        }
      }

      &.event {
        .event-details {
          display: flex;
          flex-wrap: wrap;
          gap: var(--spacing-xs) var(--spacing-s);
          margin-top: var(--spacing-xs);
          margin-bottom: var(--spacing-s);

          p {
            margin: 0;

            svg {
              width: 20px;
              height: 1rem;

              circle,
              path {
                stroke: var(--brand-blue-three);

                .bg-green-one &,
                .bg-green-two &,
                .bg-green-three & {
                  stroke: var(--brand-blue-five);
                }

                .bg-green-four &,
                .bg-green-five & {
                  stroke: var(--white);
                }

                .bg-blue-one &,
                .bg-blue-two & {
                  stroke: var(--brand-green-five);
                }

                .bg-blue-three &,
                .bg-blue-four &,
                .bg-blue-five &,
                .bg-black & {
                  stroke: var(--white);
                }
              }

              rect {
                fill: var(--brand-blue-three);

                .bg-green-one &,
                .bg-green-two &,
                .bg-green-three & {
                  fill: var(--brand-blue-five);
                }

                .bg-green-four &,
                .bg-green-five & {
                  fill: var(--white);
                }

                .bg-blue-one &,
                .bg-blue-two & {
                  fill: var(--brand-blue-five);
                }

                .bg-blue-three &,
                .bg-blue-four &,
                .bg-blue-five &,
                .bg-black & {
                  fill: var(--white);
                }
              }
            }
          }
        }
      }
    }

    .glide-arrows {
      position: relative;
      height: 1.563rem;
      margin-top: 0;
      padding-left: 0.125rem;

      .glide-arrow {
        margin: 0;
        padding: var(--spacing-xxs);
        box-shadow: none;
        border: none;
        background-color: transparent;
        text-shadow: none;

        &:focus {
          outline: none;
        }

        &:focus-visible {
          box-shadow: 0 0 0 0.125rem blue;
          border-radius: 0.25rem;
          outline: 0.125rem solid yellow;
          outline-offset: -0.125rem;
        }

        svg {
          position: unset;
          width: 1.75rem;
          height: 1.75rem;
          margin: 0;

          path {
            transition: fill 0.3s ease;
            fill: var(--brand-blue-five);
          }

          .bg-white &,
          .bg-black &,
          .bg-green-four &,
          .bg-green-five &,
          .bg-blue-three &,
          .bg-blue-four &,
          .bg-blue-five & {
            path {
              fill: #ffffff;
            }
          }

          .bg-green-one &,
          .bg-green-two &,
          .bg-green-three & {
            path {
              fill: var(--brand-blue-five);
            }
          }

          .bg-blue-one &,
          .bg-blue-two & {
            path {
              fill: var(--brand-green-five);
            }
          }
        }

        &.right {
          margin-left: 100px;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .image-carousel {
    padding: var(--responsive-spacing-lg) 0;

    .carousel-title {
      padding-left: var(--spacing-s);
    }

    .glide {
      .glide-slide {
        margin-top: 0;

        .image-wrapper {
          position: relative;
          overflow: hidden;
          margin-top: 0;
          margin-bottom: var(--spacing-sm);
          border-radius: var(--border-radius);

          img {
            transition: all 0.3s ease;

            &:focus,
            &:focus-visible {
              transform: scale(1.05);

              .image-wrapper {
                &:after {
                  opacity: 1;
                }
              }
            }
          }

          .lightbox-carousel & {
            &:after {
              position: absolute;
              right: 2rem;
              bottom: 2rem;
              display: flex;
              opacity: 0;
              align-items: center;
              justify-content: center;
              border-radius: 0.25rem;
              background-color: var(--white);
              transition: opacity 0.3s ease;
              content: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3C!--%20Made%20by%20Christian%20Veigt%20--%3E%3Csvg%20fill%3D%22%23000000%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%20width%3D%2244px%22%20height%3D%2244px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M22.661%2C20.5H36c1.104%2C0%2C2-0.896%2C2-2s-0.896-2-2-2H19c-1.104%2C0-2.5%2C1.276-2.5%2C2.381v17c0%2C1.104%2C0.896%2C2%2C2%2C2s2-0.896%2C2-2V24.876l16.042%2C15.791c0.391%2C0.391%2C1.027%2C0.586%2C1.539%2C0.586s1.086-0.195%2C1.477-0.586c0.781-0.781%2C0.812-2.237%2C0.031-3.019L22.661%2C20.5z%22%2F%3E%3Cpath%20d%3D%22M83%2C16.5H66c-1.104%2C0-2%2C0.896-2%2C2s0.896%2C2%2C2%2C2h12.605L61.647%2C37.648c-0.781%2C0.781-0.781%2C2.142%2C0%2C2.923c0.39%2C0.391%2C0.902%2C0.633%2C1.414%2C0.633s0.774-0.171%2C1.164-0.562l16.274-16.5v11.738c0%2C1.104%2C0.896%2C2%2C2%2C2s2-0.896%2C2-2v-17C84.5%2C17.776%2C84.104%2C16.5%2C83%2C16.5z%22%2F%3E%3Cpath%20d%3D%22M36.542%2C60.962L20.5%2C76.754V65.881c0-1.104-0.896-2-2-2s-2%2C0.896-2%2C2v17c0%2C1.104%2C1.396%2C1.619%2C2.5%2C1.619h17c1.104%2C0%2C2-0.896%2C2-2s-0.896-2-2-2H22.529L39.62%2C63.6c0.781-0.781%2C0.656-1.951-0.125-2.732C38.715%2C60.086%2C37.322%2C60.181%2C36.542%2C60.962z%22%2F%3E%3Cpath%20d%3D%22M82.5%2C63.881c-1.104%2C0-2%2C0.896-2%2C2v11.606L64.226%2C60.962c-0.78-0.781-1.923-0.781-2.703%2C0c-0.781%2C0.781-0.719%2C1.856%2C0.062%2C2.638l17.152%2C16.9H66c-1.104%2C0-2%2C0.896-2%2C2s0.896%2C2%2C2%2C2h17c1.104%2C0%2C1.5-0.515%2C1.5-1.619v-17C84.5%2C64.776%2C83.604%2C63.881%2C82.5%2C63.881z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            }
          }

          &:hover,
          &:focus,
          &:focus-visible {
            &:after {
              opacity: 1;
            }

            .lightbox-carousel & {
              img {
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1440px) {
  .image-carousel {
    .carousel-title {
      padding-left: 0;
    }
  }
}

.lightbox {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  overflow: auto;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s);
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);
  outline: none;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--border-radius);
  object-fit: contain;
}

.lightbox-caption {
  max-width: 60vw;
  margin-top: var(--spacing-s);
  color: var(--white);
  font-size: 1rem;
  text-align: center;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0 var(--spacing-xs) var(--spacing-xxs);
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;

  &:hover,
  &:focus {
    background: transparent;
    color: var(--white);
  }
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  &:focus-visible {
    box-shadow: 0 0 0 0.125rem blue;
    outline: 0.125rem solid yellow;
    outline-offset: -0.125rem;
  }
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  padding: var(--spacing-xs) var(--spacing-s);
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2rem;
  transform: translateY(-50%);
  cursor: pointer;

  svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
  }

  &:hover,
  &:focus {
    background: transparent;
    color: var(--white);
  }
}

.lightbox-prev {
  left: var(--spacing-s);
}

.lightbox-next {
  right: var(--spacing-s);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lightbox-image {
    max-height: 50vh;
  }

  .lightbox-caption {
    font-size: 0.875rem;
  }

  .lightbox-prev,
  .lightbox-next {
    position: fixed;
    top: unset;
    bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-s);
  }
}

.mortgage {
  h1 {
    margin: 0;
  }

  h2 {
    font-size: var(--font-size-h3);
  }

  .product-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-sm);
    padding: var(--responsive-spacing) 0 0;
  }

  .product-information {
    padding: 0 var(--responsive-spacing);
    border-radius: var(--border-radius);

    @media(min-width: 1200px) {
      border: 1px solid var(--brand-blue-four);
    }

    @media(min-width: 1800px) {
      margin: var(--responsive-spacing) calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
    }

    .product-description {
      padding: 0 0 var(--responsive-spacing);
      border-bottom: 1px solid var(--brand-blue-four);
    }

    .calculator-wrapper {
      padding: var(--responsive-spacing) 0;
      border-bottom: 1px solid var(--brand-blue-four);

      h2 {
        color: var(--brand-blue-five);
      }

      .mortgage-calculator {
        margin: 0;
        padding: 0;
        border: none;
      }

      .small {
        width: 100%;
        max-width: unset;
        padding: var(--spacing-sm);
        border-radius: var(--border-radius);
        background-color: var(--surface-grey);
      }
    }
  }

  .product-code-container {
    display: flex;
    align-items: flex-start;
    margin: 0 0 var(--spacing-xs);

    #copy-target {
      font-size: var(--font-size-h4);
      line-height: 1;
      cursor: pointer;
    }

    button {
      all: unset;
      margin-top: 0;
      margin-right: var(--spacing-xxs);

      svg {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
      }

      &:hover {
        cursor: pointer;
      }

      &:focus-visible {
        box-shadow: 0 0 0 0.125rem blue;
        border-radius: var(--btn-border-radius);
        outline: 0.125rem solid yellow;
        outline-offset: 0.125rem;
      }
    }

    p {
      margin: 0 var(--spacing-xxs) 0 0;
    }

    span {
      margin-top: 0;
    }
  }

  .mortgage-overview {
    margin: var(--spacing-sm) 0;

    @media (min-width: 1200px) {
      padding: var(--spacing-s) var(--spacing-sm);
      border: 1px solid var(--brand-blue-four);
      border-radius: var(--border-radius);
    }

    .col {
      @media (min-width: 1200px) {
        border-right: 1px solid var(--brand-blue-four);

        &:last-child {
          border-right: none;
        }
      }
    }

    .detail-title {
      margin-bottom: 0;
      color: var(--brand-blue-five);
      font-size: var(--font-size-body);
      font-weight: 600;
    }

    .detail {
      font-size: var(--font-size-body);
    }
  }

  .summary {
    margin: var(--responsive-spacing) 0;
    border-bottom: 1px solid var(--brand-blue-four);

    table {
      overflow: hidden;
      width: 100%;
      padding: var(--spacing-s);
      border-radius: var(--border-radius);
      border-collapse: collapse;

      tr {
        border-bottom: 1px solid var(--brand-blue-four);

        &:last-child {
          border-bottom: none;
        }
      }

      th {
        width: fit-content;
        padding: var(--spacing-s) var(--spacing-lg) var(--spacing-s) 0;
        color: var(--brand-blue-five);
        font-size: var(--font-size-h6);
        font-weight: 600;
        text-align: left;
        vertical-align: top;

        @media(min-width: 1200px) {
          min-width: 350px;
        }
      }

      td {
        display: flex;
        flex-wrap: wrap;
        padding: var(--spacing-s);

        p {
          flex: 1 1 100%;
          margin: 0;

          &:not(:last-child){
            margin-bottom: 0.75rem;
          }
        }

        &.fee-row {
          p:first-child {
            flex: 0 0 auto;
          }

          p {
            flex: 1 0 0;
          }
        }
      }
    }
  }

  .terms {
    margin-bottom: var(--responsive-spacing);

    ul {
      margin-left: 0;

      li {
        margin-bottom: var(--spacing-s);
      }
    }
  }
}

.mortgages-list {
  margin-bottom: var(--responsive-spacing-lg);
  padding: 0 var(--spacing-s);
  scroll-margin-top: 4.5rem;

  @media (min-width: 1100px) {
    padding: 0 var(--responsive-spacing);
  }

  @media (min-width: 1800px) {
    padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
  }

  &.desktop {
    display: none;
  }

  .layout-one-column & {
    margin: 0;
    padding: 0;
  }

  h2 {
    margin-top: var(--responsive-spacing-lg);
  }

  #noResultsMsg {
    width: fit-content;
    width: 100%;
    max-width: unset;
    margin-top: var(--spacing-s);
    padding: var(--spacing-xs) var(--spacing-s);
    border: 1px solid var(--warning);
    border-radius: var(--border-radius);
    background-color: var(--warning);
    color: var(--black);
    font-size: var(--font-size-body-small);
    font-weight: 500;
    text-align: center;
  }

  .sort-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-s) 0;

    @media (min-width: 768px) {
      justify-content: space-between;
      align-items: flex-end;
    }

    @media (min-width: 1100px) {
      flex-direction: row;
    }

    .button {
      &.filter {
        height: 42.8px;
        margin: 0 var(--spacing-s) 0 0;
        padding-right: var(--spacing-s);
        font-size: var(--font-size-body-small);
        text-wrap: nowrap;

        @media (min-width: 1100px) {
          padding-right: 1.25rem;
        }

        svg {
          overflow: unset;
          width: 12px;
          height: 12px;
          margin-left: var(--spacing-xs);
          transition: all 0.3s ease;
        }

        &:hover,
        &:focus {
          svg {
            path {
              fill: var(--brand-blue-four);
            }
          }
        }

        &.active {
          svg {
            transform: rotate(-180deg);
          }
        }
      }
    }

    .filters-sort {
      display: flex;
      justify-content: space-between;
      width: 100%;

      @media (min-width: 1100px) {
        width: unset;
      }
    }

    .select-box {
      z-index: 6;
      flex-grow: 1;
      width: auto;
      margin: 0;

      button {
        min-width: unset;
        height: 42.8px;
        font-size: var(--font-size-body-small);

        @media (min-width: 1100px) {
          min-width: 230px;
        }
      }

      .option {
        font-size: var(--font-size-body-small);
      }

      .list {
        min-width: unset;

        @media (min-width: 1100px) {
          min-width: 230px;
        }
      }
    }
  }

  .mortgage-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--spacing-s);
    padding-bottom: 0;

    @media (min-width: 768px) {
      justify-content: unset;
    }

    @media (min-width: 1100px) {
      margin-bottom: 0;
      width: auto;
    }

    .input-wrap {
      position: relative;
      display: inline-block;
      width: 100%;

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

      input {
        width: 100%;
        min-width: 300px;
        height: 42.8px;
        padding: var(--spacing-s) var(--spacing-s);
        border: 1px solid var(--brand-blue-five);
        border-radius: var(--border-radius);
        font-size: var(--font-size-body-small);

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

        &:focus-visible {
          box-shadow: 0 0 0 0.125rem blue;
          border-radius: var(--btn-border-radius);
          outline: 0.125rem solid yellow;
          outline-offset: 0.125rem;
        }
      }

      .clear-btn {
        position: absolute;
        top: 50%;
        right: var(--spacing-xs);
        visibility: hidden;
        opacity: 0;
        height: 1.25rem;
        margin: 0;
        padding: var(--spacing-xs);
        border: none;
        background: #fff;
        color: var(--brand-blue-five);
        font-size: var(--font-size-body-small);
        transform: translateY(-50%);
        transition: opacity 0.15s ease;
        cursor: pointer;
        pointer-events: none;
      }

      .clear-btn {
        &.visible {
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
        }
      }
    }

    p {
      margin-top: var(--spacing-xs);

      @media (min-width: 768px) {
        margin-left: auto;
      }

      @media (min-width: 1100px) {
        margin-top: 0;
      }
    }

    button {
      height: 42.8px;
      margin: var(--spacing-s) 0 0 0;
      font-size: var(--font-size-body-small);

      @media (min-width: 768px) {
        margin: 0 var(--spacing-s);
      }
    }
  }

  .mortgages-filter {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--border-radius);
    pointer-events: none;

    &.visible {
      visibility: visible;
      height: auto;
      pointer-events: auto;
    }

    h2 {
      margin-top: 0;
      margin-bottom: 1rem;
      font-size: var(--font-size-h3);
      font-weight: 600;
    }

    h3 {
      margin-bottom: var(--spacing-xs);
      font-size: var(--font-size-h6);
      font-weight: 600;
    }

    .deselect-button {
      grid-column: span 2;
      width: max-content;
      margin-top: 0;
      font-size: var(--font-size-body-small);
    }

    .container {
      width: 100%;

      @media (min-width: 768px) {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        padding: 0;
      }

      @media (min-width: 1800px) {
        padding: 0 var(--responsive-spacing-lg);
      }
    }

    &.checkbox-filter {
      max-width: unset;
    }

    .filter-container {
      display: grid;
      opacity: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-gap: var(--spacing-sm) var(--spacing-s);
      margin-bottom: 1rem;
      padding: var(--spacing-sm) var(--spacing-s);
      border-radius: var(--border-radius);
      background-color: var(--surface-grey);

      @media (min-width: 768px) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-gap: var(--spacing-sm);
        width: 100%;
        background-color: unset;
        margin: var(--spacing-xs) 0 var(--spacing-sm);
        padding: 0;
        border-radius: unset;
      }

      @media (min-width: 1100px) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        padding: var(--spacing-s) 0 var(--spacing-sm);
      }

      .visible & {
        opacity: 1;
        transition: opacity 0.3s ease;
      }
    }

    .filter-item {
      grid-column: span 1;

      @media (min-width: 768px) {
        padding: var(--spacing-sm);
        grid-column: span 2;
        background-color: var(--surface-grey);
        border-radius: var(--border-radius);
      }

      &:last-child {
        grid-column: span 2;
      }

      .checkbox {
        display: flex;
        align-items: center;
        margin: var(--spacing-s) 0;

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

        label {
          margin-left: var(--spacing-xs);
          font-size: var(--font-size-body-small);
        }

        input {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }

  .mobile-table-wrapper {
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 0 auto;
      padding: 0;
      width: 100%;
      gap: var(--grid-gap);
    }

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

  .mortgage-products {
    width: 100%;
    border-collapse: collapse;

    &.desktop {
      position: relative;
      z-index: 5;
      display: none;
      background-color: #fff;

      @media (min-width: 1100px) {
        display: table;
        border: 1px solid var(--surface-grey);
      }
    }

    thead {
      background-color: var(--brand-blue-four);
      color: var(--white);

      th {
        padding: var(--spacing-s) var(--spacing-sm);
        font-weight: 500;
        text-align: left;
      }
    }
  }

  .product {
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--spacing-s);
    padding: 0;
    border-radius: var(--border-radius);
    border-collapse: collapse;

    @media (min-width: 768px) {
      grid-gap: 0;
    }

    @media (min-width: 1100px) {
      @media (prefers-contrast: more) {
        border-top: 1px solid CanvasText;
      }

      &.even-row {
        background-color: var(--surface-grey);
      }

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

    thead {
      background-color: var(--brand-blue-four);
      color: var(--white);
      text-align: left;

      th {
        padding: var(--spacing-xs) var(--spacing-xs);
        background-color: var(--brand-blue-four);
        font-size: var(--font-size-body-small);
        font-weight: 500;
      }
    }

    .product-code {
      margin: 0;
      color: var(--white);
      font-size: var(--font-size-body-small);
      font-weight: 500;

      @media (min-width: 1100px) {
        color: var(--black);
        font-size: var(--font-size-body);
        margin-right: var(--spacing-xs);
      }
    }

    .name {
      @media (min-width: 768px) {
        .calculator-result {
          margin-top: 0;
          margin-bottom: 0;
        }

        .monthly-repayment {
          span {
            margin-left: var(--spacing-xs);
            color: var(--brand-blue-five);
            font-weight: 600;
          }
        }

        .cta {
          padding-right: var(--spacing-s);
          padding-bottom: 0;

          a {
            &.button-desktop {
              display: inline-block;
              margin-bottom: var(--spacing-xxs);
            }
          }
        }
      }

      @media (min-width: 1100px) {
        padding: var(--spacing-s) var(--spacing-sm);

        div {
          display: flex;
          flex-wrap: wrap;
        }

        .monthly-repayment {
          display: inline-flex;
          margin-bottom: 0;
          font-size: var(--font-size-body);
          font-weight: 500;
        }

        .cta {
          a {
            margin: 0;
            color: var(--brand-blue-five);

            &.button-desktop {
              display: none;
            }
          }
        }
      }
    }

    .summary {
      @media (min-width: 768px) {
        .key-features {
          padding: var(--spacing-sm);

          .feature-list {
            column-gap: var(--spacing-sm);
            margin-top: -1.5rem;
            padding: 0;
            column-count: 2;
            list-style-position: inside;

            li {
              display: flex;
              margin-bottom: 0;
              padding-top: var(--spacing-s);
              font-size: var(--font-size-body);
              break-inside: avoid;
            }
          }

          .rate-wrapper {
            margin-bottom: 0;
          }

          .rate-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--grid-gap);

            p {
              display: flex;
              flex-direction: column;
              align-items: unset;
              padding-bottom: 0;
              line-height: 1.6;
              border-bottom: unset;

              &:last-child {
                margin-bottom: var(--spacing-s);
              }

              span {
                font-size: var(--font-size-h4);
              }
            }

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

    td {
      padding: var(--spacing-xs) var(--spacing-xs);
      font-size: var(--font-size-body-small);
      font-weight: 400;
      vertical-align: top;

      @media (min-width: 1100px) {
        font-size: var(--font-size-body);
        padding: var(--spacing-s) var(--spacing-sm);
        line-height: 1.6;
      }

      &:nth-child(odd) {
        border-left: 1px solid var(--surface-grey);

        @media (min-width: 1100px) {
          border-left: unset;
        }
      }

      &:nth-child(even) {
        border-right: 1px solid var(--surface-grey);

        @media (min-width: 1100px) {
          border-right: unset;
        }
      }
    }

    tr {
      &:nth-last-child(2) {
        td {
          border-right: 1px solid var(--surface-grey);

          @media (min-width: 1100px) {
            border-right: unset;
          }
        }
      }

      &:last-child {
        background-color: var(--white);

        td {
          padding: var(--spacing-xs) var(--spacing-xs) 0;
          vertical-align: middle;
          border-left: unset;
          border-right: unset;
          border-top: 1px solid var(--surface-grey);
        }
      }

      td {
        &:nth-child(odd) {
          font-weight: 500;
        }
      }
    }

    tbody {
      tr {
        &:last-child {
          height: 100%;

          td {
            vertical-align: top;
          }
        }
      }
    }

    .monthly-repayment-row {
      margin: 0;

      p {
        margin: 0;
        font-size: var(--font-size-body-small);
      }

      &:has(p:empty),
      &:has(span:empty) {
        display: none;
      }
    }

    h3 {
      margin: 0;
      font-size: var(--font-size-body);
      line-height: 1.6;
    }

    .button {
      margin: var(--spacing-xs) 0;
      font-size: var(--font-size-body-small);
      text-wrap: nowrap;

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

    .button-mobile {
      @media (min-width: 768px) {
        display: none;
      }
    }

    details {
      @media (min-width: 1100px) {
        width: 300px;
      }

      &:open {
        summary svg {
          transform: rotate(0deg);
        }
      }

      summary {
        display: flex;
        align-items: center;
        cursor: pointer;
        list-style: none;

        &:focus-visible {
          box-shadow: 0 0 0 0.125rem blue;
          border-radius: var(--btn-border-radius);
          outline: 0.125rem solid yellow;
          outline-offset: 0.125rem;
        }

        p {
          margin-left: var(--spacing-xs);
          font-size: var(--font-size-body-small);
          font-weight: 600;
        }

        svg {
          width: 1.25rem;
          height: 1.25rem;
          transform: rotate(-180deg);
          transition: transform 0.3s ease;
          stroke: var(--brand-blue-four);
        }
      }

      .feature-list {
        margin: var(--spacing-xxs) 0;
        padding: var(--spacing-xxs) 0;
        border-bottom: 1px solid rgba(0, 10, 70, 0.1);
        border-top: 1px solid rgba(0, 10, 70, 0.1);

        li {
          display: flex;
          align-items: center;
          font-size: var(--font-size-body-small);
          font-weight: 400;
          list-style: none;

          &:last-child:not(:first-child) {
            margin-top: var(--spacing-xxs);
          }

          svg {
            width: 1rem;
            height: 1rem;
            margin-right: var(--spacing-xxs);
            stroke: var(--brand-blue-three);

            @media (prefers-contrast: more) {
              stroke: CanvasText;
            }

            &.icon-red {
              stroke: var(--danger-dark);

              @media (prefers-contrast: more) {
                stroke: CanvasText;
              }
            }
          }
        }
      }
    }

    .erc {
      font-size: var(--font-size-body-small);
      font-weight: 400;

      span {
        margin-left: 0.125rem;
        font-weight: 500;
      }
    }

    .summary {
      .key-features {
        padding: var(--spacing-xxs) var(--spacing-sm);

        .rate-wrapper {
          margin-bottom: var(--spacing-s);
        }

        .feature-list {
          padding: 0 0 var(--spacing-s) 0;

          p {
            font-weight: 500;
          }
        }

        .rate-container {
          width: 100%;

          p {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: var(--spacing-s);
            line-height: 1;
            border-bottom: 2px solid var(--brand-green-two);

            span {
              color: var(--brand-blue-five);
              font-size: 1.25rem;
              font-weight: 600;
            }
          }

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

        &.grid {
          grid-gap: 0;
        }
      }
    }

    .cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xs);

      @media (min-width: 1100px) {
        justify-content: flex-end;
        align-items: flex-start;
        text-align: right;
        padding: var(--spacing-s) var(--spacing-sm);
        flex-direction: row;
      }

      .btn-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
      }

      .button {
        margin: 0;
      }
    }

    .button-mobile {
      justify-content: center;
      width: 100%;
      margin-top: 0;
      margin-bottom: var(--spacing-sm);
    }
  }

  .hidden {
    display: none;
  }

  .validation-summary-errors {
    margin-top: var(--spacing-s);
    padding: var(--spacing-xs) 0 var(--spacing-xs);
    border: 1px solid var(--danger);
    border-radius: var(--border-radius);

    ul {
      margin: 0;
    }
  }

  .mobile-table-wrapper {
    @media (min-width: 1100px) {
      display: none;
    }
  }
}

.news-article {
  margin-top: var(--responsive-spacing);
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-s);

  @media (min-width: 1200px) {
    margin: var(--responsive-spacing-lg)
      var(--responsive-spacing);
    padding: 0;
  }

  @media (min-width: 1440px) {
    margin: var(--responsive-spacing-lg)
      var(--responsive-spacing);
  }

  .container {
    padding: 0;
  }

  .article-body {
    > section {
      padding-right: 0;
      padding-left: 0;

      &.disclaimer {
        margin: var(--spacing-s) 0;
      }
    }

    .bdm-finder {
      @media (min-width: 1440px) {
        margin-left: calc(var(--responsive-spacing) * -1);
        margin-right: calc(var(--responsive-spacing) * -1);
      }
    }
  }

  .container {
    .container {
      padding: 0;
    }
  }

  .banner-img {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 600px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    object-fit: cover;
    object-position: center;
  }

  .content-banner {
    img {
      border-radius: var(--border-radius);
      object-position: unset;
    }
  }

  .article-info {
    display: flex;
    margin-bottom: 0;

    p {
      margin: 0;
      font-size: var(--spacing-s);
    }

    .date {
      margin-right: var(--spacing-sm);
    }

    .date,
    .time {
      display: flex;
      align-items: center;
      font-size: var(--font-size-body-small);

      @media (min-width: 1200px) {
        font-size: var(--font-size-body);
      }

      svg {
        margin-right: var(--spacing-xs);

        @media (prefers-contrast: more) {
          rect {
            fill: CanvasText;
          }

          circle,
          path {
            stroke: CanvasText;
          }
        }
      }
    }
  }

  h1 {
    margin-top: var(--spacing-s);
    margin-bottom: var(--spacing-s);
    padding: var(--responsive-spacing) 0 0;
    font-size: var(--font-size-h1);
    font-weight: 600;
  }

  ul,
  ol {
    li {
      margin: var(--spacing-s) 0;
      padding-left: var(--spacing-xs);
      line-height: 1.6;
      list-style: initial;

      .news-article & {
        &:first-child{
          padding-left: var(--spacing-xxs);
        }
      }
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }

  .layout-list {
    ul {
      li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    }
  }

  .grid {
    .col-lg-10 {
      padding: var(--spacing-s) 0;

      &.has-image {
        margin-top: 0;
        padding: 0 var(--spacing-s) var(--spacing-s);
        border-radius: var(--spacing-md) var(--spacing-lg) 0 0;
        background-color: #fff;
      }
    }
  }

  .articles {
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .news-article {
    .article-body {
      .content {
      }
    }

    .grid {
      padding: 0;

      .col-lg-10 {
        margin-top: var(--spacing-lg);

        &.has-image {
          width: 100%;
          margin-left: 0;
          padding: var(--responsive-spacing);
          background-color: #fff;
        }
      }
    }

    h1 {
      margin-top: 0;
      padding-top: 0;
    }
  }
}

@media (min-width: 1920px) {
  .news-article {
    img {
      max-height: 850px;
    }
  }
}

.news-highlights {
  margin: var(--spacing-md) var(--spacing-s);

  @media (min-width: 1200px) {
    margin: var(--spacing-md) 0;
  }

  .title-wrapper {
    margin-bottom: var(--responsive-spacing);
  }

  .grid {
    padding: var(--spacing-s) 0;
    gap: calc(var(--grid-gap) + var(--spacing-xs));
  }

  .button {
    margin-top: var(--responsive-spacing);
    margin-left: auto;
  }
}

@media (min-width: 1440px) {
  .news-highlights {
    .grid {
      padding: 0;
      gap: var(--grid-gap);
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      padding: 0 var(--responsive-spacing-lg)
    }

    .button {
      margin-left: auto;
    }
  }
}


.number {
  margin: var(--spacing-sm) 0;
  padding-bottom: var(--spacing-s);

  h2 {
    font-size: var(--font-size-h1);
		letter-spacing: -5%;

    .colour-black & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--black);
    }

    .colour-surface-grey & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--surface-grey);
    }

    .colour-blue-one & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-blue-one);
    }

    .colour-blue-two & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-blue-two);
    }

    .colour-blue-three & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-blue-three);
    }

    .colour-blue-four & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-blue-four);
    }

    .colour-blue-five & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-blue-five);
    }

    .colour-green-one & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-green-one);
    }

    .colour-green-two & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-green-two);
    }

    .colour-green-three & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-green-three);
    }

    .colour-green-four & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-green-four);
    }

    .colour-green-five & {
      padding-bottom: var(--spacing-sm);
      border-bottom: 0.5rem solid var(--brand-green-five);
    }
  }
}

.person {
  height: 100%;
  border: 1px solid var(--surface-grey);
  border-radius: var(--border-radius);

  .person-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  h3 {
    margin-bottom: var(--margin-h5);
  }

  .img-wrapper {
    aspect-ratio: var(--aspect-ratio);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);

    img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }
  }

  .text-wrapper {
    display: flex;
    justify-content: space-between;
    flex: 1;
    flex-wrap: wrap;
    padding: 0 var(--spacing-s) 2rem;
    flex-direction: column;

    @media (min-width: 1200px) {
      padding: 0 var(--spacing-sm) 2rem;
    }

    div:has(a) {
      align-self: flex-end;
      margin-top: var(--spacing-sm);
    }
  }
}

.person-profile {
  .img-wrapper {
    position: relative;
  }

  .vouched-for-rating {
    position: absolute;
    bottom: 1rem;
    right: 1rem;

    @media (min-width: 768px) {
      bottom: var(--responsive-spacing);
      right: var(--responsive-spacing);
    }

    img {
      width: 120px;
      height: auto;
      min-height: unset;

      @media (min-width: 768px) {
        width: 165px;
      }
    }
  }

  a.vf-ctd {
    background-image: none;
    margin-bottom: var(--responsive-spacing);
    background-color: white;
    margin: 0;
    border: 2px solid var(--brand-green-two);
    width: 160px;
    min-width: 160px;
    transition: transform 0.3s ease;

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

    &:hover,
    &:focus {
      transform: scale(1.1);
    }

    .vf-ctd__content {
      padding: var(--spacing-xs) 0;
      width: 160px;
      min-width: 160px;
      height: 100px;
      min-height: 100px;

      @media (min-width: 768px) {
        padding: var(--spacing-s) 0;
        width: 240px;
        min-width: 240px;
        height: 116px;
        height: 160px;
        min-height: 160px;
      }
    }

    .vf-ctd__text {
      font-size: 0.5rem;
      text-align: center;

      @media (min-width: 768px) {
        font-size: 0.625rem;
      }
    }

    .vf-ctd__stars {
      margin: var(--spacing-xs) 0;

      @media (min-width: 768px) {
        margin: 1.125rem 0;
      }

      .vf-ctd__star {
        width: 1rem;

        @media (min-width: 768px) {
          width: 29.7px;
        }
      }
    }
  }
}

.pre-footer {
  position: relative;
  margin-bottom: -1rem;
  padding: var(--spacing-s);

  &:after {
    content: "";
    display: block;
    background-color: var(--black);
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .container {
    z-index: 1;
    position: relative;
    border-radius: var(--border-radius);
    padding: var(--responsive-spacing);
    text-align: center;
    overflow: hidden;

    a {
      &.phone-number {
        font-size: 2.25rem;
      }
    }
  }

  .cta,
  h2,
  p {
    z-index: 1;
    position: relative;
  }

  .telephone-container {
    p {
      font-size: 0.9rem;
      margin-top: 0;
    }
  }
}

@media (min-width: 1200px) {
  .pre-footer {
    padding: 0 var(--spacing-md) var(--spacing-md);
    margin-top: var(--spacing-md);
    
    .cta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .container {
      .shape-one {
        left: 0;
      }

      .shape-two {
        right: 0;
      }

      a {
        &.phone-number {
          font-size: 3.063rem;
        }
      }
    }

    .button-container {
      width: 45%;
      display: flex;
      justify-content: flex-end;
      align-self: flex-end;
      align-items: center;
    }

    .telephone-container {
      width: 45%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;

      p {
        margin: 0;
      }
    }
  }
}

@media (min-width: 1800px) {
  .pre-footer {
    padding: 0 var(--spacing-lg) var(--spacing-md);
  }
}
.product-promo {
  height: 100%;

  .container {
    height: 100%;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;


    .content-wrapper {
      padding: var(--responsive-spacing);
    }

    .rate-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-s) var(--spacing-md);

      .rate-info {
        margin: var(--spacing-xxs);
      }

      .rate {
        font-size: var(--font-size-h1-lg);
        font-weight: 700;
        line-height: 1;
        margin: 0;
        color: var(--brand-green-two);
      }
    }

    .button {
      margin-top: var(--responsive-spacing);
      color: var(--brand-blue-five);
    }
  }
}

@media (min-width: 768px) {
  .product-promo {
    .container {
      .rate-wrapper {
        gap: 0rem var(--spacing-md);
      }
    }
  }
}

.quote {
  padding: 0 var(--spacing-s);

  @media (min-width: 1200px) {
    padding: var(--responsive-spacing);
  }

  @media (min-width: 1800px) {
    padding: var(--responsive-spacing) calc(var(--responsive-spacing) + var(--spacing-sm));
  }

  blockquote {
    font-size: var(--font-size-h3);
    font-weight: 600;
  }

  .container {
    .quotee-container {
      padding: var(--spacing-s);
      border-radius: var(--border-radius);

      h3 {
        font-size: var(--font-size-h4);
      }
    }
  }
}
.service-standards {
  padding: 0 var(--spacing-s);

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

  .layout-one-column & {
    margin: var(--responsive-spacing) 0 0;
    padding: 0;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-s);

    @media (min-width: 768px) {
      justify-content: center;
    }

    @media (min-width: 1475px) {
      justify-content: unset;

      .layout-one-column & {
        justify-content: center;
      }
    }
  }

  .single-standard {
    display: flex;
    flex-direction: row;
    align-items: center;

    @media (min-width: 768px) {
      margin-right: var(--spacing-sm);

      .layout-one-column & {
        margin-right: var(--responsive-spacing);
      }
    }

    .layout-one-column & {
      flex-direction: column;
    }

    &:nth-child(n + 3) {
      display: none;

      @media (min-width: 1100px) {
        display: flex;
      }
    }

    .icon-wrapper {
      display: flex;
    }

    img {
      display: none;
      width: 1rem;
      margin-right: var(--spacing-xxs);

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

      @media (prefers-contrast: more) {
        filter: brightness(0) invert(1);
      }

      .layout-one-column & {
        display: block;
        width: 4rem;
      }
    }

    .text-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-wrap: wrap;

      .layout-one-column & {
        flex-direction: column;
      }

      p {
        margin: 0;
        font-size: var(--font-size-body-small);

        @media (min-width: 1680px) {
          font-size: 1rem;
        }

        .layout-one-column & {
          font-size: var(--font-size-body);
        }

        &.description {
          color: var(--brand-blue-five);
          font-weight: 600;
        }

        &.value {
          margin: 0 var(--spacing-xxs) 0 var(--spacing-xs);

          .layout-one-column & {
            margin: 0;
            color: var(--brand-blue-five);
            font-size: var(--font-size-h3);
            font-weight: 600;
          }
        }
      }
    }
  }

  .last-updated {
    display: none;
    font-size: var(--font-size-body-small);
    text-wrap: nowrap;

    @media (min-width: 1475px) {
      display: flex;
      margin-left: auto;
    }

    @media (min-width: 1680px) {
      font-size: 1rem;
    }

    .layout-one-column & {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: unset;
      margin: 0 0 var(--responsive-spacing);
      font-size: var(--font-size-body);
    }

    span {
      margin-right: 0.25rem;
      color: var(--brand-blue-five);
      font-weight: 600;
    }
  }
}

:root {
  counter-reset: number-stepper;
}

.step {
  h3 {
    margin: var(--spacing-s) 0 var(--spacing-sm);
  }
}

.number-stepper--with-numbers {
  .step {
    &:before {
      counter-increment: number-stepper;
      content: counter(number-stepper);
      font-size: var(--font-size-h4);
    }
  }
}
.step-by-step-journey {
  margin: var(--responsive-spacing);

  [class*="layout-"] & {
    margin: 0;
  }

  @media (min-width: 1200px) {
    margin: var(--responsive-spacing) calc(var(--responsive-spacing) + var(--spacing-sm));
  }

  @media (min-width: 1800px) {
    margin: calc(var(--responsive-spacing) + var(--spacing-sm)) calc(var(--responsive-spacing-lg) + var(--spacing-sm));
  }

  .journey {
    position: relative;
    margin: var(--responsive-spacing) 0;
    padding-left: 0;

    &:before {
      position: absolute;
      top: 1.875rem;
      bottom: 0;
      left: 23px;
      width: 0.125rem;
      background-color: var(--brand-blue-four);
      content: "";

      @media (prefers-contrast: more) {
        background-color: CanvasText;
      }
    }

    .layout-one-column & {
      &:before {
        left: 55px;
      }
    }

    li {
      display: flex;
      padding-left: 0;
      list-style: none;

      &:last-child {
        &:before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 3rem;
          border-bottom: 0.125rem solid var(--brand-blue-four);
          content: "";
        }
      }

      .layout-one-column & {
        &:last-child {
          &:before {
            left: 31px;
          }
        }
      }

      .step-indicator {
        z-index: 1;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-top: 1.125rem;
        margin-right: 2rem;
        background-color: var(--white);
        color: var(--brand-blue-four);
        font-size: var(--font-size-h4);
        font-weight: bold;
        text-align: center;

        @media (min-width: 768px) {
          margin-top: 1.875rem;
        }

        &:has(.step-number) {
          border: 2px solid var(--brand-blue-four);
          border-radius: 50%;
        }
      }

      .step-container {
        flex-grow: 1;
        max-width: 80ch;
        border-top: 1px solid var(--brand-blue-four);

        details {
          &:hover {
            cursor: pointer;
          }

          &:open {
            svg {
              transform: rotate(45deg);
            }
          }

          summary {
            display: flex;
            flex-direction: column;
            padding: var(--spacing-sm) 0;
            font-size: var(--font-size-h5);
            list-style: none;

            &:focus-visible {
              box-shadow: 0 0 0 0.125rem blue;
              border-radius: var(--btn-border-radius);
              outline: 0.125rem solid yellow;
              outline-offset: 0.125rem;
            }

            .summary-title {
              margin-left: var(--spacing-xs);
              color: var(--brand-blue-five);
              font-size: var(--font-size-h3);
              font-weight: 600;
            }

            .wrapper {
              display: flex;
              align-items: center;

              svg {
                position: static;
                width: 1.5rem;
                height: 1.5rem;
                margin: 0 var(--spacing-xs);
                transition: transform 0.15s ease-in-out;
              }
            }
          }

          .content {
            display: block;
            padding: 0 0 var(--spacing-sm) var(--spacing-xs);
          }
        }
      }
    }
  }
}

:root {
  --border-style: 2px solid var(--surface-grey);
}

.component-table {
  overflow-x: auto;
  padding: 0 var(--spacing-s) var(--spacing-sm);

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

  &:has(.table-style-opening-times) {
    overflow-x: unset;
    padding: 0;
  }

  table {
    width: 100%;
    color: var(--black);
    font-size: var(--font-size-body);
    border-collapse: separate;
    border-spacing: 0;

    @media (prefers-contrast: more) {
      border-collapse: collapse;
    }

    tr,
    td {
      padding: var(--spacing-xs);
      border-bottom: var(--border-style);
    }

    th,
    td {
      max-width: 300px;
      margin: var(--spacing-md);
      padding: var(--spacing-s);
      font-weight: 400;
      line-height: 1.6;
      vertical-align: top;
    }

    tr {
      background: var(--white);

      @media (prefers-contrast: more) {
        &:not(:first-child) {
          border-top: 1px solid CanvasText;
        }
      }

      &:first-child {
        background: var(--surface-grey);

        td {
          border-top: var(--border-style);

          &:first-child {
            border-top-left-radius: var(--border-radius);
          }

          &:last-child {
            border-top-right-radius: var(--border-radius);
          }
        }
      }

      &:last-child {
        td {
          border-bottom: var(--border-style);

          &:first-child {
            border-bottom-left-radius: var(--border-radius);
          }

          &:last-child {
            border-bottom-right-radius: var(--border-radius);
          }
        }
      }

      &:nth-child(2n + 3) {
        background-color: rgba(237, 243, 246, 0.5);
      }

      td {
        border-bottom: none;

        &:first-child {
          border-left: var(--border-style);
        }

        &:last-child {
          border-right: var(--border-style);
        }
      }
    }

    .green-one & {
      --border-style: 2px solid rgba(200, 230, 155, 0.15);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-green-one);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(200, 230, 155, 0.15);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(200, 230, 155, 0.15);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-green-one);
              color: var(--brand-blue-five);
              border-bottom: 1px solid rgba(0, 10, 70, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-green-one);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(150, 210, 90, 0.15);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-one);
              color: var(--brand-blue-five);
            }
          }
        }
      }
    }

    .green-two & {
      --border-style: 2px solid rgba(150, 210, 90, 0.15);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-green-two);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(150, 210, 90, 0.15);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            width: 25%;
            background-color: rgba(150, 210, 90, 0.15);
            border-bottom: 1px solid rgba(0, 10, 70, 0.1);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-two);
              color: var(--brand-blue-five);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-green-two);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(150, 210, 90, 0.15);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-two);
              color: var(--brand-blue-five);
            }
          }
        }
      }
    }

    .green-three & {
      --border-style: 2px solid rgba(115, 150, 0, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-green-three);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(115, 150, 0, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(115, 150, 0, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-green-three);
              color: var(--brand-blue-five);
              border-bottom: 1px solid rgba(0, 10, 70, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-green-three);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(115, 150, 0, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-three);
              color: var(--brand-blue-five);
            }
          }
        }
      }
    }

    .green-four & {
      --border-style: 2px solid rgba(20, 100, 70, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-green-four);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(120, 100, 70, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(120, 100, 70, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-four);
              color: var(--white);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-green-four);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(120, 100, 70, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-green-four);
              color: var(--white);
              border-bottom: 1px solid rgba(256, 256, 256, 0.1);
            }
          }
        }
      }
    }

    .green-five & {
      --border-style: 2px solid rgba(0, 50, 10, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-green-five);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 50, 10, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(0, 50, 10, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-green-five);
              color: var(--white);
              border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-green-five);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 50, 10, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-green-five);
              color: var(--white);
            }
          }
        }
      }
    }

    .blue-one & {
      --border-style: 2px solid rgba(170, 230, 250, 0.15);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-blue-one);
            color: var(--brand-green-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(170, 230, 250, 0.15);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(170, 230, 250, 0.15);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-blue-one);
              color: var(--brand-green-five);
              border-bottom: 1px solid rgba(0, 50, 10, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-blue-one);
            color: var(--brand-green-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(170, 230, 250, 0.15);
          }

          td {
            &:first-child {
              background-color: var(--brand-blue-one);
              color: var(--brand-green-five);
            }
          }
        }
      }
    }

    .blue-two & {
      --border-style: 2px solid rgba(100, 180, 220, 0.15);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-blue-two);
            color: var(--brand-green-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(100, 180, 220, 0.15);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(100, 180, 220, 0.15);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-blue-two);
              color: var(--brand-green-five);
              border-bottom: 1px solid rgba(0, 50, 10, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-blue-two);
            color: var(--brand-green-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(100, 180, 220, 0.15);
          }

          td {
            &:first-child {
              background-color: var(--brand-blue-two);
              color: var(--brand-green-five);
            }
          }
        }
      }
    }

    .blue-three & {
      --border-style: 2px solid rgba(22, 87, 136, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-blue-three);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(22, 87, 136, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(22, 87, 136, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-blue-three);
              color: var(--white);
              border-bottom: 1px solid rgba(256, 256, 256, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-blue-three);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(22, 87, 136, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-blue-three);
              color: var(--white);
            }
          }
        }
      }
    }

    .blue-four & {
      --border-style: 2px solid rgba(0, 50, 100, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-blue-four);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 50, 100, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(0, 50, 100, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-blue-four);
              color: var(--white);
              border-bottom: 1px solid rgba(256, 256, 256, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-blue-four);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 50, 100, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-blue-four);
              color: var(--white);
            }
          }
        }
      }
    }

    .blue-five & {
      --border-style: 2px solid rgba(0, 10, 70, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--brand-blue-five);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 10, 70, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(0, 10, 70, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--brand-blue-five);
              color: var(--white);
              border-bottom: 1px solid rgba(256, 256, 256, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--brand-blue-five);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 10, 70, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--brand-blue-five);
              color: var(--white);
            }
          }
        }
      }
    }

    .black & {
      --border-style: 2px solid rgba(0, 0, 0, 0.05);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--black);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 0, 0, 0.05);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(0, 0, 0, 0.05);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--black);
              color: var(--white);
              border-bottom: 1px solid rgba(256, 256, 256, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--black);
            color: var(--white);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(0, 0, 0, 0.05);
          }

          td {
            &:first-child {
              background-color: var(--black);
              color: var(--white);
            }
          }
        }
      }
    }

    .white & {
      --border-style: 2px solid rgba(237, 243, 246, 0.5);

      tr {
        .table-style-1 & {
          background-color: var(--white);

          &:first-child {
            background-color: var(--white);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 2) {
            background-color: rgba(237, 243, 246, 0.5);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(237, 243, 246, 0.5);
          }

          td {
            &:first-child {
              background-color: var(--white);
              color: var(--brand-blue-five);
            }
          }
        }

        .table-style-3 & {
          background-color: var(--white);

          &:first-child {
            background-color: var(--white);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 2) {
            background-color: rgba(237, 243, 246, 0.5);
          }

          td {
            &:first-child {
              background-color: var(--white);
              color: var(--brand-blue-five);
            }
          }
        }
      }
    }

    .surface-grey & {
      --border-style: 2px solid rgba(237, 243, 246, 0.5);

      tr {
        .table-style-1 & {
          &:first-child {
            background-color: var(--surface-grey);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(237, 243, 246, 0.5);
          }
        }

        .table-style-2 & {
          background-color: var(--white);

          &:nth-child(2n + 1) {
            background-color: rgba(237, 243, 246, 0.5);
          }

          td {
            &:first-child {
              width: 25%;
              background-color: var(--surface-grey);
              color: var(--brand-blue-five);
              font-weight: 600;
              border-bottom: 1px solid rgba(0, 10, 70, 0.1);
            }
          }
        }

        .table-style-3 & {
          &:first-child {
            background-color: var(--surface-grey);
            color: var(--brand-blue-five);
          }

          &:nth-child(2n + 3) {
            background-color: rgba(237, 243, 246, 0.5);
          }

          td {
            &:first-child {
              background-color: var(--surface-grey);
              color: var(--brand-blue-five);
            }
          }
        }
      }
    }

    .table-style-opening-times & {
      width: unset;
      padding: 0;
      border: none;
      background-color: var(--white);

      td {
        padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs)
          var(--spacing-s);
        font-size: var(--font-size-body);
        border-bottom: none;
        border-right: none;

        &:first-child {
          padding-right: var(--spacing-sm);
          background-color: var(--white);
          color: var(--brand-blue-five);
          font-weight: 600;
          border-bottom: 1px solid #fff;
          border-left: none;
        }

        &:last-child {
          padding-left: var(--spacing-sm);
        }
      }

      tr {
        padding: var(--spacing-xs) 0;

        &:nth-of-type(2n + 1) {
          background-color: var(--white);
        }

        &:first-child {
          td {
            padding-top: 0;
            border-top: none;
          }
        }

        &:last-child {
          td {
            border-bottom: none;
          }
        }

        td {
          padding: var(--spacing-xs) 0;

          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}

.two-column-list {
  margin: var(--spacing-md) 0;

  .grid {
    padding: 0;

    &[class*="keyline-"] {
      padding-top: var(--spacing-md);
    }

    h5 {
      margin-bottom: var(--spacing-sm);
    }
  }

  ul {
    li {
      display: flex;
      align-items: flex-start;
      margin: var(--spacing-s) 0;

      svg {
        margin-right: var(--spacing-s);
        height: 0.8rem;
        margin-top: 6px;
        flex-shrink: 0;

        &.tick {
          fill: var(--salford-blue);
        }
      }

      p {
        margin: 0;
      }
    }
  }
}

@media (min-width: 1440px) {
  .two-column-list {
    .grid {
      gap: var(--grid-gap);
    }
  }
}

.video {
  iframe,
  video {
    width: 100%;
    border-radius: var(--border-radius);
    height: 100%;
    border: 0;
    display: block;
  }

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

    .landscape & {
      aspect-ratio: 16 / 9;
    }

    .portrait & {
      aspect-ratio: 9 / 16;
      max-width: 375px;
      margin: 0 auto;
    }
  }
}


/* Backgrounds */
.bg-white {
  background-color: var(--white);

  p {
    color: var(--black);
  }

  li::marker {
    color: var(--brand-blue-five);
    font-weight: 600;
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-blue-four);
      color: var(--brand-blue-four);

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-four);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-blue-four);
      background-color: var(--brand-blue-four);
      color: var(--white);

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-four);
      }
    }
  }
}

.bg-black {
  background-color: var(--black);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      svg {
        fill: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--black);

      svg {
        fill: var(--black);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.bg-surface-grey {
  background-color: var(--surface-grey);
  color: var(--brand-blue-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-blue-five);
  }

  li::marker {
    color: var(--brand-blue-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-blue-five);
      color: var(--brand-blue-five);

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-blue-five);
      background-color: var(--brand-blue-five);
      color: var(--surface-grey);

      svg {
        fill: var(--surface-grey);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);

        svg {
          fill: var(--surface-grey);
        }
      }
    }
  }
}

.bg-green-one {
  background-color: var(--brand-green-one);
  color: var(--brand-blue-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-blue-five);
  }

  li::marker {
    color: var(--brand-blue-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-blue-five);
      color: var(--brand-blue-five);

      svg {
        fill: var(--brand-blue-five);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-blue-five);
      background-color: var(--brand-blue-five);
      color: var(--brand-green-one);

      svg {
        fill: var(--brand-green-one);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);

        svg {
          fill: var(--brand-green-one);
        }
      }
    }
  }
}

.bg-green-two {
  background-color: var(--brand-green-two);
  color: var(--brand-blue-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-blue-five);
  }

  li::marker {
    color: var(--brand-blue-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-blue-five);
      color: var(--brand-blue-five);

      svg {
        fill: var(--brand-blue-five);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-blue-five);
      background-color: var(--brand-blue-five);
      color: var(--brand-green-two);

      svg {
        fill: var(--brand-green-two);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);

        svg {
          fill: var(--brand-green-two);
        }
      }
    }
  }
}

.bg-green-three {
  background-color: var(--brand-green-three);
  color: var(--brand-blue-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-blue-five);
  }

  li::marker {
    color: var(--brand-blue-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-blue-five);
      color: var(--brand-blue-five);

      svg {
        fill: var(--brand-blue-five);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-blue-five);
      background-color: var(--brand-blue-five);
      color: var(--brand-green-three);

      svg {
        fill: var(--brand-green-three);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);

        svg {
          fill: var(--brand-green-three);
        }
      }
    }
  }
}

.bg-green-four {
  background-color: var(--brand-green-four);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      svg {
        fill: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--brand-green-four);

      svg {
        fill: var(--brand-green-four);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.bg-green-five {
  background-color: var(--brand-green-five);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      svg {
        fill: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--brand-green-five);

      svg {
        fill: var(--brand-green-five);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.bg-blue-one {
  background-color: var(--brand-blue-one);
  color: var(--brand-green-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-green-five);
  }

  li::marker {
    color: var(--brand-green-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-green-five);
      color: var(--brand-green-five);

      svg {
        fill: var(--brand-green-five);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-green-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-green-five);
      background-color: var(--brand-green-five);
      color: var(--brand-blue-one);

      svg {
        fill: var(--brand-blue-one);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-green-five);

        svg {
          fill: var(--brand-blue-one);
        }
      }
    }
  }
}

.bg-blue-two {
  background-color: var(--brand-blue-two);
  color: var(--brand-green-five);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    color: var(--brand-green-five);
  }

  li::marker {
    color: var(--brand-green-five);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--brand-green-five);
      color: var(--brand-green-five);

      svg {
        fill: var(--brand-green-five);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-green-five);
      }
    }

    &.button--tertiary {
      border-color: var(--brand-green-five);
      background-color: var(--brand-green-five);
      color: var(--brand-blue-two);

      svg {
        fill: var(--brand-blue-two);
      }

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-green-five);

        svg {
          fill: var(--brand-blue-two);
        }
      }
    }
  }
}

.bg-blue-three {
  background-color: var(--brand-blue-three);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--brand-blue-three);

      svg {
        fill: var(--brand-blue-three);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.bg-blue-four {
  background-color: var(--brand-blue-four);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      svg {
        fill: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--brand-blue-four);

      svg {
        fill: var(--brand-blue-four);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.bg-blue-five {
  background-color: var(--brand-blue-five);
  color: var(--white);

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

  li::marker {
    color: var(--white);
  }

  button,
  .button {
    &.button--secondary {
      border-color: var(--white);
      color: var(--white);

      svg {
        fill: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);
      }
    }

    &.button--tertiary {
      border-color: var(--white);
      background-color: var(--white);
      color: var(--brand-blue-five);

      svg {
        fill: var(--brand-blue-five);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.25);
        color: var(--white);

        svg {
          fill: var(--white);
        }
      }
    }
  }
}

.sr-only {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important;
}