.mf-pagehero { position: relative; overflow: clip; background: var(--mf-chrome); color: var(--mf-on-chrome); padding: 72px 0 88px; }
.mf-pagehero__bg { position: absolute; inset: 0; background: radial-gradient(640px 420px at 90% 0%, color-mix(in srgb, var(--mf-accent) 32%, transparent), transparent 70%), radial-gradient(520px 360px at 0% 100%, color-mix(in srgb, var(--mf-primary) 80%, transparent), transparent 70%); }
.mf-pagehero__in { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.mf-pagehero.has-img .mf-pagehero__in { grid-template-columns: 1.15fr .85fr; }
.mf-pagehero h1 { color: var(--mf-on-chrome); max-width: 18ch; margin-bottom: 20px; } .mf-pagehero .mf-em { color: var(--mf-accent); }
.mf-pagehero .mf-lead { color: color-mix(in srgb, var(--mf-on-chrome) 82%, transparent); max-width: 60ch; }
.mf-crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 28px; color: color-mix(in srgb, var(--mf-on-chrome) 70%, transparent); }
.mf-crumbs a { color: var(--mf-on-chrome); } .mf-crumbs b { color: var(--mf-accent); font-weight: var(--mf-w-button); } .mf-crumbs span { opacity: .5; }
.mf-pagehero__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
.mf-pagehero__chips li { padding: 8px 16px; border-radius: var(--mf-radius-pill); border: 1px solid color-mix(in srgb, var(--mf-accent) 50%, transparent); font-size: 14px; font-weight: var(--mf-w-label); color: var(--mf-accent); }
.mf-pagehero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 0; }
.mf-pagehero .mf-btn--ghost { color: var(--mf-on-chrome); border-color: color-mix(in srgb, var(--mf-on-chrome) 45%, transparent); } .mf-pagehero .mf-btn--ghost:hover { background: var(--mf-on-chrome); color: var(--mf-chrome); }
.mf-pagehero__img { border-radius: calc(var(--mf-radius) + 6px); overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid color-mix(in srgb, var(--mf-accent) 45%, transparent); background: color-mix(in srgb, var(--mf-on-chrome) 6%, transparent); }
.mf-pagehero__img img { width: 100%; height: 100%; object-fit: cover; }
.mf-pagehero__img .mf-ph { color: color-mix(in srgb, var(--mf-accent) 80%, transparent); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--mf-accent) 10%, transparent) 14px 15px); }
@media (max-width: 1023px) { .mf-pagehero { padding: 44px 0 56px; } .mf-pagehero.has-img .mf-pagehero__in { grid-template-columns: 1fr; } .mf-pagehero__img { max-width: 520px; } }