/* ============================================================
   service-training.css
   Extracted from <style> block in service-training.html.
   ============================================================ */

/* ========== HERO · Learning Console ========== */
.trn-hero-svg { width: 100%; height: auto; max-width: 480px; display: block; margin: 0 auto; }

@keyframes trnLearnerStep {
  0%   { transform: translate(70px, 360px); }
  20%  { transform: translate(70px, 360px); }
  25%  { transform: translate(170px, 280px); }
  45%  { transform: translate(170px, 280px); }
  50%  { transform: translate(270px, 200px); }
  70%  { transform: translate(270px, 200px); }
  75%  { transform: translate(370px, 120px); }
  98%  { transform: translate(370px, 120px); }
  100% { transform: translate(70px, 360px); }
}
@keyframes trnBadgeLight {
  0%, 100% { fill: rgba(11,30,63,.15); }
  50%      { fill: #1E63E9; }
}
@keyframes trnL4Glow {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,107,53,0)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(255,107,53,.5)); }
}
@keyframes trnRingFill {
  to { stroke-dashoffset: 0; }
}
@keyframes trnTypeLine {
  0%, 100% { width: 0; }
  10%, 90% { width: 100%; }
}
@keyframes trnPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.trn-learner { animation: trnLearnerStep 8s ease-in-out infinite; }
.trn-badge-1 { animation: trnBadgeLight 8s linear infinite; }
.trn-badge-2 { animation: trnBadgeLight 8s linear infinite; animation-delay: 2s; }
.trn-badge-3 { animation: trnBadgeLight 8s linear infinite; animation-delay: 4s; }
.trn-badge-4 { animation: trnL4Glow 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.trn-ring    { stroke-dasharray: 188; stroke-dashoffset: 188; animation: trnRingFill 4s ease-out forwards infinite; }
/* Hero label chips, nudged 5px outward from the shared .nl-* defaults so
   they clear the elements they describe (header strip up top, lab activity
   strip at the bottom). Scoped to .topo-trn so other service pages keep
   the shared positions. */
.topo-trn .nl-1 { top: -4px; }    /* L1 Foundation · above the cohort header */
.topo-trn .nl-2 { top: -4px; }    /* L2 Associate · above the learner stats */
.topo-trn .nl-3 { top: 464px; }   /* L3 Professional · below the lab strip */
.topo-trn .nl-4 { top: 464px; }   /* L4 Expert · below the lab strip */
.topo-trn .nl-5 { top: -22px; }   /* Cohort progress · top centre */
.topo-trn .nl-6 { top: 504px; }   /* Capstone outcome · bottom centre */

.trn-dot     { animation: trnPulse 1.8s ease-in-out infinite; }
.trn-dot.d2 { animation-delay: .25s; }
.trn-dot.d3 { animation-delay: .5s; }
.trn-dot.d4 { animation-delay: .75s; }
.trn-dot.d5 { animation-delay: 1s; }
.trn-dot.d6 { animation-delay: 1.25s; }

/* ========== DELIVERY PANEL SVGs (training-specific) ========== */
.d-vis { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }

/* In-company — Office boardroom with cohort circles */
@keyframes inCompanySeatPulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}
.d-seat { animation: inCompanySeatPulse 2s ease-in-out infinite; }
.d-seat.s2 { animation-delay: .2s; }
.d-seat.s3 { animation-delay: .4s; }
.d-seat.s4 { animation-delay: .6s; }
.d-seat.s5 { animation-delay: .8s; }
.d-seat.s6 { animation-delay: 1s; }
@keyframes inCompanyBoardWipe {
  0%, 100% { transform: scaleX(0); }
  20%, 80% { transform: scaleX(1); }
}
.d-board-write { animation: inCompanyBoardWipe 3s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }

/* Virtual instructor-led — video grid */
@keyframes vilTilePulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
.d-tile { animation: vilTilePulse 2.2s ease-in-out infinite; }
.d-tile.t2 { animation-delay: .3s; }
.d-tile.t3 { animation-delay: .6s; }
.d-tile.t4 { animation-delay: .9s; }
@keyframes vilCamGlow {
  0%, 100% { fill: #FF6B35; }
  50%      { fill: rgba(255,107,53,.4); }
}
.d-cam-led { animation: vilCamGlow 1.2s ease-in-out infinite; }

/* Open enrolment — Calendar with seats filling */
@keyframes oeSeatFill {
  0%, 20% { fill: rgba(11,30,63,.15); }
  40%, 100% { fill: #1E63E9; }
}
.d-cal-seat { animation: oeSeatFill 4s ease-in-out infinite; }
.d-cal-seat.k1 { animation-delay: .2s; }
.d-cal-seat.k2 { animation-delay: .5s; }
.d-cal-seat.k3 { animation-delay: .8s; }
.d-cal-seat.k4 { animation-delay: 1.1s; }
.d-cal-seat.k5 { animation-delay: 1.4s; }
.d-cal-seat.k6 { animation-delay: 1.7s; }

/* Hybrid blended — combination orbit */
@keyframes hybOrbit {
  to { transform: rotate(360deg); }
}
/* origin is the hub at view-box (100,100), not the group's own box */
.d-hyb-orbit { animation: hybOrbit 12s linear infinite; transform-origin: 100px 100px; transform-box: view-box; }

/* ========== SAMPLE 5-DAY SYLLABUS ========== */
.syl-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(11,30,63,.1);
}
.syl-tab {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.12);
  color: #4D5A77;
  padding: 12px 20px;
  border-radius: 12px;
  font: 700 12px/1 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
}
.syl-tab.active {
  background: #0B1E3F;
  border-color: #0B1E3F;
  color: var(--c-white);
}
.syl-tab:hover:not(.active) {
  border-color: #1E63E9;
  color: #1E63E9;
}
.syl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.syl-grid[hidden] { display: none; }
@media (max-width: 1080px) { .syl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .syl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .syl-grid { grid-template-columns: 1fr; } }
.syl-card {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 14px;
  padding: 22px 20px;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.syl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(11,30,63,.08);
}
.syl-day-num {
  display: inline-block;
  font: 700 11px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  background: rgba(255,107,53,.1);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.syl-card h4 {
  font: 700 1.02rem/1.25 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 12px;
}
.syl-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.syl-card ul li {
  font: 500 .85rem/1.4 'Inter', sans-serif;
  color: #4D5A77;
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.syl-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1E63E9;
}
.syl-out {
  display: block;
  padding-top: 12px;
  border-top: 1px dashed rgba(11,30,63,.18);
  font: 600 .8rem/1.4 'JetBrains Mono', monospace;
  color: #0B1E3F;
}
.syl-out strong { color: #FF6B35; }

/* ========== OPEN ENROLMENT CALENDAR ========== */
.cal-list {
  margin-top: 40px;
  display: grid;
  gap: 12px;
}
.cal-row {
  display: grid;
  grid-template-columns: 80px 1.5fr 1fr 1fr 1fr 140px;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cal-row:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 30px rgba(11,30,63,.06);
  border-color: rgba(30,99,233,.3);
}
.cal-month {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  border-right: 1px solid rgba(11,30,63,.1);
  padding-right: 18px;
}
.cal-month .cm-day {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0B1E3F;
  display: block;
  line-height: 1;
}
.cal-month .cm-mo {
  font-size: 10px;
  font-weight: 700;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: .12em;
  display: block;
  margin-top: 6px;
}
.cal-course {
  font-family: 'Space Grotesk', sans-serif;
}
.cal-course .cc-title {
  font: 700 1rem/1.2 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  display: block;
  margin-bottom: 4px;
}
.cal-course .cc-lvl {
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: #1E63E9;
  background: rgba(30,99,233,.1);
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cal-meta {
  font: 500 .82rem/1.4 'Inter', sans-serif;
  color: #4D5A77;
}
.cal-meta .cmt-label {
  display: block;
  font: 700 9px/1 'JetBrains Mono', monospace;
  color: rgba(11,30,63,.5);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.cal-meta strong { color: #0B1E3F; font-weight: 600; }
.cal-seats-bar {
  width: 100%;
  height: 6px;
  background: rgba(11,30,63,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.cal-seats-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #FF6B35, #1E63E9);
  border-radius: 3px;
}
.cal-cta {
  background: #0B1E3F;
  color: var(--c-white);
  padding: 10px 18px;
  border-radius: 999px;
  font: 700 12px/1 'Space Grotesk', sans-serif;
  text-decoration: none;
  text-align: center;
  letter-spacing: .03em;
  transition: background .25s ease, transform .25s ease;
}
.cal-cta:hover { background: #1E63E9; transform: translateX(2px); }
@media (max-width: 1100px) {
  .cal-row { grid-template-columns: 70px 1.5fr 1fr; gap: 14px; }
  .cal-meta.cm-loc, .cal-meta.cm-lang, .cal-cta { grid-column: span 1; }
  .cal-row > .cal-meta:nth-of-type(3) { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed rgba(11,30,63,.12); }
  .cal-cta { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 620px) {
  .cal-row { grid-template-columns: 60px 1fr; }
  .cal-month { padding-right: 12px; }
  .cal-row > .cal-meta { grid-column: 1 / -1; padding-top: 6px; }
}

/* ========== LAB ENVIRONMENT ANATOMY ========== */
.lab-anatomy {
  margin-top: 40px;
  padding: 50px clamp(20px, 4vw, 60px);
  background: linear-gradient(140deg, rgba(11,30,63,.04), rgba(30,99,233,.05));
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 920px) {
  .lab-anatomy { grid-template-columns: 1fr; }
}
.lab-svg {
  width: 100%;
  height: auto;
  max-width: 520px;
}
.lab-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
.lab-feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.lab-feat-num {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 10px;
  background: #0B1E3F;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Space Grotesk', sans-serif;
}
.lab-feat-body h4 {
  font: 700 .98rem/1.25 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 4px;
}
.lab-feat-body p {
  font: 500 .88rem/1.5 'Inter', sans-serif;
  color: #4D5A77;
  margin: 0;
}

@keyframes labFlow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.lab-pkt {
  offset-path: path('M 80 110 C 140 110 180 110 220 110 C 280 110 320 110 380 110');
  animation: labFlow 2.4s ease-in-out infinite;
}
.lab-pkt.p2 { animation-delay: .8s; }
.lab-pkt.p3 { animation-delay: 1.6s; }
@keyframes labLed {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
.lab-led { animation: labLed 1.4s ease-in-out infinite; }
.lab-led.l2 { animation-delay: .25s; }
.lab-led.l3 { animation-delay: .5s; }
.lab-led.l4 { animation-delay: .75s; }

/* ========== INSTRUCTOR PROFILE CARDS ========== */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 900px) { .ins-grid { grid-template-columns: 1fr; } }
.ins-card {
  position: relative;
  background: #0B1E3F;
  color: var(--c-white);
  padding: 32px 26px 26px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s ease, box-shadow .4s ease;
}
.ins-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(11,30,63,.25);
}
.ins-card::before {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,107,53,.35), transparent 65%);
  z-index: -1;
}
.ins-tag {
  display: inline-block;
  font: 700 10px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  background: rgba(255,107,53,.12);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ins-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1E63E9, #FF6B35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 1.4rem/1 'Space Grotesk', sans-serif;
  color: var(--c-white);
  margin-bottom: 18px;
  border: 3px solid rgba(255,255,255,.15);
}
.ins-card h3 {
  font: 700 1.15rem/1.2 'Space Grotesk', sans-serif;
  margin: 0 0 4px;
  color: var(--c-white);
}
.ins-role {
  font: 500 .85rem/1.4 'Inter', sans-serif;
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
}
.ins-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}
.ins-meta li {
  font: 500 .8rem/1.3 'Inter', sans-serif;
  color: rgba(255,255,255,.85);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ins-meta li::before {
  content: '·';
  color: #FF6B35;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
}
.ins-skills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ins-skill {
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.08);
  padding: 6px 10px;
  border-radius: 999px;
}