.contact-layout {
  display: grid;
  gap: 0;
}
@media (min-width: 800px) {
  .contact-page { overflow: auto; }
  .contact-page > .site-footer { display: grid; }
  .contact-layout {
    grid-template-columns: min(66.7svh, 50vw) minmax(0, 1fr);
    align-items: stretch;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
}
.contact-visual {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: var(--bg);
}
.contact-image {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 800px) {
  .contact-visual {
    order: 1;
    height: 100svh;
    width: 100%;
    position: sticky;
    top: 0;
  }
  .contact-col {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
}
.contact-image img { width: 100%; height: 100%; object-fit: contain; }
.contact-visual__copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(96px, 12vw, 180px) clamp(28px, 5vw, 80px) clamp(32px, 5vw, 72px);
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 35%, rgba(0,0,0,.42));
}
.contact-details {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(.72rem, .85vw, .95rem);
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.contact-details address {
  margin: 0 0 18px;
  font-style: normal;
}
.contact-address-link {
  display: block;
  width: max-content;
  max-width: 100%;
}
.contact-address-link:hover strong,
.contact-address-link:focus-visible strong { text-decoration: underline; }
.contact-details p {
  display: flex;
  gap: 16px;
  margin: 0 0 14px;
}
.contact-details p strong { width: 1em; }
.contact-details a {
  color: inherit;
  text-decoration: none;
}
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 22px;
  letter-spacing: .12em;
}
.contact-socials a {
  width: max-content;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fade) var(--ease-standard);
}
.contact-socials a:hover,
.contact-socials a:focus-visible { border-bottom-color: currentColor; }

.contact-header {
  padding: clamp(88px, 8vw, 120px) var(--pad) clamp(20px, 2vw, 30px);
}
.contact-header h1 {
  font-size: var(--display-size);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.03em;
}
.contact-header p { max-width: 520px; margin: 16px 0 0; color: var(--muted); }

.contact-form {
  padding: 0 var(--pad) clamp(32px, 4vw, 56px);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-honeypot { display: none !important; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--label-size);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.field input, .field textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }

.submit-btn {
  align-self: flex-start;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--button-size);
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 14px 32px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: var(--chip-radius);
  cursor: pointer;
  transition: opacity var(--dur-fade) var(--ease-standard);
}
.submit-btn:hover { opacity: .85; }

.contact-direct {
  padding: 0 var(--pad) clamp(64px, 8vw, 120px);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--hero-button-size);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.contact-direct a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-direct a:hover { border-color: var(--ink); }

@media (min-width: 800px) {
  .contact-header {
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: clamp(24px, 3vh, 38px);
  }
  .contact-header h1 { font-size: clamp(3.25rem, 4.5vw, 5.75rem); }
  .contact-header p { margin-top: 10px; }
  .contact-form {
    flex: 0 1 62vh;
    min-height: 0;
    justify-content: flex-end;
    gap: 14px;
    padding-bottom: 28px;
  }
  .field { gap: 4px; }
  .field input,
  .field textarea { padding: 6px 0; }
  .contact-form .field:last-of-type {
    flex: 0 0 clamp(150px, 22vh, 230px);
    min-height: 150px;
    margin-top: 0;
  }
  .field textarea {
    flex: 1;
    min-height: 90px;
    height: 100%;
  }
  .submit-btn {
    margin-top: 0;
    padding: 12px 28px;
  }
}

/* Full-width contact composition. */
.contact-page { overflow: auto; }
.contact-page > .site-footer { display: grid; }
.contact-layout { display: block; }
.contact-visual { display: block; }
.contact-col {
  display: block;
  width: 100%;
  height: auto;
  min-height: calc(100svh - 84px);
  overflow: visible;
}
.contact-header {
  margin: 0;
  padding: clamp(52px, 6vw, 96px) var(--pad) 0;
}
.contact-header h1 {
  max-width: 10ch;
  font-size: clamp(4rem, 8.7vw, 8rem);
  line-height: .9;
  letter-spacing: -.055em;
}
.contact-form {
  width: min(100%, calc(1120px + 2 * var(--pad)));
  max-width: none;
  margin-top: clamp(180px, 24vh, 320px);
  padding: 0 var(--pad) clamp(64px, 8vw, 120px);
  gap: 0;
}
.contact-form .field {
  flex: none;
  min-height: 0;
  margin: 0;
  gap: 0;
}
.contact-form .field input,
.contact-form .field textarea {
  flex: none;
  width: 100%;
  min-height: 0;
  height: 104px;
  padding: 16px 0 12px;
}
.contact-form .field textarea { height: 170px; }
.contact-form .submit-btn {
  margin-top: 34px;
  padding: 14px 32px;
}

@media (max-width: 799px) {
  .contact-header { padding-top: 48px; }
  .contact-header h1 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .contact-form { margin-top: clamp(110px, 18vh, 180px); }
  .contact-form .field input,
  .contact-form .field textarea { height: 88px; }
  .contact-form .field textarea { height: 140px; }
  .contact-address-link { transform: translateY(-16vh); }
}

@media (min-width: 800px) {
  .contact-page { overflow: auto; }
  .contact-page > .site-footer { display: grid; }
  .contact-layout {
    display: grid;
    grid-template-columns: min(calc(66.7svh - 70px), 50vw) minmax(0, 1fr);
    height: calc(100svh - clamp(70px, 6.8vw, 104px));
    min-height: 0;
    overflow: hidden;
  }
  .contact-visual {
    display: block;
    order: 1;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .contact-col {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .contact-visual__copy {
    padding: clamp(28px, 4vh, 54px) clamp(24px, 3vw, 48px);
  }
  .contact-address-link { transform: translateY(-15vh); }
  .contact-header {
    width: min(100%, calc(760px + 2 * var(--pad)));
    margin: 0 auto;
    padding-top: 0;
  }
  .contact-header h1 {
    max-width: 11ch;
    font-size: clamp(2.7rem, 3.6vw, 4.6rem);
  }
  .contact-form {
    width: min(100%, calc(760px + 2 * var(--pad)));
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(20px, 3vh, 42px);
    padding-bottom: clamp(20px, 3vh, 32px);
  }
  .contact-form .field input,
  .contact-form .field textarea {
    width: min(100%, 760px);
    height: clamp(46px, 5.5vh, 62px);
  }
  .contact-form .field textarea { height: clamp(72px, 9vh, 98px); }
  .contact-form .submit-btn { margin-top: 16px; }
}