@layer reset, tokens, vendor, utilities, layout, components, shapes,
  overrides;

  
  @layer tokens {
    :root {
      
    }
  }

  
  @layer utilities {
    
    .u-bleed,
    .u-breakout {
      box-sizing: border-box;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    .u-no-gutter { padding-left: 0 !important; padding-right: 0 !important;
  }
    .u-bleed-x {
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }

    
    .u-perspective { perspective: 1000px; }

    
    .u-pendulum {
      transform-origin: 50% 0%;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      
      --card-transform: none;
    }
    
    
    
      .u-accent {
        --accent-color: var(--at-primary);
        --accent-bg: transparent;
        color: var(--accent-color);
      }

      
      .u-accent--box {
        background: var(--accent-bg);
        padding: var(--at-space--3xs, .3em) var(--at-space--xs, .7em);
        border-radius: var(--at-radius--s, .3em);
      }

      
      .u-accent--primary {
        --accent-color: var(--at-primary);
        --accent-bg: var(--at-primary-l-5);
      }

      .u-accent--primary-white {
        --accent-color: var(--at-primary);
        --accent-bg: var(--at-white);
      }

      .u-accent--secondary {
        --accent-color: var(--at-secondary);
        --accent-bg: var(--at-secondary-l-5);
      }

      .u-accent--secondary-white {
        --accent-color: var(--at-secondary);
        --accent-bg: var(--at-white);
      }

    .u-accent--white {
      --accent-color: var(--at-black-t-3);
      --accent-bg: var(--at-white);
    }
    .u-accent--black-white {
      --accent-color: var(--at-white);
      --accent-bg: var(--at-black);
    }

  }

  
  @layer shapes {
    .squircle {
      --squircle-radius: 32px;
      --squircle-smooth: .97;
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: var(--squircle-radius);
    }

    .squircle > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @supports (mask-image: paint(squircle)) or (-webkit-mask-image:
  paint(squircle)) {
      .squircle {
        border-radius: 0;
        -webkit-mask-image: paint(squircle);
        mask-image: paint(squircle);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
      }
    }
  }

  
  @layer components {
    

    
    .dots-anim,
    .dots-anim--bang {
      display: inline-flex;  
      align-items: baseline;  
      flex-direction: column;      
      align-items: center;     
      gap: .0ch;

      
      --dot-size: 0.2em;                 
      --dot-color: var(--at-primary-l-2);  
      --dot-start-delay: 500ms;         
      --dot-delay-step: 600ms;          
      --dot-duration: 900ms;            

      
      --bang-dot: var(--dot-size);      
      --bang-gap-v: 0.12em;             
      --bang-bar-w: 0.26em;             
      --bang-bar-h: 0.50em;             
    }

    
    .dots-anim > span,
    .dots-anim--bang > span {
      position: relative;
      white-space: nowrap;
    }

    
    @media (min-width: 768px) {
      .dots-anim,
      .dots-anim--bang {
        flex-direction: row;         
        align-items: baseline;       
        gap: .4ch;
      }
    }

    
    .dots-anim > span::after,
    .dots-anim--bang > span::after {
      content: "";
      display: inline-block;
      width: var(--dot-size);
      height: var(--dot-size);
      margin-left: 0.1em;
      background-color: var(--dot-color);
      border-radius: 50%;
      transform-origin: center bottom;
      vertical-align: baseline;  

      
      transform: scale(0);
      opacity: 0;
      will-change: transform, opacity;
    }

    
    .at-anim-trigger--enter:not(.entered).dots-anim > span::after,
    .at-anim-trigger--enter:not(.entered).dots-anim--bang > span::after,
    .at-anim-trigger--enter:not(.entered).dots-anim--bang > span::before {
      animation: none;
      transform: scale(0);
      opacity: 0;
    }

    
    .entered.dots-anim > span::after,
    .entered.dots-anim--bang > span::after {
      animation: dot-pop-twice var(--dot-duration)
        cubic-bezier(.2,.9,.25,1.2) forwards;
    }

    
    .entered.dots-anim > span:nth-child(1)::after,
    .entered.dots-anim--bang > span:nth-child(1)::after {
      animation-delay: calc(var(--dot-start-delay) + 0 *
  var(--dot-delay-step));
    }
    .entered.dots-anim > span:nth-child(2)::after,
    .entered.dots-anim--bang > span:nth-child(2)::after {
      animation-delay: calc(var(--dot-start-delay) + 1 *
  var(--dot-delay-step));
    }
    .entered.dots-anim > span:nth-child(3)::after,
    .entered.dots-anim--bang > span:nth-child(3)::after {
      animation-delay: calc(var(--dot-start-delay) + 2 *
  var(--dot-delay-step));
    }

    

    
    .dots-anim--bang > span:last-child {
      position: relative;
    }

    
    .dots-anim--bang > span:last-child::after {
      content: "";
      position: absolute;
      left: calc(100% + 0.1em);
      bottom: 0.14em;  
      width: var(--bang-dot);
      height: var(--bang-dot);
      margin-left: 0;
      background-color: var(--dot-color);
      border-radius: 50%;
      vertical-align: baseline;
    }

    
    @media (min-width: 768px) {
      .dots-anim--bang > span:last-child::before {
        content: "";
        position: absolute;
        left: calc(100% + 0.1em + (var(--bang-dot) - var(--bang-bar-w)) / 2);
        bottom: calc(var(--bang-dot) + 0.10em + var(--bang-gap-v));  
        width: var(--bang-bar-w);
        height: var(--bang-bar-h);
        margin-left: 0;

        background-color: var(--dot-color);

        
        clip-path: polygon(35% 100%, 65% 100%, 90% 0%, 10% 0%);
        border-radius: 0.08em;
        transform-origin: center bottom;
        transform: scaleY(0);
        opacity: 0;
      }

      
      .entered.dots-anim--bang > span:last-child::before {
        animation: bang-bar var(--dot-duration) cubic-bezier(.2,.9,.25,1.2)
    forwards;
      }

      
      .entered.dots-anim--bang > span:last-child::before,
      .entered.dots-anim--bang > span:last-child::after {
        animation-delay: calc(var(--dot-start-delay) + 2 *
    var(--dot-delay-step));
      }
    }

    

    
    .dots-anim--multi {
      
      --dot-color-1: var(--at-secondary, #E0E0E0);
      --dot-color-2: var(--at-secondary, #E0E0E0);
      --dot-color-3: var(--at-secondary, #E0E0E0);
    }

    
    .dots-anim--multi > span:nth-child(1)::after { background-color:
  var(--dot-color-1); }
    .dots-anim--multi > span:nth-child(2)::after { background-color:
  var(--dot-color-2); }
    .dots-anim--multi > span:nth-child(3)::after { background-color:
  var(--dot-color-3); }

    
    .dots-anim--bang.dots-anim--multi > span:nth-child(1)::after {
  background-color: var(--dot-color-1); }
    .dots-anim--bang.dots-anim--multi > span:nth-child(2)::after {
  background-color: var(--dot-color-2); }
    .dots-anim--bang.dots-anim--multi > span:nth-child(3)::after,
    .dots-anim--bang.dots-anim--multi > span:nth-child(3)::before {
  background-color: var(--dot-color-3); }

    
    .dots-anim--multi .dot-i::after { background-color: var(--dot-color-3);
  }

    
    .dots-anim--multi > span::after,
    .dots-anim--bang.dots-anim--multi > span::after,
    .dots-anim--bang.dots-anim--multi > span::before {
      transition: background-color .45s ease .05s;
    }

    
    .dots-anim--multi.entered {
      --dot-color-1: var(--at-secondary, #E57373); 
      --dot-color-2: var(--at-secondary, #81C784); 
      --dot-color-3: var(--at-primary, #6BA9DD); 
    }

    
    .dots-anim--multi:hover.entered {
      --dot-color-1: var(--at-secondary-l-3, #FF8A80);
      --dot-color-2: var(--at-secondary-l-3, #FFD54F);
      --dot-color-3: var(--at-primary-l-3, #80DEEA);
    }


    
    
    .dots-anim--last > span:not(:last-child)::after {
      content: none !important;
      animation: none !important;
    }

    
    .dots-anim--last > span:last-child::after {
      
    }

    
    .at-anim-trigger--enter:not(.entered).dots-anim--last >
  span:last-child::after {
      animation: none;
      transform: scale(0);
      opacity: 0;
    }

    
    .entered.dots-anim--last > span:last-child::after {
      animation: dot-pop-twice var(--dot-duration)
  cubic-bezier(.2,.9,.25,1.2) forwards;
      
      animation-delay: calc(var(--dot-start-delay) + 2 *
  var(--dot-delay-step));
    }

    
    @media (prefers-reduced-motion: reduce) {
      .entered.dots-anim--last > span:last-child::after {
        animation: none;
        transform: scale(1);
        opacity: 1;
      }
    }


    
    @keyframes dot-pop-twice {
      0%   { transform: scale(0);    opacity: 0; }
      30%  { transform: scale(1.35); opacity: 1; } 
      45%  { transform: scale(0.95); opacity: 1; } 
      65%  { transform: scale(1.18); opacity: 1; } 
      82%  { transform: scale(0.98); opacity: 1; } 
      100% { transform: scale(1.00); opacity: 1; } 
    }

    @keyframes bang-bar {
      0%   { transform: scaleY(0);    opacity: 0; }
      40%  { transform: scaleY(1.18); opacity: 1; } 
      60%  { transform: scaleY(0.94); opacity: 1; } 
      100% { transform: scaleY(1.00); opacity: 1; }
    }

    
    @media (prefers-reduced-motion: reduce) {
      .entered.dots-anim > span::after,
      .entered.dots-anim--bang > span::after,
      .entered.dots-anim--bang > span::before {
        animation: none;
        transform: scale(1);
        opacity: 1;
      }
    }
  } 

  
  @layer overrides {
    
  }

 

  
  .pendulum-item {
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    backface-visibility: hidden;

    
    --pendulum-base-rotation: 0deg;
    --pendulum-swing-start: -14deg;
    --pendulum-swing-peak: 6deg;
    --pendulum-swing-settle-1: -3.5deg;
    --pendulum-swing-settle-2: 1.6deg;
    --pendulum-duration: 900ms;
    --pendulum-easing: cubic-bezier(.2,.9,.25,1.2);
    --pendulum-stagger: 150ms;
  }

  
  @media (min-width: 992px) {

    
    .card-content-31__wrapper.pendulum-item:nth-child(1),
    .card-content-31__wrapper.pendulum-item:nth-child(3) {
      --pendulum-base-rotation: -3deg;
    }

    .card-content-31__wrapper.pendulum-item:nth-child(2) {
      --pendulum-base-rotation: 2deg;
      margin-left: calc(var(--at-grid-gap--l, 2rem) * 0.45);
    }

    .pendulum-item {
      will-change: transform, opacity;
    }

    
    .pendulum-trigger:not(.is-visible) .pendulum-item {
      transform: rotate(var(--pendulum-base-rotation));
    }

    
    .pendulum-trigger.is-visible .pendulum-item {
      animation: pendulumSwing var(--pendulum-duration)
  var(--pendulum-easing) both;
    }

    
    .pendulum-trigger.is-visible .pendulum-item:nth-child(1) {
      animation-delay: calc(0 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(2) {
      animation-delay: calc(1 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(3) {
      animation-delay: calc(2 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(4) {
      animation-delay: calc(3 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(5) {
      animation-delay: calc(4 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(6) {
      animation-delay: calc(5 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(7) {
      animation-delay: calc(6 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(8) {
      animation-delay: calc(7 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(9) {
      animation-delay: calc(8 * var(--pendulum-stagger));
    }
    .pendulum-trigger.is-visible .pendulum-item:nth-child(10) {
      animation-delay: calc(9 * var(--pendulum-stagger));
    }

    
    @keyframes pendulumSwing {
      0%   {
        transform: rotate(calc(var(--pendulum-base-rotation) +
  var(--pendulum-swing-start)));
        opacity: 0;
      }
      40%  {
        transform: rotate(calc(var(--pendulum-base-rotation) +
  var(--pendulum-swing-peak)));
        opacity: 1;
      }
      65%  {
        transform: rotate(calc(var(--pendulum-base-rotation) +
  var(--pendulum-swing-settle-1)));
      }
      82%  {
        transform: rotate(calc(var(--pendulum-base-rotation) +
  var(--pendulum-swing-settle-2)));
      }
      100% {
        transform: rotate(var(--pendulum-base-rotation));
        opacity: 1;
      }
    }
  }

  
  @media (prefers-reduced-motion: reduce) {
    .pendulum-trigger .pendulum-item {
      animation: none;
      transform: none;
      opacity: 1;
    }
  }