.counter-size {
  font-size: 16px;
}

.section2-header-text {
  font-size: 36px;
}

.section2-desc-text {
  font-size: 16px;
}

.custom-grid-col {
  grid-template-columns: 1.9fr 1fr !important;
}

/* Antos Pinnacles content overrides on top of the vendored Legion design system */

.partner-logo {
  width: auto;
  height: auto;
  color: var(--text--paragraph-font, #fff);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Small/caption-style description text — eyebrow labels, FAQ answers, testimonial
   roles, category tags, and fine print — uses the tertiary (grey) text token */
.h6-style,
.answer-text,
.profile-job,
.project-category,
.footer-copyright-center,
.center-top p {
  color: var(--tokens--text-tertiary);
}

/* Native checkbox input reusing legion.css's .checkbox visual styling, which was
   authored for a plain div — strip the native widget appearance and draw the
   checked state ourselves since :checked replaces Webflow's JS-toggled class */
.checkbox-field input.checkbox {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0;
}

.checkbox-field input.checkbox:checked {
  border-color: transparent;
  background-color: var(--tokens--primary);
  background-image: url("../assets/img/empty-check.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 12px;
}

.checkbox-field {
  cursor: pointer;
}

/* Stat-counter grid (About page) — Legion's shared stylesheet has no built-in
   equivalent, so this reuses the existing heading/text tokens for consistency. */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.counter-number {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tokens--text-primary);
  margin-bottom: 8px;
}

/* Flaticon icon-font glyph, so this is sized with font-size rather than
   width/height, and coloured via `color` rather than a fill/stroke. */
.counter-icon-holder {
  display: block;
  margin-bottom: 12px;
  font-size: 40px;
  line-height: 1;
  color: var(--tokens--border-strong, #acacac);
}

.counter-icon-holder:before {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* About page hero — reuses Legion's hero shell so the vendored page-load
   interaction still fires (the single image starts full-bleed at 104% and
   magnifies down into a card), but sized to a single viewport and with the
   heading/subtitle/tabs overlaid on top of the image instead of beside it. */
.hero-section-wrapper.about-hero {
  height: 100vh;
}

/* Magnify-in for the About hero card: full-bleed on landing, then straight to
   its resting size — no overshoot, no settling back.

   Scoped to .about-hero deliberately: .hero-images-container-last is also used
   by the homepage hero, so an unscoped rule here would hijack index.html's own
   hero animation.

   A CSS animation rather than a transition, because the vendored interaction
   bundle drives inline width/height on this element and CSS animations outrank
   inline styles in the cascade — so this replaces that motion cleanly instead
   of fighting it.

   The resting width mirrors .container's content box (its max-width minus its
   2em side padding) so the card's edges line up with the header logo and nav
   links. Values track legion.css: max-width 1200px, raised to 1270px from
   1440px up, side padding 2em/28px (1em from 479px down). */
.about-hero {
  --about-hero--card-width: calc(100vw - 56px);
  --about-hero--card-height: 65vh;
}

@media screen and (min-width: 1256px) {
  .about-hero {
    --about-hero--card-width: 1144px;
  }
}

@media screen and (min-width: 1440px) {
  .about-hero {
    --about-hero--card-width: 1214px;
  }
}

@media screen and (max-width: 479px) {
  .about-hero {
    --about-hero--card-width: calc(100vw - 28px);
  }
}

.about-hero .hero-images-container-last {
  animation: about-hero-magnify .8s cubic-bezier(.33, 1, .68, 1) .15s both;
}

@keyframes about-hero-magnify {
  from {
    width: 104vw;
    height: 104vh;
  }

  to {
    width: var(--about-hero--card-width);
    height: var(--about-hero--card-height);
  }
}

.hero-image-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(2, 45, 98, .55);
  pointer-events: none;
}

.about-hero-content {
  z-index: 6;
  position: relative;
  width: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
  text-align: center;
  padding: 0 30px;
}

.about-hero-content .title-pargraph {
  max-width: 640px;
}

/* Page sub-nav pills (About Us / Our Value / Mission & Vision) — a secondary,
   in-content nav distinct from the main navbar's Company dropdown. */
.page-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.page-tab-link {
  border: 1px solid var(--tokens--text-tertiary);
  border-radius: var(--_spacings---radius--radius-s);
  color: var(--tokens--text-primary);
  font-size: 14px;
  padding: 10px 24px;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
}

.page-tab-link:hover {
  border-color: var(--tokens--primary);
  color: var(--tokens--primary);
}

.page-tab-link.current {
  background-color: var(--tokens--primary);
  border-color: var(--tokens--primary);
  color: var(--tokens--text-inverse);
}

/* Tab pills sitting on the dark hero image */
.page-tabs.on-dark .page-tab-link {
  border-color: rgba(255, 255, 255, .5);
  color: var(--tokens--text-inverse);
}

.page-tabs.on-dark .page-tab-link:hover {
  border-color: var(--tokens--text-inverse);
  background-color: rgba(255, 255, 255, .12);
  color: var(--tokens--text-inverse);
}

.page-tabs.on-dark .page-tab-link.current {
  background-color: var(--tokens--primary);
  border-color: var(--tokens--primary);
}

/* Nav dropdown panels: legion.css pins these to a fixed 110px, which clips the
   longer entries ("Mission and Vision"). Size to the widest link instead and
   keep each link on one line. */
.dropdown-list.w--open {
  width: auto;
  min-width: 160px;
}

.dropdown-list .nav-link {
  white-space: nowrap;
}

@media screen and (max-width: 479px) {
  .dropdown-list .nav-link {
    padding-bottom: 5px;
  }
}

/* ---------------------------------------------------------------------------
   Our Values page
   --------------------------------------------------------------------------- */

.value-image-holder {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--_spacings---radius--radius-m);
}

.value-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Values 01-07 — horizontal, scroll-locked carousel.

   .value-steps-pin is the element ScrollTrigger pins: it fills the viewport and
   clips the track, which is translated leftwards as the page scrolls. The track
   is offset so the focused card sits dead centre, and only transform is used for
   the enlarge so the JS centring maths (which reads offsetLeft/offsetWidth)
   stays valid. */
/* Deliberately no overflow:hidden on the section wrapper — ScrollTrigger pins
   .value-steps-pin, and a clipping ancestor can interfere with that. The pinned
   element does the clipping instead. */
.value-steps-pin {
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.value-steps-track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 0;
  will-change: transform;
}

.value-step {
  flex: none;
  width: 360px;
  padding: 40px;
  background-color: var(--tokens--surface, #fff);
  border: 1px solid var(--tokens--border, #c6c5c1);
  border-radius: var(--_spacings---radius--radius-m);
  opacity: .5;
  transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease;
}

/* The step the scroll has snapped to: centred by the track offset, enlarged and
   brought to full opacity here. */
.value-step.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 5px 5px 40px rgba(2, 45, 98, .12);
}

/* Hover treatment carried over verbatim in behaviour from the original
   template's .feature-info-style-06: the rule under the number sweeps in and the
   number itself lifts from 10% navy to 50% primary blue. */
.value-step-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--tokens--background-alt, #ececec);
  position: relative;
}

.value-step-head:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--tokens--text-primary);
  transition: all .3s ease-in-out;
}

.value-step:hover .value-step-head:after {
  width: 100%;
}

.value-step-number {
  color: var(--tokens--text-primary);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  opacity: .1;
  transition: all .3s ease-in-out;
}

.value-step:hover .value-step-number {
  color: var(--tokens--primary);
  opacity: .5;
}

.value-step-title {
  margin: 0;
  align-self: center;
  color: var(--tokens--text-primary);
}

.value-step-text {
  margin: 0;
  color: var(--tokens--text-tertiary);
  font-size: 16px;
}

/* No-GSAP / reduced-motion fallback: an ordinary horizontally scrollable row
   instead of a pinned section. */
.value-steps-pin.is-static {
  height: auto;
  overflow-x: auto;
  padding: 0 28px;
}

.value-steps-pin.is-static .value-step {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .value-steps-track {
    gap: 24px;
  }

  .value-step {
    width: 78vw;
    padding: 30px;
  }

  .value-step-head {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}

/* Careers / Latest News / Contact cards */
.value-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.value-link-card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
}

/* Buttons sit on one line across the row regardless of how many lines each
   description runs to — the auto top margin absorbs the difference. */
.value-link-card .button {
  margin-top: auto;
}

.value-link-title {
  margin: 0;
  color: var(--tokens--text-primary);
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .value-links-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------------------------------------------------------------------------
   Contact page

   The layout comes from Legion's own contact page (sample.html) — .grid-title,
   .contact-email-container, .contact-form-wrapper, .field-grid and the
   #w-node-… grid placements are all vendored. Only the pieces that page has no
   equivalent for are added here.
   --------------------------------------------------------------------------- */

/* Heading inside the white form card. .contact-form already supplies the card's
   padding, so this only needs its own bottom spacing. */
.contact-form-title {
  margin-top: 0;
  margin-bottom: 28px;
  color: var(--tokens--text-primary);
}

/* Contact details with the office-location map alongside them. The map column is
   sized to the image (map-location-img1.png is only 310px wide — stretching it
   visibly softens it), and the details take the rest. */
.contact-details-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 90px;
  align-items: center;
}

/* With the details now confined to their own column, legion.css's 40%-wide,
   two-equal-column .contact-text-holder leaves the value side too narrow for the
   office address. Give the label a fixed column and the value the remainder. */
.contact-email-container .contact-text-holder {
  width: 100%;
  grid-template-columns: 180px 1fr;
}

.contact-map-holder {
  max-width: 310px;
  overflow: hidden;
  border-radius: var(--_spacings---radius--radius-m);
}

.contact-map-image {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .contact-details-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: start;
  }

  .contact-email-container .contact-text-holder {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Pricing page

   The three-tier grid and the "Services available" strip both reuse vendored
   index.html components (.pricing-content/.pricing-table-holder and
   .skills-holder). Only the industries list below has no Legion equivalent.
   --------------------------------------------------------------------------- */

/* legion.css centres .pricing-content's grid children rather than stretching
   them, so the staggered-reveal wrappers around each card must claim the full
   cell width or the cards end up sized to their own text. */
.pricing-content>.animate-on-load {
  width: 100%;
}

.industries-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  margin-bottom: 48px;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 40px;
}

.industry-item {
  color: var(--tokens--text-primary);
  font-size: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tokens--border);
}

@media screen and (max-width: 991px) {
  .industries-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Mission & Vision page

   The hero reuses the .about-hero shell above, shared with about-us.html and
   our-value.html. Everything below the hero is specific to this page: an
   editorial section head, the split vision/mission panels, a full-bleed
   parallax band, alternating capability rows, a sticky-headed approach ledger,
   a dark large-type values band, and the closing commitment card.

   Motion lives in the page's own inline script (see mission-vision.html); the
   rules here only describe the resting state plus the pre-animation gate.
   --------------------------------------------------------------------------- */

/* Pre-animation state for the scroll reveals. Gated on w-mod-js — set by the
   probe script in <head> — so a visitor without JS gets the finished page, and
   undone by .mv-no-anim, which the page script adds when GSAP is unavailable or
   reduced motion is requested. */
html.w-mod-js .mv-reveal {
  opacity: 0;
}

html.w-mod-js.mv-no-anim .mv-reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.w-mod-js .mv-reveal {
    opacity: 1;
  }
}

/* Short primary-blue bar underlining each section heading, in place of the
   eyebrow labels the sibling pages use — this page's headings are long enough
   already. Always sits after its heading in the markup. */
.mv-accent {
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 25px;
  background-color: var(--tokens--primary);
}

/* Editorial section head: the heading takes a full-width row of its own, and the
   supporting copy sits on a second row pushed to the right edge — set ragged
   right, not right-aligned, so its own lines still read from the left. Replaces
   the centred .center-text-holder pattern the sibling pages use. */
.mv-section-head {
  display: flex;
  flex-flow: column;
  gap: 25px;
}

.mv-section-head .mv-lead {
  max-width: 560px;
  margin-left: auto;
  text-align: left;
}

/* A short heading ("What We Do") leaves an awkward hole beneath itself when the
   copy drops to a row of its own, so those heads keep the two side by side and
   let the copy sit against the heading's foot instead. */
.mv-section-head.is-inline {
  flex-flow: row;
  align-items: flex-end;
  gap: 80px;
}

.mv-section-head.is-inline .mv-section-head-main {
  flex: 1 1 auto;
}

.mv-statement-title,
.mv-section-title {
  margin: 0;
  color: var(--tokens--text-primary);
  font-size: var(--_typrography---desktop--heading-02);
  line-height: 1.12;
  font-weight: var(--_typrography---font-weight--fontweightsemibold);
  letter-spacing: var(--_typrography---letter-spacing--letter-spacing-narrow);
}

/* SplitText splits this heading into words at runtime (see the page script). It
   wraps each in an inline-block div and moves the original text to an aria-label,
   so nothing here needs to style the pieces — words still reflow normally, which
   is why the split is words-only and survives a resize. */

.mv-lead {
  margin: 0;
  color: var(--tokens--text-tertiary);
  font-size: var(--_typrography---desktop--l-body-paragraph);
  line-height: var(--_typrography---line-height--lineheightbase);
}

/* Vision / mission: two panels flush against each other with only the outer
   corners rounded, so the pair reads as one object split down the middle. */
.mv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--_spacings---radius--radius-m);
}

.mv-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  gap: 40px;
  min-height: 430px;
  padding: 48px;
  color: var(--tokens--text-inverse);
}

.mv-panel.is-vision {
  background-color: var(--tokens--surface-alt);
}

.mv-panel.is-mission {
  background-color: var(--tokens--primary);
}

.mv-panel-num {
  position: absolute;
  top: -40px;
  right: 24px;
  color: #ffffff1f;
  font-size: 220px;
  font-weight: var(--_typrography---font-weight--fontweightbold);
  line-height: 1;
  pointer-events: none;
  will-change: transform;
}

/* Flaticon glyph: sized with font-size and coloured with `color`, not
   width/height and fill. */
.mv-panel-icon {
  font-size: 44px;
  line-height: 1;
  color: var(--tokens--text-inverse);
}

.mv-panel-icon:before {
  margin: 0;
}

/* Icon and title ride at the top of the panel; the copy follows immediately
   after, so both descriptions start at the same height across the pair
   regardless of how many lines either paragraph wraps to. */
.mv-panel-top {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 24px;
}

.mv-panel-body {
  display: flex;
  flex-flow: column;
  gap: 16px;
  align-items: flex-start;
}

.mv-panel-title {
  margin: 0;
  color: var(--tokens--text-inverse);
  font-weight: var(--_typrography---font-weight--fontweightmedium);
}

.mv-panel-text {
  margin: 0;
  color: #ffffffd1;
  font-size: var(--_typrography---desktop--m-body-paragraph);
  line-height: var(--_typrography---line-height--lineheightbase);
}

/* Draws itself in on hover, echoing the sweeping rule on our-value.html's
   value steps. Pinned to the panel's bottom edge rather than following the
   text, so it sits at the same height across the pair regardless of how many
   lines either paragraph wraps to. */
.mv-panel-rule {
  position: absolute;
  left: 48px;
  bottom: 48px;
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--tokens--text-inverse);
  transition: width .5s ease;
}

.mv-panel:hover .mv-panel-rule {
  width: 150px;
}

/* Full-bleed band. The image is taller than the frame and starts offset, so the
   scrubbed pan in either direction never reveals an edge. */
.mv-banner {
  position: relative;
  overflow: hidden;
  height: 58vh;
  min-height: 360px;
}

.mv-banner-image {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

/* What We Do — alternating image/copy rows. */
.mv-do-rows {
  display: flex;
  flex-flow: column;
  gap: 100px;
}

.mv-do-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mv-do-row.is-reversed .mv-do-media {
  order: 2;
}

.mv-do-media {
  overflow: hidden;
  border-radius: var(--_spacings---radius--radius-m);
  aspect-ratio: 4 / 3;
}

.mv-do-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.mv-do-index {
  display: block;
  margin-bottom: 12px;
  color: var(--tokens--primary);
  font-size: 14px;
  font-weight: var(--_typrography---font-weight--fontweightsemibold);
  letter-spacing: .14em;
}

.mv-do-title {
  margin: 0;
  color: var(--tokens--text-primary);
  font-size: var(--_typrography---desktop--heading-04);
  line-height: var(--_typrography---line-height--lineheightsmall);
  font-weight: var(--_typrography---font-weight--fontweightmedium);
}

/* Hairline-separated list, shared by the capability rows and Why Choose Us. */
.mv-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.mv-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--tokens--border);
  color: var(--tokens--text-primary);
  font-size: var(--_typrography---desktop--m-body-paragraph);
  line-height: var(--_typrography---line-height--lineheightbase);
}

.mv-list li:last-child {
  border-bottom: 1px solid var(--tokens--border);
}

.mv-check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* Our Approach — the heading parks itself while the numbered rows scroll past.
   .section-inside is a plain flex column, so sticky works without any extra
   height plumbing. */
.mv-ledger {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 40px 80px;
  align-items: start;
}

.mv-ledger-head {
  position: sticky;
  top: 120px;
}

.mv-ledger-head .mv-lead {
  margin-top: 20px;
}

.mv-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--tokens--border);
  transition: padding-left .3s ease, border-color .3s ease;
}

.mv-step:last-child {
  border-bottom: 1px solid var(--tokens--border);
}

.mv-step:hover {
  padding-left: 12px;
  border-color: var(--tokens--text-primary);
}

.mv-step-num {
  color: var(--tokens--border-strong);
  font-size: 20px;
  font-weight: var(--_typrography---font-weight--fontweightsemibold);
  line-height: 1.3;
  transition: color .3s ease;
}

.mv-step:hover .mv-step-num {
  color: var(--tokens--primary);
}

.mv-step-title {
  margin: 0 0 6px;
  color: var(--tokens--text-primary);
  font-size: var(--_typrography---desktop--heading-06);
  line-height: 1.3;
  font-weight: var(--_typrography---font-weight--fontweightsemibold);
}

.mv-step-text {
  margin: 0;
  color: var(--tokens--text-tertiary);
  font-size: var(--_typrography---desktop--m-body-paragraph);
}

/* Our Core Values — full-bleed navy band. A third dark tone after the black
   vision panel and the blue mission panel, so the page's dark moments stay
   distinguishable. */
.mv-values {
  /* padding: var(--_spacings---tokens--xxl) 0; */
  padding: var(--_spacings---core--section-space) 0px 0px;
  background-color: var(--tokens--text-primary);
}

.mv-values-head {
  margin-bottom: 52px;
}

.mv-value-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid #ffffff2e;
}

.mv-value-row:last-child {
  border-bottom: 1px solid #ffffff2e;
}

/* Hover sweeps a solid rule along the row's foot and nudges the name across. */
.mv-value-row:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--tokens--text-inverse);
  transition: width .45s ease;
}

.mv-value-row:hover:after {
  width: 100%;
}

.mv-value-index {
  color: #ffffff66;
  font-size: 14px;
  font-weight: var(--_typrography---font-weight--fontweightsemibold);
  letter-spacing: .14em;
}

.mv-value-name {
  margin: 0;
  color: var(--tokens--text-inverse);
  font-size: var(--_typrography---desktop--heading-03);
  line-height: var(--_typrography---line-height--lineheightsmall);
  font-weight: var(--_typrography---font-weight--fontweightmedium);
  transition: transform .4s ease;
}

.mv-value-row:hover .mv-value-name {
  transform: translateX(10px);
}

.mv-value-text {
  margin: 0;
  color: #ffffffb3;
  font-size: var(--_typrography---desktop--m-body-paragraph);
  line-height: var(--_typrography---line-height--lineheightbase);
}

/* Why Choose Us beside the commitment card. */
.mv-close-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: start;
}

.mv-commit-card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 40px;
  border-radius: var(--_spacings---radius--radius-m);
  background-color: var(--tokens--surface-alt);
}

.mv-commit-title {
  margin: 0;
  font-size: var(--_typrography---desktop--heading-04);
  line-height: var(--_typrography---line-height--lineheightsmall);
  font-weight: var(--_typrography---font-weight--fontweightmedium);
}

.mv-commit-text {
  margin: 0;
  color: #ffffffd1;
  font-size: var(--_typrography---desktop--m-body-paragraph);
  line-height: var(--_typrography---line-height--lineheightbase);
}

.mv-commit-card .button {
  margin-top: 8px;
}

@media screen and (max-width: 991px) {

  .mv-ledger,
  .mv-close-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mv-section-head,
  .mv-section-head.is-inline {
    flex-flow: column;
    align-items: stretch;
    gap: 24px;
  }

  .mv-split {
    grid-template-columns: 1fr;
  }

  .mv-panel {
    min-height: 0;
    padding: 40px 32px;
    gap: 32px;
  }

  /* Panels stack into one column here, so there's no pair to line the rule up
     against — let it sit back in flow, right after the description. */
  .mv-panel-rule {
    position: static;
    margin-top: 8px;
  }

  .mv-panel-num {
    font-size: 160px;
    top: -28px;
  }

  /* Sticky is pointless once the ledger stacks — the heading would pin over the
     rows it is meant to sit beside. */
  .mv-ledger-head {
    position: static;
  }

  .mv-do-rows {
    gap: 64px;
  }

  .mv-do-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Keep the photograph above the copy in both rows once stacked; the
     alternating order only makes sense side by side. */
  .mv-do-row.is-reversed .mv-do-media {
    order: 0;
  }

  .mv-values {
    padding: 80px 0;
  }

  .mv-value-row {
    grid-template-columns: 40px 1fr;
    gap: 8px 20px;
    padding: 24px 0;
  }

  .mv-value-text {
    grid-column: 2;
  }
}

@media screen and (max-width: 479px) {
  .mv-panel {
    padding: 32px 24px;
  }

  .mv-panel-num {
    font-size: 120px;
    top: -18px;
  }

  .mv-commit-card {
    padding: 32px 24px;
  }

  .mv-banner {
    height: 42vh;
  }
}

/* ---------------------------------------------------------------------------
   Owl Carousel testimonial block, lifted from the original Potenza template
   (sample4.html) so its markup works unchanged on this Legion-styled page.

   Rules below are copied verbatim from css/style.css — the whole of style.css
   is deliberately NOT linked, because it restyles body/headings/.container
   globally and would break the Legion design.
   --------------------------------------------------------------------------- */

/* style.css — spacing utility */
.space-ptb {
  padding: 100px 0;
}

/* style.css — bootstrap utilities the markup relies on */
.text-center {
  text-align: center;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.rounded-circle {
  border-radius: 50%;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.mb-1 {
  margin-bottom: .25rem;
}

/* style.css — Testimonial */
.testimonial .owl-item {
  padding: 0 2%;
}

.testimonial .testimonial-item .testimonial-avatar {
  margin-bottom: 40px;
  background: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto 40px;
}

.testimonial .testimonial-item .testimonial-content {
  margin-bottom: 30px;
}

.testimonial .testimonial-item .testimonial-content p {
  font-size: 26px;
  color: #022d62;
  line-height: 1.4;
}

.testimonial .testimonial-item .testimonial-author .testimonial-name h6 {
  font-weight: 700;
  margin-top: 0;
}

/* The role sits on the last line of the slide. As an inline element its
   descenders overflow the line box, so owl's autoHeight measures a few px
   short and clips it — block-level with an explicit line-height fixes that. */
.testimonial .testimonial-item .testimonial-author .testimonial-name span {
  display: block;
  line-height: 1.6;
}

/* style.css — Owl nav arrows */
.owl-carousel .owl-nav {
  cursor: pointer;
  z-index: 999;
  width: 100%;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  display: inline-block;
  position: absolute;
  text-indent: inherit;
  width: auto;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  top: 55%;
  transform: translateY(-50%);
  margin: 14px 2px 0;
}

.owl-carousel .owl-nav .owl-prev {
  left: 0px;
}

.owl-carousel .owl-nav .owl-next {
  right: 0px;
}

.owl-carousel .owl-nav i {
  font-size: 24px;
  transition: all 0.2s ease-in-out;
  color: #022d62;
  opacity: 0.4;
}

.owl-carousel .owl-nav i:hover {
  color: #022d62;
  opacity: 1;
}

@media (max-width: 991.98px) {
  .testimonial-item .testimonial-content p {
    font-size: 20px;
  }
}

@media (max-width: 767.98px) {
  .testimonial-item .testimonial-avatar {
    margin-bottom: 20px;
  }

  .testimonial-item .testimonial-content {
    margin-bottom: 20px;
  }

  .testimonial-item .testimonial-content p {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .testimonial .testimonial-item .testimonial-content p {
    font-size: 18px;
  }
}

/* Service page hero images (.main-image) only get max-width:100% from the
   vendored stylesheet, so source photos narrower than the hero container
   (e.g. the 900x600 service thumbnails reused as heroes) render at native
   size instead of filling it. Force full width + cover so every service
   page hero fills .hero-blog-holder regardless of source resolution. */
.hero-blog-holder .main-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Footer "Solutions" list has grown to 10 services — lay it out as two
   columns instead of one tall single-file list so it stays level with the
   shorter Company/Services footer columns. */
.footer-solutions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 40px;
  justify-items: start;
  text-align: left;
}

.footer-solutions .title-small {
  grid-column: 1 / -1;
}

/* The vendored footer-content grid reserves a trailing 1fr track for a 4th
   column that no page actually has, leaving a large empty gap after
   Solutions. All pages use exactly 3 footer-block columns, so drop it. */
.footer-content {
  grid-template-columns: auto auto auto;
}

@media screen and (max-width: 479px) {
  .footer-solutions {
    grid-template-columns: 1fr;
  }
}