Strategy
Visioning
Delivery
*/
.tag-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.tag {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(245,245,240,0.6);
border: 0.5px solid rgba(245,245,240,0.25);
border-radius: 2rem;
padding: 0.3rem 0.85rem;
display: inline-block;
}
.tag:hover {
color: #f5f5f0;
border-color: rgba(245,245,240,0.5);
}
/* Tags on cream background */
.tag--dark {
color: rgba(10,10,10,0.6);
border-color: rgba(10,10,10,0.2);
}
.tag--dark:hover {
color: #0a0a0a;
border-color: rgba(10,10,10,0.5);
}
/* ─── HERO INNER — inner page hero (all pages except home) ── */
/*
Usage:
Page category
Page title goes here.
Supporting subtitle that gives context.
Role
Short descriptor sentence about this page or project.
Caption text
Centered gallery caption
*/ .section .caption, .caption { color: rgba(245,245,240,0.82); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; padding: 16px 2px 8px; margin: 0; } /* Gallery captions: capped to 70% of image width on desktop */ @media (min-width: 1024px) { .gallery-caption { max-width: 70%; margin-left: auto; margin-right: auto; text-align: left; } } /* Captions inside a light .section read dark */ #core-workflows-section .caption { color: var(--color-text-dark-muted); } /* ─── SLIDER — horizontal scroll strip ────────────────────── */ /* A horizontally-scrolling strip of media slides on a black rail. Usage:...