/* ==========================================================================
   Service pages + services index (loaded together with case.css, which provides crumbs / stamp / CTA band / .h1)
   ========================================================================== */

/* hero */
.svc-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 28px 92px; background: var(--ivory); }
.svc-hero::before { content: none; }
.svc-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: clamp(560px, 72vh, 740px); margin-top: 18px; }
.svc-hero-copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; width: min(700px, 100%); text-align: center; }
.svc-hero-copy > :not(h1) { max-width: 600px; }
.svc-hero h1 { width: max-content; max-width: min(700px, 100%); font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.28; letter-spacing: 0.03em; text-wrap: balance; }
html[lang="en"] .svc-hero h1 { letter-spacing: 0; line-height: 1.14; }
.svc-def { font-family: var(--head); font-weight: 500; font-size: clamp(1.08rem, 1.7vw, 1.36rem); line-height: 1.9; color: var(--text); text-wrap: pretty; }
.svc-def::before { content: ""; display: block; width: 36px; height: 2px; margin: 0 auto 18px; background: var(--gold); }
.svc-hero .lede { max-width: 34em; font-size: 0.98rem; }
.svc-hero .hero-cta { justify-content: center; }

/* the corridor: case screenshots on two walls in perspective, drifting toward the reader (pen ref: shakuro "404 Photo Tunnel"), the middle kept clear for the copy */
.svc-tunnel { --wx: 720px; --cw: 210px; position: absolute; inset: -40px calc(50% - 50vw) -60px; overflow: hidden; perspective: 1000px; pointer-events: none;
  --clear: 350px;   /* half the copy column + air: no card is ever drawn behind the text */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--clear) - 90px), transparent calc(50% - var(--clear)), transparent calc(50% + var(--clear)), #000 calc(50% + var(--clear) + 90px), #000 100%); }
.tn-card { --s: -1; position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 13 / 16; margin: calc(var(--cw) * -0.615) 0 0 calc(var(--cw) * -0.5);
  border-radius: 10px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 22px 36px -28px rgba(16, 39, 30, 0.35);
  opacity: 0; animation: tunnel 33s linear infinite; animation-delay: calc(var(--i) * -33s / var(--n)); }   /* evenly spaced: each work once per pass */
.tn-r { --s: 1; }
.tn-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.28) sepia(0.12) contrast(0.88) brightness(1.06); }   /* one muted, near-paper palette for every game's art; the colour is still there */
@keyframes tunnel {
  0% { opacity: 0; transform: translate3d(calc(var(--s) * var(--wx)), var(--y), -2400px) rotateY(calc(var(--s) * -52deg)); }
  18%, 82% { opacity: 0.92; }
  100% { opacity: 0; transform: translate3d(calc(var(--s) * var(--wx)), var(--y), 520px) rotateY(calc(var(--s) * -52deg)); }
}
.static .tn-card { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tn-card { animation-play-state: paused; } }

/* when it fits */
.scn-list { display: grid; border-top: 1px solid var(--line); }
.scn-list li { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--line); transition: background 0.3s, padding 0.4s var(--ease); }
.scn-list li:hover { background: linear-gradient(90deg, rgba(226, 189, 114, 0.14), transparent); padding-left: 14px; }
.scn-list .n { font-family: var(--serif-latin); font-size: 1.5rem; font-weight: 600; color: var(--gold); }
.scn-list b { font-family: var(--head); font-size: 1.25rem; line-height: 1.55; }
.scn-list .ex { justify-self: end; text-align: right; font-weight: 700; color: var(--gold-lo); line-height: 1.5; }
.scn-list .ex small { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 500; color: var(--muted); text-transform: uppercase; }

/* process coverage */
.cov { justify-self: start; margin-top: 8px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; padding: 3px 12px; border-radius: var(--r); }
.cov.yes { background: #e3f1e6; color: #1d6b43; border: 1px solid #bfdcc6; }
.cov.yes::before { content: "✓ "; }
.cov.no { background: transparent; color: var(--muted); border: 1px dashed #c9bda4; }
.cov.flex { background: #fff3d6; color: var(--gold-lo); border: 1px solid #ecd9a4; }
.process-note { margin-top: 40px; max-width: 46em; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--muted); text-wrap: pretty; }

.more-row { margin-top: 36px; text-align: center; }

/* other services */
.others { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.others a { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform 0.4s var(--ease), border-color 0.3s; }
.others a:hover { transform: translateY(-4px); border-color: var(--gold); }
.others .ic { width: 38px; height: 38px; color: var(--gold-lo); }
.others b { display: block; font-family: var(--head); font-size: 1.15rem; line-height: 1.5; }
.others small { font-weight: 700; color: var(--gold-lo); }

/* index */
.svc-page .svc-grid { margin-top: 8px; }
.need-band { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px 48px; align-items: center; }
.need-band .lede { margin-top: 12px; }
.need-band .btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1020px) {
  .need-band { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .svc-tunnel { --wx: 600px; --cw: 180px; }
}
@media (max-width: 820px) {   /* the copy needs the full width: the corridor moves below it, as its own short strip */
  .svc-hero-grid { min-height: 0; gap: 8px; }
  .svc-tunnel { --wx: 50vw; --cw: 30vw; position: relative; inset: auto; order: 2; justify-self: start; width: 100vw; margin-inline: calc(50% - 50vw); height: clamp(230px, 64vw, 340px); perspective: 700px; --clear: 12vw; }
  .svc-hero-copy { gap: 20px; }
}
@media (max-width: 640px) {
  .scn-list li { grid-template-columns: 44px minmax(0, 1fr); padding: 20px 0; }
  .scn-list .ex { grid-column: 2; justify-self: start; text-align: left; }
  .scn-list b { font-size: 1.12rem; }
}