/**
 * Avanta WPBakery elements.
 */
.av-el { padding: 64px 0; }
.av-grid { display: grid; gap: 24px; }
.av-cols-2 { grid-template-columns: repeat(2, 1fr); }
.av-cols-3 { grid-template-columns: repeat(3, 1fr); }
.av-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Heading */
.av-heading { margin-bottom: 34px; }
.av-heading--center { text-align: center; }
.av-heading--left { text-align: left; }
.av-heading__sub { display: inline-block; color: var(--av-secondary); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
.av-heading__title { font-size: clamp(26px, 3vw, 38px); margin: 0 0 10px; }
.av-heading__desc { color: var(--av-muted); max-width: 720px; margin: 0 auto; }
.av-heading--left .av-heading__desc { margin: 0; }

/* Button element */
.av-btn-wrap { margin: 6px 0; }
.av-btn-wrap--center { text-align: center; }
.av-btn-wrap--right { text-align: right; }
.av-btn--lg { padding: 15px 30px; font-size: 17px; }

/* Hero */
.av-hero { background: linear-gradient(135deg, var(--av-dark), #16264a); color: #fff; padding: 64px 0; background-size: cover; background-position: center; }
.av-hero__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 40px; align-items: center; }
.av-hero--full .av-hero__grid { grid-template-columns: 1fr; text-align: center; }
.av-hero__badge { display: inline-block; background: var(--av-secondary); color: #06331f; font-weight: 700; padding: 5px 12px; border-radius: 999px; font-size: 12px; }
.av-hero__title { font-size: clamp(30px, 4.5vw, 50px); line-height: 1.08; margin: 16px 0 12px; color: #fff; }
.av-hero__subtitle { font-size: 18px; color: #cdd6ea; margin: 0 0 12px; }
.av-hero__text { color: #cdd6ea; }
.av-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.av-hero--full .av-hero__actions { justify-content: center; }
.av-hero__media img { width: 100%; border-radius: var(--av-radius); box-shadow: 0 20px 50px rgba(0,0,0,.35); }

/* Services */
.av-service { display: block; background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); padding: 28px; text-decoration: none; color: inherit; transition: all .18s ease; }
.av-service:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,24,40,.10); border-color: transparent; }
.av-service__icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 14px; background: #eef1fd; color: var(--av-primary); font-size: 24px; margin-bottom: 16px; }
.av-service__title { font-size: 19px; margin: 0 0 8px; }
.av-service__text { color: var(--av-muted); font-size: 14px; margin: 0; }

/* Testimonials */
.av-testimonial { background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); padding: 26px; }
.av-stars { color: #ffb400; margin-bottom: 12px; }
.av-testimonial__text { color: var(--av-text); margin-bottom: 16px; }
.av-testimonial__author { display: flex; align-items: center; gap: 12px; }
.av-testimonial__author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.av-testimonial__author em { display: block; color: var(--av-muted); font-style: normal; font-size: 13px; }

/* Team */
.av-member { text-align: center; }
.av-member__photo { border-radius: var(--av-radius); overflow: hidden; margin-bottom: 14px; }
.av-member__photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.av-member__name { font-size: 18px; margin: 0 0 4px; }
.av-member__role { color: var(--av-muted); font-size: 14px; }
.av-member__social { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.av-member__social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--av-bg); color: var(--av-dark); }
.av-member__social a:hover { background: var(--av-primary); color: #fff; }

/* FAQ accordion */
.av-acc-group { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.av-acc { border: 1px solid var(--av-line); border-radius: 12px; background: #fff; overflow: hidden; }
.av-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--av-dark); font-size: 16px; }
.av-acc__head i { color: var(--av-primary); transition: transform .2s ease; }
.av-acc.is-open .av-acc__head i { transform: rotate(180deg); }
.av-acc__body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.av-acc__inner { padding: 0 18px 18px; color: var(--av-muted); }

/* Clients */
.av-clients__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px; }
/* V3: logos in their original colour (grayscale removed). */
.av-client img { max-height: 65px; width: auto; opacity: 1; transition: transform .2s ease; }
.av-client img:hover { transform: scale(1.05); }

/* Clients, scrolling row. Faded at both ends so logos enter and leave the band
   instead of being cut off at the edge. Hover pauses it so a visitor can look
   at a logo, and anyone who has asked their system for less motion gets the
   band standing still. */
.av-clients--scroll .av-clients__marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.av-clients--scroll .av-clients__track { display: flex; align-items: center; gap: 44px; width: max-content;
  animation: av-clients-scroll 40s linear infinite; will-change: transform; }
.av-clients--scroll .av-clients__marquee:hover .av-clients__track { animation-play-state: paused; }
.av-clients--scroll .av-client { flex: 0 0 auto; }
@keyframes av-clients-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* The logos scroll on every device, including phones set to reduce motion
   (on request: a static grid there read as a different, broken section). */
@media (max-width: 600px) {
  .av-clients--scroll .av-clients__track { gap: 28px; }
  .av-clients--scroll .av-client img { max-height: 36px; }
}

/* Portfolio */
.av-portfolio-item { display: block; border-radius: var(--av-radius); overflow: hidden; position: relative; color: #fff; text-decoration: none; }
.av-portfolio-item__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .3s ease; }
.av-portfolio-item:hover .av-portfolio-item__media img { transform: scale(1.06); }
.av-portfolio-item__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,60,.85)); }
.av-portfolio-item__client { display: block; font-size: 12px; color: var(--av-secondary); font-weight: 700; }
.av-portfolio-item__title { font-family: var(--av-font-head); font-weight: 700; font-size: 18px; }

/* Case studies */
.av-case { display: block; background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); overflow: hidden; text-decoration: none; color: inherit; }
.av-case__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.av-case__body { display: block; padding: 20px; }
.av-case__client { color: var(--av-primary); font-weight: 700; font-size: 13px; }
.av-case__title { display: block; font-family: var(--av-font-head); font-weight: 700; font-size: 19px; margin: 4px 0; color: var(--av-dark); }
.av-case__result { color: var(--av-muted); font-size: 14px; }

/* Counters */
/* Counters as cards.
   Three bare numbers on white read as an afterthought, so each figure now sits
   on its own panel with an icon chip, a large numeral and a soft watermark of
   the same icon. The colourway cycles navy -> tint -> blue across the row. */
.av-counters .av-grid { gap: 20px; }

/* The logos and the figures belong together - "trusted by these organisations"
   answered by "and here is the scale of it" - so the space between them was
   reading as a break between two unrelated sections.

   Both are .av-el, whose 64px top and bottom stack into a 128px gap. Halved to
   32px each, so the pair closes up to 64px while every other .av-el section on
   the page keeps its original rhythm. Scoped to these two rather than changing
   .av-el itself, which would have re-spaced the whole page. */
.av-clients { padding-bottom: 32px; }
.av-counters { padding-top: 32px; }
.av-counter { position: relative; overflow: hidden; text-align: left;
  padding: 30px 28px 26px; border-radius: 18px; min-height: 176px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s ease, box-shadow .25s ease; }
.av-counter:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 60, .16); }

.av-counter__ic { position: absolute; top: 24px; left: 28px;
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.av-counter__watermark { position: absolute; right: -14px; bottom: -26px;
  font-size: 132px; line-height: 1; pointer-events: none; }

.av-counter__fig { display: block; font-family: var(--av-font-head); font-weight: 800;
  font-size: clamp(34px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.02em; }
.av-counter__value { font: inherit; color: inherit; }
/* A word suffix ("+ Years") set at the full numeral size shouts louder than the
   number it qualifies, so it steps down a little. */
.av-counter__suffix { font: inherit; font-size: .72em; color: inherit; }
.av-counter__label { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; }

/* a - deep navy */
.av-counter--a { background: linear-gradient(135deg, var(--av-dark) 0%, var(--av-navy2) 100%); color: #fff; }
.av-counter--a .av-counter__ic { background: rgba(255, 255, 255, .14); color: #fff; }
.av-counter--a .av-counter__watermark { color: rgba(255, 255, 255, .07); }
.av-counter--a .av-counter__label { color: rgba(255, 255, 255, .74); }

/* b - light tint */
.av-counter--b { background: var(--av-blue-light); color: var(--av-dark); }
.av-counter--b .av-counter__ic { background: var(--av-accent); color: #fff; }
.av-counter--b .av-counter__watermark { color: rgba(0, 0, 60, .06); }
/* Muted grey on the tint would be too faint to read comfortably. */
.av-counter--b .av-counter__label { color: rgba(0, 0, 60, .66); }

/* c - brand blue */
.av-counter--c { background: linear-gradient(135deg, var(--av-primary) 0%, #2c46e8 100%); color: #fff; }
.av-counter--c .av-counter__ic { background: rgba(255, 255, 255, .18); color: #fff; }
.av-counter--c .av-counter__watermark { color: rgba(255, 255, 255, .085); }
.av-counter--c .av-counter__label { color: rgba(255, 255, 255, .82); }

@media (prefers-reduced-motion: reduce) { .av-counter:hover { transform: none; } }
@media (max-width: 900px) { .av-counters .av-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .av-counters .av-grid { grid-template-columns: 1fr; }
  .av-counter { min-height: 0; padding: 24px 22px 22px; }
  /* The icon is absolutely positioned at the top of a 176px-tall card, with the
     figure pushed to the bottom by justify-content:flex-end. Dropping the
     min-height here collapsed the card to the height of its text, so the icon
     landed on top of the number. On one column it flows above the figure
     instead, which is what the absolute position was imitating anyway. */
  .av-counter__ic { position: static; margin-bottom: 14px; }
  .av-counter__watermark { font-size: 104px; }
}

/* CTA */
.av-cta { padding: 64px 0; background: var(--av-primary); color: #fff; background-size: cover; background-position: center; }
.av-cta--center { text-align: center; }
.av-cta__title { color: #fff; font-size: clamp(26px, 3vw, 38px); margin: 0 0 10px; }
.av-cta__text { color: rgba(255,255,255,.9); margin: 0 0 22px; }

@media (max-width: 992px) {
	.av-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.av-hero__grid { grid-template-columns: 1fr; }
	.av-hero__media { order: -1; }
}
@media (max-width: 640px) {
	.av-cols-2, .av-cols-3, .av-cols-4 { grid-template-columns: 1fr; }
}