/* KSM B2B site — base + responsive (shared by all pages) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; font-family: var(--font-sans); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { max-width: 100%; }

@keyframes ksmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ksmRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Hero gold-gradient line — white→gold with a gentle luminous pulse */
.ksm-hero-gold {
  background-image: linear-gradient(96deg, #ffffff 0%, #fbe7c4 34%, var(--gold-500) 64%, var(--gold-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0 rgba(201,162,75,0));
}
@media (prefers-reduced-motion: no-preference) {
  .ksm-hero-gold { animation: ksmGoldPulse 3.6s var(--ease) infinite; }
}
@keyframes ksmGoldPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(201,162,75,0.18)) brightness(1); }
  50%      { filter: drop-shadow(0 0 18px rgba(201,162,75,0.45)) brightness(1.08); }
}

/* ---------- Event — "journey" stage flow (quote-to-cash style sweep) ---------- */
.ksm-flow-track { position: absolute; top: 34px; left: 10%; right: 10%; height: 2px; z-index: 0; }
.ksm-flow-base { position: absolute; inset: 0; background: rgba(255,255,255,0.14); }
.ksm-flow-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-600), var(--gold-500)); box-shadow: 0 0 12px rgba(201,162,75,.6); }
.ksm-flow-comet { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 10px 3px rgba(252,224,153,.85); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ksm-flow-fill { animation: ksmFlowSweep 7s linear infinite; }
  .ksm-flow-comet { animation: ksmCometMove 7s linear infinite; }
  .ksm-stage-circle { animation: ksmStageGlow 7s linear infinite; }
}
@keyframes ksmFlowSweep {
  0%   { transform: scaleX(0); opacity: 1; }
  88%  { transform: scaleX(1); opacity: 1; }
  96%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
@keyframes ksmCometMove {
  0%   { left: 0%; opacity: 1; }
  88%  { left: 100%; opacity: 1; }
  96%  { left: 100%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}
@keyframes ksmStageGlow {
  0%   { background: var(--gold-500); transform: scale(1.08);
         box-shadow: 0 0 0 7px rgba(201,162,75,.18), 0 0 26px rgba(201,162,75,.6); }
  18%  { background: var(--navy-700); transform: scale(1); box-shadow: none; }
  100% { background: var(--navy-700); transform: scale(1); box-shadow: none; }
}

/* image-slot empty state — make placeholders feel branded */
image-slot {
  background: linear-gradient(155deg, #0c3461, #0b1b2b);
  color: rgba(255,255,255,0.5);
  border-radius: 12px;
}

/* Hero headline — keep each phrase on a single line (never 3 lines) */
.ksm-heroline { white-space: nowrap; display: inline-block; }
@media (max-width: 700px) {
  .ksm-heroline { font-size: clamp(1rem, 5.2vw, 2.3rem); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ksm-desktop-nav { display: none !important; }
  .ksm-burger { display: inline-flex !important; }
  .ksm-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ksm-hero-visual { max-width: 460px; }
  .ksm-twocol { grid-template-columns: 1fr !important; gap: 44px !important; }
  .ksm-course-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .ksm-serve-grid { grid-template-columns: 1fr !important; }
  .ksm-footer { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .ksm-segment { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ksm-steps { grid-template-columns: 1fr !important; }
  .ksm-pillars { grid-template-columns: 1fr 1fr !important; }
  .ksm-web-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ksm-progression { flex-direction: column !important; }
  .ksm-flow-track { display: none !important; }
  .ksm-course-overview { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ksm-course-modules { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ksm-learn-grid { grid-template-columns: 1fr 1fr !important; }
  .ksm-learn-list { grid-template-columns: 1fr !important; }
  .ksm-related-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .ksm-hero-stats { gap: 28px !important; }
  .ksm-course-grid-4 { grid-template-columns: 1fr !important; }
  .ksm-cred-grid { grid-template-columns: 1fr !important; }
  .ksm-footer { grid-template-columns: 1fr !important; }
  .ksm-pillars { grid-template-columns: 1fr !important; }
  .ksm-form-row { grid-template-columns: 1fr !important; }
  .ksm-learn-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Resources (interactive) ---------- */
@keyframes ksmScrollCue { 0% { transform: scaleY(0); transform-origin: top; }
  40% { transform: scaleY(1); transform-origin: top; }
  60% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: no-preference) {
  .ksm-scrollcue { animation: ksmScrollCue 2.2s var(--ease) infinite; }
}
.ksm-res-row:hover { padding-left: 22px !important; }
.ksm-res-row:hover .ksm-res-arrow { background: var(--gold-500); border-color: var(--gold-500) !important; }
.ksm-res-row:hover .ksm-res-arrow svg { stroke: var(--ink) !important; }
@media (max-width: 960px) {
  .ksm-res-editorial { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ksm-res-editorial > div:first-child { position: static !important; }
}