@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');


/* =====================
   GLOBAL SETTINGS
===================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root {
    /* MAIN SURFACES */
    --beige: #eee6da;
    --beige-soft: #f6f1e9;
    --beige-deep: #dfd2c1;

    /* OLIVE */
    --olive: #66705a;
    --olive-soft: #858a70;
    --olive-deep: #3d4537;
    --olive-darkest: #252b22;

    /* DEEP RED */
    --deep-red: #76282f;
    --deep-red-dark: #501b20;
    --deep-red-soft: #9a5558;

    /* NEUTRALS */
    --brown-dark: #2b231e;
    --text-dark: #352b25;
    --text-muted: #71665e;
    --text-light: #f8f4ee;
    --card-bg: #fbf8f2;

    /* WARM DETAIL — NOT MAIN BUTTON COLOUR */
    --warm-accent: #d1aa79;

    --border-soft: rgba(53, 43, 37, 0.13);
}
body{

    font-family:'Poppins', sans-serif;
    background: var(--beige);
    color:var(--text-dark);

    overflow-x:hidden;
    width:100%;

}


html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}



/* =====================
   NAVIGATION
===================== */


header{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;


}


nav{


    height:100px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 8%;


    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,255,255,0.25);


}

/* =========================================
   NAVIGATION DROPDOWNS
========================================= */
/* =========================================
   NEW LUXURY NAVIGATION
========================================= */

.navbar,
.site-header {
    background: rgba(43, 33, 29, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-links a,
.nav-menu a {
    color: var(--text-light);
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nav-links > li {
    position: relative;
}


.nav-links > li > a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 38px 0;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.8px;

    white-space: nowrap;

    transition: color 0.3s ease;
}


.nav-links > li > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 28px;

    width: 100%;
    height: 1px;

    background: #d6b06a;

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 0.35s ease;
}


.nav-links > li > a:hover {
    color: #d6b06a;
}


.nav-links > li > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


.dropdown-arrow {
    display: inline-block;

    font-size: 14px;

    transition: transform 0.3s ease;
}


.nav-dropdown:hover
.dropdown-arrow {
    transform: rotate(180deg);
}


/* =========================================
   EXPLORE MEGA MENU
========================================= */

.explore-menu {
    position: absolute;

    top: 82px;
    right: -260px;

    width: min(820px, 86vw);

    padding: 32px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(176, 141, 87, 0.16),
            transparent 30%
        ),
        rgba(38, 29, 24, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(16px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.explore-dropdown:hover
.explore-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* MENU HEADING */

.explore-menu-heading {
    padding-bottom: 24px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.explore-menu-heading span {
    display: block;

    margin-bottom: 8px;

    color: #d6b06a;

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.explore-menu-heading h3 {
    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 32px;
    font-weight: 500;
}


/* MENU CONTENT */

.explore-menu-content {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr;

    gap: 38px;

    padding-top: 27px;
}


.explore-category h4 {
    margin-bottom: 18px;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;
    font-weight: 500;
}


.explore-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 3px 25px;
}


.explore-links a {
    position: relative;

    padding: 9px 0 9px 16px;

    color:
        rgba(255, 255, 255, 0.76);

    text-decoration: none;

    font-size: 11px;
    line-height: 1.5;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


.explore-links a::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 6px;
    height: 1px;

    background: #b08d57;

    transform: translateY(-50%);

    transition: width 0.3s ease;
}


.explore-links a:hover {
    padding-left: 23px;

    color: #d6b06a;
}


.explore-links a:hover::before {
    width: 14px;
}


/* FEATURED SIDE */

.explore-feature {
    padding: 27px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid rgba(255, 255, 255, 0.1);
}


.explore-feature > span {
    color: #d6b06a;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.explore-feature p {
    margin: 17px 0 23px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 11px;
    line-height: 1.8;
}


.explore-feature a {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 1.7px;
    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.explore-feature a:hover {
    gap: 20px;

    color: #d6b06a;
}


/* =========================================
   HELP DROPDOWN
========================================= */

.help-menu {
    position: absolute;

    top: 82px;
    right: 0;

    min-width: 225px;

    margin: 0;
    padding: 11px;

    display: block;

    list-style: none;

    background:
        rgba(38, 29, 24, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(14px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.help-dropdown:hover
.help-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


.help-menu li {
    width: 100%;
}


.help-menu li a {
    display: block;

    padding: 12px 14px;

    color:
        rgba(255, 255, 255, 0.78);

    text-decoration: none;

    font-size: 11px;

    transition:
        padding-left 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}


.help-menu li a:hover {
    padding-left: 21px;

    color: #d6b06a;

    background:
        rgba(255, 255, 255, 0.06);
}

/* =========================================
   MOBILE MENU BUTTON
========================================= */

.mobile-menu-toggle {
    display: none;
}


.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 9px;

    cursor: pointer;

    flex-direction: column;
    justify-content: center;

    gap: 6px;

    border:
        1px solid rgba(255, 255, 255, 0.35);
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 1px;

    background: #ffffff;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}
/* LOGO */


.logo img{


    width:140px;

    max-height:65px;

    height:auto;

    object-fit:contain;


}





/* MENU */


nav ul{


    display:flex;

    gap:45px;

    list-style:none;


}



nav ul li a{


    text-decoration:none;

    color:white;

    font-size:16px;

    font-weight:400;

    letter-spacing:1px;

    transition:0.4s;


}



nav ul li a:hover{


    color:#d6b06a;


}






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

/* =========================================
   CINEMATIC LUXURY HERO
========================================= */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 150px 9% 80px;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
}


/* BACKGROUND IMAGE */

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -4;
    overflow: hidden;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    transform: scale(1.02);
    animation: heroImageZoom 18s ease-in-out infinite alternate;
}

@keyframes heroImageZoom {
    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1.18);
    }
}


/* DARK GRADIENT AND BLUR LAYER */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(15, 11, 9, 0.68) 0%,
            rgba(15, 11, 9, 0.42) 42%,
            rgba(15, 11, 9, 0.18) 75%,
            rgba(15, 11, 9, 0.35) 100%
        ),
        linear-gradient(
            to top,
            rgba(15, 11, 9, 0.62),
            transparent 45%
        );
    backdrop-filter: blur(1px);
}


/* SUBTLE TEXTURE */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.14;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );
    background-size: 90px 90px;
}


/* GOLD EDGE */

.hero::after {
    content: "";
    position: absolute;
    top: 22%;
    left: 5%;
    width: 1px;
    height: 56%;
    background:
        linear-gradient(
            transparent,
            #c6a46a,
            transparent
        );
    opacity: 0.8;
}


/* HERO TEXT */

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 850px;
    padding: 40px 0 40px 45px;
    animation: heroContentEnter 1.4s ease forwards;
}

@keyframes heroContentEnter {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.hero-label {
    display: inline-block;
    margin-bottom: 26px;
    color: #d7bb88;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero-label::before {
    content: "";
    display: inline-block;
    width: 55px;
    height: 1px;
    margin-right: 16px;
    vertical-align: middle;
    background: #c6a46a;
}


.hero h1 {
    max-width: 820px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(62px, 7.8vw, 118px);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -2px;
    text-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.hero h1 em {
    display: block;
    margin-top: 15px;
    color: #d6b06a;
    font-weight: 500;
}


.hero-content > p {
    max-width: 650px;
    margin: 34px 0 42px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
}


/* BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}


.hero-primary-button,
.hero-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}


.hero-primary-button {
    padding: 18px 34px;
    background: #b08d57;
    border: 1px solid #b08d57;
    color: #ffffff;
}

.hero-primary-button:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #30251f;
    transform: translateY(-5px);
}


.hero-secondary-button {
    gap: 18px;
    padding: 17px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    color: #ffffff;
}

.hero-secondary-button span {
    font-size: 20px;
    transition: transform 0.4s ease;
}

.hero-secondary-button:hover {
    color: #d6b06a;
    border-color: #d6b06a;
    transform: translateY(-4px);
}

.hero-secondary-button:hover span {
    transform: translateX(8px);
}


/* DECORATIVE CIRCLES */

.hero-decoration {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.hero-circle-one {
    right: 8%;
    top: 21%;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(214, 176, 106, 0.55);
    animation: heroCircleFloat 8s ease-in-out infinite;
}

.hero-circle-two {
    right: 15%;
    bottom: 12%;
    width: 90px;
    height: 90px;
    background: rgba(214, 176, 106, 0.13);
    border: 1px solid rgba(214, 176, 106, 0.4);
    backdrop-filter: blur(8px);
    animation: heroCircleFloat 6s ease-in-out infinite reverse;
}

@keyframes heroCircleFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}


/* SIDE TEXT */

.hero-side-text {
    position: absolute;
    right: 3.5%;
    top: 50%;
    display: flex;
    gap: 35px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    z-index: 3;
}

.hero-side-text span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* SCROLL INDICATOR */

.scroll-indicator {
    position: absolute;
    left: 9%;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    z-index: 3;
}

.scroll-indicator span {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.scroll-line {
    position: relative;
    width: 65px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
}

.scroll-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #d6b06a;
    animation: scrollLineMove 2s ease-in-out infinite;
}

@keyframes scrollLineMove {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}


/* RESPONSIVE HERO */

@media (max-width: 900px) {

    .hero {
        min-height: 900px;
        padding: 150px 7% 90px;
    }

    .hero-content {
        padding-left: 25px;
    }

    .hero-content > p {
        max-width: 550px;
        font-size: 16px;
    }

    .hero-circle-one {
        right: -80px;
        top: 25%;
        width: 220px;
        height: 220px;
    }

    .hero-side-text {
        display: none;
    }
}


@media (max-width: 600px) {

    .hero {
        min-height: 820px;
        padding: 130px 6% 80px;
    }

    .hero::after {
        left: 3%;
    }

    .hero-content {
        padding-left: 20px;
    }

    .hero h1 {
        font-size: 58px;
        line-height: 0.94;
    }

    .hero-label {
        font-size: 9px;
        line-height: 1.8;
        letter-spacing: 2px;
    }

    .hero-label::before {
        width: 28px;
        margin-right: 10px;
    }

    .hero-content > p {
        margin: 28px 0 34px;
        font-size: 15px;
    }

    .hero-buttons {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .hero-primary-button {
        width: 100%;
    }

    .hero-circle-one {
        opacity: 0.5;
    }

    .scroll-indicator {
        left: 8%;
    }
}









/* BUTTON */


.button{


    display:inline-block;


    padding:16px 45px;


    border:1px solid #d6b06a;


    color:white;


    text-decoration:none;


    text-transform:uppercase;


    letter-spacing:2px;


    font-size:14px;


    transition:0.5s;


}

/* .experience .button{


background:#b08d57;

color:white;

border:none;


} */



.experience .button:hover{


background:#3b3028;

color:white;


}





.button:hover{


    background:#d6b06a;


    transform:translateY(-5px);


}








/* =====================
   FUTURE SECTIONS
===================== */


.section{


    padding:100px 8%;


}




.section h2{


    font-family:'Cormorant Garamond',serif;

    font-size:55px;

}






/* =====================
   FOOTER
===================== */


footer{


    background:#2d241d;

    color:white;

    padding:30px;

    text-align:center;


}





/* =====================
   MOBILE DESIGN
===================== */


@media(max-width:768px){



nav{


    padding:0 5%;

}



.logo img{


    width:100px;


}








.hero{


    padding-left:5%;


}




.hero-content{


    padding:30px;


}



.hero h1{


    font-size:50px;


}



.hero p{


    font-size:18px;


}



}

/* =========================
   HOMEPAGE SECTIONS
========================= */



.intro{


display:flex;

align-items:center;

gap:80px;

padding:120px 10%;

background:#f5f0e8;


}



.intro-image img{


width:500px;

height:600px;

object-fit:cover;

box-shadow:0 20px 50px rgba(0,0,0,.15);


}




.intro-text{


max-width:500px;


}



.intro h2,
.collections h2,
.features h2{


font-family:'Cormorant Garamond';

font-size:60px;

margin-bottom:30px;


}



.intro p{


line-height:2;

margin-bottom:30px;


}




.dark{


background:#3b3028;

border:none;


}





/* FULL IMAGE SECTION */


/* /* .statement{


height:70vh;


background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),

url("images/statement.jpg");

background-size:cover;

background-position:center;


display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;


} */

/* .statement {
    min-height: 60vh;

    background:
        linear-gradient(
            rgba(20, 14, 11, 0.52),
            rgba(20, 14, 11, 0.62)
        ),
        url("images/statement.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 7%;

    text-align: center;
    color: #ffffff;
} */

/* 
/* .statement h2{


font-family:'Cormorant Garamond';

font-size:70px;


} */

/* .statement h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 6vw, 76px);
    font-weight: 500;

    margin-bottom: 15px;

    text-shadow:
        0 8px 30px rgba(0, 0, 0, 0.45);
}
.statement p {
    font-size: 16px;

    color: rgba(255, 255, 255, 0.84);
}
 */ 

/* =========================================
   TIMELESS SPACES STATEMENT
========================================= */

.statement {
    position: relative;

    min-height: 72vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 100px 8%;

    overflow: hidden;

    text-align: center;

    color: #ffffff;

    isolation: isolate;
}


/* MOVING BACKGROUND */

.statement::before {
    content: "";

    position: absolute;
    inset: -5%;

    z-index: -3;

    background:
        url("images/homepage/timeless-spaces.jpg");

    background-size: cover;
    background-position: center 55%;

    transform: scale(1.06);

    animation:
        timelessBackground 16s
        ease-in-out infinite alternate;
}


.statement::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            rgba(21, 15, 12, 0.46),
            rgba(21, 15, 12, 0.66)
        );
}


@keyframes timelessBackground {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1.14);
    }

}


.statement > div {
    max-width: 900px;

    padding: 45px;

    background:
        rgba(30, 23, 18, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(5px);
}


.statement h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(54px, 7vw, 92px);

    font-weight: 500;
    line-height: 0.95;

    text-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.42);
}


.statement p {
    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 16px;
    line-height: 1.8;
}


@media (max-width: 600px) {

    .statement {
        min-height: 620px;

        padding: 75px 6%;
    }


    .statement::before {
        background-position: center 70%;
    }


    .statement > div {
        padding: 35px 22px;
    }

}







/* COLLECTIONS */


/* .collections{




padding:120px 8%;

text-align:center;


}



.collection-grid{


display:grid;

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

gap:35px;


}



.collection-card{


background:white;

overflow:hidden;

transition:.5s;


}



.collection-card:hover{


transform:translateY(-15px);


}



.collection-card img{


width:100%;

height:400px;

object-fit:cover;


}



.collection-card h3{


padding:25px;

font-size:25px;


} */

/* =========================================
   LUXURY COLLECTIONS SECTION
========================================= */




/* SECTION HEADING */

.collections {
    position: relative;
    z-index: 2;

    padding: 100px 5% 100px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(176, 141, 87, 0.1),
            transparent 30%
        ),
        #f5f0e8;
}

.collections-heading {
    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;
}


.collections-heading > span {
    display: inline-block;

    margin-bottom: 18px;

    color: #a47d48;

    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.collections-heading h2 {
    font-family: "Cormorant Garamond", serif;

    color: #30251f;

    font-size: clamp(55px, 7vw, 82px);
    font-weight: 500;
    line-height: 1;
}

.collections-heading h2::after{
    content:"";

    display:block;

    width:90px;
    height:2px;

    background:#c8a76d;

    margin:20px auto 0;
}


.collections-heading p {
    max-width: 650px;

    margin: 24px auto 0;

    color: #75685e;

    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   FEATURED COLLECTIONS FOOTER
========================================= */

.collections-more {
    margin-top: 55px;

    text-align: center;
}


.collections-more p {
    margin-bottom: 18px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.7;
}


.collections-more-link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(176, 141, 87, 0.8);

    color: #3b3028;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.collections-more-link:hover {
    gap: 23px;

    color: #b08d57;
}

/* =========================================
   LUXURY COLLECTIONS GALLERY
========================================= */


/* COLLECTION GRID */

.collection-grid {
    width: 88%;
    max-width: 1240px;

    margin: 55px auto 0;

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

    gap: 20px;
}





.collections::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 70px;

    width: 90px;
    height: 1px;

    background: #b08d57;

    transform: translateX(-50%);
}
/* COLLECTION CARD */

.collection-card {
    position: relative;

    border-radius:14px;



    height: 380px;

    overflow: hidden;

    background: #2d241d;

    box-shadow:
        0 16px 42px rgba(45, 36, 29, 0.12);

    cursor: pointer;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.collection-card {
    display: block;

    color: inherit;
    text-decoration: none;
}


.collection-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 26px 65px rgba(45, 36, 29, 0.22);

        outline:1px solid rgba(214,176,106,.55);
        outline-offset: 4px;
}

.collection-card {
    scroll-margin-top: 125px;
}


/* IMAGE */

.collection-card img {
    width: 100%;
    height: 100%;

    border-radius: 18px;

    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.6s ease;
}


.collection-card:hover img {
    transform: scale(1.08);

    filter: brightness(0.74);
}

.collection-card {
    animation: collectionAppear 0.8s ease both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
}


.collection-card:nth-child(2) {
    animation-delay: 0.08s;
}


.collection-card:nth-child(3) {
    animation-delay: 0.16s;
}


.collection-card:nth-child(4) {
    animation-delay: 0.24s;
}


.collection-card:nth-child(5) {
    animation-delay: 0.08s;
}


.collection-card:nth-child(6) {
    animation-delay: 0.16s;
}


.collection-card:nth-child(7) {
    animation-delay: 0.24s;
}


.collection-card:nth-child(8) {
    animation-delay: 0.32s;
}


@keyframes collectionAppear {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* SOFT GRADIENT */

.collection-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(22, 15, 12, 0.88) 0%,
            rgba(22, 15, 12, 0.35) 38%,
            transparent 70%
        );

    pointer-events: none;

    transition: background 0.5s ease;
}


.collection-card:hover::after {
    background:
        linear-gradient(
            to top,
            rgba(22, 15, 12, 0.94) 0%,
            rgba(22, 15, 12, 0.58) 52%,
            rgba(22, 15, 12, 0.1) 100%
        );
}


/* TEXT CONTENT */

.collection-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 24px;

    z-index: 2;

    color: #ffffff;

    transform: translateY(34px);

    transition: transform 0.5s ease;
}


.collection-card:hover .collection-content {
    transform: translateY(0);
}


.collection-content h3 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(27px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.05;
    max-width: 100%;
    overflow-wrap: normal;

    text-shadow:
        0 5px 20px rgba(0, 0, 0, 0.35);
        
}


/* DESCRIPTION HIDDEN UNTIL HOVER */

.collection-content p {
    margin-top: 13px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 13px;
    line-height: 1.7;

    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}


.collection-card:hover .collection-content p {
    opacity: 1;

    transform: translateY(0);
}


/* TABLET */

/* SMALL LAPTOP */

@media (max-width: 1200px) {

    .collection-grid {
        width: 92%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }


    .collection-card {
        height: 360px;
    }


    .collection-content {
        left: 18px;
        right: 18px;
        bottom: 19px;
    }


    .collection-content h3 {
        font-size: 27px;
    }

}


/* TABLET */

@media (max-width: 900px) {

    .collection-grid {
        width: 90%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }


    .collection-card {
        height: 430px;
    }

}


/* PHONE */

@media (max-width: 650px) {

    .collections {
        padding: 82px 6% 110px;
    }


    .collection-grid {
       width: 100%;
       grid-template-columns: 1fr;
    }


    .collection-card {
        height: 420px;
    }


    .collection-content {
        left: 22px;
        right: 22px;
        bottom: 22px;

        transform: translateY(0);
    }


    .collection-content h3 {
        font-size: 34px;
    }


    .collection-content p {
        opacity: 1;

        transform: translateY(0);

        font-size: 12px;
    }

}








/* FEATURES */


.features{


padding:120px 8%;

text-align:center;


}



.feature-grid{


display:grid;

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

gap:40px;


}



.feature-grid div{


padding:40px;

background:white;


box-shadow:0 15px 40px rgba(0,0,0,.08);


}





/* SHOWROOM */


.showroom{


display:flex;

align-items:center;

gap:70px;

padding:120px 10%;


}



.showroom img{


width:50%;

height:600px;

object-fit:cover;


}




.showroom h2{


font-family:'Cormorant Garamond';

font-size:60px;


}






/* SCROLL ANIMATION */


.reveal{


animation:appear linear;

animation-timeline:view();

animation-range:entry 0% cover 30%;


}



@keyframes appear{


from{


opacity:0;

transform:translateY(80px);


}



to{


opacity:1;

transform:translateY(0);


}


}







@media(max-width:900px){


.intro,
.showroom{


flex-direction:column;


}



.collection-grid,
.feature-grid{


grid-template-columns:1fr;


}



.intro-image img,
.showroom img{


width:100%;


}


}

.experience{


padding:140px 10%;

display:flex;

align-items:center;

gap:80px;

background:#eee5d8;


}




.experience-image{


width:50%;


}



.experience-image img{


width:100%;

height:650px;

object-fit:cover;


}





.experience-content{


width:50%;


}



.experience-content h2{


font-family:'Cormorant Garamond';

font-size:65px;

margin-bottom:30px;


}




.experience-content p{


line-height:2;

}



.experience-points{


display:flex;

gap:30px;

margin:40px 0;


}



.experience-points h3{


font-family:'Cormorant Garamond';

font-size:45px;

color:#b08d57;


}




.experience-points p{


font-size:14px;


}




@media(max-width:900px){


.experience{

flex-direction:column;

}


.experience-image,
.experience-content{

width:100%;

}


}

/* =========================
   PHILOSOPHY SECTION
========================= */


.philosophy{


height:70vh;


background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("images/homepage/design-philosophy.jpg");


background-size:cover;

background-position:center;


display:flex;

justify-content:center;

align-items:center;


text-align:center;


color:white;


}





.philosophy-content{


max-width:850px;


padding:50px;


}





.philosophy h2{


font-family:'Cormorant Garamond';

font-size:75px;


margin-bottom:30px;


}



.philosophy p{


font-size:20px;

line-height:2;

font-weight:300;


}

/* =========================
CRAFTSMANSHIP
========================= */


.craftsmanship{


padding:120px 8%;

text-align:center;


background:#f5f0e8;


}



.craftsmanship h2{


font-family:'Cormorant Garamond';

font-size:65px;

margin-bottom:60px;


}



.craft-grid{


display:grid;

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

gap:35px;


}



.craft-card{


background:white;


transition:.5s;


overflow:hidden;


}



.craft-card:hover{


transform:translateY(-15px);


}



.craft-card img{


width:100%;


height:420px;


object-fit:cover;


}




.craft-card h3{


font-family:'Cormorant Garamond';


font-size:35px;


margin:25px 0 10px;


}



.craft-card p{


padding:0 30px 35px;


line-height:1.8;


}





@media(max-width:900px){


.craft-grid{

grid-template-columns:1fr;

}


}

/* NEOM DIFFERENCE */


.values{

padding:140px 8%;

background:#2d241d;

color:white;

}




.values-header {
max-width: 900px;
margin: 0 auto 80px;
 

text-align:center;

margin-bottom:80px;

}



/* .values-header h2{

font-family:'Cormorant Garamond';

font-size:75px;

} */

.values-header h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(52px, 6vw, 78px);
    font-weight: 500;
    line-height: 1;

    text-align: center;
}



.values-header p{

font-size:20px;

opacity:.8;

}



.values-container{


display:grid;

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

gap:40px;


}

.value-box{

min-height:300px;

display:flex;

flex-direction:column;

justify-content:center;

}



.value-box{


padding:50px;

border:1px solid rgba(255,255,255,.2);

transition:.5s;


}



.value-box:hover{


transform:translateY(-20px);

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


}



.value-box span{


font-size:50px;

font-family:'Cormorant Garamond';

color:#d6b06a;


}



.value-box h3{


font-family:'Cormorant Garamond';

font-size:35px;

margin:20px 0;


}



.value-box p{


line-height:2;

opacity:.85;


}



@media(max-width:900px){

.values-container{

grid-template-columns:1fr;

}

}

.hero::before{


filter:blur(1px);

animation:luxuryZoom 20s infinite alternate;


}



@keyframes luxuryZoom{


from{

transform:scale(1);

}



to{

transform:scale(1.15);

}


}

.hero-content::before{


content:"";

position:absolute;

width:80px;

height:2px;

background:#d6b06a;

top:20px;

left:20px;


animation:lineMove 3s infinite;


}



@keyframes lineMove{


0%{

width:20px;

}



50%{

width:100px;

}



100%{

width:20px;

}


}

.craft-story{


display:flex;

align-items:center;

gap:80px;

padding:140px 10%;


}



.craft-main-image{

width:50%;

}



.craft-main-image img{


width:100%;

height:650px;

object-fit:cover;


}



.craft-content{


width:50%;


}



.craft-content h2{


font-family:'Cormorant Garamond';

font-size:70px;


}



.craft-content p{


line-height:2;

margin:30px 0;


}



.mini-images{


display:flex;

gap:20px;


}



.mini-images img{


width:180px;

height:180px;

object-fit:cover;


}


@media(max-width:900px){

.craft-story{

flex-direction:column;

}

.craft-main-image,
.craft-content{

width:100%;

}

}

/* .brands{


padding:130px 10%;

text-align:center;

background:#2d241d;

color:white;


}



.brands h2{


font-family:'Cormorant Garamond';

font-size:70px;


}



.brands p{


margin:20px auto 60px;

max-width:700px;


}



.brand-container{


display:flex;

justify-content:center;

gap:50px;


}



.brand-box{


background:white;

color:#3b3028;

padding:50px;

width:400px;


} */

/* 

.brand-box img{


width:180px;

height:80px;

object-fit:contain;


}



.brand-box h3{


font-family:'Cormorant Garamond';

font-size:35px;

margin:25px;


}


@media(max-width:900px){

.brand-container{

flex-direction:column;

}

.brand-box{

width:100%;

}

} */



/* =========================================
   LOGO-FOCUSED BRANDS SECTION
========================================= */

.brands {
    position: relative;

    padding: 125px 7% 135px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(176, 141, 87, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(59, 48, 40, 0.08),
            transparent 30%
        ),
        #eee6da;

    color: #30251f;

    overflow: hidden;
}


/* LARGE DECORATIVE BACKGROUND WORD */

.brands::before {
    content: "BRANDS";

    position: absolute;
    left: 50%;
    top: 25px;

    transform: translateX(-50%);

    color: rgba(59, 48, 40, 0.035);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(90px, 16vw, 220px);
    font-weight: 600;
    letter-spacing: 18px;

    white-space: nowrap;

    pointer-events: none;
}


/* SECTION HEADING */

.brands-heading {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


.brands-heading > span {
    display: inline-block;

    margin-bottom: 18px;

    color: #a47d48;

    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.brands-heading h2 {
    font-family: "Cormorant Garamond", serif;

    color: #30251f;

    font-size: clamp(52px, 6vw, 78px);
    font-weight: 500;
    line-height: 1;
}


.brands-heading h2::after {
    content: "";

    display: block;

    width: 85px;
    height: 1px;

    margin: 22px auto 0;

    background: #b08d57;
}


.brands-heading p {
    max-width: 680px;

    margin: 24px auto 0;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
}


/* BRAND GRID */

.brand-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1200px;

    margin: auto;

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

    gap: 24px;
}


/* LOGO CARD */

.brand-logo-card {
    position: relative;

    min-height: 390px;

    padding: 48px 35px 38px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    background:
        rgba(255, 255, 255, 0.68);

    border:
        1px solid rgba(59, 48, 40, 0.12);

    color: #30251f;

    text-align: center;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(45, 36, 29, 0.08);

    backdrop-filter: blur(10px);

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


.brand-logo-card:hover {
    transform: translateY(-12px);

    background: #ffffff;

    border-color:
        rgba(176, 141, 87, 0.55);

    box-shadow:
        0 28px 70px rgba(45, 36, 29, 0.17);
}


/* NUMBER */

.brand-number {
    position: absolute;
    top: 20px;
    right: 24px;

    color:
        rgba(176, 141, 87, 0.28);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 44px;
}


/* LOGO FRAME */

.brand-logo-frame {
    width: 230px;
    height: 145px;

    margin-top: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background: #ffffff;

    border:
        1px solid rgba(59, 48, 40, 0.08);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.brand-logo-card:hover
.brand-logo-frame {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(45, 36, 29, 0.12);
}


.brand-logo-frame img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* CARD CONTENT */

.brand-card-content h3 {
    margin-top: 28px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 35px;
    font-weight: 500;
}


.brand-card-content p {
    margin: 10px 0 24px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.7;
}


.brand-explore {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 5px;

    border-bottom:
        1px solid rgba(176, 141, 87, 0.7);

    color: #3b3028;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        gap 0.35s ease,
        color 0.35s ease;
}


.brand-logo-card:hover
.brand-explore {
    gap: 22px;

    color: #b08d57;
}


/* GOLD BOTTOM LINE */

.brand-logo-card::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #b08d57;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.45s ease;
}


.brand-logo-card:hover::after {
    transform: scaleX(1);
}


/* VIEW ALL */

.brands-page-link {
    position: relative;
    z-index: 2;

    margin-top: 55px;

    text-align: center;
}


.brands-outline-button {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    padding: 16px 27px;

    border:
        1px solid #3b3028;

    color: #3b3028;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.brands-outline-button:hover {
    background: #3b3028;

    color: #ffffff;

    transform: translateY(-5px);
}


/* TABLET */

@media (max-width: 950px) {

    .brand-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .brand-logo-card:last-child {
        grid-column: 1 / -1;

        width: 50%;

        justify-self: center;
    }

}


/* PHONE */

@media (max-width: 650px) {

    .brands {
        padding: 90px 6% 100px;
    }


    .brand-container {
        width: 100%;

        grid-template-columns: 1fr;
    }


    .brand-logo-card:last-child {
        grid-column: auto;

        width: 100%;
    }


    .brand-logo-card {
        min-height: 350px;
    }


    .brand-logo-frame {
        width: 210px;
        height: 125px;
    }

}

/* =========================================
   FINAL DISTINGUISHED BRANDS SECTION
========================================= */
/* 
/* .dw-brands {
    position: relative;

    padding: 120px 7% 130px;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(176, 141, 87, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 90%,
            rgba(59, 48, 40, 0.08),
            transparent 30%
        ),
        #eee5d8;

    color: #30251f;

    overflow: hidden;
}


/* DECORATIVE BACKGROUND WORD */
/* 
.dw-brands::before {
    content: "BRANDS";

    position: absolute;
    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(59, 48, 40, 0.035);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(95px, 15vw, 210px);
    font-weight: 600;
    letter-spacing: 15px;

    white-space: nowrap;

    pointer-events: none;
} */


/* HEADING */

/* .dw-brands-heading {
    position: relative;
    z-index: 2;

    max-width: 820px;

    margin: 0 auto 60px;

    text-align: center;
}


.dw-brands-heading > span {
    display: inline-block;

    margin-bottom: 16px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
} */

/* 
.dw-brands-heading h2 {
    font-family: "Cormorant Garamond", serif;

    color: #30251f;

    font-size: clamp(52px, 6vw, 76px);
    font-weight: 500;
    line-height: 1;
}


.dw-brands-heading h2::after {
    content: "";

    display: block;

    width: 85px;
    height: 1px;

    margin: 22px auto 0;

    background: #b08d57;
}


.dw-brands-heading p {
    max-width: 650px;

    margin: 23px auto 0;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
} */


/* GRID */

/* .dw-brands-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1150px;

    margin: auto;

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

    gap: 24px;
} */


/* BRAND CARD */

/* .dw-brand-card {
    position: relative;

    min-height: 365px;

    padding: 42px 28px 34px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(59, 48, 40, 0.12);

    color: #30251f;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 16px 42px rgba(45, 36, 29, 0.09);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
} */


/* .dw-brand-card:hover {
    transform: translateY(-11px);

    background: #ffffff;

    border-color:
        rgba(176, 141, 87, 0.55);

    box-shadow:
        0 28px 70px rgba(45, 36, 29, 0.17);
} */


/* NUMBER */

/* .dw-brand-number {
    position: absolute;
    top: 18px;
    right: 22px;

    color: rgba(176, 141, 87, 0.25);

    font-family: "Cormorant Garamond", serif;
    font-size: 42px;
} */


/* LOGO CONTAINER */

/* .dw-brand-logo {
    width: 230px;
    height: 135px;

    margin-bottom: 28px;
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border:
        1px solid rgba(59, 48, 40, 0.09);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.dw-brand-card:hover
.dw-brand-logo {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(45, 36, 29, 0.12);
}


.dw-brand-logo img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 0;
} */


/* TEXT */

/* .dw-brand-card h3 {
    font-family: "Cormorant Garamond", serif;

    color: #30251f;

    font-size: 35px;
    font-weight: 500;
    line-height: 1.1;
}


.dw-brand-card p {
    margin: 11px 0 23px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.7;
}


.dw-brand-link {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 5px;

    border-bottom:
        1px solid rgba(176, 141, 87, 0.7);

    color: #3b3028;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        gap 0.35s ease,
        color 0.35s ease;
}


.dw-brand-card:hover
.dw-brand-link {
    gap: 22px;

    color: #b08d57;
} */


/* GOLD BOTTOM LINE */

/* .dw-brand-card::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #b08d57;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.45s ease;
}


.dw-brand-card:hover::after {
    transform: scaleX(1);
} */


/* VIEW ALL BRANDS BUTTON */

/* .dw-brands-button-area {
    position: relative;
    z-index: 2;

    margin-top: 50px;

    text-align: center;
}


.dw-brands-button {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    padding: 15px 25px;

    border: 1px solid #3b3028;

    color: #3b3028;

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.dw-brands-button:hover {
    background: #3b3028;

    color: #ffffff;

    transform: translateY(-4px);
} */


/* TABLET */

/* @media (max-width: 950px) {

    .dw-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dw-brand-card:last-child {
        grid-column: 1 / -1;

        width: 50%;

        justify-self: center;
    }

} */


/* PHONE */

/* @media (max-width: 650px) {

    .dw-brands {
        padding: 85px 6% 95px;
    }


    .dw-brands-grid {
        width: 100%;

        grid-template-columns: 1fr;
    }


    .dw-brand-card:last-child {
        grid-column: auto;

        width: 100%;
    }


    .dw-brand-card {
        min-height: 335px;
    }


    .dw-brand-logo {
        width: 210px;
        height: 120px;
    }

}  */

/* =========================================
   DISTINGUISHED BRANDS — GLASS DESIGN
========================================= */

.dw-brands {
    position: relative;

    padding: 125px 7% 135px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(176, 141, 87, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(59, 48, 40, 0.09),
            transparent 32%
        ),
        #e9dfd1;

    color: #30251f;
}


/* DECORATIVE BACKGROUND WORD */

.dw-brands::before {
    content: "BRANDS";

    position: absolute;
    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(59, 48, 40, 0.035);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(95px, 15vw, 210px);
    font-weight: 600;
    letter-spacing: 15px;

    white-space: nowrap;
    pointer-events: none;
}


/* HEADING */

.dw-brands-heading {
    position: relative;
    z-index: 2;

    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;
}


.dw-brands-heading > span {
    display: inline-block;

    margin-bottom: 17px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.dw-brands-heading h2 {
    color: #30251f;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(52px, 6vw, 76px);
    font-weight: 500;
    line-height: 1;
}


.dw-brands-heading h2::after {
    content: "";

    display: block;

    width: 85px;
    height: 1px;

    margin: 22px auto 0;

    background: #b08d57;
}


.dw-brands-heading p {
    max-width: 650px;

    margin: 23px auto 0;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
}


/* GRID */

.dw-brands-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1200px;

    margin: auto;

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

    gap: 25px;
}


/* BRAND CARD */

.dw-brand-card {
    position: relative;

    min-height: 530px;

    padding: 52px 34px 42px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(59, 48, 40, 0.13);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.2)
        );

    color: #30251f;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 18px 50px rgba(45, 36, 29, 0.1);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease;
}


.dw-brand-card:hover {
    transform: translateY(-12px);

    border-color:
        rgba(176, 141, 87, 0.6);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.3)
        );

    box-shadow:
        0 32px 80px rgba(45, 36, 29, 0.19);
}


/* NUMBER */

.dw-brand-number {
    position: absolute;
    top: 18px;
    right: 22px;

    color:
        rgba(176, 141, 87, 0.25);

    font-family: "Cormorant Garamond", serif;
    font-size: 42px;
}


/* COUNTRY TAG */

.dw-brand-country {
    display: inline-block;

    align-self: center;

    margin-bottom: 24px;

    color: #a47d48;

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* FROSTED LOGO PANEL */

/* .dw-brand-logo-glass {
    width: 235px;
    height: 145px;

    margin: 0 auto 30px;
    padding: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.65);

    background:
        rgba(255, 255, 255, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 42px rgba(45, 36, 29, 0.09);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease;
} */
.dw-brand-logo-glass {
    width: 235px;
    height: 145px;

    margin: 0 auto 30px;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    box-shadow: none;

    transition:
        transform .45s ease,
        filter .45s ease;
}

/* .dw-brand-card:hover
.dw-brand-logo-glass {
    transform:
        translateY(-5px)
        scale(1.025);

    background:
        rgba(255, 255, 255, 0.32);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 22px 50px rgba(176, 141, 87, 0.17);
} */
.dw-brand-card:hover .dw-brand-logo-glass {

    transform:
        translateY(-5px)
        scale(1.04);

    filter:
        drop-shadow(0 15px 22px rgba(176,141,87,.28));

}

.dw-brand-logo-glass img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    mix-blend-mode: multiply;
}


/* CONTENT */

.dw-brand-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}


.dw-brand-card h3 {
    color: #30251f;

    font-family: "Cormorant Garamond", serif;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.05;
}


.dw-brand-description {
    min-height: 48px;

    margin: 13px 0 25px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.7;
}


/* FEATURED COLLECTIONS */

.dw-brand-collections {
    width: 100%;

    margin-bottom: 28px;
    padding-top: 20px;

    border-top:
        1px solid rgba(59, 48, 40, 0.12);
}


.dw-brand-collections > span {
    display: block;

    margin-bottom: 13px;

    color: #a47d48;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.dw-brand-collections ul {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 7px 15px;

    list-style: none;
}


.dw-brand-collections li {
    position: relative;

    padding-left: 11px;

    color: #695d54;

    font-size: 11px;
    line-height: 1.6;
}


.dw-brand-collections li::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 4px;
    height: 1px;

    background: #b08d57;

    transform: translateY(-50%);
}


/* EXPLORE LINK */

.dw-brand-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(176, 141, 87, 0.7);

    color: #3b3028;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        gap 0.35s ease,
        color 0.35s ease;
}


.dw-brand-card:hover
.dw-brand-link {
    gap: 23px;

    color: #a47d48;
}


/* GOLD BOTTOM LINE */

.dw-brand-card::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #b08d57;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.45s ease;
}


.dw-brand-card:hover::after {
    transform: scaleX(1);
}


/* TABLET */

@media (max-width: 950px) {

    .dw-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dw-brand-card:last-child {
        grid-column: 1 / -1;

        width: 50%;

        justify-self: center;
    }

}


/* PHONE */

@media (max-width: 650px) {

    .dw-brands {
        padding: 90px 6% 100px;
    }


    .dw-brands-grid {
        width: 100%;

        grid-template-columns: 1fr;
    }


    .dw-brand-card,
    .dw-brand-card:last-child {
        grid-column: auto;

        width: 100%;
        min-height: 500px;
    }


    .dw-brand-logo-glass {
        width: 215px;
        height: 130px;
    }

}


 




/* ==========================
   FULL IMAGE BREAK
========================== */


.image-break{


height:75vh;


background:


linear-gradient(

rgba(0,0,0,.45),

rgba(0,0,0,.45)

),


url("images/homepage/luxury-space.jpg");



background-size:cover;


background-position:center;



display:flex;

justify-content:center;

align-items:center;



text-align:center;


color:white;


background-attachment:fixed;


}



.image-break-overlay{


max-width:900px;


padding:45px;


animation:fadeUp 1.5s ease;


}



/* .image-break h2{


font-family:'Cormorant Garamond';

font-size:75px;

letter-spacing:1px;


} */

.image-break h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(52px, 7vw, 86px);
    font-weight: 500;
    line-height: 0.95;

    margin-bottom: 24px;

    text-shadow:
        0 10px 35px rgba(0, 0, 0, 0.45);
}

/* .image-break p{


font-size:22px;

margin-top:25px;

font-weight:300;


} */

.image-break p {
    font-size: 17px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.84);
}


/* ==========================
 IMAGE SHOWCASE
========================== */


.visual-showcase{


padding:150px 10%;


display:grid;


grid-template-columns:1.2fr .8fr;


gap:60px;


align-items:center;



}



.showcase-large img{


width:100%;


height:650px;


object-fit:cover;


}



.showcase-content{


padding:40px;


}



.showcase-content h2{


font-family:'Cormorant Garamond';


font-size:65px;


margin-bottom:30px;


}



.showcase-content p{


line-height:2;


margin-bottom:40px;


}



.showcase-small{


grid-column:2;


margin-top:-180px;


}



.showcase-small img{


width:300px;


height:400px;


object-fit:cover;


box-shadow:0 20px 50px rgba(0,0,0,.2);


}




@media(max-width:900px){


.visual-showcase{


display:flex;

flex-direction:column;


}



.showcase-small{


margin-top:0;


}



}


/* =========================================
   LUXURY GENERAL BUTTON
========================================= */

.button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 30px;

    overflow: hidden;

    border:
        1px solid #b08d57;

    background: transparent;

    color: #3b3028;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}


.button::before {
    content: "";

    position: absolute;
    inset: 0;

    background: #b08d57;

    transform: translateX(-101%);

    transition: transform 0.45s ease;

    z-index: -1;
}


.button:hover {
    color: #ffffff;

    transform: translateY(-4px);
}


.button:hover::before {
    transform: translateX(0);
}


.button.dark {
    background: #3b3028;

    border-color: #3b3028;

    color: #ffffff;
}


.button.dark::before {
    background: #b08d57;
}

/* =========================================
   FLOATING WHATSAPP
========================================= */

/* .whatsapp-floating-button {
    position: fixed;
    right: 24px;
    bottom: 24px;

    z-index: 1500;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #25d366;

    color: #ffffff;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.whatsapp-floating-button:hover {
    transform:
        translateY(-7px)
        scale(1.04);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.35);
}


.whatsapp-symbol {
    font-size: 27px;
}


.whatsapp-floating-label {
    position: absolute;
    right: 75px;

    padding: 10px 15px;

    border-radius: 3px;

    background: #2d241d;

    color: #ffffff;

    white-space: nowrap;

    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    opacity: 0;

    transform: translateX(10px);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
} */

/* 
.whatsapp-floating-button:hover
.whatsapp-floating-label {
    opacity: 1;

    transform: translateX(0);
}


@media (max-width: 600px) {

    .whatsapp-floating-button {
        right: 15px;
        bottom: 15px;

        width: 56px;
        height: 56px;
    }


    .whatsapp-floating-label {
        display: none;
    }

} */


/* =========================================
   FLOATING WHATSAPP LOGO
========================================= */

.whatsapp-floating {
    position: fixed;
    right: 24px;
    bottom: 24px;

    z-index: 1500;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    box-shadow: none;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


.whatsapp-floating img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.whatsapp-floating:hover {
    transform:
        translateY(-6px)
        scale(1.08);

    filter:
        drop-shadow(
            0 12px 18px
            rgba(0, 0, 0, 0.22)
        );
}


/* TOOLTIP */

.whatsapp-tooltip {
    position: absolute;
    right: 72px;

    padding: 10px 14px;

    background: #2d241d;
    color: #ffffff;

    white-space: nowrap;

    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;

    transform: translateX(10px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.whatsapp-floating:hover
.whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


@media (max-width: 650px) {

    .whatsapp-floating {
        right: 16px;
        bottom: 16px;

        width: 46px;
        height: 46px;
    }


    .whatsapp-tooltip {
        display: none;
    }

}



 /* =========================================
   DESIGN PHILOSOPHY
=========================================

.design-philosophy {
    min-height: 720px;

    display: grid;
    grid-template-columns: 1.3fr 0.7fr;

    background: #2d241d;

    color: #ffffff;
}


.philosophy-image {
    position: relative;

    min-height: 720px;

    overflow: hidden;
}


.philosophy-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 60%,
            rgba(45, 36, 29, 0.75)
        );
}


.philosophy-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s ease;
}


.design-philosophy:hover
.philosophy-image img {
    transform: scale(1.045);
}


.philosophy-content {
    position: relative;

    padding: 100px 12% 100px 10%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.philosophy-content > span {
    margin-bottom: 22px;

    color: #d6b06a;

    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.philosophy-content h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(50px, 5vw, 76px);

    font-weight: 500;
    line-height: 0.98;
}


.philosophy-content > p {
    margin: 30px 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.9;
}


.philosophy-content blockquote {
    padding: 22px 0 22px 26px;

    border-left:
        1px solid #b08d57;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 28px;
    font-style: italic;
}


.philosophy-details {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-top: 45px;
}


.philosophy-details div {
    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


.philosophy-details strong {
    display: block;

    margin-bottom: 8px;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 30px;
    font-weight: 500;
}


.philosophy-details p {
    color:
        rgba(255, 255, 255, 0.7);

    font-size: 12px;
    line-height: 1.6;
}


@media (max-width: 900px) {

    .design-philosophy {
        grid-template-columns: 1fr;
    }


    .philosophy-image {
        min-height: 520px;
    }


    .philosophy-image::after {
        background:
            linear-gradient(
                to bottom,
                transparent 65%,
                rgba(45, 36, 29, 0.7)
            );
    }


    .philosophy-content {
        padding: 80px 8%;
    }

}


@media (max-width: 600px) {

    .philosophy-image {
        min-height: 390px;
    }


    .philosophy-details {
        grid-template-columns: 1fr;
    }

}

SAFE PHILOSOPHY ENTRANCE ANIMATION

.design-philosophy {
    animation: philosophyFadeIn 1.1s ease both;
}


@keyframes philosophyFadeIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}   */


/* =========================================
   DESIGN PHILOSOPHY — COMPACT VERSION
========================================= */

.design-philosophy {
    width: 88%;
    max-width: 1240px;

    min-height: 560px;

    margin: 110px auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    background: #2d241d;

    color: #ffffff;

    overflow: hidden;

    box-shadow:
        0 24px 65px rgba(45, 36, 29, 0.18);
}


/* IMAGE SIDE */

.philosophy-image {
    position: relative;

    min-height: 560px;

    overflow: hidden;
}


.philosophy-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 65%,
            rgba(45, 36, 29, 0.55)
        );
}


.philosophy-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1s ease;
}


.design-philosophy:hover
.philosophy-image img {
    transform: scale(1.035);
}


/* TEXT SIDE */

.philosophy-content {
    padding: 65px 9%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.philosophy-content > span {
    margin-bottom: 17px;

    color: #d6b06a;

    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.philosophy-content h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(42px, 4.5vw, 62px);

    font-weight: 500;
    line-height: 0.98;
}


.philosophy-content > p {
    margin: 24px 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 14px;
    line-height: 1.8;
}


.philosophy-content blockquote {
    margin: 0;

    padding: 16px 0 16px 20px;

    border-left:
        1px solid #b08d57;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 23px;
    font-style: italic;
}


/* THREE DETAILS */

.philosophy-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-top: 32px;
}


.philosophy-details div {
    padding-top: 14px;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);
}


.philosophy-details strong {
    display: block;

    margin-bottom: 6px;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;
    font-weight: 500;
}


.philosophy-details p {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 10px;
    line-height: 1.5;
}


/* TABLET */

@media (max-width: 900px) {

    .design-philosophy {
        width: 88%;

        grid-template-columns: 1fr;

        margin: 90px auto;
    }


    .philosophy-image {
        min-height: 430px;
    }


    .philosophy-image::after {
        background:
            linear-gradient(
                to bottom,
                transparent 68%,
                rgba(45, 36, 29, 0.5)
            );
    }


    .philosophy-content {
        padding: 60px 8%;
    }

}


/* PHONE */

@media (max-width: 600px) {

    .design-philosophy {
        width: 90%;

        margin: 70px auto;
    }


    .philosophy-image {
        min-height: 330px;
    }


    .philosophy-content {
        padding: 48px 7%;
    }


    .philosophy-content h2 {
        font-size: 42px;
    }


    .philosophy-details {
        grid-template-columns: 1fr;

        gap: 12px;
    }

}

/* =========================================
   RESPONSIVE MOBILE NAVIGATION
========================================= */

@media (max-width: 900px) {

    header {
        position: absolute;
    }


    nav {
        position: relative;

        height: 82px;

        padding: 0 6%;

        background:
            rgba(35, 27, 22, 0.93);
    }


    .logo img {
        width: 105px;
        max-height: 56px;
    }


    .mobile-menu-button {
        position: relative;
        z-index: 1002;

        display: flex;
    }


    .nav-links {
        position: fixed;

        top: 0;
        right: 0;

        z-index: 1000;

        width: min(390px, 88vw);
        height: 100vh;

        padding:
            115px 30px 45px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        overflow-y: auto;

        background:
            radial-gradient(
                circle at 90% 10%,
                rgba(176, 141, 87, 0.16),
                transparent 30%
            ),
            #2d241d;

        box-shadow:
            -25px 0 65px rgba(0, 0, 0, 0.35);

        transform: translateX(105%);

        transition: transform 0.45s ease;
    }


    .mobile-menu-toggle:checked
    ~ .nav-links {
        transform: translateX(0);
    }


    .nav-links > li {
        width: 100%;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.11);
    }


    .nav-links > li > a {
        width: 100%;

        justify-content: space-between;

        padding: 18px 4px;

        color: #ffffff;

        font-size: 13px;
        letter-spacing: 1px;
    }


    .nav-links > li > a::after {
        display: none;
    }


    /* HAMBURGER BECOMES X */

    .mobile-menu-toggle:checked
    + .mobile-menu-button span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-toggle:checked
    + .mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-toggle:checked
    + .mobile-menu-button span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* EXPLORE MENU ON MOBILE */

    .explore-menu {
        position: static;

        width: 100%;

        padding: 0 0 18px;

        display: block;

        border: none;
        box-shadow: none;

        background: transparent;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;
    }


    .explore-menu-heading {
        display: none;
    }


    .explore-menu-content {
        display: block;

        padding-top: 0;
    }


    .explore-category h4 {
        margin: 8px 0 10px;

        color: #d6b06a;

        font-size: 19px;
    }


    .explore-links {
        display: grid;
        grid-template-columns: 1fr;

        gap: 0;
    }


    .explore-links a {
        padding: 10px 4px 10px 18px;

        font-size: 11px;
    }


    .explore-feature {
        display: none;
    }


    /* HELP MENU ON MOBILE */

    .help-menu {
        position: static;

        min-width: 0;

        padding: 0 0 15px;

        display: block;

        border: none;
        box-shadow: none;

        background: transparent;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;
    }


    .help-menu li {
        border: none;
    }


    .help-menu li a {
        padding: 10px 4px 10px 18px;

        font-size: 11px;
    }


    .dropdown-arrow {
        display: none;
    }

}







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


/* ==================================================
   INNER PAGE HEADER
================================================== */

.inner-page-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;
}


.inner-page-header nav {
    background:
        rgba(24, 18, 15, 0.54);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.active-nav-link {
    color: #d6b06a !important;
}


.active-nav-link::after {
    transform: scaleX(1) !important;
}


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

.about-hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 150px 9% 100px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff;

    isolation: isolate;
}


.about-hero-background {
    position: absolute;
    inset: 0;

    z-index: -4;

    overflow: hidden;
}


.about-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.04);

    animation:
        aboutHeroZoom 18s
        ease-in-out infinite alternate;
}


@keyframes aboutHeroZoom {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12);
    }

}


.about-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        linear-gradient(
            90deg,
            rgba(16, 11, 9, 0.9) 0%,
            rgba(16, 11, 9, 0.7) 42%,
            rgba(16, 11, 9, 0.28) 72%,
            rgba(16, 11, 9, 0.42) 100%
        ),
        linear-gradient(
            to top,
            rgba(15, 10, 8, 0.65),
            transparent 50%
        );
}


.about-hero::before {
    content: "";

    position: absolute;
    top: 23%;
    left: 5%;

    width: 1px;
    height: 50%;

    background:
        linear-gradient(
            transparent,
            #c6a46a,
            transparent
        );

    opacity: 0.8;
}


.about-hero-content {
    position: relative;
    z-index: 2;

    max-width: 830px;

    padding-left: 45px;
}


.about-hero-content > span {
    display: inline-block;

    margin-bottom: 24px;

    color: #d6b06a;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.about-hero-content > span::before {
    content: "";

    display: inline-block;

    width: 55px;
    height: 1px;

    margin-right: 16px;

    vertical-align: middle;

    background: #d6b06a;
}


.about-hero-content h1 {
    max-width: 820px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(66px, 8vw, 120px);

    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -2px;

    text-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.4);
}


.about-hero-content h1 em {
    display: block;

    margin-top: 15px;

    color: #d6b06a;

    font-weight: 500;
}


.about-hero-content p {
    max-width: 650px;

    margin-top: 34px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 17px;
    font-weight: 300;
    line-height: 1.9;
}


.about-scroll-indicator {
    position: absolute;
    left: 9%;
    bottom: 34px;

    display: flex;
    align-items: center;

    gap: 15px;

    color:
        rgba(255, 255, 255, 0.72);

    text-decoration: none;
}


.about-scroll-indicator span {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.about-scroll-indicator div {
    position: relative;

    width: 70px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.28);
}


.about-scroll-indicator div::after {
    content: "";

    position: absolute;
    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: #d6b06a;

    animation:
        aboutScrollLine 2s
        ease-in-out infinite;
}


@keyframes aboutScrollLine {

    from {
        left: -100%;
    }

    to {
        left: 100%;
    }

}


/* ==================================================
   WHO WE ARE
================================================== */

.about-intro {
    padding: 140px 10%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    align-items: center;

    gap: 90px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(176, 141, 87, 0.1),
            transparent 30%
        ),
        #f5f0e8;
}


.about-intro-image {
    position: relative;
}


.about-intro-image::before {
    content: "";

    position: absolute;
    top: -28px;
    left: -28px;

    width: 55%;
    height: 55%;

    border-top:
        1px solid rgba(176, 141, 87, 0.65);

    border-left:
        1px solid rgba(176, 141, 87, 0.65);

    z-index: 2;

    pointer-events: none;
}


.about-intro-image img {
    display: block;

    width: 100%;
    height: 650px;

    object-fit: cover;

    box-shadow:
        0 30px 75px
        rgba(45, 36, 29, 0.16);
}


.about-intro-content {
    max-width: 580px;
}


.about-intro-content > span {
    display: inline-block;

    margin-bottom: 20px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.about-intro-content h2 {
    margin-bottom: 30px;

    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(54px, 6vw, 78px);

    font-weight: 500;
    line-height: 0.98;
}


.about-intro-content p {
    margin-bottom: 20px;

    color: #75685e;

    font-size: 14px;
    line-height: 2;
}


.about-intro-highlight {
    margin-top: 38px;
    padding-top: 28px;

    display: flex;
    align-items: center;

    gap: 22px;

    border-top:
        1px solid rgba(59, 48, 40, 0.16);
}


.about-intro-highlight strong {
    color: #b08d57;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 65px;
    font-weight: 500;
    line-height: 1;
}


.about-intro-highlight span {
    max-width: 190px;

    color: #4f4239;

    font-size: 12px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}


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

.journey-introduction {
    padding: 120px 8% 80px;

    max-width: 1050px;

    margin: auto;

    text-align: center;
}


.journey-introduction > span {
    display: inline-block;

    margin-bottom: 20px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.journey-introduction h2 {
    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(54px, 6vw, 82px);

    font-weight: 500;
    line-height: 1;
}


.journey-introduction h2::after {
    content: "";

    display: block;

    width: 85px;
    height: 1px;

    margin: 25px auto 0;

    background: #b08d57;
}


.journey-introduction p {
    max-width: 720px;

    margin: 28px auto 0;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
}


/* ==================================================
   COMPANY TIMELINE
================================================== */

.company-timeline {
    position: relative;

    padding: 50px 9% 150px;

    background: #f5f0e8;
}


.company-timeline::before {
    content: "";

    position: absolute;
    top: 70px;
    bottom: 130px;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(176, 141, 87, 0.75),
            rgba(176, 141, 87, 0.75),
            transparent
        );
}


.timeline-item {
    position: relative;

    max-width: 1250px;

    margin: 0 auto 120px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        110px
        minmax(0, 1fr);

    align-items: center;

    gap: 45px;
}


.timeline-item:last-child {
    margin-bottom: 0;
}


.timeline-marker {
    grid-column: 2;

    position: relative;

    z-index: 3;

    width: 110px;
    height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(176, 141, 87, 0.65);

    border-radius: 50%;

    background: #f5f0e8;

    box-shadow:
        0 0 0 12px #f5f0e8;
}


.timeline-marker span {
    color: #a47d48;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 27px;
    font-weight: 500;
}


.timeline-content {
    grid-column: 1;
    grid-row: 1;

    max-width: 500px;

    justify-self: end;
}


.timeline-reverse .timeline-content {
    grid-column: 3;

    justify-self: start;
}


.timeline-label {
    display: inline-block;

    margin-bottom: 17px;

    color: #a47d48;

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.timeline-content h3 {
    margin-bottom: 22px;

    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(38px, 4vw, 52px);

    font-weight: 500;
    line-height: 1.05;
}


.timeline-content p {
    margin-bottom: 16px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.9;
}


.timeline-visual,
.timeline-logo-panel {
    grid-column: 3;
    grid-row: 1;

    width: 100%;

    justify-self: start;
}


.timeline-reverse .timeline-visual,
.timeline-reverse .timeline-logo-panel {
    grid-column: 1;

    justify-self: end;
}


.timeline-visual img {
    display: block;

    width: 100%;
    height: 420px;

    object-fit: cover;

    box-shadow:
        0 24px 60px
        rgba(45, 36, 29, 0.15);
}


.timeline-logo-panel {
    min-height: 320px;

    padding: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(176, 141, 87, 0.15),
            transparent 45%
        ),
        #e9dfd1;

    border:
        1px solid rgba(59, 48, 40, 0.12);

    box-shadow:
        0 24px 60px
        rgba(45, 36, 29, 0.1);
}


.timeline-logo-panel img {
    display: block;

    max-width: 85%;
    max-height: 210px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 14px 22px
            rgba(45, 36, 29, 0.16)
        );
}


.timeline-today .timeline-marker {
    background: #30251f;

    border-color: #d6b06a;
}


.timeline-today .timeline-marker span {
    color: #d6b06a;
}


/* ==================================================
   ABOUT PHILOSOPHY
================================================== */

.about-philosophy {
    position: relative;

    min-height: 720px;

    padding: 110px 8%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        url("images/about/philosophy-background.jpg");

    background-size: cover;
    background-position: center;

    color: #ffffff;

    text-align: center;
}


.about-philosophy-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(20, 14, 11, 0.58),
            rgba(20, 14, 11, 0.78)
        );
}


.about-philosophy-content {
    position: relative;
    z-index: 2;

    max-width: 900px;

    padding: 55px 65px;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    background:
        rgba(25, 18, 14, 0.18);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


.about-philosophy-content > span {
    display: inline-block;

    margin-bottom: 22px;

    color: #d6b06a;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.about-philosophy-content h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(56px, 7vw, 92px);

    font-weight: 500;
    line-height: 0.96;
}


.about-philosophy-content p {
    max-width: 720px;

    margin: 28px auto 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 15px;
    line-height: 1.9;
}


.about-philosophy-content blockquote {
    margin-top: 32px;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;
    font-style: italic;
}


/* ==================================================
   VISIT OUR SHOWROOM
================================================== */

.about-visit {
    padding: 140px 9%;

    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: stretch;

    gap: 0;

    background: #eee5d8;
}


.about-visit-image {
    min-height: 780px;
}


.about-visit-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.about-visit-content {
    padding: 75px 70px;

    background: #30251f;

    color: #ffffff;
}


.about-visit-content > span {
    display: inline-block;

    margin-bottom: 20px;

    color: #d6b06a;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.about-visit-content h2 {
    margin-bottom: 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(52px, 5.5vw, 75px);

    font-weight: 500;
    line-height: 0.98;
}


.about-visit-content > p {
    color:
        rgba(255, 255, 255, 0.7);

    font-size: 13px;
    line-height: 1.9;
}


.opening-hours {
    margin-top: 42px;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);
}


.hours-row {
    padding: 16px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.hours-row span {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 12px;
}


.hours-row strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;

    text-align: right;
}


.closed-day strong {
    color: #d6b06a;
}


.holiday-notice {
    margin-top: 18px;

    color: #d6b06a !important;

    font-size: 10px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.about-visit-buttons {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 17px;
}


.about-primary-button,
.about-secondary-button {
    min-height: 52px;

    padding: 15px 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


.about-primary-button {
    background: #b08d57;
    border: 1px solid #b08d57;

    color: #ffffff;
}


.about-primary-button:hover {
    background: #ffffff;
    border-color: #ffffff;

    color: #30251f;

    transform: translateY(-5px);
}


.about-secondary-button {
    border:
        1px solid rgba(255, 255, 255, 0.55);

    color: #ffffff;
}


.about-secondary-button:hover {
    background: #ffffff;

    color: #30251f;

    transform: translateY(-5px);
}


/* ==================================================
   ABOUT SOCIAL SECTION
================================================== */

.about-social {
    padding: 130px 8%;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(176, 141, 87, 0.13),
            transparent 30%
        ),
        #f5f0e8;

    text-align: center;
}


.about-social-content {
    max-width: 900px;

    margin: auto;
}


.about-social-content > span {
    display: inline-block;

    margin-bottom: 20px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.about-social-content h2 {
    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(52px, 6vw, 78px);

    font-weight: 500;
    line-height: 1;
}


.about-social-content > p {
    max-width: 670px;

    margin: 26px auto 45px;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
}


.about-social-links {
    max-width: 800px;

    margin: auto;

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

    gap: 20px;
}


.social-link {
    padding: 27px 30px;

    display: flex;
    align-items: center;

    gap: 22px;

    border:
        1px solid rgba(59, 48, 40, 0.14);

    background:
        rgba(255, 255, 255, 0.42);

    color: #30251f;

    text-align: left;
    text-decoration: none;

    box-shadow:
        0 15px 40px
        rgba(45, 36, 29, 0.07);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.social-link:hover {
    transform: translateY(-8px);

    border-color:
        rgba(176, 141, 87, 0.65);

    background: #ffffff;

    box-shadow:
        0 24px 55px
        rgba(45, 36, 29, 0.13);
}


.social-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #30251f;

    color: #d6b06a;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
}


.social-link div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.social-link strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 28px;
    font-weight: 500;
}


.social-link small {
    color: #75685e;

    font-size: 11px;
}


/* ==================================================
   SITE FOOTER
================================================== */

.site-footer {
    padding: 0;

    background: #241b16;

    color: #ffffff;

    text-align: left;
}


.footer-main {
    padding: 80px 8% 65px;

    display: grid;
    grid-template-columns:
        1.4fr repeat(3, 0.7fr);

    gap: 65px;
}


.footer-brand img {
    width: 145px;
    height: auto;

    object-fit: contain;
}


.footer-brand p {
    max-width: 330px;

    margin-top: 25px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 12px;
    line-height: 1.9;
}


.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.footer-column h3 {
    margin-bottom: 10px;

    color: #d6b06a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;
    font-weight: 500;
}


.footer-column a {
    color:
        rgba(255, 255, 255, 0.65);

    font-size: 11px;
    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-column a:hover {
    color: #d6b06a;

    transform: translateX(5px);
}


.footer-bottom {
    padding: 22px 8%;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    text-align: center;
}


.footer-bottom p {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 10px;
    letter-spacing: 1px;
}


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

@media (max-width: 1000px) {

    .about-intro {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .about-intro-content {
        max-width: 100%;
    }


    .about-intro-image img {
        height: 580px;
    }


    .company-timeline::before {
        left: 70px;
    }


    .timeline-item,
    .timeline-reverse {
        grid-template-columns:
            110px
            minmax(0, 1fr);

        gap: 40px;
    }


    .timeline-marker,
    .timeline-reverse .timeline-marker {
        grid-column: 1;
        grid-row: 1;

        align-self: start;
    }


    .timeline-content,
    .timeline-reverse .timeline-content {
        grid-column: 2;
        grid-row: 1;

        justify-self: start;

        max-width: 100%;
    }


    .timeline-visual,
    .timeline-logo-panel,
    .timeline-reverse .timeline-visual,
    .timeline-reverse .timeline-logo-panel {
        grid-column: 2;
        grid-row: 2;

        justify-self: stretch;
    }


    .about-visit {
        grid-template-columns: 1fr;
    }


    .about-visit-image {
        min-height: 600px;
    }


    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 50px;
    }

}


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

@media (max-width: 650px) {

    .about-hero {
        min-height: 820px;

        padding:
            135px 6%
            90px;
    }


    .about-hero::before {
        left: 3%;
    }


    .about-hero-content {
        padding-left: 20px;
    }


    .about-hero-content h1 {
        font-size: 58px;

        line-height: 0.94;
    }


    .about-hero-content p {
        font-size: 14px;
    }


    .about-scroll-indicator {
        left: 8%;
    }


    .about-intro {
        padding: 95px 7%;
    }


    .about-intro-image img {
        height: 470px;
    }


    .about-intro-image::before {
        top: -16px;
        left: -16px;
    }


    .journey-introduction {
        padding:
            90px 7%
            60px;
    }


    .company-timeline {
        padding:
            40px 7%
            100px;
    }


    .company-timeline::before {
        left: 42px;

        top: 55px;
        bottom: 90px;
    }


    .timeline-item,
    .timeline-reverse {
        margin-bottom: 85px;

        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 20px;
    }


    .timeline-marker {
        width: 70px;
        height: 70px;

        box-shadow:
            0 0 0 8px #f5f0e8;
    }


    .timeline-marker span {
        font-size: 20px;
    }


    .timeline-content h3 {
        font-size: 38px;
    }


    .timeline-visual img {
        height: 320px;
    }


    .timeline-logo-panel {
        min-height: 240px;

        padding: 35px 25px;
    }


    .about-philosophy {
        min-height: 650px;

        padding: 80px 6%;
    }


    .about-philosophy-content {
        padding: 40px 22px;
    }


    .about-visit {
        padding: 80px 6%;
    }


    .about-visit-image {
        min-height: 430px;
    }


    .about-visit-content {
        padding: 50px 28px;
    }


    .hours-row {
        gap: 15px;
    }


    .about-visit-buttons {
        flex-direction: column;
    }


    .about-primary-button,
    .about-secondary-button {
        width: 100%;
    }


    .about-social {
        padding: 90px 6%;
    }


    .about-social-links {
        grid-template-columns: 1fr;
    }


    .footer-main {
        padding: 65px 7% 50px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

}



/* ==================================================
   OUR GLOBAL PARTNERS
================================================== */

.global-partners {
    position: relative;

    padding: 140px 7%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(176, 141, 87, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(101, 83, 75, 0.1),
            transparent 28%
        ),
        #eee5d8;
}


.global-partners::before {
    content: "PARTNERS";

    position: absolute;
    top: 15px;
    left: 50%;

    color:
        rgba(48, 37, 31, 0.035);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(100px, 16vw, 240px);

    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    transform: translateX(-50%);

    pointer-events: none;
}


.global-partners-heading {
    position: relative;
    z-index: 2;

    max-width: 920px;

    margin: 0 auto 75px;

    text-align: center;
}


.global-partners-heading > span {
    display: inline-block;

    margin-bottom: 20px;

    color: #a47d48;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.global-partners-heading h2 {
    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(54px, 6vw, 82px);

    font-weight: 500;
    line-height: 0.98;
}


.global-partners-heading h2::after {
    content: "";

    display: block;

    width: 82px;
    height: 1px;

    margin: 27px auto 0;

    background: #b08d57;
}


.global-partners-heading p {
    max-width: 720px;

    margin: 27px auto 0;

    color: #75685e;

    font-size: 14px;
    line-height: 1.9;
}


.global-partners-grid {
    position: relative;
    z-index: 2;

    max-width: 1320px;

    margin: auto;

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

    gap: 28px;
}


.global-brand-card {
    position: relative;

    min-height: 335px;

    padding: 27px;

    display: grid;
    grid-template-columns:
        minmax(190px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: 34px;

    overflow: hidden;

    border:
        1px solid rgba(59, 48, 40, 0.12);

    background:
        rgba(255, 255, 255, 0.42);

    box-shadow:
        0 18px 48px
        rgba(45, 36, 29, 0.08);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease;
}


.global-brand-card::after {
    content: "";

    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 150px;
    height: 150px;

    border:
        1px solid rgba(176, 141, 87, 0.18);

    border-radius: 50%;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease;
}


.global-brand-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(176, 141, 87, 0.6);

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 28px 65px
        rgba(45, 36, 29, 0.14);
}


.global-brand-card:hover::after {
    transform: scale(1.25);

    border-color:
        rgba(176, 141, 87, 0.45);
}


.global-brand-logo {
    position: relative;

    min-height: 205px;
    height: 205px;
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #65534b;

    box-shadow:
        0 15px 36px
        rgba(45, 36, 29, 0.14);
}


.global-brand-logo::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 255, 255, 0.08),
            transparent 68%
        );

    pointer-events: none;
}


.global-brand-logo img {
    position: relative;
    z-index: 2;

    display: block;

    width: 88%;
    height: 88px;

    object-fit: contain;
    object-position: cover;

    transition:
        transform 0.55s ease;
}


.global-brand-card:hover
.global-brand-logo img {
    transform: scale(1.045);
}


.global-brand-details {
    position: relative;
    z-index: 2;
}


.global-brand-details > span {
    display: inline-block;

    margin-bottom: 13px;

    color: #a47d48;

    font-size: 9px;
    letter-spacing: 1.8px;
    line-height: 1.6;
    text-transform: uppercase;
}


.global-brand-details h3 {
    margin-bottom: 17px;

    color: #30251f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 40px;
    font-weight: 500;
    line-height: 1;
}


.global-brand-details p {
    color: #75685e;

    font-size: 12px;
    line-height: 1.9;
}


.global-brand-details small {
    display: block;

    margin-top: 21px;
    padding-top: 17px;

    border-top:
        1px solid rgba(59, 48, 40, 0.13);

    color: #a47d48;

    font-size: 9px;
    letter-spacing: 1.2px;
    line-height: 1.7;
    text-transform: uppercase;
}


/* GLOBAL PARTNERS — TABLET */

@media (max-width: 1080px) {

    .global-partners-grid {
        grid-template-columns: 1fr;
    }


    .global-brand-card {
        grid-template-columns:
            minmax(220px, 0.75fr)
            minmax(0, 1.25fr);
    }

}


/* GLOBAL PARTNERS — MOBILE */

@media (max-width: 650px) {

    .global-partners {
        padding: 95px 6%;
    }


    .global-partners-heading {
        margin-bottom: 50px;
    }


    .global-brand-card {
        min-height: auto;

        padding: 20px;

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .global-brand-logo {
        min-height: 220px;
    }


    .global-brand-logo img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}


    .global-brand-details {
        padding:
            5px 7px
            15px;
    }


    .global-brand-details h3 {
        font-size: 38px;
    }

}

/* ==================================================
   HOMEPAGE — SIX BRAND UPDATE
================================================== */

.dw-brands-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
}


.dw-brand-card {
    width: 100%;
    min-height: 530px;
}


.dw-brand-card:last-child {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
}


/* Prevent logo cropping */

.dw-brand-logo-glass {
    width: 235px;
    height: 145px;

    padding: 12px;

    overflow: hidden;
}


.dw-brand-logo-glass img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    mix-blend-mode: normal;
}


/* Smooth anchor positioning */

.global-brand-card {
    scroll-margin-top: 125px;
}


/* Link beneath the six cards */

.dw-brands-about-link {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 60px auto 0;

    text-align: center;
}


.dw-brands-about-link p {
    margin-bottom: 18px;

    color: #75685e;

    font-size: 13px;
    line-height: 1.8;
}


.dw-brands-about-link a {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(176, 141, 87, 0.75);

    color: #30251f;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        color 0.35s ease,
        gap 0.35s ease;
}


.dw-brands-about-link a:hover {
    gap: 22px;

    color: #b08d57;
}


/* TABLET */

@media (max-width: 950px) {

    .dw-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dw-brand-card,
    .dw-brand-card:last-child {
        grid-column: auto;

        width: 100%;

        justify-self: stretch;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .dw-brands-grid {
        grid-template-columns: 1fr;
    }


    .dw-brand-card,
    .dw-brand-card:last-child {
        width: 100%;

        min-height: 500px;
    }


    .dw-brand-logo-glass {
        width: 215px;
        height: 135px;
    }

}

/* ==================================================
   FINAL MOBILE WIDTH AND ALIGNMENT FIX
================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}

header,
nav,
main,
section,
footer {
    max-width: 100%;
}

img,
video,
iframe {
    display: block;
    max-width: 100%;
}

.hero,
.intro,
.design-philosophy,
.craft-story,
.statement,
.collections,
.brand-showcase,
.showroom,
.experience {
    width: 100%;
    max-width: 100%;
}

.hero-content,
.intro-text,
.philosophy-content,
.craft-content,
.collections-heading {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {

    body {
        margin: 0;
        padding: 0;
    }

    .hero {
        width: 100%;
        min-height: 100svh;
        padding:
            120px 6%
            75px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding:
            25px 0
            25px 18px;
    }

    .hero h1 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .hero-content > p {
        max-width: 100%;
    }

    .intro {
        width: 100%;
        padding:
            85px 7%;
        gap: 45px;
    }

    .intro-image,
    .intro-text {
        width: 100%;
        max-width: 100%;
    }

    .intro-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .craft-story,
    .design-philosophy {
        max-width: 100%;
    }

    .collection-grid {
        width: 100%;
        max-width: 100%;
    }

    .collection-card {
        width: 100%;
        max-width: 100%;
    }

}


/* ==================================================
   FINAL MOBILE TYPOGRAPHY AND SPACING FIX
================================================== */

@media (max-width: 768px) {

    h1,
    h2,
    h3,
    p {
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(44px, 13vw, 56px);
        line-height: 0.96;
        letter-spacing: -1px;
    }

    .hero-content > p {
        margin: 25px 0 30px;
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-label {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .hero-buttons {
        width: 100%;
        gap: 15px;
    }

    .hero-primary-button,
    .hero-secondary-button {
        min-height: 50px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .hero-primary-button {
        width: auto;
        padding: 15px 23px;
    }

    .intro h2 {
        margin-bottom: 22px;
        font-size: clamp(38px, 11vw, 48px);
        line-height: 1.02;
    }

    .intro p {
        margin-bottom: 25px;
        font-size: 14px;
        line-height: 1.8;
    }

    .philosophy-content h2 {
        font-size: clamp(38px, 11vw, 48px);
        line-height: 1.02;
    }

    .philosophy-content > p {
        margin: 24px 0;
        font-size: 14px;
        line-height: 1.8;
    }

    .craft-content h2 {
        font-size: clamp(40px, 11vw, 50px);
        line-height: 1;
    }

    .craft-content p {
        margin: 24px 0;
        font-size: 14px;
        line-height: 1.8;
    }

    .statement h2 {
        font-size: clamp(42px, 12vw, 56px);
        line-height: 0.98;
    }

    .statement p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.7;
    }

    .collections {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .collections-heading {
        margin-bottom: 45px;
    }

    .collections-heading h2 {
        font-size: clamp(42px, 12vw, 54px);
        line-height: 1;
    }

    .collections-heading p {
        margin-top: 18px;
        padding: 0 4px;
        font-size: 13px;
        line-height: 1.75;
    }

    .collection-content h3 {
        font-size: 31px;
        line-height: 1;
    }

    .collection-content p {
        font-size: 11px;
        line-height: 1.6;
    }

    .brands {
        padding-top: 90px;
        padding-bottom: 95px;
    }

    .brands-heading {
        margin-bottom: 45px;
    }

    .brands-heading h2 {
        font-size: clamp(42px, 12vw, 54px);
        line-height: 1;
    }

    .brands-heading p {
        margin-top: 18px;
        padding: 0 4px;
        font-size: 13px;
        line-height: 1.75;
    }

}

/* ==================================================
   FINAL HOMEPAGE SECTION CORRECTIONS
================================================== */


/* ------------------------------------------
   1. CRAFTSMANSHIP SECTION
------------------------------------------ */

@media (max-width: 768px) {

    .craft-story {
        width: 100%;
        padding: 85px 7%;
        gap: 45px;

        flex-direction: column;
        align-items: stretch;
    }

    .craft-main-image,
    .craft-content {
        width: 100%;
        min-width: 0;
    }

    .craft-content {
        overflow: hidden;
    }

    .craft-content h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(35px, 9.5vw, 43px);
        line-height: 1.02;
        letter-spacing: -0.5px;

        overflow-wrap: anywhere;
        word-break: normal;
    }

    .craft-content p {
        width: 100%;
        max-width: 100%;

        font-size: 14px;
        line-height: 1.8;
    }

    .mini-images {
        width: 100%;

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

        gap: 12px;
    }

    .mini-images img {
        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;

        object-fit: cover;
        object-position: center;
    }

}

/* ==================================================
   FINAL HOMEPAGE SECTION REPAIR
================================================== */


/* -----------------------------------------------
   1. CRAFTSMANSHIP SECTION
------------------------------------------------ */

.craft-story {
    overflow: hidden;
}

.craft-content {
    min-width: 0;
}

.craft-content h2 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}


/* -----------------------------------------------
   2. IMAGE BREAK / PARALLAX SECTION
------------------------------------------------ */

.image-break {
    position: relative;
    min-height: 720px;
    height: 75vh;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.42),
            rgba(0, 0, 0, 0.56)
        ),
        url("images/homepage/luxury-space.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.image-break-overlay {
    width: min(900px, 86%);
    padding: 45px;
}


/* -----------------------------------------------
   3. VISUAL SHOWCASE
------------------------------------------------ */

.visual-showcase {
    width: min(1400px, 100%);
    margin: 0 auto;

    padding: 120px 7%;

    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, 0.82fr);

    grid-template-rows: auto auto;

    gap: 45px 55px;

    align-items: center;
}

.showcase-large {
    grid-column: 1;
    grid-row: 1 / span 2;

    width: 100%;
    min-width: 0;
}

.showcase-large img {
    width: 100%;
    height: 720px;

    object-fit: cover;
    object-position: center;

    box-shadow:
        0 28px 65px
        rgba(45, 36, 29, 0.14);
}

.showcase-content {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    min-width: 0;

    padding: 20px 0 0;
}

.showcase-content h2 {
    max-width: 520px;

    margin-bottom: 25px;

    font-size:
        clamp(52px, 5vw, 76px);

    line-height: 0.98;
}

.showcase-content p {
    max-width: 500px;

    margin-bottom: 32px;

    font-size: 15px;
    line-height: 1.9;
}

.showcase-small {
    grid-column: 2;
    grid-row: 2;

    width: 100%;
    margin-top: 0;
}

.showcase-small img {
    width: 100%;
    height: 360px;

    object-fit: cover;
    object-position: center;

    box-shadow:
        0 22px 55px
        rgba(45, 36, 29, 0.16);
}


/* ==================================================
   FINAL HOMEPAGE MOBILE SECTION REPAIR
================================================== */

@media (max-width: 768px) {

    /* CRAFTSMANSHIP */

    .craft-story {
        width: 100%;

        padding:
            85px 7%;

        gap: 48px;

        flex-direction: column;
        align-items: stretch;
    }

    .craft-main-image,
    .craft-content {
        width: 100%;
        min-width: 0;
    }

    .craft-main-image img {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center;
    }

    .craft-content h2 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 25px;

        font-size:
            clamp(40px, 10.5vw, 48px);

        line-height: 0.98;
        letter-spacing: -0.5px;

        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
    }

    .craft-content p {
        margin: 0 0 32px;

        font-size: 14px;
        line-height: 1.8;
    }

    .mini-images {
        width: 100%;

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

        gap: 14px;
    }

    .mini-images img {
        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;

        object-fit: cover;
        object-position: center;
    }


    /* IMAGE BREAK */

    .image-break {
        min-height: 640px;
        height: 78svh;

        padding:
            80px 6%;

        background-attachment: scroll;
        background-size: cover;
        background-position: center;
    }

    .image-break-overlay {
        width: 100%;

        padding:
            42px 22px;

        background:
            rgba(30, 23, 18, 0.28);

        border:
            1px solid
            rgba(255, 255, 255, 0.28);

        backdrop-filter:
            blur(2px);
    }

    .image-break h2 {
        font-size:
            clamp(43px, 11vw, 54px);

        line-height: 0.98;
    }

    .image-break p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* VISUAL SHOWCASE */

    .visual-showcase {
        width: 100%;

        padding:
            85px 7%;

        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        gap: 38px;
    }

    .showcase-large {
        grid-column: 1;
        grid-row: 1;

        width: 100%;
    }

    .showcase-large img {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center;

        box-shadow:
            0 22px 48px
            rgba(45, 36, 29, 0.13);
    }

    .showcase-content {
        grid-column: 1;
        grid-row: 2;

        width: 100%;

        padding: 0;
    }

    .showcase-content h2 {
        max-width: 100%;

        margin-bottom: 24px;

        font-size:
            clamp(43px, 11vw, 52px);

        line-height: 0.98;
    }

    .showcase-content p {
        max-width: 100%;

        margin-bottom: 30px;

        font-size: 14px;
        line-height: 1.8;
    }

    .showcase-content .button {
        width: auto;
        min-width: 210px;

        padding:
            0 24px;
    }

    .showcase-small {
        grid-column: 1;
        grid-row: 3;

        width: 100%;

        margin: 0;
    }

    .showcase-small img {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center;

        box-shadow:
            0 20px 45px
            rgba(45, 36, 29, 0.14);
    }

}


/* ==================================================
   FIX ONLY FADED SHOWROOM AND SHOWCASE SECTIONS
================================================== */

.experience.reveal,
.visual-showcase.reveal {
    opacity: 1;
    transform: none;
    animation: none;
}




/* ==================================================
   MOBILE SHOWROOM TYPOGRAPHY — ONLY THIS SECTION
================================================== */

@media (max-width: 768px) {

    .experience {
        padding: 85px 7% 95px;
    }

    .experience-content {
        width: 100%;
    }

    .experience-content h2 {
        max-width: 100%;
        margin-bottom: 26px;

        font-size: clamp(42px, 10.5vw, 50px);
        line-height: 1;
        letter-spacing: -0.5px;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .experience-content p {
        margin-bottom: 30px;

        font-size: 14px;
        line-height: 1.8;
    }

    .experience-content .button {
        min-width: 0;
        padding: 0 18px;

        font-size: 9px;
        letter-spacing: 1.5px;
    }
}


/* ==================================================
   MOBILE SHOWCASE — ONE COMPLETE FRAME
================================================== */

@media (max-width: 768px) {

    .visual-showcase {
        width: calc(100% - 28px);
        max-width: 560px;

        margin: 80px auto;
        padding: 14px;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;

        gap: 0;

        background: #f5f0e8;

        border:
            1px solid
            rgba(59, 48, 40, 0.16);

        box-shadow:
            0 24px 60px
            rgba(45, 36, 29, 0.14);

        overflow: hidden;
    }

    .showcase-large,
    .showcase-content,
    .showcase-small {
        width: 100%;
        margin: 0;
    }

    .showcase-large {
        grid-row: 1;
    }

    .showcase-content {
        grid-row: 2;

        padding:
            42px 26px
            38px;

        background: #f5f0e8;
    }

    .showcase-small {
        grid-row: 3;
    }

    .showcase-large img,
    .showcase-small img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: cover;
        object-position: center;

        box-shadow: none;
    }

    .showcase-large img {
        aspect-ratio: 4 / 5;
    }

    .showcase-small img {
        aspect-ratio: 4 / 5;
    }

    .showcase-content h2 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 22px;

        font-size:
            clamp(40px, 10vw, 48px);

        line-height: 0.98;
        letter-spacing: -0.4px;
    }

    .showcase-content p {
        width: 100%;
        max-width: 100%;

        margin: 0 0 28px;

        font-size: 14px;
        line-height: 1.8;
    }

    .showcase-content .button {
        width: auto;
        min-width: 205px;
        min-height: 52px;

        padding: 0 22px;

        font-size: 9px;
        letter-spacing: 1.8px;
    }

}

/* ==================================================
   OPEN EXPLORE MENU FROM COLLECTIONS BUTTON
================================================== */

.explore-dropdown.menu-open .explore-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ==================================================
   BRAND ANCHOR POSITION
================================================== */

.global-brand-card {
    scroll-margin-top: 125px;
}

@media (max-width: 768px) {
    .global-brand-card {
        scroll-margin-top: 105px;
    }
}



/* ==================================================
   HOMEPAGE OLIVE HERO
================================================== */

.hero-background img {
    object-position: center;
    filter: none;
}

.hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(13, 15, 10, 0.76) 0%,
        rgba(13, 15, 10, 0.54) 36%,
        rgba(13, 15, 10, 0.18) 67%,
        rgba(13, 15, 10, 0.04) 100%
    );

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {

    .hero-background img {
        object-position: 57% center;
        filter: none !important;
        animation: none;
        transform: none;
    }

    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(13, 15, 10, 0.16) 0%,
            rgba(13, 15, 10, 0.40) 42%,
            rgba(13, 15, 10, 0.91) 100%
        );

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* ==================================================
   HOMEPAGE HERO REFINEMENT
================================================== */

.hero {
    min-height: 760px;
}

.hero-background img {
    object-position: center right;
    filter: none;
    transform: scale(1.02);
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(31, 24, 20, 0.68) 0%,
            rgba(31, 24, 20, 0.44) 38%,
            rgba(31, 24, 20, 0.10) 70%,
            rgba(31, 24, 20, 0.02) 100%
        );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hero-content {
    max-width: 760px;
}

.hero-content h1 {
    font-size: clamp(68px, 7.2vw, 106px);
    line-height: 0.91;
    letter-spacing: -2px;
}

.hero-content h1 em {
    display: block;
    margin-top: 10px;
}

.hero-content > p {
    max-width: 540px;
    margin-top: 30px;
    font-size: 17px;
    line-height: 1.75;
}

.hero-decoration {
    display: none;
}


/* ==================================================
   HOMEPAGE INTRO REFINEMENT
================================================== */

.intro {
    gap: clamp(55px, 7vw, 105px);
    padding: 115px 9%;
}

.intro-image {
    width: 44%;
    max-width: 520px;
}

.intro-image img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
    box-shadow: 0 25px 60px rgba(46, 35, 28, 0.15);
}

.intro-text {
    max-width: 570px;
}

.intro-label {
    display: inline-block;
    margin-bottom: 20px;
    color: #a98243;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.intro-text h2 {
    margin-bottom: 25px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(54px, 5.5vw, 76px);
    font-weight: 500;
    line-height: 0.98;
}

.intro-text p {
    max-width: 480px;
    margin-bottom: 32px;
    color: #665a50;
    font-size: 16px;
    line-height: 1.85;
}

/* ==================================================
   HOMEPAGE MOBILE FIXES
================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: calc(100svh - 92px);
        height: auto;
        padding: 0 24px;
        display: flex;
        align-items: flex-end;
    }

    .hero-background {
        inset: 0;
    }

    .hero-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 66% center;
        filter: none !important;
        transform: none;
        animation: none;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(28, 22, 18, 0.18) 0%,
                rgba(28, 22, 18, 0.36) 38%,
                rgba(28, 22, 18, 0.86) 100%
            );
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero-content {
        width: 100%;
        max-width: none;
        padding: 0 0 65px;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-label {
        margin-bottom: 18px;
        font-size: 10px;
        letter-spacing: 3px;
    }

    .hero-content h1 {
        max-width: 520px;
        font-size: clamp(48px, 13vw, 67px);
        line-height: 0.92;
        letter-spacing: -1px;
    }

    .hero-content h1 em {
        margin-top: 8px;
    }

    .hero-content > p {
        max-width: 390px;
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-buttons {
        width: 100%;
        margin-top: 28px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-primary-button,
    .hero-secondary-button {
        width: 100%;
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        text-align: center;
    }

    .scroll-indicator {
        display: none;
    }

    .hero-decoration {
        display: none;
    }
}

@media (max-width: 768px) {

    .intro {
        width: 100%;
        padding: 75px 22px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 38px;
        overflow: hidden;
    }

    .intro.reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .intro-image {
        width: 100%;
        max-width: none;
        order: 2;
    }

    .intro-image img {
        width: 100%;
        height: 430px;
        object-fit: cover;
        object-position: center;
        box-shadow: none;
    }

    .intro-text {
        width: 100%;
        max-width: none;
        order: 1;
    }

    .intro-label {
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .intro-text h2 {
        max-width: 420px;
        margin-bottom: 20px;
        font-size: clamp(43px, 12vw, 57px);
        line-height: 0.97;
    }

    .intro-text p {
        max-width: 390px;
        margin-bottom: 26px;
        font-size: 15px;
        line-height: 1.75;
    }

    .intro-text .button {
        width: fit-content;
        min-width: 190px;
    }
}

@media (max-width: 768px) {

    .intro {
        width: 100%;
        padding: 75px 22px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 38px;
        overflow: hidden;
    }

    .intro.reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .intro-image {
        width: 100%;
        max-width: none;
        order: 2;
    }

    .intro-image img {
        width: 100%;
        height: 430px;
        object-fit: cover;
        object-position: center;
        box-shadow: none;
    }

    .intro-text {
        width: 100%;
        max-width: none;
        order: 1;
    }

    .intro-label {
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .intro-text h2 {
        max-width: 420px;
        margin-bottom: 20px;
        font-size: clamp(43px, 12vw, 57px);
        line-height: 0.97;
    }

    .intro-text p {
        max-width: 390px;
        margin-bottom: 26px;
        font-size: 15px;
        line-height: 1.75;
    }

    .intro-text .button {
        width: fit-content;
        min-width: 190px;
    }
}


/* ==================================================
   PROFESSIONAL SITE FOOTER
================================================== */

.site-footer {
    padding: 0;
    background: #251d18;
    color: #ffffff;
    text-align: left;
}

.footer-main {
    padding: 85px 7% 70px;
    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr)
        repeat(4, minmax(130px, 1fr));
    gap: 55px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 25px;
}

.footer-logo img {
    display: block;
    width: 120px;
    height: auto;
    filter: brightness(0) invert(1);
}

.footer-brand > p {
    max-width: 360px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.85;
}

.footer-showroom-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(214, 176, 106, 0.7);
    color: #d6b06a;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-column h3 {
    margin-bottom: 10px;
    color: #d6b06a;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.footer-column a,
.footer-column p {
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 12px;
    line-height: 1.6;
    text-decoration: none;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-column a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.footer-bottom {
    padding: 24px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-bottom p,
.footer-bottom a {
    margin: 0;
    color: rgba(255, 255, 255, 0.47);
    font-size: 10px;
    text-decoration: none;
}

.footer-legal {
    display: flex;
    gap: 30px;
}

.footer-legal a:hover {
    color: #ffffff;
}


@media (max-width: 900px) {

    .footer-main {
        padding: 70px 25px 55px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand > p {
        max-width: 430px;
    }
}

@media (max-width: 560px) {

    .footer-main {
        padding: 60px 22px 45px;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        padding: 24px 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 12px 22px;
    }
}

/* ==================================================
   HOME INTRO IMAGE — SHOW FULL IMAGE
================================================== */

.intro-image {
    width: 43%;
    max-width: 520px;
    align-self: center;
}

.intro-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: contain;
    object-position: center;
    box-shadow: 0 24px 55px rgba(42, 33, 27, 0.14);
}


@media (max-width: 768px) {

    .intro-image {
        width: 100%;
        max-width: none;
    }

    .intro-image img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }
}


/* ==================================================
   DESIGN WITHOUT COMPROMISE
================================================== */

.intro-home {
    width: 100%;
    padding: 115px 8%;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    align-items: center;
    gap: clamp(60px, 8vw, 125px);
    background: #f3ede3;
    overflow: hidden;
}

.intro-home-image {
    width: 100%;
    min-width: 0;
}

.intro-home-image img {
    display: block;
    width: 100%;
    height: 570px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 28px 65px rgba(44, 34, 27, 0.14);
}

.intro-home-content {
    width: 100%;
    max-width: 570px;
}

.section-eyebrow {
    display: block;
    margin-bottom: 20px;
    color: #8b702f;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.intro-home-content h2 {
    max-width: 540px;
    margin: 0 0 26px;
    color: #30261f;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(54px, 5vw, 76px);
    font-weight: 500;
    line-height: 0.98;
}

.intro-home-content p {
    max-width: 490px;
    margin: 0 0 34px;
    color: #695e55;
    font-size: 15px;
    line-height: 1.85;
}

@media (max-width: 768px) {

    .intro-home {
        padding: 72px 20px 82px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
    }

    .intro-home-content {
        order: 1;
        max-width: none;
    }

    .intro-home-image {
        order: 2;
    }

    .intro-home-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 57% center;
        box-shadow: none;
    }

    .intro-home-content h2 {
        max-width: 440px;
        font-size: clamp(45px, 12vw, 58px);
        line-height: 0.96;
    }

    .intro-home-content p {
        max-width: 410px;
        font-size: 15px;
        line-height: 1.75;
    }
}


:root {
    --dw-beige: #F3EDE3;
    --dw-beige-deep: #E7DCCB;

    --dw-olive: #4B4A34;
    --dw-olive-dark: #292D21;
    --dw-olive-soft: #7A7A5B;

    --dw-red: #741D22;
    --dw-red-dark: #481215;

    --dw-gold: #C3A064;
    --dw-brown: #2D241E;

    --dw-text: #332A24;
    --dw-white: #FFFFFF;
}

.button-primary {
    background: var(--dw-gold);
    color: var(--dw-brown);
}

.button-dark {
    background: var(--dw-olive-dark);
    color: var(--dw-white);
}


.button-accent {
    background: var(--dw-red);
    color: var(--dw-white);
}


/* ==================================================
   SPACES CREATED AROUND YOU
================================================== */

/* .lifestyle-section {
    width: 100%;
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(390px, 0.72fr);
    background: #2d261f;
    overflow: hidden;
} */

.lifestyle-section {
    width: 100%;
    max-width: 1500px;
    min-height: 560px;

    margin: 90px auto;

    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.55fr);

    background: var(--deep-red-dark);
    overflow: hidden;

    box-shadow: 0 24px 60px rgba(44, 31, 25, 0.14);
}

.lifestyle-image {
    min-width: 0;
    min-height: 560px;
    height: 100%;

}

.lifestyle-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center 52%;
}

.lifestyle-panel {
    padding: 65px clamp(38px, 4vw, 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            #35181a 0%,
            #541b20 52%,
            #321817 100%
        );
    color: #ffffff;
}



.lifestyle-eyebrow {
    margin-bottom: 22px;
    color: #d2ad65;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.lifestyle-panel h2 {
    max-width: 430px;
    margin: 0 0 22px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(48px, 4vw, 64px);
    font-weight: 500;
    line-height: 0.94;
}

.lifestyle-panel > p {
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.85;
}

.lifestyle-features {
    margin: 38px 0 36px;
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}

.lifestyle-features span {
    position: relative;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 11px;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.lifestyle-features span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 1px;
    background: #d2ad65;
}

.lifestyle-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(210, 173, 101, 0.72);
    color: #d2ad65;
    font-size: 10px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
}


/* @media (max-width: 850px) {

    .lifestyle-section {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .lifestyle-image {
        min-height: 0;
    }

    .lifestyle-image img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 55% center;
    }

    .lifestyle-panel {
        padding: 65px 24px 72px;
    }

    .lifestyle-panel h2 {
        max-width: 430px;
        font-size: clamp(48px, 13vw, 63px);
        line-height: 0.94;
    }

    .lifestyle-panel > p {
        max-width: 420px;
        font-size: 14px;
        line-height: 1.75;
    }
}
 */


 @media (max-width: 850px) {

    .lifestyle-section {
        width: calc(100% - 28px);
        min-height: 0;

        margin: 65px auto;

        display: flex;
        flex-direction: column;
    }

    .lifestyle-image {
        width: 100%;
        min-height: 0;

        background: var(--beige-soft);
    }

    .lifestyle-image img {
        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        aspect-ratio: auto;

        object-fit: contain;
        object-position: center;
    }

    .lifestyle-panel {
        padding: 52px 24px 58px;
    }

    .lifestyle-eyebrow {
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 2.3px;
    }

    .lifestyle-panel h2 {
        max-width: 360px;

        margin-bottom: 20px;

        font-size: clamp(43px, 11vw, 54px);
        line-height: 0.96;
    }

    .lifestyle-panel > p {
        max-width: 390px;

        font-size: 14px;
        line-height: 1.7;
    }

    .lifestyle-features {
        margin: 30px 0;
        padding: 21px 0;
    }
}

/* MOBILE SAFARI SAFETY */

@media (max-width: 768px) {

    .reveal,
    .intro-home,
    .lifestyle-section,
    .collections {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .intro-home img,
    .lifestyle-section img,
    .collection-card img {
        filter: none !important;
        -webkit-filter: none !important;
    }
}




/* ==================================================
   FINAL HOMEPAGE MOBILE HERO FIX
================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: 760px;
        height: auto;

        padding: 145px 22px 55px;

        display: flex;
        align-items: center;
    }

    .hero-background img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: 58% center;

        transform: none !important;
        animation: none !important;
        filter: none !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(18, 17, 12, 0.28) 0%,
                rgba(18, 17, 12, 0.42) 38%,
                rgba(18, 17, 12, 0.82) 100%
            );

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;

        padding: 0;

        opacity: 1 !important;
        transform: none !important;
    }

    .hero-content h1 {
        max-width: 620px;

        font-size: clamp(47px, 12.5vw, 61px);
        line-height: 0.94;
        letter-spacing: -0.6px;
    }

    .hero-content > p {
        max-width: 430px;

        margin: 24px 0 30px;

        font-size: 15px;
        line-height: 1.65;
    }

    .hero-buttons {
        width: 100%;
        margin-top: 0;

        gap: 14px;
    }

    .hero-primary-button,
    .hero-secondary-button {
        width: 100%;
        max-width: 100%;
    }

    .hero-secondary-button {
        min-height: 56px;
        padding: 15px 10px;
    }
}


/* ==================================================
   DESIGNERS WORLD — GLOBAL WEBSITE COLOUR SYSTEM
   Olive green + deep red + beige
================================================== */


/* ==================================================
   GLOBAL PAGE FOUNDATION
================================================== */

html,
body {
    background: var(--beige);
    color: var(--text-dark);
}


/* ==================================================
   GLOBAL NAVIGATION
================================================== */

header nav {
    background: rgba(37, 43, 34, 0.80);
    border-bottom-color: rgba(246, 241, 233, 0.16);
}

.inner-page-header nav {
    background: rgba(37, 43, 34, 0.94);
}

.nav-links > li > a,
.nav-menu a {
    color: var(--text-light);
}

.nav-links > li > a::after {
    background: var(--deep-red-soft);
}

.nav-links > li > a:hover,
.nav-links > li > a.active-nav-link {
    color: #ead8cc;
}

.dropdown-arrow {
    color: #ead8cc;
}


/* ==================================================
   EXPLORE AND HELP DROPDOWNS
================================================== */

.explore-menu,
.help-menu {
    background: rgba(37, 43, 34, 0.985);
    border-color: rgba(246, 241, 233, 0.13);
}

.explore-menu-heading span,
.explore-category h4,
.explore-feature > span {
    color: #dfb5a1;
}

.explore-links a::before {
    background: var(--deep-red-soft);
}

.explore-links a:hover,
.explore-feature a:hover,
.help-menu li a:hover {
    color: #ead8cc;
}


/* ==================================================
   GLOBAL HERO ACCENTS
================================================== */

.hero-label,
.about-hero-content > span,
.contact-hero-content > span,
.collection-hero-content > span {
    color: #ead8cc;
}

.hero-label::before {
    background: var(--deep-red-soft);
}

.hero h1 em,
.about-hero h1 em,
.contact-hero h1 em,
.collection-hero h1 em {
    color: #dfb5a1;
}

.scroll-line::after,
.about-scroll-indicator div {
    background: var(--deep-red-soft);
}


/* ==================================================
   PRIMARY BUTTONS — DEEP RED
================================================== */

.hero-primary-button,
.primary-button,
.contact-submit-button,
.form-submit-button {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: var(--text-light);
}

.hero-primary-button:hover,
.primary-button:hover,
.contact-submit-button:hover,
.form-submit-button:hover {
    background: var(--deep-red-dark);
    border-color: var(--deep-red-dark);
    color: var(--text-light);
}


/* ==================================================
   STANDARD BUTTONS — DARK OLIVE
================================================== */

.button,
.dark,
.about-button,
.collection-button,
.showroom-button {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
    color: var(--text-light);
}

.button:hover,
.dark:hover,
.about-button:hover,
.collection-button:hover,
.showroom-button:hover {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: var(--text-light);
}


/* ==================================================
   SECONDARY / TEXT BUTTONS
================================================== */

.hero-secondary-button {
    color: var(--beige-soft);
    border-bottom-color: rgba(246, 241, 233, 0.60);
}

.hero-secondary-button:hover {
    color: #ffffff;
    border-bottom-color: var(--deep-red-soft);
}

.collections-more-link,
.lifestyle-link,
.footer-showroom-link {
    color: var(--deep-red);
    border-bottom-color: rgba(118, 40, 47, 0.58);
}

.collections-more-link:hover,
.lifestyle-link:hover,
.footer-showroom-link:hover {
    color: var(--olive-deep);
    border-bottom-color: var(--olive-deep);
}


/* ==================================================
   LIGHT PAGE SECTIONS
================================================== */

.intro-home,
.collections,
.experience,
.about-intro,
.journey-introduction,
.contact-main,
.showroom-locations,
.collection-introduction {
    background: var(--beige-soft);
    color: var(--text-dark);
}


/* ==================================================
   ALTERNATE BEIGE SECTIONS
================================================== */

.partners-section,
.brands-showcase,
.company-timeline,
.about-values,
.contact-social-section,
.collection-products {
    background: var(--beige);
}


/* ==================================================
   HEADINGS
================================================== */

.intro-home-content h2,
.collections-heading h2,
.experience-content h2,
.about-intro-content h2,
.journey-introduction h2,
.contact-main h2,
.collection-introduction h2 {
    color: var(--olive-deep);
}


/* ==================================================
   EYEBROWS AND SMALL LABELS
================================================== */

.section-eyebrow,
.collections-heading > span,
.timeline-label,
.about-intro-content > span,
.journey-introduction > span,
.contact-section-label,
.collection-label {
    color: var(--deep-red);
}


/* ==================================================
   PARAGRAPH TEXT
================================================== */

.intro-home-content p,
.collections-heading p,
.about-intro-content p,
.journey-introduction p,
.contact-main p,
.collection-introduction p {
    color: var(--text-muted);
}


/* ==================================================
   SPACES CREATED / DEEP RED FEATURE SECTION
================================================== */

.lifestyle-section {
    background: var(--deep-red-dark);
}

.lifestyle-panel {
    background: linear-gradient(
        145deg,
        var(--deep-red-dark) 0%,
        var(--deep-red) 55%,
        #42171b 100%
    );
}

.lifestyle-eyebrow,
.lifestyle-link {
    color: #e5c2ad;
}

.lifestyle-features span::before {
    background: #e5c2ad;
}

.lifestyle-link {
    border-bottom-color: rgba(229, 194, 173, 0.65);
}


/* ==================================================
   DARK OLIVE FEATURE SECTIONS
================================================== */

.why-choose,
.values-section,
.about-philosophy,
.contact-information-dark {
    background: var(--olive-deep);
    color: var(--text-light);
}

.value-box span,
.about-value-number {
    color: #e5c2ad;
}


/* ==================================================
   COLLECTION AND BRAND CARDS
================================================== */

.collection-card,
.brand-card,
.timeline-item,
.contact-card,
.showroom-card {
    border-color: rgba(61, 69, 55, 0.15);
}

.brand-card,
.timeline-content,
.contact-card,
.showroom-card {
    background: var(--card-bg);
}

.collection-card:hover,
.brand-card:hover,
.contact-card:hover,
.showroom-card:hover {
    box-shadow: 0 22px 55px rgba(37, 43, 34, 0.15);
}


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

.timeline-marker {
    border-color: var(--deep-red);
    color: var(--deep-red);
}

.timeline-item::before,
.company-timeline::before {
    background: rgba(61, 69, 55, 0.26);
}

.timeline-content h3 {
    color: var(--olive-deep);
}

.timeline-content p {
    color: var(--text-muted);
}


/* ==================================================
   FORMS
================================================== */

input,
textarea,
select {
    background: var(--card-bg);
    border-color: rgba(61, 69, 55, 0.20);
    color: var(--text-dark);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--olive);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 112, 90, 0.10);
}


/* ==================================================
   SHOWROOM / EXPERIENCE
================================================== */

.experience {
    background: var(--beige-soft);
}

.experience-content h2 {
    color: var(--olive-deep);
}

.experience .button {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: var(--text-light);
}

.experience .button:hover {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
}


/* ==================================================
   FOOTER
================================================== */

footer,
.site-footer {
    background: var(--olive-darkest);
    color: var(--text-light);
}

.footer-column h3 {
    color: #dfb5a1;
}

.footer-column a,
.footer-column p,
.footer-brand > p {
    color: rgba(248, 244, 238, 0.68);
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-showroom-link {
    color: #dfb5a1;
    border-bottom-color: rgba(223, 181, 161, 0.62);
}

.footer-bottom {
    border-top-color: rgba(248, 244, 238, 0.10);
}


/* ==================================================
   MOBILE MENU
================================================== */

@media (max-width: 768px) {

    header nav,
    .inner-page-header nav {
        background: var(--olive-darkest);
    }

    .nav-links {
        background: var(--olive-darkest);
    }

    .mobile-menu-button {
        border-color: rgba(248, 244, 238, 0.35);
    }

    .mobile-menu-button span {
        background: var(--text-light);
    }
}


/* ==================================================
   ABOUT PAGE — FINAL VISUAL REFINEMENT
================================================== */

.about-hero-content > span {
    color: #e5c2ad;
}

.about-hero-content h1 em {
    color: #e5c2ad;
}

.about-scroll-indicator {
    color: var(--beige-soft);
}

.about-scroll-indicator div {
    background: var(--deep-red-soft);
}

.about-intro {
    background: var(--beige-soft);
}

.about-intro-content > span {
    color: var(--deep-red);
}

.about-intro-content h2 {
    color: var(--olive-deep);
}

.about-intro-content p {
    color: var(--text-muted);
}

.about-intro-highlight strong {
    color: var(--deep-red);
}

.journey-introduction {
    background: var(--beige);
}

.journey-introduction > span {
    color: var(--deep-red);
}

.journey-introduction h2 {
    color: var(--olive-deep);
}

.journey-introduction h2::after {
    background: var(--deep-red);
}

.journey-introduction p {
    color: var(--text-muted);
}

.company-timeline {
    background: var(--beige-soft);
}

.company-timeline::before {
    background: linear-gradient(
        transparent,
        rgba(61, 69, 55, 0.48),
        rgba(61, 69, 55, 0.48),
        transparent
    );
}

.timeline-marker {
    background: var(--beige-soft);
    border-color: var(--deep-red);
    color: var(--deep-red);
    box-shadow: 0 0 0 12px var(--beige-soft);
}

.timeline-label {
    color: var(--deep-red);
}

.timeline-content h3 {
    color: var(--olive-deep);
}

.timeline-content p {
    color: var(--text-muted);
}
@media (max-width: 650px) {

    .timeline-marker {
        box-shadow: 0 0 0 8px var(--beige-soft);
    }

}

.global-partners {
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(118, 40, 47, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(61, 69, 55, 0.10),
            transparent 30%
        ),
        var(--beige);
}

.global-partners-heading > span {
    color: var(--deep-red);
}

.global-partners-heading h2 {
    color: var(--olive-deep);
}

.global-partners-heading h2::after {
    background: var(--deep-red);
}

.global-partners-heading p {
    color: var(--text-muted);
}

.global-brand-card {
    background: var(--card-bg);
    border-color: rgba(61, 69, 55, 0.15);
}

.global-brand-details > span,
.global-brand-details small {
    color: var(--deep-red);
}

.global-brand-details h3 {
    color: var(--olive-deep);
}
/* ABOUT HERO FINAL SCALE */

.about-hero-content {
    max-width: 780px;
}

.about-hero-content h1 {
    font-size: clamp(68px, 7vw, 102px);
    line-height: 0.9;
}

.about-hero-content p {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.75;
}

/* ABOUT TIMELINE — TIGHTER EDITORIAL RHYTHM */

.timeline-item {
    margin-bottom: 88px;
}

.timeline-content {
    padding: 30px 34px;
}

.timeline-logo-panel {
    min-height: 270px;
}

.timeline-logo-panel img {
    max-width: 72%;
    max-height: 150px;
}

.timeline-marker {
    width: 92px;
    height: 92px;
}

.timeline-marker span {
    font-size: 18px;
}

.company-timeline::before {
    background: linear-gradient(
        transparent,
        rgba(61, 69, 55, 0.34),
        rgba(61, 69, 55, 0.34),
        transparent
    );
}

.timeline-logo-panel {
    background: #f1e8dc;
    border: 1px solid rgba(61, 69, 55, 0.10);

    box-shadow:
        0 18px 45px rgba(53, 43, 37, 0.07);
}


/* GLOBAL PARTNERS — LIGHTER LOGO PANELS */

.global-brand-logo {
    background: #e9dfd2;
    border: 1px solid rgba(61, 69, 55, 0.10);

    box-shadow:
        0 12px 28px rgba(53, 43, 37, 0.07);
}

.global-brand-logo img {
    max-width: 84%;
    max-height: 78%;
    object-fit: contain;
}

/* ==================================================
   ABOUT PHILOSOPHY — REFINED
================================================== */

.about-philosophy {
    min-height: 520px;
    padding: 90px 8%;

    background:
        linear-gradient(
            rgba(37, 43, 34, 0.88),
            rgba(37, 43, 34, 0.92)
        ),
        url("images/about/philosophy-background.jpg");

    background-size: cover;
    background-position: center;
}

.about-philosophy-content {
    max-width: 850px;
    padding: 55px 65px;

    border: 1px solid rgba(246, 241, 233, 0.16);

    background: rgba(37, 43, 34, 0.40);
}

.about-philosophy-content > span {
    color: #e5c2ad;
}

.about-philosophy-content h2 {
    font-size: clamp(54px, 5vw, 74px);
    line-height: 0.96;
}

.about-philosophy-content p {
    max-width: 650px;
    margin: 28px auto 0;

    color: rgba(248, 244, 238, 0.75);

    font-size: 14px;
    line-height: 1.8;
}

.about-philosophy-content blockquote {
    margin-top: 30px;

    color: #e5c2ad;

    font-family: "Cormorant Garamond", serif;
    font-size: 23px;
    line-height: 1.3;
}

@media (max-width: 650px) {

    .about-philosophy {
        min-height: auto;
        padding: 70px 20px;
    }

    .about-philosophy-content {
        padding: 42px 24px;
    }

    .about-philosophy-content h2 {
        font-size: 48px;
    }

}

/* ==================================================
   ABOUT VISIT SHOWROOMS — REFINED
================================================== */

.about-visit {
    background: var(--beige-soft);

    padding: 105px 8%;
    gap: 75px;
}

.about-visit-content {
    max-width: 600px;
}

.about-visit-content > span {
    color: var(--deep-red);
}

.about-visit-content h2 {
    color: var(--olive-deep);

    font-size: clamp(52px, 5vw, 72px);
    line-height: 0.98;
}

.about-visit-content p {
    color: var(--text-muted);
    line-height: 1.8;
}

.about-visit-image {
    min-height: 560px;
}

.about-visit-image img {
    width: 100%;
    height: 560px;

    object-fit: cover;
    object-position: center;
}

@media (max-width: 650px) {

    .about-visit {
        padding: 75px 20px;
        gap: 42px;
    }

    .about-visit-content h2 {
        font-size: 46px;
    }

    .about-visit-image {
        min-height: 0;
    }

    .about-visit-image img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

}

/* ==================================================
   ABOUT SOCIAL — REFINED
================================================== */

.about-social {
    background: var(--beige);
    padding: 110px 8%;
}

.about-social-content > span {
    color: var(--deep-red);
}

.about-social-content h2 {
    color: var(--olive-deep);

    font-size: clamp(50px, 5vw, 70px);
    line-height: 1;
}

.social-link {
    background: var(--card-bg);

    border: 1px solid rgba(61, 69, 55, 0.13);

    box-shadow:
        0 12px 32px rgba(53, 43, 37, 0.05);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.social-link:hover {
    transform: translateY(-5px);

    border-color: rgba(118, 40, 47, 0.30);

    box-shadow:
        0 20px 45px rgba(53, 43, 37, 0.10);
}

.social-icon {
    color: var(--deep-red);
}

.about-social {
    padding-bottom: 125px;
}

/* ABOUT SHOWROOM — DARK PANEL TEXT FIX */

.about-visit-content h2 {
    color: var(--text-light);
}

.about-visit-content > span {
    color: #e5c2ad;
}

.about-visit-content p {
    color: rgba(248, 244, 238, 0.72);
}

.about-visit-content .hours-row,
.about-visit-content .hours-row span,
.about-visit-content .hours-row strong {
    color: rgba(248, 244, 238, 0.88);
}

.about-visit-content .closed-day strong,
.about-visit-content .holiday-notice {
    color: #e5c2ad;
}

/* ABOUT SHOWROOM — BETTER PROPORTIONS */

.about-visit {
    width: min(1320px, calc(100% - 80px));
    margin: 110px auto;

    padding: 0;

    display: grid;
    grid-template-columns: 1.18fr 0.82fr;

    gap: 0;

    align-items: stretch;

    background: transparent;
}


.about-visit-image {
    min-height: 680px;
}

.about-visit-image img {
    width: 100%;
    height: 100%;
    min-height: 680px;

    object-fit: cover;
    object-position: center;
}


.about-visit-content {
    max-width: none;

    padding: 70px 58px;

    background: var(--brown-dark);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-visit-content h2 {
    max-width: 470px;

    margin: 16px 0 28px;

    font-size: clamp(48px, 4.2vw, 66px);
    line-height: 0.96;
}


.about-primary-button {
    background: var(--deep-red);
    border: 1px solid var(--deep-red);
    color: var(--text-light);
}

.about-primary-button:hover {
    background: var(--deep-red-dark);
    border-color: var(--deep-red-dark);
}

.about-secondary-button {
    background: transparent;
    border: 1px solid rgba(248, 244, 238, 0.32);
    color: var(--text-light);
}

.about-secondary-button:hover {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
}


.about-social .social-icon {
    background: var(--deep-red);
    color: var(--text-light);
}

@media (max-width: 768px) {

    .about-visit {
        width: calc(100% - 28px);
        margin: 70px auto;

        grid-template-columns: 1fr;
    }

    .about-visit-image {
        min-height: 0;
    }

    .about-visit-image img {
        width: 100%;
        height: auto;
        min-height: 0;

        object-fit: contain;
    }

    .about-visit-content {
        padding: 52px 24px 58px;
    }

    .about-visit-content h2 {
        font-size: clamp(44px, 11vw, 56px);
    }

    .about-visit-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .about-primary-button,
    .about-secondary-button {
        width: 100%;
    }
}

.about-philosophy-content h2 {
    font-size: clamp(50px, 4.5vw, 68px);
    line-height: 0.98;
}

@media (max-width: 650px) {
    .about-philosophy-content h2 {
        font-size: 44px;
    }
}

.about-visit {
    margin-top: 85px;
}

/* ==================================================
   DESIGNERS WORLD — CONTACT PAGE
================================================== */


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

.contact-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 760px;

    padding: 150px 9% 90px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--text-light);
}


.contact-hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;
}


.contact-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.contact-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(27, 31, 23, 0.88) 0%,
            rgba(27, 31, 23, 0.66) 43%,
            rgba(27, 31, 23, 0.22) 78%,
            rgba(27, 31, 23, 0.28) 100%
        );
}


.contact-hero-content {
    max-width: 800px;
}


.contact-hero-content > span {
    display: block;

    margin-bottom: 22px;

    color: #e5c2ad;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.contact-hero-content h1 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(70px, 7vw, 105px);
    font-weight: 500;
    line-height: 0.88;

    letter-spacing: -1px;
}


.contact-hero-content h1 em {
    display: block;

    margin-top: 10px;

    color: #e5c2ad;

    font-weight: 500;
}


.contact-hero-content p {
    max-width: 610px;

    margin: 32px 0;

    color: rgba(248, 244, 238, 0.82);

    font-size: 15px;
    line-height: 1.8;
}


.contact-hero-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 18px;

    padding-bottom: 8px;

    border-bottom:
        1px solid rgba(229, 194, 173, 0.65);

    color: #e5c2ad;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ==================================================
   CONTACT OPTIONS
================================================== */

.contact-options {
    padding: 120px 8%;

    background: var(--beige-soft);
}


.contact-options-heading {
    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


.contact-options-heading > span,
.contact-showrooms-heading > span,
.contact-social-heading > span {
    display: block;

    margin-bottom: 17px;

    color: var(--deep-red);

    font-size: 10px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}


.contact-options-heading h2,
.contact-showrooms-heading h2,
.contact-social-heading h2 {
    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(54px, 5.5vw, 78px);
    font-weight: 500;
    line-height: 1;
}


.contact-options-heading p,
.contact-showrooms-heading p,
.contact-social-heading p {
    margin-top: 22px;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.8;
}


.contact-option-grid {
    max-width: 1250px;

    margin: auto;

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

    gap: 22px;
}


.contact-option-card {
    min-height: 330px;

    padding: 38px;

    display: flex;
    flex-direction: column;

    background: var(--card-bg);

    border:
        1px solid rgba(61, 69, 55, 0.13);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-option-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 50px
        rgba(37, 43, 34, 0.09);
}


.contact-option-number {
    color: var(--deep-red);

    font-size: 10px;
    letter-spacing: 2px;
}


.contact-option-card h3 {
    margin: 55px 0 16px;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: 40px;
    font-weight: 500;
}


.contact-option-card p {
    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}


.contact-option-card a {
    width: fit-content;

    margin-top: auto;
    padding-top: 28px;

    color: var(--deep-red);

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


.contact-option-card a strong {
    margin-left: 11px;
}


.contact-option-featured {
    background: var(--olive-deep);
}


.contact-option-featured .contact-option-number,
.contact-option-featured a {
    color: #e5c2ad;
}


.contact-option-featured h3 {
    color: var(--text-light);
}


.contact-option-featured p {
    color: rgba(248, 244, 238, 0.68);
}


/* ==================================================
   SHOWROOM LOCATIONS
================================================== */

.contact-showrooms {
    padding: 120px 8%;

    background: var(--beige);
}


.contact-showrooms-heading {
    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;
}


.showroom-location-grid {
    max-width: 1250px;

    margin: auto;

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

    gap: 26px;
}


.showroom-location-card {
    position: relative;

    min-height: 390px;

    padding: 48px;

    background: var(--card-bg);

    border:
        1px solid rgba(61, 69, 55, 0.13);

    overflow: hidden;
}


.showroom-number {
    color: rgba(118, 40, 47, 0.20);

    font-family: "Cormorant Garamond", serif;

    font-size: 110px;
    line-height: 1;
}


.showroom-location-content {
    margin-top: -22px;
}


.showroom-location-content > span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.showroom-location-content h3 {
    margin: 13px 0;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: 45px;
    font-weight: 500;
}


.showroom-location-content address {
    max-width: 420px;

    color: var(--text-muted);

    font-size: 14px;
    font-style: normal;
    line-height: 1.8;
}


.showroom-location-actions {
    margin-top: 40px;

    border-top:
        1px solid rgba(61, 69, 55, 0.13);

    padding-top: 25px;
}


.showroom-location-actions a {
    color: var(--deep-red);

    text-decoration: none;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ==================================================
   HOURS + ENQUIRY
================================================== */

.contact-enquiry-section {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    background: var(--olive-darkest);
}


.contact-hours {
    padding: 90px 8%;

    color: var(--text-light);
}


.contact-section-label {
    display: block;

    margin-bottom: 18px;

    color: #e5c2ad;

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.contact-hours h2,
.contact-form-panel h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 4vw, 68px);
    font-weight: 500;
    line-height: 1;
}


.contact-hours > p {
    max-width: 450px;

    margin-top: 20px;

    color: rgba(248, 244, 238, 0.65);

    font-size: 13px;
    line-height: 1.8;
}


.contact-hours-list {
    margin-top: 42px;
}


.contact-hours-list > div {
    padding: 16px 0;

    display: flex;
    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid rgba(248, 244, 238, 0.10);
}


.contact-hours-list span,
.contact-hours-list strong {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
}


.contact-hours-list strong {
    text-align: right;
}


.contact-hours-closed strong,
.contact-hours > small {
    color: #e5c2ad;
}


.contact-hours > small {
    display: block;

    margin-top: 25px;

    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


/* FORM */

.contact-form-panel {
    padding: 90px 8%;

    background: var(--beige-soft);
}


.contact-form-panel .contact-section-label {
    color: var(--deep-red);
}


.contact-form-panel h2 {
    color: var(--olive-deep);
}


.contact-form-panel > p {
    max-width: 540px;

    margin: 20px 0 38px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}


.contact-form-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.contact-field {
    margin-bottom: 22px;
}


.contact-field label {
    display: block;

    margin-bottom: 9px;

    color: var(--text-dark);

    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    padding: 15px 0;

    background: transparent;

    border: 0;
    border-bottom:
        1px solid rgba(61, 69, 55, 0.25);

    border-radius: 0;

    color: var(--text-dark);

    font: inherit;

    font-size: 13px;

    transition:
        border-color 0.3s ease;
}


.contact-field textarea {
    resize: vertical;

    min-height: 130px;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;

    border-bottom-color:
        var(--deep-red);

    box-shadow: none;
}


.contact-submit-button {
    min-height: 56px;

    margin-top: 12px;
    padding: 0 35px;

    border: 1px solid var(--deep-red);

    background: var(--deep-red);

    color: var(--text-light);

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-submit-button span {
    margin-left: 15px;
}


.contact-submit-button:hover {
    background: var(--deep-red-dark);

    transform: translateY(-2px);
}


.contact-form-note {
    margin-top: 18px;

    color: var(--text-muted);

    font-size: 10px;
}


.contact-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==================================================
   CONTACT SOCIAL
================================================== */

.contact-social {
    padding: 110px 8% 125px;

    background: var(--beige);
}


.contact-social-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.contact-social-grid {
    max-width: 1050px;

    margin: auto;

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

    gap: 18px;
}


.contact-social-card {
    min-height: 110px;

    padding: 25px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: var(--card-bg);

    border:
        1px solid rgba(61, 69, 55, 0.13);

    text-decoration: none;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-social-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 42px
        rgba(37, 43, 34, 0.08);
}


.contact-social-card > span {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--deep-red);

    color: var(--text-light);

    font-size: 9px;
}


.contact-social-card strong {
    display: block;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;
    font-weight: 500;
}


.contact-social-card small {
    color: var(--text-muted);

    font-size: 10px;
}


/* ==================================================
   CONTACT MOBILE
================================================== */

@media (max-width: 850px) {

    .contact-option-grid,
    .showroom-location-grid,
    .contact-social-grid {
        grid-template-columns: 1fr;
    }


    .contact-enquiry-section {
        grid-template-columns: 1fr;
    }


    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

}


@media (max-width: 650px) {

    .contact-hero {
        min-height: 720px;

        padding:
            140px 22px
            70px;
    }


    .contact-hero-background img {
        object-position: 55% center;
    }


    .contact-hero-content h1 {
        font-size:
            clamp(53px, 14vw, 66px);

        line-height: 0.92;
    }


    .contact-hero-content p {
        font-size: 14px;
    }


    .contact-options,
    .contact-showrooms,
    .contact-social {
        padding:
            80px 20px;
    }


    .contact-options-heading h2,
    .contact-showrooms-heading h2,
    .contact-social-heading h2 {
        font-size: 48px;
    }


    .contact-option-card,
    .showroom-location-card {
        padding: 30px 25px;
    }


    .showroom-number {
        font-size: 80px;
    }


    .contact-hours,
    .contact-form-panel {
        padding:
            70px 24px;
    }


    .contact-hours h2,
    .contact-form-panel h2 {
        font-size: 48px;
    }


    .contact-hours-list > div {
        align-items: flex-start;

        gap: 20px;
    }


    .contact-submit-button {
        width: 100%;
    }

}

/* ==================================================
   CONTACT FORM STATUS
================================================== */

.contact-form-status {
    display: none;

    margin-bottom: 26px;
    padding: 16px 18px;

    font-size: 12px;
    line-height: 1.6;
}

.contact-form-status.success {
    display: block;

    background: rgba(61, 69, 55, 0.10);

    border-left: 3px solid var(--olive-deep);

    color: var(--olive-deep);
}

.contact-form-status.error {
    display: block;

    background: rgba(118, 40, 47, 0.08);

    border-left: 3px solid var(--deep-red);

    color: var(--deep-red);
}

/* CONTACT HERO — FINAL POLISH */

.contact-hero-content {
    max-width: 720px;
    transform: translateY(-18px);
}

.contact-hero-content h1 {
    font-size: clamp(68px, 6.5vw, 96px);
    line-height: 0.9;
}

.contact-hero-content p {
    max-width: 560px;
    margin: 28px 0 30px;
}

@media (max-width: 650px) {

    .contact-hero-content {
        transform: none;
    }

}

.contact-option-card a {
    line-height: 1.6;
    word-break: break-word;
}

.contact-option-card p {
    min-height: 68px;
}

.contact-option-card:nth-child(2) a {
    font-size: 9px;
    letter-spacing: 1.2px;
}

.showroom-location-content address {
    font-size: 13px;
    line-height: 1.8;
}

.showroom-location-actions a {
    font-size: 9px;
}

.showroom-number {
    font-size: 92px;
}

.contact-enquiry-section {
    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);
}

.contact-form-panel h2 {
    font-size: clamp(48px, 4vw, 62px);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    border-bottom-color: rgba(61, 69, 55, 0.32);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-bottom-color: var(--deep-red);
}

.contact-social-heading h2 {
    font-size: clamp(50px, 5vw, 66px);
}


/* ==================================================
   BATHTUBS PAGE
================================================== */


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

.bathtubs-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 760px;

    padding: 150px 9% 90px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--text-light);
}


.bathtubs-hero-background {
    position: absolute;
    inset: 0;

    z-index: -3;
}


.bathtubs-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.bathtubs-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(24, 29, 22, 0.90) 0%,
            rgba(24, 29, 22, 0.68) 42%,
            rgba(24, 29, 22, 0.24) 76%,
            rgba(24, 29, 22, 0.14) 100%
        );
}


.bathtubs-hero-content {
    width: 100%;
    max-width: 760px;
}


.bathtubs-hero-content > span {
    display: block;

    margin-bottom: 22px;

    color: #ead8cc;

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


.bathtubs-hero-content h1 {
    margin: 0;

    color: var(--text-light);

    font-size: clamp(66px, 6.5vw, 102px);
    font-weight: 400;
    line-height: 0.91;

    letter-spacing: -2px;
}


.bathtubs-hero-content h1 em {
    display: block;

    color: #dfb5a1;

    font-weight: 400;
}


.bathtubs-hero-content p {
    max-width: 570px;

    margin: 30px 0 34px;

    color: rgba(255,255,255,0.78);

    font-size: 14px;
    line-height: 1.8;
}


.bathtubs-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;

    padding-bottom: 8px;

    color: #ffffff;

    border-bottom: 1px solid rgba(255,255,255,0.48);

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    transition: 0.3s ease;
}


.bathtubs-hero-link:hover {
    color: #dfb5a1;
    border-bottom-color: #dfb5a1;
}



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

.bathtubs-introduction {
    padding: 120px 9%;

    background: var(--beige-soft);
}


.bathtubs-introduction-inner {
    max-width: 920px;

    margin: 0 auto;

    text-align: center;
}


.bathtubs-section-label {
    display: block;

    margin-bottom: 22px;

    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}


.bathtubs-introduction h2 {
    margin: 0;

    color: var(--olive-deep);

    font-size: clamp(50px, 5vw, 76px);
    font-weight: 400;
    line-height: 1;
}


.bathtubs-introduction h2 em {
    color: var(--deep-red);

    font-weight: 400;
}


.bathtubs-introduction p {
    max-width: 690px;

    margin: 28px auto 0;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.85;
}



/* ==================================================
   BRAND NAVIGATION
================================================== */

.bathtub-brands {
    padding: 120px 9% 135px;

    background: var(--beige);
}


.bathtub-brands-heading {
    max-width: 730px;

    margin: 0 auto 65px;

    text-align: center;
}


.bathtub-brands-heading > span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}


.bathtub-brands-heading h2 {
    margin: 18px 0;

    color: var(--olive-deep);

    font-size: clamp(44px, 4.5vw, 66px);
    font-weight: 400;
}


.bathtub-brands-heading p {
    color: var(--text-muted);

    font-size: 13px;
}


.bathtub-brand-grid {
    display: grid;

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

    gap: 24px;

    max-width: 1060px;

    margin: 0 auto;
}


.bathtub-brand-card {
    display: block;

    background: var(--beige-soft);

    border: 1px solid rgba(56, 66, 51, 0.10);

    text-decoration: none;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.bathtub-brand-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 65px rgba(39, 45, 35, 0.12);
}


.bathtub-brand-logo {
    height: 245px;

    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f2e9;
}


.bathtub-brand-logo img {
    width: auto;
    max-width: 245px;
    max-height: 90px;

    object-fit: contain;
}


.bathtub-brand-card-bottom {
    padding: 31px 34px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    background: var(--olive-deep);

    color: var(--text-light);
}


.bathtub-brand-card-bottom span {
    display: block;

    margin-bottom: 7px;

    color: #dfb5a1;

    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.bathtub-brand-card-bottom h3 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 400;
}


.bathtub-brand-card-bottom strong {
    color: #dfb5a1;

    font-size: 20px;
    font-weight: 400;
}



/* ==================================================
   BRAND SECTIONS
================================================== */

.bathtub-brand-section {
    scroll-margin-top: 95px;
}


.bathtub-brand-introduction {
    padding: 125px 9%;

    background: var(--beige-soft);
}


.bathtub-brand-heading {
    max-width: 720px;

    margin-bottom: 58px;
}


.bathtub-brand-heading > span,
.bathtub-brand-feature-content > span {
    display: block;

    margin-bottom: 16px;

    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}


.bathtub-brand-heading h2,
.bathtub-brand-feature-content h2 {
    margin: 0;

    color: var(--olive-deep);

    font-size: clamp(54px, 5vw, 78px);
    font-weight: 400;
    line-height: 0.98;
}


.bathtub-brand-heading h2 em,
.bathtub-brand-feature-content h2 em {
    display: block;

    color: var(--deep-red);

    font-weight: 400;
}


.bathtub-brand-heading p,
.bathtub-brand-feature-content p {
    max-width: 570px;

    margin-top: 24px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}

.bathtub-brands-heading h2 {
    line-height: 1.05;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
   TEMPORARY V&B PLACEHOLDER
================================================== */

.bathtub-image-placeholder {
    min-height: 410px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--olive-deep);

    color: var(--text-light);
}


.bathtub-image-placeholder span {
    color: #dfb5a1;

    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.bathtub-image-placeholder p {
    margin-top: 10px;

    color: rgba(255,255,255,0.60);

    font-size: 12px;
}



/* ==================================================
   PRODUCT AREA
================================================== */

.bathtub-product-area {
    padding: 110px 9% 130px;

    background: var(--beige);
}


.bathtub-products-heading {
    margin-bottom: 50px;
}


.bathtub-products-heading span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.bathtub-products-heading h3 {
    margin: 15px 0 0;

    color: var(--olive-deep);

    font-size: clamp(38px, 4vw, 56px);
    font-weight: 400;
}


.bathtub-product-grid {
    display: grid;

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

    gap: 25px;
}



/* ==================================================
   VITRA MAIN FEATURE
================================================== */

.bathtub-brand-feature {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(420px, 0.9fr);

    min-height: 700px;

    background: var(--olive-deep);
}


.bathtub-brand-feature-image {
    min-height: 700px;

    overflow: hidden;
}


.bathtub-brand-feature-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.bathtub-brand-feature-content {
    padding: 85px 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.bathtub-brand-feature-content h2 {
    color: #ffffff;
}


.bathtub-brand-feature-content p {
    color: rgba(255,255,255,0.72);
}


.bathtub-brand-feature-content a {
    width: fit-content;

    margin-top: 25px;
    padding-bottom: 8px;

    color: #dfb5a1;

    border-bottom:
        1px solid rgba(223,181,161,0.55);

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}



/* ==================================================
   VITRA CATEGORY NAVIGATION
================================================== */

.vitra-bathtub-categories {
    padding: 120px 9% 135px;

    background: var(--beige-soft);
}


.vitra-category-heading {
    margin-bottom: 55px;
}


.vitra-category-heading span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.vitra-category-heading h3 {
    margin: 15px 0 0;

    color: var(--olive-deep);

    font-size: clamp(45px, 4vw, 62px);
    font-weight: 400;
}


.vitra-category-grid {
    display: grid;

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

    gap: 1px;

    background: rgba(57, 66, 52, 0.12);
}


.vitra-category-card {
    min-height: 300px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    background: var(--beige);

    color: var(--olive-deep);

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.vitra-category-card:hover {
    background: var(--olive-deep);

    color: #ffffff;
}


.vitra-category-card span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 2px;
}


.vitra-category-card h4 {
    margin: auto 0 26px;

    max-width: 240px;

    font-size: 25px;
    line-height: 1.15;

    overflow-wrap: normal;
    word-break: normal;
}

.vitra-category-card {
    min-width: 0;
}

.vitra-category-card h4 {
    min-height: 86px;

    display: flex;
    align-items: flex-end;
}
.vitra-category-card strong {
    color: var(--deep-red);

    font-weight: 400;
}



/* ==================================================
   VITRA PRODUCT CATEGORIES
================================================== */

.vitra-product-category {
    padding: 120px 9% 135px;

    scroll-margin-top: 95px;

    background: var(--beige);
}


.vitra-product-category:nth-of-type(even) {
    background: var(--beige-soft);
}


.vitra-category-intro {
    margin-bottom: 60px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.65fr);

    gap: 60px;

    align-items: end;
}


.vitra-category-intro span {
    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.vitra-category-intro h3 {
    margin: 16px 0 0;

    color: var(--olive-deep);

    font-size: clamp(45px, 4.5vw, 67px);
    font-weight: 400;
    line-height: 1;
}


.vitra-category-intro h3 em {
    color: var(--deep-red);

    font-weight: 400;
}


.vitra-category-intro p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}



/* ==================================================
   SHOWROOM CTA
================================================== */

.bathtubs-showroom-cta {
    padding: 130px 9%;

    background: var(--olive-deep);

    color: var(--text-light);
}


.bathtubs-showroom-cta > div {
    max-width: 830px;

    margin: 0 auto;

    text-align: center;
}


.bathtubs-showroom-cta span {
    color: #dfb5a1;

    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}


.bathtubs-showroom-cta h2 {
    margin: 20px 0;

    color: #ffffff;

    font-size: clamp(49px, 5vw, 72px);
    font-weight: 400;
    line-height: 1;
}


.bathtubs-showroom-cta h2 em {
    display: block;

    color: #dfb5a1;

    font-weight: 400;
}


.bathtubs-showroom-cta p {
    max-width: 580px;

    margin: 0 auto 34px;

    color: rgba(255,255,255,0.70);

    font-size: 13px;
    line-height: 1.8;
}


.bathtubs-showroom-button {
    display: inline-flex;

    gap: 20px;
    align-items: center;

    padding: 17px 24px;

    background: var(--deep-red);

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    transition: 0.3s ease;
}


.bathtubs-showroom-button:hover {
    background: var(--deep-red-dark);
}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .bathtub-brand-grid {
        grid-template-columns: 1fr;
    }


    .bathtub-brand-feature {
        grid-template-columns: 1fr;
    }


    .bathtub-brand-feature-image {
        min-height: 560px;
    }


    .bathtub-brand-feature-content {
        padding: 75px 7%;
    }


    .vitra-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .vitra-category-intro {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .bathtub-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .bathtubs-hero {
        min-height: 720px;

        padding:
            145px 22px
            65px;
    }


    .bathtubs-hero-background img {
        object-position: 54% center;
    }


    .bathtubs-hero-content h1 {
        font-size:
            clamp(51px, 13.5vw, 65px);

        line-height: 0.94;

        letter-spacing: -1px;
    }


    .bathtubs-hero-content p {
        margin:
            25px 0
            30px;

        font-size: 13px;
    }


    .bathtubs-introduction,
    .bathtub-brands,
    .bathtub-brand-introduction,
    .bathtub-product-area,
    .vitra-bathtub-categories,
    .vitra-product-category,
    .bathtubs-showroom-cta {
        padding-left: 22px;
        padding-right: 22px;
    }


    .bathtub-brand-logo {
        height: 200px;

        padding: 40px;
    }


    .vitra-category-grid {
        grid-template-columns: 1fr;
    }


    .vitra-category-card {
        min-height: 195px;
    }


    .bathtub-brand-feature-image {
        min-height: 460px;
    }


    .bathtub-product-grid {
        grid-template-columns: 1fr;
    }

}

.bathtubs-hero-content {
    max-width: 690px;
}

.bathtubs-hero-content h1 {
    font-size: clamp(58px, 5.8vw, 88px);
    line-height: 0.94;
}

.bathtubs-hero-content p {
    max-width: 500px;
}

.bathtub-brand-logo {
    height: 300px;
    padding: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--beige-soft);
}

.bathtub-brand-logo img {
    width: auto;
    max-width: 280px;
    max-height: 110px;

    object-fit: contain;

    background: transparent;
}

.bathtub-brand-logo {
    height: 300px;
    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #66584f;
}

.bathtub-brand-logo img {
    width: 48%;
    max-width: 360px;
    max-height: 155px;

    object-fit: contain;
}

.bathtub-brand-logo {
    height: 260px;

    padding: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    /* background: #5d5048; */
  
    background: #5a4d46;
}


.bathtub-brand-logo img {
    width: 58%;
    max-width: 360px;
    max-height: 155px;

    object-fit: contain;
}

.bathtub-brands {
    padding-bottom: 95px;
}

.bathtub-brand-introduction {
    padding-top: 95px;
}



/* ==================================================
   BATHTUB BRAND CARDS — REFINED
================================================== */

.bathtub-brand-grid {
    display: grid;

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

    gap: 22px;

    max-width: 1040px;

    margin: 0 auto;
}


.bathtub-brand-card {
    display: flex;
    flex-direction: column;

    min-height: 310px;

    background: #5d5048;

    border: 1px solid rgba(255,255,255,0.08);

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


.bathtub-brand-card:hover {
    transform: translateY(-5px);

    background: #554840;

    box-shadow:
        0 24px 55px rgba(39,45,35,0.14);
}


/* LOGO AREA */

.bathtub-brand-logo {
    flex: 1;

    min-height: 225px;

    padding: 38px 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
}


.bathtub-brand-logo img {
    width: 56%;
    max-width: 330px;
    max-height: 135px;

    object-fit: contain;
}


/* BOTTOM INFORMATION */

.bathtub-brand-card-bottom {
    padding: 22px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(35, 43, 33, 0.78);

    border-top: 1px solid rgba(255,255,255,0.10);
}


.bathtub-brand-card-bottom div {
    display: flex;
    align-items: baseline;

    gap: 16px;
}


.bathtub-brand-card-bottom span {
    margin: 0;

    color: #dfb5a1;

    font-size: 8px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}


.bathtub-brand-card-bottom h3 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;
    font-weight: 400;
}


.bathtub-brand-card-bottom strong {
    color: #dfb5a1;

    font-size: 18px;
    font-weight: 400;

    transform: rotate(-90deg);
}

.bathtub-brands-heading {
    max-width: 700px;

    margin: 0 auto 48px;

    text-align: center;
}

@media (max-width: 650px) {

    .bathtub-brand-grid {
        grid-template-columns: 1fr;
    }

    .bathtub-brand-card {
        min-height: 270px;
    }

    .bathtub-brand-logo {
        min-height: 200px;
    }

    .bathtub-brand-logo img {
        width: 62%;
    }

    .bathtub-brand-card-bottom div {
        gap: 10px;
    }

    .bathtub-brand-card-bottom h3 {
        font-size: 19px;
    }

}


.bathtub-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;

    max-width: 860px;

    margin: 0 auto;
}


.bathtub-brand-card {
    min-height: 390px;
}


.bathtub-brand-logo {
    min-height: 285px;

    padding: 45px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.bathtub-brand-logo img {
    width: 58%;
    max-width: 330px;
    max-height: 145px;

    object-fit: contain;
}


.bathtub-brand-card-bottom {
    min-height: 105px;

    padding: 26px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==================================================
   BATHTUB PRODUCT CARDS
================================================== */

.bathtub-product-card {
    background: var(--beige-soft);

    border:
        1px solid rgba(55, 64, 50, 0.10);

    overflow: hidden;
}


.bathtub-product-image {
    height: 370px;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f3ec;
}


.bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}


.bathtub-product-card:hover
.bathtub-product-image img {
    transform: scale(1.035);
}


/* PRODUCT INFORMATION */

.bathtub-product-information {
    padding: 32px;
}


.bathtub-product-brand {
    display: block;

    margin-bottom: 12px;

    color: var(--deep-red);

    font-size: 8px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.bathtub-product-information h4 {
    margin: 0 0 17px;

    color: var(--olive-deep);

    font-size: 29px;
    font-weight: 400;
    line-height: 1.15;
}


.bathtub-product-description {
    margin: 0 0 28px;

    color: var(--text-muted);

    font-size: 12px;
    line-height: 1.75;
}


/* SPECIFICATIONS */

.bathtub-product-specs {
    display: grid;

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

    margin-bottom: 26px;

    border-top:
        1px solid rgba(55,64,50,0.12);
}


.bathtub-product-specs div {
    padding: 16px 0;

    border-bottom:
        1px solid rgba(55,64,50,0.12);
}


.bathtub-product-specs div:nth-child(odd) {
    padding-right: 15px;
}


.bathtub-product-specs div:nth-child(even) {
    padding-left: 15px;

    border-left:
        1px solid rgba(55,64,50,0.12);
}


.bathtub-product-specs span {
    display: block;

    margin-bottom: 5px;

    color: var(--deep-red);

    font-size: 7px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.bathtub-product-specs strong {
    color: var(--olive-deep);

    font-size: 11px;
    font-weight: 500;
}


/* PRODUCT CODE */

.bathtub-product-code {
    margin-bottom: 25px;
}


.bathtub-product-code span {
    display: block;

    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: 7px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.bathtub-product-code strong {
    color: var(--olive-deep);

    font-size: 12px;
    font-weight: 500;
}


/* DETAILS LINK */

.bathtub-product-link {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    padding-bottom: 6px;

    color: var(--deep-red);

    border-bottom:
        1px solid rgba(118,40,47,0.45);

    text-decoration: none;

    font-size: 8px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* ==================================================
   FINAL BATHTUB CARD FIXES
   BRAND CARDS + PRODUCT ACTIONS
================================================== */


/* ==================================================
   BRAND CARDS — DESKTOP
================================================== */

.bathtub-brand-grid {
    max-width: 900px;
    gap: 24px;
}


.bathtub-brand-card {
    min-height: 330px;
}


.bathtub-brand-logo {
    min-height: 235px;
    height: 235px;

    padding: 32px 38px;
}


.bathtub-brand-logo img {
    width: 62%;

    max-width: 300px;
    max-height: 125px;

    object-fit: contain;
}


.bathtub-brand-card-bottom {
    min-height: 95px;

    padding: 22px 27px;
}


.bathtub-brand-card-bottom div {
    gap: 13px;
}


.bathtub-brand-card-bottom h3 {
    font-size: 20px;
}


.bathtub-brand-card-bottom span {
    font-size: 7px;
    letter-spacing: 1.8px;
}


/* ==================================================
   PRODUCT ACTION AREA
================================================== */

.bathtub-product-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 5px;
}


/* WHATSAPP / ENQUIRE BUTTON */

.bathtub-product-enquire {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 48px;

    padding: 13px 18px;

    background: var(--deep-red);

    border: 1px solid var(--deep-red);

    color: #ffffff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 1.3px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.bathtub-product-enquire strong {
    flex-shrink: 0;

    font-size: 15px;
    font-weight: 400;
}


.bathtub-product-enquire:hover {
    background: var(--olive-deep);

    border-color: var(--olive-deep);

    transform: translateY(-2px);
}


/* CALL BUTTON */

.bathtub-product-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 18px;

    border: 1px solid rgba(61, 69, 55, 0.35);

    color: var(--olive-deep);

    background: transparent;

    text-decoration: none;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.3px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.bathtub-product-call:hover {
    background: var(--olive-deep);

    border-color: var(--olive-deep);

    color: #ffffff;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    /* BRAND GRID */

    .bathtub-brand-grid {
        width: 100%;

        max-width: 340px;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .bathtub-brand-card {
        width: 100%;

        min-height: 0;
    }


    .bathtub-brand-logo {
        height: 165px;
        min-height: 165px;

        padding: 22px;
    }


    .bathtub-brand-logo img {
        width: 66%;

        max-width: 205px;
        max-height: 90px;
    }


    .bathtub-brand-card-bottom {
        min-height: 72px;

        padding: 16px 18px;
    }


    .bathtub-brand-card-bottom div {
        gap: 8px;

        align-items: center;
    }


    .bathtub-brand-card-bottom span {
        font-size: 6px;
        letter-spacing: 1.3px;
    }


    .bathtub-brand-card-bottom h3 {
        font-size: 16px;
        line-height: 1.2;
    }


    .bathtub-brand-card-bottom strong {
        font-size: 15px;
    }



    /* PRODUCT CARD */

    .bathtub-product-information {
        padding: 22px 20px 24px;
    }


    .bathtub-product-information h4 {
        font-size: 24px;
    }


    .bathtub-product-description {
        font-size: 10px;
        line-height: 1.7;

        margin-bottom: 22px;
    }


    .bathtub-product-specs {
        margin-bottom: 20px;
    }


    .bathtub-product-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;

        width: 100%;
    }


    .bathtub-product-enquire,
    .bathtub-product-call {
        width: 100%;

        min-height: 45px;

        padding: 12px 14px;

        justify-content: center;

        text-align: center;

        font-size: 7px;

        letter-spacing: 1.1px;
    }


    .bathtub-product-enquire {
        justify-content: space-between;
    }

}

#vitra-freestanding-products {
    display: grid;

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

    gap: 28px;

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;
}

@media (max-width: 650px) {

    #vitra-freestanding-products {
        grid-template-columns: 1fr;
    }

}

/* ==================================================
   VITRA PRODUCT GRID — RESPONSIVE
================================================== */

#vitra-freestanding-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* TABLET */

@media (max-width: 900px) {

    #vitra-freestanding-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 650px) {

    #vitra-freestanding-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    #vitra-freestanding-products
    .bathtub-product-image {
        height: 190px;

        padding: 12px;
    }


    #vitra-freestanding-products
    .bathtub-product-information {
        padding: 16px 12px 18px;
    }


    #vitra-freestanding-products
    .bathtub-product-brand {
        font-size: 6px;
        letter-spacing: 1.4px;
    }


    #vitra-freestanding-products
    .bathtub-product-information h4 {
        font-size: 18px;
        line-height: 1.1;

        margin-bottom: 10px;
    }


    #vitra-freestanding-products
    .bathtub-product-description {
        font-size: 8px;
        line-height: 1.55;

        margin-bottom: 15px;
    }


    #vitra-freestanding-products
    .bathtub-product-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 7px;
    }


    #vitra-freestanding-products
    .bathtub-product-enquire,
    #vitra-freestanding-products
    .bathtub-product-call {
        width: 100%;

        min-height: 38px;

        padding: 9px 8px;

        font-size: 6px;
        letter-spacing: 0.8px;

        text-align: center;
    }

}

/* ==================================================
   PRODUCT GRID — AUTO ADJUST + ALIGNED CARDS
================================================== */

#vitra-freestanding-products {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 26px;

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;
}


/* KEEP CARD HEIGHTS EQUAL */

#vitra-freestanding-products
.bathtub-product-card {
    display: flex;

    flex-direction: column;

    height: 100%;
}


/* KEEP IMAGE AREA SAME HEIGHT */

#vitra-freestanding-products
.bathtub-product-image {
    height: 360px;

    flex-shrink: 0;
}


/* MAKE TEXT AREA FILL REMAINING HEIGHT */

#vitra-freestanding-products
.bathtub-product-information {
    display: flex;

    flex-direction: column;

    flex: 1;
}


/* SAME DESCRIPTION SPACE */

/* #vitra-freestanding-products
.bathtub-product-description {
    min-height: 105px;
} */


/* PUSH BUTTONS TO BOTTOM */

#vitra-freestanding-products
.bathtub-product-actions {
    margin-top: auto;

    padding-top: 22px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    #vitra-freestanding-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    #vitra-freestanding-products
    .bathtub-product-image {
        height: 185px;
    }


    #vitra-freestanding-products
    .bathtub-product-description {
        min-height: 95px;
    }

}

#vitra-freestanding-products
.bathtub-product-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 10px;

    margin-top: auto;
    padding-top: 22px;
}

#vitra-freestanding-products
.bathtub-product-enquire,
#vitra-freestanding-products
.bathtub-product-call {
    width: 100%;

    justify-content: center;

    text-align: center;
}

#vitra-freestanding-products
.bathtub-product-enquire {
    justify-content: space-between;
}





.bathtub-product-image {
    width: 100%;
    height: 360px;

    padding: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f3ec;

    overflow: hidden;
}


.bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;
}

#vitra-freestanding-products
.bathtub-product-card:nth-child(3)
.bathtub-product-image img {
    transform: scale(1.12);
}

#vitra-freestanding-products {
    max-width: 1180px;
    gap: 24px;
}

#vitra-freestanding-products .bathtub-product-image {
    height: 330px;
    padding: 24px;
}

#vitra-freestanding-products .bathtub-product-card {
    min-width: 0;
}

#vitra-freestanding-products .bathtub-product-information {
    padding: 28px 26px 30px;
}




@media (max-width: 650px) {

    #vitra-freestanding-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    #vitra-freestanding-products .bathtub-product-card {
        height: auto;
        min-height: 0;
    }

    #vitra-freestanding-products .bathtub-product-image {
        height: 155px;
        min-height: 0;
        padding: 10px;
    }

    #vitra-freestanding-products .bathtub-product-information {
        padding: 14px 11px 15px;
    }

    #vitra-freestanding-products .bathtub-product-description {
        min-height: 0;
        margin-bottom: 12px;
    }

    #vitra-freestanding-products .bathtub-product-actions {
        margin-top: 12px;
        padding-top: 0;
        gap: 7px;
    }

    #vitra-freestanding-products .bathtub-product-enquire,
    #vitra-freestanding-products .bathtub-product-call {
        min-height: 34px;
        padding: 8px 7px;
        font-size: 5.8px;
        line-height: 1.3;
    }

}


/* ==================================================
   FINAL MOBILE PRODUCT CARD FIX
================================================== */

@media (max-width: 650px) {

    /* GRID */

    #vitra-freestanding-products {
        display: grid;

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

        gap: 12px;

        width: 100%;
        max-width: 100%;

        align-items: stretch;
    }


    /* CARD */

    #vitra-freestanding-products
    .bathtub-product-card {
        display: flex;

        flex-direction: column;

        width: 100%;
        height: 100%;

        min-height: 0;
    }


    /* IMAGE AREA — SAME FOR EVERY CARD */

    #vitra-freestanding-products
    .bathtub-product-image {
        width: 100%;

        height: 150px;
        min-height: 150px;

        padding: 10px;

        flex-shrink: 0;
    }


    #vitra-freestanding-products
    .bathtub-product-image img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }


    /* REMOVE SPECIAL PRODUCT 3 SCALING ON MOBILE */

    #vitra-freestanding-products
    .bathtub-product-card:nth-child(3)
    .bathtub-product-image img {
        transform: none;
    }


    /* TEXT AREA */

    #vitra-freestanding-products
    .bathtub-product-information {
        display: flex;

        flex-direction: column;

        flex: 1;

        padding: 13px 10px 12px;
    }


    #vitra-freestanding-products
    .bathtub-product-brand {
        margin-bottom: 6px;

        font-size: 5.5px;
        letter-spacing: 1.2px;
    }


    #vitra-freestanding-products
    .bathtub-product-information h4 {
        min-height: 39px;

        margin: 0 0 9px;

        font-size: 15px;
        line-height: 1.15;
    }


    #vitra-freestanding-products
    .bathtub-product-description {
        min-height: 78px;

        margin: 0;

        font-size: 7px;
        line-height: 1.55;
    }


    /* BUTTON AREA — ALWAYS AT BOTTOM */

    #vitra-freestanding-products
    .bathtub-product-actions {
        display: flex;

        flex-direction: column;

        gap: 6px;

        width: 100%;

        margin-top: auto;

        padding-top: 12px;
    }


    #vitra-freestanding-products
    .bathtub-product-enquire,
    #vitra-freestanding-products
    .bathtub-product-call {
        width: 100%;

        min-height: 33px;

        padding: 7px 7px;

        justify-content: center;

        font-size: 5.4px;
        line-height: 1.25;

        letter-spacing: 0.55px;

        text-align: center;
    }


    #vitra-freestanding-products
    .bathtub-product-enquire {
        justify-content: space-between;
    }

}


/* ==================================================
   UNIVERSAL BATHTUB PRODUCT CARD SYSTEM
   Use for ALL bathtub categories
================================================== */


/* PRODUCT GRID — DESKTOP */

.vitra-product-category .bathtub-product-grid {
    display: grid;

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

    gap: 24px;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    align-items: stretch;
}


/* PRODUCT CARD */

.vitra-product-category .bathtub-product-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;

    background: var(--beige-soft);

    border:
        1px solid rgba(55, 64, 50, 0.10);

    overflow: hidden;
}


/* SAME IMAGE AREA FOR EVERY PRODUCT */

.vitra-product-category .bathtub-product-image {
    width: 100%;
    height: 330px;

    min-height: 330px;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #f7f3ec;

    overflow: hidden;
}


.vitra-product-category .bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transform: none;
}


/* PRODUCT INFORMATION */

.vitra-product-category .bathtub-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 28px 26px 30px;
}


.vitra-product-category .bathtub-product-brand {
    display: block;

    margin-bottom: 12px;

    color: var(--deep-red);

    font-size: 8px;
    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.vitra-product-category .bathtub-product-information h4 {
    min-height: 68px;

    margin: 0 0 16px;

    color: var(--olive-deep);

    font-size: 27px;
    font-weight: 400;
    line-height: 1.15;
}


/* SAME DESCRIPTION AREA */

.vitra-product-category .bathtub-product-description {
    min-height: 105px;

    margin: 0;

    color: var(--text-muted);

    font-size: 12px;
    line-height: 1.7;
}


/* BUTTONS ALWAYS AT BOTTOM */

.vitra-product-category .bathtub-product-actions {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    width: 100%;

    margin-top: auto;

    padding-top: 24px;
}


/* ENQUIRE BUTTON */

.vitra-product-category .bathtub-product-enquire {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 48px;

    padding: 13px 18px;

    background: var(--deep-red);

    border: 1px solid var(--deep-red);

    color: #ffffff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* CALL BUTTON */

.vitra-product-category .bathtub-product-call {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 48px;

    padding: 13px 18px;

    background: transparent;

    border:
        1px solid rgba(61, 69, 55, 0.30);

    color: var(--olive-deep);

    text-decoration: none;

    text-align: center;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .vitra-product-category .bathtub-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==================================================
   MOBILE — KEEP 2 COLUMNS
================================================== */

@media (max-width: 650px) {

    .vitra-product-category .bathtub-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;

        align-items: stretch;
    }


    .vitra-product-category .bathtub-product-card {
        height: 100%;
        min-height: 0;
    }


    /* SAME IMAGE HEIGHT */

    .vitra-product-category .bathtub-product-image {
        height: 150px;
        min-height: 150px;

        padding: 10px;
    }


    .vitra-product-category .bathtub-product-image img {
        width: 100%;
        height: 100%;

        object-fit: contain;

        transform: none;
    }


    /* TEXT */

    .vitra-product-category .bathtub-product-information {
        padding: 13px 10px 12px;
    }


    .vitra-product-category .bathtub-product-brand {
        margin-bottom: 6px;

        font-size: 5.5px;
        letter-spacing: 1.2px;
    }


    .vitra-product-category
    .bathtub-product-information h4 {
        min-height: 39px;

        margin-bottom: 9px;

        font-size: 15px;
        line-height: 1.15;
    }


    .vitra-product-category
    .bathtub-product-description {
        min-height: 78px;

        font-size: 7px;
        line-height: 1.55;
    }


    /* KEEP BUTTONS ALIGNED */

    .vitra-product-category
    .bathtub-product-actions {
        gap: 6px;

        margin-top: auto;

        padding-top: 12px;
    }


    .vitra-product-category
    .bathtub-product-enquire,
    .vitra-product-category
    .bathtub-product-call {
        width: 100%;

        min-height: 33px;

        padding: 7px;

        font-size: 5.4px;
        line-height: 1.25;

        letter-spacing: 0.55px;
    }


    .vitra-product-category
    .bathtub-product-enquire {
        justify-content: space-between;
    }

}



/* ==================================================
   VITRA — UNIFIED BATHTUB COLLECTION
================================================== */

.vitra-all-products {
    padding: 105px 9% 130px;

    background: var(--beige);
}


/* HEADING */

.vitra-all-products-heading {
    max-width: 760px;

    margin-bottom: 55px;
}


.vitra-all-products-heading > span {
    display: block;

    margin-bottom: 12px;

    color: var(--deep-red);

    font-size: 9px;
    letter-spacing: 3px;

    text-transform: uppercase;
}


.vitra-all-products-heading h3 {
    margin: 0;

    color: var(--olive-deep);

    font-size: clamp(46px, 5vw, 66px);
    font-weight: 400;
    line-height: 1;
}


.vitra-all-products-heading h3 em {
    color: var(--deep-red);

    font-weight: 400;
}


.vitra-all-products-heading p {
    max-width: 600px;

    margin-top: 22px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}


/* ==================================================
   PRODUCT GRID
================================================== */

#vitra-bathtub-products {
    display: grid;

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

    gap: 24px;

    width: 100%;
}


/* CARD */

#vitra-bathtub-products .bathtub-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    background: var(--beige-soft);

    border:
        1px solid rgba(55, 64, 50, 0.10);

    overflow: hidden;
}


/* SAME IMAGE SIZE */

#vitra-bathtub-products .bathtub-product-image {
    width: 100%;
    height: 320px;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f3ec;
}


#vitra-bathtub-products .bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transform: none;
}


/* PRODUCT INFORMATION */

#vitra-bathtub-products .bathtub-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 27px 25px 28px;
}


#vitra-bathtub-products .bathtub-product-information h4 {
    min-height: 65px;

    margin-bottom: 15px;
}


/* SAME DESCRIPTION HEIGHT */

#vitra-bathtub-products .bathtub-product-description {
    min-height: 103px;

    margin: 0;
}


/* BUTTONS ALWAYS ALIGN */

#vitra-bathtub-products .bathtub-product-actions {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: auto;

    padding-top: 22px;
}


#vitra-bathtub-products .bathtub-product-enquire,
#vitra-bathtub-products .bathtub-product-call {
    width: 100%;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    #vitra-bathtub-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==================================================
   MOBILE — TWO COLUMNS
================================================== */

@media (max-width: 650px) {

    .vitra-all-products {
        padding:
            70px 22px
            85px;
    }


    .vitra-all-products-heading {
        margin-bottom: 36px;
    }


    .vitra-all-products-heading h3 {
        font-size: 40px;
    }


    .vitra-all-products-heading p {
        font-size: 10px;
    }


    #vitra-bathtub-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    #vitra-bathtub-products .bathtub-product-image {
        height: 145px;

        padding: 9px;
    }


    #vitra-bathtub-products .bathtub-product-information {
        padding: 13px 10px 12px;
    }


    #vitra-bathtub-products .bathtub-product-brand {
        margin-bottom: 6px;

        font-size: 5.5px;
    }


    #vitra-bathtub-products
    .bathtub-product-information h4 {
        min-height: 39px;

        margin-bottom: 8px;

        font-size: 15px;
        line-height: 1.15;
    }


    #vitra-bathtub-products
    .bathtub-product-description {
        min-height: 78px;

        font-size: 7px;
        line-height: 1.5;
    }


    #vitra-bathtub-products
    .bathtub-product-actions {
        gap: 6px;

        padding-top: 11px;
    }


    #vitra-bathtub-products
    .bathtub-product-enquire,
    #vitra-bathtub-products
    .bathtub-product-call {
        min-height: 32px;

        padding: 7px 6px;

        font-size: 5.2px;
        line-height: 1.2;

        letter-spacing: 0.5px;
    }

}


/* ==================================================
   FINAL UNIFIED VITRA BATHTUB GRID
================================================== */

#vitra-bathtub-products {
    display: grid;

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

    gap: 24px;

    width: 100%;

    align-items: stretch;
}


/* TABLET */

@media (max-width: 900px) {

    #vitra-bathtub-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 650px) {

    #vitra-bathtub-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

}

.bathtub-brand-feature-vb {
    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(0, 1.1fr);
}


/* ==================================================
   SAME PRODUCT CARD BUTTONS FOR VITRA + V&B
================================================== */

#vitra-bathtub-products .bathtub-product-actions,
#vb-bathtub-products .bathtub-product-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 10px;

    width: 100%;

    margin-top: auto;
    padding-top: 22px;
}


#vitra-bathtub-products .bathtub-product-enquire,
#vitra-bathtub-products .bathtub-product-call,
#vb-bathtub-products .bathtub-product-enquire,
#vb-bathtub-products .bathtub-product-call {
    width: 100%;
}


#vitra-bathtub-products .bathtub-product-enquire,
#vb-bathtub-products .bathtub-product-enquire {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 48px;

    padding: 13px 18px;

    background: var(--deep-red);

    border: 1px solid var(--deep-red);

    color: #ffffff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}


#vitra-bathtub-products .bathtub-product-call,
#vb-bathtub-products .bathtub-product-call {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 13px 18px;

    background: transparent;

    border: 1px solid rgba(61, 69, 55, 0.30);

    color: var(--olive-deep);

    text-decoration: none;

    text-align: center;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}


@media (max-width: 650px) {

    #vitra-bathtub-products .bathtub-product-actions,
    #vb-bathtub-products .bathtub-product-actions {
        gap: 6px;

        padding-top: 12px;
    }


    #vitra-bathtub-products .bathtub-product-enquire,
    #vitra-bathtub-products .bathtub-product-call,
    #vb-bathtub-products .bathtub-product-enquire,
    #vb-bathtub-products .bathtub-product-call {
        min-height: 33px;

        padding: 7px;

        font-size: 5.4px;
        line-height: 1.25;

        letter-spacing: 0.55px;
    }

}

.bathtub-product-colours {
    margin-top: 18px;
    margin-bottom: 16px;
}

.bathtub-product-colours-label {
    display: block;
    margin-bottom: 10px;

    color: var(--deep-red);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bathtub-product-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.colour-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(60, 60, 60, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.colour-dot:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* Shades */
.colour-dot.grey {
    background: #9a9a95;
}

.colour-dot.morning-green {
    background: #8f988a;
}

.colour-dot.white-alpine {
    background: #f8f8f4;
    border: 1px solid rgba(80, 80, 80, 0.22);
}

.colour-dot.stone-white {
    background: #ece7de;
    border: 1px solid rgba(80, 80, 80, 0.18);
}

.colour-dot.almond {
    background: #d8c2a6;
}

.colour-dot.pure-black {
    background: #1f1f1f;
}


@media (max-width: 650px) {
    .bathtub-product-colours {
        margin-top: 10px;
        margin-bottom: 12px;
    }

    .bathtub-product-colours-label {
        font-size: 5px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .bathtub-product-swatches {
        gap: 8px;
    }

    .colour-dot {
        width: 14px;
        height: 14px;
    }
}

/* KEEP PRODUCT BUTTONS ALIGNED */

.bathtub-product-information {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bathtub-product-description {
    margin-bottom: 0;
}

.bathtub-product-colours {
    margin-top: 16px;
    margin-bottom: 0;
}

.bathtub-product-actions {
    margin-top: auto;
    padding-top: 22px;
}

@media (max-width: 650px) {

    .bathtub-product-colours {
        margin-top: 10px;
        margin-bottom: 0;
    }

    .bathtub-product-actions {
        margin-top: auto;
        padding-top: 12px;
    }

}


/* ==================================================
   V&B PRODUCT CARDS — FINAL ALIGNMENT
================================================== */

#vb-bathtub-products {
    align-items: stretch;
}


#vb-bathtub-products .bathtub-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;
}


#vb-bathtub-products .bathtub-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;
}


#vb-bathtub-products .bathtub-product-description {
    margin-bottom: 0;
}


/* COLOUR AREA */

#vb-bathtub-products .bathtub-product-colours {
    margin-top: 14px;
    margin-bottom: 0;

    min-height: 50px;
}


/* BUTTONS ALWAYS AT SAME BOTTOM POSITION */

#vb-bathtub-products .bathtub-product-actions {
    display: flex;
    flex-direction: column;

    gap: 9px;

    width: 100%;

    margin-top: auto;
    padding-top: 18px;
}


#vb-bathtub-products .bathtub-product-enquire,
#vb-bathtub-products .bathtub-product-call {
    width: 100%;
}


@media (max-width: 650px) {

    #vb-bathtub-products .bathtub-product-colours {
        min-height: 37px;

        margin-top: 9px;
    }


    #vb-bathtub-products .bathtub-product-actions {
        margin-top: auto;

        padding-top: 10px;

        gap: 6px;
    }

}

.bathtub-product-colours-empty {
    visibility: hidden;
}

/* ==================================================
   ALIGN COLOUR SWATCH AREA ON ALL PRODUCT CARDS
================================================== */

#vb-bathtub-products .bathtub-product-information {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#vb-bathtub-products .bathtub-product-description {
    min-height: 100px;
    margin-bottom: 0;
}

#vb-bathtub-products .bathtub-product-colours {
    min-height: 62px;

    margin-top: 16px;
    margin-bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#vb-bathtub-products .bathtub-product-actions {
    margin-top: auto;
    padding-top: 18px;
}


@media (max-width: 650px) {

    #vb-bathtub-products .bathtub-product-description {
        min-height: 78px;
    }

    #vb-bathtub-products .bathtub-product-colours {
        min-height: 48px;

        margin-top: 10px;
    }

    #vb-bathtub-products .bathtub-product-actions {
        margin-top: auto;
        padding-top: 10px;
    }

}

/* ==================================================
   V&B PRODUCT CARDS — PERFECT ROW ALIGNMENT
================================================== */

#vb-bathtub-products {
    align-items: stretch;
}


/* SAME CARD STRUCTURE */

#vb-bathtub-products .bathtub-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;
}


#vb-bathtub-products .bathtub-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;
}


/* SAME TITLE AREA */

#vb-bathtub-products .bathtub-product-information h4 {
    min-height: 58px;
}


/* SAME DESCRIPTION AREA */

#vb-bathtub-products .bathtub-product-description {
    min-height: 112px;

    margin-bottom: 0;
}


/* SAME COLOUR AREA ON EVERY CARD */

#vb-bathtub-products .bathtub-product-colours {
    min-height: 62px;

    margin-top: 14px;
    margin-bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* INVISIBLE PLACEHOLDER STILL USES SAME SPACE */

#vb-bathtub-products .bathtub-product-colours-empty {
    visibility: hidden;
}


/* BUTTONS ALWAYS AT SAME HEIGHT */

#vb-bathtub-products .bathtub-product-actions {
    margin-top: auto;

    padding-top: 18px;
}


@media (max-width: 650px) {

    #vb-bathtub-products
    .bathtub-product-information h4 {
        min-height: 38px;
    }


    #vb-bathtub-products
    .bathtub-product-description {
        min-height: 82px;
    }


    #vb-bathtub-products
    .bathtub-product-colours {
        min-height: 43px;

        margin-top: 9px;
    }


    #vb-bathtub-products
    .bathtub-product-actions {
        margin-top: auto;

        padding-top: 10px;
    }

}


/* ==================================================
   V&B PRODUCT CARDS — STRICT ALIGNMENT
================================================== */
#vb-bathtub-products .bathtub-product-information {
    display: grid;

    

    height: 100%;

    padding: 28px 26px 30px;
}

/* BRAND */

#vb-bathtub-products .bathtub-product-brand {
    align-self: start;
}


/* TITLE */
#vb-bathtub-products .bathtub-product-information h4 {
    margin: 0;

    min-height: 0;

    display: block;

    overflow: visible;

    line-height: 1.15;
}
/* DESCRIPTION */

#vb-bathtub-products .bathtub-product-description {
    min-height: 0;

    margin: 0;

    overflow: visible;

    line-height: 1.65;
}


/* COLOURS */

#vb-bathtub-products .bathtub-product-colours {
    min-height: 0;

    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding-top: 14px;
}


/* INVISIBLE PLACEHOLDER */

#vb-bathtub-products .bathtub-product-colours-empty {
    visibility: hidden;
}


/* BUTTONS */

#vb-bathtub-products .bathtub-product-actions {
    align-self: end;

    width: 100%;

    margin: 0;

    padding-top: 18px;
}

@media (max-width: 650px) {

    #vb-bathtub-products .bathtub-product-information {
        grid-template-rows:
            auto
            55px
            120px
            48px
            auto;

        padding: 13px 10px 12px;
    }

}


/* ==================================================
   UNIVERSAL LUXURY PRODUCT CARD
================================================== */

.bathtub-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    background: #fbf8f2;

    border: 1px solid rgba(61, 69, 55, 0.10);

    overflow: hidden;
}


/* PRODUCT IMAGE */

.bathtub-product-image {
    width: 100%;
    height: 320px;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f0e8;
}


.bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


/* ==================================================
   COLOURED INFORMATION SECTION
================================================== */

.bathtub-product-information {
    display: flex !important;
    flex-direction: column;

    flex: 1;

    padding: 25px 23px 26px;

    background: #eee5d9;
}


/* BRAND */

.bathtub-product-brand {
    display: block;

    margin-bottom: 10px;

    color: var(--deep-red);

    font-size: 7px;
    font-weight: 500;

    letter-spacing: 1.8px;
    text-transform: uppercase;
}


/* PRODUCT TITLE */

.bathtub-product-information h4 {
    min-height: 58px;

    margin: 0 0 15px;

    color: var(--olive-deep);

    font-size: 25px;
    font-weight: 400;
    line-height: 1.15;
}


/* ==================================================
   DESCRIPTION PANEL
================================================== */

.bathtub-product-description {
    min-height: 118px;

    margin: 0;

    padding: 14px 15px;

    background: rgba(61, 69, 55, 0.055);

    border-left: 2px solid var(--deep-red);

    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.7;
}


/* ==================================================
   COLOURS
================================================== */

.bathtub-product-colours {
    min-height: 65px;

    margin: 0;

    padding-top: 15px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


.bathtub-product-colours-empty {
    visibility: hidden;
}


/* ==================================================
   BUTTONS
================================================== */

.bathtub-product-actions {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;

    margin-top: auto;

    padding-top: 15px;
}



@media (max-width: 650px) {

    .bathtub-product-image {
        height: 145px;

        padding: 9px;
    }


    .bathtub-product-information {
        padding: 12px 9px 11px;
    }


    .bathtub-product-brand {
        margin-bottom: 6px;

        font-size: 5px;
        letter-spacing: 1px;
    }


    .bathtub-product-information h4 {
        min-height: 40px;

        margin-bottom: 8px;

        font-size: 14px;
        line-height: 1.15;
    }


    .bathtub-product-description {
        min-height: 88px;

        padding: 8px 8px;

        border-left-width: 1px;

        font-size: 6.4px;
        line-height: 1.55;
    }


    .bathtub-product-colours {
        min-height: 43px;

        padding-top: 8px;
    }


    .bathtub-product-actions {
        gap: 6px;

        margin-top: auto;

        padding-top: 9px;
    }

}


/* ==================================================
   V&B PRODUCT CARDS — FINAL PERFECT ALIGNMENT
================================================== */

/* GRID */
#vb-bathtub-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    align-items: stretch;
}


/* EVERY CARD SAME HEIGHT */
#vb-bathtub-products .bathtub-product-card {
    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;
}


/* SAME IMAGE AREA */
#vb-bathtub-products .bathtub-product-image {
    height: 320px !important;
    min-height: 320px !important;

    padding: 24px !important;

    display: flex;
    align-items: center;
    justify-content: center;
}


#vb-bathtub-products .bathtub-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


/* SAME INFORMATION AREA */
#vb-bathtub-products .bathtub-product-information {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 !important;

    padding: 25px 23px 26px !important;

    background: #eee5d9;
}


/* BRAND */
#vb-bathtub-products .bathtub-product-brand {
    min-height: 17px;

    margin-bottom: 9px !important;
}


/* PRODUCT NAME — SAME SPACE */
#vb-bathtub-products .bathtub-product-information h4 {
    min-height: 72px !important;

    margin: 0 0 14px !important;

    display: block !important;

    overflow: visible !important;

    line-height: 1.15 !important;
}


/* DESCRIPTION PANEL — SAME SIZE */
#vb-bathtub-products .bathtub-product-description {
    min-height: 128px !important;

    margin: 0 !important;

    padding: 14px 15px !important;

    display: block;

    background: rgba(61, 69, 55, 0.055);

    border-left: 2px solid var(--deep-red);

    overflow: visible !important;
}


/* COLOUR AREA — SAME POSITION */
#vb-bathtub-products .bathtub-product-colours {
    min-height: 68px !important;

    margin: 0 !important;

    padding-top: 14px !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start;
}


/* EMPTY COLOUR PLACEHOLDER */
#vb-bathtub-products .bathtub-product-colours-empty {
    visibility: hidden !important;
}


/* BUTTON AREA ALWAYS STARTS AT SAME HEIGHT */
#vb-bathtub-products .bathtub-product-actions {
    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: auto !important;

    padding-top: 14px !important;
}


/* SAME BUTTON HEIGHTS */
#vb-bathtub-products .bathtub-product-enquire,
#vb-bathtub-products .bathtub-product-call {
    width: 100% !important;
    min-height: 48px !important;
}


@media (max-width: 650px) {

    #vb-bathtub-products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    #vb-bathtub-products .bathtub-product-image {
        height: 145px !important;
        min-height: 145px !important;

        padding: 9px !important;
    }


    #vb-bathtub-products .bathtub-product-information {
        padding: 12px 9px 11px !important;
    }


    #vb-bathtub-products .bathtub-product-information h4 {
        min-height: 48px !important;

        margin-bottom: 8px !important;

        font-size: 14px !important;
    }


    #vb-bathtub-products .bathtub-product-description {
        min-height: 100px !important;

        padding: 8px !important;

        font-size: 6.4px !important;
        line-height: 1.55 !important;
    }


    #vb-bathtub-products .bathtub-product-colours {
        min-height: 47px !important;

        padding-top: 8px !important;
    }


    #vb-bathtub-products .bathtub-product-actions {
        padding-top: 9px !important;

        gap: 6px !important;
    }


    #vb-bathtub-products .bathtub-product-enquire,
    #vb-bathtub-products .bathtub-product-call {
        min-height: 33px !important;
    }

}



/* =========================================
   LUXURY CARD BORDER STYLE — ALL PRODUCT CARDS
========================================= */

.bathtub-product-card {
    background: #f8f4ee;
    border: 1px solid rgba(95, 80, 63, 0.18);
    border-radius: 4px;
    overflow: hidden;

    box-shadow:
        0 10px 24px rgba(34, 28, 22, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.bathtub-product-card:hover {
    transform: translateY(-3px);

    border-color: rgba(126, 40, 49, 0.28);

    box-shadow:
        0 18px 38px rgba(34, 28, 22, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.72) inset;
}


/* image area */
.bathtub-product-image {
    background: #f5efe7;
    border-bottom: 1px solid rgba(95, 80, 63, 0.10);
}


/* text/info area */
.bathtub-product-information {
    background: #fbf7f1;
}


.bathtub-product-card::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(126, 40, 49, 0.00),
        rgba(126, 40, 49, 0.22),
        rgba(126, 40, 49, 0.00)
    );
}




.bathtub-brand-card,
.brand-card {
    border: 1px solid rgba(95, 80, 63, 0.18);
    border-radius: 4px;
    overflow: hidden;

    box-shadow:
        0 10px 24px rgba(34, 28, 22, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.bathtub-brand-card:hover,
.brand-card:hover {
    transform: translateY(-3px);
    border-color: rgba(126, 40, 49, 0.28);
    box-shadow:
        0 18px 38px rgba(34, 28, 22, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

/* ==================================================
   CONTACT PAGE — FINAL MOBILE FIX
================================================== */

@media (max-width: 850px) {

    .contact-enquiry-section {
        display: flex !important;
        flex-direction: column !important;

        width: 100%;
    }


    .contact-hours,
    .contact-form-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }


    /* FORM FIRST */
    .contact-form-panel {
        order: 1;
    }


    /* OPENING HOURS SECOND */
    .contact-hours {
        order: 2;
    }

}


@media (max-width: 650px) {

    .contact-enquiry-section {
        overflow: visible !important;
    }


    .contact-form-panel,
    .contact-hours {
        padding: 65px 24px !important;
    }


    /* ------------------------------
       HEADINGS
    ------------------------------ */

    .contact-form-panel h2,
    .contact-hours h2 {
        width: 100%;

        margin: 0;

        font-size: clamp(46px, 13vw, 58px) !important;
        line-height: 0.95 !important;

        overflow: visible !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* FORM INTRO */

    .contact-form-panel > p {
        width: 100%;
        max-width: 100%;

        margin: 22px 0 36px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* OPENING HOURS INTRO */

    .contact-hours > p {
        width: 100%;
        max-width: 100%;

        font-size: 14px;
        line-height: 1.75;
    }


    /* ------------------------------
       FORM
    ------------------------------ */

    .contact-form-row {
        display: grid;
        grid-template-columns: 1fr !important;

        width: 100%;

        gap: 0;
    }


    .contact-field {
        width: 100%;
        min-width: 0;
    }


    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        width: 100%;
        max-width: 100%;
    }


    /* ------------------------------
       OPENING HOURS
    ------------------------------ */

    .contact-hours-list {
        width: 100%;

        margin-top: 35px;
    }


    .contact-hours-list > div {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(110px, auto);

        align-items: start;

        gap: 18px !important;

        padding: 16px 0;
    }


    .contact-hours-list span,
    .contact-hours-list strong {
        min-width: 0;

        font-size: 12px;
        line-height: 1.6;
    }


    .contact-hours-list strong {
        text-align: right;

        white-space: normal;
    }


    /* BUTTON */

    .contact-submit-button {
        width: 100%;
    }

}


/* ==================================================
   KITCHENS PAGE
================================================== */


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

.kitchens-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}


.kitchens-hero-image {
    position: absolute;
    inset: 0;
}


.kitchens-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.kitchens-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(28, 31, 25, .82) 0%,
            rgba(28, 31, 25, .50) 42%,
            rgba(28, 31, 25, .08) 78%
        );
}


.kitchens-hero-content {
    position: relative;
    z-index: 2;

    width: min(720px, 86%);
    margin-left: 7%;
    padding-bottom: 90px;

    color: #ffffff;
}


.kitchens-hero-content > span {
    display: block;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;

    opacity: .82;
}


.kitchens-hero-content h1 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 6.8vw, 108px);
    font-weight: 500;
    line-height: .85;

    max-width: 820px;
}


.kitchens-hero-content h1 em {
    display: block;

    margin-top: 8px;

    color: var(--beige);

    font-weight: 400;
}


.kitchens-hero-content p {
    max-width: 570px;

    margin: 30px 0 34px;

    font-size: 14px;
    line-height: 1.9;

    color: rgba(255, 255, 255, .82);
}


.kitchens-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255,255,255,.7);

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
}


.kitchens-hero-link strong {
    font-size: 15px;
}



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

.kitchens-introduction {
    padding: 120px 7%;

    background: var(--beige-soft);
}


.kitchens-introduction-inner {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}


.kitchens-eyebrow {
    display: block;

    margin-bottom: 24px;

    color: var(--deep-red);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}


.kitchens-introduction h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(48px, 5vw, 78px);
    font-weight: 500;
    line-height: .95;

    color: var(--olive-darkest);
}


.kitchens-introduction h2 em {
    display: block;

    color: var(--olive);

    font-weight: 400;
}


.kitchens-introduction p {
    max-width: 670px;

    margin: 32px auto 0;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.9;
}



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

.kitchens-brand-introduction {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(100px, .35fr)
        minmax(0, 1.2fr)
        minmax(180px, .55fr);

    align-items: center;
    gap: 50px;

    padding: 100px 7%;

    background: var(--olive-darkest);
    color: #ffffff;

    overflow: hidden;
}


.kitchens-brand-number {
    align-self: start;

    font-family: "Cormorant Garamond", serif;
    font-size: 96px;
    font-weight: 400;
    line-height: .8;

    color: rgba(255,255,255,.08);
}


.kitchens-brand-content {
    max-width: 680px;
}


.kitchens-brand-content > span {
    display: block;

    margin-bottom: 20px;

    color: var(--beige-deep);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}


.kitchens-brand-content h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(55px, 5.5vw, 88px);
    font-weight: 500;
    line-height: .9;
}


.kitchens-brand-content h2 em {
    display: block;

    color: var(--beige-deep);

    font-weight: 400;
}


.kitchens-brand-content p {
    max-width: 560px;

    margin: 28px 0 32px;

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

    font-size: 14px;
    line-height: 1.9;
}


.kitchens-brand-content a {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(255,255,255,.4);

    color: #ffffff;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
    text-decoration: none;
    text-transform: uppercase;
}


.kitchens-brand-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding-left: 35px;

    border-left: 1px solid rgba(255,255,255,.15);
}


.kitchens-brand-mark span {
    font-family: Arial, sans-serif;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -.03em;
}


.kitchens-brand-mark small {
    margin-top: 8px;

    color: var(--beige-deep);

    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
}



/* ==================================================
   MODELS AREA
================================================== */

.kitchen-models {
    background: var(--beige-soft);
}


.kitchen-models-heading {
    padding: 110px 7% 80px;

    text-align: center;
}


.kitchen-models-heading > span {
    display: block;

    margin-bottom: 18px;

    color: var(--deep-red);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}


.kitchen-models-heading h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(50px, 5vw, 78px);
    font-weight: 500;
    line-height: .95;

    color: var(--olive-darkest);
}


.kitchen-models-heading h2 em {
    display: block;

    color: var(--olive);

    font-weight: 400;
}



/* ==================================================
   INDIVIDUAL MODEL
================================================== */
.kitchen-model {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, .85fr);

    min-height: 0;
}


.kitchen-model-reverse .kitchen-model-image {
    order: 2;
}


.kitchen-model-reverse .kitchen-model-information {
    order: 1;
}


.kitchen-model-light {
    background: var(--beige-soft);
}


.kitchen-model-dark {
    background: var(--olive-darkest);
    color: #ffffff;
}


.kitchen-model-olive {
    background: var(--olive);
    color: #ffffff;
}



/* IMAGE */
.kitchen-model-image {
    min-height: 0;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--beige-soft);
}

.kitchen-model-image img {
    width: 100%;
    height: auto;
    max-height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    transition: transform .8s ease;
}


.kitchen-model:hover .kitchen-model-image img {
    transform: scale(1.025);
}



/* INFORMATION */

.kitchen-model-information {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px 9%;
}


.kitchen-model-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 35px;
}


.kitchen-model-index {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;

    opacity: .48;
}


.kitchen-model-brand {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;

    opacity: .65;
}


.kitchen-model-information h3 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(65px, 6vw, 102px);
    font-weight: 500;
    line-height: .8;
}


.kitchen-model-light h3 {
    color: var(--olive-darkest);
}


.kitchen-model-description {
    max-width: 520px;

    margin: 30px 0 40px;

    font-size: 13px;
    line-height: 1.9;
}


.kitchen-model-light .kitchen-model-description {
    color: var(--text-muted);
}


.kitchen-model-dark .kitchen-model-description,
.kitchen-model-olive .kitchen-model-description {
    color: rgba(255,255,255,.7);
}



/* INCLUDED APPLIANCES */

.kitchen-model-includes {
    padding-top: 25px;

    border-top: 1px solid rgba(90,90,90,.15);
}


.kitchen-model-dark .kitchen-model-includes,
.kitchen-model-olive .kitchen-model-includes {
    border-color: rgba(255,255,255,.14);
}


.kitchen-model-label {
    display: block;

    margin-bottom: 17px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;

    opacity: .65;
}


.kitchen-model-includes ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.kitchen-model-includes li {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(110px, auto);

    align-items: center;
    gap: 20px;

    padding: 9px 0;

    border-bottom: 1px solid rgba(90,90,90,.09);

    font-size: 11px;
    line-height: 1.5;
}


.kitchen-model-dark .kitchen-model-includes li,
.kitchen-model-olive .kitchen-model-includes li {
    border-color: rgba(255,255,255,.08);
}


.kitchen-model-includes li span {
    opacity: .72;
}


.kitchen-model-includes li strong {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;

    text-align: right;
}



/* ACTIONS */

.kitchen-model-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 38px;
}


.kitchen-model-enquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    min-height: 48px;

    padding: 0 24px;

    background: var(--deep-red);

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .3s ease,
        transform .3s ease;
}


.kitchen-model-enquire:hover {
    background: var(--deep-red-dark);
    transform: translateY(-2px);
}


.kitchen-model-call {
    padding-bottom: 4px;

    border-bottom: 1px solid currentColor;

    color: inherit;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;

    opacity: .7;
}



/* ==================================================
   SHOWROOM CTA
================================================== */

.kitchens-showroom-cta {
    padding: 125px 7%;

    background:
        linear-gradient(
            135deg,
            var(--deep-red-dark),
            var(--deep-red)
        );

    color: #ffffff;

    text-align: center;
}


.kitchens-showroom-cta > div {
    max-width: 850px;

    margin: 0 auto;
}


.kitchens-showroom-cta span {
    display: block;

    margin-bottom: 22px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;

    opacity: .7;
}


.kitchens-showroom-cta h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(55px, 5.5vw, 86px);
    font-weight: 500;
    line-height: .9;
}


.kitchens-showroom-cta h2 em {
    display: block;

    color: var(--beige-deep);

    font-weight: 400;
}


.kitchens-showroom-cta p {
    max-width: 580px;

    margin: 28px auto 36px;

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

    font-size: 13px;
    line-height: 1.85;
}


.kitchens-showroom-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    padding: 15px 24px;

    border: 1px solid rgba(255,255,255,.5);

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}



/* ==================================================
   KITCHENS — TABLET
================================================== */

@media (max-width: 1000px) {

    .kitchens-brand-introduction {
        grid-template-columns:
            90px
            minmax(0, 1fr);
    }


    .kitchens-brand-mark {
        display: none;
    }


    .kitchen-model {
        grid-template-columns: 1fr;
    }


    .kitchen-model-image,
    .kitchen-model-information,
    .kitchen-model-reverse .kitchen-model-image,
    .kitchen-model-reverse .kitchen-model-information {
        order: initial;
    }


    .kitchen-model-image {
        min-height: 600px;
        height: 70vw;
        max-height: 760px;
    }


    .kitchen-model-information {
        padding: 75px 8%;
    }

}



/* ==================================================
   KITCHENS — MOBILE
================================================== */

@media (max-width: 650px) {


    .kitchens-hero {
        min-height: 82vh;
    }


    .kitchens-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(28,31,25,.9) 0%,
                rgba(28,31,25,.55) 55%,
                rgba(28,31,25,.12) 100%
            );
    }


    .kitchens-hero-content {
        width: auto;

        margin: 0;

        padding:
            0
            24px
            60px;
    }


    .kitchens-hero-content h1 {
        font-size: clamp(52px, 15vw, 68px);
        line-height: .87;
    }


    .kitchens-hero-content p {
        font-size: 13px;
        line-height: 1.75;
    }


    .kitchens-introduction {
        padding: 85px 24px;
    }


    .kitchens-introduction h2 {
        font-size: clamp(45px, 13vw, 59px);
    }


    .kitchens-brand-introduction {
        display: block;

        padding: 80px 24px;
    }


    .kitchens-brand-number {
        margin-bottom: 45px;

        font-size: 70px;
    }


    .kitchens-brand-content h2 {
        font-size: clamp(54px, 15vw, 70px);
    }


    .kitchen-models-heading {
        padding: 85px 24px 60px;
    }


    .kitchen-models-heading h2 {
        font-size: clamp(46px, 13vw, 60px);
    }


    .kitchen-model-image {
        min-height: 0;
        height: 72vw;
        max-height: none;
    }


    .kitchen-model-information {
        padding: 65px 24px;
    }


    .kitchen-model-information h3 {
        font-size: clamp(64px, 19vw, 88px);
    }


    .kitchen-model-includes li {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(105px, auto);

        gap: 14px;

        font-size: 10px;
    }


    .kitchen-model-includes li strong {
        font-size: 9px;
    }


    .kitchen-model-actions {
        align-items: stretch;
        flex-direction: column;

        gap: 18px;
    }


    .kitchen-model-enquire {
        width: 100%;
    }


    .kitchen-model-call {
        width: max-content;
    }


    .kitchens-showroom-cta {
        padding: 90px 24px;
    }


    .kitchens-showroom-cta h2 {
        font-size: clamp(50px, 14vw, 65px);
    }

}

/* ==================================================
   WASHBASINS PAGE
   Designers World
================================================== */


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

.washbasins-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--olive-darkest);
}


.washbasins-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}


.washbasins-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.015);

    animation:
        washbasinsHeroEntrance
        1.5s
        ease-out
        forwards;
}


@keyframes washbasinsHeroEntrance {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1.015);
    }

}


.washbasins-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(22, 20, 15, 0.78) 0%,
            rgba(22, 20, 15, 0.53) 34%,
            rgba(22, 20, 15, 0.14) 68%,
            rgba(22, 20, 15, 0.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(19, 20, 16, 0.56) 0%,
            transparent 45%
        );
}


.washbasins-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1520px;

    margin: 0 auto;

    padding:
        0
        8%
        105px;

    color: var(--text-light);
}


.washbasins-hero-content > span {
    display: block;

    margin-bottom: 20px;

    color: #e1bbaa;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.washbasins-hero-content h1 {
    max-width: 790px;
    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            62px,
            6.8vw,
            104px
        );

    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.025em;
}


.washbasins-hero-content h1 em {
    display: block;

    color: #dfc5aa;

    font-weight: 400;
}


.washbasins-hero-content p {
    max-width: 530px;

    margin:
        31px
        0
        34px;

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size: 13px;
    line-height: 1.85;
}


.washbasins-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 17px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.55
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.washbasins-hero-link:hover {
    gap: 25px;
    color: #e1bbaa;
}



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

.washbasins-introduction {
    position: relative;

    padding:
        130px
        7%;

    background:
        var(--beige-soft);

    overflow: hidden;
}


.washbasins-introduction::after {
    content: "FORM";

    position: absolute;

    right: -20px;
    bottom: -76px;

    color:
        rgba(
            61,
            69,
            55,
            0.04
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 230px;
    font-weight: 600;
    line-height: 1;

    pointer-events: none;
}


.washbasins-introduction-inner {
    position: relative;
    z-index: 1;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.washbasins-section-label {
    display: block;

    margin-bottom: 22px;

    color: var(--deep-red);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.washbasins-introduction h2 {
    margin: 0;

    color: var(--text-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            54px,
            5.5vw,
            82px
        );

    font-weight: 500;
    line-height: 0.95;
}


.washbasins-introduction h2 em {
    display: block;

    color: var(--olive);

    font-weight: 400;
}


.washbasins-introduction p {
    max-width: 660px;

    margin:
        30px
        auto
        0;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.9;
}



/* ==================================================
   EXPLORE BY BRAND
================================================== */


/* ==================================================
   WASHBASINS — EDITORIAL BRAND CARDS
================================================== */

.washbasin-brands {
    padding:
        105px
        7%
        110px;

    background:
        var(--olive-darkest);

    color:
        var(--text-light);
}


.washbasin-brands-heading {
    max-width: 680px;

    margin-bottom: 52px;
}


.washbasin-brand-grid {
    display: grid;

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

    gap: 18px;
}


.washbasin-brand-card {
    position: relative;

    min-height: 400px;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    padding:
        25px
        26px
        27px;

    background:
        linear-gradient(
            145deg,
            #f8f3ea,
            #eee5d8
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        var(--text-dark);

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}


.washbasin-brand-card::after {
    content: "";

    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 0;

    height: 3px;

    background:
        var(--deep-red);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform
        0.4s
        ease;
}


.washbasin-brand-card:hover {
    transform:
        translateY(-7px);

    background:
        #faf6ef;

    box-shadow:
        0
        28px
        55px
        rgba(
            0,
            0,
            0,
            0.19
        );
}


.washbasin-brand-card:hover::after {
    transform:
        scaleX(1);
}


/* TOP META */

.washbasin-brand-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(
            53,
            43,
            37,
            0.09
        );
}


.washbasin-brand-origin {
    color:
        var(--deep-red);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.washbasin-brand-index {
    color:
        rgba(
            53,
            43,
            37,
            0.35
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 17px;
}


/* LOGO AREA */

.washbasin-brand-logo {
    min-height: 215px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        35px
        24px;

    background: transparent;
}


.washbasin-brand-logo img {
    width: 72%;

    max-width: 230px;
    max-height: 90px;

    object-fit: contain;

    mix-blend-mode: multiply;

    transition:
        transform
        0.45s
        ease;
}


.washbasin-brand-card:hover
.washbasin-brand-logo img {
    transform:
        scale(1.045);
}


/* BOTTOM */

.washbasin-brand-card-bottom {
    min-height: auto;

    padding: 0;

    border: 0;
}


.washbasin-brand-card-bottom h3 {
    margin:
        0
        0
        16px;

    color:
        var(--text-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 31px;

    font-weight: 500;

    line-height: 1;
}


.washbasin-brand-explore {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 6px;

    color:
        var(--text-muted);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.washbasin-brand-explore::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 44px;
    height: 1px;

    background:
        var(--deep-red-soft);

    transition:
        width
        0.3s
        ease;
}


.washbasin-brand-card:hover
.washbasin-brand-explore {
    gap: 21px;

    color:
        var(--deep-red);
}


.washbasin-brand-card:hover
.washbasin-brand-explore::after {
    width: 100%;
}


/* TABLET */

@media (max-width: 950px) {

    .washbasin-brand-grid {
        grid-template-columns: 1fr;
    }


    .washbasin-brand-card {
        min-height: 300px;

        grid-template-columns:
            130px
            minmax(190px, 0.7fr)
            minmax(0, 1fr);

        grid-template-rows: 1fr;

        align-items: center;

        gap: 25px;
    }


    .washbasin-brand-card-top {
        height: 100%;

        flex-direction: column;

        align-items: flex-start;
        justify-content: space-between;

        padding:
            15px
            24px
            15px
            0;

        border-bottom: 0;

        border-right:
            1px solid
            rgba(
                53,
                43,
                37,
                0.09
            );
    }


    .washbasin-brand-logo {
        min-height: 170px;

        padding: 20px;
    }


    .washbasin-brand-card-bottom {
        padding-left: 8px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .washbasin-brands {
        padding:
            80px
            24px
            85px;
    }


    .washbasin-brand-card {
        min-height: 340px;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            1fr
            auto;

        gap: 0;

        padding:
            22px
            22px
            24px;
    }


    .washbasin-brand-card-top {
        height: auto;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        padding:
            0
            0
            16px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(
                53,
                43,
                37,
                0.09
            );
    }


    .washbasin-brand-logo {
        min-height: 200px;
    }


    .washbasin-brand-card-bottom {
        padding-left: 0;
    }


    .washbasin-brand-card-bottom h3 {
        font-size: 30px;
    }

}

/* ==================================================
   BRAND LIFESTYLE FEATURES
================================================== */

.washbasin-brand-section {
    width: 100%;

    scroll-margin-top: 100px;
}


.washbasin-brand-feature {
    min-height: 720px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    overflow: hidden;
}


.washbasin-brand-feature-reverse {
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 0.82fr);
}



/* LIFESTYLE IMAGE */

.washbasin-brand-feature-image {
    position: relative;

    min-height: 720px;

    overflow: hidden;
}


.washbasin-brand-feature-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(21, 20, 16, 0.12)
        );

    pointer-events: none;
}


.washbasin-brand-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.8s
        cubic-bezier(.22,.61,.36,1);
}


.washbasin-brand-feature:hover
.washbasin-brand-feature-image img {
    transform:
        scale(1.025);
}



/* BRAND CONTENT */

.washbasin-brand-feature-content {
    position: relative;

    padding:
        105px
        10%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;
}


.washbasin-brand-feature-content::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -170px;
    bottom: -170px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 50%;
}


.washbasin-brand-feature-content > span {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 22px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.washbasin-brand-feature-content h2 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            59px,
            5.8vw,
            88px
        );

    font-weight: 500;
    line-height: 0.89;
}


.washbasin-brand-feature-content h2 em {
    display: block;

    color: var(--beige-deep);

    font-weight: 400;
}


.washbasin-brand-feature-content p {
    position: relative;
    z-index: 1;

    max-width: 490px;

    margin:
        30px
        0
        33px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size: 12px;
    line-height: 1.9;
}


.washbasin-brand-feature-content a {
    position: relative;
    z-index: 1;

    width: max-content;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.washbasin-brand-feature-content a:hover {
    gap: 25px;

    color: var(--beige-deep);
}



/* ==================================================
   INDIVIDUAL BRAND COLOURS
================================================== */


/* VILLEROY & BOCH */

.washbasin-feature-red
.washbasin-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--deep-red-dark),
            #68252a
        );
}


/* VITRA */

.washbasin-feature-olive
.washbasin-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--olive-darkest),
            var(--olive-deep)
        );
}


/* HANSGROHE */

.washbasin-feature-dark
.washbasin-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            #282822,
            var(--olive-darkest)
        );
}


/* NEOM */

.washbasin-feature-neom
.washbasin-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--deep-red),
            var(--deep-red-dark)
        );
}



/* ==================================================
   PRODUCT AREAS
================================================== */

.washbasin-product-area {
    padding:
        110px
        7%
        125px;

    background:
        var(--beige-soft);
}


.washbasin-product-area-soft {
    background:
        #ebe3d7;
}


.washbasin-products-heading {
    max-width: 720px;
    margin-bottom: 60px;
}


.washbasin-products-heading > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--deep-red);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.washbasin-products-heading h3 {
    margin: 0;

    color:
        var(--text-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            46px,
            5vw,
            70px
        );

    font-weight: 500;
    line-height: 0.95;
}


.washbasin-products-heading p {
    max-width: 600px;

    margin-top: 22px;

    color:
        var(--text-muted);

    font-size: 12px;
    line-height: 1.85;
}


.washbasin-product-grid {
    display: grid;

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

    gap: 22px;
}



/* ==================================================
   PRODUCT CARD
================================================== */

/* ==================================================
   WASHBASIN PRODUCT CARDS
   Matches Bathtubs Product Format
================================================== */

.washbasin-product-grid {
    display: grid;

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

    gap: 25px;

    align-items: stretch;
}


.washbasin-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    background: var(--beige-soft);

    border:
        1px solid rgba(55, 64, 50, 0.10);

    overflow: hidden;
}



/* IMAGE */

.washbasin-product-image {
    height: 330px;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f3ec;

    overflow: hidden;
}


.washbasin-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.4s ease;
}


.washbasin-product-card:hover
.washbasin-product-image img {
    transform:
        scale(1.035);
}



/* INFORMATION */

.washbasin-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        28px
        26px
        30px;
}


.washbasin-product-brand {
    display: block;

    margin-bottom: 12px;

    color:
        var(--deep-red);

    font-size: 8px;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.washbasin-product-information h4 {
    margin:
        0
        0
        17px;

    color:
        var(--olive-deep);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 29px;

    font-weight: 400;

    line-height: 1.1;
}


.washbasin-product-description {
    margin:
        0
        0
        25px;

    color:
        var(--text-muted);

    font-size: 11px;

    line-height: 1.75;
}



/* SPECIFICATIONS */





/* AVAILABLE COLOURS */

.washbasin-product-colours {
    margin-bottom: 22px;
}


.washbasin-product-colours > span {
    display: block;

    margin-bottom: 10px;

    color:
        var(--text-muted);

    font-size: 7px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.washbasin-colour-options {
    display: flex;

    align-items: center;

    gap: 8px;
}


.washbasin-colour-dot {
    width: 13px;
    height: 13px;

    display: block;

    border-radius: 50%;

    border:
        1px solid rgba(43,35,30,0.15);

    box-shadow:
        0 0 0 2px #f7f3ec;
}


.washbasin-colour-graphite {
    background: #505153;
}

.washbasin-colour-pure-black {
    background: #252525;
}


.washbasin-colour-white-alpine {
    background: #f7f6f2;
}


.washbasin-colour-stone-white {
    background: #e8e5df;
}


.washbasin-colour-graphite {
    background: #505153;
}


.washbasin-colour-almond {
    background: #c9bca5;
}



.washbasin-colour-forest {
    background: #425348;
}


.washbasin-colour-nightfall {
    background: #12263d;
}


.washbasin-colour-teal {
    background: #466d70;
}


.washbasin-colour-french-linen {
    background: #d8d0c2;
}


.washbasin-colour-coal-black {
    background: #313131;
}


.washbasin-colour-sage-green {
    background: #9da992;
}


.washbasin-colour-bordeaux {
    background: #6d2e38;
}


.washbasin-colour-morning-green {
    background: #9ba796;
}


.washbasin-colour-vitra-white {
    background: #f7f7f3;
}


.washbasin-colour-vitra-clay-beige {
    background: #b9aa88;
}


.washbasin-colour-vitra-matt-white {
    background: #ecebe6;
}


.washbasin-colour-vitra-moss-green {
    background: #687055;
}

.washbasin-colour-vitra-terra-rossa {
    background: #b65c3f;
}


.washbasin-colour-vitra-matte-black {
    background: #1f1f1f;
}

.washbasin-colour-neom-white {
    background: #f5f4f0;
}







/* PRODUCT / COLOUR CODE */

.washbasin-product-code {
    margin-bottom: 23px;
}


.washbasin-product-code span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--text-muted);

    font-size: 7px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.washbasin-product-code strong {
    color:
        var(--olive-deep);

    font-size: 11px;

    font-weight: 500;
}



/* ACTIONS */

.washbasin-product-actions {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 9px;

    width: 100%;

    margin-top: auto;

    padding-top: 7px;
}


.washbasin-product-enquire {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 48px;

    padding:
        13px
        18px;

    background:
        var(--deep-red);

    border:
        1px solid
        var(--deep-red);

    color: #ffffff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 500;

    line-height: 1.3;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.washbasin-product-enquire strong {
    flex-shrink: 0;

    font-size: 15px;

    font-weight: 400;
}


.washbasin-product-enquire:hover {
    background:
        var(--olive-deep);

    border-color:
        var(--olive-deep);

    transform:
        translateY(-2px);
}


.washbasin-product-call {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 43px;

    padding:
        11px
        16px;

    border:
        1px solid rgba(61, 69, 55, 0.35);

    color:
        var(--olive-deep);

    background: transparent;

    text-decoration: none;

    font-size: 7px;
    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.washbasin-product-call:hover {
    background:
        var(--olive-deep);

    color: #ffffff;
}



/* TABLET */

@media (max-width: 900px) {

    .washbasin-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* MOBILE — SAME COMPACT TWO-COLUMN STYLE AS BATHTUBS */

@media (max-width: 650px) {

    .washbasin-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .washbasin-product-image {
        height: 150px;
        min-height: 150px;

        padding: 10px;
    }


    .washbasin-product-information {
        padding:
            13px
            10px
            12px;
    }


    .washbasin-product-brand {
        margin-bottom: 7px;

        font-size: 5.5px;

        letter-spacing: 1px;
    }


    .washbasin-product-information h4 {
        margin-bottom: 10px;

        font-size: 18px;

        line-height: 1.05;
    }


    .washbasin-product-description {
        margin-bottom: 12px;

        font-size: 7px;

        line-height: 1.55;
    }


    .washbasin-product-specs {
        margin-bottom: 12px;
    }


    .washbasin-product-specs div {
        padding:
            8px
            0;
    }


    .washbasin-product-specs span {
        font-size: 5px;

        letter-spacing: 0.8px;
    }


    .washbasin-product-specs strong {
        font-size: 6.5px;
    }


    .washbasin-product-colours {
        margin-bottom: 12px;
    }


    .washbasin-product-colours > span,
    .washbasin-product-code span {
        font-size: 5px;
    }


    .washbasin-colour-dot {
        width: 10px;
        height: 10px;
    }


    .washbasin-product-code {
        margin-bottom: 10px;
    }


    .washbasin-product-code strong {
        font-size: 7px;
    }


    .washbasin-product-actions {
        gap: 6px;

        margin-top: auto;

        padding-top: 8px;
    }


    .washbasin-product-enquire,
    .washbasin-product-call {
        width: 100%;

        min-height: 34px;

        padding:
            8px
            7px;

        font-size: 5.5px;

        line-height: 1.25;

        text-align: center;
    }


    .washbasin-product-enquire {
        justify-content: space-between;
    }


    .washbasin-product-call {
        justify-content: center;
    }

}


/* ==================================================
   WASHBASIN PRODUCT CARD — PREMIUM EFFECTS
================================================== */


/* CARD */

.washbasin-product-card {
    position: relative;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.washbasin-product-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(118, 40, 47, 0.18);

    box-shadow:
        0 22px 45px
        rgba(36, 31, 26, 0.10);
}



/* SUBTLE RED ACCENT LINE */

.washbasin-product-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        var(--deep-red);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;
}


.washbasin-product-card:hover::after {
    transform: scaleX(1);
}



/* IMAGE AREA */

.washbasin-product-image {
    position: relative;

    overflow: hidden;

    transition:
        background 0.35s ease;
}


.washbasin-product-card:hover
.washbasin-product-image {
    background:
        #f3eee6;
}



/* PRODUCT IMAGE */

.washbasin-product-image img {
    transition:
        transform 0.5s
        cubic-bezier(.22,.61,.36,1);
}


.washbasin-product-card:hover
.washbasin-product-image img {
    transform:
        scale(1.045);
}



/* TITLE */

.washbasin-product-information h4 {
    transition:
        color 0.3s ease;
}


.washbasin-product-card:hover
.washbasin-product-information h4 {
    color:
        var(--deep-red);
}



/* COLOUR DOTS */

.washbasin-colour-dot {
    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.washbasin-colour-dot:hover {
    transform:
        scale(1.18);

    box-shadow:
        0 0 0 2px #f7f3ec,
        0 0 0 3px
        rgba(118,40,47,0.32);
}



/* ENQUIRE BUTTON */

.washbasin-product-enquire {
    position: relative;

    overflow: hidden;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.washbasin-product-enquire:hover {
    background:
        var(--olive-deep);

    border-color:
        var(--olive-deep);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(42, 49, 38, 0.18);
}


.washbasin-product-enquire strong {
    transition:
        transform 0.3s ease;
}


.washbasin-product-enquire:hover strong {
    transform:
        translateX(5px);
}



/* CALL BUTTON */

.washbasin-product-call {
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.washbasin-product-call:hover {
    background:
        var(--olive-deep);

    border-color:
        var(--olive-deep);

    color: #ffffff;

    transform:
        translateY(-2px);
}



/* ==================================================
   MOBILE — KEEP EFFECTS SUBTLE
================================================== */

@media (max-width: 650px) {

    .washbasin-product-card:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 12px 25px
            rgba(36,31,26,0.08);
    }


    .washbasin-product-card:hover
    .washbasin-product-image img {
        transform:
            scale(1.025);
    }

}







/* ==================================================
   SHOWROOM CTA
================================================== */

.washbasins-showroom-cta {
    padding:
        125px
        7%;

    background:
        linear-gradient(
            135deg,
            var(--deep-red-dark),
            var(--deep-red)
        );

    color: #ffffff;

    text-align: center;
}


.washbasins-showroom-cta > div {
    max-width: 850px;
    margin: 0 auto;
}


.washbasins-showroom-cta span {
    display: block;

    margin-bottom: 22px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    opacity: 0.7;
}


.washbasins-showroom-cta h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            55px,
            5.5vw,
            86px
        );

    font-weight: 500;
    line-height: 0.9;
}


.washbasins-showroom-cta h2 em {
    display: block;

    color:
        var(--beige-deep);

    font-weight: 400;
}


.washbasins-showroom-cta p {
    max-width: 585px;

    margin:
        28px
        auto
        36px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 13px;
    line-height: 1.85;
}


.washbasins-showroom-button {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    padding:
        15px
        24px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.5
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        gap 0.3s ease;
}


.washbasins-showroom-button:hover {
    gap: 24px;

    background: #ffffff;

    color:
        var(--deep-red-dark);
}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    .washbasin-brand-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .washbasin-brand-feature,
    .washbasin-brand-feature-reverse {
        grid-template-columns: 1fr;
    }


    .washbasin-brand-feature-image,
    .washbasin-brand-feature-content {
        order: initial;
    }


    .washbasin-brand-feature-image {
        min-height: 600px;
        height: 65vw;
        max-height: 760px;
    }


    .washbasin-brand-feature-content {
        min-height: 510px;

        padding:
            80px
            8%;
    }


    .washbasin-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .washbasins-hero {
        min-height: 82svh;
    }


    .washbasins-hero-background img {
        object-position:
            57%
            center;

        animation: none;

        transform: none;
    }


    .washbasins-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(22, 20, 15, 0.92) 0%,
                rgba(22, 20, 15, 0.59) 57%,
                rgba(22, 20, 15, 0.19) 100%
            );
    }


    .washbasins-hero-content {
        padding:
            0
            24px
            60px;
    }


    .washbasins-hero-content > span {
        margin-bottom: 17px;

        font-size: 8px;

        letter-spacing: 0.18em;
    }


    .washbasins-hero-content h1 {
        max-width: 100%;

        font-size:
            clamp(
                50px,
                14vw,
                66px
            );

        line-height: 0.89;
    }


    .washbasins-hero-content p {
        max-width: 410px;

        margin:
            24px
            0
            28px;

        font-size: 12px;

        line-height: 1.75;
    }


    .washbasins-introduction {
        padding:
            88px
            24px;
    }


    .washbasins-introduction::after {
        display: none;
    }


    .washbasins-introduction h2 {
        font-size:
            clamp(
                45px,
                13vw,
                58px
            );
    }


    .washbasin-brands {
        padding:
            85px
            24px
            95px;
    }


    .washbasin-brands-heading {
        margin-bottom: 45px;
    }


    .washbasin-brands-heading h2 {
        font-size:
            clamp(
                43px,
                12vw,
                57px
            );
    }


    .washbasin-brand-grid {
        grid-template-columns: 1fr;
    }


    .washbasin-brand-card {
        min-height: 330px;
    }


    .washbasin-brand-logo {
        min-height: 225px;

        padding: 35px;
    }


    .washbasin-brand-card-bottom h3 {
        font-size: 28px;
    }


    .washbasin-brand-feature {
        display: flex;
        flex-direction: column;
    }


    .washbasin-brand-feature-image {
        order: 1;

        min-height: 0;

        height: 74vw;
        max-height: none;
    }


    .washbasin-brand-feature-content {
        order: 2;

        min-height: auto;

        padding:
            70px
            24px;
    }


    .washbasin-brand-feature-content h2 {
        font-size:
            clamp(
                52px,
                15vw,
                68px
            );
    }


    .washbasin-brand-feature-content p {
        font-size: 12px;

        line-height: 1.8;
    }


    .washbasin-product-area {
        padding:
            85px
            24px
            95px;
    }


    .washbasin-products-heading {
        margin-bottom: 45px;
    }


    .washbasin-products-heading h3 {
        font-size:
            clamp(
                43px,
                12vw,
                58px
            );
    }


    .washbasin-product-grid {
        grid-template-columns: 1fr;
    }


    .washbasins-showroom-cta {
        padding:
            90px
            24px;
    }


    .washbasins-showroom-cta h2 {
        font-size:
            clamp(
                50px,
                14vw,
                65px
            );
    }

}







/* ==================================================
   COLLECTION SHOWROOM NOTICE
================================================== */

.collection-showroom-note {
    max-width: 1180px;

    margin:
        0 auto
        65px;

    padding:
        32px
        36px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    background:
        linear-gradient(
            135deg,
            var(--olive-darkest),
            var(--olive-deep)
        );

    border-left:
        3px solid
        var(--deep-red);

    color: #ffffff;
}


.collection-showroom-note-text {
    max-width: 720px;
}


.collection-showroom-note-text > span {
    display: block;

    margin-bottom: 8px;

    color:
        #dfb5a1;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.collection-showroom-note-text h3 {
    margin:
        0
        0
        10px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        30px;

    font-weight: 400;

    line-height: 1;
}


.collection-showroom-note-text p {
    max-width: 650px;

    margin: 0;

    color:
        rgba(255,255,255,0.68);

    font-size: 10px;

    line-height: 1.75;
}


.collection-showroom-note-link {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    padding:
        13px
        18px;

    border:
        1px solid
        rgba(255,255,255,0.45);

    color: #ffffff;

    text-decoration: none;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        gap 0.3s ease;
}


.collection-showroom-note-link:hover {
    gap: 22px;

    background: #ffffff;

    color:
        var(--olive-darkest);
}



/* MOBILE */

@media (max-width: 650px) {

    .collection-showroom-note {
        margin-bottom: 42px;

        padding:
            26px
            22px;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }


    .collection-showroom-note-text h3 {
        font-size: 27px;
    }


    .collection-showroom-note-link {
        width: 100%;

        justify-content: space-between;
    }

}


/* ==================================================
   WC PAGE
   Designers World
================================================== */


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

.wc-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--olive-darkest);
}


.wc-hero-background {
    position: absolute;
    inset: 0;
}


.wc-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    animation:
        wcHeroEntrance
        1.5s
        ease-out
        forwards;
}


@keyframes wcHeroEntrance {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1.015);
    }

}


.wc-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 22, 17, 0.82) 0%,
            rgba(20, 22, 17, 0.58) 34%,
            rgba(20, 22, 17, 0.16) 67%,
            rgba(20, 22, 17, 0.06) 100%
        ),
        linear-gradient(
            0deg,
            rgba(18, 19, 15, 0.52) 0%,
            transparent 47%
        );
}


.wc-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1520px;

    margin: 0 auto;

    padding:
        0
        8%
        105px;

    color: #ffffff;
}


.wc-hero-content > span {
    display: block;

    margin-bottom: 20px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.wc-hero-content h1 {
    max-width: 800px;

    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            60px,
            6.5vw,
            100px
        );

    font-weight: 500;

    line-height: 0.89;

    letter-spacing: -0.025em;
}


.wc-hero-content h1 em {
    display: block;

    color: #dfc5aa;

    font-weight: 400;
}


.wc-hero-content p {
    max-width: 535px;

    margin:
        30px
        0
        34px;

    color:
        rgba(255,255,255,0.74);

    font-size: 13px;

    line-height: 1.85;
}


.wc-hero-link {
    display: inline-flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.5);

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.wc-hero-link:hover {
    gap: 25px;

    color: #dfb5a1;
}



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

.wc-introduction {
    position: relative;

    padding:
        125px
        7%;

    background:
        var(--beige-soft);

    overflow: hidden;
}


.wc-introduction::after {
    content: "FORM";

    position: absolute;

    right: -20px;
    bottom: -75px;

    color:
        rgba(61,69,55,0.04);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 225px;

    font-weight: 600;

    line-height: 1;

    pointer-events: none;
}


.wc-introduction-inner {
    position: relative;
    z-index: 1;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.wc-section-label {
    display: block;

    margin-bottom: 22px;

    color:
        var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.wc-introduction h2 {
    margin: 0;

    color:
        var(--text-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            52px,
            5.4vw,
            80px
        );

    font-weight: 500;

    line-height: 0.95;
}


.wc-introduction h2 em {
    display: block;

    color:
        var(--olive);

    font-weight: 400;
}


.wc-introduction p {
    max-width: 680px;

    margin:
        30px
        auto
        0;

    color:
        var(--text-muted);

    font-size: 13px;

    line-height: 1.9;
}



/* ==================================================
   BRAND SELECTOR
================================================== */

.wc-brands {
    padding:
        105px
        7%
        110px;

    background:
        var(--olive-darkest);

    color: #ffffff;
}


.wc-brands-heading {
    max-width: 700px;

    margin-bottom: 52px;
}


.wc-brands-heading > span {
    display: block;

    margin-bottom: 18px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.wc-brands-heading h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            47px,
            5vw,
            70px
        );

    font-weight: 500;

    line-height: 0.95;
}


.wc-brands-heading p {
    max-width: 560px;

    margin-top: 22px;

    color:
        rgba(255,255,255,0.62);

    font-size: 12px;

    line-height: 1.85;
}


.wc-brand-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 65px;
}


.wc-brand-card {
    position: relative;

    min-height: 390px;

    padding:
        25px
        26px
        27px;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    background:
        linear-gradient(
            145deg,
            #f8f3ea,
            #eee5d8
        );

    color:
        var(--text-dark);

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.wc-brand-card::after {
    content: "";

    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 0;

    height: 3px;

    background:
        var(--deep-red);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.4s ease;
}


.wc-brand-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0
        28px
        55px
        rgba(0,0,0,0.2);
}


.wc-brand-card:hover::after {
    transform: scaleX(1);
}


.wc-brand-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(53,43,37,0.1);
}


.wc-brand-card-top span {
    color:
        var(--deep-red);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.wc-brand-card-top strong {
    color:
        rgba(53,43,37,0.34);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 17px;

    font-weight: 400;
}


.wc-brand-logo {
    min-height: 210px;

    padding:
        35px
        24px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.wc-brand-logo img {
    width: 72%;

    max-width: 230px;
    max-height: 90px;

    object-fit: contain;

    mix-blend-mode: multiply;

    transition:
        transform 0.4s ease;
}


.wc-brand-card:hover
.wc-brand-logo img {
    transform:
        scale(1.045);
}


.wc-brand-card-bottom h3 {
    margin:
        0
        0
        13px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 30px;

    font-weight: 500;
}


.wc-brand-card-bottom span {
    color:
        var(--text-muted);

    font-size: 8px;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}



/* ==================================================
   BRAND LIFESTYLE SECTIONS
================================================== */

.wc-brand-section {
    scroll-margin-top: 100px;
}


.wc-brand-feature {
    min-height: 700px;

    display: grid;

    grid-template-columns:
        minmax(0,0.82fr)
        minmax(0,1.18fr);

    overflow: hidden;
}


.wc-brand-feature-reverse {
    grid-template-columns:
        minmax(0,1.18fr)
        minmax(0,0.82fr);
}


.wc-brand-feature-image {
    min-height: 700px;

    position: relative;

    overflow: hidden;
}


.wc-brand-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.wc-brand-feature:hover
.wc-brand-feature-image img {
    transform:
        scale(1.025);
}



/* TEMPORARY UNTIL WE GENERATE LIFESTYLE IMAGES */

.wc-lifestyle-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #c9bfaf,
            #847d70
        );
}


.wc-lifestyle-placeholder span {
    color:
        rgba(255,255,255,0.7);

    font-size: 9px;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}



.wc-brand-feature-content {
    position: relative;

    padding:
        100px
        10%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;
}


.wc-brand-feature-content > span {
    margin-bottom: 22px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.wc-brand-feature-content h2 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            58px,
            5.7vw,
            86px
        );

    font-weight: 500;

    line-height: 0.89;
}


.wc-brand-feature-content h2 em {
    display: block;

    color:
        var(--beige-deep);

    font-weight: 400;
}


.wc-brand-feature-content p {
    max-width: 490px;

    margin:
        30px
        0
        33px;

    color:
        rgba(255,255,255,0.68);

    font-size: 12px;

    line-height: 1.9;
}


.wc-brand-feature-content a {
    width: max-content;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.45);

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.wc-brand-feature-content a:hover {
    gap: 24px;

    color:
        var(--beige-deep);
}



/* BRAND COLOURS */

.wc-feature-red
.wc-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--deep-red-dark),
            #68252a
        );
}


.wc-feature-olive
.wc-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--olive-darkest),
            var(--olive-deep)
        );
}


.wc-feature-neom
.wc-brand-feature-content {
    background:
        linear-gradient(
            145deg,
            var(--deep-red),
            var(--deep-red-dark)
        );
}



/* ==================================================
   PRODUCT AREA
================================================== */

.wc-product-area {
    padding:
        105px
        7%
        120px;

    background:
        var(--beige-soft);
}


.wc-product-area-soft {
    background:
        #ebe3d7;
}


.wc-products-heading {
    max-width: 720px;

    margin-bottom: 55px;
}


.wc-products-heading > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.wc-products-heading h3 {
    margin: 0;

    color:
        var(--text-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            45px,
            5vw,
            68px
        );

    font-weight: 500;

    line-height: 0.95;
}


.wc-products-heading p {
    max-width: 590px;

    margin-top: 20px;

    color:
        var(--text-muted);

    font-size: 12px;

    line-height: 1.85;
}


.wc-product-grid {
    display: grid;

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

    gap: 25px;

    align-items: stretch;
}



/* EMPTY PRODUCT GRID WHILE BUILDING */

.wc-product-grid:empty {
    display: none;
}


.wc-product-area:has(.wc-product-grid:empty) {
    padding-top: 75px;
    padding-bottom: 75px;
}


.wc-product-area:has(.wc-product-grid:empty)
.wc-products-heading {
    margin-bottom: 0;
}



/* ==================================================
   SHOWROOM CTA
================================================== */

.wc-showroom-cta {
    padding:
        125px
        7%;

    background:
        linear-gradient(
            135deg,
            var(--deep-red-dark),
            var(--deep-red)
        );

    color: #ffffff;

    text-align: center;
}


.wc-showroom-cta > div {
    max-width: 850px;

    margin: 0 auto;
}


.wc-showroom-cta span {
    display: block;

    margin-bottom: 22px;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    opacity: 0.7;
}


.wc-showroom-cta h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            54px,
            5.5vw,
            84px
        );

    font-weight: 500;

    line-height: 0.9;
}


.wc-showroom-cta h2 em {
    display: block;

    color:
        var(--beige-deep);

    font-weight: 400;
}


.wc-showroom-cta p {
    max-width: 600px;

    margin:
        28px
        auto
        36px;

    color:
        rgba(255,255,255,0.72);

    font-size: 13px;

    line-height: 1.85;
}


.wc-showroom-button {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        15px
        24px;

    border:
        1px solid
        rgba(255,255,255,0.5);

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        gap 0.3s ease;
}


.wc-showroom-button:hover {
    gap: 24px;

    background: #ffffff;

    color:
        var(--deep-red-dark);
}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

    .wc-brand-grid {
        grid-template-columns:
            1fr;
    }


    .wc-brand-feature,
    .wc-brand-feature-reverse {
        grid-template-columns: 1fr;
    }


    .wc-brand-feature-image {
        min-height: 580px;
    }


    .wc-brand-feature-content {
        min-height: 500px;

        padding:
            80px
            8%;
    }


    .wc-product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .wc-hero {
        min-height: 82svh;
    }


    .wc-hero-background img {
        object-position:
            58%
            center;

        animation: none;

        transform: none;
    }


    .wc-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(20,22,17,0.92) 0%,
                rgba(20,22,17,0.58) 57%,
                rgba(20,22,17,0.18) 100%
            );
    }


    .wc-hero-content {
        padding:
            0
            24px
            60px;
    }


    .wc-hero-content h1 {
        font-size:
            clamp(
                49px,
                14vw,
                64px
            );
    }


    .wc-introduction {
        padding:
            85px
            24px;
    }


    .wc-introduction::after {
        display: none;
    }


    .wc-brands {
        padding:
            82px
            24px
            88px;
    }


    .wc-brand-card {
        min-height: 335px;
    }


    .wc-brand-logo {
        min-height: 195px;
    }


    .wc-brand-feature {
        display: flex;

        flex-direction: column;
    }


    .wc-brand-feature-image {
        order: 1;

        min-height: 0;

        height: 74vw;
    }


    .wc-brand-feature-content {
        order: 2;

        min-height: auto;

        padding:
            68px
            24px;
    }


    .wc-brand-feature-content h2 {
        font-size:
            clamp(
                50px,
                15vw,
                66px
            );
    }


    .wc-product-area {
        padding:
            82px
            24px
            92px;
    }


    .wc-product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 12px;
    }


    .wc-showroom-cta {
        padding:
            90px
            24px;
    }

}


/* ==================================================
   WC PRODUCT CARDS — EQUAL ALIGNMENT
   Keeps image, title, description, colours
   and buttons aligned across every card
================================================== */

.washbasin-product-grid[id$="-wc-products"] {
    align-items: stretch;
}


/* SAME CARD HEIGHT */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* SAME IMAGE POSITION */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-image {
    width: 100%;
    height: 330px;
    min-height: 330px;
    flex-shrink: 0;
}


/* INFORMATION FILLS REMAINING CARD */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-information {
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* BRAND ALWAYS SAME POSITION */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-brand {
    min-height: 10px;
}


/* SAME SPACE FOR PRODUCT NAME */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-information h4 {
    min-height: 68px;

    display: flex;
    align-items: flex-start;
}


/* SAME SPACE FOR PARAGRAPH */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-description {
    min-height: 105px;
}


/* AVAILABLE COLOURS ALWAYS STARTS
   AT SAME POSITION */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-colours {
    min-height: 54px;
    margin-bottom: 22px;
}


/* BUTTONS ALWAYS STAY AT BOTTOM */

.washbasin-product-grid[id$="-wc-products"]
.washbasin-product-actions {
    margin-top: auto;
}

@media (max-width: 650px) {

    .washbasin-product-grid[id$="-wc-products"]
    .washbasin-product-image {
        height: 150px;
        min-height: 150px;
    }


    .washbasin-product-grid[id$="-wc-products"]
    .washbasin-product-information h4 {
        min-height: 48px;
    }


    .washbasin-product-grid[id$="-wc-products"]
    .washbasin-product-description {
        min-height: 78px;
    }


    .washbasin-product-grid[id$="-wc-products"]
    .washbasin-product-colours {
        min-height: 38px;
        margin-bottom: 12px;
    }

}


/* ==================================================
   WC PRODUCT CARDS — PERFECT EQUAL ALIGNMENT
================================================== */


/* ALL WC GRIDS */

.wc-product-grid[id$="-wc-products"] {
    display: grid;

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

    gap: 25px;

    align-items: stretch;
}


/* CARD */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-card {
    display: flex;
    flex-direction: column;

    height: 100%;
}


/* IMAGE — EXACT SAME HEIGHT */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-image {
    width: 100%;

    height: 330px;
    min-height: 330px;

    flex-shrink: 0;
}


/* INFORMATION */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-information {
    display: flex;
    flex-direction: column;

    flex: 1;

    height: 100%;
}


/* BRAND */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-brand {
    height: 14px;
    min-height: 14px;

    margin-bottom: 16px;
}


/* ==================================================
   PRODUCT NAME
   EXACT HEIGHT — NOT MIN-HEIGHT
================================================== */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-information h4 {
    height: 78px;
    min-height: 78px;

    margin:
        0
        0
        18px;

    overflow: hidden;
}


/* ==================================================
   DESCRIPTION
   EXACT SAME SPACE ON EVERY CARD
================================================== */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-description {
    height: 110px;
    min-height: 110px;

    margin:
        0
        0
        20px;

    overflow: hidden;
}


/* ==================================================
   AVAILABLE COLOURS
================================================== */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-colours {
    height: 58px;
    min-height: 58px;

    margin-bottom: 22px;
}


/* ==================================================
   BUTTONS
================================================== */

.wc-product-grid[id$="-wc-products"]
.washbasin-product-actions {
    margin-top: auto;

    padding-top: 0;
}



/* ==================================================
   WC PRODUCT CARDS — TABLET
================================================== */

@media (max-width: 900px) {

    .wc-product-grid[id$="-wc-products"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==================================================
   WC PRODUCT CARDS — MOBILE
================================================== */

@media (max-width: 650px) {

    .wc-product-grid[id$="-wc-products"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .wc-product-grid[id$="-wc-products"]
    .washbasin-product-image {
        height: 150px;
        min-height: 150px;
    }


    .wc-product-grid[id$="-wc-products"]
    .washbasin-product-brand {
        height: 10px;
        min-height: 10px;

        margin-bottom: 8px;
    }


    .wc-product-grid[id$="-wc-products"]
    .washbasin-product-information h4 {
        height: 52px;
        min-height: 52px;

        margin-bottom: 10px;
    }


    .wc-product-grid[id$="-wc-products"]
    .washbasin-product-description {
        height: 82px;
        min-height: 82px;

        margin-bottom: 12px;
    }


    .wc-product-grid[id$="-wc-products"]
    .washbasin-product-colours {
        height: 40px;
        min-height: 40px;

        margin-bottom: 12px;
    }

}


/* ==================================================
   CAREERS PAGE
   Designers World
================================================== */


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

.careers-hero {
    position: relative;

    width: 100%;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #252b22;
}


.careers-hero-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.careers-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.careers-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(24, 25, 20, 0.90) 0%,
            rgba(24, 25, 20, 0.75) 34%,
            rgba(24, 25, 20, 0.28) 64%,
            rgba(24, 25, 20, 0.08) 100%
        );

    z-index: 1;
}


.careers-hero-content {
    position: relative;

    z-index: 2;

    width: min(90%, 1280px);

    margin: 0 auto;

    color: #f6f1e9;
}


.careers-hero-content > span {
    display: block;

    margin-bottom: 22px;

    color: #dfb5a1;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.careers-hero-content h1 {
    max-width: 650px;

    margin: 0 0 26px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(58px, 6vw, 92px);

    line-height: 0.95;

    font-weight: 400;

    color: #f6f1e9;
}


.careers-hero-content h1 em {
    display: block;

    color: #dfb5a1;

    font-style: italic;
    font-weight: 400;
}


.careers-hero-content p {
    max-width: 520px;

    margin-bottom: 34px;

    color: rgba(246, 241, 233, 0.82);

    font-size: 16px;
    line-height: 1.8;
}


.careers-hero-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 42px;

    padding: 18px 24px;

    background: #76282f;

    border: 1px solid #76282f;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.careers-hero-link:hover {
    background: #5d1f25;

    border-color: #5d1f25;

    transform: translateY(-2px);
}



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

.careers-introduction {
    padding: 110px 7%;

    background: #f6f1e9;
}


.careers-introduction-inner {
    max-width: 840px;

    margin: 0 auto;

    text-align: center;
}


.careers-section-label {
    display: block;

    margin-bottom: 22px;

    color: #76282f;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.careers-introduction h2 {
    margin: 0 0 28px;

    color: #34372f;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1;

    font-weight: 400;
}


.careers-introduction h2 em {
    color: #76282f;

    font-style: italic;
    font-weight: 400;
}


.careers-introduction p {
    max-width: 700px;

    margin: 0 auto;

    color: #706960;

    font-size: 16px;
    line-height: 1.9;
}



/* ==================================================
   VALUES
================================================== */

.careers-values {
    padding: 100px 7% 120px;

    background: #30372b;
}


.careers-values-heading {
    max-width: 1280px;

    margin: 0 auto 55px;
}


.careers-values-heading > span {
    display: block;

    margin-bottom: 15px;

    color: #dfb5a1;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.careers-values-heading h2 {
    margin: 0;

    color: #f6f1e9;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;
}


.careers-values-heading h2 em {
    color: #dfb5a1;

    font-style: italic;
}


.careers-values-grid {
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

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

    border-top: 1px solid rgba(246, 241, 233, 0.16);
    border-left: 1px solid rgba(246, 241, 233, 0.16);
}


.careers-value-card {
    min-height: 290px;

    padding: 40px;

    border-right: 1px solid rgba(246, 241, 233, 0.16);
    border-bottom: 1px solid rgba(246, 241, 233, 0.16);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.careers-value-card:hover {
    background: rgba(118, 40, 47, 0.18);
}


.careers-value-number {
    display: block;

    margin-bottom: 54px;

    color: #dfb5a1;

    font-size: 11px;

    letter-spacing: 2px;
}


.careers-value-card h3 {
    margin-bottom: 16px;

    color: #f6f1e9;

    font-family: "Cormorant Garamond", serif;

    font-size: 34px;

    font-weight: 400;
}


.careers-value-card p {
    max-width: 330px;

    color: rgba(246, 241, 233, 0.67);

    font-size: 14px;
    line-height: 1.8;
}



/* ==================================================
   APPLICATION SECTION
================================================== */

.career-application {
    padding: 120px 7%;

    background: #eee5d7;
}


.career-application-wrapper {
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 90px;

    align-items: start;
}



/* LEFT SIDE */

.career-application-intro {
    position: sticky;

    top: 130px;
}


.career-application-intro > span {
    display: block;

    margin-bottom: 20px;

    color: #76282f;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.career-application-intro h2 {
    margin: 0 0 28px;

    color: #30372b;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(48px, 5vw, 68px);

    line-height: 0.98;

    font-weight: 400;
}


.career-application-intro h2 em {
    display: block;

    color: #76282f;

    font-style: italic;
}


.career-application-intro > p {
    max-width: 470px;

    color: #6c655e;

    font-size: 15px;
    line-height: 1.9;
}


.career-contact-note {
    margin-top: 42px;

    padding-top: 24px;

    border-top: 1px solid rgba(48, 55, 43, 0.22);
}


.career-contact-note span {
    display: block;

    margin-bottom: 8px;

    color: #82786f;

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.career-contact-note strong {
    color: #30372b;

    font-size: 15px;

    font-weight: 500;
}



/* ==================================================
   FORM
================================================== */

.career-form-container {
    padding: 55px;

    background: #f8f4ec;

    border-top: 4px solid #76282f;
}


.career-form {
    display: flex;

    flex-direction: column;

    gap: 27px;
}


.career-form-row {
    display: grid;

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

    gap: 22px;
}


.career-form-group {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.career-form-group label {
    color: #36372f;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.career-form-group label span {
    color: #76282f;
}


.career-form-group input,
.career-form-group textarea {
    width: 100%;

    padding: 17px 0;

    background: transparent;

    border: none;

    border-bottom: 1px solid rgba(48, 55, 43, 0.28);

    border-radius: 0;

    outline: none;

    color: #35332f;

    font: inherit;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.career-form-group input::placeholder,
.career-form-group textarea::placeholder {
    color: #a29a91;
}


.career-form-group input:focus,
.career-form-group textarea:focus {
    border-bottom-color: #76282f;
}


.career-form-group textarea {
    resize: vertical;

    min-height: 140px;

    line-height: 1.7;
}



/* ==================================================
   CV FILE FIELD
================================================== */

.career-file-upload {
    padding: 20px;

    border: 1px dashed rgba(48, 55, 43, 0.32);

    background: rgba(238, 229, 215, 0.42);
}


.career-file-upload input[type="file"] {
    padding: 0;

    border: none;

    cursor: pointer;
}


.career-form-group small {
    color: #8a8177;

    font-size: 11px;

    line-height: 1.6;
}



/* ==================================================
   SUBMIT BUTTON
================================================== */

.career-submit-button {
    width: 100%;

    min-height: 68px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 8px;

    padding: 0 28px;

    background: #76282f;

    border: 1px solid #76282f;

    cursor: pointer;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.career-submit-button strong {
    font-size: 20px;

    font-weight: 400;

    transition: transform 0.3s ease;
}


.career-submit-button:hover {
    background: #30372b;

    border-color: #30372b;
}


.career-submit-button:hover strong {
    transform: translateX(5px);
}


.career-form-privacy {
    margin: -5px 0 0;

    color: #8a8177;

    font-size: 10px;

    line-height: 1.7;
}



/* ==================================================
   HONEYPOT
================================================== */

.career-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    left: -9999px !important;
}



/* ==================================================
   STATUS MESSAGE
================================================== */

.career-status {
    padding: 55px 7%;

    background: #30372b;
}


.career-status[hidden] {
    display: none;
}


.career-status-inner {
    max-width: 760px;

    margin: 0 auto;

    padding: 45px;

    text-align: center;

    background: #f6f1e9;
}


.career-status-inner h3 {
    margin: 0 0 14px;

    color: #30372b;

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    font-weight: 400;
}


.career-status-inner p {
    margin-bottom: 26px;

    color: #716960;

    line-height: 1.8;
}


.career-status-inner a {
    color: #76282f;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}



/* ==================================================
   FINAL CTA
================================================== */

.careers-final-cta {
    padding: 105px 7%;

    background: #76282f;

    text-align: center;
}


.careers-final-cta > div {
    max-width: 760px;

    margin: 0 auto;
}


.careers-final-cta span {
    display: block;

    margin-bottom: 20px;

    color: #e7c4b2;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.careers-final-cta h2 {
    margin-bottom: 25px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1;

    font-weight: 400;
}


.careers-final-cta h2 em {
    display: block;

    color: #e7c4b2;

    font-style: italic;
}


.careers-final-cta p {
    max-width: 520px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, 0.72);

    line-height: 1.8;
}


.careers-final-cta a {
    display: inline-flex;

    align-items: center;

    gap: 30px;

    padding: 17px 24px;

    border: 1px solid rgba(255, 255, 255, 0.56);

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.careers-final-cta a:hover {
    background: #ffffff;

    color: #76282f;
}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

    .careers-hero {
        min-height: 650px;
    }


    .career-application-wrapper {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .career-application-intro {
        position: static;
    }


    .career-application-intro > p {
        max-width: 700px;
    }


    .careers-values-grid {
        grid-template-columns: 1fr 1fr;
    }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .careers-hero {
        min-height: 620px;
    }


    .careers-hero-background img {
        object-position: 58% center;
    }


    .careers-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(24, 25, 20, 0.92) 0%,
                rgba(24, 25, 20, 0.76) 65%,
                rgba(24, 25, 20, 0.38) 100%
            );
    }


    .careers-hero-content {
        width: 88%;
    }


    .careers-hero-content h1 {
        font-size: 51px;
    }


    .careers-hero-content p {
        font-size: 14px;
    }


    .careers-introduction,
    .careers-values,
    .career-application,
    .careers-final-cta {
        padding-left: 6%;
        padding-right: 6%;
    }


    .careers-introduction {
        padding-top: 80px;
        padding-bottom: 80px;
    }


    .careers-values {
        padding-top: 75px;
        padding-bottom: 85px;
    }


    .careers-values-grid {
        grid-template-columns: 1fr;
    }


    .careers-value-card {
        min-height: 230px;

        padding: 30px;
    }


    .careers-value-number {
        margin-bottom: 35px;
    }


    .career-application {
        padding-top: 80px;
        padding-bottom: 80px;
    }


    .career-form-container {
        padding: 30px 22px;
    }


    .career-form-row {
        grid-template-columns: 1fr;

        gap: 27px;
    }


    .career-submit-button {
        min-height: 62px;

        padding: 0 20px;
    }


    .careers-final-cta {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}

/* ==================================================
   FLUSH PLATES PAGE
================================================== */


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

.flushplates-hero {
    position: relative;

    min-height: 720px;
    width: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--olive-darkest);
}


.flushplates-hero-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.flushplates-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.flushplates-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21, 22, 18, 0.90) 0%,
            rgba(21, 22, 18, 0.72) 35%,
            rgba(21, 22, 18, 0.30) 65%,
            rgba(21, 22, 18, 0.12) 100%
        );

    z-index: 1;
}


.flushplates-hero-content {
    position: relative;
    z-index: 2;

    width: min(86%, 1280px);

    margin: 0 auto;

    padding-top: 70px;

    color: var(--text-light);
}


.flushplates-hero-content > span {
    display: block;

    margin-bottom: 22px;

    color: #dfb5a1;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.flushplates-hero-content h1 {
    max-width: 720px;

    margin: 0 0 26px;

    color: var(--text-light);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(58px, 6vw, 90px);

    line-height: 0.98;
    font-weight: 400;
}


.flushplates-hero-content h1 em {
    display: block;

    color: #dfb5a1;

    font-style: italic;
    font-weight: 400;
}


.flushplates-hero-content p {
    max-width: 540px;

    margin-bottom: 34px;

    color: rgba(248, 244, 238, 0.78);

    font-size: 14px;
    line-height: 1.9;
}


.flushplates-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 38px;

    padding: 17px 24px;

    background: var(--deep-red);

    border: 1px solid var(--deep-red);

    color: var(--text-light);

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.flushplates-hero-link:hover {
    background: var(--deep-red-dark);
    border-color: var(--deep-red-dark);

    transform: translateY(-2px);
}



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

.flushplates-introduction {
    padding: 105px 7%;

    background: var(--beige-soft);
}


.flushplates-introduction-inner {
    max-width: 820px;

    margin: 0 auto;

    text-align: center;
}


.flushplates-section-label {
    display: block;

    margin-bottom: 18px;

    color: var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.flushplates-introduction h2 {
    margin: 0 0 26px;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1;

    font-weight: 400;
}


.flushplates-introduction h2 em {
    display: block;

    color: var(--deep-red);

    font-style: italic;
}


.flushplates-introduction p {
    max-width: 680px;

    margin: auto;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.9;
}



/* ==================================================
   BRAND SELECTION
================================================== */

.flushplates-brands {
    padding: 90px 7% 105px;

    background: var(--beige);
}


.flushplates-brands-heading {
    max-width: 1280px;

    margin: 0 auto 46px;
}


.flushplates-brands-heading > span {
    display: block;

    margin-bottom: 12px;

    color: var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.flushplates-brands-heading h2 {
    margin: 0 0 16px;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 4vw, 56px);

    font-weight: 400;
}


.flushplates-brands-heading p {
    max-width: 570px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}


.flushplates-brand-grid {
    max-width: 1280px;

    margin: auto;

    display: grid;

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

    gap: 24px;
}


.flushplates-brand-card {
    min-height: 300px;

    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--card-bg);

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

    color: var(--text-dark);

    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.flushplates-brand-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 22px 45px rgba(43, 35, 30, 0.10);
}


.flushplates-brand-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.flushplates-brand-card-top span,
.flushplates-brand-card-top strong {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.flushplates-brand-logo {
    height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.flushplates-brand-logo img {
    max-width: 190px;
    max-height: 75px;

    object-fit: contain;
}


.flushplates-brand-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 20px;
}


.flushplates-brand-card-bottom h3 {
    margin: 0;

    color: var(--text-dark);

    font-family: "Cormorant Garamond", serif;

    font-size: 30px;

    font-weight: 500;
}


.flushplates-brand-card-bottom span {
    color: var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}



/* ==================================================
   SHOWROOM SELECTION NOTE
================================================== */

.flushplates-selection-note {
    padding: 0 7% 100px;

    background: var(--beige);
}



/* ==================================================
   BRAND SECTIONS
================================================== */

.flushplates-brand-section {
    width: 100%;
}


.flushplates-brand-feature {
    min-height: 600px;

    display: grid;

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


.flushplates-brand-feature-content {
    padding: 80px 9%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.flushplates-feature-red
.flushplates-brand-feature-content {
    background: var(--deep-red);

    color: var(--text-light);
}


.flushplates-feature-olive
.flushplates-brand-feature-content {
    background: var(--olive-deep);

    color: var(--text-light);
}


.flushplates-brand-feature-content > span {
    display: block;

    margin-bottom: 16px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.flushplates-brand-feature-content h2 {
    margin: 0 0 25px;

    color: var(--text-light);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 0.98;

    font-weight: 400;
}


.flushplates-brand-feature-content h2 em {
    display: block;

    color: #dfb5a1;

    font-style: italic;
}


.flushplates-brand-feature-content p {
    max-width: 470px;

    margin-bottom: 30px;

    color: rgba(248, 244, 238, 0.74);

    font-size: 13px;
    line-height: 1.9;
}


.flushplates-brand-feature-content a {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 28px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(248, 244, 238, 0.45);

    color: var(--text-light);

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.flushplates-brand-feature-image {
    min-height: 600px;

    overflow: hidden;
}


.flushplates-brand-feature-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}


.flushplates-brand-feature:hover
.flushplates-brand-feature-image img {
    transform: scale(1.025);
}



/* ==================================================
   PRODUCT AREA
================================================== */

.flushplates-product-area {
    padding: 95px 7% 110px;

    background: var(--beige-soft);
}


.flushplates-product-area-soft {
    background: var(--beige);
}


.flushplates-products-heading {
    max-width: 1280px;

    margin: 0 auto 48px;
}


.flushplates-products-heading span {
    display: block;

    margin-bottom: 12px;

    color: var(--deep-red);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.flushplates-products-heading h3 {
    margin: 0 0 14px;

    color: var(--olive-deep);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 4vw, 54px);

    font-weight: 400;
}


.flushplates-products-heading p {
    max-width: 620px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.8;
}


.flushplates-product-grid {
    max-width: 1280px;

    margin: auto;

    display: grid;

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

    gap: 28px;
}



/* ==================================================
   SHOWROOM CTA
================================================== */

.flushplates-showroom-cta {
    padding: 100px 7%;

    background: var(--deep-red);

    text-align: center;
}


.flushplates-showroom-cta > div {
    max-width: 760px;

    margin: auto;
}


.flushplates-showroom-cta span {
    display: block;

    margin-bottom: 18px;

    color: #dfb5a1;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.flushplates-showroom-cta h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1;

    font-weight: 400;
}


.flushplates-showroom-cta h2 em {
    display: block;

    color: #dfb5a1;

    font-style: italic;
}


.flushplates-showroom-cta p {
    max-width: 570px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, 0.74);

    font-size: 13px;
    line-height: 1.8;
}


.flushplates-showroom-button {
    display: inline-flex;
    align-items: center;

    gap: 30px;

    padding: 16px 22px;

    border:
        1px solid rgba(255, 255, 255, 0.52);

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.flushplates-showroom-button:hover {
    background: #ffffff;

    color: var(--deep-red);
}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

    .flushplates-hero {
        min-height: 660px;
    }


    .flushplates-brand-grid {
        grid-template-columns: 1fr 1fr;
    }


    .flushplates-brand-feature {
        grid-template-columns: 1fr;
    }


    .flushplates-brand-feature-reverse
    .flushplates-brand-feature-image {
        order: 2;
    }


    .flushplates-brand-feature-reverse
    .flushplates-brand-feature-content {
        order: 1;
    }


    .flushplates-brand-feature-image {
        min-height: 500px;
    }


    .flushplates-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .flushplates-hero {
        min-height: 620px;
    }


    .flushplates-hero-background img {
        object-position: 55% center;
    }


    .flushplates-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(21, 22, 18, 0.92),
                rgba(21, 22, 18, 0.68)
            );
    }


    .flushplates-hero-content {
        width: 88%;

        padding-top: 60px;
    }


    .flushplates-hero-content h1 {
        font-size: 48px;
    }


    .flushplates-introduction {
        padding: 80px 6%;
    }


    .flushplates-brands {
        padding:
            75px 6%
            85px;
    }


    .flushplates-brand-grid {
        grid-template-columns: 1fr;
    }


    .flushplates-brand-card {
        min-height: 270px;
    }


    .flushplates-selection-note {
        padding:
            0 6%
            80px;
    }


    .flushplates-brand-feature-content {
        padding:
            70px 7%;
    }


    .flushplates-brand-feature-image {
        min-height: 420px;
    }


    .flushplates-product-area {
        padding:
            75px 6%
            85px;
    }


    .flushplates-product-grid {
        grid-template-columns: 1fr;
    }


    .flushplates-showroom-cta {
        padding:
            80px 6%;
    }

}