/* ==========================================================================
   SECTION: CONTACT
   ========================================================================== */

.contact { background: var(--c-base); }

/* Dark section, but .t-h2 defaults to dark ink — the heading was invisible. */
.contact .t-h2 { color: var(--c-surface); }

/* Both columns stretch to the tallest, and the map absorbs the slack — so the
   bottom of the map lines up with the bottom of the form card. */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-16);
  align-items: stretch;
}

/* --- LEFT: the pitch + details -------------------------------------------- */

.contact__intro { display: flex; flex-direction: column; }

.contact__intro p { color: var(--c-muted-d); margin-bottom: var(--sp-8); }

.contact__details { display: grid; gap: var(--sp-5); }

.contact__row {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-d);
}
.contact__row:last-child { border-bottom: 0; padding-bottom: 0; }

.contact__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,166,35,0.12);
  border-radius: var(--radius);
  color: var(--c-energy);
}
.contact__ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.contact__row dt {
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(247,245,240,0.50);
  margin-bottom: var(--sp-1);
}
.contact__row dd {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-surface);
}
.contact__row dd a { color: var(--c-surface); text-decoration: none; }
.contact__row dd a:hover { color: var(--c-energy); }

.contact__map {
  margin-top: var(--sp-8);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line-d);
  flex: 1;                  /* eat the leftover height, matching the form card */
  min-height: 240px;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2); }

/* --- RIGHT: the form ------------------------------------------------------ */

.contact__card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: 0 24px 60px rgba(0,0,0,0.26);
}
.contact__card h3 { margin-bottom: var(--sp-2); }
.contact__card > p {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}

.contact__actions {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.contact__consent {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.contact__consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--c-primary); cursor: pointer;
}
.contact__consent label {
  font-size: var(--fs-caption); line-height: 1.5;
  color: var(--c-muted);
  text-transform: none; letter-spacing: 0; font-weight: var(--w-regular);
  margin: 0;
}

@media (max-width: 980px) {
  .contact__layout { grid-template-columns: 1fr; gap: var(--sp-10); }
  /* Stacked: there is no sibling to match, so give the map its own shape back. */
  .contact__map { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 560px) {
  .contact__card { padding: var(--sp-6) var(--sp-5); }
  .contact__actions { grid-template-columns: 1fr; }
}