/* ===== About page ===== */

/* Hero (same banner pattern as contact page) + parallax depth layers */
.about-hero .chero-bg{inset:-14% 0;will-change:transform}
.about-hero .chero-content{will-change:transform,opacity}
.about-hero .acts{margin-top:2rem}
.ah-layers{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:900px;overflow:hidden}
.ah-layers i{position:absolute;display:block;border:1px solid #ffffff33;background:linear-gradient(135deg,#3b6ef640,#8b5cf62b);box-shadow:0 30px 60px -30px #000a,inset 0 1px 0 #ffffff1f;will-change:transform;animation:ahf 7s ease-in-out infinite}
.ah-layers .l1{width:12rem;height:12rem;right:9%;top:24%;border-radius:1.5rem;rotate:12deg}
.ah-layers .l2{width:7.5rem;height:7.5rem;right:27%;bottom:10%;border-radius:50%;rotate:-8deg;animation-delay:-2s;background:linear-gradient(135deg,#22d3ee38,#3b6ef62b)}
.ah-layers .l3{width:5rem;height:5rem;right:3%;bottom:18%;border-radius:1rem;rotate:-18deg;animation-delay:-4s}
@keyframes ahf{50%{translate:0 -18px}}
@media(max-width:767px){.ah-layers{display:none}}

/* 3D scroll scrub: elements are always visible; JS tilts them via individual transform properties */
.r3d{transform-origin:50% 100%;will-change:translate,rotate,opacity}

/* Tilt cards with glare */
[data-tilt]{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#ffffff1f,transparent 60%)}
[data-tilt]:hover::after{opacity:1}

/* Numbers */
.abt-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.abt-stats .card{padding:1.75rem}
.abt-stats .num{background:linear-gradient(90deg,#5b8dff,#8b5cf6 60%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.abt-stats p{margin-top:.5rem;font-size:.875rem;color:var(--sl)}
@media(min-width:1024px){.abt-stats{grid-template-columns:repeat(4,1fr)}.abt-stats .num{font-size:3rem}}

/* Mission / vision / values */
.mv{margin-top:3.5rem;grid-template-columns:1fr}
.mv .card{padding:2rem}
.mv .card h3{font-size:1.375rem}
.mv .card>p{font-size:1rem;color:var(--sl)}
.vals{margin-top:1.25rem}
@media(min-width:1024px){.mv{grid-template-columns:repeat(2,1fr)}}

/* Parallax photo band */
.band{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;text-align:center;min-height:clamp(24rem,52vw,34rem);padding:5rem 0;perspective:1000px}
.band-bg{position:absolute;inset:-18% 0;z-index:-2;background-size:cover;background-position:center;background-color:var(--soft);will-change:transform}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink),#080b14b3 30%,#080b14b3 70%,var(--ink)),radial-gradient(50% 70% at 20% 50%,#3b6ef640,transparent 60%),radial-gradient(40% 60% at 85% 40%,#8b5cf633,transparent 60%)}
.band-in{max-width:44rem;margin:0 auto;transform-style:preserve-3d;will-change:transform}
.band-in h2{font-size:2rem}
.band-in .lead{margin-inline:auto}
@media(min-width:640px){.band-in h2{font-size:2.75rem}}
@media(min-width:1024px){.band-in h2{font-size:3.25rem}}


/* Section helpers */
#process .center,#about .center{margin-top:3rem}
.about-cta{padding:2rem 0 6rem}

@media(prefers-reduced-motion:reduce){}