/* ==========================================================================
   About (about.html) — page-specific styles
   Currently reuses only shared components from style.css (.hero banner,
   .about-split bio layout, .statement section). Add overrides here.
   ========================================================================== */

/* Portrait is a transparent cutout PNG (not a boxed photo), so it needs the
   same soft-glow treatment as the old home hero instead of the default
   bordered/cropped .about-media img box. */


.about-media {
  display: flex;
  justify-content: center;
  min-height: 380px;
}
.about-media .brush {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  inset-inline-start: -10%;
  background: radial-gradient(circle at 50% 40%, var(--c-blue) 0%, rgb(174 209 230 / 0) 65%);
  filter: blur(10px);
  opacity: .5;
  z-index: 0;
}
.about-media img {
  position: relative;
  z-index: 1;
  width: min(360px, 78vw);
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 18px 26px rgba(35, 75, 104, .16));
}
.about-media .butterfly-accent { z-index: 2; }

.about-media .butterfly-accent {
  width: 50px;
  height: auto;
}

@media (max-width: 900px) {
  .balance-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .balance-features {
    grid-template-columns: 1fr;
  }

  .balance-feature {
    min-height: auto;
  }}