.performance-site #expertise.training-section { background: #141512; color: #f5f5ef; padding: clamp(64px,7vw,104px) 24px; min-height: 0; overflow: hidden; }
.training-shell { max-width: 1232px; margin-inline: auto; }
.training-header { margin-bottom: 48px; }
.performance-site .training-header .design-script { margin-bottom: 16px; color: #ff852e; }
.performance-site #training-heading { margin: 0; font-size: clamp(38px,4.8vw,68px); line-height: .98; }
#training-heading > span { color: #ff852e; }
.training-header > p:last-child { max-width: 590px; color: #b8bab0; font-size: 15px; line-height: 1.75; margin: 24px 0 0; }
.training-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; align-items: start; }
.training-preview { min-width: 0; }

@media (min-width: 1024px) {
  /* Clip the decoration without creating a scroll container for sticky. */
  .performance-site #expertise.training-section { overflow: clip; }
  .training-preview { position: sticky; top: 104px; align-self: start; }
}
/* ===== VIDEO PLAYER MOCKUP ===== */
.performance-site #expertise a.training-thumbnail {
  position: relative;
  display: block;
  background: #0d0f0c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.85),
              0 0 0 1px rgba(255, 255, 255, 0.05),
              0 10px 30px -5px rgba(255, 133, 46, 0.18);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
  text-decoration: none;
  cursor: pointer;
}

.performance-site #expertise a.training-thumbnail:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 133, 46, 0.45);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.95),
              0 0 0 1px rgba(255, 133, 46, 0.4),
              0 18px 45px -5px rgba(255, 133, 46, 0.32);
}

.v-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #090a08;
}

.v-poster {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.training-thumbnail:hover .v-poster {
  transform: scale(1.028);
  filter: brightness(1.04) contrast(1.02);
}

.v-ambient-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 8, 0.65) 0%, rgba(8, 10, 8, 0) 25%, rgba(8, 10, 8, 0) 65%, rgba(8, 10, 8, 0.85) 100%);
}

/* Center Play Button */
.v-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.v-play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin-top: -38px;
  margin-left: -38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 133, 46, 0.65);
  animation: vPlayPulse 2.4s infinite ease-out;
}

@keyframes vPlayPulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.48); opacity: 0; }
}

.v-play-btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(15, 17, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 133, 46, 0.85);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 133, 46, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff852e;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-play-btn svg {
  margin-left: 3px;
  transition: transform 0.3s ease;
}

.training-thumbnail:hover .v-play-btn {
  transform: scale(1.12);
  background: linear-gradient(135deg, #ff852e 0%, #ff5e14 100%);
  border-color: #ffaa6e;
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 45px rgba(255, 133, 46, 0.85);
}

.training-thumbnail:hover .v-play-btn svg {
  transform: scale(1.06);
}

/* Bottom Controls */
.v-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 14px 10px;
  background: linear-gradient(to top, rgba(9, 10, 8, 0.85) 0%, rgba(9, 10, 8, 0.4) 65%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.v-progress-container {
  position: relative;
  width: 100%;
  padding: 3px 0;
}

.v-progress-bg {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  transition: height 0.25s ease;
}

.training-thumbnail:hover .v-progress-bg {
  height: 5px;
}

.v-progress-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.38);
  border-radius: 4px;
}

.v-progress-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #e5a93c 0%, #ff852e 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(255, 133, 46, 0.6);
}

.v-scrubber-thumb {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ff852e;
  box-shadow: 0 0 8px rgba(255, 133, 46, 0.95);
  transition: transform 0.2s ease;
}

.training-thumbnail:hover .v-scrubber-thumb {
  transform: translateY(-50%) scale(1.15);
}

.v-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v-ctrl-left,
.v-ctrl-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f5ef;
  opacity: 0.9;
  transition: opacity 0.2s, color 0.2s;
}

.training-thumbnail:hover .v-btn-icon {
  opacity: 1;
}

.v-ctrl-vol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.v-vol-slider {
  display: inline-block;
  width: 32px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.v-vol-level {
  display: block;
  height: 100%;
  background: #f5f5ef;
}

.v-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #d1d3c8;
}
.training-presenter { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid #ffffff29; }
.training-presenter strong { display: block; font-family: 'Outfit',sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.035em; }
.training-presenter > span > span { display: block; font-size: 11px; color: #b8bab0; margin-top: 4px; }
.training-free { color: #ff9a56; font-size: 9px; letter-spacing: .08em; border: 1px solid #ff852e60; padding: 8px 10px; white-space: nowrap; }
.training-preview-note { font-size: 13px; line-height: 1.7; color: #b8bab0; margin-top: 18px; }
.training-list-label { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #b8bab0; margin-bottom: 18px; }
.training-list-label > span { color: #ff9a56; }
.training-module { border-top: 1px solid #ffffff35; }
.training-module:last-of-type { border-bottom: 1px solid #ffffff35; }
.training-module summary { display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; align-items: start; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; }
.training-module summary::-webkit-details-marker { display: none; }
.training-number { font-family: 'Caveat',cursive; font-size: 32px; line-height: 1; color: #ff852e; }
.training-summary { display: block; }
.training-module-title { display: block; font-family: 'Outfit',sans-serif; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.training-benefit { display: block; font-size: 13px; line-height: 1.65; color: #b8bab0; margin-top: 10px; }
.training-toggle { display: block; font-size: 25px; line-height: 1; color: #c7c9bc; text-align: center; transition: transform .25s; }
.training-module[open] .training-toggle { transform: rotate(45deg); color: #ff852e; }
.training-module[open] .training-module-title { color: #ff9a56; }
.training-detail { padding: 0 40px 24px 54px; }
.training-detail p { font-size: 14px; line-height: 1.8; color: #c7c9bf; margin: 0; }
.training-module[open] .training-detail { animation: training-detail-in .9s ease both; }
@keyframes training-detail-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.training-action { margin-top: 28px; }
.training-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; padding: 18px 24px; text-decoration: none; }
.training-cta > span { font-size: 20px; line-height: 1; }
.training-action p { color: #a7aa9c; font-size: 11px; margin-top: 14px; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .training-module.training-reveal { animation: training-row-in .65s ease both; animation-delay: var(--training-delay,0ms); } }
@keyframes training-row-in { from { transform: translateY(16px); } to { transform: translateY(0); } }
@media (max-width: 1023px) { .training-layout { gap: 32px; } .training-module-title { font-size: 24px; } .training-module summary { gap: 10px; grid-template-columns: 28px minmax(0,1fr) 20px; } .training-detail { padding-left: 38px; padding-right: 20px; } }
@media (max-width: 767px) {
  .training-layout { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .training-header { margin-bottom: 28px; }
  .training-header > p:last-child { font-size: 14px; margin-top: 18px; }
  .performance-site #expertise a.training-thumbnail { border-radius: 12px; }
  .v-play-ring { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; }
  .v-play-btn { width: 56px; height: 56px; }
  .v-play-btn svg { width: 22px; height: 22px; margin-left: 2px; }
  .v-controls { padding: 12px 10px 8px; gap: 6px; }
  .v-vol-slider { display: none; }
  .v-ctrl-left, .v-ctrl-right { gap: 8px; }
  .training-presenter { gap: 12px; }
  .training-presenter > span > span { font-size: 10px; }
  .training-free { font-size: 8px; padding: 7px; }
  .training-cta { width: 100%; gap: 16px; }
  .training-module-title { font-size: 24px; }
  .training-detail { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .training-module[open] .training-detail { animation: none; } .training-play,.training-toggle { transition: none; } }
.performance-site .training-header .design-script { display: inline-block; transform-origin: left bottom; }

/* Decorative layers stay behind the interactive content. */
.performance-site #expertise.training-section { position: relative; isolation: isolate; }
.training-shell { position: relative; z-index: 1; }
.training-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.training-warm-light { position: absolute; left: -16%; top: 12%; width: 80%; height: 95%; background: radial-gradient(ellipse at center,rgba(228,102,25,.18) 0%,rgba(177,74,20,.07) 38%,transparent 68%); animation: training-light-drift 20s ease-in-out infinite alternate; }
.training-contours { position: absolute; top: -36px; right: -64px; width: min(52vw,760px); height: auto; color: #df8a4b; opacity: .17; stroke-width: 1; }
.performance-site .training-header .design-script { margin-bottom: 26px; }
@keyframes training-light-drift { from { transform: translate(-3%,-2%) scale(.95); opacity: .65; } to { transform: translate(7%,5%) scale(1.06); opacity: 1; } }
@media (max-width: 767px) {
 .training-warm-light { left: -45%; top: 4%; width: 140%; height: 58%; background: radial-gradient(ellipse at center,rgba(228,102,25,.1),transparent 68%); }
 .training-contours { width: 90vw; top: -20px; right: -35%; opacity: .1; }
 .performance-site .training-header .design-script { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .training-warm-light { animation: none; opacity: .75; transform: none; } }

/* Compact section spacing on mobile. */
@media (max-width: 767px) {
 .performance-site #expertise.training-section { padding-block: 48px; }
}