/* ============================================================
   Homepage About — fluid refinement (not aggressive overrides)
   ============================================================ */

.about-section {
    padding-top: 0;
    padding-bottom: clamp(48px, 6vw, 72px);
}

/* Fluid scaling at all widths */
.about-container {
    gap: clamp(48px, 6vw, 80px);
    align-items: start;
}

.about-visual-side,
.about-content-side {
    min-height: clamp(560px, 72vh, 1200px);
}

.about-floating-visual {
    top: clamp(100px, 12vw, 140px);
    min-height: clamp(480px, 82vh, 100vh);
}

.about-floating-visual img {
    width: 100%;
    max-width: min(720px, 100%);
    height: auto;
    object-fit: contain;
    object-position: center;
}

.about-content-card {
    margin-top: clamp(48px, 8vw, 120px);
    padding: clamp(40px, 5vw, 60px);
}

/* Tablet stack — only when truly needed */
@media (max-width: 1024px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: clamp(56px, 7vw, 88px);
    }

    .about-visual-side,
    .about-content-side {
        min-height: auto;
    }

    .about-content-side {
        align-items: flex-start;
    }

    .about-floating-visual {
        position: relative;
        top: auto;
        min-height: auto;
        padding-block: clamp(20px, 4vw, 40px);
    }

    .about-floating-visual img {
        max-height: clamp(360px, 52vh, 540px);
        margin-inline: auto;
    }

    .about-content-card {
        margin-top: 0;
        width: 100%;
    }
}

/* Mobile — compact but luxurious */
@media (max-width: 768px) {
    .about-section {
        margin-top: clamp(-72px, -12vw, -40px);
    }

    .about-container {
        gap: clamp(48px, 9vw, 72px);
    }

    .about-floating-visual img {
        max-height: clamp(320px, 58vw, 460px);
    }

    .about-content-card {
        padding: clamp(32px, 6vw, 48px);
    }
}

@media (max-width: 576px) {
    .about-floating-visual img {
        max-height: clamp(300px, 64vw, 400px);
    }
}