/* The shared styles and Services hero supply the existing site typography,
   navigation, footer, buttons, and botanical photograph treatment. */
.featured-page {
  --services-gold: #e5c780;
}
.featured-hero .services-hero-copy {
  max-width: 65%;
}
.featured-hero h1 {
  max-width: 640px;
}
.featured-hero .services-tagline {
  font-size: 22px;
  letter-spacing: .3px;
}
.featured-hero .services-introduction {
  max-width: 580px;
}
.selected-work {
  padding-block: 44px 20px;
  scroll-margin-top: 24px;
}
.selected-work-heading {
  text-align: center;
  margin-bottom: 30px;
}
.selected-work-heading .eyebrow {
  color: #835c27;
  font-size: 13px;
  margin-bottom: 12px;
}
.selected-work-heading h2 {
  font-size: clamp(30px, 3.2vw, 44px);
}
.portfolio-project {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 42px;
  padding-block: 30px;
}
.portfolio-project:first-of-type {
  padding-top: 0;
}
.portfolio-project + .portfolio-project {
  border-top: 1px solid var(--line);
}
.portfolio-project:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
}
.portfolio-project:nth-of-type(even) .portfolio-image {
  grid-column: 2;
  grid-row: 1;
}
.portfolio-project:nth-of-type(even) .portfolio-copy {
  grid-column: 1;
  grid-row: 1;
}
.portfolio-image {
  width: 100%;
  height: auto;
  border: 1px solid #e0d5c3;
  box-shadow: 0 5px 17px #253a2d0a;
}
.portfolio-copy h3 {
  font-size: clamp(27px, 2.4vw, 34px);
  letter-spacing: -.6px;
}
.project-services {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 9px;
  padding: 0;
  margin: 16px 0 21px;
}
.project-services li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 14px;
}
.portfolio-copy p {
  font-size: 17px;
  line-height: 1.6;
}
.portfolio-copy .button {
  margin-top: 24px;
  gap: 24px;
}
.featured-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 31px 37px;
  text-align: center;
}
.featured-contact-photo {
  position: absolute;
  z-index: -2;
  right: -20px;
  top: 0;
  width: 36%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .35;
}
.featured-contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--forest) 42%, #233d2ceb 66%, #233d2c2b);
}
.featured-contact-icon {
  display: block;
  width: 48px;
  height: 48px;
  color: #eee2b7;
  margin: 0 auto 12px;
}
.featured-contact h2 {
  font-size: clamp(31px, 3vw, 42px);
}
.featured-contact p {
  font-size: 18px;
  margin-top: 10px;
}
.featured-contact .button {
  margin-top: 20px;
}
@media (max-width: 1000px) {
  .portfolio-project, .portfolio-project:nth-of-type(even) {
    column-gap: 28px;
  }
  .portfolio-copy h3 { font-size: 28px; }
  .portfolio-copy p { font-size: 16px; }
  .project-services { margin-block: 13px 17px; }
  .portfolio-copy .button { margin-top: 20px; }
}
@media (max-width: 800px) {
  .featured-hero .services-hero-copy { max-width: 80%; }
  .featured-hero .services-tagline { font-size: 20px; }
  .portfolio-project, .portfolio-project:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-block: 30px;
  }
  .portfolio-project:nth-of-type(even) .portfolio-image,
  .portfolio-project:nth-of-type(even) .portfolio-copy {
    grid-column: auto;
    grid-row: auto;
  }
  .portfolio-copy { max-width: 650px; }
  .portfolio-copy h3 { font-size: 31px; }
  .portfolio-copy p { font-size: 17px; }
  .featured-contact-photo { width: 50%; }
}
@media (max-width: 600px) {
  .featured-hero .services-hero-copy { max-width: 100%; }
  .featured-hero .services-tagline { font-size: 20px; max-width: 340px; }
  .selected-work { padding-block: 32px 8px; }
  .selected-work-heading { margin-bottom: 25px; }
  .selected-work-heading .eyebrow { font-size: 11px; }
  .selected-work-heading h2 { font-size: 31px; }
  .portfolio-project, .portfolio-project:nth-of-type(even) { gap: 23px; }
  .portfolio-copy h3 { font-size: 29px; }
  .project-services { margin-block: 12px 16px; }
  .project-services li { font-size: 12px; }
  .portfolio-copy .button { min-height: 48px; }
  .featured-contact { padding-block: 32px 36px; }
  .featured-contact p { font-size: 16px; }
  .featured-contact-photo { width: 65%; opacity: .2; }
}