/* ==========================================================================
   Shared UI components of the new design (values from the prototypes).
   ========================================================================== */

/* Mulish (latin, 400/600/700) for the live assistant chat cards (homepage, Genesis AI, Live Clients).
   Self-hosted from @fontsource/mulish 5.3.0 (SIL OFL 1.1, see ../fonts/Mulish-OFL.txt): no request to Google Fonts. */
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Clients marquee ---- */
.ui-clients { background: #fff; border-bottom: 1px solid var(--border-subtle); padding: 40px 0 44px; overflow: hidden; }
.ui-clients__label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--fg-tertiary); margin: 0 0 28px; }
.ui-clients__mask { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ui-clients__track { display: flex; width: max-content; animation: gdsMarquee 40s linear infinite; }
.ui-clients__track:hover { animation-play-state: paused; }
.ui-clients__logo { flex: none; width: 250px; height: 80px; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.ui-clients__logo img { width: auto; max-width: 100%; filter: grayscale(1); opacity: 0.55; mix-blend-mode: multiply; }

/* ---- Inner-page banner ---- */
.ui-banner { position: relative; background: #08122A; overflow: hidden; }
.ui-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.55; pointer-events: none; }
.ui-banner__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 44px 32px 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.ui-banner__copy { flex: 1 1 520px; display: flex; flex-direction: column; gap: 24px; max-width: 700px; }
.ui-banner__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.ui-banner__crumbs a { color: rgba(255, 255, 255, 0.6); }
.ui-banner__crumbs a:hover { color: #fff; }
.ui-banner__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--gds-yellow); display: flex; align-items: center; gap: 12px; margin: 0; }
.ui-banner__eyebrow > span { width: 32px; height: 2px; background: var(--gds-yellow); }
.ui-banner__title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; font-weight: 400; letter-spacing: -0.025em; color: #fff; text-wrap: pretty; margin: 0; }
.ui-banner__lead { font-size: 18px; line-height: 1.55; font-weight: 400; color: rgba(255, 255, 255, 0.78); max-width: 560px; text-wrap: pretty; margin: 0; }
.ui-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.ui-banner__actions .gds-btn { display: flex; }
.ui-banner__visual { flex: 1 1 380px; margin-left: auto; }

/* ---- Live virtual-assistant chat cards (parts/ui/assistant-chats.php): prototype style-hover ---- */
.ui-chat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 4px 8px rgba(17,31,61,0.08), 0 24px 56px rgba(17,31,61,0.22) !important; }

@media (prefers-reduced-motion: reduce) {
	.ui-clients__track { animation: none; }
}

/* ---- Blog card (parts/blog/design-card.php): prototype style-hover ---- */
.bl-card:hover { box-shadow:0 16px 40px rgba(17,31,61,0.14) !important;transform:translateY(-2px) !important;text-decoration:none !important }