/* GENERATED by build/fes-el/make_css.py - do not edit on the server. Source: build/fes/fes.css */
/* Rehab Feasibility Study: only the components the pillars do not already have. Everything else (surfaces,
   heads, ledger rows, panels, bands, stat strips, accordion, CTA, dual author box, type) is shared, so this
   page reads as the same site. */

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

/* ---------- 05 and 11 stat strips carry a head of their own ---------- */
.a5 .shead,.a11 .shead{margin-bottom:clamp(18px,2.4vh,26px)}
.a11 .statrow{margin-bottom:clamp(24px,3vh,34px)}
.a11 .erow{margin-top:0}

/* ---------- 02 the atomic answer and its finding panel ---------- */
/* The definition is the AI-extractable paragraph, so it is set above body size and given its own measure.
   The finding panel stretches to the copy, which is what keeps the row from ending in dead space. */
/* The head sits inside the copy column here, so the two columns start on the same line and the panel
   stretches to the same bottom. Nothing hangs, and neither column carries trailing space. */
.fes .a2 .erow{align-items:stretch}
.fes .a2 .shead{margin-bottom:clamp(14px,1.8vh,18px)}
.fes .lead-col{display:flex;flex-direction:column;justify-content:flex-start}
.fes .lead-col p{font-size:20px!important;line-height:1.7;color:var(--navy);max-width:46ch}
.verdict{align-self:stretch;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  position:relative;padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px);
  background:var(--field-navy);color:var(--on-dark);box-shadow:0 24px 60px rgba(23,29,58,.2)}
.verdict::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%)}
.verdict .sk{position:relative;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.vlist{position:relative;list-style:none;margin:12px 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.vrow{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-content:center;padding:14px 0;border-top:1px solid var(--line-dark)}
.vrow:first-child{border-top:0}
.vrow .vk{grid-row:1 / span 2;align-self:start;padding-top:7px;font-family:var(--body);
  font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--gold)}
.vrow .vt{font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.15;
  letter-spacing:-.02em;color:#fff}
.vrow .vd{font-family:var(--body);font-size:14px;line-height:1.5;color:var(--on-dark-2);margin-top:4px}
.vfoot{position:relative;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-dark);
  font-family:var(--body);font-size:13.5px;line-height:1.6;color:var(--on-dark-2)}

/* ---------- 04 what a study includes: the index selector ---------- */
/* Terms on the left, the selected term's own sentence on the right. Every panel stays in the DOM, stacked in
   one grid cell, so the frame is as tall as the longest entry and nothing jumps when you switch. */
.isel{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(20px,2.4vw,40px);
  align-items:stretch}
.isel-list{display:flex;flex-direction:column;gap:2px}
.isel-list .sk{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.isel-tab{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;
  padding:14px 16px 14px 0;background:none;border:0;border-top:1px solid var(--line-light);
  text-align:left;cursor:pointer;position:relative;transition:padding .2s ease}
.isel-tab:first-of-type{border-top:0}
.isel-tab .n{font-family:var(--body);font-size:11px;font-weight:500;line-height:1.5;
  letter-spacing:.16em;color:var(--gold-deep);transition:color .2s ease}
.isel-tab .t{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.25;
  letter-spacing:-.015em;color:var(--on-light-2);transition:color .2s ease}
.isel-tab::after{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;background:var(--gold);border-radius:2px;transition:transform .22s ease}
.isel-tab:hover .t{color:var(--navy)}
.isel-tab.on .t{color:var(--navy)}
.isel-tab.on::after{transform:translateY(-50%) scaleY(1)}
.isel-tab.on{padding-left:14px}
.isel-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.isel-detail{display:grid;border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);
  padding:clamp(26px,3.4vh,36px) clamp(24px,2.4vw,34px);position:relative;overflow:hidden}
.isel-panel{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(6px);
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .22s ease,transform .22s ease}
.isel-panel.on{opacity:1;visibility:visible;transform:none}
.isel-panel .pn{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold-deep)}
/* the panel carries the brief's sentence exactly as written, term first, so nothing reads as a fragment */
.isel-panel p{margin:14px 0 0;font-size:17px;line-height:1.8;color:var(--on-light-2);max-width:54ch}
.isel-panel p b{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:600;
  font-size:clamp(22px,1.9vw,27px);line-height:1.18;letter-spacing:-.02em;color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .isel-panel{transition:none}
}

/* ---------- 08 the pitfalls: a bordered risk register ---------- */
.register{border:1px solid var(--line-light);border-radius:14px;background:var(--field-cream);
  border-left:3px solid var(--gold);padding:clamp(8px,1.4vh,14px) clamp(22px,2.4vw,32px)}
.rlist{list-style:none;margin:0;padding:0}
.rrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.8vw,24px);align-items:start;
  padding:clamp(18px,2.4vh,24px) 0;border-top:1px solid var(--line-light)}
.rrow:first-child{border-top:0}
.rring{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border-radius:50%;border:1.5px solid rgba(255,176,0,.5);background:rgba(255,176,0,.12);
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--gold-deep);
  transition:background .2s ease,border-color .2s ease}
.rrow h3{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.2;
  letter-spacing:-.02em;color:var(--navy);transition:color .2s ease}
.rrow p{margin:8px 0 0;font-size:16px;line-height:1.75;color:var(--on-light-2);max-width:80ch}
.rrow:hover .rring{background:rgba(255,176,0,.24);border-color:var(--gold)}
.rrow:hover h3{color:var(--gold-deep)}

/* ---------- 09 the sequence, drawn as a sequence ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px)}
.fstage{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 takes the same edge as every other card. It could never clip a bar anyway: the
   connector between two steps is drawn outside the card, so overflow has to stay visible. */
.fstage + .fstage::after{content:"";position:absolute;left:calc(clamp(18px,2vw,28px) * -1);top:50%;
  width:clamp(18px,2vw,28px);height:1px;background:var(--line-light)}
.fstage .fn{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold-deep)}
.fstage h3{margin:10px 0 0;font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.6vw,23px);
  line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.fes .fstage p{margin:8px 0 0;font-size:15px;line-height:1.6;color:rgba(23,29,58,.62)}
.fes .seqcopy{margin:clamp(26px,3.2vh,34px) 0 0;font-size:17px;line-height:1.8;
  color:var(--on-light-2);max-width:92ch}

/* ---------- 10 the process, drawn as a rail ---------- */
/* A three column row reads as a table, which is what the first version looked like. Here the numerals sit
   on a continuous gold rail and each step's title and sentence stack in one column, so the eye follows the
   process down rather than scanning across. */
.prail{list-style:none;margin:0;padding:0;position:relative}
.prow{position:relative;display:grid;grid-template-columns:44px 1fr;gap:clamp(18px,2vw,28px);
  align-items:start;padding:clamp(14px,1.8vh,18px) 0}
/* the connector is drawn per row, never past the last node */
.prow: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))}
.pnode{position:relative;z-index:1;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);
  font-family:var(--disp);font-weight:600;font-size:18px;line-height:1;letter-spacing:-.02em;
  color:var(--gold-deep);box-shadow:0 0 0 6px #fff;transition:background .2s ease,color .2s ease,
  border-color .2s ease,transform .2s ease}
.pbody{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}
.pbody h3{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.55vw,22px);
  line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.pbody p{margin:8px 0 0;font-size:16px;line-height:1.75;color:var(--on-light-2);max-width:78ch}
.prow:hover .pnode{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:scale(1.06)}
.prow:hover .pbody{transform:translateX(4px);box-shadow:0 18px 44px rgba(23,29,58,.1);
  border-color:rgba(255,176,0,.45)}
/* the last step is the deliverable, so the rail ends on it */
.prow.last .pnode{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.prow.last .pbody{border-color:rgba(255,176,0,.45)}
.a10 .closeband{margin-top:clamp(26px,3.2vh,34px)}

/* the band's label is set vertically, so a long one used to set the whole band's height. Cap it and let
   it wrap into a second vertical line instead: the band stays as tall as its quote. */
.closeband .ck{max-height:110px;white-space:normal;line-height:1.35;align-self:center}

/* ---------- panels on this page carry small bold leaders ---------- */
.side-panel .qlist b{font-family:var(--body);font-weight:600}
.side-panel.dark .qlist b{color:var(--gold)}
.side-panel.cream .qlist b{color:var(--gold-deep)}

/* ---------- 14 the final CTA band, in the same rhythm as the other pages ---------- */
/* The doubled author box is shared with the guide page, so these rules are scoped to this page: the two
   columns sit as one centred unit under the hairline, and the date centres beneath them. */
.fes .author.dual{max-width:920px;margin-inline:auto;gap:clamp(24px,2.6vw,44px);align-items:start}
.fes .author.dual .abox{align-items:flex-start}
.fes .author.dual .abox img{margin-top:3px}
.fes .author.dual > small{justify-self:center;padding-top:8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .a10 .steprow{grid-template-columns:1fr}
  .isel{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .fstage + .fstage::after{left:50%;top:calc(clamp(18px,2vw,28px) * -1);width:1px;
    height:clamp(18px,2vw,28px)}
  .rrow p{max-width:none}
}
@media (max-width:700px){
  .fes .statrow.four{grid-template-columns:1fr}
  .fes .statrow.four .lstat + .lstat{border-left:0;border-top:1px solid var(--line-dark)}
  .fes .chero .paths{flex-direction:column;align-items:stretch}
}

/* ==========================================================================
   2026-09-04: the gold accent is the card's own top edge.

   It used to be an absolutely positioned 3px bar. A bar cannot follow a 14px
   corner: clipped it ends in a stub, unclipped it hangs over the arc, and both
   read as a strip stuck on top of the card. A border does follow the radius,
   exactly, at every corner and every zoom level. The hover still answers: the
   edge goes from the resting gold to full gold.
   ========================================================================== */

/* 2026-09-04: a grid track is sized minmax(auto,1fr), so its minimum is the item's min-content. The
   selector's tab row therefore refused to go below 396px and pushed itself past the screen edge at
   390. min-width:0 lets the track shrink, which is what makes the copy wrap instead of overflow. */
.isel{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}
.isel-list,.isel-tab,.isel-tab .t,.isel-panel{min-width:0}
.isel-tab .t{overflow-wrap:break-word}
@media (max-width:900px){.isel{grid-template-columns:minmax(0,1fr)}}

/* the tab is a <button>, and a button inherits nowrap from the reset, so a label that needs two lines
   on a phone ran off the screen instead of wrapping */
.isel-tab,.isel-tab .t,.isel-tab .n{white-space:normal}


/* ---------- 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. */

.bhp-fes .clipcol{min-width:0}

/* ---------- 2026-09-21, the client's page walkthrough (Loom cffc3e90) ---------- */
/* 3:10 the film with its H3 above it, and at 0:59 his old-website square clip beside it */
.bhp-fes .clipcol .bhpvloop,.bhp-fes .clipcol .bhpvloop-v{max-width:100%}
.bhp-fes .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-fes .paths{display:flex}
.bhp-fes .shead.e-con{margin-block-end:20px!important}
.bhp-fes .erow.e-con:not(.gaptop),.bhp-fes .statrow.e-con:not(.gaptop),.bhp-fes .deflist.e-con,.bhp-fes .risklist.e-con,
.bhp-fes .stepledger.e-con:not(.gaptop){margin-block-start:0!important}
/* 02 the finding panel: Elementor children stretch, the rows share the height */
.bhp-fes .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-fes .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-fes .verdict .vrow.e-con{position:relative}
/* a page level p rule beats the size Elementor inherits onto the widget, so the answer states it here */
.bhp-fes .lead-col .elementor-widget-text-editor p{font-size:20px;line-height:1.7;max-width:46ch}
.bhp-fes .a2 .shead.e-con{margin-block-end:16px!important}
/* 04 the index selector: the widget ships its own markup, so its type is set here rather than per widget */
.bhp-fes .isel .isel-tab .n,.bhp-fes .isel .isel-tab .t,.bhp-fes .isel .isel-panel p,
.bhp-fes .isel .isel-list .sk,.bhp-fes .isel .isel-panel .pn{font-family:var(--body)}
.bhp-fes .isel .isel-tab .t,.bhp-fes .isel .isel-panel p b{font-family:var(--disp)}
/* 04 the index selector: the widget ships its own markup, this is the page level frame */
.bhp-fes .isel{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(20px,2.4vw,40px);align-items:stretch}
/* 08 the risk register: the same cream field the static page paints, which is a gradient not a flat colour */
.bhp-fes .register.e-con{background:var(--field-cream);border-left-width:3px;border-left-color:var(--gold)}
.bhp-fes .rrow .elementor-widget-text-editor p{max-width:80ch}
.bhp-fes .rring .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,176,0,.5);
  background:rgba(255,176,0,.12);color:var(--gold-deep);transition:background .2s ease,border-color .2s ease}
.bhp-fes .rrow.e-con:hover .rring .elementor-heading-title{background:rgba(255,176,0,.24);
  border-color:var(--gold)}
.bhp-fes .rrow.e-con:hover h3 .elementor-heading-title{color:var(--gold-deep)}
.bhp-fes .rrow h3 .elementor-heading-title{transition:color .2s ease}
/* 09 the three stage flow */
/* The count comes from the content, not from this file. It was pinned at three and the fourth card
   wrapped alone under the first: "either make all 4 in one or make it 2 2". Four across on a wide
   screen, two by two on a tablet, so it is never three and a stray. */
.bhp-fes .flow.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-fes .flow-4.e-con{grid-template-columns:repeat(4,1fr)!important}
@media (max-width:1200px){.bhp-fes .flow-4.e-con{grid-template-columns:repeat(2,1fr)!important}}
.bhp-fes .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 */
.bhp-fes .seqcopy p{max-width:92ch}
/* 10 the process rail: the numerals ride a continuous gold line */
.bhp-fes .prail.e-con{position:relative;padding:0}
.bhp-fes .prow.e-con{position:relative}
/* the connector is drawn per row, so the rail never runs past the last node */
.bhp-fes .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-fes .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px}
.bhp-fes .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 #fff;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.bhp-fes .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-fes .pbody .elementor-widget-text-editor p{max-width:78ch}
.bhp-fes .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy);transform:scale(1.06)}
.bhp-fes .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-fes .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy)}
.bhp-fes .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)}
/* 05 and 11 stat strips */
.bhp-fes .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-fes .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
.bhp-fes .a11 .statrow.e-con{margin-bottom:clamp(24px,3vh,34px)}
/* the vertical band label wraps instead of setting the band height */
.bhp-fes .closeband .ck .elementor-heading-title{writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:110px;white-space:normal;line-height:1.35}
.bhp-fes .closeband.e-con{width:auto}
/* 14 the dual author box, in the same rhythm as the other pages */
.bhp-fes .author.dual.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  align-items:start!important;max-width:920px;margin-inline:auto}
.bhp-fes .author.dual > .elementor-widget-heading{grid-column:1 / -1;justify-self:center;padding-top:8px}
.bhp-fes .author.dual .abox img{width:56px!important;height:70px;object-fit:cover;object-position:50% 20%;
  border-radius:12px}
/* ---------- 05 the market, 2026-09-23 ----------
   Client: "in this section change the layout like our other pages, on one side the stats and on the
   right the videos." Four numbers across a full band with two players underneath became four
   numbers in the left half, two by two, and the film in the right. The hero took the square clip in
   the same instruction, so there is one player here, not two. */
.bhp-fes .statcol{min-width:0}
.bhp-fes .statcol .lstat{padding-right:clamp(16px,1.8vw,24px)}
/* Client 2026-09-23: "align it with the heading so both sides look set" and "now it is pushed
   down." Both columns already started on the same line; what he could see was the finish. A 16:9
   film plus its caption stands 441px and the two rows of numbers stood 355, so the right ran 86px
   past the left and the film read as pushed down inside its own half. The numbers take that 86px
   as breathing room, 22px on each edge of each cell across two rows, which is the only place it can
   go: the film's height is its aspect ratio and not a choice. Measured, not guessed.
   The 86px goes in the MIDDLE, not on the outside edges: the first row keeps its 20px so the
   figure stays level with the first line of the caption, the last row keeps its 28px so the closing
   rule lands with the foot of the film, and the space between the two rows carries all of it. */
/* And it only exists while there IS a film beside the numbers. Client 2026-09-28: "there is too
   much extra space at the bottom in many places on mobile." Measured: the row stacks to a column
   at 1024 and the stat grid drops to one column at 900, but this padding had no media query, so
   every phone paid 71px under the first two cells and 63px over the last two, 134px of dead navy
   between each pair, levelling the numbers against a film that is no longer beside them. Above
   1024 the film is still there and the space is still doing its job. */
@media (min-width:1025px){
  .bhp-fes .statcol .statrow > .lstat:nth-child(-n+2){padding-bottom:71px}
  .bhp-fes .statcol .statrow > .lstat:nth-child(n+3){padding-top:63px}
}
/* The hero device is the clip now, and it takes the frame every film on this site carries. */
.bhp-fes .heroclip .bhpvloop-v{border-radius:16px;overflow:hidden;
  border:1px solid rgba(247,242,231,.14);box-shadow:0 30px 80px rgba(6,10,24,.38)}

@media (max-width:900px){
  .bhp-fes .pnodewrap.e-con{flex:0 0 36px}
  .bhp-fes .pnode .elementor-heading-title{width:36px;height:36px;font-size:16px;box-shadow:0 0 0 5px #fff}
  .bhp-fes .prow.e-con:not(.last)::before{left:17px;top:32px}
  .bhp-fes .isel{grid-template-columns:1fr}
  .bhp-fes .flow.e-con{grid-template-columns:1fr!important}
  .bhp-fes .rrow .elementor-widget-text-editor p{max-width:none}
  .bhp-fes .author.dual.e-con{grid-template-columns:1fr!important}
}
@media (max-width:700px){
  .bhp-fes .statrow.four.e-con{grid-template-columns:1fr!important}
}

/* 2026-09-04: on an Elementor page the container's own border settings out-rank a class rule, so the
   gold top edge is restated at that specificity. The card keeps its 1px sides. */


.bhp-fes .ecol.solo{max-width:78ch;margin-left:0;margin-right:auto}
.bhp-fes .ecol.solo > *{max-width:none}
@media (max-width:1024px){.bhp-fes .ecol.solo{max-width:none}}


.bhp-fes .feskinds.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  align-items:stretch}
@media (max-width:1024px){.bhp-fes .feskinds.e-con{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:640px){.bhp-fes .feskinds.e-con{grid-template-columns:1fr!important}}
.bhp-fes .feskind.e-con{padding:clamp(24px,2.8vh,30px) clamp(22px,2.2vw,28px);border-radius:14px;
  background:#fff;border:1px solid var(--line-light);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-fes .feskind.e-con:hover{transform:translateY(-3px);border-color:rgba(255,176,0,.45);
  box-shadow:0 22px 52px rgba(23,29,58,.10)}
.bhp-fes .feskind p{max-width:none}

/* The dark twin. Same card, the dark surface's own field and hairline, so the partner row reads as
   the same object as the cream one two sections above it. */
.bhp-fes .fespartners.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  align-items:stretch}
@media (max-width:1100px){.bhp-fes .fespartners.e-con{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:640px){.bhp-fes .fespartners.e-con{grid-template-columns:1fr!important}}
.bhp-fes .fespartner.e-con{padding:clamp(24px,2.8vh,30px) clamp(20px,2vw,26px);border-radius:14px;
  background:rgba(247,242,231,.045);border:1px solid rgba(247,242,231,.12);
  transition:transform .22s ease,border-color .22s ease,background .22s ease}
.bhp-fes .fespartner.e-con:hover{transform:translateY(-3px);border-color:rgba(255,176,0,.45);
  background:rgba(247,242,231,.07)}
.bhp-fes .fespartner p{max-width:none}

/* The verdict panel's rows hug their own content. They carried flex:grow, and because the panel
   stretches to the height of the copy beside it that divided 450px of spare height between three
   rows and left ~150px of nothing under each: "this looks very empty and unwanted". */
.bhp-fes .verdict .vrow.e-con{flex:0 0 auto}
/* The panel hugs its three findings instead of stretching to the height of the copy beside it.
   Stretched, it was a 750px dark box holding 300px of content, and the client photographed the
   370px of nothing underneath: "this looks very empty and unwanted". A short panel next to longer
   copy reads as a panel; a tall empty one reads as a mistake. `align-self` is set on the element
   itself, which is where the stretch came from, so it has to be overridden at that specificity. */
.bhp-fes .verdict.e-con{justify-content:flex-start;align-self:flex-start!important}

/* The hairline between two step cards is drawn 28px wide in fes.css, sized for the 24px gap the
   three-card row used. At four across the gap is 22px, so it ran 6px under the card beside it and
   read as a stray mark rather than a connector. Four equal cards do not need joining anyway. */
.bhp-fes .flow-4 .fstage + .fstage::after{display:none}



/* Client 2026-09-29, image 453: "on the entire website there are border issues which are not
   proper, so make them properly coming border and fixed."
   The old version drew a border on every cell and then removed it again by counting:
   `:nth-child(5n)` for the last column and `:nth-last-child(-n+5)` for the last row. That
   arithmetic is only correct while the table has exactly five columns, and it is invisible when
   it goes wrong. The CARF page inherits this component with THREE columns and still carried a
   stray `nth-child(5n){border-right:1px}` from the five-column version, which put a border back
   on cells 5, 10 and 15, landing in the middle of rows. That is the ragged grid he photographed.

   No counting now. The table paints the line colour as its own background and the cells sit on
   it with a 1px gap, so every seam is exactly one pixel, every seam lines up, and there is never
   an edge on the outside because the container's own border draws that. It is correct for three
   columns, five columns or any other number, on any page, with no rule to keep in step. */
.bhp-fes .vstable.e-con{border:1px solid var(--line-light);border-radius:14px;overflow:hidden;
  background:var(--line-light);gap:1px!important}
.bhp-fes .vscell.e-con{padding:16px 18px;border:0;background:#fff}
.bhp-fes .vscell p{max-width:none}
/* these three sat on the table's white before; they paint their own fill now */
.bhp-fes .vshead.e-con{background:var(--field-cream,#FBF8F1);padding-top:20px;padding-bottom:20px}
.bhp-fes .vslabel.e-con{background:var(--field-cream,#FBF8F1)}
.bhp-fes .vscorner.e-con{background:var(--field-cream,#FBF8F1)}
.bhp-fes .vsq p{color:var(--navy)}

/* "You are here": the feasibility column is the subject of the page this table sits on. Gold top
   edge on its header and a wash down the column, which is the same two-tone the rest of the site
   uses to mark the current thing. */
.bhp-fes .vscell.ishere{background:rgba(255,176,0,.055)}
.bhp-fes .vshead.ishere{background:rgba(255,176,0,.11);box-shadow:inset 0 3px 0 var(--gold,#FFB000)}
.bhp-fes .vshead.ishere h3{color:var(--navy)}

@media (max-width:900px){
  .bhp-fes .vstable.e-con{grid-template-columns:1fr!important;border-radius:12px}
  .bhp-fes .vscell.e-con{border-right:0}
  /* stacked, the row label has to travel with its value or the cells lose their meaning */
  .bhp-fes .vslabel.e-con{padding-bottom:4px;background:transparent}
  .bhp-fes .vscorner.e-con{display:none}
  .bhp-fes .vshead.e-con{margin-top:6px}
}