body{

    background:#0D0C0B;

}

.craft-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:140px;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

    color:white;

}

.hero-tag{

    color:#C79B63;

    letter-spacing:4px;

    font-size:.9rem;

    text-transform:uppercase;

}

.hero-content h1{

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

    font-size:5rem;

    line-height:1;

    margin:25px 0;

}

.hero-content p{

    color:#d6d6d6;

    font-size:1.1rem;

    line-height:1.9;

}

/* INTRO */

.craft-intro{

    padding:140px 0;

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.intro-image img{

    width:100%;

    border-radius:8px;

}

.section-tag{

    color:#C79B63;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.85rem;

}

.intro-text h2{

    color:white;

    font-size:3.8rem;

    margin:25px 0;

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

}

.intro-text p{

    color:#BEBEBE;

    line-height:2;

    margin-bottom:25px;

}

/*======================================
PROCESS
======================================*/

.craft-process{

    padding:150px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:110px;

}

.section-heading h2{

    color:white;

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

    font-size:4rem;

    margin-top:20px;

    line-height:1.1;

}

.process-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:140px;

}

.process-row.reverse{

    direction:rtl;

}

.process-row.reverse .process-text{

    direction:ltr;

}

.process-image{

    overflow:hidden;

    border-radius:12px;

}

.process-image img{

    width:100%;

    display:block;

    transition:.8s;

}

.process-image:hover img{

    transform:scale(1.06);

}

.process-number{

    color:#C79B63;

    font-size:5rem;

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

}

.process-text h3{

    color:white;

    font-size:2.6rem;

    margin:20px 0;

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

}

.process-text p{

    color:#bcbcbc;

    line-height:2;

    font-size:1.05rem;

    max-width:520px;

}
/*====================================================
WORKSHOP GALLERY
====================================================*/

.workshop-gallery{

    background:#0D0C0B;

    padding:150px 0;

}

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-top:80px;

}

.gallery-item{

    overflow:hidden;

    border-radius:12px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.7s;

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.gallery-item.large{

    grid-row:span 2;

}

.gallery-item.wide{

    grid-column:span 2;

}
/*====================================================
SIGNATURE BANNER
====================================================*/

.signature-banner{

    position:relative;

    height:70vh;

    overflow:hidden;

}

.signature-banner img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.68);

}

.banner-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    padding:0 20px;

}

.banner-content h2{

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

    font-size:4.5rem;

    margin-bottom:25px;

}

.banner-content p{

    max-width:700px;

    line-height:2;

    color:#d8d8d8;

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

.craft-cta{

    padding:150px 0;

    text-align:center;

}

.craft-cta h2{

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

    font-size:4rem;

    color:white;

    margin:25px 0;

}

.craft-cta p{

    max-width:720px;

    margin:0 auto 45px;

    color:#bcbcbc;

    line-height:2;

}
/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1100px){

.process-row,
.process-row.reverse,
.intro-grid{

    grid-template-columns:1fr;

    direction:ltr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-item.large,
.gallery-item.wide{

    grid-column:auto;

    grid-row:auto;

}

.hero-content h1{

    font-size:4rem;

}

.section-heading h2,
.banner-content h2,
.craft-cta h2{

    font-size:3.2rem;

}

}

@media(max-width:768px){

.hero-content h1{

    font-size:2.8rem;

}

.intro-text h2,
.process-text h3,
.section-heading h2,
.banner-content h2,
.craft-cta h2{

    font-size:2.3rem;

}

.process-row{

    gap:40px;

}

}