/* =====================================================================
   CEMCOSMETICS — страница «Контакты» (/kontakty/).
   Сервисная страница. Самодостаточный CSS + общий nav.css (шапка/футер).
   Классы по ТЗ: contacts-page, contacts-hero, contacts-section, contacts-grid,
   contact-card, contacts-links, form-layout, contact-form-card.
   ===================================================================== */
:root {
  --graphite: #1B1A18;
  --moss:     #2E3B30;
  --copper:   #B07A47;
  --bg:       #F3EFE6;   /* ivory */
  --bg-soft:  #F6F3EE;   /* light */
  --surface:  #E4DDCE;   /* porcelain */
  --header-h: 136px;
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-base: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-base); color: var(--graphite);
  background: var(--bg-soft); padding-top: var(--header-h); overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--graphite); }

/* Кнопки cookie — общий стиль сайта */
.btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 30px; border-radius: 8px; font-family: var(--font-base);
  font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  text-decoration: none; transition: all .2s ease; }
.btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.btn--primary { background: var(--copper); color: #fff; border: 1px solid var(--copper); }
.btn--primary:hover { background: #9c6a3b; border-color: #9c6a3b; }
.btn--secondary { background: transparent; color: var(--moss); border: 1px solid var(--copper); font-weight: 500; }
.btn--secondary:hover { background: rgba(176,122,71,.10); }

/* ---- Контейнер и секции ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); }
.contacts-section { padding: clamp(48px, 6vw, 84px) 0; }
.contacts-page h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.14; font-weight: 600; }
.ct-lead { max-width: 760px; margin: 0 0 clamp(22px, 3vw, 32px); font-family: var(--font-base);
  font-size: clamp(15px, 1.4vw, 16px); line-height: 1.6; color: rgba(27,26,24,.82); }

/* ---- Блок 1. Hero ---- */
.contacts-hero { background: var(--bg); padding: clamp(56px, 8vw, 112px) 0; }
.contacts-hero .container { max-width: 1220px; }
.contacts-hero h1 { margin: 0 0 16px; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; font-weight: 600; }
.ct-hero__sub { margin: 0; max-width: 720px; font-family: var(--font-base);
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--moss); }

/* ---- Карточки (общее) ---- */
.contacts-grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.contact-card { background: #fff; border: 1px solid rgba(176,122,71,.18); border-radius: 19px;
  padding: clamp(22px, 3vw, 30px); box-shadow: 0 1px 3px rgba(27,26,24,.04); }
.contact-card h3 { margin: 0 0 8px; font-size: clamp(19px, 2vw, 23px); line-height: 1.2; font-weight: 600; }
.contact-card p { margin: 0; font-family: var(--font-base); font-size: 15px; line-height: 1.55; color: rgba(27,26,24,.78); }
.contact-card__num { display: inline-block; margin-bottom: 12px; font-family: var(--font-base);
  font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--copper); }

/* ---- Блок 2. Быстрая связь ---- */
.quick-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.contact-card--link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: all .2s ease; }
.contact-card--link:hover { border-color: rgba(176,122,71,.5); box-shadow: 0 6px 20px rgba(27,26,24,.07); transform: translateY(-2px); }
.contact-card__label { font-family: var(--font-head); font-size: clamp(20px, 2.1vw, 24px); font-weight: 600; color: var(--graphite); }
.contact-card--link p { color: var(--moss); }
.contact-card--phone p { white-space: nowrap; }   /* телефон — всегда в одну строку */

/* ---- Блок 3. Экспертные каналы (тёмно-моховый акцент) ---- */
.expert-social-section { background: var(--moss); color: var(--bg-soft); padding: clamp(56px, 7vw, 88px) 0; }
.expert-social-label { display: inline-block; margin-bottom: 16px; color: var(--copper);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.expert-social-section h2 { color: var(--bg-soft); margin: 0 0 20px; font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06; font-weight: 600; }
.expert-social-section p { max-width: 820px; margin: 0 0 16px; font-family: var(--font-base);
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: rgba(246,243,238,.86); }
.expert-social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.expert-social-links a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  padding: 0 28px; border-radius: 999px; background: var(--bg-soft); color: var(--graphite);
  border: 1px solid rgba(176,122,71,.32); text-decoration: none; font-family: var(--font-base);
  font-size: 15px; font-weight: 600; transition: all .2s ease; }
.expert-social-links a:hover { background: var(--copper); color: #fff; border-color: var(--copper); }

/* ---- Блок 4. Форма ---- */
.form-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.form-layout__intro h2 { margin-top: 0; }
.contact-form-card { background: #fff; border: 1px solid rgba(176,122,71,.18); border-radius: 20px;
  padding: clamp(24px, 3.4vw, 36px); box-shadow: 0 1px 3px rgba(27,26,24,.04); }
.ct-form { display: flex; flex-direction: column; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; }
.ct-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field label { font-family: var(--font-base); font-size: 14px; font-weight: 600; color: var(--graphite); }
.ct-field label span { color: var(--copper); margin-left: 2px; }
.ct-field input, .ct-field select, .ct-field textarea {
  font-family: var(--font-base); font-size: 15px; color: var(--graphite); background: var(--bg-soft);
  border: 1px solid rgba(176,122,71,.24); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .15s ease; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--copper); background: #fff; }
.ct-field textarea { resize: vertical; min-height: 96px; }
.ct-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-base);
  font-size: 13.5px; line-height: 1.5; color: rgba(27,26,24,.72); cursor: pointer; }
.ct-consent input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--moss); flex: 0 0 auto; }
.ct-consent a { color: var(--copper); text-decoration: none; }
.ct-consent a:hover { text-decoration: underline; }
.ct-submit { align-self: flex-start; min-height: 48px; padding: 0 34px; border: none; border-radius: 999px;
  background: var(--moss); color: var(--bg-soft); font-family: var(--font-base); font-size: 15px;
  font-weight: 600; cursor: pointer; transition: background .2s ease; }
.ct-submit:hover { background: var(--graphite); }
.ct-submit:disabled { opacity: .55; cursor: not-allowed; }
.ct-form__note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 0; padding: 16px 18px; border-radius: 12px;
  font-family: var(--font-base); font-size: 15px; line-height: 1.5; font-weight: 500;
  opacity: 0; transform: translateY(-6px);
  animation: ct-note-in .35s ease forwards;
}
.ct-form__note[hidden] { display: none; }
.ct-form__note__icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.ct-form__note.is-ok { background: rgba(46,59,48,0.08); color: var(--moss); border: 1px solid rgba(46,59,48,0.18); }
.ct-form__note.is-ok .ct-form__note__icon { background: var(--moss); color: #fff; }
.ct-form__note.is-err { background: rgba(163,70,47,0.08); color: #a3462f; border: 1px solid rgba(163,70,47,0.22); }
.ct-form__note.is-err .ct-form__note__icon { background: #a3462f; color: #fff; }
@keyframes ct-note-in { to { opacity: 1; transform: translateY(0); } }

/* ---- Блоки 5–7. Пилюли-ссылки ---- */
.contacts-links { display: flex; flex-wrap: wrap; gap: 12px; }
.contacts-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border-radius: 999px; border: 1px solid rgba(176,122,71,.24); background: #fff; color: var(--graphite);
  font-family: var(--font-base); font-size: 15px; font-weight: 600; text-decoration: none; transition: all .2s ease; }
.contacts-links a:hover { background: var(--moss); color: var(--bg-soft); border-color: var(--moss); }
.contacts-links a.is-primary { background: var(--copper); color: #fff; border-color: var(--copper); }
.contacts-links a.is-primary:hover { background: #9c6a3b; border-color: #9c6a3b; }
.contacts-links--docs a { min-height: 44px; padding: 0 22px; font-weight: 500; font-size: 14px; }
.service-info { padding-bottom: clamp(56px, 7vw, 92px); }

/* ================= АДАПТИВ ================= */
@media (max-width: 1000px) {
  :root { --header-h: 84px; }
  .form-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ct-field-row { grid-template-columns: 1fr; }
  .contacts-links a { flex: 1 1 100%; }
  .ct-submit { align-self: stretch; }
  .expert-social-links { flex-direction: column; }
  .expert-social-links a { width: 100%; }
}