/* =====================================================================
   SITE NAV COMPONENT — mega menu layer on every page (Home is the style source).
   The panels are still built by main.js (NAV_MENUS); this layer adds the shell
   (scrim, reveal) and per-panel polish. Scoped by html.snv (added by site-nav.js).

   ===================================================================== */

/* ---- shell: the page dims behind an open panel; the panel unrolls from the nav line ---- */
.snv .navScrim { position: fixed; inset: 0; z-index: 99; background: rgba(14, 16, 32, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.snv .navScrim.is-on { opacity: 1; pointer-events: auto; }
.snv .mega { transform: none !important; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, visibility .55s !important; box-shadow: 0 30px 60px -20px rgba(14, 16, 32, .25); }
.snv .nav.is-mega-open .mega { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .snv .mega { transition: opacity .2s, visibility .2s !important; clip-path: none; } }

/* ---- Company ---- */
/* arrow disc: appears bottom-right on hover; the arrow slides out and a fresh one comes in */
.snv .coCard__go { position: absolute; right: 20px; bottom: 20px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--co, #4a3dcc); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 10px 24px -10px rgba(var(--co-rgb, 74, 61, 204), .7), inset 0 0 0 1px rgba(var(--co-rgb, 74, 61, 204), .18);
  opacity: 0; transform: scale(.6) rotate(-45deg); transition: opacity .3s, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.snv .coCard__go svg { position: absolute; width: 18px; height: 18px; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.snv .coCard__go svg + svg { transform: translate(-150%, 150%); }
.snv .coCard:hover .coCard__go, .snv .coCard:focus-visible .coCard__go { opacity: 1; transform: none; }
.snv .coCard:hover .coCard__go svg:first-child { transform: translate(150%, -150%); transition-delay: .25s; }
.snv .coCard:hover .coCard__go svg + svg { transform: none; transition-delay: .25s; }

/* bottom strip: the panel's own line on the left, the newest insight on the right */
.snv .coStrip { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 var(--pad-x); padding: 16px 0 20px; border-top: 1px solid #ececf1; }
.snv .coStrip__lead { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #555a6b; font: 400 15px/1.4 Inter, sans-serif; }
.snv .coStrip__tag { display: inline-flex; align-items: center; gap: 8px; color: #6b7183; font: 700 12px/1 "Geologica", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.snv .coStrip__tag::before { content: ""; width: 9px; height: 9px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }
.snv .coStrip__news { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: #11131f; text-decoration: none; font: 500 15px/1.3 "Geologica", sans-serif; }
.snv .coStrip__news small { flex: none; padding: 5px 9px; border-radius: 999px; background: #f1effd; color: #4a3dcc; font: 600 11px/1 "Geologica", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.snv .coStrip__news span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.65, 0, .35, 1); }
.snv .coStrip__news:hover span { background-size: 100% 1px; }
.snv .coStrip__news svg { flex: none; width: 16px; height: 16px; color: #4a3dcc; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.snv .coStrip__news:hover svg { transform: translateX(4px); }
.snv .mega__panel--company .mega__company { padding-bottom: 20px; }
@media (max-width: 1100px) { .snv .coStrip__lead { display: none; } }

/* ---- Solutions v2: grouped list + live preview ---- */
.snv .mega__panel--solutions .solMenu[hidden] { display: none !important; }
.snv .snSol { display: grid; grid-template-columns: 3fr minmax(300px, 1.15fr); margin: 0 var(--pad-x); border-left: 1px solid #ececf1; border-right: 1px solid #ececf1; }
.snv .snSol__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 30px 12px 26px; isolation: isolate; }
.snv .snSol__group { padding: 0 10px; min-width: 0; }
.snv .snSol__group + .snSol__group { border-left: 1px solid #f0f0f4; }
.snv .snSol__tag { margin: 0 0 14px; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; color: #6b7183; font: 700 12px/1 "Geologica", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.snv .snSol__tag::before { content: ""; width: 9px; height: 9px; border-radius: 50% 50% 0 50%; background: #4a3dcc; order: -1; margin-bottom: 4px; }
.snv .snSol__sub { color: #11131f; font: 500 16px/1.3 "Geologica", sans-serif; letter-spacing: -.01em; text-transform: none; }
.snv .snSol__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snv .snSol__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; color: #11131f; font: 600 15px/1.3 "Geologica", sans-serif; letter-spacing: -.005em; }
.snv .snSol__ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #f1effd; color: #4a3dcc; transition: background-color .35s, color .35s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.snv .snSol__ic svg { width: 22px; height: 22px; }
.snv .snSol__item.is-cur .snSol__ic { background: #4a3dcc; color: #fff; transform: rotate(-6deg); border-radius: 11px 11px 2px 11px; }
/* the marker that glides between items */
.snv .snSol__hl { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 12px; background: #f7f6ff; box-shadow: inset 0 0 0 1px #e6e2fb; opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1), height .45s cubic-bezier(.65, 0, .35, 1), opacity .3s; }
.snv .snSol__hl.is-on { opacity: 1; }
/* preview */
.snv .snSol__pv { border-left: 1px solid #ececf1; padding: 24px 24px 26px; display: flex; flex-direction: column; min-width: 0; }
.snv .snSol__stage { position: relative; aspect-ratio: 16 / 9.5; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(90deg, transparent calc(25% - .5px), rgba(74, 61, 204, .08) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px), rgba(74, 61, 204, .08) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), rgba(74, 61, 204, .08) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)), radial-gradient(70% 90% at 50% 55%, #efecff, #f8f7ff 70%); }
.snv .snSol__ring { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 1px dashed rgba(74, 61, 204, .3); animation: snSpin 24s linear infinite; }
.snv .snSol__ring--b { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-style: solid; border-color: rgba(74, 61, 204, .12); animation-duration: 40s; animation-direction: reverse; }
.snv .snSol__ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #29ccb2; box-shadow: 0 0 0 4px rgba(41, 204, 178, .18); }
.snv .snSol__ring--b::after { background: #4a3dcc; box-shadow: 0 0 0 4px rgba(74, 61, 204, .14); top: auto; bottom: -4px; }
@keyframes snSpin { to { transform: rotate(360deg); } }
.snv .snSol__chip { position: relative; width: 84px; height: 84px; border-radius: 26px 26px 6px 26px; background: #4a3dcc; color: #fff; display: grid; place-items: center; box-shadow: 0 18px 36px -14px rgba(74, 61, 204, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.snv .snSol__chip svg { width: 42px; height: 42px; }
.snv .snSol__idx { position: absolute; left: 14px; bottom: 12px; color: #8b82ea; font: 600 11.5px/1 "Geologica", sans-serif; letter-spacing: .12em; }
.snv .snSol__pv.is-swap .snSol__chip { animation: snChip .6s cubic-bezier(.3, 1.4, .5, 1); }
.snv .snSol__pv.is-swap .snSol__pvName, .snv .snSol__pv.is-swap .snSol__pvDesc, .snv .snSol__pv.is-swap .snSol__pvTag { animation: snTxt .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes snChip { from { transform: scale(.55) rotate(-25deg); opacity: .2; } }
@keyframes snTxt { from { opacity: 0; transform: translateY(6px); } }
.snv .snSol__pvTag { margin: 18px 0 0; color: #8a8fa0; font: 700 11.5px/1 "Geologica", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.snv .snSol__pvName { margin: 10px 0 0; color: #11131f; font: 600 21px/1.2 "Geologica", sans-serif; letter-spacing: -.02em; }
.snv .snSol__pvDesc { margin: 8px 0 0; color: #555a6b; font: 400 14.5px/1.5 Inter, sans-serif; }
.snv .snSol__pvActions { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.snv .snSol__talk { color: #11131f; text-decoration: none; font: 600 14.5px/1 "Geologica", sans-serif; }
.snv .snSol__talk span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s cubic-bezier(.65, 0, .35, 1); }
.snv .snSol__talk:hover span { background-size: 0 1px; background-position: 100% 100%; }
:root.snv .snSol .btn.sbx, :root.snv.sbx-on .snSol .btn.sbx.sbx--out { background-color: #4a3dcc !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -8px rgba(74, 61, 204, .6) !important; }
:root.snv .snSol .btn.sbx .sbx__ic { background: #fff !important; color: #4a3dcc !important; }
.snv .snSol__strip .coStrip__news { color: #4a3dcc; font-weight: 600; }
.snv .mega__panel--solutions.is-active .snSol__group li { animation: snTxt .5s cubic-bezier(.2, .8, .2, 1) both; }
.snv .mega__panel--solutions.is-active .snSol__group:nth-child(3) li { animation-delay: .05s; }
.snv .mega__panel--solutions.is-active .snSol__group:nth-child(4) li { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .snv .snSol__ring { animation: none; } .snv .snSol__hl { transition: none; } }
.snv .snSol__tag { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 8px; }
.snv .snSol__tag::before { order: 0; margin: 0; }
.snv .snSol__sub { grid-column: 1 / -1; }
.snv .snSol__pvName { min-height: 2.4em; display: flex; align-items: flex-end; }
.snv .snSol__pvDesc { min-height: 3em; }
/* ---- Solutions v3: the list is a hairline grid like the Partners logos; icon + text only;
   the current cell gets the four purple corner brackets ---- */
.snv .snSol { border-color: #e3e4ea; }
.snv .snSol__list { padding: 0; isolation: auto; }
.snv .snSol__group { padding: 0; display: flex; flex-direction: column; }
.snv .snSol__group + .snSol__group { border-left: 1px solid #e3e4ea; }
.snv .snSol__tag { margin: 0; padding: 24px 24px 20px; border-bottom: 1px solid #e3e4ea; }
.snv .snSol__group ul { gap: 0; flex: 1; display: grid; grid-template-rows: repeat(var(--rows, 3), minmax(72px, 1fr)); }
.snv .snSol__group li + li { border-top: 1px solid #e3e4ea; }
.snv .snSol__item { position: relative; height: 100%; box-sizing: border-box; padding: 18px 24px; gap: 14px; border-radius: 0; transition: color .3s; }
.snv .snSol__ic, .snv .snSol__item.is-cur .snSol__ic { width: 26px; height: 26px; border-radius: 0; background: none; color: #4a3dcc; transform: none; }
.snv .snSol__ic svg { width: 26px; height: 26px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.snv .snSol__item.is-cur .snSol__ic svg { transform: scale(1.12); }
.snv .snSol__item::after { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1);
  --c: #4a3dcc; --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l);
  background-repeat: no-repeat; }
.snv .snSol__item.is-cur::after { opacity: 1; transform: none; }
.snv .snSol__item:not(.is-cur) { color: #3d4152; }
.snv .snSol__pv { border-left-color: #e3e4ea; }
/* preview stage: quiet and exact: the frame grid, two still hairline circles, a soft light under the tile */
.snv .snSol__ring { animation: none !important; border: 1px solid rgba(74, 61, 204, .14); }
.snv .snSol__ring--b { border-color: rgba(74, 61, 204, .08); }
.snv .snSol__ring::after { content: none !important; }
.snv .snSol__glow { position: absolute; left: 50%; top: 50%; width: 180px; height: 70px; margin: 26px 0 0 -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 61, 204, .28), transparent); filter: blur(6px); }
.snv .snSol__chip { z-index: 1; }
.snv .snSol__pv.is-swap .snSol__ring { animation: snRing .8s cubic-bezier(.2, .8, .2, 1) !important; }
@keyframes snRing { from { transform: scale(.85); opacity: 0; } }
/* strips sit inside the frame: side lines continue, a closing line at the bottom, content off the lines */
.snv .coStrip { border: 1px solid #e3e4ea; border-top-color: #e3e4ea; padding: 16px 24px; margin-bottom: 20px; }
.snv .snSol + .coStrip { border-top: 0; }
.snv .snSol + .coStrip { border-top: 1px solid #e3e4ea; }
.snv .mega__panel--company .coStrip { border-radius: 12px; }
/* strips are the panel footer: a line on top, frame lines at the sides, flush with the bottom edge */
.snv .coStrip { border-width: 1px 1px 0 !important; border-radius: 0 !important; margin-bottom: 0 !important; padding: 18px 24px !important; }
/* footer line runs the full width of the panel (like the site footer); content stays inside the frame */
.snv .coStrip { margin: 0 !important; border-width: 1px 0 0 !important; padding: 18px calc(var(--pad-x) + 24px) !important; }
/* ---- Solutions v4: linear icons that draw themselves (on open, staggered; and again when a cell becomes current) ---- */
.snv .snSol__ic svg { width: 26px; height: 26px; overflow: visible; }
.snv .snSol__ic svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.snv .mega__panel--solutions.is-active .snSol__ic svg * { animation: snDraw .9s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.12s + var(--d, 0s)); }
.snv .snSol__group:nth-child(1) li:nth-child(1) { --d: 0s; } .snv .snSol__group:nth-child(1) li:nth-child(2) { --d: .08s; } .snv .snSol__group:nth-child(1) li:nth-child(3) { --d: .16s; }
.snv .snSol__group:nth-child(2) li:nth-child(1) { --d: .06s; } .snv .snSol__group:nth-child(2) li:nth-child(2) { --d: .14s; } .snv .snSol__group:nth-child(2) li:nth-child(3) { --d: .22s; }
.snv .snSol__group:nth-child(3) li:nth-child(1) { --d: .12s; } .snv .snSol__group:nth-child(3) li:nth-child(2) { --d: .2s; } .snv .snSol__group:nth-child(3) li:nth-child(3) { --d: .28s; }
.snv .mega__panel--solutions.is-active .snSol__item.is-draw .snSol__ic svg * { animation: snDraw2 .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: 0s; }
@keyframes snDraw { from { stroke-dashoffset: 1; } }
@keyframes snDraw2 { from { stroke-dashoffset: 1; } }
/* the current cell: icon leans in, the label shifts a hair toward it */
.snv .snSol__item .snSol__name { transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .3s; }
.snv .snSol__item.is-cur .snSol__name { transform: translateX(3px); color: #11131f; }
.snv .snSol__item.is-cur .snSol__ic svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .snv .snSol__ic svg * { animation: none !important; } }
/* ---- Solutions v5 preview: the tile never changes; the linear icon slides through it (masked by the tile);
   the text glides in from the same side. No scaling, no rings animating. ---- */
.snv .snSol__pv.is-swap .snSol__chip, .snv .snSol__pv.is-swap .snSol__ring,
.snv .snSol__pv.is-swap .snSol__pvName, .snv .snSol__pv.is-swap .snSol__pvDesc, .snv .snSol__pv.is-swap .snSol__pvTag { animation: none !important; }
.snv .snSol__chip { overflow: hidden; }
.snv .snSol__icn { position: absolute; inset: 0; display: grid; place-items: center; }
.snv .snSol__icn svg { width: 40px; height: 40px; overflow: visible; }
.snv .snSol__icn svg * { stroke: #fff; }
/* ---- Solutions v6 preview: icons erase and redraw (no slide) ---- */
.snv .snSol__icn svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.snv .snSol__icn.is-out svg * { animation: snErase .28s cubic-bezier(.65, 0, .35, 1) forwards; }
.snv .snSol__icn.is-in svg * { animation: snDraw .8s cubic-bezier(.65, 0, .35, 1) .24s both; }
.snv .mega__panel--solutions.is-active .snSol__icn.is-first svg * { animation: snDraw .9s cubic-bezier(.65, 0, .35, 1) .2s both; }
@keyframes snErase { to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { .snv .snSol__icn svg * { animation: none !important; } }

/* ---- Who We Serve: hairline grid of industries + the Home drawing on a purple stage ---- */
.snv .mega__panel--serve .srvMenu[hidden] { display: none !important; }
.snv .snSrv__list { display: flex; flex-direction: column; min-width: 0; }
.snv .snSrv__head { flex: none; }
.snv .snSrv__grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: 1px; background: #e3e4ea; }
.snv .snSrv__grid > * { background: #fff; }
.snv .snSrv__item { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 22px 24px; }
.snv .snSrv__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.snv .snSrv__desc { color: #7a7f8f; font: 400 13.5px/1.5 Inter, sans-serif; transition: color .3s; }
.snv .snSrv__item.is-cur .snSrv__desc { color: #3d4152; }
.snv .snSrv__item .snSol__name { font-size: 16px; }
.snv .snSrv__item.is-cur .snSol__name { transform: none; }
/* icons draw on open (staggered) and redraw on the current cell, like Solutions */
.snv .mega__panel--serve.is-active .snSrv__item .snSol__ic svg * { animation: snDraw .9s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.12s + var(--d, 0s)); }
.snv .snSrv__item:nth-child(2) { --d: .07s; } .snv .snSrv__item:nth-child(3) { --d: .14s; } .snv .snSrv__item:nth-child(4) { --d: .21s; } .snv .snSrv__item:nth-child(5) { --d: .28s; }
.snv .mega__panel--serve.is-active .snSrv__item.is-draw .snSol__ic svg * { animation: snDraw2 .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: 0s; }
/* stage: brand purple with the frame lines, the drawing in the middle */
.snv .snSrv__stage { aspect-ratio: 16 / 11; background:
  linear-gradient(90deg, transparent calc(25% - .5px), rgba(255, 255, 255, .07) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px), rgba(255, 255, 255, .07) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), rgba(255, 255, 255, .07) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)),
  radial-gradient(80% 90% at 50% 40%, #5a4ce0, #3b30b4 75%); }
.snv .snSrv__stage .snSol__idx { color: rgba(255, 255, 255, .6); z-index: 2; }
.snv .snSrv__art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.snv .snSrv__art.is-in { opacity: 1; transform: none; }
.snv .snSrv__art.is-out { opacity: 0; transform: translateY(-8px); transition-duration: .25s, .3s; }
.snv .snSrv__art .hpInd { width: 66%; animation: none; }
.snv .mega__panel--serve .coStrip__news { color: #4a3dcc; font-weight: 600; }
/* Serve stage v2: the same quiet lilac stage as Solutions; the drawing is redrawn in ink-purple lines on light */
.snv .snSrv__stage { background:
  linear-gradient(90deg, transparent calc(25% - .5px), rgba(74, 61, 204, .08) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px), rgba(74, 61, 204, .08) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), rgba(74, 61, 204, .08) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)),
  radial-gradient(70% 90% at 50% 55%, #efecff, #f8f7ff 70%) !important; }
.snv .snSrv__stage .snSol__idx { color: #8b82ea; }
.snv .snSrv__stage .hpInd { filter: none !important; }
.snv .snSrv__stage .hpInd .w { stroke: #4a3dcc; }
.snv .snSrv__stage .hpInd .w2 { stroke: rgba(74, 61, 204, .32); }
.snv .snSrv__stage .hpInd .f, .snv .snSrv__stage .hpInd .f2 { fill: #fff; stroke: #4a3dcc; }
.snv .snSrv__stage .hpInd .t { stroke: #24b39d; }
.snv .snSrv__stage .hpInd .tf, .snv .snSrv__stage .hpTree .pk { fill: #24b39d; }
.snv .snSrv__stage .hpRet2 .awBoard { fill: #4a3dcc; }
.snv .snSrv__stage .hpRet2 .awS { fill: #e4e0fb; }
.snv .snSrv__stage .hpRet2 .awS.awS--b { fill: #4a3dcc; }
.snv .snSrv__stage.is-on .hpTree .depBox { fill: rgba(41, 204, 178, .18); stroke: #24b39d; }
.snv .snSrv__stage.is-on .hpTree .hq { filter: none; }
.snv .snSrv__stage.is-on .hpHea .ecg { stroke: #24b39d; filter: none; }

/* ---- Products: family rail | hairline product grid | preview ---- */
.snv .mega__n3ca[hidden] { display: none !important; }
.snv .snPrd { grid-template-columns: minmax(170px, .62fr) 2.4fr minmax(290px, 1.1fr); }
.snv .snPrd__rail { display: flex; flex-direction: column; border-right: 1px solid #e3e4ea; }
.snv .snPrd__head { flex: none; }
.snv .snPrd__fam { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px; border-bottom: 1px solid #e3e4ea; }
.snv .snPrd__fam img { height: 22px; width: auto; display: block; }
.snv .snPrd__count { color: #7a7f8f; font: 500 13px/1 Inter, sans-serif; }
.snv .snPrd__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(108px, 1fr); gap: 1px; background: #e3e4ea; }
.snv .snPrd__grid > * { background: #fff; }
.snv .snPrd__item { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px; }
.snv .snPrd__logo { height: 20px; width: auto; display: block; }
.snv .snPrd__item .snSol__name { font-size: 15.5px; }
.snv .snPrd__item.is-cur .snSol__name { transform: none; }
/* products: the items show at once (no staggered reveal) */
.snv .mega__panel--products.is-active .snPrd__item { animation: none !important; }
.snv .snPrd__stage { display: grid; place-items: center; }
.snv .snPrd__big { position: absolute; left: 50%; top: 50%; width: 58%; max-height: 40%; object-fit: contain; transform: translate(-50%, -40%); opacity: 0; transition: opacity .35s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.snv .snPrd__big.is-in { opacity: 1; transform: translate(-50%, -50%); }
.snv .snPrd__big.is-out { opacity: 0; transform: translate(-50%, -60%); transition-duration: .22s, .3s; }
.snv .mega__panel--products .coStrip__news { color: #4a3dcc; font-weight: 600; }
.snv .snPrd__fam { height: auto !important; flex: none; }
/* family rail: its own marker (not the grid's corner brackets): a purple edge bar on the left and a
   chevron pointing at the grid it controls */
.snv .snPrd__fam { position: relative; }
.snv .snPrd__fam::after { content: none !important; }
.snv .snPrd__fam::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #4a3dcc; transform: scaleY(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.snv .snPrd__fam.is-cur::before { transform: scaleY(1); }
.snv .snPrd__fam .snPrd__chev { position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #4a3dcc; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.snv .snPrd__fam.is-cur .snPrd__chev { opacity: 1; transform: none; }
.snv .snPrd__fam:not(.is-cur) img { filter: grayscale(1); opacity: .55; }
.snv .snPrd__fam.is-cur .snPrd__count { color: #4a3dcc; }
.snv .snPrd__fam .snPrd__chev { display: none !important; }
.snv .snPrd__fam::before { top: 0 !important; bottom: 0 !important; border-radius: 0 !important; }

/* ---- Company v2: same visuals, set in the hairline frame like the other panels (no card boxes) ---- */
.snv .mega__panel--company .mega__company { gap: 0 !important; padding: 0 !important; margin: 0 var(--pad-x); border-left: 1px solid #e3e4ea; border-right: 1px solid #e3e4ea; }
.snv .mega__panel--company .coCard { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.snv .mega__panel--company .coCard + .coCard { border-left: 1px solid #e3e4ea !important; }
.snv .mega__panel--company .coCard:hover { box-shadow: none !important; }
/* Company v3 */
.snv .mega__panel--company .coCard__icon { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; padding: 0 !important; }
.snv .mega__panel--company .coCard__icon img { display: none !important; }
.snv .snCoIc { width: 30px; height: 30px; display: block; color: var(--co, #4a3dcc); overflow: visible; }
.snv .snCoIc * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.snv .mega__panel--company.is-active .snCoIc * { animation: snDraw .9s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.15s + var(--i, 0) * .08s); }
.snv .mega__panel--company.is-active .coCard.is-draw .snCoIc * { animation: snDraw2 .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: 0s; }
/* one continuous Careers line: the front pieces go, the line draws itself on hover */
.snv .coDeco--line2, .snv .coDeco--line3 { display: none !important; }
.snv .coDeco--line1 img { display: none; }
/* breathing room: the picture sits inset in its column instead of running into the lines */
.snv .mega__panel--company .coCard__art { margin: 0 16px 16px; border-radius: 14px; overflow: hidden; isolation: isolate; }
/* Company v3.1: no inset on the picture; columns stand apart with a gap, each with its own two side lines */
.snv .mega__panel--company .coCard__art { margin: 0 !important; border-radius: 0 !important; }
.snv .mega__panel--company .mega__company { gap: 24px !important; border-left: 0 !important; border-right: 0 !important; }
.snv .mega__panel--company .coCard, .snv .mega__panel--company .coCard + .coCard { border-left: 1px solid #e3e4ea !important; border-right: 1px solid #e3e4ea !important; }
/* Careers weave: the line runs behind the handshake and over each arm (one path, two layers, exact overlap) */

/* Careers v4: a line drawn for this picture, in two exact layers (behind / in front of the photo) */
.snv .coCard--careers .coDeco--line1 { display: none !important; }
.snv .snCoPath { position: absolute; left: 0; width: 100%; top: 50%; aspect-ratio: 398 / 266; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.snv .snCoPath--front { z-index: 3; }
.snv .snCoPath svg { width: 100%; height: 100%; display: block; overflow: visible; }
.snv .snCoPath path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.25s cubic-bezier(.45, 0, .2, 1) .05s; }
.snv .coCard:hover .snCoPath path, .snv .coCard:focus-visible .snCoPath path { stroke-dashoffset: 0; }

/* ---- Mobile drawer: same system as the desktop panels ---- */
.snv .nav.is-drawer-open .nav__cta { opacity: 0; pointer-events: none; }   /* one Get in Touch only: the one at the bottom */
.snv .snDr { gap: 0 !important; }
.snv .snDr__tag { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; color: #6b7183; font: 700 11.5px/1 "Geologica", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.snv .snDr__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }
.snv .snDr__tag:first-child { margin-top: 2px; }
.snv .snDr__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f0f0f4; color: #11131f; text-decoration: none; font: 500 16px/1.3 "Geologica", sans-serif; letter-spacing: -.005em; }
.snv .snDr__item:active { color: #4a3dcc; }
.snv .snDr__ic { flex: none; width: 24px; height: 24px; color: #4a3dcc; }
.snv .snDr__ic svg { width: 24px; height: 24px; display: block; overflow: visible; }
.snv .snDr__ic svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.snv .drawerItem.is-open .snDr__ic svg * { animation: snDraw .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.12s + var(--d, 0s)); }
.snv .snDr__logo { flex: none; height: 18px; width: 54px; object-fit: contain; object-position: left center; }
.snv .snDr__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #4a3dcc; font: 600 15px/1 "Geologica", sans-serif; text-decoration: none; }
.snv .snDr__more::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .snv .snDr__ic svg * { animation: none !important; } }
.snv .snDr__logo { width: auto; max-width: 48px; height: 16px; }
.snv .snDr .snDr__item:has(.snDr__logo) { gap: 10px; }
.snv .snDr > .snDr__item:last-child { border-bottom: 0; }
.snv .drawer__langOpt { border-bottom: 1px solid #f0f0f4; padding-top: 12px !important; padding-bottom: 12px !important; }
.snv .drawer__langOpt:last-child { border-bottom: 0; }
.snv .drawer__langOpt .lang__name { font: 500 16px/1.3 "Geologica", sans-serif; letter-spacing: -.005em; }
/* drawer lines run edge to edge: the side padding moves from the list into each row */
.snv .drawer__nav { padding-left: 0 !important; padding-right: 0 !important; }
.snv .drawerItem__head { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; }
.snv .snDr__tag, .snv .snDr__more { margin-left: var(--pad-x); margin-right: var(--pad-x); }
.snv .snDr__item, .snv .drawer__langOpt { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; }
/* drawer Products: a second accordion level per product family */
.snv .snDr__fam { border-bottom: 1px solid #f0f0f4; }
.snv .snDr__fam:last-child { border-bottom: 0; }
.snv .snDr__famHead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px var(--pad-x); background: none; border: 0; cursor: pointer; color: #4a3dcc; }
.snv .snDr__famHead img { height: 20px; width: auto; display: block; }
.snv .snDr__famCount { margin-right: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f1effd; color: #4a3dcc; font: 600 11.5px/20px "Geologica", sans-serif; text-align: center; }
.snv .snDr__famHead .drawerItem__toggle { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.snv .snDr__fam.is-open .snDr__famHead .drawerItem__toggle { transform: rotate(45deg); }
.snv .snDr__famBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.65, 0, .35, 1); }
.snv .snDr__fam.is-open .snDr__famBody { grid-template-rows: 1fr; }
.snv .snDr__famLinks { overflow: hidden; display: flex; flex-direction: column; background: #fbfaff; }
.snv .snDr__famLinks .snDr__item { padding-left: calc(var(--pad-x) + 12px) !important; }
.snv .snDr__famLinks .snDr__more { margin: 12px calc(var(--pad-x) + 12px) 16px; }
.snv .drawerItem.is-open .snDr__fam .snDr__famHead .drawerItem__toggle { transform: none; }
.snv .drawerItem.is-open .snDr__fam.is-open .snDr__famHead .drawerItem__toggle { transform: rotate(45deg); }
.snv .drawerItem[data-drawer="products"].is-open .drawerItem__links { padding-bottom: 0; }
/* corner brackets: whole-pixel strokes (1.5px rendered unevenly, so some corners looked bent) */
.snv .snSol__item::after { --l: 12px; background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--l);
  background-repeat: no-repeat; }

/* ---- frame lines: the page's left and right hairlines continue through the bar ---- */
.snv .nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); pointer-events: none; border-left: 1px solid rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07); z-index: -1; }   /* the bar is its own stacking context, so -1 sits on its background, under its content */
/* the bar always keeps a hairline underneath, hovered or not (light on the dark hero, grey once the bar is white) */
.snv .nav { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.snv .nav.nav--scrolled, .snv .nav.is-mega-open, .snv .nav.is-drawer-open { border-bottom-color: #e3e4ea; }
/* over a dark hero (bar still transparent) the frame lines turn light so they stay visible */
.snv .nav:not(.nav--scrolled):not(.is-mega-open):not(.is-drawer-open)::before { border-color: rgba(255, 255, 255, .14); }
/* the bar's content keeps clear of the frame lines: logo and button sit inside them, never on them */
.snv .nav { padding-left: calc(var(--pad-x) + 24px) !important; padding-right: calc(var(--pad-x) + 24px) !important; }
@media (max-width: 900px) { .snv .nav { padding-left: calc(var(--pad-x) + 14px) !important; padding-right: calc(var(--pad-x) + 14px) !important; } }
/* phones: the bar keeps only the logo and the menu button (Get in Touch waits at the bottom of the drawer) */
@media (max-width: 767px) { :root.snv .nav .btn.nav__cta, :root.snv.sbx-on .nav .btn.nav__cta.sbx { display: none !important; } }
/* N3CA top-level item: a small "Featured" tag; on hover a light sweeps across it */
.snv .snN3 { display: inline-flex; align-items: center; gap: 8px; }
.snv .snFeat { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(41, 204, 178, .14); color: #1f9d89; font: 600 10px/1 "Geologica", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.snv .snFeat::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); opacity: 0; }
.snv .snN3:hover .snFeat::after, .snv .snN3dr a:hover .snFeat::after { animation: snFeatSweep .8s cubic-bezier(.4, 0, .2, 1); }
@keyframes snFeatSweep { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
.snv .nav:not(.nav--scrolled):not(.is-mega-open):not(.is-drawer-open) .snFeat { background: rgba(41, 204, 178, .2); color: #29ccb2; }
.snv .snN3[aria-current="page"] { color: #4a3dcc; }
.snv .snN3dr .drawerItem__head { display: flex; align-items: center; gap: 10px; }
.snv .snPrd__all { display: none !important; }
/* with N3CA added the bar holds six items: labels never wrap, the logo never shrinks, gaps tighten on smaller desktops */
.snv .nav__item { white-space: nowrap; }
.snv .nav__brand { flex: none; }
@media (max-width: 1600px) { .snv .nav__menu > .nav__item { padding-left: 12px !important; padding-right: 12px !important; } .snv .nav__menu { gap: 4px !important; } }
@media (max-width: 1366px) {
  .snv .nav { padding-left: calc(var(--pad-x) + 12px) !important; padding-right: calc(var(--pad-x) + 12px) !important; }
  .snv .nav__menu > .nav__item { padding-left: 8px !important; padding-right: 8px !important; }
  .snv .snN3 { gap: 6px; }
}
/* small desktops (1025-1279px): tighter type, the tag and the "EN" label step aside (the flag stays) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .snv .snN3 .snFeat { display: none; }
  .snv .nav__menu > .nav__item { font-size: 14px !important; padding-left: 6px !important; padding-right: 6px !important; }
  .snv #langCurrent { display: none; }
}
.snv .snN3dr .drawerItem__head { justify-content: flex-start !important; }
/* review: the N3CA item reads on its own, no tag (the label code stays, hidden) */
.snv .snFeat { display: none !important; }
/* review (27 Oct 2026): the N3CA top-level item leaves the main nav and the drawer; N3CA stays reachable
   through Products (the n3caItem() code stays in site-nav.js, hidden here) */
.snv .snN3, .snv .snN3dr { display: none !important; }
/* the menu sits in the true centre of the bar: logo and actions share the space on either side equally */
@media (min-width: 1025px) {
  .snv .nav__brand, .snv .nav__actions { flex: 1 1 0; }
  .snv .nav__actions { justify-content: flex-end; }
  .snv .nav__menu { flex: none; }
}
/* "Explore N3CA" in the Products mega: a purple text link with an inline arrow; on hover a line draws under it and the arrow turns right */
.snv .snPrd__fam { flex-direction: column; align-items: flex-start; gap: 14px; }
.snv .snPrd__explore { white-space: nowrap; display: inline-flex !important; align-items: center; gap: 5px; color: #4a3dcc !important; font: 600 14px/1 "Geologica", sans-serif !important; letter-spacing: 0; }
.snv .snPrd__explore > span:first-child { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s cubic-bezier(.65, 0, .35, 1); }
.snv .snPrd__exploreIc { display: inline-flex; color: inherit; }
.snv .snPrd__exploreIc svg { width: 14px; height: 14px; transition: transform .45s cubic-bezier(.65, 0, .25, 1); }
.snv .snPrd__fam:hover .snPrd__explore > span:first-child { background-size: 100% 1.5px; }
.snv .snPrd__fam:hover .snPrd__exploreIc svg { transform: rotate(45deg); }
.snv .snPrd__fam .snPrd__chev { display: none !important; }
