/* =========================================================
   KWITHU FURNITURE
   PREMIUM INTERNATIONAL FURNITURE WEBSITE
   ========================================================= */


/* =========================================================
   ROOT / DESIGN SYSTEM
========================================================= */

:root {

    /* Brand */
    --kwithu-black: #1D1C1A;
    --kwithu-gold: #DC9E3F;
    --kwithu-offwhite: #F9F8F6;
    --kwithu-grey: #575654;
    --kwithu-white: #FFFFFF;

    /* Supporting */
    --soft-black: #262522;
    --deep-black: #11110F;
    --warm-grey: #8A8884;
    --border-light: rgba(29, 28, 26, 0.12);
    --border-dark: rgba(255, 255, 255, 0.18);
    --gold-light: #E7BD78;

    /* Typography */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "DM Sans", Arial, sans-serif;

    /* Layout */
    --container: 1380px;
    --side-padding: 5vw;

    /* Effects */
    --transition-fast: 0.25s ease;
    --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1);

    /* Shadows */
    --shadow-soft: 0 15px 45px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 25px 80px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
    font-size: 16px;
}


body {
    margin: 0;
    padding: 0;
    background: var(--kwithu-offwhite);
    color: var(--kwithu-black);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;
    width: 100%;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


ul,
ol {
    list-style: none;
}


::selection {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
}


/* =========================================================
   GENERAL LAYOUT
========================================================= */

.page-container {
    width: min(var(--container), calc(100% - (var(--side-padding) * 2)));
    margin-inline: auto;
}


.section-padding {
    padding: 130px 0;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    color: var(--kwithu-white);
    transition:
        background var(--transition),
        padding var(--transition),
        box-shadow var(--transition);
}


.site-header.scrolled {
    position: fixed;
    background: rgba(29, 28, 26, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 14px 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}


.header-container {
    width: min(1540px, calc(100% - 50px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 190px 1fr 150px;
    align-items: center;
    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.brand-logo {
    display: inline-flex;
    align-items: center;
    width: max-content;
}


.brand-logo img {
    width: 150px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    object-position: left center;
    transition: transform var(--transition);
}


.brand-logo:hover img {
    transform: scale(1.03);
}


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

.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(22px, 2.4vw, 42px);
}


.nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 10px 0;
    white-space: nowrap;
    transition: color var(--transition-fast);
}


.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: var(--kwithu-gold);
    transition: width var(--transition);
}


.nav-link:hover,
.nav-link.active {
    color: var(--kwithu-white);
}


.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* =========================================================
   HEADER CTA
========================================================= */

.header-cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 125px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: var(--kwithu-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}


.header-cta i {
    font-size: 10px;
}


.header-cta:hover {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
    transform: translateY(-2px);
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.menu-toggle {
    display: none;
    justify-self: end;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
}


.menu-toggle span {
    width: 20px;
    height: 1px;
    background: var(--kwithu-white);
    transition: transform var(--transition);
}


.menu-toggle.active span:first-child {
    transform: translateY(4px) rotate(45deg);
}


.menu-toggle.active span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}


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

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--kwithu-black);
    color: var(--kwithu-white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}


.mobile-menu.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


.mobile-menu-inner {
    width: min(100%, 650px);
    height: 100%;
    margin-left: auto;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
}


.mobile-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-dark);
}


.mobile-menu-top > span {
    color: var(--kwithu-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.mobile-menu-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--kwithu-white);
    background: transparent;
    border: 1px solid var(--border-dark);
    font-size: 18px;
}


.mobile-navigation {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}


.mobile-navigation a {
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-dark);
    font-family: var(--font-display);
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.15;
    transition: color var(--transition);
}


.mobile-navigation a span {
    color: var(--kwithu-gold);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
}


.mobile-navigation a:hover {
    color: var(--kwithu-gold);
}


.mobile-menu-bottom {
    margin-top: auto;
    padding-top: 30px;
}


.mobile-menu-bottom p {
    max-width: 330px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}


.mobile-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--kwithu-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


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

.hero-section {
    position: relative;
    min-height: 100svh;
    height: 920px;
    max-height: 1100px;
    background: var(--kwithu-black);
    color: var(--kwithu-white);
    overflow: hidden;
}


.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}


.hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}


.hero-slide-one {
    order: 3;
    background-image: url("https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=2200&q=90");
}


.hero-slide-two {
    order: 2;
    background-image: url("https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=2200&q=90");
}


.hero-slide-three {
    order: 1;
    background-image: url("https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=2200&q=90");
}


.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(10, 9, 8, 0.86) 0%,
            rgba(10, 9, 8, 0.65) 34%,
            rgba(10, 9, 8, 0.28) 68%,
            rgba(10, 9, 8, 0.18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10, 9, 8, 0.45) 0%,
            transparent 40%
        );
}


.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(29, 28, 26, 0.08);
    pointer-events: none;
}


.hero-content {
    position: relative;
    z-index: 3;
    padding-top: 90px;
}


.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
    color: var(--kwithu-gold-light);
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.eyebrow-line {
    display: inline-block;
    width: 38px;
    height: 1px;
    background: var(--kwithu-gold);
}


.hero-content h1 {
    max-width: 850px;
    font-family: var(--font-display);
    font-size: clamp(58px, 7.2vw, 112px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
}


.hero-content h1 em {
    display: block;
    color: var(--kwithu-gold);
    font-style: italic;
    font-weight: 500;
}


.hero-content p {
    max-width: 575px;
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.8;
}


.hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 38px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 25px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.btn i {
    font-size: 10px;
    transition: transform var(--transition);
}


.btn:hover i {
    transform: translateX(4px);
}


.btn-primary {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
    border-color: var(--kwithu-gold);
}


.btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(220, 158, 63, 0.2);
}


.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: var(--kwithu-white);
    background: rgba(255, 255, 255, 0.03);
}


.btn-outline:hover {
    background: var(--kwithu-white);
    border-color: var(--kwithu-white);
    color: var(--kwithu-black);
    transform: translateY(-3px);
}


.btn-dark {
    background: var(--kwithu-black);
    color: var(--kwithu-white);
    border-color: var(--kwithu-black);
}


.btn-dark:hover {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
    transform: translateY(-3px);
}


.btn-light {
    background: var(--kwithu-white);
    color: var(--kwithu-black);
    border-color: var(--kwithu-white);
}


.btn-light:hover {
    background: transparent;
    color: var(--kwithu-white);
    transform: translateY(-3px);
}


.btn-gold {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
    border-color: var(--kwithu-gold);
}


.btn-gold:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-3px);
}


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

.hero-slide-number {
    position: absolute;
    right: 5vw;
    bottom: 112px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
}


.hero-slide-number span:first-child {
    color: var(--kwithu-gold);
}


.slide-divider {
    width: 42px;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}


.hero-navigation {
    position: absolute;
    right: 5vw;
    bottom: 45px;
    z-index: 10;
    display: flex;
    gap: 7px;
}


.hero-navigation button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--kwithu-white);
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}


.hero-navigation button:hover {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
}


.hero-navigation i {
    font-size: 11px;
}


.hero-swiper .swiper-pagination {
    position: absolute;
    z-index: 10;
    left: 5vw;
    bottom: 51px;
    width: auto;
    display: flex;
    gap: 7px;
}


.hero-swiper .swiper-pagination-bullet {
    width: 30px;
    height: 2px;
    margin: 0 !important;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition:
        width var(--transition),
        background var(--transition);
}


.hero-swiper .swiper-pagination-bullet-active {
    width: 60px;
    background: var(--kwithu-gold);
}


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

.hero-bottom {
    position: absolute;
    left: 5vw;
    right: 5vw;
    bottom: 45px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}


.hero-bottom-left,
.hero-bottom-right {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.scroll-line {
    width: 35px;
    height: 1px;
    background: var(--kwithu-gold);
}


.hero-bottom-right {
    margin-right: 125px;
}


.dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--kwithu-gold);
}


/* =========================================================
   SECTION LABEL
========================================================= */

.section-label {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--kwithu-grey);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.section-label > span:first-child {
    color: var(--kwithu-gold);
}


.label-line {
    width: 35px;
    height: 1px;
    background: var(--kwithu-gold);
}


.section-label.light {
    color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   INTRO
========================================================= */

.intro-section {
    background: var(--kwithu-offwhite);
}


.intro-grid {
    display: grid;
    grid-template-columns: 22% 78%;
    gap: 40px;
}


.intro-content {
    max-width: 1050px;
}


.intro-content h2 {
    max-width: 1000px;
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.08;
}


.intro-content h2 > span {
    display: block;
    color: var(--kwithu-gold);
    font-style: italic;
}


.intro-bottom {
    display: grid;
    grid-template-columns: minmax(250px, 470px) auto;
    gap: 70px;
    align-items: end;
    margin-top: 58px;
}


.intro-bottom p {
    color: var(--kwithu-grey);
    font-size: 14px;
    line-height: 1.9;
}


.text-link,
.light-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    color: var(--kwithu-black);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.text-link span {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-light);
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.text-link:hover span {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    transform: translateX(4px);
}


/* =========================================================
   COLLECTION SECTION
========================================================= */

.collection-section {
    background: #F1F0ED;
}


.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 65px;
}


.section-title {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.02;
}


.section-title em {
    color: var(--kwithu-gold);
    font-style: italic;
}


.desktop-view-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kwithu-black);
    color: var(--kwithu-black);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        color var(--transition),
        border-color var(--transition);
}


.desktop-view-all:hover {
    color: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
}


/* =========================================================
   FEATURED PRODUCTS
========================================================= */

.featured-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    grid-template-rows: auto auto;
    gap: 16px;
}


.featured-card {
    position: relative;
    display: block;
    min-height: 420px;
    overflow: hidden;
    background: var(--kwithu-black);
}


.featured-card-large {
    grid-row: span 2;
    min-height: 860px;
}


.featured-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


.featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 35%,
            rgba(0, 0, 0, 0.72) 100%
        );
    transition: background var(--transition);
}


.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


.featured-card:hover .featured-image img {
    transform: scale(1.07);
}


.featured-card:hover .featured-image::after {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 25%,
            rgba(0, 0, 0, 0.78) 100%
        );
}


.featured-info {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 25px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: var(--kwithu-white);
}


.product-number {
    display: block;
    margin-bottom: 7px;
    color: var(--kwithu-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}


.featured-info h3 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
}


.card-arrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    font-size: 11px;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}


.featured-card:hover .card-arrow {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
    transform: rotate(45deg);
}


.mobile-view-all {
    display: none;
    margin-top: 30px;
}


/* =========================================================
   CRAFT SECTION
========================================================= */

.craft-section {
    position: relative;
    min-height: 760px;
    display: grid;
    grid-template-columns: 58% 42%;
    background: var(--kwithu-black);
    color: var(--kwithu-white);
}


.craft-image {
    position: relative;
    overflow: hidden;
}


.craft-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.22)
    );
}


.craft-image img {
    height: 100%;
    object-fit: cover;
}


.craft-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px clamp(45px, 7vw, 120px);
    background: var(--kwithu-black);
}


.craft-content h2 {
    max-width: 580px;
    margin-top: 30px;
    font-family: var(--font-display);
    font-size: clamp(45px, 5vw, 72px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.04;
}


.craft-content h2 em {
    color: var(--kwithu-gold);
    font-style: italic;
}


.craft-content p {
    max-width: 500px;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.9;
}


.light-link {
    margin-top: 35px;
    color: var(--kwithu-white);
}


.light-link i {
    color: var(--kwithu-gold);
    transition: transform var(--transition);
}


.light-link:hover i {
    transform: translateX(6px);
}


/* =========================================================
   VALUES
========================================================= */

.values-section {
    background: var(--kwithu-offwhite);
}


.values-header {
    max-width: 850px;
}


.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 70px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}


.value-card {
    position: relative;
    min-height: 390px;
    padding: 45px 42px;
    border-right: 1px solid var(--border-light);
    transition:
        background var(--transition),
        transform var(--transition);
}


.value-card:last-child {
    border-right: 0;
}


.value-card:hover {
    background: #EFEDE9;
}


.value-number {
    color: var(--kwithu-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
}


.value-icon {
    width: 54px;
    height: 54px;
    margin-top: 60px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-light);
    color: var(--kwithu-gold);
    font-size: 18px;
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.value-card:hover .value-icon {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
    transform: rotate(-5deg);
}


.value-card h3 {
    margin-top: 27px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
}


.value-card p {
    max-width: 320px;
    margin-top: 14px;
    color: var(--kwithu-grey);
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   CUSTOM FURNITURE
========================================================= */

.custom-section {
    background: #F1F0ED;
}


.custom-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(60px, 8vw, 150px);
}


.custom-content {
    max-width: 500px;
}


.custom-content h2 {
    margin-top: 27px;
    font-family: var(--font-display);
    font-size: clamp(47px, 5vw, 76px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.02;
}


.custom-content h2 em {
    color: var(--kwithu-gold);
    font-style: italic;
}


.custom-content p {
    margin-top: 27px;
    color: var(--kwithu-grey);
    font-size: 14px;
    line-height: 1.9;
}


.custom-content .btn {
    margin-top: 32px;
}


.custom-visual {
    position: relative;
    min-height: 700px;
}


.custom-main-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 86%;
    height: 600px;
    overflow: hidden;
}


.custom-main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(29, 28, 26, 0.04);
}


.custom-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


.custom-visual:hover .custom-main-image img {
    transform: scale(1.035);
}


.custom-small-image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    height: 285px;
    z-index: 3;
    padding: 10px;
    background: #F1F0ED;
}


.custom-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.custom-number {
    position: absolute;
    right: 0;
    bottom: 12px;
    color: var(--kwithu-gold);
    font-family: var(--font-display);
    font-size: 90px;
    font-weight: 500;
    line-height: 1;
}


/* =========================================================
   SUSTAINABILITY
========================================================= */

.sustainability-section {
    position: relative;
    min-height: 720px;
    display: grid;
    grid-template-columns: 54% 46%;
    background: var(--kwithu-black);
    color: var(--kwithu-white);
}


.sustainability-image {
    position: relative;
    overflow: hidden;
}


.sustainability-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.13);
}


.sustainability-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.sustainability-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px clamp(45px, 7vw, 120px);
}


.sustainability-content h2 {
    max-width: 600px;
    margin-top: 30px;
    font-family: var(--font-display);
    font-size: clamp(43px, 4.7vw, 68px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.04;
}


.sustainability-content h2 em {
    display: block;
    color: var(--kwithu-gold);
    font-style: italic;
}


.sustainability-content p {
    max-width: 510px;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section {
    background: var(--kwithu-offwhite);
}


.gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 0.85fr;
    grid-template-rows: 300px 300px;
    gap: 15px;
}


.gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--kwithu-black);
}


.gallery-item-one {
    grid-row: span 2;
}


.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter var(--transition);
}


.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 0, 0, 0.68)
        );
}


.gallery-item:hover img {
    transform: scale(1.07);
    filter: brightness(0.85);
}


.gallery-overlay {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--kwithu-white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.gallery-overlay i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}


.gallery-item:hover .gallery-overlay i {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
    position: relative;
    min-height: 730px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--kwithu-white);
    text-align: center;
}


.final-cta-background {
    position: absolute;
    inset: 0;
}


.final-cta-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.final-cta-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(15, 14, 12, 0.78),
            rgba(15, 14, 12, 0.57),
            rgba(15, 14, 12, 0.75)
        );
}


.final-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
}


.final-cta-content .section-label {
    justify-content: center;
}


.final-cta-content h2 {
    max-width: 900px;
    margin-top: 27px;
    font-family: var(--font-display);
    font-size: clamp(55px, 7vw, 105px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}


.final-cta-content h2 em {
    display: block;
    color: var(--kwithu-gold);
    font-style: italic;
}


.final-cta-content p {
    max-width: 500px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
}


.final-cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 38px;
}


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

.site-footer {
    background: var(--kwithu-black);
    color: var(--kwithu-white);
    padding: 85px 0 30px;
}


.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 60px;
    padding-bottom: 75px;
    border-bottom: 1px solid var(--border-dark);
}


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


.footer-logo {
    display: inline-block;
}


.footer-logo img {
    width: 155px;
    max-height: 70px;
    object-fit: contain;
}


.footer-brand p {
    max-width: 280px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.8;
}


.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: var(--kwithu-gold);
    font-size: 12px;
    font-weight: 600;
}


.footer-whatsapp i {
    font-size: 17px;
}


.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.footer-column h3 {
    margin-bottom: 22px;
    color: var(--kwithu-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.footer-column a {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    transition:
        color var(--transition),
        transform var(--transition);
}


.footer-column a:hover {
    color: var(--kwithu-white);
    transform: translateX(4px);
}


.footer-contact p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 1.8;
}


.footer-contact > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--kwithu-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    padding-top: 25px;
}


.footer-bottom p {
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
}


.footer-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}


.footer-socials a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-dark);
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}


.footer-socials a:hover {
    background: var(--kwithu-gold);
    border-color: var(--kwithu-gold);
    color: var(--kwithu-black);
}


.footer-credit {
    justify-self: end;
    text-align: right;
}


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

.floating-whatsapp {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    background: var(--kwithu-black);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--kwithu-white);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.floating-whatsapp i {
    color: var(--kwithu-gold);
    font-size: 19px;
    transition: color var(--transition);
}


.floating-whatsapp:hover {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
    transform: translateY(-4px);
}


.floating-whatsapp:hover i {
    color: var(--kwithu-black);
}


/* =========================================================
   RESPONSIVE — LARGE LAPTOP
========================================================= */

@media (max-width: 1250px) {

    :root {
        --side-padding: 4vw;
    }


    .header-container {
        grid-template-columns: 160px 1fr 125px;
        width: calc(100% - 40px);
        gap: 20px;
    }


    .brand-logo img {
        width: 130px;
    }


    .main-navigation {
        gap: 20px;
    }


    .nav-link {
        font-size: 10px;
    }


    .header-cta {
        min-width: 110px;
        padding-inline: 13px;
    }


    .featured-grid {
        grid-template-columns: 1.2fr 0.9fr 0.9fr;
    }


    .craft-section,
    .sustainability-section {
        min-height: 680px;
    }


    .footer-top {
        gap: 40px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1024px) {

    .section-padding {
        padding: 100px 0;
    }


    .header-container {
        grid-template-columns: 1fr auto;
    }


    .main-navigation,
    .header-cta {
        display: none;
    }


    .menu-toggle {
        display: flex;
    }


    .hero-section {
        height: 850px;
    }


    .hero-content h1 {
        font-size: clamp(55px, 8vw, 82px);
    }


    .intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .intro-content {
        max-width: 900px;
    }


    .featured-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 540px 400px;
    }


    .featured-card-large {
        grid-row: auto;
        grid-column: span 2;
        min-height: 540px;
    }


    .craft-section,
    .sustainability-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }


    .craft-image,
    .sustainability-image {
        min-height: 550px;
    }


    .craft-content,
    .sustainability-content {
        min-height: 600px;
        padding: 90px 8vw;
    }


    .values-grid {
        grid-template-columns: 1fr;
    }


    .value-card {
        min-height: 320px;
        border-right: 0;
        border-bottom: 1px solid var(--border-light);
    }


    .value-card:last-child {
        border-bottom: 0;
    }


    .value-icon {
        margin-top: 45px;
    }


    .custom-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }


    .custom-content {
        max-width: 700px;
    }


    .custom-visual {
        min-height: 650px;
    }


    .custom-main-image {
        width: 87%;
    }


    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 420px 280px 280px;
    }


    .gallery-item-one {
        grid-row: span 1;
        grid-column: span 2;
    }


    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr;
    }


    .footer-contact {
        grid-column: span 3;
    }


    .hero-bottom-right {
        margin-right: 0;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {
        --side-padding: 25px;
    }


    body {
        font-size: 14px;
    }


    .page-container {
        width: calc(100% - 50px);
    }


    .section-padding {
        padding: 80px 0;
    }


    /* HEADER */

    .site-header {
        padding: 18px 0;
    }


    .site-header.scrolled {
        padding: 13px 0;
    }


    .header-container {
        width: calc(100% - 32px);
    }


    .brand-logo img {
        width: 125px;
        max-height: 55px;
    }


    .menu-toggle {
        width: 43px;
        height: 43px;
    }


    /* HERO */

    .hero-section {
        min-height: 760px;
        height: 100svh;
        max-height: 900px;
    }


    .hero-slide {
        background-position: 62% center;
    }


    .hero-slide-two {
        background-position: 55% center;
    }


    .hero-slide-three {
        background-position: 60% center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(10, 9, 8, 0.86) 0%,
                rgba(10, 9, 8, 0.58) 65%,
                rgba(10, 9, 8, 0.3) 100%
            ),
            linear-gradient(
                0deg,
                rgba(10, 9, 8, 0.62),
                transparent 55%
            );
    }


    .hero-content {
        padding-top: 55px;
    }


    .hero-eyebrow {
        margin-bottom: 21px;
        font-size: 8px;
        letter-spacing: 0.16em;
    }


    .eyebrow-line {
        width: 28px;
    }


    .hero-content h1 {
        max-width: 95%;
        font-size: clamp(48px, 14vw, 70px);
        line-height: 0.98;
    }


    .hero-content p {
        max-width: 450px;
        margin-top: 24px;
        font-size: 13px;
        line-height: 1.75;
    }


    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 310px);
        margin-top: 30px;
    }


    .btn {
        width: 100%;
        min-height: 52px;
    }


    .hero-slide-number {
        right: 25px;
        bottom: 110px;
    }


    .hero-navigation {
        right: 25px;
        bottom: 45px;
    }


    .hero-navigation button {
        width: 43px;
        height: 43px;
    }


    .hero-swiper .swiper-pagination {
        left: 25px;
        bottom: 66px;
    }


    .hero-bottom {
        left: 25px;
        right: 25px;
        bottom: 45px;
    }


    .hero-bottom-left {
        display: none;
    }


    .hero-bottom-right {
        margin: 0;
        margin-left: auto;
        font-size: 8px;
    }


    /* MOBILE MENU */

    .mobile-menu-inner {
        padding: 22px 25px;
    }


    .mobile-navigation a {
        grid-template-columns: 38px 1fr;
        padding: 16px 0;
        font-size: 31px;
    }


    /* HEADINGS */

    .section-heading-row {
        align-items: start;
        flex-direction: column;
        margin-bottom: 40px;
    }


    .section-title {
        margin-top: 15px;
        font-size: clamp(40px, 11vw, 54px);
    }


    .desktop-view-all {
        display: none;
    }


    /* INTRO */

    .intro-grid {
        gap: 27px;
    }


    .intro-content h2 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1.08;
    }


    .intro-bottom {
        grid-template-columns: 1fr;
        gap: 27px;
        margin-top: 38px;
    }


    .intro-bottom p {
        font-size: 13px;
    }


    /* COLLECTION */

    .featured-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 12px;
    }


    .featured-card,
    .featured-card-large {
        grid-column: auto;
        grid-row: auto;
        min-height: 430px;
    }


    .featured-card-large {
        min-height: 510px;
    }


    .featured-info {
        left: 21px;
        right: 21px;
        bottom: 20px;
    }


    .featured-info h3 {
        font-size: 26px;
    }


    .card-arrow {
        width: 39px;
        height: 39px;
    }


    .mobile-view-all {
        display: block;
    }


    /* CRAFT */

    .craft-image,
    .sustainability-image {
        min-height: 430px;
    }


    .craft-content,
    .sustainability-content {
        min-height: 520px;
        padding: 75px 25px;
    }


    .craft-content h2,
    .sustainability-content h2 {
        margin-top: 25px;
        font-size: clamp(40px, 11vw, 55px);
    }


    .craft-content p,
    .sustainability-content p {
        margin-top: 24px;
        font-size: 13px;
    }


    /* VALUES */

    .values-grid {
        margin-top: 45px;
    }


    .value-card {
        min-height: auto;
        padding: 35px 0 42px;
    }


    .value-icon {
        margin-top: 35px;
    }


    .value-card h3 {
        font-size: 26px;
    }


    /* CUSTOM */

    .custom-grid {
        gap: 55px;
    }


    .custom-content h2 {
        font-size: clamp(42px, 11vw, 58px);
    }


    .custom-content p {
        font-size: 13px;
    }


    .custom-visual {
        min-height: 470px;
    }


    .custom-main-image {
        width: 88%;
        height: 400px;
    }


    .custom-small-image {
        width: 47%;
        height: 190px;
        padding: 7px;
    }


    .custom-number {
        font-size: 55px;
    }


    /* GALLERY */

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 220px 220px;
        gap: 9px;
    }


    .gallery-item-one {
        grid-column: span 2;
    }


    .gallery-overlay {
        left: 15px;
        right: 15px;
        bottom: 14px;
        font-size: 8px;
    }


    .gallery-overlay i {
        width: 32px;
        height: 32px;
    }


    /* FINAL CTA */

    .final-cta {
        min-height: 650px;
    }


    .final-cta-content h2 {
        font-size: clamp(48px, 13vw, 70px);
    }


    .final-cta-content p {
        max-width: 400px;
        font-size: 13px;
    }


    .final-cta-actions {
        flex-direction: column;
        width: min(100%, 310px);
    }


    /* FOOTER */

    .site-footer {
        padding-top: 70px;
    }


    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 50px 25px;
        padding-bottom: 55px;
    }


    .footer-brand {
        grid-column: span 2;
    }


    .footer-contact {
        grid-column: span 2;
    }


    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    .footer-socials {
        order: 2;
    }


    .footer-credit {
        justify-self: start;
        text-align: left;
    }


    /* WHATSAPP */

    .floating-whatsapp {
        right: 18px;
        bottom: 18px;
        width: 49px;
        height: 49px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }


    .floating-whatsapp span {
        display: none;
    }


    .floating-whatsapp i {
        font-size: 21px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .page-container {
        width: calc(100% - 36px);
    }


    .header-container {
        width: calc(100% - 22px);
    }


    .hero-content h1 {
        font-size: 46px;
    }


    .hero-content p {
        font-size: 12px;
    }


    .section-title {
        font-size: 38px;
    }


    .intro-content h2 {
        font-size: 36px;
    }


    .featured-card,
    .featured-card-large {
        min-height: 390px;
    }


    .featured-card-large {
        min-height: 450px;
    }


    .craft-content,
    .sustainability-content {
        padding: 65px 22px;
    }


    .custom-main-image {
        height: 340px;
    }


    .custom-visual {
        min-height: 410px;
    }


    .custom-small-image {
        height: 165px;
    }


    .gallery-grid {
        grid-template-rows: 260px 190px 190px;
    }


    .mobile-navigation a {
        font-size: 28px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   FOCUS STATES
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--kwithu-gold);
    outline-offset: 4px;
}


/* =========================================================
   SWIPER SLIDE MOTION
========================================================= */

.hero-swiper .swiper-slide-active .hero-content {
    animation: heroContentIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}


@keyframes heroContentIn {

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

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

}


/* =========================================================
   IMAGE LOADING / VISUAL POLISH
========================================================= */

.featured-image img,
.gallery-item img,
.craft-image img,
.sustainability-image img,
.custom-main-image img,
.custom-small-image img,
.final-cta-background img {
    backface-visibility: hidden;
    transform: translateZ(0);
}


/* =========================================================
   END
========================================================= */




/* =========================================================
KWITHU FURNITURE
OUR STORY PAGE
MAIN PAGE STYLES
HEADER & FOOTER EXCLUDED
========================================================= */

/* =========================================================
ROOT VARIABLES
========================================================= */

:root {


--charcoal: #1D1C1A;
--charcoal-soft: #242321;
--charcoal-light: #302E2A;

--gold: #DC9E3F;
--gold-light: #E0A949;
--gold-soft: rgba(220, 158, 63, 0.16);

--cream: #F9F8F6;
--cream-dark: #F0EEE9;

--white: #FFFFFF;

--text: #575654;
--text-light: #85837F;

--border: rgba(29, 28, 26, 0.12);
--border-light: rgba(255, 255, 255, 0.16);

--shadow-soft: 0 20px 60px rgba(29, 28, 26, 0.08);
--shadow-medium: 0 30px 80px rgba(29, 28, 26, 0.14);

--serif: "Playfair Display", Georgia, serif;
--sans: "DM Sans", Arial, sans-serif;

--container: 1280px;

--section-space: clamp(90px, 9vw, 150px);


}

/* =========================================================
RESET
========================================================= */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;


background: var(--cream);
color: var(--charcoal);

font-family: var(--sans);

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

overflow-x: hidden;


}

img {
display: block;
width: 100%;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
}

::selection {
background: var(--gold);
color: var(--charcoal);
}

.page-container {
width: min(
calc(100% - 80px),
var(--container)
);


margin-inline: auto;


}

.section-padding {
padding-top: var(--section-space);
padding-bottom: var(--section-space);
}

/* =========================================================
SHARED TYPOGRAPHY
========================================================= */

.section-label {
display: inline-flex;
align-items: center;
gap: 14px;


margin-bottom: 28px;

color: var(--gold);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.22em;
text-transform: uppercase;


}

.section-label.light {
color: var(--gold-light);
}

.label-line {
display: inline-block;


width: 34px;
height: 1px;

background: currentColor;

flex: 0 0 auto;


}

h1,
h2,
h3 {
margin-top: 0;
}

h1,
h2 {
font-family: var(--serif);
font-weight: 500;
letter-spacing: -0.035em;
}

h1 em,
h2 em {
color: var(--gold);
font-style: italic;
font-weight: 500;
}

p {
color: var(--text);
font-size: 15px;
line-height: 1.9;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;


min-height: 56px;
padding: 0 27px;

border: 1px solid transparent;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.13em;
text-transform: uppercase;

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


}

.btn i {
font-size: 11px;


transition:
    transform 0.35s ease;


}

.btn:hover {
transform: translateY(-3px);
}

.btn:hover i {
transform: translateX(4px);
}

.btn-light {
background: var(--white);
color: var(--charcoal);
}

.btn-light:hover {
background: var(--gold);
}

.btn-gold {
background: var(--gold);
color: var(--charcoal);
}

.btn-gold:hover {
background: var(--gold-light);
}

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

.story-hero {
position: relative;


min-height: 92vh;
min-height: 92svh;

display: flex;
align-items: center;

overflow: hidden;

background: var(--charcoal);


}

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


background-image:
    url("https://images.unsplash.com/photo-1618220179428-22790b461013?auto=format&fit=crop&w=2200&q=90");

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

transform: scale(1.02);

animation: storyHeroZoom 14s ease-out forwards;


}

@keyframes storyHeroZoom {


from {
    transform: scale(1.08);
}

to {
    transform: scale(1);
}


}

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


background:
    linear-gradient(
        90deg,
        rgba(29, 28, 26, 0.91) 0%,
        rgba(29, 28, 26, 0.78) 38%,
        rgba(29, 28, 26, 0.42) 72%,
        rgba(29, 28, 26, 0.18) 100%
    );


}

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


padding-top: 100px;
padding-bottom: 100px;


}

.story-hero-content .section-label {
margin-bottom: 30px;
}

.story-hero-content h1 {
max-width: 830px;


margin-bottom: 28px;

color: var(--white);

font-size: clamp(
    58px,
    7vw,
    108px
);

line-height: 0.98;


}

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


color: var(--gold-light);


}

.story-hero-content p {
max-width: 610px;


margin: 0 0 40px;

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

font-size: 16px;
line-height: 1.85;


}

.hero-story-link {
display: inline-flex;
align-items: center;
gap: 15px;


color: var(--white);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.18em;
text-transform: uppercase;

transition:
    color 0.3s ease;


}

.hero-story-link i {
display: grid;
place-items: center;


width: 42px;
height: 42px;

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

font-size: 11px;

transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;


}

.hero-story-link:hover {
color: var(--gold-light);
}

.hero-story-link:hover i {
border-color: var(--gold);
background: var(--gold);
color: var(--charcoal);


transform: translateY(4px);


}

.story-hero-bottom {
position: absolute;
z-index: 3;


left: 50%;
bottom: 28px;

transform: translateX(-50%);

display: flex;
justify-content: space-between;

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

font-size: 9px;
font-weight: 700;

letter-spacing: 0.18em;
text-transform: uppercase;


}

.story-hero-bottom span:last-child {
color: rgba(255,255,255,0.42);
}

/* =========================================================
STORY INTRO
========================================================= */

.story-intro {
background: var(--cream);
}

.story-intro-grid {
display: grid;


grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

gap: clamp(55px, 8vw, 120px);

align-items: center;


}

.story-intro-image {
position: relative;


min-height: 680px;

overflow: hidden;

background: var(--cream-dark);


}

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


position: absolute;
z-index: 1;

top: 24px;
left: 24px;

width: 72px;
height: 72px;

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

pointer-events: none;


}

.story-intro-image img {
width: 100%;
height: 100%;
min-height: 680px;


object-fit: cover;

transition:
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);


}

.story-intro-image:hover img {
transform: scale(1.045);
}

.image-caption {
position: absolute;
z-index: 2;


left: 0;
right: 0;
bottom: 0;

display: flex;
flex-direction: column;

padding: 90px 38px 34px;

background:
    linear-gradient(
        to top,
        rgba(29,28,26,0.86),
        rgba(29,28,26,0)
    );


}

.image-caption span {
margin-bottom: 7px;


color: var(--gold-light);

font-size: 9px;
font-weight: 700;

letter-spacing: 0.2em;


}

.image-caption strong {
color: var(--white);


font-family: var(--serif);

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


}

.story-intro-content {
padding-right: 4%;
}

.story-intro-content h2 {
max-width: 650px;


margin-bottom: 30px;

font-size: clamp(
    42px,
    5vw,
    70px
);

line-height: 1.04;


}

.story-intro-content p {
max-width: 650px;


margin: 0 0 20px;


}

.story-intro-content .story-lead {
color: var(--charcoal);


font-size: 18px;
line-height: 1.8;


}

.story-signature {
display: flex;
align-items: center;
gap: 15px;


margin-top: 38px;

color: var(--charcoal);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.18em;
text-transform: uppercase;


}

.signature-line {
width: 46px;
height: 1px;


background: var(--gold);


}

/* =========================================================
FOUNDER SECTION
========================================================= */

.founder-section {
display: grid;


grid-template-columns:
    minmax(0, 0.94fr)
    minmax(0, 1.06fr);

min-height: 850px;

background: var(--charcoal);


}

.founder-image {
position: relative;


min-height: 760px;

overflow: hidden;


}

.founder-video-trigger {
position: absolute;
inset: 0;

width: 100%;
height: 100%;

padding: 0;

background: transparent;

text-align: left;
cursor: pointer;

}

.founder-video-trigger img {
position: absolute;
inset: 0;


width: 100%;
height: 100%;

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

filter: saturate(0.78);

transition:
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);


}

.founder-section:hover .founder-video-trigger img {
transform: scale(1.025);
}

.founder-play-icon {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;

display: grid;
width: 76px;
height: 76px;
place-items: center;

border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 50%;
background: var(--gold);
color: var(--black);
font-size: 20px;

transform: translate(-50%, -50%);
transition: transform var(--transition), background var(--transition);
}

.founder-video-trigger:hover .founder-play-icon {
background: var(--white);
transform: translate(-50%, -50%) scale(1.08);
}

.founder-video-label {
position: absolute;
left: 50%;
bottom: 125px;
z-index: 3;

padding: 8px 13px;

background: rgba(29, 28, 26, 0.78);
color: var(--white);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;

transform: translateX(-50%);
}

.founder-video-modal {
position: fixed;
inset: 0;
z-index: 3000;

display: grid;
padding: 24px;
place-items: center;

visibility: hidden;
opacity: 0;
transition: opacity var(--transition), visibility var(--transition);
}

.founder-video-modal.active {
visibility: visible;
opacity: 1;
}

.founder-video-backdrop {
position: absolute;
inset: 0;
background: rgba(17, 17, 15, 0.9);
}

.founder-video-dialog {
position: relative;
z-index: 1;
width: min(960px, 100%);
background: var(--black);
box-shadow: var(--shadow-heavy);
}

.founder-video-dialog video {
display: block;
width: 100%;
max-height: 80vh;
background: var(--black);
}

.founder-video-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;

display: grid;
width: 40px;
height: 40px;
place-items: center;

background: rgba(29, 28, 26, 0.8);
color: var(--white);
font-size: 18px;
}

.founder-video-close:hover {
background: var(--gold);
color: var(--black);
}

.founder-image-overlay {
position: absolute;
inset: 0;

pointer-events: none;


background:
    linear-gradient(
        180deg,
        rgba(29,28,26,0.06) 30%,
        rgba(29,28,26,0.76) 100%
    );


}

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


position: absolute;

top: 30px;
left: 30px;

width: 100px;
height: 100px;

border-top: 1px solid rgba(220,158,63,0.8);
border-left: 1px solid rgba(220,158,63,0.8);


}

.founder-image-caption {
position: absolute;
z-index: 2;


left: 44px;
bottom: 44px;

display: flex;
flex-direction: column;


}

.founder-image-caption span {
margin-bottom: 10px;


color: var(--gold-light);

font-size: 9px;
font-weight: 700;

letter-spacing: 0.22em;


}

.founder-image-caption strong {
color: var(--white);


font-family: var(--serif);

font-size: clamp(30px, 3vw, 44px);
font-weight: 500;


}

.founder-image-caption small {
margin-top: 7px;


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

font-size: 10px;
font-weight: 600;

letter-spacing: 0.14em;
text-transform: uppercase;


}

.founder-content {
display: flex;
align-items: center;


padding:
    clamp(70px, 8vw, 130px)
    clamp(40px, 8vw, 120px);


}

.founder-content-inner {
max-width: 700px;
}

.founder-content h2 {
margin-bottom: 28px;


color: var(--white);

font-size: clamp(
    48px,
    5vw,
    78px
);

line-height: 1;


}

.founder-content h2 em {
display: block;
}

.founder-content p {
color: rgba(255,255,255,0.64);


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


}

.founder-content .founder-lead {
margin-bottom: 25px;


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

font-size: 18px;
line-height: 1.8;


}

.founder-quote {
position: relative;


margin-top: 38px;
padding: 34px 36px 32px;

border-top: 1px solid rgba(220,158,63,0.5);
border-bottom: 1px solid rgba(255,255,255,0.1);


}

.quote-mark {
position: absolute;


top: 17px;
left: 0;

color: var(--gold);

font-family: Georgia, serif;

font-size: 58px;
line-height: 1;


}

.founder-quote p {
margin: 0;
padding-left: 20px;


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

font-family: var(--serif);

font-size: 20px;
font-style: italic;
line-height: 1.7;


}

.founder-details {
display: grid;


grid-template-columns: 1fr 1fr;

gap: 35px;

margin-top: 34px;


}

.founder-details > div {
display: flex;
flex-direction: column;
gap: 6px;
}

.founder-details strong {
color: var(--white);


font-size: 11px;

letter-spacing: 0.12em;
text-transform: uppercase;


}

.founder-details span {
color: rgba(255,255,255,0.43);


font-size: 11px;


}

/* =========================================================
FOUNDER JOURNEY
========================================================= */

.journey-section {
background: var(--cream-dark);
}

.section-heading-row {
display: grid;


grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, 0.8fr);

gap: 80px;

align-items: end;

margin-bottom: 85px;


}

.section-title {
max-width: 760px;


margin: 0;

font-size: clamp(
    44px,
    5vw,
    72px
);

line-height: 1;


}

.section-heading-description {
max-width: 470px;


margin: 0;

color: var(--text);

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


}

.journey-timeline {
position: relative;
}

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


position: absolute;

top: 0;
bottom: 0;
left: 31px;

width: 1px;

background: var(--border);


}

.journey-item {
position: relative;


display: grid;

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

column-gap: 30px;

padding-bottom: 75px;


}

.journey-item:last-child {
padding-bottom: 0;
}

.journey-number {
position: relative;
z-index: 2;


display: grid;
place-items: center;

width: 64px;
height: 64px;

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

background: var(--cream-dark);

color: var(--gold);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.08em;


}

.journey-line {
width: 1px;


background: var(--gold);

opacity: 0.65;


}

.journey-content {
padding-top: 7px;


max-width: 760px;


}

.journey-period {
display: block;


margin-bottom: 12px;

color: var(--gold);

font-size: 9px;
font-weight: 700;

letter-spacing: 0.2em;


}

.journey-content h3 {
margin-bottom: 12px;


color: var(--charcoal);

font-family: var(--serif);

font-size: clamp(27px, 2.6vw, 38px);
font-weight: 500;

letter-spacing: -0.025em;


}

.journey-content p {
max-width: 690px;


margin: 0;

font-size: 14px;


}

/* =========================================================
CRAFT SECTION
========================================================= */

.story-craft-section {
display: grid;


grid-template-columns:
    minmax(0, 1.12fr)
    minmax(0, 0.88fr);

min-height: 720px;

background: var(--charcoal);


}

.story-craft-image {
position: relative;


min-height: 650px;

overflow: hidden;


}

.story-craft-image img {
width: 100%;
height: 100%;
min-height: 650px;


object-fit: cover;

transition:
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);


}

.story-craft-section:hover .story-craft-image img {
transform: scale(1.04);
}

.story-craft-image::after {
content: "";


position: absolute;
inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(29,28,26,0.05),
        rgba(29,28,26,0.35)
    );


}

.story-craft-content {
display: flex;
flex-direction: column;
justify-content: center;


padding:
    clamp(65px, 8vw, 125px)
    clamp(45px, 7vw, 105px);


}

.story-craft-content h2 {
margin-bottom: 28px;


color: var(--white);

font-size: clamp(
    45px,
    4.7vw,
    72px
);

line-height: 1.01;


}

.story-craft-content h2 em {
display: block;
}

.story-craft-content p {
max-width: 600px;


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

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


}

.story-craft-content .light-link {
display: inline-flex;
align-items: center;
gap: 13px;


width: fit-content;

margin-top: 25px;

color: var(--white);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.16em;
text-transform: uppercase;

transition:
    color 0.3s ease;


}

.light-link i {
transition:
transform 0.3s ease;
}

.light-link:hover {
color: var(--gold-light);
}

.light-link:hover i {
transform: translateX(6px);
}

/* =========================================================
SUSTAINABILITY STORY
========================================================= */

.sustainability-story {
background: var(--cream);
}

.sustainability-story-grid {
display: grid;


grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

gap: clamp(60px, 9vw, 130px);

align-items: center;


}

.sustainability-story-content h2 {
max-width: 650px;


margin-bottom: 28px;

font-size: clamp(
    44px,
    5vw,
    72px
);

line-height: 1.02;


}

.sustainability-story-content h2 em {
display: block;
}

.sustainability-story-content .story-lead {
color: var(--charcoal);


font-size: 18px;
line-height: 1.8;


}

.sustainability-story-content > p {
max-width: 620px;
}

.sustainability-points {
margin-top: 40px;
}

.sustainability-point {
display: grid;


grid-template-columns: 42px 1fr;

gap: 18px;

padding: 22px 0;

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


}

.sustainability-point:last-child {
border-bottom: 1px solid var(--border);
}

.sustainability-point > span {
color: var(--gold);


font-size: 10px;
font-weight: 700;

padding-top: 4px;


}

.sustainability-point strong {
display: block;


margin-bottom: 5px;

color: var(--charcoal);

font-size: 12px;
font-weight: 700;

letter-spacing: 0.05em;
text-transform: uppercase;


}

.sustainability-point p {
margin: 0;


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


}

.sustainability-story-images {
position: relative;


min-height: 720px;


}

.sustainability-main-image {
position: absolute;


top: 0;
right: 0;

width: 84%;
height: 620px;

overflow: hidden;


}

.sustainability-main-image img {
width: 100%;
height: 100%;


object-fit: cover;

transition:
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);


}

.sustainability-story-images:hover
.sustainability-main-image img {
transform: scale(1.04);
}

.sustainability-small-image {
position: absolute;


left: 0;
bottom: 0;

width: 47%;
height: 300px;

z-index: 2;

overflow: hidden;

border: 12px solid var(--cream);


}

.sustainability-small-image img {
width: 100%;
height: 100%;


object-fit: cover;


}

.sustainability-number {
position: absolute;


right: 4%;
bottom: 22px;

z-index: 3;

color: rgba(29,28,26,0.13);

font-family: var(--serif);

font-size: 100px;
line-height: 1;


}

/* =========================================================
MISSION / VISION
========================================================= */

.mission-story-section {
padding:
clamp(90px, 9vw, 140px)
0;


background: var(--charcoal);


}

.mission-story-header {
max-width: 850px;


margin-bottom: 75px;


}

.mission-story-header h2 {
margin: 0;


color: var(--white);

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

line-height: 1;


}

.mission-story-header h2 em {
display: inline-block;
}

.mission-story-grid {
display: grid;


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

gap: 1px;

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

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


}

.mission-story-card {
position: relative;


min-height: 390px;

padding: 45px 40px;

background: var(--charcoal);

transition:
    background-color 0.4s ease;


}

.mission-story-card:hover {
background: var(--charcoal-soft);
}

.mission-card-number {
position: absolute;


top: 35px;
right: 35px;

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

font-size: 9px;
font-weight: 700;

letter-spacing: 0.16em;


}

.mission-story-card > i {
display: flex;
align-items: center;
justify-content: center;


width: 58px;
height: 58px;

margin-bottom: 80px;

border: 1px solid rgba(220,158,63,0.4);

color: var(--gold);

font-size: 17px;

transition:
    background-color 0.3s ease,
    color 0.3s ease;


}

.mission-story-card:hover > i {
background: var(--gold);
color: var(--charcoal);
}

.mission-story-card h3 {
margin-bottom: 14px;


color: var(--white);

font-family: var(--serif);

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


}

.mission-story-card p {
max-width: 400px;


margin: 0;

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

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


}

/* =========================================================
STORY VALUES
========================================================= */

.story-values {
background: var(--cream-dark);
}

.story-values-header {
max-width: 760px;


margin-bottom: 70px;


}

.story-values-header h2 {
margin: 0;


font-size: clamp(
    46px,
    5.5vw,
    76px
);

line-height: 1;


}

.story-values-header h2 em {
display: inline-block;
}

.story-values-grid {
display: grid;


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

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


}

.story-value-card {
min-height: 330px;


padding: 34px 30px;

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

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


}

.story-value-card:hover {
background: var(--cream);


transform: translateY(-5px);


}

.story-value-card > span {
display: block;


margin-bottom: 90px;

color: var(--gold);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.15em;


}

.story-value-card h3 {
margin-bottom: 14px;


color: var(--charcoal);

font-family: var(--serif);

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

line-height: 1.15;


}

.story-value-card p {
margin: 0;


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


}

/* =========================================================
IMPACT STORY
========================================================= */

.impact-story-section {
position: relative;


min-height: 760px;

display: flex;
align-items: center;

overflow: hidden;

background: var(--charcoal);


}

.impact-story-image {
position: absolute;
inset: 0;
}

.impact-story-image img {
width: 100%;
height: 100%;


object-fit: cover;


}

.impact-story-overlay {
position: absolute;
inset: 0;


background:
    linear-gradient(
        90deg,
        rgba(29,28,26,0.93) 0%,
        rgba(29,28,26,0.78) 40%,
        rgba(29,28,26,0.35) 100%
    );


}

.impact-story-content {
position: relative;
z-index: 2;


padding-top: 110px;
padding-bottom: 110px;


}

.impact-story-content h2 {
max-width: 850px;


margin-bottom: 28px;

color: var(--white);

font-size: clamp(
    50px,
    6.2vw,
    90px
);

line-height: 0.98;


}

.impact-story-content h2 em {
display: block;
}

.impact-story-content > p {
max-width: 620px;


margin-bottom: 55px;

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

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


}

.impact-story-statements {
display: flex;


gap: 0;

max-width: 780px;

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


}

.impact-story-statements > div {
flex: 1;


display: flex;
flex-direction: column;

gap: 6px;

padding: 25px 35px;

border-right: 1px solid rgba(255,255,255,0.13);


}

.impact-story-statements > div:first-child {
padding-left: 0;
}

.impact-story-statements > div:last-child {
border-right: 0;
}

.impact-story-statements strong {
color: var(--gold-light);


font-family: var(--serif);

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


}

.impact-story-statements span {
color: rgba(255,255,255,0.45);


font-size: 9px;
font-weight: 700;

letter-spacing: 0.15em;
text-transform: uppercase;


}

/* =========================================================
FINAL STORY CTA
========================================================= */

.story-final-cta {
position: relative;


min-height: 680px;

display: flex;
align-items: center;

overflow: hidden;

background: var(--charcoal);


}

.story-final-background {
position: absolute;
inset: 0;


background-image:
    url("https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=2200&q=90");

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


}

.story-final-overlay {
position: absolute;
inset: 0;


background:
    linear-gradient(
        90deg,
        rgba(29,28,26,0.92),
        rgba(29,28,26,0.68),
        rgba(29,28,26,0.42)
    );


}

.story-final-content {
position: relative;
z-index: 2;
}

.story-final-content h2 {
max-width: 850px;


margin-bottom: 28px;

color: var(--white);

font-size: clamp(
    55px,
    7vw,
    105px
);

line-height: 0.95;


}

.story-final-content h2 em {
display: block;
}

.story-final-content > p {
max-width: 620px;


margin-bottom: 38px;

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

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


}

.story-final-actions {
display: flex;
flex-wrap: wrap;


gap: 12px;


}

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

.floating-whatsapp {
position: fixed;


right: 24px;
bottom: 24px;

z-index: 900;

display: inline-flex;
align-items: center;
gap: 10px;

min-height: 52px;
padding: 0 18px;

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

background: var(--charcoal);

color: var(--white);

box-shadow:
    0 14px 40px rgba(0,0,0,0.2);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.08em;
text-transform: uppercase;

transition:
    transform 0.3s ease,
    background-color 0.3s ease;


}

.floating-whatsapp i {
color: #25D366;


font-size: 18px;


}

.floating-whatsapp:hover {
transform: translateY(-4px);


background: #252421;


}

/* =========================================================
RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1100px) {


.page-container {
    width: min(
        calc(100% - 60px),
        var(--container)
    );
}


.story-intro-grid {
    gap: 55px;
}


.story-intro-image,
.story-intro-image img {
    min-height: 580px;
}


.founder-content {
    padding:
        80px 60px;
}


.mission-story-card {
    padding: 38px 30px;
}


.story-value-card {
    padding: 30px 25px;
}


}

/* =========================================================
RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {


.page-container {
    width: calc(100% - 48px);
}


.story-hero {
    min-height: 820px;
}


.story-hero-background {
    background-position: 58% center;
}


.story-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(29,28,26,0.92),
            rgba(29,28,26,0.66)
        );
}


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

    gap: 55px;
}


.story-intro-image,
.story-intro-image img {
    min-height: 650px;
}


.story-intro-content {
    padding-right: 0;
}


.founder-section {
    grid-template-columns: 1fr;
}


.founder-image {
    min-height: 700px;
}


.founder-content {
    padding:
        90px 48px;
}


.section-heading-row {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 60px;
}


.story-craft-section {
    grid-template-columns: 1fr;
}


.story-craft-image,
.story-craft-image img {
    min-height: 600px;
}


.story-craft-content {
    padding:
        85px 48px;
}


.sustainability-story-grid {
    grid-template-columns: 1fr;

    gap: 70px;
}


.sustainability-story-images {
    min-height: 700px;
}


.mission-story-grid {
    grid-template-columns: 1fr;
}


.mission-story-card {
    min-height: 330px;
}


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


.impact-story-section {
    min-height: 720px;
}


.impact-story-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(29,28,26,0.93),
            rgba(29,28,26,0.68)
        );
}


}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {


.page-container {
    width: calc(100% - 34px);
}


.section-padding {
    padding-top: 82px;
    padding-bottom: 82px;
}


.section-label {
    margin-bottom: 22px;

    font-size: 9px;
    letter-spacing: 0.17em;
}


.label-line {
    width: 27px;
}


/* HERO */

.story-hero {
    min-height: 760px;
}


.story-hero-background {
    background-position: 62% center;
}


.story-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(29,28,26,0.95),
            rgba(29,28,26,0.73)
        );
}


.story-hero-content {
    padding-top: 120px;
    padding-bottom: 100px;
}


.story-hero-content h1 {
    margin-bottom: 24px;

    font-size:
        clamp(48px, 14vw, 70px);

    line-height: 0.96;
}


.story-hero-content p {
    max-width: 500px;

    font-size: 14px;
}


.story-hero-bottom {
    width: calc(100% - 34px);

    bottom: 20px;

    font-size: 8px;
}


/* INTRO */

.story-intro-grid {
    gap: 45px;
}


.story-intro-image,
.story-intro-image img {
    min-height: 480px;
}


.story-intro-image::before {
    top: 16px;
    left: 16px;

    width: 50px;
    height: 50px;
}


.image-caption {
    padding:
        80px 22px 23px;
}


.image-caption strong {
    font-size: 21px;
}


.story-intro-content h2 {
    font-size:
        clamp(39px, 11vw, 56px);
}


.story-intro-content .story-lead {
    font-size: 16px;
}


/* FOUNDER */

.founder-image {
    min-height: 580px;
}


.founder-image::after {
    top: 18px;
    left: 18px;

    width: 65px;
    height: 65px;
}


.founder-image-caption {
    left: 24px;
    bottom: 27px;
}


.founder-image-caption strong {
    font-size: 32px;
}


.founder-content {
    padding:
        75px 24px;
}


.founder-content h2 {
    font-size:
        clamp(42px, 12vw, 60px);
}


.founder-content .founder-lead {
    font-size: 16px;
}


.founder-quote {
    padding:
        30px 22px 25px;
}


.founder-quote p {
    padding-left: 10px;

    font-size: 18px;
}


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

    gap: 20px;
}


/* JOURNEY */

.section-heading-row {
    margin-bottom: 50px;
}


.section-title {
    font-size:
        clamp(40px, 11vw, 56px);
}


.journey-timeline::before {
    left: 25px;
}


.journey-item {
    grid-template-columns:
        50px
        1px
        minmax(0, 1fr);

    column-gap: 20px;

    padding-bottom: 55px;
}


.journey-number {
    width: 50px;
    height: 50px;
}


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


.journey-content p {
    font-size: 13px;
}


/* CRAFT */

.story-craft-image,
.story-craft-image img {
    min-height: 460px;
}


.story-craft-content {
    padding:
        75px 24px;
}


.story-craft-content h2 {
    font-size:
        clamp(42px, 11vw, 58px);
}


/* SUSTAINABILITY */

.sustainability-story-grid {
    gap: 55px;
}


.sustainability-story-content h2 {
    font-size:
        clamp(41px, 11vw, 58px);
}


.sustainability-story-content .story-lead {
    font-size: 16px;
}


.sustainability-story-images {
    min-height: 530px;
}


.sustainability-main-image {
    width: 88%;
    height: 420px;
}


.sustainability-small-image {
    width: 53%;
    height: 205px;

    border-width: 8px;
}


.sustainability-number {
    right: 0;
    bottom: 0;

    font-size: 72px;
}


/* MISSION */

.mission-story-section {
    padding:
        82px 0;
}


.mission-story-header {
    margin-bottom: 48px;
}


.mission-story-header h2 {
    font-size:
        clamp(43px, 12vw, 62px);
}


.mission-story-card {
    min-height: 330px;

    padding: 35px 27px;
}


.mission-story-card > i {
    margin-bottom: 65px;
}


.mission-story-card h3 {
    font-size: 27px;
}


/* VALUES */

.story-values-header {
    margin-bottom: 50px;
}


.story-values-header h2 {
    font-size:
        clamp(42px, 11vw, 59px);
}


.story-values-grid {
    grid-template-columns: 1fr;
}


.story-value-card {
    min-height: 285px;

    padding: 28px 25px;
}


.story-value-card > span {
    margin-bottom: 65px;
}


/* IMPACT */

.impact-story-section {
    min-height: 700px;
}


.impact-story-image img {
    object-position: 62% center;
}


.impact-story-content {
    padding-top: 85px;
    padding-bottom: 85px;
}


.impact-story-content h2 {
    font-size:
        clamp(46px, 13vw, 70px);
}


.impact-story-content > p {
    font-size: 14px;
}


.impact-story-statements {
    flex-direction: column;
}


.impact-story-statements > div,
.impact-story-statements > div:first-child {
    padding: 18px 0;

    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.13);
}


.impact-story-statements > div:last-child {
    border-bottom: 0;
}


/* FINAL CTA */

.story-final-cta {
    min-height: 650px;
}


.story-final-content h2 {
    font-size:
        clamp(49px, 14vw, 75px);
}


.story-final-content > p {
    font-size: 14px;
}


.story-final-actions {
    flex-direction: column;
    align-items: stretch;
}


.story-final-actions .btn {
    width: 100%;
}


/* WHATSAPP */

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

    width: 52px;
    min-height: 52px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;
}


.floating-whatsapp span {
    display: none;
}


.floating-whatsapp i {
    font-size: 20px;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 380px) {


.page-container {
    width: calc(100% - 28px);
}


.story-hero-content h1 {
    font-size: 45px;
}


.story-hero-content p {
    font-size: 13px;
}


.founder-content {
    padding-inline: 20px;
}


.story-craft-content {
    padding-inline: 20px;
}


.mission-story-card {
    padding-inline: 22px;
}


.story-final-content h2 {
    font-size: 47px;
}


}

/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */

:focus-visible {
outline: 2px solid var(--gold);


outline-offset: 4px;


}

@media (prefers-reduced-motion: reduce) {


html {
    scroll-behavior: auto;
}


*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}


}






/* =========================================================
   KWITHU FURNITURE
   COLLECTION PAGE
   PREMIUM INTERNATIONAL FURNITURE STYLE

   NOTE:
   ---------------------------------------------------------
   Header and footer styles intentionally excluded.
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --charcoal: #1D1C1A;
    --charcoal-deep: #151412;
    --charcoal-soft: #242321;

    --offwhite: #F9F8F6;
    --white: #FFFFFF;

    --gold: #DC9E3F;
    --gold-light: #E7B65D;
    --gold-dark: #B97D25;

    --muted: #575654;
    --muted-light: #8B8985;

    --line: rgba(29, 28, 26, 0.12);
    --line-light: rgba(255, 255, 255, 0.14);

    --container: 1320px;

    --heading-font: "Playfair Display", Georgia, serif;
    --body-font: "DM Sans", Arial, sans-serif;

    --transition:
        300ms cubic-bezier(.22, .61, .36, 1);

    --transition-slow:
        700ms cubic-bezier(.22, .61, .36, 1);

}


/* =========================================================
   RESET / PAGE BASE
========================================================= */

html {
    scroll-behavior: smooth;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 0;

    background: var(--offwhite);

    color: var(--charcoal);

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

    font-size: 16px;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


body.modal-open,
body.mobile-menu-open {

    overflow: hidden;

}


img {

    display: block;

    max-width: 100%;

}


button,
input {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

    text-decoration: none;

}


::selection {

    background: var(--gold);

    color: var(--charcoal);

}


/* =========================================================
   CONTAINER
========================================================= */

.page-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.section-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 26px;

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.22em;

    line-height: 1;

    text-transform: uppercase;

}


.section-label.light {

    color: var(--gold-light);

}


.label-line {

    width: 42px;

    height: 1px;

    flex: 0 0 42px;

    background: currentColor;

}


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

.collection-hero {

    position: relative;

    min-height: 88vh;

    min-height: 88svh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--charcoal);

    color: var(--white);

}


.collection-hero-background {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #302a20 0%,
            #211f1a 48%,
            #11110f 100%
        );

}


.collection-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15, 14, 12, .82) 0%,
            rgba(15, 14, 12, .62) 42%,
            rgba(15, 14, 12, .28) 100%
        );

}


.collection-hero-content {

    position: relative;

    z-index: 2;

    padding-top: 100px;

    padding-bottom: 150px;

}


.collection-hero-content h1 {

    max-width: 820px;

    margin: 0;

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

    font-size: clamp(
        58px,
        7vw,
        112px
    );

    font-weight: 500;

    letter-spacing: -0.045em;

    line-height: .98;

}


.collection-hero-content h1 em {

    color: var(--gold-light);

    font-style: italic;

}


.collection-hero-content p {

    max-width: 620px;

    margin: 34px 0 0;

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

    font-size: 17px;

    line-height: 1.85;

}


.collection-hero-bottom {

    position: absolute;

    z-index: 3;

    right: 0;

    bottom: 0;

    left: 0;

    display: grid;

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

    padding-top: 24px;

    padding-bottom: 24px;

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

}


.collection-hero-bottom span {

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

}


.collection-hero-bottom span:nth-child(2) {

    text-align: center;

}


.collection-hero-bottom span:nth-child(3) {

    text-align: right;

}


/* =========================================================
   COLLECTION INTRO
========================================================= */

.collection-intro {

    padding: 130px 0 100px;

    background: var(--offwhite);

}


.collection-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap: 100px;

    align-items: end;

}


.collection-intro-heading h2 {

    max-width: 680px;

    margin: 0;

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

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

    font-weight: 500;

    letter-spacing: -.04em;

    line-height: 1.02;

}


.collection-intro-heading h2 em {

    color: var(--gold-dark);

    font-style: italic;

}


.collection-intro-copy {

    max-width: 650px;

}


.collection-intro-copy p {

    margin: 0 0 22px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.9;

}


.collection-intro-copy p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   COLLECTION SECTION
========================================================= */

.collection-section {

    padding: 45px 0 140px;

    background: var(--offwhite);

}


/* =========================================================
   COLLECTION CONTROLS
========================================================= */

.collection-controls {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 52px;

    padding-bottom: 30px;

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

}


.collection-filter-wrap {

    min-width: 0;

}


.collection-filter-label {

    margin-bottom: 17px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;

}


.collection-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.collection-filter {

    position: relative;

    border: 1px solid
        rgba(29, 28, 26, .16);

    border-radius: 100px;

    padding: 11px 18px;

    background: transparent;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .03em;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


.collection-filter:hover {

    border-color: var(--gold);

    color: var(--charcoal);

    transform: translateY(-2px);

}


.collection-filter.active {

    border-color: var(--charcoal);

    background: var(--charcoal);

    color: var(--white);

}


.collection-search {

    position: relative;

    width: min(100%, 300px);

    flex: 0 0 300px;

}


.collection-search i {

    position: absolute;

    top: 50%;

    left: 18px;

    color: var(--muted);

    font-size: 13px;

    transform: translateY(-50%);

    pointer-events: none;

}


.collection-search input {

    width: 100%;

    height: 48px;

    border: 1px solid
        rgba(29, 28, 26, .16);

    border-radius: 0;

    outline: none;

    padding: 0 18px 0 46px;

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

    color: var(--charcoal);

    font-size: 13px;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}


.collection-search input::placeholder {

    color: #96938e;

}


.collection-search input:focus {

    border-color: var(--gold);

    background: var(--white);

    box-shadow:
        0 0 0 4px
        rgba(220, 158, 63, .09);

}


/* =========================================================
   COLLECTION GRID
========================================================= */

.collection-grid {

    display: grid;

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

    gap: 28px;

}


/* =========================================================
   COLLECTION CARD
========================================================= */

.collection-card {

    min-width: 0;

}


.collection-card-button {

    width: 100%;

    display: block;

    border: 0;

    padding: 0;

    background: transparent;

    color: inherit;

    text-align: left;

}


.collection-card-image {

    position: relative;

    aspect-ratio: 1 / 1.13;

    overflow: hidden;

    background: #e9e6e1;

}


.collection-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(20, 18, 15, .36) 100%
        );

    opacity: 0;

    transition:
        opacity var(--transition);

    pointer-events: none;

}


.collection-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 900ms
        cubic-bezier(.22, .61, .36, 1);

}


.collection-card-view {

    position: absolute;

    z-index: 2;

    right: 20px;

    bottom: 20px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

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

    color: var(--charcoal);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity var(--transition),
        transform var(--transition);

}


.collection-card-view i {

    color: var(--gold-dark);

    font-size: 10px;

}


.collection-card-button:hover
.collection-card-image img {

    transform: scale(1.055);

}


.collection-card-button:hover
.collection-card-image::after {

    opacity: 1;

}


.collection-card-button:hover
.collection-card-view {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   COLLECTION CARD CONTENT
========================================================= */

.collection-card-content {

    padding: 20px 2px 26px;

}


.collection-card-category {

    display: block;

    margin-bottom: 7px;

    color: var(--gold-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

}


.collection-card-content h3 {

    margin: 0;

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

    font-size: 25px;

    font-weight: 500;

    letter-spacing: -.025em;

    line-height: 1.25;

}


.collection-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 15px;

}


.collection-card-price {

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.collection-card-arrow {

    width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(29, 28, 26, .16);

    border-radius: 50%;

    color: var(--charcoal);

    font-size: 12px;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);

}


.collection-card-button:hover
.collection-card-arrow {

    border-color: var(--gold);

    background: var(--gold);

    transform: translateX(4px);

}


/* =========================================================
   EMPTY COLLECTION STATE
========================================================= */

.collection-empty {

    grid-column: 1 / -1;

    padding: 90px 30px;

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

    text-align: center;

}


.collection-empty i {

    margin-bottom: 20px;

    color: var(--gold);

    font-size: 28px;

}


.collection-empty h3 {

    margin: 0 0 8px;

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

    font-size: 30px;

    font-weight: 500;

}


.collection-empty p {

    margin: 0;

    color: var(--muted);

}


/* =========================================================
   COLLECTION SHOPPING CONTROLS AND PRODUCT CARDS
========================================================= */

.collection-section .collection-filter-btn {

    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    color: var(--muted);
    font: 600 12px/1.2 var(--body-font);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);

}


.collection-section .collection-filter-btn:hover,
.collection-section .collection-filter-btn:focus-visible {

    border-color: var(--gold-dark);
    color: var(--charcoal);
    outline: none;

}


.collection-section .collection-filter-btn.active {

    border-color: var(--charcoal);
    background: var(--charcoal);
    color: var(--white);

}


.collection-section .collection-filter-btn:focus-visible,
.collection-section .currency-btn:focus-visible,
.collection-section .collection-card-enquire:focus-visible {

    outline: 3px solid rgba(220, 158, 63, .42);
    outline-offset: 3px;

}


.collection-section .collection-currency-bar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

}


.collection-section .currency-info {

    display: grid;
    gap: 2px;

}


.collection-section .currency-label {

    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 700;

}


.collection-section .currency-label i {

    color: var(--gold-dark);

}


.collection-section .currency-note {

    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;

}


.collection-section .currency-switcher {

    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #efede9;

}


.collection-section .currency-btn {

    min-width: 94px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);

}


.collection-section .currency-btn.active {

    border-color: var(--line);
    background: var(--white);
    color: var(--charcoal);
    box-shadow: 0 2px 8px rgba(29, 28, 26, .07);

}


.collection-section .currency-code {

    font-size: 11px;
    font-weight: 800;

}


.collection-section .currency-name {

    font-size: 11px;
    font-weight: 500;

}


.collection-section .collection-results-meta {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    color: var(--muted);
    font-size: 12px;

}


.collection-section .collection-current-currency {

    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--white);
    color: var(--charcoal);
    font-weight: 600;

}


.collection-section .collection-card {

    overflow: hidden;
    border: 1px solid rgba(29, 28, 26, .08);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 3px 14px rgba(29, 28, 26, .035);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}


.collection-section .collection-card-image {

    aspect-ratio: 1 / 1.04;

}


.collection-section .collection-card-overlay {

    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(transparent, rgba(21, 20, 18, .78));
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;

}


.collection-section .collection-card-overlay i {

    color: var(--gold-light);

}


.collection-section .collection-card-content {

    padding: 18px 19px 19px;

}


.collection-section .collection-card-category {

    width: fit-content;
    margin-bottom: 9px;
    padding: 4px 8px;
    border-radius: 2px;
    background: rgba(220, 158, 63, .12);
    color: var(--gold-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;

}


.collection-section .collection-card-content h3 {

    font-size: 22px;
    letter-spacing: 0;
    line-height: 1.3;

}


.collection-section .collection-card-collection {

    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;

}


.collection-section .collection-card-description {

    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

}


.collection-section .collection-card-bottom {

    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);

}


.collection-section .collection-card-price {

    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--charcoal);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;

}


.collection-section .currency-symbol {

    color: var(--muted);
    font-size: 12px;
    font-weight: 600;

}


.collection-section .collection-card-enquire {

    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    padding: 9px 13px;
    border-radius: 3px;
    background: #176b4d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: background var(--transition), transform var(--transition);

}


.collection-section .collection-card-enquire:hover {

    background: #10563d;
    transform: translateY(-1px);

}


@media (hover: hover) and (pointer: fine) {

    .collection-section .collection-card:hover {

        transform: translateY(-3px);
        border-color: rgba(220, 158, 63, .35);
        box-shadow: 0 14px 32px rgba(29, 28, 26, .1);

    }


    .collection-section .collection-card:hover .collection-card-image::after,
    .collection-section .collection-card:focus-within .collection-card-image::after {

        opacity: 1;

    }


    .collection-section .collection-card:hover .collection-card-overlay,
    .collection-section .collection-card:focus-within .collection-card-overlay {

        opacity: 1;
        transform: translateY(0);

    }

}


@media (hover: none) {

    .collection-section .collection-card-overlay {

        opacity: 1;
        transform: none;

    }

}


@media (max-width: 680px) {

    .collection-section .collection-currency-bar {

        align-items: stretch;
        flex-direction: column;
        gap: 14px;

    }


    .collection-section .currency-switcher {

        width: 100%;

    }


    .collection-section .currency-btn {

        min-width: 0;
        flex: 1 1 0;
        flex-direction: column;
        gap: 1px;
        padding: 7px 5px;

    }


    .collection-section .collection-card-content {

        padding: 16px;

    }

}


/* =========================================================
   PRODUCT MODAL
========================================================= */

.product-modal {

    position: fixed;

    z-index: 9999;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition:
        visibility 0s linear 400ms,
        opacity 350ms ease;

}


.product-modal.is-open {

    visibility: visible;

    opacity: 1;

    transition:
        visibility 0s linear 0s,
        opacity 350ms ease;

}


.product-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(12, 11, 9, .82);

    backdrop-filter:
        blur(7px);

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

}


.product-modal-dialog {

    position: relative;

    z-index: 2;

    width: min(
        1120px,
        100%
    );

    max-height:
        calc(100vh - 60px);

    max-height:
        calc(100svh - 60px);

    overflow: auto;

    background: var(--offwhite);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .35);

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform 450ms
        cubic-bezier(.22, .61, .36, 1);

}


.product-modal.is-open
.product-modal-dialog {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   MODAL CLOSE
========================================================= */

.product-modal-close {

    position: absolute;

    z-index: 10;

    top: 18px;

    right: 18px;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    background:
        rgba(29, 28, 26, .65);

    color: var(--white);

    font-size: 16px;

    transition:
        background var(--transition),
        transform var(--transition);

}


.product-modal-close:hover {

    background: var(--gold);

    color: var(--charcoal);

    transform: rotate(90deg);

}


/* =========================================================
   MODAL GRID
========================================================= */

.product-modal-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, .95fr);

    min-height: 650px;

}


/* =========================================================
   MODAL GALLERY
========================================================= */

.product-modal-gallery {

    min-width: 0;

    padding: 18px;

    background: #e8e4de;

}


.product-modal-main-image {

    width: 100%;

    height: 570px;

    overflow: hidden;

    background: #ddd8d0;

}


.product-modal-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        opacity 250ms ease;

}


.product-modal-thumbnails {

    display: flex;

    gap: 9px;

    margin-top: 10px;

    overflow-x: auto;

}


.product-modal-thumbnail {

    width: 70px;

    height: 70px;

    flex: 0 0 70px;

    overflow: hidden;

    border: 1px solid transparent;

    padding: 0;

    background: transparent;

    opacity: .65;

    transition:
        border-color var(--transition),
        opacity var(--transition);

}


.product-modal-thumbnail:hover {

    opacity: 1;

}


.product-modal-thumbnail.active {

    border-color: var(--gold);

    opacity: 1;

}


.product-modal-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   MODAL CONTENT
========================================================= */

.product-modal-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 75px 65px 60px;

    background: var(--offwhite);

}


.product-modal-category {

    margin-bottom: 13px;

    color: var(--gold-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

}


.product-modal-content h2 {

    max-width: 500px;

    margin: 0;

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

    font-size: clamp(
        36px,
        4vw,
        55px
    );

    font-weight: 500;

    letter-spacing: -.035em;

    line-height: 1.06;

}


.product-modal-price {

    margin-top: 18px;

    color: var(--charcoal);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.product-modal-description {

    margin: 28px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   MODAL SPECS
========================================================= */

.product-modal-specs {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-top: 30px;

    padding-top: 25px;

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

}


.product-modal-specs > div {

    min-width: 0;

}


.product-modal-specs span {

    display: block;

    margin-bottom: 5px;

    color: var(--muted-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.product-modal-specs strong {

    display: block;

    color: var(--charcoal);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;

}


/* =========================================================
   MODAL ACTIONS
========================================================= */

.product-modal-actions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 32px;

}


.product-modal-actions a {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 16px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .06em;

    text-align: center;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.product-modal-whatsapp {

    background: #25D366;

    color: #07180d;

}


.product-modal-whatsapp:hover {

    background: #1ebe5d;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(37, 211, 102, .18);

}


.product-modal-order {

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

    background: var(--charcoal);

    color: var(--white);

}


.product-modal-order:hover {

    border-color: var(--gold);

    background: var(--gold);

    color: var(--charcoal);

    transform: translateY(-3px);

}


.product-modal-order i {

    transition:
        transform var(--transition);

}


.product-modal-order:hover i {

    transform: translateX(4px);

}


.product-modal-note {

    margin: 17px 0 0;

    color: var(--muted-light);

    font-size: 10px;

    line-height: 1.6;

}


/* =========================================================
   CUSTOM FURNITURE SECTION
========================================================= */

.collection-custom-note {

    padding: 40px 0 140px;

    background: var(--offwhite);

}


.collection-custom-grid {

    display: grid;

    grid-template-columns: 1fr;

    min-height: 0;

    background: var(--charcoal);

    color: var(--white);

}


.collection-custom-image {

    min-height: 620px;

    overflow: hidden;

}


.collection-custom-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.22, .61, .36, 1);

}


.collection-custom-grid:hover
.collection-custom-image img {

    transform: scale(1.035);

}


.collection-custom-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 80px 75px;

}


.collection-custom-content .section-label {

    color: var(--gold-light);

}


.collection-custom-content h2 {

    max-width: 560px;

    margin: 0;

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

    font-size: clamp(
        40px,
        4vw,
        62px
    );

    font-weight: 500;

    letter-spacing: -.04em;

    line-height: 1.04;

}


.collection-custom-content h2 em {

    color: var(--gold-light);

    font-style: italic;

}


.collection-custom-content p {

    max-width: 520px;

    margin: 28px 0 34px;

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

    font-size: 14px;

    line-height: 1.9;

}


.light-link {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 8px;

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

    color: var(--white);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:
        color var(--transition),
        border-color var(--transition),
        gap var(--transition);

}


.light-link i {

    color: var(--gold-light);

}


.light-link:hover {

    gap: 17px;

    border-color: var(--gold);

    color: var(--gold-light);

}


/* =========================================================
   FINAL CTA
========================================================= */

.collection-final {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--charcoal);

    color: var(--white);

}


.collection-final-background {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            #29251e 0%,
            #1d1c1a 56%,
            #11110f 100%
        );

}


.collection-final-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 18, 15, .88),
            rgba(20, 18, 15, .62)
        );

}


.collection-final-content {

    position: relative;

    z-index: 2;

    padding-top: 110px;

    padding-bottom: 110px;

}


.collection-final-content .section-label {

    color: var(--gold-light);

}


.collection-final-content h2 {

    max-width: 750px;

    margin: 0;

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

    font-size: clamp(
        48px,
        6vw,
        88px
    );

    font-weight: 500;

    letter-spacing: -.045em;

    line-height: 1;

}


.collection-final-content h2 em {

    color: var(--gold-light);

    font-style: italic;

}


.collection-final-content p {

    max-width: 560px;

    margin: 28px 0 35px;

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

    font-size: 15px;

    line-height: 1.85;

}


.collection-final-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 14px 23px;

    border: 1px solid transparent;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.btn:hover {

    transform: translateY(-3px);

}


.btn-gold {

    border-color: var(--gold);

    background: var(--gold);

    color: var(--charcoal);

}


.btn-gold:hover {

    border-color: var(--gold-light);

    background: var(--gold-light);

    box-shadow:
        0 15px 30px
        rgba(220, 158, 63, .2);

}


.btn-light {

    border-color: rgba(255, 255, 255, .55);

    background: var(--white);

    color: var(--charcoal);

}


.btn-light:hover {

    border-color: var(--white);

    background: transparent;

    color: var(--white);

}


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

.floating-whatsapp {

    position: fixed;

    z-index: 8000;

    right: 25px;

    bottom: 25px;

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 0 19px;

    border-radius: 100px;

    background: #25D366;

    color: #07180d;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .18);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .04em;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


.floating-whatsapp i {

    font-size: 21px;

}


.floating-whatsapp:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, .24);

}


/* =========================================================
   AOS SAFETY
========================================================= */

[data-aos] {

    will-change:
        transform,
        opacity;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {


    .page-container {

        width:
            calc(100% - 60px);

    }


    .collection-hero-content {

        padding-top: 90px;

        padding-bottom: 130px;

    }


    .collection-intro {

        padding-top: 100px;

        padding-bottom: 80px;

    }


    .collection-intro-grid {

        gap: 60px;

    }


    .collection-grid {

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

        gap: 25px;

    }


    .product-modal-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .product-modal-content {

        padding: 60px 45px;

    }


    .product-modal-main-image {

        height: 500px;

    }


    .collection-custom-grid {

        grid-template-columns:
            1fr;

    }


    .collection-custom-content {

        padding: 60px 45px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {


    .page-container {

        width:
            calc(100% - 48px);

    }


    .collection-hero {

        min-height: 82svh;

    }


    .collection-hero-content h1 {

        font-size:
            clamp(52px, 10vw, 80px);

    }


    .collection-hero-bottom {

        grid-template-columns:
            1fr 1fr;

        gap: 15px;

    }


    .collection-hero-bottom span:nth-child(2) {

        text-align: right;

    }


    .collection-hero-bottom span:nth-child(3) {

        display: none;

    }


    .collection-intro-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    .collection-intro-heading h2 {

        max-width: 600px;

    }


    .collection-controls {

        align-items: stretch;

        flex-direction: column;

        gap: 28px;

    }


    .collection-search {

        width: 100%;

        flex-basis: auto;

    }


    .product-modal {

        padding: 15px;

    }


    .product-modal-dialog {

        max-height:
            calc(100vh - 30px);

        max-height:
            calc(100svh - 30px);

    }


    .product-modal-grid {

        grid-template-columns:
            1fr;

    }


    .product-modal-gallery {

        padding: 12px;

    }


    .product-modal-main-image {

        height:
            min(55vh, 480px);

    }


    .product-modal-content {

        padding: 45px 35px 40px;

    }


    .collection-custom-grid {

        grid-template-columns:
            1fr;

    }


    .collection-custom-image {

        min-height: 480px;

    }


    .collection-custom-content {

        min-height: 0;

        padding: 55px 40px;

    }


    .collection-final {

        min-height: 580px;

    }

}


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

@media (max-width: 600px) {


    .page-container {

        width:
            calc(100% - 36px);

    }


    .collection-hero {

        min-height: 78svh;

    }


    .collection-hero-background {

        background-position:
            58% center;

    }


    .collection-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(15, 14, 12, .82),
                rgba(15, 14, 12, .48)
            );

    }


    .collection-hero-content {

        padding-top: 75px;

        padding-bottom: 120px;

    }


    .collection-hero-content h1 {

        max-width: 420px;

        font-size:
            clamp(48px, 15vw, 68px);

        line-height: .99;

    }


    .collection-hero-content p {

        max-width: 430px;

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.75;

    }


    .collection-hero-bottom {

        grid-template-columns:
            1fr;

        gap: 7px;

        padding-top: 17px;

        padding-bottom: 17px;

    }


    .collection-hero-bottom span {

        font-size: 9px;

    }


    .collection-hero-bottom span:nth-child(2) {

        text-align: left;

    }


    .collection-intro {

        padding: 80px 0 65px;

    }


    .collection-intro-heading h2 {

        font-size:
            clamp(40px, 12vw, 57px);

    }


    .collection-intro-copy p {

        font-size: 14px;

    }


    .collection-section {

        padding-top: 30px;

        padding-bottom: 90px;

    }


    .collection-controls {

        margin-bottom: 35px;

        padding-bottom: 23px;

    }


    .collection-filters {

        gap: 7px;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 4px;

        scrollbar-width: none;

    }


    .collection-filters::-webkit-scrollbar {

        display: none;

    }


    .collection-filter {

        flex: 0 0 auto;

        padding: 9px 15px;

        font-size: 10px;

    }


    .collection-grid {

        grid-template-columns:
            1fr;

        gap: 18px;

    }


    .collection-card-image {

        aspect-ratio:
            1 / 1.05;

    }


    .collection-card-view {

        right: 14px;

        bottom: 14px;

        opacity: 1;

        transform: none;

        padding: 9px 12px;

        font-size: 9px;

    }


    .collection-card-content {

        padding:
            17px 1px 24px;

    }


    .collection-card-content h3 {

        font-size: 23px;

    }


    .collection-card-bottom {

        margin-top: 12px;

    }


    /* ---------------------------------------------
       MODAL MOBILE
    --------------------------------------------- */

    .product-modal {

        padding: 0;

        align-items: flex-end;

    }


    .product-modal-dialog {

        width: 100%;

        max-height: 94svh;

        overflow-y: auto;

    }


    .product-modal-close {

        top: 12px;

        right: 12px;

        width: 40px;

        height: 40px;

    }


    .product-modal-gallery {

        padding: 0;

    }


    .product-modal-main-image {

        height: 390px;

    }


    .product-modal-thumbnails {

        padding:
            10px 12px;

        margin-top: 0;

        background: #e8e4de;

    }


    .product-modal-thumbnail {

        width: 58px;

        height: 58px;

        flex-basis: 58px;

    }


    .product-modal-content {

        padding:
            35px 24px 30px;

    }


    .product-modal-content h2 {

        font-size:
            clamp(34px, 10vw, 48px);

    }


    .product-modal-description {

        margin-top: 20px;

        font-size: 13px;

    }


    .product-modal-specs {

        margin-top: 23px;

        padding-top: 20px;

        gap: 12px;

    }


    .product-modal-actions {

        grid-template-columns:
            1fr;

        margin-top: 25px;

    }


    .product-modal-actions a {

        min-height: 50px;

    }


    /* ---------------------------------------------
       CUSTOM SECTION
    --------------------------------------------- */

    .collection-custom-note {

        padding:
            20px 0 90px;

    }


    .collection-custom-image {

        min-height: 350px;

    }


    .collection-custom-content {

        min-height: auto;

        padding:
            50px 27px 55px;

    }


    .collection-custom-content h2 {

        font-size:
            clamp(38px, 11vw, 53px);

    }


    .collection-custom-content p {

        font-size: 13px;

        margin-top: 23px;

    }


    /* ---------------------------------------------
       FINAL CTA
    --------------------------------------------- */

    .collection-final {

        min-height:
            560px;

    }


    .collection-final-content {

        padding-top: 80px;

        padding-bottom: 80px;

    }


    .collection-final-content h2 {

        font-size:
            clamp(43px, 13vw, 64px);

    }


    .collection-final-content p {

        font-size: 13px;

    }


    .collection-final-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .collection-final-actions .btn {

        width: 100%;

    }


    /* ---------------------------------------------
       WHATSAPP
    --------------------------------------------- */

    .floating-whatsapp {

        right: 15px;

        bottom: 15px;

        width: 51px;

        height: 51px;

        min-height: 51px;

        justify-content: center;

        padding: 0;

    }


    .floating-whatsapp span {

        display: none;

    }


    .floating-whatsapp i {

        font-size: 22px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {


    .page-container {

        width:
            calc(100% - 30px);

    }


    .collection-hero-content h1 {

        font-size: 45px;

    }


    .collection-hero-content p {

        font-size: 13px;

    }


    .collection-card-content h3 {

        font-size: 21px;

    }


    .product-modal-main-image {

        height: 330px;

    }


    .product-modal-content {

        padding:
            30px 20px 25px;

    }


    .product-modal-content h2 {

        font-size: 34px;

    }


    .collection-custom-content {

        padding:
            45px 22px 50px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
KWITHU FURNITURE
CUSTOM FURNITURE PAGE
READY TO REPLACE
========================================================= */

/* =========================================================
PAGE VARIABLES
========================================================= */

.custom-hero,
.custom-intro,
.custom-builder-section,
.custom-process,
.custom-final-cta {


--kw-black: #1D1C1A;
--kw-black-soft: #272522;
--kw-gold: #DC9E3F;
--kw-gold-light: #E0A949;
--kw-cream: #F9F8F6;
--kw-grey: #575654;
--kw-border: #DDD9D1;
--kw-white: #FFFFFF;


}

/* =========================================================
GLOBAL RESET FOR THIS PAGE
========================================================= */

.custom-hero *,
.custom-intro *,
.custom-builder-section *,
.custom-process *,
.custom-final-cta * {


box-sizing: border-box;


}

.custom-hero,
.custom-intro,
.custom-builder-section,
.custom-process,
.custom-final-cta {


width: 100%;


}

.custom-hero a,
.custom-intro a,
.custom-builder-section a,
.custom-process a,
.custom-final-cta a {


text-decoration: none;


}

.custom-builder-section button,
.custom-builder-section input,
.custom-builder-section select,
.custom-builder-section textarea {


font: inherit;


}

/* =========================================================
PAGE CONTAINER
Scoped so header/footer are not affected
========================================================= */

.custom-hero .page-container,
.custom-intro .page-container,
.custom-builder-section .page-container,
.custom-process .page-container,
.custom-final-cta .page-container {


width: min(1320px, calc(100% - 80px));

margin-inline: auto;


}

/* =========================================================
SECTION LABEL
========================================================= */

.custom-hero .section-label,
.custom-intro .section-label,
.custom-builder-section .section-label,
.custom-process .section-label,
.custom-final-cta .section-label {


display: flex;

align-items: center;

gap: 12px;

color: var(--kw-gold);

font-size: 11px;

font-weight: 700;

letter-spacing: 0.18em;

text-transform: uppercase;


}

.custom-hero .section-label.light,
.custom-final-cta .section-label.light {


color: #FFFFFF;


}

.custom-hero .label-line,
.custom-intro .label-line,
.custom-builder-section .label-line,
.custom-process .label-line,
.custom-final-cta .label-line {


display: block;

width: 38px;

height: 1px;

background: currentColor;

flex-shrink: 0;


}

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

.custom-hero {


position: relative;

min-height: 88svh;

display: flex;

flex-direction: column;

justify-content: center;

overflow: hidden;

background: var(--kw-black);

color: #FFFFFF;


}

.custom-hero-background {


position: absolute;

inset: 0;

background-image:
    url("https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=2200&q=90");

background-size: cover;

background-position: center;

transform: scale(1.02);

animation: customHeroZoom 12s ease-out forwards;


}

.custom-hero-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(20, 19, 17, 0.88) 0%,
        rgba(20, 19, 17, 0.68) 42%,
        rgba(20, 19, 17, 0.38) 100%
    );


}

@keyframes customHeroZoom {


from {
    transform: scale(1.06);
}

to {
    transform: scale(1);
}


}

.custom-hero-content {


position: relative;

z-index: 2;

padding-top: 150px;

padding-bottom: 130px;


}

.custom-hero-content .section-label {


margin-bottom: 30px;


}

.custom-hero-content h1 {


max-width: 900px;

margin: 0;

color: #FFFFFF;

font-family: "Playfair Display", serif;

font-size: clamp(4rem, 7.5vw, 7.4rem);

font-weight: 500;

line-height: 0.96;

letter-spacing: -0.055em;


}

.custom-hero-content h1 em {


display: block;

color: var(--kw-gold-light);

font-style: italic;

font-weight: 500;


}

.custom-hero-content p {


max-width: 620px;

margin: 34px 0 0;

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

font-size: 17px;

line-height: 1.8;


}

.custom-hero-button {


display: inline-flex;

align-items: center;

gap: 18px;

margin-top: 38px;

padding: 16px 23px;

background: var(--kw-gold);

color: var(--kw-black) !important;

font-size: 13px;

font-weight: 700;

letter-spacing: 0.04em;

transition:
    background 0.3s ease,
    transform 0.3s ease;


}

.custom-hero-button i {


font-size: 12px;

transition: transform 0.3s ease;


}

.custom-hero-button:hover {


background: #F0BB62;

transform: translateY(-3px);


}

.custom-hero-button:hover i {


transform: translateY(4px);


}

.custom-hero-bottom {


position: absolute;

z-index: 2;

bottom: 0;

left: 50%;

transform: translateX(-50%);

display: grid;

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

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


}

.custom-hero-bottom span {


display: flex;

align-items: center;

gap: 12px;

min-height: 68px;

padding: 0 25px;

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

font-size: 12px;

font-weight: 600;

letter-spacing: 0.06em;

text-transform: uppercase;


}

.custom-hero-bottom span + span {


border-left: 1px solid rgba(255,255,255,0.2);


}

.custom-hero-bottom i {


color: var(--kw-gold);


}

/* =========================================================
CUSTOM INTRO
========================================================= */

.custom-intro {


padding: 135px 0;

background: var(--kw-cream);

color: var(--kw-black);


}

.custom-intro-grid {


display: grid;

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

gap: 100px;

align-items: start;


}

.custom-intro-heading h2,
.custom-builder-header h2,
.custom-process-heading h2 {


max-width: 700px;

margin: 28px 0 0;

color: var(--kw-black);

font-family: "Playfair Display", serif;

font-size: clamp(3rem, 5vw, 5.3rem);

font-weight: 500;

line-height: 1;

letter-spacing: -0.045em;


}

.custom-intro-heading h2 em,
.custom-builder-header h2 em,
.custom-process-heading h2 em {


color: var(--kw-gold);

font-style: italic;


}

.custom-intro-copy {


padding-top: 48px;


}

.custom-intro-copy p {


max-width: 570px;

margin: 0;

color: var(--kw-grey);

font-size: 17px;

line-height: 1.9;


}

.custom-intro-copy p + p {


margin-top: 28px;


}

/* =========================================================
BUILDER SECTION
========================================================= */

.custom-builder-section {


padding: 130px 0 120px;

background: #FFFFFF;

color: var(--kw-black);


}

.custom-builder-header {


display: flex;

justify-content: space-between;

align-items: flex-end;

gap: 40px;

margin-bottom: 55px;


}

.builder-progress {


display: flex;

align-items: center;

gap: 15px;

padding-bottom: 10px;


}

.progress-number {


display: grid;

width: 48px;

height: 48px;

place-items: center;

background: var(--kw-black);

color: var(--kw-gold);

font-family: "Playfair Display", serif;

font-size: 18px;


}

.progress-text {


color: var(--kw-grey);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.08em;

text-transform: uppercase;


}

/* =========================================================
FORM
========================================================= */

.custom-furniture-form {


position: relative;


}

.builder-step {


display: none;

padding: 55px;

background: var(--kw-cream);

border: 1px solid #E6E2DB;

animation: builderStepIn 0.45s ease both;


}

.builder-step.active {


display: block;


}

@keyframes builderStepIn {


from {

    opacity: 0;

    transform: translateY(12px);

}

to {

    opacity: 1;

    transform: translateY(0);

}


}

.step-heading {


display: flex;

align-items: flex-start;

gap: 24px;

margin-bottom: 48px;


}

.step-number {


display: flex;

align-items: center;

justify-content: center;

width: 46px;

height: 46px;

flex: 0 0 46px;

background: var(--kw-gold);

color: var(--kw-black);

font-size: 12px;

font-weight: 800;

letter-spacing: 0.05em;


}

.step-heading h3 {


margin: 0;

color: var(--kw-black);

font-family: "Playfair Display", serif;

font-size: clamp(1.8rem, 3vw, 2.7rem);

font-weight: 500;

line-height: 1.1;

letter-spacing: -0.025em;


}

.step-heading p {


max-width: 650px;

margin: 12px 0 0;

color: var(--kw-grey);

font-size: 14px;

line-height: 1.7;


}

/* =========================================================
CHOICE CARDS
========================================================= */

.option-grid {


display: grid;

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

gap: 14px;


}

.choice-card {


position: relative;

cursor: pointer;


}

.choice-card input {


position: absolute;

opacity: 0;

pointer-events: none;


}

.choice-card-inner {


display: flex;

flex-direction: column;

min-height: 180px;

padding: 25px;

background: #FFFFFF;

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

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


}

.choice-card:hover .choice-card-inner {


border-color: var(--kw-gold);

transform: translateY(-3px);

box-shadow: 0 15px 35px rgba(29,28,26,0.08);


}

.choice-card input:checked + .choice-card-inner {


background: var(--kw-black);

border-color: var(--kw-gold);

box-shadow: 0 18px 40px rgba(29,28,26,0.16);


}

.choice-icon {


display: grid;

width: 48px;

height: 48px;

margin-bottom: auto;

place-items: center;

background: #F2EEE7;

color: var(--kw-black);

font-size: 18px;

transition:
    background 0.25s ease,
    color 0.25s ease;


}

.choice-card input:checked + .choice-card-inner .choice-icon {


background: var(--kw-gold);

color: var(--kw-black);


}

.choice-card strong {


display: block;

margin-top: 28px;

color: var(--kw-black);

font-size: 15px;

font-weight: 700;


}

.choice-card small {


display: block;

margin-top: 6px;

color: var(--kw-grey);

font-size: 11px;

line-height: 1.5;


}

.choice-card input:checked + .choice-card-inner strong {


color: #FFFFFF;


}

.choice-card input:checked + .choice-card-inner small {


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


}

/* =========================================================
OTHER FURNITURE
========================================================= */

.custom-other-field {


display: none;

margin-top: 22px;

padding: 25px;

background: #FFFFFF;

border: 1px solid var(--kw-gold);


}

.custom-other-field.visible {


display: block;

animation: builderStepIn 0.3s ease both;


}

/* =========================================================
FORM FIELDS
========================================================= */

.form-field {


margin-top: 25px;


}

.form-field:first-child {


margin-top: 0;


}

.form-field label,
.field-title {


display: block;

margin-bottom: 10px;

color: var(--kw-black);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.04em;


}

.form-field label span {


color: var(--kw-grey);

font-weight: 500;


}

.form-field input,
.form-field select,
.form-field textarea {


width: 100%;

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

border-radius: 0;

outline: none;

background: #FFFFFF;

color: var(--kw-black);

transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;


}

.form-field input,
.form-field select {


min-height: 54px;

padding: 0 17px;


}

.form-field textarea {


min-height: 170px;

padding: 17px;

resize: vertical;

line-height: 1.7;


}

.form-field input::placeholder,
.form-field textarea::placeholder {


color: #99958E;


}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {


border-color: var(--kw-gold);

box-shadow: 0 0 0 3px rgba(220,158,63,0.12);


}

.field-help {


display: block;

margin-top: 9px;

color: #8A8781;

font-size: 11px;

line-height: 1.6;


}

/* =========================================================
DIMENSIONS
========================================================= */

.dimension-layout {


display: grid;

grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.8fr);

gap: 30px;

align-items: stretch;


}

.dimension-fields {


display: grid;

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

gap: 15px;


}

.input-with-unit {


position: relative;


}

.input-with-unit input {


padding-right: 55px;


}

.input-with-unit span {


position: absolute;

top: 50%;

right: 16px;

transform: translateY(-50%);

color: var(--kw-grey);

font-size: 11px;

font-weight: 700;

text-transform: uppercase;


}

.dimension-note {


display: flex;

align-items: flex-start;

gap: 15px;

padding: 23px;

background: var(--kw-black);

color: #FFFFFF;


}

.dimension-note > i {


color: var(--kw-gold);

font-size: 19px;

margin-top: 3px;


}

.dimension-note strong {


display: block;

font-size: 13px;


}

.dimension-note p {


margin: 8px 0 0;

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

font-size: 12px;

line-height: 1.65;


}

/* =========================================================
SELECT
========================================================= */

.form-field select {


appearance: none;

cursor: pointer;

background-image:
    linear-gradient(45deg, transparent 50%, #575654 50%),
    linear-gradient(135deg, #575654 50%, transparent 50%);

background-position:
    calc(100% - 20px) 23px,
    calc(100% - 15px) 23px;

background-size:
    5px 5px,
    5px 5px;

background-repeat: no-repeat;


}

/* =========================================================
FORM SECTION
========================================================= */

.form-section {


margin-top: 40px;

padding-top: 35px;

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


}

.inline-options {


display: flex;

flex-wrap: wrap;

gap: 10px;


}

.radio-card {


cursor: pointer;


}

.radio-card input {


position: absolute;

opacity: 0;

pointer-events: none;


}

.radio-card span {


display: inline-flex;

align-items: center;

gap: 10px;

min-height: 48px;

padding: 0 18px;

background: #FFFFFF;

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

color: var(--kw-grey);

font-size: 12px;

font-weight: 700;

transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;


}

.radio-card:hover span {


border-color: var(--kw-gold);


}

.radio-card input:checked + span {


background: var(--kw-black);

border-color: var(--kw-black);

color: #FFFFFF;


}

.radio-card input:checked + span i {


color: var(--kw-gold);


}

/* =========================================================
SOFA OPTIONS
========================================================= */

.sofa-options {


display: none;

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

gap: 20px;

margin-top: 25px;

padding: 25px;

background: #FFFFFF;

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


}

.sofa-options.visible {


display: grid;

animation: builderStepIn 0.3s ease both;


}

/* =========================================================
STYLE OPTIONS
========================================================= */

.style-options {


display: flex;

flex-wrap: wrap;

gap: 10px;


}

.style-option {


cursor: pointer;


}

.style-option input {


position: absolute;

opacity: 0;

pointer-events: none;


}

.style-option span {


display: inline-flex;

align-items: center;

min-height: 45px;

padding: 0 18px;

background: #FFFFFF;

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

color: var(--kw-grey);

font-size: 12px;

font-weight: 600;

transition: all 0.25s ease;


}

.style-option:hover span {


border-color: var(--kw-gold);


}

.style-option input:checked + span {


background: var(--kw-gold);

border-color: var(--kw-gold);

color: var(--kw-black);


}

/* =========================================================
PAINT OPTIONS
========================================================= */

.paint-options {


display: none;

margin-top: 25px;

padding: 28px;

background: #FFFFFF;

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


}

.paint-options.visible {


display: block;

animation: builderStepIn 0.3s ease both;


}

.colour-presets {


margin-top: 28px;


}

.colour-choice-grid {


display: grid;

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

gap: 10px;

margin-top: 12px;


}

.colour-choice {


display: flex;

align-items: center;

gap: 10px;

min-height: 50px;

padding: 0 13px;

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

background: #FFFFFF;

color: var(--kw-grey);

cursor: pointer;

font-size: 11px;

font-weight: 600;

text-align: left;

transition: all 0.25s ease;


}

.colour-choice:hover {


border-color: var(--kw-gold);


}

.colour-choice.selected {


border-color: var(--kw-gold);

background: #FBF5EA;

color: var(--kw-black);


}

.colour-swatch {


display: block;

width: 25px;

height: 25px;

flex: 0 0 25px;

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


}

.swatch-black {


background: #181818;


}

.swatch-white {


background: #F5F2EB;


}

.swatch-cream {


background: #DCCBB0;


}

.swatch-wood {


background:
    linear-gradient(
        135deg,
        #9A7045,
        #C89C65,
        #795331
    );


}

.swatch-walnut {


background: #4A3022;


}

.swatch-custom {


background:
    conic-gradient(
        #E0A949,
        #B94A48,
        #4E739A,
        #66885C,
        #E0A949
    );


}

/* =========================================================
MATERIAL CARDS
========================================================= */

.material-options {


display: grid;

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

gap: 12px;


}

.material-card {


cursor: pointer;


}

.material-card input {


position: absolute;

opacity: 0;

pointer-events: none;


}

.material-card > span {


display: flex;

flex-direction: column;

min-height: 150px;

padding: 20px;

background: #FFFFFF;

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

transition: all 0.25s ease;


}

.material-card:hover > span {


border-color: var(--kw-gold);

transform: translateY(-2px);


}

.material-card input:checked + span {


background: var(--kw-black);

border-color: var(--kw-gold);


}

.material-card i {


margin-bottom: auto;

color: var(--kw-gold);

font-size: 21px;


}

.material-card strong {


display: block;

margin-top: 20px;

color: var(--kw-black);

font-size: 13px;


}

.material-card small {


margin-top: 5px;

color: var(--kw-grey);

font-size: 10px;

line-height: 1.5;


}

.material-card input:checked + span strong {


color: #FFFFFF;


}

.material-card input:checked + span small {


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


}

/* =========================================================
UPLOAD AREA
========================================================= */

.upload-area {


position: relative;

min-height: 190px;

display: grid;

place-items: center;

background: #FFFFFF;

border: 1px dashed #BEB9AF;

cursor: pointer;

transition:
    border-color 0.25s ease,
    background 0.25s ease;


}

.upload-area:hover {


border-color: var(--kw-gold);

background: #FFFCF7;


}

.upload-area input {


position: absolute;

inset: 0;

width: 100%;

height: 100%;

opacity: 0;

cursor: pointer;


}

.upload-content {


display: flex;

flex-direction: column;

align-items: center;

max-width: 430px;

padding: 25px;

text-align: center;

pointer-events: none;


}

.upload-content i {


display: grid;

width: 50px;

height: 50px;

margin-bottom: 15px;

place-items: center;

background: #F3EEE6;

color: var(--kw-gold);

font-size: 18px;


}

.upload-content strong {


color: var(--kw-black);

font-size: 14px;


}

.upload-content span {


margin-top: 7px;

color: var(--kw-grey);

font-size: 11px;

line-height: 1.6;


}

.upload-content small {


margin-top: 9px;

color: #9A958C;

font-size: 9px;

text-transform: uppercase;

letter-spacing: 0.08em;


}

/* =========================================================
UPLOAD PREVIEW
========================================================= */

.upload-preview {


position: relative;

display: none;

width: 190px;

height: 150px;

margin-top: 15px;

overflow: hidden;

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


}

.upload-preview.visible {


display: block;


}

.upload-preview img {


width: 100%;

height: 100%;

display: block;

object-fit: cover;


}

.upload-preview button {


position: absolute;

top: 8px;

right: 8px;

display: grid;

width: 30px;

height: 30px;

padding: 0;

place-items: center;

border: 0;

background: var(--kw-black);

color: #FFFFFF;

cursor: pointer;


}

/* =========================================================
CUSTOMER DETAILS
========================================================= */

.customer-details-grid {


display: grid;

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

gap: 5px 25px;


}

.customer-details-grid .form-field {


margin-top: 25px;


}

/* =========================================================
ORDER SUMMARY
========================================================= */

.custom-order-summary {


margin-top: 25px;

padding: 36px;

background: var(--kw-black);

color: #FFFFFF;

border: 1px solid var(--kw-black);


}

.summary-top {


display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 25px;

padding-bottom: 28px;

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


}

.summary-eyebrow {


display: block;

color: var(--kw-gold);

font-size: 9px;

font-weight: 800;

letter-spacing: 0.18em;


}

.summary-top h3 {


margin: 10px 0 0;

font-family: "Playfair Display", serif;

font-size: 27px;

font-weight: 500;


}

.summary-icon {


display: grid;

width: 45px;

height: 45px;

flex: 0 0 45px;

place-items: center;

background: var(--kw-gold);

color: var(--kw-black);


}

.summary-content {


padding: 7px 0;


}

.summary-row {


display: grid;

grid-template-columns: 150px 1fr;

gap: 20px;

padding: 17px 0;

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


}

.summary-row span {


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

font-size: 11px;


}

.summary-row strong {


color: #FFFFFF;

font-size: 12px;

font-weight: 600;

text-align: right;


}

.summary-note {


display: flex;

gap: 13px;

margin-top: 25px;

padding: 16px;

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


}

.summary-note i {


color: var(--kw-gold);

margin-top: 2px;


}

.summary-note p {


margin: 0;

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

font-size: 10px;

line-height: 1.65;


}

.place-custom-order {


width: 100%;

min-height: 59px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

margin-top: 24px;

padding: 0 20px;

border: 0;

background: var(--kw-gold);

color: var(--kw-black);

cursor: pointer;

font-size: 13px;

font-weight: 800;

letter-spacing: 0.02em;

transition:
    background 0.25s ease,
    transform 0.25s ease;


}

.place-custom-order i {


font-size: 20px;


}

.place-custom-order:hover {


background: #F0BB62;

transform: translateY(-2px);


}

.whatsapp-note {


margin: 12px 0 0;

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

font-size: 9px;

text-align: center;


}

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

.builder-navigation {


display: grid;

grid-template-columns: 1fr auto 1fr;

align-items: center;

gap: 20px;

margin-top: 25px;

position: sticky;

bottom: 18px;

z-index: 20;

padding: 10px;

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

box-shadow: 0 8px 24px rgba(29, 28, 26, 0.12);

backdrop-filter: blur(12px);


}

.builder-prev,
.builder-next {


display: inline-flex;

align-items: center;

gap: 12px;

min-height: 52px;

padding: 0 21px;

border: 1px solid var(--kw-black);

background: transparent;

color: var(--kw-black);

cursor: pointer;

font-size: 12px;

font-weight: 700;

transition: all 0.25s ease;


}

.builder-next {


justify-self: end;

background: var(--kw-black);

color: #FFFFFF;


}

.builder-prev:hover {


background: var(--kw-black);

color: #FFFFFF;


}

.builder-next:hover {


background: var(--kw-gold);

border-color: var(--kw-gold);

color: var(--kw-black);


}

.builder-prev:disabled {


opacity: 0.3;

cursor: not-allowed;


}


.builder-completion-notice {

margin: 22px 0 0;

padding: 14px 18px;

border-left: 3px solid var(--kw-gold);

background: rgba(220, 158, 63, 0.12);

color: var(--kw-grey);

font-size: 12px;

line-height: 1.6;


}

.builder-dots {


display: flex;

align-items: center;

gap: 7px;


}

.builder-dot {


width: 7px;

height: 7px;

background: #D6D2CA;

transition:
    width 0.25s ease,
    background 0.25s ease;


}

.builder-dot.active {


width: 24px;

background: var(--kw-gold);


}

.builder-dot.completed {


background: var(--kw-black);


}

/* =========================================================
CUSTOM PROCESS
========================================================= */

.custom-process {


padding: 125px 0;

background: var(--kw-cream);


}

.custom-process-heading {


margin-bottom: 60px;


}

.custom-process-grid {


display: grid;

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

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

border-left: 1px solid var(--kw-border);


}

.process-card {


position: relative;

min-height: 330px;

padding: 32px;

border-right: 1px solid var(--kw-border);

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

transition:
    background 0.3s ease,
    transform 0.3s ease;


}

.process-card:hover {


background: #FFFFFF;


}

.process-number {


position: absolute;

top: 28px;

right: 28px;

color: #B9B3A9;

font-size: 10px;

font-weight: 800;

letter-spacing: 0.1em;


}

.process-card > i {


display: grid;

width: 55px;

height: 55px;

margin-top: 70px;

place-items: center;

background: var(--kw-black);

color: var(--kw-gold);

font-size: 20px;


}

.process-card h3 {


margin: 27px 0 12px;

color: var(--kw-black);

font-family: "Playfair Display", serif;

font-size: 22px;

font-weight: 500;


}

.process-card p {


margin: 0;

color: var(--kw-grey);

font-size: 12px;

line-height: 1.8;


}

/* =========================================================
FINAL CTA
========================================================= */

.custom-final-cta {


position: relative;

min-height: 620px;

display: flex;

align-items: center;

overflow: hidden;

background: var(--kw-black);

color: #FFFFFF;


}

.custom-final-background {


position: absolute;

inset: 0;

background-image:
    url("https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=2200&q=90");

background-size: cover;

background-position: center;


}

.custom-final-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(19,18,16,0.9) 0%,
        rgba(19,18,16,0.7) 52%,
        rgba(19,18,16,0.4) 100%
    );


}

.custom-final-content {


position: relative;

z-index: 2;

padding-top: 80px;

padding-bottom: 80px;


}

.custom-final-content h2 {


max-width: 800px;

margin: 27px 0 0;

color: #FFFFFF;

font-family: "Playfair Display", serif;

font-size: clamp(3.2rem, 6vw, 6.5rem);

font-weight: 500;

line-height: 0.98;

letter-spacing: -0.05em;


}

.custom-final-content h2 em {


display: block;

color: var(--kw-gold-light);

font-style: italic;


}

.custom-final-content p {


max-width: 560px;

margin: 30px 0 0;

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

font-size: 15px;

line-height: 1.8;


}

.custom-final-button {


display: inline-flex;

align-items: center;

gap: 17px;

margin-top: 35px;

padding: 17px 23px;

background: var(--kw-gold);

color: var(--kw-black) !important;

font-size: 12px;

font-weight: 800;

transition: all 0.3s ease;


}

.custom-final-button:hover {


background: #F0BB62;

transform: translateY(-3px);


}

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

.floating-whatsapp {


position: fixed;

right: 25px;

bottom: 25px;

z-index: 999;

display: inline-flex;

align-items: center;

gap: 10px;

min-height: 50px;

padding: 0 18px;

background: var(--kw-black);

color: #FFFFFF !important;

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

box-shadow: 0 12px 30px rgba(0,0,0,0.18);

font-size: 11px;

font-weight: 700;

transition:
    transform 0.25s ease,
    background 0.25s ease;


}

.floating-whatsapp i {


color: #25D366;

font-size: 19px;


}

.floating-whatsapp:hover {


background: #302E2B;

transform: translateY(-3px);


}

/* =========================================================
ACCESSIBILITY
========================================================= */

.custom-builder-section button:focus-visible,
.custom-builder-section input:focus-visible,
.custom-builder-section select:focus-visible,
.custom-builder-section textarea:focus-visible,
.custom-builder-section label:focus-within,
.custom-final-cta a:focus-visible,
.custom-hero a:focus-visible {


outline: 2px solid var(--kw-gold);

outline-offset: 3px;


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {


.custom-hero .page-container,
.custom-intro .page-container,
.custom-builder-section .page-container,
.custom-process .page-container,
.custom-final-cta .page-container {

    width: min(100% - 50px, 1000px);

}


.option-grid {

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

}


.material-options {

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

}


.custom-process-grid {

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

}


.custom-intro-grid {

    gap: 55px;

}


}

/* =========================================================
TABLET / LARGE MOBILE
========================================================= */

@media (max-width: 800px) {


.custom-hero {

    min-height: 820px;

}


.custom-hero-content {

    padding-top: 150px;

    padding-bottom: 150px;

}


.custom-hero-content h1 {

    font-size: clamp(3.4rem, 12vw, 5.5rem);

}


.custom-hero-bottom {

    grid-template-columns: 1fr;

    width: calc(100% - 50px);

}


.custom-hero-bottom span {

    min-height: 48px;

    padding: 0;

}


.custom-hero-bottom span + span {

    border-left: 0;

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

}


.custom-intro {

    padding: 95px 0;

}


.custom-intro-grid {

    grid-template-columns: 1fr;

    gap: 20px;

}


.custom-intro-copy {

    padding-top: 20px;

}


.custom-builder-section {

    padding: 95px 0;

}


.custom-builder-header {

    align-items: flex-start;

    flex-direction: column;

    margin-bottom: 35px;

}


.builder-step {

    padding: 32px 25px;

}


.option-grid {

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

}


.dimension-layout {

    grid-template-columns: 1fr;

}


.dimension-fields {

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

}


.customer-details-grid {

    grid-template-columns: 1fr;

}


.custom-process {

    padding: 95px 0;

}


.custom-process-grid {

    grid-template-columns: 1fr 1fr;

}


.custom-final-cta {

    min-height: 550px;

}


}

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

@media (max-width: 560px) {


.custom-hero .page-container,
.custom-intro .page-container,
.custom-builder-section .page-container,
.custom-process .page-container,
.custom-final-cta .page-container {

    width: calc(100% - 36px);

}


.custom-hero {

    min-height: 760px;

}


.custom-hero-background {

    background-position: 62% center;

}


.custom-hero-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(20,19,17,0.72) 0%,
            rgba(20,19,17,0.82) 60%,
            rgba(20,19,17,0.96) 100%
        );

}


.custom-hero-content {

    padding-top: 125px;

    padding-bottom: 160px;

}


.custom-hero-content .section-label {

    margin-bottom: 23px;

}


.custom-hero-content h1 {

    font-size: clamp(3rem, 15vw, 4.4rem);

    line-height: 0.98;

}


.custom-hero-content p {

    margin-top: 25px;

    font-size: 14px;

    line-height: 1.75;

}


.custom-hero-button {

    width: 100%;

    justify-content: space-between;

    margin-top: 30px;

}


.custom-hero-bottom {

    width: calc(100% - 36px);

}


.custom-hero-bottom span {

    font-size: 9px;

}


.custom-intro {

    padding: 78px 0;

}


.custom-intro-heading h2,
.custom-builder-header h2,
.custom-process-heading h2 {

    font-size: clamp(2.7rem, 13vw, 4rem);

}


.custom-intro-copy p {

    font-size: 14px;

}


.custom-builder-section {

    padding: 75px 0;

}


.builder-progress {

    padding-bottom: 0;

}


.step-heading {

    gap: 15px;

    margin-bottom: 32px;

}


.step-number {

    width: 39px;

    height: 39px;

    flex-basis: 39px;

    font-size: 10px;

}


.step-heading h3 {

    font-size: 24px;

}


.step-heading p {

    font-size: 12px;

}


.builder-step {

    padding: 28px 18px;

}


.option-grid {

    grid-template-columns: 1fr 1fr;

    gap: 9px;

}


.choice-card-inner {

    min-height: 155px;

    padding: 17px;

}


.choice-icon {

    width: 40px;

    height: 40px;

    font-size: 15px;

}


.choice-card strong {

    margin-top: 20px;

    font-size: 12px;

}


.choice-card small {

    font-size: 9px;

}


.dimension-fields {

    grid-template-columns: 1fr;

    gap: 0;

}


.dimension-note {

    padding: 18px;

}


.sofa-options {

    grid-template-columns: 1fr;

    padding: 18px;

}


.inline-options {

    display: grid;

    grid-template-columns: 1fr;

}


.radio-card span {

    width: 100%;

}


.style-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

}


.style-option span {

    width: 100%;

    justify-content: center;

}


.paint-options {

    padding: 18px;

}


.colour-choice-grid {

    grid-template-columns: 1fr 1fr;

}


.material-options {

    grid-template-columns: 1fr 1fr;

    gap: 9px;

}


.material-card > span {

    min-height: 140px;

    padding: 15px;

}


.material-card strong {

    font-size: 11px;

}


.material-card small {

    font-size: 9px;

}


.custom-order-summary {

    padding: 24px 18px;

}


.summary-top h3 {

    font-size: 22px;

}


.summary-row {

    grid-template-columns: 105px 1fr;

    gap: 10px;

}


.summary-row strong {

    font-size: 10px;

}


.builder-navigation {

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    position: sticky;

    bottom: 12px;

    z-index: 20;

    margin: 22px -8px 0;

    padding: 8px;

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

    box-shadow: 0 8px 24px rgba(29, 28, 26, 0.14);

    backdrop-filter: blur(12px);

}


.builder-dots {

    display: none;

}


.builder-prev,
.builder-next {

    width: 100%;

    justify-content: center;

}


.custom-process {

    padding: 75px 0;

}


.custom-process-heading {

    margin-bottom: 40px;

}


.custom-process-grid {

    grid-template-columns: 1fr;

}


.process-card {

    min-height: 270px;

    padding: 25px;

}


.process-card > i {

    margin-top: 45px;

}


.custom-final-cta {

    min-height: 540px;

}


.custom-final-content h2 {

    font-size: clamp(2.8rem, 13vw, 4.2rem);

}


.custom-final-content p {

    font-size: 13px;

}


.custom-final-button {

    width: 100%;

    justify-content: space-between;

}


.floating-whatsapp {

    right: 15px;

    bottom: 15px;

    width: 50px;

    min-height: 50px;

    height: 50px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;

}


.floating-whatsapp span {

    display: none;

}


.floating-whatsapp i {

    font-size: 21px;

}


}

/* =========================================================
VERY SMALL DEVICES
========================================================= */

@media (max-width: 370px) {


.option-grid {

    grid-template-columns: 1fr;

}


.material-options {

    grid-template-columns: 1fr;

}


.colour-choice-grid {

    grid-template-columns: 1fr;

}


.style-options {

    grid-template-columns: 1fr;

}


.custom-hero-content h1 {

    font-size: 2.9rem;

}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.custom-hero-background {

    animation: none;

}


.builder-step {

    animation: none;

}


.custom-hero-button,
.custom-final-button,
.place-custom-order,
.choice-card-inner,
.material-card > span {

    transition: none;

}


}



/* =========================================================
KWITHU FURNITURE — GALLERY PAGE
PREMIUM EDITORIAL / INTERNATIONAL FURNITURE STYLE
========================================================= */

/* =========================================================
ROOT VARIABLES
========================================================= */

:root {


--black: #1D1C1A;
--black-deep: #151412;
--black-soft: #242320;

--gold: #DC9E3F;
--gold-light: #E0A949;
--gold-soft: rgba(220, 158, 63, 0.14);

--white: #F9F8F6;
--white-pure: #FFFFFF;

--grey: #575654;
--grey-light: #85837E;

--border: rgba(29, 28, 26, 0.12);
--border-light: rgba(249, 248, 246, 0.13);

--shadow: 0 25px 70px rgba(0, 0, 0, 0.14);

--container: 1240px;

--display-font: "Playfair Display", Georgia, serif;
--body-font: "DM Sans", Arial, sans-serif;

--transition: 0.35s cubic-bezier(.2, .7, .2, 1);


}

/* =========================================================
RESET
========================================================= */

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

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--white);
color: var(--black);
font-family: var(--body-font);
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}

body.menu-open,
body.lightbox-open {
overflow: hidden;
}

img,
video {
display: block;
max-width: 100%;
}

img {
width: 100%;
}

button,
input,
textarea,
select {
font: inherit;
}

button {
border: 0;
}

a {
color: inherit;
text-decoration: none;
}

ul,
ol {
list-style: none;
}

.page-container {
width: min(
calc(100% - 80px),
var(--container)
);
margin-inline: auto;
}

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

.gallery-hero {
position: relative;


min-height: 760px;

display: flex;
align-items: center;

background: var(--black);

color: var(--white);

overflow: hidden;


}

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


background-image:
    url("images/70.jpg");

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

transform: scale(1.02);

animation: galleryHeroZoom 14s ease-out forwards;


}

@keyframes galleryHeroZoom {


from {
    transform: scale(1.08);
}

to {
    transform: scale(1.02);
}


}

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


background:
    linear-gradient(
        90deg,
        rgba(21, 20, 18, 0.92) 0%,
        rgba(21, 20, 18, 0.70) 43%,
        rgba(21, 20, 18, 0.30) 100%
    );


}

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


padding-top: 80px;


}

.gallery-eyebrow {
display: inline-flex;
align-items: center;


gap: 13px;

color: var(--gold);

font-size: 11px;
font-weight: 700;

letter-spacing: 0.20em;
text-transform: uppercase;


}

.gallery-eyebrow::before {
content: "";


width: 34px;
height: 1px;

background: var(--gold);


}

.gallery-hero h1 {
max-width: 850px;


margin-top: 25px;

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

font-size: clamp(58px, 8vw, 112px);
font-weight: 500;

line-height: 0.98;
letter-spacing: -0.045em;


}

.gallery-hero h1 em {
color: var(--gold);


font-style: italic;


}

.gallery-hero p {
max-width: 530px;


margin-top: 32px;

color: rgba(249, 248, 246, 0.72);

font-size: 17px;
line-height: 1.8;


}

.gallery-hero-bottom {
position: absolute;


z-index: 3;

left: 50%;
bottom: 35px;

transform: translateX(-50%);

display: flex;
align-items: center;

justify-content: space-between;

color: rgba(249, 248, 246, 0.64);

font-size: 10px;
font-weight: 600;

letter-spacing: 0.14em;
text-transform: uppercase;


}

.gallery-scroll-line {
flex: 1;


height: 1px;

margin: 0 25px;

background: rgba(249, 248, 246, 0.20);


}

/* =========================================================
GALLERY INTRO
========================================================= */

.gallery-intro {
padding: 135px 0 115px;


background: var(--white);


}

.gallery-intro-grid {
display: grid;


grid-template-columns: 0.32fr 1fr;

gap: 90px;

align-items: start;


}

.gallery-intro-label {
padding-top: 15px;
}

.gallery-intro-label span {
color: var(--gold);


font-size: 11px;
font-weight: 700;

letter-spacing: 0.16em;


}

.gallery-intro-content {
max-width: 820px;
}

.gallery-intro-content h2 {
font-family: var(--display-font);


font-size: clamp(42px, 5vw, 70px);
font-weight: 500;

line-height: 1.05;

letter-spacing: -0.035em;


}

.gallery-intro-content h2 em {
color: var(--gold);


font-style: italic;


}

.gallery-intro-content p {
max-width: 690px;


margin-top: 28px;

color: var(--grey);

font-size: 16px;
line-height: 1.9;


}

/* =========================================================
GALLERY MAIN SECTION
========================================================= */

.gallery-section {
padding: 20px 0 140px;


background: var(--white);


}

.gallery-filter-header {
display: flex;


align-items: flex-end;
justify-content: space-between;

gap: 40px;

padding-bottom: 35px;

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


}

.gallery-section-label {
display: block;


margin-bottom: 9px;

color: var(--gold);

font-size: 10px;
font-weight: 700;

letter-spacing: 0.18em;
text-transform: uppercase;


}

.gallery-filter-header h2 {
font-family: var(--display-font);


font-size: clamp(36px, 4vw, 52px);
font-weight: 500;

line-height: 1;


}

.gallery-filter {
display: flex;
flex-wrap: wrap;


justify-content: flex-end;

gap: 7px;


}

.gallery-filter-btn {
position: relative;


padding: 10px 15px;

background: transparent;

color: var(--grey);

border: 1px solid transparent;

cursor: pointer;

font-size: 11px;
font-weight: 600;

letter-spacing: 0.04em;

transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition);


}

.gallery-filter-btn:hover {
color: var(--black);
}

.gallery-filter-btn.active {
background: var(--black);
color: var(--white);


border-color: var(--black);


}

/* =========================================================
GALLERY GRID
CLEAN / ORDERED — NO ZIGZAG
========================================================= */

.gallery-grid {
display: grid;


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

column-gap: 24px;
row-gap: 58px;

margin-top: 55px;

align-items: start;


}

.gallery-item {
min-width: 0;


opacity: 1;

transform: translateY(0);

transition:
    opacity 0.35s ease,
    transform 0.35s ease;


}

.gallery-item.is-hidden {
display: none;
}

/* =========================================================
GALLERY CARD
========================================================= */

.gallery-card {
width: 100%;


display: block;

padding: 0;

background: transparent;

text-align: left;

cursor: pointer;

color: var(--black);


}

.gallery-media {
position: relative;


width: 100%;

aspect-ratio: 4 / 3;

overflow: hidden;

background: #e8e5df;


}

.gallery-media::after {
content: "";


position: absolute;
inset: 0;

background:
    linear-gradient(
        180deg,
        rgba(21, 20, 18, 0) 45%,
        rgba(21, 20, 18, 0.68) 100%
    );

opacity: 0;

transition: opacity var(--transition);

pointer-events: none;


}

.gallery-media img,
.gallery-media video {
width: 100%;
height: 100%;


object-fit: cover;

transition:
    transform 0.8s cubic-bezier(.2, .7, .2, 1),
    filter var(--transition);


}

.gallery-card:hover .gallery-media img,
.gallery-card:hover .gallery-media video {
transform: scale(1.045);
}

.gallery-card:hover .gallery-media::after {
opacity: 1;
}

/* =========================================================
GALLERY CARD OVERLAY
========================================================= */

.gallery-card-overlay {
position: absolute;


z-index: 3;

inset: 0;

padding: 20px;

display: flex;

align-items: flex-end;
justify-content: space-between;

opacity: 0;

transition: opacity var(--transition);


}

.gallery-card:hover .gallery-card-overlay {
opacity: 1;
}

.gallery-card-category {
color: var(--white);


font-size: 10px;
font-weight: 700;

letter-spacing: 0.12em;
text-transform: uppercase;


}

.gallery-card-icon {
width: 42px;
height: 42px;


display: grid;
place-items: center;

background: var(--gold);

color: var(--black);

font-size: 13px;

transform: translateY(8px);

transition: transform var(--transition);


}

.gallery-card:hover .gallery-card-icon {
transform: translateY(0);
}

/* =========================================================
CARD CAPTION
========================================================= */

.gallery-card-caption {
display: grid;


grid-template-columns: 40px 1fr;

gap: 15px;

padding-top: 17px;


}

.gallery-card-caption > span {
color: var(--gold);


font-size: 10px;
font-weight: 700;

letter-spacing: 0.08em;

padding-top: 4px;


}

.gallery-card-caption h3 {
color: var(--black);


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

font-size: 22px;
font-weight: 500;

line-height: 1.25;

transition: color var(--transition);


}

.gallery-card:hover .gallery-card-caption h3 {
color: var(--gold);
}

/* =========================================================
VIDEO BADGE
========================================================= */

.gallery-video-badge {
position: absolute;


z-index: 5;

top: 16px;
left: 16px;

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

gap: 7px;

padding: 7px 10px;

background: rgba(29, 28, 26, 0.86);

color: var(--white);

font-size: 9px;
font-weight: 700;

letter-spacing: 0.10em;


}

.gallery-video-badge i {
color: var(--gold);


font-size: 9px;


}

/* =========================================================
NO RESULTS
========================================================= */

.gallery-no-results {
display: none;


padding: 90px 20px;

text-align: center;

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


}

.gallery-no-results.visible {
display: block;
}

.gallery-no-results > i {
color: var(--gold);


font-size: 30px;


}

.gallery-no-results h3 {
margin-top: 18px;


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

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


}

.gallery-no-results p {
margin-top: 8px;


color: var(--grey);

font-size: 14px;


}

/* =========================================================
GALLERY CTA
========================================================= */

.gallery-cta {
padding: 110px 0;


background: var(--black);

color: var(--white);


}

.gallery-cta-inner {
display: flex;


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

gap: 70px;

padding: 70px 75px;

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

background:
    linear-gradient(
        120deg,
        rgba(255,255,255,0.035),
        rgba(255,255,255,0.01)
    );


}

.gallery-cta-copy {
max-width: 720px;
}

.gallery-cta-copy h2 {
font-family: var(--display-font);


font-size: clamp(42px, 5vw, 68px);
font-weight: 500;

line-height: 1.05;

letter-spacing: -0.035em;


}

.gallery-cta-copy h2 em {
color: var(--gold);


font-style: italic;


}

.gallery-cta-copy p {
max-width: 600px;


margin-top: 22px;

color: rgba(249, 248, 246, 0.62);

font-size: 15px;
line-height: 1.85;


}

.gallery-cta-button {
flex-shrink: 0;


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

gap: 30px;

min-height: 58px;

padding: 0 24px;

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

color: var(--white);

font-size: 11px;
font-weight: 700;

letter-spacing: 0.08em;
text-transform: uppercase;

transition:
    background var(--transition),
    color var(--transition),
    gap var(--transition);


}

.gallery-cta-button:hover {
background: var(--gold);


color: var(--black);

gap: 38px;


}

.gallery-cta-button i {
color: var(--gold);


transition: color var(--transition);


}

.gallery-cta-button:hover i {
color: var(--black);
}

/* =========================================================
LIGHTBOX
========================================================= */

.gallery-lightbox {
position: fixed;


inset: 0;

z-index: 3000;

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

padding: 30px;

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

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


}

.gallery-lightbox.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.gallery-lightbox-backdrop {
position: absolute;
inset: 0;


background: rgba(12, 11, 10, 0.94);

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


}

.gallery-lightbox-dialog {
position: relative;


z-index: 2;

width: min(
    100%,
    1100px
);

max-height: calc(100vh - 60px);

display: flex;
flex-direction: column;

background: var(--black-soft);

box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.45);

transform: translateY(20px) scale(0.98);

transition: transform 0.35s ease;

overflow: hidden;


}

.gallery-lightbox.active .gallery-lightbox-dialog {
transform: translateY(0) scale(1);
}

.gallery-lightbox-close {
position: absolute;


z-index: 10;

top: 15px;
right: 15px;

width: 44px;
height: 44px;

display: grid;
place-items: center;

background: rgba(21, 20, 18, 0.78);

color: var(--white);

cursor: pointer;

font-size: 17px;

transition:
    background var(--transition),
    color var(--transition);


}

.gallery-lightbox-close:hover {
background: var(--gold);
color: var(--black);
}

.gallery-lightbox-media {
width: 100%;


max-height: calc(100vh - 190px);

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

background: #11100f;

overflow: hidden;


}

.gallery-lightbox-media img,
.gallery-lightbox-media video {
width: 100%;
height: auto;


max-height: calc(100vh - 190px);

object-fit: contain;


}

.gallery-lightbox-media video {
background: #000;
}

.gallery-lightbox-info {
display: flex;
align-items: center;
justify-content: space-between;


gap: 30px;

padding: 18px 24px;

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


}

.gallery-lightbox-info span {
color: var(--gold);


font-size: 9px;
font-weight: 700;

letter-spacing: 0.14em;
text-transform: uppercase;


}

.gallery-lightbox-info h3 {
color: var(--white);


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

font-size: 22px;
font-weight: 500;


}

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

.site-footer {
padding: 90px 0 25px;


background: var(--black-deep);

color: var(--white);


}

.footer-top {
display: grid;


grid-template-columns:
    1.7fr
    0.8fr
    0.8fr
    1fr;

gap: 60px;

padding-bottom: 70px;

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


}

.footer-brand {
max-width: 340px;
}

.footer-logo {
display: inline-block;


width: 145px;


}

.footer-logo img {
width: 100%;
}

.footer-brand p {
margin-top: 22px;


color: rgba(249, 248, 246, 0.55);

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


}

.footer-whatsapp {
display: inline-flex;
align-items: center;


gap: 10px;

margin-top: 20px;

color: var(--gold);

font-size: 13px;
font-weight: 600;

transition: color var(--transition);


}

.footer-whatsapp:hover {
color: var(--gold-light);
}

.footer-whatsapp i {
font-size: 17px;
}

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


align-items: flex-start;


}

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


color: var(--white);

font-size: 11px;
font-weight: 700;

letter-spacing: 0.14em;
text-transform: uppercase;


}

.footer-column a,
.footer-column p {
margin-bottom: 11px;


color: rgba(249, 248, 246, 0.52);

font-size: 13px;

line-height: 1.7;

transition:
    color var(--transition),
    transform var(--transition);


}

.footer-column a:hover {
color: var(--gold);


transform: translateX(3px);


}

.footer-contact p {
margin-bottom: 10px;
}

.footer-contact > a {
display: inline-flex;
align-items: center;


gap: 8px;

color: var(--gold);


}

.footer-contact > a i {
font-size: 9px;
}

.footer-bottom {
display: grid;


grid-template-columns: 1fr auto 1fr;

align-items: center;

gap: 30px;

padding-top: 25px;


}

.footer-bottom p {
color: rgba(249, 248, 246, 0.38);


font-size: 10px;

letter-spacing: 0.02em;


}

.footer-socials {
display: flex;


align-items: center;

gap: 9px;


}

.footer-socials a {
width: 34px;
height: 34px;


display: grid;
place-items: center;

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

color: rgba(249, 248, 246, 0.62);

font-size: 12px;

transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition);


}

.footer-socials a:hover {
background: var(--gold);


border-color: var(--gold);

color: var(--black);


}

.footer-credit {
text-align: right;
}

.footer-credit a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(220, 158, 63, .65);
    text-underline-offset: 3px;
    transition: color var(--transition);
}

.footer-credit a:hover {
    color: var(--gold-light);
}

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

.floating-whatsapp {
position: fixed;


z-index: 950;

right: 24px;
bottom: 24px;

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

gap: 10px;

min-height: 50px;

padding: 0 17px;

background: #1D1C1A;

color: var(--white);

border: 1px solid rgba(249, 248, 246, 0.12);

box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.22);

font-size: 11px;
font-weight: 700;

letter-spacing: 0.04em;

transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);


}

.floating-whatsapp i {
color: #25D366;


font-size: 21px;


}

.floating-whatsapp:hover {
background: var(--gold);


color: var(--black);

transform: translateY(-4px);


}

.floating-whatsapp:hover i {
color: var(--black);
}

/* =========================================================
AOS
========================================================= */

[data-aos] {
transition-property:
opacity,
transform;
}

/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1150px) {


.header-container,
.page-container {
    width: min(
        calc(100% - 50px),
        var(--container)
    );
}


.main-navigation {
    gap: 20px;
}


.nav-link {
    font-size: 12px;
}


.gallery-grid {
    column-gap: 18px;
    row-gap: 48px;
}


.gallery-cta-inner {
    padding: 55px;
}


.footer-top {
    gap: 40px;
}


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {


.site-header {
    background: rgba(29, 28, 26, 0.97);
}


.header-container {
    min-height: 78px;
}


.main-navigation,
.header-cta {
    display: none;
}


.menu-toggle {
    display: flex;
}


.brand-logo {
    width: 135px;
}


.gallery-hero {
    min-height: 680px;
}


.gallery-hero h1 {
    font-size: clamp(55px, 10vw, 86px);
}


.gallery-intro {
    padding: 100px 0 90px;
}


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

    gap: 25px;
}


.gallery-intro-label {
    padding-top: 0;
}


.gallery-filter-header {
    align-items: flex-start;

    flex-direction: column;
}


.gallery-filter {
    justify-content: flex-start;
}


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

    column-gap: 20px;
    row-gap: 45px;
}


.gallery-cta-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 40px;

    padding: 50px;
}


.footer-top {
    grid-template-columns:
        1.4fr
        1fr
        1fr;

    gap: 45px;
}


.footer-brand {
    grid-column: 1 / -1;

    max-width: 480px;
}


.footer-bottom {
    grid-template-columns: 1fr auto;

    gap: 20px;
}


.footer-credit {
    display: block;
}


}

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

@media (max-width: 640px) {


.page-container,
.header-container {
    width: calc(100% - 36px);
}


.mobile-menu-inner {
    padding-inline: 20px;
}


.gallery-hero {
    min-height: 620px;
}


.gallery-hero-background {
    background-position: 58% center;
}


.gallery-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(21, 20, 18, 0.90),
            rgba(21, 20, 18, 0.62)
        );
}


.gallery-hero-content {
    padding-top: 60px;
}


.gallery-eyebrow {
    font-size: 9px;
}


.gallery-hero h1 {
    margin-top: 20px;

    font-size: clamp(48px, 14vw, 68px);

    line-height: 1.02;
}


.gallery-hero p {
    margin-top: 25px;

    font-size: 14px;

    max-width: 390px;
}


.gallery-hero-bottom {
    bottom: 23px;

    font-size: 8px;
}


.gallery-scroll-line {
    margin: 0 12px;
}


.gallery-intro {
    padding: 80px 0 70px;
}


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


.gallery-intro-content p {
    margin-top: 20px;

    font-size: 14px;
}


.gallery-section {
    padding-bottom: 90px;
}


.gallery-filter-header {
    padding-bottom: 25px;
}


.gallery-filter-header h2 {
    font-size: 38px;
}


.gallery-filter {
    width: 100%;

    display: grid;

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

    gap: 7px;
}


.gallery-filter-btn {
    width: 100%;

    padding: 12px 8px;

    border-color: var(--border);

    font-size: 10px;
}


.gallery-filter-btn.active {
    border-color: var(--black);
}


.gallery-grid {
    grid-template-columns: 1fr;

    row-gap: 42px;

    margin-top: 40px;
}


.gallery-media {
    aspect-ratio: 4 / 3;
}


.gallery-card-overlay {
    opacity: 1;

    padding: 14px;
}


.gallery-card-icon {
    width: 37px;
    height: 37px;

    transform: none;

    font-size: 11px;
}


.gallery-card-caption {
    grid-template-columns: 34px 1fr;

    gap: 10px;

    padding-top: 13px;
}


.gallery-card-caption h3 {
    font-size: 20px;
}


.gallery-cta {
    padding: 75px 0;
}


.gallery-cta-inner {
    width: 100%;

    padding: 42px 25px;
}


.gallery-cta-copy h2 {
    font-size: 43px;
}


.gallery-cta-copy p {
    font-size: 14px;
}


.gallery-cta-button {
    width: 100%;

    justify-content: space-between;
}


.gallery-lightbox {
    padding: 12px;
}


.gallery-lightbox-dialog {
    max-height: calc(100vh - 24px);
}


.gallery-lightbox-media {
    max-height: calc(100vh - 150px);
}


.gallery-lightbox-media img,
.gallery-lightbox-media video {
    max-height: calc(100vh - 150px);
}


.gallery-lightbox-info {
    align-items: flex-start;

    flex-direction: column;

    gap: 4px;

    padding: 15px 18px;
}


.gallery-lightbox-info h3 {
    font-size: 19px;
}


.gallery-lightbox-close {
    top: 8px;
    right: 8px;
}


.footer-top {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-bottom: 50px;
}


.footer-brand {
    grid-column: auto;
}


.footer-bottom {
    grid-template-columns: 1fr;

    text-align: center;

    justify-items: center;
}


.footer-socials {
    order: -1;
}


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

    width: 48px;
    height: 48px;
    min-height: 48px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;
}


.floating-whatsapp span {
    display: none;
}


.floating-whatsapp i {
    font-size: 22px;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 390px) {


.gallery-hero h1 {
    font-size: 44px;
}


.gallery-intro-content h2 {
    font-size: 37px;
}


.gallery-filter {
    grid-template-columns: 1fr 1fr;
}


.gallery-card-caption h3 {
    font-size: 18px;
}


.gallery-cta-copy h2 {
    font-size: 38px;
}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


html {
    scroll-behavior: auto;
}


*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}


}
/* =========================================================
   KWITHU FURNITURE
   CONTACT PAGE STYLES
   ---------------------------------------------------------
   Header & Footer CSS intentionally excluded.
   Brand:
   #1D1C1A - Charcoal
   #F9F8F6 - Off White
   #DC9E3F - Warm Gold
   #575654 - Muted Grey
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --kwithu-black: #1D1C1A;
    --kwithu-black-soft: #22211F;

    --kwithu-gold: #DC9E3F;
    --kwithu-gold-light: #E0A949;

    --kwithu-white: #F9F8F6;
    --kwithu-pure-white: #FFFFFF;

    --kwithu-grey: #575654;
    --kwithu-grey-light: #8A8884;
    --kwithu-border: rgba(29, 28, 26, 0.12);

    --page-width: 1240px;

    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;

    --transition-fast: 0.25s ease;
    --transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   GLOBAL CONTACT PAGE FOUNDATION
========================================================= */

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    background: var(--kwithu-white);
    color: var(--kwithu-black);

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body.no-scroll {
    overflow: hidden;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   PAGE CONTAINER
========================================================= */

.page-container {
    width: min(
        calc(100% - 64px),
        var(--page-width)
    );

    margin-inline: auto;
}


/* =========================================================
   SHARED SECTION EYEBROW
========================================================= */

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: var(--kwithu-gold);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.section-eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    background: currentColor;
}


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

.contact-hero {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--kwithu-black);

    isolation: isolate;
}


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

    background-image:
        url("images/71.jpg");

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

    transform: scale(1.02);

    z-index: -3;
}


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

    background:
        linear-gradient(
            90deg,
            rgba(15, 14, 13, 0.96) 0%,
            rgba(15, 14, 13, 0.82) 42%,
            rgba(15, 14, 13, 0.45) 72%,
            rgba(15, 14, 13, 0.30) 100%
        );

    z-index: -2;
}


.contact-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

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


.contact-hero-content {
    width: min(760px, 100%);

    padding: 120px 0 110px;

    color: var(--kwithu-pure-white);
}


.contact-hero-content h1 {
    max-width: 760px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        3.2rem,
        6vw,
        5.8rem
    );

    font-weight: 500;

    line-height: 0.98;
    letter-spacing: -0.045em;
}


.contact-hero-content h1 span {
    display: block;

    color: var(--kwithu-gold-light);
}


.contact-hero-content p {
    max-width: 620px;

    margin: 30px 0 0;

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

    font-size: 1.02rem;

    line-height: 1.85;
}


.contact-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 40px;
}


/* =========================================================
   SHARED BUTTONS
========================================================= */

.primary-button,
.secondary-button,
.visit-direction-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 24px;

    border: 1px solid transparent;

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}


.primary-button {
    background: var(--kwithu-gold);
    color: var(--kwithu-black);
}


.primary-button:hover {
    background: var(--kwithu-gold-light);
    transform: translateY(-2px);
}


.secondary-button {
    border-color: rgba(255, 255, 255, 0.35);

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

    color: var(--kwithu-pure-white);

    backdrop-filter: blur(8px);
}


.secondary-button:hover {
    background: var(--kwithu-pure-white);
    color: var(--kwithu-black);

    transform: translateY(-2px);
}


.primary-button i,
.secondary-button i,
.visit-direction-button i {
    font-size: 0.75rem;

    transition: transform var(--transition-fast);
}


.primary-button:hover i,
.secondary-button:hover i,
.visit-direction-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   CONTACT INTRO
========================================================= */

.contact-intro {
    padding: 120px 0 90px;

    background: var(--kwithu-white);
}


.contact-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 100px;

    align-items: start;
}


.contact-intro-heading h2 {
    max-width: 580px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        2.5rem,
        4vw,
        4.2rem
    );

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.035em;
}


.contact-intro-text {
    padding-top: 42px;
}


.contact-intro-text p {
    max-width: 620px;

    margin: 0 0 22px;

    color: var(--kwithu-grey);

    font-size: 1rem;

    line-height: 1.9;
}


.contact-intro-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {
    padding: 20px 0 120px;

    background: var(--kwithu-white);
}


.contact-information-grid {
    display: grid;

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

    gap: 18px;
}


.contact-info-card {
    position: relative;

    min-height: 290px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    background: var(--kwithu-pure-white);

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

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.contact-info-card:hover {
    transform: translateY(-6px);

    border-color: rgba(220, 158, 63, 0.45);

    box-shadow:
        0 24px 60px rgba(29, 28, 26, 0.08);
}


.contact-info-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 30px;

    background: rgba(220, 158, 63, 0.12);

    color: var(--kwithu-gold);

    font-size: 1.1rem;
}


.contact-info-label {
    display: block;

    margin-bottom: 10px;

    color: var(--kwithu-grey-light);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.contact-info-content h3 {
    margin: 0;

    font-family: var(--serif);

    font-size: 1.55rem;
    font-weight: 600;

    line-height: 1.2;
}


.contact-info-content p {
    margin: 9px 0 20px;

    color: var(--kwithu-grey);

    font-size: 0.9rem;

    line-height: 1.7;
}


.contact-info-content > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;

    color: var(--kwithu-black);

    font-size: 0.78rem;
    font-weight: 700;

    transition: color var(--transition-fast);
}


.contact-info-content > a i {
    color: var(--kwithu-gold);

    font-size: 0.68rem;

    transition: transform var(--transition-fast);
}


.contact-info-content > a:hover {
    color: var(--kwithu-gold);
}


.contact-info-content > a:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   ENQUIRY SECTION
========================================================= */

.contact-enquiry {
    padding: 125px 0;

    background: var(--kwithu-black);

    color: var(--kwithu-pure-white);
}


.contact-enquiry-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    gap: 100px;

    align-items: start;
}


.contact-enquiry-copy {
    position: sticky;
    top: 120px;
}


.contact-enquiry-copy .section-eyebrow {
    color: var(--kwithu-gold-light);
}


.contact-enquiry-copy h2 {
    max-width: 540px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        2.7rem,
        4vw,
        4.5rem
    );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.04em;
}


.contact-enquiry-copy > p {
    max-width: 500px;

    margin: 28px 0 0;

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

    font-size: 0.98rem;

    line-height: 1.85;
}


/* =========================================================
   ENQUIRY NOTE
========================================================= */

.enquiry-note {
    max-width: 500px;

    display: flex;
    gap: 18px;

    margin-top: 55px;
    padding-top: 28px;

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


.enquiry-note-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    background: rgba(220, 158, 63, 0.12);

    color: var(--kwithu-gold);

    font-size: 0.9rem;
}


.enquiry-note strong {
    display: block;

    margin-bottom: 7px;

    color: var(--kwithu-pure-white);

    font-size: 0.84rem;
}


.enquiry-note p {
    margin: 0 0 12px;

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

    font-size: 0.8rem;

    line-height: 1.7;
}


.enquiry-note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--kwithu-gold-light);

    font-size: 0.76rem;
    font-weight: 700;
}


.enquiry-note a i {
    transition: transform var(--transition-fast);
}


.enquiry-note a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   CONTACT FORM WRAPPER
========================================================= */

.contact-form-wrapper {
    padding: 42px;

    background: var(--kwithu-pure-white);

    color: var(--kwithu-black);
}


.contact-form {
    width: 100%;
}


.form-row {
    display: grid;

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

    gap: 18px;
}


.form-group {
    margin-bottom: 22px;
}


.form-group label {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin-bottom: 9px;

    color: var(--kwithu-black);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.02em;
}


.form-group label span {
    color: var(--kwithu-grey-light);

    font-size: 0.66rem;
    font-weight: 500;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid rgba(29, 28, 26, 0.16);

    border-radius: 0;

    outline: none;

    background: #FCFBF9;

    color: var(--kwithu-black);

    font-size: 0.88rem;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}


.form-group input,
.form-group select {
    height: 54px;

    padding: 0 16px;
}


.form-group textarea {
    min-height: 150px;

    padding: 15px 16px;

    resize: vertical;

    line-height: 1.7;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9B9995;
}


.form-group select {
    cursor: pointer;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--kwithu-gold);

    background: var(--kwithu-pure-white);

    box-shadow:
        0 0 0 3px rgba(220, 158, 63, 0.10);
}


/* =========================================================
   FORM SUBMIT
========================================================= */

.form-submit {
    width: 100%;
    min-height: 58px;

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

    margin-top: 4px;
    padding: 0 21px;

    border: 1px solid var(--kwithu-black);

    background: var(--kwithu-black);

    color: var(--kwithu-pure-white);

    cursor: pointer;

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}


.form-submit i {
    color: var(--kwithu-gold);

    transition: transform var(--transition-fast);
}


.form-submit:hover {
    background: var(--kwithu-gold);

    color: var(--kwithu-black);

    transform: translateY(-2px);
}


.form-submit:hover i {
    color: var(--kwithu-black);

    transform: translateX(5px);
}


.form-disclaimer {
    margin: 15px 0 0;

    color: var(--kwithu-grey-light);

    font-size: 0.68rem;

    line-height: 1.6;
}


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

.contact-visit {
    padding: 125px 0;

    background: var(--kwithu-white);
}


.contact-visit-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    min-height: 540px;

    background: var(--kwithu-pure-white);

    border: 1px solid var(--kwithu-border);
}


.contact-visit-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 70px;
}


.contact-visit-content h2 {
    max-width: 500px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        2.5rem,
        4vw,
        4.2rem
    );

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.contact-visit-content p {
    max-width: 480px;

    margin: 25px 0 32px;

    color: var(--kwithu-grey);

    font-size: 0.94rem;

    line-height: 1.85;
}


.visit-direction-button {
    background: var(--kwithu-black);

    color: var(--kwithu-pure-white);
}


.visit-direction-button:hover {
    background: var(--kwithu-gold);

    color: var(--kwithu-black);

    transform: translateY(-2px);
}


/* =========================================================
   MAP
========================================================= */

.contact-visit-map {
    min-height: 540px;

    background: #EAE8E4;
}


.contact-visit-map iframe {
    width: 100%;
    height: 100%;

    min-height: 540px;

    display: block;

    border: 0;

    filter: grayscale(100%) contrast(0.9);
}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-final-cta {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--kwithu-gold);

    color: var(--kwithu-black);

    isolation: isolate;
}


.contact-final-cta::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -250px;

    border: 1px solid rgba(29, 28, 26, 0.13);

    border-radius: 50%;

    z-index: -1;
}


.contact-final-cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    bottom: -190px;

    border: 1px solid rgba(29, 28, 26, 0.10);

    border-radius: 50%;

    z-index: -1;
}


.contact-final-content {
    max-width: 850px;

    margin-inline: auto;

    text-align: center;
}


.contact-final-content .section-eyebrow {
    justify-content: center;

    color: var(--kwithu-black);
}


.contact-final-content .section-eyebrow::before {
    background: var(--kwithu-black);
}


.contact-final-content h2 {
    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        2.8rem,
        5vw,
        5rem
    );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.045em;
}


.contact-final-content > p {
    max-width: 600px;

    margin: 25px auto 0;

    color: rgba(29, 28, 26, 0.72);

    font-size: 0.98rem;

    line-height: 1.8;
}


.contact-final-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}


.contact-final-actions .primary-button {
    background: var(--kwithu-black);

    color: var(--kwithu-pure-white);
}


.contact-final-actions .primary-button:hover {
    background: var(--kwithu-black-soft);
}


.contact-final-actions .secondary-button {
    border-color: var(--kwithu-black);

    background: transparent;

    color: var(--kwithu-black);

    backdrop-filter: none;
}


.contact-final-actions .secondary-button:hover {
    background: var(--kwithu-black);

    color: var(--kwithu-pure-white);
}


/* =========================================================
   FORM VALIDATION STATES
========================================================= */

.form-group input:user-invalid,
.form-group select:user-invalid,
.form-group textarea:user-invalid {
    border-color: rgba(170, 50, 50, 0.5);
}


.form-group input:user-valid,
.form-group select:user-valid,
.form-group textarea:user-valid {
    border-color: rgba(70, 120, 75, 0.35);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.primary-button:focus-visible,
.secondary-button:focus-visible,
.visit-direction-button:focus-visible,
.form-submit:focus-visible,
.contact-info-content a:focus-visible,
.enquiry-note a:focus-visible {
    outline: 2px solid var(--kwithu-gold);

    outline-offset: 4px;
}


.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contact-hero {
        min-height: 620px;
    }


    .contact-intro-grid {
        gap: 55px;
    }


    .contact-enquiry-grid {
        gap: 55px;
    }


    .contact-enquiry-copy {
        position: static;
    }


    .contact-visit-content {
        padding: 50px;
    }

}


/* =========================================================
   TABLET / LARGE MOBILE
========================================================= */

@media (max-width: 850px) {

    .page-container {
        width: min(
            calc(100% - 40px),
            var(--page-width)
        );
    }


    .contact-hero {
        min-height: 600px;
    }


    .contact-hero-content {
        padding: 100px 0 90px;
    }


    .contact-hero-content h1 {
        font-size: clamp(
            3rem,
            9vw,
            4.6rem
        );
    }


    .contact-intro {
        padding: 90px 0 65px;
    }


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

        gap: 25px;
    }


    .contact-intro-text {
        padding-top: 0;
    }


    .contact-information {
        padding-bottom: 90px;
    }


    .contact-information-grid {
        grid-template-columns: 1fr 1fr;
    }


    .contact-info-card:last-child {
        grid-column: 1 / -1;
    }


    .contact-enquiry {
        padding: 90px 0;
    }


    .contact-enquiry-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-enquiry-copy h2 {
        max-width: 650px;
    }


    .enquiry-note {
        margin-top: 40px;
    }


    .contact-visit {
        padding: 90px 0;
    }


    .contact-visit-grid {
        grid-template-columns: 1fr;
    }


    .contact-visit-content {
        padding: 55px 45px;
    }


    .contact-visit-map,
    .contact-visit-map iframe {
        min-height: 430px;
    }


    .contact-final-cta {
        padding: 100px 0;
    }

}


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

@media (max-width: 600px) {

    .page-container {
        width: calc(100% - 32px);
    }


    /* HERO */

    .contact-hero {
        min-height: 570px;
    }


    .contact-hero-background {
        background-position: 58% center;
    }


    .contact-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(15, 14, 13, 0.96) 0%,
                rgba(15, 14, 13, 0.78) 100%
            );
    }


    .contact-hero-content {
        padding: 85px 0 75px;
    }


    .contact-hero-content h1 {
        font-size: clamp(
            2.8rem,
            13vw,
            4rem
        );

        line-height: 1;
    }


    .contact-hero-content p {
        margin-top: 23px;

        font-size: 0.9rem;

        line-height: 1.75;
    }


    .contact-hero-actions {
        align-items: stretch;
        flex-direction: column;

        margin-top: 30px;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
    }


    /* INTRO */

    .contact-intro {
        padding: 75px 0 55px;
    }


    .section-eyebrow {
        margin-bottom: 16px;

        font-size: 0.65rem;
    }


    .contact-intro-heading h2 {
        font-size: 2.55rem;

        line-height: 1.08;
    }


    .contact-intro-text p {
        font-size: 0.9rem;

        line-height: 1.8;
    }


    /* CONTACT CARDS */

    .contact-information {
        padding: 10px 0 75px;
    }


    .contact-information-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .contact-info-card:last-child {
        grid-column: auto;
    }


    .contact-info-card {
        min-height: 250px;

        padding: 27px;
    }


    .contact-info-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 24px;
    }


    .contact-info-content h3 {
        font-size: 1.4rem;
    }


    /* ENQUIRY */

    .contact-enquiry {
        padding: 75px 0;
    }


    .contact-enquiry-grid {
        gap: 45px;
    }


    .contact-enquiry-copy h2 {
        font-size: 2.7rem;
    }


    .contact-enquiry-copy > p {
        font-size: 0.88rem;
    }


    .enquiry-note {
        gap: 13px;

        margin-top: 35px;
    }


    .enquiry-note-icon {
        width: 38px;
        height: 38px;
    }


    .enquiry-note p {
        font-size: 0.76rem;
    }


    .contact-form-wrapper {
        padding: 25px 20px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .form-group {
        margin-bottom: 18px;
    }


    .form-group input,
    .form-group select {
        height: 52px;
    }


    .form-group textarea {
        min-height: 140px;
    }


    /* VISIT */

    .contact-visit {
        padding: 75px 0;
    }


    .contact-visit-grid {
        min-height: auto;
    }


    .contact-visit-content {
        padding: 45px 27px;
    }


    .contact-visit-content h2 {
        font-size: 2.7rem;
    }


    .contact-visit-content p {
        font-size: 0.88rem;
    }


    .contact-visit-map,
    .contact-visit-map iframe {
        min-height: 350px;
    }


    /* FINAL CTA */

    .contact-final-cta {
        padding: 85px 0;
    }


    .contact-final-content h2 {
        font-size: 2.8rem;

        line-height: 1.04;
    }


    .contact-final-content > p {
        font-size: 0.88rem;
    }


    .contact-final-actions {
        flex-direction: column;
    }


    .contact-final-actions .primary-button,
    .contact-final-actions .secondary-button {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .page-container {
        width: calc(100% - 26px);
    }


    .contact-hero-content h1 {
        font-size: 2.65rem;
    }


    .contact-intro-heading h2,
    .contact-enquiry-copy h2,
    .contact-visit-content h2 {
        font-size: 2.35rem;
    }


    .contact-final-content h2 {
        font-size: 2.45rem;
    }


    .contact-form-wrapper {
        padding: 22px 16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}