/* Match the service-page title rail while leaving room for the fixed guide. */
.v-experience-inner{max-width:calc(1680px - 2 * var(--page))}
.v-experience-copy .v-experience-detail{margin-top:26px;max-width:none;justify-self:start}
.v-experience-detail .v-external-demo{display:inline-flex;align-items:center;gap:12px}
.v-experience-detail .v-external-demo .ui-arrow{flex-shrink:0;width:18px;height:18px}
.v-selected-works{background:#f4f4f4;max-width:none;padding-inline:max(var(--page),calc((100% - 1680px) / 2 + var(--page)))}
.v-all-works{display:flex;align-items:center;gap:30px;width:max-content;max-width:100%;margin-top:32px;padding:12px 0;font-size:15px;font-weight:750}
.v-all-works .ui-arrow{flex-shrink:0}
.v-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 30px}
.v-case{min-width:0;display:flex;flex-direction:column}
.v-case>a{display:flex;flex:1;flex-direction:column;border-radius:12px}
.v-case-media{display:flex;align-items:center;justify-content:center;gap:4%;aspect-ratio:16/10;padding:18px;background:#e1ebe5;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden}
.v-case-media>img{width:28%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px #142d2522);transition:transform .35s var(--ease)}
.v-case-media>img:nth-child(2){transform:translateY(8px)}
.v-case-media>img:nth-child(3){transform:translateY(-5px)}
.v-case-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 14px;font-size:13px;font-weight:750;color:var(--green)}
.v-case h3{font-size:clamp(20px,1.65vw,26px);line-height:1.65;letter-spacing:-.045em;font-weight:900}
.v-case-title-line{display:block}
.v-case-phrase{display:inline-block}
.v-case p{margin-top:14px;font-size:14px;line-height:1.8}
.v-case-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 18px;margin-top:24px}
.v-case-detail{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:750}
.v-case-play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px 8px 9px;border:1px solid var(--ink);border-radius:99px;background:var(--mint);font-size:13px;font-weight:750;white-space:nowrap}
.v-case-play>svg{width:26px;height:26px;color:var(--green);flex-shrink:0}
.v-case-play:hover{background:white}
.v-case .ui-arrow{width:22px;height:22px;flex-shrink:0}
.v-case-modal-open{overflow:hidden}
.v-case-dialog{width:min(520px,calc(100% - 24px));max-height:calc(100svh - 24px);margin:auto;padding:0;border:1.5px solid var(--ink);border-radius:18px;background:white;color:var(--ink);box-shadow:0 24px 90px #0004;overflow:auto}
.v-case-dialog::backdrop{background:#142c26bd;backdrop-filter:blur(7px)}
.v-case-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.v-case-dialog-bar .v-eyebrow{font-size:10px;color:var(--green)}
.v-case-dialog-bar h2{font-size:16px;line-height:1.5;margin:4px 0 0}
.v-case-close{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--ink);border-radius:50%;padding:0;background:white}
.v-case-frame{display:flex;align-items:center;justify-content:center;background:#101412}
.v-case-frame iframe{display:block;border:0;flex:none;width:min(100%,calc(min(70svh,720px) * .5625));height:auto;aspect-ratio:9/16;background:#101412}
.v-case-dialog-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:14px 18px;font-size:12px;line-height:1.5}
.v-case-dialog-bottom a{display:inline-flex;align-items:center;gap:5px;min-height:32px;text-decoration:underline;text-underline-offset:4px}
.v-contact .s-contact-word{position:absolute;bottom:8px;left:50%;translate:-50% 0;font:900 17vw/.85 var(--font-site);white-space:nowrap;z-index:-1;color:#16161609;letter-spacing:-.06em;pointer-events:none}
@media(hover:hover){
 .v-case>a:hover .v-case-media>img{transform:translateY(-4px)}
 .v-case>a:hover h3,.v-all-works:hover{color:var(--green)}
}
@media(min-width:1101px){
 .v-experience-copy{grid-row:1;top:clamp(16px,calc(100svh - 660px),82px)}
 .v-experience-copy #experience-title,.v-experience-copy .v-experience-detail{margin-left:max(0px,calc(288px - var(--page)));width:clamp(260px,calc(100vw - 940px),400px)}
 .v-experience-detail>p{font-size:17px;line-height:1.95}
 .v-experience-detail>p br{display:none}
 .v-experience-inner .v-live-demo{grid-row:1}
}
@media(min-width:601px) and (max-width:1100px){
 .v-experience-inner .v-live-demo{grid-row:1}
}
@media(max-width:650px){
 .v-case-grid{grid-template-columns:1fr;gap:40px}
 .v-case h3{font-size:24px}
 .v-case p{font-size:13px}
 .v-all-works{font-size:14px;margin-top:24px}
 .v-case-media{padding:14px}
 .v-contact .s-contact-word{font-size:22vw;bottom:15px}
}
@media(max-width:600px){.v-experience-copy{align-self:stretch}}
@media(prefers-reduced-motion:reduce){.v-case-media>img{transition:none}}