/* About page — layout inspired by Pustaka Mane reference */
.page-head { margin-bottom: 0; }
.about-intro {
    background: #fff;
    padding: 1.5rem 0 3rem;
    text-align: center;
}
.about-logo-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--pm-navy);
    box-shadow: 0 8px 28px rgba(27, 20, 83, .15);
    margin-bottom: 2rem;
}
.about-tagline {
    font-family: 'Baloo Tamma 2', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 2rem);
    color: var(--pm-ink);
    max-width: 920px;
    margin: 0 auto 2.5rem;
    line-height: 1.45;
}
.about-hero-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(60, 30, 90, .12);
    display: block;
}
.about-hero-video-wrap {
    max-width: min(720px, 92vw);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(60, 30, 90, .12);
    background: #0a0a0a;
}
.about-hero-video {
    width: 100%;
    height: auto;
    max-height: min(400px, 56vw);
    object-fit: contain;
    display: block;
    vertical-align: middle;
}

.about-story {
    background: var(--pm-cream);
    padding: 4rem 0;
    margin-top: 0;
}
.about-story-title {
    font-family: 'Baloo Tamma 2', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--pm-ink);
}
.about-block h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pm-ink);
    margin-bottom: .85rem;
    margin-top: 1.75rem;
}
.about-block h4:first-child { margin-top: 0; }
.about-block p {
    font-size: .95rem;
    line-height: 1.85;
    color: #444;
    margin-bottom: 0;
}
.about-gallery {
    padding: 0 0 4rem;
    background: var(--pm-cream);
}

/* Bento grid — varied image sizes */
.about-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 140px;
    gap: 14px;
}
.bento-item {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(60, 30, 90, .1);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bento-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(60, 30, 90, .18);
}
.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desktop layout — different sizes per image */
.bento-1  { grid-column: span 7; grid-row: span 3; }
.bento-2  { grid-column: span 5; grid-row: span 2; }
.bento-3  { grid-column: span 5; grid-row: span 1; }
.bento-4  { grid-column: span 4; grid-row: span 2; }
.bento-5  { grid-column: span 4; grid-row: span 2; }
.bento-6  { grid-column: span 4; grid-row: span 2; }
.bento-7  { grid-column: span 6; grid-row: span 2; }
.bento-8  { grid-column: span 6; grid-row: span 2; }
.bento-9  { grid-column: span 4; grid-row: span 2; }
.bento-10 { grid-column: span 4; grid-row: span 2; }
.bento-11 { grid-column: span 4; grid-row: span 2; }

@media (max-width: 991px) {
    .about-bento {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 120px;
        gap: 10px;
    }
    .bento-1  { grid-column: span 6; grid-row: span 2; }
    .bento-2  { grid-column: span 3; grid-row: span 2; }
    .bento-3  { grid-column: span 3; grid-row: span 2; }
    .bento-4, .bento-5, .bento-6 { grid-column: span 2; grid-row: span 2; }
    .bento-7, .bento-8 { grid-column: span 3; grid-row: span 2; }
    .bento-9, .bento-10, .bento-11 { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 575px) {
    .about-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    .bento-item { grid-column: span 1 !important; grid-row: span 1 !important; }
    .bento-1, .bento-7 { grid-column: span 2 !important; grid-row: span 2 !important; }
}

@media (max-width: 767px) {
    .about-logo-circle { width: 160px; height: 160px; }
    .about-intro { padding-bottom: 2rem; }
    .about-story { padding-top: 3rem; }
}