/* Accord Growth Engine — interactive services section (replaces #service-list-desktop) */
#growth-engine{
  --ge-red:#e2231a; --ge-red-dark:#b91c15; --ge-black:#0b0c10; --ge-charcoal:#111318;
  --ge-ink:#20242a; --ge-muted:#8a93a3; --ge-line:rgba(255,255,255,.10);
  --ge-panel:rgba(255,255,255,.03);
  --ge-ease:cubic-bezier(.22,.61,.36,1);
  --ge-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#growth-engine, #growth-engine *{box-sizing:border-box}
#growth-engine{font-family:var(--ge-font);background:var(--ge-black);color:#eef1f6;-webkit-font-smoothing:antialiased}
/* horizontal-scroll containment is handled by the site's own body{overflow-x:hidden};
   setting overflow here (even just one axis) would make this div its own scroll
   container and break position:sticky for .stage below */
#growth-engine a{color:inherit;text-decoration:none}

#growth-engine .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ge-red);font-weight:700}
#growth-engine .kicker::before{content:"";width:26px;height:1px;background:var(--ge-red)}

/* ============ SECTION SHELL ============ */
#growth-engine .engine{position:relative;background:
  radial-gradient(1200px 800px at 30% 10%,rgba(226,35,26,.10),transparent 55%),
  linear-gradient(180deg,var(--ge-black),#070810 60%,var(--ge-black))}
#growth-engine .engine .layout{display:grid;grid-template-columns:56% 44%}

/* left sticky canvas */
#growth-engine .stage{position:sticky;top:0;height:100vh;overflow:hidden}
#growth-engine #ge-gl{width:100%;height:100%;display:block;cursor:grab}
#growth-engine #ge-gl:active{cursor:grabbing}
#growth-engine .stage .flowlbl{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ge-muted);pointer-events:none}
#growth-engine .stage .flowlbl.in{left:20px}
#growth-engine .stage .flowlbl.out{right:20px;text-align:right;color:#f0b8b4}
#growth-engine .stage .flowlbl b{display:block;color:#dfe4ec;font-size:13px;margin-top:4px;letter-spacing:.02em;text-transform:none;font-weight:600}
#growth-engine .stage .flowlbl.out b{color:#ff8f86}
/* results dashboard overlay */
#growth-engine .dash{position:absolute;left:20px;bottom:88px;right:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:0;transform:translateY(14px);transition:.6s var(--ge-ease);pointer-events:none}
#growth-engine .dash.show{opacity:1;transform:none}
#growth-engine .dash .kpi{background:rgba(12,14,20,.72);border:1px solid var(--ge-line);border-radius:12px;padding:12px 14px;backdrop-filter:blur(6px)}
#growth-engine .dash .kpi b{display:block;font-size:24px;font-weight:800;color:#fff}
#growth-engine .dash .kpi small{color:var(--ge-muted);font-size:11px;letter-spacing:.04em}
#growth-engine .stage .scenemsg{position:absolute;left:50%;top:15%;transform:translateX(-50%);text-align:center;color:#dfe4ec;font-size:15px;letter-spacing:.02em;max-width:80%;transition:.4s var(--ge-ease);pointer-events:none}
#growth-engine .wglfallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;color:var(--ge-muted);padding:40px;font-size:14px}
/* premium depth */
#growth-engine .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(0,0,0,.6) 100%)}
/* focus veil — blurs + dims everything behind the active card */
#growth-engine .focusveil{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .25s linear;backdrop-filter:blur(10px) brightness(.4) saturate(.75);-webkit-backdrop-filter:blur(10px) brightness(.4) saturate(.75);background:rgba(5,6,10,.35)}
#growth-engine .focusveil.on{opacity:1}
#growth-engine .stage .flowlbl,#growth-engine .stage .scenemsg{z-index:5}
/* once the cards deploy, the side/bottom telemetry hides so nothing overlaps them */
#growth-engine .stage .flowlbl,#growth-engine .hud .tele{transition:opacity .5s var(--ge-ease)}
#growth-engine .stage.cardsout .flowlbl,#growth-engine .stage.cardsout .tele.bl,#growth-engine .stage.cardsout .tele.br{opacity:0}
#growth-engine .hud .tele .msg{max-width:36ch;white-space:normal;line-height:1.6;margin-top:3px}
#growth-engine .hud .tele .msg .v{color:#ffe0b0}
#growth-engine .grain{position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter=%22url%28%23n%29%22/%3E%3C/svg%3E")}
#growth-engine .svc-ico{display:inline-flex;color:var(--ge-red)}
#growth-engine .svc-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#growth-engine .snav button .svc-ico{margin-right:6px}
#growth-engine .snav button .svc-ico svg{width:14px;height:14px}
#growth-engine .snav button.on .svc-ico{color:#fff}
#growth-engine .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#9aa3b2;font-weight:700}
#growth-engine .eyebrow b{color:#fff;font-weight:800}
#growth-engine .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ge-red);box-shadow:0 0 10px rgba(226,35,26,.9)}
/* ===== JARVIS / Iron-Man HUD ===== */
#growth-engine .hud{position:absolute;inset:0;pointer-events:none;font-family:'Share Tech Mono',ui-monospace,monospace;z-index:6}
#growth-engine .hud .corner{position:absolute;width:52px;height:52px;border:2px solid rgba(226,35,26,.55)}
#growth-engine .hud .corner.tl{top:16px;left:16px;border-right:none;border-bottom:none}
#growth-engine .hud .corner.tr{top:16px;right:16px;border-left:none;border-bottom:none}
#growth-engine .hud .corner.bl{bottom:16px;left:16px;border-right:none;border-top:none}
#growth-engine .hud .corner.br{bottom:16px;right:16px;border-left:none;border-top:none}
#growth-engine .hud .tele{position:absolute;font-size:10.5px;letter-spacing:.1em;line-height:1.9;color:#ffb4a8;text-shadow:0 0 8px rgba(226,35,26,.5)}
#growth-engine .hud .tele .k{color:#ff5a4d}
#growth-engine .hud .tele .v{color:#ffe0b0}
#growth-engine .hud .tele.tl{top:22px;left:82px}
#growth-engine .hud .tele.tr{top:22px;right:82px;text-align:right}
#growth-engine .hud .tele.bl{bottom:150px;left:82px}
#growth-engine .hud .tele.br{bottom:150px;right:82px;text-align:right}
#growth-engine .reticle{position:absolute;top:50%;left:50%;width:min(46vh,360px);height:min(46vh,360px);transform:translate(-50%,-50%);opacity:.42;pointer-events:none;transition:opacity .5s var(--ge-ease)}
/* while a card is focused, the reticle + scanline get out of its way — the card reads solid */
#growth-engine .stage.svcfocus .reticle,#growth-engine .stage.svcfocus .scan{opacity:.06}
#growth-engine .reticle svg{width:100%;height:100%;display:block}
/* Bootstrap ships a global `svg{fill:currentColor}` which overrides the decorative
   SVGs' own fill="none" presentation attribute (CSS always wins over presentation
   attrs), filling the HUD reticle rings solid near-white — the grey disc around the
   core that the original (no Bootstrap) never had. Restore fill:none for any SVG
   authored with fill="none"; shapes with an explicit fill (e.g. the red reticle
   marker) keep it via their own presentation attribute. */
#growth-engine svg[fill="none"],
#growth-engine svg[fill="none"] circle{fill:none}
#growth-engine .ge-spin{animation:ge-spin 26s linear infinite}
@keyframes ge-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#growth-engine .scan{position:absolute;left:0;right:0;height:130px;background:linear-gradient(180deg,transparent,rgba(226,35,26,.10),transparent);mix-blend-mode:screen;animation:ge-scan 6.5s linear infinite}
@keyframes ge-scan{0%{top:-130px}100%{top:100%}}
#growth-engine .target{position:absolute;width:120px;height:120px;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s}
#growth-engine .target.on{opacity:1}
#growth-engine .target b{position:absolute;width:20px;height:20px;border:2px solid #ff5a4d;box-shadow:0 0 8px rgba(226,35,26,.6)}
#growth-engine .target .t1{top:0;left:0;border-right:none;border-bottom:none}
#growth-engine .target .t2{top:0;right:0;border-left:none;border-bottom:none}
#growth-engine .target .t3{bottom:0;left:0;border-right:none;border-top:none}
#growth-engine .target .t4{bottom:0;right:0;border-left:none;border-top:none}
#growth-engine .target .lab{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#ffd27f;text-shadow:0 0 8px rgba(226,35,26,.7)}
#growth-engine .boot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 50%,rgba(20,6,6,.92),rgba(5,6,10,.97));font-family:'Share Tech Mono',monospace;color:#ff7a6e;z-index:8;transition:opacity .8s,visibility .8s}
#growth-engine .boot.hide{opacity:0;visibility:hidden}
#growth-engine .boot .ttl{font-size:13px;letter-spacing:.34em}
#growth-engine .boot .bar{width:230px;height:4px;background:rgba(255,90,77,.18);border-radius:2px;overflow:hidden}
#growth-engine .boot .bar i{display:block;height:100%;width:0;background:#ff5a4d;box-shadow:0 0 12px #ff5a4d;animation:ge-bootbar 1.9s ease forwards}
@keyframes ge-bootbar{to{width:100%}}
@media(max-width:900px){#growth-engine .hud .tele{display:none}#growth-engine .hud .corner{width:34px;height:34px}}

/* right copy column */
#growth-engine .copy{position:relative;z-index:2}
#growth-engine .copy [data-scene]{opacity:.38;transform:translateY(16px);transition:opacity .7s var(--ge-ease),transform .7s var(--ge-ease)}
#growth-engine .copy [data-scene].live{opacity:1;transform:none}
#growth-engine .copy .head{padding:16vh 6vw 4vh}
#growth-engine .copy .head h2{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:16px 0}
#growth-engine .copy .head p.lead{color:#c6ccd8;font-size:clamp(15px,1.4vw,18px);line-height:1.65;max-width:520px}
#growth-engine .copy .head .explore{margin-top:22px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em}
#growth-engine .copy .head .helper{margin-top:8px;color:var(--ge-muted);font-size:13px}

#growth-engine .panel{min-height:74vh;padding:6vh 6vw;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--ge-line)}
#growth-engine .panel .role{color:var(--ge-red);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
#growth-engine .panel h3{font-size:clamp(24px,2.8vw,40px);font-weight:800;letter-spacing:-.02em;margin:12px 0}
#growth-engine .panel p{color:#c1c8d4;line-height:1.7;font-size:16px;max-width:520px}
#growth-engine .panel .caps{list-style:none;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:9px}
#growth-engine .panel .caps li{font-size:12.5px;padding:8px 13px;border:1px solid var(--ge-line);border-radius:100px;color:#d7dbe4;background:var(--ge-panel)}
#growth-engine .panel .outcome{margin-top:22px;font-size:14px;color:#fff;display:inline-flex;align-items:center;gap:10px;background:rgba(226,35,26,.10);border:1px solid rgba(226,35,26,.35);border-radius:10px;padding:11px 15px}
#growth-engine .panel .cta{margin-top:22px}
#growth-engine .panel .cta a{display:inline-flex;align-items:center;gap:8px;color:var(--ge-red);font-weight:700;font-size:15px}
#growth-engine .panel .cta a .arw{transition:.3s var(--ge-ease)}
#growth-engine .panel .cta a:hover .arw{transform:translateX(6px)}
#growth-engine .panel[data-kind="system"]{background:linear-gradient(180deg,rgba(226,35,26,.06),transparent)}
#growth-engine .flow-steps{list-style:none;margin:16px 0 0;max-width:520px}
#growth-engine .flow-steps li{display:flex;gap:12px;padding:9px 0;color:#c1c8d4;font-size:15px;border-bottom:1px solid var(--ge-line)}
#growth-engine .flow-steps li b{color:var(--ge-red);font-variant-numeric:tabular-nums}

#growth-engine .final{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 6vw;border-top:1px solid var(--ge-line)}
#growth-engine .final h3{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
#growth-engine .final p{color:#c6ccd8;margin-top:14px;max-width:520px;font-size:16px;line-height:1.6}
#growth-engine .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
#growth-engine .btn{display:inline-flex;align-items:center;gap:9px;background:var(--ge-red);color:#fff;font-weight:700;padding:15px 26px;border-radius:100px;font-size:15px;transition:.3s var(--ge-ease);box-shadow:0 14px 40px rgba(226,35,26,.35)}
#growth-engine .btn:hover{transform:translateY(-3px);background:var(--ge-red-dark)}
#growth-engine .btn.ghost{background:transparent;border:1px solid var(--ge-line);box-shadow:none;color:#eef1f6}
#growth-engine .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.04)}

/* service nav — absolute inside the sticky .stage (left column) so it pins to the
   bottom-left of the section while scrolling and scrolls away with the section,
   instead of floating over the rest of the page as a fixed element would */
#growth-engine .snav{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;gap:6px;background:rgba(12,14,20,.8);border:1px solid var(--ge-line);border-radius:100px;padding:6px;backdrop-filter:blur(10px);max-width:calc(100% - 32px)}
#growth-engine .snav button{border:none;background:transparent;color:#c6ccd8;font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:100px;cursor:pointer;transition:.25s var(--ge-ease);white-space:nowrap}
#growth-engine .snav button:hover{color:#fff}
#growth-engine .snav button.on{background:var(--ge-red);color:#fff}
#growth-engine .snav .tier{width:1px;background:var(--ge-line);margin:4px 2px}

#growth-engine .ge-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;background:transparent}
#growth-engine .ge-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ge-red),#ff6a5e)}

@media(max-width:991.98px){
  /* section is only shown at lg+ (d-none d-lg-block); this covers the lg->900px gap defensively */
  #growth-engine .engine .layout{grid-template-columns:1fr}
  #growth-engine .stage{height:56vh;top:0;order:-1}
  #growth-engine .stage .flowlbl{font-size:9px}
  #growth-engine .stage .flowlbl b{font-size:11px}
  #growth-engine .stage .scenemsg{font-size:12.5px;top:6%}
  #growth-engine .dash .kpi b{font-size:18px}
  #growth-engine .dash .kpi{padding:9px 10px}
  #growth-engine .reticle{width:min(34vh,240px);height:min(34vh,240px)}
  #growth-engine .panel .caps li{font-size:11.5px;padding:7px 11px}
  #growth-engine .btn{padding:13px 20px;font-size:14px}
  #growth-engine .copy .head{padding:9vh 24px 3vh}
  #growth-engine .panel{min-height:auto;padding:44px 24px}
  #growth-engine .snav{font-size:11px;overflow-x:auto;max-width:94vw;left:50%;bottom:12px}
  #growth-engine .dash{grid-template-columns:repeat(3,1fr)}
  #growth-engine .snav .lbl-full{display:none}
}
@media(prefers-reduced-motion:reduce){ #growth-engine #ge-gl{opacity:.9} #growth-engine .ge-spin,#growth-engine .scan{animation:none!important} #growth-engine .boot .bar i{animation:none;width:100%} }