/* =========================================
   PHILOSOPHY BANNER
========================================= */

.philosophy-banner{
    padding:80px 0;

    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:transparent;

    transition:
        background-color .6s ease,
        color .6s ease;
}

.philosophy{
    padding:80px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.philosophy-banner .container{
    max-width:1100px;
    margin:0 auto;
    padding:0 32px;
}

.philosophy-content{
    text-align:center;
}

.philosophy-label{
    display:inline-block;

    margin-bottom:20px;

    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;

    opacity:.55;

    transition:color .6s ease;
}

.philosophy-heading{
    max-width:760px;

    margin:0 auto;

    font-size:clamp(2.75rem,5vw,4.5rem);
    line-height:1;
    letter-spacing:-0.05em;
    font-weight:600;

    transition:color .6s ease;
}

.philosophy-copy{
    max-width:700px;

    margin:28px auto 0;

    font-size:clamp(1.125rem,2vw,1.5rem);
    line-height:1.7;

    opacity:.7;

    transition:
        color .6s ease,
        opacity .6s ease;
}

/* =========================================
   HOVER STATE
========================================= */

.philosophy-banner:hover{
    background:#4a63ff;
}

.philosophy-banner:hover .philosophy-label,
.philosophy-banner:hover .philosophy-heading,
.philosophy-banner:hover .philosophy-copy{
    color:#fff;
    opacity:1;
}

/* =========================================
   DARK MODE
========================================= */

[data-theme="dark"] .philosophy-banner{
    background:rgba(255,255,255,.03);
}

[data-theme="dark"] .philosophy-banner:hover{
    background:#4a63ff;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    .philosophy-banner{
        padding:64px 0;
    }

    .philosophy-banner .container{
        padding:0 24px;
    }

    .philosophy-heading{
        font-size:clamp(2rem,10vw,3rem);
    }

    .philosophy-copy{
        font-size:18px;
        line-height:1.6;
    }
}