/* =========================================================
   Ремонт Стиралок Астана
   Реализация дизайна «Лендинг ремонт стиральных машин.dc.html»
   Onest — заголовки, Golos Text — текст, JetBrains Mono — лейблы
   ========================================================= */

:root{
  --blue:#2f7fe0;
  --blue-dk:#1b62b8;
  --blue-lt:#4f96ea;

  --ink:#14181d;
  --muted:#55606d;
  --label:#6b7684;
  --faint:#8b96a3;
  --copy:#a6afba;

  --line:#eceff3;
  --line-2:#dde3ea;
  --alt:#fafbfd;
  --row-hover:#fafcfe;

  --dark:#101418;
  --dark-line:#22282d;
  --dark-line-2:#2c3439;
  --dark-text:#dfe4e9;

  --stripe-lt:repeating-linear-gradient(135deg,#f1f5fa 0 12px,#e7eef7 12px 24px);
  --stripe-bl:repeating-linear-gradient(135deg,#dbe9f8 0 14px,#cfe1f6 14px 28px);

  /* Вертикальная вуаль для узких блоков, где текст идёт во всю ширину
     и боковой градиент не помогает. Плотность подобрана по контрасту
     белого текста на реальных пикселях фото. */
  --veil-v:linear-gradient(180deg,
    rgba(10,25,45,.48) 0%,
    rgba(10,25,45,.60) 25%,
    rgba(10,25,45,.84) 80%,
    rgba(10,25,45,.90) 100%);

  --sans:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head:'Onest', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --pad:48px;          /* горизонтальные поля секций */
  --max:1680px;        /* предел ширины контента на широких экранах */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dk)}
::selection{background:#cfe3fb}

h1,h2,h3{margin:0;font-family:var(--head);font-weight:700;letter-spacing:-.03em;line-height:1.08}
p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ===================== NAV ===================== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;color:var(--ink)}
.nav__brand:hover{color:var(--ink)}
/* Логотип — словомарка в плашке, поэтому ширина по тексту, а не квадрат */
.logo{
  padding:9px 13px;border-radius:10px;background:var(--blue);
  display:inline-flex;align-items:center;flex:0 0 auto;
  color:#fff;font-family:var(--head);font-weight:800;font-size:15px;
  letter-spacing:-.02em;line-height:1;white-space:nowrap;
}
.logo--sm{padding:8px 11px;border-radius:9px;font-size:14px}
/* дескриптор рядом с логотипом — приглушён, чтобы не спорить с ним */
.nav__word{font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap}

.nav__links{display:flex;align-items:center;gap:28px;font-size:14.5px;flex:0 1 auto;overflow:hidden}
.nav__links a{color:var(--label);white-space:nowrap}
.nav__links a:hover{color:var(--blue)}

.nav__act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__tel{
  display:flex;align-items:center;gap:8px;padding:10px 18px;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:border-color .16s,color .16s;
}
.nav__tel:hover{border-color:var(--blue);color:var(--blue)}
.nav__call{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink);font-size:17px;flex:0 0 auto;
}
.nav__call:hover{border-color:var(--blue);color:var(--blue)}
.nav__cta{
  padding:11px 20px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:14.5px;font-weight:600;white-space:nowrap;flex:0 0 auto;
  transition:background .16s;
}
.nav__cta:hover{background:var(--blue-dk);color:#fff}

/* ===================== БЛОКИ С ФОТО =====================
   Фото задаётся переменной --img на самом элементе:
   style="--img:url('/assets/photos/photo3.webp')"
   Без --img показывается серо-голубая штриховка-заглушка.
   Смещение кадра внутри блока — переменной --pos (см. ниже).
   ========================================================= */
.ph{
  position:relative;
  background-image:var(--img, var(--stripe-lt));
  background-size:cover;
  /* --pos сдвигает кадр внутри блока: широкие блоки обрезают фото сверху
     и снизу, и центральная обрезка срезает голову мастера */
  background-position:var(--pos, center);
  display:flex;align-items:center;justify-content:center;
}
.ph--blue{background-image:var(--img, var(--stripe-bl))}
.ph__note{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;text-align:center;
  color:#5c7896;max-width:320px;padding:20px;
}
.ph--blue > .ph__note{color:#3d6893}
.ph--tall{margin-top:40px;height:340px;border-radius:16px;padding:24px}
.ph--tall .ph__note{max-width:300px}
.ph--tile{aspect-ratio:4/5;border-radius:14px;overflow:hidden;align-items:flex-end;justify-content:flex-start}
.ph--tile .ph__note{font-size:11px}
.ph--tile figcaption{
  position:relative;width:100%;padding:44px 18px 16px;
  background:linear-gradient(180deg,rgba(10,25,45,0) 0%,rgba(10,25,45,.78) 100%);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;
}
.ph__note--tl,.ph__note--br{
  position:absolute;z-index:2;text-align:left;max-width:none;
  padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.92);
  font-size:11.5px;letter-spacing:.02em;color:var(--blue-dk);
}
.ph__note--tl{top:24px;left:24px}
.ph__note--br{right:24px;bottom:24px;max-width:320px;font-size:11px;line-height:1.5}

/* ===================== HERO ===================== */
.hero-wrap{padding:0 20px 20px}
.hero{
  position:relative;height:640px;border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
}
/* Затемнение под текстом. Заголовок приходится на окно с жалюзи — самое
   светлое место кадра, поэтому вуаль набирает плотность к 28% высоты, где
   начинается h1. Верхние 12% остаются светлыми: там текста нет и фото видно.
   Контраст белого текста: заголовок 3.8:1 (норма 3.0 для 68px),
   подзаголовок 9.0:1 (норма 4.5). */
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,25,45,.18) 0%,
    rgba(10,25,45,.26) 12%,
    rgba(10,25,45,.55) 28%,
    rgba(10,25,45,.80) 72%,
    rgba(10,25,45,.88) 100%);
}
.hero__body{position:relative;padding:56px 60px 60px;max-width:1000px}
.hero h1{font-size:68px;line-height:1.03;color:#fff;text-wrap:balance}
.hero__sub{margin-top:22px;font-size:18.5px;line-height:1.5;color:rgba(255,255,255,.9);max-width:620px}

/* ===================== КНОПКИ ===================== */
.btns{display:flex;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:999px;font-size:16px;font-weight:600;
  transition:background .16s,color .16s,border-color .16s;
}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#eef4fc;color:var(--ink)}
.btn--glass{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:500}
.btn--glass:hover{background:rgba(255,255,255,.26);color:#fff}
.btn--blue{background:var(--blue);color:#fff;font-size:16.5px;padding:17px 32px}
.btn--blue:hover{background:var(--blue-dk);color:#fff}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border:1px solid var(--line-2);border-radius:999px;
  font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:border-color .16s,color .16s;
}
.pill:hover{border-color:var(--blue);color:var(--blue)}
.pill--dark{border-color:var(--dark-line-2);color:#fff}
.pill--dark:hover{border-color:var(--blue-lt);color:var(--blue-lt)}

/* ===================== ПОЛОСА ЦИФР ===================== */
.strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:40px 0 0;
}
.strip__i{padding:38px var(--pad);border-right:1px solid var(--line)}
.strip__i:last-child{border-right:0}
.strip__n{font-family:var(--head);font-weight:700;font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--blue)}
.strip__l{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--label);
}

/* ===================== ОБЩЕЕ ДЛЯ СЕКЦИЙ ===================== */
.sect{padding:110px var(--pad) 90px}
.sect--alt{padding:90px var(--pad) 100px;background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.kicker{
  display:flex;align-items:center;gap:10px;margin-bottom:56px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);
}
.kicker__dot{width:7px;height:7px;border-radius:999px;background:var(--blue);flex:0 0 auto}
.kicker--dark{color:var(--faint)}
.kicker--dark .kicker__dot{background:var(--blue-lt)}

h2{font-size:46px}
.sect__lead{margin-top:20px;font-size:17px;line-height:1.6;color:var(--muted);max-width:460px}

.split{display:grid;align-items:start}
.split--services{grid-template-columns:1fr 1.15fr;gap:80px}
.split--services .sect__lead{max-width:440px}
.split--head{grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:48px}

/* ===================== ЦЕНЫ ===================== */
.price li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 4px;border-bottom:1px solid var(--line);
  transition:background .14s;
}
.price li:hover{background:var(--row-hover)}
.price h3{font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:-.01em}
.price h3 small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue);
}
.price span{font-size:17px;font-weight:500;color:var(--blue);white-space:nowrap}
.price__note{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--faint)}

/* ===================== ШАГИ ===================== */
/* minmax(0,1fr) вместо 1fr — иначе длинная строка внутри карточки
   растягивает свою колонку и все четыре расходятся по ширине.

   Ряды заданы на контейнере, а карточки их наследуют через subgrid:
   номер, заголовок и описание встают на одну линию во всех четырёх.
   Раньше карточка была flex со space-between, и содержимое прижималось
   к низу — у короткого текста (шаг 04) заголовок уезжал вниз. */
.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto minmax(64px,1fr) auto;
  gap:16px;
}
.step{
  grid-row:span 3;
  display:grid;grid-template-rows:subgrid;row-gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px;
}
.step h3{align-self:end}
.step--accent{background:var(--blue);border-color:var(--blue);color:#fff}
.step__tag{
  display:flex;gap:14px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--label);
}
.step__tag b{font-weight:400}
.step__tag span{text-transform:uppercase}
.step--accent .step__tag{color:#fff}
.step h3{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.01em}
.step__txt{font-size:14.5px;line-height:1.55;color:var(--muted)}
.step--accent .step__txt{color:rgba(255,255,255,.86)}

/* ===================== НАШИ РАБОТЫ ===================== */
.works__head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:44px}
.works__head .kicker{margin-bottom:26px}
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* ===================== О СЕРВИСЕ ===================== */
.about{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-top:1px solid var(--line)}
.about__ph{min-height:520px;padding:40px}
.about__body{padding:96px 60px;display:flex;flex-direction:column;justify-content:center}
.about__body .kicker{margin-bottom:26px}
.about__body h2{font-size:44px}
.facts{display:grid;gap:22px;margin-top:34px;max-width:500px}
.facts li{padding-bottom:22px;border-bottom:1px solid var(--line)}
.facts li:last-child{padding-bottom:0;border-bottom:0}
.facts h3{display:flex;gap:14px;font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:-.01em}
.facts h3 span{color:var(--blue)}
.facts p{margin-top:8px;padding-left:28px;font-size:16px;line-height:1.6;color:var(--muted)}

/* ===================== ОТЗЫВЫ ===================== */
.reviews{background:var(--dark);color:#fff;padding:100px var(--pad)}
.reviews .kicker{margin-bottom:40px}
.reviews .split--head{margin-bottom:52px}
.revs__ctl{display:flex;align-items:center;gap:10px;justify-self:end}
.revs__btn{
  width:44px;height:44px;flex:0 0 auto;border-radius:999px;
  border:1px solid var(--dark-line-2);background:transparent;color:#fff;
  font-family:var(--sans);font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .16s,color .16s,opacity .16s;
}
.revs__btn:hover:not(:disabled){border-color:var(--blue-lt);color:var(--blue-lt)}
.revs__btn:disabled{opacity:.3;cursor:default}

/* Карусель: нативный горизонтальный скролл со snap — работает свайпом
   на телефоне, колесом на трекпаде и стрелками при фокусе. JS только
   для кнопок ← → и их блокировки на краях. */
.revs{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.revs::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;
  border:1px solid var(--dark-line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:18px;min-height:260px;
}
.rev__stars{font-size:15px;letter-spacing:.12em;color:#f5a524;line-height:1}
.rev__stars i{font-style:normal;color:var(--dark-line-2)}
.rev blockquote{font-size:15.5px;line-height:1.55;color:var(--dark-text)}
.rev figcaption{
  margin-top:auto;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--faint);
}
.rev__who{display:flex;flex-direction:column;gap:3px}
.rev__who b{font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;letter-spacing:0}
.rev__ava{
  width:40px;height:40px;border-radius:999px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#22282d;color:var(--blue-lt);
  font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.02em;
}

/* ===================== FAQ ===================== */
.faq-sect{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;padding:100px var(--pad)}
.faq-sect h2{font-size:44px}
.faq-sect .kicker{margin-bottom:26px}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:24px 0;
  font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:20px;color:var(--blue);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--blue-dk)}
.faq details > p{padding:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:620px}

/* ===================== CTA ===================== */
.cta-wrap{padding:20px}
.cta{
  position:relative;border-radius:24px;overflow:hidden;
  min-height:460px;display:flex;align-items:center;justify-content:flex-start;
}
/* Слева, под текстом, плотнее; справа кадр остаётся открытым.
   Контраст белого текста: заголовок 5.2:1, подзаголовок 6.2:1. */
.cta__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(10,25,45,.80) 0%,
    rgba(10,25,45,.66) 50%,
    rgba(10,25,45,.34) 100%);
}
.cta__body{position:relative;padding:70px 60px}
.cta__h{font-size:54px;line-height:1.05;color:#fff;max-width:700px;text-wrap:balance}
.cta__sub{margin-top:20px;font-size:18.5px;line-height:1.55;color:rgba(255,255,255,.9);max-width:520px}
.cta .btns{align-items:center;margin-top:36px}

/* ===================== FOOTER ===================== */
.ftr{border-top:1px solid var(--line);margin-top:40px}
.ftr__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding:60px var(--pad) 40px;
}
.ftr__name{font-family:var(--head);font-weight:700;font-size:16px}
.ftr__about{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--faint);max-width:320px}
.ftr__col{display:grid;gap:12px;align-content:start;font-size:14.5px}
.ftr__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.ftr__col a{color:var(--muted)}
.ftr__col a:hover{color:var(--blue)}
.ftr__col span{color:var(--faint)}
.ftr__addr{font-style:normal;color:var(--muted);line-height:1.55}
.ftr__copy{padding:0 var(--pad) 40px;font-size:13px;color:var(--copy)}

/* ===================== ОГРАНИЧЕНИЕ ШИРИНЫ НА ULTRAWIDE ===================== */
@media (min-width:1681px){
  .nav,.strip,.sect,.reviews,.about,.faq-sect,.ftr__grid,.ftr__copy,
  .hero-wrap,.cta-wrap{
    max-width:var(--max);margin-left:auto;margin-right:auto;
  }
  .ftr__copy{width:100%}
}

/* ===================== АДАПТИВ ===================== */
@media (max-width:1150px){
  .nav__links{display:none}

  /* Боковой градиент баннера работает, только пока заголовок (max-width 700px)
     занимает левую часть широкого блока. На узком экране он растягивается
     во всю ширину и заезжает в светлую зону — переходим на вертикальную вуаль. */
  .cta__veil{background:var(--veil-v)}
}

@media (max-width:820px){
  :root{--pad:20px}
  html{scroll-padding-top:80px}

  .m-c1{grid-template-columns:1fr !important;gap:28px !important}
  /* minmax(0,…), иначе длинный адрес в подвале растягивает свою колонку */
  .m-c2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .m-padv{padding-top:56px !important;padding-bottom:56px !important}
  .m-h1{font-size:36px !important}
  .m-h2{font-size:30px !important}
  .m-hero{height:auto !important;min-height:560px !important}
  .m-wrap{flex-wrap:wrap !important;gap:24px !important}
  .m-cta{flex-wrap:wrap !important}
  .m-cta > .btn{flex:1 1 100% !important;text-align:center}
  /* в одну колонку subgrid не нужен: карточки уже не сравниваются между собой */
  .m-step{grid-row:auto;display:flex;flex-direction:column;gap:12px}
  .m-step h3{align-self:auto}

  /* полоса цифр складывается в сетку 2×2 */
  .m-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .m-strip > .strip__i{padding:26px 20px !important}
  .m-strip > .strip__i:nth-child(2n){border-right:none}
  .m-strip > .strip__i:nth-child(-n+2){border-bottom:1px solid var(--line)}

  .revs__ctl{justify-self:start}
  .rev{flex:0 0 calc(100% - 40px)}

  .nav__word,.nav__tel{display:none}
  .nav__call{display:flex}
  .nav__cta{min-width:0;font-size:14px;padding:11px 16px}

  /* На узком экране кадр обрезается по бокам, а не сверху, и текст занимает
     почти всю высоту блока — начиная с 7%. Десктопная вуаль там ещё светлая,
     поэтому на мобильном она плотнее и почти равномерная.
     Контраст: заголовок 3.5:1, подзаголовок 6.1:1. */
  .hero__veil{background:var(--veil-v)}

  .hero__body{padding:40px 20px 44px}
  .hero__sub{font-size:17px}
  .about__body{padding:56px 20px}
  .about__body h2,.faq-sect h2{font-size:30px}
  .about__ph{min-height:340px}
  .cta__body{padding:48px 20px}
  .cta__sub{font-size:17px}
  .faq-sect{gap:32px}
  .faq summary{font-size:19px}
  .price h3{font-size:19px}
  .strip__n{font-size:42px}
  .kicker{margin-bottom:32px}
}

/* Плейсхолдеры подписей к фото на узких экранах: остаются поверх кадра,
   но прижимаются к обоим краям, чтобы текст переносился, а не вылезал.
   После замены на реальные фото весь блок удаляется. */
@media (max-width:520px){
  .ph--tile .ph__note{font-size:10px;line-height:1.5;padding:12px}
  /* hero — колонка, поэтому подпись просто встаёт в поток над заголовком */
  .ph__note--tl{position:static;align-self:flex-start;margin:16px 16px 0;max-width:none}
  /* CTA — строка, подпись остаётся поверх кадра, текст отступает вниз */
  .ph__note--br{left:16px;right:16px;top:16px;bottom:auto;max-width:none}
  .cta__body{padding-top:104px}
  .ftr__grid{gap:28px 20px}
}

@media (prefers-reduced-motion:reduce){
  html,.revs{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important}
}