/* Clean, responsive styling for the provided markup.
   Scope everything to #hp-why-us to avoid side effects. */

#hp-why-us {
    --bg: #fff;
    --fg: #007ba4;
    --muted: #6b7280;
    --brand: #007ba4;
    --accent: #708090;
    --border: #e5e7eb;
    --shadow: 0 8px 24px rgba(2, 6, 23, .06);
    color: var(--fg);
    background: var(--bg);
    max-width: 1250px;
    margin: clamp(16px, 4vw, 48px) auto;
    padding: clamp(16px, 3vw, 32px);
    border-radius: 18px;
}

    #hp-why-us h2 {
        font-size: 1.6rem;
        line-height: 1.2;
        margin: 0 0 .3em;
    }

    /* Top split: text + brand image */
    #hp-why-us .top-center {
        display: grid;
        grid-template-columns: 1.35fr .65fr;
        gap: clamp(16px, 3vw, 28px);
        align-items: start;
    }

        #hp-why-us .top-center img {
            max-width: 220px;
            width: 100%;
            height: auto;
            object-fit: contain;
            justify-self: end;
            filter: saturate(.95) contrast(1.05);
        }

    /* Typography & links */
    #hp-why-us p {
        margin: 0 0 1em;
    }

    #hp-why-us .p1 {
        color: var(--muted);
    }

    #hp-why-us a {
        color: var(--brand);
        text-decoration: none;
        border-bottom: 1px dashed currentColor;
    }

        #hp-why-us a:hover {
            opacity: .9;
        }



    /* Three columns block */
    #hp-why-us .flex-3-col {
        margin-top: clamp(16px, 3.2vw, 28px);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(14px, 2.6vw, 22px);
    }

        /* Cards */
        #hp-why-us .flex-3-col > div {
            padding: 16px 18px;
        }

            #hp-why-us .flex-3-col > div > strong {
                display: block;
                font-size: 1.05rem;
                letter-spacing: .3px;
                margin-bottom: 6px;
            }

    /* Lists as neat grid with tick bullets */
    #hp-why-us ul {
        list-style: none;
        margin: .2em 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px 18px;
    }

        #hp-why-us ul li {
            position: relative;
            padding-left: 24px;
        }

            #hp-why-us ul li::before {
                content: "✓";
                color: var(--accent);
                font-weight: 700;
                position: absolute;
                left: 0;
                top: 0;
                line-height: 1.2;
            }
    /* Separators created by <br> tags inside headings/strong blocks */
    #hp-why-us strong + br {
        display: none;
    }

/* Responsive */
@media (max-width: 960px) {
    #hp-why-us .top-center {
        grid-template-columns: 1fr;
    }

        #hp-why-us .top-center img {
            justify-self: center;
            max-width: 160px;
        }

    #hp-why-us .flex-3-col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    #hp-why-us {
        padding: 16px;
        border-radius: 14px;
    }

        #hp-why-us .flex-3-col {
            grid-template-columns: 1fr;
        }
}

/* Subtle appear animation (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    #hp-why-us {
        animation: whyFade .35s ease-out both;
    }

    @keyframes whyFade {
        from {
            opacity: 0;
            transform: translateY(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}