.about-page .intro-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.about-page .about-visual{position:relative}
.about-page .about-visual .main-image{width:100%;height:auto;border-radius:24px;box-shadow:0 16px 42px rgba(21,33,52,.10)}
.about-page .family-card{position:absolute;left:-18px;bottom:-22px;width:220px;background:#fff;border-radius:20px;padding:10px;box-shadow:0 12px 28px rgba(21,33,52,.12);border:1px solid rgba(0,0,0,.05)}
.about-page .family-card img{width:100%;height:auto;border-radius:12px}
.about-page .family-card p{font-size:.82rem;color:#5f6b76;margin:.55rem 0 0 0}
.about-page .cred-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.about-page .cred-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#f3f7fa;border:1px solid rgba(0,0,0,.05);color:#5f6b76;font-size:.82rem;font-weight:700}
.about-page .middle-copy{max-width:820px;margin:0 auto}
.about-page .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.about-page .value-card{background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.05);padding:22px;box-shadow:0 8px 22px rgba(21,33,52,.05);transition:all .18s ease}
.about-page .value-card:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(21,33,52,.10)}
.about-page .value-card p{color:#5f6b76;margin-bottom:0}
.about-page .quote-band{background:#fff;border-radius:22px;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 22px rgba(21,33,52,.05);padding:24px;max-width:900px;margin:28px auto 0;position:relative}
.about-page .quote-band:before{content:"\201C";position:absolute;left:16px;top:8px;font-size:44px;line-height:1;color:#d4edf9;font-weight:900}
.about-page .quote-band p{margin:10px 0 0 0;color:#334454;font-weight:600}
.about-page .quote-band .attrib{margin-top:10px;color:#5f6b76;font-size:.92rem;font-weight:700}
.about-page .bottom-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.about-page .focus-list{color:#5f6b76}
.about-page .focus-list li{margin:.28rem 0}
.about-page .pill-row{justify-content:flex-start}

/* ── Logo Carousel ──────────────────────────────────────────────────── */

/* Outer wrapper: clips the scroll and applies the edge-fade mask */
.logo-carousel-outer {
  overflow: hidden;
  margin-top: 28px;
  padding: 14px 0; /* shadow on hover extends ~12px above/below card — fits within 14px */
  /* Fade at 8% from each edge of the container — carousel is now inside .container */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Scrolling track — contains two identical sets of logos */
.logo-carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: logo-scroll 34s linear infinite;
}

/* Pause on hover (optional UX nicety) */
.logo-carousel-track:hover {
  animation-play-state: paused;
}

/* Each logo tile */
.logo-carousel-item {
  flex: 0 0 auto;
  width: 172px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, .06);
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(21, 33, 52, .05);
  transition: all .18s ease;
}
.logo-carousel-item:hover {
  transform: translateY(-2px);
  /* Tighter shadow sized to fit inside the 14px padding of logo-carousel-outer */
  box-shadow: 0 4px 16px rgba(21, 33, 52, .13);
}

/* ── Logo image styles (active once real logos are dropped in) ── */
.logo-carousel-item img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  display: block;
  /* Converts any logo to the site blue (#00AEEF).
     Works best on dark logos against transparent backgrounds.
     For a neutral gray instead, swap this for:
       filter: brightness(0) saturate(0) opacity(0.45);
  */
  filter: brightness(0) saturate(100%)
          invert(54%) sepia(96%) saturate(1200%)
          hue-rotate(163deg) brightness(104%);
}

/* ── Text placeholder styles (remove once real logos are in) ── */
.logo-carousel-item span {
  color: #6d737a;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* ── Scroll keyframe: translate exactly -50% to loop Set 1 → Set 2 ── */
@keyframes logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Accessibility: no animation for users who prefer reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0 24px;
  }
  /* Hide the duplicate set when not scrolling */
  .logo-carousel-item[aria-hidden="true"] {
    display: none;
  }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .about-page .intro-wrap,
  .about-page .bottom-wrap { grid-template-columns: 1fr }
}

@media (max-width: 820px) {
  .logo-carousel-item {
    width: 140px;
    height: 64px;
    padding: 10px 14px;
  }
  .logo-carousel-item img {
    max-height: 36px;
  }
  .logo-carousel-item span {
    font-size: .74rem;
  }
  .about-page .values-grid { grid-template-columns: 1fr }
  .about-page .family-card { position: relative; left: auto; bottom: auto; width: min(240px, 85%); margin: 16px auto 0 }
}

@media (max-width: 820px) {
  .about-page .intro-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-page .about-visual {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 0;
  }

  .about-page .about-visual .main-image {
    width: 100%;
    height: auto;
    border-radius: 24px;
  }

  /* Stack family card below the office photo on mobile instead of overlapping */
  .about-page .family-card {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(300px, 88%);
    margin: 16px auto 0;
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(21,33,52,.10);
  }

  .about-page .family-card img {
    border-radius: 12px;
  }

  .about-page .family-card p {
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 8px;
  }

  .about-page .bottom-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 820px) {
  .badge-row {
    justify-content: center;
  }

  .badge {
    font-size: .85rem;
    padding: 8px 14px;
  }
}