.contact-section {
  background:
    url("../images/bg-bamboo-dark.png") repeat,
    var(--brown);
  padding: 64px 0 96px;
  color: var(--cream);
  position: relative;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.contact-text-col h1 {
  font-family: var(--f-head);
  font-size: clamp(48px, 7vw, 96px);
  color: var(--cream);
  margin: 0 0 22px;
  line-height: 0.96;
  text-transform: uppercase;
}
.contact-text-col h1 .script {
  font-family: var(--f-accent);
  color: var(--mustard);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.contact-text-col p.contact-lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--cream);
  max-width: 32ch;
  margin: 0 0 56px;
  opacity: .94;
}
.contact-info-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
.contact-info-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mustard);
  flex-shrink: 0;
}
.contact-info-icon svg {
  width: 100%; height: 100%; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.contact-info-icon.filled svg { fill: currentColor; stroke: none; }
.contact-info-title {
  font-family: var(--f-accent);
  font-size: clamp(28px, 2.5vw, 38px);
  color: var(--cream);
  margin: 0 0 8px;
  line-height: 1;
  transform: rotate(-1deg);
  display: inline-block;
}
.contact-info-body {
  font-size: 17px; line-height: 1.55;
  color: var(--cream);
  opacity: .94;
  margin: 0;
}
.contact-info-body a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.contact-info-body a:hover { color: var(--mustard); }

/* Form card */
.contact-form-card {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--shadow-md);
  color: var(--brown);
}
.contact-form-card h2 {
  font-family: var(--f-head);
  font-size: clamp(28px, 3vw, 36px);
  text-align: center;
  color: var(--brown);
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.contact-form-grid .full { grid-column: span 2; }
.contact-form-grid label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--brown);
}
.contact-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.contact-input-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--brown-soft);
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.contact-form-grid input,
.contact-form-grid textarea {
  width: 100%;
  padding: 14px 18px 14px 42px;
  border: 1.5px solid rgba(61,32,26,.18);
  border-radius: var(--r-pill);
  background: var(--paper);
  font: inherit;
  font-family: var(--f-body);
  color: var(--brown);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form-grid textarea {
  padding-left: 18px;
  border-radius: var(--r-md);
  min-height: 132px;
  resize: vertical;
}
.contact-form-grid input::placeholder,
.contact-form-grid textarea::placeholder {
  color: rgba(61,32,26,.45);
}
.contact-form-grid input:focus,
.contact-form-grid textarea:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(140,165,64,.25);
}
.contact-form-actions {
  grid-column: span 2;
  display: flex; justify-content: flex-end;
  margin-top: 8px;
}
.contact-form-actions .btn { padding: 14px 36px; font-size: 14px; letter-spacing: .06em; }
.contact-form-note {
  grid-column: span 2;
  font-size: 13px; color: var(--brown-soft);
  text-align: center;
  margin: 4px 0 0;
}
.contact-form-done {
  text-align: center; padding: 24px 0;
}
.contact-form-done h3 {
  font-family: var(--f-head);
  font-size: 28px; color: var(--brown);
  margin: 0 0 10px;
}
.contact-form-done p { color: var(--brown-soft); margin: 0; }

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-text-col p.contact-lead { margin-bottom: 32px; }
  .contact-info-row { margin-bottom: 28px; }
}
@media (max-width: 540px) {
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-grid .full { grid-column: span 1; }
  .contact-form-actions { grid-column: span 1; justify-content: stretch; }
  .contact-form-actions .btn { width: 100%; }
  .contact-form-note { grid-column: span 1; }
}