.grouped-nav{display:flex;align-items:center;gap:8px;margin-left:auto;color:#a0d4f5}.nav-toggle{display:none}.nav-group{position:static}.nav-group>summary{list-style:none;display:flex;align-items:center;gap:16px;padding:13px 17px;font:12px Inter,Arial,sans-serif;cursor:pointer;border-radius:26px;min-height:44px}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary span{font-size:17px;color:#94d3f6}.nav-group[open]>summary{background:#99d4f715;color:#fff}.nav-group[open]>summary span{transform:rotate(45deg)}.nav-panel{position:absolute;top:calc(100% + 12px);right:0;width:min(100%,1050px);max-height:calc(100dvh - 150px);overflow:auto;overscroll-behavior:contain;background:#0b1722f9;backdrop-filter:blur(24px);border:1px solid #8acef533;border-radius:16px;padding:26px 30px 32px;box-shadow:0 26px 70px #0008}.nav-panel-heading{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #9dd1f924;font:9px/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#6bbcef}.nav-panel-heading a{letter-spacing:0;color:#b7e0fa;font:12px Inter,Arial,sans-serif}.nav-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;padding-top:20px}.nav-column{min-width:0}.nav-column h2{font:10px/1.5 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#70c0f1;margin:0 0 10px}.nav-column a{display:block;padding:10px 0;min-height:40px;font:13px/1.5 Inter,Arial,sans-serif;color:#a5d7f6;text-decoration:none;border-bottom:1px solid #88caf412;overflow-wrap:anywhere}.nav-column a:hover,.nav-column a[aria-current=page]{color:#fff;background:#98d3f90a}.nav-group a:focus-visible,.nav-group summary:focus-visible,.nav-toggle:focus-visible{outline:2px solid #b2e0ff;outline-offset:3px}.sub-header{position:relative}.landing-header .grouped-nav,.landing-header .grouped-nav *{cursor:auto!important}.landing-header .grouped-nav a,.landing-header .grouped-nav summary,.landing-header .nav-toggle{cursor:pointer!important}
@media(max-width:1100px){.nav-group>summary{gap:10px;padding:12px}.grouped-nav{gap:2px}}
@media(max-width:850px){.nav-toggle{margin-left:auto;display:flex;align-items:center;gap:20px;border:1px solid #97d4f935;border-radius:30px;background:none;color:#b6e1fb;font:12px Inter,Arial,sans-serif;padding:0 18px;min-height:44px}.nav-toggle span{font-size:20px}.grouped-nav{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;max-height:calc(100dvh - 115px);overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#09121b;border:1px solid #91d0f828;border-radius:16px;box-shadow:0 20px 45px #0008}.menu-open .grouped-nav{display:block}.nav-group>summary{justify-content:space-between;padding:13px 12px;min-height:48px;font-size:14px}.nav-panel{position:static;width:auto;max-height:none;overflow:visible;padding:14px 12px 24px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}.nav-panel-heading{font-size:8px}.nav-columns{grid-template-columns:1fr;gap:25px}.nav-column a{min-height:44px;padding:11px 0;font-size:13px}.nav-column h2{font-size:9px}}

.sub-header a.sub-brand,.sub-header a.sub-brand *{cursor:default!important}

/* Landing-only launch turns unpublished page links into spans; keep them listed as items. */
.nav-column span{display:block;padding:10px 0;min-height:40px;box-sizing:border-box;font:13px/1.5 Inter,Arial,sans-serif;color:#5fb3ea;border-bottom:1px solid #88caf412;overflow-wrap:anywhere}
@media(max-width:850px){.nav-column span{min-height:44px;padding:11px 0}}
.nav-column :is(a,span) small{display:block;margin-top:2px;font:11px/1.4 Inter,Arial,sans-serif;color:#52afe9}

/* Easier menu: a short intro on the left, plain sentence-case headings, clear hover states. */
.nav-panel{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;width:min(100%,1080px);padding:28px 30px}
.nav-panel-intro{display:flex;flex-direction:column;gap:10px;padding-right:28px;border-right:1px solid #9dd1f91f}
.nav-panel-intro p{margin:0;font:13px/1.55 Inter,Arial,sans-serif;color:#7ac1ef}
.nav-panel-intro .nav-panel-title{font:400 22px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#eef7fc}
.nav-panel-intro>:is(a,span){margin-top:auto;padding-top:14px;font:500 13px Inter,Arial,sans-serif;color:#c2e8fc;text-decoration:none}
.nav-panel-intro>a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.nav-columns{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 24px;padding-top:0}
.nav-column h2{font:500 12px/1.4 Inter,Arial,sans-serif;text-transform:none;letter-spacing:0;color:#4aabe8;margin:0 0 8px}
.nav-column :is(a,span){border-bottom:0;border-radius:10px;padding:9px 10px;margin:0 -10px;min-height:0;font-size:14px;color:#c4e7fb}
.nav-column a{transition:background 180ms,color 180ms}
.nav-column a:hover,.nav-column a[aria-current=page]{background:#98d3f914;color:#fff}
.nav-column span{color:#75bbed}
@media(max-width:850px){
 .nav-panel{display:block;padding:6px 12px 18px}
 .nav-panel-intro{padding:0 0 14px;margin-bottom:14px;border-right:0;border-bottom:1px solid #9dd1f91f;gap:6px}
 .nav-panel-intro .nav-panel-title{display:none}
 .nav-panel-intro>:is(a,span){padding-top:2px}
 .nav-columns{grid-template-columns:1fr;gap:18px}
 .nav-column :is(a,span){min-height:44px;padding:11px 10px}
}
@media(prefers-reduced-motion:reduce){.nav-column a{transition:none}}
/* Menu text is not selectable; descriptions inside a link keep the link's pointer. */
.grouped-nav .nav-panel,.grouped-nav summary{-webkit-user-select:none;user-select:none}
.grouped-nav .nav-panel :is(p,h2,small,span){cursor:default!important}
.grouped-nav .nav-panel a,.grouped-nav .nav-panel a *{cursor:pointer!important}
/* At most three even columns per panel, so lists line up instead of wrapping under each other. */
@media(min-width:851px){.nav-columns{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* Open motion (closing is animated in navigation.js). */
@media(prefers-reduced-motion:no-preference){
 @media(min-width:851px){.nav-group[open]>.nav-panel{animation:nav-pop-in 260ms cubic-bezier(.22,1,.36,1) both;transform-origin:50% 0}}
 @media(max-width:850px){.menu-open .grouped-nav{animation:nav-pop-in 280ms cubic-bezier(.22,1,.36,1) both;transform-origin:50% 0}}
 .nav-group>summary span{transition:transform 260ms cubic-bezier(.22,1,.36,1)}
 .nav-panel a{transition:background-color 200ms,color 200ms,translate 200ms}
}
@keyframes nav-pop-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
/* Press feedback on everything clickable in the header. */
@media(prefers-reduced-motion:no-preference){.nav-group>summary,.nav-toggle,.language-trigger{transition:scale 120ms ease,background-color 200ms}.nav-group>summary:active,.nav-toggle:active,.language-trigger:active{scale:.96}}
/* Four-column panels (Products) stay on one row on wide screens. */
@media(min-width:1100px){.nav-columns:has(>.nav-column:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Space between dropdown items so hover/current cards never touch. */
.nav-column{display:flex;flex-direction:column;gap:6px}
.nav-column h2{margin-bottom:4px}

/* 30 Oct phone header (Vic): language chip + Menu button as one matched pair; menu and language picker open as
   full-width sheets under the header with the page dimmed behind. Phone only; desktop is unchanged. */
@media(max-width:850px){
 .landing-header{--hdr-lift:16px;--hdr-h:52px}
 .sub-header{--hdr-lift:0px;--hdr-h:86px}
 :is(.landing-header,.sub-header) .nav-toggle{height:40px;min-height:40px;gap:10px;padding:0 14px 0 16px;border:1px solid #97d4f930;border-radius:999px;background:#07111dcc;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#e1edff;font:500 13px/1 Inter,Arial,sans-serif;letter-spacing:.01em}
 :is(.landing-header,.sub-header) .nav-toggle span{position:relative;display:block;width:16px;height:10px;font-size:0;color:transparent}
 :is(.landing-header,.sub-header) .nav-toggle span::before,:is(.landing-header,.sub-header) .nav-toggle span::after{content:"";position:absolute;left:0;right:0;top:1px;height:1.5px;border-radius:2px;background:#9ed8ff;transition:top 260ms cubic-bezier(.22,1,.36,1),transform 260ms cubic-bezier(.22,1,.36,1),right 260ms}
 :is(.landing-header,.sub-header) .nav-toggle span::after{top:7.5px;right:5px}
 .menu-open .nav-toggle{border-color:#329fff80!important;background:#0b1d33e6!important}
 .menu-open .nav-toggle span::before{top:4.25px;transform:rotate(45deg)}
 .menu-open .nav-toggle span::after{top:4.25px;right:0;transform:rotate(-45deg)}
 /* Menu sheet: spans the screen under the header and dims the page. */
 :is(.landing-header,.sub-header) .grouped-nav{position:absolute;z-index:-1;top:calc(-1 * var(--hdr-lift));left:calc(50% - 50vw);right:calc(50% - 50vw);max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--hdr-lift) + var(--hdr-h) + 14px) 7vw 28px;border:0;border-bottom:1px solid #329fff2e;border-radius:0 0 28px 28px;background:radial-gradient(120% 60% at 100% 0,#0066ff24,transparent 70%),#050b14;box-shadow:0 0 0 100vmax #02050ac2,0 30px 60px #000a}
 html:has(.menu-open){overflow:hidden}
 :is(.landing-header,.sub-header) .nav-group{border-bottom:1px solid #9dd1f91a}
 :is(.landing-header,.sub-header) .nav-group:last-child{border-bottom:0}
 :is(.landing-header,.sub-header) .nav-group>summary{min-height:60px;padding:0 2px;border-radius:0;background:none!important;color:#e9f2ff;font:400 21px/1.2 Inter,Arial,sans-serif;letter-spacing:-.01em}
 :is(.landing-header,.sub-header) .nav-group>summary span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #97d4f930;border-radius:50%;color:#9ed8ff;font-size:16px;transition:transform 260ms cubic-bezier(.22,1,.36,1),background 200ms}
 :is(.landing-header,.sub-header) .nav-panel{padding:2px 2px 20px}
}
@media(max-width:850px) and (prefers-reduced-motion:reduce){:is(.landing-header,.sub-header) .nav-toggle span::before,:is(.landing-header,.sub-header) .nav-toggle span::after,:is(.landing-header,.sub-header) .nav-group>summary span{transition:none}}
/* Phones: the menu opens as a full-screen sheet; on the landing page the language list sits at its foot. */
@media(max-width:850px){
 :is(.landing-header,.sub-header) .grouped-nav{height:100dvh;max-height:none;border-bottom:0;border-radius:0;box-shadow:none;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
 .menu-open .grouped-nav{display:flex;flex-direction:column}
 .menu-open .grouped-nav>.nav-group{flex:none}
}
@media(max-width:850px){.menu-open .grouped-nav>.nav-group{align-self:stretch;width:auto;margin:0}}
/* Phones: each menu group opens as its own screen that slides in over the list (drill-down, after Voiso's mobile menu):
   a back row, an image title card, then each link as an icon row with its description. CTAs sit under the list. */
@media(max-width:850px){
 .menu-open .grouped-nav:has(.nav-group[open]){overflow:hidden}
 :is(.landing-header,.sub-header) .nav-group>.nav-panel{position:absolute;z-index:1;inset:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--hdr-lift) + var(--hdr-h) + 10px) 7vw calc(32px + env(safe-area-inset-bottom,0px));scrollbar-width:none;background:radial-gradient(120% 50% at 100% 0,#0066ff2e,transparent 70%),#050b14;animation:nav-drill-in 320ms cubic-bezier(.22,1,.36,1) both}
 /* Title card: the section's hub image under a dark fade, like Voiso's story cards. */
 :is(.landing-header,.sub-header) .nav-panel-intro{position:relative;gap:8px;min-height:188px;justify-content:flex-end;margin:0 0 24px;padding:20px;border:1px solid #329fff38;border-radius:22px;background:linear-gradient(180deg,#050b1440 0%,#050b14d9 62%,#050b14f2 100%),var(--nav-art,none) center/cover,#0b2443;overflow:hidden}
 :is(.landing-header,.sub-header) .nav-group:nth-of-type(1) .nav-panel-intro{--nav-art:url("../images/hub-products.webp")}
 :is(.landing-header,.sub-header) .nav-group:nth-of-type(2) .nav-panel-intro{--nav-art:url("../images/hub-use-cases.webp")}
 :is(.landing-header,.sub-header) .nav-group:nth-of-type(3) .nav-panel-intro{--nav-art:url("../images/hub-services.webp")}
 :is(.landing-header,.sub-header) .nav-group:nth-of-type(4) .nav-panel-intro{--nav-art:url("../images/hub-insights.webp")}
 :is(.landing-header,.sub-header) .nav-group:nth-of-type(5) .nav-panel-intro{--nav-art:url("../images/co-about.webp")}
 :is(.landing-header,.sub-header) .nav-panel-intro .nav-panel-title{display:block;font:400 30px/1.1 'Space Grotesk',sans-serif;color:#f1f8ff}
 :is(.landing-header,.sub-header) .nav-panel-intro p{font-size:14px;line-height:1.5;color:#c3d9ec}
 :is(.landing-header,.sub-header) .nav-panel-intro>:is(a,span){align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:0 18px;min-height:44px;border-radius:999px;background:#e8f6ff;color:#06111d;font:500 14px/1 Inter,Arial,sans-serif;text-decoration:none}
 /* Link groups: a labelled list of icon rows. */
 :is(.landing-header,.sub-header) .nav-columns{display:flex;flex-direction:column;gap:24px;padding:0}
 :is(.landing-header,.sub-header) .nav-column{display:flex;flex-direction:column;gap:2px}
 :is(.landing-header,.sub-header) .nav-column h2{margin:0 2px 8px;color:#7fa6c9;font:10px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
 :is(.landing-header,.sub-header) .nav-column :is(a,span):not(.nav-ico){position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;min-height:56px;margin:0 -8px;padding:8px 36px 8px 8px;border:0;border-radius:14px;background:none;color:#eef6ff;font:500 15px/1.3 Inter,Arial,sans-serif;animation:nav-card-in 360ms cubic-bezier(.22,1,.36,1) both}
 :is(.landing-header,.sub-header) .nav-column :is(a,span):not(.nav-ico)>.nav-ico{grid-row:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid #329fff40;border-radius:12px;background:linear-gradient(150deg,#0b2443,#081627);color:#5fd2ff}
 :is(.landing-header,.sub-header) .nav-ico svg{width:20px;height:20px}
 :is(.landing-header,.sub-header) .nav-column :is(a,span) small{grid-column:2;margin-top:2px;font:400 12px/1.4 Inter,Arial,sans-serif;color:#86b2d4}
 :is(.landing-header,.sub-header) .nav-column a::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid #5fd2ff;border-right:1.5px solid #5fd2ff;transform:rotate(45deg);opacity:.7}
 :is(.landing-header,.sub-header) .nav-column a:is(:active,[aria-current=page]){background:#0b1d33}
 :is(.landing-header,.sub-header) .nav-column:nth-child(2) :is(a,span){animation-delay:60ms}
 :is(.landing-header,.sub-header) .nav-column:nth-child(3) :is(a,span){animation-delay:120ms}
 /* Back row inside each section screen (built in navigation.js), so the list underneath never moves. */
 .nav-back{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 12px;padding:0;border:0;background:none;color:#e1edff;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
 .nav-back span{position:relative;width:30px;height:30px;border:1px solid #329fff66;border-radius:50%;background:#0b1d33e6}
 .nav-back span::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;box-sizing:border-box;border-left:1.5px solid #9ed8ff;border-bottom:1.5px solid #9ed8ff;transform:translate(-30%,-50%) rotate(45deg)}
 /* No scrollbars on the menu screens; they still scroll by touch. */
 :is(.landing-header,.sub-header) .grouped-nav{scrollbar-width:none}
 :is(.landing-header,.sub-header) :is(.grouped-nav,.nav-panel)::-webkit-scrollbar{display:none}
 /* Menu button without an outline. */
 :is(.landing-header,.sub-header) .nav-toggle,.menu-open .nav-toggle{border:0!important}
 /* The +/× marker is drawn (two bars) instead of a text glyph, so it sits dead centre in its circle. */
 :is(.landing-header,.sub-header) .nav-group>summary span{position:relative;font-size:0;color:transparent}
 :is(.landing-header,.sub-header) .nav-group>summary span::before,:is(.landing-header,.sub-header) .nav-group>summary span::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;border-radius:1px;background:#9ed8ff}
 :is(.landing-header,.sub-header) .nav-group>summary span::after{transform:rotate(90deg)}
 /* CTAs under the menu list (built in navigation.js). */
 .menu-cta{display:grid;gap:10px;align-self:stretch;width:auto;margin-top:auto;padding-top:28px}
 :is(.landing-header,.sub-header) .nav-column :is(a,span):not(.nav-ico):has(small)>.nav-ico{grid-row:1 / span 2}
 .menu-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;font:500 15px/1 Inter,Arial,sans-serif;text-decoration:none}
 .menu-cta a:first-child{background:#e8f6ff;color:#06111d}
 .menu-cta a+a{border:1px solid #97d4f940;color:#e1edff}
}
@media(min-width:851px){.nav-ico,.menu-cta,.nav-back{display:none}}
@keyframes nav-drill-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes nav-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:850px) and (prefers-reduced-motion:reduce){:is(.landing-header,.sub-header) .nav-group>.nav-panel,:is(.landing-header,.sub-header) .nav-column :is(a,span){animation:none}}