/* Shared services/portfolio controls; existing cards and other rails stay intact. */
[data-immersive-rail] { margin-inline: calc((100% - var(--rail-viewport, 100vw)) / 2); padding-inline: calc((var(--rail-viewport, 100vw) - 100%) / 2); scroll-margin-top: 120px; cursor: grab; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin; }
[data-immersive-rail]::-webkit-scrollbar { display: block; height: 7px; }
[data-immersive-rail][data-rail-ready] { scrollbar-width: none; }
[data-immersive-rail][data-rail-ready]::-webkit-scrollbar { display: none; }
[data-immersive-rail].is-dragging,
[data-immersive-rail].is-dragging a { cursor: grabbing; user-select: none; }
[data-immersive-rail] a,
[data-immersive-rail] img { -webkit-user-drag: none; }
[data-immersive-rail]:focus-visible { outline: 2px solid #c9ad73; outline-offset: -3px; }
.immersive-controls { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 26px; margin: 10px 0 0; min-height: 48px; }
.immersive-controls[hidden] { display: none; }
.immersive-hint { margin: 0; color: #9699a1; font-size: 10px; font-weight: 550; letter-spacing: .035em; white-space: nowrap; }
.immersive-hint span { display: inline-block; margin-right: 8px; color: #c6b183; font-size: 16px; vertical-align: -1px; }
.immersive-navigation { display: flex; align-items: center; gap: 10px; }
.immersive-count { min-width: 91px; color: #b2b4bb; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.immersive-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #4c473d; border-radius: 50%; background: #1a1c21; color: #d6bc86; font: inherit; font-size: 23px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.immersive-arrow:hover:not(:disabled) { border-color: #a38c60; background: #26272a; color: #f2ddae; }
.immersive-arrow:disabled { border-color: #31343a; color: #5d6069; cursor: default; }
.immersive-arrow:focus-visible,
.immersive-range:focus-visible { outline: 2px solid #d2b47c; outline-offset: 4px; }
.immersive-range { display: block; width: 100%; min-width: 0; height: 44px; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; }
.immersive-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #34353a; }
.immersive-range::-webkit-slider-thumb { width: 56px; height: 10px; margin-top: -3px; border: 1px solid #dfc991; border-radius: 999px; appearance: none; -webkit-appearance: none; background: #c5a76b; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.immersive-range::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: #34353a; }
.immersive-range::-moz-range-thumb { width: 56px; height: 8px; border: 1px solid #dfc991; border-radius: 999px; background: #c5a76b; }
.immersive-range:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .immersive-controls { grid-template-columns: minmax(70px, 1fr) auto; gap: 18px; margin-top: 0; }
  .immersive-hint { display: none; }
  .immersive-navigation { gap: 5px; }
  .immersive-count { min-width: 84px; font-size: 10px; }
  .immersive-range::-webkit-slider-thumb { width: 40px; }
  .immersive-range::-moz-range-thumb { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-arrow { transition: none; }
  [data-immersive-rail] { scroll-behavior: auto; }
}