/* ==========================================================================
   Page: About Us (Figma 1841:6205) — token-based
   ========================================================================== */

/* Hero removed — now the shared template-parts/hero (.site-hero, hero.css). */

/* ── 2. The Dragster Effect ──────────────────────────────────────────────── */
.dragster-effect {
  background: var(--bg-secondary);
  color: var(--text-light);
  padding-block: var(--section-py);
}
.dragster-effect__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 60px;
}
.dragster-effect__title {
  margin: 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text-light);
}
.dragster-effect__lead {
  margin: 0;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--text-light);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 430px;
  padding: 40px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
}
.stat-card__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.stat-card__number {
  font-size: 100px;
  line-height: 1.1;
  letter-spacing: -0.1em;   /* Figma: -10% on the digits */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;   /* Figma pins the airier text cut */
  color: var(--text-light);
}
/* Figma eases the comma to -3% so 9,2 doesn't pinch */
.stat-card__comma { letter-spacing: -0.03em; }
.stat-card__unit {
  font-size: var(--body-sm);
  color: var(--text-light);
}
.stat-card__info { width: 100%; }
.stat-card__name {
  margin: 0;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--text-light);
}
.stat-card__desc {
  margin: 0;
  font-size: var(--body-xs);
  line-height: 22px;
  color: var(--text-light);
}

.dragster-effect__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 320px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 15px;
  background: rgba(255,255,255,0.1);
  font-size: var(--body-xs);
  color: var(--text-light);
}
.dragster-effect__source-logo { height: 18px; width: auto; }

/* ── 3 & 5. Text grids (reuse text-widget) — heading left, body right ─────── */
/* Section pads the TOP only; the widget owns the bottom (text-widget.css). */
.about-text { padding-top: 100px; padding-bottom: 0; }
.about-text .text-grid { display: grid; width: 100%; }
.about-text .tw-heading { grid-column: 1 / span 2; }
.about-text .tw-text    { grid-column: 3 / span 2; gap: 24px; }

/* Light lavender variant — e.g. the "barge" text section (text stays dark) */
.about-text--lavender { background: var(--bg-primary); }

/* ── 4. Image grid ───────────────────────────────────────────────────────── */
.about-images { padding-block: 0; }
.about-images__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 426px 462px;
  gap: 20px;
}
.about-images__big   { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.about-images__side  { grid-column: 4; grid-row: 1; }
.about-images__barge { grid-column: 3; grid-row: 2; }
.about-images__grid > div {
  border-radius: var(--radius-image);
  overflow: hidden;
}
.about-images__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 6. Clients (marquee) ────────────────────────────────────────────────── */
.clients {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text-light);
  padding-block: var(--section-py);
}
.clients__title {
  margin: 0 0 60px;
  max-width: 660px;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text-light);
}
.clients__rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.clients__marquee { overflow: hidden; }
.clients__track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: about-marquee 45s linear infinite;
}
.clients__track--rev { animation-direction: reverse; }
.clients:hover .clients__track { animation-play-state: paused; }
@keyframes about-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.clients__logo { flex-shrink: 0; }
.clients__logo img {
  height: 42px;
  width: auto;
  display: block;
}
/* Edge fades */
.clients::before,
.clients::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 138px;
  z-index: 1;
  pointer-events: none;
}
.clients::before { left: 0;  background: linear-gradient(90deg, var(--bg-secondary), transparent); }
.clients::after  { right: 0; background: linear-gradient(270deg, var(--bg-secondary), transparent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stat-cards          { grid-template-columns: repeat(2, 1fr); }
  .about-images__grid  { grid-template-rows: auto auto; }
  .about-images__big   { grid-column: 1 / span 4; grid-row: 1; aspect-ratio: 16/10; }
  .about-images__side  { grid-column: 1 / span 2; grid-row: 2; aspect-ratio: 4/3; }
  .about-images__barge { grid-column: 3 / span 2; grid-row: 2; aspect-ratio: 4/3; }


@media (max-width: 767px) {
  .dragster-effect__head { grid-template-columns: 1fr; }
  .stat-cards            { grid-template-columns: 1fr; }
  .stat-card             { min-height: auto; padding: 32px 24px; }
  .stat-card__number     { font-size: 64px; }
  .dragster-effect__source { width: 100%; max-width: 320px; }

  .about-text            { padding-top: 60px; padding-bottom: 0; }
  .about-text .tw-heading,
  .about-text .tw-text   { grid-column: 1 / span 4; }

  .about-images__grid    { grid-template-columns: 1fr; }
  .about-images__big,
  .about-images__side,
  .about-images__barge   { grid-column: 1; grid-row: auto; aspect-ratio: 16/10; }

  .clients__title        { margin-bottom: 32px; }
}
}