/* ==========================================================================
   PAGE HEADER — Global enterprise inner-page banner
   Single reusable component · photo + gradient overlay · per-page image map
   ========================================================================== */

body.subpage {
  --ph-display: 'Manrope', sans-serif;
  --ph-sans: 'Inter', sans-serif;
  --ph-ui: 'Plus Jakarta Sans', 'Inter', sans-serif;

  /* Gradient stack (photo sits beneath via ::before) */
  --ph-gradient-radial: radial-gradient(circle at top right, rgba(47, 107, 255, 0.2), transparent 60%);
  --ph-gradient-linear: linear-gradient(
    135deg,
    rgba(10, 24, 48, 0.92) 0%,
    rgba(18, 45, 88, 0.88) 45%,
    rgba(10, 24, 48, 0.94) 100%
  );

  /* Typography & UI tokens */
  --ph-breadcrumb-link: rgba(255, 255, 255, 0.75);
  --ph-breadcrumb-sep: rgba(255, 255, 255, 0.45);
  --ph-breadcrumb-current: #ffffff;
  --ph-eyebrow: #59c9ff;
  --ph-title: #ffffff;
  --ph-desc: rgba(255, 255, 255, 0.88);
  --ph-badge-bg: rgba(255, 255, 255, 0.08);
  --ph-badge-border: rgba(255, 255, 255, 0.12);
  --ph-badge-text: #ffffff;
  --ph-badge-icon: #59c9ff;
  --ph-icon-bg: rgba(255, 255, 255, 0.08);
  --ph-icon-border: rgba(255, 255, 255, 0.12);
  --ph-icon-color: #59c9ff;
  --ph-icon-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  --ph-line: rgba(255, 255, 255, 0.1);

  /* Default background for future inner pages */
  --ph-photo: url('../images/opt/cloud_infra-1024w.jpg');
}

/* --------------------------------------------------------------------------
   Per-page background images
   Add a body class + --ph-photo override for any new inner page
   -------------------------------------------------------------------------- */

body.page-about {
  --ph-photo: url('../images/opt/stock--about-story-stock-1200w.jpg');
}

body.page-services {
  --ph-photo: url('../images/opt/digital_transformation-1024w.jpg');
}

body.page-cases {
  --ph-photo: url('../images/opt/stock--cases-hero-stock-1200w.jpg');
}

body.page-careers {
  --ph-photo: url('../images/opt/stock--careers-hero-stock-1200w.jpg');
}

body.page-contact {
  --ph-photo: url('../images/opt/stock--contact-office-stock-1200w.jpg');
}

body.page-svc-cloud {
  --ph-photo: url('../images/opt/stock--svc-cloud-hero-stock-1200w.jpg');
}

body.page-svc-cyber {
  --ph-photo: url('../images/opt/stock--svc-cyber-hero-stock-1200w.jpg');
}

body.page-svc-ai {
  --ph-photo: url('../images/opt/stock--svc-ai-hero-stock-1200w.jpg');
}

body.page-svc-staffing {
  --ph-photo: url('../images/opt/stock--svc-staffing-solve-stock-1200w.jpg');
}

body.page-svc-workforce {
  --ph-photo: url('../images/opt/generated--workforce-hero-1200w.jpg');
}

body.page-svc-managed {
  --ph-photo: url('../images/opt/stock--svc-managed-hero-stock-1200w.jpg');
}

body.page-svc-app {
  --ph-photo: url('../images/opt/stock--svc-app-hero-stock-1200w.jpg');
}

body.page-svc-data {
  --ph-photo: url('../images/opt/stock--svc-data-hero-stock-1200w.jpg');
}

body.page-svc-consulting {
  --ph-photo: url('../images/opt/stock--svc-consulting-hero-stock-1200w.jpg');
}

body.page-svc-integration {
  --ph-photo: url('../images/opt/stock--svc-integration-hero-stock-1200w.jpg');
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(280px, 32vh, 320px);
  padding: 120px 0 90px;
  background: #0a1830;
  color: var(--ph-title);
  border-bottom: 1px solid var(--ph-line);
}

.page-header,
.page-header .page-header-inner,
.page-header .page-header-content {
  color: var(--ph-title);
}

/* Background layers: photo → linear gradient → radial glow → grid/particles */
.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-header-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ph-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  transform-origin: center;
}

.page-header-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ph-gradient-radial), var(--ph-gradient-linear);
}

.page-header-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 8%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 8%, transparent 78%);
}

.page-header-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at top right, rgba(47, 107, 255, 0.12), transparent 55%);
  pointer-events: none;
}

.page-header-particle {
  position: absolute;
  z-index: 2;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(89, 201, 255, 0.55);
  opacity: 0.3;
  animation: ph-particle-drift 18s ease-in-out infinite alternate;
}

.page-header-particle--1 { top: 22%; left: 12%; animation-duration: 16s; }
.page-header-particle--2 { top: 58%; left: 78%; animation-duration: 22s; animation-delay: -4s; }
.page-header-particle--3 { top: 38%; left: 55%; animation-duration: 20s; animation-delay: -8s; opacity: 0.22; }

@keyframes ph-particle-drift {
  from { transform: translate3d(0, 0, 0); opacity: 0.18; }
  to { transform: translate3d(8px, -12px, 0); opacity: 0.42; }
}

.page-header-inner {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.page-header-breadcrumb,
.page-header .page-breadcrumb,
.page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin-bottom: 1rem;
  font-family: var(--ph-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

body.subpage .page-header-breadcrumb a,
body.subpage .page-header .page-breadcrumb a,
body.subpage .page-breadcrumb a {
  color: var(--ph-breadcrumb-link) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

body.subpage .page-header-breadcrumb a:hover,
body.subpage .page-header .page-breadcrumb a:hover,
body.subpage .page-breadcrumb a:hover {
  color: var(--ph-eyebrow) !important;
}

body.subpage .page-header-breadcrumb .sep,
body.subpage .page-header .page-breadcrumb .sep,
body.subpage .page-breadcrumb .sep {
  color: var(--ph-breadcrumb-sep) !important;
  user-select: none;
}

body.subpage .page-header-breadcrumb .current,
body.subpage .page-header .page-breadcrumb .current,
body.subpage .page-breadcrumb .current {
  color: var(--ph-breadcrumb-current) !important;
}

.page-header-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem 2rem;
  align-items: center;
}

.page-header-content {
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   Eyebrow, title, description
   -------------------------------------------------------------------------- */

body.subpage .page-header .page-header-label,
body.subpage .page-header .page-header-eyebrow,
body.subpage .page-header-label {
  display: block;
  font-family: var(--ph-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-eyebrow) !important;
  margin-bottom: 0.5rem;
}

body.subpage .page-header-title,
body.subpage .page-header h1.page-header-title,
body.subpage .page-header .page-header-title {
  font-family: var(--ph-display);
  font-weight: 800 !important;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ph-title) !important;
  -webkit-text-fill-color: var(--ph-title) !important;
  background: none !important;
  margin: 0 0 0.65rem;
}

body.subpage .page-header .page-header-desc,
body.subpage .page-header .page-header-description,
body.subpage .page-header-desc,
body.subpage .page-header-description {
  font-family: var(--ph-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ph-desc) !important;
  margin: 0 0 1rem;
  max-width: 650px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Badges (glass pills)
   -------------------------------------------------------------------------- */

.page-header-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.subpage .page-header .page-header-pills span,
body.subpage .page-header .page-header-badge,
body.subpage .page-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-family: var(--ph-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ph-badge-text) !important;
  background: var(--ph-badge-bg);
  border: 1px solid var(--ph-badge-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.subpage .page-header .page-header-pills i,
body.subpage .page-header .page-header-badge i,
body.subpage .page-header-badge i {
  color: var(--ph-badge-icon) !important;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Icon card
   -------------------------------------------------------------------------- */

.page-header-accent,
.page-header .page-header-icon,
.page-header-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--ph-icon-bg);
  border: 1px solid var(--ph-icon-border);
  box-shadow: var(--ph-icon-shadow);
  color: var(--ph-icon-color) !important;
  font-size: 1.55rem;
  flex-shrink: 0;
}

body.subpage .page-header-accent i,
body.subpage .page-header-icon i {
  color: var(--ph-icon-color) !important;
}

/* Block light-theme leaks inside the banner */
body.subpage .page-header h1,
body.subpage .page-header h2,
body.subpage .page-header h3,
body.subpage .page-header h4,
body.subpage .page-header h5,
body.subpage .page-header h6 {
  color: var(--ph-title) !important;
  -webkit-text-fill-color: unset;
}

body.subpage .page-header p,
body.subpage .page-header li,
body.subpage .page-header span:not(.sep) {
  color: inherit;
}

body.subpage .page-header .text-muted {
  color: var(--ph-desc) !important;
}

/* --------------------------------------------------------------------------
   Reveal animation hooks (page-header.js)
   -------------------------------------------------------------------------- */

.ph-reveal {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ph-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(12px);
}

.ph-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsive & accessibility
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .page-header {
    min-height: clamp(280px, 38vh, 320px);
    padding: 108px 0 72px;
  }

  .page-header-body {
    grid-template-columns: 1fr;
  }

  .page-header-accent,
  .page-header-icon {
    display: none;
  }

  body.subpage .page-header .page-header-desc,
  body.subpage .page-header .page-header-description,
  body.subpage .page-header-desc,
  body.subpage .page-header-description {
    -webkit-line-clamp: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header-particle {
    animation: none !important;
  }

  .ph-reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}