.about-page { background: #f8faff; }
.about-header { position: fixed; }
.franchise-nav a.is-active { background: var(--fw-accent); color: #fff; }
.about-wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.about-hero { position: relative; min-height: 485px; padding: 135px 0 75px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #07112f 0%, #152767 56%, color-mix(in srgb, var(--fw-accent) 72%, #152767) 100%); }
.about-hero::after { position: absolute; inset: auto 0 0; height: 90px; content: ""; background: #f8faff; clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%); }
.about-hero .about-wrap { position: relative; z-index: 2; }
.about-hero-orb { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .35; }
.orb-one { top: 110px; right: 8%; width: 330px; height: 330px; background: radial-gradient(circle, var(--fw-cyan), transparent 68%); }
.orb-two { bottom: -160px; left: 4%; width: 430px; height: 430px; background: radial-gradient(circle, var(--fw-violet), transparent 68%); }
.about-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #79eaf2; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.about-hero h1 { max-width: 790px; margin: 0; font: 800 clamp(2.5rem, 4.8vw, 4.6rem)/1.02 "Manrope", sans-serif; letter-spacing: -.055em; }
.about-hero h1 em { color: #ffd36e; font-style: normal; }
.about-hero p { max-width: 700px; margin: 18px 0 0; color: rgba(255,255,255,.78); font-size: clamp(.92rem, 1.5vw, 1.06rem); }
.about-content { padding: 95px 0 120px; }
.about-story { display: grid; grid-template-columns: 180px 1fr; gap: 58px; align-items: start; max-width: 1040px; margin: 0 auto 80px; padding: 55px; border: 1px solid var(--fw-line); border-radius: 32px; background: #fff; box-shadow: 0 26px 80px rgba(28,43,99,.09); }
.about-section-icon, .purpose-icon { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fw-blue), var(--fw-violet)); box-shadow: 0 18px 42px rgba(65,105,246,.28); }
.about-section-icon { width: 150px; height: 150px; border-radius: 42px; font-size: 3.3rem; transform: rotate(-4deg); }
.about-section-number { display: block; margin-bottom: 12px; color: var(--fw-accent); font-size: .77rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.about-content h2 { margin: 0 0 22px; font: 800 clamp(1.8rem, 3vw, 3rem)/1.14 "Manrope", sans-serif; letter-spacing: -.035em; }
.about-content p { margin: 0; color: var(--fw-muted); font-size: 1.04rem; line-height: 1.9; }
.director-message { position: relative; display: grid; grid-template-columns: minmax(230px, .72fr) 1.6fr; gap: 0; margin: 0 auto 80px; overflow: hidden; border-radius: 32px; color: #fff; background: linear-gradient(135deg, #081432, #172b70); box-shadow: 0 28px 80px rgba(9,19,52,.2); }
.director-identity { display: flex; flex-direction: column; justify-content: flex-end; gap: 26px; min-height: 480px; padding: 44px; background: linear-gradient(160deg, color-mix(in srgb, var(--fw-accent) 85%, #081432), #101e4c); }
.director-avatar { display: grid; width: 150px; height: 150px; place-items: center; border: 2px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 10px rgba(255,255,255,.06); font: 800 3.2rem/1 "Manrope", sans-serif; }
.director-identity span, .director-identity strong, .director-identity small { display: block; }
.director-identity span { margin-bottom: 5px; color: rgba(255,255,255,.62); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.director-identity strong { font: 800 1.35rem/1.25 "Manrope", sans-serif; }
.director-identity small { margin-top: 7px; color: rgba(255,255,255,.68); }
.director-copy { position: relative; padding: 62px 58px; }
.director-copy > .bi-quote { position: absolute; top: 20px; right: 35px; color: rgba(255,255,255,.08); font-size: 8rem; line-height: 1; }
.director-copy .about-section-number { color: #79eaf2; }
.director-copy h2 { position: relative; color: #fff; }
.director-copy p { position: relative; color: rgba(255,255,255,.72); }
.director-signoff { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.director-signoff strong, .director-signoff span { display: block; }
.director-signoff strong { font-family: "Manrope", sans-serif; }
.director-signoff span { margin-top: 3px; color: rgba(255,255,255,.57); font-size: .84rem; }
.purpose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.purpose-card { min-height: 430px; padding: 46px; overflow: hidden; border: 1px solid var(--fw-line); border-radius: 32px; background: #fff; box-shadow: 0 20px 60px rgba(28,43,99,.08); transform: perspective(1000px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)); transition: transform .2s ease, box-shadow .2s ease; }
.purpose-card:hover { box-shadow: 0 30px 80px rgba(28,43,99,.14); }
.purpose-icon { width: 72px; height: 72px; margin-bottom: 42px; border-radius: 22px; font-size: 1.8rem; }
.mission-card .purpose-icon { background: linear-gradient(135deg, #ff557d, #ff9d45); }
[data-animate] { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
  .about-hero { min-height: 460px; padding: 145px 0 75px; }
  .about-story { grid-template-columns: 1fr; gap: 32px; padding: 32px 25px; }
  .about-section-icon { width: 92px; height: 92px; border-radius: 27px; font-size: 2.2rem; }
  .director-message { grid-template-columns: 1fr; }
  .director-identity { min-height: 0; padding: 32px 25px; }
  .director-avatar { width: 92px; height: 92px; font-size: 2rem; }
  .director-copy { padding: 40px 25px; }
  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-card { min-height: 0; padding: 34px 25px; }
}
@media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; } }