/* About Dr. Doaa — label, then a collage (large photo + framed inset + rating chip)
   beside a statement whose words darken one by one as you scroll (assets/js/base.js
   [data-word-reveal]), and two stats. Values from the reference "About Reveal". */
.about {
  padding: 120px var(--gutter);
  overflow: clip;
}

.about__container {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about__label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(11, 41, 93, .4);
}
.about__diamond {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
}

.about__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 72px;
}

/* Collage: 480px photo, 236×196 inset with a 6px white frame at the bottom-right */
.about__collage {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  padding: 0 44px 44px 0;
}
.about__media {
  position: relative;
  z-index: 1;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
}
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.about__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 236px;
  height: 196px;
  border: 6px solid #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 60px -24px rgba(var(--shadow-tint), .35);
}
.about__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__copy {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about__statement {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.about__statement .wr {
  color: rgba(11, 41, 93, .22);
  opacity: .85;
  transition: color .25s ease-out;
}

.about__stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__caption,
.about__stat-label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20.3px;
  color: rgba(11, 41, 93, .6);
}
.about__stat-row {
  display: flex;
  gap: 56px;
}
.about__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about__num {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Rating chip — floats below the copy column, like the reference */
.about__chip {
  position: absolute;
  right: 9%;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 2px solid rgba(11, 41, 93, .08);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(var(--shadow-tint), .28);
}
.about__chip-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gold);
}
.about__chip-star {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.about__chip-text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20.3px;
  color: rgba(11, 41, 93, .6);
}

@media (max-width: 1199.98px) {
  .about__media { width: 367px; max-width: 100%; }
}
@media (max-width: 809.98px) {
  .about { padding: 72px 20px; }
  .about__row { flex-direction: column; align-items: stretch; gap: 48px; }
  .about__collage { flex: none; width: 100%; }
  .about__media { width: 100%; height: 420px; }
  .about__inset { width: 180px; height: 150px; }
  .about__copy { flex: none; width: 100%; }
  .about__chip { position: relative; right: auto; bottom: auto; align-self: flex-start; }
}

/* ---------- About duo (client round, 2026-10-26: the tooth video was dropped; then
   "make Dr. Doaa the larger image, the clinic small on the edge"). One proportional box
   so it scales as a unit: Dr. Doaa's cut-out large on a warm panel at the left, the
   treatment room small in a white frame overlapping her panel's bottom-right edge. */
.about-duo {
  position: relative;
  padding: 0;
  aspect-ratio: 5 / 4;
}
.about-duo > * {
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.about-duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-duo__doctor {
  left: 0;
  top: 0;
  width: 64%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--sand) 0%, #F3E3BF 100%);
  box-shadow: 0 40px 70px -50px rgba(var(--shadow-tint), .55);
}
/* the cut-out has empty space on its left: lean toward her so she fills the panel */
.about-duo__doctor img { object-position: 50% 0; scale: 1.12; transform-origin: 66% 0; }
.about-duo__clinic {
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 44%;
  aspect-ratio: 4 / 3;
  border: 5px solid #fff;
  border-radius: 20px;
  box-shadow: 0 30px 50px -30px rgba(var(--shadow-tint), .5);
}
.about-duo__clinic img { object-position: 30% 50%; }

@media (max-width: 809.98px) {
  .about-duo { max-width: 460px; margin: 0 auto; width: 100%; }
  .about-duo__doctor { border-radius: 18px; }
  .about-duo__clinic { border-width: 3px; border-radius: 14px; }
}