body {
  font-size: 16px;
}

.hero {
  padding-top: 74px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  align-items: center;
  column-gap: 72px;
  row-gap: 44px;
}

.hero-stack {
  align-self: center;
}

.eyebrow {
  white-space: nowrap;
  font-size: 0.69rem;
  letter-spacing: 0.09em;
}

h1 {
  max-width: 12ch;
  font-size: clamp(3.9rem, 6vw, 6.3rem);
}

.hero-text {
  max-width: 60ch;
  font-size: 1.08rem;
}

.hero-stack h2 {
  font-size: clamp(2rem, 2.8vw, 2.7rem);
}

.compact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-head h2,
.result-copy h2,
.about-copy h2,
.contact-copy h2 {
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.result-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: start;
}

.result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-box {
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 0;
  align-items: stretch;
}

.about-photo-placeholder {
  aspect-ratio: auto;
  min-height: 100%;
}

.about-photo {
  min-height: 100%;
}

.contact-box {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  padding: 26px;
}

.cta-box {
  grid-template-columns: minmax(0, 1fr) auto;
}

.faq-wrap {
  max-width: 860px;
}

@media (hover: hover) and (pointer: fine) {
  .surface-card:hover,
  .compact-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
  }
}