/*
Theme Name:     MPE - Midwest Plastic Engineering (Divi 5 Child)
Theme URI:      https://www.midwestplastic.com
Description:    Custom Divi 5 child theme for Midwest Plastic Engineering, Inc. Includes an auto-generated site structure (all pages + dropdown navigation) and a professional industrial B2B design system driven by CSS variables. Requires the Divi theme (5.x) as its parent.
Author:         Built for Midwest Plastic Engineering
Author URI:     https://www.midwestplastic.com
Template:       Divi
Version:        1.0.0
Text Domain:    mpe-divi-child
*/

/* =====================================================================
   1. BRAND TOKENS  —  EDIT THESE WHEN YOU SHARE YOUR BRAND ASSETS
   ---------------------------------------------------------------------
   Every color, font, and key size below is a single source of truth.
   Change a value here and it updates everywhere on the site.
   The current values are professional PLACEHOLDERS for an industrial
   B2B manufacturer. Swap them for MPE's real brand once available.
   ===================================================================== */
:root {
    /* ---- Colors ---- */
    --mpe-primary:        #203870;  /* MPE logo blue (headers, nav) — sampled from logo */
    --mpe-primary-dark:   #16295a;  /* darker logo blue (footer) */
    --mpe-secondary:      #2f5aa0;  /* lighter companion blue */
    --mpe-accent:         #a6273b;  /* MPE logo red (buttons, links, accents) */
    --mpe-accent-dark:    #85202f;  /* darker logo red (hover) */
    --mpe-ink:            #1a2430;  /* body text */
    --mpe-muted:          #5c6b7a;  /* secondary text */
    --mpe-line:           #dfe4ea;  /* borders / dividers */
    --mpe-bg:             #ffffff;  /* page background */
    --mpe-bg-alt:         #f4f6f9;  /* alternating section background */
    --mpe-bg-tint:        #eef2f6;  /* light tint panels */
    --mpe-white:          #ffffff;

    /* ---- Typography ----
       Montserrat is used site-wide (a free, Google-hosted stand-in for
       Proxima Nova). Headings run heavy (800) with tight line-height; body
       is semibold-ish, echoing the Royal Technologies style. Loaded via
       functions.php (Google Fonts). */
    --mpe-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --mpe-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

    /* ---- Layout ---- */
    --mpe-maxw:           1180px;
    --mpe-radius:         6px;
    --mpe-shadow:         0 6px 24px rgba(16, 38, 63, 0.10);
    --mpe-shadow-sm:      0 2px 8px rgba(16, 38, 63, 0.08);
    --mpe-nav-h:          78px;
    --mpe-transition:     0.22s ease;
}

/* =====================================================================
   2. GLOBAL TYPOGRAPHY & BASE
   ===================================================================== */
body {
    font-family: var(--mpe-font-body);
    color: var(--mpe-ink);
    background: var(--mpe-bg);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Body copy runs slightly larger and semibold, echoing the reference site. */
p { font-weight: 500; }

h1, h2, h3, h4, h5, h6,
.mpe-h1, .mpe-h2, .mpe-h3 {
    font-family: var(--mpe-font-head);
    color: var(--mpe-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Type scale — heavy, tightly-set headings (Royal Technologies style). */
h1, .mpe-h1 { font-size: clamp(38px, 5.2vw, 58px); line-height: 1.02; }
h2, .mpe-h2 { font-size: clamp(28px, 3.4vw, 34px); line-height: 1.15; }
h3, .mpe-h3 { font-size: 22px; }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 17px; font-weight: 700; }
h6 { font-size: 15px; font-weight: 700; }

a { color: var(--mpe-secondary); transition: color var(--mpe-transition); }
a:hover { color: var(--mpe-accent); }

.mpe-wrap { max-width: var(--mpe-maxw); margin: 0 auto; padding: 0 24px; }

/* Utility buttons (usable in Divi code modules) */
.mpe-btn {
    display: inline-block;
    background: var(--mpe-accent);
    color: var(--mpe-white) !important;
    font-family: var(--mpe-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 30px;
    border-radius: var(--mpe-radius);
    text-decoration: none;
    transition: background var(--mpe-transition), transform var(--mpe-transition);
}
.mpe-btn:hover { background: var(--mpe-accent-dark); transform: translateY(-1px); color: var(--mpe-white) !important; }
.mpe-btn--ghost {
    background: transparent;
    border: 2px solid var(--mpe-white);
    color: var(--mpe-white) !important;
}
.mpe-btn--ghost:hover { background: var(--mpe-white); color: var(--mpe-primary) !important; }

/* =====================================================================
   3. TOP NAVIGATION  (works with Divi Menu module or default header)
   ---------------------------------------------------------------------
   Styles the WordPress menu assigned to the "primary" location, including
   multi-level dropdowns. Divi's Menu module outputs #et-top-navigation /
   .et-menu; the default header uses #top-menu. Both are targeted below.
   ===================================================================== */
#main-header,
.et-l--header {
    box-shadow: var(--mpe-shadow-sm);
}

#top-menu li a,
.et_pb_menu .et-menu > li > a,
.et-menu > li > a {
    font-family: var(--mpe-font-head);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mpe-primary) !important;
    padding-bottom: 22px;
}

#top-menu li a:hover,
.et-menu > li > a:hover {
    color: var(--mpe-accent) !important;
    opacity: 1;
}

/* Active / current page */
#top-menu li.current-menu-item > a,
.et-menu > li.current-menu-item > a {
    color: var(--mpe-accent) !important;
}

/* Dropdown panels */
#top-menu li ul.sub-menu,
.et-menu li ul.sub-menu,
.et-menu li .et_dropdown_container ul {
    border-top: 3px solid var(--mpe-accent);
    box-shadow: var(--mpe-shadow);
    background: var(--mpe-white);
    padding: 6px 0;
    min-width: 250px;
}

#top-menu li ul.sub-menu li a,
.et-menu li ul.sub-menu li a {
    font-size: 14px;
    letter-spacing: 0.4px;
    padding: 12px 22px;
    color: var(--mpe-ink) !important;
    border-bottom: 1px solid var(--mpe-line);
}
#top-menu li ul.sub-menu li:last-child a,
.et-menu li ul.sub-menu li:last-child a { border-bottom: 0; }

#top-menu li ul.sub-menu li a:hover,
.et-menu li ul.sub-menu li a:hover {
    background: var(--mpe-bg-tint);
    color: var(--mpe-accent) !important;
    padding-left: 26px;
}

/* Dropdown caret indicator on parent items */
.et-menu > li.menu-item-has-children > a:after,
#top-menu > li.menu-item-has-children > a:after {
    content: "\25BE";
    font-size: 11px;
    margin-left: 7px;
    opacity: 0.7;
}

/* "Request a Quote" nav item rendered as a solid CTA button.
   The generator adds the .mpe-nav-cta class to that menu item. */
#top-menu li.mpe-nav-cta > a,
.et-menu > li.mpe-nav-cta > a,
.et_pb_menu .et-menu > li.mpe-nav-cta > a,
li.mpe-nav-cta > a {
    background: var(--mpe-accent) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 10px 20px !important;
    margin-left: 10px;
    line-height: 1;
    opacity: 1 !important;
    transition: background var(--mpe-transition), color var(--mpe-transition);
}
#top-menu li.mpe-nav-cta > a:hover,
.et-menu > li.mpe-nav-cta > a:hover,
li.mpe-nav-cta > a:hover {
    background: var(--mpe-primary) !important;
    color: #fff !important;
}
/* No dropdown caret on the CTA (it has no children, but just in case) */
.et-menu > li.mpe-nav-cta > a:after,
#top-menu > li.mpe-nav-cta > a:after { content: none; }

/* =====================================================================
   4. FALLBACK CUSTOM HEADER  (used only if you DON'T build a Divi
   Theme Builder global header — see README. Hidden by default.)
   ===================================================================== */
.mpe-header { display: none; }              /* enable via body.mpe-custom-header */
body.mpe-custom-header .mpe-header {
    display: block;
    position: -webkit-sticky; position: sticky; top: 0; z-index: 999;
    background: var(--mpe-white);
    box-shadow: var(--mpe-shadow-sm);
}

/* ---- Full-width page rendering (safety net) ----
   The MPE pages use the "MPE Full Width" template (tpl-fullwidth.php), which
   already drops the sidebar and page title. These rules make the content span
   the full width even if Divi wraps it in its default containers, and hide any
   automatic page title, so the hero and sections render edge-to-edge. */
.page-template-tpl-fullwidth #main-content,
.page-template-tpl-fullwidth #et-main-area,
.page-template-tpl-fullwidth .container,
.page-template-tpl-fullwidth #content-area,
.page-template-tpl-fullwidth #left-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.page-template-tpl-fullwidth #sidebar { display: none !important; }
.page-template-tpl-fullwidth .mpe-page > .entry-title,
.page-template-tpl-fullwidth h1.entry-title,
.page-template-tpl-fullwidth .et_post_meta_wrapper { display: none !important; }
.page-template-tpl-fullwidth .mpe-page { width: 100%; max-width: 100%; }

/* ---- Header dropdown submenus: one item per row, each on a single line ----
   Divi's default dropdown is narrow, so longer items (e.g. "Value-Added
   Services") wrap to two lines. We let the dropdown grow to fit the longest
   label and stop wrapping — but we must also force each item onto its own
   full-width row, or the shorter items sit side-by-side once the box widens.
   Broad selectors cover Divi 4 and Divi 5 menu markup. */
#top-menu li ul,
#et-top-navigation .nav li ul,
#main-header .nav li ul,
.et-menu li ul,
.et_mobile_menu li ul {
    width: auto !important;
    min-width: 240px;
}
#top-menu li ul li,
#et-top-navigation .nav li ul li,
#main-header .nav li ul li,
.et-menu li ul li,
.et_mobile_menu li ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: both !important;
}
#top-menu li ul li a,
#et-top-navigation .nav li li a,
#main-header .nav li li a,
.et-menu li li a,
.et_mobile_menu li li a {
    white-space: nowrap !important;
    width: auto !important;
    display: block !important;
}

/* ---- Remove the header search icon ---- */
#et_top_search,
#et_search_icon,
li#et_search_icon,
.et_search_form_container,
.et_pb_menu__search-button,
.et-search-form { display: none !important; }

/* ---- Footer bottom bar ----
   Hide Divi's default bottom bar AND its footer-nav strip (credit + social
   icons + the duplicated Privacy/Cookie/Terms menu), then render our own
   single bar below: copyright on the left, legal links on the right. */
#footer-bottom,
#et-footer-nav,
.et-footer-nav,
.bottom-nav,
#main-footer #et-footer-nav,
#main-footer .bottom-nav { display: none !important; }

.mpe-footer-bar { background: var(--mpe-primary); color: rgba(255,255,255,0.82); font-size: 14px; }
.mpe-footer-bar__wrap {
    max-width: 1200px; margin: 0 auto; padding: 16px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 26px; flex-wrap: wrap;
}
.mpe-footer-bar__copy { color: rgba(255,255,255,0.82); }
.mpe-footer-bar__links { display: flex; gap: 24px; flex-wrap: wrap; }
.mpe-footer-bar__links a { color: rgba(255,255,255,0.82); text-decoration: none; }
.mpe-footer-bar__links a:hover { color: #fff; }
@media (max-width: 600px) {
    .mpe-footer-bar__wrap { flex-direction: column; text-align: center; gap: 10px; }
}
.mpe-header__inner {
    max-width: var(--mpe-maxw);
    margin: 0 auto;
    padding: 0 24px;
    height: var(--mpe-nav-h);
    display: flex; align-items: center; justify-content: space-between;
}
.mpe-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mpe-header__brand img { max-height: 52px; width: auto; }
.mpe-header__brand-text {
    font-family: var(--mpe-font-head);
    font-weight: 700; font-size: 20px; line-height: 1.05;
    color: var(--mpe-primary); text-transform: uppercase;
}
.mpe-header__brand-text small { display:block; font-size: 11px; color: var(--mpe-muted); letter-spacing: 2px; }

.mpe-nav { display: flex; align-items: center; }
.mpe-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.mpe-nav li { position: relative; }
.mpe-nav > ul > li > a {
    display: block; padding: 0 18px; line-height: var(--mpe-nav-h);
    font-family: var(--mpe-font-head); font-weight: 600; font-size: 16px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--mpe-primary); text-decoration: none;
}
.mpe-nav > ul > li > a:hover { color: var(--mpe-accent); }
.mpe-nav li.has-children > a:after { content: " \25BE"; font-size: 11px; opacity: 0.7; }

.mpe-nav ul ul {
    display: block; position: absolute; top: 100%; left: 0;
    min-width: 250px; background: var(--mpe-white);
    border-top: 3px solid var(--mpe-accent); box-shadow: var(--mpe-shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all var(--mpe-transition); padding: 6px 0; z-index: 1000;
}
.mpe-nav li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.mpe-nav ul ul li a {
    display: block; padding: 12px 22px; font-size: 14px;
    color: var(--mpe-ink); text-decoration: none; border-bottom: 1px solid var(--mpe-line);
}
.mpe-nav ul ul li:last-child a { border-bottom: 0; }
.mpe-nav ul ul li a:hover { background: var(--mpe-bg-tint); color: var(--mpe-accent); padding-left: 26px; }

.mpe-nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.mpe-nav__toggle span { display:block; width: 26px; height: 3px; background: var(--mpe-primary); margin: 5px 0; transition: var(--mpe-transition); }

/* =====================================================================
   5. REUSABLE CONTENT COMPONENTS  (for Divi code modules / page content)
   ===================================================================== */
.mpe-hero {
    background: linear-gradient(135deg, var(--mpe-primary) 0%, var(--mpe-primary-dark) 100%);
    color: var(--mpe-white);
    padding: 90px 0;
}
.mpe-hero h1, .mpe-hero h2 { color: var(--mpe-white); }
.mpe-hero p.lead { font-size: 20px; max-width: 720px; opacity: 0.92; }

/* Home hero with a photo area on the right */
.mpe-hero--split .mpe-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.mpe-hero__img { width: 100%; height: auto; display: block; border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.mpe-hero__media--fade { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.mpe-hero__media--fade .mpe-hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 0; box-shadow: none; opacity: 0; transition: opacity 1s ease; }
.mpe-hero__media--fade .mpe-hero__img.is-active { opacity: 1; }
@media (max-width: 820px) {
    .mpe-hero--split .mpe-wrap { grid-template-columns: 1fr; }
    .mpe-hero__media { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .mpe-hero__media--fade .mpe-hero__img { transition: none; }
}
.mpe-eyebrow {
    display: inline-block; font-family: var(--mpe-font-head);
    text-transform: uppercase; letter-spacing: 2px; font-size: 15px; font-weight: 700;
    color: var(--mpe-accent); margin-bottom: 12px;
}
/* On the dark hero, use a lighter red so the label reads clearly against navy. */
.mpe-hero .mpe-eyebrow { color: #f2929b; }
.mpe-section { padding: 72px 0; }
.mpe-section--alt { background: var(--mpe-bg-alt); }

.mpe-grid { display: grid; gap: 26px; }
.mpe-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mpe-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mpe-grid--4 { grid-template-columns: repeat(4, 1fr); }

.mpe-card {
    background: var(--mpe-white); border: 1px solid var(--mpe-line);
    border-radius: var(--mpe-radius); padding: 30px; box-shadow: var(--mpe-shadow-sm);
    transition: transform var(--mpe-transition), box-shadow var(--mpe-transition);
}
.mpe-card:hover { transform: translateY(-4px); box-shadow: var(--mpe-shadow); }
.mpe-card h3 { margin-top: 0; }
.mpe-card__icon { font-size: 30px; color: var(--mpe-accent); margin-bottom: 10px; }

.mpe-stat { text-align: center; }
.mpe-stat__num { font-family: var(--mpe-font-head); font-size: 46px; font-weight: 700; color: var(--mpe-accent); line-height: 1; }
.mpe-stat__label { font-size: 14px; color: var(--mpe-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }

/* ---- Image slideshow (lab stations, galleries) ---- */
.mpe-slider { position: relative; max-width: 620px; margin: 26px auto 0; overflow: hidden;
    border-radius: var(--mpe-radius); border: 1px solid var(--mpe-line); background: var(--mpe-primary-dark); }
.mpe-slider__track { display: flex; transition: transform 0.5s ease; }
.mpe-slide { flex: 0 0 100%; margin: 0; }
.mpe-slide img, .mpe-slide video { display: block; width: 100%; height: 600px; object-fit: contain; background: var(--mpe-primary-dark); }
.mpe-slide figcaption { padding: 14px 18px; background: var(--mpe-primary); color: #fff; font-size: 15px; text-align: center; font-weight: 500; }
.mpe-slider__arrow { position: absolute; top: 300px; transform: translateY(-50%);
    width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.92);
    color: var(--mpe-primary); font-size: 26px; line-height: 44px; text-align: center; cursor: pointer;
    box-shadow: var(--mpe-shadow-sm); transition: background var(--mpe-transition), color var(--mpe-transition); z-index: 2; }
.mpe-slider__arrow:hover { background: #fff; color: var(--mpe-accent); }
.mpe-slider__arrow--prev { left: 12px; }
.mpe-slider__arrow--next { right: 12px; }
.mpe-slider__dots { display: flex; justify-content: center; gap: 8px; padding: 12px; background: var(--mpe-primary-dark); }
.mpe-slider__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.4); transition: background var(--mpe-transition); }
.mpe-slider__dot.is-active { background: var(--mpe-accent); }
@media (max-width: 640px) {
    .mpe-slide img, .mpe-slide video { height: 440px; }
    .mpe-slider__arrow { top: 220px; }
}

/* ---- Auto cross-fade gallery (silent rotator, no arrows/dots/captions) ---- */
.mpe-galfade { position: relative; max-width: 620px; height: 600px; margin: 26px auto 0;
    overflow: hidden; border-radius: var(--mpe-radius); border: 1px solid var(--mpe-line);
    background: var(--mpe-primary-dark); }
.mpe-galfade .mpe-hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.mpe-galfade .mpe-hero__img.is-active { opacity: 1; }
@media (max-width: 640px) { .mpe-galfade { height: 440px; } }
@media (prefers-reduced-motion: reduce) {
    .mpe-galfade .mpe-hero__img { transition: none; }
}

/* ---- Legacy fallback ----
   Browsers without CSS `aspect-ratio` (e.g. Safari 14 and earlier) get an
   equivalent fixed box via the padding-ratio trick. Modern browsers skip this
   block entirely and use `aspect-ratio` from the rules above. */
@supports not (aspect-ratio: 1 / 1) {
    .mpe-hero__media--fade { height: 0; padding-top: 75%; }            /* 4:3 hero frame */
    .mpe-carousel figure { position: relative; height: 0; padding-top: 100%; } /* 1:1 part tiles */
    .mpe-carousel img { position: absolute; top: 0; left: 0; height: 100%; }
}

/* ---- Association member logos ---- */
.mpe-members { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 56px; margin-top: 26px; }
.mpe-members a { display: inline-flex; align-items: center; }
.mpe-members img { display: block; width: auto; transition: opacity var(--mpe-transition); }
.mpe-members a:hover img { opacity: 0.82; }
.mpe-members__mma  { height: 62px; }
.mpe-members__mapp { height: 50px; }
.mpe-members__chamber { height: 60px; }

/* ---- Formal Quality Policy statement (Quality page) ---- */
.mpe-policy {
    margin: 22px auto 0; max-width: 840px;
    font-family: var(--mpe-font-head); font-weight: 600;
    font-size: 21px; line-height: 1.6; color: var(--mpe-primary);
    border-top: 3px solid var(--mpe-accent);
    border-bottom: 3px solid var(--mpe-accent);
    padding: 28px 12px;
}
.mpe-policy p { margin: 0; }
@media (max-width: 640px) { .mpe-policy { font-size: 18px; padding: 22px 6px; } }
/* AIAG member logo, if re-added, must render at least 1 inch (96px) tall per AIAG policy. */
.mpe-members__aiag { height: 96px; }
@media (max-width: 700px) {
    .mpe-members { gap: 22px 30px; }
    .mpe-members__mma  { height: 54px; }
    .mpe-members__mapp { height: 44px; }
}

/* ---- Careers: lists, tier labels, testimonials ---- */
.mpe-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mpe-list li { padding: 9px 0; border-bottom: 1px solid var(--mpe-line); font-weight: 500; }
.mpe-list li:last-child { border-bottom: 0; }
.mpe-list li::before { content: "\203A"; color: var(--mpe-accent); font-weight: 700; margin-right: 10px; }

.mpe-tier__label {
    display: inline-block; font-family: var(--mpe-font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; color: var(--mpe-accent);
    margin-bottom: 2px;
}

.mpe-quote {
    background: var(--mpe-white); border: 1px solid var(--mpe-line);
    border-left: 4px solid var(--mpe-accent); border-radius: var(--mpe-radius);
    padding: 24px 26px; box-shadow: var(--mpe-shadow-sm);
}
.mpe-quote p { font-style: italic; margin: 0; }
.mpe-quote cite {
    display: block; margin-top: 14px; font-style: normal; font-weight: 700;
    font-family: var(--mpe-font-head); color: var(--mpe-primary);
}
.mpe-quote cite span { display: block; font-weight: 500; font-size: 13px; color: var(--mpe-muted); font-family: var(--mpe-font-body); }
.mpe-quote__person { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.mpe-quote__person cite { margin-top: 0; }
.mpe-quote__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.mpe-quote__avatar--ph { display: flex; align-items: center; justify-content: center;
    background: var(--mpe-bg-tint); border: 1px dashed var(--mpe-line);
    color: var(--mpe-primary); font-family: var(--mpe-font-head); font-weight: 700; font-size: 22px; }

/* ---- Featured testimonial (full-width spotlight for one longer quote) ---- */
.mpe-feature-quote {
    background: var(--mpe-white); border: 1px solid var(--mpe-line);
    border-left: 5px solid var(--mpe-accent); border-radius: var(--mpe-radius);
    padding: 34px 40px; box-shadow: var(--mpe-shadow-sm); margin: 0;
    max-width: none;
}
.mpe-feature-quote blockquote {
    margin: 0; position: relative; padding-top: 40px;
}
.mpe-feature-quote blockquote::before {
    content: "\201C"; position: absolute; top: -18px; left: -6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 88px; line-height: 1; color: var(--mpe-accent); opacity: 0.28;
}
.mpe-feature-quote blockquote p {
    font-style: italic; font-size: 18px; line-height: 1.7;
    color: var(--mpe-primary); margin: 0 0 18px;
}
.mpe-feature-quote blockquote p:last-child { margin-bottom: 0; }
.mpe-feature-quote figcaption { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mpe-line); }
.mpe-feature-quote figcaption .mpe-quote__avatar { width: 104px; height: 104px; }
.mpe-feature-quote figcaption .mpe-quote__avatar--ph { font-size: 32px; }
.mpe-feature-quote figcaption cite {
    display: block; font-style: normal; font-weight: 700;
    font-family: var(--mpe-font-head); color: var(--mpe-primary); font-size: 16px;
}
.mpe-feature-quote figcaption cite span {
    display: block; font-style: normal; font-weight: 500; font-size: 13px;
    color: var(--mpe-muted); font-family: var(--mpe-font-body); margin-top: 2px;
}
@media (max-width: 640px) {
    .mpe-feature-quote { padding: 26px 22px; }
    .mpe-feature-quote blockquote p { font-size: 16.5px; }
}

/* ---- Testimonial rotator (auto-fades between sets of 3 when >3 quotes) ---- */
.mpe-testimonials { position: relative; }
.mpe-testimonials__grid { transition: opacity 0.6s ease; }
.mpe-testimonials.is-fading .mpe-testimonials__grid { opacity: 0; }
.mpe-testimonials__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.mpe-testimonials__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
    cursor: pointer; background: rgba(32,56,112,0.22); transition: background var(--mpe-transition); }
.mpe-testimonials__dot.is-active { background: var(--mpe-accent); }
@media (prefers-reduced-motion: reduce) {
    .mpe-testimonials__grid { transition: none; }
}

/* ---- Contact / RFQ forms ---- */
.mpe-form { max-width: 760px; margin: 8px 0 0; }
.mpe-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .mpe-form__row { grid-template-columns: 1fr; } }
.mpe-form__field { display: flex; flex-direction: column; margin-top: 16px; }
.mpe-form__row .mpe-form__field { margin-top: 0; }
.mpe-form__row + .mpe-form__field,
.mpe-form__row + .mpe-form__row { margin-top: 16px; }
.mpe-form__label { font-family: var(--mpe-font-head); font-weight: 600; font-size: 14px;
    color: var(--mpe-primary); margin-bottom: 6px; }
.mpe-form__req { color: var(--mpe-accent); }
.mpe-form input[type="text"],
.mpe-form input[type="email"],
.mpe-form input[type="tel"],
.mpe-form textarea {
    width: 100%; font-family: var(--mpe-font-body); font-size: 16px; color: #1c2436;
    background: var(--mpe-white); border: 1px solid var(--mpe-line); border-radius: 8px;
    padding: 12px 14px; transition: border-color var(--mpe-transition), box-shadow var(--mpe-transition);
}
.mpe-form textarea { resize: vertical; }
.mpe-form input:focus, .mpe-form textarea:focus {
    outline: 0; border-color: var(--mpe-primary);
    box-shadow: 0 0 0 3px rgba(32,56,112,0.12);
}
.mpe-form__file input[type="file"] {
    font-family: var(--mpe-font-body); font-size: 14px; padding: 12px 14px;
    background: var(--mpe-bg-tint); border: 1px dashed var(--mpe-line); border-radius: 8px; width: 100%;
}
.mpe-form__hint { font-size: 13px; color: var(--mpe-muted); margin-top: 6px; }
.mpe-form__topic { margin: 0 0 4px; padding: 10px 14px; border-radius: 8px;
    background: var(--mpe-bg-tint); border-left: 4px solid var(--mpe-accent);
    font-size: 14px; color: #33405c; }
.mpe-form__topic strong { color: var(--mpe-primary); }
.mpe-form__bigfiles {
    margin-top: 18px; padding: 14px 16px; border-radius: 8px;
    background: var(--mpe-bg-tint); border-left: 4px solid var(--mpe-primary);
    font-size: 14px; color: #33405c;
}
.mpe-form .mpe-btn { margin-top: 22px; }
.mpe-form__fine { font-size: 13px; color: var(--mpe-muted); margin-top: 14px; }
.mpe-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mpe-form__alert { border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; font-weight: 600;
    font-family: var(--mpe-font-head); font-size: 15px; }
.mpe-form__alert--ok { background: #e8f5ec; border: 1px solid #b7e0c4; color: #1c6b34; }
.mpe-form__alert--err { background: #fdecee; border: 1px solid #f3c3c9; color: #96233a; }

/* ---- Values page (PLASTIC acrostic) ---- */
.mpe-word { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.mpe-word-tile { font-family: var(--mpe-font-head); font-weight: 800; font-size: 26px; color: #fff;
    background: var(--mpe-primary); width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; }
.mpe-word-tile:nth-child(even) { background: var(--mpe-accent); }
.mpe-values-list { max-width: 860px; margin: 34px auto 0; }
.mpe-value { display: flex; gap: 26px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--mpe-line); }
.mpe-value:last-child { border-bottom: 0; }
.mpe-value__letter { font-family: var(--mpe-font-head); font-weight: 800; font-size: 52px; line-height: 1; color: #fff;
    background: var(--mpe-primary); width: 88px; height: 88px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: var(--mpe-shadow-sm); }
.mpe-value:nth-child(even) .mpe-value__letter { background: var(--mpe-accent); }
.mpe-value__body h3 { margin: 6px 0 6px; font-size: 24px; }
.mpe-value__body p { margin: 0; font-size: 17px; color: #33405c; }
@media (max-width: 560px) {
    .mpe-value__letter { width: 64px; height: 64px; font-size: 38px; }
    .mpe-value { gap: 18px; }
}

/* ---- Parts carousel (shows several parts at a time, auto cross-fades) ---- */
.mpe-carousel { margin-top: 28px; }
.mpe-carousel__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transition: opacity 0.5s ease; }
.mpe-carousel.is-fading .mpe-carousel__track { opacity: 0; }
.mpe-carousel figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--mpe-line);
    background: #fff; box-shadow: var(--mpe-shadow-sm); }
.mpe-carousel img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mpe-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.mpe-carousel__arrow { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--mpe-primary); color: #fff; font-size: 22px; line-height: 1; transition: background var(--mpe-transition); }
.mpe-carousel__arrow:hover { background: var(--mpe-accent); }
.mpe-carousel__dots { display: flex; gap: 8px; }
.mpe-carousel__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(32,56,112,0.22); transition: background var(--mpe-transition); }
.mpe-carousel__dot.is-active { background: var(--mpe-accent); }
@media (max-width: 900px) { .mpe-carousel__track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mpe-carousel__track { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .mpe-carousel__track { transition: none; } }

/* ---- Figures & image placeholders ---- */
.mpe-figure { margin: 18px 0 0; }
.mpe-figure img, .mpe-figure svg, .mpe-figure video {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--mpe-line); border-radius: var(--mpe-radius); background: #fff;
}
.mpe-figure figcaption { font-size: 13px; color: var(--mpe-muted); margin-top: 8px; text-align: center; }
.mpe-figure__ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 220px; padding: 24px; text-align: center;
    border: 2px dashed var(--mpe-accent); border-radius: var(--mpe-radius);
    background: repeating-linear-gradient(45deg, #fbeff1, #fbeff1 10px, #f6e2e6 10px, #f6e2e6 20px);
    color: var(--mpe-accent-dark); font-size: 14px; font-weight: 600;
}
.mpe-figure__ph-icon { font-size: 34px; margin-bottom: 8px; }

/* ---- History narrative with photos (Our History) ---- */
.mpe-hist { max-width: 980px; margin: 30px auto 0; text-align: left; }
.mpe-hist-row { display: flex; gap: 30px; align-items: center; margin: 30px 0; }
.mpe-hist-row--rev { flex-direction: row-reverse; }
.mpe-hist-fig { margin: 0; flex: 0 0 360px; max-width: 360px; }
.mpe-hist-fig img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--mpe-line); box-shadow: 0 3px 12px rgba(0,0,0,0.15); }
.mpe-hist-fig figcaption { font-size: 13px; color: var(--mpe-muted); font-style: italic; margin-top: 8px; text-align: center; }
.mpe-hist-txt { flex: 1; }
.mpe-hist-txt p { margin: 0 0 14px; }
.mpe-hist-txt p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
    .mpe-hist-row, .mpe-hist-row--rev { flex-direction: column; }
    .mpe-hist-fig { flex: 0 0 auto; max-width: 100%; }
}

/* ---- Visual timeline (Our History) ---- */
.mpe-timeline { position: relative; max-width: 940px; margin: 46px auto 0; }
.mpe-timeline::before {
    content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%;
    width: 3px; background: var(--mpe-line); transform: translateX(-50%);
}
.mpe-tl-item { position: relative; width: 50%; padding: 12px 46px; box-sizing: border-box; }
.mpe-tl-item:nth-child(odd)  { left: 0; }
.mpe-tl-item:nth-child(even) { left: 50%; }
.mpe-tl-dot {
    position: absolute; top: 24px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--mpe-accent); border: 4px solid var(--mpe-white);
    box-shadow: 0 0 0 3px var(--mpe-accent); z-index: 2;
}
.mpe-tl-item:nth-child(odd)  .mpe-tl-dot { right: -10px; }
.mpe-tl-item:nth-child(even) .mpe-tl-dot { left: -10px; }
.mpe-tl-card {
    background: var(--mpe-white); border: 1px solid var(--mpe-line);
    border-radius: var(--mpe-radius); padding: 20px 24px; box-shadow: var(--mpe-shadow-sm);
    transition: transform var(--mpe-transition), box-shadow var(--mpe-transition);
}
.mpe-tl-card:hover { transform: translateY(-3px); box-shadow: var(--mpe-shadow); }
.mpe-tl-tag {
    display: inline-block; font-family: var(--mpe-font-head); text-transform: uppercase;
    letter-spacing: 2px; font-size: 11px; font-weight: 600; color: var(--mpe-secondary);
}
.mpe-tl-year { font-family: var(--mpe-font-head); font-size: 30px; font-weight: 700; color: var(--mpe-accent); line-height: 1; margin: 2px 0 8px; }
.mpe-tl-card h3 { margin: 0 0 8px; font-size: 19px; }
.mpe-tl-card p { margin: 0; color: var(--mpe-ink); font-size: 15px; }

@media (max-width: 820px) {
    .mpe-timeline::before { left: 22px; }
    .mpe-tl-item, .mpe-tl-item:nth-child(even) { width: 100%; left: 0; padding: 12px 12px 12px 60px; }
    .mpe-tl-item:nth-child(odd) .mpe-tl-dot,
    .mpe-tl-item:nth-child(even) .mpe-tl-dot { left: 13px; right: auto; }
}

.mpe-placeholder {
    background: repeating-linear-gradient(45deg, #fff7ef, #fff7ef 10px, #ffeede 10px, #ffeede 20px);
    border: 1px dashed var(--mpe-accent);
    color: var(--mpe-accent-dark);
    border-radius: var(--mpe-radius);
    padding: 6px 10px; font-size: 13px; font-weight: 600;
}

/* =====================================================================
   6. FOOTER
   ===================================================================== */
#main-footer, .et-l--footer { background: var(--mpe-primary-dark); }
#footer-widgets .footer-widget h4 { color: var(--mpe-white); font-family: var(--mpe-font-head); }
#main-footer a { color: #c3d0dd; }
#main-footer a:hover { color: var(--mpe-accent); }

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
    .mpe-grid--3, .mpe-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mpe-nav { position: fixed; top: var(--mpe-nav-h); right: 0; bottom: 0; width: 300px;
        background: var(--mpe-white); box-shadow: var(--mpe-shadow);
        transform: translateX(100%); transition: transform var(--mpe-transition); overflow-y: auto; }
    body.mpe-nav-open .mpe-nav { transform: translateX(0); }
    .mpe-nav ul { flex-direction: column; width: 100%; }
    .mpe-nav > ul > li > a { line-height: 54px; border-bottom: 1px solid var(--mpe-line); }
    .mpe-nav ul ul { position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; background: var(--mpe-bg-alt); display: none; }
    .mpe-nav li.has-children.open > ul { display: block; }
    .mpe-nav__toggle { display: block; }
}
@media (max-width: 640px) {
    .mpe-grid--2, .mpe-grid--3, .mpe-grid--4 { grid-template-columns: 1fr; }
    .mpe-hero { padding: 60px 0; }
    .mpe-hero p.lead { font-size: 18px; }
    .mpe-section { padding: 48px 0; }
}