/* ===== About Us Section ===== */
.about {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
}
.about-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #4a5568;
    text-align: center;
    margin-bottom: 3.5rem;
}
.about-heading .accent {
    color: #2d6a7a;
    font-weight: 800;
    font-style: italic;
}

/* Rotating word in heading — bouncy pop when text changes */
#about-heading-rotating-word {
    display: inline-block;
    vertical-align: baseline;
}
@keyframes about-heading-word-bounce {
    0% { transform: scale(1) translateY(0); }
    22% { transform: scale(1.14) translateY(-6px); }
    42% { transform: scale(0.94) translateY(3px); }
    62% { transform: scale(1.06) translateY(-2px); }
    82% { transform: scale(0.98) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}
#about-heading-rotating-word.is-word-bouncing {
    animation: about-heading-word-bounce 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    #about-heading-rotating-word.is-word-bouncing {
        animation: none;
    }
}
.about-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}
.about-left, .about-right {
    flex: 1;
}
.about-block {
    margin-bottom: 2rem;
}
.about-block h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    font-style: italic;
    color: #2d6a7a;
    margin-bottom: 0.6rem;
}
.about-block p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #5a6577;
}
.about-right h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #2d6a7a;
    margin-bottom: 1rem;
}
.about-right h3 strong {
    font-weight: 800;
    color: #1a2744;
}
.about-right p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #5a6577;
}
.about-right-copy {
    text-align: justify;
}
.about-right-copy p + p {
    margin-top: 1rem;
}

/* Slide in when About section enters viewport (repeats when you scroll away & back — tied to .is-section-visible) */
#about.section-viewport-fade .about-left .about-block {
    opacity: 0;
    transform: translateX(-52px);
    transition:
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.05s ease;
}
#about.section-viewport-fade .about-left .about-block:nth-child(1) { transition-delay: 0s; }
#about.section-viewport-fade .about-left .about-block:nth-child(2) { transition-delay: 0.1s; }
#about.section-viewport-fade .about-left .about-block:nth-child(3) { transition-delay: 0.2s; }

#about.section-viewport-fade.is-section-visible .about-left .about-block {
    opacity: 1;
    transform: translateX(0);
}

#about.section-viewport-fade .about-right {
    opacity: 0;
    transform: translateX(52px);
    transition:
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.05s ease;
    transition-delay: 0.12s;
}
#about.section-viewport-fade.is-section-visible .about-right {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    #about.section-viewport-fade .about-left .about-block,
    #about.section-viewport-fade .about-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Responsive: About ===== */
@media (min-width: 768px) {
    .about-content { flex-direction: row; gap: 4rem; }
    .about-heading { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
    .about { padding: 5rem 3rem 6rem; }
}