.s4-contact-hero {
  padding: 68px max(32px, calc((100% - 980px) / 2)) 54px;
  background:
    radial-gradient(circle at 82% 15%, rgba(201, 154, 67, 0.25), transparent 24rem),
    var(--s4-forest-deep);
  color: #fff;
}

.s4-contact-hero .s4-breadcrumb {
  width: 100%;
  padding: 0 0 48px;
}

.s4-contact-hero h1 {
  margin: 0 0 14px;
  font: 500 clamp(2.8rem, 5vw, 5rem)/1 var(--s4-serif);
}

.s4-contact-hero h2 {
  max-width: 900px;
  margin: 0 0 22px;
  color: var(--s4-gold-light);
  font: 500 clamp(1.35rem, 2.5vw, 2.15rem)/1.2 var(--s4-serif);
}

.s4-contact-hero > p:last-child {
  max-width: 700px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}

.s4-contact-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: min(980px, calc(100% - 64px));
  margin: 72px auto 24px;
}

.s4-contact-methods a {
  display: grid;
  gap: 18px;
  min-width: 0;
  min-height: 180px;
  padding: 28px;
  border: 1px solid var(--s4-line);
  border-radius: var(--s4-radius);
  background: #fff;
  box-shadow: var(--s4-shadow);
  text-decoration: none;
}

.s4-contact-methods span {
  color: var(--s4-gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s4-contact-methods strong {
  overflow-wrap: anywhere;
  margin-top: auto;
  font: 500 1.25rem/1.35 var(--s4-serif);
}

.s4-contact-note,
.s4-contact-back {
  width: min(980px, calc(100% - 64px));
  margin: 0 auto;
}

.s4-contact-note {
  padding: 24px;
  border-left: 3px solid var(--s4-gold);
  color: var(--s4-muted);
  line-height: 1.7;
}

.s4-contact-back {
  padding: 32px 0 84px;
}

.s4-contact-back .s4-button {
  border-color: var(--s4-forest);
  color: var(--s4-forest);
}