/* Ritovex “Your Needs, Our Expertise” interaction, adapted to six website projects. */
.portfolio { isolation:isolate; background:#171717; }
.portfolio .eyebrow,.portfolio h2,.portfolio .lead,.work-list { position:relative; z-index:2; }
.work-list { max-width:1290px; margin:0 auto; text-align:left; }
.work-list a { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) 60px; column-gap:14px; align-items:start; margin:0; padding:32px 0 32px 24px; border-bottom:1px solid rgba(246,246,246,.2); color:#f6f6f6; text-decoration:none; transition:color .3s ease; }
.work-list a:last-child { border-bottom:0; }
.work-list .work-index { padding-top:12px; color:rgba(246,246,246,.6); font-size:16px; line-height:1.2; transition:color .3s ease; }
.work-list .work-meta { display:flex; min-width:0; flex-direction:column; font-size:inherit; }
.work-list .work-meta strong { color:#e8e8e8; font:400 48px/1.12 "DM Sans","Noto Sans SC",sans-serif; letter-spacing:-.02em; transition:color .3s ease; }
.work-list .work-meta small { width:100%; max-width:700px; max-height:0; padding-top:0; overflow:hidden; color:#fff; font:400 16px/1.55 "DM Sans","Noto Sans SC",sans-serif; opacity:0; transform:translateY(-8px); transition:max-height .46s cubic-bezier(.22,1,.36,1),padding-top .35s ease,opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1); }
.work-list i { display:flex; grid-column:3; grid-row:1; align-items:center; justify-content:center; width:60px; height:48px; margin:0; border:1px solid #666; border-radius:100px; font:400 22px/1 sans-serif; transform:none!important; transition:background-color .3s ease,border-color .3s ease,color .3s ease; }
.work-row-image { position:absolute; z-index:3; right:255px; bottom:-40px; display:block; width:263px; aspect-ratio:16/9; border-radius:16px; object-fit:cover; opacity:0; transform:rotate(11.92deg) scale(.82) translateY(14px); transform-origin:center; transition:opacity .25s ease,transform .48s cubic-bezier(.22,1,.36,1); pointer-events:none; box-shadow:0 24px 60px rgba(0,0,0,.42); }
.work-list a:hover { z-index:4; color:#fff; }
.work-list a:hover .work-index { color:#a0ef38; }
.work-list a:hover .work-meta strong { color:#fff; }
.work-list a:hover .work-meta small { max-height:130px; padding-top:16px; opacity:1; transform:translateY(0); }
.work-list a:hover i { border-color:#a0ef38; background:#a0ef38; color:#171717; transform:none!important; }
.work-list a:hover .work-row-image { opacity:1; transform:rotate(11.92deg) scale(1) translateY(0); }

@media(max-width:1199px){
  .work-list a { padding:24px 0 24px 10px; grid-template-columns:auto minmax(0,1fr) 48px; }
  .work-list .work-index { padding-top:8px; }
  .work-list .work-meta strong { font-size:38px; line-height:1.4; letter-spacing:-.005em; }
  .work-list i { width:48px; height:40px; }
  .work-row-image { right:96px; width:230px; }
}
@media(max-width:800px),(pointer:coarse){
  .work-row-image { display:none; }
  .work-list .work-meta strong { font-size:clamp(28px,8vw,38px); }
  .work-list .work-meta small { max-height:none; padding-top:10px; opacity:.7; transform:none; font-size:13px; }
}
@media(prefers-reduced-motion:reduce){.work-list *{transition:none!important}}