/* ---------------------------------------------------------------------------
 * Entry screens — the three pages a visitor lands on: / , /vacancies ,
 * /talent-pool. Design brief from the managing director, verbatim: restrained;
 * white ground with blue or black text; corporate blue and orange as accents
 * only, sparingly; modern, thin type. Nothing else.
 *
 * Loaded AFTER site.css and only on these pages, so the rest of the site keeps
 * the look it has. Nothing here is global.
 *
 * Thin type is not small type. Everything a person taps or types into obeys the
 * mobile floor: input text never below 16px (iOS zooms the page otherwise), and
 * every action at least 44px tall. A thin 16px reads as light; a 12px input reads
 * as a mistake.
 * --------------------------------------------------------------------------- */
/* The palette lives on :root, not on .entry. It used to be declared on the block itself,
   which was fine while everything that used it was inside that block. The bottom bar is
   not: it sits outside main.entry so the packer cannot take it apart, and there every
   --e-* resolved to nothing -- the primary door came out as white text on a white strip,
   and the bar's own rule lost its border. Declaring them once, higher up, is the fix that
   cannot come back. Variables cost nothing on pages that never read them. */
:root {
  --e-ink:   var(--navy);             /* corporate blue, used as the text colour */
  --e-ink-2: var(--entry-ink-2);      /* near-black for long copy */
  --e-mute:  var(--entry-mute);
  --e-line:  var(--entry-line);
  --e-accent:var(--gold);             /* orange: accents only, never a surface */
  --e-bg:    var(--white);
}
.entry {
  background: var(--e-bg);
  color: var(--e-ink-2);
  font-family: var(--lato), system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
/* width:100% -- не косметика. В ленте .e-wrap стал флекс-элементом с auto-полями, а такой
   элемент сжимается по содержимому: первый слайд (заголовок в 20ch и лид в 66ch) выходил
   870px и вставал по центру, а второй и третий с их сетками -- полные 1080px. Текст
   прыгал по горизонтали при каждом перелистывании на сотню пикселей, и «выровнять кнопки
   по левому краю текста» не имело однозначного ответа. Теперь край один на всех слайдах.
   Полоса внизу использует тот же контейнер и поэтому совпадает с ним при любой ширине. */
.entry .e-wrap,
.e-bar .e-wrap { max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 2.4rem; }

/* ── opening ─────────────────────────────────────────────────────────────── */
/* The first screen fills the window and stops there; everything else is below the fold.
 *
 * min-height, never height: on a short window the heading, the lede and the two doors
 * are taller than the viewport, and a fixed height would put the doors past the bottom
 * edge with no way to reach them. With a minimum, the screen grows instead.
 *
 * dvh, not vh: on a phone vh is the height with the browser's address bar hidden, so a
 * 100vh block is taller than what you can actually see while the bar is showing, and the
 * bottom of it -- the doors -- sits under the chrome. dvh follows the bar as it comes and
 * goes. vh first as the fallback for anything too old to know dvh.
 *
 * The header is position:fixed, so the window's usable height is the viewport minus the
 * header; --hdr-h is kept current by site.js. The rem fallback covers no-JS. */
.entry .e-hero {
  margin-top: var(--hdr-h, 8rem);
  min-height: calc(100vh  - var(--hdr-h, 8rem));
  min-height: calc(100dvh - var(--hdr-h, 8rem));
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  padding: 4rem 0 8rem;
  border-bottom: 1px solid var(--e-line);
}
/* .e-more and its cue arrow were retired with the "next" link on 10.09.2026: the deck
   shows the way with its own controls. Rules removed rather than left dangling -- a
   selector nothing matches is a trap for the next person reading this sheet. */
.entry h1.e-h1 {
  font-family: var(--kanit), sans-serif; font-weight: 300; color: var(--e-ink);
  font-size: clamp(3.6rem, 6vw, 6.4rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 2.8rem; max-width: 20ch;
}
/* One word in gold, and the browser's italic put back to normal -- an em is emphasis
   here, not a slant. The section headings share the declaration rather than copying it:
   they are meant to be the same accent as the first screen's, and a second rule with its
   own colour is exactly how two "same" things drift apart. Without this the em in an h2
   renders rgb(0,33,91) italic -- navy and slanted, which reads as a bug, not an accent. */
.entry h1.e-h1 em,
.entry .e-h2 em { font-style: normal; color: var(--e-accent); }
.entry .e-lede {
  font-size: 1.9rem; line-height: 1.65; font-weight: 300; color: var(--e-ink-2);
  max-width: 68ch; margin: 0 0 3.6rem;
}

/* ── the page as slides ──────────────────────────────────────────────────── */
/* ══ THE HOME PAGE MOVES SIDEWAYS ═════════════════════════════════════════
 * Vertical scroll-snap and the one-screen-per-gesture stepper were replaced on
 * 10.09.2026 by the owner's decision: the blocks now travel left/right and cross-fade,
 * with autoplay. What that means structurally:
 *
 *   - the slides are stacked, not laid in a row. Only the active one is opaque; the rest
 *     keep their layout box and are hidden with visibility, NEVER display:none -- the
 *     packer in entry.js measures them, and a display:none block measures zero.
 *   - the deck is exactly the strip between the fixed header and the footer, so nothing
 *     inside a slide ever needs its own scrollbar.
 *   - the footer is pinned to the bottom of the window on this page only. Every other
 *     page keeps an ordinary footer in the flow; the body class is what separates them.
 *
 * The floor if the script never runs: no .entry-deck class is added, the deck rules below
 * do not apply, and the page is an ordinary vertical document with three tall blocks. */

body.entry-deck { overflow: hidden; }

.entry-deck .entry {
  position: relative;
  height: calc(100dvh - var(--hdr-h, 8rem) - var(--e-bar-h, 84px) - var(--e-foot-h, 56px));
  margin-top: var(--hdr-h, 8rem);
  overflow: hidden;
}
.entry-deck .e-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--e-shift, 0));
  transition: opacity .85s ease, transform .85s ease, visibility 0s linear .85s;
}
.entry-deck .e-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; z-index: 1;
  transition: opacity .85s ease, transform .85s ease, visibility 0s;
}
/* Last resort: one indivisible block taller than a very short window. */
.entry-deck .e-slide.is-over { justify-content: flex-start; overflow-y: auto; }

.entry-deck .e-slide-in { width: 100%; }
/* The blocks were written to stack vertically: each reserves the header's height, fills
   the window and draws a rule under itself to separate it from the next one. In the deck
   each block IS a screen -- the rule became a stray line across an empty half-screen, and
   the reserved header height pushed the composition off centre inside a box that already
   centres it. All four declarations are neutralised together; leaving one behind is what
   put the line on production for ten minutes. */
.entry-deck .e-slide-in > .e-hero,
.entry-deck .e-slide-in > .e-sec {
  min-height: 0; padding: 0; margin-top: 0; border-bottom: 0;
}


.entry-deck .e-cont {
  display: block; font-family: var(--kanit), sans-serif;
  font-size: 1.2rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--e-mute); margin: 0 0 1rem;
}

/* the footer becomes the bottom rule of the deck */
.entry-deck footer.site-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
}
.entry-deck .foot-row { padding-top: .8rem; padding-bottom: .8rem; }

/* ── controls: arrows, sheet counter, autoplay ──────────────────────────── */
/* Held back by a fifth (owner's decision, 10.09.2026): the controls are an offer, not
   the page. Opacity rather than paler colours -- one number moves the whole cluster and
   the border, the icon and the background cannot drift apart. Full strength on hover and
   on keyboard focus, where the thing being pointed at has to be legible. */
.e-nav {
  position: fixed; right: clamp(10px, 1.8vw, 26px); top: 50%;
  transform: translateY(-50%); z-index: 30;
  display: flex; flex-direction: column; gap: .8rem;
  opacity: .8; transition: opacity .18s;
}
.e-nav:hover, .e-nav:focus-within { opacity: 1; }
.e-nav-row { display: flex; gap: .8rem; }
.e-btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--rule);
  color: var(--e-ink); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
/* The icon spans are inline by default, which in a flex button means zero width: the
   pause glyph measured 0x0 and the button rendered as an empty box. The arrows had the
   opposite problem -- an svg with no size filled the button edge to edge. One rule for
   both. */
.e-btn > span { display: inline-flex; }
.e-btn svg { width: 2rem; height: 2rem; }
.e-btn:hover:not([disabled]) { border-color: var(--e-ink); }
.e-btn[disabled] { opacity: .3; cursor: default; }
.e-btn:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 3px; }
/* The pause is the same square as the arrows now that it stands between them. */
.e-btn.e-play { width: 44px; height: 44px; }
.e-prog {
  position: fixed; left: 0; height: 2px; width: 0;
  bottom: calc(var(--e-foot-h, 56px) + var(--e-bar-h, 84px));
  background: var(--e-accent); z-index: 21; transition: width .25s ease;
}

/* ── the bottom bar: the doors and the controls on one strip ──────────────
 * The two doors used to sit on the first screen. On a deck the first screen is one of
 * several, so a call to action there is a call to action for whoever never pages on.
 * They are pinned to the bottom now and the controls sit at the other end of the same
 * strip -- one element, so the two cannot drift apart when either changes height.
 * The strip's own height is measured into --e-bar-h by entry.js and taken out of the
 * deck's height above: the slides are what is left between the header and the bar. */
.e-bar {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: var(--e-foot-h, 56px);
  padding: 1.2rem 0;
  background: var(--white);
  border-top: 1px solid var(--e-line);
}
/* Внутренность полосы живёт в том же .e-wrap, что и содержимое слайда, поэтому левый
   край кнопок совпадает с левым краем текста при любой ширине окна. */
.e-bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  width: 100%;
}
.e-bar .e-doors { margin: 0; }
.e-bar .e-nav {
  position: static; transform: none; inset: auto;
  flex-direction: row; align-items: center;
}

/* On a phone the arrows go (owner's decision, 10.09.2026): a thumb swipes, and pinned
   above the footer they sat exactly where the hero's second door lands on a short window
   -- 360x560 put the button under them. The pause stays, because content that advances by
   itself has to be stoppable, and moves to the strip under the header, which is the one
   band on this page nothing else occupies. */
@media (max-width: 820px) {
  /* The pause leaves the bar and goes back under the header: the bar is the two doors
     here and nothing else, and a third control squeezed beside them takes width the
     buttons need. The arrows stay gone -- a thumb swipes. */
  .e-bar .e-nav {
    position: fixed;
    top: calc(var(--hdr-h, 8rem) + 8px); bottom: auto; right: 8px; left: auto;
    gap: 0;
  }
  .e-nav .e-nav-row { gap: 0; }
  .e-nav #ePrev, .e-nav #eNext { display: none; }
  .e-btn.e-play { width: 34px; height: 34px; }
  .e-btn svg { width: 1.6rem; height: 1.6rem; }

  /* THE FOOTER LEAVES THE PHONE (owner's decision, 10.09.2026) and what it carried moves
     into the menu at the top -- see .mm-foot in site.css. The bar becomes the bottom of
     the page, and the two doors share its width equally: side by side on one line. */
  .entry-deck footer.site-foot { display: none; }
  .e-bar { bottom: 0; padding: 1rem clamp(12px, 4vw, 20px); }
  /* Старое правило клало двери в столбик на узком экране -- оно писалось, когда они
     стояли в герое во всю ширину. В полосе они делят её пополам, поэтому направление
     задаётся здесь явно, а не наследуется. */
  .e-bar .e-doors { flex: 1; display: flex; flex-direction: row; align-items: stretch; gap: .8rem; }
  .e-bar .e-door { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    padding: 1.1rem .8rem; font-size: max(13px, 1.4rem); letter-spacing: .04em; }
}
/* Under reduce-motion the screens still change, they just cut instead of fading: this is
   where that request is honoured, not by stopping the deck. */
@media (prefers-reduced-motion: reduce) {
  .entry-deck .e-slide { transition: opacity .01s linear, visibility 0s linear .01s; transform: none; }
  .entry-deck .e-slide.is-active { transition: opacity .01s linear, visibility 0s; }
  .e-nav { transition: none; }
}

/* ── the two doors ───────────────────────────────────────────────────────── */
/* Селекторы дверей больше не привязаны к .entry: сами двери переехали в полосу внизу,
   которая лежит СНАРУЖИ ленты (иначе упаковщик растащил бы их по слайдам). Привязка к
   предку в этот момент молча обесточила все правила -- кнопки стали обычными ссылками. */
.e-doors { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.e-door {
  display: inline-flex; align-items: center; gap: 1.2rem;
  min-height: 56px; padding: 1.2rem 2.6rem;
  font-family: var(--kanit), sans-serif; font-size: 1.7rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--e-ink); border-radius: 2px; transition: .18s ease;
}
.e-door.primary { background: var(--e-ink); color: var(--white); }
.e-door.primary:hover { background: var(--navy-d); }
.e-door.ghost { background: transparent; color: var(--e-ink); }
.e-door.ghost:hover { background: var(--e-ink); color: var(--white); }
.e-door .e-n {
  font-size: 1.35rem; font-weight: 400; letter-spacing: .04em; opacity: .8;
  padding-left: 1.2rem; border-left: 1px solid currentColor;
}

/* ── blocks ──────────────────────────────────────────────────────────────── */
/* The two sections under the hero fill the window as well, one screen each.
 *
 * Same three rules the hero obeys, for the same reasons: min-height so a short window
 * grows instead of clipping the copy; dvh with vh beneath it, because vh on a phone is
 * measured with the address bar hidden; and the fixed header subtracted ONCE. Once is
 * the whole point -- these sections are in normal flow well below the header, they need
 * no padding-top of their own, and adding one would repeat the double-subtraction that
 * pushed the hero 96px below its window.
 *
 * Scoped to .entry .e-sec deliberately: the class is used on the home page and nowhere
 * else (checked), and entry.css is loaded by index.php alone, so no other page can be
 * stretched by this. If e-sec ever appears on a second page, this rule needs a class of
 * its own rather than a wider net. */
.entry .e-sec {
  padding: 6.4rem 0;
  border-bottom: 1px solid var(--e-line);
  min-height: calc(100vh  - var(--hdr-h, 8rem));
  min-height: calc(100dvh - var(--hdr-h, 8rem));
  display: flex; flex-direction: column; justify-content: center;
}
.entry .e-sec:last-of-type { border-bottom: 0; }
/* The second and third blocks read as small next to the first screen, so their type is
 * now the first screen's type. Not its NUMBERS -- its declarations. `.e-h2` repeats the
 * clamp of `h1.e-h1` verbatim, which is the whole point: a literal 72px would still be
 * 72px inside a 390px column, and the hero heading avoids that by shrinking to 3.6rem at
 * the bottom of its clamp. Copy the mechanism and the heading shrinks with it. Same for
 * the paragraphs, which take the lede's size and leading at every width, including the
 * two places the lede is tightened (narrow columns and short windows) -- if they did not
 * follow it there, "exactly like the first screen's paragraph" would stop being true
 * precisely where the room runs out. */
.entry .e-h2 {
  font-family: var(--kanit), sans-serif; font-weight: 300; color: var(--e-ink);
  font-size: clamp(3.6rem, 6vw, 6.4rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 3.2rem;
}
.entry .e-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; }
.entry .e-col h3 {
  font-family: var(--kanit), sans-serif; font-weight: 500; font-size: 2.15rem;
  line-height: 1.35; color: var(--e-ink); margin: 0 0 1rem; letter-spacing: .01em;
}
.entry .e-col h3::before {
  content: ''; display: block; width: 28px; height: 2px;
  background: var(--e-accent); margin-bottom: 1.4rem;
}
.entry .e-col p { margin: 0; font-size: 1.9rem; line-height: 1.65; color: var(--e-ink-2); }

/* hiring process: three steps, numbers as accents */
.entry .e-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; counter-reset: st; }
/* The numbers ride the text they label: the step paragraph went 1.6rem -> 1.9rem, a
   factor of 1.1875, so 2.4rem becomes 2.85rem and the gutter reserved for them grows by
   the same factor rather than being left at a width the wider glyphs no longer fit. */
.entry .e-step { counter-increment: st; padding-left: 5.2rem; position: relative; }
.entry .e-step::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: -.4rem;
  font-family: var(--kanit), sans-serif; font-size: 2.85rem; font-weight: 300;
  color: var(--e-accent);
}
.entry .e-step p { margin: 0; font-size: 1.9rem; line-height: 1.65; }

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .entry .e-wrap,
  .e-bar .e-wrap { padding: 0 1.8rem; }
  .entry .e-hero { padding: 3rem 0 7rem; }
  .entry .e-lede,
  .entry .e-col p, .entry .e-step p { font-size: 1.7rem; }
  .entry .e-cols, .entry .e-steps { grid-template-columns: 1fr; gap: 2.8rem; }
  .e-doors { flex-direction: column; align-items: stretch; }
  .e-door { justify-content: center; }
}

/* The clearance for the fixed header used to live here as three hardcoded numbers, each
   a guess with a margin of error on top -- 96px against a header that measures 77. It is
   now the hero's own margin-top, taken from --hdr-h, which site.js keeps exact. Two
   offsets for one header put the first screen 96px lower than the window it is meant to
   fill, which is precisely the bug this replaces. */

/* A short window -- a laptop with every toolbar open, a phone in landscape -- is where a
   full-height first screen fails: the content is simply taller than the window. The block
   is allowed to grow (min-height, never height), but before it does, the screen tightens
   itself: smaller heading, tighter lede, less padding. Measured at 600x500 and 844x390. */
@media (max-height: 620px) {
  .entry .e-hero { padding: 1.6rem 0 5rem; }
  .entry h1.e-h1,
  .entry .e-h2 { font-size: clamp(2.8rem, 4.4vw, 4rem); margin-bottom: 1.4rem; }
  .entry .e-lede,
  .entry .e-col p, .entry .e-step p { font-size: 1.6rem; line-height: 1.5; }
  .entry .e-lede { margin-bottom: 1.8rem; }
  .e-door { min-height: 44px; padding: .8rem 2rem; }
}


/* Подписи прописными с разрядкой -- не ниже 14px на узком экране.
 * Такой набор читается мельче своего кегля: узкая гарнитура, разрядка, серый
 * тон, прописные без строчных -- всё это отнимает разборчивость, и 12px здесь
 * выглядят как 9. Поднимается ТОЛЬКО эта группа: правила, в которых стоят
 * одновременно text-transform: uppercase и letter-spacing. Основной текст,
 * заголовки, отступы и десктоп не затронуты. */
@media (max-width: 820px) {   /* было 8.64px */
  .e-door { font-size: max(14px, 1.7rem); }   /* было 12.24px */
}

/* Хвост той же группы: правила, где прописные и разрядка стоят не там же, где
 * размер, поэтому в общий проход они не попали. */
@media (max-width: 820px) {
  .e-door .e-n { font-size: max(14px, 1.35rem); }   /* прописные наследуются от .e-door, в своём правиле их нет */
}


/* ЧЕТЫРЕ СТУПЕНИ ВМЕСТО ДВАДЦАТИ ДЕВЯТИ. Образец -- мессенджер: всё, что
 * человек ЧИТАЕТ, набрано одним размером; мельче только служебное, крупнее
 * только заглавие. На 390 у нас было 29 различных размеров и разброс 3.5
 * раза -- отсюда "заголовки большие, подписи угадываются".
 *   15px -- служебное: прописные с разрядкой (плашки, заголовки колонок,
 *           кнопки, подписи полей, крошки, подстрочник логотипа);
 *   17px -- содержание: абзацы, пункты, ячейки таблиц, значения полей;
 *   21px -- заголовки разделов;
 *   29px -- заглавие страницы.
 * Разброс ровно вдвое. Близкие значения СЛИТЫ в одну ступень, а не подтянуты
 * порознь. Только 560 и уже: планшет и десктоп не затронуты. */
@media (max-width: 560px) {
  .entry h1.e-h1 { font-size: 29px; }
  .entry .e-lede { font-size: 17px; }
  .e-door { font-size: 15px; }
  .e-door .e-n { font-size: 15px; }
  .entry .e-h2 { font-size: 17px; }
  .entry .e-col h3 { font-size: 21px; }
  .entry .e-col p { font-size: 17px; }
  .entry .e-step::before { font-size: 17px; }
  .entry .e-step p { font-size: 17px; }
  .entry .e-lede, .entry .e-col p, .entry .e-step p { font-size: 17px; }
  .entry h1.e-h1, .entry .e-h2 { font-size: 29px; }
}