/* ==========================================================================
   About BPH section — Figma node 195:5
   Page-level box: left:0; top:1462px; width:1440px; height:776px
   All children below use page-level absolute coordinates
   (Figma local y + 1462) to match the shared page-canvas coordinate system
   established by the hero section (.hero-stage, position:relative, 1440 wide).
   Scope: .about-bph
   ========================================================================== */

.about-bph {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

/* ---------- Decorative background glow texture ---------- */
.about-bph-texture {
  position: absolute;
  left: 271px;
  top: 1573px;
  width: 623px;
  height: 460px;
  border-radius: 50%;
  mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, rgba(217, 217, 217, 0.83) 0%, rgba(115, 115, 115, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ---------- Left portrait / background photo ---------- */
.about-bph-photo {
  position: absolute;
  left: 0px;
  top: 1462px;
  width: 740px;
  height: 720px;
  overflow: hidden;
  pointer-events: none;
}
.about-bph-photo img {
  position: absolute;
  left: -10.71%;
  top: -4.83%;
  width: 110.75%;
  height: 104.83%;
  max-width: none;
}

/* ---------- Headline ---------- */
.about-bph-headline {
  position: absolute;
  right: 90px;
  top: 1542px;
  width: 854px;
  margin: 0;
  text-align: right;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 45px;
  line-height: 1.15;
  background-image: linear-gradient(160.42714916601125deg, rgb(180, 136, 48) 21.181%, rgb(228, 190, 91) 13.368%, rgb(255, 225, 135) 36.401%, rgb(228, 190, 91) 59.434%, rgb(159, 113, 35) 93.984%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.about-bph-headline i {
  font-style: italic;
  font-weight: 400;
}
.about-bph-headline .about-bph-highlight-text {
  font-weight: 600;
  font-style: italic;
}

/* Subtle translucent highlighter box behind "$200,000" */
.about-bph-highlight-box {
  position: absolute;
  left: 736px;
  top: 1594px;
  width: 207px;
  height: 56px;
  background: rgba(217, 217, 217, 0.132);
  pointer-events: none;
}

/* ---------- Body copy ---------- */
.about-bph-copy {
  position: absolute;
  right: 98px;
  top: 1729px;
  width: 678px;
  margin: 0;
  text-align: right;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 29px;
  line-height: 1.5;
  color: #ffffff;
}

/* ---------- Marquee ---------- */
.about-bph-marquee {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 0;
}

.about-bph-marquee-heading {
  position: absolute;
  left: 739.5px;
  top: 2084px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 32px;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
}

.about-bph-logo-viewport {
  position: absolute;
  left: 93px;
  top: 2122px;
  width: 1294px;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
}

.about-bph-logo-row {
  position: absolute;
  left: 0;
  top: 28px;
  width: 2027.372px;
  height: 40px;
  animation: about-bph-marquee-scroll 10s linear infinite;
}

/* Exact keyframe timing from Figma motion data (pause at start/end, scroll by
   exactly one logo-set width so the duplicated set 2 lines up with set 1). */
@keyframes about-bph-marquee-scroll {
  0%      { translate: 0px 0px; }
  6.365%  { translate: 0px 0px; }
  86.365% { translate: -1013.686px 0px; }
  100%    { translate: -1013.686px 0px; }
}

.about-bph-logo {
  position: absolute;
  top: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}
.about-bph-logo--1 { background-image: url(../assets/about-bph-logo-1.png); -webkit-mask-image: url(../assets/about-bph-logo-1-mask.png); mask-image: url(../assets/about-bph-logo-1-mask.png); }
.about-bph-logo--2 { background-image: url(../assets/about-bph-logo-2.png); -webkit-mask-image: url(../assets/about-bph-logo-2-mask.png); mask-image: url(../assets/about-bph-logo-2-mask.png); }
.about-bph-logo--3 { background-image: url(../assets/about-bph-logo-3.png); -webkit-mask-image: url(../assets/about-bph-logo-3-mask.png); mask-image: url(../assets/about-bph-logo-3-mask.png); }
.about-bph-logo--4 { background-image: url(../assets/about-bph-logo-4.png); -webkit-mask-image: url(../assets/about-bph-logo-4-mask.png); mask-image: url(../assets/about-bph-logo-4-mask.png); }
.about-bph-logo--5 { background-image: url(../assets/about-bph-logo-5.png); -webkit-mask-image: url(../assets/about-bph-logo-5-mask.png); mask-image: url(../assets/about-bph-logo-5-mask.png); }
.about-bph-logo--6 { background-image: url(../assets/about-bph-logo-6.png); -webkit-mask-image: url(../assets/about-bph-logo-6-mask.png); mask-image: url(../assets/about-bph-logo-6-mask.png); }
.about-bph-logo--7 { background-image: url(../assets/about-bph-logo-7.png); -webkit-mask-image: url(../assets/about-bph-logo-7-mask.png); mask-image: url(../assets/about-bph-logo-7-mask.png); }