/* ==========================================================================
   JOLARDO — About page styles
   ========================================================================== */

.page-header{
  padding: 190px 0 90px; position:relative;
  background: radial-gradient(ellipse 700px 400px at 50% 0%, rgba(212,175,55,0.14), transparent 70%), var(--jl-black);
  border-bottom: 1px solid var(--jl-line);
  text-align:center;
}
.page-header .section-title{ margin: 16px auto 0; }
.page-header p{ color: var(--jl-ivory-dim); max-width: 560px; margin: 18px auto 0; }

/* Story */
.story-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.story-figure{
  border-radius: var(--radius-lg); border: 1px solid var(--jl-line); background: var(--jl-panel);
  aspect-ratio: 4/5; position:relative; overflow:hidden;
}
.story-figure .cover{ position:absolute; inset:0; background: linear-gradient(150deg, rgba(212,175,55,0.22), rgba(0,0,0,.92)); }
.story-figure .badge{
  position:absolute; bottom:24px; left:24px; right:24px; padding: 18px 22px;
  background: rgba(0,0,0,0.78); border:1px solid var(--jl-line-strong); border-radius: var(--radius-sm); backdrop-filter: blur(10px);
}
.story-figure .badge b{ display:block; font-family: var(--font-display); font-size:26px; color: var(--jl-gold-light); }
.story-figure .badge span{ font-size:12px; color:var(--jl-muted); text-transform:uppercase; letter-spacing:.5px; }
.story-copy p{ color: var(--jl-ivory-dim); margin-bottom: 18px; }

/* Mission / Vision / Goals */
.goal-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.goal-card{ padding: 36px 30px; border-radius: var(--radius-md); background: var(--jl-panel); border:1px solid var(--jl-line); }
.goal-card .tag{ font-family: var(--font-mono); font-size:11px; letter-spacing:2px; color: var(--jl-gold-light); text-transform:uppercase; }
.goal-card h3{ font-size:24px; margin: 14px 0 12px; }
.goal-card p{ color: var(--jl-ivory-dim); font-size:14.5px; }

/* Timeline */
.timeline{ position:relative; padding-left: 50px; margin-top: 40px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: var(--jl-line-strong); }
.timeline-item{ position:relative; padding-bottom: 44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-50px; top:4px; width:19px; height:19px; border-radius:50%;
  background: var(--jl-gradient-gold); box-shadow: 0 0 0 5px rgba(212,175,55,0.16);
}
.timeline-item .year{ font-family: var(--font-mono); color: var(--jl-gold-light); font-size:13px; letter-spacing:2px; }
.timeline-item h4{ font-size:20px; margin:8px 0 6px; }
.timeline-item p{ color: var(--jl-ivory-dim); font-size:14.5px; max-width:560px; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.team-card{ text-align:center; }
.team-photo{
  aspect-ratio: 1/1; border-radius: var(--radius-md); background: var(--jl-panel); border:1px solid var(--jl-line);
  position:relative; overflow:hidden; margin-bottom: 18px;
}
.team-photo .cover{ position:absolute; inset:0; background: linear-gradient(160deg, rgba(212,175,55,0.2), rgba(0,0,0,.92)); }
.team-card h4{ font-size:18px; }
.team-card span{ display:block; margin-top:4px; font-size:13px; color: var(--jl-muted); text-transform:uppercase; letter-spacing:.4px; }

/* Values */
.value-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.value-card{ padding: 28px; border-radius: var(--radius-md); border:1px solid var(--jl-line); text-align:center; }
.value-card .glyph{ font-family: var(--font-display); font-size:32px; color: var(--jl-gold-light); }
.value-card h4{ font-size:16px; margin: 12px 0 8px; }
.value-card p{ font-size:13.5px; color: var(--jl-ivory-dim); }