/* /about: numbered-narrative banner, seam-crossing promise panel, comparison table,
   flanking why-choose columns around the PC, vertical timeline. */

/* Numbered-narrative banner on white (pattern library §2D, HAVU) */
.bd-about-hero { padding: 60px 0 200px; background: var(--surface); }
.bd-about-hero__num { margin: 10px 0 18px; font-weight: 800; font-size: 15px; letter-spacing: 2px; color: var(--brand-2); }
.bd-about-hero__num span { color: var(--royal); font-weight: 700; text-transform: uppercase; }
.bd-about-hero__title { max-width: 900px; margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -1px; }
.bd-about-hero__lead { max-width: 620px; margin: 0; font-size: 20px; color: var(--ink); }

/* The promise panel crosses the seam into the story section (§9 cross-seam) */
.bd-about-story { padding-top: 0; }
.bd-about-story .bd-split-2 { align-items: start; }
.bd-about-story__panel { margin-top: -170px; }
.bd-about-story .bd-split-2 > div:last-child { padding-top: 70px; }

/* The usual way vs. how we work (HAVU two-column comparison): row-aligned, no borders */
.bd-compare { width: 100%; max-width: 920px; margin: 0 auto; border-collapse: separate; border-spacing: 0; }
.bd-compare th { padding: 18px 26px; text-align: left; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
.bd-compare th:first-child { color: #5F6878; }
.bd-compare th:last-child { background: var(--brand-1); color: #fff; border-radius: var(--bd-r-panel) var(--bd-r-panel) 0 0; }
.bd-compare td { width: 50%; padding: 18px 26px; vertical-align: top; border-top: 1px solid #E3E8F3; }
.bd-compare td:first-child { color: #5F6878; }
.bd-compare td:last-child { background: var(--brand-1); color: #fff; font-weight: 600; border-top-color: rgba(255, 255, 255, .12); }
.bd-compare tr:last-child td:last-child { border-radius: 0 0 var(--bd-r-panel) var(--bd-r-panel); }
.bd-compare svg { display: inline-block; vertical-align: -3px; margin-right: 12px; }
.bd-compare td:first-child svg { color: #9AA3B5; }
.bd-compare td:last-child svg { color: var(--red-on-navy); }

/* Why choose: icon columns flanking the PC (§10 flanking icon-columns) */
.bd-flank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.bd-flank__col { display: grid; gap: 44px; }
.bd-flank__item { display: flex; gap: 18px; align-items: flex-start; }
.bd-flank__col--left .bd-flank__item { flex-direction: row-reverse; text-align: right; }
.bd-flank__item p { margin: 0; font-size: 14.5px; }
.bd-flank__title { margin: 4px 0 6px; font-size: 18px; }
.bd-flank__item .bd-tile { flex: 0 0 56px; background: #fff; box-shadow: var(--bd-sh-soft); }
.bd-flank__visual { aspect-ratio: 1.15; overflow: hidden; }
.bd-flank__visual img { display: block; width: 211%; max-width: none; height: auto; margin: -19.2% 0 0 -63.7%; }   /* crop the render to the PC (centre at 54% 53%) */

/* Vertical timeline: centre line, numbered nodes, boxes alternating sides (SHEPHERDS) */
.bd-timeline { position: relative; max-width: 900px; margin: 0 auto; display: grid; gap: 30px; }
.bd-timeline::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(var(--brand-2) 0 8px, transparent 8px 16px); }
.bd-timeline__step { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.bd-timeline__node {
  position: absolute; left: 50%; top: 18px; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px;
  border-radius: 50%; background: var(--brand-1); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 6px #fff;
}
.bd-timeline__box { padding: 26px 30px; border-radius: var(--bd-r-card); background: #fff; box-shadow: var(--bd-sh-soft); }
.bd-timeline__box p { margin: 0; font-size: 14.5px; }
.bd-timeline__title { margin: 0 0 6px; font-size: 18px; }
.bd-timeline__step:nth-child(odd) .bd-timeline__box { grid-column: 1; margin-right: 56px; text-align: right; }
.bd-timeline__step:nth-child(even) .bd-timeline__box { grid-column: 2; margin-left: 56px; }

@media (max-width: 980px) {
  .bd-about-hero { padding-bottom: 60px; }
  .bd-about-story { padding-top: var(--bd-section-y); }
  .bd-about-story__panel { margin-top: 0; }
  .bd-about-story .bd-split-2 > div:last-child { padding-top: 0; }
  .bd-flank { grid-template-columns: 1fr; gap: 30px; }
  .bd-flank__visual { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
  .bd-flank__col { gap: 26px; }
  .bd-flank__col--left .bd-flank__item { flex-direction: row; text-align: left; }
}
@media (max-width: 767px) {
  .bd-about-hero { padding-top: 40px; }
  .bd-about-hero__lead { font-size: 17px; }
  .bd-compare th, .bd-compare td { padding: 14px 14px; font-size: 14px; }
  .bd-compare svg { display: none; }
  .bd-timeline::before { left: 26px; }
  .bd-timeline__node { left: 26px; }
  .bd-timeline__step { grid-template-columns: 1fr; }
  .bd-timeline__step:nth-child(n) .bd-timeline__box { grid-column: 1; margin: 0 0 0 70px; text-align: left; }
}