/* =========================================================
   CACAR B2B BLOG
   SINGAPORE CUSTOM WARDROBE PLANNING GUIDE
   FINAL BALANCED EDITORIAL VERSION
   ========================================================= */

.cacar-wg{
    --black:#11110f;
    --ink:#20201d;
    --text:#59564f;
    --muted:#777269;
    --warm:#f2eee7;
    --warm2:#e8e0d4;
    --soft:#faf9f6;
    --line:#d9d2c7;
    --gold:#b79262;
    --white:#ffffff;

    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 24px 80px;
    box-sizing:border-box;
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
}

.cacar-wg *,
.cacar-wg *:before,
.cacar-wg *:after{
    box-sizing:border-box;
}

.cacar-wg img{
    display:block;
    width:100%;
    height:auto;
}

.cacar-wg a{
    color:inherit;
    text-decoration:none;
}

.cacar-wg p{
    margin:0 0 18px;
    font-size:15px;
    line-height:1.8;
    color:var(--text);
}

.cacar-wg h2,
.cacar-wg h3{
    margin-top:0;
    color:var(--ink);
}


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

.cacar-wg__intro{
    max-width:880px;
    margin:0 auto;
    padding:42px 0 46px;
    text-align:center;
}

.cacar-wg__eyebrow{
    margin:0 0 16px !important;
    font-size:10px !important;
    line-height:1.4 !important;
    letter-spacing:.19em;
    text-transform:uppercase;
    color:var(--gold) !important;
    font-weight:700;
}

.cacar-wg__intro-title{
    max-width:820px;
    margin:0 auto 20px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:34px;
    line-height:1.28;
    font-weight:400;
    color:var(--ink);
}

.cacar-wg__intro-copy{
    max-width:760px;
    margin:0 auto !important;
    font-size:15px !important;
    line-height:1.85 !important;
    color:var(--muted) !important;
}


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

.cacar-wg__steps{
    margin:0 0 56px;
    padding:38px 30px 34px;
    background:var(--warm);
}

.cacar-wg__steps-title{
    margin:0 0 30px !important;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px !important;
    color:var(--ink) !important;
}

.cacar-wg__steps-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
}

.cacar-wg__step{
    position:relative;
    padding:10px 22px;
    text-align:center;
}

.cacar-wg__step:not(:last-child):after{
    content:"";
    position:absolute;
    right:0;
    top:18px;
    bottom:18px;
    width:1px;
    background:rgba(0,0,0,.12);
}

.cacar-wg__step-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0 auto 14px;
    border:1px solid var(--gold);
    border-radius:50%;
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    color:var(--gold);
}

.cacar-wg__step strong{
    display:block;
    margin-bottom:5px;
    font-size:13px;
    line-height:1.4;
    color:var(--ink);
}

.cacar-wg__step span{
    display:block;
    font-size:11px;
    line-height:1.5;
    color:var(--muted);
}


/* =========================================================
   ARTICLE VISUAL
   ========================================================= */

.cacar-wg__visual{
    margin:0 0 72px;
}

.cacar-wg__visual--middle{
    margin-top:64px;
    margin-bottom:10px;
}

.cacar-wg__visual-frame{
    position:relative;
    overflow:hidden;
    background:#ddd;
}

.cacar-wg__visual-frame img{
    display:block;
    width:100%;
    aspect-ratio:16/7;
    object-fit:cover;
    object-position:center center;
}

.cacar-wg__visual-caption{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:13px 4px 0;
    font-size:11px;
    line-height:1.5;
    color:var(--muted);
}

.cacar-wg__visual-caption span:first-child{
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--gold);
}


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

.cacar-wg__section{
    padding:70px 0;
    border-top:1px solid var(--line);
}

.cacar-wg__section--warm{
    margin-left:-24px;
    margin-right:-24px;
    padding:70px 54px;
    background:var(--warm);
    border-top:none;
}

.cacar-wg__head{
    display:grid;
    grid-template-columns:90px minmax(0,1fr);
    gap:28px;
    max-width:980px;
    margin:0 auto 36px;
}

.cacar-wg__number{
    padding-top:3px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    line-height:1;
    color:var(--gold);
}

.cacar-wg__kicker{
    margin:0 0 8px !important;
    font-size:9px !important;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold) !important;
    font-weight:700;
}

.cacar-wg h2{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:34px;
    line-height:1.22;
    font-weight:400;
}

.cacar-wg__body{
    max-width:850px;
    margin:0 auto;
}

.cacar-wg__lead{
    margin-bottom:28px !important;
    font-size:17px !important;
    line-height:1.75 !important;
    color:#3f3c37 !important;
}


/* =========================================================
   DEFAULT TWO COLUMN
   ========================================================= */

.cacar-wg__split{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);
    gap:56px;
    align-items:center;
    max-width:980px;
    margin:0 auto;
}

.cacar-wg__split--reverse{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);
}


/* =========================================================
   SECTION 01 + SECTION 03
   BALANCED WIDE CARD LAYOUT
   ONLY THESE TWO SECTIONS ARE CHANGED
   ========================================================= */

/* SECTION 01:
   text approx. 40%
   cards approx. 60%
*/

.cacar-wg__split--section01{
    width:100%;
    max-width:1040px;
    grid-template-columns:
        minmax(250px,.82fr)
        minmax(500px,1.38fr);
    gap:46px;
    align-items:center;
}


/* SECTION 03:
   cards approx. 60%
   text approx. 40%
*/

.cacar-wg__split--section03{
    width:100%;
    max-width:1040px;
    grid-template-columns:
        minmax(500px,1.38fr)
        minmax(250px,.82fr);
    gap:46px;
    align-items:center;
}


/* Wider cards inside these two sections */

.cacar-wg__split--section01 .cacar-wg__grid,
.cacar-wg__split--section03 .cacar-wg__grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:0;
}


/* Prevent awkward word breaking */

.cacar-wg__split--section01 .cacar-wg__card,
.cacar-wg__split--section03 .cacar-wg__card{
    min-width:0;
    padding:27px 26px 25px;
}

.cacar-wg__split--section01 .cacar-wg__card-label,
.cacar-wg__split--section03 .cacar-wg__card-label{
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    white-space:normal;
}

.cacar-wg__split--section01 .cacar-wg__card h3,
.cacar-wg__split--section03 .cacar-wg__card h3{
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
}

.cacar-wg__split-copy h3{
    margin:0 0 18px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    line-height:1.3;
    font-weight:400;
}


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

.cacar-wg__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-top:30px;
}

.cacar-wg__card{
    padding:24px 24px 22px;
    background:var(--white);
    border-top:2px solid var(--gold);
}

.cacar-wg__section:not(.cacar-wg__section--warm) .cacar-wg__card{
    border:1px solid var(--line);
    border-top:2px solid var(--gold);
}

.cacar-wg__card-label{
    margin:0 0 10px !important;
    font-size:8px !important;
    line-height:1.3 !important;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--gold) !important;
    font-weight:700;
}

.cacar-wg__card h3{
    margin:0 0 9px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    line-height:1.35;
    font-weight:400;
}

.cacar-wg__card p:last-child{
    margin-bottom:0;
}


/* =========================================================
   TABLE
   ========================================================= */

.cacar-wg__table-wrap{
    margin-top:32px;
    overflow-x:auto;
    border:1px solid var(--line);
}

.cacar-wg__table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    background:#fff;
}

.cacar-wg__table th{
    padding:15px 18px;
    background:var(--black);
    color:#fff;
    text-align:left;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.cacar-wg__table td{
    padding:18px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    line-height:1.65;
    color:#555149;
    vertical-align:top;
}

.cacar-wg__table tr:last-child td{
    border-bottom:none;
}


/* =========================================================
   NOTE
   ========================================================= */

.cacar-wg__note{
    margin-top:30px;
    padding:22px 26px;
    background:#ebe3d6;
    border-left:3px solid var(--gold);
}

.cacar-wg__note strong{
    display:block;
    margin-bottom:6px;
    color:var(--ink);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.cacar-wg__note p{
    margin:0;
    font-size:13px;
}


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

.cacar-wg .cacar-wg__dark{
    margin:66px 0;
    padding:44px 46px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:38px;
    align-items:center;
    background:#10100f !important;
    color:#ffffff !important;
    opacity:1 !important;
}

.cacar-wg .cacar-wg__dark .cacar-wg__dark-label{
    margin:0 0 9px !important;
    color:#d3ae7a !important;
    -webkit-text-fill-color:#d3ae7a !important;
    opacity:1 !important;
    font-size:9px !important;
    line-height:1.4 !important;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
}

.cacar-wg .cacar-wg__dark h3,
.cacar-wg .cacar-wg__dark h3 *,
.cacar-wg__dark h3{
    margin:0 0 10px !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:27px !important;
    line-height:1.28 !important;
    font-weight:400 !important;
}

.cacar-wg .cacar-wg__dark p:not(.cacar-wg__dark-label),
.cacar-wg .cacar-wg__dark div > p,
.cacar-wg__dark p:not(.cacar-wg__dark-label){
    margin:0 !important;
    max-width:670px;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:.9 !important;
    font-size:15px !important;
    line-height:1.8 !important;
}

.cacar-wg .cacar-wg__dark .cacar-wg__btn-light,
.cacar-wg .cacar-wg__dark a.cacar-wg__btn-light{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:0 20px !important;
    background:#ffffff !important;
    border:1px solid #ffffff !important;
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
    opacity:1 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
}

.cacar-wg .cacar-wg__dark .cacar-wg__btn-light:hover{
    background:transparent !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}


/* =========================================================
   SPECIFICATION
   ========================================================= */

.cacar-wg__spec{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    margin:30px 0;
    background:var(--line);
    border:1px solid var(--line);
}

.cacar-wg__spec-item{
    min-height:94px;
    padding:17px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:#fff;
}

.cacar-wg__spec-num{
    margin-bottom:16px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    color:var(--gold);
}

.cacar-wg__spec-name{
    font-size:12px;
    line-height:1.5;
    font-weight:700;
    color:#403d37;
}


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

.cacar-wg__link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    padding-bottom:4px;
    border-bottom:1px solid var(--ink);
    font-size:12px;
    font-weight:700;
    color:var(--ink) !important;
}

.cacar-wg__link:hover{
    opacity:.65;
}


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

.cacar-wg__compare{
    margin-top:34px;
    padding:32px;
    background:var(--soft);
    border:1px solid var(--line);
}

.cacar-wg__compare h3{
    margin:0 0 12px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:400;
}


/* =========================================================
   DRAWING VS RENDER
   ========================================================= */

.cacar-wg__two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:32px;
    border:1px solid var(--line);
}

.cacar-wg__two-item{
    padding:30px;
    background:#fff;
}

.cacar-wg__two-item + .cacar-wg__two-item{
    border-left:1px solid var(--line);
}

.cacar-wg__two-label{
    margin:0 0 10px !important;
    font-size:9px !important;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--gold) !important;
    font-weight:700;
}

.cacar-wg__two-item h3{
    margin:0 0 12px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:23px;
    font-weight:400;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.cacar-wg__check{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 36px;
    margin-top:28px;
    padding:30px 34px;
    background:var(--warm);
}

.cacar-wg__check-item{
    position:relative;
    padding:14px 0 14px 29px;
    border-bottom:1px solid rgba(0,0,0,.1);
    font-size:13px;
    line-height:1.5;
    color:#4e4a43;
}

.cacar-wg__check-item:before{
    content:"";
    position:absolute;
    left:0;
    top:15px;
    width:13px;
    height:13px;
    border:1px solid var(--gold);
}


/* =========================================================
   SOURCES
   ========================================================= */

.cacar-wg__sources{
    margin-top:76px;
    padding:52px 0 10px;
    border-top:1px solid var(--line);
}

.cacar-wg__sources-head{
    max-width:760px;
    margin-bottom:28px;
}

.cacar-wg__sources h2{
    margin:0 0 12px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    font-weight:400;
}

.cacar-wg__source{
    display:grid;
    grid-template-columns:110px minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    padding:18px 0;
    border-top:1px solid var(--line);
}

.cacar-wg__source-type{
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
}

.cacar-wg__source-copy{
    font-size:12px;
    line-height:1.6;
    color:#59554f;
}

.cacar-wg__source-link{
    font-size:11px;
    text-decoration:underline !important;
    text-underline-offset:3px;
    white-space:nowrap;
}


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

@media(max-width:768px){

    .cacar-wg{
        padding:0 17px 56px;
    }

    .cacar-wg__intro{
        padding:28px 0 34px;
        text-align:left;
    }

    .cacar-wg__intro-title{
        font-size:27px;
    }

    .cacar-wg__steps{
        margin-left:-17px;
        margin-right:-17px;
        padding:30px 20px;
    }

    .cacar-wg__steps-grid{
        grid-template-columns:1fr 1fr;
        row-gap:28px;
    }

    .cacar-wg__step:nth-child(2):after,
    .cacar-wg__step:nth-child(4):after,
    .cacar-wg__step:nth-child(6):after{
        display:none;
    }

    .cacar-wg__visual{
        margin-left:-17px;
        margin-right:-17px;
        margin-bottom:48px;
    }

    .cacar-wg__visual--middle{
        margin-top:42px;
        margin-bottom:0;
    }

    .cacar-wg__visual-frame img{
        aspect-ratio:4/3;
    }

    .cacar-wg__visual-caption{
        padding:12px 17px 0;
        flex-direction:column;
        gap:5px;
    }

    .cacar-wg__section{
        padding:48px 0;
    }

    .cacar-wg__section--warm{
        margin-left:-17px;
        margin-right:-17px;
        padding:48px 17px;
    }

    .cacar-wg__head{
        grid-template-columns:52px minmax(0,1fr);
        gap:14px;
        margin-bottom:28px;
    }

    .cacar-wg__number{
        font-size:28px;
    }

    .cacar-wg h2{
        font-size:27px;
    }

    .cacar-wg__split,
    .cacar-wg__split--reverse,
    .cacar-wg__split--section01,
    .cacar-wg__split--section03{
        grid-template-columns:1fr;
        width:100%;
        max-width:100%;
        gap:28px;
    }

    .cacar-wg__split--section01 .cacar-wg__grid,
    .cacar-wg__split--section03 .cacar-wg__grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .cacar-wg__grid{
        grid-template-columns:1fr;
    }

    .cacar-wg__spec{
        grid-template-columns:1fr 1fr;
    }

    .cacar-wg .cacar-wg__dark{
        grid-template-columns:1fr;
        margin-left:-17px;
        margin-right:-17px;
        padding:34px 22px;
        gap:24px;
    }

    .cacar-wg .cacar-wg__dark .cacar-wg__btn-light{
        width:100%;
    }

    .cacar-wg__two{
        grid-template-columns:1fr;
    }

    .cacar-wg__two-item + .cacar-wg__two-item{
        border-left:none;
        border-top:1px solid var(--line);
    }

    .cacar-wg__check{
        grid-template-columns:1fr;
        padding:24px 20px;
    }

    .cacar-wg__source{
        grid-template-columns:1fr;
        gap:6px;
    }
}