/* ===== Scroll-lock sections v2: dashboard panel, progress rail, phone layout (css/pin-v2.css) =====
   Classes are added by js/pin-v2.js: .pin-v2 (section), .pin-v2-media (locked image), .pin-v2-grid,
   .pin-v2-card, .is-v2-active / .is-done (card state). Works for service pages and the homepage. */
.pin-v2 { --hud-bg: #161614; --hud-line: #2c2b27; --hud-txt: #cfc8bc; }

/* ---------- desktop: dashboard panel ---------- */
.pin-v2 .pin-v2-media {
  background: var(--hud-bg);
  border: 1px solid var(--hud-line);
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(20,18,15,.28), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  clip-path: none;
  transform: none !important;
}
.pin-v2 .pin-v2-media::before {                       /* faint tech grid on the frame */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pin-v2 .pin-v2-media .media-plate__frame,
.pin-v2 .pin-v2-media .story-photo__frame { display: none; }
.pin-v2 .pin-v2-media img {
  position: absolute; inset: 46px 14px 62px; width: calc(100% - 28px); height: calc(100% - 108px);
  object-fit: cover; border-radius: 9px; transform: none !important; translate: none !important; filter: none !important;
  opacity: 1 !important; z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0s linear .95s;                /* old image stays until the new one has covered it */
}
.pin-v2 .pin-v2-media img.is-active { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path .95s cubic-bezier(.7,0,.2,1); }

.pin-hud { position: absolute; left: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 14px; color: var(--hud-txt); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pin-hud--top { top: 0; height: 46px; }
.pin-hud--bottom { bottom: 0; height: 62px; letter-spacing: 0; text-transform: none; }
.pin-hud__dots { display: flex; gap: 6px; }
.pin-hud__dots i { width: 7px; height: 7px; border-radius: 50%; background: #3d3b36; }
.pin-hud__dots i:first-child { background: var(--red); }
.pin-hud__step b { color: #fff; font-weight: 700; }
.pin-hud__live { margin-left: auto; display: flex; align-items: center; gap: 7px; color: #8fd3a6; }
.pin-hud__live i { width: 7px; height: 7px; border-radius: 50%; background: #3bbf6b; box-shadow: 0 0 0 0 rgba(59,191,107,.6); animation: hud-live 1.8s ease-out infinite; }
.pin-hud__title { flex: 1; min-width: 0; color: #fff; font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-hud__segs, .pin-mbar__segs { display: flex; gap: 4px; flex: none; }
.pin-hud__segs i, .pin-mbar__segs i { width: 22px; height: 3px; border-radius: 2px; background: #3d3b36; transition: background .4s ease; }
.pin-hud__segs i.is-on, .pin-mbar__segs i.is-on { background: var(--red); }
.pin-hud__segs i.is-now, .pin-mbar__segs i.is-now { background: #ff5a68; box-shadow: 0 0 10px rgba(255,90,104,.7); }
.pin-hud__scan { position: absolute; z-index: 4; top: 46px; bottom: 62px; left: 14px; width: 2px; background: #ff5a68; box-shadow: 0 0 18px 3px rgba(255,90,104,.55); opacity: 0; pointer-events: none; }
.pin-hud__scan.is-run { animation: hud-scan .95s cubic-bezier(.7,0,.2,1); }
@keyframes hud-scan { 0% { opacity: 1; transform: translateX(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--scan-w, 520px)); } }
@keyframes hud-live { 70% { box-shadow: 0 0 0 7px rgba(59,191,107,0); } 100% { box-shadow: 0 0 0 0 rgba(59,191,107,0); } }

/* ---------- cards: progress rail + numbered nodes ---------- */
.pin-v2 .pin-v2-grid { position: relative; }
.pin-v2 .pin-v2-grid > .pin-rail { position: absolute; grid-column: auto; grid-row: auto; margin: 0; width: 2px; background: var(--border); border-radius: 2px; pointer-events: none; z-index: 0; opacity: 1 !important; transform: none !important; }
.pin-rail__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--rail, 0) * 100%); background: linear-gradient(var(--red), #ff5a68); border-radius: 2px; box-shadow: 0 0 12px rgba(190,30,45,.45); }
.pin-v2 .pin-v2-grid > .pin-v2-card {
  position: relative; z-index: 1;
  border: 0 !important; box-shadow: none !important; background: none !important; transform: none !important;
  padding: .35rem 0 0 3.6rem !important; opacity: 1 !important;
}
.pin-v2 .pin-oldnum { display: none !important; }
.pin-node { position: absolute; left: 0; top: .2rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--muted); background: #fffdf9; border: 1px solid var(--border); transition: color .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.pin-v2-card.is-done .pin-node { color: var(--red); border-color: var(--red); }
.pin-v2-card.is-v2-active .pin-node { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px rgba(190,30,45,.12), 0 8px 22px rgba(190,30,45,.35); }
/* dim the text of inactive cards, never the node, so the rail never shows through it */
.pin-v2-ready .pin-v2 .pin-v2-card > :not(.pin-node):not(.pin-card-media) { opacity: .42; transition: opacity .45s ease; }
.pin-v2-ready .pin-v2 .pin-v2-card.is-v2-active > :not(.pin-node) { opacity: 1; }
.pin-v2 .pin-v2-card h3, .pin-v2 .pin-v2-card h4 { font-size: 1.12rem; margin-top: .35rem; }
.pin-card-media, .pin-mbar { display: none; }

/* ---------- phones: image in each card, slim sticky progress bar ---------- */
@media (max-width: 820px) {
  .pin-v2 .pin-v2-media { display: none !important; }
  .pin-v2 .pin-v2-grid { grid-template-columns: minmax(0, 1fr) !important; }   /* long titles in the bar must not widen the column */
  .pin-v2 .pin-v2-grid > * { min-width: 0; }
  .pin-v2 .pin-v2-grid > .pin-v2-card { padding-left: 3rem !important; margin-bottom: 2.25rem; }
  .pin-v2-ready .pin-v2 .pin-v2-card > * { opacity: 1 !important; }        /* everything readable on phones */
  .pin-node { width: 30px; height: 30px; font-size: .68rem; }
  .pin-card-media { display: block; position: relative; margin: .2rem 0 1rem; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #e9e1d4; box-shadow: 0 16px 34px rgba(28,28,26,.12); clip-path: inset(0 0 0 0 round 12px); }
  .pin-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; transform: none !important; }
  .pin-card-media::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .pin-v2-ready .pin-card-media { transition: clip-path .9s cubic-bezier(.7,0,.2,1); }
  .pin-v2-ready .pin-card-media:not(.is-in) { clip-path: inset(0 100% 0 0 round 12px); }
  .pin-v2 .pin-v2-grid > .pin-mbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 6;
    grid-column: 1 / -1; margin: 0 0 1.4rem; padding: 0 12px; height: 44px; border-radius: 12px; opacity: 1 !important; transform: none !important;
    background: rgba(22,22,20,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #cfc8bc; font-size: .72rem; font-variant-numeric: tabular-nums; box-shadow: 0 10px 26px rgba(20,18,15,.25);
  }
  .pin-mbar__step b { color: #fff; font-size: .82rem; }
  .pin-mbar__title { flex: 1; min-width: 0; color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pin-mbar__segs i { width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-v2 .pin-v2-media img, .pin-v2 .pin-v2-media img.is-active, .pin-card-media { transition: none !important; }
  .pin-hud__live i { animation: none; }
}