/* Small additions to the established visual system for useful search destinations. */
.breadcrumbs { margin: 0 0 1.25rem; color: #c1b7a4; font-size: .73rem; line-height: 1.65; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: .7rem; }
.breadcrumbs li + li::before { content: '/'; color: #a49985; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; padding-block: .3rem; }
.breadcrumbs [aria-current="page"] { color: #eee5d3; }
.seo-hero-image {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-position, center);
  filter: saturate(.88) contrast(1.06);
  transform: translate3d(0, var(--page-hero-y), 0) scale(var(--page-hero-scale));
}
.has-seo-hero::before {
  background: linear-gradient(90deg, rgba(4,8,5,.94) 0%, rgba(4,8,5,.72) 38%, rgba(4,8,5,.25) 100%),
    linear-gradient(180deg, rgba(4,8,5,.08) 0%, rgba(4,8,5,.7) 100%);
}
.seo-service-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; }
.seo-service-links a, .footer-service-links a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-color: rgba(195,164,106,.5); color: #eee5d3;
}
.footer-service-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; }
.seo-area-links { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.seo-area-links a { display: flex; align-items: center; min-height: 48px; padding: .65rem 1rem;
  border: 1px solid rgba(232,222,201,.2); border-radius: 999px; color: #eee5d3; font-size: .9rem; }
.seo-area-links a:hover { background: rgba(195,164,106,.08); border-color: #c3a46a; }
.seo-pathways { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(232,222,201,.16); }
.seo-pathways p { max-width: 36rem; }
.seo-pathways h3 { font-size: clamp(1.75rem, 2.5vw, 2.4rem); }
.seo-related-example { margin-top: 1.2rem; font-size: .85rem; }
@media (max-width: 640px) {
  .breadcrumbs { font-size: .67rem; margin-bottom: 1rem; }
  .breadcrumbs ol { gap: .2rem .5rem; }
  .breadcrumbs li { gap: .5rem; }
  .seo-service-links { flex-direction: column; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) { .seo-hero-image { transform: none; } }