:root {
  --sage: #5b7560;
  --sage-light: #87a08b;
  --sage-dark: #1f2d22;
  --cream: #f5f6f3;
  --bs-primary: #5b7560;
  --bs-primary-rgb: 91, 117, 96;
  --bs-link-color: #5b7560;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--cream);
}

h1, h2, h3, .h4,
#mainNav .navbar-brand {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}

.page-section {
  padding: 6rem 0;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage);
}

#mainNav {
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: var(--sage) !important;
}

@media (min-width: 992px) {
  #mainNav,
  #mainNav.navbar-shrink {
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  }
  #mainNav .navbar-brand,
  #mainNav .navbar-nav .nav-item .nav-link {
    color: #212529;
  }
}

header.masthead {
  background: var(--cream);
  padding-top: 9rem;
  padding-bottom: 5rem;
}

header.masthead h1 {
  color: var(--sage-dark);
  font-size: 2.5rem;
  line-height: 1.15;
}

header.masthead .lead-text {
  font-size: 1.15rem;
  color: #555;
}

.masthead-img {
  border-radius: 1.5rem;
  box-shadow: 1.25rem 1.25rem 0 var(--sage-light);
}

@media (min-width: 992px) {
  header.masthead {
    height: auto;
    min-height: 0;
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
  header.masthead h1 {
    font-size: 3.5rem;
  }
}

.btn-primary {
  --bs-btn-bg: #5b7560;
  --bs-btn-border-color: #5b7560;
  --bs-btn-hover-bg: #87a08b;
  --bs-btn-hover-border-color: #87a08b;
  --bs-btn-active-bg: #4a6150;
  --bs-btn-active-border-color: #4a6150;
}

.btn-outline-primary {
  --bs-btn-color: #5b7560;
  --bs-btn-border-color: #5b7560;
  --bs-btn-hover-bg: #5b7560;
  --bs-btn-hover-border-color: #5b7560;
  --bs-btn-active-bg: #5b7560;
  --bs-btn-active-border-color: #5b7560;
}

.btn-xl {
  border-radius: 0.5rem;
  letter-spacing: 2px;
}

.btn-outline-primary.btn-xl {
  border: 2px solid var(--sage);
}

hr.divider {
  background-color: var(--sage);
  max-width: 6rem;
  height: 3px;
}

hr.divider-light {
  background-color: #fff;
}

#essentials {
  background-color: #fff;
}

.essentials-row {
  counter-reset: essential;
}

.essential-card {
  counter-increment: essential;
  position: relative;
  height: calc(100% - 3rem);
  margin-top: 3rem;
  padding: 3.5rem 2rem 2rem;
  background-color: var(--cream);
  border-radius: 1rem;
  border-top: 4px solid var(--sage);
}

.essential-card::before {
  content: "0" counter(essential);
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-family: 'DM Serif Display', serif;
  font-size: 4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--sage-light);
}

#portfolio .portfolio-box {
  display: block;
  height: 100%;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

#portfolio .portfolio-box img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid #e5e7e3;
}

#portfolio .portfolio-box-caption {
  padding: 1.25rem 1.5rem;
}

#portfolio .project-category {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sage);
}

#portfolio .project-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  color: #212529;
}

#portfolio .portfolio-box:hover .project-name {
  color: var(--sage);
}

#contact.bg-dark {
  background-color: var(--sage-dark) !important;
}

footer.bg-light {
  background-color: var(--cream) !important;
}

@media (max-width: 575.98px) {
  .page-section {
    padding: 4rem 0;
  }
  header.masthead {
    padding-top: 7rem;
  }
  header.masthead h1 {
    font-size: 2rem;
  }
  .masthead-img {
    box-shadow: 0.75rem 0.75rem 0 var(--sage-light);
  }
  .essential-card {
    padding: 3rem 1.5rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}