/* ===================== Home — service highlights ===================== */
.placeholder-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(0,229,255,.15), transparent 50%),
    repeating-linear-gradient(
      45deg,
      var(--color-surface) 0 16px,
      var(--color-surface-2) 16px 32px
    );
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  position: relative;
}
.placeholder-img::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 var(--space-2) 0;
  text-align: center;
  font-size: var(--fs-300);
  color: var(--color-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}
.gallery-strip .placeholder-img { aspect-ratio: 4 / 3; }

/* ===================== About ===================== */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cert-row__item {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  letter-spacing: 0.1em;
  color: var(--color-muted);
  padding: 0.5rem 1rem;
  border-right: 1px solid var(--color-border);
}
.cert-row__item:last-child { border-right: 0; }

.team-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.team-card { text-align: center; }
.team-card .placeholder-img { aspect-ratio: 1 / 1; margin-bottom: var(--space-2); }
.team-card h4 { margin-bottom: 0.25rem; }
.team-card .role {
  font-size: var(--fs-300);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ===================== Gallery page ===================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.chip {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--fs-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--color-text); border-color: var(--color-text); }
.chip[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
}
.gallery-item {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}
.gallery-item .placeholder-img {
  border-radius: 0;
  border: 0;
  height: 100%;
}
.gallery-item[hidden] { display: none; }
.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-2);
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  font-size: var(--fs-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-within .gallery-item__caption { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 7, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox__content {
  max-width: min(1100px, 96vw);
  max-height: 90vh;
  position: relative;
}
.lightbox__content .placeholder-img {
  width: min(1100px, 96vw);
  aspect-ratio: 16 / 10;
}
.lightbox__caption {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px; height: 44px;
  background: rgba(20,21,26,.8);
  color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
}
.lightbox__close:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ===================== Contact ===================== */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr; }
}
.contact-info { display: grid; gap: var(--space-3); align-content: start; }
.contact-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.contact-info dt {
  font-size: var(--fs-300);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-info dd { margin: 0; }
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  filter: grayscale(0.4) contrast(1.05);
}