/* =====================================================================
   JOM BMS — About page
   Extends css/style.css (tokens, nav, buttons, cards, footer, reveals).
   Everything below is specific to /about and does not touch the
   homepage's design system.
   ===================================================================== */

/* ---------- Hero ---------- */
.about-hero{
  position:relative; overflow:hidden;
  padding-block:calc(var(--nav-h) + 64px) clamp(70px,9vw,110px);
}
.about-hero__glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 46% at 18% 20%, rgba(255,196,0,.16), transparent 68%),
    radial-gradient(42% 50% at 84% 8%, rgba(255,61,154,.14), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(255,100,0,.10), transparent 72%);
  filter:blur(10px);
  animation:aboutDrift 16s var(--ease-io) infinite alternate;
}
@keyframes aboutDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(1.5%,2%,0) scale(1.04); }
}
.about-hero__inner{ position:relative; z-index:1; max-width:900px; }
.about-hero__title{
  margin-top:22px;
  font-size:clamp(38px,6.4vw,74px);
  font-weight:800; letter-spacing:-.038em; line-height:1.04;
}
.about-hero__title em{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-hero__lede{
  margin-top:24px; max-width:62ch;
  font-size:clamp(15.5px,1.7vw,19px); color:var(--text-soft);
}
.about-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* Stat bar reuses .hero__stats from style.css but sits outside a .hero,
   so it needs its own top border/spacing here. */
.about-stats{
  position:relative; z-index:1;
  margin-top:clamp(48px,6vw,72px);
  padding-top:28px; border-top:1px solid var(--line);
}

/* ---------- Principles ---------- */
.principles{ padding-block:clamp(70px,9vw,120px); }
.principles .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ---------- CTA meta tweak: About's CTA panel sits on the default
   (non-dark) surface, matching the homepage's own .cta usage. ---------- */
.about-cta{ padding-block:0 clamp(90px,12vw,150px); }

@media (max-width:1100px){
  .principles .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .about-stats .hero__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .principles .cards{ grid-template-columns:1fr; }
}