/* =========================================================
   ELDER LABORATORIES — ABOUT PAGE LUXE LAYER
   Load AFTER about.css. Markup structure is unchanged.
   Palette: navy #0a1b33 / brand #234E86 / blue #0d4f8b / gold #c9a24b
   ========================================================= */

:root {
    --ab-navy: #0a1b33;
    --ab-brand: #234e86;
    --ab-gold: #c9a24b;
    --ab-gold-soft: #e8cf8e;
    --ab-ease: cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================
   HERO
   ========================================================= */
.clsAboutHero { background: #072a4d !important; }

.clsAboutHeroOverlay {
    background: linear-gradient(95deg,
        rgba(6,28,56,.96) 0%, rgba(10,45,86,.88) 32%,
        rgba(13,79,139,.52) 66%, rgba(13,79,139,.22) 100%) !important;
}

/* replace the old circle outlines with the molecular illustration */
.clsAboutHero::before { display: none !important; }
.clsAboutHero::after {
    content: "" !important; position: absolute !important;
    top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
    width: 55% !important; height: 100% !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: url("/images/about/about-molecule.svg") right 4% center / contain no-repeat !important;
    opacity: .9; z-index: 2; pointer-events: none;
    animation: abFloat 9s ease-in-out infinite !important;
}
@keyframes abFloat { 50% { transform: translateY(-12px); } }

.clsAboutHeroDecor { display: none; }

.clsAboutEyebrow { color: var(--ab-gold-soft) !important; letter-spacing: 3px; }
.clsAboutEyebrow::before { background: var(--ab-gold) !important; width: 26px !important; }

.clsAboutTitle { font-size: clamp(44px, 5vw, 68px) !important; letter-spacing: -1px !important; }
.clsAboutTitle::after {                       /* hand-drawn gold underline */
    content: ""; display: block; width: 190px; height: 14px; margin-top: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14'%3E%3Cpath d='M3 9 C35 2 62 12 95 6 S160 3 187 8' fill='none' stroke='%23c9a24b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat / 100% 100%;
    animation: abDraw 1.2s .5s var(--ab-ease) both;
}
@keyframes abDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.clsAboutHeroSubtitle { font-size: 19px; letter-spacing: .3px; }

/* =========================================================
   MAIN CANVAS — calm, with a fine dotted grid
   ========================================================= */
.clsAboutMain {
    background-color: #f7f9fd !important;
    background-image: radial-gradient(rgba(35,78,134,.08) 1px, transparent 1px) !important;
    background-size: 26px 26px !important;
    padding-top: 30px !important;
}
.clsAboutMain::before {
    background:
        radial-gradient(700px 420px at 92% 6%, rgba(20,123,193,.09), transparent 70%),
        radial-gradient(600px 420px at 0% 72%, rgba(201,162,75,.08), transparent 70%) !important;
    animation: none !important;
}
.clsAboutLiquidShape { opacity: .06 !important; }
.clsAboutAbstract { opacity: .5; }

/* the mouse-ripple gimmick is dropped for a quieter, premium feel */
.water-drop-container, .ripple-container { display: none !important; }

/* =========================================================
   INTRO — editorial two-column
   ========================================================= */
.clsAboutSidebarIntro {
    max-width: none !important; padding: 56px 0 40px !important;
    display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 70px; row-gap: 8px; align-items: start;
}
.clsAboutSidebarLabel {
    grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 14px;
    color: var(--ab-brand) !important; letter-spacing: 3px !important;
}
.clsAboutSidebarLabel::before { content: ""; width: 34px; height: 1px; background: var(--ab-gold); }
.clsAboutSidebarIntro h2 {
    grid-column: 1; grid-row: 2 / span 2;
    font-size: clamp(36px, 4vw, 52px) !important; line-height: 1.12 !important; color: var(--ab-navy) !important;
}
.clsAboutSidebarIntro h2 span {
    color: transparent !important;
    background: linear-gradient(100deg, #147bc1, #234e86 60%, #b98a2c);
    -webkit-background-clip: text; background-clip: text;
}
.clsAboutSidebarIntro p {
    grid-column: 2; grid-row: 2; margin: 6px 0 0 !important; max-width: none !important;
    font-size: 16px !important; color: #5b7088 !important; padding-left: 22px; border-left: 2px solid var(--ab-gold);
}
.clsAboutMiniPoints { grid-column: 2; grid-row: 3; margin-top: 4px !important; gap: 10px !important; }
.clsAboutMiniPoints span {
    padding: 9px 16px; background: #fff; border: 1px solid rgba(35,78,134,.12);
    border-radius: 999px; box-shadow: 0 6px 16px -10px rgba(10,27,51,.3);
}
.clsAboutMiniPoints i { color: var(--ab-gold) !important; }

/* =========================================================
   WHO WE ARE — text
   ========================================================= */
.clsWhoWeAreContent { margin-top: 20px; }
.clsSectionLabel { color: var(--ab-brand) !important; letter-spacing: 3px !important; display: inline-flex; align-items: center; gap: 12px; }
.clsSectionLabel::before { content: ""; width: 26px; height: 1px; background: var(--ab-gold); }
.clsWhoWeAreTitle { font-size: clamp(32px, 3.4vw, 44px) !important; color: var(--ab-navy) !important; line-height: 1.15 !important; }
.clsWhoWeAreHeading::after {
    height: 4px !important; width: 70px !important; border-radius: 4px;
    background: linear-gradient(90deg, var(--ab-gold), var(--ab-gold-soft)) !important; animation: none !important;
}
.clsWhoWeAreLead::before { background: var(--ab-gold) !important; width: 3px; border-radius: 3px; }
.clsWhoWeAreLead { color: var(--ab-navy) !important; font-size: 19px !important; }

/* =========================================================
   FEATURE — image with an overlapping content card
   ========================================================= */
.clsAboutFeature {
    display: grid !important; grid-template-columns: 1.25fr 1fr !important; align-items: center;
    margin-top: 44px !important; background: transparent !important; overflow: visible !important;
}
.clsAboutFeature::after { display: none !important; }
.clsAboutFeatureImage {
    position: relative; min-height: 420px !important; border-radius: 22px; overflow: visible !important;
}
.clsAboutFeatureImage::before {                 /* offset gold frame */
    content: ""; position: absolute; inset: 20px 20px -20px -20px; z-index: 0;
    border: 1.5px solid rgba(201,162,75,.7); border-radius: 22px;
}
.clsAboutFeatureImage::after { display: none !important; }
#IDAboutFeatureImageElement {
    position: relative; z-index: 1; height: 420px !important; border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(10,27,51,.45);
}
.clsAboutFeatureContent {
    position: relative; z-index: 2; margin-left: -80px; padding: 46px 44px !important;
    background: #fff; border-radius: 20px; border: 1px solid rgba(35,78,134,.08);
    box-shadow: 0 34px 70px -28px rgba(10,27,51,.35);
}
.clsAboutFeatureNumber {
    font-family: "DM Serif Display", Georgia, serif; font-size: 64px !important; font-weight: 400 !important;
    line-height: 1; letter-spacing: 0 !important; color: transparent !important;
    -webkit-text-stroke: 1.2px var(--ab-gold);
}
.clsAboutFeatureNumber::after { display: none !important; }
.clsAboutFeatureTitle { font-size: 30px !important; color: var(--ab-navy) !important; }
.clsAboutFeatureDescription { font-size: 15px !important; color: #5b7088 !important; }

/* =========================================================
   STATS
   ========================================================= */
.clsAboutStats { margin-top: 56px !important; gap: 0 !important; background: #fff; border-radius: 20px;
    box-shadow: 0 30px 60px -32px rgba(10,27,51,.3); border: 1px solid rgba(35,78,134,.08); overflow: hidden; }
.clsAboutStatCard {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 30px 28px !important;
    background: transparent !important;
}
.clsAboutStatCard + .clsAboutStatCard { border-left: 1px solid rgba(35,78,134,.10) !important; }
.clsAboutStatCard::before { display: none !important; }
.clsAboutStatIcon {
    width: 54px !important; height: 54px !important; border-radius: 50%; font-size: 22px !important;
    background: linear-gradient(145deg, #f4f9ff, #dcebf9) !important;
    box-shadow: 0 0 0 5px rgba(201,162,75,.10), 0 0 0 6px rgba(201,162,75,.45);
}
.clsAboutStatCard:hover { transform: none !important; background: #f7fbff !important; }
.clsAboutStatCard:hover .clsAboutStatIcon { background: linear-gradient(135deg, #2a5a9a, #173a68) !important; }
.clsAboutStatValue { font-family: "DM Serif Display", Georgia, serif; font-size: 22px !important; font-weight: 400 !important; }
.clsAboutStatLabel { font-size: 12px !important; letter-spacing: .3px; }

/* =========================================================
   VALUES
   ========================================================= */
.clsOurValues { margin-top: 84px !important; }
.clsOurValuesTitle { font-size: clamp(30px, 3vw, 40px) !important; color: var(--ab-navy) !important; }
.clsOurValuesTitle::after {
    content: ""; display: block; width: 190px; height: 14px; margin-top: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14'%3E%3Cpath d='M3 9 C35 2 62 12 95 6 S160 3 187 8' fill='none' stroke='%23c9a24b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat / 100% 100%;
    clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ab-ease) .2s;
}
.lxa-in .clsOurValuesTitle::after, .clsOurValues.lxa-in .clsOurValuesTitle::after { clip-path: inset(0); }

.clsValuesGrid { gap: 24px !important; margin-top: 36px !important; }
.clsValueCard {
    border-radius: 20px !important; padding: 36px 30px !important; background: #fff;
    border: 1px solid rgba(35,78,134,.10) !important;
    box-shadow: 0 20px 44px -28px rgba(10,27,51,.35) !important;
}
.clsValueCard::before { display: none !important; }
.clsValueCard::after { height: 3px !important; background: linear-gradient(90deg, var(--ab-gold), var(--ab-gold-soft)) !important; }
.clsValueCard:hover { border-color: rgba(201,162,75,.55) !important; box-shadow: 0 30px 56px -26px rgba(10,27,51,.42) !important; }
.clsValueIcon {
    width: 58px !important; height: 58px !important; border-radius: 50%; font-size: 23px !important;
    background: linear-gradient(145deg, #f4f9ff, #dcebf9) !important;
    box-shadow: 0 0 0 5px rgba(201,162,75,.10), 0 0 0 6px rgba(201,162,75,.45);
}
.clsValueCard:hover .clsValueIcon { background: linear-gradient(135deg, #2a5a9a, #173a68) !important; transform: none !important; }
.clsValueTitle { font-family: "DM Serif Display", Georgia, serif !important; font-size: 24px !important; font-weight: 400 !important; }
.clsValueDescription { font-size: 14.5px !important; color: #5b7088 !important; }

/* cursor spotlight (JS sets --mx / --my) */
.clsValueCard .lxa-spot, .clsAboutStatCard .lxa-spot { display: none; }
.clsValueCard { --mx: 50%; --my: 50%; }
.clsValueCard:hover { background: radial-gradient(320px circle at var(--mx) var(--my), rgba(201,162,75,.10), #fff 65%); }

/* =========================================================
   PURPOSE — navy panel with the illustration
   ========================================================= */
.clsOurPurpose { margin-top: 90px !important; }
.clsPurposeCard {
    border-radius: 26px !important; padding: 56px 52px !important; align-items: center !important;
    background:
        url("/images/about/about-molecule.svg") right -40px center / 46% no-repeat,
        radial-gradient(700px 320px at 15% 0%, rgba(20,123,193,.35), transparent 70%),
        linear-gradient(135deg, #0a1b33 0%, #133868 55%, #234e86 100%) !important;
    box-shadow: 0 40px 80px -34px rgba(10,27,51,.6) !important;
}
.clsPurposeCard::before, .clsPurposeCard::after { display: none !important; }
.clsPurposeIcon {
    width: 68px !important; height: 68px !important; border-radius: 50%; font-size: 28px !important;
    color: var(--ab-gold-soft) !important; background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(201,162,75,.6) !important;
}
.clsPurposeContent { max-width: 620px; }
.clsPurposeContent .clsSectionLabel { color: var(--ab-gold-soft) !important; }
.clsPurposeTitle { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.15 !important; }
.clsPurposeDescription { font-size: 15.5px !important; color: rgba(255,255,255,.82) !important; }

/* =========================================================
   CTA
   ========================================================= */
.clsAboutCTA {
    margin-top: 80px !important; padding: 58px 52px !important; border-radius: 26px;
    border: 1px solid rgba(35,78,134,.10) !important;
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(20,123,193,.10), transparent 70%),
        radial-gradient(420px 220px at 0% 100%, rgba(201,162,75,.12), transparent 70%), #fff !important;
    box-shadow: 0 30px 60px -34px rgba(10,27,51,.35);
}
.clsAboutCTA::before, .clsAboutCTA::after { display: none !important; }
.clsAboutCTATitle { font-size: clamp(28px, 3vw, 38px) !important; color: var(--ab-navy) !important; }
.clsPrimaryCTA, .clsSecondaryCTA { min-height: 52px !important; padding: 0 30px !important; border-radius: 999px !important; font-size: 14px !important; }
.clsPrimaryCTA {
    background: linear-gradient(135deg, #147bc1, #234e86) !important;
    box-shadow: 0 14px 28px -10px rgba(35,78,134,.55) !important;
}
.clsSecondaryCTA { border: 1.5px solid rgba(201,162,75,.8) !important; color: var(--ab-navy) !important; }
.clsSecondaryCTA:hover { background: var(--ab-navy) !important; border-color: var(--ab-navy) !important; color: #fff !important; }

/* =========================================================
   SCROLL REVEAL (classes added by about-luxe.js)
   ========================================================= */
.lxa-r { opacity: 0; transform: translateY(28px); }
.lxa-r.lxa-in { opacity: 1; transform: none; transition: opacity .85s var(--ab-ease) var(--d, 0s), transform .85s var(--ab-ease) var(--d, 0s), box-shadow .3s ease, border-color .3s ease; }
.clsValueCard.lxa-r.lxa-in:hover { transform: translateY(-8px); transition-delay: 0s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
    .clsAboutHero::after { width: 70% !important; opacity: .45; }
    .clsAboutSidebarIntro { grid-template-columns: 1fr; row-gap: 14px; }
    .clsAboutSidebarIntro h2, .clsAboutSidebarIntro p, .clsAboutMiniPoints { grid-column: 1; grid-row: auto; }
    .clsAboutFeature { grid-template-columns: 1fr !important; }
    .clsAboutFeatureImage, #IDAboutFeatureImageElement { min-height: 300px !important; height: 300px !important; }
    .clsAboutFeatureContent { margin: -50px 22px 0; }
    .clsAboutStats { grid-template-columns: 1fr !important; }
    .clsAboutStatCard + .clsAboutStatCard { border-left: 0 !important; border-top: 1px solid rgba(35,78,134,.10) !important; }
    .clsPurposeCard { background-size: 70%, auto, auto !important; background-position: right -80px bottom -30px, 0 0, 0 0 !important; }
}
@media (max-width: 768px) {
    .clsAboutHero::after { width: 100% !important; opacity: .25; background-position: center !important; }
    .clsAboutFeatureImage::before { inset: 12px 12px -12px -12px; }
    .clsAboutFeatureContent { padding: 30px 24px !important; margin: -40px 12px 0; }
    .clsAboutFeatureNumber { font-size: 50px !important; }
    .clsPurposeCard { padding: 36px 26px !important; align-items: flex-start !important; }
    .clsAboutCTA { padding: 36px 24px !important; }
    .clsAboutMiniPoints span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .clsAboutHero::after, .clsAboutTitle::after { animation: none !important; }
    .lxa-r { opacity: 1; transform: none; }
    .lxa-r.lxa-in { transition: none; }
    .clsOurValuesTitle::after { clip-path: none; transition: none; }
}

.clsAboutHeroWave::before,
.clsAboutHeroWave::after {
    display: none !important;
    content: none !important;
}

.clsAboutHeroWave {
    height: 96px !important;
}

    .clsAboutHeroWave .hero-wave-front {
        stroke: rgba(201,162,75,.85);
        stroke-width: 2px;
        vector-effect: non-scaling-stroke;
    }

@media (max-width: 768px) {
    .clsAboutHeroWave {
        height: 64px !important;
    }
}

body:has(.clsAboutHero) .brand-logo-image {
    width: 145px !important;
    height: 78px !important;
    top: -2px !important;
    object-fit: contain !important;
    z-index: 100 !important;
}

@media (max-width: 768px) {
    body:has(.clsAboutHero) .brand-logo-image {
        width: 130px;
        height: 74px;
    }
}
/* ABOUT — LOGO FIX (replaces all earlier brand-logo rules) */
body:has(.clsAboutHero) .brand-area {
    height: 85px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

body:has(.clsAboutHero) .brand-logo {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 100% !important;
}

body:has(.clsAboutHero) .brand-logo-image {
    position: static !important;
    width: auto !important;
    height: 68px !important; /* keeps ~8px padding inside the 85px bar */
    max-width: 190px !important;
    object-fit: contain !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    z-index: 1003 !important;
}

body:has(.clsAboutHero) .brand-tagline {
    display: none !important;
}

@media (max-width: 768px) {
    body:has(.clsAboutHero) .brand-logo-image {
        height: 56px !important;
    }
}