/* ==========================================================================
   Divine Gems & Jewellery — Public Site Theme Layer, v2
   This is a deliberate OVERRIDE layer loaded after style.css / responsive.css.
   It replaces the light "refined template" look with a genuinely new design
   language: near-black ink + warm gold + deep emerald accent, a dramatic
   Cormorant Garamond display scale, an editorial full-height dark hero on
   the homepage, and redesigned glass-card inner-page hero banners.
   Markup contracts, control ids, form wiring and business logic untouched.
   ========================================================================== */

:root {
    /* ---- brand palette : bold, high-contrast, not a shade tweak ---- */
    --dj-gold: #cb8161;
    --dj-gold-deep: #8f4d2f;
    --dj-gold-light: #eec397;
    --dj-gold-shine: linear-gradient(135deg, #f3d9ab 0%, #cb8161 55%, #8f4d2f 100%);

    /* secondary accent — deep emerald, used sparingly for contrast against gold */
    --dj-emerald: #16332a;
    --dj-emerald-light: #2f5c4a;

    /* ink is near-black, not muted brown-grey */
    --dj-ink: #120e0a;
    --dj-ink-soft: #453a2e;
    --dj-cream: #faf5ec;
    --dj-cream-deep: #f2e6d3;
    --dj-paper: #fffcf7;
    --dj-line: rgba(203, 129, 97, 0.28);

    --dj-shadow-sm: 0 6px 18px rgba(10, 8, 5, 0.10);
    --dj-shadow-md: 0 18px 44px rgba(10, 8, 5, 0.16);
    --dj-shadow-lg: 0 30px 70px rgba(10, 8, 5, 0.28);
    --dj-shadow-gold: 0 16px 36px rgba(203, 129, 97, 0.40);

    --dj-radius: 18px;
    --dj-radius-sm: 10px;
    --dj-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------
   Base / typography — commit to the pairing: Cormorant Garamond for
   display headlines at a dramatic scale, Sail for tiny tracked kickers,
   Lato for body copy. Ink is near-black everywhere for real contrast.
   -------------------------------------------------------------------- */
html {
    scroll-behavior: smooth !important;
}

body {
    background-color: var(--dj-cream) !important;
    color: var(--dj-ink) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dj-ink) !important;
    letter-spacing: 0.2px !important;
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
}

/* section headings get the dramatic display treatment site-wide */
h2.mooli-font, h2.cormorant-garamond-font, h2.text-black {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

p {
    color: var(--dj-ink-soft) !important;
    line-height: 1.85 !important;
    font-family: "Lato", sans-serif !important;
}

::selection {
    background: var(--dj-gold-light) !important;
    color: var(--dj-ink) !important;
}

/* fluid type scale — pushed dramatically larger than the original template */
.display-1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6.4rem) !important; }
.display-3 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem) !important; }
.display-5 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem) !important; }
.display-6 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem) !important; }

.text-theme {
    color: var(--dj-gold-deep) !important;
}

.font-large {
    opacity: 8% !important;
    font-family: "Cormorant Garamond", serif !important;
    font-style: italic !important;
}

.vertical-line {
    background: var(--dj-gold) !important;
    width: 2px !important;
}

/* --------------------------------------------------------------------
   Header / navigation — dark ink glass bar (not a light wash), gold
   underline on hover, heavier tracked nav type
   -------------------------------------------------------------------- */
header {
    background: rgba(18, 14, 10, 0.62) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-bottom: 1px solid rgba(238, 195, 151, 0.16) !important;
    transition: box-shadow 0.35s var(--dj-ease), background 0.35s var(--dj-ease), padding 0.3s var(--dj-ease) !important;
}

header.dj-scrolled {
    background: rgba(18, 14, 10, 0.92) !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.navbar {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    transition: padding 0.3s var(--dj-ease) !important;
}

.logo {
    width: 138px !important;
    transition: width 0.3s var(--dj-ease) !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) brightness(1.15) !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: #f2e6d3 !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.nav-link.active, .nav-link:hover {
    color: var(--dj-gold-light) !important;
}

.nav-hover::after {
    background: var(--dj-gold-light) !important;
    height: 2px !important;
}

.menu-icon {
    border-radius: 8px !important;
    border-color: var(--dj-gold-light) !important;
    color: #f2e6d3 !important;
}

.dropdown-menu {
    box-shadow: var(--dj-shadow-lg) !important;
    border-radius: var(--dj-radius-sm) !important;
    padding: 10px !important;
    background: var(--dj-ink) !important;
    border: 1px solid rgba(238, 195, 151, 0.14) !important;
}

.dropdown-item {
    border-radius: 8px !important;
    color: #ece1d0 !important;
    font-family: "Lato", sans-serif !important;
}

.dropdown-item:hover {
    background: rgba(238, 195, 151, 0.1) !important;
    color: var(--dj-gold-light) !important;
}

/* -------- About dropdown: content-representative thumbnail per item -------- */
.dj-dropdown-menu-about {
    min-width: 290px !important;
}

.dj-dropdown-item-media {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
}

.dj-dropdown-thumb {
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(238, 195, 151, 0.3) !important;
}

.dj-dropdown-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.dj-dropdown-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dj-dropdown-title {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: capitalize !important;
    color: inherit !important;
}

.dj-dropdown-desc {
    font-family: "Lato", sans-serif !important;
    font-size: 10.5px !important;
    color: rgba(238, 225, 208, 0.62) !important;
}

/* --------------------------------------------------------------------
   Buttons — solid gold primary, ink ghost secondary; confident lift
   -------------------------------------------------------------------- */
.theme-btn {
    background: var(--dj-gold-shine) !important;
    box-shadow: var(--dj-shadow-gold) !important;
    border: none !important;
    color: #fffcf7 !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 16px 30px !important;
    transition: transform 0.3s var(--dj-ease), box-shadow 0.3s var(--dj-ease), color 0.3s ease !important;
}

.theme-btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 22px 46px rgba(203, 129, 97, 0.5) !important;
    color: var(--dj-emerald) !important;
}

.dj-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: 1.5px solid rgba(250, 245, 236, 0.55) !important;
    color: #fffcf7 !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 15px 28px !important;
    border-radius: 999px !important;
    transition: border-color 0.3s var(--dj-ease), background 0.3s var(--dj-ease), transform 0.3s var(--dj-ease) !important;
}

.dj-btn-ghost:hover {
    border-color: var(--dj-gold-light) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dj-gold-light) !important;
    transform: translateY(-4px) !important;
}

/* --------------------------------------------------------------------
   Generous whitespace
   -------------------------------------------------------------------- */
.py-100 { padding: 130px 0 !important; }
.pt-100 { padding-top: 130px !important; }
.pb-100 { padding-bottom: 130px !important; }

/* --------------------------------------------------------------------
   HOMEPAGE HERO — full-height dark ink editorial hero, replaces the
   plain white two-column carousel. Image bleeds to the panel edge,
   headline is oversized Cormorant Garamond, a frosted stat strip
   floats over the media, and a scroll cue anchors the base.
   -------------------------------------------------------------------- */
.dj-hero-section {
    position: relative !important;
    min-height: 92vh !important;
    display: flex !important;
    align-items: stretch !important;
    background: radial-gradient(120% 100% at 82% 12%, #2a2015 0%, var(--dj-ink) 55%, #0b0805 100%) !important;
    overflow: hidden !important;
    padding-top: 96px !important;
}

.dj-hero-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(238, 195, 151, 0.55) 1px, transparent 1px) !important;
    background-size: 3px 3px !important;
    opacity: 0.05 !important;
    pointer-events: none !important;
}

/* Plain image-only hero slideshow — pure CSS animation, no JS timer or
   Bootstrap Carousel involved at all, so there is no shared JS state that
   can ever get stuck mid-transition. Three images crossfade in a loop via
   a single @keyframes rule with staggered animation-delay per slide. */
.dj-hero-slideshow {
    min-height: 92vh !important;
    padding-top: 0 !important;
}

.dj-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* opacity is NOT !important here on purpose — a static !important
       declaration always wins over an animating property, which would
       permanently freeze every slide invisible regardless of the
       @keyframes below (this bit us once already). */
    opacity: 0;
    animation: djHeroCrossfade 18s infinite !important;
}

.dj-hero-slide-1 {
    opacity: 1;
}

.dj-hero-slide-1 { animation-delay: 0s !important; }
.dj-hero-slide-2 { animation-delay: 6s !important; }
.dj-hero-slide-3 { animation-delay: 12s !important; }

@keyframes djHeroCrossfade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    30% { opacity: 1; }
    34% { opacity: 0; }
    100% { opacity: 0; }
}

.dj-hero-row {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
}

.dj-hero-copy {
    padding: 40px 0 !important;
    position: relative !important;
    z-index: 3 !important;
}

.dj-hero-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--dj-gold-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    font-size: 13px !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

.dj-hero-kicker::before {
    content: '' !important;
    display: inline-block !important;
    width: 34px !important;
    height: 1px !important;
    background: var(--dj-gold-light) !important;
}

.dj-hero-title {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: clamp(3rem, 1.6rem + 6.5vw, 6.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    color: #fffcf7 !important;
    text-transform: none !important;
    margin: 0 0 22px !important;
}

.dj-hero-title em {
    font-style: italic !important;
    color: var(--dj-gold-light) !important;
}

.dj-hero-sub {
    color: rgba(250, 245, 236, 0.78) !important;
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem) !important;
    max-width: 460px !important;
    margin: 0 0 34px !important;
    line-height: 1.75 !important;
}

.dj-hero-cta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin-bottom: 46px !important;
}

.dj-hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    background: rgba(250, 245, 236, 0.06) !important;
    border: 1px solid rgba(238, 195, 151, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: var(--dj-radius) !important;
    max-width: 520px !important;
    overflow: hidden !important;
}

.dj-hero-stat {
    flex: 1 1 33%;
    padding: 20px 18px !important;
    border-right: 1px solid rgba(238, 195, 151, 0.18) !important;
}

.dj-hero-stat:last-child {
    border-right: none !important;
}

.dj-hero-stat .dj-stat-num {
    display: block !important;
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: var(--dj-gold-light) !important;
    line-height: 1 !important;
}

.dj-hero-stat .dj-stat-label {
    display: block !important;
    margin-top: 6px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11.5px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: rgba(250, 245, 236, 0.65) !important;
}

.dj-hero-media {
    position: relative !important;
    height: 100% !important;
    min-height: 460px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    margin-right: calc(-1 * ((100vw - 100%) / 2)) !important;
    padding-right: 24px !important;
}

.dj-hero-media::before {
    content: '' !important;
    position: absolute !important;
    left: 8% !important;
    right: -6% !important;
    top: 6% !important;
    bottom: 0 !important;
    background: radial-gradient(60% 60% at 50% 40%, rgba(238, 195, 151, 0.22) 0%, rgba(238, 195, 151, 0) 70%) !important;
    z-index: 0 !important;
}

.dj-hero-media img {
    position: relative !important;
    z-index: 1 !important;
    max-height: 84vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)) !important;
    border-radius: 0 !important;
}

.dj-scroll-cue {
    position: absolute !important;
    left: 50% !important;
    bottom: 26px !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(250, 245, 236, 0.55) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 10.5px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.dj-scroll-cue .dj-scroll-dot {
    width: 1px !important;
    height: 34px !important;
    background: linear-gradient(180deg, var(--dj-gold-light), transparent) !important;
    animation: djScrollPulse 1.8s var(--dj-ease) infinite !important;
}

@keyframes djScrollPulse {
    0% { opacity: 0.2; transform: scaleY(0.4); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    100% { opacity: 0.2; transform: scaleY(0.4); transform-origin: top; }
}

/* keep the original bootstrap carousel mechanics working, just restyle chrome */
.dj-hero-section .carousel-indicators {
    position: absolute !important;
    bottom: 26px !important;
    left: auto !important;
    right: 6% !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    z-index: 5 !important;
}

.dj-hero-section .carousel-indicators [data-bs-target] {
    width: 26px !important;
    height: 3px !important;
    background-color: rgba(250, 245, 236, 0.35) !important;
    border-radius: 2px !important;
    opacity: 1 !important;
}

.dj-hero-section .carousel-indicators .active {
    width: 42px !important;
    background-color: var(--dj-gold-light) !important;
}

.dj-hero-section .carousel-control-prev,
.dj-hero-section .carousel-control-next {
    top: auto !important;
    bottom: 22px !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
}

.dj-hero-section .carousel-control-prev { left: auto !important; right: 220px !important; }
.dj-hero-section .carousel-control-next { right: 160px !important; }

.dj-hero-section .icon-padding {
    padding: 11px 22px 11px 12px !important;
    background: rgba(250, 245, 236, 0.08) !important;
    border: 1px solid rgba(238, 195, 151, 0.3) !important;
    color: var(--dj-gold-light) !important;
}

@media (max-width: 991px) {
    .dj-hero-section { min-height: auto !important; padding: 130px 0 60px !important; }
    .dj-hero-media { min-height: 320px !important; margin-top: 30px !important; }
    .dj-hero-section .carousel-indicators, .dj-hero-section .carousel-control-prev, .dj-hero-section .carousel-control-next {
        position: relative !important; bottom: auto !important; right: auto !important; left: auto !important; display: inline-flex !important;
    }
}

@media (max-width: 575px) {
    .dj-hero-stats { max-width: 100% !important; }
    .dj-hero-stat { flex: 1 1 50% !important; }
}

/* --------------------------------------------------------------------
   INNER-PAGE HERO BANNERS (profile / divine / story / legel / banker /
   gallery / contact / franchise) — taller, asymmetric bottom-left glass
   card instead of centered plain text, gold accent rail, deeper scrim.
   -------------------------------------------------------------------- */
.profile-bg, .divine-bg, .story-bg, .legel-bg, .banker-bg, .gallery-bg, .contact-bg {
    position: relative !important;
    height: 62vh !important;
    min-height: 440px !important;
    background-attachment: scroll !important;
}

.dj-inner-hero {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding-bottom: 64px !important;
}

.dj-inner-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(18, 14, 10, 0.15) 0%, rgba(18, 14, 10, 0.72) 100%) !important;
    z-index: 0 !important;
}

.dj-inner-hero::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 5px !important;
    background: var(--dj-gold-shine) !important;
    z-index: 1 !important;
}

.dj-inner-hero .container {
    position: relative !important;
    z-index: 2 !important;
}

.dj-inner-hero-card {
    max-width: 620px !important;
    background: rgba(18, 14, 10, 0.38) !important;
    border: 1px solid rgba(238, 195, 151, 0.22) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    border-radius: var(--dj-radius) !important;
    padding: 34px 38px !important;
    box-shadow: var(--dj-shadow-lg) !important;
}

.dj-inner-hero .dj-hero-kicker {
    margin-bottom: 14px !important;
}

.dj-inner-hero h1 {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem) !important;
    color: #fffcf7 !important;
    line-height: 1.05 !important;
}

.dj-inner-hero .mt-3 a,
.dj-inner-hero .mt-3 span {
    font-family: "Lato", sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

.dj-inner-hero .mt-3 a {
    color: rgba(250, 245, 236, 0.72) !important;
}

.dj-inner-hero .mt-3 span.text-theme {
    color: var(--dj-gold-light) !important;
}

@media (max-width: 767px) {
    .profile-bg, .divine-bg, .story-bg, .legel-bg, .banker-bg, .gallery-bg, .contact-bg {
        height: 52vh !important;
        min-height: 340px !important;
    }
    .dj-inner-hero-card { padding: 26px 24px !important; }
}

/* --------------------------------------------------------------------
   3D-style depth: hover-lift + soft shadow treatment for imagery
   -------------------------------------------------------------------- */
.gradient-border {
    border-radius: var(--dj-radius) !important;
    border-width: 6px !important;
    border-image: none !important;
    border-color: var(--dj-gold) !important;
    box-shadow: var(--dj-shadow-md) !important;
    overflow: hidden !important;
}

.hover-box {
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: box-shadow 0.4s var(--dj-ease), transform 0.4s var(--dj-ease) !important;
}

.hover-box:hover {
    box-shadow: var(--dj-shadow-lg) !important;
    transform: translateY(-6px) !important;
}

.hover-box img {
    border-radius: inherit !important;
}

/* --------------------------------------------------------------------
   Promo tiles — asymmetric bento grid: one tall feature card (New
   Arrivals) beside a stacked pair (Best Seller / Clearance Sale).
   Deliberately NOT three equal columns — that was the rejected shape.
   -------------------------------------------------------------------- */
.dj-promo-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.dj-promo-stack {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 24px !important;
}

.dj-promo-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-md) !important;
    min-height: 260px !important;
    transition: box-shadow 0.4s var(--dj-ease), transform 0.4s var(--dj-ease) !important;
}

.dj-promo-card--feature {
    min-height: 560px !important;
}

.dj-promo-card--sm {
    min-height: 268px !important;
}

.dj-promo-card:hover {
    box-shadow: var(--dj-shadow-lg) !important;
    transform: translateY(-8px) !important;
}

.dj-promo-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.7s var(--dj-ease) !important;
}

.dj-promo-card:hover img {
    transform: scale(1.08) !important;
}

.dj-promo-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 30px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(18, 14, 10, 0.18) 45%, rgba(18, 14, 10, 0.88) 100%) !important;
}

.dj-promo-eyebrow {
    display: inline-block !important;
    color: var(--dj-gold-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.dj-promo-overlay h3 {
    color: #fff !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;
}

.dj-promo-card--sm .dj-promo-overlay h3 {
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
}

.dj-promo-link {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--dj-ink) !important;
    background: var(--dj-gold-light) !important;
    padding: 9px 22px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    transition: background 0.3s var(--dj-ease), transform 0.3s var(--dj-ease), color 0.3s var(--dj-ease) !important;
}

.dj-promo-link:hover {
    background: var(--dj-gold) !important;
    color: #fff !important;
    transform: translateX(5px) !important;
}

@media (max-width: 991px) {
    .dj-promo-grid { grid-template-columns: 1fr !important; }
    .dj-promo-card--feature { min-height: 380px !important; }
    .dj-promo-stack { grid-template-rows: none !important; grid-template-columns: 1fr 1fr !important; }
    .dj-promo-card--sm { min-height: 240px !important; }
}

@media (max-width: 576px) {
    .dj-promo-stack { grid-template-columns: 1fr !important; }
    .dj-promo-overlay { padding: 20px !important; }
    .dj-promo-overlay h3 { font-size: 1.6rem !important; }
    .dj-promo-card--sm .dj-promo-overlay h3 { font-size: 1.35rem !important; }
}

/* --------------------------------------------------------------------
   Category slides — hexagonal clipped cards with a hover-reveal name
   strip, replacing the plain circle-cropped photo roundels.
   -------------------------------------------------------------------- */
.category-box {
    position: relative !important;
    width: 190px !important;
    height: 214px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: var(--dj-ink) !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: transform 0.45s var(--dj-ease), box-shadow 0.45s var(--dj-ease) !important;
}

.category-box::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    box-shadow: inset 0 0 0 3px var(--dj-gold-light) !important;
    pointer-events: none !important;
}

.category-box:hover {
    transform: translateY(-8px) rotate(1deg) !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.category-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: saturate(0.92) !important;
    transition: transform 0.6s var(--dj-ease), filter 0.5s var(--dj-ease) !important;
}

.category-box:hover img {
    transform: scale(1.16) !important;
    filter: saturate(1.1) !important;
}

.category-contain {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translateY(60%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 16px 14px 26px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(18, 14, 10, 0.9) 70%) !important;
    border-radius: 0 !important;
    transition: transform 0.4s var(--dj-ease) !important;
}

.category-box:hover .category-contain {
    transform: translateY(0) !important;
}

.category-name {
    color: #fff !important;
    text-transform: capitalize !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    font-size: 1rem !important;
}

.category-cta {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--dj-gold-light) !important;
    color: var(--dj-ink) !important;
    font-size: 0.75rem !important;
    opacity: 0 !important;
    transform: translateX(6px) !important;
    transition: opacity 0.3s var(--dj-ease), transform 0.3s var(--dj-ease), background 0.3s var(--dj-ease) !important;
}

.category-box:hover .category-cta {
    opacity: 1 !important;
    transform: translateX(0) !important;
    background: var(--dj-gold) !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .category-box { width: 156px !important; height: 178px !important; }
    .category-contain { transform: translateY(0) !important; }
    .category-cta { opacity: 1 !important; transform: translateX(0) !important; }
}

/* review / testimonial cards */
.review-card {
    background: var(--dj-paper) !important;
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-md) !important;
    transition: transform 0.35s var(--dj-ease), box-shadow 0.35s var(--dj-ease) !important;
}

.review-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--dj-shadow-lg) !important;
}

.review-card img {
    box-shadow: var(--dj-shadow-sm) !important;
}

.review-card h4 {
    font-family: "Cormorant Garamond", serif !important;
    font-style: italic !important;
}

.franchise-card {
    border: 1px solid var(--dj-line) !important;
}

/* collection callouts */
.collection {
    border-radius: var(--dj-radius) !important;
}

.collection-box {
    width: auto !important;
    height: auto !important;
    max-width: 82% !important;
    border-radius: 0 var(--dj-radius) 0 0 !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.collection-box h2 {
    font-family: "Cormorant Garamond", serif !important;
    font-style: italic !important;
}

/* contact icon tiles */
.contact-box {
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-sm) !important;
    background: var(--dj-paper) !important;
    border: 1px solid var(--dj-line) !important;
    transition: transform 0.35s var(--dj-ease), box-shadow 0.35s var(--dj-ease) !important;
}

.contact-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.contact-icon {
    box-shadow: var(--dj-shadow-gold) !important;
    background: var(--dj-gold-shine) !important;
}

/* generic responsive image polish across every page (gallery, banker,
   legal certificates, profile / story imagery) */
.img-fluid {
    border-radius: var(--dj-radius-sm) !important;
}

section .gradient-border img.img-fluid,
.hover-box img.img-fluid {
    border-radius: inherit !important;
}

/* --------------------------------------------------------------------
   Handcrafted / quality icons — emerald accent for contrast against gold
   -------------------------------------------------------------------- */
.quality-icon i {
    background: var(--dj-emerald) !important;
    color: var(--dj-gold-light) !important;
    box-shadow: var(--dj-shadow-sm) !important;
}

.handicraft-section h5.text-theme {
    color: var(--dj-emerald) !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

/* --------------------------------------------------------------------
   Bank details table + logo tile
   -------------------------------------------------------------------- */
.bank-container {
    background: var(--dj-paper) !important;
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-md) !important;
    border-color: var(--dj-line) !important;
}

.bank-table td {
    border-color: var(--dj-line) !important;
    font-family: "Lato", sans-serif !important;
}

.logo-box img {
    filter: drop-shadow(var(--dj-shadow-sm)) !important;
}

/* --------------------------------------------------------------------
   Gallery — photo grid + video grid, play-icon overlay, lightbox
   -------------------------------------------------------------------- */
.gallery-image {
    border-radius: var(--dj-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: box-shadow 0.4s var(--dj-ease) !important;
}

.gallery-image:hover {
    box-shadow: var(--dj-shadow-lg) !important;
}

.gallery-image img {
    transition: transform 0.5s var(--dj-ease) !important;
}

.gallery-image:hover img {
    transform: scale(1.08) !important;
}

.gallery-image > div {
    border-radius: 0 var(--dj-radius-sm) 0 0 !important;
}

/* --------------------------------------------------------------------
   gallery.aspx — craft-film section: a dark ink band (visually distinct
   from the pale photo swiper above) holding a dense Pinterest-style
   masonry of silently-autoplaying looping clips. Every video keeps
   autoplay + muted + loop + playsinline (the only browser-legal way to
   run many clips at once); a per-card mute toggle and a click-to-expand
   lightbox restore user control without breaking simultaneous autoplay.
   -------------------------------------------------------------------- */
.dj-video-section {
    position: relative !important;
    background: linear-gradient(180deg, var(--dj-ink) 0%, #1c150e 100%) !important;
    padding: 100px 0 !important;
}

.dj-video-section .dj-hero-kicker {
    color: var(--dj-gold-light) !important;
}

.dj-video-heading.dj-video-heading {
    color: #fffcf7 !important;
}

.dj-video-section .vertical-line {
    background: var(--dj-gold-light) !important;
}

.dj-video-wall {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    grid-auto-flow: dense !important;
    gap: 18px !important;
}

.dj-video-card {
    position: relative !important;
    border-radius: var(--dj-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    background: #000 !important;
    aspect-ratio: 3 / 4 !important;
    cursor: pointer !important;
    border: 1px solid rgba(238, 195, 151, 0.14) !important;
    transition: transform 0.4s var(--dj-ease), box-shadow 0.4s var(--dj-ease), border-color 0.4s var(--dj-ease) !important;
}

/* masonry variance — every 5th card runs tall, every 7th runs wide */
.dj-video-wall .dj-video-card:nth-child(5n+1) {
    grid-row: span 2 !important;
    aspect-ratio: auto !important;
}

.dj-video-wall .dj-video-card:nth-child(7n+3) {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 10 !important;
}

.dj-video-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--dj-shadow-gold) !important;
    border-color: var(--dj-gold-light) !important;
}

.dj-video-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.dj-video-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

.dj-video-card:hover::after {
    opacity: 1 !important;
}

.dj-video-mute {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18, 14, 10, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    color: #fffcf7 !important;
    font-size: 13px !important;
    z-index: 2 !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
}

.dj-video-mute:hover {
    background: var(--dj-gold-shine) !important;
    transform: scale(1.08) !important;
}

.dj-video-expand {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18, 14, 10, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    color: #fffcf7 !important;
    font-size: 13px !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
}

.dj-video-card:hover .dj-video-expand {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --------------------------------------------------------------------
   Lightweight image lightbox (used on gallery + legal certificates)
   -------------------------------------------------------------------- */
.dj-lightbox-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    background: rgba(9, 7, 5, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.dj-lightbox-overlay.dj-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.dj-lightbox-overlay img,
.dj-lightbox-overlay video {
    max-width: min(1100px, 92vw) !important;
    max-height: 88vh !important;
    border-radius: var(--dj-radius-sm) !important;
    box-shadow: var(--dj-shadow-lg) !important;
    transform: scale(0.92) !important;
    transition: transform 0.3s var(--dj-ease) !important;
}

.dj-lightbox-overlay.dj-open img,
.dj-lightbox-overlay.dj-open video {
    transform: scale(1) !important;
}

.dj-lightbox-close {
    position: absolute !important;
    top: 22px !important;
    right: 28px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--dj-gold-shine) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    box-shadow: var(--dj-shadow-md) !important;
    border: none !important;
}

/* --------------------------------------------------------------------
   Scroll-reveal helper (used alongside existing WOW.js classes)
   -------------------------------------------------------------------- */
.dj-reveal {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition: opacity 0.7s var(--dj-ease), transform 0.7s var(--dj-ease) !important;
}

.dj-reveal.dj-in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --------------------------------------------------------------------
   Newsletter / footer polish — emerald deep section for contrast rhythm
   -------------------------------------------------------------------- */
.newsletter-section {
    position: relative !important;
    background: linear-gradient(135deg, var(--dj-emerald) 0%, #0e2019 100%) !important;
}

.newsletter-section h2, .newsletter-section h5 {
    font-family: "Cormorant Garamond", serif !important;
}

.newsletter-form input {
    border-bottom-color: var(--dj-gold-light) !important;
    font-family: "Lato", sans-serif !important;
}

footer {
    position: relative !important;
    background: var(--dj-ink) !important;
}

.social-icon a {
    box-shadow: var(--dj-shadow-sm) !important;
}

/* --------------------------------------------------------------------
   Responsive refinements — verified against 992 / 768 / 480 breakpoints
   -------------------------------------------------------------------- */
@media (max-width: 992px) {
    .py-100 { padding: 90px 0 !important; }
    .pt-100 { padding-top: 90px !important; }
    .pb-100 { padding-bottom: 90px !important; }
}

@media (max-width: 767px) {
    header {
        background: rgba(18, 14, 10, 0.96) !important;
    }

    .py-100 { padding: 64px 0 !important; }
    .pt-100 { padding-top: 64px !important; }
    .pb-100 { padding-bottom: 64px !important; }

    .logo { width: 108px !important; }

    .hover-box:hover, .dj-promo-card:hover, .review-card:hover,
    .contact-box:hover, .dj-video-card:hover {
        transform: none !important;
    }

    .dj-video-section { padding: 64px 0 !important; }

    .dj-video-wall {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .dj-video-wall .dj-video-card:nth-child(5n+1),
    .dj-video-wall .dj-video-card:nth-child(7n+3) {
        grid-row: auto !important;
        grid-column: auto !important;
        aspect-ratio: 3 / 4 !important;
    }

    .dj-video-mute, .dj-video-expand {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    .dj-video-expand {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 480px) {
    .dj-video-wall {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .dj-lightbox-close {
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .bank-container {
        padding: 20px !important;
    }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .dj-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hover-box, .dj-promo-card, .category-box, .review-card, .contact-box,
    .video-gallery .dj-video-card, .theme-btn, .dj-scroll-cue .dj-scroll-dot {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   INNER-PAGE BODY COMPONENTS — genuinely new component shapes for the
   8 secondary pages (franchise, profile, story, why-divine, banker,
   contact, gallery, legal). Inner hero banners above these are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------
   FranchiseList.aspx — directory-style partner card, not a re-skinned
   Bootstrap review-card grid. Ink medallion rail + numbered index.
   -------------------------------------------------------------------- */
.dj-franchise-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 26px !important;
    counter-reset: djfranchise !important;
}

.dj-franchise-card {
    counter-increment: djfranchise !important;
    display: flex !important;
    align-items: stretch !important;
    background: var(--dj-paper) !important;
    border: 1px solid var(--dj-line) !important;
    border-radius: var(--dj-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: box-shadow 0.4s var(--dj-ease), transform 0.4s var(--dj-ease) !important;
    height: 100% !important;
}

.dj-franchise-card:hover {
    box-shadow: var(--dj-shadow-lg) !important;
    transform: translateY(-6px) !important;
}

.dj-franchise-badge {
    flex: 0 0 108px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: var(--dj-ink) !important;
    background-image: radial-gradient(120% 120% at 30% 20%, rgba(238, 195, 151, 0.14), transparent 60%) !important;
    color: var(--dj-gold-light) !important;
    position: relative !important;
}

.dj-franchise-badge i {
    font-size: 1.6rem !important;
}

.dj-franchise-badge::after {
    content: counter(djfranchise, decimal-leading-zero) !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    color: rgba(238, 195, 151, 0.55) !important;
}

.dj-franchise-body {
    flex: 1 1 auto !important;
    padding: 26px 24px !important;
    text-align: left !important;
}

.dj-franchise-kicker {
    display: block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-deep) !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}

.dj-franchise-body h5 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 1.5rem !important;
    margin-bottom: 14px !important;
    color: var(--dj-ink) !important;
    text-transform: none !important;
}

.dj-franchise-meta {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 0.92rem !important;
    color: var(--dj-ink-soft) !important;
    padding: 9px 0 !important;
    border-top: 1px dashed var(--dj-line) !important;
}

.dj-franchise-meta:first-of-type {
    border-top: none !important;
    padding-top: 0 !important;
}

.dj-franchise-meta i {
    color: var(--dj-gold) !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 575px) {
    .dj-franchise-card { flex-direction: column !important; }
    .dj-franchise-badge { flex-direction: row !important; padding: 14px !important; }
}

/* --------------------------------------------------------------------
   Profile.aspx — editorial magazine blocks: numbered gold medallion,
   offset frame behind the photo, drop-cap opener. Not a centered split.
   -------------------------------------------------------------------- */
.dj-editorial-block {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    align-items: center !important;
    gap: 54px !important;
    position: relative !important;
}

.dj-editorial-block--reverse {
    grid-template-columns: 1.1fr 0.9fr !important;
}

.dj-editorial-block--reverse .dj-editorial-media { order: 2 !important; }
.dj-editorial-block--reverse .dj-editorial-copy { order: 1 !important; }

.dj-editorial-media {
    position: relative !important;
}

.dj-editorial-frame {
    position: relative !important;
    border-radius: var(--dj-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--dj-shadow-lg) !important;
}

.dj-editorial-frame::before {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: -16px !important;
    width: 68% !important;
    height: 68% !important;
    border: 2px solid var(--dj-gold) !important;
    border-radius: var(--dj-radius) !important;
    z-index: -1 !important;
}

.dj-editorial-num {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--dj-gold-shine) !important;
    color: #fff !important;
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    box-shadow: var(--dj-shadow-gold) !important;
    z-index: 2 !important;
}

.dj-editorial-copy {
    position: relative !important;
}

.dj-editorial-kicker {
    display: inline-block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-deep) !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.dj-editorial-copy h2 {
    margin-bottom: 20px !important;
}

.dj-editorial-copy p:first-of-type::first-letter {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 3.6rem !important;
    font-weight: 700 !important;
    color: var(--dj-gold) !important;
    float: left !important;
    line-height: 0.78 !important;
    padding: 6px 10px 0 0 !important;
}

.dj-editorial-connector {
    display: flex !important;
    justify-content: center !important;
    padding: 44px 0 !important;
}

.dj-editorial-connector span {
    width: 1px !important;
    height: 74px !important;
    background: linear-gradient(180deg, var(--dj-gold), transparent) !important;
    display: block !important;
}

@media (max-width: 767px) {
    .dj-editorial-block, .dj-editorial-block--reverse {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }
    .dj-editorial-block--reverse .dj-editorial-media,
    .dj-editorial-block--reverse .dj-editorial-copy {
        order: initial !important;
    }
    .dj-editorial-frame::before { display: none !important; }
}

/* --------------------------------------------------------------------
   Story.aspx — sticky photo + vertical milestone timeline instead of
   a plain centered heading over a two-column split.
   -------------------------------------------------------------------- */
.dj-story-layout {
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: 56px !important;
    align-items: start !important;
}

.dj-story-media {
    position: sticky !important;
    top: 120px !important;
}

.dj-story-timeline {
    position: relative !important;
    padding-left: 36px !important;
}

.dj-story-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 9px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 2px !important;
    background: linear-gradient(180deg, var(--dj-gold), var(--dj-line)) !important;
}

.dj-story-node {
    position: relative !important;
    padding-bottom: 46px !important;
}

.dj-story-node:last-child {
    padding-bottom: 0 !important;
}

.dj-story-marker {
    position: absolute !important;
    left: -36px !important;
    top: 2px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--dj-gold-shine) !important;
    box-shadow: 0 0 0 5px var(--dj-cream), var(--dj-shadow-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 10px !important;
}

.dj-story-node h6 {
    font-family: "Lato", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    font-size: 12.5px !important;
    color: var(--dj-gold-deep) !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

@media (max-width: 767px) {
    .dj-story-layout { grid-template-columns: 1fr !important; }
    .dj-story-media { position: relative !important; top: auto !important; margin-bottom: 34px !important; }
}

/* --------------------------------------------------------------------
   Why_Divine.aspx — three genuinely different pillar presentations
   (dark full-bleed block / diagonal-clip split / medallion tile),
   not three identical stacked image+text rows.
   -------------------------------------------------------------------- */
.dj-pillar-mission {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    align-items: stretch !important;
    border-radius: var(--dj-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--dj-shadow-lg) !important;
    min-height: 420px !important;
}

.dj-pillar-mission .dj-pillar-media {
    position: relative !important;
    min-height: 320px !important;
}

.dj-pillar-mission .dj-pillar-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.dj-pillar-mission .dj-pillar-copy {
    background: var(--dj-ink) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 46px 42px !important;
}

.dj-pillar-mission .dj-pillar-copy h2 { color: #fffcf7 !important; }
.dj-pillar-mission .dj-pillar-copy p { color: rgba(250, 245, 236, 0.78) !important; }
.dj-pillar-mission .dj-pillar-copy .vertical-line { background: var(--dj-gold-light) !important; }

.dj-pillar-tag {
    display: inline-block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-light) !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
}

.dj-pillar-vision {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    align-items: center !important;
}

.dj-pillar-vision .dj-pillar-media {
    position: relative !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%) !important;
    min-height: 380px !important;
    margin-right: -60px !important;
    z-index: 1 !important;
    box-shadow: var(--dj-shadow-lg) !important;
}

.dj-pillar-vision .dj-pillar-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.dj-pillar-vision .dj-pillar-copy {
    background: var(--dj-paper) !important;
    border: 1px solid var(--dj-line) !important;
    border-radius: var(--dj-radius) !important;
    padding: 46px 42px 46px 90px !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.dj-pillar-values {
    display: flex !important;
    align-items: center !important;
    gap: 46px !important;
    background: var(--dj-cream-deep) !important;
    border-radius: var(--dj-radius) !important;
    padding: 46px !important;
}

.dj-pillar-values .dj-pillar-media {
    flex: 0 0 220px !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 6px solid var(--dj-gold) !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.dj-pillar-values .dj-pillar-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.dj-pillar-values .dj-pillar-copy {
    flex: 1 1 auto !important;
}

.dj-value-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.dj-value-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    background: var(--dj-ink) !important;
    color: var(--dj-gold-light) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

@media (max-width: 991px) {
    .dj-pillar-mission { grid-template-columns: 1fr !important; }
    .dj-pillar-vision { grid-template-columns: 1fr !important; }
    .dj-pillar-vision .dj-pillar-media { clip-path: none !important; margin-right: 0 !important; border-radius: var(--dj-radius) !important; }
    .dj-pillar-vision .dj-pillar-copy { padding: 34px !important; }
    .dj-pillar-values { flex-direction: column !important; text-align: center !important; padding: 34px !important; }
}

/* --------------------------------------------------------------------
   banker.aspx — two-panel professional layout: bank details (icon +
   label/value rows, no boxy borders) on the left, QR/scan-to-pay on
   the right, each panel taking an even 50% share of the width.
   -------------------------------------------------------------------- */
.dj-bank-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--dj-paper) !important;
    border: 1px solid var(--dj-line) !important;
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-lg) !important;
    overflow: hidden !important;
}

.dj-bank-col {
    padding: 48px 44px !important;
}

.dj-bank-details {
    border-right: 1px dashed var(--dj-line) !important;
}

.dj-bank-brand {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 30px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--dj-line) !important;
}

.dj-bank-brand img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    border-radius: var(--dj-radius-sm) !important;
    background: #fff !important;
    padding: 8px !important;
    box-shadow: var(--dj-shadow-sm) !important;
}

.dj-bank-brand-kicker {
    display: block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-deep) !important;
    margin-bottom: 4px !important;
}

.dj-bank-brand h4 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 1.5rem !important;
    color: var(--dj-ink) !important;
    margin: 0 !important;
}

.dj-bank-fields {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dj-bank-fields li {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 16px 0 !important;
    border-bottom: 1px dotted var(--dj-line) !important;
}

.dj-bank-fields li .dj-bank-field-text {
    flex: 1 1 auto !important;
}

.dj-bank-copy-btn {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--dj-line) !important;
    background: transparent !important;
    color: var(--dj-gold-deep) !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.dj-bank-copy-btn:hover {
    background: var(--dj-gold-tint, rgba(203, 129, 97, .12)) !important;
    transform: scale(1.06) !important;
}

.dj-bank-copy-btn.dj-bank-copy-done {
    color: #1e8e4f !important;
    border-color: #1e8e4f !important;
}

.dj-bank-fields li:last-child {
    border-bottom: none !important;
}

.dj-bank-field-icon {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--dj-gold-tint, rgba(203, 129, 97, .12)) !important;
    color: var(--dj-gold-deep) !important;
    font-size: 16px !important;
}

.dj-bank-field-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.dj-bank-field-label {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.9px !important;
    color: var(--dj-ink-soft) !important;
}

.dj-bank-field-value {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--dj-ink) !important;
}

.dj-bank-qr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: var(--dj-bg-soft, #faf6ef) !important;
}

.dj-bank-qr-kicker {
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-deep) !important;
    margin-bottom: 20px !important;
}

.dj-bank-qr-frame {
    width: 100% !important;
    max-width: 340px !important;
    background: #fff !important;
    border: 1px solid var(--dj-line) !important;
    border-radius: var(--dj-radius) !important;
    box-shadow: var(--dj-shadow-md) !important;
    padding: 28px !important;
}

.dj-bank-qr-frame img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: var(--dj-radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
    object-fit: contain !important;
}

.dj-bank-qr-label {
    margin-top: 20px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--dj-ink-soft) !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .dj-bank-split { grid-template-columns: 1fr !important; }
    .dj-bank-details { border-right: none !important; border-bottom: 1px dashed var(--dj-line) !important; }
    .dj-bank-col { padding: 32px 26px !important; }
    .dj-bank-brand { flex-direction: column !important; text-align: center !important; }
}

/* --------------------------------------------------------------------
   contact.aspx — sticky ink sidebar (phone/mail/address tiles) beside
   the form card, replacing the separate 3-up card row + form stack.
   Form control ids/runat/OnClick are untouched — styling only.
   -------------------------------------------------------------------- */
.dj-contact-layout {
    display: grid !important;
    grid-template-columns: 0.85fr 1.15fr !important;
    gap: 36px !important;
    align-items: start !important;
}

.dj-contact-sidebar {
    background: var(--dj-ink) !important;
    border-radius: var(--dj-radius) !important;
    padding: 40px 32px !important;
    position: sticky !important;
    top: 120px !important;
    box-shadow: var(--dj-shadow-lg) !important;
}

.dj-contact-sidebar h3 {
    color: #fffcf7 !important;
    font-family: "Cormorant Garamond", serif !important;
    margin-bottom: 24px !important;
}

.dj-contact-tile {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(238, 195, 151, 0.16) !important;
}

.dj-contact-tile:last-child {
    border-bottom: none !important;
}

.dj-contact-tile-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--dj-gold-shine) !important;
    color: #fff !important;
    font-size: 15px !important;
    box-shadow: var(--dj-shadow-gold) !important;
}

.dj-contact-tile-label {
    display: block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: rgba(250, 245, 236, 0.55) !important;
    margin-bottom: 4px !important;
}

.dj-contact-tile a,
.dj-contact-tile .dj-contact-value {
    color: var(--dj-gold-light) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
}

.dj-contact-form-card {
    background: var(--dj-paper) !important;
    border: 1px solid var(--dj-line) !important;
    border-radius: var(--dj-radius) !important;
    padding: 40px !important;
    box-shadow: var(--dj-shadow-md) !important;
}

.dj-contact-form-card .form-label {
    font-family: "Lato", sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--dj-ink-soft) !important;
    margin-bottom: 6px !important;
}

.dj-contact-form-card .form-control {
    border: none !important;
    border-bottom: 1.5px solid var(--dj-line) !important;
    border-radius: 0 !important;
    padding: 12px 4px !important;
    background: transparent !important;
    font-family: "Lato", sans-serif !important;
    box-shadow: none !important;
    transition: border-color 0.3s var(--dj-ease) !important;
}

.dj-contact-form-card .form-control:focus {
    border-color: var(--dj-gold) !important;
    box-shadow: none !important;
    outline: none !important;
}

.dj-contact-maps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 40px !important;
}

.dj-contact-map-card {
    border-radius: var(--dj-radius-sm) !important;
    overflow: hidden !important;
    box-shadow: var(--dj-shadow-sm) !important;
    border: 1px solid var(--dj-line) !important;
}

.dj-contact-map-card iframe {
    display: block !important;
    width: 100% !important;
}

.dj-contact-map-label {
    padding: 10px 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--dj-gold-deep) !important;
    background: var(--dj-cream-deep) !important;
}

@media (max-width: 991px) {
    .dj-contact-layout { grid-template-columns: 1fr !important; }
    .dj-contact-sidebar { position: relative !important; top: auto !important; }
    .dj-contact-maps { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------
   gallery.aspx — real-count stat strip beneath the section header.
   The video grid below has its own dedicated section further down
   (search "dj-video-section").
   -------------------------------------------------------------------- */
.dj-gallery-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 46px !important;
    margin: 24px 0 10px !important;
    flex-wrap: wrap !important;
}

.dj-gallery-stat {
    text-align: center !important;
}

.dj-gallery-stat-num {
    display: block !important;
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 2.4rem !important;
    color: var(--dj-gold-deep) !important;
    line-height: 1 !important;
}

.dj-gallery-stat-label {
    display: block !important;
    margin-top: 6px !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11.5px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--dj-ink-soft) !important;
}

/* --------------------------------------------------------------------
   legel.aspx — "document wall": each certificate hangs from a picture
   rail on a string + pin, framed like a mounted paper document with a
   wax-stamp seal and a brass name-plate caption underneath. Replaces
   the earlier plain hover-ribbon grid with a genuinely different
   gallery-wall metaphor. Anchor href/img structure required by the
   lightbox JS is unchanged (a[href$=".jpg"] still wraps an <img>).
   -------------------------------------------------------------------- */
.dj-legal-wall {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 60px 34px !important;
    padding-top: 46px !important;
}

.dj-legal-rail {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(180deg, #d9c8a8 0%, #8f4d2f 100%) !important;
    border-radius: 3px !important;
    box-shadow: var(--dj-shadow-sm) !important;
}

.dj-legal-frame {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: transform 0.45s var(--dj-ease) !important;
}

.dj-legal-frame-a { transform: rotate(-2.4deg) !important; }
.dj-legal-frame-b { transform: rotate(1.6deg) !important; }
.dj-legal-frame-c { transform: rotate(-1.2deg) !important; }
.dj-legal-frame-d { transform: rotate(2.2deg) !important; }

.dj-legal-frame:hover {
    transform: rotate(0deg) translateY(-8px) !important;
    z-index: 3 !important;
}

.dj-legal-string {
    width: 1px !important;
    height: 40px !important;
    background: rgba(18, 14, 10, 0.35) !important;
}

.dj-legal-pin {
    position: absolute !important;
    top: -6px !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: var(--dj-gold-shine) !important;
    box-shadow: 0 3px 8px rgba(10, 8, 5, 0.4) !important;
    border: 2px solid #fffcf7 !important;
}

.dj-legal-frame-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    background: #fffcf7 !important;
    padding: 14px 14px 18px !important;
    border-radius: 2px !important;
    box-shadow: var(--dj-shadow-md) !important;
    border: 1px solid rgba(18, 14, 10, 0.08) !important;
    transition: box-shadow 0.4s var(--dj-ease) !important;
}

.dj-legal-frame:hover .dj-legal-frame-inner {
    box-shadow: var(--dj-shadow-lg) !important;
}

.dj-legal-frame-inner::before {
    content: '' !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1px solid var(--dj-line) !important;
    pointer-events: none !important;
}

.dj-legal-frame-inner img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
    filter: sepia(8%) !important;
}

.dj-legal-seal {
    position: absolute !important;
    right: -14px !important;
    bottom: 4px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: var(--dj-gold-shine) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    box-shadow: var(--dj-shadow-gold) !important;
    border: 2px solid #fffcf7 !important;
    transform: rotate(-14deg) scale(0.85) !important;
    opacity: 0.92 !important;
    transition: transform 0.4s var(--dj-ease) !important;
}

.dj-legal-frame:hover .dj-legal-seal {
    transform: rotate(0deg) scale(1) !important;
}

.dj-legal-plate {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--dj-ink) !important;
    color: var(--dj-gold-light) !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: background 0.35s var(--dj-ease), color 0.35s var(--dj-ease) !important;
}

.dj-legal-frame:hover .dj-legal-plate {
    background: var(--dj-gold-shine) !important;
    color: #fff !important;
}

@media (max-width: 575px) {
    .dj-legal-wall { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 46px 20px !important; }
    .dj-legal-frame-a, .dj-legal-frame-b, .dj-legal-frame-c, .dj-legal-frame-d { transform: none !important; }
    .dj-legal-plate { font-size: 10px !important; padding: 6px 12px !important; }
}

/* --------------------------------------------------------------------
   Testimonials — "Our Clients Say's": dark spotlight quote card,
   replacing the plain white centered review-card template pattern.
   -------------------------------------------------------------------- */
.dj-review-slider {
    padding-bottom: 10px !important;
}

.dj-review-slider .swiper-slide {
    height: auto !important;
}

.dj-review-card {
    position: relative !important;
    height: 100% !important;
    background: radial-gradient(120% 140% at 100% 0%, #241b12 0%, var(--dj-ink) 60%) !important;
    border-radius: var(--dj-radius) !important;
    padding: 52px 40px 36px !important;
    box-shadow: var(--dj-shadow-lg) !important;
    border: 1px solid rgba(238, 195, 151, 0.16) !important;
    overflow: hidden !important;
}

.dj-review-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(203, 129, 97, 0.06) 100%) !important;
    pointer-events: none !important;
}

.dj-review-mark {
    display: block !important;
    font-family: "Cormorant Garamond", serif !important;
    font-style: italic !important;
    font-size: 5rem !important;
    line-height: 1 !important;
    color: var(--dj-gold) !important;
    opacity: 0.85 !important;
    margin-bottom: -10px !important;
}

.dj-review-title {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: 1.7rem !important;
    color: var(--dj-gold-light) !important;
    margin: 0 0 16px !important;
}

.dj-review-text {
    font-family: "Lato", sans-serif !important;
    color: rgba(250, 245, 236, 0.78) !important;
    font-size: 0.98rem !important;
    line-height: 1.85 !important;
    margin: 0 0 28px !important;
    min-height: 132px !important;
}

.dj-review-person {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(238, 195, 151, 0.16) !important;
}

.dj-review-person img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--dj-gold) !important;
    box-shadow: 0 0 0 3px rgba(203, 129, 97, 0.18) !important;
}

.dj-review-person h6 {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    color: #fffcf7 !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
}

.dj-review-person span {
    display: block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-light) !important;
    opacity: 0.85 !important;
}

.dj-review-slider .swiper-button-prev,
.dj-review-slider .swiper-button-next {
    color: var(--dj-gold-deep) !important;
    top: 45% !important;
}

.dj-review-slider .swiper-pagination-bullet-active {
    background: var(--dj-gold) !important;
}

@media (max-width: 575px) {
    .dj-review-card { padding: 40px 26px 30px !important; }
    .dj-review-mark { font-size: 3.8rem !important; }
    .dj-review-text { min-height: 0 !important; }
}

/* --------------------------------------------------------------------
   Footer — Indian-traditional jewel-tone redesign.
   FIX: the global `p { color: var(--dj-ink-soft) !important; }` rule
   earlier in this file was bleeding dark brown text onto the footer's
   dark background, making addresses/copyright nearly unreadable — this
   block re-asserts light text everywhere inside <footer>, scoped with
   equal !important so it wins by being the later rule in the cascade.
   -------------------------------------------------------------------- */
footer {
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(203, 129, 97, 0.16) 0%, transparent 55%),
        radial-gradient(100% 140% at 90% 100%, rgba(22, 51, 42, 0.55) 0%, transparent 60%),
        var(--dj-ink) !important;
    overflow: hidden !important;
}

footer p,
footer span,
footer li,
footer a,
footer h2,
footer h4 {
    color: #f2e6d3 !important;
}

footer h2 {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem) !important;
    color: #fffcf7 !important;
}

footer h4 {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--dj-gold-light) !important;
    position: relative !important;
    padding-bottom: 10px !important;
}

footer h4::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 34px !important;
    height: 2px !important;
    background: var(--dj-gold) !important;
}

footer p.text-theme,
footer span.text-theme {
    color: var(--dj-gold-light) !important;
    font-weight: 700 !important;
}

footer .nav-link {
    color: rgba(242, 230, 211, 0.75) !important;
    padding: 0 !important;
    transition: color 0.25s ease, transform 0.25s ease, padding-left 0.25s ease !important;
}

footer .nav-link:hover {
    color: var(--dj-gold-light) !important;
    padding-left: 6px !important;
}

footer .border-top,
footer .border-bottom {
    border-color: rgba(238, 195, 151, 0.18) !important;
}

/* decorative jaali/lattice accent above the footer heading — built from
   layered gradients only, no external artwork */
.dj-footer-jaali {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 14px !important;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 6px, var(--dj-gold) 6px 7px, transparent 7px),
        repeating-conic-gradient(from 0deg, rgba(238, 195, 151, 0.55) 0deg 4deg, transparent 4deg 45deg) !important;
    -webkit-mask-image: radial-gradient(circle, #000 0 60%, transparent 72%) !important;
    mask-image: radial-gradient(circle, #000 0 60%, transparent 72%) !important;
    opacity: 0.9 !important;
}

/* scalloped traditional border strip along the very top edge of the footer */
.dj-footer-motif-top {
    height: 14px !important;
    width: 100% !important;
    background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--dj-gold) 9px 10px, transparent 10px) !important;
    background-size: 20px 14px !important;
    background-repeat: repeat-x !important;
    opacity: 0.85 !important;
}

.dj-footer-row {
    position: relative !important;
    z-index: 1 !important;
}

.copyright {
    position: relative !important;
    z-index: 1 !important;
}

.copyright p {
    color: rgba(242, 230, 211, 0.65) !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}

.copyright .text-theme {
    color: var(--dj-gold-light) !important;
    font-weight: 700 !important;
}

footer .social-icon a {
    background: linear-gradient(135deg, var(--dj-gold-deep), var(--dj-gold)) !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: transform 0.3s var(--dj-ease), box-shadow 0.3s var(--dj-ease) !important;
}

footer .social-icon a:hover {
    transform: translateY(-4px) rotate(-6deg) !important;
    box-shadow: var(--dj-shadow-gold) !important;
    border-color: transparent !important;
}

/* --------------------------------------------------------------------
   contact.aspx — form card polish pass (client requested "make the
   form more attractive"). Floating labels + icons on every field, a
   decorative gold corner bracket on the card, and a richer submit
   button. Control ids/runat/OnClick/name attributes are untouched —
   this is markup restructuring around the existing controls + CSS only.
   -------------------------------------------------------------------- */
.dj-contact-form-card {
    position: relative !important;
}

.dj-contact-form-card::before,
.dj-contact-form-card::after {
    content: "" !important;
    position: absolute !important;
    width: 42px !important;
    height: 42px !important;
    border: 2px solid var(--dj-gold) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
}

.dj-contact-form-card::before {
    top: -10px !important;
    left: -10px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top-left-radius: 6px !important;
}

.dj-contact-form-card::after {
    bottom: -10px !important;
    right: -10px !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom-right-radius: 6px !important;
}

.dj-form-kicker {
    display: block !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--dj-gold-deep) !important;
    font-weight: 800 !important;
    margin-bottom: 18px !important;
}

.dj-form-kicker::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 1.5px !important;
    background: var(--dj-gold) !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.dj-form-feedback {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
}

/* floating label fields with a leading icon */
.dj-field {
    position: relative !important;
}

.dj-contact-form-card .dj-field .form-control {
    padding: 24px 6px 8px 32px !important;
}

.dj-contact-form-card .dj-field-textarea .form-control {
    padding-top: 26px !important;
    min-height: 140px !important;
}

.dj-field-icon {
    position: absolute !important;
    top: 17px !important;
    left: 4px !important;
    width: 20px !important;
    color: var(--dj-gold) !important;
    font-size: 14px !important;
    text-align: center !important;
    pointer-events: none !important;
    transition: color 0.3s var(--dj-ease), transform 0.3s var(--dj-ease) !important;
}

.dj-field-textarea .dj-field-icon {
    top: 17px !important;
}

.dj-field:focus-within .dj-field-icon {
    color: var(--dj-gold-deep) !important;
    transform: scale(1.12) !important;
}

.dj-float-label {
    position: absolute !important;
    top: 17px !important;
    left: 32px !important;
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: 0.98rem !important;
    color: var(--dj-ink-soft) !important;
    opacity: 0.6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    pointer-events: none !important;
    transition: top 0.25s var(--dj-ease), font-size 0.25s var(--dj-ease), color 0.25s var(--dj-ease), letter-spacing 0.25s var(--dj-ease) !important;
}

.dj-contact-form-card .dj-field .form-control:focus ~ .dj-float-label,
.dj-contact-form-card .dj-field .form-control:not(:placeholder-shown) ~ .dj-float-label {
    top: -2px !important;
    left: 32px !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--dj-gold-deep) !important;
    opacity: 1 !important;
}

.dj-contact-submit-wrap {
    display: flex !important;
    justify-content: flex-start !important;
}

.dj-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dj-submit-btn::before {
    content: "\f1d8" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    display: inline-block !important;
    transition: transform 0.35s var(--dj-ease) !important;
}

.dj-submit-btn:hover::before {
    transform: translate(5px, -3px) !important;
}

@media (max-width: 575px) {
    .dj-contact-form-card::before,
    .dj-contact-form-card::after { width: 26px !important; height: 26px !important; }
}

/* --------------------------------------------------------------------
   FranchiseList.aspx — polish pass 2: search/filter bar above the
   grid (client-side only, mirrors djFilterGrid used across the panel
   areas but operates on the rendered card DIVs), quick-action row
   (Call Now / Get Directions) on each card, and a stronger hover
   lift + gold glow. ListView id/data-binding untouched.
   -------------------------------------------------------------------- */
.dj-franchise-search-wrap {
    position: relative !important;
    max-width: 460px !important;
    margin: 28px auto 0 !important;
}

.dj-franchise-search-wrap i {
    position: absolute !important;
    top: 50% !important;
    left: 18px !important;
    transform: translateY(-50%) !important;
    color: var(--dj-gold) !important;
    font-size: 14px !important;
    pointer-events: none !important;
}

.dj-franchise-search-input {
    width: 100% !important;
    padding: 13px 18px 13px 42px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--dj-line) !important;
    background: var(--dj-paper) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 0.95rem !important;
    color: var(--dj-ink) !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: border-color 0.3s var(--dj-ease), box-shadow 0.3s var(--dj-ease) !important;
}

.dj-franchise-search-input:focus {
    outline: none !important;
    border-color: var(--dj-gold) !important;
    box-shadow: var(--dj-shadow-gold) !important;
}

.dj-franchise-no-match {
    text-align: center !important;
    padding: 30px 0 0 !important;
}

.dj-franchise-card {
    flex-direction: column !important;
}

.dj-franchise-card:hover {
    box-shadow: var(--dj-shadow-lg), 0 0 0 1px rgba(203, 129, 97, 0.35) !important;
    transform: translateY(-8px) !important;
    border-color: rgba(203, 129, 97, 0.5) !important;
}

.dj-franchise-card:hover .dj-field-icon {
    color: var(--dj-gold-deep) !important;
}

.dj-franchise-card:hover .dj-franchise-badge i {
    transform: scale(1.15) rotate(-6deg) !important;
}

.dj-franchise-badge {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 18px 24px !important;
    gap: 14px !important;
}

.dj-franchise-badge i {
    transition: transform 0.35s var(--dj-ease) !important;
}

.dj-franchise-badge::after {
    margin-left: auto !important;
}

.dj-franchise-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px dashed var(--dj-line) !important;
}

.dj-franchise-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: var(--dj-gold-shine) !important;
    color: #fffcf7 !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    box-shadow: var(--dj-shadow-sm) !important;
    transition: transform 0.3s var(--dj-ease), box-shadow 0.3s var(--dj-ease) !important;
}

.dj-franchise-action-btn:hover {
    transform: translateY(-3px) !important;
    color: #fffcf7 !important;
    box-shadow: var(--dj-shadow-gold) !important;
}

.dj-franchise-action-ghost {
    background: transparent !important;
    border: 1.5px solid var(--dj-line) !important;
    color: var(--dj-gold-deep) !important;
    box-shadow: none !important;
}

.dj-franchise-action-ghost:hover {
    background: var(--dj-cream-deep) !important;
    color: var(--dj-gold-deep) !important;
    box-shadow: var(--dj-shadow-sm) !important;
}

@media (max-width: 575px) {
    .dj-franchise-badge { padding: 14px !important; }
    .dj-franchise-action-btn { flex: 1 1 auto !important; justify-content: center !important; }
}

/* WEBIXA(TM) credit mark in the footer */
.dj-tm-wrap {
    position: relative !important;
    display: inline-block !important;
}

.dj-tm {
    position: absolute !important;
    top: -0.6em !important;
    right: -0.9em !important;
    font-size: 0.32em !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}