:root { --sv-primary: #1a4c8b; --sv-teal: #2e9e9b; --sv-orange: #f5891e; --sv-slate: #6d6e71; }
.sv-contact-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; max-width: none; margin: 32px 0; align-items: stretch; }
.sv-contact-wrap .sv-contact { max-width: none; margin: 0; }
.sv-contact-info { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 32px 30px; border-radius: 16px; color: #fff; background: linear-gradient(160deg, var(--sv-primary, #1a4c8b), #1f6f91 60%, var(--sv-teal, #2e9e9b)); box-shadow: 0 10px 30px rgba(26, 76, 139, .18); }
.sv-contact-info::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(251, 175, 63, .28); }
.sv-contact-info > * { position: relative; z-index: 1; }
.sv-contact-info h2 { margin: 0; color: #fff; font-size: 1.5rem; }
.sv-contact-info p { margin: 0 0 6px; color: #dbe9f6; line-height: 1.55; }
.sv-contact-info ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.sv-contact-info li { display: flex; align-items: flex-start; gap: 14px; }
.sv-contact-info__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.sv-contact-info small { display: block; color: #bcd6ee; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sv-contact-info li a { color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.sv-contact-info li a:hover { text-decoration: underline; }
.sv-contact-info__map { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: #ffd9a8; font-weight: 800; text-decoration: none; }
.sv-contact-info__map:hover { text-decoration: underline; }
.sv-contact { background: #fff; border: 1px solid #e3e9f0; border-radius: 16px; padding: 28px; max-width: 560px; margin: 32px auto; box-shadow: 0 10px 30px rgba(26, 76, 139, .08); }
.sv-contact__alert { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: .92rem; }
.sv-contact__notice { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: .92rem; }
.sv-contact__form { display: flex; flex-direction: column; gap: 14px; }
.sv-contact__field { display: flex; flex-direction: column; gap: 4px; }
.sv-contact__label { font-weight: 600; font-size: .9rem; }
.sv-contact__req { color: var(--sv-orange); }
.sv-contact input[type=text], .sv-contact input[type=email], .sv-contact select, .sv-contact textarea {
	width: 100%; border: 1px solid #d5dde8; border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 1rem; background: #fff; box-sizing: border-box;
}
/* Chrome's native <select> does not reliably center its text within symmetric
   padding the way a text input does (a well-known cross-browser quirk); the
   text renders low in the box. Turning off native appearance and drawing our
   own arrow, the same fix already used for the search box's selects, sidesteps
   it entirely instead of fighting line-height/padding further. */
.sv-contact select {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	display: flex; align-items: center; height: 44px; padding-block: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4c8b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
	padding-inline-end: 34px;
}
html[dir="rtl"] .sv-contact select { background-position: left 12px center; }
.sv-contact textarea { resize: vertical; }
.sv-contact input:focus, .sv-contact select:focus, .sv-contact textarea:focus {
	outline: none; border-color: var(--sv-teal); box-shadow: 0 0 0 3px rgba(46, 158, 155, .18);
}
.sv-contact__error { color: #b91c1c; font-size: .82rem; }
.sv-contact__error:empty { display: none; }
.sv-contact__hp { position: absolute !important; left: -9999px; height: 0; width: 0; opacity: 0; }
.sv-contact__btn { background: var(--sv-orange); color: #fff; border: 0; border-radius: 10px; padding: 13px; font-size: 1.05rem; font-weight: 800; cursor: pointer; width: 100%; }
.sv-contact__btn:hover { background: #dd7410; }
@media (max-width: 860px) { .sv-contact-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sv-contact { margin: 16px 0; padding: 18px; border-radius: 12px; } .sv-contact-wrap .sv-contact { margin: 0; } .sv-contact-info { padding: 24px 20px; } }