/* Scoped mobile-first styles for About page */
html[data-page="about"] {
  /* Tokens (mobile-first, LIGHT THEME) */
  --bg-base: #FFFFFF;
  --bg-elev1: #F8FAFC; /* elevated cards */
  --fg-primary: #0B0B0C; /* near-black text */
  --fg-secondary: #374151; /* headers/subtext */
  --fg-muted: #6B7280; /* captions */
  --brand-primary: #7C3AED; /* Purple */
  --brand-accent: #22D3EE;  /* Cyan */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --font-sans: Inter, "SF Pro Text", Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
  --lh-snug: 1.25; --lh-normal: 1.4;
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 280ms;
  --curve: cubic-bezier(0.2,0,0,1);
}

html[data-page="about"] body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navbar override: high-contrast */
html[data-page="about"] .navbar {
  background: color-mix(in oklab, #ffffff 90%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid color-mix(in oklab, #000 10%, transparent);
}

/* Containers */
html[data-page="about"] .container {
  padding-inline: max(16px, env(safe-area-inset-left));
}

/* Hero */
html[data-page="about"] .about-hero {
  display: grid;
  place-items: center;
  padding-block: 40px 32px; /* lighter top pad; body already offsets nav */
  padding-top: 100px; /* Account for fixed navbar */
  text-align: center;
  background: linear-gradient(180deg, rgba(124,58,237,0.08), transparent 60%);
  min-height: 65vh;
}

html[data-page="about"] .about-hero .hero-title { 
  font-size: clamp(40px, 8.5vw, 64px);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-12);
}

html[data-page="about"] .about-hero .hero-line { display:block; }

html[data-page="about"] .about-hero .hero-subtitle {
  color: var(--fg-secondary);
  margin: 12px auto 0;
  max-width: 42ch;
  font-size: clamp(18px, 4.7vw, 22px);
  line-height: 1.6;
}

/* Optional hero CTA alignment (mirrors Services page) */
html[data-page="about"] .about-hero .hero-cta { margin-top: 16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Sections */
html[data-page="about"] .section-header { text-align: center; margin-bottom: var(--space-24); }
html[data-page="about"] .section-title { font-size: var(--fs-xl); margin: 0 0 var(--space-8); }
html[data-page="about"] .section-subtitle { color: var(--fg-muted); margin: 0 auto; max-width: 34ch; }

/* Vision */
html[data-page="about"] .vision-content { display: grid; gap: var(--space-24); align-items: center; }
html[data-page="about"] .vision-text h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-12); color: var(--fg-primary) !important; }
html[data-page="about"] .vision-text p { color: var(--fg-secondary) !important; }
html[data-page="about"] .vision-pillars { display:grid; gap: var(--space-12); }
html[data-page="about"] .vision-pillars .pillar { 
  background: var(--bg-elev1);
  border: 1px solid color-mix(in oklab, #000 10%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}
/* Fix contrast and remove dark overlay from base CSS */
html[data-page="about"] .vision-pillars .pillar::before { background: transparent !important; opacity: 0 !important; }
html[data-page="about"] .vision-pillars .pillar:hover::before { opacity: 0 !important; }
html[data-page="about"] .vision-pillars .pillar:hover { transform: translateY(-6px); border-color: color-mix(in oklab, #fff 20%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
html[data-page="about"] .vision-pillars .pillar h4 { color: var(--fg-primary) !important; }
html[data-page="about"] .vision-pillars .pillar p { color: var(--fg-secondary) !important; }
html[data-page="about"] .vision-visual img { width: 100%; height: auto; border-radius: var(--radius-lg); display:block; }

/* Team */
html[data-page="about"] .team-grid { display:grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 640px){
  html[data-page="about"] .team-grid { grid-template-columns: repeat(2,1fr); }
}
html[data-page="about"] .team-member {
  background: var(--bg-elev1);
  border: 1px solid color-mix(in oklab, #000 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
html[data-page="about"] .member-image { display:grid; place-items:center; margin-bottom: var(--space-12); }
html[data-page="about"] .member-image img { 
  width: 96px; height: 96px; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 50%; border: 2px solid var(--brand-primary);
}
html[data-page="about"] .member-info h3 { margin: 0 0 4px; font-size: 18px; }
html[data-page="about"] .member-title { margin: 0 0 8px; color: var(--fg-secondary); font-size: 14px; }
html[data-page="about"] .member-tagline { margin: 0 0 8px; color: var(--fg-muted); font-size: 14px; }
html[data-page="about"] .member-description { margin: 0 0 12px; color: var(--fg-secondary); }
/* Override gradient text from global CSS so text stays legible */
html[data-page="about"] .team-member h3 { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: var(--fg-primary) !important; color: var(--fg-primary) !important; }
html[data-page="about"] .read-more-btn { 
  display:inline-flex; align-items:center; justify-content:center; width: 100%;
  min-height: 48px; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, #fff 16%, transparent);
  color: var(--fg-primary); background: transparent; cursor: pointer;
  transition: background var(--motion-base) var(--curve), transform var(--motion-fast) var(--curve);
}
html[data-page="about"] .read-more-btn:active { transform: translateY(1px); }

/* Story timeline: single column mobile */
/* Trim section padding on mobile */
@media (max-width: 768px){
  html[data-page="about"] .story-section { padding: var(--space-32) 0 !important; }
}

html[data-page="about"] .story-content { display:grid; gap: var(--space-16); }
html[data-page="about"] .story-timeline { display:grid; gap: var(--space-12); }

/* Mobile-first timeline cleanup */
@media (max-width: 992px){
  html[data-page="about"] .story-timeline { padding: 0; margin: 0; }
  html[data-page="about"] .timeline-item { 
    display:grid; grid-template-columns: 1fr; gap: 8px; align-items: start; 
    margin: 12px 0; padding: 0; opacity: 1; animation: none !important;
  }
  html[data-page="about"] .timeline-year { 
    position: static !important; transform: none !important; left: auto !important; top: auto !important;
    background: var(--brand-primary); color: #fff; font-weight: 600; border-radius: 999px;
    font-size: 14px !important; line-height: 1 !important; padding: 6px 10px !important; justify-self: start;
  }
  html[data-page="about"] .timeline-content { 
    width: auto !important; margin: 0 !important; background: var(--bg-elev1); border-radius: var(--radius-md);
    padding: var(--space-16) !important; border: 1px solid color-mix(in oklab, #000 10%, transparent);
  }
  html[data-page="about"] .timeline-content::before { display: none !important; content: none !important; border: 0 !important; }
}

html[data-page="about"] .timeline-content h3 { color: var(--fg-primary) !important; }
html[data-page="about"] .timeline-content p { color: var(--fg-secondary) !important; }

/* CTA section */
html[data-page="about"] .cta-section { text-align: center; padding-block: var(--space-32) calc(72px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(34,211,238,0.06)); }
html[data-page="about"] .cta-buttons { display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; margin-top: 16px; }
html[data-page="about"] .cta-button { 
  display:inline-flex; align-items:center; justify-content:center; min-height: 48px;
  padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, #fff 16%, transparent);
}
html[data-page="about"] .cta-button.magnetic { background: var(--brand-primary); color:#000; border-color: transparent; }
html[data-page="about"] .cta-button.secondary { background: transparent; color: var(--fg-primary); }

/* Remove sweeping overlay on CTA buttons for About to keep text visible */
html[data-page="about"] .cta-button::before,
html[data-page="about"] .magnetic::before { display: none !important; }
/* Force black text inside CTAs as requested */
html[data-page="about"] .cta-button,
html[data-page="about"] .magnetic { color:#000 !important; }
html[data-page="about"] .cta-button span,
html[data-page="about"] .magnetic span { color:#000 !important; -webkit-text-fill-color:#000 !important; }
html[data-page="about"] .cta-button.secondary { color: var(--fg-primary) !important; }
html[data-page="about"] .cta-button.secondary span { color: var(--fg-primary) !important; -webkit-text-fill-color: var(--fg-primary) !important; }

/* Sticky Bar (safe-area padded) */
#stickyBar.sticky{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px calc(env(safe-area-inset-left) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-right) + 12px);backdrop-filter:saturate(160%) blur(10px);background:color-mix(in oklab, #ffffff 88%, transparent);border-top:1px solid color-mix(in oklab, #000 12%, transparent);box-shadow:0 -6px 18px rgba(0,0,0,0.06);z-index:999}
#stickyBar .btn{flex:1;min-height:48px;padding:14px 16px;border-radius:16px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
#stickyBar .primary{background:var(--brand-primary);color:#fff;border:0}
#stickyBar .ghost{border:1px solid color-mix(in oklab, #000 16%, transparent);color:var(--fg-primary);background:transparent}

/* Force light backgrounds for sections previously dark in base CSS */
html[data-page="about"] .vision-section,
html[data-page="about"] .team-section,
html[data-page="about"] .story-section { background: #ffffff !important; }
html[data-page="about"] .vision-section::before,
html[data-page="about"] .story-section::before { background: transparent !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html[data-page="about"] * { animation: none !important; transition: none !important; }
}

/* Increase readability with dynamic type up to 200% */
@media (min-resolution: 1dpi){ /* hint: keep selectors light */
  html[data-page="about"] { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}