@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
}

:root {
  --navy: #07182c;
  --navy-soft: #10283f;
  --paper: #f7f4ee;
  --paper-deep: #e8e2d8;
  --ink: #1c2833;
  --muted: #64707a;
  --copper: #a65325;
  --copper-dark: #88431f;
  --copper-light: #d7a17b;
  --rule: #d8d1c6;
  --font-display: "Anton", Impact, sans-serif;
  --font-display-weight: 400;
  --font-display-tracking: 0.01em;
  --font-interface: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, Helvetica, sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

.hero h1,
.section-heading h2,
.service-card h3,
.specialty-card h3,
.about-heading h2,
.inquiry-intro h2,
.inquiry-card__heading h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
  text-transform: uppercase;
}

.wordmark strong,
.footer-brand strong,
.kicker,
.primary-nav,
.header-call,
.button,
.contact-list span,
.field label {
  font-family: var(--font-interface);
}

.wordmark strong,
.footer-brand strong {
  font-weight: 750;
  letter-spacing: -0.015em;
}

.hero h1 {
  font-size: clamp(3.8rem, 5.45vw, 5.35rem);
  line-height: 0.96;
}

.hero h1 span {
  margin-top: 0.08em;
}

.hero-lede {
  font-size: clamp(1.04rem, 1.45vw, 1.18rem);
}

.inquiry-intro h2 {
  font-size: clamp(2.8rem, 4.4vw, 4.3rem);
  line-height: 0.98;
}

.inquiry-card__heading h3 {
  font-size: 1.55rem;
  line-height: 1;
}

.section-heading h2,
.about-heading h2 {
  font-size: clamp(3.15rem, 5vw, 5.25rem);
  line-height: 0.96;
}

.service-card h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  line-height: 1;
}

.service-card--featured h3 {
  font-size: clamp(3rem, 4.2vw, 4.7rem);
}

.specialty-card h3 {
  font-size: 1.85rem;
  line-height: 1;
}

.kicker,
.wordmark span,
.footer-brand span {
  letter-spacing: 0.11em;
}

.primary-nav a {
  letter-spacing: 0.025em;
}

.button,
.header-call {
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.primary-nav a,
.wordmark strong,
.footer-brand strong,
.inquiry-card__heading h3 {
  text-transform: uppercase;
}

.header-call,
.contact-list strong,
.footer-contact {
  font-variant-numeric: tabular-nums;
}

.button--primary {
  border-color: var(--copper);
  background: linear-gradient(135deg, var(--copper), var(--copper-dark));
}

.button--primary:hover {
  border-color: #753718;
  background: #753718;
}

.inquiry-section {
  background: linear-gradient(180deg, var(--paper-deep), var(--paper));
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(166, 83, 37, 0.17);
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(3.05rem, 13.8vw, 4rem);
  }

  .section-heading h2,
  .about-heading h2,
  .inquiry-intro h2 {
    font-size: clamp(2.65rem, 12vw, 3.8rem);
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 3.4rem;
  }
}