:root {
            --warm-dark:     #2d241e;
            --warm-ink:      #1a1310;
            --warm-cream:    #fbf9f6;
            --warm-sand:     #f4ede0;
            --warm-parchment:#ede4d4;
            --gold:          #c9a84c;
            --gold-light:    #e3cb76;
            --champagne:     #decfaa;
            --clay:          #b65a3f;
            --clay-light:    #c9705a;
            --muted:         #9e8e7e;
            --ink-soft:      #5c524f;
            --border-warm:   rgba(182, 90, 63, 0.14);
            --border-gold:   rgba(201, 168, 76, 0.2);
        }
        
        
        /* ============================================================
           SECTION LABEL (reusable)
        ============================================================ */
        .j-section-label {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 48px;
        }
        .j-section-label span.tag {
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--clay);
            font-weight: 700;
        }
        .j-section-label span.rule {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--border-warm) 0%, transparent 100%);
        }
        .j-section-label span.issue {
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--muted);
        }

 /* ============================================================
           GRID CARDS — 3-column masonry-offset luxury grid
        ============================================================ */
        .j-grid-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 28px;
            align-items: start;
        }
        @media (max-width: 991px) {
            .j-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 575px) {
            .j-grid-wrapper { grid-template-columns: 1fr; gap: 24px; }
        }

        /* Stagger offset — second column drops down */
       

        .j-grid-card {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: var(--warm-cream);
            transition: border-color 0.5s ease, box-shadow 0.5s ease;
        }
        .j-grid-card:hover {
            border-color: var(--border-warm);
            box-shadow: 0 16px 44px rgba(45,36,30,0.07);
        }

        .j-grid-card-media {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
            background: var(--warm-parchment);
        }

        .j-grid-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .j-grid-card:hover .j-grid-card-media img { transform: scale(1.05); }

        /* Floating gold frame on hover */
        .j-grid-card-media::after {
            content: "";
            position: absolute;
            inset: 14px;
            border: 1px solid rgba(201,168,76,0);
            pointer-events: none;
            transition: border-color 0.6s ease;
            border-radius: 2px;
        }
        .j-grid-card:hover .j-grid-card-media::after {
            border-color: rgba(201,168,76,0.22);
        }

        /* Brand watermark per card */
        .j-grid-card-seal {
            position: absolute;
            top: 14px;
            right: 14px;
            height: 16px;
            width: auto;
            opacity: 0.18;
            filter: brightness(200%) sepia(10%);
            transition: opacity 0.5s ease;
            z-index: 3;
        }
        .j-grid-card:hover .j-grid-card-seal { opacity: 0.45; }

        /* Number badge */
        .j-grid-card-num {
            position: absolute;
            bottom: 12px;
            left: 16px;
            font-family: 'Cormorant Garamond', serif;
            font-size: 42px;
            font-weight: 300;
            line-height: 1;
            color: rgba(255,255,255,0.12);
            user-select: none;
            z-index: 2;
            transition: color 0.4s ease;
        }
        .j-grid-card:hover .j-grid-card-num {
            color: rgba(255,255,255,0.22);
        }

        .j-grid-card-body {
            padding: 22px 22px 26px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .j-grid-card-tag {
            font-size: 9.5px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--clay);
            font-weight: 700;
            margin-bottom: 11px;
        }

        .j-grid-card-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 22px;
            font-weight: 400;
            line-height: 1.3;
            color: var(--warm-dark);
            margin-bottom: 12px;
            transition: color 0.4s ease;
            flex: 1;
        }
        .j-grid-card:hover .j-grid-card-title { color: var(--clay); }

        .j-grid-card-excerpt {
            font-size: 13.5px;
            line-height: 1.75;
            color: var(--ink-soft);
            font-weight: 300;
            margin-bottom: 18px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .j-grid-card-divider {
            height: 1px;
            background: var(--border-warm);
            margin-bottom: 16px;
        }

        .j-grid-card-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .j-grid-card-time {
            font-size: 10.5px;
            letter-spacing: 0.06em;
            color: var(--muted);
        }

    
      
           

.breadcumb-section {
    position: relative; /* important */
   
    padding-top: 140px;
    padding-bottom: 140px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.breadcumb-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5); /* black overlay (adjust opacity here) */
    
    z-index: -1; /* keeps it behind content */
}
.hero-heading {
    font-size: 64px;
    line-height: 1.2;
}