/* ============================== ABOUT ============================== */

.about-hero{ padding: clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem); text-align:center; position:relative; }
.about-hero .eyebrow{ margin-inline:auto; }
.about-hero h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); max-width:20ch; margin: 1.3rem auto 0; }
.about-hero p{ max-width:56ch; margin: 1.4rem auto 0; color: var(--ink-dim); font-size:1.05rem; }
.about-hero-orbit{ position:relative; height:70px; margin-top:2.4rem; display:flex; align-items:center; justify-content:center; gap:1.1rem; }
.orbit-dot{ width:8px; height:8px; border-radius:50%; animation: pulse-dot 2.4s ease-in-out infinite; }
.orbit-dot:nth-child(2){ animation-delay:.3s; } .orbit-dot:nth-child(3){ animation-delay:.6s; } .orbit-dot:nth-child(4){ animation-delay:.9s; } .orbit-dot:nth-child(5){ animation-delay:1.2s; }
@keyframes pulse-dot{ 0%,100%{ opacity:.3; transform:scale(1); } 50%{ opacity:1; transform:scale(1.5); } }

/* ---- Mission quote ---- */
.mission-quote{ max-width:820px; margin: 1rem auto 0; text-align:center; padding: 2.5rem 0; }
.mission-quote .quote-mark{ display:block; font-size:4rem; }
.mission-quote p{ font-family: var(--f-display); font-weight:600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.45; }

/* ---- Zigzag story sections ---- */
.story-section{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; padding: clamp(2.5rem,5vw,4rem) 0; }
.story-section.is-reverse{ direction: rtl; }
.story-section.is-reverse > *{ direction: ltr; }
.story-copy .eyebrow{ margin-bottom:1rem; }
.story-copy h2{ font-size: clamp(1.6rem,3vw,2.3rem); }
.story-copy p{ margin-top:1.1rem; color: var(--ink-dim); line-height:1.7; }
.story-visual{ position:relative; aspect-ratio:4/3; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--glass-border); }
.story-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-visual::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.story-visual-1::after{ background: linear-gradient(160deg, rgba(39,39,42,.32), transparent 55%, rgba(161,161,170,.2)); }
.story-visual-2::after{ background: linear-gradient(160deg, rgba(244,244,245,.3), transparent 55%, rgba(82,82,91,.22)); }
.story-visual-3::after{ background: linear-gradient(160deg, rgba(212,212,216,.28), transparent 55%, rgba(113,113,122,.22)); }
.story-visual-badge{ position:absolute; bottom:14px; right:14px; width:46px; height:46px; border-radius:12px; background: rgba(10,9,18,.55); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; z-index:2; }
.story-visual-badge svg{ width:22px; height:22px; }
@media (max-width: 820px){ .story-section, .story-section.is-reverse{ grid-template-columns:1fr; direction:ltr; } }

/* ---- Vertical timeline ---- */
.timeline{ position:relative; max-width:760px; margin: 2rem auto 0; padding-left: 0; }
.timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background: linear-gradient(180deg, var(--indigo), var(--cyan), var(--magenta), var(--orange)); transform:translateX(-50%); }
.tl-item{ position:relative; width:50%; padding: 0 3rem 3.2rem; }
.tl-item:nth-child(odd){ margin-left:0; text-align:right; }
.tl-item:nth-child(even){ margin-left:50%; text-align:left; }
.tl-dot{ position:absolute; top:.3rem; width:14px; height:14px; border-radius:50%; background: var(--bg-card); border:2px solid var(--violet); box-shadow:0 0 0 5px var(--void); }
.tl-item:nth-child(odd) .tl-dot{ right:-7px; }
.tl-item:nth-child(even) .tl-dot{ left:-7px; }
.tl-year{ font-family: var(--f-mono); font-size:.78rem; color: var(--cyan); letter-spacing:.06em; }
.tl-item h3{ font-size:1.1rem; margin-top:.4rem; }
.tl-item p{ font-size:.86rem; color: var(--ink-faint); margin-top:.5rem; line-height:1.5; }
@media (max-width: 700px){
  .timeline::before{ left: 8px; }
  .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even){ width:100%; margin-left:0; text-align:left; padding: 0 0 2.6rem 2.6rem; }
  .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot{ left:1px; right:auto; }
}

/* ---- Team bento ---- */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.3rem; }
.team-card{ text-align:center; padding: 1.8rem 1.2rem; }
.team-avatar{ width:74px; height:74px; border-radius:50%; margin:0 auto 1rem; display:grid; place-items:center; font-family: var(--f-display); font-weight:800; font-size:1.3rem; color:#fff; overflow:hidden; border:1px solid var(--glass-border); flex:none; }
.team-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card h3{ font-size:.98rem; }
.team-card span{ font-size:.78rem; color: var(--ink-faint); display:block; margin-top:.3rem; }
.team-card.is-wide{ grid-column: span 2; display:flex; align-items:center; gap:1.4rem; text-align:left; padding: 1.6rem; }
.team-card.is-wide .team-avatar{ margin:0; flex:none; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2,1fr); } .team-card.is-wide{ grid-column: span 2; } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } .team-card.is-wide{ grid-column: span 1; flex-direction:column; text-align:center; } }

/* ---- Values row ---- */
.values-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.3rem; }
.value-item{ text-align:center; padding: 1.6rem 1rem; }
.value-item .f-icon{ margin-inline:auto; }
.value-item h4{ font-size:.95rem; margin-top:.9rem; }
.value-item p{ font-size:.8rem; color: var(--ink-faint); margin-top:.4rem; }
@media (max-width: 760px){ .values-row{ grid-template-columns: repeat(2,1fr); } }

/* ---- Contextual native ad in story flow ---- */
.story-ad-wrap{ text-align:center; padding: 1rem 0 2rem; }