/* About Page - Main Content */
/* ===== ABOUT SECTION ===== */
.about-section {
    background: var(--navy-deep);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--about-grid-gap);
    align-items: center;
}

.about-content h2 {
    color: var(--text);
}

.about-content p {
    margin-bottom: var(--space-text-gap);
}

.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.org-chart {
    width: 100%;
    max-width: var(--about-visual-max);
}

.org-node {
    background: var(--org-node-bg);
    border: 1px solid var(--card-border);
    padding: var(--org-node-pad-y) var(--org-node-pad-x);
    text-align: center;
    margin-bottom: var(--org-node-gap);
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.org-node:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.org-node.main {
    border-color: var(--teal);
    background: var(--org-node-bg-active);
}

.org-node-title {
    font-size: var(--org-node-title-size);
    font-weight: 600;
    color: var(--text);
}

.org-branches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--org-branches-gap);
}

.org-branches .org-node {
    padding: 15px;
    margin-bottom: 0;
}

.org-branches .org-node-title {
    font-size: var(--org-node-title-size-sm);
}

/* ===== METHODOLOGY SECTION ===== */
.methodology-section {
    background: var(--grad-dark-teal);
}

.methodology-section h2,
.methodology-section p {
    color: var(--text);
}

.methodology-section .line {
    background: rgba(255, 255, 255, 0.5);
}

.shared-stack-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--feature-grid-gap);
    align-items: start;
}

.shared-stack-copy-col p {
    margin: 0;
    font-size: var(--methodology-copy-size);
    opacity: var(--methodology-copy-opacity);
}

.shared-stack-features-grid {
    margin-top: var(--space-lg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--feature-grid-gap);
    margin-top: var(--space-xl);
}

.feature-card {
    background: var(--feature-card-bg);
    border: 1px solid var(--feature-card-border);
    padding: var(--feature-card-pad);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.feature-card:hover {
    background: var(--feature-card-bg-hover);
    border-color: var(--feature-card-border-hover);
    transform: translateY(var(--feature-card-lift));
}

.feature-icon {
    width: var(--feature-icon-size);
    height: var(--feature-icon-size);
    margin-bottom: var(--feature-icon-gap);
    color: var(--text);
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.feature-card h3 {
    color: var(--text);
    font-size: var(--feature-card-title-size);
}

.feature-card p {
    font-size: var(--feature-card-copy-size);
    opacity: var(--feature-card-copy-opacity);
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--about-grid-gap-mobile);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .shared-stack-copy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .shared-stack-copy-grid,
    .shared-stack-features-grid {
        margin-top: var(--space-md);
    }

    .org-branches {
        grid-template-columns: 1fr;
    }

    .org-node {
        padding: var(--space-sm) var(--space-md);
    }

    .feature-card {
        padding: var(--space-md);
    }
}