:root {
  color: #101012;
  background: #f3f1ec;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 85% 5%, rgba(255, 96, 64, .15), transparent 28rem),
    #f3f1ec;
}

a { color: inherit; }

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.06em;
  text-decoration: none;
}

.brand span { color: #ff4f2e; }

nav { display: flex; gap: 28px; }
nav a { color: #686867; font-size: 14px; text-decoration: none; }
nav a:hover { color: #101012; }

.hero {
  min-height: 650px;
  padding: 110px 0 96px;
  border-top: 1px solid rgba(16, 16, 18, .14);
}

.eyebrow {
  margin: 0 0 18px;
  color: #ff4f2e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 930px;
  margin-bottom: 30px;
  font-size: clamp(52px, 8.2vw, 112px);
  line-height: .92;
  letter-spacing: -.065em;
}

.lead {
  max-width: 680px;
  margin-bottom: 38px;
  color: #575756;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.5;
}

.button {
  display: inline-block;
  padding: 15px 22px;
  border-radius: 999px;
  background: #101012;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.section {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) 1.8fr;
  gap: 70px;
  padding: 100px 0;
  border-top: 1px solid rgba(16, 16, 18, .14);
}

h2 {
  max-width: 700px;
  margin-bottom: 28px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.05em;
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.cards article {
  min-height: 270px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 50px rgba(32, 26, 19, .06);
}

.cards span { color: #ff4f2e; font-weight: 800; }
.cards h3 { margin: auto 0 12px; font-size: 24px; letter-spacing: -.03em; }
.cards p,
.company-copy p,
.legal p { color: #5f5e5b; line-height: 1.65; }

.company-copy > p { max-width: 660px; font-size: 21px; }
dl { margin: 42px 0 0; }
dl div { padding: 18px 0; display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid rgba(16, 16, 18, .12); }
dt { color: #777672; }
dd { margin: 0; font-weight: 650; }

.contact {
  padding: 110px 0;
  border-top: 1px solid rgba(16, 16, 18, .14);
}

.contact a {
  color: #ff4f2e;
  font-size: clamp(30px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -.045em;
  text-decoration: none;
}

footer {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(16, 16, 18, .14);
  color: #777672;
  font-size: 14px;
}

footer a { text-decoration: none; }

.legal {
  max-width: 840px;
  padding: 90px 0 120px;
  border-top: 1px solid rgba(16, 16, 18, .14);
}

.legal h1 { font-size: clamp(44px, 7vw, 82px); }
.legal h2 { margin-top: 52px; font-size: 28px; }
.legal p { font-size: 17px; }
.updated { margin-bottom: 72px; }

@media (max-width: 760px) {
  .site-header,
  main,
  footer { width: min(100% - 28px, 1180px); }
  .site-header { min-height: 72px; }
  nav { gap: 14px; }
  nav a:not(:last-child) { display: none; }
  .hero { min-height: auto; padding: 86px 0 76px; }
  .section { grid-template-columns: 1fr; gap: 28px; padding: 72px 0; }
  .cards { grid-template-columns: 1fr; }
  .cards article { min-height: 210px; }
  dl div { grid-template-columns: 1fr; gap: 8px; }
  footer { min-height: 90px; gap: 20px; }
}