:root { --contact-blue: #2447c6; --contact-ink: #16243d; --contact-muted: #52627a; --contact-line: #d9e1ee; }
.local-contact-page { background: #f7f9fd; color: var(--contact-ink); font-family: Figtree, Arial, sans-serif; }
.contact-hero { background: linear-gradient(120deg, #edf3ff, #fff); padding: 72px 24px 58px; text-align: center; }
.contact-hero__inner, .contact-shell { max-width: 1120px; margin: 0 auto; }
.contact-kicker { color: var(--contact-blue); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-hero h1 { margin: 12px 0; color: var(--contact-ink); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.1; }
.contact-hero p { max-width: 650px; margin: 0 auto; color: var(--contact-muted); font-size: 1.1rem; }
.contact-shell { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 44px; padding: 62px 24px 76px; }
.contact-details { padding: 18px 0; }
.contact-details h2 { font-size: 1.9rem; margin: 10px 0 16px; }
.contact-details > p { color: var(--contact-muted); line-height: 1.65; }
.contact-details__card { margin-top: 24px; padding: 18px; border: 1px solid var(--contact-line); border-radius: 14px; background: #fff; }
.contact-details__card strong, .contact-details__card a { display: block; }
.contact-details__card a { margin-top: 5px; color: var(--contact-blue); font-weight: 600; overflow-wrap: anywhere; }
.contact-form-card { padding: 30px; border: 1px solid var(--contact-line); border-radius: 20px; background: #fff; box-shadow: 0 16px 45px rgba(20, 51, 110, .08); }
.contact-tabs { display: flex; gap: 8px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--contact-line); }
.contact-tab { appearance: none; border: 0; border-radius: 8px; background: transparent; color: var(--contact-muted); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 16px; }
.contact-tab[aria-selected="true"] { background: #eaf0ff; color: var(--contact-blue); }
.local-contact-form[hidden] { display: none; }
.local-contact-form h2 { margin: 0 0 6px; font-size: 1.6rem; }
.local-contact-form > p { margin: 0 0 20px; color: var(--contact-muted); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-field { display: grid; gap: 7px; color: var(--contact-ink); font-size: .9rem; font-weight: 700; }
.contact-field--wide { grid-column: 1 / -1; }
.contact-field input, .contact-field select, .contact-field textarea { box-sizing: border-box; width: 100%; border: 1px solid #c8d3e4; border-radius: 8px; color: var(--contact-ink); font: inherit; font-weight: 400; padding: 12px; }
.contact-field textarea { min-height: 120px; resize: vertical; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-color: var(--contact-blue); box-shadow: 0 0 0 3px rgba(36, 71, 198, .13); outline: 0; }
.contact-submit { margin-top: 24px; border: 0; border-radius: 9px; background: var(--contact-blue); color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: 13px 24px; }
.contact-submit:hover { background: #1c3cab; }
.contact-note { color: var(--contact-muted); font-size: .85rem; line-height: 1.5; margin-top: 16px; }
@media (max-width: 800px) { .contact-shell { grid-template-columns: 1fr; gap: 16px; padding: 36px 18px 52px; } .contact-hero { padding: 52px 18px 42px; } .contact-form-card { padding: 22px 18px; } }
@media (max-width: 520px) { .contact-fields { grid-template-columns: 1fr; } .contact-field--wide { grid-column: auto; } .contact-tabs { overflow-x: auto; } .contact-tab { flex: 0 0 auto; } }