/* ============================================================
   about.css — About section styles
   ============================================================ */

#about {
  padding: var(--section-pad);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  background: var(--dark); color: #fff;
  position: relative; overflow: hidden;
}
/* Pink glow accent */
#about::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,115,122,.15) 0%, transparent 65%);
}

.about-label {
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--pink-lt); margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.about-label::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px; background: var(--pink);
}

.about-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-weight: 300; line-height: 1.15; margin-bottom: 2.5rem; color: #fff;
}
.about-heading em { font-style: italic; color: var(--pink); }

.about-body p {
  font-size: .88rem; font-weight: 300; line-height: 2;
  color: rgba(255,255,255,.62); margin-bottom: 1.4rem;
}

.about-specialties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.spec-chip {
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
}
.spec-chip.highlight {
  background: rgba(212,115,122,.18); border-color: var(--pink);
  color: var(--pink-lt);
}

/* ── Image frame ── */
.about-image-block { position: relative; }

.about-accent-dot {
  position: absolute; top: -1.2rem; left: -1.2rem;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--pink); opacity: .15;
}

.about-img-frame {
  width: 100%; aspect-ratio: 3/4;
  background: var(--pink-dk); border-radius: .5rem;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.about-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-accent-box {
  position: absolute; bottom: -2rem; right: -2rem;
  width: 160px; height: 160px;
  border: 2px solid var(--pink); border-radius: .5rem; opacity: .2;
}

@media (max-width: 900px) {
  #about { grid-template-columns: 1fr; padding: var(--section-pad-sm); gap: 3rem; }
}