/* Mantella.nl — contactpagina */

/* ---- Hero + formulier ---- */
.contact-hero { padding: 76px var(--pad-x) 110px; }
.contact-hero__arc {
  top: -1000px; left: -400px; width: 2300px; height: 2300px;
  border-bottom-color: rgba(243,146,0,0.3);
}
.contact-hero__glow {
  bottom: -260px; right: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(228,0,58,0.22), transparent 70%);
  filter: blur(64px);
}
.contact-hero__badge { margin-bottom: 28px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: start; }

.contact-col { display: flex; flex-direction: column; gap: 28px; }
.contact-h1 {
  font-weight: 900; font-size: 68px; line-height: 1.04; color: #fff; margin: 0; text-wrap: balance;
}
.contact-lead { font-size: 20px; }

/* Belgegevens */
.contact-info { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.contact-info__row { display: flex; align-items: center; gap: 16px; }
.contact-info__icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.contact-info__icon .material-symbols-outlined { font-size: 25px; }
.contact-info__icon--call { background: rgba(243,146,0,0.14); }
.contact-info__icon--call .material-symbols-outlined { color: var(--c-orange); }
.contact-info__icon--mail { background: rgba(228,0,58,0.14); }
.contact-info__icon--mail .material-symbols-outlined { color: var(--c-red); }
.contact-info__text { display: flex; flex-direction: column; }
.contact-info__label { font-size: 14px; color: #888; }
.contact-info__value { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; }

/* Mitchell mini-byline */
.contact-person {
  display: flex; align-items: center; gap: 18px;
  margin-top: 16px; border-top: 1px solid var(--c-border-dark); padding-top: 26px;
}
.contact-person__photo {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--c-orange); flex: 0 0 auto;
}
.contact-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-person__text { display: flex; flex-direction: column; gap: 2px; }
.contact-person__name { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; }
.contact-person__role { font-size: 15px; color: #999; }

/* Formulierkaart */
.contact-card {
  background: var(--c-panel-glass);
  backdrop-filter: blur(6px);
  border: 1px solid #2e2e2e;
  border-radius: var(--r-card);
  padding: 44px 42px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 50px 120px rgba(228,0,58,0.15), 0 20px 60px rgba(0,0,0,0.6);
}
.contact-card__title { font-weight: 800; font-size: 28px; color: #fff; margin: 0; }
.contact-card__form { display: flex; flex-direction: column; gap: 22px; }
.contact-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-card textarea.field__input { min-height: 110px; }
.contact-card__submit { width: 100%; }
.contact-card__note { font-size: 13px; color: #9a9a9a; text-align: center; }
.contact-card .form-msg > div { display: flex; flex-direction: column; gap: 3px; }

/* ==========================================================================
   Responsive — tablet (834-ontwerp)
   ========================================================================== */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-h1 { font-size: 49px; }
}

/* ==========================================================================
   Responsive — mobiel (390-ontwerp)
   ========================================================================== */
@media (max-width: 700px) {
  .contact-hero { padding: 46px var(--pad-x) 66px; }
  .contact-hero__arc { height: 1265px; }
  .contact-hero__glow { height: 341px; }

  .contact-grid { gap: 24px; }
  .contact-h1 { font-size: 31px; }

  .contact-card { padding: 32px 24px; }
  .contact-card__row { grid-template-columns: 1fr; }
}

/* Honeypot-veld: onzichtbaar voor bezoekers en screenreaders, wél vindbaar voor bots */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }