.hero {
    background-color: #f1eae1;
}

.hero__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-1), 6vw, 1rem);
    padding-bottom: 0;
    display: grid;
    /* minmax(0, …) rather than a bare 1fr. This one line was the source of the
       horizontal page scroll reported below ~1462px.
       A bare 1fr is minmax(auto, 1fr), so each track's floor is its own
       min-content. The right track holds the hero image, whose upload is 765px
       wide; width/max-width of 100% are percentages, which count as auto while
       intrinsic sizes are being resolved, so they do not lower that floor. The
       left track is floored by the longest word of the 100px heading. Together
       ~1323px against the 1324.8px this container can ever offer — and .hero has
       no overflow guard, so the excess reached the document. At 900px the page
       was ~495px wider than the viewport. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(var(--space-3), 4vw, 1rem);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    background-color: #f9f3ea;
    border-radius: 12px;
    padding: clamp(var(--space-4), 4vw, 3rem);
}

.hero__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.hero__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.hero__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

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

.hero__heading {
    /* Fluid between the two sizes the design already specifies (56px at ≤899,
       100px at the 1440 cap). Held at a flat 100px it was the remaining floor on
       the left grid track: at a 900px viewport that column is ~400px wide, so a
       100px display word simply could not fit and pushed the layout wider than
       the screen. The clamp reaches 100px at ~1538px, i.e. the full-size heading
       is unchanged on the widths it was designed for. */
    font-size: clamp(3.5rem, 6.5vw, 100px);
    line-height: 0.95;
}

.hero__description {
    max-width: 32rem;
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.hero__description p {
    margin: 0;
}

.hero__cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: 47px;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-4);
    border-radius: 8px;
    background-color: var(--color-orange-dark);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.hero__button:hover,
.hero__button:focus-visible {
    opacity: 0.85;
}

.hero__gift-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 11rem;
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-grey-1);
}

.hero__gift-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.hero__gift-note-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.hero__gift-note-icon svg path {
    stroke: var(--color-orange-dark);
}

.hero__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    color: var(--color-text);
    text-decoration: none;
}

.hero__rating-label {
    font-weight: 700;
}

.hero__rating-stars {
    display: inline-flex;
    align-items: center;
}

.hero__rating-stars svg {
    display: block;
    width: 107px;
    height: 20px;
}

.hero__rating-trustpilot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 700;
}

.hero__rating-trustpilot-icon {
    display: inline-flex;
    width: 16px;
    height: 15px;
}

.hero__rating-trustpilot-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* Landscape hero GIFs are shown in full. The normal cover rule is ideal for
 * portrait hero photography, but crops the left and right sides of animation
 * frames when the homepage media panel is square. */
.hero__image.hero__image--animated {
    object-fit: contain;
    background-color: #1c1d16;
}

/* The English Collaboration hero animations use a portrait canvas so every
 * slide fills the responsive media panel without visible letterbox bands. */
.hero__image.hero__image--animated[alt*="collaboration" i] {
    object-fit: cover;
}

.hero__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border: 1px dashed var(--color-beige-1);
    border-radius: 1.5rem;
    color: var(--color-text);
    font-family: var(--font-family-base);
}

.hero__image-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 8.75rem;
    height: 8.75rem;
    padding: var(--space-3);
    border-radius: 50%;
    background-color: var(--color-grey-1);
    color: #fae0c0;
    text-align: center;
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 12.44px;
    line-height: 15.56px;
    text-transform: uppercase;
    letter-spacing: -2%;
}

.hero__image-badge::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid #fae0c0;
    border-radius: 50%;
    pointer-events: none;
}

.hero__image-badge-icon {
    display: inline-flex;
    width: 16px;
    height: 15px;
}

.hero__image-badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__image-badge-icon svg path {
    fill: #fae0c0;
    stroke: #fae0c0;
}

.hero__stats {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-3), 6vw, 1rem);
    display: grid;
    /* Same reason as .hero__inner above: four bare 1fr tracks are each floored
       by a stat's min-content (68px icon + a 40px uppercase label + 48px of
       padding), ~848px in total against the 828px available at a 900px viewport,
       so the row overflowed just under ~920px. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--space-3), 3vw, 1rem);
}

.hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: clamp(var(--space-4), 3vw, var(--space-4));
    border-radius: 12px;
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    text-align: center;
}

.hero__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.hero__stat-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.hero__stat-icon svg path {
    stroke: var(--color-orange-dark);
}

.hero__stat-number {
    font-family: var(--font-family-display);
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.hero__stat-label {
    font-family: var(--font-family-display);
    font-weight: 400;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: -2%;
    line-height: 42px;
}

.hero__stat-description {
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-beige-2);
}

.hero__stat-description p {
    margin: 0;
}

/* Keep the homepage hero compact: its content panel should not stretch to
 * match the portrait source image's intrinsic height. */
@media (min-width: 900px) {
    body.home.page-id-11 .hero__inner {
        align-items: start;
    }

    body.home.page-id-11 .hero__media,
    body.home.page-id-11 .hero__content {
        align-self: start;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    body.home.page-id-11 .hero__image {
        height: 100%;
    }

    body.home.page-id-11 .hero__content {
        padding-block: 2rem;
        gap: 1rem;
    }

    body.home.page-id-11 .hero__heading {
        font-size: clamp(3rem, 4.7vw, 4.25rem);
        line-height: 0.96;
    }

    body.home.page-id-11 .hero__description {
        margin-bottom: 0.5rem;
    }

    body.home.page-id-11 .hero__cta {
        margin-bottom: 1.5rem;
    }

    /* Keep Retirement heroes square and compact when their portrait source
     * images would otherwise stretch both halves of the desktop grid. */
    .hero.retirementhero .hero__inner {
        align-items: start;
    }

    .hero.retirementhero .hero__media,
    .hero.retirementhero .hero__content {
        align-self: start;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .hero.retirementhero .hero__image {
        height: 100%;
    }

    .hero.retirementhero .hero__content {
        padding-block: 2rem;
        gap: 1rem;
    }

    .hero.retirementhero .hero__heading {
        font-size: clamp(3rem, 4.7vw, 4.25rem);
        line-height: 0.96;
    }

    .hero.retirementhero .hero__description {
        margin-bottom: 0.5rem;
    }

    .hero.retirementhero .hero__cta {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 899px) {
    .hero__cta{
        margin-bottom:4px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__content {
    }

    .hero__ornament {
    }

    .hero__ornament-line {
    }

    .hero__ornament-icon {
        width: 32px;
        height: 32px;
    }

    .hero__heading {
        font-size: 56px;
    }

    .hero__description {
        font-size: 16px;
        line-height: 24px;
    }

    .hero__cta {
    }

    .hero__button {
        width: 100%;
    }

    .hero__gift-note {
        width: 100%;
        max-width: none;
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }

    .hero__gift-note-icon {
    }

    .hero__rating {
        margin:auto;
    }

    .hero__rating-label {
    }

    .hero__rating-stars {
    }

    .hero__rating-trustpilot {
    }

    .hero__rating-trustpilot-icon {
    }

    .hero__media {
        order: -1;
        /* height:100% (base rule) needs a definite height from its grid
           track to resolve against — in this single-column stacked layout
           that track just sizes to content, so it was effectively auto and
           object-fit: cover had nothing to crop into (the image rendered at
           its own natural ratio instead). An explicit height gives it
           something real to fill. */
        height: 300px;
        max-height: 300px;
    }

    .hero__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero__media-placeholder {
    }

    .hero__image-badge {
    }

    .hero__image-badge-icon {
    }

    .hero__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__stat {
        padding: 16px 8px;
    }

    .hero__stat-icon {
        width: 32px;
        height: 32px;
    }

    .hero__stat-icon svg{
        width: 16px;
        height: 16px;
    }
    .hero__stat-number {
        font-size: 24px;
        line-height: 26px;
    }

    .hero__stat-label {
        font-size: 24px;
        line-height: 26px;
    }

    .hero__stat-description {
        font-size: 14px;
        line-height: 20px;
    }
}

/*
 * Narrow-phone tightening. The 899px tier's 56px heading is fine for the
 * heading text it was tuned against, but this page's actual copy ("Their
 * life story, in a book you can read, hear, and watch.") measured 319px
 * tall at 56px on a 330px-wide screen — six wrapped lines — which alone
 * pushed the CTA button (.hero__button, "Get Started $99") to y≈1052px,
 * nowhere near the first screen on a real phone (~650-900px tall). Sizing
 * down here (font-size only — the copy itself is content, not something to
 * trim from code) both shortens each line and, since more characters now
 * fit per line, reduces the wrap count too.
 */
@media (max-width: 599px) {
    .hero__image-badge {
        width: 7rem;
        height: 7rem;
        font-size: 0.625rem;
    }

    .hero__content {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .hero__ornament-icon {
        width: 24px;
        height: 24px;
    }

    .hero__heading {
        font-size: 28px;
        line-height: 1.1;
    }

    .hero__description {
        margin-bottom: 0;
        font-size: 15px;
        line-height: 22px;
        /* Clamped rather than just downsized — this is real, admin-editable
           marketing copy, and a font-size alone doesn't put a ceiling on how
           tall it can get if the copy grows. This bounds it regardless, same
           approach as the burger-menu popup's card/description clamps
           (assets/css/menu-popup.css). */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}