.ia-buttons {
    margin-top: 20px;
}
.ia-body {
    position: relative;
}
.il__head {
    display: none !important;
}
.ia-body:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

section.ia-related {
    position: relative;
}

section.ia-related:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#ffff, #fff), linear-gradient(#fff, var(--pixel-top, #fff));
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
.ia-video {
    margin-top: 20px;
}
.single.single-insight.postid-2632 .ia-split__img {
    max-height: 100%;
}
/* Insights listing  */
section#insight-menifesto .fwt__text p {
    margin: 0;
    padding-top: 0;
    font-family: var(--typeface-primary);
    color: var(--neutral-black);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
}
.page-id-2423 section.il:before {
    display: block !important;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#000, var(--pixel-bottom, #000)), linear-gradient(#000, var(--pixel-bottom, #000));
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
/* ============================================================
   ASCENDION · INSIGHTS LISTING
   Filter tabs + staggered "masonry" grid of insight cards.
   Card art here is CSS-generated (gradients/patterns) as a stand-in
   for each post's real featured image — swap .il-card__media's
   background for an <img> when this is wired to real posts.
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--neutral-black); font-family: var(--typeface-secondary); -webkit-font-smoothing: antialiased; }
body { background: var(--neutral-white); }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }

/* ── Shared: pixel arrow ───────────────────────────────────── */
.pixel-arrow { display: inline-block; width: var(--space-14); flex-shrink: 0; color: currentColor; }
.pixel-arrow svg { width: 100%; height: auto; fill: currentColor; display: block; }
.pixel-arrow--flip { transform: scaleX(-1); }

/* ── Shared: CTAs (nav "Connect" button) ──────────────────── */
.cta-primary { display: inline-flex; align-items: stretch; cursor: pointer; }
.cta-primary__text {
  display: flex; align-items: center;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs); color: var(--neutral-white);
}
.cta-primary__arrow {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-14) var(--space-16); color: var(--neutral-white);
  transition: background 240ms ease, color 240ms ease;
}
.cta-primary--light       { background: var(--neutral-deep-black-60); transition: background 320ms ease; }
.cta-primary--light:hover { background: var(--neutral-black); }
.cta-primary--light:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }

/* ============================================================
   NAV (fixed, dark-chip icons — matches insights-article.html)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--responsive-spacing-24) var(--margin-margin);
}
.nav__logo { display: inline-flex; align-items: center; color: var(--neutral-black); }
.nav__logo svg { height: var(--space-32); width: auto; fill: currentColor; display: block; }
.nav__actions { display: flex; align-items: center; gap: var(--space-12); }
.nav__icon { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__icon svg { display: block; }
.nav__icon .nav__icon-mobile { display: none; }

/* ============================================================
   INSIGHTS LISTING
   ============================================================ */
.il {
    padding: var(--responsive-spacing-60) var(--margin-margin) var(--responsive-spacing-120);
}

/* ── Head: scrollable filter tabs + prev/next strip nav ─────── */
.il__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: 0;
  border-bottom: 1px solid var(--neutral-light-grey);
  margin-bottom: var(--space-32);
}
.il-tabs {
  display: flex; align-items: center; gap: var(--space-8);
  flex: 1 1 auto; min-width: 0; /* lets it shrink below content width so overflow-x actually kicks in, instead of just growing .il__head wider */
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
}
.page.page-id-2423 section.shortcode-section:after {
    background-image: linear-gradient(#f4f4f4, var(--pixel-top, #f4f4f4)), linear-gradient(#f4f4f4, var(--pixel-top, #f4f4f4));
}

.page-id-2423 section.fwt:after {
   display: block !important;
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: var(--space-20);
   pointer-events: none;
   z-index: 5;
   background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
   background-position: bottom left, bottom right;
   background-size: var(--space-20) var(--space-20);
   background-repeat: no-repeat;
}
.page-id-2423 section.fwt {
    position: relative;
}
.il-tabs::-webkit-scrollbar { display: none; }
.il-tab {
  flex-shrink: 0; white-space: nowrap;
  padding: var(--space-12) var(--space-20);
  border: 0; background: none; cursor: pointer;
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs);
  color: var(--neutral-slate-grey);
  transition: background 200ms ease, color 200ms ease;
}
.il-tab.is-active { background: var(--brand-dark-teal);
    color: var(--neutral-white); }
.il-tab:not(.is-active):hover { color: var(--neutral-black); }

.il-nav { flex-shrink: 0; display: flex; gap: var(--space-4); }
.il-nav__btn {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: var(--neutral-black); color: var(--neutral-white);
  cursor: pointer;
}
.il-nav__btn:hover { background: var(--brand-neural-mint); color: var(--neutral-black); }

/* ── Masonry grid: 4 explicit columns (.il-col), each a flex column of
   cards. Explicit DOM columns — rather than CSS multi-column
   auto-balancing — so each column can enforce its own
   big → small → big → small rhythm reliably. ──────────────────── */
.il-grid { display: flex; gap: var(--responsive-spacing-20); align-items: flex-start; }
.il-col  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--responsive-spacing-20); }

.il-card {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; /* lets .il-card__link/__media genuinely fill the big/small height below, via flex — not height:100%, which never resolves against a parent sized only by min-height */
}
.il-card__link { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }

/* Size rhythm — alternate big/small within each .il-col (set directly
   on the cards in the markup, not auto-generated). */
.il-card--big   { min-height: 400px; }
.il-card--small { min-height: 282px; }

/* Corner pixel notch — same white-square motif used across the site. */
.il-card::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 2;
  width: var(--space-20); height: var(--space-20); background: var(--neutral-white);
  pointer-events: none;
}

/* Variant: flat/solid colour, title text laid directly over it. */
.il-card--solid .il-card__link { padding: var(--space-24); }
.il-card--violet   { background: #8C7CF0; }
.il-card--teal      { background: var(--brand-dark-teal); }
.il-card--charcoal  { background: var(--neutral-charcoal); }
.il-card--solid .il-card__title { color: var(--neutral-white); }
.il-card--violet .il-card__title,
.il-card--teal .il-card__title,
.il-card--charcoal .il-card__title { color: var(--neutral-white); }

/* Variant: dark bg, same layout as solid but always black/near-black. */
.il-card--dark { background: var(--neutral-deep-black); }
.il-card--dark .il-card__link { padding: var(--space-24); }
.il-card--dark .il-card__title { color: var(--neutral-white); }

.il-card__title {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-body_m); line-height: var(--lh-body_m);
  max-width: 88%;
}

/* Standalone "media only" card (e.g. the barcode tile — no title). */
.il-card__media--barcode {
  background:
    repeating-linear-gradient(90deg,
      var(--neutral-deep-black) 0 6px,
      transparent 6px 10px),
    repeating-linear-gradient(90deg,
      #6C5CE7 0 3px, transparent 3px 14px,
      var(--brand-neural-mint) 14px 17px, transparent 17px 30px,
      #FF6FB5 30px 33px, transparent 33px 46px);
  background-color: var(--neutral-deep-black);
}

/* Variant: media on top (CSS-generated stand-in for a featured image)
   + a light text panel below — same "image + caption card" pattern
   as highlights-card.php / prl-card elsewhere in this project. */
.il-card--panel { background: var(--neutral-soft-grey); }
.il-card--panel .il-card__link { padding: 0; }
/* flex: 1 (not aspect-ratio) — this is what makes the image actually
   grow/shrink with .il-card--big/--small's height, instead of staying
   a fixed ratio that flattens out the big/small size rhythm. */
.il-card__media { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
/* Real <img> child (dynamic/shortcode version's featured image) — the
   static reference only ever used this div as a CSS-gradient
   background, never a child <img>, so it had no img-fill rule. */
.il-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.il-card__media--teal-beam {
  background:
    repeating-linear-gradient(100deg,
      #0B4F63 0 18px, #0F6E86 18px 36px, #12C7A6 36px 40px, #071B22 40px 58px);
}
.il-card__media--magenta-stripe {
  background: linear-gradient(135deg, #120014 0%, #7A1E6E 35%, #C13FA8 55%, #F3A6D8 75%, #120014 100%);
}
.il-card__media--violet-diamond {
  background:
    radial-gradient(circle at 50% 50%, #6C5CE7 0%, #3F2E8C 45%, #1A0F3E 100%);
}
.il-card__media--mint-fade {
  background: linear-gradient(160deg, #00FAC2 0%, #00A98A 45%, #0A2E28 100%);
}
.il-card__media--barcode-bright {
  background:
    repeating-linear-gradient(90deg,
      #6C5CE7 0 3px, transparent 3px 14px,
      var(--brand-neural-mint) 14px 17px, transparent 17px 30px,
      #FF6FB5 30px 33px, transparent 33px 46px);
  background-color: var(--neutral-deep-black);
}
.il-card__title--panel {
  flex-shrink: 0; /* stays its natural height as a footer; .il-card__media (flex: 1) absorbs the rest */
  margin: 0; padding: var(--space-20) var(--space-24);
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-black);
}

/* ── Pagination ───────────────────────────────────────────────── */
.il-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
}
.il-page-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0;  
  cursor: pointer;
}
.il-page-btn:hover:not(:disabled) { background: var(--brand-neural-mint); color: var(--neutral-black); }
.il-page-btn:disabled span.pixel-arrow {
    opacity: 0.3;
    cursor: default;
}
.il-page-numbers { display: flex; align-items: center; gap: var(--space-8); }
.il-page-num {
  min-width: 32px; height: 32px; padding: 0 var(--space-8);
  border: 0; background: none; cursor: pointer;
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-slate-grey);
}
.il-page-num.is-active { color: var(--neutral-black); text-decoration: underline; text-underline-offset: 4px; }
.il-page-num:hover { color: var(--neutral-black); }
.il-page-num--ellipsis { cursor: default; display: flex; align-items: center; justify-content: center; padding: 0; }
.il-page-num--ellipsis:hover { color: var(--neutral-slate-grey); }

/* Grid stays a strict 4 equal columns at tablet/desktop widths — no
   collapse to 2 or 3 there (columns just get narrower). Mobile is the
   one deliberate exception: 4 columns at phone width would be too
   cramped to read, so it drops to a single column there only. */
@media (max-width: 719px) {
  .il-grid { flex-direction: column; }
  /* flex: 0 0 auto overrides the desktop flex: 1 1 0 — in a column-
     direction flex container that base rule would otherwise try to
     split available *height* equally across all 4 columns, instead
     of each one just stacking at its own natural content height. */
  .il-col  { flex: 0 0 auto; width: 100%; gap:20px ;}

  /* The big/small checkerboard rhythm is a desktop masonry device —
     stacked single-column on mobile, alternating heights just look
     inconsistent, so every card gets the same height here instead. */
  .il-card--big,
  .il-card--small { min-height: 320px; }
}

/* Insights listing  */

/* ============================================================
   ASCENDION · INSIGHTS ARTICLE — Figma 1127:26659
   Two-column: article (≈65%) + sticky ToC (≈35%)
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--neutral-black); font-family: var(--typeface-secondary); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { background: var(--neutral-white); }
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { text-decoration: none; color: inherit; }
sup { font-size: 0.6em; vertical-align: super; }

.ia-buttons {
    margin-top: 20px;
}
.single.single-insight main.ia-article ul li {
    list-style: square;
	margin-bottom:8px;
}

.single.single-insight main.ia-article ul {
    padding-left: 30px;
}

.single.single-insight main.ia-article ul li::marker {
    color: var(--brand-dark-teal);
}
/* ── Shared: pixel arrow ────────────────────────────────────── */
.pixel-arrow { display: inline-block; width: var(--space-14); flex-shrink: 0; color: currentColor; }
.pixel-arrow svg { width: 100%; height: auto; display: block; }


/* ── Shared: CTAs ──────────────────────────────────────────── */
.cta-primary { display: inline-flex; align-items: stretch; cursor: pointer; }
.cta-primary__text {
  display: flex; align-items: center;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-cta); line-height: var(--lh-cta); color: var(--neutral-white);
}
.cta-primary__arrow {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-14) var(--space-16); color: var(--neutral-white);
  transition: background 240ms ease, color 240ms ease;
}
.cta-primary--light       { background: var(--neutral-deep-black-60); transition: background 320ms ease; }
.cta-primary--light:hover { background: var(--neutral-black); }
.cta-primary--light:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
.nav--scrolled .nav__actions .cta-primary--light,
.nav--scrolled .nav__actions .cta-primary--light:hover { background: transparent; }
.cta-primary--solid       { background: var(--neutral-black); }
.cta-primary--solid:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
.cta-primary--mint        {     background: var(--neutral-deep-black); }
.cta-primary--mint .cta-primary__text  { color: var(--neutral-black); }
.cta-primary--mint .cta-primary__arrow { color: var(--neutral-black); }
.cta-primary--mint:hover .cta-primary__arrow { background: var(--neutral-black); color: var(--brand-neural-mint); }


/* ── Scroll reveal ─────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 680ms cubic-bezier(.2,.7,.2,1), transform 680ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }


/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--responsive-spacing-24) var(--margin-margin);
  background-color: transparent;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background-color 320ms ease, backdrop-filter 320ms ease;
}
.nav--scrolled {
  background-color: var(--neutral-deep-black-60);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@media (min-width: 1024px) {
  .nav { padding-top: var(--responsive-spacing-12); padding-bottom: var(--responsive-spacing-12); }
}
.nav__logo { display: inline-flex; align-items: center; color: var(--neutral-white); }
.nav__logo svg { height: var(--space-32); width: auto; fill: currentColor; display: block; }
.nav__actions { display: flex; align-items: center; gap: var(--space-12); }
.nav__icon { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__icon svg { display: block; }
.nav__icon .nav__icon-mobile { display: none; }
.nav__chip { transition: fill-opacity 320ms ease; }
.nav--scrolled .nav__chip { fill-opacity: 0; }


/* ============================================================
   1 · HERO
   ============================================================ */
.ia-hero {
  position: relative; overflow: hidden;
  background: var(--neutral-deep-black);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--responsive-spacing-40);
  min-height: clamp(480px, 46vw, 660px);
  padding: calc(var(--responsive-spacing-80) + 16px) var(--margin-margin) var(--responsive-spacing-60);
}
.ia-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ia-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ia-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;background-size:cover !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.25) 30%,
    rgba(10,10,10,0.55) 65%,
    rgba(10,10,10,0.90) 100%
  );
}

/* pixel dots */
.ia-px {
  position: absolute; z-index: 2; pointer-events: none;
  width: 10px; height: 10px; background: var(--neutral-white); opacity: 0.35;
}
.ia-px--mint { background: var(--brand-neural-mint); opacity: 0.9; }

/* breadcrumb */
.ia-hero__crumbs {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--responsive-spacing-12); flex-wrap: wrap;
}
.ia-hero__crumb {
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xs);
  color: var(--neutral-white);
}
.ia-hero__crumb-dot {
  width: 6px; height: 6px; background: var(--brand-neural-mint);
  flex-shrink: 0; display: inline-block;
}
.ia-hero__crumb--current { color: rgba(255,255,255,0.55); }

/* foot: title + scroll arrow */
.ia-hero__foot {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--responsive-spacing-20);
}
.ia-hero__title {
  margin: 0; max-width: 820px;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2); line-height: var(--lh-h2); letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.ia-hero__scroll {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 46px; color: var(--brand-neural-mint);
}
.ia-hero__scroll .pixel-arrow { width: var(--space-14); transform: rotate(90deg); }


/* ============================================================
   2 · BODY GRID
   ============================================================ */
.ia-body {
  display: grid;
  grid-template-columns: 1fr 427px;
  gap: 0;
  align-items: start;
  padding: var(--responsive-spacing-60) var(--margin-margin) var(--responsive-spacing-80);
}


/* ============================================================
   ARTICLE COLUMN
   ============================================================ */
.ia-article { min-width: 0; }


/* ── SECTION CONTAINERS ─────────────────────────────────────── */
.ia-section {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding-bottom: var(--space-48);
  border-bottom: 1px solid var(--neutral-soft-grey, #f0f0f0);
}
.ia-section--last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }


/* ── SPLIT LAYOUTS ──────────────────────────────────────────── */
/* Intro: text LEFT, image RIGHT */
.ia-split { display: grid; gap: var(--space-24); align-items: start; }
.ia-split--text-left { grid-template-columns: 55% 1fr; }
.ia-split--img-left  { grid-template-columns: 1fr 55%; }

.ia-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-split--text-left .ia-split__img { max-height: 360px; overflow: hidden; }
.ia-split--img-left  .ia-split__img { max-height: 280px; overflow: hidden; }
.ia-split__text { display: flex; flex-direction: column; gap: var(--space-20); }


/* ── H2 HEADINGS ─────────────────────────────────────────────── */
.ia-h2 {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h5); line-height: var(--lh-h5); letter-spacing: -0.32px;
  color: var(--neutral-black);
}


/* ── BODY TEXT ───────────────────────────────────────────────── */
.ia-text-block { display: flex; flex-direction: column; gap: var(--space-16); }
.ia-para {
  margin: 0;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs);
  color: var(--neutral-charcoal, #333);
}
.ia-link { color: var(--neutral-black); text-decoration: underline; text-underline-offset: 2px; }
.ia-link:hover { color: var(--brand-neural-mint); }


/* ── IMAGES ──────────────────────────────────────────────────── */
.ia-figure { overflow: hidden; }
.ia-figure img { width: 100%; height: auto; display: block; }
.ia-figure--diagram { background: #0a0a0a; }
.ia-figure--diagram img { width: 100%; opacity: 0.92; }
.ia-figcaption {
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-caption); line-height: 1.55; color: rgba(0,0,0,0.45);
}


/* ── DIAGRAM CALLOUT ────────────────────────────────────────── */
.ia-callout { display: flex; flex-direction: column; gap: var(--space-12); }
.ia-callout__label {
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h6); line-height: var(--lh-h6); letter-spacing: -0.24px;
  color: var(--neutral-charcoal, #333);
}


/* ============================================================
   TABLE OF CONTENTS SIDEBAR
   ============================================================ */
.ia-toc {
  position: sticky; top: 96px; align-self: start;
  padding-left: var(--responsive-spacing-60);
}

.ia-toc__card {
  display: flex; flex-direction: column;
  gap: var(--responsive-spacing-20);
}

.ia-toc__heading {
  margin: 0; padding: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h6); line-height: var(--lh-h6);
  letter-spacing: -0.24px;
  color: var(--neutral-black);
}

.ia-toc__card nav { display: flex; flex-direction: column; gap: var(--responsive-spacing-8); }

.ia-toc__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: var(--responsive-spacing-14) var(--responsive-spacing-20);
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xs); line-height: var(--lh-body_xs);
  color: var(--neutral-slate-grey, #666);
  transition: color 200ms ease;
}
.ia-toc__item:hover { color: var(--neutral-black); }

/* Active: charcoal dark background, white text */
.ia-toc__item.is-active {
  background: var(--neutral-charcoal, #333);
  color: var(--neutral-white); font-weight: var(--weight-regular);
}
.ia-toc__item.is-active:hover { color: var(--neutral-white); }

/* right-side pixel arrow — visible only on active item */
.ia-toc__arr {
  display: none; flex-shrink: 0; width: 8px; height: 8px;
  align-items: center; justify-content: center;
}
.ia-toc__arr svg { width: 8px; height: auto; fill: var(--neutral-white); display: block; }
.ia-toc__item.is-active .ia-toc__arr { display: flex; }


/* ============================================================
   3 · AUTHOR CARD
   ============================================================ */
.ia-author-wrap {
  padding-top: var(--responsive-spacing-48);
}

.ia-author {
  gap: var(--responsive-spacing-40);
  background: var(--neutral-soft-grey, #f4f4f4);
}

.ia-author__photo {
  flex-shrink: 0; width: 164px; height: 164px; overflow: hidden;
}
.ia-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ia-author__body {
  flex: 1; display: flex; align-items: flex-end;
  gap: var(--responsive-spacing-32); min-width: 0;
}

.ia-author__info { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ia-author__name {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h5); line-height: var(--lh-h5); letter-spacing: -0.32px;
  color: var(--neutral-black);
}
.ia-author__role {
  margin: 0;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-charcoal, #333);
}

.ia-author__cta { flex-shrink: 0; background: var(--neutral-deep-black); }


/* ============================================================
   4 · RELATED INSIGHTS  (light grey background)
   ============================================================ */
.ia-related {
  background: #f5f5f5;
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.ia-related__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--responsive-spacing-40);
}

.ia-related__title {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2); line-height: var(--lh-h2); letter-spacing: -0.52px;
  color: var(--neutral-black);
}

/* "Explore All Insights" — black solid CTA button */
.ia-related__cta { flex-shrink: 0; }

/* 4-column card grid */
.ia-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

/* card — fixed total height so the image shrinks inward when CTA reveals (same as pr-card) */
.ia-card {
  display: flex; flex-direction: column;
  aspect-ratio: 9/10; min-height: 0; overflow: hidden;
}

/* media wrapper — flex: 1 1 auto so it gives up space to the CTA on hover */
.ia-card__media {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: block;
  background: #ddd;
  margin-bottom: var(--responsive-spacing-16);
  transition: flex-basis 380ms cubic-bezier(.22,.61,.36,1);
}
.ia-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 420ms ease;
}
.ia-card:hover .ia-card__media img { transform: scale(1.04); }

.ia-card__body { flex-shrink: 0; display: flex; flex-direction: column; }
.ia-card__title {
  margin: 0;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xs); line-height: var(--lh-body_xs);
  color: var(--neutral-deep-black, #1a1a1a);
}

/* "Read more" — hidden by default, slides in below title on card hover.
   Identical pattern to cs-card__cta in client-story.css */
.ia-card__cta {
  flex-shrink: 0; align-self: flex-start;
  max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transform: translateY(4px);
  transition: max-height 380ms cubic-bezier(.22,.61,.36,1),
              margin-top 380ms cubic-bezier(.22,.61,.36,1),
              opacity 260ms ease, transform 300ms ease;
}
.ia-card:hover .ia-card__cta,
.ia-card:focus-within .ia-card__cta {
  max-height: 56px; margin-top: var(--responsive-spacing-16);
  opacity: 1; pointer-events: auto; transform: none;
}



/* ============================================================
   MOBILE  ≤767px
   ============================================================ */
@media (max-width: 767px) {

  /* nav */
  .nav .cta-primary--light { display: none; }
  .nav__icon .nav__icon-desktop { display: none; }
  .nav__icon .nav__icon-mobile { display: block; }

  /* hero */
  .ia-hero { min-height: 500px; padding-left: 20px; padding-right: 20px; }
  .ia-hero__title { font-size: clamp(30px, 8vw, 42px); line-height: 1.2; }

  /* body: single column */
  .ia-body {
    grid-template-columns: 1fr;
    padding: var(--responsive-spacing-40) 20px;
  }

  /* ToC above article — reset padding added for desktop */
  .ia-toc { position: static; order: -1; margin-bottom: var(--responsive-spacing-32); padding-left: 0; padding-top: 0; }

  /* split layouts stack vertically */
  .ia-split--text-left,
  .ia-split--img-left { grid-template-columns: 1fr; }
  .ia-split--img-left .ia-split__img { order: -1; }
  .ia-split--text-left .ia-split__img { max-height: 260px; }
  .ia-split--img-left .ia-split__img  { max-height: 220px; }

  /* author */
  .ia-author { flex-wrap: wrap; padding: 0 20px 20px; gap: var(--responsive-spacing-20); }
  .ia-author__photo { width: 80px; height: 80px; }
  .ia-author__body { flex-wrap: wrap; gap: var(--responsive-spacing-16); }
  .ia-author__cta { width: 100%; }

  /* related */
  .ia-related { padding: var(--responsive-spacing-48) 20px; }
  .ia-related__head { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .ia-related__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  /* touch — reset card to auto height, image to fixed ratio, CTA always shown */
  .ia-card { aspect-ratio: auto; overflow: visible; }
  .ia-card__media { flex: 0 0 auto; aspect-ratio: 16/10; }
  .ia-card__cta { max-height: none; margin-top: var(--responsive-spacing-16); opacity: 1; pointer-events: auto; transform: none; transition: none; }

  /* footer */
  .site-footer__top { flex-direction: column; gap: var(--space-32); padding: 0;align-items:start !important; }
  .site-footer__brand { flex-direction: row; align-items: center; gap: var(--space-20); }
  .site-footer__glyph { width: 44px; }
  .site-footer__cols { flex-direction: column; gap: var(--space-32); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; padding: var(--space-32) 0 ; gap: var(--space-32); }
  .site-footer__legal { flex-direction: column; gap: var(--space-12); }
}


/* ============================================================
   TABLET  768px – 1023px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .ia-body { grid-template-columns: 1fr 280px; }
  .ia-toc { padding-left: var(--responsive-spacing-32); padding-top: var(--responsive-spacing-48); }
  .ia-related__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
  /* touch — reset card to auto height, image to fixed ratio, CTA always shown */
  .ia-card { aspect-ratio: auto; overflow: visible; }
  .ia-card__media { flex: 0 0 auto; aspect-ratio: 16/10; }
  .ia-card__cta { max-height: none; margin-top: var(--responsive-spacing-16); opacity: 1; pointer-events: auto; transform: none; transition: none; }
}
@media (max-width: 768px) {
		.il-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 10px;
    height: 10px;
    background: var(--neutral-white);
    pointer-events: none;
}
}

/* ============================================================
   ASCENDION · CONTACT FORM TABS  [contact_form_tabs]
   Kept in sync with the inline <style> block in contact-form-tabs.php —
   that inline copy is what actually renders (an external <link> depends on
   this file existing at the right theme path, which is unreliable across
   environments), but this file is the source of truth to edit and copy
   from when the two need to change together.

   Tab nav (mint pill = active) + grey card with a two-column grid:
   intro (heading/phone/decorative graphic) on the left, the per-tab
   HubSpot embed on the right. The form fields themselves are rendered by
   HubSpot, not this stylesheet — see the `css` string passed to
   hbspt.forms.create() in contact-form-tabs.php for that part.
   ============================================================ */
.page-id-2333 .hs_submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
}

.page-id-2333 .hs_submit .actions {
    display: inline-block;
}

.page-id-2333 .hs_submit .hs-button {
    padding-right: 50px !important;
    border-radius: 0;
    font-size: 18px;
    line-height: 0;
}

.page-id-2333 .hs_submit .cf-submit-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.page-id-2333 .bn__pixels {
    background: #fff;
}
.page-id-2333 .hs_submit .cf-submit-arrow svg {
    width: 14px;
    height: 22px;
}

.page-id-2333 .hs_submit .cf-submit-arrow rect {
    fill: #fff;
}

.cf-tabs {
  margin: 0 auto;
  padding: var(--responsive-spacing-80) var(--margin-margin);
  font-family: var(--typeface-secondary);
  color: #000000;
	background: var(--neutral-white);
}

.cf-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
    border-bottom: 1px solid var(--neutral-light-grey);
}
.legal-consent-container .hs-richtext:first-child p {
    font-size: var(--font-body_s);
    color: #000;
    margin-bottom: 10px;
}



li.hs-form-booleancheckbox input.hs-input {
    background: #ccc !important;
    width: 20px !important;
    height: 20px;
}
.cf-panel__form-wrap input,.cf-panel__form-wrap textarea,.cf-panel__form-wrap select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
	height:40px;
}
.cf-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-body_s);
 line-height : var(--lh-body_s);	
  font-weight: 500;
  color: #000000;
     padding: 20px 24px;
    transition: background-color 150ms ease, color 150ms ease;
}
.cf-tab:not(.is-active):hover { background: #f4f4f4; }
.cf-tab.is-active { background: #008567; color: #ffffff; } /* --brand-dark-teal */

.cf-tabs__panels {
  background: #f4f4f4;
  padding: var(--responsive-spacing-80);
}

.cf-panel { display: none; }
.cf-panel.is-active { display: block; }

.cf-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
}

.cf-panel__intro {
  position: relative;
  min-height: 220px;
  padding-bottom: 140px; /* reserves room for .cf-panel__deco below the text */
}

.cf-panel__heading {
  font-size: var(--font-h2);
  font-family: var(--typeface-primary);	
  line-height: var(--lh-h2);
  font-weight: 400;
  margin: 0 0 16px;
}

.cf-panel__phone { margin: 0;
	 font-size: var(--font-body-l);
}
.cf-panel__phone a {
  color: #008567;
 font-size: var(--font-body-l);
  text-decoration: none;
  font-weight: 400;
}
.cf-panel__phone a:hover { text-decoration: underline; }

.cf-panel__deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 130px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cf-panel__form-wrap { min-width: 0; }
.cf-panel__placeholder { color: #767676; font-style: italic; margin: 0; }

@media (max-width: 767px) {
	.cf-tabs__panels {
  background: #f4f4f4;
  padding: var(--responsive-spacing-40);
}
  .cf-tabs__nav {
    flex-wrap: nowrap;          /* no wrapping */
    overflow-x: auto;           /* horizontal scroll instead */
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    scrollbar-width: none;      /* hide scrollbar (Firefox) */
  }

  .cf-tabs__nav::-webkit-scrollbar {
    display: none;              /* hide scrollbar (Chrome/Safari) */
  }

  .cf-tab {
    flex: 0 0 auto;             /* tabs hug their content, don't shrink */
    white-space: nowrap;        /* keep label on one line */
    padding: 14px 20px;         /* slightly tighter on mobile (optional) */
  }
  .cf-tabs__nav {
  scroll-behavior: smooth;
}

/* Arrow chip injected by the script into HubSpot's own submit button
   wrapper (.hs_submit.hs-submit) — matches the pixel-arrow used on
   buttons elsewhere on the site. Lives here (not in the per-tab `css`
   string) because it styles a node WE add via JS, not one HubSpot renders.
   Given its own dark chip background (matching the submit button's own
   #1A1A1A): it sits beside the button, not inside it — a native
   <input type="submit"> can't contain child nodes — so a white icon with
   no background of its own would be invisible against the light-grey
   card behind it. */
.hs_submit.hs-submit {
    display: inline-flex;
    align-items: center;
    background: #1A1A1A;
    margin-top: 13px;
    color: white;
    font-size: 18px;
}

.cf-submit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #1A1A1A;
  color: #ffffff;
  border-radius: 100px;
}
.cf-submit-arrow svg { width: 9px; height: 15px; fill: currentColor; }

@media (max-width: 900px) {
  .cf-panel__grid { grid-template-columns: 1fr; }
  .cf-panel__intro { min-height: 0; padding-bottom: 0; margin-bottom: 24px; }
  .cf-panel__deco { position: static; margin-top: 24px; }
}

@media (max-width: 719px) {
	  .cf-panel__deco { 
		  position: static; 
		  margin-top: 24px;
		  display: none;
	}

}
.page-id-2333 section.shortcode-section,.page-id-2333 .bn__pixels {
    background: #fff;
}

.page-id-2333 section.shortcode-section:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(#1a1a1a, #1a1a1a);
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}