/* =============================================================
   about.css — About Us page · Mercury Integrated Manufacturing
   Brand: primary #454646 · secondary #b0ce5a · light #dcdfdf
          white #ffffff · black #0c0a0c
   Rule:  dark bg → light text · light bg → dark text
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
    --c-primary:   #454646;
    --c-secondary: #b0ce5a;
    --c-light:     #dcdfdf;
    --c-white:     #ffffff;
    --c-black:     #0c0a0c;
    --c-dark:      #454646;
    --c-green:     #b0ce5a;
}


/* ─────────────────────────────────────────────────────────────
   SHARED HELPERS
   ───────────────────────────────────────────────────────────── */
.ab-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-secondary);
    margin-bottom: 12px;
}

/* on dark backgrounds the eyebrow stays green — no change needed */

.ab-title {
    font-size: 36px;
    font-weight: 900 !important;
    color: var(--c-black) !important;   /* dark text on light bg */
    line-height: 1.18;
    margin-bottom: 16px;
}
.ab-title .hl          { color: var(--c-secondary) !important; }
.ab-title--light       { color: #ffffff !important; }  /* light text on dark bg */
.ab-title--center      { text-align: center; }

/* body copy — dark bg */
.ab-body--light {
    color: rgba(220, 223, 223, 0.75);
    font-size: 15px;
    line-height: 1.9;
}
/* body copy — light bg */
.ab-body--dark {
    color: var(--c-primary);
    font-size: 15px;
    line-height: 1.9;
}

.ab-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 52px;
}
.ab-section-header p {
    font-size: 16px;
    color: var(--c-primary);
    line-height: 1.85;
    margin-top: 12px;
    margin-bottom: 0;
}

/* link arrow */
.ab-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: gap 0.2s, border-color 0.2s;
}
.ab-arrow-link:hover {
    gap: 10px;
    border-color: var(--c-secondary);
    color: var(--c-secondary);
    text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   PAGE HERO  —  compact banner ~400px, split layout
   dark bg → all text is light
   ───────────────────────────────────────────────────────────── */
.ab-hero {
    position: relative;
    background: var(--c-black);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
}

/* Background image — right half bleeds in */
.ab-hero__img-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 1;
}

/* Gradient that fades image into the dark left side */
.ab-hero__fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--c-black)              0%,
        var(--c-black)             38%,
        rgba(12, 10, 12, 0.72)     55%,
        rgba(12, 10, 12, 0.25)     75%,
        transparent               100%
    );
    z-index: 1;
}

/* Bottom scrim */
.ab-hero__fade::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--c-black) 0%, transparent 100%);
}

/* Copy column */
.ab-hero__body {
    position: relative;
    z-index: 2;
    padding: 110px 0 70px;
}

/* Green dash before eyebrow */
.ab-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--c-secondary);
    margin-bottom: 18px;
}
.ab-hero__tag::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-secondary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Title — light text on dark — !important overrides base theme heading colors */
.ab-hero__title {
    font-size: 52px;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}
.ab-hero__title em {
    font-style: normal;
    color: var(--c-secondary) !important;
}

/* Short sub-line */
.ab-hero__sub {
    font-size: 15px;
    color: rgba(220, 223, 223, 0.65);
    line-height: 1.8;
    max-width: 480px;
    margin: 18px 0 28px;
}

/* Three topic chips */
.ab-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.ab-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    background: rgba(176, 206, 90, 0.10);
    border: 1px solid rgba(176, 206, 90, 0.30);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-secondary);  /* light text on dark bg */
}
.ab-hero__chip i { font-size: 13px; }

/* Breadcrumb — light text on dark */
.ab-breadcrumb {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ab-breadcrumb li {
    font-size: 12px;
    color: rgba(220, 223, 223, 0.40);
}
.ab-breadcrumb li a {
    color: rgba(220, 223, 223, 0.40);
    text-decoration: none;
    transition: color 0.2s;
}
.ab-breadcrumb li a:hover      { color: var(--c-secondary); }
.ab-breadcrumb li + li::before { content: ' › '; margin: 0 6px; }

/* Green left accent bar */
.ab-hero__accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--c-secondary) 30%,
        var(--c-secondary) 70%,
        transparent
    );
    z-index: 2;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 1 — WHO WE ARE  (white bg → dark text)
   ───────────────────────────────────────────────────────────── */
.ab-intro {
    background: var(--c-white);
    padding: 90px 0;
}

.ab-intro__img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(12, 10, 12, 0.13);
}
.ab-intro__img-wrap img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}
/* Green wash over the photo removed at client request — the photo now
   shows in its own colour. Rule kept (with no paint) so the layering
   contract around the years badge at z-index 2 stays documented. */
.ab-intro__img-wrap::after {
    content: none;
}

/* Floating badge — secondary bg, dark text */
.ab-intro__badge {
    position: absolute;
    bottom: 22px;
    right: 22px;
    background: var(--c-secondary);
    color: var(--c-black);          /* dark text on secondary (light) bg */
    padding: 16px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(176, 206, 90, 0.40);
    z-index: 2;
}
.ab-intro__badge__num {
    display: block;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--c-black);
}
.ab-intro__badge__text {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-top: 4px;
    color: var(--c-black);
}

/* Copy column — light bg */
.ab-intro__content {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Body copy on white bg → primary dark color */
.ab-intro__content p {
    font-size: 15px;
    color: var(--c-primary);
    line-height: 1.85;
    margin-bottom: 8px;
}

/* Checklist — light bg */
.ab-check-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
}
.ab-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-primary);        /* dark text on light bg */
    padding: 9px 0;
    border-bottom: 1px solid var(--c-light);
}
.ab-check-list li:last-child { border-bottom: none; }

.ab-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--c-secondary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ab-check::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--c-black);
    border-bottom: 2px solid var(--c-black);
    transform: rotate(40deg) translate(-1px, -1px);
}

.ab-intro__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 2 — MISSION & VISION  (dark bg → light text)
   ───────────────────────────────────────────────────────────── */
/* Mission and Vision cards, sitting on the dedicated About mission/vision
   photograph shot for exactly this section. */
.ab-mv {
    background:
        linear-gradient(
            rgba(12, 10, 12, 0.86),
            rgba(12, 10, 12, 0.86)
        ),
        url('../img/about/about_mission_vision.webp') center center / cover no-repeat,
        var(--c-black);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

/* Green background glow removed at client request — the section keeps its
   dark scrim over the photo, with no green cast. */
.ab-mv::before {
    content: none;
}

.ab-mv__header {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}
/* subtitle under heading on dark bg */
.ab-mv__header p {
    font-size: 15px;
    color: rgba(220, 223, 223, 0.65);
    line-height: 1.85;
    max-width: 560px;
    margin: 12px auto 0;
}

/* Cards — dark bg, light text — position:relative ensures z-index takes effect */
.ab-mv-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(176, 206, 90, 0.20);
    border-left: 4px solid var(--c-secondary);
    border-radius: 12px;
    padding: 44px 40px 40px;
    height: 100%;
    transition: background 0.28s, border-color 0.28s, box-shadow 0.28s;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.ab-mv-card:hover {
    background: rgba(176, 206, 90, 0.08);
    border-color: rgba(176, 206, 90, 0.45);
    border-left-color: var(--c-secondary);
    box-shadow: 0 8px 40px rgba(176, 206, 90, 0.12);
}

.ab-mv-card__icon {
    width: 52px;
    height: 52px;
    background: rgba(176, 206, 90, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--c-secondary);       /* secondary on dark */
    margin-bottom: 20px;
}

.ab-mv-card__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--c-secondary);       /* secondary on dark */
    margin-bottom: 10px;
}

.ab-mv-card__title {
    font-size: 26px;
    font-weight: 900 !important;
    color: #ffffff !important;       /* white on dark — !important beats base theme h3 */
    line-height: 1.2;
    margin-bottom: 16px;
}

.ab-mv-card__body {
    font-size: 15px;
    color: rgba(220, 223, 223, 0.85); /* light on dark — higher opacity for legibility */
    line-height: 1.9;
    margin: 0;
}
.ab-mv-card__body strong {
    color: var(--c-secondary);
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 3 — VALUES  (light bg → dark text)
   ───────────────────────────────────────────────────────────── */
.ab-values {
    background: var(--c-light);      /* #dcdfdf light bg */
    padding: 90px 0;
}

/* Section header on light bg */
.ab-values .ab-section-header p {
    color: var(--c-primary);         /* dark text on light bg */
}

.ab-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Cards — white on light bg */
.ab-val-card {
    background: var(--c-white);
    border: 1.5px solid rgba(69, 70, 70, 0.12);
    border-radius: 10px;
    padding: 32px 28px 28px;
    transition: all 0.24s ease;
    box-shadow: 0 2px 8px rgba(12, 10, 12, 0.04);
}
.ab-val-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-secondary);
    box-shadow: 0 12px 32px rgba(176, 206, 90, 0.16);
}

/* Icon — light bg */
.ab-val-card__icon {
    width: 50px;
    height: 50px;
    background: var(--c-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--c-primary);         /* dark icon on light bg */
    margin-bottom: 18px;
    transition: background 0.24s, color 0.24s;
}
.ab-val-card:hover .ab-val-card__icon {
    background: var(--c-secondary);
    color: var(--c-black);
}

.ab-val-card__num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-secondary);
    margin-bottom: 6px;
}

.ab-val-card__name {
    font-size: 17px;
    font-weight: 900 !important;
    color: var(--c-black) !important; /* dark text on light/white bg */
    margin-bottom: 10px;
    line-height: 1.25;
}

.ab-val-card__desc {
    font-size: 14px;
    color: var(--c-primary);         /* dark text on white bg */
    line-height: 1.80;
    margin: 0;
}


/* ─────────────────────────────────────────────────────────────
   STATS BAR  (primary bg → light text)
   ───────────────────────────────────────────────────────────── */
/* Years in business leads these figures, so the bar sits on the
   archive plant photo, matching the homepage stats bar. Washed in
   brand grey rather than black so it keeps reading as a light band
   between the sections either side of it. */
.ab-stats-bar {
    background:
        linear-gradient(
            rgba(69, 70, 70, 0.88),
            rgba(69, 70, 70, 0.88)
        ),
        url('../img/history/history_hero.webp') center center / cover no-repeat,
        var(--c-primary);    /* #454646 dark bg */
}
.ab-stats-bar__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}
.ab-stats-bar__divider {
    width: 1px;
    background: rgba(220, 223, 223, 0.15);
    margin: 20px 0;
    flex-shrink: 0;
}
.ab-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 32px 20px;
}
.ab-stat-item__num {
    font-size: 40px;
    font-weight: 900;
    color: var(--c-secondary);       /* secondary on primary dark bg */
    line-height: 1;
    letter-spacing: -0.02em;
}
.ab-stat-item__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 223, 223, 0.60); /* muted light on dark */
}


/* ─────────────────────────────────────────────────────────────
   CTA STRIP  (black bg → light text)
   ───────────────────────────────────────────────────────────── */
/* Same CTA artwork as the homepage strip and the interior pre-footer
   CTAs, so the call to action reads as one recurring element. */
.ab-cta-strip {
    background:
        linear-gradient(
            rgba(12, 10, 12, 0.86),
            rgba(12, 10, 12, 0.86)
        ),
        url('../img/backgrounds/cta-banner.webp') center center / cover no-repeat,
        var(--c-black);
    padding: 68px 0;
    position: relative;
    overflow: hidden;
}
/* green corner glow removed at client request */
.ab-cta-strip::after {
    content: none;
}
.ab-cta-strip__accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c-secondary);
}
.ab-cta-strip__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--c-secondary);       /* secondary on dark */
    margin-bottom: 8px;
}
.ab-cta-strip__title {
    font-size: 34px;
    font-weight: 900 !important;
    color: #ffffff !important;       /* white on dark */
    line-height: 1.2;
    margin: 0;
}
.ab-cta-strip__btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .ab-hero__title     { font-size: 44px; }
    .ab-title           { font-size: 30px; }
    .ab-mv-card         { padding: 32px 28px; }
}

@media (max-width: 991px) {
    .ab-hero            { min-height: auto; }
    .ab-hero__body      { padding: 110px 0 60px; }
    .ab-hero__img-bg    { width: 100%; opacity: 0.15; }
    .ab-hero__fade      { background: rgba(12, 10, 12, 0.80); }
    .ab-hero__title     { font-size: 38px; }
    .ab-hero__sub       { max-width: 100%; }

    .ab-intro                   { padding: 70px 0; }
    .ab-intro__img-wrap img     { height: 360px; }
    .ab-intro__content          { padding-left: 0; margin-top: 36px; }
    .ab-mv                      { padding: 70px 0; }
    .ab-mv-card                 { margin-bottom: 20px; }
    .ab-values                  { padding: 70px 0; }
    .ab-values-grid             { grid-template-columns: repeat(2, 1fr); }
    .ab-cta-strip               { padding: 56px 0; }
    .ab-cta-strip__title        { font-size: 26px; }
    .ab-cta-strip__btns         { justify-content: center; margin-top: 20px; }
}

@media (max-width: 767px) {
    .ab-hero__title             { font-size: 30px; }
    .ab-hero__body              { padding: 100px 0 56px; }
    .ab-hero__chips             { gap: 6px; }
    .ab-title                   { font-size: 24px; }
    .ab-values-grid             { grid-template-columns: 1fr; }
    .ab-stats-bar__inner        { flex-wrap: wrap; }
    .ab-stats-bar__divider      { display: none; }
    .ab-stat-item               { flex: 1 1 45%; border-bottom: 1px solid rgba(220, 223, 223, 0.10); }
    .ab-stat-item__num          { font-size: 30px; }
    .ab-intro__img-wrap img     { height: 260px; }
    .ab-cta-strip               { padding: 48px 0; }
    .ab-cta-strip__title        { font-size: 22px; }
    .ab-cta-strip__btns         { justify-content: center; }
}

@media (max-width: 480px) {
    .ab-hero__title             { font-size: 26px; }
    .ab-hero__chips             { display: none; }
    .ab-values-grid             { grid-template-columns: 1fr; }
}