/* container */
.services{ max-width:1400px; margin:0 auto; padding:6rem 4vw 8rem }

/* grid row */
.row{
    position:relative; display:grid; grid-template-columns:repeat(12,1fr);
    align-items:center; gap:0; margin:6rem 0;
}

/* image + card columns (right variant = image left, card right) */
.row__media{ grid-column:1 / span 8 }
.row__card { grid-column:7 / span 5 }

/* image styling */
.row__media img{
    display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:21/9;
}

/* card styling */
.row__card{
    background:#000; color:#fff; z-index:2;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 0 0 1px rgba(255,255,255,.06);
    padding:clamp(24px,3vw,40px);
}

/* start state (pushed outward) */
.row__media, .row__card{
    opacity:0; will-change:transform;
    transition:transform 700ms cubic-bezier(.22,.61,.36,1), opacity 480ms ease;
}

.row--right .row__media{ grid-column:1 / span 8; grid-row:1; transform:translateX(-6vw) }
.row--right .row__card { grid-column:7 / span 5; grid-row:1; transform:translate( 8vw,-1.2rem) }

.row--left  .row__media{ grid-column:5 / span 8; grid-row:1; transform:translateX( 6vw) }
.row--left  .row__card { grid-column:1 / span 5; grid-row:1; transform:translate(-8vw,-1.2rem) }

/* final (in-view) state */
.row.is-in .row__media{ opacity:1; transform:translateX(0) }
.row--right.is-in .row__card{ opacity:1; transform:translate(-1.2rem,-1.2rem) }
.row--left.is-in  .row__card{ opacity:1; transform:translate( 1.2rem,-1.2rem) }

/* typography + underline */
.row__card h3{
    font-family:"Playfair Display", Georgia, serif;
    font-weight:700; letter-spacing:.02em;
    font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin:0 0 12px;
}
.row__card p{ margin:0 0 18px; color:rgba(255,255,255,.82) }
.row__link{ position:relative; display:inline-block; padding-bottom:10px; color:#fff; text-decoration:none }
.row__link::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.28)
}

/* clickable image + title link */
.row__media{ text-decoration:none }
.row__titlelink{ color:inherit; text-decoration:none }
.row__titlelink:hover{ text-decoration:underline }

/* mobile stack */
@media (max-width:900px){
    .row{ margin:3rem 0 }
    .row__media, .row__card{ grid-column:1 / -1; transform:none }
    .row.is-in .row__card{ transform:none }
    .row__card{ margin-top:1rem }
}