.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding: clamp(45px, 6vw, 90px) var(--side-space); background: #e8e1d6; color: #2c251f; }
.contact-form { min-width: 0; padding: clamp(22px, 2.5vw, 38px); background: #f7f4ef; border: 1px solid #eee8df; border-radius: 12px; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-fields label { min-width: 0; }
.contact-fields input, .contact-fields textarea { display: block; width: 100%; padding: 16px 15px; border: 1px solid transparent; border-radius: 5px; background: #eae4da; color: #2c251f; font: inherit; font-size: 12px; line-height: 1.5; }
.contact-fields input::placeholder, .contact-fields textarea::placeholder { color: #756c60; opacity: 1; }
.contact-fields textarea { min-height: 150px; resize: vertical; }
.contact-fields input:focus, .contact-fields textarea:focus { outline: 2px solid #9b8c74; outline-offset: 2px; }
.contact-message { grid-column: 1 / -1; }
.contact-label, .contact-trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-options { display: grid; gap: 12px; margin: 24px 0 28px; padding: 0; border: 0; }
.contact-options label { display: flex; align-items: center; gap: 10px; font-size: 12px; cursor: pointer; }
.contact-options input { width: 14px; height: 14px; margin: 0; accent-color: #514839; }
.contact-form-bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.contact-quick-links { display: grid; gap: 14px; }
.contact-quick-links a { display: flex; align-items: center; gap: 12px; color: #514839; font-size: 13px; line-height: 1.5; text-decoration: none; }
.contact-quick-links a > i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #e8e1d6; font-size: 15px; }
.contact-quick-links small { display: block; margin-bottom: 2px; color: #756c60; font-size: 10px; }
.contact-quick-links a:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.contact-form button { display: inline-flex; align-items: center; gap: 25px; padding: 15px 24px; border: 0; border-radius: 5px; background: #2c2d28; color: #f7f4ef; font: inherit; font-size: 12px; cursor: pointer; transition: background .2s; }
.contact-form button:hover { background: #514839; }
.contact-form button:focus-visible, .contact-quick-links a:focus-visible { outline: 2px solid #9b8c74; outline-offset: 4px; }
.contact-notice { margin: 0 0 20px; font-size: 13px; line-height: 1.7; }
.contact-side { position: relative; min-width: 0; min-height: 540px; overflow: hidden; border-radius: 24px; background: #d8d2c7; isolation: isolate; }
.contact-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 24px; clip-path: inset(0 round 24px); }
.contact-office-card { position: absolute; top: 50%; left: 50%; width: min(260px, calc(100% - 44px)); margin: 0; padding: 14px; transform: translate(-50%, -45%); border: 1px solid #eee8df; border-radius: 14px; background: #f7f4ef; box-shadow: 0 12px 35px #302c2630; }
.contact-office-card::after { content: ''; position: absolute; bottom: -8px; left: calc(50% - 8px); width: 16px; height: 16px; background: #f7f4ef; transform: rotate(45deg); }
@keyframes office-card-shake {
    0%, 100% { transform: translate(-50%, -45%) rotate(0); }
    20% { transform: translate(calc(-50% - 3px), -45%) rotate(-1deg); }
    40% { transform: translate(calc(-50% + 3px), -45%) rotate(1deg); }
    60% { transform: translate(calc(-50% - 2px), -45%) rotate(-.6deg); }
    80% { transform: translate(calc(-50% + 1px), -45%) rotate(.3deg); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .contact-office-card:hover { animation: office-card-shake .6s ease-in-out; }
}
.contact-office-card h2 { margin: 3px 4px 13px; font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.contact-office-card > img { display: block; width: 100%; height: 145px; object-fit: cover; border-radius: 9px; }
.contact-office-card address { margin: 15px 4px; color: #756c60; font-size: 12px; font-style: normal; line-height: 1.75; }
.contact-office-social { display: flex; align-items: center; gap: 9px; padding: 0 4px 3px; }
.contact-office-social > span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: #e8e1d6; color: #514839; font-size: 13px; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .contact-fields { grid-template-columns: 1fr; } }