/* ==========================================================================
   Section: Contact hero — Figma 194:4559
   731px hero: 45px breadcrumb strip, then two 590px columns 60px apart,
   128px below the top. Left column spreads headline / person / cards over
   the height of the form panel.
   ========================================================================== */

.trustav-contact-hero {
  padding-block: 0;
}

.trustav-contact-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  padding-block: 83px 133px; /* Figma 194:4632 — 128 from the top, 731 tall */
}

.trustav-contact-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.trustav-contact-hero__head {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.trustav-contact-hero__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-black);
}

.trustav-contact-hero__accent {
  display: block;
  color: var(--c-accent);
}

.trustav-contact-hero__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

/* --- Contact person — Figma 235:4579 ------------------------------------- */
.trustav-contact-hero__person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trustav-contact-hero__avatar {
  flex: 0 0 57px;
  width: 57px;
  height: 57px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--c-accent);
}

.trustav-contact-hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trustav-contact-hero__person-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trustav-contact-hero__name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-primary);
}

.trustav-contact-hero__role {
  font-size: 0.75rem; /* Figma 235:4583 — 12px, fixed. */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
  opacity: 0.6;
}

/* --- Form panel — Figma 194:4573 ----------------------------------------- */
.trustav-contact-hero__form {
  padding: 28px;
  background-color: var(--c-neutral-4);
  border: var(--border);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .trustav-contact-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    padding-block: var(--space-3xl);
  }
}

@media (max-width: 640px) {
  .trustav-contact-hero__form {
    padding: var(--space-md);
  }
}