.about { color: #1C1D20; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; overflow-wrap: anywhere; } /* тексты из админки: длинный адрес или слово переносится, а не вылезает за край */

/* ===== Верхний блок ===== */
.about-hero { background: linear-gradient(180deg, #FFFFFF 0px, #FFFFFF calc(600 * var(--k)), #E9EAEB 100%); }
.about-hero .wrap { padding: calc(276 * var(--k)) 0 calc(200 * var(--k)); }
.page-title__muted { color: #8D8D8D; }

/* линия с синим кругом и логотипом поверх */
.about-hero__rule { position: relative; height: 1px; margin: calc(176 * var(--k)) calc(292 * var(--k)) 0 calc(315 * var(--k)); background: rgba(28,29,32,0.18); }
.about-hero__circle { position: absolute; left: calc(996 * var(--k)); top: calc(-106 * var(--k)); display: flex; align-items: center; justify-content: center; width: calc(211 * var(--k)); height: calc(211 * var(--k)); border-radius: 50%; background: #166FF5; }
/* логотип - AVIF 8 КБ (или WebP 7 КБ) вместо PNG 400 КБ; PNG - только браузерам без image-set */
.about-hero__logo { width: calc(50 * var(--k)); height: calc(70 * var(--k)); background: url('../images/logo-safronov.png') 49.415% 41.667% / 407.194% 291.753% no-repeat; background-image: image-set(url('../images/logo-safronov.avif') type('image/avif'), url('../images/logo-safronov.webp') type('image/webp')); }
/* свой знак из админки - картинкой, целиком */
.about-hero__logo--own { background: none; }
.about-hero__logo-img { position: relative; left: 12%; top: 8%; display: block; width: 80%; height: 80%; object-fit: contain; }

/* текст слева, фото справа */
.about-hero__body { position: relative; display: grid; grid-template-columns: max(260px, calc(346 * var(--k))) 1fr; column-gap: calc(68 * var(--k)); align-items: start; margin-top: calc(153 * var(--k)); padding: 0 calc(136 * var(--k)) 0 calc(315 * var(--k)); }
.about-hero__arrow { position: absolute; left: calc(158 * var(--k)); top: 0; width: max(20px, calc(28 * var(--k))); height: max(14px, calc(20 * var(--k))); overflow: visible; }
.about-hero__text { margin: calc(-6 * var(--k)) 0 0; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(32.5 / 19); color: #1C1D20; text-wrap: pretty; }
.about-hero__text + .about-hero__text { margin-top: 1em; }
/* тексты задаются в админке: длинная подпись переносится, а не заезжает на фото */
.about-hero__note { margin: calc(37.5 * var(--k)) 0 0; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(32 / 19); text-wrap: pretty; color: #6E6F73; }
.about-hero__media { overflow: hidden; aspect-ratio: 1055 / 1210; }
/* чуть крупнее рамки - запас под параллакс */
.about-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; scale: 1.12; }

/* ===== Услуги ===== */
.services,
.about-block { background: #E9EAEB; }
.has-motion .about-hero,
.has-motion .services,
.has-motion .about-block { background: var(--about-bg, #FFFFFF); }
.about ~ .cta { --curve-color: #E9EAEB; }
.services .wrap { padding: calc(140 * var(--k)) 0 calc(196 * var(--k)); }
.services__title { margin: 0; padding-left: calc(307 * var(--k)); font-weight: 400; font-size: max(32px, calc(66 * var(--k))); line-height: calc(80 / 66); letter-spacing: -0.01em; white-space: nowrap; color: #1C1D20; }
.services__list { display: grid; grid-template-columns: repeat(3, calc(380 * var(--k))); column-gap: calc(80 * var(--k)); margin-top: calc(80 * var(--k)); padding-left: calc(310 * var(--k)); }
.service__num { margin: 0; font-weight: 400; font-size: max(12px, calc(14 * var(--k))); line-height: calc(20 / 14); color: #6E6F73; }
.service__line { height: 1px; margin-top: calc(16 * var(--k)); background: rgba(28,29,32,0.18); }
.service__title { display: flex; align-items: center; gap: calc(14 * var(--k)); margin: calc(39 * var(--k)) 0 0 calc(-2 * var(--k)); font-weight: 400; font-size: max(26px, calc(46 * var(--k))); line-height: calc(56 / 46); letter-spacing: -0.01em; text-wrap: balance; color: #1C1D20; }
.service__title svg { flex: none; width: calc(38em / 46); height: calc(42em / 46); }
.service__text { margin: calc(36 * var(--k)) 0 0; font-weight: 400; font-size: max(15px, calc(18 * var(--k))); line-height: calc(32 / 18); color: #1C1D20; text-wrap: pretty; }
.service__text + .service__text { margin-top: 0.8em; }

/* ===== Как я работаю, сроки и цены, частые вопросы: строки с линиями между ними, на сером фоне услуг ===== */
.about-block .wrap { padding: 0 0 calc(196 * var(--k)); }
.steps__list,
.faq__list { margin: calc(80 * var(--k)) calc(310 * var(--k)) 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(28,29,32,0.18); }
/* колонки строки - по центру друг друга: номер этапа, вопрос в две строки, длинный ответ не уезжают вверх или вниз */
.step,
.faq__item { display: grid; align-items: center; padding: calc(44 * var(--k)) 0 calc(48 * var(--k)); border-top: 1px solid rgba(28,29,32,0.18); }
.step { grid-template-columns: calc(120 * var(--k)) calc(480 * var(--k)) minmax(0, 1fr); }
.step__num { margin: 0; font-weight: 400; font-size: max(12px, calc(14 * var(--k))); line-height: calc(20 / 14); color: #6E6F73; }
.step__title { margin: 0; padding-right: calc(40 * var(--k)); font-weight: 400; font-size: max(22px, calc(40 * var(--k))); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; color: #1C1D20; }
.step__text p,
.faq__a p { margin: 0; font-weight: 400; font-size: max(15px, calc(18 * var(--k))); line-height: calc(32 / 18); color: #1C1D20; text-wrap: pretty; }
.step__text p + p,
.faq__a p + p { margin-top: 0.8em; }

.prices__table { width: calc(100% - 620 * var(--k)); margin: calc(80 * var(--k)) calc(310 * var(--k)) 0; border-collapse: collapse; border-bottom: 1px solid rgba(28,29,32,0.18); }
.prices__table th,
.prices__table td { padding: calc(36 * var(--k)) 0 calc(40 * var(--k)); border-top: 1px solid rgba(28,29,32,0.18); font-weight: 400; text-align: left; vertical-align: baseline; color: #1C1D20; }
.prices__table thead th { padding: 0 0 calc(18 * var(--k)); border-top: 0; font-size: max(11px, calc(12 * var(--k))); line-height: calc(17 / 12); letter-spacing: 0.02em; text-transform: uppercase; color: #6E6F73; }
.prices__table tbody th { padding-right: calc(40 * var(--k)); font-size: max(22px, calc(40 * var(--k))); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.prices__table td { width: calc(300 * var(--k)); font-size: max(15px, calc(19 * var(--k))); line-height: calc(28 / 19); }
.prices__table td:last-child,
.prices__table th:last-child { text-align: right; }

/* ответ начинается там же, где описание этапа выше */
.faq__item { grid-template-columns: calc(520 * var(--k)) minmax(0, 1fr); column-gap: calc(80 * var(--k)); }
.faq__q { margin: 0; font-weight: 400; font-size: max(19px, calc(28 * var(--k))); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; color: #1C1D20; }

/* ===== Планшет: фото под текстом, услуги в колонку ===== */
@media (max-width: 900px) {
  .about-hero__body { grid-template-columns: 1fr; row-gap: 48px; }
  .about-hero__copy { max-width: 460px; }
  .services__list { grid-template-columns: 1fr; row-gap: 56px; max-width: 520px; }
  .step { grid-template-columns: calc(120 * var(--k)) minmax(0, 1fr); row-gap: 12px; }
  .step__text { grid-column: 2; }
  .faq__item { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}

/* ===== Телефон ===== */
@media (max-width: 767px) {
  .about-hero .wrap { padding: 150px 0 64px; }
  .about-hero__rule { margin: 72px 20px 0; }
  .about-hero__circle { left: auto; right: 24px; top: -48px; width: 96px; height: 96px; }
  .about-hero__logo { width: 24px; height: 34px; }
  .about-hero__body { row-gap: 40px; margin-top: 88px; padding: 0 20px; }
  .about-hero__arrow { position: static; width: 24px; height: 17px; }
  .about-hero__copy { max-width: none; }
  .about-hero__text { margin: 0; }
  .about-hero__note { margin-top: 24px; }

  .services .wrap { padding: 72px 0 80px; }
  .services__title { padding: 0 20px; font-size: 32px; white-space: normal; }
  .services__list { row-gap: 48px; max-width: none; margin-top: 40px; padding: 0 20px; }
  .service__line { margin-top: 12px; }
  .service__title { gap: 10px; margin: 20px 0 0; font-size: 26px; }
  .service__text { margin-top: 14px; }

  .about-block .wrap { padding: 0 0 80px; }
  .steps__list,
  .faq__list { margin: 40px 20px 0; }
  .step,
  .faq__item { padding: 24px 0 28px; }
  .step { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; }
  .step__title { padding-right: 0; font-size: 22px; }
  .faq__item { row-gap: 10px; }
  .faq__q { font-size: 19px; }

  .prices__table { width: calc(100% - 40px); margin: 40px 20px 0; }
  .prices__table th,
  .prices__table td { padding: 20px 0 24px 12px; }
  .prices__table th:first-child { padding-left: 0; }
  .prices__table thead th { padding-bottom: 12px; }
  .prices__table tbody th { padding-right: 0; font-size: 19px; }
  .prices__table td { width: auto; font-size: 14px; white-space: nowrap; } /* «от 80 000 ₽» не рвётся, переносится название */
}