/* Services hub: the MEIKLE collection. */
html:has(.services-page) { scroll-behavior: auto; }
.services-page .services-hero { padding-bottom: 76px; background: linear-gradient(90deg,#13191cf5,#13191cb8 65%,#13191c65),url('../images/pics/bc7167c1.jpeg') center/cover; }
.services-hero h1 span { color: #dfb675; }
.services-page #core-services { background: #f5f3ee; }
.services-page #core-services > .container > .section-heading { max-width: 760px; margin-bottom: 48px; }
.services-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 58px; align-items: start; }
.services-index { position: sticky; top: 105px; }
.services-page .services-index h2 { font-size: 1.9rem; }
.services-index nav { display: grid; }
.services-index nav a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ded8cc; font-size: .82rem; font-weight: 600; }
.services-index nav a span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #d4ab6b; color: #171b1e; font-weight: 800; }
.services-index nav a:hover { color: #81551f; }
.services-page .services-index > p:last-child { font-size: .8rem; color: #62686a; margin-top: 24px; }
.services-page .hub-services { grid-template-columns: 1fr; gap: 32px; min-width: 0; }
.service-feature { border: 1px solid #dfd7ca; background: white; scroll-margin-top: 110px; }
.service-feature-photo { width: 100%; height: 290px; object-fit: cover; }
.services-page .hub-service { border: 0; padding: 30px; gap: 22px; }
.services-page .hub-service:hover { background: #fffaf1; }
.services-page .hub-letter { flex-basis: 54px; height: 60px; background: #171b1e; color: #dfb675; font-size: 2.2rem; }
.services-page .hub-service h3 { margin-top: 0; font-size: 1.6rem; line-height: 1.25; }
.services-page .hub-service p { font-size: .95rem; }
.services-page #more-services { background: #fff; }
.services-page .related-services > a { background: #f5f3ee; border-top: 3px solid #c99a52; padding: 32px; }
.services-page .review-showcase { border-top: 1px solid #c99a5250; }
@media(max-width:900px) {
  .services-layout { grid-template-columns: 1fr; gap: 32px; }
  .services-index { position: static; }
  .services-index nav { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
  .services-page .hub-services { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .service-feature-photo { height: 210px; }
  .services-page .hub-service { padding: 22px; gap: 14px; }
  .services-page .hub-service h3 { font-size: 1.25rem; }
  .services-page .hub-letter { flex-basis: 38px; height: 44px; font-size: 1.6rem; }
}
@media(max-width:600px) {
  .services-page .services-hero { padding-bottom: 44px; }
  .services-page .services-hero h1 { font-size: clamp(2.1rem,9vw,3rem); }
  .services-page .hub-services { grid-template-columns: 1fr; }
  .services-index nav { column-gap: 16px; }
  .services-index nav a { font-size: .75rem; gap: 8px; }
  .services-index nav a span { flex-basis: 25px; height: 25px; }
  .service-feature-photo { height: 230px; }
}

/* Service navigation retained from the original portfolio layout. */
.portfolio-services { background: #eee5d7; border-bottom: 1px solid #d8c7ad; }
.portfolio-services .container { display: grid; grid-template-columns: repeat(6,1fr); }
.portfolio-services a { display: flex; flex-direction: column; gap: 10px; padding: 24px 12px; align-items: center; text-align: center; font-size: .74rem; font-weight: 600; }
.portfolio-services a:hover { background: #e4d5bf; }
.portfolio-services a > span { display: grid; place-items: center; width: 44px; height: 44px; background: #171b1e; color: #dfb675; font-size: 1.4rem; font-weight: 800; border-bottom: 2px solid #c99a52; }
.portfolio-services a:focus-visible { outline: 3px solid #98713b; outline-offset: -3px; }
@media (max-width: 900px) {
    .portfolio-services .container { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .portfolio-services a { font-size: .67rem; padding: 18px 6px; }
}