/*
 * The bright page hero with a live Hairline figure on its plate (assets/js/hl-figures.js).
 * Used by the service, solution, consulting and training pages and by the offer pages. Loads after service-page.css.
 */

/* ---------- Bright hero with a figure ---------- */
.offer-hero { background: linear-gradient(180deg, var(--tint) 0%, var(--white) 100%); padding: 84px 0 64px; border-bottom: 1px solid var(--line); }
.offer-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.offer-hero h1 { font: 700 clamp(34px, 4.6vw, 54px)/1.06 var(--font); letter-spacing: -.025em; color: var(--ink); margin: 14px 0 18px; text-wrap: balance; }
.offer-hero .lead { color: var(--ink-2); font-size: 18px; max-width: 34em; }
.offer-hero .eyebrow { color: var(--brand); }
.offer-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.offer-hero .proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; padding: 0; list-style: none; color: var(--ink-2); font-size: 14.5px; }
.offer-hero .proof li { display: flex; align-items: center; gap: 8px; }
.offer-hero .proof li::before { content: "✓"; color: var(--validated); font-weight: 700; }
.btn--ghost { border-color: var(--line); background: var(--white); color: var(--brand) !important; }
.btn--ghost:hover { border-color: var(--brand); background: var(--tint); }

/* the breadcrumb and hero extras of the older pages, on the bright hero */
.offer-hero { position: relative; }
.offer-hero .ms-crumbs a, .offer-hero .ms-crumbs span { color: var(--ink-3) !important; }
.offer-hero .ms-crumbs a:hover, .offer-hero .ms-crumbs [aria-current] { color: var(--ink) !important; }
.offer-hero .jump { justify-content: flex-start; margin-top: 28px; }
.offer-hero .jump a { background: var(--white); border-color: var(--line); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.offer-hero .jump a:hover { background: var(--tint); border-color: var(--brand); }
.offer-hero .jump b { color: var(--brand); }
.offer-hero .tp-facts { justify-content: flex-start; margin: 24px 0 0; }
.offer-hero .tp-facts li { color: var(--ink-2); border-color: var(--line); background: var(--white); }
.offer-hero .tp-hero-actions { justify-content: flex-start; margin-top: 24px; }

/* a figure on its plate, with a small read-out of what the pointer is on */
.fig-plate { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift); max-width: 100%; }
.fig-plate [data-hl] { width: 100%; }
.fig-plate .fig-tag { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 12px; font: 600 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; z-index: 1; }
.fig-plate .fig-tag b { color: var(--brand); font-weight: 600; }
.fig-plate .fig-hint { position: absolute; bottom: 12px; left: 16px; font-size: 13px; color: var(--ink-3); pointer-events: none; }

@media (max-width: 960px) {
    .offer-hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .offer-hero { padding: 72px 0 48px; }
}