/*==================================================
MAISON CINNAMONN
THE MAISON
==================================================*/


/*==================================================
HERO
==================================================*/

.maison-hero{

    background:var(--color-background);

    padding-top:180px;

}

.maison-heading{

    width:min(900px,90%);

    margin:0 auto;

    text-align:center;

}

.maison-heading h1{

    margin:20px 0 24px;

}

.maison-heading p{

    font-family:var(--font-serif);

    font-size:2rem;

    color:var(--color-text);

}

.maison-hero-image{

    width:min(1750px,95%);

    margin:120px auto 0;

    overflow:hidden;

}

.maison-hero-image img{

    width:100%;

    height:88vh;

    min-height:720px;

    object-fit:cover;

}



/*==================================================
MANIFESTO
==================================================*/

.manifesto{

    padding:240px 0;

    background:var(--color-background);

}

.container-sm{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

}

.manifesto h2{

    max-width:860px;

    margin:0 auto;

}

.manifesto p{

    max-width:580px;

    margin:42px auto 0;

}



/*==================================================
OUR PHILOSOPHY
==================================================*/

.philosophy{

    padding:220px 0;

    background:var(--color-background);

}

.philosophy-grid{

    width:min(1500px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:120px;

    align-items:center;

}

.philosophy-photo{

    overflow:hidden;

}

.philosophy-photo img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

}

.philosophy-content{

    max-width:700px;

}

.philosophy-content .section-title{

    margin:18px 0 35px;

}

.philosophy-content .section-text{

    margin-bottom:28px;

    max-width:620px;

    line-height:2;

}

.founder{

    margin-top:55px;

}

.founder strong{

    display:block;

    font-family:var(--font-serif);

    font-size:1.35rem;

    font-weight:400;

    color:var(--color-text);

}

.founder span{

    display:block;

    margin-top:8px;

    font-family:var(--font-sans);

    font-size:.72rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--color-muted);

}


/*==================================================
WHAT DEFINES THE MAISON
==================================================*/

.signature{

    padding:240px 0;

    background:var(--color-background);

}

.signature .container-sm{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

}

.signature-grid{

    width:min(1450px,92%);

    margin:140px auto 0;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:90px;

}

.signature-grid article{

    padding-top:30px;

    border-top:1px solid var(--color-border);

}

.signature-grid h3{

    margin-bottom:20px;

}

.signature-grid p{

    max-width:320px;

}


/*==================================================
WHO WE CREATE FOR
==================================================*/

.audience{

    padding:240px 0;

    background:var(--color-surface);

}

.audience .container-sm{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

}

.audience h2{

    max-width:850px;

    margin:0 auto;

}

.audience p{

    max-width:620px;

    margin:45px auto 0;

}

/*==================================================
OUR PROMISE
==================================================*/

.promise{

    padding:260px 0;

    background:var(--color-background);

}

.promise .container-sm{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

}

.promise h2{

    max-width:880px;

    margin:0 auto;

}

.promise p{

    max-width:620px;

    margin:45px auto 0;

}



/*==================================================
PRIVATE CONSULTATION
==================================================*/

.consultation{

    padding:260px 0;

    background:var(--color-surface);

}

.consultation .container-sm{

    width:min(760px,90%);

    margin:auto;

    text-align:center;

}

.consultation h2{

    margin:22px 0 35px;

}

.consultation p{

    max-width:560px;

    margin:0 auto 60px;

}

.consultation-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 46px;

    border:1px solid var(--color-border);

    font-family:var(--font-sans);

    font-size:.72rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    transition:all .35s ease;

}

.consultation-button:hover{

    background:var(--color-text);

    color:#FFF;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.maison-hero{

padding-top:150px;

}

.maison-hero-image img{

height:70vh;

min-height:600px;

}

.philosophy-image img{

height:620px;

}

.signature-grid{

grid-template-columns:1fr;

gap:70px;

}

}



@media(max-width:768px){

.maison-hero{

padding-top:120px;

}

.maison-heading{

width:92%;

}

.maison-heading p{

font-size:1.5rem;

}

.maison-hero-image{

margin-top:70px;

}

.maison-hero-image img{

height:60vh;

min-height:420px;

}

.manifesto,
.philosophy,
.signature,
.audience,
.promise,
.consultation{

padding:140px 0;

}

.philosophy-image{

margin-top:90px;

}

.philosophy-image img{

height:420px;

}

.signature-grid{

margin-top:80px;

}

}