/* ─── PAGE HERO ─── */
.phero { position: relative; padding: 11rem 3rem 5rem; background: var(--navy); overflow: hidden; }
.phero-bg { position: absolute; inset: 0; opacity: 0.18; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; }
.phero-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, var(--navy) 35%, rgba(10,22,40,0.5)); }
.phero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.phero-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; }
.phero-label::after { content: ''; width: 40px; height: 1px; background: var(--cyan); opacity: 0.5; }
.phero h1 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; color: #fff; line-height: 1.05; }
.phero h1 em { font-style: italic; color: var(--cyan); }
.phero p { margin-top: 1.6rem; max-width: 560px; font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.6); }

/* ─── STORY ─── */
.story { background: var(--ice); padding: 6rem 3rem; }
.story-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
.story-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.story-label::after { content: ''; width: 40px; height: 1px; background: var(--teal); }
.story h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.18; color: var(--charcoal); }
.story h2 em { font-style: italic; }
.story p { font-size: 0.95rem; font-weight: 300; line-height: 1.9; color: var(--text-body); opacity: 0.82; margin-bottom: 1.3rem; }

/* ─── TEAM ─── */
.team-section { background: var(--navy); padding: 5rem 3rem 6rem; }
.team-inner { max-width: 1200px; margin: 0 auto; }
.team-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.team-label::after { content: ''; width: 40px; height: 1px; background: var(--cyan); opacity: 0.5; }
.team-section h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 400; color: #fff; margin-bottom: 3rem; }
.team-section h2 em { font-style: italic; color: var(--cyan); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.member { position: relative; overflow: hidden; border: 1px solid rgba(94,234,212,0.2); background: rgba(94,234,212,0.04); padding: 2rem 1.8rem; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.member::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--cyan); transition: width 0.4s ease; }
.member:hover { background: rgba(94,234,212,0.08); border-color: rgba(94,234,212,0.5); transform: translateY(-3px); }
.member:hover::after { width: 100%; }
.member-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.5rem; font-weight: 400; color: #fff; line-height: 1.15; }
.member-role { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-top: 0.5rem; }
.member-creds { font-size: 0.6rem; font-weight: 300; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin-top: 0.3rem; }
.member-bio { font-size: 0.72rem; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.6); margin-top: 0.9rem; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .story-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .phero { padding: 9rem 1.5rem 4rem; }
  .story, .team-section { padding: 4rem 1.5rem; }
  .team-grid { grid-template-columns: 1fr; }
}