:root{--accent-2:#2b2b2b;--muted:#666;--container:1100px;--header-h:72px}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--accent-2); background:var(--lav-100, #f6f1ff)}
.about-page{padding:3rem 1rem}
.about-hero{max-width:900px;margin:0 auto;text-align:center;padding:2rem}
.about-hero .about-logo{width:140px;height:auto;border-radius:16px;display:block;margin:0 auto 1rem}
.about-hero h1{margin:0 0 .6rem;font-size:2rem}
.about-hero .muted{color:var(--muted);max-width:780px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:980px;margin:2rem auto}
.about-section h3{margin-top:0}
.about-section ul{margin:0;padding-left:1.1rem}
.contact-cta{display:flex;gap:1rem;justify-content:center;margin-top:1.6rem}
.contact-cta .btn{padding:.6rem 1rem;border-radius:8px}
@media(max-width:800px){.about-grid{grid-template-columns:1fr}.about-hero h1{font-size:1.6rem}}

/* Footer tweaks for About page: center copyright and blinking arrow */
.footer-bottom{ text-align:center; position:relative; padding:1rem 0; }
.footer-bottom small{ display:block; margin:0 auto; }
.footer-bottom .back-top{ position:relative; display:inline-flex; align-items:center; gap:0.35rem; text-decoration:none; color:inherit; padding:0.18rem 0.45rem; border-radius:6px; margin-top:0.4rem; }
.back-top .arrow{ display:inline-block; animation:blinkUp 1s infinite; }
@keyframes blinkUp{ 0%{ opacity:0.25; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-6px);} 100%{ opacity:0.25; transform:translateY(0);} }

/* Decorative divider and improved cards for the about columns */
.about-grid{position:relative; align-items:start}
.about-section{background:#ffffff; padding:1.15rem; border-radius:10px; box-shadow:0 10px 30px rgba(45,20,64,0.05)}
.about-grid::before{content:""; position:absolute; top:12%; bottom:12%; left:50%; width:2px; background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.04)); transform:translateX(-1px); border-radius:2px; box-shadow:0 6px 18px rgba(45,20,64,0.03);} 
.about-section h3{display:flex; align-items:center; gap:0.6rem; margin-top:0}
.about-section h3::before{content:""; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, #8d6fb6, #f3c6d6); display:inline-block}

@media(max-width:800px){
	.about-grid::before{display:none}
	.about-section{background:transparent; box-shadow:none; padding:0}
}