/* ============================================================
   RVK Digital — pages.css
   Shared styles for all inner pages (non-homepage).
   Depends on global.css being loaded first.
   ============================================================ */

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-work .page-header::before {
   background-image: linear-gradient(rgba(10,10,14,0.75), rgba(10,10,14,0.35)), url('../images/work-cover.webp');
}

.page-about .page-header::before {
   background-image: linear-gradient(rgba(10,10,14,0.75), rgba(10,10,14,0.75)), url('../images/about-cover.webp');
}
.page-services .page-header::before {
   background-image: linear-gradient(rgba(10,10,14,0.75), rgba(10,10,14,0.55)), url('../images/services-cover.webp');
}

.page-contact .page-header::before {
   background-image: linear-gradient(rgba(10,10,14,0.75), rgba(10,10,14,0.75)), url('../images/contact-cover.webp');
}


.page-header{
  background: var(--dark);
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8 ;
  pointer-events: none
  
}

/* .page-header::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 30%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.05;
  pointer-events: none;
} */
.page-header .container {
  position: relative;
  z-index: 1;
  padding-top: 6rem;
  padding-bottom: 5rem;
  width: 100%;
}
.page-header .eyebrow         { color: var(--salmon-light); }
.page-header .eyebrow::before { background: var(--salmon-light); }
.page-header h1     { color: var(--light); max-width: 780px; margin-bottom: 1.25rem; }
.page-header .lead  {
  font-size: 1.125rem;
  color: rgba(245,242,239,0.6);
  max-width: 580px;
  font-weight: 300;
  line-height: 1.8;
}

/* ── SECTION ALTERNATES ──────────────────────────────────── */
.section-dark {
  background: var(--dark);
}
.section-dark h2              { color: var(--light); }
.section-dark .section-intro  { color: rgba(245,242,239,0.45); }
.section-dark .eyebrow        { color: var(--salmon-light); }
.section-dark .eyebrow::before{ background: var(--salmon-light); }

.section-surface { background: var(--surface); }
.section-bg      { background: var(--bg); }
.section-tinted  { background: var(--surface-2); }
[data-theme="dark"] .section-tinted { background: var(--surface); }

/* ── CTA BAND (reused across all pages) ──────────────────── */
.cta-band {
  background: var(--dark-2);
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,133,106,0.09) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band .eyebrow         { justify-content: center; color: var(--salmon-light); position: relative; }
.cta-band .eyebrow::before { background: var(--salmon-light); }
.cta-band h2   { color: var(--light); max-width: 520px; margin: 0 auto 1.125rem; position: relative; }
.cta-band p    { color: rgba(245,242,239,0.42); max-width: 420px; margin: 0 auto 2.25rem; position: relative; font-size: 1rem; }
.cta-band .btn { position: relative; }
.cta-actions   { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }