/* Minimal final alignment layer. The original design remains the visual source of truth. */
#bb-personal{--navy:#263247}

/* Connect the hero to the same page grid without changing its cinematic character. */
#bb-personal .hero{
  border-radius:0 0 42px 42px;
  box-shadow:0 26px 68px rgba(32,42,58,.15);
}
#bb-personal .hero:before{
  content:"";
  position:absolute;
  z-index:2;
  left:clamp(24px,6vw,88px);
  right:clamp(24px,6vw,88px);
  bottom:0;
  height:3px;
  background:#263247;
  opacity:.72;
}
#bb-personal .nav{
  padding-left:clamp(24px,6vw,88px);
  padding-right:clamp(24px,6vw,88px);
}
#bb-personal .hero-copy{
  max-width:1260px;
  padding-left:clamp(24px,6vw,88px);
  padding-right:clamp(24px,6vw,88px);
}

/* Clear, solid editorial statements without gradient typography. */
#bb-personal .fit-inner h3,
#bb-personal .head h2{
  color:#263247;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:initial;
}

/* The statement sits on navy and therefore always needs full white contrast. */
#bb-personal .gap-statement strong{
  color:#fff;
  background:none;
  -webkit-text-fill-color:#fff;
}

/* A restrained version of the brand gradient, distributed across key chapters only. */
#bb-personal .perception-gap .head h2,
#bb-personal .emotional-map .head h2,
#bb-personal #services .head h2,
#bb-personal .outcomes .head h2,
#bb-personal #approach .head h2{
  background:linear-gradient(90deg,#263247 0%,#263247 46%,#6d85bf 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* The Audit title returns to solid navy; the gradient now belongs to the wider journey. */
#bb-personal .audit h2{
  color:#263247;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:#263247;
}

/* Preserve white headings on dark sections. */
#bb-personal .founder h2,
#bb-personal .contact h2,
#bb-personal .value h2{color:#fff}

/* One dark-blue marker for all three pillars. */
#bb-personal .pillar-pair:before,
#bb-personal .pillar-pair-1:before{
  background:#263247;
  color:#f4f6fc;
  box-shadow:inset -1px 0 rgba(255,255,255,.1);
}
#bb-personal .pillar-pair,
#bb-personal .pillar-pair-1{border-color:rgba(38,50,71,.16)}
#bb-personal .pillar-pair>.service-path-step{border-color:rgba(38,50,71,.14)}

/* All conversion buttons use the hero's calm glass treatment. */
#bb-personal a.btn,
#bb-personal button.btn,
#bb-personal #services>.audit-primary,
#bb-personal .audit .btn,
#bb-personal .contact .btn,
#bb-personal .lens-conclusion button,
#bb-personal .form button[type="submit"]{
  min-height:46px;
  padding:10px 18px;
  text-align:center;
  justify-content:center;
  border:1px solid rgba(109,133,191,.34);
  background:rgba(244,246,252,.3);
  color:#263247;
  box-shadow:0 12px 28px rgba(45,62,94,.11);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
#bb-personal .hero .btn,
#bb-personal .contact .btn{
  border-color:rgba(255,255,255,.52);
  background:rgba(244,246,252,.16);
  color:#fff;
  box-shadow:0 12px 28px rgba(12,20,34,.16);
}
#bb-personal a.btn:hover,
#bb-personal button.btn:hover,
#bb-personal .lens-conclusion button:hover,
#bb-personal .form button[type="submit"]:hover{
  background:rgba(200,209,225,.4);
  transform:translateY(-1px);
}

@media(max-width:760px){
  #bb-personal .hero{border-radius:0 0 28px 28px}
  #bb-personal .hero:before{left:18px;right:18px;height:2px}
  #bb-personal .nav{padding-left:17px;padding-right:17px}
  #bb-personal .hero-copy{padding-left:18px;padding-right:18px}
  #bb-personal .head h2{overflow-wrap:anywhere}
  #bb-personal a.btn,
  #bb-personal button.btn,
  #bb-personal #services>.audit-primary,
  #bb-personal .audit .btn,
  #bb-personal .contact .btn,
  #bb-personal .lens-conclusion button,
  #bb-personal .form button[type="submit"]{max-width:340px;min-width:0}
}