/* Korv Glanz pages only: the header in the navy and blue theme, with a Case studies menu.
   The ids used by the shared menu script (productsBtn, megaMenu, mobileMenu ...) are unchanged. */

.kg-header {
  /* a pane of glass floating over the top of the navy hero, inset to the hero's own margins */
  position: fixed; top: 14px; left: 26px; right: 26px; z-index: 60; border-radius: 22px; color: #EAF2FF; font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgba(12, 26, 66, .38);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(160, 196, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 50px -24px rgba(0, 0, 0, .7);
  transition: background .35s, box-shadow .35s, border-color .35s;
}
/* once the page scrolls, the glass thickens so text under it can't fight the menu */
.kg-header.is-scrolled { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(8, 18, 48, .72); border-color: rgba(160, 196, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -24px rgba(0, 0, 0, .85); }
.kg-header::after { content: ''; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(111, 227, 255, .7), transparent); pointer-events: none; }
@media (max-width: 767px) { .kg-header { top: 10px; left: 16px; right: 16px; border-radius: 18px; } }
.kg-bar { margin: 0 auto; padding: 0 12px 0 20px; height: 62px; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .kg-bar { height: 68px; padding: 0 12px 0 26px; } }
/* the header no longer takes up room, so the heroes start a little lower */
.journey .beat-hero, .cs-hero > .wrap { padding-top: 92px; }
@media (min-width: 768px) { .journey .beat-hero, .cs-hero > .wrap { padding-top: 104px; } }
section[id] { scroll-margin-top: 100px; }
.kg-logo img { height: 38px; width: auto; display: block; }
@media (min-width: 768px) { .kg-logo img { height: 44px; } }

.kg-nav { display: none; align-items: center; gap: 6px; height: 100%; }
@media (min-width: 768px) { .kg-nav { display: flex; } }
.kg-item { position: relative; height: 100%; display: flex; align-items: center; }
.kg-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #CFE0FF; background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; }
.kg-link:hover, .kg-item:hover > .kg-link, .kg-item:focus-within > .kg-link, .kg-link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); }
.kg-link svg { width: 15px; height: 15px; transition: transform .25s; }
.kg-item:hover > .kg-link svg, .kg-item:focus-within > .kg-link svg { transform: rotate(180deg); }
.kg-cta { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #2E6FEE, #1A56D1); box-shadow: 0 0 0 1px rgba(111, 168, 255, .35), 0 10px 24px -10px rgba(29, 95, 224, .9); transition: transform .2s, box-shadow .2s; }
.kg-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(111, 168, 255, .5), 0 14px 30px -10px rgba(51, 195, 240, .8); }

/* drop-down panels: open on hover or keyboard focus */
.kg-panel { position: absolute; top: calc(100% + 4px); right: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s, visibility 0s .25s; }
.kg-item:hover > .kg-panel, .kg-item:focus-within > .kg-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s; }
.kg-card { padding: 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(9, 20, 54, .95); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(141, 182, 255, .22); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -30px rgba(47, 123, 255, .7); }

/* case studies */
.kg-cases { width: min(760px, 92vw); }
.kg-cases-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8DB6FF; }
.kg-cases-head a { color: #6FC3FF; letter-spacing: .04em; }
.kg-cases-head a:hover { color: #fff; }
.kg-cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kg-case { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.kg-case:hover, .kg-case:focus-visible { background: rgba(47, 123, 255, .12); border-color: rgba(111, 168, 255, .3); outline: none; }
.kg-case[aria-current="page"] { background: rgba(47, 123, 255, .16); border-color: rgba(111, 168, 255, .4); }
.kg-case-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #8DB6FF; background: rgba(79, 139, 255, .15); transition: background .2s, color .2s; }
.kg-case:hover .kg-case-ic, .kg-case[aria-current="page"] .kg-case-ic { background: #1D5FE0; color: #fff; }
.kg-case-ic svg { width: 19px; height: 19px; }
.kg-case small { display: block; font: 500 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #6F8CC4; }
.kg-case b { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; }

/* products: the shared mega menu, re-dressed; product logos sit on light tiles so they stay readable */
.kg-header #megaMenu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: auto; border-radius: 22px; border: 1px solid rgba(160, 196, 255, .22); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(9, 20, 54, .95); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.kg-header #megaMenu > div { padding-top: 26px; padding-bottom: 26px; }
/* the products menu spans the whole header, so its wrapper must not be its positioning box */
.kg-header #productsWrapper { position: static; }
/* a hover bridge across the gap, so the menu doesn't close on the way down */
.kg-header #megaMenu::before, .kg-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.kg-header #megaMenu a { border: 1px solid transparent; }
.kg-header #megaMenu a:hover { background: rgba(47, 123, 255, .12); border-color: rgba(111, 168, 255, .3); }
.kg-header #megaMenu img { padding: 8px 10px; border-radius: 12px; background: #fff; box-sizing: content-box; height: 36px; }
.kg-header #megaMenu h4 { color: #fff; }
.kg-header #megaMenu a:hover h4 { color: #6FC3FF; }
.kg-header #megaMenu p { color: #9FB3D9; }

/* phones */
.kg-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; font-size: 22px; line-height: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(141, 182, 255, .22); }
@media (min-width: 768px) { .kg-burger { display: none; } }
.kg-burger svg { width: 24px; height: 24px; }
.kg-header #mobileMenu { border-top: 1px solid rgba(160, 196, 255, .16); padding: 10px 18px 18px; max-height: calc(100vh - 100px); overflow-y: auto; }
.kg-header.menu-open { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(8, 18, 48, .92); }
.kg-m-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; font-size: 16px; font-weight: 600; color: #fff; background: none; border: 0; border-bottom: 1px solid rgba(141, 182, 255, .12); }
.kg-m-toggle svg { width: 20px; height: 20px; transition: transform .25s; color: #8DB6FF; }
.kg-m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.kg-m-list { padding: 8px 0 8px 12px; margin-left: 4px; border-left: 2px solid rgba(79, 139, 255, .35); }
.kg-m-list a { display: block; padding: 8px 6px; font-size: 15px; color: #CFE0FF; }
.kg-m-list a small { display: block; font: 500 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #6F8CC4; }
.kg-m-list a[aria-current="page"] { color: #6FC3FF; }
.kg-m-cta { display: block; margin-top: 16px; padding: 13px; border-radius: 999px; text-align: center; font-weight: 600; color: #fff; background: linear-gradient(180deg, #2E6FEE, #1A56D1); }
@media (prefers-reduced-motion: reduce) { .kg-panel, .kg-link svg, .kg-m-toggle svg { transition: none; } }

/* ---------- edge to edge: no white frame, so the glass header is the only rounded shape ---------- */
body { background: var(--navy, #07102A); }
.journey, .cs-hero, .eo-hero { margin: 0; border-radius: 0; }
.journey::after, .cs-hero::after, .eo-hero::after { display: none; }
.deep { margin: 0; }
footer.bg-gray-900 { margin: 0; border-radius: 0; }
@media (max-width: 767px) {
  .journey, .cs-hero, .eo-hero { margin: 0; border-radius: 0; }
  .deep { margin: 0; }
  footer.bg-gray-900 { margin: 0; border-radius: 0; }
}
/* the header sits an even 14px in from the top and sides; its corners match the cards below */
.kg-header { top: 14px; left: 14px; right: 14px; border-radius: 20px; }
@media (min-width: 1440px) { .kg-header { left: calc((100vw - 1412px) / 2); right: calc((100vw - 1412px) / 2); } }
@media (max-width: 767px) { .kg-header { top: 10px; left: 10px; right: 10px; border-radius: 16px; } }