.belong-section{
  position:relative;
  overflow:hidden;
  padding:52px 24px 72px;

  background:
    radial-gradient(circle at 50% -8%, rgba(255,226,150,.34), transparent 36%),
    radial-gradient(circle at 50% 42%, rgba(255,248,228,.72), transparent 48%),
    linear-gradient(180deg, #fffaf0 0%, #fdf4e5 28%, #f8eedb 68%, #f4e6cb 100%);

  border-top:1px solid rgba(255,248,232,.9);
}

.belong-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    radial-gradient(circle at 15% 25%, rgba(171,127,48,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 30%, rgba(171,127,48,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 70%, rgba(171,127,48,.15) 0 1px, transparent 1.8px);
  background-size:44px 44px, 60px 60px, 78px 78px;
}

.belong-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at center,
      transparent 48%,
      rgba(115,82,28,.045) 78%,
      rgba(72,51,18,.10) 100%
    );
}

.belong-inner{
  position:relative;
  z-index:2;
  width:min(1180px, 100%);
  margin:0 auto;
}

.belong-heading{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
}

.belong-heading span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  color:#a97819;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.belong-heading span::before,
.belong-heading span::after{
  content:"";
  width:54px;
  height:1px;
  background:rgba(169,120,25,.54);
}

.belong-heading h2{
  max-width:940px;
  margin:10px auto 12px;
  color:#0f3d2a;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.25rem, 4vw, 3.35rem);
  line-height:.96;
  letter-spacing:-.045em;
}

.belong-heading p{
  max-width:880px;
  margin:0 auto;
  color:#25392f;
  font-size:.98rem;
  line-height:1.6;
  font-weight:650;
}

.belong-grid{
  width:min(1080px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:26px;
}

.belong-card{
  position:relative;
  min-height:300px;
  padding:0 0 24px;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  border:1px solid rgba(131,93,28,.18);
  border-radius:8px;

  background:
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #fff7ea 45%,
      #fcf0da 100%
    );

  box-shadow:
    0 18px 36px rgba(65,45,18,.15),
    inset 0 1px 0 rgba(255,255,255,.62);

  cursor:pointer;
  text-align:center;
  color:#123c29;

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.belong-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform:translateX(-120%) skewX(-18deg);
  transition:transform .48s ease;
}

.belong-card:hover{
  transform:translateY(-6px);
  border-color:rgba(190,143,44,.55);
  box-shadow:
    0 28px 62px rgba(65,45,18,.22),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.belong-card:hover::after{
  transform:translateX(120%) skewX(-18deg);
}

.belong-image{
  height:124px;
  background-size:cover;
  background-position:center;
  background-color:#bfc0b0;
  transition:
    transform .45s ease,
    filter .45s ease;
}

.belong-card:hover .belong-image{
  transform:scale(1.035);
  filter:saturate(1.08) contrast(1.04);
}

.faith-img{
    background-image:url("/media/nc1.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.restoration-img{
  background-image:
    linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.18)),
    url("/media/restoration-card.jpg");
}

.service-img{
    background-image:url("/media/service1.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.refuge-img{
    background-image:url("/media/pizzanight.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.belong-icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  margin:-34px auto 18px;
  position:relative;
  z-index:2;

  border-radius:50%;
  background:#fff8e8;
  border:2px solid rgba(190,143,44,.56);

  box-shadow:
    0 12px 26px rgba(40,30,12,.18),
    inset 0 0 0 5px rgba(255,255,255,.45);

  font-size:1.46rem;

  transition:
    transform .24s ease,
    box-shadow .24s ease;
}

.belong-card:hover .belong-icon{
  transform:translateY(-3px);
  box-shadow:
    0 16px 32px rgba(40,30,12,.22),
    0 0 20px rgba(216,179,95,.28),
    inset 0 0 0 5px rgba(255,255,255,.5);
}

.belong-card h3{
  margin:0 18px 12px;
  font-family:"Cormorant Garamond", Georgia, serif;
  color:#123c29;
  font-size:1.72rem;
  line-height:1;
}

.belong-card p{
  max-width:210px;
  min-height:70px;
  margin:0 auto 18px;

  color:#263c31;
  font-size:.9rem;
  line-height:1.45;
  font-weight:650;
}

.belong-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  margin:auto auto 0;
  padding-top:4px;

  color:#123c29;

  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;

  transition:
    gap .22s ease,
    color .22s ease,
    transform .22s ease;
}

.belong-card:hover span{
  gap:22px;
  color:#9f741c;
  transform:translateY(-1px);
}

.belong-note{
  margin:24px 0 0;
  text-align:center;
  color:#8d681d;
  font-size:.84rem;
  font-weight:850;
}

@media(max-width:1000px){
  .belong-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:min(740px, 100%);
  }
}

@media(max-width:620px){
  .belong-section{
    padding:46px 18px 62px;
  }

  .belong-heading{
    margin-bottom:28px;
  }

  .belong-heading span::before,
  .belong-heading span::after{
    width:30px;
  }

  .belong-grid{
    grid-template-columns:1fr;
    width:min(360px, 100%);
  }

  .belong-card{
    min-height:292px;
  }
}