/* ==========================================================================
   Shared across the five sub-pages (About, Clients, Contact, Locations,
   Services) only — identical in the original markup, but intentionally
   NOT shared with Home, whose .section rule differs (adds overflow:hidden)
   and which doesn't use the .page-hero pattern at all.
   ========================================================================== */
.section { padding: 80px 5%; }
.section-dark { background: var(--dark); }
.section-header { margin-bottom: 48px; }
.section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--grey);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-tag::before { content: ''; width: 24px; height: 1px; background: var(--grey); }
.section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -1px; line-height: 1.15; }
.section-subtitle { font-size: 17px; color: var(--grey-light); margin-top: 16px; max-width: 600px; line-height: 1.7; }

.page-hero-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--grey-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero-tag::before { content: ''; width: 30px; height: 1px; background: var(--grey-light); }
.page-hero-content { position: relative; z-index: 10; max-width: 800px; }
.page-hero-description { font-size: 18px; color: var(--grey-light); line-height: 1.7; max-width: 600px; }
/* NOTE: .page-hero (min-height/background image) and .page-hero-title
   (font-size clamp) are declared per-page below since they differ
   slightly page to page in the original design (Contact uses a smaller
   clamp max and a plain-color hero, no background photo). */

.cta-section { padding: 100px 5%; text-align: center; position: relative; }
.cta-title { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; }
.cta-subtitle { font-size: 17px; color: var(--grey-light); margin-bottom: 32px; }
.cta-buttons { display: flex; justify-content: center; gap: 16px; }

@media (max-width: 600px) {
  .cta-buttons { flex-direction: column; align-items: center; }
}