/* ════════════════════════════════════════════════════════════
   about-enhance.css — premium upgrades for the About page.
   Founder portrait, client work strip, count-up stats, glow polish.
   Dark/vibrant brand, easy on the eyes.
   ════════════════════════════════════════════════════════════ */

/* ── Founder: real portrait beside the bio ── */
.about-people-grid { display: block; }

.about-founder {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.6);
}
.about-founder__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #2a1f5c 0%, #120e2c 55%, #0a0820 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 50px -14px rgba(124, 92, 240, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.about-founder__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: grayscale(0.25) contrast(1.04);
  transition: filter 0.55s ease, transform 0.7s cubic-bezier(.22,1,.36,1);
}
.about-founder__photo:hover img { filter: none; transform: scale(1.04); }
.about-founder__body { display: flex; flex-direction: column; gap: 0.85rem; }

@media (max-width: 760px) {
  .about-founder { grid-template-columns: 1fr; }
  .about-founder__photo { max-width: 320px; margin-inline: auto; }
}

/* ── Client work strip ── */
.about-clients { margin-top: clamp(2rem, 5vw, 3.5rem); }
.about-clients__label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.1rem;
}
.about-clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}
.about-client {
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.about-client__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.about-client__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
.about-client__name {
  padding: 0.6rem 0.85rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}
.about-client:hover {
  transform: translateY(-4px);
  border-color: rgba(120,150,255,0.4);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,0.6), 0 0 26px -8px rgba(99,139,255,0.35);
}
.about-client:hover .about-client__media img { transform: scale(1.06); }

/* ── Glow polish (consistency with the homepage) ── */
.page-hero__title, .page-section__title { text-shadow: 0 0 36px rgba(130,195,255,0.16); }
.about-stat__num { text-shadow: 0 0 30px var(--accent, rgba(130,195,255,0.4)); }
.about-stat { transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease; }
.about-stat:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -22px rgba(0,0,0,0.6), 0 0 28px -10px var(--accent); }
.about-story-grid .about-card,
.about-principle,
.about-step { transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease; }
.about-story-grid .about-card:hover,
.about-principle:hover,
.about-step:hover { transform: translateY(-3px); }

/* ── Scroll-DRIVEN horizontal rows (story + clients).
   No manual scrollbar: the row translates with page scroll (GSAP in
   about-enhance.js). The content column clips the overflow. ── */
/* Each pinned wrapper clips its OWN row — a pinned element becomes
   position:fixed and would otherwise escape an ancestor's clip. */
.about-section .page-section__inner { overflow-x: clip; }
.about-clients { overflow-x: clip; }

.about-story-grid {
  display: flex; flex-wrap: nowrap; gap: 1.1rem;
  overflow: visible;
  padding: 0 clamp(1.5rem, 5vw, 4rem) 0.5rem 0;  /* trailing space so the last card fully clears */
  will-change: transform;
}
.about-story-grid > .about-card { flex: 0 0 clamp(280px, 30vw, 400px); }

.about-clients__grid {
  display: flex; flex-wrap: nowrap; gap: 1.1rem;
  grid-template-columns: none;
  overflow: visible;
  padding-right: clamp(1.5rem, 5vw, 4rem);
  will-change: transform;
}
.about-client { flex: 0 0 clamp(250px, 24vw, 330px); }
.about-client__media { aspect-ratio: 16 / 11; }
.about-client__name { font-size: 0.8rem; padding: 0.8rem 1.05rem; }

/* ── Let titles & paragraphs fill the line (no premature wrapping) ── */
.page-hero__title, .page-section__title, .page-section__head { max-width: none; }
.page-hero__desc, .page-section__desc { max-width: min(80ch, 100%); }
.about-card__body, .about-principle p, .about-step__desc, .about-founder__body p { max-width: none; }