:root {
    --blue-bright:  #009ddd;
    --blue-mid:     #052b7f;
    --blue-deep:    #001e4a;
    --white:        #ffffff;
    --black:        #000000;

    /* Derived */
    --bg:           var(--blue-deep);
    --panel:        color-mix(in srgb, var(--blue-mid) 60%, var(--blue-deep) 40%);
    --panel-raised: color-mix(in srgb, var(--blue-mid) 80%, var(--blue-deep) 20%);
    --border:       color-mix(in srgb, var(--blue-bright) 20%, transparent);
    --border-active:var(--blue-bright);
    --text:         var(--white);
    --text-muted:   color-mix(in srgb, var(--white) 60%, var(--blue-bright) 40%);
    --text-dim:     color-mix(in srgb, var(--white) 35%, var(--blue-mid) 65%);
    --avatar-bg:    color-mix(in srgb, var(--blue-bright) 15%, var(--blue-deep));

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
    --radius:       10px;
    --ease:         transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.is-fixed-element~div h1,
.is-fixed-element~div h2 {
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}

.midvalley-BlogGrid_01 .BlogGrid_box .BlogGrid_item .content .date {
    display: none;
}


    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      max-width: 960px;
      margin: 0 auto 30px;
    }

    /* ── Card base ── */
    .testimonial-card {
      background: var(--panel);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem;
      position: relative;
      overflow: hidden;
      transition: var(--ease);
    }

    .testimonial-card:hover {
      border-color: var(--border-active);
      box-shadow: 0 10px 36px color-mix(in srgb, var(--blue-bright) 20%, transparent);
      transform: translateY(-3px);
    }

    /* Featured spans full width */
    .testimonial-card.featured {
      grid-column: 1 / -1;
      background: var(--panel-raised);
      border-color: color-mix(in srgb, var(--blue-bright) 45%, transparent);
    }

    /* Ghost quotemark */
    .testimonial-card::before {
      content: "\201C";
      position: absolute;
      top: 0.75rem;
      right: 1.25rem;
      font-family: Georgia, serif;
      font-size: 5.5rem;
      color: color-mix(in srgb, var(--blue-bright) 14%, transparent);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    /* Accent bar on featured */
    .testimonial-card.featured::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, var(--blue-bright), var(--blue-mid));
      border-radius: var(--radius) var(--radius) 0 0;
    }

    /* ── Stars ── */
    .testimonial-stars {
      display: flex;
      gap: 0.2rem;
      margin-bottom: 0.875rem;
      font-size: 0.9rem;
    }

    /* ── Quote ── */
    .testimonial-quote {
      font-size: 0.925rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 1.5rem;
      position: relative;
    }

    .testimonial-card.featured .testimonial-quote {
      font-size: 1.05rem;
      max-width: 740px;
      color: color-mix(in srgb, var(--white) 80%, var(--blue-bright) 20%);
    }

    /* ── Author ── */
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 0.875rem;
    }

    .testimonial-avatar {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      background: var(--avatar-bg);
      border: 2px solid var(--blue-bright);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--blue-bright);
    }

    .testimonial-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--white);
      margin-bottom: 0.1rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .testimonial-detail {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-dim);
    }

    /* ── Responsive ── */
    @media (max-width: 640px) {
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
      .testimonial-card.featured {
        grid-column: 1;
      }
    }