/* =========================================================
   Block: How We Work IL
   File: blocks/il-how-we-work/style.css
   ========================================================= */

.il-how-we-work-section,
.il-how-we-work-editor {
  position: relative;
  width: 100%;
  max-width: none !important;
  padding-top: var(--hww-il-section-padding-top, 96px);
  padding-bottom: var(--hww-il-section-padding-bottom, 96px);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--hww-il-section-gradient-color, rgba(255, 255, 255, 0.18)) calc(var(--hww-il-section-gradient-opacity, 1) * 100%),
        transparent
      ),
      transparent 42%
    ),
    var(--hww-il-bg, #f0f0f0);
  border-style: none !important;
}

.il-how-we-work-section {
  margin: 0;
}


/* =========================================================
   Decorative background
   ========================================================= */

.il-how-we-work-section::before,
.il-how-we-work-editor::before {
  content: "";
  display: var(--hww-il-grid-pattern-display, block);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(
      var(--hww-il-grid-pattern-color, rgba(74, 138, 74, 0.08)) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--hww-il-grid-pattern-color, rgba(74, 138, 74, 0.08)) 1px,
      transparent 1px
    );
  background-size: 64px 64px;
  opacity: var(--hww-il-grid-pattern-opacity, 0.52);
}


/* =========================================================
   Layout
   ========================================================= */

.il-how-we-work__container {
  position: relative;
  z-index: 2;
  width: min(
    calc(100% - (var(--hww-il-container-padding-x, 48px) * 2)),
    var(--hww-il-container-max-width, 1180px)
  );
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

.il-how-we-work-section[style*="--hww-il-container-max-width:none"] .il-how-we-work__container,
.il-how-we-work-editor[style*="--hww-il-container-max-width:none"] .il-how-we-work__container {
  width: calc(100% - (var(--hww-il-container-padding-x, 48px) * 2));
  max-width: none;
}

.il-how-we-work__heading-wrap {
  width: 100%;
  max-width: var(--hww-il-heading-max-width, 620px);
  margin: 0 0 var(--hww-il-heading-margin-bottom, 42px);
  text-align: var(--hww-il-heading-text-align, left);
  box-sizing: border-box;
}


/* =========================================================
   Eyebrow
   ========================================================= */

.il-how-we-work__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hww-il-eyebrow-line-gap, 8px);
  margin: 0 0 var(--hww-il-eyebrow-margin-bottom, 10px);
  color: var(--hww-il-eyebrow-color, #4a8a4a);
  font-family: var(--hww-il-eyebrow-family, Inter, Arial, sans-serif);
  font-size: var(--hww-il-eyebrow-size, 13px);
  font-weight: var(--hww-il-eyebrow-weight, 700);
  line-height: var(--hww-il-eyebrow-line, 1);
  letter-spacing: var(--hww-il-eyebrow-spacing, 0em);
  text-transform: var(--hww-il-eyebrow-transform, uppercase);
}

.il-how-we-work__eyebrow::before {
  content: "";
  display: var(--hww-il-eyebrow-line-display, block);
  width: var(--hww-il-eyebrow-line-width, 18px);
  height: var(--hww-il-eyebrow-line-thickness, 1px);
  flex: 0 0 var(--hww-il-eyebrow-line-width, 18px);
  background: var(--hww-il-eyebrow-line-color, currentColor);
}


/* =========================================================
   Heading
   ========================================================= */

.il-how-we-work__heading {
  margin: 0;
  color: var(--hww-il-heading-color, #000000);
  font-family: var(--hww-il-heading-family, Inter, Arial, sans-serif);
  font-size: var(--hww-il-heading-size, 48px);
  font-weight: var(--hww-il-heading-weight, 700);
  line-height: var(--hww-il-heading-line, 1.12);
  letter-spacing: var(--hww-il-heading-spacing, 0em);
  text-transform: var(--hww-il-heading-transform, none);
}

.il-how-we-work__heading span {
  display: inline;
}

.il-how-we-work__heading-highlight {
  color: var(--hww-il-heading-highlight-color, #26ad21);
}


/* =========================================================
   Grid
   ========================================================= */

.il-how-we-work__grid {
  display: grid;
  grid-template-columns: repeat(var(--hww-il-columns-desktop, 4), minmax(0, 1fr));
  gap: var(--hww-il-grid-gap, 28px);
  box-sizing: border-box;
}


/* =========================================================
   Cards
   ========================================================= */

.il-how-we-work__card {
  position: relative;
  min-height: var(--hww-il-card-min-height, 210px);
  perspective: 1200px;
  -webkit-perspective: 1200px;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

.il-how-we-work__card-inner {
  position: relative;
  min-height: var(--hww-il-card-min-height, 210px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: var(--hww-il-card-transition, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1));
  box-sizing: border-box;
}

.il-how-we-work__card:hover .il-how-we-work__card-inner,
.il-how-we-work__card:focus-within .il-how-we-work__card-inner {
  transform: var(--hww-il-card-hover-transform, rotateY(180deg));
}

.il-how-we-work__card-face {
  position: absolute;
  inset: 0;
  min-height: var(--hww-il-card-min-height, 210px);
  display: flex;
  flex-direction: column;
  padding-top: var(--hww-il-card-padding-top, 24px);
  padding-right: var(--hww-il-card-padding-right, 28px);
  padding-bottom: var(--hww-il-card-padding-bottom, 24px);
  padding-left: var(--hww-il-card-padding-left, 28px);
  border: 1px solid var(--hww-il-card-border, rgba(26, 48, 26, 0.08));
  border-radius: var(--hww-il-card-radius, 16px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  overflow: hidden;
  box-sizing: border-box;
}

.il-how-we-work__card-front {
  justify-content: space-between;
  align-items: var(--hww-il-card-items-align, flex-start);
  text-align: var(--hww-il-card-content-align, left);
  background: var(--hww-il-card-bg, #ffffff);
  box-shadow: var(--hww-il-card-shadow, 0 22px 46px var(--hww-il-card-shadow-color, rgba(26, 48, 26, 0.08)));
  transform: rotateY(0deg) translateZ(1px);
}

.il-how-we-work__card-front > *,
.il-how-we-work__card-back > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.il-how-we-work__card-back {
  justify-content: center;
  background:
    radial-gradient(
      circle at 80% 0%,
      var(--hww-il-card-back-glow-color, rgba(255, 255, 255, 0.08)),
      transparent 15rem
    ),
    var(--hww-il-card-back-bg, #1a301a);
  transform: rotateY(180deg) translateZ(1px);
}

.il-how-we-work__card-back::before {
  content: "";
  display: var(--hww-il-card-back-glow-display, block);
  position: absolute;
  right: -38px;
  bottom: -38px;
  z-index: 1;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: var(--hww-il-accent, #26ad21);
  opacity: 0.08;
  pointer-events: none;
}

.il-how-we-work__card-back > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   Card content
   ========================================================= */

.il-how-we-work__step {
  position: relative;
  z-index: 2;
  color: var(--hww-il-step-color, #4a8a4a);
  font-family: var(--hww-il-step-family, Inter, Arial, sans-serif);
  font-size: var(--hww-il-step-size, 12px);
  font-weight: var(--hww-il-step-weight, 700);
  line-height: var(--hww-il-step-line, 1);
  letter-spacing: var(--hww-il-step-spacing, 0.04em);
  text-transform: var(--hww-il-step-transform, uppercase);
}

.il-how-we-work__card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--hww-il-title-color, #000000);
  font-family: var(--hww-il-title-family, Inter, Arial, sans-serif);
  font-size: var(--hww-il-title-size, 24px);
  font-weight: var(--hww-il-title-weight, 700);
  line-height: var(--hww-il-title-line, 1.12);
  letter-spacing: var(--hww-il-title-spacing, 0em);
  text-transform: var(--hww-il-title-transform, none);
}

.il-how-we-work__description {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--hww-il-description-color, #ffffff);
  font-family: var(--hww-il-description-family, Lato, Arial, sans-serif);
  font-size: var(--hww-il-description-size, 14px);
  font-weight: var(--hww-il-description-weight, 400);
  line-height: var(--hww-il-description-line, 1.6);
  letter-spacing: var(--hww-il-description-spacing, 0em);
  text-transform: var(--hww-il-description-transform, none);
}

.il-how-we-work__icon {
  position: relative;
  z-index: 2;
  display: var(--hww-il-icon-display, flex);
  align-items: center;
  justify-content: center;
  width: var(--hww-il-icon-size, 42px);
  height: var(--hww-il-icon-size, 42px);
  margin: 0 0 var(--hww-il-icon-margin-bottom, 18px);
  border-radius: var(--hww-il-icon-radius, 999px);
  background: var(--hww-il-icon-bg, rgba(38, 173, 33, 0.18));
  color: var(--hww-il-icon-color, #26ad21);
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.il-how-we-work__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.il-how-we-work__icon-placeholder {
  display: block;
  width: 44%;
  height: 44%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

/* =========================================================
   Tablet / small desktop
   ========================================================= */

@media (max-width: 1100px) {
  .il-how-we-work__grid {
    grid-template-columns: repeat(var(--hww-il-columns-tablet, 2), minmax(0, 1fr));
  }

  .il-how-we-work__heading {
    font-size: clamp(34px, 5vw, var(--hww-il-heading-size, 48px));
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .il-how-we-work-section,
  .il-how-we-work-editor {
    padding-top: var(--hww-il-mobile-section-padding-top, 72px);
    padding-bottom: var(--hww-il-mobile-section-padding-bottom, 72px);
  }

  .il-how-we-work__container {
    width: calc(100% - (var(--hww-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .il-how-we-work-section[style*="--hww-il-container-max-width:none"] .il-how-we-work__container,
  .il-how-we-work-editor[style*="--hww-il-container-max-width:none"] .il-how-we-work__container {
    width: calc(100% - (var(--hww-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .il-how-we-work__heading-wrap {
    max-width: 100%;
    text-align: var(--hww-il-mobile-heading-text-align, left);
  }

  .il-how-we-work__heading {
    font-size: var(--hww-il-mobile-heading-size, 34px);
    line-height: var(--hww-il-mobile-heading-line, 1.12);
  }

  .il-how-we-work__grid {
    grid-template-columns: 1fr;
    gap: var(--hww-il-mobile-grid-gap, 24px);
  }

  .il-how-we-work__card {
    min-height: var(--hww-il-mobile-card-min-height, 0px);
    perspective: none;
  }

  .il-how-we-work__card-inner {
    min-height: var(--hww-il-mobile-card-min-height, 0px);
    display: block;
    transform: none !important;
    transition: none !important;
  }

  .il-how-we-work__card-face {
    position: relative;
    inset: auto;
    min-height: var(--hww-il-mobile-card-min-height, 0px);
    padding-top: var(--hww-il-mobile-card-padding-top, 24px);
    padding-right: var(--hww-il-mobile-card-padding-right, 24px);
    padding-bottom: var(--hww-il-mobile-card-padding-bottom, 24px);
    padding-left: var(--hww-il-mobile-card-padding-left, 24px);
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform-style: flat;
    -webkit-transform-style: flat;
  }

  .il-how-we-work__card-front {
    gap: 14px;
    align-items: var(--hww-il-mobile-card-items-align, flex-start);
    text-align: var(--hww-il-mobile-card-content-align, left);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--hww-il-card-shadow, 0 22px 46px var(--hww-il-card-shadow-color, rgba(26, 48, 26, 0.08)));
  }

  .il-how-we-work__card-back {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background:
      radial-gradient(
        circle at 80% 0%,
        var(--hww-il-card-back-glow-color, rgba(255, 255, 255, 0.08)),
        transparent 15rem
      ),
      var(--hww-il-card-bg, #ffffff);
  }

  .il-how-we-work__icon {
    width: var(--hww-il-mobile-icon-size, 38px);
    height: var(--hww-il-mobile-icon-size, 38px);
  }

  .il-how-we-work__step {
    font-size: var(--hww-il-mobile-step-size, 12px);
  }

  .il-how-we-work__card-title {
    font-size: var(--hww-il-mobile-title-size, 22px);
  }

  .il-how-we-work__description {
    color: var(--hww-il-mobile-description-color, #000000);
    font-size: var(--hww-il-mobile-description-size, 14px);
    line-height: var(--hww-il-mobile-description-line, 1.6);
  }
}


/* =========================================================
   Small mobile
   ========================================================= */

@media (max-width: 480px) {
  .il-how-we-work__container {
    width: calc(100% - 28px);
  }

  .il-how-we-work__heading {
    font-size: clamp(28px, 9vw, var(--hww-il-mobile-heading-size, 34px));
  }

  .il-how-we-work__card-title {
    font-size: clamp(20px, 7vw, var(--hww-il-mobile-title-size, 22px));
  }

  .il-how-we-work__eyebrow {
    font-size: min(var(--hww-il-eyebrow-size, 13px), 12px);
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .il-how-we-work__card-inner {
    transition: none !important;
  }

  .il-how-we-work__card:hover .il-how-we-work__card-inner,
  .il-how-we-work__card:focus-within .il-how-we-work__card-inner {
    transform: none !important;
  }
}