/* GENERATED by build/csp-el/make_css.py - do not edit on the server. Source: build/hero-options/*.css + build/csp/csp.css */
/* ---------- design tokens (tokens.css is not loaded on WordPress) ---------- */
/* BHP brand tokens. Source: docs/brand-guideline.txt section 8 + homepage brief v3 section 14.
   Every BHP page imports this file. Change here, cascades everywhere. */
.bhp-csp,.bhp-csp .e-con,.elementor-widget-bhp_csp_console,.elementor-widget-bhp_csp_timeline{
  /* palette */
  --navy:#171D3A;        /* primary: backgrounds, headlines, structure */
  --navy-deep:#112337;   /* gradients, proof cards, footer */
  --gold:#FFB000;        /* the single accent: CTAs, numerals, rules, italic phrase */
  --gold-deep:#E29C00;   /* gold hover */
  --cream:#F7F2E7;       /* warm long-form + callouts (inferred hex, confirm) */
  --slate:#374763;       /* secondary text, quiet UI. Also the logo blue. */
  --slate-2:#4E5F80;     /* slate tint for gradients */
  --white:#FFFFFF;
  /* text on dark */
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(247,242,231,.78);
  --on-dark-3:rgba(247,242,231,.56);
  /* text on light */
  --on-light:#171D3A;
  --on-light-2:#374763;
  --on-light-3:rgba(23,29,58,.62);
  /* hairlines */
  --line-dark:rgba(247,242,231,.14);
  --line-light:rgba(23,29,58,.14);
  /* surfaces */
  --field-navy:linear-gradient(160deg,#171D3A 0%,#141F3B 45%,#112337 100%);
  --field-blue:linear-gradient(150deg,#374763 0%,#243252 38%,#171D3A 72%,#112337 100%);
  --field-cream:linear-gradient(180deg,#FBF8F1 0%,#F7F2E7 100%);
  --glow-gold:radial-gradient(closest-side,rgba(255,176,0,.22),rgba(255,176,0,0));
  --glow-slate:radial-gradient(closest-side,rgba(78,95,128,.55),rgba(78,95,128,0));
  /* type */
  --disp:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Geist",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ui:"Roboto",Arial,sans-serif; /* ONLY inside device mockups that imitate real UI */
  /* spacing rhythm */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;
  --radius:10px;--radius-lg:14px;--pill:999px;
  --shadow-lg:0 30px 80px rgba(9,13,30,.45);
  --hh:76px; /* header height */
}

/* ---------- type layer (typescale.css, verbatim) ---------- */
/* BHP type system, from the client style guide (BHP-Style-Guide-Setup.zip → exports/BHP-Style-Guide.html,
   "Every text variation on the site"). Loaded LAST so it governs every earlier rule.

   SCOPE (client ruling 2026-08-28): this layer sets WEIGHT, TRACKING and optical sizing only.
   Font sizes, leading, colours, padding and layout stay exactly as the approved design has them — the
   guide's larger sizes were throwing the sections out.

   - Headings: Fraunces 600, optical sizing AUTO, tracking keyed to size:
     ≥54 -.03em · ≥48 -.028em · ≥44 -.025em · ≥38 -.025em · ≥30 -.02em · smaller -.02em
   - Voice lines (pull quotes, the values words, the exclusivity question): Fraunces ITALIC 500, -.025em.
   - Body and UI: Geist. 500 for eyebrows, buttons, editorial links, card and step titles; 400 for prose.
   - Eyebrow tracking .16em, uppercase.
   The same weights and tracking are set widget-by-widget on the Elementor page (build/home-a/compose.py),
   so the two pages measure identical: build/home-a/parity.mjs proves it. */

/* ---------- Fraunces optical sizing follows the size, per the guide ---------- */
.tag,.sec h2,.sec h3,.pcard h3,.ccard h3,.path3d h3 .big,.stat b,.lstat b,.ptab b,.dc::first-letter,
.cta-core h2,.xbig,.quote::before,.pview .pane.data b,.lgrid2 .lstat b{font-variation-settings:normal}

/* ---------- display and headings: Fraunces 600 ---------- */
.tag{font-weight:600;letter-spacing:-.028em;font-variation-settings:normal}
/* Size is the design's own fluid rule; only the width cap moves, from 8.6cqw to 7.6cqw, because Fraunces 600
   sets wider than 500 and the designed three-line break has to stay inside the hero column. */
.tag{font-size:min(clamp(36px,5.8vh,60px),7.6cqw)}
.tag .ln{white-space:nowrap}
@media (max-width:1100px){.tag .ln{white-space:normal}}
.sec h2,.cta-core h2{font-weight:600;letter-spacing:-.025em}
#s2 h2,#s8 h2,#s14 h2,.cta-core h2{letter-spacing:-.028em}
.path3d h3 .big{font-weight:600;letter-spacing:-.025em}
.ccard h3,.pcard h3{font-weight:600;letter-spacing:-.02em}
.stat b,.ptab b,.lstat b,.lgrid2 .lstat b,.pview .pane.data b{font-weight:600;letter-spacing:-.04em}
.dc::first-letter{font-weight:600}

/* emphasis stays as the approved design had it: Fraunces italic (gold in the hero), at the guide's 500 weight.
   The style guide asks for a 2px gold underline instead; not applied, this pass is type only. */
.tag em,.sec h2 em,.cta-core h2 em{font-weight:500}

/* ---------- voice lines: Fraunces italic 500 ---------- */
.pull,.pbig,.rlead,.fvals,.vinline em,.vcells em,.vledger .vclose,.qi,.vcard .vtext em,.slot .lv,
.sec .xbig,.quote blockquote{font-weight:500}
.vcells em,.pull,.pbig,.sec .xbig{letter-spacing:-.025em}
.rlead,.slot .lv{letter-spacing:-.025em}

/* ---------- Geist: 500 for UI and labels, .16em on the eyebrows ---------- */
.h1{font-weight:500;letter-spacing:.11em}   /* .16em is for short eyebrows; this line is long and would wrap */
.eyebrow,.vlabel,.fk,.rcol h3,.path3d h3 .sub,.pcard .pk,.stat small,.ptab small,.slot .one,
.pview .pane.data small,.author small,.vcells .vw{font-weight:500;letter-spacing:.16em}
.quote .who b{font-weight:500}
.btn,.btn.big,.paths .btn,.hd .cta{font-weight:500}
.lnk,.ccard .lnk,.tc .tcname,.guides a,.author a,.fseek a,.fsoc a,.acc summary h3,
.vh3,.steps b,.steps2 b,.tile h3{font-weight:500}
.lead .found{font-weight:500}

/* ---------- atoms the components depend on (from sections.css and page.css) ---------- */
.sec-cream{background:var(--field-cream);color:var(--on-light)}
.sec-cream::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 100% 0%,rgba(255,176,0,.10),rgba(255,176,0,0) 70%)}
.sec .rule{display:block;width:44px;height:3px;background:var(--gold);margin-bottom:20px}
.sec p{font-size:clamp(16px,1.1vw,17.5px);line-height:1.62;color:var(--on-light-2);text-wrap:pretty}
.sec p+p{margin-top:16px}
@media (max-width:640px){
.sec p{font-size:16px}
}
.sec-white{background:#fff;color:var(--on-light)}
.sec-navy{background:var(--field-navy);color:var(--on-dark)}
.sec-deep{background:linear-gradient(180deg,#141E3C 0%,#0F1830 100%);color:var(--on-dark)}
.sec-navy::before,.sec-deep::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 100% 0%,rgba(255,176,0,.12),rgba(255,176,0,0) 70%)}
.sec-navy .rule,.sec-deep .rule{background:var(--gold)}
.sec-navy h2,.sec-deep h2,.sec-navy h3,.sec-deep h3{color:#fff}
.sec-navy p,.sec-deep p{color:var(--on-dark-2)}
.sec-navy .intro,.sec-deep .intro{color:var(--on-dark-2)}
.shead{margin-bottom:clamp(24px,3.4vh,36px)}
.shead h2{max-width:30ch}
.shead .intro{margin-top:14px;max-width:72ch}
.sec .intro{font-size:clamp(16px,1.1vw,17.5px)}
.g66{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:start}
.g66.ac{align-items:center}
.g48{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,4vw,56px);align-items:start}
.g75{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,4vw,56px)}
.g66>*,.g48>*,.g75>*{min-width:0}
.secfoot{margin-top:clamp(26px,3.4vh,36px);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.links{display:flex;gap:26px;flex-wrap:wrap}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--navy);border-bottom:1.5px solid rgba(255,176,0,.6);padding-bottom:2px;transition:border-color .2s,color .2s}
.lnk svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.lnk:hover{border-color:var(--gold)}
.lnk:hover svg{transform:translateX(3px)}
.sec-navy .lnk,.sec-deep .lnk{color:#fff}
.btn.big{font-size:16.5px;padding:18px 30px}
.sec-navy .pull,.sec-deep .pull{color:#fff}
.sec p+p{margin-top:16px}
.lstat{padding:clamp(20px,2.4vh,26px) clamp(20px,2vw,24px);border-radius:12px;background:#fff;border:1px solid var(--line-light);box-shadow:0 14px 40px rgba(23,29,58,.06)}
.lstat b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(34px,3vw,44px);line-height:1;color:var(--navy);letter-spacing:-.02em}
.lstat p{font-size:14.5px;line-height:1.5;margin-top:10px;color:var(--on-light-2)}
.sec-white .rlead,.sec-cream .rlead{color:var(--navy)!important}
.quote{align-self:start;display:flex;flex-direction:column;padding:clamp(24px,3vh,32px) clamp(22px,2.2vw,30px);border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);position:relative}
.quote::before{content:"\201C";position:absolute;right:22px;top:6px;font-family:var(--disp);font-size:88px;line-height:1;color:rgba(255,176,0,.35)}
.quote blockquote{margin:0 0 18px;font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(20px,1.55vw,24px);line-height:1.3;color:var(--navy);flex:1}
.quote .who{margin:0;display:flex;flex-direction:column;gap:2px}
.quote .who b{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.quote .who span{font-size:13.5px;color:var(--on-light-3)}
.quote .ctx{margin-top:12px!important;font-size:14.5px!important;line-height:1.55!important;color:var(--on-light-2)!important;padding-top:12px;border-top:1px solid var(--line-light)}
.accs{display:flex;flex-direction:column}
.acc{border-top:1px solid var(--line-light)}
.acc:last-child{border-bottom:1px solid var(--line-light)}
.acc summary{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:18px 0;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{font-family:var(--body);font-weight:600;font-size:clamp(16px,1.15vw,18px);line-height:1.35;color:var(--navy)}
.acc .pm{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-light);flex:none;transition:background .2s,border-color .2s}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .25s}
.acc .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc[open] .pm{background:var(--gold);border-color:var(--gold)}
.acc[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.acc .ans{padding:0 56px 20px 0}
.acc .ans p{margin:0;font-size:clamp(15.5px,1.05vw,17px)}
.acc summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.cta-core{text-align:center;max-width:760px;margin:0 auto}
.cta-core .eyebrow{color:var(--gold);letter-spacing:.14em}
.cta-core h2{font-family:var(--disp);font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:1.06;letter-spacing:-.018em;color:#fff;margin-top:14px}
.cta-core .body{margin:18px auto 0;max-width:58ch;font-size:18px;line-height:1.6}
.cta-core .btn{margin-top:26px}
.cta-core .support{margin-top:16px;font-size:14px;color:var(--on-dark-3)}
.author{display:flex;gap:18px;align-items:center;max-width:720px;margin:clamp(40px,6vh,64px) auto 0;padding-top:clamp(22px,3vh,28px);border-top:1px solid var(--line-dark)}
.author .abox{display:flex;gap:16px;align-items:center}
.author img{width:56px;height:70px;object-fit:cover;object-position:50% 20%;border-radius:12px;flex:none}
.author p{margin:0;font-size:15px;line-height:1.5;color:var(--on-dark-2)}
.author a{color:#fff;font-weight:600;border-bottom:1.5px solid rgba(255,176,0,.6)}
.author small{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}
.honesty2{position:relative;padding:clamp(18px,2.4vh,24px) clamp(22px,2.2vw,30px);border-top:1px solid var(--line-dark);background:rgba(255,176,0,.06)}
.honesty2 p{margin:0;font-size:15px;line-height:1.6;color:var(--on-dark-2)!important}
.honesty2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.g66.eq{align-items:stretch}
.sec-navy .ledger .lrow,.sec-deep .ledger .lrow{border-top-color:var(--line-dark)}
@media (max-width:1100px){
.shead.split{grid-template-columns:1fr}
.shead.split .intro{grid-column:1;grid-row:auto;margin-top:14px}
.g66,.g48,.g75{grid-template-columns:1fr}
}
@media (max-width:640px){
.acc .ans{padding-right:0}
.cta-core h2{font-size:clamp(30px,8.5vw,38px)}
}
/* ---------- the consulting page's own components (csp.css, verbatim) ---------- */
/* Consulting pillar: only the components the homepage does not already have. Everything else (surfaces, heads,
   grids, cards, quotes, accordion, CTA, author box, footer, type) comes from the shared stylesheets. */

/* ---------- hero ---------- */
/* top padding trimmed: the header-to-eyebrow gap was 139px, well above the homepage hero's 109px */
.chero{position:relative;min-height:auto;padding:calc(var(--hh) + clamp(26px,3.4vh,44px)) 0 clamp(52px,6.4vh,78px);
  background:var(--field-navy);color:var(--on-dark);overflow:hidden}
.chero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 58% at 100% 0%,rgba(255,176,0,.13),rgba(255,176,0,0) 70%),
             radial-gradient(50% 60% at 0% 100%,rgba(78,95,128,.42),rgba(78,95,128,0) 72%)}
.chero .wrap{position:relative}
.chero .grid{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(36px,4.4vw,64px);align-items:center}
.chero .copy{min-width:0;container-type:inline-size}
.chero .eyebrow{color:var(--on-dark-3)}
.chero h1.tag{margin-top:14px;color:#fff}
/* the homepage tagline keeps its designed line breaks with nowrap; this headline is longer, so its lines wrap
   naturally inside the column instead of spilling out of it */
.chero h1.tag .ln{display:block;white-space:normal}
.chero .lead{margin-top:clamp(14px,2.2vh,20px);max-width:62ch}
.chero .paths{margin-top:clamp(20px,3vh,28px)}
.chero .badges{margin-top:clamp(22px,3vh,32px)}

/* ---------- shared editorial column ---------- */
.col-1{max-width:74ch}

/* ---------- 2. moat callout ---------- */
.moat{margin-top:clamp(20px,2.6vh,26px);padding:clamp(20px,2.6vh,26px) clamp(22px,2.4vw,30px);border-radius:14px;
  background:var(--field-cream);border:1px solid var(--line-light);border-left:3px solid var(--gold);width:fit-content;max-width:100%}
.moat p{margin:0;font-size:16px;line-height:1.7;max-width:66ch}

/* ---------- 4. service cards ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.svc{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.8vh,30px) clamp(22px,2.2vw,28px);
  border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
a.svc:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(23,29,58,.16);border-color:rgba(255,176,0,.45)}
.svc h3{font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.svc p{font-size:15px;line-height:1.8;color:var(--on-light-2);flex:1;max-width:none}
.svc .lnk{margin-top:auto;align-self:flex-start}
.svc.soon{background:#fff;border-style:dashed}
.svc.soon::before{background:var(--line-light);transform:scaleX(1)}
.tag-soon{margin-top:auto;align-self:flex-start;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-3);
  border:1px solid var(--line-light);border-radius:999px;padding:7px 13px}


/* ---------- 9. mission close ---------- */
.closeq{margin:clamp(24px,3.2vh,34px) 0 0;padding:0 0 0 26px;border-left:2px solid var(--gold)}
.csp .closeq p{margin:0;font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(20px,1.6vw,24px);
  line-height:1.45;letter-spacing:-.015em;color:var(--navy);max-width:56ch}

/* ---------- 14. dual author box ---------- */
.author.dual .faces{display:inline-flex;flex:none}
.author.dual .faces img{width:64px;height:80px;border-radius:10px;object-fit:cover;object-position:center top;
  border:2px solid var(--navy-deep)}
.author.dual .faces img+img{margin-left:-18px}

/* ============ hero device: the engagement console ============ */
.econ{border-radius:14px;overflow:hidden;background:linear-gradient(168deg,rgba(247,242,231,.08),rgba(247,242,231,.02));
  border:1px solid rgba(247,242,231,.14);box-shadow:0 34px 90px rgba(6,12,26,.55)}
.ec-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(9,13,30,.4);
  border-bottom:1px solid rgba(247,242,231,.12)}
.ec-bar .lights{display:flex;gap:6px}
.ec-bar .lights i{width:10px;height:10px;border-radius:50%;display:block;background:rgba(247,242,231,.22)}
.ec-bar .lights i:first-child{background:rgba(255,176,0,.75)}
.ec-t{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.ec-s{margin-left:auto;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-3)}
.ec-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2vw,26px);padding:clamp(20px,2.6vh,26px) clamp(18px,2vw,24px)}
.ec-ring{position:relative;width:124px;height:124px;flex:none;align-self:center}
.ec-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ec-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ec-ring .trk{stroke:rgba(247,242,231,.12)}
.ec-ring .arc{stroke:var(--gold);stroke-dasharray:327;stroke-dashoffset:327;animation:ecarc 1.6s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes ecarc{to{stroke-dashoffset:0}}

.ec-fig{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.ec-fig b{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1;color:#fff;letter-spacing:-.03em}
.ec-fig small{font-family:var(--body);font-size:9px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-3);max-width:96px;line-height:1.3}
.ec-steps{position:relative;display:flex;flex-direction:column;justify-content:center;padding-left:4px}
.ec-steps::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:2px;background:rgba(247,242,231,.14)}
.ec-fill{position:absolute;left:12px;top:14px;width:2px;height:0;background:var(--gold);transition:height .45s cubic-bezier(.2,.7,.2,1)}
.stg{all:unset;position:relative;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 0;cursor:pointer;
  border-radius:10px;transition:background .2s ease}
.stg:hover,.stg:focus-visible{background:rgba(247,242,231,.05)}
.stg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stg .dot{flex:none;width:18px;height:18px;margin-left:3px;border-radius:50%;background:var(--navy-deep);
  border:2px solid rgba(247,242,231,.3);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.stg.on .dot{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 5px rgba(255,176,0,.15)}
.stg .nm{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.4vw,21px);line-height:1.2;letter-spacing:-.02em;
  color:var(--on-dark-2);transition:color .2s ease}
.stg.on .nm{color:#fff}
.stg .num{margin-left:auto;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--on-dark-3)}
.ec-foot{display:flex;gap:0;border-top:1px solid rgba(247,242,231,.12);background:rgba(9,13,30,.3)}
.ec-foot .chip{flex:1;display:flex;flex-direction:column;gap:3px;padding:13px 18px;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}
.ec-foot .chip+.chip{border-left:1px solid rgba(247,242,231,.12)}
.ec-foot .chip b{font-family:var(--disp);font-weight:600;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--gold)}

/* ============ 2. the work spans ============ */
.spans{align-self:stretch;display:flex;flex-direction:column;border-radius:14px;background:var(--field-navy);color:var(--on-dark);padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px);
  position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(23,29,58,.2)}
.spans::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%)}
.spans .sk{position:relative;margin:0 0 6px;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.spans ul{position:relative;list-style:none;margin:8px 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.spans li{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;
  padding:6px 0;border-top:1px solid var(--line-dark);font-family:var(--disp);font-weight:600;font-size:19px;
  line-height:1.25;letter-spacing:-.02em;color:#fff}
.spans li:first-child{border-top:0}
.spans .n{order:2;flex:none;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--gold)}

/* ============ 3. the two lanes ============ */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.2vw,28px);align-items:stretch}
.lane{position:relative;border-radius:14px;padding:clamp(24px,2.8vh,30px) clamp(22px,2.2vw,28px);
  background:#fff;border:1px solid var(--line-light);display:flex;flex-direction:column;gap:14px}
.lane.ours{background:var(--field-navy);border-color:transparent;color:var(--on-dark);
  box-shadow:0 26px 60px rgba(23,29,58,.22)}
.lane.ours::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(55% 60% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)}
.lane-h{position:relative;display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-light)}
.lane.ours .lane-h{border-bottom-color:var(--line-dark)}
.lane-k{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-3)}
.lane.ours .lane-k{color:var(--gold)}
.lane-t{margin-left:auto;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--navy)}
.lane.ours .lane-t{color:#fff}
.lane p{position:relative;margin:0;max-width:none}
.lane.ours p{color:var(--on-dark-2)}
/* the band is sized to its own text, so it never sits half empty */
/* the band hugs its own text and sits centred under the two lanes, so it is not stranded on the left */
.crisis{display:flex;align-items:center;gap:clamp(16px,1.8vw,22px);width:fit-content;
  margin:clamp(22px,3vh,30px) auto 0;
  padding:clamp(18px,2.2vh,22px) clamp(22px,2.2vw,28px);border-radius:14px;background:rgba(23,29,58,.05);
  border-left:3px solid var(--slate);max-width:100%}
.crisis .c-k{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(55,71,99,.1);border:1px solid rgba(55,71,99,.28);
  font-family:var(--disp);font-weight:600;font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--slate)}
.crisis p{margin:0;font-size:15px;line-height:1.8;max-width:64ch}

/* ============ 5. who we consult for ============ */
.audgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)}
.aud{position:relative;overflow:hidden;padding:clamp(26px,3vh,34px) clamp(24px,2.4vw,32px);border-radius:14px;
  background:#fff;border:1px solid var(--line-light);display:flex;flex-direction:column;gap:12px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.aud:hover{transform:translateY(-4px);box-shadow:0 28px 64px rgba(23,29,58,.16);border-color:rgba(255,176,0,.45)}
.aud:hover::before{transform:scaleX(1)}
.aud-n{position:absolute;right:18px;top:8px;font-family:var(--disp);font-weight:600;font-size:64px;line-height:1;
  letter-spacing:-.04em;color:rgba(23,29,58,.06);pointer-events:none}
.aud h3{position:relative;font-family:var(--disp);font-weight:600;font-size:24px;line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.aud p{position:relative;font-size:15px;line-height:1.8;color:var(--on-light-2);max-width:46ch}

/* ============ 6. engagement model: paragraph beside a panel made of its own words ============ */
.erow{margin-top:clamp(26px,3.4vh,34px);align-items:stretch}
.erow > *{min-width:0}
.ecol{display:flex;flex-direction:column}
.ecol p{max-width:62ch}
.ecol .moat{margin-top:auto}
.side-panel{align-self:stretch;display:flex;flex-direction:column;border-radius:14px;position:relative;overflow:hidden;
  padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px)}
.side-panel.dark{background:var(--field-navy);color:var(--on-dark);box-shadow:0 24px 60px rgba(23,29,58,.2)}
.side-panel.dark::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%)}
.side-panel.cream{background:var(--field-cream);border:1px solid var(--line-light)}
.side-panel .sk{position:relative;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.side-panel.cream .sk{color:var(--gold-deep)}
.side-panel ul{position:relative;list-style:none;margin:10px 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.side-panel li{flex:1;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;
  border-top:1px solid var(--line-dark);font-family:var(--body);font-weight:500;font-size:15px;line-height:1.45}
.side-panel.dark li{color:#fff}
.side-panel.cream li{border-top-color:var(--line-light);color:var(--navy)}
.side-panel li:first-child{border-top:0}
.side-panel .q{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.side-panel .tick{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(255,176,0,.18);
  border:1px solid rgba(255,176,0,.55);position:relative}
.side-panel .tick::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;
  border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg)}
.loopband{position:relative;overflow:hidden;border-radius:14px;margin-top:clamp(26px,3.4vh,34px);
  padding:clamp(20px,2.6vh,26px) clamp(22px,2.4vw,30px);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(18px,2.4vw,34px);background:var(--field-navy);color:var(--on-dark);
  box-shadow:0 26px 60px rgba(23,29,58,.2)}
.loopband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 80% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)}
.loopband .lk{position:relative;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);writing-mode:vertical-rl;transform:rotate(180deg)}
.cy{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
/* the dot and its label are both centred in their column, and the rail is ONE line drawn behind them from the
   first dot's centre to the last one's. Per-item segments were measured off by 18 to 41px per node. */
.cy li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:0 clamp(8px,1vw,14px)}
.cy::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:2px;background:rgba(255,176,0,.3)}
.cy .nd{position:relative;z-index:1;flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy-deep);
  border:2px solid var(--gold);display:grid;place-items:center;transition:background .25s ease,box-shadow .25s ease}
.cy .nd b{font-family:var(--body);font-size:12px;font-weight:500;color:var(--gold);transition:color .25s ease}
.cy li:hover .nd{background:var(--gold);box-shadow:0 0 0 6px rgba(255,176,0,.14)}
.cy li:hover .nd b{color:var(--navy)}
.cy .lb{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.2;
  letter-spacing:-.02em;color:#fff}
.loopband .rpt{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.loopband .rpt svg{width:28px;height:28px;color:var(--gold)}

/* ============ 7. licensing timelines ============ */
.prow{margin-top:clamp(30px,4vh,42px);align-items:start}
.tlcard{border-radius:14px;background:rgba(247,242,231,.05);border:1px solid rgba(247,242,231,.14);
  padding:clamp(22px,2.8vh,28px) clamp(22px,2.2vw,28px)}
.tl-h{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.tlcard ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.tlcard li{display:grid;grid-template-columns:1fr;gap:8px}
.tl-k{font-family:var(--body);font-size:13px;font-weight:500;color:var(--on-dark-2)}
.tl-bar{display:block;height:10px;border-radius:999px;background:rgba(247,242,231,.1);overflow:hidden}
.tl-bar i{display:block;height:100%;width:max(14%,var(--w));border-radius:999px;
  background:linear-gradient(90deg,var(--gold),rgba(255,176,0,.55))}
.tl-v{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;color:#fff}
.tlcard li{grid-template-columns:1fr auto;align-items:center;column-gap:16px}
.tlcard .tl-bar{grid-column:1;grid-row:2}
.tlcard .tl-k{grid-column:1;grid-row:1}
.tlcard .tl-v{grid-column:2;grid-row:1/3;align-self:center}
.tl-f{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);
  font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}

.loopq{margin:clamp(28px,3.6vh,40px) 0 0;padding:0 0 0 26px;border-left:2px solid var(--gold)}
.csp .loopq p{margin:0;font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(21px,1.8vw,26px);
  line-height:1.45;letter-spacing:-.015em;color:var(--navy);max-width:56ch}

/* ============ 7. proof band ============ */
.statrow{margin-top:clamp(22px,2.8vh,30px);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)}
.statrow .lstat{background:none;border:0;box-shadow:none;border-radius:0;padding:clamp(22px,2.8vh,30px) clamp(18px,1.8vw,26px)}
.statrow .lstat+.lstat{border-left:1px solid var(--line-dark)}
.statrow .lstat b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(40px,3.6vw,52px);line-height:1;
  letter-spacing:-.04em;color:var(--gold)}
.statrow .lstat p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--on-dark-2)!important;max-width:30ch}
.record{margin-top:0;padding-left:26px;border-left:2px solid var(--gold);width:fit-content;max-width:100%}
.record p{font-size:15px;line-height:1.8;color:var(--on-dark-2);max-width:62ch}

/* ============ 9. mission ============ */
/* ============ 9. mission: full-bleed photograph, mission in a glass panel over it ============ */
.sec-photo{position:relative;overflow:hidden;padding:0;background:var(--navy-deep);color:var(--on-dark);
  display:grid;align-items:center;min-height:clamp(560px,72vh,780px)}
.sec-photo .mbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.sec-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,13,30,.56),rgba(9,13,30,.22) 46%,rgba(9,13,30,.5))}
.sec-photo .wrap{position:relative;z-index:1;padding-block:clamp(56px,8vh,96px)}
.mpanel{width:min(760px,100%);margin-inline:auto;border-radius:16px;padding:clamp(28px,4vh,44px) clamp(26px,3.4vw,46px);
  background:rgba(11,16,34,.88);border:1px solid rgba(247,242,231,.18);
  box-shadow:0 40px 90px rgba(6,10,24,.5);backdrop-filter:blur(10px) saturate(120%)}
.mpanel .rule{display:block;width:44px;height:3px;background:var(--gold);margin-bottom:20px}
.mpanel h2{font-family:var(--disp);font-weight:600;font-size:clamp(30px,2.9vw,44px);line-height:1.12;
  letter-spacing:-.025em;color:#fff;max-width:26ch}
.mpanel h2 em{color:var(--gold);font-style:italic;font-weight:500}
.mpanel p{margin:clamp(18px,2.4vh,24px) 0 0;font-size:16px;line-height:1.8;color:rgba(255,255,255,.9);max-width:none}
.mpanel .mclose{margin-top:clamp(18px,2.4vh,24px);padding-top:clamp(16px,2.2vh,22px);
  border-top:1px solid rgba(247,242,231,.16);font-family:var(--disp);font-style:italic;font-weight:500;
  font-size:clamp(16px,1.3vw,19px);line-height:1.55;letter-spacing:-.01em;color:rgba(255,255,255,.88)}

/* ============ 10. next steps ============ */
.nxtgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px)}
.nxt{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vh,32px) clamp(22px,2.2vw,30px);border-radius:14px;
  background:rgba(247,242,231,.05);border:1px solid rgba(247,242,231,.14);position:relative;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,background .22s ease}
.nxt:hover{transform:translateY(-4px);border-color:rgba(255,176,0,.5);background:rgba(255,176,0,.06)}
.nxt .nk{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.nxt p{margin:0;color:var(--on-dark-2);max-width:52ch}
.nxt .lnk{margin-top:auto;align-self:flex-start;color:#fff}
.nxt.alt{background:rgba(9,13,30,.3)}

/* ============ 12. team cards ============ */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,28px)}
.tcard{background:#fff;border:1px solid var(--line-light);border-radius:14px;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(23,29,58,.16);border-color:rgba(255,176,0,.4)}
.tcard .ph{position:relative;display:block;overflow:hidden}
.tcard .ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .ph img{transform:scale(1.04)}
.tcard .ov{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;
  padding:clamp(16px,2vh,22px) clamp(16px,1.6vw,20px) clamp(14px,1.8vh,18px);
  background:linear-gradient(180deg,rgba(9,13,30,0),rgba(9,13,30,.86) 62%)}
.tcard .ov .rl{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tcard .ov .nm{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:21px;
  line-height:1.2;letter-spacing:-.02em;color:#fff;border-bottom:1.5px solid rgba(255,176,0,.55);padding-bottom:3px;
  align-self:flex-start;transition:border-color .2s ease}
.tcard .ov .nm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s ease}
.tcard:hover .ov .nm{border-color:var(--gold)}
.tcard:hover .ov .nm svg{transform:translateX(3px)}
.tbody{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(18px,2.2vh,22px) clamp(18px,1.8vw,22px) clamp(20px,2.4vh,24px)}
.tbody p{margin:0;font-size:14px;line-height:1.8;color:var(--on-light-2);max-width:none}
.tbody .lnk{margin-top:auto;align-self:flex-start;font-size:14px}

/* ---------- narrow screens ---------- */



/* ---------- responsive ---------- */



/* ============ 11. testimonials: masonry, so a one-line quote never leaves a tall empty box ============ */
.tqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);align-items:stretch}
.tq{display:flex;flex-direction:column;margin:0;padding:clamp(24px,3vh,30px) clamp(22px,2.2vw,28px);
  border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);position:relative;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tq:hover{transform:translateY(-3px);box-shadow:0 24px 55px rgba(23,29,58,.12);border-color:rgba(255,176,0,.4)}
.tq .qm{display:block;font-family:var(--disp);font-weight:600;font-size:46px;line-height:.6;color:rgba(255,176,0,.5)}
.tq blockquote{flex:1;display:flex;align-items:center;margin:12px 0 0;font-family:var(--disp);font-style:italic;
  font-weight:500;line-height:1.34;letter-spacing:-.02em;color:var(--navy)}
.tq.md blockquote{font-size:clamp(18px,1.45vw,21px)}
.tq.lg blockquote{font-size:clamp(22px,1.9vw,27px)}
.tq.xl blockquote{font-size:clamp(25px,2.2vw,31px)}
.tq figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-light);display:flex;
  flex-direction:column;gap:3px}
.tq figcaption b{font-family:var(--body);font-weight:500;font-size:14px;color:var(--navy)}
.tq figcaption span{font-family:var(--body);font-size:13px;line-height:1.5;color:var(--on-light-3)}

/* ============ 12. team: three equal cards ============ */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);align-items:stretch}
.tcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:14px;
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:0 28px 64px rgba(23,29,58,.16);border-color:rgba(255,176,0,.4)}
.tcard .ph{display:block;overflow:hidden;background:var(--field-cream)}
.tcard .ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .ph img{transform:scale(1.04)}
.tbody{flex:1;display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2.6vh,26px) clamp(20px,1.9vw,24px) clamp(22px,2.8vh,28px)}
.tbody .rl{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep)}
.tbody .nm{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--disp);
  font-weight:600;font-size:clamp(20px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em;color:var(--navy);
  border-bottom:1.5px solid rgba(255,176,0,.55);padding-bottom:2px;transition:border-color .2s ease}
.tbody .nm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s ease}
.tcard:hover .tbody .nm{border-color:var(--gold)}
.tcard:hover .tbody .nm svg{transform:translateX(3px)}
.tbody p{margin:6px 0 0;font-size:14.5px;line-height:1.75;color:var(--on-light-2)}

/* ============ a display line always runs as a band, never as a stray quote in a void ============ */
.closeband{margin-top:clamp(28px,3.6vh,40px);padding:clamp(26px,3.4vh,34px) clamp(28px,3vw,40px);
  border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);
  border-left:3px solid var(--gold);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.4vw,34px);
  align-items:center}
.closeband .ck{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:start}
.closeband blockquote{margin:0}
.closeband blockquote p{margin:0;max-width:none;font-family:var(--disp);font-style:italic;font-weight:500;
  font-size:clamp(19px,1.55vw,23px);line-height:1.5;letter-spacing:-.015em;color:var(--navy)}











/* ============ 14. the fact board: a compact, editable panel of short facts ============
   It replaces the stretched side panel wherever a panel has fewer rows than the copy beside it. The old
   panel grew each row to fill the column height, which read as blank space; this one keeps a fixed row
   rhythm, sits at the top of its column, and can lead with a headline figure so the height it does take
   is carrying something. Rendered identically by the bhp_fact_board Elementor widget. */
.fboard{--fb-pad:clamp(20px,2vw,26px);position:relative;overflow:hidden;border-radius:14px;align-self:start;
  padding:clamp(20px,2.5vh,26px) var(--fb-pad)}
.fboard.navy{background:var(--field-navy);color:var(--on-dark);box-shadow:0 24px 60px rgba(23,29,58,.2)}
.fboard.navy::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%)}
.fboard.cream{background:var(--field-cream);border:1px solid var(--line-light);color:var(--navy)}
.fb-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.fb-label{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.fboard.cream .fb-label{color:var(--gold-deep)}
.fb-count{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--on-dark-3)}
.fboard.cream .fb-count{color:var(--slate)}
.fb-cap{position:relative;margin-top:clamp(13px,1.7vh,17px);padding-bottom:clamp(14px,1.8vh,18px);
  border-bottom:1px solid var(--line-dark)}
.fboard.cream .fb-cap{border-bottom-color:var(--line-light)}
.fb-cap .fb-fig{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(30px,3vw,40px);
  line-height:1;letter-spacing:-.03em;color:var(--gold)}
.fboard.cream .fb-cap .fb-fig{color:var(--gold-deep)}
.fb-cap .fb-note{display:block;margin-top:7px;font-family:var(--body);font-size:13.5px;line-height:1.5;
  color:var(--on-dark-2)}
.fboard.cream .fb-cap .fb-note{color:var(--slate)}
.fb-rows{position:relative;list-style:none;margin:clamp(4px,.8vh,8px) 0 0;padding:0}
.fb-row{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:baseline;gap:12px;
  margin:0 calc(-1 * var(--fb-pad));padding:11px var(--fb-pad);border-top:1px solid var(--line-dark);
  transition:background .22s ease}
.fboard.cream .fb-row{border-top-color:var(--line-light)}
.fb-rows > .fb-row:first-child{border-top:0}
.fb-row::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--gold);
  opacity:0;transition:opacity .22s ease}
.fb-row:hover{background:rgba(247,242,231,.05)}
.fboard.cream .fb-row:hover{background:rgba(23,29,58,.035)}
.fb-row:hover::before,.fb-row.on::before{opacity:1}
.fb-n{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--on-dark-3)}
.fboard.cream .fb-n{color:var(--gold-deep)}
.fb-row:hover .fb-n{color:var(--gold)}
.fb-body{font-family:var(--body);font-size:15px;font-weight:500;line-height:1.5;color:#fff}
.fboard.cream .fb-body{color:var(--navy)}
.fb-body b{font-weight:600;color:var(--gold)}
.fboard.cream .fb-body b{color:var(--gold-deep)}
.fb-row.on .fb-body,.fboard.cream .fb-row.on .fb-body{color:var(--gold-deep)}
.fboard.navy .fb-row.on .fb-body{color:var(--gold)}
.fboard .fb-foot{position:relative;margin:clamp(13px,1.7vh,17px) 0 0;padding-top:clamp(12px,1.6vh,16px);
  border-top:1px solid var(--line-dark);font-family:var(--body);font-size:13px;line-height:1.55;
  color:var(--on-dark-2)}
.fboard.cream .fb-foot{border-top-color:var(--line-light);color:var(--slate)}
/* the ladder: the same board with its figures at display size and its rows distributed down the column.
   For a panel standing beside a very long copy column, where one fact at a time leaves a void and a
   compact list leaves the column empty below it. */
.fboard.ladder{align-self:stretch;display:flex;flex-direction:column;position:static}
.fboard.ladder .fb-rows{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  margin-top:clamp(10px,1.6vh,16px)}
.fboard.ladder .fb-row{align-items:flex-start;padding:clamp(13px,1.9vh,19px) var(--fb-pad)}
.fboard.ladder .fb-n{margin-top:8px}
.fboard.ladder .fb-body{font-size:14px;font-weight:400;line-height:1.55;color:var(--on-dark-2)}
.fboard.cream.ladder .fb-body{color:var(--slate)}
.fboard.ladder .fb-body b{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:600;
  font-size:clamp(26px,2.5vw,34px);line-height:1.02;letter-spacing:-.03em}
.fboard.ladder .fb-row.solo .fb-body{font-family:var(--disp);font-weight:600;
  font-size:clamp(18px,1.7vw,22px);line-height:1.28;letter-spacing:-.02em;color:#fff}
.fboard.cream.ladder .fb-row.solo .fb-body{color:var(--navy)}
.fboard.ladder .fb-row.solo:hover .fb-body{color:var(--gold)}
.fboard.cream.ladder .fb-row.solo:hover .fb-body{color:var(--gold-deep)}
.fboard.ladder .fb-row:hover .fb-body b{color:var(--gold)}
.fboard.cream.ladder .fb-row:hover .fb-body b{color:var(--gold-deep)}


/* a compact board is shorter than the copy beside it by design, so it travels with the reading instead
   of leaving a dead column: sticky on desktop only, where there is a second column at all */



/* ============ 15. the fact deck: one fact at a time, on a live index ============
   The interactive half of the sidebar pair. Where the fact board shows every row at once (comparisons,
   progress), the deck gives one fact the whole panel: a headline figure at display size above a clickable
   index of the rest, whose active row carries a gold rule that fills as the timer runs. The deck stretches
   to the height of the column beside it, so the stage centres its fact instead of leaving a short card in
   a tall space. It pauses on hover and focus, runs only while on screen, and every fact is in the DOM from
   the first paint. Nothing is pinned and the page never takes over the scroll. */
.fdeck{--fd-pad:clamp(20px,2vw,26px);position:relative;overflow:hidden;border-radius:14px;align-self:stretch;
  display:flex;flex-direction:column;padding:clamp(20px,2.5vh,26px) var(--fd-pad) 0}
.fdeck.navy{background:var(--field-navy);color:var(--on-dark);box-shadow:0 24px 60px rgba(23,29,58,.2)}
.fdeck.navy::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%)}
.fdeck.cream{background:var(--field-cream);border:1px solid var(--line-light);color:var(--navy)}
.fd-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.fd-label{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.fdeck.cream .fd-label{color:var(--gold-deep)}
.fd-count{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--on-dark-3)}
.fdeck.cream .fd-count{color:var(--slate)}
.fd-count b{font-weight:600;color:var(--gold)}
.fdeck.cream .fd-count b{color:var(--gold-deep)}
.fd-stage{position:relative;display:grid;flex:1;min-height:150px;
  padding:clamp(18px,2.4vh,26px) 0 clamp(20px,2.6vh,28px)}
.fd-ghost{position:absolute;right:2px;top:50%;transform:translateY(-52%);font-family:var(--disp);
  font-weight:600;font-size:clamp(96px,12vw,164px);line-height:.78;letter-spacing:-.06em;
  color:rgba(247,242,231,.05);pointer-events:none;user-select:none}
.fdeck.cream .fd-ghost{color:rgba(23,29,58,.055)}
.fd-card{position:relative;grid-area:1/1;display:flex;flex-direction:column;justify-content:center;opacity:0;
  transform:translateY(9px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.fd-card.on{opacity:1;transform:none;pointer-events:auto}
.fd-fig{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(32px,3.4vw,44px);line-height:1;
  letter-spacing:-.035em;color:var(--gold)}
.fdeck.cream .fd-fig{color:var(--gold-deep)}
.fdeck .fd-line{margin:13px 0 0;font-family:var(--body);font-size:15.5px;font-weight:500;line-height:1.6;
  color:var(--on-dark-2)}
.fdeck.cream .fd-line{color:var(--slate)}
/* a fact with no figure of its own is the headline: it is set at display size instead */
.fd-card.solo .fd-line{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(21px,2vw,26px);
  line-height:1.24;letter-spacing:-.02em;color:#fff}
.fdeck.cream .fd-card.solo .fd-line{color:var(--navy)}
/* the index doubles as the navigation and the timer */
.fd-index{position:relative;display:flex;flex-direction:column;margin:0 calc(-1 * var(--fd-pad));
  border-top:1px solid var(--line-dark)}
.fdeck.cream .fd-index{border-top-color:var(--line-light)}
.fd-item{all:unset;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:12px;
  cursor:pointer;padding:11px var(--fd-pad);border-bottom:1px solid var(--line-dark);
  font-family:var(--body);font-size:14px;font-weight:500;line-height:1.4;color:var(--on-dark-3);
  transition:color .2s ease,background .2s ease}
.fdeck.cream .fd-item{border-bottom-color:var(--line-light);color:var(--slate)}
.fd-index > .fd-item:last-child{border-bottom:0}
.fd-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  opacity:0;transition:opacity .2s ease}
.fdeck.cream .fd-item::before{background:var(--gold-deep)}
.fd-item:hover{color:#fff;background:rgba(247,242,231,.05)}
.fdeck.cream .fd-item:hover{color:var(--navy);background:rgba(23,29,58,.035)}
.fd-item.on{color:var(--gold)}
.fdeck.cream .fd-item.on{color:var(--gold-deep)}
.fd-item.on::before{opacity:1}
.fd-item:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.fd-item .fd-k{flex:none;font-size:10.5px;letter-spacing:.14em;opacity:.75}
.fd-item .fd-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-item i{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left}
.fdeck.cream .fd-item i{background:var(--gold-deep)}
.fd-index.dots{flex-direction:row;align-items:center;gap:8px;border-top:0;
  margin:0 0 clamp(18px,2.2vh,22px);padding:0}
.fd-index.dots .fd-item{flex:1;height:3px;padding:0;border-bottom:0;border-radius:2px;
  background:rgba(247,242,231,.18)}
.fdeck.cream .fd-index.dots .fd-item{background:rgba(23,29,58,.14)}
.fd-index.dots .fd-item .fd-k,.fd-index.dots .fd-item .fd-t{display:none}
.fd-index.dots .fd-item::before{display:none}
.fd-index.dots .fd-item::after{content:"";position:absolute;inset:-11px 0}   /* a real tap target */
.fd-index.dots .fd-item i{height:100%;bottom:0;border-radius:2px}
.fd-index.dots .fd-item:hover{background:rgba(247,242,231,.34)}
.fdeck.cream .fd-index.dots .fd-item:hover{background:rgba(23,29,58,.26)}
.fd-index.dots + .fd-stage,.fdeck:has(.fd-index.dots) .fd-stage{padding-bottom:clamp(16px,2vh,22px)}

/* in Elementor the deck sits inside a widget wrapper, which has to grow with it or the panel stops
   short of the column beside it */
.elementor-widget-bhp_fact_deck,.fdcol .elementor-widget-bhp_fact_board{align-self:stretch;display:flex;
  flex:1 1 auto}
.elementor-widget-bhp_fact_deck > .elementor-widget-container,
.fdcol .elementor-widget-bhp_fact_board > .elementor-widget-container{display:flex;flex:1 1 auto}
.elementor-widget-bhp_fact_deck .fdeck,.fdcol .elementor-widget-bhp_fact_board .fboard{flex:1 1 auto}



/* ============ 16. in-copy links ============
   The Elementor build gives a link inside body copy a navy weight-500 face on a gold rule
   (.bhp-csp .elementor-widget-text-editor a). The static build had nothing, so the same anchor read as
   plain prose and the two builds disagreed. Same declarations here, matched by selector. */
.ecol p a,.lead-col p a,.secfollow a,.svctext p a,.pbody p a,.intro a,
.isel-panel p a,.fb-body a,.fd-line a{color:var(--navy);font-weight:500;
  text-decoration:none;border-bottom:1.5px solid rgba(255,176,0,.7);transition:border-color .2s ease}
.sec-navy .ecol p a,.sec-deep .ecol p a,.sec-photo .ecol p a,
.sec-navy .secfollow a,.sec-deep .secfollow a{color:#fff}
.ecol p a:hover,.lead-col p a:hover,.secfollow a:hover,.svcbody p a:hover,.pbody p a:hover,
.intro a:hover{border-bottom-color:var(--gold)}

/* a bound pair whose final word carries a hyphen must not break inside it either */
.nb{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .ec-ring .arc{animation:none;stroke-dashoffset:0}
}

@media (max-width:1100px){
  .chero .grid{grid-template-columns:1fr;gap:clamp(28px,4vh,40px)}
  .chero h1.tag .ln{display:inline}
  .svcgrid{grid-template-columns:repeat(2,1fr)}
  .audgrid{grid-template-columns:repeat(2,1fr)}
  .teamgrid{grid-template-columns:repeat(2,1fr)}
  .lanes{grid-template-columns:1fr;gap:clamp(26px,4vh,36px)}
  .twocol{columns:1}
  .c10 .gsecond{padding-left:0;border-left:0;border-top:1px solid var(--line-dark);padding-top:24px}
}

@media (max-width:900px){
  .cy{grid-template-columns:repeat(2,1fr);gap:14px}
  .cy li::before{display:none}
  .loopband{grid-template-columns:1fr;gap:18px}
  .loopband .lk{writing-mode:horizontal-tb;transform:none}
  .loopband .rpt{flex-direction:row;align-self:flex-start}
  .implband ul{grid-template-columns:repeat(2,1fr)}
  .implband li:nth-child(-n+3){border-top:1px solid var(--line-light)}
  .implband li:nth-child(-n+2){border-top:0}
  .mphoto img{aspect-ratio:16/9}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .statrow .lstat:nth-child(3){border-left:0}
  .statrow .lstat:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .ec-body{grid-template-columns:1fr}
  .ec-ring{justify-self:center}
  .tqgrid{grid-template-columns:repeat(2,1fr)}
  .trow{grid-template-columns:clamp(120px,20vw,160px) 1fr}
}

@media (max-width:700px){
  .cy{grid-template-columns:1fr}
  .implband ul{grid-template-columns:1fr}
  .implband li{border-top:1px solid var(--line-light)}
  .implband li:first-child{border-top:0}
  .crisis{flex-direction:column;gap:14px}
  .audgrid,.nxtgrid,.lanes{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr}
  .statrow .lstat+.lstat{border-left:0;border-top:1px solid var(--line-dark)}
  .ec-foot{flex-wrap:wrap}
}

@media (max-width:640px){
  .svcgrid,.audgrid,.teamgrid{grid-template-columns:1fr}
  .rd-foot b{font-size:26px}
  .tqgrid{grid-template-columns:1fr}
  .trow{grid-template-columns:1fr}
  .trow .ph img{aspect-ratio:16/10}
  .tinfo{padding:clamp(18px,2.6vh,24px)}
}

@media (max-width:900px){.fboard.ladder{align-self:start}}

@media (min-width:901px){.fboard{position:sticky;top:104px}.fboard.ladder{position:static}}

@media (prefers-reduced-motion:reduce){.fb-row{transition:none}.fb-row::before{transition:none}}

@media (max-width:900px){
  .fd-stage{min-height:120px}
  .fdeck{align-self:start}
  .elementor-widget-bhp_fact_deck,.fdcol .elementor-widget-bhp_fact_board{flex:0 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .fd-card{transition:none}
  .fd-item i{transition:none!important;transform:scaleX(0)!important}
}

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

/* the hover rules below set border-color wholesale, so the gold edge is restated after them */

/* ---------- Elementor parity: neutralise what the builder adds ---------- */

.bhp-csp .elementor-widget-container{margin:0}
.bhp-csp .elementor-widget-text-editor p{margin:0}
.bhp-csp .elementor-widget-text-editor p + p{margin-top:16px}
.bhp-csp .elementor-heading-title{margin:0}
.bhp-csp em{font-style:italic}
.bhp-csp .elementor-widget-text-editor a,.bhp-csp .isel-panel p a,.bhp-csp .fb-body a,
.bhp-csp .fd-line a{color:var(--navy);font-weight:500;text-decoration:none;
  border-bottom:1.5px solid rgba(255,176,0,.7)}
.bhp-csp.sec-navy .elementor-widget-text-editor a,.bhp-csp.sec-deep .elementor-widget-text-editor a,
.bhp-csp.sec-photo .elementor-widget-text-editor a{color:#fff}
/* the hero headline is capped to its column, so the column must be a container-query container */
.bhp-csp .herocol{container-type:inline-size}
/* the stat figure is a heading widget, so the panel's paragraph colour rule must not claim it */
.bhp-csp .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
/* quote body: the static page tracks its display quotes */
.bhp-csp .tq .qbody p{letter-spacing:-.025em}
/* body copy: the shared .sec p rule wins on the static page, so match it here too */
.bhp-csp .ecol > .elementor-widget-text-editor p,.bhp-csp .lane > .elementor-widget-text-editor p{
  font-size:clamp(16px,1.1vw,17.5px);line-height:1.62}
/* the hero headline's designed line breaks live in hero.css, which this page does not load */
.bhp-csp .tag .ln{display:block;white-space:normal}   /* typescale.css sets nowrap for the homepage tagline */
.bhp-csp .tag em{font-style:italic;font-weight:500;color:var(--gold)}
/* mission band: a brighter photograph with a more solid panel, so the copy is not washed out */
.bhp-csp.sec-photo::after{background:linear-gradient(100deg,rgba(9,13,30,.56),rgba(9,13,30,.22) 46%,rgba(9,13,30,.5))}
.bhp-csp .mpanel{background:rgba(11,16,34,.88);border-color:rgba(247,242,231,.18)}
.bhp-csp .mpanel p{color:rgba(255,255,255,.9)}
/* the mission band already carries its own scrim in .sec-photo::after; Elementor's overlay on top of it made
   the photograph grey, so the section paints the photo only */
.bhp-csp.sec-photo > .elementor-background-overlay{display:none}
/* the final CTA uses the same field gradient as the homepage's, not a two stop approximation */
.bhp-csp.c14,.bhp-csp.chero-el{background-image:var(--field-navy)!important}
/* the hero lead keeps the design's reading measure */
/* both classes sit on the same element, so this must not be a descendant selector */
.bhp-csp.chero-el .herocol > .elementor-widget-text-editor{max-width:62ch}
/* badge sizing lives in hero.css, which this page does not load */
.bhp-csp .badges img{height:clamp(58px,7.2vh,72px)!important;width:auto!important}
.bhp-csp .badges img.wide{height:clamp(52px,6.6vh,66px)!important}
/* the panels stretch, so their rows share the height instead of leaving a hole at the bottom */
.bhp-csp .spans > .e-con,.bhp-csp .side-panel > .e-con{flex:1}
/* the callout keeps its own gap under the paragraph */
.bhp-csp .ecol > .moat{margin-top:clamp(20px,2.6vh,26px)}
/* Elementor puts a boxed container's padding on its .e-con-inner, which is why reading it off the section
   showed 0. The hero's padding is set in the panel, not here, so Adam can change it. */
.bhp-csp.chero-el .herocol > .elementor-widget:not(:first-child){margin-top:0}
/* the quote body fills its card, as the static blockquote does with flex:1 */
.bhp-csp .tq .qbody{flex:1;display:flex;align-items:center}
.bhp-csp .tq .qbody p{margin:0}
/* lane head: label left, title hard right */
.bhp-csp .lane-h{justify-content:space-between}
.bhp-csp .lane-h .elementor-widget:last-child{margin-left:auto;text-align:right}
/* whole-card links: Elementor fatals on a container link setting, so the card's own anchor is stretched */
.bhp-csp .svc,.bhp-csp .nxt{position:relative}
.bhp-csp .svc .elementor-button::after,.bhp-csp .nxt .elementor-button::after{content:"";position:absolute;inset:0}
.bhp-csp .svc .elementor-button,.bhp-csp .nxt .elementor-button{position:static}
/* Elementor draws its own ::before on containers for background overlays, so decorative marks use ::after */
.bhp-csp .tq.e-con,.bhp-csp .svc.e-con,.bhp-csp .aud.e-con,.bhp-csp .lane.e-con{position:relative}