/* =========================================================
   REGAL — WARDROBE PAGE
   Main content only
   Header + Footer intentionally NOT styled
========================================================= */

.wardrobe-page{

    --wd-red:#ed2d35;
    --wd-red-dark:#c91f28;

    --wd-black:#090b0e;
    --wd-black-2:#111417;

    --wd-paper:#f7f6f2;
    --wd-white:#ffffff;

    --wd-text:#171918;
    --wd-muted:#777b78;

    --wd-line:rgba(20,22,21,.12);

    --wd-max:1316px;
    --wd-side:22px;

    --wd-rail:min(
        var(--wd-max),
        calc(100% - (var(--wd-side) * 2))
    );

    --wd-display:"Bebas Neue",sans-serif;
    --wd-body:"Inter",sans-serif;

    --wd-ease:cubic-bezier(.16,1,.3,1);

    width:100%;
    overflow:hidden;

    background:var(--wd-paper);
    color:var(--wd-text);

    font-family:var(--wd-body);
}


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

.wardrobe-page *,
.wardrobe-page *::before,
.wardrobe-page *::after{
    box-sizing:border-box;
}

.wardrobe-page h1,
.wardrobe-page h2,
.wardrobe-page h3,
.wardrobe-page h4,
.wardrobe-page p{
    margin-top:0;
}

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

.wardrobe-page a{
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   BOOTSTRAP ALIGNMENT
========================================================= */

.wardrobe-page .container,
.wardrobe-page .container-fluid,
.wardrobe-page .wd-rail{

    width:var(--wd-rail) !important;

    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
}

.wardrobe-page .row{
    margin-left:0;
    margin-right:0;
}

.wardrobe-page .row > *{
    padding-left:0;
    padding-right:0;
}


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

.wd-label{

    display:flex;
    align-items:center;
    gap:12px;

    width:max-content;

    margin-bottom:26px;

    color:var(--wd-muted);

    font-size:9px;
    font-weight:800;

    line-height:1;
    letter-spacing:2.5px;

    text-transform:uppercase;
}

.wd-label::after{

    content:"";

    width:38px;
    height:1px;

    background:var(--wd-red);
}

.wd-label span{
    color:var(--wd-red);
}

.wd-light-label{
    color:rgba(255,255,255,.68);
}


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

.wd-btn{

    display:inline-flex;

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

    gap:35px;

    min-width:190px;
    min-height:56px;

    padding:17px 20px;

    background:var(--wd-red);
    border:1px solid var(--wd-red);

    color:#fff;

    font-size:9px;
    font-weight:800;

    line-height:1;
    letter-spacing:2px;

    text-transform:uppercase;

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

.wd-btn:hover{

    background:var(--wd-red-dark);
    border-color:var(--wd-red-dark);

    color:#fff;

    transform:translateY(-3px);
}

.wd-btn i{
    font-size:12px;
}

.wd-btn-light{

    background:#c11414;
    border-color:#fff;

    color:var(--wd-black);
}

.wd-btn-light:hover{

    background:var(--wd-red);
    border-color:var(--wd-red);

    color:#fff;
}


/* =========================================================
   01. HERO
========================================================= */

.wd-hero{

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    min-height:760px;

    background:var(--wd-black);
}

.wd-hero-image{

    position:relative;

    min-height:760px;

    overflow:hidden;
}

.wd-hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 55%,
            rgba(9,11,14,.35)
        );
}

.wd-hero-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform 1.2s var(--wd-ease);
}

.wd-hero:hover .wd-hero-image img{
    transform:scale(1.035);
}

.wd-hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        110px
        max(40px,calc((100vw - 1316px) / 2))
        90px
        70px;

    color:#fff;
}

.wd-hero-number{

    margin-bottom:28px;

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

    font-size:9px;
    font-weight:800;

    letter-spacing:3px;
}

.wd-hero-content h1{

    margin-bottom:30px;

    color:#fff;

    font-family:var(--wd-display);

    font-size:clamp(76px,8vw,145px);

    font-weight:400;

    line-height:.82;

    letter-spacing:-1px;

    text-transform:uppercase;
}

.wd-hero-content h1 span{
    color:var(--wd-red);
}

.wd-hero-content p{

    max-width:410px;

    margin-bottom:35px;

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

    font-size:14px;

    line-height:1.8;
}


/* =========================================================
   02. INTRO
========================================================= */

.wd-intro{

    padding:135px 0 120px;

    background:var(--wd-paper);
}

.wd-intro h2,
.wd-section-head h2,
.wd-interior-heading h2,
.wd-material-copy h2,
.wd-process-heading h2,
.wd-project-head h2{

    margin-bottom:30px;

    font-family:var(--wd-display);

    font-size:clamp(65px,7vw,112px);

    font-weight:400;

    line-height:.86;

    letter-spacing:-.5px;

    text-transform:uppercase;
}

.wd-intro-copy{

    max-width:570px;

    margin-left:auto;
}

.wd-lead{

    margin-bottom:25px;

    color:var(--wd-text);

    font-size:22px;

    line-height:1.45;
}

.wd-intro-copy > p:not(.wd-lead){

    color:var(--wd-muted);

    font-size:14px;

    line-height:1.85;
}

.wd-intro-stats{

    display:flex;

    gap:0;

    margin-top:50px;

    border-top:1px solid var(--wd-line);
}

.wd-intro-stats > div{

    flex:1;

    padding:22px 15px 0 0;

    border-right:1px solid var(--wd-line);
}

.wd-intro-stats > div:not(:first-child){
    padding-left:20px;
}

.wd-intro-stats > div:last-child{
    border-right:0;
}

.wd-intro-stats strong{

    display:block;

    margin-bottom:9px;

    color:var(--wd-red);

    font-family:var(--wd-display);

    font-size:38px;

    font-weight:400;

    line-height:1;
}

.wd-intro-stats span{

    color:var(--wd-muted);

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


/* =========================================================
   03. FEATURE
========================================================= */

.wd-feature{

    padding-bottom:130px;

    background:var(--wd-paper);
}

.wd-feature-image{

    position:relative;

    height:700px;

    overflow:hidden;
}

.wd-feature-image img{

    height:100%;

    object-fit:cover;
}

.wd-feature-caption{

    position:absolute;

    left:0;
    bottom:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:24px 30px;

    background:rgba(9,11,14,.88);

    color:#fff;
}

.wd-feature-caption span{

    color:var(--wd-red);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.wd-feature-caption strong{

    font-family:var(--wd-display);

    font-size:27px;

    font-weight:400;
}


/* =========================================================
   04. COLLECTIONS
========================================================= */

.wd-collections{

    padding:125px 0 135px;

    background:#fff;
}

.wd-section-head{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:100px;

    margin-bottom:70px;
}

.wd-section-head .wd-label{
    grid-column:1 / -1;
}

.wd-section-head h2{
    margin:0;
}

.wd-section-head h2 span,
.wd-interior-heading h2 span,
.wd-material-copy h2 span,
.wd-process-heading h2 span,
.wd-project-head h2 span{
    color:var(--wd-red);
}

.wd-section-head p{

    align-self:end;

    max-width:480px;

    margin:0;

    color:var(--wd-muted);

    font-size:14px;

    line-height:1.8;
}

.wd-collection-grid{

    display:grid;

    grid-template-columns:1fr 1fr;
}

.wd-collection-card{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    min-height:390px;

    background:#f0efeb;
}

.wd-collection-card:nth-child(2){
    background:var(--wd-black);
    color:#fff;
}

.wd-collection-card:nth-child(3){
    background:#e6e3dc;
}

.wd-collection-card:nth-child(4){
    background:var(--wd-red);
    color:#fff;
}

.wd-card-image{
    overflow:hidden;
}

.wd-card-image img{

    height:100%;

    object-fit:cover;

    transition:transform .7s var(--wd-ease);
}

.wd-collection-card:hover .wd-card-image img{
    transform:scale(1.06);
}

.wd-card-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:38px;
}

.wd-card-content > span{

    margin-bottom:35px;

    color:var(--wd-red);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.wd-collection-card:nth-child(2) .wd-card-content > span,
.wd-collection-card:nth-child(4) .wd-card-content > span{
    color:#fff;
}

.wd-card-content h3{

    margin-bottom:15px;

    font-family:var(--wd-display);

    font-size:38px;

    font-weight:400;

    line-height:.9;
}

.wd-card-content p{

    margin-bottom:25px;

    color:var(--wd-muted);

    font-size:12px;

    line-height:1.7;
}

.wd-collection-card:nth-child(2) p,
.wd-collection-card:nth-child(4) p{
    color:rgba(255,255,255,.7);
}

.wd-card-content a{

    display:flex;

    align-items:center;

    gap:14px;

    width:max-content;

    color:var(--wd-red);

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.wd-collection-card:nth-child(2) a,
.wd-collection-card:nth-child(4) a{
    color:#fff;
}


/* =========================================================
   05. BACKGROUND STORAGE
========================================================= */

.wd-storage-bg{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    background-image:
        url("../images/storage\ wardrobe.png");

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

    color:#fff;
}

.wd-storage-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(9,11,14,.94) 0%,
            rgba(9,11,14,.72) 46%,
            rgba(9,11,14,.18) 100%
        );
}

.wd-storage-content{

    position:relative;

    z-index:2;

    max-width:680px;

    padding:130px 0;
}

.wd-storage-content h2{

    margin-bottom:30px;

    font-family:var(--wd-display);

    font-size:clamp(65px,7vw,110px);

    font-weight:400;

    line-height:.84;
}

.wd-storage-content h2 span{
    color:var(--wd-red);
}

.wd-storage-content p{

    max-width:520px;

    margin-bottom:45px;

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

    font-size:14px;

    line-height:1.8;
}

.wd-storage-points{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px 45px;

    max-width:560px;
}

.wd-storage-points div{

    display:flex;

    align-items:center;

    gap:14px;

    padding-bottom:15px;

    border-bottom:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-size:10px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.wd-storage-points i{
    color:var(--wd-red);
}


/* =========================================================
   06. INTERIORS
========================================================= */

.wd-interiors{

    padding:135px 0;

    background:var(--wd-paper);
}

.wd-interior-heading{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:70px;
}

.wd-interior-heading h2{
    margin:0;
}

.wd-interior-grid{

    display:grid;

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

    gap:1px;

    background:var(--wd-line);
}

.wd-interior-item{

    background:var(--wd-paper);
}

.wd-interior-item img{

    height:400px;

    object-fit:cover;
}

.wd-interior-item > div{

    padding:30px 25px 10px;
}

.wd-interior-item span{

    display:block;

    margin-bottom:15px;

    color:var(--wd-red);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.wd-interior-item h3{

    margin-bottom:10px;

    font-family:var(--wd-display);

    font-size:34px;

    font-weight:400;

    line-height:1;
}

.wd-interior-item p{

    max-width:300px;

    color:var(--wd-muted);

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   07. MATERIALS
========================================================= */

.wd-materials{

    padding:0;

    background:#fff;
}

.wd-material-image{

    height:720px;

    overflow:hidden;
}

.wd-material-image img{

    height:100%;

    object-fit:cover;
}

.wd-material-copy{

    padding:80px max(45px,6vw);
}

.wd-material-copy h2{
    font-size:clamp(65px,6.5vw,105px);
}

.wd-material-copy > p{

    max-width:460px;

    margin-bottom:45px;

    color:var(--wd-muted);

    font-size:14px;

    line-height:1.8;
}

.wd-finish-list{

    border-top:1px solid var(--wd-line);
}

.wd-finish-list > div{

    display:flex;

    align-items:center;

    gap:18px;

    padding:17px 0;

    border-bottom:1px solid var(--wd-line);
}

.wd-finish-dot{

    width:28px;
    height:28px;

    flex:0 0 28px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.1);
}

.wd-finish-dot.matte{
    background:#4c4d4a;
}

.wd-finish-dot.wood{
    background:
        linear-gradient(
            135deg,
            #6b4832,
            #c09368,
            #6a442e
        );
}

.wd-finish-dot.glass{
    background:
        linear-gradient(
            135deg,
            #d8e2e5,
            #74878c
        );
}

.wd-finish-dot.mirror{
    background:
        linear-gradient(
            135deg,
            #f5f5f5,
            #9da3a7,
            #ffffff
        );
}

.wd-finish-list strong{

    display:block;

    margin-bottom:4px;

    font-size:10px;
    font-weight:800;

    letter-spacing:1.3px;
}

.wd-finish-list small{

    color:var(--wd-muted);

    font-size:11px;
}


/* =========================================================
   08. DETAIL STRIP
========================================================= */

.wd-detail-strip{

    padding:100px 0;

    background:var(--wd-black);
}

.wd-detail-strip .row{
    display:grid;

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

    gap:14px;
}

.wd-detail-box{

    position:relative;

    height:380px;

    overflow:hidden;
}

.wd-detail-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        transparent 50%,
        rgba(0,0,0,.7)
    );
}

.wd-detail-box img{

    height:100%;

    object-fit:cover;

    transition:transform .7s var(--wd-ease);
}

.wd-detail-box:hover img{
    transform:scale(1.06);
}

.wd-detail-box span{

    position:absolute;

    z-index:2;

    left:25px;
    bottom:23px;

    color:#fff;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}


/* =========================================================
   09. PROCESS
========================================================= */

.wd-process{

    padding:135px 0;

    background:var(--wd-paper);
}

.wd-process-heading h2{
    font-size:clamp(70px,7vw,110px);
}

.wd-process-list{

    border-top:1px solid var(--wd-line);
}

.wd-process-row{

    display:grid;

    grid-template-columns:55px 1fr 25px;

    gap:25px;

    align-items:center;

    padding:30px 0;

    border-bottom:1px solid var(--wd-line);

    transition:
        padding .35s ease,
        background .35s ease;
}

.wd-process-row:hover{

    padding-left:18px;
    padding-right:18px;

    background:#fff;
}

.wd-process-row > strong{

    color:var(--wd-red);

    font-family:var(--wd-display);

    font-size:32px;

    font-weight:400;
}

.wd-process-row h3{

    margin-bottom:7px;

    font-family:var(--wd-display);

    font-size:35px;

    font-weight:400;

    line-height:1;
}

.wd-process-row p{

    max-width:570px;

    margin:0;

    color:var(--wd-muted);

    font-size:12px;

    line-height:1.7;
}

.wd-process-row > i{

    color:var(--wd-red);

    font-size:12px;
}


/* =========================================================
   10. PROJECTS
========================================================= */

.wd-projects{

    padding:135px 0;

    background:#fff;
}

.wd-project-head{

    margin-bottom:65px;
}

.wd-project-head h2{
    margin:0;
}

.wd-project-layout{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:18px;
}

.wd-project-large{

    position:relative;

    height:760px;

    overflow:hidden;
}

.wd-project-large img{

    height:100%;

    object-fit:cover;
}

.wd-project-small{

    display:grid;

    grid-template-rows:1fr 1fr;

    gap:18px;
}

.wd-project-small > div{

    position:relative;

    overflow:hidden;
}

.wd-project-small img{

    height:100%;

    object-fit:cover;

    transition:transform .7s var(--wd-ease);
}

.wd-project-large:hover img,
.wd-project-small > div:hover img{
    transform:scale(1.04);
}

.wd-project-caption,
.wd-project-small > div > span,
.wd-project-small > div > strong{

    position:absolute;

    z-index:2;

    color:#fff;
}

.wd-project-caption{

    left:30px;
    right:30px;
    bottom:28px;
}

.wd-project-caption span,
.wd-project-small > div > span{

    display:block;

    margin-bottom:8px;

    color:var(--wd-red);

    font-size:8px;
    font-weight:800;

    letter-spacing:2px;
}

.wd-project-caption strong,
.wd-project-small > div > strong{

    font-family:var(--wd-display);

    font-size:36px;

    font-weight:400;

    line-height:1;
}

.wd-project-small > div::after,
.wd-project-large::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        transparent 45%,
        rgba(0,0,0,.7)
    );
}

.wd-project-small > div > span{

    left:20px;
    bottom:57px;
}

.wd-project-small > div > strong{

    left:20px;
    bottom:20px;

    font-size:27px;
}


/* =========================================================
   11. FINAL CTA
========================================================= */

.wd-final{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    background-image:
        url("../images/wardrobe.png");

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

    color:#fff;
}

.wd-final-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(9,11,14,.92),
            rgba(9,11,14,.38)
        );
}

.wd-final-content{

    position:relative;

    z-index:2;

    max-width:760px;

    padding:130px 0;
}

.wd-final-content h2{

    margin-bottom:25px;

    font-family:var(--wd-display);

    font-size:clamp(75px,8vw,130px);

    font-weight:400;

    line-height:.82;
}

.wd-final-content h2 span{
    color:var(--wd-red);
}

.wd-final-content p{

    max-width:500px;

    margin-bottom:35px;

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

    font-size:14px;

    line-height:1.8;
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width:1100px){

    .wd-hero{
        grid-template-columns:1fr;
    }

    .wd-hero-image{
        min-height:570px;
    }

    .wd-hero-content{

        min-height:560px;

        padding:
            80px
            var(--wd-side);
    }

    .wd-section-head{
        grid-template-columns:1fr;
        gap:25px;
    }

    .wd-section-head p{
        margin:0;
    }

    .wd-collection-grid{
        grid-template-columns:1fr;
    }

    .wd-interior-grid{
        grid-template-columns:1fr 1fr;
    }

    .wd-interior-item:last-child{
        grid-column:1 / -1;
    }

    .wd-material-image{
        height:600px;
    }

    .wd-project-layout{
        grid-template-columns:1fr;
    }

    .wd-project-large{
        height:600px;
    }

    .wd-project-small{
        height:500px;
    }
}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width:900px){

    .wd-intro,
    .wd-collections,
    .wd-interiors,
    .wd-process,
    .wd-projects{
        padding-top:90px;
        padding-bottom:90px;
    }

    .wd-intro-copy{
        margin-top:50px;
        margin-left:0;
    }

    .wd-feature{
        padding-bottom:90px;
    }

    .wd-feature-image{
        height:560px;
    }

    .wd-interior-grid{
        grid-template-columns:1fr;
    }

    .wd-interior-item:last-child{
        grid-column:auto;
    }

    .wd-interior-item img{
        height:460px;
    }

    .wd-storage-bg{
        background-attachment:scroll;
    }

    .wd-storage-content{
        padding:100px 0;
    }

    .wd-materials .row{
        display:flex;
        flex-direction:column;
    }

    .wd-material-image{
        width:100%;
        height:520px;
    }

    .wd-material-copy{
        padding:75px var(--wd-side);
    }

    .wd-detail-strip .row{
        grid-template-columns:1fr;
    }

    .wd-detail-box{
        height:420px;
    }

    .wd-process .row{
        display:block;
    }

    .wd-process-heading{
        margin-bottom:65px;
    }

    .wd-project-small{
        height:650px;
    }
}


/* =========================================================
   RESPONSIVE — 650px
========================================================= */

@media (max-width:650px){

    .wd-hero-image{
        min-height:420px;
    }

    .wd-hero-content{
        min-height:500px;
        padding:70px var(--wd-side);
    }

    .wd-hero-content h1{
        font-size:76px;
    }

    .wd-intro h2,
    .wd-section-head h2,
    .wd-interior-heading h2,
    .wd-material-copy h2,
    .wd-process-heading h2,
    .wd-project-head h2{

        font-size:68px;
    }

    .wd-intro-stats{
        flex-direction:column;
    }

    .wd-intro-stats > div,
    .wd-intro-stats > div:not(:first-child){

        padding:17px 0;

        border-right:0;
        border-bottom:1px solid var(--wd-line);
    }

    .wd-intro-stats > div:last-child{
        border-bottom:0;
    }

    .wd-feature-image{
        height:430px;
    }

    .wd-feature-caption{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .wd-collection-card{
        grid-template-columns:1fr;
    }

    .wd-card-image{
        height:300px;
    }

    .wd-card-content{
        min-height:300px;
    }

    .wd-storage-bg{
        min-height:650px;
    }

    .wd-storage-points{
        grid-template-columns:1fr;
    }

    .wd-interior-item img{
        height:360px;
    }

    .wd-material-image{
        height:420px;
    }

    .wd-project-large{
        height:470px;
    }

    .wd-project-small{
        height:500px;
    }

    .wd-final{
        min-height:620px;
    }

    .wd-final-content{
        padding:90px 0;
    }

    .wd-final-content h2{
        font-size:72px;
    }
}


/* =========================================================
   RESPONSIVE — 400px
========================================================= */

@media (max-width:400px){

    .wd-hero-content h1{
        font-size:65px;
    }

    .wd-intro h2,
    .wd-section-head h2,
    .wd-interior-heading h2,
    .wd-material-copy h2,
    .wd-process-heading h2,
    .wd-project-head h2,
    .wd-final-content h2{
        font-size:58px;
    }

    .wd-card-content{
        padding:30px;
    }

    .wd-process-row{
        grid-template-columns:38px 1fr;
        gap:15px;
    }

    .wd-process-row > i{
        display:none;
    }
}
/* =========================================================
   WARDROBE — ALIGNMENT CORRECTION
   Add this at the VERY END of wardrobe.css
========================================================= */


/* ---------------------------------------------------------
   GLOBAL RAIL ALIGNMENT
--------------------------------------------------------- */

.wardrobe-page .wd-rail {
    width: min(1316px, calc(100% - 44px)) !important;
    max-width: 1316px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---------------------------------------------------------
   REMOVE BOOTSTRAP WIDTH CONFLICT FROM CUSTOM GRIDS
--------------------------------------------------------- */

.wardrobe-page .wd-collection-grid,
.wardrobe-page .wd-interior-grid,
.wardrobe-page .wd-detail-strip .row {
    width: 100%;
}


/* Collections */
.wardrobe-page .wd-collection-grid > .col-lg-6 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}


/* Interior organisation */
.wardrobe-page .wd-interior-grid > .col-lg-4 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}


/* Detail strip */
.wardrobe-page .wd-detail-strip .row > .col-md-4 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}


/* ---------------------------------------------------------
   COLLECTIONS
--------------------------------------------------------- */

.wardrobe-page .wd-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.wardrobe-page .wd-collection-card {
    width: 100%;
    min-width: 0;
    height: 430px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);

    overflow: hidden;
}

.wardrobe-page .wd-card-image {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.wardrobe-page .wd-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wardrobe-page .wd-card-content {
    min-width: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 42px;
}


/* ---------------------------------------------------------
   COLLECTION HEADING ALIGNMENT
--------------------------------------------------------- */

.wardrobe-page .wd-section-head {
    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 90px;

    align-items: end;

    margin-bottom: 70px;
}

.wardrobe-page .wd-section-head .wd-label {
    grid-column: 1 / -1;
    align-self: start;
}

.wardrobe-page .wd-section-head h2 {
    min-width: 0;
    margin: 0;
}

.wardrobe-page .wd-section-head p {
    width: 100%;
    max-width: 500px;

    margin: 0 0 5px auto;

    align-self: end;
}


/* ---------------------------------------------------------
   INTERNAL ORGANISATION
--------------------------------------------------------- */

.wardrobe-page .wd-interior-heading {
    width: 100%;

    display: grid;

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

    column-gap: 90px;

    align-items: end;

    margin-bottom: 65px;
}

.wardrobe-page .wd-interior-heading .wd-label {
    grid-column: 1 / -1;
    margin-bottom: 25px;
}

.wardrobe-page .wd-interior-heading h2 {
    grid-column: 2;

    margin: 0;

    max-width: 600px;

    justify-self: end;
}


/* Interior cards */
.wardrobe-page .wd-interior-grid {
    display: grid !important;

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

    gap: 1px;

    align-items: stretch;
}

.wardrobe-page .wd-interior-item {
    width: 100%;
    min-width: 0;
}

.wardrobe-page .wd-interior-item img {
    width: 100%;
    height: 400px;

    object-fit: cover;
}


/* ---------------------------------------------------------
   MATERIAL SECTION
--------------------------------------------------------- */

.wardrobe-page .wd-materials .row {
    display: grid !important;

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

    align-items: stretch;

    margin: 0;
}

.wardrobe-page .wd-materials .row > .col-lg-6 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

.wardrobe-page .wd-material-image {
    width: 100%;
    height: 720px;
}

.wardrobe-page .wd-material-copy {
    width: 100%;
    min-height: 720px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 80px;
}


/* ---------------------------------------------------------
   DETAIL STRIP
--------------------------------------------------------- */

.wardrobe-page .wd-detail-strip .row {
    display: grid !important;

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

    gap: 14px;

    margin: 0;
}

.wardrobe-page .wd-detail-box {
    width: 100%;
    height: 400px;
}


/* ---------------------------------------------------------
   PROCESS — MAIN FIX
--------------------------------------------------------- */

.wardrobe-page .wd-process > .wd-rail > .row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 390px)
        minmax(0, 1fr);

    column-gap: 80px;

    align-items: start;

    margin: 0;
}


/* Remove Bootstrap column widths */
.wardrobe-page .wd-process > .wd-rail > .row > .col-lg-4,
.wardrobe-page .wd-process > .wd-rail > .row > .col-lg-8 {

    width: auto !important;
    max-width: none !important;

    flex: none !important;

    min-width: 0;
}


/* Left process heading */
.wardrobe-page .wd-process-heading {

    width: 100%;

    position: sticky;
    top: 120px;

    margin: 0;

    padding: 0;
}

.wardrobe-page .wd-process-heading h2 {

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

    margin: 0;

    font-size: clamp(65px, 6vw, 105px);

    line-height: .84;

    letter-spacing: -.5px;

    overflow-wrap: normal;
}


/* Right process list */
.wardrobe-page .wd-process-list {

    width: 100%;
    min-width: 0;

    margin: 0;
}


/* Individual process row */
.wardrobe-page .wd-process-row {

    width: 100%;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        25px;

    column-gap: 25px;

    align-items: center;

    min-height: 132px;

    padding: 25px 0;

    border-bottom: 1px solid var(--wd-line);
}


/* Prevent text from pushing into neighbouring columns */
.wardrobe-page .wd-process-row > div {
    min-width: 0;
}

.wardrobe-page .wd-process-row h3 {
    margin: 0 0 7px;

    font-size: 35px;

    line-height: 1;
}

.wardrobe-page .wd-process-row p {

    max-width: 100%;

    margin: 0;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   PROJECT SECTION
--------------------------------------------------------- */

.wardrobe-page .wd-project-layout {

    width: 100%;

    display: grid;

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

    gap: 18px;

    align-items: stretch;
}

.wardrobe-page .wd-project-large,
.wardrobe-page .wd-project-small > div {

    min-width: 0;
    overflow: hidden;
}


/* ---------------------------------------------------------
   PREVENT HEADING OVERFLOW
--------------------------------------------------------- */

.wardrobe-page h1,
.wardrobe-page h2,
.wardrobe-page h3 {

    overflow-wrap: normal;
    word-break: normal;
}

.wardrobe-page h2 {
    max-width: 100%;
}


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

@media (max-width: 1100px) {

    .wardrobe-page .wd-collection-grid {
        grid-template-columns: 1fr !important;
    }

    .wardrobe-page .wd-interior-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .wardrobe-page .wd-interior-item:last-child {
        grid-column: 1 / -1;
    }

    .wardrobe-page .wd-process > .wd-rail > .row {
        grid-template-columns:
            minmax(0, 320px)
            minmax(0, 1fr);

        column-gap: 50px;
    }

    .wardrobe-page .wd-process-heading h2 {
        font-size: 78px;
    }
}


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

@media (max-width: 900px) {

    .wardrobe-page .wd-section-head,
    .wardrobe-page .wd-interior-heading {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .wardrobe-page .wd-section-head .wd-label,
    .wardrobe-page .wd-interior-heading .wd-label {
        grid-column: 1 !important;
    }

    .wardrobe-page .wd-section-head p {
        margin-left: 0;
        max-width: 600px;
    }

    .wardrobe-page .wd-interior-heading h2 {
        grid-column: 1;
        justify-self: start;
    }

    .wardrobe-page .wd-interior-grid {
        grid-template-columns: 1fr !important;
    }

    .wardrobe-page .wd-interior-item:last-child {
        grid-column: auto;
    }

    /* Process becomes one clean vertical layout */
    .wardrobe-page .wd-process > .wd-rail > .row {
        display: block !important;
    }

    .wardrobe-page .wd-process-heading {
        position: static;

        margin-bottom: 60px;
    }

    .wardrobe-page .wd-process-heading h2 {
        max-width: 600px;
        font-size: 80px;
    }

    .wardrobe-page .wd-materials .row {
        display: flex !important;
        flex-direction: column;
    }

    .wardrobe-page .wd-material-image {
        height: 520px;
    }

    .wardrobe-page .wd-material-copy {
        min-height: auto;
    }

    .wardrobe-page .wd-detail-strip .row {
        grid-template-columns: 1fr !important;
    }
}


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

@media (max-width: 650px) {

    .wardrobe-page .wd-rail {
        width: calc(100% - 36px) !important;
    }

    .wardrobe-page .wd-collection-card {
        grid-template-columns: 1fr;

        height: auto;
    }

    .wardrobe-page .wd-card-image {
        height: 300px;
    }

    .wardrobe-page .wd-card-content {
        min-height: 300px;
        padding: 35px;
    }

    .wardrobe-page .wd-interior-item img {
        height: 360px;
    }

    .wardrobe-page .wd-process-heading h2 {
        font-size: 68px;
    }

    .wardrobe-page .wd-process-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        column-gap: 18px;

        min-height: 120px;
    }

    .wardrobe-page .wd-process-row > i {
        display: none;
    }

    .wardrobe-page .wd-material-copy {
        padding: 65px 25px;
    }
}