/**
 * Страница контактов, редизайн (2026-09-17). Подключается только на этой странице
 * (не в bundle-core.min.css), поэтому пересборка tools/build_css.php не нужна.
 * Префикс .ct-, палитра и типографика — как у css/events2.css и css/portraits2.css.
 *
 * Georgia в стеке заголовков — не украшение: с одним serif-фолбэком подмена
 * PT Serif Caption сдвигала первый экран (CLS 0.033 в мобильном профиле),
 * с Georgia — 0.002. Проверено замером layout-shift на живом стенде.
 */

.ct { --brown:#4B1E00; --ink:#2b2016; --muted:#8a7157; --text:#6f5a44; --paper:#faf7f2; --sand:#efe6d8; --line:rgba(75,30,0,.14); width:100%; color:var(--ink); font-family:'Roboto',sans-serif; }
.ct *, .ct *::before, .ct *::after { box-sizing:border-box; }
.ct h1, .ct h2, .ct h3 { font-family:'PT Serif Caption',Georgia,'Times New Roman',serif; font-weight:400; color:var(--ink); text-align:left; margin:0; padding:0; width:auto; max-width:none; text-shadow:none; text-transform:none; }
.ct p { margin:0; color:var(--text); text-align:left; }
.ct > section { width:100%; max-width:none; margin:0; }
.ct-wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
.ct-kicker { font:700 11.5px/1 'Roboto',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.ct-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font:700 12.5px/1 'Roboto',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:15px 22px; border:1px solid var(--brown); text-decoration:none !important; white-space:nowrap; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.ct-btn img { width:18px; height:18px; display:block; }
.ct-btn--solid { background:var(--brown); color:#fff !important; }
.ct-btn--solid:hover { background:#6B2C00; }
.ct-btn--line { background:#fff; color:var(--brown) !important; }
.ct-btn--line:hover { background:rgba(75,30,0,.08); }
.ct-todo { display:inline-block; font:700 10.5px/1 'Roboto',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#9a3b00; background:#fff1e0; border:1px dashed #d98a3a; padding:4px 7px; vertical-align:middle; }
.ct-block { padding:64px 0; }
.ct-block--paper { background:var(--paper); }
.ct-block--white { background:#fff; }
.ct-head { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:34px; }
.ct-head h2 { font-size:36px; line-height:1.15; text-wrap:balance; }
.ct-head p { font-size:16px; line-height:1.6; }

/* первый экран */
.ct-hero { background:linear-gradient(180deg,#fff 0%,var(--paper) 100%); border-bottom:1px solid var(--line); padding:56px 0 44px; }
.ct-hero h1 { font-size:46px; line-height:1.1; max-width:780px; text-wrap:balance; }
.ct-hero__lede { font-size:18px; line-height:1.55; margin-top:18px !important; max-width:660px; }
.ct-hero__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ct-proof { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.ct-proof div { font-size:14px; color:var(--muted); }
.ct-proof b { display:block; font:400 22px/1.1 'PT Serif Caption',serif; color:var(--brown); margin-bottom:4px; }
.ct-proof a { color:var(--brown) !important; text-decoration:none !important; border-bottom:1px solid rgba(75,30,0,.35); }

/* каналы связи */
.ct-ch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ct-ch__item { display:flex; gap:16px; background:#fff; border:1px solid var(--line); padding:22px; text-decoration:none !important; transition:border-color .2s,transform .2s; }
.ct-ch__item:hover { border-color:var(--brown); transform:translateY(-2px); }
.ct-ch__item--first { border-color:var(--brown); box-shadow:inset 0 3px 0 var(--brown); }
.ct-ch__ico { flex:0 0 40px; width:40px; height:40px; }
.ct-ch__ico img { width:40px; height:40px; display:block; }
.ct-ch__b { min-width:0; }
.ct-ch__b h3 { font-size:20px; }
.ct-ch__val { display:block; font:500 15px/1.4 'Roboto',sans-serif; color:var(--brown); margin-top:6px; overflow-wrap:anywhere; }
.ct-ch__note { font-size:14px !important; line-height:1.5 !important; margin-top:8px !important; }

/* заявка */
.ct-form-grid { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:start; }
.ct-form-grid h2 { font-size:34px; line-height:1.15; text-wrap:balance; }
.ct-form-grid__lede { font-size:16.5px; line-height:1.6; margin-top:16px !important; }
.ct-need { list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line); }
.ct-need li { position:relative; padding:11px 0 11px 26px; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink); margin:0; }
.ct-need li::before { content:''; position:absolute; left:2px; top:17px; width:12px; height:6px; border-left:2px solid var(--brown); border-bottom:2px solid var(--brown); transform:rotate(-45deg); }
.ct-alt { font-size:15px !important; line-height:1.6 !important; margin-top:22px !important; }
.ct-alt a { color:var(--brown) !important; font-weight:500; }

/* карточка формы — перебиваем #orderformx из main.css (там id-селекторы) */
.ct #orderform.ct-card { display:block; width:auto; max-width:none; margin:0; padding:28px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 40px rgba(75,30,0,.10); }
.ct #orderformx { display:grid; gap:12px; width:100%; margin:0; }
.ct #orderformx fieldset { border:0; margin:0; padding:0; display:grid; gap:12px; }
.ct #orderformx input:not([type="hidden"]):not(#hp_note_2f), .ct #orderformx textarea, .ct #orderformx select {
  display:block; width:100%; height:auto; box-sizing:border-box; margin:0; padding:14px; border:1px solid rgba(75,30,0,.22); border-radius:0;
  background:var(--paper); color:var(--ink); font:400 16px/1.4 'Roboto',sans-serif; box-shadow:none; /* 16px: меньше — iOS Safari зумит страницу при фокусе */
}
.ct #orderformx textarea { min-height:104px; resize:vertical; }
.ct #orderformx select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234B1E00'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:38px; }
.ct #orderformx input:focus, .ct #orderformx textarea:focus, .ct #orderformx select:focus { outline:2px solid var(--brown); outline-offset:0; background:#fff; }
/* на живой странице этого правила нет: .error проигрывает по специфичности #orderformx input, и подсветка не видна.
   .ct-invalid — своя подсветка, которая держится до исправления поля (класс .error checkregform снимает через 2.4 с) */
.ct #orderformx .error, .ct #orderformx .ct-invalid { border-color:#b3261e !important; background:#fdf1ef !important; }
.ct-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* id-селектор #oderbuttontwo из main.css сильнее класса: перебиваем его целиком,
   иначе кнопка остаётся 90% ширины, шрифтом Open Sans 15pt и желтеет (#FC0) при наведении */
.ct #orderformx #oderbuttontwo { width:100%; margin:4px 0 0; padding:16px 22px; font:700 12.5px/1 'Roboto',sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--brown); border:1px solid var(--brown);
  box-shadow:none; border-radius:0; transition:background .2s,color .2s; }
.ct #orderformx #oderbuttontwo:hover { background:#6B2C00; color:#fff; border-color:#6B2C00; }
.ct #orderformx #oderbuttontwo[disabled] { opacity:.65; cursor:default; background:var(--brown); }
.ct-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ct-hint { font-size:13px !important; color:var(--muted) !important; margin-top:2px !important; }
.ct-hint a { color:var(--muted) !important; text-decoration:underline !important; text-decoration-color:rgba(138,113,87,.5) !important; }
.ct-msg { margin:0 0 14px !important; padding:12px 14px; font-size:14.5px !important; line-height:1.45 !important; }
.ct-msg--ok { background:#edf6ee; color:#1f5a2b !important; border-left:4px solid #2f6b3a; }
.ct-msg--warn { background:#fdf4e6; color:#6b4200 !important; border-left:4px solid #9a5b00; }
.ct-msg--err { background:#fdf1ef; color:#8a1f18 !important; border-left:4px solid #b3261e; }

/* шаги */
.ct-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); background:#fff; }
.ct-step { padding:26px 24px; }
.ct-step + .ct-step { border-left:1px solid var(--line); }
.ct-step__n { font:400 30px/1 'PT Serif Caption',serif; color:var(--sand); }
.ct-step h3 { font-size:19px; margin-top:12px; }
.ct-step p { font-size:14.5px !important; line-height:1.6 !important; margin-top:9px !important; }

/* факты */
.ct-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ct-fact { background:#fff; border:1px solid var(--line); padding:22px 24px; }
.ct-fact h3 { font-size:20px; }
.ct-fact p { font-size:15px !important; line-height:1.6 !important; margin-top:9px !important; }

/* кто ответит */
.ct-about { display:grid; grid-template-columns:4fr 8fr; gap:44px; align-items:center; }
.ct-about__pic { aspect-ratio:4/5; overflow:hidden; background:var(--sand); }
.ct-about__pic img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; }
.ct-about h2 { font-size:34px; line-height:1.15; }
.ct-about p { font-size:16.5px; line-height:1.65; margin-top:16px !important; }

/* вопросы */
.ct-faq { max-width:860px; border-top:1px solid var(--line); }
.ct-faq details { border-bottom:1px solid var(--line); }
.ct-faq summary { cursor:pointer; list-style:none; font:400 20px/1.3 'PT Serif Caption',serif; color:var(--ink); padding:20px 36px 20px 0; position:relative; }
.ct-faq summary::-webkit-details-marker { display:none; }
.ct-faq summary::after { content:'+'; position:absolute; right:4px; top:18px; font:300 26px/1 'Roboto',sans-serif; color:var(--brown); }
.ct-faq details[open] summary::after { content:'–'; }
.ct-faq details p { padding:0 0 20px; font-size:15.5px; line-height:1.65; }
.ct-faq details p a { color:var(--brown) !important; }

/* финал */
.ct-cta { background:#1c130b; padding:58px 0; }
.ct-cta h2 { color:#fff; font-size:34px; }
.ct-cta p { color:rgba(255,255,255,.75); font-size:16px; margin-top:12px !important; max-width:620px; }
.ct-cta__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ct-cta .ct-btn--solid { background:#fff; color:var(--brown) !important; border-color:#fff; }
.ct-cta .ct-btn--solid:hover { background:#e8cfa8; border-color:#e8cfa8; }
.ct-cta .ct-btn--line { background:transparent; color:#fff !important; border-color:rgba(255,255,255,.6); }
.ct-cta .ct-btn--line:hover { background:#e8cfa8; color:var(--brown) !important; border-color:#e8cfa8; }

/* липкая полоса на телефоне */
.ct-sticky { position:fixed; left:0; right:0; bottom:0; z-index:950; display:none; gap:8px; padding:10px 12px; background:rgba(28,19,11,.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transform:translateY(110%); transition:transform .25s ease; }
.ct-sticky.is-on { transform:translateY(0); }
.ct-sticky .ct-btn { flex:1 1 0; min-width:0; padding:13px 10px; font-size:11.5px; }
.ct-sticky .ct-btn--solid { background:#fff; color:var(--brown) !important; border-color:#fff; }
.ct-sticky .ct-btn--line { background:transparent; color:#fff !important; border-color:rgba(255,255,255,.6); }

@media (max-width:1000px) {
  .ct-hero { padding:36px 0 30px; }
  .ct-hero h1 { font-size:31px; }
  .ct-hero__lede { font-size:16px; }
  /* на телефоне полоса фактов — сетка 2x2, а не перенос по ширине: иначе при подмене шрифта
     пункты перескакивают между строками и это даёт сдвиг вёрстки (заметно на русском и украинском) */
  .ct-proof { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
  .ct-block { padding:44px 0; }
  .ct-head { grid-template-columns:1fr; gap:12px; }
  .ct-head h2, .ct-form-grid h2, .ct-about h2, .ct-cta h2 { font-size:26px; }
  .ct-ch { grid-template-columns:1fr; }
  .ct-form-grid { grid-template-columns:1fr; gap:26px; }
  .ct #orderform.ct-card { padding:20px; }
  .ct-row { grid-template-columns:1fr; }
  .ct-steps { grid-template-columns:1fr; }
  .ct-step + .ct-step { border-left:0; border-top:1px solid var(--line); }
  .ct-facts { grid-template-columns:1fr; }
  .ct-about { grid-template-columns:1fr; gap:22px; }
  .ct-about__pic { aspect-ratio:16/11; }
  .ct-hero__actions .ct-btn, .ct-cta__actions .ct-btn { flex:1 1 100%; }
  .ct-sticky { display:flex; }
  /* Запас под подмену шрифта — адресно по языку (html lang выставляет page_head).
     en: заголовок с фолбэком укладывается в 2 строки, с PT Serif Caption — в 3;
     uk: вступление с фолбэком занимает 5 строк, с Roboto — 4.
     Без запаса всё, что ниже, прыгало при загрузке шрифтов (CLS 0.033 на обоих языках). */
  html[lang="en"] .ct-hero h1, html[lang="uk"] .ct-hero h1 { min-height:3.3em; }
  html[lang="uk"] .ct-hero__lede { min-height:7.75em; }
  .ct-pad { padding-bottom:74px; }
}