.epoptic-service-cards {
  --epoptic-grid-max: 1715px;
  --epoptic-page-pad: clamp(24px, 5.2vw, 100px);
  --epoptic-services-text: #6b6e72;
  --epoptic-services-heading: #6b6e72;
  --epoptic-services-accent: #5a755f;
  --epoptic-services-cta-bg: #e4e9ed;
  --epoptic-services-cta-text: #404448;
  --epoptic-services-radius: 18px;
  --epoptic-services-collapsed-height: 220px;
  --epoptic-services-expanded-height: 500px;
  --epoptic-services-cut-size: 76px;
  --epoptic-services-panel-pad-top: 26px;
  --epoptic-services-panel-pad-x: 24px;
  --epoptic-services-panel-pad-bottom: 24px;
  --epoptic-services-title-excerpt-gap: 34px;
  --epoptic-services-shadow: 0 24px 48px rgba(74, 82, 89, 0.14);
  --epoptic-services-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: min(calc(100% - (var(--epoptic-page-pad) * 2)), var(--epoptic-grid-max));
  max-width: 100%;
  margin: 0 auto;
  font-family: "Manrope", sans-serif;
  color: var(--epoptic-services-text);
}

.epoptic-service-cards * {
  box-sizing: border-box;
}

.epoptic-service-cards__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  min-width: 0;
}

.epoptic-service-cards__card {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  height: var(--epoptic-services-collapsed-height);
  min-width: 0;
  scroll-margin-top: 24px;
  transition: height 560ms var(--epoptic-services-ease);
  will-change: height;
}

.epoptic-service-cards__card[role="link"] {
  cursor: pointer;
}

.epoptic-service-cards__card[role="link"]:focus-visible .epoptic-service-cards__panel {
  outline: 2px solid rgba(64, 68, 72, 0.34);
  outline-offset: 4px;
}

.epoptic-service-cards__card:hover,
.epoptic-service-cards__card:focus-within,
.epoptic-service-cards__card:target,
.epoptic-service-cards__card.is-active {
  z-index: 3;
}

.epoptic-service-cards__card:hover,
.epoptic-service-cards__card.is-active,
.epoptic-service-cards__card:target,
.epoptic-service-cards__card:focus-within {
  height: max(var(--epoptic-services-expanded-height), 500px);
}

.epoptic-service-cards__panel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--epoptic-services-panel-pad-top) var(--epoptic-services-panel-pad-x) var(--epoptic-services-panel-pad-bottom);
  background: transparent;
  border-radius: var(--epoptic-services-radius);
  /* No overflow clipping here: the collapsed summary/excerpt must never be
     cut off. The animated blocks (.epoptic-service-cards__expanded and
     .epoptic-service-cards__excerpt) each clip themselves via their own
     overflow:hidden + max-height, so the panel does not need to. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition:
    padding 560ms var(--epoptic-services-ease),
    box-shadow 420ms var(--epoptic-services-ease),
    filter 420ms var(--epoptic-services-ease);
  transform-origin: top left;
}

.epoptic-service-cards__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--epoptic-card-color, #dce3e9);
  border-radius: var(--epoptic-services-radius);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--epoptic-services-cut-size)),
    calc(100% - var(--epoptic-services-cut-size)) 100%,
    0 100%
  );
  pointer-events: none;
  transition: clip-path 560ms var(--epoptic-services-ease);
  will-change: clip-path;
}

.epoptic-service-cards__panel::after {
  display: none;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: var(--epoptic-services-cut-size);
  height: var(--epoptic-services-cut-size);
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  transition:
    opacity 420ms var(--epoptic-services-ease),
    transform 560ms var(--epoptic-services-ease);
}

.epoptic-service-cards__card:hover .epoptic-service-cards__panel,
.epoptic-service-cards__card.is-active .epoptic-service-cards__panel,
.epoptic-service-cards__card:target .epoptic-service-cards__panel,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__panel {
  padding: 28px 32px 24px;
  box-shadow: none;
  filter: none;
}

.epoptic-service-cards__card:hover .epoptic-service-cards__panel::before,
.epoptic-service-cards__card.is-active .epoptic-service-cards__panel::before,
.epoptic-service-cards__card:target .epoptic-service-cards__panel::before,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__panel::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

.epoptic-service-cards__summary {
  display: grid;
  gap: var(--epoptic-services-title-excerpt-gap);
  position: relative;
  z-index: 1;
  transition: gap 500ms var(--epoptic-services-ease);
}

.epoptic-service-cards__title {
  margin: 0;
  font-size: 25px;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--epoptic-services-heading);
  transition:
    font-size 500ms var(--epoptic-services-ease),
    line-height 500ms var(--epoptic-services-ease);
}

.epoptic-service-cards__excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  font-weight: 400;
  white-space: pre-line;
  color: var(--epoptic-services-text);
  overflow: hidden;
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 260ms ease-out,
    max-height 420ms var(--epoptic-services-ease),
    transform 420ms var(--epoptic-services-ease);
}

.epoptic-service-cards__card:hover .epoptic-service-cards__summary,
.epoptic-service-cards__card.is-active .epoptic-service-cards__summary,
.epoptic-service-cards__card:target .epoptic-service-cards__summary,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__summary {
  gap: 22px;
}

.epoptic-service-cards__card:hover .epoptic-service-cards__title,
.epoptic-service-cards__card.is-active .epoptic-service-cards__title,
.epoptic-service-cards__card:target .epoptic-service-cards__title,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__title {
  font-size: 22px;
  line-height: 1.12;
}

.epoptic-service-cards__card:hover .epoptic-service-cards__excerpt,
.epoptic-service-cards__card.is-active .epoptic-service-cards__excerpt,
.epoptic-service-cards__card:target .epoptic-service-cards__excerpt,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__excerpt {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
}

.epoptic-service-cards__expanded {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 18px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(18px);
  transition:
    opacity 420ms ease-out 90ms,
    max-height 560ms var(--epoptic-services-ease),
    transform 560ms var(--epoptic-services-ease);
}

.epoptic-service-cards__card:hover .epoptic-service-cards__expanded,
.epoptic-service-cards__card.is-active .epoptic-service-cards__expanded,
.epoptic-service-cards__card:target .epoptic-service-cards__expanded,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__expanded {
  flex: 1 1 auto;
  opacity: 1;
  max-height: 720px;
  transform: translateY(0);
}

.epoptic-service-cards__details {
  font-size: 16px;
  line-height: 1.45;
  color: #31363b;
}

.epoptic-service-cards__details p,
.epoptic-service-cards__details ul {
  margin: 0 0 10px;
}

.epoptic-service-cards__details p:last-child,
.epoptic-service-cards__details ul:last-child {
  margin-bottom: 0;
}

.epoptic-service-cards__details strong {
  font-weight: 700;
}

.epoptic-service-cards__details ul {
  padding-left: 1.05em;
  list-style-position: outside;
}

.epoptic-service-cards__details li + li {
  margin-top: 2px;
}

.epoptic-service-cards__footer-link {
  margin-top: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  color: var(--epoptic-services-text);
  text-decoration: none;
}

.epoptic-service-cards__footer-copy {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.epoptic-service-cards__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.epoptic-service-cards__icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.epoptic-service-cards__icon i {
  font-size: 14px;
}

.epoptic-service-cards__trigger-icon > svg,
.epoptic-service-cards__trigger-icon > i,
.epoptic-service-cards__footer-icon > svg,
.epoptic-service-cards__footer-icon > i,
.epoptic-service-cards__bottom-cta-icon > svg,
.epoptic-service-cards__bottom-cta-icon > i {
  transform: rotate(45deg);
  transform-origin: center;
}

.epoptic-service-cards__bottom-cta-icon > svg,
.epoptic-service-cards__bottom-cta-icon > i {
  transform: none;
}

.epoptic-service-cards__footer-icon {
  color: var(--epoptic-services-accent);
  transition: transform 300ms ease-out;
}

.epoptic-service-cards__footer-link:hover .epoptic-service-cards__footer-icon,
.epoptic-service-cards__footer-link:focus .epoptic-service-cards__footer-icon,
.epoptic-service-cards__footer-link:focus-visible .epoptic-service-cards__footer-icon {
  transform: translateX(4px);
}

.epoptic-service-cards__trigger {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #edf0f2;
  color: #7d8388;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(73, 79, 87, 0.09);
  transition:
    transform 300ms ease-out,
    opacity 300ms ease-out,
    background-color 300ms ease-out,
    color 300ms ease-out,
    box-shadow 300ms ease-out;
}

.epoptic-service-cards__trigger:hover,
.epoptic-service-cards__trigger:focus,
.epoptic-service-cards__trigger:focus-visible {
  background: #f3f5f6;
  color: #61666a;
  outline: none;
}

.epoptic-service-cards__card:hover .epoptic-service-cards__trigger,
.epoptic-service-cards__card.is-active .epoptic-service-cards__trigger,
.epoptic-service-cards__card:target .epoptic-service-cards__trigger,
.epoptic-service-cards__card:focus-within .epoptic-service-cards__trigger {
  opacity: 0;
  transform: translate(6px, 8px) scale(0.92);
  pointer-events: none;
  box-shadow: none;
}

.epoptic-service-cards__bottom-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--epoptic-services-cta-text);
  transition: gap 300ms ease-out;
}

.epoptic-service-cards__bottom-cta-text,
.epoptic-service-cards__bottom-cta-icon {
  background: var(--epoptic-services-cta-bg);
  transition:
    transform 300ms ease-out,
    border-radius 300ms ease-out,
    padding 300ms ease-out,
    margin 300ms ease-out,
    background-color 300ms ease-out,
    color 300ms ease-out;
}

.epoptic-service-cards__bottom-cta-text {
  min-height: 30px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
}

.epoptic-service-cards__bottom-cta-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.epoptic-service-cards__bottom-cta:hover,
.epoptic-service-cards__bottom-cta:focus,
.epoptic-service-cards__bottom-cta:focus-visible {
  gap: 0;
  outline: none;
}

.epoptic-service-cards__bottom-cta:hover .epoptic-service-cards__bottom-cta-text,
.epoptic-service-cards__bottom-cta:focus .epoptic-service-cards__bottom-cta-text,
.epoptic-service-cards__bottom-cta:focus-visible .epoptic-service-cards__bottom-cta-text {
  padding-right: 16px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(2px);
}

.epoptic-service-cards__bottom-cta:hover .epoptic-service-cards__bottom-cta-icon,
.epoptic-service-cards__bottom-cta:focus .epoptic-service-cards__bottom-cta-icon,
.epoptic-service-cards__bottom-cta:focus-visible .epoptic-service-cards__bottom-cta-icon {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform: translateX(-1px);
}

@media (max-width: 1180px) {
  .epoptic-service-cards__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .epoptic-service-cards {
    --epoptic-services-expanded-height: 430px;
    --epoptic-services-panel-pad-top: 24px;
    --epoptic-services-panel-pad-x: 24px;
    --epoptic-services-panel-pad-bottom: 20px;
  }

  .epoptic-service-cards__panel {
    padding: var(--epoptic-services-panel-pad-top) var(--epoptic-services-panel-pad-x) var(--epoptic-services-panel-pad-bottom);
  }

  .epoptic-service-cards__card:hover,
  .epoptic-service-cards__card.is-active,
  .epoptic-service-cards__card:target,
  .epoptic-service-cards__card:focus-within {
    height: max(var(--epoptic-services-expanded-height), 430px);
  }

  .epoptic-service-cards__card:hover .epoptic-service-cards__panel,
  .epoptic-service-cards__card:focus-within .epoptic-service-cards__panel {
    transform: none;
  }
}

@media (max-width: 767px) {
  .epoptic-service-cards {
    width: min(calc(100% - 32px), var(--epoptic-grid-max));
    --epoptic-services-collapsed-height: 186px;
    --epoptic-services-expanded-height: auto;
    --epoptic-services-cut-size: 60px;
    --epoptic-services-panel-pad-top: 20px;
    --epoptic-services-panel-pad-x: 18px;
    --epoptic-services-panel-pad-bottom: 18px;
    --epoptic-services-title-excerpt-gap: 18px;
  }

  .epoptic-service-cards__track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .epoptic-service-cards__panel {
    height: 100%;
    padding: var(--epoptic-services-panel-pad-top) var(--epoptic-services-panel-pad-x) var(--epoptic-services-panel-pad-bottom);
  }

  .epoptic-service-cards__card:hover,
  .epoptic-service-cards__card:focus-within {
    height: var(--epoptic-services-collapsed-height);
  }

  .epoptic-service-cards__card.is-active,
  .epoptic-service-cards__card:target {
    height: auto;
    min-height: 430px;
  }

  .epoptic-service-cards__card.is-active .epoptic-service-cards__panel,
  .epoptic-service-cards__card:target .epoptic-service-cards__panel {
    height: auto;
    min-height: 430px;
    transform: none;
    box-shadow: var(--epoptic-services-shadow);
  }

  .epoptic-service-cards__card:hover .epoptic-service-cards__panel,
  .epoptic-service-cards__card:focus-within .epoptic-service-cards__panel {
    height: var(--epoptic-services-collapsed-height);
    transform: none;
    box-shadow: none;
    filter: none;
  }

  .epoptic-service-cards__summary {
    gap: 14px;
  }

  .epoptic-service-cards__title {
    font-size: 22px;
    line-height: 1.16;
  }

  .epoptic-service-cards__excerpt {
    font-size: 15px;
    line-height: 1.62;
  }

  /*
   * On touch devices the open/closed state is driven solely by `.is-active`
   * (toggled via JS). Keep the excerpt visible for hover/focus so that simply
   * focusing a collapsed card never hides it, then hide it only while open.
   */
  .epoptic-service-cards__card:hover .epoptic-service-cards__excerpt,
  .epoptic-service-cards__card:focus-within .epoptic-service-cards__excerpt {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
  }

  .epoptic-service-cards__card.is-active .epoptic-service-cards__excerpt,
  .epoptic-service-cards__card:target .epoptic-service-cards__excerpt {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
  }

  .epoptic-service-cards__expanded {
    gap: 16px;
  }

  .epoptic-service-cards__card:hover .epoptic-service-cards__expanded,
  .epoptic-service-cards__card:target .epoptic-service-cards__expanded,
  .epoptic-service-cards__card:focus-within .epoptic-service-cards__expanded {
    opacity: 0;
    max-height: 0;
    transform: translateY(14px);
  }

  .epoptic-service-cards__card.is-active .epoptic-service-cards__expanded,
  .epoptic-service-cards__card:target .epoptic-service-cards__expanded {
    opacity: 1;
    max-height: 720px;
    transform: translateY(0);
  }

  .epoptic-service-cards__trigger {
    width: 34px;
    height: 34px;
    right: 12px;
    bottom: 12px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /*
   * Once the card is open the footer link/arrow becomes the visible call to
   * action. Hide the collapsed-state trigger so taps fall through to the
   * footer (footer link) or the card body (card link).
   */
  .epoptic-service-cards__card.is-active .epoptic-service-cards__trigger,
  .epoptic-service-cards__card:target .epoptic-service-cards__trigger {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .epoptic-service-cards__bottom-cta {
    margin-top: 24px;
    width: 100%;
    justify-content: flex-start;
  }
}