.pylo-hero {
    position: relative;
    width: 100%;
    height: var(--pylo-banner-height, calc(100vw * 705 / 1930));
    min-height: var(--pylo-banner-height, calc(100vw * 705 / 1930));
    max-height: var(--pylo-banner-height, calc(100vw * 705 / 1930));
    aspect-ratio: var(--pylo-banner-ratio, 1930 / 705);
    overflow: hidden;
    border-radius: 0;
    border-bottom: 1px solid #ccd4bf;
    background-color: #fff;
}

.pylo-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.pylo-hero__grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(var(--hero-overlay-light-rgb, 0, 0, 0), calc(var(--hero-overlay-light-on, 0) * .92)) 0%,
        rgba(var(--hero-overlay-light-rgb, 0, 0, 0), calc(var(--hero-overlay-light-on, 0) * .72)) 30%,
        rgba(var(--hero-overlay-light-rgb, 0, 0, 0), calc(var(--hero-overlay-light-on, 0) * .18)) 60%,
        transparent 100%
    );
}

.pylo-hero--overlay-dark .pylo-hero__grad {
    background: linear-gradient(
        90deg,
        rgba(var(--hero-overlay-rgb, 0, 0, 0), calc(var(--hero-overlay-on, 0) * 0.72)) 0%,
        rgba(var(--hero-overlay-rgb, 0, 0, 0), calc(var(--hero-overlay-on, 0) * 0.28)) 55%,
        rgba(var(--hero-overlay-rgb, 0, 0, 0), calc(var(--hero-overlay-on, 0) * 0.08)) 100%
    );
}

.pylo-hero__copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    pointer-events: none;
}

.pylo-hero__copy .container,
.pylo-hero__content {
    pointer-events: auto;
}

.pylo-hero__content {
    width: 100%;
    max-width: var(--pylo-banner-d-content-max, 560px);
    padding: var(--pylo-banner-d-pad-top, 48px) 0 var(--pylo-banner-d-pad-bottom, 64px);
}

.pylo-hero__eyebrow {
    font-family: var(--pylo-sans, var(--site-font-family, sans-serif));
    font-size: var(--pylo-banner-d-eyebrow-size, 11px);
    font-weight: 600;
    letter-spacing: var(--pylo-banner-d-eyebrow-ls, .2em);
    text-transform: uppercase;
    color: var(--section-title-color, #4a6741);
    margin: 0 0 var(--pylo-banner-d-eyebrow-mb, 16px);
}

.pylo-hero__h1 {
    font-family: var(--pylo-serif, var(--site-font-family, serif));
    font-size: var(--pylo-banner-d-title-size, clamp(36px, 5vw, 52px));
    font-weight: 700;
    line-height: var(--pylo-banner-d-title-lh, 1.15);
    color: var(--section-title-color, #1a2a1a);
    margin: 0 0 var(--pylo-banner-d-title-mb, 20px);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pylo-hero__subtitle {
    font-family: var(--pylo-sans, var(--site-font-family, sans-serif));
    font-size: var(--pylo-banner-d-desc-size, 15px);
    line-height: var(--pylo-banner-d-desc-lh, 1.65);
    color: var(--section-desc-color, #666);
    margin: 0;
    max-width: var(--pylo-banner-d-desc-max, 480px);
}

/* Mobile sizes/padding come from pyloherb.css unified banner tokens */
@media (max-width: 991.98px) {
    .pylo-hero {
        height: var(--pylo-banner-height-tablet, calc(100vw * 705 / 1930));
        min-height: var(--pylo-banner-height-tablet, calc(100vw * 705 / 1930));
        max-height: var(--pylo-banner-height-tablet, calc(100vw * 705 / 1930));
        overflow: hidden;
    }

    .pylo-hero img {
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 767.98px) {
    .pylo-hero__copy {
        padding: var(--pylo-banner-pad-y, 14px) var(--pylo-banner-pad-x, 16px) !important;
    }

    .pylo-hero__copy > .container,
    .pylo-hero__content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .pylo-hero__eyebrow {
        font-size: var(--pylo-banner-eyebrow-size, var(--pylo-fs-xs, 10px)) !important;
        margin-bottom: var(--pylo-banner-eyebrow-mb, 6px);
    }

    .pylo-hero__h1 {
        font-size: var(--pylo-banner-title-size, var(--pylo-fs-h3, 1.2rem)) !important;
        line-height: var(--pylo-banner-title-lh, 1.25) !important;
        margin-bottom: var(--pylo-banner-title-mb, 6px);
    }

    .pylo-hero__subtitle {
        font-size: var(--pylo-banner-desc-size, var(--pylo-fs-sm, 12px)) !important;
        line-height: var(--pylo-banner-desc-lh, 1.4) !important;
        margin-top: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 575.98px) {
    .pylo-hero {
        height: var(--pylo-banner-height-mobile, calc(100vw * 705 / 1930));
        min-height: var(--pylo-banner-height-mobile, calc(100vw * 705 / 1930));
        max-height: var(--pylo-banner-height-mobile, calc(100vw * 705 / 1930));
    }
}