.v4hero--page .v4hero__inner { min-height: clamp(380px, 56vh, 560px); padding-block: var(--space-8) var(--space-7); }
.crumbs { display: inline-flex; gap: .5ch; font-family: var(--font-display); font-size: .8rem; letter-spacing: .04em; color: #cdd2ff; margin: 0 0 var(--space-4); flex-wrap: wrap; }
.crumbs a { color: #cdd2ff; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: #fff; }
.serving { text-align: center; color: var(--grey-600); font-size: var(--fs-small); max-width: 70ch; margin-inline: auto; }
.serving--cta { text-align: left; color: #fff; font-weight: 600; max-width: none; margin: var(--space-5) 0 0; }
/* anchor targets should clear the sticky header */
[id^="project-"], #directory { scroll-margin-top: 90px; }
/* directory cards carry a numbered eyebrow like the case studies below, so the two feel like one system */
.proj-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-blue); background: var(--brand-blue-tint); padding: .3rem .7rem; margin: 0 0 var(--space-3); }
/* back-to-directory link, reusing the blog "read more" arrow style */
.proj-back { margin-top: var(--space-6); }