/* =========================================================
   Best Ever Medical — Global Custom Styles
   Ported from the original static site (site-wide elements
   confirmed present across Home, About, Contact, Products,
   Product detail, Events & News, and event pages).
   Loaded via functions.php on top of Hello Elementor.
   ========================================================= */

:root {
    /* --- BEM Clinical Luxury Palette --- */
    --primary-dark: #0c4d29;
    --primary: #197b47;
    --bg-cream: #fdfcee;
    --white: #ffffff;
    --text-dark: #1e293b;
    --card-gold: #e6b022;
    --footer-bg: #062e17;

    /* --- Editorial Accents --- */
    --base-dark: #0D1F17;
    --ivory: #F5F0E8;
    --border-color: rgba(0,0,0,0.08);
}

/* --- Base + Film Grain Overlay --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    /* !important: Elementor's Kit global styles set body's background
       (usually white) with !important of their own, which otherwise
       wins regardless of stylesheet load order. Forcing it here is
       what actually makes --bg-cream show up instead of white. */
    background: var(--bg-cream) !important;
    color: var(--text-dark);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 90;
}

/* --- Force theme/Elementor page wrappers transparent ---
   Hello Elementor (and Elementor's Kit defaults) give the page/
   content wrapper its own opaque white background, which sits on
   top of and hides body's --bg-cream. These selectors only target
   the generic outer wrapper layers, not our own sections — sections
   like .sp-science, .sp-cta-section, and .mega-footer-block set
   their own background further down and are unaffected since their
   selectors are more specific and load after this. */
.site,
.site-content,
#content,
.elementor,
.elementor-section-wrap,
.elementor-location-single,
.elementor-widget-wrap,
.elementor-widget-container,
.e-con,
.e-con-inner {
    background-color: transparent !important;
}

/* --- Ethereal Preloader --- */
.preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: var(--bg-cream);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preloader-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.preloader-logo {
    height: 90px !important;
    width: auto !important;
    opacity: 0;
    transform: translateY(30px);
}

/* --- Header + Hero Reveal (starting state, animated in via GSAP) --- */
.hero-content h1,
.hero-content p,
.cta-group,
.hero-eyebrow {
    opacity: 0;
    transform: translateY(40px);
}
.header-wrapper {
    opacity: 0;
    transform: translateY(-20px);
}

/* --- Magnetic Trailing Cursor --- */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 24px; height: 24px;
    background-color: var(--card-gold);
    opacity: 0.8;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999999;
    transform: translate(-50%, -50%);
    transition:
        width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.3s ease,
        border 0.3s ease,
        opacity 0.3s ease;
    mix-blend-mode: normal;
    border: 0px solid transparent;
}
.custom-cursor.hover-active {
    width: 64px; height: 64px;
    background-color: rgba(230, 176, 34, 0.2);
    border: 2px solid var(--card-gold);
    opacity: 1;
}

/* Hide the custom cursor on touch devices — it's a desktop-only
   effect. Uses actual touch-capability detection (matching the
   static site), not a viewport-width breakpoint: max-width alone
   would also hide it on a narrow desktop browser window, which
   still has a real mouse. */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor { display: none !important; }
    * { cursor: auto !important; }
}

/* --- Header & Nav ---
   IMPORTANT: In the original static site, every non-homepage page
   (product, about, contact, events, etc.) hardcoded a permanently
   SOLID cream header with dark nav text — there is no dark hero
   behind it to justify a transparent overlay. ONLY index.html used
   the transparent-until-scrolled, white-text header, because its
   hero has a dark green background.

   The rules below restore that split: solid/dark-text is the BASE
   (default) state so every interior page is correct on load, and
   the transparent/white-text/scroll-reveal behaviour is scoped to
   body.bem-homepage only (see bem_add_homepage_body_class() in
   functions.php). Do NOT remove that scoping — it's the fix for
   the header/hero background mismatch on product pages. */
.header-wrapper {
    width: 100%; position: fixed; top: 0; left: 0; z-index: 100;
    background-color: rgba(253, 252, 238, 0.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
    box-sizing: border-box;
}
.floating-header {
    width: 100%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; padding: 20px 5vw; transition: padding 0.4s ease; box-sizing: border-box;
}
.header-wrapper.scrolled .floating-header { padding: 15px 5vw; }
.logo { display: flex; align-items: center; text-decoration: none; transition: opacity 0.3s ease; height: 45px; position: relative; z-index: 101; }
.logo:hover { opacity: 0.8; }
.brand-logo-img {
    height: 45px !important;
    width: auto !important;
    max-width: none;
    transform: scale(1.5); transform-origin: left center; filter: none; transition: filter 0.4s ease;
}

.nav-links { display: flex; gap: 35px; align-items: center; height: 100%; }
.nav-item { position: relative; height: 40px; display: flex; align-items: center; }
.nav-item > a { color: var(--text-dark); text-decoration: none; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; transition: color 0.4s ease; }
.nav-item > a::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -4px; left: 0; background-color: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease; }
.nav-item:hover > a::after { transform: scaleX(1); transform-origin: left; }
.nav-item:hover > a { color: var(--primary); opacity: 1; }
.nav-item > a svg { width: 12px; height: 12px; transition: transform 0.3s ease; stroke: currentColor; }
.nav-item:hover > a svg { transform: rotate(180deg); }

.mega-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(253, 252, 238, 0.98); backdrop-filter: blur(12px); border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05);
    padding: 15px; min-width: 240px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 5px;
}
.mega-menu::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; }
.nav-item:hover .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-link { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 6px; text-decoration: none; color: var(--text-dark); transition: background 0.2s ease; }
.mega-link:hover { background-color: rgba(0,0,0,0.03); }
.mega-link strong { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 2px; }
.mega-link span { font-size: 12px; color: #64748b; }

.header-btn {
    background: var(--base-dark); color: var(--white); border: 1px solid rgba(0,0,0,0.1); padding: 12px 28px;
    border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all 0.4s ease; display: inline-block;
}
.header-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.mobile-menu-btn {
    display: none; background: transparent; border: none; width: 40px; height: 40px; cursor: pointer; position: relative; z-index: 101;
}
.hamburger { width: 24px; height: 18px; position: relative; margin: 0 auto; }
.hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: var(--text-dark); border-radius: 2px; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); left: 0; }
.hamburger span:nth-child(1) { top: 0px; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }
body.menu-open .hamburger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* --- HOMEPAGE-ONLY: transparent overlay header that reveals a
   solid background on scroll. Scoped to body.bem-homepage because
   only the homepage hero is dark enough for white nav text to be
   readable before scrolling. See functions.php for the class. --- */
body.bem-homepage .header-wrapper {
    background-color: transparent; backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,0.05); box-shadow: none;
}
body.bem-homepage .header-wrapper.scrolled {
    background-color: rgba(253, 252, 238, 0.95); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
body.bem-homepage .brand-logo-img { filter: brightness(0) invert(1); }
body.bem-homepage .header-wrapper.scrolled .brand-logo-img,
body.bem-homepage.menu-open .brand-logo-img { filter: none; }

body.bem-homepage .nav-item > a { color: var(--white); }
body.bem-homepage .header-wrapper.scrolled .nav-item > a { color: var(--text-dark); }
body.bem-homepage .nav-item > a::after { background-color: var(--white); }
body.bem-homepage .header-wrapper.scrolled .nav-item > a::after { background-color: var(--primary); }
body.bem-homepage .nav-item:hover > a { opacity: 0.8; color: var(--white); }
body.bem-homepage .header-wrapper.scrolled .nav-item:hover > a { color: var(--primary); opacity: 1; }

body.bem-homepage .header-btn { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); }
body.bem-homepage .header-btn:hover { background: var(--white); color: var(--base-dark); border-color: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
body.bem-homepage .header-wrapper.scrolled .header-btn { background: var(--base-dark); color: var(--white); border: 1px solid rgba(0,0,0,0.1); }
body.bem-homepage .header-wrapper.scrolled .header-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

body.bem-homepage .hamburger span { background: var(--white); }
body.bem-homepage .header-wrapper.scrolled .hamburger span,
body.bem-homepage.menu-open .hamburger span { background: var(--text-dark); }

/* --- Mobile Responsive Nav (matches original breakpoint) --- */
@media (max-width: 1024px) {
    .mobile-menu-btn { display: block; }
    .header-btn { display: none; }
    .nav-links {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: var(--bg-cream);
        flex-direction: column; padding: 120px 5vw 40px 5vw; gap: 0;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        align-items: flex-start; justify-content: flex-start;
        overflow-y: auto; z-index: 100;
        box-sizing: border-box;
    }
    .nav-links.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .nav-item {
        width: 100%; height: auto; flex-direction: column; align-items: flex-start;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .nav-item > a {
        width: 100%; color: var(--text-dark) !important; font-family: 'Cormorant Garamond', serif; font-size: 28px; padding: 24px 0; justify-content: space-between;
        box-sizing: border-box;
    }
    .nav-item > a::after { display: none; }
    .nav-item > a svg { width: 24px; height: 24px; transition: transform 0.3s ease; }
    .nav-item.active > a svg { transform: rotate(180deg); color: var(--primary); }

    .mega-menu {
        position: static !important; transform: none !important; box-shadow: none !important; border: none !important; background: transparent !important; width: 100% !important;
        padding: 0 0 0 15px !important; display: flex !important; flex-direction: column !important; gap: 15px !important; max-height: 0 !important; opacity: 0 !important;
        visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, visibility 0.4s !important; box-sizing: border-box;
    }
    .mega-menu::before { display: none !important; }
    .nav-item.active .mega-menu { max-height: 600px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; padding-bottom: 24px !important; }
    .mega-link { padding: 0; }
    .mega-link strong { font-size: 18px; color: var(--text-dark); font-weight: 500; font-family: 'DM Sans', sans-serif; }
    .mega-link span { display: none; }
}

/* --- Shared "Section Eyebrow" label (small gold tag above a heading) ---
   Used by About's "Our Story" section and Home's About-teaser section. --- */
.section-eyebrow {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--card-gold);
    margin-bottom: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 15px;
}
.section-eyebrow::before { content: ''; display: inline-block; width: 40px; height: 1px; background-color: var(--card-gold); }

/* --- Shared Article Card (base) ---
   Used by the single Event/Article template's "Further Reading"
   grid (event.css) and the Events & News hub page's featured/regular
   grids (events-hub.css) — identical card anatomy, just a different
   image height and grid gap per context (kept in each page's own
   file since those two values genuinely differ there). --- */
.article-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.article-img-wrap { width: 100%; border-radius: 20px; overflow: hidden; position: relative; background: #e2e8f0; margin-bottom: 25px; transition: border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
/* !important on sizing: same reset-vs-plain-<img> collision hit
   repeatedly elsewhere in this build. */
.article-img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.article-card:hover .article-img-wrap { border-radius: 12px; }
.article-card:hover .article-img { transform: scale(1.05); }

.article-meta { display: flex; align-items: center; gap: 15px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #64748b; margin-bottom: 15px; }
.article-meta .cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--card-gold); }
.article-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 500; color: var(--text-dark); margin: 0 0 15px 0; letter-spacing: -0.01em; transition: color 0.3s ease; }
.article-card:hover .article-title { color: var(--primary-dark); }
.article-excerpt { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: #475569; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* .article-read-more only used by the hub page (its own static
   reference has it; the single-post "Further Reading" cards don't),
   kept here anyway since it's tightly coupled to the same card family. */
.article-read-more { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); transition: gap 0.3s ease; }
.article-read-more svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.3s ease; }
.article-card:hover .article-read-more { gap: 12px; }

/* --- Shared Certification Stats hub ---
   Used by both About's certification hub and the Homepage's
   certification section — identical markup/stats on both pages, so
   promoted here rather than duplicated. Rendered server-side by the
   shared bem_render_cert_stats() helper in functions.php; the
   counter/letter-animation JS lives in the "Certification Hub"
   section below (shared with about.js originally).
   Literal rgba() instead of var(--border-color): this codebase has
   repeatedly hit that custom property failing to resolve inside the
   Elementor shortcode widget's DOM subtree specifically. --- */
.certification-section { background-color: var(--bg-cream); padding: 80px 5vw; position: relative; z-index: 10; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); }
.cert-container { max-width: 1200px; margin: 0 auto; position: relative; }
.cert-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 40px; }
.stat-block { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 150px; }
.stat-title { font-size: clamp(16px, 2vw, 18px); font-weight: 700; color: var(--text-dark); margin-bottom: 15px; font-family: 'DM Sans', sans-serif; }
.stat-number { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 7vw, 90px); line-height: 1; font-weight: 500; color: var(--primary-dark); margin-bottom: 15px; letter-spacing: -0.02em; }
.stat-number.compliance-text { line-height: 0.9; }
.stat-desc { font-size: clamp(11px, 1.5vw, 13px); color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'DM Sans', sans-serif; }

@media (max-width: 768px) {
    .cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 15px; }
    .stat-block { flex: none; min-width: 0; width: 100%; }
    .stat-number { font-size: clamp(32px, 8vw, 50px); margin-bottom: 10px; }
    .stat-number.compliance-text { font-size: clamp(32px, 8vw, 50px); }
    .stat-title { font-size: 15px; margin-bottom: 10px; }
}

/* --- Shared "BEM Advantage" sticky-stack cards ---
   Used by both About and Home — identical heading, cards, and copy on
   both pages (both read the same about_advantage_cards ACF field via
   bem_render_why_bem_section() in functions.php, so there's one place
   to edit rather than two repeaters that could drift out of sync). --- */
.why-bem-section { background-color: var(--bg-cream); padding: 120px 5vw; position: relative; }
.why-bem-header { text-align: center; margin-bottom: 40px; }
.why-bem-header .trust-subtitle { font-size: 13px; text-transform: uppercase; letter-spacing: 3px; color: #64748b; font-weight: 600; margin-bottom: 10px; }
.why-bem-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 400; color: var(--text-dark); margin: 15px 0 0 0; letter-spacing: -0.02em; }
.sticky-cards-wrapper { position: relative; max-width: 550px; margin: 0 auto; padding-bottom: 25vh; }

.sticky-stack-card {
    position: sticky; min-height: 60vh; border-radius: 32px; padding: 50px 40px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.06); border: 1px solid rgba(255,255,255,0.1);
    transform-origin: bottom center; transform: rotate(0deg);
    /* Initial hidden state for the GSAP entrance bounce in custom.js
       (gsap.fromTo targets y/opacity/rotation — this just needs to
       start hidden/offset; the .fromTo call defines both ends). */
    opacity: 0;
}
.sc-editorial-header { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; border-bottom: 1px solid currentColor; padding-bottom: 30px; opacity: 0.9; }
.sc-num { font-family: 'DM Sans', sans-serif; font-size: clamp(80px, 10vw, 120px); line-height: 0.75; font-weight: 500; letter-spacing: -0.04em; }
.sc-icon svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 1; fill: none; }
.sc-body { width: 100%; }
.sc-body h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 5vw, 42px); font-weight: 500; margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -0.02em; }
.sc-body p { font-size: 18px; line-height: 1.6; margin: 0 auto; opacity: 0.85; color: inherit; max-width: 95%; }

#ssc-1 { top: 12vh; background-color: var(--white); color: var(--text-dark); z-index: 1; }
#ssc-2 { top: 16vh; background-color: #d4c8a8; color: var(--text-dark); z-index: 2; }
#ssc-3 { top: 20vh; background-color: var(--primary-dark); color: var(--white); z-index: 3; }

@media (max-width: 768px) {
    .sticky-stack-card { padding: 40px 30px; }
    .sc-editorial-header { margin-bottom: 30px; padding-bottom: 20px; }
    .sc-icon svg { width: 36px; height: 36px; }
    .sc-body p { font-size: 16px; }
}

/* --- Inner Page Hero (shared across Products, About, and any future
   interior page using [bem_..._page]-style shortcodes — see the
   "Shared Page-Header Components" note in functions.php for how new
   pages should reuse this instead of redefining it) --- */
.inner-hero {
    background-color: var(--primary-dark); min-height: 35vh; position: relative;
    /* margin-top:75px (the static site's own approach) assumes the
       fixed header is exactly 75px tall — any small mismatch leaves a
       visible gap of exposed page background between the header and
       this section. Generous padding-top instead means this section's
       own green background starts right at the top of the page
       (harmlessly hidden behind the fixed header) and only the
       CONTENT is pushed down far enough to clear the header safely,
       regardless of the header's exact rendered height. */
    padding: 140px 0 60px 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.inner-hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?q=80&w=2000&auto=format&fit=crop');
    background-size: cover; background-position: center; opacity: 0.12; mix-blend-mode: overlay; pointer-events: none; z-index: 1;
}
.inner-hero-container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 5vw; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 10; box-sizing: border-box; }
.inner-hero-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--card-gold); margin-bottom: 15px; font-weight: 600; display: flex; align-items: center; gap: 15px; opacity: 0; transform: translateY(20px); }
.inner-hero-eyebrow::before, .inner-hero-eyebrow::after { content: ''; display: block; width: 30px; height: 1px; background-color: var(--card-gold); opacity: 0.5; }
.inner-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; margin: 0 0 15px 0; font-weight: 400; letter-spacing: -0.02em; color: var(--white); opacity: 0; transform: translateY(20px); }
.inner-hero p { font-size: clamp(16px, 2vw, 18px); max-width: 600px; margin: 0; line-height: 1.6; color: rgba(255,255,255,0.85); font-weight: 300; opacity: 0; transform: translateY(20px); }

/* --- Shared Logo Marquee (structure + animation only) ---
   Used by About's brand-logo marquee (about.css) and Home's
   client/clinic-logo marquee (home.css). Promoted here since both
   pages used the identical .marquee-container/.marquee-track markup
   and @keyframes — each page keeps its own section wrapper and
   per-logo image class/sizing, and can override the scroll speed via
   `animation-duration` scoped to its own section class (see
   about.css's .brands-marquee-section .marquee-track and home.css's
   .trust-section .marquee-track). Rendered server-side by the shared
   bem_render_logo_marquee() helper in functions.php. --- */
.marquee-container {
    width: 100%; max-width: 1200px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: bem-scroll-marquee 30s linear infinite; align-items: center; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes bem-scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- "Book a Call" CTA (shared — same reasoning as .inner-hero above).
   Sits directly above .mega-footer-block; see the body-class rule
   further down for how the footer's own rounding gets neutralized on
   pages that use this. --- */
.cta-section {
    padding: 100px 5vw; text-align: center;
    /* Hardcoded rather than var(--footer-bg): this codebase has
       repeatedly hit CSS custom properties silently failing to
       resolve inside the Elementor shortcode widget's DOM subtree
       specifically — hardcoding sidesteps that regardless of cause. */
    background: #062e17;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-top-left-radius: 60px; border-top-right-radius: 60px;
    margin-top: -20px; position: relative; z-index: 95; overflow: hidden;
    box-sizing: border-box;
}
.cta-container { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.giant-cta-text { font-family: 'Cormorant Garamond', serif; font-size: clamp(50px, 14vw, 180px); line-height: 0.9; margin: 0 0 20px 0; text-align: center; font-weight: 300; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cta-subtitle { font-size: clamp(16px, 2vw, 18px); color: rgba(255,255,255,0.7); margin-bottom: 60px; text-align: center; max-width: 600px; }

.cta-form { width: 100%; max-width: 800px; display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; }
.form-group { flex: 1 1 calc(50% - 20px); display: flex; flex-direction: column; position: relative; }
.form-group.full { flex: 1 1 100%; }
.form-input {
    background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--white) !important; font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 15px 0;
    outline: none !important; box-shadow: none !important; border-radius: 0 !important;
    transition: border-color 0.3s ease; width: 100%; box-sizing: border-box;
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-input:focus { border-bottom-color: var(--card-gold) !important; }
.submit-wrapper { width: 100%; display: flex; justify-content: flex-end; margin-top: 20px; }
.btn-submit {
    width: 72px !important; height: 72px !important; border-radius: 50% !important; background: var(--white) !important;
    color: var(--primary-dark) !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; box-sizing: border-box !important;
    display: flex !important; align-items: center; justify-content: center; transition: background 0.3s; cursor: pointer;
}
.btn-submit svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }

@media (max-width: 1024px) {
    .cta-section { border-top-left-radius: 40px; border-top-right-radius: 40px; }
    .form-group { flex: 1 1 100%; }
}

/* --- Mega Footer Block --- */
.mega-footer-block {
    background-color: var(--footer-bg); border-top-left-radius: 60px; border-top-right-radius: 60px;
    padding-top: 120px; position: relative; z-index: 95; color: var(--white); margin-top: -20px; overflow: hidden;
}
/* On single product pages and any page using the shared .cta-section
   above (Products catalogue, About, and future pages — see
   bem_add_cta_footer_body_class() in functions.php), the CTA already
   rounds its own top corners and sits directly above this footer in
   the same color — so this footer's own rounding/overlap becomes a
   redundant, visible second corner right where they meet. Neutralized
   ONLY on those pages, leaving every other page (Home, plain content
   pages, etc.) with the footer's own rounding fully intact, since
   those don't have a CTA section immediately above the footer. */
body.single-product .mega-footer-block, body.single-event .mega-footer-block, body.bem-cta-footer-page .mega-footer-block {
    border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0;
    /* padding-top:120px existed to give the rounded corner room to
       breathe before content started. With the radius zeroed out
       above, that's now just dead space stacking on top of the CTA
       section's own bottom padding — .footer-section's own 80px top
       padding (unchanged, below) is enough spacing on its own. */
    padding-top: 0;
}
.footer-section { padding: 80px 5vw 40px 5vw; }
.footer-container { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; }
.footer-contact-info { display: flex; flex-direction: column; gap: 30px; }
.contact-block { display: flex; flex-direction: column; gap: 8px; }
.contact-block span:first-child { color: rgba(255, 255, 255, 0.5); font-size: 14px; }
/* !important on color: reset.css ships a default `a:hover, a:active {
   color: #336 }` rule. Since none of these three link styles redeclare
   `color` in their own :hover state (only opacity/background change),
   that reset rule ties on specificity and wins on hover/active by
   source order — turning white footer links/icons dark navy blue the
   moment you hover them. Confirmed via DevTools on staging (phone
   number link). Same fix applied to .footer-links and .social-link-l
   pre-emptively, since they share the identical vulnerable pattern. */
.contact-block a { color: var(--white) !important; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; transition: opacity 0.3s ease; }
.contact-block a:hover { opacity: 0.8; }
.footer-links-group { display: flex; gap: 100px; flex-wrap: wrap; }
.footer-col h4 { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin: 0 0 20px 0; font-weight: 400; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.footer-links a { color: var(--white) !important; text-decoration: none; font-size: 16px; font-weight: 500; transition: color 0.3s ease, opacity 0.3s ease; }
.footer-links a:hover { opacity: 0.7; }
.social-links-large { display: flex; gap: 15px; }
.social-link-l { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--white) !important; transition: background 0.3s ease, transform 0.3s; }
.social-link-l:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
.social-link-l svg { width: 20px; height: 20px; fill: currentColor; }
.footer-bottom { max-width: 1300px; margin: 100px auto 0 auto; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.bottom-brand { display: flex; flex-direction: column; gap: 15px; }
.bottom-brand p { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.bottom-legal { display: flex; gap: 30px; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.bottom-legal a { color: inherit; text-decoration: none; transition: color 0.3s; }
.bottom-legal a:hover { color: var(--white); }
.bottom-credit { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
/* New credit link (Newmen Web Solutions) — explicit color on both
   states from the start, same reset.css a:hover/a:active collision
   already fixed elsewhere in the footer (.contact-block a,
   .footer-links a, .social-link-l): without this, the link would pick
   up reset.css's default anchor color instead of blending into the
   surrounding grey text. */
.bottom-credit a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; }
.bottom-credit a:hover { color: var(--white) !important; }

/* Mobile responsive footer */
@media (max-width: 1024px) {
    .mega-footer-block { padding-top: 80px; border-top-left-radius: 40px; border-top-right-radius: 40px; }
    .footer-container { flex-direction: column; gap: 50px; }
    .footer-links-group { flex-direction: column; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; }
    .bottom-legal { flex-direction: column; gap: 15px; }
}

/* =========================================================
   NOTE: This file holds only the GLOBAL/site-wide styles
   (preloader, film grain, cursor, header reveal states).
   Page-specific animation styles (horizontal scroller,
   sticky stack cards, stat counters, etc.) belong in a
   separate stylesheet scoped to that page/template — add
   them as you build each template rather than dumping
   everything here.
   ========================================================= */