.h2-breadcrumbs-section { width: 100%; margin: 0 0 clamp(14px, 2vw, 22px); } .h2-breadcrumbs-slot[data-h2-breadcrumbs-autoplace="true"]:not(.is-placed) { display: none; } .h2-breadcrumbs { display: block; max-width: 100%; } .h2-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: currentColor; font-size: clamp(0.75rem, 1.1vw, 0.86rem); font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .h2-breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; } .h2-breadcrumbs__item + .h2-breadcrumbs__item::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: 0.46; transform: rotate(45deg); } .h2-breadcrumbs__link { color: var(--orange, #f7941d); text-decoration: none; transition: color 0.18s ease, opacity 0.18s ease; } .h2-breadcrumbs__link:hover, .h2-breadcrumbs__link:focus-visible { color: var(--orange-light, #ffab45); outline: none; } .h2-breadcrumbs__current { display: inline-block; max-width: min(56ch, 72vw); overflow: hidden; color: currentColor; opacity: 0.72; text-overflow: ellipsis; white-space: nowrap; } .h2-breadcrumbs--dark, .h2-services-hero .h2-breadcrumbs, .h2-cat-hero .h2-breadcrumbs, .h2-areas-hero .h2-breadcrumbs, .h2-blog-hero .h2-breadcrumbs { color: rgba(255, 255, 255, 0.9); } .h2-breadcrumbs--light, .h2-breadcrumbs-section .h2-breadcrumbs { color: var(--blue-darkest, #082b3f); } @media (max-width: 640px) { .h2-breadcrumbs-section { margin-bottom: 12px; } .h2-breadcrumbs__list { gap: 6px; font-size: 0.72rem; letter-spacing: 0.06em; } .h2-breadcrumbs__current { max-width: 52vw; } }