/* the shared Kartel site nav = the kartel.ai bar, ported 1:1 from public/cse/cse.css (.nav → .knav, tokens resolved) and
   driven by the same two scripts from cse.js (knav.js). Dark glass by default, .over (clear) while a hero film sits under
   it, .light (white glass, ink text) over light sections; the probe reads the section under the bar on every scroll.
   Pages load this file + knav.js once and carry no inline copy. The markup may carry the landing state (light/over) so the
   first frame is already right; the script recomputes it immediately. */
html,body{overflow-x:clip}  /* mock.css's overflow-x:hidden made body the scroll container and let the sticky bar scroll off */
.knav,.knav *{box-sizing:border-box}
.knav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(22px,4.5vw,64px);color:#FAFAFA;background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.12);font-family:'InterVariable',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-optical-sizing:auto;line-height:1.2;-webkit-font-smoothing:antialiased}
@media (min-width:1200px){.knav{min-height:82px}}
.knav-logo{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.knav-logo img{display:block;height:16px;width:auto}
.knav-links{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center;font-size:14px;font-weight:700;letter-spacing:-.03em}
.knav-links>*{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.knav-links>a{color:inherit;text-decoration:none}
.knav-links a:hover,.knav-links button:hover{color:#F04A3C}
.knav-links a[aria-current="page"]{color:#F04A3C}
.knav-drop{position:relative}
.knav-drop-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.knav-drop-btn svg{transition:transform .2s}
/* hover is the .hov class set by knav.js after real mouse movement on this page (CSS :hover re-opened the menu on the next page while the cursor was still parked over Products) */
.knav-drop.hov .knav-drop-btn svg,.knav-drop.open .knav-drop-btn svg{transform:rotate(180deg)}
.knav-drop-menu{position:absolute;top:100%;right:0;min-width:300px;display:none;flex-direction:column;padding:8px;background:#0A0A0A;border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 12px 28px -12px rgba(10,10,10,.5)}
.knav-drop.hov .knav-drop-menu,.knav-drop.open .knav-drop-menu{display:flex}
.knav-drop-menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:8px;color:#FAFAFA;text-decoration:none}
.knav-drop-menu a:hover{background:rgba(255,255,255,.06);color:inherit}
.knav-drop-menu a b{font-size:14px}
.knav-drop-menu a:hover b{color:#F04A3C}
.knav-drop-menu a small{font-size:12px;font-weight:500;color:#D4D4D4;line-height:1.4}
.knav-drop-menu a[aria-current]{background:rgba(255,255,255,.06)} .knav-drop-menu a[aria-current] b{color:#F04A3C}
.knav-drop-h{display:block;padding:10px 14px 4px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#A3A3A3}
.knav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;background:#F04A3C;color:#FFFFFF;font-weight:700;font-size:14px;letter-spacing:-.01em;border-radius:8px;box-shadow:0 10px 16px -12px rgba(10,10,10,.4);text-decoration:none;transition:background .2s}
.knav-cta:hover,.knav-links .knav-cta:hover{background:#C0392B;color:#FFFFFF}
.knav .theme-toggle{display:none}
.knav-burger,.knav-right{display:none}
/* the glass goes clear over a hero film (the observer in knav.js toggles .over while the hero is under the bar) */
.knav.over{background:rgba(10,10,10,.14);border-bottom-color:rgba(255,255,255,.06)}
.knav.over.open{background:rgba(10,10,10,.94)}
/* the studio hero tucks under the bar like #hero.wall on kartel.ai, so the clear glass sits over the film */
.swall{margin-top:calc(-1 * var(--bar-h,82px));padding-top:calc(var(--bar-h,82px) + clamp(72px,10vh,120px))}
@media (max-width:900px){.swall{padding-top:calc(var(--bar-h,82px) + 56px)}}
/* .light: white glass with ink text over a light section */
.knav.light{background:rgba(255,255,255,.74);border-bottom-color:rgba(10,10,10,.08);color:#171717}
.knav.light .knav-logo img{filter:invert(1)}
.knav.light .knav-burger{color:#171717}
.knav.light .knav-links a,.knav.light .knav-links button{color:#171717} .knav.light .knav-links a[aria-current="page"],.knav.light .knav-links a:hover,.knav.light .knav-links button:hover{color:#F04A3C} .knav.light .knav-links a.knav-cta,.knav.light .knav-links a.knav-cta:hover{color:#FFFFFF}
.knav.light .knav-drop-menu a{color:#FAFAFA} .knav.light .knav-drop-menu a:hover b,.knav.light .knav-drop-menu a[aria-current] b{color:#F04A3C}
.knav.light.open{background:rgba(255,255,255,.96)}
@media (max-width:1199px){
  .knav{padding:10px 16px;flex-wrap:wrap}
  .knav-logo img{height:14px!important}
  .knav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
  .knav-right>.knav-cta{display:none}
  .knav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;padding:0;color:#FAFAFA;cursor:pointer}
  .knav-burger svg{display:block} .knav-burger .x{display:none}
  .knav.open .knav-burger .x{display:block} .knav.open .knav-burger .h{display:none}
  .knav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px;font-size:17px;border-top:1px solid rgba(255,255,255,.12);margin-top:10px}
  .knav.open .knav-links{display:flex}
  .knav-links>*{min-height:52px;white-space:normal;justify-content:flex-start;text-align:left}
  .knav-links>a,.knav-links>button{padding:0 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .knav-links>.knav-cta{justify-content:center;margin-top:12px;padding:0 18px;border-bottom:0;min-height:52px;font-size:17px}
  .knav-drop{position:static;display:block}
  .knav-drop-btn{width:100%;justify-content:space-between;min-height:52px;padding:0 4px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .knav-drop-menu{position:static;display:none;min-width:0;border:0;background:transparent;padding:2px 0 6px 20px;box-shadow:none}
  .knav-drop.hov .knav-drop-menu{display:none}
  .knav-drop.open .knav-drop-menu{display:flex}
  .knav-drop-menu a{padding:12px} .knav-drop-menu a b{font-size:16px} .knav-drop-menu a small{font-size:13px} .knav-drop-h{padding-left:12px}
  .knav.light .knav-links{border-top-color:rgba(10,10,10,.08)}
  .knav.light .knav-links>a,.knav.light .knav-drop-btn{border-bottom-color:rgba(10,10,10,.08)}
  .knav.light .knav-drop-menu a,.knav.light .knav-drop-menu a b{color:#171717} .knav.light .knav-drop-menu a small{color:#525252} .knav.light .knav-drop-h{color:#737373}
}
@media(hover:none){.knav-drop.hov .knav-drop-btn svg{transform:none}.knav-drop.hov .knav-drop-menu{display:none}.knav-drop.open .knav-drop-menu{display:flex}.knav-drop.open .knav-drop-btn svg{transform:rotate(180deg)}}
/* the Products menu is two columns (Profound pattern, Emmet 2026-09-23): the products on the left, BrnDNA and Data on the right under Foundation */
.knav-drop-menu{flex-direction:row;align-items:stretch;gap:8px;min-width:0;width:max-content;white-space:normal;right:auto;left:50%;transform:translateX(-50%)}  /* centred under Products, like Profound; right-anchored it ran off the left edge */
.knav-drop-col{display:flex;flex-direction:column;width:300px;padding:2px}
.knav-drop-col+.knav-drop-col{border-left:1px solid rgba(255,255,255,.08);padding-left:8px}
.knav-drop-h{padding:8px 14px 6px}
@media (max-width:1199px){
  .knav-drop-menu{flex-direction:column;gap:0;width:auto;left:auto;transform:none}
  .knav-drop-col{width:auto;padding:0}
  .knav-drop-col:first-child .knav-drop-h{display:none}  /* the accordion button already says Products */
  .knav-drop-col+.knav-drop-col{border-left:0;padding-left:0;margin-top:4px}
  .knav.light .knav-drop-col+.knav-drop-col{border-left:0}
}

/* Data sits under Creative Strategy Engine: hover the engine, Data opens to the right. */
.knav-sub{position:relative;display:flex;flex-direction:column}
.knav-sub>a{position:relative;padding-right:34px}
.knav-sub>a::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.55}
.knav-sub-menu{position:absolute;left:100%;top:0;display:none;padding-left:8px}
.knav-sub-menu a{width:300px;background:#0A0A0A;color:#FAFAFA;border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 12px 28px -12px rgba(10,10,10,.5)}
/* hovering the flyout itself: the generic a:hover rule made it a translucent white card over the hero (Emmet, 2026-09-23) */
.knav-sub-menu a:hover,.knav.light .knav-sub-menu a:hover{background:#171717;color:#FAFAFA}
.knav-sub-menu a small,.knav.light .knav-sub-menu a small{color:#D4D4D4}
.knav-sub:hover .knav-sub-menu,.knav-sub:focus-within .knav-sub-menu{display:flex}
.knav-sub:hover>a{background:rgba(255,255,255,.06)} .knav-sub:hover>a b{color:#F04A3C}
@media (max-width:1199px){
  .knav-sub>a::after{display:none}
  .knav-sub-menu{position:static;display:flex;padding:0 0 0 16px}
  .knav-sub-menu a{width:auto;background:transparent;border:0;box-shadow:none}
}

.knav a[aria-current="page"]{cursor:default}

/* Phones (2026-09-24): the .74 white glass let the red Book a demo button smear pink straight through the wordmark as it
   scrolled under the bar. Raise the plate on small screens; .over stays clear because the hero film under it is the point. */
@media (max-width:1199px){
  .knav{background:rgba(10,10,10,.88)}
  .knav.light{background:rgba(255,255,255,.94)}
  .knav.over{background:rgba(10,10,10,.14)}
  .knav.over.open{background:rgba(10,10,10,.96)}
  .knav.light.open{background:rgba(255,255,255,.98)}
}