/* ==========================================================================
   Главный экран (index.html) и экран выбора «Какой путь тебе ближе?»
   (sotrudnikam.html). Подключается после styles.css (шрифты, анимации).
   На ПК — сцена 1586×992 из макета, масштабируется по окну (--u = 1 px макета).
   На телефоне — обычная колонка.
   ========================================================================== */
:root { --hp-bg: #F4F0E6; --hp-ink: #17140F; }
body.hp-body { margin: 0; background: var(--hp-bg); color: var(--hp-ink); font-family: var(--font-text); overflow-x: hidden; }
.hp a { color: inherit; text-decoration: none; }
.hp img { display: block; max-width: none; }

/* ---------- общие детали ---------- */
.hp__logo img { width: 100%; height: auto; }
.hp__h, .hp__h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; margin: 0; }
.hp__arrow { flex: none; width: 1.1em; height: .5em; }
.hp__arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- мобильная версия (по умолчанию) ---------- */
.hp { position: relative; min-height: 100vh; padding: 20px 20px 48px; }
.hp__stage { display: flex; flex-direction: column; }
.hp__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hp__logo { display: block; width: 150px; }
.hp__contact { border: 1.5px solid var(--hp-ink); padding: 10px 18px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; }
.hp__h { margin-top: 36px; font-size: clamp(64px, 21vw, 110px); line-height: 1.04; letter-spacing: -.06em; }
.hp__h span { display: block; }
.hp__p { margin: 22px 0 0; font-size: 19px; line-height: 1.45; max-width: 34ch; }
.hp__fig { position: relative; margin: 28px auto 0; width: min(100%, 420px); }
.hp__fig img { width: 100%; height: auto; }
.hp__list { margin-top: 28px; }
.hp__item { display: block; padding: 20px 0 18px; border-bottom: 1px solid rgba(23, 20, 15, .22); }
.hp__list .hp__item:last-child { border-bottom: 0; }
.hp__item-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; text-transform: uppercase; transform-origin: left center; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.hp__item-t .hp__arrow { font-size: 24px; }
.hp__item-d { display: block; margin-top: 6px; font-size: 17px; line-height: 1.4; }
.dbr { display: none; }

/* --- экран выбора --- */
.hp--choice .hp__top { margin-bottom: 8px; }
.hp__back { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.hp__back .hp__arrow { font-size: 17px; }
.hp__topline { display: none; }
.hp__label { margin: 28px 0 0; text-align: center; font-size: 13px; font-weight: 400; letter-spacing: .4em; text-transform: uppercase; }
.hp__h1 { margin: 12px 0 0; text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(38px, 10.5vw, 62px); line-height: 1.02; letter-spacing: -.04em; }
.hp--choice .hp__fig { width: min(78%, 340px); margin-top: 8px; }
.hp__col { margin-top: 34px; }
.hp__rule { display: block; width: 64px; height: 2px; background: var(--hp-ink); margin-bottom: 18px; }
.hp__h2 { font-size: clamp(44px, 13vw, 64px); line-height: .98; letter-spacing: -.04em; }
.hp__h2 span { display: block; }
.hp__sub { margin: 18px 0 0; font-size: 19px; font-weight: 600; line-height: 1.35; }
.hp__txt { margin: 10px 0 0; font-size: 18px; line-height: 1.45; }
.hp__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 17px 24px; background: var(--hp-ink); color: #fff !important; font-size: 17px; font-weight: 600; line-height: 1; transition: background-color .2s ease, transform .2s ease; }
.hp__btn .hp__arrow { font-size: 17px; transition: transform .2s ease; }
.hp__caption { margin: 34px 0 0; text-align: center; font-size: 13px; letter-spacing: .13em; }

/* ---------- ПК: сцена 1586×992 ---------- */
@media (min-width: 1080px) {
  .hp { --u: min(calc(100vw / 1586), calc(100vh / 992)); --sx: calc(max(3vw, 40 * var(--u)) - 40 * var(--u)); display: flex; align-items: center; justify-content: center; padding: 0; }
  .hp__stage { display: block; position: relative; flex: none; width: 100%; height: calc(992 * var(--u)); }
  .hp__stage > *, .hp__top > * { position: absolute; }
  .hp__top { position: static; display: block; }
  /* привязка: по умолчанию к левому краю окна; .a--r — к правому; .a--c — к центру; .a--s — растянуть между краями */
  .a { left: calc(var(--x) * var(--u) + var(--sx)); top: calc(var(--y) * var(--u)); }
  .a[style*="--w:"] { width: calc(var(--w) * var(--u)); }
  .a[style*="--h:"] { height: calc(var(--h) * var(--u)); }
  .a.a--r { left: auto; right: calc((1586 - var(--x) - var(--w)) * var(--u) + var(--sx)); }
  .a.a--c { left: calc(50% + (var(--x) - 793) * var(--u)); }
  .a.a--s { left: calc(var(--x) * var(--u) + var(--sx)); right: calc((1586 - var(--x) - var(--w)) * var(--u) + var(--sx)); width: auto; }
  .hp__logo { width: calc(var(--w) * var(--u)); }
  .hp__contact { display: flex; align-items: center; justify-content: center; padding: 0; font-size: calc(22 * var(--u)); border-width: calc(1.5 * var(--u)); transition: background-color .2s ease, color .2s ease; }
  .hp__contact:hover { background: var(--hp-ink); color: var(--hp-bg); }
  .hp__dbr, .dbr { display: inline; }

  /* главный экран */
  .hp__h { font-size: calc(114.5 * var(--u)); line-height: calc(130 * var(--u)); letter-spacing: -.061em; margin: 0; }
  .hp__h span { display: block; white-space: nowrap; }
  .hp__p { margin: 0; font-size: calc(27 * var(--u)); line-height: calc(35 * var(--u)); max-width: none; white-space: nowrap; }
  .hp__fig { margin: 0; width: calc(var(--w) * var(--u)); height: calc(992 * var(--u)); }
  .hp__fig img { width: 100%; height: 100%; }
  .hp__list { margin: 0; }
  .hp__item { position: absolute; left: 0; right: 0; top: calc(var(--i) * 153 * var(--u)); height: calc(153 * var(--u)); padding: calc(20 * var(--u)) calc(16 * var(--u)) 0; box-sizing: border-box; border-bottom: calc(1 * var(--u)) solid rgba(23, 20, 15, .3); transition: background-color .15s ease; }
  .hp__item:hover, .hp__item:focus-visible { background: rgba(23, 20, 15, .045); }
  .hp__item-t > span:first-child { white-space: nowrap; }
  .hp__item-t { gap: calc(8 * var(--u)); font-size: calc(var(--fs, 40) * var(--u)); line-height: normal; letter-spacing: var(--ls, 0); }
  .hp__item-t .hp__arrow { font-size: calc(23.6 * var(--u)); align-self: flex-start; margin-top: calc(34 * var(--u)); transition: transform .2s ease; }
  .hp__item-d { margin-top: calc(3 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); }
  .hp__item:hover .hp__item-t .hp__arrow { transform: translateX(calc(6 * var(--u))); }

  /* экран выбора */
  .hp--choice .hp__top { margin: 0; }
  .hp__back { font-size: calc(20 * var(--u)); gap: calc(14 * var(--u)); white-space: nowrap; }
  .hp__back .hp__arrow { font-size: calc(20 * var(--u)); }
  .hp__topline { display: block; height: 0; border-top: calc(1 * var(--u)) solid rgba(23, 20, 15, .75); }
  .hp__label { margin: 0; font-size: calc(17 * var(--u)); letter-spacing: .374em; text-align: center; padding-left: .374em; }
  .hp__h1 { margin: 0; font-size: calc(86 * var(--u)); line-height: calc(100 * var(--u)); letter-spacing: -.06em; white-space: nowrap; }
  .hp__h1 span { display: inline-block; transform: scaleX(.877); }
  .hp--choice .hp__fig { width: calc(605 * var(--u)); height: calc(738 * var(--u)); margin: 0; }
  .hp__col { margin: 0; }
  .hp__rule { position: absolute; left: 0; top: 0; width: calc(101 * var(--u)); height: calc(2 * var(--u)); margin: 0; }
  .hp__h2 { position: absolute; left: 0; top: calc(32.5 * var(--u)); font-size: calc(84 * var(--u)); line-height: calc(85 * var(--u)); letter-spacing: -.06em; white-space: nowrap; }
  .hp__h2 span { display: block; transform: scaleX(.76); transform-origin: left center; }
  .hp__sub { position: absolute; left: 0; top: calc(230 * var(--u)); margin: 0; font-size: calc(25.4 * var(--u)); line-height: calc(30 * var(--u)); white-space: nowrap; }
  .hp__txt { position: absolute; left: 0; top: calc(279 * var(--u)); margin: 0; font-size: calc(23.2 * var(--u)); line-height: calc(30 * var(--u)); white-space: nowrap; }
  .hp__btn { position: absolute; left: 0; top: calc(372 * var(--u)); width: calc(var(--bw) * var(--u)); height: calc(62 * var(--u)); margin: 0; padding: 0; justify-content: center; gap: calc(14 * var(--u)); font-size: calc(21.8 * var(--u)); }
  .hp__btn .hp__arrow { font-size: calc(21.8 * var(--u)); }
  .hp__caption { margin: 0; text-align: center; font-size: calc(17 * var(--u)); letter-spacing: .129em; }
  .hp__capline { height: 0; border-top: calc(1 * var(--u)) solid rgba(23, 20, 15, .8); }
}
@media (hover: hover) {
  .hp__item:hover .hp__item-t, .hp__item:focus-visible .hp__item-t { transform: scale(1.035); }
  .hp__btn:hover { background: #000; transform: translateY(-2px); }
  .hp__btn:hover .hp__arrow { transform: translateX(4px); }
}

/* ---------- появление при заходе ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hp .rv { animation: reveal-up .8s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--d, 0) * 1s); }
}