@layer ds.block {
    .block-home-hero { overflow: clip; }

    .home-hero__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        align-items: center;
        gap: var(--space-8);
    }

    .home-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }

    .home-hero__eyebrow {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--color-secondary);
    }

    .home-hero__eyebrow-dash { width: 1.75rem; height: 2px; background: var(--color-primary); display: inline-block; flex-shrink: 0; }

    .home-hero__title {
        margin: 0;
        font-family: var(--font-display);
        font-weight: var(--font-weight-medium);
        font-size: var(--text-hero);
        line-height: var(--line-height-tight);
        color: var(--color-heading);
    }

    .home-hero__title .ds-accent { font-style: italic; font-weight: var(--font-weight-regular); color: var(--color-secondary); }

    .home-hero__lead {
        margin: 0;
        max-width: 46ch;
        color: var(--color-text);
    }

    .home-hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

    .home-hero__stats {
        display: flex;
        margin-top: var(--space-2);
        padding-top: var(--space-5);
        border-top: 1px solid color-mix(in srgb, var(--color-heading) 16%, transparent);
    }

    .home-hero__stat {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding-right: var(--space-7);
        font-size: var(--text-small);
        line-height: var(--line-height-base);
        color: var(--color-text);
    }

    .home-hero__stat + .home-hero__stat { padding-left: var(--space-7); border-left: 1px solid color-mix(in srgb, var(--color-heading) 16%, transparent); }

    .home-hero__stat-title { font-family: var(--font-display); font-size: var(--text-h6); font-weight: var(--font-weight-medium); color: var(--color-heading); }

    .home-hero__portrait { position: relative; justify-self: center; }

    .home-hero__frame {
        position: relative;
        width: 100%;
        max-width: 22rem;
        aspect-ratio: 350 / 440;
    }

    .home-hero__frame::before {
        content: "";
        position: absolute;
        top: calc(-1 * var(--space-4));
        right: calc(-1 * var(--space-5));
        width: 100%;
        height: 100%;
        border: 1.5px solid var(--color-primary);
        border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
    }

    .home-hero__img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .home-hero__compass {
        position: absolute;
        top: calc(-1 * var(--space-7));
        left: calc(-1 * var(--space-8));
        width: 5.5rem;
        opacity: 0.55;
        color: var(--brand-sage);
    }

    .home-hero__quote {
        position: absolute;
        bottom: var(--space-6);
        left: calc(-1 * var(--space-8));
        max-width: 13rem;
        background: var(--color-heading);
        color: var(--color-text-invert);
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
    }

    .home-hero__quote-text { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--text-body); line-height: 1.45; }
    .home-hero__quote-label { margin: var(--space-2) 0 0; font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-apricot); }

    @media (max-width: 64rem) {
        .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-9); }
        .home-hero__portrait { justify-self: start; }
        .home-hero__frame { max-width: 18rem; }
    }

    @media (max-width: 48rem) {
        .home-hero__stats { flex-direction: column; gap: var(--space-4); }
        .home-hero__stat + .home-hero__stat { padding-left: 0; border-left: none; padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--color-heading) 16%, transparent); }
        .home-hero__quote { left: 0; bottom: calc(-1 * var(--space-6)); }
    }
}