/* A fine rule accents the service introduction. */
#services > .section-kicker {
  position: relative;
  width: fit-content;
}
#services > .section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 112px;
  height: 2px;
  background: var(--copper, #a85f45);
  transform: scaleX(0);
  transform-origin: left center;
}
#services > .section-kicker.is-visible::after {
  animation: services-rule-arrive .9s cubic-bezier(.16, .78, .24, 1) .15s both;
}
#services {
  background: radial-gradient(ellipse 48% 440px at 64% 200px, rgba(168, 95, 69, .045), transparent 74%), var(--paper, #f2efe8);
}
#services .services-intro {
  /* Two balanced columns: remove the unused central column that caused the gap. */
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .82fr);
  align-items: center;
  column-gap: clamp(32px, 4.8vw, 84px);
  max-width: 1540px;
  margin: 46px 0 clamp(54px, 6vw, 82px);
}
#services .services-intro h2 {
  margin: 0;
  font-size: clamp(52px, 4.85vw, 94px);
  line-height: .99;
}
#services .services-intro > p {
  grid-column: 2;
  justify-self: stretch;
  margin: 0;
  max-width: 590px;
  padding: clamp(24px, 2.5vw, 38px) clamp(25px, 2.7vw, 42px);
  color: #566168;
  line-height: 1.75;
  background: rgba(251, 250, 247, .52);
  border: 1px solid rgba(168, 95, 69, .17);
  border-left: 2px solid var(--copper, #a85f45);
  box-shadow: 0 14px 38px rgba(21, 37, 49, .035);
}
/* The existing scroll observer reveals this note once, with a tiny sideways shift. */
#services .services-intro.is-visible > p {
  animation: services-copy-arrive .95s cubic-bezier(.16, .78, .24, 1) .12s both;
}
#services .services-intro-visual {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  justify-self: center;
  line-height: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #ddd9ce;
}
#services .services-intro-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
#services .services-intro.is-visible .services-intro-visual {
  animation: services-photo-arrive 1s cubic-bezier(.16, .78, .24, 1) .1s both;
}
@keyframes services-rule-arrive {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes services-photo-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes services-copy-arrive {
  from { opacity: .15; transform: translate3d(22px, 8px, 0); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  #services .services-intro h2 { font-size: clamp(50px, 6.1vw, 68px); }
  #services .services-intro-visual { max-width: 230px; }
}
@media (max-width: 900px) {
  #services .services-intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(25px, 5vw, 42px);
    margin-top: 42px;
  }
  #services .services-intro > p {
    grid-column: 1;
    max-width: 630px;
  }
}
@media (max-width: 650px) {
  #services .services-intro {
    gap: 26px;
    margin: 42px 0 36px;
  }
  #services .services-intro h2 { font-size: clamp(42px, 10vw, 60px); }
  #services .services-intro-visual { max-width: 420px; aspect-ratio: 5 / 3; justify-self: start; }
  #services .services-intro > p {
    grid-column: 1;
    padding: 23px 23px 24px;
  }
  #services { background: radial-gradient(ellipse 100% 380px at 65% 280px, rgba(168, 95, 69, .035), transparent 72%), var(--paper, #f2efe8); }
}
@media (prefers-reduced-motion: reduce) {
  #services > .section-kicker.is-visible::after { animation: none; transform: scaleX(1); }
  #services .services-intro.is-visible .services-intro-visual { animation: none; }
  #services .services-intro.is-visible > p { animation: none; }
}


/* Editorial contrast for the six What We Do headings only. */
#services .service-card .service-heading-accent {
  color: #985037;
  font-weight: 700;
  transition: color .4s ease;
}
/* Deep navy cards get a warmer, lighter copper for legibility. */
#services .service-card:is(:nth-child(4n + 1), :nth-child(4n)) .service-heading-accent {
  color: #e9af94;
}
/* Three longer headings retain the composition without touching the other cards. */
#services .service-card h3.service-heading-long {
  font-size: clamp(31px, 3.05vw, 44px);
  line-height: 1.08;
}
@media (max-width: 650px) {
  /* On mobile the checkerboard alternates dark and light by row. */
  #services .service-card:nth-child(n) .service-heading-accent { color: #985037; }
  #services .service-card:nth-child(odd) .service-heading-accent { color: #e9af94; }
  #services .service-card h3.service-heading-long {
    font-size: clamp(29px, 7.5vw, 34px);
  }
}
@media (hover: hover) and (pointer: fine) {
  /* Accented words join the rest of the white card text on hover. */
  #services .service-card:hover .service-heading-accent { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  #services .service-card .service-heading-accent { transition: none; }
}