:root {
  --midnight-blue: #1b2b3a;
  --bordeaux: #652d40;
  --warm-ivory: #f3eee5;
  --champagne: #dfcdb2;
}

/* A quiet manuscript texture lives behind the first-step section. */
.steps-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 8% 0%, #2b4152 0%, transparent 60%), linear-gradient(130deg, #1b2b3a 15%, #162330 100%);
  color: var(--warm-ivory);
}
.steps-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -12% -7% -20% 20%;
  background: url("./assets/mozart-nachtmusik-autograph.png") center / cover no-repeat;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: .085;
  transform: rotate(-7deg);
  pointer-events: none;
}
.steps-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,43,58,.5), transparent 65%), linear-gradient(0deg, rgba(22,35,48,.6), transparent 65%);
  pointer-events: none;
}
.steps-section .section-number, .steps-section .section-number span { color: var(--champagne); }
.steps-section h2 em { color: #bfcdbf; }
.steps-section .steps-header p, .steps-section .step p { color: #d0d6d9; }
.steps-section .step { border-color: rgba(243,238,229,.28); }
.steps-section .step>span { color: var(--champagne); }

/* Equal halves on desktop, two full-width panels on mobile. */
.contact-section {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  padding: 0;
  background: var(--warm-ivory);
  align-items: stretch;
}
.contact-section>.contact-left {
  min-width: 0;
  padding: clamp(75px, 8vw, 135px) clamp(28px, 7vw, 115px);
  background: radial-gradient(circle at 0% 90%, #e6e7dc 0%, transparent 55%), var(--warm-ivory);
}
.contact-left h2 { font-size: clamp(58px, 5.9vw, 92px); }
.contact-left h2 em { color: #6f7d6b; }
.contact-left .section-number, .contact-left .section-number span { color: var(--bordeaux); }
.contact-left .contact-details { border-color: rgba(45,54,44,.18); }
.contact-left .contact-details span { color: #6d7968; }
.contact-section>.form-card {
  min-width: 0;
  margin: 0;
  padding: clamp(75px, 8vw, 135px) clamp(28px, 5.7vw, 95px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(ellipse at 100% 0%, #783d4e 0%, transparent 63%), linear-gradient(160deg, #652d40, #512434);
  color: var(--warm-ivory);
}
.contact-section .form-eyebrow { color: var(--champagne); }
.contact-section .form-card h3 { color: var(--warm-ivory); font-size: clamp(43px, 3.7vw, 61px); }
.contact-section .form-card label { color: #f3eee5; }
.contact-section .form-card label b { color: #e9d4b6; }
.contact-section .form-card label>span, .contact-section .form-hint { color: #e6d7da; }
.contact-section .form-card input:not([type="checkbox"]),
.contact-section .form-card select,
.contact-section .form-card textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(243,238,229,.47);
  color: #fff9ee;
  border-radius: 0;
}
.contact-section .form-card input::placeholder,
.contact-section .form-card textarea::placeholder { color: #d3bec5; opacity: 1; }
.contact-section .form-card select { color-scheme: dark; }
.contact-section .form-card select option { background: #512434; color: #fff9ee; }
.contact-section .form-card input:not([type="checkbox"]):focus-visible,
.contact-section .form-card select:focus-visible,
.contact-section .form-card textarea:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 5px;
  background: rgba(255,255,255,.04);
  border-bottom-color: var(--champagne);
}
.contact-section .consent input { accent-color: var(--champagne); }
.contact-section .consent button { color: #f1debd; }
.contact-section .consent button:focus-visible { outline-color: var(--champagne); }
.contact-section .form-submit { background: var(--warm-ivory); color: #512434; }
.contact-section .form-submit:hover { background: #e4d9c8; color: #512434; }
.contact-section .form-submit:focus-visible { outline-color: var(--champagne); }
.contact-section .form-hint[data-state="success"] { color: #dcebcf; }
.contact-section .form-hint[data-state="error"],
.contact-section .form-hint[data-state="activation"] { color: #ffddbb; }

@media (max-width: 1050px) and (min-width: 741px) {
  .contact-section>.contact-left, .contact-section>.form-card { padding-inline: 35px; }
  .contact-section .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .steps-section::before { inset: 0 -50% 0 -10%; opacity: .06; background-size: auto 100%; }
  .contact-section { grid-template-columns: minmax(0,1fr); gap: 0; padding: 0; }
  .contact-section>.contact-left, .contact-section>.form-card { padding: 78px 25px 85px; }
  .contact-left h2 { font-size: clamp(61px, 13vw, 82px); }
  .contact-section .form-card h3 { font-size: clamp(43px, 10.5vw, 59px); }
}