/* ===========================================================================
 * Pyrion shared chrome + global styles.
 * Copied from web/index.html's original inline <style> block. Includes header,
 * sidebar, layout, fire-themed CSS variables, global pills/buttons, plus page-
 * specific rules (Placements Board / Register / Action Center / hero / modules).
 * Loaded by every page so chrome stays consistent. Per-page rules are inert on
 * pages that don't use those selectors.
 * =========================================================================== */

  *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

  :root {
    --fire-deep:   #5a0a13;
    --fire-red:    #c8202d;
    --fire-orange: #ff6b1a;
    --fire-amber:  #ffa836;
    --fire-gold:   #ffc93c;
    --fire-yellow: #ffe066;
    --fire-glow:   rgba(255,200,60,.55);

    /* Hero stays bold-dark for the lion/flame to pop */
    --bg-dark:     #1a0d07;
    --bg-medium:   #2b1810;
    --bg-card:     #3a2316;
    --text-warm:   #fff8e7;
    --text-mute:   #d8c4a4;
    --border-warm: rgba(255,200,60,.22);

    /* Lighter "detail" tier — warm cream/peach with fire accents */
    --detail-bg-1:    #fff4e2;
    --detail-bg-2:    #ffe5c4;
    --detail-card-1:  #fffaf2;
    --detail-card-2:  #ffeed5;
    --detail-text:    #3a1208;
    --detail-mute:    #6b3a1f;
    --detail-border:  rgba(200,32,45,.22);
    --detail-shadow:  rgba(122, 40, 12, .14);
  }

  html, body { height:100%; }
  body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,26,.22) 0%, transparent 60%),
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(200,32,45,.14) 0%, transparent 70%),
      linear-gradient(180deg, #2b1810 0%, #1a0d07 60%);
    color: var(--text-warm);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* -------- Floating embers background -------- */
  .embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  .ember {
    position: absolute; bottom: -10px; border-radius: 50%;
    background: radial-gradient(circle, var(--fire-yellow) 0%, var(--fire-orange) 60%, transparent 100%);
    box-shadow: 0 0 12px var(--fire-amber);
    animation: rise linear infinite;
    will-change: transform, opacity;
  }
  @keyframes rise {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate(15vw, -55vh) scale(1); opacity: .9; }
    90%  { opacity: .55; }
    100% { transform: translate(-10vw, -110vh) scale(.4); opacity: 0; }
  }

  /* -------- Header / Top bar -------- */
  header {
    position: sticky; top: 0; z-index: 100;
    background:
      radial-gradient(ellipse 55% 90% at 18% 50%, rgba(255, 138, 40, .14) 0%, transparent 65%),
      radial-gradient(ellipse 55% 90% at 82% 50%, rgba(200, 32, 45, .14) 0%, transparent 65%),
      linear-gradient(180deg, #1a0d07 0%, #110804 60%, #0a0402 100%);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-bottom: 1px solid rgba(184, 69, 26, .35);
    box-shadow:
      0 1px 0 rgba(255, 168, 54, .12) inset,
      0 10px 32px rgba(0, 0, 0, .35),
      0 0 28px rgba(255, 107, 26, .08);
  }
  header::after {
    content:""; display:block; height:2px;
    background: linear-gradient(90deg, transparent, var(--fire-red), var(--fire-orange), var(--fire-gold), var(--fire-orange), var(--fire-red), transparent);
    background-size: 200% 100%;
    animation: shimmer 6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 107, 26, .55));
  }
  @keyframes shimmer { from { background-position: 0% 0%; } to { background-position: -200% 0%; } }

  .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; gap: 24px; }

  .logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .logo-flame { width: 52px; height: 60px; filter: drop-shadow(0 0 10px rgba(255,107,26,.55)); }
  .brand-block { display: flex; flex-direction: column; line-height: 1.1; }
  .brand-name {
    font-size: 26px; font-weight: 900; letter-spacing: 3px;
    background: linear-gradient(135deg, var(--fire-yellow) 0%, var(--fire-orange) 50%, var(--fire-red) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(255,168,54,.22);
  }
  .brand-tag { font-size: 13px; color: var(--text-mute); letter-spacing: 1.4px; text-transform: uppercase; margin-top: 3px; font-weight: 500; }

  /* -------- Top-right utility icons -------- */
  .top-icons { display: flex; gap: 12px; align-items: center; }
  .icon-btn {
    background: rgba(255,107,26,.05);
    border: 1px solid var(--border-warm);
    color: var(--fire-amber);
    width: 42px; height: 42px; border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .25s ease;
    position: relative;
  }
  .icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }
  .icon-btn:hover {
    background: rgba(255,107,26,.18);
    border-color: var(--fire-orange);
    color: var(--fire-yellow);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255,107,26,.35);
  }
  .icon-btn .tip {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-card);
    color: var(--fire-yellow);
    font-size: 11px; padding: 5px 10px; border-radius: 6px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateY(-4px);
    transition: all .2s;
    border: 1px solid var(--border-warm);
  }
  .icon-btn:hover .tip { opacity: 1; transform: translateY(0); }

  /* ╔══════════════════════════════════════════════════════════╗
     ║  MODULE NAV · v-modern · IT-tech style · Pyrion theme    ║
     ║  - Frosted ember rail underline                          ║
     ║  - Refined pill chips with monospaced kicker letter        ║
     ║  - Active state: filled ember gradient + glowing under-bar║
     ║  - Hover: warm ember tint + subtle lift                  ║
     ║  - Single-line container, items wrap text internally      ║
     ╚══════════════════════════════════════════════════════════╝ */
  /* ╔══════════════════════════════════════════════════════════════════╗
     ║  MODULE NAV · v-future · 2026+ Premium AI/Tech command bar         ║
     ║  Reference: Anthropic Console, OpenAI Platform, Linear 2026,      ║
     ║             Vercel Ship 2025, Cursor, Replit AI Agents             ║
     ║  Pattern:   visible default capsules · gradient rims · animated   ║
     ║             ring shimmer on active · multi-layer floor halo       ║
     ║             ambient agent-online indicator                         ║
     ║  Brand:     Pyrion fire palette anchoring premium dark surface    ║
     ╚══════════════════════════════════════════════════════════════════╝ */
  .module-nav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 14px 18px 12px;
    overflow: visible;
    /* === LIGHT CHAMPAGNE PARCHMENT theme === */
    background:
      /* subtle gold spotlight from above-center · museum vitrine feel */
      radial-gradient(ellipse 60% 140% at 50% -20%, rgba(232, 168, 80, .22) 0%, transparent 60%),
      /* warm rose accent · upper-right corner */
      radial-gradient(circle 280px at 92% 0%, rgba(200, 95, 60, .12) 0%, transparent 70%),
      /* champagne paper base · warm cream with subtle gradient */
      linear-gradient(180deg,
        #f9efdc 0%,
        #f4e6c8 50%,
        #ebd9b5 100%);
    border-top: 1px solid rgba(168, 88, 32, .22);
    box-shadow:
      inset 0 1px 0 rgba(255, 252, 240, .85),
      inset 0 -1px 0 rgba(168, 88, 32, .15),
      0 4px 14px rgba(120, 60, 20, .12);
  }
  /* Section dividers · slim ember hairline after each logical group.
     The 14-module list breaks into 5 conceptual sections:
       [Home · Fireplace]                                                  pos 1-2
       [Hires · Resources · Benefits]                                      pos 3-5
       [Deals Center · Engagement Hub · Contracts]                         pos 6-8
       [Time & Expenses · Employees & Pays]                                pos 9-10
       [Customers · Suppliers · Assets · Incentives]                       pos 11-14
     Dividers sit AFTER positions 2, 5, 8, 10 (the last item of each
     section). Implemented via extra margin + a pseudo-element rail. */
  .module-nav a:nth-child(2),
  .module-nav a:nth-child(5),
  .module-nav a:nth-child(8),
  .module-nav a:nth-child(10) {
    margin-right: 8px;
  }
  .module-nav a:nth-child(2)::before,
  .module-nav a:nth-child(5)::before,
  .module-nav a:nth-child(8)::before,
  .module-nav a:nth-child(10)::before {
    content:"";
    position: absolute;
    right: -5px; top: 22%; bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(168, 88, 32, .42) 50%,
      transparent 100%);
    pointer-events: none;
  }
  /* For an active chip at a section boundary · the pulsing ember dot
     above the label takes priority over the section divider. */
  .module-nav a.active:nth-child(2)::before,
  .module-nav a.active:nth-child(5)::before,
  .module-nav a.active:nth-child(8)::before,
  .module-nav a.active:nth-child(10)::before {
    top: 2px; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: radial-gradient(circle, #c9920a 0%, #c8202d 70%, transparent 100%);
  }
  @media (max-width: 1280px) {
    .module-nav { padding: 12px 12px 10px; }
    .module-nav a { padding: 6px 6px 9px; font-size: 13px; }
    .module-nav a.is-two-line { padding: 5px 5px 7px; font-size: 11.5px; }
    .module-nav a:nth-child(2),
    .module-nav a:nth-child(5),
    .module-nav a:nth-child(8),
    .module-nav a:nth-child(10) { margin-right: 5px; }
  }
  /* Bright hot ember rail at the very bottom — single brand signature. */
  .module-nav::before {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 209, 102, .40) 14%,
      rgba(234, 88, 12, .72) 50%,
      rgba(255, 209, 102, .40) 86%,
      transparent 100%);
    filter: drop-shadow(0 0 5px rgba(255, 107, 26, .55));
    pointer-events: none;
  }

  /* === EDITORIAL TEXT-LINK layout === flat text with hover underline,
     no chip backgrounds — like a premium magazine masthead nav.
     Left + right vertical hairlines on every item · refined column-rule
     look like a magazine masthead with bylines between sections. */
  .module-nav a {
    flex: 0 1 auto;
    min-width: 0;
    color: #5b3010;
    text-decoration: none;
    padding: 6px 12px 9px;
    border-radius: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
    transition: color .18s ease, text-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
    position: relative;
    z-index: 0;
    border: 0;
    background-color: transparent;
    background-image:
      /* left hairline · gradient fades top and bottom */
      linear-gradient(180deg, transparent 0%, rgba(168, 88, 32, .35) 40%, rgba(200, 95, 60, .55) 50%, rgba(168, 88, 32, .35) 60%, transparent 100%),
      /* right hairline · matching fade */
      linear-gradient(180deg, transparent 0%, rgba(168, 88, 32, .35) 40%, rgba(200, 95, 60, .55) 50%, rgba(168, 88, 32, .35) 60%, transparent 100%);
    background-position: 0 50%, right 50%;
    background-size: 1px 22px, 1px 22px;
    background-repeat: no-repeat;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* No left hairline on the first chip, no right hairline on the last chip. */
  .module-nav a:first-child { background-position: -10px 50%, right 50%; }
  .module-nav a:last-child  { background-position: 0 50%, right -10px; }

  /* Two-line items match the row's natural rhythm · left-aligned text. */
  .module-nav a.is-two-line {
    white-space: normal;
    line-height: 1.08;
    font-size: 12px;
    padding: 5px 6px 7px;
    text-align: left;
    justify-content: flex-start;
  }

  /* HOVER · file-tab style — ember bar drops in across the top + faint warm tint */
  .module-nav a:hover {
    color: #9a1518;
    text-shadow: 0 1px 0 rgba(255, 252, 240, .65);
  }
  .module-nav a:not(.active):hover {
    background-color: rgba(255, 232, 196, .42);
    border-radius: 5px 5px 0 0;
  }
  .module-nav a:not(.active)::after {
    content:"";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg, #c9920a 0%, #ea580c 50%, #c8202d 100%);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
  }
  .module-nav a:not(.active):hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* ACTIVE · bold crimson text + permanent gold-ember underline
     + LED dot above. Editorial newspaper "selected article" treatment. */
  .module-nav a.active {
    color: #8a1818;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 252, 240, .80);
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 2;
  }
  /* Pulsing ember dot ABOVE the active label (replaces top-right LED). */
  .module-nav a.active::before {
    content:"";
    position: absolute;
    top: 2px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #c9920a 0%, #c8202d 70%, transparent 100%);
    box-shadow: 0 0 5px rgba(200, 32, 45, .75);
    animation: navActiveDot 1.8s ease-in-out infinite;
    z-index: 3;
  }
  /* Permanent gold-ember underline below the active label · editorial style. */
  .module-nav a.active::after {
    content:"";
    position: absolute;
    left: 12%; right: 12%; bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      #c9920a 18%,
      #ea580c 50%,
      #c8202d 82%,
      transparent 100%);
    box-shadow: 0 1px 4px rgba(200, 32, 45, .35);
    pointer-events: none;
    z-index: 1;
  }
  @keyframes navActiveDot {
    0%, 100% { opacity: .80; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.30); box-shadow: 0 0 7px rgba(200,32,45,1); }
  }

  /* Icons removed — make space for the labels. */
  .module-nav a svg { display: none; }

  /* ── Mobile / tablet: the 14-module bar becomes a horizontal scroll strip ──
     Instead of crushing every module into one row, the bar scrolls sideways
     and each module stays a full, tappable chip. */
  @media (max-width: 1100px) {
    .module-nav {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;                 /* Firefox */
      scroll-snap-type: x proximity;
      gap: 2px;
      padding: 8px 12px 10px;
    }
    .module-nav::-webkit-scrollbar { display: none; }   /* WebKit */
    .module-nav a {
      flex: 0 0 auto;                         /* keep size; never shrink */
      scroll-snap-align: start;
      font-size: 13px;
      padding: 8px 12px 9px;
    }
    .module-nav a.is-two-line { font-size: 12px; padding: 6px 10px 7px; }
    .module-nav a:nth-child(2),
    .module-nav a:nth-child(5),
    .module-nav a:nth-child(8),
    .module-nav a:nth-child(10) { margin-right: 3px; }
  }

  /* Phone: shrink the brand row so the header fits narrow screens. */
  @media (max-width: 700px) {
    .top-bar { padding: 8px 14px; gap: 12px; }
    .logo-flame { width: 40px; height: 46px; }
    .brand-name { font-size: 20px; letter-spacing: 2px; }
    .brand-tag { font-size: 11px; letter-spacing: 1px; }
    .top-icons { gap: 8px; }
    .icon-btn { width: 36px; height: 36px; }
    .icon-btn svg { width: 18px; height: 18px; }
  }
  /* -------- Page layout (left sidebar + main) -------- */
  .layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 130px);
  }
  .side-nav {
    position: sticky;
    top: 130px;
    flex-shrink: 0;
    width: 0;
    height: calc(100vh - 130px);
    background: linear-gradient(180deg, #1a0d07 0%, #0a0604 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid transparent;
    padding: 20px 0;
    overflow: hidden;
    z-index: 80;
    box-shadow: 4px 0 18px rgba(0,0,0,0);
    transform: translateX(-30px);
    opacity: 0;
    transition: width .35s ease, transform .35s ease, opacity .35s ease,
                border-color .35s ease, box-shadow .35s ease;
  }
  .layout.has-sidebar .side-nav {
    width: 240px;
    overflow-y: auto;
    transform: translateX(0);
    opacity: 1;
    border-right-color: var(--border-warm);
    box-shadow: 4px 0 18px rgba(0,0,0,.35);
  }

  /* ===== Contracts module · lighter, taller, always-expanded sidebar =====
     The Contracts sidebar carries 3 parents with up to 11 grand-children
     each. No dropdowns — the full tree is always visible. Cream palette
     replaces the dark gradient so the deep tree feels light and inviting. */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav {
    top: 80px;
    height: calc(100vh - 80px);
    padding-top: 14px;
    background: linear-gradient(180deg, #fffaf2 0%, #fff3e0 100%);
    border-right: 1px solid #e8d5b8;
    box-shadow: 4px 0 18px rgba(40,15,5,.07);
  }
  /* Wider sidebar in Contracts so the long sub-item labels (e.g. "Awaiting
     Pyrion Counter-sign", "All Master Service Agreements", "Rate / Markup
     Amendments") render in full without truncation. */
  .layout.has-sidebar:has(pyrion-sidebar[module="contracts"]) .side-nav {
    width: 290px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-section-header {
    padding: 4px 20px 14px;
    margin-bottom: 12px;
    border-bottom-color: #ecd9c4;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-section-header .label {
    background: linear-gradient(135deg, #b8451a 0%, #cf7d2a 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-size: 13px;
    letter-spacing: 2.6px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-section-header .icon {
    width: 22px; height: 22px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-section-header .icon {
    color: #cf7d2a;
  }

  /* Top-level group header — clickable collapse toggle in the Engagement Hub */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-group-header {
    color: #3a1a08;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .8px;
    border-bottom-color: rgba(207,125,42,.22);
    margin: 0 12px 8px;
    padding: 11px 14px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-group-header .side-nav-group-label {
    overflow: visible; text-overflow: clip; white-space: normal;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-group-header svg { color: #cf7d2a; }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-group-header.active {
    color: #b8451a;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-group-header.active svg { color: #b8451a; }

  .side-nav-group-block.is-collapsible > .side-nav-group-header {
    cursor: pointer;
    user-select: none;
  }
  .side-nav-group-block.is-collapsible > .side-nav-group-header:hover {
    background: rgba(207,125,42,.08);
    border-radius: 8px;
  }
  .side-nav-group-block.is-collapsible > .side-nav-group-header:focus-visible {
    outline: 2px solid #cf7d2a;
    outline-offset: 2px;
    border-radius: 8px;
  }
  .side-nav-group-chev {
    width: 14px; height: 14px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .18s ease;
  }
  .side-nav-group-block.is-collapsible.collapsed > .side-nav-group-header .side-nav-group-chev {
    transform: rotate(-90deg);
  }
  .side-nav-group-block.is-collapsible.collapsed > .side-nav-sub {
    display: none;
  }

  .side-nav-subgroup.is-collapsible > .side-nav-subgroup-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .side-nav-subgroup.is-collapsible > .side-nav-subgroup-header:focus-visible {
    outline: 2px solid #cf7d2a;
    outline-offset: 2px;
    border-radius: 6px;
  }
  .side-nav-subgroup-chev {
    width: 12px; height: 12px;
    margin-left: auto;
    flex-shrink: 0;
    color: #a96400;
    transition: transform .18s ease;
  }
  .side-nav-subgroup.is-collapsible.collapsed > .side-nav-subgroup-header .side-nav-subgroup-chev {
    transform: rotate(-90deg);
  }
  .side-nav-subgroup.is-collapsible.collapsed > .side-nav-grand-wrap {
    display: none;
  }

  /* 2nd-level subgroup header (MSAs / Customer WOs / Action Center) */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup-header {
    color: #7a4322;
    font-size: 13px; font-weight: 600; letter-spacing: 0;
    padding: 8px 12px;
    position: relative;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup-header .side-nav-subgroup-label {
    overflow: visible; text-overflow: clip; white-space: normal;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup-header:hover {
    background: rgba(207,125,42,.08);
    color: #3a1a08;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup-header.active {
    color: #b8451a;
  }

  /* ===== Animated Action Center entries (Customer + Supplier Contracts) =====
     No row highlight — just a small ringing-bell icon before the label that
     swings on a loop, signalling "live action items waiting". */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="cust-action-center"] > .side-nav-subgroup-header,
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="supp-action-center"] > .side-nav-subgroup-header {
    display: flex; align-items: center; gap: 8px;
    padding-left: 12px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="cust-action-center"] > .side-nav-subgroup-header::before,
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="supp-action-center"] > .side-nav-subgroup-header::before {
    content: '';
    width: 18px; height: 18px;
    flex-shrink: 0;
    order: 2;
    margin-left: -8px;
    background-color: #cf7d2a;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
    -webkit-mask-repeat: no-repeat;            mask-repeat: no-repeat;
    -webkit-mask-position: center;             mask-position: center;
    -webkit-mask-size: contain;                mask-size: contain;
    transform-origin: 50% 18%;
    animation: pyr-ac-bell 1.6s ease-in-out infinite;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="cust-action-center"] > .side-nav-subgroup-header > .side-nav-subgroup-chev,
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="supp-action-center"] > .side-nav-subgroup-header > .side-nav-subgroup-chev {
    order: 3;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="cust-action-center"] > .side-nav-subgroup-header.active::before,
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="supp-action-center"] > .side-nav-subgroup-header.active::before {
    background-color: #b8451a;
  }

  @keyframes pyr-ac-bell {
    0%, 50%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-14deg); }
    20% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="cust-action-center"] > .side-nav-subgroup-header::before,
    .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subgroup[data-key$="supp-action-center"] > .side-nav-subgroup-header::before {
      animation: none;
    }
  }

  /* 2nd-level plain subitems (no grandchildren) */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem {
    padding: 8px 12px;
    font-size: 13px;
    color: #7a4322;
    font-weight: 600;
    white-space: normal;
    line-height: 1.35;
    text-align: left;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem:hover {
    background: rgba(207,125,42,.12);
    color: #1a0a02;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.active {
    background: linear-gradient(135deg, #cf7d2a, #b8451a);
    color: #fff;
    box-shadow: 0 3px 10px rgba(184,69,26,.28);
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.all { color: #7a4322; }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.all:hover { color: #1a0a02; }

  /* 3rd-level grand-children — same size as 2nd-level subitems */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.side-nav-grand {
    padding: 7px 11px;
    font-size: 13px;
    color: #7a4322;
    font-weight: 600;
    white-space: normal;
    line-height: 1.35;
    text-align: left;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.side-nav-grand:hover {
    background: rgba(207,125,42,.10);
    color: #3a1a08;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.side-nav-grand.active {
    background: linear-gradient(135deg, #cf7d2a, #b8451a);
    color: #fff;
  }

  /* Borders inside the nested wrappers — warm tan instead of yellow */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-grand-wrap {
    border-left-color: rgba(207,125,42,.22);
  }

  /* 4th-level nested subgroup (e.g. Engagements Pipeline inside All Engagements) */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-nested-subgroup > .side-nav-nested-header {
    color: #7a4322;
    font-size: 13px; font-weight: 600; letter-spacing: 0;
    padding: 6px 10px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-nested-subgroup > .side-nav-grand-wrap {
    margin-left: 8px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav-subitem.side-nav-great {
    padding: 6px 10px;
    font-size: 13px;
    color: #7a4322;
    font-weight: 600;
  }

  /* Custom scrollbar — slim, warm, only visible when needed. */
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav::-webkit-scrollbar { width: 6px; }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav::-webkit-scrollbar-track { background: transparent; }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav::-webkit-scrollbar-thumb {
    background: rgba(207,125,42,.32); border-radius: 3px;
  }
  .layout:has(pyrion-sidebar[module="contracts"]) .side-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(207,125,42,.55);
  }
  .side-nav-group { display: block; }
  .side-nav-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 20px 18px;
    border-bottom: 1px solid var(--border-warm);
    margin-bottom: 18px;
  }
  .side-nav-section-header .label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    background: linear-gradient(135deg, var(--fire-amber), var(--fire-yellow));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .side-nav-section-header .icon {
    width: 20px; height: 20px;
    color: var(--fire-amber);
    flex-shrink: 0;
  }
  .side-nav-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 6px 12px;
  }
  .side-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    color: var(--text-warm);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    transition: all .25s ease;
    position: relative;
  }
  .side-nav-item svg {
    width: 18px; height: 18px;
    color: var(--fire-amber);
    flex-shrink: 0;
    transition: color .2s;
  }
  .side-nav-item:hover {
    background: rgba(255,107,26,.1);
    color: var(--fire-yellow);
    transform: translateX(2px);
  }
  .side-nav-item:hover svg { color: var(--fire-yellow); }
  .side-nav-item.active {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    box-shadow: 0 6px 16px rgba(200,32,45,.4);
  }
  .side-nav-item.active svg { color: #fff; }
  .side-nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px; bottom: 8px;
    width: 3px;
    background: var(--fire-yellow);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--fire-glow);
  }

  /* ===== New Hire Portal sidebar — taller + scrollable + cream theme ===== */
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav {
    top: 80px;
    height: calc(100vh - 80px);
    padding-top: 14px;
    overflow-y: auto;
  }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav::-webkit-scrollbar { width: 6px; }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav::-webkit-scrollbar-track { background: transparent; }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav::-webkit-scrollbar-thumb {
    background: rgba(255,168,54,.45); border-radius: 3px;
  }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,168,54,.75);
  }

  /* ===== New Hire Portal sidebar — force left alignment everywhere ===== */
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-item,
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-group-header,
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-subgroup-header {
    justify-content: flex-start;
    text-align: left;
  }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-subitem,
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-subitem.side-nav-grand,
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-subitem.side-nav-great {
    text-align: left;
  }
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-group-label,
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-subgroup-label {
    text-align: left;
  }
  /* Align group-block headers (My Profile, Onboarding Checklist) flush with
     leaf items (Welcome, Day-1, etc.) — remove the 12 px horizontal inset that
     the default group-header carries. Sub-children stay indented underneath. */
  .layout:has(pyrion-sidebar[module="new-hire-portal"]) .side-nav-group-header {
    margin-left: 0;
    margin-right: 0;
    padding: 11px 14px;
  }

  /* Always-expanded parent block (no dropdowns).
     Each top-level item is a non-clickable section header above its children. */
  .side-nav-group-block { margin-bottom: 6px; }
  .side-nav-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    color: var(--text-warm);
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    user-select: none;
    border-bottom: 1px dashed rgba(255,200,60,.15);
    margin: 0 12px 6px;
  }
  .side-nav-group-header svg {
    width: 16px; height: 16px; color: var(--fire-amber); flex-shrink: 0;
  }
  .side-nav-group-header .side-nav-group-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .side-nav-group-header.active { color: var(--fire-yellow); }
  .side-nav-group-header.active svg { color: var(--fire-yellow); }
  /* Children list — always visible, no animation */
  .side-nav-sub {
    display: flex; flex-direction: column; gap: 3px;
    padding: 0 12px;
    margin-bottom: 4px;
  }
  .side-nav-subitem {
    display: block;
    padding: 8px 12px;
    color: var(--text-mute);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    transition: all .2s ease;
    position: relative;
  }
  .side-nav-subitem:hover {
    background: rgba(255,107,26,.08);
    color: var(--fire-yellow);
  }
  .side-nav-subitem.active {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(200,32,45,.35);
  }
  .side-nav-subitem.all {
    color: var(--fire-amber);
    font-weight: 700;
  }
  .side-nav-subitem.all:hover { color: var(--fire-yellow); }

  /* ===== 3rd-level sidebar (always visible, no dropdowns) =====
     Used when a sub-item itself groups further sub-views, e.g.
     Contracts → Customer Contracts → MSAs → [MSA Board, Effective Dates, ...] */
  .side-nav-subgroup { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
  .side-nav-subgroup-header {
    display: flex; align-items: center;
    padding: 5px 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    color: var(--text-mute);
    text-decoration: none;
    border-radius: 5px;
    transition: color .15s, background .15s;
  }
  .side-nav-subgroup-header:hover {
    background: rgba(255,107,26,.06);
    color: var(--fire-yellow);
  }
  .side-nav-subgroup-header.active {
    color: var(--fire-yellow);
  }
  .side-nav-subgroup-header .side-nav-subgroup-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Grandchildren list — always visible */
  .side-nav-grand-wrap {
    display: flex; flex-direction: column; gap: 1px;
    padding: 2px 0 4px 10px;
    border-left: 1px solid rgba(255,200,60,.16);
    margin: 0 0 4px 12px;
  }
  .side-nav-subitem.side-nav-grand {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-mute);
    border-radius: 5px;
  }
  .side-nav-subitem.side-nav-grand:hover {
    background: rgba(255,107,26,.07);
    color: var(--fire-yellow);
    transform: translateX(1px);
  }
  .side-nav-subitem.side-nav-grand.active {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(200,32,45,.30);
  }

  /* Light-theme variants for the new 3rd-level styles */
  body.pyrion-light-theme .side-nav-subitem.side-nav-grand {
    color: #5a3018;
  }
  body.pyrion-light-theme .side-nav-subitem.side-nav-grand:hover {
    background: rgba(207,125,42,.10);
    color: #3a1a08;
  }
  body.pyrion-light-theme .side-nav-subitem.side-nav-grand.active {
    background: linear-gradient(135deg, #cf7d2a, #b8451a);
    color: #fff;
  }
  body.pyrion-light-theme .side-nav-grand-wrap > * {
    border-left-color: rgba(207,125,42,.30);
  }
  body.pyrion-light-theme .side-nav-group-header { color: #3a1a08; }
  body.pyrion-light-theme .side-nav-group-header svg { color: #cf7d2a; }
  body.pyrion-light-theme .side-nav-group-header.active { color: #b8451a; }
  body.pyrion-light-theme .side-nav-subgroup-header { color: #5a3018; }
  body.pyrion-light-theme .side-nav-subgroup-header:hover { background: rgba(207,125,42,.10); color: #3a1a08; }
  body.pyrion-light-theme .side-nav-subgroup-header.active { color: #b8451a; }
  /* When a sub-module sidebar is open, tighten the main panel margins/padding
     so the narrower right column doesn't feel cramped on the inside but stops
     wasting horizontal space on the outside. */
  .layout.has-sidebar .hero-inner {
    padding: 0 16px;
    max-width: none;
    gap: 28px;
  }
  .layout.has-sidebar .hero {
    padding: 36px 0 36px;
  }
  .layout.has-sidebar .modules-section {
    padding: 40px 16px 50px;
  }
  .layout.has-sidebar .modules-section-inner {
    max-width: none;
  }

  /* ============ Placements Board ============ */
  .placements-board {
    background: #f2eee6;
    border-top: 1px solid #e6dfd0;
    border-left: 1px solid #e6dfd0;
  }

  .pb-inner { max-width: none; margin: 0 auto; padding: 22px 16px 48px; }
  .pb-header {
    position: relative; overflow: hidden;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
    padding: 22px 26px;
    border: 1px solid rgba(200, 32, 45, .18);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 10px 26px rgba(122, 40, 12, .10);
    background-color: #fff6e8;
    background-image:
      radial-gradient(circle at 92% -40%, rgba(255, 107, 26, .18) 0%, transparent 55%),
      radial-gradient(circle at 0% 135%, rgba(200, 32, 45, .10) 0%, transparent 52%),
      linear-gradient(180deg, #fff8ee 0%, #ffeed5 100%);
  }
  .pb-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--fire-gold) 0%, var(--fire-orange) 40%, var(--fire-red) 72%, var(--fire-deep) 100%);
  }
  .pb-header-text { flex: 1; min-width: 240px; }
  .pb-breadcrumb { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--fire-deep); margin-bottom: 6px; }
  .pb-title { font-size: 28px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 6px; color: var(--fire-deep); }
  .pb-sub { font-size: 13.5px; color: var(--fire-deep); max-width: 560px; }

  .pb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .pb-stats > div {
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(122,40,12,.08);
  }
  .pb-stat-num { display: block; font-size: 24px; font-weight: 900; color: var(--fire-deep); font-variant-numeric: tabular-nums; }
  .pb-stat-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--detail-mute); margin-top: 4px; text-transform: uppercase; }

  /* KPI cards */
  .pb-kpi-card {
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 4px 14px rgba(122,40,12,.08);
    margin-bottom: 16px;
  }
  .pb-kpi-head { margin-bottom: 18px; }
  .pb-kpi-head h3 {
    font-size: 16px; font-weight: 800; color: var(--fire-deep);
    margin-bottom: 4px; letter-spacing: -.2px;
  }
  .pb-kpi-head p { font-size: 12.5px; color: var(--detail-mute); line-height: 1.5; }

  .pb-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .pb-kpi-row .pb-kpi-card { margin-bottom: 0; }
  @media (max-width: 900px) { .pb-kpi-row { grid-template-columns: 1fr; } }

  /* YTD card */
  .pb-ytd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  .pb-ytd-cell {
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
  }
  .pb-ytd-period {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--detail-mute); text-transform: uppercase; margin-bottom: 4px;
  }
  .pb-ytd-num {
    font-size: 28px; font-weight: 900; color: var(--fire-deep);
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .pb-ytd-delta {
    font-size: 11px; font-weight: 700; margin-top: 4px;
    color: #1c6e1c; /* default green */
  }
  .pb-ytd-delta.down { color: var(--fire-red); }
  .pb-ytd-delta.muted { color: var(--detail-mute); font-weight: 500; letter-spacing: .3px; }

  .pb-ytd-bars { display: flex; flex-direction: column; gap: 8px; }
  .pb-ytd-bar {
    display: grid; grid-template-columns: 110px 1fr 60px;
    align-items: center; gap: 12px;
    font-size: 12px;
  }
  .pb-ytd-bar .lbl { color: var(--detail-text); font-weight: 600; }
  .pb-ytd-bar .track { background: #f5e8c8; border-radius: 99px; height: 14px; overflow: hidden; }
  .pb-ytd-bar .fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--fire-orange), var(--fire-amber));
    transition: width .5s ease;
  }
  .pb-ytd-bar .fill.current {
    background: linear-gradient(90deg, var(--fire-red), var(--fire-orange));
    box-shadow: 0 0 6px rgba(255,107,26,.5);
  }
  .pb-ytd-bar .num {
    text-align: right; font-weight: 800; color: var(--fire-deep);
    font-variant-numeric: tabular-nums;
  }

  /* Volume & TAT card */
  .pb-vol-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 14px;
  }
  .pb-vol-summary.pb-vol-grid-5 { grid-template-columns: repeat(5, 1fr); }
  .pb-vol-summary.pb-vol-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .pb-vol-summary.pb-vol-grid-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 1100px) {
    .pb-vol-summary.pb-vol-grid-5 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    .pb-vol-summary.pb-vol-grid-5,
    .pb-vol-summary.pb-vol-grid-4,
    .pb-vol-summary.pb-vol-grid-3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .pb-vol-summary.pb-vol-grid-5,
    .pb-vol-summary.pb-vol-grid-4,
    .pb-vol-summary.pb-vol-grid-3 { grid-template-columns: 1fr; }
  }
  /* Color the Net Gains tile values by sign */
  .pb-vol-num.up   { color: #1c6e1c !important; }
  .pb-vol-num.down { color: var(--fire-red) !important; }
  .pb-vol-summary > div {
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
    border: 1px solid var(--detail-border);
    border-radius: 8px; padding: 10px 12px; text-align: center;
  }
  .pb-vol-num {
    display: block; font-size: 22px; font-weight: 900;
    color: var(--fire-deep); font-variant-numeric: tabular-nums;
  }
  .pb-vol-label {
    display: block; font-size: 9.5px; font-weight: 700;
    letter-spacing: 1px; color: var(--detail-mute);
    margin-top: 2px; text-transform: uppercase;
  }

  .pb-vol-list { display: flex; flex-direction: column; gap: 6px; }
  .pb-vol-row {
    display: grid; grid-template-columns: 1fr 70px 60px;
    gap: 8px; align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #f0e3c8;
    font-size: 12px;
  }
  .pb-vol-row.pb-vol-row-cmp { grid-template-columns: 1.4fr 70px 70px 90px; }
  .pb-vol-row.pb-vol-row-head {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--detail-mute); text-transform: uppercase;
    border-bottom: 1px solid var(--detail-border); padding-bottom: 6px;
  }
  .pb-vol-row:last-child { border-bottom: none; }
  .pb-vol-row .lbl { color: var(--detail-text); font-weight: 600; }
  .pb-vol-row .count,
  .pb-vol-row .num {
    text-align: right; font-weight: 800;
    color: var(--fire-deep); font-variant-numeric: tabular-nums;
  }
  .pb-vol-row.pb-vol-row-head .num { color: var(--detail-mute); }
  .pb-vol-row .tat {
    text-align: right; font-size: 11px; color: var(--detail-mute);
    font-variant-numeric: tabular-nums;
  }
  .pb-vol-row .tat.over { color: var(--fire-red); font-weight: 700; }
  .pb-vol-row .delta {
    text-align: right; font-size: 11.5px; font-weight: 700;
    color: #1c6e1c; font-variant-numeric: tabular-nums;
  }
  .pb-vol-row .delta.down { color: var(--fire-red); }
  .pb-vol-row .delta.flat { color: var(--detail-mute); }
  .pb-vol-row.pb-vol-row-head .delta { color: var(--detail-mute); font-weight: 800; }

  /* Portfolio Snapshot table (YTD vs PYD vs 3-Yr) */
  .pb-snap-table { display: flex; flex-direction: column; gap: 0; }
  .pb-snap-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px dashed #f0e3c8;
    font-size: 13px;
  }
  .pb-snap-row:last-child { border-bottom: none; }
  .pb-snap-row.pb-snap-head {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--detail-mute);
    text-transform: uppercase;
    border-bottom: 1px solid var(--detail-border);
    padding-bottom: 8px;
  }
  .pb-snap-row .lbl { color: var(--detail-text); font-weight: 600; }
  .pb-snap-row .num {
    text-align: right;
    font-weight: 800;
    color: var(--fire-deep);
    font-variant-numeric: tabular-nums;
  }
  .pb-snap-row.pb-snap-head .num { font-weight: 800; color: var(--detail-mute); }
  .pb-snap-row .num.current { color: var(--fire-red); }
  .pb-snap-row .num.up   { color: #1c6e1c; }
  .pb-snap-row .num.down { color: var(--fire-red); }
  .pb-snap-row.pb-snap-row-7 { grid-template-columns: 1.5fr repeat(5, 1fr) 1.1fr; }
  .pb-snap-row.pb-snap-row-8 { grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr repeat(2, 1fr) 1.2fr; }
  @media (max-width: 1300px) {
    .pb-snap-row.pb-snap-row-8 { font-size: 12px; }
  }
  @media (max-width: 1050px) {
    .pb-snap-row.pb-snap-row-8 { grid-template-columns: 1.3fr repeat(3, 1fr) 1.2fr; font-size: 11.5px; }
    .pb-snap-row.pb-snap-row-8 > :nth-child(6),
    .pb-snap-row.pb-snap-row-8 > :nth-child(7),
    .pb-snap-row.pb-snap-row-8 > :nth-child(8) { display: none; }
  }
  @media (max-width: 780px) {
    .pb-snap-row.pb-snap-row-8 { grid-template-columns: 1.2fr repeat(3, 1fr); }
    .pb-snap-row.pb-snap-row-8 > :nth-child(5) { display: none; }
  }
  @media (max-width: 1300px) {
    .pb-snap-row.pb-snap-row-7 { font-size: 12px; }
  }
  @media (max-width: 900px) {
    .pb-snap-row.pb-snap-row-7 { grid-template-columns: 1.4fr repeat(3, 1fr); font-size: 11.5px; }
    .pb-snap-row.pb-snap-row-7 > :nth-child(5),
    .pb-snap-row.pb-snap-row-7 > :nth-child(6),
    .pb-snap-row.pb-snap-row-7 > :nth-child(7) { display: none; }
  }
  .pb-snap-row.pb-pk-row { grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr repeat(2, 1fr) 1.2fr; }
  @media (max-width: 1300px) {
    .pb-snap-row.pb-pk-row { font-size: 12px; }
  }
  @media (max-width: 1050px) {
    .pb-snap-row.pb-pk-row { grid-template-columns: 1.3fr repeat(3, 1fr) 1.2fr; font-size: 11.5px; }
    .pb-snap-row.pb-pk-row > :nth-child(6),
    .pb-snap-row.pb-pk-row > :nth-child(7),
    .pb-snap-row.pb-pk-row > :nth-child(8) { display: none; }
  }
  @media (max-width: 780px) {
    .pb-snap-row.pb-pk-row { grid-template-columns: 1.2fr repeat(3, 1fr); }
    .pb-snap-row.pb-pk-row > :nth-child(5) { display: none; }
  }
  .pb-snap-row .delta {
    text-align: right;
    font-size: 11.5px;
    font-weight: 700;
    color: #1c6e1c;
    font-variant-numeric: tabular-nums;
  }
  .pb-snap-row .delta.down { color: var(--fire-red); }
  .pb-snap-row .delta.flat { color: var(--detail-mute); }
  .pb-snap-row.pb-snap-head .delta { color: var(--detail-mute); font-weight: 800; }
  @media (max-width: 700px) {
    .pb-snap-row { grid-template-columns: 1.5fr 1fr 1fr 1fr; font-size: 12px; }
    .pb-snap-row .delta { display: none; }
  }

  /* Composition Mix sub-section title */
  .pb-mix-title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--fire-red); text-transform: uppercase;
    margin: 14px 0 6px;
  }
  .pb-mix-title:first-of-type { margin-top: 4px; }
  .pb-mix-table { margin-bottom: 6px; }

  /* Portfolio card */
  .pb-portfolio-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px;
  }
  .pb-portfolio-grid-stacked { grid-template-columns: 1fr; }
  @media (max-width: 1100px) { .pb-portfolio-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 1100px) { .pb-portfolio-grid-stacked { grid-template-columns: 1fr; } }
  .pb-portfolio-grid h4 {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--fire-red); margin-bottom: 10px; text-transform: uppercase;
  }
  .pb-port-list { display: flex; flex-direction: column; gap: 8px; }
  .pb-port-row { font-size: 12px; }
  .pb-port-row-top {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 3px;
  }
  .pb-port-row-top .lbl { color: var(--detail-text); font-weight: 600; }
  .pb-port-row-top .val {
    color: var(--fire-deep); font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .pb-port-row-top .pct { font-size: 10.5px; color: var(--detail-mute); margin-left: 6px; font-weight: 600; }
  .pb-port-row .track { background: #f5e8c8; border-radius: 99px; height: 8px; overflow: hidden; }
  .pb-port-row .fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--fire-red), var(--fire-orange));
    transition: width .5s ease;
  }
  .pb-port-row .fill.amber  { background: linear-gradient(90deg, var(--fire-orange), var(--fire-amber)); }
  .pb-port-row .fill.gold   { background: linear-gradient(90deg, var(--fire-amber), var(--fire-gold)); }
  .pb-port-row .fill.yellow { background: linear-gradient(90deg, var(--fire-gold), var(--fire-yellow)); }
  .pb-port-row .fill.crimson{ background: linear-gradient(90deg, #5a0a13, var(--fire-red)); }
  @media (max-width: 600px) { .pb-portfolio-grid { grid-template-columns: 1fr; } .pb-ytd-grid { grid-template-columns: 1fr; } }

  .pb-cta {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe5c4 100%);
    border: 1px solid var(--detail-border);
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(122,40,12,.1);
  }
  .pb-cta h3 { font-size: 22px; font-weight: 900; color: var(--fire-deep); margin-bottom: 8px; letter-spacing: -.3px; }
  .pb-cta p { font-size: 14px; color: var(--detail-mute); max-width: 560px; margin: 0 auto 22px; line-height: 1.55; }
  .pb-cta .pr-create-btn { padding: 14px 28px; font-size: 15px; }

  /* ============ Placements Register ============ */
  .placements-register {
    background: #f2eee6;
    border-top: 1px solid #e6dfd0;
    border-left: 1px solid #e6dfd0;
  }

  .pr-inner { max-width: none; margin: 0 auto; padding: 28px 16px 56px; }

  .pr-header {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
    border: 1px solid rgba(200, 32, 45, .18);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 10px 26px rgba(122, 40, 12, .10);
    background-color: #fff6e8;
    background-image:
      radial-gradient(circle at 92% -40%, rgba(255, 107, 26, .18) 0%, transparent 55%),
      radial-gradient(circle at 0% 135%, rgba(200, 32, 45, .10) 0%, transparent 52%),
      linear-gradient(180deg, #fff8ee 0%, #ffeed5 100%);
  }
  /* Fireplace-gradient top accent — signature Pyrion ember band. */
  .pr-header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fire-gold) 0%, var(--fire-orange) 40%, var(--fire-red) 72%, var(--fire-deep) 100%);
  }
  .pr-breadcrumb { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--fire-deep); margin-bottom: 6px; }
  .pr-title {
    font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px;
    color: var(--fire-deep);
  }
  .pr-sub { font-size: 13.5px; color: #6b4a32; max-width: 680px; line-height: 1.55; }

  .pr-header-text { flex: 1; min-width: 240px; }
  .pr-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

  /* ── New Hire Board · redesigned headliner ───────────────────────
     Dark ember "command view" hero with a forward-chevron flow motif
     evoking the Pre-Board → In-Board → On-Board → Day 1 funnel. */
  /* New Hire Board adds an icon + status pill on top of the shared surface. */
  .pr-header--hr-overview {
    align-items: center;
    gap: 18px;
  }
  /* Branded onboarding icon badge. */
  .pr-header--hr-overview .pr-header-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--fire-amber) 0%, var(--fire-orange) 45%, var(--fire-red) 100%);
    box-shadow: 0 6px 16px rgba(200, 32, 45, .30), inset 0 1px 0 rgba(255, 255, 255, .40);
  }
  .pr-header--hr-overview .pr-header-icon svg { width: 26px; height: 26px; }
  /* Eyebrow rendered as a refined ember status pill. */
  .pr-header--hr-overview .pr-header-text::before {
    content: "● New Hire Onboarding";
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fire-deep);
    background: rgba(255, 168, 54, .14);
    border: 1px solid rgba(200, 32, 45, .26);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 11px;
  }
  .pr-header--hr-overview .pr-title {
    color: var(--fire-deep);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    text-shadow: none;
  }
  .pr-header--hr-overview .pr-sub {
    color: #6b4a32;
    max-width: 700px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 4px;
  }

  .pr-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 6px 16px rgba(200,32,45,.35);
  }
  .pr-create-btn svg { width: 18px; height: 18px; }
  .pr-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255,107,26,.5);
    filter: brightness(1.08);
  }

  .pr-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .pr-stats > div {
    background: #ffffff;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    padding: 10px 14px; min-width: 100px; text-align: center;
    box-shadow: 0 2px 6px rgba(122,40,12,.08);
  }
  .pr-stat-num { display: block; font-size: 20px; font-weight: 900; color: var(--fire-deep); }
  .pr-stat-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--detail-mute); margin-top: 2px; }

  /* Action buttons (Add / Import) — sit inline next to Reset in the filter toolbar */
  .pr-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
    border-radius: 8px; cursor: pointer; transition: all .25s; font-family: inherit;
    border: 1px solid transparent; white-space: nowrap;
  }
  .pr-action-btn svg { width: 14px; height: 14px; }
  .pr-action-btn.primary {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    box-shadow: 0 6px 16px rgba(200,32,45,.35);
  }
  .pr-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255,107,26,.5);
    filter: brightness(1.08);
  }
  .pr-action-btn.ghost {
    background: #fff;
    border-color: var(--fire-red);
    color: var(--fire-red);
  }
  .pr-action-btn.ghost:hover {
    background: var(--fire-red); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(200,32,45,.4);
  }

  /* ATS import modal */
  .ats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 10px;
  }
  .ats-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    cursor: pointer; text-align: left;
    transition: all .2s; font-family: inherit;
  }
  .ats-tile:hover {
    border-color: var(--fire-orange);
    background: linear-gradient(180deg, #fff8e7 0%, #fff4e2 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(122,40,12,.12);
  }
  .ats-tile.selected {
    border-color: var(--fire-red);
    background: linear-gradient(135deg, rgba(200,32,45,.06), rgba(255,107,26,.04));
    box-shadow: 0 0 0 2px rgba(200,32,45,.18);
  }
  .ats-name { font-size: 14px; font-weight: 800; color: var(--fire-deep); }
  .ats-desc { font-size: 11px; color: var(--detail-mute); }
  .ats-status { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; margin-top: 4px; }
  .ats-status.connected    { color: #1c6e1c; }
  .ats-status.disconnected { color: var(--detail-mute); }

  .ats-upload-zone {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 16px;
    background: #fffaf0;
    border: 2px dashed var(--detail-border);
    border-radius: 10px;
    cursor: pointer; transition: all .2s;
    color: var(--fire-deep);
  }
  .ats-upload-zone:hover {
    background: linear-gradient(180deg, #fff8e7 0%, #fff4e2 100%);
    border-color: var(--fire-orange);
  }
  .ats-upload-zone svg { width: 28px; height: 28px; color: var(--fire-orange); margin-bottom: 4px; }
  .ats-upload-title { font-size: 14px; font-weight: 700; }
  .ats-upload-sub { font-size: 11.5px; color: var(--detail-mute); letter-spacing: .3px; }
  .ats-file-readout {
    margin-top: 10px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--detail-border); border-radius: 8px;
    font-size: 13px; color: var(--detail-text);
  }
  .ats-file-readout strong { color: var(--fire-deep); }

  .pr-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
  .pr-search {
    flex: 1; min-width: 220px;
    padding: 9px 12px; font-size: 13.5px;
    background: #fff; border: 1px solid var(--detail-border); border-radius: 8px;
    color: var(--detail-text);
  }
  .pr-search:focus { outline: none; border-color: var(--fire-orange); box-shadow: 0 0 0 3px rgba(255,107,26,.18); }
  .pr-filter {
    padding: 9px 10px; font-size: 12.5px;
    background: #fff; border: 1px solid var(--detail-border); border-radius: 8px;
    color: var(--detail-text); cursor: pointer;
  }
  .pr-filter:focus { outline: none; border-color: var(--fire-orange); }
  .pr-reset {
    padding: 9px 14px; font-size: 12.5px; font-weight: 600;
    background: transparent; border: 1px solid var(--fire-red); border-radius: 8px;
    color: var(--fire-red); cursor: pointer; transition: all .2s;
  }
  .pr-reset:hover { background: var(--fire-red); color: #fff; }

  .pr-table-wrap { background: #fff; border-radius: 10px; border: 1px solid var(--detail-border); overflow: auto; box-shadow: 0 4px 16px var(--detail-shadow); max-height: 72vh; }
  .pr-table-wide { min-width: 1700px; }
  .pr-table-wide td { vertical-align: middle; padding: 9px 10px; font-size: 12px; }

  /* Consultant cell: avatar + name + IDs stack */
  .pr-consultant { display: flex; align-items: center; gap: 10px; min-width: 200px; }
  .pr-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; flex: none;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .pr-consultant-text { display: flex; flex-direction: column; line-height: 1.25; }
  .pr-consultant-name { font-weight: 700; color: var(--fire-deep); font-size: 12.5px; }
  .pr-consultant-ids { font-size: 10.5px; color: var(--detail-mute); font-variant-numeric: tabular-nums; }

  /* Type pill (W2 = blue, 1099 = cream/yellow, C2C = lavender) */
  .pr-type-pill {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  }
  .pr-type-pill.t-W2   { background: #d6e1f7; color: #1f3a73; }
  .pr-type-pill.t-1099 { background: #f7eccd; color: #7a5a18; }
  .pr-type-pill.t-C2C  { background: #e6dafa; color: #4a2d80; }

  /* Change pill (yellow capsule) */
  .pr-change-pill {
    display: inline-block; padding: 3px 9px; border-radius: 12px;
    font-size: 10.5px; font-weight: 700;
    background: #faedc6; color: #8a5a00;
  }
  .pr-dash { color: var(--detail-mute); }

  /* Order pill (SO/WO/PO — green capsule) */
  .pr-order-pill {
    display: inline-block; padding: 3px 8px; border-radius: 11px;
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: #d8efd8; color: #1f5e1f;
    white-space: nowrap;
  }
  .pr-order-pill.po { background: #f0e3cf; color: #6a4015; }

  /* Client PO pill (blue capsule) */
  .pr-client-po-pill {
    display: inline-block; padding: 3px 8px; border-radius: 11px;
    font-size: 10.5px; font-weight: 700;
    background: #dfe7f7; color: #2a3f6e;
    white-space: nowrap;
  }

  .pr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .pr-table thead th {
    background: linear-gradient(180deg, #fff4e2 0%, #ffe5c4 100%);
    color: var(--fire-deep); font-weight: 800; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
    text-align: left; padding: 10px 11px; border-bottom: 2px solid var(--fire-orange);
    white-space: nowrap; cursor: pointer; user-select: none;
    position: sticky; top: 0; z-index: 2;
  }
  .pr-table thead th.num { text-align: right; }
  .pr-table thead th.sorted-asc::after { content: " ▲"; color: var(--fire-red); }
  .pr-table thead th.sorted-desc::after { content: " ▼"; color: var(--fire-red); }
  .pr-table tbody tr { border-bottom: 1px solid #f0e3c8; transition: background .12s; cursor: pointer; }
  .pr-table tbody tr:hover { background: #fff8e7; }
  .pr-table td { padding: 8px 11px; color: var(--detail-text); white-space: nowrap; }
  .pr-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .pr-table td.id { font-family: monospace; font-size: 11.5px; color: var(--fire-deep); font-weight: 700; }
  .status-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; }
  .pill-Active { background: #d6f3d6; color: #1c6e1c; }
  .pill-Approved { background: #fff0b3; color: #8a5a00; }
  .pill-Completed { background: #e0e0e0; color: #404040; }
  .pill-Closed { background: #d0d0d0; color: #303030; }
  .pill-OnHold { background: #ffe0b3; color: #8a4500; }
  .pill-Cancelled { background: #f0c0c0; color: #7a1a1a; }
  .pill-EarlyTerminated { background: #f0d0d0; color: #6a1a1a; }
  .pill-Submitted { background: #d6e7fb; color: #1d4f8a; }
  .pill-Pending   { background: #fff0b3; color: #8a5a00; }
  .pill-Rejected  { background: #f5c6cb; color: #842029; }
  .pill-ExpiringSoon     { background: #ffe0b3; color: #8a4500; }
  .pill-PendingSignature { background: #d6e7fb; color: #1d4f8a; }
  .pill-Expired          { background: #f0c0c0; color: #7a1a1a; }
  .pill-Auto-Renewed     { background: #d6f3d6; color: #1c6e1c; }
  .pill-Terminated       { background: #d0d0d0; color: #303030; }

  /* ===== MSA Book table — all 12 columns fit edge-to-edge ===== */
  .msa-table-wrap { max-height: 72vh; }
  .msa-table { table-layout: fixed; width: 100%; min-width: 0; font-size: 15.5px; }
  .msa-table thead th {
    font-size: 12.5px;
    letter-spacing: .6px;
    padding: 14px 10px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
    vertical-align: middle;
    text-align: center;
    min-height: 56px;
  }
  .msa-table tbody td {
    padding: 16px 10px;
    font-size: 15.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: center;
  }
  .msa-table tbody td.id { font-size: 13.5px; }
  /* Text-heavy columns: left-align for natural reading.        */
  /* Numeric columns: right-align for tabular comparison.        */
  .msa-table th:nth-child(1),  .msa-table td:nth-child(1),
  .msa-table th:nth-child(2),  .msa-table td:nth-child(2),
  .msa-table th:nth-child(11), .msa-table td:nth-child(11) {
    text-align: left;
  }
  .msa-table th:nth-child(5),  .msa-table td:nth-child(5),
  .msa-table th:nth-child(8),  .msa-table td:nth-child(8),
  .msa-table th:nth-child(9),  .msa-table td:nth-child(9) {
    text-align: right;
  }

  /* ===== MSA Effective Dates view ===== */
  .ed-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.15fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 1200px) { .ed-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 760px)  { .ed-grid { grid-template-columns: 1fr; } }
  .ed-grid > .pb-kpi-card { margin-bottom: 0; }

  .ed-cohort-list { display: flex; flex-direction: column; gap: 10px; }
  .ed-cohort-row {
    display: grid; grid-template-columns: minmax(140px, 1.4fr) 1fr 60px;
    align-items: center; gap: 12px;
    font-size: 13px;
  }
  .ed-cohort-label { color: var(--detail-text); font-weight: 600; }
  .ed-cohort-track {
    background: #f5e8c8; border-radius: 99px; height: 12px; overflow: hidden;
  }
  .ed-cohort-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--fire-red), var(--fire-orange));
    transition: width .5s ease;
  }
  .ed-cohort-fill.amber { background: linear-gradient(90deg, var(--fire-orange), var(--fire-amber)); }
  .ed-cohort-num {
    text-align: right; font-weight: 800; color: var(--fire-deep);
    font-variant-numeric: tabular-nums; font-size: 13px;
  }

  .ed-recent-table { font-size: 12.5px; table-layout: auto; }
  .ed-recent-table th { font-size: 10.5px; padding: 9px 8px; text-align: left; }
  .ed-recent-table td { padding: 9px 8px; }

  /* ===== MSA module — workflow lists, clause cards, template tiles ===== */
  .msa-workflow {
    list-style: none; padding: 0; margin: 0;
    counter-reset: msa-step;
  }
  .msa-workflow li {
    position: relative;
    padding: 10px 12px 10px 44px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
    border: 1px solid var(--detail-border);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--detail-text);
    counter-increment: msa-step;
  }
  .msa-workflow li::before {
    content: counter(msa-step);
    position: absolute; left: 12px; top: 10px;
    width: 22px; height: 22px;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff; font-size: 12px; font-weight: 800;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .msa-workflow li strong { color: var(--fire-deep); }

  .msa-clause-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .msa-clause-card {
    background: #fff;
    border: 1px solid var(--detail-border);
    border-left: 4px solid var(--fire-orange);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(122,40,12,.08);
    display: flex; flex-direction: column; gap: 8px;
  }
  .msa-clause-card.msa-clause-tier-premium { border-left-color: var(--fire-red); }
  .msa-clause-card.msa-clause-tier-custom  { border-left-color: var(--fire-deep); }
  .msa-clause-head { display: flex; justify-content: space-between; gap: 10px; }
  .msa-clause-cat {
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--fire-red); text-transform: uppercase;
  }
  .msa-clause-tier {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
    background: #f0e3c8; color: var(--fire-deep);
  }
  .msa-clause-card.msa-clause-tier-premium .msa-clause-tier { background: #ffe0b3; color: #8a4500; }
  .msa-clause-card.msa-clause-tier-custom  .msa-clause-tier { background: #f0c0c0; color: #7a1a1a; }
  .msa-clause-card h4 {
    font-size: 15.5px; font-weight: 800; color: var(--fire-deep); margin: 0;
    letter-spacing: -.1px;
  }
  .msa-clause-desc { font-size: 13px; color: var(--detail-text); line-height: 1.5; margin: 0; }
  .msa-clause-use { font-size: 12px; color: var(--detail-mute); line-height: 1.5; margin: 0; }
  .msa-clause-use strong { color: var(--fire-deep); }
  .msa-clause-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

  .msa-template-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .msa-template-tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
    border: 2px solid var(--detail-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
  }
  .msa-template-tile:has(input:checked) {
    border-color: var(--fire-orange);
    box-shadow: 0 4px 14px rgba(255,107,26,.18);
  }
  .msa-template-tile input { display: none; }
  .msa-template-tile strong { font-size: 14.5px; color: var(--fire-deep); }
  .msa-template-tile span { font-size: 12.5px; color: var(--detail-mute); line-height: 1.45; }

  .msa-clause-checks {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .msa-clause-checks label {
    font-size: 13px; color: var(--detail-text);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: #fff8e7; border: 1px solid var(--detail-border);
    border-radius: 6px;
  }
  /* Column widths sum to 100% of the available space. */
  .msa-table th:nth-child(1),  .msa-table td:nth-child(1)  { width: 9%; }   /* MSA #         */
  .msa-table th:nth-child(2),  .msa-table td:nth-child(2)  { width: 14%; white-space: normal; word-break: break-word; }  /* Client */
  .msa-table th:nth-child(3),  .msa-table td:nth-child(3)  { width: 7.5%; } /* Effective     */
  .msa-table th:nth-child(4),  .msa-table td:nth-child(4)  { width: 7.5%; } /* Expires       */
  .msa-table th:nth-child(5),  .msa-table td:nth-child(5)  { width: 5.5%; } /* Term          */
  .msa-table th:nth-child(6),  .msa-table td:nth-child(6)  { width: 6%; }   /* Auto-Renew    */
  .msa-table th:nth-child(7),  .msa-table td:nth-child(7)  { width: 6.5%; } /* Payment       */
  .msa-table th:nth-child(8),  .msa-table td:nth-child(8)  { width: 7%; }   /* Liab. Cap     */
  .msa-table th:nth-child(9),  .msa-table td:nth-child(9)  { width: 6%; }   /* Conv. Fee     */
  .msa-table th:nth-child(10), .msa-table td:nth-child(10) { width: 6.5%; } /* Non-Solicit   */
  .msa-table th:nth-child(11), .msa-table td:nth-child(11) { width: 11%; white-space: normal; word-break: break-word; }  /* Account Mgr */
  .msa-table th:nth-child(12), .msa-table td:nth-child(12) { width: 13.5%; } /* Status      */

  .pr-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 16px; flex-wrap: wrap; }
  .pr-pagination button {
    padding: 6px 11px; min-width: 34px; font-size: 12px; font-weight: 600;
    background: #fff; border: 1px solid var(--detail-border); border-radius: 6px;
    color: var(--detail-text); cursor: pointer; transition: all .15s;
  }
  .pr-pagination button:hover:not(:disabled) { background: rgba(255,107,26,.1); border-color: var(--fire-orange); color: var(--fire-red); }
  .pr-pagination button:disabled { opacity: .35; cursor: not-allowed; }
  .pr-pagination button.current { background: linear-gradient(135deg, var(--fire-red), var(--fire-orange)); color: #fff; border-color: transparent; box-shadow: 0 3px 8px rgba(200,32,45,.35); }
  .pr-pagination span { padding: 0 4px; color: var(--detail-mute); font-size: 12px; }

  /* Detail panel */
  .pr-detail { position: fixed; inset: 0; z-index: 500; }
  .pr-detail-backdrop { position: absolute; inset: 0; background: rgba(20,8,4,.55); backdrop-filter: blur(3px); animation: prFadeIn .22s ease; }
  .pr-detail-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(640px, 92vw); background: #fff;
    box-shadow: -16px 0 40px rgba(0,0,0,.4);
    overflow-y: auto;
    animation: prSlideIn .3s ease;
    border-left: 3px solid var(--fire-orange);
  }
  @keyframes prFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes prSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .pr-detail-head { padding: 22px 26px 18px; background: linear-gradient(135deg, #2b1810 0%, #1a0d07 100%); color: var(--text-warm); position: sticky; top: 0; z-index: 1; }
  .pr-detail-head h3 { font-size: 21px; font-weight: 900; margin: 10px 0 4px; color: #fff8e7; letter-spacing: -.3px; }
  .pr-detail-head p { font-size: 13px; color: var(--text-mute); }
  .pr-detail-id { display: inline-block; font-family: monospace; font-size: 11.5px; padding: 3px 9px; background: rgba(255,200,60,.18); color: var(--fire-yellow); border-radius: 4px; letter-spacing: .5px; margin-right: 8px; }
  .pr-detail-status-pill { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 10.5px; font-weight: 700; }
  .pr-detail-close {
    position: absolute; top: 14px; right: 16px;
    background: rgba(255,255,255,.12); border: none; color: #fff8e7;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer; transition: all .2s;
  }
  .pr-detail-close:hover { background: rgba(255,107,26,.5); transform: rotate(90deg); }

  .pr-detail-body { padding: 22px 26px 30px; color: var(--detail-text); }
  .pr-detail-section { margin-bottom: 22px; }
  .pr-detail-section h4 {
    font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    color: var(--fire-red); margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--detail-border); text-transform: uppercase;
  }
  .pr-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .pr-detail-grid > div { font-size: 13px; }
  .pr-detail-grid label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--detail-mute); margin-bottom: 3px; text-transform: uppercase; }
  .pr-detail-grid .v { display: block; color: var(--detail-text); font-weight: 600; word-wrap: break-word; }
  .pr-detail-grid .v.big { font-weight: 800; color: var(--fire-deep); font-size: 15px; }
  .pr-detail-grid .v.money { font-variant-numeric: tabular-nums; }
  .pr-detail-grid .v.green { color: #1c6e1c; }
  .pr-detail-grid .v.red { color: var(--fire-deep); }

  @media (max-width: 700px) {
    .pr-detail-panel { width: 100vw; }
    .pr-detail-grid { grid-template-columns: 1fr; }
    .pr-stats { width: 100%; }
    .pr-stats > div { flex: 1; min-width: 0; }
    .pr-title { font-size: 22px; }
  }

  /* ============ New Placements Approval queue ============ */
  .npa-view {
    display: none;
    background: linear-gradient(180deg, #f5e3c0 0%, #ebd09a 50%, #ddb877 100%);
    border-top: 1px solid rgba(200,32,45,.25);
  }
  .layout.npa-active .npa-view { display: block; }
  .layout.npa-active .hero,
  .layout.npa-active .modules-section,
  .layout.npa-active .placements-board,
  .layout.npa-active .placements-register { display: none; }

  .npa-inner { max-width: 1320px; margin: 0 auto; padding: 28px 16px 56px; }

  .npa-header {
    position: relative; overflow: hidden;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; margin-bottom: 20px; flex-wrap: wrap;
    padding: 22px 26px;
    border: 1px solid rgba(200, 32, 45, .18);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 10px 26px rgba(122, 40, 12, .10);
    background-color: #fff6e8;
    background-image:
      radial-gradient(circle at 92% -40%, rgba(255, 107, 26, .18) 0%, transparent 55%),
      radial-gradient(circle at 0% 135%, rgba(200, 32, 45, .10) 0%, transparent 52%),
      linear-gradient(180deg, #fff8ee 0%, #ffeed5 100%);
  }
  .npa-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--fire-gold) 0%, var(--fire-orange) 40%, var(--fire-red) 72%, var(--fire-deep) 100%);
  }
  .npa-header-text { flex: 1; min-width: 240px; }
  .npa-breadcrumb { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--fire-deep); margin-bottom: 6px; }
  .npa-title { font-size: 28px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 6px; color: var(--fire-deep); }
  .npa-sub { font-size: 13.5px; color: var(--fire-deep); max-width: 720px; line-height: 1.5; }

  .npa-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .npa-stats > div {
    background: #fff; border: 1px solid var(--detail-border); border-radius: 10px;
    padding: 10px 14px; min-width: 90px; text-align: center;
    box-shadow: 0 2px 6px rgba(122,40,12,.08);
  }
  .npa-stat-num { display: block; font-size: 20px; font-weight: 900; color: var(--fire-deep); font-variant-numeric: tabular-nums; }
  .npa-stat-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--detail-mute); margin-top: 2px; text-transform: uppercase; }

  .npa-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }

  .npa-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 14px;
  }
  .npa-card {
    background: #fff;
    border: 1px solid var(--detail-border);
    border-left: 4px solid var(--fire-orange);
    border-radius: 10px;
    padding: 16px 18px 14px;
    box-shadow: 0 4px 14px rgba(122,40,12,.08);
    transition: all .2s;
    display: flex; flex-direction: column;
  }
  .npa-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(122,40,12,.15); }
  .npa-card.changing-status {
    opacity: .35; pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    transform: translateX(20px);
  }

  .npa-card-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-bottom: 6px;
  }
  .npa-card-id { font-family: monospace; font-size: 11px; font-weight: 700; color: var(--fire-deep); letter-spacing: .3px; }
  .npa-card-meta {
    display: flex; gap: 6px; align-items: center;
    font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  }
  .npa-card-type {
    padding: 2px 7px; border-radius: 4px;
    background: rgba(255,107,26,.12); color: var(--fire-red);
  }
  .npa-card-band {
    padding: 2px 7px; border-radius: 4px;
    background: rgba(122,40,12,.08); color: var(--detail-mute);
  }

  .npa-card h3 {
    font-size: 16px; font-weight: 800; color: var(--fire-deep);
    margin: 4px 0 6px; letter-spacing: -.2px; line-height: 1.25;
  }
  .npa-card-cust {
    font-size: 13px; color: var(--detail-text); font-weight: 600;
    margin-bottom: 10px;
  }
  .npa-card-cust .loc { font-weight: 400; color: var(--detail-mute); }

  .npa-card-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px;
    padding: 10px 0;
    border-top: 1px solid #f0e3c8;
    border-bottom: 1px solid #f0e3c8;
    margin-bottom: 12px;
  }
  .npa-card-grid > div { font-size: 11.5px; }
  .npa-card-grid label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; color: var(--detail-mute); margin-bottom: 1px; text-transform: uppercase; }
  .npa-card-grid .v { display: block; color: var(--fire-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

  .npa-card-ro { font-size: 11.5px; color: var(--detail-mute); margin-bottom: 12px; }
  .npa-card-ro strong { color: var(--fire-deep); }

  .npa-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: auto;
  }
  .npa-btn {
    flex: 1; min-width: 70px;
    padding: 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; transition: all .2s; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  }
  .npa-btn svg { width: 12px; height: 12px; }
  .npa-btn.review { background: #fff; border-color: var(--detail-border); color: var(--detail-text); }
  .npa-btn.review:hover { background: #fff8e7; border-color: var(--fire-amber); color: var(--fire-deep); }
  .npa-btn.approve { background: linear-gradient(135deg, #2c8a2c, #5fb55f); color: #fff; box-shadow: 0 3px 8px rgba(28,110,28,.3); }
  .npa-btn.approve:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(28,110,28,.45); }
  .npa-btn.hold { background: linear-gradient(135deg, #c8801c, #e8a836); color: #fff; box-shadow: 0 3px 8px rgba(200,128,28,.3); }
  .npa-btn.hold:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(232,168,54,.45); }
  .npa-btn.clarify { background: #fff; border-color: var(--detail-border); color: var(--fire-deep); }
  .npa-btn.clarify:hover { background: rgba(255,107,26,.08); border-color: var(--fire-orange); color: var(--fire-red); }
  .npa-btn.reject { background: #fff; border-color: var(--fire-red); color: var(--fire-red); }
  .npa-btn.reject:hover { background: var(--fire-red); color: #fff; box-shadow: 0 4px 10px rgba(200,32,45,.4); }

  .npa-empty {
    background: #fff; border: 1px solid var(--detail-border); border-radius: 10px;
    padding: 60px 24px; text-align: center; color: var(--detail-mute);
    font-size: 16px; font-weight: 600;
  }

  /* Action footer at the bottom of the detail panel */
  .pr-detail-actions {
    position: sticky; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.6), #fff);
    padding: 18px 26px 22px;
    border-top: 1px solid var(--detail-border);
    box-shadow: 0 -8px 18px rgba(0,0,0,.06);
  }
  .pr-detail-actions-label {
    font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    color: var(--fire-red); margin-bottom: 10px; text-transform: uppercase;
  }
  .pr-detail-actions-msg {
    margin-top: 10px; padding: 10px 12px;
    border-radius: 6px; font-size: 12.5px; font-weight: 600;
  }
  .pr-detail-actions-msg.success { background: #d6f3d6; color: #1c6e1c; border-left: 3px solid #1c6e1c; }
  .pr-detail-actions-msg.error   { background: #f9d6d6; color: #8a1c1c; border-left: 3px solid var(--fire-red); }

  /* ============ Create New Placement form ============ */
  .pr-create { position: fixed; inset: 0; z-index: 600; }
  .pr-form { padding: 22px 26px 30px; color: var(--detail-text); }
  .pr-form-section { margin-bottom: 22px; }
  .pr-form-section h4 {
    font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    color: var(--fire-red); margin-bottom: 14px; padding-bottom: 6px;
    border-bottom: 1px solid var(--detail-border); text-transform: uppercase;
  }
  .pr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .pr-field { display: flex; flex-direction: column; }
  .pr-field.span-2 { grid-column: span 2; }
  .pr-field label {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    color: var(--detail-mute); margin-bottom: 6px; text-transform: uppercase;
  }
  .pr-field .req { color: var(--fire-red); margin-left: 2px; }
  .pr-field input,
  .pr-field select {
    padding: 9px 11px; font-size: 13.5px;
    background: #fff; border: 1px solid var(--detail-border); border-radius: 7px;
    color: var(--detail-text); font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  .pr-field input:focus, .pr-field select:focus {
    outline: none; border-color: var(--fire-orange);
    box-shadow: 0 0 0 3px rgba(255,107,26,.15);
  }
  .pr-readout {
    padding: 9px 11px; font-size: 14px;
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
    border: 1px solid var(--detail-border); border-radius: 7px;
    color: var(--fire-deep); font-weight: 700; font-variant-numeric: tabular-nums;
    min-height: 36px; display: flex; align-items: center;
  }

  .pr-form-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding-top: 12px; border-top: 1px solid var(--detail-border);
    margin-top: 8px;
  }
  .pr-form-cancel,
  .pr-form-submit {
    padding: 11px 22px; font-size: 14px; font-weight: 700;
    border-radius: 8px; cursor: pointer;
    transition: all .2s; border: 1px solid transparent;
    font-family: inherit;
  }
  .pr-form-cancel {
    background: transparent;
    border-color: var(--detail-border);
    color: var(--detail-mute);
  }
  .pr-form-cancel:hover {
    background: rgba(122,40,12,.06);
    color: var(--detail-text);
  }
  .pr-form-submit {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    box-shadow: 0 4px 12px rgba(200,32,45,.35);
  }
  .pr-form-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,107,26,.5); }

  .pr-form-msg {
    margin-top: 14px; padding: 12px 14px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
  }
  .pr-form-msg.success { background: #d6f3d6; color: #1c6e1c; border-left: 4px solid #1c6e1c; }
  .pr-form-msg.error   { background: #f9d6d6; color: #8a1c1c; border-left: 4px solid var(--fire-red); }

  @media (max-width: 700px) {
    .pr-form-grid { grid-template-columns: 1fr; }
    .pr-field.span-2 { grid-column: span 1; }
  }

  /* Mobile: collapse sidebar into a horizontal strip above main, only visible when active */
  @media (max-width: 980px) {
    .layout { display: block; }
    .side-nav {
      position: static;
      width: 0;
      height: 0;
      padding: 0;
      border-right: none;
      border-bottom: none;
      transform: translateY(-10px);
    }
    .layout.has-sidebar .side-nav {
      width: 100%;
      height: auto;
      padding: 14px 0;
      border-bottom: 1px solid var(--border-warm);
      transform: translateY(0);
    }
    .side-nav-section-header { padding: 0 16px 12px; margin-bottom: 10px; }
    .side-nav-items { flex-direction: row; flex-wrap: wrap; padding: 0 12px; gap: 6px; }
    .side-nav-item { font-size: 12px; padding: 8px 10px; }
    .side-nav-item.active::before { display: none; }
  }

  /* -------- Hero (light cream panel — matches the rest of the right panel) -------- */
  main { position: relative; z-index: 1; flex: 1; min-width: 0; }
  /* ===== MODERN ANIMATED HERO =====
     A layered, alive background:
       · Slow-drifting mesh gradient (subtle color shift)
       · Two pulsing ember glow halos (left + right) with gentle scale+opacity breathing
       · Floating ember sparks rising from bottom to top
       · Animated gold shimmer along the top edge
       · Soft glass vignette in the corners */
  /* =====================================================================
     HERO · TECH-PREMIUM BACKGROUND  (IT-staffing palette)
     Layered for depth + modern tech feel:
       0. Deep navy-midnight base (cool, signals "software")
       1. Subtle hex/grid pattern overlay (circuit-board texture)
       2. Cyan + magenta + amber blob mesh (drifts via .hero-inner::before)
       3. Diagonal aurora sweep
       4. Brand ember halos (warm anchor · keeps the Pyrion ID)
       5. Glowing top + bottom edges
     ===================================================================== */
  /* ============================================================
     PYRION HERO · WORLD-CLASS  ·  v3.0
     A composition built like a magazine cover:
       · Carefully-tuned 8-color base gradient (cream→amber→copper)
       · Cinematic radial halos placed on the golden-ratio anchors
       · Premium SVG-noise grain for tactile depth (low opacity)
       · Diagonal aurora sweep + drifting mesh blobs
       · 12 rising ember sparks + 2 breathing halos (kept)
       · Tight inset rims top + bottom (warmth without flatness)
     ============================================================ */
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color-scheme: light;
    background:
      /* Ember glow centered on the headline — the brand spark */
      radial-gradient(ellipse 90% 55% at 50% 30%, rgba(255,168,54,.45) 0%, transparent 65%),
      /* Hot orange ember · upper-left */
      radial-gradient(ellipse 55% 60% at 22% 22%, rgba(255,107,26,.40) 0%, transparent 55%),
      /* Gold halo · upper-right (lion's mane glow) */
      radial-gradient(ellipse 50% 58% at 80% 26%, rgba(255,200,80,.45) 0%, transparent 55%),
      /* Deep red ember floor · bottom-center (fireplace mouth) */
      radial-gradient(ellipse 80% 55% at 50% 100%, rgba(200,32,45,.45) 0%, transparent 55%),
      /* Side warmth */
      radial-gradient(ellipse 35% 50% at 4% 70%, rgba(255,138,40,.30) 0%, transparent 60%),
      radial-gradient(ellipse 35% 50% at 96% 65%, rgba(255,168,54,.28) 0%, transparent 60%),
      /* Charcoal vignette · corners */
      radial-gradient(ellipse 120% 85% at 50% 100%, rgba(20,8,2,.45) 0%, transparent 70%),
      /* 8-stop refined base · classic Pyrion fireplace · amber → ember → cocoa */
      linear-gradient(178deg,
        #d4924a 0%,
        #c47230 14%,
        #a85820 30%,
        #8a3e14 48%,
        #6a2a0e 64%,
        #4a180a 78%,
        #2e0e06 90%,
        #160804 100%);
    padding: 100px 0 92px;
    border-top: 1px solid rgba(255,220,150,.85);
    border-bottom: 1px solid rgba(140,80,40,.65);
    box-shadow:
      inset 0 10px 50px rgba(255,251,240,.55),
      inset 0 -28px 70px rgba(120,60,20,.32);
  }
  /* Premium tactile grain · SVG noise at low opacity for "magazine print" feel. */
  .hero::before,
  .hero .hero-grain {
    content:""; position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.20  0 0 0 0 0.04  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
    opacity: .25;
    mix-blend-mode: multiply;
  }
  /* The original top shimmer line now needs to live elsewhere — push it via .hero-grain pseudo. */
  .hero .hero-grain::after {
    content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--fire-red), var(--fire-orange), var(--fire-gold), var(--fire-orange), var(--fire-red), transparent);
    background-size: 200% 100%;
    animation: heroShimmer 6s linear infinite;
    z-index: 5;
  }
  /* Override the legacy ::before shimmer rule — the grain layer now owns ::before. */
  /* Subtle hex / micro-grid pattern overlay (circuit-board texture). */
  .hero .hero-grid {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 85%);
    opacity: .55;
  }
  /* Slow vertical "data stream" scan lines — barely visible but adds tech motion. */
  .hero .hero-grid::after {
    content:""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 18px,
      rgba(56,189,248,.04) 19px, rgba(56,189,248,.04) 20px);
    animation: heroDataStream 28s linear infinite;
  }
  @keyframes heroDataStream {
    0%   { background-position-y: 0; }
    100% { background-position-y: 200px; }
  }
  /* Animated mesh-gradient sheet — three large blobs that slowly drift.
     This creates the alive "molten plasma" feel against the dark base. */
  .hero::after {
    /* See pre-existing rule below — kept for the breathing ember halos. */
  }
  /* New: an animated mesh sheet behind everything else, painted via a
     pseudo on .hero-inner so .hero::before / ::after stay as they were. */
  .hero-inner::before {
    content:""; position: absolute;
    inset: -10% -8% -10% -8%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 22% 28%, rgba(255,107,26,.60)    0%, transparent 32%),
      radial-gradient(circle at 80% 32%, rgba(255,200,80,.60)    0%, transparent 32%),
      radial-gradient(circle at 50% 82%, rgba(200,32,45,.55)     0%, transparent 38%),
      radial-gradient(circle at 14% 86%, rgba(255,168,54,.48)    0%, transparent 30%),
      radial-gradient(circle at 92% 86%, rgba(255,224,102,.50)   0%, transparent 28%),
      radial-gradient(circle at 50% 4%,  rgba(255,245,220,.28)   0%, transparent 24%);
    filter: blur(78px) saturate(1.25) brightness(1.05);
    animation: heroMeshDrift 22s ease-in-out infinite;
    opacity: .90;
  }
  @keyframes heroMeshDrift {
    0%, 100% { transform: translate(0,   0)   scale(1);    }
    25%      { transform: translate(20px,-12px) scale(1.04); }
    50%      { transform: translate(-14px,18px) scale(.98);  }
    75%      { transform: translate(8px,  -8px) scale(1.05); }
  }
  /* Make sure hero-inner can host the absolutely-positioned mesh layer. */
  .hero-inner { position: relative; }
  /* Diagonal aurora sweep — a slow, soft band of light that travels across. */
  .hero .hero-aurora {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background: linear-gradient(115deg,
      transparent 0%,
      transparent 35%,
      rgba(255,200,80,.10) 45%,
      rgba(255,107,26,.16) 50%,
      rgba(255,200,80,.10) 55%,
      transparent 65%,
      transparent 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    animation: heroAuroraSweep 14s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes heroAuroraSweep {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
  }
  /* Top shimmer line. */
  .hero::before {
    content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--fire-red), var(--fire-orange), var(--fire-gold), var(--fire-orange), var(--fire-red), transparent);
    background-size: 200% 100%;
    animation: heroShimmer 6s linear infinite;
    z-index: 5;
  }
  @keyframes heroShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  /* Breathing ember-glow halos (2 stacked radials in a pseudo-element).
     Use background-size + animation on opacity + scale via filter. */
  .hero::after {
    content:""; position: absolute; inset: -8% -4% -8% -4%;
    pointer-events: none;
    background:
      radial-gradient(ellipse 45% 55% at 38% 38%, rgba(255,168,54,.36) 0%, transparent 60%),
      radial-gradient(ellipse 38% 62% at 78% 60%, rgba(255,107,26,.32) 0%, transparent 60%),
      radial-gradient(ellipse 30% 50% at 18% 80%, rgba(255,200,80,.18) 0%, transparent 60%);
    animation: heroHaloBreathe 7s ease-in-out infinite;
    z-index: 1;
    filter: blur(.5px);
  }
  @keyframes heroHaloBreathe {
    0%, 100% { transform: scale(.98) translateY(0);    opacity: .85; }
    50%      { transform: scale(1.04) translateY(-4px); opacity: 1; }
  }
  /* Floating ember particles — 12 tiny dots that rise from bottom to top,
     each with its own delay so the air looks alive with sparks. */
  .hero .hero-embers {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    overflow: hidden;
  }
  .hero .ember {
    position: absolute; bottom: -20px;
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #ffd166 0%, #ffa42c 45%, transparent 70%);
    box-shadow: 0 0 12px rgba(255,168,54,.85), 0 0 20px rgba(255,107,26,.45);
    opacity: 0;
    animation: heroEmberRise linear infinite;
  }
  @keyframes heroEmberRise {
    0%   { transform: translateY(0)    translateX(0)   scale(.6); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(-50vh) translateX(8px) scale(1);   opacity: .9; }
    90%  { opacity: .35; }
    100% { transform: translateY(-100vh) translateX(-6px) scale(.4); opacity: 0; }
  }
  /* 12 ember particles · distributed across the width with varied speeds + delays */
  .hero .ember:nth-child(1)  { left: 6%;   width:5px;  height:5px;  animation-duration: 11s; animation-delay: 0s;    }
  .hero .ember:nth-child(2)  { left: 14%;  width:4px;  height:4px;  animation-duration: 14s; animation-delay: 1.2s;  }
  .hero .ember:nth-child(3)  { left: 22%;  width:7px;  height:7px;  animation-duration: 9s;  animation-delay: 2.8s;  }
  .hero .ember:nth-child(4)  { left: 30%;  width:5px;  height:5px;  animation-duration: 12s; animation-delay: 4.0s;  }
  .hero .ember:nth-child(5)  { left: 39%;  width:6px;  height:6px;  animation-duration: 10s; animation-delay: 0.6s;  }
  .hero .ember:nth-child(6)  { left: 46%;  width:4px;  height:4px;  animation-duration: 13s; animation-delay: 3.2s;  }
  .hero .ember:nth-child(7)  { left: 55%;  width:6px;  height:6px;  animation-duration: 11s; animation-delay: 5.5s;  }
  .hero .ember:nth-child(8)  { left: 62%;  width:5px;  height:5px;  animation-duration: 9s;  animation-delay: 1.8s;  }
  .hero .ember:nth-child(9)  { left: 71%;  width:7px;  height:7px;  animation-duration: 14s; animation-delay: 3.8s;  }
  .hero .ember:nth-child(10) { left: 80%;  width:4px;  height:4px;  animation-duration: 12s; animation-delay: 2.2s;  }
  .hero .ember:nth-child(11) { left: 88%;  width:6px;  height:6px;  animation-duration: 10s; animation-delay: 4.8s;  }
  .hero .ember:nth-child(12) { left: 95%;  width:5px;  height:5px;  animation-duration: 13s; animation-delay: 0.4s;  }
  /* Mesh shimmer overlay — a slow-moving conic-style sweep for "alive" depth. */
  .hero .hero-mesh {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
      conic-gradient(from 0deg at 50% 50%,
        rgba(255,200,80,.06) 0deg,
        rgba(255,107,26,.10) 60deg,
        rgba(255,168,54,.05) 120deg,
        rgba(200,32,45,.08) 200deg,
        rgba(255,200,80,.06) 300deg,
        rgba(255,168,54,.10) 360deg);
    mix-blend-mode: screen;
    animation: heroMeshSpin 30s linear infinite;
    opacity: .7;
  }
  @keyframes heroMeshSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .hero > * { position: relative; z-index: 3; }
  /* Respect users who don't want motion. */
  @media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after,
    .hero .ember,
    .hero .hero-mesh,
    .hero .hero-aurora,
    .hero-inner::before,
    .hero .lion-svg {
      animation: none !important;
    }
  }
  .hero-inner {
    /* The lion now lives inside .hero-text (next to .hero-positioning), so
       hero-inner is a single column. */
    display: block;
    max-width: 1320px; margin: 0 auto;
    padding: 0 32px;
  }
  /* Spotlight row: positioning copy on the left, animated lion on the right.
     Stays side-by-side on virtually all viewports — collapse only when the
     viewport is genuinely small (≤ 560px). */
  /* Banner row: headline + slogan on the left, animated lion on the right. */
  .hero-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr);
    gap: 36px;
    align-items: center;
    margin: 0 0 8px;
  }
  .hero-banner-text {
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .hero-banner .hero-visual {
    height: auto;
    margin: 0;
    min-width: 0;
    justify-self: center;
  }
  .hero-banner .lion-svg {
    width: 100%; max-width: 320px; height: auto;
  }
  @media (max-width: 760px) {
    .hero-banner { grid-template-columns: 1fr; gap: 18px; }
    .hero-banner .hero-visual { order: -1; }
    .hero-banner .lion-svg { max-width: 220px; }
  }
  /* Positioning block returns to full-width below the banner. */
  .hero-positioning { max-width: none; }
  .hero-text h1 {
    font-weight: 900; line-height: 1.02;
    letter-spacing: -2px;
    color: #fff5e0;
    font-feature-settings: "ss01", "kern", "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow:
      0 2px 18px rgba(0,0,0,.55),
      0 1px 3px rgba(0,0,0,.85),
      0 0 36px rgba(255,168,54,.25);
    margin: 0;
  }
  /* ==================================================================
     POSTER HEADLINE
     Three-line stacked layout with "ignites" as the megaword centerpiece.
     Line 1 ("Where talent")     — small, cool cream
     Line 2 ("🔥 IGNITES" mega)  — huge italic fire-gradient word, animated
     Line 3 ("revenue capital.") — medium, white-cream
     ================================================================== */
  .hero-h1-poster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: .92;
  }
  .hero-h1-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0;
    white-space: nowrap;
    overflow: visible;
  }
  .hero-h1-row .hero-h1-mega {
    margin-bottom: 0;
    margin-right: -.18em;
    padding-right: 4px;
  }
  .hero-h1-row .hero-h1-post {
    flex-shrink: 0;
    line-height: .92;
    align-self: baseline;
    padding-bottom: .06em;
    margin-left: -.04em;
  }
  .hero-h1-pre,
  .hero-h1-post {
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1.5px;
    text-shadow:
      0 2px 14px rgba(0,0,0,.70),
      0 1px 3px  rgba(0,0,0,.92),
      0 0 1px    rgba(0,0,0,.85);
  }
  .hero-h1-pre  { font-size: clamp(28px, 3.0vw, 40px); color: #fbfbfd; opacity: 1; }
  .hero-h1-post { font-size: clamp(26px, 2.8vw, 38px); color: #ffffff; opacity: 1; }

  /* The megaword block — italic gradient + flame icon + trailing embers. */
  .hero-h1-mega {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    font-size: clamp(56px, 6.8vw, 92px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -3px;
    padding: 6px 14px 4px 12px;
    margin: 2px 0 6px;
    isolation: isolate;
  }
  /* Stage halo behind the megaword */
  .hero-h1-mega::before {
    content: ""; position: absolute;
    inset: -10% -8%;
    z-index: -1;
    background:
      radial-gradient(ellipse 85% 100% at 50% 55%, rgba(255,168,54,.42) 0%, transparent 65%),
      radial-gradient(ellipse 55% 70% at 25% 45%, rgba(255,107,26,.32) 0%, transparent 60%),
      radial-gradient(ellipse 55% 70% at 75% 60%, rgba(200,32,45,.30) 0%, transparent 60%);
    filter: blur(20px);
    animation: heroAccentHalo 3s ease-in-out infinite;
  }
  /* Animated underline · pulses like a flame line */
  .hero-h1-mega::after {
    content: ""; position: absolute;
    left: 14px; right: 18px; bottom: -2px;
    height: 6px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,200,80,.7) 12%,
      #ff7a18 35%,
      #ff2d4a 60%,
      #ff7a18 85%,
      transparent 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    filter: blur(2px) drop-shadow(0 0 12px rgba(255,107,26,.7));
    animation: heroH1Underline 3.5s ease-in-out infinite;
  }
  @keyframes heroH1Underline {
    0%, 100% { background-position: 0% 50%;   opacity: .85; }
    50%      { background-position: 100% 50%; opacity: 1;   }
  }

  /* The realistic flame SVG · multi-layer animated flame */
  .hero-h1-flame {
    width: .72em; height: 1.26em;
    flex-shrink: 0;
    align-self: flex-end;
    margin: 0 -.02em -.08em 0;
    overflow: visible;
    filter:
      brightness(1.1) saturate(1.25)
      drop-shadow(0 0 10px rgba(255,250,220,.95))
      drop-shadow(0 0 24px rgba(255,209,102,.85))
      drop-shadow(0 0 48px rgba(255,168,54,.70))
      drop-shadow(0 0 80px rgba(255,107,26,.55))
      drop-shadow(0 8px 22px rgba(200,32,45,.45));
    animation: heroH1FlameGlow 2.4s ease-in-out infinite;
  }
  @keyframes heroH1FlameGlow {
    0%, 100% {
      filter:
        brightness(1.1) saturate(1.25)
        drop-shadow(0 0 10px rgba(255,250,220,.95))
        drop-shadow(0 0 24px rgba(255,209,102,.85))
        drop-shadow(0 0 48px rgba(255,168,54,.70))
        drop-shadow(0 0 80px rgba(255,107,26,.55))
        drop-shadow(0 8px 22px rgba(200,32,45,.45));
    }
    50% {
      filter:
        brightness(1.3) saturate(1.45)
        drop-shadow(0 0 14px rgba(255,255,235,1))
        drop-shadow(0 0 34px rgba(255,220,130,.95))
        drop-shadow(0 0 64px rgba(255,168,54,.90))
        drop-shadow(0 0 110px rgba(255,107,26,.70))
        drop-shadow(0 10px 28px rgba(200,32,45,.60));
    }
  }
  /* Per-layer flame flickers · each at a different speed for realism */
  .hero-h1-flame .h1f-outer,
  .hero-h1-flame .h1f-mid,
  .hero-h1-flame .h1f-inner,
  .hero-h1-flame .h1f-core {
    transform-origin: 50% 96%;
    transform-box: fill-box;
  }
  .hero-h1-flame .h1f-outer { animation: h1fFlickerOuter 1.7s ease-in-out infinite; mix-blend-mode: screen; }
  .hero-h1-flame .h1f-mid   { animation: h1fFlickerMid   1.1s ease-in-out infinite; mix-blend-mode: screen; }
  .hero-h1-flame .h1f-inner { animation: h1fFlickerInner .73s ease-in-out infinite; mix-blend-mode: screen; }
  .hero-h1-flame .h1f-core  { animation: h1fFlickerCore  .47s ease-in-out infinite; }
  .hero-h1-flame .h1f-base  { animation: h1fBasePulse    1.9s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }

  @keyframes h1fFlickerOuter {
    0%, 100% { transform: scaleY(1)    scaleX(1)    skewX(-1.5deg) translateY(0); }
    33%      { transform: scaleY(1.07) scaleX(.96)  skewX(2deg)    translateY(-1px); }
    66%      { transform: scaleY(.96)  scaleX(1.04) skewX(-2deg)   translateY(.5px); }
  }
  @keyframes h1fFlickerMid {
    0%, 100% { transform: scaleY(1)    scaleX(1)    skewX(2deg)   translateY(0); }
    40%      { transform: scaleY(1.1)  scaleX(.92)  skewX(-3deg)  translateY(-1.5px); }
    70%      { transform: scaleY(.94)  scaleX(1.05) skewX(2.5deg) translateY(.5px); }
  }
  @keyframes h1fFlickerInner {
    0%, 100% { transform: scaleY(1)    scaleX(1)    skewX(-2deg) translateY(0); }
    25%      { transform: scaleY(1.13) scaleX(.88)  skewX(3deg)  translateY(-1.5px); }
    50%      { transform: scaleY(.9)   scaleX(1.08) skewX(-3deg) translateY(.5px); }
    75%      { transform: scaleY(1.05) scaleX(.95)  skewX(1.5deg) translateY(-.5px); }
  }
  @keyframes h1fFlickerCore {
    0%, 100% { transform: scaleY(1)    scaleX(1)    translateY(0); opacity: .92; }
    50%      { transform: scaleY(1.18) scaleX(.82)  translateY(-1.5px); opacity: 1; }
  }
  @keyframes h1fBasePulse {
    0%, 100% { transform: scaleX(1)    scaleY(1);    opacity: .85; }
    50%      { transform: scaleX(1.12) scaleY(1.15); opacity: 1; }
  }
  /* Rising ember particles · float up and fade */
  .hero-h1-flame .h1f-ember {
    animation: h1fEmberRise 2.6s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
  }
  .hero-h1-flame .h1f-ember-1 { animation-delay: 0s;    }
  .hero-h1-flame .h1f-ember-2 { animation-delay: .55s;  animation-duration: 2.1s; }
  .hero-h1-flame .h1f-ember-3 { animation-delay: 1.1s;  animation-duration: 3.0s; }
  .hero-h1-flame .h1f-ember-4 { animation-delay: 1.6s;  animation-duration: 2.4s; }
  .hero-h1-flame .h1f-ember-5 { animation-delay: 2.0s;  animation-duration: 2.8s; }
  @keyframes h1fEmberRise {
    0%   { opacity: 0; transform: translate(0, 6px)   scale(.5); }
    15%  { opacity: 1; }
    70%  { opacity: .7; }
    100% { opacity: 0; transform: translate(2px, -28px) scale(.2); }
  }

  /* Trailing ember dots after the word */
  .hero-h1-trail {
    position: relative; display: inline-flex;
    width: .8em; height: 100%;
    align-items: center; flex-shrink: 0;
  }
  .hero-h1-trail span {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 75%);
    box-shadow: 0 0 12px rgba(255,168,54,.85), 0 0 24px rgba(255,107,26,.45);
    animation: heroH1Trail 2.6s ease-in-out infinite;
    opacity: 0;
  }
  .hero-h1-trail span:nth-child(1) { left: 0;    top: 30%; animation-delay: 0s;   }
  .hero-h1-trail span:nth-child(2) { left: 38%;  top: 55%; animation-delay: .9s; width: 6px; height: 6px; }
  .hero-h1-trail span:nth-child(3) { left: 70%;  top: 25%; animation-delay: 1.8s; width: 5px; height: 5px; }
  @keyframes heroH1Trail {
    0%   { opacity: 0; transform: translate(0,   0)   scale(.6); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(20px,-30px) scale(.4); }
  }
  /* ==================================================================
     "ignites" megaword · World-class typographic moment v2
     Composition (back → front):
       1. Rotating radial halo behind the word (slow spin)
       2. Dimensional 3D text-shadow stack (depth)
       3. Solid bright cream letters with crimson outline
       4. 5-layer warm glow halo + dark drop for separation
       5. Pulse animation (glow breathes brighter)
       6. 5 sparkle decorations (random twinkles around the word)
       7. Trailing ember dots (already wired)
     ================================================================== */
  .hero-h1-mega .accent {
    display: inline-block;
    position: relative;
    z-index: 3;
    margin-left: 0;
    font-style: italic;
    transform: skewX(-3deg);
    /* Bright cream face with a warm-gold gradient inside the letter shape. */
    color: #fffaf0;
    background:
      linear-gradient(180deg,
        #ffffff 0%,
        #fff5d6 28%,
        #ffd166 58%,
        #ffa83a 82%,
        #ff7a18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.4px #7f1d1d;
    /* Stacked 3D extrusion under the letter + multi-layer warm aura. */
    text-shadow:
      1px  1px 0 #7f1d1d,
      2px  2px 0 rgba(127, 29, 29, .92),
      3px  3px 0 rgba(127, 29, 29, .78),
      4px  4px 0 rgba(127, 29, 29, .62),
      5px  5px 0 rgba(80, 14, 14, .50),
      6px  6px 1px rgba(40, 6, 4, .40),
      0 0 18px rgba(255, 230, 150, .85),
      0 0 36px rgba(255, 168, 54, .95),
      0 0 70px rgba(255, 107, 26, .65),
      0 14px 38px rgba(0, 0, 0, .55);
    /* Outer rim-light + soft global glow, animated. */
    filter:
      drop-shadow(0 0 14px rgba(255, 200, 80, .55))
      drop-shadow(0 0 30px rgba(255, 107, 26, .35));
    animation:
      heroAccentKindle 1.1s cubic-bezier(.2,.8,.2,1) both,
      heroAccentPulse 2.6s ease-in-out 1.1s infinite;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
    will-change: transform, filter;
  }
  .hero-h1-mega:hover .accent {
    transform: skewX(-3deg) scale(1.05) translateY(-1px);
  }
  @keyframes heroAccentPulse {
    0%, 100% {
      filter:
        drop-shadow(0 0 14px rgba(255, 200, 80, .55))
        drop-shadow(0 0 30px rgba(255, 107, 26, .35));
    }
    50% {
      filter:
        drop-shadow(0 0 22px rgba(255, 230, 150, .85))
        drop-shadow(0 0 48px rgba(255, 122, 24, .70))
        drop-shadow(0 0 84px rgba(200, 32, 45, .35));
    }
  }
  @keyframes heroAccentKindle {
    0%   { opacity: 0; transform: skewX(-3deg) scale(.86) translateY(8px); filter: blur(8px) drop-shadow(0 0 0 rgba(255,107,26,0)); }
    60%  { opacity: 1; transform: skewX(-3deg) scale(1.06) translateY(-2px); filter: blur(0) drop-shadow(0 0 40px rgba(255,200,80,.9)); }
    100% { opacity: 1; transform: skewX(-3deg) scale(1)    translateY(0);   filter: drop-shadow(0 0 14px rgba(255,200,80,.55)) drop-shadow(0 0 30px rgba(255,107,26,.35)); }
  }
  /* Bright top highlight running across the letters · cinematic shimmer. */
  .hero-h1-mega .accent::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(115deg,
        transparent 30%,
        rgba(255,255,255,.85) 48%,
        rgba(255,255,255,.0)  56%,
        transparent 70%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: blur(.4px);
    animation: heroAccentShimmer 4.8s ease-in-out infinite;
    z-index: 4;
  }

  /* Rotating radial halo · "live ember" feel behind the word. */
  .hero-h1-halo {
    position: absolute;
    inset: -20% -10%;
    z-index: 1;
    pointer-events: none;
    background:
      conic-gradient(from 0deg,
        rgba(255,200,80,.0)  0deg,
        rgba(255,168,54,.35) 60deg,
        rgba(255,107,26,.45) 130deg,
        rgba(200,32,45,.40)  200deg,
        rgba(255,107,26,.30) 270deg,
        rgba(255,200,80,.20) 330deg,
        rgba(255,200,80,.0)  360deg);
    filter: blur(30px);
    border-radius: 50%;
    animation: heroH1HaloSpin 18s linear infinite,
               heroH1HaloBreathe 4s ease-in-out infinite;
    opacity: .8;
  }
  @keyframes heroH1HaloSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes heroH1HaloBreathe {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
  }

  /* Sparkle decorations — 5 tiny twinkling stars around the word. */
  .hero-h1-sparks {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }
  .hero-h1-sparks .spark {
    position: absolute;
    width: 4px; height: 4px;
    background: radial-gradient(circle, #fffaf0 0%, #ffd166 40%, rgba(255,168,54,0) 75%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,209,102,.95), 0 0 16px rgba(255,168,54,.65);
    opacity: 0;
    animation: heroH1SparkTwinkle 2.8s ease-in-out infinite;
  }
  .hero-h1-sparks .spark::before,
  .hero-h1-sparks .spark::after {
    content:""; position: absolute; left: 50%; top: 50%;
    background: rgba(255,250,220,.95);
    transform-origin: center;
  }
  .hero-h1-sparks .spark::before {
    width: 14px; height: 1.2px;
    transform: translate(-50%,-50%);
  }
  .hero-h1-sparks .spark::after {
    width: 1.2px; height: 14px;
    transform: translate(-50%,-50%);
  }
  .hero-h1-sparks .spark-1 { top:  -8%;  left:  18%; animation-delay: 0s;   }
  .hero-h1-sparks .spark-2 { top:  92%;  left:  32%; animation-delay: .6s;  }
  .hero-h1-sparks .spark-3 { top: -12%;  left:  62%; animation-delay: 1.2s; }
  .hero-h1-sparks .spark-4 { top:  85%;  left:  74%; animation-delay: 1.8s; }
  .hero-h1-sparks .spark-5 { top:  10%;  left:  92%; animation-delay: 2.4s; width:6px; height:6px; }
  @keyframes heroH1SparkTwinkle {
    0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg);   }
    20%      { opacity: 1; transform: scale(1)  rotate(90deg);  }
    40%      { opacity: .6; transform: scale(1.2) rotate(180deg); }
    60%      { opacity: 0; transform: scale(.4) rotate(270deg); }
  }
  @keyframes heroAccentHalo {
    0%, 100% { opacity: .85; transform: scale(.97); }
    50%      { opacity: 1;   transform: scale(1.05); }
  }
  @keyframes heroAccentShimmer {
    0%, 100% { background-position:  0% 50%; }
    50%      { background-position: 260% 50%; }
  }
  @keyframes heroAccentSpark {
    0%, 100% { opacity: .65; transform: translateY(-50%) scale(.9); }
    50%      { opacity: 1;   transform: translateY(-60%) scale(1.05); }
  }
  @keyframes heroAccentShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .slogan { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 26px; align-items: center; }
  .slogan span {
    position: relative;
    font-size: 12.5px; font-weight: 900; letter-spacing: 5px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid rgba(184,69,26,.50);
    background: linear-gradient(135deg, rgba(255,255,250,.90), rgba(253,234,200,.78));
    color: #1a0604;
    box-shadow:
      0 4px 14px rgba(120,55,20,.12),
      inset 0 1px 0 rgba(255,255,255,.90);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: sloganGlow 2.8s ease-in-out infinite;
    -webkit-font-smoothing: antialiased;
  }
  .slogan span::before {
    content: "";
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #ea580c 0%, #c8202d 100%);
    box-shadow: 0 0 6px rgba(234,88,12,.65);
  }
  .slogan span { padding-left: 26px; }
  .slogan span:nth-child(2) { animation-delay: .35s; }
  .slogan span:nth-child(3) { animation-delay: .70s; }
  @keyframes sloganGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,168,54,.30);  color:#5a1a00;  border-color: rgba(184,69,26,.55); }
    50%      { box-shadow: 0 0 28px rgba(255,107,26,.55); color:#8a1a08;  border-color: rgba(255,107,26,.95); }
  }
  .hero-desc {
    font-size: 16.5px; line-height: 1.7;
    color: #fde7c8; max-width: 560px;
    margin-bottom: 32px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
    -webkit-font-smoothing: antialiased;
  }
  /* ====== ENGAGEMENT HUB · POSITIONING BLOCK (selling point) ========= */
  .hero-positioning {
    max-width: none;
    width: 100%;
    margin: 36px 0 28px;
    padding: 40px 44px 36px;
    background:
      /* Subtle inner ember glow · top */
      radial-gradient(ellipse 75% 90% at 50% 0%, rgba(255,200,80,.32) 0%, transparent 75%),
      /* Premium frosted-cream glass */
      linear-gradient(180deg, rgba(255,253,247,.92) 0%, rgba(255,242,222,.82) 100%);
    border: 1px solid rgba(184,69,26,.35);
    border-radius: 22px;
    backdrop-filter: blur(20px) saturate(1.20);
    -webkit-backdrop-filter: blur(20px) saturate(1.20);
    box-shadow:
      0 30px 60px -20px rgba(120,55,20,.30),
      0 12px 24px -8px rgba(120,55,20,.18),
      0 0 0 1px rgba(255,200,80,.25),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(184,69,26,.10);
    position: relative;
    overflow: hidden;
  }
  /* Decorative accent stripe at the top of the card */
  .hero-positioning::after {
    content:""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
    background: linear-gradient(90deg, transparent, #ea580c 25%, #c8202d 50%, #ea580c 75%, transparent);
    opacity: .55;
    z-index: 1;
  }
  .hero-positioning::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,200,80,.14) 45%, rgba(255,107,26,.10) 55%, transparent 100%);
    background-size: 200% 200%;
    animation: positioningShine 5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes positioningShine {
    0%, 100% { background-position: -50% 50%; }
    50%      { background-position: 150% 50%; }
  }
  .hero-positioning-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 13px;
    background: linear-gradient(135deg, #c8202d 0%, #ea580c 100%);
    color: #fffbeb;
    font-family: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.32);
    box-shadow:
      0 6px 14px rgba(200,32,45,.32),
      inset 0 1px 0 rgba(255,255,255,.30);
    margin-bottom: 18px;
    position: relative;
  }
  .positioning-pulse {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%;
    background: #ffd166;
    box-shadow: 0 0 0 0 rgba(255,168,54,.75);
    animation: pulseDot 1.8s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0   rgba(255,168,54,.75); transform: scale(1);   }
    70%  { box-shadow: 0 0 0 10px rgba(255,168,54,0);   transform: scale(1.2); }
    100% { box-shadow: 0 0 0 0   rgba(255,168,54,0);   transform: scale(1);   }
  }
  .hero-positioning-headline {
    margin: 6px 0 22px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 900;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: #1a0604;
    font-feature-settings: "kern", "liga", "dlig", "lnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Four-layer letterpress · top highlight · cream haze · ink shadow ·
       soft ember bloom · for true cream-paper-printed depth. */
    text-shadow:
      0 1px 0    rgba(255, 252, 245, .98),
      0 -1px 0   rgba(255, 240, 215, .55),
      0 2px 1px  rgba(120, 30, 14, .22),
      0 8px 22px rgba(120, 30, 14, .14);
    position: relative;
  }
  /* Optical refinement · neutralizes the inherited italic kerning on the
     block-level tagline below the title. */
  .hero-positioning-headline .positioning-tagline { letter-spacing: 0; }

  /* ═══════════════════════════════════════════════════════════════
     MEET THE ENGAGEMENT HUB · Final composition · v-clean
     ─────────────────────────────────────────────────────────────
     Three elements, all pure typography, none can break:
       1. .hub-title-lockup       Headline + subtitle as a paired block
       2. .hub-manifesto          One-line "Mind. Heart. Spine. Nerve." statement
       3. .hub-pillars            3 numbered pillar tiles (13 · 11 · 0)
     Then existing .hero-positioning-pitch + aphorism + stats follow.
     ═══════════════════════════════════════════════════════════════ */

  /* 1 · TITLE LOCKUP · Headline + subtitle stacked tight as a unit. */
  .hub-title-lockup {
    display: block;
    margin: 6px 0 22px;
    position: relative;
  }
  .hub-title-lockup .hub-title-main {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 3.0vw, 40px);
    font-weight: 900;
    font-style: normal;
    line-height: 1.04;
    letter-spacing: -1.4px;
    color: #1a0604;
    text-shadow: 0 1px 0 rgba(255, 252, 240, .85);
  }
  .hub-title-lockup .hub-title-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin: 8px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #2a0e04;
  }
  .hub-title-lockup .hub-sub-bold {
    font-weight: 800;
    color: #1a0604;
  }
  .hub-title-lockup .hub-sub-fade {
    font-style: italic;
    font-weight: 500;
    color: rgba(58, 28, 12, .55);
    font-size: .8em;
  }
  .hub-title-lockup .hub-sub-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: .82em;
    color: #8a1818;
    letter-spacing: 0;
    padding: 1px 7px;
    border: 1px solid rgba(184, 69, 26, .35);
    border-radius: 5px;
    background: rgba(255, 248, 232, .65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  }

  /* 2 · MANIFESTO LINE · "Mind. Heart. Spine. Nerve." + tail clause */
  .hub-manifesto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 0;
    margin: 0 0 20px;
    padding: 14px 0 16px;
    border-top: 1px solid rgba(184, 69, 26, .22);
    border-bottom: 1px solid rgba(184, 69, 26, .22);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.3;
  }
  .hub-manifesto .manifesto-organ {
    display: inline-block;
    margin-right: 14px;
    font-size: clamp(17px, 1.7vw, 21px);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.4px;
    color: #8a1818;
    text-shadow: 0 1px 0 rgba(255, 252, 240, .60);
  }
  .hub-manifesto .manifesto-dot {
    display: inline-block;
    width: 5px; height: 5px;
    margin: 0 18px 0 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 80%);
    box-shadow: 0 0 6px rgba(255, 168, 54, .85), 0 0 12px rgba(255, 107, 26, .50);
    vertical-align: middle;
  }
  .hub-manifesto .manifesto-tail {
    flex-basis: 100%;
    margin-top: 6px;
    font-family: inherit;
    font-style: italic;
    font-size: clamp(13px, 1.2vw, 15.5px);
    font-weight: 600;
    color: rgba(58, 28, 12, .72);
    letter-spacing: 0;
  }

  /* 3 · PILLARS · 3 numbered tiles in a row (13 · 11 · 0) */
  .hub-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
  }
  .hub-pillars .hub-pill {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255, 250, 240, .80) 0%, rgba(255, 240, 215, .60) 100%);
    border: 1px solid rgba(184, 69, 26, .25);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 6px rgba(120, 30, 14, .06);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
  .hub-pillars .hub-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 69, 26, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 22px rgba(120, 30, 14, .14);
  }
  .hub-pillars .hub-pill-num {
    flex-shrink: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -1.4px;
    color: #5b1410;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
  }
  .hub-pillars .hub-pill-lbl {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(58, 28, 12, .80);
    letter-spacing: 0;
  }
  .hub-pillars .hub-pill-lbl em {
    font-style: italic;
    font-weight: 700;
    color: #8a1818;
  }
  .hub-pillars .hub-pill--punch {
    background: linear-gradient(135deg, #8a2e12 0%, #6a1c0c 60%, #8a2e12 100%);
    border-color: rgba(255, 168, 54, .55);
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 6px 18px rgba(80, 16, 8, .22);
  }
  .hub-pillars .hub-pill--punch .hub-pill-num {
    color: #ffd166;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  }
  .hub-pillars .hub-pill--punch .hub-pill-lbl { color: rgba(255, 235, 200, .85); }
  .hub-pillars .hub-pill--punch .hub-pill-lbl em { color: #ffd166; }

  @media (max-width: 820px) {
    .hub-pillars { grid-template-columns: 1fr; }
    .hub-manifesto .manifesto-organ { font-size: clamp(15px, 4vw, 19px); margin-right: 10px; }
    .hub-manifesto .manifesto-dot { margin: 0 12px 0 2px; }
  }

  /* (Legacy .hero-positioning-subtitle kept for any callers, but the new
     primary subtitle is .hero-positioning-subtitle-line below.) */
  .hero-positioning-subtitle {
    display: block;
    margin: 10px 0 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2.0vw, 26px);
    font-weight: 800;
    font-style: normal;
    line-height: 1.18;
    letter-spacing: -.6px;
    color: #1a0604;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .70);
  }
  .hero-positioning-subtitle em {
    font-style: italic;
    font-weight: 700;
    color: rgba(58, 28, 12, .72);
    letter-spacing: -.4px;
  }

  /* 2 · SUBTITLE LINE · two-tone serif display under the headline */
  .hero-positioning-subtitle-line {
    display: block;
    margin: 8px 0 18px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.7px;
    color: #1a0604;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .80);
  }
  .hero-positioning-subtitle-line .sub-bold { font-weight: 800; }
  .hero-positioning-subtitle-line .sub-italic {
    font-style: italic;
    font-weight: 600;
    margin-left: 6px;
    color: rgba(58, 28, 12, .68);
    letter-spacing: -.4px;
    font-size: .82em;
  }

  /* 3 · SPEC LINE · HUD-style AI/Robo capability declaration ·
     standalone block · no font-size inheritance issues */
  .hero-positioning-spec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 22px;
    padding: 10px 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 248, 232, .65) 0%, rgba(255, 240, 215, .35) 100%);
    border: 1px solid rgba(184, 69, 26, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(120, 30, 14, .08);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: rgba(58, 28, 12, .82);
    white-space: nowrap;
  }
  .hero-positioning-spec .spec-bracket {
    color: rgba(120, 40, 14, .55);
    font-weight: 700;
    font-size: 1.18em;
    flex-shrink: 0;
  }
  .hero-positioning-spec .spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(255, 252, 245, .65);
    border: 1px solid rgba(184, 69, 26, .28);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    color: #5b1410;
    font-weight: 700;
    letter-spacing: .15px;
    flex-shrink: 0;
  }
  .hero-positioning-spec .spec-chip:hover {
    background: rgba(255, 235, 200, .85);
    border-color: rgba(184, 69, 26, .50);
    transform: translateY(-1px);
  }
  .hero-positioning-spec .spec-led {
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe066 0%, #ff7a18 55%, #c8202d 100%);
    box-shadow: 0 0 4px rgba(255, 168, 54, .95), 0 0 8px rgba(255, 107, 26, .55);
    animation: specLedPulse 2.4s ease-in-out infinite;
  }
  @keyframes specLedPulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.18); }
  }
  .hero-positioning-spec .spec-sep {
    color: rgba(120, 40, 14, .45);
    font-weight: 700;
    flex-shrink: 0;
  }
  .hero-positioning-spec .spec-arrow {
    color: #c8202d;
    font-weight: 700;
    font-size: 1.15em;
    padding: 0 4px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(200, 32, 45, .35));
  }
  .hero-positioning-spec .spec-target {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-weight: 700;
    flex-shrink: 0;
  }
  .hero-positioning-spec .spec-for {
    font-style: italic;
    font-weight: 600;
    color: rgba(120, 40, 14, .55);
  }
  .hero-positioning-spec .spec-ns {
    color: rgba(58, 28, 12, .70);
  }
  .hero-positioning-spec .spec-key {
    font-weight: 800;
    color: #8a1818;
    letter-spacing: .1px;
  }

  /* 4 · PILLAR LINE · Sees · Acts · Earns · clean editorial */
  .hero-positioning-pillars-clean {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 22px;
    padding: 12px 0;
    border-top: 1px solid rgba(184, 69, 26, .22);
    border-bottom: 1px solid rgba(184, 69, 26, .22);
    font-family: inherit;
    font-size: clamp(14px, 1.4vw, 16.5px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(58, 28, 12, .80);
    letter-spacing: -.05px;
  }
  .hero-positioning-pillars-clean .pill-item { white-space: nowrap; }
  .hero-positioning-pillars-clean .pill-item b {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 900;
    font-style: italic;
    color: #5b1410;
    margin-right: 4px;
    letter-spacing: -.3px;
  }
  .hero-positioning-pillars-clean .pill-item--punch b { color: #8a1818; }
  .hero-positioning-pillars-clean .pill-sep {
    color: rgba(184, 69, 26, .60);
    font-size: 1.2em;
    line-height: 0;
  }

  /* Editorial eyebrow above the title — italic lowercase serif label
     followed by a long hairline rule that anchors the chapter opener.
     "introducing  ◆  the pyrion engine  ──────────" */
  .hero-positioning-headline::before {
    content: "introducing \00A0\25C6\00A0 the pyrion engine \00A0\00A0\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
    display: block;
    margin: 0 0 14px;
    padding: 2px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: lowercase;
    color: rgba(120, 40, 14, .82);
    text-shadow: 0 1px 0 rgba(255, 252, 245, .85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
  }

  /* True editorial drop-cap on the M of "Meet" via ::first-letter.
     Wrapped in a span technique not needed — ::first-letter applies to
     the first letter of the first formatted line of the h2, which is
     "M" since the ::before is an inline-flex with its own line above. */
  .hero-positioning-headline::first-letter {
    font-size: 1.14em;
    letter-spacing: -.04em;
    margin-right: -.02em;
    color: #8a1818;
    text-shadow:
      0 1px 0    rgba(255, 252, 245, .98),
      0 -1px 0   rgba(255, 240, 215, .55),
      0 2px 1px  rgba(120, 30, 14, .28),
      0 0 12px   rgba(200, 32, 45, .25);
  }
  .positioning-emphasis {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 30%, #b91c1c 65%, #7f1d1d 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 2px 8px rgba(185,28,28,.28)) drop-shadow(0 1px 0 rgba(255,255,255,.5));
    animation: heroAccentShift 8s ease-in-out infinite;
  }
  /* "Engagement Hub" in the hero lockup · deep fire gradient, slightly lightened. */
  .hub-title-main .positioning-emphasis {
    background: linear-gradient(135deg, #e06a14 0%, #c0451a 30%, #9e2326 65%, #74121c 100%);
    filter: drop-shadow(0 2px 8px rgba(120, 25, 25, .28)) drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
  }

  /* "Engagement Hub" inside the headline — plain text, no highlight, no
     chip, no different color. Inherits the headline's color and weight. */
  .hero-positioning-headline .positioning-emphasis {
    all: unset;
    font: inherit;
    color: inherit;
  }
  .hero-positioning-headline .positioning-emphasis::before,
  .hero-positioning-headline .positioning-emphasis::after { content: none; }

  .hero-positioning-headline .positioning-emphasis-legacy-stub {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 2px 12px 4px;
    margin: 0 3px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -.3px;
    font-size: .96em;
    font-feature-settings: "ss01","ss02","cv11","cv02","kern","liga";
    /* Premium chip surface — forged-metal feel anchored on Pyrion ember. */
    background-color: rgba(20, 6, 2, .08);
    border-radius: 8px;
    box-shadow:
      inset 0 0 0 1px rgba(180, 90, 30, .55),
      inset 0 1px 0 rgba(255, 235, 190, .55),
      0 1px 0 rgba(255, 235, 190, .55),
      0 6px 22px rgba(120, 30, 14, .25);
    /* Solid Pyrion ember — one rich on-brand color, no gradient. */
    background-image: none;
    color: #8a1818;
    -webkit-text-fill-color: #8a1818;
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter:
      drop-shadow(0 1px 0 rgba(255, 235, 190, .70))
      drop-shadow(0 2px 10px rgba(168, 88, 32, .40))
      drop-shadow(0 0  16px rgba(200, 32, 45, .22));
    animation: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), letter-spacing .35s ease, filter .5s ease;
  }
  /* HUD chip · static double-glow underline (ember + cyan data-rail). */
  .hero-positioning-headline .positioning-emphasis::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(201, 146, 10, .65) 10%,
      #b8741f 22%,
      #c8202d 42%,
      #8a1818 58%,
      #c8202d 76%,
      rgba(201, 146, 10, .65) 90%,
      transparent 100%);
    filter: blur(.6px) drop-shadow(0 0 8px rgba(200, 32, 45, .55)) drop-shadow(0 0 10px rgba(201, 146, 10, .55));
    pointer-events: none;
    z-index: 2;
  }
  .hero-positioning-headline .positioning-emphasis:hover {
    transform: translateY(-1px) scale(1.02);
    letter-spacing: 0;
    filter:
      drop-shadow(0 1px 0 rgba(255, 235, 190, .95))
      drop-shadow(0 2px 14px rgba(255, 168, 54, .60))
      drop-shadow(0 0 22px rgba(200, 32, 45, .45));
  }
  @keyframes ehubGradientShift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  /* === TAGLINE · v-TECH · AI / Robo capability declaration ===
     Reads like a machine-readable spec line:
        < ●mind :: ●heart :: ●spine :: ●nerve >  →  human.capital
     Monospaced typography, glowing LED status dots, angle brackets,
     :: scope separators, dotted-namespace target. Pyrion ember palette. */
  .positioning-tagline.tag-tech {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px 8px !important;
    margin-top: 16px;
    padding: 10px 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: rgba(58, 28, 12, .82);
    background:
      linear-gradient(180deg, rgba(255, 248, 232, .55) 0%, rgba(255, 240, 215, .35) 100%);
    border: 1px solid rgba(184, 69, 26, .22);
    border-radius: 6px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .85),
      0 1px 2px rgba(120, 30, 14, .08);
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  /* Force every direct child to inline · prevents vertical stacking when
     the tagline is nested inside large-font headlines. */
  .positioning-tagline.tag-tech > * {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    font-size: inherit !important;
    line-height: 1 !important;
  }
  .positioning-tagline.tag-tech .tag-target { white-space: nowrap !important; }

  /* Angle brackets · code-block framing */
  .positioning-tagline.tag-tech .tag-bracket {
    color: rgba(120, 40, 14, .55);
    font-weight: 700;
    font-size: 1.15em;
    user-select: none;
    flex-shrink: 0;
  }

  /* Each capability chip · LED + key name */
  .positioning-tagline.tag-tech .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 5px;
    white-space: nowrap;
    background: rgba(255, 250, 240, .55);
    border: 1px solid rgba(184, 69, 26, .25);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .positioning-tagline.tag-tech .tag-chip:hover {
    background: rgba(255, 235, 200, .85);
    border-color: rgba(184, 69, 26, .45);
    transform: translateY(-1px);
  }

  /* Live ember LED indicator · pulsing */
  .positioning-tagline.tag-tech .tag-led {
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe066 0%, #ff7a18 55%, #c8202d 100%);
    box-shadow:
      0 0 4px rgba(255, 168, 54, .95),
      0 0 8px rgba(255, 107, 26, .55);
    animation: tagLedPulse 2.4s ease-in-out infinite;
  }
  @keyframes tagLedPulse {
    0%, 100% { opacity: .82; transform: scale(1);   box-shadow: 0 0 4px rgba(255,168,54,.85), 0 0 8px rgba(255,107,26,.45); }
    50%      { opacity: 1;   transform: scale(1.15); box-shadow: 0 0 6px rgba(255,209,102,1), 0 0 14px rgba(255,107,26,.75); }
  }

  /* Key name · the four capability identifiers */
  .positioning-tagline.tag-tech .tag-key {
    font-family: inherit;
    font-weight: 700;
    color: #5b1410;
    letter-spacing: .2px;
  }

  /* Scope separator · :: between chips */
  .positioning-tagline.tag-tech .tag-sep {
    color: rgba(120, 40, 14, .45);
    font-weight: 700;
    user-select: none;
    flex-shrink: 0;
  }

  /* Arrow · → return type */
  .positioning-tagline.tag-tech .tag-arrow {
    color: #c8202d;
    font-weight: 700;
    font-size: 1.15em;
    padding: 0 4px;
    user-select: none;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(200, 32, 45, .35));
  }

  /* Target · dotted namespace · "human.capital" */
  .positioning-tagline.tag-tech .tag-target {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: .1px;
  }
  .positioning-tagline.tag-tech .tag-target-ns {
    color: rgba(58, 28, 12, .70);
  }
  .positioning-tagline.tag-tech .tag-target-for {
    font-weight: 600;
    font-style: italic;
    color: rgba(120, 40, 14, .55);
  }
  /* Override the legacy .tagline-emph treatment here · keep mono + ember. */
  .positioning-tagline.tag-tech .tagline-emph {
    font-family: inherit;
    font-weight: 800;
    font-style: normal;
    color: #8a1818;
    letter-spacing: .1px;
    background: none;
    padding: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  @media (max-width: 720px) {
    .positioning-tagline.tag-tech .tag-arrow { transform: rotate(90deg); }
  }
  /* "Human Capital" — payoff phrase in the tagline.
     Subtle ember accent so it reads as the thesis, without competing
     with the chip-framed "Engagement Hub" above it. */
  .positioning-tagline .tagline-emph {
    font-weight: 900;
    color: #8a1818;
    letter-spacing: -.1px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
  }
  .hero-positioning-pitch {
    margin: 18px 0 22px;
    max-width: none;
    width: 100%;
    font-size: 15.5px; line-height: 1.72;
    color: #1a0604;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
  }
  .hero-positioning-pitch strong { color: #0a0200; font-weight: 800; }
  .hero-positioning-pitch em {
    color: #b91c1c;
    font-style: normal;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  /* Stats strip · 5 proof points */
  .hero-positioning-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 22px;
  }
  .positioning-stat {
    position: relative;
    text-align: center;
    padding: 24px 12px;
    background: linear-gradient(180deg, rgba(255,255,250,.95) 0%, rgba(255,242,222,.82) 100%);
    border: 1px solid rgba(184,69,26,.18);
    border-radius: 18px;
    box-shadow:
      0 8px 22px -8px rgba(120,55,20,.20),
      inset 0 1px 0 rgba(255,255,255,.85);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .35s;
    overflow: hidden;
  }
  .positioning-stat::before {
    content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #ea580c, #c8202d);
    opacity: 0; transition: opacity .25s, width .25s;
  }
  .positioning-stat:hover {
    transform: translateY(-6px);
    border-color: rgba(234,88,12,.55);
    box-shadow:
      0 18px 38px -12px rgba(234,88,12,.30),
      inset 0 1px 0 rgba(255,255,255,.95);
  }
  .positioning-stat:hover::before { opacity: 1; width: 60%; }
  .positioning-stat-num {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(36px, 3.6vw, 46px);
    font-weight: 900;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #b91c1c 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    line-height: 1;
    letter-spacing: -2px;
    filter: drop-shadow(0 2px 4px rgba(185,28,28,.22)) drop-shadow(0 1px 0 rgba(255,255,255,.5));
  }
  .positioning-stat-lbl {
    font-size: 11px; font-weight: 800;
    color: #2a0e04;
    margin-top: 12px;
    line-height: 1.35;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.60);
  }
  @media (max-width: 720px) {
    .hero-positioning-stats { grid-template-columns: repeat(3, 1fr); }
    .hero-positioning-headline { font-size: 19px; }
  }

  /* ----- 4-line creed (Mind · Heart · Spine · Nervous System) -------- */
  .hero-creed {
    /* 2 × 2 grid · 4 metaphor cards side-by-side. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
    margin: 6px 0 18px;
  }
  @media (max-width: 760px) {
    .hero-creed { grid-template-columns: 1fr; }
  }
  .hero-creed-line {
    position: relative;
    font-size: 13.5px; line-height: 1.70;
    color: #3a1500;
    margin: 0;
    padding: 20px 22px;
    background: linear-gradient(180deg, rgba(255,253,247,.95) 0%, rgba(255,242,222,.84) 100%);
    border: 1px solid rgba(184,69,26,.22);
    border-radius: 16px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow:
      0 12px 28px -10px rgba(120,55,20,.20),
      inset 0 1px 0 rgba(255,255,255,.85);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .35s;
    overflow: hidden;
  }
  .hero-creed-line::before {
    content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #ea580c 0%, #c8202d 100%);
    box-shadow: 0 0 12px rgba(234,88,12,.45);
  }
  .hero-creed-line:hover {
    transform: translateY(-4px);
    border-color: rgba(234,88,12,.40);
    box-shadow:
      0 22px 44px -14px rgba(234,88,12,.32),
      inset 0 1px 0 rgba(255,255,255,.95);
  }
  .hero-creed-line strong {
    color: #0a0200;
    font-weight: 800;
    letter-spacing: .2px;
  }
  .hero-creed-line em {
    color: #b91c1c;
    font-style: normal;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  .hero-creed-tag {
    display: inline-flex; align-items: center;
    margin-right: 10px;
    padding: 4px 11px 4px 10px;
    background: linear-gradient(135deg, #c8202d, #ea580c);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #fffbeb;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow:
      0 4px 12px rgba(200,32,45,.30),
      inset 0 1px 0 rgba(255,255,255,.30);
  }
  /* ----- Closing flourish quote -------------------------------------- */
  .hero-closer {
    display: flex; align-items: flex-start; gap: 14px;
    max-width: 680px;
    margin: 12px 0 28px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(255,250,240,.92), rgba(255,236,210,.80));
    border: 1px solid rgba(184,69,26,.30);
    border-left: 4px solid #c8202d;
    border-radius: 0 12px 12px 0;
    font-size: 16px; font-style: italic; line-height: 1.55;
    color: #2a0e04;
    box-shadow: 0 8px 26px rgba(120,55,20,.15);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .hero-closer-quote {
    font-size: 52px; line-height: .8;
    background: linear-gradient(135deg, #d97706, #ea580c, #c8202d);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-family: Georgia, 'Times New Roman', serif;
    flex-shrink: 0;
    margin-top: -4px;
  }
  /* ==========================================================
     HERO APHORISM · "Without the Engagement Hub, you have a
     database. With it, you have Pyrion."
     A two-beat aphorism plaque: cool/muted "without" line then
     warm/glowing "with" line — typography enacts the message.
     ========================================================== */
  .hero-aphorism {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 14px;
    margin: 16px 0 22px;
    padding: 18px 24px 20px;
    border-radius: 14px;
    background:
      radial-gradient(ellipse 60% 90% at 12% 50%, rgba(220, 215, 210, .50) 0%, transparent 70%),
      radial-gradient(ellipse 60% 95% at 88% 50%, rgba(255, 200, 110, .55) 0%, transparent 70%),
      linear-gradient(135deg, rgba(252, 248, 240, .96) 0%, rgba(255, 240, 215, .92) 100%);
    border: 1px solid rgba(184, 69, 26, .28);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .85) inset,
      0 10px 36px rgba(120, 30, 14, .14),
      0 2px 8px  rgba(120, 30, 14, .08);
    overflow: hidden;
    isolation: isolate;
  }
  /* Hot ember rail across the top — signals "fire-grade" content. */
  .hero-aphorism::before {
    content:""; position:absolute; left:0; right:0; top:0; height:3px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(201,146,10,.55) 8%,
      #c8202d 38%, #b91c1c 58%, #c8202d 76%,
      rgba(201,146,10,.55) 92%,
      transparent 100%);
    filter: blur(.3px) drop-shadow(0 0 6px rgba(200,32,45,.55));
    z-index: 1; pointer-events: none;
  }
  /* Faint ember glow under "Pyrion" half of the card. */
  .hero-aphorism::after {
    content:""; position:absolute; right:-10%; top:-10%; bottom:-10%; width:55%;
    background: radial-gradient(circle at 70% 50%, rgba(255,168,54,.20) 0%, transparent 60%);
    z-index:0; pointer-events:none;
  }
  /* Opening / closing serif quote glyphs · large, ember-gradient. */
  .hero-aphorism-mark {
    align-self: start;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 64px; line-height: .65;
    font-weight: 900;
    background: linear-gradient(135deg, #d97706 0%, #ea580c 45%, #c8202d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    text-shadow: none;
    flex-shrink: 0;
    user-select: none;
    margin-top: 4px;
    filter: drop-shadow(0 2px 6px rgba(200,32,45,.25));
  }
  .hero-aphorism-mark--close {
    align-self: end;
    margin-top: 0; margin-bottom: -4px;
  }
  /* The two-line body — first line muted, second line glowing. */
  .hero-aphorism-body {
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 4px;
    z-index: 2;
    font-family: inherit;
    font-style: normal;
  }
  .hero-aphorism-line {
    font-size: clamp(16px, 1.55vw, 19px);
    line-height: 1.45;
    color: #2a0e04;
    letter-spacing: -.1px;
  }
  /* Single-line variant — both clauses on the same baseline with a hot dot pivot. */
  .hero-aphorism-line--single {
    display: block;
    color: #1a0604;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.45;
    white-space: normal;
  }
  .hero-aphorism-line--single .hero-aphorism-cue {
    font-weight: 800;
    color: rgba(58, 28, 12, .85);
    letter-spacing: 0;
  }
  .hero-aphorism-line--single .hero-aphorism-cue--on {
    font-weight: 900;
    color: #8a1818;
    letter-spacing: -.1px;
  }
  /* Hot ember pivot dot · sits between the two clauses (replaces the old divider). */
  .hero-aphorism-pivot {
    display: inline-block;
    width: 8px; height: 8px;
    margin: 0 12px;
    vertical-align: 2px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 80%);
    box-shadow: 0 0 8px rgba(255, 168, 54, .85), 0 0 16px rgba(255, 107, 26, .55);
    color: transparent;
    user-select: none;
  }
  .hero-aphorism--single .hero-aphorism-body { justify-content: center; }
  /* "Without" line — slightly dimmed, neutral. */
  .hero-aphorism-line--without {
    color: rgba(58, 28, 12, .70);
    font-weight: 600;
  }
  .hero-aphorism-line--without .hero-aphorism-cue {
    font-weight: 800;
    color: rgba(58, 28, 12, .85);
    letter-spacing: 0;
  }
  /* "database" — flat, monospaced, struck-through — visually "just data". */
  .hero-aphorism-flat {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(58, 28, 12, .55);
    padding: 0 4px;
    border: 1px dashed rgba(58, 28, 12, .35);
    border-radius: 4px;
    background: rgba(58, 28, 12, .04);
  }
  /* Divider · single hot ember dot between the two beats. */
  .hero-aphorism-divider {
    height: 1px;
    margin: 6px 0 6px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(184, 69, 26, .35) 10%,
      rgba(200, 32, 45, .55) 50%,
      rgba(184, 69, 26, .35) 90%,
      transparent 100%);
    position: relative;
  }
  .hero-aphorism-divider::after {
    content:""; position:absolute; left:50%; top:50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 80%);
    box-shadow: 0 0 8px rgba(255,168,54,.85), 0 0 16px rgba(255,107,26,.55);
  }
  /* "With it" line — confident, warm, full-strength. */
  .hero-aphorism-line--with {
    color: #1a0604;
    font-weight: 700;
  }
  .hero-aphorism-line--with .hero-aphorism-cue--on {
    font-weight: 900;
    color: #8a1818;
    letter-spacing: -.1px;
  }
  /* "Pyrion" — the payoff. Sized large, warm-fire gradient, subtle glow. */
  .hero-aphorism-pyrion {
    display: inline-block;
    font-weight: 900;
    font-size: 1.35em;
    letter-spacing: -.8px;
    font-style: italic;
    background: linear-gradient(125deg,
      #c9920a 0%,
      #b8741f 18%,
      #c8202d 48%,
      #b91c1c 70%,
      #7f1d1d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .4px rgba(58, 10, 8, .55);
    filter:
      drop-shadow(0 1px 0 rgba(255, 235, 190, .80))
      drop-shadow(0 2px 12px rgba(200, 32, 45, .35));
    padding: 0 2px;
    transform: translateY(1px);
  }
  /* ==========================================================
     "PYRION'S MOAT" — three-beat manifesto chain.
     Replaces the editorial coda. Architecture-of-an-argument:
     small numbered glass tiles, em-dash links, a wax-seal close.
     ========================================================== */
  /* Standalone section wrapper · gives the moat its own card surface
     when it lives outside the aphorism plaque. */
  .hero-moat-section {
    margin: 26px 0 22px;
    padding: 22px 26px 18px;
    border-radius: 16px;
    background:
      radial-gradient(ellipse 70% 110% at 88% 50%, rgba(255, 200, 110, .55) 0%, transparent 70%),
      radial-gradient(ellipse 70% 110% at 12% 50%, rgba(255, 235, 200, .60) 0%, transparent 70%),
      linear-gradient(135deg, rgba(252, 248, 240, .96) 0%, rgba(255, 240, 215, .92) 100%);
    border: 1px solid rgba(184, 69, 26, .28);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .85) inset,
      0 10px 36px rgba(120, 30, 14, .14),
      0 2px 8px  rgba(120, 30, 14, .08);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* Same hot ember top rail as the aphorism plaque · brand consistency. */
  .hero-moat-section::before {
    content:""; position:absolute; left:0; right:0; top:0; height:3px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(201,146,10,.55) 8%,
      #c8202d 38%, #b91c1c 58%, #c8202d 76%,
      rgba(201,146,10,.55) 92%,
      transparent 100%);
    filter: blur(.3px) drop-shadow(0 0 6px rgba(200,32,45,.55));
    z-index: 1;
  }

  /* ==========================================================
     RAI CARD · v3 · Modern editorial bento
       ROW 1  asymmetric title block (LEFT: kicker / display / lede   RIGHT: live badge + stat row)
       ROW 2  3-step loop strip (Perception · Action · Outcome) — dark-on-cream
       ROW 3  aphorism seal — restrained pull-quote close
     Modeled on Anthropic/Linear/Vercel bento composition + Pyrion fire palette.
     ========================================================== */
  .rai-card {
    position: relative;
    margin: 22px 0 26px;
    padding: 24px 28px 22px;
    border-radius: 16px;
    background:
      radial-gradient(ellipse 60% 110% at 100% 50%, rgba(255, 200, 110, .50) 0%, transparent 65%),
      radial-gradient(ellipse 60% 110% at 0% 50%,   rgba(255, 235, 200, .55) 0%, transparent 65%),
      linear-gradient(135deg, rgba(253, 249, 240, .98) 0%, rgba(255, 240, 215, .94) 100%);
    border: 1px solid rgba(184, 69, 26, .30);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .92) inset,
      0 18px 50px rgba(120, 30, 14, .18),
      0 4px 12px  rgba(120, 30, 14, .10);
    overflow: hidden;
    isolation: isolate;
  }
  /* Top hot-ember rail · brand-consistent with the hero & aphorism plaque. */
  .rai-card::before {
    content:""; position:absolute; left:0; right:0; top:0; height:3px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(201,146,10,.55) 10%,
      #c8202d 40%, #b91c1c 60%, #c8202d 78%,
      rgba(201,146,10,.55) 90%,
      transparent 100%);
    filter: blur(.3px) drop-shadow(0 0 6px rgba(200,32,45,.55));
    z-index: 2;
  }
  /* Watermark "AI" character behind the card · adds depth, never competes. */
  .rai-card::after {
    content:"AI";
    position:absolute; right:-12px; bottom:-32px;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 220px;
    line-height: 1;
    color: rgba(184, 69, 26, .055);
    pointer-events:none;
    z-index: 0;
  }

  /* ── HEAD ──────────────────────────────────────────────── */
  .rai-card-head {
    position: relative;
    z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px;
    margin-bottom: 18px;
  }
  .rai-kicker {
    display: inline-flex; align-items: center;
    padding: 3px 10px 4px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: #5b1410;
    background: linear-gradient(180deg, rgba(255, 220, 160, .85), rgba(255, 200, 130, .65));
    border: 1px solid rgba(184, 69, 26, .45);
    border-radius: 3px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 1px 2px rgba(120, 30, 14, .12);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }
  .rai-title {
    margin: 4px 0 0;
    font-family: inherit;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: #2a0e04;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }
  .rai-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg,
      rgba(184, 69, 26, .45) 0%,
      rgba(184, 69, 26, .18) 38%,
      transparent 100%);
  }

  /* ── FLOW · three tiles + two arrow links ───────────────── */
  .rai-flow {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
  }
  .rai-tile {
    position: relative;
    display: flex; flex-direction: column;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, rgba(255, 252, 245, .96), rgba(255, 244, 220, .85));
    border: 1px solid rgba(184, 69, 26, .25);
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .92),
      0 2px 6px rgba(120, 30, 14, .08);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    overflow: hidden;
  }
  .rai-tile::after {
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg, transparent 0%, rgba(184, 69, 26, .45) 50%, transparent 100%);
  }
  .rai-tile:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 12px 28px rgba(120, 30, 14, .18);
  }
  .rai-tile-num {
    position: absolute;
    top: 10px; right: 12px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(120, 40, 14, .55);
  }
  .rai-tile-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    margin-bottom: 10px;
    color: #fff5e0;
    background: radial-gradient(circle at 30% 30%, #b8741f 0%, #8a3e14 60%, #5b1410 100%);
    border: 1px solid rgba(255, 220, 160, .55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 2px 6px rgba(80, 14, 14, .25);
  }
  .rai-tile-title {
    margin: 0 0 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.25;
    color: #2a0e04;
    text-transform: none;
  }
  .rai-tile-sub {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(58, 28, 12, .78);
    font-weight: 500;
  }
  .rai-tile-sub strong { color: #2a0e04; font-weight: 800; }
  .rai-tile-pill {
    margin-top: auto;
    align-self: flex-start;
    padding: 3px 9px 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-radius: 3px;
    background: rgba(184, 69, 26, .10);
    color: rgba(120, 40, 14, .82);
    border: 1px solid rgba(184, 69, 26, .25);
  }
  .rai-tile-pill--ai   { background: rgba(184, 116, 31, .14); color: #6b3e0a; border-color: rgba(184, 116, 31, .40); }
  .rai-tile-pill--robo { background: rgba(184, 69, 26, .14);  color: #6a1f12; border-color: rgba(184, 69, 26, .42); }
  .rai-tile-pill--out  { background: rgba(255, 209, 102, .22); color: #2a0e04; border-color: rgba(255, 168, 54, .65); font-weight: 800; }

  /* Punch tile · the outcome · deep ember palette inverts the contrast. */
  .rai-tile--punch {
    background: linear-gradient(135deg, rgba(120, 30, 14, .98) 0%, rgba(90, 18, 10, .98) 55%, rgba(60, 10, 8, .98) 100%);
    border-color: rgba(255, 168, 54, .45);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, .35),
      0 6px 18px rgba(80, 16, 8, .28);
  }
  .rai-tile--punch::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 209, 102, .85) 50%, transparent 100%);
  }
  .rai-tile--punch .rai-tile-num   { color: rgba(255, 220, 160, .55); }
  .rai-tile--punch .rai-tile-title { color: #fff5e0; }
  .rai-tile--punch .rai-tile-sub   { color: rgba(255, 235, 200, .80); }
  .rai-tile--punch .rai-tile-sub strong { color: #ffd166; }
  .rai-tile--punch .rai-tile-glyph {
    background: radial-gradient(circle at 30% 30%, #ffd166 0%, #ff7a18 55%, #c8202d 100%);
    color: #2a0e04;
    border-color: rgba(255, 235, 190, .85);
  }

  /* Arrow links · burnt-ember chevron between tiles. */
  .rai-flow-link {
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(184, 69, 26, .65);
    align-self: center;
  }

  /* ── SEAL · the aphorism close ──────────────────────────── */
  .rai-seal {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 12px;
    padding: 14px 12px 10px;
    margin-top: 4px;
    border-top: 1px solid rgba(184, 69, 26, .25);
  }
  .rai-seal-mark {
    align-self: start;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    line-height: .55;
    font-weight: 900;
    background: linear-gradient(135deg, #d97706 0%, #ea580c 45%, #c8202d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(200, 32, 45, .25));
    margin-top: 4px;
  }
  .rai-seal-mark--close { align-self: end; margin-top: 0; margin-bottom: -2px; }
  .rai-seal-text {
    align-self: center;
    text-align: center;
    font-family: inherit;
    font-size: clamp(14px, 1.35vw, 16.5px);
    font-weight: 700;
    line-height: 1.4;
    color: #1a0604;
    letter-spacing: -.05px;
  }
  .rai-seal-cue { font-weight: 800; color: rgba(58, 28, 12, .85); }
  .rai-seal-cue--on { font-weight: 900; color: #8a1818; letter-spacing: -.1px; }
  .rai-seal-flat {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(58, 28, 12, .55);
    padding: 0 5px;
    border: 1px dashed rgba(58, 28, 12, .35);
    border-radius: 4px;
    background: rgba(58, 28, 12, .04);
  }
  .rai-seal-dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin: 0 12px;
    vertical-align: 2px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 80%);
    box-shadow: 0 0 8px rgba(255, 168, 54, .85), 0 0 16px rgba(255, 107, 26, .55);
  }
  .rai-seal-pyrion {
    display: inline-block;
    font-weight: 900;
    font-size: 1.28em;
    letter-spacing: -.8px;
    font-style: italic;
    background: linear-gradient(125deg, #c9920a 0%, #b8741f 18%, #c8202d 48%, #b91c1c 70%, #7f1d1d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .4px rgba(58, 10, 8, .55);
    filter: drop-shadow(0 1px 0 rgba(255, 235, 190, .80)) drop-shadow(0 2px 12px rgba(200, 32, 45, .35));
    padding: 0 2px;
    transform: translateY(1px);
  }

  /* Responsive · stack the flow on narrow viewports. */
  @media (max-width: 760px) {
    .rai-flow { grid-template-columns: 1fr; gap: 8px; }
    .rai-flow-link { transform: rotate(90deg); align-self: center; padding: 2px 0; }
    .rai-card::after { font-size: 140px; bottom: -22px; }
    .rai-seal { grid-template-columns: auto 1fr; }
    .rai-seal-mark--close { display: none; }
    .rai-seal-mark { font-size: 32px; }
  }

  /* ╔══════════════════════════════════════════════════════════╗
     ║  RAI COVER · v4 · EDITORIAL MAGAZINE COMPOSITION          ║
     ║  THREE ELEMENTS ONLY: title · pillars · aphorism quote    ║
     ║  Brand signature: a vertical hot-ember spine on the left  ║
     ║  edge. Generous whitespace, large editorial italic display ║
     ║  serif, restrained accents. No badges, dots, or pulses.   ║
     ╚══════════════════════════════════════════════════════════╝ */
  .rai-cover {
    position: relative;
    margin: 28px 0 30px;
    padding: 40px 44px 36px 56px;
    background:
      radial-gradient(ellipse 70% 120% at 100% 50%, rgba(255, 200, 110, .35) 0%, transparent 70%),
      linear-gradient(180deg, rgba(254, 250, 242, .98) 0%, rgba(255, 244, 222, .94) 100%);
    border: 1px solid rgba(184, 69, 26, .22);
    border-radius: 10px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .92) inset,
      0 14px 40px rgba(120, 30, 14, .14);
    overflow: hidden;
  }
  /* Brand spine · the only flourish · a vertical hot-ember rail on the left. */
  .rai-cover-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg,
      #c9920a 0%,
      #ea580c 22%,
      #c8202d 46%,
      #b91c1c 64%,
      #7f1d1d 86%,
      #3a0a08 100%);
    box-shadow: 0 0 14px rgba(200, 32, 45, .35), 0 0 28px rgba(255, 107, 26, .20);
  }

  /* ─── UNIFORM TYPOGRAPHY · one font · one size · one color · one weight ───
     Every text node inside .rai-cover renders identically — no italic,
     monospace, gradients, drop-caps, chips, or size hierarchy. */
  /* 1 · TITLE BLOCK ───────────────────────────────────────── */
  .rai-cover-title { margin: 0 0 26px; }
  /* The AI/Robo capability spec line · sits below the display title. */
  .rai-cover-tech.positioning-tagline {
    display: flex;
    margin-top: 16px;
  }
  /* Standalone aphorism between pitch and RAI cover · same quote treatment. */
  .hero-positioning-aphorism.rai-cover-quote {
    margin: 6px 0 22px;
    padding: 14px 12px;
    background: linear-gradient(180deg, rgba(255, 248, 232, .55) 0%, rgba(255, 240, 215, .35) 100%);
    border: 1px solid rgba(184, 69, 26, .20);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  }
  .rai-cover-eb {
    display: inline-block;
    margin-bottom: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .82);
  }
  .rai-cover-display {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -1.4px;
    color: #1a0604;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .60);
  }
  .rai-cover-display em {
    display: block;
    margin-top: 2px;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(20px, 2.0vw, 28px);
    letter-spacing: -.6px;
    color: rgba(58, 28, 12, .72);
  }

  /* 2 · PILLAR LINE ───────────────────────────────────────── */
  .rai-cover-pillars {
    margin: 0 0 28px;
    padding: 14px 0;
    border-top:    1px solid rgba(184, 69, 26, .22);
    border-bottom: 1px solid rgba(184, 69, 26, .22);
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 8px 14px;
    font-family: inherit;
    font-size: clamp(14px, 1.4vw, 16.5px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(58, 28, 12, .80);
    letter-spacing: -.05px;
  }
  .rai-pillar { white-space: nowrap; }
  .rai-pillar b {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 900;
    font-style: italic;
    color: #5b1410;
    margin-right: 4px;
    letter-spacing: -.3px;
  }
  .rai-pillar--punch b { color: #8a1818; }
  .rai-pillar-sep {
    color: rgba(184, 69, 26, .60);
    font-size: 1.2em;
    line-height: 0;
  }

  /* 3 · APHORISM QUOTE ──────────────────────────────────────  */
  .rai-cover-quote {
    margin: 0;
    padding: 0 8px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    column-gap: 14px;
  }
  .rai-cover-quote-mark {
    align-self: start;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    line-height: .55;
    font-weight: 900;
    background: linear-gradient(135deg, #d97706 0%, #ea580c 45%, #c8202d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    user-select: none;
    margin-top: 6px;
    filter: drop-shadow(0 2px 4px rgba(200, 32, 45, .20));
  }
  .rai-cover-quote-mark--close {
    align-self: end;
    margin-top: 0;
    margin-bottom: -4px;
  }
  .rai-cover-quote-text {
    align-self: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.55;
    font-weight: 600;
    color: #1a0604;
    text-align: center;
    letter-spacing: -.1px;
  }
  .rai-cover-flat {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-style: normal;
    font-size: .82em;
    font-weight: 700;
    color: rgba(58, 28, 12, .58);
    padding: 1px 6px;
    border: 1px dashed rgba(58, 28, 12, .35);
    border-radius: 4px;
    background: rgba(58, 28, 12, .04);
    letter-spacing: 0;
  }
  .rai-cover-pivot {
    display: inline-block;
    width: 7px; height: 7px;
    margin: 0 12px;
    vertical-align: 2px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 55%, transparent 80%);
    box-shadow: 0 0 8px rgba(255, 168, 54, .85), 0 0 14px rgba(255, 107, 26, .50);
  }
  .rai-cover-pyrion {
    display: inline-block;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 1.35em;
    letter-spacing: -.6px;
    background: linear-gradient(125deg, #c9920a 0%, #b8741f 18%, #c8202d 48%, #b91c1c 70%, #7f1d1d 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .35px rgba(58, 10, 8, .55);
    filter: drop-shadow(0 1px 0 rgba(255, 235, 190, .80)) drop-shadow(0 2px 10px rgba(200, 32, 45, .30));
    padding: 0 2px;
    transform: translateY(1px);
  }

  /* Responsive · tighten paddings, hide the closing quote on narrow screens. */
  @media (max-width: 720px) {
    .rai-cover { padding: 26px 22px 24px 32px; }
    .rai-cover-display em { font-size: clamp(16px, 4vw, 22px); }
    .rai-cover-quote { grid-template-columns: auto 1fr; column-gap: 10px; }
    .rai-cover-quote-mark--close { display: none; }
    .rai-cover-quote-mark { font-size: 40px; }
  }

  /* Drop the heavy italic "AI" watermark — modern minimalism prefers restraint. */
  .rai-card::after { display: none; }

  /* Tighten the card padding for a more refined feel. */
  .rai-card { padding: 28px 32px 24px; }

  /* ── ROW 1 · TITLE BLOCK (asymmetric bento) ──────────────── */
  .rai-head {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(184, 69, 26, .18);
    margin-bottom: 22px;
  }
  .rai-head-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .rai-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; }

  /* Kicker · "ENGAGEMENT HUB" with a tiny live dot — clean, no chip-frame. */
  .rai-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .85);
  }
  .rai-eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #ff7a18 60%, transparent 80%);
    box-shadow: 0 0 6px rgba(255, 168, 54, .85);
    animation: raiEyebrowPulse 2.4s ease-in-out infinite;
  }
  @keyframes raiEyebrowPulse {
    0%, 100% { opacity: .75; box-shadow: 0 0 6px rgba(255,168,54,.65); }
    50%      { opacity: 1;   box-shadow: 0 0 10px rgba(255,168,54,1), 0 0 18px rgba(255,107,26,.50); }
  }

  /* Display title · big editorial serif italic + smaller subtitle line. */
  .rai-display {
    margin: 2px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 900;
    line-height: .98;
    letter-spacing: -1.5px;
    color: #1a0604;
    display: flex; flex-direction: column;
  }
  .rai-display-main {
    font-size: clamp(28px, 3.0vw, 40px);
    font-style: italic;
  }
  .rai-display-sub {
    font-family: inherit;
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 500;
    font-style: normal;
    letter-spacing: -.3px;
    color: rgba(58, 28, 12, .68);
    margin-top: 4px;
  }

  /* One-line lede under the title — restrained, sans, italicized comma cadence. */
  .rai-lede {
    margin: 8px 0 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(58, 28, 12, .82);
    letter-spacing: -.05px;
  }

  /* LIVE badge · subtle pulsing ember pill in the right column. */
  .rai-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #5b1410;
    background: linear-gradient(180deg, rgba(255, 220, 160, .65), rgba(255, 200, 130, .35));
    border: 1px solid rgba(184, 69, 26, .35);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  .rai-badge-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #c8202d;
    box-shadow: 0 0 4px rgba(200,32,45,.9);
    animation: raiBadgePulse 1.8s ease-in-out infinite;
  }
  @keyframes raiBadgePulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 4px rgba(200,32,45,.9); }
    50%      { transform: scale(1.25); box-shadow: 0 0 8px rgba(200,32,45,1), 0 0 14px rgba(255,107,26,.55); }
  }

  /* Stat triplet · monospaced numerals, clean column, single-color. */
  .rai-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    width: 100%;
    border-top: 1px solid rgba(184, 69, 26, .15);
    padding-top: 12px;
  }
  .rai-stat { display: flex; flex-direction: column; gap: 2px; text-align: right; }
  .rai-stat:not(:last-child) { text-align: left; }
  .rai-stat:nth-child(2) { text-align: center; }
  .rai-stat-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -1.2px;
    color: #8a1818;
  }
  .rai-stat-lbl {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(58, 28, 12, .60);
  }

  /* ── ROW 2 · LOOP STRIP · Perception → Action → Outcome ──── */
  .rai-loop {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 3;
  }
  /* Visual loop track behind the three cards — a single hairline. */
  .rai-loop::before {
    content:""; position:absolute; left:8%; right:8%; top:50%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(184, 69, 26, .25) 18%,
      rgba(184, 69, 26, .42) 50%,
      rgba(184, 69, 26, .25) 82%,
      transparent 100%);
    z-index: 0;
    pointer-events: none;
  }
  .rai-loop-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 16px 14px 14px;
    background: linear-gradient(180deg, rgba(255, 252, 245, .96), rgba(255, 246, 224, .85));
    border: 1px solid rgba(184, 69, 26, .22);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .rai-loop-step:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 69, 26, .45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(120,30,14,.16);
  }
  .rai-loop-num {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    color: rgba(120, 40, 14, .35);
    letter-spacing: -1px;
    padding-right: 4px;
    border-right: 1px solid rgba(184, 69, 26, .20);
  }
  .rai-loop-glyph {
    display: none;
  }
  .rai-loop-body {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    grid-column: 2;
  }
  .rai-loop-stage {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .68);
  }
  .rai-loop-line {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #2a0e04;
    letter-spacing: -.1px;
  }
  .rai-loop-line strong { font-weight: 800; color: #8a1818; letter-spacing: 0; }

  /* Punch step (Outcome) — inverted, deep-ember, gold-on-black for contrast. */
  .rai-loop-step--punch {
    background: linear-gradient(180deg, #2a0e04 0%, #4a180a 60%, #2a0e04 100%);
    border-color: rgba(255, 168, 54, .50);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, .35),
      0 6px 18px rgba(80, 16, 8, .30);
  }
  .rai-loop-step--punch:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, .45),
      0 12px 28px rgba(80, 16, 8, .42);
  }
  .rai-loop-step--punch .rai-loop-num {
    color: rgba(255, 209, 102, .55);
    border-right-color: rgba(255, 168, 54, .40);
  }
  .rai-loop-step--punch .rai-loop-stage { color: rgba(255, 209, 102, .85); }
  .rai-loop-step--punch .rai-loop-line { color: #fff5e0; }
  .rai-loop-step--punch .rai-loop-line strong { color: #ffd166; }

  /* Responsive — title block stacks; loop stacks vertically. */
  @media (max-width: 820px) {
    .rai-head { grid-template-columns: 1fr; gap: 18px; }
    .rai-head-r { align-items: flex-start; }
    .rai-stats { grid-template-columns: repeat(3, auto); column-gap: 22px; }
    .rai-stat, .rai-stat:not(:last-child), .rai-stat:nth-child(2) { text-align: left; }
    .rai-loop { grid-template-columns: 1fr; gap: 8px; }
    .rai-loop::before { display: none; }
    .rai-card { padding: 22px 20px 18px; }
  }

  /* ==========================================================
     REVENUE AI BAND · standalone marketing pillar between the
     hero and the modules grid. Dark, premium, on-brand band
     that lets the "Revenue AI for Human Capital" thesis breathe
     as its own section rather than as a hero footnote.
     ========================================================== */
  .revenue-ai-band {
    position: relative;
    padding: 64px 0;
    background:
      radial-gradient(ellipse 60% 80% at 18% 50%, rgba(255, 138, 40, .22) 0%, transparent 65%),
      radial-gradient(ellipse 60% 80% at 82% 50%, rgba(255, 168, 54, .28) 0%, transparent 65%),
      linear-gradient(135deg, #2e0e06 0%, #4a180a 45%, #6a2a0e 100%);
    border-top: 1px solid rgba(255, 220, 150, .55);
    border-bottom: 1px solid rgba(120, 50, 20, .55);
    isolation: isolate;
    overflow: hidden;
  }
  /* Top hot-ember rail · echoes the aphorism plaque & hero. */
  .revenue-ai-band::before {
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,209,102,.65) 14%,
      #c8202d 42%, #b91c1c 58%, #c8202d 76%,
      rgba(255,209,102,.65) 88%,
      transparent 100%);
    filter: drop-shadow(0 0 6px rgba(255,107,26,.65));
    z-index: 2;
  }
  /* Faint ember glow under the punch tile side of the band. */
  .revenue-ai-band::after {
    content:""; position:absolute; right:-5%; top:-20%; bottom:-20%; width:40%;
    background: radial-gradient(circle at 70% 50%, rgba(255,107,26,.18) 0%, transparent 65%);
    z-index: 1; pointer-events: none;
  }
  .revenue-ai-band-inner {
    position: relative;
    z-index: 3;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
  }
  /* Inside the band, the moat card gets a lighter "plaque on dark" surface
     so it pops against the ember band background. */
  .revenue-ai-band .hero-moat {
    margin: 0;
    padding: 24px 28px 20px;
    border-radius: 14px;
    background:
      radial-gradient(ellipse 70% 110% at 88% 50%, rgba(255, 200, 110, .55) 0%, transparent 70%),
      radial-gradient(ellipse 70% 110% at 12% 50%, rgba(255, 235, 200, .60) 0%, transparent 70%),
      linear-gradient(135deg, rgba(252, 248, 240, .96) 0%, rgba(255, 240, 215, .92) 100%);
    border: 1px solid rgba(255, 168, 54, .45);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .85) inset,
      0 18px 50px rgba(20, 6, 2, .50),
      0 4px 14px rgba(40, 10, 4, .35);
    border-top: 0;
  }
  /* Drop the moat's own top border-line since the band already has the rail. */
  .revenue-ai-band .hero-moat::before { display: none; }
  @media (max-width: 720px) {
    .revenue-ai-band { padding: 44px 0; }
    .revenue-ai-band-inner { padding: 0 18px; }
  }
  .hero-moat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    margin: 0;
    padding: 0;
    border-top: 0;
    position: relative;
    z-index: 2;
  }
  /* Compatibility · the moat still works when nested inside .hero-aphorism. */
  .hero-aphorism .hero-moat {
    grid-column: 1 / -1;
    margin: 18px 0 0;
    padding: 14px 6px 4px;
    border-top: 1px solid rgba(184, 69, 26, .22);
  }
  /* The eyebrow tag — vertical "PYRION'S MOAT" label on the left rail.
     Acts like a section marker in a magazine spread. */
  .hero-moat-eb {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5b1410;
    background: linear-gradient(180deg, rgba(255, 220, 160, .80), rgba(255, 200, 130, .60));
    border: 1px solid rgba(184, 69, 26, .45);
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 1px 2px rgba(120, 30, 14, .15);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    white-space: nowrap;
    grid-row: 1 / span 2;
  }
  /* The chain — three tiles connected by arrows. */
  .hero-moat-chain {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hero-moat-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    background: linear-gradient(135deg, rgba(255, 250, 240, .85), rgba(255, 240, 215, .75));
    border: 1px solid rgba(184, 69, 26, .22);
    border-radius: 7px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .85),
      0 1px 2px rgba(120, 30, 14, .08);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero-moat-step:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 6px 16px rgba(120, 30, 14, .14);
  }
  /* Numerical index — Roman-style serif numeral in a tiny burnt-gold disc. */
  .hero-moat-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    color: #fff5e0;
    background: radial-gradient(circle at 30% 30%, #b8741f 0%, #8a3e14 60%, #5b1410 100%);
    border: 1px solid rgba(255, 220, 160, .55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 1px 2px rgba(0,0,0,.20);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }
  .hero-moat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    line-height: 1.35;
    color: #2a0e04;
    font-weight: 500;
    letter-spacing: -.05px;
  }
  /* Time-asymmetry annotation under each tile: weeks → months → years.
     Tiny serif-italic line that makes the cost-to-replicate visible. */
  .hero-moat-meta {
    display: inline-block;
    margin-top: 1px;
    padding: 1px 6px;
    align-self: flex-start;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10.5px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .70);
    background: rgba(184, 69, 26, .08);
    border-radius: 3px;
  }
  .hero-moat-meta--punch {
    color: #ffd166;
    background: rgba(255, 168, 54, .14);
    letter-spacing: 1.2px;
  }
  /* The third tile — the punch · deeper ember, bolder. */
  .hero-moat-step--punch {
    background: linear-gradient(135deg, rgba(120, 30, 14, .94), rgba(90, 18, 10, .94));
    border-color: rgba(255, 168, 54, .45);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, .35),
      0 4px 14px rgba(80, 16, 8, .25);
  }
  .hero-moat-step--punch .hero-moat-text {
    color: #fff5e0;
  }
  .hero-moat-step--punch .hero-moat-text strong {
    color: #ffd166;
    font-weight: 800;
  }
  .hero-moat-step--punch .hero-moat-num {
    background: radial-gradient(circle at 30% 30%, #ffd166 0%, #ff7a18 55%, #c8202d 100%);
    color: #2a0e04;
    border-color: rgba(255, 235, 190, .85);
    text-shadow: 0 1px 0 rgba(255,235,190,.55);
  }
  /* Link arrows between the tiles — burnt ember, slight upward arc. */
  .hero-moat-link {
    flex-shrink: 0;
    align-self: center;
    font-size: 16px;
    line-height: 1;
    color: rgba(184, 69, 26, .65);
    user-select: none;
    transform: translateY(-1px);
  }
  /* Wax-seal close — single deliberate stamp on the conclusion. */
  .hero-moat-seal {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 0 4px;
    font-family: Georgia, 'Times New Roman', serif;
  }
  .hero-moat-seal-mark {
    font-size: 13px;
    line-height: 1;
    color: #c8202d;
    filter: drop-shadow(0 1px 0 rgba(255,235,190,.7));
  }
  .hero-moat-seal-text {
    font-size: 12.5px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .80);
  }
  .hero-moat-seal-text strong {
    font-weight: 900;
    color: #8a1818;
    letter-spacing: -.1px;
  }
  /* Seal-as-aphorism variant — reuses the aphorism plaque typography so the
     moat's closing line carries the same hero-quote treatment seen above. */
  .hero-moat-seal--aphorism {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 10px;
    margin: 6px 0 0;
    padding: 10px 12px 6px;
    border-top: 1px solid rgba(184, 69, 26, .22);
    font-family: inherit;
  }
  .hero-moat-seal--aphorism .hero-aphorism-mark {
    font-size: 38px;
    line-height: .65;
    margin-top: 2px;
  }
  .hero-moat-seal--aphorism .hero-aphorism-mark--close {
    align-self: end;
    margin-top: 0;
    margin-bottom: -2px;
  }
  .hero-moat-seal--aphorism .hero-aphorism-line--single {
    align-self: center;
    font-size: clamp(14px, 1.35vw, 16.5px);
    text-align: center;
  }
  .hero-moat-seal--aphorism .hero-aphorism-pyrion {
    font-size: 1.25em;
  }
  @media (max-width: 720px) {
    .hero-moat-seal--aphorism { grid-template-columns: auto 1fr; }
    .hero-moat-seal--aphorism .hero-aphorism-mark--close { display: none; }
    .hero-moat-seal--aphorism .hero-aphorism-mark { font-size: 30px; }
  }
  @media (max-width: 720px) {
    .hero-moat { grid-template-columns: 1fr; row-gap: 8px; }
    .hero-moat-eb { grid-row: auto; justify-content: flex-start; padding: 4px 12px; }
    .hero-moat-chain { flex-direction: column; }
    .hero-moat-link { transform: rotate(90deg); align-self: center; }
    .hero-moat-seal { grid-column: 1 / -1; }
  }
  /* Legacy coda rules kept (still used elsewhere if any). */
  .hero-aphorism-coda {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin: 18px 4px 0;
    padding: 14px 8px 4px 24px;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 2;
  }
  /* Single hairline rule across the top — gold-to-transparent, no glow.
     The "surprise" is the restraint: one thin line, perfectly tuned. */
  .hero-aphorism-coda::before {
    content:""; position:absolute; left:0; right:40%; top:0; height:1px;
    background: linear-gradient(90deg,
      rgba(184, 69, 26, .85) 0%,
      rgba(184, 69, 26, .55) 60%,
      transparent 100%);
  }
  /* Small section mark glyph (§) anchored on the left — typographic ornament. */
  .hero-aphorism-coda::after {
    content:"\00A7";
    position: absolute;
    left: 0; top: 14px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: 700;
    color: rgba(184, 69, 26, .85);
    line-height: 1;
  }
  /* "The structural advantage" — inline serif-italic small-caps eyebrow. */
  .hero-aphorism-coda-eb {
    display: inline-block;
    flex-shrink: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11.5px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(120, 40, 14, .85);
  }
  /* Inline separators between the three parts — middle-dot and em-dash. */
  .hero-aphorism-coda-sep {
    flex-shrink: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    color: rgba(120, 40, 14, .55);
    user-select: none;
  }
  /* The body — serif italic, single line, single-color until the punch word. */
  .hero-aphorism-coda-body {
    display: inline-block;
    flex-shrink: 1;
    min-width: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14.5px;
    line-height: 1.4;
    font-style: italic;
    color: #2a0e04;
    letter-spacing: -.05px;
    text-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-aphorism-coda-body strong {
    font-weight: 700;
    font-style: italic;
    color: #8a1818;
    letter-spacing: 0;
  }
  /* The closing line · same baseline · sotto voce. */
  .hero-aphorism-coda-tail {
    display: inline-block;
    flex-shrink: 1;
    min-width: 0;
    font-style: normal;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .15px;
    color: rgba(58, 28, 12, .68);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 640px) {
    .hero-aphorism { grid-template-columns: auto 1fr; padding: 14px 16px 16px; gap: 10px; }
    .hero-aphorism-mark--close { display: none; }
    .hero-aphorism-mark { font-size: 48px; }
    .hero-aphorism-pyrion { font-size: 1.25em; }
    .hero-aphorism-coda { margin: 14px 0 0; padding: 12px 4px 2px 18px; }
  }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .cta {
    padding: 14px 26px; border-radius: 8px;
    font-weight: 600; font-size: 14px; letter-spacing: .5px;
    cursor: pointer; transition: all .3s ease;
    border: 1px solid transparent;
  }
  .cta-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 45%, #c8202d 100%);
    background-size: 200% auto;
    color: #fff;
    border-color: rgba(255,255,255,.25);
    box-shadow:
      0 12px 26px -8px rgba(200,32,45,.55),
      0 4px 12px -4px rgba(234,88,12,.35),
      inset 0 1px 0 rgba(255,255,255,.30);
    font-weight: 800;
    letter-spacing: .6px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-position .35s;
  }
  .cta-primary:hover {
    transform: translateY(-3px);
    background-position: 100% 0;
    box-shadow:
      0 18px 38px -10px rgba(200,32,45,.65),
      0 6px 18px -4px rgba(234,88,12,.45),
      inset 0 1px 0 rgba(255,255,255,.40);
  }
  .cta-ghost {
    background: rgba(255,253,247,.88);
    color: #5a1a00;
    border-color: rgba(184,69,26,.42);
    text-decoration: none; display: inline-flex; align-items: center;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow:
      0 4px 14px rgba(120,55,20,.12),
      inset 0 1px 0 rgba(255,255,255,.85);
    letter-spacing: .6px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  }
  .cta-ghost:hover {
    transform: translateY(-3px);
    background: rgba(255,250,240,.95);
    border-color: #c8202d;
    color: #8a1a08;
    box-shadow:
      0 12px 28px -8px rgba(234,88,12,.30),
      inset 0 1px 0 rgba(255,255,255,.95);
  }
  .cta-primary { text-decoration: none; display: inline-flex; align-items: center; }

  /* ----- Hero lifecycle pills · the new orchestration-spine row -----
     Sits between the tagline and the CTAs. Each pill links to the module
     that drives that lifecycle; they shimmer subtly on hover. */
  .hero-cycles {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 8px 0 28px;
  }
  .cycle-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255,245,230,.08);
    border: 1px solid rgba(255,200,80,.42);
    border-radius: 999px;
    color: #fff5e6; text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
  }
  .cycle-pill:hover {
    transform: translateY(-2px);
    background: rgba(255,168,54,.18);
    border-color: var(--fire-orange);
    box-shadow: 0 6px 18px rgba(255,107,26,.30);
  }
  .cycle-eb {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
    padding: 3px 7px; border-radius: 4px;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
  }
  .cycle-lbl {
    font-size: 12.5px; font-weight: 700; color: #fde7c8; letter-spacing: .3px;
  }
  .cycle-pill:hover .cycle-lbl { color: #fff; }

  /* -------- Hero visual: flaming-mane lion -------- */
  .hero-visual {
    position: relative; height: 400px;
    display: flex; align-items: center; justify-content: center;
  }
  .glow-ring { display: none; }
  @keyframes ringPulse {
    0%, 100% { transform: scale(.92); opacity: .55; }
    50%      { transform: scale(1.08); opacity: 1; }
  }
  .lion-svg {
    width: 320px; height: 320px;
    position: relative; z-index: 2;
    filter: drop-shadow(0 0 36px rgba(255,168,54,.85)) drop-shadow(0 0 12px rgba(255,107,26,.55));
    animation: breathe 5s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.025) rotate(.4deg); }
  }
  .lion-svg .dollar-orbit text,
  .lion-svg > text {
    filter: drop-shadow(0 2px 4px rgba(122,15,30,.55))
            drop-shadow(0 0 6px rgba(255,200,60,.4));
  }
  .lion-svg .aura     { transform-box: fill-box; transform-origin: center; animation: auraPulse 4.2s ease-in-out infinite; }
  .lion-svg .bp-rays  { transform-box: fill-box; transform-origin: center; animation: raysRotate 80s linear infinite; }
  .lion-svg .bp-ring  { transform-box: fill-box; transform-origin: center; animation: ringShimmer 6s ease-in-out infinite; }
  @keyframes auraPulse {
    0%, 100% { transform: scale(.94); opacity: .65; }
    50%      { transform: scale(1.06); opacity: 1; }
  }
  @keyframes raysRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes ringShimmer {
    0%, 100% { opacity: .55; }
    50%      { opacity: .95; }
  }

  /* -------- Modules grid section (LIGHTER detail tier) -------- */
  .modules-section {
    position: relative; z-index: 1;
    margin: 0;
    padding: 70px 32px 80px;
    background:
      radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,107,26,.18) 0%, transparent 60%),
      linear-gradient(180deg, var(--detail-bg-1) 0%, var(--detail-bg-2) 100%);
    border-top: 1px solid rgba(200,32,45,.25);
    box-shadow: inset 0 6px 24px rgba(255,168,54,.18);
  }
  .modules-section::before {
    content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--fire-red), var(--fire-orange), var(--fire-gold), var(--fire-orange), var(--fire-red), transparent);
    background-size: 200% 100%;
    animation: shimmer 8s linear infinite;
  }
  .modules-section-inner { max-width: 1320px; margin: 0 auto; }

  .section-title {
    text-align: center; font-size: 36px; font-weight: 800;
    letter-spacing: -.5px; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--fire-red) 0%, var(--fire-orange) 50%, var(--fire-amber) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    text-shadow: 0 2px 8px rgba(200,32,45,.12);
  }
  .section-sub { text-align: center; color: var(--detail-mute); margin-bottom: 48px; font-size: 15px; }

  .module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  .module-card {
    background: linear-gradient(135deg, var(--detail-card-1) 0%, var(--detail-card-2) 100%);
    border: 1px solid var(--detail-border);
    border-radius: 14px;
    padding: 24px 22px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 14px var(--detail-shadow);
  }
  .module-card::before {
    content:""; position: absolute; top:0; left:0; right:0; height: 3px;
    background: linear-gradient(90deg, var(--fire-red), var(--fire-orange), var(--fire-gold));
    opacity: .55; transition: opacity .3s;
  }
  .module-card:hover {
    transform: translateY(-5px);
    border-color: var(--fire-orange);
    box-shadow: 0 18px 40px rgba(200,32,45,.22), 0 0 0 1px rgba(255,107,26,.35);
    background: linear-gradient(135deg, #fffaf2 0%, #ffe0b8 100%);
  }
  .module-card:hover::before { opacity: 1; }

  .module-card .card-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--fire-red) 0%, var(--fire-orange) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff8e7;
    margin-bottom: 16px;
    box-shadow: inset 0 -2px 6px rgba(122,15,30,.5), 0 6px 14px rgba(200,32,45,.35);
  }
  .module-card .card-icon svg { width: 22px; height: 22px; }

  /* Featured CEO Fireplace card — spans 2 grid columns and shows the Pyrion
     emblem (team on capital of fire, leader with conquered-revenue flag,
     pulsing victory star, five flame paths morphing) at hero-poster size. */
  .module-card.featured {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 24px;
  }
  .module-card.featured .card-icon.emblem-icon {
    width: 140px;
    height: 170px;
    flex-shrink: 0;
    border-radius: 16px;
    margin-bottom: 0;
    background: linear-gradient(135deg, #fbe9c8 0%, #e8c898 55%, #d4a874 100%);
    box-shadow:
      inset 0 0 24px rgba(255,200,60,.4),
      inset 0 0 0 1px rgba(200,32,45,.3),
      0 12px 28px rgba(200,32,45,.32),
      0 0 0 2px rgba(255,107,26,.2);
    display: flex; align-items: center; justify-content: center;
  }
  .module-card.featured .card-icon.emblem-icon svg {
    width: auto;
    height: 150px;
    max-width: 100%;
    max-height: 100%;
  }
  .module-card.featured .card-body { flex: 1; min-width: 0; }
  .module-card.featured h3 { font-size: 22px; margin-bottom: 8px; }
  .module-card.featured p { font-size: 14px; line-height: 1.6; }
  .module-card.featured .featured-pill {
    display: inline-block;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    padding: 4px 10px; border-radius: 20px;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(200,32,45,.4);
  }
  /* Fallback for the small variant (kept for any other emblem-icon usage) */
  .module-card .card-icon.emblem-icon {
    background: linear-gradient(135deg, #1a0d07 0%, #2b1810 55%, #3a1208 100%);
    box-shadow: inset 0 0 10px rgba(255,200,60,.22), 0 6px 14px rgba(200,32,45,.4),
                0 0 0 1px rgba(255,107,26,.25);
  }
  .module-card .card-icon.emblem-icon svg {
    width: auto;
    height: 40px;
    max-width: 100%;
    max-height: 100%;
  }
  @media (max-width: 700px) {
    .module-card.featured { grid-column: span 1; flex-direction: column; align-items: flex-start; }
    .module-card.featured .card-icon.emblem-icon { width: 100%; height: 140px; }
    .module-card.featured .card-icon.emblem-icon svg { height: 120px; }
  }

  .module-card h3 {
    font-size: 16px; color: var(--fire-deep); margin-bottom: 6px;
    font-weight: 800; letter-spacing: .2px;
  }
  .module-card p { font-size: 13px; color: var(--detail-mute); line-height: 1.6; }

  footer {
    display: none;
    position: relative; z-index: 1;
    padding: 26px 24px;
    text-align: center;
    color: var(--detail-mute); font-size: 13px;
    background: linear-gradient(180deg, var(--detail-bg-1) 0%, var(--detail-bg-2) 100%);
    border-top: 1px solid rgba(200,32,45,.22);
  }
  footer .roar {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 800; letter-spacing: 2.5px;
  }

  /* -------- Responsive -------- */
  @media (max-width: 980px) {
    .hero { padding: 40px 0; }
    .hero-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 24px; }
    .hero-text h1 { font-size: 38px; }
    .hero-visual { height: 340px; order: -1; }
    .lion-svg { width: 240px; height: 240px; }
    .top-bar { padding: 10px 16px; gap: 12px; }
    .brand-name { font-size: 20px; letter-spacing: 2px; }
    .brand-tag { font-size: 10px; letter-spacing: 1px; }
    .icon-btn { width: 38px; height: 38px; }
    .module-nav { padding: 6px 14px 10px; }
  }

  /* -------- Placements module: lighter main panel, darker sidebar -------- */
  body.pyrion-light-theme {
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,26,.10) 0%, transparent 60%),
      linear-gradient(180deg, #fff8ec 0%, #fdeccd 100%);
  }
  body.pyrion-light-theme .layout > main {
    background: transparent;
  }
  body.pyrion-light-theme .side-nav {
    background: #ede5d6;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid #d8cdb8;
    box-shadow: 2px 0 6px rgba(120,60,10,.10);
  }
  body.pyrion-light-theme .side-nav-section-header {
    border-bottom-color: #d8cdb8;
  }
  body.pyrion-light-theme .side-nav-section-header .label {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #1a0604;
    font-weight: 900;
    font-size: 13px;
  }
  body.pyrion-light-theme .side-nav-section-header .icon {
    width: 24px; height: 24px;
    color: var(--fire-deep);
  }
  body.pyrion-light-theme .side-nav-item {
    color: #140504;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .2px;
    padding: 11px 14px;
  }
  body.pyrion-light-theme .side-nav-sub > * {
    border-left-color: rgba(200,120,40,.32);
  }
  body.pyrion-light-theme .side-nav-item svg {
    color: var(--fire-deep);
    width: 18px; height: 18px;
    stroke-width: 2.4;
  }
  /* ---- Hover state: subtle warm cream highlight ---- */
  body.pyrion-light-theme .side-nav-item:hover {
    background: #fbecd6;
    color: var(--fire-red);
    transform: translateX(2px);
  }
  body.pyrion-light-theme .side-nav-item:hover svg {
    color: var(--fire-red);
  }

  /* ---- Selected (active) top-level item: light amber highlighter, bold, accent bar ---- */
  body.pyrion-light-theme .side-nav-item.active {
    background: #fcd9a1;
    color: #3a1500;
    font-weight: 900;
    letter-spacing: .3px;
    box-shadow: inset 0 0 0 1px #efbf73,
                0 2px 6px rgba(180,90,20,.18);
    transform: none;
  }
  body.pyrion-light-theme .side-nav-item.active svg {
    color: var(--fire-red);
  }
  body.pyrion-light-theme .side-nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px; bottom: 6px;
    width: 4px;
    background: var(--fire-red);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px rgba(200,32,45,.55);
  }

  /* ---- Sub-items: cleaner deselected state ---- */
  body.pyrion-light-theme .side-nav-subitem {
    color: #1a0604;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 12px;
    transition: background .18s ease, color .18s ease,
                padding-left .18s ease, font-weight .18s ease;
  }

  /* ---- Sub-item hover: very light cream + indent ---- */
  body.pyrion-light-theme .side-nav-subitem:hover {
    background: #fdf2e6;
    color: var(--fire-red);
    padding-left: 16px;
  }

  /* ---- Selected sub-item: lighter highlighter, bold + underline ---- */
  body.pyrion-light-theme .side-nav-subitem.active {
    background: #ffeac7;
    color: #3a1500;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--fire-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    box-shadow: inset 0 0 0 1px #f3cf94;
    padding-left: 16px;
  }
  body.pyrion-light-theme .side-nav-subitem.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px; bottom: 6px;
    width: 3px;
    background: var(--fire-orange);
    border-radius: 0 3px 3px 0;
  }

  /* ---- Group block · light-theme highlight ---- */
  body.pyrion-light-theme .side-nav-group-block .side-nav-group-header {
    color: var(--fire-deep);
  }
  body.pyrion-light-theme .side-nav-group-block .side-nav-group-header svg {
    color: var(--fire-red);
  }