/* =====================================================================
   HP - About OneGold
   UK desktop node 10129:141 (1440 frame, 328h, px100 py80, gap40, two cols).
   UK mobile node 10176:3197 (390 frame, 20px gutters, py40, column stack).
   Tokens only. BEM, prefix hp-about-onegold-.
   ===================================================================== */
.hp-about-onegold {
  position: relative;
  background-color: var(--breakout-grad-dark); /* #071f39 navy base under image */
  padding-block: var(--home-sec-pad-y);        /* 80px */
  overflow: hidden;
}

/* Full-cover dark texture image sitting above the navy base. */
.hp-about-onegold__bg {
  position: absolute;
  inset: 0;
  background-image: url("../../img/hp-about-onegold-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Two equal columns inside the locked 1240 container. */
.hp-about-onegold__inner {
  position: relative; /* above the bg layer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--hp-about-onegold-col-gap); /* 40px between the two columns */
}

.hp-about-onegold__heading {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  letter-spacing: 0;
  color: var(--gray-0);
}

.hp-about-onegold__body {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  letter-spacing: 0;
  color: var(--gray-0);
  word-break: break-word;
}
/* Brand links sit on the dark band: keep them white + underlined for contrast. */
.hp-about-onegold__body a {
  color: var(--gray-0);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease;
}
.hp-about-onegold__body a:hover { opacity: 0.75; }

/* ---- Tablet (768–1023): Archetype C — keep 2-col, step heading ----- */
@media (max-width: 1023.98px) {
  .hp-about-onegold {
    padding-block: var(--ba-pad-y); /* 40px */
  }
  .hp-about-onegold__heading {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }
}

/* ---- Large-mobile (600–767): keep 2-col, smaller heading ----------- */
@media (max-width: 767.98px) {
  .hp-about-onegold__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
}

/* ---- Phone (≤599): stack column (Figma mobile design) -------------- */
@media (max-width: 599.98px) {
  .hp-about-onegold__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-about-onegold-col-gap); /* 40px stack gap */
  }
  .hp-about-onegold__heading {
    flex: 0 0 auto;
    width: 100%;
  }
  .hp-about-onegold__body {
    flex: 0 0 auto;
    width: 100%;
  }
}