.afzs-services,
.afzs-services * {
  box-sizing: border-box;
}

.afzs-services {
  --afzs-default-accent: #11b8bd;
  --afzs-heading-font: "Lato";
  --afzs-body-font: "Inter";
  --afzs-heading-desktop: 48px;
  --afzs-heading-tablet: 30.72px;
  --afzs-heading-mobile: 32px;
  --afzs-body-desktop: 20px;
  --afzs-body-tablet: 12.8px;
  --afzs-body-mobile: 16px;
  --afzs-heading-weight: 700;

  /* Figma geometry: image and outline are equal 1:1 squares with the same X/Y offset. */
  --afzs-slider-size: clamp(260px, 28.666667vw, 550.4px);
  --afzs-outline-size: var(--afzs-slider-size);
  --afzs-outline-shift: calc(var(--afzs-slider-size) * 0.22);
  --afzs-span-size: calc(var(--afzs-slider-size) * 1.22);
  --afzs-compact-size: calc(var(--afzs-slider-size) * 1.22);
  --afzs-row-inline: clamp(30px, 4vw, 77px);
  --afzs-row-block: clamp(0px, 6vw, 0px);
  --afzs-column-gap: clamp(30px, 4vw, 77px);
  --afzs-title-gap: clamp(22px, 2.833333vw, 54px);
  --afzs-copy-width: clamp(320px, 42vw, 806px);
  --afzs-description-width: clamp(307px, 40vw, 768px);

  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  overflow-x: clip;
  background: #fff;
  color: #050505;
}

.afzs-row {
  position: relative;
  width: 100%;
  min-height: clamp(650px, 62vw, 700px);
  margin: 0;
  padding: var(--afzs-row-block) var(--afzs-row-inline);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--afzs-column-gap);
}

.afzs-copy,
.afzs-media {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.afzs-copy { 
  width: min(100%, var(--afzs-copy-width));
  align-self: end;
  padding-bottom:100px;
}

.afzs-services.afzs-services .afzs-heading {
  margin: 0 0 var(--afzs-title-gap) !important;
  padding: 0 !important;
  font-family: "Lato" !important;
  font-size: var(--afzs-heading-desktop) !important;
  font-weight: var(--afzs-heading-weight) !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #050505 !important;
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  text-shadow: none !important;
  /* Never split a word across lines (e.g. "TOUCHSCREE / NS"). */
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

.afzs-description {
  width: min(100%, var(--afzs-description-width));
}

.afzs-services.afzs-services .afzs-description,
.afzs-services.afzs-services .afzs-description p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  font-family: "Inter" !important;
  font-size: var(--afzs-body-desktop) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #111 !important;
  background: transparent !important;
}

.afzs-description p + p {
  margin-top: 0.8em !important;
}

/* Text faces inward toward its image. */
.afzs-image-right .afzs-copy,
.afzs-image-right .afzs-heading,
.afzs-image-right .afzs-description,
.afzs-image-right .afzs-description p {
  text-align: right !important;
}

.afzs-image-right .afzs-description {
  margin-left: auto;
}

.afzs-image-left .afzs-copy,
.afzs-image-left .afzs-heading,
.afzs-image-left .afzs-description,
.afzs-image-left .afzs-description p {
  text-align: left !important;
}

.afzs-image-left .afzs-description {
  margin-right: auto;
}

/*
 * Mobile-only text alignment, driven by the "Text Alignment (Mobile)"
 * ACF field (afzs-mobile-align-left/center/right on .afzs-copy).
 * Inert on desktop/tablet; only takes effect inside the
 * max-width:767px query below, where it overrides the desktop
 * afzs-image-left/right rules above (same specificity, declared later).
 */

/*
 * Keep the complete media composition square (1:1) for every accent
 * direction. This gives the horizontal and vertical offsets the same
 * available distance, so the animated path can join the exact midpoint
 * of both sides without one axis taking extra space.
 */
.afzs-media {
  --afzs-row-accent: var(--afzs-default-accent);
  width: var(--afzs-span-size);
  height: var(--afzs-span-size);
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

.afzs-accent-outline {
  position: absolute;
  width: var(--afzs-outline-size);
  height: var(--afzs-outline-size);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/*
 * Two outline SVGs are rendered per row (desktop/tablet + mobile) so the
 * accent corner can be set independently per breakpoint. Only one shows
 * at a time; default is desktop/tablet visible, mobile hidden, flipped
 * inside the max-width:767px query below.
 */
.afzs-accent-outline--mobile {
  display: none;
}

.afzs-accent-segment {
  fill: none;
  stroke: var(--afzs-row-accent);
  stroke-width: clamp(1.5px, 0.145vw, 2.6px);
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  shape-rendering: geometricPrecision;
  will-change: x2, y2;
}

.afzs-services.afzs-services .afzs-slider {
  position: absolute !important;
  width: var(--afzs-slider-size) !important;
  height: var(--afzs-slider-size) !important;
  aspect-ratio: 1 / 1;
  overflow: hidden !important;
  background: #ececec;
  z-index: 3;
  contain: paint;
}

.afzs-services.afzs-services .afzs-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.afzs-track.afzs-no-transition {
  transition: none !important;
}

.afzs-services.afzs-services .afzs-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Desktop/tablet mirrored rows. */
.afzs-image-right .afzs-copy {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.afzs-image-right .afzs-media {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.afzs-image-left .afzs-media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.afzs-image-left .afzs-copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

/* Image upper-left; outline extends bottom-right. */
.afzs-accent-bottom-right .afzs-accent-outline {
  left: var(--afzs-outline-shift);
  top: var(--afzs-outline-shift);
}
.afzs-accent-bottom-right .afzs-slider {
  left: 0;
  top: 0;
}

/* Image lower-left; outline extends top-right. */
.afzs-accent-top-right .afzs-accent-outline {
  left: var(--afzs-outline-shift);
  top: 0;
}
.afzs-accent-top-right .afzs-slider {
  left: 0;
  top: var(--afzs-outline-shift);
}

/* Image upper-right; outline extends bottom-left. */
.afzs-accent-bottom-left .afzs-accent-outline {
  left: 0;
  top: var(--afzs-outline-shift);
}
.afzs-accent-bottom-left .afzs-slider {
  left: var(--afzs-outline-shift);
  top: 0;
}

/* Image lower-right; outline extends top-left. */
.afzs-accent-top-left .afzs-accent-outline {
  left: 0;
  top: 0;
}
.afzs-accent-top-left .afzs-slider {
  left: var(--afzs-outline-shift);
  top: var(--afzs-outline-shift);
}

@media (min-width: 1300px) {
{
	  --afzs-outline-shift: calc(var(--afzs-slider-size) * 0.28)!important;
 	 --afzs-span-size: calc(var(--afzs-slider-size) * 1.28)!important;
 	 --afzs-compact-size: calc(var(--afzs-slider-size) * 1.28)!important;
}
	
}
@media (min-width: 600px) and (max-width: 1023px) {
  .afzs-services {
    --afzs-slider-size: clamp(225px, 32vw, 330px);
  }

  .afzs-row {
    min-height: clamp(450px, 70vw, 620px);
  }

  .afzs-copy {
    width: 100%;
  }

  .afzs-services.afzs-services .afzs-heading {
    font-size: var(--afzs-heading-tablet) !important;
  }

  .afzs-services.afzs-services .afzs-description,
  .afzs-services.afzs-services .afzs-description p {
    font-size: var(--afzs-body-tablet) !important;
  }
}

@media (max-width: 599px) {
  .afzs-services {
    --afzs-slider-size: clamp(170px, 58vw, 250px);
    --afzs-row-inline: 20px;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .afzs-row {
    min-height: 0;
    padding: 48px var(--afzs-row-inline) 64px;
    display: flex;
    flex-direction: column;
    /* Figma mobile frames: image and text both sit flush against the
       left edge — never centered as a block. */
    align-items: flex-start;
    gap: 34px;
  }

  .afzs-media {
    order: 1;
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .afzs-copy {
    order: 2;
    width: 100%;
    /* Narrower reading column to match the Figma text width, instead of
       stretching edge-to-edge across the phone screen. */
    max-width: clamp(260px, 82vw, 320px);
    align-self: flex-start;
  	padding-bottom:0px;
  }

  .afzs-services.afzs-services .afzs-heading {
    margin-bottom: 20px !important;
    font-size: var(--afzs-heading-mobile) !important;
    line-height: 1 !important;
  }

  .afzs-description {
    width: 100%;
    margin: 0;
  }

  .afzs-services.afzs-services .afzs-description,
  .afzs-services.afzs-services .afzs-description p {
    font-size: var(--afzs-body-mobile) !important;
    line-height: 1.3 !important;
  }

  .afzs-accent-segment {
    stroke-width: 1.5px;
  }

  /*
   * Mobile text alignment, controlled by the "Text Alignment (Mobile)"
   * ACF select field. "afzs-mobile-align-left" is the default/fallback
   * and reproduces the previous hardcoded left-aligned behaviour.
   */
  .afzs-mobile-align-left.afzs-copy,
  .afzs-mobile-align-left .afzs-heading,
  .afzs-mobile-align-left .afzs-description,
  .afzs-mobile-align-left .afzs-description p {
    text-align: left !important;
  }
  .afzs-mobile-align-left .afzs-description {
    margin-left: 0;
    margin-right: auto;
  }

  .afzs-mobile-align-center.afzs-copy,
  .afzs-mobile-align-center .afzs-heading,
  .afzs-mobile-align-center .afzs-description,
  .afzs-mobile-align-center .afzs-description p {
    text-align: center !important;
  }
  .afzs-mobile-align-center .afzs-description {
    margin-left: auto;
    margin-right: auto;
  }

  .afzs-mobile-align-right.afzs-copy,
  .afzs-mobile-align-right .afzs-heading,
  .afzs-mobile-align-right .afzs-description,
  .afzs-mobile-align-right .afzs-description p {
    text-align: right !important;
  }
  .afzs-mobile-align-right .afzs-description {
    margin-left: auto;
    margin-right: 0;
  }

  /*
   * Mobile accent corner, controlled by the "Accent Position (Mobile)"
   * ACF select field. Swaps which outline SVG is visible and
   * repositions the shared photo/outline box to match.
   */
  .afzs-accent-outline--desktop {
    display: none;
  }
  .afzs-accent-outline--mobile {
    display: block;
  }

  /* Image upper-left; outline extends bottom-right. */
  .afzs-mobile-accent-bottom-right .afzs-accent-outline--mobile {
    left: var(--afzs-outline-shift);
    top: var(--afzs-outline-shift);
  }
  .afzs-mobile-accent-bottom-right .afzs-slider {
    left: 0;
    top: 0;
  }

  /* Image lower-left; outline extends top-right. */
  .afzs-mobile-accent-top-right .afzs-accent-outline--mobile {
    left: var(--afzs-outline-shift);
    top: 0;
  }
  .afzs-mobile-accent-top-right .afzs-slider {
    left: 0;
    top: var(--afzs-outline-shift);
  }

  /* Image upper-right; outline extends bottom-left. */
  .afzs-mobile-accent-bottom-left .afzs-accent-outline--mobile {
    left: 0;
    top: var(--afzs-outline-shift);
  }
  .afzs-mobile-accent-bottom-left .afzs-slider {
    left: var(--afzs-outline-shift);
    top: 0;
  }

  /* Image lower-right; outline extends top-left. */
  .afzs-mobile-accent-top-left .afzs-accent-outline--mobile {
    left: 0;
    top: 0;
  }
  .afzs-mobile-accent-top-left .afzs-slider {
    left: var(--afzs-outline-shift);
    top: var(--afzs-outline-shift);
  }
}

@media (max-width: 360px) {
  .afzs-services {
    --afzs-row-inline: 16px;
  }
}

@supports (width: 100dvw) {
  @media (min-width: 600px) {
    .afzs-services {
      width: 100dvw;
      max-width: 100dvw;
      margin-inline: calc(50% - 50dvw);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .afzs-track {
    transition-duration: 0.01ms;
  }

  .afzs-accent-segment {
    transition: none !important;
  }

}

/* ------------------------------------------------------------------
 * Prev / Next arrows on each image slider (same style as the
 * before/after slider): white chevrons, left and right, centred.
 * ------------------------------------------------------------------ */
.afzs-services.afzs-services .afzs-arrow {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: -32px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  transition: opacity 160ms ease;
}

.afzs-services.afzs-services .afzs-arrow--prev {
  left: 6px !important;
  right: auto !important;
}

.afzs-services.afzs-services .afzs-arrow--next {
  right: 6px !important;
  left: auto !important;
}

.afzs-services.afzs-services .afzs-arrow::before,
.afzs-services.afzs-services .afzs-arrow::after {
  content: none !important;
  display: none !important;
}

.afzs-services.afzs-services .afzs-arrow:hover,
.afzs-services.afzs-services .afzs-arrow:focus {
  background: transparent !important;
  color: #fff !important;
  opacity: 0.8 !important;
}

.afzs-services.afzs-services .afzs-arrow:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

.afzs-services.afzs-services .afzs-arrow .afzs-arrow__icon {
  display: block !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.afzs-services.afzs-services .afzs-arrow .afzs-arrow__icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
}

@media (max-width: 599px) {
  .afzs-services.afzs-services .afzs-arrow {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-top: -24px !important;
  }

  .afzs-services.afzs-services .afzs-arrow--prev { left: 2px !important; }
  .afzs-services.afzs-services .afzs-arrow--next { right: 2px !important; }

  .afzs-services.afzs-services .afzs-arrow .afzs-arrow__icon {
    width: 12px !important;
    min-width: 12px !important;
    height: 22px !important;
    min-height: 22px !important;
  }
}