/* Composition imported from SITE; all selectors namespaced for the landing. */
.imported-about {
  --bg:#040100; --text:#fff; --muted:#797c95; --accent-a:#ca2115; --accent-b:#b56e55;
  --u:calc(100vw / 1886); --ab-h:calc(1060 * var(--u)); --ab-top:max(0px,calc((calc(100 * var(--lvh)) - var(--ab-h)) / 2));
  position:relative; z-index:0; background:transparent;
}
.ab-flow { position:relative; z-index:1; }
.ab-el[data-depth] { will-change:transform; }
@keyframes ab-parallax { from { transform:translate3d(0,var(--par-from,0px),0); } to { transform:translate3d(0,var(--par-to,0px),0); } }
@supports (animation-timeline: scroll()) {
  .has-css-parallax .ab-el[data-depth] { animation:ab-parallax linear both; animation-timeline:scroll(root block); }
}
.ab-title__cap { font-style:normal; }
.imported-about h2,.imported-about p,.imported-about ul,.imported-about figure { margin:0; }
.imported-about ul { padding:0; list-style:none; }
.imported-about img { display:block; max-width:100%; }
.ab-photo__mask { transition:clip-path 1.3s cubic-bezier(.76,0,.24,1); }
.ab-photo__mask img { transition:transform 1.7s cubic-bezier(.22,1,.36,1); transform:scale(1.18); }
.ab-photo.is-revealed .ab-photo__mask { clip-path:inset(0); }
.ab-photo.is-revealed .ab-photo__mask img { transform:scale(1); }
/* ---------------------------------------------------------------- page flow
   Sections are ordinary blocks that scroll over the fixed 3D layer.
   Each artboard keeps Figma coordinates; --h is its height in Figma px (frame 1060 + overflowing copy). */

.ab-screen { position: relative; padding-top: var(--ab-top); }
.ab-screen--why { --h: 1240; }
.ab-screen--who { --h: 1400; padding-bottom: calc(12 * var(--lvh)); }
.ab-transit { position: relative; height: calc(65 * var(--lvh)); }
.ab-artboard { position: relative; width: 100%; height: calc(var(--h) * var(--u)); }

.ab-el { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); will-change: transform; }

/* ---------------------------------------------------------------- titles */
.ab-title { display: flex; align-items: baseline; font-weight: 400; white-space: nowrap; }
.ab-title__cap {
  flex: none;
  /* The swashes of the script capitals overhang their advance box (З: +54 right; К: +45 left, +167 right, Figma px).
     background-clip:text only paints inside the box, so the box is widened with padding and pulled back with margins. */
  box-sizing: content-box;
  --swash: 0.8em;
  width: calc(486.685 * var(--u));
  --lift: 0.65em;
  padding: var(--lift) var(--swash);
  margin: calc(-1 * var(--lift)) calc(-41 * var(--u) - var(--swash)) calc(-1 * var(--lift)) calc(-1 * var(--swash));
  font-family: var(--f-script);
  font-size: calc(418.353 * var(--u));
  line-height: normal;
  color: transparent;
  background-image: linear-gradient(29.49deg, var(--accent-a) 22.433%, var(--accent-b) 93.07%);
  -webkit-background-clip: text; background-clip: text;
}
.ab-title__rest {
  flex: none;
  font-family: var(--f-display);
  font-style: italic;
  font-size: calc(73.37 * var(--u));
  color: var(--text);
  white-space: normal;
}
.ab-title--why { --x: 450; --y: 290; }
.ab-title--why .ab-title__rest { width: calc(873.098 * var(--u)); line-height: 1.5; }
.ab-title--who { --x: 65; --y: -32; }      /* Figma: -94 (clipped by the frame); moved in so the «К» swash is fully on screen */
.ab-title--who .ab-title__rest { width: calc(426 * var(--u)); line-height: 1; }

/* ---------------------------------------------------------------- body copy */
.ab-text-about {
  --x: 1046; --y: 719;
  width: calc(357 * var(--u));
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  line-height: 1.4;
}
.ab-text-about span { display: block; }
.ab-text-about span + span { margin-top: 1.4em; }

.ab-lists {
  --x: 1046; --y: 680;
  display: flex; align-items: flex-start;
  font-size: calc(20 * var(--u));
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.ab-list { width: calc(357 * var(--u)); }
.ab-list li + li { margin-top: 1.5em; }
.ab-list--no { color: var(--muted); }

/* ---------------------------------------------------------------- photos: left-to-right reveal */
.ab-photo { width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); }
.ab-photo__mask { width: 100%; height: 100%; overflow: hidden; clip-path: inset(0 100% 0 0); }
.ab-photo__mask img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 50%; }
.ab-photo--a { --x: 240; --y: 74;  --s: 458; }
.ab-photo--b { --x: 1423; --y: 56; --s: 248; }
.ab-photo--c { --x: -33; --y: 805; --s: 354; }
.ab-photo--d { --x: -33; --y: 40; --s: 380; }   /* between the two headings, in the left corner */

/* ---------------------------------------------------------------- tablet / mobile composition */
@media (max-width: 900px) and (orientation: portrait) {
  .imported-about { --u: calc(100vw / 780); --ab-h: calc(100 * var(--lvh)); --ab-top: 0px; }
  .ab-screen--why { --h: 1560; }
  .ab-screen--who { --h: 1800; }

  .ab-title--why { --x: 40; --y: 520; }
  .ab-title--why .ab-title__rest { width: calc(420 * var(--u)); }
  .ab-title__cap { --swash: 0.8em; font-size: calc(300 * var(--u)); width: calc(330 * var(--u)); margin-right: calc(-40 * var(--u) - var(--swash)); }
  .ab-title__rest { font-size: calc(64 * var(--u)); }
  .ab-photo--a { --x: 40; --y: 90; --s: 340; }
  .ab-text-about { --x: 40; --y: 980; width: calc(640 * var(--u)); font-size: calc(26 * var(--u)); }

  .ab-title--who { --x: 55; --y: 40; }
  .ab-title--who .ab-title__rest { width: calc(400 * var(--u)); }
  .ab-lists { --x: 40; --y: 900; flex-direction: column; gap: 1.5em; font-size: calc(26 * var(--u)); }
  .ab-list { width: calc(640 * var(--u)); }
  .ab-photo--b { --x: 420; --y: 470; --s: 240; }
  .ab-photo--c { --x: 40; --y: 400; --s: 280; }
  .ab-photo--d { --x: -20; --y: 60; --s: 300; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-photo__mask { clip-path: none; }
}

@media(prefers-reduced-motion:reduce){.ab-photo__mask,.ab-photo__mask img{transition:none;transform:none}}

.ab-list__head { list-style: none; margin-bottom: 1.2em; font: 600 .6em/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ab-list--yes .ab-list__head { color: #ff004c; }
.ab-list li.ab-list__head + li { margin-top: 0; }