/*
 * Hire an Expert (HAE) — page-local styles.
 *
 * Everything is scoped under `.hae-page`. That is deliberate and load-bearing:
 * the legacy theme sets `html { font-size: 10px }`, `body { font-size: 20px }`,
 * and styles bare `h1-h6`, `p`, `ul`, and `li` globally. Those rules would
 * otherwise win here, so the page pins its own base and neutralizes the
 * inherited element styles below — without leaking any of it back into the
 * shared header and footer.
 *
 * The element resets use `:where()` so they land at zero specificity. Any
 * single class in this file therefore overrides them without `!important`,
 * which keeps the component rules below plain and easy to adjust.
 *
 * Palette follows the TGD brand tokens already in use on the Magai and Genius
 * Club pages (violet #8228f4, bright violet #b832ff, magenta #f01b85).
 */

.hae-page {
    --hae-violet: #8228f4;
    --hae-violet-bright: #b832ff;
    --hae-violet-deep: #5b13b8;
    --hae-magenta: #f01b85;

    --hae-ink: #17152d;
    --hae-ink-soft: #5a5870;
    --hae-line: #e4e0f2;
    --hae-surface: #ffffff;
    --hae-surface-alt: #faf8ff;
    --hae-tint: #f3edff;

    --hae-shadow-sm: 0 4px 14px rgba(23, 21, 45, .06);
    --hae-shadow-md: 0 18px 44px rgba(70, 30, 140, .10);
    --hae-shadow-lg: 0 30px 70px rgba(70, 30, 140, .16);

    --hae-radius: 20px;
    --hae-radius-lg: 28px;

    /* Single source of vertical rhythm. Every band uses this top and bottom,
       so the gap between any two adjacent sections is always 2x this value. */
    --hae-section-y: 92px;
    --hae-gutter: 24px;

    min-width: 320px;
    background: var(--hae-surface-alt);
    color: var(--hae-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The theme's 10px root would shrink every rem below; pin a 16px base. */
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}

.hae-page,
.hae-page *,
.hae-page *::before,
.hae-page *::after {
    box-sizing: border-box;
}

html:has(.hae-page) {
    scroll-behavior: smooth;
}

/* Neutralize the legacy theme's base element styles inside the page only. */
.hae-page :where(h1, h2, h3, h4) {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
    word-break: normal;
    overflow-wrap: normal;
}

.hae-page :where(p) {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.hae-page :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* These selectors deliberately include `.hae-page` so they outrank the legacy
   theme's `ul li` margins and colour without leaking into the shared chrome. */
.hae-page :where(li) {
    margin: 0;
    padding: 0;
    color: inherit;
    list-style: none;
}

.hae-page :where(li)::marker {
    content: "";
}

.hae-page :where(a) {
    text-decoration: none;
}

.hae-page img,
.hae-page svg {
    max-width: 100%;
}

.hae-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--hae-gutter);
}

.hae-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Shared type ──────────────────────────────────────────────────────── */

.hae-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--hae-violet);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hae-eyebrow__tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hae-tint);
    color: var(--hae-violet-deep);
    font-size: 11px;
    letter-spacing: .1em;
}

.hae-section-head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.hae-section-head h2 {
    font-size: clamp(28px, 4vw, 42px);
}

.hae-section-head p {
    margin-top: 16px;
    color: var(--hae-ink-soft);
    font-size: 17px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.hae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.hae-btn--primary {
    background: linear-gradient(100deg, var(--hae-violet) 0%, var(--hae-violet-bright) 55%, var(--hae-magenta) 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(130, 40, 244, .30);
}

.hae-btn--primary:hover,
.hae-btn--primary:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(130, 40, 244, .38);
}

.hae-btn--ghost {
    border-color: var(--hae-line);
    background: var(--hae-surface);
    color: var(--hae-violet-deep);
}

.hae-btn--ghost:hover,
.hae-btn--ghost:focus-visible {
    border-color: var(--hae-violet-bright);
    background: var(--hae-tint);
    color: var(--hae-violet-deep);
}

.hae-btn--lg {
    padding: 16px 32px;
    font-size: 16px;
}

.hae-btn--sm {
    padding: 10px 20px;
    font-size: 14px;
}

.hae-btn__arrow {
    transition: transform .18s ease;
}

.hae-btn:hover .hae-btn__arrow {
    transform: translateX(3px);
}

.hae-page a.hae-btn:focus-visible,
.hae-page button:focus-visible {
    outline: 2px solid var(--hae-violet-bright);
    outline-offset: 3px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hae-hero {
    position: relative;
    padding: 88px 0 var(--hae-section-y);
    background:
        radial-gradient(1100px 520px at 12% -10%, #f0e6ff 0%, rgba(240, 230, 255, 0) 62%),
        radial-gradient(820px 460px at 88% 8%, #ffe8f5 0%, rgba(255, 232, 245, 0) 60%),
        var(--hae-surface);
    overflow: hidden;
}

.hae-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hae-hero__copy h1 {
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.03;
    text-transform: uppercase;
}

.hae-hero__accent {
    background: linear-gradient(96deg, var(--hae-violet-bright) 0%, var(--hae-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hae-hero__lede {
    max-width: 460px;
    margin-top: 22px;
    color: var(--hae-ink-soft);
    font-size: 18px;
}

.hae-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 34px 0;
}

.hae-hero__points li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hae-point__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 50%;
    background: var(--hae-tint);
    color: var(--hae-violet);
}

.hae-point__text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.32;
}

/* Hero visual — photography plus the overlapping note card. */
.hae-hero__visual {
    position: relative;
    /* Room below the photo for the rotated note card to overhang it. */
    padding-bottom: 44px;
}

/*
 * From desktop up the photo leaves the container and fills the hero's right
 * half edge to edge. It is taken out of flow and pinned to the section, so
 * the hero's height is still set by the copy column while the image fills
 * whatever that comes to — no fixed heights to keep in sync.
 *
 * The empty second grid column is what keeps the copy off the photo.
 */
@media (min-width: 981px) {
    .hae-hero__visual {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        /* 48% clears the copy column at every width from 981px up; 52% starts
           colliding with it past roughly 1900px. */
        width: 48%;
        padding-bottom: 0;
    }

    .hae-hero__photo {
        height: 100%;
        border-radius: 0;
    }

    /* The overhang gives the scroll parallax room to travel without
       uncovering the bottom edge of the frame. */
    .hae-hero__photo img {
        height: 112%;
        aspect-ratio: auto;
    }

}

/*
 * The photo's left edge is dissolved into the page rather than covered by a
 * matching-colour overlay. The hero background is two radial gradients over
 * white, so a solid scrim would never line up — masking makes the image
 * itself transparent and lets the real background show through.
 */
.hae-hero__photo {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 0 var(--hae-radius-lg) var(--hae-radius-lg) 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}

.hae-hero__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    /* The subject sits right of centre, so bias the crop that way to keep
       her in frame as the column narrows. */
    object-fit: cover;
    object-position: 64% center;
}

/*
 * The note card. Layered shadow rather than a single soft one: a tight
 * contact shadow anchors it to the photo, a wide violet-tinted one lifts it
 * off, and a hairline ring keeps the white edge from dissolving into the
 * lighter parts of the image behind it.
 */
.hae-hero__note {
    position: absolute;
    right: 8px;
    bottom: 24px;
    z-index: 3;
    max-width: 288px;
    padding: 26px 30px 28px;
    border-radius: 20px;
    background: var(--hae-surface);
    box-shadow:
        0 0 0 1px rgba(130, 40, 244, .07),
        0 2px 6px rgba(23, 21, 45, .05),
        0 24px 52px rgba(70, 30, 140, .22);
    transform: rotate(-3deg);
}

/* A soft expanding ring keeps the note noticeable without competing with
   the hero entrance animation, which controls the card's own transform. */
.hae-hero__note::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(184, 50, 255, .38);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: hae-note-emphasis 3.2s ease-out infinite;
}

@keyframes hae-note-emphasis {
    0%,
    45% {
        opacity: 0;
        transform: scale(.98);
    }

    58% {
        opacity: .48;
    }

    82%,
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@media (min-width: 981px) {
    /* Sits low and left within the photo, over the laptop rather than in the
       corner. This override follows the base card rule so all three inset
       properties reliably win in the cascade. */
    .hae-hero__note {
        left: 16%;
        right: auto;
        bottom: max(36px, 7%);
    }
}

/* Short gradient rule standing in for the flourish on a handwritten note. */
.hae-hero__note-mark {
    display: block;
    width: 38px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hae-violet-bright), var(--hae-magenta));
}

.hae-hero__note-lead {
    color: var(--hae-ink);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

.hae-hero__note-sub {
    margin-top: 8px;
    color: var(--hae-ink-soft);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: balance;
}

.hae-hero__glow {
    position: absolute;
    /* Explicitly behind the laptop and note, which are z-index 2 and 3. */
    z-index: 0;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .55;
    pointer-events: none;
}

.hae-hero__glow--one {
    top: -30px;
    right: 6%;
    width: 240px;
    height: 240px;
    background: rgba(184, 50, 255, .40);
}

.hae-hero__glow--two {
    bottom: -40px;
    left: 4%;
    width: 210px;
    height: 210px;
    background: rgba(240, 27, 133, .28);
}

/* ── Problem ──────────────────────────────────────────────────────────── */

/*
 * Deliberately the quietest band on the page: near-white, hairline borders,
 * grey iconography. It describes the reader's current situation, so the
 * brand colour is held back until the solution section answers it.
 */
.hae-problem {
    padding: var(--hae-section-y) 0;
    background: var(--hae-surface);
    border-top: 1px solid var(--hae-line);
}

.hae-eyebrow--center {
    justify-content: center;
}

.hae-eyebrow--muted {
    color: var(--hae-ink-soft);
}

.hae-section-head--tight {
    max-width: 640px;
}

.hae-problem__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 940px;
    margin: 0 auto;
}

.hae-problem__item {
    padding: 28px 30px 30px;
    border: 1px solid var(--hae-line);
    border-radius: var(--hae-radius);
    background: var(--hae-surface-alt);
}

.hae-problem__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 12px;
    background: #eeecf5;
    color: #8a87a0;
}

.hae-problem__title {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.32;
}

.hae-problem__blurb {
    margin-top: 10px;
    color: var(--hae-ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

/* ── Solution ─────────────────────────────────────────────────────────── */

.hae-solution {
    padding: var(--hae-section-y) 0;
    background:
        radial-gradient(760px 460px at 18% 20%, #f2e9ff 0%, rgba(242, 233, 255, 0) 62%),
        var(--hae-surface-alt);
}

.hae-solution__grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* Heading holds position while the steps scroll past it. */
.hae-solution__intro-inner {
    position: sticky;
    top: 120px;
}

.hae-solution__intro h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.12;
}

.hae-solution__lede {
    margin: 18px 0 28px;
    color: var(--hae-ink-soft);
    font-size: 17px;
}

.hae-solution__steps {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.hae-solution__step {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 26px 28px;
    border: 1px solid var(--hae-line);
    border-radius: var(--hae-radius);
    background: var(--hae-surface);
    box-shadow: var(--hae-shadow-sm);
    transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/*
 * Idle steps only sit back once page.js has confirmed ScrollTrigger is live
 * and added `is-enhanced`. Without that class every step stays at full
 * strength, so a blocked CDN leaves the section readable rather than dimmed.
 */
.hae-solution__steps.is-enhanced .hae-solution__step {
    opacity: .62;
}

.hae-solution__step.is-active {
    opacity: 1;
    transform: translateX(6px);
    border-color: rgba(184, 50, 255, .32);
    box-shadow: var(--hae-shadow-md);
}

.hae-solution__marker {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--hae-tint);
    color: var(--hae-violet);
    transition: background .35s ease, color .35s ease;
}

.hae-solution__step.is-active .hae-solution__marker {
    background: linear-gradient(140deg, var(--hae-violet) 0%, var(--hae-violet-bright) 60%, var(--hae-magenta) 100%);
    color: #fff;
}

/* The number and the icon share one cell and cross-fade on activation. */
.hae-solution__number,
.hae-solution__icon {
    grid-area: 1 / 1;
    transition: opacity .3s ease, transform .3s ease;
}

.hae-solution__number {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
}

.hae-solution__icon {
    display: block;
    width: 26px;
    height: 26px;
    opacity: 0;
    transform: scale(.7);
}

.hae-solution__step.is-active .hae-solution__number {
    opacity: 0;
    transform: scale(.7);
}

.hae-solution__step.is-active .hae-solution__icon {
    opacity: 1;
    transform: scale(1);
}

.hae-solution__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.hae-solution__blurb {
    margin-top: 8px;
    color: var(--hae-ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

/* ── Packages ─────────────────────────────────────────────────────────── */

/* Hairline keeps this from merging with the solution band above, which
   shares the same background tone. */
.hae-packages {
    padding: var(--hae-section-y) 0;
    background: var(--hae-surface-alt);
    border-top: 1px solid var(--hae-line);
}

/*
 * `align-items` is intentionally left at its `stretch` default so all three
 * cards share the tallest card's height and their buttons align.
 *
 * The featured card is raised rather than made wider — a wider middle column
 * would pull the illustrations out of alignment across the row.
 */
.hae-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hae-package {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 30px 36px;
    border: 1px solid transparent;
    border-radius: var(--hae-radius-lg);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

/* Unfeatured cards sit flat on the section background, so the raised middle
   card reads as the recommendation without needing a badge. */
.hae-package:not(.hae-package--featured):hover {
    border-color: var(--hae-line);
    background: var(--hae-surface);
    box-shadow: var(--hae-shadow-sm);
}

.hae-package--featured {
    background: var(--hae-surface);
    box-shadow: var(--hae-shadow-md);
}

.hae-package--featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--hae-shadow-lg);
}

/* ── Package artwork ──────────────────────────────────────────────────── */

/*
 * Square frame. Every image is exported onto an identical 900x900 canvas,
 * so all three sit at the same height and the row aligns without any
 * per-card adjustment.
 */
.hae-package__art {
    width: 100%;
    max-width: 260px;
    margin-bottom: 22px;
}

.hae-package__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}


/* ── Package copy ─────────────────────────────────────────────────────── */

.hae-package__name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.hae-package__tagline {
    margin-top: 8px;
    color: var(--hae-ink-soft);
    font-size: 14px;
    line-height: 1.45;
}

.hae-package__price {
    margin-top: 20px;
    background: linear-gradient(96deg, var(--hae-violet) 0%, var(--hae-violet-bright) 60%, var(--hae-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.hae-package__currency {
    margin-right: 2px;
    font-size: 26px;
    font-weight: 700;
    vertical-align: super;
}

.hae-package__unit {
    margin-top: 8px;
    color: var(--hae-ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/*
 * Hairline-separated rows, as in the reference. The first row carries the
 * top border so the list reads as a bounded block rather than a run of text.
 */
.hae-package__features {
    width: 100%;
    margin: 28px 0 26px;
}

.hae-package__features li {
    padding: 13px 4px;
    border-bottom: 1px solid var(--hae-line);
    font-size: 15px;
    line-height: 1.45;
}

.hae-package__features li:first-child {
    border-top: 1px solid var(--hae-line);
}

.hae-package__footnote {
    margin: 16px 0 26px;
    color: var(--hae-ink-soft);
    font-size: 13px;
    line-height: 1.5;
}

/*
 * The bottom margins above guarantee a gap over the button; `margin-top: auto`
 * on the button itself then absorbs the leftover height, so all three buttons
 * land on the same baseline even though Launch carries a sixth feature.
 *
 * When a footnote follows the list, the list drops its own bottom margin so
 * the two gaps don't stack (flex margins do not collapse).
 */
.hae-package__features:has(+ .hae-package__footnote) {
    margin-bottom: 0;
}

.hae-package__cta {
    width: 100%;
    margin-top: auto;
}

/* ── Experts ──────────────────────────────────────────────────────────── */

.hae-experts {
    padding: var(--hae-section-y) 0;
    background:
        radial-gradient(900px 420px at 82% 50%, #f4ecff 0%, rgba(244, 236, 255, 0) 64%),
        var(--hae-surface);
}

.hae-experts__grid {
    display: grid;
    grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.hae-experts__intro h2 {
    font-size: clamp(28px, 3.6vw, 40px);
}

.hae-experts__intro p {
    margin: 16px 0 26px;
    color: var(--hae-ink-soft);
    font-size: 17px;
}

.hae-experts__carousel {
    position: relative;
}

.hae-experts__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 22px) / 4);
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.hae-experts__track::-webkit-scrollbar {
    display: none;
}

.hae-expert {
    scroll-snap-align: start;
    text-align: center;
}

/*
 * The gradient ring is drawn on the wrapper and the photo inset inside it,
 * so the brand colour frames the portrait rather than sitting behind it.
 */
.hae-expert__portrait {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--hae-violet) 0%, var(--hae-violet-bright) 55%, var(--hae-magenta) 100%);
    box-shadow: 0 14px 34px rgba(130, 40, 244, .26);
}

.hae-expert__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid var(--hae-surface);
    border-radius: 50%;
    object-fit: cover;
    /* Portraits are head-and-shoulders crops, so bias upward to keep the
       face centred in the circle rather than the chest. */
    object-position: center 42%;
}

.hae-expert__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.25;
    text-transform: uppercase;
}

.hae-expert__role {
    margin-top: 4px;
    color: var(--hae-violet);
    font-size: 13px;
    font-weight: 600;
}

.hae-expert__blurb {
    margin-top: 10px;
    color: var(--hae-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Services ─────────────────────────────────────────────────────────── */

.hae-services {
    padding: var(--hae-section-y) 0;
    background: var(--hae-surface-alt);
}

.hae-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.hae-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 26px 30px;
    border: 1px solid var(--hae-line);
    border-radius: var(--hae-radius);
    background: var(--hae-surface);
    box-shadow: var(--hae-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hae-service:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 50, 255, .34);
    box-shadow: var(--hae-shadow-md);
}

.hae-service__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 14px;
    background: var(--hae-tint);
    color: var(--hae-violet);
}

.hae-service__name {
    margin-top: 20px;
    color: var(--hae-violet-deep);
    font-size: 17px;
    font-weight: 700;
}

.hae-service__blurb {
    margin: 10px 0 22px;
    color: var(--hae-ink-soft);
    font-size: 14px;
    line-height: 1.55;
}

/* Pins every "Learn more" to the bottom of its card regardless of how many
   lines the blurb above it runs to. */
.hae-service .hae-btn {
    margin-top: auto;
}

/* ── Closing CTA ──────────────────────────────────────────────────────── */

.hae-closing {
    padding: var(--hae-section-y) 0;
    background: var(--hae-surface-alt);
}

/*
 * The band is a child of `.hae-container` rather than sharing its class, so
 * the container keeps its own gutter and the band's padding is independent.
 */
.hae-closing__inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 36px 44px;
    border-radius: var(--hae-radius-lg);
    background: linear-gradient(100deg, #1b0740 0%, #3d1178 52%, #6b1a9e 100%);
    box-shadow: var(--hae-shadow-lg);
}

.hae-closing__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    padding: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.hae-closing__copy {
    flex: 1 1 auto;
}

.hae-closing__copy h2 {
    color: #fff;
    font-size: clamp(20px, 2.4vw, 27px);
}

.hae-closing__copy p {
    margin-top: 7px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
}

.hae-closing .hae-btn--primary {
    flex: 0 0 auto;
    background: #fff;
    color: var(--hae-violet-deep);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.hae-closing .hae-btn--primary:hover,
.hae-closing .hae-btn--primary:focus-visible {
    background: #fff;
    color: var(--hae-violet-deep);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .hae-experts__track {
        grid-auto-columns: calc((100% - 2 * 20px) / 3);
    }
}

@media (max-width: 1024px) {
    .hae-page {
        --hae-section-y: 76px;
    }

    .hae-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hae-package {
        padding: 26px 24px 28px;
    }
}

@media (max-width: 980px) {
    .hae-hero {
        padding: 64px 0 var(--hae-section-y);
    }

    .hae-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    /*
     * Single column: the photo is no longer beside the copy, so the left
     * fade has nothing to blend into. Pull it back to a soft edge and round
     * both sides now that the image sits inside the container gutter.
     */
    .hae-hero__photo {
        border-radius: var(--hae-radius-lg);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
        mask-image: linear-gradient(to right, transparent 0%, #000 16%);
    }

    /* Stacked layout: the photo is full width, so the card tucks into the
       bottom-left of it rather than sitting over the subject on the right. */
    .hae-hero__note {
        left: 5%;
        right: auto;
        bottom: 24px;
    }

    .hae-problem__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }

    .hae-solution__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Nothing to pin against in a single column. */
    .hae-solution__intro-inner {
        position: static;
    }

    .hae-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        max-width: 460px;
        margin: 0 auto;
    }

    /* Stacked cards each get their own surface, since a single raised card
       in a vertical list reads as an error rather than a recommendation. */
    .hae-package {
        border-color: var(--hae-line);
        background: var(--hae-surface);
        box-shadow: var(--hae-shadow-sm);
    }

    /* Single column: nothing to align a shared baseline against. */
    .hae-package__cta {
        margin-top: 0;
    }

    .hae-experts__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .hae-experts__intro {
        text-align: center;
    }

    .hae-experts__intro p {
        margin-left: auto;
        margin-right: auto;
    }

    .hae-experts__track {
        grid-auto-columns: calc((100% - 20px) / 2);
    }

    .hae-closing__inner {
        flex-direction: column;
        padding: 34px 30px;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hae-page {
        --hae-section-y: 60px;
        --hae-gutter: 18px;
    }

    .hae-hero {
        padding: 48px 0 var(--hae-section-y);
    }

    .hae-hero__points {
        gap: 16px;
    }

    .hae-hero__points li {
        flex: 1 1 100%;
    }

    /* Keeps the enlarged card clear of both edges on a narrow photo. */
    .hae-hero__note {
        left: 4%;
        max-width: min(268px, 80%);
        padding: 22px 24px 24px;
    }

    .hae-hero__note-lead {
        font-size: 19px;
    }

    .hae-section-head {
        margin-bottom: 40px;
    }

    .hae-package {
        padding: 28px 22px 30px;
    }

    .hae-package__art {
        max-width: 200px;
        margin-bottom: 20px;
    }

    .hae-package__price {
        font-size: 40px;
    }

    .hae-experts__track {
        grid-auto-columns: 78%;
    }

    .hae-services__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hae-closing__inner {
        padding: 30px 22px;
    }
}

/*
 * page.js checks this same query and skips GSAP entirely, so the rules here
 * only need to cover the CSS-driven motion.
 */
@media (prefers-reduced-motion: reduce) {
    html:has(.hae-page) {
        scroll-behavior: auto;
    }

    .hae-page .hae-btn,
    .hae-page .hae-package,
    .hae-page .hae-service,
    .hae-page .hae-btn__arrow,
    .hae-page .hae-solution__step,
    .hae-page .hae-solution__marker,
    .hae-page .hae-solution__number,
    .hae-page .hae-solution__icon {
        transition: none;
    }

    .hae-hero__note::after {
        animation: none;
    }

    .hae-page .hae-btn:hover,
    .hae-page .hae-package:hover,
    .hae-page .hae-service:hover {
        transform: none;
    }

    /* Without scroll activation every step must read as legible, not dimmed. */
    .hae-page .hae-solution__step {
        opacity: 1;
        transform: none;
    }

    .hae-experts__track {
        scroll-behavior: auto;
    }
}