/* Marcus Science Group — About page (self-contained; all page classes use the ab- prefix) */
:root{--green:#10b981;--green-d:#0b7a57;--ink:#0f172a;--muted:#5b6778;--bg:#f4f7f6;--line:#dfe6e3;--dark:#07181f;--dark2:#0d2e35}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ab-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}

/* ===== NAVIGATION (same design as before) ===== */
.about-header{position:absolute;top:0;left:0;width:100%;z-index:100;padding-top:18px}
.about-nav{width:min(930px,calc(100% - 48px));min-height:78px;margin:0 auto;background:rgba(255,255,255,.97);border-radius:0 0 24px 24px;box-shadow:0 14px 35px rgba(10,30,40,.14);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 30px}
.about-nav-left,.about-nav-right{display:flex;align-items:center;gap:28px}
.about-nav-right{justify-content:flex-end}
.about-nav a,.about-dropdown button{font-family:inherit;font-size:13px;font-weight:600;color:#17201e}
.about-nav a{transition:color .25s ease,transform .25s ease}
.about-nav a:hover,.about-nav a.active{color:var(--green);transform:translateY(-1px)}
.about-dropdown{position:relative}
.about-dropdown button{border:0;background:transparent;cursor:pointer;padding:0}
.about-dropdown-menu{position:absolute;top:calc(100% + 18px);left:-18px;width:210px;padding:10px;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(10,30,40,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s ease}
/* invisible bridge so the menu doesn't close while the mouse crosses the gap */
.about-dropdown-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.about-dropdown:hover .about-dropdown-menu,.about-dropdown:focus-within .about-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.about-dropdown-menu a{display:block;padding:11px 12px;border-radius:9px}
.about-dropdown-menu a:hover{background:#f1f7f3}
.about-brand{display:flex;align-items:center;justify-content:center;gap:10px}
.about-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#10202d;overflow:hidden}
.about-brand-mark img{width:100%;height:100%;object-fit:contain}
.about-brand-text{display:flex;flex-direction:column;line-height:1}
.about-brand-text strong{font-size:15px;font-weight:800}
.about-brand-text small{margin-top:5px;color:#8d9795;font-size:6px;font-weight:800;letter-spacing:1px}

/* ===== HERO ===== */
.ab-hero{padding:200px 0 110px;color:#fff;background:
  radial-gradient(circle at 1px 1px,rgba(52,211,153,.16) 1px,transparent 1.5px) 0 0/28px 28px,
  linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%)}
.ab-hero-kicker{color:#34d399;font-weight:600;font-size:15px;margin-bottom:18px}
.ab-hero h1{max-width:820px;font-size:clamp(40px,6vw,76px);font-weight:800;letter-spacing:-2.5px;line-height:1.05;margin-bottom:24px}
.ab-hero-text{max-width:600px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.78)}

/* ===== STORY ===== */
.ab-story{padding:110px 0}
.ab-story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.ab-story h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-1.2px;line-height:1.15;margin-bottom:24px}
.ab-story p{color:var(--muted);font-size:17px;line-height:1.8;margin-bottom:18px;max-width:560px}
.ab-facts{border-left:3px solid var(--green);padding-left:36px;display:grid;gap:30px}
.ab-facts strong{display:block;font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--dark)}
.ab-facts span{display:block;margin-top:6px;color:var(--muted);font-size:15px}

/* ===== MISSION / VISION ===== */
.ab-mv{padding:0 0 110px}
.ab-mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-mv article{padding:48px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.ab-mv article.dark{background:var(--dark);border-color:var(--dark);color:#fff}
.ab-mv h3{font-size:26px;font-weight:700;letter-spacing:-.6px;margin-bottom:14px}
.ab-mv p{color:var(--muted);font-size:16px;line-height:1.75}
.ab-mv .dark p{color:rgba(255,255,255,.75)}

/* ===== PILLARS ===== */
.ab-pillars{padding:100px 0;background:var(--bg)}
.ab-pillars h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-1.2px;margin-bottom:48px;max-width:600px;line-height:1.15}
.ab-pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.ab-pillar-grid article{padding:32px 40px 32px 0;border-bottom:1px solid var(--line)}
.ab-pillar-grid article:nth-child(even){padding-left:40px;border-left:1px solid var(--line)}
.ab-pillar-grid h4{font-size:20px;font-weight:700;margin-bottom:8px}
.ab-pillar-grid p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:420px}

/* ===== CTA ===== */
.ab-cta{padding:100px 0}
.ab-cta-box{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:56px;border-radius:24px;background:linear-gradient(135deg,var(--dark),var(--dark2));color:#fff}
.ab-cta-box h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.2;margin-bottom:10px;max-width:520px}
.ab-cta-box p{color:rgba(255,255,255,.75);max-width:480px}
.ab-cta-btns{display:flex;gap:12px;flex-shrink:0}
.ab-btn-primary,.ab-btn-ghost{display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:14px;transition:transform .2s,background .2s}
.ab-btn-primary{background:var(--green);color:#fff}
.ab-btn-primary:hover{background:#059669;transform:translateY(-2px)}
.ab-btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.ab-btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ===== FOOTER ===== */
.ab-footer{background:#040d12;color:#fff;padding-top:72px}
.ab-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:56px}
.ab-footer-brand{font-size:20px;font-weight:800;margin-bottom:14px}
.ab-footer p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.7;margin-bottom:8px}
.ab-footer h4{font-size:15px;font-weight:700;margin-bottom:18px}
.ab-footer a{display:block;color:rgba(255,255,255,.65);font-size:14px;margin-bottom:11px;transition:color .2s}
.ab-footer a:hover{color:#34d399}
.ab-footer-bottom{padding:24px;text-align:center;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45);font-size:13px}

/* ===== RESPONSIVE ===== */
@media (max-width:990px){
  .ab-story-grid,.ab-mv-grid{grid-template-columns:1fr;gap:48px}
  .ab-cta-box{flex-direction:column;align-items:flex-start}
  .ab-footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:900px){
  .about-nav{width:calc(100% - 24px);padding:0 18px}
  .about-brand-text{display:none}
}
@media (max-width:600px){
  .about-nav{min-height:64px}
  .about-nav-left a:first-child{display:none}
  .about-nav-left,.about-nav-right{gap:10px}
  .about-nav a,.about-dropdown button{font-size:11px}
  .ab-hero{padding:140px 0 70px}
  .ab-story{padding:70px 0}
  .ab-facts{padding-left:24px}
  .ab-mv article{padding:32px 26px}
  .ab-pillar-grid{grid-template-columns:1fr}
  .ab-pillar-grid article,.ab-pillar-grid article:nth-child(even){padding:26px 0;border-left:0}
  .ab-cta-box{padding:36px 26px}
  .ab-cta-btns{flex-direction:column;width:100%}
  .ab-btn-primary,.ab-btn-ghost{text-align:center}
  .ab-footer-grid{grid-template-columns:1fr}
}