/* ManaraX-specific layout additions, loaded after the template stylesheet. */

:root {
  /* Template default tracking (-1% to -6%) reads too tight; loosen headings
     and body copy while keeping negative tracking on small/UI text. */
  --letter-spacing--letter-spacing-1: 0em;
  --letter-spacing--letter-spacing-2: -.01em;
  --letter-spacing--letter-spacing-3: -.015em;
  --letter-spacing--letter-spacing-6: -.03em;

  --_typography---h1--line-height: 76px;
  --_typography---h2--line-height: 64px;
  --_typography---h3--line-height: 54px;
  --_typography---h4--line-height: 44px;
  --_typography---paragraph-02--line-height: 26px;
  --_typography---paragraph-01--line-height: 30px;
}

.mx-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  text-align: center;
  margin-top: 2.5rem;
}

.mx-stat-number {
  margin-bottom: 0.25rem;
}

/* Process flow diagram: nodes on a connecting line, echoing the hero badge's
   dot + thin stroke language and the Approach section's yellow step numbers.
   Selection (click, or Enter/Space) owns which one panel is open — one at a
   time, the same disclosure pattern the FAQ accordion already uses on this
   page. Hover/focus only preview the highlight, so passing the cursor across
   the row can never open two panels at once. Entrance state defaults to
   fully visible; JS adds the "about to play" state only if it can also
   animate it, so this never ships as a blank section if JS fails. */
#philosophy.values {
  background-color: var(--colors--bg-color);
}

.mx-flow {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  max-width: 1100px;
  margin: 4rem auto 0;
  padding: 0 4px;
}

.mx-flow-line {
  position: absolute;
  top: 15px;
  left: 4px;
  right: 4px;
  height: 1px;
  background-image: linear-gradient(90deg, #ffffff00, var(--colors--stroke-white) 12%, var(--colors--stroke-white) 88%, #ffffff00);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s cubic-bezier(.16, 1, .3, 1);
}

.mx-flow.pre-reveal .mx-flow-line {
  clip-path: inset(0 100% 0 0);
}

.mx-flow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex: 1 0 0;
  padding: 4px 6px 12px;
  border-radius: var(--_responsive---border-radius--border-radius-12px);
  cursor: pointer;
  outline-offset: 6px;
  opacity: 1;
  transform: translateY(0);
  transition: background-color 0.3s ease, opacity 0.5s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.mx-flow.pre-reveal .mx-flow-step {
  opacity: 0;
  transform: translateY(14px);
}

.mx-flow > .mx-flow-step:nth-of-type(1) { transition-delay: 0.12s; }
.mx-flow > .mx-flow-step:nth-of-type(2) { transition-delay: 0.19s; }
.mx-flow > .mx-flow-step:nth-of-type(3) { transition-delay: 0.26s; }
.mx-flow > .mx-flow-step:nth-of-type(4) { transition-delay: 0.33s; }
.mx-flow > .mx-flow-step:nth-of-type(5) { transition-delay: 0.4s; }

.mx-flow-step:hover,
.mx-flow-step:focus-visible,
.mx-flow-step.is-active {
  background-color: #ffffff08;
}

.mx-flow-node {
  width: 30px;
  height: 30px;
  border: 1px solid var(--colors--stroke-white);
  border-radius: 50%;
  background-color: var(--colors--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease;
}

.mx-flow-step:hover .mx-flow-node,
.mx-flow-step:focus-visible .mx-flow-node,
.mx-flow-step.is-active .mx-flow-node {
  border-color: var(--colors--yellow);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px #cffe2520;
}

.mx-flow-dot {
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: var(--colors--yellow);
  flex: none;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
}

.mx-flow-step:hover .mx-flow-dot,
.mx-flow-step:focus-visible .mx-flow-dot,
.mx-flow-step.is-active .mx-flow-dot {
  transform: scale(1.2);
}

.mx-flow-num {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing--letter-spacing-2);
  color: var(--colors--yellow);
}

.mx-flow-label {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing--letter-spacing-1);
  color: var(--colors--white);
  text-align: center;
  transition: color 0.3s ease;
}

.mx-flow-step:hover .mx-flow-label,
.mx-flow-step:focus-visible .mx-flow-label,
.mx-flow-step.is-active .mx-flow-label {
  color: var(--colors--yellow);
}

.mx-flow-desc {
  font-size: 13px;
  line-height: 20px;
  color: var(--colors--grey-color);
  text-align: center;
  max-width: 190px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.16,1,.3,1), opacity 0.3s ease, margin-top 0.4s cubic-bezier(.16,1,.3,1);
}

.mx-flow-step.is-active .mx-flow-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow-line,
  .mx-flow-step {
    transition: none !important;
  }

  .mx-flow.pre-reveal .mx-flow-line,
  .mx-flow.pre-reveal .mx-flow-step {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

@media screen and (max-width: 991px) {
  .mx-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  .mx-flow-line {
    top: 4px;
    bottom: 4px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
    background-image: linear-gradient(#ffffff00, var(--colors--stroke-white) 12%, var(--colors--stroke-white) 88%, #ffffff00);
    clip-path: inset(0 0 0 0);
  }

  .mx-flow.pre-reveal .mx-flow-line {
    clip-path: inset(0 0 100% 0);
  }

  .mx-flow.pre-reveal .mx-flow-step {
    opacity: 0;
    transform: translateX(14px);
  }

  .mx-flow-step {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 10px 10px 10px 6px;
  }

  .mx-flow-label {
    text-align: left;
  }

  .mx-flow-desc {
    text-align: left;
    max-width: 100%;
    flex-basis: 100%;
    margin-left: 46px;
    width: calc(100% - 46px);
  }

  .mx-flow-step.is-active .mx-flow-desc {
    margin-top: -4px;
  }
}

/* Template's mobile breakpoint (<=479px) hard-codes .navbar-brand to 125px —
   sized for the original square mark, not our full wordmark lockup. That
   width cap squished the logo image (fixed height, clamped width) into a
   warped aspect ratio on small screens. */
.mx-navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
}

.mx-navbar-logo-full {
  height: 28px;
  width: auto;
  flex: none;
}

.mx-footer-logo-full {
  height: 32px;
  width: auto;
}

.mx-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.integration-link {
  cursor: default;
}

/* "Where can we help?" cards: the badge was absolutely positioned over the
   heading (collided with TRANSFORM, the widest of the three), the inner
   panel didn't stretch to the grid row so shorter cards left a bare strip
   below their "We can help with" block, and the card had no hover/focus
   feedback at all. mx-pricing-head puts the badge back in flow next to its
   heading so it wraps instead of overlapping; each card gets an accent
   pulled from its own badge color (no new hues) to tie the hover glow,
   border and lift together. */
.mx-pricing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.mx-pricing-head .pricing-v3-badge {
  position: static;
  inset: auto;
  flex: none;
}

.pricing-v3-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--colors--card-bg);
}

.pricing-v3-bottom-wrap {
  margin-top: auto;
}

.pricing-v3-card {
  --mx-accent: var(--colors--yellow);
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s ease;
}

.pricing-v3-card:nth-child(2) { --mx-accent: var(--colors--green-grey); }
.pricing-v3-card:nth-child(3) { --mx-accent: var(--colors--light-green); }

.pricing-v3-card .card-outline {
  background-image: linear-gradient(135deg, var(--mx-accent) 0%, #ffffff00 30%, #ffffff00 70%, var(--mx-accent) 100%);
  opacity: 0.3;
  transition: opacity 0.35s ease;
}

.pricing-v3-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(120% 90% at 85% 0%, var(--mx-accent), #ffffff00 55%);
  opacity: 0.05;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Positioned descendants paint above static ones regardless of source
   order, so without this the glow above would sit on top of the card's
   text/badge/button instead of behind them. */
.pricing-v3-card-inner > .pricing-v3-top-wrap,
.pricing-v3-card-inner > .pricing-v3-bottom-wrap {
  position: relative;
  z-index: 1;
}

.pricing-v3-card:hover,
.pricing-v3-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 55px 60px #00000066;
}

.pricing-v3-card:hover .card-outline,
.pricing-v3-card:focus-within .card-outline {
  opacity: 0.85;
}

.pricing-v3-card:hover .pricing-v3-card-inner::before,
.pricing-v3-card:focus-within .pricing-v3-card-inner::before {
  opacity: 0.16;
}

.pricing-v3-features-list {
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}

.pricing-v3-card:hover .pricing-v3-features-list,
.pricing-v3-card:focus-within .pricing-v3-features-list {
  transform: translateX(4px);
}

.pricing-v3-features-list:nth-child(1) { transition-delay: 0s; }
.pricing-v3-features-list:nth-child(2) { transition-delay: 0.04s; }
.pricing-v3-features-list:nth-child(3) { transition-delay: 0.08s; }
.pricing-v3-features-list:nth-child(4) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .pricing-v3-card,
  .pricing-v3-features-list {
    transition: none !important;
  }

  .pricing-v3-card:hover,
  .pricing-v3-card:focus-within {
    transform: none;
  }
}

.nav-menu,
.paragraph-02.nav-text {
  white-space: nowrap;
}

/* "Your team has the vision" collab list: the template never set a base
   .collab-icon size (only inside the 767px/479px media queries), so each
   icon rendered at its own SVG's native dimensions. Pen.svg and Icon-(2).svg
   are 40x40, but 3dcube.svg is 61x61 — the extra height pushed "Technical
   Delivery" down and broke the heading row alignment with the other two
   cards. Pin all three to the same box. */
.collab-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* #approach ("Our approach"): the source 2-column grid orphaned step 05
   alone in a bare second row, kept every numeral at body-text size, and had
   no line to read as a sequence — it disappeared next to the bolder cards
   around it. Deliberately distinct from #philosophy's flow widget above
   (which is click-to-expand, small dot nodes): this stays fully readable at
   a glance and leans on scale — a single-file rail of oversized numerals is
   the whole device. */
#approach .timeline-left .text-style-h4 {
  font-size: 40px;
  line-height: 1.15;
}

#approach .timeline-right {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 760px;
  border-bottom: 1px solid var(--colors--stroke-white);
}

#approach .timeline-right::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-image: linear-gradient(to bottom, #ffffff00, var(--colors--stroke-white) 8%, var(--colors--stroke-white) 92%, #ffffff00);
}

#approach .timeline-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid var(--colors--stroke-white);
  transition: background-color 0.3s ease;
}

#approach .timeline-list:hover {
  background-color: #ffffff08;
}

#approach .timeline-marker {
  width: 24px;
  flex: none;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

#approach .timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--colors--bg-color);
  border: 1px solid var(--colors--stroke-white);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#approach .timeline-list:hover .timeline-dot {
  background-color: var(--colors--yellow);
  border-color: var(--colors--yellow);
  box-shadow: 0 0 0 4px #cffe2520;
}

#approach .timeline-list .year {
  font-size: 44px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--letter-spacing--letter-spacing-2);
  color: var(--colors--yellow);
  flex: none;
  width: 76px;
}

#approach .timeline-list .paragraph-02.text-grey {
  flex: 1;
  padding-top: 8px;
}

@media screen and (max-width: 991px) {
  #approach .timeline-right {
    max-width: 100%;
  }
}

@media screen and (max-width: 479px) {
  #approach .timeline-list {
    gap: 14px;
    padding: 28px 0;
  }

  #approach .timeline-list .year {
    font-size: 32px;
    width: 52px;
  }

  #approach .timeline-marker {
    width: 18px;
    padding-top: 10px;
  }

  #approach .timeline-right::before {
    left: 8px;
  }
}

/* CTA beacon image: nudge up to sit centred against the "Let's talk" badge,
   and mirror horizontally so the beacon's light sweeps toward the heading. */
.cta-v1-image-wrap {
  transform: translateY(-40px) scaleX(-1);
}