/* Case Study - Override cached styles.css absolute positioning */
body.cms-kitchen-transformations-casestudy8 .cms-page-view [data-appearance="contained"] {
    position: relative !important;
    margin-top: 0 !important;
    left: auto !important;
    margin-left: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

body.cms-kitchen-transformations-casestudy8 .column.main > [data-content-type="row"][data-appearance="contained"] > [data-element="inner"] {
    padding: 40px 20px;
    max-width: 1280px;
    margin: 0 auto;
}

body.cms-kitchen-transformations-casestudy8 .column.main > [data-content-type="row"][data-appearance="contained"] > [data-element="inner"] h1 {
    margin-bottom: 10px;
    font-size: 2rem;
    color: #ffffff !important;
}

body.cms-kitchen-transformations-casestudy8 .column.main > [data-content-type="row"][data-appearance="contained"] > [data-element="inner"] .easystep-right-sec p {
    line-height: 1.7;
    max-width: 900px;
    color: #ffffff !important;
}

/* ============================================
   Case Study Pages - Mobile Responsive
   ============================================ */
@media (max-width: 767px) {

    /* Remove gap above header section */
    [class*="cms-kitchen-transformations-casestudy"] .column.main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Dark header background */
    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type {
        background-color: #1e3a5f !important;
        padding: 24px 20px 28px !important;
        margin-top: 0 !important;
    }

    /* Remove inner padding/margins that cause white gap */
    #html-body [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type > .row-full-width-inner {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Stack columns */
    [class*="cms-kitchen-transformations-casestudy"] .pagebuilder-column-line {
        flex-wrap: wrap !important;
    }

    #html-body [class*="cms-kitchen-transformations-casestudy"] .pagebuilder-column {
        width: 100% !important;
    }

    /* Reset ALL column padding/margins in header to align text consistently */
    #html-body [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type .pagebuilder-column {
        padding: 0 !important;
        margin: 0 !important;
    }

    #html-body [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type [data-content-type="text"],
    #html-body [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type [data-content-type="html"] {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* H1 styling */
    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
    }

    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type h1 span {
        color: #ffffff !important;
    }

    /* H4 subtitle - gold accent */
    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type h4 {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        color: #e8c547 !important;
        font-weight: 600 !important;
    }

    /* Body text */
    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type .easystep-right-sec {
        margin: 0 !important;
        padding: 0 !important;
    }

    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:first-of-type .easystep-right-sec p {
        color: #c8d6e5 !important;
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* Content sections below header */
    [class*="cms-kitchen-transformations-casestudy"] .column.main > [data-content-type="row"]:not(:first-of-type) .pagebuilder-column {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ============================================================================
   CASE STUDY PAGES - focused desktop fixes  [appended 2026-07-03]
   Addresses three specific user complaints:
   1. Text has no formatting for titles/headers
   2. "Bringing the Vision to Life" section overlaps images below it
   3. "Book A Free Consultation Today!" banner not full width + text not readable
   ============================================================================ */

@media (min-width: 768px) {

    /* --- 1. Heading typography for all case-study page content -------------
       Currently the original casestudy.css only forces h1 white on contained
       rows - so h2, h3, h4 (and h1s in full-width rows) inherit browser
       defaults. Give them consistent styling scoped to the .column.main
       so no other page's heading typography is touched. */
    body[class*="cms-kitchen-transformations-casestudy"] .column.main h1,
    body[class*="cms-kitchen-transformations-casestudy"] .column.main h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #1e3a5f;
        line-height: 1.25;
        margin: 0 0 1rem;
        display: block !important;
    }

    body[class*="cms-kitchen-transformations-casestudy"] .column.main h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e3a5f;
        line-height: 1.3;
        margin: 1.5rem 0 0.75rem;
        display: block !important;
    }

    body[class*="cms-kitchen-transformations-casestudy"] .column.main h4 {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #b8901f;
        margin: 0 0 0.75rem;
        display: block !important;
    }


    /* --- 2. Row spacing so "Bringing the Vision to Life" (full-width row
       B8UYW70) doesn't butt up against the images below ------------------- */
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"] {
        padding-top: 24px;
        padding-bottom: 32px;
    }


    /* --- 3. "Book A Free Consultation Today!" — full viewport width + overlay
       for text legibility ------------------------------------------------- */

    /* Full-viewport breakout on the last row (finance banner). Row T6Y2CQS
       already ships with the eldar_1.jpg / Credit_Banner_1_.jpg backgrounds
       via data-background-images; just needs the width + margin idiom. */
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 80px 24px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Dark overlay pseudo-element so the white text on the .jpg is legible
       regardless of where in the image it lands. */
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(30, 58, 95, 0.75) 0%, rgba(30, 58, 95, 0.55) 100%);
        pointer-events: none;
        z-index: 0;
    }

    /* Ensure content sits above the overlay */
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type
        > .row-full-width-inner {
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    /* Banner heading */
    body[class*="cms-kitchen-transformations-casestudy"]
        [data-pb-style="T6Y2CQS"] .text-sec-main-part.quoate-title-sec-main h2,
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type
        h2 {
        color: #ffffff !important;
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 0 1rem !important;
        text-align: center;
    }

    /* Banner paragraph */
    body[class*="cms-kitchen-transformations-casestudy"]
        [data-pb-style="T6Y2CQS"] .text-sec-main-part.quoate-title-sec-main p,
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type
        p {
        color: #ffffff !important;
        font-size: 1.125rem !important;
        line-height: 1.6 !important;
        max-width: 700px !important;
        margin: 0 auto 1.5rem !important;
        text-align: center;
    }

    /* Banner "Book Consultation" CTA button — override the Page Builder base
       (padding:.5rem 1rem 1.5rem which looks off) with a proper white pill. */
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type
        .pagebuilder-button-primary {
        display: inline-block !important;
        padding: 14px 32px !important;
        background: #ffffff !important;
        color: #1e3a5f !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        border: none !important;
        transition: background 0.15s ease;
    }
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="full-width"]:last-of-type
        .pagebuilder-button-primary:hover {
        background: #f4d76e !important;
        color: #1e3a5f !important;
    }
}


/* v3 - Contained-row spacing so cs8 body sections don't touch images
   2026-07-03. The contained rows (Row 5 "Smart Storage for Everyday Living"
   and Row 7 "Bringing the Vision to Life") had no top/bottom margin, so
   they visually butt up against the images above and below. */
@media (min-width: 768px) {
    body[class*="cms-kitchen-transformations-casestudy"]
        .column.main
        > [data-content-type="row"][data-appearance="contained"] {
        margin-top: 48px !important;
        margin-bottom: 48px !important;
    }
}


/* ============================================================
 * "Bringing the Vision to Life" row overlap fix (2026-07-03)
 * ============================================================
 *
 * ENEMY (styles.css, minified):
 *   .cms-page-view [data-appearance=contained]{
 *       background:linear-gradient(180deg,#0080f1 0,#1265af 100%);
 *       max-width:100vw;
 *       position:absolute;
 *       left:0;
 *       margin-top:-3rem;
 *   }
 *
 * .cms-page-view is on <body>, the row is a descendant, so the
 * rule matches. position:absolute yanks the row out of flow, so
 * the image row below collapses under it and the blue gradient
 * paints on top of the kitchen images. The previous cs8 override
 * `body.cms-...-casestudy8 .cms-page-view [data-appearance=contained]`
 * never matched (same body, needs a descendant .cms-page-view).
 *
 * Fix: higher-specificity override that returns the row to flow,
 * respects the page container, gives real breathing room, and
 * keeps the blue as an intentional highlighted panel.
 * ============================================================ */

body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"],
body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    max-width: 1200px !important;
    width: auto !important;

    margin-top: 3rem !important;
    margin-right: auto !important;
    margin-bottom: 3rem !important;
    margin-left: auto !important;

    float: none !important;
    clear: both !important;

    background: linear-gradient(180deg, #0080f1 0%, #1265af 100%);
    border-radius: 10px;
    padding: 3rem 2.5rem;
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(18, 101, 175, 0.22);
    box-sizing: border-box;

    z-index: auto !important;
}

body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"],
body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"] *,
body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"],
body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"] * {
    color: #ffffff !important;
}

body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"] > *,
body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"] [data-element="inner"],
body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"] > *,
body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"] [data-element="inner"] {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    position: static !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    body.cms-kitchen-transformations-casestudy8 [data-content-type="row"][data-appearance="contained"],
    body[class*="cms-kitchen-transformations-casestudy"] [data-content-type="row"][data-appearance="contained"] {
        max-width: calc(100% - 2rem) !important;
        padding: 2rem 1.25rem !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        border-radius: 6px;
    }
}