.first-about-section{background-color:#f9f9f9;color:var(--background);padding-top:3rem}.about-hero-banner{width:75vw;height:30vh;margin:0 auto 1rem;border-radius:1rem;border:1px solid #ff7954;background-image:url(/about-banner.png);background-size:cover;background-position:50%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.15)}.about-hero-banner h1{color:white;font-size:2.5rem;font-weight:700;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.6);text-align:center}.about-hero-text{padding:2rem;width:100%;font-size:1.05rem;line-height:2}.about-hero-text p{margin-bottom:1.5rem}.principles-section{width:100%}.principles-header{width:100%;text-align:center;margin-bottom:3rem}.principles-header h1{font-family:var(--font-hero);margin:2rem auto}.principles-section{padding:4rem 2rem;text-align:center}.principles-flex{display:flex;width:100%;max-width:80rem;flex-wrap:wrap;margin:0 auto 4rem}.principle-card{flex:1 1;min-width:280px;aspect-ratio:1/1;perspective:1000px;border-left:1px solid #ccc;position:relative}.principle-card:first-child{border-left:none}.card-inner{width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d;position:relative}.principle-card:hover .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:1.5rem;box-sizing:border-box}.card-front{flex-direction:column;overflow:hidden}.card-image{position:absolute;inset:0;background-size:cover;background-position:50%;opacity:.5;z-index:1}.card-content{position:relative;z-index:2;text-align:center}.card-title{font-size:1.6rem;font-weight:700;color:white;text-shadow:0 2px 4px rgba(0,0,0,.5)}.card-back{background-color:white;transform:rotateY(180deg);color:#333;font-size:1rem;line-height:1.6;text-align:center;padding:2rem}