/* -- ABOUT HERO -- */
    .about-hero {
      background: linear-gradient(135deg, var(--clr-navy-deep) 0%, var(--clr-navy-mid) 100%);
      padding: 5rem 0 4rem;
      position: relative;
      overflow: hidden;
    }

    .about-hero::before {
      content: '';
      position: absolute;
      top: -100px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 300px;
      background: radial-gradient(ellipse, rgba(189,79,42,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .about-hero__inner {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .about-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clr-coral-light);
      margin-bottom: 1.25rem;
      padding: 5px 14px;
      background: rgba(189,79,42,0.15);
      border: 1px solid rgba(189,79,42,0.25);
      border-radius: 20px;
    }

    .about-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      color: white;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .about-hero p {
      font-size: clamp(0.95rem, 2vw, 1.1rem);
      color: rgba(255,255,255,0.55);
      max-width: 560px;
      margin: 0 auto;
    }

    /* -- TIMELINE STORY -- */
    .story-section {
      padding: 5.5rem 0 5rem;
      background: var(--clr-white);
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 5rem;
      align-items: start;
    }

    .story-sidebar {
      position: sticky;
      top: calc(var(--header-h) + 2rem);
    }

    .founder-card {
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }

    .founder-card__header {
      background: linear-gradient(135deg, var(--clr-navy-deep) 0%, var(--clr-navy-mid) 100%);
      padding: 2rem;
      text-align: center;
      position: relative;
    }

    .founder-avatar {
      width: 80px; height: 80px;
      background: linear-gradient(135deg, var(--clr-coral) 0%, var(--clr-ai-blue) 100%);
      border-radius: 50%;
      margin: 0 auto 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.25rem;
      border: 3px solid rgba(255,255,255,0.15);
    }

    .founder-name {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: white;
      margin-bottom: 4px;
    }

    .founder-title {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.55);
    }

    .founder-card__body {
      padding: 1.5rem;
    }

    .founder-skill {
      margin-bottom: 14px;
    }

    .founder-skill:last-child { margin-bottom: 0; }

    .founder-skill__label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--clr-text);
      margin-bottom: 6px;
    }

    .founder-skill__pct {
      font-size: 0.72rem;
      color: var(--clr-muted);
    }

    .founder-skill__bar {
      height: 6px;
      background: var(--clr-surface);
      border-radius: 3px;
      overflow: hidden;
    }

    .founder-skill__fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--clr-navy) 0%, var(--clr-ai-blue) 100%);
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 1.2s var(--ease-out);
    }

    .founder-skill__fill--coral {
      background: linear-gradient(90deg, var(--clr-coral) 0%, var(--clr-coral-light) 100%);
    }

    .founder-skill__fill.animated { transform: scaleX(1); }

    /* Story content */
    .story-content {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    .story-block {
      padding-left: 1.75rem;
      border-left: 2px solid var(--clr-border);
      position: relative;
      transition: border-color var(--duration-med);
    }

    .story-block::before {
      content: '';
      position: absolute;
      left: -5px;
      top: 4px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--clr-border);
      transition: background var(--duration-med), box-shadow var(--duration-med);
    }

    .story-block:hover {
      border-color: var(--clr-coral);
    }

    .story-block:hover::before {
      background: var(--clr-coral);
      box-shadow: 0 0 0 3px rgba(189,79,42,0.15);
    }

    .story-block__year {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clr-coral);
      margin-bottom: 6px;
    }

    .story-block h2 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--clr-navy);
      margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
    }

    .story-block p {
      font-size: 0.95rem;
      color: var(--clr-muted);
      line-height: 1.7;
    }

    .story-block p + p { margin-top: 0.75rem; }

    /* -- TIMELINE MILESTONES -- */
    .milestones-section {
      padding: 5rem 0;
      background: var(--clr-navy-deep);
      position: relative;
      overflow: hidden;
    }

    .milestones-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(29,111,164,0.12) 0%, transparent 60%);
      pointer-events: none;
    }

    .milestones-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .milestones-header h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 4vw, 2.25rem);
      font-weight: 700;
      color: white;
      letter-spacing: -0.03em;
      margin-top: 0.75rem;
    }

    .milestones-header p {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.45);
      margin-top: 0.75rem;
    }

    .milestones-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .milestone-item {
      padding: 1.75rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-xl);
      text-align: center;
      transition: background var(--duration-med), border-color var(--duration-med), transform var(--duration-med) var(--ease-out);
    }

    .milestone-item:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.15);
      transform: translateY(-3px);
    }

    .milestone-item__year {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 700;
      color: var(--clr-coral);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .milestone-item__label {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.5;
    }

    /* -- CONTACT -- */
    .contact-section {
      padding: 5rem 0 6rem;
      background: var(--clr-surface);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    .contact-info__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clr-coral);
      margin-bottom: 1rem;
    }

    .contact-info__eyebrow::before {
      content: '';
      display: inline-block;
      width: 18px;
      height: 2px;
      background: var(--clr-coral);
      border-radius: 1px;
    }

    .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.25rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--clr-navy);
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .contact-info p {
      font-size: 0.95rem;
      color: var(--clr-muted);
      line-height: 1.7;
      margin-bottom: 1.75rem;
    }

    .contact-methods {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .contact-method {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.875rem;
      color: var(--clr-text);
    }

    .contact-method__icon {
      width: 38px; height: 38px;
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    /* Contact form */
    .contact-form-card {
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-xl);
      padding: 2.25rem;
    }

    .form-group {
      margin-bottom: 1.25rem;
    }

    .form-group label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--clr-text);
      margin-bottom: 6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--clr-border);
      border-radius: var(--radius-md);
      font-size: 0.9rem;
      color: var(--clr-text);
      background: var(--clr-white);
      transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
      outline: none;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--clr-navy);
      box-shadow: 0 0 0 3px rgba(13,44,84,0.08);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 130px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    
/* -- RESPONSIVE -- */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-sidebar { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .milestones-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .milestones-row { grid-template-columns: 1fr; }
}