:root{
      --bg:#f6fbfa;
      --card-bg:linear-gradient(180deg,#f3f3f3,#e6e6e6);
      --accent:#666;
      --card-radius:18px;
      --inner-radius:12px;
      --gap:28px;
      --max-width:1100px;
    }
    *{box-sizing:border-box}
    body{
      margin-top: 0px;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(circle at 10% 10%, #fff, var(--bg));
      color:#222;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
    }

    .wrap{
      width:100%;
      max-width:var(--max-width);
      /* use flex so cards can respect min-width and wrap nicely */
      display:flex;
      gap:var(--gap);
      justify-content:center;
      align-items:flex-start;
      flex-wrap:wrap;
    }

    .card{
      /* background:var(--card-bg); */
      border-radius:var(--card-radius);
      padding:18px;
      position:relative;
      overflow:visible;
      /* ensure a readable card width on desktop */
      min-width:400px;
      width:100%;
      max-width:300px;
    }

   
    .topbar small{font-weight:400;color:#e6e6e6;opacity:0.9;margin-left:8px}

    .card-inner{
      /* background:linear-gradient(180deg, #ffffff, #efefef); */
      border-radius:var(--inner-radius);
      padding:18px;
      min-height:300px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }

    /* make the image area clickable */
    .card a.profile-link{
      display:block;
      text-decoration:none;
      color:inherit;
      text-align:center;
      width:100%;
    }

    .card .profile-img{
      max-width:100%;
      height:240px;
      object-fit:cover;
      border-radius:10px;
      transform:translateY(0);
      transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
      display:block;
      margin:0 auto;
    }

    /* .card a.profile-link:hover .profile-img{
      transform:translateY(-6px) scale(1.01);
      box-shadow:0 14px 30px rgba(10,20,30,0.18);
      filter:brightness(1.02);
    } */

    /* heading under image */
    .card .title-wrap{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .card a.title-link{
      display:inline-block;
      font-size:30px;
      font-weight:700;
      padding:10px 18px;
      border-radius:999px;
      background:transparent;
      color:#222;
      text-decoration:none;
      transition:transform .18s ease, background .18s ease, color .18s ease;
      cursor:pointer;
    }
    /* .card a.title-link:hover{
      transform:translateY(-3px);
      background:rgba(0,0,0,0.06);
    } */
.btn-wrap{
  text-align:center;
  margin-top:12px;
}

.cta-btn{
  display:inline-block;
  background:#b67044;
  color:#fff;
  padding:10px 24px;
  font-size:18px;
  font-weight:600;
  border-radius:30px;
  text-decoration:none;
  transition:0.25s ease;
}

.cta-btn:hover{
  transform:translateY(-3px);
  opacity:0.9;
}

    /* place both clickable: clicking image or heading will follow respective link */

    /* make layout responsive */
    @media (max-width:880px){
      .wrap{grid-template-columns:1fr;}
    }

    /* Responsive rules when viewport is narrower than the card min-width */
    @media (max-width:700px){
      .card{min-width:unset; max-width:520px; width:92%;border: 1px solid #582a08;}
      .card .profile-img{height:220px}
    }

    @media (max-width:480px){
      .card{min-width:unset; max-width:100%; width:96%; padding:14px}
      .card .profile-img{height:180px}
      .topbar{padding:10px 12px;margin:-6px -6px 10px -6px}
      .card a.title-link{font-size:18px;padding:8px 14px}
    }

    @media (max-width:360px){
      .card .profile-img{height:150px}
      .topbar{font-size:14px}
      .card a.title-link{font-size:16px}
    }
    
    .logo{
      width:100%;
      text-align:center;
      margin-bottom:40px;
    }
    .logo img{
      max-width:220px;
      height:auto;
    }
    /* small niceties */
    .credit{font-size:13px;color:#666;margin-top:18px;text-align:center}