body { background: #f5f1ee; }
.contact-page { width: var(--content-width); max-width: var(--content-max); margin: 0 auto; padding-top: 34px; }
.contact-heading { margin-bottom: clamp(52px, 6vw, 90px); }
.contact-heading p { font: 400 .75rem/1.5 var(--font-heading); letter-spacing: .095em; margin: 0 0 22px; }
.contact-heading h1 { font: 400 clamp(22px, 2.2vw, 32px)/1.4 var(--font-heading); letter-spacing: .035em; }
.contact-heading::after { content: ''; display: block; width: 3.5ch; height: 1px; opacity: .45; background: currentColor; margin-top: 26px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: var(--gutter); }
.studio { padding-right: var(--gutter); }
.studio address { font-style: normal; font-size: calc(var(--text-size) * .97); font-weight: 300; line-height: 1.8; letter-spacing: calc(.5px + .005em); }
.studio p { margin: 0 0 26px; }
.studio a { color: inherit; text-decoration: none; }
.socials { display: flex; gap: 12px; margin-top: 32px; color: #555; }
.socials a { display: block; width: 18px; height: 18px; }
.socials svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px var(--gutter); }
.field { min-width: 0; }
.field label { display: block; font: 400 14px/1.5 var(--font-heading); letter-spacing: .025em; }
.field input, .field textarea { display: block; width: 100%; min-width: 0; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(89,109,72,.35); border-radius: 0; background: transparent; color: inherit; font: 300 14px/1.6 var(--font-body); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-heading); }
.message { grid-column: 1/-1; }
.contact-form { --heading: #57694b; font-family: var(--font-body); }
.contact-form button { border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.contact-form button:focus-visible, .studio a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
#form-status { max-width: 48ch; font-size: 11px; font-weight: 300; line-height: 1.6; margin: 18px 0 0; }
.closing { margin: clamp(64px,8vw,120px) 0 72px 35%; padding-left: calc(var(--gutter) * .65); font: 400 17px/1.7 var(--font-heading); letter-spacing: .015em; }
@media (max-width: 600px) {
 .contact-page { padding-top: 24px; }
 .contact-layout, .form-grid { grid-template-columns: 1fr; }
 .contact-layout { gap: 54px; }
 .form-grid { gap: 30px; }
 .studio { padding: 0; }
 .closing { margin: 64px 0; padding: 0; }
 .field input, .field textarea { font-size: 16px; }
}
.contact-invitation { display: inline-block; margin: 16px 0 0 -8px; padding: 6px 8px; font-style: normal; font-weight: 500; color: var(--heading); background: transparent; font-size: .75rem; letter-spacing: .095em; line-height: 1.8; }
.contact-invitation span { display: inline-block; font-size: 1.05em; line-height: 1; transition: transform 400ms ease; }
@media (hover: hover) { .contact-invitation:hover span { transform: translateX(3px); } }
.contact-form .contact-invitation { transition: background-color 400ms ease; }
@media (hover: hover) {
  .contact-form .contact-invitation:hover { background-color: rgba(255,255,255,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form .contact-invitation, .contact-invitation span { transition: none; }
}