/* ── BASE BLOCKS LAYER DEFINITIONS ───────────────────────────────────────── */
.about-intro {
    padding: var(--pad-section);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── LAYOUT MECHANICS GRID ───────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- THE REVERSE DIRECTION LOGIC ENGINE --- */
.about-intro.about-intro--reversed .about-grid > :first-child {
    order: 2;
}
.about-intro.about-intro--reversed .about-grid > :last-child {
    order: 1;
}
/* Flip badge positional balance on layout inversion structural moves */
.about-intro.about-intro--reversed .about-float {
    right: auto;
    left: -20px;
}

/* ── MEDIA HANDLERS ──────────────────────────────────────────────────────── */
.about-img-wrap {
    position: relative;
}
.about-img-wrap img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.about-img-wrap .img-placeholder {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, var(--fog, #F2EFE9), #d8dfe8);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

/* ── COMPONENT FLOAT BADGE ELEMENT ────────────────────────────────────────── */
.about-float {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--navy, #0B1B3D);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: left 0.3s ease, right 0.3s ease;
    z-index: 2;
}
.about-float .n {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--gold-light, #F1D28C);
    line-height: 1;
}
.about-float .l {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* ── TYPOGRAPHY RULES INTERFACE ──────────────────────────────────────────── */
.eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C4973A;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: #C4973A;
    flex-shrink: 0;
    border-radius: 2px;
}
.section-title {
    font-size: clamp(31px, 4.5vw, 48px);
    margin: 0;
    line-height: 1.2;
}
.gold-rule {
    width: 44px;
    height: 3px;
    background: #C4973A;
    border-radius: 2px;
    margin: 18px 0;
}
.about-text p {
    font-size: 16.5px;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* ── CONFIGURABLE DESIGN PRESSETS TEXT SWITCHES ──────────────────────────── */
.about-intro.dark-theme,
.about-intro.dark-theme .section-title,
.about-intro.dark-theme h2 {
    color: #0D1B2A !important; /* Forces dark charcoal slate */
}
.about-intro.dark-theme p,
.about-intro.dark-theme .about-p {
    color: #5A6A85 !important; /* Deep neutral grey readability body copy */
}

.about-intro.light-theme,
.about-intro.light-theme .section-title,
.about-intro.light-theme h2 {
    color: #FFFFFF !important; /* Pure clean high-contrast white */
}
.about-intro.light-theme p,
.about-intro.light-theme .about-p {
    color: rgba(255, 255, 255, 0.85) !important; /* Soft white body opacity protection */
}

/* ── MOBILE MEDIA ADAPTATION LAYER RESPONSIVENESS ────────────────────────── */
@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-intro.about-intro--reversed .about-grid > :first-child,
    .about-intro.about-intro--reversed .about-grid > :last-child {
        order: initial;
    }
    .about-intro.about-intro--reversed .about-float,
    .about-float {
        right: 0 !important;
        left: auto !important;
        bottom: -10px;
    }
}