/* =================================================================
   "Approved By" band — index.php, directly above Our Partners.

   The section carries .sec-tint in the markup, so its background comes
   from styles.css and always matches #partners exactly — nothing here
   hardcodes the tint. The two read as one continuous block, with the
   padding trimmed at the seam so it isn't doubled.

   The site has a global `p { margin: unset !important }`, so paragraph
   margins below are re-declared with !important.
   ================================================================= */

.approved-section {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Partners follows immediately — trim its top padding so the combined
   block doesn't carry two full section gaps at the join. */
.approved-section + #partners {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.approved-label {
  margin: 0 0 1.125rem !important;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7089A0;
}

.approved-label::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin: .75rem auto 0;
  border-radius: 2px;
  background: #189AD6;
}

.approved-logo img {
  display: block;
  width: clamp(96px, 13vw, 128px);
  height: auto;
  margin: 0 auto;
  transition: transform .22s ease;
}

.approved-logo img:hover {
  transform: scale(1.04);
}

@media (max-width: 575.98px) {
  .approved-section { padding: 2.25rem 0 1.5rem; }
  .approved-label { font-size: .6875rem; letter-spacing: .15em; }
}

@media (prefers-reduced-motion: reduce) {
  .approved-logo img { transition: none; }
  .approved-logo img:hover { transform: none; }
}