/*
 * SMART kit — mysmartkit.in
 * ─────────────────────────────────────────────────────────────────────────
 * Palette is derived from the brand assets rather than invented: the coral
 * comes from the kit box and the mascot's body, the navy from the mascot's
 * outline, the amber from its lightbulb, the sky blue from its glasses. That
 * is why the illustrations sit on these surfaces without clashing.
 *
 * Section order, grid structure and all scroll animations are unchanged from
 * the Eklavya build. Only surfaces, colour and typographic detail differ.
 */

/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
    /* brand */
    --coral:    #E85A4F;
    --coral-d:  #C8453B;
    --coral-l:  #FFF0ED;
    --navy:     #2A2547;
    --navy-d:   #1C1832;
    --amber:    #FFC24B;
    --sky:      #2E8BE6;
    /* Client-specified menu yellow. Sits close to --amber, which is why the
       amber accents elsewhere on the page now read as intentional. */
    --yellow:   #FECC00;
    --burger:   url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(42,37,71,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* surfaces */
    --cream:    #FFF9F5;
    --blush:    #FFF1EC;
    --white:    #FFFFFF;

    /* text */
    --ink:      #2A2547;
    --body:     #56506B;
    --muted:    #8B84A3;
    --line:     rgba(42, 37, 71, 0.10);

    /* elevation */
    --sh-sm:    0 1px 2px rgba(42,37,71,.06), 0 2px 8px rgba(42,37,71,.05);
    --sh-md:    0 4px 12px rgba(42,37,71,.07), 0 12px 32px rgba(42,37,71,.07);
    --sh-lg:    0 12px 28px rgba(42,37,71,.10), 0 28px 64px rgba(42,37,71,.10);

    /* geometry */
    --r-sm:     10px;
    --r-md:     16px;
    --r-lg:     24px;
    --sec-y:    clamp(2.1rem, 3vw, 3rem);

    --ff:       'Noto Sans Devanagari', sans-serif;
    --ffe:      'Poppins', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--ff);
    color: var(--body);
    line-height: 1.85;
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--coral); color: #fff; }

:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Keyboard users get a way past the nav. Off-screen until focused. */
.skip-link {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--navy);
    color: #fff;
    font-family: var(--ff);
    font-size: .85rem;
    padding: .6rem 1.1rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* Brand name gets a consistent weight wherever it appears inline, so the
   reader's eye picks up "SMART kit" as one object rather than two words. */
.brand-inline {
    font-family: var(--ffe);
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
/* Registered mark, kept small so it never competes with the word it marks */
.reg {
    font-size: 0.52em;
    top: -0.62em;
    font-weight: 400;
    margin-left: 0.05em;
    letter-spacing: 0;
}

/* ── Scroll-reveal (unchanged behaviour) ── */
.reveal        { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity: 1; transform: translateY(0); }
.reveal-left   { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible  { opacity: 1; transform: translateX(0); }
.reveal-right  { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-d1 { transition-delay: .1s } .reveal-d2 { transition-delay: .2s }
.reveal-d3 { transition-delay: .3s } .reveal-d4 { transition-delay: .4s }
.reveal-d5 { transition-delay: .5s } .reveal-d6 { transition-delay: .6s }
.reveal-d7 { transition-delay: .7s } .reveal-d8 { transition-delay: .8s }
.reveal-d9 { transition-delay: .9s }

/* ── Shared type ── */
.section-heading {
    font-family: var(--ff);
    font-size: clamp(1.55rem, 3.1vw, 2.15rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin-bottom: 1.05rem;
}
.heading-white   { color: #fff; }
.section-body    { font-family: var(--ff); font-size: 1rem; line-height: 2; color: var(--body); }
.text-white-soft { color: rgba(255,255,255,.86); }
.diamond         { color: var(--coral); }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
/* Client-requested #FECC00. It also solves a real problem: the mascot's
   gloves, shoes, eyes and teeth are white and vanished against a white bar. */
#mainNav {
    background: var(--yellow);
    border-bottom: 1px solid rgba(42,37,71,.14);
    z-index: 1050;
    padding: .42rem 0;
    transition: box-shadow .25s ease;
}
#mainNav.scrolled { box-shadow: 0 2px 14px rgba(42,37,71,.16); }

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-decoration: none;
    padding: 0;
}
.nav-logo { height: 62px; width: auto; }
.nav-tagline {
    font-family: var(--ff);
    font-size: 11px;
    font-weight: 600;
    color: rgba(42,37,71,.72);
    letter-spacing: .06em;
    line-height: 1;
    padding-left: 2px;
}

/* animated underline instead of a bare colour swap */
#mainNav .nav-link {
    font-family: var(--ff);
    font-size: .885rem;
    font-weight: 600;
    color: var(--navy);
    padding: .4rem .7rem;
    position: relative;
    white-space: nowrap;
    transition: color .2s ease;
}
#mainNav .nav-link::after {
    content: '';
    position: absolute;
    left: .7rem; right: .7rem;
    bottom: .1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active { color: var(--navy-d); }
#mainNav .nav-link:hover::after,
#mainNav .nav-link.active::after { transform: scaleX(1); }

/* Navy pill, not coral. White-on-coral is only 3.50:1 and coral-on-yellow is
   2.31:1; white on navy is 14.44:1 and the two warm colours stop fighting. */
.nav-cta {
    background: var(--navy) !important;
    color: #fff !important;
    border-radius: 100px;
    padding: .45rem 1.25rem !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 12px rgba(42,37,71,.28);
    transition: background .2s, box-shadow .2s, transform .2s !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover {
    background: var(--navy-d) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(42,37,71,.4);
}
.navbar-toggler { border-color: rgba(42,37,71,.28); padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }
/* Bootstrap's default bars are near-black; keep them navy on the yellow */
.navbar-toggler-icon { background-image: var(--burger); }
/* The collapsed menu drops onto the yellow bar, so give it a calmer surface */
@media (max-width: 991.98px) {
    #navMain {
        background: rgba(255,255,255,.55);
        border-radius: var(--r-md);
        margin-top: .6rem;
        padding: .5rem .25rem;
    }
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.s-hero {
    background: var(--cream);
    padding-top: 2.1rem;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* The supplied watercolour wash, feathered out so it reads as light rather
   than as a picture with edges. */
.hero-wash {
    position: absolute;
    top: -22%;
    right: -14%;
    width: 68%;
    max-width: 900px;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 78%);
            mask-image: radial-gradient(closest-side, #000 35%, transparent 78%);
}
.hero-wash img { width: 100%; }

.s-hero > .container-xl { z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: 380px 1fr 220px;
    grid-template-areas: "box text char";
    align-items: center;
    gap: 2.25rem;
    padding-bottom: 2.25rem;
    position: relative;
    z-index: 1;
}
.hero-box-col  { grid-area: box; }
.hero-text-col { grid-area: text; }
.hero-char-col { grid-area: char; }

/* ── Product box ── */
.product-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    animation: floatBox 4s ease-in-out infinite;
}
@keyframes floatBox {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-14px) rotate(-1deg); }
}
/* Contact shadow, drawn in CSS so it scales with the box and needs no asset */
.product-wrap::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -26px;
    width: 78%;
    height: 26px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(42,37,71,.30) 0%, rgba(42,37,71,0) 70%);
    animation: shadowPulse 4s ease-in-out infinite;
    z-index: 0;
}
@keyframes shadowPulse {
    0%,100% { transform: translateX(-50%) scaleX(1);   opacity: .85; }
    50%     { transform: translateX(-50%) scaleX(.82); opacity: .45; }
}
.product-img {
    position: relative;
    z-index: 1;
    width: 100%;
    filter: drop-shadow(0 18px 30px rgba(42,37,71,.20));
}
/* Shine sweep */
.product-wrap::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -100%;
    width: 60%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
    z-index: 2;
    animation: shine 5s ease-in-out infinite 2s;
    pointer-events: none;
}
@keyframes shine {
    0% { left: -100% } 40% { left: 150% } 100% { left: 150% }
}

.hero-intro {
    font-family: var(--ff);
    font-size: 1.06rem;
    line-height: 2.15;
    color: #443E5C;
}
.hero-intro em {
    font-style: normal;
    font-weight: 700;
    color: var(--coral);
}
.hero-intro strong { color: var(--ink); font-weight: 700; }

.hero-char {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(42,37,71,.12));
    animation: floatChar 5s ease-in-out infinite 1s;
}
@keyframes floatChar {
    0%,100% { transform: translateY(0) }
    50%     { transform: translateY(-10px) }
}

/* ── Photo strip ──
   The client's three retouched photographs, each with the SMART kit box in
   frame. Flush three-across full-bleed, matching the original architecture. */
.photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(42,37,71,.10);
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
}
.ps-cell {
    margin: 0;
    overflow: hidden;
    background: var(--blush);
}
.ps-cell img {
    width: 100%;
    height: clamp(190px, 20vw, 288px);
    object-fit: cover;
    object-position: center 42%;
    transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.ps-cell:hover img { transform: scale(1.045); }

/* ══════════════════════════════════════════
   AUCHITYA
══════════════════════════════════════════ */
.s-auchitya {
    background: var(--blush);
    padding: var(--sec-y) 0;
    position: relative;
    overflow: hidden;
}
.s-auchitya::before {
    content: '';
    position: absolute;
    top: -180px; left: -120px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(232,90,79,.10) 0%, transparent 68%);
    pointer-events: none;
}
/* Supplied warm wash, at low opacity only. At full strength this is the very
   texture that made this section look muddy on the Eklavya build. */
.s-auchitya::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: url('../images/tex-wash.webp') bottom center / 100% auto no-repeat;
    opacity: .22;
    pointer-events: none;
    z-index: 0;
}
.s-auchitya .container-xl { position: relative; z-index: 1; }

.auchitya-img {
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 10px 22px rgba(42,37,71,.10));
    transition: transform .5s ease;
}
.auchitya-img:hover { transform: scale(1.025); }

.auchitya-quote {
    margin-top: 1.75rem;
    padding: 1.35rem 1.7rem;
    border-left: 4px solid var(--coral);
    background: rgba(255,255,255,.72);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: var(--ff);
    font-size: 1rem;
    line-height: 2;
    color: #453F5E;
    box-shadow: var(--sh-sm);
}
.auchitya-quote strong { color: var(--ink); }
.auchitya-quote cite {
    display: block;
    margin-top: .65rem;
    font-style: normal;
    font-weight: 700;
    color: var(--coral);
    font-size: .96rem;
}

/* ══════════════════════════════════════════
   PARAMPARA — deep navy replaces the old muddy gold
══════════════════════════════════════════ */
.s-parampara {
    background: var(--navy);
    padding: var(--sec-y) 0;
    position: relative;
    overflow: hidden;
}
/* two soft brand-coloured glows keep a large dark block from going flat */
.s-parampara::before,
.s-parampara::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.s-parampara::before {
    top: -140px; right: -100px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(232,90,79,.26) 0%, transparent 66%);
}
.s-parampara::after {
    bottom: -180px; left: -120px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(46,139,230,.20) 0%, transparent 66%);
}
.s-parampara .container-xl { position: relative; z-index: 1; }
.s-parampara .reg { color: rgba(255,255,255,.7); }

.parampara-divider {
    width: 76px;
    height: 3px;
    background: var(--amber);
    margin: .25rem auto 1rem;
    border-radius: 3px;
}

/* ══════════════════════════════════════════
   KALA MADHYAM
══════════════════════════════════════════ */
.s-kala {
    background: linear-gradient(155deg, #F4F0FC 0%, #EDE9FA 42%, #E6F0FB 100%);
    padding: var(--sec-y) 0;
    position: relative;
    overflow: hidden;
}
/* Supplied crumpled-paper texture, faint so it reads as grain not wallpaper */
.s-kala::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/tex-paper.webp') center / cover no-repeat;
    opacity: .30;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
/* the old crumpled-paper oval asset is replaced by a pure CSS blob */
.s-kala::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 62%; max-width: 760px;
    aspect-ratio: 1 / .62;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Two horizontal bands rather than side-by-side columns.
   The five "what the child is actually doing" lines used to be a bulleted list
   inside a narrow column. That wasted the page width and made the left column
   far taller than anything beside it, which is where the voids came from. As a
   five-across row they fill the width and the section gets much shorter. */
.kala-top {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}
.kala-intro, .kala-aside { position: relative; z-index: 2; }

.kala-heading {
    font-family: var(--ff);
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin-bottom: .85rem;
}
.kala-heading span { color: var(--coral); }

.kala-text { font-family: var(--ff); font-size: .96rem; line-height: 1.9; color: #4A4463; }

/* Mascot sits beside the bubble, not above it, so the band stays short */
.kala-aside {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 2vw, 1.5rem);
}
.kala-char {
    width: auto;
    max-height: clamp(132px, 14vw, 176px);
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(42,37,71,.14));
    animation: floatChar 5.5s ease-in-out infinite .5s;
}
.kala-aside-body { flex: 1; min-width: 0; }

.speech-bubble {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px;
    padding: 1.15rem 1.35rem;
    box-shadow: var(--sh-md);
    border: 1px solid rgba(255,255,255,.85);
}
.speech-bubble p {
    font-family: var(--ff);
    font-size: .95rem;
    line-height: 1.85;
    color: #453F5E;
    margin: 0;
}
.kala-tail {
    font-family: var(--ff);
    font-size: .93rem;
    line-height: 1.8;
    color: #4A4463;
    margin: .85rem 0 0;
    padding-left: .2rem;
}
.kala-tail strong { color: var(--ink); }

/* Lead-in to the five-across row */
.kala-lead {
    font-family: var(--ff);
    font-size: clamp(.98rem, 1.9vw, 1.08rem);
    line-height: 1.75;
    color: var(--ink);
    text-align: center;
    max-width: 700px;
    margin: clamp(1.35rem, 3vw, 2rem) auto .95rem;
    position: relative;
    z-index: 2;
}

/* Five across: uses the full width, so no gutter is left empty */
.kala-chips {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .7rem;
    padding: 0;
    margin: 0;
    max-width: 1120px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
.kala-chips li {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(42,37,71,.07);
    border-radius: 14px;
    padding: .8rem .85rem .85rem;
    font-family: var(--ff);
    font-size: .86rem;
    line-height: 1.6;
    color: #4A4463;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.kala-chips li::before {
    content: '\2192';
    display: block;
    color: var(--coral);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    margin-bottom: .45rem;
}
.kala-chips li strong { color: var(--ink); font-weight: 700; }
.kala-chips li:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(232,90,79,.32);
    box-shadow: 0 10px 24px rgba(42,37,71,.10);
}

/* ══════════════════════════════════════════
   BUNIYADI GUN
══════════════════════════════════════════ */
.s-buniyadi {
    background: var(--white);
    padding: var(--sec-y) 0 0;
    position: relative;
}
/* Mascot beside the intro, not centred on its own row. Alone it produced a
   full-width empty band with a small figure floating in the middle of it. */
.buniyadi-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    max-width: 880px;
    margin: 0 auto 2rem;
}
.buniyadi-mascot {
    width: clamp(104px, 12vw, 148px);
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(42,37,71,.10));
    animation: floatChar 6s ease-in-out infinite 2s;
}
.buniyadi-intro {
    font-family: var(--ff);
    font-size: 1.14rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.85;
}
.buniyadi-intro em { font-style: normal; font-weight: 700; color: var(--coral); }

.qualities-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-bottom: 2.5rem;
}
.quality-card {
    background: var(--white);
    border-radius: var(--r-md);
    padding: 1.25rem 1.25rem 1.35rem;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.quality-card::after {          /* coral rule that draws in on hover */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.quality-card::before {          /* shine sweep */
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(232,90,79,.09) 50%, transparent 60%);
    transition: left .45s ease;
    pointer-events: none;
}
.quality-card:hover::before { left: 150%; }
.quality-card:hover::after  { transform: scaleX(1); }
.quality-card:hover {
    border-color: rgba(232,90,79,.35);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(232,90,79,.13);
}
.qc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    font-size: 1.1rem;
    line-height: 1;
    background: var(--coral-l);
    border-radius: 10px;
    margin-bottom: .55rem;
}
.quality-card strong {
    display: block;
    font-family: var(--ff);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .35rem;
}
.quality-card p {
    font-family: var(--ff);
    font-size: .87rem;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
}

/* coral wave carrying the eye into the next section */
.s-buniyadi::after {
    content: '';
    display: block;
    height: 56px;
    background: var(--coral);
    clip-path: ellipse(56% 100% at 50% 100%);
}

/* ══════════════════════════════════════════
   CAROUSEL
══════════════════════════════════════════ */
.s-carousel {
    background: var(--blush);
    padding: var(--sec-y) 0;
}
.carousel-shell {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 1.75rem;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
}
.carousel-art { position: relative; }
.carousel-art img {
    width: 100%;
    max-width: 168px;
    margin: 0 auto;
    filter: drop-shadow(0 10px 22px rgba(42,37,71,.12));
    animation: floatChar 6.5s ease-in-out infinite 1.5s;
}
.carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
}
.c-slides {
    flex: 1;
    min-height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.c-slide {
    display: none;
    text-align: center;
    width: 100%;
}
/* The entrance animation only ever moves the slide INTO view. Visibility is
   never delegated to it, so a slide can't end up stuck invisible if the
   animation is blocked, paused or interrupted. */
.c-slide.active { animation: slideUp .42s ease both; }
.c-slide.active { display: block; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px) }
    to   { opacity: 1; transform: translateY(0) }
}
.c-title {
    font-family: var(--ff);
    font-size: clamp(1.15rem, 2.3vw, 1.45rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: .7rem;
}
.c-slide p {
    font-family: var(--ff);
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 2;
    color: var(--body);
    margin: 0;
}
.c-arrow {
    background: rgba(255,255,255,.9);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 42px; height: 42px;
    font-size: 1.2rem;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    user-select: none;
}
.c-arrow:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(232,90,79,.34);
}
.c-dots { display: flex; justify-content: center; gap: 9px; margin-top: 1.1rem; }
.c-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(42,37,71,.20);
    cursor: pointer;
    transition: background .2s, transform .2s, width .25s;
    position: relative;
}
/* Invisible 44px touch target, centred. Keeps the dot visually small while
   meeting the minimum tap size on phones. */
.c-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}
.c-dot.active { background: var(--coral); width: 26px; border-radius: 6px; }

/* ══════════════════════════════════════════
   ABHIBHAVAK
══════════════════════════════════════════ */
.s-abhibhavak {
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: var(--sec-y) 0;
}
/* Capped at the artwork's native 1500px and height-limited, so the figures
   stay at a sensible scale instead of rendering near life-size on wide
   screens. This is the "image of family is too big" the client reported. */
/* Two columns instead of copy overlaid on the artwork. The overlay hid the
   mother behind the card, and controlling the section height meant cropping the
   image, which cut her head off. Side by side: nothing cropped, nothing hidden,
   and the copy sets the height. */
.abhi-grid {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
}
.abhi-art { margin: 0; }
.abhi-art img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
}
.abhi-text-box {
    max-width: 520px;
}
.abhi-heading {
    font-family: var(--ff);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: .9rem;
}
.abhi-body {
    font-family: var(--ff);
    font-size: .95rem;
    line-height: 1.85;
    color: #453F5E;
    margin-bottom: .65rem;
}
.abhi-body:last-child { margin-bottom: 0; }
.abhi-body strong { color: var(--ink); }

/* ══════════════════════════════════════════
   EK NAMUNA (Audio)
══════════════════════════════════════════ */
.namuna-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.namuna-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}
.namuna-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 55%);
    pointer-events: none;
}
.namuna-coral { background: var(--coral); }
.namuna-navy  { background: var(--navy); }

.namuna-inner {
    width: 100%;
    max-width: 420px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.namuna-icon {
    font-size: 1.7rem;
    margin-bottom: .4rem;
    animation: namunaPulse 2.5s ease-in-out infinite;
}
@keyframes namunaPulse {
    0%,100% { transform: scale(1) }
    50%     { transform: scale(1.12) }
}
.namuna-heading {
    font-family: var(--ff);
    font-size: 1.22rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.7;
    margin-bottom: 1.15rem;
}
.namuna-heading .reg { color: rgba(255,255,255,.75); }

.player-box {
    background: #fff;
    border-radius: var(--r-md);
    padding: 1.3rem 1.5rem;
    box-shadow: 0 10px 34px rgba(28,24,50,.24);
}
.player-label {
    font-family: var(--ffe);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    margin-bottom: .85rem;
    text-align: left;
}
.player-label .reg { text-transform: none; }
.player-row { display: flex; align-items: center; gap: .85rem; }
.play-btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--coral);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(232,90,79,.4);
}
.play-btn:hover {
    background: var(--coral-d);
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(232,90,79,.5);
}
.namuna-navy .play-btn { background: var(--navy); box-shadow: 0 4px 14px rgba(42,37,71,.4); }
.namuna-navy .play-btn:hover { background: var(--navy-d); }
.play-btn svg { margin-left: 2px; }

.progress-wrap { flex: 1; cursor: pointer; padding: 8px 0; }
.progress-track { height: 6px; background: #EFECF4; border-radius: 6px; overflow: hidden; }
.progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--coral), var(--amber));
    border-radius: 6px;
    transition: width .3s linear;
}
.namuna-navy .progress-fill { background: linear-gradient(90deg, var(--navy), var(--sky)); }
.player-time {
    font-family: var(--ffe);
    font-size: 13px;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
    background: var(--navy-d);
    padding: 1.6rem 0 1.4rem;
    color: rgba(255,255,255,.72);
}
.footer-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 2rem 3rem;
    align-items: start;
}
/* The logo is drawn for light surfaces, so on navy it sits on a white plate
   instead of being recoloured. Rendered large enough that the mascot inside the
   wide lockup still reads crisply: 72px tall from a 1500px source. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.footer-logo-plate {
    display: inline-flex;
    background: var(--yellow);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 3px 14px rgba(0,0,0,.22);
}
.footer-logo { height: 62px; width: auto; display: block; }
.footer-tag {
    font-family: var(--ff);
    font-size: 11.5px;
    color: rgba(255,255,255,.5);
    letter-spacing: .05em;
    margin: .2rem 0 0;
}
.footer-info {
    font-family: var(--ffe);
    font-size: 13px;
    line-height: 1.85;
}
.footer-info p { margin: 0; }
.footer-info a { color: rgba(255,255,255,.9); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.footer-info a:hover { color: #fff; border-bottom-color: var(--coral); }
.footer-site { margin-bottom: .35rem !important; }
.footer-site a {
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    border-bottom: none;
}
.footer-site a:hover { color: var(--amber); }
.footer-by { display: flex; align-items: center; gap: .5rem; }
.footer-dafinity {
    height: 20px; width: auto;
    flex-shrink: 0;
    /* the mark is a warm orange that reads slightly muddy on navy; a touch of
       brightness lifts it without recolouring the client's logo */
    filter: brightness(1.12) saturate(1.05);
}
.footer-copy {
    margin-top: .6rem !important;
    color: rgba(255,255,255,.42);
    font-size: 12px;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 320px 1fr 190px; gap: 1.5rem; }
    .carousel-shell { grid-template-columns: 148px 1fr; gap: 1.25rem; }
}

@media (max-width: 991.98px) {
    /* Bootstrap gutter vs container padding: keep rows inside the viewport */
    .s-auchitya .row,
    .s-parampara .row { --bs-gutter-x: 1.5rem; }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "box char" "text text";
        gap: 1rem;
    }
    .hero-box-col { max-width: 280px; }
    .hero-char { max-height: 230px; }
    .kala-top { grid-template-columns: 1fr; gap: 1.35rem; }
    .kala-chips { grid-template-columns: repeat(3, 1fr); }
    .abhi-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .abhi-text-box { max-width: 100%; }
    .abhi-art { order: -1; }
    .abhi-art img { max-height: 320px; margin: 0 auto; }
    .qualities-wrap { grid-template-columns: repeat(2, 1fr); }
    .carousel-shell { grid-template-columns: 1fr; gap: 1rem; }
    .carousel-art img { max-width: 130px; }
    .namuna-split { grid-template-columns: 1fr; }
    .namuna-card { min-height: auto; padding: 3rem 2rem; }
    .footer-grid { gap: 2rem; }
}

@media (max-width: 767.98px) {
    html { font-size: 15px; }
    .nav-logo { height: 48px; }
    .photo-strip { grid-template-columns: 1fr 1fr; }
    .ps-cell:last-child { grid-column: 1 / -1; }
    .kala-chips { grid-template-columns: repeat(2, 1fr); }
    .kala-aside { flex-direction: column; text-align: center; }
    .kala-char { max-height: 150px; }
    .speech-bubble { border-radius: var(--r-lg); }
    .qualities-wrap { grid-template-columns: 1fr 1fr; }
    .s-buniyadi::after { height: 60px; }
    .c-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-info a { padding: .4rem 0; }

    /* abhibhavak stacks: image above, text below on a plain surface */
    .buniyadi-head { flex-direction: column; text-align: center; gap: .75rem; }
    .buniyadi-mascot { width: 108px; }
    .abhi-art img { max-height: 250px; }
}

@media (max-width: 575.98px) {
    .qualities-wrap { grid-template-columns: 1fr; }
    .kala-chips { grid-template-columns: 1fr; }
    .namuna-card { padding: 2.5rem 1.25rem; }
    .player-box { padding: 1rem; }
    .hero-grid { gap: .5rem; }
    .photo-strip { grid-template-columns: 1fr; }
    .ps-cell:last-child { grid-column: auto; }
    .footer-brand { gap: .75rem; }
    .footer-logo { height: 50px; }
    .footer-logo-plate { padding: 7px 12px; }
}

/* ══════════════════════════════════════════
   MOTION PREFERENCE
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
    #mainNav, .c-arrow, .c-dots, .namuna-card .player-box { display: none !important; }
    .c-slide { display: block !important; }
    .s-parampara, .namuna-coral, .namuna-navy, .site-footer { background: #fff !important; color: #000 !important; }
    .text-white-soft, .heading-white, .namuna-heading { color: #000 !important; }
}