/* Soft in-place zoom. Hover changes scale, never vertical position. */
:root{--hover-shadow:0 4px 10px rgba(103,39,68,.09),0 10px 26px rgba(103,39,68,.16);--zoom-ease:cubic-bezier(.22,1,.36,1)}
.button{transform:scale(1);transform-origin:center;transition:transform .52s var(--zoom-ease),box-shadow .52s var(--zoom-ease),background-color .3s ease,border-color .3s ease}
@media(hover:hover) and (pointer:fine){
 .button:hover:not(:disabled){transform:scale(1.025);box-shadow:var(--hover-shadow)}
}
.button:disabled,.button:disabled:hover{transform:none;box-shadow:none}
.sampleRibbon .ribbonSample,.sampleRibbon .ribbonSample:nth-child(even){transform:scale(1);transform-origin:center;transition:transform .65s var(--zoom-ease),box-shadow .65s var(--zoom-ease),border-color .45s ease}
.sampleRibbon .ribbonSample:hover,.sampleRibbon .ribbonSample:focus-within{transform:scale(1.035);z-index:3;box-shadow:var(--hover-shadow);border-color:#cb8fa8}
.sampleRibbon .ribbonViewport{padding-top:24px;padding-bottom:32px}
/* Unconnected samples are plain white, with one label and no underlying media. */
.sampleRibbon .pendingSample,.sampleRibbon .pendingSample:nth-child(even){background:#fff;cursor:default}
.pendingSample .youtubeSlotLabel{background:#fff;padding:20px;gap:0;color:var(--muted)}
.pendingSample .youtubeSlotLabel strong{font-size:18px;font-weight:550;letter-spacing:.04em}
/* Portfolio frames stay anchored; only the artwork gently zooms. */
.worksMain .portfolioCard,.worksMain .portfolioCard:hover,.worksMain .portfolioCard:focus-within{transform:none!important;box-shadow:none}
.worksMain .portfolioMedia{transition:box-shadow .65s var(--zoom-ease),background-color .4s ease}
.worksMain .portfolioMedia>img{transform:scale(1);transform-origin:center;transition:transform .7s var(--zoom-ease)}
.worksMain .portfolioMedia:hover,.worksMain .portfolioCard:focus-within .portfolioMedia{box-shadow:var(--hover-shadow)}
.worksMain .portfolioMedia:hover>img,.worksMain .portfolioCard:focus-within .portfolioMedia>img{transform:scale(1.035)}
/* 02 / COMMISSIONS: small navigation objects, never enclosing boxes. */
.commissionSection .sectionHead{margin-bottom:44px}
.commissionSection .services{gap:48px;margin-top:40px}
.commissionSection .service,.commissionSection .service:hover,.commissionSection .service:focus-within{transform:none!important;background:transparent;border:0;box-shadow:none;transition:none}
.commissionSection .service .number{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-height:44px}
.serviceMarker{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--pink);color:white;font-size:15px;font-weight:650;letter-spacing:0;font-variant-numeric:tabular-nums}
.serviceKind{font-size:14px;line-height:1.5;letter-spacing:.06em;color:var(--pink);font-weight:650;overflow-wrap:anywhere}
.commissionSection .service h3{font-size:24px;line-height:1.5;margin:0 0 20px;letter-spacing:-.025em;color:var(--ink)}
.commissionSection .price{position:relative;isolation:isolate;display:inline-block;width:fit-content;max-width:100%;font-size:34px;line-height:1.4;letter-spacing:-.035em;padding:0 3px;color:var(--ink)}
.commissionSection .price::after{content:'';position:absolute;left:0;right:0;height:11px;bottom:3px;background:#f6dce7;z-index:-1;border-radius:2px}
.commissionSection .priceMeta{margin:14px 0 24px;font-size:16px;color:var(--muted)}
.commissionSection .service p{font-size:17px;line-height:1.9;color:#54464f;margin:0 0 28px}
.commissionSection .service a{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:16px;font-weight:700;min-height:48px}
.commissionSection .services+.footnote{margin-top:36px;max-width:760px}
.commissionSection .scope{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.commissionSection .scope h3{font-size:23px;line-height:1.5;margin:0;position:relative;padding-left:20px}
.commissionSection .scope h3::before{content:'';position:absolute;width:5px;height:24px;top:5px;left:0;background:var(--pink);border-radius:2px}
.commissionSection .featureList li{padding-left:16px;line-height:1.85}
.commissionSection .featureList li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pink);left:0;top:12px}
@media(max-width:760px){
 .sampleRibbon .ribbonViewport{padding-block:20px 28px}
 .pendingSample .youtubeSlotLabel strong{font-size:17px}
 .commissionSection .sectionHead{margin-bottom:28px}
 .commissionSection .services{gap:44px;margin-top:32px}
 .commissionSection .service .number{margin-bottom:16px}
 .serviceMarker{width:36px;height:36px;font-size:14px}
 .serviceKind{font-size:14px}
 .commissionSection .service h3{font-size:23px;margin-bottom:16px}
 .commissionSection .price{font-size:32px}
 .commissionSection .price::after{height:10px}
 .commissionSection .priceMeta{margin:12px 0 20px}
 .commissionSection .service p{font-size:16px;margin-bottom:20px}
 .commissionSection .scope{margin-top:44px;padding-top:28px;gap:24px}
 .commissionSection .scope h3{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
 .button,.sampleRibbon .ribbonSample,.sampleRibbon .ribbonSample:nth-child(even),.worksMain .portfolioMedia,.worksMain .portfolioMedia>img{transition:none!important}
 .button:hover,.sampleRibbon .ribbonSample:hover,.sampleRibbon .ribbonSample:focus-within,.worksMain .portfolioMedia:hover>img,.worksMain .portfolioCard:focus-within .portfolioMedia>img{transform:none!important}
}
.worksMain .portfolioCard:hover .portfolioMedia{box-shadow:var(--hover-shadow)}