/*=========================================================
HERO
=========================================================*/

.hero{

    position:relative;

    min-height:585px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#111;

}

/* font-size/line-height come from the base h1 rule in common.css (the
   Boutique Services standard). max-width is this hero's own layout. */
.hero h1{

    max-width:620px;

}

.hero-image{

    position:absolute;

    inset:0;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Darkest at the left so the copy stays legible while the photograph
   remains visible on the right, as in the design. */
.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(28,22,17,.74) 0%,
        rgba(28,22,17,.60) 32%,
        rgba(28,22,17,.22) 62%,
        rgba(28,22,17,.10) 100%
    );

}

.hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    max-width:620px;

    color:var(--surface);

}

/* White for contrast against the dark photo behind it - margin-bottom
   comes from the base h1 rule in common.css. */
.hero-content h1{

    color:var(--surface);

}

.hero-divider{

    width:60px;

    height:1px;

    background:var(--primary);

    margin-bottom:26px;

}

.hero-content p{

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

    margin-bottom:12px;

}

.hero-content .btn-primary{

    margin-top:15px;

}


/*=========================================================
INTRODUCTION
=========================================================*/

.intro-section{

    background:var(--surface);
    padding:22px 0;

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

    align-items:center;

}

.intro-image{

    overflow:hidden;

}

.intro-image img{

    width:100%;

    transition:.6s;
    aspect-ratio:16/10;

    object-fit:cover;

}

.intro-image:hover img{

    transform:scale(1.04);

}

.intro-content{

    max-width:560px;

}

.intro-content h2{

    margin-bottom:10px;

}

.intro-content p:last-child{

    margin-bottom:0;

}


/*=========================================================
PEOPLE
=========================================================*/
.people-section{

    background:var(--surface);
    padding:22px 0;

}

.people-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

    align-items:center;

}

.people-content{

    max-width:560px;

}

.people-content h2{

    margin-bottom:10px;

}

/* In the design this reads as a quiet gold aside inside the copy,
   not a pulled-out block quote. */
.people-content blockquote{

    margin:4px 0 14px;

    font-family:"Cormorant Garamond",serif;

    font-size:19px;

    line-height:1.45;

    color:var(--primary);

    font-style:italic;

}

.people-image{

    overflow:hidden;

}

.people-image img{

    width:100%;

    transition:.6s;
    aspect-ratio:16/10;

    object-fit:cover;

}

.people-image:hover img{

    transform:scale(1.04);

}


/*=========================================================
EDITORIAL SECTION SPACING
=========================================================*/

.intro-content,
.people-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}


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

@media(max-width:1200px){

.hero-content{

    max-width:500px;

}

.intro-grid,
.people-grid{

    gap:60px;

}

}


@media(max-width:992px){

.hero{

    min-height:540px;

}

.hero-content{

    max-width:100%;

}

.intro-grid,
.people-grid{

    grid-template-columns:1fr;

}

.people-image{

    order:-1;

}

.intro-content,
.people-content{

    max-width:100%;

}

}


@media(max-width:768px){

.hero{

    min-height:500px;

}

.hero-content{

    text-align:center;

}

.hero-divider{

    margin:25px auto;

}

.intro-grid,
.people-grid{

    gap:40px;

}


.philosophy-item{
    border-right:none;
    border-bottom:1px solid var(--border);
}

.philosophy-item:last-child{
    border-bottom:none;
}

}


@media(max-width:480px){

.hero{

    min-height:460px;

}

}

/*=========================================================
OUR PHILOSOPHY
=========================================================*/

.philosophy-section{

    background:var(--surface);

     padding:52px 0 58px;

}

.philosophy-section .section-title{

    margin-bottom:34px;

}

.philosophy-grid{

    display:grid;

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

    border-top:1px solid var(--border);

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

}









/*=========================================================
OUR PHILOSOPHY RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.philosophy-grid{

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

}

.philosophy-item:nth-child(3){

    border-right:none;

}

}

@media(max-width:768px){

.philosophy-grid{

    grid-template-columns:1fr;

}





}

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

.editorial-section{
    background:var(--background);
    padding:64px 0;
}

.home-editorial-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:36px;
    align-items:start;
}

.home-editorial-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
}

.home-editorial-card img{
    width:100%;
    aspect-ratio:384/192;
    object-fit:cover;
    display:block;
    transition:.6s;
}

.home-editorial-card:hover img{transform:scale(1.03);}

.home-editorial-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding-top:18px;
}

.home-editorial-content h3{
    font-size:30px;
    line-height:1.18;
    margin-bottom:12px;
}

.home-editorial-content p{margin-bottom:18px;}

.home-editorial-content strong{font-weight:700;color:#222;}

.home-editorial-content blockquote{
    font-family:"Cormorant Garamond",serif;
    font-size:34px;
    color:var(--primary);
    line-height:1.35;
    font-style:italic;
    margin:28px 0;
}

.home-editorial-button{
    display:inline-block;
    align-self:flex-start;
    margin-top:auto;
    padding:16px 30px;
    background:#d9b4af;
    color:#44312d;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:13px;
    font-weight:600;
}

.home-editorial-button:hover{background:#cda19b;}

@media(max-width:1100px){
 .home-editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:768px){
 .home-editorial-grid{grid-template-columns:1fr;gap:56px;}
}


/*=========================================================
VISIT
=========================================================*/

.visit-section{

    background:var(--surface);

    padding:58px 0 66px;

}

.visit-grid{

    display:grid;

    grid-template-columns:42% 58%;

    gap:70px;

    align-items:center;

}

.visit-content{

    max-width:520px;

}

.visit-content h2{

    margin-bottom:12px;

}

.visit-content p{

    margin-bottom:10px;

}

.visit-content .btn-primary{

    margin-top:20px;

}

.visit-image{

    overflow:hidden;

}

.visit-image img{

    width:100%;

    transition:.6s;

}

.visit-image:hover img{

    transform:scale(1.03);

}

/*=========================================================
VISIT RESPONSIVE
=========================================================*/

@media(max-width:992px){

.visit-grid{

grid-template-columns:1fr;

}

.visit-content{

max-width:100%;

}

}

@media(max-width:768px){

.visit-section{

padding:70px 0;

}

}