/* ==========================================================================
   Top-nav design options A / B / C (preview, Oct 2026). Only active on html[data-nav]; the default bar is untouched.
   A = navy glass, B = light frosted (navy over dark heroes), C = edge-to-edge spectrum bar. See inc/nav-options.php.
   ========================================================================== */
@font-face { font-family:'Averta CY Web'; src:url('../fonts/om/AvertaCY-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Averta CY Web'; src:url('../fonts/om/AvertaCY-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
html[data-nav] {
	--nb-h:76px; --nb-top:12px;
	--nb-blue:#1353e9; --nb-blue-h:#2563f5; --nb-sky:#4DAAE8; --nb-green:#98C355; --nb-yellow:#F7CA50; --nb-red:#DB4B46; --nb-ink:#1D1D1B;
	--nb-spectrum:linear-gradient(90deg, #4DAAE8 0 25%, #98C355 25% 50%, #F7CA50 50% 75%, #DB4B46 75% 100%);
}
/* dark tone (A, and B/C over dark sections) */
html[data-nav="a"] .osh, html[data-nav="b"] .osh[data-tone="dark"], html[data-nav="c"] .osh[data-tone="dark"] {
	--nb-bg:rgba(10,16,32,.74); --nb-border:rgba(255,255,255,.09); --nb-shadow:0 18px 40px -18px rgba(0,0,0,.55);
	--nb-text:#fff; --nb-mute:rgba(255,255,255,.74); --nb-hover:rgba(255,255,255,.08); --nb-accent:#4DAAE8;
	--nb-panel:rgba(12,19,38,.96); --nb-solid:#0c1326; --nb-ptext:#fff; --nb-pmute:rgba(255,255,255,.7); --nb-line:rgba(255,255,255,.09);
	--nb-ic:#4DAAE8; --nb-icbg:rgba(77,170,232,.12); --nb-icring:rgba(77,170,232,.28); --nb-cardh:rgba(255,255,255,.05);
	--nb-ghost:rgba(255,255,255,.3); --nb-ghosth:rgba(255,255,255,.1); --nb-logo:none;
}
/* A over light pages: same navy, more solid so it never turns grey */
html[data-nav="a"] .osh[data-tone="light"] { --nb-bg:rgba(10,16,32,.93); }
/* light tone (B default, C over light pages) */
html[data-nav="b"] .osh, html[data-nav="c"] .osh {
	--nb-bg:rgba(255,255,255,.8); --nb-border:rgba(29,29,27,.08); --nb-shadow:0 14px 34px -16px rgba(14,20,36,.22);
	--nb-text:#1D1D1B; --nb-mute:#4A5175; --nb-hover:rgba(19,83,233,.07); --nb-accent:#1353e9;
	--nb-panel:#fff; --nb-solid:#fff; --nb-ptext:#1D1D1B; --nb-pmute:#5A6285; --nb-line:#E8EBF3;
	--nb-ic:#1353e9; --nb-icbg:#EEF3FE; --nb-icring:#D6E2FD; --nb-cardh:#F6F8FD;
	--nb-ghost:rgba(29,29,27,.2); --nb-ghosth:rgba(19,83,233,.06); --nb-logo:url('../images/site/nav-logo-dark.svg');
}

/* ---------- Shared frame ---------- */
html[data-nav] body { padding-top:calc(var(--nb-h) + var(--nb-top) * 2); }
html[data-nav] body::before { content:""; position:absolute; top:0; left:0; right:0; height:calc(var(--nb-h) + var(--nb-top) * 2); background:var(--nav-strip, transparent); pointer-events:none; }
html[data-nav] .osh { top:var(--nb-top); padding:0 20px; font-family:'Averta CY Web','Plus Jakarta Sans',sans-serif; }
html[data-nav] body.admin-bar .osh { top:calc(var(--nb-top) + 32px); }
html[data-nav] .osh__bar { height:var(--nb-h); max-width:1440px; padding:0 14px 0 30px; gap:20px; border-radius:999px; background:var(--nb-bg); border:1px solid var(--nb-border); box-shadow:var(--nb-shadow); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); transition:background .25s, border-color .25s, box-shadow .25s; }
html[data-nav] .osh__logo { width:112px; height:50px; background:var(--nb-logo) left center/contain no-repeat; }
html[data-nav] .osh__logo img { transition:opacity .2s; }
html[data-nav="b"] .osh:not([data-tone="dark"]) .osh__logo img, html[data-nav="c"] .osh:not([data-tone="dark"]) .osh__logo img { opacity:0; }
html[data-nav] .osh__nav { padding-left:0; gap:16px; }
html[data-nav] .osh__menu { gap:2px; }

/* Triggers: one ink colour, line icons in the same colour, soft pill hover, accent marker for open/current */
html[data-nav] .osh__trigger { position:relative; gap:8px; padding:10px 14px; border:0; border-radius:999px; color:var(--nb-text); font:600 16px/1.2 'Averta CY Web','Plus Jakarta Sans',sans-serif; letter-spacing:0; transition:background .15s, color .15s; }
html[data-nav] .osh__trigger .osh__ico { color:inherit !important; opacity:.78; }
html[data-nav] .osh__trigger .osh__ico svg { width:19px; height:19px; stroke-width:1.7; }
html[data-nav] .osh__chev { opacity:.55; } html[data-nav] .osh__chev svg { width:14px; height:14px; stroke-width:2; }
html[data-nav] .osh__item:hover .osh__trigger, html[data-nav] .osh__item.is-open .osh__trigger { color:var(--nb-text); background:var(--nb-hover); border:0; }
html[data-nav] .osh__item.is-open .osh__trigger .osh__ico, html[data-nav] .osh__item:hover .osh__trigger .osh__ico { opacity:1; color:var(--nb-accent) !important; }
html[data-nav] .osh__trigger::after { content:""; position:absolute; left:50%; bottom:2px; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:var(--nb-accent); transform:scaleX(0); transition:transform .2s; }
html[data-nav] .osh__item.is-current .osh__trigger::after, html[data-nav] .osh__item.is-open .osh__trigger::after { transform:scaleX(1); }
html[data-nav] .osh__trigger:focus-visible { outline:2px solid var(--nb-accent); outline-offset:2px; border-radius:999px; }

/* Actions: one primary (home blue pill) + Login as a secondary ghost pill */
html[data-nav] .osh__actions { height:auto; padding:0; gap:8px; }
html[data-nav] .osh__report { height:50px; padding:0 22px; gap:8px; background:var(--nb-blue); color:#fff !important; font:600 15.5px/1 'Averta CY Web','Plus Jakarta Sans',sans-serif; letter-spacing:0; box-shadow:0 10px 24px -10px rgba(19,83,233,.7),0 2px 6px -2px rgba(19,83,233,.35); transition:transform .18s, background .18s, box-shadow .18s; }
html[data-nav] .osh__report .osh__ico { display:none; }
html[data-nav] .osh__report::after { content:""; width:16px; height:16px; flex:none; 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='M4 12h16M14 6l6 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='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .18s; }
html[data-nav] .osh__report:hover { background:var(--nb-blue-h); transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(19,83,233,.75),0 3px 8px -2px rgba(19,83,233,.35); }
html[data-nav] .osh__report:hover::after { transform:translateX(3px); }
html[data-nav] .osh .osh__login { height:50px; padding:0 18px !important; gap:8px; background:transparent !important; border:1px solid var(--nb-ghost); box-shadow:none !important; color:var(--nb-text) !important; font:600 15.5px/1 'Averta CY Web','Plus Jakarta Sans',sans-serif !important; letter-spacing:0; text-decoration:none !important; transition:background .15s, border-color .15s; }
html[data-nav] .osh .osh__login svg { display:block !important; width:18px; height:18px; opacity:.8; }
html[data-nav] .osh .osh__login:hover { background:var(--nb-ghosth) !important; border-color:var(--nb-accent); }

/* ---------- Dropdowns: floating card under the bar, one icon style ---------- */
html[data-nav] .osh__panel { top:calc(100% + 10px); left:24px; right:24px; margin:0; padding:20px; gap:8px; border-radius:24px; background:var(--nb-panel); color:var(--nb-ptext); border:1px solid var(--nb-line); box-shadow:0 30px 60px -24px rgba(10,16,32,.45); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
html[data-nav] .osh__panel::before { top:-14px; height:14px; }
html[data-nav] .osh__panel a { color:var(--nb-ptext); }
html[data-nav] .osh__vr { background:var(--nb-line); }
html[data-nav] .osh .osh-ic { color:var(--nb-ic) !important; background:var(--nb-icbg) !important; border:1px solid var(--nb-icring); border-radius:14px; }
html[data-nav] .osh .osh-ic--64, html[data-nav] .osh .osh-ic--48 { width:44px; height:44px; }
html[data-nav] .osh .osh-ic svg { width:22px; height:22px; stroke-width:1.7; }
html[data-nav] .osh-card { gap:6px; padding:16px; border-radius:16px; transition:background .15s; }
html[data-nav] .osh-card .osh-ic { margin-bottom:8px; }
html[data-nav] .osh-card__title { font-size:17px; line-height:1.3; font-weight:600; letter-spacing:0; }
html[data-nav] .osh-card__text { font-size:14.5px; line-height:1.5; font-weight:400; color:var(--nb-pmute); }
html[data-nav] .osh-card__more { justify-content:flex-start; gap:6px; margin-top:6px; color:var(--nb-accent); font-size:14.5px; font-weight:600; letter-spacing:0; }
html[data-nav] .osh-card__more svg { width:16px; height:16px; }
html[data-nav] .osh-card:hover, html[data-nav] .osh-card.is-current { background:var(--nb-cardh); }
html[data-nav] .osh-card:hover .osh-card__title, html[data-nav] .osh-row:hover .osh-row__label, html[data-nav] .osh-row.is-current .osh-row__label { color:var(--nb-accent); }
html[data-nav] .osh-row { gap:14px; padding:10px 12px; border-radius:14px; border-bottom:0; transition:background .15s; }
html[data-nav] .osh-row:hover, html[data-nav] .osh-row.is-current { background:var(--nb-cardh); }
html[data-nav] .osh-row__label, html[data-nav] .osh-row--big .osh-row__label { font-size:16.5px; font-weight:600; letter-spacing:0; }
html[data-nav] .osh-arrow, html[data-nav] .osh-arrow--green { color:var(--nb-accent); opacity:.8; } html[data-nav] .osh-arrow svg { width:18px; height:18px; }
html[data-nav] .osh-group { gap:14px; padding:4px 12px 8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--nb-pmute); }
html[data-nav] .osh-group .osh-ic { display:none; }
html[data-nav] .osh__col { gap:4px; }
html[data-nav] .osh-feature { gap:14px; padding:12px; border:1px solid var(--nb-line); border-radius:16px; background:var(--nb-cardh); }
html[data-nav] .osh-feature:hover { background:var(--nb-hover); border-color:var(--nb-icring); }
html[data-nav] .osh-feature__txt { gap:2px; }
html[data-nav] .osh-feature__txt strong { color:var(--nb-ptext); font-size:16.5px; line-height:1.3; letter-spacing:0; }
html[data-nav] .osh-feature__txt small { color:var(--nb-pmute); font-size:14px; line-height:1.45; font-weight:400; letter-spacing:0; }
html[data-nav] .osh-feature:hover strong { color:var(--nb-accent); }

/* ---------- A: navy glass + logo-colour hairline ---------- */
html[data-nav="a"] .osh__bar::after { content:""; position:absolute; left:44px; right:44px; bottom:-1px; height:2px; border-radius:2px; background:var(--nb-spectrum); opacity:.9; -webkit-mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); pointer-events:none; }
html[data-nav="a"] .osh__panel { border-top:0; }
html[data-nav="a"] .osh__panel::after { content:""; position:absolute; left:24px; right:24px; top:0; height:2px; background:var(--nb-spectrum); opacity:.55; border-radius:2px; }

/* ---------- B: light frosted; switches to navy glass over dark sections ---------- */
html[data-nav="b"] .osh__bar { transition:background .3s, border-color .3s, box-shadow .3s; }

/* ---------- C: edge-to-edge spectrum bar (transparent on the hero, solid on scroll), logo-colour markers ---------- */
html[data-nav="c"] { --nb-top:0px; --nb-h:76px; }
html[data-nav="c"] .osh { padding:0; }
html[data-nav="c"] .osh__bar { max-width:none; border-radius:0; border:0; border-bottom:1px solid var(--nb-border); padding:0 clamp(20px,4vw,56px); }
html[data-nav="c"] .osh__bar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--nb-spectrum); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
html[data-nav="c"] .osh.is-scrolled .osh__bar::after { transform:scaleX(1); }
html[data-nav="c"] .osh:not(.is-scrolled):not(.is-mobile-open) .osh__bar { background:transparent; border-bottom-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-nav="c"] .osh:not(.is-scrolled)[data-tone="dark"] .osh__bar { background:linear-gradient(180deg, rgba(5,8,15,.35), rgba(5,8,15,0)); }
html[data-nav="c"] .osh__menu { margin:0 auto; }
html[data-nav="c"] .osh__trigger .osh__ico { display:none; }
html[data-nav="c"] .osh__trigger { padding:10px 16px 10px 26px; }
html[data-nav="c"] .osh__trigger::before { content:""; position:absolute; left:12px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--dot); opacity:.9; transition:transform .2s; }
html[data-nav="c"] .osh__item--platform { --dot:#4DAAE8; } html[data-nav="c"] .osh__item--about { --dot:#98C355; } html[data-nav="c"] .osh__item--explore { --dot:#F7CA50; } html[data-nav="c"] .osh__item--shop { --dot:#DB4B46; }
html[data-nav="c"] .osh__item:hover .osh__trigger::before, html[data-nav="c"] .osh__item.is-open .osh__trigger::before { transform:scale(1.35); }
html[data-nav="c"] .osh__trigger::after { background:var(--dot); left:26px; right:16px; width:auto; margin:0; }
html[data-nav="c"] .osh__item:hover .osh__trigger { background:transparent; }
html[data-nav="c"] .osh__panel { top:calc(100% + 1px); left:clamp(20px,4vw,56px); right:clamp(20px,4vw,56px); border-radius:0 0 24px 24px; border-top:0; }
html[data-nav="c"] .osh__item .osh__panel { box-shadow:inset 0 3px 0 var(--dot), 0 30px 60px -24px rgba(10,16,32,.45); }
html[data-nav="c"] .osh .osh-ic { color:var(--nb-ic) !important; }

/* ---------- Laptop widths ---------- */
@media (max-width:1439px) {
	html[data-nav] { --nb-h:68px; }
	html[data-nav] .osh__bar { padding-left:24px; gap:12px; }
	html[data-nav] .osh__logo { width:100px; height:44px; }
	html[data-nav] .osh__trigger { padding:9px 11px; font-size:15px; }
	html[data-nav="c"] .osh__trigger { padding:9px 12px 9px 24px; } html[data-nav="c"] .osh__trigger::before { left:10px; }
	html[data-nav] .osh__report, html[data-nav] .osh .osh__login { height:46px; font-size:14.5px !important; }
	html[data-nav] .osh__report { padding:0 18px; }
	html[data-nav] .osh .osh__login { padding:0 14px !important; }
}
@media (min-width:1024px) and (max-width:1199px) {
	html[data-nav] { --nb-h:60px; --nb-top:10px; }
	html[data-nav="c"] { --nb-top:0px; }
	html[data-nav] .osh { padding:0 12px; }
	html[data-nav="c"] .osh { padding:0; }
	html[data-nav] .osh__bar { padding:0 8px 0 18px; gap:8px; }
	html[data-nav] .osh__logo { width:88px; height:39px; }
	html[data-nav] .osh__trigger { padding:8px 8px; font-size:14px; gap:5px; }
	html[data-nav="c"] .osh__trigger { padding:8px 8px 8px 20px; } html[data-nav="c"] .osh__trigger::before { left:8px; width:6px; height:6px; margin-top:-3px; }
	html[data-nav] .osh__report, html[data-nav] .osh .osh__login { height:42px; font-size:13.5px !important; }
	html[data-nav] .osh__report { padding:0 14px; } html[data-nav] .osh__report::after { display:none; }
	html[data-nav] .osh .osh__login { padding:0 12px !important; } html[data-nav] .osh .osh__login svg { display:none !important; }
	html[data-nav] .osh__panel { left:12px; right:12px; padding:16px; }
}

/* ---------- Phone / tablet: burger + drawer ---------- */
@media (max-width:1023px) {
	html[data-nav] { --nb-h:64px; --nb-top:10px; }
	html[data-nav="c"] { --nb-top:0px; }
	html[data-nav] .osh { padding:0 12px; }
	html[data-nav="c"] .osh { padding:0; }
	html[data-nav] .osh__bar { padding:0 8px 0 18px; }
	html[data-nav="c"] .osh__bar { padding:0 10px 0 18px; }
	html[data-nav] .osh__logo { width:99px; height:44px; }
	html[data-nav] .osh__toggle { width:48px; height:48px; background:var(--nb-hover); color:var(--nb-text); border:1px solid var(--nb-border); }
	html[data-nav] .osh__nav { top:calc(100% + 8px); max-height:calc(100vh - 96px); padding:12px; gap:12px; background:var(--nb-solid); border:1px solid var(--nb-line); border-radius:22px; box-shadow:0 30px 60px -20px rgba(10,16,32,.5); }
	html[data-nav="c"] .osh__nav { top:100%; left:10px; right:10px; border-radius:0 0 22px 22px; }
	html[data-nav] .osh__menu { gap:0; margin:0; }
	html[data-nav] .osh__item { border-bottom:1px solid var(--nb-line); }
	html[data-nav] .osh__trigger { width:100%; min-height:52px; padding:14px 10px; font-size:17px; color:var(--nb-ptext); border-radius:14px; }
	html[data-nav="c"] .osh__trigger { padding-left:28px; } html[data-nav="c"] .osh__trigger::before { left:12px; }
	html[data-nav] .osh__trigger::after { display:none; }
	html[data-nav] .osh__item:hover .osh__trigger { background:transparent; color:var(--nb-ptext); }
	html[data-nav] .osh__item.is-open .osh__trigger { color:var(--nb-accent); background:transparent; }
	html[data-nav] .osh__trigger .osh__ico svg { width:20px; height:20px; }
	html[data-nav] .osh__panel, html[data-nav] .osh__item.is-open .osh__panel { padding:0 0 12px; gap:4px; background:transparent; border:0; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
	html[data-nav] .osh__panel::after { display:none; }
	html[data-nav] .osh-card, html[data-nav] .osh__col { flex:none; }
	html[data-nav] .osh-card { flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 12px; padding:10px 12px; min-height:44px; }
	html[data-nav] .osh-card .osh-ic { margin:0; width:40px; height:40px; }
	html[data-nav] .osh-card__title { font-size:16px; flex:1; }
	html[data-nav] .osh-card__text { flex:0 0 100%; padding-left:52px; font-size:14px; color:var(--nb-pmute); }
	html[data-nav] .osh-card__more { display:none; }
	html[data-nav] .osh .osh-ic--64, html[data-nav] .osh .osh-ic--48 { width:40px; height:40px; }
	html[data-nav] .osh-row, html[data-nav] .osh-row--big { min-height:48px; padding:6px 12px; }
	html[data-nav] .osh-row__label, html[data-nav] .osh-row--big .osh-row__label { font-size:16px; }
	html[data-nav] .osh-feature { padding:10px 12px; }
	html[data-nav] .osh-feature__txt strong { font-size:16px; } html[data-nav] .osh-feature__txt small { font-size:13.5px; }
	html[data-nav] .osh__actions { flex-direction:column; gap:8px; }
	html[data-nav] .osh__report, html[data-nav] .osh .osh__login { width:100%; height:52px; justify-content:center; font-size:16px !important; }
	html[data-nav] .osh .osh__login { color:var(--nb-ptext) !important; }
	/* Over a dark section the open drawer keeps the bar's tone; a light page gets the light drawer. */
}
@media (prefers-reduced-motion:reduce) {
	html[data-nav] .osh *, html[data-nav] .osh__bar::after { transition:none !important; }
}

/* ==========================================================================
   C1-C4: variations of C (html[data-nav="c"][data-navv="c1..c4"]). Always dark and premium: see-through over a dark hero,
   solid navy everywhere else. Each menu item keeps one logo colour (--dot) for its icon, marker and dropdown icons.
   ========================================================================== */
html[data-navv] .osh, html[data-navv] .osh[data-tone] {
	--nb-bg:rgba(10,16,32,.92); --nb-border:rgba(255,255,255,.08); --nb-shadow:0 18px 40px -18px rgba(0,0,0,.55);
	--nb-text:#fff; --nb-mute:rgba(255,255,255,.74); --nb-hover:rgba(255,255,255,.07); --nb-accent:#4DAAE8;
	--nb-panel:rgba(11,17,34,.97); --nb-solid:#0b1122; --nb-ptext:#fff; --nb-pmute:rgba(255,255,255,.68); --nb-line:rgba(255,255,255,.08);
	--nb-cardh:rgba(255,255,255,.05); --nb-ghost:rgba(255,255,255,.32); --nb-ghosth:rgba(255,255,255,.1); --nb-logo:none;
}
html[data-nav][data-navv] .osh:not([data-x]) .osh__logo img { opacity:1; }
html[data-nav][data-navv] .osh:not(.is-scrolled):not(.is-mobile-open):not([data-tone="dark"]) .osh__bar { background:var(--nb-bg); border-bottom-color:var(--nb-border); box-shadow:var(--nb-shadow); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); }
html[data-navv] .osh__item--platform { --dot:#4DAAE8; } html[data-navv] .osh__item--about { --dot:#98C355; } html[data-navv] .osh__item--explore { --dot:#F7CA50; } html[data-navv] .osh__item--shop { --dot:#DB4B46; }
html[data-navv] .osh__trigger { padding:10px 14px; gap:9px; }
html[data-navv] .osh__trigger::before { display:none; }
html[data-nav][data-navv] .osh__trigger .osh__ico { display:inline-flex; align-items:center; justify-content:center; flex:none; color:var(--dot) !important; opacity:1; transition:transform .2s, background .2s, box-shadow .2s, filter .2s; }
html[data-navv] .osh__trigger .osh__ico svg { width:20px; height:20px; stroke-width:1.8; }
html[data-nav][data-navv] .osh__item:hover .osh__trigger .osh__ico, html[data-nav][data-navv] .osh__item.is-open .osh__trigger .osh__ico { color:var(--dot) !important; }
html[data-navv] .osh__trigger::after { left:14px; right:14px; }
html[data-navv] .osh__item:hover .osh__trigger { background:var(--nb-hover); }
/* dropdowns: the item's colour on its stripe, icons and hover text */
html[data-navv] .osh__item .osh__panel { box-shadow:inset 0 3px 0 var(--dot), 0 30px 60px -24px rgba(0,0,0,.6); }
html[data-nav][data-navv] .osh__item .osh-ic { color:var(--dot) !important; background:color-mix(in srgb, var(--dot) 13%, transparent) !important; border-color:color-mix(in srgb, var(--dot) 30%, transparent); }
html[data-navv] .osh__item .osh-card:hover .osh-card__title, html[data-navv] .osh__item .osh-row:hover .osh-row__label, html[data-navv] .osh__item .osh-feature:hover strong, html[data-navv] .osh__item .osh-card__more, html[data-navv] .osh__item .osh-arrow { color:var(--dot); }
html[data-navv] .osh__item .osh-feature:hover { border-color:color-mix(in srgb, var(--dot) 35%, transparent); }

/* C1: coloured line icons, white labels, plain dropdown icons (no tile) */
html[data-nav][data-navv="c1"] .osh__item .osh-ic { background:transparent !important; border-color:color-mix(in srgb, var(--dot) 40%, transparent); }

/* C2: icons in tinted colour squircles (Insiders icon squares) */
html[data-navv="c2"] .osh__trigger .osh__ico { width:34px; height:34px; border-radius:11px; background:color-mix(in srgb, var(--dot) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dot) 34%, transparent); }
html[data-navv="c2"] .osh__trigger .osh__ico svg { width:18px; height:18px; }
html[data-navv="c2"] .osh__trigger { padding:7px 14px 7px 8px; }
html[data-navv="c2"] .osh__item:hover .osh__trigger .osh__ico, html[data-navv="c2"] .osh__item.is-open .osh__trigger .osh__ico { background:color-mix(in srgb, var(--dot) 26%, transparent); }
html[data-nav][data-navv="c2"] .osh__item .osh-ic { border-radius:12px; background:color-mix(in srgb, var(--dot) 18%, transparent) !important; }

/* C3: coloured icons + a glowing underline in the item's colour (same as the dropdown stripe) */
html[data-navv="c3"] .osh__item:hover .osh__trigger { background:transparent; }
html[data-navv="c3"] .osh__trigger::after { left:14px; right:14px; bottom:-4px; height:3px; border-radius:3px; box-shadow:0 0 14px 1px var(--dot); }
html[data-navv="c3"] .osh__item:hover .osh__trigger::after { transform:scaleX(1); }
html[data-navv="c3"] .osh__item:hover .osh__trigger .osh__ico, html[data-navv="c3"] .osh__item.is-open .osh__trigger .osh__ico { filter:drop-shadow(0 0 6px var(--dot)); }
html[data-navv="c3"] .osh__item .osh__panel::after { content:""; position:absolute; left:0; right:0; top:0; height:40px; background:linear-gradient(180deg, color-mix(in srgb, var(--dot) 16%, transparent), transparent); pointer-events:none; border-radius:0; opacity:1; }

/* C4: duotone icons with a soft colour halo, gradient blue CTA, logo-colour line always on */
html[data-navv="c4"] .osh__trigger .osh__ico { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--dot) 30%, transparent) 0, color-mix(in srgb, var(--dot) 8%, transparent) 55%, transparent 72%); }
html[data-navv="c4"] .osh__trigger .osh__ico svg { width:19px; height:19px; filter:drop-shadow(1.5px 1.5px 0 color-mix(in srgb, var(--dot) 38%, transparent)); }
html[data-navv="c4"] .osh__trigger { padding:7px 14px 7px 8px; }
html[data-navv="c4"] .osh__item:hover .osh__trigger .osh__ico, html[data-navv="c4"] .osh__item.is-open .osh__trigger .osh__ico { transform:scale(1.08); background:radial-gradient(circle, color-mix(in srgb, var(--dot) 42%, transparent) 0, color-mix(in srgb, var(--dot) 12%, transparent) 55%, transparent 72%); }
html[data-navv="c4"] .osh__bar::after, html[data-navv="c4"] .osh:not(.is-scrolled) .osh__bar::after { transform:scaleX(1); height:2px; opacity:.95; }
html[data-navv="c4"] .osh__report { background:linear-gradient(120deg, #1353e9 0%, #2f7fe6 60%, #4DAAE8 100%); }
html[data-navv="c4"] .osh__report:hover { background:linear-gradient(120deg, #2563f5 0%, #3b8cee 60%, #63b6ec 100%); }
html[data-nav][data-navv="c4"] .osh__item .osh-ic { border-radius:50%; border-color:transparent; background:radial-gradient(circle, color-mix(in srgb, var(--dot) 26%, transparent) 0, color-mix(in srgb, var(--dot) 8%, transparent) 70%) !important; }
html[data-navv="c4"] .osh__item .osh-ic svg { filter:drop-shadow(1.5px 1.5px 0 color-mix(in srgb, var(--dot) 38%, transparent)); }

@media (max-width:1439px) {
	html[data-navv] .osh__trigger { padding:9px 10px; gap:7px; }
	html[data-navv="c2"] .osh__trigger, html[data-navv="c4"] .osh__trigger { padding:6px 11px 6px 6px; }
}
@media (min-width:1024px) and (max-width:1199px) {
	html[data-navv] .osh__trigger { padding:8px 6px; gap:5px; }
	html[data-navv] .osh__trigger .osh__ico svg { width:17px; height:17px; }
	html[data-navv="c2"] .osh__trigger .osh__ico, html[data-navv="c4"] .osh__trigger .osh__ico { width:28px; height:28px; }
	html[data-navv="c2"] .osh__trigger, html[data-navv="c4"] .osh__trigger { padding:6px 7px 6px 4px; }
}
@media (max-width:1023px) {
	html[data-navv] .osh__trigger, html[data-navv="c2"] .osh__trigger, html[data-navv="c4"] .osh__trigger { padding:10px 10px; gap:12px; }
	html[data-navv] .osh__item.is-open .osh__trigger { color:#fff; }
	html[data-navv] .osh__trigger .osh__ico svg { width:21px; height:21px; }
	html[data-navv] .osh__item .osh__panel, html[data-navv] .osh__item.is-open .osh__panel { box-shadow:none !important; }
	html[data-navv="c3"] .osh__item .osh__panel::after { display:none; }
	html[data-navv="c3"] .osh__item.is-open .osh__trigger::after { display:block; left:10px; right:auto; width:28px; bottom:4px; }
}