/* =========================================================
   Marketer Coffee Navigation — monochrome header
   Prefix: mcn-
   ========================================================= */
.mcn {
  --mcn-ink: #0B0B0B;
  --mcn-line: #E3E1DB;
  --mcn-muted: #6E6C67;
  --mcn-bone: #F3F2EE;
  --mcn-ok: #1E9E57;
  --mcn-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --mcn-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --mcn-h: 72px;
  position: relative;
  z-index: 9990;
  isolation: isolate;
  font-family: var(--mcn-sans);
  color: var(--mcn-ink);
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* Background lives on a pseudo-element so the fixed mobile panel is not trapped by backdrop-filter */
.mcn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.mcn.is-sticky { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
.mcn.is-scrolled { border-bottom-color: var(--mcn-line); box-shadow: 0 12px 30px -24px rgba(0, 0, 0, .35); }
.mcn *, .mcn *::before, .mcn *::after { box-sizing: border-box; }
.mcn ul { list-style: none; margin: 0; padding: 0; }
.mcn li { margin: 0; }
.mcn a { text-decoration: none !important; }

.mcn-bar {
  max-width: 1240px;
  height: var(--mcn-h);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ---------- Logo ---------- */
.mcn-logo { display: inline-flex; align-items: baseline; flex-shrink: 0; color: var(--mcn-ink) !important; font-weight: 800; font-size: 1.22rem; letter-spacing: -.035em; line-height: 1; }
.mcn-logo img { display: block; height: 30px; width: auto; }
.mcn-logo-dot { width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--mcn-ink); }

/* ---------- Desktop menu ---------- */
.mcn-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.mcn-menu { display: flex; align-items: center; gap: .15rem; }
.mcn-menu > .mcn-item { position: relative; display: flex; align-items: center; }
.mcn-menu > .mcn-item > .mcn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 .9rem;
  border-radius: 999px;
  color: var(--mcn-ink) !important;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease;
}
.mcn-menu > .has-sub > .mcn-link { padding-right: 1.8rem; }
.mcn-menu > .mcn-item > .mcn-link:hover,
.mcn-menu > .mcn-item.is-open > .mcn-link,
.mcn-menu > .has-sub:hover > .mcn-link { background: var(--mcn-bone); }
.mcn-menu > .mcn-item.is-current > .mcn-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--mcn-ink);
}
.mcn-menu > .has-sub.is-current > .mcn-link::after { margin-left: -9px; }

.mcn-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mcn-ink);
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
  line-height: 1;
}
.mcn-menu .mcn-toggle { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); }
.mcn-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.mcn-item.is-open > .mcn-toggle svg,
.mcn-menu > .has-sub:hover > .mcn-toggle svg { transform: rotate(180deg); }
.mcn-toggle:focus-visible, .mcn-link:focus-visible, .mcn-cta:focus-visible, .mcn-burger:focus-visible, .mcn-sec:focus-visible, .mcn-logo:focus-visible {
  outline: 2px solid var(--mcn-ink);
  outline-offset: 2px;
}

/* Dropdown card */
.mcn-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 10;
}
.mcn-menu > .has-sub:hover > .mcn-sub,
.mcn-menu > .has-sub:focus-within > .mcn-sub,
.mcn-menu > .has-sub.is-open > .mcn-sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mcn-sub-list {
  min-width: 280px;
  padding: .5rem !important;
  background: #fff;
  border: 1px solid var(--mcn-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 28px 50px -24px rgba(0, 0, 0, .35);
}
.mcn-menu > .mcn-mega > .mcn-sub .mcn-sub-list { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: .15rem; width: 580px; }
.mcn-sub .mcn-link {
  display: block;
  padding: .7rem .85rem;
  border-radius: 10px;
  color: var(--mcn-ink) !important;
  transition: background .15s ease;
}
.mcn-sub .mcn-link:hover { background: var(--mcn-bone); }
.mcn-sub-t { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.mcn-sub-d { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 500; line-height: 1.45; color: var(--mcn-muted); }
.mcn-sub .is-current > .mcn-link .mcn-sub-t::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mcn-ink); }

/* ---------- Actions ---------- */
.mcn-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.mcn-sec {
  padding: .5rem .6rem;
  color: var(--mcn-muted) !important;
  font-family: var(--mcn-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}
.mcn-sec:hover { color: var(--mcn-ink) !important; }
.mcn-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 42px;
  padding: 0 1.2rem;
  border: 1.5px solid var(--mcn-ink);
  border-radius: 999px;
  background: var(--mcn-ink);
  color: #fff !important;
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.mcn-cta:hover { background: #fff; color: var(--mcn-ink) !important; }
.mcn-live { width: 7px; height: 7px; border-radius: 50%; background: var(--mcn-ok); box-shadow: 0 0 0 3px rgba(30, 158, 87, .22); flex-shrink: 0; }

/* Language switcher (Marketer Coffee Languages): dropdown, any number of languages */
.mcn-lang { position: relative; }
.mcn-lang-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .4rem;
  height: 40px; min-height: 0; margin: 0; padding: 0 .75rem;
  border: 1px solid var(--mcn-line); border-radius: 999px; background: #fff; box-shadow: none;
  color: var(--mcn-ink); font-family: var(--mcn-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; line-height: 1;
  cursor: pointer; transition: border-color .2s ease;
}
.mcn-lang-btn:hover, .mcn-lang.is-open .mcn-lang-btn { border-color: var(--mcn-ink); }
.mcn-lang-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.mcn-lang-btn .mcn-lang-car { width: 10px; height: 10px; transition: transform .2s ease; }
.mcn-lang.is-open .mcn-lang-car { transform: rotate(180deg); }
.mcn-lang-btn:focus-visible { outline: 2px solid var(--mcn-ink); outline-offset: 2px; }
.mcn-lang-list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20;
  min-width: 210px; max-height: 70vh; overflow-y: auto; padding: .4rem !important;
  background: #fff; border: 1px solid var(--mcn-line); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 28px 50px -24px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mcn-lang.is-open .mcn-lang-list { opacity: 1; visibility: visible; transform: none; }
.mcn-lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .75rem; border-radius: 9px;
  color: var(--mcn-ink) !important; font-size: .88rem; font-weight: 600; line-height: 1.2;
  transition: background .15s ease;
}
.mcn-lang-list a:hover { background: var(--mcn-bone); }
.mcn-lang-list em { font-style: normal; font-family: var(--mcn-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; color: var(--mcn-muted); }
.mcn-lang-list a.is-current { background: var(--mcn-ink); color: #fff !important; }
.mcn-lang-list a.is-current em { color: rgba(255, 255, 255, .6); }

/* Burger */
.mcn-burger {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--mcn-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: none;
}
.mcn-burger span { display: block; width: 18px; height: 1.5px; background: var(--mcn-ink); transition: transform .25s ease; }
.mcn.is-open .mcn-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.mcn.is-open .mcn-burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Case studies highlight ---------- */
.mcn-cases { position: relative; display: flex; align-items: center; }
.mcn-cases-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 42px; padding: 0 2.3rem 0 1.1rem;
  border: 1.5px solid var(--mcn-ink); border-radius: 999px; background: #fff;
  color: var(--mcn-ink) !important; font-size: .86rem; font-weight: 700; white-space: nowrap;
  transition: background .2s ease;
}
.mcn-cases-btn:hover, .mcn-cases.is-open .mcn-cases-btn, .mcn-cases:hover .mcn-cases-btn { background: var(--mcn-bone); }
.mcn-cases-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px;
  background: var(--mcn-ink); color: #fff; font-style: normal;
  font-family: var(--mcn-mono); font-size: .68rem; font-weight: 700; line-height: 1;
}
.mcn-cases-tgl {
  appearance: none; -webkit-appearance: none; position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--mcn-ink); cursor: pointer;
}
.mcn-cases-tgl svg { width: 11px; height: 11px; transition: transform .2s ease; }
.mcn-cases:hover .mcn-cases-tgl svg, .mcn-cases.is-open .mcn-cases-tgl svg { transform: rotate(180deg); }
.mcn-cases-tgl:focus-visible, .mcn-cases-btn:focus-visible, .mcn-case:focus-visible, .mcn-cases-all:focus-visible { outline: 2px solid var(--mcn-ink); outline-offset: 2px; }
.mcn-cases-pop {
  position: absolute; top: 100%; right: 0; z-index: 20; padding-top: 12px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mcn-cases:hover .mcn-cases-pop, .mcn-cases:focus-within .mcn-cases-pop, .mcn-cases.is-open .mcn-cases-pop { opacity: 1; visibility: visible; transform: none; }
.mcn-cases-card {
  width: 600px; padding: .9rem; background: #fff; border: 1px solid var(--mcn-line); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 28px 50px -24px rgba(0, 0, 0, .35);
}
.mcn-cases-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .35rem .75rem; font-family: var(--mcn-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mcn-muted); }
.mcn-cases-hd a { color: var(--mcn-ink) !important; }
.mcn-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mcn-case {
  display: flex; flex-direction: column; height: 100%; padding: .85rem .9rem .9rem;
  border: 1px solid var(--mcn-line); border-radius: 14px; background: #fff;
  color: var(--mcn-ink) !important; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.mcn-case:hover { border-color: var(--mcn-ink); background: var(--mcn-bone); }
.mcn-case-top { display: flex; align-items: center; gap: .5rem; min-height: 22px; margin-bottom: .7rem; }
.mcn-case-top img { height: 20px; width: auto; max-width: 70px; object-fit: contain; filter: grayscale(1); }
.mcn-case-name { font-size: .78rem; font-weight: 700; color: var(--mcn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcn-case-metric { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mcn-case-label { display: block; margin-top: .35rem; font-family: var(--mcn-mono); font-size: .62rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mcn-muted); line-height: 1.35; }
.mcn-cases-all {
  display: flex; align-items: center; justify-content: center; height: 44px; margin-top: .6rem;
  border-radius: 12px; background: var(--mcn-ink); color: #fff !important; font-size: .86rem; font-weight: 700;
  transition: opacity .2s ease;
}
.mcn-cases-all:hover { opacity: .88; }
.mcn-mcases { display: none; }
@media (max-width: 1240px) { .mcn-bar { gap: 1rem; } .mcn-menu > .mcn-item > .mcn-link { padding: 0 .7rem; } .mcn-menu > .has-sub > .mcn-link { padding-right: 1.65rem; } }
@media (max-width: 1024px) {
  .mcn-actions > .mcn-cases { display: none; }
  .mcn-mcases { display: block; margin-top: 1.5rem; }
  .mcn-mcases .mcn-cases-hd { padding: 0 0 .7rem; }
  .mcn-mcases-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: .5rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem;
    scrollbar-width: none;
  }
  .mcn-mcases-row::-webkit-scrollbar { display: none; }
  .mcn-mcases-row li { scroll-snap-align: start; }
  .mcn-mcases .mcn-case { background: var(--mcn-bone); border-color: transparent; }
  .mcn-mcases .mcn-case-metric { font-size: 1.45rem; }
}

/* Mobile panel (hidden on desktop) */
.mcn-panel { display: none; }

/* =========================================================
   Mobile / tablet
   ========================================================= */
@media (max-width: 1024px) {
  .mcn { --mcn-h: 64px; }
  .mcn-bar { padding: 0 1.25rem; gap: .75rem; }
  .mcn-logo { margin-right: auto; }
  .mcn-nav, .mcn-actions > .mcn-sec { display: none; }
  .mcn-burger { display: inline-flex; }
  .mcn-actions .mcn-cta { height: 40px; padding: 0 1rem; font-size: .8rem; }

  .mcn.is-open { border-bottom-color: var(--mcn-line); }
  .mcn.is-open .mcn-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mcn-panel-top, 64px);
    bottom: 0;
    padding: .75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: mcnIn .22s ease;
  }

  .mcn-mmenu > .mcn-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--mcn-line); }
  .mcn-mmenu > .mcn-item > .mcn-link {
    flex: 1;
    padding: 1.05rem 0;
    color: var(--mcn-ink) !important;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
  }
  .mcn-mmenu > .mcn-item.is-current > .mcn-link::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 .55rem .2rem 0; border-radius: 50%; background: var(--mcn-ink); vertical-align: middle; }
  .mcn-mmenu .mcn-toggle { width: 42px; height: 42px; border: 1px solid var(--mcn-line); }
  .mcn-mmenu .mcn-toggle svg { width: 14px; height: 14px; }
  .mcn-mmenu .mcn-sub { position: static; display: none; width: 100%; padding: 0 0 1rem; opacity: 1; visibility: visible; transform: none; }
  .mcn-mmenu .is-open > .mcn-sub { display: block; animation: mcnIn .18s ease; }
  .mcn-mmenu .mcn-sub-list { display: grid !important; grid-template-columns: 1fr; gap: .4rem; width: auto !important; min-width: 0; padding: 0 !important; border: 0; box-shadow: none; background: transparent; }
  .mcn-mmenu .mcn-sub .mcn-link { background: var(--mcn-bone); padding: .8rem .95rem; border-radius: 12px; }

  .mcn-panel-ft { margin-top: auto; padding-top: 1.5rem; display: grid; gap: .5rem; }
  .mcn-lang-btn { height: 40px; padding: 0 .65rem; }
  .mcn-lang-list { min-width: 220px; max-height: calc(100vh - 120px); }
  .mcn-lang-list a { padding: .8rem .85rem; font-size: .95rem; }
  .mcn-panel-ft .mcn-cta { justify-content: center; height: 54px; font-size: .95rem; }
  .mcn-panel-ft .mcn-sec { text-align: center; padding: .8rem; }
}
@media (max-width: 480px) {
  .mcn-actions .mcn-cta { display: none; }
}

@keyframes mcnIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

html.mcn-lock, html.mcn-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mcn *, .mcn *::before, .mcn *::after { animation: none !important; transition: none !important; }
}