/* ==========================================================================
   About page — page-specific styles
   ========================================================================== */

.about-hero { padding-block: var(--space-section); text-align: center; }
.about-hero .eyebrow { margin-bottom: var(--space-unit); }
.about-hero h1 { max-width: 44rem; margin-inline: auto; margin-bottom: var(--space-gutter); }
.about-hero .divider { margin-inline: auto; margin-bottom: var(--space-gutter); }
.about-hero p.lead { max-width: 48rem; margin-inline: auto; color: var(--color-text-muted); }

/* ---- Firm history ---- */
.history {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: center;
}
@media (min-width: 1024px) {
  .history { grid-template-columns: 7fr 5fr; }
}

.history__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.history__text p { color: var(--color-text-muted); margin-bottom: var(--space-gutter); }

.history__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
  margin-top: var(--space-section);
}

.pillar {
  border-left: 2px solid var(--color-gold);
  padding-left: 24px;
}
.pillar h3 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}

/* ---- Core values ---- */
.values-intro { text-align: center; margin-bottom: var(--space-section); }
.values-intro h2 { margin-bottom: 16px; }
.values-intro p { color: var(--color-gold); font-size: 12px; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; }

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
}
@media (min-width: 768px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

.value-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  padding: var(--space-gutter);
  transition: border-color 0.3s ease;
}
.value-card:hover { border-color: var(--color-gold); }
.value-card .icon { color: var(--color-gold); font-size: 36px; margin-bottom: 16px; }
.value-card h4 { font-family: var(--font-display); font-size: 24px; font-weight: 600; text-transform: none; letter-spacing: normal; margin-bottom: 8px; }
.value-card p { color: var(--color-text-muted); }

/* ---- Director spotlight ---- */
.director {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: center;
}
@media (min-width: 1024px) {
  .director { grid-template-columns: repeat(2, 1fr); }
}
.director__info { order: 2; }
.director__photo { order: 1; }
@media (min-width: 1024px) {
  .director__info { order: 1; }
  .director__photo { order: 2; }
}

.director__info .eyebrow { display: block; margin-bottom: 16px; }
.director__info h2 { margin-bottom: 8px; }
.director__info .role {
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-gutter);
}
.director__info p { color: var(--color-text-muted); margin-bottom: 16px; }

.director__credentials { margin-top: var(--space-gutter); }
.director__credentials h5 { margin-bottom: 16px; }
.credential-tags { display: flex; flex-wrap: wrap; gap: 16px; }
.credential-tag {
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
}
.credential-tag--gold {
  background: var(--color-gold);
  color: var(--color-white);
  border: none;
}

.director__photo-wrap { position: relative; }
.director__photo-frame {
  aspect-ratio: 4 / 5;
  width: 100%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}
.director__photo-frame:hover { filter: grayscale(0%); }
.director__corner {
  position: absolute;
  width: 96px;
  height: 96px;
  border-color: var(--color-gold);
  opacity: 0.4;
}
.director__corner--tr { top: -16px; right: -16px; border-top: 1px solid; border-right: 1px solid; }
.director__corner--bl { bottom: -16px; left: -16px; border-bottom: 1px solid; border-left: 1px solid; }

/* ---- CTA ---- */
.about-cta {
  padding-block: var(--space-section);
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
}
.about-cta__inner { max-width: 48rem; margin-inline: auto; }
.about-cta h2 { color: var(--color-white); margin-bottom: var(--space-gutter); }
.about-cta p { color: var(--color-on-navy-muted); margin-bottom: var(--space-gutter); }
.about-cta__actions { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (min-width: 640px) {
  .about-cta__actions { flex-direction: row; }
}