/* ==========================================================================
   Independence Day theme layer
   --------------------------------------------------------------------------
   Everything here is scoped under body.dd-indep. Dropping that one class
   reverts the entire site to the regular Demandeals look — no other
   stylesheet is modified.

   All motion uses transform/opacity only (plus one SVG turbulence filter for
   the flag), so nothing here triggers layout. Every animation is switched off
   under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

body.dd-indep {
    --ind-saffron: #ff9933;
    --ind-saffron-deep: #e8791a;
    --ind-green: #138808;
    --ind-green-lite: #8ee07f;
    --ind-navy: #06038d;
    --ind-brand: #872b97;

    --ind-flag: linear-gradient(90deg,
            var(--ind-saffron) 0%, var(--ind-saffron) 33.33%,
            #fdfdfd 33.33%, #fdfdfd 66.66%,
            var(--ind-green) 66.66%, var(--ind-green) 100%);

    --ind-flag-soft: linear-gradient(90deg,
            rgba(255, 153, 51, .18) 0%,
            rgba(255, 255, 255, 0) 50%,
            rgba(19, 136, 8, .18) 100%);
}

.dd-indep-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   1. Page-level tricolour haze + tricolour hairline
   ========================================================================== */

/* Saffron settling from the top of the viewport, green rising from the bottom.
   This has to sit ABOVE the page rather than behind it: most sections here have
   their own white background, which would paint straight over a z-index:-1
   layer. So it is a fixed, click-through overlay parked below the navbar
   (z-index 5001) and the mobile bottom nav (4000) — site chrome stays clean
   while the content area picks up the atmosphere.

   Each plume is masked opaque at its own edge and transparent toward the
   middle, so the centre of the screen — where copy is actually read — is left
   essentially untouched. It grades the page; it does not fog it. */
.dd-indep-page-smoke {
    position: fixed;
    inset: 0;
    z-index: 3500;
    overflow: hidden;
    pointer-events: none;
}

/* The page sits on white, so multiply keeps the haze as a tinted wash rather
   than the milky lift screen would give. */
.dd-indep-page-smoke .dd-indep-smoke {
    position: absolute;
    left: -14%;
    width: 128%;
    height: 44vh;
    mix-blend-mode: multiply;
}

.dd-indep-page-smoke-top {
    top: -6vh;
    opacity: .17;
}

.dd-indep-page-smoke-btm {
    bottom: -6vh;
    opacity: .15;
}

/* Drift only where there is headroom for it: a permanently animating
   full-viewport blend is real GPU work, so phones and tablets get the same
   look held still — one composite instead of one per frame. */
@media (min-width: 992px) {
    .dd-indep-page-smoke-top {
        animation: dd-indep-smoke-drift-a 78s ease-in-out infinite;
    }

    .dd-indep-page-smoke-btm {
        animation: dd-indep-smoke-drift-b 94s ease-in-out infinite;
    }
}

@media (max-width: 767.98px) {

    /* shorter plumes, lighter tint — small screens have less neutral space */
    .dd-indep-page-smoke .dd-indep-smoke {
        height: 30vh;
    }

    .dd-indep-page-smoke-top {
        opacity: .13;
    }

    .dd-indep-page-smoke-btm {
        opacity: .11;
    }
}

.dd-indep-ribbon {
    position: relative;
    height: 5px;
    width: 100%;
    background: var(--ind-flag);
    overflow: hidden;
    z-index: 1;
}

.dd-indep-ribbon-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .85) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translate3d(-100%, 0, 0);
    animation: dd-indep-shine 5.5s ease-in-out infinite;
}

@keyframes dd-indep-shine {

    0%,
    55% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(100%, 0, 0);
    }
}

/* ==========================================================================
   2. Ashoka Chakra
   ========================================================================== */

.dd-indep-chakra {
    width: 1em;
    height: 1em;
    color: var(--ind-navy);
    flex-shrink: 0;
    animation: dd-indep-spin 12s linear infinite;
}

@keyframes dd-indep-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   3. Site-wide ticker strip
   ========================================================================== */

.dd-indep-strip {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 42px 0 0;
    background:
        var(--ind-flag-soft),
        linear-gradient(180deg, #fffaf3 0%, #fffefc 100%);
    border-bottom: 1px solid rgba(135, 43, 151, .12);
    overflow: hidden;
}

.dd-indep-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* fade both edges so text never hard-clips */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.dd-indep-ticker-track {
    display: flex;
    width: max-content;
    animation: dd-indep-marquee 42s linear infinite;
}

.dd-indep-strip:hover .dd-indep-ticker-track {
    animation-play-state: paused;
}

@keyframes dd-indep-marquee {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.dd-indep-ticker-run {
    display: flex;
    flex-shrink: 0;
}

.dd-indep-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 26px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #3d3346;
    white-space: nowrap;
}

.dd-indep-ticker-item strong {
    color: var(--ind-brand);
    font-weight: 800;
}

.dd-indep-ticker-item .dd-indep-chakra {
    font-size: 17px;
}

.dd-indep-strip-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    /* #8b8194 was 3.71:1 against the near-white pill background. */
    color: #6b6478;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.dd-indep-strip-close:hover {
    background: rgba(135, 43, 151, .1);
    color: var(--ind-brand);
}

@media (max-width: 575.98px) {
    .dd-indep-ticker-item {
        padding: 8px 18px;
        font-size: 12px;
    }
}

/* ==========================================================================
   4. Homepage campaign hero
   ========================================================================== */

.dd-indep-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 20px 0 8px;
    padding: 40px 44px;
    border-radius: 26px;
    background:
        radial-gradient(115% 130% at 6% -10%, rgba(255, 153, 51, .34) 0%, rgba(255, 153, 51, 0) 52%),
        radial-gradient(110% 130% at 100% 110%, rgba(19, 136, 8, .32) 0%, rgba(19, 136, 8, 0) 55%),
        linear-gradient(135deg, #22103b 0%, #2c1550 42%, #171043 72%, #0d1435 100%);
    box-shadow: 0 22px 54px rgba(23, 10, 45, .3);
}

/* tricolour cap + base */
.dd-indep-hero::before,
.dd-indep-hero::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--ind-flag);
    z-index: 4;
}

.dd-indep-hero::before {
    top: 0;
}

.dd-indep-hero::after {
    bottom: 0;
    opacity: .55;
}

/* ---------- decorative layer ---------- */

.dd-indep-hero-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---------- smoke plumes ---------- */

.dd-indep-smoke-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

/* Oversized so the drift never exposes an edge. mix-blend-mode: screen makes
   the plumes read as light/haze against the dark hero rather than flat paint. */
.dd-indep-smoke {
    position: absolute;
    left: -18%;
    width: 136%;
    height: 78%;
    display: block;
    mix-blend-mode: screen;
    will-change: transform;
    pointer-events: none;
}

.dd-indep-smoke-top-a,
.dd-indep-smoke-top-b {
    top: -14%;
}

.dd-indep-smoke-btm-a,
.dd-indep-smoke-btm-b {
    bottom: -14%;
}

.dd-indep-smoke-top-a {
    opacity: .72;
    animation: dd-indep-smoke-drift-a 46s ease-in-out infinite;
}

.dd-indep-smoke-top-b {
    opacity: .5;
    animation: dd-indep-smoke-drift-b 63s ease-in-out infinite;
}

.dd-indep-smoke-btm-a {
    opacity: .68;
    animation: dd-indep-smoke-drift-b 52s ease-in-out infinite;
}

.dd-indep-smoke-btm-b {
    opacity: .46;
    animation: dd-indep-smoke-drift-a 71s ease-in-out infinite reverse;
}

/* Slow billow. Transform only — the noise filter is rasterised once. */
@keyframes dd-indep-smoke-drift-a {

    0%,
    100% {
        transform: translate3d(-3%, 0, 0) scale(1.04);
    }

    50% {
        transform: translate3d(4%, 5%, 0) scale(1.22);
    }
}

@keyframes dd-indep-smoke-drift-b {

    0%,
    100% {
        transform: translate3d(3%, 2%, 0) scale(1.16);
    }

    50% {
        transform: translate3d(-4%, -4%, 0) scale(1);
    }
}

.dd-indep-aurora {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .38;
    will-change: transform;
}

.dd-indep-aurora-1 {
    top: -90px;
    left: 8%;
    width: 300px;
    height: 300px;
    background: rgba(255, 153, 51, .5);
    animation: dd-indep-drift-a 17s ease-in-out infinite;
}

.dd-indep-aurora-2 {
    bottom: -120px;
    left: 38%;
    width: 340px;
    height: 340px;
    background: rgba(19, 136, 8, .42);
    animation: dd-indep-drift-b 21s ease-in-out infinite;
}

.dd-indep-aurora-3 {
    top: 10%;
    right: -70px;
    width: 260px;
    height: 260px;
    background: rgba(135, 43, 151, .55);
    animation: dd-indep-drift-a 19s ease-in-out infinite reverse;
}

@keyframes dd-indep-drift-a {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(34px, 26px, 0) scale(1.14);
    }
}

@keyframes dd-indep-drift-b {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1.08);
    }

    50% {
        transform: translate3d(-40px, -22px, 0) scale(1);
    }
}

/* rotating chakra watermark */
.dd-indep-hero-chakra {
    position: absolute;
    right: 4%;
    top: 50%;
    width: 380px;
    height: 380px;
    margin-top: -190px;
    color: #fff;
    opacity: .07;
    animation: dd-indep-spin 110s linear infinite;
}

/* fireworks */
.dd-indep-firework {
    position: absolute;
    width: 0;
    height: 0;
}

/* Bright flash at the burst point — without it the rays look like they come
   from nowhere. */
.dd-indep-firework-core {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 16px 5px var(--fw);
    opacity: 0;
    animation: dd-indep-flash 3.6s ease-out infinite;
    animation-delay: var(--fw-delay);
}

@keyframes dd-indep-flash {

    0%,
    100% {
        transform: scale(.2);
        opacity: 0;
    }

    3% {
        transform: scale(1.5);
        opacity: 1;
    }

    16% {
        transform: scale(.4);
        opacity: 0;
    }
}

/* Rays, not dots: each particle is stretched along its own direction and given
   its own reach (--r) and timing jitter (--pd) so the burst looks uneven. */
.dd-indep-firework i {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 7px;
    margin: -3px 0 0 -1px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--fw) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 7px var(--fw);
    opacity: 0;
    transform: rotate(var(--a)) translateY(0) scaleY(.4);
    animation: dd-indep-burst 3.6s cubic-bezier(.15, .75, .25, 1) infinite;
    animation-delay: calc(var(--fw-delay) + var(--pd));
    will-change: transform, opacity;
}

@keyframes dd-indep-burst {
    0% {
        transform: rotate(var(--a)) translateY(0) scaleY(.4);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* stretched mid-flight, like a trail */
    38% {
        transform: rotate(var(--a)) translateY(calc(var(--r) * -.72)) scaleY(2.1);
        opacity: 1;
    }

    68% {
        transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scaleY(1.1);
        opacity: .5;
    }

    80%,
    100% {
        transform: rotate(var(--a)) translateY(calc(var(--r) * -1.1)) scaleY(.5);
        opacity: 0;
    }
}

/* kites */
.dd-indep-kite {
    position: absolute;
    width: var(--k);
    transform-origin: 50% 0;
    animation: dd-indep-sway var(--k-dur) ease-in-out infinite;
    animation-delay: var(--k-delay);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
    will-change: transform;
}

.dd-indep-kite svg {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes dd-indep-sway {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-9deg);
    }

    50% {
        transform: translate3d(16px, 14px, 0) rotate(9deg);
    }
}

/* drifting sparks */
.dd-indep-spark {
    position: absolute;
    bottom: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 7px rgba(255, 214, 165, .9);
    opacity: 0;
    animation: dd-indep-rise var(--s-dur) linear infinite;
    animation-delay: var(--s-delay);
    will-change: transform, opacity;
}

@keyframes dd-indep-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(.6);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    100% {
        transform: translate3d(18px, -320px, 0) scale(1);
        opacity: 0;
    }
}

/* ---------- content ---------- */

.dd-indep-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
    align-items: center;
    gap: 30px;
}

.dd-indep-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffe4c4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.dd-indep-pill .dd-indep-chakra {
    font-size: 15px;
    color: #fff;
}

/* big "80" */
.dd-indep-bignum {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 10px;
}

.dd-indep-bignum-value {
    font-family: "Montserrat", var(--font-heading, sans-serif);
    font-size: clamp(64px, 9vw, 108px);
    font-weight: 900;
    line-height: .86;
    letter-spacing: -3px;
    background: linear-gradient(150deg, #ffb45f 0%, #ffffff 48%, #6fd05e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 20px rgba(255, 153, 51, .38));
}

.dd-indep-bignum-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
}

.dd-indep-bignum-side em {
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: var(--ind-saffron);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dd-indep-bignum-side b {
    font-family: "Montserrat", var(--font-heading, sans-serif);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dd-indep-hero-title {
    margin: 0 0 10px;
    font-family: "Montserrat", var(--font-heading, sans-serif);
    font-size: clamp(1.4rem, 2.6vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
}

.dd-indep-hero-title::after {
    content: none;
}

.dd-indep-tri {
    display: inline-block;
    background: linear-gradient(95deg, var(--ind-saffron) 0%, #ffffff 46%, var(--ind-green-lite) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dd-indep-hero-copy-text {
    margin: 0 0 18px;
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.8;
}

/* countdown */
.dd-indep-count {
    margin-bottom: 20px;
}

.dd-indep-count-label {
    display: block;
    margin-bottom: 8px;
    color: #ffdcb0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.dd-indep-count-tiles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dd-indep-tile {
    min-width: 66px;
    padding: 10px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: center;
}

.dd-indep-tile b {
    display: block;
    font-family: "Montserrat", var(--font-heading, sans-serif);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.dd-indep-tile small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* CTAs */
.dd-indep-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dd-indep-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ind-saffron) 0%, #ff6a3d 52%, var(--ind-brand) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(255, 106, 61, .34);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dd-indep-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .5) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translate3d(-100%, 0, 0);
    animation: dd-indep-shine 4.5s ease-in-out infinite;
}

.dd-indep-cta:hover,
.dd-indep-cta:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(255, 106, 61, .44);
}

.dd-indep-cta-ghost {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, border-color .25s ease;
}

.dd-indep-cta-ghost:hover,
.dd-indep-cta-ghost:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ---------- waving flag ---------- */

.dd-indep-hero-art {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- flag: free-flying rippling cloth ----------
   The cloth is a row of vertical strips. Each strip carries the full tricolour
   and shifts on Y with a phase offset, so the band boundaries and the silhouette
   form one travelling wave. Strips are solid rectangles, so edges stay crisp —
   this is what an SVG displacement map cannot do without tearing them. */

.dd-indep-flagstand {
    position: relative;
    width: 100%;
    max-width: 330px;
    animation: dd-indep-flag-bob 7s ease-in-out infinite;
}

.dd-indep-flag {
    position: relative;
    /* 3:2 is the official ratio of the Indian national flag */
    aspect-ratio: 3 / 2;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .34));
}

.dd-indep-cloth {
    position: absolute;
    inset: 0;
    display: flex;
}

.dd-indep-cloth-strip {
    position: relative;
    flex: 1 1 auto;
    /* slight overlap kills sub-pixel seams between strips */
    margin-right: -.5px;
    background: linear-gradient(180deg,
            #ff9933 0%, #ff9933 33.34%,
            #ffffff 33.34%, #ffffff 66.67%,
            #138808 66.67%, #138808 100%);
    transform: translate3d(0, calc(var(--amp) * -1), 0);
    animation: dd-indep-cloth-wave var(--flag-cycle) ease-in-out infinite;
    animation-delay: var(--phase);
    will-change: transform;
}

/* Fold shadow travelling with the same phase as the strip's motion — this is
   what makes it read as cloth rather than a sliding barcode. */
.dd-indep-cloth-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #120a24;
    opacity: 0;
    animation: dd-indep-cloth-fold var(--flag-cycle) ease-in-out infinite;
    animation-delay: var(--phase);
}

@keyframes dd-indep-cloth-wave {

    0%,
    100% {
        transform: translate3d(0, calc(var(--amp) * -1), 0);
    }

    50% {
        transform: translate3d(0, var(--amp), 0);
    }
}

@keyframes dd-indep-cloth-fold {

    0%,
    100% {
        opacity: .2;
    }

    50% {
        opacity: 0;
    }
}

.dd-indep-cloth-chakra {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    aspect-ratio: 1;
    margin: -13% 0 0 -13%;
    animation: dd-indep-cloth-wave var(--flag-cycle) ease-in-out infinite;
    animation-delay: var(--phase);
}

.dd-indep-cloth-chakra svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes dd-indep-flag-bob {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-.6deg);
    }

    50% {
        transform: translate3d(0, -7px, 0) rotate(.6deg);
    }
}

/* ---------- hero responsive ---------- */

@media (max-width: 991.98px) {
    .dd-indep-hero {
        padding: 32px 26px;
    }

    .dd-indep-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .dd-indep-hero-art {
        order: -1;
    }

    .dd-indep-flagstand {
        max-width: 230px;
    }

    .dd-indep-hero-chakra {
        width: 280px;
        height: 280px;
        margin-top: -140px;
        right: -60px;
    }
}

@media (max-width: 575.98px) {
    .dd-indep-hero {
        margin: 16px 0 6px;
        padding: 22px 16px;
        border-radius: 20px;
    }

    .dd-indep-hero-grid {
        gap: 14px;
    }

    .dd-indep-bignum {
        margin: 8px 0 6px;
        gap: 10px;
    }

    .dd-indep-bignum-value {
        font-size: 54px;
        letter-spacing: -2px;
    }

    .dd-indep-bignum-side b {
        font-size: 14px;
    }

    .dd-indep-bignum-side em {
        font-size: 13px;
    }

    .dd-indep-hero-title {
        font-size: 1.22rem;
        margin-bottom: 8px;
    }

    /* keep the blurb to three lines so the band never becomes a wall of text */
    .dd-indep-hero-copy-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 14px;
        font-size: 12.5px;
        line-height: 1.7;
    }

    .dd-indep-count {
        margin-bottom: 14px;
    }

    .dd-indep-count-tiles {
        gap: 7px;
    }

    .dd-indep-tile {
        min-width: 0;
        flex: 1;
        padding: 7px 3px;
        border-radius: 11px;
    }

    .dd-indep-tile b {
        font-size: 19px;
    }

    .dd-indep-tile small {
        font-size: 9px;
    }

    .dd-indep-hero-actions {
        gap: 8px;
    }

    .dd-indep-cta {
        width: 100%;
        justify-content: center;
        padding: 11px 20px;
    }

    .dd-indep-cta-ghost {
        width: 100%;
        justify-content: center;
        padding: 9px 18px;
        font-size: 13px;
    }

    .dd-indep-flagstand {
        max-width: 148px;
    }

    /* keep the small screen calm */
    .dd-indep-kite-3 {
        display: none;
    }

    .dd-indep-hero-chakra {
        width: 220px;
        height: 220px;
        margin-top: -110px;
    }
}

/* ==========================================================================
   5. Site-wide accents
   ========================================================================== */

/* Section heading underline becomes the tricolour */
body.dd-indep h2.fw-bold::after {
    width: 92px;
    height: 4px;
    border-radius: 2px;
    background: var(--ind-flag);
    background-color: transparent;
}

body.dd-indep .text-center h2.fw-bold::after {
    margin-left: auto;
    margin-right: auto;
}

/* Navbar gets a tricolour underline instead of the plain grey border */
body.dd-indep .navbar.osahan-header {
    position: relative;
    border-bottom-color: transparent !important;
}

body.dd-indep .navbar.osahan-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ind-flag);
    opacity: .8;
}

/* Deal panels: festive top edge + warmer glow */
body.dd-indep .main-banner-wrapper.theme {
    position: relative;
    border-color: rgba(255, 153, 51, .34);
}

body.dd-indep .main-banner-wrapper.theme::after {
    background: radial-gradient(circle, rgba(255, 153, 51, .34) 0%, rgba(255, 153, 51, 0) 70%);
}

body.dd-indep .hover-lift:hover {
    box-shadow: 0 .75rem 1.5rem rgba(255, 153, 51, .22);
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

body.dd-indep .dd-footer {
    border-top: 0;
}

body.dd-indep .dd-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--ind-flag);
    z-index: 3;
}

.dd-indep-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 9px 18px;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 153, 51, .12) 0%, rgba(255, 255, 255, .6) 50%, rgba(19, 136, 8, .12) 100%);
    border: 1px solid rgba(135, 43, 151, .14);
    color: #5f5567;
    font-size: 13px;
    font-weight: 600;
}

.dd-indep-footer-note .dd-indep-chakra {
    font-size: 17px;
}

.dd-indep-footer-note strong {
    color: var(--ind-brand);
    font-weight: 800;
}

/* ==========================================================================
   7. Mobile bottom nav
   ========================================================================== */

@media (max-width: 991.98px) {
    body.dd-indep .dd-bottom-nav {
        border-top: 0;
    }

    body.dd-indep .dd-bottom-nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 25px 25px 0 0;
        background: var(--ind-flag);
    }
}

/* ==========================================================================
   8. Accessibility / print
   ========================================================================== */

/* Scoped to this theme's own elements only — the site's other animations
   (slick carousel, dropdowns) are left alone. */
@media (prefers-reduced-motion: reduce) {

    .dd-indep-ribbon-shine,
    .dd-indep-chakra,
    .dd-indep-hero-chakra,
    .dd-indep-aurora,
    .dd-indep-smoke,
    .dd-indep-kite,
    .dd-indep-flagstand,
    .dd-indep-cloth-strip,
    .dd-indep-cloth-strip::after,
    .dd-indep-cloth-chakra,
    .dd-indep-ticker-track,
    .dd-indep-cta,
    .dd-indep-cta::after {
        animation: none !important;
        transition: none !important;
    }

    /* Hold the cloth flat rather than frozen mid-ripple, and drop the fold
       shadows that only make sense while it is moving. */
    .dd-indep-cloth-strip,
    .dd-indep-cloth-chakra {
        transform: none !important;
    }

    .dd-indep-cloth-strip::after {
        opacity: 0 !important;
    }

    /* the ticker still needs to be readable when it cannot scroll */
    .dd-indep-ticker-track {
        transform: none;
    }

    .dd-indep-ticker-run:nth-child(2) {
        display: none;
    }

    .dd-indep-firework,
    .dd-indep-spark {
        display: none;
    }
}

@media print {

    .dd-indep-strip,
    .dd-indep-ribbon,
    .dd-indep-hero-fx {
        display: none;
    }

    .dd-indep-hero {
        background: #fff;
        box-shadow: none;
    }
}