:root{
      --wrap: 1180px;
      --heroH: 450px;

      /* CARD sizing similar to screenshot */
      --cardPad: 24px;      /* WHITE GAP around image */
      --imgH: 295px;        /* image height like template */
      --gap: 80px;          /* gap between cards */

      --shadow: 0 18px 45px rgba(0,0,0,.20);
    }

    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#fff;
      color:#111;
    }
    .container{
      width:min(var(--wrap), 92vw);
      margin:0 auto;
    }

    /* ===== HERO (optional, keep if you want) ===== */
    .hero{
      position: relative;
      height: var(--heroH);
      overflow:hidden;
      background:#000;
      perspective: 1200px;
    }
    .hero__bg{
      position:absolute;
      inset:0;
      background:
        linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)),
        url(""); /* replace */
      background-size: cover;
      background-position: center;

      transform-origin: top;
      transform: rotateX(-90deg);
      opacity:0;
      will-change: transform, opacity;
    }
    .hero--reveal .hero__bg{
      animation: heroFlip .95s cubic-bezier(.2,.9,.2,1) forwards;
    }
    @keyframes heroFlip{
      0% { transform: rotateX(-90deg); opacity:0; }
      60% { opacity:1; }
      100% { transform: rotateX(0); opacity:1; }
    }
    .hero__content{
      position:relative;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding: 12px 18px;
      z-index:2;
    }
    .hero__title{
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      font-weight:700;
      font-size: clamp(34px, 5vw, 70px);
      color:#fff;
      margin:0 0 12px;
      text-shadow: 0 14px 35px rgba(0,0,0,.45);
    }
    .hero__subtitle{
      margin:0 auto;
      max-width: 860px;
      color: rgba(255,255,255,.90);
      font-size: clamp(14px, 2vw, 18px);
      line-height: 1.7;
      text-shadow: 0 10px 26px rgba(0,0,0,.35);
    }

    /* ===== TEAM SECTION ===== */
    .team-wrap{
      position: relative;
      margin-top: -120px; /* overlap */
      z-index: 5;
      padding-bottom: 70px;
    }

    .team-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      align-items: start;
    }

    /* ===== CARD: EXACT WHITE GAP AROUND IMAGE ===== */
    .team-card{
      background:#fff;
      box-shadow: var(--shadow);
      border-radius: 2px;
      padding: var(--cardPad); /* THIS CREATES IMAGE-TO-CARD GAP */
      text-align:center;
    }

    /* Center card slightly higher like template */
    .team-card.center{ transform: translateY(-18px); }
    .team-card.center:hover{ transform: translateY(-24px); }

    .team-card img{
      width: 100%;
      height: var(--imgH);
      object-fit: cover;
      display:block;
      margin: 0 auto;
      border-radius: 1px;
    }

    .name{
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      font-size: 28px;
      font-weight: 700;
      margin: 26px 0 8px;
      color:#11104D;
      letter-spacing: .2px;
    }

    .role{
      font-size: 18px;
      font-style: italic;
      margin: 0 0 18px;
      color:#11104D;
    }

    .social{
      display:flex;
      justify-content:center;
      gap: 18px;
      padding-top: 2px;
     
    }

    .social a{
      width: 40px;
      height: 40px;
      display:grid;
      place-items:center;
      border-radius: 999px;
      color:#111;
      text-decoration:none;
      transition: transform .2s ease, background .2s ease;
       background: #0022FF;
    }

    .social a:hover{
      transform: translateY(-2px);
      background-color: #11104D;
      color: #fff;
    }

    /* ===== REVEAL ANIMS ===== */
    .reveal{ opacity:0; will-change: transform, opacity; }
    .from-bottom{ transform: translateY(70px); }
    .from-top{ transform: translateY(-70px); }
    .in-view{
      opacity:1;
      transform: translateY(0);
      transition: transform .85s cubic-bezier(.2,.9,.2,1), opacity .85s ease;
    }
    .d1{ transition-delay:.10s; }
    .d2{ transition-delay:.22s; }
    .d3{ transition-delay:.10s; }

    /* Responsive */
    @media (max-width: 980px){
      :root{ --heroH: 480px; --cardPad: 34px; --imgH: 280px; --gap: 18px; }
      .team-grid{ grid-template-columns: 1fr; }
      .team-wrap{ margin-top: -85px; }
      .team-card.center{ transform:none; }
    }