/* Только то, что встречается на главной и больше нигде.
   Общие блоки — в components.css. */

/* Столько же, сколько на страницах услуг: над содержимым стоят крошки,
   и первый экран обеих страниц начинается на одной высоте (R128) */
.a-hero { padding: var(--s5) 0 var(--s7); }
/* Текст начинается сразу под крошками, фотография остаётся прижатой к низу:
   иначе выравнивание по низу утаскивало вниз и подпись, и заголовок, и они
   вставали не на одном уровне со страницами услуг (R145, R146) */
.a-hero__grid { display: grid; grid-template-columns: 1fr 460px; gap: var(--s8); align-items: start; }
.a-hero__fig { align-self: end; }
.a-hero__h { margin: var(--s5) 0 var(--s6); }
.a-hero__cta { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s7); flex-wrap: wrap; }
/* Фотография с подписью: без сброса полей у figure браузер добавляет
   свои 40 px по бокам и кадр сжимается (R103) */
.a-hero__fig{margin:0}
.a-hero__ph { aspect-ratio: 4 / 5; overflow: hidden; background: rgb(21, 19, 24); }
/* Подпись объясняет, кто на снимке. Отрицательный отступ съедает трекинг
   после последней буквы, иначе строка не дотягивает до края кадра (R104) */
.a-hero__cap{margin-top:var(--s2);text-align:right;margin-right:-.12em}
.a-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 14%; }
header.field { position: sticky; top: 0px; z-index: 30; background: var(--paper); }
.nav { transition: padding 0.2s ease-out; }
[data-scrolled="1"] .nav { padding: var(--s2) 0; }
[data-scrolled="1"] .lock { --h: 27px; }
@media (prefers-reduced-motion: reduce){
.nav { transition: none; }
}
.mm { position: static; }
.mm__t { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0px; font-family: Geologica, sans-serif; font-weight: 300; font-size: 17px; color: var(--ink); padding: 0px; }
.mm__t svg { width: 10px; height: 10px; transition: transform 0.2s ease-out; }
.mm[data-open="1"] .mm__t svg { transform: rotate(180deg); }
.mm__panel { position: absolute; left: 0px; right: 0px; top: 100%; z-index: 20; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s; }
.mm[data-open="1"] .mm__panel { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce){
.mm__panel { transition: none; transform: none; }
}
.mm__in { display: grid; grid-template-columns: 280px 1fr; gap: 0px; min-height: 340px; }
.mm__dirs { border-right: 1px solid var(--line); padding: var(--s5) var(--s5) var(--s5) 0; }
.mm__dir { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; padding: 10px var(--s4) 10px 0; background: none; border: 0px; cursor: pointer; text-align: left; font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; font-size: 15px; color: var(--ink); transition: color 0.15s ease-out; }
.mm__dir svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s ease-out; }
.mm__dir[aria-selected="true"] { color: var(--accent); }
.mm__dir[aria-selected="true"] svg { opacity: 1; }
.mm__cols { padding: var(--s5) 0 var(--s5) var(--s6); display: none; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s5); align-content: start; }
.mm__cols[data-active="1"] { display: grid; }
.mm__cols a { font-size: 15px; color: var(--ink-2); padding: 5px 0px; line-height: 1.35; transition: color 0.15s ease-out; }
.mm__cols a:hover { color: var(--accent); }
.mm__lead { grid-column: 1 / -1; padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--hair); }
.mm__lead a { font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; font-size: 17px; color: var(--ink); }
.mm__foot { grid-column: 1 / -1; display: flex; gap: var(--s5); align-items: center; padding-top: var(--s4); margin-top: var(--s3); border-top: 1px solid var(--hair); }
.mm__col { display: flex; flex-direction: column; }
.mm__col .l { margin-bottom: var(--s3); }
.mm--slim { position: relative; }
.mm__panel--slim { left: auto; right: auto; width: 280px; border: 1px solid var(--line); }
.mm__panel--slim .wrap { max-width: none; padding: 0; }
.mm__slim { display: grid; grid-template-columns: 1fr; padding: var(--s2) 0; }
.mm__slim a { font-size: 15px; color: var(--ink-2); padding: 8px var(--s4); }
.mm__slim a:hover, .mm__slim a:focus-visible { color: var(--accent); }
.a-serv__row { display: grid; grid-template-columns: 56px 1fr 260px; gap: 0 var(--s5); align-items: start; padding: var(--s5) 0; border-top: 1px solid var(--line); }
.a-serv__row:last-of-type { border-bottom: 1px solid var(--line); }
.a-serv__body { grid-area: 1 / 2; }
.a-serv__price { grid-area: 1 / 3; }
.a-serv__acts { grid-area: 2 / 2; }
.a-serv__acts .btn--ghost { transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; }
.a-serv__acts .btn--ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce){
.a-serv__acts .btn--ghost { transition: none; }
}
.a-serv__num { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--accent); font-size: 15px; padding-top: 6px; }
.a-serv__price { text-align: right; padding-top: 2px; }
.a-serv__price .n { font-size: 34px; white-space: nowrap; }
.a-serv__acts { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s4); flex-wrap: wrap; }
.a-serv__price { text-align: right; }
.a-serv__more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--accent); }
.btn--s { font-size: 15px; padding: 9px var(--s4); }
.a-serv__more svg { width: 14px; height: 14px; transition: transform 0.2s ease-out; }
.a-serv__row:hover .a-serv__more svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){
.a-serv__more svg { transition: none; }
}
.a-strategy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.a-strategy__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); margin-top: var(--s5); }
.a-strategy__list p { display: flex; gap: var(--s3); padding: 9px 0px; margin: 0px; font-size: 15px; border-bottom: 1px solid var(--hair); }
.a-strategy__list i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-2); padding-top: 3px; }
.car { overflow: hidden; }
.car__track { display: flex; gap: var(--s5); }
.car__nav { display: flex; gap: var(--s2); }
.car__b { width: 46px; height: 46px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; }
.car__b:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.car__b svg { width: 18px; height: 18px; }
.field--black .car__b { border-color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: var(--s5); }
.ya { display: inline-flex; align-items: center; gap: var(--s3); color: inherit; }
.ya__n { font-family: Oswald, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: 0.01em; }
.ya__s { color: var(--accent); font-size: 13px; letter-spacing: 0.08em; line-height: 1; }
.ya__c { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.a-vids .car__track > * { flex: 0 0 calc((100% - var(--s5)*2)/3); }
.a-vid { display: block; border: 1px solid var(--line); color: inherit; }
.a-vid__ph { display: block; position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: rgb(21, 19, 24); }
.a-vid__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease-out, filter 0.35s ease-out; }
.a-vid:hover .a-vid__ph img { transform: scale(1.03); }
.a-vid__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0px 0px -32px; background: var(--act); color: var(--act-on); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out; }
.a-vid:hover .a-vid__play { transform: scale(1.08); }
.a-vid__play svg { width: 20px; height: 20px; }
.a-vid__b { display: block; padding: var(--s4) var(--s5) var(--s5); }
.a-vid__q { margin: 0 0 var(--s4); font-size: 15px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce){
.a-vid__ph img, .a-vid__play { transition: none; }
}
.a-letters .car__track { gap: var(--s4); }
.a-letters .car__track > * { flex: 0 0 calc((100% - var(--s4)*6)/7); }
.a-letter { border: 1px solid var(--line); background: rgb(255, 255, 255); padding: 0px; cursor: zoom-in; aspect-ratio: 1249 / 1718; overflow: hidden; transition: border-color 0.2s ease-out; }
.a-letter img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0px; display: block; transition: transform 0.35s ease-out; }
.a-letter:hover { border-color: var(--accent); }
.a-letter:hover img { transform: scale(1.02); }
.a-lb { position: fixed; inset: 0px; z-index: 60; background: rgba(11, 11, 11, 0.92); display: none; align-items: center; justify-content: center; padding: var(--s6); }
.a-lb[data-open="1"] { display: flex; }
.a-lb img { max-width: min(900px, 92vw); max-height: 88vh; background: rgb(255, 255, 255); }
.a-lb__x { position: absolute; top: var(--s5); right: var(--s5); width: 44px; height: 44px; background: none; border: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255); cursor: pointer; font-size: 20px; line-height: 1; }
.a-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.a-review { border: 1px solid var(--line); padding: var(--s5); display: flex; flex-direction: column; }
.a-review p { flex: 1 1 0%; margin: 0 0 var(--s5); }
.a-review__who b { display: block; font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; font-size: 15px; }
.a-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; border-top: 1px solid var(--line); }
.a-why > div { padding: var(--s6) var(--s5) 0; border-right: 1px solid var(--line); }
.a-why > div:last-child { border-right: 0px; }
.a-why > div:first-child { padding-left: 0px; }
.a-final { display: grid; grid-template-columns: 1fr 480px; gap: var(--s7); align-items: center; }
.foot__tel { font-size: 15px; color: var(--ink-2); }
@media (max-width: 1200px){
.a-hero__grid { grid-template-columns: 1fr 360px; gap: var(--s6); }
.a-serv__row { grid-template-columns: 44px 1fr 170px; gap: var(--s4); }
.a-serv__price .n { font-size: 26px; }
.a-vids .car__track > * { flex: 0 0 calc((100% - var(--s5))/2); }
.a-letters .car__track > * { flex: 0 0 calc((100% - var(--s4)*3)/4); }
.a-final { grid-template-columns: 1fr 360px; gap: var(--s6); }
.a-why { grid-template-columns: 1fr; border-top: 0px; }
.a-why > div { border-right: 0px; border-top: 1px solid var(--line); padding: var(--s5) 0 0; }
}
@media (max-width: 900px){
.nav__right .btn { display: none; }
.nav__right { gap: var(--s4); }
[data-scrolled="1"] .nav__right .btn { display: inline-flex; padding: 11px var(--s3); font-size: 12px; letter-spacing: 0.06em; gap: 8px; }
[data-scrolled="1"] .nav__right .btn svg { width: 14px; height: 14px; }
[data-scrolled="1"] .ya { display: none; }
/* столько же, сколько у страниц услуг: первый экран начинается
   на одной высоте на любой ширине (R156) */
.a-hero { padding: var(--s5) 0 var(--s8); }
.a-hero__grid { grid-template-columns: 1fr; gap: var(--s6); }
.a-hero__ph { aspect-ratio: 4 / 5; max-height: 60vh; }
.a-hero__ph img { object-position: 52% 12%; }
.a-hero__cta { gap: var(--s4); }
.a-strategy__grid { grid-template-columns: 1fr; gap: var(--s6); }
.a-strategy__list { grid-template-columns: 1fr; }
.a-final { grid-template-columns: 1fr; gap: var(--s6); }
.a-vids .car__track > * { flex: 0 0 100%; }
.a-letters .car__track > * { flex: 0 0 calc((100% - var(--s4)*2)/3); }
.car__nav { align-self: flex-end; }
.mm { width: 100%; }
.mm__t { width: 100%; justify-content: space-between; font-size: 20px; padding: var(--s2) 0; }
.mm__panel { position: static; opacity: 1; visibility: visible; transform: none; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--hair); display: none; }
.mm[data-open="1"] .mm__panel { display: block; }
.mm__panel .wrap { padding: 0px; max-width: none; }
.mm__in { grid-template-columns: 1fr; min-height: 0px; }
.mm__dirs { border-right: 0px; padding: var(--s3) 0; }
.mm__dir { font-size: 15px; padding: 10px 0px; }
.mm__cols { padding: 0 0 var(--s4); grid-template-columns: 1fr; gap: 0px; }
.mm__lead { padding-bottom: var(--s2); margin-bottom: var(--s2); }
.mm__col { padding: var(--s2) 0; }
.mm__foot { flex-direction: column; align-items: flex-start; gap: var(--s3); }
.mm__slim { grid-template-columns: 1fr; padding: var(--s3) 0; }
  .mm--slim { position: static; }
  .mm__panel--slim { width: auto; border: 0; }
  .mm__slim a { padding: 4px 0; }
}
@media (max-width: 600px){
.a-hero { padding: var(--s4) 0 var(--s7); }
.a-hero__h { margin: var(--s5) 0 var(--s5); }
.a-hero__cta { flex-direction: column; align-items: stretch; }
.a-hero__cta .btn { justify-content: center; }
.a-hero__cta .l { max-width: none; }
.a-serv__row { grid-template-columns: auto 1fr; gap: var(--s3) var(--s3); padding: var(--s5) 0; }
.a-serv__num { padding-top: 4px; }
.a-serv__body { grid-area: 1 / 2; }
.a-serv__price { grid-area: 2 / 2; text-align: left; padding-top: 0px; }
.a-serv__price .n { font-size: 26px; color: var(--accent); }
.a-serv__acts { grid-area: 3 / 2; margin-top: 0px; gap: var(--s3); }
.a-serv__acts .btn--ghost { flex: 1 1 auto; justify-content: center; }
.a-letters .car__track > * { flex: 0 0 calc((100% - var(--s4))/2); }
.a-lb { padding: var(--s4); }
.a-lb img { max-width: 96vw; }
.a-lb__x { top: var(--s3); right: var(--s3); }
.ya__c { display: none; }
[data-scrolled="1"] .lock { width: calc(294 / 256 * var(--h)); }
[data-scrolled="1"] .lock__w { display: none; }
[data-scrolled="1"] .nav__right .btn { white-space: nowrap; }
}