/*
 * Page-specific styles for the IMM page (page-imm.php).
 * Shared classes (.eyebrow, .icon-circle, .btn-primary, .btn-text,
 * .wave-divider, .faq-*, .hero-nav-offset, etc.) already live in
 * global.css and are not repeated here.
 */

/* ── Hero ── */
.imm-hero {
    background-color: var(--light-green-bg);
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}
.imm-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg) 0 80px;
    display: flex;
    align-items: center;
    gap: 48px;
    padding-bottom: 120px;
}
.imm-hero-text { flex: 0 0 auto; width: 44%; max-width: 480px; }
.imm-hero-text h1 {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.22;
}
.imm-hero-description {
    color: var(--text-primary);
    line-height: 1.7;
    opacity: 0.85;
}
.imm-hero-diagram { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.imm-hero-diagram img { width: 100%; max-width: 540px; height: auto; display: block; }

@media (max-width: 899px) {
    .imm-hero-inner { flex-direction: column; align-items: center; padding: 0 var(--spacing-lg) 100px; gap: var(--spacing-xl); }
    .imm-hero-text { width: 100%; max-width: 600px; }
    .imm-hero-text h1 { font-size: 32px; }
    .imm-hero-diagram { width: 100%; max-width: 480px; }
    .imm-hero-diagram img { max-width: 100%; margin: 0 auto; }
}
@media (max-width: 550px) {
    .imm-hero-inner { padding: 40px 0 60px; }
    .imm-hero-text { padding: 0 var(--spacing-lg); }
    .imm-hero-text h1 { font-size: 28px; }
    .imm-hero-diagram { width: 100%; padding: 0 12px; }
}

/* ── Why section ── */
.imm-why-section { background-color: var(--white); padding: 100px 0 0; }
.imm-why-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg) 120px 80px; }
.imm-why-text h2 { max-width: 680px; margin-bottom: var(--spacing-lg); line-height: 1.25; }
.imm-why-intro { font-family: var(--font-body); font-size: var(--body-size); color: var(--text-primary); line-height: 1.7; max-width: 680px; margin-bottom: var(--spacing-md); }
.imm-why-body { font-family: var(--font-body); font-size: var(--body-size); color: var(--text-primary); line-height: 1.7; max-width: 680px; margin-bottom: var(--spacing-md); }
.imm-why-body:last-of-type { margin-bottom: 0; }

.imm-why-compare { margin-top: 20px; max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.imm-why-col-label { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(28,37,73,0.4); margin-bottom: var(--spacing-md); }
.imm-why-col-label--imm { color: var(--primary-green); }
.imm-why-list { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.imm-why-list li { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.imm-why-list li span:last-child { font-family: var(--font-body); font-size: var(--body-size); font-weight: 400; color: var(--text-primary); padding-top: 6px; }
.imm-why-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.imm-why-icon svg { width: 16px; height: 16px; }
.imm-why-icon--dark { background-color: var(--text-primary); }
.imm-why-icon--grey { background-color: rgba(28,37,73,0.2); }

@media (max-width: 899px) {
    .imm-why-section { padding: 80px 0 0; }
    .imm-why-container { padding: 0 var(--spacing-lg) 130px; }
    .imm-why-text .eyebrow,
    .imm-why-text h2,
    .imm-why-intro,
    .imm-why-body,
    .imm-why-compare {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .imm-why-compare {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}
@media (max-width: 550px) {
    .imm-why-section { padding: var(--section-padding-mobile) 0 0; }
    .imm-why-container { padding-bottom: var(--section-padding-mobile); }
}

/* ── Six Principles ── */
.imm-principles-section { background-color: var(--light-green-bg); padding: 80px 0 0; text-align: center; }
.imm-principles-container { max-width: 1200px; margin: 0 auto; padding: 0 24px 130px; }
.imm-principles-container h2 { max-width: 640px; margin: 0 auto var(--spacing-md); }
.imm-principles-subcopy { font-family: var(--font-body); font-size: var(--body-size); font-weight: 400; color: var(--text-primary); max-width: 600px; margin: 0 auto 72px; line-height: 1.6; }
.imm-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; row-gap: 56px; align-items: start; }
.imm-principles-item { position: relative; padding: 0 32px; }
.imm-principles-item:not(:nth-child(3n))::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: rgba(28,37,73,0.12); }
.imm-principles-icon { margin: 0 auto var(--spacing-lg); }
.imm-principles-tag { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); margin-top: 0; }
.imm-principles-item h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.imm-principles-item p:last-child { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-primary); line-height: 1.6; max-width: 260px; margin: 0 auto; }
.imm-principles-cta { margin-top: 72px; }
.imm-principles-cta-heading { font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-lg); }
.imm-principles-cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; }

@media (max-width: 899px) {
    .imm-principles-section { padding: 80px 0 0; }
    .imm-principles-container { padding-bottom: 130px; }
    .imm-principles-subcopy { margin-bottom: 56px; }
    .imm-principles-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
    .imm-principles-item:not(:nth-child(3n))::after { content: none; }
    .imm-principles-item:nth-child(odd)::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: rgba(28,37,73,0.12); }
    .imm-principles-cta { margin-top: 56px; }
}
@media (max-width: 550px) {
    .imm-principles-section { padding: var(--section-padding-mobile) 0 0; }
    .imm-principles-container { padding-bottom: var(--section-padding-mobile); }
    .imm-principles-subcopy { font-size: 15px; margin-bottom: 40px; }
    .imm-principles-grid { grid-template-columns: 1fr; row-gap: 40px; }
    .imm-principles-item:not(:nth-child(3n))::after, .imm-principles-item:nth-child(odd)::after { content: none; }
    .imm-principles-item { padding: 0 16px; }
    .imm-principles-item p:last-child { max-width: none; }
    .imm-principles-cta { margin-top: 40px; }
    .imm-principles-cta-heading { font-size: 20px; }
}

/* ── About Jeannie (matches About page "Who is Jeannie" section) ── */
.imm-jeannie-section { background-color: var(--white); padding: 100px 0 0; }
.imm-jeannie-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg) 100px 80px; }
.imm-jeannie-row {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 0;
    align-items: start;
    max-width: 1040px;
}
.imm-jeannie-photo {
    grid-column: 1;
    grid-row: 1;
}
.imm-jeannie-credit {
    grid-column: 1;
    grid-row: 2;
}
.imm-jeannie-text { grid-column: 2; grid-row: 1; align-self: center; }
.imm-jeannie-text h2 { margin-bottom: var(--spacing-lg); line-height: 1.25; }
.imm-jeannie-text p:not(.eyebrow) { color: var(--text-primary); line-height: 1.75; opacity: 0.85; margin-bottom: var(--spacing-lg); }

@media (max-width: 899px) {
    .imm-jeannie-section { padding: 80px 0 0; }
    .imm-jeannie-container { padding: 0 var(--spacing-lg) 130px; }
    .imm-jeannie-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: var(--spacing-lg); max-width: 480px; margin: 0 auto; }
    .imm-jeannie-text { grid-column: 1; grid-row: 1; }
    .imm-jeannie-photo { grid-column: 1; grid-row: 2; max-width: 400px; margin: 0 auto; }
    .imm-jeannie-credit { grid-column: 1; grid-row: 3; margin-top: 0; text-align: center; }
}
@media (max-width: 550px) {
    .imm-jeannie-section { padding: var(--section-padding-mobile) 0 0; }
    .imm-jeannie-container { padding-bottom: var(--section-padding-mobile); }
}

/* ── Research ── */
.imm-research-section { background-color: var(--evidence-bg); padding: 100px 0 110px; }
.imm-research-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg) 0 80px; display: flex; align-items: flex-start; gap: 80px; }
.imm-research-text { flex: 1 1 auto; max-width: 520px; }
.imm-research-section h2 { line-height: 1.25; margin-bottom: var(--spacing-xl); }
.imm-research-body { font-family: var(--font-body); font-size: var(--body-size); color: var(--text-primary); line-height: 1.75; margin-bottom: var(--spacing-lg); }
.imm-research-body em { font-style: italic; }
.imm-research-body:last-of-type { margin-bottom: var(--spacing-xl); }
.imm-research-body a,
.imm-research-cta-link {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.3s ease;
}
.imm-research-cta-link { display: inline-block; font-weight: 600; }
.imm-research-body a:hover,
.imm-research-cta-link:hover { opacity: 0.6; }
.imm-research-body a:focus-visible,
.imm-research-cta-link:focus-visible { outline: 2px solid var(--primary-green); outline-offset: 3px; border-radius: 2px; }
.imm-research-stats { flex: 0 0 auto; width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 56px; }
.imm-research-card { background-color: var(--grey-trust); border-radius: 10px; padding: 28px 24px; }
.imm-research-stat { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--primary-green); line-height: 1.1; margin-bottom: 6px; }
.imm-research-stat-text { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--primary-green); line-height: 1.1; margin-bottom: 6px; }
.imm-research-dir { font-size: 18px; margin-left: 2px; }
.imm-research-label { font-family: var(--font-body); font-size: 13px; color: var(--text-primary); line-height: 1.4; }

@media (max-width: 899px) {
    .imm-research-section { padding: 80px 0 130px; }
    .imm-research-container { padding: 0 var(--spacing-lg); flex-direction: column; align-items: center; gap: var(--spacing-2xl); }
    .imm-research-text { max-width: 480px; margin: 0 auto; }
    .imm-research-stats { width: 100%; max-width: 480px; margin: 0 auto; grid-template-columns: 1fr 1fr; padding-top: 0; }
}
@media (max-width: 550px) {
    .imm-research-section { padding: 64px 0 72px; }
    .imm-research-body { font-size: 15px; }
    .imm-research-stats { grid-template-columns: 1fr 1fr; }
}