.elementor-1570 .elementor-element.elementor-element-c5ca4e7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-b42c580{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-f0a5acc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-0116629{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-50d9f30{width:100%;max-width:100%;}.elementor-1570 .elementor-element.elementor-element-af2f6d2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-4e4e4e4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-9c49913{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1570 .elementor-element.elementor-element-6c00365{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-30bcfa1 *//* ==========================================================
   YOURCLAD
   Commercial Hero V3
   Part 1 — Foundation
   Component Namespace:
   .yc-commercial-hero
========================================================== */


/* ==========================================================
   DESIGN TOKENS
========================================================== */

.yc-commercial-hero{

    /* Brand */

    --yc-bg:#060817;
    --yc-surface:rgba(13,20,40,.20 );
--yc-surface-alt:rgba(17,26,50,.21);

    --yc-accent:#F66000;

    --yc-text:#FFFFFF;
    --yc-text-soft:rgba(255,255,255,.78);

    --yc-border:rgba(255,255,255,.08);
    --yc-border-hover:rgba(246,96,0,.28);



    /* Typography */

    --yc-font-heading:Poppins,sans-serif;
    --yc-font-body:Poppins,sans-serif;

    /* Radius */

    --yc-radius-card:24px;
    --yc-radius-button:14px;

    /* Spacing */

    --yc-space-xs:10px;
    --yc-space-sm:16px;
    --yc-space-md:24px;
    --yc-space-lg:34px;
    --yc-space-xl:48px;

    /* Shadow */

    --yc-shadow-soft:
        0 18px 60px rgba(0,0,0,.24);

    --yc-shadow-hover:
        0 28px 72px rgba(0,0,0,.30);

}


/* ==========================================================
   ROOT
========================================================== */

.yc-commercial-hero{

    position:relative;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:clamp(700px,88vh,940px);

    padding:64px 24px;

    background:var(--yc-bg);

    color:var(--yc-text);

    font-family:var(--yc-font-body);

}


/* ==========================================================
   BACKGROUND
========================================================== */

.yc-commercial-hero__bg{

    position:absolute;
    inset:0;

    z-index:0;

    background-image:url("https://yourclad.co.uk/wp-content/uploads/2026/07/yourclad-commercial-industrial-yorkshire.webp");

    background-size:cover;
    background-position:center;

    transform:scale(1.02);

}


/* ==========================================================
   OVERLAY
========================================================== */

.yc-commercial-hero__overlay{

    position:absolute;
    inset:0;

    z-index:1;

    background:

    radial-gradient(
        circle at top right,
        rgba(246,96,0,.08),
        transparent 42%
    ),

    linear-gradient(
        105deg,
        rgba(6,8,23,.94) 0%,
        rgba(6,8,23,.84) 34%,
        rgba(6,8,23,.62) 66%,
        rgba(6,8,23,.54) 100%
    ),

    linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.28)
    );

    pointer-events:none;

}


/* ==========================================================
   MAIN GRID
========================================================== */

.yc-commercial-hero__wrap{

    position:relative;

    z-index:2;

    width:100%;
    max-width:1200px;

    display:grid;

    grid-template-columns:

        minmax(0,1.18fr)
        minmax(360px,.82fr);

    gap:32px;

    align-items:stretch;

}


/* ==========================================================
   PANELS
========================================================== */

.yc-commercial-hero__card,
.yc-commercial-hero__side{

    display:flex;
    flex-direction:column;

    position:relative;

    padding:var(--yc-space-lg);

    border-radius:var(--yc-radius-card);

    background:var(--yc-surface);

    border:1px solid var(--yc-border);

    box-shadow:var(--yc-shadow-soft);

    transition:

        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background-color .28s ease;

}


.yc-commercial-hero__side{

    justify-content:space-between;

    background:var(--yc-surface-alt);

}


/* ==========================================================
   PANEL STATES
========================================================== */

.yc-commercial-hero__card:hover,
.yc-commercial-hero__side:hover{

    transform:translateY(-4px);

    border-color:var(--yc-border-hover);

    box-shadow:var(--yc-shadow-hover);

}
/* ==========================================================
   TYPOGRAPHY
========================================================== */

.yc-commercial-hero h1,
.yc-commercial-hero h2,
.yc-commercial-hero p{

    margin:0;

}

.yc-commercial-hero strong{

    color:var(--yc-text);

}


/* ==========================================================
   LEFT PANEL FLOW
========================================================== */

.yc-commercial-hero__card{

    justify-content:center;

}


/* ==========================================================
   EYEBROW
========================================================== */

.yc-commercial-hero__eyebrow{

    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:var(--yc-space-sm);

    color:var(--yc-accent);

    font-family:var(--yc-font-heading);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.yc-commercial-hero__eyebrow::before{

    content:"";

    width:36px;
    height:2px;

    border-radius:999px;

    background:var(--yc-accent);

}


/* ==========================================================
   H1
========================================================== */

.yc-commercial-hero__h1{

    max-width:12ch;

    color:var(--yc-text);

    font-family:var(--yc-font-heading);

    font-size:clamp(2.6rem,4vw,4.1rem);

    font-weight:800;

    line-height:1.04;

    letter-spacing:-.03em;

    text-wrap:balance;

}



/* ==========================================================
   SUBHEADLINE
========================================================== */

.yc-commercial-hero__sub{

    margin-top:22px;

    max-width:60ch;

    color:var(--yc-text-soft);

    font-size:1.05rem;

    line-height:1.78;

    font-weight:400;

}


/* ==========================================================
   PROOF LIST
========================================================== */

.yc-commercial-hero__proof{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:

        var(--yc-space-lg)
        0
        0;

    padding:0;

    list-style:none;

}


/* ==========================================================
   PROOF ITEM
========================================================== */

.yc-commercial-hero__proof li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}


/* ==========================================================
   CHECK
========================================================== */

.yc-commercial-hero__tick{

    flex:0 0 auto;

    display:flex;

    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    margin-top:2px;

    border-radius:999px;

    border:1px solid rgba(246,96,0,.22);

    background:rgba(246,96,0,.10);

    color:var(--yc-accent);

}

.yc-commercial-hero__tick svg{

    width:14px;
    height:14px;

}


/* ==========================================================
   PROOF TYPOGRAPHY
========================================================== */

.yc-commercial-hero__proof strong{

    display:block;

    font-size:1rem;

    font-weight:600;

    line-height:1.6;

    color:var(--yc-text);

}


/* ==========================================================
   TRUST LINE
========================================================== */

.yc-commercial-hero__trust{

    margin-top:32px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.72);

    font-size:.92rem;

    line-height:1.8;

}

.yc-commercial-hero__trust strong{

    color:var(--yc-text);

}


/* ==========================================================
   RIGHT PANEL TYPOGRAPHY
========================================================== */

.yc-commercial-hero__sideH{

    color:var(--yc-text);

    font-family:var(--yc-font-heading);

    font-size:1.55rem;

    font-weight:700;

    line-height:1.2;

}


.yc-commercial-hero__sideP{

    margin-top:18px;

    max-width:34ch;

    color:var(--yc-text-soft);

    font-size:.98rem;

    line-height:1.75;

}


/* ==========================================================
   CAPABILITY LIST
========================================================== */

.yc-commercial-hero__sideGrid{

    display:flex;

    flex-direction:column;

    margin-top:34px;

}


/* ==========================================================
   CAPABILITY ITEM
========================================================== */

.yc-commercial-hero__chip{

    display:block;

    padding:

        24px
        0;

    text-decoration:none;

    border-top:1px solid rgba(255,255,255,.08);

    transition:

        padding-left .28s ease,
        border-color .28s ease;

}

.yc-commercial-hero__chip:first-child{

    border-top:none;

}


/* ==========================================================
   CAPABILITY TITLE
========================================================== */

.yc-commercial-hero__chip strong{

    display:block;

    margin-bottom:8px;

    font-size:1rem;

    font-weight:600;

    line-height:1.35;

}


/* ==========================================================
   CAPABILITY DESCRIPTION
========================================================== */

.yc-commercial-hero__chip span{

    display:block;

    max-width:36ch;

    color:var(--yc-text-soft);

    font-size:.94rem;

    line-height:1.72;

}
/* ==========================================================
   YOURCLAD
   Commercial Hero V3
   Part 3 — Components
   Component Namespace:
   .yc-commercial-hero
========================================================== */


/* ==========================================================
   CTA ROW
========================================================== */

.yc-commercial-hero__ctaRow{

    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:14px;

    margin-top:var(--yc-space-lg);

}


/* ==========================================================
   BUTTON BASE
========================================================== */

.yc-commercial-hero__btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:
        14px
        22px;

    border:1px solid transparent;
    border-radius:var(--yc-radius-button);

    font-family:var(--yc-font-body);

    font-size:.95rem;
    font-weight:700;
    line-height:1.2;

    letter-spacing:.01em;

    text-align:center;
    text-decoration:none;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        background-color .24s ease,
        border-color .24s ease,
        color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;

}


/* ==========================================================
   BUTTON ICON
========================================================== */

.yc-commercial-hero__btn svg{

    flex:0 0 auto;

    width:18px;
    height:18px;

    transition:
        transform .24s ease;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.yc-commercial-hero__btn--primary{

    background-color:var(--yc-accent);

    border-color:var(--yc-accent);

    color:#FFFFFF;

    box-shadow:
        0 14px 34px rgba(246,96,0,.20);

}


/* ==========================================================
   PRIMARY BUTTON — HOVER
========================================================== */

.yc-commercial-hero__btn--primary:hover{

    background-color:#E95700;

    border-color:#E95700;

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:
        0 20px 42px rgba(246,96,0,.28);

    text-decoration:none;

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.yc-commercial-hero__btn--secondary{

    background-color:transparent;

    border-color:rgba(255,255,255,.18);

    color:#FFFFFF;

    box-shadow:none;

}


/* ==========================================================
   SECONDARY BUTTON — HOVER
========================================================== */

.yc-commercial-hero__btn--secondary:hover{

    background-color:rgba(255,255,255,.05);

    border-color:rgba(246,96,0,.42);

    color:#FFFFFF;

    transform:translateY(-2px);

    text-decoration:none;

}


/* ==========================================================
   BUTTON ICON INTERACTION
========================================================== */

.yc-commercial-hero__btn:hover svg{

    transform:translateX(3px);

}


/* ==========================================================
   BUTTON ACTIVE
========================================================== */

.yc-commercial-hero__btn:active{

    transform:translateY(0);

    box-shadow:none;

}


/* ==========================================================
   SIDE CTA
========================================================== */

.yc-commercial-hero__ctaRow--side{

    margin-top:var(--yc-space-lg);

    padding-top:var(--yc-space-md);

    border-top:1px solid rgba(255,255,255,.08);

}


.yc-commercial-hero__ctaRow--side
.yc-commercial-hero__btn{

    width:100%;

}


/* ==========================================================
   CAPABILITY LINK BASE
========================================================== */

.yc-commercial-hero__chip{

    position:relative;

    color:inherit;

    -webkit-tap-highlight-color:transparent;

}


/* ==========================================================
   CAPABILITY INDICATOR
========================================================== */

.yc-commercial-hero__chip::after{

    content:"";

    position:absolute;

    top:50%;
    right:2px;

    width:7px;
    height:7px;

    border-top:2px solid currentColor;
    border-right:2px solid currentColor;

    color:rgba(255,255,255,.42);

    opacity:0;

    transform:
        translate(-6px,-50%)
        rotate(45deg);

    transition:
        opacity .24s ease,
        color .24s ease,
        transform .24s ease;

}


/* ==========================================================
   CAPABILITY HOVER
========================================================== */

.yc-commercial-hero__chip:hover{

    padding-left:10px;

    padding-right:24px;

    border-color:rgba(246,96,0,.28);

    text-decoration:none;

}


.yc-commercial-hero__chip:hover strong{

    color:var(--yc-accent);

}


.yc-commercial-hero__chip:hover::after{

    opacity:1;

    color:var(--yc-accent);

    transform:
        translate(0,-50%)
        rotate(45deg);

}


/* ==========================================================
   CAPABILITY TITLE INTERACTION
========================================================== */

.yc-commercial-hero__chip strong{

    transition:
        color .24s ease;

}


/* ==========================================================
   GENERIC LINK BEHAVIOUR
========================================================== */

.yc-commercial-hero a{

    text-decoration-thickness:.08em;
    text-underline-offset:.18em;

}


/* ==========================================================
   ACCESSIBLE FOCUS
========================================================== */

.yc-commercial-hero a:focus-visible{

    outline:3px solid var(--yc-accent);
    outline-offset:4px;

}


/* Button focus follows its shape */

.yc-commercial-hero__btn:focus-visible{

    border-radius:var(--yc-radius-button);

}


/* Capability focus remains editorial */

.yc-commercial-hero__chip:focus-visible{

    border-radius:8px;

}


/* ==========================================================
   KEYBOARD FOCUS ENHANCEMENT
========================================================== */

.yc-commercial-hero__chip:focus-visible strong{

    color:var(--yc-accent);

}


.yc-commercial-hero__chip:focus-visible::after{

    opacity:1;

    color:var(--yc-accent);

    transform:
        translate(0,-50%)
        rotate(45deg);

}


/* ==========================================================
   PANEL INTERACTION REFINEMENT
========================================================== */

.yc-commercial-hero__card:hover,
.yc-commercial-hero__side:hover{

    border-color:var(--yc-border-hover);

}


/* Prevent nested interactions from feeling exaggerated */

.yc-commercial-hero__card:hover
.yc-commercial-hero__btn,

.yc-commercial-hero__side:hover
.yc-commercial-hero__btn{

    will-change:transform;

}


/* ==========================================================
   POINTER-SPECIFIC INTERACTIONS
========================================================== */

@media (hover:hover) and (pointer:fine){

    .yc-commercial-hero__btn,
    .yc-commercial-hero__chip,
    .yc-commercial-hero__card,
    .yc-commercial-hero__side{

        will-change:auto;

    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

    .yc-commercial-hero__card:hover,
    .yc-commercial-hero__side:hover,
    .yc-commercial-hero__btn:hover{

        transform:none;

    }

    .yc-commercial-hero__chip:hover{

        padding-left:0;
        padding-right:0;

    }

    .yc-commercial-hero__chip:hover::after{

        opacity:0;

    }

}
/* ==========================================================
   YOURCLAD
   Commercial Hero V3
   Part 4 — Responsive & Performance
========================================================== */


/* ==========================================================
   LARGE TABLETS
========================================================== */

@media (max-width:1100px){

    .yc-commercial-hero{

        min-height:auto;

        padding:
            80px
            24px;

    }

    .yc-commercial-hero__wrap{

        grid-template-columns:1fr;

        gap:28px;

        max-width:820px;

    }

    .yc-commercial-hero__card{

        justify-content:flex-start;

    }

    .yc-commercial-hero__side{

        min-height:auto;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){

    .yc-commercial-hero{

        padding:
            72px
            22px;

    }

    .yc-commercial-hero__card,
    .yc-commercial-hero__side{

        padding:30px;

        border-radius:20px;

    }

    .yc-commercial-hero__h1{

        max-width:100%;

        font-size:clamp(2.2rem,7vw,3.2rem);

        text-wrap:pretty;

    }

    .yc-commercial-hero__sub{

        max-width:100%;

        font-size:1rem;

        line-height:1.72;

    }

    .yc-commercial-hero__sideP{

        max-width:100%;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:640px){

    .yc-commercial-hero{

        padding:
            64px
            18px;

    }

    .yc-commercial-hero__card,
    .yc-commercial-hero__side{

        padding:26px;

    }

    .yc-commercial-hero__eyebrow{

        font-size:.72rem;

        letter-spacing:.14em;

    }

    .yc-commercial-hero__eyebrow::before{

        width:28px;

    }

    .yc-commercial-hero__proof{

        gap:16px;

    }

    .yc-commercial-hero__proof li{

        gap:14px;

    }

    .yc-commercial-hero__ctaRow{

        flex-direction:column;

        align-items:stretch;

    }

    .yc-commercial-hero__btn{

        width:100%;

    }

    .yc-commercial-hero__trust{

        font-size:.88rem;

        line-height:1.7;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:420px){

    .yc-commercial-hero{

        padding:
            56px
            16px;

    }

    .yc-commercial-hero__card,
    .yc-commercial-hero__side{

        padding:22px;

        border-radius:18px;

    }

    .yc-commercial-hero__h1{

        font-size:2rem;

        line-height:1.08;

        letter-spacing:-.02em;

    }

    .yc-commercial-hero__sub{

        font-size:.96rem;

    }

    .yc-commercial-hero__sideH{

        font-size:1.35rem;

    }

    .yc-commercial-hero__chip{

        padding:
            20px
            0;

    }

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1440px){

    .yc-commercial-hero__wrap{

        max-width:1260px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .yc-commercial-hero *,
    .yc-commercial-hero *::before,
    .yc-commercial-hero *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   ELEMENTOR
========================================================== */

.yc-commercial-hero img{

    display:block;

    max-width:100%;

    height:auto;

}

.yc-commercial-hero svg{

    display:block;

}

.yc-commercial-hero a{

    color:inherit;

}

.yc-commercial-hero .elementor-widget-container{

    margin:0;

    padding:0;

}

.yc-commercial-hero *{

    box-sizing:border-box;

}


/* ==========================================================
   TEXT RENDERING
========================================================== */

.yc-commercial-hero{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}


/* ==========================================================
   IMAGE OPTIMISATION
========================================================== */

.yc-commercial-hero__bg{

    will-change:transform;

    backface-visibility:hidden;

}


/* ==========================================================
   SAFE SVG
========================================================== */

.yc-commercial-hero svg{

    overflow:visible;

}


/* ==========================================================
   SELECTION
========================================================== */

.yc-commercial-hero ::selection{

    background:rgba(246,96,0,.24);

    color:#FFFFFF;

}


/* ==========================================================
   FINAL POLISH
========================================================== */

.yc-commercial-hero__card,
.yc-commercial-hero__side{

    isolation:isolate;

}

.yc-commercial-hero__btn,
.yc-commercial-hero__chip{

    position:relative;

    z-index:1;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b4b8a0c *//* =========================================================
   YOURCLAD — COMMERCIAL & INDUSTRIAL
   BLOCK 1: SECTORS WE SERVE
   PART 1: BASE, CONTAINER, HEADER AND GRID
   ========================================================= */


/* =========================================================
   COMPONENT BASE
   ========================================================= */

.yc-commercial-sectors,
.yc-commercial-sectors * {
    box-sizing: border-box;
}

.yc-commercial-sectors {
    position: relative;
    width: 100%;
    padding: 40px 24px;
    overflow: hidden;
    background: #f7f7f7;
    color: #060817;
    font-family: "Poppins", sans-serif;
}


/* Subtle background detail */

.yc-commercial-sectors::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(246, 96, 0, 0.045);
    pointer-events: none;
}

.yc-commercial-sectors::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -220px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(6, 8, 23, 0.025);
    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.yc-commercial-sectors__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px;
    border: 1px solid rgba(6, 8, 23, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 24px 60px rgba(6, 8, 23, 0.07),
        0 4px 14px rgba(6, 8, 23, 0.035);
}


/* Orange accent line */

.yc-commercial-sectors__container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 52px;
    width: 76px;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: #f66000;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.yc-commercial-sectors__header {
    width: 100%;
    max-width: 860px;
    margin: 0 0 42px;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.yc-commercial-sectors__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 17px;
    color: #f66000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yc-commercial-sectors__label::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #f66000;
    box-shadow: 0 0 0 5px rgba(246, 96, 0, 0.1);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.yc-commercial-sectors__title {
    max-width: 760px;
    margin: 0 0 18px;
    color: #060817;
    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.035em;
}


/* Orange title detail */

.yc-commercial-sectors__title::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 20px;
    border-radius: 10px;
    background: #f66000;
}


/* =========================================================
   SECTION DESCRIPTION
   ========================================================= */

.yc-commercial-sectors__description {
    max-width: 820px;
    margin: 0;
    color: rgba(6, 8, 23, 0.7);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}


/* =========================================================
   SECTORS GRID
   ========================================================= */

.yc-commercial-sectors__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;

    list-style: none;
    margin: 0;
    padding: 0;

    width: 100%;
}


/* =========================================================
   TABLET STRUCTURE
   ========================================================= */

@media (max-width: 1024px) {

    .yc-commercial-sectors {
        padding: 72px 22px;
    }

    .yc-commercial-sectors__container {
        padding: 44px;
    }

    .yc-commercial-sectors__container::before {
        left: 44px;
    }

    .yc-commercial-sectors__header {
        margin-bottom: 36px;
    }

    .yc-commercial-sectors__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 767px) {

    .yc-commercial-sectors {
        padding: 58px 18px;
    }

    .yc-commercial-sectors__container {
        padding: 36px 28px;
        border-radius: 20px;
    }

    .yc-commercial-sectors__container::before {
        left: 28px;
        width: 62px;
    }

    .yc-commercial-sectors__header {
        margin-bottom: 30px;
    }

    .yc-commercial-sectors__title {
        font-size: clamp(28px, 7vw, 38px);
    }

    .yc-commercial-sectors__description {
        font-size: 15px;
        line-height: 1.75;
    }

    .yc-commercial-sectors__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

}


/* =========================================================
   MOBILE STRUCTURE
   ========================================================= */

@media (max-width: 480px) {

    .yc-commercial-sectors {
        padding: 46px 14px;
    }

    .yc-commercial-sectors__container {
        padding: 32px 20px;
        border-radius: 18px;
    }

    .yc-commercial-sectors__container::before {
        left: 20px;
        width: 52px;
    }

    .yc-commercial-sectors__label {
        margin-bottom: 14px;
        font-size: 10.5px;
        letter-spacing: 0.1em;
    }

    .yc-commercial-sectors__title {
        margin-bottom: 16px;
        font-size: 28px;
        line-height: 1.2;
    }

    .yc-commercial-sectors__title::after {
        width: 48px;
        height: 3px;
        margin-top: 16px;
    }

    .yc-commercial-sectors__description {
        font-size: 14px;
        line-height: 1.7;
    }

    .yc-commercial-sectors__grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

}
/* =========================================================
   CARDS
   ========================================================= */

.yc-commercial-sectors__item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;

    min-height: 72px;
    padding: 20px 22px;

    background: #ffffff;

    border: 1px solid rgba(6,8,23,.08);
    border-radius: 16px;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background-color .28s ease;
}


/* Left Accent */

.yc-commercial-sectors__item::before{

    content:"";

    position:absolute;

    left:0;
    top:14px;
    bottom:14px;

    width:4px;

    border-radius:0 6px 6px 0;

    background:#F66000;

    opacity:.85;

}


/* Hover */

.yc-commercial-sectors__item:hover{

    transform:translateY(-4px);

    border-color:rgba(246,96,0,.25);

    box-shadow:
        0 18px 40px rgba(6,8,23,.08),
        0 6px 18px rgba(6,8,23,.04);

}


/* Keyboard */

.yc-commercial-sectors__item:focus-within{

    outline:none;

    border-color:#F66000;

    box-shadow:
        0 0 0 3px rgba(246,96,0,.12);

}


/* =========================================================
   MARKER
   ========================================================= */

.yc-commercial-sectors__marker{

    flex:0 0 auto;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#F66000;

    box-shadow:
        0 0 0 6px rgba(246,96,0,.10);

}


/* =========================================================
   TEXT
   ========================================================= */

.yc-commercial-sectors__name{

    display:block;

    color:#060817;

    font-size:15px;

    font-weight:600;

    line-height:1.5;

}


/* =========================================================
   MICRO INTERACTION
   ========================================================= */

.yc-commercial-sectors__item:hover
.yc-commercial-sectors__marker{

    transform:scale(1.15);

}

.yc-commercial-sectors__marker{

    transition:
        transform .25s ease;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .yc-commercial-sectors__item{

        min-height:68px;

        padding:18px 18px;

    }

    .yc-commercial-sectors__name{

        font-size:14px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .yc-commercial-sectors__item{

        min-height:64px;

        padding:17px;

        gap:14px;

        border-radius:14px;

    }

    .yc-commercial-sectors__marker{

        width:9px;
        height:9px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .yc-commercial-sectors__item{

        min-height:60px;

        padding:16px;

        gap:12px;

    }

    .yc-commercial-sectors__name{

        font-size:14px;

        line-height:1.4;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .yc-commercial-sectors__item,
    .yc-commercial-sectors__marker{

        transition:none;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a65afb7 *//* ==========================================================
   YOURCLAD
   Commercial Before & After (V2)
   Part 1 — Foundation
========================================================== */


/* ==========================================================
   DESIGN TOKENS
========================================================== */

.yc-commercial-before-after{

    /* Brand */

    --yc-ba-bg:#F7F7F7;
    --yc-ba-surface:#FFFFFF;
    --yc-ba-surface-alt:#F3F4F6;

    --yc-ba-primary:#060817;
    --yc-ba-accent:#F66000;

    --yc-ba-text:#232733;
    --yc-ba-text-soft:#6B7280;

    --yc-ba-border:rgba(6,8,23,.08);

    /* Typography */

    --yc-ba-font:Poppins,sans-serif;

    /* Radius */

    --yc-ba-radius-sm:12px;
    --yc-ba-radius-md:18px;
    --yc-ba-radius-lg:24px;

    /* Shadows */

    --yc-ba-shadow-soft:
        0 10px 32px rgba(6,8,23,.05);

    --yc-ba-shadow-card:
        0 18px 46px rgba(6,8,23,.08);

    /* Layout */

    --yc-ba-width:1200px;

    --yc-ba-gap:clamp(20px,2vw,28px);

    --yc-ba-padding:
        clamp(72px,8vw,110px);

}


/* ==========================================================
   ROOT
========================================================== */

.yc-commercial-before-after{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:
        var(--yc-ba-padding)
        24px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            var(--yc-ba-bg) 100%
        );

    isolation:isolate;

}


/* ==========================================================
   DECORATIVE BACKGROUND
========================================================== */

.yc-commercial-before-after::before{

    content:"";

    position:absolute;

    top:-220px;
    right:-180px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(246,96,0,.06) 0%,
            rgba(246,96,0,0) 72%
        );

    pointer-events:none;

    z-index:-1;

}


/* ==========================================================
   WRAPPER
========================================================== */

.yc-commercial-before-after__wrap{

    width:100%;

    max-width:var(--yc-ba-width);

    margin-inline:auto;

}


/* ==========================================================
   HEADER STRUCTURE
========================================================== */

.yc-commercial-before-after__header{

    max-width:760px;

    margin-bottom:42px;

}


/* ==========================================================
   COMPARISON GRID
========================================================== */

.yc-commercial-before-after__comparison{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:var(--yc-ba-gap);

    margin-bottom:10px;

}


/* ==========================================================
   FIGURE
========================================================== */

.yc-commercial-before-after__figure{

    margin:0;

    overflow:hidden;

    border:1px solid var(--yc-ba-border);

    border-radius:var(--yc-ba-radius-lg);

    background:var(--yc-ba-surface);

    box-shadow:var(--yc-ba-shadow-card);

}


/* ==========================================================
   MEDIA
========================================================== */

.yc-commercial-before-after__media{

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 10;

    background:var(--yc-ba-surface-alt);

}


/* ==========================================================
   FACTS
========================================================== */

.yc-commercial-before-after__facts{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:1px;

    overflow:hidden;

    margin:0;

    padding:0;

    border:1px solid var(--yc-ba-border);

    border-radius:var(--yc-ba-radius-md);

    background:var(--yc-ba-border);

    box-shadow:var(--yc-ba-shadow-soft);

}


/* ==========================================================
   FACT
========================================================== */

.yc-commercial-before-after__fact{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    padding:
        18px
        24px;

    background:#FFFFFF;

}


/* ==========================================================
   BOX MODEL
========================================================== */

.yc-commercial-before-after,
.yc-commercial-before-after *,
.yc-commercial-before-after *::before,
.yc-commercial-before-after *::after{

    box-sizing:border-box;

}
/* ==========================================================
   YOURCLAD
   Commercial Before & After (V2)
   Part 2 — Typography & Content
========================================================== */


/* ==========================================================
   RESET
========================================================== */

.yc-commercial-before-after h2,
.yc-commercial-before-after p,
.yc-commercial-before-after dl,
.yc-commercial-before-after dt,
.yc-commercial-before-after dd,
.yc-commercial-before-after figure{

    margin:0;

}

.yc-commercial-before-after img{

    display:block;

}


/* ==========================================================
   EYEBROW
========================================================== */

.yc-commercial-before-after__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:var(--yc-ba-accent);

    font-family:var(--yc-ba-font);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}


.yc-commercial-before-after__eyebrow::before{

    content:"";

    width:34px;

    height:2px;

    border-radius:999px;

    background:var(--yc-ba-accent);

}


/* ==========================================================
   TITLE
========================================================== */

.yc-commercial-before-after__title{

    max-width:12ch;

    color:var(--yc-ba-primary);

    font-family:var(--yc-ba-font);

    font-size:clamp(2.3rem,4vw,3.6rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-.03em;

    text-wrap:balance;

}


/* ==========================================================
   INTRO
========================================================== */

.yc-commercial-before-after__intro{

    max-width:58ch;

    margin-top:22px;

    color:var(--yc-ba-text-soft);

    font-family:var(--yc-ba-font);

    font-size:1.02rem;

    line-height:1.75;

}


/* ==========================================================
   BEFORE / AFTER BADGE
========================================================== */

.yc-commercial-before-after__badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:36px;

    padding:
        8px
        16px;

    border-radius:999px;

    background:rgba(6,8,23,.78);

    color:#FFFFFF;

    font-family:var(--yc-ba-font);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.14em;

    line-height:1;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}


.yc-commercial-before-after__figure--after
.yc-commercial-before-after__badge{

    background:var(--yc-ba-accent);

}


/* ==========================================================
   PROJECT FACTS
========================================================== */

.yc-commercial-before-after__fact{

    gap:8px;

}


.yc-commercial-before-after__fact dt{

    color:var(--yc-ba-text-soft);

    font-family:var(--yc-ba-font);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.16em;

    line-height:1;

    text-transform:uppercase;

}


.yc-commercial-before-after__fact dd{

    margin-top:6px;

    color:var(--yc-ba-primary);

    font-family:var(--yc-ba-font);

    font-size:1rem;

    font-weight:600;

    line-height:1.45;

}


/* ==========================================================
   ELEMENTOR TYPOGRAPHY PROTECTION
========================================================== */

.yc-commercial-before-after h2{

    color:var(--yc-ba-primary);

}

.yc-commercial-before-after p{

    color:inherit;

}

.yc-commercial-before-after dt{

    margin:0;

}

.yc-commercial-before-after dd{

    margin:0;

}
/* ==========================================================
   YOURCLAD
   Commercial Before & After (V2)
   Part 3 — Components

   Includes:
   - Figure cards
   - Images
   - Media overlays
   - Badges
   - Fact refinements
   - Hover states
   - Focus states
   - Performance-safe microinteractions
========================================================== */


/* ==========================================================
   FIGURE CARD
========================================================== */

.yc-commercial-before-after__figure{

    position:relative;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* Bottom accent line */

.yc-commercial-before-after__figure::after{

    content:"";

    position:absolute;

    right:0;
    bottom:0;
    left:0;

    height:3px;

    background:var(--yc-ba-accent);

    transform:scaleX(0);

    transform-origin:left center;

    transition:transform .3s ease;

    pointer-events:none;

}


/* ==========================================================
   IMAGE
========================================================== */

.yc-commercial-before-after__image{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.001);

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;

}


/* Before image treatment */

.yc-commercial-before-after__figure--before
.yc-commercial-before-after__image{

    filter:
        saturate(.9)
        contrast(.98)
        brightness(.96);

}


/* After image treatment */

.yc-commercial-before-after__figure--after
.yc-commercial-before-after__image{

    filter:
        saturate(1.03)
        contrast(1.02)
        brightness(1);

}


/* ==========================================================
   MEDIA OVERLAY
========================================================== */

.yc-commercial-before-after__media::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(6,8,23,.02) 0%,
            rgba(6,8,23,0) 55%,
            rgba(6,8,23,.16) 100%
        );

    pointer-events:none;

}


/* ==========================================================
   BADGE REFINEMENT
========================================================== */

.yc-commercial-before-after__badge{

    border:1px solid rgba(255,255,255,.22);

    box-shadow:
        0 8px 22px rgba(6,8,23,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;

}


/* After badge */

.yc-commercial-before-after__figure--after
.yc-commercial-before-after__badge{

    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 8px 22px rgba(246,96,0,.22);

}


/* ==========================================================
   FACTS COMPONENT
========================================================== */

.yc-commercial-before-after__fact{

    position:relative;

    transition:
        background-color .25s ease,
        box-shadow .25s ease;

}


/* Top indicator */

.yc-commercial-before-after__fact::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:var(--yc-ba-accent);

    transform:scaleX(0);

    transform-origin:left center;

    transition:transform .25s ease;

}


/* ==========================================================
   HOVER — FIGURES
========================================================== */

@media (hover:hover){

    .yc-commercial-before-after__figure:hover{

        transform:translateY(-3px);

        border-color:rgba(246,96,0,.18);

        box-shadow:
            0 22px 50px rgba(6,8,23,.11);

    }


    .yc-commercial-before-after__figure:hover::after{

        transform:scaleX(1);

    }


    .yc-commercial-before-after__figure:hover
    .yc-commercial-before-after__image{

        transform:scale(1.035);

    }


    .yc-commercial-before-after__figure--before:hover
    .yc-commercial-before-after__image{

        filter:
            saturate(.96)
            contrast(1)
            brightness(.99);

    }


    .yc-commercial-before-after__figure--after:hover
    .yc-commercial-before-after__image{

        filter:
            saturate(1.06)
            contrast(1.03)
            brightness(1.01);

    }


    .yc-commercial-before-after__figure:hover
    .yc-commercial-before-after__badge{

        transform:translateY(-1px);

        box-shadow:
            0 10px 26px rgba(6,8,23,.22);

    }

}


/* ==========================================================
   HOVER — FACTS
========================================================== */

@media (hover:hover){

    .yc-commercial-before-after__fact:hover{

        background:#FCFCFC;

        box-shadow:
            inset 0 0 0 1px rgba(246,96,0,.06);

    }


    .yc-commercial-before-after__fact:hover::before{

        transform:scaleX(1);

    }

}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.yc-commercial-before-after__figure:focus-within{

    outline:3px solid rgba(246,96,0,.28);

    outline-offset:4px;

}


/* ==========================================================
   SELECTION
========================================================== */

.yc-commercial-before-after ::selection{

    background:rgba(246,96,0,.2);

    color:var(--yc-ba-primary);

}


/* ==========================================================
   IMAGE RENDERING
========================================================== */

.yc-commercial-before-after__media{

    contain:layout paint;

}


.yc-commercial-before-after__image{

    image-rendering:auto;

}
/* ==========================================================
   YOURCLAD
   Commercial Before & After (V2)
   Part 4 — Responsive & Performance
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1440px){

    .yc-commercial-before-after{

        padding-inline:40px;

    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1200px){

    .yc-commercial-before-after__header{

        max-width:700px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .yc-commercial-before-after{

        padding:
            clamp(64px,8vw,88px)
            22px;

    }


    .yc-commercial-before-after__header{

        margin-bottom:36px;

    }


    .yc-commercial-before-after__comparison{

        gap:22px;

    }


    .yc-commercial-before-after__facts{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .yc-commercial-before-after{

        padding:
            60px
            20px;

    }


    .yc-commercial-before-after__header{

        margin-bottom:30px;

    }


    .yc-commercial-before-after__comparison{

        grid-template-columns:1fr;

        gap:20px;

        margin-bottom:24px;

    }


    .yc-commercial-before-after__media{

        aspect-ratio:16 / 11;

    }


    .yc-commercial-before-after__facts{

        grid-template-columns:1fr;

    }


    .yc-commercial-before-after__fact{

        padding:
            18px
            20px;

    }


    .yc-commercial-before-after__fact:not(:last-child){

        border-bottom:1px solid var(--yc-ba-border);

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .yc-commercial-before-after{

        padding-inline:18px;

    }


    .yc-commercial-before-after__title{

        font-size:clamp(2rem,9vw,2.7rem);

        max-width:none;

    }


    .yc-commercial-before-after__intro{

        font-size:.96rem;

        line-height:1.7;

    }


    .yc-commercial-before-after__badge{

        top:14px;

        left:14px;

        min-height:32px;

        padding:
            7px
            13px;

        font-size:.68rem;

        letter-spacing:.12em;

    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

    .yc-commercial-before-after__figure:hover{

        transform:none;

        box-shadow:var(--yc-ba-shadow-card);

    }


    .yc-commercial-before-after__figure:hover::after{

        transform:scaleX(0);

    }


    .yc-commercial-before-after__image{

        transform:none !important;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .yc-commercial-before-after *,
    .yc-commercial-before-after *::before,
    .yc-commercial-before-after *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.yc-commercial-before-after__figure{

    contain:layout paint;

}


.yc-commercial-before-after__image{

    will-change:transform;

}


/* ==========================================================
   ELEMENTOR / ASTRA SAFETY
========================================================== */

.yc-commercial-before-after img{

    display:block;

    width:100%;

    max-width:100%;

    height:100%;

}


.yc-commercial-before-after figure{

    width:100%;

}


.yc-commercial-before-after h2{

    color:var(--yc-ba-primary);

}


.yc-commercial-before-after p{

    color:inherit;

}


.yc-commercial-before-after dl,
.yc-commercial-before-after dt,
.yc-commercial-before-after dd{

    margin:0;

}


/* ==========================================================
   OVERFLOW PROTECTION
========================================================== */

.yc-commercial-before-after{

    overflow-x:clip;

}


.yc-commercial-before-after__comparison>*,
.yc-commercial-before-after__facts>*{

    min-width:0;

}


/* ==========================================================
   TEXT WRAPPING
========================================================== */

.yc-commercial-before-after h2,
.yc-commercial-before-after p,
.yc-commercial-before-after dd{

    overflow-wrap:break-word;

    text-wrap:pretty;

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

    .yc-commercial-before-after{

        background:#FFFFFF;

        box-shadow:none;

    }


    .yc-commercial-before-after__figure{

        box-shadow:none;

        break-inside:avoid;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-50d9f30 *//* ==========================================================
   YC COMMERCIAL COMPLIANCE
   PART 1
   Background • Overlay • Layout • Header
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.yc-commercial-compliance{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    padding:40px 24px;

    background-image:url("https://yourclad.co.uk/wp-content/uploads/2026/07/yourclad-commercial-industrial-yorkshire-uk.webp");

    background-size:cover;

    background-position:right center;

    background-repeat:no-repeat;

}


/* ==========================================================
   OVERLAY
========================================================== */

.yc-commercial-compliance__overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,

        rgba(6,8,23,.88) 0%,

        rgba(6,8,23,.72) 34%,

        rgba(6,8,23,.38) 58%,

        rgba(6,8,23,.10) 82%,

        rgba(6,8,23,0) 100%

    );

    z-index:0;

}


/* ==========================================================
   CONTAINER
========================================================== */

.yc-commercial-compliance__container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:0 auto;

}


/* ==========================================================
   CONTENT
========================================================== */

.yc-commercial-compliance__content{

    width:100%;

    max-width:600px;

}


/* ==========================================================
   HEADER
========================================================== */

.yc-commercial-compliance__header{

    margin-bottom:36px;

}


/* ==========================================================
   LABEL
========================================================== */

.yc-commercial-compliance__label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:#F66000;

    font-size:12px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.yc-commercial-compliance__label::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:#F66000;

    box-shadow:0 0 0 5px rgba(246,96,0,.14);

}


/* ==========================================================
   TITLE
========================================================== */

.yc-commercial-compliance__title{

    margin:0 0 20px;

    color:#FFFFFF;

    font-size:clamp(36px,4vw,54px);

    font-weight:800;

    line-height:1.12;

    letter-spacing:-.03em;

}

.yc-commercial-compliance__title::after{

    content:"";

    display:block;

    width:62px;

    height:4px;

    margin-top:22px;

    border-radius:8px;

    background:#F66000;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.yc-commercial-compliance__description{

    margin:0;

    color:rgba(255,255,255,.88);

    font-size:16px;

    line-height:1.9;

}


/* ==========================================================
   GRID
========================================================== */

.yc-commercial-compliance__grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

    list-style:none;

    margin:0;

    padding:0;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .yc-commercial-compliance{

        padding:90px 24px;

        background-position:center right;

    }

    .yc-commercial-compliance__content{

        max-width:640px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .yc-commercial-compliance{

        padding:72px 20px;

        background-position:center center;

    }

    .yc-commercial-compliance__content{

        max-width:100%;

    }

    .yc-commercial-compliance__grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   YC COMMERCIAL COMPLIANCE
   PART 2
   Cards • Icons • Hover • Responsive
========================================================== */


/* ==========================================================
   CARD
========================================================== */

.yc-commercial-compliance__card{

    display:flex;

    align-items:center;

    gap:18px;

    min-height:84px;

    padding:24px 26px;

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.yc-commercial-compliance__card:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.12);

    border-color:rgba(246,96,0,.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

}


/* ==========================================================
   ICON
========================================================== */

.yc-commercial-compliance__icon{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(246,96,0,.14);

    color:#F66000;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;

}


.yc-commercial-compliance__card:hover
.yc-commercial-compliance__icon{

    background:#F66000;

    color:#FFFFFF;

    transform:scale(1.06);

}


/* ==========================================================
   SVG
========================================================== */

.yc-commercial-compliance__icon svg{

    width:18px;

    height:18px;

    stroke:currentColor;

    stroke-width:2.8;

    fill:none;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ==========================================================
   TEXT
========================================================== */

.yc-commercial-compliance__text{

    color:#FFFFFF;

    font-size:16px;

    font-weight:600;

    line-height:1.5;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .yc-commercial-compliance__card{

        padding:22px;

        min-height:78px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .yc-commercial-compliance__card{

        padding:20px;

        min-height:72px;

        gap:16px;

    }

    .yc-commercial-compliance__icon{

        width:34px;

        height:34px;

    }

    .yc-commercial-compliance__icon svg{

        width:16px;

        height:16px;

    }

    .yc-commercial-compliance__text{

        font-size:15px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-783ae74 *//* ==========================================================
   YOURCLAD — COMMERCIAL CLIENTS
   BLOCK 3 — CSS PART 1
   Structure • Typography • Cards Stage • Main Image
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.yc-commercial-clients {
    position: relative;
    isolation: isolate;

    width: 100%;
    padding: 10px 24px;

    background: #f7f7f7;
    overflow: hidden;
}


/* ==========================================================
   CONTAINER
========================================================== */

.yc-commercial-clients__container {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.yc-commercial-clients__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(400px, 0.92fr);

    align-items: start;

    gap: clamp(56px, 6vw, 88px);
}


/* ==========================================================
   CONTENT COLUMN
========================================================== */

.yc-commercial-clients__content {
    position: relative;
    z-index: 2;

    width: 100%;
    min-width: 0;
}


/* ==========================================================
   HEADER
========================================================== */

.yc-commercial-clients__header {
    width: 100%;
    max-width: 680px;

    margin: 0 0 32px;
}


/* ==========================================================
   LABEL
========================================================== */

.yc-commercial-clients__label {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin: 0 0 20px;

    color: #f66000;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yc-commercial-clients__label::before {
    content: "";

    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #f66000;

    box-shadow:
        0 0 0 5px rgba(246, 96, 0, 0.11);
}


/* ==========================================================
   TITLE
========================================================== */

.yc-commercial-clients__title {
    margin: 0;

    color: #060817;

    font-family: "Poppins", sans-serif;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.08;

    letter-spacing: -0.04em;
    text-wrap: balance;
}

.yc-commercial-clients__title::after {
    content: "";

    display: block;

    width: 68px;
    height: 4px;

    margin-top: 24px;

    border-radius: 999px;

    background: #f66000;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.yc-commercial-clients__description {
    max-width: 650px;

    margin: 26px 0 0;

    color: #5d626e;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
}


/* ==========================================================
   INTRO
========================================================== */

.yc-commercial-clients__intro {
    margin: 0 0 20px;

    color: #060817;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}


/* ==========================================================
   CARDS STAGE
   Background image sits behind both client cards
========================================================== */

.yc-commercial-clients__cards-stage {
    position: relative;
    isolation: isolate;

    width: 100%;

    min-height: 420px;

    padding: 28px;

    border-radius: 26px;

    background: #060817;

    overflow: hidden;

    box-shadow:
        0 24px 60px rgba(6, 8, 23, 0.13);
}


/* ==========================================================
   CARDS BACKGROUND
========================================================== */

.yc-commercial-clients__cards-background {
    position: absolute;
    inset: 0;
    z-index: -3;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.yc-commercial-clients__cards-background-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.025);

    filter:
        saturate(0.82)
        contrast(1.04);

    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.yc-commercial-clients__cards-stage:hover
.yc-commercial-clients__cards-background-image {
    transform: scale(1.06);

    filter:
        saturate(0.9)
        contrast(1.08);
}


/* ==========================================================
   CARDS BACKGROUND OVERLAY
========================================================== */

.yc-commercial-clients__cards-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(6, 8, 23, 0.9) 0%,
            rgba(6, 8, 23, 0.74) 48%,
            rgba(6, 8, 23, 0.82) 100%
        );
}

.yc-commercial-clients__cards-stage::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   GROUPS GRID
========================================================== */

.yc-commercial-clients__groups {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: stretch;

    gap: 18px;

    width: 100%;
}


/* ==========================================================
   CLIENT CARD — BASE
========================================================== */

.yc-commercial-clients__group {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    padding: 26px 24px;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 14px 35px rgba(6, 8, 23, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.yc-commercial-clients__group:hover {
    transform: translateY(-5px);

    border-color: rgba(246, 96, 0, 0.25);

    background: #ffffff;

    box-shadow:
        0 22px 48px rgba(6, 8, 23, 0.22);
}


/* ==========================================================
   GROUP HEADER
========================================================== */

.yc-commercial-clients__group-header {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0 0 22px;
}


/* ==========================================================
   GROUP ICON
========================================================== */

.yc-commercial-clients__group-icon {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(246, 96, 0, 0.11);
    color: #f66000;

    box-shadow:
        inset 0 0 0 1px rgba(246, 96, 0, 0.08);
}

.yc-commercial-clients__group-icon svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   GROUP TITLE
========================================================== */

.yc-commercial-clients__group-title {
    margin: 0;

    color: #060817;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;

    letter-spacing: -0.02em;
}


/* ==========================================================
   VISUAL COLUMN
========================================================== */

.yc-commercial-clients__visual {
    position: relative;
    z-index: 1;

    width: 100%;
    min-width: 0;

    padding: 8px 0 28px;
}


/* ==========================================================
   MAIN MEDIA
========================================================== */

.yc-commercial-clients__media {
    position: relative;
    z-index: 2;

    width: 100%;

    margin: 0;
}


/* ==========================================================
   MAIN IMAGE FRAME
========================================================== */

.yc-commercial-clients__image-frame {
    position: relative;

    width: 100%;
    min-height: 780px;

    padding: 8px;

    border-radius: 30px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 38px 90px rgba(6, 8, 23, 0.18);
}


/* ==========================================================
   MAIN IMAGE
========================================================== */

.yc-commercial-clients__image {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 764px;

    border-radius: 23px;

    object-fit: cover;
    object-position: center;

    background:
        linear-gradient(
            145deg,
            #eceef1,
            #dfe2e7
        );

    transition:
        transform 0.75s ease,
        filter 0.75s ease;
}

.yc-commercial-clients__image-frame:hover
.yc-commercial-clients__image {
    transform: scale(1.035);
}


/* ==========================================================
   IMAGE PLACEHOLDER SUPPORT
   Visible when the image URL is missing or still temporary
========================================================== */

.yc-commercial-clients__image-frame::before {
    content: "";

    position: absolute;
    inset: 8px;
    z-index: 0;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #eef0f3 0%,
            #e3e6ea 100%
        );
}

.yc-commercial-clients__image {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   DECORATIVE IMAGE ACCENT
========================================================== */

.yc-commercial-clients__media-accent {
    position: absolute;
    right: -22px;
    bottom: 0;
    z-index: 0;

    width: 68%;
    height: 72%;

    border-radius: 30px;

    background: #f66000;

    opacity: 0.12;

    transform: translate(0, 4px);
}


/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yc-commercial-clients__cards-background-image,
    .yc-commercial-clients__group,
    .yc-commercial-clients__image {
        transition: none;
    }

    .yc-commercial-clients__cards-stage:hover
    .yc-commercial-clients__cards-background-image,
    .yc-commercial-clients__group:hover,
    .yc-commercial-clients__image-frame:hover
    .yc-commercial-clients__image {
        transform: none;
    }

}
/* ==========================================================
   YOURCLAD — COMMERCIAL CLIENTS
   BLOCK 3 — CSS PART 2
   Lists • CTA • Responsive • Elementor
========================================================== */


/* ==========================================================
   LIST
========================================================== */

.yc-commercial-clients__list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:0;

    padding:0;

    list-style:none;

}


/* ==========================================================
   LIST ITEM
========================================================== */

.yc-commercial-clients__item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    transition:
        transform .30s ease,
        color .30s ease;

}

.yc-commercial-clients__item:hover{

    transform:translateX(6px);

}


/* ==========================================================
   CHECK ICON
========================================================== */

.yc-commercial-clients__icon{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    margin-top:1px;

    border-radius:50%;

    background:rgba(246,96,0,.10);

    color:#F66000;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;

}

.yc-commercial-clients__item:hover
.yc-commercial-clients__icon{

    background:#F66000;

    color:#FFFFFF;

    transform:scale(1.08);

}

.yc-commercial-clients__icon svg{

    width:14px;

    height:14px;

    fill:none;

    stroke:currentColor;

    stroke-width:2.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ==========================================================
   ITEM TEXT
========================================================== */

.yc-commercial-clients__item-text{

    color:#313744;

    font-family:"Poppins",sans-serif;

    font-size:15px;

    font-weight:500;

    line-height:1.65;

}


/* ==========================================================
   CTA
========================================================== */

.yc-commercial-clients__link{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:34px;

    color:#F66000;

    font-family:"Poppins",sans-serif;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:
        gap .30s ease,
        color .30s ease;

}

.yc-commercial-clients__link:hover{

    gap:20px;

    color:#d95000;

}

.yc-commercial-clients__link-icon{

    width:22px;

    height:22px;

    fill:none;

    stroke:currentColor;

    stroke-width:2.3;

    stroke-linecap:round;

    stroke-linejoin:round;

    transition:transform .30s ease;

}

.yc-commercial-clients__link:hover
.yc-commercial-clients__link-icon{

    transform:translateX(6px);

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.yc-commercial-clients__link:focus-visible{

    outline:3px solid rgba(246,96,0,.35);

    outline-offset:6px;

    border-radius:8px;

}

.yc-commercial-clients__group:focus-within{

    border-color:#F66000;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .yc-commercial-clients{

        padding:96px 24px;

    }

    .yc-commercial-clients__layout{

        grid-template-columns:1fr;

        gap:64px;

    }

    .yc-commercial-clients__header{

        max-width:none;

    }

    .yc-commercial-clients__cards-stage{

        min-height:auto;

        padding:24px;

    }

    .yc-commercial-clients__groups{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .yc-commercial-clients__visual{

        max-width:720px;

        margin:0 auto;

        padding:0;

    }

    .yc-commercial-clients__image-frame{

        min-height:640px;

    }

    .yc-commercial-clients__image{

        min-height:624px;

    }

    .yc-commercial-clients__media-accent{

        width:60%;

        height:68%;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .yc-commercial-clients{

        padding:72px 20px;

    }

    .yc-commercial-clients__layout{

        gap:48px;

    }

    .yc-commercial-clients__title{

        font-size:34px;

    }

    .yc-commercial-clients__description{

        font-size:15px;

        line-height:1.8;

    }

    .yc-commercial-clients__intro{

        font-size:16px;

    }

    .yc-commercial-clients__cards-stage{

        padding:18px;

        border-radius:20px;

    }

    .yc-commercial-clients__groups{

        grid-template-columns:1fr;

        gap:18px;

    }

    .yc-commercial-clients__group{

        padding:22px 18px;

    }

    .yc-commercial-clients__group-header{

        margin-bottom:18px;

    }

    .yc-commercial-clients__group-title{

        font-size:17px;

    }

    .yc-commercial-clients__item{

        gap:12px;

    }

    .yc-commercial-clients__item-text{

        font-size:14px;

        line-height:1.6;

    }

    .yc-commercial-clients__icon{

        width:26px;

        height:26px;

    }

    .yc-commercial-clients__link{

        margin-top:28px;

        font-size:16px;

    }

    .yc-commercial-clients__image-frame{

        min-height:440px;

        padding:6px;

        border-radius:22px;

    }

    .yc-commercial-clients__image{

        min-height:428px;

        border-radius:16px;

    }

    .yc-commercial-clients__media-accent{

        display:none;

    }

}


/* ==========================================================
   ELEMENTOR FIXES
========================================================== */

.yc-commercial-clients *{

    box-sizing:border-box;

}

.yc-commercial-clients img{

    max-width:100%;

    display:block;

}

.yc-commercial-clients svg{

    flex-shrink:0;

}

.yc-commercial-clients p:last-child{

    margin-bottom:0;

}

.yc-commercial-clients figure{

    margin:0;

}

.yc-commercial-clients ul{

    margin:0;

    padding:0;

}

.yc-commercial-clients a{

    -webkit-tap-highlight-color:transparent;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b23824 *//* ==========================================================
   YOURCLAD — COMMERCIAL PROCESS
   BLOCK 4 — CSS V2 — PART 1A
   Structure • Background • Header • Timeline • Steps Grid
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.yc-commercial-process {
    position: relative;
    isolation: isolate;

    width: 100%;
    padding: 40px 24px;

    background: #060817;
    overflow: hidden;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.yc-commercial-process__background {
    position: absolute;
    inset: 0;
    z-index: -4;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.yc-commercial-process__background-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        brightness(0.26)
        saturate(0.78)
        contrast(1.06);

    transform: scale(1.035);

    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.yc-commercial-process:hover
.yc-commercial-process__background-image {
    transform: scale(1.065);
}


/* ==========================================================
   OVERLAY
========================================================== */

.yc-commercial-process__overlay {
    position: absolute;
    inset: 0;
    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(6, 8, 23, 0.95) 0%,
            rgba(6, 8, 23, 0.84) 46%,
            rgba(6, 8, 23, 0.93) 100%
        );
}


/* ==========================================================
   PATTERN
========================================================== */

.yc-commercial-process__pattern {
    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.9) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* ==========================================================
   SECTION DECORATIVE GLOW
========================================================== */

.yc-commercial-process::before {
    content: "";

    position: absolute;
    top: -180px;
    right: -140px;
    z-index: -1;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(246, 96, 0, 0.13) 0%,
            rgba(246, 96, 0, 0) 70%
        );

    pointer-events: none;
}


/* ==========================================================
   CONTAINER
========================================================== */

.yc-commercial-process__container {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.yc-commercial-process__header {
    width: 100%;

    margin: 0 0 82px;
}


/* ==========================================================
   LABEL
========================================================== */

.yc-commercial-process__label {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin: 0 0 20px;

    color: #f66000;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.yc-commercial-process__label::before {
    content: "";

    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #f66000;

    box-shadow:
        0 0 0 5px rgba(246, 96, 0, 0.12);
}


/* ==========================================================
   HEADING LAYOUT
========================================================== */

.yc-commercial-process__heading-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, 0.88fr);

    align-items: end;

    gap: clamp(44px, 6vw, 76px);
}


/* ==========================================================
   TITLE
========================================================== */

.yc-commercial-process__title {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: clamp(40px, 4.4vw, 60px);
    font-weight: 800;
    line-height: 1.07;

    letter-spacing: -0.045em;
    text-wrap: balance;
}

.yc-commercial-process__title::after {
    content: "";

    display: block;

    width: 74px;
    height: 4px;

    margin-top: 26px;

    border-radius: 999px;

    background: #f66000;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.yc-commercial-process__description {
    max-width: 520px;

    margin: 0 0 2px;

    color: rgba(255, 255, 255, 0.76);

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}


/* ==========================================================
   TIMELINE WRAPPER
========================================================== */

.yc-commercial-process__timeline {
    position: relative;

    width: 100%;
}


/* ==========================================================
   CONTINUOUS TRACK
========================================================== */

.yc-commercial-process__track {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 0;

    width: 100%;
    height: 24px;

    pointer-events: none;
}

.yc-commercial-process__track-line {
    position: absolute;
    top: 50%;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(246, 96, 0, 0.18) 0%,
            rgba(246, 96, 0, 0.9) 14%,
            rgba(246, 96, 0, 0.9) 86%,
            rgba(246, 96, 0, 0.18) 100%
        );

    box-shadow:
        0 0 18px rgba(246, 96, 0, 0.18);

    transform: translateY(-50%);
}


/* ==========================================================
   TRACK END CAPS
========================================================== */

.yc-commercial-process__track::before,
.yc-commercial-process__track::after {
    content: "";

    position: absolute;
    top: 50%;
    z-index: 1;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f66000;

    box-shadow:
        0 0 0 5px rgba(246, 96, 0, 0.1);

    transform: translateY(-50%);
}

.yc-commercial-process__track::before {
    left: 0;
}

.yc-commercial-process__track::after {
    right: 0;
}


/* ==========================================================
   STEPS GRID
========================================================== */

.yc-commercial-process__steps {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: clamp(24px, 2.8vw, 38px);

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================
   STEP
========================================================== */

.yc-commercial-process__step {
    position: relative;

    display: grid;
    grid-template-rows:
        42px
        minmax(0, 1fr);

    min-width: 0;
    height: 100%;
}


/* ==========================================================
   MARKER POSITIONING
========================================================== */

.yc-commercial-process__marker {
    position: relative;
    z-index: 3;

    align-self: start;
    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 7px solid #060817;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 1px rgba(246, 96, 0, 0.42),
        0 10px 24px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==========================================================
   MARKER CORE
========================================================== */

.yc-commercial-process__marker-core {
    display: block;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #f66000;

    box-shadow:
        0 0 0 5px rgba(246, 96, 0, 0.13);

    transition:
        transform 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}
/* ==========================================================
   CARD
========================================================== */

.yc-commercial-process__card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 420px;

    margin-top: 22px;
    padding: 36px 32px 34px;

    background: #ffffff;

    border: 1px solid rgba(6, 8, 23, 0.06);
    border-radius: 22px;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.14);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease;
}


/* ==========================================================
   CARD HEADER
========================================================== */

.yc-commercial-process__card-header {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 24px;
}


/* ==========================================================
   STEP NUMBER
========================================================== */

.yc-commercial-process__number {
    flex: 0 0 auto;

    color: #f66000;

    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.05em;
}


/* ==========================================================
   NUMBER DIVIDER
========================================================== */

.yc-commercial-process__number-line {
    flex: 1;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(246, 96, 0, 0.95) 0%,
            rgba(246, 96, 0, 0.18) 100%
        );
}


/* ==========================================================
   STEP TITLE
========================================================== */

.yc-commercial-process__step-title {
    margin: 0 0 18px;

    color: #060817;

    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.28;

    text-wrap: balance;
}


/* ==========================================================
   STEP DESCRIPTION
========================================================== */

.yc-commercial-process__step-description {
    margin: 0 0 28px;

    color: rgba(6, 8, 23, 0.72);

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}


/* ==========================================================
   FLEX SPACING
========================================================== */

.yc-commercial-process__step-description:last-child {
    margin-bottom: 0;
}
/* ==========================================================
   CARD HOVER
========================================================== */

.yc-commercial-process__card:hover {
    transform: translateY(-10px);

    border-color: rgba(246, 96, 0, 0.22);

    background: #ffffff;

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.18);
}


/* ==========================================================
   STEP HOVER
========================================================== */

.yc-commercial-process__step:hover .yc-commercial-process__card {
    transform: translateY(-10px);

    border-color: rgba(246, 96, 0, 0.22);

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.18);
}


/* ==========================================================
   MARKER HOVER
========================================================== */

.yc-commercial-process__step:hover
.yc-commercial-process__marker {

    transform:
        translateY(-3px)
        scale(1.08);

    background: #ffffff;

    box-shadow:
        0 0 0 2px rgba(246,96,0,.18),
        0 18px 36px rgba(0,0,0,.30);
}


.yc-commercial-process__step:hover
.yc-commercial-process__marker-core {

    transform: scale(1.25);

    background: #f66000;

    box-shadow:
        0 0 0 7px rgba(246,96,0,.18);
}


/* ==========================================================
   NUMBER HOVER
========================================================== */

.yc-commercial-process__step:hover
.yc-commercial-process__number {

    color: #f66000;
}


.yc-commercial-process__step:hover
.yc-commercial-process__number-line {

    background:
        linear-gradient(
            90deg,
            #f66000 0%,
            rgba(246,96,0,.35) 100%
        );
}


/* ==========================================================
   TITLE HOVER
========================================================== */

.yc-commercial-process__step:hover
.yc-commercial-process__step-title {

    color: #060817;
}


/* ==========================================================
   CARD CONTENT SPACING
========================================================== */

.yc-commercial-process__card > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   PERFORMANCE
========================================================== */

.yc-commercial-process__card,
.yc-commercial-process__marker,
.yc-commercial-process__marker-core,
.yc-commercial-process__number-line {

    will-change:
        transform,
        box-shadow;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yc-commercial-process__card,
    .yc-commercial-process__marker,
    .yc-commercial-process__marker-core,
    .yc-commercial-process__number-line {

        transition: none;
    }

    .yc-commercial-process__step:hover
    .yc-commercial-process__card,

    .yc-commercial-process__card:hover {

        transform: none;
    }

    .yc-commercial-process__step:hover
    .yc-commercial-process__marker {

        transform: none;
    }

    .yc-commercial-process__step:hover
    .yc-commercial-process__marker-core {

        transform: none;
    }

}


/* ==========================================================
   ELEMENTOR FIXES
========================================================== */

.elementor
.yc-commercial-process
.yc-commercial-process__card {

    box-sizing: border-box;
}

.elementor
.yc-commercial-process
.yc-commercial-process__step {

    min-width: 0;
}

.elementor
.yc-commercial-process
.yc-commercial-process__steps {

    width: 100%;
}

.elementor
.yc-commercial-process
.yc-commercial-process__timeline {

    overflow: visible;
}
/* ==========================================================
   YOURCLAD — COMMERCIAL PROCESS
   BLOCK 4 — CSS V2 — PART 2
   Lists • CTA • Accessibility • Responsive
========================================================== */


/* ==========================================================
   DETAILS LIST
========================================================== */

.yc-commercial-process__details {
    display: flex;
    flex-direction: column;

    gap: 13px;

    width: 100%;

    margin: auto 0 0;
    padding: 24px 0 0;

    border-top: 1px solid rgba(6, 8, 23, 0.09);

    list-style: none;
}


/* ==========================================================
   DETAIL ITEM
========================================================== */

.yc-commercial-process__detail {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-height: 24px;
    padding-left: 30px;

    color: rgba(6, 8, 23, 0.78);

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}


/* ==========================================================
   DETAIL CHECKMARK
========================================================== */

.yc-commercial-process__detail::before {
    content: "";

    position: absolute;
    top: 2px;
    left: 0;

    width: 20px;
    height: 20px;

    border: 1px solid rgba(246, 96, 0, 0.25);
    border-radius: 50%;

    background:
        rgba(246, 96, 0, 0.08);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.yc-commercial-process__detail::after {
    content: "";

    position: absolute;
    top: 7px;
    left: 6px;

    width: 8px;
    height: 4px;

    border-left: 2px solid #f66000;
    border-bottom: 2px solid #f66000;

    transform: rotate(-45deg);
}


/* ==========================================================
   DETAIL HOVER
========================================================== */

.yc-commercial-process__step:hover
.yc-commercial-process__detail::before {
    border-color: rgba(246, 96, 0, 0.42);

    background:
        rgba(246, 96, 0, 0.13);

    transform: scale(1.06);
}


/* ==========================================================
   FOOTER / CTA WRAPPER
========================================================== */

.yc-commercial-process__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    width: 100%;

    margin-top: 64px;
    padding: 28px 32px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.16);
}


/* ==========================================================
   FOOTER TEXT
========================================================== */

.yc-commercial-process__footer-text {
    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
}


/* ==========================================================
   CTA LINK
========================================================== */

.yc-commercial-process__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex: 0 0 auto;

    min-height: 52px;
    padding: 14px 22px;

    border: 1px solid #f66000;
    border-radius: 999px;

    background: #f66000;

    color: #ffffff;
    text-decoration: none;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    box-shadow:
        0 12px 28px rgba(246, 96, 0, 0.24);

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================================
   CTA ICON
========================================================== */

.yc-commercial-process__link-icon {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 0.3s ease;
}


/* ==========================================================
   CTA HOVER
========================================================== */

.yc-commercial-process__link:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #060817;

    transform: translateY(-3px);

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.24);
}

.yc-commercial-process__link:hover
.yc-commercial-process__link-icon {
    transform: translateX(4px);
}


/* ==========================================================
   CTA FOCUS
========================================================== */

.yc-commercial-process__link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 4px;
}


/* ==========================================================
   LARGE DESKTOP REFINEMENT
========================================================== */

@media (min-width: 1281px) {

    .yc-commercial-process__card {
        padding-right: 34px;
        padding-left: 34px;
    }

}


/* ==========================================================
   SMALL DESKTOP / LARGE TABLET
========================================================== */

@media (max-width: 1180px) {

    .yc-commercial-process {
        padding-top: 104px;
        padding-bottom: 104px;
    }

    .yc-commercial-process__heading-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.8fr);

        gap: 42px;
    }

    .yc-commercial-process__steps {
        gap: 22px;
    }

    .yc-commercial-process__card {
        min-height: 440px;
        padding: 32px 26px 30px;
    }

    .yc-commercial-process__step-title {
        font-size: 21px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .yc-commercial-process {
        padding: 92px 24px;
    }

    .yc-commercial-process__header {
        margin-bottom: 64px;
    }

    .yc-commercial-process__heading-layout {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 26px;
    }

    .yc-commercial-process__description {
        max-width: 720px;
    }

    .yc-commercial-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 48px;
        column-gap: 28px;
    }

    .yc-commercial-process__track {
        display: none;
    }

    .yc-commercial-process__step {
        grid-template-rows:
            36px
            minmax(0, 1fr);
    }

    .yc-commercial-process__marker {
        width: 36px;
        height: 36px;

        border-width: 6px;
    }

    .yc-commercial-process__marker-core {
        width: 10px;
        height: 10px;
    }

    .yc-commercial-process__card {
        min-height: 390px;
        margin-top: 16px;
    }

    .yc-commercial-process__footer {
        margin-top: 52px;
    }

}


/* ==========================================================
   MOBILE LANDSCAPE / SMALL TABLET
========================================================== */

@media (max-width: 767px) {

    .yc-commercial-process {
        padding: 76px 20px;
    }

    .yc-commercial-process__header {
        margin-bottom: 48px;
    }

    .yc-commercial-process__label {
        margin-bottom: 16px;

        font-size: 11px;
    }

    .yc-commercial-process__title {
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.1;
    }

    .yc-commercial-process__title::after {
        width: 58px;
        height: 3px;

        margin-top: 20px;
    }

    .yc-commercial-process__description {
        font-size: 15px;
        line-height: 1.8;
    }

    .yc-commercial-process__steps {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .yc-commercial-process__step {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto;

        align-items: stretch;
    }

    .yc-commercial-process__step::before {
        content: "";

        position: absolute;
        top: 36px;
        bottom: -34px;
        left: 17px;

        width: 2px;

        background:
            linear-gradient(
                180deg,
                rgba(246, 96, 0, 0.85) 0%,
                rgba(246, 96, 0, 0.15) 100%
            );
    }

    .yc-commercial-process__step:last-child::before {
        display: none;
    }

    .yc-commercial-process__marker {
        grid-column: 1;
        grid-row: 1;

        align-self: start;
        justify-self: start;

        width: 36px;
        height: 36px;

        margin-top: 20px;
    }

    .yc-commercial-process__card {
        grid-column: 2;
        grid-row: 1;

        min-height: 0;

        margin-top: 0;
        padding: 30px 26px;

        border-radius: 18px;
    }

    .yc-commercial-process__card-header {
        margin-bottom: 20px;
    }

    .yc-commercial-process__number {
        font-size: 29px;
    }

    .yc-commercial-process__step-title {
        margin-bottom: 14px;

        font-size: 22px;
    }

    .yc-commercial-process__step-description {
        margin-bottom: 24px;

        font-size: 14px;
    }

    .yc-commercial-process__details {
        padding-top: 21px;
    }

    .yc-commercial-process__footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        margin-top: 46px;
        padding: 26px;

        border-radius: 16px;
    }

    .yc-commercial-process__footer-text {
        font-size: 16px;
    }

    .yc-commercial-process__link {
        width: 100%;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .yc-commercial-process {
        padding: 68px 16px;
    }

    .yc-commercial-process__title {
        font-size: 32px;
        letter-spacing: -0.035em;
    }

    .yc-commercial-process__description {
        font-size: 14px;
    }

    .yc-commercial-process__steps {
        gap: 30px;
    }

    .yc-commercial-process__step {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .yc-commercial-process__step::before {
        top: 32px;
        bottom: -30px;
        left: 14px;
    }

    .yc-commercial-process__marker {
        width: 30px;
        height: 30px;

        margin-top: 18px;

        border-width: 5px;
    }

    .yc-commercial-process__marker-core {
        width: 8px;
        height: 8px;

        box-shadow:
            0 0 0 4px rgba(246, 96, 0, 0.13);
    }

    .yc-commercial-process__card {
        padding: 26px 21px 25px;
    }

    .yc-commercial-process__card-header {
        gap: 12px;

        margin-bottom: 18px;
    }

    .yc-commercial-process__number {
        font-size: 27px;
    }

    .yc-commercial-process__step-title {
        font-size: 20px;
    }

    .yc-commercial-process__detail {
        padding-left: 28px;

        font-size: 13px;
    }

    .yc-commercial-process__footer {
        padding: 23px 21px;
    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .yc-commercial-process__step:hover
    .yc-commercial-process__card,

    .yc-commercial-process__card:hover {
        transform: none;
    }

    .yc-commercial-process__step:hover
    .yc-commercial-process__marker {
        transform: none;
    }

    .yc-commercial-process__link:hover {
        transform: none;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yc-commercial-process__background-image,
    .yc-commercial-process__detail::before,
    .yc-commercial-process__link,
    .yc-commercial-process__link-icon {
        transition: none;
    }

    .yc-commercial-process:hover
    .yc-commercial-process__background-image {
        transform: scale(1.035);
    }

    .yc-commercial-process__link:hover,
    .yc-commercial-process__link:hover
    .yc-commercial-process__link-icon {
        transform: none;
    }

}


/* ==========================================================
   ELEMENTOR FINAL FIXES
========================================================== */

.elementor
.yc-commercial-process
.yc-commercial-process__details {
    margin-left: 0;
    padding-left: 0;
}

.elementor
.yc-commercial-process
.yc-commercial-process__detail {
    list-style: none;
}

.elementor
.yc-commercial-process
.yc-commercial-process__link {
    text-decoration: none;
}

.elementor
.yc-commercial-process
.yc-commercial-process__link:hover {
    text-decoration: none;
}

.elementor
.yc-commercial-process
.yc-commercial-process__link-icon {
    flex: 0 0 auto;
}

.elementor
.yc-commercial-process
.yc-commercial-process__footer-text,
.elementor
.yc-commercial-process
.yc-commercial-process__description,
.elementor
.yc-commercial-process
.yc-commercial-process__step-description {
    overflow-wrap: break-word;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6c00365 *//* ==========================================================
   YOURCLAD
   Commercial CTA
   Part 1 — Foundation

   Component Namespace:
   .yc-commercial-cta
========================================================== */


/* ==========================================================
   DESIGN TOKENS
========================================================== */

.yc-commercial-cta{

    /* Brand */

    --yc-cta-primary:#060817;
    --yc-cta-accent:#F66000;

    --yc-cta-text:#FFFFFF;
    --yc-cta-text-soft:rgba(255,255,255,.82);

    /* Surface */

    --yc-cta-border:rgba(255,255,255,.10);

    /* Typography */

    --yc-cta-font:Poppins,sans-serif;

    /* Radius */

    --yc-cta-radius:28px;

    /* Shadows */

    --yc-cta-shadow:
        0 24px 70px rgba(6,8,23,.20);

    /* Layout */

    --yc-cta-width:1200px;

    --yc-cta-padding:
        clamp(90px,10vw,140px);

}


/* ==========================================================
   ROOT
========================================================== */

.yc-commercial-cta{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:
        40px
        24px;

    isolation:isolate;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.yc-commercial-cta__background{

    position:absolute;

    inset:0;

    z-index:-3;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

}


/* ==========================================================
   OVERLAY
========================================================== */

.yc-commercial-cta__overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:

        linear-gradient(
            90deg,
            rgba(6,8,23,.52) 0%,
            rgba(6,8,23,.58) 45%,
            rgba(6,8,23,.48) 100%
        ),

        linear-gradient(
            180deg,
            rgba(6,8,23,.10) 0%,
            rgba(6,8,23,.34) 100%
        );

}


/* ==========================================================
   SUBTLE BRAND GLOW
========================================================== */

.yc-commercial-cta::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-160px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(246,96,0,.18) 0%,

            rgba(246,96,0,0) 72%

        );

    z-index:-1;

    pointer-events:none;

}


/* ==========================================================
   WRAPPER
========================================================== */

.yc-commercial-cta__wrap{

    width:100%;

    max-width:var(--yc-cta-width);

    margin-inline:auto;

}


/* ==========================================================
   CONTENT
========================================================== */

.yc-commercial-cta__content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:clamp(420px,48vw,560px);

    max-width:760px;

    margin-inline:auto;

    padding:

        var(--yc-cta-padding)

        clamp(24px,4vw,60px);

}


/* ==========================================================
   CONTENT LAYOUT
========================================================== */

.yc-commercial-cta__content>*{

    width:100%;

}


/* ==========================================================
   BOX MODEL
========================================================== */

.yc-commercial-cta,
.yc-commercial-cta *,
.yc-commercial-cta *::before,
.yc-commercial-cta *::after{

    box-sizing:border-box;

}
/* ==========================================================
   YOURCLAD
   Commercial CTA
   Part 2 — Typography & Content
========================================================== */


/* ==========================================================
   TYPOGRAPHY RESET
========================================================== */

.yc-commercial-cta h2,
.yc-commercial-cta p{

    margin:0;

}


/* ==========================================================
   EYEBROW
========================================================== */

.yc-commercial-cta__eyebrow{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    width:auto;

    margin-bottom:20px;

    color:var(--yc-cta-accent);

    font-family:var(--yc-cta-font);

    font-size:.76rem;

    font-weight:700;

    line-height:1.2;

    letter-spacing:.18em;

    text-transform:uppercase;

}


.yc-commercial-cta__eyebrow::before,
.yc-commercial-cta__eyebrow::after{

    content:"";

    flex:0 0 auto;

    width:28px;
    height:2px;

    border-radius:999px;

    background:currentColor;

}


/* ==========================================================
   TITLE
========================================================== */

.yc-commercial-cta__title{

    max-width:16ch;

    color:var(--yc-cta-text);

    font-family:var(--yc-cta-font);

    font-size:clamp(2.25rem,4.6vw,4rem);

    font-weight:800;

    line-height:1.04;

    letter-spacing:-.035em;

    text-wrap:balance;

}


/* ==========================================================
   SUPPORTING TEXT
========================================================== */

.yc-commercial-cta__text{

    max-width:62ch;

    margin-top:24px;

    color:var(--yc-cta-text-soft);

    font-family:var(--yc-cta-font);

    font-size:clamp(.98rem,1.25vw,1.08rem);

    font-weight:400;

    line-height:1.75;

    text-wrap:pretty;

}


/* ==========================================================
   BUTTON TYPOGRAPHY — BASE
========================================================== */

.yc-commercial-cta__button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    width:auto;

    margin-top:32px;

    color:#FFFFFF;

    font-family:var(--yc-cta-font);

    font-size:.92rem;

    font-weight:700;

    line-height:1.2;

    text-align:center;
    text-decoration:none;

    white-space:nowrap;

}


/* ==========================================================
   BUTTON LABEL
========================================================== */

.yc-commercial-cta__button span{

    display:block;

}


/* ==========================================================
   ICON BASE
========================================================== */

.yc-commercial-cta__button-icon{

    flex:0 0 auto;

    width:20px;
    height:20px;

}


/* ==========================================================
   ELEMENTOR / ASTRA TYPOGRAPHY PROTECTION
========================================================== */

.yc-commercial-cta
.yc-commercial-cta__title{

    color:var(--yc-cta-text);

}


.yc-commercial-cta
.yc-commercial-cta__text{

    color:var(--yc-cta-text-soft);

}


.yc-commercial-cta
.yc-commercial-cta__eyebrow{

    color:var(--yc-cta-accent);

}


.yc-commercial-cta
.yc-commercial-cta__button{

    color:#FFFFFF;

    text-decoration:none;

}


/* ==========================================================
   CONTENT RHYTHM
========================================================== */

.yc-commercial-cta__title,
.yc-commercial-cta__text{

    margin-inline:auto;

}
/* ==========================================================
   YOURCLAD
   Commercial CTA
   Part 3 — Components & Interactions
========================================================== */


/* ==========================================================
   CTA BUTTON
========================================================== */

.yc-commercial-cta__button{

    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    padding:
        18px
        34px;

    border-radius:999px;

    background:var(--yc-cta-accent);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 14px 35px rgba(246,96,0,.28),

        0 4px 14px rgba(6,8,23,.22);

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}


/* ==========================================================
   BUTTON SHINE
========================================================== */

.yc-commercial-cta__button::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.22) 48%,
            transparent 75%
        );

    transform:translateX(-150%);

    transition:transform .75s ease;

}


/* ==========================================================
   BUTTON ICON
========================================================== */

.yc-commercial-cta__button-icon{

    transition:

        transform .30s ease;

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.yc-commercial-cta__button:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 22px 48px rgba(246,96,0,.36),

        0 10px 24px rgba(6,8,23,.30);

    border-color:

        rgba(255,255,255,.18);

}


.yc-commercial-cta__button:hover::before{

    transform:translateX(160%);

}


.yc-commercial-cta__button:hover
.yc-commercial-cta__button-icon{

    transform:

        translateX(5px);

}


/* ==========================================================
   BUTTON ACTIVE
========================================================== */

.yc-commercial-cta__button:active{

    transform:

        translateY(-1px)
        scale(.985);

}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
========================================================== */

.yc-commercial-cta__button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(255,255,255,.16),

        0 0 0 8px rgba(246,96,0,.32),

        0 18px 42px rgba(246,96,0,.30);

}


/* ==========================================================
   CONTENT ENTRANCE
========================================================== */

.yc-commercial-cta__content{

    position:relative;

    z-index:2;

}


/* ==========================================================
   BACKGROUND DEPTH
========================================================== */

.yc-commercial-cta__background{

    transition:

        transform .9s ease;

}


.yc-commercial-cta:hover
.yc-commercial-cta__background{

    transform:scale(1.03);

}


/* ==========================================================
   OVERLAY DEPTH
========================================================== */

.yc-commercial-cta__overlay{

    transition:

        opacity .45s ease;

}


.yc-commercial-cta:hover
.yc-commercial-cta__overlay{

    opacity:.92;

}


/* ==========================================================
   TEXT MICRO INTERACTION
========================================================== */

.yc-commercial-cta__title,
.yc-commercial-cta__text,
.yc-commercial-cta__eyebrow{

    transition:

        transform .35s ease,

        opacity .35s ease;

}


.yc-commercial-cta:hover
.yc-commercial-cta__title{

    transform:translateY(-2px);

}


.yc-commercial-cta:hover
.yc-commercial-cta__text{

    transform:translateY(-2px);

}


/* ==========================================================
   IMAGE RENDERING
========================================================== */

.yc-commercial-cta__background{

    backface-visibility:hidden;

    transform-origin:center;

    will-change:transform;

}


/* ==========================================================
   SELECTION
========================================================== */

.yc-commercial-cta ::selection{

    background:rgba(246,96,0,.35);

    color:#FFFFFF;

}
/* ==========================================================
   YOURCLAD
   Commercial CTA
   Part 4 — Responsive, Accessibility & Elementor
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1440px){

    .yc-commercial-cta__content{

        min-height:560px;

    }

}


/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (max-width:1024px){

    .yc-commercial-cta{

        padding:
            32px
            20px;

    }


    .yc-commercial-cta__content{

        min-height:480px;

        max-width:720px;

        padding:
            clamp(72px,9vw,110px)
            clamp(24px,5vw,48px);

    }


    .yc-commercial-cta__title{

        max-width:17ch;

        font-size:clamp(2.15rem,5vw,3.35rem);

    }


    .yc-commercial-cta__text{

        max-width:58ch;

    }

}


/* ==========================================================
   TABLET PORTRAIT
========================================================== */

@media (max-width:767px){

    .yc-commercial-cta{

        padding:
            24px
            16px;

    }


    .yc-commercial-cta__background{

        background-position:center center;

    }


    .yc-commercial-cta__overlay{

        background:

            linear-gradient(
                180deg,
                rgba(6,8,23,.82) 0%,
                rgba(6,8,23,.84) 48%,
                rgba(6,8,23,.90) 100%
            ),

            linear-gradient(
                90deg,
                rgba(6,8,23,.36) 0%,
                rgba(6,8,23,.14) 100%
            );

    }


    .yc-commercial-cta__content{

        min-height:440px;

        max-width:620px;

        padding:
            72px
            24px;

    }


    .yc-commercial-cta__eyebrow{

        gap:10px;

        margin-bottom:18px;

        font-size:.70rem;

        letter-spacing:.15em;

    }


    .yc-commercial-cta__eyebrow::before,
    .yc-commercial-cta__eyebrow::after{

        width:22px;

    }


    .yc-commercial-cta__title{

        max-width:18ch;

        font-size:clamp(2rem,8vw,2.85rem);

        line-height:1.08;

    }


    .yc-commercial-cta__text{

        max-width:48ch;

        margin-top:20px;

        font-size:.98rem;

        line-height:1.7;

    }


    .yc-commercial-cta__button{

        margin-top:28px;

        padding:
            17px
            28px;

        font-size:.90rem;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:480px){

    .yc-commercial-cta{

        padding:
            16px
            12px;

    }


    .yc-commercial-cta__content{

        min-height:410px;

        padding:
            64px
            18px;

    }


    .yc-commercial-cta__eyebrow{

        margin-bottom:16px;

        font-size:.66rem;

        letter-spacing:.13em;

    }


    .yc-commercial-cta__eyebrow::before,
    .yc-commercial-cta__eyebrow::after{

        width:18px;

    }


    .yc-commercial-cta__title{

        max-width:100%;

        font-size:clamp(1.85rem,9.2vw,2.45rem);

        letter-spacing:-.025em;

    }


    .yc-commercial-cta__text{

        max-width:34ch;

        margin-top:18px;

        font-size:.94rem;

        line-height:1.65;

    }


    .yc-commercial-cta__button{

        width:100%;

        max-width:340px;

        margin-top:26px;

        padding:
            16px
            22px;

        white-space:normal;

    }


    .yc-commercial-cta__button span{

        text-align:center;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:360px){

    .yc-commercial-cta__content{

        min-height:390px;

        padding:
            56px
            14px;

    }


    .yc-commercial-cta__eyebrow{

        gap:8px;

        font-size:.62rem;

        letter-spacing:.11em;

    }


    .yc-commercial-cta__eyebrow::before,
    .yc-commercial-cta__eyebrow::after{

        width:14px;

    }


    .yc-commercial-cta__title{

        font-size:1.72rem;

    }


    .yc-commercial-cta__text{

        font-size:.90rem;

    }


    .yc-commercial-cta__button{

        padding:
            15px
            18px;

        font-size:.86rem;

    }


    .yc-commercial-cta__button-icon{

        width:18px;
        height:18px;

    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

    .yc-commercial-cta:hover
    .yc-commercial-cta__background{

        transform:none;

    }


    .yc-commercial-cta:hover
    .yc-commercial-cta__overlay{

        opacity:1;

    }


    .yc-commercial-cta:hover
    .yc-commercial-cta__title,
    .yc-commercial-cta:hover
    .yc-commercial-cta__text{

        transform:none;

    }


    .yc-commercial-cta__button:hover{

        transform:none;

    }


    .yc-commercial-cta__button:hover::before{

        transform:translateX(-150%);

    }


    .yc-commercial-cta__button:hover
    .yc-commercial-cta__button-icon{

        transform:none;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .yc-commercial-cta__background,
    .yc-commercial-cta__overlay,
    .yc-commercial-cta__title,
    .yc-commercial-cta__text,
    .yc-commercial-cta__eyebrow,
    .yc-commercial-cta__button,
    .yc-commercial-cta__button::before,
    .yc-commercial-cta__button-icon{

        animation:none !important;

        transition:none !important;

    }


    .yc-commercial-cta:hover
    .yc-commercial-cta__background,

    .yc-commercial-cta:hover
    .yc-commercial-cta__title,

    .yc-commercial-cta:hover
    .yc-commercial-cta__text,

    .yc-commercial-cta__button:hover,

    .yc-commercial-cta__button:active{

        transform:none !important;

    }

}


/* ==========================================================
   HIGH CONTRAST / FORCED COLOURS
========================================================== */

@media (forced-colors:active){

    .yc-commercial-cta__button{

        border:2px solid ButtonText;

        background:ButtonFace;

        color:ButtonText;

        box-shadow:none;

    }


    .yc-commercial-cta__eyebrow{

        color:CanvasText;

    }


    .yc-commercial-cta__title,
    .yc-commercial-cta__text{

        color:CanvasText;

    }

}


/* ==========================================================
   ELEMENTOR WRAPPER PROTECTION
========================================================== */

.elementor-widget-html
.yc-commercial-cta{

    width:100%;

}


.elementor-widget-html
.yc-commercial-cta__wrap{

    max-width:var(--yc-cta-width);

}


.elementor-widget-html
.yc-commercial-cta__content{

    width:100%;

}


/* ==========================================================
   ELEMENTOR SPACING RESET
========================================================== */

.elementor-widget-html
.yc-commercial-cta p:last-child{

    margin-bottom:0;

}


.elementor-widget-html
.yc-commercial-cta a{

    text-decoration:none;

}


/* ==========================================================
   ASTRA LINK PROTECTION
========================================================== */

.ast-separate-container
.yc-commercial-cta__button,

.ast-page-builder-template
.yc-commercial-cta__button{

    color:#FFFFFF;

    text-decoration:none;

}


.ast-separate-container
.yc-commercial-cta__button:hover,

.ast-page-builder-template
.yc-commercial-cta__button:hover{

    color:#FFFFFF;

}


/* ==========================================================
   IMAGE PERFORMANCE
========================================================== */

.yc-commercial-cta__background{

    contain:paint;

}


/* ==========================================================
   SAFE OVERFLOW
========================================================== */

.yc-commercial-cta,
.yc-commercial-cta__wrap,
.yc-commercial-cta__content{

    max-width:100%;

}


/* ==========================================================
   LONG TEXT PROTECTION
========================================================== */

.yc-commercial-cta__title,
.yc-commercial-cta__text,
.yc-commercial-cta__button{

    overflow-wrap:anywhere;

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

    .yc-commercial-cta{

        padding:24px;

        background:#FFFFFF;

        color:#060817;

    }


    .yc-commercial-cta__background,
    .yc-commercial-cta__overlay,
    .yc-commercial-cta::before{

        display:none;

    }


    .yc-commercial-cta__content{

        min-height:auto;

        padding:0;

    }


    .yc-commercial-cta__title,
    .yc-commercial-cta__text,
    .yc-commercial-cta__eyebrow{

        color:#060817;

    }


    .yc-commercial-cta__button{

        border:1px solid #060817;

        background:transparent;

        color:#060817;

        box-shadow:none;

    }

}/* End custom CSS */
/* Start custom CSS *//* =========================================================
YourClad — Home Hero (Premium + SEO-first) — NO CHIPS
Scope: .yc-hero only
========================================================= */

.yc-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 18px;
  overflow:hidden;
  font-family:Poppins, Montserrat, Arial, sans-serif;
  background:#060817;
}

/* Kill theme link styles (no blue / no visited purple) */
.yc-hero a,
.yc-hero a:visited,
.yc-hero a:hover,
.yc-hero a:active{
  color:inherit !important;
  text-decoration:none !important;
}

.yc-hero a:focus{ outline:none; }
.yc-hero a:focus-visible{
  outline:3px solid rgba(246,96,0,0.60);
  outline-offset:3px;
  border-radius:999px;
}

/* Background image layer */
.yc-hero__bg{
  position:absolute;
  inset:0;
  background-image:url('https://yourclad.co.uk/wp-content/uploads/2025/10/yourclad-uk-homepage-hero-1.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.04);
  filter:saturate(1.02) contrast(1.02);
}

/* “Parallax-ish” (desktop only; iOS hates fixed backgrounds) */
@media (min-width:1025px){
  .yc-hero__bg{ background-attachment:fixed; }
}
@media (max-width:1024px){
  .yc-hero__bg{ background-attachment:scroll; }
}

/* Overlay for readability + brand glow */
.yc-hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      rgba(6,8,23,0.88) 0%,
      rgba(6,8,23,0.55) 45%,
      rgba(6,8,23,0.25) 100%
    ),
    radial-gradient(70% 60% at 50% 35%,
      rgba(246,96,0,0.22) 0%,
      rgba(246,96,0,0.00) 62%
    );
}

/* Content container */
.yc-hero__wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:22px;
  align-items:center;
}

.yc-hero__card{
  border-radius:22px;
  padding:34px 30px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(6,8,23,0.35);
  animation:ycFadeUp .9s ease-out both;
}

/* Headline */
.yc-hero__h1{
  margin:0 0 10px;
  color:#fff;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.08;
  font-size:clamp(30px, 4.2vw, 56px);
  text-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.yc-hero__sub{
  margin:0 0 18px;
  color:rgba(255,255,255,0.88);
  font-size:clamp(15px, 1.35vw, 18px);
  line-height:1.65;
  max-width:60ch;
}

/* CTA row */
.yc-hero__ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.yc-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,0.16);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  will-change:transform;
  color:#fff !important;
}

.yc-hero__btn--primary{
  background:#F66000;
  border-color:rgba(246,96,0,0.65);
  box-shadow:0 18px 50px rgba(246,96,0,0.22);
}
.yc-hero__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 70px rgba(246,96,0,0.28);
  color:#fff !important;
}

.yc-hero__btn--ghost{
  background:rgba(246,96,0,0.14);
  border-color:rgba(246,96,0,0.40);
}
.yc-hero__btn--ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(246,96,0,0.55);
  background:rgba(246,96,0,0.18);
  color:#fff !important;
  box-shadow:0 22px 60px rgba(6,8,23,0.35);
}

.yc-hero__btn svg{ width:18px; height:18px; display:block; }

/* Proof chips */
.yc-hero__proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.yc-hero__proof li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(6,8,23,0.22);
  color:rgba(255,255,255,0.86);
  font-size:13px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.yc-hero__proof li:hover{
  transform:translateY(-2px);
  border-color:rgba(246,96,0,0.55);
  background:rgba(246,96,0,0.10);
  box-shadow:0 18px 55px rgba(6,8,23,0.32);
}

.yc-hero__tick{
  width:20px;
  height:20px;
  border-radius:8px;
  background:rgba(246,96,0,0.16);
  border:1px solid rgba(246,96,0,0.34);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#F66000;
}
.yc-hero__tick svg{ width:12px; height:12px; display:block; }

/* Right-side panel */
.yc-hero__side{
  border-radius:22px;
  padding:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(6,8,23,0.30);
  animation:ycFadeUp 1.05s ease-out both;
}

.yc-hero__sideH{
  margin:0 0 10px;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:13px;
  opacity:.92;
}
.yc-hero__sideP{
  margin:0 0 12px;
  color:rgba(255,255,255,0.86);
  font-size:13.5px;
  line-height:1.65;
}

.yc-hero__sideGrid{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.yc-hero__chip{
  padding:12px 12px;
  border-radius:16px;
  background:rgba(6,8,23,0.25);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.86);
  font-size:13px;
  line-height:1.45;
}
.yc-hero__chip strong{ color:#fff; font-weight:900; }

@keyframes ycFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Responsive */
@media (max-width:980px){
  .yc-hero{ min-height:74vh; padding:18px 16px; }
  .yc-hero__wrap{ grid-template-columns:1fr; }
  .yc-hero__card{ padding:28px 22px; }
  .yc-hero__side{ padding:20px; }
  .yc-hero__ctaRow{ justify-content:center; }
}
@media (max-width:520px){
  .yc-hero{ min-height:66vh; padding:22px 14px; }
  .yc-hero__card{ padding:20px 18px; }
  .yc-hero__ctaRow{ margin-top:12px; }
  .yc-hero__proof{ margin-top:12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .yc-hero__card,
  .yc-hero__side{ animation:none !important; }

  .yc-hero__btn,
  .yc-hero__proof li{ transition:none !important; }
}

/* =========================================
   YC HOME HERO — FORCE LAYERS (FIX)
   Paste at the VERY END (after your patch)
========================================= */

.yc-hero{
  position: relative !important;
  overflow: hidden;
}

/* BG + Overlay must cover the whole hero */
.yc-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.yc-hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Content must sit above overlay */
.yc-hero__wrap{
  position: relative !important;
  z-index: 2 !important;
}

/* Extra: make sure cards always stay readable */
.yc-hero__card,
.yc-hero__side{
  position: relative !important;
  z-index: 3 !important;
}
/* =========================================
   YC HOME HERO — COLOR FIX (PASTE LAST)
   Goal: kill dark/blue inherited text + visited links
   Scope: .yc-hero only
========================================= */

/* 0) Base text color for the whole hero */
.yc-hero{
  color: #fff !important;
}

/* 1) Kill theme link colors (blue / visited) inside hero */
.yc-hero a,
.yc-hero a:visited,
.yc-hero a:hover,
.yc-hero a:active{
  color: inherit !important;
  text-decoration: none !important;
}

/* 2) Explicit readable typography */
.yc-hero__h1{ color:#fff !important; }
.yc-hero__sub,
.yc-hero__sideP,
.yc-hero__trust{
  color: rgba(255,255,255,.92) !important;
}

/* 3) Ensure chips + their inner text never inherit dark colors */
.yc-hero__chip,
.yc-hero__chip *{
  color: rgba(255,255,255,.92) !important;
}
.yc-hero__chip strong{
  color:#fff !important;
}

/* 4) Proof bullets: force readable text (sometimes inherits dark) */
.yc-hero__proof,
.yc-hero__proof *{
  color: rgba(255,255,255,.92) !important;
}

/* 5) Buttons: force text + icon color and fix "secondary" visibility */
.yc-hero__btn,
.yc-hero__btn *{
  color:#fff !important;
}
.yc-hero__btn--secondary{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
.yc-hero__btn--secondary:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(246,96,0,.75) !important;
}

/* 6) If the service list title/subtext still looks dim, force it too */
.yc-hero__sideH{
  color: rgba(255,255,255,.96) !important;
}     


  /* =========================================
   HOME — BEFORE & AFTER (ALIGNED TO SITE UI)
   Scope: .yc-home-ba only
========================================= */

.yc-home-ba{
  padding: 28px 18px;
  background: #f7f7f7;
  font-family: Poppins, Montserrat, Arial, sans-serif;
}

.yc-home-ba__panel{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  background: #f7f7f7;
  border: 1px solid rgba(6,8,23,0.08);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(6,8,23,0.04);
}

.yc-home-ba__topbar{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.yc-home-ba__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(6,8,23,0.10);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(6,8,23,0.72);
}

.yc-home-ba__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f66000;
  flex: 0 0 auto;
}

.yc-home-ba__head{
  max-width: 760px;
  margin-bottom: 18px;
}

.yc-home-ba__title{
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #060817;
}

.yc-home-ba__sub{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(6,8,23,0.70);
  max-width: 70ch;
}

.yc-home-ba__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.yc-home-ba__card{
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #eceff2;
  border: 1px solid rgba(6,8,23,0.08);
}

.yc-home-ba__img{
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.yc-home-ba__label{
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(6,8,23,0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.yc-home-ba__bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 4px;
}

.yc-home-ba__highlights{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  color: rgba(6,8,23,0.78);
}

.yc-home-ba__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 14px;
  background: #f66000;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(246,96,0,0.16);
  transition: transform .18s ease, box-shadow .18s ease;
}

.yc-home-ba__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(246,96,0,0.22);
}

@media (max-width: 980px){
  .yc-home-ba{
    padding: 24px 16px;
  }

  .yc-home-ba__panel{
    padding: 18px;
  }

  .yc-home-ba__grid{
    grid-template-columns: 1fr;
  }

  .yc-home-ba__img{
    height: 320px;
  }
}

@media (max-width: 640px){
  .yc-home-ba__title{
    font-size: 30px;
  }

  .yc-home-ba__img{
    height: 260px;
  }

  .yc-home-ba__bottom{
    align-items: flex-start;
  }

  .yc-home-ba__btn{
    width: 100%;
  }
}


/* =========================================
   HOME — INSTALLATION SERVICES (UPDATED)
   Scope: .yc-home-sv only
========================================= */

.yc-home-sv{
  position: relative;
  padding: 34px 18px;
  font-family: Poppins, Montserrat, Arial, sans-serif;
}

.yc-home-sv__wrap{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* HEADER PANEL */

.yc-home-sv__head{
  border-radius: 22px;
  padding: 22px 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,8,23,.35);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
  margin-bottom: 14px;
}

/* INSTALLATION SERVICES (kicker) */

.yc-home-sv__kicker{
  margin: 0 0 8px;
  color: #F66000;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* TITLE */

.yc-home-sv__h2{
  margin: 0 0 8px;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(22px, 2.6vw, 34px);
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* SUBTEXT */

.yc-home-sv__sub{
  margin: 0;
  color: rgba(255,255,255,.90);
  line-height: 1.65;
  font-size: 15px;
  text-shadow: 0 8px 20px rgba(0,0,0,.35);
  max-width: 70ch;
}

/* GRID */

.yc-home-sv__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* CARD */

.yc-home-sv__card{
  display: block;
  border-radius: 20px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,8,23,.38);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  min-height: 168px;
}

/* CARD HOVER */

.yc-home-sv__card:hover{
  transform: translateY(-2px);
  border-color: rgba(246,96,0,.85);
  background: rgba(6,8,23,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

/* CARD HEADER */

.yc-home-sv__cardTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.yc-home-sv__h3{
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: 16px;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.yc-home-sv__p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  font-size: 13.5px;
  text-shadow: 0 8px 18px rgba(0,0,0,.30);
}

/* TAGS */

.yc-home-sv__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* ORANGE CHIPS */

.yc-home-sv__tag{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(246,96,0,.55);
  background: rgba(246,96,0,.18);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: all .18s ease;
}

/* CHIP HOVER */

.yc-home-sv__tag:hover{
  background: rgba(246,96,0,.35);
  border-color: rgba(246,96,0,.9);
}

/* ARROW */

.yc-home-sv__arrow{
  color: #F66000;
  font-weight: 900;
}

/* CTA ROW */

.yc-home-sv__ctaRow{
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

/* BUTTON */

.yc-home-sv__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.yc-home-sv__btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(246,96,0,.70);
}

/* RESPONSIVE */

@media (max-width: 980px){
  .yc-home-sv__grid{ grid-template-columns: 1fr; }
  .yc-home-sv__head{ padding: 20px 18px; }
  .yc-home-sv__card{ min-height: auto; }
}

/* =========================================
   HOME — TRUST STRIP (CHECKATRADE)
   Scope: .yc-home-trust only
========================================= */

.yc-home-trust{
  padding: 18px 18px 28px;
  background: #f7f7f7;
  font-family: Poppins, Montserrat, Arial, sans-serif;
}

.yc-home-trust__wrap{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.yc-home-trust__strip{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(6,8,23,0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(6,8,23,0.04);
}

.yc-home-trust__copy{
  max-width: 760px;
}

.yc-home-trust__kicker{
  margin: 0 0 6px;
  color: #f66000;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.yc-home-trust__title{
  margin: 0 0 6px;
  color: #060817;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.yc-home-trust__sub{
  margin: 0;
  color: rgba(6,8,23,0.70);
  font-size: 15px;
  line-height: 1.65;
}

.yc-home-trust__actions{
  flex: 0 0 auto;
}

.yc-home-trust__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 14px;
  background: #f66000;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(246,96,0,0.16);
  transition: transform .18s ease, box-shadow .18s ease;
}

.yc-home-trust__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(246,96,0,0.22);
}

@media (max-width: 820px){
  .yc-home-trust__strip{
    flex-direction: column;
    align-items: flex-start;
  }

  .yc-home-trust__actions{
    width: 100%;
  }

  .yc-home-trust__btn{
    width: 100%;
  }
}/* End custom CSS */