@charset "UTF-8";
/* p6-service.css — служебные страницы круга 5 (kontakty.html, 404.html) по site/mandarin/DESIGN.md §11.
   Грузится после style.css и p6.css, перед k5.css. Цвета — только токены k5 (ель · мята · крем · белый и производные);
   радиусы --r-1 / --r-2 / --r-pill; тени --sh-1 / --sh-2 / --sh-d; кегли — шкала --fs-13 … --fs-64.
   Движение: только transform и opacity; скрытое стартовое состояние ставит gsap (site.js, [data-reveal]), в CSS opacity:0 нет;
   при html.still (k5.js) — конечные состояния без переходов. */

/* ---------- К1 · контакты на белом листе: письмо на креме слева, плашка адреса и форма справа ---------- */
.svc-contact{padding-block:clamp(48px,6vw,96px) clamp(96px,10vw,128px)}
.svc-head{display:grid;gap:24px;margin-bottom:clamp(48px,5vw,64px)}
.svc-head .h1{max-width:16ch}
.svc-head .lead{text-wrap:pretty}
.svc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:start}

/* письмо на креме — единственный бумажный предмет страницы (§2 крем) */
.svc-letter{position:relative;background:var(--cream);border-radius:var(--r-2);box-shadow:var(--sh-1);padding:clamp(32px,4vw,48px) clamp(24px,3.5vw,48px) clamp(32px,3.5vw,40px)}
.svc-letter__main{display:grid;gap:8px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.svc-letter .svc-letter__tel{justify-self:start;font-size:var(--fs-32);line-height:1.1;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.svc-letter__s{margin:0}
.svc-lines{margin:0}
.svc-line{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.svc-line dt{font:500 var(--fs-13)/1.35 var(--f-text);letter-spacing:.04em;color:var(--ink-3)}
.svc-line dd{margin:0;font:400 var(--fs-17)/1.55 var(--f-text);color:var(--ink);font-variant-numeric:tabular-nums}
.svc-line dd>a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .2s var(--curve)}
.svc-line dd>a:hover{border-color:var(--fir)}
.svc-line__s{display:block;margin-top:4px;font-size:var(--fs-15);line-height:1.5;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.svc-line__s a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color .2s var(--curve)}
.svc-line__s a:hover{color:var(--ink)}
.svc-sign{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px}
.svc-sign .small{margin:0;max-width:34ch}
.svc-seal{--s:128px;flex:none;margin:-8px 0 -16px}
.svc-seal .seal__big{font-size:var(--fs-24);line-height:1.05;max-width:76%;text-shadow:none}

/* правая колонка: плашка мяты — только пиктограмма и ссылка на карту (адрес живёт в письме, один раз), затем форма на белом */
.svc-side{display:grid;gap:clamp(32px,4vw,48px);align-content:start}
.svc-map{display:flex;align-items:center;gap:16px;background:var(--mint);border-radius:var(--r-2);padding:clamp(20px,2.5vw,28px) clamp(24px,3vw,32px)}
.svc-map__pin{width:28px;height:28px;flex:none;color:var(--fir)}

/* форма: окно перезвона — вкладки подчёркиванием (§6), поля — k5 (белые, обводка 1 px, --r-1), одна кнопка */
.svc-call{display:grid;gap:20px;padding-top:8px}
.svc-call[hidden]{display:none}
.svc-call__h{margin:0;font-size:var(--fs-32);line-height:1.15;max-width:none}
.svc-form{display:grid;gap:20px}
.svc-when{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.svc-when__lbl{padding:0;font:500 var(--fs-13)/1.35 var(--f-text);letter-spacing:.04em;color:var(--ink-3)}
.svc-when__row{display:flex;flex-wrap:wrap;gap:0 20px;border-bottom:1px solid var(--line)}
.svc-when label{position:relative;display:inline-block;padding:8px 0 10px;margin-bottom:-1px;border-bottom:2px solid transparent;font:500 var(--fs-15)/1.2 var(--f-text);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:color .2s var(--curve),border-color .2s var(--curve)}
.svc-when label:hover{color:var(--ink)}
.svc-when label.is-on{color:var(--ink);border-bottom-color:var(--fir)}
.svc-when label:has(input:focus-visible){outline:2px solid var(--fir);outline-offset:3px;border-radius:var(--r-1)}
.svc-form .field.is-bad input{border-color:var(--fir)}
.svc-err{display:flex;align-items:flex-start;gap:6px;margin:0;font:500 var(--fs-13)/1.4 var(--f-text);color:var(--fir)}
.svc-err[hidden]{display:none}
.svc-err svg{width:18px;height:18px;flex:none;margin-top:1px}
.svc-form__foot{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.svc-form__foot .small,.svc-form .micro{margin:0}
.svc-call--thanks{gap:16px}
.svc-call__p{margin:0}
.svc-call .small a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}

/* ---------- 404 · чистая ель на весь первый экран: заголовок, строка, одна белая кнопка и телефон;
   шапка над елью — body.k5-darkhero из k5.css (она же даёт секции верхний отступ под шапку); подвал --fir-2 отделён линией ---------- */
.svc-404{display:grid;align-content:center;min-height:100vh;min-height:100svh;padding-block:clamp(64px,8vw,128px) clamp(96px,10vw,128px)}
.page-404 .footer{border-top:1px solid var(--line-d)}
.svc-404__in{position:relative;z-index:1;display:grid;gap:24px;justify-items:start}
.svc-404 .h1{max-width:20ch}
.svc-404 .lead{max-width:44ch}
.svc-404__cta{display:flex;align-items:center;gap:24px 40px;flex-wrap:wrap;margin-top:24px}
.svc-404__tel{display:grid;gap:4px}
.svc-404__tel .tel{text-decoration:none}

/* ---------- узкие экраны ---------- */
@media (max-width:900px){
  .svc-contact{padding-block:48px 80px}
  .svc-head{margin-bottom:40px;gap:16px}
  .svc-grid{grid-template-columns:1fr;gap:32px}
  .svc-letter{padding:28px 20px 24px}
  .svc-line{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .svc-sign{display:grid;justify-items:start;gap:16px}
  .svc-seal{--s:112px;margin:0;justify-self:end}
  .svc-side{gap:32px}
  .svc-map{padding:24px 20px}
  .svc-404{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding-block:64px 80px}
  .svc-404__cta{gap:20px 32px}
}
@media (max-width:600px){
  .svc-when__row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;border-bottom:0}
  .svc-when label{margin-bottom:0;border-bottom:1px solid var(--line)}
  .svc-when label.is-on{border-bottom:2px solid var(--fir);margin-bottom:-1px}
}