@font-face {
  font-family: 'Geologica';
  src: url('assets/fonts/geologica-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geologica Black';
  src: url('assets/fonts/geologica-black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --pine: #28543a;
  --pine-dark: #1d402a;
  --ink: #24432f;
  --serif: 'Geologica Black', 'Geologica', Arial, sans-serif;
  --sans: 'Geologica', Arial, sans-serif;
}

body, button, input, select {
  font-weight: 700;
}

h1, h2, h3, .booking-intro strong, .experience-list strong, .quote-band > p {
  font-weight: 900;
  letter-spacing: -1px;
}

.site-header {
  height: 132px;
}

.brand-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.footer-brand .brand-logo {
  width: 128px;
  height: 128px;
}

.quote-brand-logo {
  width: 94px;
  height: 94px;
  object-fit: contain;
  margin: 0 auto 22px;
}

.hero h1 {
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -2px;
}

h2 {
  line-height: 1.35;
}

.hero-content > p {
  margin-top: 28px;
}

.booking-intro strong {
  font-size: 17px;
}

.quote-band > p {
  line-height: 1.45;
}

@media (min-width: 1500px) {
  .hero h1 {
    font-size: 76px;
  }
}

@media (max-width: 1190px) {
  .booking-intro strong {
    font-size: 15px;
  }
}

@media (max-width: 960px) {
  .site-header {
    height: 118px;
  }

  .brand-logo {
    width: 98px;
    height: 98px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .house-topline h3 {
    font-size: 20px;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 106px;
  }

  .brand-logo {
    width: 88px;
    height: 88px;
  }

  .hero h1 {
    font-size: clamp(27px, 8vw, 40px);
    line-height: 1.3;
    letter-spacing: -1px;
  }

  h2 {
    font-size: 29px;
  }

  .house-topline h3 {
    font-size: 19px;
  }

  .experience-list strong {
    font-size: 19px;
  }

  .quote-band > p {
    font-size: 28px;
  }

  .contact-copy h2 {
    font-size: 34px;
  }

  .footer-brand .brand-logo {
    width: 108px;
    height: 108px;
  }

  .quote-brand-logo {
    width: 85px;
    height: 85px;
  }
}