/* ============================================================
   Главная: блоки под запрос «эвакуатор Москва».
   Отдельный файл — прежние стили не правим, только дополняем.
   ============================================================ */

/* Шрифт со своего сервера: Google Fonts задерживал первый экран почти на секунду */
@font-face{font-family:"Onest";font-weight:300 400;font-display:swap;
  src:url(/assets/fonts/onest-cyr.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:300 400;font-display:swap;
  src:url(/assets/fonts/onest-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* первый экран виден сразу, без ожидания скриптов: заголовок — главный блок страницы */
.phero .rise{ opacity:1; transform:none; filter:none; }
.phero__sub{ text-wrap:balance; }

.ms{ padding:var(--s6) var(--pad) 0; }
.ms__head{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:var(--s4);
  padding-bottom:var(--s5);
}
.ms__head h2{ font-size:clamp(2rem,4.6vw,4.4rem); }
.ms__head p:not(.label){ margin-top:var(--s3); max-width:52ch; color:var(--t2); text-wrap:balance; }

.ms-list{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s5);
}
.ms-list li{ border-top:1px solid var(--hair); padding-top:16px; }
.ms-list h3{ margin-top:10px; font-size:clamp(19px,1.7vw,24px); line-height:1.08; letter-spacing:-.02em; }
.ms-list p{ margin-top:8px; max-width:44ch; font-size:14px; color:var(--t2); text-wrap:balance; }

.ms .spec{ margin-top:0; grid-template-columns:repeat(3,minmax(0,1fr)); }

.ms-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ms-gallery figure{ margin:0; border-radius:var(--r); overflow:hidden; background:var(--surface); }
.ms-gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 800ms var(--e); }
.ms-gallery figure:hover img{ transform:scale(1.04); }

.ms-faq{ max-width:860px; }
.ms-faq details{ border-top:1px solid var(--hair); }
.ms-faq details:last-child{ border-bottom:1px solid var(--hair); }
.ms-faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:20px 0; font-size:clamp(17px,1.5vw,21px); line-height:1.3;
}
.ms-faq summary span{ text-wrap:balance; }
.ms-faq summary::-webkit-details-marker{ display:none; }
.ms-faq summary svg{ flex:none; transition:transform 520ms var(--e); }
.ms-faq details[open] summary svg{ transform:rotate(45deg); }
.ms-faq details p{ padding:0 0 22px; max-width:62ch; color:var(--t2); }

@media (max-width:1080px){
  .ms__head{ grid-template-columns:1fr; gap:var(--s3); }
}
@media (max-width:720px){
  .ms-list{ grid-template-columns:1fr; gap:var(--s3); }
  .ms .spec{ grid-template-columns:1fr 1fr; }
  .ms-gallery{ grid-template-columns:1fr 1fr; }
  .ms-gallery figure:first-child{ grid-column:1 / -1; }
  .ms-faq summary{ font-size:16px; }
}

/* самые узкие телефоны: шапка с тремя кнопками не помещалась */
@media (max-width:340px){
  .hdr .hdr__quick{ gap:4px; }
  .hdr__quick .ico{ width:44px; height:44px; }
  .hdr__call{ min-height:44px; padding:0 12px; font-size:14px; }
  .hdr__mark{ font-size:12px; letter-spacing:.06em; }
  .pl__table{ font-size:13.5px; }
  .pl__table td, .pl__table thead th{ padding-left:8px; }
  .pl__table tbody th{ padding-right:8px; }
}