/* ==========================================================================
   Mergen overrides — additions on top of styles.css / infinity.css / sections.css.
   Kept in a separate file so the original reference stylesheets stay untouched.
   ========================================================================== */

/* ─── METHODOLOGY SECTION ──────────────────────────────────────────────────
   The reference site has methodology HTML but the bundled CSS files don't
   include matching rules — added here so the section renders properly.
   ────────────────────────────────────────────────────────────────────────── */
.methodology-section {
  padding: 100px 80px;
  background: var(--color-bg-section);
  position: relative;
}
.methodology-header {
  max-width: 1200px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
.methodology-heading {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
}
.methodology-heading strong {
  background: var(--color-green-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.methodology-desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-gray-light);
  max-width: 520px;
}
.methodology-steps {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.methodology-step {
  background: var(--color-bg-darker);
  border: 1px solid var(--overlay-white-06);
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.methodology-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-green-gradient);
  opacity: 0;
  transition: opacity .25s;
}
.methodology-step:hover {
  transform: translateY(-4px);
  border-color: var(--glow-green-30);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.methodology-step:hover::before { opacity: 1; }
.methodology-step .step-number {
  font-size: 44px;
  font-weight: 800;
  background: var(--color-green-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  line-height: 1;
  letter-spacing: -1px;
}
.methodology-step .step-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px;
  line-height: 1.3;
}
.methodology-step .step-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-gray-light);
}
@media (max-width: 1100px) {
  .methodology-steps { grid-template-columns: repeat(2, 1fr); }
  .methodology-header { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .methodology-section { padding: 60px 24px; }
  .methodology-steps { grid-template-columns: 1fr; }
}

/* ─── MEGA MENU — bigger / bolder column headings ─────────────────────────
   Section labels (OVERVIEW / IMPLEMENTATION & CONSULTING / etc.) felt thin
   and small in the existing styles. Bump weight, size, and tracking.
   ────────────────────────────────────────────────────────────────────────── */
.mega-heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  margin-bottom: 18px;
  margin-top: 28px;
}
.mega-col .mega-heading:first-child { margin-top: 0; }

.mega-links a {
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  transition: color .18s, background .18s, transform .18s, font-weight .18s;
}
.mega-links a:hover {
  color: var(--color-green);
  font-weight: 700;
  background: rgba(76, 218, 132, 0.10);
  transform: translateX(6px);
}

/* ─── GLOBAL LINK HOVER — brand green + bold ───────────────────────────────
   Applied to common navigational/content links across the site so hover
   feedback is consistent. Excludes buttons/CTAs that already have their
   own hover treatment.
   ────────────────────────────────────────────────────────────────────────── */
.panel-links a:hover,
.industry-tag:hover,
.stories-card-link:hover,
.insight-cta:hover,
.pillar-cta:hover,
.industries-explore:hover,
.stories-see-all:hover,
.insight-tab:hover,
.banner-btn:hover,
.footer-col a:hover,
.footer-legal a:hover {
  color: var(--color-green) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ─── INSIGHTS — make whole card clickable + hover lift ─────────────────── */
.insight-card {
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.insight-card:hover {
  transform: translateY(-4px);
  border-color: var(--glow-green-30);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.insight-card:hover .insight-title { color: var(--color-green); }
a.insight-card { text-decoration: none; display: block; }

/* ─── CTA CARDS — visible hover + green title ────────────────────────────── */
.cta-card {
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--glow-green-20);
  border-color: var(--glow-green-40);
}
.cta-card:hover h3 { color: var(--color-green); }

/* ─── STORIES — "Read Case Study" link visible hover ───────────────────── */
.stories-card-link:hover { letter-spacing: 1px; }

/* ─── INSIGHTS SLIDER (when more than 4 items) ─────────────────────────── */
.insights-slider-wrap { position: relative; }
.insights-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.insights-slider::-webkit-scrollbar { height: 6px; }
.insights-slider::-webkit-scrollbar-thumb { background: var(--color-green); border-radius: 3px; }
.insights-slider .insight-card {
  flex: 0 0 calc(25% - 18px);
  min-width: 280px;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .insights-slider .insight-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 700px) {
  .insights-slider .insight-card { flex: 0 0 85%; }
}
.insights-slider-controls {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}
.insights-slider-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-green);
  background: transparent;
  color: var(--color-green);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s, color .2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.insights-slider-btn:hover { background: var(--color-green); color: var(--color-bg-dark); }
.insights-slider-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ─── INSIGHTS LANDING — hero / type-pills / featured-card ───────────── */
.insights-hero {
  position: relative;
  background-blend-mode: soft-light;
}
.insights-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(76, 218, 132, 0.18), transparent 60%);
  pointer-events: none;
}

.insights-typebar {
  background: var(--color-bg-darker);
  border-top: 1px solid var(--overlay-white-06);
  border-bottom: 1px solid var(--overlay-white-06);
  padding: 18px 80px;
  /* Sticky removed — see HERO section above. The pill row was overlapping
     hero text on first paint. It now scrolls with the page. */
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── ACTIVE FILTER STRIP — used on /resource-type/{slug}/?topic=… archives ─
   Shows the user's currently applied filter ("ITOM × · View all case studies →")
   so they understand they're looking at a filtered view, not the full archive.
   Sits directly under the type-pill row. */
.insights-activefilter {
  padding: 14px 80px;
  background: linear-gradient(180deg,
    rgba(76, 218, 132, 0.06) 0%,
    rgba(76, 218, 132, 0.0) 100%);
  border-bottom: 1px solid var(--overlay-white-06);
}
.insights-activefilter-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}
.insights-activefilter-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.insights-activefilter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: rgba(76, 218, 132, 0.14);
  border: 1px solid rgba(76, 218, 132, 0.45);
  border-radius: 999px;
  color: var(--color-green, #4cda84);
  font-weight: 700;
}
.insights-activefilter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(76, 218, 132, 0.20);
  color: var(--color-green, #4cda84);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  transition: background .2s, transform .2s;
}
.insights-activefilter-clear:hover {
  background: var(--color-green, #4cda84);
  color: var(--color-bg-dark, #0b1f2c);
  transform: rotate(90deg);
}
.insights-activefilter-link {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
.insights-activefilter-link:hover { color: var(--color-green, #4cda84); }
@media (max-width: 800px) {
  .insights-activefilter { padding: 12px 24px; }
  .insights-activefilter-link { margin-left: 0; }
}
.insights-typebar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.insights-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.insights-pill:hover {
  background: rgba(76, 218, 132, 0.10);
  color: var(--color-green);
  transform: translateY(-1px);
}
.insights-pill--active {
  background: var(--color-green);
  color: var(--color-bg-dark);
  font-weight: 700;
}
.insights-pill--active:hover {
  background: var(--color-green);
  color: var(--color-bg-dark);
}
.insights-pill-count {
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.insights-pill--active .insights-pill-count {
  background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 700px) {
  .insights-typebar { padding: 14px 16px; position: static; }
}

/* Featured-card section */
.insights-featured-section {
  padding: 70px 80px 30px;
  max-width: 1280px;
  margin: 0 auto;
}
.insights-featured-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.insights-featured-card {
  display: block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
  text-decoration: none;
  color: var(--color-white);
  border: 1px solid var(--overlay-white-06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.insights-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border-color: var(--glow-green-30);
}
.insights-featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.insights-featured-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient( to top, rgba(8, 26, 36, 0.95) 0%, rgba(8, 26, 36, 0.65) 50%, rgba(8, 26, 36, 0.30) 100% );
}
.insights-featured-content {
  position: relative;
  z-index: 1;
  padding: 50px 56px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  justify-content: flex-end;
}
.insights-featured-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin: 14px 0 18px;
  color: var(--color-white);
}
.insights-featured-excerpt {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-gray-light);
  margin-bottom: 24px;
}
.insights-featured-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: var(--color-gray-light);
}
.insights-featured-cta {
  color: var(--color-green);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.insights-featured-card:hover .insights-featured-cta {
  letter-spacing: 1.5px;
}
@media (max-width: 800px) {
  .insights-featured-section { padding: 40px 24px 20px; }
  .insights-featured-content { padding: 32px 24px; }
}

/* Per-type section header on the all-resources landing */
.insights-type-section { padding-top: 30px; padding-bottom: 30px; }
.insights-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto 28px;
}
.insights-section-header .insights-heading {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  text-align: left;
}
.insights-see-all {
  color: var(--color-green);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: letter-spacing .2s;
}
.insights-see-all:hover { letter-spacing: 1.5px; }

/* Hide the gradient sub-page hero overlay on insights archives so the type-specific
 * accent on the section background actually shows through. */
.insights-hero .hero-shader-canvas { opacity: 0.10 !important; }

/* ─── DENSER ARCHIVE LAYOUT ────────────────────────────────────────────────
   Smaller hero, tighter grid, less vertical whitespace on the resources
   archive + type archives. Goal: more cards above the fold.
   ────────────────────────────────────────────────────────────────────────── */
.insights-hero {
  min-height: 0 !important;
}
.insights-hero .hero-section {
  min-height: 0 !important;
}
.insights-hero.hero-section--subpage {
  min-height: 38vh !important;
}
/* Specificity bumped (`.hero-section.insights-hero` matches the same element
   with one extra class) so this rule wins over the later shared
   `.hero-section .hero-grid` block (which applies 110px padding-top across
   all other heroes to match the home L1). The insights archive intentionally
   uses a tighter top so more cards fit above the fold. */
.hero-section.insights-hero .hero-grid {
  padding: 60px 80px 50px !important;
}
@media (max-width: 800px) {
  .insights-hero.hero-section--subpage { min-height: 0 !important; }
  .hero-section.insights-hero .hero-grid { padding: 40px 24px !important; }
}

/* 4-up grid on desktop (was 3-up via inherited .insights-grid). Density up ~25%. */
.insights-archive-grid .insights-grid,
section.insights-section .insights-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Shrink section padding so type-sections stack tightly */
.insights-section { padding: 40px 80px; }
.insights-archive-grid { padding: 30px 80px 60px; }
.insights-type-section { padding-top: 24px !important; padding-bottom: 24px !important; }
@media (max-width: 800px) {
  .insights-section,
  .insights-archive-grid { padding-left: 24px; padding-right: 24px; }
}

/* Compact insight-card — less padding, smaller image, tighter typography */
.insight-card {
  padding: 16px;
  border-radius: 14px;
}
.insight-card .insight-image {
  height: 140px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.insight-card .insight-tag {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 3px 0px;
}
.insight-card .insight-title {
  font-size: 16px;
  line-height: 1.35;
  margin: 8px 0 8px;
}
.insight-card .insight-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 10px;
  /* Limit to 3 lines so cards stay equal-height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-card .insight-cta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Featured card — slightly smaller (the old version was huge) */
.insights-featured-card { min-height: 340px; }
.insights-featured-content {
  padding: 36px 40px;
  min-height: 340px;
}
.insights-featured-title {
  font-size: clamp(24px, 2.6vw, 36px);
  margin: 10px 0 12px;
}
.insights-featured-excerpt {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.insights-featured-section { padding: 36px 80px 16px; }
@media (max-width: 800px) {
  .insights-featured-section { padding: 24px 24px 12px; }
  .insights-featured-content { padding: 24px 20px; min-height: 280px; }
  .insights-featured-card    { min-height: 280px; }
}

/* Related-resources block on module/technology/industry pages — same compact card style */
.related-resources { padding: 60px 80px; background: var(--color-bg-section); }
.related-resources .insights-section-header { margin-bottom: 24px; }
.related-resources .insights-heading {
  font-size: clamp(22px, 2.2vw, 30px);
  text-align: left;
}
@media (max-width: 800px) {
  .related-resources { padding: 40px 24px; }
}

/* ─── INFINITY DOTS — bigger + stronger glow ──────────────────────────────
   Reference image used dots roughly 24px with a soft outer halo. We bump the
   circle from 18px → 24px and tighten the glow so they read clearly against
   the bright ribbon. Shifted label offsets compensate for the new diameter so
   text doesn't overlap the dot. */
.inf-dot-circle {
  width: 24px;
  height: 24px;
  border: 3px solid #ffffff;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(76, 218, 132, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.55);
}
.inf-dot-label-top    .inf-dot-label { bottom: 22px; }
.inf-dot-label-bottom .inf-dot-label { top:    22px; }
.inf-dot-label-left   .inf-dot-label { right:  22px; }
.inf-dot-label-right  .inf-dot-label { left:   22px; }
.inf-dot:hover .inf-dot-circle,
.inf-dot.active .inf-dot-circle {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--color-green);
  border-color: var(--color-green);
  box-shadow:
    0 0 0 5px rgba(76, 218, 132, 0.22),
    0 0 28px rgba(76, 218, 132, 0.85),
    0 0 56px rgba(76, 218, 132, 0.45);
}
@media (max-width: 800px) {
  .inf-dot-circle { width: 18px; height: 18px; border-width: 2px; }
  .inf-dot-label-top    .inf-dot-label { bottom: 16px; }
  .inf-dot-label-bottom .inf-dot-label { top:    16px; }
  .inf-dot-label-left   .inf-dot-label { right:  16px; }
  .inf-dot-label-right  .inf-dot-label { left:   16px; }
}

/* ─── SOLUTIONS TAB BAR — branded pill-shaped container ───────────────────
   The bare tab row felt unanchored against the dark canvas behind it. Wrap
   the row in a glass-pill container with a subtle teal/green brand border so
   it reads as a deliberate UI element on every page that hosts the section.

   Scrolling: horizontal scroll stays available for narrow viewports / many
   tabs (touch-swipe still works) but the scrollbar itself is hidden across
   Chrome/Edge/Safari/Firefox — the pill should never show a chrome scrollbar
   inside it. Vertical overflow is clamped to `clip` so a stray descender or
   focus outline can't trigger a y-scrollbar either. */
.solutions-tabs-bar {
  /* High-contrast pill with explicit !important so any cached/competing CSS can't override
     the visibility. Lighter slate background reads clearly against the dark page; vivid
     green border + glow signal "this is interactive UI". */
  background: linear-gradient(135deg, #1e3a5c 0%, #142b46 100%) !important;
  border: 2px solid #4cda84 !important;
  border-radius: 60px !important;
  padding: 10px 14px !important;
  margin: 20px auto 0 !important;
  max-width: 1240px !important;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(76, 218, 132, 0.25) !important;

  position: relative !important;
  z-index: 10 !important;

  /* Scroll behaviour — horizontal swipe stays available, but the chrome scrollbar is hidden. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;

  /* Native scroll-into-view offset — the browser will respect this whenever an
     element.scrollIntoView() lands on this element, so we don't have to compute the
     header + banner heights manually in every dot-click handler. */
  scroll-margin-top: calc(var(--nav-height, 70px) + var(--banner-height, 50px) + 20px);
}
.solutions-tabs-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Brighter inactive tab text so labels are readable against the new pill background. */
.solutions-tabs-bar .solution-tab {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600;
}
.solutions-tabs-bar .solution-tab:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff !important;
}
.solutions-tabs-bar .solution-tab.active {
  color: var(--color-bg-dark) !important;
  background: #ffffff !important;
}
/* WebKit (Chrome, Edge, Safari, Opera) — collapse the scrollbar entirely. */
.solutions-tabs-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.solutions-tabs-bar::before {
  /* Faint gradient ring so the brand greens hint at the edge without washing
     out the tabs. Pure decoration. */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(76, 218, 132, 0.45) 0%,
    rgba(72, 209, 204, 0.18) 45%,
    rgba(76, 218, 132, 0.05) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.solutions-tabs-bar .solution-tab {
  padding: 12px 18px;
  border-radius: 40px;
  border: none;
  font-weight: 600;
}
.solutions-tabs-bar .solution-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.solutions-tabs-bar .solution-tab.active {
  background: #ffffff;
  color: var(--color-bg-dark);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(76, 218, 132, 0.4);
}
@media (max-width: 800px) {
  .solutions-tabs-bar {
    margin: 18px 16px 0;
    padding: 6px 8px;
    border-radius: 40px;
  }
  .solutions-tabs-bar .solution-tab { padding: 10px 12px; font-size: 12px; }
}

/* ─── RESOURCE TYPE LANDING — VALUE-PROP STRIP ────────────────────────────
   Three "why this matters" cards under the hero so the page lands with
   substance even before the featured/grid scrolls into view. */
.resource-valueprop-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 80px 24px;
}
.resource-valueprop-header {
  text-align: center;
  margin-bottom: 36px;
}
.resource-valueprop-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 10px;
}
/* `.resource-valueprop-heading` styling intentionally removed here — the
   shared section-heading rule further down (next to `.pillars-heading`,
   `.industries-heading`, etc.) handles size, gradient, and tracking so every
   "second section" heading on the site reads with the same visual weight.
   Per user request: align this heading with the rest. */
.resource-valueprop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.resource-valueprop-card {
  background: linear-gradient(160deg,
    rgba(76, 218, 132, 0.06) 0%,
    rgba(72, 209, 204, 0.03) 100%),
    var(--overlay-white-03);
  border: 1px solid var(--overlay-white-08);
  border-radius: 16px;
  padding: 28px 26px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.resource-valueprop-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(76, 218, 132, 0.10), transparent 60%);
  pointer-events: none;
}
.resource-valueprop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 218, 132, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.resource-valueprop-icon {
  font-size: 28px;
  margin-bottom: 14px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(76, 218, 132, 0.18),
    rgba(72, 209, 204, 0.10));
  border: 1px solid rgba(76, 218, 132, 0.22);
}
.resource-valueprop-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}
.resource-valueprop-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-gray-light);
}
@media (max-width: 800px) {
  .resource-valueprop-section { padding: 32px 24px 16px; }
  .resource-valueprop-grid    { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── HERO SIDE STATS (TYPE LANDING) ──────────────────────────────────────
   The four-up stats grid that sits opposite the headline on the type pages.
   Uses the same .hero-side-stats base as the main archive but tighter so
   four numbers fit in the column without overflowing on 1366×768 laptops. */
.hero-side-stats--type {
  grid-template-columns: 1fr 1fr;
  gap: 24px 36px;
  max-width: 460px;
}
.hero-side-stats--type .hero-side-stat-num {
  font-size: clamp(28px, 3vw, 40px);
}
.hero-side-stats--type .hero-side-stat-label {
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* ─── BROWSE STRIP (industry / module quick filters) ──────────────────── */
.resource-browse-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 80px 24px;
}
.resource-browse-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--overlay-white-06);
  flex-wrap: wrap;
}
.resource-browse-row:first-child { border-top: none; }
.resource-browse-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-light);
  flex-shrink: 0;
  min-width: 160px;
}
.resource-browse-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resource-browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--overlay-white-05);
  border: 1px solid var(--overlay-white-08);
  border-radius: 18px;
  text-decoration: none;
  transition: all .25s ease;
}
.resource-browse-pill:hover {
  background: rgba(76, 218, 132, 0.12);
  border-color: rgba(76, 218, 132, 0.5);
  color: var(--color-white);
  transform: translateY(-1px);
}
.resource-browse-pill span {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-green);
  background: rgba(76, 218, 132, 0.12);
  padding: 2px 7px;
  border-radius: 10px;
}
@media (max-width: 800px) {
  .resource-browse-section { padding: 8px 24px 16px; }
  .resource-browse-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .resource-browse-label { min-width: 0; }
}

/* ─── ARCHIVE GRID HEADER + RESULT COUNT ────────────────────────────── */
.insights-result-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-light);
  letter-spacing: 0.5px;
}

/* Decorative gradient inside cards that don't have a thumbnail uploaded —
   keeps the grid visually populated even with the seeded data. */
.insight-image-decor {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(76, 218, 132, 0.32), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(72, 209, 204, 0.26), transparent 50%);
  pointer-events: none;
}
.insight-card .insight-image { position: relative; overflow: hidden; }
.insight-tag-sep { opacity: .55; margin: 0 4px; }

/* ─── PAGINATION ───────────────────────────────────────────────────── */
.insights-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--overlay-white-06);
}
.insights-pagination-item a,
.insights-pagination-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--overlay-white-05);
  border: 1px solid var(--overlay-white-08);
  border-radius: 10px;
  text-decoration: none;
  transition: all .2s ease;
}
.insights-pagination-item a:hover {
  background: rgba(76, 218, 132, 0.12);
  border-color: rgba(76, 218, 132, 0.5);
  color: var(--color-white);
}
.insights-pagination-item .current {
  background: var(--color-green-gradient);
  border-color: transparent;
  color: var(--color-bg-dark);
}
.insights-pagination-item .dots {
  border: none;
  background: transparent;
  color: var(--color-gray-light);
}

/* ─── SINGLE RESOURCE — HERO + AT-A-GLANCE CARD ──────────────────────── */
.resource-single-hero .hero-grid {
  align-items: center;
}
.resource-single-text { max-width: 720px; }
.resource-single-title {
  font-size: clamp(28px, 3.4vw, 48px) !important;
  line-height: 1.15 !important;
  margin-bottom: 18px;
}
.resource-single-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.3px;
}
.resource-meta-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 10px rgba(76, 218, 132, 0.7);
  margin-right: 6px;
  vertical-align: middle;
}
.resource-meta-sep { opacity: .35; }
.resource-meta-item { display: inline-flex; align-items: center; }

.resource-single-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.resource-glance-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg,
    rgba(11, 31, 44, 0.85),
    rgba(8, 26, 36, 0.92));
  border: 1px solid rgba(72, 209, 204, 0.30);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.resource-glance-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 14px;
}
.resource-glance-thumb {
  width: 100%;
  aspect-ratio: 5/3;
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--color-bg-darker);
  position: relative;
  overflow: hidden;
}
.resource-glance-thumb--decor {
  background:
    radial-gradient(circle at 30% 20%, rgba(76, 218, 132, 0.22), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(72, 209, 204, 0.20), transparent 55%),
    var(--color-bg-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-glance-thumb--decor svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Content-aware glance visuals — each pattern picks its own colour treatment so
   the card never feels generic. SVG paint is set inline; this sets layout only. */
.resource-glance-thumb--decor .glance-svg { width: 100%; height: 100%; }
/* Subtle ambient animation on the active outcome marker for the case-study bar
   chart, to mirror the "live" feel of the brand ribbon in other parts of the
   site without touching the static parts of the SVG.

   `will-change: transform` on the animated circles promotes them to their own
   compositor layer so the 2.6s loop doesn't trigger paint on every frame on
   low-power GPUs. Scoped tightly so we don't blow up GPU memory site-wide. */
@keyframes glancePulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: .55; }
}
.resource-glance-thumb--decor .glance-svg--case circle,
.resource-glance-thumb--decor .glance-svg--cur  circle:last-of-type,
.resource-glance-thumb--decor .glance-svg--newsletter circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: glancePulse 2.6s ease-in-out infinite;
  will-change: transform;
}

/* Solution-panel fade-in animation gets a will-change + cubic-bezier so the
   browser can preallocate the layer and the easing matches the rest of the
   site's motion language. Without will-change, the entrance animation
   sometimes flickers on the first tab swap. */
.solution-panel {
  animation: panelFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* ─── ACCESSIBILITY — keyboard focus indicators ─────────────────────────────
   Every interactive element in the theme needs a visible focus ring for users
   navigating with Tab. The browser default outline is too subtle on dark
   backgrounds; we override with a high-contrast brand-green outline that only
   appears for keyboard navigation (`:focus-visible`), not mouse clicks. */
a:focus-visible,
button:focus-visible,
.insight-card:focus-visible,
.resource-browse-pill:focus-visible,
.resource-body-side-pill:focus-visible,
.sidebar-panel-cat:focus-visible,
.sidebar-panel-card:focus-visible,
.solution-tab:focus-visible,
.insights-pill:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Tighter offset for elements that already have rounded corners — keeps the
   ring snug against the shape rather than floating outside. */
.insights-pill:focus-visible,
.resource-browse-pill:focus-visible,
.solution-tab:focus-visible,
.resource-body-side-pill:focus-visible {
  outline-offset: 2px;
}

/* Touch-target sizing — infinity dots need a larger hit area on touch devices.
   The .inf-dot button itself is zero-size (positioned by JS); we expand the
   clickable area via padding without affecting the visual circle. */
@media (pointer: coarse) {
  .inf-dot {
    min-width: 44px;
    min-height: 44px;
    transform: translate(-22px, -22px);
  }
  .inf-dot-circle { transform: translate(50%, 50%); }
}

/* ─── HERO — remove the dead vertical space at the top ─────────────────────
   Two hero variants exist:
     - `.hero-section`           (home L1) — was forced to viewport height with
                                              centred content
     - `.hero-section--subpage`  (L2/L3/L4, resources, contact, etc.) — flex
                                              container with `align-items: center`
                                              vertically centring the carousel in
                                              a 60vh box

   Both produced 200-400 px of empty dark space above the eyebrow / headline.
   Below: BOTH variants get the same treatment — top-aligned content, sensible
   padding, no forced viewport height. KEY: on the subpage variant we ONLY
   override `align-items` from `center` → `flex-start`. We DO NOT touch
   `min-height` or the inner `.hero-text-block` padding — touching either of
   those last time collapsed the L2/L3 layout. */

/* Shared: home L1 hero. */
.hero-section {
  height: auto !important;
  min-height: 75vh;
}
.hero-section .hero-grid {
  align-items: start !important;
  padding: 60px 80px 100px !important;
  /* `minmax(0, 1fr)` lets columns SHRINK below intrinsic content width so a
     long word in the headline doesn't push the column past the viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
/* SHARED hero spacing — both home (L1) and subpage (L2/L3/L4) heroes get the
   same generous top padding so the eyebrow sits at a consistent distance from
   the banner across every page. (Earlier this was scoped to `:not(--subpage)`
   which made L2 eyebrows hug the top banner ~50px tighter than the home page;
   the user reported the inconsistency between `/` and `/module/itsm/`.) The
   subpage variant zeroes the inner text-block padding below, so applying the
   110px here keeps both variants visually identical at the eyebrow line. */
.hero-section .hero-grid {
  padding-top: 110px !important;
}
@media (max-width: 900px) {
  .hero-section .hero-grid { padding-top: 50px !important; }
}

/* Subpage hero (L2/L3/L4/resource/contact) — pull content to the top AND remove
   the inner text-block's 60px top/bottom padding. The original styles.css adds
   `.hero-section--subpage .hero-text-block { padding: 60px 80px }` which stacks
   on top of the .hero-grid's 60px top padding, producing a 120px gap between the
   banner and the eyebrow on every L2/L3/L4 page. The home page doesn't have that
   double padding because L1 templates don't carry the `--subpage` class. We zero
   out only the VERTICAL padding so the horizontal 80px is preserved (otherwise
   the text would butt up against the grid edge). */
.hero-section--subpage {
  align-items: flex-start !important;
}
.hero-section--subpage .hero-text-block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  .hero-section            { min-height: 0; }
  .hero-section .hero-grid { padding: 40px 24px 60px !important; grid-template-columns: 1fr !important; }
}

/* ─── BREADCRUMB — pull out of flow so it doesn't displace the hero ───────────
   Inner pages (L2/L3/L4) render <nav class="breadcrumb"><ol>…</ol></nav> in
   normal flow ABOVE the hero-section. With no theme styles, the <ol> uses the
   browser default (~16px top + ~16px bottom margin + line-height) ≈ 60px of
   vertical space. The hero-section then adds its `margin-top` (nav + banner) on
   TOP of that, so on inner pages the eyebrow sits ~60px lower than on home.
   The user wants both to look identical, so we pull the breadcrumb out of
   normal flow (`position: absolute`) and place it as a thin strip pinned just
   under the announcement banner. The breadcrumb stays visible and useful, but
   it no longer affects the hero's vertical position — inner pages now match
   the home page exactly at the eyebrow line. */
.breadcrumb {
  position: absolute;
  top: calc(var(--nav-height, 60px) + var(--banner-height, 48px));
  left: 0;
  right: 0;
  z-index: 4;                       /* above the hero shader, below the nav */
  margin: 0;
  padding: 14px 80px;
  pointer-events: auto;
  background: transparent;
}
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb-item a:hover { color: var(--color-green, #4cda84); }
.breadcrumb-current { color: rgba(255, 255, 255, 0.4); }
.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.25);
  margin: 0 2px;
}
@media (max-width: 900px) {
  .breadcrumb { padding: 10px 24px; }
  .breadcrumb-list { font-size: 11px; }
}

/* ─── HERO HEADLINE — responsive sizing that doesn't overflow ────────────────
   Original `clamp(42px, 5vw, 72px)` scaled too aggressively with viewport width
   and pushed the text out of its column on full-screen browsers (especially
   when a long word like "transformation" hits the cap). Tighter clamp keeps
   the headline inside its column.

   GLOBAL rule (per user): a single word must never split across two lines.
   We use `overflow-wrap: normal` (the default) and explicitly disable hyphens
   so words are kept whole. If a single word can't fit, it'll wrap to its own
   line as a unit — which is the desired behaviour. */
.hero-headline {
  font-size: clamp(36px, 3.5vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
.hero-text-block {
  max-width: none !important;        /* let the headline use the full column */
  min-width: 0;                       /* paired with minmax(0,1fr) above */
}
.hero-text-block .hero-subtitle { max-width: 520px; }
@media (max-width: 1200px) {
  .hero-headline { font-size: clamp(28px, 4vw, 48px) !important; }
}
@media (max-width: 700px) {
  .hero-headline { font-size: clamp(26px, 7vw, 40px) !important; }
}

/* ─── HOME HERO STATS — match the L2/L3 cleaner grid layout ─────────────────
   The L1 home hero originally used `.hero-side-cards` — a vertical stack of
   bordered boxes (stat + title + description). The L2/L3 hero uses
   `.hero-side-stats` — a clean 2x2 grid of big numbers + tiny uppercase labels.
   The user prefers the L2 look. Re-style `.hero-side-cards` to render in the
   same grid shape so both heroes feel consistent without changing any admin
   data or template structure. */
.hero-section .hero-side-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 28px 36px !important;
  flex-direction: row !important;
  /* Widened from 460px so 2-column rows have ~240px per cell — enough room for
     the longest text-stat ("Salesforce") at the new font-size below. The L2/L3
     `.hero-side-stats` block uses a similar width, so the heroes still feel
     consistent. `minmax(0, 1fr)` (above) lets each column SHRINK to fit its
     content, which combined with `min-width: 0` on the card stops a long word
     from blowing past the column edge — this was the root cause of the
     "Salesforce" overflow on the third home-page slide. */
  max-width: 520px !important;
}
.hero-section .hero-side-card {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* Allow this grid item to shrink narrower than its intrinsic content width.
     Without this, a long stat word ("Salesforce") forced the card past its
     column and overflowed the hero. */
  min-width: 0 !important;
}
.hero-section .hero-side-card:hover {
  background: transparent !important;
  transform: none !important;
}
/* Re-purpose the stat / title / desc layers to match the L2 stats look:
   - stat → giant brand-green number (was 22px → now ~36px)
   - title → tiny uppercase label below the number
   - desc → hidden (the L2 stats layout doesn't show a third line)

   IMPORTANT typography rule (per user): a single word must NEVER be split
   across two lines. Earlier this rule had `overflow-wrap: anywhere` as a
   "safety net", but that property explicitly tells the browser it MAY break a
   word at any character — which is what produced the "ServiceNo" / "w" split
   on the home hero. Removed.

   Replacement strategy: lock each stat to a single line (`white-space: nowrap`)
   and pick a font-size small enough that the longest word ("Salesforce") fits
   in one ~240px grid column. At ~36px max with weight 800 in Gilroy,
   "Salesforce" is ~190px wide — comfortable headroom inside the cell. Short
   numeric stats ("500+", "60%", "$2.5M") still read large and confident. */
.hero-section .hero-side-card .hero-side-stat {
  font-size: clamp(28px, 2.6vw, 36px) !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  min-width: 0 !important;
}
.hero-section .hero-side-card .hero-side-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 0 !important;
}
.hero-section .hero-side-card .hero-side-desc { display: none !important; }

/* ─── SECTION TITLES — brighter + bigger across the site ──────────────────────
   The "second section" headings (Pillars / Methodology / Industries /
   Recognition / Insights) were 38px and quite dull. ServiceNow's reference
   uses MUCH larger headings with a green-gradient accent on the bold portion
   and bright white on the rest. Match that treatment site-wide so every
   section header pops. */
.pillars-heading,
.industries-heading,
.recognition-heading,
.insights-heading,
.methodology-heading,
.stories-pin-heading,
.resource-stats-heading,
.resource-valueprop-heading {
  /* Bigger, more confident sizing — modeled on enterprise sites like
     servicenow.com / stripe.com / linear.app where section headers regularly
     reach 64–80px on desktop. Tight tracking (`-0.025em`) gives the typography
     the dense, "designed" feel the user asked for. */
  font-size: clamp(40px, 3.5vw, 76px) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: center !important;
  margin-bottom: 56px !important;
  letter-spacing: -0.025em !important;
  /* Single words must never split — global typography rule. */
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  /* Constrain to a reading-friendly width but generous enough that headings
     like "The Mergen advantage in every engagement" don't break into too many
     short lines. `text-wrap: balance` (modern browsers) re-distributes the
     words across however many lines we end up with so line lengths look even. */
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  /* Allow the heading to widen on larger screens — 18ch is for the small/mid
     viewport. On wide screens, 28ch reads better at 76px font-size. */
}
@media (min-width: 1100px) {
  .pillars-heading,
  .industries-heading,
  .recognition-heading,
  .insights-heading,
  .methodology-heading,
  .stories-pin-heading,
  .resource-stats-heading,
  .resource-valueprop-heading {
    max-width: 24ch;
  }
}
.pillars-heading strong,
.industries-heading strong,
.recognition-heading strong,
.insights-heading strong,
.methodology-heading strong,
.stories-pin-heading strong,
.resource-stats-heading strong,
.resource-valueprop-heading strong {
  /* Brighter, slightly more saturated gradient — the original was a flat
     pastel green; the new one ramps from a deep emerald through brand green
     into teal so the accent word reads with more depth at the larger size.
     A larger drop-shadow gives the gradient text a soft halo against the
     dark background — same trick the servicenow.com hero uses. */
  background: linear-gradient(135deg, #2fbe6e 0%, #4cda84 35%, #6ee7a0 65%, #48d1cc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 0 32px rgba(76, 218, 132, 0.45));
}
/* Subtitle / caption that often follows a section heading — give it a
   consistent treatment so headings always feel "framed". Targets the common
   `.section-eyebrow` and any `.lede` paragraph siblings if they exist. */
.section-eyebrow,
.pillars-eyebrow,
.industries-eyebrow,
.insights-eyebrow,
.methodology-eyebrow,
.stories-eyebrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-green, #4cda84) !important;
  text-align: center !important;
  display: block;
  margin-bottom: 18px !important;
}
@media (max-width: 800px) {
  .pillars-heading,
  .industries-heading,
  .recognition-heading,
  .insights-heading,
  .methodology-heading,
  .stories-pin-heading,
  .resource-stats-heading,
  .resource-valueprop-heading {
    font-size: clamp(30px, 7vw, 44px) !important;
    margin-bottom: 36px !important;
    max-width: 100%;
  }
}

/* ─── INFINITY RIBBON — GROUP LABELS ────────────────────────────────────────
   Optional text labels pinned to the corners / sides of the infinity canvas.
   Modelled on the ServiceNow reference where "Employees" / "Customers" labels
   sit on either side of their ∞. Configured per-page from
   Theme → Home → Infinity Ribbon → Ribbon Group Labels. */
.inf-groups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.inf-group {
  position: absolute;
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, rgba(76,218,132,0.18), rgba(72,209,204,0.10));
  border: 1px solid rgba(76, 218, 132, 0.55);
  border-radius: 999px;
  text-shadow: 0 0 12px rgba(76, 218, 132, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.inf-group--top-left     { top: 6%;  left: 4%;  }
.inf-group--top-right    { top: 6%;  right: 4%; }
.inf-group--bottom-left  { bottom: 6%; left: 4%;  }
.inf-group--bottom-right { bottom: 6%; right: 4%; }
.inf-group--left         { top: 50%; left: 2%;  transform: translateY(-50%); }
.inf-group--right        { top: 50%; right: 2%; transform: translateY(-50%); }
@media (max-width: 800px) {
  .inf-group { font-size: 10px; padding: 4px 10px; letter-spacing: 1.5px; }
  .inf-group--top-left, .inf-group--top-right       { top: 4%;    }
  .inf-group--bottom-left, .inf-group--bottom-right { bottom: 4%; }
}
@media (max-width: 700px) {
  .hero-section .hero-side-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
    max-width: 100% !important;
  }
}

/* Skip-link — invisible until focused, jumps to main content. Standard a11y. */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 10px 18px;
  background: var(--color-green);
  color: var(--color-bg-dark);
  font-weight: 700;
  font-size: 13px;
  z-index: 1100;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top .15s ease;
}
.skip-to-main:focus { top: 0; }

/* ─── CONTACT FORM (page-contact.php) ───────────────────────────────────── */
.contact-section {
  padding: 80px 80px 100px;
  max-width: 1240px;
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contact-side {
  position: sticky;
  top: 120px;
  color: var(--color-gray-light);
}
.contact-side h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}
.contact-side-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.contact-side-list > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--overlay-white-06);
}
.contact-side-list > div:last-child { border-bottom: none; }
.contact-side-list dt {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-green);
  font-weight: 700;
  margin-bottom: 4px;
}
.contact-side-list dd {
  margin: 0;
  font-size: 14px;
  color: var(--color-white);
  line-height: 1.5;
}
.contact-side-list dd span { color: rgba(255,255,255,0.55); }
.contact-side-list dd code {
  background: var(--overlay-white-05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.contact-side-extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--overlay-white-08);
  font-size: 14px;
  line-height: 1.65;
}
.contact-side-extra h2,
.contact-side-extra h3 {
  font-size: 14px;
  color: var(--color-white);
  margin: 12px 0 6px;
}
.contact-side-extra p { margin: 0 0 10px; }

/* ── form ── */
.contact-form-wrap {
  background: linear-gradient(160deg,
    rgba(13, 34, 51, 0.82),
    rgba(8, 26, 36, 0.92));
  border: 1px solid rgba(72, 209, 204, 0.28);
  border-radius: 22px;
  padding: 36px 36px 32px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  scroll-margin-top: 140px;       /* so #contact-form anchor lands below the fixed nav */
}
.contact-form-error {
  background: rgba(229, 62, 62, 0.10);
  border: 1px solid rgba(229, 62, 62, 0.4);
  color: #ffb4b4;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.contact-form-success {
  text-align: center;
  padding: 30px 16px;
}
.contact-form-success h2 {
  font-size: 24px;
  color: var(--color-white);
  margin: 14px 0 6px;
}
.contact-form-success p {
  color: var(--color-gray-light);
  margin: 0 auto 22px;
  max-width: 380px;
}
.contact-form-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.contact-form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.contact-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--color-white);
  margin-bottom: 6px;
}
.contact-field .req      { color: var(--color-green); margin-left: 4px; }
.contact-field .optional { color: rgba(255,255,255,0.4); font-weight: 400; margin-left: 4px; font-size: 11px; }
.contact-field input,
.contact-field select,
.contact-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--overlay-white-08);
  color: var(--color-white);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(255,255,255,0.35); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(76, 218, 132, 0.15);
}
.contact-field textarea { resize: vertical; min-height: 130px; }
.contact-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l5 5 5-5' stroke='%234cda84' stroke-width='1.5' fill='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.contact-form-actions .btn-primary {
  background: var(--color-green-gradient);
  color: var(--color-bg-dark);
  border: none;
  padding: 14px 26px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.contact-form-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(76, 218, 132, 0.3);
}
.contact-form-fineprint {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  flex: 1;
  min-width: 240px;
}
@media (max-width: 900px) {
  .contact-section { padding: 50px 24px 80px; }
  .contact-grid    { grid-template-columns: 1fr; gap: 32px; }
  .contact-side    { position: static; }
  .contact-form-wrap { padding: 24px 22px 22px; }
  .contact-form-row--2 { grid-template-columns: 1fr; }
}
.resource-glance-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resource-glance-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--overlay-white-08);
}
.resource-glance-row:last-child { border-bottom: none; padding-bottom: 0; }
.resource-glance-row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.resource-glance-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .resource-single-side { justify-content: center; margin-top: 32px; }
  .resource-glance-card { max-width: 100%; }
}

/* ─── SINGLE RESOURCE — STATS / OUTCOMES STRIP ───────────────────────── */
.resource-stats-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 80px 12px;
}
.resource-stats-header {
  text-align: center;
  margin-bottom: 32px;
}
.resource-stats-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 8px;
}
.resource-stats-heading {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
}
.resource-stats-heading strong {
  background: var(--color-green-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.resource-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.resource-stats-grid--1 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.resource-stats-grid--2 { grid-template-columns: repeat(2, 1fr); }
.resource-stats-grid--3 { grid-template-columns: repeat(3, 1fr); }

.resource-stat-card {
  position: relative;
  background: linear-gradient(160deg,
    rgba(76, 218, 132, 0.10),
    rgba(72, 209, 204, 0.04) 60%,
    var(--overlay-white-03));
  border: 1px solid rgba(76, 218, 132, 0.22);
  border-radius: 18px;
  padding: 28px 24px;
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.resource-stat-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 218, 132, 0.20), transparent 70%);
  pointer-events: none;
}
.resource-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 218, 132, 0.5);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}
.resource-stat-metric {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1;
  background: var(--color-green-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.resource-stat-label {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-gray-light);
  margin: 0;
}
@media (max-width: 1100px) {
  .resource-stats-grid,
  .resource-stats-grid--3,
  .resource-stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .resource-stats-section { padding: 36px 24px 8px; }
  .resource-stats-grid,
  .resource-stats-grid--2,
  .resource-stats-grid--3,
  .resource-stats-grid--4 { grid-template-columns: 1fr; }
}

/* ─── SINGLE RESOURCE — BODY + SIDE TAG CARD ─────────────────────────── */
.resource-body-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 0px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}
.resource-body-inner {
  color: var(--color-gray-light);
  font-size: 17px;
  line-height: 1.4;
}
.resource-body-inner > h2 {
  color: var(--color-white);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  margin: 36px 0 14px;
  padding-left: 18px;
  border-left: 4px solid var(--color-green);
  line-height: 1.25;
}
.resource-body-inner > h2:first-child { margin-top: 0; }
.resource-body-inner > h3 {
  color: var(--color-white);
  font-size: 19px;
  font-weight: 700;
  margin: 26px 0 10px;
}
.resource-body-inner p { margin-bottom: 18px; }
.resource-body-inner ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.resource-body-inner ul li {
  position: relative;
  padding: 12px 16px 12px 42px;
  margin-bottom: 8px;
  background: var(--overlay-white-03);
  border-left: 3px solid rgba(76, 218, 132, 0.55);
  border-radius: 0 12px 12px 0;
  color: var(--color-white);
  line-height: 1.55;
  font-size: 15.5px;
}
.resource-body-inner ul li::before {
  content: '✓';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-green-gradient);
  color: var(--color-bg-dark);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-body-inner blockquote {
  margin: 30px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(76, 218, 132, 0.06), rgba(72, 209, 204, 0.02));
  border-left: 4px solid var(--color-green);
  border-radius: 0 14px 14px 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-white);
  font-style: italic;
}

.resource-body-side {
  position: sticky;
  top: 96px;
}
.resource-body-side-card {
  background: var(--overlay-white-03);
  border: 1px solid var(--overlay-white-08);
  border-radius: 16px;
  padding: 24px;
}
.resource-body-side-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 14px;
}
.resource-body-side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 14px 0 8px;
}
.resource-body-side-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resource-body-side-pill {
  display: inline-block;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  background: var(--overlay-white-05);
  border: 1px solid var(--overlay-white-08);
  border-radius: 14px;
  color: var(--color-white);
  text-decoration: none;
  transition: all .2s ease;
}
.resource-body-side-pill:hover {
  background: rgba(76, 218, 132, 0.14);
  border-color: rgba(76, 218, 132, 0.45);
  color: var(--color-white);
}
.resource-body-side-cta {
  display: inline-block;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.resource-body-side-cta:hover { letter-spacing: 0.9px; }

@media (max-width: 1000px) {
  .resource-body-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 24px 40px;
  }
  .resource-body-side { position: static; }
}

/* Make the related-resources / CTA at the bottom of single-resource not abut the body. */
.resource-related-section { padding-top: 30px; }

/* ============================================================================
   SIDEBAR-PANEL NAVIGATION
   Full-width sheet that opens below the top-level nav, with a left rail of
   categories and a description-rich right pane that swaps on hover/click.
   Activates only when the user picks Theme Settings → Navigation Style →
   Sidebar Panel; the other nav styles continue to render unchanged.
   ============================================================================ */
.nav-menu--sidebar-panel { position: relative; }

.nav-menu--sidebar-panel .has-sidebar-panel { position: static; }

.nav-menu--sidebar-panel .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 22px 16px;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.nav-menu--sidebar-panel .has-sidebar-panel .nav-link::after {
  /* Underline accent that appears under the active top-level button */
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 2px;
  background: var(--color-green-gradient);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity .25s, transform .25s;
}
.nav-menu--sidebar-panel .has-sidebar-panel.is-open .nav-link,
.nav-menu--sidebar-panel .has-sidebar-panel:hover .nav-link {
  color: var(--color-green-light);
}
.nav-menu--sidebar-panel .has-sidebar-panel.is-open .nav-link::after,
.nav-menu--sidebar-panel .has-sidebar-panel:hover .nav-link::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav-menu--sidebar-panel .has-sidebar-panel.is-open .chevron,
.nav-menu--sidebar-panel .has-sidebar-panel:hover .chevron {
  transform: rotate(180deg);
}
.nav-menu--sidebar-panel .chevron { transition: transform .25s ease; }

/* The panel itself — full-width, anchored to the bottom of the header */
.sidebar-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: linear-gradient(180deg,
    rgba(11, 31, 44, 0.98) 0%,
    rgba(8, 26, 36, 0.98) 100%);
  border-top: 1px solid var(--overlay-white-08);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index: 100;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.nav-menu--sidebar-panel .has-sidebar-panel.is-open .sidebar-panel,
.nav-menu--sidebar-panel .has-sidebar-panel:hover .sidebar-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

.sidebar-panel-inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 460px;
}

/* ── Left rail — title + category list ───────────────────────────────── */
.sidebar-panel-rail {
  background: rgba(8, 26, 36, 0.55);
  border-right: 1px solid var(--overlay-white-06);
  padding: 32px 0 24px;
  display: flex;
  flex-direction: column;
}
.sidebar-panel-rail-head {
  padding: 0 28px 22px;
  border-bottom: 1px solid var(--overlay-white-06);
  margin-bottom: 14px;
}
.sidebar-panel-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-white);
  margin: 0 0 6px;
  line-height: 1.2;
}
.sidebar-panel-tagline {
  font-size: 12.5px;
  color: var(--color-gray-light);
  margin: 0;
  line-height: 1.45;
}
.sidebar-panel-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-panel-cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: background .2s, color .2s;
  border-left: 3px solid transparent;
}
.sidebar-panel-cat .cat-label { flex: 1; }
.sidebar-panel-cat .cat-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-green);
  background: rgba(76, 218, 132, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}
.sidebar-panel-cat .cat-arrow {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  transform: translateX(0);
  transition: transform .2s, color .2s;
}
.sidebar-panel-cat:hover,
.sidebar-panel-cat.is-active {
  background: linear-gradient(90deg, rgba(76, 218, 132, 0.10), transparent 80%);
  color: var(--color-white);
  border-left-color: var(--color-green);
}
.sidebar-panel-cat:hover .cat-arrow,
.sidebar-panel-cat.is-active .cat-arrow {
  color: var(--color-green);
  transform: translateX(3px);
}
.sidebar-panel-cat--overview a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.sidebar-panel-cat--overview {
  border-bottom: 1px dashed var(--overlay-white-06);
  margin-bottom: 6px;
  padding-bottom: 18px;
  padding-top: 14px;
}

/* ── Right pane — heading + description grid ─────────────────────────── */
.sidebar-panel-main {
  padding: 36px 40px 36px;
  position: relative;
}
.sidebar-panel-pane {
  display: none;
  animation: panelFadeIn .25s ease;
}
.sidebar-panel-pane.is-active { display: block; }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar-panel-pane-head {
  margin-bottom: 24px;
}
.sidebar-panel-pane-head .pane-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 6px;
}
.sidebar-panel-pane-head .pane-heading {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-white);
  margin: 0 0 8px;
  line-height: 1.2;
}
.sidebar-panel-pane-head .pane-sub {
  font-size: 14px;
  color: var(--color-gray-light);
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}
/* Compact link-list style — per user request: show ALL levels of nav in one panel,
   short one-liners only, no description blurbs. Replaces the previous bulky 2-column
   "card grid" with a multi-column list that fits ~3× more items per pane. */
.sidebar-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;                    /* auto-flows items into 2 columns */
  column-gap: 28px;
  break-inside: avoid;
}
.sidebar-panel-list > li {
  break-inside: avoid;
  margin-bottom: 2px;
}
.sidebar-panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  transition: background .15s, color .15s;
}
.sidebar-panel-link:hover {
  background: rgba(76, 218, 132, 0.08);
  color: #ffffff;
}
.sidebar-panel-link .link-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar-panel-link .link-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-panel-link .link-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.30);
  transition: color .15s, transform .15s;
}
.sidebar-panel-link:hover .link-arrow {
  color: var(--color-green);
  transform: translateX(2px);
}

/* Sub-items (L4 under L3 modules) — indented, smaller, no icon column,
   shown only when the parent module declares a `children` array. */
.sidebar-panel-sublist {
  list-style: none;
  margin: 2px 0 8px 28px;
  padding: 0;
  border-left: 1px dashed rgba(76, 218, 132, 0.25);
}
.sidebar-panel-link--child {
  padding: 4px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.sidebar-panel-link--child:hover { color: var(--color-green); background: transparent; }

/* When a pane has many items, drop to a single column on narrower viewports
   so the labels don't get truncated mid-word. */
@media (max-width: 1280px) {
  .sidebar-panel-list { columns: 2; column-gap: 20px; }
}

@media (max-width: 1100px) {
  .sidebar-panel-inner { grid-template-columns: 280px minmax(0, 1fr); }
  .sidebar-panel-main { padding: 28px 28px; }
  .sidebar-panel-list { columns: 1; }
}
@media (max-width: 800px) {
  .sidebar-panel-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sidebar-panel-rail {
    border-right: none;
    border-bottom: 1px solid var(--overlay-white-06);
    padding: 20px 0 12px;
  }
  .sidebar-panel-rail-head { padding: 0 20px 14px; }
  .sidebar-panel-cat { padding: 12px 20px; }
  .sidebar-panel-main { padding: 22px 20px 28px; }
  .sidebar-panel-pane-head .pane-heading { font-size: 22px; }
}

/* ─── HERO — STOP CLIPPING TALL CONTENT ──────────────────────────────────────
   The base `.hero-section` rule in styles.css sets `overflow: hidden`, which is
   fine when the section's height exactly matches the slide's content. With the
   bigger headline typography we now use (clamp 36→68px, line-height 1.05), some
   slides are taller than 75vh on a 100% viewport and get visibly clipped at the
   bottom — the user reported this on the L2 Salesforce page ("Salesforce
   services that accelerate revenue growth.") and on the resource archive pages
   ("Customer transformations with measured outcomes" cut off mid-word).

   Fix: allow the hero section to grow with its content. The shader canvas is
   `position: absolute; inset: 0` so it tracks the new height; the carousel /
   slides are also already absolute-positioned, so they expand to match the
   tallest visible slide. */
.hero-section {
  overflow: visible !important;
}
/* For carousel heroes (home L1) where multiple slides stack absolutely, give
   the section a minimum height equal to the tallest slide's content. Using
   `height: auto` + adequate padding lets content drive the size; the carousel
   slides each fill 100% so they share the same vertical area. */
.hero-section .hero-carousel,
.hero-section .hero-slide {
  position: relative;
  min-height: 100%;
}
/* Restore absolute stacking ONLY on the L1 home hero where the carousel needs
   slides on top of each other to cross-fade. The active slide drives the
   section height; inactive slides float on top. */
.hero-section:not(.hero-section--subpage) .hero-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.hero-section:not(.hero-section--subpage) .hero-slide.active {
  position: relative; /* active slide drives section height so it can grow */
}
/* Resource archive heroes — bump min-height so the standard "eyebrow + 3-line
   headline + subtitle + counter" content always fits. 38vh was too tight and
   clipped the bottom of the headline at 100% browser zoom. */
.insights-hero.hero-section--subpage {
  min-height: 60vh !important;
}
@media (max-width: 800px) {
  .insights-hero.hero-section--subpage { min-height: 0 !important; }
}

/* The sticky type-pill row sits at z-index: 50; the hero shader canvas was at
   z-index 0 BUT a tall hero plus the sticky bar's `top: var(--nav-height)`
   meant the pill bar would float into the bottom of the hero on first paint
   (before any scroll). Push the bar to start sticking only after the hero is
   fully scrolled out. */
.insights-typebar {
  /* Was sticky from page load — now becomes sticky only when scrolled past
     the hero, removing the visual collision with hero text. */
  position: relative !important;
  top: auto !important;
}

/* ─── INFINITY SECTION — REFINED ─────────────────────────────────────────────
   Per user feedback: the L2/L3 infinity sections felt cramped. Reference is
   servicenow.com's hero canvases — generous breathing room above and below the
   visual, a confident headline that sits well clear of the graphic, and a soft
   blue→green tint that ties the ribbon to the brand palette.

   Changes:
   1. Padding bumped from 80/60 → 120/100 so the section feels like its own
      "moment" in the page rather than another tight band of content.
   2. Heading sized up + tracked tighter, with more space below.
   3. Container max-width relaxed slightly for better visual weight.
   4. Soft radial glow behind the ribbon (blue → green → transparent) so the
      canvas doesn't sit on a flat dark plane — gives the same depth that the
      servicenow.com hero canvases get from their soft background blooms.
   5. The ribbon canvas itself stays as-is (the JS draws it); the wrapper just
      gets the supporting glow + spacing. */
.infinity-section {
  /* ServiceNow-scale ribbon. Section padding deliberately small so nothing
     constrains the canvas inside; horizontal padding 24px = essentially edge-
     to-edge so the ribbon dominates the viewport. */
  padding: 30px 24px 16px !important;
  position: relative !important;
  /* Soft brand-coloured glow behind the ribbon — purely decorative, paints
     under the canvas to add depth. */
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 60%, rgba(76, 218, 132, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(40, 130, 240, 0.10), transparent 75%),
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(72, 209, 204, 0.08), transparent 75%);
}
.infinity-heading {
  font-size: clamp(30px, 3.5vw, 52px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  /* Bottom margin trimmed 72 → 36 so the heading sits closer to the ribbon. */
  margin: 0 auto 36px !important;
  /* Heading template renders `<strong>...</strong><br>...` (the green +
     white halves are already separated by an explicit <br>). The previous
     `max-width: 22ch` was forcing each half to wrap a SECOND time, producing
     4 lines instead of the intended 2. Generous max-width (50ch) keeps the
     two natural halves each on one line on every realistic viewport, and
     `text-wrap: balance` only kicks in if a half is so long it has to wrap. */
  max-width: 50ch;
  text-wrap: balance;
  /* Override the italic on .infinity-heading strong below — italic on a giant
     gradient headline reads as decorative rather than confident. */
  font-style: normal !important;
}
.infinity-heading strong {
  background: linear-gradient(135deg,
      #2bb3ff 0%,    /* sky blue — start of the brand-blue ramp */
      #38b6e0 25%,
      #4ad2bc 55%,
      #4cda84 100%   /* brand green — finish */
    ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 0 28px rgba(72, 200, 200, 0.40));
}
.infinity-container {
  /* ServiceNow-scale: ribbon spans nearly the full viewport on desktop.
     1600px max so on a 1920 monitor we still have small margins, on 1440 we
     fill almost edge-to-edge. */
  max-width: 1600px !important;
  width: 100% !important;
  padding-bottom: 0 !important;
}
.infinity-visual {
  /* Force the visual to ALWAYS use the container's full width — this was the
     missing piece in earlier rounds. Without `width: 100%` the visual was
     taking its intrinsic content width (which the canvas reports as small),
     leaving the container looking shrunken regardless of max-width. */
  width: 100% !important;
  max-width: 100% !important;
}
/* Aspect-ratio per mode — 2.0/1 for horizontal (the lemniscate's natural
   ratio with breathing room above/below for labels). */
.infinity-visual[data-infinity-mode="horizontal"],
[data-infinity-mode="horizontal"] .infinity-visual {
  aspect-ratio: 2 / 1 !important;
}
.infinity-visual[data-infinity-mode="flower"],
[data-infinity-mode="flower"] .infinity-visual {
  /* Flower = horizontal lemniscate + vertical lemniscate crossed → natural
     extent is SQUARE (2 wide × 2 tall in normalised units). The scale factor
     in screenScale (0.39) leaves equal margin top/bottom/left/right for dot
     labels. Visual max-width bumped 920 → 1060 (+15%) per user request. */
  aspect-ratio: 1 / 1 !important;
  max-width: 1060px !important;
  margin: 0 auto;
}
.infinity-visual[data-infinity-mode="vertical"],
[data-infinity-mode="vertical"] .infinity-visual {
  aspect-ratio: 1 / 1.1 !important;
  max-width: 760px !important;
  margin: 0 auto;
}
.infinity-container[data-infinity-mode="vertical"] { max-width: 800px !important; }
/* Flower-mode container must match the visual's max-width — positionDots
   reads the CONTAINER's width to find the centre, so if container > visual
   the centre is offset and every dot drifts horizontally. Diagnosed via
   live Chrome inspection: container 1189px vs visual 920px shifted dots
   by ~134px (= (1189-920)/2). Lock container to 920px for flower so the
   centre lines up with the visible ribbon's centre. */
.infinity-container[data-infinity-mode="flower"] { max-width: 1060px !important; }

@media (max-width: 900px) {
  .infinity-section { padding: 28px 24px 16px !important; }
  .infinity-heading { margin-bottom: 18px !important; max-width: 100%; }
  .infinity-visual[data-infinity-mode="horizontal"],
  [data-infinity-mode="horizontal"] .infinity-visual { aspect-ratio: 1.55 / 1 !important; }
}

/* Tighten the heading-to-ribbon gap further per user request. Heading bottom
   margin already reduced earlier; this trims an additional ~10-15px. */
.infinity-heading { margin-bottom: 24px !important; }

/* ─── INFINITY CENTER PILL ──────────────────────────────────────────────────
   Servicenow.com-style chip pinned at the loop X-junction. Per third round of
   user feedback: it must be TRANSLUCENT (not a solid block) and must FIT
   INSIDE the visible infinity — no text truncation. The previous version
   used a solid dark fill + ellipsis truncation; this one uses a transparent
   blurred surface (the ribbon shows through) and shrinks the font instead of
   clipping the text.

   No background-COLOR — only a backdrop-filter blur tint so the ribbon's
   green/blue gradient is visible behind the pill, like the SN reference. The
   border is a thin translucent white edge (same effect SN uses) instead of a
   loud green outline. */
.inf-center-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: none;
  /* Constrain the pill to fit inside the visible infinity (the ribbon spans
     ~80% of the visual; we cap the pill at ~52% so it sits comfortably at
     the loop crossing without bleeding into the lobe edges). */
  max-width: 52%;
  text-align: center;
}
.inf-center-pill span {
  display: inline-block;
  padding: 10px 24px;
  /* Fluid font-size that scales with viewport — ensures auto-derived labels
     like "Power BI Analytics + Power Apps + Power Automate + Copilot Studio"
     fit at all sizes without truncation. Wraps to two lines if needed. */
  font-size: clamp(11px, 1.05vw, 18px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #ffffff;
  /* Maximum transparency — per user request the ribbon should clearly show
     THROUGH the pill. We use an almost-zero white overlay (just enough so
     the text reads without breaking against bright ribbon green) plus a
     hairline border. The blur is what makes the colour read as "glassy"
     rather than "invisible". */
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  /* Allow wrapping rather than clipping if the text is too long. */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  /* Stronger text-shadow now that the surface behind is mostly the ribbon.
     Keeps the white text readable against bright green/blue without making
     the pill feel solid. */
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1100px) {
  .inf-center-pill { max-width: 60%; }
  .inf-center-pill span { font-size: clamp(10px, 1.2vw, 14px); padding: 10px 18px; white-space: normal; }
}
@media (max-width: 700px) {
  .inf-center-pill { max-width: 78%; }
  .inf-center-pill span { padding: 8px 14px; font-size: 11px; line-height: 1.35; white-space: normal; }
}

/* Subtler dot styling — matches the brand-green pill the user already prefers
   in the L2 hero stats. The hover/active states keep their green glow. */
.inf-dot-circle {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0 18px rgba(76, 218, 132, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
.inf-dot-label {
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ─── SECTION RHYTHM — consistent vertical breathing room across the page ────
   Sections currently use 80px top/bottom which felt tight on wide screens (per
   the user's "spacing between sections" feedback). Bump everything to a
   roughly 120px rhythm with `clamp` so it scales down on narrow viewports. */
.pillars-section,
.industries-section,
.recognition-section,
.methodology-section,
.solutions-section,
.cta-section {
  padding-top: clamp(80px, 9vw, 140px) !important;
  padding-bottom: clamp(80px, 9vw, 140px) !important;
}

/* ─── SCROLL-DRIVEN PAGE BACKGROUND ─────────────────────────────────────────
   Companion to assets/js/scroll-bg.js. As the user scrolls down the homepage
   the JS sets `body[data-bg-stage]` to "1" / "2" / "3"; this rule block tints
   the body and the homepage section backgrounds to match, with a long
   transition so the color appears to gradually shift — same effect as
   servicenow.com's scroll-tinted backgrounds.

   The trick: most homepage sections currently set their own
   `background: var(--color-bg-dark)` (or `--bg-darker`). We can't override
   each one inline AND animate them smoothly without touching the cascade. So
   instead, when a stage is active, we declare those section backgrounds
   transparent so the (animated) body color shows through. The body and
   sections share the same `transition`, so they cross-fade together. */
body {
  /* Longer ease (2s) and a slow-out curve so the color shift feels deliberate,
     not flickery — this is the servicenow.com behaviour: you barely notice the
     transition is happening, only that the page "feels" different by the time
     you've scrolled a few sections. */
  transition: background-color 2s cubic-bezier(0.16, 0.84, 0.44, 1);
}
/* Stage 1 — top of page, brand dark teal. Slightly bluer than the original
   (#0b1f2c → #0a1f30) so the transition into purple feels continuous rather
   than a hop. */
body[data-bg-stage="1"] { background-color: #0a1f30; }
/* Stage 2 — deep navy-violet. Closer to servicenow.com's mid-page tint — a
   purple that sits comfortably next to dark teal AND dark green so the
   neighbouring transitions look like one ramp, not two cuts. The L is
   intentionally low so brand green / blue accents read with high contrast. */
body[data-bg-stage="2"] { background-color: #16112c; }
/* Stage 3 — bottom of page, deep forest. Muted enough not to fight the neon
   green accents in CTAs / cards / icons. */
body[data-bg-stage="3"] { background-color: #0a2218; }

/* While a non-default stage is active, neutralise the section backgrounds
   that would otherwise paint over the body color. Per user request the same
   tint applies on L2/L3/L4 pages too, so the section list below covers both
   home-page sections AND inner-page sections (resource value-prop, related
   resources, etc.). The hero keeps its own background so it never looks
   washed-out at the top of the page. */
body[data-bg-stage="2"] .pillars-section,
body[data-bg-stage="2"] .industries-section,
body[data-bg-stage="2"] .stories-scroll-section,
body[data-bg-stage="2"] .stories-section,
body[data-bg-stage="2"] .recognition-section,
body[data-bg-stage="2"] .methodology-section,
body[data-bg-stage="2"] .resource-valueprop-section,
body[data-bg-stage="2"] .resource-stats-section,
body[data-bg-stage="3"] .insights-section,
body[data-bg-stage="3"] .related-resources,
body[data-bg-stage="3"] .cta-section,
body[data-bg-stage="3"] .insights-featured-section {
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 2s cubic-bezier(0.16, 0.84, 0.44, 1),
              background-image 2s cubic-bezier(0.16, 0.84, 0.44, 1);
}
/* CTA section keeps its centred green glow but lets the body purple/green
   show through everywhere else. */
body[data-bg-stage="3"] .cta-section {
  background-image: radial-gradient(ellipse at 50% 80%,
    rgba(76, 218, 132, 0.15) 0%, transparent 55%) !important;
}

/* Respect the user's OS-level "reduce motion" preference — switch instantly
   instead of long cross-fades for vestibular-sensitive viewers. */
@media (prefers-reduced-motion: reduce) {
  body,
  body[data-bg-stage] .pillars-section,
  body[data-bg-stage] .industries-section,
  body[data-bg-stage] .stories-scroll-section,
  body[data-bg-stage] .stories-section,
  body[data-bg-stage] .recognition-section,
  body[data-bg-stage] .insights-section,
  body[data-bg-stage] .cta-section {
    transition: none !important;
  }
}

/* ─── PAGE INFOGRAPHICS ───────────────────────────────────────────────────────
   Brand-coloured SVGs rendered by inc/page-infographics.php inside the empty
   left column of static About / Careers / Contact pages. The infographic
   itself is fully self-contained — these styles just position the wrapper +
   layer in subtle motion / glow that ties them to the rest of the site. */
.mergen-page-infographic {
  margin: 28px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mergen-page-infographic svg {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
  /* Gentle "breathe" animation — barely perceptible scale pulse so the
     infographic feels alive without being distracting. Skipped under
     prefers-reduced-motion via the @media block below. */
  animation: mergen-ig-breathe 9s ease-in-out infinite;
}
@keyframes mergen-ig-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .mergen-page-infographic svg { animation: none; }
}

/* ─── STATIC PAGE FALLBACK LAYOUT — give the title + infographic + content
   block proper rhythm (was previously cramped at the top of the section). */
.page-static-fallback .hero-content {
  align-items: start !important;
  padding-top: 40px;
  padding-bottom: 80px;
}
.page-static-fallback .hero-left .hero-title {
  margin-bottom: 12px;
}
.page-static-fallback .hero-right .hero-description {
  /* Tighter line-height + better link styling on the rich content body. */
  line-height: 1.7;
  font-size: 16px;
}
.page-static-fallback .hero-right h2,
.page-static-fallback .hero-right h3 {
  margin-top: 28px;
  margin-bottom: 12px;
  color: #ffffff;
  font-weight: 800;
}
.page-static-fallback .hero-right h2 { font-size: 22px; color: var(--color-green, #4cda84); }
.page-static-fallback .hero-right h3 { font-size: 17px; }
.page-static-fallback .hero-right ul {
  margin: 14px 0 18px 22px;
}
.page-static-fallback .hero-right li {
  margin: 6px 0;
}

/* ─── CONTACT PAGE — left aside enhancements ─────────────────────────────────
   The aside used to render only "Other ways to reach us". User reported the
   page felt "very dull with lots of white space". Now it leads with the
   handshake infographic and a 3-up trust strip before the location list. */
.contact-side-graphic {
  margin: 0 0 24px;
  display: flex;
  justify-content: center;
}
.contact-side-graphic svg {
  max-width: 360px;
  width: 100%;
  height: auto;
}
.contact-side-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 32px;
  padding: 18px 14px;
  background: linear-gradient(180deg,
    rgba(76, 218, 132, 0.08) 0%,
    rgba(76, 218, 132, 0.0) 100%);
  border: 1px solid rgba(76, 218, 132, 0.22);
  border-radius: 14px;
}
.contact-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.contact-trust-num {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  color: var(--color-green, #4cda84);
  line-height: 1;
}
.contact-trust-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── CONTACT PAGE — "What happens next" 4-step engagement strip ─────────── */
.contact-process {
  padding: 80px 80px 100px;
  background: linear-gradient(180deg,
    rgba(8, 24, 38, 0.55) 0%,
    rgba(11, 31, 44, 0.0) 100%);
}
.contact-process-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.contact-process-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green, #4cda84);
  margin: 0 0 18px;
}
.contact-process-heading {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.contact-process-heading strong {
  background: linear-gradient(135deg, #2bb3ff 0%, #4ad2bc 50%, #4cda84 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.contact-process-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.contact-process-step {
  position: relative;
  padding: 28px 24px 24px;
  background: linear-gradient(160deg,
    rgba(76, 218, 132, 0.06) 0%,
    rgba(72, 209, 204, 0.03) 100%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 218, 132, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.contact-process-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-green, #4cda84);
  background: rgba(76, 218, 132, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.contact-process-step h3 {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.25;
}
.contact-process-step p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
@media (max-width: 1100px) {
  .contact-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .contact-process { padding: 50px 24px 70px; }
  .contact-process-grid { grid-template-columns: 1fr; }
  .contact-side-trust { padding: 14px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — comprehensive responsive layer for the whole site.
   Two breakpoints: TABLET (≤900px) and PHONE (≤640px).
   This block lives at the very end of mergen-overrides.css so it wins over any
   earlier desktop-default rules without needing extra specificity.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── HEADER + NAVIGATION ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Smaller fixed-header heights so the hero doesn't get pushed down. */
  :root { --nav-height: 56px; --banner-height: 44px; }
  .main-nav { padding: 0 18px; gap: 12px; }
  .nav-logo-img { height: 28px !important; }
  /* Hide the desktop mega menu links — replaced by the hamburger panel below. */
  .nav-menu, .nav-menu--mega, .nav-menu--sidebar-panel, .nav-menu--drilldown { display: none !important; }
  /* Compact nav actions: hide search button, show only the CTA. */
  .nav-search { display: none !important; }
  .nav-cta { padding: 8px 14px !important; font-size: 13px !important; }
  /* Announcement banner — single-line truncation with smaller text. */
  .announcement-banner { padding: 0 16px; font-size: 12px; gap: 8px; }
  .announcement-banner p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .banner-btn { padding: 4px 12px; font-size: 11px; flex-shrink: 0; }
}

/* Mobile hamburger button — injected by assets/js/mobile-nav.js into
   .nav-actions. The button itself + the slide-in panel are all styled below.
   Hidden on desktop because mobile-nav.js short-circuits when innerWidth>900. */
.mergen-mnav-btn {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mergen-mnav-btn span {
  display: block;
  width: 18px; height: 2px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.mergen-mnav-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mergen-mnav-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mergen-mnav-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .mergen-mnav-btn { display: inline-flex; }
}

/* Mobile menu panel — slides in from the right */
.mergen-mnav-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 24, 38, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 9998;
}
.mergen-mnav-backdrop.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.mergen-mnav-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: linear-gradient(180deg, #0b1f2c 0%, #08192a 100%);
  border-left: 1px solid rgba(76, 218, 132, 0.25);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 9999;
  display: flex; flex-direction: column;
  padding: 0;
}
.mergen-mnav-panel.is-open { transform: translateX(0); }
.mergen-mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mergen-mnav-title {
  font-size: 11px; letter-spacing: 2.5px; font-weight: 700;
  color: var(--color-green, #4cda84); text-transform: uppercase;
}
.mergen-mnav-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ffffff; font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mergen-mnav-close:hover { background: rgba(76, 218, 132, 0.18); border-color: rgba(76, 218, 132, 0.45); }
.mergen-mnav-list {
  list-style: none;
  margin: 0; padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}
.mergen-mnav-list li { margin: 0; }
.mergen-mnav-list a {
  display: block;
  padding: 16px 22px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.mergen-mnav-list a:hover, .mergen-mnav-list a:focus {
  background: rgba(76, 218, 132, 0.10);
  color: var(--color-green, #4cda84);
  padding-left: 28px;
}
.mergen-mnav-foot {
  padding: 18px 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mergen-mnav-cta {
  display: block;
  text-align: center;
  padding: 14px 18px;
  background: var(--color-green, #4cda84);
  color: var(--color-bg-dark, #0b1f2c);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mergen-mnav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(76, 218, 132, 0.35);
}

/* Mobile submenu accordion styles */
.mnav-item { list-style: none; margin: 0; }
.mnav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 22px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mnav-toggle:hover, .mnav-toggle:focus {
  background: rgba(76, 218, 132, 0.10);
  color: var(--color-green, #4cda84);
}
.mnav-toggle.is-open { color: var(--color-green, #4cda84); }
.mnav-arrow {
  display: inline-block;
  transition: transform .2s ease;
  font-size: 20px;
  margin-left: 8px;
  flex-shrink: 0;
}
.mnav-toggle.is-open .mnav-arrow { transform: rotate(90deg); }
.mnav-link {
  display: block;
  padding: 16px 22px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.mnav-link:hover, .mnav-link:focus {
  background: rgba(76, 218, 132, 0.10);
  color: var(--color-green, #4cda84);
  padding-left: 28px;
}
.mnav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: rgba(255, 255, 255, 0.02);
}
.mnav-submenu.is-open { display: block; }
.mnav-item--sub .mnav-toggle,
.mnav-item--sub .mnav-link {
  padding-left: 38px;
  font-size: 15px;
}
.mnav-item--sub .mnav-submenu { background: rgba(255, 255, 255, 0.01); }
.mnav-item--subsub .mnav-link {
  padding-left: 54px;
  font-size: 14px;
  font-weight: 500;
}

/* ─── HERO — applies to L1 carousel + L2/L3/L4 static heroes ─────────────── */
@media (max-width: 900px) {
  .hero-section { min-height: 0 !important; padding-top: 20px !important; }
  .hero-grid { grid-template-columns: 1fr !important; padding: 30px 22px 50px !important; gap: 24px !important; }
  .hero-text-block { max-width: 100% !important; padding: 0 !important; }
  .hero-eyebrow { font-size: 11px !important; letter-spacing: 2px !important; margin-bottom: 12px !important; }
  .hero-headline { font-size: clamp(28px, 7vw, 44px) !important; letter-spacing: -0.01em !important; line-height: 1.08 !important; }
  .hero-subtitle { font-size: 15px !important; line-height: 1.55 !important; max-width: 100% !important; }
  /* Stat side block — stacked grid below text */
  .hero-side { padding: 0 !important; min-height: 0 !important; }
  .hero-side-stats, .hero-side-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 16px !important;
    max-width: 100% !important;
  }
  .hero-side-stat-num, .hero-section .hero-side-card .hero-side-stat {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.1 !important;
  }
  .hero-side-stat-label, .hero-section .hero-side-card .hero-side-title {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
  }
  /* CTA buttons — full width stacked */
  .hero-cta-group { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .hero-cta { padding: 14px 20px !important; font-size: 15px !important; text-align: center !important; }
  /* Carousel pagination dots — pull above the fold */
  .carousel-controls { bottom: 8px !important; }
  .carousel-dots { gap: 8px !important; }
  /* Background canvas — keep visible but slightly dimmer to keep text readable */
  .hero-shader-canvas { opacity: 0.10 !important; }
}
@media (max-width: 480px) {
  .hero-grid { padding: 24px 18px 40px !important; }
  .hero-headline { font-size: clamp(26px, 8vw, 36px) !important; }
  .hero-subtitle { font-size: 14px !important; }
}

/* ─── INFINITY SECTION — readable on phones ──────────────────────────────── */
@media (max-width: 900px) {
  .infinity-section { padding: 28px 16px 20px !important; }
  .infinity-heading { font-size: clamp(22px, 5vw, 32px) !important; margin-bottom: 18px !important; max-width: 100% !important; }
  /* All modes collapse to a roomier square so dot labels don't collide */
  .infinity-visual[data-infinity-mode="horizontal"],
  [data-infinity-mode="horizontal"] .infinity-visual,
  .infinity-visual[data-infinity-mode="flower"],
  [data-infinity-mode="flower"] .infinity-visual {
    aspect-ratio: 1.2 / 1 !important;
    max-width: 100% !important;
  }
  .infinity-visual[data-infinity-mode="vertical"],
  [data-infinity-mode="vertical"] .infinity-visual {
    aspect-ratio: 1 / 1.2 !important;
    max-width: 100% !important;
  }
  .infinity-container { max-width: 100% !important; }
  /* Smaller dot labels on mobile */
  .inf-dot-label { font-size: 10px !important; letter-spacing: 0.3px !important; }
  .inf-dot-circle { width: 12px !important; height: 12px !important; border-width: 2px !important; }
  /* Center pill — wraps to 2 lines on narrow phones */
  .inf-center-pill { max-width: 80% !important; }
  .inf-center-pill span { font-size: 11px !important; padding: 8px 14px !important; line-height: 1.35 !important; white-space: normal !important; }
  /* Group label pills — reduce or hide on phones */
  .inf-group { font-size: 9px !important; padding: 3px 8px !important; letter-spacing: 1px !important; }
}
@media (max-width: 480px) {
  .infinity-section { padding: 20px 12px 16px !important; }
}

/* ─── SOLUTIONS TABS — horizontal-scroll tab bar + stacked panel ─────────── */
@media (max-width: 900px) {
  .solutions-section { padding: 50px 0 60px !important; }
  /* Tab bar becomes a horizontally scrollable strip with snap points. */
  .solutions-tabs-bar {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 18px !important;
    gap: 8px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* Hide scrollbar visually on mobile but keep it functional */
    scrollbar-width: none;
  }
  .solutions-tabs-bar::-webkit-scrollbar { display: none; }
  .solution-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* Panel content stacks: text first, then card */
  .panel-content { grid-template-columns: 1fr !important; gap: 32px !important; padding: 30px 22px !important; }
  .panel-text { padding: 0 !important; }
  .panel-heading { font-size: clamp(24px, 6vw, 34px) !important; line-height: 1.15 !important; }
  .panel-desc { font-size: 15px !important; }
  .panel-links { gap: 6px !important; }
  .panel-links li a { font-size: 14px !important; }
  .panel-card { padding: 20px !important; }
  .panel-person { display: none !important; } /* the avatar circle eats vertical space */
}

/* ─── PILLARS / METHODOLOGY / INDUSTRIES / RECOGNITION / CTA GRIDS ───────── */
@media (max-width: 900px) {
  .pillars-section, .methodology-section, .industries-section,
  .recognition-section, .cta-section, .insights-section,
  .resource-valueprop-section, .resource-stats-section {
    padding: 60px 22px !important;
  }
  .pillars-grid, .methodology-steps, .recognition-grid, .recognition-cards,
  .cta-grid, .resource-valueprop-grid, .resource-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pillar-card, .methodology-step, .recognition-card, .cta-card,
  .resource-valueprop-card, .resource-stats-card {
    padding: 22px 20px !important;
  }
  .industries-tags { justify-content: flex-start !important; gap: 8px !important; }
  .industries-tag, .industry-tag {
    font-size: 13px !important;
    padding: 7px 14px !important;
  }
}
@media (min-width: 481px) and (max-width: 900px) {
  /* Tablet — 2-column grids fit comfortably */
  .pillars-grid, .recognition-grid, .recognition-cards,
  .cta-grid, .resource-valueprop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── STORIES PIN-SCROLL — replace with a simple stack on mobile ────────── */
@media (max-width: 900px) {
  /* Disable position:sticky / fixed pinning on mobile (touch scroll fights it) */
  .stories-scroll-section, .stories-scroll-stage, .stories-scroll-grid {
    height: auto !important; min-height: 0 !important;
    position: relative !important;
    padding: 50px 22px !important;
  }
  .stories-scroll-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .stories-scroll-left { position: static !important; padding: 0 !important; }
  .stories-card-stack {
    position: static !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important;
  }
  .stories-card {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
  }
  .stories-card-stat { font-size: clamp(36px, 9vw, 50px) !important; }
  .stories-progress { display: none !important; }
}

/* ─── INSIGHTS / RESOURCE ARCHIVES ───────────────────────────────────────── */
@media (max-width: 900px) {
  .insights-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .insights-tabs, .insights-typebar-inner { padding: 0 !important; gap: 6px !important; }
  .insight-tab, .insights-pill {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .insights-typebar { padding: 14px 18px !important; }
  .insights-featured-section { padding: 40px 22px !important; }
  .insights-featured-card { aspect-ratio: 4 / 3 !important; }
  .insights-featured-title { font-size: clamp(22px, 5vw, 30px) !important; }
  .insights-activefilter { padding: 12px 18px !important; }
  .insights-activefilter-link { margin-left: 0 !important; }
}

/* ─── CONTACT — form + aside stack ───────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-section { padding: 40px 22px 60px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Aside content goes BELOW the form on mobile (form is the primary action) */
  .contact-side { order: 2 !important; }
  .contact-form-wrap { order: 1 !important; }
  .contact-form-row--2 { grid-template-columns: 1fr !important; }
  .contact-form input, .contact-form textarea, .contact-form select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 12px 14px !important;
  }
  .contact-form-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .contact-form-actions .btn { width: 100% !important; padding: 14px !important; font-size: 15px !important; }
  .contact-side-graphic svg { max-width: 280px !important; }
  .contact-side-trust { grid-template-columns: repeat(3, 1fr) !important; padding: 14px 10px !important; }
  .contact-trust-num { font-size: 18px !important; }
  .contact-trust-label { font-size: 10px !important; }
}

/* ─── STATIC PAGE FALLBACK (About / Careers etc.) ────────────────────────── */
@media (max-width: 900px) {
  .page-static-fallback .hero-content {
    grid-template-columns: 1fr !important;
    padding: 24px 22px 50px !important;
    gap: 28px !important;
  }
  .page-static-fallback .hero-title { font-size: clamp(28px, 7vw, 40px) !important; }
  .mergen-page-infographic svg { max-width: 320px !important; }
}

/* ─── BREADCRUMB — smaller on mobile ─────────────────────────────────────── */
@media (max-width: 900px) {
  .breadcrumb { padding: 8px 18px !important; }
  .breadcrumb-list { font-size: 11px !important; gap: 4px !important; }
}

/* ─── FLOATING CONTACT / DEMO BUTTONS — bottom nav style on mobile ───────── */
@media (max-width: 900px) {
  /* These are the bottom-right floating CTAs that overlap content on phones */
  body > a[class*="floating"], .floating-contact-buttons,
  .contact-fab, .demo-fab, .floating-cta-group {
    bottom: 12px !important; right: 12px !important;
  }
}

/* ─── FOOTER — single column, larger tap targets ─────────────────────────── */
@media (max-width: 900px) {
  .site-footer { padding: 50px 22px 30px !important; }
  .footer-grid, .footer-cols { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-col h4 { font-size: 13px !important; margin-bottom: 12px !important; }
  .footer-col a, .footer-col li { font-size: 14px !important; padding: 6px 0 !important; }
}

/* ─── GLOBAL SAFETY NETS ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* No element should ever push the page wider than the viewport */
  html, body { overflow-x: hidden !important; }
  img, video, canvas, svg { max-width: 100% !important; height: auto; }
  /* Tap-target minimum: 44px height for everything clickable */
  button, .btn, a.btn, .insight-tab, .solution-tab, .insights-pill,
  .nav-cta, .hero-cta {  }
  /* Prevent text inflation on iOS landscape rotation */
  body { -webkit-text-size-adjust: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════════
   HEADER SEARCH OVERLAY — toggled by assets/js/search.js when .nav-search
   is clicked. Slides down from under the fixed header; matches the dark
   glass treatment used by the mobile nav panel.
   Append this block to the END of assets/css/mergen-overrides.css
   ══════════════════════════════════════════════════════════════════════════ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mergen-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  visibility: hidden;
  pointer-events: none;
}
.mergen-search-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mergen-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 24, 38, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.mergen-search-overlay.is-open .mergen-search-backdrop {
  opacity: 1;
}

.mergen-search-panel {
  position: absolute;
  top: calc(var(--nav-height, 60px) + var(--banner-height, 0px));
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px clamp(20px, 5vw, 64px);
  background: linear-gradient(180deg, #0b1f2c 0%, #08192a 100%);
  border-bottom: 1px solid rgba(76, 218, 132, 0.25);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .2s ease;
}
.mergen-search-overlay.is-open .mergen-search-panel {
  transform: translateY(0);
  opacity: 1;
}

.mergen-search-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 10px 20px;
  transition: border-color .2s ease, background .2s ease;
}
.mergen-search-form:focus-within {
  border-color: var(--color-green, #4cda84);
  background: rgba(255, 255, 255, 0.09);
}
.mergen-search-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}
.mergen-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 16px;
  font-family: var(--font-primary);
}
.mergen-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.mergen-search-submit {
  flex-shrink: 0;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--color-green, #4cda84);
  color: var(--color-bg-dark, #0b1f2c);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mergen-search-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(76, 218, 132, 0.35);
}
.mergen-search-close {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.mergen-search-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 640px) {
  .mergen-search-panel { flex-wrap: wrap; padding: 16px 20px; }
  .mergen-search-submit { order: 3; width: 100%; }
  .mergen-search-form { order: 1; width: 100%; }
  .mergen-search-close { order: 2; }
}