@charset "UTF-8";

/* ============================================================================
   Interior service-detail page (full-width-flexible.php) — Figma 5502:2277
   Text 536 + 154 gap + image 398 = 1088 wide, 140 vert padding
   ============================================================================ */

.page-template-full-width-flexible .half-content {
    padding: var( --secPadding );
}

.page-template-full-width-flexible .half-content > .container {
    width: min( 95%, 1088px );
    max-width: 1088px;
    margin: 0 auto;
    gap: 154px;
    align-items: center;
}

.page-template-full-width-flexible .half-content > .container > .image {
    flex: 0 0 398px;
    width: 398px;
    max-width: 398px;
    min-width: 0;
    padding: 0;
}

.page-template-full-width-flexible .half-content > .container > .image picture {
    display: block;
}

.page-template-full-width-flexible .half-content > .container > .image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
    box-shadow: var( --shadyLarge );
}

.page-template-full-width-flexible .half-content > .container > .text {
    flex: 0 0 536px;
    width: 536px;
    max-width: 536px;
    min-width: 0;
    padding: 0;
}

.page-template-full-width-flexible .half-content .text > [class*="col-lg-"] {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

.page-template-full-width-flexible .half-content .text h1,
.page-template-full-width-flexible .half-content .text h2 {
    font-family: var( --heading-font );
    font-size: var( --h2-font-size );
    font-weight: var( --heading-font-weight );
    line-height: var( --h2-line-height );
    color: inherit;
    margin: 0 0 24px;
    text-transform: none;
    letter-spacing: normal;
}

.page-template-full-width-flexible .half-content .text p,
.page-template-full-width-flexible .half-content .text li {
    font-size: var( --body-font-size );
    line-height: var( --body-line-height );
}

/* ============================================================================
   Base .half-content layout
   ============================================================================ */

.half-content {
    position: relative;
    overflow: visible;
    display: flex;
    padding: 100px 0 0;
    align-items: stretch;
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
}

.half-content.reverse,
.half-content.reverse .container {
    flex-direction: row-reverse;
}

.half-content .container {
    display: flex;
    align-items: stretch;
}

.half-content .text {
    display: grid;
    text-align: left;
    z-index: 5;
    align-items: center;
    align-content: center;
}

.half-content .text a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

.half-content .text img {
    margin-top: 32px;
}

.half-content .text ol {
    list-style-type: decimal-leading-zero;
    padding-left: min( 1.979vw, 38px );
}

.half-content .text ol li {
    padding: 0 0 8px;
}

.half-content .text ol li::marker {
    font-family: var( --body-font );
    font-size: clamp( 22px, 1.563vw, 30px );
    font-weight: 500;
    letter-spacing: 0;
    line-height: clamp( 38px, 2.396vw, 46px );
}

.half-content h2 {
    position: relative;
    color: inherit;
    display: inline-flex;
    font-size: var( --h2-font-size );
    font-weight: var( --heading-font-weight );
    font-style: normal;
    letter-spacing: normal;
    line-height: var( --h2-line-height );
    text-transform: none;
    margin: 0 0 clamp( 20px, 1.25vw, 24px );
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.half-content h2::after {
    content: '';
    margin: 13px 0;
    height: 4px;
    width: 60px;
    display: none;
    background-color: var( --primary-color );
}

.half-content .btn.btn-orange {
    margin: 56px 0;
}

.half-content .btn.btn-orange:hover {
    background-color: var( --primary-hover );
    color: var( --white );
}

.half-content .btn-secondary {
    margin: 56px 0;
}

.half-content .btn.btn-white {
    margin: clamp( 20px, 1.667vw, 32px ) auto 0;
}

/* ============================================================================
   Image & video children
   ============================================================================ */

.nImgRt {
    margin: 0;
    display: grid;
    height: clamp( 300px, 29.167vw, 560px );
    float: right;
    padding: 0;
}

.nImgLt {
    position: relative;
    padding: 0;
    height: fit-content;
}

.image.nImgRt img {
    height: clamp( 310px, 29.167vw, 560px );
    display: block;
    width: auto;
    margin: 0;
    float: right;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.nImgLt img {
    position: relative;
    display: block;
    height: clamp( 300px, 42.292vw, 812px );
    margin: 0 auto;
    box-shadow: none;
}

#news1.half-content .nImgLt img {
    width: min( 70.625vw, 1356px );
    float: left;
    height: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: var( --shadyLarge );
}

.half-content .video {
    height: clamp( 250px, 25vw, 480px );
}

.cVidWrap {
    object-fit: cover;
    display: block;
    width: 100%;
    height: clamp( 250px, 25vw, 480px );
    position: relative;
}

a.popVid {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
}

a.popVid img {
    filter: brightness( 0.75 );
}

a.popVid:hover img {
    filter: none;
}

/* ============================================================================
   Broadwing homepage news blocks (Figma 2849:11871)
   #news1 = video block (stacked), #news2/#news3 = side-by-side image+copy
   ============================================================================ */

#news1.half-content,
#news2.half-content,
#news3.half-content {
    background-color: var( --white );
    color: var( --black );
    padding: var( --secPadding );
    margin: 0;
    overflow: hidden;
}

#news2 .btn.btn-orange,
#news3 .btn.btn-orange {
    margin: 56px 0;
}

#news2 .btn.btn-orange:hover,
#news3 .btn.btn-orange:hover {
    color: var( --white );
    outline-color: var( --black );
}

/* --- news1: stacked column, copy above video, play button overhangs right --- */

#news1.half-content {
    flex-direction: column-reverse;
    align-items: center;
    gap: var( --content-col-gap-vert );
    padding: var( --content-col-gap-vert ) 5%;
}

#news1.half-content .nTxtRt,
#news1.half-content .text {
    width: min( 100%, 878px );
    max-width: 878px;
    padding: 0;
    margin: 0;
    text-align: left;
    float: none;
    display: block;
}

/* Beat the inner Bootstrap col-lg-8 col-lg-offset-2 wrapper */
#news1.half-content .nTxtRt > div,
#news1.half-content .text > div {
    width: 100% !important;
    max-width: unset;
    margin: 0 !important;
    padding: 0;
    float: none;
}

#news1.half-content .nImgLt,
#news1.half-content .col-lg-7.nImgLt {
    position: relative;
    width: 100%;
    aspect-ratio: 1356 / 760;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
}

#news1.half-content .nImgLt.video,
#news1.half-content .video {
    height: auto;
}

#news1.half-content .cVidWrap {
    position: relative;
    width: min( 70.625vw, 1356px );
    height: 100%;
    display: block;
    overflow: visible;
}

#news1.half-content .popVid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

#news1.half-content .cVidWrap img,
#news1.half-content .popVid img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    float: none;
    filter: none;
    box-shadow: var( --shadyLarge );
    z-index: 1;
}

/* Reposition the base FA play button to overhang the right edge of the video */
#news1.half-content .popVid::after {
    left: auto;
    right: max( -8.073vw, -190px );
    top: 50%;
    transform: translateY( -50% );
    background-color: var( --white );
    outline: 3px solid var( --blue );
    outline-offset: -3px;
    transition: all .7s linear;
}

#news1.half-content .popVid:hover:after {
    transform: translateX(50px) translateY(-50px);
}

/* Decorative connector line from inside the video to the offset play button */
#news1.half-content .popVid::before {
    content: '';
    position: absolute;
    width: min( 11.354vw, 218px );
    height: 32px;
    background-image: url( '/wp-content/uploads/2026/05/accent-line.svg' );
    background-size: min( 11.354vw, 218px );
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY( -50% );
    right: max( -8.073vw, -190px );
    z-index: 2;
}

/* --- news2 + news3: side-by-side, 712 image / 536 copy --- */

#news2.half-content .container,
#news3.half-content .container {
    width: min( 95%, 1640px );
    max-width: unset;
    align-items: center;
    justify-content: space-between;
    gap: var( --content-col-gap );
    padding: 0;
}

#news2.half-content .image.nImgRt,
#news3.half-content .image.nImgLt {
    width: min( 37.1vw, 712px );
    max-width: 712px;
    height: clamp( 400px, 42.292vw, 812px );
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    float: none;
}

#news2.half-content .image.nImgRt picture,
#news3.half-content .image.nImgLt picture {
    width: 100%;
    height: 100%;
    display: block;
}

#news2.half-content .image.nImgRt img,
#news3.half-content .image.nImgLt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    float: none;
    margin: 0;
}

#news2.half-content .text.nTxtLt,
#news3.half-content .text.nTxtRt {
    width: min( 27.917vw, 536px );
    max-width: 536px;
    flex: 0 0 auto;
    padding: 0;
    text-align: left;
}

#news2.half-content .text.nTxtLt > div,
#news3.half-content .text.nTxtRt > div {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- Typography for all 3 news blocks (Figma H1 + Body) --- */

#news1.half-content h2,
#news2.half-content h2,
#news3.half-content h2 {
    font-size: var( --h1-font-size );
    line-height: var( --h1-line-height );
    color: inherit;
    margin: 0 0 32px;
    font-weight: var( --heading-font-weight );
    text-transform: none;
    letter-spacing: 0;
    font-family: var( --heading-font );
    display: block;
}

/* Overline accent — <small> inside the h2 (Figma "Lorem Ipsum Dolor" + wave) */
#news1.half-content h2 small,
#news2.half-content h2 small,
#news3.half-content h2 small {
    display: inline-flex;
    align-items: center;
    gap: 62px;
    font-family: var( --body-font );
    font-size: var( --overline-font-size );
    font-weight: var( --overline-font-weight );
    line-height: var( --overline-line-height );
    letter-spacing: var( --overline-letter-spc );
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 32px;
    width: 100%;
}

#news1.half-content h2 small::after,
#news2.half-content h2 small::after,
#news3.half-content h2 small::after {
    content: '';
    flex: 0 0 auto;
    width: 77px;
    height: 18px;
    background-image: url( '/wp-content/uploads/2026/05/wave.svg' );
}

#news1.half-content h2 small {
    text-indent: max( -2.865vw, -55px );
}

#news1.half-content .text p,
#news2.half-content .text p,
#news3.half-content .text p,
#news1.half-content p,
#news2.half-content p,
#news3.half-content p {
    font-size: var( --body-font-size );
    line-height: 1.5;
    color: inherit;
    margin: 0 0 24px;
}

/* ============================================================================
   Mobile
   ============================================================================ */

@media ( max-width: 1024px ) {
    /* Interior service-detail page mobile: stack image above text, 326-wide image at 240 height */
    .page-template-full-width-flexible .half-content > .container {
        flex-direction: column;
        gap: 32px;
        padding: 0 32px;
        width: 100%;
        max-width: none;
    }

    .page-template-full-width-flexible .half-content > .container > .image,
    .page-template-full-width-flexible .half-content > .container > .text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .page-template-full-width-flexible .half-content > .container > .image img {
        height: 240px;
    }

    .half-content,
    .half-content .container,
    .half-content.reverse,
    .half-content.reverse .container {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .half-content .text ol {
        padding-left: min( 3.027vw, 31px );
    }

    .half-content .text {
        clear: both;
        padding: 20px 15px 50px;
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        height: fit-content;
    }

    .half-content .video {
        height: unset;
        display: block;
        width: 100%;
    }

    .half-content .image {
        height: auto;
        width: 100%;
        z-index: 6;
        overflow: visible;
    }

    .image.nImgLt picture,
    .image.nImgRt picture {
        position: relative;
        width: 100%;
        display: block;
        height: fit-content;
        overflow: hidden;
    }

    .image.nImgLt:not(.video) img,
    .image.nImgRt:not(.video) img,
    #news1 .nImgLt:not(.video) img,
    #news1 .nImgRt:not(.video) img,
    #news2 .nImgLt:not(.video) img,
    #news2 .nImgRt:not(.video) img,
    #news3 .nImgLt:not(.video) img,
    #news3 .nImgRt:not(.video) img {
        display: block;
        margin: 0 auto;
        width: 80%;
        height: auto;
        float: none;
        z-index: 3;
    }

    #news1.half-content .nImgLt img {
        width: auto;
    }

    .image.nImgRt img {
        height: auto;
        width: auto;
    }

    .nImgLt img {
        height: unset;
    }

    /* Figma mobile order: image on top, copy below for news1 */
    #news1.half-content {
        flex-direction: column;
        padding: clamp( 60px, 8vw, 80px ) clamp( 20px, 8vw, 32px );
        gap: 56px;
    }

    #news1.half-content .nTxtRt,
    #news1.half-content .text,
    #news1.half-content .nImgLt {
        max-width: 100%;
        width: 100%;
    }

    #news1.half-content .col-lg-7.nImgLt {
        width: 100%;
        aspect-ratio: unset;
    }

#news1.half-content .cVidWrap {
    width: 100%;
    aspect-ratio: 326 / 240;
}

    /* Play button: center over the video on mobile */
    #news1.half-content .popVid::after {
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate( -50%, -50% );
    }

    #news1.half-content .popVid:hover:after {
        transform: translate( -50%, -50% )
    }

    /* Decorative connector only makes sense with right-overhang button — hide on mobile */
    #news1.half-content .popVid::before {
        display: none;
    }

    /* Figma mobile news block has no overline accent — hide the <small> + wave */
    #news1.half-content h2 small,
    #news2.half-content h2 small,
    #news3.half-content h2 small {
        display: none;
    }

    #news1.half-content .heading,
    #news2.half-content .heading,
    #news3.half-content .heading {
        display: none;
    }

    #news2.half-content,
    #news3.half-content {
        background-image: none;
        background-color: var( --white );
    }

    #news2.half-content .container,
    #news3.half-content .container {
        flex-direction: column;
        gap: 40px;
        padding: 0 32px;
    }

    #news2.half-content .image.nImgRt,
    #news3.half-content .image.nImgLt,
    #news2.half-content .text.nTxtLt,
    #news3.half-content .text.nTxtRt {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #news1 .image.nImgRt, #news1 .image.nImgLt,
    #news2 .image.nImgRt, #news2 .image.nImgLt,
    #news3 .image.nImgRt {
        height: fit-content;
        padding: 50px 0;
    }

    #news1.half-content .text > div,
    #news2.half-content .text > div {
        width: 100%;
        margin-left: 0;
    }
}

@media ( max-width: 768px ) {
    .half-content .container {
        width: 100%;
        padding: 0;
        flex-direction: column;
    }

    .half-content .text ol {
        padding-left: 30px;
    }
}

@media ( max-width: 567px ) {
    .half-content .container {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }

    #news1 .image.nImgRt, #news1 .image.nImgLt,
    #news2 .image.nImgRt, #news2 .image.nImgLt,
    #news3 .image.nImgRt, #news3 .image.nImgLt {
        height: fit-content;
    }
}