/*
 * Страница контактов.
 *
 * Палитра и приёмы — те же, что в информационном разделе (blog.css):
 * карточка на белом с рамкой #d5e8ff и радиусом 16, ярлык капслоком
 * 11px/700, оранжевый акцент #fa4a10, приглушённый синий текст #53718f,
 * заголовок цветом #102f51. Герой (.s24-hero) берётся из blog.css —
 * он подключён к этому шаблону, дублировать его здесь незачем.
 */

.s24-contacts { color: #234; font-size: 15px; line-height: 1.62; }

/* ——— две колонки: связь слева, форма справа ——— */
.s24-contacts__cols { display: grid; gap: 20px; margin: 30px 0 0; }
@media (min-width: 900px) {
	.s24-contacts__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

/* ——— каналы связи ——— */
.s24-contacts__channels { display: grid; gap: 14px; }
.s24-channel {
	display: flex; gap: 15px; align-items: flex-start;
	padding: 20px 22px; background: #fff; border: 1px solid #d5e8ff; border-radius: 16px;
	transition: .16s;
}
.s24-channel:hover { border-color: #ffb59c; }
.s24-channel__ico {
	flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px;
	background-size: 22px auto; background-repeat: no-repeat; background-position: center;
}
.s24-channel__ico--tel {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 480.56 480.56'%3E%3Cpath d='M365.354 317.9c-15.7-15.5-35.3-15.5-50.9 0-11.9 11.8-23.8 23.6-35.5 35.6-3.2 3.3-5.9 4-9.8 1.8-7.7-4.2-15.9-7.6-23.3-12.2-34.5-21.7-63.4-49.6-89-81-12.7-15.6-24-32.3-31.9-51.1-1.6-3.8-1.3-6.3 1.8-9.4 11.9-11.5 23.5-23.3 35.2-35.1 16.3-16.4 16.3-35.6-.1-52.1-9.3-9.4-18.6-18.6-27.9-28-9.6-9.6-19.1-19.3-28.8-28.8-15.7-15.3-35.3-15.3-50.9.1-12 11.8-23.5 23.9-35.7 35.5-11.3 10.7-17 23.8-18.2 39.1-1.9 24.9 4.2 48.4 12.8 71.3 17.6 47.4 44.4 89.5 76.9 128.1 43.9 52.2 96.3 93.5 157.6 123.3 27.6 13.4 56.2 23.7 87.3 25.4 21.4 1.2 40-4.2 54.9-20.9 10.2-11.4 21.7-21.8 32.5-32.7 16-16.2 16.1-35.8.2-51.8-19-19.1-38.1-38.1-57.2-57.1zM346.254 238.2l36.9-6.3c-5.8-33.9-21.8-64.6-46.1-89-25.7-25.7-58.2-41.9-94-46.9l-5.2 37.1c27.7 3.9 52.9 16.4 72.8 36.3 18.8 18.8 31.1 42.6 35.6 68.8zM403.954 77.8c-42.6-42.6-96.5-69.5-156-77.8l-5.2 37.1c51.4 7.2 98 30.5 134.8 67.2 34.9 34.9 57.8 79 66.1 127.5l36.9-6.3c-9.7-56.2-36.2-107.2-76.6-147.7z' fill='%23fa4a10'/%3E%3C/svg%3E");
}
.s24-channel__ico--email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M507.49 101.721 352.211 256 507.49 410.279c2.807-5.867 4.51-12.353 4.51-19.279V121c0-6.927-1.703-13.412-4.51-19.279zM467 76H45c-6.927 0-13.412 1.703-19.279 4.51l198.463 197.463c17.548 17.548 46.084 17.548 63.632 0L486.279 80.51C480.412 77.703 473.927 76 467 76zM4.51 101.721C1.703 107.588 0 114.073 0 121v270c0 6.927 1.703 13.413 4.51 19.279L159.789 256 4.51 101.721z' fill='%23fa4a10'/%3E%3Cpath d='m331 277.211-21.973 21.973c-29.239 29.239-76.816 29.239-106.055 0L181 277.211 25.721 431.49C31.588 434.297 38.073 436 45 436h422c6.927 0 13.412-1.703 19.279-4.51L331 277.211z' fill='%23fa4a10'/%3E%3C/svg%3E");
}
.s24-channel__ico--geo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4a10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.s24-channel__body { min-width: 1px; }
.s24-channel__label {
	display: block; margin-bottom: 5px;
	color: #728ba7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.s24-channel__value { color: #102f51; font-size: 18px; font-weight: 700; line-height: 1.3; }
.s24-channel__value a { color: #102f51; text-decoration: none; }
.s24-channel__value a:hover { color: #fa4a10; }
.s24-channel__note { display: block; margin-top: 6px; color: #53718f; font-size: 14px; line-height: 1.5; }

/* ——— форма ——— */
.s24-form {
	padding: 26px 28px; background: #f4f8fd; border: 1px solid #d5e8ff; border-radius: 16px;
	max-width: 100%; box-sizing: border-box;
}
.s24-form__title { margin: 0 0 6px; color: #102f51; font-size: 20px; font-weight: 700; line-height: 1.3; }
.s24-form__lead { margin: 0 0 20px; color: #53718f; font-size: 14px; line-height: 1.55; }
.s24-form .field { margin-bottom: 14px; }
.s24-form .label {
	display: block; margin-bottom: 6px;
	color: #728ba7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.s24-form input,
.s24-form textarea {
	display: block; width: 100%; box-sizing: border-box;
	padding: 13px 16px; border: 1px solid #d5e8ff; border-radius: 12px; background: #fff;
	color: #102f51; font-family: inherit; font-size: 15px; line-height: 1.4;
	transition: border-color .16s;
}
.s24-form textarea { height: 96px; resize: vertical; }
.s24-form input::placeholder,
.s24-form textarea::placeholder { color: #9db2c7; }
.s24-form input:focus,
.s24-form textarea:focus { border-color: #fa4a10; outline: none; }
.s24-form__submit {
	margin-top: 6px; padding: 14px 30px; border: 0; border-radius: 30px;
	background: #fa4a10; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
	cursor: pointer; transition: background .16s;
}
.s24-form__submit:hover { background: #e03d07; }
.s24-form__privacy { margin: 14px 0 0; color: #7088a2; font-size: 13px; line-height: 1.5; }
.s24-form__privacy a { color: #fa4a10; }

/* ——— реквизиты ——— */
.s24-req { margin: 42px 0 0; }
.s24-req h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.22; color: #102f51; }
.s24-req__lead { margin: 0 0 18px; color: #53718f; font-size: 15px; }
.s24-req__cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .s24-req__cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.s24-req__card { background: #fff; border: 1px solid #d5e8ff; border-radius: 16px; overflow: hidden; }
.s24-req__caption {
	margin: 0; padding: 15px 22px; background: #f4f8fd; border-bottom: 1px solid #e8f1fb;
	color: #53718f; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.s24-req__list { margin: 0; padding: 6px 0; }
.s24-req__list div {
	display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between;
	padding: 11px 22px; border-bottom: 1px solid #f1f6fc;
}
.s24-req__list div:last-child { border-bottom: 0; }
.s24-req__list dt { color: #7088a2; font-size: 14px; }
.s24-req__list dd { margin: 0; color: #102f51; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
	.s24-form { padding: 20px; }
	.s24-req h2 { font-size: 22px; }
	.s24-channel { padding: 17px 18px; }
	.s24-req__list div { padding: 11px 18px; }
	.s24-req__list dd { text-align: left; }
}