/* =========================================================
   Best Ever Medical — About Page
   Ported from the static site's about.html. Only loaded on whatever
   page contains [bem_about_page] (see functions.php). Depends on
   custom.css for :root variables, header, footer, and the shared
   .inner-hero / .cta-section components — only this page's own
   unique sections live here.

   Note: the static reference's CSS also defines an entire unused
   "dual clipped image + word reveal" system (.about-images,
   .about-img-wrap-1/2, .highlight-text) with no corresponding markup
   anywhere in the live page — dead code from an earlier design
   iteration. Not ported; see the docblock on bem_about_page_shortcode()
   in functions.php for the full explanation.
   ========================================================= */

/* --- Our Story --- */
.about-story { padding: 120px 5vw; background: var(--white); position: relative; z-index: 10; }
.story-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* .section-eyebrow moved to custom.css — shared with Home's About-teaser section. */
.about-story h2 {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.1;
    font-weight: 300; margin: 0 0 40px 0; color: var(--primary-dark);
}
.about-story h2 em { font-style: italic; }
.story-text { font-size: 18px; line-height: 1.6; color: #475569; font-weight: 300; }
.story-text p { margin: 0 0 20px 0; }
.story-text p:last-child { margin-bottom: 0; }

/* --- Brand logos (contained marquee) ---
   .marquee-container / .marquee-track / @keyframes bem-scroll-marquee
   moved to custom.css — shared with the Homepage's trust-marquee
   (see bem_render_logo_marquee() in functions.php). Only this page's
   own section wrapper, logo sizing, and scroll speed live here. */
.brands-marquee-section {
    background-color: var(--bg-cream); padding: 40px 0 80px 0;
    display: flex; flex-direction: column; align-items: center; overflow: hidden; position: relative; z-index: 5;
}
.brands-marquee-section .marquee-track { animation-duration: 25s; } /* faster than Home's — fewer logos in the loop */

/* !important on sizing: same reset-vs-plain-<img> collision hit
   repeatedly elsewhere in this build (FAQ toggle, catalogue preview
   images) — a theme/plugin reset targeting bare img elements was very
   likely winning over this unprotected rule, letting logos render at
   their natural (much larger) pixel size instead of the intended 50px. */
.brand-logo-img-tag {
    height: 50px !important; width: auto !important; max-width: 200px !important;
    margin: 0 50px; object-fit: contain !important; transition: transform 0.4s ease; cursor: pointer;
}
.brand-logo-img-tag:hover { transform: scale(1.08); }

/* --- Philosophy (dark green editorial) --- */
.mv-editorial-section { background-color: var(--primary-dark); color: var(--white); padding: 140px 5vw; position: relative; }
.mv-editorial-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
/* .mv-block's reveal uses a plain CSS transition triggered by a
   native IntersectionObserver in about.js (adding .in-view), NOT the
   shared GSAP/.rv-up ScrollTrigger system used elsewhere on the site.
   Confirmed via live console diagnostics that a ScrollTrigger for
   these specific elements could be created, then silently discarded
   by a later refresh() without ever firing (three different
   ScrollTrigger-parameter fixes did not resolve it) — this sidesteps
   that failure mode entirely by not depending on GSAP's pixel-position
   caching/refresh cycle at all. Everywhere else .rv-up is confirmed
   working correctly and is left untouched. */
.mv-block { max-width: 850px; opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.mv-block.in-view { opacity: 1; transform: translateY(0); }
.mv-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--card-gold); margin-bottom: 25px; display: flex; align-items: center; gap: 15px; }
.mv-eyebrow::before { content: ''; display: inline-block; width: 40px; height: 1px; background-color: var(--card-gold); opacity: 0.5; }
.mv-heading { font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 5vw, 64px); line-height: 1.1; font-weight: 300; margin: 0 0 20px 0; letter-spacing: -0.01em; color: var(--white); }
.mv-heading em { font-style: italic; color: var(--card-gold); font-weight: 400; }

/* .certification-section / .cert-container / .cert-grid / .stat-*
   moved to custom.css — shared with the Homepage's certification
   section (identical stats/markup on both pages). See
   bem_render_cert_stats() in functions.php. */

/* .why-bem-section / .why-bem-header / .sticky-cards-wrapper /
   .sticky-stack-card / .sc-* / #ssc-1/2/3 moved to custom.css —
   shared with the Homepage's identical BEM Advantage section (same
   copy, both read the same about_advantage_cards ACF field). See
   bem_render_why_bem_section() in functions.php. */

/* --- Mobile / tablet --- */
@media (max-width: 1024px) {
    .about-story { padding: 80px 5vw 40px 5vw; }
    .brands-marquee-section { padding: 20px 0 80px 0; }
    .mv-editorial-section { padding: 80px 5vw; }
    .mv-block { margin-left: 0 !important; margin-top: 60px !important; }
}

@media (max-width: 768px) {
    .mv-heading { font-size: clamp(32px, 8vw, 40px); }

    /* .cert-grid / .stat-block / .stat-number / .stat-title mobile
       rules moved to custom.css alongside the desktop cert-hub rules. */

    .brand-logo-img-tag { height: 35px; margin: 0 30px; }

    /* .sticky-stack-card / .sc-editorial-header / .sc-icon svg /
       .sc-body p mobile rules moved to custom.css alongside the
       desktop BEM Advantage rules. */
}