:root {
      --kpcc-maroon: #660000;
      --kpcc-gold: #c69c3d;
      --kpcc-red-dark: #58080e;
      --kpcc-black: #000000;
      --kpcc-bg-dark: #660000;
      --kpcc-white: #ffffff;
      --kpcc-nav-link: #660000;
      --kpcc-body-text: #ffffff;
       --brand-maroon: #7a0c18;
            --brand-maroon-dark: #580710;
            --brand-text-dark: #222222;
            --brand-bg-light: #fcf8f8;
            --card-border: #f0e6e6;
             --kpcc-border-color: #e5dada;
             --kpcc-bg-light: #faf7f7;
    }
    
    
    /* ─── Page Banner ─── */
.page-banner { background: var(--maroon-dark); position: relative; overflow: hidden; }
.page-banner::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 50%; background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.04), transparent 70%); }
.breadcrumb-item a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.82rem; }
.breadcrumb-item a:hover { color: #fff; }
.breadcrumb-item.active { color: rgba(255,255,255,0.85); font-size: 0.82rem; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35) !important; }
/* Header Section */
    .hero-header {
      background-color: var(--kpcc-maroon);
      color: #ffffff;
      padding: 3.5rem 0;
    }

    .hero-header h1 {
      font-weight: 700;
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
    }

    .hero-header p {
      font-size: 1.1rem;
      color: #e2d2d4;
      max-width: 650px;
    }
      /* Main Container Padding */
    .content-container {
      max-width: 900px;
    }