/* ============================================================
   ABOUT PAGE REBUILD - PREMIUM DESIGN
   ============================================================ */

/* 1. Reset Astra's Container for this page */
#about-page {
    margin-top: 80px;
    width: 100% !important;
}

#about-page .ab-container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* 2. Hero Section Styling */
.ab-hero { padding: 100px 0 60px !important; }
.ab-hero-card {
    padding: 80px 40px !important;
    text-align: center;
    border-radius: 40px !important;
}

.ab-main-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 6vw, 64px) !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
}

.ab-main-title i {
    font-style: italic;
    color: hsl(var(--accent));
}

/* 3. Split Philosophy Section (Screenshot 19) */
.ab-split-section { padding: 80px 0 !important; }

.ab-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
}

.ab-img-wrap {
    padding: 15px !important;
    border-radius: 30px !important;
}

.ab-inner-frame {
    aspect-ratio: 1/1 !important; /* Forces a perfect square like the screenshot */
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative;
}

.ab-inner-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s ease;
}

.ab-text-content h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 42px !important;
    margin-bottom: 25px !important;
}

.ab-text-content p {
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: hsl(var(--muted-foreground)) !important;
    margin-bottom: 20px !important;
}

/* 4. Three Pillars Section (Screenshot 20) */
.ab-values { padding: 100px 0 !important; }
.ab-header-center { text-align: center; margin-bottom: 60px; }

.ab-values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.ab-value-card {
    padding: 50px 30px !important;
    text-align: center;
    border-radius: 30px !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    height: 100%;
}

.ab-value-card:hover {
    transform: translateY(-10px) !important;
}

.ab-val-icon {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: hsla(var(--glass-bg) / 0.5) !important;
}

.ab-val-icon img.emoji {
    width: 35px !important;
    height: 35px !important;
}

.ab-value-card h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    font-family: 'Inter', sans-serif !important;
}

/* 5. Stats Bar Styling (The horizontal pill) */
.ab-stats { padding-bottom: 100px !important; }

.ab-stats-bar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 60px 40px !important;
    border-radius: 40px !important;
    background: hsla(var(--glass-bg) / 0.4) !important;
    box-shadow: inset 0 4px 12px rgba(var(--shadow-dark), 0.6) !important;
}

.ab-stat-item {
    text-align: center;
    flex: 1;
}

.ab-stat-num {
    display: block !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    line-height: 1 !important;
}

.ab-stat-label {
    display: block !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: hsl(var(--accent)) !important;
    font-weight: 600 !important;
}

.ab-stat-sep {
    width: 1px !important;
    height: 60px !important;
    background: hsla(var(--border) / 0.5) !important;
}

/* 6. Reveal Visibility */
.gs-reveal { opacity: 0; }
.gs-reveal.active { opacity: 1; }

/* 7. Responsive Fixes */
@media (max-width: 1024px) {
    .ab-grid { grid-template-columns: 1fr !important; gap: 50px !important; text-align: center; }
    .ab-values-grid { grid-template-columns: 1fr !important; }
    .ab-stats-bar { flex-direction: column !important; gap: 40px !important; padding: 40px 20px !important; }
    .ab-stat-sep { width: 60px !important; height: 1px !important; }
}
/* ============================================================
   MOBILE RESPONSIVE FIXES - ABOUT PAGE
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Reduce Container Padding */
    #about-page .ab-container {
        padding: 0 20px !important;
    }

    /* 2. Fix Hero Typography Scaling */
    .ab-hero-card {
        padding: 40px 20px !important;
        border-radius: 30px !important;
    }

    .ab-main-title {
        font-size: 2.2rem !important; /* Smaller size for mobile */
        line-height: 1.2 !important;
        word-break: keep-all !important; /* Prevents characters from splitting */
    }

    .ab-lead {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* 3. Adjust Split Section */
    .ab-grid {
        gap: 30px !important;
    }

    .ab-text-content h2 {
        font-size: 30px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Three Pillars Padding */
    .ab-value-card {
        padding: 30px 20px !important;
    }
}

@media (max-width: 480px) {
    /* Extra scale down for small phones (like the one in your screenshot) */
    .ab-main-title {
        font-size: 1.8rem !important;
    }

    .ab-hero-card {
        padding: 30px 15px !important;
    }

    /* Stats Bar scaling */
    .ab-stat-num {
        font-size: 36px !important;
    }

    .ab-stat-label {
        font-size: 11px !important;
    }

    /* Ensure glass cards don't have too much side padding */
  
}

/* Fix for Astra's internal padding that might be adding extra width */
.page-template-page-about #primary, 
.page-template-page-about #main {
    padding: 0 !important;
    margin: 0 !important;
}