/* === Vars & base === */
:root{
  --bg-deep:#031c14;
  --bright-green:#63ff6b;
  --bright-green-2:#b3ff84;
  --text:#eaffea;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Lato", Arial, sans-serif;
  color:var(--text);
  background:#000;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Smooth anchor scrolling */
@media (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
  }
}

/* ===== (Removed) Navbar & Sidebar overrides =====
   Using shared.css for consistent header & sidebar across all pages.
   Any previous .navbar, .menu-toggle, .sidebar*, .sidebar-overlay* rules
   were removed to avoid overriding the shared styles.
*/

/* ===== ABOUT HERO ===== */
.about-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#000;
}
.about-hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:grayscale(100%);
  z-index:0;
}
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.70) 100%),
    radial-gradient(60% 50% at 35% 40%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.45) 65%, rgba(0,0,0,.75) 100%);
  z-index:1; pointer-events:none;
}
.about-hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:1200px;
  padding: clamp(80px, 12vh, 120px) clamp(16px, 3vw, 28px);
  margin: 0 auto;
  display:grid;
  gap: clamp(16px, 3vh, 20px);
  grid-template-columns:minmax(260px, 640px);
}
.about-title{
  color:var(--bright-green);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.02;
  font-size: clamp(2.2rem, 1.2rem + 6vw, 4.5rem);
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}
.about-lede{
  color:#f2fff0; opacity:.96;
  font-size: clamp(1rem, .6rem + 1vw, 1.15rem);
  line-height:1.65;
}
.about-links{
  display:flex; flex-wrap:wrap; gap: clamp(14px, 2vw, 22px);
  margin-top: 6px;
}
.about-link{
  color:var(--bright-green);
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition: border-color .18s ease, transform .18s ease;
}
.about-link:hover{
  border-color:var(--bright-green);
  transform: translateY(-1px);
}

/* ===== Leadership Section ===== */
.leadership{
  background:#000; color:#fff;
  padding: clamp(48px, 8vh, 84px) 0;
}
.leadership-inner{
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex; flex-direction: column;
  gap: clamp(48px, 8vh, 80px);
}
.leadership-title{
  text-align:center; color:#63ff6b; font-weight:800;
  letter-spacing:.01em; line-height:1.1;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.2rem);
  margin-bottom: clamp(18px, 4vh, 28px);
}
.leadership-row{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.leadership-copy p{
  color:#f1fff0;
  font-size: clamp(.98rem, .7rem + .7vw, 1.06rem);
  line-height:1.65; opacity:.96;
}
.leadership-copy p + p{ margin-top: 20px; }
.leadership-art{ margin:0; display:grid; place-items:center; }
.leadership-art img{
  width: 100%; max-width: 540px; height: auto; display: block;
  border-radius: 14px; filter: drop-shadow(0 18px 44px rgba(0,0,0,.5));
}

/* Stats card */
.leadership-stats{ margin-top: clamp(48px, 10vh, 72px); display:grid; place-items:center; }
.stats-card{
  width: 100%; border-radius: 28px;
  background: linear-gradient(180deg, #8AFF70 0%, #66E75A 100%);
  box-shadow: 0 20px 50px rgba(0,120,30,.20), inset 0 1px 0 rgba(255,255,255,.25);
  padding: clamp(28px, 4vw, 40px); max-width: 980px;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 30px);
}
.stat-pill{
  background: linear-gradient(180deg, #2b3b32 0%, #1b251f 100%);
  color:#ecfff0; font-weight:800; text-align:center; border-radius: 16px;
  padding: clamp(16px, 2.2vw, 18px) clamp(14px, 2vw, 20px);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Responsive */
@media (max-width: 980px){
  .leadership-row{ grid-template-columns: 1fr; }
  .leadership-art img{ max-width: 620px; }
}
@media (max-width: 640px){
  .stats-grid{ grid-template-columns: 1fr; }
}

/* ===== Company Section ===== */
.company {
  background: #000; color: #fff;
  padding: clamp(60px, 10vh, 100px) 0;
}
.company-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex; flex-direction: column;
  gap: clamp(56px, 8vh, 80px);
}
.company-title {
  text-align: center; color: var(--bright-green);
  font-weight: 800; letter-spacing: 0.01em; line-height: 1.1;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.2rem);
}
.company-row {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px); align-items: center;
}
.company-copy {
  color: #f1fff0; font-size: clamp(0.98rem, 0.7rem + 0.7vw, 1.06rem);
  line-height: 1.65; opacity: 0.96;
}
.company-copy p + p { margin-top: 20px; }
.company-art { margin: 0; display: grid; place-items: center; }
.company-art img {
  width: 100%; max-width: 500px; height: auto; display: block;
  border-radius: 16px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
@media (max-width: 980px) {
  .company-row { grid-template-columns: 1fr; text-align: left; }
  .company-art img { max-width: 620px; }
}

/* ===== Our Mission ===== */
.mission{
  background:#000; color:#fff;
  padding: clamp(56px, 9vh, 110px) 0;
}
.mission-inner{
  max-width:1200px; margin:0 auto;
  padding:0 clamp(16px,3vw,32px);
}
.mission-title{
  text-align:center; color:#63ff6b; font-weight:800; letter-spacing:.01em; line-height:1.1;
  font-size:clamp(1.8rem,1rem + 3vw,2.4rem);
}
.mission-subtitle{
  text-align:center; color:#e8ffe6; opacity:.95; line-height:1.6;
  font-size:clamp(1rem,.6rem + 1vw,1.2rem); margin-top:8px;
}
.mission-row{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 6vw, 72px); align-items: stretch; margin-top: clamp(24px, 5vh, 40px);
}
.mission-art{ margin:0; display:flex; flex-direction:column; justify-content:center; }
.mission-art img{
  width:100%; max-width:640px; height:auto; display:block;
  border-radius:22px; filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
}
/* === OUR MISSION CARDS LAYOUT === */
.mission-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;       /* centers the group relative to the image */
  gap: clamp(24px, 3vh, 32px);   /* even spacing between the cards */
  height: 100%;                  /* ensures alignment with the image height */
}

.mission-card {
  background: linear-gradient(180deg, #262b28 0%, #1d211f 100%);
  border: 1px solid rgba(160,255,160,.12);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.mission-card:hover {
  transform: translateY(-4px);
}

/* On mobile: stack naturally, remove forced alignment */
@media (max-width: 980px){
  .mission-row { grid-template-columns: 1fr; }
  .mission-cards {
    justify-content: flex-start;
    gap: clamp(16px, 2.6vw, 22px);
    height: auto;
  }
}
.mission-card h3{
  color:#63ff6b; font-weight:800;
  font-size:clamp(1.05rem, .7rem + 1vw, 1.25rem); margin-bottom:8px;
}
.mission-card p{
  color:#f1fff0; font-size:clamp(.95rem, .6rem + .8vw, 1.05rem);
  line-height:1.6; opacity:.96;
}
@media (max-width: 980px){
  .mission-row{ grid-template-columns: 1fr; }
  .mission-art img{ max-width: 720px; }
  .mission-cards{ justify-content: initial; gap: clamp(16px, 2.6vw, 22px); }
}

/* ===== Global CTA ===== */
.global-cta{
  background:#000; color:#fff; padding: clamp(56px, 10vh, 110px) 0;
}
.global-cta-inner{
  max-width: 980px; margin: 0 auto; text-align: center;
  padding: 0 clamp(16px, 3vw, 32px); display: grid; gap: clamp(16px, 2.6vh, 22px);
}
.global-cta-title{
  color: var(--bright-green); font-weight: 800; letter-spacing: .01em;
  line-height: 1.08; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.2rem);
}
.global-cta-copy{
  color: #e9ffe6; opacity: .95; line-height: 1.6;
  font-size: clamp(1rem, .7rem + 1vw, 1.15rem);
  max-width: 840px; margin: 0 auto;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; text-decoration:none; border:none; border-radius:999px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  padding:.85rem 1.6rem; min-width:auto; max-width:fit-content; will-change:transform;
}
.btn:hover{transform:translateY(-3px) scale(1.01)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-light{
  background:linear-gradient(180deg,#63ff6b 0%,#b3ff84 100%); color:#0b3a28;
  box-shadow:0 0 20px rgba(99,255,107,.3);
}
.btn-light:focus-visible{ outline:3px solid #0b3a28; outline-offset:2px; }
.btn-dark{
  background:rgba(0,0,0,.25); color:#d7ffd0; border:2px solid #63ff6b;
  box-shadow:0 12px 24px rgba(0,0,0,.45);
}
@media (max-width:768px){
  .btn{padding:.75rem 1.3rem;font-size:.95rem;}
}
.global-cta .btn{ display:inline-flex; margin:0 auto; justify-self:center; text-align:center; }

/* ===== Footer (page content only; structure from shared header/footer) ===== */
.site-footer{
  background:#000; color:#fff; padding:clamp(40px, 7vh, 72px) 0 16px;
}
.footer-inner{
  max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,32px);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:start;
}
.footer-logo img{ height:24px; width:auto; display:block; margin-bottom:14px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.footer-address{margin:12px 0 20px}
.footer-address a{ color:#cfead0; font-size:.95rem; text-decoration:underline; }
.footer-kicker{color:var(--bright-green);font-weight:800;margin-bottom:8px}
.footer-email{ color:#e9ffe6; text-decoration:none; display:inline-block; margin-bottom:12px; }
.footer-email:hover{text-decoration:underline}
.footer-social{display:flex; gap:10px}
.social-linkedin svg{width:26px; height:26px; display:block}
.social-linkedin rect{fill:var(--bright-green)}
.social-linkedin path{fill:#052a17}
.social-linkedin:hover rect{filter:brightness(1.05)}
.footer-columns{display:contents}
.footer-col h3{ color:var(--bright-green); font-size:1.05rem; margin:2px 0 10px; font-weight:800; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(8px, 0.7rem, 12px); }
.footer-col a{ color:#f1fff0; text-decoration:none; font-weight:600; line-height:1.55; padding-block:2px; }
.footer-col a:hover{text-decoration:underline}
.footer-bottom{
  max-width:1200px; margin:18px auto 0; padding:0 clamp(16px,3vw,32px);
  display:flex; justify-content:flex-end; color:#c8e9c9; font-size:.9rem;
}
@media (max-width:980px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width:680px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* === About page: desktop header floats over hero (like before) === */
@media (min-width: 901px){
  .page-about .navbar{
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 28px);
    background: transparent;
    z-index: 100; /* above the hero */
  }
}

/* 1) About page — MOBILE header should be normal (not absolute) */
@media (max-width: 900px){
  .page-about .navbar{
    position: relative !important;
    top: auto; left: auto; right: auto;
    padding: 12px clamp(16px, 3vw, 24px);   /* matches other pages’ spacing */
    background: transparent;
    z-index: 3;
  }
  .page-about .navbar-inner{
    gap: 12px;                                /* same spacing as shared */
  }
  .page-about .logo img{
    height: 22px;                             /* consistent logo size */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  }
}

/* 2) Give the About hero a touch more top room on mobile
      so the header doesn’t feel “compressed” against it */
@media (max-width: 900px){
  .about-hero-inner{
    padding-top: clamp(80px, 16vh, 120px);
  }
}