/* GENERATED by build/tem-el/make_css.py - do not edit on the server. Source: build/tem/tem.css */
/* Our Team: page level adjustments, plus the three blocks this page introduces: the credential strip,
   the partner card with its credential chips, and the member card grid. */

/* ---------- 01 hero ---------- */
.bhp-tem.chero .paths{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bhp-tem.chero .paths .btn{flex:0 0 auto}
.bhp-tem .cta-core .paths.mid{display:flex;justify-content:center;margin-top:clamp(22px,3vh,28px)}
.bhp-tem.chero .tag .ln{white-space:normal}

.bhp-tem .erow.topalign{align-items:stretch;margin-top:0}
.bhp-tem .erow.topalign .ecol .shead{margin-bottom:clamp(14px,1.8vh,18px)}
.bhp-tem .erow.topalign .ecol > p:first-of-type{margin-top:0}

/* ---------- 02 the credential strip ---------- */
.bhp-tem .credstrip{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,26px);margin:clamp(28px,3.6vh,38px) 0 0;padding:0}
.bhp-tem .credrow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding-top:clamp(16px,2vh,20px);border-top:1px solid var(--line-dark)}
.bhp-tem .credrow .crn{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold);margin-top:4px}
.bhp-tem .credrow p{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.4vw,19px);
  line-height:1.34;letter-spacing:-.02em;color:#fff}
@media (max-width:900px){.bhp-tem .credstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bhp-tem .credstrip{grid-template-columns:1fr}}

/* ---------- 03 the pull quote and the closing line ---------- */
.bhp-tem .closeline{font-family:var(--disp);font-weight:600;font-style:italic;
  font-size:clamp(18px,1.7vw,22px);line-height:1.4;color:var(--navy)}
.bhp-tem .pullq{position:relative;margin:clamp(30px,4vh,44px) 0 0;padding:0 0 0 clamp(22px,2.6vw,34px);
  border-left:3px solid var(--gold)}
.bhp-tem .pullq p{margin:0;font-family:var(--disp);font-weight:600;font-style:italic;
  font-size:clamp(22px,2.8vw,36px);line-height:1.24;letter-spacing:-.02em;color:var(--navy);
  max-width:26ch}

/* ---------- 04 the six partner cards ---------- */
.bhp-tem .ldgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,3.8vh,42px)}
.bhp-tem .ldcard{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--field-cream);border:1px solid var(--line-light);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-tem .ldcard:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(23,29,58,.12);
  border-color:rgba(255,176,0,.5)}
.bhp-tem .ldcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 8%;display:block}
.bhp-tem .ldbody{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.4vh,26px)
  clamp(18px,1.8vw,24px) clamp(22px,2.6vh,28px)}
.bhp-tem .ldcard h3{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.6vw,22px);
  line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.bhp-tem .ldrole{margin:6px 0 0;font-family:var(--body);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.bhp-tem .tchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.bhp-tem .tchip{font-family:var(--body);font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:var(--navy);background:rgba(255,176,0,.14);border:1px solid rgba(255,176,0,.4);
  border-radius:999px;padding:4px 10px}
.bhp-tem .ldbio{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:var(--on-light-2)}
.bhp-tem .ldlink{margin-top:auto;padding-top:clamp(16px,2.2vh,20px);align-self:flex-start;
  color:var(--navy);font-weight:500;font-size:14px;border-bottom:1.5px solid rgba(255,176,0,.7);
  text-decoration:none}
.bhp-tem .ldlink[aria-disabled="true"]{cursor:default}
.bhp-tem .ldlink:hover{border-bottom-color:var(--gold)}
@media (max-width:1000px){.bhp-tem .ldgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bhp-tem .ldgrid{grid-template-columns:1fr}}

/* ---------- 05 the seven member cards ---------- */
.bhp-tem .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,3.8vh,42px)}
.bhp-tem .mcard{display:flex;flex-direction:column;border-radius:14px;
  padding:clamp(20px,2.4vh,26px) clamp(18px,1.8vw,22px);background:#fff;
  border:1px solid var(--line-light);transition:transform .22s ease,box-shadow .22s ease}
.bhp-tem .mcard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(23,29,58,.1)}
.bhp-tem .mcard img{width:72px;height:72px;border-radius:999px;object-fit:cover;object-position:center 15%;
  display:block}
.bhp-tem .mcard h3{margin:16px 0 0;font-family:var(--disp);font-weight:600;
  font-size:clamp(17px,1.4vw,19px);line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.bhp-tem .mrole{margin:5px 0 0;font-family:var(--body);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.bhp-tem .mcard p:not(.mrole){margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--on-light-2)}
.bhp-tem .mlink{margin-top:auto;padding-top:clamp(14px,2vh,18px);align-self:flex-start;color:var(--navy);
  font-weight:500;font-size:13.5px;border-bottom:1.5px solid rgba(255,176,0,.7);text-decoration:none}
.bhp-tem .mlink[aria-disabled="true"]{cursor:default}
.bhp-tem .mlink:hover{border-bottom-color:var(--gold)}
@media (max-width:1100px){.bhp-tem .mgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bhp-tem .mgrid{grid-template-columns:1fr}}

/* ---------- 06 the rail on a deep surface ---------- */
.bhp-tem.sec-deep .prail .pbody{background:rgba(247,242,231,.05);border-color:rgba(247,242,231,.14)}
.bhp-tem.sec-deep .prail .pbody h3{color:#fff}
.bhp-tem.sec-deep .prail .pbody p{color:var(--on-dark-2)}

/* ---------- 07 the note under the final CTA ---------- */
.bhp-tem .ctanote{margin:clamp(16px,2.2vh,22px) 0 0;font-family:var(--body);font-size:14px;
  letter-spacing:.04em;color:rgba(247,242,231,.56);text-align:center}


/* ---------- Elementor parity for this page ---------- */
.bhp-tem .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-tem .paths{display:flex}
.bhp-tem .shead.e-con{margin-block-end:20px!important}
/* the head-to-first-block gap is the head's own margin; a row that follows another block keeps its space */
.bhp-tem .shead + .erow.e-con,.bhp-tem .shead + .statrow.e-con,.bhp-tem .shead + .prail.e-con,
.bhp-tem .shead + .flow.e-con,.bhp-tem .shead + .svcgrid.e-con,
.bhp-tem .shead + .svcgrid.three.e-con,.bhp-tem .shead + .statrow.e-con,
.bhp-tem .shead + .isel.e-con,.bhp-tem .shead + .tgrid.e-con,
.bhp-tem .shead + .elementor-widget-bhp_index_selector{margin-block-start:0!important}
.bhp-tem .erow.e-con{margin-block-start:clamp(28px,3.4vh,38px)!important}
/* the author headshot matches the other pages exactly: 56 by 70 on a 12px corner */
.bhp-tem .author .abox img{width:56px;height:70px;border-radius:12px;object-fit:cover}
.bhp-tem .author .abox .elementor-widget-image{width:auto;flex:0 0 auto}
/* the shared text-editor rule outranks Elementor's own per widget CSS for these two, so both are
   stated here: the closing link line and the note under the final CTA */
.bhp-tem .ecol .moat p,.bhp-tem .ecol .moat p a{font-size:15px;line-height:24.3px}
.bhp-tem .ctanote p{color:rgba(247,242,231,.56)!important;font-size:14px;line-height:1.62}
/* 04 and 05 the figure strips */
.bhp-tem .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-tem .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tem .sec-white .statrow .lstat .elementor-widget-text-editor p,
.bhp-tem .sec-cream .statrow .lstat .elementor-widget-text-editor p{color:var(--on-light-2)!important}
.bhp-tem .sec-white .statrow .lstat.e-con,.bhp-tem .sec-cream .statrow .lstat.e-con{border-color:var(--line-light)}
/* 13 the three card team grid */
.bhp-tem .svcgrid.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
/* 06, 07 and 13 the two across card grids */
.bhp-tem .svcgrid.two.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
/* 04 the four service cards */
.bhp-tem .fillgrid.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-tem .fillcard.e-con{height:100%}
.bhp-tem .fillcard .filllink{margin-block-start:auto!important;padding-top:clamp(16px,2.2vh,22px)}
.bhp-tem .fillcard .filllink p a{color:#fff;font-weight:500;font-size:14px;
  border-bottom:1.5px solid rgba(255,176,0,.7);text-decoration:none}
/* 02 the pull quote */
.bhp-tem .pullq.e-con{position:relative;padding-left:clamp(22px,2.6vw,34px);
  border-left:3px solid var(--gold);margin-block-start:clamp(30px,4vh,44px)!important}
.bhp-tem .pullq .pq p{font-family:var(--disp);font-weight:600;font-style:italic;letter-spacing:-.02em}
/* 05 the beliefs and the values line */
.bhp-tem .beliefs.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important;
  margin-block-start:clamp(30px,3.8vh,42px)!important}
.bhp-tem .brow .brule.e-con{width:22px;min-height:3px;height:3px;margin-top:11px;background:var(--gold);
  border-radius:2px}
/* 07 the licensing strip */
.bhp-tem .licstrip .licdot.e-con{width:6px;min-height:6px;height:6px;border-radius:50%;
  background:var(--gold)}
.bhp-tem .prooflinks .prooflink p a{color:#fff;font-weight:500;font-size:15px;
  border-bottom:1.5px solid rgba(255,176,0,.7);text-decoration:none}
/* 08 the leadership cards */
.bhp-tem .lgrid.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tem .lcard.e-con{overflow:hidden;padding:0;height:100%}
.bhp-tem .lcard img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 8%;display:block}
.bhp-tem .lcard .lname{margin:clamp(18px,2.2vh,22px) clamp(18px,1.8vw,22px) 0}
.bhp-tem .lcard .ltitle{margin:6px clamp(18px,1.8vw,22px) clamp(20px,2.4vh,24px)}
.bhp-tem .engcard.e-con{height:100%}
.bhp-tem .engcard .engt a{color:#fff;text-decoration:none;border:0}
.bhp-tem .engcard .engarrow.e-con{width:22px;min-height:10px;height:10px;background:var(--gold);
  clip-path:polygon(0 45%,72% 45%,72% 0,100% 50%,72% 100%,72% 55%,0 55%);opacity:.85;
  transition:transform .22s ease}
.bhp-tem .engcard:hover .engarrow.e-con{transform:translateX(5px)}
/* 02: the row is the section's first block, so it carries no top margin of its own */
.bhp-tem .a2 .erow.e-con{margin-block-start:0!important}
/* the head sits inside the copy column wherever a device stands beside it, so the device's top edge
   lines up with the headline instead of starting below it */
.bhp-tem .erow.topalign.e-con{margin-block-start:0!important}
.bhp-tem .erow.topalign .ecol .shead.e-con{margin-block-end:16px!important}
.bhp-tem .svcledger.e-con{display:flex}
.bhp-tem .svcrow.e-con{align-items:start}
.bhp-tem .svcname .elementor-heading-title{color:var(--navy)}
.bhp-tem .svcrow:hover .svcname h3.elementor-heading-title{color:var(--gold-deep)}
.bhp-tem .svctext .elementor-widget-text-editor p{max-width:66ch}
/* 06 the funding band runs three figures */
.bhp-tem .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tem .a6 .statrow .lstat .fig .elementor-heading-title{font-size:clamp(26px,2.4vw,34px)}
/* 02 the covers panel */
.bhp-tem .verdict.e-con{align-self:stretch;border-radius:14px;overflow:hidden;position:relative;
  padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px);background:var(--field-navy);
  box-shadow:0 24px 60px rgba(23,29,58,.2)}
.bhp-tem .verdict.e-con::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)}
.bhp-tem .verdict .vrow.e-con{position:relative}
.bhp-tem .lead-col .elementor-widget-text-editor p{font-size:20px;line-height:1.7;max-width:46ch}
.bhp-tem .a2 .shead.e-con{margin-block-end:16px!important}
/* 08 the three models */
.bhp-tem .svcgrid.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tem .svcgrid.two .svc.e-con{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-tem .svcgrid.two .svc.e-con:hover{transform:translateY(-3px);
  box-shadow:0 22px 54px rgba(23,29,58,.12);border-color:rgba(255,176,0,.45)}
.bhp-tem .secfollow p{max-width:92ch}
/* 06 the record */
.bhp-tem .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-tem .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
/* 08 the process rail */
.bhp-tem .prail.e-con{position:relative;padding:0}
.bhp-tem .prow.e-con{position:relative}
.bhp-tem .prow.e-con:not(.last)::before{content:"";position:absolute;left:21px;top:38px;bottom:-6px;
  width:2px;background:linear-gradient(180deg,rgba(255,176,0,.55),rgba(255,176,0,.3))}
.bhp-tem .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px}
.bhp-tem .pnode .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid rgba(255,176,0,.55);
  color:var(--gold-deep);box-shadow:0 0 0 6px var(--cream);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.bhp-tem .pbody.e-con{padding:clamp(16px,2vh,20px) clamp(20px,2vw,26px);border-radius:14px;
  background:var(--field-cream);border:1px solid var(--line-light);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-tem .pbody .elementor-widget-text-editor p{max-width:78ch}
.bhp-tem .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy);transform:scale(1.06)}
.bhp-tem .prow.e-con:hover .pbody.e-con{transform:translateX(4px);box-shadow:0 18px 44px rgba(23,29,58,.1);
  border-color:rgba(255,176,0,.45)}
.bhp-tem .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy)}
.bhp-tem .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)}
/* 07 the cost band runs three figures */
.bhp-tem .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tem .a7 .statrow .lstat .fig .elementor-heading-title{font-size:clamp(26px,2.4vw,34px)}
/* 05 and 06 the subheads inside the copy column */
.bhp-tem .sec-white .subh .elementor-heading-title,
.bhp-tem .sec-cream .subh .elementor-heading-title{color:var(--navy)}
/* 11 the four stage flow */
.bhp-tem .flow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-tem .fstage.e-con{position:relative;padding:clamp(24px,3vh,30px) clamp(22px,2.2vw,28px);
  border-radius:14px;background:#fff;border:1px solid var(--line-light);
  box-shadow:0 14px 40px rgba(23,29,58,.06)}
/* the step card's gold edge is a border now, stated once in bhp-fes-el.css, so the old
   pseudo-element bar is gone from every page rather than redrawn on each one */
/* the vertical band label wraps instead of setting the band height */
.bhp-tem .closeband .ck .elementor-heading-title{writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:110px;white-space:normal;line-height:1.35}
.bhp-tem .closeband.e-con{width:auto}
/* 12 the dual author box */
.bhp-tem .author.dual.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  align-items:start!important;max-width:920px;margin-inline:auto}
.bhp-tem .author.dual > .elementor-widget-heading{grid-column:1 / -1;justify-self:center;padding-top:8px}
.bhp-tem .author.dual .abox img{width:56px!important;height:70px;object-fit:cover;object-position:50% 20%;
  border-radius:12px}
/* custom widget buttons never inherit the theme's link colour */
.bhp-tem .econ button{color:#fff}
/* the member card's shared paragraph rule also claims its link line, and Elementor's own image
   widget CSS beats a class rule on the radius: both restated here so the two builds agree */
.bhp-tem .mcard .mlink p,.bhp-tem .mcard .mlink p a{font-size:13.5px!important;line-height:1.5!important}
.bhp-tem .ldcard .ldlink p,.bhp-tem .ldcard .ldlink p a{font-size:14px!important;line-height:1.5!important}
/* the image widget writes its own width and height inline, which beat the card rules and blew the
   photos up to the full card: restate both card photo shapes at widget specificity */
.bhp-tem .mcard .elementor-widget-image{width:72px!important;flex:0 0 auto}
.bhp-tem .mcard .elementor-widget-image img{width:72px!important;height:72px!important;
  border-radius:999px!important;object-fit:cover;object-position:center 15%;display:block}
.bhp-tem .ldcard .elementor-widget-image{width:100%!important}
.bhp-tem .ldcard .elementor-widget-image img{width:100%!important;height:auto!important;
  aspect-ratio:4/5;object-fit:cover;object-position:center 8%;display:block}
/* every widget wrapper carries the card's vertical rhythm in its own margin, and the embedded static
   rules then added the same gap again on the element inside: keep the wrapper's, drop the inner one */
.bhp-tem .mcard h3,.bhp-tem .mcard p,.bhp-tem .ldcard h3,.bhp-tem .ldcard p{margin-top:0!important}
.bhp-tem .mcard .mlink,.bhp-tem .ldcard .ldlink{margin-top:auto!important}
/* the static page puts .closeline on the paragraph itself; here it lands on the widget wrapper,
   so the paragraph inside has to be told the same thing */
.bhp-tem .closeline p{font-family:var(--disp)!important;font-weight:600!important;font-style:italic;
  font-size:clamp(18px,1.7vw,22px)!important;line-height:1.4!important;color:var(--navy)!important}
@media (max-width:1100px){
  .bhp-tem .flow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  .bhp-tem .svcgrid.two.e-con{grid-template-columns:1fr!important}
  .bhp-tem .pnodewrap.e-con{flex:0 0 36px}
  .bhp-tem .pnode .elementor-heading-title{width:36px;height:36px;font-size:16px;
    box-shadow:0 0 0 5px var(--cream)}
  .bhp-tem .prow.e-con:not(.last)::before{left:17px;top:32px}
  .bhp-tem .author.dual.e-con{grid-template-columns:1fr!important}
}
@media (max-width:900px){
  .bhp-tem .statrow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-tem .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-tem .svcgrid.two.e-con{grid-template-columns:1fr!important}
  .bhp-tem .ldgrid.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-tem .mgrid.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-tem .credstrip.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:620px){
  .bhp-tem .fillgrid.four.e-con{grid-template-columns:1fr!important}
  .bhp-tem .lgrid.e-con{grid-template-columns:1fr!important}
}
/* the static page drops these to one column on a phone; the !important two-column rule above was
   holding them at two, and the uppercase role labels then overflowed their 149px card */
@media (max-width:600px){
  .bhp-tem .ldgrid.e-con{grid-template-columns:1fr!important}
  .bhp-tem .mgrid.e-con{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  .bhp-tem .credstrip.e-con{grid-template-columns:1fr!important}
}
@media (max-width:700px){
  .bhp-tem .svcgrid.three.e-con{grid-template-columns:1fr!important}
  .bhp-tem .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-tem .statrow.four.e-con{grid-template-columns:1fr!important}
  .bhp-tem .flow.four.e-con{grid-template-columns:1fr!important}
}

/* ==========================================================================
   02 the credential strip is the hero's proof panel, one band lower.

   Version one was four lines of small type under a hairline with a decorative 01-04 in front of each,
   at body weight, so nothing read as proof. Version two made each one a bordered card, and four
   separate boxes read as objects dropped under the hero rather than a continuation of it.

   The hero console already ends in `.ec-foot`: one panel on a darker field, split by hairlines, each
   cell a gold display figure over its label. This is that component at section scale. The panel owns
   the fill, the border and the radius; a cell owns nothing but its hairline, so the four read as one
   object. Keep the `gap:0` in step with the composer, or the hairlines stop touching.

   These rules are scoped `.e-con`, so they belong to the Elementor page and leave the static team
   page's own credential markup alone.
   ========================================================================== */
/* Why this section is cream and not dark.

   It was a dark band directly under a dark hero, and the two together weighed the top of the page
   down. It is cream now, the same light surface the rest of the page uses, and the dark stops at the
   hero. That also retires the problem the dark version had: `bhp-csp.css` gives every `.sec-navy` and
   `.sec-deep` a radial gold wash anchored at the top right corner, the hero is `.chero-el` and has no
   such wash, so the glow began abruptly at the boundary and lit a rectangle into the top right of the
   section, measured rgb(45,52,48) just below the seam against rgb(17,35,55) just above it. `.sec-cream`
   carries no wash, so there is nothing to cancel. Worth remembering the next time a deep band is put
   under the hero on any page.

   The panel keeps a white fill rather than sitting flat on the cream: section 3 below is cream too, so
   the boundary between the two sections is the panel itself rather than a change of colour.

   Sections 2 and 3 are now both cream, and a cream section is not flat: `bhp-csp.css` sets
   `--field-cream: linear-gradient(180deg,#FBF8F1 0%,#F7F2E7 100%)`, plus a `::before` gold wash on its
   own top right corner. Each section runs that gradient over its own height, so two in a row means
   section 2 fades down to #F7F2E7 and section 3 restarts at #FBF8F1, drawing a line across the join:
   measured rgb(247,242,231) just above it against rgb(251,248,241) just below.

   One continuous cream run should be lit once, at the top of the run. So the second section of the
   pair takes the run's end colour flat and gives up its wash. Only the pair on this page is touched;
   every other cream section keeps its own gradient, because every other one follows a different
   surface, where the change is the point. */
.bhp-tem.sec-cream.a3{background:#F7F2E7}
.bhp-tem.sec-cream.a3::before{background:none}
.bhp-tem .credstrip.e-con{background:#fff;box-shadow:0 18px 44px rgba(23,29,58,.06);
  overflow:hidden;align-items:stretch;gap:0;
  grid-template-columns:repeat(4,1fr);margin-top:clamp(28px,3.6vh,38px)}
.bhp-tem .credcell{display:flex;flex-direction:column;height:100%;
  transition:background-color .25s ease}
.bhp-tem .credcell + .credcell{border-left:1px solid rgba(23,29,58,.13)}
.bhp-tem .credcell:hover{background:rgba(255,176,0,.05)}
.bhp-tem .credcell .credfig .elementor-heading-title{color:var(--gold-deep,#E29C00)}
.bhp-tem .credcell .credtxt p{margin:0}
/* wrapped, the divider turns the corner with the grid: the cell that starts a row loses its left rule
   and every cell below the first row gains a top one */
@media (max-width:900px){
  .bhp-tem .credcell:nth-child(2n+1){border-left:0}
  .bhp-tem .credcell:nth-child(n+3){border-top:1px solid rgba(23,29,58,.13)}
}
/* stacked, every cell loses its left rule. `.credcell + .credcell` has to be named again here:
   it outranks a bare `.credcell` on specificity, so the plain rule alone left a stray vertical
   hairline on cells 2 and 4 (measured at 390px). */
@media (max-width:560px){
  .bhp-tem .credcell,.bhp-tem .credcell + .credcell{border-left:0}
  .bhp-tem .credcell + .credcell{border-top:1px solid rgba(23,29,58,.13)}
}

/* 05 three specialists across, not four: there are six of them, so four columns left a full row and a
   stranded row of two with half the band empty beside it. Three gives two full rows, and it matches
   the partner grid above it, so the two halves of the team read as one system. */
.bhp-tem .mgrid.e-con{grid-template-columns:repeat(3,1fr)}