/* Core Principles - isolated to ensure consistent rendering in production */
.core-principles {
    position: relative;
    padding: 75px 0 80px;
    overflow: hidden;
    background-color: #f8fbf6;
    background-image:
        radial-gradient(circle at 7% 12%, rgba(80, 151, 64, .15), transparent 25%),
        radial-gradient(circle at 92% 88%, rgba(17, 167, 220, .13), transparent 25%),
        linear-gradient(135deg, #f4f8ed 0%, #fff 45%, #f2faf9 100%);
}

.core-principles::before,
.core-principles::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.core-principles::before {
    width: 380px;
    height: 380px;
    left: -210px;
    top: -220px;
    background: rgba(91, 145, 66, .07);
    border: 1px solid rgba(91, 145, 66, .1);
}

.core-principles::after {
    width: 410px;
    height: 410px;
    right: -235px;
    bottom: -250px;
    background: rgba(17, 167, 220, .055);
    border: 1px solid rgba(17, 167, 220, .09);
}

.core-principles .container { position: relative; z-index: 2; }

.core-principles-heading {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 34px;
    text-align: center;
}

.core-principles-heading .section-sub-title {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 0 auto;
    color: #286832;
    font-size: 14px;
    letter-spacing: 2.5px;
}

.core-principles-heading .section-sub-title i:last-child { transform: scaleX(-1); }
.core-principles-heading h2 { order: 2; width: 100%; margin: 10px 0; color: #16462a; font-size: clamp(42px, 5vw, 62px); text-align: center; }
.core-title-divider { order: 3; display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; color: #65a54e; font-size: 9px; }
.core-title-divider::before,
.core-title-divider::after { content: ""; width: 110px; height: 1px; background: #91bb82; }
.core-principles-heading > p { order: 4; max-width: 610px; margin: 14px auto 0; color: #626b65; font-size: 16px; line-height: 1.7; text-align: center; }

.core-principles-grid {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.core-principles-grid::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 28px;
    background: rgba(255, 255, 255, .35);
    box-shadow: 0 30px 70px rgba(34, 85, 45, .06);
}

.core-principle-card {
    position: relative !important;
    display: block !important;
    min-width: 0;
    grid-column: auto;
    min-height: 285px;
    padding: 24px 16px 32px;
    overflow: hidden;
    border: 1px solid rgba(23, 81, 43, .08);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(35, 68, 38, .07);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.core-principle-card:hover { transform: translateY(-7px); box-shadow: 0 22px 45px rgba(35, 68, 38, .12); }
.core-principle-card::after,
.core-principle-card .principle-watermark { display: none !important; }

.core-principle-card .principle-icon {
    display: flex !important;
    position: static !important;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f7e8, #e5f0da);
    box-shadow: none;
    color: #1d702c;
    font-size: 26px;
    transform: none !important;
}

.core-principle-card:nth-child(even) .principle-icon { background: #e7f5f7; color: #1484a4; }
.core-principle-card h3 { margin: 0; color: #155922; font-size: 18px; letter-spacing: 0; text-transform: none; }
.core-principle-card .principle-line { display: block; width: 27px; height: 2px; margin: 12px auto; background: #70aa50; }
.core-principle-card p { margin: 0; color: #505a53; font-size: 13px; line-height: 1.7; }

.core-bg-dots { position: absolute; z-index: 1; width: 105px; height: 70px; opacity: .42; background-image: radial-gradient(circle, #71a768 2px, transparent 2.5px); background-size: 16px 16px; }
.core-bg-dots-left { left: 22px; bottom: 24px; }
.core-bg-dots-right { right: 26px; top: 28px; }
.core-leaf { position: absolute; z-index: 1; pointer-events: none; }
.core-leaf-left { display: flex; align-items: center; justify-content: center; width: 330px; height: 330px; left: -120px; top: -115px; border-radius: 50%; background: linear-gradient(145deg, rgba(183, 211, 166, .42), rgba(225, 238, 216, .18)); color: rgba(49, 111, 52, .19); font-size: 125px; transform: none; }
.core-leaf-left i { margin: 105px 0 0 105px; transform: rotate(-35deg); }
.core-leaf-right { right: 35px; bottom: 25px; color: rgba(23, 81, 43, .1); font-size: 80px; transform: rotate(145deg); }

@media (max-width: 1199px) {
    .core-principles-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .core-principle-card { grid-column: span 2; min-height: 275px; }
    .core-principle-card:nth-child(4) { grid-column: 2 / 4; }
    .core-principle-card:last-child { grid-column: 4 / 6; }
}

@media (max-width: 767px) {
    .core-principles { padding: 58px 0 62px; }
    .core-principles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .core-principles-grid::before { inset: -10px; }
    .core-principle-card,
    .core-principle-card:nth-child(4) { grid-column: span 2; min-height: 275px; }
    .core-principle-card:last-child { grid-column: 2 / 4; }
    .core-bg-dots { width: 70px; opacity: .25; }
    .core-leaf-left { width: 190px; height: 190px; left: -105px; top: -65px; font-size: 68px; }
    .core-leaf-left i { margin: 58px 0 0 68px; }
}

@media (max-width: 479px) {
    .core-principles-grid { grid-template-columns: 1fr; }
    .core-principle-card,
    .core-principle-card:nth-child(4),
    .core-principle-card:last-child { grid-column: auto; min-height: 250px; }
    .core-principles-heading h2 { font-size: 38px; }
}