/* ==========================================================================
   LIVE SLIDE ANIMATIONS — VForge homepage body (slides 3-9)
   On-brand language: verdan-green / deep-moss / copper-flare / forge-ember.
   Every decorative element is aria-hidden + pointer-events:none (does not
   block content or interaction). Heights are tuned to match Slide 1/2.
   ========================================================================== */

/* ---- Shared keyframes ---- */
@keyframes liveFlowDash { to { background-position: 40px 0; } }
@keyframes livePulseTravel {
  0%   { left: 4%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 96%; opacity: 0; }
}
@keyframes liveNodeBeep {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,80,46,0.0); }
  50%      { box-shadow: 0 0 0 10px rgba(181,80,46,0.18), 0 0 22px 2px rgba(210,101,60,0.45); }
}
@keyframes liveStepFill { from { height: 0; } to { height: 100%; } }
@keyframes liveStepDot {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes liveOrbPulse {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 0.85; }
}
@keyframes liveRingExpand {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes liveRootGrow {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}
@keyframes liveGridNode {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 0.9;  transform: scale(1.15); }
}
@keyframes liveScanSweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes liveRadarPing {
  0%   { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes liveFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ============================================================
   SLIDE 3 — PRODUCT FLOW: energy running along the suite path
   ============================================================ */
.flow-line {
  background: repeating-linear-gradient(90deg, rgba(181,80,46,0.45) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  animation: liveFlowDash 1.1s linear infinite;
  box-shadow: 0 0 10px rgba(210,101,60,0.35);
}
.flow-card a { font-size: 0.82rem; font-weight: 700; color: var(--verdan-green); display: inline-flex; align-items: center; gap: 0.3em; }
.flow-card a:hover { color: var(--forge-ember); }
.flow-card a::after { content: '→'; transition: transform .25s var(--ease); }
.flow-card a:hover::after { transform: translateX(4px); }
.flow-roadmap-row {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed rgba(181,80,46,0.4);
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  position: relative;
}
.flow-roadmap-row::before {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 40%;
  background: linear-gradient(90deg, var(--forge-ember), transparent);
  animation: liveFlowDash 2.5s linear infinite;
}
.roadmap-chip {
  font-family: var(--font-mono); font-size: 0.75rem; padding: 0.5em 1em;
  border-radius: 999px; border: 1px solid rgba(181,80,46,0.35);
  color: var(--forge-ember); background: rgba(255,255,255,0.6);
}
.flow-line::after {                       /* travelling energy packet */
  content: '';
  position: absolute;
  top: -3px;
  width: 26px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(246,179,106,0), #F6B36A 60%, #fff 100%);
  box-shadow: 0 0 12px 2px rgba(246,179,106,0.8);
  animation: livePulseTravel 4.5s ease-in-out infinite;
}
.flow-card { position: relative; }
.flow-node-dot { animation: liveNodeBeep 3s ease-in-out infinite; }
.flow-card:nth-child(1) .flow-node-dot { animation-delay: 0s; }
.flow-card:nth-child(2) .flow-node-dot { animation-delay: 0.6s; }
.flow-card:nth-child(3) .flow-node-dot { animation-delay: 1.2s; }
.flow-card:nth-child(4) .flow-node-dot { animation-delay: 1.8s; }
.flow-card:nth-child(5) .flow-node-dot { animation-delay: 2.4s; }

/* ============================================================
   SLIDE 4 — HOW IT WORKS: progress fill + sequential markers
   ============================================================ */
.timeline { position: relative; }
.timeline-step::before {
  background: linear-gradient(var(--forge-ember) 0%, var(--verdan-green) 100%);
  background-size: 100% 200%;
  animation: liveStepFillGrad 4s linear infinite;
  box-shadow: 0 0 8px rgba(210,101,60,0.4);
}
@keyframes liveStepFillGrad { to { background-position: 0 200%; } }
.timeline-step::after {                   /* travelling "current" dot */
  content: '';
  position: absolute;
  left: 27px; top: 64px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #F6B36A;
  box-shadow: 0 0 10px 2px rgba(246,179,106,0.9);
  animation: liveStepDot 6s linear infinite;
}
.timeline-marker { animation: liveNodeBeep 3.2s ease-in-out infinite; }
.timeline-step:nth-child(1) .timeline-marker { animation-delay: 0s; }
.timeline-step:nth-child(2) .timeline-marker { animation-delay: 0.8s; }
.timeline-step:nth-child(3) .timeline-marker { animation-delay: 1.6s; }
.timeline-step:nth-child(4) .timeline-marker { animation-delay: 2.4s; }

/* ============================================================
   SLIDE 5 — PULL QUOTE: calm forged ember orb + radar rings
   ============================================================ */
.pull-quote-block { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.pull-quote-block .quote-aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,180,0.35) 0%, rgba(246,179,106,0.12) 45%, transparent 70%);
  animation: liveOrbPulse 6s ease-in-out infinite;
  z-index: -1;
}
.pull-quote-block .quote-ring {
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px; margin: -90px 0 0 -90px;
  border: 1px solid rgba(255,235,210,0.4); border-radius: 50%;
  animation: liveRingExpand 5s ease-out infinite;
  z-index: -1;
}
.pull-quote-block .quote-ring.r2 { animation-delay: 2.5s; }

/* ============================================================
   SLIDE 6 — CREDIBILITY (dark): roots growing + pillar light
   ============================================================ */
.section-dark { position: relative; overflow: hidden; }
/* clean drifting node-field replaces the old intersecting orange roots */
.dark-nodes {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.dnode {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--copper-flare);
  box-shadow: 0 0 14px 3px rgba(246,179,106,0.55);
  transform: translate(-50%,-50%);
  animation: dnFloat 7s ease-in-out infinite;
  animation-delay: var(--d);
  opacity: 0.8;
}
.dnode::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 1px solid rgba(201,123,74,0.5);
  animation: dnPing 4s ease-out infinite; animation-delay: var(--d);
}
@keyframes dnFloat { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } }
@keyframes dnPing { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
.split { position: relative; z-index: 1; }
.pillar {
  opacity: 0; transform: translateY(14px);
  animation: pillarIn 0.7s var(--ease) forwards;
}
.pillar:nth-child(1) { animation-delay: 0.1s; }
.pillar:nth-child(2) { animation-delay: 0.35s; }
.pillar:nth-child(3) { animation-delay: 0.6s; }
@keyframes pillarIn { to { opacity: 1; transform: translateY(0); } }
.pillar-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,32,26,0.55); color: var(--copper-flare);
  font-family: var(--font-mono); font-size: 0.8rem; margin-right: 0.7rem;
  flex-shrink: 0;
  animation: liveNodeBeep 3.5s ease-in-out infinite;
}
.pillar { display: flex; align-items: flex-start; }

/* ============================================================
   SLIDE 7 — INDUSTRIES: pulsing network grid behind cards
   ============================================================ */
.section-parchment.industries-slide { position: relative; overflow: hidden; }
.industries-grid-deco {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
}
.industries-grid-deco .gnode {
  fill: var(--forge-ember);
  transform-box: fill-box; transform-origin: center;
  animation: liveGridNode 4s ease-in-out infinite;
}
.industries-grid-deco .gnode:nth-child(2) { animation-delay: 0.6s; }
.industries-grid-deco .gnode:nth-child(3) { animation-delay: 1.2s; }
.industries-grid-deco .gnode:nth-child(4) { animation-delay: 1.8s; }
.industries-grid-deco .gnode:nth-child(5) { animation-delay: 2.4s; }
.industries-grid-deco .gline { stroke: rgba(181,80,46,0.25); stroke-width: 1; }
.card-grid-3, .card-grid-2, .industries-preview .section-head { position: relative; z-index: 1; }
.industry-card .card-icon { animation: liveFloatY 5s ease-in-out infinite; }

/* ============================================================
   SLIDE 8 — FOUNDING ENGAGEMENTS: live "onboarding" + scan
   ============================================================ */
.founding-slide { position: relative; overflow: hidden; }
.founding-slide .live-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(to bottom, rgba(201,123,74,0.14), transparent);
  pointer-events: none; z-index: 0;
  animation: liveScanSweep 7s ease-in-out infinite;
}
.case-study-card .live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #4caf6a; margin-right: 0.5rem;
  box-shadow: 0 0 0 0 rgba(76,175,106,0.6);
  animation: liveNodeBeep 2.4s ease-in-out infinite;
}
.card-grid-2 { position: relative; z-index: 1; }

/* ============================================================
   SLIDE 9 — CTA BAND: radar ping around the button
   ============================================================ */
.cta-band { isolation: isolate; }
.cta-band .cta-ping {
  position: absolute; right: 40px; top: 50%;
  width: 200px; height: 200px; margin-top: -100px;
  border-radius: 50%;
  border: 1px solid rgba(201,123,74,0.45);
  animation: liveRadarPing 4.5s ease-out infinite;
  pointer-events: none; z-index: 0;
}
.cta-band .cta-ping.r2 { animation-delay: 2.25s; }
.cta-band .btn-primary { position: relative; z-index: 2; }

/* ---- Slide height normalization: every body slide (2-9) shares the same
       vertical rhythm so the page reads as a sequence of equal slides ---- */
.is-slide {
  min-height: clamp(640px, 90vh, 840px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 7vh, 6rem) 0;
}
.is-slide > .container { position: relative; z-index: 2; width: 100%; }
/* two-column slides (Credibility, Industries) get more height to breathe */
.section-dark.is-slide,
.industries-slide.is-slide { min-height: clamp(720px, 96vh, 920px); }
/* keep the dark node-field / industry grid / scan / pings tucked behind copy */
.section-dark .dark-nodes { z-index: 0; }
.ind-graph { z-index: 0; }

/* ---- Slide 2: dark problem boxes (hero dark theme) ---- */
.section-compact.is-slide { background: linear-gradient(160deg, var(--ink) 0%, var(--verdan-green-deep) 60%, var(--verdan-green) 100%); color: var(--signal); }
.section-compact.is-slide .section-head h2,
.section-compact.is-slide .section-head .lede { color: var(--signal); }
.section-compact.is-slide .section-head .lede { color: rgba(244,239,228,0.74); }
.problem-card.dark-viz {
  background: rgba(20,32,26,0.55);
  border: 1px solid rgba(201,123,74,0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px -24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(244,239,228,0.05);
  backdrop-filter: blur(2px);
}
.problem-card.dark-viz .card-icon { color: var(--copper-flare); }
.problem-card.dark-viz .card-icon svg { stroke: var(--copper-flare); }
.problem-card.dark-viz .num { color: #F6B36A; }

/* ---- Generic dark-panel card treatment: any card inside section-dark
       reads as a high-contrast copper-stroked surface (index gold standard) ---- */
.section-dark .flow-card,
.section-dark .industry-card,
.section-dark .timeline-content,
.section-dark .insight-card,
.section-dark .problem-card,
.section-dark .naming-card,
.section-dark .outcome-list li {
  background: rgba(244,239,228,0.04) !important;
  border: 1px solid rgba(201,123,74,0.30) !important;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px -26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(244,239,228,0.05);
  color: rgba(244,239,228,0.82) !important;
}
.section-dark .flow-card:hover,
.section-dark .industry-card:hover,
.section-dark .insight-card:hover { border-color: rgba(201,123,74,0.6) !important; }
.section-dark .flow-card h4,
.section-dark .industry-card h3,
.section-dark .timeline-content h3,
.section-dark .problem-card h3,
.section-dark .naming-card h3,
.section-dark .insight-card h3 { color: var(--signal) !important; }
.section-dark .flow-card p,
.section-dark .industry-card p,
.section-dark .timeline-content p,
.section-dark .insight-card p,
.section-dark .naming-card p { color: rgba(244,239,228,0.72) !important; }
.section-dark .flow-card .fn,
.section-dark .flow-node-dot span { color: var(--copper-flare) !important; }
.section-dark .flow-node-dot { border-color: rgba(201,123,74,0.5) !important; }
.problem-card.dark-viz h3 { color: var(--signal); }
.problem-card.dark-viz p { color: rgba(244,239,228,0.74); }
.problem-card.dark-viz .problem-meter {
  background: rgba(244,239,228,0.05);
  border-color: rgba(201,123,74,0.22);
}

/* ---- Height balancing overrides (Slide 1/2 rhythm) ---- */
/* S4 How It Works: compress the timeline so it ~matches Slide 1/2 */
.timeline-step { padding-bottom: var(--space-3); }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before { top: 56px; }
.timeline-marker { width: 56px; height: 56px; }

/* S5 Growth & Forge: orange statement + structured two-panel visual */
.section-light[style*="padding-top:0"] { padding-bottom: clamp(6rem, 12vh, 8rem); }
.growth-statement {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: linear-gradient(120deg, var(--forge-ember) 0%, #9c4527 100%);
  border-radius: var(--radius-lg);
  padding: clamp(3.5rem, 7vh, 5rem) var(--space-5);
  margin-bottom: var(--space-5);
}
.growth-statement .gf-section { overflow: hidden; }
.gf-frame {
  background: var(--white);
  border: 1px solid var(--parchment-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 30px 70px -40px rgba(43,43,40,0.45);
}
.gf-legend { display: flex; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-2); }
.gf-leg { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.gf-leg i { width: 12px; height: 12px; border-radius: 50%; }
.gf-leg-n i { background: var(--verdan-green); }
.gf-leg-b i { background: var(--forge-ember); }
.gf-diagram { width: 100%; }
.gf-svg { width: 100%; height: auto; display: block; }

/* SVG element styling — DARK high-contrast panel */
.gf-bg { fill: url(#gfPanel); stroke: rgba(201,123,74,0.28); stroke-width: 1.5; }
.gf-grid line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.gf-chip-n { fill: rgba(63,169,126,0.18); stroke: rgba(63,169,126,0.5); stroke-width: 1; }
.gf-chip-b { fill: rgba(246,179,106,0.16); stroke: rgba(246,179,106,0.5); stroke-width: 1; }
.gf-chip-t { fill: #F4EFE4; font: 700 14px var(--font-mono); letter-spacing: 0.1em; text-anchor: middle; }
.gf-spine { fill: none; stroke: url(#gfSpine); stroke-width: 10; stroke-linecap: round; filter: url(#gfGlow); }

/* stage connectors */
.gf-link { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 2.5; stroke-dasharray: 4 7; }
.gf-link2 { stroke: var(--copper-flare); stroke-width: 3; opacity: 0.85; }

/* central stage nodes — big, bold, glowing */
.gf-node-c { fill: #0E201A; stroke: var(--copper-flare); stroke-width: 3.5; filter: url(#gfGlow); }
.gf-node-n { fill: #F6B36A; font: 700 22px var(--font-display); text-anchor: middle; }
.gf-node-final { fill: var(--verdan-green); stroke: #7CD8AC; }
.gf-node-final + .gf-node-n { fill: #06231A; }
.gf-stage-t { fill: #F4EFE4; font: 700 16px var(--font-mono); letter-spacing: 0.08em; text-anchor: middle; }
.gf-desc-n, .gf-desc-b { font: 600 14px var(--font-body); text-anchor: middle; }
.gf-desc-n { fill: #8FE3B5; }
.gf-desc-b { fill: #F2B68C; }

/* nature column */
.gf-soil { stroke: #C9A06A; stroke-width: 3.2; stroke-linecap: round; }
.gf-seed { fill: #3FA97E; stroke: #7CD8AC; stroke-width: 1.5; }
.gf-stem { fill: none; stroke: #4EC28E; stroke-width: 4.2; stroke-linecap: round; }
.gf-root { fill: none; stroke: #2C5F44; stroke-width: 3; stroke-linecap: round; }
.gf-leaf { fill: #4EC28E; }
.gf-fruit { fill: #E8763E; stroke: #FFB07A; stroke-width: 1.6; }

/* business column */
.gf-raw { fill: rgba(246,179,106,0.35); stroke: #F6B36A; stroke-width: 2; }
.gf-bar { fill: #4EC28E; }
.gf-lens { fill: none; stroke: #F6B36A; stroke-width: 3.2; }
.gf-lens-h { stroke: #F6B36A; stroke-width: 3.2; stroke-linecap: round; }
.gf-flag { fill: #E8763E; }
.gf-hub { fill: #4EC28E; stroke: #7CD8AC; stroke-width: 2; }
.gf-tn { fill: rgba(246,179,106,0.35); stroke: #F6B36A; stroke-width: 2; }
.gf-trend { fill: none; stroke: #4EC28E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 6; animation: liveFlowDash 1.6s linear infinite; }
.gf-check { fill: none; stroke: #7CD8AC; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.gf-yield { fill: #F6B36A; filter: drop-shadow(0 0 6px rgba(246,179,106,0.9)); }
.gf-yield.gfy1 { animation: gfYield 2.6s ease-out infinite; }
.gf-yield.gfy2 { animation: gfYield 2.6s ease-out infinite 0.9s; }
.gf-yield.gfy3 { animation: gfYield 2.6s ease-out infinite 1.8s; }
@keyframes gfYield { 0% { transform: translate(0,0) scale(1); opacity: 0.95; } 70% { opacity: 0.8; } 100% { transform: translate(46px,-30px) scale(0.4); opacity: 0; } }

/* flowing data stream up the spine = growth */
.gf-flow { fill: #FFD9A8; filter: url(#gfGlow); transform-box: fill-box; transform-origin: center; }
.gf-flow.gff1 { animation: gfFlow 4.2s linear infinite; }
.gf-flow.gff2 { animation: gfFlow 4.2s linear infinite 1.05s; }
.gf-flow.gff3 { animation: gfFlow 4.2s linear infinite 2.1s; }
.gf-flow.gff4 { animation: gfFlow 4.2s linear infinite 3.15s; }
@keyframes gfFlow {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-400px); opacity: 0; }
}

/* continuous "keeps yielding" burst from final node */
.gf-yield-burst { fill: none; stroke: #E8763E; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gf-yield-burst.gfyb1 { animation: gfBurst 3s ease-out infinite; }
.gf-yield-burst.gfyb2 { animation: gfBurst 3s ease-out infinite 1.5s; }
@keyframes gfBurst { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } }

/* climbing growth marker */
.gf-climb { fill: #FFD9A8; filter: url(#gfGlow); animation: gfClimb 5.5s ease-in-out infinite; }
@keyframes gfClimb { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 48% { transform: translateY(-400px); } 52% { transform: translateY(-400px); opacity: 1; } 58% { transform: translateY(-400px) scale(1.8); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* proof ribbon */
.gf-proof {
  display: flex; align-items: center; gap: 0.8rem; margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(120deg, rgba(63,169,126,0.16), rgba(246,179,106,0.16));
  border: 1px solid rgba(201,123,74,0.4);
  border-radius: var(--radius-md);
}
.gf-proof-mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--verdan-green); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.gf-proof p { margin: 0; font-size: 0.98rem; color: #EDE6D8; }
.gf-proof strong { color: #7CD8AC; }

/* stage nodes always bold; gentle sequential glow gives life */
.gf-node { animation: gfNodeGlow 4s ease-in-out infinite; }
.gf-node.s2 { animation-delay: 1s; }
.gf-node.s3 { animation-delay: 2s; }
.gf-node.s4 { animation-delay: 3s; }
@keyframes gfNodeGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(246,179,106,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(246,179,106,0.65)); }
}

.gs-aura {
  position: absolute; left: 50%; top: 50%;
  width: 460px; height: 460px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,180,0.32) 0%, rgba(246,179,106,0.12) 45%, transparent 70%);
  animation: liveOrbPulse 6s ease-in-out infinite; z-index: -1;
}
.growth-statement .gs-ring {
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px; margin: -90px 0 0 -90px;
  border: 1px solid rgba(255,235,210,0.4); border-radius: 50%;
  animation: liveRingExpand 5s ease-out infinite; z-index: -1;
}
.growth-statement .gs-ring.r2 { animation-delay: 2.5s; }
.growth-statement blockquote {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.4;
  max-width: 820px; margin: 0 auto; color: var(--signal);
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.growth-statement cite { display:block; margin-top: var(--space-3); font-style: normal; font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.9; color: var(--signal); }

.cta-band { min-height: 380px; align-items: center; }

/* S7 Industries: let the 4-col grid wrap instead of cramping (inline style fix) */
@media (max-width: 1080px) {
  .industries-slide .card-grid-3[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .industries-slide .card-grid-3[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .timeline-step { grid-template-columns: 48px 1fr; gap: var(--space-2); }
  .timeline-marker { width: 48px; height: 48px; }
  .timeline-step::before { left: 23px; top: 48px; }
}

/* ============================================================
   SLIDE 2 — PROBLEM FRAMING: live, relevance-matched meters
   (the first slide that previously felt static)
   ============================================================ */
.slide2-ambient {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background-image:
    linear-gradient(rgba(31,77,58,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,77,58,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%);
}
.slide2-ambient::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 520px; height: 520px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(181,80,46,0.10) 0%, transparent 65%);
}

.problem-meter {
  height: 54px; margin: 0.2rem 0 0.9rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31,77,58,0.05), rgba(31,77,58,0));
  border: 1px solid rgba(31,77,58,0.08);
  padding: 5px 9px;
  overflow: hidden;
}
.pmeter { width: 100%; height: 100%; display: block; }

/* 01 — leaking throughput line + travelling leak marker */
.pm-leak .pm-line {
  fill: none; stroke: var(--forge-ember); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 4 5;
  filter: drop-shadow(0 0 4px rgba(210,101,60,0.5));
  animation: pmLeak 2.4s linear infinite;
}
@keyframes pmLeak { to { stroke-dashoffset: -36; } }
.pm-leak .pm-leak-dot {
  fill: #F6B36A; filter: drop-shadow(0 0 6px rgba(246,179,106,0.9));
  animation: pmLeakDot 2.4s ease-in-out infinite;
}
@keyframes pmLeakDot { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* 02 — manual-workload stack rising every cycle */
.pm-cost .bar {
  fill: rgba(181,80,46,0.22);
  transform-box: fill-box; transform-origin: bottom;
}
.pm-cost .b1 { animation: pmCost 2.6s ease-in-out infinite; }
.pm-cost .b2 { animation: pmCost 2.6s ease-in-out infinite 0.18s; }
.pm-cost .b3 { animation: pmCost 2.6s ease-in-out infinite 0.36s; }
.pm-cost .b4 { animation: pmCost 2.6s ease-in-out infinite 0.54s; }
.pm-cost .b5 { animation: pmCost 2.6s ease-in-out infinite 0.72s; }
.pm-cost .b6 { animation: pmCost 2.6s ease-in-out infinite 0.90s; }
@keyframes pmCost {
  0%, 100% { transform: scaleY(0.28); fill: rgba(181,80,46,0.18); }
  50%      { transform: scaleY(1);    fill: var(--forge-ember); }
}

/* 03 — technical-debt bar ~97% full; a stuck marker pulses at the cap */
.pm-debt .track { fill: rgba(31,77,58,0.10); }
.pm-debt .fill {
  fill: var(--forge-ember);
  transform: scaleX(0.97); transform-origin: left;
  transform-box: fill-box;
}
.pm-debt .stuck-dot {
  fill: #F6B36A; filter: drop-shadow(0 0 6px rgba(246,179,106,0.9));
  animation: pmStuck 2.2s ease-in-out infinite;
}
@keyframes pmStuck {
  0%, 100% { transform: translateX(222px); opacity: 0.45; }
  50%      { transform: translateX(222px); opacity: 1; }
}

/* ---- Slide 2: dashed cap line on the cost/debt meters ---- */
.pm-cap { stroke: rgba(246,179,106,0.55); stroke-width: 1.4; stroke-dasharray: 3 4; }

/* ============================================================
   SLIDE 4 — HOW IT WORKS: per-step illustrative visual + outcome
   ============================================================ */
.timeline-step {
  display: grid;
  grid-template-columns: 64px 1fr 220px;
  align-items: start;
  gap: var(--space-4);
}
@media (max-width: 900px) { .timeline-step { grid-template-columns: 56px 1fr; } .timeline-step .step-viz { display: none; } }
.step-viz { width: 220px; grid-column: 3; align-self: center; }
.step-viz svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.sv-bg { fill: rgba(31,77,58,0.05); stroke: rgba(31,77,58,0.10); stroke-width: 1; }
.sv-sig { fill: none; stroke: var(--forge-ember); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; animation: liveFlowDash 1.6s linear infinite; }
.sv-flag { fill: var(--copper-flare); animation: liveNodeBeep 2.4s ease-in-out infinite; transform-origin: center; }
.sv-lens { stroke: var(--verdan-green); stroke-width: 2.2; fill: none; transform-origin: 136px 52px; animation: svLens 3.2s ease-in-out infinite; }
@keyframes svLens { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 1; } }
.sv-bar-before { fill: rgba(181,80,46,0.30); stroke: var(--forge-ember); stroke-width: 1.2; }
.sv-bar-after { fill: var(--verdan-green); animation: svGrow 2.6s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
@keyframes svGrow { 0%,100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } }
.sv-arrow { fill: none; stroke: var(--copper-flare); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; animation: liveFlowDash 1.2s linear infinite; }
.sv-agent { fill: var(--verdan-green); animation: liveNodeBeep 2.6s ease-in-out infinite; }
.sv-link { stroke: rgba(181,80,46,0.45); stroke-width: 1.6; }
.sv-task { fill: rgba(181,80,46,0.25); stroke: var(--forge-ember); stroke-width: 1.2; }
.sv-pulse { fill: #F6B36A; filter: drop-shadow(0 0 5px rgba(246,179,106,0.9)); }
.sv-trend { fill: none; stroke: var(--forge-ember); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: svDraw 3s ease-in-out infinite; }
@keyframes svDraw { 0% { stroke-dashoffset: 600; } 55%,100% { stroke-dashoffset: 0; } }
.sv-guard { fill: none; stroke: var(--verdan-green); stroke-width: 2; opacity: 0.5; animation: liveRingExpand 3.4s ease-out infinite; transform-origin: 100px 60px; }
.sv-eye { fill: var(--forge-ember); }
.sv-scan { stroke: var(--copper-flare); stroke-width: 2; animation: svScan 2.4s ease-in-out infinite; }
@keyframes svScan { 0%,100% { opacity: 0.2; transform: translateY(-14px); } 50% { opacity: 1; transform: translateY(14px); } }

.engage-outcome {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(31,77,58,0.06), rgba(181,80,46,0.08));
  border: 1px solid rgba(181,80,46,0.18);
}
.outcome-title { text-align: center; font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom: var(--space-4); color: var(--signal); }
.outcome-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 860px) { .outcome-row { grid-template-columns: 1fr; } }
.outcome-chip { display: flex; gap: 0.9rem; align-items: flex-start; padding: var(--space-3); background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--parchment-line); }
.oc-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(181,80,46,0.12); color: var(--forge-ember); display: flex; align-items: center; justify-content: center; }
.oc-ico svg { width: 19px; height: 19px; }
.outcome-chip p { font-size: 0.9rem; color: #4A4A44; margin: 0; }
.outcome-chip strong { color: var(--verdan-green-deep); }

/* ============================================================
   SLIDE 6 — CREDIBILITY: experience / trades reel
   ============================================================ */
.xp-reel { display: flex; flex-direction: column; gap: var(--space-3); }
.xp-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(244,239,228,0.12); overflow: hidden; }
.xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--copper-flare), var(--forge-ember)); animation: xpFill 3.4s ease-in-out infinite; }
@keyframes xpFill { 0%,100% { width: 18%; } 50% { width: 92%; } }
.xp-tag { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,239,228,0.7); }
.xp-figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
@media (max-width: 720px) { .xp-figures { grid-template-columns: repeat(2, 1fr); } }
.xp-fig {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.4rem; border-radius: 10px;
  background: rgba(244,239,228,0.05); border: 1px solid rgba(201,123,74,0.18);
  color: var(--copper-flare); text-align: center;
  opacity: 0; transform: translateY(10px);
  animation: xpFig 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
.xp-fig svg { width: 30px; height: 30px; }
.xp-fig span { font-size: 0.64rem; line-height: 1.2; color: rgba(244,239,228,0.78); }
@keyframes xpFig { 0%,12% { opacity: 0; transform: translateY(10px); } 22%,80% { opacity: 1; transform: translateY(0); } 92%,100% { opacity: 0.25; transform: translateY(0); } }

/* ============================================================
   SLIDE 7 — INDUSTRIES: structured node/connection graph
   ============================================================ */
.ind-graph { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.7; }
.ind-graph svg { width: 100%; height: 100%; }
.ing-line { stroke: rgba(181,80,46,0.30); stroke-width: 1.2; }
.ing-node { fill: var(--forge-ember); }
.ing-pulse { fill: #F6B36A; filter: drop-shadow(0 0 6px rgba(246,179,106,0.9)); }
.ind-grid { margin-top: var(--space-4); }
.industry-card ul { margin-top: var(--space-2); padding-left: 0; list-style: none; }
.industry-card li { font-size: 0.9rem; color: #4A4A44; padding-left: 1.1em; position: relative; margin-bottom: 0.45em; }
.industry-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--forge-ember); border-radius: 1px; transform: rotate(45deg); }
@media (max-width: 1100px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ind-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SLIDE 9 — CTA: call → visit → diagnose → result journey
   ============================================================ */
.cta-copy { max-width: 620px; }
.cta-journey { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); flex-wrap: wrap; }
.journey-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 92px; }
.j-dot {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(244,239,228,0.08); border: 1px solid rgba(201,123,74,0.4);
  color: var(--copper-flare); display: flex; align-items: center; justify-content: center;
  animation: liveNodeBeep 2.8s ease-in-out infinite;
}
.j-dot svg { width: 22px; height: 22px; }
.journey-step:nth-child(1) .j-dot { animation-delay: 0s; }
.journey-step:nth-child(3) .j-dot { animation-delay: 0.7s; }
.journey-step:nth-child(5) .j-dot { animation-delay: 1.4s; }
.journey-step:nth-child(7) .j-dot { animation-delay: 2.1s; }
.j-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: rgba(244,239,228,0.82); text-align: center; line-height: 1.2; }
.j-arrow { flex: 1 1 14px; height: 2px; min-width: 14px; position: relative; background: linear-gradient(90deg, rgba(201,123,74,0.1), rgba(201,123,74,0.6)); border-radius: 2px; overflow: hidden; }
.j-arrow::after { content: ''; position: absolute; left: -30%; top: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, #F6B36A, transparent); animation: liveFlowDash 2s linear infinite; background-size: 200% 100%; }
@keyframes jArrow { to { background-position: 200% 0; } }

/* ============================================================
   INDUSTRIES CARDS ON DARK — high-contrast, readable
   ============================================================ */
.section-dark .industry-card {
  background: rgba(20,32,26,0.62) !important;
  border-color: rgba(201,123,74,0.45) !important;
}
.section-dark .industry-card li {
  color: rgba(244,239,228,0.85) !important;
  font-size: 0.95rem;
  margin-bottom: 0.5em;
}
.section-dark .industry-card li::before {
  background: var(--forge-ember) !important;
  box-shadow: 0 0 6px rgba(181,80,46,0.6);
}
.section-dark .industry-card .eyebrow {
  color: var(--copper-flare) !important;
}
.section-dark .industry-card .card-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(181,80,46,0.28), rgba(201,123,74,0.10));
  border-color: rgba(201,123,74,0.6) !important;
  color: var(--copper-flare) !important;
}
.section-dark .industry-card .card-icon svg { width: 32px; height: 32px; }

/* ============================================================
   VFORGE CAPABILITY WHEEL (Solutions hero)
   ============================================================ */
.capability-section { text-align: center; }
.capability-section .section-head { text-align: center; max-width: 780px; margin: 0 auto var(--space-5); }
.capability-section .eyebrow { color: var(--copper-flare); }
.capability-section .eyebrow::before { background: var(--copper-flare); }
.capability-section h2 { color: var(--signal); }
.cw-wrap { max-width: 720px; margin: 0 auto; }
.capability-wheel { width: 100%; height: auto; display: block; overflow: visible; }
.cw-link { stroke: rgba(201,123,74,0.55); stroke-width: 2; fill: none; stroke-dasharray: 5 7; animation: liveFlowDash 1.8s linear infinite; }
.cw-center { fill: url(#cwCenter); }
.cw-radar { fill: none; stroke: rgba(246,179,106,0.6); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cwRadar 4s ease-out infinite; }
.cw-radar.r2 { animation-delay: 1.3s; }
.cw-radar.r3 { animation-delay: 2.6s; }
.cw-inner-ring { fill: none; stroke: rgba(244,239,228,0.5); stroke-width: 1.5; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: cwSpin 22s linear infinite; }
.cw-vmark { fill: var(--signal); font-family: var(--font-display, Poppins), sans-serif; font-weight: 700; font-size: 54px; text-anchor: middle; }
.cw-node { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease); }
.cw-node:hover { transform: scale(1.12); }
.cw-node .cw-disc { fill: url(#cwNode); stroke: rgba(201,123,74,0.6); stroke-width: 2; transition: stroke 0.3s; }
.cw-node:hover .cw-disc { stroke: var(--signal); }
.cw-node .cw-icon { stroke: var(--signal); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cw-beacon { fill: none; stroke: var(--forge-ember); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cwBeacon 3s ease-out infinite; }
.cw-scan { stroke: rgba(246,179,106,0.9); stroke-width: 2; transform-box: fill-box; animation: cwScan 2.4s ease-in-out infinite; }
.cw-spin { transform-box: fill-box; transform-origin: center; animation: cwSpin 9s linear infinite; }
.cw-label { fill: var(--signal); font-family: var(--font-display, Poppins), sans-serif; font-weight: 600; font-size: 16px; text-anchor: middle; }
.cw-sub { fill: rgba(244,239,228,0.6); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-anchor: middle; }
.capability-section .cw-hint { color: rgba(244,239,228,0.7); font-size: 0.92rem; margin-top: var(--space-3); }
@keyframes cwRadar { 0% { transform: scale(0.5); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes cwBeacon { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cwSpin { to { transform: rotate(360deg); } }
@keyframes cwScan { 0% { transform: translateY(-26px); } 50% { transform: translateY(26px); } 100% { transform: translateY(-26px); } }

/* ============================================================
   CORE SUITE — animated product icons inside orange nodes
   ============================================================ */
.flow-node-dot svg { overflow: visible; stroke: var(--signal); fill: none; }
.flow-node-dot .fn-spin   { transform-box: fill-box; transform-origin: center; animation: cwSpin 9s linear infinite; }
.flow-node-dot .fn-radar  { transform-box: fill-box; transform-origin: center; animation: fnRadar 3s ease-in-out infinite; }
.flow-node-dot .fn-scan   { transform-box: fill-box; animation: cwScan 2.2s ease-in-out infinite; }
.flow-node-dot .fn-loop   { transform-box: fill-box; transform-origin: center; animation: cwSpin 6s linear infinite; }
.flow-node-dot .fn-needle, .cw-node .fn-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: fnNeedle 2.4s ease-in-out infinite; }
.flow-node-dot .fn-draw   { stroke-dasharray: 26; stroke-dashoffset: 26; animation: fnDraw 2.6s ease-in-out infinite; }
@keyframes fnRadar  { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fnNeedle { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes fnDraw   { 0% { stroke-dashoffset: 26; opacity: 0; } 40% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

/* ============================================================
   CONFIDENCE CARDS (about.html "How we earn your confidence"
   + solutions.html "We prove it before we promise it")
   — number-free, high-contrast copper-stroked panels
   ============================================================ */
.confidence-card {
  position: relative;
  background: rgba(20,32,26,0.55);
  border: 1px solid rgba(201,123,74,0.30);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px -26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(244,239,228,0.05);
  backdrop-filter: blur(2px);
  padding: var(--space-4);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.confidence-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--copper-flare), var(--forge-ember));
  transform: scaleY(0.35);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.confidence-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,123,74,0.6);
  box-shadow: 0 26px 56px -26px rgba(0,0,0,0.7), inset 0 1px 0 rgba(244,239,228,0.08);
}
.confidence-card:hover::before { transform: scaleY(1); }
.confidence-card .card-icon {
  color: var(--copper-flare);
  margin-bottom: var(--space-3);
}
.confidence-card .card-icon svg { stroke: var(--copper-flare); width: 30px; height: 30px; }
.confidence-card h3 { color: var(--signal) !important; font-size: 1.18rem; margin-bottom: 0.55rem; }
.confidence-card p { color: rgba(244,239,228,0.78) !important; font-size: 0.95rem; line-height: 1.6; }

/* ============================================================
   PAGE HERO — live accent (animated underline + breathing glow)
   applies to every interior page hero for consistent illustration
   ============================================================ */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(181,80,46,0.20) 0%, transparent 62%);
  pointer-events: none;
  animation: heroGlow 9s ease-in-out infinite;
}
.page-hero .eyebrow { position: relative; z-index: 1; }
.page-hero h1 { position: relative; z-index: 1; }
.page-hero h1::after {
  content: "";
  display: block;
  width: 90px; height: 3px;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--copper-flare), var(--forge-ember), transparent);
  background-size: 220% 100%;
  animation: heroUnderline 3.2s ease-in-out infinite;
}
.page-hero .lede { position: relative; z-index: 1; }
@keyframes heroGlow { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes heroUnderline { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ============================================================
   ATTENTION TYPOGRAPHY — bold/enlarge the things that should
   pull the visitor's eye (section headings, card titles, key
   value words, CTAs, eyebrow labels). Applied selectively via
   the .attn utility + a slightly stronger global weight.
   ============================================================ */
h1, h2, h3, h4 { font-weight: 700; }            /* was 600 — headings read stronger */
h2 { letter-spacing: -0.02em; }
.section-head .lede { font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 66ch; }
.eyebrow { font-weight: 700; letter-spacing: 0.13em; }

/* .attn = emphasise a phrase/word inside any paragraph or heading */
.attn {
  font-weight: 800;
  color: var(--verdan-green-deep);
  background: linear-gradient(180deg, transparent 62%, rgba(201,123,74,0.28) 62%);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.section-dark .attn,
.on-dark .attn { color: var(--signal); background: linear-gradient(180deg, transparent 62%, rgba(246,179,106,0.30) 62%); }

/* HERO: dark background but NOT tagged .section-dark, so .attn must be forced
   high-contrast (bright copper + bold highlight) or the dark-green default
   vanishes against the dark hero. Fixes "forge intelligence" / "keep improving"
   readability. */
.hero .attn {
  color: #F6B36A;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 60%, rgba(246,179,106,0.34) 60%);
  text-shadow: 0 1px 18px rgba(246,179,106,0.28);
  padding: 0 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero h1 { color: var(--signal); }
.hero .lede { color: rgba(244,239,228,0.86); }

/* ---- Subtle icon pulse for illustrative card icons (About / Insights polish) ---- */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(246,179,106,0)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(246,179,106,0.45)); }
}
.card-icon svg,
.leader-monogram {
  transition: transform 0.4s var(--ease);
}
.confidence-card .card-icon svg,
.problem-card .card-icon svg,
.fact-card .card-icon svg { animation: iconPulse 4.2s ease-in-out infinite; }

/* Leadership monograms: gentle ember glow + slow pulse */
.leader-monogram {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 18px;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem;
  color: #F4EFE4;
  background: linear-gradient(150deg, var(--verdan-green) 0%, var(--verdan-green-deep) 100%);
  border: 1px solid rgba(201,123,74,0.5);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(244,239,228,0.06);
}
.leader-monogram.alt {
  background: linear-gradient(150deg, #C97B4A 0%, #B5502E 100%);
  border-color: rgba(244,239,228,0.35);
}
.leader-monogram::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(246,179,106,0.0);
  animation: monoPing 3.6s ease-out infinite;
}
@keyframes monoPing {
  0%   { box-shadow: 0 0 0 0 rgba(246,179,106,0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(246,179,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(246,179,106,0); }
}

/* Insights lower list: add icon chips + hover lift */
.insight-list-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--parchment-line); }
.insight-list-row:last-child { border-bottom: 1px solid var(--parchment-line); }
.insight-list-ico {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(201,123,74,0.14); color: var(--copper-flare);
}
.insight-list-ico svg { width: 20px; height: 20px; }
.insight-list-row h4 { font-size: 1.02rem; margin-bottom: 0.15rem; }
.insight-list-row p { color: var(--text-2); font-size: 0.9rem; margin: 0; }
.insight-list-row .meta { color: var(--copper-flare); font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; }

/* CTA buttons: bolder label + slightly larger for visibility */
.btn { font-weight: 700; font-size: 1.0rem; }
.btn-primary { letter-spacing: 0.01em; }

/* ============================================================
   CONFIDENCE SECTIONS — intentionally IDENTICAL treatment.
   "How we earn your confidence" (about.html, 6 cards) and
   "We prove it before we promise it" (solutions.html, 3 cards)
   share the same .confidence-card skin so the two read as one
   deliberate system, not two different designs.
   ============================================================ */
.confidence-card { border-radius: var(--radius-md); }
.confidence-card .card-icon { display: flex; align-items: center; justify-content: flex-start; }
.confidence-card h3 { font-size: 1.22rem; line-height: 1.25; }
/* keep the 3-card solutions row visually even with the 6-card about row */
.solutions-prove .confidence-card { min-height: 168px; }

/* ============================================================
   INSIGHTS CARDS — real topic images in the .insight-card-top
   area (replaces the flat gradient placeholder).
   ============================================================ */
.insight-card-top {
  height: 168px;
  background: linear-gradient(135deg, var(--verdan-green) 0%, var(--deep-moss) 60%, var(--forge-ember) 140%);
  position: relative;
  overflow: hidden;
}
.insight-card-top img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.insight-card:hover .insight-card-top img { transform: scale(1.05); }
/* subtle dark gradient so white category label stays legible over any photo */
.insight-card-top::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,26,0.10) 0%, rgba(20,32,26,0.42) 100%);
  pointer-events: none;
}
/* topic label + glyph overlay (always legible; sits above photo via z-index) */
.insight-photo { position: absolute; inset: 0; z-index: 0; }
.insight-topic {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 0 1rem;
}
.insight-topic svg { width: 46px; height: 46px; color: var(--signal); opacity: 0.92;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }
.insight-topic .it-cat {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--signal);
  background: rgba(20,32,26,0.55); border: 1px solid rgba(244,239,228,0.25);
  padding: 0.3em 0.8em; border-radius: 999px;
}
/* when a real photo loads, dim the glyph slightly so the photo leads */
.insight-card-top.has-photo .insight-topic svg { opacity: 0.5; }
.insight-card-top.has-photo .insight-topic { justify-content: flex-end; padding-bottom: 0.9rem; }


/* ==========================================================================
   EVIDENCE SHOWCASE — animated "Proof in Production" exhibits
   Reuses brand tokens + existing live-animation primitives (flow-line, node dots).
   All decorative; respects prefers-reduced-motion (handled globally).
   ========================================================================== */
.ev-hero { position: relative; overflow: hidden; }
.ev-hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items:center; padding: var(--space-6) 0; }
.ev-hero-copy { max-width: 40rem; }
.ev-hero-viz { display:flex; justify-content:center; }
.ev-viz-panel { width:100%; max-width:420px; background: rgba(20,32,26,0.6); border:1px solid rgba(201,123,74,0.35); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-card); }
.ev-viz-head { font-family: var(--font-mono); font-size:0.72rem; color: rgba(244,239,228,0.6); display:flex; align-items:center; gap:0.5em; margin-bottom: var(--space-3); }
.ev-viz-dot { width:8px; height:8px; border-radius:50%; background: var(--forge-ember-bright); box-shadow:0 0 0 0 rgba(210,101,60,0.55); animation: evPing 2.4s ease-out infinite; }
.ev-viz-flow { display:flex; align-items:center; gap:0.4rem; margin-bottom: var(--space-3); }
.ev-viz-node { flex:0 0 auto; font-size:0.66rem; font-family:var(--font-mono); padding:0.5em 0.7em; border-radius:8px; color: var(--signal); background: rgba(244,239,228,0.06); border:1px solid rgba(244,239,228,0.12); white-space:nowrap; }
.ev-viz-node.src { border-color: rgba(201,123,74,0.5); }
.ev-viz-node.proc { border-color: rgba(181,80,46,0.6); background: rgba(181,80,46,0.15); }
.ev-viz-node.out { border-color: rgba(201,123,74,0.5); color: var(--copper-flare); }
.ev-viz-track { flex:1 1 auto; height:2px; background: linear-gradient(90deg, rgba(201,123,74,0.15), rgba(201,123,74,0.5)); position:relative; border-radius:2px; overflow:hidden; }
.ev-viz-packet { position:absolute; top:50%; left:0; width:10px; height:10px; margin-top:-5px; border-radius:50%; background: var(--forge-ember-bright); box-shadow:0 0 8px 2px rgba(210,101,60,0.6); animation: evPacket 2.6s linear infinite; }
.ev-viz-packet.d2 { animation-delay:1.3s; }
@keyframes evPacket { 0%{ left:-12px; opacity:0; } 10%{opacity:1;} 90%{opacity:1;} 100%{ left:100%; opacity:0; } }
.ev-viz-rows { display:flex; flex-direction:column; gap:0.55rem; margin-bottom: var(--space-3); }
.ev-viz-row { display:flex; justify-content:space-between; align-items:baseline; font-size:0.8rem; }
.ev-viz-row span { color: rgba(244,239,228,0.6); }
.ev-viz-row b { font-family:var(--font-mono); color: var(--copper-flare); font-weight:700; }
.ev-viz-bar { height:6px; background: rgba(244,239,228,0.08); border-radius:3px; overflow:hidden; }
.ev-viz-bar i { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--copper-flare), var(--forge-ember-bright)); border-radius:3px; animation: evBar 3.2s ease-out infinite alternate; }
@keyframes evBar { 0%{ width:32%; } 100%{ width:88%; } }
@media (max-width: 900px){ .ev-hero-grid{ grid-template-columns:1fr; } .ev-hero-viz{ margin-top: var(--space-4); } }
.ev-live-badge { display:inline-flex; align-items:center; gap:0.5em; font-family: var(--font-mono); font-size:0.82rem; font-weight:700; color: #F6E7D6; background: var(--ink); border:1px solid rgba(201,123,74,0.7); border-radius:999px; padding:0.45em 1.1em; letter-spacing:0.02em; }
.ev-live-dot { width:8px; height:8px; border-radius:50%; background: var(--forge-ember-bright); box-shadow:0 0 0 0 rgba(210,101,60,0.6); animation: evPing 2.4s ease-out infinite; }
@keyframes evPing { 0%{ box-shadow:0 0 0 0 rgba(210,101,60,0.55);} 70%{ box-shadow:0 0 0 10px rgba(210,101,60,0);} 100%{ box-shadow:0 0 0 0 rgba(210,101,60,0);} }

.ev-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 900px){ .ev-grid{ grid-template-columns:1fr; } }
.ev-card { background: var(--ink-soft); border:1px solid rgba(244,239,228,0.12); border-radius: var(--radius-md); padding: var(--space-3); display:flex; flex-direction:column; gap: var(--space-2); position:relative; overflow:hidden; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.ev-card:hover { border-color: rgba(201,123,74,0.5); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ev-card .ev-top { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); }
.ev-card .ev-industry { font-family: var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color: rgba(244,239,228,0.55); }
.ev-card h3 { color: var(--signal); font-size:1.12rem; line-height:1.3; font-family: var(--font-display); }

/* count-up metric */
.ev-metric { display:flex; align-items:baseline; gap:0.4em; }
.ev-metric .ev-num { font-family: var(--font-display); font-weight:700; color: var(--copper-flare); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height:1; font-variant-numeric: tabular-nums; }
.ev-metric .ev-suffix { font-family: var(--font-display); font-weight:700; color: var(--copper-flare); font-size: clamp(1.4rem,2.6vw,2rem); }
.ev-metric .ev-cap { color: rgba(244,239,228,0.6); font-size:0.85rem; }

/* pipeline schematic */
.ev-pipe { display:flex; align-items:center; gap:0.4em; margin: var(--space-2) 0; }
.ev-node { width:38px; height:38px; border-radius:10px; border:1px solid rgba(244,239,228,0.18); display:grid; place-items:center; color: var(--signal); background: rgba(244,239,228,0.03); flex:0 0 auto; }
.ev-node svg { width:20px; height:20px; }
.ev-node.is-source { border-color: rgba(201,123,74,0.5); color: var(--copper-flare); }
.ev-node.is-out { border-color: rgba(181,80,46,0.6); color: var(--forge-ember-bright); box-shadow: 0 0 18px -4px rgba(210,101,60,0.5); }
.ev-seg { flex:1; height:2px; background: repeating-linear-gradient(90deg, rgba(181,80,46,0.5) 0 6px, transparent 6px 12px); background-size:12px 2px; position:relative; border-radius:2px; animation: evDash 1.1s linear infinite; }
@keyframes evDash { to { background-position: 12px 0; } }
.ev-seg::after { content:''; position:absolute; top:-3px; width:14px; height:8px; border-radius:4px; background: linear-gradient(90deg, rgba(246,179,106,0), #F6B36A 60%, #fff); box-shadow:0 0 10px 2px rgba(246,179,106,0.8); animation: evTravel 3.6s ease-in-out infinite; }
@keyframes evTravel { 0%{ left:0; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ left:calc(100% - 14px); opacity:0;} }

/* before/after bar */
.ev-ba { margin-top: var(--space-1); }
.ev-ba-row { display:flex; align-items:center; gap:0.6em; margin:0.35em 0; font-size:0.82rem; }
.ev-ba-row .ev-ba-label { width:84px; color: rgba(244,239,228,0.6); flex:0 0 auto; font-family: var(--font-mono); font-size:0.72rem; }
.ev-ba-track { flex:1; height:8px; border-radius:6px; background: rgba(244,239,228,0.08); overflow:hidden; }
.ev-ba-fill { height:100%; width:0; border-radius:6px; background: linear-gradient(90deg, var(--verdan-green), var(--copper-flare)); transition: width 1.2s var(--ease); }
.ev-ba-fill.is-out { background: linear-gradient(90deg, var(--forge-ember), var(--forge-ember-bright)); }
.ev-ba-val { width:74px; text-align:right; color: var(--signal); font-family: var(--font-mono); font-size:0.78rem; flex:0 0 auto; }

.ev-foot { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); margin-top:auto; padding-top: var(--space-2); border-top:1px solid rgba(244,239,228,0.1); }
.ev-link { color: var(--copper-flare); font-weight:700; font-size:0.9rem; }
.ev-link::after { content:' →'; transition: transform .25s var(--ease); display:inline-block; }
.ev-card:hover .ev-link::after { transform: translateX(4px); }

/* faux live dashboard mock */
.ev-dash { background: rgba(20,32,26,0.5); border:1px solid rgba(244,239,228,0.1); border-radius: var(--radius-sm); padding: var(--space-2); margin-top: var(--space-1); }
.ev-dash-row { display:flex; align-items:center; gap:0.6em; margin:0.4em 0; font-size:0.78rem; color: rgba(244,239,228,0.7); }
.ev-dash-bar { flex:1; height:6px; border-radius:4px; background: rgba(244,239,228,0.08); overflow:hidden; }
.ev-dash-bar i { display:block; height:100%; width: var(--w,40%); background: linear-gradient(90deg, var(--deep-moss), var(--copper-flare)); border-radius:4px; animation: evBar 3s ease-in-out infinite alternate; }
@keyframes evBar { from { opacity:0.6; } to { opacity:1; } }

/* client chip reuse */
.ev-client { display:inline-flex; align-items:center; gap:0.5em; background:#fff; border:1px solid var(--parchment-line); border-radius:10px; padding:0.45em 0.75em; height:48px; }
.ev-client img { max-height:30px; max-width:110px; object-fit:contain; }
.ev-client .ev-client-name { font-family: var(--font-mono); font-size:0.74rem; color: var(--ink); font-weight:600; }
.ev-client.anon { background: rgba(244,239,228,0.06); border-color: rgba(244,239,228,0.15); color: rgba(244,239,228,0.55); font-family: var(--font-mono); font-size:0.74rem; }

/* ===== About page: structured visitor-journey sequencing ===== */
.about-shell { display:block; max-width: var(--container); margin: 0 auto; }
.about-toc { position: sticky; top: 96px; align-self: start; display:flex; flex-direction:column; gap:0.15rem; padding: var(--space-3) 0; border-left:2px solid rgba(244,239,228,0.12); }
.about-toc a { font-family: var(--font-mono); font-size:0.82rem; color: rgba(244,239,228,0.55); padding:0.5rem 0 0.5rem 1rem; margin-left:-2px; border-left:2px solid transparent; transition: color .2s, border-color .2s; text-decoration:none; }
.about-toc a:hover, .about-toc a.active { color: var(--copper-flare); border-left-color: var(--copper-flare); }
.about-toc .toc-num { display:inline-block; width:1.7rem; color: rgba(201,123,74,0.85); }
.about-main { min-width:0; }
.section-num { display:flex; align-items:center; gap:0.7rem; margin-bottom: var(--space-3); }
.section-num .n { font-family: var(--font-display); font-weight:700; font-size:1.5rem; color: var(--copper-flare); line-height:1; }
.section-num .bar { flex:1; height:1px; background: linear-gradient(90deg, rgba(201,123,74,0.5), transparent); }
.section-num .lbl { font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--verdan-green-deep); opacity:0.75; }
.section-dark .section-num .lbl { color: rgba(244,239,228,0.6); opacity:1; }
.problem-lead { font-size: clamp(1.1rem,2vw,1.45rem); color: var(--verdan-green-deep); line-height:1.55; font-weight:600; max-width: 62ch; }
.problem-lead .hl { color: var(--forge-ember); }
.outcome-strip { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); margin-top: var(--space-4); }
.outcome-strip .os { background: rgba(20,32,26,0.55); border:1px solid rgba(201,123,74,0.3); border-radius: var(--radius-md); padding: var(--space-3); }
.outcome-strip .os b { display:block; font-family:var(--font-mono); font-size:1.6rem; color: var(--copper-flare); }
.outcome-strip .os span { font-size:0.85rem; color: rgba(244,239,228,0.7); }
.evidence-cta { display:inline-flex; align-items:center; gap:0.5rem; margin-top: var(--space-3); font-family:var(--font-mono); font-size:0.9rem; color: var(--copper-flare); text-decoration:none; }
.evidence-cta:hover { color: var(--signal); }
@media (max-width: 980px){ .about-shell{ grid-template-columns:1fr; } .about-toc{ display:none; } .outcome-strip{ grid-template-columns:1fr; } }

/* ===== About page: uniform Verdan Forge dark theme ===== */
.about-dark .about-main > section,
.about-dark .about-main > section.section-light,
.about-dark .about-main > section.section-parchment {
  background: var(--ink) !important;
  color: var(--signal);
}
.about-dark .section-num .n { color: var(--copper-flare); }
.about-dark .section-num .bar { background: linear-gradient(90deg, rgba(201,123,74,0.5), transparent); }
.about-dark .section-num .lbl { color: rgba(244,239,228,0.6) !important; opacity: 1; }
.about-dark h2 { color: var(--signal); }
.about-dark h3 { color: var(--signal); }
.about-dark p { color: rgba(244,239,228,0.82); }
.about-dark .lede { color: rgba(244,239,228,0.78) !important; }
.about-dark .eyebrow { color: var(--copper-flare); }
.about-dark .problem-lead { color: var(--signal); }
.about-dark .problem-lead .hl { color: var(--forge-ember-bright); }
.about-dark .evidence-cta { color: var(--copper-flare); }
.about-dark .evidence-cta:hover { color: var(--signal); }
/* cards already dark-friendly; ensure readable text on uniform ink */
.about-dark .problem-card h3, .about-dark .confidence-card h3, .about-dark .naming-card h3 { color: var(--signal); }
.about-dark .problem-card p, .about-dark .confidence-card p, .about-dark .naming-card p { color: rgba(244,239,228,0.78); }
.about-dark .num { color: rgba(201,123,74,0.85); }
.about-dark .leader-role { color: var(--copper-flare); }
.about-dark .leader-bio { color: rgba(244,239,228,0.78); }
.about-dark .leader-alias { color: rgba(244,239,228,0.6); }

/* cards on the dark About page must be dark surfaces too */
.about-dark .problem-card { background: var(--ink-soft); border-color: rgba(244,239,228,0.14); }
.about-dark .leader-card { background: var(--ink-soft); border-color: rgba(244,239,228,0.14); }
.about-dark .confidence-card { background: var(--ink-soft); border-color: rgba(244,239,228,0.14); }
.about-dark .naming-card { background: var(--ink-soft); border-color: rgba(244,239,228,0.14); }
.about-dark .outcome-strip .os { background: var(--ink-soft); }

/* ===== About page: icon-driven, animated, absorbing UX ===== */
/* scroll progress bar */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: transparent; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--copper-flare), var(--forge-ember-bright)); box-shadow: 0 0 8px 1px rgba(210,101,60,0.6); transition: width .08s linear; }

/* per-section icon badge */
.sec-badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: var(--space-3);
  color: var(--copper-flare); background: rgba(201,123,74,0.12); border: 1px solid rgba(201,123,74,0.4);
  box-shadow: 0 0 0 0 rgba(210,101,60,0.0); animation: secBadgePulse 3.4s ease-out infinite; }
.sec-badge svg { width: 28px; height: 28px; }
@keyframes secBadgePulse { 0%{ box-shadow:0 0 0 0 rgba(210,101,60,0.35);} 70%{ box-shadow:0 0 0 14px rgba(210,101,60,0);} 100%{ box-shadow:0 0 0 0 rgba(210,101,60,0);} }
/* distinct accent per section */
.sec-s2 { color: var(--signal); border-color: rgba(244,239,228,0.3); background: rgba(244,239,228,0.06); }
.sec-s3 { color: #7FE0A8; border-color: rgba(127,224,168,0.45); background: rgba(127,224,168,0.10); }
.sec-s4 { color: var(--forge-ember-bright); border-color: rgba(210,101,60,0.5); background: rgba(210,101,60,0.12); }
.sec-s5 { color: var(--copper-flare); }
.sec-s6 { color: var(--signal); border-color: rgba(244,239,228,0.3); background: rgba(244,239,228,0.06); }
.sec-s7 { color: #E8C97A; border-color: rgba(232,201,122,0.45); background: rgba(232,201,122,0.10); }
.sec-s8 { color: #8FD6A6; border-color: rgba(143,214,166,0.45); background: rgba(143,214,166,0.10); }

/* animated underline under each section h2 */
.about-main > section > h2 { position: relative; display: inline-block; }
.about-main > section > h2::after { content:""; position:absolute; left:0; bottom:-0.35rem; height:3px; width:0; border-radius:3px;
  background: linear-gradient(90deg, var(--copper-flare), var(--forge-ember-bright)); transition: width .7s var(--ease); }
.about-main > section > h2.in-view::after { width: 100%; }

/* staggered card entrance — cards stay visible; transform-only so nothing can vanish */
.about-main .card-grid-3 .problem-card, .about-main .card-grid-3 .confidence-card,
.about-main .card-grid-4 .problem-card, .about-main .leader-grid .leader-card { opacity: 1; transform: none; transition: transform .55s var(--ease), box-shadow .35s var(--ease); }
.about-main .card-grid-3.reveal .problem-card, .about-main .card-grid-3.reveal .confidence-card,
.about-main .card-grid-4.reveal .problem-card, .about-main .leader-grid.reveal .leader-card { transform: translateY(18px); }
.about-main .card-grid-3.reveal.is-visible .problem-card, .about-main .card-grid-3.reveal.is-visible .confidence-card,
.about-main .card-grid-4.reveal.is-visible .problem-card, .about-main .leader-grid.reveal.is-visible .leader-card { transform: none; }
.about-main .card-grid-3.reveal.is-visible .problem-card:nth-child(2), .about-main .card-grid-3.reveal.is-visible .confidence-card:nth-child(2),
.about-main .card-grid-4.reveal.is-visible .problem-card:nth-child(2), .about-main .leader-grid.reveal.is-visible .leader-card:nth-child(2) { transition-delay: .1s; }
.about-main .card-grid-3.reveal.is-visible .problem-card:nth-child(3), .about-main .card-grid-3.reveal.is-visible .confidence-card:nth-child(3),
.about-main .card-grid-4.reveal.is-visible .problem-card:nth-child(3), .about-main .leader-grid.reveal.is-visible .leader-card:nth-child(3) { transition-delay: .2s; }
.about-main .card-grid-3.reveal.is-visible .confidence-card:nth-child(4), .about-main .card-grid-4.reveal.is-visible .problem-card:nth-child(4) { transition-delay: .3s; }
.about-main .card-grid-3.reveal.is-visible .confidence-card:nth-child(5) { transition-delay: .4s; }
.about-main .card-grid-3.reveal.is-visible .confidence-card:nth-child(6) { transition-delay: .5s; }

/* 4-stage connecting flow line with travelling pulse */
.about-dark .card-grid-4 { position: relative; }
.about-dark .card-grid-4::before { content:""; position:absolute; top: 38px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, rgba(201,123,74,0.15), rgba(201,123,74,0.55), rgba(201,123,74,0.15)); border-radius: 2px; }
.about-dark .card-grid-4::after { content:""; position:absolute; top: 33px; left: 12%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--forge-ember-bright); box-shadow: 0 0 10px 2px rgba(210,101,60,0.6); animation: evTravel 3s linear infinite; }
@keyframes evTravel { 0%{ left: 12%; opacity: 0; } 10%{ opacity: 1; } 90%{ opacity: 1; } 100%{ left: 88%; opacity: 0; } }

/* outcome strip number pop */
.outcome-strip .os b { transition: transform .5s var(--ease); }
.outcome-strip.reveal .os b { animation: osPop .6s var(--ease) both; }
@keyframes osPop { 0%{ transform: scale(.7); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }

/* leader monogram subtle float */
.leader-monogram, .leader-monogram.alt { animation: dnFloat 5s ease-in-out infinite; }
@keyframes dnFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }

@media (prefers-reduced-motion: reduce){
  .sec-badge, .leader-monogram, .about-dark .card-grid-4::after, .read-progress i { animation: none !important; }
  .about-main > section > h2::after { width: 100% !important; transition: none; }
  .about-main .card-grid-3 .problem-card, .about-main .card-grid-3 .confidence-card,
  .about-main .card-grid-4 .problem-card, .about-main .leader-grid .leader-card { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 860px){
  .about-dark .card-grid-4::before, .about-dark .card-grid-4::after { display: none; }
  .about-shell { max-width: 100%; }
}

/* team page links */
.leader-link { display:inline-block; margin-top:0.6rem; font-size:0.82rem; color: var(--copper-flare); text-decoration:none; opacity:0.9; }
.leader-link:hover { opacity:1; text-decoration:underline; }

/* trusted-by logo band */
.trusted-band { padding: var(--space-3) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(31,77,58,0.04), rgba(31,77,58,0.08)); }
.trusted-band .container { display:flex; align-items:center; gap: var(--space-4); flex-wrap: wrap; }
.trusted-band .t-label { font-family: var(--font-mono); font-size:0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(244,239,228,0.55); }
.trusted-band .t-logos { display:flex; align-items:center; gap: var(--space-4); flex-wrap: wrap; }
.trusted-band .t-logo { height: 28px; width: auto; opacity: 0.75; filter: grayscale(12%); }
.trusted-band .t-logo.anon { height: 22px; opacity: 0.45; }

/* cookie notice */
.cookie-notice { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: rgba(20,32,26,0.96); color: var(--signal); border-top: 1px solid var(--hairline); padding: var(--space-3) 0; backdrop-filter: blur(6px); }
.cookie-notice .container { display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); flex-wrap: wrap; }
.cookie-notice p { font-size:0.92rem; max-width: 70ch; margin: 0; }
.cookie-notice .btn { padding: 0.5em 1em; font-size: 0.85rem; }
.cookie-notice.is-hidden { display: none; }

/* newsletter capture */
.newsletter-capture { display:flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.newsletter-capture input[type="email"] { flex: 1 1 220px; padding: 0.7em 0.9em; border-radius: 8px; border: 1px solid var(--hairline); background: rgba(244,239,228,0.08); color: var(--signal); }
.newsletter-capture .btn { padding: 0.65em 1.1em; border-radius: 8px; }

/* ============================================================
   ARTICLE COVERS — editorial hero image atop insight field notes
   (2026-09-02 consistency polish; content untouched)
   ============================================================ */
.article-cover {
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(201,123,74,0.28);
  box-shadow: var(--shadow-card);
  position: relative;
  background: var(--verdan-green-deep);
}
.article-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.article-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244,239,228,0.07);
  pointer-events: none;
}
@media (max-width: 640px) {
  .article-cover img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   HEADER COMPACTION — desktop 981px+ (2026-09-02)
   Fixes CTA pushed off the right edge once nav grew to 8 tabs.
   Progressive tiers; dropped tabs stay in footer + mobile menu.
   ============================================================ */
@media (max-width: 2340px) {
  .nav-inner { gap: 18px; }
  .nav-links { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 14px; }
  .nav-links a { white-space: nowrap; }
  .nav-links a[href="team.html"],
  .nav-links a[href="engagement.html"] { display: none; }
}
@media (max-width: 1680px) {
  .brand-slogan { display: none; }
  .nav-links { gap: clamp(12px, 2vw, 20px); }
  .nav-links a { font-size: 0.95rem; }
}
@media (max-width: 1120px) {
  .nav-links a[href="case-studies.html"] { display: none; }
  .nav-inner { gap: 12px; }
}
/* 981-1240px: tab text cannot fit beside brand + CTA -> hamburger band.
   Full nav + CTA remain available inside the mobile menu. */
@media (min-width: 981px) and (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex !important; }
  .mobile-menu { display: block !important; }
}