:root {
  accent-color: var(--color-brand-secondary-500);
  /* Colors */
  --color-white: #fff;
  --color-black: #000;

  --oxford-blue-hue: 252.91;
  --color-brand-primary-100: oklch(97.5% 0.006 var(--oxford-blue-hue));
  --color-brand-primary-200: oklch(89% 0.049 var(--oxford-blue-hue));
  --color-brand-primary-300: oklch(75% 0.1 var(--oxford-blue-hue));
  --color-brand-primary-400: oklch(56% 0.115 var(--oxford-blue-hue));
  --color-brand-primary-500: oklch(38.52% 0.088 var(--oxford-blue-hue));
  --color-brand-primary: var(--color-brand-primary-500);
  --color-brand-primary-600: oklch(32% 0.08 var(--oxford-blue-hue));
  --color-brand-primary-700: oklch(24.5% 0.07 var(--oxford-blue-hue));
  --color-brand-primary-800: oklch(18% 0.05 var(--oxford-blue-hue));
  --color-brand-primary-900: oklch(15% 0.04 var(--oxford-blue-hue));

  --imperial-red-hue: 21.48;
  --color-brand-secondary-100: oklch(98% 0.0095 var(--imperial-red-hue));
  --color-brand-secondary-200: oklch(91% 0.046 var(--imperial-red-hue));
  --color-brand-secondary-300: oklch(78% 0.128 var(--imperial-red-hue));
  --color-brand-secondary-400: oklch(69% 0.199 var(--imperial-red-hue));
  --color-brand-secondary-500: oklch(60.48% 0.234 var(--imperial-red-hue));
  --color-brand-secondary: var(--color-brand-secondary-500);
  --color-brand-secondary-600: oklch(50% 0.2 var(--imperial-red-hue));
  --color-brand-secondary-700: oklch(36% 0.142 var(--imperial-red-hue));
  --color-brand-secondary-800: oklch(24% 0.09 var(--imperial-red-hue));
  --color-brand-secondary-900: oklch(15% 0.06 var(--imperial-red-hue));

  --sapphire-blue-hue: 256.6;
  --sapphire-blue-100: oklch(96% 0.019 var(--sapphire-blue-hue));
  --sapphire-blue-200: oklch(87% 0.064 var(--sapphire-blue-hue));
  --sapphire-blue-300: oklch(72% 0.147 var(--sapphire-blue-hue));
  --sapphire-blue-400: oklch(59% 0.175 var(--sapphire-blue-hue));
  --sapphire-blue-500: oklch(47.36% 0.141 var(--sapphire-blue-hue));
  --sapphire-blue-600: oklch(37% 0.12 var(--sapphire-blue-hue));
  --sapphire-blue-700: oklch(27% 0.094 var(--sapphire-blue-hue));
  --sapphire-blue-800: oklch(19% 0.065 var(--sapphire-blue-hue));
  --sapphire-blue-900: oklch(15% 0.036 var(--sapphire-blue-hue));

  --purple-hue: 321.4;
  --purple-100: oklch(97% 0.02 var(--purple-hue));
  --purple-200: oklch(89% 0.08 var(--purple-hue));
  --purple-300: oklch(72.5% 0.18 var(--purple-hue));
  --purple-400: oklch(60% 0.21 var(--purple-hue));
  --purple-500: oklch(44.53% 0.18 var(--purple-hue));
  --purple-600: oklch(35% 0.145 var(--purple-hue));
  --purple-700: oklch(28% 0.13 var(--purple-hue));
  --purple-800: oklch(22% 0.1 var(--purple-hue));
  --purple-900: oklch(15% 0.065 var(--purple-hue));

  --color-gray-100: #f6f7f9;

  --color-body-copy-gray: oklch(0.33 0 0);

  /* Widths */
  --width-max-content: 1170px;
  --width-medium-content: 992px;
  --width-small-content: 720px;

  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 56px;
  --spacing-8: 64px;
  --spacing-9: 72px;
  --spacing-10: 80px;
  --spacing-11: 96px;
  --spacing-12: 112px;
  --spacing-13: 128px;
  --spacing-14: 144px;

  /* Padding */
  --section-padding: var(--spacing-9);
  --section-padding-large: var(--spacing-11);

  @media screen and (max-width: 900px) {
    --section-padding: var(--spacing-8);
    --section-padding-large: var(--spacing-10);
  }
  @media screen and (max-width: 767px) {
    --section-padding: var(--spacing-7);
    --section-padding-large: var(--spacing-9);
  }
  @media screen and (max-width: 660px) {
    --section-padding: var(--spacing-6);
    --section-padding-large: var(--spacing-8);
  }

  /* Margin */
  --section-margin-bottom: var(--spacing-14);

  @media (max-width: 900px) {
    --section-margin-bottom: var(--spacing-11);
  }

  /* Font Sizes */
  --font-size-0: 0.6875rem;/* 11px */
  --font-size-1: 0.75rem; /* 12px */
  --font-size-2: 0.8125rem; /* 13px*/
  --font-size-3: 0.875rem; /* 14px*/
  --font-size-4: 1rem; /* 16px*/
  --font-size-5: 1.125rem; /* 18px*/
  --font-size-6: 1.25rem; /* 20px*/
  --font-size-7: 1.5rem; /* 24px*/
  --font-size-8: 1.75rem; /* 28px*/
  --font-size-9: 2rem; /* 32px*/
  --font-size-10:  2.25rem; /* 36px*/
  --font-size-11: 2.5rem; /* 40px*/
  --font-size-12: 2.75rem; /* 44px*/
  --font-size-13: 3rem; /* 48px*/
  --font-size-14: 3.25rem; /* 52px*/
  --font-size-15: 3.5rem; /* 56px*/
  --font-size-16: 4rem; /* 64px*/
  --font-size-17: 4.5rem; /* 72px*/

  /* Cards */
  --card-border-radius: 24px;
  --card-shadow: 0px 13px 27px -5px rgba(15 52 90 / 20%),
    0px 8px 16px -8px rgba(0 0 0 / 30%);
}

/* Animations */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(calc((var(--marquee-width) + var(--col-gap)) * -1));
  }
}
@keyframes blob-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes blob-path-one {
  0% {
    transform: translate(0, 0) scale(1, 1) rotate(23deg);
  }

  50% {
    transform: translate(calc(100cqw - var(--blob-width)), calc(((100cqh - var(--blob-height)) / 2) * -1)) scale(1.15, .9) rotate(113deg);
  }

  100% {
    transform: translate(0, calc((100cqh - var(--blob-height)) * -1)) scale(1.3, 1.1) rotate(203deg);
  }
}

@keyframes blob-path-two {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }

  35% {
    transform: translate(calc((var(--start-x) + var(--blob-width) - 100cqw) * -1), calc((100cqh - var(--blob-height)) * .75)) rotate(-140deg) scale(1.1, .9);
  }

  45% {
    transform: translate(calc(((var(--start-x) + var(--blob-width) - 100cqw) * -1) * .75), calc((100cqh - var(--blob-height)))) rotate(-180deg) scale(1.2, .8);
  }

  80% {
    transform: translate(calc(var(--start-x) * -1), calc((100cqh - var(--blob-height) * -1) * .25)) rotate(-320deg) scale(1.1, .9);
  }

  100% {
    transform: translate(0, 0) rotate(-360deg) scale(1, 1);
  }
}

@keyframes blob-path-three {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }

  50% {
    transform: translate(calc((100cqw - var(--blob-width)) * -1 * .45), calc((100cqh - var(--start-y)) - 100cqh)) rotate(120deg) scale(1.2, .8);
  }

  100% {
    transform: translate(calc((100cqw - var(--blob-width)) * -1 * .75), calc(100cqh - var(--start-y) - var(--blob-height))) rotate(240deg) scale(.8, 1.2);
  }
}

@keyframes fade-in-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-from-bottom-long {
  0% {
    opacity: 0;
    transform: translateY(40px);
    transform: translateY(5cqw);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-from-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-from-left-long {
  0% {
    opacity: 0;
    transform: translateX(-40px);
    transform: translateX(-5cqw);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-from-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-from-right-long {
  0% {
    opacity: 0;
    transform: translateX(40px);
    transform: translateX(5cqw);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-from-top {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-from-top-long {
  0% {
    opacity: 0;
    transform: translateY(-40px);
    transform: translateY(-5cqw);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typography */
:where(section[class*="wp-block-sa-blocks-"]) {
  h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
    text-wrap: pretty;
    color: var(--color-brand-primary-500);
  }
  h1 {
    font-size: clamp(2.5rem,
      3vw + 1.5rem,
      3.5rem
    );
    margin-bottom: var(--spacing-4);
  }
  h2 {
    font-size: clamp(2rem,
      3vw + 1rem,
      3rem
    );
    margin-bottom: .75rem;
  }
  h3, .page-template-template-gutenberg & h3 {
    font-size: 1.625rem;
    margin-bottom: var(--spacing-4);
    line-height: 1.2;

    @media (max-width: 900px) {
      font-size: 1.5rem;
    }
    @media (max-width: 660px) {
      font-size: 1.375rem;
    }
    @media (max-width: 480px) {
      font-size: 1.25rem;
    }
  }
    h4, .page-template-template-gutenberg & h4 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
  }
  p {
    font-size: var(--font-size-5);
    line-height: 1.6;
    margin: 0 0 2em;

    @media screen and (max-width: 1024px) {
      font-size: calc(17 / 16 * 1rem);
    }

    @media screen and (max-width: 400px) {
      font-size: var(--font-size-4);
    }
  }
  span {
    line-height: 1.5;
  }
  details {
    margin-bottom: var(--spacing-4);
    overflow: visible;

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

    @media (max-width: 768px) {
      width: min(480px, 100%);
      margin-inline: auto;
    }

    summary {
      font-size: var(--font-size-6);
      font-weight: 600;
      color: var(--color-brand-primary);

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

      &::-webkit-details-marker, &::marker {
        color: var(--color-brand-secondary);
      }

      @media (max-width: 480px) {
        font-size: var(--font-size-5);
      }
    }

    p {
      font-size: var(--font-size-4);
      margin-left: var(--spacing-5);
      margin-bottom: 0;
    }

    &[open] {
      summary {
        margin-bottom: 12px;
      }
    }

    a {
      color: var(--color-brand-secondary);
      font-weight: 600;
      transition: color 0.3s;

      &:is(:hover, :focus) {
        color: var(--color-brand-primary);
      }
    }
  }
}
.is-style-classic {
  h2.wp-block-heading {
    font-size: var(--font-size-10);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-brand-primary);

    @media (max-width: 600px) {
      font-size: var(--font-size-7);
    }

    @media (max-width: 480px) {
      font-size: var(--font-size-6);
    }
  }
}

/* Utility */
.hidden {
  display: none;
}

/* Buttons */
.wp-block-buttons {
  margin-top: var(--spacing-6);
  gap: var(--spacing-3);

  @media screen and (max-width: 660px) {
    margin-top: var(--spacing-5);
  }

  @media screen and (max-width: 400px) {
    margin-top: var(--spacing-4);
  }
}

:where(.bg-color-brand-primary-500,.bg-color-brand-primary-600,.bg-color-brand-primary-700,.bg-color-brand-primary-800,.bg-color-brand-primary-900) {
  .wp-block-button .wp-element-button {
    background-color: var(--color-brand-primary-100);
    border: var(--card-border);
    box-shadow: var(--card-button-shadow);
    color: var(--color-brand-primary-500);

    &::before {
      color: var(--color-brand-primary-500);
    }
  }
  .wp-block-button+.wp-block-button .wp-element-button {
    background-color: var(--card-button-background-color);
    border: var(--card-border);
    box-shadow: var(--card-button-shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-brand-primary-100);

    &::before {
      color: var(--color-brand-primary-100);
    }
  }
}

figure:is(figure) {
  margin: 0;
}


.bg-color-brand-primary-100 {
  --background-color: var(--color-brand-primary-100);
  background-color: var(--background-color);
}
.bg-color-brand-primary-200 {
  --background-color: var(--color-brand-primary-200);
  background-color: var(--background-color);
}
.bg-color-brand-primary-300 {
  --background-color: var(--color-brand-primary-300);
  background-color: var(--background-color);
}
.bg-color-brand-primary-400 {
  --background-color: var(--color-brand-primary-400);
  background-color: var(--background-color);
}
.bg-color-brand-primary-500, .bg-color-brand-primary {
  --text-color-primary: var(--color-white);
  --text-color-secondary: var(--color-brand-primary-200);

  --background-color: var(--color-brand-primary-500);
  background-color: var(--background-color);
  color: var(--color-white);

  h1,h2,h3,h4,h5,h6 {
    color: inherit;
  }
  
  a:focus {
    outline-color: var(--color-brand-primary-200);
  }
}
.bg-color-brand-primary-600 {
  --text-color-primary: var(--color-white);
  --text-color-secondary: var(--color-brand-primary-200);

  --background-color: var(--color-brand-primary-600);
  background-color: var(--background-color);
  color: var(--color-white);

  h1,h2,h3,h4,h5,h6 {
    color: inherit;
  }

  a:focus {
    outline-color: var(--color-brand-primary-200);
  }
}
.bg-color-brand-primary-700 {
  --text-color-primary: var(--color-white);
  --text-color-secondary: var(--color-brand-primary-200);

  --background-color: var(--color-brand-primary-700);
  background-color: var(--background-color);
  color: var(--color-white);

  h1,h2,h3,h4,h5,h6 {
    color: inherit;
  }

  a:focus {
    outline-color: var(--color-brand-primary-200);
  }
}
.bg-color-brand-primary-800 {
  --text-color-primary: var(--color-white);
  --text-color-secondary: var(--color-brand-primary-200);

  --background-color: var(--color-brand-primary-800);
  background-color: var(--background-color);
  color: var(--color-brand-primary-100);

  h1,h2,h3,h4,h5,h6 {
    color: inherit;
  }
  
  p {
    color: var(--color-brand-primary-200);
  }
  a:focus {
    outline-color: var(--color-brand-primary-200);
  }
}
.bg-color-brand-primary-900 {
  --text-color-primary: var(--color-white);
  --text-color-secondary: var(--color-brand-primary-200);

  --background-color: var(--color-brand-primary-900);
  background-color: var(--background-color);
  color: var(--color-brand-primary-100);
  
  h1,h2,h3,h4,h5,h6 {
    color: inherit;
  }
  p {
    color: var(--color-brand-primary-200);
  }
  a:focus {
    outline-color: var(--color-brand-primary-200);
  }
}
.bg-color-base {
  --text-color-primary: var(--color-brand-primary-500);
  --text-color-secondary: var(--color-body-copy-gray);

  color: var(--color-brand-primary-500);
}

.is-soundlines-bg {
  background-image: url('./svg/soundlines.svg');
  background-repeat: repeat-x;
  background-position: bottom calc(var(--section-padding) - 34px) center;
  background-size: 1450px;

  @media screen and (max-width: 480px) {
    background-size: 640px;
    background-position: bottom var(--section-padding) center;
  }
}

@layer bg-effect {
  :where(.is-bg-effect) {
    .bg-effect {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      container: bg-effect / size;
      animation: blob-rotate 90s linear infinite;
    }
    @supports (-moz-appearance: none) {
      .bg-effect {
        display: none;
      }
    }
    @media (max-width: 480px) {
      .bg-effect {
        animation: none;
      }
    }

    .bg-blob {
      position: absolute;
      filter: blur(150px);
    }

    .blob-primary {
      --blob-width: 35cqw;
      --blob-height: min(45cqh, 50cqw);
      width: var(--blob-width);
      height: var(--blob-height);
      background-color: var(--sapphire-blue-400);
      bottom: 0;
      animation: blob-path-one 20s linear infinite alternate;
    }

    .blob-secondary {
      --start-x: 20cqw;
      --start-y: 0;
      --blob-width: 40cqw;
      --blob-height: min(35cqh, 40cqw);
      width: var(--blob-width);
      height: var(--blob-height);
      background-color: var(--color-brand-secondary-500);
      left: var(--start-x);
      top: var(--start-y);
      animation: blob-path-two 28s linear infinite reverse;
    }

    .blob-tertiary {
      --start-x: calc(100cqw - var(--blob-width));
      --start-y: calc(100cqh - var(--blob-height) - 15cqh);
      --blob-width: 30cqw;
      --blob-height: min(45cqh, 50cqw);
      opacity: .8;
      width: var(--blob-width);
      height: var(--blob-height);
      background-color: var(--purple-400);
      left: var(--start-x);
      top: var(--start-y);
      animation: blob-path-three 16s linear infinite alternate;
    }

    :where(.device) {
       .bg-effect {
        top: -3%;
        left: -5%;
        width: 110%;
        height: 106%;
        animation: none;

        @media screen and (max-width: 480px) {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
       }
       .bg-blob {
        filter: blur(100px);

        @media screen and (max-width: 480px) {
          filter: blur(75px);
        }
       }
    }
  }
}

:where(.wp-block-columns) {
  margin-bottom: 0;
}

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

.full-width-bg.full-width-bg {
  padding: 0;
  overflow: hidden;
}

.full-width-bg>div {
  box-sizing: content-box;
  max-width: var(--width-max-content);
  padding-left: var(--nav-padding, 32px);
  padding-right: var(--nav-padding, 32px);
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding-large);
  margin-left: auto;
  margin-right: auto;
}

.frosted-card {
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  background-color: var(--card-background-color);
  box-shadow: var(--card-shadow);
  
  .wp-block-buttons.wp-block-buttons {
    margin-top: var(--spacing-4);
  }
  .wp-element-button {
    background-color: var(--card-button-background-color);
    border: var(--card-border);
    box-shadow: var(--card-button-shadow);
    color: var(--color-brand-primary-100);

    &::before {
      color: var(--color-brand-primary-100);
    }
  }
  p {
    font-weight: 500;
    margin: 0;
  }
}
.wp-element-button {

  &::before {
    margin-left: 17px;
  }

  span {
    margin-right: 0;

  }
}
.is-style-line .wp-element-button {
  padding: 0;
  background: none;
  border-radius: 0;
  position: relative;
  padding-left: 92px;
  color: var(--color-brand-secondary);
  font-size: 12px;

  &::before {
    position: absolute;
    content: "";
    display: block;
    margin-left: 0;
    width: 72px;
    height: 2px;
    background: var(--color-brand-secondary);
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  &::after {
    content: "";
    position: absolute;
    left: 93px;
    bottom: 0;
    height: 2px;
    width: 0;
    transition: width .15s;
    background: rgb(var(--brand-secondary));
  }
  &:hover::after {
    width: calc(100% - 93px);
  }
  span {
    position: relative;
    margin: 0;
    color: var(--color-brand-secondary);

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .15s;
      background: var(--color-brand-secondary);
    }
  }
  &:hover {
    &::before {
      opacity: 1;
      transform: translate(0, -50%);
    }
     span {
      transform: none;

      &::after {
        transform: scaleX(1);
      }
    }
  }
}

:where(.page-template-template-gutenberg) h3 {
  font-weight: 500;
}

.visually-hidden {
  display: inline-block;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* added FT */
.color-unset > a
{
  color: unset;
}

/* Who We Are */
@media only screen and (max-width: 767px) {
  .ct-image {
    margin: 0 auto;
  }
}