@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

/* Our Services page. All classes prefixed ezwa-svc- to stay clear of style.css.
   Layout: centered page heading on top, then the photo floats left with the
   copy wrapping around it. */

.ezwa-svc-page {
    --ezwa-navy: #244565;
    --ezwa-teal: #30caa0;
    --ezwa-green: #21b389;
    --ezwa-heading: #252525;
    --ezwa-ink: #707070;
    --ezwa-muted: #6c7480;
    --ezwa-line: #e2ddd4;
    background: #ffffff;
    color: var(--ezwa-ink);
    padding: 40px 0 60px;
}

.ezwa-svc-page img {
    max-width: 100%;
    display: block;
}

.ezwa-svc-page a:focus-visible {
    outline: 2px solid var(--ezwa-green);
    outline-offset: 3px;
}

/* centered page header on top of everything */
.ezwa-svc-head {
    text-align: center;
    margin: 0 auto 30px;
}

    .ezwa-svc-head h1 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #333333;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.15rem);
    line-height: 1.12;
    }

.ezwa-svc-rule {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--ezwa-green);
    margin: 10px auto 14px;
}

.ezwa-svc-kicker {
    color: var(--ezwa-muted);
    font-size: 17px;
    margin: 0;
}

/* flow area: floated image, text wraps around it (clearfix keeps the
   float inside the section) */
.ezwa-svc-flow::after {
    content: "";
    display: block;
    clear: both;
}

.ezwa-svc-figure {
    max-width: 500px;
    float: left;
    margin-right: 35px;
    margin-bottom: 30px;
}

.ezwa-svc-figure-wrap {
    position: relative;
}

.ezwa-svc-frame {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--ezwa-line);
}

    .ezwa-svc-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* teal corner bracket - bottom-LEFT of the image */
.ezwa-svc-accent {
    position: absolute;
    left: -14px;
    bottom: -14px;
    width: 96px;
    height: 96px;
    border-left: 5px solid var(--ezwa-teal);
    border-bottom: 5px solid var(--ezwa-teal);
    border-radius: 0 0 0 6px;
}

.ezwa-svc-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(48,202,160,.14);
    display: grid;
    place-items: center;
    margin-bottom: 10px;
}

    .ezwa-svc-icon svg {
        width: 22px;
        height: 22px;
        fill: var(--ezwa-green);
    }

.ezwa-svc-block h2 {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--ezwa-heading);
    font-weight: 500;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    font-size: 25px;
    line-height: 1.25;
}

.ezwa-svc-body p {
    color: var(--ezwa-ink);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 20px;
}

.ezwa-svc-closing {
    margin-top: 20px;
    background: #fbfaf8;
    border: 1px solid var(--ezwa-line);
    border-left: 4px solid var(--ezwa-green);
    border-radius: 4px;
    padding: 18px 26px;
}

    .ezwa-svc-closing p {
        margin: 0;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: var(--ezwa-heading);
    }

@media (max-width: 900px) {
    .ezwa-svc-page {
        padding: 44px 0 56px;
    }

    .ezwa-svc-head {
        margin-bottom: 30px;
    }

    .ezwa-svc-figure {
        float: none;
        max-width: 100%;
        margin-right: 0;
    }

    .ezwa-svc-accent {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ezwa-svc-page * {
        transition: none !important;
        animation: none !important;
    }
}