/* About — betaces-about-us-page (1440) / about-us-mobile (390). */

/* ── 02-editorial-hero ────────────────────────────────────────────────── */
.about-hero { display: flex; height: 800px; background: var(--color-brand); color: var(--color-cream); }
.about-hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 55.556%; flex: none; padding: var(--section-pad-y-sm) 48px var(--section-pad-y-sm) var(--section-gutter);
}
.about-hero__meta { display: grid; gap: var(--space-16); max-width: 672px; }
.about-hero__h {
  font-size: 100px; font-weight: 700; line-height: 90px; letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}
.about-hero__bottom { display: flex; align-items: flex-end; gap: var(--space-32); }
.about-hero__lede { max-width: 480px; font-size: var(--fs-body); line-height: 24px; }
/* Ссылки в строке под лидом не переносятся: в макете это одна строка. */
.about-hero__links { display: flex; gap: var(--space-24); flex: none; white-space: nowrap; }
.about-hero__link-light { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-cream); text-decoration: none; }
.about-hero__link-light:hover { color: var(--color-accent); }

.about-hero__imagery { position: relative; flex: 1; min-width: 0; }
.about-hero__watermark {
  position: absolute; left: 180px; top: 204px; z-index: 0; width: 280px; height: 392px;
  color: var(--color-cream); opacity: .12; pointer-events: none;
}
.about-hero__watermark .icon { width: 100%; height: 100%; }
.about-shot { position: absolute; z-index: 1; overflow: hidden; border-radius: var(--radius-sm); }
.about-shot img { width: 100%; height: 100%; object-fit: cover; }
.about-shot--a { left: 40px; top: 80px; width: 560px; height: 380px; }
.about-shot--b { left: 180px; top: 420px; width: 280px; height: 300px; }
/* image-meta 142x63 @400,120 внутри верхнего снимка: один тёмный блок, а не три
   отдельные плашки у правого края. */
.about-hero__tags {
  position: absolute; left: 400px; top: 120px; z-index: 2;
  display: grid; gap: var(--space-4); padding: var(--space-8);
  background: var(--color-ink); border-radius: var(--radius-sm);
}
.about-hero__tags span {
  font-size: var(--fs-micro); font-weight: 700; line-height: 13px; color: var(--color-cream);
}
.about-hero__tags span:first-child { font-weight: 800; color: var(--color-accent); }

/* ── 03-company-facts ─────────────────────────────────────────────────── */
.about-facts {
  display: grid; gap: 64px;
  padding: var(--section-pad-y) var(--container-pad); background: var(--color-cream);
}
.about-facts__head { display: grid; gap: var(--space-8); }
.about-facts__h {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 54px;
  text-transform: uppercase; color: var(--color-ink);
}
/* The facts grid is drawn 284px tall — two rows with air between them. */
/* facts-grid: две строки по две ячейки, волосяные линии по строкам и между
   колонками; значения 44px, подписи 11px под ними. */
.about-facts__grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; min-height: 284px; }
.about-fact {
  display: grid; gap: var(--space-8); align-content: start;
  padding: var(--space-24) var(--space-24) var(--space-24) 0;
  box-shadow: inset 0 1px 0 var(--color-border);
}
.about-fact:nth-child(odd) { box-shadow: inset 0 1px 0 var(--color-border), inset -1px 0 0 var(--color-border); }
.about-fact:nth-child(even) { padding-left: var(--space-24); }
.about-fact__value {
  margin: 0;
  font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 48px;
  color: var(--color-ink);
}
.about-fact__label { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }

/* ── 06-what-we-offer ─────────────────────────────────────────────────── */
.about-offer {
  display: grid; gap: 64px;
  padding: var(--section-pad-y) var(--container-pad); background: var(--color-cream);
  box-shadow: inset 0 1px 0 var(--color-border);
}
.about-offer__head { display: grid; gap: var(--space-8); max-width: 788px; }
.about-offer__h {
  margin-top: var(--space-8);
  font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 56px;
  text-transform: uppercase; color: var(--color-ink);
}
.about-offer__lede { font-size: 16px; line-height: 21px; color: var(--color-muted); }

/* Модули разной ширины: 828 синий + 420 кремовый, ниже лаймовая полоса. */
.about-offer__modules {
  display: grid; grid-template-columns: 828fr 420fr; gap: var(--space-32);
}
.offer-module {
  display: grid; gap: var(--space-24); align-content: start;
  padding: var(--space-40); background: var(--color-cream-2); border-radius: var(--radius-sm);
}
.offer-module__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-24); }
.offer-module__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 54px; color: var(--color-brand); }
.offer-module__h {
  font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 32px;
  text-transform: uppercase; color: var(--color-ink);
}
.offer-module__note { font-size: var(--fs-body); line-height: 22px; color: var(--color-muted); }
.offer-module__link {
  font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px;
  color: var(--color-brand); text-decoration: none;
}
.offer-module__link:hover { text-decoration: underline; }
.offer-module__media { margin: 0; height: 280px; overflow: hidden; border-radius: var(--radius-sm); }
/* Снимки квадратные (1024x1024), окно широкое — кадрируем по центру, как FILL
   в макете: именно так в кадр попадает поле, а не одно небо над трибунами. */
.offer-module__media img { width: 100%; height: 100%; object-fit: cover; }

.offer-module--sports { background: var(--color-brand); }
.offer-module--sports .offer-module__num,
.offer-module--sports .offer-module__link { color: var(--color-accent); }
.offer-module--sports .offer-module__h,
.offer-module--sports .offer-module__note { color: var(--color-cream); }

.offer-module--racing { background: var(--color-cream-2); }
.offer-module--wide {
  grid-column: 1 / -1; gap: var(--space-32); min-height: 297px; background: var(--color-accent);
}
.offer-module--wide .offer-module__num { color: var(--color-brand); }
.offer-module--wide .offer-module__note { color: var(--color-ink); font-size: 16px; line-height: 24px; }

/* timeline-container: три стадии, между ними синие линии, средняя с плашкой.
   Линии — псевдоэлементы стадий, чтобы ряд оставался резиновым. */
.offer-stages { display: flex; align-items: flex-end; gap: var(--space-32); padding-block: var(--space-24) 0; }
.offer-stage { display: grid; gap: var(--space-8); justify-items: start; }
.offer-stage--now { justify-items: center; }
.offer-stage:last-child { justify-items: end; }
/* Соединитель: занимает весь свободный зазор, сама линия внутри — 160, как в макете. */
.offer-rule { flex: 1; display: flex; justify-content: center; padding-bottom: 11px; }
.offer-rule::before { content: ""; width: 160px; height: 1px; background: var(--color-brand); }
.offer-stage span { font-size: var(--fs-meta); font-weight: 700; line-height: 16px; color: var(--color-ink); }
.offer-stage .offer-stage__tag {
  padding: 4px var(--space-8); border-radius: var(--radius-sm);
  background: var(--color-brand); color: var(--color-cream);
  font-size: var(--fs-micro); font-weight: 800; line-height: 13px;
}
.offer-stage b { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 22px; color: var(--color-ink); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .about-hero { flex-direction: column; height: auto; }
  .about-hero__left { width: auto; gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .about-hero__h { font-size: 44px; line-height: 44px; }
  .about-hero__bottom { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .about-hero__lede { max-width: none; font-size: var(--fs-ui); line-height: 20px; }

  .about-hero__imagery { width: auto; flex: none; height: 420px; }
  .about-hero__watermark { display: none; }
  .about-shot--a { left: var(--container-pad-mobile); right: var(--container-pad-mobile); top: 0; width: auto; height: 240px; }
  .about-shot--b { display: none; }
  .about-hero__tags { right: var(--container-pad-mobile); bottom: var(--space-24); }

  .about-facts, .about-offer { gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .about-facts__grid { min-height: 0; }
  .about-offer__modules { grid-template-rows: none; }
  .offer-module--wide { min-height: 0; }
  .about-facts__h, .about-offer__h { font-size: var(--fs-h5); line-height: 38px; }
  .about-facts__grid { grid-template-columns: 1fr 1fr; }
  .about-fact { padding: var(--space-16) var(--space-16) var(--space-16) 0; }
  .about-fact__value { font-size: var(--fs-title); line-height: 27px; }
  .about-fact__value--sm { font-size: var(--fs-body-sm); line-height: 20px; }
  .about-offer__lede { font-size: var(--fs-ui); line-height: 20px; }
  .about-offer__modules { grid-template-columns: 1fr; gap: var(--space-16); }
  .offer-module { padding: var(--space-20); gap: var(--space-12); }
  .offer-module__h { font-size: var(--fs-h6); line-height: 30px; }
  .offer-module__note { font-size: var(--fs-ui); line-height: 20px; }
  /* На узком экране стадии идут столбиком, соединители не нужны. */
  .offer-stages { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .offer-stage, .offer-stage--now, .offer-stage:last-child { justify-items: start; }
  .offer-rule { display: none; }
}