/* Compact section icons for the desktop cinematic panel navigation. */
html.pm .pm-dots { right: 14px; }
html.pm .pm-dots ol { gap: 6px; }
html.pm .pm-dots li { height: 36px; }
html.pm .pm-line { top: 18px; bottom: 18px; background: rgba(212,185,136,.23); }
html.pm .pm-dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #a7a19d;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 50%;
  background: rgba(15,15,15,.88);
  backdrop-filter: blur(8px);
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
html.pm .pm-dots .pm-dot::before,
html.pm .pm-dots .pm-dot.on::before {
  position: static;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  -webkit-mask: var(--pm-icon) center / contain no-repeat;
  mask: var(--pm-icon) center / contain no-repeat;
}
html.pm .pm-dots .pm-dot:hover,
html.pm .pm-dots .pm-dot:focus-visible {
  color: #d4b988;
  border-color: #d4b988;
  background: #1d1b19;
  transform: scale(1.06);
  outline: none;
}
html.pm .pm-dots .pm-dot.past { color: #c68489; }
html.pm .pm-dots .pm-dot.on {
  color: #fff;
  border-color: #d4b988;
  background: #a94f59;
  box-shadow: 0 0 0 4px rgba(169,79,89,.18), 0 0 18px rgba(169,79,89,.32);
}
html.pm .pm-dots .pm-dot.on::after {
  width: 34px;
  height: 34px;
  margin: -17px;
  border-color: rgba(212,185,136,.7);
}
html.pm .pm-lab { right: 45px; background: rgba(17,17,17,.94); border-color: rgba(212,185,136,.32); }

/* Section IDs keep their icons correct when a panel is removed or reordered. */
html.pm .pm-dot[data-panel="top"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="work"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="showreel"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 4l3 5M14 4l3 5M10 12l5 3-5 3z'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="intro"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M8 14c-1.3-1.2-2-2.7-2-4a6 6 0 0 1 12 0c0 1.3-.7 2.8-2 4l-1 2H9z'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="offer"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='m8 7 1.5-3h5L16 7'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="experience"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.1 4.8 1.4 7L12 17.6 5.7 21l1.4-6.9L2 9.3l7-.8z'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="process"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M5 7v6c0 3 3 3 7 3h5M13 9l4 4-4 4'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="faq"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.7 2.7 0 1 1 4.6 2c-1 .9-2.1 1.3-2.1 3M12 17.5h.01'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="team"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-2a6 6 0 0 1 12 0v2zM16 5a3 3 0 0 1 0 6M17 14a5 5 0 0 1 4 5v1'/%3E%3C/svg%3E"); }
html.pm .pm-dot[data-panel="contact"] { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }

@media (max-height: 700px) {
  html.pm .pm-dots ol { gap: 2px; }
  html.pm .pm-dots li,
  html.pm .pm-dot { height: 32px; }
  html.pm .pm-dot { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html.pm .pm-dots .pm-dot,
  html.pm .pm-dots .pm-dot::after { transition: none; animation: none; }
}