/* ─── SHARED PAGE STYLES ─────────────────────────── */

/* Eyebrow label (used across multiple pages) */
.eye {
  font-size: 10px; font-weight: 700; color: var(--beige);
  letter-spacing: 3px; text-transform: uppercase;
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
}
.eye::before { content: ''; display: block; width: 30px; height: 2px; background: var(--beige); }

/* Section heading (used across multiple pages) */
.sh2 {
  font-size: clamp(34px, 4vw, 58px); font-weight: 900;
  color: var(--dark); letter-spacing: -1.5px; line-height: 1.02; margin-bottom: 68px;
}
.sh2 .dm { color: var(--charcoal); }

/* Page hero banner */
.phero {
  background: var(--dark); padding: 136px 56px 84px;
  position: relative; overflow: hidden;
}
.phero::after {
  content: attr(data-w); position: absolute; right: -15px; bottom: -55px;
  font-size: 190px; font-weight: 900; color: rgba(255, 255, 255, 0.016);
  letter-spacing: -5px; text-transform: uppercase; line-height: 1; pointer-events: none;
}
.phero h1 {
  font-size: clamp(36px, 5vw, 70px); font-weight: 900; color: #F5F5F5;
  letter-spacing: -2px; line-height: 1; margin-bottom: 22px; max-width: 680px;
}
.phero p {
  font-size: 14.5px; color: rgba(255, 255, 255, 0.4);
  line-height: 1.82; max-width: 540px; font-weight: 400;
}

/* Overlay page base */
.ovp {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--white); overflow-y: auto;
  opacity: 0; pointer-events: none; transform: translateY(28px);
  transition: opacity .38s, transform .38s;
}
.ovp.open { opacity: 1; pointer-events: all; transform: translateY(0); }