:root {
  --svc-grain: url("/assets/renewal/img/noise.svg");
}

.svc-main { display: block; }
.svc-main > .sec { padding-block: var(--k-sec-y-s); }
.svc-hero { padding-top: var(--k-sp-6); }
.svc-title {
  font-weight: var(--k-head-w); font-size: var(--k-fs-hero); line-height: 1.25;
  letter-spacing: var(--k-head-ls); color: var(--k-ink);
}
.svc-tagline { font-size: var(--k-fs-lead); color: var(--k-ink-mid); }
.svc-prose { display: grid; gap: var(--k-sp-2); }
.svc-lead { font-weight: 700; font-size: var(--k-fs-lead); }
.svc-feats { display: grid; gap: var(--k-sp-2); }
.svc-feats li { padding-left: var(--k-sp-3); position: relative; }
.svc-feats li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 3px; background: var(--k-accent);
}
.svc-shots { display: grid; gap: var(--k-sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .svc-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-shots figcaption { margin-top: var(--k-sp-1); font-size: var(--k-fs-xs); color: var(--k-ink-sub); }
.svc-week { display: grid; gap: var(--k-sp-2); }
.svc-week li { display: grid; gap: 2px; }
.svc-day {
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .2em; color: var(--k-accent);
}

.shot {
  display: block; width: 100%; padding: 0; margin: 0;
  background: #0b0c0e; border: 1px solid #0b0c0e; border-radius: var(--k-rs);
  cursor: zoom-in; touch-action: manipulation;
  box-shadow: var(--k-shadow-s);
}
.shot img { width: 100%; height: auto; border-radius: var(--k-rs); }
@media (hover: hover) and (pointer: fine) {
  .shot { transition: filter .16s ease; }
  .shot:hover { filter: brightness(1.08); }
}

.svc-cta { display: grid; justify-items: start; gap: var(--k-sp-2); }
.svc-cta h2 { font-weight: var(--k-head-w); font-size: var(--k-fs-h2); letter-spacing: var(--k-head-ls); line-height: 1.4; }
.svc-cta .btn { margin-top: var(--k-sp-1); cursor: pointer; }
.svc-cta .btn[aria-disabled="true"] { pointer-events: none; cursor: default; filter: grayscale(.85) brightness(.7); }
.svc-pending {
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .24em; color: var(--k-ink-sub);
}

.svc-nav {
  display: grid; gap: var(--k-sp-2); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .svc-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-nav a {
  display: grid; gap: 2px; min-height: 44px; padding: var(--k-sp-2) var(--k-sp-3);
  text-decoration: none; border: 1px solid var(--k-line-strong); border-radius: var(--k-rs);
  background: rgba(22, 23, 26, .72);
}
.svc-next { text-align: right; }
@media (min-width: 760px) { .svc-back { text-align: center; } }
.svc-dir { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .2em; color: var(--k-accent); }
.svc-name { font-weight: 700; font-size: var(--k-fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .svc-nav a { transition: border-color .16s ease, color .16s ease; }
  .svc-nav a:hover { border-color: var(--k-accent); color: var(--k-accent); }
}

.svc-lightbox {
  width: min(96vw, 1440px); max-width: none; max-height: 92dvh; padding: 0;
  background: #0b0c0e; color: var(--k-ink); border: 1px solid var(--k-line-strong); border-radius: var(--k-rs);
  box-shadow: var(--k-shadow-m);
}
.svc-lightbox::backdrop { background: rgba(8, 8, 10, .82); }
.svc-lightbox img { width: 100%; height: auto; max-height: calc(92dvh - 56px); object-fit: contain; }
.svc-lightbox form { display: flex; justify-content: flex-end; padding: var(--k-sp-1); }
.svc-lb-close {
  min-height: 44px; padding: 0 var(--k-sp-3); cursor: pointer; touch-action: manipulation;
  font: inherit; font-weight: 700; font-size: var(--k-fs-sm); color: var(--k-ink);
  background: transparent; border: 1px solid var(--k-line-strong); border-radius: var(--k-rs);
}
@media (hover: hover) and (pointer: fine) {
  .svc-lb-close { transition: border-color .16s ease; }
  .svc-lb-close:hover { border-color: var(--k-accent); }
}
.svc-lightbox[open] { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@starting-style { .svc-lightbox[open] { opacity: 0; transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .svc-lightbox[open] { transition: opacity .2s ease; }
  @starting-style { .svc-lightbox[open] { transform: none; } }
}