/* ===== Skeleton Base ===== */.content-hidden{ display:none !important; opacity:0; }
.content-reveal{ display:block !important; animation: fadeIn .35s ease forwards; }
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

  body {
    margin: 0;
    background: #f5f6f7;
    font-family: 'Inter', system-ui, sans-serif !important;
    color: #111827;
  }

  /* ---------------- HERO SECTION ---------------- */
  .hero {
    background: linear-gradient(135deg, #551fbd 0%, #3e1492 60%, #69e4f5 100%);
    color: white;
    padding: 60px 0 40px;
    text-align: center;
  }

  .hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  /* Highlighted word */
  .custom2 {
    color: #69e4f5;
    /* sub colour */
  }

  .contact-intro {
    padding: 60px 0 40px;
    text-align: center;
  }

  .contact-intro h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .custom1 {
    color: #010609;
  }

  .contact-intro p {
    font-size: 18px;
    color: #7f8c8d;
    max-width: 800px;
    margin: 0 auto;
  }

  .divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #69e4f5, transparent);
    margin: 40px auto;
    max-width: 200px;
  }

  /* ---------------- PAGE CONTENT BOX ---------------- */
  main.page-main {
    padding: 24px 16px 40px;
  }

  .page-shell {
    max-width: 1100px;
    margin: 24px auto 0;
  }

  .page-box {
    position: relative;
    padding: 28px 32px 30px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
  }

  /* Top coloured strip */
  .page-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: #551fbd;
    border-radius: 24px 24px 0 0;
  }

  .page-box h1 {
    margin-top: 8px;
    margin-bottom: 16px;
    color: #551fbd;
    /* replaced green */
    font-size: 28px;
  }

  .page-box h3 {
    margin-top: 28px;
    margin-bottom: 10px;
    color: #551fbd;
    /* replaced green */
    font-size: 20px;
  }

  .page-box p {
    line-height: 1.7;
    margin: 0 0 14px;
  }

  .page-box ul {
    margin: 4px 0 0 22px;
    padding: 0;
    line-height: 1.8;
  }

  .sign-wrapper {
    display: flex;
    justify-content: space-between;
    /* Name left, Profile right */
    align-items: flex-end;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
  }

  .sign-container {
    text-align: left;
    width: fit-content;
  }

  /* Chairman Profile Section - compact version for signing area */
  .chairman-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
  }

  .chairman-photo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #551fbd;
    box-shadow: 0 4px 10px rgba(85, 31, 189, 0.15);
  }

  .chairman-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .chairman-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    /* Keep internal info left aligned for readability */
  }

  .e-signature {
    width: 120px;
    height: auto;
    margin-bottom: -5px;
    opacity: 0.9;
  }

  .e-signature img {
    width: 100%;
    height: auto;
  }

  .linkedin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #0077b5;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .linkedin-link:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .sign-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
    }
  }

  /* --- Chairman Layout Adjustments --- */
  .chairman-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 20px 0;
  }

  .chairman-text-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
  }

  .chairman-text-side h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
  }

  .message-content p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
    margin-bottom: 20px !important;
    text-align: center;
  }

  .message-content a {
    color: #551fbd;
    text-decoration: none;
    font-weight: 700;
  }

  /* --- Signature Block --- */
  .sig-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
  }

  .sig-divider {
    width: 50px;
    height: 3px;
    background: #551fbd;
    margin-bottom: 40px;
    /* was 50, slightly tighter */
  }

  /* layout: photo + info aligned by height */
  .sig-flex-container {
    display: flex;
    align-items: center;
    /* ✅ centers info with photo */
    justify-content: center;
    gap: 22px;
    text-align: left;
  }

  /* photo size (smaller, clean) */
  .chairman-circular-img-small {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .10);
    margin-top: 10px;
    /* ✅ push image DOWN */
    flex: 0 0 84px;
  }


  .chairman-circular-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* right side info must stay within photo height */
  .sig-info-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ✅ vertical center */
    min-height: 84px;
    /* ✅ same as photo height */
  }

  /* signature row: big sign + line */
  .sig-sign-row {
    position: relative;
    height: 58px;
    /* ✅ reserve space for big e-sign */
    margin-bottom: 2px;
    /* ✅ keep tight so role stays within height */
  }

  .e-signature-overlay {
    position: absolute;
    top: -10px;
    left: 0;
    height: 58px;
    /* ✅ BIG sign */
    width: auto;
    opacity: .95;
    pointer-events: none;
    transform: rotate(-3deg);
    filter: contrast(170%) saturate(0);
  }

  .sig-line {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 240px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
  }

  /* name + role */
  .sig-name {
    font-size: 22px;
    /* ✅ bigger name */
    font-weight: 900;
    color: #111827;
    margin: 0;
    line-height: 1.1;
  }

  .sig-pos {
    font-size: 11px;
    /* ✅ smaller so it stays inside image height */
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 2px 0 0 0;
    /* ✅ reduce gap */
  }

  /* Mobile */
  @media (max-width:600px) {
    .sig-flex-container {
      flex-direction: column;
      text-align: center;
      gap: 14px;
    }

    .sig-info-side {
      min-height: auto;
      align-items: center;
      text-align: center;
    }

    .sig-line {
      width: 220px;
      left: 50%;
      transform: translateX(-50%);
    }

    .e-signature-overlay {
      left: 50%;
      transform: translateX(-50%) rotate(-3deg);
    }
  }
  /* --- Signature Block (clean layout) --- */
.sig-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:28px;
}

/* TOP: signature + line */
.sig-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-bottom:-8px;
}

.sig-sign{
  height:72px;           /* ✅ BIG signature */
  width:auto;
  opacity:.95;
  filter: contrast(170%) saturate(0);
}

.sig-line{
  width:320px;           /* ✅ line width */
  height:2px;
  background:#e5e7eb;
  border-radius:2px;
  margin-top:8px;
}

/* BOTTOM: photo + text row */
.sig-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:left;
}

/* photo moved DOWN (under the line) */
.sig-photo{
  width:84px;
  height:84px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transform: translateY(2px);   /* ✅ move photo down under line */
  flex:0 0 84px;
}

.sig-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* text */
.sig-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.sig-name{
  font-size:28px;        /* ✅ BIG name */
  font-weight:900;
  color:#111827;
  line-height:1.1;
  margin:0;
}

.sig-role{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.10em;
}

/* Mobile */
@media (max-width:600px){
  .sig-line{ width:240px; }

  .sig-bottom{
    flex-direction:column;
    text-align:center;
    gap:12px;
  }

  .sig-photo{
    transform: translateY(6px);
  }

  .sig-text{
    align-items:center;
  }
  .sig-bottom{
  flex-direction: column;
}

.sig-photo{
  order: 2;   /* image goes LAST */
}

.sig-text{
  order: 1;   /* name + role go FIRST */
}

}

/* ===== Signature Skeleton ===== */
.skeleton-sig-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:28px;
}

.skeleton-sign{
  height:72px;
  width:220px;
  border-radius:10px;
  margin-bottom:10px;
}

.skeleton-line{
  height:2px;
  width:320px;
  border-radius:2px;
  margin-bottom:18px;
}

.skeleton-sig-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
}

.skeleton-avatar{
  width:84px;
  height:84px;
  border-radius:50%;
}

.skeleton-name{
  height:26px;
  width:200px;
  border-radius:8px;
  margin-bottom:10px;
}

.skeleton-role{
  height:14px;
  width:230px;
  border-radius:6px;
}

/* Mobile skeleton */
@media (max-width:600px){
  .skeleton-line{ width:240px; }

  .skeleton-sig-bottom{
    flex-direction:column;
    gap:12px;
  }

  .skeleton-name{ width:220px; }
  .skeleton-role{ width:240px; }
}