/* About page only — loads last (after midz-layout-stability.css) */

/* Upper copy block — Our Values intro above funfacts */
body.about-page.services-page .midz-about-archive > .custom-container {
  padding-left: clamp(14px, 4vw, 72px) !important;
  padding-right: clamp(14px, 4vw, 72px) !important;
}

body.about-page.services-page .about-values-intro {
  margin-top: clamp(28px, 4vw, 44px) !important;
  text-align: left !important;
}

body.about-page.services-page .about-values-intro .section-subtitle {
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

body.about-page.services-page .about-values-intro .about-values-text {
  margin: 0 !important;
  text-align: left !important;
}

/* Laptop — About copy wider lines (like midz.co) */
@media (min-width: 992px) {
  body.about-page.services-page .about-page-copy {
    max-width: min(1240px, 100%) !important;
    width: 100% !important;
  }

  body.about-page.services-page .about-page-paragraph,
  body.about-page.services-page .about-values-intro .about-values-text {
    max-width: 100% !important;
  }
}

/* Funfacts — 30px above & below cards */
body.about-page.services-page .about-sec.about-sec--page {
  margin: 0 !important;
  padding: 0 clamp(14px, 4vw, 72px) !important;
}

body.about-page.services-page .about-sec--page .custom-container {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Our Values section — no section padding on laptop; container handles sides */
body.about-page.services-page .service-sec-2 {
  padding: 0 !important;
}

body.about-page.services-page .service-sec-2 > .custom-container {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: clamp(14px, 4vw, 72px) !important;
  padding-right: clamp(14px, 4vw, 72px) !important;
  text-align: left !important;
}

body.about-page.services-page .service-sec-2 .about-values-header,
body.about-page.services-page .service-sec-2 .about-values-header .section-subtitle {
  text-align: left !important;
  justify-content: flex-start !important;
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body.about-page.services-page .service-sec-2 .service-lists-header .custom-container {
  justify-content: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.about-page.services-page .service-sec-2 .service-box .service-inner {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box:first-child,
body.about-page.services-page .service-sec-2 .service-box:not(.active):not(:hover) .service-inner .service-img-box:first-child,
body.about-page.services-page .service-sec-2 .service-box.active .service-inner .service-img-box:first-child,
body.about-page.services-page .service-sec-2 .service-box:hover .service-inner .service-img-box:first-child {
  width: 160px !important;
  height: 145px !important;
  flex: 0 0 160px !important;
  flex-basis: 160px !important;
  opacity: 1 !important;
  overflow: visible !important;
}

body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 160px !important;
  height: 145px !important;
  object-fit: contain !important;
}

@media (min-width: 992px) {
  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box:not(.active):not(:hover) .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box.active .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box:hover .service-inner .service-img-box:first-child {
    width: 160px !important;
    height: 145px !important;
    flex: 0 0 160px !important;
    flex-basis: 160px !important;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
    width: 160px !important;
    height: 145px !important;
  }
}

@media (max-width: 991px) {
  body.about-page.services-page .midz-about-archive > .custom-container,
  body.about-page.services-page .service-sec-2 > .custom-container,
  body.about-page.services-page .about-sec.about-sec--page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.about-page.services-page .about-values-intro {
    margin-bottom: 40px !important;
  }

  body.about-page.services-page .service-sec-2 .service-box {
    transition: background-color 0.28s ease;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box:first-child {
    position: relative !important;
    overflow: visible !important;
    transition: width 0.28s cubic-bezier(0.25, 0.8, 0.35, 1), height 0.28s cubic-bezier(0.25, 0.8, 0.35, 1), flex-basis 0.28s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.28s ease;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
    transition: width 0.28s cubic-bezier(0.25, 0.8, 0.35, 1), height 0.28s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.28s ease;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-feature-description .title,
  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-feature-description p {
    transition: opacity 0.28s ease;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box:not(.active):not(:hover) .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box.active .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box:hover .service-inner .service-img-box:first-child {
    width: 158px !important;
    height: 145px !important;
    flex: 0 0 158px !important;
    flex-basis: 158px !important;
    opacity: 1 !important;
    margin-right: -8px !important;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
    width: 158px !important;
    height: 145px !important;
    max-width: none !important;
  }
}

@media (max-width: 575px) {
  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box:first-child,
  body.about-page.services-page .service-sec-2 .service-box:not(.active):not(:hover) .service-inner .service-img-box:first-child {
    width: 148px !important;
    height: 136px !important;
    flex: 0 0 148px !important;
    flex-basis: 148px !important;
    margin-right: -6px !important;
  }

  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
    width: 148px !important;
    height: 136px !important;
  }
}

/* Our Process — same left edge as Our Values (phone + laptop) */
body.about-page.services-page .awards-sec {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.about-page.services-page .awards-sec > .custom-container {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: clamp(14px, 4vw, 72px) !important;
  padding-right: clamp(14px, 4vw, 72px) !important;
  text-align: left !important;
}

body.about-page.services-page .awards-sec .section-header {
  margin-bottom: clamp(28px, 4vw, 48px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

body.about-page.services-page .awards-sec .section-header .section-subtitle {
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

body.about-page.services-page .awards-sec .awards-list {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
}

body.about-page.services-page .awards-sec .awards-box .awards-inner {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

body.about-page.services-page .awards-sec .awards-box .awards-inner h4 {
  text-align: left !important;
  position: relative;
  z-index: 2;
}

body.about-page.services-page .awards-sec .awards-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.about-page.services-page .awards-sec .awards-box .awards-inner {
  position: relative;
  z-index: 1;
}

body.about-page.services-page .awards-sec .awards-box {
  contain: layout style;
  overflow: hidden;
}

body.about-page.services-page .awards-sec .awards-box > .overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: none;
  transition: opacity 0.45s ease;
}

body.about-page.services-page .awards-sec .awards-box > .overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.12) 100%);
  opacity: 0.92;
  transition: opacity 0.45s ease;
}

body.about-page.services-page .awards-sec .awards-box.active > .overlay,
body.about-page.services-page .awards-sec .awards-box:hover > .overlay {
  opacity: 1;
  transform: none;
}

body.about-page.services-page .awards-sec .awards-box.active,
body.about-page.services-page .awards-sec .awards-box:hover {
  background: transparent !important;
  transform: none !important;
}

body.about-page.services-page .awards-sec .awards-box.active .awards-inner h4,
body.about-page.services-page .awards-sec .awards-box:hover .awards-inner h4 {
  transform: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

body.about-page.services-page .awards-sec .awards-box .awards-inner .date {
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  body.about-page.services-page .awards-sec .awards-box .overlay::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.2) 100%);
  }
}

@media (max-width: 991px) {
  body.about-page.services-page .awards-sec > .custom-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* About hero icon — phone up slightly, laptop down slightly */
@media (min-width: 992px) {
  body.about-page.services-page .midz-services-hero-shape {
    bottom: -60px !important;
  }
}

@media (max-width: 991px) {
  body.about-page.services-page .midz-services-hero-shape {
    bottom: -4px !important;
    width: clamp(190px, 58vw, 310px) !important;
    max-width: 72vw !important;
  }
}

/* Phone only — icon sits on the right edge (where user marked) */
@media (max-width: 767px) {
  body.about-page.services-page .midz-services-hero,
  body.about-page.services-page .midz-services-hero > .custom-container,
  body.about-page.services-page .midz-services-hero-inner {
    overflow: visible !important;
  }

  body.about-page.services-page .midz-services-hero-shape {
    right: -40px !important;
    left: auto !important;
    bottom: -14px !important;
    width: clamp(155px, 50vw, 220px) !important;
    max-width: none !important;
  }
}

@media (max-width: 390px) {
  body.about-page.services-page .midz-services-hero-shape {
    right: -44px !important;
    bottom: -16px !important;
    width: clamp(145px, 52vw, 200px) !important;
  }
}

/* About mobile — FAQ stable; copy below fold uses smooth scroll reveal in text-reveal.js */
@media (max-width: 991px) {
  body.about-page .faq-question-text.reveal-ready .char,
  body.about-page .faq-item .accordion-body p.reveal-ready .char {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  body.about-page .about-page-paragraph.is-revealed .char,
  body.about-page .about-values-text.is-revealed .char,
  body.about-page .about-page-paragraph.reveal-ready:not(.reveal-type) .char {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
  }
}

/* Our Values icons — float on mobile + laptop */
body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
  animation: upDownAnim 3s infinite linear !important;
}

body.about-page.services-page .service-sec-2 .service-box.active .service-inner .service-img-box img,
body.about-page.services-page .service-sec-2 .service-box:hover .service-inner .service-img-box img {
  animation: upDownAnim 2s infinite linear !important;
}

@media (prefers-reduced-motion: reduce) {
  body.about-page.services-page .service-sec-2 .service-box .service-inner .service-img-box img {
    animation: none !important;
  }
}