/* Loaded after the shared styles so these rules affect only the homepage hero. */
@media (min-width: 769px) and (max-width: 1120px) {
    .hero-section {
        height: auto;
        min-height: 100svh;
        padding: 108px 0 48px;
    }

    .hero-content {
        grid-template-columns: minmax(0, 1fr) 310px;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 36px 32px;
        height: auto;
        padding: 0 34px;
    }

    .hero-text {
        order: 1;
        padding-left: 0;
    }

    .person-visual {
        order: 2;
        min-height: 470px;
    }

    .availability-badge {
        align-self: center;
        margin-top: 0;
        white-space: normal;
        text-align: center;
    }

    .person {
        width: calc(100% - 55px);
    }

    .seo-picture {
        width: 65px;
        height: 65px;
    }

    .hero-benefits {
        order: 3;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .benefit-card,
    .benefit-card:nth-child(2) {
        min-height: 142px;
        margin-left: 0;
    }

    .benefit-card::before,
    .hero-benefits::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        height: auto;
        padding: 98px 0 38px;
    }

    .hero-content {
        width: min(100%, 560px);
        height: auto;
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 18px;
    }

    .hero-text {
        order: 1;
        align-items: flex-start;
        gap: 18px;
        padding-left: 0;
    }

    .hero-heading {
        font-size: clamp(36px, 10vw, 48px);
        line-height: 1.08;
        letter-spacing: -1.6px;
    }

    .hero-paragraph {
        font-size: 15px;
        line-height: 1.7;
    }

    .cta-button {
        width: 100%;
        padding: 16px 22px;
        font-size: 13px;
    }

    .hero-contact {
        font-size: 12px;
        line-height: 1.5;
    }

    .person-visual {
        order: 2;
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 300px;
        align-self: center;
        background:
            radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.52), transparent 27%),
            linear-gradient(135deg, rgba(102, 126, 234, 0.13), rgba(118, 75, 162, 0.2));
        border: 1px solid rgba(102, 126, 234, 0.16);
        border-radius: 28px;
        box-shadow: 0 22px 48px rgba(48, 43, 82, 0.13);
        overflow: hidden;
    }

    .person-bottom {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        justify-content: flex-end;
        overflow: hidden;
    }

    .person-bottom::before {
        right: -30px;
        bottom: 13px;
        width: 255px;
        height: 255px;
        background: linear-gradient(145deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.22));
        border-radius: 50%;
        filter: none;
    }

    .person-bottom::after {
        display: none;
    }

    .person {
        position: absolute;
        right: -8px;
        bottom: -48px;
        width: auto;
        height: 116%;
        max-width: 72%;
        max-height: none;
        object-fit: contain;
        object-position: bottom right;
        filter: drop-shadow(-14px 18px 22px rgba(37, 32, 61, 0.2));
    }

    .availability-badge {
        position: absolute;
        z-index: 4;
        top: 25px;
        left: 22px;
        align-self: auto;
        max-width: 48%;
        margin: 0;
        padding: 10px 12px 10px 9px;
        white-space: normal;
        text-align: left;
        line-height: 1.4;
        backdrop-filter: blur(10px);
    }

    .availability-badge .availability-icon {
        flex: 0 0 23px;
        width: 23px;
        min-width: 23px;
        height: 23px;
        aspect-ratio: 1;
    }

    .seo-picture {
        display: none;
    }

    .hero-benefits {
        order: 3;
        width: 100%;
        gap: 13px;
    }

    .hero-benefits::before,
    .benefit-card::before {
        display: none;
    }

    .benefit-card,
    .benefit-card:nth-child(2) {
        margin-left: 0;
        border-radius: 16px;
    }

    /* A vertical timeline visually joins the stacked process steps. */
    .process-flow {
        position: relative;
        gap: 58px;
    }

    .process-step:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 0;
        bottom: -59px;
        left: 27px;
        width: calc(100% - 54px);
        height: 62px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        border: 0;
    }

    .process-step:nth-child(1)::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 62' preserveAspectRatio='none'%3E%3Cpath d='M3 3 C72 4 48 55 145 46 S235 18 297 59' fill='none' stroke='%23667eea' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 9'/%3E%3C/svg%3E");
    }

    .process-step:nth-child(2)::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 62' preserveAspectRatio='none'%3E%3Cpath d='M297 3 C218 5 259 48 160 39 S65 24 3 59' fill='none' stroke='%23716bd4' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 9'/%3E%3C/svg%3E");
    }

    .process-step:nth-child(3)::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 62' preserveAspectRatio='none'%3E%3Cpath d='M3 3 C105 2 63 57 174 36 S250 37 297 59' fill='none' stroke='%23765dbc' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 9'/%3E%3C/svg%3E");
    }

    .step-body::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .logo {
        display: block;
        flex: 0 0 auto;
        font-size: 16px;
    }

    .nav-container {
        justify-content: space-between;
        gap: 10px;
        padding-inline: 14px;
    }

    .nav-links {
        justify-content: flex-end;
        width: auto;
        gap: 1px;
        margin-left: auto;
    }

    .nav-links li:nth-child(1),
    .nav-links li:nth-child(3),
    .nav-links li:nth-child(5) {
        display: none;
    }

    .nav-links a {
        min-height: 36px;
        padding-inline: 8px;
        font-size: 11px;
    }

    .nav-links li:last-child a {
        padding-inline: 11px;
    }
}

@media (max-width: 390px) {
    .hero-heading {
        font-size: 35px;
    }

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .person-visual {
        min-height: 270px;
    }

    .person {
        right: -15px;
        bottom: -39px;
        height: 112%;
        max-width: 70%;
    }

    .availability-badge {
        top: 19px;
        left: 16px;
        max-width: 50%;
        font-size: 11px;
    }
}