@scope (.component-pillars) {

    

    :scope {
      --white: #ffffff;
      --gold: #fcbe41;

      --glass-gray: rgba(184, 199, 214, 0.17);
      --glass-gray-hover: rgba(194, 211, 226, 0.24);

      --glass-gold: rgba(91, 70, 8, 0.25);
      --glass-gold-hover: rgba(116, 89, 8, 0.33);

      --gray-border: rgba(224, 236, 247, 0.67);
      --gold-border: rgba(252, 190, 65, 0.92);

      --title-font: "Abril Fatface", Georgia, serif;
      --body-font:
        "Gilroy",
        "Avenir Next",
        Avenir,
        Helvetica,
        Arial,
        sans-serif;
    }

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

    :scope,
    :scope {
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      background: transparent;
    }

    :scope {
      color: var(--white);
      font-family: var(--body-font);
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.54);
    }

    .values-section {
      width: 100%;
      height: 100%;
      min-height: 0;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow: hidden;
      padding: 14px 0;

      background: transparent;
    }

    .values-grid {
      width: min(1880px, calc(100% - clamp(24px, 6vw, 120px)));
      margin: 0 auto;

      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(10px, 1.5vw, 28px);
      align-items: stretch;
    }

    .value-card {
      --card-fill: var(--glass-gray);
      --card-fill-hover: var(--glass-gray-hover);
      --card-border: var(--gray-border);
      --card-glow: rgba(187, 215, 237, 0.2);

      position: relative;
      isolation: isolate;

      min-width: 0;
      height: clamp(225px, 21vw, 330px);

      overflow: hidden;

      border: 1px solid var(--card-border);
      border-radius: clamp(20px, 2vw, 38px);

      padding:
        clamp(20px, 2vw, 36px)
        clamp(12px, 1.7vw, 30px)
        clamp(18px, 1.8vw, 32px);

      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.09) 0%,
          rgba(255, 255, 255, 0.018) 30%,
          transparent 58%,
          rgba(195, 220, 239, 0.06) 100%
        ),
        var(--card-fill);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(183, 214, 236, 0.16),
        0 16px 30px rgba(0, 0, 0, 0.2),
        0 0 20px var(--card-glow);

      backdrop-filter: blur(18px) saturate(112%);
      -webkit-backdrop-filter: blur(18px) saturate(112%);

      opacity: 0;
      transform: translateY(16px) scale(0.985);

      animation:
        card-load
        700ms
        cubic-bezier(.2, .72, .22, 1)
        forwards;

      transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
    }

    .value-card:nth-child(1) {
      animation-delay: 40ms;
    }

    .value-card:nth-child(2) {
      animation-delay: 100ms;
    }

    .value-card:nth-child(3) {
      animation-delay: 160ms;
    }

    .value-card:nth-child(4) {
      animation-delay: 220ms;
    }

    .value-card:nth-child(5) {
      animation-delay: 280ms;
    }

    .value-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;

      border-radius: inherit;
      padding: 1.4px;

      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.8) 0%,
          rgba(255, 255, 255, 0.08) 25%,
          rgba(166, 198, 222, 0.35) 55%,
          rgba(255, 255, 255, 0.58) 100%
        );

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

      -webkit-mask-composite: xor;
      mask-composite: exclude;

      pointer-events: none;
    }

    .value-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;

      border-radius: inherit;

      background:
        radial-gradient(
          circle at 14% 5%,
          rgba(255, 255, 255, 0.15),
          transparent 32%
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.045),
          transparent 46%,
          rgba(0, 0, 0, 0.08)
        );

      pointer-events: none;
    }

    .value-card.quality {
      --card-fill: var(--glass-gold);
      --card-fill-hover: var(--glass-gold-hover);
      --card-border: var(--gold-border);
      --card-glow: rgba(252, 190, 65, 0.24);
    }

    .value-card.quality::before {
      background:
        linear-gradient(
          120deg,
          rgba(255, 244, 201, 0.92) 0%,
          rgba(252, 190, 65, 0.4) 28%,
          rgba(252, 190, 65, 0.98) 73%,
          rgba(255, 244, 201, 0.86) 100%
        );
    }

    .value-card-content {
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;

      text-align: center;
    }

    .value-title {
      margin: 0 0 clamp(20px, 2.4vw, 38px);

      color: var(--white);
      font-family: var(--title-font);
      font-size: clamp(1.05rem, 1.75vw, 2.3rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.018em;
      white-space: nowrap;
    }

    .value-lead,
    .value-outcome {
      width: 100%;
      margin: 0;

      color: rgba(255, 255, 255, 0.94);
      font-family: var(--body-font);
      font-size: clamp(0.65rem, 0.95vw, 1.08rem);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .value-lead {
      min-height: 3.4em;

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

    .value-outcome {
      margin-top: clamp(14px, 1.8vw, 28px);
    }

    @keyframes card-load {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .value-card:hover {
        transform: translateY(-7px);
        border-color: rgba(255, 255, 255, 0.88);

        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.025) 31%,
            transparent 58%,
            rgba(195, 220, 239, 0.08) 100%
          ),
          var(--card-fill-hover);

        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.4),
          inset 0 -1px 0 rgba(183, 214, 236, 0.22),
          0 24px 42px rgba(0, 0, 0, 0.27),
          0 0 34px var(--card-glow);
      }
    }

    /*
      Compressed desktop and tablet.

      These widths remain five cards across.
      Text and card height reduce together.
    */
    @media (min-width: 621px) and (max-width: 1150px) {
      .values-grid {
        width: calc(100% - 24px);
        gap: 9px;
      }

      .value-card {
        height: 220px;
        border-radius: 21px;
        padding: 20px 10px 17px;
      }

      .value-title {
        margin-bottom: 17px;
        font-size: clamp(0.95rem, 2vw, 1.35rem);
      }

      .value-lead,
      .value-outcome {
        font-size: clamp(0.56rem, 1.15vw, 0.76rem);
        line-height: 1.25;
      }

      .value-lead {
        min-height: 3.2em;
      }

      .value-outcome {
        margin-top: 12px;
      }
    }

    /*
      True mobile only.

      Two cards centered above three cards.
    */
    @media (max-width: 620px) {
      .values-section {
        height: auto;
        min-height: 0;
        align-items: flex-start;
        padding: 10px 0 14px;
      }

      .values-grid {
        width: calc(100% - 16px);

        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 8px;
      }

      .value-card {
        height: auto;
        min-height: 0;
        aspect-ratio: 0.82 / 1;

        border-radius: 18px;
        padding: 15px 8px 13px;
      }

      .value-card:nth-child(1) {
        grid-column: 2 / span 2;
      }

      .value-card:nth-child(2) {
        grid-column: 4 / span 2;
      }

      .value-card:nth-child(3) {
        grid-column: 1 / span 2;
      }

      .value-card:nth-child(4) {
        grid-column: 3 / span 2;
      }

      .value-card:nth-child(5) {
        grid-column: 5 / span 2;
      }

      .value-title {
        margin-bottom: 14px;
        font-size: clamp(0.72rem, 3.8vw, 1.05rem);
      }

      .value-lead,
      .value-outcome {
        font-size: clamp(0.44rem, 2.05vw, 0.64rem);
        line-height: 1.24;
      }

      .value-lead {
        min-height: 3em;
      }

      .value-outcome {
        margin-top: 10px;
      }
    }

    @media (max-width: 390px) {
      .values-grid {
        width: calc(100% - 12px);
        gap: 9px 6px;
      }

      .value-card {
        aspect-ratio: 0.78 / 1;
        border-radius: 15px;
        padding: 12px 6px 10px;
      }

      .value-title {
        margin-bottom: 11px;
        font-size: clamp(0.62rem, 3.5vw, 0.86rem);
      }

      .value-lead,
      .value-outcome {
        font-size: clamp(0.38rem, 1.9vw, 0.55rem);
      }

      .value-outcome {
        margin-top: 8px;
      }
    }

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

      .value-card {
        opacity: 1;
        transform: none;
      }
    }
  
}