/* ==========================================================================
   CBC — ENTERPRISE SOLUTION HERO BANNERS  (production)

   The five enterprise solution pages under solutions/enterprise/ open on a
   light-grey hero band that carries an eyebrow, a bold one-line title, a
   subtitle and a flat line animation. This is the whole of that system.

   PROVENANCE — approved concept suite
     /home/user/workspace/cbc-enterprise-solution-heroes-v2  @ 25dda19
       assets/css/hero.css      frozen approved Strategy hero + figure 01
       assets/css/suite.css     hero typography, ink-edge alignment, the
                                Strategy transform-scale workaround
       assets/css/figures.css   generated figures + clocks, pages 02-05
   Derived once by tools/port_enterprise_heroes.py. THIS FILE is the source of
   truth from here on; the five solution pages are hand-authored, so nothing in
   rebuild.py generates or rewrites either this stylesheet or their heroes.

   WHAT IS DELIBERATELY NOT CARRIED OVER from the mockup: its own header, nav,
   footer, concept strip, concept switcher, inert links, global resets and
   generic selectors. The live header / nav / footer and everything below the
   hero are untouched.

   SCOPE. Everything is scoped to `.enthero`, a private root class on the hero
   <section>. The mockup used `.hero`, `.copy`, `.lede`, `.eyebrow`, `.band`,
   bare `h1` and bare `.s-*`; every one of those either already exists in
   site.css or is too generic to expose site-wide.

   HARD CONSTRAINTS HELD HERE
    band            #F8F8F8, full width, flush to the viewport top behind the
                     live 76px header, 556px desktop, 400px min-height at <= 900
     roles           eyebrow + animation rust #A64A40, title #000000,
                     subtitle slate-deep #4F5E61.  Slate, never navy.
     type            self-hosted Satoshi only: 500 eyebrow, 700 title,
                     300 subtitle. Title case as written, one rendered line.
     layout          inside the live .shell; equal halves; painted ink right
                     edge on the shell content right edge; both halves on one
                     vertical centre axis.
     mobile          breakpoint exactly 900. Figure hidden, copy full width.
     no backdrop-filter anywhere; no gradients; no navy; no external requests.
   ========================================================================== */

.enthero {
  /* Brand set. Locally scoped so the hero cannot be repainted by the site
     theme or by a future token rename, and so it cannot leak outward. */
  --rust: #a64a40;
  --rust-deep: #7f3831;
  --burgundy: #51241f;
  --ember: #c25a47;
  --slate: #66787c;
  --slate-deep: #4f5e61;
  --black: #000000;
  --white: #ffffff;
  --grey-band: #f8f8f8;

  --font-body: 'Satoshi', system-ui, sans-serif;

  /* Band geometry (approved). --gutter and --content-wide come from the live
     tokens.css, so the hero shares the site container exactly. */
  --eh-band-gap: 0px;
  --eh-band-h: 556px;

  /* Title type ramp, stated once as a variable so the statement head can do
     arithmetic with it (see the statement block's action alignment). The
     responsive steps override the variable, not the font-size declaration. */
  --eh-title-size: clamp(2.25rem, 3.9vw, 4rem);
  --eh-title-lh: 1.1;

  /* Eyebrow metrics, stated as variables for the same reason: the statement
     head reserves its lockup height from them, so the reservation and the
     rendered eyebrow can never disagree. */
  --eh-eyebrow-size: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem); /* --text-xs */
  --eh-eyebrow-lh: 1.32; /* --lh-snug */
  --eh-eyebrow-gap: 1rem; /* --space-4, matches .pagehead .eyebrow */

  /* Statement-head subtitle: the site's body face at pagehead-secondary size.
     Declared here so the head can align the action to the subtitle's own
     metrics (see the statement block). */
  /* Enlarged 2026-08-15 (approved): ~20px desktop / ~17px phone, up from
     18/16. The head's action alignment and the stacked band minimum are both
     computed from this variable, so they follow the ramp automatically. */
  --eh-subtitle-size: clamp(1.0625rem, 0.85rem + 0.75vw, 1.25rem);
  --eh-subtitle-lh: 1.5;
  --eh-subtitle-gap: 0.75rem; /* --space-3, title to subtitle */
  --eh-col-gap: 64px;

  /* Ink scale and alignment. Drawn ink height: 330px at 1920, 310px at 1512,
     276.8px at 1280, 240px at 1024. */
  --ink-h: clamp(240px, 93.2px + 14.34vw, 330px);
  --ink-bleed: 24px;
  --vb-w: 620; /* shared viewBox width  */
  --vb-h: 242; /* shared viewBox height */
  --ink-y0: 6; /* ink top, user units below the viewBox origin y=22 */
  --ink-hu: 230; /* ink height in user units — identical on all five pages */

  margin-top: var(--eh-band-gap);
  background: var(--grey-band);
  height: var(--eh-band-h);
  display: flex;
  align-items: center;
  /* The band is intentionally light in every theme, including OS dark mode and
     the site's own dark toggle: it is a brand surface, not a themed surface. */
  color-scheme: only light;
}

.enthero > .shell {
  width: 100%;
}

.enthero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* two equal halves */
  column-gap: var(--eh-col-gap);
  align-items: center; /* both halves share one centre axis */
}

.enthero__copy {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   HERO TYPOGRAPHY
   Roles are the live solution-pagehead roles with the approved light-band
   polarity: rust eyebrow, black Switzer title, black Satoshi subtitle.
   ------------------------------------------------------------------------ */

.enthero .enthero__eyebrow {
  display: block;
  margin: 0 0 var(--eh-eyebrow-gap);
  font-family: var(--font-body);
  font-size: var(--eh-eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.18em; /* --track-caps */
  line-height: var(--eh-eyebrow-lh);
  text-transform: uppercase;
  color: var(--rust); /* #A64A40 — 5.09:1 on the band */
}

.enthero .enthero__copy h1 {
  margin: 0;
  font-family: 'Switzer', 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  /* Pure vw middle term on purpose. The copy column is very nearly a fixed
     fraction of the viewport, so a pure-vw ramp holds a constant
     type-to-column ratio; a px intercept measured 43px past the column at
     1024 during the mockup round. */
  font-size: var(--eh-title-size);
  letter-spacing: -0.015em;
  line-height: var(--eh-title-lh);
  text-transform: none; /* title case exactly as written in the markup */
  color: var(--black); /* 18.72:1 on the band */
  white-space: nowrap; /* one rendered line is a hard requirement */
}

/* STATEMENT PAGE HEAD LOCKUP  (revised 2026-08-15)

   The head is now eyebrow + title + one-line subtitle, and the approved rule is
   that every official page title renders on ONE line in the side-by-side
   layout. Nothing is shortened and no type is reduced: the grid is sized to the
   content instead, and the layout stacks below 1024px (see the stacked block),
   which is the narrowest width where the longest title in the suite
   ("Project & Program Management") still fits beside the action with room to
   spare.

   The earlier two-line reservations (first on the title, then on the copy
   lockup) are gone: with one-line titles and one-line subtitles every head
   resolves to the same height by construction at these widths, so no reserved
   box is needed and there is nothing to bottom-fill. `max-width: 19ch` is gone
   for the same reason. The stacked block re-introduces a single band-level
   minimum, where titles are allowed to wrap. */
.enthero--statement .enthero__copy h1 {
  white-space: nowrap; /* the one-line requirement, stated once */
}

/* Title to subtitle: one token, every page, every viewport. The eyebrow keeps
   its own --eh-eyebrow-gap above the title. */
.enthero--statement .enthero__subtitle {
  margin: var(--eh-subtitle-gap) 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--eh-subtitle-size);
  font-weight: 300;
  line-height: var(--eh-subtitle-lh);
  /* White, deliberately secondary to the title on the rust surface. */
  color: rgb(255 255 255 / 0.86);
  white-space: nowrap;
}

.enthero .enthero__lede {
  margin: 1rem 0 0; /* --space-4, matches .pagehead__lede */
  /* Keep the desktop pagehead concise and consistently three lines while
     preserving a readable measure as the fluid type ramp grows. */
  max-width: 23em;
  font-family: var(--font-body);
  font-size: clamp(1.1875rem, 0.729rem + 0.717vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--black); /* #000000 — 19.79:1 on #F8F8F8 */
}

/* Page-specific measures preserve the same three-line desktop rhythm after
   the copy is tightened for clear three-line reading on phones. */
.enthero--strategy .enthero__lede {
  max-width: 20.5em;
}

.enthero--operations .enthero__lede {
  max-width: 19em;
}

.enthero--people .enthero__lede {
  max-width: 21em;
}

/* --------------------------------------------------------------------------
   DIAGRAM SCALE AND INK-EDGE ALIGNMENT

   All five figures share the viewBox "0 22 620 242" but paint a different
   sub-rectangle of it, so right-aligning the SVG box leaves a different
   amount of empty space on each page (30-90 user units apart). The measured
   per-page ink bounds are therefore used to size and offset the SVG so the
   PAINTED INK, not its container, lands on the shell content right edge.

     --ink-h  drives the drawn ink height; --k falls out as px per user unit,
              so all five pages scale by the same factor;
     .figure  is a clip window exactly the ink rectangle plus a symmetric
              --ink-bleed, which absorbs the half-stroke that paints outside
              the geometric edge and the in-cascade rise transforms (up to
              12 user units, ~17px at 1920);
     --ink-edge is half the stroke width of the rightmost painted element, so
              the OUTER EDGE OF THE PAINT rather than the geometry sits on the
              shell edge. Every stroke is non-scaling, so it is a constant px.

   No viewBox is changed, no geometry is moved, no keyframe is touched.
   The few px of clip box that sit outside the shell content edge land inside
   the shell's own gutter (35.8px at 1024, 48px from 1372 up), so they cannot
   cause document overflow.
   ------------------------------------------------------------------------ */

.enthero.enthero--strategy {
  --ink-x0: 170;
  --ink-w: 280;
  --ink-edge: 0.7px;
}

.enthero__figure {
  box-sizing: content-box;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: clip;
  contain: layout paint;
  clip-path: inset(0);
  justify-self: end;
  align-self: center;
  --k: calc(var(--ink-h) / var(--ink-hu)); /* px per user unit */
  width: calc(var(--ink-w) * var(--k) + 2 * var(--ink-bleed));
  height: calc(var(--ink-h) + 2 * var(--ink-bleed));
  margin-right: calc(var(--ink-edge) - var(--ink-bleed));
}

.enthero__figure svg {
  position: absolute;
  contain: strict;
  left: calc(var(--ink-bleed) - var(--ink-x0) * var(--k));
  top: calc(var(--ink-bleed) - var(--ink-y0) * var(--k));
  display: block;
  width: calc(var(--vb-w) * var(--k));
  height: calc(var(--vb-h) * var(--k));
  max-width: none;
  margin: 0;
}

/* Pages 02–05 use an ink-bound SVG viewport with two user units of safety
   on every side. The same geometry lands at the same pixels, but the hidden
   620-unit canvas no longer inflates the document's horizontal scroll area. */
.enthero:not(.enthero--strategy) .enthero__figure svg {
  left: calc(var(--ink-bleed) - 2 * var(--k));
  top: calc(var(--ink-bleed) - 2 * var(--k));
  width: calc(var(--ink-w) * var(--k) + 4 * var(--k));
  height: calc(var(--ink-hu) * var(--k) + 4 * var(--k));
}

/* One rust inside every animation. The figures' rust roles were authored
   against --rust-deep #7F3831; redefining it on the <svg> makes every
   descendant AND every @keyframes frame (custom properties in keyframes
   resolve against the animating element) paint #A64A40, the same rust the
   eyebrow uses, without editing a single colour literal. Ember #C25A47,
   burgundy #51241F, slate and white are untouched. */
.enthero__figure svg {
  --rust-deep: #a64a40;
}

/* --------------------------------------------------------------------------
   ENTERPRISE SOLUTION CTA

   This stylesheet is linked only by the enterprise solution pages and their
   isolated review copies. Keep their closing CTA on one literal rust surface;
   remove the shared Careers-style gradient, grain and corner-lighting layers.
   ------------------------------------------------------------------------ */

.cta {
  background: #a64a40;
}

.cta::before,
.cta::after {
  display: none;
}

/* --------------------------------------------------------------------------
   STRATEGY COLOUR-SURFACE MOCKUPS

   These two classes exist only on the isolated concept routes. They preserve
   the approved hero geometry, type ramp, container alignment and 11s clock.
   ------------------------------------------------------------------------ */

.enthero.enthero--theme-flat-rust,
.enthero.enthero--theme-careers-gradient {
  position: relative;
  overflow: hidden;
  color-scheme: only light;
}

.enthero.enthero--theme-flat-rust {
  background: #a64a40;
}

.enthero.enthero--theme-careers-gradient {
  background: var(--gradient-hero);
}

.enthero.enthero--theme-careers-gradient::before,
.enthero.enthero--theme-careers-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.enthero.enthero--theme-careers-gradient::before {
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.enthero.enthero--theme-careers-gradient::after {
  background:
    radial-gradient(120% 90% at 88% 12%, rgb(255 255 255 / 0.10), transparent 62%),
    radial-gradient(90% 80% at 4% 96%, rgb(0 0 0 / 0.26), transparent 66%);
}

.enthero.enthero--theme-flat-rust > .shell,
.enthero.enthero--theme-careers-gradient > .shell {
  position: relative;
  z-index: 1;
}

.enthero.enthero--theme-flat-rust .enthero__eyebrow,
.enthero.enthero--theme-flat-rust .enthero__copy h1,
.enthero.enthero--theme-flat-rust .enthero__lede,
.enthero.enthero--theme-careers-gradient .enthero__eyebrow,
.enthero.enthero--theme-careers-gradient .enthero__copy h1,
.enthero.enthero--theme-careers-gradient .enthero__lede {
  color: #ffffff;
}

/* On a rust surface a single-colour figure loses its internal hierarchy.
   These concept routes use four brand roles so the drawing remains legible:
   dark rust for module silhouettes, slate for connectors, light grey for the
   decision-field scaffold, and white for faces and registration marks. */
.enthero.enthero--theme-flat-rust .enthero__figure svg,
.enthero.enthero--theme-careers-gradient .enthero__figure svg {
  --rust-deep: #7f3831;
  --slate: #f1f2f2;
  --slate-deep: #4f5e61;
  --ember: #ffffff;
}

.enthero.enthero--theme-flat-rust .dg--pf .pf-box,
.enthero.enthero--theme-flat-rust .dg--pf .pf-cap,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-box,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-cap {
  fill: #ffffff;
}

.enthero.enthero--theme-flat-rust .dg--pf .pf-ghost,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-ghost {
  stroke: #f1f2f2;
  stroke-opacity: 0.52;
}

.enthero.enthero--theme-flat-rust .dg--pf .pf-conn,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-conn {
  stroke: #4f5e61;
  stroke-opacity: 1;
}

.enthero.enthero--theme-flat-rust .dg--pf .pf-wire,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-wire {
  stroke: #f1f2f2;
  stroke-opacity: 0.9;
}

.enthero.enthero--theme-flat-rust .dg--pf .pf-tick path,
.enthero.enthero--theme-careers-gradient .dg--pf .pf-tick path {
  stroke: #ffffff;
}

/* --------------------------------------------------------------------------
   PAGE 01 STRATEGY — scaled by an outer transform, never by resizing the SVG

   Strategy's clock draws with pathLength="1" + stroke-dasharray: 1 +
   vector-effect: non-scaling-stroke. Chromium resolves the dash pattern of a
   non-scaling stroke in the SVG VIEWPORT space while pathLength normalises the
   path to one user unit, so a "fully drawn" line only ever reaches 1/k of its
   length, where k = rendered width / viewBox width. Sizing this SVG up to the
   new ink height takes k from 1.0903 to 1.3479 and the drawn fraction from
   93.2% to 76.6% — measured: connectors stop short of the modules and the
   decision fields never close.

   So the SVG is left laid out at 676 x 263.844px — exactly what the approved
   page renders at 1512, k = 1.0903 — and the enlargement is done with a CSS
   transform, which is NOT part of the space the dash pattern resolves in.
   Pages 02-05 are immune because their figures use stroke-dasharray: 2.

   The transform does scale the painted stroke by --s, so every Strategy
   stroke width and the ghost dash pattern is divided by --s below, restoring
   the nominal painted weight. Nothing in the SVG changes.
   ------------------------------------------------------------------------ */

.enthero.enthero--strategy {
  --s0-w: 676px; /* approved layout width  */
  --s0-h: 263.844px; /* approved layout height */
  --s0-k: 1.09032258; /* 676 / 620 */
  --s0-ink-h: 250.774194px; /* 230 user units at --s0-k */
  --s0-ink-x0: 185.354839px; /* 170 user units at --s0-k */
  --s0-ink-y0: 6.541935px; /*   6 user units at --s0-k */
  /* unitless scale from the approved layout size to the target ink height */
  --s: tan(atan2(var(--ink-h), var(--s0-ink-h)));
}

.enthero.enthero--strategy .enthero__figure {
  position: relative;
}

.enthero.enthero--strategy .enthero__figure svg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s0-w);
  height: var(--s0-h);
  margin: 0;
  transform-origin: 0 0;
  transform: translate(
      calc(var(--ink-bleed) - var(--s0-ink-x0) * var(--s)),
      calc(var(--ink-bleed) - var(--s0-ink-y0) * var(--s))
    )
    scale(var(--s));
}

.enthero.enthero--strategy .dg--pf .pf-ghost {
  stroke-width: calc(1 / var(--s));
  stroke-dasharray: calc(3 / var(--s)) calc(4 / var(--s));
}
.enthero.enthero--strategy .dg--pf .pf-box {
  stroke-width: calc(1.4 / var(--s));
}
.enthero.enthero--strategy .dg--pf .pf-cap {
  stroke-width: calc(1 / var(--s));
}
.enthero.enthero--strategy .dg--pf .pf-conn {
  stroke-width: calc(1 / var(--s));
}
.enthero.enthero--strategy .dg--pf .pf-wire {
  stroke-width: calc(1 / var(--s));
}
.enthero.enthero--strategy .dg--pf .pf-tick path {
  stroke-width: calc(1.4 / var(--s));
}

/* Shared SVG base for the Strategy figure (from the mockup's `.dg` rules). */
.enthero .dg path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ==========================================================================
   FIGURE 01 STRATEGY -- lifted from the approved mockup's frozen hero.css,
   geometry, weights and the 11s clock unchanged. Selectors scoped.
   ========================================================================== */

.enthero.enthero--strategy .dg--pf { --loop: 11s; }

/* Constant line weight in device pixels at every width. Without this the whole
   drawing scales with its column and the 1px hairlines render at 0.72px at
   1024 and start to disappear. Measured column scale factors:
   1920 x1.161, 1512 x1.090, 1280 x0.908, 1024 x0.723. */
.enthero.enthero--strategy .dg--pf path, .enthero.enthero--strategy .dg--pf polygon, .enthero.enthero--strategy .dg--pf ellipse { vector-effect: non-scaling-stroke; }
.enthero.enthero--strategy .dg--pf path, .enthero.enthero--strategy .dg--pf polygon { fill: none; }

/* --- the quiet scaffold: on screen from the first painted frame ---------- */

.enthero.enthero--strategy .pf-ghost {
  stroke: var(--slate);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  stroke-opacity: 0.16;
}

/* --- 1. the six modules -------------------------------------------------- */

.enthero.enthero--strategy .pf-mod {
  opacity: 0;
  stroke-opacity: 0.65;
  transform: translateY(12px);
}
/* The module wall. Left open at the top so nothing is stroked across the
   mouth of the cylinder; the top face closes it. White filled, so a module
   sits over the scaffold rather than letting it show through. */
.enthero.enthero--strategy .dg--pf .pf-box { fill: var(--white); stroke: var(--rust-deep); stroke-width: 1.4; }

/* The top face. Same ellipse the lower edge is drawn on, so the two curves
   agree and the module reads as one round section. Lighter weight than the
   wall, which is what gives it depth without a gradient or a shadow. */
.enthero.enthero--strategy .dg--pf .pf-cap { fill: var(--white); stroke: var(--rust-deep); stroke-width: 1; }

/* --- 2. the connectors --------------------------------------------------- */

.enthero.enthero--strategy .pf-conn {
  stroke: var(--slate-deep);
  stroke-width: 1;
  stroke-opacity: 0.7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* --- 3. the decision fields ---------------------------------------------- */

.enthero.enthero--strategy .pf-wire {
  stroke: var(--slate-deep);
  stroke-width: 1;
  stroke-opacity: 0.7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* --- 4. the registration marks ------------------------------------------- */

.enthero.enthero--strategy .pf-tick { opacity: 0; }
.enthero.enthero--strategy .pf-tick path { stroke: var(--ember); stroke-width: 1.4; }

/* ==========================================================================
   One shared 11s clock. Every element has its own window; nothing appears or
   disappears at the same time as anything else, and every keyframe's 100%
   value equals its 0% value, so the loop boundary is a continuation rather
   than a snap.

   IN
      0.00 - 1.35   six modules arrive, 0.16s apart, 0.55s each
                    order L1 R1 L2 R2 L3 R3
      1.15 - 2.03   eight connectors draw in symmetrical left/right pairs
      2.15 - 3.20   decision field A is drawn, then field B
      3.35 - 4.06   the funded tier steps to full weight, 0.12s apart,
                    and the four tier caps go ember
      4.20 - 4.70   the two registration marks land
   HOLD
      4.70 - 5.90   1.20s of stillness: the resolved portfolio
   OUT (exact reverse order)
      5.90 - 6.40   the registration marks lift, B then A
      6.55 - 7.26   the tier releases, in reverse order of emphasis
      7.40 - 8.45   the decision fields retract, B then A
      8.55 - 9.43   the connectors retract, in reverse order of drawing
      9.55 - 10.90  the six modules leave, in exact reverse order of arrival
     10.90 - 11.00  the quiet scaffold, ready to restart

   In takes 4.06s, out takes 4.95s over the same number of beats, so the two
   halves run at the same calm pace.
   ========================================================================== */

.enthero.enthero--strategy .s-mod1 { animation: kMod1__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-mod2 { animation: kMod2__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-mod3 { animation: kMod3__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-mod4 { animation: kMod4__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-mod5 { animation: kMod5__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-mod6 { animation: kMod6__strategy var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.enthero.enthero--strategy .s-cap { animation: kCap__strategy   var(--loop) linear infinite; }
.enthero.enthero--strategy .s-conn11 { animation: kConnA1__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-conn12 { animation: kConnA2__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-conn21 { animation: kConnB1__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-conn22 { animation: kConnB2__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-wire1 { animation: kWireA__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-wire2 { animation: kWireB__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-tick1 { animation: kTickA__strategy var(--loop) linear infinite; }
.enthero.enthero--strategy .s-tick2 { animation: kTickB__strategy var(--loop) linear infinite; }

/* Each module carries its whole life in one keyframe set: it rises into place,
   waits, steps to full weight if it is in the funded tier, releases, and then
   leaves. The exit order is the exact reverse of the arrival order, which is
   why the six sets are written out rather than driven by one delay. */

@keyframes kMod1__strategy {   /* left, row 1 - first in, last out */
  0%              { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  5.00%           { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  30.45%          { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  33.64%, 62.82%  { opacity: 1; transform: translateY(0);    stroke-opacity: 1 }
  66.00%, 94.09%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  99.09%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}
@keyframes kMod2__strategy {   /* right, row 1 */
  0%, 1.45%       { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  6.45%, 31.55%   { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  34.73%, 61.73%  { opacity: 1; transform: translateY(0);    stroke-opacity: 1 }
  64.91%, 92.64%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  97.64%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}
@keyframes kMod3__strategy {   /* left, row 2 */
  0%, 2.91%       { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  7.91%, 32.64%   { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  35.82%, 60.64%  { opacity: 1; transform: translateY(0);    stroke-opacity: 1 }
  63.82%, 91.18%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  96.18%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}
@keyframes kMod4__strategy {   /* right, row 2 */
  0%, 4.36%       { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  9.36%, 33.73%   { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  36.91%, 59.55%  { opacity: 1; transform: translateY(0);    stroke-opacity: 1 }
  62.73%, 89.73%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  94.73%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}
@keyframes kMod5__strategy {   /* left, row 3 - stays quiet, stays on the board */
  0%, 5.82%       { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  10.82%, 88.27%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  93.27%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}
@keyframes kMod6__strategy {   /* right, row 3 - last in, first out */
  0%, 7.27%       { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
  12.27%, 86.82%  { opacity: 1; transform: translateY(0);    stroke-opacity: 0.65 }
  91.82%          { opacity: 0; transform: translateY(-10px);stroke-opacity: 0.65 }
  100%            { opacity: 0; transform: translateY(12px); stroke-opacity: 0.65 }
}

/* the four tier top faces go ember while the tier is at full weight */
@keyframes kCap__strategy {
  0%, 32%     { stroke: var(--rust-deep) }
  35.5%, 60%  { stroke: var(--ember) }
  64%, 100%   { stroke: var(--rust-deep) }
}

/* connectors, in symmetrical left/right pairs; out in reverse */
@keyframes kConnA1__strategy { 0%, 10.45% { stroke-dashoffset: 1 } 14.09%, 82.09% { stroke-dashoffset: 0 } 85.73%, 100% { stroke-dashoffset: 1 } }
@keyframes kConnA2__strategy { 0%, 11.82% { stroke-dashoffset: 1 } 15.45%, 80.73% { stroke-dashoffset: 0 } 84.36%, 100% { stroke-dashoffset: 1 } }
@keyframes kConnB1__strategy { 0%, 13.45% { stroke-dashoffset: 1 } 17.09%, 79.09% { stroke-dashoffset: 0 } 82.73%, 100% { stroke-dashoffset: 1 } }
@keyframes kConnB2__strategy { 0%, 14.82% { stroke-dashoffset: 1 } 18.45%, 77.73% { stroke-dashoffset: 0 } 81.36%, 100% { stroke-dashoffset: 1 } }

/* decision fields: A draws first and retracts last */
@keyframes kWireA__strategy { 0%, 19.55% { stroke-dashoffset: 1 } 26.82%, 69.55% { stroke-dashoffset: 0 } 76.82%, 100% { stroke-dashoffset: 1 } }
@keyframes kWireB__strategy { 0%, 21.82% { stroke-dashoffset: 1 } 29.09%, 67.27% { stroke-dashoffset: 0 } 74.55%, 100% { stroke-dashoffset: 1 } }

/* registration marks land last on the way in and lift first on the way out */
@keyframes kTickA__strategy { 0%, 38.18% { opacity: 0 } 40.91%, 55.45% { opacity: 1 } 58.18%, 100% { opacity: 0 } }
@keyframes kTickB__strategy { 0%, 40.00% { opacity: 0 } 42.73%, 53.64% { opacity: 1 } 56.36%, 100% { opacity: 0 } }

/* ---------- Reduced motion: the resolved outcome, held still ------------- */

/* ==========================================================================
   FIGURES 02-05 -- lifted from the approved mockup's generated figures.css.
   Timing, geometry and stroke hierarchy unchanged. Selectors and @keyframes
   names scoped per page.
   ========================================================================== */

/* ==========================================================================
   CBC ENTERPRISE HERO SUITE v2 — figures for pages 02-05.
   GENERATED BY build_pages.py. Do not hand-edit; edit the schedule in the
   matching section of build_pages.py and re-run it.

   Page 01 (Strategy) is not in this file. Its figure and its 11s clock live
   unchanged in assets/css/hero.css, exactly as approved.
   ========================================================================== */

/* Constant line weight in device pixels at every width: without this the
   1px hairlines render at 0.72px at 1024 and start to disappear. */
.enthero .dg--v2 path, .enthero .dg--v2 rect, .enthero .dg--v2 polygon, .enthero .dg--v2 line { vector-effect: non-scaling-stroke; }
.enthero .dg--v2 path, .enthero .dg--v2 rect, .enthero .dg--v2 polygon, .enthero .dg--v2 line { fill: none; }

.enthero .dg--v2 .v2-ghost {
  stroke: var(--slate);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  stroke-opacity: 0.22;
}
.enthero .dg--v2 .v2-struct { stroke: var(--slate-deep); stroke-width: 1; }
.enthero .dg--v2 .v2-active { stroke: var(--rust-deep);  stroke-width: 1.6; }
.enthero .dg--v2 .op-heavy { stroke-width: 2.2; }
.enthero .dg--v2 .v2-spine { stroke: var(--burgundy);   stroke-width: 1.5; }
.enthero .dg--v2 .v2-ember { stroke: var(--ember);      stroke-width: 1.5; }
.enthero .dg--v2 .v2-block { fill: var(--white); stroke: var(--rust-deep); stroke-width: 1.4; }
.enthero .dg--v2 .v2-regbox { fill: var(--white); stroke: var(--ember); stroke-width: 1.6; }

.enthero .dg--v2 .v2-draw { stroke-dasharray: 2; stroke-dashoffset: 2; }

/* every animated group starts from its pre-arrival state */
.enthero .dg--v2 .op-own, .enthero .dg--v2 .op-work, .enthero .dg--v2 .op-node, .enthero .dg--v2 .op-con,
.enthero .dg--v2 .tr-reg, .enthero .dg--v2 .im-dec, .enthero .dg--v2 .im-blk, .enthero .dg--v2 .im-exc, .enthero .dg--v2 .im-tick,
.enthero .dg--v2 .pp-role, .enthero .dg--v2 .pp-gap, .enthero .dg--v2 .pp-reg { opacity: 0; }

/* the four edges of the ring meet at right angles; square them off */
.enthero .dg--v2 .v2-draw { stroke-linecap: butt; }


/* ---------------------------------------------------------------------
   Ink bounds per page, in viewBox user units. suite.css turns these into
   the diagram scale and the ink-edge alignment. Measured, not guessed:
   see INK_BOUNDS in build_pages.py and qa/ink_bounds.mjs.
   ------------------------------------------------------------------ */
.enthero.enthero--operations { --ink-x0: 190; --ink-w: 240; --ink-edge: 0.7px; }
.enthero.enthero--transformation { --ink-x0: 160; --ink-w: 300; --ink-edge: 0.8px; }
.enthero.enthero--implementations { --ink-x0: 170; --ink-w: 280; --ink-edge: 0.8px; }
.enthero.enthero--people { --ink-x0: 176; --ink-w: 268; --ink-edge: 0.7px; }


/* --- operations: shared 13.8s clock ------------------------------ */
.enthero.enthero--operations .dg--v2 { --loop: 13.8s; }
.enthero.enthero--operations .s-own1 { animation: k_s_own1__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_own1__operations {
  0%, 0% { opacity: 0; transform: translateY(12px) }
  3.043%, 96.522% { opacity: 1; transform: translateY(0) }
  98.696% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--operations .s-own2 { animation: k_s_own2__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_own2__operations {
  0%, 1.449% { opacity: 0; transform: translateY(12px) }
  4.493%, 95.362% { opacity: 1; transform: translateY(0) }
  97.536% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--operations .s-own3 { animation: k_s_own3__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_own3__operations {
  0%, 2.899% { opacity: 0; transform: translateY(12px) }
  5.942%, 94.203% { opacity: 1; transform: translateY(0) }
  96.377% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--operations .s-lane1 { animation: k_s_lane1__operations var(--loop) linear infinite; }
@keyframes k_s_lane1__operations {
  0%, 5.217% { stroke-dashoffset: 2 }
  8.986%, 96.232% { stroke-dashoffset: 0 }
  98.696%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-lane3 { animation: k_s_lane3__operations var(--loop) linear infinite; }
@keyframes k_s_lane3__operations {
  0%, 6.812% { stroke-dashoffset: 2 }
  10.58%, 95.362% { stroke-dashoffset: 0 }
  97.826%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-lane2a { animation: k_s_lane2a__operations var(--loop) linear infinite; }
@keyframes k_s_lane2a__operations {
  0%, 8.406% { stroke-dashoffset: 2 }
  10.87%, 94.203% { stroke-dashoffset: 0 }
  96.667%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-work1 { animation: k_s_work1__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work1__operations {
  0% { opacity: 0; transform: translate(-26px, -19px) }
  11.739% { opacity: 0; transform: translate(-26px, -19px) }
  12.899% { opacity: 1; transform: translate(-26px, -19px) }
  15.725% { opacity: 1; transform: translate(0, 0) }
  90.87% { opacity: 1; transform: translate(0, 0) }
  93.043% { opacity: 1; transform: translate(-26px, -19px) }
  94.058% { opacity: 0; transform: translate(-26px, -19px) }
  100% { opacity: 0; transform: translate(-26px, -19px) }
}
.enthero.enthero--operations .s-work2 { animation: k_s_work2__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work2__operations {
  0% { opacity: 0; transform: translate(18px, 15px) }
  11.739% { opacity: 0; transform: translate(18px, 15px) }
  12.899% { opacity: 1; transform: translate(18px, 15px) }
  15.725% { opacity: 1; transform: translate(0, 0) }
  90.87% { opacity: 1; transform: translate(0, 0) }
  93.043% { opacity: 1; transform: translate(18px, 15px) }
  94.058% { opacity: 0; transform: translate(18px, 15px) }
  100% { opacity: 0; transform: translate(18px, 15px) }
}
.enthero.enthero--operations .s-work3 { animation: k_s_work3__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work3__operations {
  0% { opacity: 0; transform: translate(-14px, 21px) }
  13.913% { opacity: 0; transform: translate(-14px, 21px) }
  15.072% { opacity: 1; transform: translate(-14px, 21px) }
  17.899% { opacity: 1; transform: translate(0, 0) }
  89.13% { opacity: 1; transform: translate(0, 0) }
  91.304% { opacity: 1; transform: translate(-14px, 21px) }
  92.319% { opacity: 0; transform: translate(-14px, 21px) }
  100% { opacity: 0; transform: translate(-14px, 21px) }
}
.enthero.enthero--operations .s-work4 { animation: k_s_work4__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work4__operations {
  0% { opacity: 0; transform: translate(27px, -16px) }
  13.913% { opacity: 0; transform: translate(27px, -16px) }
  15.072% { opacity: 1; transform: translate(27px, -16px) }
  17.899% { opacity: 1; transform: translate(0, 0) }
  89.13% { opacity: 1; transform: translate(0, 0) }
  91.304% { opacity: 1; transform: translate(27px, -16px) }
  92.319% { opacity: 0; transform: translate(27px, -16px) }
  100% { opacity: 0; transform: translate(27px, -16px) }
}
.enthero.enthero--operations .s-work5 { animation: k_s_work5__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work5__operations {
  0% { opacity: 0; transform: translate(-22px, -13px) }
  16.087% { opacity: 0; transform: translate(-22px, -13px) }
  17.246% { opacity: 1; transform: translate(-22px, -13px) }
  20.072% { opacity: 1; transform: translate(0, 0) }
  87.391% { opacity: 1; transform: translate(0, 0) }
  89.565% { opacity: 1; transform: translate(-22px, -13px) }
  90.58% { opacity: 0; transform: translate(-22px, -13px) }
  100% { opacity: 0; transform: translate(-22px, -13px) }
}
.enthero.enthero--operations .s-work6 { animation: k_s_work6__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_work6__operations {
  0% { opacity: 0; transform: translate(14px, 22px) }
  16.087% { opacity: 0; transform: translate(14px, 22px) }
  17.246% { opacity: 1; transform: translate(14px, 22px) }
  20.072% { opacity: 1; transform: translate(0, 0) }
  87.391% { opacity: 1; transform: translate(0, 0) }
  89.565% { opacity: 1; transform: translate(14px, 22px) }
  90.58% { opacity: 0; transform: translate(14px, 22px) }
  100% { opacity: 0; transform: translate(14px, 22px) }
}
.enthero.enthero--operations .s-conbar { animation: k_s_conbar__operations var(--loop) linear infinite; }
@keyframes k_s_conbar__operations {
  0%, 21.014% { opacity: 0 }
  23.188%, 83.333% { opacity: 1 }
  85.217%, 100% { opacity: 0 }
}
.enthero.enthero--operations .s-bartop { animation: k_s_bartop__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_bartop__operations {
  0% { transform: translateY(0) }
  23.913% { transform: translateY(0) }
  27.174% { transform: translateY(-8px) }
  80.145% { transform: translateY(-8px) }
  83.043% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
.enthero.enthero--operations .s-barbot { animation: k_s_barbot__operations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_barbot__operations {
  0% { transform: translateY(0) }
  23.913% { transform: translateY(0) }
  27.174% { transform: translateY(8px) }
  80.145% { transform: translateY(8px) }
  83.043% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
.enthero.enthero--operations .s-lane2b { animation: k_s_lane2b__operations var(--loop) linear infinite; }
@keyframes k_s_lane2b__operations {
  0%, 27.681% { stroke-dashoffset: 2 }
  31.667%, 77.536% { stroke-dashoffset: 0 }
  81.159%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-spine { animation: k_s_spine__operations var(--loop) linear infinite; }
@keyframes k_s_spine__operations {
  0%, 32.246% { stroke-dashoffset: 2 }
  37.319%, 72.319% { stroke-dashoffset: 0 }
  77.101%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-node1 { animation: k_s_node1__operations var(--loop) linear infinite; }
@keyframes k_s_node1__operations {
  0%, 38.043% { opacity: 0 }
  40.217%, 69.71% { opacity: 1 }
  71.884%, 100% { opacity: 0 }
}
.enthero.enthero--operations .s-node2 { animation: k_s_node2__operations var(--loop) linear infinite; }
@keyframes k_s_node2__operations {
  0%, 39.13% { opacity: 0 }
  41.304%, 68.623% { opacity: 1 }
  70.797%, 100% { opacity: 0 }
}
.enthero.enthero--operations .s-node3 { animation: k_s_node3__operations var(--loop) linear infinite; }
@keyframes k_s_node3__operations {
  0%, 40.217% { opacity: 0 }
  42.391%, 67.536% { opacity: 1 }
  69.71%, 100% { opacity: 0 }
}
.enthero.enthero--operations .s-colll { animation: k_s_colll__operations var(--loop) linear infinite; }
@keyframes k_s_colll__operations {
  0%, 43.116% { stroke-dashoffset: 2 }
  46.739%, 63.188% { stroke-dashoffset: 0 }
  66.812%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--operations .s-nodebox { animation: k_s_nodebox__operations var(--loop) linear infinite; }
@keyframes k_s_nodebox__operations {
  0%, 47.971% { stroke: var(--rust-deep) }
  50.145%, 60.29% { stroke: var(--ember) }
  62.319%, 100% { stroke: var(--rust-deep) }
}

@media (prefers-reduced-motion: reduce) {
  .enthero.enthero--operations .op-own, .enthero.enthero--operations .op-work, .enthero.enthero--operations .op-node,
  .enthero.enthero--operations .op-con { opacity: 1; transform: none; }
  .enthero.enthero--operations .v2-draw { stroke-dashoffset: 0; }
  .enthero.enthero--operations .s-bartop { transform: translateY(-8px); }
  .enthero.enthero--operations .s-barbot { transform: translateY(8px); }
  .enthero.enthero--operations .op-nodebox { stroke: var(--ember); }
}


/* --- transformation: shared 13.2s clock ------------------------------ */
.enthero.enthero--transformation .dg--v2 { --loop: 13.2s; }
.enthero.enthero--transformation .s-cur { animation: k_s_cur__transformation var(--loop) linear infinite; }
@keyframes k_s_cur__transformation {
  0%, 0% { stroke-dashoffset: 2 }
  6.439%, 95.076% { stroke-dashoffset: 0 }
  98.712%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-cdiv1 { animation: k_s_cdiv1__transformation var(--loop) linear infinite; }
@keyframes k_s_cdiv1__transformation {
  0%, 6.818% { stroke-dashoffset: 2 }
  9.47%, 92.803% { stroke-dashoffset: 0 }
  94.621%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-cdiv2 { animation: k_s_cdiv2__transformation var(--loop) linear infinite; }
@keyframes k_s_cdiv2__transformation {
  0%, 8.182% { stroke-dashoffset: 2 }
  10.833%, 91.667% { stroke-dashoffset: 0 }
  93.485%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-tgt { animation: k_s_tgt__transformation var(--loop) linear infinite; }
@keyframes k_s_tgt__transformation {
  0%, 9.848% { stroke-dashoffset: 2 }
  16.288%, 87.5% { stroke-dashoffset: 0 }
  92.803%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-keep { animation: k_s_keep__transformation var(--loop) linear infinite; }
@keyframes k_s_keep__transformation {
  0%, 16.667% { stroke-dashoffset: 2 }
  23.864%, 83.712% { stroke-dashoffset: 0 }
  89.167%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-datum1 { animation: k_s_datum1__transformation var(--loop) linear infinite; }
@keyframes k_s_datum1__transformation {
  0%, 24.242% { stroke-dashoffset: 2 }
  27.652%, 81.818% { stroke-dashoffset: 0 }
  84.697%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-datum2 { animation: k_s_datum2__transformation var(--loop) linear infinite; }
@keyframes k_s_datum2__transformation {
  0%, 26.894% { stroke-dashoffset: 2 }
  30.303%, 80.303% { stroke-dashoffset: 0 }
  83.182%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-patha { animation: k_s_patha__transformation var(--loop) linear infinite; }
@keyframes k_s_patha__transformation {
  0%, 31.061% { stroke-dashoffset: 2 }
  37.879%, 76.515% { stroke-dashoffset: 0 }
  82.197%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-pathc { animation: k_s_pathc__transformation var(--loop) linear infinite; }
@keyframes k_s_pathc__transformation {
  0%, 38.636% { stroke-dashoffset: 2 }
  45.455%, 72.348% { stroke-dashoffset: 0 }
  78.03%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-tdiv1 { animation: k_s_tdiv1__transformation var(--loop) linear infinite; }
@keyframes k_s_tdiv1__transformation {
  0%, 46.97% { stroke-dashoffset: 2 }
  49.394%, 69.697% { stroke-dashoffset: 0 }
  71.818%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-tdiv2 { animation: k_s_tdiv2__transformation var(--loop) linear infinite; }
@keyframes k_s_tdiv2__transformation {
  0%, 48.182% { stroke-dashoffset: 2 }
  50.606%, 68.561% { stroke-dashoffset: 0 }
  70.682%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--transformation .s-reg { animation: k_s_reg__transformation var(--loop) linear infinite; }
@keyframes k_s_reg__transformation {
  0%, 52.652% { opacity: 0 }
  55.303%, 65.909% { opacity: 1 }
  68.182%, 100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .enthero.enthero--transformation .v2-draw { stroke-dashoffset: 0; }
  .enthero.enthero--transformation .tr-reg { opacity: 1; }
}


/* --- implementations: shared 13.9s clock ------------------------------ */
.enthero.enthero--implementations .dg--v2 { --loop: 13.9s; }
.enthero.enthero--implementations .s-gate1 { animation: k_s_gate1__implementations var(--loop) linear infinite; }
@keyframes k_s_gate1__implementations {
  0%, 0% { stroke-dashoffset: 2 }
  3.741%, 94.245% { stroke-dashoffset: 0 }
  97.122%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-gate2 { animation: k_s_gate2__implementations var(--loop) linear infinite; }
@keyframes k_s_gate2__implementations {
  0%, 1.439% { stroke-dashoffset: 2 }
  5.18%, 95.108% { stroke-dashoffset: 0 }
  97.986%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-gate3 { animation: k_s_gate3__implementations var(--loop) linear infinite; }
@keyframes k_s_gate3__implementations {
  0%, 2.878% { stroke-dashoffset: 2 }
  6.619%, 95.971% { stroke-dashoffset: 0 }
  98.849%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-frame { animation: k_s_frame__implementations var(--loop) linear infinite; }
@keyframes k_s_frame__implementations {
  0%, 7.554% { stroke-dashoffset: 2 }
  13.309%, 89.568% { stroke-dashoffset: 0 }
  93.885%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-fdiv1 { animation: k_s_fdiv1__implementations var(--loop) linear infinite; }
@keyframes k_s_fdiv1__implementations {
  0%, 14.029% { stroke-dashoffset: 2 }
  15.899%, 88.489% { stroke-dashoffset: 0 }
  90.216%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-fdiv2 { animation: k_s_fdiv2__implementations var(--loop) linear infinite; }
@keyframes k_s_fdiv2__implementations {
  0%, 14.892% { stroke-dashoffset: 2 }
  16.763%, 87.77% { stroke-dashoffset: 0 }
  89.496%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-fdiv3 { animation: k_s_fdiv3__implementations var(--loop) linear infinite; }
@keyframes k_s_fdiv3__implementations {
  0%, 15.755% { stroke-dashoffset: 2 }
  17.626%, 87.05% { stroke-dashoffset: 0 }
  88.777%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-dec1 { animation: k_s_dec1__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_dec1__implementations {
  0%, 17.266% { opacity: 0; transform: translateY(-12px) }
  19.137%, 84.46% { opacity: 1; transform: translateY(0) }
  86.331% { opacity: 0; transform: translateY(-12px) }
  100% { opacity: 0; transform: translateY(-12px) }
}
.enthero.enthero--implementations .s-dec2 { animation: k_s_dec2__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_dec2__implementations {
  0%, 18.129% { opacity: 0; transform: translateY(-12px) }
  20%, 83.525% { opacity: 1; transform: translateY(0) }
  85.396% { opacity: 0; transform: translateY(-12px) }
  100% { opacity: 0; transform: translateY(-12px) }
}
.enthero.enthero--implementations .s-dec3 { animation: k_s_dec3__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_dec3__implementations {
  0%, 19.281% { opacity: 0; transform: translateY(-12px) }
  21.151%, 82.59% { opacity: 1; transform: translateY(0) }
  84.46% { opacity: 0; transform: translateY(-12px) }
  100% { opacity: 0; transform: translateY(-12px) }
}
.enthero.enthero--implementations .s-dec4 { animation: k_s_dec4__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_dec4__implementations {
  0%, 20.144% { opacity: 0; transform: translateY(-12px) }
  22.014%, 81.655% { opacity: 1; transform: translateY(0) }
  83.525% { opacity: 0; transform: translateY(-12px) }
  100% { opacity: 0; transform: translateY(-12px) }
}
.enthero.enthero--implementations .s-run1 { animation: k_s_run1__implementations var(--loop) linear infinite; }
@keyframes k_s_run1__implementations {
  0%, 22.662% { stroke-dashoffset: 2 }
  28.777%, 75.899% { stroke-dashoffset: 0 }
  79.856%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-run2 { animation: k_s_run2__implementations var(--loop) linear infinite; }
@keyframes k_s_run2__implementations {
  0%, 24.82% { stroke-dashoffset: 2 }
  30.935%, 73.741% { stroke-dashoffset: 0 }
  77.698%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-run4 { animation: k_s_run4__implementations var(--loop) linear infinite; }
@keyframes k_s_run4__implementations {
  0%, 26.978% { stroke-dashoffset: 2 }
  33.094%, 71.583% { stroke-dashoffset: 0 }
  75.54%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-blk1 { animation: k_s_blk1__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_blk1__implementations {
  0%, 29.496% { opacity: 0; transform: translateY(-14px) }
  31.655%, 70.504% { opacity: 1; transform: translateY(0) }
  72.662% { opacity: 0; transform: translateY(-14px) }
  100% { opacity: 0; transform: translateY(-14px) }
}
.enthero.enthero--implementations .s-blk2 { animation: k_s_blk2__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_blk2__implementations {
  0%, 31.655% { opacity: 0; transform: translateY(-14px) }
  33.813%, 69.065% { opacity: 1; transform: translateY(0) }
  71.223% { opacity: 0; transform: translateY(-14px) }
  100% { opacity: 0; transform: translateY(-14px) }
}
.enthero.enthero--implementations .s-blk4 { animation: k_s_blk4__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_blk4__implementations {
  0%, 33.813% { opacity: 0; transform: translateY(-14px) }
  35.971%, 67.626% { opacity: 1; transform: translateY(0) }
  69.784% { opacity: 0; transform: translateY(-14px) }
  100% { opacity: 0; transform: translateY(-14px) }
}
.enthero.enthero--implementations .s-run3a { animation: k_s_run3a__implementations var(--loop) linear infinite; }
@keyframes k_s_run3a__implementations {
  0%, 29.137% { stroke-dashoffset: 2 }
  32.374%, 78.058% { stroke-dashoffset: 0 }
  80.935%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-exc { animation: k_s_exc__implementations var(--loop) linear infinite; }
@keyframes k_s_exc__implementations {
  0%, 32.734% { opacity: 0 }
  34.46%, 38.129% { opacity: 1 }
  40%, 100% { opacity: 0 }
}
.enthero.enthero--implementations .s-run3b { animation: k_s_run3b__implementations var(--loop) linear infinite; }
@keyframes k_s_run3b__implementations {
  0%, 38.489% { stroke-dashoffset: 2 }
  42.446%, 66.187% { stroke-dashoffset: 0 }
  69.424%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--implementations .s-blk3 { animation: k_s_blk3__implementations var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_blk3__implementations {
  0%, 42.806% { opacity: 0; transform: translateY(-14px) }
  44.964%, 64.388% { opacity: 1; transform: translateY(0) }
  66.547% { opacity: 0; transform: translateY(-14px) }
  100% { opacity: 0; transform: translateY(-14px) }
}
.enthero.enthero--implementations .s-ctick1 { animation: k_s_ctick1__implementations var(--loop) linear infinite; }
@keyframes k_s_ctick1__implementations {
  0%, 46.763% { opacity: 0 }
  48.345%, 60.576% { opacity: 1 }
  62.158%, 100% { opacity: 0 }
}
.enthero.enthero--implementations .s-ctick2 { animation: k_s_ctick2__implementations var(--loop) linear infinite; }
@keyframes k_s_ctick2__implementations {
  0%, 47.482% { opacity: 0 }
  49.065%, 61.223% { opacity: 1 }
  62.806%, 100% { opacity: 0 }
}
.enthero.enthero--implementations .s-ctick3 { animation: k_s_ctick3__implementations var(--loop) linear infinite; }
@keyframes k_s_ctick3__implementations {
  0%, 48.201% { opacity: 0 }
  49.784%, 61.871% { opacity: 1 }
  63.453%, 100% { opacity: 0 }
}
.enthero.enthero--implementations .s-ctick4 { animation: k_s_ctick4__implementations var(--loop) linear infinite; }
@keyframes k_s_ctick4__implementations {
  0%, 48.921% { opacity: 0 }
  50.504%, 62.518% { opacity: 1 }
  64.101%, 100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .enthero.enthero--implementations .v2-draw { stroke-dashoffset: 0; }
  .enthero.enthero--implementations .im-dec, .enthero.enthero--implementations .im-blk,
  .enthero.enthero--implementations .im-tick { opacity: 1; transform: none; }
  .enthero.enthero--implementations .im-exc { opacity: 0; }
}


/* --- people: shared 12.0s clock ------------------------------ */
.enthero.enthero--people .dg--v2 { --loop: 12s; }
.enthero.enthero--people .s-role1 { animation: k_s_role1__people var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_role1__people {
  0%, 0% { opacity: 0; transform: translateY(12px) }
  3.667%, 95% { opacity: 1; transform: translateY(0) }
  98.5% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--people .s-role2 { animation: k_s_role2__people var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_role2__people {
  0%, 1.833% { opacity: 0; transform: translateY(12px) }
  5.5%, 93.333% { opacity: 1; transform: translateY(0) }
  96.833% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--people .s-role3 { animation: k_s_role3__people var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_role3__people {
  0%, 3.667% { opacity: 0; transform: translateY(12px) }
  7.333%, 91.667% { opacity: 1; transform: translateY(0) }
  95.167% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--people .s-role4 { animation: k_s_role4__people var(--loop) cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes k_s_role4__people {
  0%, 5.5% { opacity: 0; transform: translateY(12px) }
  9.167%, 90% { opacity: 1; transform: translateY(0) }
  93.5% { opacity: 0; transform: translateY(-10px) }
  100% { opacity: 0; transform: translateY(12px) }
}
.enthero.enthero--people .s-edge1 { animation: k_s_edge1__people var(--loop) linear infinite; }
@keyframes k_s_edge1__people {
  0%, 10% { stroke-dashoffset: 2 }
  14.167%, 83.833% { stroke-dashoffset: 0 }
  87.667%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-edge2 { animation: k_s_edge2__people var(--loop) linear infinite; }
@keyframes k_s_edge2__people {
  0%, 11.833% { stroke-dashoffset: 2 }
  16.417%, 82% { stroke-dashoffset: 0 }
  86.167%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-edge3 { animation: k_s_edge3__people var(--loop) linear infinite; }
@keyframes k_s_edge3__people {
  0%, 14% { stroke-dashoffset: 2 }
  18.167%, 80.167% { stroke-dashoffset: 0 }
  84%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-edge4 { animation: k_s_edge4__people var(--loop) linear infinite; }
@keyframes k_s_edge4__people {
  0%, 15.833% { stroke-dashoffset: 2 }
  20.417%, 78.333% { stroke-dashoffset: 0 }
  82.5%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-bar1 { animation: k_s_bar1__people var(--loop) linear infinite; }
@keyframes k_s_bar1__people {
  0%, 21.833% { stroke-dashoffset: 2 }
  24.167%, 75.833% { stroke-dashoffset: 0 }
  77.833%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-bar2 { animation: k_s_bar2__people var(--loop) linear infinite; }
@keyframes k_s_bar2__people {
  0%, 23% { stroke-dashoffset: 2 }
  25.333%, 75% { stroke-dashoffset: 0 }
  77%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-bar3 { animation: k_s_bar3__people var(--loop) linear infinite; }
@keyframes k_s_bar3__people {
  0%, 24.167% { stroke-dashoffset: 2 }
  26.5%, 74.167% { stroke-dashoffset: 0 }
  76.167%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-bar4 { animation: k_s_bar4__people var(--loop) linear infinite; }
@keyframes k_s_bar4__people {
  0%, 25.333% { stroke-dashoffset: 2 }
  27.667%, 73.333% { stroke-dashoffset: 0 }
  75.333%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-raila { animation: k_s_raila__people var(--loop) linear infinite; }
@keyframes k_s_raila__people {
  0%, 30.167% { stroke-dashoffset: 2 }
  34.75%, 71.25% { stroke-dashoffset: 0 }
  75.583%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-railb { animation: k_s_railb__people var(--loop) linear infinite; }
@keyframes k_s_railb__people {
  0%, 34.5% { stroke-dashoffset: 2 }
  37.417%, 69.167% { stroke-dashoffset: 0 }
  72.083%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-gapmark { animation: k_s_gapmark__people var(--loop) linear infinite; }
@keyframes k_s_gapmark__people {
  0%, 38.167% { opacity: 0 }
  40.667%, 46% { opacity: 1 }
  48.5%, 100% { opacity: 0 }
}
.enthero.enthero--people .s-railgap { animation: k_s_railgap__people var(--loop) linear infinite; }
@keyframes k_s_railgap__people {
  0%, 41.833% { stroke-dashoffset: 2 }
  45.583%, 66.25% { stroke-dashoffset: 0 }
  69.75%, 100% { stroke-dashoffset: 2 }
}
.enthero.enthero--people .s-reg { animation: k_s_reg__people var(--loop) linear infinite; }
@keyframes k_s_reg__people {
  0%, 49% { opacity: 0 }
  51.667%, 62.917% { opacity: 1 }
  65.417%, 100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .enthero.enthero--people .v2-draw { stroke-dashoffset: 0; }
  .enthero.enthero--people .pp-role { opacity: 1; transform: none; }
  .enthero.enthero--people .pp-reg { opacity: 1; }
  .enthero.enthero--people .pp-gap { opacity: 0; }
}

/* ==========================================================================
   REDUCED MOTION — page 01 Strategy

   Pages 02-05 carry their own resolved-state blocks immediately above, emitted
   with their figures. This is the same treatment for Strategy, taken from the
   approved hero.css. The `animation: none` is scoped to the hero subtree: the
   mockup could use a bare `*` selector because it was a standalone page, but
   the production site has its own motion elsewhere that this stylesheet has no
   business switching off.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .enthero *,
  .enthero *::before,
  .enthero *::after {
    animation: none !important;
    transition: none !important;
  }

  .enthero.enthero--strategy .pf-mod {
    opacity: 1;
    transform: none;
    stroke-opacity: 0.65;
  }
  .enthero.enthero--strategy .s-mod1,
  .enthero.enthero--strategy .s-mod2,
  .enthero.enthero--strategy .s-mod3,
  .enthero.enthero--strategy .s-mod4 {
    stroke-opacity: 1;
  }
  /* specificity has to beat .enthero.enthero--strategy .dg--pf .pf-cap */
  .enthero.enthero--strategy .dg--pf .s-cap {
    stroke: var(--ember);
  }
  .enthero.enthero--strategy .pf-conn {
    stroke-dashoffset: 0;
  }
  .enthero.enthero--strategy .pf-wire {
    stroke-dashoffset: 0;
  }
  .enthero.enthero--strategy .pf-tick {
    opacity: 1;
  }
}

/* ==========================================================================
   RESPONSIVE. The mobile breakpoint is exactly 900, matching the site nav.

   Below 900 the figure is hidden and the copy takes the full shell width, the
   band becomes content-led (400px is a floor, never a ceiling, so nothing can
   clip) and the type is sized on its own gentler ramp rather than carrying the
   desktop ramp down into a 400px band.
   ========================================================================== */

@media (max-width: 900px) {
  .enthero {
    --eh-band-gap: 0px;
    height: auto;
    min-height: 400px;
    padding-block: 40px;
  }

  .enthero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enthero__figure {
    display: none;
  }

  .enthero .enthero__lede {
    max-width: 21em;
    font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  }

  .enthero {
    --eh-title-size: clamp(2.125rem, 1.55rem + 2.3vw, 2.75rem);
  }
}

@media (max-width: 480px) {

  /* At phone width the full natural "Organizational Performance" needs a 27px
     shared size to stay on one line. It is applied to every hero title so the
     page-to-page scale stays consistent rather than singling that page out. */
  .enthero {
    --eh-title-size: 1.6875rem;
  }

  .enthero .enthero__lede {
    max-width: none;
    font-size: 1rem;
    line-height: 1.55;
  }
}

/* ==========================================================================
   EDITORIAL PHOTO HEADS

   About, Careers, Contact and the Insights index use compact edge-to-edge
   photographic bands. Each page owns its image and focal position; this shared
   geometry keeps the four banners equal and centers the copy vertically. The
   bands begin immediately below the fixed opaque header.
   ========================================================================== */

:is(
  .enthero--about,
  .enthero--careers,
  .enthero--contact,
  .enthero--insights
) {
  height: clamp(320px, 30vw, 460px);
  min-height: 0;
  margin-top: var(--header-height);
  padding-block: 0;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
}

:is(
  .enthero--about,
  .enthero--careers,
  .enthero--contact,
  .enthero--insights
) > .shell {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
}

:is(
  .enthero--about,
  .enthero--careers,
  .enthero--contact,
  .enthero--insights
) .enthero__grid {
  width: 100%;
}

@media (max-width: 600px) {
  :is(
    .enthero--about,
    .enthero--careers,
    .enthero--contact,
    .enthero--insights
  ) {
    height: 280px;
  }
}

/* ==========================================================================
   STATEMENT PAGE HEAD  (.enthero--statement)

   Approved 2026-08-15 for solutions/enterprise/strategy-portfolio-management.
   A typographic-only enterprise page head: eyebrow, page title and one
   outlined action on the flat rust surface, closed by a single slate line.
   There is deliberately no figure, image, diagram, pattern or gradient, so the
   band is sized by its own content instead of the shared --eh-band-h diagram
   geometry, and it carries no --shm / --iso figure classes.

   The rust surface, the white eyebrow / title ink and the `overflow: hidden`
   containment all come from .enthero--theme-flat-rust above; the action is the
   site's own .btn--inverse-ghost (site.css), the outlined button the styleguide
   already prescribes for rust bands. Only the band geometry, the two-part
   lockup grid, the closing line and the on-rust focus ring are declared here.

   Selectors are compounded on .enthero so they beat the shared <= 900px
   `.enthero { min-height: 400px; padding-block: 40px }` rule on specificity
   rather than on source order.
   ========================================================================== */

.enthero.enthero--statement {
  /* Keep the complete lockup visible through a normal first wheel step beneath
     the fixed header. This is shared by every solution and industry page. */
  --eh-scroll-cushion: var(--space-16);
  display: block;
  height: auto;
  min-height: 0;
  padding-block: 0;
}

/* The band's breathing room lives on the shell, so the closing line can own
   the band's actual bottom edge with nothing between it and the surface. */
.enthero.enthero--statement > .shell {
  /* The surface starts behind the transparent fixed header; the lockup begins
     below it with one wheel-step of reserve, so the complete lockup remains
     visible after the visitor begins to scroll. */
  padding-top: calc(
    var(--header-height) + var(--eh-scroll-cushion) +
      clamp(var(--space-3), 2vw, var(--space-8))
  );
  padding-bottom: calc(clamp(40px, 4vw, 64px) + var(--space-4));
}

/* Lockup left, action right, both settled on the lockup's bottom edge.
   Both columns are content-sized so the title column can take the width its
   one-line title needs; `space-between` keeps the action on the shell's right
   edge, and the gap is the minimum breathing room between them. */
.enthero--statement .enthero__grid {
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: space-between;
  column-gap: clamp(var(--space-8), 3vw, var(--space-12));
  align-items: end;
}

/* The action column holds one standalone button. Supporting copy above it was
   tried and withdrawn, so the column is left as a plain block that shrink-wraps
   the button; `align-items: end` on the grid bottom-aligns it to the lockup.

   LITERAL BOTTOM ALIGNMENT (revised 2026-08-15)
   The lockup's last line is now the subtitle, so the action is levelled with
   the SUBTITLE's visible bottom rather than the title's. `align-items: end`
   puts the pill on the subtitle's box bottom; the subtitle's line box is taller
   than its glyph box (Satoshi's font box is about 1.2em against the 1.5
   line-height), so the rendered text stops (line-height - fontbox) / 2 above
   that edge and the action is lifted by exactly that half-leading. It is a
   transform, so it changes nothing in layout and the band height is untouched.
   Released in the stacked layout, where the action shares no edge with the
   lockup. */
.enthero--statement .enthero__act {
  padding-bottom: 0;
  transform: translateY(calc(-0.15 * var(--eh-subtitle-size)));
}

/* The one graphic device in the band: a single slate line closing the rust
   surface and seaming it to the first section below. */
.enthero--statement .enthero__rule {
  height: 6px;
  background: var(--slate);
}

/* ACTION
   The approved treatment is a slim outlined pill, not a large squared button:
   at this size it reads as an invitation beside the title instead of competing
   with it. Shape comes from .btn--pill in site.css; the metrics below trim the
   component to the approved proportions and set it in the eyebrow face so the
   action and the eyebrow share one voice.

   The same block also serves `.cta__actions--pill`, the opt-in hook on this
   page's closing CTA band, so the page opens and closes on the identical
   control. Declaring both selectors together is deliberate: the two cannot
   drift apart. `.cta__actions--pill` is opt-in per page and is now carried by
   every solution and industry page's closing CTA band, which is what keeps the
   two page families on one control system. */
.enthero--statement .enthero__act .btn,
.cta__actions.cta__actions--pill .btn {
  min-height: 44px; /* pointer target floor, kept even as the type shrinks */
  gap: var(--space-3);
  padding: 10px 20px;
  font-family: var(--font-eyebrow);
  font-size: 0.82rem;
  letter-spacing: var(--track-caps-sm);
}

/* The right arrow is a glyph, not artwork, so the banner carries no SVG,
   image or diagram. Same \2192 convention as .perspective-card__panel, set in
   a system face because the brand text fonts do not ship the arrow. */
.enthero--statement .enthero__act .btn::after,
.cta__actions.cta__actions--pill .btn::after {
  content: "\2192";
  font-family: Arial, sans-serif;
  /* Sized up against the label because the glyph's stroke is lighter than the
     approved mockup's drawn arrow; this matches its optical weight. */
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transition-interactive);
}

.enthero--statement .enthero__act .btn:hover::after,
.enthero--statement .enthero__act .btn:focus-visible::after,
.cta__actions.cta__actions--pill .btn:hover::after,
.cta__actions.cta__actions--pill .btn:focus-visible::after {
  transform: translateX(4px);
}

/* The band is a fixed rust surface in every theme, so the ring is white rather
   than the tokenised rust ring used on the site's neutral surfaces. */
.enthero--statement .enthero__act .btn:focus-visible,
.cta__actions.cta__actions--pill .btn:focus-visible {
  /* CTA controls can live outside `.enthero`, where the hero-scoped
     `--white` token does not exist. Keep the ring literal and portable. */
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .enthero--statement .enthero__act .btn::after,
  .enthero--statement .enthero__act .btn:hover::after,
  .enthero--statement .enthero__act .btn:focus-visible::after,
  .cta__actions.cta__actions--pill .btn::after,
  .cta__actions.cta__actions--pill .btn:hover::after,
  .cta__actions.cta__actions--pill .btn:focus-visible::after {
    transition: none;
    transform: none;
  }
}

/* CTA-BAND RECONCILIATION
   Two rules in solution-how-we-help.css style every button in the rust CTA
   band, and both outrank .btn--pill, so they are answered here rather than
   edited there — that file is shared by all ten solution pages.

   1. Radius: the band sets a literal 100px. Restated as the site's pill token
      so the computed radius matches the hero action exactly.
   2. Glass: the band prepares a backdrop blur and an inset highlight at rest
      (as no-ops) and turns them on with a drop shadow on hover. The hero action
      has none of that, and matching the hero is the point, so the glass is
      switched off in both states; hover falls back to the component's own
      outlined behaviour plus the shared 4px arrow travel. */
.cta--operations-rust .cta__actions.cta__actions--pill .btn {
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.cta--operations-rust .cta__actions.cta__actions--pill .btn:hover,
.cta--operations-rust .cta__actions.cta__actions--pill .btn:focus-visible {
  background: rgb(255 255 255 / 0.1);
  border-color: #ffffff;
  color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* STACKED LAYOUT  (< 1024px)
   Below 1024px the title and the action stack. The stacked breakpoint was moved
   up from 900px on 2026-08-15: at 901-1023px the suite's longest title can no
   longer sit beside the action with comfortable clearance, and the approved
   answer is to stack rather than to shrink the type or the title.

   Titles and subtitles may wrap here. To keep all twenty bands exactly equal at
   a given viewport even when only some titles wrap, the band carries one
   content-derived minimum: shell padding + eyebrow + gap + TWO title lines +
   subtitle gap + subtitle line + row gap + action + shell padding + the 6px
   closing rule. Pages whose
   title fits on one line simply end with a little more quiet space above the
   closing rule, which is band padding rather than a gap inside the lockup. */
@media (max-width: 1023px) {
  .enthero.enthero--statement {
    /* Reserved lockup lines. Two title lines at every stacked width (long
       titles wrap on phones); the subtitle needs a second reserved line only at
       phone widths, where the longest subtitles wrap - see the 480px step. */
    --eh-title-lines: 2;
    --eh-subtitle-lines: 1;
    --eh-stack-top: calc(
      var(--header-height) + var(--eh-scroll-cushion) + var(--space-1)
    );
    --eh-stack-bottom: calc(36px + var(--space-4));
    min-height: calc(
      var(--eh-stack-top) + var(--eh-eyebrow-lh) * var(--eh-eyebrow-size) + var(--eh-eyebrow-gap) +
        var(--eh-title-lines) * var(--eh-title-lh) * var(--eh-title-size) +
        var(--eh-subtitle-gap) +
        var(--eh-subtitle-lines) * var(--eh-subtitle-lh) * var(--eh-subtitle-size) +
        28px + 44px + var(--eh-stack-bottom) + 6px
    );
  }

  /* The band is a column so the closing rule keeps the band's bottom edge when
     the minimum above makes the band taller than its content: the spare space
     falls between the lockup and the rule, never below the rule. */
  .enthero.enthero--statement {
    display: flex;
    flex-direction: column;
  }

  .enthero--statement .enthero__rule {
    margin-top: auto;
  }

  .enthero.enthero--statement > .shell {
    /* The band still starts at y=0; only its lockup clears the fixed bar. */
    padding-top: var(--eh-stack-top);
    padding-bottom: var(--eh-stack-bottom);
  }

  /* One column: the action drops below the lockup and is left-aligned with it
     rather than stretching to the full gutter-to-gutter measure. */
  .enthero--statement .enthero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    align-items: start;
  }

  /* Wrapping is allowed once the title owns the full measure. */
  .enthero--statement .enthero__copy h1,
  .enthero--statement .enthero__subtitle {
    white-space: normal;
  }

  .enthero--statement .enthero__act {
    padding-bottom: 0;
    transform: none;
  }

  .enthero--statement .enthero__act .btn {
    justify-self: start;
  }
}

/* PHONE STEP  (<= 480px)
   At phone widths the longest subtitles wrap, exactly as the longest titles do.
   The second subtitle line is reserved here - after the stacked block, so it
   wins on source order - which keeps all twenty bands the same height whether a
   page's subtitle wraps or not. The spare space sits above the closing rule,
   never inside the lockup. */
@media (max-width: 480px) {
  .enthero.enthero--statement {
    --eh-subtitle-lines: 2;
  }
}