/* Главная, 25.09.2026 (решение владельца): «Почему выбирают», «Материалы» и «Как мы работаем»
   переделаны — раньше мелкий текст лежал поверх фото и плохо читался. Теперь фото отдельно,
   текст крупный на спокойном фоне. Отдельный файл: у сайта кэш CSS на 10 лет. */

.founder-photo img { object-position: center 18%; }

/* Почему выбирают */
.why { padding: 96px 0; background: var(--bg, #FAFAF8); }
.why-wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.why-photo { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9e5dd; }
.why-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
.why-body h2, .mat-head h2, .steps-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.05;
  font-size: clamp(34px, 4.4vw, 56px); color: var(--text, #1C1B19); margin: 10px 0 0; letter-spacing: -0.01em;
}
.why-list { list-style: none; margin: 34px 0 0; padding: 0; }
.why-list li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border, #E6E2DA); }
.why-list li:last-child { border-bottom: 1px solid var(--border, #E6E2DA); }
.why-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; line-height: 1; color: var(--accent, #2C5B92); }
.why-list h3, .mat-card h3, .steps-list h3 { font: 600 21px/1.25 Inter, sans-serif; color: var(--text, #1C1B19); margin: 0 0 6px; }
.why-list p, .mat-card p, .steps-list p { font-size: 16.5px; line-height: 1.55; color: var(--text-muted, #6F6858); margin: 0; }

/* Материалы — тёмный блок для ритма между светлыми */
.mat { padding: 96px 0; background: #171613; color: #F3EDE2; }
.mat .eyebrow { color: #D9B77E; }
.mat .eyebrow::before { background: #D9B77E; }
.mat-head { max-width: 760px; }
.mat-head h2 { color: #F7F2EA; }
.mat-head p { font-size: 18px; line-height: 1.55; color: rgba(243, 237, 226, 0.72); margin: 18px 0 0; }
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 18px; margin-top: 44px; }
.mat-photo { grid-column: 1 / -1; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 21 / 8; }
.mat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-card { background: #211F1B; border: 1px solid rgba(243, 237, 226, 0.1); border-radius: 20px; padding: 30px 28px 32px; }
.mat-stat { display: inline-block; font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #171613; background: #D9B77E; border-radius: 999px; padding: 8px 12px; margin-bottom: 20px; }
.mat-card h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(30px, 3vw, 40px); font-weight: 600; line-height: 1.05; color: #F7F2EA; margin-bottom: 12px; }
.mat-card p { color: rgba(243, 237, 226, 0.72); }

/* Как мы работаем — шаги с крупными номерами */
.steps { padding: 96px 0; background: var(--bg-alt, #F1EEE7); }
.steps-head { max-width: 820px; }
.steps-list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.steps-list li { position: relative; background: var(--surface, #fff); border-radius: 20px; padding: 28px 24px 30px; }
.steps-num { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 58px; line-height: .9; color: var(--accent, #2C5B92); margin-bottom: 22px; }
.steps-tag { display: inline-block; margin-top: 16px; font: 600 13px/1 Inter, sans-serif; color: var(--accent-dark, #1F3F66); background: var(--surface-2, #EAF1F8); border-radius: 999px; padding: 8px 12px; }
.steps-photo { margin: 18px 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 21 / 7; }
.steps-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

@media (max-width: 1000px) {
  .why-wrap { grid-template-columns: 1fr; gap: 36px; }
  .why-photo { aspect-ratio: 4 / 3; }
  .mat-grid { grid-template-columns: 1fr; }
  .mat-photo { aspect-ratio: 16 / 9; }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why, .mat, .steps { padding: 64px 0; }
  .why-list li { grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; }
  .why-num { font-size: 28px; }
  .steps-list { grid-template-columns: 1fr; }
  .steps-num { font-size: 46px; margin-bottom: 14px; }
  .steps-photo { aspect-ratio: 4 / 3; }
}

/* «Показать ещё видео» (25.09): остальные 15 шортов канала раскрываются по кнопке. */
.videos-extra { margin-top: 14px; }
.videos-extra[hidden] { display: none; }
.videos-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.videos-more-wrap[hidden] { display: none; }

/* 25.09, вечер: «Как мы работаем» — вместо одной широкой полосы (резала шкаф) ряд из 4 целых
   фото работ; «О компании» — текст на светлом фоне + ровное фото рядом (было фото под углом
   с текстом поверх). */
.steps-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.steps-photos figure { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9e5dd; }
.steps-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about2 { padding: 96px 0 40px; }
.about2-wrap { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.about2-text h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.05; color: var(--text, #1C1B19); }
.about2-text > p { font-size: 17px; line-height: 1.6; color: var(--text-muted, #6F6858); margin: 0 0 14px; }
.about2-text .about-values h4 { font: 600 17px/1.3 Inter, sans-serif; color: var(--text, #1C1B19); margin: 0 0 4px; }
.about2-text .about-values p { font-size: 15px; line-height: 1.5; color: var(--text-muted, #6F6858); margin: 0; }
.about2-photo { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9e5dd; }
.about2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) {
  .about2-wrap { grid-template-columns: 1fr; gap: 32px; }
  .about2-photo { aspect-ratio: 4 / 3; }
  .steps-photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .about2 { padding: 64px 0 24px; } .steps-photos { gap: 10px; } }