/* ===== Services: full-bleed panels that tilt back in 3D as they enter and leave (from reference travel 7.mp4) ===== */
.sv{position:relative;background:var(--bg,var(--card));color:var(--text,#111);padding:0 0 clamp(64px,10vh,120px);overflow:hidden}
/* thin header row, as in the reference's "(2) [ABOUT] ◆" divider */
.sv-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:0 clamp(16px,2vw,28px);padding:10px 0 0;border-top:1px solid var(--line-2,rgba(0,0,0,.14));font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.sv-head span:last-child{justify-self:end}
.sv-head h2{margin:0;font:inherit}
.sv-lede{max-width:520px;margin:clamp(56px,10vh,110px) auto clamp(40px,8vh,90px);padding:0 20px;text-align:center;font-size:15px;line-height:1.55;color:var(--mute,#5f5f66)}

/* panel stack: each panel is one viewport tall; the tilt is driven by scroll position in services.js */
.sv-stack{perspective:1600px;perspective-origin:50% 50%}
.sv-p{position:relative;height:60vh;height:60svh;min-height:320px;width:60%;margin:0 auto 9vh;border-radius:14px;overflow:hidden;background:#141414;color:#fff;
  transform:translate3d(0,0,0) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1));transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.sv-p:last-child{margin-bottom:0}
.sv-p video,.sv-p .sv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.55));pointer-events:none}
.sv-p.no-media{height:64vh;height:64svh;min-height:420px;background:radial-gradient(120% 90% at 30% 20%,#2a2a2e,#0f0f11 70%)}
.sv-p.no-media::after{display:none}

/* title: first letter in blackletter, the rest in a sans, each letter rises out of a mask */
.sv-copy{position:absolute;z-index:2;left:var(--tx,12%);right:6%;top:42%;transform:translateY(var(--ty,0px));will-change:transform}
.sv-copy{background:#000;padding:clamp(14px,2vh,22px) clamp(16px,1.6vw,26px);margin:calc(-1 * clamp(14px,2vh,22px)) calc(-1 * clamp(16px,1.6vw,26px));border-radius:16px}   /* Ruksana 7 Nov: a solid black panel behind the card text so it is always readable; the negative margin keeps the text where it was */
.sv-t{margin:0;font-weight:600;font-size:clamp(30px,4.3vw,84px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.sv-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .06em;margin:-.04em -.02em -.06em}
.sv-c{display:inline-block;transform:translateY(112%);transition:transform .8s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i) * 28ms)}
.sv-c.bl{font-family:"UnifrakturCook",serif;font-weight:700;letter-spacing:0;text-transform:none;font-size:1.06em;line-height:.8}
.sv-p.in .sv-c{transform:none}
.sv-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;margin-top:clamp(14px,2vh,22px);max-width:560px;opacity:0;transform:translateY(12px);transition:opacity .6s ease .35s,transform .6s ease .35s}
.sv-p.in .sv-meta{opacity:1;transform:none}
.sv-meta p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);flex:1 1 300px}
.sv-meta a{color:#fff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.sv-meta a::before{content:"\25C6";font-size:8px;margin-right:8px;vertical-align:2px}
.sv-meta a:hover{border-color:#fff}
.sv-tag{position:absolute;z-index:2;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,22px);font-size:11px;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.sv-need{display:inline-block;margin-bottom:14px;font-style:normal;font-size:11px;color:#d6d6d6;border:1px dashed rgba(214,214,214,.5);padding:2px 8px;border-radius:6px}
.sv-num{position:absolute;z-index:2;left:clamp(16px,2vw,28px);top:clamp(14px,2vw,22px);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.8)}

/* closing link, as in the reference's "◆ SEE SELECTED WORK" */
.sv-more{display:block;width:max-content;margin:clamp(48px,9vh,96px) auto 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text,#111);text-decoration:none}
.sv-more::before{content:"\25C6";font-size:8px;margin-right:8px;vertical-align:2px}
.sv-more:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:760px){
  .sv-p{height:50vh;height:50svh;min-height:300px;width:88%;margin-bottom:6vh}
  .sv-copy{left:20px!important;right:20px;top:auto;bottom:clamp(22px,5vh,40px)}
  .sv-t{font-size:clamp(26px,8vw,40px)}
  .sv-meta p{font-size:14px}
  .sv-head{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .sv-p{transform:none!important}
  .sv-copy{transform:none!important}
  .sv-c,.sv-meta{transition:none;transform:none;opacity:1}
}