/* Parvaiz - Page-specific Styles */

/* Jumbotron (Home) */
.jumbotron {
    position: relative;
    min-height: calc(100vh - 73px);
    background-image: url('../assets/image/bg-jumbotron.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.jumbotron__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center 30%; */
    z-index: 0;
    pointer-events: auto;
}
.jumbotron::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}
.jumbotron__content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    padding: 2rem 5rem 4rem 2rem;
    gap: 2rem;
}
.jumbotron__brand {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700;
    color: var(--color-white);
    text-transform: lowercase;
    letter-spacing: -0.02em;
    line-height: 0.9;
}
.jumbotron__text {
    max-width: 420px;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    color: var(--color-white);
    line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
    .jumbotron__video {
        display: none;
    }
}
/* WhatsApp button removed from jumbotron - now using floating button */

/* Clients */
.clients { background: var(--color-white); padding: 4rem 2rem; overflow: hidden; }
.clients__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.clients__label { font-size: 0.9rem; font-weight: 500; color: #7D5F12; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.5rem; }
.clients__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.clients__desc { font-size: clamp(0.9rem, 1.1vw, 1rem); color: #6B6B6B; line-height: 1.6; }
.clients__carousel { overflow: hidden; padding: 1rem 0; }
.clients__track { display: flex; gap: 2rem; width: max-content; animation: clientsScroll 24s linear infinite; }
.clients__track:hover { animation-play-state: paused; }
.clients__item {
    flex-shrink: 0;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}
.clients__item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.clients__item img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(0.2); }
.clients__item:hover img { filter: grayscale(0); }
@keyframes clientsScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Welcome */
.welcome { background: #FAFAFA; padding: 5rem 2rem 4rem; }
.welcome__grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 3rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.welcome__label { font-size: 0.9rem; font-weight: 500; color: #7D5F12; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.welcome__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.welcome__text { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; margin-bottom: 1.5rem; text-align: justify; }
.welcome__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    background: var(--color-button-bg);
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
    margin-bottom: 2rem;
}
.welcome__btn:hover { background: #163a26; transform: translateY(-1px); }
.welcome__img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; display: block; }
.welcome__stats { display: flex; gap: 2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.welcome__stat { flex: 1; min-width: 100px; }
.welcome__stat-num { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 700; color: var(--color-text); line-height: 1.2; }
.welcome__stat-label { font-size: 0.85rem; color: #6B6B6B; margin-top: 0.25rem; }

/* Recent */
.recent { background: var(--color-white); padding: 5rem 2rem 4rem; }
.recent__grid { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.recent__header { text-align: center; max-width: 640px; }
.recent__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; width: 100%; }
.recent__card { background: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; }
.recent__card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.recent__card-link { display: block; text-decoration: none; color: inherit; }
.recent__card-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.recent__card-body { padding: 1.25rem; }
.recent__card-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.recent__card-subtitle { font-size: 0.875rem; color: #6B6B6B; }
.recent__actions { text-align: center; }
.recent__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 1rem; }
.recent__text { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; margin-bottom: 0; }
.recent__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    background: var(--color-button-bg);
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.recent__btn:hover { background: #163a26; transform: translateY(-1px); }

/* Features */
.features { background: #FAFAFA; padding: 5rem 2rem 4rem; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.features__item { background: var(--color-white); border-radius: 8px; padding: 2rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; }
.features__item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.features__img-wrap { margin-bottom: 1.5rem; }
.features__img { width: 100%; max-height: 280px; object-fit: contain; display: block; }
.features__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.features__text { font-size: 0.95rem; color: #6B6B6B; line-height: 1.6; margin-bottom: 1rem; }
.features__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease, gap 0.2s ease; }
.features__link:hover { color: var(--color-active); gap: 0.5rem; }

/* Category */
.category { background: var(--color-white); padding: 5rem 2rem 4rem; }
.category__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.category__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.category__subtitle { font-size: clamp(0.9rem, 1.1vw, 1rem); color: #6B6B6B; line-height: 1.6; }
.category__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.category__item { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; position: relative; aspect-ratio: 1; }
.category__item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.category__item a { text-decoration: none; color: inherit; display: block; position: absolute; inset: 0; }
.category__img-wrap { position: absolute; inset: 0; }
.category__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.25rem 1.5rem; background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); }
.category__item-title { font-size: 0.95rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.03em; }
.category__item-count { font-size: 0.8rem; color: #6B6B6B; margin-top: 0.2rem; }

/* Home: Showroom & FAQ - 1 section, kiri Showroom, kanan FAQ */
.showroom-faq { background: #FAFAFA; padding: 5rem 2rem 4rem; }
.showroom-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; align-items: start; }
/* Kolom kiri: Showroom */
.showroom-faq__left { }
.showroom-faq__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.showroom-faq__desc { font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: #6B6B6B; line-height: 1.6; margin-bottom: 1.5rem; }
.showroom-faq__map { width: 100%; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
/* Kolom kanan: FAQ */
.showroom-faq__right { }
.showroom-faq__header { margin-bottom: 1.5rem; }
.showroom-faq__faq-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.showroom-faq__faq-subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.6; }
.showroom-faq__list { display: flex; flex-direction: column; gap: 0.5rem; }
.showroom-faq__item { background: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.showroom-faq__item.active { background: #F0F0F0; }
.showroom-faq__question { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem 1.25rem 1rem; cursor: pointer; text-align: left; width: 100%; border: none; background: none; font-family: inherit; }
.showroom-faq__item.active .showroom-faq__question { padding-bottom: 0.75rem; }
.showroom-faq__num { font-size: 0.85rem; color: #5C5C5C; flex-shrink: 0; }
.showroom-faq__q-text { flex: 1; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.showroom-faq__icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--color-text); transition: transform 0.2s ease; }
.showroom-faq__item.active .showroom-faq__icon { transform: rotate(180deg); }
.showroom-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.showroom-faq__item.active .showroom-faq__answer { max-height: 300px; }
.showroom-faq__answer-inner { padding: 0 1rem 1.25rem 3rem; font-size: 0.95rem; color: #6B6B6B; line-height: 1.6; }

/* FAQ (untuk halaman lain yang masih menggunakan class faq) */
.faq { background: #FAFAFA; padding: 5rem 2rem 4rem; }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.faq__header { margin-bottom: 0; }
.faq__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.faq__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.6; }
.faq__map { width: 100%; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: none; }
.faq__list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq__item { background: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.faq__item.active { background: #F0F0F0; }
.faq__question { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem 1.25rem 1rem; cursor: pointer; text-align: left; width: 100%; border: none; background: none; font-family: inherit; }
.faq__item.active .faq__question { padding-bottom: 0.75rem; }
.faq__num { font-size: 0.85rem; color: #9E9E9E; flex-shrink: 0; }
.faq__q-text { flex: 1; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.faq__icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--color-text); transition: transform 0.2s ease; }
.faq__item.active .faq__icon { transform: rotate(180deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__item.active .faq__answer { max-height: 300px; }
.faq__answer-inner { padding: 0 1rem 1.25rem 3rem; font-size: 0.95rem; color: #6B6B6B; line-height: 1.6; }

/* About Page */
.about { padding: 6rem 2rem; background: var(--color-white); }
.about__header { max-width: 640px; margin: 0 auto; text-align: center; }
.about__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.about__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.about__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; margin-bottom: 2.5rem; }
.about__img-wrap { text-align: center; margin-bottom: 2.5rem; }
.about__img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.about__body { max-width: 720px; margin: 0 auto; }
.about__text { font-size: clamp(0.95rem, 1.15vw, 1.05rem); color: var(--color-text); line-height: 1.7; margin-bottom: 1.5rem; }
.about__text:last-child { margin-bottom: 0; }

/* SVLK, Compro, Factory, Showroom - from about */
.svlk { padding: 5rem 2rem; background: #FAFAFA; }
.svlk__header { max-width: 1000px; margin: 0 auto 2.5rem; }
.svlk__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.svlk__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); text-transform: uppercase; }
.svlk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.svlk__card { background: var(--color-white); border: 1px solid #E8E8E8; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.svlk__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.svlk__card:nth-child(1) { grid-column: 1 / -1; flex-direction: row; gap: 2rem; text-align: left; }
.svlk__card-img { max-width: 100px; height: auto; margin-bottom: 1rem; }
.svlk__card:nth-child(1) .svlk__card-img { max-width: 140px; margin-bottom: 0; }
.svlk__card-text { font-size: 0.9rem; color: var(--color-text); line-height: 1.5; }
.svlk__card-text--green { color: #2D7D46; font-weight: 700; font-size: 1rem; }
.svlk__card-text--grey { color: #6B6B6B; margin-top: 0.25rem; }
.svlk__card-text--orange { color: #C45C26; font-weight: 700; }

.compro { padding: 5rem 2rem; background: var(--color-white); }
.compro__header { max-width: 1100px; margin: 0 auto 2.5rem; }
.compro__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.compro__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); text-transform: uppercase; }
.compro__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; max-width: 1100px; margin: 0 auto; align-items: start; }
.compro__images { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.compro__img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; display: block; }
.compro__img-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.compro__info { display: flex; flex-direction: column; gap: 0; }
.compro__info-wrap { background: var(--color-white); border-radius: 12px; border: 1px solid #E8E8E8; box-shadow: 0 4px 20px rgba(0,0,0,0.06); overflow: hidden; }
.compro__info-item { padding: 1rem 1.25rem; border-bottom: 1px solid #F0F0F0; transition: background 0.2s ease; }
.compro__info-item:hover { background: #FAFAFA; }
.compro__info-item:last-child { border-bottom: none; }
.compro__info-item--highlight { background: linear-gradient(135deg, #1F472E 0%, #2a5a3a 100%); border-radius: 12px 12px 0 0; border-bottom: none; }
.compro__info-item--highlight:hover { background: linear-gradient(135deg, #1F472E 0%, #2a5a3a 100%); }
.compro__info-item--highlight .compro__info-label, .compro__info-item--highlight .compro__info-value { color: var(--color-white); }
.compro__info-label { font-size: 0.8rem; color: #999; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.compro__info-value { font-size: 0.95rem; color: var(--color-text); line-height: 1.5; }
.compro__info-value--small { font-size: 0.9rem; }
.compro__info-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.compro__info-tag { display: inline-block; background: #F0F7F4; color: #1F472E; padding: 0.35rem 0.75rem; border-radius: 20px; font-size: 0.8rem; }

.factory { padding: 5rem 2rem; background: #FAFAFA; }
.factory__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.factory__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; margin-bottom: 0.5rem; }
.factory__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.factory__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.factory__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 280px); gap: 1rem; max-width: 1200px; margin: 0 auto; }
.factory__item { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.factory__item:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.factory__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.factory__item:hover img { transform: scale(1.05); }
.factory__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; }
.factory__item:hover::after { opacity: 1; }

/* Team Section */
.team { padding: 5rem 2rem; background: var(--color-white); }
.team__header { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto 3rem; align-items: start; }
.team__header-left { }
.team__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.team__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); line-height: 1.2; }
.team__header-right { }
.team__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.team__card { text-align: center; }
.team__img-wrap { margin-bottom: 1.25rem; }
.team__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.team__name { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.team__role { font-size: 0.95rem; color: #6B6B6B; }

.showroom { padding: 5rem 2rem; background: var(--color-white); }
.showroom__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.showroom__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; margin-bottom: 0.5rem; }
.showroom__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.showroom__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.showroom__wrap { max-width: 1100px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid #E8E8E8; }
.showroom__map { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* Bespoke Page - CTA & Why Partner */
.bespoke__cta { padding: 4rem 2rem; background: #FAFAFA; text-align: center; }
.bespoke__cta-inner { max-width: 560px; margin: 0 auto; }
.bespoke__cta-text { font-size: clamp(1rem, 1.2vw, 1.1rem); color: #6B6B6B; line-height: 1.6; margin-bottom: 1.5rem; }
.bespoke__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2.25rem; background: var(--color-button-bg); color: var(--color-white); text-decoration: none; font-size: 1rem; font-weight: 500; font-family: var(--font-satoshi); border-radius: 8px; border: none; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(31, 71, 46, 0.35); }
.bespoke__cta-btn:hover { background: #163a26; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31, 71, 46, 0.4); }
.bespoke__cta-btn:active { transform: translateY(0); }
.bespoke__cta-btn svg { width: 20px; height: 20px; }
.why-partner { padding: 4rem 2rem; background: var(--color-white); }
.why-partner__header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.why-partner__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); line-height: 1.3; }
.why-partner__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.why-partner__item { display: flex; gap: 1rem; text-align: left; padding: 1.5rem; background: #FAFAFA; border-radius: 12px; border-left: 4px solid #C99B50; transition: box-shadow 0.2s ease; }
.why-partner__item:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
.why-partner__bullet { flex-shrink: 0; width: 12px; height: 12px; margin-top: 0.4rem; background: #C99B50; border-radius: 2px; }
.why-partner__content { flex: 1; }
.why-partner__heading { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.why-partner__desc { font-size: 0.95rem; color: #6B6B6B; line-height: 1.65; }

/* Bespoke Page */
.bespoke { padding: 6rem 2rem; background: var(--color-white); }
.bespoke__header { max-width: 640px; margin: 0 auto; text-align: center; }
.bespoke__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.bespoke__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.bespoke__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; margin-bottom: 2.5rem; }
.bespoke__body { max-width: 720px; margin: 0 auto; }
.bespoke__text { font-size: clamp(0.95rem, 1.15vw, 1.05rem); color: var(--color-text); line-height: 1.7; margin-bottom: 1.5rem; }
.bespoke__text strong { font-weight: 700; }
.bespoke__gallery { padding: 3rem 2rem 4rem; background: #FAFAFA; }
.bespoke__gallery-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.bespoke__gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bespoke__gallery-item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.bespoke__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Collections / Products */
.products-header { padding: 4rem 2rem 2rem; text-align: center; }
.products-header__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.products-header__subtitle { font-size: clamp(0.9rem, 1.1vw, 1rem); color: #6B6B6B; line-height: 1.6; max-width: 560px; margin: 0 auto; }
.hero { position: relative; max-width: 1400px; margin: 0 auto 4rem; padding: 0 2rem; }
.hero__slider { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.hero__track { display: flex; transition: transform 0.5s ease; }
.hero__slide { min-width: 100%; position: relative; aspect-ratio: 21/9; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide-content { position: absolute; left: 3rem; bottom: 3rem; z-index: 2; }
.hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%); pointer-events: none; }
.hero__tag { display: inline-block; background: rgba(50,50,50,0.9); color: var(--color-white); padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.75rem; }
.hero__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--color-white); margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero__subtitle { font-size: clamp(0.9rem, 1.1vw, 1rem); color: rgba(255,255,255,0.95); line-height: 1.5; }
.hero__prev, .hero__next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(50,50,50,0.8); color: var(--color-white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background 0.2s ease; }
.hero__prev:hover, .hero__next:hover { background: rgba(30,30,30,0.95); }
.hero__prev { left: 2.5rem; } .hero__next { right: 2.5rem; }
.hero__prev svg, .hero__next svg { width: 24px; height: 24px; }
.hero__dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 3; }
.hero__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.9); cursor: pointer; transition: background 0.2s ease; }
.hero__dot.active { background: var(--color-white); }
.categories { padding: 0 2rem 5rem; max-width: 1400px; margin: 0 auto; }
.categories__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.categories__item {
    flex: 0 0 calc((100% - 7 * 1.5rem) / 8);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}
.categories__item:hover { transform: translateY(-4px); }
.categories__img-wrap { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 4px 16px rgba(0,0,0,0.08); margin-bottom: 1rem; }
.categories__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.categories__item:hover .categories__img-wrap img { transform: scale(1.05); }
.categories__label { font-size: 1rem; font-weight: 600; color: var(--color-text); text-align: center; }
.listing { max-width: 1200px; margin: 0 auto; padding: 0 2rem 4rem; }
.listing__search-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.listing__search-wrap { flex: 1; min-width: 200px; position: relative; }
.listing__search-wrap svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #9E9E9E; pointer-events: none; }
.listing__search { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-satoshi); color: var(--color-text); background: var(--color-white); }
.listing__search::placeholder { color: #9E9E9E; }
.listing__search:focus { outline: none; border-color: #999; }
.listing__find { padding: 0.85rem 1.5rem; background: #3D3D3D; color: var(--color-white); border: none; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-satoshi); font-weight: 400; cursor: pointer; transition: background 0.2s ease; }
.listing__find:hover { background: #2a2a2a; }
.listing__filter { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; background: var(--color-white); color: #3D3D3D; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-satoshi); font-weight: 400; cursor: pointer; transition: border-color 0.2s ease; }
.listing__filter:hover { border-color: #999; }
.listing__filter svg { width: 18px; height: 18px; }
.listing__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; }
.listing__total { font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--color-text); }
.listing__total span { font-weight: 400; color: #6B6B6B; font-size: 0.95rem; }
.listing__sort { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: none; border: none; font-size: 0.9rem; color: #3D3D3D; font-family: var(--font-satoshi); cursor: pointer; }
.listing__sort svg { width: 20px; height: 20px; }
.listing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.listing__card { text-decoration: none; color: inherit; display: block; background: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; }
.listing__card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.listing__card-img-wrap { aspect-ratio: 1; overflow: hidden; background: #F5F5F5; }
.listing__card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__card-body { padding: 1.25rem; }
.listing__card-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.35rem; }
.listing__card-price { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.listing__card-cat { font-size: 0.875rem; color: #6B6B6B; }
.listing__pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; }
.listing__page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.5rem; border: 1px solid #E0E0E0; background: var(--color-white); color: var(--color-text); border-radius: 8px; font-size: 0.9rem; font-family: var(--font-satoshi); text-decoration: none; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.listing__page-btn:hover { border-color: #999; background: #FAFAFA; }
.listing__page-btn--current { background: #3D3D3D; color: var(--color-white); border-color: #3D3D3D; }
.listing__page-btn--current:hover { background: #2a2a2a; border-color: #2a2a2a; }
.listing__page-btn svg { width: 20px; height: 20px; }
.listing__page-ellipsis { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: #6B6B6B; font-size: 0.9rem; cursor: default; }

/* Blog */
.blog-hero { padding: 6rem 2rem 4rem; background: var(--color-white); }
.blog-hero__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.blog-hero__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.blog-hero__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.blog-hero__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.blog-list { padding: 0 2rem 5rem; background: #FAFAFA; }
.blog-list__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-list__pagination .admin-pagination { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.blog-card { background: var(--color-white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; color: inherit; display: block; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.blog-card__img-wrap { aspect-ratio: 16/10; overflow: hidden; background: #F0F0F0; }
.blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 1.5rem; }
.blog-card__meta { font-size: 0.8rem; color: #C99B50; font-weight: 500; margin-bottom: 0.5rem; }
.blog-card__title { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; line-height: 1.4; }
.blog-card__excerpt { font-size: 0.9rem; color: #6B6B6B; line-height: 1.6; }
.blog-card__link { display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 500; color: var(--color-button-bg); }

/* Article Detail */
.article-hero { padding: 4rem 2rem 3rem; background: var(--color-white); }
.article-hero__inner { max-width: 720px; margin: 0 auto; }
.article-hero__back { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-active); text-decoration: none; font-size: 0.9rem; margin-bottom: 1.5rem; }
.article-hero__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.article-hero__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); line-height: 1.25; margin-bottom: 1rem; }
.article-hero__meta { font-size: 0.95rem; color: #6B6B6B; }
.article-featured { max-width: 960px; margin: 0 auto; padding: 0 2rem 2rem; }
.article-featured__wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); aspect-ratio: 16/10; }
.article-featured__wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body { max-width: 720px; margin: 0 auto; padding: 0 2rem 4rem; background: var(--color-white); }
.article-body__prose { font-size: 1.05rem; line-height: 1.8; color: #333; }
.article-body__prose p { margin-bottom: 1.25rem; }

/* Product Detail */
.product-detail { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 4rem; }
.product-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.product-detail__gallery { position: sticky; top: 6rem; }
.product-detail__main-wrap { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #F5F5F5; margin-bottom: 1rem; }
.product-detail__main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail__thumbs { display: flex; gap: 0.75rem; }
.product-detail__thumb { width: calc((100% - 1.5rem) / 3); aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #F5F5F5; transition: border-color 0.2s ease; padding: 0; display: block; }
.product-detail__thumb:hover, .product-detail__thumb.active { border-color: #3D3D3D; }
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail__content { }
.product-detail__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; }
.product-detail__section-title { font-size: 0.9rem; font-weight: 600; color: #6B6B6B; margin-bottom: 0.75rem; }
.product-detail__specs { margin-bottom: 1.5rem; }
.product-detail__spec-row { display: flex; margin-bottom: 0.5rem; font-size: 0.95rem; }
.product-detail__spec-label { color: #6B6B6B; min-width: 140px; flex-shrink: 0; }
.product-detail__spec-value { color: var(--color-text); }
.product-detail__spec-value ul { list-style: none; }
.product-detail__spec-value li { margin-bottom: 0.2rem; }
.product-detail__colors { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.product-detail__color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #E0E0E0; cursor: pointer; transition: border-color 0.2s ease; padding: 0; background: transparent; }
.product-detail__color:hover { border-color: #999; }
.product-detail__color--black { background: #2a2a2a; }
.product-detail__color--teal { background: #2d6a6a; }
.product-detail__color--tan { background: #c4a574; }
.product-detail__color--cream { background: #f5f0e6; }
.product-detail__info { font-size: 0.95rem; color: #6B6B6B; line-height: 1.7; margin-bottom: 1rem; }
.product-detail__read-more { color: var(--color-text); font-weight: 500; text-decoration: none; font-size: 0.9rem; }
.product-detail__read-more:hover { text-decoration: underline; }
.product-detail__order-title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; color: var(--color-text); margin: 1.5rem 0 1rem; }
.product-detail__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.product-detail__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-satoshi); font-weight: 400; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; cursor: pointer; }
.product-detail__btn:link,
.product-detail__btn:visited { text-decoration: none; }
.product-detail__btn--wa { background: #25D366; color: var(--color-white); border: none; }
.product-detail__btn--wa:hover { background: #20bd5a; color: var(--color-white); }
.product-detail__btn--email { background: var(--color-white); color: var(--color-text); border: 1px solid #E0E0E0; }
.product-detail__btn--email:hover { border-color: #999; color: var(--color-text); }
.product-detail__btn svg { width: 22px; height: 22px; flex-shrink: 0; }

/* You Might Also Like (also-like) */
.also-like { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 4rem; background: #FAFAFA; }
.also-like__title { font-size: clamp(1.35rem, 2vw, 1.5rem); font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; }
.also-like__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.also-like__card { text-decoration: none; color: inherit; display: block; background: var(--color-white); border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.also-like__card:link,
.also-like__card:visited { color: inherit; text-decoration: none; }
.also-like__card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.also-like__img-wrap { aspect-ratio: 1; overflow: hidden; background: #F5F5F5; display: block; }
.also-like__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.also-like__body { padding: 1.25rem; }
.also-like__card-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.35rem; line-height: 1.4; }
.also-like__card-price { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.also-like__card-cat { font-size: 0.875rem; color: #6B6B6B; }

/* B2B / Commercial Projects */
.b2b-header { padding: 6rem 2rem 4rem; background: var(--color-white); }
.b2b-header__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.b2b-header__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.b2b-header__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.b2b-header__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.b2b-header__gallery { max-width: 1200px; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 280px); gap: 1rem; }
.b2b-header__item { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.b2b-header__item:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.b2b-header__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.b2b-header__item:hover img { transform: scale(1.05); }
.b2b-header__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; }
.b2b-header__item:hover::after { opacity: 1; }

/* OEM Corner Section */
.oem { padding: 5rem 2rem; background: #FAFAFA; }
.oem__header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.oem__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.oem__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.oem__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.oem__body { max-width: 720px; margin: 0 auto; background: var(--color-white); border-radius: 12px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #E8E8E8; }
.oem__text { font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: var(--color-text); line-height: 1.75; margin-bottom: 1.25rem; }
.oem__text:last-of-type { margin-bottom: 0; }
.oem__cta-wrap { text-align: center; margin-top: 2rem; }
.oem__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--color-button-bg); color: var(--color-white); text-decoration: none; font-size: 1rem; font-weight: 500; font-family: var(--font-satoshi); border-radius: 8px; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(31,71,46,0.3); }
.oem__cta:hover { background: #163a26; transform: translateY(-2px); }

/* ODM Section */
.odm { padding: 5rem 2rem; background: var(--color-white); }
.odm__header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.odm__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.odm__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.odm__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.odm__body { max-width: 720px; margin: 0 auto; background: #FAFAFA; border-radius: 12px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #E8E8E8; }
.odm__text { font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: var(--color-text); line-height: 1.75; margin-bottom: 1.25rem; }
.odm__text:last-of-type { margin-bottom: 0; }
.odm__cta-wrap { text-align: center; margin-top: 2rem; }
.odm__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--color-button-bg); color: var(--color-white); text-decoration: none; font-size: 1rem; font-weight: 500; font-family: var(--font-satoshi); border-radius: 8px; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(31,71,46,0.3); }
.odm__cta:hover { background: #163a26; transform: translateY(-2px); }

/* Contract Manufacturing Section */
.contract { padding: 5rem 2rem; background: #FAFAFA; }
.contract__header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.contract__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.contract__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.contract__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.contract__body { max-width: 720px; margin: 0 auto; background: var(--color-white); border-radius: 12px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #E8E8E8; }
.contract__text { font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: var(--color-text); line-height: 1.75; margin-bottom: 1.25rem; }
.contract__text:last-of-type { margin-bottom: 0; }
.contract__cta-wrap { text-align: center; margin-top: 2rem; }
.contract__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--color-button-bg); color: var(--color-white); text-decoration: none; font-size: 1rem; font-weight: 500; font-family: var(--font-satoshi); border-radius: 8px; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(31,71,46,0.3); }
.contract__cta:hover { background: #163a26; transform: translateY(-2px); }

/* Material Section */
.material { padding: 5rem 2rem; background: var(--color-white); }
.material__header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.material__label { font-size: 0.9rem; font-weight: 500; color: #C99B50; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.material__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.material__subtitle { font-size: clamp(0.9rem, 1.05vw, 1rem); color: #6B6B6B; line-height: 1.7; }
.material__wrap { max-width: 1100px; margin: 0 auto; }
.material__content { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.material__text-block { display: flex; flex-direction: column; gap: 1.25rem; }
.material__text { font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: var(--color-text); line-height: 1.75; }
.material__gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: 1rem; }
.material__img-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); aspect-ratio: 4/3; }
.material__img-wrap:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.material__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CTA Download Section */
.cta-download { padding: 4rem 2rem; background: var(--color-white); text-align: center; }
.cta-download__inner { max-width: 560px; margin: 0 auto; }
.cta-download__text { font-size: clamp(1rem, 1.2vw, 1.1rem); color: #6B6B6B; line-height: 1.6; margin-bottom: 1.5rem; }
.cta-download__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--color-button-bg); color: var(--color-white); text-decoration: none; font-size: 1rem; font-weight: 500; font-family: var(--font-satoshi); border-radius: 8px; border: none; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(31,71,46,0.35); }
.cta-download__btn:hover { background: #163a26; transform: translateY(-2px); }
.cta-download__btn svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
    .categories__item { flex: 0 0 calc((100% - 2 * 1.5rem) / 3); }
    .listing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .jumbotron { min-height: calc(100vh - 65px); }
    .jumbotron__content { flex-direction: column; align-items: flex-start; padding: 1.5rem 5rem 5rem 1.5rem; gap: 1.5rem; }
    .jumbotron__brand { font-size: clamp(3.5rem, 15vw, 6rem); }
    .jumbotron__text { max-width: 100%; }
    .clients { padding: 3rem 1.5rem; }
    .clients__header { margin-bottom: 2rem; }
    .clients__item { width: 160px; height: 90px; }
    .clients__track { gap: 1.5rem; animation-duration: 20s; }
    .welcome { padding: 3rem 1.5rem; }
    .welcome__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .welcome__stats { gap: 1.5rem; }
    .recent { padding: 4rem 1.5rem 3rem; }
    .recent__grid { gap: 2.5rem; }
    .recent__cards { grid-template-columns: repeat(2, 1fr); }
    .features { padding: 4rem 1.5rem 3rem; }
    .features__grid { grid-template-columns: 1fr; gap: 2rem; }
    .category { padding: 4rem 1.5rem 3rem; }
    .category__header { margin-bottom: 2rem; }
    .category__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .showroom-faq { padding: 4rem 1.5rem 3rem; }
    .showroom-faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .showroom-faq__map { margin-top: 1.5rem; aspect-ratio: 16/9; }
    .faq { padding: 4rem 1.5rem 3rem; }
    .faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .faq__map { order: -1; aspect-ratio: 16/9; }
    .svlk__grid { grid-template-columns: 1fr; } .svlk__card:nth-child(1) { grid-column: 1; flex-direction: column; text-align: center; }
    .compro__grid { grid-template-columns: 1fr; }
    .compro__info-wrap { order: -1; }
    .factory__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 220px); }
    .team { padding: 4rem 1.5rem; }
    .team__header { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
    .team__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .bespoke { padding: 4rem 1.5rem; }
    .bespoke__subtitle { margin-bottom: 2rem; }
    .bespoke__gallery { padding: 2.5rem 1.5rem 3rem; }
    .bespoke__gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .why-partner { padding: 3rem 1.5rem; }
    .why-partner__header { margin-bottom: 2rem; }
    .why-partner__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .why-partner__item { padding: 1.25rem; }
    .products-header { padding: 3rem 1.5rem 1.5rem; }
    .hero { padding: 0 1.5rem 3rem; }
    .hero__slide-content { left: 2rem; bottom: 2rem; }
    .hero__prev { left: 1rem; }
    .hero__next { right: 1rem; }
    .hero__prev, .hero__next { width: 40px; height: 40px; }
    .hero__slide { aspect-ratio: 16/9; }
    .categories { padding: 0 1.5rem 4rem; }
    .categories__item { flex: 0 0 calc((100% - 1 * 1.25rem) / 2); }
    .categories__grid { gap: 1.25rem; }
    .listing { padding: 0 1.5rem 3rem; }
    .listing__search-bar { flex-direction: column; align-items: stretch; }
    .listing__search-wrap { min-width: 0; }
    .listing__find, .listing__filter { width: 100%; justify-content: center; }
    .listing__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .blog-list__grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail { padding: 2rem 1.5rem 3rem; }
    .product-detail__grid { grid-template-columns: 1fr; gap: 2rem; }
    .product-detail__gallery { position: static; }
    .product-detail__title { margin-bottom: 1.25rem; }
    .also-like { padding: 0 1.5rem 3rem; }
    .also-like__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .b2b-header { padding: 4rem 1.5rem 3rem; }
    .oem, .odm, .contract, .material { padding: 4rem 1.5rem; }
    .material__content { grid-template-columns: 1fr; gap: 2rem; }
    .material__gallery { order: -1; }
    .oem__header, .odm__header, .contract__header { margin-bottom: 2rem; }
    .oem__body, .odm__body, .contract__body { padding: 2rem; }
    .b2b-header__gallery { margin-top: 2rem; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 220px); gap: 0.75rem; }
    .svlk__grid { grid-template-columns: 1fr; }
    .svlk__card:nth-child(1) { grid-column: 1; flex-direction: column; text-align: center; }
    .svlk__card:nth-child(1) .svlk__card-img { margin-bottom: 1rem; }
    .team { padding: 3rem 1.5rem; }
    .team__header { margin-bottom: 2rem; }
    .team__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 600px) {
    .jumbotron { min-height: calc(100vh - 60px); }
    .recent { padding: 3rem 1rem 2.5rem; }
    .recent__cards { grid-template-columns: 1fr; gap: 1.25rem; }
    .recent__grid { gap: 2rem; }
    .bespoke { padding: 3rem 1rem; }
    .bespoke__header { margin-bottom: 0; }
    .bespoke__subtitle { margin-bottom: 1.5rem; }
    .bespoke__text { margin-bottom: 1.25rem; }
    .bespoke__gallery { padding: 2rem 1rem 2.5rem; }
    .bespoke__gallery-grid { grid-template-columns: 1fr; gap: 1rem; }
    .bespoke__cta { padding: 3rem 1rem; }
    .bespoke__cta-text { margin-bottom: 1.25rem; }
    .bespoke__cta-btn { width: 100%; max-width: 280px; padding: 0.95rem 1.75rem; font-size: 0.95rem; }
    .why-partner { padding: 2.5rem 1rem; }
    .why-partner__header { margin-bottom: 1.5rem; }
    .why-partner__item { flex-direction: row; gap: 0.75rem; padding: 1rem; }
    .why-partner__heading { font-size: 1rem; }
    .why-partner__desc { font-size: 0.9rem; }
    .category__grid { grid-template-columns: 1fr; }
    .products-header { padding: 2.5rem 1rem 1rem; }
    .hero { padding: 0 1rem 2rem; }
    .hero__slide-content { left: 1.25rem; bottom: 1.5rem; }
    .hero__tag { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
    .hero__prev, .hero__next { width: 36px; height: 36px; }
    .hero__prev { left: 0.75rem; }
    .hero__next { right: 0.75rem; }
    .hero__slide { aspect-ratio: 4/3; }
    .hero__dots { bottom: 1rem; }
    .categories { padding: 0 1rem 3rem; }
    .categories__item { flex: 0 0 100%; }
    .categories__grid { gap: 1rem; }
    .categories__label { font-size: 0.95rem; }
    .listing { padding: 0 1rem 2.5rem; }
    .listing__search-bar { margin-bottom: 1.5rem; }
    .listing__bar { margin-bottom: 1rem; }
    .listing__grid { grid-template-columns: 1fr; gap: 1rem; }
    .listing__card-body { padding: 1rem; }
    .listing__pagination { margin-top: 2rem; gap: 0.35rem; }
    .listing__page-btn, .listing__page-ellipsis { min-width: 36px; height: 36px; font-size: 0.85rem; }
    .blog-list__grid { grid-template-columns: 1fr; }
    .factory__grid { grid-template-columns: 1fr; grid-template-rows: repeat(9, 200px); }
    .product-detail { padding: 1.5rem 1rem 2.5rem; }
    .product-detail__thumbs { gap: 0.5rem; }
    .product-detail__buttons { flex-direction: column; }
    .product-detail__btn { width: 100%; justify-content: center; }
    .also-like { padding: 0 1rem 2.5rem; }
    .also-like__grid { grid-template-columns: 1fr; gap: 1rem; }
    .b2b-header { padding: 3rem 1rem 2.5rem; }
    .b2b-header__gallery { margin-top: 1.5rem; grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); gap: 0.75rem; }
    .b2b-header__item { border-radius: 8px; }
    .oem, .odm, .contract, .material { padding: 3rem 1rem; }
    .material__content { gap: 1.5rem; }
    .material__gallery { grid-template-columns: 1fr; }
    .material__img-wrap:first-child { grid-column: 1; aspect-ratio: 16/9; }
    .material__img-wrap { aspect-ratio: 4/3; }
    .oem__header, .odm__header, .contract__header { margin-bottom: 1.5rem; }
    .oem__body, .odm__body, .contract__body { padding: 1.5rem; }
    .oem__cta-wrap, .odm__cta-wrap, .contract__cta-wrap { margin-top: 1.5rem; }
    .oem__cta, .odm__cta, .contract__cta { width: 100%; max-width: 280px; }
    .cta-download { padding: 2.5rem 1rem; }
    .cta-download__btn { width: 100%; max-width: 280px; padding: 0.95rem 1.75rem; font-size: 0.95rem; }
}

/* Home page – small screens (match index.html 480px) */
@media (max-width: 480px) {
    .jumbotron__content { padding: 1.25rem 4.5rem 5rem 1rem; }
    .jumbotron__brand { font-size: clamp(2.5rem, 18vw, 4rem); }
    .jumbotron__text { font-size: 0.875rem; }
    .clients { padding: 2.5rem 1rem; }
    .clients__header { margin-bottom: 1.5rem; }
    .clients__item { width: 140px; height: 80px; padding: 1rem; }
    .clients__track { gap: 1.25rem; animation-duration: 18s; }
    .welcome { padding: 2.5rem 1rem; }
    .welcome__grid { gap: 2rem; }
    .welcome__stats { flex-direction: column; gap: 1rem; }
    .welcome__stat { min-width: auto; }
    .recent { padding: 3rem 1rem 2.5rem; }
    .recent__cards { grid-template-columns: 1fr; gap: 1.25rem; }
    .recent__grid { gap: 2rem; }
    .features { padding: 3rem 1rem 2.5rem; }
    .features__item { padding: 1.5rem; }
    .category { padding: 3rem 1rem 2.5rem; }
    .category__header { margin-bottom: 1.5rem; }
    .category__grid { grid-template-columns: 1fr; gap: 1rem; }
    .showroom-faq { padding: 3rem 1rem 2.5rem; }
    .showroom-faq__question { padding: 1rem; }
    .showroom-faq__answer-inner { padding: 0 1rem 1rem 2.5rem; }
    .faq { padding: 3rem 1rem 2.5rem; }
    .faq__question { padding: 1rem; }
    .faq__answer-inner { padding: 0 1rem 1rem 2.5rem; }
            .svlk { padding: 3rem 1rem; }
            .svlk__header { margin-bottom: 1.5rem; }
            .svlk__card { padding: 1.5rem; }
            .svlk__card:nth-child(1) { gap: 1.5rem; }
    .team { padding: 3rem 1rem; }
    .team__header { margin-bottom: 2rem; gap: 1.5rem; }
    .team__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .team__img-wrap { margin-bottom: 1rem; }
    .team__name { font-size: 1rem; }
    .team__role { font-size: 0.9rem; }
}