/* =========================================================================
   Гараж76 — ремонт гаражей в Ярославле
   Палитра: тёплый крафт. Акцент — «сталь» (--steel), и только на цифрах,
   единицах измерения и служебных метках. Терракоты здесь намеренно нет:
   сталь читается как оцинковка и чертёж, то есть как мир гаража.
   Шрифты только системные — никаких внешних загрузок, это держит скорость,
   а скорость Яндекс учитывает в ранжировании.
   ========================================================================= */

:root{
  --paper:   #F2EADC;   /* основной фон */
  --paper-2: #E7DCC9;   /* чередующиеся секции */
  --form:    #FAF5EC;   /* бланк сметы, карточки */
  --ink:     #231D17;   /* основной текст */
  --ink-2:   #6A5B4C;   /* вторичный текст */
  --line:    #D5C7B0;   /* линейки */
  --line-2:  #C0AE92;   /* акцентные линейки */
  --deep:    #2C2017;   /* кнопки, тёмные плашки, футер */
  --steel:   #44576B;   /* цифры, единицы, метки */
  --alert:   #8E3B22;   /* ошибки формы */

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1120px;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --gap: clamp(3.25rem, 7vw, 6rem);
  --radius: 3px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
@media (min-width:768px){ body{ font-size:1.0625rem; } }

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{ margin:0; line-height:1.1; font-weight:650; letter-spacing:-.025em; }
h1{ font-size:clamp(2.05rem, 6.2vw, 3.9rem); letter-spacing:-.037em; line-height:1.03; }
h2{ font-size:clamp(1.55rem, 3.6vw, 2.45rem); }
h3{ font-size:1.125rem; letter-spacing:-.015em; }
p{ margin:0; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--steel);
  outline-offset:3px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--pad); top:.5rem; z-index:100; background:var(--deep); color:var(--paper); padding:.6rem 1rem; }

/* ---------- Служебная типографика ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 .9rem;
}
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--steel); }
.unit{ font-family:var(--mono); font-size:.8em; color:var(--steel); }

.lead{ font-size:clamp(1.02rem, 2.1vw, 1.2rem); color:var(--ink-2); line-height:1.6; }

/* ---------- Кнопки ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:.85rem 1.6rem;
  background:var(--deep); color:var(--paper);
  font:inherit; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; border:1px solid var(--deep); border-radius:var(--radius);
  cursor:pointer; transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:#3D2C20; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--paper-2); }
.btn--wide{ width:100%; }

/* ---------- Шапка ---------- */

.head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head__in{ display:flex; align-items:center; gap:1rem; min-height:64px; }
/* Логотип: знак + текстовый логотип. Текст нужен, потому что надпись внутри
   круглой эмблемы на 40 px уже нечитаема — знак работает как силуэт. */
.brand{
  display:inline-flex; align-items:center; gap:.58rem;
  font-weight:700; font-size:1.06rem; letter-spacing:-.035em; line-height:1.05;
  text-decoration:none; margin-right:auto; color:var(--ink);
}
.brand img{ height:40px; width:auto; flex:0 0 auto; }
.brand__txt{ white-space:nowrap; }
.brand__n{ font-family:var(--mono); color:var(--steel); font-weight:600; margin-left:.3em; }

.brand--foot{ font-size:1.12rem; color:#E3D7C4; }
.brand--foot img{ height:46px; }
.brand--foot .brand__n{ color:#9C8B73; }

.nav{ display:none; gap:1.4rem; }
.nav a{ text-decoration:none; font-size:.95rem; color:var(--ink-2); }
.nav a:hover{ color:var(--ink); }

.head__tel{ display:none; font-family:var(--mono); font-size:.92rem; text-decoration:none; white-space:nowrap; }
.head .btn{ min-height:42px; padding:.5rem 1.05rem; font-size:.92rem; }

/* На телефоне в шапке обе кнопки — «Позвонить» и «Написать». Раньше звонок
   жил только в нижней липкой панели; панель убрана, шапка липкая, так что
   оба действия теперь всегда на виду. На десктопе вместо кнопки показывается
   сам номер (.head__tel), поэтому кнопка там прячется. */
.head__call{ display:inline-flex; align-items:center; white-space:nowrap; }
@media (min-width:900px){ .head__call{ display:none; } }
@media (max-width:899px){
  .head__in{ gap:.55rem; }
  .head .btn{ padding:.5rem .7rem; font-size:.85rem; }
  /* Логотип и кнопки стоят впритык: без этого зазора «76» липнет к рамке
     «Позвонить». Именно padding, а не margin — margin-right:auto у .brand
     раздвигает шапку, и его перебивать нельзя. */
  .brand{ padding-right:.45rem; }
}
/* Ниже ~380 px (iPhone SE, старые андроиды) бургер, знак, «Позвонить»
   и «Написать» перестают помещаться в строку и наезжают друг на друга.
   Жертвуем текстовым логотипом: эмблема остаётся, обе кнопки важнее. */
@media (max-width:380px){
  .brand__txt{ display:none; }
  .head__in{ gap:.4rem; }
  .head .btn{ padding:.5rem .6rem; font-size:.82rem; }
}

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; margin-left:-.4rem;
  background:none; border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;
}
.burger span::before{ transform:translateY(-6px); }
.burger span::after{ transform:translateY(4.5px); }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-1.5px) rotate(-45deg); }

@media (min-width:900px){
  .burger{ display:none; }
  .nav{ display:flex; }
  .head__tel{ display:inline; }
}
@media (max-width:899px){
  .nav{
    /* display обязателен: базовое правило выше — .nav{display:none}, и без
       этой строки меню на телефоне не открывалось никаким способом.
       Показом и скрытием управляет атрибут hidden, который ставит JS. */
    display:flex;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.4rem var(--pad) 1rem;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:.75rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav a:last-child{ border-bottom:0; }
}

/* ---------- Секции ---------- */

.section{ padding-block:var(--gap); }
/* Липкая шапка перекрывает заголовок при переходе по якорю — отступаем */
[id]{ scroll-margin-top:84px; }
.section--alt{ background:var(--paper-2); }
.section--deep{ background:var(--deep); color:var(--paper); }
.section__head{ max-width:44ch; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.section__head p{ margin-top:.9rem; }

/* ---------- Первый экран ---------- */

.hero{ padding-block:clamp(2.5rem,6vw,4.5rem) var(--gap); }
.hero__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width:940px){
  .hero__grid{ grid-template-columns:1.12fr .88fr; align-items:start; }
}
.hero__claim{ margin-top:1.3rem; max-width:34ch; font-size:clamp(1.02rem,2.1vw,1.22rem); color:var(--ink-2); }
.hero__claim b{ color:var(--ink); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.hero__note{ margin-top:1.4rem; font-size:.88rem; color:var(--ink-2); }

/* Карточка условий — читается как строки договора */
.terms{ background:var(--form); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.1rem,3vw,1.6rem); }
.terms__label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin:0 0 1rem; }
.terms__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.72rem 0; border-top:1px solid var(--line); }
.terms__row:first-of-type{ border-top:0; padding-top:0; }
.terms__k{ color:var(--ink-2); font-size:.94rem; }
.terms__v{ font-family:var(--mono); font-size:.94rem; color:var(--steel); text-align:right; }

/* ---------- Неисправности ---------- */

.faults{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:700px){ .faults{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .faults{ grid-template-columns:1fr 1fr 1fr; } }
.fault{ background:var(--paper); padding:clamp(1.3rem,3vw,1.8rem); }
.fault__tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.fault h3{ margin:.7rem 0 .55rem; }
.fault p{ color:var(--ink-2); font-size:.95rem; }
.fault__price{ display:block; margin-top:.9rem; font-family:var(--mono); font-size:.88rem; color:var(--steel); }

/* ---------- Смета: сигнатурный элемент ---------- */

.sheet{
  /* Уже контейнера: иначе на десктопе между названием работы и ценой
     возникает пустая пропасть и строка перестаёт читаться как строка */
  max-width:920px;
  background:var(--form);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  /* поле слева — как у настоящего бланка под подшивку */
  border-left:3px solid var(--steel);
  overflow:hidden;
}
.sheet__top{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  padding:clamp(1rem,2.6vw,1.35rem) clamp(1.1rem,3vw,1.7rem);
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.sheet__group{ padding:clamp(1.1rem,3vw,1.6rem) clamp(1.1rem,3vw,1.7rem); border-bottom:1px solid var(--line); }
.sheet__group:last-of-type{ border-bottom:0; }
.sheet__group h3{ margin:0 0 .9rem; font-size:1.02rem; }
.sheet__rows{ list-style:none; margin:0; padding:0; }
.sheet__row{
  display:grid; grid-template-columns:1fr auto; gap:.35rem 1rem;
  align-items:baseline; padding:.62rem 0; border-top:1px dotted var(--line-2);
}
.sheet__row:first-child{ border-top:0; padding-top:0; }
.sheet__name{ font-size:.95rem; }
.sheet__val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.92rem; color:var(--steel); white-space:nowrap; }
.sheet__foot{
  padding:clamp(1rem,2.6vw,1.35rem) clamp(1.1rem,3vw,1.7rem);
  background:var(--paper-2); border-top:1px solid var(--line-2);
  font-size:.92rem; color:var(--ink-2);
}
.sheet__foot b{ color:var(--ink); font-weight:600; }

/* ---------- Полоса про ворота ---------- */

.band__grid{ display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (min-width:860px){ .band__grid{ grid-template-columns:1.05fr .95fr; } }
.section--deep .eyebrow{ color:#B9A98F; }
.section--deep .lead{ color:#C9BCA8; }
.section--deep .btn{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
.section--deep .btn:hover{ background:#fff; }
.band__list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:#42342A; border:1px solid #42342A; border-radius:var(--radius); }
.band__list li{ background:var(--deep); padding:.85rem 1.1rem; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:.94rem; }
.band__list .num{ color:#C4B49A; white-space:nowrap; }

/* ---------- Работы ---------- */

.works{ display:grid; gap:clamp(.7rem,1.8vw,1rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .works{ grid-template-columns:repeat(3,1fr); } }
.work{ margin:0; }
.work img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-2); }
.work figcaption{ margin-top:.55rem; font-size:.85rem; color:var(--ink-2); }
.work--empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:4/3; border:1px dashed var(--line-2); border-radius:var(--radius);
  background:var(--paper-2); color:var(--ink-2);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:1rem;
}

/* ---------- Порядок работы: здесь нумерация оправдана, это шаги ---------- */

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--paper); padding:clamp(1.2rem,3vw,1.6rem); }
.step__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--steel); }
.step h3{ margin:.7rem 0 .45rem; font-size:1rem; }
.step p{ font-size:.92rem; color:var(--ink-2); }

/* ---------- География ---------- */

.geo{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; padding:0; list-style:none; }
.geo li{
  font-family:var(--mono); font-size:.8rem; color:var(--steel);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:.35rem .7rem; background:var(--form);
}

/* ---------- Вопросы ---------- */

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-weight:600; font-size:1.02rem; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.25rem; color:var(--steel); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq__a{ padding:0 0 1.3rem; color:var(--ink-2); max-width:70ch; }
.faq__a p + p{ margin-top:.8rem; }

/* ---------- Связаться ---------- */

.form__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width:900px){ .form__grid{ grid-template-columns:1fr 1fr; } }

/* Кнопки в мессенджеры вместо формы заявки. Кнопки во всю ширину колонки:
   на телефоне это основной способ связи, промахнуться по ним нельзя. */
.write > p{ margin:0 0 1.2rem; color:var(--ink-2); line-height:1.6; }
.write .btn{ margin-bottom:.7rem; }
.write__note{ font-size:.92rem; color:var(--ink-2); margin:1.1rem 0 0; line-height:1.55; }

/* ---------- Форма (не используется, разметка в docs/отложено/) ---------- */

.field{ display:block; margin-bottom:1rem; }
.field > span{ display:block; font-size:.85rem; color:var(--ink-2); margin-bottom:.35rem; }
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--form); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.8rem .9rem; min-height:50px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--steel); outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--steel) 22%, transparent); }

.consent{ display:flex; gap:.65rem; align-items:flex-start; margin:1.1rem 0 1.3rem; font-size:.85rem; color:var(--ink-2); }
.consent input{ width:20px; height:20px; margin:.15rem 0 0; flex:0 0 auto; accent-color:var(--steel); }
.consent a{ color:var(--steel); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__msg{ margin-top:1rem; font-size:.92rem; }
.form__msg--err{ color:var(--alert); }
.form__msg--ok{ color:var(--steel); }

.contacts{ list-style:none; margin:1.4rem 0 0; padding:0; }
.contacts li{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line); font-size:.95rem; }
.contacts li:first-child{ border-top:0; }
.contacts span:first-child{ color:var(--ink-2); }
.contacts a, .contacts .num{ font-family:var(--mono); text-decoration:none; color:var(--steel); text-align:right; }

/* ---------- Подвал ---------- */

.foot{ background:var(--deep); color:#C9BCA8; padding-block:clamp(2.4rem,5vw,3.4rem); font-size:.9rem; }
.foot a{ color:#E3D7C4; }
.foot__grid{ display:grid; gap:1.8rem; }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.foot h4{ font-size:.72rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#9C8B73; margin-bottom:.9rem; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot__bottom{ margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid #42342A; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.82rem; color:#9C8B73; }

/* ---------- Мобильная панель действий ---------- */

/* Нижняя липкая панель убрана 17.09.2026: обе кнопки переехали в шапку,
   а она липкая — дублировать их внизу незачем. */

/* ---------- Текстовые страницы ---------- */

/* Контейнер выравниваем по общей сетке сайта, а длину строки ограничиваем
   у самих блоков: иначе текст документа центрируется и его левый край
   не совпадает с шапкой и хлебными крошками. */
.prose{ max-width:var(--wrap); }
.prose > *{ max-width:72ch; }
.prose h2{ margin:2.2rem 0 .9rem; font-size:1.35rem; }
.prose p, .prose li{ color:var(--ink-2); }
.prose p + p{ margin-top:.9rem; }
.prose ul, .prose ol{ margin:.9rem 0; padding-left:1.2rem; display:grid; gap:.45rem; }

.crumbs{ font-family:var(--mono); font-size:.75rem; color:var(--ink-2); padding-top:1.5rem; }
.crumbs a{ color:var(--steel); text-decoration:none; }
.crumbs span{ padding-inline:.4rem; color:var(--line-2); }

/* На узком экране кнопки первого экрана вставали лесенкой разной ширины —
   растягиваем на всю ширину, заодно тап-зона становится крупнее */
@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
}

/* ---------- Расчёт на типовой гараж ----------
   Отдельный блок, а не абзац: на страницах работ читателю нужна одна
   конкретная цифра, и она должна ловиться взглядом без чтения текста. */
.calc{
  display:grid; gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden; max-width:920px;
}
@media (min-width:720px){ .calc{ grid-template-columns:repeat(3,1fr); } }
.calc__cell{ background:var(--form); padding:clamp(1.15rem,3vw,1.6rem); }
.calc__k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.calc__v{
  font-size:clamp(1.45rem,3.4vw,1.95rem); font-weight:650;
  letter-spacing:-.03em; line-height:1.1; margin:.55rem 0 .35rem;
}
.calc__note{ font-size:.86rem; color:var(--ink-2); }
.calc + p{ margin-top:1.2rem; font-size:.9rem; color:var(--ink-2); max-width:70ch; }

/* Узкий экран: сокращаем текстовый логотип до «Гараж76». Полное имя всё равно
   остаётся на самом знаке рядом. */
@media (max-width:430px){
  .brand{ font-size:.98rem; gap:.45rem; }
  .brand img{ height:34px; }
  .brand__pre{ display:none; }
}

/* ---------- Примечание под чекбоксом согласия ---------- */
.consent__note{ margin:-.6rem 0 1.2rem 1.85rem; font-size:.8rem; color:var(--ink-2); }
.consent__note a{ color:var(--steel); }

/* ---------- Баннер про cookie ----------
   Пока посетитель не выбрал, нижнюю панель действий прячем: две полосы
   друг на друге внизу экрана — это каша. */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--form); border-top:1px solid var(--line-2);
  padding:clamp(.9rem,2.5vw,1.15rem) var(--pad) calc(clamp(.9rem,2.5vw,1.15rem) + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(35,29,23,.10);
}
.cookie__in{ max-width:var(--wrap); margin-inline:auto; display:grid; gap:.85rem; align-items:center; }
@media (min-width:820px){ .cookie__in{ grid-template-columns:1fr auto; gap:1.8rem; } }
.cookie p{ font-size:.87rem; line-height:1.55; color:var(--ink-2); max-width:78ch; }
.cookie a{ color:var(--steel); }
.cookie__btns{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie .btn{ min-height:44px; padding:.6rem 1.15rem; font-size:.92rem; }