:root {
  --ambient-paper: #ffffff;
  --ambient-ink: #333333;
}

body.fluid-ambient-page {
  background: var(--ambient-paper);
  color: var(--ambient-ink);
}

.fluid-ambient-page .company-main {
  position: relative;
  z-index: 1;
  background: transparent;
}

.fluid-ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(245, 245, 245, 0.7), transparent 38%),
    #ffffff;
  isolation: isolate;
}

.fluid-ambient::before {
  position: absolute;
  z-index: 1;
  inset: -30%;
  border-radius: 37% 63% 58% 42% / 64% 38% 62% 36%;
  background:
    radial-gradient(ellipse 34% 42% at 20% 30%, rgba(255, 89, 89, 0.5), transparent 72%),
    radial-gradient(ellipse 40% 31% at 58% 45%, rgba(255, 189, 89, 0.52), transparent 74%),
    radial-gradient(ellipse 36% 46% at 78% 66%, rgba(1, 82, 131, 0.38), transparent 73%);
  content: "";
  filter: blur(clamp(58px, 8vw, 112px)) saturate(112%);
  mix-blend-mode: multiply;
  opacity: 0.16;
  transform-origin: center;
  animation: ambient-wash 26s cubic-bezier(0.45, 0, 0.2, 1) -11s infinite;
}

.fluid-ambient::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  content: "";
}

.fluid-ambient__shape {
  position: absolute;
  display: block;
  border-radius: 47% 53% 62% 38% / 56% 42% 58% 44%;
  opacity: 0.22;
  filter: blur(clamp(36px, 4.5vw, 68px)) saturate(116%);
  mix-blend-mode: multiply;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, border-radius;
}

.fluid-ambient__shape::before,
.fluid-ambient__shape::after {
  position: absolute;
  border-radius: 62% 38% 43% 57% / 47% 61% 39% 53%;
  background: inherit;
  content: "";
  transform-origin: center;
}

.fluid-ambient__shape::before {
  width: 58%;
  height: 52%;
  animation: ambient-lobe-a 13s ease-in-out -4s infinite;
}

.fluid-ambient__shape::after {
  top: 18%;
  right: 16%;
  width: 43%;
  height: 47%;
  opacity: 0.78;
  animation: ambient-lobe-b 17s ease-in-out -9s infinite;
}

.fluid-ambient__shape--red-a {
  top: -11vh;
  left: -9vw;
  width: 56vw;
  height: 48vw;
  background:
    radial-gradient(ellipse at 72% 70%, rgba(255, 189, 89, 0.74), transparent 56%),
    linear-gradient(142deg, #ff5959 0%, #ff8790 74%);
  animation: ambient-red-a 28s cubic-bezier(0.45, 0, 0.2, 1) -9s infinite;
}

.fluid-ambient__shape--red-a::before {
  right: -24%;
  bottom: 2%;
}

.fluid-ambient__shape--yellow-a {
  top: 24vh;
  left: 25vw;
  width: 48vw;
  height: 38vw;
  background:
    radial-gradient(ellipse at 20% 62%, rgba(255, 89, 89, 0.66), transparent 58%),
    linear-gradient(135deg, #ffbd59 8%, #ffe0a1 100%);
  animation: ambient-yellow-a 34s cubic-bezier(0.45, 0, 0.2, 1) -17s infinite;
}

.fluid-ambient__shape--yellow-a::before {
  top: -19%;
  left: 12%;
}

.fluid-ambient__shape--blue-a {
  top: 3vh;
  right: -17vw;
  width: 61vw;
  height: 53vw;
  background:
    radial-gradient(ellipse at 18% 65%, rgba(255, 189, 89, 0.5), transparent 55%),
    linear-gradient(148deg, #4d9fc7 0%, #015283 100%);
  opacity: 0.18;
  animation: ambient-blue-a 31s cubic-bezier(0.45, 0, 0.2, 1) -5s infinite;
}

.fluid-ambient__shape--blue-a::before {
  bottom: -12%;
  left: -17%;
}

.fluid-ambient__shape--red-b {
  bottom: -24vh;
  left: 2vw;
  width: 46vw;
  height: 45vw;
  background: linear-gradient(130deg, #ff5959 0%, #ffbd59 100%);
  opacity: 0.16;
  animation: ambient-red-b 25s cubic-bezier(0.45, 0, 0.2, 1) -14s infinite;
}

.fluid-ambient__shape--red-b::before {
  top: -20%;
  right: -14%;
}

.fluid-ambient__shape--blue-b {
  right: 2vw;
  bottom: -20vh;
  width: 52vw;
  height: 43vw;
  background: linear-gradient(138deg, #75b7cd 0%, #015283 100%);
  opacity: 0.15;
  animation: ambient-blue-b 29s cubic-bezier(0.45, 0, 0.2, 1) -21s infinite;
}

.fluid-ambient__shape--blue-b::before {
  top: -17%;
  left: -22%;
}

.fluid-ambient__shape--blend {
  top: 46vh;
  left: 48vw;
  width: 32vw;
  height: 28vw;
  background: linear-gradient(135deg, #ff5959 0%, #ffbd59 46%, #398cab 100%);
  opacity: 0.18;
  animation: ambient-blend 20s cubic-bezier(0.45, 0, 0.2, 1) -7s infinite;
}

/* Reference pages keep their reading area quiet while color circulates at the edges. */
:is(.about-fluid-page, .design-reference-page) .fluid-ambient::before {
  inset: -24%;
  background:
    conic-gradient(
      from 18deg at 50% 50%,
      rgba(255, 89, 89, 0.68) 0deg,
      rgba(255, 89, 89, 0.68) 68deg,
      rgba(255, 189, 89, 0.7) 122deg,
      rgba(255, 189, 89, 0.7) 188deg,
      rgba(1, 82, 131, 0.54) 244deg,
      rgba(1, 82, 131, 0.54) 310deg,
      rgba(255, 89, 89, 0.68) 360deg
  );
  mix-blend-mode: normal;
  opacity: 0.15;
  will-change: transform;
  animation: about-edge-wash 22s linear -8s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient::after {
  background:
    radial-gradient(
      ellipse 48% 58% at 50% 45%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 48%,
      rgba(255, 255, 255, 0.62) 72%,
      rgba(255, 255, 255, 0.08) 100%
    );
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape {
  opacity: 0.2;
  mix-blend-mode: normal;
  will-change: transform;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape::before,
:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape::after {
  animation: none;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--red-a {
  --about-color-rest: #ff7e73;
  top: -22vh;
  left: -25vw;
  width: 58vw;
  height: 48vw;
  animation: about-edge-northwest 25s cubic-bezier(0.45, 0, 0.2, 1) -10s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--yellow-a {
  --about-color-rest: #e5c17a;
  top: 40vh;
  left: -27vw;
  width: 51vw;
  height: 42vw;
  animation: about-edge-west 28s cubic-bezier(0.45, 0, 0.2, 1) -19s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blue-a {
  --about-color-rest: #547d9f;
  top: -20vh;
  right: -31vw;
  width: 62vw;
  height: 52vw;
  opacity: 0.18;
  animation: about-edge-northeast 27s cubic-bezier(0.45, 0, 0.2, 1) -6s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--red-b {
  --about-color-rest: #5188a0;
  bottom: -29vh;
  left: -23vw;
  width: 52vw;
  height: 47vw;
  opacity: 0.16;
  animation: about-edge-southwest 24s cubic-bezier(0.45, 0, 0.2, 1) -15s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blue-b {
  --about-color-rest: #ffbf73;
  right: -29vw;
  bottom: -27vh;
  width: 57vw;
  height: 47vw;
  opacity: 0.16;
  animation: about-edge-southeast 30s cubic-bezier(0.45, 0, 0.2, 1) -22s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blend {
  --about-color-rest: #e4757a;
  top: 37vh;
  right: -18vw;
  left: auto;
  width: 38vw;
  height: 32vw;
  opacity: 0.17;
  animation: about-edge-east 21s cubic-bezier(0.45, 0, 0.2, 1) -7s infinite;
}

:is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape {
  background: none;
  background-color: var(--about-color-rest, #ff7373);
}

.fluid-ambient-page .site-header {
  border-bottom-color: rgba(51, 51, 51, 0.06);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0.45rem 2rem rgba(1, 82, 131, 0.025);
  backdrop-filter: blur(20px) saturate(108%);
  -webkit-backdrop-filter: blur(20px) saturate(108%);
}

.fluid-ambient-page .site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(1, 82, 131, 0.1);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--ambient-ink);
  backdrop-filter: blur(24px) saturate(105%);
  -webkit-backdrop-filter: blur(24px) saturate(105%);
}

.fluid-ambient-page .site-footer__logo {
  filter: none;
}

.fluid-ambient-page .site-footer__tagline,
.fluid-ambient-page .site-footer__group h2,
.fluid-ambient-page .site-footer__group a,
.fluid-ambient-page .site-footer__group > span {
  color: var(--ambient-ink);
}

.fluid-ambient-page .site-footer__group a,
.fluid-ambient-page .site-footer__group > span {
  border-bottom-color: rgba(1, 82, 131, 0.14);
}

.fluid-ambient-page .site-footer__group a:hover,
.fluid-ambient-page .site-footer__group a:focus-visible {
  color: var(--brand-blue);
}

.fluid-ambient-page .site-footer__copy {
  color: rgba(51, 51, 51, 0.56);
}

/* About and Team use the same palette as the fluid background without
   continuously repainting large blurred layers. */
:is(.about-fluid-page, .team-page) .fluid-ambient {
  background:
    radial-gradient(ellipse 48% 52% at -12% -10%, rgba(255, 89, 89, 0.2), transparent 76%),
    radial-gradient(ellipse 44% 48% at 112% -8%, rgba(1, 82, 131, 0.17), transparent 77%),
    radial-gradient(ellipse 38% 45% at -10% 55%, rgba(255, 189, 89, 0.16), transparent 78%),
    radial-gradient(ellipse 37% 43% at 110% 55%, rgba(228, 117, 122, 0.14), transparent 78%),
    radial-gradient(ellipse 46% 50% at -12% 112%, rgba(81, 136, 160, 0.15), transparent 78%),
    radial-gradient(ellipse 48% 52% at 112% 112%, rgba(255, 191, 115, 0.15), transparent 78%),
    #ffffff;
  isolation: auto;
}

:is(.about-fluid-page, .team-page) .fluid-ambient::before,
:is(.about-fluid-page, .team-page) .fluid-ambient::after,
:is(.about-fluid-page, .team-page) .fluid-ambient__shape {
  display: none;
  animation: none;
  filter: none;
  transform: none;
  will-change: auto;
}

:is(.about-fluid-page, .team-page) .site-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(.about-fluid-page, .team-page) .site-footer {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes ambient-red-a {
  0%,
  100% { border-radius: 47% 53% 62% 38% / 56% 42% 58% 44%; transform: translate3d(-5%, -4%, 0) rotate(-5deg) scale(0.94, 1.05); }
  27% { border-radius: 64% 36% 43% 57% / 39% 62% 38% 61%; transform: translate3d(19%, 16%, 0) rotate(4deg) scale(1.08, 0.93); }
  55% { border-radius: 38% 62% 57% 43% / 65% 36% 64% 35%; transform: translate3d(34%, 26%, 0) rotate(-2deg) scale(0.92, 1.12); }
  79% { border-radius: 58% 42% 34% 66% / 46% 63% 37% 54%; transform: translate3d(11%, 8%, 0) rotate(5deg) scale(1.04); }
}

@keyframes ambient-wash {
  0%,
  100% { border-radius: 37% 63% 58% 42% / 64% 38% 62% 36%; transform: translate3d(-7%, -3%, 0) rotate(-5deg) scale(0.92, 1.08); }
  24% { border-radius: 61% 39% 42% 58% / 39% 64% 36% 61%; transform: translate3d(9%, 8%, 0) rotate(4deg) scale(1.08, 0.93); }
  51% { border-radius: 42% 58% 66% 34% / 57% 35% 65% 43%; transform: translate3d(15%, -7%, 0) rotate(-3deg) scale(0.94, 1.12); }
  76% { border-radius: 63% 37% 38% 62% / 43% 60% 40% 57%; transform: translate3d(-10%, 11%, 0) rotate(5deg) scale(1.06, 0.96); }
}

@keyframes ambient-lobe-a {
  0%,
  100% { border-radius: 62% 38% 43% 57% / 47% 61% 39% 53%; transform: translate3d(-12%, 5%, 0) rotate(-8deg) scale(0.82); }
  38% { border-radius: 39% 61% 58% 42% / 63% 37% 63% 37%; transform: translate3d(18%, -16%, 0) rotate(7deg) scale(1.18, 0.76); }
  71% { border-radius: 57% 43% 35% 65% / 38% 62% 38% 62%; transform: translate3d(7%, 20%, 0) rotate(-4deg) scale(0.9, 1.16); }
}

@keyframes ambient-lobe-b {
  0%,
  100% { border-radius: 43% 57% 64% 36% / 59% 41% 59% 41%; transform: translate3d(16%, -8%, 0) rotate(6deg) scale(0.74); }
  33% { border-radius: 64% 36% 39% 61% / 37% 58% 42% 63%; transform: translate3d(-22%, 18%, 0) rotate(-7deg) scale(1.16, 0.78); }
  68% { border-radius: 38% 62% 55% 45% / 64% 43% 57% 36%; transform: translate3d(-8%, -19%, 0) rotate(3deg) scale(0.88, 1.2); }
}

@keyframes ambient-yellow-a {
  0%,
  100% { border-radius: 58% 42% 39% 61% / 44% 63% 37% 56%; transform: translate3d(-8%, 4%, 0) rotate(3deg) scale(1.02); }
  31% { border-radius: 36% 64% 56% 44% / 61% 38% 62% 39%; transform: translate3d(22%, -19%, 0) rotate(-5deg) scale(1.12, 0.9); }
  62% { border-radius: 63% 37% 46% 54% / 37% 58% 42% 63%; transform: translate3d(-19%, 13%, 0) rotate(2deg) scale(0.91, 1.14); }
  83% { border-radius: 45% 55% 66% 34% / 57% 42% 58% 43%; transform: translate3d(7%, 20%, 0) rotate(-3deg) scale(1.05); }
}

@keyframes ambient-blue-a {
  0%,
  100% { border-radius: 42% 58% 64% 36% / 61% 39% 61% 39%; transform: translate3d(8%, -6%, 0) rotate(5deg) scale(1); }
  26% { border-radius: 61% 39% 37% 63% / 42% 59% 41% 58%; transform: translate3d(-18%, 18%, 0) rotate(-4deg) scale(1.09, 0.94); }
  57% { border-radius: 35% 65% 53% 47% / 64% 43% 57% 36%; transform: translate3d(-34%, 29%, 0) rotate(3deg) scale(0.94, 1.1); }
  82% { border-radius: 57% 43% 68% 32% / 38% 61% 39% 62%; transform: translate3d(-9%, 7%, 0) rotate(-2deg) scale(1.06); }
}

@keyframes ambient-red-b {
  0%,
  100% { transform: translate3d(-9%, 12%, 0) rotate(-4deg) scale(0.96); }
  35% { transform: translate3d(24%, -21%, 0) rotate(5deg) scale(1.13, 0.9); }
  68% { transform: translate3d(39%, -36%, 0) rotate(-2deg) scale(0.9, 1.12); }
}

@keyframes ambient-blue-b {
  0%,
  100% { transform: translate3d(12%, 13%, 0) rotate(4deg) scale(0.95); }
  38% { transform: translate3d(-20%, -24%, 0) rotate(-5deg) scale(1.12, 0.92); }
  72% { transform: translate3d(-36%, -31%, 0) rotate(2deg) scale(0.91, 1.13); }
}

@keyframes ambient-blend {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(0.78); }
  30% { transform: translate3d(-48%, -32%, 0) rotate(6deg) scale(1.18, 0.72); }
  61% { transform: translate3d(34%, 38%, 0) rotate(-5deg) scale(0.76, 1.2); }
  82% { transform: translate3d(-16%, 17%, 0) rotate(3deg) scale(1.04); }
}

@keyframes about-edge-wash {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(0.96, 1.05); }
  26% { transform: translate3d(4%, 5%, 0) rotate(94deg) scale(1.04, 0.95); }
  53% { transform: translate3d(3%, -5%, 0) rotate(191deg) scale(0.95, 1.07); }
  79% { transform: translate3d(-5%, 4%, 0) rotate(284deg) scale(1.05, 0.96); }
  100% { transform: translate3d(-3%, -2%, 0) rotate(360deg) scale(0.96, 1.05); }
}

@keyframes about-edge-northwest {
  0%,
  100% { transform: translate3d(-8%, -6%, 0) rotate(-5deg) scale(0.96, 1.06); }
  34% { transform: translate3d(17%, 13%, 0) rotate(4deg) scale(1.09, 0.93); }
  67% { transform: translate3d(8%, 27%, 0) rotate(-3deg) scale(0.93, 1.12); }
}

@keyframes about-edge-west {
  0%,
  100% { transform: translate3d(-9%, -12%, 0) rotate(3deg) scale(1); }
  31% { transform: translate3d(21%, -23%, 0) rotate(-5deg) scale(1.12, 0.9); }
  68% { transform: translate3d(13%, 21%, 0) rotate(2deg) scale(0.92, 1.13); }
}

@keyframes about-edge-northeast {
  0%,
  100% { transform: translate3d(9%, -7%, 0) rotate(5deg) scale(0.98); }
  32% { transform: translate3d(-18%, 15%, 0) rotate(-4deg) scale(1.1, 0.94); }
  69% { transform: translate3d(-9%, 29%, 0) rotate(3deg) scale(0.94, 1.1); }
}

@keyframes about-edge-southwest {
  0%,
  100% { transform: translate3d(-10%, 13%, 0) rotate(-4deg) scale(0.95); }
  37% { transform: translate3d(23%, -27%, 0) rotate(5deg) scale(1.12, 0.91); }
  71% { transform: translate3d(10%, -39%, 0) rotate(-2deg) scale(0.91, 1.11); }
}

@keyframes about-edge-southeast {
  0%,
  100% { transform: translate3d(12%, 14%, 0) rotate(4deg) scale(0.95); }
  39% { transform: translate3d(-21%, -25%, 0) rotate(-5deg) scale(1.11, 0.92); }
  72% { transform: translate3d(-9%, -38%, 0) rotate(2deg) scale(0.92, 1.12); }
}

@keyframes about-edge-east {
  0%,
  100% { transform: translate3d(12%, -10%, 0) rotate(-4deg) scale(0.8); }
  32% { transform: translate3d(-27%, -31%, 0) rotate(6deg) scale(1.18, 0.72); }
  63% { transform: translate3d(-11%, 37%, 0) rotate(-5deg) scale(0.78, 1.18); }
  84% { transform: translate3d(-23%, 12%, 0) rotate(3deg) scale(1.04); }
}

@media (width < 768px) {
  .fluid-ambient__shape {
    width: 82vw;
    height: 72vw;
    filter: blur(34px) saturate(112%);
    opacity: 0.18;
  }

  .fluid-ambient__shape--red-a {
    top: 2vh;
    left: -32vw;
  }

  .fluid-ambient__shape--yellow-a {
    top: 31vh;
    left: 8vw;
  }

  .fluid-ambient__shape--blue-a {
    top: 9vh;
    right: -39vw;
  }

  .fluid-ambient__shape--red-b {
    bottom: -12vh;
    left: -25vw;
  }

  .fluid-ambient__shape--blue-b {
    right: -28vw;
    bottom: -7vh;
  }

  .fluid-ambient__shape--blend {
    top: 56vh;
    left: 24vw;
    width: 58vw;
    height: 50vw;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient::after {
    background:
      radial-gradient(
        ellipse 72% 58% at 50% 43%,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(255, 255, 255, 0.7) 76%,
        rgba(255, 255, 255, 0.1) 100%
      );
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--red-a {
    top: -10vh;
    left: -58vw;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--yellow-a {
    top: 42vh;
    left: -56vw;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blue-a {
    top: -8vh;
    right: -60vw;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--red-b {
    bottom: -16vh;
    left: -55vw;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blue-b {
    right: -57vw;
    bottom: -14vh;
  }

  :is(.about-fluid-page, .design-reference-page) .fluid-ambient__shape--blend {
    top: 48vh;
    right: -39vw;
    left: auto;
    width: 68vw;
    height: 58vw;
  }

}

@media (prefers-reduced-motion: reduce) {
  .fluid-ambient::before,
  .fluid-ambient__shape {
    animation: none !important;
  }

  .fluid-ambient__shape::before,
  .fluid-ambient__shape::after {
    animation: none !important;
  }
}