/* ===== HERO — continuous escalating story: GAP -> BRIDGE -> RESULT ===== */
.heroshow{ --ink:#0F1A24;--g:#7CB342;--gd:#639922;--gl:#B4E38A;--sf:#D68A2E;--sfl:#EDC078;--ro:#D4537E;--rol:#EC7BA0;--bl:#8FD0F0;
  position:relative; width:100%; height:100%; min-height:400px; border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 95% at 50% 8%,#41334A,#251E2C 50%,#140E1A);
  box-shadow:0 30px 80px rgba(15,10,20,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  font-family:'Newsreader',Georgia,serif; perspective:1300px; perspective-origin:50% 38%; }

/* PERSISTENT SET — same two sides live across all beats (continuity) */
.hs-floor{ position:absolute; inset:-40% -15% -14% -15%; z-index:1; background-image:linear-gradient(rgba(124,179,66,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(124,179,66,0.10) 1px,transparent 1px); background-size:46px 46px; transform:rotateX(71deg) translateZ(-40px) scale(1.75); transform-origin:50% 66%; -webkit-mask-image:radial-gradient(120% 88% at 50% 34%,#000 26%,transparent 80%); mask-image:radial-gradient(120% 88% at 50% 34%,#000 26%,transparent 80%); opacity:0.45; animation:hs-floormove 18s linear infinite; }
@keyframes hs-floormove{ from{ background-position:0 0;} to{ background-position:0 46px;} }
.hs-stage{ position:absolute; inset:0; z-index:3; transform-style:preserve-3d; transform:rotateX(8deg); }

/* the two sides — persist, but evolve per beat */
.side{ position:absolute; top:50%; transform:translateY(-50%) translateZ(26px); display:flex; flex-direction:column; gap:22px; transition:left 1.2s cubic-bezier(.6,0,.2,1), right 1.2s cubic-bezier(.6,0,.2,1); }
.side-have{ left:11%; } .side-need{ right:11%; }
.figt{ position:relative; width:34px; animation:hs-bob 3.8s ease-in-out infinite; }
.figt .fh{ width:15px; height:15px; border-radius:50%; margin:0 auto; box-shadow:0 0 10px currentColor,inset 0 1px 2px rgba(255,255,255,0.55); }
.figt .fb{ width:24px; height:27px; margin:2px auto 0; border-radius:12px 12px 6px 6px; box-shadow:0 5px 14px rgba(0,0,0,0.45),inset 0 1px 2px rgba(255,255,255,0.3); position:relative; }
.figt .fb::after{ content:''; position:absolute; left:4px; right:4px; top:5px; height:1px; background:rgba(255,255,255,0.25); }
.figt.sf .fh{ background:radial-gradient(circle at 36% 30%,#F6D89C,#C77F1E); color:var(--sf); }
.figt.sf .fb{ background:linear-gradient(160deg,#E39A3A,#9A6015); }
.slot{ position:relative; width:34px; height:42px; }
.slot .sk{ position:absolute; inset:0; border-radius:9px; border:2px dashed var(--g); background:rgba(124,179,66,0.08); box-shadow:0 0 18px rgba(124,179,66,0.25); }
.slot .sk::before{ content:''; position:absolute; inset:9px; border-radius:50%; border:1.5px dashed rgba(124,179,66,0.5); animation:hs-spin 7s linear infinite; }
.figt:nth-child(2){ animation-delay:0.6s; } .figt:nth-child(3){ animation-delay:1.2s; }

/* the GAP — a charged divide down the middle (beat 1 tension) */
.hs-gap{ position:absolute; left:50%; top:16%; bottom:16%; width:2px; margin-left:-1px; z-index:3; transform:translateZ(30px); background:linear-gradient(rgba(212,83,126,0),rgba(212,83,126,0.6),rgba(212,83,126,0)); box-shadow:0 0 20px rgba(212,83,126,0.5); transition:opacity 0.9s ease; }
.hs-gap::before,.hs-gap::after{ content:''; position:absolute; left:-3px; width:8px; height:8px; }
.hs-gap-spark{ position:absolute; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--rol); box-shadow:0 0 12px var(--ro); z-index:3; transform:translateZ(30px); animation:gap-flicker 2.4s ease-in-out infinite; }
.gs1{ top:30%; } .gs2{ top:52%; animation-delay:0.8s; } .gs3{ top:70%; animation-delay:1.6s; }
@keyframes gap-flicker{ 0%,100%{ opacity:0.2; transform:translateZ(30px) scale(0.8);} 50%{ opacity:1; transform:translateZ(30px) scale(1.2);} }

/* the BRIDGE — light spans forming (beat 2 action) */
.hs-bridge{ position:absolute; left:20%; right:20%; top:50%; z-index:3; transform:translateY(-50%) translateZ(22px); }
.blink{ position:absolute; left:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--sf),var(--g)); box-shadow:0 0 16px rgba(124,179,66,0.5); transform-origin:left; transform:scaleX(0); transition:transform 1s cubic-bezier(.6,0,.2,1); }
.bl1{ top:-28px; width:100%; } .bl2{ top:0; width:100%; } .bl3{ top:28px; width:100%; }
.on-bridge .blink{ transform:scaleX(1); }
.on-bridge .bl2{ transition-delay:0.15s; } .on-bridge .bl3{ transition-delay:0.3s; }
.hs-match{ position:absolute; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#DFF6C4,#7CB342); box-shadow:0 0 16px var(--gl); z-index:3; transform:translateZ(26px); opacity:0; }
.on-bridge .hs-match{ animation:match-cross 3.2s ease-in-out infinite; }
.hm1{ top:calc(50% - 28px); } .hm2{ top:calc(50% + 28px); }
@keyframes match-cross{ 0%{ left:20%; opacity:0; transform:translateZ(26px) scale(0.6);} 12%{opacity:1; transform:translateZ(26px) scale(1);} 88%{opacity:1;} 100%{ left:80%; opacity:0; transform:translateZ(26px) scale(0.6);} }

/* central MATCH CORE — grows across beats */
.hs-core{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:4; transform:translate(-50%,-50%) translateZ(44px); border-radius:50%; background:radial-gradient(circle at 36% 30%,#DFF6C4,#5f9120); box-shadow:0 0 34px rgba(124,179,66,0.75),inset 0 2px 6px rgba(255,255,255,0.6); transition:width 1s ease, height 1s ease, margin 1s ease; }
.hs-core-ring{ position:absolute; left:50%; top:50%; border-radius:50%; z-index:4; transform:translate(-50%,-50%) translateZ(38px); opacity:0; transition:opacity 0.9s ease; }
.r1{ width:104px; height:104px; border:1.5px solid var(--g); border-top-color:transparent; border-bottom-color:transparent; box-shadow:0 0 20px rgba(124,179,66,0.4); animation:hs-spin 8s linear infinite; }
.r2{ width:138px; height:138px; border:1px solid var(--sf); border-left-color:transparent; border-right-color:transparent; animation:hs-spin 13s linear infinite reverse; }

/* TYPE — one headline that changes per beat, lower-left anchored */
.hs-copy{ position:absolute; left:50px; bottom:54px; z-index:5; max-width:60%; }
.hs-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--sfl); display:block; height:14px; }
.hs-head{ position:relative; margin-top:12px; height:112px; }
.hs-beat{ position:absolute; left:0; top:0; font-size:50px; line-height:1.02; font-weight:500; color:#F5F1EA; letter-spacing:-1px; opacity:0; transform:translateY(16px); transition:opacity 0.9s ease, transform 0.9s ease; }
.hs-beat.on{ opacity:1; transform:translateY(0); }
.hs-beat .grad{ background:linear-gradient(100deg,var(--gl),var(--sfl)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hs-beat small{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--slate,#9A93A0); font-weight:400; margin-top:10px; text-transform:uppercase; }

/* futuristic overlays */
.hs-glow{ position:absolute; left:50%; top:46%; width:60%; height:60%; z-index:2; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(124,179,66,0.16),transparent 60%); filter:blur(14px); animation:hs-breathe 6s ease-in-out infinite; }
@keyframes hs-breathe{ 0%,100%{ opacity:0.6; transform:translate(-50%,-50%) scale(0.95);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06);} }
.hs-scan{ position:absolute; inset:0; z-index:6; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(140,220,255,0.02) 0 1px,transparent 1px 3px); opacity:0.5; }
.hs-sweep{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.hs-sweep::after{ content:''; position:absolute; top:0; bottom:0; width:38%; left:-38%; background:linear-gradient(90deg,transparent,rgba(180,227,138,0.06),transparent); animation:hs-sweepmove 8s ease-in-out infinite; }
@keyframes hs-sweepmove{ 0%{ left:-38%;} 62%,100%{ left:120%;} }
.hs-vign{ position:absolute; inset:0; z-index:7; pointer-events:none; box-shadow:inset 0 0 100px 24px rgba(10,6,14,0.6); border-radius:20px; }
.hs-corner{ position:absolute; z-index:6; width:22px; height:22px; border:1.5px solid rgba(124,179,66,0.35); pointer-events:none; }
.hs-corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; } .hs-corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.hs-corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; } .hs-corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.hs-hud{ position:absolute; z-index:6; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(180,227,138,0.5); top:20px; right:44px; }
.hs-dots{ position:absolute; bottom:16px; right:44px; z-index:8; display:flex; gap:7px; }
.hs-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.25); transition:all 0.4s; cursor:pointer; }
.hs-dot.on{ background:var(--gl); box-shadow:0 0 8px var(--gl); width:20px; border-radius:4px; }

@keyframes hs-spin{ to{ transform:translate(-50%,-50%) translateZ(38px) rotate(360deg);} }
@keyframes hs-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
@keyframes hs-ping{ 0%{ transform:scale(0.7); opacity:0.6;} 100%{ transform:scale(1.7); opacity:0;} }

/* BEAT STATES — the continuity engine */
/* beat 1 GAP: sides apart, gap charged, no bridge/core */
.heroshow[data-beat="0"] .side-have{ left:11%; } .heroshow[data-beat="0"] .side-need{ right:11%; }
.heroshow[data-beat="0"] .hs-gap{ opacity:1; } .heroshow[data-beat="0"] .hs-gap-spark{ opacity:1; }
/* beat 2 BRIDGE: sides draw in, gap fades, bridge forms, core appears small */
.heroshow[data-beat="1"] .side-have{ left:13%; } .heroshow[data-beat="1"] .side-need{ right:13%; }
.heroshow[data-beat="1"] .hs-gap{ opacity:0; } .heroshow[data-beat="1"] .hs-gap-spark{ opacity:0; }
.heroshow[data-beat="1"] .hs-core{ width:40px; height:40px; margin:-20px 0 0 0; }
.heroshow[data-beat="1"] .hs-core-ring{ opacity:0.7; }
/* beat 3 RESULT: fully connected, core full, rings on */
.heroshow[data-beat="2"] .side-have{ left:12%; } .heroshow[data-beat="2"] .side-need{ right:12%; }
.heroshow[data-beat="2"] .hs-gap{ opacity:0; } .heroshow[data-beat="2"] .hs-gap-spark{ opacity:0; }
.heroshow[data-beat="2"] .hs-core{ width:66px; height:66px; margin:-33px 0 0 0; }
.heroshow[data-beat="2"] .hs-core-ring{ opacity:1; }
.heroshow[data-beat="2"] .side-need .slot .sk{ border-style:solid; background:rgba(124,179,66,0.16); box-shadow:0 0 22px rgba(124,179,66,0.5); }

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

/* heroshow fills the homepage hero-img slot */
.hero-img .heroshow{ position:absolute; inset:0; width:100%; height:100%; min-height:inherit; border-radius:0; box-shadow:none; }

/* door3d fills the services door-img slot */
.door-img .door3d{ position:absolute; inset:0; width:100%; height:100%; min-height:inherit; border-radius:0; }
.door-img{ position:relative; }

/* ===== SERVICES HEADER/CORE BANNERS ===== */
.svc-banner{ --g:#7CB342;--gl:#B4E38A;--sf:#D68A2E;--sfl:#EDC078;
  position:relative; width:100%; height:100%; min-height:100%; border-radius:inherit; overflow:hidden;
  background:radial-gradient(120% 95% at 50% 8%,#3D3044,#251E2C 52%,#160F1C); perspective:900px; }
.svc-banner::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(140,220,255,0.02) 0 1px,transparent 1px 3px); opacity:0.5; }
.svcb-grid{ position:absolute; inset:-40% -15% -14% -15%; background-image:linear-gradient(rgba(124,179,66,0.09) 1px,transparent 1px),linear-gradient(90deg,rgba(124,179,66,0.09) 1px,transparent 1px); background-size:38px 38px; transform:rotateX(70deg) translateZ(-20px) scale(1.7); transform-origin:50% 66%; -webkit-mask-image:radial-gradient(120% 88% at 50% 30%,#000 26%,transparent 78%); mask-image:radial-gradient(120% 88% at 50% 30%,#000 26%,transparent 78%); opacity:0.45; }
.svcb-glow{ position:absolute; left:50%; top:50%; width:50%; height:60%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(124,179,66,0.18),transparent 60%); filter:blur(12px); }
.svcb-scene{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(8deg); }
.svcb-node{ position:absolute; width:20px; height:20px; border-radius:50%; transform:translateZ(24px); box-shadow:0 0 14px rgba(214,138,46,0.5),inset 0 1px 3px rgba(255,255,255,0.5); background:radial-gradient(circle at 36% 30%,#F6D89C,#C77F1E); animation:hs-bob 3.6s ease-in-out infinite; }
.svcb-slot{ position:absolute; width:20px; height:20px; border-radius:6px; border:2px dashed var(--g); background:rgba(124,179,66,0.08); box-shadow:0 0 14px rgba(124,179,66,0.25); transform:translateZ(24px); animation:hs-slotpulse 3.6s ease-in-out infinite; }
.svcb-line{ position:absolute; height:1.5px; background:linear-gradient(90deg,rgba(214,138,46,0.4),rgba(124,179,66,0.5)); transform:translateZ(16px); }
.svcb-core{ position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#DFF6C4,#5f9120); box-shadow:0 0 26px rgba(124,179,66,0.7),inset 0 2px 5px rgba(255,255,255,0.6); transform:translateZ(38px); animation:hs-pulse 2.6s ease-in-out infinite; }
.svcb-core::after{ content:''; position:absolute; inset:-8px; border-radius:50%; border:1.5px solid rgba(124,179,66,0.4); border-top-color:transparent; border-bottom-color:transparent; animation:hs-spin 7s linear infinite; }
.svcb-spark{ position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--gl); box-shadow:0 0 12px var(--gl); transform:translateZ(20px); animation:svcb-cross 3.4s ease-in-out infinite; }
@keyframes svcb-cross{ 0%{ left:24%; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{ left:76%; opacity:0;} }
.svcb-vign{ position:absolute; inset:0; box-shadow:inset 0 0 60px 14px rgba(10,6,14,0.5); border-radius:inherit; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .svc-banner *{ animation:none !important; } }

/* banner fills pagehead + core image slots */
.pagehead-media, .core-head-media{ position:relative; min-height:300px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.pagehead-media .svc-banner, .core-head-media .svc-banner{ position:absolute; inset:0; height:100%; }

/* ===== DIFFERENTIATED CORE BANNERS ===== */
/* TALENT core — matching: candidate pool converging to a filled seat */
.svcb-talent .svcb-glow{ background:radial-gradient(circle,rgba(212,83,126,0.18),transparent 60%) !important; }
.svct-pool{ position:absolute; left:26%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; transform:translateZ(24px); }
.svct-cand{ position:absolute; width:14px; height:14px; border-radius:50%; background:linear-gradient(150deg,#EC7BA0,#D4537E); box-shadow:0 0 10px rgba(212,83,126,0.5),inset 0 1px 2px rgba(255,255,255,0.4); animation:hs-bob 3.4s ease-in-out infinite; }
.svct-c1{ left:2px; top:4px; } .svct-c2{ right:2px; top:0; animation-delay:0.5s; } .svct-c3{ left:6px; bottom:2px; animation-delay:1s; } .svct-c4{ right:6px; bottom:6px; animation-delay:1.5s; }
.svct-seat{ position:absolute; right:26%; top:50%; width:44px; height:44px; margin:-22px 0 0 0; border-radius:10px; background:linear-gradient(155deg,#9BD65E,#639922); box-shadow:0 8px 18px rgba(0,0,0,0.4),0 0 18px rgba(124,179,66,0.5),inset 0 1px 0 rgba(255,255,255,0.4); transform:translateZ(30px); display:flex; align-items:center; justify-content:center; }
.svct-seat::after{ content:''; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#FDF7EC,#D8CFC4); }
.svct-flow{ position:absolute; top:50%; width:9px; height:9px; margin-top:-4px; border-radius:50%; background:var(--gl); box-shadow:0 0 12px var(--gl); transform:translateZ(26px); animation:svct-cross 3.2s ease-in-out infinite; }
@keyframes svct-cross{ 0%{ left:34%; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{ left:66%; opacity:0;} }
.svct-ring{ position:absolute; left:26%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; border:1.5px solid rgba(212,83,126,0.4); transform:translateZ(18px); animation:hs-pulse 3s ease-in-out infinite; }

/* CONSULTING core — delivery: stages advancing to a checkmark */
.svcb-consult .svcb-glow{ background:radial-gradient(circle,rgba(214,138,46,0.18),transparent 60%) !important; }
.svcc-stage{ position:absolute; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:7px; transform:translateZ(24px); background:linear-gradient(155deg,#524D5A,#38343F); border:1px solid rgba(255,255,255,0.1); box-shadow:0 5px 12px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:9px; color:#C4BCCA; }
.svcc-s1{ left:20%; animation:svcc-lift 4s ease-in-out infinite 0s; } .svcc-s2{ left:38%; animation:svcc-lift 4s ease-in-out infinite 0.5s; } .svcc-s3{ left:56%; animation:svcc-lift 4s ease-in-out infinite 1s; }
@keyframes svcc-lift{ 0%,100%{ transform:translateZ(24px) translateY(0);} 50%{ transform:translateZ(24px) translateY(-5px);} }
.svcc-track{ position:absolute; left:20%; right:22%; top:50%; height:2px; transform:translateZ(14px); background:linear-gradient(90deg,rgba(214,138,46,0.4),rgba(124,179,66,0.6)); }
.svcc-done{ position:absolute; right:18%; top:50%; width:40px; height:40px; margin-top:-20px; border-radius:50%; background:linear-gradient(155deg,#9BD65E,#639922); box-shadow:0 8px 18px rgba(0,0,0,0.4),0 0 20px rgba(124,179,66,0.55),inset 0 1px 0 rgba(255,255,255,0.4); transform:translateZ(32px); display:flex; align-items:center; justify-content:center; }
.svcc-done::after{ content:''; width:12px; height:6px; border-left:2.5px solid #1D3010; border-bottom:2.5px solid #1D3010; transform:translateY(-1px) rotate(-45deg); }
.svcc-pulse{ position:absolute; top:50%; width:7px; height:7px; margin-top:-3px; border-radius:50%; background:var(--sfl); box-shadow:0 0 10px var(--sf); transform:translateZ(20px); animation:svcc-run 3s ease-in-out infinite; }
@keyframes svcc-run{ 0%{ left:22%; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{ left:78%; opacity:0;} }
