/*
 * Shared primary hero behavior.
 * Desktop continues to use each template's established layout. Mobile turns
 * the same responsive image element into the full-bleed visual layer.
 */

.ec-primary-hero {
    position: relative;
}

.ec-primary-hero__overlay {
    display: none;
}

.ec-primary-hero__trust-icon {
    display: none;
}

.ec-primary-hero__trust-icon--desktop {
    display: flex;
}

.ec-primary-hero__action {
    min-height: 48px;
}

@media (max-width: 767px) {
    body.ec-has-primary-photo-hero {
        overflow-x: clip;
    }

    body.ec-has-primary-photo-hero .ec-site-header {
        background: transparent;
        box-shadow: none;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 50;
    }

    body.ec-has-primary-photo-hero .ec-site-header.ec-site-header--scrolled {
        background: #123b4a;
        box-shadow: 0 8px 26px rgba(18, 59, 74, .22);
        position: fixed;
    }

    body.ec-has-primary-photo-hero .ec-site-header__inner {
        min-height: 82px;
        padding: 13px 18px;
    }

    body.ec-has-primary-photo-hero .ec-site-brand__logo {
        height: auto;
        max-height: 48px;
        max-width: min(190px, 57vw);
        width: auto;
    }

    body.ec-has-primary-photo-hero .ec-mobile-menu summary {
        align-items: center;
        display: inline-flex;
        min-height: 48px;
        padding: 11px 18px;
    }

    body.ec-has-primary-photo-hero.admin-bar .ec-site-header {
        top: 46px;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero {
        background: #0d4654 !important;
        color: #fff;
        isolation: isolate;
        margin: 0 !important;
        min-height: 0;
        overflow: hidden;
        padding: 0 !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero::after {
        display: none !important;
    }

    .ec-primary-hero__overlay {
        background: linear-gradient(
            to bottom,
            rgba(7, 45, 55, .20) 0%,
            rgba(7, 45, 55, .42) 30%,
            rgba(7, 45, 55, .88) 49%,
            rgba(7, 45, 55, .98) 64%,
            rgba(7, 45, 55, .995) 100%
        );
        display: block;
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__inner {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 0;
        padding: 0 18px 28px !important;
        position: relative;
        width: 100% !important;
        z-index: 2;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__content {
        max-width: 680px;
        min-width: 0;
        padding-top: clamp(550px, 160vw, 690px);
        position: relative;
        width: 100%;
        z-index: 2;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__media {
        background: #0d4654 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        height: 100% !important;
        inset: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        width: 100% !important;
        z-index: 0;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__media picture,
    body.ec-has-primary-photo-hero picture.ec-primary-hero__media {
        aspect-ratio: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        height: 100% !important;
        inset: 0;
        overflow: hidden;
        position: absolute;
        width: 100% !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__media img {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block;
        height: 100% !important;
        max-width: none;
        object-fit: cover !important;
        object-position: var(--mobile-hero-position, center 30%) !important;
        width: 100% !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__media .ec-cat-dryer-art {
        border-radius: 0 !important;
        box-shadow: none !important;
        height: 100% !important;
        min-height: 100%;
        object-fit: cover;
        object-position: var(--mobile-hero-position, center 30%);
        width: 100% !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__media [class*="__badge"] {
        display: none !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__content nav,
    body.ec-has-primary-photo-hero .ec-primary-hero__eyebrow {
        display: none !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero h1 {
        color: #fff !important;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.05rem, 9.4vw, 2.85rem) !important;
        letter-spacing: -.035em;
        line-height: 1.01 !important;
        margin: 0 !important;
        max-width: 100% !important;
        overflow-wrap: normal;
        text-wrap: balance;
        text-shadow: 0 2px 14px rgba(0, 0, 0, .34);
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__copy {
        color: rgba(255, 255, 255, .94) !important;
        font-size: clamp(.98rem, 4.2vw, 1.08rem) !important;
        line-height: 1.53;
        margin: 16px 0 0 !important;
        max-width: 660px !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__actions {
        display: grid !important;
        gap: 11px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 22px 0 0 !important;
        width: 100%;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action {
        border-radius: 999px !important;
        box-sizing: border-box;
        display: inline-flex !important;
        font-family: inherit;
        font-size: .82rem !important;
        font-weight: 900 !important;
        justify-content: center;
        letter-spacing: .025em;
        line-height: 1.15;
        min-height: 52px !important;
        padding: 12px 15px !important;
        text-align: center;
        text-decoration: none !important;
        text-transform: uppercase;
        width: 100% !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action:hover {
        transform: none;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action:focus-visible {
        outline: 3px solid #5ce1e6 !important;
        outline-offset: 3px;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action--estimate {
        background: #ff7a2b !important;
        border: 2px solid #ff7a2b !important;
        color: #0d4654 !important;
        grid-column: 1 / -1;
        order: 1;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action--phone {
        background: transparent !important;
        border: 2px solid #fff !important;
        color: #fff !important;
        grid-column: 1 / -1;
        order: 2;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action--book {
        background: #5ce1e6 !important;
        border-color: #5ce1e6 !important;
        color: #0d4654 !important;
        order: 3;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action--chat {
        background: rgba(13, 70, 84, .58) !important;
        border: 2px solid rgba(255, 255, 255, .7) !important;
        color: #fff !important;
        order: 4;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__action span {
        color: inherit !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust {
        border-top: 1px solid rgba(255, 255, 255, .36) !important;
        display: grid !important;
        gap: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        list-style: none;
        margin: 24px 0 0 !important;
        max-width: none !important;
        padding: 22px 0 0 !important;
        width: 100%;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li {
        align-items: center !important;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .32) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        justify-content: flex-start;
        min-width: 0;
        padding: 0 8px !important;
        text-align: center;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li:first-child {
        padding-left: 0 !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li:last-child {
        border-right: 0 !important;
        padding-right: 0 !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust-icon,
    body.ec-has-primary-photo-hero .ec-primary-hero__trust-icon--desktop {
        align-items: center;
        background: #5ce1e6 !important;
        border-radius: 50%;
        color: #0d4654 !important;
        display: flex !important;
        flex: 0 0 auto;
        height: 44px !important;
        justify-content: center;
        width: 44px !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust-icon svg {
        fill: none;
        height: 24px !important;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
        width: 24px !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust strong,
    body.ec-has-primary-photo-hero .ec-primary-hero__trust span {
        color: #fff !important;
        display: block;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust strong {
        font-size: clamp(.72rem, 3.3vw, .88rem) !important;
        line-height: 1.15;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li > div > span {
        color: rgba(255, 255, 255, .82) !important;
        font-size: clamp(.61rem, 2.7vw, .72rem) !important;
        line-height: 1.25;
        margin-top: 3px;
    }
}

@media (max-width: 360px) {
    body.ec-has-primary-photo-hero .ec-site-header__inner {
        padding-inline: 14px;
    }

    body.ec-has-primary-photo-hero .ec-site-brand__logo {
        max-width: 174px;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__inner {
        padding-inline: 15px !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__content {
        padding-top: 550px;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero h1 {
        font-size: clamp(1.95rem, 9.8vw, 2.2rem) !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero__trust li {
        padding-inline: 5px !important;
    }
}

/*
 * Shared mobile composition: show each hero photograph at full viewport width,
 * fade the image itself into the reading surface, and overlap the heading with
 * the transition. The homepage keeps its uncropped team-photo treatment.
 */
@media (max-width: 767px) {
    body.ec-has-primary-photo-hero .ec-primary-hero {
        background: #0d4654 !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__overlay {
        background: linear-gradient(
            to bottom,
            rgba(7, 45, 55, .04) 0,
            rgba(7, 45, 55, .08) calc(75vw - 150px),
            rgba(7, 45, 55, .28) calc(75vw - 112px),
            rgba(7, 45, 55, .58) calc(75vw - 74px),
            rgba(7, 45, 55, .84) calc(75vw - 36px),
            #0d4654 calc(75vw + 8px),
            #0d4654 100%
        );
    }

    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__media {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, .88) 64%, rgba(0, 0, 0, .5) 78%, transparent 100%);
        bottom: auto !important;
        height: 75vw !important;
        mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, .88) 64%, rgba(0, 0, 0, .5) 78%, transparent 100%);
        min-height: 0 !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__media picture {
        height: 100% !important;
        position: relative !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__media img,
    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__media .ec-cat-dryer-art {
        height: 100% !important;
        object-fit: cover !important;
        object-position: var(--mobile-hero-position, center 30%) !important;
        width: 100% !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero--homepage .ec-primary-hero__media img {
        height: 100% !important;
        max-width: 100%;
        object-fit: contain !important;
        object-position: center !important;
    }

    body.ec-has-primary-photo-hero .ec-primary-hero .ec-primary-hero__content {
        padding-top: calc(75vw - 86px);
    }
}

@media print {
    .ec-primary-hero__overlay {
        display: none !important;
    }
}