/* MANAV Vision Page Styles - Matching Site Theme */

/* ========================================
   Hero Section
   ======================================== */
.manav_hero {
    margin-top: 6.5vw;
    padding: 0 2.8vw;
}

.manav_hero_box {
    background: #0a0a0a;
    min-height: 32vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1.5vw;
    padding: 4vw 4vw;
}

/* Animated gradient blobs */
.manav_blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.85;
    transition: transform 0.15s ease-out;
}

.manav_blob.blob1 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(255, 140, 60, 0.7) 0%, rgba(255, 100, 50, 0.4) 40%, transparent 70%);
    top: 10%;
    left: 20%;
    animation: manavBlob1 12s ease-in-out infinite;
}

.manav_blob.blob2 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(100, 180, 100, 0.7) 0%, rgba(80, 150, 80, 0.4) 40%, transparent 70%);
    top: 5%;
    right: 15%;
    animation: manavBlob2 14s ease-in-out infinite;
}

.manav_blob.blob3 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, rgba(80, 120, 200, 0.8) 0%, rgba(60, 100, 180, 0.4) 40%, transparent 70%);
    bottom: 10%;
    left: 10%;
    animation: manavBlob3 10s ease-in-out infinite;
}

.manav_blob.blob4 {
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, rgba(180, 100, 200, 0.7) 0%, rgba(150, 80, 180, 0.4) 40%, transparent 70%);
    bottom: 0%;
    right: 10%;
    animation: manavBlob4 16s ease-in-out infinite;
}

@keyframes manavBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(5%, 10%) scale(1.05); }
    50% { transform: translate(-5%, 5%) scale(0.95); }
    75% { transform: translate(3%, -5%) scale(1.02); }
}

@keyframes manavBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-8%, -5%) scale(1.08); }
    50% { transform: translate(5%, 8%) scale(0.92); }
    75% { transform: translate(-3%, 3%) scale(1.05); }
}

@keyframes manavBlob3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(6%, -8%) scale(0.95); }
    50% { transform: translate(-4%, -4%) scale(1.1); }
    75% { transform: translate(-6%, 6%) scale(0.98); }
}

@keyframes manavBlob4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-5%, 6%) scale(1.03); }
    50% { transform: translate(8%, -3%) scale(0.97); }
    75% { transform: translate(4%, 8%) scale(1.06); }
}

/* Hero Content */
.manav_hero_content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2vw;
    margin-bottom: 4vw;
}

.manav_hero_content h1 {
    color: #ffffff;
    font-size: 3.2vw;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

.manav_hero_content h1 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #a8e6a3;
}

.manav_hero_content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1vw;
    margin-top: 1.5vw;
    font-weight: 400;
}

/* MANAV Acronym Display */
.manav_acronym {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0;
    margin-top: 2vw;
}

.acronym_letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5vw 2.5vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    transition: all 0.3s ease;
}

.acronym_letter:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.acronym_letter:hover {
    background: rgba(255, 255, 255, 0.1);
}

.acronym_letter .letter {
    font-size: 2.5vw;
    font-weight: 500;
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

.acronym_letter .meaning {
    font-size: 0.75vw;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5vw;
    text-align: center;
    white-space: nowrap;
}

/* ========================================
   Quote Section
   ======================================== */
.manav_quote_section {
    background: #f9f8f4;
    padding: 5vw 11.3vw;
}

.manav_quote_wrap {
    max-width: 60vw;
    margin: 0 auto;
}

.quote_content {
    text-align: center;
}

.quote_icon {
    margin-bottom: 2vw;
}

.quote_icon svg {
    width: 3vw;
    height: 3vw;
    opacity: 0.3;
}

.quote_content blockquote {
    margin: 0;
    padding: 0;
}

.quote_content blockquote p {
    font-size: 1.4vw;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    line-height: 1.7;
    margin: 0;
}

.quote_content cite {
    display: block;
    font-size: 0.95vw;
    color: #666;
    font-style: normal;
    margin-top: 1.5vw;
    font-weight: 500;
}

/* ========================================
   Introduction Section
   ======================================== */
.manav_intro_section {
    background: #f9f8f4;
    padding: 4vw 11.3vw 6vw;
}

.manav_intro_wrap {
    display: flex;
    gap: 5vw;
    align-items: flex-start;
}

.intro_left {
    flex: 1;
    max-width: 45%;
}

.intro_left h2 {
    font-size: 2.5vw;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 2vw;
}

.intro_left h2 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.intro_left p {
    font-size: 0.95vw;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5vw;
}

.intro_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6vw;
    margin-top: 2vw;
}

.intro_tag {
    display: inline-block;
    padding: 0.5vw 1.2vw;
    border: 1px solid #ccc;
    font-size: 0.85vw;
    color: #1a1a1a;
    background: transparent;
    transition: all 0.3s ease;
}

.intro_tag:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.intro_right {
    flex: 1;
    max-width: 50%;
}

.intro_pillars {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pillar_item {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    padding: 1.2vw 1.5vw;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.pillar_item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pillar_item:hover {
    background: rgba(0, 0, 0, 0.03);
    padding-left: 2vw;
}

.pillar_letter {
    width: 2.5vw;
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #fff;
    flex-shrink: 0;
}

.pillar_item.moral .pillar_letter { background: #97AC87; }
.pillar_item.accountable .pillar_letter { background: #D4B375; }
.pillar_item.national .pillar_letter { background: #e85555; }
.pillar_item.accessible .pillar_letter { background: #88C9DE; }
.pillar_item.valid .pillar_letter { background: #C9A0DC; }

.pillar_info h4 {
    font-size: 1vw;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.3vw 0;
}

.pillar_info p {
    font-size: 0.85vw;
    color: #666;
    margin: 0;
}

/* ========================================
   Alignment Section (Dark)
   ======================================== */
.manav_alignment_section {
    background: #0a0a0a;
    padding: 6vw 11.3vw;
    position: relative;
    overflow: hidden;
}

.alignment_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 40% at 30% 20%, rgba(80, 100, 120, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 70% 80%, rgba(100, 80, 120, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.manav_alignment_wrap {
    position: relative;
    z-index: 1;
}

.manav_alignment_wrap h2 {
    font-size: 2.5vw;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1vw;
    line-height: 1.3;
}

.manav_alignment_wrap h2 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.section_desc {
    text-align: center;
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4vw;
}

.alignment_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5vw;
}

.alignment_card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1vw;
    padding: 2vw;
    transition: all 0.3s ease;
}

.alignment_card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.alignment_card.full_width {
    grid-column: span 2;
}

.card_header {
    display: flex;
    align-items: flex-start;
    gap: 1vw;
    margin-bottom: 1.5vw;
}

.card_letter {
    width: 3vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5vw;
    font-size: 1.5vw;
    font-weight: 600;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #fff;
    flex-shrink: 0;
}

.card_letter.moral { background: linear-gradient(135deg, #97AC87, #7d9470); }
.card_letter.accountable { background: linear-gradient(135deg, #D4B375, #c9a45f); }
.card_letter.national { background: linear-gradient(135deg, #e85555, #d44444); }
.card_letter.accessible { background: linear-gradient(135deg, #88C9DE, #6bb8d1); }
.card_letter.valid { background: linear-gradient(135deg, #C9A0DC, #b88fcc); }

.card_title h3 {
    font-size: 1.3vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #ffffff;
    margin: 0 0 0.3vw 0;
}

.card_title p {
    font-size: 0.85vw;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.card_features {
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
    margin-bottom: 1.5vw;
}

.feature_item {
    display: flex;
    flex-direction: column;
    padding: 0.8vw 1vw;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5vw;
}

.feature_name {
    font-size: 0.9vw;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.2vw;
}

.feature_desc {
    font-size: 0.8vw;
    color: rgba(255, 255, 255, 0.6);
}

.card_rationale {
    padding-top: 1vw;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card_rationale p {
    font-size: 0.85vw;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* ========================================
   Video Section
   ======================================== */
.manav_video_section {
    background: #f9f8f4;
    padding: 0 11.3vw 5vw;
}

.manav_video_wrap {
    max-width: 60vw;
    margin: 0 auto;
}

.video_container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 1vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
}

.video_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1vw;
}

/* ========================================
   Alignment Header Section
   ======================================== */
.manav_alignment_header {
    background: #f9f8f4;
    padding: 6vw 11.3vw 3vw;
}

.manav_alignment_header_wrap {
    text-align: center;
}

.manav_alignment_header_wrap h2 {
    font-size: 2.5vw;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 1vw;
    line-height: 1.3;
}

.manav_alignment_header_wrap h2 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.manav_alignment_header_wrap .section_desc {
    font-size: 1vw;
    color: #666;
    margin: 0;
}

/* ========================================
   Pillar Sections (Individual M,A,N,A,V)
   ======================================== */
.manav_pillar_section {
    padding: 4vw 11.3vw;
}

.manav_pillar_section:nth-child(odd) {
    background: #f9f8f4;
}

.manav_pillar_section:nth-child(even) {
    background: #ffffff;
}

.manav_pillar_wrap {
    max-width: 65vw;
    margin: 0 auto;
}

.pillar_header {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    margin-bottom: 2.5vw;
    padding-bottom: 1.5vw;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pillar_letter_large {
    width: 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6vw;
    font-size: 2vw;
    font-weight: 600;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #fff;
    flex-shrink: 0;
}

.pillar_letter_large.moral { background: linear-gradient(135deg, #97AC87, #7d9470); }
.pillar_letter_large.accountable { background: linear-gradient(135deg, #D4B375, #c9a45f); }
.pillar_letter_large.national { background: linear-gradient(135deg, #e85555, #d44444); }
.pillar_letter_large.accessible { background: linear-gradient(135deg, #88C9DE, #6bb8d1); }
.pillar_letter_large.valid { background: linear-gradient(135deg, #C9A0DC, #b88fcc); }

.pillar_header h3 {
    font-size: 1.8vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin: 0;
}

.pillar_content {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.pillar_block h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.8vw 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pillar_block p {
    font-size: 0.95vw;
    color: #444;
    line-height: 1.8;
    margin: 0;
}

.pillar_features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

.pillar_features li {
    font-size: 0.95vw;
    color: #444;
    line-height: 1.8;
    padding-left: 1.5vw;
    position: relative;
}

.pillar_features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6vw;
    width: 0.4vw;
    height: 0.4vw;
    background: #1a1a1a;
    border-radius: 50%;
}

.pillar_features li strong {
    color: #1a1a1a;
    font-weight: 600;
}

.pillar_quote {
    background: rgba(0, 0, 0, 0.03);
    padding: 1.5vw 2vw;
    border-left: 3px solid #1a1a1a;
    margin-top: 1vw;
}

.pillar_quote p {
    font-size: 0.95vw;
    color: #333;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* Pillar section color accents */
.pillar_moral .pillar_quote { border-left-color: #97AC87; }
.pillar_accountable .pillar_quote { border-left-color: #D4B375; }
.pillar_national .pillar_quote { border-left-color: #e85555; }
.pillar_accessible .pillar_quote { border-left-color: #88C9DE; }
.pillar_valid .pillar_quote { border-left-color: #C9A0DC; }

/* ========================================
   Highlights Section (Light) - DEPRECATED
   ======================================== */
.manav_highlights_section {
    background: #f9f8f4;
    padding: 6vw 11.3vw;
}

.manav_highlights_wrap h2 {
    font-size: 2.5vw;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 4vw;
    line-height: 1.3;
}

.manav_highlights_wrap h2 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.highlights_list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    border-radius: 1vw;
    overflow: hidden;
    box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.05);
}

.highlight_row {
    display: flex;
    align-items: flex-start;
    gap: 2vw;
    padding: 2vw 2.5vw;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.highlight_row:last-child {
    border-bottom: none;
}

.highlight_row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.highlight_pillar {
    width: 3.5vw;
    height: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.highlight_pillar span {
    font-size: 1.5vw;
    font-weight: 600;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #fff;
}

.highlight_pillar.moral { background: linear-gradient(135deg, #97AC87, #7d9470); }
.highlight_pillar.accountable { background: linear-gradient(135deg, #D4B375, #c9a45f); }
.highlight_pillar.national { background: linear-gradient(135deg, #e85555, #d44444); }
.highlight_pillar.accessible { background: linear-gradient(135deg, #88C9DE, #6bb8d1); }
.highlight_pillar.valid { background: linear-gradient(135deg, #C9A0DC, #b88fcc); }

.highlight_content {
    flex: 1;
}

.highlight_content h4 {
    font-size: 1.1vw;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.5vw 0;
}

.highlight_content p {
    font-size: 0.95vw;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   Summary Section (Dark)
   ======================================== */
.manav_summary_section {
    background: #0a0a0a;
    padding: 6vw 11.3vw;
    position: relative;
    overflow: hidden;
}

.summary_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(100, 180, 100, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.manav_summary_wrap {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 55vw;
    margin: 0 auto;
}

.summary_content h2 {
    font-size: 2.5vw;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 2vw;
    line-height: 1.3;
}

.summary_content h2 em {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.summary_content > p {
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 3vw;
}

.summary_content strong {
    color: #a8e6a3;
}

.summary_cta {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
}

.summary_cta .cta_primary {
    background: #ffffff;
    color: #0a0a0a;
    padding: 1vw 2.5vw;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.95vw;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #ffffff;
}

.summary_cta .cta_primary:hover {
    background: transparent;
    color: #ffffff;
}

.summary_cta .cta_secondary {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    background: transparent;
    color: #ffffff;
    padding: 1vw 2vw;
    text-decoration: none;
    font-size: 0.95vw;
    font-weight: 400;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.summary_cta .cta_secondary:hover {
    border-color: #ffffff;
}

.summary_cta .cta_secondary svg {
    transition: transform 0.3s ease;
}

.summary_cta .cta_secondary:hover svg {
    transform: translate(3px, -3px);
}

/* ========================================
   Sources Section
   ======================================== */
.manav_sources_section {
    background: #f9f8f4;
    padding: 3vw 11.3vw;
}

.manav_sources_wrap {
    text-align: center;
}

.manav_sources_wrap p {
    font-size: 0.85vw;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.manav_sources_wrap strong {
    color: #1a1a1a;
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Tablet Styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .manav_hero {
        margin-top: 80px;
    }

    .manav_hero_box {
        min-height: 380px;
        border-radius: 20px;
        padding: 40px 40px;
    }

    .manav_hero_content h1 {
        font-size: 36px;
    }

    .manav_hero_content p {
        font-size: 16px;
        margin-top: 15px;
    }

    .manav_acronym {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 30px;
    }

    .acronym_letter {
        padding: 15px 20px;
    }

    .acronym_letter .letter {
        font-size: 28px;
    }

    .acronym_letter .meaning {
        font-size: 11px;
        white-space: normal;
    }

    .manav_quote_section,
    .manav_intro_section,
    .manav_alignment_section,
    .manav_alignment_header,
    .manav_video_section,
    .manav_pillar_section,
    .manav_highlights_section,
    .manav_summary_section,
    .manav_sources_section {
        padding-left: 40px;
        padding-right: 40px;
    }

    .manav_quote_section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .manav_video_wrap {
        max-width: 100%;
    }

    .video_container {
        border-radius: 16px;
    }

    .video_container iframe {
        border-radius: 16px;
    }

    .manav_alignment_header {
        padding-top: 50px;
        padding-bottom: 25px;
    }

    .manav_alignment_header_wrap h2 {
        font-size: 32px;
    }

    .manav_alignment_header_wrap .section_desc {
        font-size: 16px;
    }

    .manav_pillar_section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .manav_pillar_wrap {
        max-width: 100%;
    }

    .pillar_letter_large {
        width: 50px;
        height: 50px;
        font-size: 26px;
        border-radius: 8px;
    }

    .pillar_header {
        margin-bottom: 25px;
        padding-bottom: 15px;
        gap: 15px;
    }

    .pillar_header h3 {
        font-size: 24px;
    }

    .pillar_content {
        gap: 25px;
    }

    .pillar_block h4 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .pillar_block p,
    .pillar_features li,
    .pillar_quote p {
        font-size: 15px;
        line-height: 1.7;
    }

    .pillar_features {
        gap: 15px;
    }

    .pillar_features li {
        padding-left: 18px;
    }

    .pillar_features li::before {
        width: 5px;
        height: 5px;
        top: 8px;
    }

    .pillar_quote {
        padding: 20px 25px;
    }

    .manav_quote_wrap {
        max-width: 100%;
    }

    .quote_icon svg {
        width: 40px;
        height: 40px;
    }

    .quote_content blockquote p {
        font-size: 20px;
    }

    .quote_content cite {
        font-size: 14px;
        margin-top: 20px;
    }

    .manav_intro_section {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .manav_intro_wrap {
        flex-direction: column;
        gap: 40px;
    }

    .intro_left,
    .intro_right {
        max-width: 100%;
    }

    .intro_left h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .intro_left p {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .intro_tags {
        gap: 8px;
        margin-top: 20px;
    }

    .intro_tag {
        font-size: 13px;
        padding: 8px 16px;
    }

    .pillar_item {
        padding: 15px;
        gap: 15px;
    }

    .pillar_letter {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .pillar_info h4 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .pillar_info p {
        font-size: 14px;
    }

    .manav_summary_section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .manav_summary_wrap {
        max-width: 100%;
    }

    .summary_content h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .summary_content > p {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .summary_cta {
        flex-direction: row;
        gap: 15px;
    }

    .summary_cta .cta_primary,
    .summary_cta .cta_secondary {
        font-size: 14px;
        padding: 14px 28px;
    }

    .manav_sources_section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .manav_sources_wrap p {
        font-size: 13px;
    }
}

/* Mobile Landscape & Small Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .manav_hero {
        margin-top: 80px;
        padding: 0 20px;
    }

    .manav_hero_box {
        min-height: 340px;
        border-radius: 16px;
        padding: 35px 25px;
    }

    .manav_blob {
        filter: blur(40px);
    }

    .manav_hero_content {
        margin-bottom: 30px;
        padding: 0;
    }

    .manav_hero_content h1 {
        font-size: 28px;
        line-height: 1.35;
    }

    .manav_hero_content p {
        font-size: 14px;
        margin-top: 12px;
    }

    .manav_acronym {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 25px;
        width: 100%;
    }

    .acronym_letter {
        padding: 12px 15px;
        flex: 0 0 33.333%;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .acronym_letter:nth-child(3n) {
        border-right: none;
    }

    .acronym_letter:nth-child(4),
    .acronym_letter:nth-child(5) {
        flex: 0 0 50%;
    }

    .acronym_letter:nth-child(5) {
        border-right: none;
    }

    .acronym_letter:nth-child(4),
    .acronym_letter:nth-child(5) {
        border-bottom: none;
    }

    .acronym_letter .letter {
        font-size: 24px;
    }

    .acronym_letter .meaning {
        font-size: 10px;
        white-space: normal;
        line-height: 1.3;
    }

    .manav_quote_section,
    .manav_intro_section,
    .manav_alignment_section,
    .manav_alignment_header,
    .manav_video_section,
    .manav_pillar_section,
    .manav_highlights_section,
    .manav_summary_section,
    .manav_sources_section {
        padding-left: 25px;
        padding-right: 25px;
    }

    .manav_quote_section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .manav_video_section {
        padding-top: 0;
        padding-bottom: 40px;
    }

    .manav_video_wrap {
        max-width: 100%;
    }

    .video_container {
        border-radius: 12px;
    }

    .video_container iframe {
        border-radius: 12px;
    }

    .manav_alignment_header {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .manav_alignment_header_wrap h2 {
        font-size: 26px;
    }

    .manav_alignment_header_wrap .section_desc {
        font-size: 14px;
    }

    .manav_pillar_section {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .manav_pillar_wrap {
        max-width: 100%;
    }

    .pillar_header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .pillar_letter_large {
        width: 45px;
        height: 45px;
        font-size: 22px;
        border-radius: 8px;
    }

    .pillar_header h3 {
        font-size: 20px;
    }

    .pillar_content {
        gap: 20px;
    }

    .pillar_block h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .pillar_block p,
    .pillar_features li,
    .pillar_quote p {
        font-size: 14px;
        line-height: 1.7;
    }

    .pillar_features {
        gap: 12px;
    }

    .pillar_features li {
        padding-left: 15px;
    }

    .pillar_features li::before {
        width: 5px;
        height: 5px;
        top: 7px;
    }

    .pillar_quote {
        padding: 16px 20px;
        margin-top: 15px;
    }

    .manav_quote_wrap {
        max-width: 100%;
    }

    .quote_icon {
        margin-bottom: 15px;
    }

    .quote_icon svg {
        width: 32px;
        height: 32px;
    }

    .quote_content blockquote p {
        font-size: 17px;
        line-height: 1.6;
    }

    .quote_content cite {
        font-size: 13px;
        margin-top: 15px;
    }

    .manav_intro_section {
        padding-top: 35px;
        padding-bottom: 40px;
    }

    .manav_intro_wrap {
        flex-direction: column;
        gap: 30px;
    }

    .intro_left,
    .intro_right {
        max-width: 100%;
    }

    .intro_left h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .intro_left p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .intro_tags {
        gap: 8px;
        margin-top: 15px;
    }

    .intro_tag {
        font-size: 12px;
        padding: 8px 14px;
    }

    .pillar_item {
        padding: 12px;
        gap: 12px;
    }

    .pillar_letter {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .pillar_info h4 {
        font-size: 15px;
        margin-bottom: 3px;
    }

    .pillar_info p {
        font-size: 13px;
    }

    .manav_summary_section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .manav_summary_wrap {
        max-width: 100%;
    }

    .summary_content h2 {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .summary_content > p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .summary_cta {
        flex-direction: column;
        gap: 12px;
    }

    .summary_cta .cta_primary,
    .summary_cta .cta_secondary {
        font-size: 14px;
        padding: 14px 24px;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .manav_sources_section {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .manav_sources_wrap p {
        font-size: 12px;
    }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
    .manav_hero {
        margin-top: 75px;
        padding: 0 16px;
    }

    .manav_hero_box {
        min-height: auto;
        border-radius: 16px;
        padding: 35px 20px 40px;
    }

    .manav_blob {
        filter: blur(30px);
        opacity: 0.7;
    }

    .manav_blob.blob1,
    .manav_blob.blob2 {
        width: 80vw;
        height: 80vw;
    }

    .manav_blob.blob3,
    .manav_blob.blob4 {
        width: 70vw;
        height: 70vw;
    }

    .manav_hero_content {
        margin-bottom: 25px;
        padding: 0;
    }

    .manav_hero_content h1 {
        font-size: 24px;
        line-height: 1.35;
    }

    .manav_hero_content h1 br {
        display: none;
    }

    .manav_hero_content p {
        font-size: 13px;
        margin-top: 10px;
    }

    .manav_acronym {
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .acronym_letter {
        padding: 12px 16px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .acronym_letter:last-child {
        border-bottom: none;
        border-right: none;
    }

    .acronym_letter .letter {
        font-size: 22px;
        min-width: 30px;
    }

    .acronym_letter .meaning {
        font-size: 12px;
        text-align: left;
        margin-top: 0;
        white-space: normal;
    }

    .manav_quote_section,
    .manav_intro_section,
    .manav_alignment_section,
    .manav_alignment_header,
    .manav_video_section,
    .manav_pillar_section,
    .manav_highlights_section,
    .manav_summary_section,
    .manav_sources_section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .manav_quote_section {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .manav_video_section {
        padding-top: 0;
        padding-bottom: 35px;
    }

    .manav_video_wrap {
        max-width: 100%;
    }

    .video_container {
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .video_container iframe {
        border-radius: 12px;
    }

    .manav_alignment_header {
        padding-top: 35px;
        padding-bottom: 15px;
    }

    .manav_alignment_header_wrap h2 {
        font-size: 22px;
        line-height: 1.35;
    }

    .manav_alignment_header_wrap .section_desc {
        font-size: 13px;
        line-height: 1.5;
    }

    .manav_pillar_section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .manav_pillar_wrap {
        max-width: 100%;
    }

    .pillar_header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .pillar_letter_large {
        width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .pillar_header h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .pillar_content {
        gap: 18px;
    }

    .pillar_block h4 {
        font-size: 12px;
        margin-bottom: 8px;
        letter-spacing: 0.08em;
    }

    .pillar_block p {
        font-size: 14px;
        line-height: 1.65;
    }

    .pillar_features {
        gap: 12px;
    }

    .pillar_features li {
        font-size: 14px;
        line-height: 1.65;
        padding-left: 14px;
    }

    .pillar_features li::before {
        width: 4px;
        height: 4px;
        top: 8px;
    }

    .pillar_quote {
        padding: 14px 16px;
        margin-top: 12px;
        border-left-width: 3px;
    }

    .pillar_quote p {
        font-size: 13px;
        line-height: 1.6;
    }

    .manav_quote_wrap {
        max-width: 100%;
    }

    .quote_icon {
        margin-bottom: 12px;
    }

    .quote_icon svg {
        width: 28px;
        height: 28px;
    }

    .quote_content blockquote p {
        font-size: 15px;
        line-height: 1.6;
    }

    .quote_content cite {
        font-size: 12px;
        margin-top: 12px;
    }

    .manav_intro_section {
        padding-top: 30px;
        padding-bottom: 35px;
    }

    .manav_intro_wrap {
        flex-direction: column;
        gap: 25px;
    }

    .intro_left,
    .intro_right {
        max-width: 100%;
    }

    .intro_left h2 {
        font-size: 22px;
        margin-bottom: 14px;
        line-height: 1.35;
    }

    .intro_left p {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 1.65;
    }

    .intro_tags {
        gap: 6px;
        margin-top: 14px;
    }

    .intro_tag {
        font-size: 11px;
        padding: 7px 12px;
    }

    .pillar_item {
        padding: 12px;
        gap: 10px;
    }

    .pillar_item:hover {
        padding-left: 12px;
    }

    .pillar_letter {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .pillar_info h4 {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .pillar_info p {
        font-size: 12px;
    }

    .manav_summary_section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .manav_summary_wrap {
        max-width: 100%;
    }

    .summary_content h2 {
        font-size: 22px;
        margin-bottom: 15px;
        line-height: 1.35;
    }

    .summary_content > p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .summary_cta {
        flex-direction: column;
        gap: 10px;
    }

    .summary_cta .cta_primary,
    .summary_cta .cta_secondary {
        font-size: 14px;
        padding: 14px 20px;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .summary_cta .cta_secondary svg {
        width: 14px;
        height: 14px;
    }

    .manav_sources_section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .manav_sources_wrap p {
        font-size: 11px;
        line-height: 1.5;
    }

    /* Improve touch targets */
    .intro_tag,
    .summary_cta .cta_primary,
    .summary_cta .cta_secondary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}