.principles-home {
  background: #fff;
  overflow: hidden;
}

.principles-home .principles-grid {
  grid-template-columns: 2fr 3fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 3rem;
}

.principles-home .principle-highlight {
  min-height: 26.25rem;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .5s ease, box-shadow .5s ease;
}

.principles-home .principle-highlight:hover {
  transform: translateY(-.25rem);
  box-shadow: 0 28px 60px rgba(7, 28, 74, .26);
}

.principles-home .principle-highlight img {
  z-index: 0;
  transform: scale(1.1);
}

.principles-home .principle-highlight::after {
  z-index: 1;
  background: linear-gradient(135deg, hsl(221 86% 20% / .9), hsl(221 86% 20% / .8) 52%, hsl(219 82% 36% / .75));
}

.principles-home .principle-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .25;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -50deg,
    transparent 0,
    transparent 70px,
    hsl(218 83% 49% / .07) 70px,
    hsl(218 83% 49% / .07) 73px,
    transparent 73px,
    transparent 140px,
    hsl(48 92% 52% / .09) 140px,
    hsl(48 92% 52% / .09) 143px,
    transparent 143px,
    transparent 210px,
    hsl(141 90% 28% / .07) 210px,
    hsl(141 90% 28% / .07) 213px,
    transparent 213px,
    transparent 280px
  );
}

.principles-home .principle-highlight > div {
  z-index: 3;
  padding: 2rem;
}

.principles-home .principle-highlight .principle-kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  color: var(--yellow);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.principles-home .principle-kicker span {
  color: var(--yellow);
  letter-spacing: .08em;
}

.principles-home .principle-highlight h3 {
  max-width: 28rem;
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
}

.principles-home .principle-highlight p:not(.principle-kicker) {
  max-width: 28rem;
  color: #dbeafe;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
}

.principles-home .principle-highlight .btn {
  align-self: flex-start;
  color: var(--navy);
  box-shadow: 0 14px 28px hsl(48 92% 52% / .22);
}

.principles-home .principle-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 1.5rem;
  background: var(--gray-soft);
}

.principles-home .principle-card {
  position: relative;
  height: 100%;
  min-height: 12.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  padding: 1.5rem 1.5rem 2.25rem;
  box-shadow: 0 1px 3px rgba(7, 28, 74, .08);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .5s ease, box-shadow .5s ease, background-color .5s ease;
}

.principles-home .principle-card:hover {
  transform: translateY(-.25rem);
  box-shadow: 0 22px 36px rgba(7, 28, 74, .14);
}

.principles-home .principle-card::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  height: .125rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}

.principles-home .principle-card:hover::after {
  transform: scaleX(1);
}

.principles-home .principle-card > span {
  top: 1rem;
  right: 1.25rem;
  color: hsl(218 83% 49% / .05);
  font-size: 3rem;
  transition: color .5s ease;
}

.principles-home .principle-card:hover > span {
  color: hsl(141 90% 28% / .1);
}

.principles-home .principle-card > svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  padding: .75rem;
  border-radius: .75rem;
  background: hsl(218 83% 49% / .1);
  color: var(--blue);
  transition: transform .5s ease, background-color .5s ease, color .5s ease;
}

.principles-home .principle-card:hover > svg {
  transform: scale(1.1);
  background: hsl(141 90% 28% / .1);
  color: var(--green);
}

.principles-home .principle-card h3 {
  margin-bottom: .4rem;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
}

.principles-home .principle-card p {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .principles-home .principles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .principles-home .principle-cards {
    grid-template-columns: 1fr;
  }

  .principles-home .principle-highlight {
    min-height: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .principles-home .principle-highlight,
  .principles-home .principle-card,
  .principles-home .principle-card > svg,
  .principles-home .principle-card::after {
    transition-duration: .01ms !important;
  }
}