/* ==========================================================
   ABOUT PAGE
========================================================== */

.about-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#0D0C0B;

    padding-top:140px;

}

.about-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

.about-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to right,
        rgba(13,12,11,.88) 0%,
        rgba(13,12,11,.55) 45%,
        rgba(13,12,11,.30) 100%
    );

    z-index:2;

}

.about-hero-content{

    position:relative;

    z-index:5;

    max-width:720px;

    color:#F5F1EA;

    padding-top:130px;

}

.section-tag{

    display:inline-block;

    color:#C79B63;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.85rem;

    margin-bottom:25px;

    font-weight:600;

}

.about-hero h1{

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

    font-size:5rem;

    line-height:1.05;

    margin-bottom:30px;

}

.about-hero p{

    max-width:600px;

    color:rgba(245,241,234,.80);

    line-height:1.9;

    font-size:1.08rem;

}
/* ==========================================================
   OUR STORY
========================================================== */

.our-story{

    background:#0D0C0B;

    padding:140px 8%;

}

.story-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.story-image{

    overflow:hidden;

    border-radius:12px;

}

.story-image img{

    width:100%;

    display:block;

    transition:.8s;

}

.story-image:hover img{

    transform:scale(1.05);

}

.story-content{

    color:#F5F1EA;

}

.story-content h2{

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

    font-size:4rem;

    line-height:1.1;

    margin-bottom:30px;

}

.story-content p{

    color:rgba(245,241,234,.78);

    line-height:2;

    margin-bottom:24px;

    font-size:1.05rem;

}
/* ==========================================================
   HERITAGE
========================================================== */

.heritage{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.heritage-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.heritage-overlay{

    position:absolute;

    inset:0;

    background:rgba(13,12,11,.72);

}

.heritage-content{

    position:relative;

    z-index:5;

    text-align:center;

    color:white;

}

.heritage-content h2{

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

    font-size:4.5rem;

    line-height:1.1;

    max-width:900px;

}
/* ==========================================================
   OUR PROCESS
========================================================== */

.process{

    background:#0D0C0B;

    padding:140px 8%;

}

.section-heading{

    text-align:center;

    margin-bottom:90px;

}

.section-heading h2{

    color:#F5F1EA;

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

    font-size:4rem;

    margin-top:20px;

}

.process-grid{

    display:grid;

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

    gap:35px;

    max-width:1500px;

    margin:auto;

}

.process-card{

    padding:45px 35px;

    border:1px solid rgba(199,155,99,.18);

    border-radius:12px;

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

    transition:.35s ease;

}

.process-card:hover{

    transform:translateY(-8px);

    border-color:#C79B63;

    background:rgba(199,155,99,.05);

}

.number{

    display:block;

    color:#C79B63;

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

    font-size:3rem;

    margin-bottom:22px;

}

.process-card h3{

    color:#F5F1EA;

    margin-bottom:18px;

    font-size:1.35rem;

}

.process-card p{

    color:rgba(245,241,234,.75);

    line-height:1.9;

}
/* ==========================================================
   QUALITY
========================================================== */

.quality{

    background:#0D0C0B;

    padding:140px 8%;

}

.quality-container{

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.quality-content{

    color:#F5F1EA;

}

.quality-content h2{

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

    font-size:4rem;

    margin:20px 0 30px;

    line-height:1.05;

}

.quality-content p{

    color:rgba(245,241,234,.78);

    line-height:2;

    margin-bottom:40px;

}

.quality-image{

    overflow:hidden;

    border-radius:12px;

}

.quality-image img{

    width:100%;

    transition:.8s;

}

.quality-image:hover img{

    transform:scale(1.05);

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

.about-cta{

    background:#11100F;

    padding:140px 8% 180px;

    text-align:center;

}

.about-cta h2{

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

    color:#F5F1EA;

    font-size:4rem;

    line-height:1.1;

    margin:20px 0 30px;

}

.about-cta p{

    max-width:750px;

    margin:auto;

    color:rgba(245,241,234,.78);

    line-height:2;

    margin-bottom:45px;

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

@media(max-width:1100px){

.story-container,
.quality-container{

    grid-template-columns:1fr;

}

.process-grid{

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

}

.about-hero h1{

    font-size:4rem;

}

.story-content h2,
.quality-content h2,
.section-heading h2,
.about-cta h2,
.heritage-content h2{

    font-size:3.2rem;

}

}

@media(max-width:768px){

.process-grid{

    grid-template-columns:1fr;

}

.about-hero{

    min-height:90vh;

}

.about-hero h1{

    font-size:2.8rem;

}

.story-content h2,
.quality-content h2,
.section-heading h2,
.about-cta h2,
.heritage-content h2{

    font-size:2.4rem;

}

.story-container,
.quality-container{

    gap:50px;

}

}