/* ========================================
   MATHE MEDIA — PODCAST SERVICE LANDING PAGE
   ======================================== */

:root {
    --navy: #171a4a;
    --navy-soft: #2c2f5f;
    --purple: #6a4cf0;
    --orange: #ff7a3d;
    --c-strategy: #2f7de1;
    --c-preprod: #1e9e6c;
    --c-production: #f5821f;
    --c-content: #ec1561;
    --c-distribution: #7b2ff7;
    --c-growth: #55b241;
    --bg-azure: #dcf0fb;
    --bg-turquoise: #d2f5ee;
    --bg-green: #e3f7df;
    --bg-peach: #ffe8d9;
    --bg-pink: #ffe0ec;
    --bg-lavender: #ece3ff;
    --card-white: #ffffff;
    --card-tint: #eaf5ff;
    --ink: #1a1a3d;
    --ink-soft: #4a4d72;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-card: 0 20px 50px rgba(23, 26, 74, 0.10);
    --shadow-soft: 0 8px 24px rgba(23, 26, 74, 0.08);
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

.lp {
    font-family: var(--font-body);
    color: var(--ink);
    /* Soft, Canva-style pastel wash sweeping through the brand's own
       step-badge colors (blue → green → peach → pink → lavender)
       instead of the old two-tone azure/turquoise gradient. Kept light
       so white cards on top stay easy to read. */
    background: linear-gradient(135deg,
        var(--bg-azure) 0%,
        var(--bg-turquoise) 20%,
        var(--bg-green) 38%,
        var(--bg-peach) 54%,
        var(--bg-pink) 70%,
        var(--bg-lavender) 86%,
        var(--bg-azure) 100%);
    overflow-x: clip;
}

.lp * {
    box-sizing: border-box;
}

.lp .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.lp img {
    max-width: 100%;
    display: block;
}

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

.lp ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- NAV ---------- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 8px 0;
    background: rgba(230, 242, 245, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.lp-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.lp-logo img {
    height: 60px;
    width: auto;
}

.lp-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 4px;
}

.lp-nav__links a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--navy);
    padding: 8px 16px;
    border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

.lp-nav__links a:hover {
    background: rgba(255, 255, 255, 0.6);
}

.lp-nav__links a.is-active {
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.lp-nav__cta {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--navy);
    background: #ffffff;
    border: 1.5px solid rgba(23, 26, 74, 0.15);
    border-radius: 999px;
    padding: 10px 18px;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lp-nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    background: var(--navy);
    color: #fff;
}

/* Short CTA label — sirf phones pe dikhta hai (see bottom) */
.lp-nav__cta-short {
    display: none;
}

.lp-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.lp-mobile-toggle span {
    width: 20px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- HERO ---------- */
.lp-hero {
    position: relative;
    padding: 10px 0 0;
    text-align: center;
}

.lp-hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3.8vw, 44px);
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.lp-hero h1 .grad-purple {
    color: var(--purple);
}

.lp-hero h1 .grad-orange {
    color: var(--orange);
}

.lp-hero__sub {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--navy-soft);
    margin: 0 0 4px;
}

/* ---------- PROCESS STRIP (single reference image — renders identically on every device) ---------- */
.lp-process-wrap {
    position: relative;
    margin-top: 10px;
    padding-bottom: 24px;
}

.lp-process-scroll {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
}

.lp-process-scroll picture {
    display: block;
    width: 100%;
}

.lp-process-img {
    display: block;
    width: 100%;
    min-width: 280px;
    max-width: 1216px;
    height: auto;
    margin: 0;
    border-radius: var(--radius-lg);
}

@media (max-width: 680px) {
    .lp-process-scroll {
        overflow-x: visible;
        justify-content: center;
    }

    /* Same width as the Podcasts card below — fills the container like it does.
       Full image shown (no cropping), height follows naturally from the aspect ratio. */
    .lp-process-img {
        min-width: 0;
        max-width: none;
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .lp-process-wrap {
        margin-top: 4px;
        padding-bottom: 8px;
    }
}

/* ---------- SECTION SHARED ---------- */
.lp-section {
    padding: 40px 0 88px;
    scroll-margin-top: 96px;
}

.lp-section__head {
    text-align: center;
    margin-bottom: 32px;
}

.lp-section__head h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    color: var(--navy);
    margin: 0 0 10px;
}

.lp-section__head p {
    font-size: 15.5px;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto;
}

.lp-card {
    background: linear-gradient(160deg, #f3faff 0%, var(--card-white) 60%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 44px;
}

/* ---------- PODCASTS ---------- */
.lp-podcasts-wrap {
    position: relative;
}

.lp-podcasts-mic {
    position: absolute;
    top: -65px;
    left: 0;
    width: 215px;
    z-index: 2;
    filter: drop-shadow(0 24px 32px rgba(23, 26, 74, 0.22));
    pointer-events: none;
}

.lp-podcasts-card {
    margin-left: 100px;
    padding: 28px 28px 28px 132px;
}

/* Podcasts section dropped its mic — card goes back to full-width, no left clearance */
.lp-podcasts-card--no-mic {
    margin-left: 0;
    padding: 28px;
}

.lp-content-card {
    padding: 46px 46px 46px 160px;
}

.lp-podcasts-scroll {
    max-height: none;
    overflow: visible;
}

#contact .lp-podcasts-wrap {
    margin-bottom: 50px;
}

@media (max-width: 1180px) {
    .lp-podcasts-mic { width: 190px; top: -50px; left: 0; }
    .lp-podcasts-card { margin-left: 90px; padding-left: 120px; }
    .lp-podcasts-card--no-mic { margin-left: 0; padding-left: 28px; }
    #contact .lp-podcasts-wrap { margin-bottom: 40px; }
}

@media (max-width: 980px) {
    /* Mic: pulled off the flow (position: absolute) and tucked into the
       card's top-left corner at a tilt — it can never push or resize
       any sibling, it just floats over empty corner space.
       Sized by HEIGHT (width: auto) because the source image is a tall
       portrait mic — capping width alone let it grow very tall and
       cover the heading text underneath.
       The card's own top padding is widened below so the mic has real
       room to rest in the corner instead of floating in the gap above it. */
    .lp-podcasts-mic {
        display: block;
        position: absolute;
        top: -28px;
        left: -6px;
        right: auto;
        width: auto;
        height: 80px;
        transform: rotate(-1deg);
        filter: drop-shadow(0 8px 10px rgba(23, 26, 74, 0.2));
    }
    .lp-podcasts-card { margin-left: 0; padding: 48px 20px 26px; }
    .lp-podcasts-card--no-mic { padding-top: 26px; }
    .lp-content-card { padding: 48px 20px 26px; }
    #contact .lp-podcasts-wrap { margin-bottom: 0; }
}


/* Same row format as .lp-podcast-links below: a plain flex row of
   fixed-width cards, not a stretching grid, so row-1 cards end up the
   exact same width/height as row-2 cards. */
.lp-podcast-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.lp-podcast-grid::-webkit-scrollbar {
    display: none;
}

/* Identical footprint to .lp-podcast-link: same fixed width, so the
   16:9 thumb comes out the same height too. */
.lp-podcast-card {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    gap: 6px;
    background: var(--card-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-podcast-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}

.lp-podcast-card__embed {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0d0d24;
}

.lp-podcast-card__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lp-podcast-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-podcast-card__playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lp-podcast-card__playbtn:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translate(-50%, -50%) scale(1.08);
}

.lp-podcast-card__playbtn svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Row-1 cards now follow the exact same body format as row-2's
   .lp-podcast-link cards: no wrapper padding, just a single-line
   truncated title — see .lp-podcast-card__body h3 below. */
.lp-podcast-card__body {
    padding: 0;
}

/* Same treatment as .lp-podcast-link__title: one line only, ellipsis
   if it doesn't fit, identical font/padding/weight to row 2 so both
   rows read as the same card format. */
.lp-podcast-card__body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
    line-height: 1.3;
    margin: 0;
    padding: 0 12px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-podcast-category {
    margin-top: 23px;
}

.lp-podcast-category__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 10px;
    padding-left: 9px;
    border-left: 2px solid var(--navy);
}

.lp-podcast-category__title--blue { border-left-color: var(--c-strategy); }
.lp-podcast-category__title--purple { border-left-color: var(--c-distribution); }
.lp-podcast-category__title--pink { border-left-color: var(--c-content); }
.lp-podcast-category__title--green { border-left-color: var(--c-growth); }

.lp-podcast-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.lp-podcast-links {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.lp-podcast-links::-webkit-scrollbar {
    display: none;
}

.lp-carousel-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #8a6ff5, var(--purple));
    color: #fff;
    box-shadow: 0 6px 16px rgba(106, 76, 240, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.lp-carousel-arrow svg {
    width: 15px;
    height: 15px;
}

.lp-carousel-arrow:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 8px 20px rgba(106, 76, 240, 0.5);
}

.lp-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.lp-podcast-link {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    gap: 6px;
    background: var(--card-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-podcast-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.lp-podcast-link__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0d0d24;
}

.lp-podcast-link__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-podcast-link__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-podcast-link__play svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.lp-podcast-link__title {
    padding: 0 12px 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- CONTENT ECOSYSTEM ---------- */
.lp-eco-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.lp-eco-grid__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.55;
}

.lp-eco-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    border-radius: var(--radius-lg);
    padding: 26px 28px;
}

.lp-eco-item--reels { background: #dcedfd; }
.lp-eco-item--carousels { background: #fdf1d6; }
.lp-eco-item--animations { background: #ece2fb; }
.lp-eco-item--stories { background: #dcf5e9; }

.lp-eco-item__text h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--navy);
    margin: 0 0 8px;
}

.lp-eco-item__text p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}

.lp-eco-item__icon {
    position: relative;
    flex: none;
    width: 82px;
    height: 82px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 12px 26px rgba(23, 26, 74, 0.12);
}
.lp-eco-item__icon svg { width: 42px; height: 42px; }

.lp-eco-item__spark {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 17px;
    line-height: 1;
    color: var(--orange);
    transform: rotate(12deg);
}

.lp-eco-item--reels .lp-eco-item__icon { color: var(--c-content); }
.lp-eco-item--carousels .lp-eco-item__icon { color: var(--c-strategy); }
.lp-eco-item--animations .lp-eco-item__icon { color: var(--c-distribution); }
.lp-eco-item--stories .lp-eco-item__icon { color: #e2483d; }

/* Compact header (icon + label) and big visual — phone-only layout, see ≤560px */
.lp-eco-item__header,
.lp-eco-item__visual {
    display: none;
}

button.lp-eco-item {
    width: 100%;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.lp-eco-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.lp-eco-preview {
    margin-top: 26px;
    text-align: center;
}

.lp-eco-preview__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(106, 76, 240, 0.12), rgba(255, 122, 61, 0.12));
    border: 1px solid rgba(106, 76, 240, 0.2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--purple);
}

.lp-eco-preview__badge svg {
    width: 15px;
    height: 15px;
    flex: none;
    animation: lp-eco-tap 1.8s ease-in-out infinite;
}

@keyframes lp-eco-tap {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.12); }
}

.lp-eco-preview p {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- CONTACT ---------- */
.lp-contact-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 46px 46px 46px 160px;
    min-height: 420px;
}

@media (max-width: 1180px) {
    .lp-contact-card { padding-left: 120px; }
}

.lp-contact-intro h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--navy);
    margin: 0 0 12px;
}

.lp-contact-intro p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.lp-contact-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
}

.lp-contact-highlights li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
}

.lp-contact-highlights__icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-growth);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-contact-highlights__icon svg {
    width: 14px;
    height: 14px;
}

.lp-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-tint);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-contact-row:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-soft);
}

.lp-contact-row__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.lp-contact-row__icon svg { width: 20px; height: 20px; }

.lp-contact-row__text {
    display: flex;
    flex-direction: column;
}

.lp-contact-row__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.lp-contact-row__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
}

/* ---------- FOOTER ---------- */
.lp-footer {
    padding: 48px 0 20px;
    border-top: 1px solid rgba(23, 26, 74, 0.08);
}

.lp-footer__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.lp-footer__brand {
    max-width: 260px;
}

.lp-footer__logo {
    height: 60px;
    width: auto;
    margin-bottom: 12px;
}

.lp-footer__text {
    font-size: 14px;
    color: var(--ink-soft);
}

.lp-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-footer__links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.2s ease;
}

.lp-footer__links a:hover {
    color: var(--purple);
}

.lp-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lp-footer__contact a {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.lp-footer__contact a:hover {
    color: var(--purple);
}

.lp-footer__social {
    display: flex;
    gap: 18px;
    margin-top: 8px;
}

.lp-footer__social a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0;
}

.lp-footer__social a:hover {
    color: var(--purple);
}

.lp-footer__bottom {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(23, 26, 74, 0.08);
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
}

@media (max-width: 720px) {
    .lp-footer__wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 28px;
    }

    .lp-footer__brand {
        max-width: 100%;
    }

    .lp-footer__links,
    .lp-footer__contact {
        align-items: center;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    .lp-nav__links { display: none; }
    .lp-mobile-toggle { display: inline-flex; }
    .lp-nav.is-open .lp-nav__links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 8px);
        left: 20px;
        right: 20px;
        background: #fff;
        border-radius: 20px;
        padding: 14px;
        box-shadow: var(--shadow-card);
        gap: 4px;
    }
    .lp-nav.is-open .lp-nav__links a { padding: 14px 18px; }

    .lp-process-wrap { padding-bottom: 20px; }

    .lp-podcast-grid { grid-template-columns: 1fr; }

    .lp-contact-card { grid-template-columns: 1fr; padding: 48px 20px 26px; min-height: 0; }
}

@media (max-width: 560px) {
    .lp-eco-grid { grid-template-columns: 1fr; }
    .lp-hero { padding-top: 14px; }
    .lp-logo img { height: 42px; }
}

/* ---------- REELS/SHORTS MODAL ---------- */
.lp-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lp-modal.is-open {
    display: flex;
}

.lp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 26, 74, 0.6);
    backdrop-filter: blur(4px);
}

.lp-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 28px;
    width: 100%;
    max-width: 920px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
    animation: lp-modal-in 0.22s ease;
}

@keyframes lp-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--card-tint);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: background 0.2s ease;
}

.lp-modal__close:hover {
    background: rgba(23, 26, 74, 0.12);
}

.lp-modal__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--navy);
    margin: 0;
    padding: 28px 60px 6px 28px;
    flex: none;
}

.lp-modal__scroll {
    overflow-y: auto;
    padding: 8px 28px 28px;
}

.lp-shorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.lp-short-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--card-tint);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-short-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.lp-short-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0d0d24;
}

.lp-short-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-short-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-short-card__play svg {
    width: 15px;
    height: 15px;
    margin-left: 2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.lp-short-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    color: var(--navy);
    padding: 0 8px 8px;
    line-height: 1.3;
}

@media (max-width: 560px) {
    .lp-modal { padding: 12px; }
    .lp-modal__panel { max-height: 90vh; border-radius: 20px; }
    .lp-modal__title { font-size: 19px; padding: 22px 50px 4px 20px; }
    .lp-modal__scroll { padding: 6px 20px 20px; }
    .lp-carousel-embed iframe { height: 340px; }
    .lp-carousel-embed--article iframe { height: 340px; }
    .lp-carousel-embed--reel iframe { height: 400px; }
}

/* ---------- LINKEDIN CAROUSEL EMBEDS ---------- */
.lp-embed-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}

.lp-carousel-embeds {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.lp-carousel-embeds::-webkit-scrollbar {
    display: none;
}

.lp-carousel-embed {
    flex: 0 0 340px;
    background: var(--card-tint);
    border-radius: 16px;
    overflow: hidden;
    padding: 8px 8px 0;
}

.lp-carousel-embed iframe {
    width: 100%;
    height: 380px;
    border: none;
    border-radius: 10px;
    display: block;
    background: #fff;
}

.lp-carousel-embed--article {
    flex-basis: 320px;
}

.lp-carousel-embed--article iframe {
    height: 380px;
}

.lp-carousel-embed--reel {
    flex-basis: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-carousel-embed--reel iframe {
    height: 460px;
}

.lp-carousel-embed--reel .instagram-media {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.lp-carousel-embed__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--navy);
    padding: 12px;
}

.lp-carousel-embed__link svg {
    width: 13px;
    height: 13px;
    color: var(--purple);
}

/* =========================================================
   MOBILE LAYER — must stay at the END of this file
   (same specificity pe baad wala rule jeetta hai)
   ========================================================= */

/* ---------- Tablet & below (≤980px) ---------- */
@media (max-width: 980px) {
    .lp .container { padding: 0 20px; }

    /* Hamburger → X (JS already .lp-nav pe .is-open lagata hai) */
    .lp-nav.is-open .lp-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .lp-nav.is-open .lp-mobile-toggle span:nth-child(2) { opacity: 0; }
    .lp-nav.is-open .lp-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .lp-section { padding: 28px 0 48px; }
    .lp-section__head { margin-bottom: 18px; }
    #podcasts.lp-section { padding-top: 6px; }

    /* Nested vertical scroll box hatao — scroll-trap khatam */
    .lp-podcasts-scroll {
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-right: 0;
    }

    /* Top 3 podcasts: same swipe-row treatment and same fixed card
       width as row 2, so both rows stay identical in size here too. */
    .lp-podcast-grid {
        scroll-snap-type: x mandatory;
        gap: 14px;
    }
    .lp-podcast-card { flex: 0 0 200px; scroll-snap-align: start; }

    .lp-podcast-links { scroll-snap-type: x mandatory; }
    .lp-podcast-link { flex: 0 0 200px; scroll-snap-align: start; }

    .lp-podcast-category__title { font-size: 11px; }

    /* Content ecosystem: tablet pe bhi 1 column, curvy line hide */
    .lp-eco-grid { grid-template-columns: 1fr; gap: 14px; }
    .lp-eco-grid__line { display: none; }

    /* Touch pe hover-lift atka reh jaata hai */
    .lp-podcast-card:hover,
    .lp-podcast-link:hover,
    button.lp-eco-item:hover,
    .lp-contact-row:hover { transform: none; }
}

/* ---------- Phones (≤560px) ---------- */
@media (max-width: 560px) {
    .lp .container { padding: 0 14px; }

    /* Nav: short CTA label */
    .lp-nav__inner { gap: 10px; }
    .lp-nav__cta { font-size: 12px; padding: 8px 14px; }
    .lp-nav__cta-full { display: none; }
    .lp-nav__cta-short { display: inline; }
    .lp-nav.is-open .lp-nav__links { left: 14px; right: 14px; }

    /* Mic scales down one more notch for narrow phones, same corner/tilt */
    .lp-podcasts-mic { top: -20px; left: -4px; width: auto; height: 50px; }

    /* Cards — symmetric compact padding, extra room up top for the mic */
    .lp-podcasts-card { padding: 36px 14px 20px; border-radius: 22px; }
    .lp-podcasts-card--no-mic { padding-top: 20px; }
    .lp-content-card { padding: 36px 14px 20px; }
    .lp-contact-card { padding: 36px 14px 20px; }

    /* Arrows hatao, swipe karo */
    .lp-carousel-arrow { display: none; }
    .lp-podcast-card { flex-basis: 68%; }
    .lp-podcast-link { flex-basis: 68%; }


    /* Eco items: 2x2 image-forward cards (icon+label header, big visual below) */
    .lp-eco-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lp-eco-grid__line { display: none; }

    .lp-eco-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
    }

    .lp-eco-item__icon,
    .lp-eco-item__text {
        display: none;
    }

    .lp-eco-item__header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }

    .lp-eco-item__icon-sm {
        flex: none;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lp-eco-item__icon-sm svg { width: 20px; height: 20px; }

    .lp-eco-item--reels .lp-eco-item__icon-sm { color: var(--c-content); }
    .lp-eco-item--carousels .lp-eco-item__icon-sm { color: var(--c-strategy); }
    .lp-eco-item--animations .lp-eco-item__icon-sm { color: var(--c-distribution); }
    .lp-eco-item--stories .lp-eco-item__icon-sm { color: #e2483d; }

    .lp-eco-item__label {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 14px;
        color: var(--navy);
    }

    .lp-eco-item__visual {
        display: block;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
    }

    .lp-eco-item__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .lp-eco-preview { margin-top: 18px; }
    .lp-eco-preview__badge { font-size: 12px; padding: 9px 16px; }

    /* Contact */
    .lp-contact-card { gap: 18px; }
    .lp-contact-intro h3 { font-size: 19px; text-align: left; margin: 0; }
    .lp-contact-row { padding: 12px 14px; gap: 12px; }
    .lp-contact-row__icon { width: 40px; height: 40px; }
    .lp-contact-row__icon svg { width: 18px; height: 18px; }
    .lp-contact-row__value { font-size: 15px; overflow-wrap: anywhere; }

    /* Modals — embeds screen ke hisaab se, swipe + snap */
    .lp-carousel-embeds { gap: 12px; scroll-snap-type: x mandatory; }
    .lp-carousel-embed,
    .lp-carousel-embed--article,
    .lp-carousel-embed--reel { flex-basis: 88%; scroll-snap-align: center; }
}
/* ---------- Play buttons: hidden until the video card is hovered ----------
   Touch devices have no hover, so they keep the button visible. */
@media (hover: hover) {
    .lp-podcast-card__playbtn,
    .lp-podcast-link__play,
    .lp-short-card__play {
        opacity: 0;
        transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .lp-podcast-card:hover .lp-podcast-card__playbtn,
    .lp-podcast-card__playbtn:focus-visible,
    .lp-podcast-link:hover .lp-podcast-link__play,
    .lp-short-card:hover .lp-short-card__play {
        opacity: 1;
    }
}