/* ==========================================================================
   HomeMinimal.jsx  —  @role
   Home page entry component (renders <HomeMinimal/>). Composes sections from HomeRefined + shared Nav/Footer. This is index.html’s root render.
   ========================================================================== */
// HomeMinimal — trimmed variant of the homepage.
// Strategy: reuse the heavy/locked sections from HomeRefined verbatim
// (Stats, Routing, FAQ) and author dedicated minimal versions of the
// sections whose copy / layout / density needed to change.
//
// Edits applied in this pass (user-directed, May 2026):
// • Hero — sub paragraph trimmed to the first sentence.
// • BreaksDown — card body copy removed; cards now title + ring ref
//   only; padding reduced. Header sub trimmed to two sentences.
// • System — domain card copy halved; closing 4-line paragraph
//   replaced with a single sentence.
// • Principles — lead paragraph removed; each card body halved.
// • Routing / Diagnostic — KEPT for now. The hero CTA is generic
//   ("Take the diagnostic"); the routing card asks Individual vs.
//   Team. Removing it dumps the visitor into a generic flow with
//   no choice. Easy to delete the <HRefined_Routing /> line below.
// • Case Study — restructured: chart on left, stats on right (2×2),
//   narrative columns compacted.
// • Insights — full editorial card replaced with a small reference
//   strip linking to the Hub.
// • Footer — passes minimal flag; collapses to 3 cols, contact right.

// ============================================================
//  Minimal-only CSS overrides + tighter padding for the page.
// ============================================================
const ensureHomeMinimalStyles = () => {
  if (typeof document === 'undefined') return;
  if (document.getElementById('__home-minimal-style')) return;
  const s = document.createElement('style');
  s.id = '__home-minimal-style';
  s.textContent = `
    /* Unified scroll-reveal for major sections. */
    .hr-min section.hr-reveal {
      opacity: 0; transform: translateY(22px);
      transition: opacity 0.6s cubic-bezier(0.2,0.7,0.2,1), transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
      will-change: opacity, transform;
    }
    .hr-min section.hr-reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .hr-min section.hr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ===== Interactive diagnostic teaser ===== */
    .hr-teaser {
      background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
      padding: 64px 0 72px;
      font-family: "Mona Sans", -apple-system, sans-serif;
    }
    .hr-teaser-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
    .hr-teaser-head .eyebrow-blue { font-size: 13px; letter-spacing: 0.18em; }
    .hr-teaser-h {
      margin: 14px 0 10px; font-size: 34px; font-weight: 600;
      line-height: 1.12; letter-spacing: -0.022em; color: #0D0042;
      text-wrap: balance;
    }
    /* ===== Global sizing calibration (minimal page) =====
       Recalibrated for 100% viewing (earlier values were tuned while the
       browser was at 150% zoom, which read too small at 100%). Sizes now
       sit in line with reference consultancy sites — a large, confident
       hero and section headings that use the screen without dominating. */
    .hr-min .hr-hero-h { font-size: 54px; line-height: 1.06; }
    .hr-min .hr-hero-sub { font-size: 19px; max-width: 760px; }
    .hr-min .hr-hero { padding-top: 104px; }
    .hr-min .hr-breaks-h, .hr-min .hr-breaks-h--light { font-size: 38px; }
    .hr-min .hr-min-system-h { font-size: 34px; }
    .hr-min .hr-principles-h { font-size: 34px; }
    .hr-min .hr-teaser-h { font-size: 32px; }
    /* Credibility banner */
    .hr-min .hr-stats { padding: 18px 0; }
    /* Credibility banner — a slim translucent strip sitting INSIDE the hero,
       on top of the single hero video (no second video; no mirrored look).
       A faint tint + blur keeps the numbers legible while the footage still
       reads through behind it. */
    .hr-hero-cred {
      position: relative; z-index: 3;
      margin-top: 30px;
      padding: 18px 0;
      /* Translucent shaded band — the hero video reads BLURRED behind it, so
         the strip clearly registers as a banner rather than floating text. */
      background: rgba(10,10,31,0.34);
      backdrop-filter: blur(12px) saturate(1.1);
      -webkit-backdrop-filter: blur(12px) saturate(1.1);
      border-top: 1px solid rgba(255,255,255,0.18);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .hr-hero-cred .hr-stats-inner { gap: 40px; align-items: center; }
    @container pslpage (max-width: 1023px) {
      .hr-hero-cred { margin-top: 20px; padding: 16px 0; }
      .hr-hero-cred .hr-stats-inner { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    }
    @container pslpage (max-width: 600px) {
      .hr-hero-cred .hr-stats-inner { grid-template-columns: 1fr; gap: 10px; }
    }
    .hr-min .hr-stat-n { font-size: 34px; }
    .hr-min .hr-stat-l { font-size: 13px; }
    /* Section vertical rhythm */
    .hr-min .hr-breaks { padding: 64px 0 68px; }
    .hr-min .hr-principles { padding: 64px 0 68px; }
    .hr-min .hr-teaser { padding: 64px 0 68px; }
    .hr-min .hr-min-system { padding: 64px 0 68px; }
    .hr-min .hr-breaks-head { margin-bottom: 32px !important; }
    .hr-min .hr-breaks-sub--light { font-size: 18px !important; }
    .hr-min .hr-min-system-sub { font-size: 17px; }
    .hr-min .hr-teaser-sub { font-size: 17px; }
    @container pslpage (max-width: 880px) {
      .hr-min .hr-hero-h { font-size: 38px; }
      .hr-min .hr-breaks-h, .hr-min .hr-breaks-h--light,
      .hr-min .hr-min-system-h, .hr-min .hr-principles-h,
      .hr-min .hr-teaser-h { font-size: 28px; }
    }
    .hr-teaser-sub { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(13,0,66,0.65); }

    .hr-teaser-stage {
      display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px;
      max-width: 1000px; margin: 0 auto; align-items: stretch;
    }
    /* LEFT control */
    .hr-teaser-control { display: flex; flex-direction: column; }
    .hr-teaser-q {
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: rgba(13,0,66,0.5);
      margin-bottom: 12px;
    }
    .hr-teaser-seg { display: flex; flex-direction: column; gap: 8px; }
    .hr-teaser-segbtn {
      display: flex; align-items: flex-start; gap: 12px;
      text-align: left; cursor: pointer; font-family: inherit;
      background: #FFFFFF; border: 1px solid rgba(13,0,66,0.10);
      border-radius: 12px; padding: 13px 15px;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }
    .hr-teaser-segbtn * { cursor: pointer; }
    .hr-teaser-segbtn:hover { border-color: var(--c); transform: translateX(2px); }
    .hr-teaser-segbtn.sel {
      border-color: var(--c);
      box-shadow: inset 0 0 0 1px var(--c);
      background: color-mix(in srgb, var(--c) 5%, #fff);
    }
    .hr-teaser-segdot {
      width: 11px; height: 11px; border-radius: 50%;
      border: 2px solid var(--c); margin-top: 3px; flex-shrink: 0;
      transition: background 0.18s ease;
    }
    .hr-teaser-segbtn.sel .hr-teaser-segdot { background: var(--c); }
    .hr-teaser-segtxt { display: flex; flex-direction: column; gap: 2px; }
    .hr-teaser-segtxt strong { font-size: 15px; font-weight: 700; color: #0D0042; letter-spacing: -0.01em; }
    .hr-teaser-segtxt em { font-style: normal; font-size: 13px; color: rgba(13,0,66,0.6); }

    .hr-teaser-read {
      margin-top: 16px; padding: 16px 18px;
      background: #FFFFFF; border: 1px solid rgba(13,0,66,0.10);
      border-radius: 12px;
    }
    .hr-teaser-read p {
      margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: rgba(13,0,66,0.78);
    }
    .hr-teaser-cta {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 11px 20px; border-radius: 999px;
      background: var(--c); color: #FFFFFF;
      font-size: 13.5px; font-weight: 600; text-decoration: none;
      transition: gap 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .hr-teaser-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(13,0,66,0.45); }

    /* RIGHT — sample report */
    .hr-teaser-report {
      background:
        radial-gradient(120% 80% at 0% 0%, rgba(219,234,254,0.7) 0%, rgba(219,234,254,0) 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 100%);
      border: 1px solid rgba(15,23,80,0.10);
      border-radius: 16px;
      padding: 22px 24px 20px;
      box-shadow: 0 24px 60px -28px rgba(15,23,80,0.30);
      display: flex; flex-direction: column;
    }
    .hr-teaser-report-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 16px;
    }
    .hr-teaser-report-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #2563EB; }
    .hr-teaser-report-title { display: block; font-size: 17px; font-weight: 600; color: #0D0042; margin-top: 3px; }
    .hr-teaser-report-badge {
      font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
      color: #1D4ED8; background: rgba(37,99,235,0.1);
      border: 1px solid rgba(37,99,235,0.22);
      padding: 3px 7px; border-radius: 4px;
    }
    /* Circular profile photo, top-right of the report. */
    .hr-teaser-report-photo {
      width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
      background-size: cover; background-position: 50% 30%;
      border: 2px solid #FFFFFF;
      box-shadow: 0 4px 14px rgba(15,23,80,0.20), 0 0 0 2px var(--c);
      transition: box-shadow 0.3s ease, background-image 0.3s ease;
    }
    .hr-teaser-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
    .hr-teaser-score-num {
      font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
      background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      font-variant-numeric: tabular-nums;
      transition: all 0.3s ease;
    }
    .hr-teaser-score-suf { font-size: 14px; font-weight: 500; color: rgba(13,0,66,0.55); }
    .hr-teaser-bars { display: flex; flex-direction: column; gap: 13px; padding-top: 16px; border-top: 1px solid rgba(15,23,80,0.08); }
    .hr-teaser-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
    .hr-teaser-bar-name { font-size: 12.5px; font-weight: 600; color: #0D0042; display: inline-flex; align-items: center; gap: 8px; }
    .hr-teaser-bar-flag {
      font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
      color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff);
      padding: 2px 6px; border-radius: 4px;
    }
    .hr-teaser-bar-pct { font-size: 12.5px; font-weight: 700; color: #0D0042; font-variant-numeric: tabular-nums; }
    .hr-teaser-bar-track { height: 7px; background: rgba(15,23,80,0.08); border-radius: 999px; overflow: hidden; }
    .hr-teaser-bar-fill { height: 100%; border-radius: 999px; transition: width 0.55s cubic-bezier(0.2,0.7,0.2,1), background 0.3s ease, opacity 0.3s ease; }
    /* Benchmark marker on each bar — the high-performer level, so the gap reads. */
    .hr-teaser-bar-wrap { position: relative; }
    .hr-teaser-bar-bench {
      position: absolute; top: -3px; bottom: -3px; width: 2px;
      background: rgba(13,0,66,0.6); border-radius: 1px;
      transform: translateX(-1px);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
    }
    /* Benchmark callout — frames the constraint score vs. high performers. */
    .hr-teaser-bench {
      margin-top: 14px; padding: 12px 14px;
      background: color-mix(in srgb, var(--c) 6%, #fff);
      border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
      border-radius: 12px;
    }
    .hr-teaser-bench-tag {
      display: block; font-size: 10px; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--c); margin-bottom: 6px;
    }
    .hr-teaser-bench-line {
      margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(13,0,66,0.78);
    }
    .hr-teaser-bench-key {
      display: flex; align-items: center; gap: 8px;
      margin-top: 10px; font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.03em; color: rgba(13,0,66,0.5);
    }
    .hr-teaser-bench-key-tick {
      display: inline-block; width: 2px; height: 12px; border-radius: 1px;
      background: rgba(13,0,66,0.6); box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
      flex-shrink: 0;
    }
    .hr-teaser-report-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,23,80,0.08); font-size: 11.5px; line-height: 1.5; color: rgba(13,0,66,0.55); }
    /* "Where we'd start" — engagement teaser inside the report. */
    .hr-teaser-next {
      margin-top: 16px; padding-top: 15px;
      border-top: 1px solid rgba(15,23,80,0.08);
    }
    .hr-teaser-next-label {
      display: block; font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.14em; color: var(--c); margin-bottom: 10px;
    }
    .hr-teaser-next ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .hr-teaser-next li {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: 12.5px; line-height: 1.45; color: rgba(13,0,66,0.74);
    }
    .hr-teaser-next-tick {
      width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
      background:
        var(--c)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6.5l2.5 2.5 4.5-5'/></svg>")
        no-repeat center / 9px 9px;
    }

    @container pslpage (max-width: 880px) {
      .hr-teaser-stage { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hr-teaser-bar-fill { transition: none; }
    }

    /* BreaksDown — light variant. Inverted from the dark navy
       treatment so the section feels lighter alongside the rest. */
    .hr-min .hr-breaks { padding: 64px 0 72px; }
    .hr-min .hr-breaks--light {
      background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
    }
    .hr-min .hr-breaks--light::before { display: none; }
    .hr-min .hr-breaks-head { margin-bottom: 32px !important; }
    /* Eyebrow — force brand blue + match the size/tracking of the other
       section eyebrows (styles.css enlarges .hr-breaks-head .eyebrow). */
    .hr-min .hr-breaks-head .eyebrow,
    .hr-min .hr-breaks-head .eyebrow-blue {
      color: #1F4DD8 !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.22em !important;
    }
    .hr-min .hr-breaks-h--light { color: #0D0042 !important; }
    /* Accent word in the breakdown title — solid brand blue (the teal
       gradient read green and washed out on the light background). */
    .hr-min .hr-breaks-h--light .hr-h-accent {
      background: none !important;
      -webkit-text-fill-color: #1F4DD8 !important;
      color: #1F4DD8 !important;
      font-style: italic;
    }
    .hr-min .hr-breaks-sub--light { color: rgba(13,0,66,0.7) !important; }
    .hr-min .hr-breaks-sub--light strong { color: #0D0042 !important; }
    .hr-min .hr-bd-card--light h3 { font-size: 20px !important; }
    /* In-card title emphasis — brand blue (not yellow) on the
       minimal page. */
    .hr-min .hr-break-accent { color: #2563EB !important; }

    /* BreaksDown header motifs — animate on scroll-in. Lines draw via
       stroke-dashoffset; nodes pop; the capacity wave floats after drawing. */
    .hr-min-bd-card .bd-draw { stroke-dasharray: 64; stroke-dashoffset: 64; }
    .hr-breaks.is-in .hr-min-bd-card .bd-draw {
      animation: bdDrawLoop 5s ease-in-out infinite;
    }
    .hr-breaks.is-in .hr-min-bd-card .bd-d1 { animation-delay: 0.22s; }
    .hr-breaks.is-in .hr-min-bd-card .bd-d2 { animation-delay: 0.44s; }
    .hr-breaks.is-in .hr-min-bd-card .bd-d3 { animation-delay: 0.66s; }
    .hr-min-bd-card .bd-node { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; }
    .hr-breaks.is-in .hr-min-bd-card .bd-node { animation: bdPop 0.5s cubic-bezier(0.2,1.4,0.4,1) forwards; }
    .hr-breaks.is-in .hr-min-bd-card .bd-n1 { animation-delay: 0.12s; }
    .hr-breaks.is-in .hr-min-bd-card .bd-n2 { animation-delay: 0.3s; }
    .hr-breaks.is-in .hr-min-bd-card .bd-n3 { animation-delay: 0.5s; }
    .hr-min-bd-card .bd-wave { stroke-dasharray: 150; stroke-dashoffset: 150; }
    .hr-breaks.is-in .hr-min-bd-card .bd-wave {
      animation: bdWaveLoop 5s ease-in-out infinite;
    }
    /* Capacity speedometer needle — accelerates to the right once, then keeps
       a small continuous "rev" near the top so it's always moving / always
       high output. Two nested transforms: ramp (once) + rev (infinite). */
    .hr-min-bd-card .bd-gauge { transform-origin: 42px 34px; transform: rotate(-62deg); }
    .hr-breaks.is-in .hr-min-bd-card .bd-gauge { animation: bdGauge 2.8s cubic-bezier(0.2,0.75,0.2,1) forwards; }
    .hr-min-bd-card .bd-gauge-rev { transform-origin: 42px 34px; }
    .hr-breaks.is-in .hr-min-bd-card .bd-gauge-rev { animation: bdGaugeRev 0.85s cubic-bezier(0.25,0.85,0.3,1) 2.4s infinite; }
    @keyframes bdGauge {
      0% { transform: rotate(-62deg); }
      70% { transform: rotate(58deg); }
      84% { transform: rotate(50deg); }
      100% { transform: rotate(56deg); }
    }
    @keyframes bdGaugeRev {
      0%   { transform: rotate(-18deg); }
      26%  { transform: rotate(8deg); }
      40%  { transform: rotate(3deg); }
      100% { transform: rotate(-18deg); }
    }
    /* Architecture motif — boxes nudge after drawing, to read as the
       structure being actively re-arranged. */
    .hr-breaks.is-in .hr-min-bd-card .bd-n1 { animation: bdPop 0.5s cubic-bezier(0.2,1.4,0.4,1) 0.12s forwards, bdShift 3.6s ease-in-out 1.4s infinite; }
    .hr-breaks.is-in .hr-min-bd-card .bd-n2 { animation: bdPop 0.5s cubic-bezier(0.2,1.4,0.4,1) 0.3s forwards, bdShiftAlt 3.6s ease-in-out 1.6s infinite; }
    @keyframes bdShift    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
    @keyframes bdShiftAlt { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
    @keyframes bdDraw  { to { stroke-dashoffset: 0; } }
    @keyframes bdDrawLoop { 0% { stroke-dashoffset: 64; } 35% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 64; } }
    @keyframes bdWaveLoop { 0% { stroke-dashoffset: 150; } 35% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 150; } }
    @keyframes bdPop   { to { opacity: 1; transform: scale(1); } }
    @keyframes bdFloat {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hr-min-bd-card .bd-draw,
      .hr-min-bd-card .bd-wave { stroke-dashoffset: 0 !important; animation: none !important; }
      .hr-min-bd-card .bd-gauge { transform: rotate(40deg) !important; animation: none !important; }
      .hr-min-bd-card .bd-node { opacity: 1 !important; transform: none !important; animation: none !important; }
    }

    /* In-hero "Engagements include" strip — stacked at the far bottom-left
       and made compact so it doesn't dominate the hero base. */
    .hr-min .hr-hero-trusted { margin-top: 28px; }
    .hr-min .hr-hero-trusted-inner {
      flex-direction: column; align-items: flex-start; gap: 8px;
    }
    .hr-min .hr-hero-trusted-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
    .hr-min .hr-hero-trusted-row { gap: 16px; }
    /* Subtle CTA linking the principles section through to the method page. */
    .hr-principles-cta { margin-top: 34px; display: flex; justify-content: center; }
    .hr-principles-cta-link {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
      color: #1F4DD8; text-decoration: none;
      padding: 8px 4px;
      border-bottom: 1px solid rgba(31,77,216,0.28);
      transition: gap 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .hr-principles-cta-link:hover { gap: 13px; color: #15399c; border-color: rgba(31,77,216,0.6); }
    .hr-principles-cta-link svg { transition: transform 0.2s ease; }
    .hr-principles-cta-link:hover svg { transform: translateX(3px); }
    /* Credibility strip sits over the hero video — lighten the veil here so
       more of the footage reads through while the white logos stay legible. */
    .hr-min .hr-hero-video-veil {
      background: linear-gradient(180deg, rgba(10,10,31,0.24) 0%, rgba(10,10,31,0.12) 38%, rgba(10,10,31,0.40) 100%);
    }
    .hr-min .hr-hero-trusted-logo--hsbc      { height: 20px; }
    .hr-min .hr-hero-trusted-logo--santander { height: 30px; }
    .hr-min .hr-hero-trusted-logo--lloyds    { height: 18px; }
    .hr-min .hr-hero-trusted-logo--vodafone  { height: 20px; }
    .hr-min .hr-hero-trusted-logo--natura    { height: 14px; }
    .hr-min .hr-hero-trusted-logo--natura    { height: 17px; }

    /* Case-study chart — "heart-rate monitor" style. Both lines draw at
       the SAME TIME (linear), each led by a moving dot; the drawn line is
       the trail left behind the dot. */
    .hr-min-cs-card .cs-line { stroke-dasharray: 1900; stroke-dashoffset: 1900; }
    /* Case-study stat pills — fade + rise in when the section enters view,
       staggered, while the numbers count up. */
    .hr-min-cs-pill { opacity: 0; transform: translateY(10px); }
    .hr-min-cs-pill.is-in {
      animation: csPillIn 0.5s cubic-bezier(0.2,0.7,0.2,1) forwards;
      animation-delay: calc(var(--pill-i) * 0.15s + 0.2s);
    }
    @keyframes csPillIn { to { opacity: 1; transform: translateY(0); } }
    /* "What we did" bullets slide in, staggered to track the chart animation. */
    .hr-min-cs-do { opacity: 0; transform: translateX(22px); }
    .hr-min-cs-card.is-in .hr-min-cs-do {
      animation: csDoIn 0.6s cubic-bezier(0.2,0.7,0.2,1) forwards;
      animation-delay: var(--do-delay, 0s);
    }
    @keyframes csDoIn { to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      .hr-min-cs-do { opacity: 1 !important; transform: none !important; animation: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hr-min-cs-pill { opacity: 1 !important; transform: none !important; animation: none !important; }
    }
    .hr-min-cs-card .cs-x,
    .hr-min-cs-card .cs-endpoint,
    .hr-min-cs-card .cs-endpoint-ring { opacity: 0; }
    .hr-min-cs-card.is-in .cs-line-red,
    .hr-min-cs-card.is-in .cs-line-green {
      animation: csDraw 3.4s linear forwards;
    }
    .hr-min-cs-card.is-in .cs-x {
      animation: csFade 0.4s ease forwards;
      animation-delay: var(--d, 1s);
    }
    .hr-min-cs-card.is-in .cs-endpoint {
      animation: csPop 0.5s cubic-bezier(0.2,1.4,0.4,1) 3.4s forwards;
    }
    .hr-min-cs-card.is-in .cs-endpoint-ring {
      animation: csPing 1.8s ease-out 3.7s infinite;
    }
    @keyframes csDraw { to { stroke-dashoffset: 0; } }
    @keyframes csFade { to { opacity: 0.95; } }
    @keyframes csPop  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
    @keyframes csPing { 0% { opacity: 0.35; r: 14; } 70%,100% { opacity: 0; r: 22; } }
    @media (prefers-reduced-motion: reduce) {
      .hr-min-cs-card .cs-line { stroke-dashoffset: 0 !important; animation: none !important; }
      .hr-min-cs-card .cs-x,
      .hr-min-cs-card .cs-endpoint,
      .hr-min-cs-card .cs-endpoint-ring { opacity: 0.95 !important; animation: none !important; }
      .hr-min-cs-card .cs-lead-dot { display: none !important; }
    }

    /* System (minimal) — clean white background. Rings on the left,
       numbered domain cards on the right. No background image.
       The tags equation lives under the rings, anchored to the visual. */
    .hr-min-system {
      position: relative;
      padding: 56px 0 64px !important;
      background: #FFFFFF !important;
    }
    .hr-min-system::before { display: none; }
    .hr-min-system-inner { position: relative; }
    .hr-min-system-head {
      text-align: left;
      max-width: 760px;
      margin: 0 auto 32px;
    }
    .hr-min-system-h {
      font-size: 36px; line-height: 1.1; letter-spacing: -0.022em;
      font-weight: 600; color: #0D0042;
      margin: 12px 0 10px;
      text-wrap: balance;
    }
    .hr-min-system-h-accent {
      font-style: italic; font-weight: 600; color: #1F4DD8;
    }
    .hr-min-system-sub {
      margin: 0; font-size: 15px; line-height: 1.6;
      color: rgba(13,0,66,0.65);
      max-width: 680px;
      text-wrap: pretty;
    }
    .hr-min-system-sub strong { color: #0D0042; font-weight: 700; font-style: italic; }
    .hr-min-system-grid {
      display: grid; grid-template-columns: 1.1fr 0.9fr;
      gap: 28px;
      /* Top-align the columns so the logo's vertical position never shifts
       when a card changes state (center-alignment re-centred on the cards
       column and made the graphic jolt). */
      align-items: start;
      max-width: 1180px;
      margin: 0 auto;
    }
    .hr-min-system-ring-col {
      display: flex; flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    /* Annotation caption above the rings graphic — small centred label
       flanked by tiny diamond marks (a registration-mark feel, not the
       full-width hairlines). */
    .hr-min-rings-cap {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 11px; width: auto; max-width: none; margin: 0 auto;
      font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: #1F4DD8;
      white-space: nowrap;
    }
    .hr-min-rings-cap::before,
    .hr-min-rings-cap::after {
      content: ""; flex: none;
      width: 4px; height: 4px; border-radius: 1px;
      background: #1F4DD8; opacity: 0.7;
      transform: rotate(45deg);
    }
    /* Equation under the rings — typographic, ring-coloured dots. */
    .hr-min-eq {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 10px;
      margin-top: 2px;
    }
    .hr-min-eq-term {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 15px; font-weight: 600; color: #0D0042;
      letter-spacing: -0.005em;
    }
    .hr-min-eq-dot { width: 7px; height: 7px; border-radius: 50%; }
    .hr-min-eq-op, .hr-min-eq-eq {
      font-size: 15px; font-weight: 400; color: rgba(13,0,66,0.35);
    }
    .hr-min-eq-result {
      font-size: 15px; font-weight: 700; color: #1F4DD8;
      letter-spacing: -0.005em;
    }
    /* Caption below the equation — names the rings as the framework artefact. */
    .hr-min-rings-foot {
      margin-top: 4px;
      font-size: 12.5px; line-height: 1.5; text-align: center;
      color: rgba(13,0,66,0.6); max-width: 360px;
    }
    .hr-min-rings-foot strong { color: #0D0042; font-weight: 600; }
    .hr-min-system-ring-col .psl-perf-system {
      max-width: 380px; width: 100%;
    }
    .hr-min-system-ring-col .psl-perf-anim {
      max-width: 560px; width: 100%; margin: -42px auto -30px;
    }
    .hr-min-system-tags {
      justify-content: center;
      flex-wrap: wrap;
    }
    /* Domain cards — vertical stack on white. Number on the left,
       label/title/body on the right. Quiet, editorial. */
    .hr-min-system-domains {
      display: flex; flex-direction: column;
      align-items: flex-start;
      gap: 11px;
    }
    /* Cards fade in staggered, in sync with their rings building in the logo.
       Opacity-only so the :hover lift (transform) is never blocked by the
       animation's fill state. */
    .hr-min-system-domains .hr-min-domain { opacity: 0; }
    .hr-min-system-domains.rings-in .hr-min-domain {
      animation: hrDomainIn 0.55s ease forwards;
      animation-delay: var(--card-delay, 0s);
    }
    @keyframes hrDomainIn { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .hr-min-system-domains .hr-min-domain { opacity: 1 !important; animation: none !important; }
    }
    .hr-min-domain {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 13px;
      align-items: start;
      padding: 13px 16px;
      width: 100%;
      max-width: 360px;
      background: #FFFFFF;
      border: 1px solid rgba(13,0,66,0.10);
      border-radius: 13px;
      text-align: left;
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='10' fill='rgba(31,77,216,0.12)' stroke='%231F4DD8' stroke-width='2'/%3E%3Ccircle cx='15' cy='15' r='2.6' fill='%231F4DD8'/%3E%3C/svg%3E") 15 15, pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      font-family: inherit;
    }
    .hr-min-domain:hover,
    .hr-min-domain.active {
      border-color: rgba(31,77,216,0.45);
      box-shadow: 0 14px 36px -20px rgba(13,0,66,0.18);
      transform: translateY(-1px);
    }
    .hr-min-domain-num {
      display: inline-flex; align-items: flex-start; justify-content: center;
      padding-top: 2px;
    }
    .hr-min-domain-body { display: flex; flex-direction: column; gap: 5px; }
    .hr-min-domain-points {
      display: flex; flex-wrap: wrap; gap: 7px;
      margin-top: 3px;
    }
    .hr-min-domain-point {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 9px;
      border: 1px solid rgba(13,0,66,0.12);
      border-radius: 999px;
      font-size: 11px; font-weight: 600;
      color: rgba(13,0,66,0.7);
      background: #FFFFFF;
    }
    .hr-min-domain-point-dot {
      width: 6px; height: 6px; border-radius: 50%;
    }
    .hr-min-domain .hr-domain-t {
      margin: 0;
      font-size: 16.5px; font-weight: 600;
      letter-spacing: -0.005em;
      color: #0D0042 !important;
    }
    .hr-min-domain .hr-domain-k {
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.16em;
      color: rgba(13,0,66,0.5);
      text-transform: uppercase;
    }
    .hr-min-domain .hr-domain-d {
      margin: 0;
      font-size: 13px; line-height: 1.5;
      color: rgba(13,0,66,0.72);
    }
    @container pslpage (max-width: 880px) {
      .hr-min-system-grid { grid-template-columns: 1fr; gap: 40px; }
      .hr-min-system-ring-col .psl-perf-system { max-width: 320px; }
      .hr-min-system-ring-col .psl-perf-anim { max-width: 460px; }
    }

    /* Principles — denser grid. */
    .hr-min .hr-principles { padding: 64px 0 72px; }
    .hr-min .hr-principles-head { margin-bottom: 36px !important; }
    .hr-min .hr-principle-b { font-size: 15px !important; line-height: 1.55 !important; }

    /* Insights teaser — tight bar. */
    .hr-min-insights {
      background: #F6F8FB;
      padding: 56px 0 56px;
      font-family: "Mona Sans", -apple-system, sans-serif;
    }
    .hr-min-insights-row {
      display: grid; grid-template-columns: 1fr 1.4fr;
      gap: 56px; align-items: center;
    }
    /* Slim insights banner variant */
    .hr-min-insights--banner { padding: 36px 0 !important; }

    /* ===== Insights "lab" band — refined, professional research banner ===== */
    .hr-lab {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FD 100%);
      border-top: 1px solid rgba(13,0,66,0.06);
      border-bottom: 1px solid rgba(13,0,66,0.06);
      padding: 48px 0 52px;
      font-family: "Mona Sans", -apple-system, sans-serif;
      isolation: isolate;
    }
    .hr-lab-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .hr-lab-grid-lines {
      display: none;
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(31,77,216,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,77,216,0.03) 1px, transparent 1px);
      background-size: 44px 44px, 44px 44px;
      mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 75%);
      -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 75%);
    }
    .hr-lab-scan {
      display: none;
      position: absolute; top: 0; bottom: 0; left: -30%;
      width: 22%;
      background: linear-gradient(90deg, transparent, rgba(31,77,216,0.06), transparent);
      animation: hrLabScan 8s linear infinite;
    }
    @keyframes hrLabScan { 0% { left: -30%; } 100% { left: 120%; } }
    .hr-lab-inner {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 0.85fr 1.4fr;
      gap: 48px; align-items: center;
    }
    .hr-lab-eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
      color: #1F4DD8; text-transform: uppercase;
    }
    .hr-lab-h {
      margin: 14px 0 18px; font-size: 24px; font-weight: 600;
      line-height: 1.22; letter-spacing: -0.015em; color: #0D0042;
      text-wrap: balance;
    }
    .hr-lab-h em { font-style: italic; font-weight: 600; color: #1F4DD8; }
    .hr-lab-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px;
      border: 1px solid rgba(31,77,216,0.4);
      border-radius: 999px;
      font-size: 13px; font-weight: 600; color: #1F4DD8;
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
    }
    .hr-lab-cta:hover { background: rgba(31,77,216,0.07); border-color: rgba(31,77,216,0.7); gap: 11px; }
    .hr-lab-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }
    .hr-lab-card {
      display: flex; flex-direction: column; gap: 14px;
      padding: 20px 18px 16px;
      /* White paper stock — clean white base with a faint neutral fibre grain
         and a soft top sheen, so the cards read like printed white card. */
      background-color: #FFFFFF;
      background-image:
        radial-gradient(110% 90% at 0% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 45%),
        repeating-linear-gradient(90deg, rgba(20,22,40,0.022) 0px, rgba(20,22,40,0.022) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(20,22,40,0.018) 0px, rgba(20,22,40,0.018) 1px, transparent 1px, transparent 4px);
      border: 1px solid rgba(13,0,66,0.10);
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 6px 16px -10px rgba(13,0,66,0.20);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .hr-lab-card:hover { transform: translateY(-2px); border-color: rgba(31,77,216,0.40); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 14px 26px -14px rgba(13,0,66,0.26); }
    .hr-lab-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .hr-lab-tag {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: #1F4DD8;
    }
    .hr-lab-read { font-size: 11px; font-weight: 600; color: rgba(13,0,66,0.4); }
    .hr-lab-meta {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 600; color: rgba(13,0,66,0.45);
    }
    .hr-lab-doc { color: #1F4DD8; opacity: 0.7; flex-shrink: 0; }
    .hr-lab-title {
      font-family: Georgia, "Source Serif 4", "Times New Roman", serif;
      font-style: italic;
      font-size: 16px; font-weight: 500; line-height: 1.45; color: #0D0042;
      letter-spacing: 0; text-wrap: pretty; flex: 1;
    }
    .hr-lab-arrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
      color: #1F4DD8; text-transform: uppercase;
    }
    .hr-lab-note {
      font-size: 12.5px; line-height: 1.5;
      color: rgba(13,0,66,0.6);
      margin-top: auto;
    }
    .hr-lab-card:hover .hr-lab-arrow svg { transform: translateX(4px); }
    .hr-lab-arrow svg { transition: transform 0.2s ease; }
    @container pslpage (max-width: 880px) {
      .hr-lab-inner { grid-template-columns: 1fr; gap: 28px; }
      .hr-lab-grid { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hr-lab-scan { animation: none; }
    }
    .hr-min-insights-banner-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 36px; align-items: center;
    }
    .hr-min-insights-banner-head { max-width: 280px; }
    .hr-min-insights-banner-h {
      margin: 8px 0 0; font-size: 20px; font-weight: 600;
      line-height: 1.2; letter-spacing: -0.012em; color: #0D0042;
    }
    .hr-min-insights-banner-h em { font-style: italic; font-weight: 600; color: #1F4DD8; }
    .hr-min-insights-banner-list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .hr-min-insights-banner-list li {
      display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
    }
    @container pslpage (max-width: 880px) {
      .hr-min-insights-banner-inner { grid-template-columns: 1fr; gap: 22px; }
    }
    .hr-min-insights-h {
      font-size: 32px; font-weight: 600; line-height: 1.15;
      letter-spacing: -0.018em;
      margin: 12px 0 0; color: #0D0042;
      text-wrap: balance;
    }
    .hr-min-insights-h em { font-style: italic; font-weight: 600; color: #1F4DD8; }
    .hr-min-insights-list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 14px;
    }
    .hr-min-insights-list li {
      display: grid; grid-template-columns: auto 1fr;
      gap: 14px; align-items: baseline;
      padding: 14px 0;
      border-top: 1px solid rgba(13,0,66,0.08);
    }
    .hr-min-insights-list li:last-child { border-bottom: 1px solid rgba(13,0,66,0.08); }
    .hr-min-insights-tag {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(13,0,66,0.5);
      white-space: nowrap;
    }
    .hr-min-insights-link {
      font-size: 15px; font-weight: 600; color: #0D0042;
      text-decoration: none;
      display: inline-flex; align-items: baseline; gap: 8px;
      text-wrap: pretty;
    }
    .hr-min-insights-link span { color: rgba(13,0,66,0.55); font-weight: 500; }
    .hr-min-insights-link:hover { color: #1F4DD8; }
    .hr-min-insights-cta {
      margin-top: 22px;
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 14px; font-weight: 600; color: #1F4DD8;
      text-decoration: none;
    }

    /* Case Study — chart left, stats right, narrower overall. */
    .hr-min-cs { padding: 64px 0 72px; background: linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%); font-family: "Mona Sans", -apple-system, sans-serif; }
    .hr-min-cs-head { max-width: 760px; margin-bottom: 32px; }
    .hr-min-cs-h { font-size: 36px; line-height: 1.08; letter-spacing: -0.022em; font-weight: 600; margin: 12px 0 14px; color: #0D0042; text-wrap: balance; }
    .hr-min-cs-h em { font-style: italic; font-weight: 500; color: #14B89A; }
    .hr-min-cs-lift { font-size: 17px; line-height: 1.6; color: rgba(13,0,66,0.7); margin: 0; max-width: 600px; }
    .hr-min-cs-row {
      display: grid; grid-template-columns: 1.4fr 1fr;
      gap: 28px; align-items: stretch;
    }
    .hr-min-cs-chart {
      background: #FFFFFF;
      border: 1px solid rgba(13,0,66,0.08);
      border-radius: 14px;
      padding: 22px 24px 16px;
    }
    .hr-min-cs-bf {
      display: flex; justify-content: space-between;
      font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
      margin-bottom: 6px;
    }
    .hr-min-cs-stats {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hr-min-cs-stat {
      background: #FFFFFF;
      border: 1px solid rgba(13,0,66,0.08);
      border-radius: 12px;
      padding: 18px 16px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .hr-min-cs-stat-n {
      font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
      color: #0D0042; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .hr-min-cs-stat-l { font-size: 12px; font-weight: 600; color: #0D0042; }
    .hr-min-cs-narr {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid rgba(13,0,66,0.10);
    }
    .hr-min-cs-narr-cell h4 {
      margin: 8px 0 6px;
      font-size: 16.5px; font-weight: 600;
      letter-spacing: -0.005em; color: #0D0042;
    }
    .hr-min-cs-narr-cell p {
      margin: 0; font-size: 14.5px; line-height: 1.55;
      color: rgba(13,0,66,0.7);
    }
    .hr-min-cs-narr-cell-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.18em;
    }

    /* Container query mirrors for the artboard */
    @container pslpage (max-width: 880px) {
      .hr-min-insights-row { grid-template-columns: 1fr; gap: 28px; }
      .hr-min-cs-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
      .hr-min-cs-row { grid-template-columns: 1fr; }
      .hr-min-cs-stats { grid-template-columns: repeat(3, 1fr); }
      .hr-min-cs-narr { grid-template-columns: 1fr; gap: 18px; }
    }
    @container pslpage (max-width: 540px) {
      .hr-min-cs-stats { grid-template-columns: 1fr; }
    }

    /* ===== Uniform visual scale-down =====
       The text scale is now right, but the VISUAL blocks (cards, the rings
       graphic, the teaser panels, charts, CTAs) still read large at 100%.
       Zoom each heavy block down proportionally so a section fits a viewport
       without further shrinking copy by hand. */
    .hr-min .hr-bd-grid { zoom: 0.96; }
    .hr-min .hr-teaser-stage { zoom: 0.92; }
    .hr-min .hr-principles-grid { zoom: 0.98; }
    .hr-min .hr-lab-grid { zoom: 1; }
    .hr-min .hr-min-cs-card,
    .hr-min .hr-min-cs-narr { zoom: 0.96; }
    .hr-min .hr-hero-actions { zoom: 1; }
    /* Framework section: only a gentle trim (0.92) so the rings + domain
       cards come down slightly while still filling most of the width. The
       right-hand domain cards get a touch more reduction. */
    .hr-min .hr-min-system-grid { zoom: 1; }
    .hr-min .hr-min-system-domains { zoom: 1; }
    .hr-min .hr-min-system-ring-col .psl-perf-system { max-width: 400px; }
    .hr-min .hr-min-system-ring-col .psl-perf-anim { max-width: 560px; }
    /* Closing CTA (Ready to start) + FAQ + footer */
    .hr-min .hr-finalcta-actions { zoom: 1; }
    .hr-min .hmin-finalcta { zoom: 0.96; }
    .hr-min .hr-faq { zoom: 0.9; }
    .hr-min .psl-footer { zoom: 0.9; }

    /* ===== Global page step-down =====
       One more uniform reduction across every section (the nav is not a
       <section>, so it keeps its already-tuned size). Multiplies with the
       per-block zooms above. */
    .hr-min > section { zoom: 1; }
  `;
  document.head.appendChild(s);
};

// ============================================================
//  01 · Hero — sub trimmed to first sentence.
// ============================================================
const HMin_Hero = () =>
<section className="hr-hero hr-hero--video">
    <video className="hr-hero-video" src="assets/video/psl-hero.mp4"
  autoPlay muted loop playsInline preload="auto" aria-hidden="true" />
    <div className="hr-hero-video-veil" aria-hidden />
    <div className="hr-hero-overlay" aria-hidden />
    <div className="container hr-hero-inner">
      <h1 className="hr-hero-h">
        When pressure rises, most performance breaks.<br />
        <span className="hr-hero-h-tail">We design the system that holds.</span>
      </h1>
      <p className="hr-hero-sub">The methodology — inspired by elite sport, forged in complex delivery — for teams, programmes, and individuals who want to perform under sustained pressure.

    </p>
      <div className="hr-hero-actions">
        <a href="#" className="btn btn-accent">Take the diagnostic →</a>
        <a href="#" className="btn btn-ghost-on-dark">Start a conversation</a>
      </div>
      {/* Diagnostic on-ramp — low-friction first step, tied to the rings. */}
      <p style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.62)' }}>Start with the free diagnostic — 7 minutes to pinpoint what's holding you back.

    </p>
    </div>

    <div className="hr-hero-trusted">
      <div className="container hr-hero-trusted-inner">
        <span className="hr-hero-trusted-label">Engagements include:</span>
        <div className="hr-hero-trusted-row">
          {[
        { name: "HSBC", src: "assets/logos/clients/hsbc.png", slug: "hsbc" },
        { name: "Santander", src: "assets/logos/clients/santander.png", slug: "santander" },
        { name: "Lloyds Bank", src: "assets/logos/clients/lloyds.png", slug: "lloyds" },
        { name: "Vodafone", src: "assets/logos/clients/vodafone.png", slug: "vodafone" },
        { name: "Natura&Co", src: "assets/logos/clients/natura.png", slug: "natura" }].
        map((c) =>
        <span key={c.name} className={`hr-hero-trusted-logo hr-hero-trusted-logo--${c.slug}`} aria-label={c.name}>
              <img src={c.src} alt={c.name} loading="lazy" decoding="async" />
            </span>
        )}
        </div>
      </div>
    </div>

    <HMin_Stats inHero />
  </section>;


// ============================================================
//  02 · BreaksDown — light section, light cards, coloured rule.
//  Inverted from the dark navy treatment on the live homepage.
// ============================================================
const HMin_BreaksDown = () => {
  // Scroll-in trigger so the header motifs animate when the section enters view.
  const bdRef = React.useRef(null);
  const [bdIn, setBdIn] = React.useState(false);
  React.useEffect(() => {
    const el = bdRef.current;
    if (!el) return;
    if (!('IntersectionObserver' in window)) {setBdIn(true);return;}
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setBdIn(true);io.disconnect();}});
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Each card: bold accent header (white type) + white body carrying the
  // punch statement, a short technical support line, and a research/credibility
  // micro-tag. A small white-line motif in the header conveys the idea visually.
  const items = [
  {
    n: "01", label: "Identity", sub: "Who you are under pressure",
    accent: "#7C3AED",
    t: <>Performance starts with <em className="hr-break-accent">shared identity and standards.</em></>,
    lead: "Who we are, why we're here, and the standards we hold — mirrored from how high performers operate.",
    change: "Shared standards that hold under pressure.",
    metric: { n: "#1", l: "driver of team performance in the research" },
    appliedIcon:
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#7C3AED" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.2" /><path d="M5.5 19a6.5 6.5 0 0 1 13 0" /></svg>,

    steps: [
    { k: "Assess", d: "Surface the values and standards the team actually runs on." },
    { k: "Map", d: "Compare against the markers of high performance, and find the gap." },
    { k: "Reinforce", d: "Embed stronger standards through coaching until they hold." }],

    motif:
    <svg viewBox="0 0 84 40" width="84" height="40" fill="none" aria-hidden className="bd-motif">
          {/* Identity — a level standard that drifts down under load. */}
          <path className="bd-draw bd-d0" d="M2 11 H30" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" />
          <path className="bd-draw bd-d1" d="M30 11 C46 11, 52 28, 82 34" stroke="#fff" strokeOpacity="0.6" strokeWidth="2.4" strokeDasharray="2 5" strokeLinecap="round" />
          <circle className="bd-node bd-n0" cx="2" cy="11" r="3" fill="#fff" />
          <circle className="bd-node bd-n1" cx="30" cy="11" r="3" fill="#fff" />
          <circle className="bd-node bd-n2" cx="82" cy="34" r="3" fill="#fff" fillOpacity="0.75" />
        </svg>

  },
  {
    n: "02", label: "Architecture", sub: "How intent becomes action",
    accent: "#1FA77E",
    t: <>Design the structure that makes <em className="hr-break-accent">output predictable.</em></>,
    lead: "Restructuring the delivery function — dependencies, governance, and runway — so teams deliver quality quickly.",
    change: "Predictable, collaborative delivery.",
    metric: { n: "−45%", l: "P1 escalations after the operating redesign" },
    appliedIcon:
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#1FA77E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="7" height="6" rx="1.2" /><rect x="14" y="14" width="7" height="6" rx="1.2" /><path d="M6.5 10v3a2 2 0 0 0 2 2H14" /></svg>,

    steps: [
    { k: "Diagnose", d: "Map how delivery executes today — cadence, dependencies, quality." },
    { k: "Identify", d: "Pinpoint where flow, defect rates, and predictability break down." },
    { k: "Improve", d: "Install the operating rhythm that turns intent into shipped work." }],

    motif:
    <svg viewBox="0 0 84 40" width="84" height="40" fill="none" aria-hidden className="bd-motif">
          {/* Architecture — a connected delivery structure: one source node
        branching into two parallel streams that re-converge. */}
          <rect className="bd-node bd-n0" x="2" y="14" width="14" height="12" rx="2.5" fill="#fff" />
          <rect className="bd-node bd-n1" x="35" y="3" width="14" height="12" rx="2.5" fill="#fff" fillOpacity="0.85" />
          <rect className="bd-node bd-n2" x="35" y="25" width="14" height="12" rx="2.5" fill="#fff" fillOpacity="0.85" />
          <rect className="bd-node bd-n3" x="68" y="14" width="14" height="12" rx="2.5" fill="#fff" />
          <path className="bd-draw bd-d0" d="M16 20 H28 V9 H35" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          <path className="bd-draw bd-d1" d="M16 20 H28 V31 H35" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          <path className="bd-draw bd-d2" d="M49 9 H61 V20 H68" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          <path className="bd-draw bd-d3" d="M49 31 H61 V20 H68" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

  },
  {
    n: "03", label: "Capacity", sub: "What can be sustained",
    accent: "#2563EB",
    t: <>Build capacity into <em className="hr-break-accent">velocity you can repeat.</em></>,
    lead: "Understanding what people can truly sustain, then helping them perform — predictably, without burnout.",
    change: "Repeatable team performance.",
    metric: { n: "+22%", l: "sustained team velocity through a quarter" },
    appliedIcon:
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#2563EB" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 14a9 9 0 0 1 18 0" /><path d="M12 14l4-3" /></svg>,

    steps: [
    { k: "Measure", d: "Quantify the load an individual or team can genuinely carry." },
    { k: "Forecast", d: "Plan work against real capacity, budget, and milestones." },
    { k: "Sustain", d: "Design recovery so intensity repeats without burning people out." }],

    motif:
    <svg viewBox="0 0 84 40" width="84" height="40" fill="none" aria-hidden className="bd-motif">
          {/* Capacity — a speedometer: arc with tick marks, the needle ramps
        to the right and holds (accelerate then maintain speed). */}
          <path d="M10 34 A 32 32 0 0 1 74 34" stroke="#fff" strokeOpacity="0.4" strokeWidth="2.2" fill="none" strokeLinecap="round" />
          {/* tick marks around the dial */}
          {[-72, -48, -24, 0, 24, 48, 72].map((a, i) => {
        const rad = (a - 90) * Math.PI / 180;
        const r1 = 30,r2 = 25;
        const cx = 42,cy = 34;
        return (
          <line key={i}
          x1={cx + r1 * Math.cos(rad)} y1={cy + r1 * Math.sin(rad)}
          x2={cx + r2 * Math.cos(rad)} y2={cy + r2 * Math.sin(rad)}
          stroke="#fff" strokeOpacity={i >= 4 ? 0.9 : 0.45} strokeWidth="1.6" strokeLinecap="round" />);

      })}
          <g className="bd-gauge">
            <g className="bd-gauge-rev">
              <line x1="42" y1="34" x2="42" y2="12" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" />
            </g>
          </g>
          <circle cx="42" cy="34" r="3.4" fill="#fff" />
        </svg>

  }];


  return (
    <section ref={bdRef} className={"hr-breaks hr-breaks--light" + (bdIn ? " is-in" : "")}>
      <div className="container">
        <div className="hr-breaks-head" style={{ maxWidth: 1040, marginBottom: 36 }}>
          <span className="eyebrow eyebrow-blue" style={{ display: 'inline-block', marginBottom: 12 }}>
            OUR METHODOLOGY
          </span>
          <h2 className="hr-breaks-h hr-breaks-h--light">
            Where <span className="hr-h-accent">performance</span> breaks down.
          </h2>
          <p className="hr-breaks-sub hr-breaks-sub--light" style={{ marginTop: 16, maxWidth: 1120 }}>Pressure is rising. AI, rapid change, and constant adaptation push us harder than ever. We have researched what truly helps people perform at their best, with more predictability and less burnout. We see it always comes back to the same three areas.
          </p>
        </div>

        <div className="hr-bd-grid">
          {items.map((it) =>
          <article key={it.n} className="hr-bd-card hr-bd-card--light hr-min-bd-card" style={{
            position: 'relative',
            background: '#FFFFFF',
            border: `1px solid ${it.accent}3A`,
            borderRadius: 16,
            fontFamily: 'Mona Sans, sans-serif',
            boxShadow: '0 14px 34px -22px rgba(13,0,66,0.30)',
            overflow: 'hidden',
            display: 'flex', flexDirection: 'column'
          }}>
              <div style={{
              background: `color-mix(in srgb, ${it.accent} 70%, #475569)`,
              padding: '18px 22px 16px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 12
            }}>
                <div>
                  <div style={{
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.24em',
                  color: 'rgba(255,255,255,0.75)', marginBottom: 3
                }}>
                    RING {it.n}
                  </div>
                  <div style={{
                  fontSize: 20, fontWeight: 700, letterSpacing: '-0.005em',
                  lineHeight: 1, color: '#fff', marginBottom: 6
                }}>
                    {it.label}
                  </div>
                  <div style={{
                  fontSize: 12.5, fontWeight: 500,
                  color: 'rgba(255,255,255,0.82)'
                }}>
                    {it.sub}
                  </div>
                </div>
                <span style={{ flexShrink: 0, opacity: 0.95 }}>{it.motif}</span>
              </div>

              <div style={{ padding: '22px 22px 22px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
                <h3 style={{
                margin: 0, fontSize: 30, fontWeight: 700,
                lineHeight: 1.12, color: '#0D0042', letterSpacing: '-0.018em',
                textWrap: 'balance'
              }}>{it.t}</h3>
                <p style={{
                margin: 0, fontSize: 14, lineHeight: 1.5,
                color: 'rgba(13,0,66,0.66)'
              }}>{it.lead}</p>

                {/* Structured three-step approach for this ring. */}
                <ol style={{
                listStyle: 'none', margin: '4px 0 0', padding: 0,
                display: 'flex', flexDirection: 'column', gap: 14,
                borderTop: `1px solid ${it.accent}22`, paddingTop: 16,
                position: 'relative'
              }}>
                  {/* connecting line behind the step numbers */}
                  <span aria-hidden style={{
                  position: 'absolute', left: 8, top: 22, bottom: 14,
                  width: 2, background: `${it.accent}33`, borderRadius: 2
                }} />
                  {it.steps.map((s, i) =>
                <li key={s.k} style={{
                  display: 'grid', gridTemplateColumns: '18px 1fr',
                  gap: 14, alignItems: 'start', position: 'relative'
                }}>
                      <span aria-hidden style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 18, color: it.accent,
                    fontSize: 14, fontWeight: 800, lineHeight: 1,
                    background: '#fff', padding: '2px 0',
                    fontVariantNumeric: 'tabular-nums', position: 'relative', zIndex: 1
                  }}>{i + 1}</span>
                      <span style={{ fontSize: 15, lineHeight: 1.5, color: 'rgba(13,0,66,0.78)' }}>
                        <strong style={{ color: '#0D0042', fontWeight: 700 }}>{s.k}.</strong> {s.d}
                      </span>
                    </li>
                )}
                </ol>

                {/* Metric + what changes — combined on one shared footer row.
                The number is paired with a short label so its meaning is clear. */}
                <div style={{
                marginTop: 'auto', paddingTop: 14,
                borderTop: `1px solid ${it.accent}22`,
                display: 'flex', flexDirection: 'column', gap: 10
              }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{
                    fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em',
                    color: it.accent, lineHeight: 1, fontVariantNumeric: 'tabular-nums', flexShrink: 0
                  }}>{it.metric.n}</span>
                    <span style={{ fontSize: 12, lineHeight: 1.35, color: 'rgba(13,0,66,0.6)' }}>
                      {it.metric.l}
                    </span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                    <span style={{
                    fontSize: 10, fontWeight: 800, letterSpacing: '0.16em',
                    textTransform: 'uppercase', color: it.accent, flexShrink: 0
                  }}>WHAT CHANGES</span>
                    <span style={{ fontSize: 13.5, fontWeight: 600, color: '#0D0042', lineHeight: 1.3 }}>
                      {it.change}
                    </span>
                  </div>
                </div>
              </div>
            </article>
          )}
        </div>

        <p className="hr-min-bd-cred" style={{
          margin: '28px 0 0', textAlign: 'center',
          fontSize: 13.5, lineHeight: 1.6, color: 'rgba(13,0,66,0.6)',
          fontFamily: 'Mona Sans, sans-serif'
        }}>
          Drawn from elite-sport performance science, organisational research
          (<strong style={{ color: '#0D0042', fontWeight: 600 }}>McKinsey</strong> ·
          {' '}<strong style={{ color: '#0D0042', fontWeight: 600 }}>Google&apos;s Project Aristotle</strong>),
          and a decade of complex delivery.
        </p>
      </div>
    </section>);

};

// ============================================================
//  03 · System — sport image as a section-wide background atmosphere
//  (not a dedicated card). Tags row moved under the rings.
// ============================================================
const HMin_System = () => {
  // Cards are ordered top → bottom to mirror the ring tower in the new
  // logo: Capacity sits at the top, Architecture in the middle, and
  // Identity is the base. `ringIdx` stays fixed (identity 0, architecture 1,
  // capacity 2) so the ring ↔ card linking and the equation below are unchanged.
  const domains = [
  { id: "capacity", ringIdx: 2, t: "Sustainable Capacity", k: "HOW MUCH CAN BE SUSTAINED — PREDICTABLY",
    d: "Repeatable team velocity — doing more, predictably, without burnout.",
    points: ["Capacity planning", "Repeatable team velocity"],
    icon:
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2563EB" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 14a9 9 0 0 1 18 0" /><path d="M12 14l4-3" /><circle cx="12" cy="14" r="1.4" fill="#2563EB" stroke="none" />
      </svg>
  },
  { id: "architecture", ringIdx: 1, t: "Execution Architecture", k: "HOW THE DELIVERY FUNCTION IS STRUCTURED",
    d: "A delivery function structured to deliver quality quickly — even under regulation.",
    points: ["Dependencies & governance", "A clear technical runway"],
    icon:
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#1FA77E" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="4" width="7" height="6" rx="1.2" /><rect x="14" y="14" width="7" height="6" rx="1.2" /><path d="M6.5 10v3a2 2 0 0 0 2 2H14" />
      </svg>
  },
  { id: "identity", ringIdx: 0, t: "Performance Identity", k: "WHO YOU ARE UNDER PRESSURE",
    d: "Shared values and standards — mirrored from how high performers operate.",
    points: ["Shared values & standards", "Team charter ↔ personal belief"],
    icon:
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#7C3AED" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="8" r="3.4" /><path d="M5.5 19a6.5 6.5 0 0 1 13 0" />
      </svg>
  }];


  // Hovering a card on the right opens it (and glows the matching ring);
  // clicking pins it. The graphic itself is not mouse-reactive.
  const [committed, setCommitted] = React.useState(null);
  const [preview, setPreview] = React.useState(null);
  const active = preview !== null ? preview : committed;
  // Cards fade in staggered, in sync with their rings building in the logo.
  const [ringsSeen, setRingsSeen] = React.useState(false);
  React.useEffect(() => {
    // Safety net: never leave the cards hidden if the logo's play signal
    // doesn't arrive (e.g. animation suppressed).
    const t = setTimeout(() => setRingsSeen(true), 5000);
    return () => clearTimeout(t);
  }, []);

  const ppsRef = React.useRef(null);
  React.useEffect(() => {
    const el = ppsRef.current;
    if (!el) return;
    let fired = false;
    const trigger = () => {if (fired) return;fired = true;el.classList.add('is-in');};
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {if (e.isIntersecting) trigger();});
      }, { threshold: 0.35 });
      io.observe(el);
      return () => io.disconnect();
    }
    trigger();
  }, []);

  const commit = (idx) => () => setCommitted((c) => c === idx ? null : idx);
  // Per-card entrance delay, matched to when each ring builds in the logo:
  // identity ~1.0s, architecture ~1.8s, capacity ~2.3s.
  const CARD_DELAY = { 0: '1.0s', 1: '1.8s', 2: '2.3s' };

  return (
    <section className="hr-system hr-min-system">
      <div className="container hr-min-system-inner">
        {/* Header — eyebrow, headline, sub line. Clean, centred. */}
        <div className="hr-min-system-head">
          <span className="eyebrow eyebrow-blue">OUR FRAMEWORK · THE PSL PERFORMANCE SYSTEM™</span>
          <h2 className="hr-min-system-h">
            Three rings.{' '}
            <span className="hr-min-system-h-accent">One performance system.</span>
          </h2>
          <p className="hr-min-system-sub">
            Built from years of research and refined continually as we work with teams. The three rings stay constant; <strong>how</strong> we apply them is shaped by your personalised diagnostic assessment results — so we improve performance in a way that's specific to you.
          </p>
        </div>

        {/* Rings + tags + cards laid out as a single editorial composition.
                      Two columns: rings on the left, three numbered domain cards on
                      the right. The tags row sits beneath the rings to anchor the
                      equation visually. */}
        <div className="hr-min-system-grid">
          <div className="hr-min-system-ring-col">
            <span className="hr-min-rings-cap" aria-hidden>
              THE PSL PERFORMANCE SYSTEM™
            </span>
            <PSLPerfAnim activeIndex={active} onPlay={() => setRingsSeen(true)} />

            {/* Identity + Architecture + Capacity = Performance — custom
                        typographic equation, each domain dotted in its ring colour. */}
            <div className="hr-min-eq">
              <span className="hr-min-eq-term">
                <span className="hr-min-eq-dot" style={{ background: '#7C3AED' }} />Identity
              </span>
              <span className="hr-min-eq-op">+</span>
              <span className="hr-min-eq-term">
                <span className="hr-min-eq-dot" style={{ background: '#1FA77E' }} />Architecture
              </span>
              <span className="hr-min-eq-op">+</span>
              <span className="hr-min-eq-term">
                <span className="hr-min-eq-dot" style={{ background: '#2563EB' }} />Capacity
              </span>
              <span className="hr-min-eq-eq">=</span>
              <span className="hr-min-eq-result">Performance</span>
            </div>
            <p className="hr-min-rings-foot">
              The three rings are the core artefact of the <strong>PSL Performance System™</strong> — our research-backed methodology.
            </p>
          </div>

          {/* Right column — three numbered domain cards stacked, plus
                        the "system holds" foot line. */}
          <div className={"hr-min-system-domains" + (ringsSeen ? " rings-in" : "")}>
            {domains.map((d, i) =>
            <button key={d.id}
            className={"hr-domain hr-min-domain" + (d.ringIdx === active ? " active" : "")}
            style={{ ['--card-delay']: CARD_DELAY[d.ringIdx] }}
            onClick={commit(d.ringIdx)}
            onMouseEnter={() => setPreview(d.ringIdx)}
            onMouseLeave={() => setPreview(null)}
            onFocus={() => setPreview(d.ringIdx)}
            onBlur={() => setPreview(null)}
            aria-pressed={d.ringIdx === committed}>
                <div className="hr-min-domain-num">{d.icon}</div>
                <div className="hr-min-domain-body">
                  <h3 className="hr-domain-t">{d.t}</h3>
                  <div className="hr-domain-k">{d.k}</div>
                  <p className="hr-domain-d">{d.d}</p>
                  <div className="hr-min-domain-points">
                    {d.points.map((pt) =>
                  <span key={pt} className="hr-min-domain-point">
                        <span className="hr-min-domain-point-dot" style={{
                      background: d.id === 'identity' ? '#7C3AED' : d.id === 'architecture' ? '#1FA77E' : '#2563EB'
                    }} />
                        {pt}
                      </span>
                  )}
                  </div>
                </div>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);

};

// ============================================================
//  04 · Principles — lead paragraph removed; card bodies halved.
// ============================================================
const HMin_Principles = () => {
  // Play the FROM SPORT card's video once its card scrolls into view: the
  // still image is the poster, the video fades in over it and loops muted.
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    const root = gridRef.current;
    if (!root) return;
    const vids = root.querySelectorAll('.hr-principle-video');
    if (!vids.length) return;
    if (!('IntersectionObserver' in window)) {
      vids.forEach((v) => {v.style.opacity = 1;v.play && v.play().catch(() => {});});
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        const v = e.target;
        if (e.isIntersecting) {
          // Trim: play only the final window of the clip (last ~9s). The
          // data-trim attr sets how many seconds from the end to loop.
          const trim = parseFloat(v.dataset.trim || '0');
          const startAt = () => {
            if (trim && v.duration && isFinite(v.duration)) {
              const s = Math.max(0, v.duration - trim);
              if (v.currentTime < s) v.currentTime = s;
            }
          };
          if (trim && !v._trimWired) {
            v._trimWired = true;
            // loop back to the start of the trimmed window instead of 0
            v.addEventListener('timeupdate', () => {
              if (v.duration && isFinite(v.duration) && v.currentTime >= v.duration - 0.15) {
                v.currentTime = Math.max(0, v.duration - trim);
              }
            });
          }
          if (v.readyState >= 1) startAt();else
          v.addEventListener('loadedmetadata', startAt, { once: true });
          const p = v.play && v.play();
          if (p && p.then) p.then(() => {v.style.opacity = 1;}).catch(() => {});else
          v.style.opacity = 1;
        } else {
          v.style.opacity = 0;
          v.pause && v.pause();
        }
      });
    }, { threshold: 0.5 });
    vids.forEach((v) => io.observe(v));
    return () => io.disconnect();
  }, []);

  const items = [
  { tag: "FROM SPORT", t: "Elite Performance Environments", c: "RING-TESTED METHOD",
    img: "assets/photos/sport-bw.jpg",
    video: "assets/video/sport-principle-boxing.mp4",
    videoTrim: 9,
    imgAlt: "Athletes mid-action — composite of training and competition",
    accent: "#7C3AED",
    b: "The traits that make a sports person or squad elite — preparation, recovery, identity, composure under pressure — are the same traits that hold under load in complex tech and delivery organisations. Elite athletes and coaches join our workshops as guest speakers, so the principles arrive lived, not lectured." },
  { tag: "FROM RESEARCH", t: "Our Research, Backed by the Best", c: "PSL · McKINSEY · PROJECT ARISTOTLE",
    img: "assets/photos/research-analyst.jpg",
    imgAlt: "Analyst reflected in screen — data over the eye",
    accent: "#0F766E",
    b: "We've committed to researching what makes teams perform — and our position is reinforced by McKinsey's organisational-health work and Google's Project Aristotle. They back our thinking." },
  { tag: "FROM THE FIELD", t: "Real Delivery Experience", c: "25+ ENGAGEMENTS · 10+ YEARS",
    img: "assets/photos/field-engineer.jpg",
    imgAlt: "Engineer at a multi-screen delivery workstation",
    accent: "#1F4DD8",
    b: "A decade leading complex programmes across financial services, retail, and cloud transformation - for the engineering leaders, delivery owners, and CTOs who are responsible for delivering under pressure." }];


  return (
    <section className="hr-principles">
      <div className="container">
        <div className="hr-principles-head">
          <span className="eyebrow eyebrow-blue">BUILT ON PROVEN PERFORMANCE PRINCIPLES</span>
          <h2 className="hr-principles-h">
            Drawn from sport.{" "}
            <span className="hr-h-accent" style={{ fontWeight: 700 }}>Validated by research. Proven in delivery.</span>
          </h2>
          {/* The "PSL Performance System is not a theoretical model..."
                        paragraph from the full version is intentionally omitted. */}
        </div>
        <div className="hr-principles-grid" ref={gridRef}>
          {items.map((p) =>
          <article key={p.t} style={{
            background: '#FFFFFF',
            border: '1px solid rgba(13,0,66,0.08)',
            borderRadius: 16,
            overflow: 'hidden',
            fontFamily: 'Mona Sans, sans-serif',
            display: 'flex', flexDirection: 'column'
          }}>
              <div className="hr-principle-media" style={{
              position: 'relative', width: '100%',
              aspectRatio: '16 / 10', overflow: 'hidden', background: '#1A1635'
            }}>
                <img src={p.img} alt={p.imgAlt} loading="lazy" decoding="async"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'grayscale(100%) contrast(1.02)' }} />
                {p.video &&
              <video className="hr-principle-video" src={p.video}
              data-trim={p.videoTrim || 0}
              muted loop playsInline preload="metadata" aria-hidden="true"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center center',
                display: 'block', opacity: 0,
                filter: 'grayscale(100%) contrast(1.02)',
                transition: 'opacity 0.8s ease'
              }} />
              }
                <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 50%, rgba(13,0,66,0.45) 100%)'
              }} aria-hidden />
                <span style={{
                position: 'absolute', top: 14, left: 18,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.22em',
                color: '#fff', background: 'rgba(13,0,66,0.6)',
                backdropFilter: 'blur(4px)',
                padding: '5px 9px', borderRadius: 4
              }}>{p.tag}</span>
              </div>
              <div style={{ padding: '22px 24px 22px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                <h3 className="hr-principle-t" style={{
                margin: 0, fontSize: 20, fontWeight: 600,
                lineHeight: 1.18, color: '#0D0042', letterSpacing: '-0.012em'
              }}>{p.t}</h3>
                <p className="hr-principle-b" style={{ margin: 0, color: 'rgba(13,0,66,0.72)' }}>
                  {p.b}
                </p>
                <div className="hr-principle-cite" style={{
                marginTop: 'auto', fontSize: 10, fontWeight: 700,
                letterSpacing: '0.18em', color: 'rgba(13,0,66,0.5)'
              }}>{p.c}</div>
              </div>
            </article>
          )}
        </div>
        <div className="hr-principles-cta">
          <a href="method.html" className="hr-principles-cta-link">
            Understand the method
            <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M3 8h10M9 4l4 4-4 4" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

};

// ============================================================
//  05 · Case Study — single clickable card, animated on scroll.
//  Chart paths draw in; the red "reactive" line wobbles to read as
//  unstable; the green line rises clean. Stat numbers count up.
// ============================================================
const CountUp = ({ to, suffix = '', dur = 1500, start }) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!start || to === 0) return;
    let raf, t0;
    const tick = (t) => {
      if (!t0) t0 = t;
      const p = Math.min((t - t0) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.round(eased * to));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [start, to, dur]);
  return <>{v}{suffix}</>;
};

const HMin_CaseStudy = () => {
  const stats = [
  { to: 85, suffix: "%", l: "fewer escalations, quarter on quarter", accent: "#0D0042" },
  { to: 88, suffix: "%", l: "of milestones hit — up from 60%", accent: "#0D0042" },
  { to: 0, suffix: "", l: "rollbacks post cutover", accent: "#0D0042" }];


  const ref = React.useRef(null);
  const [inview, setInview] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!('IntersectionObserver' in window)) {setInview(true);return;}
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setInview(true);io.disconnect();}});
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section style={{
      padding: '64px 0 72px',
      background: 'linear-gradient(180deg, #FFFFFF 0%, #F0F4FB 60%, #E6EDF8 100%)',
      fontFamily: 'Mona Sans, sans-serif'
    }}>
      <div className="container">
        <span style={{
          display: 'inline-block',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
          color: '#1F4DD8', marginBottom: 14
        }}>
          CASE STUDY IN FOCUS
        </span>

        <a ref={ref} href="method.html"
        className={"hr-min-cs-card" + (inview ? " is-in" : "")} style={{
          display: 'block',
          textDecoration: 'none',
          color: 'inherit',
          background: '#F7F4EC',
          border: '1px solid rgba(13,0,66,0.10)',
          borderRadius: 20,
          padding: '32px 36px 30px',
          transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease',
          boxShadow: '0 1px 0 rgba(13,0,66,0.02)'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = 'rgba(31,77,216,0.45)';
          e.currentTarget.style.boxShadow = '0 18px 44px -20px rgba(13,0,66,0.18)';
          e.currentTarget.style.transform = 'translateY(-2px)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = 'rgba(13,0,66,0.10)';
          e.currentTarget.style.boxShadow = '0 1px 0 rgba(13,0,66,0.02)';
          e.currentTarget.style.transform = 'none';
        }}>
          <h2 style={{
            margin: '0 0 22px',
            fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.022em',
            fontWeight: 600, color: '#0D0042', textWrap: 'balance', maxWidth: 720
          }}>
            An enterprise cloud migration. <span style={{ color: '#14B89A', fontStyle: 'italic', fontWeight: 500 }}>Back to predictable delivery.</span>
          </h2>

          {/* What-we-did intro */}
          <p style={{
            margin: '0 0 22px', maxWidth: 760,
            fontSize: 15, lineHeight: 1.6, color: 'rgba(13,0,66,0.72)'
          }}>
            A delivery team inside an enterprise cloud migration was tasked with
            modernising infrastructure and cutting run costs — but a critical
            workstream was slipping. The constraint was structural, not capability.
          </p>

          {/* Two columns: chart + stats on the left, what-we-did on the right. */}
          <div className="hr-min-cs-grid" style={{
            display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 28, alignItems: 'start'
          }}>
            <div>
          {/* Chart — animated 12-month journey (committed vs. delivered). */}
          <CaseStudyChart play={inview} />
            </div>

            {/* Right column — what we actually did. */}
            <div>
              <span style={{
                display: 'inline-block', fontSize: 11, fontWeight: 700,
                letterSpacing: '0.18em', color: '#1F4DD8', marginBottom: 14
              }}>
                HOW WE HELPED
              </span>
              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexDirection: 'column', gap: 14
              }}>
                {[
                { k: "We started with the team, not the symptoms", d: "Mapped how the workstream was really organised and how decisions got made, then re-anchored the 'why' before touching delivery." },
                { k: "We redesigned the operating model", d: "Rebuilt dependencies, cadence, and a technical runway so the team could deliver without constant blockers." },
                { k: "We worked on what sat underneath", d: "Engaged at the human level too — the load, friction, and dynamics quietly capping what the team could sustain." }].
                map((b, i) =>
                <li key={i} className="hr-min-cs-do" style={{ display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'start', ['--do-delay']: ['0.15s', '0.5s', '0.85s'][i] }}>
                    <span aria-hidden style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'rgba(13,0,66,0.34)', color: '#fff',
                    fontSize: 11, fontWeight: 700, marginTop: 1,
                    fontVariantNumeric: 'tabular-nums'
                  }}>{i + 1}</span>
                    <span style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(13,0,66,0.74)', textAlign: 'justify' }}>
                      <strong style={{ color: '#0D0042', fontWeight: 700 }}>{b.k}.</strong> {b.d}
                    </span>
                  </li>
                )}
              </ul>

              {/* Credibility stat boxes — moved beneath "what we did" to balance
                     the card and use the space the bullets left empty. */}
              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
                gap: 10, marginTop: 22
              }}>
                {stats.map((s, si) =>
                <div key={s.l} className={"hr-min-cs-pill" + (inview ? " is-in" : "")}
                style={{
                  background: '#FFFFFF',
                  border: '1px solid rgba(13,0,66,0.12)',
                  borderRadius: 10,
                  padding: '14px 14px',
                  display: 'flex', flexDirection: 'column', gap: 6,
                  boxShadow: '0 6px 18px -8px rgba(13,0,66,0.22)',
                  ['--pill-i']: si
                }}>
                  <div style={{
                    fontSize: 26, fontWeight: 700, letterSpacing: '-0.025em',
                    color: s.accent, lineHeight: 1,
                    fontVariantNumeric: 'tabular-nums'
                  }}>
                    <CountUp to={s.to} suffix={s.suffix} start={inview} />
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.35, color: 'rgba(13,0,66,0.7)' }}>
                    {s.l}
                  </div>
                </div>
                )}
              </div>
            </div>
          </div>

          <div style={{
            marginTop: 22, paddingTop: 18,
            borderTop: '1px solid rgba(13,0,66,0.08)',
            display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', flexWrap: 'wrap', gap: 14
          }}>
            <span style={{ fontSize: 13, color: 'rgba(13,0,66,0.6)' }}>
              Enterprise cloud migration · FTSE-listed retailer
            </span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontSize: 14, fontWeight: 600, color: '#1F4DD8'
            }}>
              See the methodology behind it →
            </span>
          </div>
        </a>
      </div>
    </section>);

};

// ============================================================
//  06 · Insights — small reference, not a full article card.
// ============================================================
const HMin_Insights = () => {
  const articles = [
  { tag: "Sustainable Capacity", t: "Recovery is inevitable — the only question is whether it's planned.", read: "8 min", note: "Why refused recovery resurfaces as unplanned absence — and how to design it in." },
  { tag: "AI Transformation", t: "Your AI transformation is hitting its targets. The team is not.", read: "7 min", note: "Adoption metrics look healthy while capacity quietly erodes underneath." },
  { tag: "Performance Identity", t: "What standards are for — and why yours default downward.", read: "7 min", note: "Standards aren't values on a wall — they're the behaviour that holds under load." }];

  return (
    <section className="hr-lab">
      <div className="hr-lab-bg" aria-hidden>
        <div className="hr-lab-grid-lines" />
        <div className="hr-lab-scan" />
      </div>
      <div className="container hr-lab-inner">
        <div className="hr-lab-head">
          <span className="hr-lab-eyebrow">
            FROM THE LAB · ACTIVE RESEARCH
          </span>
          <h2 className="hr-lab-h">
            We publish what we learn — <em>open thinking on performance under pressure.</em>
          </h2>
          <a href="insights.html" className="hr-lab-cta">
            Visit the Insights Hub
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h10M9 4l4 4-4 4" /></svg>
          </a>
        </div>
        <div className="hr-lab-grid">
          {articles.map((a, i) =>
          <a key={i} href="insights.html" className="hr-lab-card">
              <span className="hr-lab-card-top">
                <span className="hr-lab-tag">{a.tag}</span>
                <span className="hr-lab-meta">
                  <svg className="hr-lab-doc" width="13" height="14" viewBox="0 0 16 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                    <path d="M3 2.5h7l3 3V15a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 3 15V2.5z" />
                    <path d="M10 2.5V6h3" />
                    <path d="M5.5 9.5h5M5.5 12h3.5" />
                  </svg>
                  {a.read}
                </span>
              </span>
              <span className="hr-lab-title">“{a.t}”</span>
              <span className="hr-lab-note">{a.note}</span>
            </a>
          )}
        </div>
      </div>
    </section>);

};


// ============================================================
//  Final CTA strip — sits between Case Study and FAQ.
//  Flat brand-teal background, no gradient, no radial blooms.
// ============================================================
const HMin_FinalCTA = () =>
<section className="hmin-finalcta" style={{
  padding: '44px 0 50px',
  background: '#0D0042',
  borderTop: '1px solid rgba(46,224,176,0.45)',
  borderBottom: '1px solid rgba(46,224,176,0.45)',
  color: '#FFFFFF',
  fontFamily: 'Mona Sans, sans-serif'
}}>
    <div className="container" style={{
    display: 'grid',
    gridTemplateColumns: '1.5fr 1fr',
    gap: 48,
    alignItems: 'center'
  }}>
      <div>
        <span style={{
        display: 'inline-block',
        fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
        color: '#2EE0B0', marginBottom: 12
      }}>
          READY TO START
        </span>
        <h2 style={{
        margin: 0,
        fontSize: 25, lineHeight: 1.1, letterSpacing: '-0.02em',
        fontWeight: 600, color: '#FFFFFF',
        textWrap: 'balance'
      }}>
          Two ways in. <span style={{ color: '#2EE0B0', fontStyle: 'italic', fontWeight: 500 }}>One free, one a conversation.</span>
        </h2>
      </div>
      <div style={{
      display: 'flex', flexDirection: 'column', gap: 8,
      alignItems: 'flex-start'
    }}>
        <a href="diagnostic.html" style={{
        display: 'inline-flex',
        alignItems: 'center', justifyContent: 'center',
        gap: 7, padding: '7px 15px',
        background: '#2EE0B0', color: '#0B3F35',
        borderRadius: 999, textDecoration: 'none',
        fontSize: 12.5, fontWeight: 700
      }}>
          Take the diagnostic →
        </a>
        <a href="#" style={{
        display: 'inline-flex',
        alignItems: 'center', justifyContent: 'center',
        gap: 7, padding: '7px 15px',
        background: 'transparent',
        color: '#FFFFFF',
        border: '1.5px solid rgba(255,255,255,0.35)',
        borderRadius: 999, textDecoration: 'none',
        fontSize: 12.5, fontWeight: 600
      }}>
          Start a conversation
        </a>
      </div>
    </div>
  </section>;

// ============================================================
//  02 · Stats band — count-up + fade on scroll into view.
// ============================================================
const HMin_Stats = ({ inHero = false }) => {
  const stats = [
  { to: 10, suffix: "+", l: "years leading complex delivery" },
  { to: 25, suffix: "+", l: "organisations engaged" },
  { to: 70, suffix: "%", l: "measurable execution lift" }];

  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    if (!('IntersectionObserver' in window)) {setSeen(true);return;}
    const io = new IntersectionObserver((es) => es.forEach((e) => {
      if (e.isIntersecting) {setSeen(true);io.disconnect();}
    }), { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const inner =
  <div className="container hr-stats-inner">
      {stats.map((s) =>
    <div key={s.l} className="hr-stat">
          <div className="hr-stat-rule" />
          <div className="hr-stat-n"><CountUp to={s.to} suffix={s.suffix} start={seen} /></div>
          <div className="hr-stat-l">{s.l}</div>
        </div>
    )}
    </div>;

  // Credibility banner now lives INSIDE the hero, as a translucent strip over
  // the single hero video (no second video element — avoids the mirrored look).
  if (inHero) {
    return <div className="hr-hero-cred" ref={ref}>{inner}</div>;
  }
  return (
    <section className="hr-stats" ref={ref}>
      {inner}
    </section>);

};

// ============================================================
//  Interactive diagnostic teaser — segmented ring selector that builds
//  a live sample diagnostic report. Selecting a ring re-scores a mock
//  report (animated bars), flags that ring as the primary constraint,
//  and shows the tailored read-out + CTA. Lets the visitor SEE what the
//  real diagnostic produces.
// ============================================================
const HMin_Teaser = () => {
  const rings = [
  { id: 'identity', label: 'Identity', color: '#7C3AED',
    chip: "Standards slipping under pressure",
    scores: { identity: 41, architecture: 72, capacity: 68 },
    bench: 85,
    benchLine: "In Google's Project Aristotle and elite-sport research, high performers anchor identity at 85+. At 41, this is your primary gap — the distance to where strong teams already operate.",
    read: "When the behavioural anchor isn't designed, standards default under load. We rebuild it so quality holds when it's hard.",
    next: ["Map the team's real operating values vs. high-performer markers", "Reset the standard through targeted coaching"],
    photo: "assets/photos/teaser-face-identity.jpg" },
  { id: 'architecture', label: 'Architecture', color: '#1FA77E',
    chip: "Effort high, delivery unpredictable",
    scores: { identity: 70, architecture: 38, capacity: 64 },
    bench: 88,
    benchLine: "High performers typically score 85–90+ on execution architecture; top individuals 90+. At 38, delivery is structurally constrained — a design gap, not an effort one.",
    read: "That's a structural fault, not an effort one. We redesign the operating model so delivery becomes predictable.",
    next: ["Diagnose where dependencies and decisions stall delivery", "Install an operating rhythm that makes output predictable"],
    photo: "assets/photos/teaser-face-architecture.jpg", photoPos: "62% 24%" },
  { id: 'capacity', label: 'Capacity', color: '#2563EB',
    chip: "Stretched team, rising burnout",
    scores: { identity: 66, architecture: 71, capacity: 50 },
    bench: 85,
    benchLine: "High performers sustain 85+ on capacity. At 50, intensity — not design — is carrying the load, and it won't repeat without burning people out.",
    read: "Intensity has become the system. We design capacity and recovery so velocity repeats — without burning people out.",
    next: ["Measure true sustainable load against current demand", "Design recovery so velocity repeats, quarter on quarter"],
    photo: "assets/photos/teaser-face-capacity.jpeg" }];

  const DOMAINS = [
  { key: 'identity', name: 'Performance Identity', bench: 85 },
  { key: 'architecture', name: 'Execution Architecture', bench: 88 },
  { key: 'capacity', name: 'Sustainable Capacity', bench: 85 }];

  const [sel, setSel] = React.useState('architecture');
  const chosen = rings.find((r) => r.id === sel);
  const overall = Math.round(
    (chosen.scores.identity + chosen.scores.architecture + chosen.scores.capacity) / 3
  );

  return (
    <section className="hr-teaser">
      <div className="container">
        <div className="hr-teaser-head">
          <span className="eyebrow eyebrow-blue">TRY IT · INTERACTIVE</span>
          <h2 className="hr-teaser-h">Pick what most fits you — see where you'd start.</h2>
          <p className="hr-teaser-sub">A live sample report rebuilds around your answer. The full diagnostic scores all three rings, precisely.</p>
        </div>

        <div className="hr-teaser-stage">
          {/* LEFT — the interactive control */}
          <div className="hr-teaser-control">
            <span className="hr-teaser-q">Where do you think support is most needed?</span>
            <div className="hr-teaser-seg">
              {rings.map((r) =>
              <button key={r.id}
              className={"hr-teaser-segbtn" + (sel === r.id ? " sel" : "")}
              style={{ ['--c']: r.color }}
              onClick={() => setSel(r.id)}
              onMouseEnter={() => setSel(r.id)}
              aria-pressed={sel === r.id}>
                  <span className="hr-teaser-segdot" />
                  <span className="hr-teaser-segtxt">
                    <strong>{r.label}</strong>
                    <em>{r.chip}</em>
                  </span>
                </button>
              )}
            </div>

            <div className="hr-teaser-read" style={{ ['--c']: chosen.color }}>
              <p>{chosen.read}</p>
              <a href="diagnostic.html" className="hr-teaser-cta">
                Take the full diagnostic — 7 min
                <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h10M9 4l4 4-4 4" /></svg>
              </a>
            </div>
          </div>

          {/* RIGHT — the live sample report */}
          <div className="hr-teaser-report" aria-hidden>
            <div className="hr-teaser-report-head">
              <div>
                <span className="hr-teaser-report-label">SAMPLE · PERFORMANCE DIAGNOSTIC</span>
              </div>
              <span className="hr-teaser-report-photo" style={{ ['--c']: chosen.color, backgroundImage: `url('${chosen.photo}')`, backgroundPosition: chosen.photoPos || '50% 30%' }} />
            </div>

            <div className="hr-teaser-score">
              <span className="hr-teaser-score-num">{overall}</span>
              <span className="hr-teaser-score-suf">/ 100 overall</span>
            </div>

            {/* Benchmark callout — frames the constraint score against where
                   high-performing teams and individuals sit. */}
            <div className="hr-teaser-bench" style={{ ['--c']: chosen.color }}>
              <span className="hr-teaser-bench-tag">Where does this sit versus high performers?</span>
              <p className="hr-teaser-bench-line">{chosen.benchLine}</p>
            </div>

            <div className="hr-teaser-bars">
              {DOMAINS.map((d) => {
                const v = chosen.scores[d.key];
                const isConstraint = d.key === chosen.id;
                return (
                  <div className="hr-teaser-bar" key={d.key}>
                    <div className="hr-teaser-bar-top">
                      <span className="hr-teaser-bar-name">
                        {d.name}
                        {isConstraint && <span className="hr-teaser-bar-flag" style={{ ['--c']: '#DC2626' }}>PRIMARY CONSTRAINT</span>}
                      </span>
                      <span className="hr-teaser-bar-pct">{v}</span>
                    </div>
                    <div className="hr-teaser-bar-wrap">
                      <div className="hr-teaser-bar-track">
                        <div className="hr-teaser-bar-fill"
                        style={{
                          width: v + '%',
                          background: isConstraint ?
                          'linear-gradient(90deg, #DC2626, #F05252)' :
                          'linear-gradient(90deg, #2563EB, #60A5FA)',
                          opacity: isConstraint ? 1 : 0.55
                        }} />
                      </div>
                      <span className="hr-teaser-bar-bench" style={{ left: d.bench + '%' }} aria-hidden />
                    </div>
                  </div>);

              })}
            </div>

            <div className="hr-teaser-bench-key" aria-hidden>
              <span className="hr-teaser-bench-key-tick" />
              High performer benchmark — where you could be
            </div>

            {/* What we'd do next — a teaser of the engagement, not the full value. */}
            <div className="hr-teaser-next" style={{ ['--c']: chosen.color }}>
              <span className="hr-teaser-next-label">WHERE WE'D START</span>
              <ul>
                {chosen.next.map((n) =>
                <li key={n}><span className="hr-teaser-next-tick" />{n}</li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const HomeMinimal = () => {
  if (typeof window !== "undefined") ensureHomeMinimalStyles();
  const { HRefined_FAQ } = window;

  // Unified scroll-reveal — major sections (after the hero + stats) ease
  // in as they enter view. One motion vocabulary, applied at runtime so
  // no per-section markup is needed.
  React.useEffect(() => {
    const root = document.querySelector('.hr-min');
    if (!root) return;
    const targets = Array.from(root.querySelectorAll(':scope > section')).slice(2);
    if (!('IntersectionObserver' in window)) {targets.forEach((s) => s.classList.add('in'));return;}
    targets.forEach((s) => s.classList.add('hr-reveal'));
    const io = new IntersectionObserver((es) => es.forEach((e) => {
      if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
    }), { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    targets.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);
  return (
    <div className="psl-page hr-root hr-min" data-screen-label="Home (minimal)">
      <PSLNav theme="light" active="" overlay />

      <HMin_Hero />
      <HMin_BreaksDown />
      <HMin_System />
      <HMin_Teaser />
      <HMin_Principles />
      {/* Insights banner — slim research reference, reinforces the
                  research-backed claim before the case-study proof. */}
      <HMin_Insights />
      {/* Diagnostic routing removed (consultant review): the hero CTA
                    already carries the diagnostic invite, and the Diagnostic page
                    itself surfaces the Individual / Team choice. */}
      <HMin_CaseStudy />
      {/* "From the Lab" insights teaser removed — Insights is now a
                    dedicated top-nav tab, so the homepage doesn't need a teaser. */}
      {/* Closing CTA strip sits BEFORE the FAQ so the conversion ladder
                    asks the question while interest is still warm. The FAQ then
                    catches any residual objections after the CTA moment. */}
      <HMin_FinalCTA />
      <HRefined_FAQ />

      <PSLFooter minimal />
    </div>);

};

Object.assign(window, { HomeMinimal });