/*=========================================================
SHARED - EYEBROW LABEL
=========================================================*/

/* .eyebrow now lives in common.css - these were its values, and they
   are the shared default. */

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

.showroom-hero{

    padding:0;

    background:var(--rose-tint);

}

.showroom-hero-inner{

    display:grid;

    grid-template-columns:1fr 1.35fr;

    align-items:center;

    min-height:500px;

}

/* Text panel padding, paragraph type and image sizing come from the
   shared split-hero rules in common.css. */
.showroom-hero-text h1{

    margin-top:14px;

}

.showroom-hero-text p{

    max-width:360px;

}

.showroom-hero-image{

    position:relative;

    height:100%;

    min-height:500px;

}

/* Fade shape/colour are shared - this hero's own fade width. */
.showroom-hero-image::before{

    width:120px;

}

/*=========================================================
A SPACE DESIGNED
=========================================================*/

.showroom-space{

    padding:70px 0;

}

.showroom-space-grid{

    display:grid;

    grid-template-columns:1fr 1.6fr;

    gap:55px;

    align-items:start;

}

.showroom-space-text h2{

    font-size:36px;

    line-height:1.25;

    margin-bottom:10px;

}

.showroom-space-text p{

    font-size:13px;

    line-height:1.85;

    max-width:360px;

}

.showroom-gallery{

    display:grid;

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

    gap:22px;

}

.showroom-gallery-item img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.showroom-gallery-item figcaption{

    margin-top:14px;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:19px;

    color:var(--text);

}

/*=========================================================
OUR APPROACH
=========================================================*/

.showroom-approach{

    padding:0;

    background:#f4ece4;

}

.showroom-approach-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    align-items:center;

    gap:60px;

    max-width:1360px;

    margin:0 auto;

    padding:52px 20px;

}

.showroom-approach-image img{

    width:100%;

    height:310px;

    object-fit:cover;

}

.showroom-approach-text h2{

    font-size:36px;

    line-height:1.25;

    margin-bottom:6px;

}

.showroom-approach-text p{

    font-size:13px;

    line-height:1.9;

}

/*=========================================================
FEATURE COLUMNS
=========================================================*/

.showroom-features{

    padding:55px 0;

}

.showroom-features-grid{

    display:grid;

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

}











/*=========================================================
APPOINTMENT CTA
=========================================================*/

.showroom-appointment{

    padding:0 0 70px;

}

.showroom-appointment-band{

    display:grid;

    grid-template-columns:0.85fr auto 1.5fr;

    align-items:center;

    gap:36px;

    background:#f5efe7;

}

.showroom-appointment-image img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.showroom-appointment-icon{

    width:96px;

    height:96px;

    border:1px solid #c9ae8c;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.showroom-appointment-icon img{

    width:40px;

    height:40px;

}

.showroom-appointment-text{

    padding:26px 40px 26px 0;

}

.showroom-appointment-text h3{

    font-size:26px;

    margin-bottom:10px;

}

.showroom-appointment-text p{

    font-size:13px;

    line-height:1.75;

    margin-bottom:18px;

}

.showroom-appointment-text .btn-outline{

    color:var(--primary);

}

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

@media(max-width:1200px){

.showroom-features-grid{

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

    gap:32px 0;

}

.showroom-feature:nth-child(3){

    border-right:none;

}

}

@media(max-width:992px){

.showroom-hero-inner,
.showroom-space-grid,
.showroom-approach-grid{

    grid-template-columns:1fr;

    gap:32px;

}

.showroom-hero-image{

    min-height:340px;

    order:-1;

}

/* ::before disable at this breakpoint is shared in common.css. */

.showroom-space-text p{

    max-width:none;

}

.showroom-appointment-band{

    grid-template-columns:1fr;

    gap:0;

    text-align:center;

    justify-items:center;

}

.showroom-appointment-image{

    width:100%;

}

.showroom-appointment-icon{

    margin-top:26px;

}

.showroom-appointment-text{

    padding:22px 24px 30px;

}

}

@media(max-width:768px){

.showroom-gallery{

    grid-template-columns:1fr;

    gap:26px;

}

.showroom-gallery-item img{

    height:300px;

}

.showroom-features-grid{

    grid-template-columns:1fr;

    gap:34px;

}



.showroom-space-text h2,
.showroom-approach-text h2{

    font-size:30px;

}


.showroom-feature{
    border-right:none;
    padding:0;
}

}