/* ==========================================================================
   Keynes — site-wide chrome (Ver 3.0 rebrand).

   Header and footer only. This loads on EVERY page, including the legacy
   sub-pages that still carry Bootstrap and the old 162KB style.css, so it is
   held to one rule: nothing here may match an element it does not own.

   That means no bare element selectors, no resets, and no :root token names
   that the legacy stylesheet also uses. Everything is either a --kx-* custom
   property (inert until referenced) or a .kx- class.

   Also carries the @font-face, tokens and button/pill classes that the front
   page stylesheet kx-home.css depends on — chrome is always enqueued first.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Inter Tight ships as a variable woff2 per subset: one file covers 400-700. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --kx-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Tight',
    'Helvetica Neue', Helvetica, Arial, sans-serif;

  --kx-purple: #6e56f8;
  --kx-purple-hover: #5a42e8;
  --kx-purple-link-hover: #4c34e0;
  --kx-purple-tint: #e9e6fb;

  --kx-ink: #1d1d1f;
  --kx-ink-2: #48484d;
  --kx-muted: #6e6e73;
  --kx-muted-2: #86868b;

  --kx-bg: #fff;
  --kx-bg-alt: #f5f5f7;
  --kx-card-alt: #ebebef;
  --kx-dark: #0b0b0c;
  --kx-dark-2: #17171a;

  /* The ground the client's product spots are composited on. The device screen
     on the front page is painted the same, so a 16:9 spot fitted whole into a
     screen that is not 16:9 shows no letterbox. */
  --kx-screen: #faf9fc;

  --kx-border: rgba(0, 0, 0, .13);
  --kx-border-soft: rgba(0, 0, 0, .09);
  --kx-border-pill: rgba(0, 0, 0, .16);

  --kx-container: 1180px;
  --kx-gutter: 44px;
  --kx-header-h: 48px;

  --kx-shadow-lift: 0 30px 60px -34px rgba(0, 0, 0, .22);
  --kx-shadow-purple: 0 30px 60px -30px rgba(58, 40, 160, .55);

  --kx-section-pt: 104px;
  --kx-section-pb: 112px;
}

/* --- Shared helpers ------------------------------------------------------- */
.kx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kx-rule { height: 1px; background: rgba(0, 0, 0, .12); }

/* The header is fixed, so every page other than the front page needs the bar
   height back as padding. The front page hero deliberately runs underneath it,
   so it is excluded. */
body.kx-rebrand:not(.kx-home) {
  padding-top: var(--kx-header-h);
}

/* --- Buttons & pills ------------------------------------------------------ */
.kx-btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--kx-font);
  font-size: 17px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -.01em;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  background: var(--kx-purple);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.kx-btn:hover,
.kx-btn:focus { background: var(--kx-purple-hover); color: #fff; }
.kx-btn--sm { padding: 6px 14px; font-size: 12px; font-weight: 500; }
.kx-btn--submit { padding: 12px 26px; font-size: 15px; font-weight: 500; }

/* Login. The small pill's geometry, outlined rather than filled, so the bar
   still has exactly one filled CTA and the hierarchy the design asks for.

   Deliberately NOT a .kx-btn: the legacy armour at the foot of this file paints
   every .kx-btn label white, which is right on violet and wrong on an outline.
   As a plain anchor it inherits the header's ink and picks up the violet hover
   already defined there, so it needs nothing added to that block. */
.kx-login {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--kx-font);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--kx-border-pill);
  border-radius: 999px;
  color: var(--kx-ink);
  transition: border-color .2s ease, color .2s ease;
}
.kx-login:hover,
.kx-login:focus { border-color: var(--kx-purple); color: var(--kx-purple); }

.kx-btn-text {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--kx-purple);
  text-decoration: none;
}

.kx-pill {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--kx-border-pill);
  color: var(--kx-ink);
}
.kx-pill--sm { padding: 7px 14px; font-size: 12.5px; }
.kx-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 26px;
}
.kx-pill-row--sm { padding-top: 22px; }

/* ==========================================================================
   Header
   ========================================================================== */
.kx-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--kx-header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-family: var(--kx-font);
}
.kx-header__inner {
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.kx-header__logo { display: flex; align-items: center; text-decoration: none; }
.kx-header__logo img { display: block; height: 19px; width: auto; }

.kx-header__right { display: flex; align-items: center; gap: 26px; }

/* --- Desktop nav ---------------------------------------------------------- */
.kx-nav { display: flex; align-items: center; gap: 34px; }

.kx-nav__link,
.kx-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: var(--kx-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--kx-ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.kx-nav__link:hover,
.kx-nav__trigger:hover,
.kx-nav__item--open > .kx-nav__trigger { color: var(--kx-purple); }

.kx-nav__caret { width: 7px; height: 7px; opacity: .55; }

/* The 16px padding bridges the gap between trigger and card so the pointer can
   travel into the dropdown without crossing dead space.

   Flex, not block: as a block the inline-flex trigger inside would sit in a
   line box sized by the inherited line-height, and the strut baseline would
   drop it ~2px below the plain links, which have no line box of their own. */
.kx-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 0;
  margin: -16px 0;
}

.kx-nav__menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 148px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.kx-nav__menu--wide { min-width: 176px; }

.kx-nav__item--open > .kx-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.kx-nav__menu a {
  display: block;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--kx-ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.kx-nav__menu a:hover,
.kx-nav__menu a:focus {
  background: rgba(110, 86, 248, .09);
  color: var(--kx-purple);
}

/* --- Hamburger ------------------------------------------------------------ */
.kx-burger {
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--kx-ink);
}
.kx-burger__bars { position: relative; width: 17px; height: 11px; }
.kx-burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.kx-burger__bars span:nth-child(1) { top: 0; }
.kx-burger__bars span:nth-child(2) { top: 50%; margin-top: -.75px; }
.kx-burger__bars span:nth-child(3) { bottom: 0; }

.kx-burger[aria-expanded='true'] .kx-burger__bars span:nth-child(1) {
  transform: translateY(4.75px) rotate(45deg);
}
.kx-burger[aria-expanded='true'] .kx-burger__bars span:nth-child(2) { opacity: 0; }
.kx-burger[aria-expanded='true'] .kx-burger__bars span:nth-child(3) {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* --- Mobile sheet --------------------------------------------------------- */
.kx-sheet {
  display: none;
  position: fixed;
  top: var(--kx-header-h);
  left: 0;
  right: 0;
  z-index: 59;
  max-height: calc(100vh - var(--kx-header-h));
  overflow-y: auto;
  padding: 22px var(--kx-gutter) 30px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  font-family: var(--kx-font);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  visibility: hidden;
}
.kx-sheet[data-open='true'] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.kx-sheet__list { list-style: none; margin: 0; padding: 0; }
.kx-sheet__list > li + li { margin-top: 18px; }

.kx-sheet__link {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kx-ink);
  text-decoration: none;
}
.kx-sheet__link:hover { color: var(--kx-purple); }

/* Dropdown children flatten into indented rows rather than nested menus. */
.kx-sheet__sub { list-style: none; margin: 12px 0 0; padding: 0 0 0 20px; }
.kx-sheet__sub li + li { margin-top: 11px; }
.kx-sheet__sub a {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--kx-muted);
  text-decoration: none;
}
.kx-sheet__sub a:hover { color: var(--kx-purple); }

/* Both actions sit on one row, at the full-size pill scale - a sheet is not a
   48px bar, and the header's 12px pill would read as a caption here. */
.kx-sheet__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.kx-sheet__actions .kx-login { padding: 12px 24px; font-size: 17px; font-weight: 400; }

/* Icons themselves are styled with the footer's, further down. */
.kx-sheet__social { margin-top: 26px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.kx-footer {
  padding: 84px 0 56px;
  background: var(--kx-bg);
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-family: var(--kx-font);
  color: var(--kx-ink);
}
.kx-footer__inner {
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.kx-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.kx-footer__logo { display: flex; align-items: center; text-decoration: none; }
.kx-footer__logo img { display: block; height: 26px; width: auto; }

/* Shared with the mobile sheet's strip (.kx-sheet__social, above): same links,
   same marks, same size - only the spacing around them differs. */
.kx-footer__social,
.kx-sheet__social { display: flex; align-items: center; gap: 18px; }
.kx-footer__social a,
.kx-sheet__social a {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  color: var(--kx-ink);
  text-decoration: none;
}
.kx-footer__social a:hover,
.kx-sheet__social a:hover { color: var(--kx-purple); }
.kx-footer__social svg,
.kx-sheet__social svg { display: block; fill: currentColor; }

.kx-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 160px), 1fr));
  gap: 36px 28px;
}
.kx-footer__col { display: flex; flex-direction: column; gap: 14px; }
.kx-footer__col-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--kx-purple);
}
.kx-footer__col a {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--kx-ink);
  text-decoration: none;
}
.kx-footer__col a:hover { color: var(--kx-purple); }

.kx-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--kx-muted-2);
}
.kx-footer__legal a { font-size: 13px; color: var(--kx-muted-2); text-decoration: none; }
.kx-footer__legal a:hover { color: var(--kx-purple); }
.kx-footer__legal-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The design nav breakpoint: desktop nav out, hamburger and sheet in. */
@media (max-width: 920px) {
  .kx-nav,
  .kx-header__login { display: none; }
  .kx-burger { display: grid; }
  .kx-sheet { display: block; }
  .kx-header__right { gap: 14px; }
}

@media (max-width: 760px) {
  :root {
    --kx-gutter: 40px;
    --kx-section-pt: 68px;
    --kx-section-pb: 76px;
  }

  .kx-header__inner { gap: 14px; }
  .kx-footer { padding-top: 56px; }
  .kx-footer__cols { gap: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-nav__menu,
  .kx-sheet,
  .kx-burger__bars span { transition: none; }
}

/* ==========================================================================
   Legacy armour

   The rebranded chrome wraps ~60 pages that still load the legacy stylesheet,
   and that stylesheet repaints links globally from the body class:

     body a, h1..h6                                       -> var(--black)
     body.body-dark a:not(.card-file):not(.underline-cta)
                    :not(.standard-button)                -> #fff
     body.page-template-template-media-meets a            -> #fff

   The second of those is specificity (0,4,2) - far above the single-class
   selectors the chrome uses - so on every dark-themed page and on Media Meets
   the header nav, the mobile sheet and the whole footer were being painted
   white on white. That is what made the footer look empty below the rule.

   Rather than escalate every rule above an unknown and growing set of legacy
   globals, the three chrome roots carry ids, and the palette is re-asserted
   here through them. An id outranks any number of classes, so this holds
   without !important and without caring what the legacy sheet adds next.

   Colour is set on the roots and inherited; only the deliberate exceptions
   (violet column headings, muted sub-rows and legal line, white button text)
   are named. Keep it that way - this block should not grow into a copy of the
   stylesheet above it.
   ========================================================================== */
#kx-header,
#kx-sheet,
#kx-footer { color: var(--kx-ink); }

#kx-header a,
#kx-header button,
#kx-sheet a,
#kx-footer a,
#kx-footer h2 { color: inherit; }

/* Deliberate exceptions. */
#kx-footer .kx-footer__col-title { color: var(--kx-purple); }
#kx-footer .kx-footer__legal { color: var(--kx-muted-2); }
#kx-sheet .kx-sheet__sub { color: var(--kx-muted); }
#kx-header .kx-btn,
#kx-sheet .kx-btn { color: #fff; }

/* Hover, everywhere except the pill - its label stays white on violet. */
#kx-header a:hover:not(.kx-btn),
#kx-header button:hover,
#kx-header .kx-nav__item--open > .kx-nav__trigger,
#kx-sheet a:hover:not(.kx-btn),
#kx-footer a:hover { color: var(--kx-purple); }

/* --- Opaque header away from the front page -------------------------------
   The bar is translucent by design so the front page hero shows through it.
   No other page has a hero: content starts below the bar (see the padding-top
   rule above), so there is nothing the translucency is revealing - it just
   picks up whatever colour the page happens to be.

   On the dark templates (case studies, and any page carrying the legacy dark
   treatment) that left ink-coloured nav links on a near-black backdrop, which
   measured 1.03:1. Opaque here, translucent only where the design asks for it. */
body.kx-rebrand:not(.kx-home) .kx-header {
  background: var(--kx-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}

body.kx-rebrand:not(.kx-home) .kx-sheet {
  background: var(--kx-bg);
}

/* --- Let the header actually be fixed -------------------------------------
   The legacy stylesheet sets `#page { contain: paint }`. Paint containment
   makes that element the containing block for any position:fixed descendant,
   so the rebranded header was fixed to #page rather than to the viewport: it
   scrolled away with the content, and sat 48px down because the body padding
   that compensates for the bar pushed #page down.

   It only showed on legacy pages - the front page dequeues that stylesheet,
   which is why the header behaved correctly there and nowhere else.

   The containment is not load-bearing for the rebranded chrome, so it is
   released. Id specificity, for the same reason as the armour above. */
body.kx-rebrand #page {
  contain: none;
}

/* --- Logged-in admin bar --------------------------------------------------
   The admin bar is fixed at top 0, and so is the header, so it covered the bar
   for anyone logged in. WordPress already reserves the space with its own
   html margin; the header just has to start below it.

   32px normally, 46px on the narrow admin-bar layout. Below 600px WordPress
   makes the bar scroll with the page rather than fixing it, so the header goes
   back to the top there. */
body.admin-bar .kx-header { top: 32px; }
body.admin-bar .kx-sheet { top: calc(var(--kx-header-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .kx-header { top: 46px; }
  body.admin-bar .kx-sheet { top: calc(var(--kx-header-h) + 46px); }
}

@media screen and (max-width: 600px) {
  body.admin-bar .kx-header { top: 0; }
  body.admin-bar .kx-sheet { top: var(--kx-header-h); }
}