/* ── GALLERY CSS ── */

.gallery-filters{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;
}
.gf-btn{
  padding:10px 22px;border-radius:100px;
  border:1px solid rgba(0,0,0,.12);
  background:transparent;color:var(--text);
  font-family:var(--font-head);font-size:.85rem;font-weight:600;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.gf-btn.active,.gf-btn:hover{
  background:var(--teal);color:var(--navy);border-color:var(--teal);
}

.gallery-masonry{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:260px;
  gap:16px;
}
.gal-item{
  position:relative;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;
  transition:transform var(--transition);
}
.gal-item:hover{transform:scale(1.02)}
.gal-item.tall{grid-row:span 2}
.gal-item.wide{grid-column:span 2}
.gal-img{height:100%;border-radius:0}
.gal-item .gallery-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,19,31,.85),transparent);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:20px;opacity:0;transition:opacity var(--transition);
}
.gal-item:hover .gallery-overlay{opacity:1}
.gallery-overlay span{color:var(--white);font-family:var(--font-head);font-weight:700;font-size:1rem}
.gallery-overlay small{color:var(--teal);font-size:.78rem;margin-top:4px}
.gal-item.hidden{display:none}

/* BEFORE AFTER */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ba-card{
  border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
.ba-img{position:relative}
.ba-label{
  position:absolute;top:12px;left:12px;
  padding:4px 12px;border-radius:100px;
  font-size:.75rem;font-weight:700;font-family:var(--font-head);
}
.ba-label.before{background:rgba(255,80,80,.9);color:white}
.ba-label.after{background:var(--teal);color:var(--navy)}
.ba-caption{padding:20px}
.ba-caption h4{color:var(--white);margin-bottom:6px}
.ba-caption p{font-size:.88rem}

/* TIMELINE (director) */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;max-width:720px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;left:90px;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--teal),rgba(0,201,167,.1));
}
.tl-item{
  display:flex;gap:40px;align-items:flex-start;
  padding:28px 0;
}
.tl-year{
  font-family:var(--font-head);font-size:1.1rem;font-weight:800;
  color:var(--teal);width:90px;flex-shrink:0;text-align:right;
  padding-top:4px;
  position:relative;
}
.tl-year::after{
  content:'';position:absolute;right:-49px;top:10px;
  width:14px;height:14px;border-radius:50%;
  background:var(--teal);border:3px solid var(--navy);
}
.tl-content{flex:1;padding-left:48px}
.tl-content h3{color:var(--white);margin-bottom:8px}
.tl-content p{color:rgba(255,255,255,.5);font-size:.9rem}

/* VALUES */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.value-card{
  padding:32px 24px;border-radius:var(--radius);
  background:var(--off-white);border:1px solid rgba(0,201,167,.1);
  transition:transform var(--transition),box-shadow var(--transition);
}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.val-icon{font-size:2rem;margin-bottom:14px}
.value-card h3{margin-bottom:10px}
.value-card p{font-size:.9rem}

@media(max-width:900px){
  .gallery-masonry{grid-template-columns:repeat(2,1fr)}
  .gal-item.tall{grid-row:span 1}
  .gal-item.wide{grid-column:span 1}
  .ba-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .timeline::before{left:60px}
}
@media(max-width:600px){
  .gallery-masonry{grid-template-columns:1fr;grid-auto-rows:200px}
  .values-grid{grid-template-columns:1fr}
}