.sd-flex {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 60px;
   align-items: start
}

.sd-visual {
   position: sticky;
   top: 110px;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg)
}

.sd-visual img {
   width: 100%;
   aspect-ratio: 4/4.6;
   object-fit: cover
}

.sd-visual .sd-badge {
   position: absolute;
   left: 22px;
   bottom: 22px;
   background: rgba(7, 27, 16, .62);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 100px;
   padding: 11px 22px;
   color: #fff;
   font-weight: 700;
   font-size: .9rem;
   display: inline-flex;
   align-items: center;
   gap: 9px
}

.sd-visual .sd-badge svg {
   width: 16px;
   height: 16px;
   stroke: var(--gold-300);
   fill: none;
   stroke-width: 2
}

.sd-copy .eyebrow {
   margin-bottom: 16px
}

.sd-copy h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   color: var(--green-800);
   margin-bottom: 18px
}

.sd-copy h2 em {
   font-style: italic;
   color: var(--gold-600)
}

.sd-copy>p {
   color: var(--muted);
   font-size: 1.06rem;
   margin-bottom: 20px
}

.sd-copy .lead {
   font-size: 1.16rem;
   color: var(--green-800);
   font-weight: 500
}


.sd-benefits {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin: 30px 0 34px
}

.sd-benefit {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   background: var(--white);
   border: 1px solid rgba(18, 69, 42, .08);
   border-radius: var(--radius-sm);
   padding: 20px 22px;
   box-shadow: var(--shadow-sm);
   transition: transform .35s
}

.sd-benefit:hover {
   transform: translateY(-4px)
}

.sd-benefit .b-ic {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   border-radius: 12px;
   background: linear-gradient(135deg, rgba(47, 155, 92, .16), rgba(216, 180, 90, .22));
   display: flex;
   align-items: center;
   justify-content: center
}

.sd-benefit .b-ic svg {
   width: 22px;
   height: 22px;
   stroke: var(--green-600);
   fill: none;
   stroke-width: 2
}

.sd-benefit h4 {
   font-size: 1.02rem;
   color: var(--green-800);
   margin-bottom: 3px
}

.sd-benefit p {
   font-size: .88rem;
   color: var(--muted);
   margin: 0;
   line-height: 1.5
}


.sd-includes {
   background: var(--cream);
   border-radius: var(--radius);
   padding: 30px 32px;
   border: 1px solid rgba(18, 69, 42, .07)
}

.sd-includes h3 {
   font-size: 1.28rem;
   color: var(--green-800);
   margin-bottom: 18px
}

.sd-includes ul {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px 26px
}

.sd-includes li {
   display: flex;
   gap: 11px;
   align-items: flex-start;
   font-weight: 600;
   color: var(--green-800);
   font-size: .94rem
}

.sd-includes li svg {
   width: 18px;
   height: 18px;
   stroke: var(--green-600);
   fill: none;
   stroke-width: 2.6;
   flex-shrink: 0;
   margin-top: 2px
}

.sd-copy .btn-nv {
   margin-top: 32px
}


.sd-process {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   counter-reset: sdp
}

.sd-step {
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px 26px;
   border: 1px solid rgba(18, 69, 42, .06);
   box-shadow: var(--shadow-sm);
   position: relative;
   transition: transform .4s, box-shadow .4s
}

.sd-step:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.sd-step .sdp-num {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: var(--green-grad);
   color: var(--gold-300);
   font-family: var(--serif);
   font-weight: 700;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

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

.sd-step p {
   font-size: .92rem;
   color: var(--muted);
   margin: 0
}


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

.sd-rel-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1px solid rgba(18, 69, 42, .06);
   transition: transform .4s, box-shadow .4s;
   display: flex;
   flex-direction: column
}

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

.sd-rel-media {
   aspect-ratio: 16/10;
   overflow: hidden
}

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

.sd-rel-card:hover .sd-rel-media img {
   transform: scale(1.07)
}

.sd-rel-body {
   padding: 24px 26px 28px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.sd-rel-body h4 {
   font-size: 1.18rem;
   color: var(--green-800);
   margin-bottom: 8px
}

.sd-rel-body p {
   font-size: .92rem;
   color: var(--muted);
   margin: 0 0 18px
}

.sd-rel-body .sd-rel-link {
   margin-top: auto;
   font-weight: 700;
   font-size: .9rem;
   color: var(--green-700);
   display: inline-flex;
   align-items: center;
   gap: 7px
}

.sd-rel-body .sd-rel-link svg {
   width: 16px;
   height: 16px;
   stroke: var(--gold-500);
   fill: none;
   stroke-width: 2.4;
   transition: transform .3s
}

.sd-rel-card:hover .sd-rel-link svg {
   transform: translateX(4px)
}