/**
 * SkillCertify Pro — Unified Page Header System
 * Phase FINAL-LOCAL-POLISH-1B
 * 
 * Provides unified design tokens and 7 canonical header variants:
 * 1. Marketing
 * 2. Directory
 * 3. Entity
 * 4. Content
 * 5. Outcome
 * 6. Workspace
 * 7. Minimal
 */

:root {
  /* Layout & Container */
  --scp-header-container-max: 1200px;
  --scp-header-container-pad: 24px;
  --scp-header-container-pad-mobile: 16px;

  /* Typography Scale */
  --scp-h1-marketing-d: clamp(2rem, 3.5vw + 0.5rem, 2.75rem); /* max 44px */
  --scp-h1-marketing-m: 1.75rem; /* 28px */
  
  --scp-h1-directory-d: 2rem; /* 32px */
  --scp-h1-directory-m: 1.5rem; /* 24px */
  
  --scp-h1-content-d: 1.75rem; /* 28px */
  --scp-h1-content-m: 1.375rem; /* 22px */
  
  --scp-h1-workspace-d: 1.5rem; /* 24px */
  --scp-h1-workspace-m: 1.25rem; /* 20px */

  /* Vertical Rhythm */
  --scp-header-pad-marketing-y: 56px;
  --scp-header-pad-marketing-m: 36px;
  
  --scp-header-pad-directory-y: 40px;
  --scp-header-pad-directory-m: 28px;
  
  --scp-header-pad-entity-y: 40px;
  --scp-header-pad-entity-m: 28px;
  
  --scp-header-pad-content-y: 32px;
  --scp-header-pad-content-m: 24px;
  
  --scp-header-pad-outcome-y: 32px;
  --scp-header-pad-outcome-m: 24px;
  
  --scp-header-pad-workspace-y: 24px;
  --scp-header-pad-workspace-m: 16px;
  
  --scp-header-pad-minimal-y: 16px;
  --scp-header-pad-minimal-m: 12px;

  /* Color Schemes */
  --scp-header-bg-navy: #0A192F;
  --scp-header-text-light: #F8FAFC;
  --scp-header-desc-muted-light: #94A3B8;
  --scp-header-border-navy: #1E293B;

  --scp-header-bg-neutral: #F8FAFC;
  --scp-header-text-dark: #0F172A;
  --scp-header-desc-muted-dark: #475569;
  --scp-header-border-neutral: #E2E8F0;

  /* Accent & Status */
  --scp-header-accent-blue: #2563EB;
  --scp-header-accent-sky: #38BDF8;
}

/* ==========================================================================
   1. Root Page Header & Shared Container
   ========================================================================== */
.scp-page-header {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.scp-page-header__container,
.scp-page-header .scp-directory-container,
.scp-page-header .scp-exam-container,
.scp-page-header .scp-hub-container,
.scp-page-header .scp-gw-container,
.scp-page-header .scp-brief-container,
.scp-page-header .scp-catalog-container {
  width: 100%;
  max-width: var(--scp-header-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--scp-header-container-pad);
  padding-right: var(--scp-header-container-pad);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .scp-page-header__container,
  .scp-page-header .scp-directory-container,
  .scp-page-header .scp-exam-container,
  .scp-page-header .scp-hub-container,
  .scp-page-header .scp-gw-container,
  .scp-page-header .scp-brief-container,
  .scp-page-header .scp-catalog-container {
    padding-left: var(--scp-header-container-pad-mobile);
    padding-right: var(--scp-header-container-pad-mobile);
  }
}

/* ==========================================================================
   2. Variants
   ========================================================================== */

/* Variant 1: Marketing (Homepage) */
.scp-page-header--marketing,
section.scp-hero {
  background-color: var(--scp-header-bg-navy);
  color: var(--scp-header-text-light);
  padding-top: var(--scp-header-pad-marketing-y);
  padding-bottom: var(--scp-header-pad-marketing-y);
  border-bottom: 1px solid var(--scp-header-border-navy);
}

@media (max-width: 768px) {
  .scp-page-header--marketing,
  section.scp-hero {
    padding-top: var(--scp-header-pad-marketing-m);
    padding-bottom: var(--scp-header-pad-marketing-m);
  }
}

/* Variant 2: Directory (Skills, Certifications, Questions) */
.scp-page-header--directory,
.scp-directory-intro,
.scp-exam-intro,
.sc-question-library-header-section {
  background-color: #0A192F !important;
  color: #F8FAFC !important;
  padding-top: var(--scp-header-pad-directory-y) !important; /* 40px */
  padding-bottom: var(--scp-header-pad-directory-y) !important; /* 40px */
  border-bottom: 1px solid var(--scp-header-border-navy) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .scp-page-header--directory,
  .scp-directory-intro,
  .scp-exam-intro,
  .sc-question-library-header-section {
    padding-top: var(--scp-header-pad-directory-m) !important; /* 28px */
    padding-bottom: var(--scp-header-pad-directory-m) !important; /* 28px */
  }
}

/* Variant 3: Entity (Skill Hub, Learning Index, Certification Gateway, Lesson) */
.scp-page-header--entity,
.scp-hub-hero,
.scp-gw-intro,
.scp-lesson-hero {
  background-color: var(--scp-header-bg-navy) !important;
  color: var(--scp-header-text-light) !important;
  padding-top: var(--scp-header-pad-entity-y) !important;
  padding-bottom: var(--scp-header-pad-entity-y) !important;
  border-bottom: 1px solid var(--scp-header-border-navy) !important;
}

@media (max-width: 768px) {
  .scp-page-header--entity,
  .scp-hub-hero,
  .scp-gw-intro,
  .scp-lesson-hero {
    padding-top: var(--scp-header-pad-entity-m) !important;
    padding-bottom: var(--scp-header-pad-entity-m) !important;
  }
}

/* Variant 4: Content (Single Practice Question, Assessment Brief) */
.scp-page-header--content,
.scp-brief-hero,
.scp-single-hero {
  background-color: var(--scp-header-bg-neutral) !important;
  color: var(--scp-header-text-dark) !important;
  padding-top: var(--scp-header-pad-content-y) !important;
  padding-bottom: var(--scp-header-pad-content-y) !important;
  border-bottom: 1px solid var(--scp-header-border-neutral) !important;
}

@media (max-width: 768px) {
  .scp-page-header--content,
  .scp-brief-hero,
  .scp-single-hero {
    padding-top: var(--scp-header-pad-content-m) !important;
    padding-bottom: var(--scp-header-pad-content-m) !important;
  }
}

/* Variant 5: Outcome (Results, Verify) */
.scp-page-header--outcome,
.sc-verify-header-section {
  background-color: var(--scp-header-bg-neutral) !important;
  color: var(--scp-header-text-dark) !important;
  padding-top: var(--scp-header-pad-outcome-y) !important;
  padding-bottom: var(--scp-header-pad-outcome-y) !important;
  border-bottom: 1px solid var(--scp-header-border-neutral) !important;
}

@media (max-width: 768px) {
  .scp-page-header--outcome,
  .sc-verify-header-section {
    padding-top: var(--scp-header-pad-outcome-m) !important;
    padding-bottom: var(--scp-header-pad-outcome-m) !important;
  }
}

/* Variant 6: Workspace (Account Tabs) */
.scp-page-header--workspace,
.scp-account-header {
  padding-top: var(--scp-header-pad-workspace-y);
  padding-bottom: var(--scp-header-pad-workspace-y);
}

@media (max-width: 768px) {
  .scp-page-header--workspace,
  .scp-account-header {
    padding-top: var(--scp-header-pad-workspace-m);
    padding-bottom: var(--scp-header-pad-workspace-m);
  }
}

/* Variant 7: Minimal / Transactional */
.scp-page-header--minimal {
  padding-top: var(--scp-header-pad-minimal-y);
  padding-bottom: var(--scp-header-pad-minimal-y);
}

/* ==========================================================================
   3. Unified Breadcrumb System
   ========================================================================== */
nav[aria-label="Breadcrumb"],
nav[aria-label="Breadcrumb navigation"],
nav[aria-label="Breadcrumbs"] {
  margin-bottom: 0.875rem;
}

.scp-page-header__breadcrumb,
.scp-breadcrumbs,
.scp-exam-breadcrumbs,
.scp-hub-breadcrumbs,
.scp-gw-breadcrumb,
.scp-brief-breadcrumbs,
.sc-breadcrumb-list,
.sc-verify-breadcrumb,
.scp-result-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 0 0.875rem 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  gap: 0.35rem !important;
}

/* Separator */
.scp-page-header__breadcrumb li + li::before,
.sc-breadcrumb-list li + li::before {
  content: "/" !important;
  margin-right: 0.35rem !important;
  opacity: 0.5 !important;
}

/* Dark Navy Header Breadcrumbs */
.scp-page-header--marketing .scp-page-header__breadcrumb,
.scp-page-header--directory .scp-page-header__breadcrumb,
.scp-page-header--entity .scp-page-header__breadcrumb,
.scp-directory-intro .scp-breadcrumbs,
.scp-exam-intro .scp-exam-breadcrumbs,
.scp-hub-hero .scp-hub-breadcrumbs,
.scp-gw-intro .scp-gw-breadcrumb,
.sc-question-library-header-section .scp-page-header__breadcrumb {
  color: var(--scp-header-desc-muted-light) !important;
}

.scp-page-header--marketing .scp-page-header__breadcrumb a,
.scp-page-header--directory .scp-page-header__breadcrumb a,
.scp-page-header--entity .scp-page-header__breadcrumb a,
.scp-directory-intro .scp-breadcrumbs a,
.scp-exam-intro .scp-exam-breadcrumbs a,
.scp-hub-hero .scp-hub-breadcrumbs a,
.scp-gw-intro .scp-gw-breadcrumb a,
.sc-question-library-header-section .scp-page-header__breadcrumb a {
  color: var(--scp-header-desc-muted-light) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.scp-page-header--marketing .scp-page-header__breadcrumb a:hover,
.scp-page-header--directory .scp-page-header__breadcrumb a:hover,
.scp-page-header--entity .scp-page-header__breadcrumb a:hover,
.scp-directory-intro .scp-breadcrumbs a:hover,
.scp-exam-intro .scp-exam-breadcrumbs a:hover,
.scp-hub-hero .scp-hub-breadcrumbs a:hover,
.scp-gw-intro .scp-gw-breadcrumb a:hover,
.sc-question-library-header-section .scp-page-header__breadcrumb a:hover {
  color: #FFFFFF !important;
}

.scp-page-header--marketing .scp-page-header__breadcrumb [aria-current="page"],
.scp-page-header--directory .scp-page-header__breadcrumb [aria-current="page"],
.scp-page-header--entity .scp-page-header__breadcrumb [aria-current="page"],
.scp-directory-intro .scp-breadcrumbs [aria-current="page"],
.scp-exam-intro .scp-exam-breadcrumbs [aria-current="page"],
.scp-hub-hero .scp-hub-breadcrumbs [aria-current="page"],
.scp-gw-intro .scp-gw-breadcrumb [aria-current="page"],
.sc-question-library-header-section .scp-page-header__breadcrumb [aria-current="page"] {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Light Neutral Header Breadcrumbs */
.scp-page-header--content .scp-page-header__breadcrumb,
.scp-page-header--outcome .scp-page-header__breadcrumb,
.scp-brief-hero .scp-brief-breadcrumbs,
.scp-single-hero .scp-breadcrumb-list,
.scp-single-hero .scp-page-header__breadcrumb,
.sc-verify-breadcrumb,
.scp-result-breadcrumb {
  color: var(--scp-header-desc-muted-dark) !important;
}

.scp-page-header--content .scp-page-header__breadcrumb a,
.scp-page-header--outcome .scp-page-header__breadcrumb a,
.scp-brief-hero .scp-brief-breadcrumbs a,
.scp-single-hero .scp-breadcrumb-list a,
.scp-single-hero .scp-page-header__breadcrumb a,
.sc-verify-breadcrumb a,
.scp-result-breadcrumb a {
  color: var(--scp-header-desc-muted-dark) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.scp-page-header--content .scp-page-header__breadcrumb a:hover,
.scp-page-header--outcome .scp-page-header__breadcrumb a:hover,
.scp-brief-hero .scp-brief-breadcrumbs a:hover,
.scp-single-hero .scp-breadcrumb-list a:hover,
.scp-single-hero .scp-page-header__breadcrumb a:hover,
.sc-verify-breadcrumb a:hover,
.scp-result-breadcrumb a:hover {
  color: var(--scp-header-accent-blue) !important;
}

.scp-page-header--content .scp-page-header__breadcrumb [aria-current="page"],
.scp-page-header--outcome .scp-page-header__breadcrumb [aria-current="page"],
.scp-brief-hero [aria-current="page"],
.scp-single-hero .active,
.scp-single-hero [aria-current="page"],
.sc-verify-breadcrumb [aria-current="page"],
.scp-result-breadcrumb [aria-current="page"] {
  color: var(--scp-header-text-dark) !important;
  font-weight: 600 !important;
}

/* Explicit button color protection inside headers */
.scp-page-header a.scp-btn-hero-primary,
.scp-page-header a.scp-hub-btn-primary,
.scp-page-header a.sc-hero-action-btn-primary,
.scp-page-header a.scp-btn-primary,
.scp-page-header a.sc-btn-primary,
.scp-page-header a.scp-btn-hero-practice {
  color: #FFFFFF !important;
}

.scp-page-header a.scp-btn-hero-secondary,
.scp-page-header a.scp-hub-btn-secondary,
.scp-page-header a.sc-hero-action-btn-secondary,
.scp-page-header a.scp-btn-hero-curriculum {
  color: #FFFFFF !important;
}

/* Mobile visual truncation on long ancestor labels without DOM truncation */
@media (max-width: 640px) {
  .scp-page-header__breadcrumb li:not(:last-child) a,
  .scp-breadcrumbs a,
  .scp-hub-breadcrumbs a,
  .scp-gw-breadcrumb a,
  .scp-brief-breadcrumbs a,
  .sc-breadcrumb-list li:not(:last-child) a {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}

/* ==========================================================================
   4. Unified Eyebrows
   ========================================================================== */
.scp-page-header__eyebrow,
.sc-section-kicker,
.sc-verify-eyebrow,
.scp-hero-eyebrow {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem !important;
}

.scp-page-header--marketing .scp-page-header__eyebrow,
.scp-page-header--directory .scp-page-header__eyebrow,
.scp-page-header--entity .scp-page-header__eyebrow,
.sc-question-library-header-section .scp-page-header__eyebrow {
  color: var(--scp-header-accent-sky) !important;
}

.scp-page-header--content .scp-page-header__eyebrow,
.scp-page-header--outcome .scp-page-header__eyebrow,
.sc-verify-eyebrow {
  color: var(--scp-header-accent-blue) !important;
}

/* ==========================================================================
   5. Unified Typography Scale (H1)
   ========================================================================== */
.scp-page-header__title {
  margin: 0 0 0.5rem 0 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Tier 1: Marketing */
.scp-page-header--marketing .scp-page-header__title,
.scp-hero-heading {
  font-size: var(--scp-h1-marketing-d) !important;
  line-height: 1.15 !important;
  color: var(--scp-header-text-light) !important;
}

@media (max-width: 768px) {
  .scp-page-header--marketing .scp-page-header__title,
  .scp-hero-heading {
    font-size: var(--scp-h1-marketing-m) !important;
  }
}

/* Tier 2: Directory & Entity */
.scp-page-header--directory .scp-page-header__title,
.scp-page-header--entity .scp-page-header__title,
.scp-intro-title,
.scp-exam-intro-title,
.sc-library-title,
.scp-hub-title,
.scp-gw-title,
.scp-lesson-title {
  font-size: var(--scp-h1-directory-d) !important;
  line-height: 1.25 !important;
  color: var(--scp-header-text-light) !important;
  margin: 0 0 0.5rem 0 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scp-page-header--directory .scp-page-header__title,
  .scp-page-header--entity .scp-page-header__title,
  .scp-intro-title,
  .scp-exam-intro-title,
  .sc-library-title,
  .scp-hub-title,
  .scp-gw-title,
  .scp-lesson-title {
    font-size: var(--scp-h1-directory-m) !important;
  }
}

/* Tier 3: Content & Outcome */
.scp-page-header--content .scp-page-header__title,
.scp-page-header--outcome .scp-page-header__title,
.scp-brief-title,
.sc-verify-title,
.scp-hero-title {
  font-size: var(--scp-h1-content-d) !important;
  line-height: 1.3 !important;
  color: var(--scp-header-text-dark) !important;
  margin: 0 0 0.5rem 0 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scp-page-header--content .scp-page-header__title,
  .scp-page-header--outcome .scp-page-header__title,
  .scp-brief-title,
  .scp-lesson-title,
  .sc-verify-title,
  .scp-hero-title {
    font-size: var(--scp-h1-content-m) !important;
  }
}

/* Tier 4: Workspace & Minimal */
.scp-page-header--workspace .scp-page-header__title,
.scp-page-header--minimal .scp-page-header__title,
.scp-account-header h1 {
  font-size: var(--scp-h1-workspace-d) !important;
  line-height: 1.35 !important;
  color: var(--scp-header-text-dark) !important;
  margin: 0 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .scp-page-header--workspace .scp-page-header__title,
  .scp-page-header--minimal .scp-page-header__title,
  .scp-account-header h1 {
    font-size: var(--scp-h1-workspace-m) !important;
  }
}

/* ==========================================================================
   6. Unified Description System
   ========================================================================== */
.scp-page-header__desc,
.scp-intro-copy,
.scp-exam-intro-copy,
.sc-library-desc,
.scp-hub-desc,
.scp-gw-copy,
.scp-brief-subtitle,
.sc-verify-desc,
.scp-hero-sub {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 720px !important;
  margin: 0 0 0.75rem 0 !important;
}

.scp-page-header--marketing .scp-page-header__desc,
.scp-page-header--directory .scp-page-header__desc,
.scp-page-header--entity .scp-page-header__desc,
.scp-intro-copy,
.scp-exam-intro-copy,
.sc-library-desc,
.scp-hub-desc,
.scp-gw-copy,
.scp-hero-sub {
  color: var(--scp-header-desc-muted-light) !important;
}

.scp-page-header--content .scp-page-header__desc,
.scp-page-header--outcome .scp-page-header__desc,
.scp-brief-subtitle,
.sc-verify-desc {
  color: var(--scp-header-desc-muted-dark) !important;
}

/* ==========================================================================
   7. Unified Actions Row (CTAs)
   ========================================================================== */
.scp-page-header__actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 1.25rem !important;
}

@media (max-width: 640px) {
  .scp-page-header__actions {
    gap: 10px !important;
  }
}

@media (max-width: 360px) {
  .scp-page-header__actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  .scp-page-header__actions > * {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   8. Unified Badges & Metadata Chips
   ========================================================================== */
.scp-page-header__badges {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
}

.scp-hub-domain-pill {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #93C5FD !important;
  background: rgba(37, 99, 235, 0.16) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.scp-page-header__meta,
.scp-intro-summary,
.scp-exam-intro-summary,
.scp-gw-cert-count,
.scp-brief-submeta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  margin-top: 0.75rem !important;
}

.scp-page-header--directory .scp-page-header__meta,
.scp-page-header--entity .scp-page-header__meta,
.scp-intro-summary,
.scp-exam-intro-summary,
.scp-gw-cert-count {
  color: var(--scp-header-desc-muted-light) !important;
}

.scp-page-header--content .scp-page-header__meta,
.scp-page-header--outcome .scp-page-header__meta,
.scp-brief-submeta {
  color: var(--scp-header-desc-muted-dark) !important;
}

/* ==========================================================================
   9. Question Directory Fix (P0: Decouple Hero from Filter Catalog)
   ========================================================================== */
.sc-question-library-header-section {
  width: 100% !important;
  background-color: #0A192F !important;
  color: var(--scp-header-text-light) !important;
  box-sizing: border-box !important;
}

.sc-question-library-content-area {
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

/* ==========================================================================
   10. Strict Directory Header Contract (Exact Shared Geometry & Full Bleed)
   Applies to /skills/, /exam/, and /question/
   ========================================================================== */
.scp-page-header--directory,
.scp-directory-intro,
.scp-exam-intro,
.sc-question-library-header-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  background-color: #0A192F !important;
  box-sizing: border-box !important;
}

.scp-skills-directory-main,
.scp-exam-directory-main,
.sc-question-library {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.scp-page-header--directory .scp-page-header__container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

@media (max-width: 640px) {
  .scp-page-header--directory .scp-page-header__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.scp-page-header--directory nav[aria-label="Breadcrumb"] {
  margin: 0 !important;
  padding: 0 !important;
}

.scp-page-header--directory .scp-page-header__breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  list-style: none !important;
  color: #94A3B8 !important;
}

@media (max-width: 640px) {
  .scp-page-header--directory .scp-page-header__breadcrumb {
    margin: 0 0 10px 0 !important;
  }
}

.scp-page-header--directory .scp-page-header__breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

.scp-page-header--directory .scp-page-header__breadcrumb a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.scp-page-header--directory .scp-page-header__breadcrumb a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.scp-page-header--directory .scp-page-header__breadcrumb [aria-current="page"] {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.scp-page-header--directory .scp-page-header__title {
  font-size: 32px !important;
  line-height: 1.25 !important; /* exactly 40px height */
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

@media (max-width: 640px) {
  .scp-page-header--directory .scp-page-header__title {
    font-size: 24px !important;
    line-height: 1.25 !important; /* 30px height per line */
    min-height: 60px !important; /* 2 lines across all directory variants on mobile */
    margin: 0 0 10px 0 !important;
  }
}

.scp-page-header--directory .scp-page-header__desc {
  font-size: 16px !important;
  line-height: 1.6 !important; /* 25.6px per line */
  color: #94A3B8 !important;
  max-width: 720px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 52px !important; /* exactly 2 lines across all directory pages on desktop */
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .scp-page-header--directory .scp-page-header__desc {
    font-size: 15px !important;
    line-height: 1.5 !important;
    min-height: 68px !important; /* matches 3-line height on mobile */
  }
}

@media (max-width: 360px) {
  .scp-page-header--directory .scp-page-header__desc {
    min-height: 90px !important; /* matches 4-line height on ultra-mobile 320px */
  }
}