/* ============================================================
   Cozy Home — Shared luxury identity stylesheet
   Used by: b2b.html, projects.html, interior-design.html
   ============================================================ */

:root {
    --ch-bg:        #ffffff;
    --ch-bg-soft:   #faf7f1;
    --ch-bg-dark:   #0e0e0e;
    --ch-bg-darker: #060606;
    --ch-ink:       #1a1a1a;
    --ch-ink-soft:  #555555;
    --ch-muted:     #8a8a8a;
    --ch-line:      #e7dfd0;
    --ch-bronze:    #b08d57;
    --ch-bronze-d:  #8c6c3e;
    --ch-beige:     #ece4d3;
    --ch-beige-l:   #f5efe4;

    --ch-radius: 4px;
    --ch-shadow: 0 6px 28px rgba(0,0,0,0.06);
    --ch-shadow-strong: 0 18px 50px rgba(0,0,0,0.18);

    --ch-h-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --ch-h-arabic: "Tajawal", "Cairo", "Segoe UI", sans-serif;
    --ch-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ch-body);
    color: var(--ch-ink);
    background: var(--ch-bg);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body { font-family: var(--ch-h-arabic); }

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ch-bronze); }

/* ---------- Typography ---------- */
.h-serif, .ch-h1, .ch-h2, .ch-h3, .ch-eyebrow {
    font-family: var(--ch-h-serif);
    font-weight: 400;
    color: var(--ch-ink);
    margin: 0;
    letter-spacing: 0.01em;
}
.ch-h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; }
.ch-h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; }
.ch-h3 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; }
.ch-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ch-bronze);
    margin-bottom: 14px;
    font-family: var(--ch-body);
    font-weight: 500;
}
[dir="rtl"] .ch-eyebrow { font-family: var(--ch-h-arabic); }
.ch-rule {
    width: 56px;
    height: 1px;
    background: var(--ch-bronze);
    margin: 18px 0 22px;
}
.ch-text-muted { color: var(--ch-muted); }
.ch-lead { font-size: 17px; line-height: 1.8; color: var(--ch-ink-soft); }

/* ---------- Layout ---------- */
.ch-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ch-section { padding: clamp(56px, 9vw, 110px) 0; }
.ch-section--soft { background: var(--ch-bg-soft); }
.ch-section--dark { background: var(--ch-bg-dark); color: #efe9dc; }
.ch-section--dark .ch-h1, .ch-section--dark .ch-h2, .ch-section--dark .ch-h3 { color: #f6efe2; }
.ch-section--dark .ch-eyebrow { color: var(--ch-bronze); }

.ch-grid { display: grid; gap: 24px; }
.ch-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ch-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 992px) {
    .ch-grid--3, .ch-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ch-grid--2, .ch-grid--3, .ch-grid--4, .ch-grid--5 { grid-template-columns: 1fr; }
}

/* ---------- Header (preview navbar) ---------- */
.ch-topbar {
    background: var(--ch-bg-dark);
    color: #c9c1b1;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.12em;
    padding: 8px 16px;
}
.ch-nav {
    background: #fff;
    border-bottom: 1px solid var(--ch-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.ch-nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ch-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ch-nav__mark {
    width: 38px;
    height: 38px;
    border: 1px solid var(--ch-ink);
    display: grid;
    place-items: center;
    font-family: var(--ch-h-serif);
    font-size: 18px;
    color: var(--ch-ink);
    letter-spacing: -1px;
}
.ch-nav__name {
    font-family: var(--ch-h-serif);
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--ch-ink);
}
.ch-nav__links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.ch-nav__links a { color: var(--ch-ink); }
.ch-nav__links a.is-current { color: var(--ch-bronze); }
.ch-nav__icons { display: flex; gap: 14px; color: var(--ch-ink); }
@media (max-width: 900px) {
    .ch-nav__links, .ch-nav__icons { display: none; }
}

/* ---------- Hero ---------- */
.ch-hero {
    position: relative;
    min-height: 78vh;
    color: #f6efe2;
    background: var(--ch-bg-darker);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.ch-hero__media {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.55) contrast(1.05);
}
.ch-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.65) 100%);
}
.ch-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 80px 24px;
    margin: 0 auto;
    text-align: center;
}
.ch-hero__content .ch-h1 { color: #fbf6ec; }
.ch-hero__content .ch-eyebrow { color: var(--ch-bronze); }
.ch-hero__content p { color: #d5cebd; font-size: 17px; line-height: 1.85; margin: 18px 0 32px; }
.ch-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border: 1px solid var(--ch-bronze);
    color: #f6efe2;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 12px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.ch-hero__cta:hover { background: var(--ch-bronze); color: #1a1a1a; }
.ch-hero__cta + .ch-hero__cta { margin-inline-start: 10px; }
.ch-hero__cta--solid { background: var(--ch-bronze); color: #1a1a1a; }
.ch-hero__cta--solid:hover { background: var(--ch-bronze-d); color: #fff; }

/* ---------- Buttons ---------- */
.ch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid var(--ch-ink);
    background: var(--ch-ink);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s ease;
}
.ch-btn:hover { background: var(--ch-bronze); border-color: var(--ch-bronze); color: #1a1a1a; }
.ch-btn--ghost { background: transparent; color: var(--ch-ink); }
.ch-btn--ghost:hover { background: var(--ch-ink); color: #fff; }
.ch-btn--gold { background: var(--ch-bronze); border-color: var(--ch-bronze); color: #1a1a1a; }
.ch-btn--gold:hover { background: var(--ch-bronze-d); border-color: var(--ch-bronze-d); color: #fff; }

/* ---------- Cards ---------- */
.ch-card {
    background: #fff;
    border: 1px solid var(--ch-line);
    transition: transform .35s ease, box-shadow .35s ease;
}
.ch-card:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow-strong); }
.ch-card__media {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    display: block;
    overflow: hidden;
    position: relative;
}
.ch-card__body { padding: 18px 20px 22px; }
.ch-card__title { font-family: var(--ch-h-serif); font-size: 19px; margin: 0 0 4px; color: var(--ch-ink); }
.ch-card__meta { color: var(--ch-muted); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.ch-card__price { color: var(--ch-bronze); font-size: 15px; margin-top: 10px; font-weight: 600; }

/* ---------- Category card (smaller) ---------- */
.ch-cat-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ch-beige);
    cursor: pointer;
}
.ch-cat-card__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .8s ease;
}
.ch-cat-card:hover .ch-cat-card__bg { transform: scale(1.06); }
.ch-cat-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}
.ch-cat-card__label {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    text-align: center;
    color: #fff;
    font-family: var(--ch-h-serif);
    font-size: 22px;
    letter-spacing: 0.06em;
}
[dir="rtl"] .ch-cat-card__label { font-family: var(--ch-h-arabic); }

/* ---------- Section header ---------- */
.ch-section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.ch-section-head .ch-rule { margin: 18px auto 22px; }
.ch-section-head p { color: var(--ch-ink-soft); font-size: 16px; line-height: 1.85; }

/* ---------- CTA strip ---------- */
.ch-cta {
    background: var(--ch-bg-dark);
    color: #f6efe2;
    text-align: center;
    padding: clamp(60px, 8vw, 96px) 24px;
}
.ch-cta .ch-h2 { color: #f6efe2; }
.ch-cta p { color: #c9c1b1; font-size: 16px; max-width: 620px; margin: 18px auto 30px; }
.ch-cta .ch-btn { background: var(--ch-bronze); border-color: var(--ch-bronze); color: #1a1a1a; }
.ch-cta .ch-btn:hover { background: #fff; border-color: #fff; color: #1a1a1a; }
.ch-cta__row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ch-cta__whats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #25D366;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all .25s ease;
}
.ch-cta__whats:hover { background: #1da653; color: #fff; }

/* ---------- Footer ---------- */
.ch-footer {
    background: #060606;
    color: #c0b89e;
    padding: 60px 0 30px;
    font-size: 13px;
}
.ch-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
@media (max-width: 800px) { .ch-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ch-footer__grid { grid-template-columns: 1fr; } }
.ch-footer h5 {
    font-family: var(--ch-h-serif);
    color: #f6efe2;
    font-size: 16px;
    margin: 0 0 18px;
    letter-spacing: 0.04em;
}
.ch-footer ul { list-style: none; margin: 0; padding: 0; }
.ch-footer ul li { padding: 4px 0; }
.ch-footer ul a { color: #c0b89e; }
.ch-footer ul a:hover { color: var(--ch-bronze); }
.ch-footer__bottom {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid #222;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: #6e6657;
    font-size: 12px;
    letter-spacing: 0.1em;
}

/* ---------- Wholesale (B2B) — pricing/feature blocks ---------- */
.ch-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--ch-line);
}
@media (max-width: 800px) { .ch-feature-grid { grid-template-columns: 1fr; } }
.ch-feature {
    padding: 38px 28px;
    text-align: center;
    border-inline-end: 1px solid var(--ch-line);
}
.ch-feature:last-child { border-inline-end: 0; }
@media (max-width: 800px) {
    .ch-feature { border-inline-end: 0; border-bottom: 1px solid var(--ch-line); }
    .ch-feature:last-child { border-bottom: 0; }
}
.ch-feature__icon {
    width: 56px; height: 56px;
    border: 1px solid var(--ch-bronze);
    border-radius: 50%;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    color: var(--ch-bronze);
    font-size: 22px;
    font-family: var(--ch-h-serif);
}
.ch-feature h4 { font-family: var(--ch-h-serif); font-size: 18px; margin: 0 0 6px; color: var(--ch-ink); }
.ch-feature p { color: var(--ch-ink-soft); margin: 0; font-size: 14px; }

/* ---------- Clients strip (Projects page) ---------- */
.ch-clients-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-top: 1px solid var(--ch-line);
    border-bottom: 1px solid var(--ch-line);
}
@media (max-width: 992px) { .ch-clients-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ch-clients-strip { grid-template-columns: repeat(2, 1fr); } }
.ch-client {
    aspect-ratio: 16/9;
    display: grid;
    place-items: center;
    border-inline-end: 1px solid var(--ch-line);
    color: #555;
    font-family: var(--ch-h-serif);
    font-size: 18px;
    letter-spacing: 0.18em;
    background: #fff;
    transition: background .25s ease, color .25s ease;
}
.ch-client:hover { background: var(--ch-beige-l); color: var(--ch-bronze); }
.ch-clients-strip > .ch-client:last-child { border-inline-end: 0; }

/* ---------- Project cards (large) ---------- */
.ch-project {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: #ddd;
}
.ch-project__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .8s ease;
}
.ch-project:hover .ch-project__bg { transform: scale(1.06); }
.ch-project__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
}
.ch-project__content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px;
    color: #fff;
}
.ch-project__content small {
    color: var(--ch-bronze);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
}
.ch-project__content h3 {
    font-family: var(--ch-h-serif);
    font-size: 24px;
    margin: 8px 0 0;
    color: #fff;
}

/* ---------- Masonry gallery (Interior Design page) ---------- */
.ch-masonry {
    column-count: 4;
    column-gap: 14px;
}
@media (max-width: 1100px) { .ch-masonry { column-count: 3; } }
@media (max-width: 740px)  { .ch-masonry { column-count: 2; } }
@media (max-width: 460px)  { .ch-masonry { column-count: 1; } }
.ch-masonry__item {
    margin: 0 0 14px;
    break-inside: avoid;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.ch-masonry__item img { width: 100%; display: block; transition: transform .8s ease; }
.ch-masonry__item:hover img { transform: scale(1.04); }
.ch-masonry__item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
    opacity: 0; transition: opacity .25s ease;
}
.ch-masonry__item:hover::after { opacity: 1; }

/* ---------- Tabs (Interior categories) ---------- */
.ch-tabs {
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.ch-tab {
    padding: 10px 22px;
    color: var(--ch-ink-soft);
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: color .25s ease, border-color .25s ease;
    background: none;
    border-top: 0; border-inline: 0;
}
.ch-tab:hover { color: var(--ch-bronze); }
.ch-tab.is-active { color: var(--ch-ink); border-bottom-color: var(--ch-bronze); }

/* ---------- Stats row ---------- */
.ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 800px) { .ch-stats { grid-template-columns: repeat(2, 1fr); } }
.ch-stat__num { font-family: var(--ch-h-serif); font-size: 44px; color: var(--ch-bronze); line-height: 1; }
.ch-stat__label { color: var(--ch-muted); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 8px; }

/* ---------- B2B account row ---------- */
.ch-b2b-bar {
    background: #1a1a1a;
    color: #d5cebd;
    font-size: 12px;
    letter-spacing: 0.16em;
    border-bottom: 1px solid #2a2a2a;
}
.ch-b2b-bar__inner {
    max-width: 1240px; margin: 0 auto; padding: 8px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.ch-b2b-bar a { color: var(--ch-bronze); text-transform: uppercase; }
.ch-b2b-bar a + a { margin-inline-start: 16px; }

/* ---------- Industries served ---------- */
.ch-industries {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border: 1px solid var(--ch-line);
}
@media (max-width: 992px) { .ch-industries { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ch-industries { grid-template-columns: repeat(2, 1fr); } }
.ch-industry {
    padding: 32px 16px;
    text-align: center;
    border-inline-end: 1px solid var(--ch-line);
    border-bottom: 1px solid var(--ch-line);
    transition: background .25s ease;
    cursor: default;
}
.ch-industry:hover { background: var(--ch-beige-l); }
.ch-industry:nth-child(6n) { border-inline-end: 0; }
@media (max-width: 992px) {
    .ch-industry { border-inline-end: 1px solid var(--ch-line); }
    .ch-industry:nth-child(6n) { border-inline-end: 1px solid var(--ch-line); }
    .ch-industry:nth-child(3n) { border-inline-end: 0; }
}
.ch-industry__icon {
    width: 50px; height: 50px;
    margin: 0 auto 10px;
    display: grid; place-items: center;
    color: var(--ch-bronze);
    font-size: 22px;
    border: 1px solid var(--ch-bronze);
    border-radius: 50%;
}
.ch-industry__label {
    font-family: var(--ch-h-serif);
    color: var(--ch-ink);
    font-size: 15px;
    margin: 0;
}

/* ---------- Volume pricing table ---------- */
.ch-pricing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ch-line);
    background: #fff;
}
@media (max-width: 800px) { .ch-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ch-pricing { grid-template-columns: 1fr; } }
.ch-tier {
    padding: 32px 24px;
    text-align: center;
    border-inline-end: 1px solid var(--ch-line);
    transition: background .25s ease;
}
.ch-tier:last-child { border-inline-end: 0; }
@media (max-width: 800px) {
    .ch-tier { border-inline-end: 1px solid var(--ch-line); border-bottom: 1px solid var(--ch-line); }
    .ch-tier:nth-child(2n) { border-inline-end: 0; }
}
.ch-tier--featured { background: var(--ch-bg-dark); color: #f6efe2; }
.ch-tier--featured .ch-tier__qty,
.ch-tier--featured .ch-tier__discount,
.ch-tier--featured .ch-tier__note { color: #f6efe2; }
.ch-tier--featured .ch-tier__discount { color: var(--ch-bronze); }
.ch-tier__qty {
    font-family: var(--ch-h-serif);
    font-size: 26px;
    color: var(--ch-ink);
    margin: 0 0 8px;
}
.ch-tier__discount {
    font-family: var(--ch-h-serif);
    font-size: 44px;
    color: var(--ch-bronze);
    line-height: 1;
    margin: 0 0 6px;
}
.ch-tier__note {
    color: var(--ch-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
}

/* ---------- Quote-request form ---------- */
.ch-quote {
    background: var(--ch-bg-soft);
    padding: clamp(40px, 6vw, 70px);
    border: 1px solid var(--ch-line);
}
.ch-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .ch-form-grid { grid-template-columns: 1fr; } }
.ch-field { display: flex; flex-direction: column; }
.ch-field--full { grid-column: 1 / -1; }
.ch-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ch-ink-soft);
    margin-bottom: 6px;
}
.ch-field input, .ch-field select, .ch-field textarea {
    border: 1px solid var(--ch-line);
    background: #fff;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--ch-ink);
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease;
}
.ch-field input:focus, .ch-field select:focus, .ch-field textarea:focus { border-color: var(--ch-bronze); }
.ch-field textarea { min-height: 110px; resize: vertical; }

/* ---------- Brand partners strip ---------- */
.ch-brands-strip {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    border-top: 1px solid var(--ch-line);
    border-bottom: 1px solid var(--ch-line);
}
@media (max-width: 992px) { .ch-brands-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .ch-brands-strip { grid-template-columns: repeat(2, 1fr); } }
.ch-brand-slot {
    aspect-ratio: 16/9;
    display: grid; place-items: center;
    border-inline-end: 1px solid var(--ch-line);
    color: #777;
    font-family: var(--ch-h-serif);
    font-size: 15px;
    letter-spacing: 0.18em;
    background: #fff;
    transition: color .25s ease, background .25s ease;
}
.ch-brand-slot:last-child { border-inline-end: 0; }
.ch-brand-slot:hover { color: var(--ch-bronze); background: var(--ch-beige-l); }

/* ---------- Reveal-on-scroll animations ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.96); }
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Filter pills ---------- */
.ch-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}
.ch-filter-pill {
    padding: 9px 20px;
    border: 1px solid var(--ch-line);
    background: #fff;
    color: var(--ch-ink-soft);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s ease;
    font-family: inherit;
    border-radius: 50px;
}
.ch-filter-pill:hover {
    border-color: var(--ch-bronze);
    color: var(--ch-bronze);
}
.ch-filter-pill.is-active {
    background: var(--ch-ink);
    border-color: var(--ch-ink);
    color: #fff;
}
[data-cat].is-hidden { display: none !important; }

/* ---------- B2B product card extensions ---------- */
.ch-card { position: relative; display: block; }
.ch-card__media {
    position: relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    overflow: hidden;
    transition: transform .8s ease;
}
.ch-card:hover .ch-card__media { transform: scale(1.03); }
.ch-card__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}
.ch-card:hover .ch-card__media::after { opacity: 1; }
.ch-card__hover-actions {
    position: absolute;
    bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 8px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    z-index: 2;
}
.ch-card:hover .ch-card__hover-actions {
    opacity: 1; transform: none;
}
.ch-card__icon-btn {
    width: 38px; height: 38px;
    background: #fff;
    border: 0;
    color: var(--ch-ink);
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: background .2s ease, color .2s ease, transform .2s ease;
    font-size: 14px;
    text-decoration: none;
}
.ch-card__icon-btn:hover { background: var(--ch-ink); color: #fff; transform: translateY(-2px); }
.ch-card__icon-btn--whatsapp { background: #25D366; color: #fff; }
.ch-card__icon-btn--whatsapp:hover { background: #1da653; color: #fff; }

/* ---------- Wholesale badges (B2B page) ---------- */
.ch-badge-row {
    position: absolute;
    top: 12px; inset-inline-start: 12px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
}
.ch-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--ch-body);
    border-radius: 2px;
    backdrop-filter: blur(4px);
}
[dir="rtl"] .ch-badge { font-family: var(--ch-h-arabic); letter-spacing: 0.04em; }
.ch-badge--moq       { background: rgba(176,141,87,0.92); color: #fff; }
.ch-badge--bulk      { background: rgba(236,228,211,0.92); color: #2a2218; }
.ch-badge--wholesale { background: rgba(14,14,14,0.88); color: #f6efe2; }

/* ---------- Floating WhatsApp ---------- */
.ch-fab-whatsapp {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    width: 56px; height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 24px;
    box-shadow: 0 10px 28px rgba(37,211,102,0.45);
    z-index: 100;
    transition: transform .25s ease, background .25s ease;
}
.ch-fab-whatsapp:hover { transform: scale(1.08); background: #1da653; color: #fff; }
.ch-fab-whatsapp::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: rgba(37,211,102,0.35);
    z-index: -1;
    animation: ch-pulse 2s ease-out infinite;
}
@keyframes ch-pulse {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Lightbox ---------- */
.ch-no-scroll { overflow: hidden; }
.ch-lightbox {
    position: fixed; inset: 0;
    background: rgba(6,6,6,0.95);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ch-lb-fade .25s ease forwards;
}
.ch-lightbox.is-open { display: flex; }
@keyframes ch-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ch-lightbox__stage {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    display: grid;
    place-items: center;
    animation: ch-lb-scale .35s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ch-lb-scale {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.ch-lightbox__stage img {
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.ch-lightbox__close,
.ch-lightbox__prev,
.ch-lightbox__next {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    backdrop-filter: blur(4px);
}
.ch-lightbox__close {
    top: 22px; inset-inline-end: 22px;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}
.ch-lightbox__prev,
.ch-lightbox__next {
    top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 18px;
    display: grid; place-items: center;
}
.ch-lightbox__prev { inset-inline-start: 22px; }
.ch-lightbox__next { inset-inline-end:   22px; }
.ch-lightbox__close:hover,
.ch-lightbox__prev:hover,
.ch-lightbox__next:hover {
    background: var(--ch-bronze);
    border-color: var(--ch-bronze);
    color: #1a1a1a;
}
.ch-lightbox__caption {
    position: absolute;
    bottom: 70px; left: 0; right: 0;
    text-align: center;
    color: #d5cebd;
    font-family: var(--ch-h-serif);
    font-size: 16px;
}
.ch-lightbox__counter {
    position: absolute;
    bottom: 28px; left: 0; right: 0;
    text-align: center;
    color: #8a8a8a;
    font-size: 11px;
    letter-spacing: 0.32em;
}
@media (max-width: 600px) {
    .ch-lightbox__close { width: 38px; height: 38px; font-size: 18px; }
    .ch-lightbox__prev, .ch-lightbox__next { width: 40px; height: 40px; }
    .ch-lightbox__caption { bottom: 56px; font-size: 14px; }
}

/* ---------- Lazy background fade-in ---------- */
[data-bg] { background-color: var(--ch-beige-l); }
.ch-card__media,
.ch-cat-card__bg,
.ch-project__bg,
.ch-hero__media { transition: opacity .6s ease; }
[data-bg]:not(.is-loaded) { opacity: 0; }
.is-loaded { opacity: 1; }

/* ---------- Project detail page ---------- */
.ch-pd-hero {
    position: relative;
    height: clamp(420px, 70vh, 720px);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.ch-pd-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%);
}
.ch-pd-hero__content {
    position: absolute;
    inset-inline-start: 0; inset-inline-end: 0;
    bottom: clamp(40px, 6vw, 80px);
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}
.ch-pd-hero__content .ch-eyebrow { color: var(--ch-bronze); }
.ch-pd-hero__content h1 { color: #fbf6ec; font-family: var(--ch-h-serif); font-size: clamp(34px, 5vw, 60px); margin: 8px 0 0; }
.ch-pd-hero__content p { color: #d5cebd; margin-top: 14px; font-size: 16px; }

.ch-pd-meta {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid var(--ch-line);
    border-bottom: 1px solid var(--ch-line);
    background: #fff;
}
@media (max-width: 992px) { .ch-pd-meta { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ch-pd-meta { grid-template-columns: 1fr; } }
.ch-pd-meta__cell {
    padding: 28px 22px;
    border-inline-end: 1px solid var(--ch-line);
}
.ch-pd-meta__cell:last-child { border-inline-end: 0; }
@media (max-width: 992px) {
    .ch-pd-meta__cell:nth-child(2n) { border-inline-end: 0; }
    .ch-pd-meta__cell { border-bottom: 1px solid var(--ch-line); }
}
.ch-pd-meta__label {
    display: block;
    color: var(--ch-muted);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ch-pd-meta__value {
    color: var(--ch-ink);
    font-family: var(--ch-h-serif);
    font-size: 18px;
    line-height: 1.4;
}

.ch-pd-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
@media (max-width: 900px) { .ch-pd-body { grid-template-columns: 1fr; gap: 32px; } }
.ch-pd-body p { color: var(--ch-ink-soft); line-height: 1.95; font-size: 16px; }
.ch-pd-body p + p { margin-top: 14px; }

.ch-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 14px;
}
.ch-gallery-grid > a {
    overflow: hidden;
    cursor: zoom-in;
    background: #ddd;
}
.ch-gallery-grid > a img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ch-gallery-grid > a:hover img { transform: scale(1.06); }
.ch-gallery-grid > a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ch-gallery-grid > a:nth-child(6) { grid-column: span 2; }
@media (max-width: 700px) {
    .ch-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .ch-gallery-grid > a:nth-child(1),
    .ch-gallery-grid > a:nth-child(6) { grid-column: auto; grid-row: auto; }
}

/* Quote + testimonial card */
.ch-quote-card {
    background: var(--ch-bg-soft);
    padding: 36px;
    border-inline-start: 3px solid var(--ch-bronze);
    margin-top: 24px;
}
.ch-quote-card p {
    font-family: var(--ch-h-serif);
    font-size: 19px;
    line-height: 1.6;
    color: var(--ch-ink);
    margin: 0;
}
.ch-quote-card cite {
    display: block;
    margin-top: 16px;
    font-style: normal;
    color: var(--ch-muted);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Related projects */
.ch-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 800px) { .ch-related { grid-template-columns: 1fr; } }

/* ---------- Improved project cards (Projects page) ---------- */
.ch-project__content { transform: translateY(8px); transition: transform .35s ease; }
.ch-project:hover .ch-project__content { transform: translateY(0); }
.ch-project__cta {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ch-bronze);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.ch-project:hover .ch-project__cta { opacity: 1; transform: none; }

/* ---------- Improved client logos ---------- */
.ch-client {
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter .3s ease, opacity .3s ease, color .3s ease, background .3s ease;
}
.ch-client:hover { filter: none; opacity: 1; }

/* ---------- Utility ---------- */
.ch-text-center { text-align: center; }
.ch-mt-32 { margin-top: 32px; }
.ch-mt-48 { margin-top: 48px; }
.ch-flex-center { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.ch-sticky-top-1 { position: sticky; top: 80px; }