:root {
      --trace-navy: #123882ff;
      --trace-navy-700: #0d2c63;
      --trace-sky: #81a2e0ff;
      --trace-gold: #edd01bff;
      --trace-ink: #0b1020;
      --trace-white: #ffffff;
      --trace-muted: #6c757d;
      --shadow-sm: 0 6px 18px rgba(0, 0, 0, .08);
      --shadow-lg: 0 16px 40px rgba(0, 0, 0, .15);
      --radius-lg: 1.1rem;
  }

  /* ---------- HERO ---------- */
  .hero-gradient {
      background: radial-gradient(1200px 800px at 10% 10%, rgba(255, 255, 255, .08), transparent 60%),
          linear-gradient(135deg, #0d1943ff 0%, var(--trace-sky) 100%);
      color: #fff;
  }

  .hero-gradient .lead {
      opacity: .95;
  }

  .divider-wave {
      display: block;
      height: 26px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, .55), transparent);
      mask: radial-gradient(10px 10px at 10px 50%, #0000 98%, #000 101%) left,
          radial-gradient(10px 10px at 30px 50%, #0000 98%, #000 101%) left;
      -webkit-mask: radial-gradient(10px 10px at 10px 50%, #0000 98%, #000 101%) left,
          radial-gradient(10px 10px at 30px 50%, #0000 98%, #000 101%) left;
      opacity: .25
  }

  /* ---------- FILTER BAR (old look) ---------- */
  .filter-wrap {
      position: sticky;
      top: 58px;
      z-index: 10;
      background: #f8f9fa;
      border-bottom: 1px solid rgba(0, 0, 0, .04);
  }

  .btn-group .filter-btn {
      background: var(--trace-white);
      color: var(--trace-navy);
      border: 1px solid var(--trace-navy);
      padding: .5rem 1rem;
      font-weight: 600;
      transition: all .2s ease;
      box-shadow: var(--shadow-sm);
  }

  /* hover/active */
  .btn-group .filter-btn:hover,
  .btn-group .filter-btn.active {
      background: var(--trace-navy);
      color: #fff;
  }

  /* make the group look like a single control on desktop */
  .btn-group .filter-btn {
      border-right-width: 0;
  }

  .btn-group .filter-btn:last-child {
      border-right-width: 1px;
  }

  .btn-group .filter-btn:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }

  .btn-group .filter-btn:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }

  /* small screens: wrap nicely as pills */
  @media (max-width: 575.98px) {
      .btn-group {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
      }

      .btn-group .filter-btn {
          border-right-width: 1px;
          /* restore full borders when wrapping */
          border-radius: 999px !important;
      }
  }

  .filter-hint {
      font-size: .9rem;
      color: var(--trace-muted);
  }


  /* ---------- CARD ---------- */
  /* Classy Combo: bevel + soft layered shadow */
  .svc-card {
      background: linear-gradient(180deg, #fff, #fafbff 70%);
      border: 1px solid rgba(12, 24, 64, .06);
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .65),
          0 1px 2px rgba(0, 0, 0, .06),
          0 6px 18px rgba(0, 0, 0, .08);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;

      transform: translateY(0);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }

  .svc-card:hover {
      transform: translateY(-6px);
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .7),
          0 4px 10px rgba(0, 0, 0, .10),
          0 16px 40px rgba(0, 0, 0, .18);
      filter: saturate(1.02);
  }

  /* Header */
  .card-header-gradient {
      padding: 1rem 1.25rem;
      background: linear-gradient(90deg, var(--trace-navy) 0%, var(--trace-navy-700) 100%);
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      animation: none !important;
      background-size: auto;
  }

  .card-header-gradient h5 {
      font-size: 1.1rem;
      margin: 0;
      line-height: 1.2;
  }

  .card-header-gradient::before,
  .card-header-gradient::after {
      content: none !important;
      animation: none !important;
  }

  /* Ribbons */
  .card-subbar {
      background: var(--trace-gold);
      color: #111;
      font-weight: 700;
      padding: .35rem .8rem;
      line-height: 1.0;
      font-size: .85rem;
      font-family: 'Oswald', sans-serif;
      font-weight: 600;
      letter-spacing: .02em;
      text-transform: uppercase;
  }

  .card-subbar::before {
      content: none !important;
  }

  .price-bar {
      background: linear-gradient(90deg, #fff7cc, #ffe26a);
      color: #3b2f00;
      font-weight: 800;
      padding: .35rem .8rem;
      line-height: 1.1;
      border-top: 1px solid rgba(0, 0, 0, .05);
      border-bottom: 1px solid rgba(0, 0, 0, .05);
      display: flex;
      align-items: center;
      gap: .5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .price-bar .amount {
      font-family: 'Roboto Mono', monospace;
      font-weight: 600;
      letter-spacing: -.03em;
      font-size: clamp(.95rem, 1.5vw, 1.25rem);
  }

  .price-bar small {
      font-family: 'Roboto Mono', monospace;
      font-weight: 500;
      letter-spacing: -.02em;
      font-size: .7em;
      opacity: .85;
  }

  .price-bar .sep {
      opacity: .6;
      font-weight: 700;
      margin: 0 .35rem;
  }

  .svc-body {
      padding: 1.25rem 1.25rem 1rem;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
  }

  .svc-list {
      max-width: 680px;
      margin: 0 auto 1rem auto;
  }

  .svc-list li {
      margin-bottom: .5rem;
      color: #222;
  }

  .svc-list i {
      color: var(--trace-navy);
  }

  .svc-body .btn {
      margin-top: auto;
  }

  .card-subbar2 {
      background: var(--trace-navy);
      color: #fff;
      font-weight: 700;
      padding: .7rem 1rem;
      text-align: center;
      font-size: .95rem;
      line-height: 1.1;
  }

  /* CTA bar above ribbon, styled to match bevel/shadow */
  .cta-bar {
      background: #eef7e2ff;
      color: var(--trace-ink);
      font-weight: 500;
      font-size: .9em;
      text-align: center;
      padding: .6rem 1rem;
      border-radius: 0;
      border-top: 1px solid rgba(0, 0, 0, .05);
      border-bottom: 1px solid rgba(0, 0, 0, .05);
      letter-spacing: .01em;
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .6),
          0 2px 6px rgba(0, 0, 0, .08);
      transition: transform .22s ease, filter .22s ease;
      /* add smooth lift */
  }

  /* Hover effect when the card lifts */
  .svc-card:hover .cta-bar {
      transform: translateY(-3px);
      filter: brightness(.97);
  }

  a:hover .cta-bar {
      filter: brightness(.97);
  }

  /* Hide buttons only on the Services grid cards */
  #service-cards .svc-body .btn {
      display: none !important;
  }

  /* Badges */
  .badge-trace {
      background: linear-gradient(135deg, #fff7cc, #ffe26a);
      color: #3b2f00;
      border: 1px solid rgba(0, 0, 0, .06);
      font-weight: 700;
  }

  /* A11y focus */
  a:focus-visible,
  button:focus-visible {
      outline: 3px solid #82c7ff;
      outline-offset: 2px;
      border-radius: .5rem;
  }

  /* Filter fade */
  .fade-hide {
      opacity: 0;
      transform: scale(.98);
      pointer-events: none;
  }

  .fade-show {
      opacity: 1;
      transform: scale(1);
      transition: opacity .18s ease, transform .18s ease;
  }

  /* ---------- FULL-BLEED + GRID ---------- */
  .section-bleed {
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      width: 100vw;
      background: #f8f9fc;
  }

  .container-wide {
      width: min(2300px, 98vw);
      margin-inline: auto;
      padding-inline: clamp(4px, .6vw, 10px);
  }

  .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.15rem .9rem;
  }

  @media (max-width:991.98px) {
      .svc-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1rem .75rem;
      }
  }

  @media (max-width:575.98px) {
      .svc-grid {
          grid-template-columns: 1fr;
          gap: .9rem;
      }

      .card-subbar,
      .card-subbar2 {
          font-size: .98rem;
      }

      .price-bar .amount {
          font-size: clamp(1rem, 4vw, 1.15rem);
      }
  }

  /* Reduced motion safety */
  @media (prefers-reduced-motion:reduce) {

      .card-header-gradient,
      .card-header-gradient::after,
      .card-header-gradient::before,
      .card-subbar::before {
          animation: none !important;
      }
  }