/* ==========================================================================
   Astons — «Лента команды» (team strip). Source: designer package astons-com-team-strip.
   All sizes in rem: on astons.com 1rem = 10px in the 1440 / 768 / 375 mockups
   (html font-size is vw-based, so the block scales with the site).
   Breakpoints as on astons.com: desktop ≥1200, tablet 768–1199, mobile ≤767.
   ========================================================================== */

.ts {
  --ts-red: #C8102E;
  --ts-ink: #1D1D20;
  --ts-muted: #7C8289;
  --ts-muted-2: #A0A7BB;
  --ts-line: #DEDEE3;
  --ts-line-2: #C3C6CC;
  --ts-gray: #F2F4F9;
  --ts-white: #FFFFFF;
  --ts-bg: var(--ts-white);
  --ts-r1: 34rem; --ts-r2: 25rem; --ts-r3: 23rem;
  --ts-gap: 1.6rem;
  --ts-pad: 3.2rem;
  --ts-offset: max(var(--ts-pad), calc((100% - 128rem) / 2));
  --ts-ease: cubic-bezier(.22, .61, .36, 1);

  margin: 0;
  padding: 14rem 0;
  overflow: hidden;
  background: var(--ts-bg);
  color: var(--ts-ink);
  font-family: inherit;
}
.ts--gray { --ts-bg: var(--ts-gray); }
.ts--white { --ts-bg: var(--ts-white); }
.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts [hidden] { display: none !important; }
.ts__container { width: 100%; max-width: 134.4rem; margin: 0 auto; padding: 0 var(--ts-pad); }

/* ---------- Header ---------- */
.ts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; }
.ts .ts__tag { display: flex; align-items: center; gap: .8rem; margin: 0; padding: 0; font-family: inherit; font-size: 1.4rem; font-weight: 400; line-height: 1.4; letter-spacing: .2rem; text-transform: uppercase; color: var(--ts-red); }
.ts__tag img { flex: none; width: 1.6rem; height: 1.6rem; }
.ts .ts__title { margin: 2.4rem 0 0; padding: 0; font-family: inherit; font-size: 6.4rem; font-weight: 400; line-height: 1.2; letter-spacing: -.1rem; text-transform: none; text-wrap: balance; color: var(--ts-ink); }
.ts--compact .ts__title { font-size: 4.8rem; }
.ts .ts__lead { margin: 2.4rem 0 0; max-width: 56rem; font-size: 1.6rem; line-height: 1.5; color: var(--ts-muted); }

.ts__nav { display: flex; flex: none; align-items: center; gap: 1.6rem; }
.ts__counter { margin: 0 7.2rem 0 0; font-size: 1.6rem; line-height: 1.4; color: var(--ts-muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts__counter b { font-weight: 400; color: var(--ts-ink); }
.ts .ts__arrow { display: grid; place-items: center; width: 5rem; height: 5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ts-ink); box-shadow: inset 0 0 0 1px var(--ts-line-2); cursor: pointer; transition: box-shadow .18s var(--ts-ease); }
.ts .ts__arrow:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ts-ink); }
.ts__arrow:focus-visible { outline: 2px solid var(--ts-red); outline-offset: 2px; }
.ts__arrow svg { width: 4rem; height: 4rem; }

/* ---------- Strip ---------- */
.ts__strip { margin-top: 5.6rem; padding-left: var(--ts-offset); overflow: hidden; touch-action: pan-y; outline: none; }
.ts__strip:focus-visible { outline: 2px solid var(--ts-red); outline-offset: 4px; }
.ts.is-enhanced .ts__strip { cursor: grab; user-select: none; -webkit-user-select: none; }
.ts__strip.is-dragging { cursor: grabbing; }
.ts__strip.is-dragging .ts__item { pointer-events: none; }
.ts--compact .ts__strip { margin-top: 4rem; }

/* Without JS: one scrollable row. With JS: rows are built by team-feed.js */
.ts .ts__items { display: flex; gap: var(--ts-gap); margin: 0; padding: 0 var(--ts-pad) 0 0; list-style: none; overflow-x: auto; }
.ts__items .ts__item { height: var(--ts-r1); }
.ts__rows { display: flex; flex-direction: column; gap: var(--ts-gap); }
.ts__row { display: flex; gap: var(--ts-gap); width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.ts__row[data-row="1"] .ts__item { height: var(--ts-r1); }
.ts__row[data-row="2"] .ts__item { height: var(--ts-r2); }
.ts__row[data-row="3"] .ts__item { height: var(--ts-r3); }

.ts .ts__item { position: relative; flex: none; display: block; aspect-ratio: var(--ar); margin: 0; padding: 0; border-radius: .8rem; overflow: hidden; background: var(--ts-line); list-style: none; }
.ts .ts__item::before, .ts .ts__item::marker { content: none; }
.ts__open { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: zoom-in; -webkit-user-drag: none; }
.ts__item--film { cursor: pointer; }
.ts .ts__item img, .ts .ts__item video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; }
.ts__open:focus-visible, .ts__item--film:focus-visible { outline: 2px solid var(--ts-red); outline-offset: -3px; }
.ts__cap { position: absolute; left: 1.6rem; bottom: 1.6rem; display: inline-flex; align-items: center; height: 3rem; padding: 0 1.2rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: .8rem; background: rgba(3, 7, 17, .32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 1.4rem; line-height: 1; color: var(--ts-white); white-space: nowrap; max-width: calc(100% - 3.2rem); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* Hover: the photo zooms slightly and follows the cursor (team-feed.js sets --px) */
.ts__item img, .ts__item video { --px: 0px; transform: translate3d(var(--px), 0, 0) scale(var(--ps, 1)); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.ts__item.is-panning img, .ts__item.is-panning video { --ps: 1.08; }

/* ---------- Figures ---------- */
.ts .ts__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 5.6rem 0 0; padding: 0; border-top: 1px solid var(--ts-line); list-style: none; }
.ts .ts__stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts .ts__stat { margin: 0; padding: 2.8rem 2.4rem 0 0; list-style: none; }
.ts .ts__stat::before, .ts .ts__stat::marker { content: none; }
.ts .ts__stat + .ts__stat { padding-left: 2.4rem; border-left: 1px solid var(--ts-line); }
.ts__stat b { display: block; font-size: 4.8rem; font-weight: 400; line-height: 1; letter-spacing: -.15rem; white-space: nowrap; color: var(--ts-ink); }
.ts__stat span { display: block; margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.4; color: var(--ts-muted); }

/* ---------- Figures + "Meet the whole team" link (programs) ---------- */
.ts__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; }
.ts__foot .ts__stats { flex: 1; }
.ts .ts__link { flex: none; display: inline-flex; align-items: center; gap: .8rem; margin-top: 3.2rem; padding-bottom: .3rem; font-size: 1.6rem; font-weight: 700; line-height: 1.4; color: var(--ts-ink); text-decoration: none; background-image: linear-gradient(90deg, currentColor 50%, transparent 50%); background-size: .4rem 1px; background-repeat: repeat-x; background-position: 0 100%; transition: color .18s; }
.ts .ts__link:hover { color: var(--ts-red); }
.ts__link svg { width: 1.6rem; height: 1.6rem; }

/* ---------- Offices (plain list, no panels) ---------- */
.ts__offices { margin-top: 5.6rem; }
.ts .ts__caps { margin: 0; font-size: 1.4rem; line-height: 1.4; letter-spacing: .2rem; text-transform: uppercase; color: var(--ts-muted); }
.ts .ts__chips { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ts .ts__chip { display: inline-flex; align-items: center; gap: .8rem; height: 4.4rem; margin: 0; padding: 0 1.8rem; border-radius: 99rem; background: var(--ts-white); box-shadow: inset 0 0 0 1px var(--ts-line); font-size: 1.6rem; line-height: 1; color: var(--ts-ink); white-space: nowrap; list-style: none; }
.ts .ts__chip::before, .ts .ts__chip::marker { content: none; }
.ts .ts__chip-note { font-style: normal; font-size: 1.2rem; color: var(--ts-red); }

/* ---------- Lightbox (native dialog) ---------- */
.ts-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 4.8rem 8rem; border: 0; background: rgba(3, 7, 17, .86); color: #fff; overflow: hidden; }
.ts-lb[open] { display: grid; place-items: center; }
.ts-lb::backdrop { background: transparent; }
.ts-lb img { max-width: 100%; max-height: calc(100vh - 12rem); border-radius: .8rem; object-fit: contain; }
.ts-lb .ts-lb__btn { position: absolute; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.ts-lb .ts-lb__btn:hover { background: #fff; color: var(--ts-ink); }
.ts-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ts-lb__btn svg { width: 4rem; height: 4rem; }
.ts-lb__prev { left: 2.4rem; top: 50%; transform: translateY(-50%); }
.ts-lb__next { right: 2.4rem; top: 50%; transform: translateY(-50%); }
.ts-lb__close { right: 2.4rem; top: 2.4rem; }
.ts-lb .ts-lb__count { position: absolute; left: 50%; bottom: 2.4rem; margin: 0; transform: translateX(-50%); font-size: 1.4rem; color: rgba(255, 255, 255, .8); }
html.ts-lb-open { overflow: hidden; }

/* ==========================================================================
   View modifiers: row heights (desktop)
   full (About, Offices, Community) — 2 rows 340 / 250
   short (Home)                     — 2 rows 280 / 200
   compact (programs)               — 2 rows 300 / 220
   + one (Türkiye, Dubai)           — 1 row 320; tablet 260; mobile 2 rows 150/150
   + two (Home, other programs)     — tablet 2 rows 260/200 instead of 3
   ========================================================================== */
.ts--short   { --ts-r1: 28rem; --ts-r2: 20rem; }
.ts--compact { --ts-r1: 30rem; --ts-r2: 22rem; }
.ts--one     { --ts-r1: 32rem; }

/* ========================= Tablet 768–1199 ========================= */
@media screen and (max-width: 1199px) {
  .ts { --ts-r1: 23rem; --ts-r2: 19rem; --ts-r3: 23rem; }
  .ts--short, .ts--compact { --ts-r1: 23rem; --ts-r2: 19rem; }
  .ts--two { --ts-r1: 26rem; --ts-r2: 20rem; }
  .ts--one { --ts-r1: 26rem; }
  .ts__head { flex-direction: column; align-items: stretch; gap: 3.2rem; }
  .ts__nav { justify-content: flex-end; }
  .ts__counter { margin-right: auto; }
  .ts__strip, .ts--compact .ts__strip { margin-top: 4rem; }
  .ts .ts__stats, .ts .ts__stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4rem; }
  .ts .ts__stat { padding: 2.2rem 1.6rem 2.2rem 0; }
  .ts .ts__stat + .ts__stat { padding-left: 0; border-left: 0; }
  .ts .ts__stat:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--ts-line); }
  .ts .ts__stat:nth-child(n+3) { border-top: 1px solid var(--ts-line); }
  .ts .ts__stats--3 .ts__stat:nth-child(3) { grid-column: 1 / -1; }
  .ts__foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .ts__foot .ts__stats { width: 100%; }
}

/* ========================= Mobile ≤767 ========================= */
@media screen and (max-width: 767px) {
  .ts { --ts-pad: 1.6rem; --ts-gap: 1rem; --ts-r1: 17rem; --ts-r2: 14rem; --ts-r3: 17rem; padding: 8.8rem 0; }
  .ts--short, .ts--compact { --ts-r1: 17rem; --ts-r2: 14rem; }
  .ts--one { --ts-r1: 15rem; --ts-r2: 15rem; }
  .ts .ts__tag { font-size: 1.2rem; letter-spacing: .1rem; }
  .ts .ts__title, .ts--compact .ts__title { margin-top: 1.6rem; font-size: 4rem; }
  .ts .ts__lead { margin-top: 1.6rem; }
  .ts .ts__nav { display: none; }
  .ts__strip, .ts--compact .ts__strip { margin-top: 2.8rem; }
  .ts__cap { left: 1rem; bottom: 1rem; height: 2.6rem; padding: 0 1rem; font-size: 1.2rem; }
  .ts__stat b { font-size: 3.4rem; }
  .ts__stat span { font-size: 1.4rem; }
  .ts__offices { margin-top: 4rem; }
  .ts .ts__caps { font-size: 1.2rem; letter-spacing: .1rem; }
  .ts .ts__chips { gap: .8rem; }
  .ts .ts__chip { height: 4rem; padding: 0 1.4rem; font-size: 1.5rem; }
  .ts-lb { padding: 6rem 1.6rem; }
  .ts-lb .ts-lb__prev, .ts-lb .ts-lb__next { display: none; }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .ts__item img, .ts__item video { transform: none !important; transition: none; }
}

/* ---------- Boundaries with neighbouring sections ----------
   The homepage trust block formerly overlapped the next case-study wrapper.
   The strip is a full section, so that overlap and the following spacer no longer apply. */
.main__info:has(+ .astons-team-feed) { margin-bottom: 0; }
.astons-team-feed + .gray__block { margin-top: 0; }