/* GENERATED by build/tjc-el/make_css.py - do not edit on the server. Source: build/tjc/tjc.css */
/* TJC Accreditation: page level adjustments only. Every component on this page already exists in the
   system, so there is nothing new to define here. */

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

/* ---------- the console ring carries this page's longest figure ---------- */
/* "20,500+" measures 115px at the shared 30px, inside a 112px inner circle, so it crossed the stroke
   on both sides. The ring stays 124px for consistency with the other pages; the figure gives way. */
.tjc .ec-fig b{font-size:24px}
.tjc .ec-fig small{max-width:88px}

/* ---------- 02 the answer column, head inside so both columns start and end together ---------- */
.tjc .a2 .erow{align-items:stretch}
.tjc .a2 .shead{margin-bottom:clamp(14px,1.8vh,18px)}
.tjc .lead-col{display:flex;flex-direction:column;justify-content:flex-start}
.tjc .lead-col p{font-size:20px!important;line-height:1.7;color:var(--navy);max-width:46ch}

/* ---------- 05 and 06 the subheads inside the copy column ---------- */
.tjc .sec-white .subh,.tjc .sec-cream .subh{color:var(--navy)}
.tjc .ecol .subh + p{margin-top:0}

/* ---------- 07 the cost band runs three figures ---------- */
.tjc .statrow.three{grid-template-columns:repeat(3,1fr)}
.tjc .a7 .statrow .lstat .fig{font-size:clamp(26px,2.4vw,34px)}
.tjc .a7 .erow{margin-top:clamp(28px,3.4vh,38px)}

/* ---------- 10 the comparison pair, with its paragraph beneath ---------- */
.tjc .svcgrid.two{grid-template-columns:repeat(2,1fr)}
.tjc .svcgrid.two .svc .sysn{display:block;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.16em;color:var(--gold-deep);margin-bottom:8px}
.tjc .svcgrid.two .svc{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tjc .svcgrid.two .svc:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(23,29,58,.12);
  border-color:rgba(255,176,0,.45)}
.tjc .secfollow{margin:clamp(24px,3vh,32px) 0 0;font-size:17px;line-height:1.8;color:var(--on-light-2);
  max-width:92ch}

/* ---------- 11 the four stage flow ---------- */
.tjc .flow.four{grid-template-columns:repeat(4,1fr)}

/* a row that follows another block keeps its own spacing: the shared rule zeroes it */
.tjc .flow + .erow{margin-top:clamp(28px,3.4vh,38px)}

/* ---------- 13 the author block, as one centred unit ---------- */
.tjc .author.dual{max-width:920px;margin-inline:auto;gap:clamp(24px,2.6vw,44px);align-items:start}
.tjc .author.dual .abox{align-items:flex-start}
.tjc .author.dual .abox img{margin-top:3px}
.tjc .author.dual > small{justify-self:center;padding-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tjc .flow.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .tjc .svcgrid.two{grid-template-columns:1fr}
  .tjc .secfollow{max-width:none}
}
@media (max-width:700px){
  .tjc .flow.four{grid-template-columns:1fr}
  .tjc .statrow.three{grid-template-columns:1fr}
  .tjc .statrow.three .lstat + .lstat{border-left:0;border-top:1px solid var(--line-dark)}
  .tjc .chero .paths{flex-direction:column;align-items:stretch}
}


/* ---------- Elementor parity for this page ---------- */
/* The film rules moved to bhp-csp.css on 2026-09-22. Every page kept its own copy with its
   own numbers, which is how one site ended up with a different video block on every page.
   The shared sheet owns them now; a copy here would only override it again. */


/* ---------- 2026-09-21, the client's page walkthrough (Loom 1424da43) ---------- */
/* 0:50 the console went and its video has not arrived, so the hero runs as one wide column */
.bhp-tjc .herowide .herocol{max-width:none}
.bhp-tjc .herowide .herocol > .elementor-widget-heading .elementor-heading-title{max-width:20ch}
.bhp-tjc .herowide .herocol > .elementor-widget-text-editor p{max-width:74ch}
/* 3:05 "have the video and then have this next to the video, and have them be the same height" */
.bhp-tjc .teamwrap{width:100%}
.bhp-tjc .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-tjc .paths{display:flex}
.bhp-tjc .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-tjc .shead + .erow.e-con,.bhp-tjc .shead + .statrow.e-con,.bhp-tjc .shead + .prail.e-con,
.bhp-tjc .shead + .flow.e-con,.bhp-tjc .shead + .svcgrid.e-con,
.bhp-tjc .shead + .svcgrid.two.e-con{margin-block-start:0!important}
.bhp-tjc .erow.e-con{margin-block-start:clamp(28px,3.4vh,38px)!important}
/* Client 2026-09-28: "the proforma thing, have some proper spacing, fix it please", then "did you
   fix ALL pages with that spacing issue of the proforma thing?" The five-step strip is on two
   pages, this one and the other licensing/accreditation page, so both get the same numbers.
   Measured at 1440 before the fix: 20px between the H2 and the five step cards against 38px under
   them, so the head sat on the cards. The cause is the line above: `.shead + .flow` is zeroed
   along with every other block that follows a head, because most of those set their own top
   margin and the step grid does not. It gets the standard block rhythm instead, the same clamp
   the .erow below it already uses, so the strip is evenly spaced top and bottom.
   The selector carries .four/.five so it outranks the zeroing rule, which is one class shorter. */
.bhp-tjc .shead + .flow.four.e-con,
.bhp-tjc .shead + .flow.five.e-con{margin-block-start:clamp(28px,3.4vh,38px)!important}
/* and the cards themselves breathe: the number, the title and the line under it were on 10px and
   8px, tighter than any other card grid on the site. */
.bhp-tjc .fstage .fstitle{margin-block-start:12px!important}

/* the console ring: "20,500+" is wider than the ring's inner circle at the shared 30px */
.bhp-tjc .ec-fig b{font-size:24px}
.bhp-tjc .ec-fig small{max-width:88px}
/* 02 the covers panel */
.bhp-tjc .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-tjc .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-tjc .verdict .vrow.e-con{position:relative}
.bhp-tjc .lead-col .elementor-widget-text-editor p{font-size:20px;line-height:1.7;max-width:46ch}
.bhp-tjc .a2 .shead.e-con{margin-block-end:16px!important}
/* 05 the comparison pair */
.bhp-tjc .svcgrid.two.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
.bhp-tjc .svcgrid.two .svc.e-con{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-tjc .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-tjc .secfollow p{max-width:92ch}
/* 06 the record */
.bhp-tjc .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-tjc .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
/* 08 the process rail */
.bhp-tjc .prail.e-con{position:relative;padding:0}
.bhp-tjc .prow.e-con{position:relative}
.bhp-tjc .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-tjc .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px}
.bhp-tjc .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-tjc .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-tjc .pbody .elementor-widget-text-editor p{max-width:78ch}
.bhp-tjc .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy);transform:scale(1.06)}
.bhp-tjc .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-tjc .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy)}
.bhp-tjc .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)}
/* 07 the cost band runs three figures */
.bhp-tjc .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-tjc .a7 .statrow .lstat .fig .elementor-heading-title{font-size:clamp(26px,2.4vw,34px)}
/* 05 and 06 the subheads inside the copy column */
.bhp-tjc .sec-white .subh .elementor-heading-title,
.bhp-tjc .sec-cream .subh .elementor-heading-title{color:var(--navy)}
/* 11 the four stage flow */
.bhp-tjc .flow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
/* Client 2026-09-25, 0:36:42: "Just have a business plan as number two, proforma as
   number three." Five stages now, at the same breakpoints the business plan page uses. */
.bhp-tjc .flow.five.e-con{display:grid!important;grid-template-columns:repeat(5,1fr)!important}
@media (max-width:1100px){
  .bhp-tjc .flow.five.e-con{grid-template-columns:repeat(3,1fr)!important}
}
@media (max-width:700px){
  .bhp-tjc .flow.five.e-con{grid-template-columns:1fr!important}
}
.bhp-tjc .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-tjc .closeband .ck .elementor-heading-title{writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:110px;white-space:normal;line-height:1.35}
.bhp-tjc .closeband.e-con{width:auto}
/* 12 the dual author box */
.bhp-tjc .author.dual.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  align-items:start!important;max-width:920px;margin-inline:auto}
.bhp-tjc .author.dual > .elementor-widget-heading{grid-column:1 / -1;justify-self:center;padding-top:8px}
.bhp-tjc .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-tjc .econ button{color:#fff}
@media (max-width:1100px){
  .bhp-tjc .flow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  .bhp-tjc .svcgrid.two.e-con{grid-template-columns:1fr!important}
  .bhp-tjc .pnodewrap.e-con{flex:0 0 36px}
  .bhp-tjc .pnode .elementor-heading-title{width:36px;height:36px;font-size:16px;
    box-shadow:0 0 0 5px var(--cream)}
  .bhp-tjc .prow.e-con:not(.last)::before{left:17px;top:32px}
  .bhp-tjc .author.dual.e-con{grid-template-columns:1fr!important}
}
@media (max-width:700px){
  .bhp-tjc .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-tjc .statrow.four.e-con{grid-template-columns:1fr!important}
  .bhp-tjc .flow.four.e-con{grid-template-columns:1fr!important}
}