/* HINDUSTAN BED & CUSHION WORKS */

:root {
    --brand: #800019;
    --dark-brand: #5d0012;
    --cream: #fffaf3;
    --ink: #291818;
    --gold: #c99a4b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--ink);
    background: var(--cream);
}

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

img {
    max-width: 100%;
}

.top {
    background: var(--brand);
    color: white;
    padding: 12px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 13px;
}

.nav {
    background: white;
    padding: 12px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.logo {
    width: 165px;
    height: auto;
    object-fit: contain;
}

.links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.links a {
    font-size: 14px;
    font-weight: 600;
}

.links a:hover {
    color: var(--brand);
}

.btn {
    display: inline-block;
    background: var(--brand);
    color: white !important;
    padding: 14px 24px;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.2s;
}

.btn:hover {
    background: var(--dark-brand);
    color: white !important;
}

.hero {
    min-height: 480px;
    padding: 0 0 0 7%;
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(90deg, #fffaf3 0%, #fffaf3 47%, #f3dfcf 47%, #ead0ba 100%);
    border-bottom: 1px solid #ead8ca;
    position: relative;
    overflow: hidden;
}

.hero > div {
    width: 48%;
    max-width: 580px;
    position: relative;
    z-index: 1;
}

.hero-media {
    width: 52%;
    height: 480px;
    position: relative;
    z-index: 1;
}

.hero-media::before {
    display: none;
}

.hero p {
    font-size: 18px;
    line-height: 1.7;
    max-width: 510px;
    margin-bottom: 30px;
}

.features {
    display: flex;
    gap: 15px;
    margin-bottom: 35px;
}

.feature {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 16px 10px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #eee1d9;
    font-size: 14px;
    line-height: 1.7;
}

.feature b {
    font-size: 13px;
}

.section {
    padding: 65px 6%;
}

.section h2 {
    font-family: Georgia, serif;
    font-size: 36px;
    color: var(--brand);
    text-align: center;
    margin: 0 0 40px;
}

.grid {
    display: grid;
    gap: 22px;
}

.cats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-4px);
}

.card-photo {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.card > div {
    padding: 18px;
}

.card b {
    color: var(--brand);
    font-size: 17px;
}

.card p {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

.products-intro {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 25px;
}

.products-intro h2 {
    margin-bottom: 15px;
}

.products-intro > p:last-child {
    margin: 0;
    color: #655b56;
    font-size: 16px;
    line-height: 1.8;
}

.product-section {
    padding-top: 25px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.product-card {
    overflow: hidden;
    background: white;
    border: 1px solid #eee1d9;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(41, 24, 24, 0.12);
}

.product-card > img {
    width: 100%;
    height: 235px;
    display: block;
    object-fit: cover;
}

.product-card-body {
    padding: 20px;
}

.product-card h3 {
    margin: 0 0 10px;
    color: var(--brand);
    font-family: Georgia, serif;
    font-size: 23px;
}

.product-card p {
    min-height: 74px;
    margin: 0 0 16px;
    color: #655b56;
    font-size: 14px;
    line-height: 1.7;
}

.text-link {
    color: var(--brand);
    font-size: 14px;
    font-weight: bold;
}

.text-link:hover {
    color: var(--dark-brand);
}

.banner {
    padding: 70px 6%;
    color: white;
    background: linear-gradient(90deg, rgba(93, 0, 18, 0.92), rgba(93, 0, 18, 0.35)), url("assets/bed-photo.jpg") center 58% / cover no-repeat;
}

.banner h1 {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 48px;
}

.banner p {
    margin: 0;
    font-size: 15px;
}

.story {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.story h2,
.about-intro h2,
.about-values h2 {
    margin-top: 0;
    text-align: left;
}

.story p,
.about-copy p,
.about-values p {
    max-width: 650px;
    color: #5f5652;
    font-size: 16px;
    line-height: 1.8;
}

.story img,
.about-image,
.values-image {
    width: 100%;
    height: 390px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(41, 24, 24, 0.14);
}

.about-intro,
.about-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.about-highlights {
    padding: 0 6% 65px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.highlight {
    min-height: 130px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
    background: white;
    border: 1px solid #eee1d9;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.highlight span {
    color: var(--brand);
    font-size: 25px;
}

.highlight b {
    color: var(--ink);
    font-size: 15px;
}

.about-values {
    background: #fff;
}

.about-values ul {
    padding: 0;
    list-style: none;
    color: var(--ink);
    line-height: 2.2;
}

.about-values li::before {
    content: "✓";
    margin-right: 10px;
    color: var(--brand);
    font-weight: bold;
}

.gallery-section {
    padding-top: 70px;
}

.section-heading {
    max-width: 650px;
    margin: 0 auto 35px;
    text-align: center;
}

.section-heading h2 {
    margin-bottom: 12px;
}

.section-heading > p:last-child {
    margin: 0;
    color: #6c625c;
    line-height: 1.7;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.gallery-grid,
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.gallery-grid figure,
.video-grid figure {
    margin: 0;
    overflow: hidden;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.gallery-grid img,
.video-grid video {
    width: 100%;
    height: 210px;
    display: block;
    object-fit: cover;
    background: #241a18;
}

.gallery-grid figcaption,
.video-grid figcaption {
    padding: 14px 16px;
    color: var(--ink);
    font-size: 14px;
    font-weight: bold;
}

.video-section {
    background: #fff;
}

.video-grid video {
    height: 230px;
}

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.contact h2 {
    text-align: left;
}

.contact-details > p,
.map p {
    color: #5f5652;
    line-height: 1.7;
}

.contact-number {
    margin: 24px 0;
    padding: 18px;
    background: white;
    border: 1px solid #eee1d9;
    border-radius: 8px;
}

.contact-number h3 {
    margin: 0 0 14px;
    color: var(--brand);
    font-size: 18px;
}

.contact-number .btn {
    padding: 10px 16px;
    margin-right: 6px;
    font-size: 13px;
}

.btn-whatsapp {
    background: #218c56;
}

.btn-whatsapp:hover {
    background: #176a40;
}

.contact-form-wrap form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form-wrap input,
.contact-form-wrap textarea {
    width: 100%;
    padding: 13px;
    border: 1px solid #d7cbc2;
    border-radius: 5px;
    font: inherit;
}

.contact-form-wrap textarea {
    min-height: 120px;
    grid-column: 1 / -1;
    resize: vertical;
}

.contact-form-wrap button {
    border: 0;
    cursor: pointer;
}

.map {
    margin-top: 40px;
}

.map-frame {
    width: 100%;
    height: 280px;
    display: block;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.location-link {
    color: inherit;
}

.location-link:hover {
    color: var(--brand);
}

.location-button {
    margin-top: 8px;
}

.brands {
    background: white;
    padding: 35px 6%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    border-top: 1px solid #eee;
}

.brands span {
    font-size: 18px;
    font-weight: bold;
    color: var(--brand);
}

footer {
    background: var(--dark-brand);
    color: white;
    padding: 55px 6%;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
}

footer img {
    width: 500px;
    max-width: 100%;
    height: auto;
}

footer b {
    font-size: 18px;
}

footer p {
    line-height: 1.9;
    font-size: 14px;
    color: #e0eeee;
}

@media (max-width: 1000px) {
    .nav {
        flex-direction: column;
    }

    .links {
        justify-content: center;
    }

    .cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .gallery-grid,
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero h1 {
        font-size: 42px;
    }

    .logo {
        width: 150px;
        height: 90px;
        object-fit: contain;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        gap: 35px;
        padding: 48px 6% 58px;
        min-height: 0;
        background: #fffaf3;
    }

    .hero-media {
        width: 100%;
        height: 340px;
        align-self: center;
    }

    .hero-media img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 650px) {
    .top {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }

    .nav {
        padding: 12px 18px 16px;
        gap: 12px;
    }

    .logo {
        width: 155px;
        height: 78px;
        object-fit: contain;
    }

    .links {
        gap: 10px 14px;
    }

    .links a {
        font-size: 13px;
    }

    .hero {
        padding: 48px 6% 58px;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 35px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 15px;
    }

    .hero-media {
        width: 100%;
        height: 250px;
        align-self: center;
    }

    .hero-media img {
        width: 100%;
        height: 100%;
    }

    .features {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }

    .feature {
        padding: 12px 10px;
    }

    .hero .btn {
        padding: 12px 18px;
    }

    .cats,
    .gallery-grid,
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

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

    .product-card > img {
        height: 220px;
    }

    .section {
        padding: 45px 5%;
    }

    .section h2 {
        font-size: 28px;
    }

    .card-photo,
    .gallery-grid img,
    .video-grid video {
        height: 150px;
    }

    .gallery-grid figcaption,
    .video-grid figcaption {
        padding: 12px;
        font-size: 12px;
    }

    footer {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .banner {
        padding: 50px 6%;
    }

    .banner h1 {
        font-size: 38px;
    }

    .story,
    .about-intro,
    .about-values {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .story img,
    .about-image,
    .values-image {
        height: 300px;
    }

    .story img,
    .about-intro .about-image {
        grid-row: 1;
    }

    .about-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: 45px;
    }

    .contact {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-form-wrap form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .cats,
    .gallery-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }

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

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

.service-card {
    position: relative;
    padding-top: 84px;
    border: 1px solid #eadfd8;
}

.service-icon {
    position: absolute;
    top: 22px;
    left: 20px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--brand);
    background: #f6ece7;
}

.service-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-card h3 {
    margin: 0 0 12px;
    color: var(--brand);
    font-family: Georgia, serif;
    font-size: 22px;
}

.service-card p {
    min-height: 0;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.75;
}

.service-card ul {
    margin: 0;
    padding-left: 19px;
    color: #514844;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 700px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}
/* Modern site refresh — 2026 */
:root {
    --brand: #750019;
    --brand-2: #a31532;
    --dark-brand: #43000d;
    --gold: #c79a4b;
    --cream: #f8f2ea;
    --surface: #ffffff;
    --ink: #211a18;
    --muted: #706763;
    --line: rgba(91, 43, 31, 0.12);
    --shadow: 0 18px 55px rgba(52, 21, 15, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: #fcfaf7;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
}

.top {
    min-height: 38px;
    padding: 8px max(5%, calc((100vw - 1240px) / 2));
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: var(--dark-brand);
    color: rgba(255,255,255,.86);
    font-size: 12px;
    letter-spacing: .02em;
}

.nav {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: 84px;
    padding: 10px max(5%, calc((100vw - 1240px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(80,30,20,.08);
    box-shadow: 0 8px 30px rgba(35,15,10,.05);
    backdrop-filter: blur(18px);
}

.logo { width: 142px; height: 64px; object-fit: contain; }
.links { display: flex; align-items: center; gap: 4px; }
.links a:not(.btn) {
    position: relative;
    padding: 10px 12px;
    color: #463b37;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition: color .2s, background .2s;
}
.links a:not(.btn):hover, .links a.active:not(.btn) { color: var(--brand); background: #f7ecee; }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--brand); font-size: 28px; cursor: pointer; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 21px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--brand),var(--brand-2));
    color: white;
    box-shadow: 0 10px 24px rgba(117,0,25,.20);
    font-weight: 750;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(117,0,25,.28); }

.hero {
    min-height: 650px;
    padding: 80px max(5%, calc((100vw - 1240px) / 2));
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,rgba(255,250,244,.97) 0%,rgba(255,250,244,.90) 39%,rgba(255,250,244,.12) 68%), url("assets/hero-home.jpg") center/cover no-repeat;
}
.hero > div:first-child { width: min(590px, 52%); }
.hero h1 { margin: 0 0 22px; color: var(--brand); font-family: Georgia,serif; font-size: clamp(44px,5vw,72px); line-height: 1.02; letter-spacing: -.04em; }
.hero p { max-width: 540px; color: #5f5550; font-size: 18px; }
.hero-media { display: none; }
.features { margin: 30px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.feature { padding: 12px 15px; background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 14px; color: #493d38; font-size: 12px; box-shadow: 0 8px 25px rgba(45,25,18,.05); }
.feature br { display: none; }
.feature b { margin-left: 6px; }

.banner {
    padding: 38px max(5%, calc((100vw - 1240px) / 2));
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 80% 10%,rgba(218,164,78,.27),transparent 28%), linear-gradient(135deg,#4a000e,#82001d 70%,#5b0012);
    color: #fff;
}
.banner::after { content:""; position:absolute; inset:0; opacity:.16; background: linear-gradient(120deg,transparent 45%,rgba(255,255,255,.25)); pointer-events:none; }
.banner h1 { position:relative; z-index:1; margin:0 0 8px; font-family:Georgia,serif; font-size:clamp(34px,4vw,48px); letter-spacing:-.025em; }
.banner p { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.76); }

.section { width: min(1240px, 90%); margin: 0 auto; padding: 88px 0; }
.section > h2, .section-heading h2, .products-intro h2, .about-copy h2, .about-values h2, .contact h2 {
    margin-top: 0;
    color: var(--ink);
    font-family: Georgia,serif;
    font-size: clamp(32px,4vw,48px);
    line-height: 1.12;
    letter-spacing: -.025em;
}
.section > h2 { margin-bottom: 34px; }
.section-heading { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.eyebrow { color: var(--brand)!important; font-size:12px!important; font-weight:850!important; letter-spacing:.16em; text-transform:uppercase; }

.grid, .cats, .product-grid, .gallery-grid, .video-grid { display:grid; gap:22px; }
.cats { grid-template-columns:repeat(5,minmax(0,1fr)); }
.card, .product-card, .gallery-grid figure, .video-grid figure {
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 10px 35px rgba(53,26,18,.07);
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover, .product-card:hover, .gallery-grid figure:hover, .video-grid figure:hover { transform:translateY(-6px); border-color:rgba(117,0,25,.22); box-shadow:var(--shadow); }
.card-photo { height:185px; width:100%; object-fit:cover; }
.card > div { padding:20px; }
.card b { color:var(--ink); font-family:Georgia,serif; font-size:20px; }
.card p { margin-bottom:0; color:var(--muted); font-size:13px; }

.products-intro { padding-bottom:24px; text-align:center; }
.products-intro > p:last-child { max-width:720px; margin:0 auto; color:var(--muted); }
.product-section { padding-top:30px; }
.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-card > img { height:260px; width:100%; object-fit:cover; }
.product-card-body { padding:24px; }
.product-card h3 { margin:0 0 9px; font-family:Georgia,serif; color:var(--ink); font-size:26px; }
.product-card p { min-height:0; color:var(--muted); }
.text-link { color:var(--brand); font-weight:800; text-decoration:none; }

.service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-card { min-height:360px; padding-top:94px; background:linear-gradient(145deg,#fff,#fbf5ef); }
.service-icon { width:62px; height:62px; top:24px; left:24px; border-radius:18px; color:#fff; background:linear-gradient(145deg,var(--brand),#a81b37); box-shadow:0 12px 25px rgba(117,0,25,.2); }
.service-card h3 { font-size:26px; color:var(--ink); }
.service-card p { color:var(--muted); font-size:14px; }
.service-card ul { padding-left:18px; color:#4f4540; }
.service-card li::marker { color:var(--gold); }
.service-cta { border:0; background:linear-gradient(135deg,#f4e7dc,#fbf7f2); box-shadow:var(--shadow); }

.about-intro, .about-values { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.about-image, .values-image { width:100%; height:430px; object-fit:cover; border-radius:26px; box-shadow:var(--shadow); }
.about-highlights { width:min(1240px,90%); margin:0 auto; padding:0 0 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; background:transparent; }
.highlight { min-height:130px; padding:25px; display:flex; flex-direction:column; justify-content:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 28px rgba(50,20,14,.06); }
.highlight span { color:var(--gold); }
.about-values ul { padding-left:20px; line-height:2; }

.gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.gallery-grid img { height:270px; }
.video-grid video { height:340px; }
.gallery-grid figcaption, .video-grid figcaption { padding:16px 18px; }

.contact { align-items:start; gap:36px; }
.contact-details, .contact-form-wrap { padding:34px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.contact-number { margin:12px 0; padding:15px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; background:#faf6f1; border-radius:14px; }
.contact-number h3 { margin:0; font-size:16px; }
.contact-number .btn { min-height:38px; padding:8px 14px; font-size:12px; }
input, textarea { width:100%; padding:15px 16px; margin-bottom:12px; border:1px solid #ded4cd; border-radius:12px; background:#fcfbf9; font:inherit; outline:none; }
input:focus, textarea:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(117,0,25,.08); }
textarea { min-height:140px; resize:vertical; }
.map { margin-top:34px; }
.map-frame { width:100%; min-height:320px; border:0; border-radius:18px; }

.brands { padding:26px max(5%,calc((100vw - 1240px)/2)); display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; background:#f2e7de; color:#5d514b; }
.brands span:first-child { color:var(--brand); font-weight:850; }

footer {
    padding:70px max(5%,calc((100vw - 1240px)/2)) 55px;
    grid-template-columns:minmax(320px,1.8fr) 1fr 1.3fr;
    gap:60px;
    background:#4f000f;
    color:#fff;
}
footer img { width:min(500px,100%); max-height:185px; object-fit:contain; object-position:left center; }
footer b { color:#e2b566; font-size:14px; letter-spacing:.1em; text-transform:uppercase; }
footer p { color:rgba(255,255,255,.72); }
.whatsapp-float { position:fixed; z-index:45; right:22px; bottom:22px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:#fff; font-size:26px; text-decoration:none; box-shadow:0 14px 32px rgba(0,0,0,.22); }

@media (max-width:1000px) {
    .top span:last-child { display:none; }
    .nav-toggle { display:block; }
    .links { display:none; position:absolute; top:calc(100% + 1px); left:4%; right:4%; padding:16px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:0 0 18px 18px; box-shadow:var(--shadow); }
    .nav.open .links { display:flex; }
    .links a { text-align:center; }
    .hero { min-height:600px; background-position:62% center; }
    .hero > div:first-child { width:58%; }
    .cats { grid-template-columns:repeat(3,1fr); }
    .product-grid, .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .about-intro, .about-values { gap:38px; }
}

@media (max-width:700px) {
    .top { display:none; }
    .nav { min-height:72px; padding:7px 5%; }
    .logo { width:125px; height:58px; }
    .hero { min-height:auto; padding:54px 6% 44px; display:block; background:#f9f1e9; }
    .hero > div:first-child { width:100%; }
    .hero h1 { font-size:43px; }
    .hero-title-line { white-space:normal; }
    .hero-media { display:block; margin-top:34px; }
    .hero-media img { width:100%; height:280px; object-fit:cover; border-radius:22px; box-shadow:var(--shadow); }
    .section { width:90%; padding:62px 0; }
    .banner { padding:34px 6%; }
    .cats, .product-grid, .service-grid, .gallery-grid, .video-grid, .about-highlights { grid-template-columns:1fr; }
    .card-photo, .product-card > img, .gallery-grid img { height:240px; }
    .video-grid video { height:260px; }
    .about-intro, .about-values { grid-template-columns:1fr; gap:30px; }
    .about-values .values-image { order:2; }
    .about-image, .values-image { height:310px; }
    .about-highlights { padding-bottom:20px; }
    .contact { grid-template-columns:1fr; }
    .contact-details, .contact-form-wrap { padding:24px; }
    .contact-number { grid-template-columns:1fr 1fr; }
    .contact-number h3 { grid-column:1/-1; }
    .service-cta { flex-direction:column; align-items:flex-start; }
    footer { grid-template-columns:1fr; gap:32px; padding-top:55px; }
    footer img { width:min(440px,100%); }
}
/* Compact About page and founder message */
.about-intro.section,
.about-values.section {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 48px;
}

.about-intro .about-image,
.about-values .values-image {
    height: 340px;
    border-radius: 20px;
}

.about-intro h2,
.about-values h2 {
    font-size: clamp(30px, 3vw, 40px);
}

.about-intro p,
.about-values p,
.about-values li {
    font-size: 15px;
}

.about-highlights {
    gap: 12px;
    padding-bottom: 20px;
}

.about-highlights .highlight {
    min-height: 105px;
    padding: 20px;
    border-radius: 16px;
    font-size: 14px;
}

.founder-message {
    padding: 42px 52px;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
    gap: 38px;
    border: 1px solid rgba(117,0,25,.13);
    border-radius: 26px;
    background: linear-gradient(135deg,#fff 0%,#faf1e9 100%);
    box-shadow: 0 18px 55px rgba(52,21,15,.08);
}

.founder-mark {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(145deg,var(--brand),#9c1731);
    color: #e6bd72;
    font-family: Georgia,serif;
    font-size: 34px;
    font-weight: bold;
    box-shadow: 0 15px 30px rgba(117,0,25,.20);
}

.founder-copy h2 {
    max-width: 720px;
    margin: 4px 0 18px;
    font-size: clamp(28px,3vw,40px);
}

.founder-copy blockquote {
    max-width: 880px;
    margin: 0;
    color: #514641;
    font-family: Georgia,serif;
    font-size: 18px;
    line-height: 1.8;
}

.founder-signoff {
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    color: var(--brand);
    font-size: 14px;
}

.founder-signoff span { color: var(--muted); }

@media (max-width:700px) {
    .about-intro.section,
    .about-values.section { padding: 48px 0; gap: 24px; }
    .about-intro .about-image,
    .about-values .values-image { height: 260px; }
    .founder-message { padding: 28px 24px; grid-template-columns: 1fr; gap: 22px; }
    .founder-mark { width: 82px; height: 82px; border-radius: 22px; font-size: 26px; }
    .founder-copy blockquote { font-size: 16px; line-height: 1.7; }
}
/* Homepage overview — intentionally distinct from full product catalogue */
.home-section-head {
    margin-bottom: 34px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: end;
    gap: 50px;
}
.home-section-head h2 { margin: 4px 0 0; font-family: Georgia,serif; font-size: clamp(34px,4vw,50px); line-height: 1.08; }
.home-section-head > div:last-child { color: var(--muted); }
.solution-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.solution-card { position:relative; min-height:285px; overflow:hidden; border-radius:22px; color:#fff; text-decoration:none; box-shadow:var(--shadow); }
.solution-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(28,8,8,.84) 100%); transition:background .25s; }
.solution-card:hover::after { background:linear-gradient(180deg,rgba(117,0,25,.05),rgba(68,0,13,.90)); }
.solution-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .5s; }
.solution-card:hover img { transform:scale(1.045); }
.solution-card span { position:absolute; z-index:1; left:26px; right:26px; bottom:24px; display:flex; flex-direction:column; }
.solution-card small { color:#e8bc73; font-size:11px; font-style:normal; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.solution-card strong { font-family:Georgia,serif; font-size:29px; line-height:1.2; }
.solution-card em { margin-top:5px; color:rgba(255,255,255,.78); font-size:13px; font-style:normal; }
.solution-large { min-height:380px; }
.solution-wide { min-height:285px; }
@media (max-width:700px) {
    .home-section-head { grid-template-columns:1fr; gap:12px; }
    .solution-grid { grid-template-columns:1fr; }
    .solution-card, .solution-large, .solution-wide { min-height:280px; }
}
/* Compact laptop-friendly homepage solutions */
.home-solutions { padding-top: 54px; padding-bottom: 58px; }
.home-section-head { margin-bottom: 26px; grid-template-columns: 1.1fr .9fr; gap: 36px; }
.home-section-head h2 { font-size: clamp(30px, 3vw, 40px); }
.home-section-head p { margin-top: 0; font-size: 14px; }
.solution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.solution-card,
.solution-large,
.solution-wide { min-height: 230px; }
.solution-card span { left: 18px; right: 18px; bottom: 17px; }
.solution-card strong { font-size: 22px; }
.solution-card em { font-size: 12px; line-height: 1.45; }
.solution-card small { font-size: 9px; }

@media (max-width: 1100px) {
    .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-card,
    .solution-large,
    .solution-wide { min-height: 230px; }
}

@media (max-width: 700px) {
    .home-solutions { padding-top: 44px; padding-bottom: 48px; }
    .home-section-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
    .solution-grid { grid-template-columns: 1fr; }
    .solution-card,
    .solution-large,
    .solution-wide { min-height: 215px; }
}
/* Compact responsive density pass — optimized for laptops and phones */
.top { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.nav { min-height: 68px; padding-top: 5px; padding-bottom: 5px; }
.logo { width: 120px; height: 54px; }
.links a:not(.btn) { padding: 8px 10px; font-size: 13px; }
.nav .btn { min-height: 40px; padding: 9px 17px; font-size: 13px; }
.hero { min-height: 500px; padding-top: 46px; padding-bottom: 46px; }
.hero h1 { font-size: clamp(40px, 4.4vw, 58px); margin-bottom: 15px; }
.hero p { font-size: 16px; }
.features { margin: 20px 0; }
.banner { padding-top: 27px; padding-bottom: 27px; }
.banner h1 { font-size: clamp(30px, 3.2vw, 42px); }
.section { padding-top: 50px; padding-bottom: 50px; }
.section-heading { margin-bottom: 28px; }
.section > h2,
.section-heading h2,
.products-intro h2,
.about-copy h2,
.about-values h2,
.contact h2 { font-size: clamp(28px, 3vw, 39px); }
.card-photo { height: 145px; }
.card > div { padding: 16px; }
.card b { font-size: 18px; }
.product-section { padding-top: 18px; }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card > img { height: 175px; }
.product-card-body { padding: 17px; }
.product-card h3 { font-size: 21px; }
.product-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.text-link { font-size: 12px; }
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card { min-height: 0; padding-top: 72px; }
.service-icon { width: 46px; height: 46px; top: 16px; left: 16px; border-radius: 13px; }
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { font-size: 20px; margin-bottom: 8px; }
.service-card p { font-size: 12.5px; line-height: 1.55; margin-bottom: 8px; }
.service-card ul { font-size: 11.5px; line-height: 1.55; }
.service-cta { margin-top: 28px; padding: 24px 28px; }
.about-intro.section,
.about-values.section { padding-top: 44px; padding-bottom: 44px; gap: 36px; }
.about-intro .about-image,
.about-values .values-image { height: 270px; }
.about-highlights .highlight { min-height: 86px; padding: 15px; }
.founder-message { padding: 30px 34px; grid-template-columns: 88px 1fr; gap: 25px; }
.founder-mark { width: 82px; height: 82px; border-radius: 21px; font-size: 25px; }
.founder-copy h2 { font-size: clamp(25px, 2.5vw, 34px); margin-bottom: 12px; }
.founder-copy blockquote { font-size: 15px; line-height: 1.62; }
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery-grid img { height: 185px; }
.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.video-grid video { height: 210px; }
.gallery-grid figcaption,
.video-grid figcaption { padding: 11px 13px; font-size: 12px; }
.contact { gap: 24px; }
.contact-details,
.contact-form-wrap { padding: 25px; }
.map-frame { min-height: 250px; }
footer { padding-top: 44px; padding-bottom: 38px; gap: 40px; }
footer img { max-height: 135px; }
footer p { line-height: 1.65; font-size: 12.5px; }

@media (max-width: 1150px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .nav { min-height: 60px; }
    .logo { width: 108px; height: 48px; }
    .hero { padding-top: 34px; padding-bottom: 32px; }
    .hero h1 { font-size: 35px; }
    .hero p { font-size: 14px; }
    .features { gap: 6px; margin: 15px 0; }
    .feature { padding: 8px 10px; font-size: 10px; }
    .hero-media { margin-top: 22px; }
    .hero-media img { height: 185px; border-radius: 15px; }
    .banner { padding-top: 22px; padding-bottom: 22px; }
    .banner h1 { font-size: 30px; margin-bottom: 2px; }
    .banner p { font-size: 12px; }
    .section { padding-top: 36px; padding-bottom: 36px; }
    .section-heading { margin-bottom: 20px; }
    .section > h2,
    .section-heading h2,
    .products-intro h2,
    .about-copy h2,
    .about-values h2,
    .contact h2 { font-size: 27px; }
    .product-grid,
    .service-grid,
    .gallery-grid,
    .video-grid { grid-template-columns: 1fr; gap: 13px; }
    .card-photo,
    .product-card > img,
    .gallery-grid img { height: 165px; }
    .product-card-body { padding: 15px; }
    .product-card h3 { font-size: 20px; }
    .service-card { padding-top: 64px; }
    .service-card ul { display: none; }
    .service-card h3 { font-size: 19px; }
    .service-card p { margin-bottom: 0; }
    .video-grid video { height: 190px; }
    .solution-card,
    .solution-large,
    .solution-wide { min-height: 175px; }
    .solution-card strong { font-size: 20px; }
    .solution-card em { display: none; }
    .about-intro.section,
    .about-values.section { padding-top: 34px; padding-bottom: 34px; }
    .about-intro .about-image,
    .about-values .values-image { height: 210px; }
    .about-highlights .highlight { min-height: 72px; }
    .founder-message { padding: 22px 20px; gap: 15px; }
    .founder-mark { width: 62px; height: 62px; font-size: 20px; }
    .founder-copy blockquote { font-size: 14px; line-height: 1.55; }
    .contact-details,
    .contact-form-wrap { padding: 19px; }
    .map-frame { min-height: 210px; }
    footer { padding-top: 34px; padding-bottom: 30px; gap: 22px; }
    footer img { max-height: 110px; }
}
/* Preserve the complete homepage artwork on small screens */
@media (max-width: 700px) {
    .hero-media {
        overflow: hidden;
        border-radius: 15px;
        background: #f7efe6;
    }
    .hero-media img {
        width: 100%;
        height: auto;
        max-height: 190px;
        object-fit: contain;
        object-position: center;
        border-radius: 15px;
    }
}
/* Official trusted-brand logos */
.brands {
    min-height: 106px;
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 20px;
}
.brands > #trusted-brands-title { margin-right: 8px; font-size: 15px; }
.brand-logo {
    width: 170px;
    height: 66px;
    padding: 12px 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91,43,31,.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(48,22,15,.06);
    transition: transform .2s, box-shadow .2s;
}
.brand-logo:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(48,22,15,.11); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brands-more { color: var(--muted)!important; font-size: 13px; font-weight: 650; }
@media (max-width:700px) {
    .brands { gap: 10px; padding: 18px 5%; }
    .brands > #trusted-brands-title { width: 100%; margin: 0 0 3px; text-align: center; }
    .brand-logo { width: calc(33.333% - 8px); height: 54px; padding: 9px; }
    .brands-more { width: 100%; text-align: center; }
}
/* Compact global footer */
footer {
    padding-top: 26px;
    padding-bottom: 24px;
    grid-template-columns: minmax(260px, 1.5fr) .8fr 1.25fr;
    align-items: start;
    gap: 32px;
}
footer img {
    width: min(340px, 100%);
    max-height: 96px;
}
footer b { font-size: 12px; }
footer p {
    margin-top: 8px;
    margin-bottom: 6px;
    font-size: 11.5px;
    line-height: 1.48;
}
@media (max-width:700px) {
    footer { padding-top: 24px; padding-bottom: 22px; gap: 17px; }
    footer img { width: min(300px,100%); max-height: 84px; }
    footer p { margin-top: 6px; margin-bottom: 4px; line-height: 1.42; }
}
/* Trusted brands strip matching supplied reference */
.brands {
    width: min(1180px, 94%);
    min-height: 82px;
    margin: 14px auto;
    padding: 12px 24px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 26px;
    border: 1px solid rgba(91,43,31,.06);
    border-radius: 10px;
    background: #fbf7f2;
    box-shadow: 0 7px 24px rgba(48,22,15,.07);
}
.brands > #trusted-brands-title {
    width: 145px;
    flex: 0 0 145px;
    margin: 0;
    color: var(--brand);
    font-family: Georgia,serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.03;
}
.brands > #trusted-brands-title small {
    display: block;
    margin-top: 4px;
    color: var(--brand);
    font-size: 10px;
    line-height: 1.1;
}
.brand-logo {
    width: 150px;
    height: 52px;
    padding: 5px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.brand-logo:hover { transform: translateY(-2px); box-shadow: none; }
.brands-more {
    margin-left: auto;
    white-space: nowrap;
    color: #444!important;
    font-size: 11px;
    font-weight: 500;
}
@media (max-width:700px) {
    .brands {
        width: 94%;
        min-height: 68px;
        margin: 10px auto;
        padding: 9px 11px;
        gap: 7px;
        flex-wrap: nowrap;
    }
    .brands > #trusted-brands-title {
        width: 82px;
        flex-basis: 82px;
        font-size: 12px;
    }
    .brands > #trusted-brands-title small { font-size: 7px; }
    .brand-logo { width: calc((100% - 120px) / 3); height: 39px; padding: 3px; }
    .brands-more { display: none; }
}.kurlon-wordmark {
    color: #ed171c;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -1.8px;
    line-height: 1;
}
@media (max-width:700px) {
    .kurlon-wordmark { font-size: 19px; letter-spacing: -1px; }
}
/* Keep the complete hero slogan visible on laptop and desktop */
@media (min-width: 701px) {
    .hero {
        background-position: center top;
    }
}
/* Final locked brand-strip proportions */
.brands {
    min-height: 74px!important;
    max-height: 74px!important;
    padding: 9px 20px!important;
    overflow: hidden;
}
.brands .brand-logo {
    flex: 0 0 145px!important;
    width: 145px!important;
    height: 45px!important;
    max-width: 145px!important;
    max-height: 45px!important;
    padding: 3px 6px!important;
    overflow: hidden!important;
}
.brands .brand-logo img {
    display: block!important;
    position: static!important;
    width: auto!important;
    height: auto!important;
    max-width: 133px!important;
    max-height: 34px!important;
    object-fit: contain!important;
}
.brands .kurlon-wordmark { font-size: 27px!important; color:#ed171c!important; }
@media (max-width:700px) {
    .brands { min-height:58px!important; max-height:58px!important; padding:6px 8px!important; }
    .brands .brand-logo { flex:1 1 0!important; width:auto!important; height:36px!important; max-height:36px!important; padding:2px!important; }
    .brands .brand-logo img { max-width:100%!important; max-height:25px!important; }
    .brands .kurlon-wordmark { font-size:18px!important; }
}