.feat-list {
   display: flex;
   flex-direction: column;
   gap: 70px
}

.feat-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center
}

.feat-row.rev .feat-media {
   order: 2
}

.feat-media {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   aspect-ratio: 5/3.8
}

.feat-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(.2, .8, .2, 1)
}

.feat-row:hover .feat-media img {
   transform: scale(1.05)
}

.feat-media .fnum {
   position: absolute;
   top: 20px;
   left: 20px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: 1.2rem;
   color: #3a2c08;
   background: var(--gold-grad);
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm)
}

.feat-copy .ficon {
   width: 58px;
   height: 58px;
   border-radius: 16px;
   background: var(--green-grad);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

.feat-copy .ficon i {
   font-size: 30px;
   color: var(--gold-300);
   line-height: 1
}

.feat-copy h3 {
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   color: var(--green-800);
   margin-bottom: 14px
}

.feat-copy>p {
   color: var(--muted);
   font-size: 1.04rem;
   margin-bottom: 18px
}

.feat-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 24px
}

.feat-tags span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: #fff;
   border: 1px solid rgba(18, 69, 42, .1);
   border-radius: 100px;
   padding: 8px 16px;
   font-weight: 600;
   font-size: .86rem;
   color: var(--green-800);
   box-shadow: var(--shadow-sm)
}

.feat-tags i {
   font-size: 13px;
   color: var(--green-600);
   line-height: 1
}


.qsvc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px
}

.qsvc {
   background: #fff;
   border-radius: var(--radius);
   padding: 34px 30px;
   box-shadow: var(--shadow-sm);
   border: 1px solid rgba(18, 69, 42, .06);
   transition: transform .4s, box-shadow .4s;
   position: relative;
   overflow: hidden
}

.qsvc::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--gold-grad);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s
}

.qsvc:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-md)
}

.qsvc:hover::before {
   transform: scaleX(1)
}

.qsvc .qic {
   width: 56px;
   height: 56px;
   border-radius: 15px;
   background: linear-gradient(135deg, rgba(47, 155, 92, .14), rgba(216, 180, 90, .2));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

.qsvc .qic i {
   font-size: 28px;
   color: var(--green-600);
   line-height: 1
}

.qsvc h4 {
   font-size: 1.24rem;
   color: var(--green-800);
   margin-bottom: 8px
}

.qsvc p {
   color: var(--muted);
   font-size: .94rem;
   margin-bottom: 16px
}

.qsvc a {
   font-weight: 700;
   font-size: .86rem;
   color: var(--gold-600);
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.qsvc a i {
   font-size: 16px;
   color: currentColor;
   transition: transform .3s;
   line-height: 1
}

.qsvc:hover a i {
   transform: translateX(5px)
}