:root {
      --bg: #f8f8f6;
      --card-bg: #ffffff;
      --text-heading: #111111;
      --text-muted: #7a7a7a;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
      --border-radius: 12px;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.15);
    }

    .electrical {
      background: var(--bg);
      font-family: Khmer OS Battambang;
      color: var(--text-heading);
      min-height: 100vh;
      padding: 56px 40px;
    }

    .electrical h1 {
      font-family: "Khmer OS Muol Light", sans-serif;
      font-weight: 700;
      color: var(--text-heading);
      margin-top: -36px;
      text-align: center;
    }

    /* ── Header ── */
    .page-header {
      text-align: center;
      margin-bottom: 10px;
      animation: fadeUp 0.6s ease both;
    }



    .page-header__sub {
      font-size: 0.95rem;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .page-header__divider {
      width: 48px;
      height: 3px;
      background: var(--accent);
      border-radius: 2px;
      margin: 10px auto 0;
    }

    /* ── Gallery Grid ── */
    .gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .gallery__item {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      cursor: pointer;
      animation: fadeUp 0.6s ease both;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .gallery__item:nth-child(1) {
      animation-delay: 0.05s;
    }

    .gallery__item:nth-child(2) {
      animation-delay: 0.1s;
    }

    .gallery__item:nth-child(3) {
      animation-delay: 0.15s;
    }

    .gallery__item:nth-child(4) {
      animation-delay: 0.2s;
    }

    .gallery__item:nth-child(5) {
      animation-delay: 0.25s;
    }

    .gallery__item:nth-child(6) {
      animation-delay: 0.3s;
    }

    .gallery__item:nth-child(7) {
      animation-delay: 0.35s;
    }

    .gallery__item:nth-child(8) {
      animation-delay: 0.4s;
    }

    .gallery__item:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
    }

    .gallery__image-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #e2e6ea;
    }

    .gallery__image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }

    .gallery__item:hover .gallery__image-wrap img {
      transform: scale(1.06);
    }

    /* Placeholder when no image */
    .gallery__placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #dde1e7, #c8cdd4);
      color: #9aa3ac;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
    }

    .gallery__overlay {
      position: absolute;
      inset: 0;
      background: rgba(37, 99, 235, 0);
      transition: background 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery__overlay-icon {
      opacity: 0;
      color: #fff;
      font-size: 2rem;
      transition: opacity 0.3s ease;
    }

    .gallery__item:hover .gallery__overlay {
      background: rgba(37, 99, 235, 0.25);
    }

    .gallery__item:hover .gallery__overlay-icon {
      opacity: 1;
    }

    .gallery__caption {
      padding: 10px 14px;
    }

    .gallery__caption-title {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-heading);
      margin-bottom: 1px;
    }

    .gallery__caption-date {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* ── Lightbox ── */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      z-index: 999;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox__img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 10px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      object-fit: contain;
    }

    .lightbox__close {
      position: fixed;
      top: 20px;
      right: 28px;
      background: none;
      border: none;
      color: #fff;
      font-size: 2.2rem;
      cursor: pointer;
      line-height: 1;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    .lightbox__close:hover {
      opacity: 1;
    }

    /* ── Animations ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .gallery {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 680px) {
      body {
        
      }

      .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .page-header__name {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 400px) {
      .gallery {
        grid-template-columns: 1fr;
      }
    }