/* «3 Компания» — фреймы 2004-3759 (1440) и 2004-4164 (375). Числа из макета.
   Общие блоки внутренних страниц (шапка страницы, сетка цифр, карточки с «+», заявка) лежат здесь же —
   их подключает и «Хранилище» (css: company + storage). Кандидаты на вынос в основу. */
.wrap-in { padding-inline: var(--gutter); }

/* роль Oswald Light 20/28 +2% (подписи карточек, имя) */
.sec-head { padding-bottom: 86px; }
.t-h20 { font-family: var(--f-head); font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Шапка страницы: H 72/88 слева, подпись капсом справа по базовой линии ---------- */
.phead { display: grid; grid-template-columns: 812fr 548fr; align-items: last baseline; padding-top: 78px; padding-bottom: 84px; }
.phead__lead { font: 500 11px/19px var(--f-text); letter-spacing: .06em; text-transform: uppercase; max-width: 420px; }
.crumbs { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-bottom: 33px; }
.crumbs .i { width: 10px; height: 10px; color: var(--c-accent); }
@media (hover: hover) { .crumbs a:hover { color: var(--c-accent); } }
.phead--crumbs { padding-top: 27px; }

/* ---------- Миссия ---------- */
.mission { display: grid; grid-template-columns: 248fr 524fr 508fr; align-items: first baseline; padding: 56px 40px 58px; background: var(--c-accent); color: #fff; }
.mission__label { font: 500 11px/19px var(--f-text); letter-spacing: .06em; text-transform: uppercase; }
.mission__text { grid-column: 2 / 4; max-width: 850px; min-height: 222px; font: 300 28px/37px var(--f-head); }
.mission__sign { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; margin-top: 90px; padding-top: 41px; border-top: 1px solid rgba(255, 255, 255, .15); }
.mission__sign > * { grid-column: 3; }
.mission__sign > p + p { margin-top: 9px; }

/* ---------- Сетка цифр (Цифры) ---------- */
.ngrid { display: grid; grid-template-columns: 680fr 360fr 320fr; }
.ngrid > .wrap-in { padding: 0; }
.ngrid__slider, .ngrid__track { display: contents; }
.ngrid__desc { padding: 34px 40px 0 0; }
.ngrid__desc { max-width: none; }
.ngrid__desc { padding-right: max(40px, calc(100% - 444px)); }
.ngrid .dots { display: none; }
.ncell { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 27px 40px 68px; min-width: 0; }
.ncell__num { display: flex; align-items: flex-start; color: var(--c-accent); }
.ncell__unit { margin: 9px 0 0 16px; min-width: 0; font: 400 28px/28px var(--f-head); text-transform: uppercase; }
.ncell__plus { margin-left: 24px; font: 300 59px/38px var(--f-head); padding-top: 3px; }
.ncell__text { line-height: 17px; max-width: 281px; }
.ncell--red { background: var(--c-accent); color: #fff; padding: 26px 40px 60px; }
.ncell--red .ncell__text { max-width: 436px; }
.ncell__big { font: 300 96px/96px var(--f-head); text-transform: uppercase; }
.ngrid__ill { background: var(--c-soft); padding: 10px 18px 12px; overflow: hidden; }
.ngrid__ill img { width: 100%; height: 100%; object-fit: contain; }

/* Компания: 3 ряда по 383 */
.cnum__grid { grid-template-rows: 383px 383px 384px; }
.cnum__grid { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cnum__grid { margin-inline: var(--gutter); padding: 0; }
.cnum .ngrid__desc { grid-area: 1 / 1; }
.cnum__a { grid-area: 1 / 2; border-left: 1px solid var(--c-line); }
.cnum__b { grid-area: 1 / 3; border-left: 1px solid var(--c-line); }
.cnum__c { grid-area: 2 / 1; }
.cnum__photo { grid-area: 2 / 2 / 3 / 4; }
.cnum__ill { grid-area: 3 / 1; }
.cnum__d { grid-area: 3 / 2 / 4 / 4; }

/* Офисы: фото с контактами и переключателем городов */
.offices { position: relative; overflow: hidden; background: #000; color: #fff; }
.offices__bg { position: absolute; left: -38.8%; top: -74.7%; width: 147.9%; max-width: none; height: auto; opacity: .5; }
.offices__tabs { position: absolute; left: 40px; top: 42px; display: flex; gap: 24px; }
.offices__tabs button { display: inline-flex; align-items: center; gap: 6px; transition: opacity .2s; }
.offices__tabs button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
.offices__tabs button[aria-selected="true"]::before { display: block; }
@media (hover: hover) { .offices__tabs button:hover { opacity: .5; } }
.offices__pane { position: absolute; left: calc(50% - 8px); right: 24px; bottom: 58px; }
.offices__label { font: 400 13px/24px var(--f-text); color: var(--c-white-80); margin-bottom: 16px; }
.offices__label--addr { margin-top: 25px; }
.offices__big { display: flex; align-items: center; gap: 12px; }
.offices__big .t-h4 { white-space: nowrap; margin-right: 4px; }
.offices__msg { width: 28px; height: 28px; color: var(--c-accent); }
.offices__msg .i { width: 14px; height: 14px; }

/* ---------- Карточки с «+» (Ценности, Безопасность) ---------- */
.values { padding-bottom: 140px; }
.vgrid { display: grid; grid-template-columns: 320fr 360fr 360fr 320fr; grid-template-rows: 400px 401px; margin-inline: var(--gutter); padding: 0; border-top: 1px solid var(--c-line); }
.vgrid__slider, .vgrid__track { display: contents; }
.vgrid .dots { display: none; }
.vgrid__desc { grid-area: 1 / 1 / 2 / 3; padding-top: 34px; border-bottom: 1px solid var(--c-line); }
.vgrid__desc { padding-right: max(40px, calc(100% - 444px)); }
.vcard { position: relative; padding: 33px 40px 40px; border-bottom: 1px solid var(--c-line); border-left: 1px solid var(--c-line); min-width: 0; overflow: hidden; }
.vcard__title { max-width: 279px; transition: opacity .3s; }
.vcard__img { position: absolute; top: 108px; left: calc(50% - 90px); width: 180px; height: 187px; object-fit: cover; transition: opacity .3s; }
.vcard__more { position: absolute; top: 34px; left: 40px; right: 40px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.vcard__more p { max-width: 278px; }
.vcard__btn { position: absolute; right: 40px; bottom: 40px; width: 40px; height: 40px; }
.vcard__btn .i { transition: transform .3s; }
.vcard.is-open .vcard__title, .vcard.is-open .vcard__img { opacity: 0; }
.vcard.is-open .vcard__more { opacity: 1; visibility: visible; }
.vcard.is-open .vcard__btn .i { transform: rotate(45deg); }
.vcard--text { padding-top: 34px; }
.vcard--text p { max-width: 278px; }
.vgrid__2 { grid-area: 1 / 3; }
.vgrid__3 { grid-area: 1 / 4; }
.vgrid__4 { grid-area: 2 / 1; border-left: 0; padding-left: 0; }
.vgrid__4 .vcard__img { left: calc(50% - 110px); }
.vgrid__4 .vcard__more { left: 0; }
.vgrid__5 { grid-area: 2 / 2; }
.vgrid__6 { grid-area: 2 / 3; }
.vcta { grid-area: 2 / 4; margin: -1px 0 0 -1px; background: var(--c-accent); color: #fff; padding: 40px 32px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.vcta h3 { max-width: 248px; }
.vcta .btn { align-self: flex-end; }

/* ---------- Клиенты ---------- */
.clients { position: relative; color: #fff; padding-bottom: 0; }
.clients__photo { position: absolute; left: 0; right: 0; top: 0; height: 902px; background: #000; overflow: hidden; }
.clients__photo img { position: absolute; left: -5.4%; top: -19.1%; width: 117.4%; max-width: none; height: auto; opacity: .6; }
.clients__head { position: relative; padding-top: 121px; }
.clients__head .sec-head__pre { flex-direction: row; gap: 12px; color: #fff; }
.clients__head .sec-head__pre .i-emblem { color: #fff; width: 26px; height: 24px; }
.clients__title { margin-top: 41px; max-width: 1190px; }
.clients__text { position: relative; }
.clients__text p { margin-top: 80px; border-top: 1px solid var(--c-white-20); padding: 35px 0 114px calc(50% + 16px); }
.clients__text p { padding-right: max(0px, calc(50% - 16px - 464px)); }
.clients__grid { position: relative; color: var(--c-text); }
.clients__track, .clients__page { display: contents; }
.clients__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 204px; margin-inline: var(--gutter); padding: 0; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.clients__grid .dots { display: none; }
.clogo { display: flex; align-items: center; justify-content: center; background: #fff; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); min-width: 0; }
.clogo__img { position: relative; isolation: isolate; display: block; width: var(--w); max-width: 80%; }
.clogo__img img { width: 100%; height: auto; filter: grayscale(1); }
/* Фигма: поверх логотипа чёрный прямоугольник в режиме Overlay (1 или 2 слоя, у части 50 %) */
.ov1::before, .ovh::before, .ov2::before, .ov2::after { content: ''; position: absolute; inset: 0; background: #000; mix-blend-mode: overlay; pointer-events: none; z-index: 1; }
.ovh::before { opacity: .5; }

/* ---------- Отзывы ---------- */
.reviews__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.reviews__intro { margin-inline: var(--gutter); padding: 35px 0 48px; border-top: 1px solid var(--c-line); }
.reviews__intro { min-height: 211px; }
.reviews__intro p { max-width: 452px; align-self: flex-start; }
.reviews__intro-m { display: none; }
.reviews__arrows { display: flex; gap: 8px; flex: none; }
.reviews__view { overflow: hidden; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.reviews__track { margin-left: -41px; }
.reviews__track > .review { width: calc(100% / 3); }
.review { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 16px 42px 40px; border-left: 1px solid var(--c-line); }
.review__logo { height: 78px; display: flex; align-items: center; }
.review__logo img { width: 230px; max-width: none; height: auto; margin-left: -24px; }
.review__gmii { display: block; width: 218px; height: 78px; background: var(--c-text); -webkit-mask: url("/img/b4cdef75.webp") center / contain no-repeat; mask: url("/img/b4cdef75.webp") center / contain no-repeat; }
.review__text { margin-top: 62px; max-width: 410px; }
.review__pdf { margin-top: 56px; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 4px; background: var(--c-accent); color: #fff; cursor: default; }
.review__pdf-m { display: none; }
.review__who { margin: 61px 0 0 180px; }
.review__who p + p { margin-top: 9px; }
.reviews__bar { display: none; }

/* ---------- Обратная связь (как на главной) ---------- */
.contacts { padding-bottom: 140px; }
.contacts__intro p { border-top: 1px solid var(--c-line); padding: 35px 0 90px calc(50% + 16px); }
.contacts__intro p { padding-right: max(0px, calc(50% - 16px - 453px)); }
.contacts__box { display: grid; grid-template-columns: 664fr 696fr; }
.contacts__photo { overflow: hidden; background: #e9e9e9; }
.contacts__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.contacts__box .cform { border-left: 0; }

/* ---------- Узкий десктоп ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .t-num { font-size: 72px; line-height: 80px; }
  .ncell__big { font-size: 80px; line-height: 88px; }
  .ncell, .ncell--red { padding-left: 24px; padding-right: 24px; }
  .offices__pane { left: 40px; }
  .vcard { padding: 28px 24px 24px; }
  .vgrid__4 { padding-left: 0; }
  .vcard__img { top: auto; bottom: 80px; width: 140px; height: 145px; left: calc(50% - 70px); }
  .vgrid__4 .vcard__img { left: calc(50% - 82px); }
  .vcard__btn { right: 24px; bottom: 24px; }
  .vcard__more { left: 24px; right: 24px; }
  .vcta { padding: 28px 24px 24px; }
  .vcta .btn { padding-inline: 16px; }
  .clients__title.t-h1 { font-size: 72px; line-height: 88px; }
  .review__who { margin-left: 0; }
  .phead { column-gap: 32px; }
  .phead__title.t-h72 { font-size: 56px; line-height: 72px; }
  .offices__bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 90%; }
  .mission__text { font-size: 24px; line-height: 34px; }
}

/* ---------- Мобильная (375) и планшет ---------- */
@media (max-width: 1023px) {
  .t-h20 { font-size: 20px; line-height: 28px; }
  .phead { display: block; padding-top: 38px; padding-bottom: 58px; }
  .phead--crumbs { padding-top: 38px; }
  .crumbs { display: none; }
  .phead__lead { margin-top: 52px; max-width: 327px; }

  .mission-wrap { padding: 0; }
  .mission { display: block; margin-inline: calc(-1 * var(--gutter)); padding: 42px var(--gutter) 50px; }
  .mission__text { margin-top: 28px; min-height: 0; font-size: 20px; line-height: 28px; }
  .mission__sign { display: block; margin-top: 59px; padding-top: 34px; }

  .sec-head { padding: 96px var(--gutter) 48px; }
  .ngrid { display: block; margin: 0; border: 0; }
  .cnum__grid { margin: 0; border: 0; }
  .ngrid__desc, .vgrid__desc { padding: 4px var(--gutter) 56px; border: 0; }
  .ngrid__more { display: none; }
  .ngrid__slider, .vgrid__slider { display: block; }
  .ngrid__track, .vgrid__track { display: flex; }
  .ngrid__track > .ncell { width: 100%; height: 291px; margin: 0; border: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 28px var(--gutter) 44px; }
  .ngrid__track > .ncell--red { border-color: var(--c-accent); padding-top: 24px; }
  .ncell__big { font-size: 80px; line-height: 88px; }

  .ngrid__ill, .offices { display: none; }
  .ngrid .dots, .vgrid .dots { display: flex; padding-top: 16px; }

  .values { padding-bottom: 80px; }
  .values .sec-head, .reviews .sec-head { padding-top: 80px; }
  .vgrid { display: block; margin: 0; border: 0; }
  .vgrid__slider { display: block; }
  .vgrid__track > .vcard { width: 100%; height: 405px; margin: 0; padding: 25px var(--gutter) 24px; border: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .vcard__title { font-size: 24px; line-height: 32px; letter-spacing: 0; max-width: 260px; }
  .vcard__img, .vgrid__4 .vcard__img { top: 121px; left: 3px; width: calc(100% - 7px); height: auto; aspect-ratio: 16 / 9; }
  .vcard__more, .vgrid__4 .vcard__more { top: 25px; left: var(--gutter); right: var(--gutter); }
  .vcard__more p { max-width: none; }
  .vcard__btn { width: 28px; height: 28px; right: var(--gutter); bottom: 24px; }
  .vcard--text, .vgrid__cta { display: none; }

  .clients__photo { height: 676px; }
  .clients__photo img { left: -124%; top: -.3%; width: 327.7%; }
  .clients__head { padding-top: 64px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .clients__head .sec-head__pre { flex-direction: column; gap: 10px; }
  .clients__title.t-h1 { margin-top: 24px; font-size: 28px; line-height: 38px; }
  .clients__text p { margin-top: 52px; border: 0; padding: 0 0 153px; }
  .clients__grid { display: block; margin: 0; border: 0; padding: 0; }
  .clients__track { display: flex; gap: 16px; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); }
  .clients__page { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 163px); align-content: start; width: 100%; max-width: 420px; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
  .clogo__img { width: calc(var(--w) * .6); }
  .clients__grid .dots { display: flex; padding-top: 16px; }

  .reviews__intro { margin: 0; padding: 4px var(--gutter) 58px; border: 0; }
  .reviews__intro-d, .reviews__arrows { display: none; }
  .reviews__intro-m { display: inline; }
  .reviews__clip { padding: 0; }
  .reviews__track { margin-left: 0; }
  .reviews__track > .review { width: 100%; }
  .review { border: 0; padding: 30px var(--gutter) 42px; }
  .review__logo { align-self: center; }
  .review__logo img { margin-left: 0; }
  .reviews__intro { min-height: 0; }
  .review__text { margin-top: 74px; }
  .review__pdf { margin-top: 34px; }
  .review__pdf-d { display: none; }
  .review__pdf-m { display: inline; }
  .review__who { margin: 57px 0 0; }
  .reviews__bar { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; }
  .reviews__nav { width: 40px; height: 40px; }
  .reviews__count { display: flex; align-items: center; gap: 12px; }
  .reviews__line { width: 32px; height: 1px; background: var(--c-accent); }

  .contacts { padding-bottom: 96px; }
  .contacts__intro p { padding: 4px 0 64px; border: 0; }
  .contacts__box { display: block; padding: 0; }
  .contacts__photo { display: none; }
}