.case-hub-page { background: var(--color-white); }
.hub-hero { padding-block: clamp(76px, 10vw, 126px); background: var(--color-navy); color: var(--color-white); }
.hub-hero__inner { max-width: 1040px; }
.hub-hero .case-eyebrow, .hub-cta .case-eyebrow { color: #eef4ff; }
.hub-hero h1 { max-width: 980px; margin-bottom: var(--space-6); color: var(--color-white); font-size: clamp(46px, 6vw, 76px); line-height: 1.04; }
.hub-hero p:not(.case-eyebrow) { max-width: 830px; margin: 0; color: #d9e2ec; font-size: var(--body-large); }
.hub-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.hub-button--ghost { border: 1px solid rgb(255 255 255 / 48%); background: transparent; color: var(--color-white); }
.hub-button--ghost:hover { border-color: var(--color-white); background: rgb(255 255 255 / 8%); color: var(--color-white); }
.hub-proof-strip { border-bottom: var(--border-default); background: var(--color-white); }
.hub-proof-strip ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.hub-proof-strip li { display: flex; min-height: 92px; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-left: var(--border-default); color: var(--color-text-strong); font-family: var(--font-heading); font-size: 14px; font-weight: 700; }
.hub-proof-strip li:last-child { border-right: var(--border-default); }
.hub-proof-strip img, .hub-proof-icon { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.hub-proof-icon { display: grid; place-items: center; color: var(--color-action); }
.hub-proof-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.hub-section { padding-block: var(--section-space); }
.hub-heading { max-width: 790px; margin-bottom: var(--space-8); }
.hub-heading > p:last-child { color: var(--color-text-secondary); font-size: 18px; }
.hub-featured { background: var(--color-white); }
.hub-featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.hub-featured-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-white); }
.hub-featured-card--primary { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(280px, .66fr) minmax(0, 1.34fr); background: var(--color-blue-tint); }
.hub-featured-card figure, .hub-case-card figure { display: grid; min-width: 0; place-items: center; overflow: hidden; margin: 0; background: #f7f9fc; }
.hub-featured-card figure { aspect-ratio: 16 / 10; padding: clamp(12px, 2vw, 24px); }
.hub-featured-card--primary figure { aspect-ratio: 16 / 10; min-height: 0; }
.hub-featured-card img, .hub-case-card img { width: 100%; height: 100%; border-radius: var(--radius-md); object-fit: contain; }
.hub-featured-copy { display: flex; flex: 1; flex-direction: column; padding: clamp(26px, 4vw, 48px); }
.hub-featured-copy h3 { margin: var(--space-5) 0 var(--space-6); color: var(--color-brand); font-size: clamp(27px, 3vw, 40px); line-height: 1.16; }
.hub-featured-card:not(.hub-featured-card--primary) .hub-featured-copy h3 { font-size: clamp(24px, 2.4vw, 31px); }
.hub-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hub-card-meta span + span::before { margin-right: var(--space-2); color: var(--color-border); content: "/"; }
.hub-featured-copy dl, .hub-case-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); }
.hub-featured-copy dt, .hub-case-body dt { margin-bottom: var(--space-1); color: var(--color-text-muted); font-size: 13px; }
.hub-featured-copy dd { margin: 0; color: var(--color-brand); font: 800 clamp(19px, 2vw, 25px)/1.25 var(--font-heading); }
.hub-featured-copy > p { color: var(--color-text-muted); font-size: var(--body-small); }
.hub-text-link { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: var(--space-2); margin-top: auto; color: var(--color-action); font-family: var(--font-heading); font-size: 16px; font-weight: 800; text-decoration: none; }
.hub-text-link span { transition: transform var(--motion-fast) var(--ease-standard); }
.hub-text-link:hover span, .hub-text-link:focus-visible span { transform: translateX(4px); }
.hub-text-link:focus-visible, .hub-filters button:focus-visible { outline: 3px solid rgb(45 115 253 / 28%); outline-offset: 3px; }
.hub-library { background: var(--color-surface); }
.hub-library-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.hub-library-head .hub-heading { margin-bottom: var(--space-6); }
.hub-count { flex: 0 0 auto; margin-bottom: var(--space-6); color: var(--color-text-muted); font-size: 14px; font-weight: 600; }
.hub-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-6); margin-bottom: var(--space-7); border-bottom: var(--border-default); }
.hub-filters button { min-height: 44px; padding: 10px 20px; border: var(--border-default); border-radius: 999px; background: var(--color-white); color: var(--color-text-strong); font: 700 15px/1 var(--font-heading); cursor: pointer; }
.hub-filters button:hover { border-color: var(--color-action); color: var(--color-action); }
.hub-filters button[aria-pressed="true"] { border-color: var(--color-action); background: var(--color-action); color: var(--color-white); box-shadow: 0 0 0 3px rgb(45 115 253 / 20%); }
.hub-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.hub-case-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-white); transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.hub-case-card:hover { border-color: rgb(45 115 253 / 42%); transform: translateY(-3px); }
.hub-case-card[hidden] { display: none; }
.hub-case-card figure { aspect-ratio: 16 / 10; padding: 12px; border-bottom: var(--border-default); }
.hub-case-body { display: flex; flex: 1; flex-direction: column; padding: var(--space-6); }
.hub-case-body h3 { margin: var(--space-4) 0 var(--space-5); color: var(--color-brand); font-size: 23px; line-height: 1.25; }
.hub-case-body dl { grid-template-columns: 1fr; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-default); }
.hub-case-body dl div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.hub-case-body dt { margin: 0; }
.hub-case-body dd { margin: 0; color: var(--color-brand); font: 800 16px/1.3 var(--font-heading); text-align: right; }
.hub-case-body small { display: block; min-height: 40px; margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.hub-case-body .hub-text-link { width: 100%; justify-content: space-between; padding-top: var(--space-4); border-top: var(--border-default); }
.hub-cta { padding-block: var(--section-space); background: var(--color-navy); color: var(--color-white); }
.hub-cta__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: center; gap: clamp(48px, 8vw, 112px); }
.hub-cta h2 { max-width: 820px; color: var(--color-white); }
.hub-cta p:not(.case-eyebrow) { max-width: 780px; color: #d9e2ec; font-size: 18px; }
.hub-cta .hub-actions { display: grid; margin-top: 0; }
@media (max-width: 1100px) { .hub-proof-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-proof-strip li:nth-child(3) { border-top: var(--border-default); } .hub-proof-strip li:nth-child(4) { border-top: var(--border-default); } .hub-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .hub-featured-card--primary, .hub-cta__inner { grid-template-columns: 1fr; } .hub-featured-card--primary figure { min-height: 0; aspect-ratio: 16 / 9; } .hub-cta .hub-actions { max-width: 460px; } }
@media (max-width: 640px) { .hub-hero { padding-block: 64px 72px; } .hub-hero h1 { font-size: clamp(40px, 12vw, 54px); } .hub-hero p:not(.case-eyebrow) { font-size: var(--mobile-body-large); } .hub-actions { align-items: stretch; flex-direction: column; } .hub-actions .button { width: 100%; } .hub-proof-strip ul, .hub-featured-grid, .hub-card-grid { grid-template-columns: 1fr; } .hub-proof-strip li, .hub-proof-strip li:nth-child(3), .hub-proof-strip li:nth-child(4) { min-height: 68px; border-top: var(--border-default); border-right: var(--border-default); } .hub-proof-strip li:first-child { border-top: 0; } .hub-featured-card--primary { grid-column: auto; } .hub-featured-card figure, .hub-featured-card--primary figure { aspect-ratio: 16 / 10; } .hub-featured-copy { padding: var(--space-6); } .hub-featured-copy dl { grid-template-columns: 1fr; } .hub-library-head { align-items: flex-start; flex-direction: column; gap: 0; } .hub-count { margin-top: calc(var(--space-5) * -1); } .hub-filters button { flex: 1 1 auto; } .hub-case-body { padding: var(--space-5); } .hub-case-body small { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .hub-case-card, .hub-text-link span { transition: none; } .hub-case-card:hover { transform: none; } }