.varns-contact-page__layout {
  display: grid;
  gap: var(--varns-gap-lg);
  align-items: start;
}

.varns-contact-page__details {
  display: grid;
  gap: 1.3rem;
}

.varns-contact-page__details h2 {
  max-inline-size: 12ch;
  text-transform: uppercase;
}

.varns-contact-page__details h3 {
  margin-block-end: 0.55rem;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.varns-contact-page__direct {
  display: grid;
  gap: 0.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--varns-border-200);
}

.varns-contact-page__direct a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--varns-green-700);
  font-weight: 700;
}

.varns-contact-page__direct svg {
  inline-size: 1.3rem;
}

.varns-contact-page__form {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-block-start: 5px solid var(--varns-orange-500);
  background: var(--varns-white);
  box-shadow: var(--varns-shadow-md);
}

.varns-contact-page__form > h2 {
  margin-block-end: 1.25rem;
  font-size: clamp(2.3rem, 1.8rem + 1.8vw, 3.7rem);
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .varns-contact-page__layout {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  }
}

/* Keep the brand centered above the estimate form at every viewport. */
.varns-contact-page__form { min-inline-size: 0; }
.varns-contact-page__form > .varns-contact-page__logo {
  display: block;
  inline-size: min(12rem, 65%);
  margin: 0 auto 1.25rem;
}
.varns-contact-page__logo img { display: block; inline-size: 100%; block-size: auto; }
.varns-contact-page__form > h2 { text-align: center; }