/* ================================================================
   about.css — About page ONLY
   style.css must be loaded first.
   ================================================================ */

/* ── HERO  FILE: about-hero-bg.jpg
   Screenshot: full-width photo, nav overlaid white text,
   "About us" in white italic serif centered in photo
   ================================================================ */
.ab-hero {
  position: relative;
  height: clamp(220px, 28vw, 340px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  z-index: 0;
  filter: grayscale(30%) brightness(.85);
}
.ab-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}

.ab-hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--font);
  font-size: var(--h1);
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

/* ── OUR STORY ───────────────────────────────────────────────── */
.ab-story { background: #ffffff; }
.ab-story-inner {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}
.ab-story-inner p {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 20px;
  color: #444;
  line-height: 32px;
}

/* ── MEET VISIONARY  FILE: founder-photo.jpg ─────────────────── */
.ab-visionary { background: #ffffff; }
.ab-visionary-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.ab-visionary-text {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 20px;
  color: #444;
  line-height: 32px;
  margin-bottom: 2.5rem;
}
.ab-founder { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
/* Rectangular bordered photo — not circular */
.ab-founder-img {
  max-width: 300px;
  overflow: hidden;
  background: none;
}
.ab-founder-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.ab-founder-name {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
  margin-top: 0.5rem;
}
.ab-founder-role {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 1rem;
  color: #666;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ab-hero        { height: 200px; }
  .ab-hero-title  { font-size: 2rem; }
  .ab-founder-img { width: 240px; height: 300px; }
}