/* MIZOOR About page. Builds on home.css (same tokens, header, footer, hero and motion). */
.about-hero { min-height: 88svh; }
.about-hero .hero-text { max-width: 62rem; }
.about-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
.about-hero h1 br + .w, .about-hero h1 .w { white-space: nowrap; }
.about-hero .lead { max-width: 36rem; }

/* Story and values, on linen */
.about-story { background: var(--linen); color: var(--ink); padding: clamp(5rem, 9vw, 7.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); }
.about-story h2 { color: var(--ink); font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 11ch; }
.about-story-copy { display: grid; gap: 1.1rem; font-size: 1.15rem; color: #3d4756; max-width: 36rem; align-self: end; }
.values { grid-column: 1 / -1; list-style: none; padding: 0; margin: clamp(1.5rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.value-card { position: relative; padding: 2rem; min-height: 17rem; border-radius: 18px; background: #fbfaf6; box-shadow: 0 1px 0 rgba(19,25,37,.08), 0 30px 60px -40px rgba(19,25,37,.45); display: grid; align-content: end; gap: .6rem; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(19,25,37,.08), 0 40px 70px -40px rgba(19,25,37,.55); }
.value-num { position: absolute; top: 1.2rem; right: 1.6rem; font-family: var(--serif); font-size: 6rem; line-height: 1; color: rgba(19,25,37,.07); }
.value-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--ink); }
.value-card p { color: #4f5a69; }
.motion .values .reveal:nth-child(2) { transition-delay: .1s; }
.motion .values .reveal:nth-child(3) { transition-delay: .2s; }

/* Springfield */
.about-place { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 8rem) var(--gutter); background: radial-gradient(55% 70% at 78% 50%, #20304a, rgba(32,48,74,0) 70%), var(--ink-2); }
.about-place h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 12ch; }
.about-place-copy { display: grid; justify-items: start; gap: 1.4rem; }
.about-place-copy p { font-size: 1.15rem; max-width: 34rem; }
.about-emblem { justify-self: center; width: min(22rem, 70vw); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,199,226,.18), rgba(60,199,226,0)); }
.about-emblem img { width: 72%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.motion .about-emblem img { animation: float 6s ease-in-out infinite alternate; }

/* Founder */
.founder { background: var(--linen); color: var(--ink); padding: clamp(5rem, 9vw, 7.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); }
.founder h2 { color: var(--ink); font-size: clamp(2.2rem, 4vw, 3.6rem); max-width: 11ch; }
.founder-quote { margin: 0; display: grid; gap: 1.2rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.7; color: #2b3443; border-left: 2px solid var(--ink); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.founder-sign { display: grid; gap: .2rem; margin-top: .6rem; font-size: 1rem; }
.founder-sign strong { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .04em; color: var(--ink); }
.founder-sign span { color: #59636f; }

@media (max-width: 900px) {
  .about-story, .about-place, .founder { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .value-card { min-height: 12rem; }
  .about-emblem { order: -1; width: min(14rem, 60vw); }
}