/* ── ABOUT PAGE CSS ── */

/* STORY */
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.story-img{position:relative}
.story-float-stat{
  position:absolute;bottom:-20px;right:-20px;
  background:var(--teal);color:var(--navy);
  padding:18px 24px;border-radius:var(--radius);
  text-align:center;box-shadow:var(--shadow-teal);
}
.sfs-num{
  display:block;font-family:var(--font-head);
  font-size:1.8rem;font-weight:800;line-height:1;
}
.sfs-label{display:block;font-size:.75rem;font-weight:600;opacity:.75;margin-top:4px}
.story-text p{margin-bottom:16px;line-height:1.8}
.about-numbers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;
}
.abn{text-align:center;padding:20px 12px;border-radius:12px;background:var(--off-white)}
.abn-num{font-family:var(--font-head);font-size:1.8rem;font-weight:800;display:block}
.abn-label{font-size:.78rem;color:var(--text-muted);display:block;margin-top:4px}

/* MISSION/VISION */
.mv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mv-card{
  padding:36px 28px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  transition:background var(--transition),border-color var(--transition);
}
.mv-card.accent{background:rgba(0,201,167,.07);border-color:rgba(0,201,167,.25)}
.mv-card:hover{background:rgba(0,201,167,.06);border-color:rgba(0,201,167,.2)}
.mv-icon{font-size:2.5rem;margin-bottom:16px}
.mv-card h3{color:var(--white);margin-bottom:12px}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.team-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--off-white);
  transition:transform var(--transition),box-shadow var(--transition);
}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.team-img .img-placeholder{border-radius:0;height:220px}
.team-card h3{padding:16px 20px 4px;font-family:var(--font-head)}
.team-role{display:block;padding:0 20px;color:var(--teal);font-size:.8rem;font-weight:600;margin-bottom:8px}
.team-card p{padding:0 20px 20px;font-size:.88rem}

/* LOCATION */
.location-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}
.loc-item{
  display:flex;gap:16px;align-items:flex-start;
  margin-bottom:28px;padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.loc-item:last-child{border:none;margin:0;padding:0}
.loc-icon{font-size:1.5rem;flex-shrink:0;margin-top:4px}
.loc-item h4{color:var(--white);margin-bottom:6px;font-family:var(--font-head)}
.loc-item p,.loc-item a{color:rgba(255,255,255,.55);font-size:.92rem}
.loc-item a:hover{color:var(--teal)}
.map-placeholder{
  height:400px;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid rgba(0,201,167,.2);
}

/* DIRECTOR PAGE */
.director-hero-content{
  display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:center;
}
.director-img-wrap{position:relative}
.director-img-wrap .img-placeholder{height:500px}
.dir-badge{
  position:absolute;bottom:24px;left:24px;
  background:var(--teal);color:var(--navy);
  padding:12px 20px;border-radius:var(--radius);
  font-family:var(--font-head);
}
.dir-badge strong{display:block;font-size:1rem}
.dir-badge span{font-size:.75rem;opacity:.8}
.director-info .section-label{margin-bottom:16px}
.director-info h2{margin-bottom:8px}
.director-title{color:var(--teal);font-size:1rem;font-weight:600;margin-bottom:24px;font-family:var(--font-head)}
.director-info p{margin-bottom:16px;line-height:1.8}
.director-quote{
  margin:28px 0;padding:20px 28px;
  border-left:4px solid var(--teal);
  background:rgba(0,201,167,.05);
  border-radius:0 12px 12px 0;
}
.director-quote p{color:var(--text);font-style:italic;font-size:1.05rem;margin:0}
.dir-socials{display:flex;gap:12px;margin-top:24px}
.dir-social-btn{
  padding:10px 20px;border-radius:10px;
  border:1px solid rgba(0,201,167,.3);color:var(--teal);
  font-size:.85rem;font-weight:600;
  transition:background var(--transition);
}
.dir-social-btn:hover{background:var(--teal);color:var(--navy)}

/* GALLERY */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.gallery-item{
  border-radius:var(--radius);overflow:hidden;position:relative;
  cursor:pointer;
}
.gallery-item .img-placeholder{height:260px;border-radius:0}
.gallery-item:nth-child(4){grid-column:span 2}
.gallery-item:nth-child(7){grid-column:span 2}
.gallery-overlay{
  position:absolute;inset:0;
  background:rgba(6,19,31,.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--transition);
}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay span{color:var(--white);font-family:var(--font-head);font-weight:700}
.gallery-overlay small{color:var(--teal);font-size:.8rem;margin-top:4px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.contact-info-card{
  background:var(--off-white);padding:40px 36px;
  border-radius:var(--radius-lg);
}
.contact-info-card h3{margin-bottom:24px;font-family:var(--font-head)}
.ci-item{display:flex;gap:14px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(0,0,0,.06)}
.ci-item:last-child{border:none;margin:0;padding:0}
.ci-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.ci-item h4{color:var(--text);margin-bottom:4px}
.ci-item p,.ci-item a{color:var(--text-muted);font-size:.9rem}
.ci-item a:hover{color:var(--teal)}
.contact-form{background:var(--navy);padding:44px;border-radius:var(--radius-lg)}
.contact-form h3{color:var(--white);margin-bottom:24px}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:8px;font-weight:500}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:var(--white);
  font-family:var(--font-body);font-size:.95rem;
  transition:border-color var(--transition),background var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--teal);background:rgba(0,201,167,.05);
}
.form-group select option{background:var(--navy-mid);color:var(--white)}
.form-group textarea{height:120px;resize:vertical}
.form-submit{width:100%;padding:16px;font-size:1rem;cursor:pointer;border:none;font-family:var(--font-head)}

@media(max-width:900px){
  .story-grid,.director-hero-content,.location-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .mv-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
  .about-numbers{grid-template-columns:repeat(2,1fr)}
  .story-float-stat{bottom:20px;right:20px}
}
@media(max-width:600px){
  .mv-grid,.team-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item:nth-child(4),.gallery-item:nth-child(7){grid-column:span 1}
}