/* ==========================================================================
   MONÈRA CONSULTING — ABOUT US PAGE
   All tokens resolved from theme.css (:root variables loaded via _Layout).
   Depends on: theme.css → --gold-accent, --heading-font, --body-font,
               --text-dark, --muted-text, --border-light, --bg-icon
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE WRAPPER
   -------------------------------------------------------------------------- */
.about-page {
    background : #ffffff;
    padding    : 80px 0 110px;
}

.about-container {
    max-width : 1140px;
}

/* --------------------------------------------------------------------------
   SHARED — GOLD DIVIDER
   Reused across every section: short gold rule + small dot
   -------------------------------------------------------------------------- */
.about-divider {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    margin-bottom : 24px;
}

.about-divider--sm {
    margin-bottom : 14px;
}

.about-divider--value {
    margin-bottom : 12px;
}

.about-divider-line {
    display    : block;
    width      : 56px;
    height     : 1.5px;
    background : var(--gold-accent);
}

.about-divider-dot {
    display       : block;
    width         : 5px;
    height        : 5px;
    border-radius : 50%;
    background    : var(--gold-accent);
}

/* --------------------------------------------------------------------------
   SHARED — ICON WRAPPER  (outlined circle, warm fill)
   -------------------------------------------------------------------------- */
.about-icon-wrapper {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    width           : 52px;
    height          : 52px;
    min-width       : 52px;
    border-radius   : 50%;
    border          : 1px solid var(--border-light);
    background      : var(--bg-icon);
    margin-bottom   : 18px;
}

.about-icon-wrapper i {
    font-size : 20px;
    color     : var(--gold-accent);
}

/* Large icon variant — leadership section */
.about-icon-wrapper--lg {
    width         : 68px;
    height        : 68px;
    min-width     : 68px;
    margin-bottom : 0;
}

.about-icon-wrapper--lg i {
    font-size : 26px;
}

/* --------------------------------------------------------------------------
   SHARED — BODY TEXT
   -------------------------------------------------------------------------- */
.about-body-text {
    font-family : var(--body-font);
    font-size   : 13.5px;
    font-weight : 400;
    color       : var(--muted-text);
    line-height : 1.78;
    margin      : 0;
}

.about-body-text--sm {
    font-size : 13px;
}

/* --------------------------------------------------------------------------
   SHARED — SECTION HEADING  e.g. "OUR CORE VALUES"
   -------------------------------------------------------------------------- */
.about-section-heading {
    font-family    : var(--body-font);
    font-size      : 13px;
    font-weight    : 700;
    letter-spacing : 0.16em;
    text-transform : uppercase;
    color          : var(--text-dark);
    margin-bottom  : 10px;
}

/* --------------------------------------------------------------------------
   SHARED — SECTION SPACING
   -------------------------------------------------------------------------- */
.about-section {
    margin-bottom : 60px;
}

/* --------------------------------------------------------------------------
   1. INTRO SECTION
   Heading is full-width; body text is constrained.
   The bottom padding creates the whitespace before the next section.
   -------------------------------------------------------------------------- */
.about-intro {
    padding-bottom : 56px;
    border-bottom  : 1px solid var(--border-light);
    margin-bottom  : 60px;
}

/* Large display heading — free to span the full container */
.about-main-title {
    font-family    : var(--heading-font);
    font-size      : clamp(44px, 7.5vw, 84px);
    font-weight    : 600;
    letter-spacing : -2px;
    color          : var(--text-dark);
    line-height    : 1;
    text-transform : uppercase;
    margin-bottom  : 24px;
}

/* Narrow intro paragraph — left-anchored under the heading */
.about-intro-text {
    font-family   : var(--body-font);
    font-size     : 15px;
    font-weight   : 400;
    color         : var(--text-dark);
    line-height   : 1.78;
    max-width     : 580px;
    margin-bottom : 0;
}

/* --------------------------------------------------------------------------
   2. MISSION & VISION
   Full border wraps both columns; a vertical rule divides them.
   -------------------------------------------------------------------------- */
.mission-vision-section {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
    overflow      : hidden;   /* keeps child borders inside the radius */
}

.mv-block {
    padding : 40px 44px;
    height  : 100%;
}

/* Vertical divider — right-hand border on the left column only */
.mv-col--left {
    border-right : 1px solid var(--border-light);
}

.mv-title {
    font-family    : var(--body-font);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--text-dark);
    margin-bottom  : 8px;
}

/* --------------------------------------------------------------------------
   3. LEADERSHIP EXPERIENCE
   Bordered box; icon sits to the left of the content.
   -------------------------------------------------------------------------- */
.leadership-section {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
}

.leadership-inner {
    display     : flex;
    align-items : flex-start;
    gap         : 36px;
    padding     : 44px 52px;
}

.leadership-content {
    flex : 1;
}

.leadership-title {
    font-family    : var(--body-font);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--text-dark);
    margin-bottom  : 8px;
}

/* --------------------------------------------------------------------------
   4. CORE VALUES GRID
   Four columns on desktop; borders separate them without an outer wrapper.
   border-top  on every card  → horizontal separator.
   border-right selectively   → vertical separator between columns.
   -------------------------------------------------------------------------- */
.value-card {
    padding    : 32px 28px;
    border-top : 1px solid var(--border-light);
    height     : 100%;
}

.value-title {
    font-family    : var(--body-font);
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--text-dark);
    margin-bottom  : 6px;
}

/* sm (576 – 991px) → 2 columns: odd card in each row gets right border */
@media (min-width: 576px) and (max-width: 991.98px) {
    .value-col:nth-child(odd) .value-card {
        border-right : 1px solid var(--border-light);
    }
}

/* lg (992px+) → 4 columns: first three cards get right border */
@media (min-width: 992px) {
    .value-col:not(:last-child) .value-card {
        border-right : 1px solid var(--border-light);
    }
}

/* --------------------------------------------------------------------------
   5. EXPERTISE AREAS
   Two Bootstrap columns; every item has a top border as a separator.
   -------------------------------------------------------------------------- */
.expertise-item {
    display     : flex;
    align-items : center;
    gap         : 14px;
    font-family : var(--body-font);
    font-size   : 13.5px;
    font-weight : 400;
    color       : var(--text-dark);
    padding     : 16px 0;
    border-top  : 1px solid var(--border-light);
}

.expertise-item i {
    font-size   : 16px;
    color       : var(--gold-accent);
    flex-shrink : 0;
}

/* Right column: editorial left indent matching the grid gutter feel */
@media (min-width: 768px) {
    .expertise-row .col-md-6:last-child .expertise-item {
        padding-left : 40px;
    }
}

/* --------------------------------------------------------------------------
   6. STATEMENT BLOCK
   Centered bordered box; quote icon flanked by gold rules; large heading text.
   -------------------------------------------------------------------------- */
.statement-block {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
    padding       : 56px 48px;
    text-align    : center;
}

/* ── flanking quote rule + icon ── */
.statement-header {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 14px;
    margin-bottom   : 28px;
}

.statement-header i {
    font-size : 26px;
    color     : var(--gold-accent);
}

.statement-rule {
    display    : block;
    width      : 48px;
    height     : 1.5px;
    background : var(--gold-accent);
}

/* ── statement body ── */
.statement-text {
    font-family    : var(--heading-font);
    font-size      : clamp(28px, 4.5vw, 48px);
    font-weight    : 600;
    color          : var(--text-dark);
    text-transform : uppercase;
    letter-spacing : 0.02em;
    line-height    : 1.55;
    border         : none;
    padding        : 0;
    margin         : 0;
}

/* Each phrase forced to its own line */
.statement-line-text {
    display : block;
}

/* Trailing gold dot */
.statement-footer-dot {
    width         : 5px;
    height        : 5px;
    border-radius : 50%;
    background    : var(--gold-accent);
    margin        : 28px auto 0;
}

/* --------------------------------------------------------------------------
   7. CONTACT CTA BOX
   Bordered box; three logical zones: intro / contact details / button.
   -------------------------------------------------------------------------- */
.cta-box {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
    padding       : 40px 44px;
}

/* Headset icon aligned with the top of the copy block */
.cta-headset-icon {
    margin-top    : 4px;
    margin-bottom : 0;
}

.cta-heading {
    font-family    : var(--body-font);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--text-dark);
    margin-bottom  : 8px;
}

.cta-tagline {
    font-family : var(--body-font);
    font-size   : 13px;
    color       : var(--muted-text);
    line-height : 1.65;
    margin      : 0;
}

/* Contact rows */
.cta-contact {
    display        : flex;
    flex-direction : column;
    gap            : 18px;
}

.cta-contact-item {
    display     : flex;
    align-items : flex-start;
    gap         : 12px;
}

.cta-contact-item > i {
    font-size   : 15px;
    color       : var(--gold-accent);
    margin-top  : 3px;
    flex-shrink : 0;
}

.cta-contact-label {
    display        : block;
    font-family    : var(--body-font);
    font-size      : 11px;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : var(--muted-text);
    margin-bottom  : 2px;
}

.cta-contact-value {
    display         : block;
    font-family     : var(--body-font);
    font-size       : 13.5px;
    color           : var(--text-dark);
    text-decoration : none;
    transition      : color 0.2s ease;
}

.cta-contact-value:hover {
    color : var(--gold-accent);
}

/* Outlined gold CTA button */
.btn-cta-outline {
    display         : inline-flex;
    align-items     : center;
    border          : 1px solid var(--gold-accent);
    color           : var(--gold-accent);
    background      : transparent;
    font-family     : var(--body-font);
    font-size       : 12px;
    font-weight     : 600;
    letter-spacing  : 0.1em;
    text-transform  : uppercase;
    padding         : 14px 26px;
    border-radius   : 6px;
    text-decoration : none;
    white-space     : nowrap;
    transition      : background 0.25s ease, color 0.25s ease;
}

.btn-cta-outline:hover {
    background : var(--gold-accent);
    color      : #ffffff;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet  (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .about-page {
        padding : 60px 0 80px;
    }

    .leadership-inner {
        gap     : 28px;
        padding : 36px 40px;
    }

    .statement-block {
        padding : 44px 36px;
    }

    .cta-box {
        padding : 32px 36px;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile  (≤ 767px → single column)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .about-page {
        padding : 52px 0 72px;
    }

    .about-intro {
        padding-bottom : 40px;
        margin-bottom  : 48px;
    }

    .mv-block {
        padding : 28px 28px;
    }

    /* Flip mission/vision vertical divider to a bottom border on mobile */
    .mv-col--left {
        border-right  : none;
        border-bottom : 1px solid var(--border-light);
    }

    /* Stack leadership icon above content */
    .leadership-inner {
        flex-direction : column;
        gap            : 20px;
        padding        : 28px 28px;
    }

    .about-icon-wrapper--lg {
        margin-bottom : 0;
    }

    /* Remove right column indent when stacked */
    .expertise-row .col-md-6:last-child .expertise-item {
        padding-left : 0;
    }

    .statement-block {
        padding : 36px 28px;
    }

    .cta-box {
        padding : 28px 24px;
    }

    .btn-cta-outline {
        width           : 100%;
        justify-content : center;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Small mobile  (≤ 575px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .about-page {
        padding : 40px 0 60px;
    }

    .about-main-title {
        letter-spacing : -1px;
        margin-bottom  : 20px;
    }

    .about-icon-wrapper {
        width     : 46px;
        height    : 46px;
        min-width : 46px;
    }

    .about-icon-wrapper i {
        font-size : 17px;
    }

    .mv-block {
        padding : 24px 20px;
    }

    .leadership-inner {
        padding : 24px 20px;
    }

    .value-card {
        padding : 24px 20px;
    }

    .statement-block {
        padding : 28px 20px;
    }

    .cta-box {
        padding : 24px 20px;
    }
}