/* Service directory: short introductions, with detail on the dedicated pages. */
.services-hub { background: #f3f3e9; }
.hub-hero { padding: 34px 0 64px; }
.hub-hero .breadcrumb { font-size: .8rem; margin-bottom: 60px; }
.hub-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 80px; align-items: end; }
.hub-intro h1 { font-size: clamp(2.7rem, 5.2vw, 5rem); line-height: 1.03; font-weight: 650; letter-spacing: -.055em; }
.hub-intro h1 em { color: #627143; font-family: Georgia, serif; font-weight: 400; }
.hub-intro-copy { max-width: 39ch; font-size: 1rem; color: #526047; padding-bottom: 4px; }
.hub-intro-copy p:first-child { font-size: 1.15rem; color: #2f3c29; }
.hub-jump { display: inline-flex; gap: 30px; padding: 10px 0; margin-top: 10px; border-bottom: 1px solid #899b69; color: #34432b; text-decoration: none; font-size: .87rem; font-weight: 650; }
.hub-directory { padding-bottom: 80px; }
.hub-service { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 375px; border-radius: 14px; overflow: hidden; background: #dce4c7; margin-bottom: 22px; }
.hub-service-copy { padding: 36px 44px; position: relative; display: flex; flex-direction: column; align-items: start; }
.hub-number { position: absolute; right: 32px; top: 32px; font-size: .78rem; color: #61714c; }
.hub-service .eyebrow { font-size: .65rem; letter-spacing: .15em; margin: 0 0 22px; padding-right: 35px; }
.hub-service h2 { font-size: clamp(2rem, 3.3vw, 3.25rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; margin-bottom: 20px; }
.hub-service-copy > p:not(.eyebrow) { font-size: .95rem; line-height: 1.7; max-width: 41ch; color: #4a583b; margin-bottom: 25px; }
.hub-service-link { display: inline-flex; gap: 30px; align-items: center; font-weight: 700; font-size: .88rem; text-decoration: none; border-bottom: 1px solid #7c8e5e; padding: 8px 0; margin-top: auto; }
.hub-service-link:hover { border-color: currentColor; }
.hub-service-link span { font-size: 1.1rem; }
.hub-art { display: block; min-width: 0; background: #e4e8d6; overflow: hidden; }
.hub-art img { width: 100%; height: 100%; object-fit: cover; }
.hub-art:focus-visible { outline-offset: -6px; }
.hub-search { background: #202c20; color: #eef1e4; }
.hub-search h2 { color: #eef1e4; }
.hub-search .eyebrow, .hub-search .hub-number { color: #bed09d; }
.hub-search .hub-service-copy > p:not(.eyebrow) { color: #cbd6bf; }
.hub-search .hub-service-link { border-color: #879b6d; }
.hub-social { background: #e7e8d9; }
.hub-support { background: #253224; padding: 75px 0; color: #d0dac3; scroll-margin-top: 110px; }
.hub-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.hub-support .eyebrow { color: #b8cb90; }
.hub-support h2 { color: #f0f2e6; font-size: clamp(2rem, 3.5vw, 3.4rem); letter-spacing: -.04em; line-height: 1.1; margin-bottom: 25px; }
.hub-support p { max-width: 43ch; font-size: .95rem; margin: 0; }
.hub-support-list { margin: 0; }
.hub-support-list > div { border-bottom: 1px solid #526249; padding: 23px 0; }
.hub-support-list > div:first-child { border-top: 1px solid #526249; }
.hub-support-list dt { color: #edf1e2; font-size: 1.05rem; font-weight: 650; }
.hub-support-list dd { margin: 7px 0 0; font-size: .9rem; color: #becbb0; }
.hub-guidance { background: #e8ecdc; padding: 82px 0; }
.hub-guidance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.hub-guidance h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.04em; line-height: 1.1; }
.hub-guidance p { font-size: .98rem; color: #4c5a3f; }
.hub-guidance a { color: #304426; text-underline-offset: 4px; }
.hub-portfolio-link { display: inline-block; margin-top: 12px; font-size: .9rem; font-weight: 650; }
.hub-portfolio-link span { margin-left: 16px; }
@media (max-width: 980px) {
  .hub-intro { gap: 35px; }
  .hub-service-copy { padding: 30px; }
  .hub-service { min-height: 360px; }
  .hub-support-grid, .hub-guidance-grid { gap: 45px; }
}
@media (max-width: 700px) {
  .hub-hero { padding-bottom: 40px; }
  .hub-hero .breadcrumb { margin-bottom: 36px; }
  .hub-intro { grid-template-columns: 1fr; gap: 25px; }
  .hub-intro h1 { font-size: clamp(2.5rem, 9vw, 3.8rem); }
  .hub-intro-copy { max-width: 55ch; }
  .hub-service { grid-template-columns: 1fr; min-height: 0; }
  .hub-service-copy { padding: 30px 26px; }
  .hub-service h2 { font-size: 2.35rem; }
  .hub-art { height: auto; aspect-ratio: 10 / 6; }
  .hub-service-copy > p:not(.eyebrow) { max-width: none; }
  .hub-directory { padding-bottom: 40px; }
  .hub-support-grid, .hub-guidance-grid { grid-template-columns: 1fr; gap: 28px; }
  .hub-support, .hub-guidance { padding: 55px 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hub-art img { transition: transform .3s ease; }
  .hub-art:hover img { transform: scale(1.025); }
}