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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

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 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}

:root {  
  /* Color */
  --black: #0a0203;
  --grey-100: #f8f9fa;
  --grey-200: #e9ecef;
  --grey-300: #dee2e6;
  --grey-400: #ced4da;
  --grey-500: #adb5bd;
  --grey-600: #6c757d;
  --grey-700: #495057;
  --grey-800: #343a40;
  --grey-900: #212529;
  --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;
  --warning-light: #FFDC99;
  --danger: #f23a3c;
  --danger-light: #F99FA0;

  /* 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;
  --primary-text-color: var(--brand-blue-five);

  --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);
}


.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;
  }
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
  border: 0.125em solid var(--brand-blue-five);
  border-right-color: transparent;
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.grid {
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  margin: 0 auto;
  width: 100%;
  gap: var(--grid-gap);

  &.gap-0 {
    gap: 0;
  }

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

.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-7 {
    grid-column: span 7;
  }

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

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

  .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;
  scroll-margin-top: 148px;

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

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

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

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

h2,
.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;
  scroll-margin-top: 148px;

  &: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;
  scroll-margin-top: 148px;

  &: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;
  scroll-margin-top: 148px;

  &.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;
  scroll-margin-top: 148px;

  &.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;
  scroll-margin-top: 148px;

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

p {
  max-width: 80ch;
  margin-bottom: 1rem;
  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);
  }
}

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

  &.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(--brand-blue-five);
  }
}

.bold {
  font-weight: bold;
}

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

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

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

sup {
  display: inline-block;
}


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

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

    @media (min-width: 1440px) {
      margin: var(--responsive-spacing-lg)
        calc(var(--responsive-spacing) + 1.5rem);
    }
  }

  .layout-one-column & {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }

  .layout-two-column &,
  .layout-three-column & {
    margin: 0;
    padding: 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: 1px solid var(--white);
    }

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

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

  .accordion-header {
    margin-bottom: 0;
  }

  .accordion-button {
    all: unset;
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 1rem;
    outline: none;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    transition: background-color 0.3s linear;
    cursor: pointer;
    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: 1px solid var(--white);
    }

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

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

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

    &:hover,
    &:focus {
      box-shadow: none;
      background-color: transparent;
      color: var(--brand-blue-five);
      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;
    }

    svg {
      position: static;
      flex-shrink: 0;
      margin-left: 1rem;
      transition: transform 0.3s ease-in-out;

      path {
        fill: var(--brand-green-four);

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

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

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

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

  .accordion-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0 var(--spacing-s);
    transition: max-height 0.3s ease,
      padding 0.3s ease;

    p,
    ul,
    ol {
      margin: 0 0 var(--spacing-sm) 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,
    .col-lg-5,
    .col-lg-7 {
      grid-column: span 12;
    }
  }
}

@media (min-width: 1440px) {
  .accordion {
    .layout-one-column & {
      padding: 0;

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

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

: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-green-two);
  --btn-primary-border: 1px solid var(--brand-green-two);
  --btn-primary-hover-bg-color: var(--brand-green-one);
  --btn-primary-hover-border: 1px solid var(--white);
  --btn-primary-hover-text-color: var(--black);
  --btn-primary-text-color: var(--brand-blue-five);

  /* Secondary variant */
  --btn-secondary-bg-color: transparent;
  --btn-secondary-border: 1px solid var(--brand-blue-five);
  --btn-secondary-hover-bg-color: rgba(255, 255, 255, 0.25);
  --btn-secondary-hover-border: 1px solid var(--brand-blue-five);
  --btn-secondary-hover-text-color: var(--brand-blue-five);
  --btn-secondary-text-color: var(--brand-blue-five);

  /* Tertiary variant */
  --btn-tertiary-bg-color: var(--brand-blue-five);
  --btn-tertiary-border: 1px solid var(--brand-blue-five);
  --btn-tertiary-hover-bg-color: var(--white);
  --btn-tertiary-hover-border: 1px solid var(--brand-blue-five);
  --btn-tertiary-hover-text-color: var(--brand-blue-five);
  --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-align: center;
  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;
    }
  }

  &: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;
    }
  }
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--surface-grey);
  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 a {
      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;

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

  .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;
    }
  }
}

.card.has-link {
  position: relative;

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

      img {
        transform: scale(1.05);
      }

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

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

@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 {
  max-width: var(--max-container-width);
  margin: 0 auto;
  margin-top: var(--responsive-spacing);
  margin-bottom: var(--spacing-md);

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

  @media(min-width: 1800px) {
    padding: 0 calc(var(--responsive-spacing-lg) * 2 );
  }

  .grid {
    grid-gap: var(--responsive-spacing-lg);
  }

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

  .top-articles {
    padding-bottom: var(--responsive-spacing-lg);
  }

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

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

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

    .content {
      .information {
        h2 a,
        h3 a {
          background-size: 0 1px;
        }
      }
    }

    img {
      transform: scale(1.05);
    }
  }

  .content {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: column;

    .img-wrapper {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      width: 100%;
      height: 100%;
      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 {
      padding: var(--spacing-s) 0;
      color: var(--black);

      h2,
      h3 {
        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);

        a {
          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;

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

      .title-full {
        display: none;
      }

      footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: auto;
        padding: var(--spacing-xs) 0;
        background-color: transparent;

        p {
          display: flex;
          align-items: center;
          margin-right: var(--spacing-s);
          margin-bottom: 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-green-four);
            }

            rect {
              fill: var(--brand-green-four);
            }

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

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

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

      .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 {
        padding: var(--spacing-s) var(--spacing-s) 0;

        h2,
        h3 {
          margin: 0;
          color: var(--white);
          font-size: 1.25rem;
          line-height: 1.3;
        }

        a {
          color: var(--white);
        }

        .title-full {
          display: block;
        }

        .title-truncated {
          display: none;
        }

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

        footer {
          margin-top: 1rem;
          background-color: transparent;

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

          svg {
            path {
              stroke: var(--white);
            }

            rect {
              fill: var(--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;
      padding: 0 0 0 var(--spacing-s);

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

      p {
        display: none;
      }

      footer {
        p {
          display: flex;
          margin-top: var(--spacing-xs);
          margin-right: var(--spacing-xs);
        }
      }
    }
  }
}

@media (min-width: 560px) {
  .news-item {
    .content {
      .information {
        footer {
          p {
            margin-right: var(--spacing-s);
            font-size: 1rem;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .content-item-list {
    .articles,
    .top-articles {
      padding: var(--spacing-s);
    }

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

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

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

      .information {
        flex: 1;

        .title-full {
          display: inline-block;
          margin: var(--spacing-xs) 0;
          font-size: 1.75rem;
        }

        .title-truncated {
          display: none;
        }
      }

      .featured & {
        margin-bottom: 0;

        .information {
          h2,
          h3 {
            max-width: unset;
            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;
          padding: 0;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .content-item-list {
    .grid {
      grid-gap: var(--responsive-spacing-lg);
    }

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

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

  .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 {
        margin-bottom: 0;
      }

      .information {
        padding-top: 0;

        .title-full {
          font-size: var(--font-size-h4);
        }

        footer {
          padding-bottom: var(--spacing-xs);

          p {
            margin-right: var(--spacing-s);
            font-size: 1rem;

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

      .featured & {
        margin: 0;

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

        .information {
          padding: var(--responsive-spacing);

          p {
            margin-top: var(--spacing-xs);
            padding-right: var(--spacing-md);
            line-height: 1.4;
          }

          footer {
            margin-top: var(--spacing-s);
            padding-bottom: 0;

            p {
              margin: 0 var(--spacing-sm) 0 0;
              padding-right: 0;
            }
          }
        }
      }

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

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

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

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

        .information {
          padding: 0;
        }
      }
    }
  }
}

@media (min-width: 1800px) {
  .content-item-list {
    .container {
      padding: 0;
    }
  }
}

footer {
  padding: var(--responsive-spacing-lg) var(--spacing-s);
  background-color: var(--brand-blue-five);

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

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

    ul {
      li {
        margin-right: var(--spacing-sm);
        margin-bottom: 0;

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

        a,
        .manage-cookies {
          display: inline-flex;
          align-items: center;
          min-height: 44px;
          background: none;
          color: var(--white);
          font-weight: 400;
          line-height: 1.5;

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

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

        ul {
          flex-direction: column;
          margin-bottom: var(--spacing-lg);
        }
      }
    }
  }

  .social-links {
    display: grid;
    align-self: flex-start;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1.75rem;
    grid-row-gap: 1rem;
    max-width: 28rem;
    margin-bottom: 2rem;

    .nbs {
      grid-area: 1 / 1 / 3 / 5;
      width: 100%;
      margin-left: -4px;
      padding-right: var(--spacing-xs);
      line-height: 1;

      &:before {
        background-color: transparent;
      }

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

    ul {
      display: flex;
      align-items: flex-start;
      grid-area: 3 / 1 / 5 / 4;
      margin: 0;
      margin-left: calc((22px - 0.75rem) * -1);
      padding: 0;
      list-style: none;

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

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;

          &:before {
            display: none;
          }

          span {
            line-height: 1;
          }

          img {
            width: 1.5rem;
            height: 1.5rem;
          }
        }
      }
    }
  }

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

    .fscs {
      max-width: 5rem;

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

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

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

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

      ul {
        display: flex;
      }
    }

    .social-links {
      .nbs {
        img {
          max-width: unset;
        }
      }

      ul {
        li {
          &:hover,
          &:focus {
            img {
              transform: scale(1.5);
            }
          }

          a {
            img {
              transition: var(--transition-all);
            }
          }
        }
      }
    }

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

      .fscs {
        min-width: 5rem;
        max-width: unset;
      }
    }
  }
}

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

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

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

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

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);
  }

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

  select {
    width: 100% !important;
    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% !important;
    max-width: calc(var(--max-container-width) / 2);
  }

  .form-textbox-wrapper {
    display: flex;
    flex-direction: row;
    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"] {
        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% !important;
    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;
    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;
      }
    }
  }
}

@media (min-width: 768px) {
  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;
  }
}

.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: 0.5rem 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%;
  }
}

*[id] {
  scroll-margin-top: 148px;
}

.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,
.layout-two-column,
.layout-three-column,
.layout-list {
  .container {
    > ul {
      margin: 0;
      padding: 0;
      list-style: none;

      > li {
        list-style: none;
      }
    }
  }
}

.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 {
    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 {
      width: 100%;
      margin-bottom: var(--spacing-sm);
    }

    h2,
    h3 {
      &: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 {
      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 {
          margin: var(--spacing-sm) 0;
          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);
  }

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

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

  &: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) {
  body {
    &.active {
      overflow-y: scroll;
    }
  }

  .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(--surface-grey);
      transition: all ease 0.3s;
      content: "";
    }

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

  .layout-one-column,
  .layout-two-column,
  .layout-three-column {
    padding: var(--responsive-spacing) 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);

      .container {
        padding: 0;
      }

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

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

        &: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) var(--responsive-spacing);

    &.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: var(--responsive-spacing-lg) calc(var(--responsive-spacing-lg) + var(--responsive-spacing));

    .container {
      padding: 0 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));
    }
  }
}

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;

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

  &.scrolled {
    border-bottom: 2px solid var(--surface-grey);
  }

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

  .home-branch-header-section {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -37px;
    display: none;
    align-items: center;
    margin: 0 var(--spacing-s);
    padding: var(--spacing-xs) var(--spacing-s);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background-color: var(--brand-blue-four);
    color: var(--white);
    font-size: var(--font-size-body-small);

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

    svg {
      flex-shrink: 0;
      height: 1.25rem;
      margin-right: var(--spacing-xxs);
    }

    a {
      width: unset;
      margin-left: var(--spacing-xxs);
      padding: 0;
      color: var(--white);
      font-size: var(--font-size-body-small);
      font-weight: 600;

      &:before {
        display: none;
      }
    }
  }

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

  .logo {
    z-index: 101;
    display: flex;
    align-items: center;
    width: 6rem;
    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-s);

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

    &.desktop {
      display: none;
    }
  }

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

  nav {
    position: fixed;
    top: 70px;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    min-height: max-content;
    padding: calc(var(--spacing-md) + var(--spacing-sm)) var(--spacing-s)
      var(--spacing-md);
    background-color: var(--white);
    font-size: var(--font-size-body-small);
    transform: translateY(-100%);
    transition: all 0.3s ease;
    border-bottom: 4px solid var(--brand-blue-four);

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

      .home-branch-header-section {
        position: static;
        bottom: var(--spacing-sm);
        display: flex;
        align-self: flex-start;
        width: max-content;
        margin: 0;
        padding: var(--btn-padding-mobile);
        border: 1px solid var(--brand-blue-four);
        border-radius: var(--border-radius);

        &.hidden {
          display: none;
        }

        svg {
          height: 1.5rem;
        }
      }
    }

    &:has(.home-branch-header-section.hidden) {
      border-bottom: none;
    }

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

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

      .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"] {
        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 {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s ease;

      &:has(.active) {
        grid-template-rows: 1fr;
      }
    }

    .level-one {
      padding: 0 var(--spacing-s);
      border: var(--brand-border-surface);
      border-radius: var(--border-radius);

      ul {
        display: flex;
        opacity: 0;
        overflow: hidden;
        flex-direction: column;
        margin: 0;
        padding: 0 var(--spacing-s);
        border: var(--brand-border-surface);
        border-radius: var(--border-radius);
        background-color: var(--white);
        transition: all 0.3s ease;

        &.active {
          opacity: 1;
          transition-delay: 0.2s;
        }

        &.level-two {
          padding: 0;
          border: none;

          .level-two-item {
            padding: 0;

            &:last-child {
              margin-bottom: var(--spacing-s);
            }

            .submenu-button,
            a {
              padding: var(--spacing-s) 0 var(--spacing-s) 0.75rem;
              background-image: none;

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

        &.level-three {
          padding: 0;
          padding: 0 0 0 0.75rem;
          border: none;

          li {
            a {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              padding: var(--spacing-s) 0.75rem;
              color: var(--brand-blue-five);
              font-size: 1rem;
              font-weight: 600;
              line-height: 1.375rem;

              &:after {
                display: none;
              }

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

            p {
              margin-top: var(--spacing-xxs);
              margin-bottom: 0;
              color: rgba(80, 90, 95, 1);
              font-size: var(--font-size-body-small);
              line-height: 1.375rem;
            }

            &.promo {
              display: block;
              padding: 0;

              .img-wrapper {
                overflow: hidden;
                aspect-ratio: 1.9 / 1;
                grid-column: span 4;
                width: 100%;
                margin-bottom: var(--spacing-xs);
                border-radius: var(--border-radius) var(--border-radius) 0 0;
              }

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

              h4 {
                margin-top: var(--spacing-xxs);
                font-size: 1rem;
                font-weight: 600;
                line-height: 1.375rem;
              }

              a {
                padding: var(--spacing-sm) 0;

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

              .button {
                display: none;
              }

              .square {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 207px;
                border-radius: var(--border-radius);
              }
            }
          }
        }
      }

      li {
        padding: 0 0 0 var(--spacing-xs);
        border-bottom: var(--brand-border-surface);

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

        h3 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0;
          font-size: 1rem;
          font-weight: 600;
          line-height: 1.625rem;

          &:hover {
            cursor: pointer;
          }

          &:after {
            display: block;
            width: 0.75rem;
            height: 0.75rem;
            background-image: url(/images/arrowLeftBlackSmall.svg);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            content: "";
          }
        }

        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--brand-blue-five);
          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;
    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: 300;
  top: 0;
  opacity: 0;
  width: 100%;
  margin: 0;
  padding: var(--spacing-s);
  outline: 2px solid var(--black);
  outline-offset: -1px;
  background-color: var(--warning);
  transform: translateY(-100%);
  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: var(--spacing-xxs) var(--responsive-spacing);
    }

    .header-inner {
      padding: 0;
    }

    .logo {
      width: 8rem;
      margin-top: -0.5rem;
      margin-left: 0;
    }

    .nav-container {
      position: relative;
      justify-content: flex-start;
    }

    .menu-buttons {
      flex-direction: row;
      align-items: flex-end;
      margin-left: auto;
      order: 2;

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

      &.mobile {
        display: none;
      }

      &.desktop {
        display: flex;
      }
    }

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

      &.menuToggle {
        display: none;
      }

      &.log-in {
        &:hover,
        &:focus {
          background-color: var(--brand-green-one);
        }
      }
    }

    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 {
        position: relative;
        z-index: 101;
        width: max-content;
        padding: 0;
        border: none;
        background-color: transparent;
        font-size: var(--font-size-body-small);
        transition: color 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;
      }

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

        button {
          padding-right: var(--spacing-xs);

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

        ul {
          overflow: unset;

          &.level-two {
            padding: var(--spacing-xxs);

            .level-two-item {
              &:last-child {
                margin: var(--spacing-xxs);
                border-bottom: var(--brand-border-surface);
              }

              .submenu-button,
              a {
                display: flex;
                justify-content: space-between;
                padding: var(--spacing-xs) 0 var(--spacing-xs) 0.75rem;
              }
            }
          }
        }

        li {
          padding: var(--spacing-sm) var(--spacing-xs);
          border-bottom: none;

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

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

          h3 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--spacing-s);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.625rem;

            &:hover {
              cursor: pointer;
            }

            &:after {
              display: none;
            }
          }

          a {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 var(--spacing-s);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.625rem;

            &:after {
              display: none;
            }

            &:hover,
            &:focus {
              text-decoration: underline;
              text-decoration-color: var(--surface-grey);
              text-decoration-thickness: 0.188rem;
              text-underline-offset: var(--spacing-xs);
              cursor: pointer;
            }
          }
        }

        .sub-nav-container {
          position: absolute;
          top: 5.1rem;
          left: 50%;
          visibility: hidden;
          opacity: 0;
          width: 1200px;
          border-radius: var(--border-radius);
          transform: translateY(0) translateX(-50%);
          pointer-events: none;

          &:has(.active) {
            top: 4.8rem;
            visibility: visible;
            opacity: 1;
            transform: translateY(0) translateX(-50%);
            pointer-events: all;
          }
        }

        .level-two {
          position: relative;
          top: 0.5rem;
          left: 0;
          display: flex;
          overflow-y: unset;
          width: 300px;
          height: unset;
          margin: var(--spacing-xxs) 0 0;
          padding: var(--spacing-xs) 0 0;
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.125);
          border-radius: var(--border-radius);
          background-color: var(--white);

          .level-two-item {
            margin: var(--spacing-xxs);
            padding: 0;
            border: 1px solid var(--surface-grey);
            border-radius: var(--border-radius);
            background-color: var(--white);
            transition: all 0.3s ease;

            &:last-child {
              margin: 0.5rem;
              border-bottom: 0;
            }

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

            svg {
              bottom: 0;
              transform: rotate(-90deg);
            }

            .sub-nav-container {
              top: 0;
              left: 100%;
              width: 900px;
              transform: unset;
            }

            &:has(.active) {
              border-color: var(--surface-grey);
              background-color: var(--surface-grey);

              svg {
                fill: var(--brand-blue-five);

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

                &.close {
                  transform: rotate(90deg) translateY(-4px);
                }
              }

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

            a {
              .chevron-wrapper {
                margin: 0 var(--spacing-xs) 0 0;
              }

              svg {
                transform: rotate(0);
              }

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

            button {
              width: 100%;
              padding: var(--spacing-s) 0.75rem;
              transition: all 0.3s ease;

              .chevron-wrapper {
                margin-right: var(--spacing-xs);
              }

              &:hover,
              &:focus {
                border-color: var(--surface-grey);
                background-color: var(--surface-grey);
                color: var(--brand-blue-five);

                svg {
                  fill: var(--brand-blue-five);

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

            h3 {
              text-wrap: initial;
            }
          }

          .level-three {
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
            display: grid;
            visibility: hidden;
            opacity: 0;
            overflow-y: unset;
            gap: var(--spacing-xs);
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            width: 888px;
            height: unset;
            margin: 0;
            margin-left: 0;
            padding: var(--spacing-xs);
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.125);
            border-radius: var(--border-radius);
            background-color: var(--white);

            &.active {
              z-index: 1;
              left: var(--spacing-xs);
              visibility: visible;
              opacity: 1;
              transition-delay: 0s;
            }

            button {
              display: flex;
              align-items: center;
              height: 100%;
              text-align: left;
            }

            li {
              max-width: none;
              padding: 0;
              border: 1px solid var(--surface-grey);
              border-radius: var(--border-radius);
              background-color: var(--white);
              transition: all 0.3s ease;

              &:hover {
                border-color: var(--surface-grey);
                background-color: var(--surface-grey);
                text-decoration: underline;
                text-decoration-color: var(--brand-blue-four);
                text-decoration-thickness: 1px;
                text-underline-offset: 3px;
                cursor: pointer;

                a {
                  text-decoration: none;

                  p {
                    text-decoration: none;
                  }
                }
              }

              &.promo {
                grid-column: 3 / 4;
                grid-row: 1 / 8;

                img {
                  transition: all ease 0.3s;

                  &:hover {
                    transform: scale(1.05);
                  }
                }

                &:hover {
                  box-shadow: none;
                  background-color: var(--white);
                  cursor: unset;

                  img {
                    transform: scale(1.05);
                  }

                  p {
                    text-decoration: none;
                  }

                  a {
                    text-decoration: none;
                  }
                }

                a {
                  padding: 0;
                }

                h4 {
                  margin: var(--spacing-xs) var(--spacing-s) var(--spacing-xxs);
                  font-size: var(--font-size-h4);
                  line-height: 1.719rem;
                }

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

                .button {
                  display: block;
                  width: max-content;
                  height: auto;
                  margin: var(--spacing-xs) var(--spacing-s) var(--spacing-s);
                  padding: var(--spacing-xxs) 0.75rem;
                  border: 1px solid var(--brand-green-two);
                  font-size: var(--font-size-body-small);

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

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

                .square {
                  transition: all 0.3s ease-in-out;

                  &:hover {
                    box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.4);
                    transform: scale(1.015);
                  }
                }
              }

              a {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                height: 100%;
                padding: var(--spacing-xs) var(--spacing-s);
                border: none;
                color: var(--brand-blue-five);
                font-size: var(--font-size-body-small);
                font-weight: 600;
                line-height: 1.375rem;

                &:after {
                  display: none;
                }
              }

              p {
                margin-top: var(--spacing-xs);
                margin-bottom: 0;
                color: rgba(80, 90, 95, 1);
                font-size: var(--font-size-body-small);
                line-height: 1.406rem;
              }
            }
          }

          .level-three {
            li {
              &:hover,
              &:focus {
                text-decoration: none;
              }
            }
          }
        }
      }
    }

    .hamburger {
      display: none;
    }

    nav {
      .mobile-menu-button {
        display: none;
      }
    }

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

    .home-branch-header-section {
      &.mobile {
        display: none;
      }
    }
  }

  .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%;
      padding-left: var(--spacing-xs);
      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;
    }

    .home-branch-header-section {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0 var(--spacing-xs) 0 0;
      font-size: var(--font-size-body-small);
      font-size: var(--font-size-body-small);

      svg {
        flex-shrink: 0;
        height: 1.25rem;
      }

      a {
        margin-left: var(--spacing-xxs);
        color: var(--brand-blue-five);
        font-weight: 600;
        text-wrap: nowrap;

        &:before {
          bottom: -1px;
          height: 1px;
        }
      }

      &.desktop {
        display: flex;
        align-items: center;
        width: max-content;
        margin-left: var(--spacing-xs);
        padding: var(--spacing-xxs) 0 var(--spacing-xxs) 0.75rem;
        font-size: var(--font-size-body-small);
        border-bottom: var(--brand-border-surface);
      }

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

@media (min-width: 1300px) {
  header {
    nav {
      button,
      .submenu-button,
      a {
        font-size: 1rem;
      }
    }
  }
}

@media (min-width: 1440px) {
  header {
    .logo {
      width: 13rem;
      margin-top: -3.5rem;
      margin-left: 0;
      transition: all ease-in 0.3s;

      .scrolled & {
        width: 8rem;
        margin-top: 0;
      }
    }

    .menu-buttons {
      margin-right: 0;
      order: 2;

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

    nav {
      .level-one {
        .sub-nav-container {
          width: 1400px;
        }

        li {
          h3,
          a {
            font-size: 1;
            line-height: 1;
          }
        }

        .level-two {
          width: 350px;

          .level-three {
            width: 1042px;

            li {
              a {
                font-size: 1rem;
                line-height: 1.5;
                text-decoration: none;
              }

              p {
                font-size: var(--font-size-body-small);
                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: var(--spacing-xxs) var(--responsive-spacing-lg);
    }
  }
}

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

#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: 1.5rem !important;
}
#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 {
  color: var(--black) !important;
  font-size: var(--font-size-body) !important;
  max-width: 80ch !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 .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-five) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table {
  border: 1px solid rgba(0, 10, 70, 0.05) !important;
  margin-bottom: var(--responsive-spacing) !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table td {
  border-bottom: 1px solid rgba(0, 10, 70, 0.05) !important;
  border-right: 1px solid rgba(0, 10, 70, 0.05) !important;
}

#ot-sdk-cookie-policy a {
  text-decoration: none !important;
  font-weight: 600 !important;
  color: var(--brand-blue-five) !important;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !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;
  }
}

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 &,
        .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-lg);
    }

    ol {
      margin-left: 0;
    }
  }
}

.select-box {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin: var(--spacing-s) 0;

  select {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 260px;
    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;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }

    &:focus {
      outline: 2px solid var(--brand-blue-four);
      outline-offset: 2px;
    }

    @media (prefers-contrast: more) {
      border: 2px solid var(--brand-blue-four);

      &:focus {
        outline: 3px solid var(--brand-blue-four);
        outline-offset: 2px;
      }
    }
  }

  /* Fallback for browsers without customizable select support */
  @supports not (appearance: base-select) {
    select {
      padding-right: 2.5rem;
      background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
      background-position: right 0.5rem center;
      background-size: 1.5em 1.5em;
      background-repeat: no-repeat;
      appearance: none;
    }
  }

  /* Modern customizable select support */
  @supports (appearance: base-select) {
    select {
      appearance: base-select;
    }

    ::picker(select) {
      border: 1px solid var(--brand-blue-four);
      border-radius: 6px;
      background-color: var(--white);
      appearance: base-select;
    }

    /* Picker arrow icon styling */
    select::picker-icon {
      width: 1.5em;
      height: 1.5em;
      background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
      color: var(--black);
      transition: rotate 0.3s ease-out;
      content: "";
    }

    /* Rotate arrow when picker is open */
    select:open::picker-icon {
      rotate: 180deg;
    }

    /* Style for option elements in picker */
    option {
      display: flex;
      justify-content: flex-start;
      margin: var(--spacing-xs);
      padding: var(--spacing-xs);
      border: 0.125rem solid #fff;
      border-radius: var(--border-radius);
      background-color: #fff;
      color: var(--black);
      transition: background-color 0.2s ease;
    }

    /* Highlight on hover/focus */
    option:hover,
    option:focus {
      &:not(:disabled) {
        border: 0.125rem solid var(--brand-blue-four);
        outline: none;
        background-color: #e6f7ff;
      }
    }

    /* Style the checked/selected option */
    option:checked {
      background-color: #bae7ff;
    }

    /* Style the disabled option */
    option:disabled {
      background-color: var(--surface-grey);
      cursor: default;
      pointer-events: none;
    }

    /* Checkmark styling for selected option */
    option::checkmark {
      display: none;
    }

    /* Picker animation on open/close */
    ::picker(select) {
      opacity: 0;
      transition: all 0.3s ease allow-discrete;
    }

    :open::picker(select) {
      opacity: 1;
    }

    /* Starting state for animation */
    @starting-style {
      :open::picker(select) {
        opacity: 0;
      }
    }

    /* Anchor positioning for picker relative to button */
    ::picker(select) {
      top: calc(anchor(bottom) + var(--spacing-xxs));
      left: anchor(0%);
      width: anchor(--width);
    }
  }

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


.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-lg) 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: 0.5rem;
        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;
  }

  img {
    position: relative;
    width: 100%;
    height: 100%;
    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 7;
      }
    }

    img {
      min-height: 35vh;
    }

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

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

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

  .container {
    &.base-banner {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
    }
  }
}

@media (min-width: 1440px) {
  .container {
    &.base-banner {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
    }
  }
}

@media (min-width: 1800px) {
  .container {
    &.base-banner {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing-lg));
    }
  }
}
.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;
  }
}
.branch-component {
  padding: 0 var(--spacing-s);

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

  .container {
    padding: 0;

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

  .details-wrapper {
    .content {
      p {
        margin-bottom: 0;
      }
    }

    .image-wrapper {
      overflow: hidden;
      border-radius: var(--border-radius);
      height: 100%;

      img {
        object-fit: cover;
        height: 100%;
      }
    }

    .branch-image-container {
      order: 1;

      @media (min-width: 1200px) {
        order: unset;
      }
    }

    .address-container {
      order: 2;
      border: var(--brand-border-surface);
      padding: var(--responsive-spacing);
      border-radius: var(--border-radius);

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

      @media (min-width: 1200px) {
        order: unset;
      }
    }

    .opening-times-container {
      order: 3;
      border: var(--brand-border-surface);
      padding: var(--responsive-spacing);
      border-radius: var(--border-radius);

      @media (min-width: 1200px) {
        order: unset;
      }
    }

    .set-branch-section {
      order: 5;

      @media (min-width: 1200px) {
        order: unset;
      }
    }
  }

  .component-table {
    .container {
      margin-top: var(--spacing-s);
      padding: 0;
    }

    table {
      td {
        padding: 0 0 0.5rem;
        font-size: var(--font-size-body);
        border-bottom: none;
        border-right: none;

        &:first-child {
          border-left: none;
          background-color: var(--white);
          font-weight: 600;
          border-bottom: 1px solid #fff;
        }
      }

      tr {
        &:nth-of-type(2n + 1) {
          background-color: var(--white);
        }

        &:first-child {
          td {
            border-top: none;
          }
        }

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

  .map-container {
    width: 100%;
    height: 40vh;
    min-height: 375px;
    margin: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    order: 4;

    @media (min-width: 1200px) {
      grid-column: span 7;
      order: unset;
    }

    iframe {
      margin: 0 !important;
    }
  }

  .set-branch-section {
    border: 1px solid var(--surface-grey);
    padding: var(--responsive-spacing);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    flex-direction: column;

    @media (min-width: 1200px) {
      grid-column: span 5;
    }
  }

  .hidden {
    display: none;
  }
}

.branch-list {
  padding-top: var(--spacing-s);

  .find-branch {
    display: flex;
    flex-direction: column;
  }

  select {
    width: 100%;
    max-width: 300px;
    min-height: 2.375rem;
    padding: var(--spacing-xs);
    border: 0.125rem solid black;
    border-radius: var(--border-radius);
    background-image: url("/images/arrow-down.svg");
    background-position: right 0.5rem center;
    background-size: 0.813rem;
    background-repeat: no-repeat;
    background-color: #fff;
    font: inherit;
    appearance: none;
  }

  button {
    width: 100%;
    max-width: 300px;
  }

  button:disabled {
    opacity: 0.65;
    pointer-events: none;
  }
}

.branch-finder {
  overflow: hidden;
  margin: var(--responsive-spacing) var(--spacing-s);
  border: 1px solid var(--surface-grey);
  border-radius: var(--btn-border-radius);

  @media (min-width: 1440px) {
    margin: var(--responsive-spacing-lg) calc(var(--responsive-spacing) + 1.5rem);
  }

  button {
    border: 1px solid var(--brand-blue-four);
    border: none;
    background: var(--brand-blue-four);
    color: #fff;
    transition: all ease 0.3s;

    &:hover {
      border-color: var(--brand-blue-four);
      background-color: var(--brand-blue-four);
    }

    &.outline {
      border: 1px solid var(--brand-blue-four);
      background: transparent;
      color: var(--brand-blue-four);

      &:hover {
        border-color: var(--brand-blue-four);
        background-color: var(--brand-blue-four);
        color: #fff;
      }
    }
  }

  .gm-style {
    font-family: var(--primary-font-family);
    font-size: var(--font-size-body);

    .gm-style-iw {
      font-size: var(--font-size-body);
      font-weight: initial;
    }
  }

  #map {
    height: 100%;
    min-height: 20rem;
    order: 2;

    @media (min-width: 768px) {
      min-height: 40rem;
      order: 3;
    }
  }

  .hidden {
    display: none;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;

    @media (min-width: 768px) {
      grid-template-columns: 20rem 1fr;
      grid-template-rows: auto 1fr;
    }

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

    #searchBox {
      grid-column: 1 / 3;
      grid-row: 1 / 2;

      @media (min-width: 768px) {
        grid-column: 1 / 2;
      }
    }

    #searchWrapper {
      grid-column: 1 / 3;
      grid-row: 3 / 4;

      @media (min-width: 768px) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
      }
    }

    #map {
      grid-column: 1 / 3;
      grid-row: 2 / 3;

      @media (min-width: 768px) {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
      }
    }
  }

  #searchBox {
    outline: none;
    border-bottom: 1px solid var(--surface-grey);
    order: 1;

    h2 {
      max-width: none;
      margin: 0;
      padding: 0.75rem var(--spacing-s);
      background-color: var(--brand-blue-four);
      color: #fff;
      font-size: var(--font-size-body);
      font-weight: bold;
    }

    .panel-header {
      display: flex;
      flex-wrap: wrap;
      padding: var(--spacing-s);

      .ac-search {
        flex: 1 0 0;
        width: 100%;
        max-width: 100%;

        .pac-target-input,
        gmp-place-autocomplete {
          display: block;
          width: 100%;
          border: 1px solid var(--surface-grey);
          border-radius: 0;
          background-color: white;
          color: var(--primary-text-color);
          font-size: var(--font-size-body-small);
          font-weight: 400;
          line-height: 1.5;

          &:focus {
            border-color: #4d90fe;
          }
        }
      }

      .btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        height: 50px;
        margin: 0 0 0 -1px;
        border-radius: 0;

        @media (max-width: 399.98px), (min-width:768px) and (max-width:1199.98px) {
          flex: 1 0 auto;
          margin: -1px 0 0 0;
        }

        &.btn-light {
          padding: var(--spacing-s);
          border: 1px solid var(--surface-grey);
          background-color: #fff;
          color: var(--brand-blue-four);

          svg {
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            fill: var(--btn-primary-text-color);

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

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

  #searchWrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--box-shadow);
    box-shadow: none;
    order: 3;

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

    &:after {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 100%;
      max-width: 250px;
      color: var(--grey-500);
      font-size: 1rem;
      text-align: center;
      transform: translate(-50%, -50%);
      content: "Find your nearest branch by entering your address above";
    }

    #panel {
      position: relative;
      z-index: 2;
      overflow-y: auto;
      width: 100%;
      max-height: none;
      margin: 0;
      padding: 0;
      background: white;
      transition: all 0.2s ease-in-out;
      list-style: none;

      @media (min-width: 768px) {
        max-height: 0;
        overflow-y: scroll;
      }

      &.open {
        min-height: 30rem;
        max-height: 50vh;
        padding: var(--spacing-s);

        @media (min-width: 768px) {
          max-height: calc(100vh - (55px + 80px) - 135.8px);
        }
      }

      .branch-panel {
        position: relative;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: 1px solid var(--surface-grey);
        border-radius: var(--btn-border-radius);
        background-color: white;
        color: var(--primary-text-color);
        font-size: var(--font-size-body-small);
        font-weight: 400;
        text-align: left;
        transition: all ease 0.3s;
        cursor: pointer;

        @media (min-width: 768px) {
          flex-direction: column;
        }

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

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

          .panel-inner {
            .place {
              > div {
                .branch-name {
                  background-size: 0 2px;
                }
              }
            }
          }
        }

        &:hover {
          .store-img-wrapper {
            .store-img {
              transform: scale(1.05);
            }
          }
        }

        &.active {
          background-color: var(--brand-blue-four);

          .panel-inner {
            .place {
              .branch-name {
                color: white;
              }

              div {
                svg {
                  fill: var(--brand-blue-four);

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

              .distance {
                span {
                  color: var(--brand-blue-four);
                }
              }
            }

            .times-wrapper,
            .phone-wrapper {
              color: white;

              a {
                color: white;
              }

              div {
                svg {
                  fill: white;
                }
              }
            }
          }
        }

        img {
          @media (max-width: 767.98px) {
            flex: 0 0 0%;
          }

          @media (max-width: 479.98px) {
            flex: 0 0 auto;
            width: 100%;
          }
        }

        .store-img-wrapper {
          overflow: hidden;
          width: 100%;
          height: 10rem;
          background-color: var(--brand-blue-four);

          .store-img {
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            transition: all ease 0.5s;
          }
        }

        .panel-inner {
          display: flex;
          flex-grow: 1;
          flex-direction: column;
          width: 100%;
          padding: 0.75rem 0.75rem var(--spacing-s) var(--spacing-s);
          transition: all 0.1s ease-in-out;

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

          .place {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            justify-content: space-between;
            margin: 0 0 var(--spacing-xxs);
            font-size: var(--font-size-body-small);

            div {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              margin-right: 0;

              span {
                margin-bottom: var(--spacing-xs);
              }

              .branch-name {
                margin-right: var(--spacing-xs);
                margin-bottom: var(--spacing-xs);
                background-image: linear-gradient( currentColor, currentColor );
                background-position: right bottom;
                background-size: 100% 2px;
                background-repeat: no-repeat;
                color: var(--brand-blue-four);
                font-size: var(--font-size-body-large);
                font-weight: bold;
                line-height: 1.2;
                transition: background-size 0.4s ease;
              }

              .status {
                padding: 0.325rem var(--spacing-xs);
                border: 1px solid var(--danger);
                border-radius: 10rem;
                background-color: var(--danger-light);
                line-height: 1;

                &.open-now {
                  border-color: var(--brand-green-two);
                  background-color: var(--brand-green-one);
                }

                &.closing-soon {
                  border-color: var(--warning);
                  background-color: var(--warning-light);
                }

                span {
                  margin: 0;
                  background: none;
                  color: var(--brand-blue-five);
                  font-size: var(--font-size-body-small);
                  font-weight: 600;
                  line-height: 1;
                }
              }
            }

            .distance {
              span {
                white-space: nowrap;
              }
            }
          }

          .times-wrapper,
          .phone-wrapper {
            display: flex;
            align-items: center;
            margin: 0 0 var(--spacing-xxs);
            font-size: var(--font-size-body-small);
            line-height: 1.5;

            div {
              display: inline;
              margin-right: var(--spacing-xs);
              line-height: 1;
            }

            table {
              border-spacing: 0;

              tr {
                td {
                  &:nth-child(1) {
                    padding-right: var(--spacing-xxs);
                    font-weight: 600;

                    &:after {
                      content: ":";
                    }
                  }

                  &:nth-child(2):not(:last-child) {
                    padding-right: var(--spacing-xxs);

                    &:after {
                      padding-left: var(--spacing-xxs);
                      content: "-";
                    }
                  }
                }
              }
            }
          }

          svg {
            min-width: 1.25rem;
            margin-left: 0;

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

          a {
            &.icon {
              display: flex;
              align-items: center;
              padding: var(--spacing-xs);
              border: 1px solid var(--surface-grey);
              border-radius: var(--btn-border-radius);
              background-image: none;
              background-color: var(--surface-grey);
              color: var(--btn-primary-text-color);
              font-size: var(--font-size-body-small);
              font-weight: 400;
              line-height: 1;
              text-decoration: none;
              transition: all ease 0.3s;

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

              div {
                display: flex;
                align-items: center;
                justify-content: center;
              }

              svg {
                width: 1.25rem;
                height: 1.25rem;
                margin: -0.125rem 0;
                transition: all ease 0.3s;
                fill: var(--btn-primary-text-color);

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

              &:hover,
              &:focus {
                box-shadow: var(--box-shadow);
                border-color: var(--brand-green-two);
                background-color: var(--btn-primary-hover-bg-color);
                color: var(--btn-primary-hover-text-color);

                svg {
                  fill: var(--btn-primary-hover-text-color);

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

          .btn-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;

            .button {
              font-size: var(--font-size-body-small);
            }

            .button,
            .icon {
              margin: 1rem 0 0;
            }
          }
        }
      }
    }
  }

  .tel {
    padding-right: 18px;
    padding-bottom: 36px;
    padding-left: 18px;
    font-size: 1em;
    font-weight: 500;
    margin-block-end: 0;
  }

  .gm-style-mtc-bbw {
    display: none;
  }

  .gm-style {
    .gm-style-iw-d {
      overflow: hidden !important;
      margin-top: -48px;

      h2 {
        color: var(--brand-blue-four);
        font-size: 1.5rem;
      }

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

      i {
        color: var(--brand-blue-four);
      }
    }

    .gm-style-iw-c {
      max-width: unset !important;
      padding: 0;
      border-radius: 0;

      .branch-info {
        min-width: 300px;
        padding: 1.5rem;

        .button-wrapper {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}

@media (max-width: 399.98px), (min-width:768px) and (max-width:1199.98px) {
  .branch-finder {
    .grid {
      @media (min-width: 1200px) {
        grid-template-columns: 20rem 1fr;
      }

      #map {
        @media (min-width: 768px) {
          height: auto;
        }
      }

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

        #panel {
          &.open {
            padding: 0;

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

          .branch-panel {
            border-left: none;
            border-right: none;
            border-top: none;

            &:not(:last-child) {
              margin-bottom: 0;
            }

            &.active {
              .panel-inner {
                .btn-wrapper {
                  .button {
                    color: white;

                    &:hover,
                    &:focus {
                      color: white;
                    }
                  }
                }
              }
            }

            .store-img-wrapper {
              display: none;
            }

            .panel-inner {
              .place {
                div {
                  align-items: flex-start;

                  span {
                    &.status {
                      width: 0.75rem;
                      height: 0.75rem;
                      padding: 0;

                      &.open-now {
                        background-color: var(--brand-green-two);
                      }

                      span {
                        display: none;
                      }
                    }
                  }
                }
              }

              a {
                &.icon {
                  padding: var(--spacing-xxs);
                }
              }

              .btn-wrapper {
                .button,
                .icon {
                  margin: 0;
                }

                .button {
                  align-self: flex-end;
                  margin: 0;
                  padding: 0;
                  border: none;
                  border-radius: 0;
                  background-image: linear-gradient(currentColor, currentColor);
                  background-position: right bottom;
                  background-size: 100% 2px;
                  background-repeat: no-repeat;
                  background: transparent;
                  color: var(--btn-primary-text-color);
                  font-size: var(--font-size-body-small);
                  font-weight: 700;
                  line-height: 1.5;
                  transition: background-size 0.4s ease;

                  &:hover,
                  &:focus {
                    box-shadow: none;
                    background-size: 0 2px;
                    color: var(--btn-primary-text-color);
                  }
                }

                .icon {
                  span {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.box-links {
  .box-link {
    margin: var(--responsive-spacing) 0;
  }

  a {
    display: flex;
    
    svg {
      height: 1rem;
      width: 1rem;
      margin-left: var(--spacing-s);
    }
  }
}
.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;

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

    .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;
    height: 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;
    }

    &: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-five);
    }

    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);
      }

      .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 {
    padding: var(--responsive-spacing);
    border-radius: var(--border-radius);

    p {
      max-width: unset;
    }

    img {
      width: 110px;
      margin-left: auto;
    }

    &.no-image {
      padding: var(--responsive-spacing) var(--responsive-spacing-lg);
      border: 1px solid var(--brand-blue-five);
      text-align: center;

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

    .col-12 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

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

@media (min-width: 768px) {
  .disclaimer {
    margin: var(--responsive-spacing-lg) var(--responsive-spacing);

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

      .col-md-2 {
        display: flex;
        align-self: flex-start;
        justify-content: center;
      }
    }
  }
}

@media (min-width: 1440px) {
  .disclaimer {
    margin: var(--responsive-spacing-lg) calc(var(--responsive-spacing) + 1.5rem);
  }
}

.disclaimer + .disclaimer {
  margin-top: 0;
}

.documents-group {
  padding: 0 var(--spacing-sm);
  margin: var(--responsive-spacing-lg) 0;

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

  ul {
    @media (min-width: 1200px) {
      column-count: 2;
    }

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

      a {
        display: flex;
        flex-direction: column;

        &:before {
          display: none;
        }
      }

      p {
        position: relative;
        align-self: flex-start;

        &:first-child {
          font-weight: 600;
          margin-bottom: var(--spacing-xs);

          &:before {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--brand-blue-five);
            transform: scaleX(1);
            transform-origin: left;
            transition: transform 0.3s ease-in-out;
          }

          &:hover,
          &:focus {
            &:before {
              transform-origin: right;
              transform: scaleX(0);
            }
          }
        }

        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: 0.5rem;
          fill: var(--brand-green-four);

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

        &.cross {
          height: 0.75rem;
          margin-top: 0.5rem;
          fill: var(--brand-blue-four);

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

      span {
        margin-right: var(--spacing-s);
        margin-left: 0.25rem;
        color: var(--brand-green-four);
      }

      p {
        margin: 0;
      }
    }
  }
}

.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 {
    width: 100%;

    &: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: 1px solid var(--brand-blue-five);
          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: 0.25rem;
        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);

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

          .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);

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

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

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

        &.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: 1rem;
  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: 1rem;
  color: var(--white);
  font-size: 1rem;
  text-align: center;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0 0.5rem 0.25rem;
  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: 0.5rem 1rem;
  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);
  }
}

.news-article {
  margin-bottom: var(--spacing-sm);

  .article-body {
    > section {
      margin: var(--responsive-spacing-lg) 0;
      padding-right: 0;
      padding-left: 0;

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

    .banner-content {
      .image-right & {
        padding: 0 0 var(--responsive-spacing);
      }

      .image-left & {
        padding: var(--responsive-spacing) 0 0;
      }
    }
  }

  .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: var(--responsive-spacing);

    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);

      svg {
        margin-right: var(--spacing-xs);

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

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

    &+figure,
    &+img{
      width: 100%;
      margin-bottom: var(--responsive-spacing);
    }

    &+figure img {
      width: 100%;
    }
  }

  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 {
    padding-left: var(--spacing-sm);

    li {
      margin: 1rem 0;
      padding-left: 0.5rem;
      line-height: 1.6;
      list-style: initial;
    }
  }

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

  .grid {
    .col-12 {
      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 {
    .container {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing));
    }

    .article-body {
      .banner-content {
        .image-right & {
          padding: var(--responsive-spacing) var(--responsive-spacing) var(--responsive-spacing) 0;
        }

        .image-left & {
          padding: var(--responsive-spacing) 0 var(--responsive-spacing) var(--responsive-spacing);
        }
      }
    }

    .grid {
      padding: 0;

      .col-12 {
        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 {
    .container {
      padding: 0 calc(var(--responsive-spacing-lg) + var(--responsive-spacing-lg));
    }

    img {
      max-height: 850px;
    }
  }
}

.news-highlights {
  padding: var(--spacing-s);

  .title-wrapper {
    margin-bottom: var(--responsive-spacing);
  }

  .grid {
    padding: 1rem 0;
    gap: calc(var(--grid-gap) + var(--spacing-xs));
  }

  .button {
    margin-top: var(--responsive-spacing);
    margin-left: auto;
  }
}

[class*="layout-"] + .news-highlights {
  margin-top: var(--responsive-spacing-lg);
}

main div div > .news-highlights:last-child {
  margin-bottom: var(--responsive-spacing-lg);
}

@media (min-width: 1440px) {
  .news-highlights {
    padding: 0 calc(var(--responsive-spacing) + var(--spacing-sm));
    margin-bottom: var(--responsive-spacing);

    .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: 0.5rem 0;
      width: 160px;
      min-width: 160px;
      height: 100px;
      min-height: 100px;

      @media (min-width: 768px) {
        padding: 1rem 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: 0.5rem 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: 0.25rem;
      }

      .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);
      }
    }
  }
}
.savings-list {
  padding: 0 var(--responsive-spacing);

  .sort-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;

    .select-box {
      margin-top: 0;
    }
  }

  .accordion {
    margin: 0;
    padding: 0;

    h2 {
      margin-left: var(--spacing-xxs);
    }

    .accordion-container {
      margin-top: var(--spacing-s);
      border-bottom: 0;

      button {
        margin-left: var(--spacing-xxs);
      }
    }

    .accordion-button {
      display: flex;
      justify-content: space-between;
      padding: var(--spacing-xs) 0;
      border: none;
      font-size: var(--font-size-body);

      img {
        transition: all 0.3s ease;

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

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

    .accordion-item {
      margin-bottom: 0;

      .checkbox-group {
        .checkbox {
          margin: var(--spacing-s) var(--spacing-xxs);

          &:first-child {
            margin-top: var(--spacing-xxs);
          }
        }
      }

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

  .product {
    overflow: hidden;
    margin-bottom: var(--spacing-s);
    padding: 0;
    border: 1px solid var(--brand-blue-four);
    border-radius: var(--border-radius);

    .product-information {
      padding: var(--spacing-sm) var(--spacing-s);
      background-color: var(--brand-blue-four);

      h4 {
        color: #fff;
        line-height: 1.2;
      }

      .button {
        padding: var(--spacing-xs) var(--spacing-s);
        font-size: 1rem;
      }
    }

    .rate-wrapper {
      display: flex;
      grid-gap: 0.5rem;
    }

    .rate-container {
      width: 50%;
      color: #fff;

      .rate {
        margin-bottom: 0;
        padding-bottom: 0.5rem;
        color: var(--white);
        font-size: var(--font-size-h3);
        font-weight: 600;
        line-height: 1;
      }

      .rate-info {
        margin: var(--spacing-xxs) 0;
        color: white;
        font-size: 0.875rem;
        line-height: 1.5;
      }

      a.rate-info {
        display: inline-block;
        background: none;
        font-weight: 400;

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

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

        &:before {
          display: none;
        }
      }

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

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

  .summary {
    .key-features {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .feature-list {
        margin: 0;
        padding: var(--spacing-s);

        li {
          svg {
            margin-top: var(--spacing-xs);
            fill: var(--brand-green-five);
          }
        }
      }

      .cta {
        display: flex;
        justify-content: flex-end;
        grid-column: span 12;
        padding-bottom: var(--spacing-xs);
      }

      .badge {
        display: block;
        margin: 0;
        padding: var(--spacing-xs) var(--spacing-s);
        background-color: var(--surface-grey);
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
      }
    }
  }

  .hidden {
    display: none;
  }
}

.alert-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-s);
  margin-top: var(--spacing-md);
  padding: var(--spacing-s);
  border: 1px solid var(--brand-blue-four);
  border-radius: var(--border-radius);

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

  svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke: var(--brand-blue-four);
  }
}

@media (min-width: 480px) {
  .savings-list {
    .summary {
      .key-features {
        .badge {
          text-align: right;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .savings-list {
    .sort-container {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }

    .accordion {
      .container {
        position: sticky;
        top: 6rem;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        max-height: calc(100vh - 6rem);
        margin-top: -0.25rem;
        margin-right: -0.25rem;
        margin-left: -0.25rem;
        padding: 0;
      }

      .accordion-container {
        overflow-y: auto;
        flex: 1;
        padding-top: var(--spacing-xxs);
        padding-right: var(--spacing-s);
      }
    }

    .product {
      .summary {
        .key-features {
          .feature-list {
            column-gap: 2rem;
            padding: var(--spacing-sm);
            column-count: 2;
            list-style-position: inside;

            li {
              display: flex;
              margin-bottom: var(--spacing-sm);
              font-size: 1.125rem;
              break-inside: avoid;

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

          .rate-container {
            &:last-child {
              margin-right: unset;
              margin-bottom: 0;
            }
          }
        }

        .cta {
          padding-right: var(--spacing-s);
          padding-bottom: 0;
        }
      }
    }
  }
}

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

    .product {
      grid-gap: var(--spacing-md);
    }
  }
}

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

    .container {
      padding: 0;
    }
  }
}

.product-page {
  padding-top: var(--responsive-spacing);

  .product-information {
    padding: var(--spacing-sm) var(--spacing-s) 0;

    .disclaimer {
      margin: 0 0 var(--spacing-md);
    }

    .mortgage-disclaimer {
      margin: var(--spacing-md) 0;

      .content {
        border: 1px solid var(--brand-blue-four);

        p {
          margin: 0;
        }
      }
    }

    .key-features,
    .mortgage-overview {
      margin-top: var(--responsive-spacing);

      &.grid {
        margin-bottom: var(--responsive-spacing);
      }
    }

    .two-column-list {
      padding: var(--spacing-md) 0 0;
      border-top: 0.5rem solid var(--surface-grey);

      h5 {
        text-wrap: unset;
      }
    }

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

    section {
      .container {
        padding: 0;
      }
    }

    .accordion {
      padding: 0 0 var(--spacing-md) 0;
    }

    .summary table {
      width: 100%;
      padding: var(--spacing-s);
      border-collapse: collapse;

      tr {
        display: flex;
        flex-wrap: wrap;
        padding: var(--spacing-s) 0;
        border-bottom: 1px solid var(--surface-grey);

        &:first-child {
          border-top: 2px solid var(--surface-grey);
        }
      }

      td {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: left;
        word-break: break-word;
        overflow-wrap: anywhere;

        &.fee-row {
          flex-direction: row;

          p {
            margin: 0;
          }
        }

        p {
          margin-top: 0;

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

      th {
        display: flex;
        width: 100%;
        margin-bottom: var(--spacing-xs);
        font-size: var(--font-size-body);
        text-align: left;
      }
    }
  }

  .charity {
    padding: var(--spacing-md) 0;
    border-bottom: 2px solid var(--surface-grey);
  }

  .terms {
    padding: var(--spacing-md) 0;

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

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

    a {
      color: var(--brand-blue-five);
      line-height: 1.5;

      svg {
        margin-left: var(--spacing-xxs);

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

  .apply {
    position: sticky;
    top: 8rem;
    align-self: flex-start;
    margin: 0 var(--spacing-s) var(--spacing-md);

    .button {
      justify-content: center;
      width: 100%;
      margin: 0 0 var(--spacing-sm) 0;
      color: var(--brand-blue-five);
    }

    .content-top {
      padding: var(--spacing-sm) var(--spacing-sm) 0;
      border: 1px solid var(--brand-blue-four);
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      background-color: var(--brand-blue-four);
      color: var(--white);
    }

    .content-bottom {
      padding: var(--spacing-sm) var(--spacing-sm);
      border: 1px solid var(--brand-blue-four);
      border-radius: 0 0 var(--border-radius) var(--border-radius);

      p {
        margin-bottom: 0;
      }
    }

    .terms-and-conditions {
      display: inline-block;
      width: unset;
      margin: var(--spacing-sm) var(--spacing-sm) 0;
      color: var(--brand-blue-five);
      font-weight: 600;

      svg {
        top: 1.15rem;
        right: -1.5rem;
        transform: rotate(90deg);
      }
    }

    &.mortgage {
      position: static;
      top: auto;
      grid-gap: 0;
      margin: 0;

      .button {
        width: unset;
        margin-top: var(--spacing-s);
        margin-bottom: 0;
      }

      > div {
        padding: var(--responsive-spacing) var(--spacing-sm);

        &:nth-child(1) {
          border-radius: var(--border-radius) 0 0 var(--border-radius);
          background-color: var(--brand-blue-four);

          h3,
          p {
            color: var(--white);
          }
        }

        &:nth-child(2) {
          border-radius: 0 var(--border-radius) var(--border-radius) 0;
          background-color: var(--surface-grey);

          p {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .mortgage-calculator {
    margin: -1px 0 0;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }

  &.mortgage {
    .product-information {
      .key-features {
        margin-bottom: var(--responsive-spacing);

        .feature-list {
          &.grid {
            grid-column-gap: 2rem;
            grid-row-gap: 1rem;
          }

          li {
            margin-bottom: 0;
          }
        }
      }

      .scroll-to {
        margin: var(--responsive-spacing) 0;

        .button {
          margin: 0;

          svg {
            margin-left: 1rem;

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

      .summary {
        margin-top: 0;
      }
    }
  }
}

.key-features,
.mortgage-overview {
  &.grid {
    padding: 0;
  }

  .rate-container {
    margin-right: var(--spacing-md);
  }

  .rate-info {
    display: inline-block;
    margin-top: var(--spacing-xs);
    font-weight: 400;
  }

  .detail-title {
    margin-top: 0;
  }

  .rate-info,
  .detail-title {
    margin-bottom: var(--spacing-xs);
    color: rgba(80, 90, 95, 1);
    font-size: var(--font-size-body-small);
  }

  .rate,
  .detail {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--brand-blue-five);
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1;
  }

  .feature-list {
    padding: 0;

    &.grid {
      grid-column-gap: 2rem;
      grid-row-gap: 1rem;
    }

    li {
      display: flex;
      margin-bottom: var(--spacing-s);
      font-size: 1.125rem;

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

      svg {
        flex-shrink: 0;
        height: 0.8rem;
        margin-top: 6px;
        margin-right: var(--spacing-s);
        fill: var(--brand-green-four);

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

      p {
        margin: 0;
      }
    }
  }
}

.key-features {
  .rate {
    font-size: var(--font-size-h2);
  }
}

.mortgage-overview {
  padding: var(--spacing-sm);
  border: 1px solid var(--surface-grey);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);

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

  &.grid {
    padding: var(--spacing-sm);
  }

  .row {
    align-items: flex-end;
    margin-top: calc(-0.5 * var(--grid-gap));
    margin-right: calc(-0.25 * var(--grid-gap));
    margin-left: calc(-0.25 * var(--grid-gap));

    > * {
      margin-top: calc(var(--grid-gap) * 0.5);
      padding-right: calc(var(--grid-gap) * 0.25);
      padding-left: calc(var(--grid-gap) * 0.25);
    }
  }
}

@media (min-width: 768px) {
  .product-page {
    .product-information {
      .disclaimer {
        .content {
          grid-gap: var(--grid-gap);

          img {
            min-width: 6rem;
          }
        }
      }

      .summary table {
        tr {
          flex-wrap: unset;
        }

        td {
          width: 75%;
        }

        th {
          width: 25%;
          padding-right: var(--spacing-sm);
        }
      }
    }

    .charity,
    .terms {
      padding: var(--spacing-md) 0;
    }

    .apply {
      .terms-and-conditions {
        display: inline-block;
      }
    }
  }

  .key-features {
    .rate-wrapper {
      display: unset;
    }

    .rate-container {
      margin-right: 0;
      margin-bottom: var(--spacing-sm);
    }
  }
}

@media (min-width: 1200px) {
  .product-page {
    .grid {
      grid-gap: var(--grid-gap);
    }

    &.mortgage {
      .product-information {
        padding: 0 var(--responsive-spacing);
      }
    }

    .apply {
      margin: 0 0 var(--spacing-md);
    }
  }

  .key-features {
    .feature-list {
      padding: 0;
    }

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

@media (min-width: 1440px) {
  .product-page {
    &:not(.mortgage) {
      .product-information {
        padding: 0;
      }
    }
  }
}

@media (min-width: 1800px) {
  .product-page {
    &.mortgage {
      .product-information {
        padding: 0 9rem;
      }
    }
  }
}

: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);
    }
  }
}
:root {
  --border-style: 2px solid var(--surface-grey);
}

table {
  tbody {
    vertical-align: top;
  }
}

.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);
      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);
              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;
    }
  }
}

.savings-calculator {
  .question {
    margin-right: var(--spacing-md);
    margin-top: var(--spacing-s);
  }

  .years-months {
    display: flex;
    border: 0px;
  }

  .error {
    display: block;
    color: red;
  }

  .results {
    border: 1px solid;
    padding: var(--spacing-sm);
  }

  .bold {
    font-weight: bold;
  }
}

.mortgages-list {
  margin-bottom: var(--responsive-spacing-lg);
  padding: 0 1rem;

  h2 {
    margin-top: var(--responsive-spacing-lg);
  }

  .sort-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;

    .select-box {
      margin-top: 0;
    }
  }

  .mortgages-filter {
    margin: var(--responsive-spacing) 0;

    h2 {
      margin-top: var(--responsive-spacing-sm);
      font-size: var(--font-size-h3);
      font-weight: 600;
    }

    .accordion-item {
      margin-bottom: 0;

      .checkbox-group {
        .checkbox {
          margin: var(--spacing-s) var(--spacing-xxs);

          &:first-child {
            margin-top: var(--spacing-xxs);
          }
        }
      }
    }
  }

  .mortgages-filter {
    margin: 0;
    padding: 0;

    h2 {
      margin-left: 0.25rem;
    }

    .container {
      padding: 0;
    }

    .accordion-container {
      margin: var(--spacing-xs) 0;
      padding-top: var(--spacing-xxs);
      border-bottom: 0;

      button {
        margin-left: 0.25rem;
      }
    }

    .accordion-button {
      display: flex;
      justify-content: space-between;
      padding: var(--spacing-xs) 0;
      border: none;
      font-size: var(--font-size-body);

      img {
        transition: all 0.3s ease;

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

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

  .products-list-container {
    position: relative;

    .mortgage-header-wrapper {
      position: sticky;
      z-index: 99;
      top: 82px;
      display: none;
      gap: 0;
      border-radius: var(--border-radius);
      background-color: var(--brand-blue-four);
      transition: all 0.3s ease;

      &.is-stuck {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .mortgage-header {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 0 var(--spacing-s);
        padding: var(--spacing-xs) var(--spacing-sm);

        > p {
          flex: 1 1 20%;
          margin: 0;
          font-size: 1rem;
          line-height: 1.3;
          text-wrap: balance;
        }

        span {
          background-image: linear-gradient(currentColor, currentColor);
          background-position: right bottom;
          background-size: 100% 1px;
          background-repeat: no-repeat;
          color: white;
          transition: background-size 0.4s ease;
          cursor: pointer;

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

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

  .product {
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 0;
    border: 1px solid var(--brand-blue-five);
    border-radius: var(--border-radius);

    .name {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: var(--spacing-sm);

      h3 {
        margin-bottom: 0;
      }

      .monthly-repayment {
        display: inline-flex;
        flex-direction: column;
        margin-top: var(--spacing-s);
        margin-bottom: 0;
        border-radius: var(--border-radius);
        font-size: var(--font-size-body);
        font-weight: 600;

        span {
          font-size: var(--font-size-h3);
        }
      }

      .cta {
        a {
          color: var(--brand-blue-five);

          &.button-desktop {
            display: none;
          }
        }
      }
    }

    .summary {
      .key-features {
        display: flex;
        flex-direction: column;
        height: 100%;

        .rate-wrapper {
          padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-s);

          .rate-container {
            width: 100%;
            margin-bottom: 0;

            p {
              display: grid;
              gap: 0;
              grid-template-columns: repeat(2, 1fr);
              grid-auto-rows: minmax(auto, max-content);
              padding-bottom: var(--spacing-s);
              line-height: 1;
              border-bottom: 2px solid var(--brand-green-two);

              span {
                display: block;
                color: var(--brand-blue-five);
                line-height: 1.3;

                &.header {
                  order: 1;
                }

                &.detail {
                  grid-column-start: 2;
                  grid-row: span 2 / span 2;
                  grid-row-start: 1;
                  font-size: 1.25rem;
                  font-weight: 600;
                  text-align: right;
                  order: 3;
                }

                &.description {
                  grid-column-start: 1;
                  grid-row-start: 2;
                  margin-top: var(--spacing-xs);
                  font-size: var(--font-size-body-small);
                  order: 2;
                }
              }
            }

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

        .button-mobile-wrapper {
          padding: 0 var(--spacing-sm) var(--spacing-s);
        }

        .badge {
          display: block;
          margin: auto 0 0;
          padding: var(--spacing-xs) var(--spacing-s);
          border-radius: var(--border-radius);
          background-color: var(--surface-grey);
          font-size: 1rem;
          text-align: center;

          span {
            font-weight: 500;
          }
        }
      }
    }

    .button-mobile {
      justify-content: center;
      width: 100%;
      margin: 0;
    }
  }

  .hidden {
    display: none;
  }
}

@media (min-width: 480px) {
  .mortgages-list {
    .product {
      .summary {
        .key-features {
          .badge {
            text-align: right;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .mortgages-list {
    .sort-container {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }

    .mortgages-filter {
      .container {
        position: sticky;
        top: 6rem;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        height: calc(100vh - 6rem);
        margin-top: -0.25rem;
        margin-right: -0.25rem;
        margin-left: -0.25rem;
        padding: 0;
      }

      .accordion-container {
        overflow-y: auto;
        flex: 1;
        margin-top: 0;
        padding-right: var(--spacing-s);
      }

      .accordion-item {
        padding: 0 0.25rem;
      }
    }

    .product {
      grid-gap: 0;

      .name {
        .calculator-result {
          margin-top: 0;
          margin-bottom: 0;
        }

        .monthly-repayment {
          span {
            font-size: var(--font-size-h4);
          }
        }

        .cta {
          padding-right: var(--spacing-s);
          padding-bottom: 0;

          a {
            &.button-desktop {
              display: inline-block;
              margin-bottom: 0.25rem;
            }
          }
        }
      }

      .summary {
        .key-features {
          .rate-wrapper {
            padding: var(--spacing-s) var(--spacing-sm) 0;

            .rate-container {
              display: flex;
              flex-wrap: nowrap;

              p {
                display: block;
                flex: 1 1 50%;
                min-width: 50%;
                padding-bottom: 0;
                line-height: 1.6;
                border-bottom: unset;

                &:last-child {
                  margin-bottom: 1rem;
                }

                span {
                  &.header {
                    margin-bottom: var(--spacing-xs);
                    padding-right: var(--spacing-s);
                    font-size: var(--font-size-body-small);
                  }

                  &.detail {
                    font-size: var(--font-size-h4);
                    text-align: left;
                  }
                }
              }

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

          .button-mobile-wrapper {
            padding: 0;
          }
        }
      }

      .button-mobile {
        display: none;
      }
    }
  }
}

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

    .products-list-container {
      .mortgage-header-wrapper {
        display: grid;
      }
    }

    .product {
      .name {
        h3 {
          font-size: var(--font-size-h4);
        }
      }

      .summary {
        .key-features {
          .rate-wrapper {
            .rate-container {
              gap: 0 var(--spacing-s);

              p {
                flex: 1 1 20%;
                min-width: 0;

                span {
                  &.header {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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

    .container {
      padding: 0;
    }
  }
}

.branch-selector {
  padding-top: var(--spacing-s);

  .set-branch {
    display: flex;
    flex-direction: column;
  }

  .hidden {
    display: none;
  }

  .home-branch-link {
    color: var(--brand-blue-five);
    font-weight: 600;
  }

  select {
    width: 100%;
    min-height: 2.375rem;
    padding: var(--spacing-xs);
    border: 0.125rem solid black;
    border-radius: var(--border-radius);
    background-image: url("/images/arrow-down.svg");
    background-position: right 0.5rem center;
    background-size: 0.813rem;
    background-repeat: no-repeat;
    background-color: #fff;
    font: inherit;
    appearance: none;

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

  button {
    justify-content: center;
    width: 100%;

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

  button:disabled {
    opacity: 0.65;
    pointer-events: none;
  }

  p {
    height: 41px;
    margin-bottom: 0;
  }
}

.branch-list {
  padding-top: var(--spacing-s);

  .find-branch {
    display: flex;
    flex-direction: column;
  }

  select {
    width: 100%;
    max-width: 300px;
    min-height: 2.375rem;
    padding: var(--spacing-xs);
    border: 0.125rem solid black;
    border-radius: var(--border-radius);
    background-image: url("/images/arrow-down.svg");
    background-position: right 0.5rem center;
    background-size: 0.813rem;
    background-repeat: no-repeat;
    background-color: #fff;
    font: inherit;
    appearance: none;
  }

  button {
    width: 100%;
    max-width: 300px;
  }

  button:disabled {
    opacity: 0.65;
    pointer-events: none;
  }
}

.branch-finder {
  overflow: hidden;
  margin: var(--responsive-spacing) var(--spacing-s);
  border: 1px solid var(--surface-grey);
  border-radius: var(--btn-border-radius);

  @media (min-width: 1440px) {
    margin: var(--responsive-spacing-lg) calc(var(--responsive-spacing) + 1.5rem);
  }

  button {
    border: 1px solid var(--brand-blue-four);
    border: none;
    background: var(--brand-blue-four);
    color: #fff;
    transition: all ease 0.3s;

    &:hover {
      border-color: var(--brand-blue-four);
      background-color: var(--brand-blue-four);
    }

    &.outline {
      border: 1px solid var(--brand-blue-four);
      background: transparent;
      color: var(--brand-blue-four);

      &:hover {
        border-color: var(--brand-blue-four);
        background-color: var(--brand-blue-four);
        color: #fff;
      }
    }
  }

  .gm-style {
    font-family: var(--primary-font-family);
    font-size: var(--font-size-body);

    .gm-style-iw {
      font-size: var(--font-size-body);
      font-weight: initial;
    }
  }

  #map {
    height: 100%;
    min-height: 20rem;
    order: 2;

    @media (min-width: 768px) {
      min-height: 40rem;
      order: 3;
    }
  }

  .hidden {
    display: none;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;

    @media (min-width: 768px) {
      grid-template-columns: 20rem 1fr;
      grid-template-rows: auto 1fr;
    }

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

    #searchBox {
      grid-column: 1 / 3;
      grid-row: 1 / 2;

      @media (min-width: 768px) {
        grid-column: 1 / 2;
      }
    }

    #searchWrapper {
      grid-column: 1 / 3;
      grid-row: 3 / 4;

      @media (min-width: 768px) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
      }
    }

    #map {
      grid-column: 1 / 3;
      grid-row: 2 / 3;

      @media (min-width: 768px) {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
      }
    }
  }

  #searchBox {
    outline: none;
    border-bottom: 1px solid var(--surface-grey);
    order: 1;

    h2 {
      max-width: none;
      margin: 0;
      padding: 0.75rem var(--spacing-s);
      background-color: var(--brand-blue-four);
      color: #fff;
      font-size: var(--font-size-body);
      font-weight: bold;
    }

    .panel-header {
      display: flex;
      flex-wrap: wrap;
      padding: var(--spacing-s);

      .ac-search {
        flex: 1 0 0;
        width: 100%;
        max-width: 100%;

        .pac-target-input,
        gmp-place-autocomplete {
          display: block;
          width: 100%;
          border: 1px solid var(--surface-grey);
          border-radius: 0;
          background-color: white;
          color: var(--primary-text-color);
          font-size: var(--font-size-body-small);
          font-weight: 400;
          line-height: 1.5;

          &:focus {
            border-color: #4d90fe;
          }
        }
      }

      .btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        height: 50px;
        margin: 0 0 0 -1px;
        border-radius: 0;

        @media (max-width: 399.98px), (min-width:768px) and (max-width:1199.98px) {
          flex: 1 0 auto;
          margin: -1px 0 0 0;
        }

        &.btn-light {
          padding: var(--spacing-s);
          border: 1px solid var(--surface-grey);
          background-color: #fff;
          color: var(--brand-blue-four);

          svg {
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            fill: var(--btn-primary-text-color);

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

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

  #searchWrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--box-shadow);
    box-shadow: none;
    order: 3;

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

    &:after {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 100%;
      max-width: 250px;
      color: var(--grey-500);
      font-size: 1rem;
      text-align: center;
      transform: translate(-50%, -50%);
      content: "Find your nearest branch by entering your address above";
    }

    #panel {
      position: relative;
      z-index: 2;
      overflow-y: auto;
      width: 100%;
      max-height: none;
      margin: 0;
      padding: 0;
      background: white;
      transition: all 0.2s ease-in-out;
      list-style: none;

      @media (min-width: 768px) {
        max-height: 0;
        overflow-y: scroll;
      }

      &.open {
        min-height: 30rem;
        max-height: 50vh;
        padding: var(--spacing-s);

        @media (min-width: 768px) {
          max-height: calc(100vh - (55px + 80px) - 135.8px);
        }
      }

      .branch-panel {
        position: relative;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: 1px solid var(--surface-grey);
        border-radius: var(--btn-border-radius);
        background-color: white;
        color: var(--primary-text-color);
        font-size: var(--font-size-body-small);
        font-weight: 400;
        text-align: left;
        transition: all ease 0.3s;
        cursor: pointer;

        @media (min-width: 768px) {
          flex-direction: column;
        }

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

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

          .panel-inner {
            .place {
              > div {
                .branch-name {
                  background-size: 0 2px;
                }
              }
            }
          }
        }

        &:hover {
          .store-img-wrapper {
            .store-img {
              transform: scale(1.05);
            }
          }
        }

        &.active {
          background-color: var(--brand-blue-four);

          .panel-inner {
            .place {
              .branch-name {
                color: white;
              }

              div {
                svg {
                  fill: var(--brand-blue-four);

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

              .distance {
                span {
                  color: var(--brand-blue-four);
                }
              }
            }

            .times-wrapper,
            .phone-wrapper {
              color: white;

              a {
                color: white;
              }

              div {
                svg {
                  fill: white;
                }
              }
            }
          }
        }

        img {
          @media (max-width: 767.98px) {
            flex: 0 0 0%;
          }

          @media (max-width: 479.98px) {
            flex: 0 0 auto;
            width: 100%;
          }
        }

        .store-img-wrapper {
          overflow: hidden;
          width: 100%;
          height: 10rem;
          background-color: var(--brand-blue-four);

          .store-img {
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            transition: all ease 0.5s;
          }
        }

        .panel-inner {
          display: flex;
          flex-grow: 1;
          flex-direction: column;
          width: 100%;
          padding: 0.75rem 0.75rem var(--spacing-s) var(--spacing-s);
          transition: all 0.1s ease-in-out;

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

          .place {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            justify-content: space-between;
            margin: 0 0 var(--spacing-xxs);
            font-size: var(--font-size-body-small);

            div {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              margin-right: 0;

              span {
                margin-bottom: var(--spacing-xs);
              }

              .branch-name {
                margin-right: var(--spacing-xs);
                margin-bottom: var(--spacing-xs);
                background-image: linear-gradient( currentColor, currentColor );
                background-position: right bottom;
                background-size: 100% 2px;
                background-repeat: no-repeat;
                color: var(--brand-blue-four);
                font-size: var(--font-size-body-large);
                font-weight: bold;
                line-height: 1.2;
                transition: background-size 0.4s ease;
              }

              .status {
                padding: 0.325rem var(--spacing-xs);
                border: 1px solid var(--danger);
                border-radius: 10rem;
                background-color: var(--danger-light);
                line-height: 1;

                &.open-now {
                  border-color: var(--brand-green-two);
                  background-color: var(--brand-green-one);
                }

                &.closing-soon {
                  border-color: var(--warning);
                  background-color: var(--warning-light);
                }

                span {
                  margin: 0;
                  background: none;
                  color: var(--brand-blue-five);
                  font-size: var(--font-size-body-small);
                  font-weight: 600;
                  line-height: 1;
                }
              }
            }

            .distance {
              span {
                white-space: nowrap;
              }
            }
          }

          .times-wrapper,
          .phone-wrapper {
            display: flex;
            align-items: center;
            margin: 0 0 var(--spacing-xxs);
            font-size: var(--font-size-body-small);
            line-height: 1.5;

            div {
              display: inline;
              margin-right: var(--spacing-xs);
              line-height: 1;
            }

            table {
              border-spacing: 0;

              tr {
                td {
                  &:nth-child(1) {
                    padding-right: var(--spacing-xxs);
                    font-weight: 600;

                    &:after {
                      content: ":";
                    }
                  }

                  &:nth-child(2):not(:last-child) {
                    padding-right: var(--spacing-xxs);

                    &:after {
                      padding-left: var(--spacing-xxs);
                      content: "-";
                    }
                  }
                }
              }
            }
          }

          svg {
            min-width: 1.25rem;
            margin-left: 0;

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

          a {
            &.icon {
              display: flex;
              align-items: center;
              padding: var(--spacing-xs);
              border: 1px solid var(--surface-grey);
              border-radius: var(--btn-border-radius);
              background-image: none;
              background-color: var(--surface-grey);
              color: var(--btn-primary-text-color);
              font-size: var(--font-size-body-small);
              font-weight: 400;
              line-height: 1;
              text-decoration: none;
              transition: all ease 0.3s;

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

              div {
                display: flex;
                align-items: center;
                justify-content: center;
              }

              svg {
                width: 1.25rem;
                height: 1.25rem;
                margin: -0.125rem 0;
                transition: all ease 0.3s;
                fill: var(--btn-primary-text-color);

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

              &:hover,
              &:focus {
                box-shadow: var(--box-shadow);
                border-color: var(--brand-green-two);
                background-color: var(--btn-primary-hover-bg-color);
                color: var(--btn-primary-hover-text-color);

                svg {
                  fill: var(--btn-primary-hover-text-color);

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

          .btn-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;

            .button {
              font-size: var(--font-size-body-small);
            }

            .button,
            .icon {
              margin: 1rem 0 0;
            }
          }
        }
      }
    }
  }

  .tel {
    padding-right: 18px;
    padding-bottom: 36px;
    padding-left: 18px;
    font-size: 1em;
    font-weight: 500;
    margin-block-end: 0;
  }

  .gm-style-mtc-bbw {
    display: none;
  }

  .gm-style {
    .gm-style-iw-d {
      overflow: hidden !important;
      margin-top: -48px;

      h2 {
        color: var(--brand-blue-four);
        font-size: 1.5rem;
      }

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

      i {
        color: var(--brand-blue-four);
      }
    }

    .gm-style-iw-c {
      max-width: unset !important;
      padding: 0;
      border-radius: 0;

      .branch-info {
        min-width: 300px;
        padding: 1.5rem;

        .button-wrapper {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}

@media (max-width: 399.98px), (min-width:768px) and (max-width:1199.98px) {
  .branch-finder {
    .grid {
      @media (min-width: 1200px) {
        grid-template-columns: 20rem 1fr;
      }

      #map {
        @media (min-width: 768px) {
          height: auto;
        }
      }

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

        #panel {
          &.open {
            padding: 0;

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

          .branch-panel {
            border-left: none;
            border-right: none;
            border-top: none;

            &:not(:last-child) {
              margin-bottom: 0;
            }

            &.active {
              .panel-inner {
                .btn-wrapper {
                  .button {
                    color: white;

                    &:hover,
                    &:focus {
                      color: white;
                    }
                  }
                }
              }
            }

            .store-img-wrapper {
              display: none;
            }

            .panel-inner {
              .place {
                div {
                  align-items: flex-start;

                  span {
                    &.status {
                      width: 0.75rem;
                      height: 0.75rem;
                      padding: 0;

                      &.open-now {
                        background-color: var(--brand-green-two);
                      }

                      span {
                        display: none;
                      }
                    }
                  }
                }
              }

              a {
                &.icon {
                  padding: var(--spacing-xxs);
                }
              }

              .btn-wrapper {
                .button,
                .icon {
                  margin: 0;
                }

                .button {
                  align-self: flex-end;
                  margin: 0;
                  padding: 0;
                  border: none;
                  border-radius: 0;
                  background-image: linear-gradient(currentColor, currentColor);
                  background-position: right bottom;
                  background-size: 100% 2px;
                  background-repeat: no-repeat;
                  background: transparent;
                  color: var(--btn-primary-text-color);
                  font-size: var(--font-size-body-small);
                  font-weight: 700;
                  line-height: 1.5;
                  transition: background-size 0.4s ease;

                  &:hover,
                  &:focus {
                    box-shadow: none;
                    background-size: 0 2px;
                    color: var(--btn-primary-text-color);
                  }
                }

                .icon {
                  span {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.financial-advisor-contact {
  display: flex;
  overflow: hidden;
  margin: var(--responsive-spacing-lg) var(--spacing-s);
  border-radius: var(--border-radius);

  .grid {
    grid-gap: 0;
  }

  .image-section {
    img {
      height: 100%;
      object-fit: cover;
    }
  }

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

    &:first-child:not(:last-child) {
      background-color: var(--surface-grey);
    }

    .phone-number {
      display: inline-flex;
      margin-bottom: var(--spacing-s);
    }

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

  .hidden {
    display: none;
  }
}


/* Backgrounds */
.bg-white {
  background-color: var(--white);

  p {
    color: var(--black);
  }

  li::marker {
    color: var(--brand-green-four);
  }

  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(--white);

      &:hover {
        background-color: rgba(250, 250, 250, 0.25);
        color: var(--brand-blue-five);
      }
    }
  }
}

.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);

      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(--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);

      &: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);

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