/* ============================================================
   testimonial.css — Mastery Logistics Systems

   Shared customer testimonial block. Single source of truth for
   the treatment, the way leo.css is for the chat examples — the
   Carriers and Private Fleets quotes both consume it, so never
   re-add per-page quote styles.

   Markup pattern:

     <section class="testimonial">
       <div class="container">
         <div class="testimonial__inner">
           <span class="testimonial__mark" aria-hidden="true">&ldquo;</span>
           <blockquote class="testimonial__quote">
             … <span class="testimonial__em">highlighted phrase</span> …
           </blockquote>
           <div class="testimonial__attrib">
             <span class="testimonial__chip">
               <img src="/images/…" alt="Company" />        <!-- or -->
               <span class="testimonial__chip-text">COMPANY</span>
             </span>
           </div>
           <p class="testimonial__name">Name, Title</p>      <!-- optional -->
         </div>
       </div>
     </section>

   The chip sits on a dark ground, so any logo used inside it has
   to be a white or reversed mark. Where no logo exists, the
   __chip-text wordmark is the fallback and looks deliberate.
============================================================ */

.testimonial {
  position: relative;
  overflow: hidden;
  background: #111111;
  padding: 6.5rem 0;
}

/* The 40px grid used across the rest of the site. */
.testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#241d1a 1px, transparent 1px),
    linear-gradient(90deg, #241d1a 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.55;
  pointer-events: none;
}

/* Copper bloom behind the quote. */
.testimonial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 620px;
  max-width: 140%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(178, 93, 66, 0.3) 0%,
    rgba(178, 93, 66, 0) 68%
  );
}

.testimonial__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.testimonial__mark {
  display: block;
  font-size: 4.875rem;
  line-height: 0.6;
  font-weight: 700;
  color: var(--color-copper, #b25d42);
  margin-bottom: 2.125rem;
}

.testimonial__quote {
  margin: 0;
  font-size: 2.375rem;
  line-height: 1.34;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #f6f1ee;
}

.testimonial__em {
  color: var(--color-copper-light, #fc9365);
  font-weight: 700;
}

.testimonial__attrib {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 9px;
  background: rgba(36, 29, 27, 0.9);
  border: 1px solid rgba(178, 93, 66, 0.55);
}

.testimonial__chip img {
  height: 19px;
  width: auto;
  display: block;
}

.testimonial__chip-text {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #f2ebe6;
}

/* Optional line under the chip, for quotes attributed to a person
   as well as a company. */
.testimonial__name {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(242, 235, 230, 0.62);
}

@media (max-width: 860px) {
  .testimonial {
    padding: 4.5rem 0;
  }

  .testimonial__quote {
    font-size: 1.5625rem;
  }

  .testimonial__mark {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
  }
}