:root {
      --navy:   #0b1c3a;
      --gold:   #c9963a;
      --cream:  #f7f3ec;
      --muted:  #8a8f9d;
      --card-bg:#ffffff;
      --radius: 1.25rem;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--navy);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── HERO ── */
    .hero {
      position: relative;
      background: var(--navy);
      overflow: hidden;
      padding: 5rem 0 4rem;
      text-align: center;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 20% 50%, rgba(201,150,58,.18) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 50%, rgba(201,150,58,.12) 0%, transparent 70%);
    }
    .hero-badge {
      display: inline-block;
      background: rgba(201,150,58,.15);
      border: 1px solid rgba(201,150,58,.4);
      color: var(--gold);
      
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: .35rem 1rem;
      border-radius: 2rem;
      margin-bottom: 1.5rem;
    }
    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 6vw, 4rem);
      color: #fff;
      line-height: 1.1;
      margin-bottom: 1rem;
    }
    .hero h1 span { color: var(--gold); }
    .hero p {
      color: rgba(255,255,255,.6);
      
      max-width: 520px;
      margin: 0 auto 2.5rem;
    }
    .hero-stats {
      display: flex;
      justify-content: center;
      gap: 3rem;
      flex-wrap: wrap;
    }
    .hero-stat strong {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      color: var(--gold);
    }
    .hero-stat span {
      font-size: .8rem;
      color: rgba(255,255,255,.5);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* ── DIVIDER ── */
    .divider {
      height: 5px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      border: none;
      opacity: 1;
      margin: 0;
    }

    /* ── FILTER BAR ── */
    .filter-bar {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.06);
      position: sticky;
      top: 0;
      z-index: 100;
      padding: .75rem 0;
    }
    .filter-btn {
      background: none;
      border: 1.5px solid rgba(11,28,58,.15);
      color: var(--navy);
      border-radius: 2rem;
      padding: .4rem 1.1rem;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }
    .filter-btn:hover,
    .filter-btn.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }
    .search-wrap {
      position: relative;
      max-width: 260px;
    }
    .search-wrap i {
      position: absolute;
      left: .9rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: .9rem;
    }
    .search-input {
      border: 1.5px solid rgba(11,28,58,.15);
      border-radius: 2rem;
      padding: .42rem 1rem .42rem 2.3rem;
      font-size: .85rem;
      width: 100%;
      outline: none;
      transition: border-color .2s;
    }
    .search-input:focus { border-color: var(--gold); }

    /* ── SECTION TITLE ── */
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      color: var(--navy);
      margin-bottom: .25rem;
    }
    .section-sub {
      color: var(--muted);
      font-size: .9rem;
    }
    .gold-line {
      width: 48px;
      height: 3px;
      background: var(--gold);
      border-radius: 2px;
      margin: .6rem 0 0;
    }

    /* ── CARDS ── */
    .fac-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
      transition: transform .25s, box-shadow .25s;
      height: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(0,0,0,.04);
    }
    .fac-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(11,28,58,.12);
    }
    .fac-card-top {
      position: relative;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fac-card-top .icon-wrap {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.9rem;
      color: #fff;
      border: 2px solid rgba(255,255,255,.35);
      position: relative;
      z-index: 1;
    }
    .fac-card-top .num-badge {
      position: absolute;
      top: .8rem;
      right: .8rem;
      background: rgba(255,255,255,.18);
      color: rgba(255,255,255,.85);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .08em;
      padding: .2rem .55rem;
      border-radius: 1rem;
      border: 1px solid rgba(255,255,255,.3);
    }
    .fac-card-body {
      padding: 1.25rem 1.4rem 1.4rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .fac-card-body h3 {
      font-family: 'Playfair Display', serif;
      font-size: 16px;
      margin-bottom: .4rem;
      line-height: 1.3;
    }
    .fac-card-body p {
      color: var(--muted);
     
      line-height: 1.55;
      flex: 1;
      margin-bottom: 1rem;
    }
    .fac-meta {
      display: flex;
      gap: 1rem;
      font-size: .78rem;
      color: var(--muted);
      border-top: 1px solid rgba(0,0,0,.06);
      padding-top: .85rem;
    }
    .fac-meta span { display: flex; align-items: center; gap: .3rem; }
    .fac-meta i { font-size: .85rem; }
    .btn-detail {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      margin-top: .9rem;
      transition: color .2s;
    }
    .btn-detail:hover { color: var(--gold); }
    .btn-detail i { font-size: .75rem; transition: transform .2s; }
    .btn-detail:hover i { transform: translateX(3px); }

    /* ── GRADIENT PALETTES per faculty ── */
    .g1  { background: linear-gradient(135deg, #1a3a5c 0%, #2b6cb0 100%); }
    .g2  { background: linear-gradient(135deg, #1a5c3a 0%, #2bb06c 100%); }
    .g3  { background: linear-gradient(135deg, #5c1a1a 0%, #b02b2b 100%); }
    .g4  { background: linear-gradient(135deg, #3a1a5c 0%, #7b2bb0 100%); }
    .g5  { background: linear-gradient(135deg, #5c3a1a 0%, #b07b2b 100%); }
    .g6  { background: linear-gradient(135deg, #1a4a5c 0%, #2b8fb0 100%); }
    .g7  { background: linear-gradient(135deg, #1a5c4a 0%, #2bb09a 100%); }
    .g8  { background: linear-gradient(135deg, #4a1a5c 0%, #9b2bb0 100%); }

    /* ── HIDDEN CARD ── */
    .fac-card-wrap.hidden { display: none !important; }

    /* ── EMPTY MSG ── */
    #emptyMsg {
      display: none;
      text-align: center;
      padding: 3rem 0;
      color: var(--muted);
    }
    #emptyMsg i { font-size: 2.5rem; margin-bottom: .75rem; display: block; }

    /* ── FOOTER ── */
    footer {
      background: var(--navy);
      color: rgba(255,255,255,.5);
      font-size: .82rem;
      padding: 2rem 0;
      text-align: center;
      margin-top: 4rem;
    }
    footer strong { color: var(--gold); }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fac-card-wrap { animation: fadeUp .5s ease both; }
    .fac-card-wrap:nth-child(1) { animation-delay: .05s; }
    .fac-card-wrap:nth-child(2) { animation-delay: .10s; }
    .fac-card-wrap:nth-child(3) { animation-delay: .15s; }
    .fac-card-wrap:nth-child(4) { animation-delay: .20s; }
    .fac-card-wrap:nth-child(5) { animation-delay: .25s; }
    .fac-card-wrap:nth-child(6) { animation-delay: .30s; }
    .fac-card-wrap:nth-child(7) { animation-delay: .35s; }
    .fac-card-wrap:nth-child(8) { animation-delay: .40s; }