/* Vertical rhythm between the intro paragraphs (about.php) */
.about-page .stylux-intro-text .section-title p {
    margin: 0 auto 24px !important;
}

.about-page .stylux-intro-text .section-title p:last-child {
    margin: 0 auto !important;
}

/* ================================================
   INTERIOR DESIGN SOLUTIONS SECTION
================================================ */
.interior-solutions-section {
    --ink: #221a13;
    --muted: #6b6b6b;
    --line: rgba(0, 0, 0, 0.09);
    --accent: #9c6a3c;
    --cream: #FAF6F0;
    padding: 60px 0;
}

@media (max-width: 767px) {
    .interior-solutions-section {
        padding: 36px 0;
    }
}

.interior-solutions-section .container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.interior-solutions-section.light-section {
    background-color: var(--cream);
}


@media (max-width: 767px) {
    .interior-solutions-section .stylux-section-card {
        padding: 30px 22px;
        border-radius: 18px;
    }
}

/* Card is the positioning context for the outer arrows */
.interior-solutions-section .stylux-sticky-section {
    position: relative;
    display: grid;
     grid-template-columns: 350px 1fr;
    align-items:  stretch;
    gap: 16px;
}

/* ===== Left: heading + image ===== */
.interior-solutions-section .stylux-sticky-image-col {
    width: 350px;
    height: 350px;
}

.interior-solutions-section .stylux-sticky-heading {
    margin: 0 0 22px;
}

.interior-solutions-section .stylux-sticky-heading h2 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--ink);
}

.interior-solutions-section .stylux-sticky-heading p {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    color: var(--muted);
}

.interior-solutions-section .stylux-sticky-image-wrap {
    width: 100%;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--cream) !important;
    box-shadow: none;
}
.interior-solutions-section .stylux-sticky-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    background: var(--cream) !important;
    display: block;
    transition: opacity 0.25s ease;
}

/* ===== Right: cream panel with active text item ===== */
.interior-solutions-section .stylux-scroll-text-col {
     flex: 1 1 100%;
    min-width: 0;
    position: relative;
    height: 350px;
    overflow: hidden;
}

.interior-solutions-section .stylux-scroll-item {
    position: absolute;
    inset: 0;
    background: white;
    border-left: 4px solid var(--accent);
    border-radius: 0 16px 16px 0;
    padding: 18px 44px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease;
    overflow: hidden;
}

.interior-solutions-section .stylux-scroll-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Inner wrapper: centers short content, but lets tall content scroll */
.interior-solutions-section .stylux-scroll-item-inner {
    margin: 0;
    width: 100%;
}

.interior-solutions-section .stylux-scroll-item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--ink);
}

.interior-solutions-section .stylux-scroll-item p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 12px;
    color: var(--muted);
    text-align: justify;
}

.interior-solutions-section .stylux-scroll-item p:last-child {
    margin-bottom: 0;
}

/* ===== Arrows: pinned to outer edges, vertically centered on the whole card ===== */
.interior-solutions-section .stylux-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 10px 22px rgba(34, 26, 19, 0.14);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.interior-solutions-section .stylux-scroll-arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.interior-solutions-section .stylux-scroll-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.interior-solutions-section .stylux-scroll-arrow.prev {
    left: -21px;
}

.interior-solutions-section .stylux-scroll-arrow.next {
    right: -21px;
}

.interior-solutions-section .stylux-scroll-text-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 24px; 
}
.interior-solutions-section .stylux-scroll-text-col {
    flex: 1 1 100%;
    min-width: 0;
    position: relative;
    height: 350px;
    overflow: hidden;
}

.interior-solutions-section .stylux-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 10px 22px rgba(34,26,19,0.14);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.interior-solutions-section .stylux-scroll-arrow svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.interior-solutions-section .stylux-scroll-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.interior-solutions-section .stylux-scroll-arrow.prev { left: 3px; }
.interior-solutions-section .stylux-scroll-arrow.next { right: -21px; }

@media (max-width: 991px) {
    .interior-solutions-section .stylux-fixed-height-card {
        height: auto !important;
        min-height: 0 !important;
    }
    .interior-solutions-section .stylux-section-card { overflow: visible; }

    .interior-solutions-section .stylux-sticky-section {
        display: block;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
        .interior-solutions-section .stylux-scroll-text-wrap {
        padding-left: 0;
    }
    .interior-solutions-section .stylux-sticky-image-col { max-width: 100%; margin-bottom: 0; }
    .interior-solutions-section .stylux-sticky-heading { margin-bottom: 16px; }
    .interior-solutions-section .stylux-sticky-image-wrap { height: auto; aspect-ratio: 16 / 9; }
    .interior-solutions-section .stylux-scroll-text-wrap { justify-content: center; gap: 14px; margin-bottom: 4px; }
    .interior-solutions-section .stylux-scroll-text-col { height: auto; min-height: 300px; width: 100%; order: 1; }
    .interior-solutions-section .stylux-scroll-item {
        position: relative;
        inset: auto;
        border-radius: 16px;
        border-left: 4px solid var(--accent);
        display: none;
    }
    .interior-solutions-section .stylux-scroll-item.active { display: block; }
    .interior-solutions-section .stylux-scroll-arrow {
        position: static;
        top: auto; left: auto; right: auto;
        transform: none;
        margin-top: 18px;
        order: 2;
    }
    .interior-solutions-section .stylux-scroll-arrow.next { order: 3; }
    
}

@media (max-width: 767px) {
    .interior-solutions-section .stylux-section-card { padding-bottom: 36px; }
}
@media (max-width: 767px) {
    .interior-solutions-section .stylux-sticky-heading h2 { font-size: 21px; }
    .interior-solutions-section .stylux-sticky-heading p { font-size: 13px; }
    .interior-solutions-section .stylux-scroll-item { padding: 24px 22px; }
    .interior-solutions-section .stylux-scroll-item h3 { font-size: 20px; margin-bottom: 8px; }
    .interior-solutions-section .stylux-scroll-item p { font-size: 14px; line-height: 1.65; }
    .interior-solutions-section .stylux-scroll-arrow { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
    .interior-solutions-section .stylux-sticky-image-wrap { aspect-ratio: 4 / 3; }
    .interior-solutions-section .stylux-scroll-item { padding: 20px 18px; }
}
.interior-solutions-section .stylux-slide-counter {
    display: none;
}

@media (max-width: 991px) {
    .interior-solutions-section .stylux-scroll-text-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        position: static !important;
    }

    .interior-solutions-section .stylux-scroll-text-col {
        order: 1 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .interior-solutions-section .stylux-scroll-arrow {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    .interior-solutions-section .stylux-scroll-arrow.prev {
        order: 2 !important;
    }

    .interior-solutions-section .stylux-slide-counter {
        order: 3 !important;
        display: block !important;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        align-self: center;
    }

    .interior-solutions-section .stylux-scroll-arrow.next {
        order: 4 !important;
    }
}
/* ============================================================
   MOBILE LAYOUT FIX — each section keeps its own height,
   nothing overlaps the next section
   ============================================================ */
@media (max-width: 991px) {

    /* Kill any fixed/clipped height so content is never cut off
       or floating on top of the next section */
    .about-page .stylux-section-card,
    .interior-solutions-section .stylux-section-card,
    .interior-solutions-section .stylux-fixed-height-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Intro section: force clean block stacking */
    .about-page .stylux-intro-wrap {
        display: block !important;
    }
    .about-page .stylux-intro-text,
    .about-page .stylux-intro-image {
        width: 100% !important;
        position: static !important;
    }
    .about-page .stylux-intro-image {
        margin-top: 24px;
    }

    /* Interior Design Solutions: was still CSS grid on mobile — force block */
    .interior-solutions-section .stylux-sticky-section {
        display: block !important;
    }
    .interior-solutions-section .stylux-sticky-image-col {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px;
    }
    .interior-solutions-section .stylux-scroll-text-wrap {
        padding-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .interior-solutions-section .stylux-scroll-text-col {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }
    .interior-solutions-section .stylux-scroll-item {
        position: relative !important;
        inset: auto !important;
        display: none;
        padding: 24px 22px !important;
    }
    .interior-solutions-section .stylux-scroll-item.active {
        display: block !important;
    }
    .interior-solutions-section .stylux-scroll-arrow {
        position: static !important;
        transform: none !important;
        margin-top: 14px;
    }
    .interior-solutions-section .stylux-slide-counter {
        display: block !important;
        order: 3;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        align-self: center;
    }

    /* Guarantee each stacked section owns its own box, no bleed into the next */
    .about-page.our-best-offers,
    .interior-solutions-section,
    .about-page.white-section {
        overflow: visible;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .stylux-checklist-grid {
        grid-template-columns: 1fr;
    }

    .stylux-checklist-grid .stylux-check-line {
        border-bottom: 1px solid var(--line);
    }

    .stylux-checklist-grid .stylux-check-line:last-child {
        border-bottom: none;
    }
    .stylux-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
}
}


/* ===== Section 2: Discuss Your Requirement — tinted coverage cards ===== */
.contact-discuss-row {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .contact-discuss-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.contact-discuss-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--ink), var(--brand-navy-950));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 10px 22px rgba(34, 26, 19, 0.2);
}

.contact-discuss-icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-discuss-lead {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Warm-tinted cards — soft sand wash, ink icon chip with dashed ring, serif
           numeral watermark, topic tag, and an arrow chip that fills on hover. */
.contact-cover-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-cover-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
    border: 1px solid rgba(156, 106, 60, 0.16);
    border-radius: 18px;
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.contact-cover-card::before {
    content: attr(data-num);
    position: absolute;
    top: -12px;
    right: 10px;
    font-style: italic;
    font-weight: 700;
    font-size: 78px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}

.contact-cover-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease;
}

.contact-cover-card:hover {
    transform: translateY(-4px);
    border-color: rgba(156, 106, 60, 0.4);
    box-shadow: 0 16px 34px rgba(34, 26, 19, 0.08);
}

.contact-cover-card:hover::after {
    transform: scaleX(1);
}

.contact-cover-card .cover-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--ink), var(--brand-navy-950));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    box-shadow: 0 10px 22px rgba(34, 26, 19, 0.2);
}

.contact-cover-card .cover-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 20px;
    border: 1px dashed rgba(156, 106, 60, 0.35);
    z-index: -1;
}

.contact-cover-card .cover-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-cover-card .cover-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.contact-cover-card .cover-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}

.contact-cover-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.45;
}

.contact-cover-card .cover-arrow {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(156, 106, 60, 0.3);
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.contact-cover-card:hover .cover-arrow {
    opacity: 1;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateX(2px);
}

.contact-cover-card .cover-arrow svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-cover-card.wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 18px 24px;
}

.contact-cover-card.wide::before {
    font-size: 92px;
}

.contact-cover-card.wide .cover-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.contact-cover-card.wide .cover-content {
    flex: 1;
}

.contact-cover-card.wide .cover-arrow {
    position: static;
    opacity: 1;
    flex-shrink: 0;
    margin-left: 4px;
}

@media (max-width: 560px) {
    .contact-cover-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Section 3: Visit Stylux + Enquiry ===== */
.contact-visit-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .contact-visit-grid {
        grid-template-columns: 1fr;
    }
}

/* Visit card — full-content card: eyebrow, heading, lead copy, address block,
           tinted note, and a solid directions button so there is no dead space. */
.contact-visit-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 18px 44px rgba(34, 26, 19, 0.06);
}

.contact-visit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 85%);
}

.contact-visit-card .visit-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--ink), var(--brand-navy-950));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(34, 26, 19, 0.18);
}

.contact-visit-card .visit-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-visit-card .visit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(156, 106, 60, 0.18);
    border-radius: 50px;
    padding: 6px 14px;
    margin: 14px 0 12px;
}

.contact-visit-card .visit-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.contact-visit-card h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px;
}

.contact-visit-card h2 em {
    color: inherit;
    font-style: normal;
}

.contact-visit-card>p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0;
}

.contact-visit-address {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    color: #333;
    line-height: 1.6;
    text-align: justify;
}

.contact-visit-address svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 1px;
}

.contact-visit-address strong {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.contact-visit-note {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: rgba(156, 106, 60, 0.07);
    border-radius: 0 12px 12px 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    text-align: justify;
}

.contact-visit-card .btn-directions {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ink);
    color: #fff;
    border-radius: 50px;
    padding: 15px 28px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(34, 26, 19, 0.18);
}

.contact-visit-card .btn-directions:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.contact-visit-card .btn-directions svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-enquiry-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 28px 24px;
    position: relative;
    box-shadow: 0 18px 44px rgba(34, 26, 19, 0.06);
}

.contact-enquiry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 85%);
}

.contact-enquiry-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
}

.contact-enquiry-card>p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 18px;
}

.contact-enquiry-card .form-control {
    background-color: var(--cream);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 14px;
    width: 100%;
    color: var(--ink);
}

.contact-enquiry-card .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.contact-enquiry-card .form-control::placeholder {
    color: var(--muted);
}

.contact-enquiry-card select.form-control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.contact-enquiry-card textarea.form-control {
    resize: none;
}

.contact-enquiry-card .btn-default {
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 32px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.contact-enquiry-card .btn-default:hover {
    background-color: var(--ink);
    transform: translateY(-2px);
}

.contact-enquiry-card .btn-default svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    transition: transform 0.28s ease;
}

.contact-enquiry-card .btn-default:hover svg {
    transform: translate(3px, -2px);
}

/* ===== Section 2: Why Choose Stylux — tinted coverage cards ===== */
.contact-cover-card .cover-content p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin: 6px 0 0;
}
.contact-discuss-row {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .contact-discuss-row {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: normal;
    }
}

.contact-discuss-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
}

@media (max-width: 900px) {
    .contact-discuss-col {
        height: auto;
    }
}

.contact-discuss-placeholder {
    flex: 1;
    margin-top: 12px;
    border: none;
    border-radius: 18px;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
}

.contact-discuss-placeholder svg {
    width: 38px;
    height: 38px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-discuss-placeholder span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 900px) {
    .contact-discuss-placeholder {
        flex: none;
        min-height: 260px;
    }
}

/* Warm-tinted cards — soft sand wash, ink icon chip with dashed ring, serif
           numeral watermark, topic tag, and an arrow chip that fills on hover. */
.contact-cover-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-cover-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
    border: 1px solid rgba(156, 106, 60, 0.16);
    border-radius: 18px;
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.contact-cover-card::before {
    content: attr(data-num);
    position: absolute;
    top: -12px;
    right: 10px;
    font-style: italic;
    font-weight: 700;
    font-size: 78px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}

.contact-cover-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease;
}

.contact-cover-card:hover {
    transform: translateY(-4px);
    border-color: rgba(156, 106, 60, 0.4);
    box-shadow: 0 16px 34px rgba(34, 26, 19, 0.08);
}

.contact-cover-card:hover::after {
    transform: scaleX(1);
}

.contact-cover-card .cover-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--ink), var(--brand-navy-950));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    box-shadow: 0 10px 22px rgba(34, 26, 19, 0.2);
}

.contact-cover-card .cover-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 20px;
    border: 1px dashed rgba(156, 106, 60, 0.35);
    z-index: -1;
}

.contact-cover-card .cover-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-cover-card .cover-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.contact-cover-card .cover-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}

.contact-cover-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.45;
}

.contact-cover-card .cover-arrow {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(156, 106, 60, 0.3);
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.contact-cover-card:hover .cover-arrow {
    opacity: 1;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateX(2px);
}

.contact-cover-card .cover-arrow svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-cover-card.wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 18px 24px;
}

.contact-cover-card.wide::before {
    font-size: 92px;
}

.contact-cover-card.wide .cover-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.contact-cover-card.wide .cover-content {
    flex: 1;
}

.contact-cover-card.wide .cover-arrow {
    position: static;
    opacity: 1;
    flex-shrink: 0;
    margin-left: 4px;
}

@media (max-width: 560px) {
    .contact-cover-grid {
        grid-template-columns: 1fr;
    }
}

.stylux-faq-grid-section {
    --ink: #221a13;
    --muted: #6b6b6b;
    --line: rgba(0,0,0,0.09);
    --accent: #9c6a3c;
    --accent-soft: rgba(156,106,60,0.12);
    --cream: #FAF6F0;
    background-color: var(--cream);
    padding: 70px 0;
}
@media (max-width: 767px) { .stylux-faq-grid-section { padding: 44px 0; } }

.stylux-faq-grid-header { text-align: center; max-width: 700px; margin: 0 auto 44px; }

.stylux-faq-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid rgba(156,106,60,0.35);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 20px;
}
.stylux-faq-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.stylux-faq-grid-header h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.stylux-faq-grid-header h2 .hl {
    display: inline-block;
     background: none;
    color: black
    padding: 4px 16px;
    border-radius: 6px;
}
@media (max-width: 600px) {
    .stylux-faq-grid-header h2 { font-size: 28px; }
    .stylux-faq-grid-header h2 .hl { display: inline; padding: 2px 8px; }
}

.stylux-faq-grid-list {
    /* Two structurally-fixed columns: .stylux-faq-col wrappers below
       hold FAQs 01-05 and 06-10 permanently in the markup, so items
       never swap columns. This outer grid has exactly ONE item per
       column track (the wrapper), not one item per FAQ — so a grid
       "row" is never shared between an item in the left column and
       an item in the right column, which is what previously forced
       both sides to match height and left blank gaps behind shorter
       items. align-items: start keeps each column exactly as tall as
       its own content, independent of the other column's height. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 767px) {
    .stylux-faq-grid-list { grid-template-columns: 1fr; gap: 14px; }
}

.stylux-faq-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
@media (max-width: 767px) {
    .stylux-faq-col { gap: 14px; }
}

.stylux-faq-grid-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(34,26,19,0.05);
    min-width: 0;
}


.stylux-faq-grid-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
}
.stylux-faq-grid-item summary::-webkit-details-marker { display: none; }

.stylux-faq-grid-item .num {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(156,106,60,0.55);
    flex-shrink: 0;
}

.stylux-faq-grid-item .q {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.stylux-faq-grid-item .toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(156,106,60,0.4);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.stylux-faq-grid-item .toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.stylux-faq-grid-item[open] .toggle { background: var(--accent); color: #fff; transform: rotate(45deg); }

.stylux-faq-grid-item .a-wrap { padding: 0 26px 22px 66px; }
.stylux-faq-grid-item .a-wrap p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); text-align: left; }

@media (max-width: 480px) {
    .stylux-faq-grid-item summary { padding: 12px 16px; gap: 10px; }
    .stylux-faq-grid-item .a-wrap { padding: 0 16px 14px 16px; }
}
@media (max-width: 991px) {
    .interior-solutions-section .stylux-fixed-height-card {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }
}
.contact-discuss-placeholder {
    overflow: hidden;
    padding: 0;
}

.contact-discuss-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
/* Centered heading block above the 2-column layout */
.interior-solutions-section .stylux-solutions-heading-top {
    text-align: center;
      max-width: 100%;  
    margin: 0 auto 12px;
}
.interior-solutions-section .stylux-solutions-heading-top h2 {
   font-size: 36px;   /* match "Designed Around Your Lifestyle" ke size se — apne theme ke default h2 size se adjust kar lena */
    line-height: 1.25;
}
.interior-solutions-section .stylux-solutions-heading-top p {
    text-align: center;
    margin: 0 auto;
      max-width: none;   /* NEW — full width */
}
.interior-solutions-section .stylux-section-card {
    background: var(--cream) !important;
}
@media (max-width: 991px) {
    .interior-solutions-section .stylux-fixed-height-card {
        height: auto !important;
        min-height: 0 !important;
    }
    .interior-solutions-section .stylux-section-card { overflow: visible; }

    .interior-solutions-section .stylux-sticky-section {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
}

/* ================================================
   DESKTOP-ONLY: reduce extra top/bottom whitespace of
   the card so the image block and content block match
   height, and tighten the text card. Scoped to desktop
   so mobile keeps the theme's own tested mobile layout.
================================================ */
@media (min-width: 992px) {
    .interior-solutions-section .stylux-section-card,
    .interior-solutions-section .stylux-fixed-height-card {
        padding-top: 6px !important;
        padding-bottom: 24px !important;
    }

    .interior-solutions-section .stylux-sticky-heading,
    .interior-solutions-section .stylux-solutions-heading-top {
        margin-bottom: 6px !important;
    }

    .interior-solutions-section .stylux-solutions-heading-top h2 {
        margin-bottom: 6px !important;
    }

    .interior-solutions-section .stylux-solutions-heading-top p {
        margin-bottom: 0 !important;
    }

    /* Keep image column and content column locked to the exact same height */
    .interior-solutions-section .stylux-sticky-image-col,
    .interior-solutions-section .stylux-sticky-image-wrap,
    .interior-solutions-section .stylux-scroll-text-col {
        height: 260px !important;
    }

    /* Tighten the text card itself — content-hugging, no dead space top/bottom */
    .interior-solutions-section .stylux-scroll-item {
        padding: 10px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .interior-solutions-section .stylux-scroll-item h3 {
        margin-bottom: 6px !important;
    }

    .interior-solutions-section .stylux-scroll-item p {
        margin-bottom: 8px !important;
    }
}