/* ============================================================
   AMRIT GITA
   RESPONSIVE STYLES
   File: css/responsive.css
============================================================ */


/* ============================================================
   1. LARGE LAPTOPS
   1200px AND BELOW
============================================================ */

@media (max-width: 1200px) {

    /* --------------------------------------------------------
       GLOBAL
    -------------------------------------------------------- */

    .container {
        width: min(
            1120px,
            calc(100% - 44px)
        );
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .desktop-nav {
        gap: 25px;
    }


    .nav-link {
        font-size: 12px;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(500px, 1.05fr);

        gap: 22px;
    }


    .hero-title {
        font-size: clamp(
            52px,
            5.8vw,
            74px
        );
    }


    /* --------------------------------------------------------
       MANDALA
    -------------------------------------------------------- */

    .gita-mandala {
        width: 570px;
        height: 570px;
    }


    .mandala-decoration-ring-outer {
        width: 560px;
        height: 560px;
    }


    .mandala-decoration-ring-middle {
        width: 460px;
        height: 460px;
    }


    .mandala-shloka-ring-outer {
        width: 525px;
        height: 525px;
    }


    .mandala-shloka-ring-inner {
        width: 420px;
        height: 420px;
    }


    .mandala-inner-halo {
        width: 335px;
        height: 335px;
    }


    .mandala-center {
        width: 305px;
        height: 305px;
    }


    .mandala-ambient-glow {
        width: 530px;
        height: 530px;
    }


    /* --------------------------------------------------------
       OTHER SECTIONS
    -------------------------------------------------------- */

    .chapters-home-container,
    .wisdom-container {
        gap: 65px;
    }


    .visual-experience-content {
        padding: 62px 52px;
    }

}



/* ============================================================
   2. TABLET / SMALL LAPTOP
   1024px AND BELOW
============================================================ */

@media (max-width: 1024px) {

    /* --------------------------------------------------------
       GLOBAL
    -------------------------------------------------------- */

    :root {
        --ag-header-height: 82px;
    }


    .container {
        width: min(
            940px,
            calc(100% - 40px)
        );
    }


    .section-padding {
        padding: 90px 0;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .navbar-container {
        grid-template-columns:
            1fr auto;

        gap: 20px;
    }


    .desktop-nav {
        display: none;
    }


    .navbar-actions {
        justify-self: end;
    }


    .mobile-menu-button {
        display: flex;
    }


    /* --------------------------------------------------------
       MOBILE NAV BASE
    -------------------------------------------------------- */

    .mobile-nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        gap: 4px;

        padding:
            15px
            max(
                20px,
                calc((100vw - 940px) / 2)
            )
            22px;

        border-top:
            1px solid var(--ag-border);

        border-bottom:
            1px solid var(--ag-border);

        background:
            rgba(251, 246, 236, 0.985);

        box-shadow:
            0 22px 45px rgba(57, 34, 13, 0.10);
    }


    .mobile-nav.open,
    .mobile-nav.active,
    .mobile-nav.is-open {
        display: flex;
    }


    .mobile-nav-link {
        min-height: 46px;

        display: flex;

        align-items: center;

        padding: 0 12px;

        border-radius: 11px;

        color: var(--ag-text-soft);

        font-size: 14px;
        font-weight: 750;

        transition:
            color var(--ag-transition),
            background var(--ag-transition);
    }


    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: var(--ag-saffron-dark);

        background:
            rgba(230, 123, 22, 0.07);
    }


    .mobile-guest-actions {
        display: flex;

        align-items: center;

        gap: 10px;

        margin-top: 10px;

        padding-top: 14px;

        border-top:
            1px solid var(--ag-border);
    }


    .mobile-login-link,
    .mobile-primary-link {
        min-height: 46px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 13px;

        font-size: 13px;
        font-weight: 800;
    }


    .mobile-login-link {
        flex: 1;

        border:
            1px solid var(--ag-border);

        color: var(--ag-text);

        background: #ffffff;
    }


    .mobile-primary-link {
        flex: 1;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--ag-saffron),
                var(--ag-saffron-dark)
            );
    }


    .mobile-user-area {
        margin-top: 10px;

        padding-top: 14px;

        border-top:
            1px solid var(--ag-border);
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section {
        min-height: auto;

        padding:
            calc(var(--ag-header-height) + 62px)
            0
            90px;
    }


    .hero-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .hero-content {
        max-width: 780px;

        text-align: center;

        margin-inline: auto;
    }


    .hero-kicker {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-title {
        max-width: 820px;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(
            54px,
            8vw,
            78px
        );
    }


    .hero-description {
        max-width: 720px;

        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-micro-info {
        justify-content: center;
    }


    /* --------------------------------------------------------
       MANDALA COLUMN
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 610px;
    }


    .gita-mandala {
        width: 590px;
        height: 590px;
    }


    .mandala-decoration-ring-outer {
        width: 580px;
        height: 580px;
    }


    .mandala-decoration-ring-middle {
        width: 475px;
        height: 475px;
    }


    .mandala-shloka-ring-outer {
        width: 545px;
        height: 545px;
    }


    .mandala-shloka-ring-inner {
        width: 430px;
        height: 430px;
    }


    .mandala-inner-halo {
        width: 345px;
        height: 345px;
    }


    .mandala-center {
        width: 315px;
        height: 315px;
    }


    .mandala-ambient-glow {
        width: 540px;
        height: 540px;
    }


    .mandala-caption {
        margin-top: -10px;
    }


    .hero-scroll-cue {
        display: none;
    }


    /* --------------------------------------------------------
       JOURNEY
    -------------------------------------------------------- */

    .journey-path {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            50px
            30px;
    }


    .journey-line {
        display: none;
    }


    .journey-step {
        max-width: 400px;

        margin-inline: auto;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-home-container {
        grid-template-columns:
            minmax(260px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 55px;
    }


    .chapters-big-number {
        font-size: 190px;
    }


    /* --------------------------------------------------------
       EXPERIENCE
    -------------------------------------------------------- */

    .visual-experience-preview {
        min-height: 470px;
    }


    .visual-experience-content {
        padding: 55px 42px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container {
        grid-template-columns:
            280px
            minmax(0, 1fr);

        gap: 55px;
    }


    .wisdom-symbol-orbit {
        width: 260px;
        height: 260px;
    }


    .wisdom-symbol-orbit::before {
        width: 205px;
        height: 205px;
    }


    .wisdom-symbol-inner {
        width: 155px;
        height: 155px;

        font-size: 60px;
    }


    /* --------------------------------------------------------
       FINAL CTA
    -------------------------------------------------------- */

    .final-journey-card {
        min-height: 470px;

        padding:
            70px 55px;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .footer-main {
        grid-template-columns:
            1.3fr
            repeat(3, 1fr);

        gap: 32px;
    }

}



/* ============================================================
   3. TABLET PORTRAIT
   900px AND BELOW
============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .guest-auth-actions {
        display: none;
    }


    /*
        Logged-in desktop account button remains visible
        on larger tablet.
    */

    .user-account-copy {
        display: none;
    }


    .user-account-button {
        padding: 6px;
    }


    .account-chevron {
        display: none;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-title {
        font-size:
            clamp(
                50px,
                9vw,
                72px
            );
    }


    /* --------------------------------------------------------
       MANDALA
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 580px;
    }


    .gita-mandala {
        width: 550px;
        height: 550px;
    }


    .mandala-decoration-ring-outer {
        width: 540px;
        height: 540px;
    }


    .mandala-decoration-ring-middle {
        width: 442px;
        height: 442px;
    }


    .mandala-shloka-ring-outer {
        width: 505px;
        height: 505px;
    }


    .mandala-shloka-ring-inner {
        width: 400px;
        height: 400px;
    }


    .mandala-inner-halo {
        width: 320px;
        height: 320px;
    }


    .mandala-center {
        width: 292px;
        height: 292px;
    }


    .mandala-ambient-glow {
        width: 500px;
        height: 500px;
    }


    .mandala-marker {
        font-size: 22px;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-home-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .chapters-number-column {
        display: grid;

        grid-template-columns:
            auto
            180px
            minmax(0, 1fr);

        align-items: center;

        gap: 25px;

        text-align: left;
    }


    .chapters-small-copy {
        grid-column: 1 / -1;
    }


    .chapters-big-number {
        margin: 0;

        font-size: 155px;
    }


    .chapters-number-column p {
        max-width: 250px;

        font-size: 16px;
    }


    /* --------------------------------------------------------
       EXPERIENCE
    -------------------------------------------------------- */

    .visual-experience-panel {
        grid-template-columns: 1fr;
    }


    .visual-experience-preview {
        min-height: 430px;
    }


    .visual-preview-scene {
        width: min(540px, 78%);

        min-height: 300px;
    }


    .visual-experience-content {
        padding:
            55px
            50px
            60px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .wisdom-symbol-column {
        order: 2;
    }


    .wisdom-content {
        order: 1;

        text-align: center;
    }


    .wisdom-content blockquote {
        margin-left: auto;
        margin-right: auto;
    }


    .wisdom-reference {
        justify-content: center;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .footer-main {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:
            40px
            30px;
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }


    .footer-brand p {
        max-width: 480px;
    }

}



/* ============================================================
   4. LARGE MOBILE / SMALL TABLET
   768px AND BELOW
============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       GLOBAL
    -------------------------------------------------------- */

    :root {
        --ag-header-height: 74px;
    }


    .container {
        width:
            calc(100% - 32px);
    }


    .section-padding {
        padding: 76px 0;
    }


    .section-heading h2 {
        font-size:
            clamp(
                36px,
                10vw,
                50px
            );
    }


    .section-heading p {
        font-size: 15px;

        line-height: 1.75;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .brand-logo {
        width: 43px;
        height: 43px;
    }


    .brand-copy strong {
        font-size: 16px;
    }


    .brand-copy span {
        font-size: 9px;
    }


    .user-account-area {
        display: none;
    }


    .mobile-menu-button {
        width: 43px;
        height: 43px;
    }


    .mobile-nav {
        padding:
            14px
            16px
            20px;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section {
        padding:
            calc(var(--ag-header-height) + 45px)
            0
            65px;
    }


    .hero-container {
        gap: 30px;
    }


    .hero-kicker {
        margin-bottom: 22px;

        padding:
            9px
            14px;

        font-size: 11px;
    }


    .hero-title {
        margin-bottom: 20px;

        font-size:
            clamp(
                45px,
                12vw,
                64px
            );

        line-height: 1;
    }


    .hero-description {
        margin-bottom: 25px;

        font-size: 15px;

        line-height: 1.75;
    }


    .hero-actions {
        gap: 14px;

        margin-bottom: 28px;
    }


    .primary-button {
        min-height: 52px;

        padding: 0 19px;
    }


    .hero-micro-info {
        gap: 16px;
    }


    .hero-micro-info strong {
        font-size: 18px;
    }


    /* --------------------------------------------------------
       HERO MANDALA
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 520px;
    }


    .gita-mandala {
        width: 490px;
        height: 490px;
    }


    .mandala-decoration-ring-outer {
        width: 480px;
        height: 480px;
    }


    .mandala-decoration-ring-middle {
        width: 395px;
        height: 395px;
    }


    .mandala-shloka-ring-outer {
        width: 450px;
        height: 450px;
    }


    .mandala-shloka-ring-inner {
        width: 355px;
        height: 355px;
    }


    .mandala-inner-halo {
        width: 285px;
        height: 285px;
    }


    .mandala-center {
        width: 260px;
        height: 260px;
    }


    .mandala-ambient-glow {
        width: 450px;
        height: 450px;
    }


    .mandala-image-border {
        padding: 7px;
    }


    .mandala-marker {
        font-size: 20px;
    }


    .marker-top {
        top: 12px;
    }


    .marker-bottom {
        bottom: 12px;
    }


    .marker-left {
        left: 12px;
    }


    .marker-right {
        right: 12px;
    }


    .mandala-caption {
        justify-content: center;

        text-align: left;
    }


    /* --------------------------------------------------------
       JOURNEY
    -------------------------------------------------------- */

    .journey-heading {
        margin-bottom: 55px;
    }


    .journey-heading h2 {
        font-size:
            clamp(
                36px,
                10vw,
                50px
            );
    }


    .journey-path {
        gap:
            45px
            20px;
    }


    .journey-number {
        width: 72px;
        height: 72px;

        margin-bottom: 20px;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-number-column {
        grid-template-columns:
            130px
            minmax(0, 1fr);
    }


    .chapters-small-copy {
        grid-column: 1 / -1;
    }


    .chapters-big-number {
        font-size: 125px;
    }


    .chapters-content h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }


    /* --------------------------------------------------------
       EXPERIENCE
    -------------------------------------------------------- */

    .visual-experience-panel {
        border-radius: 28px;
    }


    .visual-experience-preview {
        min-height: 390px;
    }


    .visual-preview-scene {
        width: 82%;

        min-height: 275px;
    }


    .visual-scene-symbol {
        font-size: 62px;
    }


    .visual-play-button {
        width: 54px;
        height: 54px;
    }


    .visual-experience-content {
        padding:
            45px
            35px
            50px;
    }


    .visual-experience-content h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-sanskrit {
        font-size:
            clamp(
                21px,
                5vw,
                29px
            );
    }


    .wisdom-content blockquote {
        font-size:
            clamp(
                27px,
                7vw,
                38px
            );
    }


    /* --------------------------------------------------------
       FINAL CTA
    -------------------------------------------------------- */

    .final-journey-card {
        min-height: 440px;

        padding:
            65px
            35px;

        border-radius: 30px;
    }


    .final-journey-content h2 {
        font-size:
            clamp(
                39px,
                10vw,
                56px
            );
    }


    .final-journey-symbol {
        right: 25px;

        font-size: 120px;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .site-footer {
        padding-top: 60px;
    }


    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            36px
            25px;
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }


    /* --------------------------------------------------------
       BACK TO TOP
    -------------------------------------------------------- */

    .back-to-top {
        right: 16px;
        bottom: 16px;

        width: 43px;
        height: 43px;
    }

}



/* ============================================================
   5. MOBILE
   640px AND BELOW
============================================================ */

@media (max-width: 640px) {

    /* --------------------------------------------------------
       GLOBAL
    -------------------------------------------------------- */

    .container {
        width:
            calc(100% - 28px);
    }


    .section-padding {
        padding: 68px 0;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .navbar-container {
        gap: 12px;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-content {
        text-align: left;
    }


    .hero-kicker {
        margin-left: 0;
        margin-right: 0;
    }


    .hero-title {
        margin-left: 0;
        margin-right: 0;

        font-size:
            clamp(
                43px,
                13vw,
                58px
            );
    }


    .hero-description {
        margin-left: 0;
        margin-right: 0;
    }


    .hero-actions {
        justify-content: flex-start;
    }


    .hero-micro-info {
        justify-content: flex-start;
    }


    /* --------------------------------------------------------
       MANDALA
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 470px;

        width: 100%;
    }


    .gita-mandala {
        width: min(450px, 94vw);
        height: min(450px, 94vw);
    }


    .mandala-decoration-ring-outer {
        width: 100%;
        height: 100%;
    }


    .mandala-decoration-ring-middle {
        width: 82%;
        height: 82%;
    }


    .mandala-shloka-ring-outer {
        width: 93%;
        height: 93%;
    }


    .mandala-shloka-ring-inner {
        width: 74%;
        height: 74%;
    }


    .mandala-inner-halo {
        width: 59%;
        height: 59%;
    }


    .mandala-center {
        width: 54%;
        height: 54%;
    }


    .mandala-ambient-glow {
        width: 92%;
        height: 92%;
    }


    .mandala-center-shadow {
        width: 70%;
    }


    .mandala-marker {
        font-size: 18px;
    }


    .mandala-caption {
        margin-top: 4px;
    }


    .mandala-caption p {
        max-width: 260px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       JOURNEY
    -------------------------------------------------------- */

    .journey-path {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .journey-step {
        max-width: 360px;
    }


    .journey-number {
        width: 70px;
        height: 70px;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-number-column {
        grid-template-columns:
            110px
            minmax(0, 1fr);

        gap: 18px;
    }


    .chapters-big-number {
        font-size: 105px;
    }


    .chapters-number-column p {
        font-size: 14px;
    }


    .chapter-preview-item {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        padding: 17px 0;
    }


    /* --------------------------------------------------------
       VISUAL EXPERIENCE
    -------------------------------------------------------- */

    .visual-experience-preview {
        min-height: 350px;
    }


    .visual-preview-scene {
        width: 86%;

        min-height: 250px;

        border-radius: 24px;
    }


    .visual-experience-content {
        padding:
            40px
            25px
            45px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-symbol-orbit {
        width: 230px;
        height: 230px;
    }


    .wisdom-symbol-orbit::before {
        width: 185px;
        height: 185px;
    }


    .wisdom-symbol-inner {
        width: 140px;
        height: 140px;

        font-size: 55px;
    }


    .wisdom-reference {
        flex-wrap: wrap;

        gap: 7px 12px;
    }


    /* --------------------------------------------------------
       FINAL CTA
    -------------------------------------------------------- */

    .final-journey-card {
        padding:
            55px
            24px;

        border-radius: 26px;
    }


    .final-journey-content p {
        font-size: 14px;
    }


    .final-journey-button {
        min-height: 52px;

        padding: 0 18px;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .footer-main {
        grid-template-columns: 1fr;
    }


    .footer-brand {
        grid-column: auto;
    }

}



/* ============================================================
   6. SMALL MOBILE
   480px AND BELOW
============================================================ */

@media (max-width: 480px) {

    /* --------------------------------------------------------
       GLOBAL
    -------------------------------------------------------- */

    :root {
        --ag-header-height: 70px;
    }


    .container {
        width:
            calc(100% - 24px);
    }


    .section-padding {
        padding: 60px 0;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .brand {
        gap: 9px;
    }


    .brand-logo {
        width: 40px;
        height: 40px;
    }


    .brand-copy strong {
        font-size: 15px;
    }


    .brand-copy span {
        font-size: 8px;
    }


    .mobile-menu-button {
        width: 41px;
        height: 41px;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section {
        padding:
            calc(var(--ag-header-height) + 38px)
            0
            55px;
    }


    .hero-kicker {
        max-width: 100%;

        margin-bottom: 20px;

        font-size: 10px;
    }


    .hero-title {
        font-size:
            clamp(
                40px,
                13.5vw,
                54px
            );
    }


    .hero-title span {
        margin-top: 6px;
    }


    .hero-description {
        font-size: 14px;

        line-height: 1.7;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .primary-button {
        width: 100%;
    }


    .text-action-button {
        justify-content: center;
    }


    /* --------------------------------------------------------
       MICRO INFO
    -------------------------------------------------------- */

    .hero-micro-info {
        width: 100%;

        justify-content: space-between;

        gap: 10px;
    }


    .micro-divider {
        height: 30px;
    }


    .hero-micro-info strong {
        font-size: 17px;
    }


    .hero-micro-info span:not(.micro-divider) {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       MANDALA
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 420px;
    }


    .gita-mandala {
        width: min(400px, 95vw);
        height: min(400px, 95vw);
    }


    .mandala-decoration-ring-middle {
        width: 81%;
        height: 81%;
    }


    .mandala-shloka-ring-outer {
        width: 92%;
        height: 92%;
    }


    .mandala-shloka-ring-inner {
        width: 72%;
        height: 72%;
    }


    .mandala-inner-halo {
        width: 58%;
        height: 58%;
    }


    .mandala-center {
        width: 52%;
        height: 52%;
    }


    .mandala-image-border {
        padding: 5px;
    }


    .mandala-marker {
        font-size: 16px;
    }


    .marker-top {
        top: 8px;
    }


    .marker-bottom {
        bottom: 8px;
    }


    .marker-left {
        left: 8px;
    }


    .marker-right {
        right: 8px;
    }


    .mandala-caption {
        margin-top: 0;
    }


    /* --------------------------------------------------------
       JOURNEY
    -------------------------------------------------------- */

    .journey-heading {
        margin-bottom: 45px;
    }


    .journey-symbol {
        font-size: 18px;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-number-column {
        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 15px;
    }


    .chapters-big-number {
        font-size: 86px;
    }


    .chapters-content > p {
        font-size: 14px;
    }


    .chapter-preview-item strong {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       EXPERIENCE
    -------------------------------------------------------- */

    .visual-experience-panel {
        border-radius: 23px;
    }


    .visual-experience-preview {
        min-height: 315px;
    }


    .visual-preview-scene {
        width: 88%;

        min-height: 225px;
    }


    .visual-scene-symbol {
        font-size: 54px;
    }


    .visual-play-button {
        width: 50px;
        height: 50px;

        bottom: 25px;
    }


    .visual-experience-content {
        padding:
            35px
            20px
            40px;
    }


    .visual-experience-content > p {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container {
        gap: 35px;
    }


    .wisdom-sanskrit {
        font-size: 20px;

        line-height: 1.65;
    }


    .wisdom-content blockquote {
        font-size: 28px;
    }


    .wisdom-reference {
        flex-direction: column;

        align-items: center;
    }


    .wisdom-reference
    span + span::before {
        display: none;
    }


    /* --------------------------------------------------------
       FINAL JOURNEY
    -------------------------------------------------------- */

    .final-journey-card {
        min-height: 410px;

        padding:
            48px
            20px;

        border-radius: 23px;
    }


    .final-journey-content h2 {
        font-size:
            clamp(
                36px,
                11vw,
                48px
            );
    }


    .final-journey-symbol {
        right: 8px;
        bottom: 5px;

        font-size: 90px;
    }


    .final-journey-rings
    span:nth-child(3) {
        display: none;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .site-footer {
        padding-top: 52px;
    }


    .footer-main {
        gap: 30px;
    }


    .footer-bottom {
        padding-top: 18px;
    }

}



/* ============================================================
   7. EXTRA SMALL MOBILE
   380px AND BELOW
============================================================ */

@media (max-width: 380px) {

    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .brand-copy span {
        display: none;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-title {
        font-size: 39px;
    }


    .hero-micro-info {
        gap: 7px;
    }


    .hero-micro-info strong {
        font-size: 16px;
    }


    /* --------------------------------------------------------
       MANDALA
    -------------------------------------------------------- */

    .hero-mandala-column {
        min-height: 365px;
    }


    .gita-mandala {
        width: min(350px, 94vw);
        height: min(350px, 94vw);
    }


    .mandala-caption {
        margin-top: -2px;
    }


    .mandala-caption p {
        max-width: 230px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       CHAPTERS
    -------------------------------------------------------- */

    .chapters-number-column {
        grid-template-columns:
            76px
            minmax(0, 1fr);
    }


    .chapters-big-number {
        font-size: 74px;
    }


    /* --------------------------------------------------------
       WISDOM SYMBOL
    -------------------------------------------------------- */

    .wisdom-symbol-orbit {
        width: 205px;
        height: 205px;
    }


    .wisdom-symbol-orbit::before {
        width: 165px;
        height: 165px;
    }


    .wisdom-symbol-inner {
        width: 125px;
        height: 125px;

        font-size: 48px;
    }

}



/* ============================================================
   8. LANDSCAPE MOBILE
============================================================ */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 560px
) {

    .hero-section {
        padding-top:
            calc(var(--ag-header-height) + 30px);
    }


    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        align-items: center;

        gap: 20px;
    }


    .hero-content {
        text-align: left;
    }


    .hero-kicker,
    .hero-description {
        margin-left: 0;
        margin-right: 0;
    }


    .hero-title {
        font-size: 45px;
    }


    .hero-actions,
    .hero-micro-info {
        justify-content: flex-start;
    }


    .hero-mandala-column {
        min-height: 390px;
    }


    .gita-mandala {
        width: 380px;
        height: 380px;
    }


    .mandala-decoration-ring-outer {
        width: 370px;
        height: 370px;
    }


    .mandala-decoration-ring-middle {
        width: 305px;
        height: 305px;
    }


    .mandala-shloka-ring-outer {
        width: 345px;
        height: 345px;
    }


    .mandala-shloka-ring-inner {
        width: 270px;
        height: 270px;
    }


    .mandala-inner-halo {
        width: 220px;
        height: 220px;
    }


    .mandala-center {
        width: 200px;
        height: 200px;
    }


    .mandala-ambient-glow {
        width: 350px;
        height: 350px;
    }


    .mandala-caption {
        display: none;
    }

}



/* ============================================================
   9. HOVER SAFETY
   Touch devices should not depend on hover
============================================================ */

@media (
    hover: none
)
and (
    pointer: coarse
) {

    .nav-primary-button:hover,
    .primary-button:hover,
    .outline-action-button:hover,
    .final-journey-button:hover,
    .journey-step:hover .journey-number,
    .mandala-center:hover .mandala-center-image {
        transform: none;
    }

}



/* ============================================================
   10. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mandala-shloka-ring-outer,
    .mandala-shloka-ring-inner,
    .mandala-ambient-glow,
    .wisdom-symbol-orbit,
    .wisdom-symbol-inner,
    .final-journey-rings span,
    .loader-mandala::before {
        animation: none !important;
    }

}


/* ============================================================
   END OF RESPONSIVE.CSS
============================================================ */


/* ============================================================
   11. CINEMATIC EXPERIENCE RESPONSIVE OVERRIDES
   ------------------------------------------------------------
   These rules support the new Experience section in home.html.
   They are intentionally placed at the END of responsive.css
   so they override the previous Visual Experience layout rules
   without disturbing Hero, Journey, Chapters, Wisdom, Footer,
   the rotating Krishna-Arjuna mandala, or Guidance widget.
============================================================ */


/* ============================================================
   11.1 LARGE LAPTOPS
   1200px AND BELOW
============================================================ */

@media (max-width: 1200px) {

    .visual-experience-panel.experience-cinematic-panel {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(360px, 0.96fr);

        min-height: 560px;

        border-radius: 34px;
    }


    .experience-battlefield-scene {
        min-height: 560px;
    }


    .experience-character-stage {
        width:
            min(
                98%,
                680px
            );
    }


    .visual-experience-content.experience-content-panel {
        padding:
            58px
            46px;
    }


    .visual-experience-content.experience-content-panel h2 {
        font-size:
            clamp(
                36px,
                4vw,
                52px
            );
    }


    .experience-scene-caption {
        left: 24px;
        bottom: 22px;
    }

}


/* ============================================================
   11.2 TABLET / SMALL LAPTOP
   1024px AND BELOW
============================================================ */

@media (max-width: 1024px) {

    .visual-experience-panel.experience-cinematic-panel {
        grid-template-columns: 1fr;

        min-height: 0;

        border-radius: 32px;
    }


    .experience-battlefield-scene {
        min-height: 525px;
    }


    .experience-character-stage {
        width:
            min(
                80%,
                690px
            );

        bottom: -10px;
    }


    .experience-character-glow {
        width: 430px;
        height: 430px;

        bottom: 7%;
    }


    .experience-sun-glow {
        right: 8%;
        top: 2%;

        width: 360px;
        height: 360px;
    }


    .experience-distant-mountains {
        bottom: 27%;

        height: 165px;
    }


    .experience-army {
        bottom: 25%;

        width: 44%;

        height: 130px;

        gap:
            clamp(
                18px,
                5vw,
                38px
            );
    }


    .visual-experience-content.experience-content-panel {
        min-height: 0;

        padding:
            52px
            48px
            56px;
    }


    .visual-experience-content.experience-content-panel::before {
        left: 9%;
        right: 9%;
        top: 0;
        bottom: auto;

        width: auto;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(229, 176, 96, 0.38),
                transparent
            );
    }


    .visual-experience-content.experience-content-panel h2 {
        max-width: 620px;
    }


    .visual-experience-content.experience-content-panel > p {
        max-width: 650px;
    }


    .visual-feature-list {
        max-width: 620px;
    }


    .visual-play-button.experience-story-button {
        width: fit-content;
        height: 48px;

        bottom: auto;

        transform: none;
    }

}


/* ============================================================
   11.3 LARGE TABLETS
   900px AND BELOW
============================================================ */

@media (max-width: 900px) {

    .visual-experience-panel.experience-cinematic-panel {
        border-radius: 30px;
    }


    .experience-battlefield-scene {
        min-height: 500px;
    }


    .experience-character-stage {
        width:
            min(
                86%,
                650px
            );

        bottom: -8px;
    }


    .experience-character-glow {
        width: 405px;
        height: 405px;
    }


    .experience-sun-glow {
        right: 5%;

        width: 330px;
        height: 330px;
    }


    .experience-distant-mountains {
        height: 150px;
    }


    .experience-army {
        opacity: 0.56;

        transform:
            scale(0.82);
    }


    .experience-army-right {
        transform:
            scale(0.77);
    }


    .visual-experience-content.experience-content-panel {
        padding:
            48px
            42px
            52px;
    }


    .visual-experience-content.experience-content-panel h2 {
        font-size:
            clamp(
                35px,
                6vw,
                50px
            );
    }

}


/* ============================================================
   11.4 TABLET / LARGE MOBILE
   768px AND BELOW
============================================================ */

@media (max-width: 768px) {

    .visual-experience-section {
        overflow: hidden;
    }


    .visual-experience-panel.experience-cinematic-panel {
        border-radius: 28px;

        box-shadow:
            0 26px 64px
            rgba(59, 35, 16, 0.16);
    }


    .experience-battlefield-scene {
        min-height: 455px;
    }


    .experience-sky {
        background:
            radial-gradient(
                circle at 72% 20%,
                rgba(255, 233, 174, 0.72) 0%,
                rgba(246, 185, 101, 0.25) 21%,
                transparent 43%
            ),
            linear-gradient(
                180deg,
                #d7a572 0%,
                #e4ae71 30%,
                #bd6e3f 62%,
                #81452d 100%
            );
    }


    .experience-sun-glow {
        right: -2%;
        top: 1%;

        width: 300px;
        height: 300px;
    }


    .experience-distant-mountains {
        bottom: 28%;

        height: 135px;
    }


    .experience-battlefield-ground {
        bottom: -18%;

        height: 57%;
    }


    .experience-army {
        bottom: 25%;

        width: 47%;
        height: 115px;

        gap: 24px;

        opacity: 0.48;
    }


    .experience-army-left {
        left: -8%;

        transform:
            scale(0.72);
    }


    .experience-army-right {
        right: -8%;

        transform:
            scale(0.68);
    }


    .experience-character-stage {
        width:
            min(
                94%,
                610px
            );

        bottom: -6px;
    }


    .experience-character-glow {
        width: 365px;
        height: 365px;

        bottom: 5%;
    }


    .experience-dust-one {
        width: 390px;
        height: 155px;
    }


    .experience-dust-two {
        width: 360px;
        height: 145px;
    }


    .experience-scene-caption {
        left: 20px;
        right: 20px;
        bottom: 18px;

        width: fit-content;
        max-width:
            calc(100% - 40px);
    }


    .experience-scene-caption p {
        overflow: hidden;

        text-overflow: ellipsis;
    }


    .visual-experience-content.experience-content-panel {
        padding:
            44px
            34px
            48px;
    }


    .visual-experience-content.experience-content-panel h2 {
        margin-bottom: 18px;

        font-size:
            clamp(
                34px,
                7.2vw,
                46px
            );
    }


    .visual-experience-content.experience-content-panel > p {
        font-size: 14px;

        line-height: 1.78;
    }


    .visual-feature-list {
        gap: 13px;

        margin-top: 26px;
    }


    .visual-play-button.experience-story-button {
        width: fit-content;
        height: 47px;

        margin-top: 30px;

        padding:
            0
            18px;
    }

}


/* ============================================================
   11.5 MOBILE
   640px AND BELOW
============================================================ */

@media (max-width: 640px) {

    .visual-experience-panel.experience-cinematic-panel {
        border-radius: 25px;
    }


    .experience-battlefield-scene {
        min-height: 410px;
    }


    .experience-sun-glow {
        right: -14%;
        top: -4%;

        width: 280px;
        height: 280px;
    }


    .experience-distant-mountains {
        left: -10%;
        right: -10%;
        bottom: 29%;

        height: 120px;
    }


    .experience-army {
        bottom: 24%;

        width: 49%;

        gap: 20px;

        opacity: 0.40;
    }


    .experience-army-left {
        left: -13%;

        transform:
            scale(0.62);
    }


    .experience-army-right {
        right: -13%;

        transform:
            scale(0.60);
    }


    .experience-character-stage {
        width:
            min(
                103%,
                570px
            );

        bottom: -3px;
    }


    .experience-character-glow {
        width: 330px;
        height: 330px;

        bottom: 5%;
    }


    .experience-dust-one {
        left: -28%;

        width: 350px;
        height: 140px;
    }


    .experience-dust-two {
        right: -31%;

        width: 330px;
        height: 135px;
    }


    .experience-scene-caption {
        left: 16px;
        right: 16px;
        bottom: 15px;

        max-width:
            calc(100% - 32px);

        padding:
            8px
            11px;
    }


    .experience-scene-caption p {
        font-size: 9px;

        white-space: normal;

        line-height: 1.4;

        text-overflow: clip;
    }


    .visual-experience-content.experience-content-panel {
        padding:
            38px
            24px
            42px;
    }


    .visual-experience-content.experience-content-panel h2 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );

        line-height: 1.07;
    }


    .visual-experience-content.experience-content-panel > p {
        font-size: 13px;

        line-height: 1.72;
    }


    .visual-feature-list {
        gap: 12px;

        margin-top: 24px;
    }


    .visual-feature-list li {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 11px;

        font-size: 12px;

        line-height: 1.55;
    }


    .visual-feature-list span {
        width: 31px;
        height: 31px;

        font-size: 9px;
    }


    .visual-play-button.experience-story-button {
        width: 100%;
        height: 48px;

        justify-content: center;

        margin-top: 28px;

        padding:
            0
            16px;

        transform: none;
    }


    .visual-play-button.experience-story-button:hover,
    .visual-play-button.experience-story-button:active {
        transform: none;
    }

}


/* ============================================================
   11.6 SMALL MOBILE
   480px AND BELOW
============================================================ */

@media (max-width: 480px) {

    .visual-experience-panel.experience-cinematic-panel {
        border-radius: 22px;
    }


    .experience-battlefield-scene {
        min-height: 365px;
    }


    .experience-sun-glow {
        right: -24%;
        top: -7%;

        width: 255px;
        height: 255px;
    }


    .experience-distant-mountains {
        bottom: 30%;

        height: 105px;
    }


    .experience-battlefield-ground {
        bottom: -20%;

        height: 60%;
    }


    .experience-army {
        bottom: 24%;

        gap: 16px;

        opacity: 0.31;
    }


    .experience-army span:nth-child(5) {
        display: none;
    }


    .experience-character-stage {
        width: 111%;

        max-width: 520px;

        bottom: 0;
    }


    .experience-character-glow {
        width: 285px;
        height: 285px;

        bottom: 6%;
    }


    .experience-dust-one {
        left: -40%;

        bottom: 13%;

        width: 320px;
        height: 125px;
    }


    .experience-dust-two {
        right: -43%;

        bottom: 18%;

        width: 310px;
        height: 120px;
    }


    .experience-scene-caption {
        left: 13px;
        right: 13px;
        bottom: 12px;

        max-width:
            calc(100% - 26px);

        border-radius: 16px;
    }


    .experience-scene-caption p {
        font-size: 8.5px;
    }


    .visual-experience-content.experience-content-panel {
        padding:
            34px
            19px
            37px;
    }


    .visual-experience-content.experience-content-panel h2 {
        margin-bottom: 16px;

        font-size:
            clamp(
                30px,
                10.5vw,
                39px
            );
    }


    .visual-experience-content.experience-content-panel > p {
        font-size: 12.5px;
    }


    .visual-feature-list {
        margin-top: 22px;
    }


    .visual-feature-list li {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        gap: 10px;

        font-size: 11.5px;
    }


    .visual-feature-list span {
        width: 29px;
        height: 29px;
    }


    .visual-play-button.experience-story-button {
        height: 46px;

        margin-top: 25px;

        font-size: 11px;
    }


    .visual-play-button.experience-story-button strong {
        font-size: 11px;
    }

}


/* ============================================================
   11.7 VERY SMALL MOBILE
   380px AND BELOW
============================================================ */

@media (max-width: 380px) {

    .visual-experience-panel.experience-cinematic-panel {
        border-radius: 20px;
    }


    .experience-battlefield-scene {
        min-height: 335px;
    }


    .experience-sun-glow {
        width: 225px;
        height: 225px;
    }


    .experience-distant-mountains {
        height: 94px;
    }


    .experience-army {
        opacity: 0.26;
    }


    .experience-army span:nth-child(4) {
        display: none;
    }


    .experience-character-stage {
        width: 116%;

        bottom: 2px;
    }


    .experience-character-glow {
        width: 255px;
        height: 255px;
    }


    .experience-scene-caption {
        left: 11px;
        right: 11px;
        bottom: 10px;

        padding:
            7px
            9px;
    }


    .experience-scene-caption p {
        font-size: 8px;
    }


    .visual-experience-content.experience-content-panel {
        padding:
            30px
            16px
            33px;
    }


    .visual-experience-content.experience-content-panel h2 {
        font-size:
            clamp(
                28px,
                10.8vw,
                36px
            );
    }


    .visual-feature-list li {
        font-size: 11px;
    }

}


/* ============================================================
   11.8 SHORT LANDSCAPE DEVICES
============================================================ */

@media
(max-width: 900px)
and
(max-height: 560px)
and
(orientation: landscape) {

    .visual-experience-panel.experience-cinematic-panel {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(320px, 0.95fr);

        border-radius: 24px;
    }


    .experience-battlefield-scene {
        min-height: 410px;
    }


    .experience-character-stage {
        width:
            min(
                92%,
                560px
            );
    }


    .visual-experience-content.experience-content-panel {
        padding:
            34px
            28px;
    }


    .visual-experience-content.experience-content-panel h2 {
        font-size:
            clamp(
                30px,
                4.5vw,
                40px
            );
    }


    .visual-feature-list {
        margin-top: 18px;

        gap: 9px;
    }


    .visual-play-button.experience-story-button {
        height: 44px;

        margin-top: 20px;
    }

}


/* ============================================================
   11.9 TOUCH DEVICES
   Keep buttons visually stable.
============================================================ */

@media
(hover: none)
and
(pointer: coarse) {

    .visual-play-button.experience-story-button:hover,
    .visual-play-button.experience-story-button:active {
        transform: none;
    }

}


/* ============================================================
   END CINEMATIC EXPERIENCE RESPONSIVE OVERRIDES
============================================================ */


/* ============================================================
   12. PREMIUM HERO + COSMIC WISDOM RESPONSIVE OVERRIDES
   ------------------------------------------------------------
   These rules are intentionally placed at the END of the file
   so they safely override the older Home responsive rules.
   Existing Experience battlefield responsive rules above stay
   intact.
============================================================ */


/* ============================================================
   12.1 LARGE LAPTOPS
   1280px AND BELOW
============================================================ */

@media (max-width: 1280px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-container-reversed {
        grid-template-columns:
            minmax(470px, 0.98fr)
            minmax(0, 1.02fr);

        gap:
            clamp(
                38px,
                4.5vw,
                68px
            );
    }


    .hero-mandala-column-left {
        min-height: 560px;
    }


    .hero-mandala-stage {
        width: 550px;
        height: 550px;

        margin-left: -18px;
    }


    .hero-mandala-backplate {
        width: 520px;
        height: 520px;
    }


    .hero-mandala-rim-glow {
        width: 544px;
        height: 544px;
    }


    .hero-section-premium
    .gita-mandala {
        width: 500px;
        height: 500px;
    }


    .hero-title-sequenced {
        font-size:
            clamp(
                54px,
                5vw,
                74px
            );
    }


    .hero-content-right {
        max-width: 620px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container {
        grid-template-columns:
            minmax(0, 1.03fr)
            minmax(360px, 0.97fr);

        gap: 56px;
    }


    .wisdom-cinematic-container {
        min-height: 640px;
    }


    .wisdom-cosmic-stage {
        min-height: 580px;

        border-radius: 36px;
    }


    .wisdom-vishwaroop-frame {
        width:
            min(
                112%,
                760px
            );
    }


    .wisdom-cosmic-halo {
        width: 285px;
        height: 285px;
    }


    .wisdom-cosmic-rays {
        width: 400px;
        height: 400px;
    }


    .wisdom-cosmic-orbit-one {
        width: 345px;
        height: 345px;
    }


    .wisdom-cosmic-orbit-two {
        width: 410px;
        height: 410px;
    }

}


/* ============================================================
   12.2 LAPTOPS
   1100px AND BELOW
============================================================ */

@media (max-width: 1100px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-container-reversed {
        grid-template-columns:
            minmax(430px, 0.95fr)
            minmax(0, 1.05fr);

        gap: 38px;
    }


    .hero-mandala-stage {
        width: 510px;
        height: 510px;

        margin-left: -18px;
    }


    .hero-mandala-backplate {
        width: 482px;
        height: 482px;
    }


    .hero-mandala-rim-glow {
        width: 504px;
        height: 504px;
    }


    .hero-section-premium
    .gita-mandala {
        width: 465px;
        height: 465px;
    }


    .hero-mandala-floor-shadow {
        width: 375px;
    }


    .hero-title-sequenced {
        font-size:
            clamp(
                48px,
                5vw,
                66px
            );
    }


    .hero-section-premium
    .hero-description {
        font-size: 14px;
    }


    .hero-section-premium
    .hero-stat {
        min-width: 88px;

        padding:
            0
            13px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container {
        gap: 44px;
    }


    .wisdom-cosmic-stage {
        min-height: 545px;
    }


    .wisdom-vishwaroop-frame {
        width:
            min(
                116%,
                720px
            );
    }


    .wisdom-sanskrit {
        font-size:
            clamp(
                23px,
                2.5vw,
                32px
            );
    }


    .wisdom-content blockquote {
        font-size:
            clamp(
                27px,
                3vw,
                39px
            );
    }

}


/* ============================================================
   12.3 TABLET / SMALL LAPTOP
   1024px AND BELOW
============================================================ */

@media (max-width: 1024px) {

    /* --------------------------------------------------------
       HERO
       Keep mandala first, then content.
    -------------------------------------------------------- */

    .hero-section-premium {
        min-height: auto;

        padding-top:
            calc(
                var(--ag-header-height) +
                34px
            );

        padding-bottom: 90px;
    }


    .hero-container-reversed {
        grid-template-columns: 1fr;

        min-height: 0;

        gap: 26px;
    }


    .hero-mandala-column-left {
        order: 1;

        min-height: 0;

        align-items: center;

        transform: none;
    }


    .hero-content-right {
        order: 2;

        width: min(
            100%,
            760px
        );

        max-width: 760px;

        margin:
            0
            auto;

        text-align: center;

        transform: none;
    }


    .hero-mandala-stage {
        width: 540px;
        height: 540px;

        margin:
            0
            auto;
    }


    .hero-mandala-backplate {
        width: 510px;
        height: 510px;
    }


    .hero-mandala-rim-glow {
        width: 532px;
        height: 532px;
    }


    .hero-section-premium
    .gita-mandala {
        width: 490px;
        height: 490px;
    }


    .hero-mandala-caption {
        margin:
            -8px
            auto
            0;

        justify-content: center;
    }


    .hero-title-sequenced {
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(
                52px,
                7vw,
                72px
            );
    }


    .hero-section-premium
    .hero-description {
        max-width: 690px;

        margin-left: auto;
        margin-right: auto;
    }


    .hero-section-premium
    .hero-kicker {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-section-premium
    .hero-actions {
        justify-content: center;
    }


    .hero-section-premium
    .hero-micro-info {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-depth-orb-one {
        left: -4%;
        top: 12%;
    }


    .hero-depth-orb-two {
        right: -3%;
        top: 45%;
    }


    .hero-scroll-cue {
        bottom: 22px;
    }


    /* --------------------------------------------------------
       WISDOM
       Stack visual over verse content.
    -------------------------------------------------------- */

    .wisdom-container,
    .wisdom-cinematic-container {
        grid-template-columns: 1fr;

        gap: 42px;

        min-height: 0;
    }


    .wisdom-visual-column {
        width:
            min(
                100%,
                760px
            );

        margin:
            0
            auto;
    }


    .wisdom-cosmic-stage {
        min-height: 590px;

        border-radius: 34px;
    }


    .wisdom-vishwaroop-frame {
        width:
            min(
                94%,
                720px
            );
    }


    .wisdom-cinematic-content {
        width:
            min(
                100%,
                760px
            );

        margin:
            0
            auto;

        padding:
            8px
            0
            0;

        text-align: center;
    }


    .wisdom-sanskrit,
    .wisdom-content blockquote {
        margin-left: auto;
        margin-right: auto;
    }


    .wisdom-divider {
        margin-left: auto;
        margin-right: auto;
    }


    .wisdom-reference {
        justify-content: center;
    }

}


/* ============================================================
   12.4 LARGE TABLETS
   900px AND BELOW
============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section-premium {
        padding-bottom: 82px;
    }


    .hero-mandala-stage {
        width: 500px;
        height: 500px;
    }


    .hero-mandala-backplate {
        width: 472px;
        height: 472px;
    }


    .hero-mandala-rim-glow {
        width: 494px;
        height: 494px;
    }


    .hero-section-premium
    .gita-mandala {
        width: 452px;
        height: 452px;
    }


    .hero-mandala-floor-shadow {
        width: 350px;
        height: 64px;
    }


    .hero-title-sequenced {
        font-size:
            clamp(
                48px,
                7.5vw,
                66px
            );
    }


    .hero-depth-orb-one {
        width: 210px;
        height: 210px;
    }


    .hero-depth-orb-two {
        width: 135px;
        height: 135px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-cosmic-stage {
        min-height: 545px;
    }


    .wisdom-vishwaroop-frame {
        width:
            min(
                100%,
                680px
            );
    }


    .wisdom-cosmic-halo {
        width: 270px;
        height: 270px;
    }


    .wisdom-cosmic-rays {
        width: 380px;
        height: 380px;
    }


    .wisdom-cosmic-orbit-one {
        width: 330px;
        height: 330px;
    }


    .wisdom-cosmic-orbit-two {
        width: 390px;
        height: 390px;
    }


    .wisdom-content blockquote {
        max-width: 650px;
    }

}


/* ============================================================
   12.5 TABLET / LARGE MOBILE
   768px AND BELOW
============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section-premium {
        padding-top:
            calc(
                var(--ag-header-height) +
                26px
            );

        padding-bottom: 78px;
    }


    .hero-container-reversed {
        gap: 20px;
    }


    .hero-mandala-stage {
        width:
            min(
                100%,
                455px
            );

        height: auto;

        aspect-ratio: 1 / 1;
    }


    .hero-mandala-backplate {
        width: 94%;
        height: 94%;
    }


    .hero-mandala-rim-glow {
        width: 98%;
        height: 98%;
    }


    .hero-section-premium
    .gita-mandala {
        width: 90%;
        height: 90%;
    }


    .hero-mandala-floor-shadow {
        bottom: -4px;

        width: 68%;
        height: 54px;
    }


    .hero-mandala-caption {
        max-width: 360px;

        margin-top: -2px;
    }


    .hero-title-sequenced {
        max-width: 620px;

        margin-bottom: 19px;

        font-size:
            clamp(
                43px,
                9vw,
                59px
            );

        line-height: 0.99;
    }


    .hero-title-line-accent {
        margin-top: 7px;
    }


    .hero-section-premium
    .hero-description {
        max-width: 590px;

        font-size: 14px;

        line-height: 1.72;
    }


    .hero-section-premium
    .hero-actions {
        flex-wrap: wrap;

        gap: 14px;
    }


    .hero-section-premium
    .primary-button {
        min-height: 54px;
    }


    .hero-section-premium
    .hero-micro-info {
        max-width: 100%;

        justify-content: center;
    }


    .hero-section-premium
    .hero-stat {
        min-width: 84px;

        padding:
            0
            12px;
    }


    .hero-depth-line {
        opacity: 0.55;
    }


    .hero-depth-orb-three {
        display: none;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-cosmic-stage {
        min-height: 500px;

        border-radius: 30px;
    }


    .wisdom-vishwaroop-frame {
        width:
            min(
                108%,
                630px
            );
    }


    .wisdom-cosmic-halo {
        width: 250px;
        height: 250px;
    }


    .wisdom-cosmic-rays {
        width: 350px;
        height: 350px;
    }


    .wisdom-cosmic-orbit-one {
        width: 305px;
        height: 305px;
    }


    .wisdom-cosmic-orbit-two {
        width: 365px;
        height: 365px;
    }


    .wisdom-visual-caption {
        left: 20px;
        bottom: 18px;

        max-width:
            calc(100% - 40px);
    }


    .wisdom-cinematic-content {
        padding-top: 4px;
    }


    .wisdom-sanskrit {
        margin-bottom: 22px;

        font-size:
            clamp(
                22px,
                4.4vw,
                30px
            );

        line-height: 1.62;
    }


    .wisdom-content blockquote {
        margin-bottom: 26px;

        font-size:
            clamp(
                27px,
                5vw,
                38px
            );

        line-height: 1.38;
    }

}


/* ============================================================
   12.6 MOBILE
   640px AND BELOW
============================================================ */

@media (max-width: 640px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section-premium {
        padding-top:
            calc(
                var(--ag-header-height) +
                18px
            );

        padding-bottom: 72px;
    }


    .hero-container-reversed {
        gap: 17px;
    }


    .hero-mandala-stage {
        width:
            min(
                105%,
                410px
            );
    }


    .hero-section-premium
    .gita-mandala {
        width: 91%;
        height: 91%;
    }


    .hero-mandala-caption {
        max-width: 320px;

        padding:
            0
            12px;
    }


    .hero-mandala-caption p {
        font-size: 10px;
    }


    .hero-content-right {
        align-items: flex-start;

        text-align: left;
    }


    .hero-section-premium
    .hero-kicker {
        margin-left: 0;
        margin-right: 0;

        padding:
            9px
            13px;

        font-size: 10px;
    }


    .hero-title-sequenced {
        margin-left: 0;
        margin-right: 0;

        font-size:
            clamp(
                40px,
                11.2vw,
                53px
            );
    }


    .hero-section-premium
    .hero-description {
        margin-left: 0;
        margin-right: 0;

        font-size: 13.5px;
    }


    .hero-section-premium
    .hero-actions {
        width: 100%;

        justify-content: flex-start;
    }


    .hero-section-premium
    .primary-button {
        min-height: 52px;

        padding:
            0
            20px;

        border-radius: 14px;
    }


    .hero-section-premium
    .hero-micro-info {
        width: 100%;

        margin-left: 0;
        margin-right: 0;

        padding:
            11px
            8px;

        justify-content: space-between;
    }


    .hero-section-premium
    .hero-stat {
        min-width: 0;

        flex: 1;

        padding:
            0
            9px;
    }


    .hero-section-premium
    .hero-stat:first-child {
        padding-left: 5px;
    }


    .hero-section-premium
    .hero-stat:last-child {
        padding-right: 5px;
    }


    .hero-section-premium
    .hero-micro-info strong {
        font-size: 19px;
    }


    .hero-section-premium
    .hero-micro-info
    span:not(.micro-divider) {
        font-size: 9px;
    }


    .hero-section-premium
    .micro-divider {
        height: 30px;
    }


    .hero-depth-orb-one {
        left: -18%;
        top: 17%;

        width: 180px;
        height: 180px;
    }


    .hero-depth-orb-two {
        right: -14%;
        top: 49%;

        width: 110px;
        height: 110px;
    }


    .hero-depth-line,
    .hero-depth-particle-four {
        display: none;
    }


    .hero-scroll-cue {
        display: none;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-section,
    .wisdom-cinematic-section {
        overflow: hidden;
    }


    .wisdom-container,
    .wisdom-cinematic-container {
        gap: 32px;
    }


    .wisdom-cosmic-stage {
        min-height: 445px;

        border-radius: 26px;
    }


    .wisdom-vishwaroop-frame {
        width: 116%;

        max-width: 580px;

        bottom: 0;
    }


    .wisdom-cosmic-halo {
        left: 54%;
        top: 44%;

        width: 225px;
        height: 225px;
    }


    .wisdom-cosmic-rays {
        left: 54%;
        top: 44%;

        width: 315px;
        height: 315px;
    }


    .wisdom-cosmic-orbit {
        left: 54%;
        top: 45%;
    }


    .wisdom-cosmic-orbit-one {
        width: 275px;
        height: 275px;
    }


    .wisdom-cosmic-orbit-two {
        width: 325px;
        height: 325px;
    }


    .wisdom-visual-caption {
        left: 15px;
        right: 15px;
        bottom: 14px;

        width: fit-content;

        max-width:
            calc(100% - 30px);

        padding:
            8px
            11px;
    }


    .wisdom-visual-caption p {
        white-space: normal;

        font-size: 9px;

        line-height: 1.4;
    }


    .wisdom-cinematic-content {
        text-align: left;
    }


    .wisdom-cinematic-content
    .section-eyebrow {
        text-align: left;
    }


    .wisdom-sanskrit,
    .wisdom-content blockquote {
        margin-left: 0;
        margin-right: 0;
    }


    .wisdom-divider {
        margin-left: 0;
        margin-right: 0;
    }


    .wisdom-reference {
        justify-content: flex-start;
    }


    .wisdom-sanskrit {
        font-size:
            clamp(
                21px,
                6vw,
                28px
            );
    }


    .wisdom-content blockquote {
        font-size:
            clamp(
                26px,
                7.3vw,
                35px
            );
    }

}


/* ============================================================
   12.7 SMALL MOBILE
   480px AND BELOW
============================================================ */

@media (max-width: 480px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-section-premium {
        padding-top:
            calc(
                var(--ag-header-height) +
                12px
            );

        padding-bottom: 58px;
    }


    .hero-mandala-stage {
        width:
            min(
                109%,
                365px
            );
    }


    .hero-mandala-backplate {
        width: 93%;
        height: 93%;
    }


    .hero-mandala-rim-glow {
        width: 98%;
        height: 98%;
    }


    .hero-section-premium
    .gita-mandala {
        width: 91%;
        height: 91%;
    }


    .hero-mandala-floor-shadow {
        width: 65%;
        height: 45px;
    }


    .hero-mandala-spark-field span:nth-child(5),
    .hero-mandala-spark-field span:nth-child(6) {
        display: none;
    }


    .hero-mandala-caption {
        max-width: 285px;
    }


    .hero-title-sequenced {
        margin-bottom: 17px;

        font-size:
            clamp(
                37px,
                11.5vw,
                47px
            );

        line-height: 1;
    }


    .hero-title-line-accent {
        margin-top: 6px;
    }


    .hero-section-premium
    .hero-description {
        margin-bottom: 22px;

        font-size: 13px;

        line-height: 1.68;
    }


    .hero-section-premium
    .hero-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .hero-section-premium
    .primary-button {
        width: 100%;

        justify-content: center;
    }


    .hero-section-premium
    .text-action-button {
        width: 100%;

        justify-content: center;

        min-height: 44px;
    }


    .hero-section-premium
    .hero-micro-info {
        border-radius: 15px;
    }


    .hero-section-premium
    .hero-stat {
        padding:
            0
            6px;
    }


    .hero-section-premium
    .hero-micro-info strong {
        font-size: 18px;
    }


    .hero-section-premium
    .hero-micro-info
    span:not(.micro-divider) {
        font-size: 8px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-cosmic-stage {
        min-height: 390px;

        border-radius: 22px;
    }


    .wisdom-vishwaroop-frame {
        width: 124%;

        max-width: 530px;
    }


    .wisdom-cosmic-halo {
        width: 200px;
        height: 200px;
    }


    .wisdom-cosmic-rays {
        width: 280px;
        height: 280px;
    }


    .wisdom-cosmic-orbit-one {
        width: 245px;
        height: 245px;
    }


    .wisdom-cosmic-orbit-two {
        width: 290px;
        height: 290px;
    }


    .wisdom-cosmic-glow-one {
        left: -260px;

        width: 500px;
        height: 500px;
    }


    .wisdom-cosmic-glow-two {
        right: -250px;

        width: 480px;
        height: 480px;
    }


    .wisdom-visual-caption {
        left: 12px;
        right: 12px;
        bottom: 11px;

        max-width:
            calc(100% - 24px);
    }


    .wisdom-visual-caption p {
        font-size: 8.5px;
    }


    .wisdom-sanskrit {
        margin-bottom: 20px;

        font-size:
            clamp(
                20px,
                6.5vw,
                26px
            );

        line-height: 1.58;
    }


    .wisdom-divider {
        margin-bottom: 22px;
    }


    .wisdom-content blockquote {
        margin-bottom: 23px;

        font-size:
            clamp(
                24px,
                7.6vw,
                32px
            );

        line-height: 1.34;
    }


    .wisdom-reference {
        gap: 8px;

        font-size: 9px;
    }


    .wisdom-reference
    span + span::before {
        margin-right: 8px;
    }

}


/* ============================================================
   12.8 VERY SMALL MOBILE
   380px AND BELOW
============================================================ */

@media (max-width: 380px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero-mandala-stage {
        width: 112%;
    }


    .hero-mandala-caption {
        max-width: 260px;
    }


    .hero-title-sequenced {
        font-size:
            clamp(
                34px,
                11.8vw,
                43px
            );
    }


    .hero-section-premium
    .hero-kicker {
        max-width: 100%;

        font-size: 9px;
    }


    .hero-section-premium
    .hero-description {
        font-size: 12.5px;
    }


    .hero-section-premium
    .hero-micro-info {
        padding:
            10px
            5px;
    }


    .hero-section-premium
    .hero-stat {
        padding:
            0
            4px;
    }


    .hero-section-premium
    .hero-micro-info strong {
        font-size: 17px;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-cosmic-stage {
        min-height: 350px;

        border-radius: 20px;
    }


    .wisdom-vishwaroop-frame {
        width: 130%;
    }


    .wisdom-cosmic-halo {
        width: 178px;
        height: 178px;
    }


    .wisdom-cosmic-rays {
        width: 250px;
        height: 250px;
    }


    .wisdom-cosmic-orbit-one {
        width: 218px;
        height: 218px;
    }


    .wisdom-cosmic-orbit-two {
        width: 262px;
        height: 262px;
    }


    .wisdom-visual-caption {
        display: none;
    }


    .wisdom-sanskrit {
        font-size: 19px;
    }


    .wisdom-content blockquote {
        font-size:
            clamp(
                23px,
                8vw,
                29px
            );
    }

}


/* ============================================================
   12.9 SHORT LANDSCAPE DEVICES
============================================================ */

@media
(max-width: 900px)
and
(max-height: 560px)
and
(orientation: landscape) {

    /* --------------------------------------------------------
       HERO
       Use two columns again on short landscape screens.
    -------------------------------------------------------- */

    .hero-section-premium {
        padding-top:
            calc(
                var(--ag-header-height) +
                18px
            );

        padding-bottom: 45px;
    }


    .hero-container-reversed {
        grid-template-columns:
            minmax(310px, 0.92fr)
            minmax(0, 1.08fr);

        gap: 24px;
    }


    .hero-mandala-column-left {
        order: 1;
    }


    .hero-content-right {
        order: 2;

        text-align: left;

        align-items: flex-start;
    }


    .hero-mandala-stage {
        width:
            min(
                46vw,
                390px
            );

        margin: 0;
    }


    .hero-mandala-caption {
        display: none;
    }


    .hero-title-sequenced {
        margin-left: 0;
        margin-right: 0;

        font-size:
            clamp(
                34px,
                5vw,
                45px
            );
    }


    .hero-section-premium
    .hero-kicker,
    .hero-section-premium
    .hero-description,
    .hero-section-premium
    .hero-micro-info {
        margin-left: 0;
        margin-right: 0;
    }


    .hero-section-premium
    .hero-actions {
        justify-content: flex-start;
    }


    .hero-section-premium
    .hero-description {
        font-size: 12px;

        line-height: 1.55;
    }


    .hero-section-premium
    .hero-actions {
        margin-bottom: 17px;
    }


    .hero-section-premium
    .hero-micro-info {
        padding:
            8px
            10px;
    }


    .hero-scroll-cue {
        display: none;
    }


    /* --------------------------------------------------------
       WISDOM
    -------------------------------------------------------- */

    .wisdom-container,
    .wisdom-cinematic-container {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(320px, 1.08fr);

        gap: 28px;
    }


    .wisdom-cosmic-stage {
        min-height: 380px;
    }


    .wisdom-vishwaroop-frame {
        width: 118%;
    }


    .wisdom-cinematic-content {
        text-align: left;

        padding: 0;
    }


    .wisdom-reference {
        justify-content: flex-start;
    }

}


/* ============================================================
   12.10 TOUCH DEVICES
   Keep all Hero controls physically stable.
============================================================ */

@media
(hover: none)
and
(pointer: coarse) {

    .hero-section-premium
    .primary-button:hover,
    .hero-section-premium
    .primary-button:active,
    .hero-section-premium
    .text-action-button:hover,
    .hero-section-premium
    .text-action-button:active,
    .hero-section-premium
    .mandala-center:hover
    .mandala-center-image {
        transform: none;
    }


    .hero-section-premium
    .mandala-center-image {
        transform:
            scale(1.025);
    }

}


/* ============================================================
   12.11 REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hero-mandala-stage,
    .hero-mandala-caption,
    .hero-section-premium
    .hero-reveal-item,
    .hero-mandala-rim-glow,
    .hero-mandala-spark-field span,
    .hero-depth-particle,
    .wisdom-star-field,
    .wisdom-cosmic-glow,
    .wisdom-cosmic-halo,
    .wisdom-cosmic-rays,
    .wisdom-cosmic-orbit,
    .wisdom-vishwaroop-frame,
    .wisdom-vishwaroop-image {
        animation:
            none !important;
    }


    .hero-mandala-stage,
    .hero-mandala-caption,
    .hero-section-premium
    .hero-reveal-item {
        opacity: 1;

        filter: none;

        transform: none;
    }


    .wisdom-vishwaroop-frame {
        opacity: 1;

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

}


/* ============================================================
   END PREMIUM HERO + COSMIC WISDOM RESPONSIVE OVERRIDES
============================================================ */