.card {
  font-weight: bold;
  color: #181a1a;
  border-radius: 10px;  
  position: relative;
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
  margin-bottom: 16;
}

.card:hover {
  transition-duration: 150ms;
  box-shadow: 0 5px 20px 5px #00000044;
}


/* ==========================================================
   EaSee section-specific Future Ready card classes
   Same values as .fcard/.fic, but independently editable.
   ========================================================== */


/* mission-card-1 */
.mission-card-1 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.mission-card-1:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.mission-card-1 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.mission-card-1 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* mission-icon-1 */
.mission-icon-1 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.mission-card-1:hover .mission-icon-1 {
  background: var(--accent);
  color: #fff;
}

.mission-icon-1 svg {
  width: 26px;
  height: 26px;
}


/* mission-card-2 */
.mission-card-2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.mission-card-2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.mission-card-2 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.mission-card-2 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* mission-icon-2 */
.mission-icon-2 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.mission-card-2:hover .mission-icon-2 {
  background: var(--accent);
  color: #fff;
}

.mission-icon-2 svg {
  width: 26px;
  height: 26px;
}


/* mission-card-3 */
.mission-card-3 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.mission-card-3:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.mission-card-3 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.mission-card-3 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* mission-icon-3 */
.mission-icon-3 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.mission-card-3:hover .mission-icon-3 {
  background: var(--accent);
  color: #fff;
}

.mission-icon-3 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-1 */
.principle-card-1 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-1:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-1 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-1 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-1 */
.principle-icon-1 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-1:hover .principle-icon-1 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-1 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-2 */
.principle-card-2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-2 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-2 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-2 */
.principle-icon-2 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-2:hover .principle-icon-2 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-2 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-3 */
.principle-card-3 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-3:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-3 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-3 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-3 */
.principle-icon-3 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-3:hover .principle-icon-3 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-3 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-4 */
.principle-card-4 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-4:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-4 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-4 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-4 */
.principle-icon-4 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-4:hover .principle-icon-4 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-4 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-5 */
.principle-card-5 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-5:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-5 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-5 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-5 */
.principle-icon-5 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-5:hover .principle-icon-5 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-5 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-6 */
.principle-card-6 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-6:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-6 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-6 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-6 */
.principle-icon-6 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-6:hover .principle-icon-6 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-6 svg {
  width: 26px;
  height: 26px;
}


/* principle-card-7 */
.principle-card-7 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.principle-card-7:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.principle-card-7 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.principle-card-7 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* principle-icon-7 */
.principle-icon-7 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.principle-card-7:hover .principle-icon-7 {
  background: var(--accent);
  color: #fff;
}

.principle-icon-7 svg {
  width: 26px;
  height: 26px;
}


/* differentiator-card-1 */
.differentiator-card-1 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.differentiator-card-1:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.differentiator-card-1 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.differentiator-card-1 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* differentiator-icon-1 */
.differentiator-icon-1 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.differentiator-card-1:hover .differentiator-icon-1 {
  background: var(--accent);
  color: #fff;
}

.differentiator-icon-1 svg {
  width: 26px;
  height: 26px;
}


/* differentiator-card-2 */
.differentiator-card-2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.differentiator-card-2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.differentiator-card-2 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.differentiator-card-2 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* differentiator-icon-2 */
.differentiator-icon-2 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.differentiator-card-2:hover .differentiator-icon-2 {
  background: var(--accent);
  color: #fff;
}

.differentiator-icon-2 svg {
  width: 26px;
  height: 26px;
}


/* differentiator-card-3 */
.differentiator-card-3 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.differentiator-card-3:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.differentiator-card-3 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.differentiator-card-3 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* differentiator-icon-3 */
.differentiator-icon-3 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.differentiator-card-3:hover .differentiator-icon-3 {
  background: var(--accent);
  color: #fff;
}

.differentiator-icon-3 svg {
  width: 26px;
  height: 26px;
}


/* differentiator-card-4 */
.differentiator-card-4 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.differentiator-card-4:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.differentiator-card-4 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.differentiator-card-4 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* differentiator-icon-4 */
.differentiator-icon-4 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.differentiator-card-4:hover .differentiator-icon-4 {
  background: var(--accent);
  color: #fff;
}

.differentiator-icon-4 svg {
  width: 26px;
  height: 26px;
}



/* ==========================================================
   EaSee — Differentiator visual cards
   Large image-led cards with responsive image zones.
   ========================================================== */
#differentiators .differentiator-card-1,
#differentiators .differentiator-card-2,
#differentiators .differentiator-card-3,
#differentiators .differentiator-card-4 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 16px 16px 24px;
  border-radius: 22px;
  overflow: hidden;
}

#differentiators .differentiator-icon-1,
#differentiators .differentiator-icon-2,
#differentiators .differentiator-icon-3,
#differentiators .differentiator-icon-4 {
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 300;
  margin: 0 0 22px;
  padding: 0;
  border-radius: 18px;
  background: #f3f7ff !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#differentiators .ea-differentiator-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

#differentiators .differentiator-card-1:hover .ea-differentiator-img,
#differentiators .differentiator-card-2:hover .ea-differentiator-img,
#differentiators .differentiator-card-3:hover .ea-differentiator-img,
#differentiators .differentiator-card-4:hover .ea-differentiator-img {
  transform: scale(1.035);
}

#differentiators .differentiator-card-1 h3,
#differentiators .differentiator-card-2 h3,
#differentiators .differentiator-card-3 h3,
#differentiators .differentiator-card-4 h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.15;
  font-weight: 700;
}

#differentiators .differentiator-card-1 p,
#differentiators .differentiator-card-2 p,
#differentiators .differentiator-card-3 p,
#differentiators .differentiator-card-4 p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

@media (max-width: 980px) {
  #differentiators .differentiator-icon-1,
  #differentiators .differentiator-icon-2,
  #differentiators .differentiator-icon-3,
  #differentiators .differentiator-icon-4 {
    aspect-ratio: 520 / 330;
  }

  #differentiators .differentiator-card-1,
  #differentiators .differentiator-card-2,
  #differentiators .differentiator-card-3,
  #differentiators .differentiator-card-4 {
    padding: 14px 14px 22px;
  }
}

@media (max-width: 620px) {
  #differentiators .differentiator-icon-1,
  #differentiators .differentiator-icon-2,
  #differentiators .differentiator-icon-3,
  #differentiators .differentiator-icon-4 {
    aspect-ratio: 520 / 360;
    margin-bottom: 18px;
  }

  #differentiators .differentiator-card-1,
  #differentiators .differentiator-card-2,
  #differentiators .differentiator-card-3,
  #differentiators .differentiator-card-4 {
    padding: 12px 12px 22px;
    border-radius: 20px;
  }
}

/* future-ready-card-1 */
.future-ready-card-1 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.future-ready-card-1:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.future-ready-card-1 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.future-ready-card-1 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* future-ready-icon-1 */
.future-ready-icon-1 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.future-ready-card-1:hover .future-ready-icon-1 {
  background: var(--accent);
  color: #fff;
}

.future-ready-icon-1 svg {
  width: 26px;
  height: 26px;
}


/* future-ready-card-2 */
.future-ready-card-2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.future-ready-card-2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.future-ready-card-2 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.future-ready-card-2 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* future-ready-icon-2 */
.future-ready-icon-2 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.future-ready-card-2:hover .future-ready-icon-2 {
  background: var(--accent);
  color: #fff;
}

.future-ready-icon-2 svg {
  width: 26px;
  height: 26px;
}


/* future-ready-card-3 */
.future-ready-card-3 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: all .4s cubic-bezier(.2, .7, .2, 1);
}

.future-ready-card-3:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.future-ready-card-3 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.future-ready-card-3 p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* future-ready-icon-3 */
.future-ready-icon-3 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .3s ease;
}

.future-ready-card-3:hover .future-ready-icon-3 {
  background: var(--accent);
  color: #fff;
}

.future-ready-icon-3 svg {
  width: 26px;
  height: 26px;
}

/* ==========================================================
   EaSee icon polish — larger artwork, no filled hover tile
   ========================================================== */
:is(
  .mission-icon-1,.mission-icon-2,.mission-icon-3,
  .principle-icon-1,.principle-icon-2,.principle-icon-3,.principle-icon-4,.principle-icon-5,.principle-icon-6,.principle-icon-7,
  .differentiator-icon-1,.differentiator-icon-2,.differentiator-icon-3,.differentiator-icon-4,
  .future-ready-icon-1,.future-ready-icon-2,.future-ready-icon-3
) {
  width: 64px;
  height: 64px;
  background: var(--accent-soft) !important;
  border-radius: 14px;
}

:is(
  .mission-icon-1,.mission-icon-2,.mission-icon-3,
  .principle-icon-1,.principle-icon-2,.principle-icon-3,.principle-icon-4,.principle-icon-5,.principle-icon-6,.principle-icon-7,
  .differentiator-icon-1,.differentiator-icon-2,.differentiator-icon-3,.differentiator-icon-4,
  .future-ready-icon-1,.future-ready-icon-2,.future-ready-icon-3
) .ea-icon-img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain;
  transition: transform .28s ease, filter .28s ease;
}

:is(
  .mission-card-1:hover .mission-icon-1,.mission-card-2:hover .mission-icon-2,.mission-card-3:hover .mission-icon-3,
  .principle-card-1:hover .principle-icon-1,.principle-card-2:hover .principle-icon-2,.principle-card-3:hover .principle-icon-3,
  .principle-card-4:hover .principle-icon-4,.principle-card-5:hover .principle-icon-5,.principle-card-6:hover .principle-icon-6,.principle-card-7:hover .principle-icon-7,
  .differentiator-card-1:hover .differentiator-icon-1,.differentiator-card-2:hover .differentiator-icon-2,
  .differentiator-card-3:hover .differentiator-icon-3,.differentiator-card-4:hover .differentiator-icon-4,
  .future-ready-card-1:hover .future-ready-icon-1,.future-ready-card-2:hover .future-ready-icon-2,.future-ready-card-3:hover .future-ready-icon-3
) {
  background: transparent !important;
  color: var(--accent-deep);
}

:is(
  .mission-card-1:hover .mission-icon-1,.mission-card-2:hover .mission-icon-2,.mission-card-3:hover .mission-icon-3,
  .principle-card-1:hover .principle-icon-1,.principle-card-2:hover .principle-icon-2,.principle-card-3:hover .principle-icon-3,
  .principle-card-4:hover .principle-icon-4,.principle-card-5:hover .principle-icon-5,.principle-card-6:hover .principle-icon-6,.principle-card-7:hover .principle-icon-7,
  .differentiator-card-1:hover .differentiator-icon-1,.differentiator-card-2:hover .differentiator-icon-2,
  .differentiator-card-3:hover .differentiator-icon-3,.differentiator-card-4:hover .differentiator-icon-4,
  .future-ready-card-1:hover .future-ready-icon-1,.future-ready-card-2:hover .future-ready-icon-2,.future-ready-card-3:hover .future-ready-icon-3
) .ea-icon-img {
  transform: scale(1.12);
}

/* ==========================================================
   EaSee — Core Principles visual carousel
   Same image-led card structure used by Differentiators.
   3 cards per view on desktop, 2 on tablet, 1 on mobile.
   Each card = large visual + heading + copy.
   ========================================================== */
#pillars .principles-slider{
  position:relative;
  margin-top:34px;
  padding:0 58px 38px;
}
#pillars .principles-slider__viewport{
  width:100%;
  overflow:hidden;
  position:relative;
}
#pillars .principles-track{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch;
  gap:22px;
  width:max-content!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#pillars .principle-card-media{
  box-sizing:border-box;
  display:flex!important;
  flex-direction:column!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  min-height:360px!important;
  padding:16px!important;
  background:#fff;
  border:1px solid #dce5f0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(21,43,107,.06);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
#pillars .principle-card-media:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(21,43,107,.11);
  border-color:#dce5f0;
}
#pillars .principle-media{
  width:100%;
  height:150px;
  min-height:150px;
  flex:0 0 150px;
  margin:0 0 16px;
  padding:0;
  border-radius:17px;
  background:#f3f7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#pillars .principle-media img{
  display:block;
  width:88%;
  height:88%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  border-radius:17px;
  transform:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
#pillars .principle-card-media:hover .principle-media img{transform:scale(1.035)}
#pillars .principle-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0!important;
  background:#fff;
}
#pillars .principle-copy h3{
  margin:0 0 9px!important;
  font-size:clamp(18px,1.35vw,21px)!important;
  line-height:1.18!important;
  color:var(--ink);
  font-weight:700!important;
}
#pillars .principle-copy p{
  margin:0!important;
  color:var(--ink-soft);
  font-size:clamp(13px,1vw,15px)!important;
  line-height:1.55!important;
  font-weight:400!important;
}
#pillars .principles-slider__arrow{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  padding:0;
  border-radius:50%;
  border:1px solid #dbe4ef;
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(21,43,107,.10);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#pillars .principles-slider__arrow:hover{
  transform:translateY(-50%) scale(1.05);
  border-color:#08b7cf;
  box-shadow:0 12px 30px rgba(21,43,107,.14);
}
#pillars .principles-slider__arrow--prev{left:0}
#pillars .principles-slider__arrow--next{right:0}
#pillars .principles-slider__arrow span{font-size:25px;line-height:1}
#pillars .principles-dots{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  align-items:center;
}
#pillars .principle-dot{
  width:9px;
  height:9px;
  border:0;
  border-radius:50%;
  background:#b8c1d2;
  padding:0;
  cursor:pointer;
}
#pillars .principle-dot.is-active{background:#08b7cf;transform:scale(1.2)}
@media(max-width:980px){
  #pillars .principles-track{gap:18px}
  #pillars .principle-card-media{min-height:350px!important}
  #pillars .principle-media{
    height:155px;
    min-height:155px;
    flex-basis:155px;
  }
}
@media(max-width:760px){
  #pillars .principles-slider{padding:0 42px 30px;margin-top:26px}
  #pillars .principles-track{gap:16px}
  #pillars .principle-card-media{
    min-height:0!important;
    padding:14px!important;
    border-radius:20px;
  }
  #pillars .principle-media{
    height:190px;
    min-height:190px;
    flex-basis:190px;
    margin-bottom:18px;
    border-radius:16px;
  }
  #pillars .principle-media img{width:88%;height:88%;border-radius:16px}
  #pillars .principle-copy h3{font-size:20px!important}
  #pillars .principle-copy p{font-size:14px!important}
  #pillars .principles-slider__arrow{width:38px;height:38px}
  #pillars .principles-slider__arrow span{font-size:20px}
}

/* ==========================================================
   EaSee — Differentiators: image-led visual cards (FINAL OVERRIDE)
   Must come after the global icon-polish rules above.
   ========================================================== */
#differentiators .differentiator-card-1,
#differentiators .differentiator-card-2,
#differentiators .differentiator-card-3,
#differentiators .differentiator-card-4 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 410px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#differentiators .differentiator-icon-1,
#differentiators .differentiator-icon-2,
#differentiators .differentiator-icon-3,
#differentiators .differentiator-icon-4 {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  aspect-ratio: auto !important;
  flex: 0 0 180px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-radius: 17px !important;
  background: #f3f7ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: inherit !important;
}

#differentiators .differentiator-icon-1 .ea-differentiator-img,
#differentiators .differentiator-icon-2 .ea-differentiator-img,
#differentiators .differentiator-icon-3 .ea-differentiator-img,
#differentiators .differentiator-icon-4 .ea-differentiator-img {
  display: block !important;
  width: 50% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 17px !important;
  transform: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

#differentiators .differentiator-card-1:hover .ea-differentiator-img,
#differentiators .differentiator-card-2:hover .ea-differentiator-img,
#differentiators .differentiator-card-3:hover .ea-differentiator-img,
#differentiators .differentiator-card-4:hover .ea-differentiator-img {
  transform: scale(1.035) !important;
}

#differentiators .differentiator-card-1 h3,
#differentiators .differentiator-card-2 h3,
#differentiators .differentiator-card-3 h3,
#differentiators .differentiator-card-4 h3 {
  margin: 0 0 9px !important;
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  flex: 0 0 auto;
}

#differentiators .differentiator-card-1 p,
#differentiators .differentiator-card-2 p,
#differentiators .differentiator-card-3 p,
#differentiators .differentiator-card-4 p {
  margin: 0 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
}

@media (max-width: 1100px) {
  #differentiators .differentiator-icon-1,
  #differentiators .differentiator-icon-2,
  #differentiators .differentiator-icon-3,
  #differentiators .differentiator-icon-4 {
    height: 165px !important;
    min-height: 165px !important;
    flex-basis: 165px !important;
  }

  #differentiators .differentiator-card-1,
  #differentiators .differentiator-card-2,
  #differentiators .differentiator-card-3,
  #differentiators .differentiator-card-4 {
    min-height: 390px !important;
  }
}

@media (max-width: 980px) {
  #differentiators .differentiator-icon-1,
  #differentiators .differentiator-icon-2,
  #differentiators .differentiator-icon-3,
  #differentiators .differentiator-icon-4 {
    height: 190px !important;
    min-height: 190px !important;
    flex-basis: 190px !important;
  }

  #differentiators .differentiator-card-1,
  #differentiators .differentiator-card-2,
  #differentiators .differentiator-card-3,
  #differentiators .differentiator-card-4 {
    min-height: 410px !important;
  }
  
  #differentiators .differentiator-icon-1 .ea-differentiator-img,
  #differentiators .differentiator-icon-2 .ea-differentiator-img,
  #differentiators .differentiator-icon-3 .ea-differentiator-img,
  #differentiators .differentiator-icon-4 .ea-differentiator-img {
    border-radius: 16px !important;
    width: 45% !important;
  }
}

@media (max-width: 620px) {
  #differentiators .differentiator-card-1,
  #differentiators .differentiator-card-2,
  #differentiators .differentiator-card-3,
  #differentiators .differentiator-card-4 {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  #differentiators .differentiator-icon-1,
  #differentiators .differentiator-icon-2,
  #differentiators .differentiator-icon-3,
  #differentiators .differentiator-icon-4 {
    height: 210px !important;
    min-height: 210px !important;
    flex-basis: 210px !important;
    margin-bottom: 18px !important;
    border-radius: 16px !important;
  }

  #differentiators .differentiator-icon-1 .ea-differentiator-img,
  #differentiators .differentiator-icon-2 .ea-differentiator-img,
  #differentiators .differentiator-icon-3 .ea-differentiator-img,
  #differentiators .differentiator-icon-4 .ea-differentiator-img {
    border-radius: 16px !important;
    width: 40% !important;
  }

  
}

/* ==========================================================
   EaSee — Mission: image-led visual cards
   Uses the generated mission illustrations as the primary
   visual element, matching the differentiator card language.
   This is intentionally placed at the end to override the
   older 52/64px mission icon rules above.
   ========================================================== */
#mission .mission-card-1,
#mission .mission-card-2,
#mission .mission-card-3 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 455px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease !important;
}

#mission .mission-card-1:hover,
#mission .mission-card-2:hover,
#mission .mission-card-3:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--accent) !important;
}

#mission .mission-icon-1,
#mission .mission-icon-2,
#mission .mission-icon-3 {
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  flex: 0 0 230px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-radius: 17px !important;
  background: #f3f7ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  color: inherit !important;
}

#mission .mission-icon-1 .ea-mission-img,
#mission .mission-icon-2 .ea-mission-img,
#mission .mission-icon-3 .ea-mission-img {
  display: block !important;
  width: 70% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 17px !important;
  transform: none !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

#mission .mission-card-1:hover .ea-mission-img,
#mission .mission-card-2:hover .ea-mission-img,
#mission .mission-card-3:hover .ea-mission-img {
  transform: scale(1.035) !important;
}

#mission .mission-card-1 h3,
#mission .mission-card-2 h3,
#mission .mission-card-3 h3 {
  margin: 0 0 9px !important;
  font-size: clamp(19px, 1.45vw, 22px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

#mission .mission-card-1 p,
#mission .mission-card-2 p,
#mission .mission-card-3 p {
  margin: 0 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
}

@media (max-width: 1100px) {
  #mission .mission-card-1,
  #mission .mission-card-2,
  #mission .mission-card-3 {
    min-height: 430px !important;
  }

  #mission .mission-icon-1,
  #mission .mission-icon-2,
  #mission .mission-icon-3 {
    height: 205px !important;
    min-height: 205px !important;
    flex-basis: 205px !important;
  }
}

@media (max-width: 980px) {
  #mission .mission-card-1,
  #mission .mission-card-2,
  #mission .mission-card-3 {
    min-height: 440px !important;
  }
}

@media (max-width: 620px) {
  #mission .mission-card-1,
  #mission .mission-card-2,
  #mission .mission-card-3 {
    min-height: 0 !important;
    padding: 14px !important;
  }

  #mission .mission-icon-1,
  #mission .mission-icon-2,
  #mission .mission-icon-3 {
    height: 220px !important;
    min-height: 220px !important;
    flex-basis: 220px !important;
    margin-bottom: 18px !important;
  }
}

/* ==========================================================
   EaSee — Benefits cards use the same visual-card structure
   as Differentiators. Keep the illustration centered inside
   the visual zone rather than stretching it edge-to-edge.
   ========================================================== */
#included .benefits-card-1,
#included .benefits-card-2,
#included .benefits-card-3 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#included .benefits-visual {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-radius: 17px !important;
  background: #f3f7ff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 180px !important;
}

#included .benefits-visual-img {
  display: block !important;
  width: 60% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 17px !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

#included .benefits-card-1:hover .benefits-visual-img,
#included .benefits-card-2:hover .benefits-visual-img,
#included .benefits-card-3:hover .benefits-visual-img {
  transform: scale(1.035) !important;
}

#included .benefits-content {
  padding: 0 10px 8px !important;
  flex: 1 !important;
}

#included .benefits-card-1 h3,
#included .benefits-card-2 h3,
#included .benefits-card-3 h3 {
  margin: 0 0 9px !important;
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

#included .benefits-card-1 p,
#included .benefits-card-2 p,
#included .benefits-card-3 p {
  margin: 0 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
}


@media (max-width: 980px) {
  #included .benefits-visual {
    height: 180px !important;
    min-height: 180px !important;
    flex-basis: 180px !important;
  }
}

@media (max-width: 620px) {
  #included .benefits-card-1,
  #included .benefits-card-2,
  #included .benefits-card-3 {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  #included .benefits-visual {
    height: 180px !important;
    min-height: 180px !important;
    flex-basis: 180px !important;
    margin-bottom: 18px !important;
  }

  #included .benefits-content {
    padding: 0 10px 8px !important;
  }
}


/* ==========================================================
   EaSee — Transparent illustration assets
   The illustration files are RGBA PNGs with their surrounding
   panel/background removed, so the card visual zone supplies
   the background instead of the image itself.
   ========================================================== */
#differentiators .differentiator-icon-1 .ea-differentiator-img,
#differentiators .differentiator-icon-2 .ea-differentiator-img,
#differentiators .differentiator-icon-3 .ea-differentiator-img,
#differentiators .differentiator-icon-4 .ea-differentiator-img {
  width: 50% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}

#mission .mission-icon-1 .ea-mission-img,
#mission .mission-icon-2 .ea-mission-img,
#mission .mission-icon-3 .ea-mission-img,
#included .benefits-visual-img {
  background: transparent !important;
  object-fit: contain !important;
}


/* ==========================================================
   EaSee — Future Ready visual cards
   Same image-led structure as Differentiators / Mission.
   ========================================================== */
#features .future-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

#features .future-ready-card-1,
#features .future-ready-card-2,
#features .future-ready-card-3 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 16px 16px 24px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2,.7,.2,1),
              box-shadow .4s cubic-bezier(.2,.7,.2,1),
              border-color .3s ease;
}

#features .future-ready-card-1:hover,
#features .future-ready-card-2:hover,
#features .future-ready-card-3:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

#features .future-ready-icon-1,
#features .future-ready-icon-2,
#features .future-ready-icon-3 {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  flex: 0 0 210px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-radius: 17px !important;
  background: #f3f7ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

#features .ea-future-ready-img {
  display: block !important;
  width: 60% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

#features .future-ready-card-1:hover .ea-future-ready-img,
#features .future-ready-card-2:hover .ea-future-ready-img,
#features .future-ready-card-3:hover .ea-future-ready-img {
  transform: scale(1.035) !important;
}

#features .future-ready-card-1 h3,
#features .future-ready-card-2 h3,
#features .future-ready-card-3 h3 {
  margin: 0 0 9px !important;
  font-size: clamp(19px, 1.45vw, 22px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

#features .future-ready-card-1 p,
#features .future-ready-card-2 p,
#features .future-ready-card-3 p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
}

@media (max-width: 980px) {
  #features .future-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #features .future-ready-icon-1,
  #features .future-ready-icon-2,
  #features .future-ready-icon-3 {
    height: 190px !important;
    min-height: 190px !important;
    flex-basis: 190px !important;
  }
}

@media (max-width: 680px) {
  #features .future-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #features .future-ready-icon-1,
  #features .future-ready-icon-2,
  #features .future-ready-icon-3 {
    height: min(58vw, 235px) !important;
    min-height: min(58vw, 235px) !important;
    flex-basis: min(58vw, 235px) !important;
  }

  #features .future-ready-card-1,
  #features .future-ready-card-2,
  #features .future-ready-card-3 {
    padding: 14px 14px 22px;
  }
}