.contact-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8%; align-items: end; padding-block: 62px 48px; }
.contact-intro h1 { font-size: clamp(44px, 5.1vw, 82px); line-height: 1.05; letter-spacing: -.025em; max-width: 12ch; }
.contact-intro > p { font-size: 17px; line-height: 1.8; max-width: 39ch; padding-bottom: 3px; }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7%; align-items: start; padding-bottom: 76px; }
.contact-details { padding-top: 24px; }
.contact-detail { display: flex; gap: 19px; align-items: flex-start; margin-bottom: 34px; }
.contact-detail > .icon { color: #96764b; width: 24px; height: 24px; margin-top: 1px; }
.contact-detail > div { min-width: 0; }
.contact-detail h2 { font: 700 12px/1.5 var(--sans); margin-bottom: 12px; color: var(--muted); }
.contact-detail a { font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.contact-detail .contact-primary { font: 700 clamp(23px, 2.25vw, 34px)/1.2 var(--serif); white-space: nowrap; }
.contact-detail address { font-style: normal; font-size: 17px; line-height: 1.8; max-width: 27ch; }
.contact-detail .contact-directions { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; margin-top: 16px; }
.contact-monogram { width: 68px; height: 68px; margin: 45px 0 0 43px; }
.contact-form-panel { padding: 32px; border-radius: 4px; background: var(--canvas); }
.contact-form-panel > h2 { font-size: 34px; margin-bottom: 26px; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 18px; }
.contact-fields label { display: flex; flex-direction: column; gap: 9px; font-size: 12px; font-weight: 700; min-width: 0; }
.contact-fields input, .contact-fields select, .contact-fields textarea { width: 100%; min-width: 0; min-height: 50px; padding: 13px 14px; background: var(--paper); color: var(--ink); border: 1px solid #ded6ca; border-radius: 4px; font-size: 15px; font-weight: 400; caret-color: #956c24; }
.contact-fields input:focus, .contact-fields select:focus, .contact-fields textarea:focus { border-color: #a78243; outline: 2px solid #cba45e50; outline-offset: 2px; }
.contact-fields input::placeholder, .contact-fields textarea::placeholder { color: #817568; opacity: 1; }
/* „Относно“ shows its hint (the empty first option) in the placeholder colour until a subject is chosen. */
.contact-fields select:has(option[value='']:checked) { color: #817568; }
.contact-fields select option { color: var(--ink); }
.contact-fields textarea { resize: vertical; min-height: 160px; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-submit { margin-top: 22px; }
.contact-submit p { font-size: 11px; margin-bottom: 17px; }
.contact-submit .button { width: 100%; }
.contact-form .form-status { margin-top: 18px; font-size: 14px; line-height: 1.7; }
.contact-map-section { padding-bottom: 62px; }
.contact-map-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 27px; }
.contact-map-heading h2 { font-size: clamp(31px, 3.2vw, 48px); }
.contact-map { display: block; width: 100%; height: 460px; border: 0; border-radius: 4px; background: var(--canvas); }
.contact-map-section > p { margin-top: 14px; font-size: 12px; }
@media(max-width:1100px) { .contact-layout { gap: 5%; } .contact-form-panel { padding: 25px; } .contact-fields { grid-template-columns: 1fr; } }
@media(max-width:800px) { .contact-intro { padding-block: 38px 36px; gap: 28px; grid-template-columns: 1fr; } .contact-intro h1 { max-width: 15ch; } .contact-intro > p { font-size: 15px; max-width: 54ch; } .contact-layout { grid-template-columns: 1fr; gap: 30px; padding-bottom: 46px; } .contact-details { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .contact-detail { margin-bottom: 0; gap: 14px; } .contact-monogram { display: none; } .contact-detail:last-of-type { grid-column: 1 / -1; } .contact-fields { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px) { .contact-intro h1 { font-size: 45px; } .contact-details { grid-template-columns: 1fr; gap: 28px; } .contact-detail .contact-primary { font-size: 28px; } .contact-form-panel { padding: 24px 18px; } .contact-form-panel > h2 { font-size: 31px; } .contact-fields { grid-template-columns: 1fr; } .contact-fields input, .contact-fields select, .contact-fields textarea { font-size: 16px; } .contact-map-heading { align-items: start; flex-direction: column; gap: 13px; } .contact-map { height: 350px; } .contact-map-section { padding-bottom: 42px; } }