/* ===== ABOUT (white card, text-right / photo-left-visual) ===== */
.about { --h: 772; background: transparent; }
.about__card {
  position: absolute; top: 93px; left: 313px; width: 1296px; height: 602px;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(7,28,55,.08);
}
/* Figma clip 649×602; inner img scaled to ~1050×1574, offset left -178 (node 4886:9470) */
.about__photo {
  position: absolute; top: 0; right: 0; width: 649px; height: 602px; overflow: hidden;
  border-radius: 0 8px 8px 0;
}
.about__photo img {
  position: absolute; top: -24px; left: -300px; width: 1250px; height: auto; max-width: none;
}
/* Figma 4886:9475 — title x=347 (card-rel 34), width 565, 2 lines @ 96px → clears the photo (left 647) */
.about__title {
  position: absolute; top: 45px; left: 34px; width: 565px;
  font-size: 40px; line-height: 48px; font-weight: 400; color: var(--green-900); text-align: right;
}
/* Figma 4886:9474 — body x=364 (card-rel 51), width 548, top-rel 157 */
.about__body {
  position: absolute; top: 157px; left: 51px; width: 548px;
  font-size: 20px; line-height: 30px; color: var(--basic-black); text-align: right;
}
.about__body p + p { margin-top: 12px; }
.about__cta {
  position: absolute; top: 493px; left: 416px; width: 184px; height: 48px;
  display: flex; direction: ltr; align-items: center;
  border: 1px solid var(--gold-btn); border-radius: 0; color: var(--green-900);
}
.about__cta .circ {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 0;
  border-right: 1px solid var(--gold-btn); display: flex; align-items: center; justify-content: center;
}
.about__cta .circ img { width: 24px; height: 24px; }
.about__cta .lbl { flex: 1; text-align: center; font-weight: 700; font-size: 20px; }

@media (max-width: 1024px) {
  /* #about prefix beats base `.scaled > .stage` (spec tie that base was winning) */
  #about.about { --h: auto; height: auto; overflow: visible; }
  #about .stage { position: static; width: 100%; max-width: 100%; height: auto; transform: none; }
  #about .about__card {
    position: relative; inset: auto; top: 0; left: 0; right: 0;
    width: auto; max-width: 100%; height: auto; margin: 24px 16px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  #about .about__photo { position: relative; left: 0; top: 0; width: 100%; height: 260px; order: 5; overflow: hidden; }
  #about .about__photo img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  #about .about__title,
  #about .about__body,
  #about .about__cta {
    position: relative; inset: auto; left: 0; top: 0; width: auto; max-width: 100%;
  }
  #about .about__title { font-size: 27px; line-height: 1.2; padding: 22px 20px 0; text-align: right; }
  #about .about__body { font-size: 16px; line-height: 1.6; padding: 14px 20px 0; text-align: right; }
  /* compact button, right-aligned (margin-left:auto pushes it to the right edge in the flex column) */
  #about .about__cta { width: 184px; max-width: 184px; margin: 22px 20px 26px auto; }
}