/* MYOKO WORKS — Services page (load after home.css + about.css) */

.svc-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:96px;padding-top:128px;padding-bottom:128px}

/* Sticky index with scroll-spy */
.svc-index{position:sticky;top:128px;align-self:start;display:flex;gap:24px}
.svc-index__track{position:relative;width:1px;background:var(--border);flex:0 0 1px}
.svc-index__fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--primary);transform:scaleY(var(--svc-progress,0));transform-origin:top;transition:transform .5s var(--ease-cine)}
.svc-index ol{list-style:none;display:flex;flex-direction:column;gap:8px}
.svc-index a{display:flex;align-items:baseline;gap:16px;padding:12px 0;font-size:.72rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--text-50);transition:color .4s var(--ease),transform .6s var(--ease-cine)}
.svc-index a span{font-family:var(--serif);font-size:1.4rem;font-weight:300;letter-spacing:0;color:var(--text-35);transition:color .4s var(--ease)}
.svc-index a:hover{color:var(--text)}
.svc-index a.is-active{color:var(--text);transform:translateX(6px)}
.svc-index a.is-active span{color:var(--primary-light)}

/* Service blocks */
.svc{position:relative;padding:96px 0;border-bottom:1px solid var(--border);scroll-margin-top:64px}
.svc:first-child{padding-top:0}
.svc:last-child{border-bottom:0;padding-bottom:0}
.svc__numeral{position:absolute;right:0;top:48px;font-family:var(--serif);font-size:clamp(8rem,16vw,15rem);font-weight:300;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(191,168,122,.22);pointer-events:none;user-select:none;transform:translate3d(0,var(--ny,0),0);transition:-webkit-text-stroke-color 1s var(--ease)}
.svc:first-child .svc__numeral{top:-48px}
.svc.is-current .svc__numeral{-webkit-text-stroke-color:rgba(191,168,122,.4)}
.svc>*:not(.svc__numeral){position:relative;max-width:720px}
.svc__label{font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--primary-light);margin-bottom:24px}
.svc__title{font-family:var(--serif-jp);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.5;letter-spacing:.05em;margin-bottom:32px}
.svc__lead{font-size:1.05rem;line-height:1.95;letter-spacing:.04em;color:var(--text-soft);margin-bottom:48px;text-wrap:pretty}
.svc__items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));column-gap:32px;border-top:1px solid var(--border);margin-bottom:40px}
.svc__items li{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);font-size:.95rem;letter-spacing:.04em;color:var(--text)}
.svc__items li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px rgba(191,168,122,.4);transform:scale(0);transition:transform .8s var(--ease-cine) .3s}
.svc__items li.is-in::before,html:not(.js) .svc__items li::before{transform:scale(1)}
.svc__note{font-size:.85rem;line-height:1.9;color:var(--text-50);padding:24px 0 0;border-top:1px solid var(--border);margin-bottom:40px}
.svc__items+.svc__note{border-top:0;padding-top:0}

@media (max-width:1023px){
  .svc-layout{grid-template-columns:1fr;gap:48px;padding-top:96px;padding-bottom:96px}
  .svc-index{position:static;display:block}
  .svc-index__track{display:none}
  .svc-index ol{flex-direction:row;flex-wrap:wrap;gap:8px 32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 0}
  .svc-index a.is-active{transform:none}
}
@media (max-width:767px){
  .svc-layout{padding-top:64px;padding-bottom:64px}
  .svc{padding:64px 0}
  .svc__numeral{font-size:7rem;top:24px}
  .svc:first-child .svc__numeral{top:-24px}
}
@media (prefers-reduced-motion:reduce){
  .svc__items li::before{transform:scale(1)!important}
  .svc__numeral{transform:none!important}
}