/* Section 7 only. Artwork is unchanged; the text and form remain live HTML. */
#contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #292b42;
  color: #faf4e9;
  --accent: #e9ad6c;
  min-height: max(700px, 56.28vw);
  padding: clamp(48px, 5vw, 88px) 6.4% 24px;
}
#contact .contact-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  /* Lift the artwork's navy into the shared purple-blue without tinting its gold. */
  mix-blend-mode: lighten;
}
#contact .contact-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
}
#contact .contact-grid {
  display: grid;
  grid-template-columns: 39% 37.5%;
  justify-content: space-between;
  gap: 0;
}
#contact .contact-grid > .contact-copy { position: relative; z-index: 1; padding: 0; }
#contact .contact-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  margin: 0 0 24px;
  font: 400 clamp(10px, 1.1vw, 17px)/1.5 var(--serif);
  letter-spacing: .34em;
}
#contact .contact-brand::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #d09b65, #d09b6510);
}
main > section#contact #contact-title:not(#top) {
  font-size: clamp(46px, 5.2vw, 88px);
  line-height: 1.01;
  letter-spacing: -.045em;
  margin: 0 0 20px;
}
#contact h2 span { color: #e7ab6e; white-space: nowrap; }
main > section#contact:not(#top):not(#about) .contact-invitation {
  max-width: 33ch;
  font: 400 clamp(18px, 1.5vw, 24px)/1.4 var(--serif);
  text-wrap: pretty;
  margin: 0;
}
#contact form {
  position: relative;
  isolation: isolate;
  --form-wash-opacity: .72;
  margin-top: clamp(90px, 8.2vw, 145px);
}
/* A broad feathered wash, not a panel: no hard edge behind the fields. */
#contact form::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -110px -90px;
  background: radial-gradient(ellipse at center,
    #292b42 0%, #292b42 48%,
    rgb(41 43 66 / 85%) 62%,
    rgb(41 43 66 / 45%) 76%,
    rgb(41 43 66 / 12%) 90%, transparent 100%);
  opacity: var(--form-wash-opacity);
  filter: blur(20px);
  pointer-events: none;
}
@media (max-width: 1100px) {
  #contact form { --form-wash-opacity: .86; }
}
#contact label {
  font: 400 clamp(16px, 1.2vw, 20px)/1.4 var(--serif);
  margin-bottom: clamp(20px, 2.1vw, 34px);
}
#contact input, #contact select, #contact textarea {
  font: 400 16px/1.5 var(--serif);
  color: #faf4e9;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e4e3e2b8;
  border-radius: 0;
  min-height: 44px;
  padding: 8px 0;
}
#contact select:invalid { color: #dedfe8; }
#contact option { background: #292b42; color: #faf4e9; }
#contact textarea { height: 76px; min-height: 76px; }
#contact .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid #e1a255;
  border-radius: 10px;
  background: #a76b35;
  color: #fff8ef;
  font: 400 clamp(18px, 1.55vw, 25px)/1.3 var(--serif);
  text-align: center;
}
#contact .button:hover { background: #ba7b41; color: #fff; }
#contact :is(input, select, textarea, .button):focus-visible {
  outline: 2px solid #f0bc7d;
  outline-offset: 5px;
}
#contact .form-note {
  font: 12px/1.5 Arial, sans-serif;
  color: #d6dce8;
  margin: 12px 0 0;
}
#contact output:not(:empty) { background: #292b42e8; }
#contact .contact-back-top {
  position: relative;
  align-self: flex-end;
  margin: auto 0 0;
  padding-top: 26px;
  color: #e4e6ed;
}
@media (min-width: 1800px) {
  #contact { min-height: 1013px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  #contact { min-height: 740px; padding: 48px 5% 22px; }
  #contact .contact-grid { grid-template-columns: 45% 39%; }
  main > section#contact #contact-title:not(#top) { font-size: clamp(44px, 5.55vw, 61px); }
  main > section#contact:not(#top):not(#about) .contact-invitation { font-size: 19px; }
  #contact form { margin-top: 92px; }
  #contact .contact-art img { object-position: 32% bottom; }
}
@media (max-width: 768px) {
  #contact {
    min-height: 0;
    padding: 38px 6% 22px;
  }
  #contact .contact-art { top: auto; height: auto; }
  #contact .contact-art img {
    width: 125%; max-width: none; height: auto; margin-left: -12.5%;
    mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
  #contact .contact-grid { display: block; }
  #contact .contact-brand {
    max-width: 88%;
    font-size: 10px;
    gap: 16px;
    margin-bottom: 24px;
  }
  main > section#contact #contact-title:not(#top) {
    font-size: clamp(44px, 9.6vw, 72px);
    line-height: 1.02;
    margin-bottom: 20px;
  }
  main > section#contact:not(#top):not(#about) .contact-invitation {
    max-width: 27ch;
    font-size: clamp(17px, 3.3vw, 22px);
    line-height: 1.4;
  }
  #contact form {
    width: 65%;
    margin: 38px 0 0 auto;
  }
  #contact label { font-size: 16px; margin-bottom: 20px; }
  #contact textarea { height: 68px; min-height: 68px; }
  #contact .button { font-size: 18px; gap: 10px; padding: 12px 8px; }
  #contact .form-note { font-size: 11px; }
  #contact .contact-back-top { margin-top: 53vw; padding-top: 0; }
}