/* Audience spoke pages (/for//) - shared styles. One template, five spokes (CHRO, DPO, Compliance & Internal Audit, External Auditor, Operations & Enablement - HRO Consultant and Group Risk & CFO both deferred, see project_group_risk_persona_correction_2026-09-16.md). Locked structure: hero (headline + a scoped Evidence Ledger, see .vk-ledger below) -> why-it-matters -> Programmes strip (compact cards, all open - no "show more" gate) -> evidence proof -> Request Access. Cards are deliberately NOT .vk-prog-card from vakio.css - that component carries a dial block, micro-feature rail and popover built for the twelve-card hub grid. Spokes reuse only the token-level pieces of that system (.vk-fear-tag colours, --vk/ --bg-c/--b1/--b2) inside a lighter, two-state card of their own. Layout axis: every section here uses the site's plain .w (1200px, see components.css) - the SAME container nav and footer use - so a spoke's left edge lines up with every other page. Do not reintroduce a page-specific narrower container (.spoke-w existed briefly and was removed 2026-09-16: it centered independently of .w, so nav/footer sat at one left edge and the spoke's own content sat ~230px further right - the "different page glued in" bug). Reading-width control belongs on individual elements (.spoke-hero-left, .spoke-why, .spoke-prog-grid), exactly like company.css's .sec-lead{max-width} pattern - never on the container. See .claude/agent-memory/techsutra-web-brand-custodian/ for the full spoke architecture record. */ [id]{scroll-margin-top:calc(var(--nav-h) + var(--abar-h) + 14px)} /* Breadcrumb isn't in components.css (only company.css/services.css load it) - spoke pages don't load either, so it's reproduced here verbatim for visual consistency with those page families. */ .breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:var(--text-xs);color:var(--text-3);letter-spacing:.02em;padding:calc(var(--nav-h) + var(--abar-h) + 1.25rem) 0 0} .breadcrumb a{color:var(--text-3);transition:color .2s ease} .breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--vk-l)} .breadcrumb-sep{color:var(--text-3)} .breadcrumb-current{color:var(--text-2)} @media (max-width:768px){.breadcrumb{flex-wrap:wrap}} /* ── HERO - two columns, same grid ratio as the hub's .vk-hero-inner (minmax(0,1fr) + a fixed-width right column), just without that hero's min-height:100vh/padding:var(--sp-16) - a spoke is a short page, not a full-viewport opener. Right column is .vk-hero-right holding .vk-ledger (both reused as-is from vakio.css) scoped to this spoke's own featured Programmes via renderLedgerRows(el, [tags]). ── */ .spoke-hero-inner{ width:100%;max-width:var(--max-w);margin:0 auto; padding:var(--sp-8) var(--sp-10) var(--sp-6); display:grid;grid-template-columns:minmax(0,1fr) 380px; align-items:start;gap:var(--sp-8); } .spoke-hero-left{width:100%;min-width:0} .spoke-h1{ font-family:var(--font-display); /* Same clamp as .sec-h (components.css) - every section heading on the site already uses this scale; a hero statement is long-form sentence copy here (a full question), not a short display tagline like the hub's .vk-wordmark, so it belongs in the sitewide heading scale, not a bigger one-off hero size. Reuse this clamp for any future spoke's own headline - it's the standard now, not a per-page choice. */ font-size:clamp(1.75rem,3.2vw,2.6rem); font-weight:600; line-height:1.22; max-width:30ch; margin:var(--sp-4) 0 var(--sp-4); text-wrap:balance; } .spoke-sub{font-size:var(--text-md);color:var(--text-2);line-height:1.7;max-width:46ch;margin-bottom:var(--sp-5)} .spoke-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)} .spoke-hero-inner .vk-ledger{margin-top:var(--sp-2)} @media (max-width:900px){ .spoke-hero-inner{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-10) var(--sp-5)} .spoke-h1,.spoke-sub{max-width:none} .spoke-hero-inner .vk-ledger{max-width:480px;margin-top:var(--sp-6)} } .spoke-why{ border-radius:var(--radius-md); border-left:3px solid var(--vk); background:var(--vk-d); padding:var(--sp-5) var(--sp-6); margin:var(--sp-6) 0; font-size:var(--text-md); line-height:1.6; max-width:680px; } .spoke-progs{margin:var(--sp-6) 0} .spoke-progs-h{font-size:1.4rem;margin-bottom:var(--sp-5)} /* All Programmes for this spoke render open, side by side - no "+1 more" click gate. A spoke has at most three cards (see the Programme Placement Map), so this never becomes a long list; two fit per row at the cap below, a third simply wraps to its own row. */ .spoke-prog-grid{max-width:720px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)} .spoke-prog-card{background:var(--bg-c);border:1px solid var(--b2);border-radius:var(--radius-lg);padding:var(--sp-5);transition:border-color .2s ease} .spoke-prog-card:hover{border-color:var(--vk-b)} .spoke-prog-card-head{ display:flex;align-items:center;gap:var(--sp-3);width:100%; background:none;border:none;padding:0;margin:0 0 var(--sp-3); font:inherit;color:inherit;text-align:left;cursor:pointer; } .spoke-prog-card-head:focus-visible{outline:2px solid var(--vk);outline-offset:3px} .spoke-prog-icon{font-size:1.3rem;line-height:1} .spoke-prog-name{font-weight:600;font-size:1rem;line-height:1.3;flex:1} .spoke-prog-chev{color:var(--text-2);font-size:.8rem;transition:transform .2s ease;flex-shrink:0} .spoke-prog-card[data-open="true"] .spoke-prog-chev{transform:rotate(180deg)} .spoke-prog-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)} .spoke-prog-hook{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin:0} .spoke-prog-detail{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--b1)} .spoke-prog-detail[hidden]{display:none} .spoke-prog-q{ font-style:italic;color:var(--text-1); border-left:2px solid var(--b2);padding-left:var(--sp-3); font-size:var(--text-sm);line-height:1.6;margin:0 0 var(--sp-3); } .spoke-prog-reason{font-size:var(--text-sm);color:var(--text-2);line-height:1.65;margin:0 0 var(--sp-3)} /* A