/* ============================================================
   CKM — Human Readiness Index™ (flagship page)
   ------------------------------------------------------------
   Everything here is scoped under body.hri-page so the flagship
   treatment cannot leak into the rest of the site.

   Treatment: the site's own theme — Montserrat display + Inter
   body, site type scale, site navy + gold. No page-specific
   webfonts. Shared header and footer are left untouched.
   ============================================================ */

.hri-page{
  /* site palette (not the prototype's second gold) */
  --hri-navy:#081A33;
  --hri-navy-2:#0B2545;
  --hri-navy-3:#13315C;
  --hri-gold:#C9A227;
  --hri-gold-bright:#E3C766;
  --hri-gold-deep:#A67C1B;
  --hri-gold-pale:#F7EFD8;

  --hri-paper:#F7F5F0;          /* warm report stock, for the light sections */
  --hri-ink:#1A2433;
  --hri-muted:#5A6678;
  --hri-line:#E4E0D6;
  --hri-on-navy:#C4D0E2;
  --hri-on-navy-dim:#8FA0BB;

  /* The prototype referenced --ok / --warn but never declared them, so the
     strengths/risks headings silently lost their semantic colour. Declared. */
  --hri-ok:#2E7D5B;
  --hri-warn:#B4761E;

  /* one accent per readiness card (Technology / Financial / Operational), so
     the four-across row reads as distinct categories rather than four
     identical boxes. Human keeps the existing brand gold via .is-key. Each
     has a "bright" reading for a navy card face and a "deep" reading for a
     white one, the same two-tier pattern the gold accent already uses. */
  --hri-tech-bright:#7FB2E5;  --hri-tech-deep:#2C5F8A;
  --hri-fin-bright:#5BCB9D;   --hri-fin-deep:#1F6B4C;
  --hri-ops-bright:#E8AD6B;   --hri-ops-deep:#A65D1E;

  /* type now comes from the site theme: Montserrat display + Inter body.
     No page-specific webfonts are loaded any more. */
  --hri-display:var(--font-display);
  --hri-mono:var(--font-body);
  --hri-ease:cubic-bezier(.22,1,.36,1);
  --sweep-dur:3s;      /* one clock for the radar sweep, points, labels and caption */
  --hri-maxw:1180px;
}

/* ---------- shared primitives ---------- */
/* layout now uses the site's own .container; aur/embers need a positioned host */
.hri-page .hri-sec, .hri-page .hri-final{ position:relative; overflow:hidden; }

.hri-sec{ padding:96px 0; }
@media(max-width:700px){ .hri-sec{ padding:64px 0; } }

.hri-eyebrow{
  display:block; font-family:var(--hri-display); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hri-gold-deep);
  margin-bottom:14px;
}
.hri-sec.on-navy .hri-eyebrow{ color:var(--hri-gold-bright); }

.hri-h2{
  font-family:var(--hri-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.75rem);
  line-height:1.15; letter-spacing:-.005em; color:var(--hri-navy); max-width:22ch; margin:0 0 16px;
  text-wrap:balance;
}
.hri-sec.on-navy .hri-h2{ color:#fff; }

.hri-lede{ font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.65; color:var(--hri-muted); max-width:62ch; margin:0 0 8px; }
.hri-sec.on-navy .hri-lede{ color:var(--hri-on-navy); }

.hri-h3{ font-family:var(--hri-display); font-weight:600; color:var(--hri-navy); }

/* buttons are the site's own .btn/.btn-gold/.btn-outline-light + .mag */

/* reveals are the site's .reveal / [data-stagger] engine (motion.js) */

/* ============================================================
   HERO
   Deliberately NOT class "hero": that selector auto-attaches the
   sitewide looping typewriter, which is too restless for a
   board-facing flagship. This headline gets one calm reveal.
   ============================================================ */
.hri-hero{ overflow:hidden; }
.hri-hero::after{  /* faint gold grid overlay (decorative only) */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(201,162,39,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(201,162,39,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
}
.hri-hero .container{ position:relative; z-index:1; display:grid;
  grid-template-columns:1fr minmax(0,380px); gap:40px; align-items:center; width:100%; }
/* .page-hero h1 caps at 20ch, which suits the short headlines on the other pages.
   This banner is two-column with a much longer title, so the cap is lifted to the
   column width. Face, size, weight and colour stay exactly as .page-hero h1. */
.hri-hero h1{ max-width:none; }
.hri-hero .lede{ max-width:52ch; margin-top:var(--s-2); }
/* the banner is a fixed 650px like every other page, so the chart is capped to the
   space that remains once the site's 10rem/3rem hero padding is taken out. */
.hri-hero .hri-hero-visual{ max-height:436px; }
.hri-hero .hri-chart-frame{ padding:16px 16px 10px; }
.hri-hero .hri-chart-frame svg{ max-height:352px; display:block; margin:0 auto; }


/* h1 size/weight/colour/max-width come from .page-hero h1 — identical to every
   other interior page. Only the gold accent word is styled here. */
.hri-hero h1 em{ font-style:normal; color:var(--hri-gold-bright); }
.hri-hero h1 .tm{ font-size:.42em; vertical-align:super; letter-spacing:0; }

.hri-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1rem; }

/* The single strongest conversion lever on the page. In the prototype this
   fact was buried inside the FAQ accordion; surfaced next to the CTA. */
.hri-hero-note{
  margin-top:18px; font-family:var(--hri-mono); font-size:.82rem; letter-spacing:.05em;
  color:var(--hri-on-navy-dim);
}
.hri-hero-note b{ color:var(--hri-gold-pale); font-weight:600; }

.hri-hero-visual{ position:relative; }
/* A dedicated bokeh plate instead of blurring whatever sits behind the panel
   with backdrop-filter — calm centre so the chart and its labels stay legible,
   warm gold bokeh only toward the edges/corners for depth. Same plate on both
   radar panels (hero mini-card + dimensions panel) so they read as one family. */
.hri-chart-frame{
  background:linear-gradient(rgba(8,26,51,.62),rgba(8,26,51,.62)),
             url("../assets/hri-panel-bg.jpg?v=1");
  background-size:cover; background-position:center;
  border:1px solid rgba(201,162,39,.34);
  border-radius:18px; padding:20px 20px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.hri-chart-cap{
  font-family:var(--hri-display); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; color:var(--hri-gold-pale);
  text-align:center; margin-top:10px; opacity:.9;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
/* a live "scanning" dot, breathing on the radar's own clock */
.hri-chart-cap::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--hri-gold-bright); box-shadow:0 0 0 0 rgba(227,199,102,.55);
  animation:hriCapDot var(--sweep-dur,6s) ease-out infinite;
}
@keyframes hriCapDot{
  0%      { box-shadow:0 0 0 0 rgba(227,199,102,.55); opacity:1; }
  22%     { box-shadow:0 0 0 7px rgba(227,199,102,0); opacity:.55; }
  60%,100%{ box-shadow:0 0 0 0 rgba(227,199,102,0); opacity:1; }
}
/* a light passes across the caption once per sweep. Guarded: without
   background-clip:text the transparent fill would hide the text entirely. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hri-chart-cap span{
    background:linear-gradient(100deg,
      var(--hri-gold-pale) 0%, var(--hri-gold-pale) 38%, #FFF8E6 50%,
      var(--hri-gold-pale) 62%, var(--hri-gold-pale) 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    animation:hriCapShine var(--sweep-dur,6s) linear infinite;
  }
  @keyframes hriCapShine{ 0%{ background-position:130% 0; } 100%{ background-position:-130% 0; } }
}
@media(max-width:1000px){
  .hri-hero{ height:auto; min-height:0; padding:9.5rem 0 3rem; }
  .hri-hero .container{ grid-template-columns:1fr; gap:40px; }
  .hri-hero-visual{ max-width:430px; margin:0 auto; width:100%; }
}


/* ---------- hero photograph ----------
   Same construction as the other interior heroes (block 60): a left-to-right
   navy scrim over the image plus a bottom fade, so the headline always sits on
   near-solid navy. One deliberate difference: the right end of the scrim is
   .44 here rather than .04, because this hero is the only one carrying a chart
   card on that side and the factory lighting would otherwise read through it. */
/* Same recipe as the other photo banners (about/why-ckm/services): one
   gradient, no mobile override, so this page's overlay is visually identical
   to the rest of the site rather than its own darker variant. */
.hri-page .page-hero-hri{
  background-image:
    linear-gradient(90deg, rgba(8,26,51,.90) 0%, rgba(8,26,51,.66) 32%,
                           rgba(8,26,51,.26) 62%, rgba(8,26,51,.10) 100%),
    linear-gradient(0deg, rgba(8,26,51,.50) 0%, rgba(8,26,51,0) 40%),
    url("../assets/hri-hero-bg.jpg?v=4");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
/* the faint gold grid was standing in for a photograph — retired now there is one */
.hri-page .page-hero-hri::after{ display:none; }

/* credibility strip uses the site's .hero-stat-band/.stat/.num/.num-text/.label
   verbatim (see hri.php) — no page-specific CSS at all. */

/* ============================================================
   SECTION BACKGROUNDS — the 8 body sections alternate white/navy;
   which section gets which is set per-section in hri.php, not here.
   ============================================================ */
.hri-sec.on-navy{ background:var(--hri-navy); color:#fff; }
/* "Why It Matters" keeps its own warm-paper photograph rather than the flat
   #fff every other on-white section uses — this is the flagship opening
   section, so it earns the one bespoke backdrop. Same tone as --hri-paper,
   so the eyebrow/h2/lede colours (tuned for plain white) stay legible with
   no extra scrim needed. */
#why.hri-sec.on-white{
  background:url("../assets/hri-why-bg.jpg?v=1") center / cover no-repeat;
}
/* "The Framework" gets its own converging-lines schematic, echoing the
   section's own subject (five dimensions resolving into one composite
   score). Sits under the .aur glow already on this section. */
#what.hri-sec.on-navy{
  background:url("../assets/hri-what-bg.jpg?v=1") center / cover no-repeat, var(--hri-navy);
}
/* "The Five Dimensions" gets its own radar/pentagon schematic, echoing the
   live radar chart that sits on top of it in this section. */
#dimensions.hri-sec.on-white{
  background:url("../assets/hri-dims-bg.jpg?v=1") center / cover no-repeat, #fff;
}
/* "What You Receive" gets its own ledger/gauge schematic, echoing a scored
   deliverable — mostly hidden behind the large white scorecard panel. */
#scorecard.hri-sec.on-navy{
  background:url("../assets/hri-scorecard-bg.jpg?v=1") center / cover no-repeat, var(--hri-navy);
}
/* "Why It Matters to the Business" gets a rising performance chart, its
   detail weighted to the right where the eight outcome cards cover it and
   the heading block on the left stays on clean paper. */
#outcomes.hri-sec.on-white{
  background:url("../assets/hri-outcomes-bg.jpg?v=1") center / cover no-repeat, #fff;
}
/* "The Assessment Journey" gets a route/waypoint chart. Its centre band is
   deliberately empty: the seven-step diagram and its gold beam wires run
   horizontally straight through there and anything drawn behind them would
   compete with the live wires. */
#journey.hri-sec.on-navy{
  background:url("../assets/hri-journey-bg.jpg?v=1") center / cover no-repeat, var(--hri-navy);
}
/* "Sample Executive Report" gets stacked pages and a seal etched into both
   edges, echoing the report mockup that sits on top of it. */
#report.hri-sec.on-white{
  background:url("../assets/hri-report-bg.jpg?v=1") center / cover no-repeat, #fff;
}
/* The FAQ gets a dialogue motif held entirely in the left and right margins:
   the questions sit in a narrow 780px column whose own horizontal dividers
   would clash with anything drawn behind them. */
#faq.hri-sec.on-navy{
  background:url("../assets/hri-faq-bg.jpg?v=1") center / cover no-repeat, var(--hri-navy);
}

.hri-readiness{ display:flex; align-items:stretch; gap:28px; flex-wrap:wrap; margin-top:40px; }
.hri-rbox{
  flex:1 1 0; max-width:215px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:15px 12px; text-align:center;
}
/* a touch smaller than the home page figures: this is a four-across row inside a
   text section, not a headline stat band. Face, colour and casing are unchanged. */
.hri-rbox .num-text{ font-size:clamp(.98rem,1.25vw,1.15rem); }
.hri-rbox .label{ font-size:.68rem; letter-spacing:.09em; }
/* type comes from the home page's .stat/.num-text/.label rules in style.css;
   only the card shell and the highlighted state are defined here. */
.hri-rbox .num-text{ padding-top:0; }
.hri-rbox .label{ margin-top:.35rem; }
.hri-rbox.is-key{
  background:rgba(201,162,39,.14); border:1.5px solid var(--hri-gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.09);
}
.hri-rbox.is-key .num-text{ color:var(--hri-gold-bright); }
.hri-rbox.is-key .label{ color:var(--hri-gold-pale); }
/* This card's white/gold-300 type (site's .stat rules) is tuned for a navy
   backdrop. Whichever section carries .hri-readiness may now be on-white, so
   the fill, border and text need a light-backdrop reading too. */
.hri-sec.on-white .hri-rbox{
  background:rgba(8,26,51,.035); border-color:rgba(8,26,51,.14);
}
.hri-sec.on-white .hri-rbox .num-text{ color:var(--hri-gold-deep); }
.hri-sec.on-white .hri-rbox .label{ color:var(--hri-muted); }
.hri-sec.on-white .hri-rbox.is-key .num-text{ color:var(--hri-gold-deep); }
.hri-sec.on-white .hri-rbox.is-key .label{ color:var(--hri-ink); }

/* one distinct accent per card — Technology (blue), Financial (green),
   Operational (amber) — Human keeps its own gold via .is-key above. The
   translucent tint reads fine on either a navy or a white card face, so only
   the two text colours need a per-background swap, the same pattern .is-key
   already uses. */
.hri-rbox.is-tech{ background:rgba(127,178,229,.14); border:1.5px solid var(--hri-tech-bright); box-shadow:0 0 0 4px rgba(127,178,229,.09); }
.hri-rbox.is-tech .num-text{ color:var(--hri-tech-bright); }
.hri-rbox.is-tech .label{ color:var(--hri-tech-bright); opacity:.8; }
.hri-sec.on-white .hri-rbox.is-tech{ border-color:var(--hri-tech-deep); }
.hri-sec.on-white .hri-rbox.is-tech .num-text{ color:var(--hri-tech-deep); }
.hri-sec.on-white .hri-rbox.is-tech .label{ color:var(--hri-tech-deep); opacity:.85; }

.hri-rbox.is-fin{ background:rgba(91,203,157,.14); border:1.5px solid var(--hri-fin-bright); box-shadow:0 0 0 4px rgba(91,203,157,.09); }
.hri-rbox.is-fin .num-text{ color:var(--hri-fin-bright); }
.hri-rbox.is-fin .label{ color:var(--hri-fin-bright); opacity:.8; }
.hri-sec.on-white .hri-rbox.is-fin{ border-color:var(--hri-fin-deep); }
.hri-sec.on-white .hri-rbox.is-fin .num-text{ color:var(--hri-fin-deep); }
.hri-sec.on-white .hri-rbox.is-fin .label{ color:var(--hri-fin-deep); opacity:.85; }

.hri-rbox.is-ops{ background:rgba(232,173,107,.16); border:1.5px solid var(--hri-ops-bright); box-shadow:0 0 0 4px rgba(232,173,107,.09); }
.hri-rbox.is-ops .num-text{ color:var(--hri-ops-bright); }
.hri-rbox.is-ops .label{ color:var(--hri-ops-bright); opacity:.8; }
.hri-sec.on-white .hri-rbox.is-ops{ border-color:var(--hri-ops-deep); }
.hri-sec.on-white .hri-rbox.is-ops .num-text{ color:var(--hri-ops-deep); }
.hri-sec.on-white .hri-rbox.is-ops .label{ color:var(--hri-ops-deep); opacity:.85; }
/* The wave: md-beat (scale) plus a gold light pulse on the SAME clock, so the
   two read as one thing travelling across the row rather than two effects.
   The light rides box-shadow/border, never transform, so it cannot cancel
   md-beat's scale (the library's transform-collision rule). */
@keyframes hriRboxGlow{
  0%,54%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0);
               border-color:rgba(255,255,255,.14); }
  70%        { box-shadow:0 14px 40px -8px rgba(201,162,39,.62);
               border-color:rgba(201,162,39,.75); }
}
@keyframes hriRboxGlowLight{
  0%,54%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0);
               border-color:rgba(8,26,51,.14); }
  70%        { box-shadow:0 14px 40px -8px rgba(201,162,39,.42);
               border-color:rgba(201,162,39,.75); }
}
/* the resting border colour above is baked into whichever keyframe runs, so the
   glow reads correctly whether this card's section is on-navy or on-white */
.hri-sec.on-white .hri-rbox.md-beat{ animation-name:md-beat, hriRboxGlowLight; }
.hri-rbox.md-beat{
  --beat:1.14;                  /* clearly visible growth as the wave passes */
  --beat-dur:5.2s;              /* was 2.6s — the wave reads as a slow breath */
  animation:md-beat var(--beat-dur) cubic-bezier(.22,.61,.2,1) infinite,
            hriRboxGlow var(--beat-dur) cubic-bezier(.22,.61,.2,1) infinite;
  /* NOT --d: motion.js's [data-stagger] writes --d on these children for the
     entrance, which would overwrite the beat's offset. --bd is ours alone. */
  animation-delay:var(--bd,0s), var(--bd,0s);
  will-change:transform;
}
/* the key card keeps its gold identity, so its pulse only deepens it */
.hri-rbox.is-key.md-beat{ animation-name:md-beat, none; }

/* same guards scene.css applies to .md-beat, restated because the rule above
   re-declares `animation` and would otherwise switch the loop back on */
[data-motion="off"] .hri-rbox.md-beat{ animation:none; }
@media (prefers-reduced-motion:reduce){ .hri-rbox.md-beat{ animation:none; } }

.hri-rplus{ align-self:center; font-family:var(--hri-display); font-size:1.25rem; color:var(--hri-gold); flex:0 0 auto; }
@media(max-width:760px){
  .hri-readiness{ flex-direction:column; }
  .hri-rplus{ transform:rotate(90deg); }
}

/* ============================================================
   01 — THE FRAMEWORK
   ============================================================ */
.hri-sec.on-white{ background:#fff; border-bottom:1px solid var(--hri-line); }
.hri-framework{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start; margin-top:34px; }
@media(max-width:920px){ .hri-framework{ grid-template-columns:1fr; gap:36px; } }

.hri-stats{ display:flex; gap:34px; flex-wrap:wrap; margin-top:34px; }
.hri-stat .n{ font-family:var(--hri-display); font-size:clamp(2rem,3.4vw,3rem); font-weight:600; color:var(--hri-gold-deep); line-height:1; }
.hri-stat .l{ font-size:.82rem; color:var(--hri-muted); max-width:16ch; margin-top:8px; line-height:1.45; }
/* muted grey and gold-deep are tuned for white paper; this block now also runs
   on the navy "what" section, so it needs a legible navy-context reading too */
.hri-sec.on-navy .hri-stat .n{ color:var(--hri-gold-bright); }
.hri-sec.on-navy .hri-stat .l{ color:var(--hri-on-navy); }

.hri-whofor{
  font-size:.98rem; color:var(--hri-muted); margin-top:26px;
  border-top:1px solid var(--hri-line); padding-top:18px; line-height:1.6;
}
.hri-whofor b{ color:var(--hri-navy-3); }
.hri-sec.on-navy .hri-whofor{ color:var(--hri-on-navy); border-top-color:rgba(255,255,255,.16); }
.hri-sec.on-navy .hri-whofor b{ color:var(--hri-gold-pale); }

.hri-quote{
  background:var(--hri-paper); border-left:3px solid var(--hri-gold);
  padding:26px 30px; border-radius:0 12px 12px 0;
}
.hri-quote p{
  font-family:var(--hri-display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.45; color:var(--hri-navy-2); margin:0;
}
.hri-quote cite{
  display:block; margin-top:14px; font-family:var(--hri-mono); font-style:normal;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hri-muted);
}

/* ============================================================
   02 — THE FIVE DIMENSIONS
   ============================================================ */
.hri-dims{ display:grid; grid-template-columns:430px 1fr; gap:52px; align-items:center; margin-top:38px; }
@media(max-width:1000px){ .hri-dims{ grid-template-columns:1fr; gap:36px; } }

/* this panel carries its own bokeh plate (see below) rather than the section's
   own background, so it reads the same whether its section is on-navy or
   on-white — a gold hairline separates it from either. */
/* same bokeh plate as .hri-chart-frame, so the two radar panels match */
.hri-dim-panel{
  background:linear-gradient(rgba(8,26,51,.60),rgba(8,26,51,.60)),
             url("../assets/hri-panel-bg.jpg?v=1");
  background-size:cover; background-position:center;
  border:1px solid rgba(201,162,39,.28);
  border-radius:18px; padding:28px; box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.hri-dim-panel .hri-chart-cap{ color:var(--hri-gold-pale); }

.hri-dim-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:580px){ .hri-dim-cards{ grid-template-columns:1fr; } }

/* real <button>: keyboard reachable and announced. The prototype used a div
   with a mouseenter handler, so tap and keyboard users got nothing at all. */
/* .card supplies background, radius, shadow and the hover lift; these cards just
   need the button reset and a tighter padding than the site's default .card. */
.hri-dim{ display:block; width:100%; text-align:left; font:inherit; cursor:pointer; padding:20px; }
.hri-outcome.card{ padding:20px; }
.hri-dim .ic{ width:32px; height:32px; margin-bottom:11px; display:block; color:var(--hri-navy); }
.hri-dim h3{ font-family:var(--hri-display); font-weight:700; color:var(--hri-navy); margin:0 0 6px; }   /* size from site .card h3 */
.hri-dim p{ font-size:.98rem; line-height:1.55; color:var(--hri-muted); margin:0; }
.hri-dim .sc{ display:block; font-family:var(--hri-mono); font-size:.82rem; font-weight:600; color:var(--hri-gold-deep); margin-top:10px; }
.hri-dim.is-wide{ grid-column:1/-1; }
/* Each dimension card carries its own warm-paper plate with a gold motif
   watermarked into the lower right. Anchored `right bottom` so the motif
   survives the crop when a card runs taller or shorter than its neighbour
   (card heights follow their copy, they are not fixed). Cut from one sheet
   so all five share the same paper and stroke weight. */
.hri-dim[data-dim]{
  background-repeat:no-repeat; background-position:right bottom; background-size:cover;
  /* the section behind these is warm paper too, so .card's 5%-alpha border is
     no longer enough on its own to hold the card's edge — lifted just enough
     to keep each card distinct from the backdrop. */
  border-color:rgba(8,26,51,.10);
}
.hri-dim[data-dim="0"]{ background-image:url("../assets/hri-dimcard1.jpg?v=1"); }
.hri-dim[data-dim="1"]{ background-image:url("../assets/hri-dimcard2.jpg?v=1"); }
.hri-dim[data-dim="2"]{ background-image:url("../assets/hri-dimcard3.jpg?v=1"); }
.hri-dim[data-dim="3"]{ background-image:url("../assets/hri-dimcard4.jpg?v=1"); }
.hri-dim[data-dim="4"]{ background-image:url("../assets/hri-dimcard5.jpg?v=1"); }
/* .card:hover already animates transform (site). Stacking a second transform
   here would cancel it — selected state is a gold ring only, never a transform. */
.hri-dim[aria-pressed="true"]{
  border-color:var(--hri-gold); box-shadow:0 0 0 2px rgba(201,162,39,.35), 0 12px 30px rgba(8,26,51,.10);
}
.hri-dim:focus-visible{ outline:3px solid var(--hri-gold); outline-offset:2px; }

/* radar */
.hri-radar .ring{ fill:none; stroke:rgba(201,162,39,.18); stroke-width:1; }
.hri-radar .axis{ stroke:rgba(201,162,39,.26); stroke-width:1; }
.hri-radar .area{ fill:rgba(201,162,39,.22); stroke:var(--hri-gold-bright); stroke-width:2.5; stroke-linejoin:round; }
.hri-radar .dot{
  fill:var(--hri-gold-bright); transition:r .18s var(--hri-ease);
  transform-box:fill-box; transform-origin:center;
  animation:hriDotHit var(--sweep-dur) linear infinite;
  animation-delay:calc(var(--i,0) * var(--sweep-dur) / 5 - var(--sweep-dur) * 0.1806);
}
@keyframes hriDotHit{
  0%        { transform:scale(1); }
  10%       { transform:scale(2); }
  30%, 100% { transform:scale(1); }
}
/* The SVG is scaled down to fit its panel, so a font-size given in viewBox units
   paints far smaller than it reads: at 11 units the hero radar rendered ~5.4px,
   which is unreadable. Sized per radar to land at roughly 12px on screen. */
.hri-radar .lbl{
  font-family:var(--hri-display); font-size:21px; font-weight:600;
  fill:var(--hri-on-navy); letter-spacing:.04em;
  transform-box:fill-box; transform-origin:center;
  animation:hriLblHit var(--sweep-dur) linear infinite;
  animation-delay:calc(var(--i,0) * var(--sweep-dur) / 5 - var(--sweep-dur) * 0.1806);
}
.hri-dim-panel .hri-radar .lbl{ font-size:17px; }   /* larger panel, smaller units */
/* NB: the two sizes above are SVG viewBox units, not page type — they scale with
   the chart, so they are deliberately outside the rem type scale. */

/* Each spoke lights as the sweep arrives on it: the five delays are one fifth of
   the sweep's own cycle apart, so the highlight travels around with the beam. */
/* --s is written per label by hri.js: scale grows each label relative to its
   OWN box, so a single shared factor makes a 10-character label leap and a
   2-character one ("AI") barely move. Shorter labels get a larger factor so
   every spoke pops by a comparable amount on screen. */
@keyframes hriLblHit{
  0%           { fill:var(--hri-on-navy);     transform:scale(1); }
  10%          { fill:var(--hri-gold-bright); transform:scale(var(--s,1.34)); }
  24%          { fill:var(--hri-gold-bright); transform:scale(var(--s,1.34)); }
  44%, 100%    { fill:var(--hri-on-navy);     transform:scale(1); }
}
/* a selected dimension stays solid gold and must not be overridden by the sweep */
.hri-radar .lbl.is-on{ fill:var(--hri-gold-bright); font-weight:700; animation:none; transform:scale(1.12); }
.hri-radar .area.draw{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.hri-radar .area.draw.is-in{ animation:hriDraw 1.15s var(--hri-ease) forwards; }
/* slow radar sweep. transform-box:view-box so transform-origin uses SVG units. */
.hri-radar .sweep{ transform-box:view-box; transform-origin:280px 240px;
  animation:hriSweep var(--sweep-dur,6s) linear infinite; }
@keyframes hriSweep{ to{ transform:rotate(360deg); } }
[data-motion="off"] .hri-radar .sweep{ display:none; }
[data-motion="off"] .hri-radar .lbl,
[data-motion="off"] .hri-radar .dot{ animation:none; transform:none; }
@media (prefers-reduced-motion:reduce){
  .hri-radar .sweep{ display:none; }
  .hri-radar .lbl, .hri-radar .dot{ animation:none; transform:none; }
  .hri-chart-cap::before, .hri-chart-cap span{ animation:none; }
  .hri-chart-cap span{ background:none; color:var(--hri-gold-pale); }
}
@keyframes hriDraw{ to{ stroke-dashoffset:0; } }

/* ============================================================
   03 — EXECUTIVE SCORECARD
   ============================================================ */
.hri-card{ background:#fff; border:1px solid var(--hri-line); border-radius:18px; overflow:hidden; margin-top:32px; box-shadow:0 18px 50px rgba(8,26,51,.08); }
.hri-sc-head{ background:var(--hri-navy); color:#fff; padding:32px 36px; display:grid; grid-template-columns:230px 1fr; gap:44px; }
@media(max-width:800px){ .hri-sc-head{ grid-template-columns:1fr; gap:26px; padding:26px 22px; } }
.hri-sc-head .lab{ font-family:var(--hri-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--hri-gold-pale); }
.hri-sc-head .score{ font-family:var(--hri-display); font-size:clamp(2rem,3.4vw,3rem); font-weight:600; line-height:1; margin:8px 0 6px; }
.hri-sc-head .score small{ font-size:1.1rem; color:var(--hri-on-navy-dim); }
.hri-sc-head .lvl{ font-size:.98rem; color:var(--hri-on-navy); }
.hri-sc-head .lvl b{ color:var(--hri-gold-bright); }

.hri-sc-rows{ display:flex; flex-direction:column; justify-content:center; gap:11px; }
.hri-sc-row{ display:grid; grid-template-columns:200px 1fr 34px; align-items:center; gap:14px; font-size:.92rem; color:var(--hri-on-navy); }
.hri-sc-row .bar{ height:6px; background:rgba(255,255,255,.13); border-radius:4px; overflow:hidden; }
.hri-sc-row .bar i{ display:block; height:100%; width:0; background:var(--hri-gold); border-radius:4px; transition:width 1s var(--hri-ease); }
.hri-sc-row b{ font-family:var(--hri-mono); font-size:.92rem; color:var(--hri-gold-bright); text-align:right; }
@media(max-width:620px){ .hri-sc-row{ grid-template-columns:1fr 30px; grid-template-areas:"n v" "b b"; }
  .hri-sc-row span{ grid-area:n; } .hri-sc-row b{ grid-area:v; } .hri-sc-row .bar{ grid-area:b; } }

.hri-sc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hri-line); }
@media(max-width:700px){ .hri-sc-grid{ grid-template-columns:1fr; } }
.hri-sc-panel{ background:#fff; padding:26px 30px; }
.hri-sc-panel.is-wide{ grid-column:1/-1; }
.hri-sc-panel h3{
  font-family:var(--hri-mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.09em; font-weight:600; color:var(--hri-navy-3); margin:0 0 13px;
}
.hri-sc-panel h3.is-good{ color:var(--hri-ok); }
.hri-sc-panel h3.is-risk{ color:var(--hri-warn); }
/* style.css sets `ul{ list-style:none }` sitewide, which strips the markers off
   these findings lists. Restored — a scorecard's strengths/risks read as a list. */
.hri-sc-panel ul{ margin:0; padding-left:20px; list-style:disc; font-size:.98rem; line-height:1.6; color:var(--hri-ink); }
.hri-sc-panel ul li::marker{ color:var(--hri-gold-deep); }
.hri-sc-panel li{ margin-bottom:7px; }
.hri-sc-panel p{ margin:0; font-size:1rem; line-height:1.65; color:var(--hri-ink); }
.hri-sc-foot{ text-align:center; padding:14px; font-family:var(--hri-mono); font-size:.78rem; color:var(--hri-muted); border-top:1px solid var(--hri-line); background:#fff; }

/* ============================================================
   04 — BUSINESS OUTCOMES
   ============================================================ */
.hri-outcomes{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }
@media(max-width:920px){ .hri-outcomes{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .hri-outcomes{ grid-template-columns:1fr; } }
.hri-outcome h3{ font-family:var(--hri-display); font-weight:700; color:var(--hri-navy); margin:0 0 7px; }   /* size from site .card h3 */
.hri-outcome p{ font-size:.98rem; line-height:1.55; color:var(--hri-muted); margin:0; }

/* ---- collective grid glow (gridglow.js/css, P9) ----
   Eight identical white cards read as a spreadsheet. One shared light source
   sweeping every border at once makes them read as a single premium set,
   rather than eight things that each light up on their own hover.

   COLLISION, resolved deliberately: gridglow paints its ring on `> *::after`
   and its interior wash on `> *::before`, and .card already uses BOTH — ::after
   for its cursor spotlight, ::before for its border-beam (motion.css 236/314,
   recoloured gold in motion-ckm.css 25/29). Only one rule can own a pseudo, so
   the per-card pair is switched off here and the collective pair replaces it.
   Nothing is actually lost: gridglow's ring is the border-beam idea and its
   wash is the spotlight idea, both now driven by one light across the whole
   grid. Same precedent as `.card.md-flip` in motion-ckm.css 184. Scoped to
   this grid only, so every other .card on the site is untouched. */
.hri-outcomes.md-gridglow{
  --gg-c:rgba(201,162,39,.85);   /* brand gold, not the library's default red */
  --gg-r:260px;
}
.hri-outcomes.md-gridglow > .card::before,
.hri-outcomes.md-gridglow > .card::after{ background:none; animation:none; }
/* gridglow is fine-pointer + full-tier only and is inert otherwise, so the
   card's own spotlight/beam are handed back on touch and reduced tiers
   rather than leaving those cards with no hover feedback at all. */
@media (hover:none), (pointer:coarse){
  .hri-outcomes.md-gridglow > .card::before{ background:conic-gradient(from var(--bb), transparent 0 82%, rgba(201,162,39,.85) 93%, transparent 100%); }
  .hri-outcomes.md-gridglow > .card::after{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.10), transparent 65%); }
}
/* the colour frame: a gold edge on the card actually under the cursor, over
   and above the glow travelling the whole grid */
.hri-outcome.card{ transition:transform .4s var(--hri-ease), box-shadow .4s var(--hri-ease), border-color .3s var(--hri-ease); }
.hri-outcome.card:hover{ border-color:rgba(201,162,39,.55); }

/* ============================================================
   05 — THE JOURNEY
   ============================================================ */
/* style.css resets `ul{list-style:none}` but not `ol`, so this ordered list was
   printing "1." "2." … beside each numbered dot. Reset explicitly. */
.hri-journey{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-top:46px;
  list-style:none; padding:0; }
.hri-step{ text-align:center; padding:0 8px; position:relative; }
.hri-step .dot{
  width:46px; height:46px; border-radius:50%; background:var(--hri-navy);
  color:var(--hri-gold-pale); font-family:var(--hri-mono); font-size:.92rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  position:relative; z-index:1;
}
.hri-step:last-child .dot{ background:var(--hri-gold); color:var(--hri-navy); }
.hri-step h3{ font-family:var(--hri-display); font-size:1.1rem; font-weight:600; color:var(--hri-navy); margin:0 0 4px; }
.hri-step p{ font-size:.82rem; line-height:1.45; color:var(--hri-muted); margin:0; }
/* the dot's own navy fill and the navy heading/muted body text assume a white
   section; this journey now also runs on-navy, where both would disappear */
.hri-sec.on-navy .hri-step .dot{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:var(--hri-gold-pale);
}
.hri-sec.on-navy .hri-step:last-child .dot{ background:var(--hri-gold); border-color:var(--hri-gold); color:var(--hri-navy); }
.hri-sec.on-navy .hri-step h3{ color:#fff; }

/* ---- the wires ----
   beam.js only offers red/green/grey, and its grey current (#98A1AE) sits so
   close to its own grey wire (#c7cdd6) that the travelling energy barely
   reads. Both are recoloured here: a near-invisible rail, with the moving
   current and its dot in brand gold so the eye follows the journey rather
   than the track. CSS `stroke`/`fill` beat the presentation attributes
   beam.js writes, so no change to the module is needed. */
.hri-journey .mb-wire{ stroke:rgba(255,255,255,.16); stroke-width:1.5; }
.hri-journey .mb-cur { stroke:var(--hri-gold-bright); }
.hri-journey .md-beams-svg circle{
  fill:var(--hri-gold-bright);
  filter:drop-shadow(0 0 4px rgba(227,199,102,.8));
}
.hri-sec.on-white .hri-journey .mb-wire{ stroke:rgba(8,26,51,.14); }

/* ---- the nodes ----
   The journey is a sequence, so the nodes light in order rather than all at
   once: one pulse travels 1 -> 7 and repeats. Lift and ring live in a SINGLE
   keyframe on purpose — two animations both writing transform would cancel
   each other (the library's transform-collision rule). Offset is --sd, not
   --d, which motion.js owns for entrance staggers. */
@keyframes hriStepPulse{
  0%, 60%, 100%{ transform:scale(1);    box-shadow:0 0 0 0  rgba(201,162,39,0); }
  70%          { transform:scale(1.13); box-shadow:0 0 0 8px rgba(201,162,39,.20); }
  84%          { transform:scale(1);    box-shadow:0 0 0 15px rgba(201,162,39,0); }
}
.hri-step .dot{
  animation:hriStepPulse 5.6s cubic-bezier(.22,.61,.2,1) infinite;
  animation-delay:var(--sd,0s);
}
/* The destination node keeps a permanent soft halo. It needs its own
   keyframe rather than a static box-shadow: the running animation writes
   box-shadow on every frame, so a static rule would simply be overwritten
   and the halo would never appear. This rests ON the halo instead of on 0,
   and the static rule below is what shows when the animation is switched
   off entirely. */
@keyframes hriStepPulseEnd{
  0%, 60%, 100%{ transform:scale(1);    box-shadow:0 0 0 5px  rgba(201,162,39,.16); }
  70%          { transform:scale(1.13); box-shadow:0 0 0 11px rgba(201,162,39,.32); }
  84%          { transform:scale(1);    box-shadow:0 0 0 18px rgba(201,162,39,0); }
}
.hri-step:last-child .dot{
  box-shadow:0 0 0 5px rgba(201,162,39,.16);
  animation-name:hriStepPulseEnd;
}

[data-motion="off"] .hri-step .dot{ animation:none; }
@media (prefers-reduced-motion:reduce){ .hri-step .dot{ animation:none; } }
.hri-sec.on-navy .hri-step p{ color:var(--hri-on-navy); }
@media(max-width:960px){
  .hri-journey{ grid-template-columns:1fr; gap:26px; }
  .hri-step{ display:grid; grid-template-columns:46px 1fr; gap:16px; text-align:left; align-items:start; }
  .hri-step .dot{ margin:0; }
}

/* ============================================================
   06 — SAMPLE REPORT
   ============================================================ */
.hri-report{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:32px; }
@media(max-width:920px){ .hri-report{ grid-template-columns:1fr; gap:40px; } }
.hri-stack{ position:relative; height:400px; }
.hri-pg{ position:absolute; width:280px; height:365px; border-radius:10px; left:50%; top:12px;
  box-shadow:0 24px 56px rgba(8,26,51,.20); transition:transform .4s var(--hri-ease); }
.hri-pg.c1{ background:linear-gradient(160deg, var(--hri-gold-bright) 0%, var(--hri-gold) 55%, var(--hri-gold-deep) 100%); border:1px solid rgba(255,255,255,.28);
  transform:translateX(-50%) rotate(-7deg); z-index:1; padding:26px; color:#fff; }
.hri-pg.c2{ background:#fff; border:1px solid var(--hri-line); transform:translateX(-42%) rotate(3deg); z-index:2; padding:22px; }
.hri-pg.c3{ background:#fff; border:1px solid var(--hri-line); transform:translateX(-58%) rotate(-2deg); z-index:3; padding:22px; }
/* The report mock is a scaled-down drawing of a document, not page text, so its
   sizes stay in fixed px — on the rem scale it would read as real copy. */
.hri-pg .tag{ font-family:var(--hri-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--hri-navy); opacity:.75; }
.hri-pg h3{ font-family:var(--hri-display); font-size:20px; font-weight:700; margin:56px 0 0; line-height:1.25; color:var(--hri-navy); }
.hri-pg .who{ position:absolute; bottom:22px; font-family:var(--hri-mono); font-size:9.5px; line-height:1.5; color:var(--hri-navy); opacity:.7; }
.hri-pg .mini{ font-family:var(--hri-mono); font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:var(--hri-gold-deep); margin-bottom:11px; }
.hri-pg .ln{ height:6px; background:var(--hri-line); border-radius:3px; margin-bottom:7px; }
.hri-pg .ln.w40{ width:40%; } .hri-pg .ln.w60{ width:60%; } .hri-pg .ln.w80{ width:80%; }
.hri-pg .big{ font-family:var(--hri-mono); font-size:27px; font-weight:600; color:var(--hri-gold-deep); margin:12px 0; }
@media(hover:hover){ .hri-stack:hover .hri-pg.c2{ transform:translateX(-38%) rotate(5deg); }
  .hri-stack:hover .hri-pg.c3{ transform:translateX(-62%) rotate(-4deg); } }
@media(max-width:520px){
  .hri-stack{ height:340px; }
  .hri-pg{ width:230px; height:305px; }
  .hri-pg h3{ font-size:17px; margin-top:44px; }
}

/* ============================================================
   07 — FAQ  (native <details>: keyboard + screen-reader for free,
   and no fixed max-height, so long answers can never clip)
   ============================================================ */
/* Styled to match the site's own FAQ (.faq-row/.faq-q/.faq-a in style.css, as
   used on Services) to the pixel: same hairline, same row padding, same type,
   same gold "+" that rotates to a cross. Only the MECHANISM differs, and
   deliberately so — the site's version hides every answer behind
   `max-height:0; overflow:hidden` and needs JS to reveal it, so with scripts
   blocked the answers are unreachable, and it measures the open height once
   on click, so a late font or a resize while open can clip the text. Native
   <details> needs no JS, gets keyboard and screen-reader semantics and
   find-in-page for free, and 0fr->1fr animates to true auto height, so an
   answer of any length can never clip. `name` gives the site's
   one-open-at-a-time behaviour natively, again with no JS. */
.hri-faq{ max-width:780px; margin:26px auto 0; }
.hri-faq details{ border-bottom:1px solid var(--grey-100, #EEF1F6); }
.hri-faq summary{
  list-style:none; cursor:pointer; position:relative; display:block;
  padding:1.4rem 3rem 1.4rem 0;
  font-size:1.05rem; font-weight:600; color:var(--navy-800, #0B2545);
}
.hri-faq summary::-webkit-details-marker{ display:none; }
.hri-faq summary::after{
  content:"+"; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-size:1.6rem; font-weight:400; color:var(--gold-500, #C9A227);
  transition:transform .3s var(--hri-ease);
}
.hri-faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.hri-faq summary:focus-visible{ outline:3px solid var(--hri-gold); outline-offset:2px; border-radius:6px; }
.hri-faq .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--hri-ease); }
.hri-faq details[open] .ans{ grid-template-rows:1fr; }
.hri-faq .ans > div{ overflow:hidden; }
.hri-faq .ans p{ margin:0; padding:0 0 1.4rem; color:var(--grey-600, #5A6678); max-width:70ch; }
/* the hairline, navy question text and grey answer text above are the site's
   own values, tuned for a white section; this FAQ runs on-navy, where all
   three would vanish */
.hri-sec.on-navy .hri-faq details{ border-bottom-color:rgba(255,255,255,.16); }
.hri-sec.on-navy .hri-faq summary{ color:#fff; }
.hri-sec.on-navy .hri-faq summary::after{ color:var(--hri-gold-bright); }
.hri-sec.on-navy .hri-faq .ans p{ color:var(--hri-on-navy); }

/* ============================================================
   FINAL CTA
   ============================================================ */
/* the section immediately before this can now be on-navy too (the alternation
   is set per-section in hri.php), so a hairline keeps the seam visible even
   when both sections share the same dark tone */
/* The closing invitation now sits on warm paper inside an engraved gold
   frame, rather than the navy gradient it used to carry. That flip means
   every colour in here had to be re-read for a light ground: the heading,
   the paragraph and the note were all white or pale blue and would have
   been invisible, and the second button was .btn-outline-light (a light
   hairline meant for navy) which is swapped in hri.php for its light-ground
   twin .btn-outline. The decorative .aur glow was also removed from this
   section — its navy blob would have shown as a dark smudge on cream.
   Side benefit: the FAQ above is navy, so this also removes the one
   dark-on-dark seam left in the page's light/dark alternation.

   background-size is 100% 100%, not cover, ON PURPOSE. The artwork is an
   ornamental BORDER: with `cover` a wide viewport crops the top and bottom
   rules straight off and the frame stops being a frame. Stretching keeps
   all four sides present at every width; the trade is that the corner
   flourishes compress vertically on very wide screens. Extra padding below
   lifts the section's own height so that compression stays modest. */
.hri-final{
  background:url("../assets/hri-cta-bg.jpg?v=1") center / 100% 100% no-repeat, var(--hri-paper);
  color:var(--hri-ink); text-align:center; padding:120px 0;
}
@media(max-width:700px){ .hri-final{ padding:80px 0; } }
.hri-final h2{ font-family:var(--hri-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.75rem); margin:0 0 14px; color:var(--hri-navy); text-wrap:balance; }
.hri-final p{ color:var(--hri-muted); max-width:56ch; margin:0 auto 30px; font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.6; }
.hri-final .hri-hero-ctas{ justify-content:center; }
/* .hri-hero-note is written for the navy banner (pale-blue body, pale-gold
   bold), so both need a light-ground reading here */
.hri-final .hri-hero-note{ margin-top:22px; color:var(--hri-muted); }
.hri-final .hri-hero-note b{ color:var(--hri-gold-deep); }

/* ---------- mobile sticky CTA ---------- */
.hri-sticky{ display:none; }
@media(max-width:700px){
  .hri-sticky{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--hri-navy); padding:12px 16px;
    box-shadow:0 -6px 20px rgba(0,0,0,.25);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .hri-sticky .btn{ flex:1; text-align:center; padding:14px 18px; }
  body.hri-page{ padding-bottom:78px; }
}

/* ============================================================
   REDUCED MOTION — project guardrail. The prototype animated
   unconditionally; here every entrance resolves to its end state.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hri-page *, .hri-page *::before, .hri-page *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hri-radar .area.draw{ stroke-dasharray:none; stroke-dashoffset:0; }
  .hri-sc-row .bar i{ transition:none; }
}